TOP カテ一覧 スレ一覧 100〜終まで 2ch元 削除依頼
【インクリメントP】ネットショップオーナー その3
【i・Ez・S】携帯サイトのSEO【G・Y・B】
■□アクセス数増やしたいんだけど□■part ,1
こんな携帯サイトあったらいいな♪
【PTO】Perfume Thread Outliner【チキプン】
【target="_blank"】外部リンクは別窓?
皆が使えるテンプレートを作るスレ3
【SEO】Google対策 パート83【Google】
Web2.0は制作側には関係ないよね?
+ JavaScript の質問用スレッド vol.141 +

JavaScript ライブラリ総合質問所 vol.4


1 :2014/05/23 〜 最終レス :2015/11/30
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.sc/test/read.cgi/hp/1369444026/
■関連スレ
+ JavaScript の質問用スレッド vol.115 +
http://toro.2ch.sc/test/read.cgi/hp/1399072595/
ECMAScript デス 4
http://toro.2ch.sc/test/read.cgi/tech/1325448978/
JavaScript Tips コレクション
http://toro.2ch.sc/test/read.cgi/hp/1070611524/
1行javascriptプログラミング   
http://toro.2ch.sc/test/read.cgi/hp/1066750037/
【node.js】サーバサイドjavascript 2【Rhino】
http://toro.2ch.sc/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/

3 :
プログラミング初心者な質問で申し訳ないのですが
jQueryで配列を複数個呼び出すときってどう書けばよいのでしょうか?
[0]と[2]だけを呼び出したいのですが・・
var arr = $('#meta').toArray();
$('p').append(arr[0][2]);←こんな感じで呼び出したいのですが

4 :
>>3
$('p').append(arr[0], arr[2]); // 最も、arr[2] は undefined だけど

5 :
>>4
できました!ありがとうございます!!
>var arr = $('#meta').toArray();
はvar arr = $('#meta').find('a').toArray();の間違いです。失礼しました

6 :
>>5
ついでにいうと toArray() も不要

7 :
>>6
うおっ。確かにw 重ねてありがとうございます!

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があるんですね。ありがとうございます。

15 :
bootstrapでpopoverがmousedownのタイミングで閉じてほしいのですが
どうすればいいですか?

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 :
ありがとうございました

21 :
>>16
gruntが使えるならソースコードの方をダウンロードしてdropdown.jsを書き換えてからjsをビルドする。
使えないならミニファイされてないjsを書き換えて使えば良いんじゃない?

22 :
表を作るライブラリみたいのありませんか?
カラムで並び替えたりできるやつです

23 :
>>22
http://codezine.jp/article/detail/6636

24 :
>>23
ありがとうございます

25 :
jqueryでドルを単体で使った場合、ドルは何を指し示しているんですか?
こんな感じ↓名前空間?
$.getJson()

26 :
>>25
http://api.jquery.com/jQuery/

27 :
http://jsbin.com/doyakubo/1/edit
@をSample.htmlAをSample.cssと名前をつけて同一フォルダに保存したけど動作しない。
原因わかる人いないかな? テキストエディットとsafariを使ってます。

28 :
>>27
動いたけど
http://jsbin.com/doyakubo/4
JSBinの使い方間違ってるんじゃない?
テンプレにもあるように http://validator.w3.org/ ぐらいチェックして
それからライブラリの質問じゃないからスレ違い

29 :
>>28
おっと、それは失礼した

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でも普通に書けばエラーにならないけど、それは比較対象として適切?
そりゃあ、jQueryは内部的には配列だからそういう挙動になるだろうけど、「動くか動かないかわからない」という本質は変わってないよね
idで指定したときの問題に対してノードリストを上げるのは論理のすり替えじゃないの?

