元スレ+ JavaScript の質問用スレッド vol.130 +
JavaScript覧 / PC版 / みんなの評価 :
1 = :
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
・回答者同士のレスは原則禁止(>>6を参照)
・ライブラリの話題の投稿(>>6を参照)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
2 = :
■JavaScript主要ライブラリ・フレームワーク
jQuery
http://jquery.com/
jQuery UI
http://jqueryui.com/
jQuery Mobile
http://jquerymobile.com/
Lo-Dash
http://lodash.com/
Backbone.js
http://backbonejs.org/
Underscore.js
http://underscorejs.org/
AngularJS
http://angularjs.org/
Knockoutjs
http://knockoutjs.com/
RequireJS
http://requirejs.org/
D3.js
http://d3js.org/
threejs
http://threejs.org/
3 = :
■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/
◆開発者ツール(Developer Tools)の基本的な使い方 (全部はhttp://fiddle.jshell.net/vSqKr/44/show/light/#Browser-Developer-Tools )
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- IE9- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
http://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
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 = :
■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為にhttp://jsperf.com/ にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様 (http://fiddle.jshell.net/vSqKr/44/show/light/#Link も参照 )
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳)
5 = :
■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳)
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events)
http://www.w3.org/TR/uievents/ (UI Events)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等)
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳)
http://www.whatwg.org/specs/ (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
http://developer.mozilla.org/ja/docs
◆ MSDN Library
http://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html
6 = :
・ダウンロード、CDN
http://jquery.com/download/
・ブラウザサポート
http://jquery.com/browser-support/
・jQuery UI
http://jqueryui.com/
・jQuery UI ダウンロ－ド
http://jqueryui.com/download/
・リファレンス等
http://alphasis.info/
http://www.jquerystudy.info/
http://js.studio-kingdom.com/
8 = :
例外的な会社の話をするならば、
そりゃjQueryを切るところもあるだろうけど、
ぶっちゃけ、少ない方の事例じゃね？
9 = :
テンプレ滅茶苦茶じゃねーか
10 = :
>>9
無能がスレ立てるとこうなる。
12 = :
>>2がぱっと見なんのライブラリ7日教えてくれ
13 = :
そもそもAjaxのころのライブラリ黎明期からHTML5ムーブメントまでの成長期なら分かるが
現代に主要ライブラリのリンクとか必要なのだろうか？
つうか全体的にリンクがあまりに多すぎじゃね
例えば仕様のリンクは多くてもスナップショットの和訳１つで良いだろう
最新の英語のLS版が知りたいやつがここのリンク参考にするとは思えんし
もっと言えばMDNだけで十分な気がする
MDNの各ページには仕様への適切なリンクが張ってあるし、
興味がある人ならそこから知るだろう
質問テンプレートもテンプレートなんて殆ど使われないし、
こういう質問の仕方にしてという注意事項形式に改めたり、
改善と言うか０からテンプレ作り直す必要があると思う
14 = :
>>13
テンプレ案で提案どうぞ スレ違い君
15 = :
無能にスレ違いって誰のことなんだよ？
17 = :
ここまで過疎ってる上にスレ分裂してるのにさらにテンプレ議論を別スレでさそうとは恐れいった
18 = :
好き勝手にやればいい
まともな質問がきて答えたければ答える
それ以外はゴミどもがくだらん喧嘩しててもスルーしときゃいい
19 = :
>>15
↓無能はこいつ
>>1-7
スレチは微妙でグレーところか
20 = :
無能っていうか意図的にやってるんだよ
元のテンプレで注意されていた荒らし本人がずっとそうやってスレ立ててんの
21 = :
問題だー問題だーって騒ぐ割に
誰も具体的に指摘せず不備を直そうともしない
22 = :
いやｗちっとも改善する意識の無いやつがスレを立てるなよ
ただでさえ乱立してる中立てるってことは
相当の意味を込めてないとおかしい
23 = :
JavaScriptが最終的に覇権握るわ。こんな応用きいて自由な言語ねえ
25 = :
慣れればすぐ分かる
どうしても気になるなら存在しないときエラーを出すProxyで包んだりすればいいじゃないか
26 = :
効率は悪いがメモ帳みたいな最低限の環境でもできなくはないし、
1発とはなかなか行かないが問題なく動くものも作れるけど、
存在しないあるいは未参照だったりするオブジェクト・変数・メソッドをチェックしてくれるぐらいの環境は用意したほうがいいんじゃね。
そこまで本格的でなくても、typo程度ならシンタックスチェック入れるだけでもだいぶ変わるはず。
27 = :
typoは確かに良くするが大抵すぐ分かるけどな
コンパイルしてデバッグ実行のオーバーヘッド考えたらさほど大したことじゃないと思う
それよりも近年たまにハマるのがイテレータ周りだな
例えばPromise.all([a,b,c])としないといけないところをall(a,b,c)としてしまうと
undefined is not a functionエラーが出てしまう
これがall(a,b,c)ならまだ原因に気づきやすいんだろうが、
async関数の絡みでよくall(a(),b(),c())となってることも多いので惑わされる
28 = :
ブックマークレット作成してて、画面項目入力後にボタンクリックして次の画面に遷移。遷移先でも入力させたいんですが、描画完了直後に入力したい場合どうすればいいでしょうか？
30 = :
>静的にobjのプロパティ参照typoを見つけられるチェッカーは無い
ないの？知らんけど
探せば普通にありそうだけどな
31 = :
変数とは勝手が違うから難しそう
多分Object.prototype.__proto__にProxyを挟むというのが良いかもね
32 = :
typoが気になるならTypeScriptおすすめ。
基本的は
let a:型 = ほげほげ
みたいに型を:の後に追加するって仕様だけで使える。
後、個人的に気に入ってるのはjsonにスキーマ設定できる
interface User {
name: string
age: number
}
user:User = {
name: 12 // error!
// ageが足りない!
}
って感じでエラーを出してくださる。
jsonにスキーマがつくとすごく便利よ～。
33 = :
http://www.typescriptlang.org/play/
上記とかtypscriptがどんな感じかわかるから触ってみて
シンプルな見た目のくせに補完が効くしね。
試しにdom操作してみると感動するで
document.createElement とか使ってみて欲しい
document.createElement("button”)を実行するとちゃんとHTMLButtonElement型が代入されてるしそもそもdocumentって入力しただけで
候補が出るからtypoしようもないよね。
34 = :
確かに素晴らしいんだけど
大規模コード書くようなTSが有用なときって
あんまりそう言う重し付けたくないんだよね
何が嫌かって言ったらリリースデータに元とコンパイル後の２つ含めることになること
ポリフィルみたいに簡単に要らなくなったら外すとかできないし
35 = :
>>34
最悪tsを捨てちゃったっていいのよ。
生成されるファイルはtargetをes2015にして出せばそんなにはキチガイなコードにはならないからjsとの混在も可能だしね。
ちょっと前は型定義ファイル周りのエコシステムが乱立？して混乱を呼んだけど
今は平和だしいい感じよ。
俺はむしろtypescriptからjsに本格入門した。
vscodeで書いてるというのもあるけど、書いてる最中にバグを指摘してくれるから
気分的にはコンパイラとペアプログラミングしてる感じ。
いちいちドキュメントを見に行かなくてもvscodeが必須パラメータを教えてくれる。
感覚的には文字入力してる時に頭の悪いIMEから頭のいいIMEに代わって
凄く捗るぜーって感じかな。
36 = :
37 = :
>let a:型 = ほげほげ
>みたいに型を:の後に追加するって仕様だけで使える。
インタプリタに慣れすぎて型指定するのめんどくさいお
38 = :
>>37
型推論使えるから基本関数とかメソッドのインターフェース定義のときしか要らないよ。
39 = :
>>22
これ
能力無い奴が余計なことして後手後手になる典型的なﾊﾟﾀｰﾝなんだよな
41 = :
var temp = string.match(/.*hoge/), temp2 = temp && temp[0].replace("honya","hage");
var temp = string.match(/.*hoge/).map( m => m.replace("honya","hage") ) [0];
ある程度はどうしようもない
42 = :
ごめん後者なしで
43 = :
愚直にやるのが一番いいと思うけど。
ワンライナーにしなきゃいけない理由がわからない
三ヶ月後の自分が分かるコードで書くべき
44 = :
こんなコード書かれたら発狂するわ
45 = :
>>41
&&をこんな感じに使えるんですね、なるほど参考になります
ありがとうございます
>>43
長いと目が迷子になってしまうので、特にmatchはよく使うので
一般的な感覚じゃないかもですが、行数の割に得られるものが少ないと、このブロック何の為だ、と後々読んだ時に混乱してしまって
でもif文で数行に書くのが一般的なのですね、なるほどありがとうございます
46 = :
string.match(/(.*hoge)/)
temp = RegExp.$1.replace("honya","hage")
47 = :
>>46
これRegExp.$1に何も入ってなくてもエラー吐かないんですね
こんな裏技あったとは、RegExpって気になってたので意識して使ってみます、ありがとうございます
48 = :
条件が複雑なら、コードも複雑になるのが、当たり前。
そのまま素直にコードにすればよい
条件が複雑なのに、コードが単純になっていれば、間違っている。
コードを単純に出来るなら、条件も単純に出来るはず
2段階のプロセス。
1. 論理的に正しい証明を先にしてから(仕様書)、
2. その通りにコードに写す(実装)
2を修正したら、常に1に帰ってから、正しさを証明して、2を修正する。
常に、考える時は、1の仕様書で考える
&& を使ったら、if-else よりも、分かりにくい。
頭の中で、if-else に置き換えて、
論理的に矛盾が無いか、証明しないといけないから、余計に難しい。
つまり、見落とし・勘違い・バグが起こる、可能性が高くなる
もし、&& の右の式に、副作用があって、何かの状態を変える場合、
パッと見て、右式が実行されたか、されていないか、分かりにくい。
頭の中で、間違いが無いか、確かめるのが大変
論理的に正しいと証明するのが、一番難しい。
コードを書くよりも難しい
49 = :
ECMAでRegExp.$1などを無くそうかという議論がされてるときに
堂々と提案できるやつはどういう神経してるんだろう
50 = :
なくなってからまたおいで
10年後ぐらいにね
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.130 + (974) - [100%] - 2016/10/26 14:18
- + JavaScript の質問用スレッド vol.131 + (1000) - [97%] - 2017/1/25 8:01
- + JavaScript の質問用スレッド vol.137 + (1003) - [97%] - 2019/3/26 11:46
- + JavaScript の質問用スレッド vol.110 + (1001) - [97%] - 2013/10/13 14:01
- + JavaScript の質問用スレッド vol.131 + (1004) - [97%] - 2018/3/7 13:30
- + JavaScript の質問用スレッド vol.132 + (1001) - [97%] - 2018/4/19 11:00
- + JavaScript の質問用スレッド vol.133 + (1001) - [97%] - 2018/6/8 10:45
- + JavaScript の質問用スレッド vol.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.136 + (1001) - [97%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.135 + (1002) - [97%] - 2018/11/23 10:30
- + JavaScript の質問用スレッド vol.138 + (1004) - [97%] - 2019/4/20 23:45
- + JavaScript の質問用スレッド vol.139 + (1001) - [97%] - 2019/5/27 15:15
- + JavaScript の質問用スレッド vol.140 + (1001) - [97%] - 2019/9/19 10:45
- + JavaScript の質問用スレッド vol.120 + (1002) - [97%] - 2014/11/8 1:15
- + JavaScript の質問用スレッド vol.100 + (1001) - [97%] - 2012/6/13 22:46
- + JavaScript の質問用スレッド vol.113 + (1001) - [95%] - 2014/3/15 21:30
- + JavaScript の質問用スレッド vol.118 + (1002) - [95%] - 2014/8/29 22:30
トップメニューへ / →のくす牧場書庫について