元スレJavaScript ライブラリ総合質問所 vol.4
JavaScript覧 / PC版 / みんなの評価 :
1 = :
JavaScriptライブラリ を自ら学ぶ人のための質問スレッドです。
■質問を書く上で
(1) 質問にならない投稿はご遠慮ください。(煽り、コード制作依頼など)
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 長い間連続して質問する場合にレス番を名前にしてあれば、質問の流れが回答者に伝わりやすくなります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合はhttp://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。質問テンプレートを活用してみてください。
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【ライブラリ】使用しているライブラリ名を記入してください。(ex: jQuery)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
2 = :
■前スレ
【jQuery】JavaScript ライブラリ総合質問所 vol.3
http://toro.2ch.net/test/read.cgi/hp/1369444026/
■関連スレ
+ JavaScript の質問用スレッド vol.115 +
http://toro.2ch.net/test/read.cgi/hp/1399072595/
ECMAScript デス 4
http://toro.2ch.net/test/read.cgi/tech/1325448978/
JavaScript Tips コレクション
http://toro.2ch.net/test/read.cgi/hp/1070611524/
1行javascriptプログラミング
http://toro.2ch.net/test/read.cgi/hp/1066750037/
【node.js】サーバサイドjavascript 2【Rhino】
http://toro.2ch.net/test/read.cgi/tech/1358937029/
■各種ライブラリ
jQuery API Documentation
http://api.jquery.com/
jQuery Mobile API Documentation
http://api.jquerymobile.com/
prototype.js
http://prototypejs.org/
API Docs - YUI Library
http://yuilibrary.com/yui/docs/api/
Underscore.js
http://underscorejs.org/
6 = :
>>5
ついでにいうと toArray() も不要
7 = :
>>6
うおっ。確かにｗ 重ねてありがとうございます！
8 = :
nikkeiモバイルにアクセスしたら、
「データベースサイズを増やしますか」って聞かれたんだけど
http://news.mynavi.jp/articles/2013/06/03/iphone_why67/
これはLocalStorageを5MBから10MBに拡張できるってことだよね？
これをJS上で明示的にユーザーに問い合わせるにはどうすればいいんでしょう？
9 = :
jQueryで$('.class名')と指定するのは
推奨されないと聞いた事あるのですが、
要素が同じ場合は、$('要素名').filter('.class名')と書けばよいですか？
10 = :
>>9
推奨されない理由を調べて
それから考えよう。
11 = :
>>8
問い合わせフォームのこと？
JSなら、document.forms
jQueryなら、フォーム要素を使う
jQueryの方が簡単
12 = :
>>11
すみません、聞き方が悪かったです。
標準だとたしかLocalStorageが5Mしか容量ないものを
10MBまで拡張させる方法が知りたいということです。
13 = :
>>12
ブラウザ個別の機能では？例えば Chrome API の storage では容量を変えられる。
14 = :
>>13
そんなAPIがあるんですね。ありがとうございます。
16 = :
http://getbootstrap.com/javascript/
ここのdropdownのサンプルを見るとクリックで閉じるのはデフォルト動作のようです
しかし本来ドロップダウンはmousedownで閉じられるべきもので、
OSもそのようになっています
どうしたら・・
17 = :
Bootstrapにその機能がないなら諦めとけ
Bootstrapを使うときは、Bootstrapで用意された機能や
デザインをそのまま受け入れること。
下手に自分のこだわりを通そうとするとハマる。
18 = :
jqueryで「指定したクラスを持つ子要素を持つdiv」を指定する方法を教えて下さい
19 = :
>>18
http://zng.info/specs/css3-selectors.html#child-combinators
http://api.jquery.com/parents/
20 = :
ありがとうございました
22 = :
表を作るライブラリみたいのありませんか？
カラムで並び替えたりできるやつです
23 = :
>>22
http://codezine.jp/article/detail/6636
24 = :
>>23
ありがとうございます
25 = :
jqueryでドルを単体で使った場合、ドルは何を指し示しているんですか？
こんな感じ↓名前空間？
$.getJson()
26 = :
>>25
http://api.jquery.com/jQuery/
28 = :
>>27
動いたけど
http://jsbin.com/doyakubo/4
JSBinの使い方間違ってるんじゃない？
テンプレにもあるようにhttp://validator.w3.org/ ぐらいチェックして
それからライブラリの質問じゃないからスレ違い
30 = :
domの作成をjqueryでやるメリットは何でしょうか？
作成に限って言えば、生JSで作成してもコーディング量、簡便さなど大差ない気がします
31 = :
>>30
通常作成するだけじゃ終わらないからです。
DOMを作成したら、そのあとイベントを割り当てたりするでしょう？
32 = :
>>30
ノード作成をjQuery出やらないほうが便利な場面もあるし、jQueryでなければならない必然性はない
DOM APIに慣れるとjQueryが使いがたいと思う場面は確かにある
33 = :
DOM APIの何が嫌かって、スペルが長いことなんだよな。
document.getElementById('a').addEventListener('click', function() {});
$('#a').on('click', function() {});
もしくは
$('#a').click(function() {});
これだけでもDOM APIは嫌になるが、jQueryはさらに
セレクタをクラス名にするなどして、当てはまる要素全てに
イベントつけられるし。
DOMを扱う行が10行を超えたら、もうjQueryを使ったほうがいいと思う。
34 = :
>>33
それDOMのだと、もし#aの要素が無かったら…とか考えてしまう
35 = :
>>34
それが健全な考え方だろう
しかし、ないときにエラーにならないのはもっと困る
36 = :
jQueryはエラーにならないのか
これは面倒くさいな...
jQuery('#hogehoge').on('click', lisetener); // #hogehogeが存在しなくてもエラーにならない
37 = :
存在しないことが想定されている場合には、nullチェックしなくていいからjQueryが楽
想定外ならjQueryは発見が遅れるって感じ
38 = :
イベント定義するなら該当要素が存在する事を保証したロジックにする
しかし、それでも想定ミスで存在しなかったのならエラーになるのが望ましい
そうでないのなら、要素の存在有無でコードを条件分岐させるのが望ましい
…と俺は思う
39 = :
>>35
いやそれは、IDで指定しているからそう思うんだよ。
#('.hoge').on()だと考えてみな。
.hogeは0個以上。
つまり要素が複数あってもなくても
コードを変える必要がない。
これは空の配列やNULLオブジェクトパターンにもつながる考え方。
たまに、var o; o = $('.o'); if(o.length) { o.on(・・・) } とか
var o = null; if(何かの条件) { o = なにか } if(o) { o.on(・・・) } みたいな
チェックコードをかく人がいるけど、
var o = $(); o.on(・・・)
という単純なコードでいいんだよね。
「0個以上の当てはまる要素」という風に一般化して考える。
40 = :
要素があるかないかをいちいち調べるコードっていうのは
これみたいなあほさがあるよね。
※ aは配列
if (a.length > 0) { // ← 意味が無いチェック
for(var i = 0, max = a.length; i < max; i++) {
console.log(a[i]);
}
}
41 = :
>>38
HTMLとcssの関係と同じだけど、
HTMLとJavaScriptの関係っていうのは
そういう風に密接につながったものじゃない。
それぞれ独立しているもの。
要素があるかないかを考える以前に、
要素があるかないかってのはわからないと考えるべき。
だから、ID指定でjQueryを使うっていうのは
だいたい間違った考えなんだよね。
だからjQueryのセレクタはクラス（や要素名や名前属性など）で指定し、
HTMLにはその要素はあってもなくてもいいものとして作る。
42 = :
>>39
ノードリストならDOM APIでも普通に書けばエラーにならないけど、それは比較対象として適切？
そりゃあ、jQuerｙは内部的には配列だからそういう挙動になるだろうけど、「動くか動かないかわからない」という本質は変わってないよね
idで指定したときの問題に対してノードリストを上げるのは論理のすり替えじゃないの？
43 :
>>39
idかclassかは問題の本質とは関係ない
重要なのは「要素の存在を保証できるかどうか」だ
存在を保証できる場合というのは例えば、HTMLで事前に該当要素を書いている場合や要素の挿入直後の場合だ
この場合は要素が存在することは確定しているのでコード上で要素が非存在となるならエラーになることが望ましい
基本的にはしっかりとアルゴリズムを組めば要素の存在は保証できる
しかし、要素のappendChild, removeChild を繰り返す度にイベント定義する場合や多量ノードにイベント定義する場合は別だ
この場合はバブリングを利用して上位ノードに一つだけイベント定義するのが望ましい
そうすれば要素を入れ替える度の処理が不要になり、メモリ消費も削減できる
---
ノードリストでイベント指定する場合は>>42のいうように普通に組めばエラーにならない
存在確定する状況ならエラーにしてもいいが、それは人に依るだろう
最も、この場合はバブリング可能で上位ノードにイベント定義する場合が多く、その場合は上位ノードの存在保証が必要になる
(clickはバブリング可能なのであなたの出した例なら上位ノードを指定する)
> 要素があるかないかってのはわからないと考えるべき。
そもそも、アルゴリズムで要素の存在は保証されるべきだ
存在不明の要素にイベント定義するということは、そのイベントが動作する保証もないという事だ
そして、動かなかった時に「要素が存在しなくて動かなかったのか」「ハンドラのコードバグで動かなかったのか」の原因切り分けが全く出来てない状態からデバッグすることになる
これは良い実装とはいえない
44 = :
>>43
それは考え方が単純だよ。
「要素が絶対に存在していなければならない時」はなくてエラーなっても良いが、
「要素が存在していなくてもいい時」はエラーにならない方がいい。
HTMLをウェブAPIを実行するための入力フォームだと考えれば、
特定の画面にそのフォームがなければならないことというのはまず無い。
たとえば削除ボタン（POSTするフォーム）があったとしよう。
そのボタンに対してJavaScriptで確認ダイアログを表示するとしよう。
この削除ボタンはどのページにでも移動可能。そして一般的に
JavaScriptはHTMLに対してちょこっと付加価値を付けるという扱いで使うべき。
つまりこの削除ボタンに、特定のクラスをつけ、JavaScriptは
そのクラスに対して処理を付加することになる。
そして、この削除ボタンはデザイナーの都合で表示されなくなったり別のページに移動したりするわけ。
それでも、特定のクラスをつけた場合は全て同じ動きをする。
というベストプラクティスを達成する場合、クラスの有り無しを意識しちゃダメなんだよ。
46 = :
jqueryである要素を空にするにはどうしたらいいですか？
47 = :
>>45
http://www.softel.co.jp/blogs/tech/archives/92
こういうことではなく？
48 = :
>>46
空にしてタグだけ残すなら
$("ある要素").html("");
タグごと消すなら
$("ある要素").remove();
49 :
>>44
シンプルなプログラムならその考え方でいいが…。
「イベントA→イベントB→イベントC」の順に依存関係が存在した場合、イベントAが定義されないならイベントB,Cも定義されないのが望ましい。
jQueryでは定義/未定義を判別できず、例えばイベントBだけ定義された状況で思わぬバグを引き起こす可能性がある。
どちらかといえば、あなたの方が想定する状況を限定しすぎている(単純化している)ように思うが…。
バブリングについての意見はないのか？
一つだけの要素にイベント定義する場合も十分あるはずだが…。
50 = :
なんでイベントに依存関係があるんだよ？
依存関係があるのなら、それを一つにまとめるだけの話だろ。
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript一覧へ類似してるかもしれないスレッド
- JavaScript ライブラリ総合質問所 vol.5 (344) - [97%] - 2022/3/14 17:45
- jQuery ライブラリ 総合質問所 vol.4 (986) - [78%] - 2016/1/12 15:15
- 【jQuery】JavaScript ライブラリ総合質問所 vol.3 (1001) - [75%] - 2014/6/18 20:58 △
- 【jQuery】JavaScript ライブラリ総合質問所 vol.2 (986) - [75%] - 2013/5/20 7:00
- 【jQuery】JavaScript ライブラリ総合質問所 vol.1 (983) - [75%] - 2012/10/8 22:30
- [JavaScript]プログラム作成します (981) - [37%] - 2010/12/8 21:02
トップメニューへ / →のくす牧場書庫について