43 :
>>39
idかclassかは問題の本質とは関係ない
重要なのは「要素の存在を保証できるかどうか」だ
存在を保証できる場合というのは例えば、HTMLで事前に該当要素を書いている場合や要素の挿入直後の場合だ
この場合は要素が存在することは確定しているのでコード上で要素が非存在となるならエラーになることが望ましい
基本的にはしっかりとアルゴリズムを組めば要素の存在は保証できる
しかし、要素のappendChild, removeChild を繰り返す度にイベント定義する場合や多量ノードにイベント定義する場合は別だ
この場合はバブリングを利用して上位ノードに一つだけイベント定義するのが望ましい
そうすれば要素を入れ替える度の処理が不要になり、メモリ消費も削減できる
---
ノードリストでイベント指定する場合は>>42のいうように普通に組めばエラーにならない
存在確定する状況ならエラーにしてもいいが、それは人に依るだろう
最も、この場合はバブリング可能で上位ノードにイベント定義する場合が多く、その場合は上位ノードの存在保証が必要になる
(clickはバブリング可能なのであなたの出した例なら上位ノードを指定する)
> 要素があるかないかってのはわからないと考えるべき。
そもそも、アルゴリズムで要素の存在は保証されるべきだ
存在不明の要素にイベント定義するということは、そのイベントが動作する保証もないという事だ
そして、動かなかった時に「要素が存在しなくて動かなかったのか」「ハンドラのコードバグで動かなかったのか」の原因切り分けが全く出来てない状態からデバッグすることになる
これは良い実装とはいえない

44 :
>>43
それは考え方が単純だよ。
「要素が絶対に存在していなければならない時」はなくてエラーなっても良いが、
「要素が存在していなくてもいい時」はエラーにならない方がいい。
HTMLをウェブAPIを実行するための入力フォームだと考えれば、
特定の画面にそのフォームがなければならないことというのはまず無い。
たとえば削除ボタン(POSTするフォーム)があったとしよう。
そのボタンに対してJavaScriptで確認ダイアログを表示するとしよう。
この削除ボタンはどのページにでも移動可能。そして一般的に
JavaScriptはHTMLに対してちょこっと付加価値を付けるという扱いで使うべき。
つまりこの削除ボタンに、特定のクラスをつけ、JavaScriptは
そのクラスに対して処理を付加することになる。
そして、この削除ボタンはデザイナーの都合で表示されなくなったり別のページに移動したりするわけ。
それでも、特定のクラスをつけた場合は全て同じ動きをする。
というベストプラクティスを達成する場合、クラスの有り無しを意識しちゃダメなんだよ。

45 :
jQueryのDatepicker プラグインで
結果をyyyy mm dd の3つ分けて入力する方法がわかりません。。。
2つに分ける方法は以下に出ていたのですが
私のレベルでは3つに分けられませんでした。
---------------
jQuery( function() {
jQuery( '#jquery-ui-datepicker' ) . datepicker( {
altField: '#jquery-ui-datepicker-alternate',
altFormat: 'yy'
} );
} );
---HTML---
<input type="text" id="jquery-ui-datepicker">
<input type="text" id="jquery-ui-datepicker-alternate"/>

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 :
なんでイベントに依存関係があるんだよ?
依存関係があるのなら、それを一つにまとめるだけの話だろ。

51 :
>>50
一般論としてイベントに依存関係があるという話ではなく、処理の流れで依存関係が出来ると読めたけど
処理Bより先に処理Aが先に実行されてなければならない状況はあるでしょ?
大規模開発なら処理を分けることはあるし、まとめることが必ずしも良いとは限らない

52 :
>>51
いや、一つのイベントでだろ?
たとえばクリックした時に、
違う処理を二つやんのか?
まずないね。

53 :
jqueryオブジェクトに
_hoge
などの独自プロパティ持たせてもいいんですか?

54 :
>>53
独自プロパティ持たせるぐらいなら
専用のdataメソッドあるだろ。
あとjQueryプラグインの”正しい"拡張は
そのように独自プロパティやメソッドを
追加することに等しい。
だから”正しい"方法であれば持たせて良い。

55 :
>>47
有難うございます!!
助かりました。
どうやら、検索レベルの方が問題のようでした・・・

56 :
googleで計算式を入力すると答えが出ますが
ああいう風に数式から答えを算出するライブラリありませんか?

57 :
eval("1 + 2")

58 :
それだと「文字列が数式のみかどうか」を調べないといけないですが
それはどうやりますか?

