+ 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/ >>508 でmatchで条件分岐がおすすめだけど超簡単にするなら「黄緑」を一旦「青」とかにしてから最後に戻すとかでもいいよ
ほほえましくてよきよき >>507
str='黄と黄緑と緑'
.replace(/黄緑/g, '<span style="color:greenyellow">$&<\/span>')
.replace(/黄[^緑]/g, '<span style="color:yellow">$&<\/span>')
.replace(/[^黄]緑/g, '<span style="color:green">$&<\/span>')
>>508-510
正規表現ぐらいもうちょい頑張れｗｗｗｗｗ
ぐぐりながらやってみたけど30分でできたぞｗｗｗｗｗ
>>511
最悪の回答ｗｗｗｗｗｗ >>514
だからほほえましくていいって書いたんだけどｗ >>514
あ、一旦「青」にするってのが、よくわからずやってた頃を思い出してほほえましくていいって意味です >>512
どう見ても>>508の足元にも及ばない 間違えてるのか？正常に動いてるように見える
正規表現ほとんど使わないからわからんわ [^緑] は「緑以外の1文字」だから /黄[^緑]/ だと「黄と」がヒットする
/[^黄]緑/ も同じ
なので結果は
<span style="color:yellow">黄と</span><span style="color:greenyellow">黄緑</span><span style="color:green">と緑</span>
ってなるはず jqueryでは
セレクタに要素を複数並べて要素の子孫の要素を選択することが出来ますが
このように要素を選択する方法は何というのでしょうか？ >>521
しかも文頭の緑と文末の黄にはマッチしないしな
ECMAScriptだと後読み出来たっけか >>506
おー。ありがとうございます
Progressイベントなんてあるんですね。
独自の処理にもそう言うの用意できるんですかね。 自前でonProgressプロパティに関数があれば呼び出してもいいし
EventEmitterみたいなモジュール使ってもいいし
DOMのカスタムイベント使ってもいいし >>524
後読みはES2018になりそう
現在モダンブラウザは要フラグ
>>525
async-awaitと組み合わせるのは工夫がいるよ
できればasync-generatorを使ってトランスパイルする >>508
ありがとうございます
その方法で出来ました ド素人ですみません
膨大なデータをJSONで書き出す処理をしようとしてます
大体1MBくらいで一区切りして、fs.writeFileで書き出して、for構文で繰り返す…
というような方法を取っています。
例えば10回繰り返すような設定をすると、処理が終わる度に1ファイル追加されるのですが
10回すべての処理が終わるまでファイルに何も書き込まれず、空っぽのままになります。
すべての処理が終わって初めて全てのファイルにデータが書き込まれる感じです
これが10ファイルくらいならいいのですが、大量に処理するときに困るので
毎処理ごとにデータが書き込まれるようにしたいです。
なにか方法があれば、お教えいただけると助かります >>529
fs.writeFile に渡す callback の中で
書き込みの続きを継続するようにすれば期待する動作が得られるかも？ みんなありがとう
ファイルへの書き込みが完了するまでループを一時停止する・・・と言う処理は可能でしょうか？
今はこんな感じです
var ループ回数 = 10;
for(var i=0 ; i > ループ回数; i++){
var データ = 膨大なデータを生成する関数();
fs.writeFile(ループ回数 + '.json', JSON.stringify(データ,'',' ') , function (err) {});
} >>521
トンクス
上手く行ってるように見えてたわ >>533
同期版のfs.writeFileSyncを使うかasync/await使うか fs-extraがpromise返すようになったから使っとけ IOは内部で並列度が抽象化され、タイミングが最適化されてるから完全な制御は無理 ファイルの読み込みでも、4つのファイルを、並列に読み込む for in使うとeslintに怒られるんですがなんか理由があるんですか？ そういうのは積極的に調べていって言語に詳しくなるチャンスにすべきだと思うよ
結論から言うとfor of Object.keys()を使う >>511
元々の文字列に「青」があったら破綻するのでは
バックスラッシュのエスケープシーケンスのように、構文規則を作っておかないと破綻する
>>540
配列に for-in を使っているのでは >>507>>511
自分もこれでやるけど、翫とか見たことないような漢字にしとけばいいよ
正規表現だとノット条件がないから[^翫]で近いことが出来るようになるし、これが早くて楽だった asyc-awaitつかってると使いたいところで使えないのが凄くもどかしい。
たとえばclassのコンストラクタで非同期処理を入れる方法ないかな。 プログラミングを初めて、
配列を知った人は、これ便利と配列ばっかり使いだします。
連想配列を知った人は、これ便利と連想配列をばっかり使いだします。
クラスを知った人は、これ便利とクラスばっかり使いだします。
asyc-awaitを知った人は、これ便利とasyc-awaitばっかり使いだします。 >>546
async関数はpromiseを返す関数だから
クラスのインスタンスを返すコンストラクタとは相容れない
まあ色々方法はあるけど、newして非同期にそれを改変するasync関数を用意するのが良いと思う
>>548
async-awaitばかりというのは悪くないと思うよ
ある特定の関数が開発していく途中でasyncにする必要が出てきたり必要が無くなったりもするしさ
そういうときawaitで受けてれば問題ないからね Face Detectionのライセンスがわかる方いますか？
もしくは顔検出出来るライブラリで他に商用利用可能なものがあったら教えていただきたいです firebaseってサーバーサイドで
node.jsなどを動かすことできますか？ セレクトボックスAとBが横に二つ並んでいます
それぞれにJavaScriptで動的にoptionを追加したところ、BがAの下に移動してしましました
横に並べたまま要素を追加したいのですがどうすればいいでしょうか >>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"> ■ このスレッドは過去ログ倉庫に格納されています
