16/02/02 14:28:42.87 .net
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
URLﾘﾝｸ(jsdo.it) URLﾘﾝｸ(jsbin.com) URLﾘﾝｸ(jsfiddle.net) URLﾘﾝｸ(ideone.com)
■前スレ
+ JavaScript の質問用スレッド vol.127 +
ｽﾚﾘﾝｸ(hp板)
■過去スレ全集
URLﾘﾝｸ(www2.atpages.jp)
URLﾘﾝｸ(usamimi.info) (閲覧のみ)
■テンプレ案
URLﾘﾝｸ(fiddle.jshell.net)
■関連スレ
CSS・sass・less・stylus 初心者スレッド＝15th＝
ｽﾚﾘﾝｸ(hp板)
Canvasについて語ろう
ｽﾚﾘﾝｸ(hp板)
3:Name_Not_Found
16/02/02 14:29:14.64 .net
■FAQ
URLﾘﾝｸ(fiddle.jshell.net)
◆開発者ツール(Developer Tools)の基本的な使い方 (全部はURLﾘﾝｸ(fiddle.jshell.net) )
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- IE9- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
URLﾘﾝｸ(developer.apple.com)
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。)
4:Name_Not_Found
16/02/02 14:29:53.76 .net
■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に URLﾘﾝｸ(jsperf.com) にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様 ( URLﾘﾝｸ(fiddle.jshell.net) も参照 )
◆ Standard ECMA-262
URLﾘﾝｸ(bclary.com) (ECMAScript 3 HTML版)
URLﾘﾝｸ(www2u.biglobe.ne.jp) (ECMAScript 3 和訳)
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 5.1 HTML版)
URLﾘﾝｸ(tsofthome.appspot.com) (ECMAScript 5.1 和訳)
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 6 / ECMAScript 2015)
URLﾘﾝｸ(kangax.github.io) (ECMAScript 5 compatibility table)
URLﾘﾝｸ(kangax.github.io) (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
URLﾘﾝｸ(www.whatwg.org)
URLﾘﾝｸ(momdo.s35.xrea.com) (HTML5.1 部分訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (Web Storage 和訳)
5:Name_Not_Found
16/02/02 14:30:30.27 .net
■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (DOM Standard (DOM4) 和訳)
URLﾘﾝｸ(www.w3.org) (DOM3 Events)
URLﾘﾝｸ(www.w3.org) (UI Events)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (CSSOM 和訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
URLﾘﾝｸ(domparsing.spec.whatwg.org) (DOM Parsing and Serialization - innerHTML等)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (XMLHttpRequest 和訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (File API 和訳)
URLﾘﾝｸ(www.whatwg.org) (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
URLﾘﾝｸ(developer.mozilla.org)
◆ MSDN Library
URLﾘﾝｸ(msdn.microsoft.com) (Internet Explorer API)
URLﾘﾝｸ(msdn.microsoft.com) (JavaScript)
URLﾘﾝｸ(msdn.microsoft.com) (JScript)
URLﾘﾝｸ(msdn.microsoft.com) (DHTML)
◆ JavaScript Garden (ja)
URLﾘﾝｸ(bonsaiden.github.com)
◆ JSON (JavaScript Object Notation)
URLﾘﾝｸ(www.json.org)
■諸注意
vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の話題はvol.116から禁止されました。
vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。
本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。
ライブラリの話題はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。
6:Name_Not_Found
16/02/02 14:33:43.16 .net
■JavaScript主要ライブラリ・フレームワーク
jQuery
URLﾘﾝｸ(jquery.com)
jQuery UI
URLﾘﾝｸ(jqueryui.com)
jQuery Mobile
URLﾘﾝｸ(jquerymobile.com)
Lo-Dash
URLﾘﾝｸ(lodash.com)
Backbone.js
URLﾘﾝｸ(backbonejs.org)
Underscore.js
URLﾘﾝｸ(underscorejs.org)
AngularJS
URLﾘﾝｸ(angularjs.org)
Knockoutjs
URLﾘﾝｸ(knockoutjs.com)
RequireJS
URLﾘﾝｸ(requirejs.org)
D3.js
URLﾘﾝｸ(d3js.org)
threejs
URLﾘﾝｸ(threejs.org)
7:Name_Not_Found
16/02/02 14:36:41.16 .net
以上でテンプレ終わりです
8:Name_Not_Found
16/02/02 14:37:07.03 .net
>>1-7
乙
9:Name_Not_Found
16/02/02 14:57:15.57 .net
仕様にこれも追加で
ECMAScript Living Standard
URLﾘﾝｸ(tc39.github.io)
10:Name_Not_Found
16/02/02 15:08:37.01 .net
ライブラリ禁止なのになぜ>>6があるんだ？
11:Name_Not_Found
16/02/02 15:11:57.20 .net
>>6はURLﾘﾝｸ(fiddle.jshell.net)にもないから勝手に付け足されたようだね
12:Name_Not_Found
16/02/02 15:14:22.26 .net
ライブラリ禁止だからこそあるんでしょ。
ライブラリの仕様・用法についてはそっちを見て下さいということで。
13:Name_Not_Found
16/02/02 15:18:35.78 .net
そういうのはライブラリスレに誘導すれば解決する問題でしょ
ここにライブラリのリンクがあると許可されたと勘違いしたライブラリ質問が絶対に来るよ
まあ、ライブラリスレが今は落ちてるから立て直さないといけないという問題はあるけど
14:Name_Not_Found
16/02/02 15:27:39.43 .net
>>ここにライブラリのリンクがあると許可されたと勘違いしたライブラリ質問が絶対に来るよ
あろうがなかろうが奴は来る。悪意を持ってるから。
15:Name_Not_Found
16/02/02 15:28:12.19 .net
このスレたったタイミングで129とか建ってるしなｗ
どんだけ暇人なんだよ・・・
16:Name_Not_Found
16/02/02 15:35:40.99 .net
>>5の注意書きと>>6が別になってるから>>6がライブラリ禁止の意味になってない
禁止なんだから>>6なんて要らんしバッサリ切っていいと思う
17:Name_Not_Found
16/02/02 15:36:07.68 .net
彼が来るのは必然として勘違い質問ぐらいは防ごうよという話
>>6が必要な理由が特にない
18:Name_Not_Found
16/02/02 15:46:11.38 .net
>>17
言ってることがおかしい。手段と目的が逆になってる。
目的は荒らしを防ぐためであって、ライブラリ禁止というのはあくまでその建前。
別にライブラリが大嫌いなコミュではないし、ピュアスクリプト信者の集いでもない。
別に勘違いして来る人を排除することを考える必要性なんてこれっぽっちも無いし、
仮にライブラリがいくらか関係するような質問と解答のやり取りが生まれても、
それを鬼の首を取ったように騒ぎ立てる必要性もない。
過剰な反応は誰に取ってもプラスにはならないよ。
書いてある通りに縛られるのではなく、その意味を汲んで臨機応変に対応するべき。
19:Name_Not_Found
16/02/02 15:51:34.52 .net
6追加したのは129立てたヴァカだろ
時間見りゃわかる
擁護してるやつは無駄なことしなくていい
ただの悪意で深い意味なんてないから
ただスルーするのみ
20:Name_Not_Found
16/02/02 16:01:32.45 .net
>>18
本当にそういう理由ならライブラリ質問全体を禁止する必要はない
「荒らしはスルー」と一言添えるだけでいい
ライブラリ質問は彼の宗教じみた回答を寄せ付けるから禁止されたんだよ
勘違い質問が彼を呼び寄せるならそれも防ぐべきでしょ
21:Name_Not_Found
16/02/02 16:10:59.47 .net
あわよくばまたテンプレ乗っ取ろうとしたけど間に合わなかったのかね
今んとこ>>12以外は>>6不要で一致してるしこのままスルーでいいんじゃない
そもそも荒らしが紛れ込ましたノイズの必要性を議論するのがおかしい
22:Name_Not_Found
16/02/02 18:30:03.95 .net
>>20
そう、「荒らしはスルー」に限るし、別にライブラリのリンク貼られたくらいで騒ぎ立てることもない。
理屈なくライブラリということそのものに反応するようになったらオシマイ。
23:Name_Not_Found
16/02/02 18:41:50.29 .net
前スレ>>997
開発者ツールは長時間使用に耐えられないようです…
>>998
個別実装について聞けと言うのは確かにその通りだと思いますので、
別のスレで聞いてみます
ありがとうございました
24:Name_Not_Found
16/02/02 19:33:17.69 .net
>開発者ツールは長時間使用に耐えられない
まずはいいパソコンでも買おうか
25:Name_Not_Found
16/02/02 19:35:04.07 .net
>>23
は？メモリ調べたいだけならPerformanceAPI使えばいいじゃん
26:Name_Not_Found
16/02/02 19:50:16.47 .net
>>21
そうするよ、ありがとう
27:Name_Not_Found
16/02/02 20:04:57.75 .net
俺のレベルがカスすぎるのは重々承知の上であえて聞いてみたい
null代入ってvar test = 'test';とかして使ったあとにtest=null;する、これの負荷ってことでいいんだよな
これ、gcが関係するんだろうからブラウザどころかコードにもすごく影響するんでないの？っていうかこれの負荷って気になるほどでかいの？
28:Name_Not_Found
16/02/02 20:21:24.89 .net
var test = new ArrayBuffer(1024*1024*1024)とかだとでかいだろ
29:Name_Not_Found
16/02/02 20:48:39.99 .net
>>27
function hoge () { var test = 'test'; }
hoge();
なら関数実行終了後にGCが回収するから何もしなくても問題ない
GCが回収できないのはクロージャやグローバル変数等で参照が保持される時
そういう場合は不要になったら明示的に null を代入しないとページが unload されるまでメモリを消費し続ける
30:Name_Not_Found
16/02/02 20:56:59.52 .net
原則参照が保持されてるということは不要ではないと言うことで。
不要な参照が保持され続けるようなコードをであるなら設計が悪いと言わざるを得ない。
nullを代入する云々は、明示的にしないとダメだから、ではなく、
>>28のような場合でCGにあえて任せず自分で明示的にリソース管理をする場合のみ有効。
31:Name_Not_Found
16/02/02 21:01:41.05 .net
addEventListener('load', initialize, false);
に対して
removeEventListener('unload', initialize, false);
は必要なんでしょうか？
32:Name_Not_Found
16/02/02 21:02:32.94 .net
必要ないです
33:Name_Not_Found
16/02/02 21:03:01.65 .net
アホなことを聞くな
34:Name_Not_Found
16/02/02 21:04:30.62 .net
>>32
ありがとう
removeEventListenerの使い道がよくわからないんですよね
35:Name_Not_Found
16/02/02 21:10:46.44 .net
そりゃあ途中でイベントを取る必要が無くなった時だろ。
勿論リスナ側でフラグ管理しても良いが、丸ごと外す方がスマートなときもある。
36:Name_Not_Found
16/02/02 21:15:29.11 .net
逆のタイミングで使うもんじゃないんですね
途中でイベントを取る必要がなくなっても別に放置しても都合が悪くなければそのままでいいんですか？
メモリなんかに考慮して積極的にremoveしてるのでしょうか？
37:Name_Not_Found
16/02/02 21:30:10.71 .net
設計が悪くなければ問題ない。
例えば毎秒数十万のリスナを追加するような設計なら、removeを考えないといけない。
でもそれはwindowに１つ永続的なのを設定しとけばすむかもしれない。
38:Name_Not_Found
16/02/02 21:35:55.43 .net
ありがとう
イベントターゲットでやるやつですね
テーブルでカレンダー組をして
セル1つあたりにマウスオーバーイベントとかつけたことある程度なので大丈夫そうですね
loadのときにaddしたので
それも意味もわからずunloadのときにremoveしてましたがｗ
39:Name_Not_Found
16/02/02 21:53:37.14 .net
>>30
> 原則参照が保持されてるということは不要ではないと言うことで。
原則そうあるべきだけど、実際には無名関数を執拗に入れ子にしてるコードも良く見かける
参照を保持しないようにコードを組む方法が分かっていないんだろうけど
40:Name_Not_Found
16/02/02 22:29:25.35 .net
Effective JavaScriptって本読んでるんだけど
その本の中でforループでよくやってしまうミスが紹介されてて
「for(var i = n; i >= 0; i--){ ... } // 最初の回を繰り返す」っていうミスがよくわからないんだけど、
これって最初の回を繰り返す？
ちゃんと変動していると思うんだけど・・・
41:Name_Not_Found
16/02/02 22:32:09.06 .net
その n は何が入ってんだよ
42:Name_Not_Found
16/02/02 22:33:17.99 .net
>>40
動くように全てのコードを抜粋しなければわからん
43:Name_Not_Found
16/02/02 22:42:33.51 .net
n回繰り返したいのにn+1回繰り返してしまうということだろう。
よくやってしまうというより、初心者が最初一度は嵌るという類のものだな。
一旦理解すれば間違えることはない。
44:Name_Not_Found
16/02/02 22:42:57.81 .net
>>41
このnの記述ないんだよね
>>42
省略してないよ
「for(var i = n; i >= 0; i--){ ... } // 最初の回を繰り返す」っていう1行だけしか書いていないんだ・・・
この行の上には
「for(var i = 0; i <= n; i++){ ... } // 1回余計に繰り返す」
「for(var i = 1; i < n; i++){ ... } // 最初の回が抜けている」
って書かれていて特に変なところもないんだよ
45:Name_Not_Found
16/02/02 22:43:47.92 .net
これだな
URLﾘﾝｸ(books.google.co.jp)
46:Name_Not_Found
16/02/02 22:45:57.39 .net
つまり最初（i==n-1）から最後（i==0）まで本来回したいのだから、
最初の回（i==n）が余計と言いたいのだろう。
47:Name_Not_Found
16/02/02 22:53:55.59 .net
買ってはいけない本だというのがよくわかる
いや煽りも冗談も抜きで
48:Name_Not_Found
16/02/02 22:56:54.75 .net
まあ別に初心者が買う本じゃないんだろうし、
全てを参考にする類でもなく、自分の抜けてたところに気付くためのものだろう
>>40こういう質問をする段階じゃまだ早いと言えるかもしれない
49:Name_Not_Found
16/02/02 22:57:24.72 .net
>>46
ありがとう!理解した
レスしてくれた人みんなありがとう
>>47
そうなんかな
自分の理解力の問題やと思うわ
50:Name_Not_Found
16/02/02 23:01:00.13 .net
まあGood Partsよりはいい本だろうと思うよ
出た時期がまず第一に重要だからね
最新の情報であれば少なくとも取り敢えず読んで見る価値はあると思う
51:Name_Not_Found
16/02/02 23:36:59.98 .net
>>25
見落としがあるかと思って探しましたが
一般のPerformance API群にそんな機能ないですね
Chromeのみに入ってるPerformance.memoryのことでしたら
これはプロセス別の正確な使用メモリは取れません
ですのでchromium系の場合chrome:memoryや開発者ツールのが有用になります
52:Name_Not_Found
16/02/02 23:45:24.26 .net
>>51
ちな目的は？
53:Name_Not_Found
16/02/02 23:55:45.30 .net
>>51
それは間違い。
performance.memoryはプロセス別のメモリを返す。
問題は１プロセス＝１ページとは限らないということ。
とは言えopenerが存在する場合のように、ページ同士に相互通信ができる特殊な場合にしかまとめられないので、
基本的に１ページの値を返すと思って良い。
54:Name_Not_Found
16/02/03 00:06:32.49 .net
>>52
改めて問われると難しいですが
(DOMツリー含む)メモリ使用量平均の低減とstoptheworldの防止ですね
55:Name_Not_Found
16/02/03 00:08:48.41 .net
>>51
開発ツールでの測定とperformance.memoryの示す値は同じだよ
開発ツールでもプロセス内の他タブの影響も受ける
ただしそれは良いことで、タブを閉じた後、別タブからの参照のため
メモリリークが起こっているのを発見できる
56:Name_Not_Found
16/02/03 00:11:41.43 .net
>>53
そういう事ではありません
performance.memoryは親shmemとgpuレンダプロセスを含み
正確では無いと言ってます
57:Name_Not_Found
16/02/03 00:14:43.09 .net
>>55
言葉足らずでした
開発者ツールは詳細が表示されるので正確に見れます
>ただしそれは良いことで、タブを閉じた後、別タブからの参照のため
>メモリリークが起こっているのを発見できる
これは良くわかりません、どういう事ですか？
閉じたらプロファイル消えると思いますが
Chromeではなく他のブラウザの話ですか？
58:Name_Not_Found
16/02/03 00:17:02.83 .net
すみませんまた言葉足らずでした
chromeではなく(chroimum系の)他のブラウザの話ですか？
59:Name_Not_Found
16/02/03 00:19:51.05 .net
>>57
プロファイルを開いているタブ以外を閉じたときの話だよ
それと詳細とは言ってもJSヒープについてタブの区別はない
あと前提条件として開発ツールは使えないという話だったのに、
そっちの方が良いってどういうこと？
60:Name_Not_Found
16/02/03 00:28:26.84 .net
>>59
理解できました
タブを閉じてもメモリが減らない事を見るという意味ですね
>あと前提条件として開発ツールは使えないという話だったのに、
>そっちの方が良いってどういうこと？
使えないのは自分の環境の問題で、後者は飽くまで正確性の話です
それぞれ別の論点です
61:Name_Not_Found
16/02/03 00:36:27.68 .net
これ以上関係ない議論するのは迷惑になりそうなので、そろそろ去ります
レスをくれた方、ありがとうございました
XeonのPCでも買います
62:Name_Not_Found
16/02/03 00:51:05.19 .net
去る前に間違った知識を改めなさい。
正確性とか言い出したら、そもそもJSHeapと実メモリのアロケーションは関係ないし、
一部の大きなバッファはJSHeapと独立して管理されて反映されないものもある。
63:Name_Not_Found
16/02/03 01:00:59.98 .net
終わりかけてる話題に横槍いれる形で申し訳ないんだけど
現実問題として、変数にnullを代入することの負荷、とくに使用CPUと消費メモリの遷移はどうやって調べるのが正しいの
そもそもnull代入がメモリを食うのかについても気になる