+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
・回答者同士のレスは原則禁止(>>6を参照)
・ライブラリの話題の投稿(>>6を参照)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ >>553
CSS でやるのが普通
方法はいくつかあるが flex が最も簡単だろう location.searchを手軽にjson化する標準APIってなかったでしたっけ？
なんかここで一度教えてもらった気がするんですが >>556
location.search はただの String 値なので、JSON化する余地はないと思うが String値もJSON化可能だよ
例えば`"abc"`はvalidなJSON >>558
そうかもしらんが、JSON.stringify(location.search); で解決する問題をわざわざ質問するかね… >>556
いや”key=value&”という形式をオブジェクトのkey-valueに変換してくれるやつを知りたいってことなんですが。 >>552
firebase functionとかそれっぽくね >>561
> いや”key=value&”という形式をオブジェクトのkey-valueに変換してくれるやつを知りたいってことなんですが。
key1=valueA&key1=valueB&key1=valueC
の場合にどういう結果を期待してるの？ IEやiOSのSafariで使えないし
知らなくてもしょうがないかな Polyfillがあるし、WHATWGで標準化もされてる
常に最新仕様を追いかける人なら知ってると思うよ 仕様を追いかけるのが悪いんじゃなくて
仕様を追いかけるのが目的となってるのが悪い むしろ目的でもないのに仕様を追っかけてる人の方が意味不明だが 必要になった時点で調べるんじゃ三流
普通は必要になる前から知っておく form要素の中に設置したラジオボタンのグループは
form要素.ラジオボタンに持たせたname
で取得できます
このグループはconsoleで確認するとRadioNodeListオブジェクトのようです
これはform要素の中にラジオボタンが格納された時にだけ作られる
特殊なオブジェクトのようですが
DOMツリーに組み込まれているのか、取得時に生成されているのか、
どっちなのでしょう？ 少し考えたらDOMツリーが最初からListを含んでるはずないと気づくだろ そうですか？
DOMツリーに詳しくないので分かりませんでした
コンテナとしてツリーに組み込まれていることもあるんじゃないかと思ったのですが、
そのたびごとに生成して返しているのですね
ありがとうございました どちらの考えも成り立つと思うが、>579の「ちょっと考えたら」は暴論な気がするな
実際、仕様のどこに書いてあるのか、を明示しないと本当の意味では解決にならない
(Array#length が動的に計算されるのか、静的データを参照するのか、という命題と似てる) RadioNodeList が継承する NodeListは
デフォルトでは live （静的でない）とDOM仕様に書いてある
特に静的とする記述はなかった（？）ような liveかどうかは関係ないでしょ
例えばa,b,cというオブジェクトとそれを含むツリーがあって
どこかにa,b,cへの参照を含むオブジェクトあっても、
それはツリーに含まれてるとは言えないから
つまりはこの問題はNodeListがDOMの木構造に含まれているかどうか
横着に言うとツリーを辿っていったときListに到達するかというと、
それはないなと分かる >>583
liveの実装はオブジェクトをキャッシュするだけで実現可能なので、liveな事が動的データである事を保証しているわけじゃないと思う >>584
ごめん、いってる意味が分からない
> どこかにa,b,cへの参照を含むオブジェクトあっても、
> それはツリーに含まれてるとは言えないから
なぜ？
> つまりはこの問題はNodeListがDOMの木構造に含まれているかどうか
ツリーに含まれているかどうかをどうやって判断するの？ async-await便利だけど意図せず無限ループに入っていても
気づかないのがちょっと心配。
プロダクションビルドしてみるとやたらメモリリークするようになってはじめて
発覚した。
この辺を気づきやすくする方法ってなんかないかな。 >>586
a.child==b,b.child==cの時、
[a,b,c]という配列を作ってもそれはツリーの一部ではないということ
ルートから辿れない物はそのツリーに含まれているとは言えない
そしてDOMツリーにListが含まれないことは自明
なぜならDOMツリーはNodeのツリーであり、NodeとはElementやTextであり、
NodeListは実際それらのサブクラスではないし、概念としてもかけ離れているから そもそも何で含む含まれないの区別をする必要があるんだっけ？ ただ単純な興味だろうよ
まあこの手の設計思想は勉強しておくと自分が設計する際のセンスに近い部分ととして表れるから、馬鹿にはできない javascriptは少々調子に乗りすぎたようだね
ここ１０年でごちゃごちゃと新機能入れ杉
ついていけねえよ そもそも最新のミドルからハイスペックの開発環境でしか確認してないクソ重いサイトが量産され過ぎなんだよ >>592
javascriptは少々調子に乗りすぎたようだね（個人の感想です）
ここ１０年でごちゃごちゃと新機能入れ杉（便利になりました）
ついていけねえよ（個人の能力です） 互換は有るわけで別についてきたくなかったらついていかなくても良い 13Mくらいのjsonがあるんだけど簡単に解析するツールってないかな。 Promise+awaitとかは一癖あるが、実際コールバック地獄に比べると格段に楽になれるので黙って覚える価値はある >>595
誤解を招く言い方は控えよう
>ついてきたくなかったら
ついてこれなかったら
だぞ >>597
かなり癖は強いよね。forEachとかと組み合わせると死ぬから
for文使わなきゃいけなくなるの辛い。
デフォルトasync functionになってくれればいいのに。 >>600
async func内で無名関数作ったら自動でasync func になるか、async funcにしないと警告するようにできないもんかね。
あとawait記入漏れも地味にきつい。これもlintツールでチェックして欲しい >>601
できるだろうけど、そうすると互換性がなくなるので
それならCoffeeScriptの二の舞いになって
結局使われなくなる asyncにし忘れはawait書いた時点で構文エラーになるんだから実際は問題ない
await書き忘れもちょっとしたミスで変数に意図しない型が入ってそのまま進んでしまうという
動的型付け言語のよくある問題点だしデバッグには慣れてるでしょ 15年ぶりにJavaScriptを弄る必要性に迫られ、過去でも怪しかった知識と技術力と現実が
さらにかけ離れて目が回ってます・・・先輩方おしえてくださいな。
【環境】自分の環境はWindosw10 Firefox55 サーバーにはUPせずローカルのみの用途です。
【何をしたのか】document.writeしたらその部分以外が出ないしbodyカラーさえなくなるしずっとローディング中になる
→innerHTMLにしろという情報を得たがこれって既にあるものを置き換えるだけで複数出力できなくね？？
【希望している仕様】
コンマ区切りのテキストファイルを読み込んで変数に出し、その変数の変化する数だけセレクトを出力
【コード】ネットに転がってるサンプルを改造してる。body前後は省略。
<body bgcolor="black">
<script type="text/javascript">
function getCSV(){
var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
req.open("get", "smp.csv", true); // アクセスするファイルを指定
req.send(null); // HTTPリクエストの発行 レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ
req.onload = function(){convertCSVtoArray(req.responseText); // 渡されるのは読み込んだCSVデータ}
}
// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
var result = []; // 最終的な二次元配列を入れるための配列
var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
var opel = document.getElementById("test");
// 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
for(var i=0;i<tmp.length;++i){
result[i] = tmp[i].split(',');
document.write('<option value="'+result[i][1]+'">'+result[i][1]+'</option>');
}
}
getCSV();
</script></body> とりあえずconsole.logでcsvの入力が処理できてるか確認したら？
そしたらcsv云々の質問はまるまるカットできる。
問題を切り分けるところから始めようか とりあえずパッと見て思ったのは
・document.writeは使うな
・XMLHttpRequestは使うな
・opel (#test)ってなんだ？使われてないが
・selectがないぞ
・CSVの構造がわからん
だな >>605
CSVの入力はできています。
＞document.writeしたらその部分以外が出ない
→document.write('<option value="'+result[i][1]+'">'+result[i][1]+'</option>'); ×CSV行数
＝<option value="[数字]”>[数字]</option>のタグになってるかはわからないですが
×CSV行数</option>前の数字は表示されているので。
というか・・・できるはずだと思っていたのですが、document.writeを書くと
真っ白になるんですよね、上記表示以外が。
consol使ったこと無いのでググってきます・・・ >>606
ありゃ失礼
・opel→innerHTMLに書き換えようとして設定した変数。
しかしinnnerHTMLではfor文で繰り返し出力ができないんじゃね？でdoument.writeに変えた
使い慣れてたし（化石）
・CSVの仕様
PerlCGIでよく使うログファイルといっしょ。UTF-8になってるが。
1,ねこ,くろ
2,いぬ,しろ
selectは消しすぎたごめん（改行多すぎって怒られた）
<body bgcolor="black">
<form method="post" name="info">
<div class="title">ろぐびゅーわ</div>
<div class="element-select">
<div class="small"><span>
<select name="id" >
<script type="text/javascript"> </script>
<script type="text/vbscript"> select要素拾って普通にlength増やしつつoption追加してけばいいんじゃないの？ 全部書くのめんどいからヒントっぽく書くと
var foo = '';
for(){
foo += '<option>';
}
select.innerHTML = foo;
ってすればいい >>611
できました！！
変数+=は初めて見ました。こんなのあるんですね。
みなさん感謝！ でも古臭くて今となっては誰もやらないやり方だからな みんなfoo=foo+"bar"って書いてるってこと？ document.write は、文書自体をすべて一旦破棄してから上書きするから、使うな
XMLHttpRequest は、jQuery の、ajax を使う。
初心者には、jQuery は必須だから、検索して
$("#test").text("hello world!");
「セレクタ.動作」の構文で、該当するセレクタすべてに対して、ある動作をする。
つまり、ループ処理と同じ DOM叩く(これも古いがinnerHTMLよりは新しいかな)か
VirtualDOM叩くフレームワーク使うかってことでは ローカルファイルは、node.js, electron とかを使う
csv ファイル読み込み関数なども、あるはず >>615
初心者にはjQuery必須とかいうのヤメレ
document.querySelector('#test').textContent = 'hello world!’; jQuery使わないにしても
test.textContext =
でいいのに何で冗長な書き方するかね Web制作板の癌はjQuery必須なんて馬鹿な落書きをしに巣から出てくんなよ XMLHttpRequestに変わる新しい通信方法があったはずですが思い出せません
誰か教えてください 621ですがすいませんfetch apiのことでした
ってことで〆 const o = document.getElementById('o');
const f = (n) => (e) => {
console.log(n, e);
};
o.addEventListener('click', f(1), false);
(n) => (e) =>っていう2個書く書き方をよく知らないんですがなんですかこれは？
なんでこれでnとeが使えるんですか？ >>623
const f = function(n){
return function(e){
console.log(n, e);
}
};
なので
o.addEventListener('click', f(1), false);
は
o.addEventListener('click', function(e){
console.log(1, e);
}
, false);
になる >>623
関数の戻り値がまた別の関数になってる
カリー化ともいう
nが使えるのはその戻り値の関数もまたのfの範囲内だから
ちなみに
const f = n => e => console.log(n, e);
でもいい
ただJavaScriptでカリー化することなんてあるか？
Haskellみたくデフォルトでカリー化されてるわけじゃないんだしメリットが見当たらん Underscore.js にも、curry ある window.alertなら文字列の"window.alert"
window.widthなら"window.width"のように
オブジェクトの名前を取得する方法ってありませんか？ >>618-619
一番単純な例を出してドヤ顔するのやめれｗ
jQueryはその一番単純な書き方で複雑なことができるんだよ
例えば
document.querySelector('#test').textContent = 'hello world!’;
に相当するjQueryの書き方は
$('#test').text('hello world'); だが
全てのclass=testの要素に文字を入れるのもほぼ同じ書き方でよい
$('.test').text('hello world'); > でいいのに何で冗長な書き方するかね
test.textContext = 'hello world';
$('#test').text('hello world');
jQuery使ったほうが短いっていうねｗ
なんで冗長な書き方するかね？ EdgeだとうごかないやんXMLHttpRrequest
node.jsってインストールとか言ってるけどなにこれJavaScriptファイルじゃないの？ node.jsはサーバー側アプリを作るものだから関係ない
まあ正確に言えばブラウザ用のJavaScriptファイルを
"ビルドして" 作ることも有るからサーバー用限定ではないが、
少なくともブラウザで直接動かすためのものじゃない >>625
> 関数の戻り値がまた別の関数になってる
> カリー化ともいう
それはカリー化ではない。
カリー化は、引数を取る普通の関数を
特殊な形式の関数に変換すること
foo(a,b,c) という使い方をするfoo関数を
foo2(a)(b)(c) という使い方ができる別の関数に変換すること
>>623は関数を返す関数ってだけなのでカリー化ではない
JavaScriptでカリー化をする必要はないっていうのは理解できるが、
関数を返す関数はときたま使う
ある関数に同じ引数を何度も渡すのであれば、
部分適用を行って何度も渡さないようにできるし、
別のもう少し具体的な例をだすと
[{a: 1, b: 2}, {a: 11, b: 22}, {a: 111, b: 222}] みたいなデータが有って
aの項目でソートするか、bの項目でソートするか、選べるようにしたい時
aでソートする関数、bでソートする関数の２つを作る代わりに、
ソートする項目名を引数にして「ソートする関数」を返す関数
なんてのを作る時に使う >>623
> (n) => (e) =>っていう2個書く書き方をよく知らないんですがなんですかこれは？
アロー関数が２つくっついたってだけなだな。
function(n) {
return n+1;
}
という関数を（thisの扱い以外）同等のアロー関数で書くと
(n) => {
return n + 1;
}
一行で書いて
(n) => { return n + 1; }
{}とreturnを省略して
(n) => n + 1
n+1の部分が (e) => { console.log(n, e) } だったら？
(n) => (e) => { console.log(n, e) } react学ぼうと思うんですがオススメの書籍教えてください >>634
あーごめん、変な間違いしてしまった
関数を返す関数は高階関数の範疇やね >>637
また間違えた
いや、確かに関数を返す関数は高階関数の範疇なんだけど、今回のケースは特に部分適用って言った方がいいな
厳密に参照透明にこだわりたいなら使うのも良いと思うけど、ほとんどクロージャで対応しちゃうなあ
>>623なら
const n = 1;
o.addEventListener('click', e => console.log(n, e), false);
で済むし、ソートする場合も
xs => _sort(xs, 'a')
みたいな無名関数で対応してることが多い
JavaScriptの部分適用は何か無理やり感があって個人的に苦手だ そんな貴方にこの仕様がオススメ
https://github.com/rbuckton/proposal-partial-application
今のままだと身になる可能性は５割程度
議論に参加し支援してStageを上げよう！ jQuery を使っていないと、各ブラウザに対応できないから、
自分で各ブラウザの違いを調べて、コーディングしなければならないから、無理
>>636
入門 React ――コンポーネントベースのWebフロントエンド開発、2015
WEB+DB vol.97 の特集が、React
WEB+DB vol.94 の特集が、Kotlin, Electron 各ブラウザの違いというけど今のモダンブラウザに違いは殆どないよ
逆に残っている違いってjQueryでも同じく対処が難しいなものばかり
（例えばfile選択キャンセルの監視とか）
あとはIEに対応するかどうかだけど、他にもAPIのポリフィル噛ますのと
同じようにIEにもポリフィル用意するほうが良いと思う o.addEventListener('click', function(e) {}, false);
ってするとダメで
const f = (e){}
o.addEventListener('click', f, false);
がメモリにいいとか無駄に関数が作られないとか何とか昔呼んだ気がするけど
理由はよく知りません >>641
> 各ブラウザの違いというけど今のモダンブラウザに違いは殆どないよ
そう思うならjQueryのソースコード見てみれば？
特定のブラウザ（機種）用のワークアラウンドがいくつも有る
仕様において違いはなくても、バグがあったりするわけ
特定の環境のみで起こるバグだから見つけるのは大変 >>643
そもそも全く同一に動かそうというのが間違いなのでは？
しかも普通その必要があればオーサリングツール使うよね ゲームのBGMで繋ぎ目が分からないシームレスなループ再生をしたいのですが一般的にはどんな方法がありますか？
Web Audio APIにはloopStartやloopEndがあるので可能ですがこれは短い音声の再生用でBGMには向かないとか・・・ 普通にaudio要素のloop属性や秒数指定で十分じゃないかと思うけど
本当に完璧に無くしたいんならAudioWorklet使うしか無いんじゃね >>647,648
ああその用途ならこれ、といったものは無さそう？
もう少し調べてなんとかしてみます ありがとうございました >>645
あんたが言ってるのは、同一じゃなくても（違いがあっても）
動いてるなら良いじゃないって話でしょ？
俺が言ってるのは、特定のブラウザだけバグや仕様の違いで
動かないって話だよ。
https://code.jquery.com/jquery-3.2.1.js
例えばms-プレフィックスがついて動かないとか
// Support: IE <=9 - 11, Edge 12 - 13
// Microsoft forgot to hump their vendor prefix (#9572)
セレクタのバグに対応する
// Support: IE8, Opera 11-12.16
// Nothing should be selected when empty strings follow ^= or $= or *=
// The test attribute must be unknown in Opera but "safe" for WinRT
// https://msdn.microsoft.com/en-us/library/ie/hh465388.aspx#attribute_section
とか
// Support: Chrome<29, Android<4.4, Safari<7.0+, iOS<7.0+, PhantomJS<1.9.8+
とか
// Webkit/Opera - :checked should return selected option elements
// http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
// IE8 throws error here and will not see later tests
とか
// Support: Safari 8+, iOS 8+
// https://bugs.webkit.org/show_bug.cgi?id=136851
// In-page `selector#id sibling-combinator selector` fails
とか 古いブラウザが大半だろうから、サポートしませんって言っても良いのかもしれないけどさ
jQuery使っておいたほうが安全だろ？
// Support: real iOS 8.2 only (not reproducible in simulator)
// `in` check used to prevent JIT error (gh-2145)
// hasOwn isn't used here due to false negatives
// regarding Nodelist length in IE
// Support: Firefox<24
// Workaround erroneous numeric interpretation of +"0x"
// Support: Chrome 14-35+
// Always assume duplicates if they aren't passed to the comparison function
// Support: Webkit<537.32 - Safari 6.0.3/Chrome 25 (fixed in Chrome 27)
// Detached nodes confoundingly follow *each other*
// Support: IE 9 - 11 only, iOS 7 only, Android Browser <=4.3 only
// Treat the template element as a regular one in browsers that
// don't support it.
// Support: Chrome <=35 - 45
// Webkit & Blink performance suffers when deleting properties
// from DOM nodes, so set to undefined instead
// https://bugs.chromium.org/p/chromium/issues/detail?id=378607 (bug restricted)
// Support: Firefox <=43 - 45
// Disconnected elements can have computed display: none, so first confirm that elem is
// in the document.
// Support: Windows Web Apps (WWA)
// `name` and `type` must use .setAttribute for WWA (#14901) >>651
ごめんけどあんたの気持ちは分からないや
今だってやってるプロジェクトで権利の関係でオールスクラッチで
当分Chromeでしか検証しないまま一応完成させて
その段階でFxやらEdgeやらモバイルで動かしてみたらなんの問題もなく動いたもの
仮にそこで何かに引っかかっても簡単な置換やなんかで済むだろうし
つうか長文載せないで今生きてるブサウザでの活きてる例をピックアップして挙げてよ
個人的にはIEには興味ないからそれ以外だとより説得力を感じる
特にChとFxの違いは勉強になるから教えて欲しい 長文？ 文章なんて書いてないよ。
これはjQueryのソースコードの中のコメント
こういうマイナーケースで問題が有ることは明らかになってる
ユーザーが使うブラウザのバージョンなんて指定できないからね。
あとはどれだけ見れる人が多いかどうか
問題が起きた時のクレームに悩まされるかどうか
予防していればクレームは減るよ。
あとからマイナーケースに悩まされる必要はなくなるよ
> 個人的にはIEには興味ないから
あんた個人の都合で物事を決めたりはしない
客観的なデータ。ユーザー数で考えよう まぁとりあえず、さも当たり前のように初心者に
さてjQueryを使いますって勧めるのはやめなよ。
とりあえずjQueryに頼らなくてもjsが使えるようになってから選択として
jQueryなりvue.jsなりlodashなり選択使を提示すればいい。
独善的にjQueryは標準装備ですと言うのはヤメテってだけ ■ このスレッドは過去ログ倉庫に格納されています
