+ JavaScript の質問用スレッド vol.135 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです ■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。) ■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ （githubのアカウントが必要です）にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証（要出典）されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) 前スレの977の方ありがとうございました。
仕様上できないのですね。
残念です。 装飾はいくらでもできるけどここはJavaScriptスレだからスレチ 前スレの、>978
<div id="div-a">
<input type="text" id="text-a" value="あいう">
<input type="text" id="text-b" value="abc">
</div>
var input_elems = $.map( $('#div-a > input'),
function(elem, index) {
return $(elem).attrAll(); // this === element
}
);
Cookies.set( 'input', input_elems ); // 設定
obj = Cookies.getJSON('input'); // 取得
console.log( obj );
結果
id: "text-a", type: "text", value: "あいう"
id: "text-b", type: "text", value: "abc"
Cookie のライブラリは以下を使っています。
js-cookie/js-cookie
https://github.com/js-cookie/js-cookie
$.fn.attrAll は、以下のブログで定義されています。
要素の属性を全部取得する
https://hokaccha.hatenablog.com/entry/20130819/1376895914 特定の <div> のなかの <input> の状態を全部sessionStrageに保存して
あとでそれを再セットするって input の数や種類に依存せずにかけませんか？
div にも input にもユニークな id が振られてます
input.type は今の所 text select と checkbox だけです
native js でも jQuery でもいいです >>9
前スレの>>978じゃないけど、
要素の属性取るならそんなプラグイン使わないで
jQuery標準の $.serialize か $.serializeArray を使えば良いんだよ
<form>要素以下になくても使える
今回の場合はserializeArrayの方が使い勝手良いかな？
https://api.jquery.com/serialize/
https://api.jquery.com/serializeArray/
で、実はそんなのは簡単で、面倒なのはこっち
> input.type は今の所 text select と checkbox だけです
フォームの中身を全て保存して戻すってのは
以前に実装したことあるけど、
typeみてselectだったら〜checkboxだったら〜みたいな
コードを書いた記憶がある。意外と面倒くさい inputのtypeでselectってなんだ？教えてクレヨン
input type="file"があったら面倒なことになりそうな
そうでもないか？ あー、でもidで見分けるのか。inputっていうからnameで見分けるのかと思った
var data = {};
$(":input").each(function() {
switch(this.type) {
case 'checkbox':
data[this.id] = this.checked;
break;
default:
data[this.id] = this.value;
}
})
データをかき集める所はこんな感じかな
idでユニークになるならserializeArrayみたいに配列で持たなくていいね。
ちなみにmultipleなselectには対応していない
こんな風にtypeを使って見分けることになるんで
> input の数や種類に依存せずにかけませんか？
に関しては、書けません。というのが答えになる。 >>15
時間の無駄。わかってる結論へ至る道はお前１人で勝手に進んでろ >>11
serializeArray は、送られる属性が少ないし、
successful controls しか送られていない
使いどころが難しそう 送られる属性ってなんや？
フォームのGET・POSTで送られる情報の
全てを網羅してるぞ？ serializeArray を使うなら、name, value を使うように統一しないといけない。
type, id が無いから、使いずらいかも
input.type には必ず、text, select, checkbox を指定しておけば良いかも serializeArray を使う場合、type, id が無くても、
name, value を使って、name がユニークなら、コントロールを特定できるのか formだと既存のjsコードと衝突したらかなわんし
ほぼ同一のformが複数あるなんてしょっちゅうあるから
汎用性なんて考えない方がいい気がする <select name="single">
<option>Single</option>
<option>Single2</option>
</select>
select は、input タグじゃないのか >>16
分からない場所に突き進む道を選ぶのね、ご愁傷様 九州は汲み取り式とか四国はベルサイユ宮殿式とかそういうのがあんの？ 雑多な要素を後から保存するのは無理がある
データの作成・保存はカスタムエレメントで閉じておくべき
例のvalueの問題はinputやtextareaを継承してonchangeで見てもいいが
contenteditableとして要素ごと作ればobserveも統一できるし見た目の調整もやりやすい >>26
正しい仕様を確認するための質問を無視する→理解の放棄 >>15
HTMLはその場合の操作も定義されている
>>The type attribute ...... the invalid value default are the Text state. >>33
そりゃそうだが、将来的にtype属性値の種類が増えるかもしれんし、わざわざ不正値を指定する理由はあるまい まだ到着してなかったのかよｗ
俺は最初からわかってる結論へ至る道の到着点にいるぞ？ｗ selectボックスで、10番目の要素を自動的に一番上までスクロールさせる方法ってありますか？ ／::::::::ソ::::::::: :゛'ヽ、
/:::::::-、:::i´i|::|/:::::::::::ヽ
/::::::,,、ミ"ヽ｀ "゛ / ::::::ヽ ＜ 一億総活躍
/::::::== 卍 `-::::::::ヽ
l::::::::／ .,,,=≡, ,≡=、l:::::::l ／.￣） 英訳は「Promoting Dynamic
|:::::l゛ .,／･＼,!.／･＼ l:::::::! / /二､.
|`:::| :⌒ノ/.. i＼:⌒ |:::::i 丿 Ｙ .i Ｙ Engagement of All Citizens」
(i ″ ,ィ____.i i i // （ ゝ' ﾉ ./ /
ヽ i / ■ .i i / ,ゝ-､_）--'-' （全国民の精力的な参画の推進）
l ヽ ノ `ﾄｪｪｪｲヽ、/´ /{ ゝ､＿_ﾊ|ﾍ
／|、ヽ `ー'´ ／ ｨ'/ﾊ＿＿＿＿ﾊ つまり国家総動員
／/l ヽ ｀ "ー−´/ ////////////ﾉ
,,ｨ''"/// | ＞＜ ／///////////{//////////／
r''"////// ..|/:::::ﾉ//////////////}/////////Ｙ
////////| /:::::{///////////////{////////// Javascriptのデータ型って先に指定できないのか？
int Number;
とか
string name;
とかは データ型を指定できてたら良くなかったことはたくさんある
例えばここ何年か今までintだったDOMの値が
高画面解像度デバイスのためにfloatになってきる >>43
それは型キャストで解決できる程度の問題かな
floatを返していても型がintだったら自動的に
小数点以下切り捨てられる
むしろその方が想定しない型にならないのでいいかもね >ここ何年か今までintだったDOMの値が
>高画面解像度デバイスのためにfloatになってきる
どういうこと？ ４Kとかだとコンテンツ全体表示できるから要素固定して表示するようなソリッドレイアウトよりも
リキッドデザイン的なものに変わってきた、ということでは 2^32-1を超える値扱ってんの？それとも小数点以下の値が来てんの？どこで？ってことなんだけど 一時そういう話があったがここにあるように今はまたintに戻った
https://www.w3.org/TR/cssom-view/#changes-from-2013-12-17
だけどChromeではまだサポートされてて
ズームしてdocumentElement.scrollTopなんかを弄ると分かる
200％以上に拡大すると分かりやすいだろうけど
特に低スピードのスクロール時にここで実際に役に立つことが分かる
http://output.jsbin.com/qedore 別に入ればなんでもいいんだけどいつもvarで型を作って自動でやってるから
Javascriptの基本的な型の作り方はvarなのかなって 朝鮮人みたいに揚げ足とる根性悪い奴がいるな
普段何の仕事してんの？
ニート？ 根性悪いやつが居るように見えるのは本人が根性悪いんだろうな 朝◯人と悪口いってる時点で人の屑
ジャップのくせに 「朝鮮人」は今や悪口ではないし
「JAP」は昔は米国新聞でも普通に使われてたただの略語というか日本の愛称だった
たかが三文字の言葉であれこれ思うのも馬鹿らしいよ リアルで朝◯人なんて言ってみろよ
どう言うことになるか分かるか？
リアルで言えない差別用語をネットで
使って吠えてる糞野郎 >>58
意味分からん
中国人
フィリピン人
朝鮮人
普通に使うぞ
変な嫌悪感を持ってるのはそういう学校教育された中年世代だけだろ 【研究】飲むだけで差別主義者が更生する「道徳ピル」
＞米国では、多くの学生が成績向上や適性試験をパスするために、リタリンを治療以外の目的で服用しているとの報告がある。
差別主義者は薬物でも服用させなければ駄目だな
市ぬかもしれないが生きてても仕方ない奴らだからどうでもいいわ 知能が低いと複雑なことを考えられないから
極端な白黒思考になる
これが差別主義者
道徳ピル飲んで知能を上げるしかない
薬害で市んだら害虫が一匹消えたという事でそれはそれでおっけ DOMは仕様がコロコロ変わる
だからその違いを吸収するライブラリが必要になる 逆だな
原則DOM標準は後方互換性を守る
JSのライブラリはバージョンアップで簡単に切り捨てる
ライブラリを使ってるとむしろ追従が大変になる 自分の引き出しにあんまり実例なくてわからないんだけど
バージョンアップで切り捨てるって旧UAを？だったら旧バージョン使い続ければ良いのでは？ uaって？無駄にコンテキストから推測させないでほしい。
あなたは数文字節約できるかもしれないけどこっちはいい迷惑。 >>67
パフォーマンスや新機能のためにバージョンアップしたくても
再設計が必要なほどAPIが大きく変わってることが珍しくないということ
YouTubeのCr以外で遅い問題もPolymerがそうだからYouTubeが追従できないから crって？無駄にコンテキストから推測させないでほしい。
あなたは数文字節約できるかもしれないけどこっちはいい迷惑。 >>66
> JSのライブラリはバージョンアップで簡単に切り捨てる
> ライブラリを使ってるとむしろ追従が大変になる
どのライブラリ？ AngularとかReactとかかな？
なんか更新頻度高いしね
その点jQueryは安定していていいよ。
そもそも追従するほどバージョン出てないしｗ >>69
それ、単にそのライブラリ・フレームワークの設計が杜撰ってことじゃ
その互換性の部分以外のとこも大丈夫なのか？となりそう angularって言うほどいいかな？
偉そうな事言うのは嫌なんだけど
vueやreactの方が絶対いい >>72
杜撰ってわけでなくJS界のトレンドなんだろうな
jQueryみたいに切り捨てられないと（それでも利用度からすれば比較的切り捨ててる方）
負の遺産化するし >>74
jQueryは負の遺産にはならんよ。
DOM操作を短く簡潔にするためだけのものだから
使わないならjQuery1行をそのまま数行に対応付けて書き直せる
冗長になりますよってだけで誰もやらないけどね
負の遺産っていうのはAngularやReactなどの
最近のフレームワーク。違う書き方にしようとしたら
全体に手を入れなければいけない フレームワークは離脱するには設計から構造からやり直さないといけない
jQueryのようなライブラリは設計構造はそのままで済む場合が少なくない（※）が使用部分が広範になりがちで書き直し量が多い
※例えばアニメーション関係をjQueryに頼っていると構造にも絡んでくる
独特な機能を提供するライブラリは関係部分だけ書き直せば済むといえなくもない フレームワークで作られるのは迷惑。
意識高い系の人がフレームワークで使って作ったサイトをサーバに乗せるのに凄い苦労した経験あり。 jQueryで唯一評価されるのはSelectorsAPIの基礎になったってことだけ element.style="width:100px;background-color:green;";
でいけたんだけど、element.style.width="100px"みたいにプロパティと値をわけて書くのと何か違いはありますか 可読性がよくないぐらいでは
element.setStyle({
"width": "100px",
"background-color": "green",
});
とかがあればいいな
prototypeいじりたくないけど >>79-81に便乗質問なんだけど
・element.styleにはCSSStyleDeclaration オブジェクトが入ってる
・element.styleに直接CSS定義テキストを代入できる
・element.styleに直接CSS定義テキストを代入した直後でも
element.styleにはCSSStyleDeclaration オブジェクトが入ってるし
element.style.width を変更することもできる
CSS定義に変更があった場合変更内容を元にelement.styleを再設定してるという感じだと思うんだけど
こういう挙動はどう理解したらいい？
より具体的には、ブラウザの実装がそうなってるというだけなのか
それとも同じような挙動をユーザがjsコードで実現できるのか >>81
Object.assign(element.style,{
width: "100px",
backgroundColor: "green",
})
>>82
内部Proxyだと理解したら良い >>78
SelectorsAPIなんてjQueryの劣化版だろｗ
単にNodeListを返すだけで、そのNodeListを扱う方法まで作らなかった
jQueryはNodeListみたいに単に要素の配列を返すのではなく
要素の配列を内包した、jQueyrオブジェクトを返すことで
要素の配列そのものをメソッドで操作できる
ここが重要な所なのに、SelectorsAPIはそれを理解せず
単に要素の配列を返しただけ jQueryはいつgetContextに対応してくれますか
あとマウス座標取得決定版みたいなのも欲しいです
$(event)みたいにできたらいいのにな >>83-84
thx
あるんだな・・・意義はわかんなくはないけど正直どうかと思うが・・・
あとでじっくり読んでみる >>86
getContextに対応するだけでいいの？
canvas自体に対応しないとあまりメリットなくない？
jQueryになれてるなら、D3.js を使うのが良いと思う
canvas操作をjQueryライクに書くことができる
俺も普段はjQueryを使うけど、canvasを操作したい場合はD3.jsを使うよ
こんなk何時
https://codezine.jp/article/detail/7459
> D3.jsのセレクタを用いて宣言的に記述すると、以下のように簡潔に記述することができます。
> d3.selectAll("p").style("color", "white");
> コードも、d3.selectAll("p")ですべてのp要素を取得、style("color", "white")で
> 文字色を白に設定、と直観的で分かりやすくなったのではないでしょうか。 >>86
> $(event)みたいにできたらいいのにな
$(window).on('mousemove', function(event) {
console.log(e.screenX);
console.log(e.screenY);
console.log(e.pageX);
console.log(e.pageY);
console.log(e.clientX);
console.log(e.clientY);
console.log(e.offsetX);
console.log(e.offsetY);
}); あ、間違った。
× console.log(e.screenX);
○ console.log(event.screenX);
以下同じ >>87
今だったらもしかしたらゲッターセッターになるのかもしれないけど
それらがJSに無かったころからCSSOMはあるしね
配列のlengthのようなものだよ array.lengthはちょっと違うのでは
array.lengthを書き換えても即座に自動的に書き換えられたりしないだろう するよ
TypedArray の様にゲッターやセッターではなく
プロパティアクセス時に0や１などと同等にフックして内部プロパティを変更してる JavaScriptって最近、変数に型つけたり、クラスを作ったりするらしいけど
もはやそれActionScriptじゃねーの？ >>94
昔ES3（ECMAScript 3）っていうのがあって、その後普及したのがES5
今はES6という名前だったのがES2015に変わって、ES2016だとかES2017だとか・・・
それは良いとして、ES3とES5の間にあったのがES4
ES4の夢は壮大で、クラスベースで型もあって・・・
そのES4に完全準拠することを目標にActionScriptは開発されていた
ところがES4の夢があまりにも無謀で破綻した。
そして型などの機能を減らして現実的にしたES5ができた
ActionScriptは破綻したES4相当なんだよ。消えたES4の成れの果て
JavaScriptに準拠しつつ型を取り入れたのはTypeScript A → B → C → D
とasync関数が繋がってるのをイメージしてください
Aから始まりEが完了すれば順にC、Bと完了してAに戻ってくるイメージです
ここで、Dの段階でBからの流れをやりたいとします
しかし、Dの次にBを続けると、
それまでのB → Cの流れの中で消費されているメモリが残ってしまいます。
もうDや過去のCやBに戻らせる必要はありません。
しかし、Dを開放してB'を開始すると、Aまで完了してしまい、それはよろしくありません。
A → B → C → D
まで来たところで
A → B → C → D → B' → C' → D'
となるのはメモリリークしやすく、チェーンが非常に長くなると色々なバグも発生しやすく
デバッグのしやすさにも関わってくるので避けたいです
とはいえ
A → B → C → D -...> B' → C' → D'と切り離すと
Aで行っている初期化・完了・例外処理から外れていってしまうため問題です
理想的には、チェーンをA → B' → C' → D'
とつなぎ直したいのです
どうしたらよいでしょうか 設計段階でみょうちきりんな動きの要求を加味しとけよ 仕様としては、どの処理進行状態でもリセット、ぶつ切り行為が発生しうるという状況です
一応今はBで作業キューを持ってそれにCを追加する形にしていますが、
いかんせんコードがキレイではありませんし、僅かな仕様妥協が入ります
おそらくPromiseのラッパー的なとこから、根本的な非同期チェーン構造を
素朴なPromiseではなく１から考え直して別の物にすべきだと思うのですが
いいアイディアは無いでしょうか
全てのasync、async generator関数でCancelの概念と実装をしたら良いのでしょうか
全てのawait時にそれがCancelかどうかチェックして処理をするとか
それはそれで漏らせないコードが多くなりそうですし、処理が複雑になりそうです
一応今は各処理にセッションを渡すようにしていて、表に影響がある処理ではそのセッションが切れていたら何もしないことで、
特にイベント等から繋がる不要なチェーンが発動しても空回りさせることで影響がないようにしています
今はメモリの開放は時間経過やイベントをあえて見捨てたチェーンに伝わらせて
空回りを利用して自然と勝手にほぐれて、その後GCが回収してくれることに頼っています
しかし、今回は下手に空回りもさせたくないという状況です
コードを極力シンプルに保ちながらしっかりしていてかつ柔軟性も持った非同期処理構造を作るにはどうしたらよいでしょうか
例えば非同期でも、場合によっては完了を待たずに次に進みたいことってありますよね
例えば、Loadingを表示するとき
await View.fadeInLoadImage()
let file = await Network.fetchFiles( )
await View.fadeOutLoadImage()
とするとフェードイン、アウトの時間が無駄なので
View.fadeInLoadImage()
let file = await Network.fetchFiles( )
View.fadeOutLoadImage()
とすると思います。ですが、このフェードが動いているときに
コンテキストがリセットされると、色々懸念事項が生まれます
そういうのもスマートに扱える方法を知りたいです ■ このスレッドは過去ログ倉庫に格納されています
