+ JavaScript の質問用スレッド vol.123 + [転載禁止]©2ch.net
レス数が1000を超えています。これ以上書き込みはできません。
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
+ JavaScript の質問用スレッド vol.122 +(c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1420095379/
（ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです） ■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■前スレ
+ JavaScript の質問用スレッド vol.122 +(c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1420095379/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■関連スレ
ECMAScript デス 4
http://peace.2ch.net/test/read.cgi/tech/1325448978/
JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400834117/
Webサイト制作初心者用質問スレ part241
http://peace.2ch.net/test/read.cgi/hp/1408512894/
CSS初心者スレッド＝12th＝
http://peace.2ch.net/test/read.cgi/hp/1343429848/
Canvasについて語ろう
http://peace.2ch.net/test/read.cgi/hp/1305093769/ ■主要FAQ (全部は http://fiddle.jshell.net/vSqKr/33/show/ )
Q1. 別窓・フレーム内容やローカルファイルを読み書きしたいのですが…
A1. 別サーバのページやファイルの内容はセキュリティ制約でアクセス不可です。
Q2. document.write()でページ内容を追加したいのですが…
A2. 一度表示完了後にwriteするとページ内容が消去されます。DOM等別手段を。
Q3. table内容のinnerHTMLやDOMでの変更がうまく行かないのですが…
A3. IEではtable/tbody/trのinnerHTML書き換え不可です。DOMを使いますが、
DOMの場合tableの直下にはtbody要素が(作らなくても)あることに注意。
Q4. フォーム部品名を変数にした「...myform.変数名.value」が動きません…
A4. 「document.forms.myform.elements[変数名].value」でどぞ。
JavaScriptでは一般に「obj.x」と「obj['x']」は同じ意味です。
グローバル変数はwindowのプロパティなので「x」と「window['x']」も。
Q5. CSSで設定した背景色がe.style.backgroundColorで取得できないのですが…
A5. 取得には document.defaultView.getComputedStyle() を使う必要あり。
IEでは要素オブジェクトのプロパティcurrentStyleを使う。
Q6. setAttribute("class","foo")、setAttribute("onclick","bar()")が動きません…
A6. IEではそれは不可。「obj.className="foo"」「obj.onclick=bar」でどぞ。
Q7. タイマーやイベントハンドラに設定するコードにthisを含めたいのですが
「"...this..."」とか「function(){...this...}」ではうまく行きません。
A7. 実行時にthisが別のものを指してしまってる。以下のようにthisを束縛保存。
「function(x){return function(){...x...};}(this)」
Q8. input type="file"の値を設定(参照)できないのですが…
A8. セキュリティ制約のため設定は絶対に不可。参照はブラウザにより不可。
Q9. getElementById('ID名')や$('ID名')で要素が取れないのですが…
A9. コード実行時点でHTMLがそこまで読まれてない。window.onload 中でやるとか。 ■諸注意
vol.116で一人の心ない人が勝手に決めたライブラリ禁止は撤回されました。
今後はライブラリに関する質問も受け付けます。
ライブラリ禁止を叫ぶやからはスルーしてください。 以前、質問した者です
おかげさまでシステムが完成して300万円で飛ぶように売れてますｗ
教えてくれてありがとうございましたｗ lodash 3.0 ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!! >>11
毎回そうだけど、現行スレでライブラリ禁止の話が出ると次スレを乗っ取ろうとしてフライングして立てる人が出てくる
いつもの事ながら呆れる 結局乱立させた自分のスレがどこも伸びないからって戻って荒らしてるよ
この状態が何年続くのかね 細分化しても伸びないんだから
JavaScriptは全部一つにまとめろって。 言う事が全て嘘だからフォローする事もできないな... あまりにも小出しな上に文句しか言わないからめんどくさい。 もういいです！
JavaScriptの質問なのにCSSでしか解答しない人には用はありません 「ヘッダー固定 アンカー」でググれば腐るほど答え出てくるけどな そんなにJavaScriptを使いたいならJavaScriptでCSS追加すれば解決するだろうに考える頭もないのか 「(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。」と書いてあっただろうに
テンプレを全く読んでないんだろうな chromeのtweetdeckが最近急に落ちるようになりました
タブごと死ぬのです
JavaScriptが原因でブラウザが落ちるってヤバくないですか？ JavaScriptでChromeが落ちることはありえないので、
つまりJavaScriptが原因じゃないってことです。 tweetdeckはJavaScriptで動いているはずなので他に原因は考えられませんが react.jsっていうのを知りました
http://qiita.com/koba04/items/4d13caf5ab4507974bf0
React.jsではJavaScript内にVIRTUAL DOMとしてDOM Treeのような構造体を持っています。
rerenderされる際に、その構造体の前後の状態を比較し、最小限の変更で実際のDOMに反映します。
この機能がいいと思います
どうですか？ >>24
JavaScriptで死ぬことも当然あるし、他の原因で死ぬこともある
ところで質問は？ >>28
ヤバくないですか？
って聞いてるのが分からないんですか？ ヤバくはないし、JavaScriptが原因かどうかも疑わしい >>32
あなたがそう思うならヤバいんだろうね
頑張ってね strict mode でグローバルオブジェクトを取得する方法で、こんな方法を見かけました
function f(window){
"use strict";
var global = (0,eval)("this");
}
f();
なぜこの方法で行けるのですか？
eval("this")だと確かにグローバルオブジェクトが取得できないのですが、上の方法でなぜ取得できるのか分かりません。 evalのthisが指しているオブジェクトがwindowだから
window.eval >>34ではないが、なぜ this でグローバルオブジェクトを参照できるのか理解できない
(function () {
'use strict';
console.log(eval('this')); // undefined
console.log((0,eval)('this')); // [object window]
}());
Strict Mode 影響下にあるのだから this === undefined になるべきだと思うが、考え違いをしているのだろうか
なぜ後者だけグローバルオブジェクトを参照できるのか理解できない
そもそも、こういう場合はスコープの関係上、Function を使うものだと思っていたのだが… だと思うじゃなくてコードを実行しろよ
(function(){
console.log(this);
})() >>37
「Function を使ってグローバルオブジェクトを取得する方法を教えてくれ」という質問だと勘違いしてるんじゃない？ ところで、このスレは継続して使うのかな
荒らしの立てたスレだから誰かが前スレで作られたテンプレ通りに立て直すものだと思っていたんだけど
(自分は制限ホストの為、立てられない) >>34
>>36が触れているように実行するスコープが違うだけ。strict mode自体はあまり関係ない。
>>34の例だと、evalのコードはグローバルスコープで実行されるので、this===windowとなる。
説明すると結構ややこしいけど…もし興味があるなら、以下の説明をどうぞ。
evalの実行には"Direct Call"と"Indirect Call"の2種類の方法がある。
前者はローカルスコープで実行され、後者はグローバルスコープで実行される。
（他の関数には存在しない特性なので、要注意）
http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2
"Direct Call"になる（＝ローカルスコープで実行される）条件は、以下の全てを満たすとき。
(1) CallExpression の形で実行されること
(2) CallExpression を構成する MemberExpression の型が Reference であること
(3) Reference の base が environment record であること
(4) base の reference name が "eval" であること
逆に、(1)～(4)のどれか一つでも満たさない場合は、"Indirect Call"（＝グローバルスコープ）になる
http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.2.1.1
(1)～(4)を全部説明すると長くなるので、自分で調べるか、分からなかったら言ってくれ。
eval("this") だと(1)～(4)すべてを満たすので、ローカルスコープで実行される。
(0,eval)("this") だと(2)以降を満たさないので、グローバルスコープで実行される。 >>41
ありがとう
完全ではないが、理解した
("Indirect Call" は Function('return this;')(); と何も変わらないわけでバッドノウハウに留まる感じだが、知識として覚えておきたかった)
(function () {
'use strict';
var globalEval = eval;
console.log(eval('this')); // undefined
console.log(globalEval('this')); // [object window]
}());
> strict mode自体はあまり関係ない。
Strict Mode でなければ "Direct Call"と"Indirect Call" のいずれも this === window となるのだから無関係とはいえないのでは？
>>34は Strict Mode でもグローバルオブジェクトを参照する方法を求めて質問したのだと想像するが… 改めて確認してみたが、"Indirect Call" の概念は ES5 から導入された仕組みなんだな
ES3 には存在しなかった
http://bclary.com/2004/11/07/#a-15.1.2.1
https://web.archive.org/web/20140802211018/http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/15-1_Global_Object.html#section-15.1.2.1
クロスブラウザの観点から考えると 2016/01/12 までは Function を使用するコードが無難になるのか >>42
「Strict Mode 自体はあまり関係ない」と言ったのは、this に限らず他の変数にも言えることなのでそう記述した。
var hoge = "global";
(function(){
var hoge = "local";
console.log( eval("hoge") ); // local
console.log( (0,eval)("hoge") ); // global
})();
それに、非Strict Mode でも this が window 以外のことはいくらでもあるから、Strict Modeが関係あるというのは語弊があると思った。
まあこの辺は言い方の問題なので、あまり突っ込まないでほしいｗ
おっしゃる通り、"Indirect Call" は ES5 からの仕組みなので、例えば IE8 以前では上のコードは local,local になる。
この方法を用いるのは時期尚早だし、>>42の指摘のある通りそもそもバッドノウハウの部類なのであまりお勧めできないだろう。 本来は放置するのが鉄則だし
あくまで避難先にしてテンプレ固まり次第早々に建てたほうがいいよ >>47
そしたらまた建てなおされるだけだぞ。
それが嫌だって言ってるんだが。 Chromeの新しいタブを開いてdocument.titleを見ても空なんですがどうやってタイトルを取得できますか？
document.title = 'a'ってやれば勿論上書き輪出来るんですが取得だけできないようで・・・ だから、URL＝location.hrefに入っている奴、タイトル＝空 なんだろ。 Title要素がないから取得した結果が空なんじゃない ソースマップファイルというのを使えばminなJSでもデバッグできるようになるらしいですが
どういう仕組みで出来るようになるのでしょうか？ >>49
configData.translatedStrings.title configDataなんてオブジェクトはありません >>49
title要素がないんだから仕様通りでしょ 荒らしが建てたスレで、荒らし対策の話し合い…
なんか笑えてくる >>57
お前は放置するんだよな。
うん。
で、お前だけが書き込むのか？ >>60
今まで放置され続けてきたのに今更何を言ってるのか
そんなに使いまわしたいなら君が率先して>>11の若いスレから使ってきなよ >>54
JS側にそういう仕様があるわけではない
Chromeにそういう機能が付いてる >>44
> それに、非Strict Mode でも this が window 以外のことはいくらでもあるから、Strict Modeが関係あるというのは語弊があると思った。
> まあこの辺は言い方の問題なので、あまり突っ込まないでほしいw
了解した 荒らしが新スレを立てようが放置すればいいだけ
荒らしの立てたスレを使うから荒らしが調子に乗って新スレを立てる
多分、近いうちにvol.124も立つだろう
使われると分かれば間違いなく立てる
立てても無駄だと理解させないと駄目 わかりやすく変な改行してるんだからスルーしときゃいいものを >>62
ありがとうございます
知らないうちにそんな機能が付いてたんですね + JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1423910471/
荒らしが重複スレを立ててるな
立てた本人が責任を持って消化しろよ 相変わらずカオスだな、JavaScriptスレは… 下から二番目は単なるミスっぽい気もするが
とにかくお疲れさま いちいち荒らしとか認定してる奴が幼稚きわまりない
ネトウヨかよ
あるスレを淡々と消化していけよ
しょうもない >>74
スレを立てる時に間に余計なテンプレを挟まれたらしい
http://peace.2ch.net/test/read.cgi/hp/1423913913/12n
「荒らしが関与したスレ」にすれば御幣がなかったかもしれないな よく見たらスレありすぎわろた
スレ立て権を無駄に消費すんな
先に立ったスレに優先権があるんだからそのスレを粛々と使っていけばいいだけ こうしてvol. 123スレは4つできたわけかｗ
次スレはいくつできるだろうかね？ｗ 荒らしの学習能力の無さに笑った
vol.124でも無駄に新スレ立てるんだろうな 今だに手作業で次スレを立てるのって何でなの？
手間かかるし、混乱と喧嘩が絶えないし、良いこと無いように見えるけど。 >>81
2chに要望を出すか、2chに代わる掲示板システムを君が開発してくれ >>80
たてるなよ。たてるなよ。
ダチョウ倶楽部ですね？ 自動で立つと切りがいいからここで終わりにしようって事が出来なくなるだろ
それに新規に建てる事なんていくらでも出来るし自動で建てる事のメリットはほぼ皆無
精々スレ番がちゃんとインクリメントされるぐらいだ テンプレに相当する情報をwikiのような共有スペースにして次スレ作成ボタンを主導で押して次スレを立てられるなら便利かもな
同じスレグループは同一リストに入れる事も出来るし そしてテンプレに相当するwikiを書き換えて
スレ立てボタンを押す。いいね。面白いｗ よく見たらこのスレも残ってるじゃん
こっちを先に使えよ
アホかよ
+ JavaScript の質問用スレッド vol.121 +
http://peace.2ch.net/test/read.cgi/hp/1410603104/ window.hogeに何も値を入れなければundefinedですが
一時的にwindow.hogeに値を入れて削除したい場合はwindow.hogeにundefinedを代入すればいいんですか？
それともdelete window.hogeしたほうがいいですか？ 現行スレ
+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1423915644/ >>89
値を代入する前と同じ状態にしたいなら、delete あとすいません
var hoge = 1;
(function(){
'use strict';
console.log(window.hoge);
delete window.hoge;
console.log(window.hoge);
}());
これ実行すると Uncaught TypeError: Cannot delete property 'hoge' of [object global]って出てdelete出来ないんですがなぜですか？
ちなみに'use strict';を消すとdeleteしたら２番めのconsole.logでundefinedになってくれました
なんでstrictモードだとこれでhogeを削除できないんですか？ 必死にここを盛り上げようとしているようだけど、混乱を招きそうなのでいっておく
質問は下記スレッドへ
+ JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1423915644/ Math.random()って偏りがあるんですか？ ---
欠点
シングルトンがある場合、往々にして、システム内のモジュール同士が密結合していたり、 ロジックがコードベースのあちこちに散らばっていることを示します。
隠れた依存関係があること、複数のインスタンスを作成するのが困難なこと、依存関係をスタブで表現しにくいことなど 様々な問題により、シングルトンのせいでテストがより難しくなることがあります。
http://blog.yuhiisk.com/archive/2014/09/21/javascript-pattern5.html
---
この理屈に納得できません
「シングルトンがあるからモジュール同士の依存関係が出来る」となぜいえるのでしょうか + JavaScript の質問用スレッド vol.123 + [転載禁止](c)2ch.net
http://peace.2ch.net/test/read.cgi/hp/1423915644/
↑のスレのタイムマシンみたいですね
オリジナルの質問は↑にしかないのでここは過去に戻りたい方向けのようです 間違ったスレで質問したようなので
こっちで質問し直しただけですが？
変な言いがかりはやめてもらえますかね 質問をコピペしないでください。マルチポストになってしまいます ふと思ったのですがjavascriptにはgotoがありませんが
特に困った記憶がありません
なぜgotoがなくても問題ないのでしょうか？ このスレで回答してくれるのは恐らく荒らしだけなので、回答が付かないようであれば移動することをお勧めします。 >>109
無理やりスパゲッティコードでも
文脈の外へgoto また文脈の中へ gotoくらいなら
callback関数でなんとかなるからかな
goto文が複雑に入り乱れたコードになると
さすがにほぐすのは大変だろうけど >>112
違う違う
breakとcontinueにラベルを付けられるからでしょ
実質gotoと同じ機能だ >>113
continue は行き先が決まってるし
break は元のブロックの内部に戻れないぞ >>114
実質同じって事は仕様的に一緒って言う事じゃなくて通常使いの範疇で役割が一緒って事だ
(要するにネストしたループ内からの脱出)
ブロックの中に戻るなんてCでもまず間違いなくやらんぞ
それとcontinueもbreakと同じようにラベル使えるけど このリンクからビットコイン購入・販売所bitFlyerにご登録すると
1000円分のビットコインがもらえます！
https://bitflyer.jp/gift/fn0tlipl
外部ウォレットに送金できるので、とにかく一応もらっておくといいです。 >>115
C だったら long_jump 使うことはあるんじゃね？ >>117
setjmp, longjmpだな
それは基本的にブロックどころか関数外に飛ぶ為のもんだ (スタックポインタをいじる為のもん) >>109
> ふと思ったのですがjavascriptにはgotoがありませんが
> 特に困った記憶がありません
> なぜgotoがなくても問題ないのでしょうか？
gotoの代わりになるものが存在するから。
1. 関数呼び出し、return
2. continue、break
3. for
4. if ～ else
5. try ～ catch （throw）
こんな所かね？
これらの機能がない言語っていうのもあって
例えばアセンブリ言語なんか、3, 4, 5 が無いし
C言語でも5がない。
実はgotoは1～5の機能を実装できる万能機能。
しかも1～5では不可能な、どこにでもジャンプできるという高機能な点もある。
じゃあgotoだけがあればいいじゃん？って思うかもしれないけど
歴史的にはgotoが先に生まれて、そのあとgotoの「どこにでもジャンプできる」というのは
コードを著しく複雑にするというのが判明した。
「どこにでもジャンプできる」というのは欠点とみなされたわけ。
そののち制限されたgotoとして1～5の機能が生まれた。
gotoが無いと困る言語っていうのは、1～5の機能が無いか、
あってたとしても少し機能が足りないから。 >>119
随分適当だな…
gotoの代わりになってるのは2.5.だぞ
> 実はgotoは1～5の機能を実装できる万能機能。
ジャンプ出来るのは関数内だけだ
そう考えると関数を越えられる5も違うと言える
ようするに2だけ >>120
俺が言ってるGOTOっていうのは、
C言語のGOTOじゃなくて、BASICのGOTOだよ。
もちろんVBとかじゃなく、初期のBASICね。
BASIC・・・1964年生まれ
C言語・・・1973年生まれ
> ジャンプ出来るのは関数内だけだ
BASICのGOTOは本当にコードのどこにでもジャンプできた。
行番号指定でどこにでもね。
関数の呼び出し（そもそも関数がなかったが）の代わりとしても使えたし、
当然returnもGOTOで実装。
3と4はBASICにもあったと思うが、
これもGOTOで実装しようと思えば出来る。
2はBASICにあったかな？ なかった気もするが。
GOTOの元をたどれば機械語のジャンプ命令に相当するんだよ。
その流れからBASICにもC言語にもgotoという名前で実装された。
その時にgoto（ジャンプ）の代わりになるものが追加された。
それが>>119で書いた内容。
だけどまだ足りなかった。特に5の例外ができるのはかなり後だったね。
C言語では今でも例外がないからgotoが使われることがある。
エラーが発生した時にgotoで関数の後ろに飛ばすんだよ。
そのほうがスッキリかけるから。
最近の言語はほぼ全て例外をサポートしてるんで、
JavaScriptだけでなく最近の言語はgotoなくても困らないよ。 htmlとcssとjqueryをやり始めて三ヶ月なんですが自分が作っているサイトでjqueryを使いたいのですがどうしてもscrollがうまくいきません
アドバイス欲しいんですがファイルをアップしたら見てもらえますか？
ダメそうならもうちょっと考えます jQueryのステマだよ。
jQueryは役割終了しているけれど、これを有料で布教して食っている、非技術系デザイナーのクズが少なからず存在しているからな。
因みに、ここ2年のJS実装では、匿名関数が本当に無名関数になった。jQuery布教者どもが匿名関数を何故か無名関数無名関数とほざいていたからか、JSが折れた形ｗ >>123
テンプレ見てなかった
すんません
でもjqueryは書くほどのレベルじゃないっていうかホントに初心者用参考書のレベルなんです
コードは間違ってないと思うんだけど…
とりあえず後で書いてみます
>>124
ありがとうございます
ちなみに使用してるブラウザはchromeです
後でコード書きますんでよかったらご指導お願いします
>>125
正直この業界に足を踏み入れたばかりなので無理関数とかわからないです
jqueryって嫌われてるんですかね？やっぱjsのが現場で使いますかね？ > jqueryって嫌われてるんですかね？
一番使われてるライブラリだよ。 >>125
原理主義者はどの世界でも意味不明だなｗ
いや、マジわからんｗ 今やjQueryの機能はより良い形で標準で提供されているからな。
それも似ているがやや違うと言った物が多いので、jQueryを使い続けることは混乱の元になる。
その冴えたる例がProxy。いくらネイティブでProxyがThenableを考慮してくれたからといって、
同期/非同期の差で躓くことは多い。
もういい加減標準機能のポリフィルに切り替えていった方がいい。 >>130
標準で書くのとjQueryで書くの
標準で書いたほうが短くなる例
一つでもありましたっけ？ｗ
というレベルだよな。
探せば見つかるかもしれないレベルだ。
明らかにjQueryの方が上だよ。 >>131
なにを言ってるんだ？？？
Q.DefferdとPromise、Q.ajaxとfetch、animeteはanimateだし、
長さはほぼ変わらないよ。
でも機能的には標準のほうが上だし、後から出た分APIとしてもちゃんとしてる。
だからこそjQueryを使う意味は無い。
まだ標準で不足してるのはDOMの比較部分の一部などだが、そこだけjQueryのサブセットか何かを使えばいい。 >>132
ワロタｗ
単語の長さじゃないよ。
同じことをやるのにどちらが短いかだよ。
$(document).on('click', '.class', function() {
$(this).toggleClass('state', 'active');
})
例えばこれと同じことを標準だけで書いてみてよ。 >>133
そういうニュアンスで言ったつもりだが。
DOM操作周りはまだ標準が不足してるからライブラリを使えばいいと言っている。
ただしClassのtoggleは標準機能を使うべき。
だがjQueryを使うとどうしても全体、不要なとこさえがjQuery流になってしまいがち。
だからポリフィル＋最低限のライブラリでないといけない。 一応書くとこんなかんじか
document.queryAll('.class').map(e=>
e.onclick = e => e.classList.toggle('state', true)
) >>135
ちょっと違うね。
それだと.classの要素が動的に増えた時に対応できない。
onclick属性を使ってるから複数のイベントハンドラに対応できない。
toggleClassの所は俺が間違えたから訂正しておく
$(document).on('click', '.class', function() {
$(this).toggleClass('state');
}) 昨日書き込んだ>>122です
$(function() {
var nav = $('#nav');
nav.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
nav.fadeIn();
} else {
nav.fadeOut();
}
});
});
画面をスクロールするとnavが表示されるようにしたいのですがうまくいきません。
先輩曰くcssのpositionのせいで動かないらしいんですが具体的に何がどうなったら動かないっていうのは説明できない(わからない)そうです
ブラウザはchromeです
よかったら知恵を貸してください 見えてないだけとか？navの縦サイズとcssはどうなってんの #nav {
display: block;
width:100%;
height:40px;
background-color:rgba(0,0,0,0.5);
position: fixed;
top:90%;
z-index: 255;
overflow-x: hidden;
}
こんな感じです
先輩が言ってたpositionはnavじゃなくてサイト全体でposition使いまくっているからうんぬんだそうです
マジでわからん......
$(document).ready(function() {
$("#me").click(function () {
$("#nav").fadeIn();
});
});
ちなみにクリックでのnavの表示は上手くいきました まずはscrollイベントのリスナが実行されているかどうかをalertやコンソールで角煮する
さらにscrollTopが動いているかどうかを同様に確認する
そこから原因を推測して修正する
断片的なのでこれくらいしかアドバイスできない
もしピンポイントの指摘が欲しいなら>>2のサイトに再現コードを貼ることだね >>137
もはやjQueryの機能を標準で再現できるかという話になってないか？
そこまで拘るのならもっと一般的なユースケースを挙げてほしいね。
まあそれはいいよ。
結局jQueryを前提にしたようなものしか出してこないだろうし。 >>141
ありがとうございます
とりあえず書いてみました
制作途中なんで凄く汚いですがお願いします
http://jsdo.it/test_joy/cTjA >>143
確かにその先輩の言う通り、サイト全体を position: absolute; にしてるのが良くないね
本当ならサイト全体の構成を直すべきだけど、とりあえず
「$(window).scroll」 → 「$("#wrapper").scroll」
にすればいける >>146
ありがとうございます！
時間的に全体をなおすのは難しいので#wrapperにつけることにします >>142
ユースケースの話をするなら「古いブラウザでも動くようにしたい」も
立派なユースケースだと思うけどね。
それは置いといてなんかユースケース出せるわけないみたいなこと言ってるし、
想像力のないあなたに一般的なユースケースを。
ページ上にフォームがある。このフォームでsubmit（input,button関係なく）が
押された時に、二度押しを防ぐために、そのフォームに含まれるinput要素全てを
disabledにしたい。そして色も変えたい。
ただし、ページ上にフォームは複数あることもあるし一つもないこともある。
全てのページ、すべてのフォームでこのような処理を行いたい。
2度押し防止のdisabledをやったことがない人はいないと思うんで。 古いブラウザでもってのはポリフィルの役目じゃね
jQueryはブラウザ間の誤差を埋めて貧弱な標準機能を補完するために生まれたと思うが。 <FORM NAME="enq">
<INPUT TYPE="text" NAME="fugafuga">
<INPUT TYPE="hidden" ID="hogehoge" NAME="hogehoge" value="">
<INPUT TYPE="SUBMIT" VALUE="送信" ID="pekepeke" NAME="pekepeke">
</FORM>
<script>
document.forms.enq.hogehoge.value="saitama";
</script>
上記では、enq.hogehogeの中をJavaScriptでsaitamaにしておりますが、
enq.fugafugaの中で入力した値を、「送信」ボタンを押したタイミングで、
enq.hogehogeの中の中に入れるようにするには、どのようにしたらよいでしょうか？
例えば、fugafugaに「日本」と入れて送信した場合、hogehogeにも「日本」が入ってるような感じです。 >>149
たしかにそうですね。
だけど古いブラウザでも動くと言うのは事実なので、
少しいい方を変えて「特定のブラウザの固有の問題を回避して」
っていうのがよりよい言い方かもしれないですね。
ブラウザ固有の問題というのは、ブラウザのバグだけでなく単にその機能がない
っていうのも含まれるわけですが、ポリフィルはその足りない機能を埋めるのに対して
jQueryは埋めるのではなく、代わりになる機能をDOM標準よりも
もっといい形で提供したもの。
どんなにHTMLやJavaScriptが発展して標準化されたとしても
ブラウザ固有の問題は無くならないでしょうしね。
最新のSafari2.1.3が、新し目のSafariバグ対策がされているのも記憶に新しい話。
http://blog.jquery.com/2014/12/18/jquery-1-11-2-and-2-1-3-released-safari-fail-safe-edition/
こういうのは正しい書き方をしているのに、ブラウザのバグで動かないわけで
見つけづらいバグになる可能性が高い。 それを言い出したら、jQuery自体にもバグはあるからな
ブラウザ固有のバグに比べたら少ないかもしれないが、だからと言ってjQueryを盲信すべきではない 1.viewでdomイベントをハンドリング
2.modelを変更
3.modelのイベントを、viewがハンドリング
4.viewが自分を変更
みたいな処理がありますが、
viewは1の時点で4の処理が想定出来ます
なので
1.viewでdomイベントをハンドリング
2.modelを変更
3.viewが自分を変更
という処理も出来ると思いますが
何故viewはmodelのイベントをハンドリングするのでしょうか？👀 >>153
modelを変えるのは、そのviewだけとは限らないからだよ。
modelは色んな物から書き換える。
例えばカレンダーに新しいスケジュールを登録したら
カレンダービューが変わるのは当然として、
今日の予定ビューも変わるだろうし、
TODOリストも更新するかもしれない。
日付が変わったら今日の表示も変えないといけないし
スマホから登録したら、PCでみたブラウザのリアルタイムで変えたいかもしれない。
ビューがモデルを変えた時にビューを更新するだけだと
それ以外のビューが同じモデルを参照している時の処理が面倒になる。
モデルはいろんな処理によってどこからでも変わる可能性があるという前提で
変わったらそのイベント通知がきてビューを更新とすることで
何をきっかけに変わったとしても対応できるようになる。 mb.miniAudioPlayerというのを使いたいのですがどうすればいいのかさっぱり分かりません >>133
そもそもこの先はObservableの時代だと思う。
var mouseDowns = document.queryAll('.class').mouseDowns;
for ( evt on mouseDowns ) evt.target.classList.toggle('state');
とES7の時代では書けるらしい そもそもViewはModelを変更しない
入力を受け取るのはControlでViewはその橋渡しをするだけだ >>158
それは本来のMVCじゃなくて
ウェブ用にへんに歪められたMVC2 >>158
それはJavaScriptのフレームワークを知らない人の意見 JavaScriptで、「html自体はリロードするが、それが使用する画像などはリロードせずキャッシュを用いる」リロードを行いたいのですが
何か良い方法は無いでしょうか。
chromeで動作を見てみたのですがlocation.reload()だと画像もリロードしてしまいます。
location.href=location.hrefでも同様です。
クエリの部分に変更を加えた場合
（たとえばexample.com/reload.phpでリロードを行う場合、location.href="example.com/reload.php?time="+Date.now();などとする）
目的の動作になるのですが、この方法以外で実現可能でしたら
教えていただけないでしょうか >>161
試してはいないが
img の srcをロード後にスクリプトからあてがうようにすれば
htmlがリロードされても画像はローカルキャッシュが効くのではないか？ >>161
chromeのスーパーリロードは Ctrl + Shift + R で意識的にしないとできなかった気がするが
ほんとにそれキャッシュからではなくサーバーからデータ受信してる？ >>159
本来のMVCは
入力→C→M→V→出力
だよ
目的はModelからその他を分離させることだから、Modelが中心 ビューがモデルに対して視覚的なイベントを発行し、それをビューで受ける、
というはアリなのでしょうか？
そういう例が「backbone.jsアプリケーション開発ガイド」にあるのですが。
英語になりますがここに書籍と同内容のサイトがあります
http://addyosmani.github.io/backbone-fundamentals/#application-view
AppViewのfilterOneメソッドの中で、
todo.trigger('visible');
と、todoモデルに対してイベントを発行。
そのイベントをTodoViewがハンドリングして、toggleVisibleメソッドを実行。
つまり異なるビュー同士が、モデルを介してメッセージをやりとりしている形です。
しかしモデルに対してvisibleというカスタムイベントを発行するのは何となく違和感があります。
でもモデル自体はvisibleの処理内容に関しては何一つ関知していないので、
こういう使い方はいいのでしょうか？ Modelが入力イベントに対して反応するのはMVC的には変。
それだとModelControllerになってしまう。
でもMVCではなくView層とそれ以外の分離と考えれば変ではない。 >>164
ですね、ただリロードのためだけの特殊な事は余りしたくないのです
（クエリの変更を避けたいのもそれが理由です
>>165
すみません、コンソール見直したのですが間違っていました。
location.reload()などの方法だと画像などはキャッシュを全く使わないわけではなく
if-modified-sinceやif-none-matchなどを吐き更新を確認しているようです
ただ、更新のための通信自体は行われているので
クエリの変更によるリロードよりも遅く感じます
（developer toolsのNetworkタブで確認しても時間がかかっています）
サーバー側から吐くキャッシュコントロールのヘッダの種類も含めてもう少し見直してみます app.Todos.trigger('filter') のようにしてコレクション上でfilterイベントを発生させます。
これによって、それぞれのTodo項目の表示と非表示が切り替えられます。
という文章も出てきました。コレクションというのはbackboneではモデルの集合のことです。
JavaScriptがクライアントサイドである以上、
モデルに対しても表示まわりのイベント発行は許されるのでしょうか
そこまで分離してないというか >>166
> 本来のMVCは
> 入力→C→M→V→出力
それはSmallTalkを知らない奴の意見。
本当のMVCは
Model ←→ View ←→ Controler
↑ │
└───────────┘
http://csis.pace.edu/~bergin/papers/mvcnew.gif
> 入力→C→M→V→出力
これはMVC2
JavaScriptの時代になってようやく本当のMVCの話が出てきただけ。
WindowsなどでGUIアプリを作っていた人間なら、本当のMVCを知っている。
その後でウェブが出てきて、MVC2をみて、なんじゃこりゃ？って思ってた。
そして、やっと本当のMVCができるようになったのかよって苦笑してる。 >>171にリンク追加
http://csis.pace.edu/~bergin/papers/ModelViewController.html >>168
> Modelが入力イベントに対して反応するのはMVC的には変。
MVC的にはおかしくない。ウェブアプリで歪められたMVC2的におかしいだけ。
最近のJavaScriptはようやくデスクトップGUI波のことが出来るようになったから
本当の意味のMVCができるようになった。
本当のMVCではビューがモデルを変更する >>171
> それはSmallTalkを知らない奴の意見。
ま、Smalltalk をうっかり SmallTalk と書いちゃう人の場合
自分も Smalltalk のことはろくすぽ知らないけどな！って自己紹介しているようなもんだから、
この人が書いていることも、どこまで信用してよいやら… 何が「本当」かはともかく、オリジナルの本来の MVC の概要については
この資料が比較的簡潔でわかりやすくまとめられていてお薦め。
（最後の方すこし RoR ユーザー向けだけど、前半は一般論で参考になる）
「あの日見たMVCを僕たちはまだ知らない for RoR」
http://www.slideshare.net/shinnosukekugimiya/mvc-for-ror/7 なんだやっぱり>>166 の概念が正しいんじゃん。 あるControllerからModelに通知が行き変化があった時、
その変化はそのControllerに付随するViewだけでなく
全てのViewに通知されるべき。
というのは参考になりました
そういうmodelのパブリッシュ性から、
>>167のように視覚的イベントもmodelで発行するという発想になっているのかもしれません
個人的には視覚的要素が絡むならviewがイベントを発行するべきじゃないのかと思ったのですが
viewがviewをobserveするというのはMVC的にないのかも ちなみにbackboneにはControllerクラスがなく、VとCをViewクラスが担当しています
modelのイベントをトリガーしているのは実際にはCがしているということになるのでしょう MFCはDoc-Viewアーキテクチャだね
ModelとViewの関連性を疎結合にする必要がなければコントローラは
いらないって事なんだろう Modelの状態はチェクボックスその他のView部品に丸投げしたくなる mvvmっていうのの説明を読んでいたら、
これが理想に近い気がしてきました 理想というか、現実じゃね。
どうしてもVがVMになってしまうというか、してしまいたくなるというか。 >>176
> なんだやっぱり>>166 の概念が正しいんじゃん。
だからそれはMVC2だって言ってるじゃん。
MVC2としては正しいよ。 >>175を見てもまだそんなことが言えるのか
SmallTalkを知ってる奴はやっぱり違うな >>184
> Viewは視覚的なすべてを扱う。
> モデルにデータをリクエストして、それを表示する。
モデルにデータをリクエストして！
モデルにデータをリクエストして！
モデルにデータをリクエストして！
モデルにデータをリクエストして！ >>175で見て思うのは、
RailsとかJavaScriptとか
1998年に既にJavaで通った道に
やっとたどり着いただけなんだよな。
最先端のつもりでいるのに、15年以上前だったｗ クライアントサイドはサーバサイドのMVCより難解に感じる
他のハンドラを反応させるためにイベントを起こすけど
そのイベントが誰に何をさせようとしているのか、
イベントを見るだけでは分からないので
プログラムの流れが読み取りにくい asm.jsってどうなん？
デザインしたいだけの一般スクリプターには数字の計算が早くなるだけならあまり恩恵なさそうだが >>186
ViewとModelの関係がリクエスト-アンサー型かオブザーバー型かその他かはMVCの本質的に関係ない >>190
マイクロソフトがサポートを表明したばかりだね
すぱるタンに搭載されるかは不明
確かにゲームや画像処理などcanvas使う以外ではあまり恩恵がなさそう 簡単なプログラム作りたいんですが教えてください
５択のセレクトボックスを作る
選択によって１０点から５０点まで点数をつける
そのセレクトボックスを複数作り合計値を出力する >>193
http://jsfiddle.net/
まずは自分で書いてみる
どうしてもわからない所があればまた聞きにくれば？ >>190
asm.jsは直接使うものではなくC,C++で作ったプログラムをそのままブラウザで動かすためのもの asm.jsは文字列すらない、ArrayBufferをメモリに見立ててアクセスするもので、
文字通りアセンブラみたいなもの。あまり人が直接書けるようなものではない。
人が書くことを考えればSaneScriptが現実的。 コンパイラっていうかトランスレータもあるけど決して手で書けないかと言うとそうでもない
バイトコードやネイティブコードになるわけじゃない asm.jsは一見頑張れば手でも書けそうに見えるが、普通に変数を使うと速度が出ない。
速度を最大限だそうとするとArrayBufferまみれになってとても常人が手を出せるものではない。 良く知らんけど勝手にasmってくれｂ驍謔､じゃないｂﾆ
いちいｂｿそんなのに合ｂ墲ｹて書いてらｂ黷ﾈいわ ぶっちゃけSoundScript/SaneScriptが実用化されたら、C++並にはなるだろう。 "use asm"とは別に"use strong"って話もあるな
http://d.hatena.ne.jp/jovi0608/20150219/1424322335
どう落ち着くかはまだまだ先の話みたいだ
昔のBASICコンパイラみたいに「ここだけ実数演算いらねーから速くしてくれ」
みたいに使えれば楽なんだが SaneScript/SoundScriptでは
・オブジェクトの拡張不可→連想配列が必要ならMapを使う
・任意静的形付け
・クラスベース（＋プロトタイプベース）
・配列の特殊化
・その他strict modeの強化版のような制限
となるもよう。 静的型付けだけで劇的に早くなることはないと思う。
今だって十分に整理されたコードでは型推論が効いてる。
Aの場合、Bの場合、そうでない場合のフォールバックとなっていたネイティブコードが
Aでなければ即ランタイムエラーにできて、何分の１にもなるのと、チェックを省けるケースも増えるだろうけど全く要らなくなるわけではないから。
基本的にCPUのキャッシュや投機にヒットしやすくなる程度の効果だと思う。 function f(t){
console.log(t);
setTimeout(f, t);
}
f(1000);
1秒待機して実行したいんですが、これ2回目以降はundefinedが出力されるのはなぜですか？ function f(t){
console.log(t);
setTimeout(f, t, t);
}
f(1000); >>205
setTimeoutのfは引数が無いでしょ あ、そうか、たしかに引数をあたえてなかったですね！ Cとかまともに書いたことなくて変数の型や初めて使うArrayBuffer（結果出力のみに使用）に苦戦しながら
やっと動かせたRGB→HSV色変換関数のasm.js版
Firefoxは122ms→374msで3倍遅くなったのにChromeでは241ms→62msに4倍速くなって驚いた
まだ変数とかそのままだから>>198のようにすれば高速化できるのか asm.jsはFxではオーバーヘッドが大きいし、ネイティブ関数と同じでインライン化等の最適化が効かないから
一般に小さくてとても軽い関数では効果はでない。asm.jsで書くなら書けるところ全部をそうしないと。それが罠。 node.jsってwindowsでも使えるんですか？ じゃあ使ってみたいですけど
サーバサイドをやるのはちょっと怖いです
みんなやってるんですか？ やっている人もいますし、やっていない人もいます
はい次の人 普段使っている言語なので、他のサーバ環境よりは使いやすいはずですよね http://andreryu.hatenablog.com/entry/2014/04/12/230425
ここを見てやったらひな形サイトがすぐに表示できました
expressの使い方はまだ分かりませんが
publicの中にindex.htmlを作成したら、それが表示されました
動的要素のないサイトならすぐにサーブできますね >>211
Chromeは既存のV8のエンジン内でasm.jsのコードを高速に動かす最適化がかなり進んでる
Firefoxの場合はAOTの別エンジンで実行するから、コードの一部だけをasm.js化しても
オーバーヘッドの方がデカくなってしまう
ゲームみたいに全部asm.jsだと超高速に動くようになる 本当に「"use asm"」をターゲットに最適化をするTuboFunはまだChrome安定版で有効になっていないだろう。
現状asm.jsで早くなるのは汎用的な最適化によるもの。 可読性の質問はここで宜しいのでしょうか？
他言語→javascript初心者なのですが、記述方法がいろいろありすぎて困っております。
例えば
Web上に入力されたキャラクタの名前を取得したく、
初期実装が(id=character-name)の中身で今後は取得先の変更を考慮するとして、
const charname = (function getCharacterName(){return jQuery('#character-name').val();})();
const charname2 = (function(){return jQuery('#character-name').val();})();
const charname3 = jQuery('#character-name').val(); //入力から取得
const charname4 = getCharacterName(); //詳細は別で記述
上4つはすべて同じ処理を指定ますが、一般的、もしくはこれがわかりやすい、もしくは何もわかってない！というのはどれでしょうか？
あとconstはまだ使うべきではありませんか？ >>223
まず全体に言えること
> jQuery('#character-name')
ではなく $('#character-name') と書く方がいい。
理由はそのほうが短いから。
もう一つ。constは対応していないブラウザが多いから注意
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
> const charname = (function getCharacterName(){return jQuery('#character-name').val();})();
これは無駄な処理をしているだけ。一回しか使われない関数を作って呼び出してる。
> const charname2 = (function(){return jQuery('#character-name').val();})();
これも上と同じ。ただ関数に名前をつけてないだけ。
> const charname3 = jQuery('#character-name').val(); //入力から取得
問題なし。（ただし「全体に言えること」は除く）
> const charname4 = getCharacterName(); //詳細は別で記述
中身とどういう考えで関数にしたかによる。
中身が「return jQuery('#character-name').val()」だけであるなら
俺は多分関数にはしない。 class="human"の中のイメージを切り替えたいのですがうまくいきません
古典的なonとoffを切り替えるパターンです
$function() {
$("img[src*='_on']").addClass("current");
$(".human img").hover(function(){
if ($(this).attr("src")){
$(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
}
},function(){
if ($(this).attr("src") && !$(this).hasClass("current") ){
$(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
}
});
});
記述的におかしい部分はありますか？
ご指導いただければと思います すいません
&はjsファイル上では"&"です
よろしくお願いします >>225
回答有難うございます
>$('#character-name')
こちらの環境(wordpress)で何故か$記述だとうまくいかなかったのでjQueryと記述してました。
単純に理解不足＆設定ミスだと思われます。解決次第$で記述します。
処理に関しては将来的にデータベースから受け取ったり、他人がネットを介して入力した情報を何らかの方法で受け取ったりと
する可能性を考慮しております。複雑化した場合行数的には1～20行程度の処理を想定しております。
1行で済ませされる間は変数名に気を使ってやれば
3の記述がすっきりしますね。constは外します。未来の自分がやらかさないか不安ではありますが・・・。
アウトラインの可能なエディタを使い、複数行化したら2に変更すれば良さそうですね。
別のところに記述するのはソース内ツリー化に対応してるエディタが増えてきている昨今だと
別の所で呼ばない以上離れて記述するのは意味なさそうですね。
ありがとうございました。 >>226
> 記述的におかしい部分はありますか？
$function() {
↑これ すいません
自分のことながら見た瞬間笑ってしまいました
書き直したのですがやっぱりうんともすんとも言いません
正直お手上げです >>228
wordpressの使用忘れたけど、標準でjQuery入っていたはず。
使えないとしたら、wordpressが互換性のために、noConflictを使って
$を削除しているのだろう。そういう時は以下のようにすればOK
jQuery(function($) {
あなたのコードを全てこの中に書く
});
場合によってはこっちのほうがいいかもしれないけど
(function($) {
あなたのコードを全てこの中に書く
}(jQuery));
この二つは実行されるタイミングが違う。jQueryのready()とかを調べると良い。
> constは外します。未来の自分がやらかさないか不安ではありますが・・・。
外すのはいいけど、代わりにvarをつけるようにｗ
古いブラウザに対応する必要があるならこれ。 今から外に出るので帰ったらjsdoに上げて見たいと思います
その間で変なところを見つけましたら修正してから上げますのでご指導お願いします >>226
currentを何のために使いたいのかのかよくわからん。
先に細かい所を指摘しておくと、
$(".human img[src]").hover(function(){
と書けば、余計な
if ($(this).attr("src")){ がなくせる。
あと、attrの第二引数に関数を使えばもっとすっきりする。
$(function() {
$("img[src*='_on']").addClass("current");
$(".human img[src]").hover(function(){
$(this).attr("src", function(index, attr) { attr.replace("_off.", "_on.") });
}, function(){
if (!$(this).hasClass("current") ) {
$(this).attr("src", function(index, attr) { attr.replace("_off.", "_on.") });
}
});
});
とりあえず途中だが、ここまで書いてcurrentの使い方に違和感を覚えた。 >>232
じゃあ課題として、とりあえず
8000行まで減らしてみ。
JavaScript入門書を見ながらさ。
最小限の知識しか持ってないのがバレバレ >>233に追記しておくと
違和感っていうのは、この例だとhover使わずに
mouseenterとmouseleaveに分けたほうが良さそうに見えるから
if ($(this).attr("src") と同じで、分ければ、下の
if (!$(this).hasClass("current") ) { はなくせる。
だがそもそも処理が対称になっていない。
対称でない処理はバグの可能性が高い。 もうひとつ言っておくわ。
あと、こういう画像切り替えは
一般的にsrc書き換えではなくCSSで行う。
JavaScriptではclassのみを変更し、
そしてCSS側でクラスに応じた画像を表示する jsdoって書いてたから他のやつと勘違いしたわ
すまんｗｗｗ たくさんの指摘ありがとうございます
自分のなかでまとめた結果ですが
jqueryでの処理はクラスの付与、削除をメインに
CSSにてクラスの有無でdisplay: none;とdisplay: block;を切り替える
というやり方のほうが簡単そうですかね？
まだ出先ですので家に帰りましたらこのパターンで書いて見たいと思います
無知の初心者にアドバイスいただきありがとうございます
24時くらいまでスレを見れませんがアドバイスありましたらよろしくお願いします 俺もも用事があるからもうレスできんのだが、
ぶっちゃけ典型的な画像入れ替えならこれだけでいいはず。
$(function() {
$(".human img").hover(function(){
$(this).toggleClass("hover");
});
});
.human img { background-img: url('・・・_off.gif') }
// とするよりimg毎に画像違うから、#img1 とかになるはず
.human img.hover { background-img: url('・・・_on.gif') }
・・・・いやｗ 普通CSSだけでやるかｗ
JavaScript無し
.human img { background-img: url('・・・_off.gif') }
.human img:hover { background-img: url('・・・_on.gif') }
URLをCSSにずらずら書きたくないにしても、
onとoffを入れ替える関数（正規表現で一行でできるはず）を作れば
このレスの一番上に書いたコード + 1行でできるはずなんだよな。 >>239
ここはjQueryスレじゃない。
消え失せろ。 なんかもうすぐ過去ログが見られなくなるという情報を見たのですが
過去のjsスレを検索したい時はどうすればいいんですか？
以前見た気がするから検索したいということもあるんですが >>242
2chが西村以上の金の亡者に生まれ変わるので、過去ログはJIMという豚野郎
に金払わないと見られなくなります。おまけに専ブラも限定されます。 >>240
> 必要もないのにjQueryを乱用するのはやめい
必要かどうかを判断するのはお前じゃない。
自分のやり方を押し付けるな。 >>241
君がここで jQueryの話をさせたくないって必死なのはわかるが
君が来るまで、ここは平和に進行していたんだ。
荒らすような真似はやめてくれ。
せめて、jQueryを使わない実装でも書いてくれ。
君のレスは何の役にもたっていない。 >>245
>>246
字が読めなかったようだな
ここはjQueryスレじゃない。
消え失せろ。
やり方を押し付けるな？お前は全力でjQuery押し付けてるわけだが？
カス野郎 テンプレ見りゃわかると思うけどここは隔離スレみたいなもんだから ここは自由なスレだから
何も禁止じゃない
あえて言うなら禁止とか言うの禁止 禁止とか言うの禁止とか言うの禁止とか言うの禁止とか言うの禁止 嫌とかじゃなくて質問スレなんだから当然質問以外はご法度だし。
ライブラリの作法なんかの話題はスレチになる。 >>253
ちょっとまてｗ
回答もだめなのか？ｗｗｗ 初期データに関してはajaxで読むのではなく
サーバで最初から埋め込んだ方がいいと本に書いてあったのですが
何故ですか？
処理がややこしくなるのでajaxで読んだ方がいいように思います 通信が1回分減るからじゃ？というか理由書いてなかったの？ もうhttp2の時代になっていくしバッドノウハウだよ。 scrollBy()で相対スクロールさせるところまで作れたんですが、
スクロールをスムーズにするにはどうしたらいいでしょうか？
ご教示お願い致します >>255
> 処理がややこしくなるのでajaxで読んだ方がいいように思います
そこで処理がややこしくなると思う人は
アーキテクチャを考えられるレベルに来てないね。
初期データをajaxで読むか埋め込むか
どちらでも違いを意識しないような
作り方をすればいい。
それを考えるのがアーキテクトの仕事。 >>258
> スクロールをスムーズにするにはどうしたらいいでしょうか？
スクロールをスムーズにするっていうのが、アニメーションのことなら
標準のDOM APIにはそういう機能がないよ。
頑張りたい人（車輪の再発明）をしたい人なら自力で実装すればいいが、
まあ普通はjQueryのanimate()メソッドなどを使うね。 >>257
> もうhttp2の時代になっていくしバッドノウハウだよ。
確かに、IE11の時代に慣ればそうだが、
その時代は一体いつ来るんだ？ このスレを見てStrictモードを試してみるとエラーになったので書き換えようと思っているのですが
インライン関数（即時関数）の名前付けがどのあたりのブラウザからサポートしているか教えてください > 確かに、IE11の時代に慣ればそうだが、
訂正。IE11がサポートしてるのはSDPY
HTTP2は将来的には問題を解決することができるかもしれんが
今すぐできる技術じゃないんで、現実的ではない。 ところで、Web作成にプロトコルの知識って必要なの？
サーバとブラウザでいい具合に調整してくれるんじゃないの？ >>265
その知識がないと、サーバーを選ぶことが出来ない。 カス野郎 と言いがかりをつけてライブラリ禁止を悪く見せようとする工作員さんお疲れ様です >>252
ちょっと違うな
現行スレはこちら
http://peace.2ch.net/test/read.cgi/hp/1423915644/ + JavaScript の質問用スレッド vol.123 +
（ム板はLRでjavascriptが禁止されてるので違います） ちなみにライブラリ許容のJSスレが必要というならまだ↓があるみたいだが
+ JavaScript の質問用スレッド vol.121 +
http://peace.2ch.net/test/read.cgi/hp/1410603104/l50
+ JavaScript の質問用スレッド vol.122 + [転載禁止]©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1418395948/l50
+ JavaScript の質問用スレッド vol.123 + [転載禁止]©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1423910471/l50 >>261
その時代はいつかは来るだろう。
必要度が減少していっているものを新たに使わない、学ばないというのは原則。 seoを考えると、初期データ埋め込みどころか結果のhtmlをサーバで生成出来た方がいい
はい論破 江戸時代かっ
今はajaxの結果もきちんと拾ってくれるっつうのに スレタイを鵜呑みにするなら、
jQueryもここで答えていいと思うんですけど
こっちの人が丁寧に答えてくれるよって誘導するのもありかもね >>273
え、まじで？
たしかにサーバサイドJSがもはや一般的だから
そんなことも出来そうだけど
そんな時代になってたか サーバサイドJSとクローラのJS解釈に何の関係があるのか……
今のクローラっていうのはどちらかと言うとサーバでのスクレイピングというより自動化ブラウザに近い存在だぞ。 >>260
ありがとうございます
scrollTopメソッドをanimeteする方法はわかりましたが、これをscrollByに転用するのがうまくできなかったので諦めす >>274
そもそも、ライブラリはどこまで行っても簡単にする為のライブラリ。
それが１種類っていうならともかく、現在は山ほど出ているわけで、
jQueryで回答されるのは、迷惑なのだよ。jQueryわかってない奴に
とっては、余計なライブラリを読み込ませた上に、そこだけそんな
コードを押し付けられてるわけで。
他の奴の場合には、Prototype.jsで回答されましたなんてのが出てきた
りしたらもはや収集つかない。
この手の回答掲示板では、可能な限りライブラリを使わずにコードを書く
ことが定石。回答者の信奉してるライブラリだの書き方なんてのは、それ
こそ押し付けでしかない。 お前のそのどうでもいい長文の批判の方が迷惑なんだよ >>282
なるほど、では>>279のためにコードを書いてやってくれませんか まあなんともいえんな。
document.querySelectorAllでいいところにわざわざ$を使ってるのを見るとイラッとくるが、
document.querySelectorAllと書くのは煩わしい。 querySelectorAllでいいところにというが、
IE8では使えないわけで、俺にとっては毎回
（IE8では動かないコード）
querySelectorAll
と書いているようにしか見えないんだわ。 > querySelectorAllでいいところにというが、
> IE8では使えないわけで、
？？？ > querySelectorAllでいいところにというが
例えばこういうのは、querySelectorAllではダメな例。
$('.class').on('click', function() { }); ライブラリ拒絶してる人は、ライブラリを使わない回答をすればいい
そして質問者がどのコードが最もいいか判断すればいい >>256
http://backbonejs.org/#FAQ-bootstrap
Instead of firing an extra AJAX request to fetch them,
a nicer pattern is to have their data already bootstrapped into the page.
ナイサーなパターンと言っているだけで理由は書いてないようです
やはりリクエスト数が減るからでしょうか 最適化の質問です
var input = document.getElementById("input1");
console.log(input.value);
って言う書き方は遅いからvar a = input.value;みたいに別の変数に格納しろって話を効いたことがあるんですが
var a = {
ago: 10
}
console.log(a.ago);
これもvar b = a.goみたいに入れないとだめってことでしょうか？ >>294
えとさ、1マイクロ秒速くして
意味があると思ってる？
意味があるときだけやんなさい。
殆どの場合ないでしょ？ >>294
最適化するなら、可読性に対して最適化した方がいい。
どうせ速度を最適化した所で誰も得しない。 もうちょっと質問に寄り添った答にしろよw
>>294
一般論として速度のための最適化を人間の手でするべきではない
プログラム工程で一番重要なのはデバッグと保守なので、速度のために読みやすさを犠牲にしてはいけない
だから「入れないとだめ」って事はない
295や296の意見は正しい
ただこれはあくまで一般論で、最適化が重要になってくる局面もある
そういうレアケースに備えて話をするとドット演算子は遅いので、
オブジェクトで受けてやった方が良い Hogeクラスのインスタンスを
Hogeインスタンスと呼ぶのは変ですか？ >>294
DOMでは「input.value」と何度も書くのであればキャッシュした方が早い。
JSの生オブジェクトでは自然とインラインキャッシュが働くので気にしなくていい。
また、ChromeではDOM実装もどんどんBlink-in-JS構想でJS化されていってるから、一部では自然と最適化が効く。 >>283
おまえみたいなROMってるだけのやつが、単発で書く内容のほうが
スレの邪魔だよ >>292
誰も拒絶してない件についてｗｗｗ
ここはjQueryのスレではない。ソレ以上でもソレ以下でもない。
jQueryで書く奴はお呼びではない。わかったか？ そのものの良し悪しは別にして批判も養護も多いと、単語自体が嫌われる
このスレにおいてjQueryは韓国と同じ IE8だとDOMの値を取得すると重いし変数に入れるべきだろ
そもそも言語仕様の質問にリーディングの内容は関係ない 関数の頭の方で参照を保存して狭い範囲で使うならアリかな >>301
お前が言いたいことはわかっている。
わかってないのはお前のほうだよ。
知ったことじゃない。質問者によって
それがいいことだと思えば、jQueryで書く。
質問者はjQueryを知らないが故にそういう
コードを書いているのかもしれないわけだから。
jQueryを使わないコードがほしいという人は、
そのように言うだろう。 >>303
> IE8だとDOMの値を取得すると重いし変数に入れるべきだろ
重いかどうかを判断するのはお前じゃない。
実行してみて数十ミリ秒以下のような体感できないほどの
短い時間の差しかでない処理なら、速くするためだけの
コードは必要ないだろうという言う俺の意見を参考に
質問者が決めればいいだけの話。 そもそもjquery否定厨が何でこのスレにいるんだよ
お前の仲間が立てた方のスレに籠っとけ
こっちはリベラルな方のスレだ
お前がいるとスレのクオリティが下がるんだよ > お前がいるとスレのクオリティが下がるんだよ
願ったり叶ったりだｗ >>298の質問に答えられる人はいないのでしょうか？ ものすごく変ではないが、多用される言い方ではない。でも意味は通じる。
もしくはHogeというクラスのインスタンスということを短く示したければhogeを使う。 >>298
W3C 仕様書とかだと「Hoge オブジェクト」は
「Hoge インターフェースを実装するオブジェクトのインスタンス」
の略である、みたいなことを書いてたりするから
「Hoge オブジェクト」が普通なのかな JSではクラスもオブジェクトじゃん
var Hoge = function(){};
Hogeオブジェクトというと、
コンストラクタとしての関数オブジェクトHogeのことなのか
Hogeのインスタンスなのかが分かりにくい
Hogeインスタンスというと一瞬で伝わる JSではクラスもFunctionのインスタンスじゃん var Hoge = new Function()
Hogeインスタンスというと、
コンストラクタとしての関数インスタンスHogeのことなのか
Hogeのインスタンスなのかが分かりにくい
fugaというと一瞬で伝わる >>317
var a = new Hoge();
var b = {};
a＝Hogeオブジェクト
b＝オブジェクトb プロトタイプベースはこの辺がややこしい
厳密にはクラスが無いし うん。だからクラスがないからインスタンスという言い方もしない。
だからHogeオブジェクトになる。
ただし、Hogeオブジェクトをクラスにように使うことを想定している場合、
つまりnewを使って生成する場合、Hogeクラス（のようにみなして）
Hogeクラスのインスタンスを生成するという言い方をする。 クラスが無いというと語弊がある。
実体と抽象という関係のオブジェクトとクラスではないということだろう。
もしくは上から下の継承ではなく、下から上の譲渡という考え。 JSではコンストラクタによって作られるオブジェクトをインスタンスって呼ぶんだよ インスタンスと呼ぶのはそのオブジェクトがnewで作られたものだけ 関数はFunctionクラスのインスタンスではないということ？ 関数は通常Functionのインスタンスだけど、絶対そうであるとは限らないよ。
[[Call]]を持ってるオブジェクトなだけだから。 function Hoge() {
var cr = [Array, RegExp, Date, Number, String, Error];
return Object.create(cr[Math.random()*cr.length|0].prototype);
}
var hoge = new Hoge;
このhogeもHogeオブジェクトと呼ぶの？ 普通に考えたら hoge instanceof Hoge が true になるかどうか、じゃないか？
言い換えれば、hoge のプロトタイプチェーンに Hoge.prototype が含まれているなら、hoge は Hoge のインスタンス。
なので>>326の hoge は Hoge のインスタンスとは言えないだろう。
仕様書でも instance という単語はそういう意味で使われている それはES5までのどうしようもない仕様だろ
ES6からは@@hasInstanceを使って何をインスタンスとするか自由に決められる。
「オブジェクト instanceof 関数」である必要もない
「プリミティブ instanceof オブジェクト」も許容されるよう改善された。 うお、マジだった。恥ずかしい
>>328はなかったことにしてくれ 'str' instanceof String // false
なのもどうかと思ってたが
null instanceof Null // true
とか
x instanceof StringOrNumber
みたいなのもできるようになるな "prototype"に縛られずプロトタイプベースを謳歌しましょうということだろう
const Base = {
[Symbol.hasInstance](o) { return Object.getPrototypeOf(o) === this },
new() { return Object.create(this) }
};
const Vehicle = { __proto__: Base,
new(kind) { return Object.assign(super.new(), {kind}) }
};
const Car = { __proto__: Vehicle,
new(name, type, maker) { return Object.assign(super.new('Car'), {name, type, maker}) }
};
let car = new Car('CX-5', 'minivan', 'mazda'); //Object {kind: "Car", name: "CX-5", type: "minivan", maker: "mazda", new: function…}
car instanceof Car //true webpackで出力されたjsファイルのデバッグに質問です
2つのjsファイルをwebpackにて一つのbundle.jsへとパックし、
devtoolオプションにてsource-mapを指定してソースマップを出力、
元のファイル構成が
app.js
foo.js
index.html
webpack後が
bundle.js
bundle.js.map
index.html
となり、ChromeでSettings -> General -> Enable JavaScript source mapsを有効化し、
index.htmlからbundle.jsをロードし、ソースマップから参照出来るパック前のapp.jsコード、foo.jsコードそれぞれにbreakpointを貼った所、
Chromeで再読み込みするとapp.js側のbreakpointが外れた状態でbreakpointが止まる為、再度の再読み込みをする前にbreakpointを貼り直す必要が出ています。
このような問題の解決方法はないでしょうか。
Chromeはバージョン 40.0.2214.115 m
webpackはgulp-webpack 1.2.0
です、ちなみにbrowserify 9.03でもbreakpointが上手く機能しませんでした。 自己解決しました
ソースマップではなくdevtoolでevalを指定したらbreakpointが上手く機能しました 経過報告です
その後ファイルを増やすとbreakpointを設定しているのに止まってくれない箇所が発生しました
ただ、あとは自力で解決してみようと思います、ありがとうございました 自動ログアウト処理のようなことを実装したいのですが、
同じドメインでのページ移動では何もしないのですが、
別ドメインへのページの移動、もしくはブラウザを閉じた時にイベントを発生させたいです。
unload系のイベントだと思いますが、そのような都合のいいことは出来ますか？ その仕組だとブラウザが不意に落ちた時などには対応しきれないだろう。
最も良い方法はServiceWorkerとセッションを結んでおき、切れたらログアウトさせること。 >>339
ありがとうございます。
ServiceWorkerは触ったことないので早速見てみます。 keypressでフォーム入力中にEnterを押したらフォームをクリアしたいのですが
this.value="";だとリセットされたあとに1回Enterが押されて改行された状態になってしまいます
form1.addEventListener("keypress", function(e){
if (e.keyCode==13){
this.value="";
}
},false);
どうしたら改行あかないようにできますか？ >>341
keypress が DOMが更新される前に生じるのが理由だろうから
DOMが更新された後のタイミングでリセットすればいいだろう
input イベントか keyup イベント（ input イベントの後） >>342
おー出来ました！ありがとうございます
こんなんでいいのかわかりませんが
form1.addEventListener("keypress", function(e){
if (e.keyCode==13){
this.addEventListener("keyup", function(){
this.value="";
}, false);
}
},false); ↑ちゃんとremoveしないとだめでした
変なコード晒してすみません 取りあえずの解決策です
最終的にWebStormだとちゃんとbreakpointが機能しました、参考にしたurlです
https://github.com/webpack/webpack/issues/238
Chromeのデバッグ機能だと、
devtoolがevalはwebpackのrequireを使用したソースだとbreakpointが機能せず
devtoolがsource-map(とinline-source-map)だと2ソース以上でbreakpointを貼った際に1ソースのbreakpointしか機能しない
となった為、Chromeのデバッグ機能はまだ発展途上だと言う事で諦め、WebStormを使う事に落ち着きました。 innerHTMLで削除した場合子要素や子要素に設定されているイベントリスナもちゃんと削除してくれるんでしょうか？ Blinkでは弱参照で実装されているのでしかるべき時に消えますが、しかるべきでない時でも消える仕様バグが有ります。 >>346
前に似た質問したときは消さない親要素にリスナ付けてtarget判定入れろろって言われたな jQuery ライブラリ 総合質問所 vol.4 から誘導されて来ました…
querySelectorAllで、sectionタグ下のimgタグは対象としたい。
→ document.querySelectorAll('section img')
しかし一方でsectionタグ下でもIDがexceptのdivに含まれるimgタグは除外したい
（section div#except img は対象外）。
このようなときにセレクタはどのように記述すればよいですか？
→ document.querySelectorAll('section img:not(section div#except img)')
では（案の定）ダメでした。
sectionの下のimgが必ず何らかのdivに囲まれてるとは限りません。
よろしくお願いします。 section>img, section div:not(#except) img
とか？ "abc".lastIndexOf("abc", 0);
と
"abc".lastIndexOf("abc", 2);
の結果が同じなんですけど、どうして前者は-1にならないんですか？
文字列の後方から検索して特定のインデックスより前に存在しないかどうやって確認したらいいですか？ "cba".indexOf("cba", 0);
"cba".indexOf("cba", 2);
じゃだめなのかね
"abc".split("").reverse().join("") >>349
jQuery ライブラリ 総合質問所 vol.4でも書きましたが、
jQueryでいいなら
jQueryならこれでいいだろう。
$('section img').not('section div#except img')
ただ、IDは一個しか無いのが普通だから、これでいいはずだし、
$('section img').not('#except img')
exceptは普通幾つもありそうだからこっちのほうが良さそうだが
$('section img').not('.except img') なーにわけわからないことやってるんだ。
document.querySelectorAll('section:not(#except) img')
だろ。 >>349
そのセレクタ指定は実は正しい。
取得できないのは:not()の中に子孫セレクタを使う方法にブラウザが対応していないから。
https://developer.mozilla.org/ja/docs/Web/CSS/:not
一方jQueryは:not()の中に子孫セレクタを使う方法に対応しているので、>>349のセレクタをそのまま書くだけでオッケー。
jQueryを使わずに一発で取得できる方法はないと思う。
(>>350だと<section><div id="except"><div><img>にもマッチするので不可)
ループを回して一つずつ確認するしかないだろう。 >>354のようなjQuery以外方面だけに知識が偏っていて間違った回答なら無いほうがマシです
質問しても変な方向に切り返してきていちいち訂正するのが面倒くさいです
無視したら誠実さを疑われるのでスルーするわけにもいかないですし
たくさんの間違った知識で答える回答よりも確かな知識でjQueryで回答してくれる方が何倍も価値があります jquery/sizzle
Implement CSS4 Selectors #237
https://github.com/jquery/sizzle/issues/237 属性セレクタにってことか？
前方一致、後方一致、部分一致とかはあるけど、正規表現は無理 document.querySelectorAll('section *:not(#except) img')
で対応できるんじゃないの？ またjQueryの存亡をかけた自演チックな質問か。
jQueryがなきゃできないと誘導するための質問をあちこちに拡散して投じるというミエミエの工作なw
そんなもん、今はcontains()がIEだけのものじゃないから、誰でも簡単にフィルターできるんだよ、馬鹿が。
jQueryは終わってんだよ。いつまでも使ってんじゃねえよ、公害。 jQueryはVirtual DOMと競合するけど、readonlyで使う分には便利よ、
ただ使わないコードで肥大化するのは頂けないが さんざんスレチだからライブラリスレ池言っといて
ライブラリスレ行っても同じ事やってる奴って一体なんなの？ｗ >>362
>>356で言ったように、それは<section><div id="except"><div><img>にもマッチするので不可
>>363
自演と言われるのは心外だな。
自演でもないしjQueryを不必要に勧めているわけではない。既にあるjQueryでの回答が若干ズレてたので指摘しただけだ。
あと恥ずかしながら、.contains()を使う方法は知らなかった。できたらそれを使った方法を教えてくれるとありがたいが、可能だろうか？ DOM操作系はReact的なもの。
細かなAPIはポリフィルじゃね。
あとは従来通りにやるならAngelerか、
Polymerとか使ってそもそも作り方を大幅に変えるって手もある。 <section><div id="except"><div><img>にはマッチする～とか言い出したらIDが複数ある場合とかいくらでも穴はあるでしょうに。 >>369
> DOM操作系はReact的なもの。
ReactはDOM操作というより、フレームワークだから
HTMLページの一部にちょっとだけ取り入れたいって時に
不便なんだよな。ページ全体の再設計が必要になる。
将来的にはWeb Componentsでコンポーネントを作り
そのコンポーネント同士を結びつける（コンポーネント内部じゃなくてね）のに
DOM APIを使う。そのよりベターなAPIとして簡単に記述できるjQueryを
使うって方向に戻るんじゃないか？って思ってる。 >>371
こんな感じ？
var itr = document.evaluate('//section//img[not(section//div[@id="except"]//img)]',document,null,XPathResult.ANY_TYPE,null);
var res=[];while(e=ret.iterateNext()){a.push(e);};
>>372
要するにAngeler.jsに入っているようなjQueryのミニマムサブセットがいいんじゃないの？
ちょっと取り入れたいだけなら別もそれも要らなくて、自前で関数数個書けばいいだけと思うけど。 > 自前で関数数個書けばいいだけと思うけど。
あれこれ、自前で関数作っていくと、
jQueryでいいんじゃね？ってことになるんだよ。 >>374
もちろんあんたがそうであることまで否定したりはしないよ。
でも今はちょっとだけ何かがほしい時大きなライブラリは不便っていう一般的な話をしているんだよ。 >>375
だから大きなフレームワークの導入じゃなくて、jQueryのような小さな
ライブラリを使おうって話をしているんだが。 jQuery厨はそれがあるのが当たり前と思ってるからまともに話しても無駄
だから隔離スレができたというのに 圧縮して100KBあるライブラリが小さいとよ
ふざけるのもいいかげんにしろ >>378
圧縮とミニファイの区別をつけてくれ。
古いブラウザにも対応した、jquery-1.11.2.min.js で94KB
最新だけで良ければ、jquery-2.1.3.min.js で83KB
これはミニファイで、圧縮した状態なら32.6KB
jquery-2.1.3.min.js 29KB だよ。
もちろんキャッシュが効くから、最初の一回目にしか転送は必要にならないし、
GoogleなどのCDNが使えるから、速くてサーバーの負担にもならない。 ライブラリを使って、最初の一回ですませるか、
本質的なコードの量を削減して転送量を減らすか。
ライブラリを使わずに、長いコードを書いて
転送量を増やすかの違い。 反jquery厨は
単に自分もjqueryじゃない回答も書けばいいだけだろ
質問者にしてみればいろんなケースの回答があった方が便利なのは当たり前
はい論破 ライブラリ許容のこちらは隔離スレだから相手にするだけ無駄 意味不明w
便利なスレの方が隔離スレかよ
不便なスレ方が隔離されてるだろ常識で考えて ライブラリを他人に押し付けるのは隔離スレにおいても便利なことではない。
誰の得にもならない愚行だよ。
隔離スレの存在意義は、質問者がライブラリを使用した回答を期待している場合と、
多少のライブラリの良し悪しについての雑談のため。
布教は誇示は対象外だから他所でやってくれ。 押しつけって何のこと言ってるんだ？？
どうやったら押しつけられるんだよ
超能力者かよ
ライブラリの話題が出ようが、使うも使わないも自由
当たり前のことだろ
書くも書かかないも自由だし使うも使わないも自由
簡単なことです 変化の激しい分野で標準でもない一つのライブラリにフォーカス当て続けるのも危険だよ
現にVirtualDOMと競合してるわ、よりコンパクトなlodashの利用に移ってるわで縮小傾向にある
過去の資産が多いか利用者が多いのならそれが選択の一つにはなると思うがjQueryは
資産も多いし利用者も多いし実際便利だから使っても良いなと思いました バーチャルドムってDOM操作を最小限にする技術だろ？
jqueryとはまた別じゃないの 勉強が足りんな。
というか想像力がない。
jQuery前提の設計思考ばかりしてるとこうなるんだな。
こわっ メモリ上のDOM構造(以下仮想DOM)に、新しい仮想DOMが来たら差分だけを実際のDOM(以下本DOM)としてブラウザ側へ書き出すって仕組みだから、
ブラウザ側で本DOMを操作するとメモリ上の仮想DOMとずれてしまい上手く差分書き出しが出来なくなるのよ。
jQueryは本DOMを操作するライブラリだから、操作自体がVirtualDOMと競合してしまい併用が出来なくなる。
あと、VirtualDOMにしたからと言って仮想DOM構築にはコストかかるよ、
まあブラウザ側の本DOM構築コストよりは遥かに安いから気にしなくても良くなるけど。
一応ReactにはshouldComponentUpdateっていう仮想DOMの再構築をするかの判定メソッドを使ってさらにチューニング出来る。 でも、たとえばあるコンテンツを含む領域のサイズとかって
実際に表示してみないと計測できなくない？
ブラウザごとに変わる可能性あるから。
バーチャルドムはそのへんどうしてるんだろ >>390
それどころか通常のDOM APIも併用できないよ。
React使うなら、React経由でしかDOMをい
じれないと思った方がいい。 おそらくこれはひどい例だと思うんだけどさ、
React使ったらこんなにコード長くなるわけ？
http://blog.zigomir.com/react.js/jquery/2015/01/11/jquery-versus-react-thinking.html
ライブラリと違ってフレームワークはこれが怖いんだよな。
完全にフレームワークにのっとった開発にしないといけないから混ぜるのが難しくなる。
React本当に普及するの？すぐに廃れるんじゃ？っていう感じ。
それよりかWeb Componentsの方が期待できるんだよな。DOM標準だし。
単に要素を拡張して新しい要素を追加するだけだから、
新しいタグが増えたぐらいの感覚でいい。
そこから発生したイベントは、前と同じくDOM APIやjQuery APIでつなげていく。
シンプル・イズ・ベストだと思うな。 <div id="hoge">hogehogehogehoge</div>
var width = $('#hoge').width();
をバーチャルドムでできるの？ 個人的にはHandlebars等でレンダリング部分をtemplateファイルに切り出せてたのが好みだった、これでもそこそこ速いし
Reactは構造上一つのクラスでView・Controllerを持つから、クラスの肥大化を防ぐのがユーザの手に委ねられたのが開発時に気を付けたい所
>>394
componentDid(Update | Mound)でjQueryで取得しても良いし、
Reactの作りに従って
render: function() {
var width = this.hogeTxt.length;
return ( <div id="hoge">{this.hogeTxt}</div> );
}
としても良い、最適化するならjQueryは毎回のselectorが冗長かつ重いからReact風にした方が良いかも Reactって130KBもあるのか。(´・ω・｀)
jQueryなら83KBでいいのに アプリの規模やパフォーマンスで決めてけば良いんじゃないかな、
小規模でReactはFramework部分の記述率が多い印象、
逆に規模大きくなるとjQueryだけだとカバーしきれないから今までもBackbone(& Marionette)やKnockoutを使うようになってたし それはウェブアプリを作る場合だよね。
ウェブサイトやウェブページに使うぐらいなら
jQueryで十分だと思う。 サイトでFramework系はオーバーワークだね、そこならjQueryでも十分だし、Vueも良いと思う ＞それは<section><div id="except"><div><img>にもマッチするので不可
っていってるけど>>356=>>349なの？
>>349の条件はそれが不可なんて言ってないと思うんだけど 途中でおくってもうた
・sectionタグの中のimgが対象である
・div id="except"中のimgは除外する
・全てのimgがdivに囲まれているわけではない（他の要素に囲まれてるとは言っていない）
つまり＞<section><div id="except"><div><img>
これは条件に合致してると思うのだけど virtualdomとjqueryどっちが速いの？ Virtual DOMってどんだけ早いの？測ってみた
http://dsuket.hatenablog.com/entry/2014/12/02/125230
> ん？ちょとまて！ React も Virtual DOM使ってるんじゃなかったのかよ。
> Backboneに負けるのかよ！！
こんな程度らしい。
そのBackboneとjQuery。比較するまでもないよね？ 同じVirtual DOM実装のMercuryやElmが圧倒的なんですがそれは なんか聞いたことのないライブラリが沢山あるんだな・・・・
どう考えてもライブラリの話題禁止とか言ってる場合じゃない
時代に取り残されるわ ライブラリというかフレームワークの部類だし、
全くライブラリらしい物から、ES7やHTML.nextで標準に入りそうな機能の物まで挙がってるし話は複雑だよ。
今のいろんな機能はライブラリを元に書かれることも多いしね。
そうなればライブラリというよりただ先行実装版やポリフィルを使ってますということになる。
ただし時が流れ標準のほうが熟成してくるとライブラリが取り残されることになる。
今その状況なのがjQuery。 去年XPの延長サポートが終わりIE8が消えていく時代だしね
2017年にはVistaのサポートが終わってIE9も切れる jQueryどころかDOM APIすら使わない時代なんだよな。
このスレの意味が無いｗ フレームワークを使うと、作り方が全く変わってくるからね。
ウェブサイトの作り方じゃない。
ウェブアプリを作るならそれでもいいけど、
いわゆるホームページ＋α的なものだとやり過ぎ。
だから、
ウェブアプリ＝フレームワークを使う（jQueryもDOM APIも使わない）
ウェブサイト＝jQueryを使う。
の二極化していくんじゃないかな？
フレームワーク or jQuery
どちらにしろDOM APIはもう使わないよ。 virtualdomって要するに
HTMLの差分を計算して勝手に適用してくれるのか >>411
ゲームに例えればわかりやすいよ。
ゲームは一秒間に30フレームだとか
60フレームだとか毎回画面を書き換えている。
毎回書き換えて処理速度大丈夫なのか？って思うかもしれないが、
それを減らすために、書き換える必要があるところだけ書き換えてる。
そのゲームで使われていた技術を持ち込んだのがVirtualDOM クローラーに引っかかることが重要ではない
ウェブアプリならその方法でいいんだけどな。
例えばWikipediaのようなサイトにVirtualDOMは
似合わないかな。そもそもそこまでJavaScript必要じゃないし。
たいていの情報系サイトはそうじゃないかな？ 今時のクローラはJS実行後の画面を取得できるって
このスレで見たよ クローラーってのはGoogleだけじゃないかなねぇ https://github.com/fiduswriter/diffDOM
diffDOMの説明を読むと、DOMとDOMのdiffを取るもののようですが
こういうのもvirtualDOMっていうんでしょうか・・？ >>418
ワロタｗ
「健康が悪い人の9割は一週間以内にパンを食べていた」
「犯罪者の9割は一週間以内にパンを食べていた」
みたいなネタをリアルでやってるｗ 結果は置いといて、これはちゃんと対比実験になってるから科学として正当だよ。 その前に何目的でこんな書き込みをしたのか
ネトウヨみたいに洗脳されてそう 正規表現について質問です
マッチ対象のグループ化数が不明の時に、正規表現によってグループ一覧を取得する方法はないでしょうか
例えば、
matches = "aaaBBBaaaBBB".match(/(([a-z]+) | ([A-Z]+))/)
としたら、
["aaa", "BBB", "aaa", "BBB"]
という結果を取り出したいです 時計に合わせて10分間隔で通知を出すタイマーを作りたいのですが設計をどうすればいいでしょうか
例えば11時3分にタイマーをスタートしたら11:10 11:20 と通知を出したいのです。
(window.alert は使いません)
今考えてるのは↓これなんですがアドバイスお願いします。
開始ボタン
↓
直近の10分までsetTimeout
↓
10分間隔でsetInterval >>423
/([a-z]+|[A-Z]+)/g
>>424
ブラウザのタイマーを信用するならそれでいい。 >>423
var matches = "aaaBBBaaaBBB".split(/([a-z]+)/);
→[ '', 'aaa', 'BBB', 'aaa', 'BBB' ]
空文字列が出ちゃうな
まぁfilterに掛けるなりすればいいし、そんな感じでやればいいと思う >>423
gフラグ
match(/regex/g)
>>424
動けばなんでもいいんじゃね
まぁちょっとずつずれるし
10分おきに時間計算しなおしてsetTimeoutしなおしたほうがいいんじゃね 自己解決しました
力技ですが、下記のようにorマッチ部分を分解して、再帰的にいずれかのマッチ結果を取り出すにして対応出来ました
// CoffeeScript
str = 'aaaBBBaaaBBB'
a = []
while true
matched = str.match(/^([a-z]+)(.*)/)
if (matched)
a.push(matched[0])
str = matched[1]
continue
matched = str.match(/^([A-Z]+)(.*)/)
if (match)
a.push(matched[0])
str = matched[1]
continue
break # マッチ完了
console.log(a) # ['aaa', 'BBB', 'aaa', 'BBB'] リロードしてませんでした・・・
>>425-427
ありがとうございます！ >>425>>427
ありがとうこざいます！
全部setTimeoutの方が楽そうなのでとりあえずそっちでやってみます 動けばいいといっても限度がある
流石に>>428みたいなのは解決とは呼べない >>431
おっしゃる通りです、最終的に/gを付けて解決する事が出来ました すいません。10分後までの秒数を調べる方法教えてください > < >>433
600秒-《現在時刻の分の1の位》*60-《現在時刻の秒》
ちっとは頭使え。 >>434-435
数学は苦手で条件分岐6個書くとこだった
ありがとう!! 小学低学年でも分かる算数だろ……
プログラミングってのは算数からは逃げられないぜ。 >>436
条件分岐6個に興味があるんだけど、
どんなアルゴリズムを思い付いたんだ？ さすがに条件分岐6個はあれだけど、[10, 20, 30, 40, 50, 60] のようなテーブルを用意して
ってのは有りだと思う
正時から10分ごとっていう仕様が変わらなければ一つの計算で出してもいいけど >>438
if (分 == 0) {}
if (分 == 10) {}
if (分 == 20) {}
if (分 == 30) {}
if (分 == 40) {}
if (分 == 50) {}
だろ？ >>437
プログラミングには、算数は小学生レベルでいいけど、語学力と歴史学は修士レベルが必要だよ。 ロジカルシンキングが得意であったほうがいい
算数と言うより数学の方だな
英語は公式のドキュメント読む時は必須 いつも思うが、数学というか、
ロジカルシンキングがあればいいだろ。 >>445
それはそうなんだが絵的な美的感覚とも違うんだよな
論理性の美しさって言うか問題解決の簡潔さや無駄の無さ その点JSはそーゆーの考えなくていいようにできてるよね
メモリ管理とか圧縮とか 客観的に批評してもらいながら10年書けば誰でも一人前に良質なコードを書けるようになる。新聞記者や作家と育て方は同じ。
数学なんか要らない、特にこういったC系言語には。 プログラミングに必要なのは数学でもなくプログラミングセンスだよ
数学は必要な人と必要ない人がいるから一概に必要とも言えない
プログラミングセンスはﾊｶｰ的な考えに似ている相当マニアックなもの 変数xの0と1を入れ替える程度ならx ^= 1;を使うというような？ >>450
いや違うかな
プログラミングセンスは兎に角目的のものを瞬時に実装できる力に似ているな
気付いたら実装しちゃってるみたいな
だから手段を選ばないからソースが糞ソースになってたりする
そういう人は企業の歯車として働くには向いてないだろうね
だいたい嫌われる webの仕事は塗り絵だからね
プログラマーじゃなくてSEと呼ばれる所以 あれ、仕事が減ったPCの業務系ソフトやさらに上級なゲームソフト出身の人が
Web方面に攻め入って来てからずいぶん経ったような気がするけど
まだそんなレベルのものでも通用させられるんだｗ >>450
バカは自分のスレに帰ってやってね（笑） >>451
> だから手段を選ばないからソースが糞ソースになってたりする
じゃあだめじゃんｗ
いきあたりばったりにコード書いてるからそうなるんだよ。
優れた人っていうのは頭の中で動くコードはできあがってるんだよ。
検証のための捨てるコードを書くことはあるけど。
頭の中で動くコードが出来上がった状態で
それをどのように表現すればシンプルになるかを考えながら書く。
お前がやってるのは、頭の中で書いた動くコードをそのまま書いているだけ。
もしくは書きながら動くコードに仕上げてるかのどちらかだ >>455
重要なのはそこじゃないし、自分の事を言ってるわけじゃないぞ…
とにかく難しいと思ってるような事でも実装が速いって事だ
まぁ常に糞コードだったらいつか破綻するってのはあるかもね
逆に変にこだわってるのか知らんが、実装遅いやつはずっと遅いままで速くなる事はないな
そういう奴の割合が多いとデスマーチ化しやすいと思われる(完全に主観だが) 書き方には学習も現れると思うよ。
MVCフレームワークも知ってるかどうかで沿った書き方を出来るか変わってくるし、
鯖との通信はJSONで行い、蔵との密結合を緩和するって方向になってる
ロジック部分も、今は関数型言語を学ぶのがトレンドだけど、
結局のところはコードの再利用性を上げてシンプルに、
冗長性を排除して書くって事を目的にしてるわけだし、
その一つがC#のLINQの様々な言語への移植だったりする。
何が言いたいかというと、毎回arrayを作り直すmapやfilterはクソ >>456
だからクソコードの時点でダメだって言ってんだよ。
クソコードになる時点でセンスが無いってこと >>456
たぶん、あんたの基準が低すぎるんじゃないだろうか？
まずほぼ素人の人。コードを書けないから
クソコードを増やすこともないｗ
で、次は頑張って動くコードを書ける人。だけど書くコードはクソコード。
俺にとってはこれはまだ一人前に到達してないレベルなんだが、
書けない人よりかは、速いだろうね。
おそらく、あんたはこれぐらいの人しか知らない。
間をいくつか飛ばして。
そして一人前のプログラマは動くコードをかけるのは当たり前の話で
それを正しい設計でパフォーマンスやメンテナンス性まで考えてコードを書く。
このレベルになるとコードを書くことよりも書かないで同じことが実現できないか？って考える。
自分で実装する力にこだわっているような感じをするから、
動くコードを書くのが精一杯の人しか知らないんだろうね。 >>457
> 何が言いたいかというと、毎回arrayを作り直すmapやfilterはクソ
なんで？
実行速度が遅くなるからっていうだけの
どうでもいい理由ですか？ >>460
コンパイラに任せるはずの最適化を手動で行う方法を長々と本に書いてるような言語で何を言う 「コンパイラに任せるはずの最適化を手動で行う方法」って何のこと？ >>459
長過ぎるな…
> 逆に変にこだわってるのか知らんが、実装遅いやつはずっと遅いままで速くなる事はないな
↑これに近いよ、長文書く人って メソッドのオーバーヘッド解決、プロパティのキャッシュ、インクリメントの前置、
リテラルの推奨、use strictの使用(これは今までの動的型付けが悪いだけな気がする)
思いつくのはこれくらい
あと、mapやfilterの多様はGC無駄に走らせるからチューンは必要よ、モバイルだと特に >>464
えとさぁ、それだけしか言うことが出来ないなら
レスしなくていいよ。
>>465
あー、やっぱりだｗ
技術的に未熟だから、メリットとデメリットを
比較して考えることができてない。
視野が狭いよ。一方的な点からしか見えていない。 > メソッドのオーバーヘッド解決、プロパティのキャッシュ、インクリメントの前置、
を長々と本に書いてるような言語
という話だったね？
その本の名前は？ 英単語の単数形から複数形を作成するみたいな処理がありますが
特殊な変化をする単語の場合どうするんですか？
datum→dataみたいなやつです Railsの話で申し訳ないけど、Railsのpluralizeって複数形変換メソッドは、
特殊な単語は辞書(ActiveSupport::Inflector::Infelctions)から、
それ以外は機械的な変換って振り分けてる そういう辞書を持ってるんですね
ありがとうございます ごく少数だが、綴りが同じで意味が違っていて複数形が異なる単語もあったような
そういうのはエスパーしなければならなくなる index → indexes, indicies
indexes がデータベースインデックスの複数形
indicies が添字の複数形
のように使い分けられてる気がするが
公に認められたものかどうかはちょっと怪しいかも createdOn: { type: Date, default: Date.now }
というコードがありました
defaultに関数をセットして、インスタンス生成時に呼び出すという処理です
このようなことが出来ると言うことは、
Date.nowの内部ではthisを使ってDateにアクセスしていないということなのでしょう
しかし内部でthisを使っていないということが何故分かるのでしょうか？ thisを使わない方が普通なのですね
ありがとうございました 確認をしたいのですけど
var para = { "parame" : paraValue };
このように書かれている宣言で
para ってどのように使えばいいのですか？
調べ方がよくわからなくて、、、 new SharedWorkerっての最近知ったんだけどコレ凄くない？
2chのスレ複数ブラウザで開いててもこれあれば専ブラみたいな事全部出来ちゃいそうなんだけど 負荷を下げられるって点ではいいけど、
できることは今までと変わらんよ。 >>490
でもドメイン違っても一つのjsで管理できるって凄くない？
共有してる全ページ閉じたらクリアされるけど、それまで変数とか残ってるから
タブで開きまくってもshareworkerで統括してコントロール出来るってマジすげぇ
拡張機能でもないのに >>491
オリジンは超えられない
それとあえて挙げるならServiceWorkerの方でしょ
こっちはSharedWorkerの機能に加え、管理しているURL化のアクセスを全て横取りして任意のデータに差し替えられる
これでオフライン時のキャッシュ周りだとか、いろんなことが可能になる
更にページが全て閉じられても残って、プッシュ通知もできるような方向で策定が進められている へーhtml5ってこんな事もできるのか
canvasとaudioだけじゃないんだな html5はマジ色々と多すぎて
底なし沼のようにも思える 真面目な話WhatWGの方のLivingStandardの方のHTMLはなんて呼べばいいんだろうな。
「HTML」じゃあわかりにくいし、Web3.0にするか？ 「真面目な話WhatWGの方のLivingStandardの方のHTML」って呼べばいいのではないか？ そもそもHTML4.1の後、XHTMLではなくやっぱりHTMLを発展させていこうとやりだしたのはW3CではなくWhatWGなのよ。
そしてWhatWGはHTMLをLSにした。つまり永遠に完成しない状態なわけ。
HTML5ってのは単にそこからW3Cが適当に切り出してバージョン付けしただけ。
HTML5は「バージョン付けした」ということのみが意味があって中身の仕様はベンダーが見ることもないし価値はない。 ブラウザによって全部の仕様が実装されている保証がないから
結局ブラウザのバージョンを見て処理を切り替えるコードは捨てられない・・・ バージョンで分岐するのはかなり前のやり方じゃないか？
いまはAPIの存在で分岐するのが主流だと思うが 「HTML5」ってのは結局『HTML5』のサブセットなんだよね IEのCSS3やhtml5への対応の遅さはなんなの？
なんであそこだけ異常に遅いの そんなに遅くはないよ。
ただ常時機能がアップデートされないからリリースから年月が立つごとに遅れていくだけ。
Win10ではIEとは別にSpartanが搭載されるみたいだから、IEの方が企業向けの役割を担って、
Spartanの方はモダンブラウザになってくれることを期待してる。 最近Safariの対応が遅くなってきているのが気になるな。 いあんひくそん君みたいな凡人がエラそうに上に立ってボンクラ仕様を作っても俺ならてきとうにあしらって絶対に実装せんわwww tweetdeckの検索ボタンにマウスを載せるとツールチップが出るようになりましたが
このツールチップがテキストフォームに重なって邪魔です
アホなのでしょうか？ いつの間にかchromeで禁則が効くようになったようです
contenteditableを使っているので変なところで改行して欲しくないんですが
前はこんな挙動じゃなかったですよね？ そろそろフルCanvasで完璧な互換表示を実現するものが必要そうだな。 >>518-519
すぐ上の方で話してたんですか、恥ずかしい
ありがとうございます そう言えばGoogleがCompositorWorkerを発表してたな。
これはライブラリとかDOMの扱いにだいぶ影響をあたえるだろうな。 ウェブワーカーってワーカー内だと
proxyだろうがなんだろーがｌローカルストレージ使えないのが嫌だ しかしJavascriptってのは変化が激しいね
複数の派閥がある紛争地帯で右往左往してるような感覚だよ 荒らしはしつこいから
最終的には荒らしスレの方が伸びるんだな テキトーに同じドメインにあるhtml開いてそれを連携？させたいとき
localstorage利用して全部のhtmlでwindow.addEventListener('storage',っての使えばlocalstorageの変更をキャッチできるんで連携出来ると思ったんですけど
もっと他の方法とかあるんですかね？
yahooとかgoogleから飛んできた時windowに名前つけることできないんでこれしか思いつかなかったんですが 次スレ
+ JavaScript の質問用スレッド vol.124 + [転載禁止]©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1427008867/ >>529
少し上で答えが出てるだろいいかげんにしろ >>529
new BroadcastChannel strict modeって var a = b = c = 0; みたいな書き方できなくなってるんですね
var a = 0, b = 0, c = 0; とするしかないんでしょうか？ var a = b = c = 0;
は
var a
a = b = c = 0;
と同じだぞ
そんな書き方ありえないだろ
var a, b, c;
a = b = c = 0;
か
var [a, b, c] = [0, 0, 0]
としろ >>535
これはC言語の時代からの書き方なんですが？ CはC、JavaScriptはJavaScriptでしょ。 死に馬に鞭打っても意味ないしな。
捨てるのを怖がってたら新しい物は作れない。 dartに乗っていった人への責任として
せめて何が駄目だったか言うべきだろ IE11からVBSがサポートされなくなる大事件に比べたらDartの件なんて目に見えないほどミクロなエピソードだ。 >>541
捨ててないよ
DartのSIMDAPIなんかはJSに引き継がれるし、
型付き周りの概念もSoundScriptで引き継荒れる。
ようは新しい言語としてじゃなくてJSでuse～とすることでの新しいモードとして生まれ変わるだけ。 >>546
生まれ変わるって言ってるじゃんｗ
死なないと生まれ変われないよ？ 生まれ変わるのはDartの世界。
それとJSに大きな影響を与えた話は別。 >>548
「新しい自分に生まれ変わる！」って言う人は、一度死んでるの？ 新しい"自分"なら自分に生まれ変わってるだろう。
JavaScriptに生まれ変わるなら、
Dartは死んだってことだろうｗ 死ぬと捨てるは違うだろ
JSに引き継げるのなら死んでも捨ててはない ウェブワーカーについて質問です
test.html
var worker = new SharedWorker('sex.js');
var port = worker.port;
port.postMessage("送信データ");
port.onmessage =function(event){
console.log(event.data);
}
sex.js
onconnect = function(event){
var port = event.ports[0];
port.onmessage = function(event){
port.postMessage(event.data)
}
}
って書いてあるhtmlをF5で更新すると
接続できる→F5→接続できない→F5→接続できる→以下ループ
ってなります
new SharedWorker('sex.js');の接続するタイミングをページ読み込みから1000ms後ぐらいにすると発生しないんですが
何か良い解決方法ないんでしょうか？ >>554
new SharedWorker('sex.js');で接続してないのにworker側から先に送るなんてこと出来るんですか？ 質問です。
２つのセレクトボックスを用意し、片方（Ａ）で選択した要素をもう片方（Ｂ）に移動させたいです。
もちろん、その逆（Ｂ→Ａ）も行えるように、ボタンは２つ用意しました。
option要素の移動自体は、いろいろ調べたところ実装できたのですが、
Ａのセレクトボックスにoptgroup要素を使用してグループ化しています。
■ Ａのリスト
hogehoge
・hoge
・fuga
foobar
・foo
・bar
このとき、Ａからhogeを選択してＢに移動させたあと、
再度ＢからhogeをＡに移動させる時、元々の場所（hogehogeのoptgroup要素内）に
移動させる方法はないでしょうか。
ブラウザはIE10以降/Firefox/Chromeで実行したいです。
よろしくお願いします。 ワーカーは切断からワーカーが消えるまでに時間がかかる
更新だとhtml読み込んだ後に終了するぐらいの遅さ
対処法はワカラン ServiceWorkerにすればページにpushできるじゃん >>556
移動元要素は削除せず、不可視にしてはどうでしょう？ 接続できてるか確認して接続できてなかったら
var worker = new SharedWorker('sex.js');
var port = worker.port;
ってまたやればいいだけやん >>559
返答有難うございます。
選択した要素をdisplay:none;で非表示にしたところ、
FirefoxとChromeでは正しく動作しましたが、IE11では非表示になりませんでした。
IEでも動作する方法はないのでしょうか・・・ そこまで細かい動作に拘ろうとするのをやめるのが一番だぞ？
やめるんだったら簡単な方法が沢山出てくる。 超質問です
var str ='PON-CON-PON-CON'
って文字列があってそれのPONとONだけに1回ずつヒットさせたいです
/PON|ON/ってやるとPONがヒットしただけで終わっちゃうし
/PON|ON/gってなると今度はPON,ON,PON,ONって2回ずつヒットしちゃいます
どうすればいいんでしょうか >>563
/(PON|ON).*(PON|ON)/ >>564
うっわ頭良い
それならON PONもPON ONも大丈夫ですね！
感動しました！ ってそれじゃPON PONってPONが2回引っ掛かっちゃうからダメでした
説明不足でした
PONは1回まで、ONも1回までです
本当に申し訳ないです >>556
idとかdata-numberとか適当なところにA01～、B01～みたいな番号を振っておいて
戻すときにループで自身の番号と対象の番号を比較し適切な位置に挿入させるか
入れ替えたときにoptionsの参照を入れた配列をidなどを見てソート、その順番を反映させるかだと思う >>563
/(PON|ON)[\s\S]*(?!\1)(PON|ON)/ >>556
はい。作ったよ。
http://jsfiddle.net/L2p6zkux/
下手な小細工しないで、動かしたい通りに普通に作ればいいのに・・・。 >>566
よく考えてみて。
「一回ずつヒットさせる」ということが目的ではないでしょ。
「両方１つだけ含まれているか否か」が分かればいいんでしょ？
自分で問題を難しくしちゃいけないよ。 質問するときは大元の目的を書いてほしいね
質問者も回答者の配慮をすべき >>569
おかしいよ。ワザと手抜きかね？
そういう誤動作(元の位置に戻せない)をどう解決したらよいか分からないと質問しているのではないのかね？ >>572
ならあんたが実装しろってｗ
元々の場所（hogehogeのoptgroup要素内）って書いてあるとおりだろ？
もしかして順番も維持しろって話か？
それは元のレスに書いてないし、元の質問者がレスしたら考えるよ。
お前は偉そうに言う立場にはない。 >>556の定義による。
> 元々の場所（hogehogeのoptgroup要素内）
って書いてあるのだから、hogehogeのoptgroup要素内であれば
それは元々の場所である。 >>569
jQueryを使ってたり、option[value] が未定義なのはどうなんだ >>576
> option[value] が未定義なのはどうなんだ
問題無いですよね。HTMLの仕様読めば？ >>564>>568>>570
ありがとうございます
普通に考えて最初に言われてた(PON|ON)ってのをreplace(REGEXP,function(str){
if()
})
ってやればよかっただけでした
一度冷静になって１から考え直すべきでしたすみません >>563,578
存在確認だけのためになぜ replace を使うのだろう
RegExp#test で十分なのでは？
http://jsfiddle.net/5yvyunwd/1/ multiple="true" はHTML5では正しいが違和感あり。
確かにHTML5でmultiple属性の値は自由だから正しいが、
それはそもそも横暴なルール違反が多すぎて収集つかないからHTML5で正しいことにしてあげただけ。
正しいことにしてあげたHTML5でも、さすがに例示ではHTML4.01に則った書き方をしているのが笑うところ。
そもそも。
<select multiple>
このmultipleは、値だって知らないだろ。これは属性値。つまり、省略されているのは名、属性名。
属性名がmultipleの属性は、択一式(選択肢は1つだけだが)の属性値しか許容されなかった。
その属性値がmultiple。つまり、名も値も同じ。
択一式かつアルファベットだけなので、属性名も等号も引用符も省略できる条件を満たす。
name="value" → value ということ。
multiple="multiple" → multiple ということ。
(XML(XHTML)では省略できなかった。) HTML5の例示が<select multiple>なのには歴史的な理由がある。
15年前にXHTMLへの移行が進まなかった理由の一つに、属性名省略を止めるとIEがスルーしたバグがあった。
HTML5の中の人は当時二十歳前後だったが、当然それを経験していて知っている。
だから、<select multiple="multiple"> とは書けない体質になっているのかもしれないと思われる。
だから、無難な <select multiple> を例示に採用したのだろうと思われる。 >>580
> multiple="true" はHTML5では正しいが違和感あり。
そこは単に間違えただけだよ。
揚げ足取るしか能がないのか？ プログラミングって完璧主義者多いからな
良い事だけど >>580
> <select multiple>
> このmultipleは、値だって知らないだろ。
いや、普通に属性名だから（笑） なんか、オレオレ解釈を語ってる人がいるけど
XHTMLだけが異端で失敗しただけで、HTMLはXHTMLじゃないから。
XML Validにする意味はなかったという結論によって
元のHTMLに戻っただけ。そして正しいHTMLで書いているだけの話。 >>581
> 属性名省略を止めるとIEがスルーしたバグがあった。
聞いたこと無いね。おそらく>>581の間違い。 そもそも multiple="true" は HTML5 では間違いなんですが…
multiple か multiple="" か multiple="multiple" しか正しいのはない >>587
だから書き間違いだって言ったろ？
そして、揚げ足取るしか能がないのか？とも言ったろ？
もともと>>556の話だろうが？
なんでJavaScriptのスレで>>556の話と関係ない
HTMLの些細なミスを指摘してるのさ。
JavaScriptの話をしろよ。 >>589
了解した。
このスレにはコードを書かないで文句ばかり言う奴が多くてな。 いやぁ、レスが全然ないなぁと思ってね。
昨日からちょくちょく見て待ってんだけどｗ すいません。バタバタしててスレを覗きに来れませんでした。
>>569
ありがとうございます！
ただ、>>573でご指摘あるとおり、「元々の場所（並び順も同じ）に戻したい」が理想でした。
最初の質問に記入し忘れていて申し訳ありませんでした。
>>567
ありがとうございます。
戻す際にループを行ってソートする方法も考えてはいたのですが、
実環境で使用するコンボボックスが200件近く表示される可能性もあり、
もしかしたら少し時間がかかってしまうのではないか、と思った次第です。 >>587
嘘は良くないよ。
https://html.spec.whatwg.org/multipage/forms.html#the-multiple-attribute
>>The multiple attribute is a boolean attribute
だからmultiple="true"は正しい。
multiple="false"は間違い。 皆様、ありがとうございました。
頂いた回答と、optgroup内のソート処理を組み合わせることで、
意図した動作をIE/Firefox/Chromeのそれぞれで確認することが出来ました。
http://jsfiddle.net/fw1e85vy/1/
HTML規約的に妙な部分ことになっているかもしれないですが、
data-sort -> id にしても問題なさそうですかね・・・ そこまでやるなら要素の外にごちゃごちゃくっつけるんじゃなくて
丸っとカスタムエレメントにすべきだよ。 >>594
煽った上に嘘を言うとはとことん使えない野郎だな
https://html.spec.whatwg.org/multipage/infrastructure.html#boolean-attribute
> The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
英語が読めないならせめてvalidatorでも使って調べてから書け どこが嘘かね？
俺はHTML5がわざわざ正しいことにしてくれたから正しいと言っている。 HTML5 とは >>594 みたいなバカに合わせて、酷かった現状に溜息まじりでアリバイを作ってくれたクソな仕様だよ。 自分で自分をバカと言ったw
バカは >>597 だな。 短く言い直してやるよ。
multiple="true" は現行HTMLで正しいことにしてくれたから正しい。
しかし、過去においてその間違いを犯していた大量のアホがいたから、ふつうは格好悪くて書けない。
(だからHTML5仕様の例示にも属性名省略で書いてある。)
(そして、そもそも、仕様を読めなかった大多数の低脳は省略が名であることを知らないから、過去において大量に間違えていた。) >>599は別人だから責めんといてくれ
まず、multiple="true"は仕様に沿っておらず、validatorではエラーになる。
これは分かってるよな？
>>597にも書いたし、validatorでも確認できるから、先入観を持たずに確認してくれ。
次に、>>598は、仕様に沿ってなくても、自分の思い通りになれば「正しいことにしてくれる」って思ってるのか？
それなら、<select multiple="on">も<select multiple="yes">も>>598にとっては「正しい」のか？ HTML4では値がmultiple一択だった。
HTML5では何でもいい。
しかし、JSのDOMでは、最初から真偽値だった。
当時のその現状を参考にしてDOM仕様がまとめられた。
HTMLの属性値で文字列としてしか取得できないのだが、見た目にtrueと書いてあると、JSを書く者には親近感が湧くのかもしれない。とにかくこの過去の仕様に照らしての間違いを過去においていたるところで見た。
なんと、HTML5で、何でも良いことにしてくれたw
HTML5での、属性名省略そのものの崩壊とtfootの位置、この2つが代表例だと思っているが、さすがにたまげたわ、馬鹿に合わせてここまで敷居を下げないと実情に合わないんだなって。笑うしかない。
ところで、お前は馬鹿だから現行HTMLでは何でもいいってどういうことか分かってないんだろ、どうせ。
multiple=""
multiple="false"
multiple="true"
multiple="multiple"
multiple
これらがぜんぶ同じ。笑うしかないわなw
お前みたいな馬鹿のせいでこうなったんだよ。 >>593
やっときたかｗ
> ただ、>>573でご指摘あるとおり、「元々の場所（並び順も同じ）に戻したい」が理想でした。
まあそうだろうと思って、あれからすぐに作っていたのだが
レスがあるまで待ってた。
http://jsfiddle.net/L2p6zkux/3/ >>595
補足するならば、ソート使ってないのでデータが増えても問題ないのと
HTML Validにしている。
>>596
> そこまでやるなら要素の外にごちゃごちゃくっつけるんじゃなくて
> 丸っとカスタムエレメントにすべきだよ。
>>595のコードの場合、data-sort=を減らすためだけに
カスタムエレメントにしろって話？ それはやり過ぎだろう。
それ以前に俺のコードの場合は、data-sortという特殊な属性も必要なく
HTMLの標準のごく普通のselectだけを使ってるから
新たに要素を作るカスタムエレメントのする意味ないけどね。
で、一つ引っかかるんだけど、「そこまでやる」というけど、
たった14行だよ？ （無理やり書けば4行ぐらいに収めることは可能）
たった14行で作れる小さな機能ためにカスタムエレメント導入するほうが、
そこまでやることじゃないって思うけど。
外部に分離する前に、まずんなの大したこと無い。簡単に短いコードで
実現できる。と思いつけるようにならないと。 >>601
> (だからHTML5仕様の例示にも属性名省略で書いてある。)
multipleは値じゃなくて属性だよ。
http://www.w3.org/TR/REC-html32#select
> multiple
> The presence of this attribute signifies that the
> users can make multiple selections. By default only one selection is allowed.
HTML3やHTML4の仕様を見てみれば、昔から属性だってのはわかると思うんだが。
XHTMLだけが異端で、気の迷いでHTMLをXMLの仕様に歪めたために
multiple="multiple"などという変な表記が生まれた。
XHMTLはXMLだから厳格なんだ。故に正しいんだって思っているのかもしれないけど、
HTMLは（XHTMLを除いて）XMLではなく、例えば一部の終了タグとかも省略できるのが
正しい仕様。multipleはHTMLの仕様では昔から値無しの属性。
XHTMLの方が例外なんでもうなかったことにした方がいい。 >>603
> ところで、お前は馬鹿だから現行HTMLでは何でもいいってどういうことか分かってないんだろ、どうせ。
> multiple=""
> multiple="false"
> multiple="true"
> multiple="multiple"
> multiple
> これらがぜんぶ同じ。笑うしかないわなw
> お前みたいな馬鹿のせいでこうなったんだよ。
そんなに不思議なことじゃない。というかおそらくHTML3とかの時代から
挙動は変わってない。
なぜならmultipleは属性であって、その属性があれば有効になるから
値が何であろうと、それを参照していない。
これは知らないものは無視するというHTMLの動きの原則にあっているし
昔からの挙動だと思う。 >>597
別に煽ってるつもりはないし、相変わらず何も分かってないのはそっちでしょ。
>>The values "true" and "false" are not allowed on boolean attributes.
ってのはあくまでNoteであって、"true"/"false"を使ってはいけないという仕様があるのではなく、
"true"/"false"にboolean attributesとしての特別の意味はないから気をつけてね程度のもの。
実際は属性値として設定しておくことは可能でその場合はtrueとみなされる。
嘘は良くないよ。 >>611
煽ってるつもりがないなら悪かった
だが誤解しているのはそちらなので、譲りたくない気持ちは分かるがもう一度考えてくれ
> "true"/"false"を使ってはいけないという仕様があるのではなく、
断言する。ある。
NOTEのすぐ上にこう書いてある
https://html.spec.whatwg.org/multipage/infrastructure.html#boolean-attribute
> If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
『属性が存在するなら、その値は「空の文字列」か「大文字小文字を区別せず属性名に一致する文字列」（前後に空白文字は認めない）である必要がある』
と、明記してある。
つまり、<select multiple>も<select multiple="">も<select multiple="multiple">も<select multiple="MuLtIpLe">もいい。
しかし、<select multiple="true">や<select multiple="hoge">や<select multiple="ok">はダメだ。
ちなみに「NOTE」は日本語の「ノート」という意味もあるが、「重要/注目/注記」という意味もある。
multiple="true"は君に限らず多くの人が間違えることなので、わざわざ注記してくれてるんだよ。 >>612
横から失礼、それはあんたの勘違い。よく読み直そう。 教える価値のない相手なのでレスはやめる
スレ汚しすまなかった いやちょっと待て、あんた盛大に勘違いしといて「教える価値(ry」ってドンだけ…. > 横から失礼、それはあんたの勘違い。よく読み直そう。
なんで勘違いって言ってるくせに
その勘違いの場所を具体的に指摘できないの？ｗ
もうそれで勝負付いているんだけど、
気づいているかな？ 急に逃げててワロタｗｗ
どこが勘違いしてるか指摘してやって恥かかせてやろうぜ じゃあ今から、どの部分が勘違いか指摘していやる。
仕様書読むからちょっと待ってろ >>594を読め。
https://html.spec.whatwg.org/multipage/forms.html#the-multiple-attribute
>>The multiple attribute is a boolean attribute
この部分の行間を読めばわかるでしょ？
boolean attributeって書いているってことは
論理的に考えるとtrueでもいいはずだ boolean attributeって書いてあるだけで、trueが許されるなんて書いてないんですがｗｗｗ
あ、それが行間を読むってことなんですねｗ
書いてないけど、お前ん中ではそうなんだろうな理論ですねｗ >>620
横だけど、
"true"が許されないってどういう意味で言ってる？
getAttributeでは当然"true"が帰ってくる
値は何でもいいので属性があれば有効というのが正式な動作だよ >>622
> "true"が許されないってどういう意味で言ってる？
HTMLの正しい仕様の話に決まってるだろｗ
> getAttributeでは当然"true"が帰ってくる
JavaScriptは無関係ないので他所でやれｗ >>607
おおお・・・シンプルかつ読みやすい方法、ありがとうございます。
これは元リスト側の選択したoptionを、別のタグ(template)に置き換えている、
という認識でしょうか。
自分の拙い頭脳では、どうやって元の場所と認識しているのか、まだピンときていませんが・・・
>>595でまとめた方法より見やすいので、こちらを採用させて頂きたいと思います。
ありがとうございました。 >>607
・・・あれ、jQuery 2.1.3を使用したら動かなくなりました(´・ω・｀)
Ａ→Ｂは動作しますが、Ｂ→Ａが反応しないようです。 >625
> これは元リスト側の選択したoptionを、別のタグ(template)に置き換えている、
> という認識でしょうか。
あってます。
>>626
> ・・・あれ、jQuery 2.1.3を使用したら動かなくなりました(´・ω・｀)
あれ、ほんとだ。
edgeは正式版の最新版だと思ってたら3.0.0.preだったよ。
一応修正した。
http://jsfiddle.net/L2p6zkux/9/
ぐぐるとreplaceWithするとdataが消えるとかあるけど
仕様なのかバグなのかよくわからない。
少なくとも3.0.0 preでは挙動が変わってるようだ。 やっていることは
位置を覚えておく必要があるから、optionを別のものに
置き換えてその場所をポインタにする。
置き換えるのはいいとしてなにに？ template
（HTMLの使用上許されている物はこれしか無いから）
置き換えるのはreplaceWithでできるけど、
元に戻すための情報が必要だね。data()で保存。
保存する値は要素ごとに違うから、replaceWithは
関数を引数にして新しい要素を作ってdata()で保存させる。
戻すときはその情報を使って戻す。
まあこんな感じ。
考え方のコツは、要素（複数のoption）を一つ一つ
処理していくんじゃなくて、「複数のoption」という一つの塊をみて
どばっと置換。どばっと戻す。って考えることかな。
塊で処理したいけど、一つ一つの要素で微妙に違いがある場合は
このようにreplaceWithの引数に関数を指定すれば良い。
不具合のせいでreplaceWithがbefore & detachになってしまったけど。 .replaceWith()は内部的に.remove()を使っている。
.remove()は仕様通りDataやイベントリスナを削除するので、.replaceWith()でもDataが消えちゃうみたいだね。 あぁ、なるほど、だからdata()を使わずに
要素のプロパティに直接保存した時は問題なかったのか。
replaceWithした時に残る情報、残らない情報とがあって
統一されてないから3.0でバグとして修正されたのかな。
覚えておこう。 ごめん、勘違いだったorz
ソースを見たところ、別に内部的に.remove()が使われているわけではなく、
.replaceWith()自体でDataの削除をしていた。
削除の挙動的には.remove()と同等みたいだけど。
あと、ドキュメントに該当の記述があったので参考までに。
http://api.jquery.com/replacewith/
Additional Notes:
The .replaceWith() method removes all data and event handlers associated with the removed nodes. <template>にそういう使い方があったのか
勉強になった >>624
正しいではなく上品な使い方の間違いでは？
HTMLは道具なんだからそれを意図的に使えれば正しいといえる。
HTML5はいろいろな場合における細かい挙動まで整備されたんだから、
HTML4以前のように上品に使わないと動作が保証されないということはない。
今回"true"を何が何でも使っちゃいけないという合理的な理由は見つからないし、
仕様に則っても間違いではない。
自分に無駄にルールを作って、道具に使われちゃいけないと思うよ。
それを意味もなく人に強制するのはもっとよくない。
早く誤ちを認めたらどう？ >>633
"正しい" であってるよ。
HTMLには仕様書があって
その仕様書に書かれていることだから。 >>627-628
ありがとうございます！
わかりやすい解説も助かります！
それでは名無しに戻ります。
色々とありがとうございました。 >>634論外
仕様書が読めるようになってからまた来てね >>638
それがjQueryのもっとも重要な所で、これをわかっているかどうかで
jQueryに対しての評価が違う。
時々document.querySelectorAllがあるからjQueryは
もう要らないっていう人がいるけどこれはわかってない人。
セレクタからDOM要素を取得することはできるけど、
その取得した要素に対して簡単に操作する方法をDOMは提供していない。
$('.class').remove(); 例えばこんなの
jQueryは.classに当てはまる要素全てを塊として、.remove()メソッドを実行できるが
DOMでやるならば、ループして一個づつ処理しないといけない。
DOM標準にjQueryのような仕様が入る気配はないし、
jQueryに変わるライブラリなら出来る可能性があるが、
.remove()、.add()、.attr()、.data()、.on()、・・・
必要なのを全部書いていたら、それjQueryでよくね？ってなっちゃう。
VirtualDOMを使うライブラリのように、jQueryどころか、
document.querySelectorAllを含むDOM操作がまったく必要ない
ライブラリを使うならば話は別だが、DOM APIを使うよりもjQueryの方が
良いという事実は今後も揺らぐことはないだろう。 自分はループして一個ずつ処理するのでいいと思うけどな。
document.queryAll('.class').forEach(el => el.remove());程度の記述量で済むわけだし、
逆にただそれを省くために色々な不要な処理も入った半ばブラックボックス化してるライブラリを勉強して使った方がいいとは思えない。
jQueryの良いところはDefferdとかAnimationとかAjaxとかひと通り必要なものが揃ってたことであって、
それらが潰れた今となっては、もう必ずしも必要な存在ではないというか、使わない方が良い存在になってきているのは事実。
>>639が言ってるのは結局はまだほんの少し使える部分もあるよってことでしかない。
DOM操作だけのサブセットを使うというんならまだアリだと思う。けしてベストではないけど。 > document.queryAll('.class').forEach(el => el.remove());程度の記述量で済むわけだし、
動かないだろｗ
わかってない証拠、 DOM操作だけのサブセット ＝ jQueryの中から必要な物を厳選 ＝ jQueryの機能の殆ど ＝ ならQueryでいいじゃんｗ
jQueryはよく絞り込まれてるよ。どのメッソドもほしいもの。 >>641
どこがどう分かってないのか説明よろ。
>>642
それちきんとコード比でも見て言ってるの？ document.queryAll('.class').forEach(el => el.remove());
を正しく書くなら
Array.prototype.forEach.call(document.querySelectorAll('.class'), el => el.parentNode.removeChild(el));
だな
議論に参加しようと思ったら突っ込まれるところを作ってはいけない >>643
> どこがどう分かってないのか説明よろ。
せめて動くコードを書けって言ってる。
想像の中で動くであろうコードを書いて、ほら短いといっても、
それはお前の頭んなかの想像の話だろｗってことだ。 > el => el.parentNode.removeChild(el)
この書き方は現状Firefoxでしか動かないから、これが現実的なところだろうね。
Array.prototype.forEach.call(document.querySelectorAll('.class'), function(el) { el.parentNode.removeChild(el) });
この後、メソッドチェーンしたいんだけど？と言われたら（笑） >>644
話の流れ的に紛らわしかったかもしれないけど、よく見て。
NodeListを返すquerySelectorAllじゃなくて、Elementsを返すqueryAllを使った。
ElementsはArrayを継承してるからforEachが直に使えるでしょ？ >>646
メソッドチェーンしたければmapを使えばいいよ。 >>647
え？ remove()は？
もしかして、お前の想像の世界ではあるって
ことになっんの？
想像の世界の技術で反論（笑）
そんな感じで、さまざまなメソッドを
オレオレライブラリで作るんだろう？ｗ
だったらjQueryでいいじゃんってなるって
最初から言ってる。 >>648
だから動くコードを書けって言ってる。
結局書くと、ばれるのが怖いんだよ。
だから、擬似コード書いて
勝った気になってる。 $('.class').remove();
Array.prototype.forEach.call(document.querySelectorAll('.class'), el => el.parentNode.removeChild(el));
可読性が大きく違いすぎるｗ >>649
Elementはremove()を持ってるよ。 >>647
適当なこと言ってすまなかった
DOMのLS見てきたけど、今までとかなり変わってて驚いた
勉強し直してくる >>652
> オブジェクトは 'remove' プロパティまたはメソッドをサポートしていません。
説明してくれるかい？ 各ブラウザ間の互換性を取るための
ライブラリが必要だな！
jQuery（ボソッ） >>650
queryAllはまだどのブラウザにも実装されていないけど、モダンブラウザかIE11以降でエミュ可能。
removeはChromeとFirefoxで入ってるのを確認した。
ES6の構文は必要ならトランスパイラを使えばいい。
自分が問題視しているのは、学習コストとそれが古いものになることでの無駄。
もう標準が用意されるってわかった時点で、その機能はポリフィルに切り替えて行くべきだと思ってる。 いや、だからjQueryでいいでしょ？
結局お前が示したコードよりも、
さらにjQueryの方が短くて、
どのブラウザでも動くんだし。 どんなに頑張っても可読性はjQuery ＞ DOMだからねぇ。
DOMの進化が10年遅すぎた。
その10年の間にjQueryは誰もが持ってる必須の知識となってしまったし、
DOMを使った結果、jQueryより劣ることしかできないんじゃ
なんのためにDOM使うのか理由がない。
せめてこれぐらいは、DOMでも25文字ぐらいでできてもらわないとね。
$('.class').remove(); >>655
それは当然大事。
ただ、jQueryが生まれた当初と比べて、互換性がまだまだ取れないという点は未だ残っているが、
そもそも標準機能が不足してるという点は改善されてきてる。
各機能の有り様について標準が提供されているときは、それに従うべきだと思う。
そうするとライブラリというよりポリフィル的なものになる。
そういう意味ではjQueryはとりあえず使っとけと言うものでは無くなった。
特にjQueryは標準にかなり影響を与えていて、標準がjQueryを改善した、
似てるけれど少し違うものを用意しているという問題もある。
つまりjQueryのAPIは腐ってきてるということ。
ただしDOMAPIもそれほど豊富なわけではないのでまだまだDOM操作のフレームワークやライブラリは必要。
とはいえ比較的基礎的なAPIを提供するjQueryをわざわざ使う価値と、合うケースは減ってきてると思う。 $ → $ = document.queryAll.bind(document)
on → ES7を先取りしてObserableに切り替える
でいいんじゃない Observableな感じを思い浮かべるとメソッドチェーン指向ってのは正しい気がする
そういうスタイルで書くならやっぱり同期メソッドもチェーンで書きたいよね
でもObservableとjQueryを組み合わせるのは難しそう
ここを標準に期待するのは無理だから、おそらくまたどこかのいいライブラリがデファクトスタンダードになって
それを標準が追いかけるようになるんだろうね
いつまでたってもライブラリからは逃れられずに時代は繰り返される あーでもExtensible Webに則るとそういう世界であってるか もしElementsにElementのメソッドつけようと思ったらこんな感じになる？
Elements.prototype.__proto__ = new Proxy(Array.prototype, {
get(aryProto, key, elems) { return (key in aryProto) ? aryProto[key] : (...args) => elems.map(el => el[key](...args)) }
}); あまり知られてないがスムーススクロールも標準でできるようになったんだよな。
http://dev.w3.org/csswg/cssom-view/#enumdef-scrollbehavior
Chでようやく認識するようになった段階で動くのはFxくらいだが。 >>663を試そうと思ったけど、なぜか手元のFF37だと上手くいかない…。
原因を調べるとどうやらprototypeとproxyを組み合わせると上手く動かない。
var o = Object.create(new Proxy({ hoge: 1 }, {
get(){ return 2; }
}));
console.log(o.hoge); // 2
console.log(o.fuga); // なぜかundefined???
これはバグ？ >>663
標準化される前に、標準のprototypeを拡張するのはよくないよ。
あとから標準化された時に名前がかぶっていたら互換性の問題が発生する。
Prototype.jsがそれで痛い目にあってる。
http://qiita.com/jwhaco/items/b5b474883d3020f6dc5f
標準のprototypeを拡張するぐらいなら、
独自のオブジェクトでラップした方がいいと思う。
それがjQueryでやってることでも有る。 良いも悪いもElementsを拡張しようと思えばそうするしか無いでしょ。
まあサブクラスを作るのが一番筋がいいと思うけどな。 > まあサブクラスを作るのが一番筋がいいと思うけどな。
それを実現しようと思ったら、document.getElementsByNameの
戻り値をサブクラスにするってことになるんだけど、
getElementsByNameはdocumentだけにあるものじゃない。
すべての要素に、getElementsByNameがあるわけだから
Elementsを拡張するのであれば、Elementを拡張しなければならなくなる。
もちろんgetElementsByNameだけじゃないね。getElementsByTagNameとかもそう
サブクラスを作るって言えば簡単に思えるかもしれないが、
実際には標準のDOMのElementのメソッドを書き換えまくることをしないといけない。
それで安定して動くのか？って考えると難しい話なんだよ。
だから現実には標準のprototypeを書き変えることをしない。
ブラウザという実行環境がユーザーの手にあって開発者の自由にできないものは、
開発者が自由に実行環境を決めることが可能なデスクトップアプリや
サーバーサイドアプリと同じやり方でやったらだめなんだよ。 callで置換されたthisを一時的に変更するにはどうすればいいでしょうか
例えば、
function A(x) {
this.piyo = new B(x);
this.C = x;
};
A.prototype.do = function() {
this.piyo.do.call(this); //(1)
};
function B(x) {
this.B = x;
};
B.prototype.do = function() {
console.log(this.B); // undefined
console.log(this.C); // 10
};
var hoge = new A("10");
hoge.do();
というコードがあったとします。
この時、(1)でthisをhogeとして呼び出したのでthis.Bがundefinedになりますが、
this.Bの時だけthisをpiyoとして呼び出したいのです。
(1)をthis.piyo.do();として、console.log(this.C);をconsole.log(B.C);とすると、クラス変数ではないのでundefinedとなります。 >>671
頭が硬いね。
別にそうしなくてもSub.from(hoge)としてラップすればいいんだよ。
jQueryみたいな１から作るのと違うのはElementsのメソッドを活かしながら必要な機能のみを安全に拡張できるところ。 必要な機能？
onは必要だしattrやpropやdataも必要
addもremoveも、insertもbeforeもafterもreplaceWithもだし、
eachやgrepも必要だろう。
もちろんメソッドチェーンも必要だし、
逆に必要じゃない機能ってなんだ？
結局jQueryの再実装をしているだけなんだが。 >>673
標準のDOM要素に標準化されてないメソッドを追加すると
あとで同じメソッドが標準のDOM要素に追加された時困るから
やるべきじゃないよ。
継承しても一緒。継承元に有る標準のメソッドを
オーバーライドしてしまうことになる。 >>675
オーバーライドしてしまうのなら問題ないよ。
>>663が問題なのはオーバーライドしないことで、同名の標準ができた時に壊れることだから。
それに標準のものには追加してないでしょ。
別個体のサブクラスに明示的にラップするという操作を伴うものだから、他への影響はないよ。
誰かがしちゃいけませんって言ったことを理由も考えずに信じ続けるのは良くない。 >>676
> オーバーライドしてしまうのなら問題ないよ。
おいおいｗ 問題を認識してないのかよ。
DOM非標準のものならば、自分しか使わないから問題ないが
DOM標準の場合は、オーバーライドしてしまったら
他のライブラリが改変された関数を使ってしまうかもしれないだろ。
だからjQueryなどはDOMとは全く別のオブジェクトで
ラッピングするという手法をとっているのだが。
話をまとめるか？
1. 標準のElementsにはattr()というメソッドはありませんでした。
2. だから標準のElementsを拡張してattr()を追加しました。
3. このattr()は当然オレオレ実装です。
4. あるときElementsに標準仕様でattr()が追加されました。
5. オレオレattr()と標準attr()で仕様が違いました。
6. 他のライブラリは標準attr()だと思ってるのにオレオレattr()が呼び出されて困りました。
こういう話なんだが。これprototype.jsで実際に起きた話な。
で、お前はサブクラスなら問題無いと言っているわけだが、
サブクラスでも問題有るんだよ。なぜならElementsを返すのは誰？って話。
例えばdocument.getElementsByTagName()だけじゃなくて
全ての要素.getElementsByTagName() やその他多くの全て。
すべての要素のgetElementsByTagName()だけでなく、
createElement('div') で作られた要素のgetElementsByTagName()も
サブクラスを返すように改変しないといけない。
そうすると、DOMのElementのprototypeを改編する話だってのはわかるな？ >>677
＞＞サブクラスを返すように改変しないといけない
だからそうじゃないって言ってるだろ。
>>673を見たのか？
逐一Elementsをサブクラスにラップして使うやり方について言ってるの。
だからElementsを利用してる他のものに影響を与えることはない。
まず人の話をよく聞いてから批判しような。 >>678
あんたたサブクラスとラップという用語を
ちゃんとわかってないって言うことがよくわかったよｗ
ラップするならばサブクラスにする必要はないし普通はしない。
jQueryはDOM要素郡（そこでいうElements）をラップしたもの。 > jQueryはDOM要素郡（そこでいうElements）をラップしたもの。
正確に言うならば、jQueryの$()などで返すjQueryオブジェクトは
DOM要素郡（そこでいうElements）をラップしたもの。 そもそもElementsを何のサブクラスにするって言ってるんだろう？
ちゃんとわかってるなら○クラスのサブクラスにするって
具体的に言えるはずだ。 ぜひ○の中身を答えて欲しい。
先回りしていっておくと、世の中には○クラスを引数にする
関数が存在するが、○クラスを互換性がない形に改変すると
その関数の引数に入れられなくなる。（本当にサブクラスなら入れられる）
だが改変しないとメソッドチェーンが使えなくなる。 >>679
分かってないのはあんた。
Elementsに元々あるメソッドを使うためにもそうするのが一番自然、
言い訳見苦しいよ。負けを認めなさい。 >>683
> Elementsに元々あるメソッドを使うためにもそうするのが一番自然、
Elementsに元々あるメソッドって何のことだよｗ
なんのサブクラスにしたいわけ？
答えられてないよね？
> 言い訳見苦しいよ。負けを認めなさい。
ワロタｗ
勝ったつもりでいるんだｗ 元々のメソッドを使う方が絶対にいいはずだって
固定観念を持っているんだろうね。
jQueryのeachではなく、
Elements.forEach（Array.forEach）を使ったほうが
いいはずだって思ってるのだろうけど、
forEachではメソッドチェーンが出来無くなってしまうわけで
元々のメソッドを使うとjQueryからすると劣化してしまう。
劣化しないように作るとなると元々のメソッドはほぼ全て使えなくなってしまう。
ここまで考えずに、元々のメソッドを使う方が絶対にいいはずだって
固定観念を持っているんだろうね。 👀
Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f) >>684
queryAllとかあるでしょ。
それらを一々再実装するの？
元からあるのを使った方がいいに決まってる。
>>685
mapを使えばmapはthisのコンストラクタを見て、
きちんとサブクラスのインスタンスに結果を追加していってくれる。
他のArrayのメソッドでも同じ。
そういう意味でもサブクラスにするのは正しい。 >>687
> それらを一々再実装するの？
君はライブラリを使うってことを覚えようよｗ
jQueryが実現しているから使うだけ。
それにqueryAllが返すElementsの話だろ？
Elementsをサブクラスにしろっていう話なんだから。
queryAllがあるのはElementであってElementsじゃない。
mapがあるのはArrayであってElementにはない。
Elementsにも無い。（queryAllが返す要素の配列は、本当の配列じゃないから）
それらを一々サブクラスに再実装するの？ｗ >>688
ライブラリを使えばいいというのはそのとおりだよ。ライブラリはダメとか言ってないだろう。
そういう話ではなく、どういう手法がいいかということで、
jQueryのように丸っと世界を構築するよりも、>>663のようにするよりも、サブクラスを用意するのが一番折り合いがとれてるという話をしてるんだ。
なにを勘違いして一人で苛立ってるんだ？
そしてElements.prototype.__proto__ == Array.prototypeだし、
queryAllが返すのだって列記としたArray exotic objectだから。
ES6からはビルトインコンストラクタはnewTargetを見て適切なプロトタイプを持ったインスタンスを作ってくれるでしょ？
継承するというのはそういうことだよ。
もうホントにね、人の話は聞かない、仕様も読まない知らない、考える力もない、反省もしない。
君と話してると呆れて疲れるね。 >>689
焦点がずれてるな。サブクラスにする危険性をわかってない。
まずElementsがArrayだとしてjQueryに比べれば大幅にメソッドが足りない。
onとかattrとかきりがないから全部言わないよ？
そこでElementsのサブクラスを作ってメソッド追加しろって言いたいんだろ？
それが危険だという話。
ElementsのサブクラスはArrayでは無くなってしまうから。
なぜなら、
Elementsのサブクラスにhogeというメソッドを作った。
将来のArrayが拡張してhogeというメソッドを作った。
ElementsのサブクラスのhogeとArrayのhogeは別物
つまり、ElementsのサブクラスのはArrayではなくなる。
型あり言語なら型とシグネチャで正しくディスパッチしてくれるが
JavaScriptのような言語では無理
そして問題はまだある。
Elementsのサブクラスを作ったからといって、
queryAllがElementsのサブクラスを返してくれるわけじゃない。
DOMのあらゆるAPIがElementsの代わりに、
Elementsのサブクラスを返すようにモンキーパッチしまくらないといけない。
何かを忘れていると、よくわからないエラーが発生することになる。
危険性があるうえに、既存のメソッドを間違いなく修正するという大変な作業が必要。
サブクラスの仕様を考えただけで全てがうまくいくって考えてるようだが経験と想像力が足りないよ。 あと、想像の世界の話をしてないで
実際の動くコード書きなさい。
jsfiddleって知ってるかい？ またjQuery厨が暴れて生温かい視線を浴びてるのか。 >>690
論点がずれてるのはあんた。
オーバーライドは問題にならないという話はもう上でしただろ。
想像力がないのか？
もし万が一新しいメソッドがArrayやElementsに追加され、
それがサブクラスと被ったら、ライブラリをバージョンアップすればいいだけ。
サブクラスは元クラスのプロトタイプ拡張と違って、明示的に使ってない周りへ影響を与えないし、
環境が新しくなっても、古いバージョンのライブラリに依存してる古いコードが壊れることもない。
それと、queryAllがサブクラスを返したりすることはやらないと言ってるでしょ。
一度ラップしてやれば、例えばmapなんかはArrayではなくきちんとサブクラスのインスタンスを返してくれるように
ES6では設計されているので、何度もラップしたりすることなくチェーンできる。 細かくconsole.log()したいから無意味にチェーンしないさせない。
似て非なる物だが最近は右辺をカンマで長々しく区切るコードを少なからず目にする。
他人にはテストし難くてやや理解困難だから引き継ぐ時には丸ごと捨てられてやり直されるのだろうな。 >>661が言ってるようにチェーンという選択肢は間違いではないと思う
但し非同期も同期もあらゆる処理をチェーンで書くメソッドが不足してる
JSの表現力からしたら可能だけど、世界が追いついてない
Observableとそれと共に現れるであろうフレームワークにはかなり期待してる >>693
> オーバーライドは問題にならないという話はもう上でしただろ。
それに対するレスを>>690で書いただろ
ホントお前人の話し聞かないなｗ 将来のES6ではできるようになるんだ！と
言った所で今は使えないわけで、
将来は！将来は！って繰り返し言ってもなぁ
あと10年後にまたおいで。 >>694
> 細かくconsole.log()したいから無意味にチェーンしないさせない。
もしかしてチェーンしたらconsole.logできないと思ってる？
そのための有名なメソッドがtapなんだけど。
残念ながらjQueryでは標準対応してないから、
たった4行だけ書かないといけないけど
$.fn.tap = function (callback) {
callback.apply(this);
return this;
};
これであっという間に、console.logができる。
function log() {
console.log(this);
}
$('#id').children().tap(log).children() >>697
ElementsがElementのメソットを使えるようにするにはどうするのがいいかの話をしているんだろ。
ElementsはES6前提だし、今更何言ってるの？
もう知らないのなら無理に話に入ってこなくていいから。
勉強して出なおしてね。 ElementsがElementのメソットを使えるようにするにはどうするのがいいか？
全部再実装するんだろ？
で、あとからその実装したメソッドと同じ名前で
新たに標準追加されて大混乱ｗ
既に過去に起きた事件だ Elementsに追加するわけじゃないなら混乱は起こらないでしょ。
そのElementsのサブクラスを使ってる部分だけで閉じてるんだから。
新規で使う上で気になるのならライブラリを更新すればいいだけだし、
古い物に依存してる場合も問題は起きない。 え？ 自分が言ったこと忘れたのか？
全てのDOM APIが、Elementsの代わりに
Elementsのサブクラスを返すようにするって
言ったばかりじゃんかｗ 誰がそんなこと言ってるんだろう？
>>678が見えないのかな？ まあ実際問題サブクラス経由のqueryAllがきちんとサブクラスのインスタンスを返してくれるようになるかは分からないけどな
Arrayとかネイティブの奴はES6できちんと継承が考慮がされた設計にされたけど
DOMの継承を利用した奴はこれから実装される段階だしおそらくissueになると思う
まあ例えElementsのままでもサブクラス側では機能を実装する必要はなくて
queryAll{return new SubClass(super.queryAll())}みたいなのでいいだろうし
全てのメソッドをオーバーライドするのが面倒臭ければそれこそProxyをプロトタイプに挟めばいいか
なんにせよこれは重大な問題提起だと思うね jQueryの質問です。
jQueryオブジェクトをコンソールで見ると配列形式で表示されますが、これはどのようにしているのでしょうか？
http://i.imgur.com/lX94ne4.png
> $("body")
> [ <body></body>] ←これのことです
配列という訳でもないみたいですし…なにか条件があるのでしょうか？ >>706
すみません説明不足でした。
配列というのはArrayのインスタンスという意味です。
Array.isArray($("body")) が false であることから分かるように、Arrayのインスタンスではありません。
Arrayのインスタンスでもないのに、なぜ配列形式で表示されるのか？という疑問です。
そしてその方法を使って、自分で定義したArrayのインスタンスでないオブジェクトにも同様のことをしたいと思っています。 >>707
「配列のようなオブジェクト」で検索してみたら、こんな感じだった
{
"0": "0番目の内容",
"1": "1番目の内容",
"length": 2
} >>704
結局それ、jQueryの実装そのものじゃないかｗ >>710
結論はそれかもしれないけど、各ブラウザのデバッグ機能は
jQueryに対して特別な対応をしていたはず。
NightlyのFirefoxではDOM要素にどんなjQueryイベントが紐付いているか見ることができる！
http://blog.mah-lab.com/2014/08/30/nightly-firefox-dev-tool/
http://www.buildinsider.net/web/chromedevtools/01
> ConsoleパネルからはDOM操作でページを直接編集できる。documentオブジェクトなどの
> 基本的なJavaScript機能を操作できるだけでなく、jQuery構文も利用できるようになっている。 >>712
ありがとうございます！
ブラウザ自体がjQueryに対して特別な配慮をしてるんですね。
spliceの件もその配慮の一環なんですかね。
ただGoogleChromeの方は、ただ単にページにjQueryが使われているから使えるだけなのでは…？ >>713
about:blankでも表示される。
そしてページにjQueryが使われているのであれば
$.fn.jqueryでjQueryのバージョンが表示されるが
それがない。 >>714
あれ、そうなんですか？
すくなくとも手元のGC41のabout:blankではjQuery方式の書き方はできませんでした。
なにかフラグとか必要なのでしょうか？
$("body") === document.body; // true
$("body").text("hoge"); // Uncaught TypeError: string is not a function こいつさっきから何を言ってるんだ？？？
ただコンソールにおいて$がdocument.querySelectorAll相当になってるだけじゃん
それ以上でも以下でもない $ はこれ
https://developer.chrome.com/devtools/docs/commandline-api#selector
Build Insiderのような非公式サイトを参考にするから間違いが起きる
あと、こんな荒らしが立てたスレで質問するよりライブラリ総合質問スレで質問した方が有用だと思うけどね
自分もほとんどここ見てないし >>718
やはりそうですよね。
記憶違いかと焦りました。
ありがとうございます！ だからすぐに訂正してあるじゃん？
715 自分：Name_Not_Found[sage] 投稿日：2015/04/13(月) 23:04:47.09 ID:???
jQueryじゃなくて、$が使えるだけかも＾＾ ここは回答者が認められるスレではない
質問者を助けるスレだ
思い上がらないように >>720
かも、とか可能性レベルの話で回答する前にちゃんと確認しろよ
Aかもしれないし、Bかもしれないなんて回答にならん もうそういうのいいから
このスレには質問と回答しかいらない いや宗教論争は必要。
ツーチャンネルの技術板の価値は宗教論争だけ。
他の場所で宗教論争なんて本質に突っ込む議論を始めたら単なるキチガイだから。 >>723
回答になってないから指摘されてるんだろ 指摘される事が嫌ならキータに日報だか月報だかにしか見えない剽窃猿真似技術ブログでも書いて裸の王様やっとけよ雑魚が。 はい現行スレ
+ JavaScript の質問用スレッド vol.124 + [転載禁止]©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1429873274/l50 var small_option=0;
if(document.chbox3 && document.chbox3.elements[0]){
small_option = document.chbox3.elements[0].checked ? 1 : 0;
}
って書いてますが、この場合、存在チェックって、
document.chbox3 && document.chbox3.elements[0]でよろしいでしょうか？
何かいい手がありますでしょうか？ >>735
document.chbox3 && document.chbox3.elements && document.chbox3.elements[0] >>735
jQuery使っていいのなら
var small_option = $('[name="chbox3"]').prop('checked') ? 1 : 0;
（「? 1 : 0 」はいらん気もするが）
要素がなければundefinedになってくれる。
0個以上の要素として扱うと、こういう風にシンプルに書くことが出来る。 >>736-737
ありがとうございます。
small_optionはajaxで、php側に投げるデータで、php側でpostで受け取り、
1か0でないなら「small_optionが不正」ってエラーメッセージを出す仕様なので、
undefinedだとまずいです。 じゃあ仕方ないね。? 1 : 0は必要ということで。 と思ったけど、これでいいのか
var small_option = $('[name="chbox3"]').prop('checked') || 0;
もしくはこれ。（checkboxのvalueの1が設定されている前提）
var small_option = $('[name="chbox3"]').val() || 0; 話がそれた。
存在チェックの話だったね。
jQueryを使えば存在チェックそのものが不要になる。ということで。 jQueryみたいなライブラリ勧める上で決してお手軽ではないことは注意として挙げるべき
一部分だけjQueryのセレクタ使ってるようなコードに違和感がないならいいが ていうか、戻り値の型が場合によって違うのに平気とか、もうね、jQuery厨のショボさハンパないな。 > 戻り値の型が場合によって違うの
え？ どこが？？？ prop('checked')はcheckしてないならundefを返す仕様のようですが、
jQueryって存在しないchbox3に対して
$('[name="chbox3"]').～ってやっていいのでしょうか？ >>745
問題ないように作られている。
NULLオブジェクトパターンとでも言えばいいかな？
コレクションだから少し違う気もするが、要素がなくても（NULLでも）
何も効果がないだけでコードは動くように作れる。
jQueryを使ったプログラミングでは「要素があるか？」という
条件文をなくすことが出来る。（これはNULLオブジェクトパターンの特徴でもある）
> $('[name="chbox3"]')
これだと分かりにくいかもしれないからちょっと変えて、
$(':checkbox ').prop('checked', true) を実行すると
すべてのチェックボックスのチェックをONにする。
言い換えると、0個以上のチェックボックスをONにする。
0個以上なので、0個の場合でもOK
反対にこれは、$(':checkbox ').prop('checked')見つかったようその内
最初の要素のcheckedを取得する。見つからなければundefined。
そのように作られている。 https://www.visualstudio.com/en-us/products/code-vs.aspx
これでJS書いてる人はいますか？
sublimeの未登録アラートがうざいので乗り換えもありかと思ってます
どうですか？ jqueryって仕様が変わるたびに、jquery使用箇所を書き直す必要があるので
基本的にJavascriptで書いてますが、皆さんjQuery等って使ってますか？ jQueryを使うこともある
使うときは基本的にバージョン固定にするよ >>748
jQueryの欠陥を指摘させて、吐く毒に紛れて見え隠れする次世代のアイデアをパクろうとしてないか？w
ソース読んでみたら？マズイ所ばかりでウンザリさせられるよ。 >>740
> jqueryって仕様が変わるたびに
JavaScriptだって仕様が変わるたびに、見直し必要だろうｗ
もちろん滅多に仕様は変わらないが。あ、jQueryの話しね。 >>748
> 皆さんjQuery等って使ってますか？
それに関してなら、どれくらい使われているかのデータが有る
http://w3techs.com/
JavaScript Libraries
Most popular JavaScript libraries
1. JQuery 63.8% +0.7% 95.1% +0.1%
2. Modernizr 8.1% +0.2% 12.1% +0.3%
3. Bootstrap 7.2% +0.4% 10.8% +0.5%
4. MooTools 4.1% -0.1% 6.1% -0.2%
5. Prototype 2.3% 3.5%
63.8%の人が使ってる一番使われているライブラリだそうだ。 やっぱり皆使ってるんですね。ありがとうございました。 jQueryなんか使いまくるからスマホが激熱になって、毎日のように落ちる。
閲覧者サイドで一番便利なスマホページとは、スクリプトを使っていないページ。まさに10年以上前のPCページと相似な状況。 Javascript Good partsをボロボロになるまで勉強しました。
http://demon-uploader.rosepink.us/small.html?img=2015050308253711382.JPG
jQuery使わないとキツイとこはライブラリ使ってますが、
idクリックして関数実行とかはjQueryなしで実装できるので、使ってません。
Ajaxでphpにデータ送るとかは、ブラウザ毎の対策が面倒なのでjQuery使ってます。 >>754
なにいってるんだ？
JavaScriptが動いてないところでは
jQuery使っていたって関係ねーよ。 激熱になっただけで落ちるっていうのも意味不明だな。
まあ素人さんが嘘をついたらこうなるという実例ｗ コンピュータにでたらめにキー入力したら
爆発するという映像表現を信じているとか？ Ajaxはajax()ではなくfetch()のポリフィルを使っていこうぜ インターネットのネットワークリソースが枯渇する
みたいなニュースが最近あったので
ニュー速あたりで謎知識を聞きかじってしまったのではないかと 普段はbootcampでwinを使っているのですが
winがおかしくなったのでosxで作業してます
chromeの場合は同じアプリがosxでも使えるのでありがたいですが
tweetdeckが、winと比べるとクッソ重いことに気づきました
jsの実行速度はOSによってかなり違うのでしょうか？ 糞アポ～の標準アプリであるサファリを負かす事は許されないルール。だからgoogle chromeはosx用だけ嫌味のように遅い。 普通に
func();
で実行するのと
function(){func();};
で実行するのと何が違うんですか? Amazonのカートに保存する、戻すとか
リアルタイムに更新されるのはJavaScriptですか？
ああいったものを使いたいのですが難しいですか？ 使いたいの？
Amazonを使うだけなら、JavaScriptの知識は無用だよ。 >>766
簡単だよ。
JavaScriptを普通に使えるプログラマなら簡単 本スレ
+ JavaScript の質問用スレッド vol.125 + [転載禁止]©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1436910657/ マウスホイールを使ったスクロールの向きって変更できるん？(´・ω・｀) 現行スレ
+ JavaScript の質問用スレッド vol.125 + [転載禁止]©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1436910657/ 別スレより誘導されてきました
お願いします
スクロールしてもヘッダ（とcaption）は固定表示のtableを作りたいのですが、
・tableのwidthはパーセント指定
・theadのセルはwidth指定無し（可変）
・border-collapse: collapse
この条件だと、色々なチュートリアルサイトの方法やjQueryプラグイン等を試してもどうもレイアウトが崩れてしまいます
どうかアドバイスいただきたいです
お願いします！ >>774について
申し訳ありません、現行スレに書き込みます .
.
板違い（？）の上に、話をさえぎってしまいゴメンナサイ！(*_ _)人
でも、この板のユーザーさんにも有意義な告知かと思うのでカキコませてください。
★ 謝礼は十分いたします ★ アメブロなどのサイト制作ができる方！！
アメブロなどを使用してのサイト制作のできる方を早急に求めています！
私はリケジョやPC女子からはほど遠く、サイト作成にはまったく疎いのでとても不自由しています…(> <；)
そこで私に代わりサイトを作成してくださる方を求めてこの場をお借りしました。
■サイトの内容…
アダルト系、違法性、その他公序良俗に反するものではありませんのでご安心ください。
■サイト制作の仕様ベース…
アメーバブログで十分です。願わくばwordpressなどのブログ形式のサイトを希望します。
それに準ずるもので使い慣れたものがあれば別のものでも構いません。
■条件はありません…
技術さえお持ちでしたら、学歴・職歴等は一切問いません。
フリーター、ニート、高齢ニート、コミュニケーション障害をお持ちの方、引きこもりの方、中年失業者、長期無職等、歓迎！
■作業形態…
作業は在宅でやって頂くことになりますので、時間の指定は一切ありません。別のお仕事の傍らに…でもOKです。
■詳細をお知りになりたい方は…
下記メールアドレスまでご連絡ください。詳しく書いた返信文を差し上げます。
※真剣な告知です。冷やかしはご遠慮ください。
井 上
inoue1952w★gmail.com
迷惑メール対策のため＠部分を★にしてあります。
実際に送信する際には★を＠マークに変えてください。
.
. <SCRIPT Language="JavaScript">
<!--
function show_hide(id) {
disp = document.all(id).style.display;
if(disp == "block")
document.all(id).style.display = "none";
else
document.all(id).style.display = "block";
}
//-->
</SCRIPT>
クリックすると隠れていた文字列が表示されるスクリプトですが、
パカッと表示されるのではなく、スルッと表示されるようにできませんか？ このスレは使われていないので、以下のスレへ書き込んで
+ JavaScript の質問用スレッド vol.129 +
http://echo.2ch.net/test/read.cgi/hp/1456250334/l50 質問
よくあるhoverのmouseoutで子孫要素は無視するやーつの関連なんですが
<div>
<input type="text">
</div>
<div>には十分なpaddingがあるとして
<input>をダブルクリックとかしたときに出るブラウザUIの入力補完サジェストに
マウスを乗せると<div>でmouseoutイベントが発火するのだけれど
これを検知して除外するにはどうしたら良いでしょうか？
event.relatedTargetはnullでした
jQueryのhover()メソッドではmouseout扱いでした HPで友達が稼げるようになった情報とか
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
HVY0TJD7SU 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
D13NS 関数構造で質問です。
【環境】IE9以上、他最新で動けば可。
【エラー】なし。
【期待する結果】結果は現状通り。コードの整理。
【サンプルコード】下記。
fanc-中1(){
fanc-中1の処理
fanc-下1(); fanc-下2(); fanc-下3();
}
fanc-中2(){
fanc-中2の処理
fanc-下1(); fanc-下2();
}
fanc-上(){
fanc-中1(); fanc-中2();
}
で結果は正常ですが下1と2が2回呼ばれてしまいます。
下は再描画など処理後の後処理なので最後に各1回実行すればいいものです。 fanc-上(){
fanc-中1(); fanc-中2();
fanc-下1(); fanc-下2(); fanc-下3();
}
としたいのですが、すると中用にもう1つづつfuncが必要になります。
fanc-中1(){
fanc-中1の処理
}
fanc-中2(){
fanc-中2の処理
}
fanc-中3(){
fanc-中1();
fanc-下1(); fanc-下2(); fanc-下3();
}
fanc-中4(){
fanc-中2();
fanc-下1(); fanc-下2();
}
これでもいいのですが、もっとスマートな書き方があれば
教えてください。
部分適用やカリー化の記事を見ましたが今ひとつ理解しきれません（そもそも関係ない？）。
よろしく願いします。 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。 JavaScriptでリアルタイムアクションゲームが作れる日は来るのだろうか？ >>797
ストリートファイター３はさすがに無理だよね？ 何でUnityはjavascriptを外したんだよ、バカヤロー。
あと、Unreal.jsって何なんだよ。
もっと本格的なjavascript用のゲーム開発ツールを作ってほしい。 現在調べつつ手元で適当に色々と試していた初心者なのですが
document.write("alert" alert(1) "alert");
document.write("alert" alert(1) in"alert");
document.write("alert"(alert(1))"alert");
document.write("alert" (alert(1)) in"alert");
これで最後の物だけalert(1)が動作したのですが理由がわかりません
このin演算子はなんのためにあるのでしょうか
mozillaのリファレンスも読んだのですが論理値を返すということしか分かりませんでした 1～3番目は構文解析の時点でエラーになるので何も実行されない
4番目は"alert"(alert(1))という関数呼び出しとみなされその引数を得るためにalert(1)を実行するから
でもそのあとダイアログを閉じるとエラーになる
inの右側は文字列じゃなくてオブジェクト
その指定したオブジェクトにinの左側に指定した名前のプロパティが存在するかどうかを調べる演算子
それからdocument.writeなんて使わない。使ってるような所も手本にしちゃだめ >>802
ありがとうございます！
"alert"()という関数と見做すんですね…関数名に文字列指定できるのは意外でした
とりあえずdocument.write()は使わないようにします 質問です
JavaScript API 群のブラウザ実装状況
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
に記載されている数字の意味を教えてください
例えば一覧表のの一番上にあるAlarmは
Chrome あり
Edge なし
Firefox 45
とありますが、45の意味が分かりません
同じくこの表全体で数字が何を意味しているのかが分からないです。意味を教えてください。 audio要素使ってautoplayしようとしたのですが
だいぶ前にブラウザのポリシーで塞がれてしまったようです
Chrome版Edgeとか一部のブラウザはまだいけるようです
ソシャゲでなってるのがあったのでソースをみたのですが
かろうじてCreateJS使ってるぐらいまではわかったのですが
そこから先は解読出来ませんでした
ChromeとFirefoxぐらいには対応したいのですがなんかハックありますか？
ググったら色々紹介されてはいるのですが
そのころよりさらにaudio事情が進んだようで今はもう使えないような感じでした >>808
再生ボタンを自動でクリックさせるようにしたらいいだけじゃなかろうか？
再生ボタン.click();
みたいな感じで Webサイトを提供する側の話で
利用する側の話ではないんじゃ？ ブラウザゲーだとaudioタグじゃなくてWebAudioAPI使ってるかもね >>808
autoplayはもう自分の努力じゃ無理
統計的によく利用されてるサイトかどうかが許される基準に含まれてる >>609-612
レスありがとうございます。
youtubeとか自動再生される時もあるのですが（基本手動）、
やっぱもう難しい感じなんですかね。
WebAudioAPIに関してですが、MDN見ると、
>自動再生のブロックは、Mozilla でもまだ開発中です。
と書いてるので、それもいずれ塞がれる方向なんですかね。
ゲームとかならサウンドONとか設定で選ばせばよさそうですが、
今回は思いもよらない音声で閲覧者を爆笑させるという趣旨だったので、
諦めようと思います。 すみません、javascriptというよりDOMの質問なのですが教えて下さい。
ある要素の子に要素を追加したいとき、element.appendChild()
みたいな形ができると思いますが、大量に子要素を一気に追加したいとき、
なにかよいやり方あるのでしょうか？
element.appendChild()の引数で配列を渡せればよかったのですが、
うまくいきませんでした。 >>814
$("#id").append(["<hr>", "<hr>", "<hr>", "<hr>"]);
$("#id").append([$("<hr>"), $("<hr>"), $("<hr>"), $("<hr>")]); Document.createDocumentFragment()
https://developer.mozilla.org/ja/docs/Web/API/Document/createDocumentFragment
フレームワークなどでは、DocumentFragment を使う
一旦、DOM と無関係の場所に、複雑な木を構築しておいて、
最後に、1回だけDOMにアクセスして、木を丸ごと追加する
これで、その都度、DOMアクセスしなくてもよい。
1回だけで済む >>818
ParentNode.append()も内部でDocumentFragment使ってるぞ
createDocumentFragment()して
fragmentにappendChild()する部分を代わりにやってくれる 複雑でないなら
文字列で必要なhtml作っておいて
最後にポンと追加するのがバランスいい >>813
安定させたければ
PWAをインストールしてもらうしかない こんばんはー！
INPUTでpattern書いてバリデートしているときに
今入力文字列が正しいか正しくない（赤枠光ってる）かを
JavaScriptで拾うことは可能ですか？ こんなコードあったんですがどういうこしですか？
(function test(){
ここにいっぱい処理が書いてある
})(); >>827
関数を定義して実行してる(即時実行)
そのケースはスコープを切る目的で使ってる >>829
ありがとうございます
では
function test(){
ここにいっぱい処理が書いてある
}
test();
と同じことですね？
なぜそんなひねくれたコードにするんですかね。
よくわからないのは混乱のもとなのに。 >>830
そう書くとグローバルのスコープにtestという名前の関数ができて名前空間を汚染する
ライブラリの作者なんかを含めてみんながそれやっちゃうと名前が衝突するでしょ あー、moduleが一般的でない時代の名残だと思ってもらっていいよ
今はESのmodule使えば必要ない IEで動くように修正しろ、今すぐ、いつ出来るか？すぐ返事 IE9でもJSは動くようになりましたが、CSSのtransformが効きません
全部jQueryで書き直してください
ってことでサポート外ブラウザは仕事受けたら負け 書き直せばええやん
そのためにIEサポート用の追加費用もらってるんやろ なお貰っておらず言われたらしぶしぶ追加対応する運ゲーやってるマヌケもいる模様 個人相手だったら
そいつの年収の7割以上になるくらい発注しておいて
値下げに応じないなら全部引き上げますが
ってやるのよな 初見 Mathjaxについて質問
これ、バージョンが2と3でstyle要素に書く文言が大きく変わったみたいなんだが、分かりやすく説明してるサイト教えて >>844
人手不足だからその会社の業績が怪しくならない限り必要なくなるということが無い >>846
取りあえずレスサンクス
俺的にはデベロッパー目線の説明よりエンドユーザー目線での説明が欲しかったが。
今までVer2.7.5をCDNで使ってたんだが、今後ヘッダ部にどういう＜script＞要素を記入すればいいのか、
これまでにVer2.7.5で作ってきた数学の記事のソースをどうすればいいのか、分からないことだらけだわ >>847
MathJax = {
chtml: {
matchFontHeight: false
},
tex: {
inlineMath: [['$', '$']]
}
};
MathJax.Ajax.config.path["Contrib"] = "//cdn.mathjax.org/mathjax/contrib";
MathJax.Hub.Config({
TeX: { extensions: ["color.js","AMSmath.js","AMSsymbols.js","[Contrib]/xyjax/xypic.js"] },
tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] }
});
このバージョン3用への書き換えが上手く行かない。。。。 この辺とか参考にならんかね？
もっと詳しくは総本山のドキュメントが一番参考になると思うけど
https://text.baldanders.info/release/2019/09/mathjax-v3-is-released/
まあ2までの書き方を忘れるか
2を使い続けてもいいんでない？ >>852
サンクス。ググってもVer3用のページってあんまりヒットしなかったのによく見つけたな >>854
>>847使った。
color.js, AMSmath.js, AMSsymbols.js,
はVer3にあるせいか、
loader: {
load: ['[tex]/color', '[tex]/ams']
}
っていう風に書き換えてくれるけど、
"[Contrib]/xyjax/xypic.js"]
の部分は正しく処理されてないな。
MathJax.Ajax.config.path["Contrib"] = "//cdn.mathjax.org/mathjax/contrib";
が関係してるんだろうけど、この部分をもちゃんと正しく処理したい Ver3の読み込みにしても、Script要素
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js"; id="MathJax-script"
と
id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
とが、例えばあるようだけど、
この”startup.js"と”tex-mml-chtml.js”の違いも分からん 教えてエロい人。
今からジャバスクリプトを始めようか悩んでます。
ジャバスクリプトをすっとばしてタイプスクリプトから始めるってのはありっすか？ >>858
やることはそんなに変わんないと思うけどね
TSはJSわかってる前提のような気もするが 途中で送信してしまった
でもまあ、大丈夫なんじゃない？
Excelとか今後、VBA捨ててTSにするらしいし
そしたら、JSなんて知らずにTS書く人がたくさんになるんだろうし >>860
そうなんですか。タイプスクリプトを勉強します。
ありがとうございます。 <body onload="test">
<body onload="test()">
<body onload="test();">
いつもどれか迷う。
迷いを消せるコツはありますか？ onload属性使わずにaddEventListenerする >>867
onload属性に渡すのは関数なんだよ
1つ目は関数を渡してる
残りは関数を実行した結果の返り値を渡してる >>855っす。
xyjax.jsを使う部分だけが未だ未解決 すまんjsってエスケープは正規表現リテラルのときだけでいいのけ？
文字列型はしなくていいんだよな？ <head>
<meta charset="UTF-8" />
<title>JavaScript本格入門</title>
</head>
<body> <scritpt type="text/javascript"> // window.alertは、指定された文字列をダイアログ表示するための命令です。
window.alert（’こんにちは、世界！'); scritpt → script
（'こんにちは → ('こんにちは ＜noscript＞JavaScriptが利用できません。＜/noscript＞
＜/body＞
＜/html＞ >>886
廃れてないよ。今年は大幅増
https://w3techs.com/technologies/history_overview/javascript_library/all/y
jQuery
2017年 71.9%
2018年 73.1% (+1.2%)
2019年 73.6% (+0.5%)
2020年 74.2% (+0.6%)
2021年（仮） 76.5% (+2.3%) ※10ヶ月 終わったと言っている人たちは
ウェブアプ系の開発をしている人たちなんだけど
数はそう多くないんだよ
日々アホみたいに大量に作られていく
企業、商品サイトやLPなどの
広告系ウェブページに比べたら
んで後者では相変わらずjQはフィットしてんだな
その量が最近増えてるってことだろう
みんなステイホームしてんだから
そりゃ広告も増えるよねということなんじゃないかな UTFー8で保存したがsafariで開くと文字化けした。 ＜!DOCTYPE html＞ ＜html＞ ＜head＞ ＜meta charset="UTF-8" /＞ ＜title＞JavaScript本格入門＜/title＞ ＜/head＞ ＜body＞ ＜script type="text/javascript"＞ // window.alertは、指定された文字列で表示するための命令です。 window.alert（’こんにちは、世界！’）; ＜/script＞＜noscript>JavaScriptが利用できません。＜/noscript＞ ＜body＞ ＜/html＞
ダイアログが開かない。 【環境】 Win7-Pro，Chrome85.0
【何をしたのか】 文字列の最後の点「.」を削るコード
【エラーメッセージ】 無し
【期待する結果】 例えば、 -4. とあったとき、最後の点「.」が不要なのでこれを消したい
【サンプルコード】
対象の文字列を str としたとき
if( str.slice(-1) === '.' ) str.slice(0, -1);
でOKな筈ですが、console.logでは何ら変化がありません。何が問題なのでしょうか？ 何の問題もないぞ
let str = 'aiu.';
if( str.slice(-1) === '.' ) str = str.slice(0, -1);
console.log(str); //aiu >>894
if (str.endsWith(‘.’)) で
2回スライスするのはちょっとね >>895
原因が分かりました。
if の右側（処理式）で str = と書いておかないと、単に str.slice() だけでは上書きされない、
ということでした。 >>896-897
どうもすいません。行き違いになってしまいました。 どこで質問したらいいのか分からないのでここで分かる方教えてください
もしかしたらスクリプトの設計によるのかもしれませんが
JavaScriptがブラウザの非アクティブタブではタイマーが遅くなったり通信や更新を行わなくなったりするみたいです
ブラウザ側で全てのタブでちゃんと全て機能させるようにするような設定は可能でしょうか？ >>900
非アクティブのUIスレッドでsetTimeoutやsetIntervalのタイマーが遅くなるのはブラウザの仕様
https://stackoverflow.com/questions/5927284/
やったことないけどChromeはDisableできるっぽい
chrome://flags/#intensive-wake-up-throttling レスありがとう
色々と調べてみた感じ同じことが書いてました
非アクティブタブをアクティブに見せかけてフル稼働させる機能なんか確かに自分でブラウザ作るしかないかもですね (外部ライブラリの読み込み設定が上手く行かず)mathjax 2.7.5を使ってるんだけど、
\mathop, \mathrel が機能して無いっぽいんだが、mathjaxではまだ実装できてないって事? Mathjax 2．7．5使ってます。
ヘッダ部で、
MathJax.Ajax.config.path["Contrib"] = "//cdn.mathjax.org/mathjax/contrib";
と指定しているんだが、Ver3ではここをどう変更すれば良いのかが分からない 質問です
querySelectorの引数に
属性セレクタを渡すとき
属性値を囲むクォートを省略すると
Syntax errorとなるようになったのが
いつ頃からかご存知の方はいますでしょうか
JSエンジン毎に違いがあるとは思いますが
Chrome、V8でいつからかが知りたいのですが
ググってもなかなか見つからずでして
ざっくりでも良いのでよろしくお願いします >>906
エラーにならない時代を知らないな
念の為エラーになる記述例を書いてみて >>908
調べてみたら
アルファベットだけとか特定の文字で構成されてればquoteなくてもいい仕様らしい
知らんかった
https://mathiasbynens.be/notes/unquoted-attribute-values#css
でもquoteしておいたほうがいいんでね？ #はident-tokenになりえない文字なのでクォート無しで解釈で来てたのが仕様外 >>909
あざます
クォートします
が、過去に書かれたJSの中からクォートなしのものがたくさん出てきて、いつ頃からかこれがエラーになってたのかを調べておりまして mutation.observerのaddedNodesについてなんですが
返ってくるノードリストは追加されたノードの数によってlengthが変わるんですか？
それとも常にlengthは1で追加されたノードごとにレコードが生成されるんでしょうか？
今テストしてる環境だと常に1つしかないのでおたずねします >>912
すいませんちょっと間違えました
追加されたノードがなかったときは空なので0か1なのか
それとも2以上になることがあるのかという質問です >>912
一括で追加すれば2以上になるよ
observer.observe(parent, config);
parent.append(a, b, c);
とかやってみれば分かる >>914
おお！デバッグ方法までありがとうございます
助かりました ファイアフォックスやばすぎんか？
F12押したらjａｖａｓｃｒｉｐｔのインタプリタが起動するのマジヤバイ
最高 変数の中身を足し算したいのですが、NULL判定を逐一取るのが面倒くさいです。
まとめて回避してくれる方法は無いものですか？ null判定などしなくていい
nullなんて入らないだろ >>917
null + 1 = ?
null + null = ? ひとつでもNullが交じると、NaNになるみたいです。 >>921
ホント？
実行環境とサンプルコードを求む nullでNaNになるって事はわざわざparseIntやparseFloatしてるのかな？ なるほど入力された文字列を数値として足し算したいという感じか
どうすれば回避したことになるのか次第だけどfilterでfalsyを除けば？
var foo = ["1", null, "2", null, "3", "foobar"]
foo.map(x=>parseInt(x)).filter(x=>x).reduce((a, b) => a+b) あとは“5man”みたいのをどうしたいかでparseInt()かNumber()かを使い分ける javascriptは難しい。
この言語を使いこなせる人はすごいですね。 >>927
慣れじゃね？
日本語みたいな難しい言語だって
慣れてる俺らはペラペラだろ？
そんなもんよ thisを除くとJavaScriptが他の言語より難しいところって無いと思うけどな JavaScriptだけなら難しいのかもしれないが、俺たちにはMDNがある。
仕様書がチンプンな文系にも優しい。 JavaScriptだけなら難しいのかもしれないが、俺たちにはMDNがある。
仕様書がチンプンなアホにも優しい。 JavaScriptだけなら難しいのかもしれないが、俺たちにはMDNがある。
仕様書がチンプンなカスにも優しい。 バカにしたいのかも知れんがオリジナルのレスから既にへりくだってるのであまり煽りになっていない。 JavaScriptじゃなくてJavascriptやろ？ thisは全然難しくない
０番目の引数というだけ
そこにどういう状況で何が渡ってくるかを
考えたり覚えたりしないといけないのは
あらゆる言語のあらゆる関数に言えること
JSでややこしいのは暗黙の型変換、そしてnew演算子の振る舞いとクラスシステムくらい 明示的に渡される引数と暗黙的に渡される引数とで
理解しやすさに違いがないと思うやつは単に頭が悪いだけでなく
理解してないものを理解したつもりになってるからかなり質が悪い
チームの足を引っ張るいわゆる老害タイプ >>937
全く差がないとは思わんけど
いうほど難解って気もしないけどなあ >>937
明示的なのは自分で定義した関数を自分で呼び出すときだけでしょ
そうでない場合は自明ではなくて、ある程度の決まりを覚えるか調べるか、
もしくは状況に当てはめて考えるかしないとわからないじゃないか >>939
マジで違いがわからないんだな
いつもの釣りネタかと思ってた Javaのthisってなんですか？
obj.foo
↑
JavaScriptと同じで . の左側です。
JavaもJavaScriptもthisは . の左です。 thisそれ自体は別に理解が難しくはないと思うけど、既存の他のOOP言語に慣れた人の先入観と
ずれた動作をするところがトラップになっているだけのように思うな。 >>941
>JavaもJavaScriptもthisは . の左です。
もしそうだったなら何も難しくはなかっただろうに .の左がthisという認識で合ってるよ
①ドット演算子はその時に値を解決せずに、何から何が参照されたかの情報を持ったがリファレンス型を作る
そのリファレンス型が他所で参照されて壊されることなく関数呼び出しまでたどり着くと
参照元（左辺）がthisとして関数コンテキストが実行される
②もし起点が参照型ではない状態＝直接、関数が呼ばれるとthisは未定義となる
未定義の場合sloppymodeならglobalThis、strictmodeならundefinedとなる
基本的にはこの２つしかない
あとは③明示的にthisを設定して呼ぶ方法と、
④内部メソッドや外様APIから独自のルールでthisが設定されて呼ばれる場合くらいしかない >>944
必死杉w
「thisは . の左です」がなんでそんな長文に化けるんだよw >>941
> obj.foo
> ↑
> JavaScriptと同じで . の左側です。
> JavaもJavaScriptもthisは . の左です。
どれどれ…
let obj = {
foo: () => {
console.log(this)
}
}
obj.foo()
//=> window
ウソつきぃぃいいい！！！ ビールの話をしているのにノンアルコールビールを持ち出して
違うじゃないかというようなもんだな >>949
obj.foo()がビールなのかノンアルコールビールなのかそれ以外なのか
どうやって見分ければいいんですか？ if文で1の位が1であるかどうかで条件分岐したいんですが、どう書けばいいでしょうか？ JavaScript のthis は、関数をネストさせると、コンテキスト・文脈を判断できず、
グローバルのwindow を指してしまうので、非常に難しい
だから、ラムダ式、jQuery, Haxe では、thisがwindowを指さないように変えられた 剰余を使えば？
正の整数を、10で割って、1余る。
負の整数は、知らないけど >>954
ありがとうございます
ちょっとむずかしいのでテキストとして処理します >>953
お前thisわかってないじゃんｗ
windowを指すのは関数のネストと全く関係ない
関数を呼び出すときにobj.fooで呼び出すかfooで呼び出すかの違いなだけ どれどれ…
let foo = () => {
console.log(this)
}
let obj = {
foo
}
obj.foo()
//=> window
foo()
//=> window
ウソつきぃぃいいい！！！ >>958
お前が呼び出してるのは関数じゃなくて
アロー関数じゃん どれどれ
let foo = () => console.log(this);
foo instanceof Function
//=> true
typeof(foo)
//=> “function”
Object.getPrototypeOf(foo)
//=> function ()
ウソつきもたいがいにせーよ！ そうだそうだ！大うそつきだ！
動きは同じだ！だから問題は１つもない！
thisは難しくない！話はおしまい！ 違うものを同じと認識してしまってるんだからそりゃ区別が付かなくて難しく感じるんだろうな 関数の定義すら知らない人が
thisは難しくないとか言ったところで全く説得力ないよ
もうただただ痛い >>964
一連のやり取り見ればどちらに分があるかは
初心者にも明らかなのでもう続けなくていい ちょっと考えりゃわかんだろ
20年以上、多くのプログラマが
当たり前のようにJS書いてて
特に問題なくthis使ってきたんだから
大したことないって
そりゃ理解力に個人差があるのはわかるけど
数字でわかることに他人を巻き込むのは良くねえよ
素直に自分の理解力の無さを認めて
ふつうに理解できてる人に教えを乞う方が
建設的だと思うぜ
別にわからないことは恥ずかしいことじゃねえよ 何というか、実際は複雑で仕様書レベルで理解しようとしたら大変なものってたくさんあると思うよ。
でもthisってそこまで理解しないと使えないものではないと思う。
どちらかというと直感的に体で覚えて使える類のものだと思うよ。
もしどうしても詳細なロジックで理解したければ仕様書を読めばいいと思う。 「thisが理解できない」という話は誰もしてないのにねw
「難しい」という言葉の意味すら理解できないんだなww 言葉の定義を理解しようとしないのは頭の悪いやつに共通する特徴 なるほどねー
「thisは難しい」を「thisが理解できない」と勘違いして
「thisは難しくない」と主張することで「俺はthisを理解してるぜ」とドヤりたかったと
にもかかわらず何も理解してなかったことが露呈したわけだ
噓つきディスおじさん乙 頭大丈夫???
仕様書レベルで理解してる人なんてほとんど居ないし
それを目指そうとすれば難しいだろうけど、
そこまでする必要はないよと言ってるだけだよ
つまり反対に言うと、むしろ余りに深く理解しようとするから難しく感じるのでは？と言ってるわけだよ？
thisが理解できないなんて誰も言ってないでしょ？ つまり理解してないくせに知ったかぶりでドヤってたわけだﾜﾗ 難しいってのは常に相対的な言葉なんだよねー
何と比べてるのかも理解せず延々と知ったかぶりでドヤられてもねー 何と比較してるかって
>>927-929 始まりを見ると
JSの全仕様及び多言語の仕様においてthisが特別に難しいかって話でしょ
自分の中でだけ勝手に基準変えちゃったのかな？ >>977
使いこなすのに全仕様が必要なのか？
そんな理解しかできないのはお前だけw
頑張って考えた言い訳でもこれだから
仕様ヨムオも噓つきおじさんだわ 難しいつっても
100点中2点と5点の差みたいなもんじゃね？
とりたてて困るほどのものでもないというか
あーそういうことなのね、程度で済む範疇というか
何レスも消費して騒ぐほどのもんかね？ 初心者がthisを使いこなすせるようになるために理解すべきことを
わかりやすく説明すれば納得するんじゃね？
そうすればスレ的にも有意義だと思うよ
“thisは０番目の引数というだけ”や”thisは . の左です”では
まるでダメだから噓つき呼ばわりされる まず第一に初心者が使いこなすのが簡単な仕様なんて存在しないでしょ
例えばforファミリーだってfor-inの列挙のルールとかfor-letの変数の挙動とか
しっかり理解するのは初心者にとっては極めて難しいでしょ
thisの説明はそこそこしっかりしても>>944＋アロー関数くらいのもので１レスに収まる程度でしょ
もちろんそれ以上に深く知ろうとすればforの例などと同じく結局他のJSのシステムまで理解しないといけないから
そりゃ細かく知ろうとするほど際限なく難しくなるでしょ
難しくないって言ってる人は様々に具体的に見解を述べてるんだからさ
むしろ難しいっていう理由のほうが聞きたいね
thisを理解してるそうだから答えられるはずでしょ？ >>982
噓つきの言い訳長文ほど見苦しいものはないぞ
結局>>973が書いてる通りだったね 簡単だけど、簡単なんだけど、簡単には説明できないんだッ！
せ、説明ができないだけで理解してないわけじゃないからなッ！！
う、う、ウソじゃないッ！！！ 「HTML5プロフェッショナル認定 レベル2」の問題が難しい。というか覚えなけれならないことが多すぎる。 Scanner scanner = new Scanner(System.in);
のこの一番最初のScanner は何なん？ それはjavascriptではなくjavaなのでは？
クラス型変数宣言 >>985
簡単だとか誰も一言も言ってないぞ
そもそも全て簡単ではないが、
特段JSのthisが難しい訳ではないと言ってるだろ
いい加減諦めろ 難しくないと思うのは自由なんだけどさ
さも理解してるかのように語って初心者が困るような嘘を垂れ流し続けるのはやめてくれ
自己弁護の言い訳に終始しててほんとに見苦しいと思うよ 初心者「難しい話をされて困るんです。
専門用語を使った間違いのない完璧な説明じゃなくて
分かりやすいたとえで説明してくれませんか？困るんです」 シッタカ「分かりました。半可知識でさも知ったふうに語ります」 まあでも
世の中そんなもんじゃない？
たいていの人にとって必要なのは
現状から一歩前に進むことであって
いきなり真理に到達することじゃないもの
だから真実ではないけど
みんな最初は古典物理を教わるわけで
極論だが、このスレで質問するようなレベルの人に
完璧な答えは必要ないんだよ、現状打破できれば
自転車乗れるようになってから
なんで倒れないのか知った方が理解が深いのと同じよ >>992
そう思うのは自由だが
それなら君が完璧な説明をしたらいいだけなのでは？
簡単でしょ？ >>992
すまんけど俺は仕様書を読めるし長年読んできたし、
ES6の前からDiscasにも参加してクラスシステムやthisが絡むの議論にも
さんざん参加してきたし、十分深く理解してるから
つうかここまで色んな人がしたthisの説明は、合ってるから
100％正確を求めたら仕様書以外はみんな間違いになるから
誰も初心者が100％理解するために解説を述べてるのではなくて
thisが比較的難しくないことを述べるために概要を簡単にまとめ直して
どうそれを見るかを語っているだけだから
そもそもなんで巷に色んな解説があり仕様書もあるのに
こんなところで100％の解説をまとめようと思うのかも理解できないから
そもそも本当のことを語ったら初心者が困らないのかというとそれこそ嘘だから
初心者が本当のところをすべて理解するのは不可能で
そんなこと教えられてもそれこそ難しくて困るから
初心者にとって必要なのは嘘だけど簡単で概ね使える知識だから
そこから上級者になっていくにあたって本当のところを知っていくものだから 仕様ヨムオとjQおじさんは完全に老害だな
役に立たないばかりか嘘をついて他人の理解を妨げてる
どれどれ君のほうが1000倍役に立つ JavaのthisやPythonのselfに比べても
同じプロトタイプベースのIoのselfに比べても
JavaScriptのthisは覚えるべきルールが多くて複雑 なぜウソをつくのか？
=> 自分を認めてもらいたいから
なぜウソをついてまで自分を認めてもらいたいのか？
=> 常日頃他人に認められておらず承認欲求が満たされていないから
なぜ常日頃から他人に認められていないのか？ このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 2098日 21時間 8分 30秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