59 :
jqueryのaddClassで
"hoge moge"など書くと複数クラスを適用できますが
これは普通に使っていい機能なのでしょうか?

60 :
英語リファレンスの方に書いてありました

61 :
>>58
単に eval()でthrowされたエラーをcatch

62 :
数式だけなら問題ありませんが
コードが入力されたら実行されちゃいますよね

63 :
>>62
実行された所で問題につながるかどうかは明らかにされてないがな
ページ利用者が変な式を入力してページのふるまいがおかしくなるだけでは
問題とは言えないだろう

64 :
あきらかにされてなくてもナシなのは当たり前のことです
問題とは言えないだろうといいますが、大問題です

65 :
事前に正規表現でチェックすれば? /^[\d\s+\-*\/]+$/.test(str)
eval使いたくないとかもっと柔軟にしたいなら「数式 パーサ」で検索検索ゥ
Googleくらい融通の効くライブラリは知らないや
自分で書くしかないんじゃね

66 :
evalでユーザーに任意のコード実行されて何が問題になるのか。全く問題無いだろ。

67 :
まじで言っているのですか?evalが危険なのは常識だと思いますが

68 :
次の様 evalを使うページが存在するとき、
ページ利用者にどのような実害が生じる可能性があるか、具体的に挙げなさい
<!DOCTYPE html><html><head><meta charset="utf-8" />
<script>
onload=function(){
var ele = document.getElementById('input');
ele.onchange = function(){
eval(ele.value);
}
}
</script></head><body>
<textarea id="input"></textarea>
</body></html>

69 :
内部のデータが壊れて整合性が狂う可能性あるじゃん

70 :
そんなの自己責任だろ。
ブックマークレット実行するとか
JavaScriptデバッガで適当な命令
実行するのと何も変わらん。

71 :
デバッガまでいじったら自己責任だが
表向き用意してるインターフェイスにそんな可能性があるのは問題
こんなの論争する価値もないほど自明のことだと思うが
世の中にはトンデモプログラマーがいるものだな

72 :
iframeでそのページを出して、
この画像の続きを見たければこの文字列をコピペしてください
みたいに書いておくとか

73 :
lodashで、テンプレートにヘルパメソッドを渡してフィルタした値を出力する、ってやる時には
<% print(helper(val)); %>
ってやるしかないですか?
<%= helper(val) %>
みたいに書きたいのですが、これだとエラーになります

74 :
「jqueryオブジェクト」同士をマージするにはどうやればいいですか?
$.mergeは普通のオブジェクト用のようです

75 :
addでした

76 :
スマホで安定して動くファイルアップロードプラグインありますか?
lagoscriptってサイトのjquery.upload-1.0.2.min.jsを使ってたんだけど
iOS7だと動いたり動かなかったり、今はサイト自体が無くなってしまったようで

77 :
jQuery.merge
のような関数を自分で追加するにはどうしたらいいですか?

78 :
>>77
何のために追加するのか、
どんな機能を追加するのか?
どうしてもjQueryプラグインにしないといけないのでない限り
追加しない方がいい。
グローバル変数やだ、じゃあjQueryに追加しちゃえ
この程度の考えなら、やめた方がいい。

79 :
JavaScript 3 で聞いても返事なかったので、こちらで伺います。
動的に追加されたaタグに対して、タップするにはどうすればいいですか?

80 :
>>78
追加する方法を聞く質問に対してそんな答えはいりませんし
もう分かったから別にいいです

81 :
なにここ、殺伐としてるの?

82 :
全然してませんよ
和気靄靄です

83 :
どこが和気靄々なの?

84 :
あなたに本質が見えてないだけだと思いますよ

85 :
煽りばかりだね

86 :
click();
みたいに tap(); はないのかね。。

87 :
$('a').bind('touchstart', function() {alert('タッチ');});

88 :
ありがとう。
でも、それはタッチイベントを発生させるんじゃなくて、実際にタッチしたらalertで「タッチ」と出る感じじゃない?

89 :
jqueryで「親要素が指定した要素である」という条件で絞りこむにはどうしたらいいですか?

