+ JavaScript の質問用スレッド vol.119 +

1 名前：デフォルトの名無しさん [2016/03/09(水) 00:58:36.45 ID:S0itb4sM.net] JavaScript を自ら学ぶ人のための質問スレッドです。 >>2-5のテンプレを読んだ上で質問してください。 ■質問を書く上で (1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。 (2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。 　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など) (3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。 (4) 常に自発的に調べる心構えを持ってください。 　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。 　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。 (5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。 (6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。 　　※必ず「問題の事象が再現されること」を確認してください。 　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。 (7) サンプルコードに HTML が含まれる場合は validator.w3.org/ で [Check] してみてください。 (8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。 (9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。 (10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 2 名前：デフォルトの名無しさん mailto:sage [2016/03/09(水) 01:00:06.15 ID:S0itb4sM.net] ■質問テンプレート 【環境】OS, 実行環境をバージョンと共に記入してください。 【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。 【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用) 【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。 【サンプルコード】現象を再現可能な最小限のコードを書いてください。 　1レスに収まらないならコード投稿サイトを利用してください。 　jsdo.it/　jsbin.com/　jsfiddle.net/　ideone.com/ ■前スレ + JavaScript の質問用スレッド vol.118 + [転載禁止](c)2ch.net echo.2ch.net/test/read.cgi/tech/1429634108/ ■過去スレ全集（Web制作） www2.atpages.jp/mirror/2ch/javascript/ usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ) ■テンプレ案（Web制作） fiddle.jshell.net/fH4cC/167/show/light/ ■関連スレ ECMAScript デス 4 peace.2ch.net/test/read.cgi/tech/1325448978/ JavaScript ライブラリ総合質問所 vol.4 peace.2ch.net/test/read.cgi/hp/1400834117/ CSS初心者スレッド＝13th＝(c)2ch.net peace.2ch.net/test/read.cgi/hp/1423959729/ Canvasについて語ろう peace.2ch.net/test/read.cgi/hp/1305093769/ 3 名前：デフォルトの名無しさん mailto:sage [2016/03/09(水) 01:00:44.46 ID:S0itb4sM.net] ■FAQ fiddle.jshell.net/vSqKr/43/show/ ■開発者ツール(Developer Tools)の基本的な使い方 (全部は fiddle.jshell.net/vSqKr/43/show/#Browser-Developer-Tools ) ◆諸注意 - 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。 - IE9- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと 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 型の中身をそのまま表示してくれます。) 4 名前：デフォルトの名無しさん mailto:sage [2016/03/09(水) 01:01:12.81 ID:S0itb4sM.net] ■各種仕様 ( fiddle.jshell.net/vSqKr/43/show/#Link も参照 ) ◆ Standard ECMA-262 bclary.com/2004/11/07/ (ECMAScript 3 HTML版) https://web.archive.org/web/20140715002617/www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ (ECMAScript 3 和訳) www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版) tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳) people.mozilla.org/~jorendorff/es6-draft.html (ECMAScript 6 有志HTML版) kangax.github.io/es5-compat-table/ (ECMAScript 5 compatibility table) kangax.github.io/es5-compat-table/es6/ (ECMAScript 6 compatibility table) ◆ HTML Standard (HTML5) www.whatwg.org/specs/web-apps/current-work/multipage/ momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳) www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) ◆ Document Object Model (DOM) / CSS Object Model (CSSOM) www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳) www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events) www.w3.org/TR/uievents/ (UI Events) www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳) www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳) ◆ その他のWeb関連仕様 domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等) www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳) www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳) www.whatwg.org/specs/ (WHATWGの仕様一覧) ◆ MDN (Netscape/Mozilla) https://developer.mozilla.org/ja/docs ◆ MSDN Library https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API) msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript) msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript) msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML) 5 名前：デフォルトの名無しさん mailto:sage [2016/03/09(水) 01:01:55.31 ID:S0itb4sM.net] ■各種仕様 (続き) ◆ JavaScript Garden (ja) bonsaiden.github.com/JavaScript-Garden/ja/ ◆ JSON (JavaScript Object Notation) www.json.org/json-ja.html ■諸注意 vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の質問はvol.116から禁止されました。 vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。 本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。 ライブラリの質問はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。 6 名前：デフォルトの名無しさん [2016/03/09(水) 03:00:01.13 ID:6uZQGjqP.net] hayabusa6.2ch.net/test/read.cgi/pc2nanmin/1439353617/216 　　　　　　　 ↑　↑　↑　↑　↑　↑ 7 名前：デフォルトの名無しさん [2016/03/14(月) 08:46:07.23 ID:RZ1GsRz+.net] 誰かいませんか？ 8 名前：デフォルトの名無しさん mailto:sage [2016/03/14(月) 10:15:53.45 ID:h0SaP8VW.net] いますよ。ずっと。あなたの後ろに。 9 名前：デフォルトの名無しさん mailto:sage [2016/03/14(月) 10:50:06.69 ID:t/84a/RD.net] いま来ました 10 名前：デフォルトの名無しさん mailto:sage [2016/03/14(月) 11:03:34.88 ID:h0SaP8VW.net] 宇宙からのメッセージです 11 名前：デフォルトの名無しさん mailto:sage [2016/03/14(月) 11:20:27.58 ID:JjlziuNG.net] 前スレが消化されてから人も増えるかと 12 名前：デフォルトの名無しさん mailto:sage [2016/03/20(日) 19:33:23.36 ID:0939kaIS.net] JQueryみたいなライブラリを使わずに非同期APIを同期的に実行する良い方法は有りませんか？ 13 名前：デフォルトの名無しさん mailto:sage [2016/03/20(日) 20:03:50.21 ID:evsTqtHC.net] Promiseでラップするのが無難 14 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 04:13:33.83 ID:lwkXzPK7.net] >>12 Promiseに対応していない古いブラウザでやるなら bluebirdというライブラリを使うといい。 標準のPromise機能に加え便利メソッドが増えている。 15 名前：デフォルトの名無しさん [2016/03/21(月) 07:35:25.86 ID:fN+PxOXs.net] javascriptでクローラは作れますか？ 具体的には画像のダウンローダーを作りたいです。 下位階層まで根こそぎ取ってくるようなものです。 node.jsで作れるとあったのですが 16 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 07:36:57.38 ID:lwkXzPK7.net] 初心者がよく言うセリフ ○○言語で△△は作れますか？ 作れない言語なんてまず無いよ。 17 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 08:47:44.94 .net] >>15 まんま本出てるから大丈夫よ 18 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 09:22:30.77 ID:Xz9aFOH3.net] >>14 ライブラリを使わずにって書いてあるのが読めない人ですか？ 19 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 09:35:52.01 ID:lwkXzPK7.net] >>18 読めないんじゃなくて、読まない。 20 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 09:51:19.79 ID:Xz9aFOH3.net] >>19 つまり、ヴァカってことですね。 21 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 09:52:34.56 ID:lwkXzPK7.net] >>20 それは論理的じゃないな。 なぜ読まない＝馬鹿なのか？ 22 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 10:11:23.87 ID:Xz9aFOH3.net] >>21 馬鹿は口を閉じてるといいよｗ 23 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 10:21:00.80 .net] jQueryの話しようぜ 24 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 10:25:47.94 ID:lwkXzPK7.net] >>23 了解 25 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 10:42:07.02 ID:Xz9aFOH3.net] >>24 馬鹿は口を閉じてるといいよ 26 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 11:57:05.09 ID:Q2tTgw28.net] では聞こう。JQueryの定義とはなんだ？ 27 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 15:29:23.97 ID:lwkXzPK7.net] JQueryじゃなくてjQueryな 28 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 22:05:08.28 ID:iER/zWdn.net] >>23 なんでIDないの？ 29 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 22:51:19.14 ID:gUE5p+TD.net] Idが出ないと死ぬっていう都市伝説 30 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 22:57:43.40 ID:hs33rQ/Z.net] >>15 クローラーは、Rubyだろ。 paiza.IO で、それっぽいコードをよく見るけど まあ、Electron(Node.js + Chromium)でやりたいなら、やれば？ 31 名前：デフォルトの名無しさん [2016/03/21(月) 23:22:13.08 ID:isb2gyBM.net] ページにテキストフォーム、セレクトメニュー、チェックボックスが多数ありまして 保存ボタンを押すとcookieを保存して、読み込みボタンを押すとcookieが読み込まれる というページを作りたいです。 javascriptでnameを一つ一つ指定して保存するような感じでなら出来たのですが、 今後要素が増えるたびにcookieの方も調整するのが面倒だと思いました。 ページ全体の状態をまるごとcookieに保存するのに簡単なコードの書き方などありますでしょうか？ jQueryでも何か簡単な方法はないかと探しているんですが初心者なのでいまいちわからないです よろしくお願い致します。 32 名前：デフォルトの名無しさん mailto:sage [2016/03/21(月) 23:31:41.43 ID:hs33rQ/Z.net] cookieには、そんなに大きいデータは入れられない。 せいぜい、1KB以下まで HTML5のWeb Storage でオフライン環境に、キャッシュを保存する 33 名前：デフォルトの名無しさん mailto:sage [2016/03/22(火) 01:14:15.87 ID:UN51cu0Y.net] では問おう。状態とは何か？ 34 名前：デフォルトの名無しさん [2016/03/22(火) 01:20:20.54 ID:rdrmg4XV.net] ドラゴンブックを読んで状態数の削減を実装する。 35 名前：デフォルトの名無しさん mailto:sage [2016/03/24(木) 00:38:34.81 ID:YyzBD89/.net] promiseを返す関数a b cがあるとして aのpromiseが終わったらbを実行 bのpromiseが終わったらcを実行 cのpromiseが終わるまでaの呼び出し元で待機 みたいな処理をネスト控えめに書けますか？ 36 名前：デフォルトの名無しさん mailto:sage [2016/03/24(木) 00:50:23.16 ID:QUxdzUzn.net] >>35 それが出来るのがプロミスだろうが！ 37 名前：デフォルトの名無しさん mailto:sage [2016/03/24(木) 01:10:42.04 ID:Dc6NU6wk.net] 呼び出し元で待機、の解釈によるけど返ってきたインスタンスを指すなら可能 そのコード位置からの同期処理の再開を指すならasync/await使わないと無理 38 名前：デフォルトの名無しさん mailto:sage [2016/03/24(木) 02:23:12.67 ID:vscoeD/v.net] async/awaitはPromiseを使った処理をもっと簡潔に書けるように JavaScript構文を改良したものなんだから、 async/awaitでできるならばPromiseでもできるんだよ。 39 名前：デフォルトの名無しさん [2016/03/24(木) 14:33:45.16 ID:yOLyGMcJ.net] javascriptでi osとアンドロイド両方のスマホアプリは作れます？ 作れるとしたらデメリットは有りますか？ 遅いですとか 40 名前：デフォルトの名無しさん [2016/03/24(木) 14:49:26.54 ID:v9bzQn8L.net] 質問 let ar = []; let br = ar; ar.unshift(0); とか ar.push(0); とかしても br は ar と常に同じ配列を参照してる事は保障されてる？ 41 名前：デフォルトの名無しさん [2016/03/24(木) 15:17:29.36 ID:yOLyGMcJ.net] 後もう一つ質問なんですが、node jsで画像のダウンローダーっぽいものは作れますか？ 42 名前：デフォルトの名無しさん mailto:sage [2016/03/24(木) 22:40:22.01 ID:sBlWvTvY.net] JavaScriptのスレッドモデルがよくわからんのだけど JavaScriptのコードとして書いた部分はUIスレッドで実行されるって保証されてるの？ C#で言うとBeginInvokeした時のよう考えていいのだろうか p = 非同期API(); q = 非同期API(); p.done(A); q.done(X); p.done(B); と書いた場合に別スレッドで実行されるのはあくまで非同期APIだけで AとBとCはPromise使おうがsetTimeoutしようが単に後回しにされるだけで結局全部UIスレッドで実行されるから絶対に衝突しないって事でいいの？ 43 名前：デフォルトの名無しさん mailto:sage [2016/03/25(金) 01:13:56.64 ID:Y9GDVUzX.net] >>39 作れる デメリットは変換に使うプラットフォームの仕様やバグに付き合う必要があること >>40 されてる その場合brが参照しているのはarじゃなくて配列自身 >>41 作れる >>42 だいたい最終行の理解で合ってる シングルスレッドでレンダリングとキューの消化を交互に繰り返してる感じ 44 名前：デフォルトの名無しさん [2016/03/25(金) 11:11:25.08 ID:eOfUcnNe.net] HTMLでラインみたいなチャット画面作ってるのですが、フッターに設置したテキストボックスをタップするとキーボードでテキストボックスが隠れてしまいます どうすればよいでしょうか？ ちなみにコントローラはjsです 45 名前：デフォルトの名無しさん mailto:sage [2016/03/25(金) 21:00:38.71 ID:N0KH+ld0.net] 隠れないように、または隠れても見える位置までスクロール出来るように余裕を取る 46 名前：デフォルトの名無しさん mailto:sage [2016/03/26(土) 13:53:31.01 ID:GwvfWp/j.net] >>44 Android 5.1.1 Google Chrome で再現できない https://jsfiddle.net/nL82196v/ 現象を再現可能なコード、対象ブラウザ名及びバージョンは？ 47 名前：デフォルトの名無しさん [2016/03/26(土) 15:24:40.02 ID:KP7AUrYI.net] nodejsってnodejs側のプロンプトを使うんですか？ win側のプロンプトを使うんですか？ 48 名前：デフォルトの名無しさん mailto:sage [2016/03/26(土) 16:39:24.78 ID:hZGT0ViJ.net] >>47 というと？ 49 名前：デフォルトの名無しさん mailto:sage [2016/03/26(土) 19:19:26.98 ID:2IjmMYr5.net] ページの全状態を保存したい 閉じて再び開いたときに元の状態に戻したい なんとかなりませんかねこれ 50 名前：デフォルトの名無しさん mailto:sage [2016/03/26(土) 21:28:37.50 ID:AMZqaLeO.net] >>49 DOMの内部状態は再現できないのでどうにもならない 最初からなんとかするように作れ 51 名前：デフォルトの名無しさん mailto:sage [2016/03/26(土) 22:31:52.28 ID:5qdFWVjA.net] amazonのこれから開催予定のセールのページで 商品一覧で商品のタイトルにspan id="dealTitle" がそれぞれ使われてるんですけど、idって重複していいんですか？ 52 名前：デフォルトの名無しさん mailto:sage [2016/03/26(土) 23:56:34.06 ID:nOSHwcxN.net] >>49-50 RoR, CakePHP などのフレームワークでは、 フォーム送信のvalidateで、入力エラーがあると、 フォームに入力した内容も、消されずにそのままになっているけど、 これはサーバーサイドだからな クライアント側で、前の画面を保存するには、 入力内容をファイルで保存するしかない 53 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 03:48:09.52 ID:HhHg2DAX.net] >>52 だから最初からそう言ってんだよ出しゃばり 54 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 07:23:56.73 ID:60dasars.net] localStorage使えばええんちゃうの 55 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 09:50:21.72 ID:MdJCnp0Y.net] Viewはシリアル化不可能だからModelをシリアル化可能にするしかないのかな そしてViewの状態をModelから関数的に復元できるように設計にしなければならないと 56 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 10:03:52.53 ID:HhHg2DAX.net] データ変更イベントで全部制御すればよし 開始時は全てが変更とみなす これでDOMイベントもwebsocketもstorageイベントも全てに対応だ 57 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 10:25:36.38 ID:/vjbvHhC.net] var org ="全100件・・・_全120件..._全45件_'''" var ret =org.replace( /(全)(\d+)(件)/g, "$1" +"/"+ ("$2"-0+1)+"/"+"$3" ) ret の値 期待→　全/101/件・・・_全/121/件..._全/46/件_''' 実際→　全/NaN/件・・・_全/NaN/件..._全/NaN/件_''' 正規表現の置換ですが　"$2”を　数値に変換して値を１増やすことができません。 parseInt、Numberを使ってもおなじでした。 解決方法ご存知の方がいましたら教えていただければ幸いです。 58 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 12:19:54.26 ID:x3ePCErE.net] >>49 そういうのはブラウザ側に任せるべき領分(セッションの復元)だと思うのだけど。 どうしてもやりたいなら、 - focusの記録(localStorage) -スクロール位置の記憶(localStorage) - JavaScript機能の状態をhashに記録(pushState) - ログイン状態の記録(Cookie、サーバサイド処理) 59 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 12:24:40.83 ID:UR7Ecaqc.net] replaceの第二引数が "$1/NaN/$3" になっててそもそも$2が消えてるな 文字列じゃなくて関数突っ込んでその第三引数を変更するのがいいと思うよ 60 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 12:25:14.33 ID:x3ePCErE.net] >>57 replaceのコールバック関数で受け取るか、while, execでキャブチャした変数から作り直すか 61 名前：57 mailto:sage [2016/03/27(日) 14:39:03.13 ID:/vjbvHhC.net] >>59,60 こんな感じでしょうか？ var org ="全100件・・・_全120件..._全45件_'''" var ret =org.replace( /(全)(\d+)(件)/g, function( matchText, ref1, ref2, ref3, position, self) { return ref1+((ref2-0)+1)+ref3; } ひとまず、期待通りの動きができています。 アドバイスありがとうございました。 62 名前：デフォルトの名無しさん [2016/03/27(日) 16:17:42.83 ID:wSRwnaYP.net] node jsでリクエストモジュール（最初から入ってますよね？）を使って画像取ってきたいのですが、 var my = require('絶対パズ/request'); console.log(my); としてもモジュールにアクセス出来ないというエラーが出るんですが、なぜでしょうか？ 他の問題でしょうか？ あと、requestモジュールは、インストールはされている状態なのでしょうか？ 63 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 18:10:03.43 ID:s1WEC1Fp.net] >>61 無駄な変数が多いな。 var org = "全100件・・・_全120件..._全45件_'''" var ret = org.replace( /(?<=全)(\d+)(?=件)/g, function(num) { 　return parseInt(num)+1; }); ES6を使うのならば更に短くなるけど var ret = org.replace( /(?<=全)(\d+)(?=件)/g, num => parseInt(num)+1) 64 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 18:54:15.04 ID:UR7Ecaqc.net] >>62 まずバンドルされてるのはhttpね 次にパズじゃなくてパス（Path） そんでglobalのモジュールは名前だけでrequireできる nodeスレのテンプレに初心者向けのリンクがあるから目を通すといいよ 65 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 19:49:01.73 ID:bXTz64zw.net] この言語ってイベントはdomにしかないのか 66 名前：デフォルトの名無しさん [2016/03/27(日) 20:32:51.88 ID:+zvcgvl1.net] そもそもタスクキューが言語レベルで定義されたのがES2015からだからね Promiseで使われてる 67 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 20:42:59.04 ID:HhHg2DAX.net] >>65 どうしたらそんな馬鹿な結論に 68 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 21:44:33.38 ID:bXTz64zw.net] >>67 自作クラスにイベント定義しようとして方法をググったらdocument.createEvent使えって書いてあったからそういうもんなのかなと .NETみたいな汎用的なマルチキャストデリゲートはないのかな 69 名前：デフォルトの名無しさん [2016/03/27(日) 21:59:43.14 ID:mBj9pM3F.net] 現状ESの範囲でやるならPromiseを利用するしかない。 因みにdocument.createEventは古過ぎて非推奨なやり方。 今はEventコンストラクタを使う。 70 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 23:43:22.80 ID:HhHg2DAX.net] >>68 jsは元からdelegate的にthis付けて関数渡せるからいらん と言うかそう言う意味のイベントなんて わざわざ言語に入れてる方が珍しい スレッディングが問題ならsetTimeout 71 名前：デフォルトの名無しさん mailto:sage [2016/03/27(日) 23:59:58.48 ID:HhHg2DAX.net] なぜPromiseが出てくるんだ？ 72 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 00:15:44.30 ID:2h3yopdG.net] node.addEventListener("xxx", function (e) {xxx();}); node.addEventListener(... とか書くの超だるいじゃん node.onxxx += (e) => xxx(); node.onxxx += ... って書ければいいじゃん つかDOM要素以外はaddEventListenerが定義されてないからそこから書かなきゃだしもうやだ 73 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 00:33:41.97 ID:qkrUQjq7.net] >>72 node.addEventListener("xxx", xxx); 74 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 00:43:14.68 ID:jP0nw9w8.net] >>68 nodeならEventEmitterを使えばいいよ。 EventEmitter2とかならブラウザでも動くらしいけど このスレに居るやつはブラウザで動くJavaScriptのことしか 知らないから、よく現実的ではない回答がでてくるので注意。 75 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 00:45:19.83 ID:jP0nw9w8.net] >>65 > この言語ってイベントはdomにしかないのか DOMは言語じゃない。 ブラウザが用意しているライブラリにすぎない。 76 名前：デフォルトの名無しさん [2016/03/28(月) 02:04:57.93 ID:NypY0af3.net] XMLHttpRequestについて勉強しています。 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { 　if (xmlhttp.readyState == 4) { 　　if (xmlhttp.status == 200) { 　　　/*この内容を関数外から参照したい*/ 　　　var data = JSON.parse(xmlhttp.responseText); 　　} 　} } xmlhttp.open("GET", "test.json"); xmlhttp.send(); alert(data); /* こんな感じで表示したい */ これでJSONファイルから値を取得できるのですが、 function()外からdataの値を参照するにはどうすればいいのでしょうか？ 上記のalertに値が入る方法を教えて下さい。 77 名前：デフォルトの名無しさん [2016/03/28(月) 04:22:27.57 ID:+hSVfs2f.net] >>71 setTimeoutもD(B)OM APIだから。 JobキューによるイベントループがES言語レベルで定義されたのはES2015からで、 それにアクセスできるのはPromiseしかない。 他は全部外様な物。 >>76 コールバックを勉強 78 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 07:34:18.85 ID:Kq+xA51M.net] >>74 ブラウザについてだけ言ってるレスってどれ？ 79 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 07:38:22.67 ID:Kq+xA51M.net] >>77 タスクキューはイベントとは別 そもそもそれ自体は簡単に実装できるし 80 名前：デフォルトの名無しさん [2016/03/28(月) 14:08:14.84 ID:bQjH0a26.net] >>64 どうもありがとうございます。 そっちのスレも見てみます 81 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 14:12:43.07 ID:AqyD+FoJ.net] >>76 グロバル変数 82 名前：76 mailto:sage [2016/03/28(月) 15:21:37.64 ID:NypY0af3.net] >>77 コールバックってreturnで返すやつですよね？ >>76のソースで言う var data = JSON.parse(xmlhttp.responseText); の後に、 return data; を書いても受け取り方が分かりません。 xmlhttp.onreadystatechange = function () としているわけですし・・。 >>81 グローバル変数って関数外で変数宣言しますよね？ var json_data; var xmlhttp = new XMLHttpRequest(); 〜中略〜 var data = JSON.parse(xmlhttp.responseText); json_data; = data; としてjson_dataに代入されません。 XMLHttpRequestを使ったやり方では違うんですかね？ マニュアルを何度も見たのですが、この辺がよくわかりません・・・ 83 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 15:29:23.31 ID:8nd4zd+D.net] var dataって変数消しな 84 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 15:35:31.52 ID:UwAduPwe.net] 分岐するので非同期通信では無理 同期通信にしないと返り値はとれないよ 85 名前：デフォルトの名無しさん [2016/03/28(月) 16:19:51.96 ID:3hfk1W8A.net] >>79 そりゃ同期的なものなら幾らでもできるが、 DOMイベントとか一般的な非同期なイベントはESの範囲では表現できない。 ただしPromiseを活用することでできる。 86 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 17:12:03.19 ID:5Y2MOZMB.net] >>82 代入するまで処理を停止させるんですから、まさに同期通信の挙動ですよね 他の方もいってますが、同期通信にしては？ 87 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 17:18:33.22 ID:To6NOCCD.net] >>82 素朴な疑問なんだが、dataに代入してるその部分でalert(もしくはalertにあたる処理)しちゃいかん理由があるのだろうか？ 88 名前：76 mailto:sage [2016/03/28(月) 17:31:19.89 ID:NypY0af3.net] >>86-87 クラスや関数の中でJSONのデータを取得して、それを関数外から参照したいのです。 なんか根本的に間違ってるんですかね・・。 JSONファイルの内容って非同期通信以外でも取得できるのかも・・。 とにかく、>>76のコードではどうやっても無理という結論で良いのでしょうか？ 89 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 17:44:30.66 ID:szf/wSg3.net] >>88 流れを良く追ってないが、 > xmlhttp.send(); は非同期通信なので、呼び出し後データを受信する前に処理はすぐに下に遷移する。 > alert(data); /* こんな感じで表示したい */ なので、この行ではまだデータは受信していない。 Ajaxの受信完了時に > var data = JSON.parse(xmlhttp.responseText); が実行されるが、そもそも>>76のコードが一つの関数なら、もうその関数の 実行は終わってるわけでreturnなどはできない。 ではどうするかというと、>>76がfunc()の中だとして、 ・var data = ...の行の下に処理を書く ・global_data = としてグローバル変数に入れる（もちろん、受信前は空） ・funcにcallback関数を引数で渡す var my_callback = function(data) { //dataを参照する処理 }; があったとして、 func = function(callback_func) { ... var data = JSON.parse(xmlhttp.responseText); callback_func(data); ... } func(my_callback); で呼び出す。 90 名前：デフォルトの名無しさん [2016/03/28(月) 17:45:50.00 ID:3hfk1W8A.net] 同期XHRはWorker以外では極めて非推奨だから非同期を使うしかない 非同期を使うとそのようには書けない ただジェネレータやasync/awaitを使って同期的に書くことは出来る おまけで言うなら onreadystatechangeではなくonloadを使い、 JSON.parseではなくresponseType='json'を使うのが今流 そしてさらにモダンなのがfetch どのみち非同期的な書き方に慣れたほうがいい 91 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 18:09:19.03 ID:UwAduPwe.net] 生産性と利便性を考慮するなら jQuery ajaxを使った方がいいと思う 学習目的なら流してね 92 名前：76 mailto:sage [2016/03/28(月) 18:19:55.16 ID:NypY0af3.net] >>89 かなり詳しくありがとうございます。以下の様なコードに変更しました。 var my_callback = function(data) { alert(data);/* dataの中身が表示される*/ 　return data;/*これでは無理*/ }; func = function(callback_func) { 　var xmlhttp = new XMLHttpRequest(); 　xmlhttp.onreadystatechange = function () { 　　if (xmlhttp.readyState == 4) { 　　　if (xmlhttp.status == 200) { 　　　　var data = JSON.parse(xmlhttp.responseText); 　　　　callback_func(data); 　　　} 　　} 　} 　xmlhttp.open("GET", "test.json"); 　xmlhttp.send(); } /*コールバックが実行される*/ func(my_callback); /*my_callbackをreturnにした場合*/ var hoge = func(my_callback); alert(hoge);/*何も表示されない*/ コメントにも記述していますが、my_callback内でalertをすればアラートが表示されます。 しかし、my_callbackの内容を受け取りたいとしてreturnをした場合は表示されません。 関数外から参照するのは無理なのでしょうか？ 93 名前：76 mailto:sage [2016/03/28(月) 18:22:49.16 ID:NypY0af3.net] >>90-91 フリーのプラグインなど、jQuery使っていないものがありまして、 そういうプラグインをカスタマイズして、JSONファイルの内容を参照し、 そのプラグインに組み込みたい、というのが最終目的です。 ですので、非同期通信やJavascriptの基礎から勉強しているのですが、 理解が乏しく、皆さんのアドバイスを正確に受け取れていない状態です・・・ 94 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 18:31:35.81 ID:szf/wSg3.net] >>92 > 関数外から参照するのは無理なのでしょうか？ my_callback()もfunc()の外側なんだが・・・。 つまるところ、自分が参照したい全ての所から参照できる変数global_dataを作って、 > var data = JSON.parse(xmlhttp.responseText); のかわりに > global_data = JSON.parse(xmlhttp.responseText); とやればいいだけの話。 ただし問題は、いつglobal_dataにデータが設定されるかわからない所。 95 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 19:45:04.22 ID:UwAduPwe.net] >>93 var getJson = function() { var x; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { x = JSON.parse(xmlhttp.responseText); } } xhr.open('GET', 'test.json', false); xhr.responseType = 'JSON'; xhr.send(null); return x; }; var data = getJson(); jQuery ajaxを使った方がいいと思うけど 96 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 19:48:00.76 ID:UwAduPwe.net] 訂正 誤：x = JSON.parse(xmlhttp.responseText); 正：x = JSON.parse(xhr.responseText); 97 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 20:51:31.44 ID:To6NOCCD.net] >>92 手続き型っぽい書き方あきらめたらどうだ？ returnする目的って、要はその下でなんか呼びたいんでしょ？ フリーのプラグインとやらを、そこで初期化したらどうなの？scriptタグ書くとかして。あんまり勧めないけど。 プラグインって何なの？ 98 名前：デフォルトの名無しさん [2016/03/28(月) 21:12:37.35 ID:surT/WgL.net] １つ間違いなく言えることは今新しくjQuery ajaxを使うより fetchのポリフィルを使ったほうがベター。 99 名前：デフォルトの名無しさん mailto:sage [2016/03/28(月) 21:13:11.47 ID:Kq+xA51M.net] >>85 いや実装できるよ何をおっしゃてるのか… 100 名前：デフォルトの名無しさん [2016/03/28(月) 21:43:03.94 ID:surT/WgL.net] >>99 何をどう使えば実装できると言うの？ 簡単でいいから教えて。

---

---

[ 続きを読む ] / [ 携帯版 ]

read.cgi ver5.27 [feat.BBS2 +1.6] / e.0.2 (02/09/03) / eucaly.net products.
担当:undef