90 :
>>88
jQuery の click() もclickイベントを発火させるAPIじゃないよ

91 :
そうだったのか。。

92 :
>>86,91
HTMLInputElement.prototype.click と勘違いしたのかな
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
それから誤解されやすいから求めるAPIのライブラリ名ぐらいは書いた方がいいと思うな
jQuery では trigger() が該当するけど、jQuery 定義したイベントにしか対応しないから DOM L3 Events 互換ではないよ
http://api.jquery.com/trigger/

93 :
まあ elem.click が存在してたらそれ呼ぶけどね

94 :
>>93
気が付かなかった
2.1.1のコード読んだけど、input[type=checkbox] だけ反応するみたいだね
一つの関数に複数機能を詰め込む仕様はわかりにくいなー

95 :
そこじゃなくて(いや、そこもだけど)
> // Call a native DOM method on the target with the same name name as the event.
> // Don't do default actions on window, that's where global variables be (#6170)
ここのところかな。
> elem[ type ]();
アンカーはクリックできないようにはなっているみたいだけれど

96 :
jqueryのval()などは「マッチした最初の要素で実行した結果」を返しますが
自分でこういうプラグインを作成する時は
単にthisに対しての実行結果を返すだけでいいのでしょうか?
実行集合の集合を返す場合と、単一の実行結果を返す場合の書き分けが良く分かりません

97 :
×実行集合の集合
○実行結果の集合

98 :
おお、丁寧にありがとう。
ブラウザでみたとき、実際にマウスを使ってクリックやタップしたのと同じ効果を求めてたんだけど、そういうのはないのだね。

99 :
96の件ですが、
集合の要素数のぶんだけプラグインのメソッドが呼ばれていると思いきや、
要素がいくつであれメソッドは一回しか呼ばれないんですね
なんか色々勘違いしてたっぽいです

100 :
>>89
もうちょうっと詳しく描いてくれないとわかんない。
クリックされた要素が…とかなら
if($(this).parents("親要素")[0]){
処理;
}


100〜のスレッドの続きを読む
大阪のWeb制作会社で働いてる人集合wwwww
無料掲示板について語ろう (その3)
メモ帳最強神話
■この素材屋イイ(・∀・)!マターリ紹介しあうスッドレ4■
おまえらのアクセスアップ必殺技を教えてくれ。だめか?
蕎麦は手打ちじゃないといけないの?PART2
こんな携帯サイトあったらいいな♪
待画サイト管理人の集い
+ JavaScript & jQuery 質問用スレッド vol.8 +
おまえらのアクセスアップ必殺技を教えてくれ。だめか?
--------------------
お土産の模造刀、持っていたら逮捕・・・北海道
器物損壊犯こと棒読み山下智久のクズエピソード★2
【山梨】車が木に衝突し大破 男女が死亡 富士河口湖町
軌道エレベーターって
「金刀比羅宮」が神社本庁離脱へ
【話題】<小島慶子>野球評論家・張本勲氏の大船渡批判「体を痛めつけて苦しい思いをすれば強くなるって、戦時中かと思いましたよ」
折り畳み&小径車総合スレ 154
【サバイバル】 Rain World 【2Dドット絵】
ニコニコ生放送 part10706
【山口敬之/準強姦揉み消し問題】セクハラ撲滅 国連で伊藤さん会見「WeToo」運動提唱【北村滋/中村格】[03/17]
ポッポ 4 〔イトーヨーカドー/セブン&アイ〕
ワインって氷入れたほうがうまくね?
Canon PIXUS MP600/610/620/630 Part12
日常に潜むエロい言葉
SONY α9 ILCE-9 Part 24 (ワッチョイ有)
【ゴルフ】渋野日向子が大逆転で9月以来の国内4勝目 賞金女王争いは混戦 次週ツアー選手権で決着 ★2
【豚顔】 田尻夏樹【たこやき顔】
【Trim】Windows7はSSDで Part1
【中韓よりマシ】台 湾 の 治 安【日本より悪い】
【まよんぬ】森田真結子【DOP】 Part.1.1
TOP カテ一覧 スレ一覧 100〜終まで 2ch元 削除依頼