+ JavaScript の質問用スレッド vol.131 +
: Name_Not_Found [sage] 2017/11/21(火) 21:58:33.01ID:??? JavaScript を自ら学ぶ人のための質問スレッドです。 次スレはが(本スレで改善案があれば考慮して)立ててください ■規則/推奨ルール ・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止) ・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。 ・質問テンプレートの利用推奨。 ・質問への「答え」だけでなく「意見」を出しても良い。 ■禁止行為 ・丸投げ質問 ・迷惑スクリプトの質問 ・オレオレ用語の使用(一般的な用語を使用する事) ・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事) ■質問テンプレート 【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4) 【条件】期待する回答の条件を書いてください。(ex: jQuery不可, フレームワーク不可) 【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。 【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用) 【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。 【サンプルコード】現象を再現可能な最小限のコードを書いてください。 1レスに収まらないならコード投稿サイトを利用してください。 ttp://jsdo.it/ ttp://jsbin.com/ ttp://jsfiddle.net/ ttp://ideone.com/ ■回答者へ ・回答には多様性があります。他人の回答を尊重してください ・動作ブラウザや環境が限られる場合は、それを明記してください ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください ・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い ・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです : Name_Not_Found [sage] 2017/11/21(火) 21:59:12.78ID:??? ■FAQ ttp://fiddle.jshell.net/vSqKr/44/show/light/ ◆開発者ツール(Developer Tools)の基本的な使い方 (全部は ttp://fiddle.jshell.net/vSqKr/44/show/light/#Browser-Developer-Tools ) ▼諸注意 - 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。 - Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません) - Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。 ttps://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 型の中身をそのまま表示してくれます。) : Name_Not_Found [sage] 2017/11/21(火) 21:59:43.39ID:??? ■FAQ(続き) ◆JavaScriptの実行速度 JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。 速度の疑問解消の為に ttp://jsperf.com/ にコードをUPしてブラウザ毎に速度計測する事を推奨します。 例外として、仕様における理論上の速度が明確になっている場合があります。 例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証されています。 ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。 ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。 ■各種仕様 ( ttp://fiddle.jshell.net/vSqKr/44/show/light/#Link も参照 ) ◆ Standard ECMA-262 ttp://bclary.com/2004/11/07/ (ECMAScript 3 HTML版) ttp://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳) ttp://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版) ttp://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳) ttp://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015) ttp://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table) ttp://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table) ◆ HTML Standard (HTML5) ttp://www.whatwg.org/specs/web-apps/current-work/multipage/ ttp://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳) ttp://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) : Name_Not_Found [sage] 2017/11/21(火) 22:00:08.82ID:??? ■各種仕様 (続き) ◆ Document Object Model (DOM) / CSS Object Model (CSSOM) ttp://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳) ttp://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events) ttp://www.w3.org/TR/uievents/ (UI Events) ttp://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳) ttp://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳) ◆ その他のWeb関連仕様 ttp://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等) ttp://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳) ttp://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳) ttp://www.whatwg.org/specs/ (WHATWGの仕様一覧) ◆ MDN (Netscape/Mozilla) ttps://developer.mozilla.org/ja/docs ◆ MSDN Library ttps://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API) ttp://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript) ttp://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript) ttp://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML) ◆ JavaScript Garden (ja) ttp://bonsaiden.github.com/JavaScript-Garden/ja/ ◆ JSON (JavaScript Object Notation) ttp://www.json.org/json-ja.html : Name_Not_Found [sage] 2017/11/21(火) 22:06:20.25ID:??? いいね! 乙 : Name_Not_Found [sage] 2017/11/22(水) 00:24:20.79ID:??? ttp://www.hcn.zaq.ne.jp/___/WEB/ だいぶ前からリンク切れ : Name_Not_Found [sage] 2017/11/22(水) 01:51:46.08ID:??? ライブラリ禁止の条項をなくした、という事はいつもの人か : Name_Not_Found [sage] 2017/11/22(水) 02:09:04.06ID:??? ライブラリ禁止をなくせば問題は全て解決する : Name_Not_Found [sage] 2017/11/22(水) 02:11:24.02ID:??? ライブラリ禁止は質問者やほかの人のためになるかどうかじゃなくて アンチが荒らす免罪符とてしか使われてないからな : Name_Not_Found [sage] 2017/11/22(水) 08:06:26.11ID:??? だからテンプレリンクあまりに多すぎだって こんな沢山のリンク読む人はいない MSDNだってMDNに統合されるし、リファレンスはMDNだけで十分 WHATWGとかW3CはMDNを読んでもっと詳しく知りたいと思った人が勝手にたどり着く ES仕様もしかり、ここで紹介しても仕方がない : Name_Not_Found [sage] 2017/11/23(木) 10:24:10.82ID:??? 次はちゃんと吟味して更新しておくよ : Name_Not_Found [sage] 2017/11/23(木) 15:02:08.95ID:??? テンプレが無駄に多いのは100スレ続く伝統 技術者のクセ : Name_Not_Found [sage] 2017/11/23(木) 20:29:10.91ID:??? 「伝統」は本当にそれでいいのかを常に見直し更新していくのがプログラマのさだめ 「ずっとこうだから」と言った時点でその人はただのコーダー : Name_Not_Found [sage] 2017/11/24(金) 00:22:28.46ID:??? node.jsの勉強にいいサイトありませんか? : Name_Not_Found [sage] 2017/11/24(金) 00:55:02.41ID:??? Node.jsで何がしたいの? : Name_Not_Found [sage] 2017/11/24(金) 00:56:13.28ID:??? Node.jsでどんなことができるの? : Name_Not_Found [sage] 2017/11/24(金) 01:29:49.36ID:??? 前スレに書きましたが、chromeのローカルストレージの実装がLevelDBなので LevelDBのデータファイルの中身を node.jsで見ようと思ったのです : Name_Not_Found [] 2017/11/24(金) 03:16:54.45:qZ01KuDr おまえら大先生なんだから 本質的にJSというよりライブラリの話だなってわかった時点で誘導してあげればいいじゃん? そんなにけんけんしないで : Name_Not_Found [sage] 2017/11/24(金) 03:52:21.64ID:??? 殆どがライブラリでも解決できる話題なのでここでやる方がいい 誘導が多い=ここでやるべき話題ってことだ : Name_Not_Found [sage] 2017/11/24(金) 09:01:08.60ID:??? 質問者がライブラリの話を始めるのが問題なんじゃなくて ライブラリ使わずとも数行で実現できることであっても 頑なにライブラリを勧めようとする回答者がいることが問題 : Name_Not_Found [sage] 2017/11/24(金) 09:50:31.51ID:??? いろんな回答があって良いのだからライブラリを使った回答でも良い その人がライブラリを使わない回答を書く義務もない ライブラリを使わない回答は他の誰かがやればいい それをやらないで頑なにライブラリを使った回答をするなと 言うやつが問題 ライブラリを使うなというのではなく、 ライブラリを使わない回答を書け そうすれば荒れることはない : Name_Not_Found [] 2017/11/24(金) 10:16:13.72:qZ01KuDr それなー わかるんだけど、初心者とかだと特にjQuery使うだろうから ピュアJSで教えたら、教えた部分だけ浮いちゃったりするんじゃないかなー とも思う がごもっともだと思う こうも書けるよ!って言うだけで良いのだろうなと : Name_Not_Found [sage] 2017/11/24(金) 10:43:35.24ID:??? 自分で関数を作ってもある意味ライブラリ : Name_Not_Found [sage] 2017/11/24(金) 13:02:29.64ID:??? Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門 Stoyan Stefanov, 2017 この本では、データアクセス(CRUD)は、Flux の、Store という部分で、 UI とは完全に分離させている nmp の、immutable パッケージで、データを変更不能にしたり : Name_Not_Found [sage] 2017/11/24(金) 13:16:13.20ID:??? 00年代前半にオレオレライブラリを作ってた記憶が…うっ、頭が : Name_Not_Found [sage] 2017/11/24(金) 13:59:17.25ID:??? 初心者だとjQueryを使うっていう考えに違和感 : Name_Not_Found [sage] 2017/11/27(月) 15:17:03.43ID:??? ■テンプレ案 ttp://fiddle.jshell.net/fH4cC/174/show/light/ ■諸注意 vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の話題はvol.116から禁止されました。 vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。 本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。 ライブラリの話題はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。 : Name_Not_Found [sage] 2017/11/27(月) 22:07:10.95ID:??? JavaScriptでたまに { ...abc, } みたいなの見ますが「...」って何なんでしょうか? : Name_Not_Found [sage] 2017/11/27(月) 22:45:27.59ID:??? 伝統あるテンプレをvol.116から勝手に変えないでください いい加減怒りますよ? 勝手に変えて良いのであれば、vol.131からライブラリは解禁になりました。 スレの住民の意見をちゃんと取り入れましょう : Name_Not_Found [sage] 2017/11/27(月) 22:48:15.24ID:??? これ ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator "> ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator : 29 = 30 [sage] 2017/11/27(月) 22:48:53.48ID:??? もう一つ、IEに対応する必要があるのであれば babelやtypescriptを使って変換するという手もある : Name_Not_Found [sage] 2017/11/27(月) 22:54:36.34ID:??? スプレッド演算子とかいうやつですか。 調べてみます。ありがとうございます。 : Name_Not_Found [sage] 2017/11/27(月) 22:54:56.09ID:??? スプレッド演算子知らなかった これ、使える? : Name_Not_Found [sage] 2017/11/27(月) 23:13:50.26ID:??? ECMA 6 から使える、スプレッド(展開)演算子。 React, JSX でも使える Babel で、ECMA 5 に変換できる var attr = { href: '〜', target: '_blank', }; return <a {...attr}>あ</a> return ( <a href={attr.href} target={attr.target}>あ</a> ); : 29 [sage] 2017/11/27(月) 23:17:10.77ID:??? > これ、使える? ブラウザが対応しているか?ということならに書いたとおり ではなくて、便利か?という意味なら 一度知ってしまえば、有って然るべき機能だと思うようになるよ 以前は変則的な書き方をしていた所をシンプルに書けるようになる 例えば、以前はこんな感じで一瞬「?」となるような書き方が必要だった ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Copy_an_array ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#A_better_way_to_concatenate_arrays : Name_Not_Found [sage] 2017/11/27(月) 23:17:31.95ID:??? オブジェクトに関するスプレッド演算子は、以前はlodashなどのライブラリを使わないとやりづらかった ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals あとこの「...」は関数の引数にも使用できる。正確にはこっちはrest parameterと呼ばれているけどね ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters : 29 [sage] 2017/11/27(月) 23:27:08.22ID:??? こういう書き方も好き (hrefやtaget変数に入れておいて何らかの処理をすることはよくあるので) const href = '〜'; const target = '_blank'; const attr = {href, target}; return <a {...attr}>あ</a> : Name_Not_Found [sage] 2017/11/28(火) 00:07:55.41ID:??? テンプレを勝手に書き換えたにもどうぞ文句を入れて下さいよ : Name_Not_Found [sage] 2017/11/28(火) 00:51:34.53ID:??? 戻しただけなので問題ない : Name_Not_Found [sage] 2017/11/28(火) 02:45:01.60ID:??? 質問テンプレートとか、テンプレも結構後から改変されてるよね 残してほしいところだけ「前からあった」といい、変えては困る場所だけ「勝手に変えるな」と彼はいう : Name_Not_Found [sage] 2017/11/28(火) 03:15:00.28ID:??? 5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら? でないのであれば、俺とお前は立場は一緒、 俺がスレの民意をまとめてその内容でテンプレにしただけの話 : Name_Not_Found [sage] 2017/11/28(火) 07:22:51.26ID:??? のテンプレも当時のスレの民意をまとめて決めたものだけど、なぜその伝統は無視するの? は事前に話し合ったわけでもなく、彼が独断で決めただけでしょ 話し合いのあった当時と比べるべくもないよ : Name_Not_Found [sage] 2017/11/28(火) 07:40:54.97ID:??? テンプレ案にjsfiddleを使い始めたのはvol.97からか ttp://fiddle.jshell.net/fH4cC/1/show/light/ ライブラリ禁止はvol.116から続く伝統 ライブラリ荒らしとの言い争いも伝統といえなくもないな : Name_Not_Found [sage] 2017/11/28(火) 07:51:59.25ID:??? > 5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら? > 俺がスレの民意をまとめてその内容でテンプレにしただけの話 君がなら、のルールを守るのは最低限の礼儀だと思うよ > ・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事) : Name_Not_Found [] 2017/11/28(火) 10:23:08.52:QIJXvf1S javascript初歩的な質問で申し訳ありません var string = "1020304"; string,split("0") を最初に出てきた0だけで分割して[1,20304]にしたいです どうすればいいんでしょうか? : Name_Not_Found [sage] 2017/11/28(火) 14:48:11.95ID:??? var string = "1020304"; var idx = string.indexOf('0'); var arry = [parseInt(string.substring(0, idx), 10) || null, parseInt(string.substring(idx + 1, string.length), 10) || null]; console.log(arry); : Name_Not_Found [sage] 2017/11/28(火) 15:28:54.71ID:??? 俺だったらstring,split("0",1)にした後 その結果とその文字数+0を差し引いたものを配列として扱うね : Name_Not_Found [sage] 2017/11/28(火) 17:08:12.93ID:??? なんでsplitの2番目の引数指定した時の動作が他の言語と違うんだろうか : Name_Not_Found [sage] 2017/11/28(火) 19:14:41.20ID:??? string.split(/0(.*)/,2) : Name_Not_Found [sage] 2017/11/28(火) 19:29:37.54ID:??? var string = "1120304"; 場合 だと無理 : Name_Not_Found [sage] 2017/11/28(火) 20:04:20.45ID:??? /^([1-9]*)0(\d*$)/.exec(string); : Name_Not_Found [sage] 2017/11/28(火) 21:01:34.18ID:??? 事前に string 値が整数文字列である事を保証できるか否かでと使い分ける var i = string.indexOf('0'); var match = [string.slice(0, i), string.slice(i + 1)]; console.log(match); // ["1", "20304"] var string = "100"; で破綻する : Name_Not_Found [sage] 2017/11/28(火) 22:19:01.45ID:??? ライブラリ荒らしは、ライブラリを禁止にした奴が荒らしかな? とにかく、スレを一杯立てた奴が荒らしなんだよ Undescore から、Lodash へ移行したのは、皆が知ってる常識だから、荒らしじゃない。 今でも、Undescore を使っているのは、Backbone だけ 荒らしは、jQuery, Lodash とか、皆が新しい知識を得るのを、邪魔してくる。 荒らしは食えないから、他人の勉強の邪魔をしてくる とにかく、JavaScript の情報を書いてない奴が荒らし。 推薦書を書いても、ステマやステマやとか、荒らしは皆の邪魔してくる とにかく、JavaScript の情報を書いてない奴とは、会話しないように。 そいつは荒らしだから : Name_Not_Found [sage] 2017/11/28(火) 22:50:20.27ID:??? > var string = "1020304"; > 分割して[1,20304]にしたいです まずstringの文字列の法則と、分割後の array は String なのか、Number なのか 質問に於いての説明が不十分 : Name_Not_Found [sage] 2017/11/28(火) 22:53:46.60ID:??? Vue.js meet upが応募開始10分で100人満員になってた… Vue.js人気だねー : Name_Not_Found [sage] 2017/11/29(水) 00:31:12.26ID:??? file:///d:\sample.htmlから ttp://localhost/postmethod にajaxでpostすると失敗します。エラーコードは0です。 失敗する原因として、下記が3つ存在することまではたどり着きましたが、試行錯誤のうえ解決に至っていません。 1.サーバがCORSに対応していない。 2.異なるプロトコルにAjaxできない。 3.Chromeのセキュリティポリシー。 他に何か思い当たることはありますか? やはりfileからhttpにajaxは出来ないのでしょうか? (そうなるとデバッグが微妙に面倒です) : Name_Not_Found [sage] 2017/11/29(水) 02:48:43.74ID:??? 0は成功してる可能性もあるぞ : Name_Not_Found [sage] 2017/11/29(水) 07:12:15.77ID:??? クロスドメインかセキュリティポリシーだと思う hosts触って http:/exasmple.com でアクセスした時にローカルを見るようにするといい 具たち的にはこんな感じ ttps://qiita.com/nbkn/items/e72b283c54403a30b2e1 : Name_Not_Found [sage] 2017/11/29(水) 07:14:56.47ID:??? プロトコルもホスト名もポート番号すら違って、同一オリジンと見なされるわけがない CORSについて勉強し直すべき : Name_Not_Found [sage] 2017/11/29(水) 20:19:58.42ID:??? SPAみたいなアプリを作るんですが、内部の状態を全部保存して、次にアプリを表示したときに 復元するのですが、普通の静的型付け言語ならモデルにメソッド追加したりしても、 大抵は元に簡単に戻せるんですが、JavaScriptではどうすればいいんでしょうか?? JSONじゃなくてもいいんですが、自前でシリアライズ・デシリアライズする処理を かいてるんでしょうか?? : Name_Not_Found [sage] 2017/11/29(水) 21:10:01.55ID:??? メソッドごと保存しようというのは正しくない まず、仮想DOM的なものを設計して、HTMLでもCanvasでもアタッチ出来るくらいのビューを用意する そしてそのビューに対してこれからどういう変更を加えるか、加えてきたかのアクションチェーンを設計する 実行はアクションチェーンを読み出しつつ各アクションの種類に応じてswichを使ったりして行う 保存はアクションチェーンオブジェクトと仮想DOMオブジェクトをそのままIndexedDBなんかに保存すれば良い JSONは循環参照を扱えないのでオススメしない、まあ循環参照だけならほぐしてJSON化可能だが 画像なんかのバイナリも別に保存したいこともあろうからIDBがオススメ 1アクション中のアニメーションだったり、もうちょっと工夫が必要だがそれで概ね上手くいく : 1/2 [sage] 2017/11/29(水) 21:24:24.05ID:??? なんかいろいろずれてる気がするな web製作板なのだからウェブアプリってことでいいのか? SPAみたいなアプリを作ると書いているが、あなたが書いている内容は SPAとは関係ない話になっている。 まず > 内部の状態を全部保存して、次にアプリを表示したときに復元するのですが、 と書いてあるがウェブの世界ではSPAでなくとも一般的にサーバーにデータを保存し、 ページを表示した時にサーバーからデータを取ってくる。SPAではそれがページ単位ではなく 何かしらのコンポーネント単位になることもよくある > 普通の静的型付け言語ならモデルにメソッド追加したりしても、 > 大抵は元に簡単に戻せるんですが、 一般的にシリアライズっていうのはデータのみを保存するのだから モデルへのメソッドを追加に関しては、静的型付け言語かどうかは関係ない シリアライズが(簡単に)可能かどうかっていうのはクラスのインスタンス変数を 全て取得する方法を言語やライブラリが提供しているかどうかにかかっている JavaやRubyはそれが可能なので簡単に実現できるが JavaScriptはではそういったことは完璧にはできないので出来たとしても制限がある 一般的にできないと考えたほうが良い とはいっても、JavaScriptのobject(配列や連想配列)≒JSONなのでJavaScriptのクラスが 持っているデータをobjectとして管理していれば、比較的簡単にJSON化できる。 なおJSONではなく他のバイナリデータにシリアライズするライブラリも有ったはず そして「次にアプリを表示したときに復元する」というのはobjectを表現するデータを JSON形式でもいいし、そうでない形式でも良いが、サーバーに保存することになる オブジェクト自身を保存するというより、中身のデータを保存するという感じ まあつまりは自前でシリアライズ・デシリアライズする処理を書くことに相当するわけだが 繰り返すがJSON形式を用いればそれは大したことじゃない : 2/2 [sage] 2017/11/29(水) 21:30:41.02ID:??? そしてSPAとは関係ない話では有るが、SPAを実装する時は 自力で作るのではなく、何らかのフレームワークを使ったほうが良い 残念ながら俺はSPAフレームワークには詳しくないのだが、 SPAを作りやすくする"フレームワーク"として機能で オブジェクトをシリアライズ・デシリアライズする機能があるかもしれない。 つまりフレームワークが決めたルールに従って作ることで モデルを簡単にシリアライズしたりデシリアライズできる。 そういう機能があるかないかはしらないが、自力でSPAアプリを作るのは骨が折れるので SPAアプリを作るというのが本当の目的であれば、 まずSPA対応のフレームワークの使い方を勉強することをおすすめしたい ちなみになぜ「SPAアプリを作るというのが本当の目的であれば」なんて わざわざ言ってるのかというと繰り返すがの内容はSPAアプリを 作る時の話とは関係ないから : Name_Not_Found [sage] 2017/11/29(水) 21:41:57.38ID:??? ですが、そこまでは書きませんでしたが、実際はReactを使います。で、それと他にRedux使うかMobX使うかとか どうするか色々調べてるところです。例えば、MobXとか使うと元のオブジェクトがラップしてオーブザーバルになるみたいんです。 React使う前にも他にデータバインディングできるライブラリを調べると、元のオブジェクトをラップしたり とか何種類か方法があるみたいんですが、そららを使うと JavaScriptのobject(配列や連想配列)≒JSONじゃなくなるっぽいので、一般的にどうすればいいのかなと 思った次第です。 : Name_Not_Found [sage] 2017/11/29(水) 21:51:40.81ID:??? 漏れもブラウザで、ローカルHTML・JS ファイルから、 jQuery のAjax で、2ch にアクセスしようとしたけど出来なかった iframe 内になら取得できるけど、外側のHTMLファイルからは、アクセスできない。 内外で、異なるサイトに扱われるから そこで、ブラウザから、YQL(Yahoo! Query Language)のサービス・サーバーを利用して、 アクセスする方法があった。 jquery.xdomainajax.js も、YQLを使っていたけど、動かなくなった 異なるサイト同士では、直接アクセスできない。 Node.js とか、Node.jsを含んだ、Electron など、 サーバーを立てて、サーバーを介して通信しないといけない : Name_Not_Found [sage] 2017/11/29(水) 21:52:12.00ID:??? JavaScript一般的にはシリアライズする方法はないので自力でやる必要がある。 そこら辺をフレームワークがカバーしている(かもしれない) というのが答かな もともとJavaScriptはクラスなんてものはなかったから シリアライズすべき変数はなんや?って話なんだよ。 ローカル変数を使われるとクラス(に相当する関数)の外から見る方法はないし、 関数を値として扱えるから、関数のコードをシリアライズするの?って話まででてくるし : Name_Not_Found [sage] 2017/11/29(水) 21:55:27.62ID:??? YQLなんていずれだめになるだろう あれは使うべきではない : Name_Not_Found [sage] 2017/11/29(水) 22:00:32.30ID:??? 入門 React ――コンポーネントベースのWebフロントエンド開発、2015 Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門 Stoyan Stefanov, 2017 Stefanov の本では、Flux を使って、JSON で、localStorage に保存している。 まあ、これは例題だから、実際には、DB を使うのだろう : Name_Not_Found [sage] 2017/11/29(水) 22:03:37.19ID:??? 怖い例題だな ブラウザ開発者の機嫌次第で一発でふっとびそう : Name_Not_Found [sage] 2017/11/29(水) 22:14:18.15ID:??? > JSON で、localStorage に保存している。 そこは(どうでも)いいんだよね。 表現形式と保存場所の話だから シリアライズっていうのはオブジェクト(クラスのインスタンス)を どうやって保存できる形式に変換するかって話だから その本ではクラスのインスタンスのシリアライズの話をしてる? : Name_Not_Found [sage] 2017/11/29(水) 22:21:05.46ID:??? PWAっぽい : Name_Not_Found [sage] 2017/11/29(水) 22:34:24.67ID:??? ですけど、 >もともとJavaScriptはクラスなんてものはなかったから >シリアライズすべき変数はなんや?って話なんだよ ありがとうございます。 いったんクラスというのも忘れて真剣に考えないとダメっぽいですね。 そうですね。redux使うと、完全にStoreはシンプルになるので、そのまんまシリアライズ・デシリアライズ できそうなんで、そこは楽そうなんですが、redux自体がactionやらactionCreaters,Reducersやらで・・ : Name_Not_Found [sage] 2017/11/29(水) 22:43:31.41ID:??? Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門 Stoyan Stefanov, 2017 ttps://github.com/stoyan/reactbook whinepad という名前で、Excel みたいな表を作っている インスタンスの保存だけど、メソッドは保存しない。 保存するのは、データだけ : Name_Not_Found [sage] 2017/11/29(水) 23:12:17.69ID:??? なんか素で勘違いしてそうだからレスするけど スレをいっぱい立てまくってたのが件のテンプレ改変した人であり前スレとここのだよ : Name_Not_Found [sage] 2017/11/29(水) 23:28:35.87ID:??? スレをいっぱい立てまくっていたのが、荒らしだろ? それで皆、苦労したんだろ? このスレは、荒らしが立てたスレか? まあそれなら、再利用すればよい とにかく荒らしは、議論させないように、皆の邪魔をする。 jQuery の話をするなとか、Lodash の話もするなとか、DOM の話もするなとか、 荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる。 そうやって、ここのコミュニティをつぶすつもりだろ スレを分けるなら、プログラム板のように、 初心者向け・上級者向けに分けるべき : Name_Not_Found [sage] 2017/11/29(水) 23:32:17.41ID:??? その話いい加減にしてくれないかな? いま問題なく進行してるだろうが : Name_Not_Found [sage] 2017/11/29(水) 23:46:16.66ID:??? スレ議論スレでも作れば : Name_Not_Found [sage] 2017/11/29(水) 23:48:36.69ID:??? はいどうぞ。そしてその末路も見ていってください。 投票結果見て明らか。議論にすらならない。やるだけ無駄 + JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net ttp://mevius.2ch.net/test/read.cgi/tech/1491143438/33 33 名前:デフォルトの名無しさん (ワッチョイ 75d1-JAgm [114.169.237.158])[] 投稿日:2017/11/19(日) 16:06:59.97 ID:ANnOsUYp0 投票です。 現在JavaScript関連にはまともなスレがありません。 新しいスレを立てた方がいいと思いますが賛同する方はいますか? 新しいスレの内容の条件 ・JavaScriptだけを扱う(AltJSやBabelやTypeScript禁止) ・ブラウザのDOM APIだけを使う(jQueryなどのライブラリやフレームワーク禁止) ・サーバーサイド禁止(nodejsなど禁止) : Name_Not_Found [sage] 2017/11/29(水) 23:53:10.48ID:??? thx あったんだ、知らなかった・・・ : Name_Not_Found [sage] 2017/11/30(木) 00:12:37.60ID:??? >新しいスレの内容の条件 >・JavaScriptだけを扱う(AltJSやBabelやTypeScript禁止) >・ブラウザのDOM APIだけを使う(jQueryなどのライブラリやフレームワーク禁止) >・サーバーサイド禁止(nodejsなど禁止) これが、荒らしが作りたいスレだろ? 何も、コミュニティが交流できないように作っている 荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる 次スレからは、プログラム板のように、 スレを初心者向けと、普通用に分けてくれ : Name_Not_Found [sage] 2017/11/30(木) 00:34:22.31ID:??? 初心者用と普通用ということであれば話題の内容は一緒だ。 どちらもライブラリの話題も対象となる。 : Name_Not_Found [sage] 2017/11/30(木) 00:46:22.21ID:??? というと反対してくるんだろうな 結局ライブラリの話題を禁止したいだけ : Name_Not_Found [sage] 2017/11/30(木) 00:50:52.17ID:??? 初心者用は、主に言語の文法などが、わからない人向け。 普通用は、フレームワーク・ライブラリも含める プログラム板もそうだし、これで良い : Name_Not_Found [sage] 2017/11/30(木) 01:01:54.94ID:??? はいどうぞ JavaScript 初心者用質問用スレ(ライブラリ禁止) ttp://mevius.2ch.net/test/read.cgi/hp/1511971305/ : Name_Not_Found [sage] 2017/11/30(木) 01:23:35.71ID:??? また、初心者用のスレを勝手に立てて、ライブラリ禁止とか書いてる こいつがいつもスレを一杯立てる、荒らしじゃないのか? : Name_Not_Found [sage] 2017/11/30(木) 01:28:02.36ID:??? 初心者専用のスレがほしいって言ったから立ててやっただけだろ あとは勝手にメンテしろや 俺は最初からいらないって言ってる : Name_Not_Found [sage] 2017/11/30(木) 02:50:24.30ID:??? 初心者って言ってもどのような初心者かわからないんだから 分けるんなら目的に応じて分けないと駄目でしょ JavaScript.DOM勉強スレ(ただしライブラリ排除ではなく、あくまでDOMや標準APIから学んでいく事をモットーとした勉強のためのスレ)と JavaScript解法相談スレ(JSをできるだけ深く学習する事なくライブラリやツールを駆使して簡単に問題を解決する事をモットーとしたスレ) で分けよう これまでの質問スレは終了 : Name_Not_Found [sage] 2017/11/30(木) 06:42:10.12ID:??? ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、 色々な制限を加えて、皆が議論できないようにしてる 禁止事項を勝手に作って、スレを一杯立ててる、こいつが荒らし 今まで、Lodash厨が荒らしかと思っていたけど、荒らしじゃなかった。 誰が荒らしか、ようやく分かった : Name_Not_Found [sage] 2017/11/30(木) 08:27:32.88ID:??? 勝手にスレ作って勝手に保守してろ ここが嫌ならさっさとでていけ : Name_Not_Found [sage] 2017/11/30(木) 20:23:32.06ID:??? ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、 色々な制限を加えて、皆が議論できないようにしてる 結局、スレのテンプレを勝手に変えて、禁止事項を勝手に作って、 スレを一杯立てている奴が荒らしだな ライブラリ用スレとか、jQuery用スレとか、 スレを分割して、皆が議論できないようにしたのも、この荒らしか 皆、荒らしと会話しないように。 もし気付かず、荒らしと会話している人がいたら、荒らしと教えてあげて : Name_Not_Found [sage] 2017/11/30(木) 20:36:33.57ID:??? テンプレを勝手に変えたも荒らしということだな を相手にしないように : Name_Not_Found [sage] 2017/11/30(木) 21:08:37.84ID:??? 既存の配列に他の配列を連結したいのですが、1発でやる方法はないでしょうか? for (let sourceItem of sourceItems) destItems.push(sourceItem); 現状、ループを回しています。 : Name_Not_Found [sage] 2017/11/30(木) 21:38:08.27ID:??? 新しい配列で良いなら destItems.concat(sourceItems) : Name_Not_Found [sage] 2017/11/30(木) 21:42:26.10ID:??? JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 ttps://qiita.com/takeharu/items/d75f96f81ff83680013f 指定した位置に一つ以上追加 - splice 非破壊的な結合 - concat 破壊的な結合 - push : Name_Not_Found [sage] 2017/11/30(木) 22:02:59.31ID:??? pushにこだわるなら Array.prototype.push.apply(destItems,sourceItems); あるいは destItems.push(...sourceItems); : Name_Not_Found [sage] 2017/11/30(木) 22:36:42.10ID:??? 既存の配列を書き換えたいのです。要は破壊的結合で。 destItems.push(...sourceItems); ああ、pushでそんな書き方できたんですか・・ で教えてもらったスプレッド演算子ってやつですね。 ありがとうございます。 : Name_Not_Found [sage] 2017/12/01(金) 02:33:38.45ID:??? スプレッドって巨大な配列でやろうとするとエラーになるから嫌いなんだよな : Name_Not_Found [sage] 2017/12/01(金) 07:29:45.46ID:??? 巨大ってどれぐらい? : Name_Not_Found [sage] 2017/12/01(金) 08:34:48.80ID:??? 配列長の制限値を超えた配列作ろうとすればそりゃエラーになるが 別にスプレッド関係ないわな : Name_Not_Found [] 2017/12/01(金) 09:38:33.33:X7oqfLY+ こんな式を見たのですが、これは何ですか? var data = ('' == 0 ? '' : ''); : Name_Not_Found [sage] 2017/12/01(金) 09:46:19.17ID:??? 文法エラーです : Name_Not_Found [] 2017/12/01(金) 09:52:55.80:X7oqfLY+ では、このコードを書いた人はどういう意図で書いたのでしょうか? JavaScript専門家の方の推理を聞かせて下さい。 : Name_Not_Found [sage] 2017/12/01(金) 11:35:39.13ID:??? ・あなたか「書いた人」が転記ミスしている ・「書いた人」が文法をよくわかっていない 文法エラーは関わった人に問題がある以外に考えられないので、第三者が推理するのは時間の無駄です。 大抵はあなたか「書いた人」が頭の中のイメージで転記しているだけで転記ミスしているケースが大半です。 : 103 [sage] 2017/12/01(金) 11:46:06.60ID:??? を鵜呑みにして書いてしまいましたが、文法エラーはないですね。 は var data = ''; と等価でのように回りくどい書き方をする必要は全くありません。 説明用のコードか、難読化の一環なのか知りませんが、コードの意図は書いた人に聞く以外の方法はないでしょう。 : 103 [sage] 2017/12/01(金) 11:48:12.00ID:??? は ・あなたが転記ミスをしていないのなら ・「書いた人」が転記ミスしていないのなら の条件付きの回答です。 その可能性を捨ててはいけないと思います。 : Name_Not_Found [sage] 2017/12/01(金) 17:40:23.92ID:??? var a = [0]; として Chrome62の場合 a.push(...a); を繰り返すとlengthが131072の時点で Maximum call stack size exceeded a=a.concat(a); の場合はlengthが33554432の時点で Invalid array length 引数の問題だからスプレッド自体に問題が有るわけではないけどな : Name_Not_Found [sage] 2017/12/01(金) 23:36:41.01ID:??? jQueryが必要とされなくなってきたのは,Reactなどの他のフレームワークが登場したせいではなく,標準DOM APIが進歩したおかげです ttps://www.ncaq.net/2017/12/02/00/00/01/ またなんか勘違いさんというかw、結論ありきさんというかw 標準DOM APIがいくら進歩したとしても、jQueryにかなわないんだよ。 それは基本的な設計方針の違いのせい jQueryも標準DOM APIも、どちらもDOM操作をする。 "DOM操作をするならば"、標準DOM APIよりもjQueryの方が優れてるわけで わざわざjQueryを捨てる理由はない その一発逆転がありえるのがReactなどのフレームワーク案だよ "DOM操作をするならば"、jQueryや標準DOM APIが必要 だけど "DOM操作をしないならば"・・・? そうDOM操作がいらないフレームワークがでてきたから JavaScriptフレームワーク導入可能な一部の業種においては jQueryや標準DOM APIがいらなくなってきたという話 DOM操作がいるならば、これからもjQueryが必要だって : Name_Not_Found [sage] 2017/12/02(土) 00:00:42.05ID:??? jQueryをフレームワークにすればと思うけど : Name_Not_Found [sage] 2017/12/02(土) 01:01:06.91ID:??? 式 ? a : b 3項演算子は、式が真なら a で、偽なら b だろ var data = ('' == 0 ? '' : ''); 式 ? a : a 式が、真でも偽でも、空文字を返すから、この式は無意味。 単に空文字を代入すれば良いだけ : Name_Not_Found [sage] 2017/12/02(土) 01:25:47.76ID:??? あー、まだ の答え出てなかったのか? var data = ('' == 0 ? '' : ''); これは最終的にこう書いてあるってだけ。そう最終的に これだけじゃわからんのよ。 間違いかもしれないし意味があるかもしれない。 もしかしてソースコードはこうなっているかもしれない var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>'); $vに0が入っていれば var data = ('0' == 0 ? '' : '0'); 0なら空文字 var data = ('1' == 0 ? '' : '1'); 1(0以外)なら1 var data = ('' == 0 ? '' : ''); 空文字でも空文字 0の場合だけ空文字になる : Name_Not_Found [sage] 2017/12/02(土) 01:26:42.28ID:??? 訂正 var data = ('<?= $v ?>' == 0 ? '' : '<?= $v ?>'); : Name_Not_Found [sage] 2017/12/02(土) 01:29:18.11ID:??? もちろん、意味があるコードかもしれないとは言うが 無駄かつ良くないコードだとも言う 普通はこんな書き方はしない。 こんな書き方はしないが意味が無いとは言い切れない : Name_Not_Found [sage] 2017/12/02(土) 09:12:56.52ID:??? 無駄なコードを意味がないコードと表現してるだけだろ 言葉遊びも程々にしろ : Name_Not_Found [sage] 2017/12/02(土) 09:14:30.51ID:??? 論理演算の意味がない : Name_Not_Found [sage] 2017/12/02(土) 09:22:55.15ID:??? 三項演算子を出力する意味がない : Name_Not_Found [sage] 2017/12/02(土) 18:16:31.30ID:??? 「0だったら空文字にしたい」という要望があったとしたら それを正しく実装しているわけで無駄ではないよ : Name_Not_Found [sage] 2017/12/03(日) 00:19:35.36ID:??? それは三項演算子ではなく、ただのif文だろ それと「無駄かつ良くないコードだとも言う」に言及して反論してるのだが、前言撤回もここまで早いと信頼性ゼロだな : Name_Not_Found [sage] 2017/12/03(日) 00:42:59.95ID:??? 少なくともifであることは認めたようだが あんたにとって三項演算子とifの違いって何? : 118 [sage] 2017/12/03(日) 00:44:06.26ID:??? > var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>'); これはやってることに意味があるが 無駄かつ良くないコードだろ 何を反論してるんだ? : Name_Not_Found [sage] 2017/12/03(日) 00:46:44.07ID:??? 質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら、話はここで終わりだな : Name_Not_Found [sage] 2017/12/03(日) 00:47:37.59ID:??? > 質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら 無駄かつ良くないコードだと言ったのは俺なんだが、 なんで俺が自分が行った言葉に反論しなきゃいけないんだ? : Name_Not_Found [sage] 2017/12/03(日) 00:48:48.68ID:??? 無駄かつ良くないコードだが ちゃんと動く っていうことの意味が分からんのかな? 俺ここでよく無駄かつ良くないコードを 修正してるんだが : Name_Not_Found [sage] 2017/12/03(日) 00:49:05.59ID:??? では「無駄」と認めながらでは「無駄ではない」といってるだろ 前後で主張が変化する奴は信用できない : Name_Not_Found [sage] 2017/12/03(日) 00:50:11.59ID:??? あ、揚げ足取っていただけかw : Name_Not_Found [sage] 2017/12/03(日) 00:54:47.33ID:??? 揚げ足ではないような 自己矛盾を抱える人は日本語が分かってない人という典型かな : Name_Not_Found [sage] 2017/12/03(日) 01:10:35.99ID:??? 日本語がわからんやつは困るね。いちいち説明せんといかんのかね コードが無駄だってだけで動作は無駄じゃないってことだよ ちゃんと書いてあるだろ : Name_Not_Found [sage] 2017/12/03(日) 14:02:27.52ID:??? 動作自体が無駄 : Name_Not_Found [sage] 2017/12/03(日) 14:11:59.68ID:??? じゃあ無駄じゃない動作とは? : Name_Not_Found [sage] 2017/12/03(日) 14:27:27.65ID:??? 祈りの所作 : Name_Not_Found [sage] 2017/12/03(日) 16:24:26.70ID:??? 必要なことをやっているけど無駄の多いコードは冗長なコードというべきではないか : Name_Not_Found [sage] 2017/12/03(日) 17:55:51.86ID:??? 1 + 1 // -> で2が出力されるのですが、これは何でしょうか??? : Name_Not_Found [sage] 2017/12/04(月) 12:45:59.51ID:??? 「冗長」の意味を調べなおした方がいいのではないか。 "文章・話などが、「むだ」が多くて長いこと。また、そのさま。" ttps://dictionary.goo.ne.jp/jn/109389/meaning/m0u/ : Name_Not_Found [sage] 2017/12/04(月) 13:17:53.26ID:??? > 必要なことをやっているけど無駄の多いコード 「必要」と「無駄」は対義語 必要なことをやっているなら無駄ではない : Name_Not_Found [sage] 2017/12/04(月) 13:19:29.68ID:??? なるほど、この場合はコードに無駄が多くて長いが 処理そのものには意味がある(無駄ではない)ってことだな : Name_Not_Found [sage] 2017/12/04(月) 13:20:38.96ID:??? 必要の対義語は不必要ってでてきたけど? : Name_Not_Found [sage] 2017/12/04(月) 18:31:21.62ID:??? 必要かつ無駄は矛盾してると思うけどね : Name_Not_Found [sage] 2017/12/04(月) 18:45:27.08ID:??? 日本語ひどすぎねぇか・・ 「必要」かつ「無駄」ってそれぞれ修飾してる語が違うんだけど : Name_Not_Found [sage] 2017/12/04(月) 18:47:12.01ID:??? いつも通りの曲解だな : Name_Not_Found [sage] 2017/12/04(月) 18:48:18.37ID:??? 俺は無駄なコードを書いている 俺は必要なことをやっている(無駄なコードを書く事は必要である) : Name_Not_Found [sage] 2017/12/04(月) 21:08:50.03ID:??? 必要なことをやっているコードと 必要なことだけで書かれてるコードは違うだろう : 139 [sage] 2017/12/04(月) 21:14:31.74ID:??? 意味不明な論理だし、直接的に反論しないところがいやらしいな : Name_Not_Found [sage] 2017/12/04(月) 21:18:43.71ID:??? つまりダムってことだな : Name_Not_Found [sage] 2017/12/04(月) 21:20:39.67ID:??? はいつもの日本語破綻者だしなあ 曖昧に濁して、相手の反応を伺う事で糸口を探してるんだろ : Name_Not_Found [sage] 2017/12/04(月) 21:53:11.51ID:??? > 必要なことをやっているけど無駄の多いコード そもそも、これは「無駄なコードを残すことに意味がある」と主張したいが為の論理でしょ 「必要」と「無駄」の修飾先が違うのなら、必要なAだけ残して無駄なコード(B)を排除すれば良いだけ よって、「無駄なコード(B)を書く事に意味はない」と結論される どちらにしても、論理が破綻してるんだよ : Name_Not_Found [sage] 2017/12/04(月) 22:13:47.23ID:??? カレンダーのマス目に編集ボタンが配置されていて、編集ボタンをクリックすると編集画面が表示されるページを作成しています。ここでお尋ねしたいのが、idの名前の付け方です。 今は、id=btnEdit20171201、id=btnEdit20171202と名前を付けていますが、より良い名前の付け方はありますか? : Name_Not_Found [sage] 2017/12/04(月) 23:25:30.85ID:??? idをつけない、という選択肢もあるんじゃないかな 押したボタンから日付を取得したいなら、カスタムデータ属性なり、button要素でvalue属性を使うなり、手はいくらでもある : Name_Not_Found [sage] 2017/12/04(月) 23:48:01.31ID:??? も書いているけどそういうIDが必要になるのがおかしい気がするね。 JavaScriptのスレに書いてるってことは、JavaScriptからそれらを参照するつもりなのだろう 本題の前に言っておくと、普通HTMLでは全部小文字でハイフン区切りが多い btn-edit-20171201 みたいに。なぜかはよく分からんけどアンダースコアはあまり使われない まあそれでもBEMみたいな変則的なものは有るし、強制ではない んで、本題。あーだこーだ言いたいが、まあ要するにIDなしでやる方法を知らんのだろう? なので軽くサンプルを書いてあげよう ttps://jsfiddle.net/bfw0m3p6/ : Name_Not_Found [sage] 2017/12/05(火) 00:40:08.94ID:??? ,147 ありがとうございます。とても参考になりました。idを振らずにイベントをトリガーしたり、カスタムデータ属性を使う方法などがあるのですね。 編集画面でクリックされた日の年月日を引き継いで表示したりすることを考えると、カスタムデータ属性が面白そうですね! : Name_Not_Found [sage] 2017/12/05(火) 00:54:54.75ID:??? そのマス目に入れるものが日付だけならtime要素を使うのが良いかもね ttps://developer.mozilla.org/ja/docs/Web/HTML/Element/time <time datetime="2017-12-05">5日</time> : Name_Not_Found [] 2017/12/06(水) 17:17:54.46:6QjIZVj3 ['みかん','りんご','みかん','ばなな','りんご','りんご',]から 一番出現回数の多い「りんご」を得るにはどうすればいいでしょうか? : Name_Not_Found [sage] 2017/12/06(水) 18:26:46.19ID:??? sort してから反復するとか let a = [‘りんご’, … ]; a.sort(); let max = -1, // 最大出現回数 let count = 0, // 現在の単語の出現回数 let word, // 出現回数最大の単語 a.reduce(f); function f(前, 次){ if(前 === 次){ count +=1 } else { if( max < count ) { max = count; word = 前 } count = 0; } みたいな感じ(細かい所は省略 : Name_Not_Found [sage] 2017/12/06(水) 18:33:37.87ID:??? すまん、 reduce の使い方がダメダメだったので取り消す : Name_Not_Found [sage] 2017/12/06(水) 22:06:13.37ID:??? var fruitsArray:Array<String> = ['みかん','りんご','みかん','ばなな','りんご']; var fruitsMap:Map<String, Int> = new Map(); var count:Dynamic; for (fruit in fruitsArray) { count = fruitsMap[fruit]; if(count == null){ count = 1; } else { ++count; } fruitsMap[fruit] = count; } trace(fruitsMap); // 出力 {みかん => 2, りんご => 2, ばなな => 1} Haxe で書いた。以下で試して。 ttps://try.haxe.org/ Map に入れたけど、最大値が複数ある場合の、処理がわからない : Name_Not_Found [sage] 2017/12/07(木) 00:27:44.39ID:??? lodashを使った ttps://jsfiddle.net/5azq6k7q/ const counts = _.countBy(['みかん','りんご','みかん','ばなな','りんご','りんご']); const max = _.max(_.values(counts)); const picked = _.pickBy(counts, _.partial(_.eq, max)); const items = _.keys(picked); console.log(items); // => ["りんご"] 出現回数が最大のものが複数ある場合を考慮して複数返している : Name_Not_Found [sage] 2017/12/07(木) 15:49:48.80ID:??? ありがとうございます やっぱりライブラリ使わないと難しそうですね : Name_Not_Found [sage] 2017/12/07(木) 21:15:11.79ID:??? 別にライブラリ使わなくてもできるよ。 ただ見て分かる通り優れたライブラリを使うとこの程度の問題なら 複雑化の原因になる条件分岐やループを使わずに最小のコード量で実装できる : Name_Not_Found [sage] 2017/12/07(木) 23:12:55.32ID:??? すごいな。ちゃんとconstだけでかけちゃってる : Name_Not_Found [sage] 2017/12/07(木) 23:19:30.37ID:??? Haxe で書いた通り、まずMap が必要だから、 ES6(2015) + Babel で、ES5 へ変換 で、Map に入れる所までは書いたから、その後を書けば? 漏れは、最大値が複数ある場合の、処理がわからなかったけど Lodash も、ES6 もほぼ同じ : Name_Not_Found [sage] 2017/12/08(金) 00:00:01.13ID:??? ES6は必要最小限しか言語機能として搭載しない という考え方があるから、高度なことはできんよ の例だとcountByとpickByはない その他は代替方法があるが少し冗長になる まあ書いてみると良いよ : Name_Not_Found [sage] 2017/12/08(金) 00:20:11.03ID:??? ES6 が流行れば、Underscore/Lodash がいらなくなる、という記事が一杯あるけど Ruby, Kotlin だと、ライブラリが無くても、かなり簡潔に書けるけど。 列Aでソートして、それが同じ値なら、さらに列Bでソートするとか Kotlin 2 ttps://mevius.5ch.net/test/read.cgi/tech/1509462463/18 : Name_Not_Found [sage] 2017/12/08(金) 01:46:22.33ID:??? そこに出てくるMutableListやmutableListOfってのはライブラリだよ Kotlin Standard Library の一部 ttps://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/-mutable-list/index.html ttps://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/mutable-list-of.html RubyのArrayも(組み込み)ライブラリ ttps://docs.ruby-lang.org/ja/latest/class/Array.html 言語の範囲っていうのは一般的にはかなり少なく作るもの 関数やクラスの文法とか基本的なものだけ 大部分は標準ライブラリとして実装するのが普通 残念ながらJavaScript(ES6)の標準ライブラリはかなり小さく作られてる その気になれば一気に最低でもRubyレベルまで実装するのは可能だろうになぜかそういうことをしない。 互換性を保つためなのかブラウザベンダーの負担を減らすためなのか知らんけど この方針が変わらない限り、貧弱なライブラリとそれを補うlodashとかの構図は変わらない : Name_Not_Found [sage] 2017/12/08(金) 01:53:01.14ID:??? 初歩的な質問で恐縮ですが、お分かりの方ご教授ください。 画像のパスの一部を書き換えるjsを書いてるんですが ネットで調べてページすべての画像は↓で変更できるようになったのですが、 特定のclass(<div class="gallery">)の中にある<img>画像だけ書き換える時の書き方がわかりません。 jsマスターの方、ご教授ください。 window.onload = function() { var images = document.images; for (var i=0, n=images.length; i<n; i++) { var img = images[i]; img.src = img.src.replace(/xxx/, 'xxx_s'); } }; : Name_Not_Found [sage] 2017/12/08(金) 02:01:45.73ID:??? ライブラリ使わなくても単純に考えればいいのよ const fruits = ['みかん','りんご','みかん','ばなな','りんご','りんご',]; const counts = []; const result = []; let max = 0; for (let fruit of fruits) { let c = counts[fruit] || 0; if (++c >= max) { if (c > max) { max = c; result.length = 0; } result.push(fruit); } counts[fruit] = c; } console.log(result); : Name_Not_Found [sage] 2017/12/08(金) 02:06:22.46ID:??? jQueryが得意そうな課題だなw 動かしてないけどこんな感じかな $(function() { $('.gallery img').attr('src', function() { return this.src.replace(/xxx/, 'xxx_s'); }); }); : Name_Not_Found [sage] 2017/12/08(金) 02:06:56.67ID:??? var images = document.querySelectorAll("div.gallery img"); : 162 [sage] 2017/12/08(金) 02:23:12.26ID:??? さっそくありがとうございます。 お二方のコード双方動きました。 動くと嬉しいですね〜。 : Name_Not_Found [sage] 2017/12/08(金) 02:50:47.41ID:??? あ、ごめん。少し無駄があった。 (最初のページロードを待つ部分は単に書くのを省略するとして) $('.gallery img').attr('src', function(i, src) { return src.replace(/xxx/, 'xxx_s'); }); もしくは、これで良かったんだ。 $('.gallery img').attr('src', (i, src) => src.replace(/xxx/, 'xxx_s')); なんのためにfunctionを使ったんだ?っていうねw : Name_Not_Found [sage] 2017/12/08(金) 03:16:43.69ID:??? 文字列の先頭からのマッチングに使うのに適した変数名は何だろう startWithか?とか思って検索していて、 ES6からStringにstartsWithメソッドが追加されているのに気づきました こんなメソッド知ってましたか? Google書籍検索で「JavaScript startsWith」で検索しても、 日本語の本は一冊も出てこないところをみると、 知らない人は決して少なくないと思います 他にもES6で追加されているのに知らないメソッドがある気がします どう調べればいいですか? : Name_Not_Found [sage] 2017/12/08(金) 03:19:02.22ID:??? 普通にググって見つかるので : 153 [sage] 2017/12/08(金) 06:13:25.95ID:??? Ruby 初心者スレッド Part 62 ttps://mevius.5ch.net/test/read.cgi/tech/1511451329/96 ちなみに、Ruby でやってみた : Name_Not_Found [sage] 2017/12/08(金) 06:29:21.92ID:??? 答えが複数ある場合でも、OK だね ただ、そういう複雑なプログラムを書きたくないから、 便利な関数を検索していた : Name_Not_Found [sage] 2017/12/08(金) 12:42:30.79ID:??? ありがとうございます みかんとりんごが同数の場合は、どちらか一つが取れればいいので こんな感じに書いてみましたが間違ってたらご指摘下さい var fruits = ['みかん','りんご','みかん','みかん','ばなな','りんご','りんご',]; var fruit = fruits.filter(function (value, index, self) { if (index === 1) { return self.indexOf(value) === index && index !== self.lastIndexOf(value); } }); console.log(fruit); : Name_Not_Found [sage] 2017/12/08(金) 21:54:48.56ID:??? 何を持って複雑というかだね。 俺は条件分岐やループが多く処理の中で状態が 変化するようなものを複雑だと定義している だけど人によっては知らない関数を使うことを 複雑だと言う人もいるだろう : Name_Not_Found [sage] 2017/12/08(金) 21:57:13.56ID:??? const counts = _.countBy(['みかん','りんご','みかん','ばなな','りんご','りんご']); const max = _.max(_.values(counts)); const picked = _.pickBy(counts, _.partial(_.eq, max)); const items = _.keys(picked); console.log(items); // => ["りんご"] さっきの答の最後を書き換えて console.log(items[0]); こうすればいいだけだよ : Name_Not_Found [sage] 2017/12/08(金) 22:06:48.91ID:??? > 何を持って複雑というかだね。 いや、複雑の定義は(いくつか有るとは言え)ソフトウェア業界で決まってるんだから いくつか有るうちのどれかに従おうよw オンラインで複雑度を調べるサイトぐぐってみたら ttp://http://jsmeter.info "> ttp://jsmeter.info ってのを見つけた (意味は知らないのあるからちょっと調べてみようかな) ttp://http://jsmeter.info/m61k7f/1#results "> ttp://jsmeter.info/m61k7f/1#results Statements: 27 Lines: 17 Branches: 3 Depth: 3 Cyclomatic Complexity: 4 Halstead Volume: 322 Halstead Potential: 4.75 Program Level: 0.0148 MI: 104.43 ttp://jsmeter.info/35xbq5/1#results Statements: 16 Lines: 5 Branches: 0 Depth: 0 Cyclomatic Complexity: 1 Halstead Volume: 223 Halstead Potential: 4.75 Program Level: 0.0213 MI: 126.20 : Name_Not_Found [sage] 2017/12/08(金) 22:20:56.36ID:??? Statements: 文の数(少ない方が良い) Line: 行数(少ない方が良い) Branches: 分岐数(少ない方が良い) Depth: ネストの深さ(少ない方が良い) Cyclomatic Complexity: 循環的複雑度 10 以下であればよい構造 30 を越える場合,構造に疑問 50 を越える場合,テストが不可能 75 を越える場合,いかなる変更も誤修正を生む原因を作る Halstead Volume: よくわからん ttps://www.imagix.com/user_guide_jp/class-metrics.html Halstead プログラム量? Halstead Potential: よくわからん ttp://se-naist.jp/old/lecture/se3/2006/handouts/productmetrics2.pdf 語彙の多さに着目した尺度? Program Level: 抽象度?(高い方がいい?) MI: 保守容易性(高い方がいい) : Name_Not_Found [sage] 2017/12/09(土) 00:53:25.98ID:??? ライブラリのコードを含めて比較しなければ公正とはいえない : 166 [sage] 2017/12/09(土) 00:53:30.06ID:??? 両方動きました! 上級者になると一行で書けるんですね。 : Name_Not_Found [sage] 2017/12/09(土) 00:55:50.83ID:??? ライブラリの部分は十分にテストされて書かなくていい部分だから そこを含める必要はないよ っていうかその話をするとブラウザの部分まで含めろ OSの部分まで含めろってなるだろ : Name_Not_Found [sage] 2017/12/09(土) 02:40:12.73ID:??? 自分の書くコードをシンプルにするためにライブラリを使うのに ライブラリを使ってシンプルにするなど許さん! ライブラリの分まで含めるのが公平だ!なんて言ってるのか? どんだけ複雑すれば気が済むんだろうか : Name_Not_Found [sage] 2017/12/09(土) 03:09:49.01ID:??? そもそも複雑度ってファイルごと、クラスごと、関数毎に出すものだから 例えライブラリが複雑だとしても、 ・使ってるライブラリが複雑です ・それはそれとしてあなたの書いたコードはシンプルです という結果になるだけの話なんだけどね 対するは、 ・ライブラリは使ってません ・それはそれとしてあなたの書いたコードは複雑です となるだけの話 : Name_Not_Found [sage] 2017/12/09(土) 09:12:58.40ID:??? > 自分の書くコードをシンプルにするためにライブラリを使うのに そう思っているのはあんただけ 意味も分からずに ttp://jsmeter.info/ を使っているから、ライブラリを使うためのツールぐらいにしか思えないんだろうな : Name_Not_Found [sage] 2017/12/09(土) 10:16:41.91ID:??? それで何が言いたいのさ? 否定だけして、お前の意見が何も書いてないぞ : Name_Not_Found [sage] 2017/12/10(日) 03:05:54.10ID:??? プログラム板にも、荒らしが出てるぞ 元々、荒らしは、全部のスレで、いちゃもんを付けてくる。 漏れも、何回も攻撃されてる プログラミングの話は、一切できないくせに、批判ばっかり書いてるのが荒らし ただ、Ruby, JavaScript のスレでは、 荒らしにかまうから、喜んで居着いてるだけ 荒らしは一切、無視すべし! : Name_Not_Found [sage] 2017/12/10(日) 14:47:13.97ID:??? sortを使えばいいと思う こんな感じで let fruits = [ 'みかん', 'りんご', 'みかん', 'みかん', 'ばなな', 'りんご', 'りんご', ] let map = new Map for(let f of fruits) map.set(f, (map.get(f)|0)+1 ) let [[max]] = [...map].sort( ([,a],[,b])=>b-a ) : Name_Not_Found [sage] 2017/12/10(日) 15:18:23.37ID:??? 最大を複数取得したい場合は? : Name_Not_Found [sage] 2017/12/10(日) 16:09:19.03ID:??? 誰が複数取得したいなんていったんだ? : Name_Not_Found [sage] 2017/12/10(日) 16:19:48.14ID:??? が言ってるけど? : Name_Not_Found [sage] 2017/12/10(日) 16:20:04.59ID:??? の間違い : Name_Not_Found [sage] 2017/12/10(日) 17:45:40.53ID:??? あれに付け加えてもいいけど 別のやり方でもうちょっと汎用的な処理を書くとして例えばこういうのはどう? let fruits = [ 'みかん', 'りんご', 'みかん', 'みかん', 'ばなな', 'りんご', 'りんご', ] let ary = [] // 個数毎にグループ分けした配列を作る fruits.sort().reduce( (c,f,i,a,n=c|0) => (f==a[i+1]) ? n+1 : (ary[n] = [f,...ary[n]||[]]), 0 ) ary[0] // ["ばなな"] => 個数1 ary[1] // undefined => 個数2 ary[ary.length-1] // ["りんご", "みかん"] => 最大個数 : Name_Not_Found [sage] 2017/12/10(日) 20:34:15.96ID:??? コードゴルフってやつだね : Name_Not_Found [sage] 2017/12/10(日) 20:43:06.10ID:??? くらいなら同時に把握しない要素数が10も無いから プログラマのワーキングメモリに乗るという意味で普通のコードの範疇だと思う : Name_Not_Found [sage] 2017/12/10(日) 20:59:52.72ID:??? 関数や命令を知っているという前提で、1行の処理を把握するのに 5秒以上かかるようなものは普通のコードではないと思う コードは読むものであって、解析するものになってはいけない : Name_Not_Found [sage] 2017/12/10(日) 22:45:15.56ID:??? 場合による 行数が短く一つのブロックがスクロール無しに見れることも重要 つかそもそも読む必要はできるだけ少ないほうが良い 今回のような処理の場合ただ最大個数の要素を得るためだけに十行二十行かけるのは極めて愚策 そこからの処理が重要なんだから、普通は外部関数化する あえてインラインで書くならできるだけ目につかないように短く書いたほうが良い 仮にもしそこに問題がありそうだということになれば、一行捨てて書き直しても良い程度のものだし : Name_Not_Found [sage] 2017/12/10(日) 22:47:45.60ID:??? > つかそもそも読む必要はできるだけ少ないほうが良い ということは、ライブラリを使って読むものを減らすのが正解なわけか : Name_Not_Found [sage] 2017/12/10(日) 22:50:53.43ID:??? > fruits.sort().reduce( (c,f,i,a,n=c|0) => (f==a[i+1]) ? n+1 : (ary[n] = [f,...ary[n]||[]]), 0 ) このコードの読むもの = トークン はどれくらいあるのかざっくり数えてみた (カッコは省略、連続する変数定義は一つにまとめた) fruits sort reduce c,f,i,a,n = c|0) => ( f==a[ i+1] ) ? n+1 : (ary[n] = [ f,...ary[n] ||[] ]), 0 ) 全部で16個ぐらい これぐらいの量を、ひとつづつ意味を考えながら 読んでいかないといけない : 153 [sage] 2017/12/11(月) 01:05:24.91ID:??? にも書いた通り、Ruby でも調べたけど、 最大使用回数が複数ある場合、簡単には取得できない 最大使用回数を返す場合、1つしか返さない strHash = {"a"=>2, "b"=>1, "c"=>2} maxCount = strHash.values.max #=> 2 p strHash.select {|k, v| v == maxCount } #=> {"a"=>2, "c"=>2} まず、Hash の全要素をなめて、最大使用回数を取得して、 その最大使用回数に一致するキーを、Hash の全要素をなめて取得する 同じHash を、2回走査してしまう。 一発で取得できないから、無駄を感じる : Name_Not_Found [sage] 2017/12/11(月) 05:39:34.10ID:??? 考え方が逆 そもそも一度限りのかき捨てのコードなんだから読む必要がない 問題があれば捨てればいいだけでその時に例えばのような感じだと 4個も公開変数があるから結局一部を捨てたりということもしづらい 一部を修正しようと思えば結局全ての行とそのほかの部分の絡みを考えないといけない これもワンラインで書くなり使わない変数を削って一つの塊にすべき もしくは5行程度なら即時関数にしてスコープ限定してもいいけど 本当にデバッグを考えたら結局コメントだったりわかりやすさが足りない 逆に何度も使うんならライブラリ使ったり書いたりする もし単関数で取れるライブラリがあればそれで良し 中途半端な気遣い(?)は一番無駄 : Name_Not_Found [sage] 2017/12/11(月) 05:43:08.85ID:??? > そもそも一度限りのかき捨てのコードなんだから読む必要がない 一度限りのかき捨てのコードなんて誰が決めたの? あなたの思い込みですよね? : Name_Not_Found [sage] 2017/12/11(月) 05:53:03.70ID:??? > 問題があれば捨てればいいだけでその時に例えばのような感じだと > 4個も公開変数があるから結局一部を捨てたりということもしづらい 公開変数ってなんや? this.foo なんてのが公開変数やろ? どうみてもはローカル変数や 一部を捨てたりってなんや? 全くもって意味不明だ : Name_Not_Found [sage] 2017/12/11(月) 06:10:08.40ID:??? 初心者です。 この本( ttp://amzn.asia/386grG8 )を文中の課題をやりながら読み終わったので、 次はこちらの本( ttp://amzn.asia/cDn7CWG )に行こうと思っております。 この話を知人にしたところ、旧版( ttp://amzn.asia/cv1is9n )を持っているから貸してやろうか?と言われました。 同じ本ですが2010年の旧版です。 javaScriptの学習において そこまで問題がなければ旧版を借りようかと思うのですが、 この界隈の技術の移り変わりは早いので本書も最新版を買うべきでしょうか? : Name_Not_Found [sage] 2017/12/11(月) 08:39:09.19ID:??? 初めてのJavaScript 第3版、オライリー、2017 この本は、ES6(2015)の本だけど、 プログラミングを数年以上やっていないと、難しくて読めない 初心者は、(ECMA Script)ES3, ES5, ES6 と順番に、やった方が良いかも 今のブラウザは、ES5だけど、 ES6ではクラス構文などもできて、極端に難しくなる : Name_Not_Found [sage] 2017/12/11(月) 08:54:39.81ID:??? 間違いなく新しい方が良いけど 古いから役に立たないって訳でもない : Name_Not_Found [sage] 2017/12/11(月) 12:57:28.50ID:??? クラス構文習うよりprototype習うほうが難しくね? : Name_Not_Found [sage] 2017/12/11(月) 15:22:11.55ID:??? , ありがとうございました! : Name_Not_Found [sage] 2017/12/11(月) 15:31:05.98ID:??? あってもいいけど物理的な本は必要か?と思う : Name_Not_Found [sage] 2017/12/11(月) 16:38:16.76ID:??? あるていど経験してるとサイト検索で十分だと思うけど 最初のうちは体系立てて勉強できるように、本がいいと思う : Name_Not_Found [sage] 2017/12/11(月) 19:20:43.67ID:??? プロトタイプは超簡単 「prototype」は難しいが、それはプロトタイプベースとは関係なく 関数をクラスに見立てたJSの旧クラスシステムで必要になるもので本質とは関係がない でもプロトタイプベースで書けるようになったのはES2015からで その教え方をしている入門書なりは見たことがない : Name_Not_Found [sage] 2017/12/11(月) 20:34:04.11ID:??? phpマニュアルみたいなサイトないもんかね あれを一度ガッツリ読むとすんげーレベルアップするんだけどな : Name_Not_Found [sage] 2017/12/11(月) 23:09:50.28ID:??? > でもプロトタイプベースで書けるようになったのはES2015からで JavaScriptは最初からプロトタイプベースだよ 「俺は昔のJavaScriptはプロトタイプベースとは認めん!」というのは無しな それはお前の「オレオレ定義」であって世間一般には通用しないものだから 世間一般にはJavaScriptは最初からプロトタイプベース : Name_Not_Found [sage] 2017/12/11(月) 23:33:14.20ID:??? んだね : Name_Not_Found [] 2017/12/12(火) 02:59:49.05:MrUcGD8N HPで友達が稼げるようになった情報とか ⇒ ttp://asaswq3wq.sblo.jp/article/181819223.html 興味がある人だけ見てください。 717PZBPVIE : Name_Not_Found [sage] 2017/12/12(火) 14:42:25.20ID:??? いやいや、JSのベースがプロトタイプかどうかを言ってるんじゃなくて、 プロトタイプベースらしいプログラミングができる言語だったかを言ってるんだよ ES2015まではプロトタイプの設定が自由にできなかったんだが それでプロトタイプベースプログラミングが出来るわけ無いでしょ だから長らく継承テクニックとしてJSの内部プロトタイプの操作を利用するハックが使われてきたのよ それでもES2015でいうextendsの効果にもある 関数のプロトタイプを別の関数にするとかいう重要な操作はできなかったわけよ でも当時でも独自実装であった__proto__を使えばそれは容易にクリアできたわけで それこそがプロトタイプベースのポテンシャルなわけよ : Name_Not_Found [sage] 2017/12/12(火) 14:50:46.50ID:??? class構文追加でより難しくなるかどうかの話だったと思うが : Name_Not_Found [sage] 2017/12/12(火) 16:05:59.03ID:??? とりあえず自分が言いたいことは、prototypeプロパティやnew演算子を使った継承周りのテクニックは 確かに簡単とは言いにくく、class構文はその点分かりやすいけれど、 勘違いしてほしくないのは『プロトタイプ』を活用した継承システムは本来簡単なはずなんだってこと でもJSでは長らく活用が許されてなかったので、プロトタイプベースOOPの文化や学習が整っていないということ : Name_Not_Found [sage] 2017/12/12(火) 21:23:35.72ID:??? 因みにプロトタイプベースらしい書き方ってどんな感じ? TypeScriptメインだからよくわからんのだ : Name_Not_Found [sage] 2017/12/12(火) 22:15:37.27ID:??? 最初から用意されている1つのクラスシステムに縛られないのがプロトタイプベースの良さと言っても 大きなコードを書けば自ずと抽象化の結果として何らかのクラスシステムを作ることになる 既存のJSの2つのクラスシステムは当然内部的にプロトタイプベースのプロトタイプ設定を利用しているのを見ても分かるが プロトタイプの自由な設定機能がないとまともなクラスシステムを作るのは困難 一番わかり易い形で具体的に絶対にできないことを挙げるなら上で書いたように関数のプロトタイプ設定 つまり関数へのメソッドの継承が実現できない 因みにプロトタイプベースらしい書き方って言うのも一概には言えないのかもしれないし、 実際はコンストラクタ的な機能を考えたりしてクラスシステムを構築する場合もある そもそも自分がこれを挙げた理由は継承の概念を理解するのが簡単ということで 本当に単純なプロトタイプの設定だけでOOPが円滑にできるとは言わない その上で書くと : Name_Not_Found [sage] 2017/12/12(火) 22:16:46.34ID:??? class B { m() { return 6 } } class A extends B { m(){ return 7 * super.m() } } let o = new A o.m() というのと let B = { m() { return 6 } } let A = { __proto__: B, m(){ return 7 * super.m() } } let o = { __proto__: A } o.m() というの、初めて継承やらを理解する時にはオブジェクトだけで説明できる後者の方が仕組み理解し易くないか? 少なくとも、class構文でない旧クラスシステムで書いたコードと比べたら明らかにそうだよねってこと : Name_Not_Found [sage] 2017/12/12(火) 22:19:09.90ID:??? いや、だからそれはあんたの「オレオレ定義」であって 世間一般ではJavaScriptはプロトタイプベースのオブジェクト指向だって 最初から言われてる 言われているかどうか。事実の話をしている。 あんたが認めるかどうかじゃない : Name_Not_Found [sage] 2017/12/12(火) 22:23:27.86ID:??? 俺は前者だな 知ってるからかもしれんが class構文がなかったころと比べたら まあどっちも理解しやすい : Name_Not_Found [sage] 2017/12/12(火) 22:36:46.52ID:??? > つまり関数へのメソッドの継承が実現できない それはクラスベースでは当たり前にある機能で プロトタイプベースはクラスベースと同じ機能が なければないと思ってるからだよね? つまりあんたはクラスベースとプロトタイプベースを 違うものだって考えられてないってこと プロトタイプベースをクラスベースの書き方を変えただけと思ってるから クラスベースと同じ機能がない=プロトタイプベースではない という意味がわからないことになってるんだよ。 : Name_Not_Found [sage] 2017/12/12(火) 22:39:48.00ID:??? ようするに「プロトタイプベースのオブジェクト指向」を やるのであれば昔のJavaScriptでもそれは普通にできる プロトタイプベースのオブジェクト指向で クラスベースの真似事をしようとするから 機能が足りないって思ってしまう プロトタイプベースでやるならば、 別に最初から機能は不足してない : Name_Not_Found [sage] 2017/12/12(火) 22:43:55.05ID:??? これも一応書いておくか 言いたいことはいろんな形のオブジェクト指向があるということ ttps://codezine.jp/article/detail/3708 > 継承は決してオブジェクト指向の必須技術ではありませんが > (実際、継承を持たないオブジェクト指向言語も存在しています)、 : Name_Not_Found [sage] 2017/12/12(火) 22:56:59.96ID:??? 完全にJS流クラスシステムに毒されてんな 自分はプロトタイプベースのメリットは最初から用意されているクラスシステムに縛られないことって言ったでしょ? でも旧JSは半分、いや3/4くらい縛られてたわけよ 旧JSでプロトタイプベースっぽい、つまりクラスに縛られない固い言語でない特徴が現れていたのは オブジェクトとプロパティのゆるさだけで、ここで問題にしている継承周りに関しては 他のクラスベース言語同様に縛られていたし、むしろクラスシステムがクソな分状況が酷かった だからみんな旧クラスシステムの内部のプロトタイプ操作を利用する 『機能が十分なクラスシステム』をいろいろ考えてたわけじゃん それでも関数のプロトタイプ設定はできないってことが長年の悩みだったわけだけどね それと話を整理するけど プロトタイプベースでも機能は足りるっていうのは話が食い違っている よく考えてみて それって、new演算子やprototypeプロパティを使えば、 プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ? でもこちらはそもそもそのnew演算子やprototypeプロパティを使ったJS流旧クラスシステムの複雑さと 本来のプロトタイプベースでの継承実現の簡潔さを比較してるんだよ 話がおかしいよね? あとそちらこそプロトタイプベースとクラスシステムの関係を分かっていないようだけど プロトタイプベースでも、デフォルトのクラスシステムがあることとは矛盾しない それに縛られないってことが重要だからね : Name_Not_Found [sage] 2017/12/12(火) 23:08:03.69ID:??? > それって、new演算子やprototypeプロパティを使えば、 > プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ? いわんよ? 継承はオブジェクト指向に必須ではない。 new演算子やprototypeプロパティを使えば、 プロトタイプベースのオブジェクト指向が実現できる それだけ : Name_Not_Found [sage] 2017/12/13(水) 12:54:32.31ID:??? 分かった分かった、自分が悪かった 『継承』っていうのをクラスベース的な捉え方してクラス同士の話だけと思っている人がいるようだから話が食い違うんだな 自分が言っているのはプロトタイプ的継承だったり、もっと一般的な「継承」の話だから 例えばでも引用されているWikipediaを見てくれ ttps://ja.wikipedia.org/wiki/%E7%B6%99%E6%89%BF_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0) まさに序文に書かれている『あるオブジェクトが他のオブジェクトの特性を引き継ぐ場合』っていうのを指して言ってる だからnew演算子やprototypeプロパティだって継承のための機能なんだよ 要するに継承が云々言ってきたのは、(ある程度構造化した状態で)プロトタイプチェーンを繋げるのは云々って話だから : Name_Not_Found [] 2017/12/13(水) 17:21:42.62:EPMhIZDs テスト : Name_Not_Found [] 2017/12/13(水) 17:41:49.02:EPMhIZDs スクリプト書こうとするとNGワードが出て書き込めない… 質問したいのに〜 : Name_Not_Found [] 2017/12/13(水) 17:42:50.07:EPMhIZDs var elmDiv = document.createElement('div'); var hoge = document.getElementsByClassName('test'); hoge[1].parentNode.insertBefore(elmDiv, hoge[1].nextSibling) ↑のようなスクリプトを書いて <div class="test"> <div class="test"> 【追加のDIV[1]】 <div class="test"> 【追加のDIV[2]】 <div class="test"> ↑のような形でDIVを複数追加したいのですが、書き方がわかりません; hoge[1]のみだと正しく追加されるのですが、hoge[2]を書くと上書きされてしまいます。。 任意の配列に複数要素を追加する書き方をご教授願えませんでしょうか…? : Name_Not_Found [sage] 2017/12/13(水) 21:40:35.76ID:??? まだ話が食い違ってるな。 俺が最終的に言いたいことは、JavaScriptは昔からプロトタイプベースの オブジェクト指向だってことだけだよ で君がいいたいことはだいたい分かる。 それに対して反論するならば、 [君がいいたいこと] 昔のJavaScriptは継承がやりにくい それは事実だろう。だがやりにくいからといってもできる以上 プロトタイプベースであることを否定することにはならない。 つまり継承がやりづらいプロトタイプベースのオブジェクト指向 [君がいいたいこと] 一般的な「継承」ができない(面倒) 大変でもできる。できるのだからオブジェクト指向と言える。 それにそもそも継承はオブジェクト指向の必須要件ですらない だからプロトタイプベースのオブジェクト指向 わかる? 継承があってもなくても、面倒であってもそうでなくても JavaScriptは昔からプロトタイプベースのオブジェクト指向なんだよ : Name_Not_Found [sage] 2017/12/13(水) 22:04:20.84ID:??? 本当にNGワード?ブラウザで書き込めるんじゃない?って思わなくはないが、 jsfiddleあたりで動く最低限のサンプルコード書いてから質問すればいい : Name_Not_Found [sage] 2017/12/13(水) 22:04:39.62ID:??? あ、ごめんを見てなかった : Name_Not_Found [sage] 2017/12/13(水) 22:49:20.89ID:??? あ、やっぱり動く最低限のサンプルコード書いてもらわないとダメだな divがネストしてるのかどうかわからんから答えられん : Name_Not_Found [sage] 2017/12/13(水) 22:58:43.71ID:??? 任意の配列とか言ってるのに、1以上から始まってるのが謎だし じゃあ複数とはいくつまでなのかとか書いてないし情報が足りんだよ まあ、情けでエスパーして(いつも通りjQueryで)書いてやったが 次はもれなく情報を書くか、jsfiddleにサンプル書くか、その両方をやってからレスしてくれ ttps://jsfiddle.net/ft3aegkx/ : Name_Not_Found [sage] 2017/12/13(水) 23:24:52.73ID:??? >上書き 上書きの意味がよくわからんが、 2回目の追加は、実際は1回目に追加した elmDiv の移動になった ということか? 追加するたびに createElement(cloneNodeでもOK)で 新たに要素を作成しないとそうなる : Name_Not_Found [sage] 2017/12/14(木) 03:14:36.36ID:??? 要素を2つ、追加したいのなら、 まず要素を2つ、作った(new した)かどうかを確かめる : Name_Not_Found [sage] 2017/12/15(金) 01:37:08.42ID:??? var aaa=undefined; とのか変数にundefinedを入れるって文法的に正しいのでしょうか? undefinedって変数未定義のときにwebコンソールとかで出ると 考えているため、変数に代入することはないと思ってんですけど どうなのでしょうか? : Name_Not_Found [sage] 2017/12/15(金) 01:52:06.85ID:??? 文法的には問題ない NaNとかと同じ ただ変数に直接入れるような使い方が相応しい場面はかなり少ないと思う : Name_Not_Found [sage] 2017/12/15(金) 02:28:46.69ID:??? undefined は、JS の実行環境が使うもの プログラマーが使うのは、null : Name_Not_Found [] 2017/12/16(土) 20:43:37.18:G0N7qOwo すいません、正規表現について教えてください メールアドレス判定の許可として下記条件にプラスして /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/ 空(何も無い)も許可として追加したいのですが どのように書いたらよいでしょうか・・ : Name_Not_Found [sage] 2017/12/16(土) 21:32:25.56ID:??? /^(^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$)?$/ 出来なくもないけど非常に分かり辛い 文字列長0で分岐させたほうが良さそうな気がする : Name_Not_Found [sage] 2017/12/16(土) 22:03:00.98ID:??? 正規表現をそのまま使うやつは馬鹿 名前をつけて使え 名前というのは関数名のことだ。 function is_email(email) { 正規表現チェック } 空を許可するんだろう? function is_email(email) { emailが空なら return true 正規表現チェック } こうすればよかろう : Name_Not_Found [sage] 2017/12/17(日) 03:05:23.03ID:??? , ありがとこのやろう : Name_Not_Found [sage] 2017/12/17(日) 18:24:28.70ID:??? 質問です 環境はvagrantでubuntu16.04を使用してます vue-cliを使ってるんですけどnpm run buildしてlocalhost:8080にアクセスできません。 ポートフォワーディングは8080→8080で設定しています。 http_proxyも設定しています。 ローカルホストからアクセスする方法を教えてください : Name_Not_Found [sage] 2017/12/17(日) 22:08:55.18ID:??? ですが、自己解決しました : Name_Not_Found [] 2017/12/20(水) 22:43:03.65:aEN4Dhcy buttonをclockすると、現在値を取得し、 lat(緯度)、lng(経度)、distance(距離)をgetパラメータとして渡し、同じページに遷移したいと思っています ・lat(緯度)、lng(経度)はgetCurrentPositionの引数のfunctionから取得 ・distanceはbuttonタグの属性から取得。 例)<button data-distance="1000"> lat(緯度)、lng(経度)はは取得できましたが、distanceは取得できませんでした 何故でしょうか? $(function(){ $("button").click(function(){ navigator.geolocation.getCurrentPosition( function(pos){ var crd = pos.coords; var url = location.href; url = url.replace(/\?.*$/,""); window.location.href = url +'?lat='+ crd.latitude + '&lng=' + crd.longitude+ '&distance=' + $(this).data('distance'); }, function(){ console.log('error'); } ); }); }); : Name_Not_Found [sage] 2017/12/20(水) 22:46:17.45ID:??? thisがbuttonじゃないから : Name_Not_Found [] 2017/12/20(水) 22:50:44.82:aEN4Dhcy 高速回答ありがとうございます! もうちょっと考えてみます : Name_Not_Found [sage] 2017/12/20(水) 22:51:32.51ID:??? $(this).attr でええやろ dataはキャッシュかなんかですげー使いにくいぞ : Name_Not_Found [] 2017/12/20(水) 22:58:53.90:aEN4Dhcy スコープの問題と分かりました こういう場合はどう解決すればいいんでしょうか? グローバル変数にする、DOMにclassをつける、などが思い浮かびましたが違う気がしてなりません お助け下さい・・・ : Name_Not_Found [sage] 2017/12/20(水) 23:14:05.38ID:??? $(function() { $('button').click(function() { var distance = $(this).data('distance'); navigator.geolocation.getCurrentPosition( function(pos) { var crd = pos.coords; var url = location.href.replace(/\?.*$/, ''); window.location.href = url +'?lat='+ crd.latitude + '&lng=' + crd.longitude+ '&distance=' + distance; }, function() { console.log('error'); } ); }); }); : Name_Not_Found [sage] 2017/12/20(水) 23:18:10.18ID:??? 答を書きはしたがな、これは、 : Name_Not_Found [sage] 2017/12/20(水) 23:20:49.27ID:??? なるほどー!なるほど!ありがとうございます jsって難しいですね : Name_Not_Found [sage] 2017/12/20(水) 23:45:36.06ID:??? idすげーな : Name_Not_Found [sage] 2017/12/21(木) 00:01:56.80ID:??? locationの部分、これでいいのかな? あまり$.paramって使わんのよね $(function() { $('button').click(function() { var distance = $(this).data('distance'); navigator.geolocation.getCurrentPosition( function(pos) { var crd = pos.coords; window.location.search = $.param({lat: crd.latitude, lng: crd.longitude, distance: distance}); }, function() { console.log('error'); } ); }); }); : Name_Not_Found [sage] 2017/12/21(木) 00:19:46.53ID:??? attr使うぐらいなら、<input type="hidden" name="distance" value="1000> だな なぜかって? GETのパラメータだからだよ 現在地の取得をどうにかできるならば、HTMLだけでこれで実行できるでしょ? <form> <input type="hidden" name="lat" value="?"> <input type="hidden" name="lng" value="?"> <input type="hidden" name="distance" value="1000"> <input type="submit"> </form> これにJavaScriptで現在地を入れ込むという処理を割り込ませると考える : Name_Not_Found [sage] 2017/12/21(木) 00:23:35.43ID:??? 例えばこんな感じ $(function() { $('form').on('click', ':submit', function(event) { var form = event.delegateTarget; event.preventDefault(); navigator.geolocation.getCurrentPosition( function(pos) { var crd = pos.coords; form.lat.value = crd.latitude; form.lng.value = crd.longitude; $(form).submit(); }, function() { console.log('error'); } ); }); }); コードを短く出来たわけじゃないけど HTMLだけで動くことを確認して、その続きで 処理を加えていくという作り方ができる : Name_Not_Found [sage] 2017/12/21(木) 07:48:48.11ID:??? 現在地の取得はhttpsにしないとエラーが出るゾ 気づいたら昔作ったサービスが動いてなかったゾ : Name_Not_Found [sage] 2017/12/24(日) 14:53:18.88ID:??? ttp://www6.kaiho.mlit.go.jp/02kanku/aomori/tappisaki_lt/livecamera/index.html ここのライブカメラを見ようとするとJAVAのセキュリティの警告とやらが出て表示されないんですが、 どうすれば見れる様になりますか? : Name_Not_Found [sage] 2017/12/24(日) 23:49:35.67ID:??? ここは、JavaScript のスレです Java ではありませんので、スレ違い! : Name_Not_Found [sage] 2017/12/26(火) 05:01:29.75ID:??? 動画サイトを見ていて、動画ページでコメントだけを見たいときとかに、ページを軽くしようとして $("video").remove(); とか $("video").parent().remove(); とかするのですが、これだと音声は再生されたままになってしまいます コントローラーは消えるので音声を止められないし、ミュートだとちょっと重くなりそうなので ムービー関係のもの全て消す方法ってないでしょうか? 例サイトはYouTubeです : Name_Not_Found [sage] 2017/12/26(火) 09:27:00.46ID:??? 再生を止めればいいだけで消す必要なくない? : Name_Not_Found [sage] 2017/12/26(火) 13:35:26.16ID:??? pause() を使うとか、src属性を無効なURLに設定するとか : Name_Not_Found [sage] 2017/12/26(火) 18:42:35.36ID:??? for (var video of document.querySelectorAll('video')) { video.pause(); video.parentNode.removeChild(video); } : Name_Not_Found [sage] 2017/12/26(火) 18:48:41.82ID:??? ,264 再生を止めても、裏では動画や音声は読み込まれてるので、やっぱり結構CPUメモリ食べちゃうんですよね 無効なURLにするの良さげですね ありがとうございます : Name_Not_Found [sage] 2017/12/26(火) 20:46:29.51ID:??? は?PentiumDでも使ってんの? : Name_Not_Found [sage] 2017/12/26(火) 21:33:20.14ID:??? まあ環境は人それぞれだから : Name_Not_Found [sage] 2017/12/26(火) 23:15:45.24ID:??? 一時期軽くしたいと思っていたときは、 そういったものは原則OFFで、必要なときだけ再生するようにしていたな 昔はProximitronでHTMLを書き換えて実現していた、 比較的最近はブラウザの機能でFlashを自動的に再生しないようにしていた もしかしたらブラウザに動画を自動的に再生しないような 設定があるんじゃないかな? もし今の俺が同じことをやろうとしたら、ブラウザのプラグインである TampermonkeyかStylishを使うかな? 実現できるか知らんけど : Name_Not_Found [sage] 2017/12/26(火) 23:27:25.73ID:??? おみとろん懐かしいな 今ならTampermonkeyだろうけど 本気でコメントだけ読みたいならapiを叩くという手もある : Name_Not_Found [sage] 2017/12/27(水) 17:13:45.73ID:??? EcmaScriptという言葉はES5あたりから良く聞くようになったと思いますが それより前のES3相当のJavaScriptも、 EcmaScriptの標準を参照して作られていたのでしょうか? : Name_Not_Found [sage] 2017/12/27(水) 22:16:48.95ID:??? ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources ECMAScript は JavaScript の基礎を成すスクリプト言語です。 ECMAScript は標準化団体 ECMA International によって ECMA-262 および ECMA-402 specifications として標準化されています。 次のような ECMAScript 標準が承認済みおよび策定中です: : Name_Not_Found [sage] 2018/01/05(金) 15:14:20.79ID:??? ショッピングサイトにビットコイン決済を導入した際に、価格表記をビットコイン、マウスを重ねたら円表記が出るシステムを外注したいのですが、JavaScriptで大丈夫でしょうか? : Name_Not_Found [sage] 2018/01/05(金) 19:50:26.20ID:??? できるよ マウスオーバーで表示変わるのはJavaScriptの得意とするところだから問題ない 単純なのならCSSでもできる リアルタイムな相場の取得はAPIでできる 仮想通貨の各取引所がAPIを公開してるからそれ使えばいい 取引所によって取得の仕方や形式が違うからその辺は好みかな ずっと提供されるかは保証ないからいくつかをフェイルオーバー的に作っておいた方がいい : Name_Not_Found [sage] 2018/01/05(金) 20:07:44.63ID:??? 事細かにありがとうございます。 プログラミングの知識はないのですが、外注に当たって方向性だけでも確認したかったので助かりました : Name_Not_Found [sage] 2018/01/06(土) 00:41:01.92ID:??? HTMLは初級ぐらいでJavaScript(TypeScript)も普通ぐらいには使えるようになって、 Reactも使えるようになったのですが、目的のUI作れません。 WPF/UWPならXAMLとコントロール使って、AndroidならレイアウトファイルとViewコントロールを使って 複雑でないUIならとりあえず普通に作ってアプリ作れるんですが。 自分のレベルだとWebアプリだとかなり死ねます。 例えば、ちょっとこの項目を右寄せ表示するにしてもできねぇーとかのレベルです。 やっぱ、CSSを覚えるしかないのでしょうか??みなさんはバリバリCSS使いこなしてるんでしょうか?? : Name_Not_Found [sage] 2018/01/06(土) 00:44:40.86ID:??? の続きです。 例えば、Material UIなどReact用のコンポーネントはドキュメント見れば普通には使えるようになったんですが、 タブにアイコンつけたいとか、リスト表示でこの項目を右寄せしたいとか Reactコンポーネントのプロパティに用意されてないことやると、 とたんにダメなレベルで、UIがつくれません。 : Name_Not_Found [sage] 2018/01/06(土) 06:18:30.78ID:??? cssも覚えないと、結局細かい事は何も出来ない >タブにアイコンつけたい font-awesomeのver4を使う >リスト表示でこの項目を右寄せ text-align:right : Name_Not_Found [sage] 2018/01/06(土) 15:00:09.67ID:??? > やっぱ、CSSを覚えるしかないのでしょうか??みなさんはバリバリCSS使いこなしてるんでしょうか?? HTMLもCSSも使いこなしてるよ。というかJavaScriptだけでやろうとしたら破綻する 基本的にJavaScriptではデザインは作らない JavaScriptでやるのは状態に応じてclassを設定するとかそういうことぐらい そのclassに応じてどういう見た目にするかはすべてCSSで行う そうしないと面倒なだけだから 逆にCSSを使いこなすと処理とデザインの責任範囲が明確になるから コードはシンプルになるし、デザインの修正も簡単になる : Name_Not_Found [sage] 2018/01/06(土) 16:26:17.74ID:??? 個人的には細かいこと気になるならCanvasの方がオススメ : Name_Not_Found [sage] 2018/01/06(土) 16:54:45.33ID:??? CSS勉強します(´・ω・`) : Name_Not_Found [] 2018/01/07(日) 12:45:39.51:PY90DREO 規制で書き込めなかったけど読ませていただきました。 無事解決しました!ありがとうございました(遅) : Name_Not_Found [] 2018/01/08(月) 14:31:08.81:nlt9GcxA 【大イスラエル帝国】「覚えておけ、我々は数百万人を殺した」 ((゜Д゜;;))) こんなのが直接来るのよ ttps://rosie.5ch.net/test/read.cgi/liveplus/1515114599/l50 : Name_Not_Found [sage] 2018/01/08(月) 14:39:06.71ID:??? 「当方のエージェントは、追跡を避けるためメールアドレスを毎週変更している。 かあわいい : じゃがりきん [] 2018/01/11(木) 23:10:13.35:ZlMal6Wd ついに宇宙一難解なパズルが完成しました・・ その名も 『宇宙一難解なパズルゲーム』!! ttp://jagarikin.html.xdomain.jp/pzl.html htmlでできてるのでブラウザから手軽に宇宙一難解なパズルをプレイできるよ〜 : Name_Not_Found [sage] 2018/01/11(木) 23:52:10.05ID:??? 5年ぶりに触り始めたんですけども、 var不要論ってなんすかね? : Name_Not_Found [sage] 2018/01/12(金) 06:53:35.21ID:??? let, constが使えるならvarで宣言する意味はない(少なくともletに置き換えて問題ない) そして現状、メジャーな環境では使える それならvarいらんよね、という主張かと : Name_Not_Found [sage] 2018/01/12(金) 20:49:25.76ID:??? コールバックの中のreturnについてお伺いします。 ttps://azu.github.io/promises-book/#promises-overview の中の、promise-workflow.jsについてなのですが、 このサンプルコードを仮に2連続で呼び出すように改変する場合、A部分を asyncFunction() .then(function (value) { console.log(value); // => 'Async Hello world' return asyncFunction() }).then(function (value) { console.log(value); // => 'Async Hello world' }) のように書くかと思うのですが、最初のthenの中の、 return asyncFunction()のreturnは、関数を実行するだけなのになぜ必要なのでしょうか? 以前も別件でfoo.map( ( x ) => x*2 )を foo.map( ( x ) => { x*2 } )と書いてしまい、returnでハマりました。 どなたかこのreturnのミステリーについて教えてください。 : Name_Not_Found [sage] 2018/01/12(金) 21:07:47.77ID:??? > 関数を実行するだけ ではない。 asyncFunction() は promise も返す。 2 つめの then は、その promise がresolveされたときに呼ばれることになる : Name_Not_Found [sage] 2018/01/12(金) 21:11:10.05ID:??? 訂正 2 つめの then は、… → 2 つめの then の中のfunctionは、 … : Name_Not_Found [sage] 2018/01/12(金) 21:26:37.01ID:??? ありがとうございます。 asyncFunction() .then(function (value) { console.log(value); // => 'Async Hello world' asyncFunction() }).then(function (value) { console.log(value); // => 'Async Hello world' }) この書き方では動かないのは、これではpromiseが返ってこないということです…かね? 説明が下手で本当に申し訳ないです。 : Name_Not_Found [sage] 2018/01/12(金) 21:28:31.31ID:??? Promiseのthenメソッドが返すPromise Tはthenメソッド中でPromise Rを返した場合 Rの解決を待って、その解決値を持ってTが解決されることになる つまり実質的にT==Rと言うように振る舞わせることが出来る つまり、 非同期A .then( Aの解決値を得て、別の非同期Bを実行 ) .then( Bの解決値を得て、別の非同期Cを実行 ) .then ...... というようにどんどんthenを繋げて行くことができる 勿論then中でそのチェーンとは独立したPromiseを作成することを繰り返してもいいが、 そうすると所謂コールバック地獄のようにネストが深くなってしまう それを平坦化するためにこの機能がある : Name_Not_Found [sage] 2018/01/12(金) 23:00:30.24ID:??? 2つめのthenで捕まえられるようにだろ。 : Name_Not_Found [sage] 2018/01/12(金) 23:01:42.96ID:??? 失礼、リロードしてなかった。 : Name_Not_Found [sage] 2018/01/12(金) 23:12:06.81ID:??? Promiseをreturnするのが自然だけど 気持ち悪いなら別にこう書いたって良い ttps://jsfiddle.net/4kks4bns/ : Name_Not_Found [sage] 2018/01/12(金) 23:45:26.63ID:??? 皆さん、ありがとうございました。 ようやく納得がいきました。 : Name_Not_Found [sage] 2018/01/13(土) 00:15:17.83ID:??? この流れで理解できたのか・・・? なんか質問者も回答者もずれまくってる気がするんだが : Name_Not_Found [sage] 2018/01/13(土) 00:27:58.22ID:??? なぜか納得してるようだが、これで納得できるはずがないので勝手に説明するわ まず基本(?)系。thenを二回続けているが、asyncFunction()は 一回しか読んでないパターン asyncFunction() .then(function (value) { console.log(value); // => 'Async Hello world' ・・・(1) }).then(function (value) { console.log(value); // => undefined ・・・(2) }); (2)でundefinedになっているのは、1回目のthenで何もreturnしてないから JavaScriptは関数で何もreturnしてない場合はundefiendになる (Rubyなどのように最後に評価された値ではない) 次のように、thenでreturnすれば次のthenの関数の引数に渡すことができる asyncFunction() .then(function (value) { console.log(value); // => 'Async Hello world' ・・・(1) return value; }).then(function (value) { console.log(value); // => 'Async Hello world' ・・・(2) return value; }); : Name_Not_Found [sage] 2018/01/13(土) 00:37:04.30ID:??? の例では、return valueと単なる値を返した、 単なる値を返すと、次のthenの引数になるが、 単なる値の代わりにPromiseオブジェクトを返すこともできる function newPromise() { return new Promise(function (resolve, reject) { resolve('new-promise'); }); } asyncFunction() .then(function (value) { console.log(value); // => 'Async Hello world' ・・・(1) return newPromise(); // 参考 return Promise.resolve('new-promise') と書いても良い }).then(function (value) { console.log(value); // => new-promise' ・・・(2) return value; }); この場合、2番目のthenの関数の引数には、Promiseオブジェクトが渡されるのではなく、 Promiseでresolveされた値(new-promise)が渡される もしnewPromiseがresolveするまでに時間がかかる場合は、 2番目のthenが呼び出されるまで時間がかかるということ thenで単なる値を返した場合は、次のthenはすぐに実行される。 すぐにresolveされたのと同じだと考えればいい このように、thenでreturnするのは単なる値でもPromiseオブジェクトでも良いという 仕様のために、Promiseを返さない単なる関数をあとからPromiseに変えても 同じように動かすことができる。同期と非同期の違いを吸収していると考えることができる。 : Name_Not_Found [sage] 2018/01/13(土) 00:45:35.15ID:??? でreturnしない場合、 asyncFunction() ・・・(a) .then(function (value) { console.log(value); // => 'Async Hello world' ・・・(1) asyncFunction() ・・・(b) }).then(function (value) { console.log(value); // => undefined ・・・(2) }) (a)のasyncFunction()につながってるthenの結果として (1)と(2)のconsole.logが実行される。 (2)のconsole.logがundefinedなのは間違いではない。 なぜならthenでreturnしてないのだから当然undefinedになる (b)のasyncFunction()は何の意味も持たない。なぜなら(b)がresolveしても その後にthenがないので(b)の結果としては何も出力しない returnした場合は意味が異なる。(a)の1番目のthenの戻り値はPromiseオブジェクト そのため(b)がresolve()された後にresolve()された結果が2番めのthenに渡される。 asyncFunction() ・・・(a) .then(function (value) { console.log(value); // => 'Async Hello world' ・・・(1) return asyncFunction() ・・・(b) }).then(function (value) { console.log(value); // => 'Async Hello world' ・・・(2) }) 注意として(1)のvalueと(2)のvalueは(同じ文字列だが)違うオブジェクト (1)は(a)がresolve()された結果だが、(2)は(b)がresolve()された結果 : Name_Not_Found [sage] 2018/01/13(土) 00:49:38.49ID:??? の > 以前も別件でfoo.map( ( x ) => x*2 )を > foo.map( ( x ) => { x*2 } )と書いてしまい、returnでハマりました。 これは単純な勘違いをしているだけ { } を省略したら return も省略できる { } で囲んだら return が必須 というだけの話 個人的にはアロー関数は、関数っぽく見えないのも利点の一つだと思ってるので 前者の書き方をおすすめする。 { } をつけて returnを書いて、ましてや { } の中に 複数の式や文を書くのはなんか違うと思ってる : Name_Not_Found [sage] 2018/01/13(土) 02:25:38.45ID:??? これ何に描画してんの? : Name_Not_Found [sage] 2018/01/13(土) 09:05:24.97ID:??? ありがとうございます。自分の納得は低レベルでした。 めちゃくちゃわかりやすかったです。精進します。 : Name_Not_Found [sage] 2018/01/13(土) 20:09:36.72ID:??? お前それforEachさんの中でもおんなじこと言えんの? : Name_Not_Found [sage] 2018/01/13(土) 20:12:13.36ID:??? forEachとか使わないな。 普通はmapとか使う : Name_Not_Found [sage] 2018/01/13(土) 22:06:05.52ID:??? 個人的にforEachは名前をforやeachにしなかったのが結構な失敗だと思ってる : Name_Not_Found [sage] 2018/01/13(土) 22:33:45.51ID:??? 普通って何よ。お前の普通なんて知らんがな。 javascriptで副作用だけ使いたい場面なんていくらでもあるだろう。 console.log使って例示すると、 ['foo', 'bar'].forEach(item => { console.log(item); }); map使うってお前…これをお前は ['foo', 'bar'].map(item => console.log(item)); と書くのか? [undefined, undefined]なんて生成してなんに使うの? なんでもかんでもmapはダメだろ。それぞれ想定されてる用途がある。 あとアロー関数の{}にreturn必須とか嘘教えんな。 複数の文を書くなと言うのもどういうことだ。 ちょっとしたcompare function書くとき、読みやすさや入力値チェック処理などで複数行になったらアローじゃなくてfunction(){}使えってこと? どんなオレオレルールだ。わけの分からない縛りいれるのならアロー関数なんてやめたら。 ['大', '小', '小', '中', '中', '大'].sort((a, b) => { const order = ['小', '中', '大']; return order.indexOf(a) > order.indexOf(b); }); : Name_Not_Found [sage] 2018/01/13(土) 23:07:38.78ID:??? 普通こうやるからなぁ console.log(['foo', 'bar']); : Name_Not_Found [sage] 2018/01/13(土) 23:21:26.18ID:??? おじいちゃん、配列の要素をそれぞれログするのと配列をそのままログするのは違うでしょ。 前者は foo bar 後者は [ 'foo', 'bar' ] になるでしょ。 ロシアのえんぴつ的なことが言いたいならそもそもブラウザのデベロッパーツール使えばいいでしょ。 でもそういう話じゃないから。 : Name_Not_Found [sage] 2018/01/13(土) 23:25:42.43ID:??? まあ普通にこうかくだろうな 何度もconst order = ・・・を実行するのは無駄だし const order = ['小', '中', '大']; const data = ['大', '小', '小', '中', '中', '大']; data.sort((a, b) => order.indexOf(a) > order.indexOf(b)); : Name_Not_Found [sage] 2018/01/13(土) 23:27:40.62ID:??? ごもっともな指摘。 もっとちゃんとした例考えないとな… : Name_Not_Found [sage] 2018/01/13(土) 23:30:14.31ID:??? ちなみに最後の data.sort((a, b) => order.indexOf(a) > order.indexOf(b)); は、order.indexOfを二回書くの無駄だと思わね? lodash使うとこう書ける _.sortBy(data, v => order.indexOf(v)); : Name_Not_Found [sage] 2018/01/14(日) 01:12:23.56ID:??? へぇー思想違うんだなぁ。 考えてみてもこの仕様で困る例が思い付かない。 素のsortでは表現できてlodashのsortByでは無理な比較仕様ってあるのかな : Name_Not_Found [sage] 2018/01/14(日) 01:35:02.67ID:??? 思想? 違いがあるとしたら まあ何かやりたいことがあって、それを実現するためには どういうふうに処理したらいいか?と考える人と やりたいことがそのままコードになってないと気がすまない人の違いかな 俺は「文字の小さい順に並び替えたい」と思ってるから コードには「文字」「大小を求める」「並び替える」この3つぐらいしか 登場してほしくないんよ。人間の思考の通りのコードになって間違いが少なくなる 一方で、並び替えるには文字と文字をそれぞれ数値化したものを比較する関数を ソート関数に渡せば実現できるという、やりたいことを処理に置き換えてからコードにするやつもいる 処理を考えてしまうから、こっちのやり方では冗長化してしまうんだよ。それが困ることだな : Name_Not_Found [sage] 2018/01/14(日) 09:38:18.99ID:??? あれは何に描画してんの? : Name_Not_Found [sage] 2018/01/14(日) 18:32:38.21ID:??? あり得そうな気がするが、相当なレアケースじゃないかな。事実上困らない : Name_Not_Found [sage] 2018/01/14(日) 18:37:15.54ID:??? 複数の値で比較したい場合はどうすんの? : Name_Not_Found [sage] 2018/01/14(日) 23:29:09.25ID:??? こういうこと? ttps://lodash.com/docs/4.17.4#sortBy var users = [ { 'user': 'fred', 'age': 48 }, { 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }, { 'user': 'barney', 'age': 34 } ]; _.sortBy(users, ['user', 'age']); // => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]] : Name_Not_Found [sage] 2018/01/15(月) 06:30:58.52ID:??? ライブラリ使う必要ない場面で ここでしか見ないナントカってのを執拗に勧めるやつまだいたのか 害悪だなぁ : Name_Not_Found [sage] 2018/01/15(月) 14:39:23.27ID:??? ここでライブラリを使うって事は間違ってないと思うよ ただsortByっていう名前での 結局ライブラリを覚えないと自明ではない振る舞いは好きじゃないし それがこの一時で便利だとは思わない : Name_Not_Found [sage] 2018/01/15(月) 15:17:45.29ID:??? さよかw : Name_Not_Found [sage] 2018/01/15(月) 23:13:05.92ID:??? sort by というのは例えばRuby標準にも有るしよく知られた単語なんだよ プログラマにとって、for といえば ループねって わかるように、sort by というだけで何をするのか知ってるもの それに対して、オレオレライブラリで勝手な名前を作ると困る それが何をするのかわからない 同じ覚えることでも、一般的なものを覚えるのと プロジェクト固有のものを覚えるのとでは、覚える価値が違う lodashはよく知られたアルゴリズムをよく知られた名前で実装してるので 覚える価値が高い。たとえ使わなくても知っておいたほうが良いものばかりだよ : Name_Not_Found [sage] 2018/01/16(火) 07:49:09.00ID:??? 他の言語にあるって然程重要では無いと思うけどね 特に補完が弱い動的型付け言語のJSでは いかに他のJS周りの標準と命名規則を揃えて 振る舞いや型を想像付かせるかが大事 JSにsortByのような文化は無いのだから なんぼRubyやらにそれがあると言われても 多くのJSerはローダッシュのsortByと覚えることになるのよ : Name_Not_Found [sage] 2018/01/16(火) 14:05:09.25ID:??? Kotlin なら Kotlin 2 ttps://mevius.5ch.net/test/read.cgi/tech/1509462463/18 : Name_Not_Found [sage] 2018/01/16(火) 22:43:30.12ID:??? > JSにsortByのような文化は無いのだから 世界が狭いな。 あんたはJSの世界に生きてるわけか 俺はプログラマの世界に生きてるんだよ。 JSはそのプログラマの世界の一地域にすぎない : Name_Not_Found [sage] 2018/01/17(水) 08:43:29.78ID:??? 俺様の世界w : Name_Not_Found [sage] 2018/01/17(水) 09:10:46.47ID:??? それは日本人に会った時世界の挨拶だからと言ってハグするようなもんだぞ : Name_Not_Found [sage] 2018/01/17(水) 22:13:04.85ID:??? それは的はずれだな。 今言ってる世界っていうのは、広さの話をしてる JSの世界っていうのはプログラマの世界の一部 : Name_Not_Found [sage] 2018/01/17(水) 22:58:51.39ID:??? プログラマの世界も狭くね? : Name_Not_Found [sage] 2018/01/17(水) 23:20:47.83ID:??? 今は相対的な話をしているので、 プログラマの世界よりも○○の世界が広い言い方をしてくれない困る そして○○が話と全く関係ない世界だとそれは意味がない : Name_Not_Found [sage] 2018/01/18(木) 02:32:12.39ID:??? JSerの価値観っていう話でさえ既に十分に大袈裟で広い話なのに JS質問スレにプログラマの世界(しかも一部のが好きな言語限定)とか持ち込まれてもな : Name_Not_Found [sage] 2018/01/18(木) 22:44:43.52ID:??? 好きな言語限定? いろんな言語の知識を持っていると 好きな言語以外の話も持ち込むよ? 本当にあんた世界が狭いねw : Name_Not_Found [sage] 2018/01/19(金) 19:22:45.51ID:??? すんごく初歩的なことで申し訳なさでいっぱいなんですが教えて下さい clickイベントリスナをつけた<button>や<input>があって これをdisabled="disabled"やelement.disabled = trueでdisabledにしたとき <button>や<input>をclickしてもイベントは発火しない これ合ってます?この挙動普通? : Name_Not_Found [sage] 2018/01/19(金) 20:01:38.96ID:??? 見てて恥ずかしい奴だな もう口を開くな : Name_Not_Found [sage] 2018/01/19(金) 21:07:59.84ID:??? 断るw いくらでも言うよ?見たくない、聞きたくないなら、 俺に何かをさせるんじゃなく、あんたが自分で行動しなきゃだめだよ : Name_Not_Found [sage] 2018/01/19(金) 21:40:56.60ID:??? 自演しつけえ お前が低レベルなことはみんなわかってるからw : Name_Not_Found [sage] 2018/01/19(金) 21:42:43.07ID:??? みんなって誰? 一人何役してるの? : Name_Not_Found [sage] 2018/01/19(金) 21:51:27.37ID:??? ,324-331,333,334,336 とりあえずこれ全部低レベルな1人の自演 : Name_Not_Found [sage] 2018/01/19(金) 21:57:49.59ID:??? はい、はずれw それはいいからどこが低レベルなのか その理由を言ってみたら? 言えなきゃ言えないやつが低レベルってことだし : Name_Not_Found [sage] 2018/01/19(金) 22:25:39.03ID:??? 君って俺様の世界なんだよねw : Name_Not_Found [sage] 2018/01/19(金) 22:37:48.12ID:??? なぜ自作自演だって見抜いただけで 俺様の世界ってことになるのか? : Name_Not_Found [sage] 2018/01/19(金) 23:24:00.06ID:??? ばれて必死になりすぎ : Name_Not_Found [sage] 2018/01/19(金) 23:26:25.72ID:??? 自演なんだろ?お前の中ではな って言えば理解できるかい? : Name_Not_Found [sage] 2018/01/20(土) 09:02:51.37ID:??? 俺様の世界のグローバル化 : Name_Not_Found [sage] 2018/01/20(土) 11:18:39.49ID:??? アジアではこういう考え方が主流なんだから狭い価値観に捕われるなって言うのと その前にここは日本人による日本人のためのスレなんだから日本の考え方を深く学ぶべきって言うのと アジア基準が常識とか中途半端で恣意的な価値観だなっていうヤジの3つに分けれてる : Name_Not_Found [sage] 2018/01/20(土) 11:48:39.11ID:??? 質問スレなんだから質問とそれに対する回答だけでいいんだよ 考え方とかどうこうはいらない 自分の考え方と違うなら「こういうやり方もあるよ」と自分なりの答えを書けばいい どれを採用するかは質問者の自由 : Name_Not_Found [sage] 2018/01/20(土) 12:14:57.76ID:??? つまり自分なりの考えを書くんですね? : Name_Not_Found [sage] 2018/01/20(土) 12:32:06.88ID:??? 「考え」は書くな 「答え」を書け ただし質問に書いてもいないライブラリやフレームワーク持ち出すのはただのバカだからNGだろ : Name_Not_Found [sage] 2018/01/20(土) 12:53:03.62ID:??? 書いてもいないライブラリやフレームワークが答えの場合だってあるだろ? ってか答を知らないから質問する訳で 答を質問に書くわけがない : Name_Not_Found [sage] 2018/01/20(土) 14:03:12.49ID:??? お前らwshスレって落ちました? 質問しようとしたらスレッド一覧にない・・・ : Name_Not_Found [sage] 2018/01/21(日) 09:24:46.83ID:??? 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類(のみ)。 (A, B)の場合は共に実行。 関数内は、A、Bそれぞれ同じ処理。例えば$('#hoge-' + A).〜。 処理は長いのでif分岐は重複が多すぎ。 yobidasi(A); yobidasi(A, B); function func1(arg1, arg2){ func2(arg1); if(arguments.length === 2){func2(arg2)}; function func2(arg){ $('#hoge-' + arg).〜; $('#hage-' + arg).〜; } } より簡単な書き方教えてください。 : Name_Not_Found [sage] 2018/01/21(日) 10:23:17.94ID:??? そもそもfunc(A);func(B);で良くねとは思うけど function func(...args) { for (let arg of args) { // $('#hoge-' + arg).〜; // $('#hage-' + arg).〜; } } : Name_Not_Found [sage] 2018/01/21(日) 12:37:55.62ID:??? > 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類(のみ)。 > (A, B)の場合は共に実行。 その(A, B)をやめろって話だな : Name_Not_Found [sage] 2018/01/21(日) 17:21:55.95ID:??? >(A, B)をやめろ そうなのですが、すると yobidasi(A); yobidasi(B); となり、yobidasiの類は20種類あるので40行になってしまいまして。 : Name_Not_Found [sage] 2018/01/21(日) 17:38:24.17ID:??? yobidasi(A), yobidasi(B); で良いじゃん : Name_Not_Found [sage] 2018/01/21(日) 20:35:03.46ID:??? forループはオブジェクトのみ推奨って先生が言ってなかったっけ? : Name_Not_Found [sage] 2018/01/21(日) 22:28:35.52ID:??? いいんだよ、俺様の世界なんだから : Name_Not_Found [sage] 2018/01/21(日) 22:40:32.35ID:??? その「先生」は担任の先生って言う意味で素人だろw : Name_Not_Found [sage] 2018/01/21(日) 23:13:52.24ID:??? google先生だろ SEO少しでもかじったのならすぐピンとくる : Name_Not_Found [sage] 2018/01/21(日) 23:15:40.97ID:??? オマエ馬鹿だろ JavaScriptって知ってるか? : Name_Not_Found [sage] 2018/01/21(日) 23:32:03.53ID:??? まさかSEOとjsが関係ないとでも : Name_Not_Found [sage] 2018/01/21(日) 23:39:42.75ID:??? > forループはオブジェクトのみ推奨って先生が言ってなかったっけ? これがSEOと関係があるとでも? ないない : Name_Not_Found [sage] 2018/01/22(月) 00:04:07.14ID:??? Objectのみ推奨ってのはfor-inのことだろ : Name_Not_Found [sage] 2018/01/22(月) 00:22:17.35ID:??? SEO関係あるもん! : Name_Not_Found [sage] 2018/01/22(月) 10:08:34.84ID:??? でもいいけど、 とにかく君に一番必要なことは配列を覚えることだな : Name_Not_Found [sage] 2018/01/22(月) 16:42:21.74ID:??? js初心者です。 var accounts = { 'mail@address1': 'user1', 'mail@address2': 'user2', ... 'mail@address100': 'user100', 'mail@address n': 'user n', } このように別のプログラムで使用してるオブジェクト型の文字データがありましてそれを利用したいのですが うまく行かないので教えてください。 オブジェクトのデータの登録数は不定の為、メールアドレスとユーザー名を1セットと考え総数をカウントしたいのと n番目のメールアドレスとユーザー名を文字列データで取得したい。 全部を読み取って文字列配列にいれてもOKですし、n番目のデータは何と返すだけでも構いません。 例えば 登録総数111で100番目のデータを取得した場合 100/111 のデータは、ユーザーはuser100でアドレスはmail@address100です のように出来るとありがたいです。 : Name_Not_Found [] 2018/01/22(月) 18:23:42.71:RO0qKM/0 スクレイピングのサイト巡回を自動化するスクリプトかいてて テストでクロムの開発者ツールでいろいろためしているんだけど ログインが必要なサイトで名前とかのフォーム入力まではできたのですけど それをsubmitするほうほうがわかりません。 「送信」ボタンのセレクターからノード?オブジェクトを取得。 例えば var button = document.querySelector('セレクター') それにbutton.submit()という感じでsubmit()をつけてみたけど↓みたいなエラーがでます どうすればいいのでしょうか? button.submit() VM775:1 Uncaught TypeError: button.submit is not a function at <anonymous>:1:8 とコンソールにエラーがでます : Name_Not_Found [sage] 2018/01/22(月) 18:43:34.12ID:??? が何言いたいのかわからん : Name_Not_Found [sage] 2018/01/22(月) 19:12:58.02ID:??? 配列はfor かfor of for in はオブジェクとって本に書いてた : Name_Not_Found [sage] 2018/01/22(月) 19:53:51.03ID:??? 配列でもあんま変わらなくね? : Name_Not_Found [] 2018/01/22(月) 20:04:42.30:RO0qKM/0 自分も初心者だとことわっておくけど mapオブジェクト使えば? マップオブジェクトの作成 var mail = new Map() 中身の追加 mail.add('name3','address3') IDとの名前の対応表を作成 var id = {1:"name3"} 要素数の取得 var size = mail.size console.log(size) 名前からアドレスの取得 console.log(mail.get('name3')) : Name_Not_Found [] 2018/01/22(月) 20:08:18.30:RO0qKM/0 中身の追加 はaddじゃなくてsetだった mail.set('name3','address3') ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype : Name_Not_Found [] 2018/01/22(月) 20:28:08.39:RO0qKM/0 自己解決しました formエレメントの要素オブジェクトにsubmitをつけるんですね : Name_Not_Found [sage] 2018/01/22(月) 21:40:41.15ID:??? Object.keys(accounts)でキーの配列を取得できる 総数が欲しいならObject.keys(accounts).length ES2017からはObject.entries(accounts)が理想的 ただし順序は保証されない 可能ならオブジェクトは避けるべき : Name_Not_Found [sage] 2018/01/22(月) 22:18:37.71ID:??? ,373 ありがとうございます! 一歩先にすすめそうです : Name_Not_Found [] 2018/01/22(月) 23:43:57.35:RO0qKM/0 <div ng-if="vm.isProgressBarShowing()" qa-value="{"label": 90,"percentage" :0.9}" qa-id="jss-score" eo-round-progress="" round-progress-model="vm.roundProgressData" round-progress-width="210" round-progress-height="210" round-progress-outer-circle-width="15" round-progress-outer-circle-radius="95" round-progress-label-font="40pt Gotham SSm" class="ng-scope"><canvas width="210" height="210" class=""></canvas></div> これから一行目のqa-valueの90を正規表現でstringを解析する方法以外で取り出す方法ってありますか? obj.qa-valueとかobj.qa-value.labelではとりだせないのですが : Name_Not_Found [sage] 2018/01/22(月) 23:59:04.35ID:??? そりゃあるだろうけど、それってangularだよな? angularのやり方でやれば良いんじゃないの? まあ俺はそのやり方を忘れたけどなw アレだろ?jsの変数にバインドされてるってやつ : Name_Not_Found [] 2018/01/23(火) 00:03:29.33:WLPFoLKy angularってやつなのですか。 聞いたことはありますが全く知らないです。 勉強しないといけないことおおすぎる。。。 : Name_Not_Found [] 2018/01/23(火) 00:43:41.02:WLPFoLKy obj.getAttribute('qa-value')でとれました!!!! 感動!!! : Name_Not_Found [sage] 2018/01/23(火) 00:48:19.81ID:??? とれるっていうのならそうなんだろうけどさ angularのやり方じゃねーぞ? それで良いのか悪いのか知らんけどさ 普通は正しくないやり方だろうな : Name_Not_Found [sage] 2018/01/23(火) 15:14:35.38ID:??? 勝手なやり方をしたら、ダメ! フレームワークのやり方に従っていないのなら、誤動作を起こす Angular を勉強すべし : Name_Not_Found [sage] 2018/01/23(火) 20:05:46.77ID:??? 最初配列でやってたのですがA,値,B,値という形もあり、 また通しで見てるとABの方がどっち渡してるか一目でわかりやすいので変えました。 どうもでした。 : Name_Not_Found [] 2018/01/24(水) 01:04:14.72:UdszAn8A jQueryもやりたいんだけど AngularとjQueryどっちをさきにやればいい? : Name_Not_Found [sage] 2018/01/24(水) 02:08:15.18ID:??? 何を目指すかによる JavaScript必須なページを作りたいならAngular : Name_Not_Found [] 2018/01/24(水) 08:55:26.78:UdszAn8A 今一番やりたいのはスクレイピングで 次にデータ可視化なんで サイトの仕組みの理解とスクレイピングのスクリプトかくためにJavaScriptの勉強初めたんだけど jQuery使ってるサイトが多いのであとでjQueryもやろうとおもってたけど JavaScriptの勉強一通りおわったら Angurlarやってみることにしました そのあとD3やるかな ほんでひつようそうだったらjQueryやるかな やることおおすぎ。。。 : Name_Not_Found [sage] 2018/01/24(水) 23:13:43.54ID:??? var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var r = s.match(/\<tag\>(.*?)\<\/tag\>/g); console.log(r); とすると結果は ["<tag>hoge</tag>", "<tag>poge</tag>", "<tag>fuge</tag>"] になります つまりグループ化した部分を取り出していません gスイッチを使った場合はグループ化を使えないのでしょうか? こういう場合どうするのがいいのでしょうか? : Name_Not_Found [sage] 2018/01/24(水) 23:14:33.52ID:??? スクレイピングなら、Angular なんて関係ない。 君が、たまたま、Angular製のページを対象にしただけだろ JavaScript なら、jQuery は必須 Ruby で、Nokogiri とか、 Selenium WebDriver, PhantomJS とか、 Chromium, Chrome のヘッドレスモードとか : Name_Not_Found [sage] 2018/01/24(水) 23:22:55.14ID:??? グループ化した部分ってどこ? グループ化って何のこと? : Name_Not_Found [sage] 2018/01/24(水) 23:24:07.94ID:??? jQuery を使え $('tag').text(); : Name_Not_Found [sage] 2018/01/24(水) 23:25:21.67ID:??? (.*?)のことです 正規表現において一般的な用語だと思いますが : Name_Not_Found [sage] 2018/01/24(水) 23:37:05.77ID:??? 結局、jQuery でも、Ruby のNokogiri でも、 取得する要素を、CSS セレクターで指定するのは同じ 上はjQuery、下はNokogiri $('tag').text(); doc.css('tag').text xpath で指定するのではなく、CSSセレクターの方が、簡単に指定できる : Name_Not_Found [sage] 2018/01/24(水) 23:49:50.17ID:??? 正規表現では、データに親子関係のような構造があるものは、うまく取れない <tag1><tag2></tag2></tag1> このように要素がネストしていると、<tag1></tag2> が対応してしまうから jQuery とか、Ruby のNokogiri で、 取得する要素を、CSS セレクターで指定する : 387 [sage] 2018/01/24(水) 23:54:01.21ID:??? 失礼、(.*?)だけを取り出したいってことか gフラグは正規表現全体で配列にする ので、こんなのしか思いつかない let s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; let regex = /\<tag\>(.*?)\<\/tag\>/; let result = []; while(s){ s = s.replace(regex, (...args) => { result.push(args[1]); return ''; }) } console.log(result); 入れ子は考慮せず そこまでやると複雑すぎてどうにもならない : 392 [sage] 2018/01/25(木) 00:07:22.24ID:??? while(s) じゃなくて、 while(regex.test(s)) のほうがいいかも DOM(jQueryでもできるはず)で、 let div = document.createElement('div'); div.innerHTML = s; let elements = div.querySelectorAll('tag'); // で、各elementsのtextContentを取得 というのもありかと タグの入れ子は考慮せず : Name_Not_Found [sage] 2018/01/25(木) 01:19:36.76ID:??? ttps://qiita.com/honeydaisuki/items/d2a38cef1b95fd347fa4 これ? 最短マッチと最長マッチ : Name_Not_Found [sage] 2018/01/25(木) 06:23:05.64ID:??? String.matchで正規表現にgオプションをつけるとキャプチャが取れるのかどうかの話で答えは上の通り「取れない」 RegExp.execを(複数回)使うか正規表現をやめてHTMLパーサを使うかだが正直後者を推奨する : Name_Not_Found [sage] 2018/01/25(木) 09:05:37.30ID:??? var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; 根本的に参照が間違っている : Name_Not_Found [sage] 2018/01/25(木) 10:29:09.69ID:??? HTMLタグならHTMLパーサーやXMLパーサーが使えるけど 正規表現はセパレーターがタグ(<>記号で囲まれた文字列)でない場合でも使える : Name_Not_Found [sage] 2018/01/25(木) 20:01:44.28ID:??? var resAry = []; function replacer(match, p1) { resAry.push(p1); }; var oldStr = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var re = new RegExp('\<tag\>(.*?)\<\/tag\>', 'g'); // 第2引数は、コールバック関数 oldStr.replace(re, replacer); console.log(resAry); // ["hoge", "poge", "fuge"] String.prototype.replace() ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace : Name_Not_Found [sage] 2018/01/26(金) 01:32:12.62ID:??? jsで初めてプロトタイプベースに触れたけど、最初クラスベースとの違いに混乱して悪態ついたりしたけど今じゃクラスベースより好きだわ。 js以外クラスベースが主流なのは大規模設計手法が確立されてるというエンタープライズ用途のためってことかな? それにしてもプロトタイプベースのメジャー言語なさすぎじゃ… : Name_Not_Found [sage] 2018/01/26(金) 02:05:33.69ID:??? あ、お題はこれでいいんじゃないか? var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var r = s.split(/<\/?tag>/g).filter(item => item !== ''); console.log(r); // ["hoge", "poge", "fuge"] : Name_Not_Found [sage] 2018/01/26(金) 02:07:33.86ID:??? すまん空文字列はfalsyだから比較要らんわ訂正 var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var r = s.split(/<\/?tag>/g).filter(item => item); console.log(r); // ["hoge", "poge", "fuge"] : Name_Not_Found [sage] 2018/01/26(金) 02:13:06.24ID:??? グローバルスイッチも要らんかった… これからゲームしようと思ってたけどもう寝とくわ… var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var r = s.split(/<\/?tag>/).filter(item => item); console.log(r); // ["hoge", "poge", "fuge"] : Name_Not_Found [sage] 2018/01/26(金) 02:29:08.11ID:??? クラスベース言語が多いのは皆C++に影響を受けているから 多くの言語は別に人間工学的や信念として選んでいるのではなく揃えるのが無難だからそうしているだけ C++がクラスベースなのはCの構造体からの自然な発想 CにOOPを組み込むに当たって当然プロトタイプベース的な方向にはなり得ない JSがプロトタイプベースなのはクラスベースのインタプリタエンジンは実装も大変で 生半可なものではシンプルなプロトタイプベースに比べて性能を出すのが難しいという事実があるから また、スクリプト言語としてはクラスに縛られるというのは不便となることも多い クラスかプロトタイプかと言うよりはクラスベースを選んだか、選ばなかったかという違い : Name_Not_Found [sage] 2018/01/26(金) 02:57:54.16ID:??? よっしゃジャバスクリプトの勉強始めるで! お前らよろしく!!!!!!!!!!! : Name_Not_Found [sage] 2018/01/26(金) 09:55:40.02ID:??? プロトタイプベースは型システムとの相性が良くない, 気がする : Name_Not_Found [sage] 2018/01/26(金) 10:32:36.63ID:??? htmlをStringで参照していることが笑えるw : Name_Not_Found [sage] 2018/01/26(金) 13:42:13.67ID:??? 独学で参考書をペン片手に読んでる。今2冊目。 読み終えたところまでのコード解読はいける。 まだまだ何もできないけど まずは基礎知識の積み重ねが大事だなと深く感じてる : Name_Not_Found [sage] 2018/01/26(金) 14:52:29.75ID:??? ペン片手は駄目 キーボード片手でないと とにかくサンプルを試して、自分で改変して仕組みを学び 分からない所は調べてそのうち1%でも理解したような気になるようにする 本はあくまで導入と思うこと : Name_Not_Found [sage] 2018/01/26(金) 17:20:08.99ID:??? いいえ、自分にあったやり方を見つけているのでこの順番が自分にとって最善。 : Name_Not_Found [sage] 2018/01/26(金) 20:02:12.46ID:??? なんで何もできない段階でそれが最善だと分かるのか謎だなぁ。 もいいアドバイスだと思うんだが。 もちろん本でしっかり知識積み重ねるのも大事だとも思うよ。 しかしそもそもどういう意図で書き込んだんだ? エライエライ頑張れして欲しかったのかな? : Name_Not_Found [sage] 2018/01/26(金) 21:10:49.59ID:??? はごく普通な方法だな。誰でもいえる事。 : Name_Not_Found [sage] 2018/01/26(金) 23:20:17.26ID:??? jQuery で作った var oldStr = '<div>hoge</div><div>poge</div><div>fuge</div>'; $('body').append(oldStr); var resAry = []; $( 'div' ).each( function(){ resAry.push( $(this).text() ); } ) console.log( resAry ); // ["hoge", "poge", "fuge"] : Name_Not_Found [] 2018/01/27(土) 01:31:35.31:+mZ3NtMu やり方なんて自分が一番吸収しやすい方法をみつければいいんだよ こればかりは人によって違うもの。 : Name_Not_Found [sage] 2018/01/27(土) 01:51:37.67ID:??? まだまだ何もできないのにどうしてそれが最善なの? その人の最善の方法見つけるには他の方法も試さなきゃダメでは? 合理化とか埋没費用の誤謬とかで既に時間かけた方法に固執してるだけでは? : Name_Not_Found [sage] 2018/01/27(土) 02:19:18.35ID:??? jQueryありなの?ならこうするわ。 var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>'; var r = $(s).get().map(item => item.innerHTML); console.log(r); // ["hoge", "poge", "fuge"] rのとこは var r = $(s).map(function() {return this.innerHTML}).get(); でもいいけど。 上のmapはjavascriptネイティブのmapでこっちはjQueryのmapね念のため。 : Name_Not_Found [sage] 2018/01/27(土) 02:32:38.95ID:??? var r = $(s).get().map(item => item.innerHTML); var r = $(s).map(function() {return this.innerHTML}).get(); var r = $.map($(s), item => item.innerHTML); jQuery.mapを使ったほうが僅かに短いよ : Name_Not_Found [sage] 2018/01/27(土) 03:08:14.13ID:??? ほんまや! 速度はどんなもんかperformance.now()で測ってみたけど長さ10のランダム文字列をtagでくくったものを1000個連結したもので確認した限り3つとも5ms前後で目立った差なかったわ。 もっと大きくなると差もあるかも知れないけど実用上はどれも問題ないね。 : Name_Not_Found [sage] 2018/01/27(土) 09:01:48.16ID:??? また俺様の世界を語ってるのw : Name_Not_Found [sage] 2018/01/27(土) 09:12:05.42ID:??? おまえも語って良いんやで? : Name_Not_Found [] 2018/01/27(土) 16:25:13.08:+mZ3NtMu 試した上で書いてるのでは。 : Name_Not_Found [sage] 2018/01/28(日) 04:41:23.29ID:??? その人の最適な方法とかいう魔法みたいなものはない 人間の脳はニューラルネットと同じなんだから Web技術の情報、特に本の内容は糞な場合が多いという事実がある以上 沢山の検索と試行錯誤をして知識を積み重ねていって形にする以外はない ブロックを積み上げるように体系的に学ぶのは無理 薄い絵の具を塗り重ねて絵を浮かび上がらせる感じしか無い : Name_Not_Found [sage] 2018/01/28(日) 04:46:06.46ID:??? お前Changelogに○○を最適化しましてって 書いてあったら、それは最適な方法じゃないって いちいちツッコむのか? : Name_Not_Found [sage] 2018/01/28(日) 04:57:00.46ID:??? その最適化は恐らくoptimizationの訳語としての用法だから最善の方法を見つけ出しそして実装した!という意味ではないだろう。 virtual→仮想と並ぶ近代クソ訳語のひとつ。 : Name_Not_Found [] 2018/01/28(日) 18:13:39.13:zZNs90iR 他者を認められない受け入れられないというのも 自分の、個人の考え方やり方なんだよね : Name_Not_Found [] 2018/01/28(日) 20:11:26.66:ZkfV466A 【ほら吹きマネク】マイトLーヤ「太陽凝視は危険」 ttp://matsuri.5ch.net/test/read.cgi/esp/1517129538/l50 : Name_Not_Found [sage] 2018/01/29(月) 01:29:43.15ID:??? 初心者と今活躍してる業界人とじゃけして平等ではないからな 色んな人に教えて自身でも色々失敗してきた経験を元に 無駄をしないようアドバイスしてるのであってそういうのは素直に聞くべき : Name_Not_Found [] 2018/01/29(月) 08:15:52.37:r/D88pTD onclick="javascript:ac_tracer( って何でしょうか?ボタン画像を挟む<a>タグ内にあります。 : Name_Not_Found [sage] 2018/01/29(月) 09:15:51.45ID:??? イベントハンドラの設定方法のひとつです。 今回の場合onclickなのでクリックイベントのハンドラ。 クリックするとそこに書かれたJavaScriptコードが実行されます。 : 427 [] 2018/01/29(月) 10:53:12.05:MncMfLpu ありがとうございます。 このac_tracerというのは何でしょう? : Name_Not_Found [sage] 2018/01/29(月) 10:55:50.48ID:??? さあ? : Name_Not_Found [sage] 2018/01/29(月) 11:52:50.50ID:??? ブラウザの検証機能でコードを見るのが早い : Name_Not_Found [sage] 2018/01/29(月) 11:54:02.20ID:??? 極悪onclick : Name_Not_Found [sage] 2018/01/29(月) 12:19:15.81ID:??? 昔昔あるところに太郎という人が居ました この太郎というのは何でしょう? : Name_Not_Found [sage] 2018/01/29(月) 12:50:41.45ID:??? 銭湯に行ったらオッサンが湯につかっていました。このオッサンは何でしょう? : Name_Not_Found [sage] 2018/01/29(月) 13:12:25.96ID:??? あるところにおじいさんとおばあさんがいました。 さて私は誰でしょう? : Name_Not_Found [sage] 2018/01/29(月) 13:29:23.97ID:??? 関数です。 ただし、ac_tracerという名前の関数はJavascriptに元々用意されているものでも、web開発者が利用するDOM APIのものでもないため、ユーザー定義関数、つまり誰かが何かの目的のために作った関数です。 つまり、作った人に聞くか、ac_tracerの定義部分を含むコードを読まなければ、この関数が何なのかエスパーを除き誰にも分かりません。 : Name_Not_Found [sage] 2018/01/29(月) 13:54:25.86ID:??? 長いキッスの途中で : Name_Not_Found [sage] 2018/01/29(月) 15:44:45.33ID:??? Fu Fu さりげなく : Name_Not_Found [sage] 2018/01/29(月) 16:44:00.27ID:??? 首狩り族を倒した : Name_Not_Found [sage] 2018/01/30(火) 00:37:08.63ID:??? > この太郎というのは何でしょう? 人の名前では? : Name_Not_Found [sage] 2018/01/30(火) 00:38:26.46ID:??? そうだねイベントハンドラの設定方法のひとつだね : Name_Not_Found [sage] 2018/01/30(火) 00:44:51.93ID:??? > あるところにおじいさんとおばあさんがいました。 > さて私は誰でしょう? そんなことよりよ、桃太郎の おじいさんとおばあさん、子供がいないらしいぜ? ってことは、おじいさんとおばあさんじゃないよな? 子供ができたら、やっとおとうさんとおかあさんになるはずだ 孫も子供もいないのにおじいさんとおばあさんというのはおかしすぎる っていうか、子供いないのに孫を養子に取ることってできるのかよ? 孫悟空の孫じゃないぞ。子供の子供という意味の孫だ : Name_Not_Found [sage] 2018/01/30(火) 02:07:29.66ID:??? 歳的な意味での爺婆だし 子供と言っても当然手続きもして無かろうし家系図にも組み込まれてないだろうし 桃太郎から見たらお父さんお母さんでも 全く関係ない第三者が伝聞として話したり聞く際にはふさわしくないと思う : Name_Not_Found [sage] 2018/01/30(火) 04:58:54.24ID:??? でもお前甥も姪もいないのにおじさんじゃん。 : Name_Not_Found [sage] 2018/01/30(火) 15:13:26.78ID:??? 【お祖父さん】 祖父(そふ)の敬称。 【お爺さん】 男の老人の敬称、また親しんで言う語。 : Name_Not_Found [sage] 2018/02/01(木) 08:38:52.20ID:??? localStorageやsessionStorageなどwebStorageには文字列値しか保存できないとMDNで読んだ でも[ 3, 6, 1, 23 ]や[ 'apple', 'orange', 'kiwi' ]など単純な配列は 特に変換することなしに、そのままsetItem()/getItem()できているようにみえる 値を取り出してすぐ直接push()やslice()などで操作できるしindexOf()もできてる これはどういう理屈でこういう挙動になるんでしょうか?ブラウザが勝手にやってくれてる?配列関数が優秀? 試したのはMacのSafariとWindowsのFirefoxでsessionStorage利用 : 446 [sage] 2018/02/01(木) 09:12:03.27ID:??? ごめん完全に気のせいだった : Name_Not_Found [sage] 2018/02/01(木) 12:01:57.89ID:??? ttp://sdsoffice.com/tools/homepage-patrol-v2b.html 上記サイトのwebサイトを巡回してくれるJavaScriptを利用をしようと思います。 windows8.1(64bit) + IE11の環境で、上記サイト上で実行させるには問題ないのですが、 htmlファイルとしてローカルに保存して、ローカルで実行するとエラーとなります。 (巡回してくれない) windows7(64bit) + IE11の環境でしたら、ローカルでも問題なく動きます。 windows8.1でエラーになる原因がわかりません。 お詳しい方、力になっていただけないでしょうか? よろしくお願いいたします。 : Name_Not_Found [] 2018/02/01(木) 22:16:16.86:Es0XuYnt 別フレームに指定の複数のページをランダム時間(何分から何分の間ランダム)で表示する。 の参考資料とかありませんか? 十数年前「html」だったのか「javascript」か覚えていないけど 色んな例を組み合わせて作って偶然動いたことがあったのでどこかに保存しておいたんだけどなくなってしまったので・・・ よかったら教えてください。 : Name_Not_Found [sage] 2018/02/01(木) 22:38:53.38ID:??? そもそも普通は、crossOrigin (CORS)アクセス禁止だろ 自分のPC 上の、HTML ファイルから、他のドメインにアクセスできないだろ。 iframe 内に、他のドメインのページを読み込んでも、 iframeの内外で、異なるサイトになるから、アクセスできない 自分のPC で、サーバーを立てて、それを経由しないとアクセスできない。 または、ネット上のそういうサーバーを利用するとか 以前使えていた、Yahoo Query Language (YQL) も、使えなくなった : Name_Not_Found [sage] 2018/02/01(木) 22:41:17.04ID:??? aからbまでの間でランダムは a+(0からb-a)までランダムと表せられる つまりa+Math.random()*(b-a)となる : Name_Not_Found [sage] 2018/02/01(木) 22:42:29.86ID:??? 「iframe ランダム表示」で検索! iframe 内に、他のドメインのページを、ランダムに読み込む : Name_Not_Found [sage] 2018/02/02(金) 00:10:56.52ID:??? あるある質問かもしれませんが Javascriptのソースコードからコメントをすべて除去するツールなり方法ってどんなものがあるでしょうか? 単独のフリーソフトでも良いですし atomのbeautify等、構文解析するプラグイン等にオマケでついていてもおかしくないと思うのですが windows7を使っています : Name_Not_Found [sage] 2018/02/02(金) 00:28:03.36ID:??? <iframe src="#" id="ifrm"></iframe> <script type="text/javascript"> window.onload = function(){ var urls = [' ttp://www.example.com', ' ttp://www.yahoo.co.jp', ' ttp://www.google.co.jp' ]; // 0以上、3未満。つまり、0〜2 var idx = Math.floor( Math.random() * urls.length ); var ifrm = document.getElementById('ifrm'); ifrm.src = urls[idx]; } </script> これを、<body>タグの中に書いて実行すれば、毎回違うサイトが読み込まれる : Name_Not_Found [sage] 2018/02/02(金) 00:46:27.79ID:??? 「jquery plugin カルーセル」で検索! jQuery Plugin を探す方が、簡単かも : Name_Not_Found [sage] 2018/02/02(金) 00:54:55.79ID:??? 「javascript コメント 削除 ツール」で検索! : Name_Not_Found [sage] 2018/02/02(金) 02:38:55.11ID:??? ありがとうお陰でbeautifierの反対語にminifierという言葉があることを知ってatom minifierを入れて解決しました : 454 [sage] 2018/02/02(金) 04:53:16.01ID:??? 454 を修正した。 ランダム時間は難しくてできない。一定時間ならできる 以下を、<body>タグの中に書いて実行すれば、5秒毎に、違うサイトが読み込まれる。 タイマーを止めるには、clearInterval を使う <iframe src="#" id="ifrm"></iframe> <script type="text/javascript"> window.onload = function(){ var urls = [' ttp://www.example.com', ' ttp://www.yahoo.co.jp', ' ttp://www.google.co.jp' ]; var ifrm = document.getElementById('ifrm'); var timerID = setInterval(function () { // 0以上、3未満。つまり、0〜2 var idx = Math.floor( Math.random() * urls.length ); ifrm.src = urls[idx]; }, 5000); // 5分なら、5 * 60 * 1000 とする } </script> : 454 [sage] 2018/02/02(金) 07:06:29.03ID:??? 458 を修正した setTimeout() で、最初から表示する。 その後、setInterval() で、一定時間ごとに表示する <iframe src="#" id="ifrm"></iframe> <script type="text/javascript"> window.onload = function(){ var urls = [' ttp://www.example.com', ' ttp://www.yahoo.co.jp', ' ttp://www.google.co.jp' ]; var ifrm = document.getElementById('ifrm'); function setExternalWebsite() { // 0以上、3未満。つまり、0〜2 var idx = Math.floor( Math.random() * urls.length ); ifrm.src = urls[idx]; } setTimeout(setExternalWebsite, 0); // 最初から表示する // 5分なら、5 * 60 * 1000 とする var timerID = setInterval(setExternalWebsite, 5000); } </script> : Name_Not_Found [sage] 2018/02/02(金) 07:23:25.57ID:??? 自ら学ぶ人とは回答者の事だったのか : Name_Not_Found [sage] 2018/02/02(金) 12:37:30.47ID:??? setInterval使わずにsetExternalWebsiteの最後で毎回setTimeoutすればいいだけやで : Name_Not_Found [sage] 2018/02/02(金) 12:43:41.74ID:??? 問題にはならんと思うんだけどどんどん再起が深くなっていくのが気持ち悪い : Name_Not_Found [sage] 2018/02/02(金) 12:44:46.38ID:??? それってスタックオーバーフローしないの? : Name_Not_Found [sage] 2018/02/02(金) 13:12:21.97ID:??? スタックは積まれない : Name_Not_Found [sage] 2018/02/02(金) 15:06:20.75ID:??? 積まれないんすね、ありがとうございます 関数ポインタみたいなのがどんどん積まれていくのかと思った : Name_Not_Found [] 2018/02/02(金) 17:41:52.25:hJ9iJ7qw (459) 丁寧に教えてもらってありがとうございます。すごく参考になりました。 ランダム時間なのですがsetIntervalを使っていたの思い出しました。 { var min = 5000 ; var max = 10000 ; setInterval("hyoji()",(max + 1 - min))+ min; } としました。 やってないと忘れるものですみませんでした。 : Name_Not_Found [sage] 2018/02/02(金) 19:01:30.35ID:??? webpackやgulpについて質問したいのですが、その類のスレッドってありますかね??。 なければここで質問してもよろしいでしょうか? : Name_Not_Found [sage] 2018/02/02(金) 22:10:29.45ID:??? function(t, i) { t.target = i, e.apply(this, arguments) } こういう構文があったんですが 「 t.target = i; e.apply(this, arguments); 」 つまりこういう構文を略して書く書き方って認識であってますか? : 454 [sage] 2018/02/02(金) 23:46:50.02ID:??? 1. function f() { setTimeout(f, 5000); } 2. setTimeout(f, 5000); まず、2の実行では、setTimeout()は実行されるけど、f()はまだ実行されない。 つまり、キューに、fが積まれるだけ 次に5秒後、キューからfが削除されて、1が実行される。 その時に、setTimeout()で、またキューに、fが積まれる つまり、キューには常に、fが1個しか積まれていない わかりにくいから、そんなカンマの使い方をしない方が良い。 勘違い・バグを誘発する 普通に、; で文を区切るべき : Name_Not_Found [] 2018/02/03(土) 01:26:18.14:PujzEQQR 認識があってるか確認してんだよボケ : Name_Not_Found [sage] 2018/02/03(土) 02:24:56.13ID:??? いいよ。他に該当のスレなんて有るわけないし : Name_Not_Found [sage] 2018/02/03(土) 06:33:39.21ID:??? ありがとうございました。 ローカルファイルで他サイトの呼び出しの規制に引っかかっているわけですね。 今回の案件だけ個別に許可はできないものでしょうか?(ブラウザのセキュリティ上難しい?) : Name_Not_Found [sage] 2018/02/03(土) 07:05:49.60ID:??? ブラウザじゃなくてサーバー側のセキュリティな : Name_Not_Found [sage] 2018/02/03(土) 12:01:19.79ID:??? 制限をかけてるのがブラウザで サーバはブラウザがかけてる制限を任意に解除できるだけじゃないのか 違いは無設定の鯖に対してどういう挙動になるか というかはCORS関係なんか? みたところ子ウィンドウを開いて、子のlocation.hrefで移動させてるだけ IE自身のセキュリティ設定、イントラネットのセキュリティポリシーな気がするんだが : Name_Not_Found [sage] 2018/02/03(土) 12:08:23.84ID:??? グローバル変数を1つ宣言するのと 関数を1つ宣言するのとでは グローバルの汚染度は変わらないですよね? : Name_Not_Found [sage] 2018/02/03(土) 12:40:30.96ID:??? 変わる : Name_Not_Found [sage] 2018/02/03(土) 12:43:46.29ID:??? 変数というのは「変えられる値」関数というのは、変えられない。 (まあ正確に言えば、JavaScriptでは関数もオブジェクトなので変えようと思えば変えられるが、 普通そういう使い方はしないしそういう使い方はグローバル変数と同様になってしまうから ダメなやり方であるという考え方をする) グローバル汚染というのは、値がどこから書き換えられるかわからないから問題なので、 グローバル変数はアウトだが、グローバル関数(グローバルクラス含む)は問題ない : Name_Not_Found [sage] 2018/02/03(土) 12:56:39.57ID:??? 無名関数を使うとかなら、変わると言われても納得なんですけど function ffff(){}と定義するのとvar ffff = function(){}と定義するのでは変わらないし どちらの場合も変数名ffffに対する文字列値の再代入も関数再定義も特別の構文なしにできてしまうし 同じ名前の関数宣言があってもエラーも何も出ないのを考えると 宣言時には入れ物はどちらも変数であって(というかポインタと考えたほうが) 中身が、関数か、文字列や数値や配列やオブジェクトか、の違いでしかない、という風に思うんです そうなると、1個グローバル変数を使うのと1個グローバル関数を使うのとでは、もはや変わりが無いように思うんですが : Name_Not_Found [sage] 2018/02/03(土) 13:08:32.34ID:??? ニュアンス的には幾らかの違いがあるけど、汚染度と言う視点だと無いよ つか、関数もオブジェクトだから変えられるという言い用はJSer失格 : Name_Not_Found [sage] 2018/02/03(土) 13:13:24.91ID:??? だからnamespace的に1つのオブジェクトに全部押し込めて汚染度下げたりしてたわけですし : Name_Not_Found [sage] 2018/02/03(土) 13:13:46.96ID:??? 関数は関数だもんな : Name_Not_Found [sage] 2018/02/04(日) 13:01:29.10ID:??? ではこちらで質問させていただきます。 gulpであればgulp-uglifyを、webpackであればUglifyJsPluginを使って minify化しようと思うのですが、どちらもjsに記述している変数名がiやfに変わってしまいます。 どちらのnpmもオプションに変数名が変わらない様な設定があるかと思ったのですが無いようでした。 変数名が変わるのは困るので、ただ単に改行、コメント削除、空白削除をしたいのですが、何か方法はありますでしょうか。 : Name_Not_Found [sage] 2018/02/04(日) 13:04:16.82ID:??? 変数名が変わって困るのがそもそもおかしい : Name_Not_Found [sage] 2018/02/04(日) 14:12:57.48ID:??? HTMLに直接変数名が書いてあり、その変数を外部jsファイルで使用する時に使えなくなると思ったのですが。 ということは、そもそもjsの書き方がおかしいということでしょうか? 例を出せと言われてもすぐには出せませんが・・・・ : Name_Not_Found [sage] 2018/02/04(日) 14:26:32.98ID:??? > HTMLに直接変数名が書いてあり そんなことはしない。HTMLにJavaScriptの変数は出てこない : Name_Not_Found [sage] 2018/02/04(日) 19:14:59.77ID:??? uglify=難読化、minify=軽量化、全然別だ uglifyやってんなら、そりゃそうなる : Name_Not_Found [sage] 2018/02/04(日) 19:24:47.55ID:??? ところでnpmに gulp-minify (-cssや-htmlがつかない)があって minify()で普通に無駄な空白類やコメントの削除してくれるらしいが : Name_Not_Found [] 2018/02/04(日) 20:11:37.39:Z2Ku3KdF uglify-js@3だが、mangleオプションにreservedをつければいいんじゃない? : Name_Not_Found [] 2018/02/04(日) 20:12:55.29:Z2Ku3KdF あ、すべての変数名を変えたくないのか magleオプションをなくすような設定ができるのかね : Name_Not_Found [sage] 2018/02/04(日) 21:22:12.95ID:??? gulp-uglifyは詳しくないけど、 サードパーティー製のライブラリで使用しているグローバル変数(いわゆるネームスペース)を スクリプト内で参照している場合に、その変数名をminifyしない設定があるのでは? : Name_Not_Found [sage] 2018/02/04(日) 22:44:24.61ID:??? 多分私の説明が下手でうまく伝わっていない気がするのでちょっと考え直して 再度ご質問します。ありがとうございました。 その違いが知りませんでした。 勉強になります。ありがとうございます。 gulp-minifyですか。ちょっと試してみます。 uglify-jsも知りませんでした。 これも検証してみます。 ごめんなさい。話に追いついていけません。。。 : Name_Not_Found [] 2018/02/04(日) 23:36:42.46:Z2Ku3KdF ttps://github.com/webpack-contrib/uglifyjs-webpack-plugin これのことだよね ならmangleオプションが指定できるから falseにしてみたらいいんじゃないかな : Name_Not_Found [sage] 2018/02/05(月) 00:36:25.08ID:??? だからHTMLに直接変数名を書くことが 間違いだって話だよ 他のやつもやる必要のないことを書くな : Name_Not_Found [sage] 2018/02/05(月) 01:08:14.66ID:??? そんなの環境とコーディング規約次第だろ : Name_Not_Found [sage] 2018/02/05(月) 01:09:29.45ID:??? その理屈だと、腐った環境やクソなコーディング規約に したがって開発しろって言ってるように見えるが? : Name_Not_Found [sage] 2018/02/05(月) 01:10:08.48ID:??? だからHTMLに直接変数名を書くことが 腐った環境やクソなコーディング規約だって話だ : Name_Not_Found [sage] 2018/02/05(月) 01:44:44.15ID:??? ページごと、ユーザーごとのパラメータをHTMLに書くことはあるぞ どうせlocalStorageかHTMLに書くかAjaxで取得するかくらいしかないし : Name_Not_Found [sage] 2018/02/05(月) 01:52:32.96ID:??? 今話をしてるのはJavaScriptの変数の話だ 分かってないなら黙ってろ : Name_Not_Found [sage] 2018/02/05(月) 01:56:06.57ID:??? HTML内で var userData = {} 外部JSファイル内で (function(){ something(userData.何か); })(); こういうことだろ : Name_Not_Found [sage] 2018/02/05(月) 02:11:37.12ID:??? 常に何から何までXHRで済ませられるわけじゃないしな : Name_Not_Found [sage] 2018/02/05(月) 03:20:21.65ID:??? 細かいことだがそれ(function(){ })(); で囲う意味ある? : Name_Not_Found [sage] 2018/02/05(月) 03:40:25.36ID:??? window.now = performance.now; now(); こう書くと"オブジェクトの呼び出しが無効です"と怒られるんすよ なんででしょうね : Name_Not_Found [sage] 2018/02/05(月) 04:26:38.57ID:??? thisの問題ですね。 now()で呼び出したときもthisがperformanceを指すように以下のようにbindしときましょう。 window.now = performance.now.bind(performance); : Name_Not_Found [sage] 2018/02/05(月) 05:42:06.72ID:??? とりあえずthisを拘束すればいいという考えはあまり良いとは思えないな エイリアスという点では今は fn = ( ...args ) => performance.now( ...args ) と書く方が良い bind構文が実装されて記述が容易になるとともに bindを常日頃から使う文化が広がったらbind構文の方が基本になると思う : Name_Not_Found [sage] 2018/02/05(月) 05:43:42.70ID:??? より「ハック」っぽくないのはどちらかっていう意味ね : Name_Not_Found [sage] 2018/02/05(月) 06:17:58.17ID:??? ハックっぽいかなぁ? はbindした新しい関数返してるだけで別になんにもハックしてなくない? bindなんてES5から入ってるし実装されてるかどうか気にするレベルにないのでは… : Name_Not_Found [sage] 2018/02/05(月) 16:53:25.38ID:??? Google Maps (Javascript) API に関することはここでいい? 他に適当な質問スレがあれば教えてください。 : Name_Not_Found [sage] 2018/02/05(月) 17:00:03.74ID:??? Google Maps API 質問箱 ttp://mevius.5ch.net/test/read.cgi/tech/1131627583/ : Name_Not_Found [sage] 2018/02/05(月) 23:52:28.98ID:??? Windows8.1はダメなので、IE自体の問題のような感じです。 開発者ツールでみると else { //* not MSIE browser wid1.location.href=wz1; } で止まっているのですが、Windows7では不具合なく動いているので、どこがおかしいかわからないのです。 : Name_Not_Found [] 2018/02/06(火) 02:26:00.54:155ekgt0 フォーム内のあるアイテムの入力文字数が たとえば 5文字あるいは10文字あるいは空白の場合だけ入力できるようにするにはどうすればよい? : Name_Not_Found [sage] 2018/02/06(火) 03:50:42.56ID:??? 地道に数えろよ : Name_Not_Found [sage] 2018/02/06(火) 08:19:49.38ID:??? サロゲートペアと結合文字の問題があるからな サロゲートペアで結合文字のものもある 例えばアクセント付付点8分音符「"𝅘𝅥𝅮𝅻𝅭"」は一文字でlengthは10だ : Name_Not_Found [sage] 2018/02/06(火) 11:45:45.30ID:??? ありがとうございました。 無事にこちらの方法で変数名を変えずに圧縮することができました。 : 507 [sage] 2018/02/06(火) 13:15:35.38ID:??? ありがとう。しかしそっちはちと寂しかったです。 : Name_Not_Found [sage] 2018/02/08(木) 22:50:41.60ID:??? 基本的なことだと思うんだけど、分かってないので click event についてなのですが event発生のタイミングって、カーソルのpushが対象から抜けた時ですよね 表現がヘンで伝わってるか不安だけど ブラウザゲームっぽいの作ってまして touchしたときにevent発生させることってできるんでしょうか? : Name_Not_Found [sage] 2018/02/08(木) 23:34:02.32ID:??? タッチならタッチ専用のイベントが有る タッチ専用のイベントは有るがマウスにも対応しようとしたら いろいろ面倒なので、統合的に使えるライブラリを探したほうが良いかもね 俺の知識は古いので何が最善かまで言えない : Name_Not_Found [sage] 2018/02/08(木) 23:38:48.28ID:??? mousedown : 515 [sage] 2018/02/08(木) 23:48:36.33ID:??? ありがとう! できないものと思い込んでた ttps://developer.mozilla.org/ja/docs/Web/Guide/DOM/Events/Touch_events これ見て吃驚 : Name_Not_Found [sage] 2018/02/08(木) 23:51:08.92ID:??? マウスならmousedown、タッチならtouchstart まあ両方やっとけばいい : Name_Not_Found [sage] 2018/02/08(木) 23:53:20.77ID:??? タッチは300ms問題とかもあったはず。ライブラリ使うべき。 : Name_Not_Found [sage] 2018/02/09(金) 00:01:43.51ID:??? 300ms問題はtapやで だからtouchstart使うんや : 515 [sage] 2018/02/09(金) 00:11:31.05ID:??? えっ!あっそか と思ってやってみました (jqueryでね) $('#hoge').on('click', function () { console.log('ムフフ'); }); を $('#hoge').on('mousedown', function () { desktop版firefox お〜動くー! iOS safari あれ?挙動が click と同じだなぁ : Name_Not_Found [sage] 2018/02/09(金) 00:13:58.77ID:??? あー、思い出した FastClick.js だ 300ms問題を解決するライブラリ : Name_Not_Found [sage] 2018/02/09(金) 00:18:02.30ID:??? そういうこと。 ブラウザによって挙動が違ってよく分からんw そういやタッチとマウスを統一的に扱えるようにした Pointer Eventsってどうなったんだろうね ttps://caniuse.com/#search=pointer%20events 結局Chromeは実装したみたいだけど : 515 [sage] 2018/02/09(金) 00:25:48.81ID:??? 皆様ありがとう! スマホはmouseじゃないからなのか ぐぐってやってみて、ちゃんと動くようになったのが var clickEventType = ((window.ontouchstart!==null) ? 'mousedown':'touchstart'); $('.slotBtn').on(clickEventType, function () { socket.emit($(this).attr('id')); }); // thankYou!!! : Name_Not_Found [sage] 2018/02/09(金) 00:35:08.20ID:??? タッチパネルつきパソコンはどうなるのか?って考えると 両方onしたほうがいいのかもしれないけどな イベント2つ扱うときはこういう書き方な $('.slotBtn').on("mousedown touchstart", function () { socket.emit($(this).attr('id')); }); あとどうでもいいけど、イベントハンドラ内のthisみたいに 必ず要素が一個であると断定できる時は、this.id と最近は書いてる : Name_Not_Found [sage] 2018/02/09(金) 00:41:05.58ID:??? 内部でvarしない関数定義もしない即時関数って、即時関数にする意味なんかある? : Name_Not_Found [sage] 2018/02/09(金) 00:42:29.31ID:??? 2回呼ばれることは絶対ないのけ? : 515 [sage] 2018/02/09(金) 00:44:41.07ID:??? mousedown と touchstart 併記したら safariのやつが2つとも反応しちゃうんですよ this.id の件了解!きっとこの方が速いんですよね : 515 [sage] 2018/02/09(金) 00:50:57.13ID:??? $('.slotBtn').on(clickEventType, socket.emit(this.id)); ってことですね 習慣でいたるところに… : Name_Not_Found [sage] 2018/02/09(金) 00:52:03.46ID:??? 例えばbuttonの中に生の文字と<img>があってbuttonにイベントリスナつけたとき : Name_Not_Found [sage] 2018/02/09(金) 00:53:04.40ID:??? それダメwww : Name_Not_Found [sage] 2018/02/09(金) 00:56:43.96ID:??? それ動くの? で言ってるのは例えばこんな感じの記述 (function(){ document.getElementsByClassName('slotBtn')[0].addEventListener('mousedown', function(){ call.some.function(); }, false); })(); : 515 [sage] 2018/02/09(金) 00:56:44.37ID:??? なんんでぇー : Name_Not_Found [sage] 2018/02/09(金) 00:58:46.31ID:??? 関数そのものを渡さなきゃいけない function(){}を渡すのはいいが、 socket.emit(this.id)ではsocket.emit(this.id)を実行した結果が渡される って感じか? : 515 [sage] 2018/02/09(金) 01:01:09.65ID:??? やってないんで、やらんで良かった コードさんきゅです、理解できた : Name_Not_Found [sage] 2018/02/09(金) 01:03:05.75ID:??? それだとその行にきた段階でリスナー登録じゃなく socket.emit() が実行される もとのやつでいい : Name_Not_Found [sage] 2018/02/09(金) 01:05:39.21ID:??? タッチ、タップは魔境だなぁw 単体でもたくさんあるしuiライブラリ専用のもあるし… ttps://npms.io/search?q=touch%20events これなんかすげえ便利そう ttps://github.com/GianlucaGuarini/Tocca.js あとzingchartってやつはサンプルがウケた。いいのかこれw ttps://codepen.io/zingchart/full/BzmdwQ : Name_Not_Found [sage] 2018/02/09(金) 01:10:09.52ID:??? そのうえ 画面のスクロールとかスクロールバー付き要素のスクロールとか 2本以上の指のタッチとか アホかってほどいっぱい面倒なもんが出てくるからな : Name_Not_Found [sage] 2018/02/09(金) 01:20:09.65ID:??? zingchartじゃなくてzingtouchだった… ttp://zingchart.github.io/zingtouch/ : Name_Not_Found [sage] 2018/02/09(金) 01:23:18.30ID:??? ただ単にタッチを検出したいだけなら touchstartとかでいいが タッチを利用したカルーセルのような インターフェースを作りたいのなら 自作するより使ったほうが楽 理由はが書いているとおり : Name_Not_Found [sage] 2018/02/09(金) 01:31:40.71ID:??? 自分も作るけど使い分けなくて便利だからPointer Events使ってる 来年にはFxとSafariでも使えそうな雰囲気だし 今はChromeとEdgeだけでもいいでしょ : Name_Not_Found [sage] 2018/02/09(金) 01:34:56.66ID:??? カルーセル作りたいなら、の意味がわからん : Name_Not_Found [sage] 2018/02/09(金) 01:43:38.37ID:??? touch, mouse を透過的に扱うのは、 Electron, Cordova, React などのフレームワーク ECMA5 では、ブロックスコープが無かったから、 関数でスコープを作る : Name_Not_Found [sage] 2018/02/09(金) 01:52:06.65ID:??? やっぱ魔境じゃん ttp://mk.hatenablog.com/entry/2017/08/27/003515 : Name_Not_Found [sage] 2018/02/09(金) 01:53:28.22ID:??? バッドノウハウの温床というやつだな : Name_Not_Found [sage] 2018/02/09(金) 01:54:39.96ID:??? 内部でvarしない関数定義もしない場合、スコープ作る必要ある? : Name_Not_Found [sage] 2018/02/09(金) 04:12:44.08ID:??? 前提知識として学ばないといけないことが多すぎ複雑すぎなのが嫌なのに ライブラリの構造とか使い方とか さらにさらにバージョンごとの差異とか そんなん使ってられませんわ : Name_Not_Found [sage] 2018/02/09(金) 08:46:59.23ID:??? JSの仕組み自体はシンプル・イズ・ザ・ベストなのに : Name_Not_Found [sage] 2018/02/09(金) 08:59:58.13ID:??? というか、柔軟なんだよ : Name_Not_Found [sage] 2018/02/09(金) 09:43:55.08ID:??? > カルーセル作りたいなら、の意味がわからん 考えることがたくさんあるからだよ 要件次第だが カルーセルで横スクロールする時、 縦スクロールしたらページはスクロールするか?とか ピンチ、ピンチアウト機能と両立できるか?とか スクロールはスムーズか?とか (スムーズにするためのCSSの機能があるが使えない機種がある) : Name_Not_Found [sage] 2018/02/09(金) 10:00:02.38ID:??? カルーセルの基礎構造って ・操作に応じて横方向に画像が切り替わりループするスライド ・スライドを操作する「<」「>」ボタンや「□■□□」のようなナビゲーションを兼ねたボタン これだけじゃないのか touchendが使えればtouch*、でなきゃclickやmousedown、だけで普通にpure jsで書けね : Name_Not_Found [sage] 2018/02/09(金) 11:08:48.56ID:??? 初心者が失礼します ttp://fast-uploader.com/transfer/7073696781713.jpg このコードで28行目の関数の引数eventはクリックしたときに引き渡されると思うんですが何が引数として引き渡されているのでしょうか? event.clientXとevent.clientYでそれぞれ左上から縦横の位置を示してるのはわかるんですが、 じゃぁ.clientXと.clientYをとったときのeventってなんなんだろうって疑問になります。 この引数はいったい何でいつどんな変数が入ってるのでしょうか? : Name_Not_Found [sage] 2018/02/09(金) 11:28:00.42ID:??? イベントオブジェクトの一種、マウスイベントオブジェクト clickされたときにブラウザがイベントオブジェクト作って引数eventとして引き渡してくれる .clientXや.clientYはマウスイベントオブジェクトが持っているプロパティ だからevent.clientXでマウスX座標が取れる ttps://developer.mozilla.org/ja/docs/Web/API/MouseEvent/clientY : 515 [sage] 2018/02/09(金) 11:47:48.48ID:??? pointer events って便利そうだけど 今、動作するのは chrome と edge だけってことですか? 作ってるサービスの対応ブラウザとしては、できるだけ多くを相手にしたいです。 自分が作ってる中で 押したらすぐ反応して欲しい部分は、プレイ画面中のボタンだけなんです ある機械の状態をWebRTCでリアルタイムに流してて、ボタンはその機械を操作するものです これスレと関係なかった : Name_Not_Found [sage] 2018/02/09(金) 11:49:18.43ID:??? なるほど、リスナーに引数を持つ関数を登録するとブラウザが自動で引数にイベントオブジェクトを入れてくれるんですね。 ありがとうございます。 : 515_555 [sage] 2018/02/09(金) 12:16:28.78ID:??? スレ違だろうなぁ、でも他に 知見のある人のいるスレが見つけられない m_m もう諦めてるんですが 画面サイズから video を90度回して縦方向いっぱいに計算して表示してるのですが スマホ画面の上とか下に出てくるじゃまなやつのせいで動画が ちっちゃくなってしまうのは、どうにもならないですか : Name_Not_Found [sage] 2018/02/09(金) 13:21:50.31ID:??? 何でFullScreenAPI使わないの? : 515_555 [sage] 2018/02/09(金) 14:55:53.28ID:??? ありがとう! これも、なんぞそれ!? ってことで調べながらやってみてます が、90度回してる影響かうまくいってないです : Name_Not_Found [] 2018/02/10(土) 11:50:49.98:oy2RaxPK 下で「START」ボタン押してもなにもおこらないんですがなぜでしょう? エラーは出ません。 chromeです。 <div class="container operate"> <ul> <li><button class="button" id="start" onclick="click()" >START</button></li> </ul> </div> <script type="text/javascript" charset="utf-8" > function click() { window.alert("2"); } </script> : Name_Not_Found [sage] 2018/02/10(土) 12:17:41.99ID:??? click()の関数名がまずいっぽいね click1()に変えたら動いたよ : Name_Not_Found [sage] 2018/02/10(土) 12:35:50.48ID:??? そういうのもあるし、onclick属性とは HTMLのonなんたらで処理呼び出すのやめなよ : Name_Not_Found [] 2018/02/10(土) 12:51:55.94:oy2RaxPK ありがとうございます! 最初は別ファイルからインポートしてたんですけど はじめてスクリプト埋め込んだのでなんで動かないのかわからなかったので とりあえず動かなくなる地点を探そうとして 順番に埋め込むところを移動させていました。 : Name_Not_Found [sage] 2018/02/10(土) 13:20:38.10ID:??? reactさんをバカにするのはやめるんだ : Name_Not_Found [sage] 2018/02/10(土) 13:29:12.18ID:??? react?あれはJSXだから関係ない : Name_Not_Found [sage] 2018/02/10(土) 13:47:15.21ID:??? 細かい話をするとreactとJSXも関係ない。別にJSX使わなくても全部関数で書ける。 で、JSXで書いて、reactが生成する生DOM確認してみた?onclick属性使われてるよ。 : Name_Not_Found [sage] 2018/02/10(土) 13:54:02.97ID:??? reactとJSXは関係ない。 だからreactは持ち出してくるなって話なんだが? : Name_Not_Found [sage] 2018/02/10(土) 14:15:36.43ID:??? 根拠なくon*属性にハンドラ書くの否定するなという話なんだが? : Name_Not_Found [sage] 2018/02/10(土) 15:23:07.72ID:??? reactがHTMLのon*使ってるかどうかはon*が良いか悪いかの指標にはならん : Name_Not_Found [sage] 2018/02/10(土) 15:27:51.69ID:??? じゃあのやめなよの根拠は? : Name_Not_Found [sage] 2018/02/10(土) 15:45:42.89ID:??? やめなよ : Name_Not_Found [sage] 2018/02/10(土) 15:50:10.61ID:??? |ヽ∧_ ゝ __\ やめなよ ||´・ω・`| > /  ̄ ̄ 、ヽ _______ └二⊃ |∪=| |─── / ヽ⊃ー/ノ  ̄ ̄ ̄ ̄  ̄`´ ̄ : Name_Not_Found [] 2018/02/10(土) 20:33:03.75:tiFE6zoU こう言う文字列を作成して var str ='文字列'; var func = '<button onclick="func(¥'' + str + '¥')">実行</button>'; funcをhtmlのページに埋め込みました。 そのhtmlを表示すると、文字列strが英数字なら問題ないのですが、文字列中にシングルクォーテーションとかダブルクォーテーション が混じっているとエラーが出ます。 正しい解決方法を教えてください。 : Name_Not_Found [sage] 2018/02/10(土) 21:22:04.38ID:??? 埋め込みました、て・・・document.writeしたりelement.innerHTMLに入れたりしてんだろ なんでcreateElementしてaddEventListenerしてappendChildしないんですか : Name_Not_Found [sage] 2018/02/10(土) 21:33:18.02ID:??? そういう問題ではない : Name_Not_Found [sage] 2018/02/10(土) 21:45:41.78ID:??? シングルクォーテーションの数が奇数です : Name_Not_Found [] 2018/02/10(土) 22:49:57.63:tiFE6zoU やり方が分からないからです。 : Name_Not_Found [sage] 2018/02/10(土) 23:12:46.00ID:??? もろもろエスパーするとこれはサーバーサイドテンプレート… expressかなにかでやってる? : Name_Not_Found [sage] 2018/02/10(土) 23:19:52.42ID:??? 何がどうエラーなのかぐらい書いてくれ 再現できなきゃ話にもならん ttps://jsfiddle.net/84f0yahw/ : Name_Not_Found [sage] 2018/02/10(土) 23:31:51.47ID:??? やっぱたぶんサーバーサイドテンプレートなんだろうな。 質問するのになんで隠すのか分からんが。 ほらよ 出力確認のためのconsole.logもつけたから良く確認するように。 var str = 'こんにちは\'赤"ちゃん'; // 念のため言っとくがこの場合ここシングルクォートにエスケープ必要 console.log(str); // こんにちは'赤"ちゃん str = str.replace(/'/g, "\\'"); // ブラウザJSのコンテキストでシングルクォートエスケープ処理 console.log(str); // こんにちは\'赤"ちゃん str = str.replace(/"/g, '"'); // HTMLのコンテキストでダブルクォートエスケープ処理(文字参照に変換) console.log(str); // こんにちは\'赤"ちゃん var func = '<button onclick="alert(\'' + str + '\')">実行</button>'; console.log(func); // <button onclick="alert('こんにちは\'赤"ちゃん')">実行</button> : Name_Not_Found [sage] 2018/02/10(土) 23:34:28.83ID:??? あ、すまん確認のためfuncをalertに変えてたんだった。alertはfuncに置換してくれ : Name_Not_Found [sage] 2018/02/11(日) 00:43:04.96ID:??? babelって今は末尾再帰最適化をサポートしてくれないんですか? せっかく気軽に再帰で開発できると思ったのに…… : Name_Not_Found [sage] 2018/02/11(日) 01:03:27.06ID:??? SSIだとなんか問題起きるんか(ハナホジ : Name_Not_Found [sage] 2018/02/11(日) 01:36:10.68ID:??? プラグインになっただけじゃねーの? ttps://www.npmjs.com/package/babel-preset-optimized This is a list of plugins this uses. Do note that by default, not all of these may run: babel-plugin-minify-constant-folding babel-plugin-loop-optimizer babel-plugin-closure-elimination babel-plugin-tailcall-optimization : Name_Not_Found [sage] 2018/02/11(日) 02:21:31.20ID:??? ttps://w3techs.com/technologies/overview/javascript_library/all w3techsによると2017年1月の時点で71.9%のサイトが JavaScriptのライブラリとしてjQueryを使用していることが判明したが それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。 またAngularは0.5%、だがReactが伸びてきており0.5% とAngularを逆転したことがわかる だがjQueryには大幅なさをつけられており取って代わるのは いつになるのか動向が注目される : Name_Not_Found [sage] 2018/02/11(日) 02:46:01.53ID:??? 軽く使えるDOM操作ライブラリってほとんどないから : Name_Not_Found [sage] 2018/02/11(日) 02:51:23.00ID:??? jqueryに大幅な差というよりangularやreactが木っ端なだけだろ : Name_Not_Found [sage] 2018/02/11(日) 03:18:40.93ID:??? 自前でwebサービス立ち上げてる会社以外reactもangularも出番ないんですもの。 : Name_Not_Found [sage] 2018/02/11(日) 03:57:28.37ID:??? 自社でがっつりやるなら自社で組む手があるからなぁ 他所のポリシーに合わせる必要なくなる : Name_Not_Found [sage] 2018/02/11(日) 08:39:54.82ID:??? jQuery を使え <button id="btn1">押して</button> $('#btn1').click (function() { // ここに処理を書く console.log("クリックされた"); }); : Name_Not_Found [sage] 2018/02/11(日) 11:48:00.24ID:??? 取って代わるてw 使われ方が全く違うだろ : Name_Not_Found [sage] 2018/02/11(日) 11:49:51.13ID:??? > 使われ方が全く違うだろ ちゃんとした考え方できる人はそうわかるんだけどね。 今のところjQueryがなくなることはない。 jQueryの代替技術はない だけど一部のjserどもが、jQueryはオワコン これからはAngular、Reactやで! jQuery使わなくて頑張ればコストがかかるだけでできる! などと言い始めたからね。 : Name_Not_Found [sage] 2018/02/11(日) 11:50:35.97ID:??? jQueryがまだ下り坂になってないのは この一年でシェアが更に増えたことからも明らかだよな : Name_Not_Found [sage] 2018/02/11(日) 11:58:03.08ID:??? addEventListenerとattachEventの違いの吸収のように UA間で異なる仕様が少なくなっていくにつれて jquery自体が不要になっていくんじゃないの 例えばアニメーションだって5年前とは比較にならんほどcss対応進んだし : Name_Not_Found [sage] 2018/02/11(日) 11:59:05.35ID:??? どっちかっていうとこれからはピュアなjavascript : Name_Not_Found [sage] 2018/02/11(日) 12:10:26.49ID:??? addEventListenerとonの違いを考えれば jQuery優位になるんだよ。 今はaddEventListenerが優位な点も残っているが解決できる でも逆にaddEventListenerはonの優位な点を解決することができない onが優位な点 ・onの方が文字数が少ない ・複数のイベントに対して一度にイベントを設定できる ・後から追加される要素に対しても働くイベントハンドラが簡単に書ける addEventListenerが優位な点 ・イベントハンドラの設定が速い(だが体感できるものではない) ・キャプチャフェーズにも対応できる(そもそもIE8非対応の機能。jQuery 4.0で対応予定) ttps://github.com/jquery/jquery/wiki/jQuery-4.0-Event-Design 結局jQueryオブジェクト=DOM要素のコレクションという仕組みが最強なんだわ jQueryオブジェクトはjQuery独自のものだから標準にとらわれず自由にメソッドを追加できる : Name_Not_Found [sage] 2018/02/11(日) 12:12:46.62ID:??? > どっちかっていうとこれからはピュアなjavascript ピュアなjavascriptがループとか条件分岐なしに 書けるようになればね・・・ 結局、言語の設計方針レベルの問題だから ループなしにセレクタに一致する要素群に対して 一括でイベントハンドラを設定できるようにはならんと思うよ : Name_Not_Found [sage] 2018/02/11(日) 12:24:44.98ID:??? >後から追加される要素に対しても よくわからないんだが 適切にHTML構造作ってバブリング考えてリスナ組み立てればいいだけでないの : Name_Not_Found [sage] 2018/02/11(日) 12:42:53.72ID:??? jQueryだと $('.class').on('click', function() { this はクリックされた要素 } ); これを $(document).on('click', '.class', function() { this はクリックされた要素 } ); こう書き換えるだけでいい。 イベントハンドラの中身も書き換えなくて済む これとまったく同じことをjQueryを使わずに書こうとしたら ほんとうに大変だよ : Name_Not_Found [sage] 2018/02/11(日) 13:00:41.21ID:??? class名でイベントリスナ貼り付けるの好きだよねjquery使い : Name_Not_Found [sage] 2018/02/11(日) 13:02:25.85ID:??? IDでイベントハンドラを付ける意味が無いからね。 : Name_Not_Found [sage] 2018/02/11(日) 13:07:07.65ID:??? jQueryは動的ページと相性が良くて動的ページっていうのはある要素が条件によって 存在したりしなかったりするわけだけど、jQueryを使うといちいち要素が 存在しているかしていないかをチェックする必要がない その動きはCSSと一緒。 CSSでも特定の要素が存在しなくてもエラーにならない そして要素が1つであっても複数であっても、それを気にする必要がない。 まったく同じコードで処理できる。 同じことをDOM APIだけでやろうとするとループが必要になってしまう。 そのループを避けるため、ID指定で一つの要素だけ取得しようとするが そもそもループが存在しないjQueryではID指定に拘る必要がない。 : Name_Not_Found [sage] 2018/02/11(日) 14:34:55.91ID:??? >これとまったく同じことをjQueryを使わずに書こうとしたら >ほんとうに大変だよ 後から追加した要素のイベントを検出するのは、 JavaScriptで同じ事をやろうと思えば出来るんですか? jQueryではどんな手法でやっているんですか? : Name_Not_Found [sage] 2018/02/11(日) 14:36:00.82ID:??? そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか やっぱり中に何があるかわからんけど、取り敢えず外から操る、それを楽にしたいでは無くて コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ : Name_Not_Found [sage] 2018/02/11(日) 14:43:37.25ID:??? まずイベントバブルを利用してdocumentにイベントハンドラを設定する その後、発生したイベントの発生元が、指定したセレクタに一致するか比較する そうすればできる。 最近のブラウザなら、指定したセレクタに一致するか比較するのは簡単に できるようになっているらしいが、jQueryはそれができない時代から 独自で実装していた : Name_Not_Found [sage] 2018/02/11(日) 14:44:18.43ID:??? > そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか JavaScriptを使ったページで、要素が動的に増えたり減ったりするのは よくあると思うけど? : Name_Not_Found [sage] 2018/02/11(日) 14:48:04.46ID:??? > コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう そうそれ! jQueryが得意な所 IDを使ってしまうとコンポーネント化とは逆の方向になってしまう。 コンポーネントというのは使いまわしできるもので、 同じコンポーネントが一つのページに複数存在したりするものだからね。 それがjQueryと相性がいい。 同じコンポーネントというのは同じクラスであるということ クラスに対してイベントハンドラを設定することで コンポーネントに対しての処理が書きやすくなる。 > グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ 即時関数を使ってグローバル変数を無くすってのはよくあるけど、 jQueryを使うと即時関数を使わなくてもグローバル変数はなくなってしまう。 実際に書いてみればわかるがこんな感じになるから $(".class").on('click', function() { // ここはローカル変数 }); : Name_Not_Found [sage] 2018/02/11(日) 15:06:24.05ID:??? 結局、ここ数年のWeb界隈を見るに、既存のDOM構造の地位を脅かすようなモデルが現れてないからね それらと相性がいいjQueryは、好みはともかく、現実的にはまだしばらくは覇権でしょう : Name_Not_Found [sage] 2018/02/11(日) 15:15:05.35ID:??? jQueryは設計センスが良すぎてとても真似できない これとlodashであと10年戦う : Name_Not_Found [sage] 2018/02/11(日) 15:19:30.26ID:??? 懐かしいな。もう一年前になるのか。 jQueryはオワコン、下降傾向にあるって言ってたやつ 一年経って減るどころか1.4%も増えたで? その増えた量はReactよりも多い どんな気分?w : Name_Not_Found [sage] 2018/02/11(日) 15:39:18.08ID:??? angularやreactとかは大規模複数人開発案件でないとメリットがデメリットを上回らないからjQueryはなくならないと思う。 jQueryにマウント取ってるreactファンボーイが頭おかしいだけ。 しかも攻撃理由がreact等のvirtualDOMとjQueryの生DOM操作は相性悪い→jQueryはオワコン だからな。最高に頭悪い。 飛行機ができたから電車オワコンと言ってるようなもの。 原爆できたから軍隊にナイフ要らないと言ってるようなもの。 : Name_Not_Found [sage] 2018/02/11(日) 16:49:33.71ID:??? 直近の親要素にaddEventListenerすれば済むことでは classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる : Name_Not_Found [sage] 2018/02/11(日) 16:52:19.03ID:??? >イベントバブルを利用してdocumentに とりあえずグローバル変数、とりあえずsingletonみたいな感じで気持ち悪い 最低限にまとめろよ : Name_Not_Found [sage] 2018/02/11(日) 18:01:41.90ID:??? jQueryの是非は置いておいても angularもreactもJSXもダメすぎる、あんなものが覇権取れるわけない : Name_Not_Found [sage] 2018/02/11(日) 18:32:29.27ID:??? 直近の親要素にaddEventListenerするだけだと、クリックされた要素をうまく取得できない 下記のHTMLで動的に増えるものがliだとして、そのliの中に更にspanなどが入っている場合 [click here]の部分をクリックすると期待するliが取得できない <ul id="ul"> <li>list1 <span>[click here]</span></li> <li>list2 <span>[click here]</span></li> <li>list3 <span>[click here]</span></li> </ul> document.getElementById('ul').addEventListener('click', function(event) { console.log(this); // ul console.log(event.srcElement); // span console.log(event.target); // span console.log(event.currentTarget); // ul }) jQueryだと大丈夫。実際にイベントハンドラを付けたulも イベントハンドラで取得したいliも 実際にクリックされたspanも簡単に取得できる $('#ul').on('click', 'li', function(event) { console.log(this); // li console.log(event.target); // span console.log(event.currentTarget); // li console.log(event.delegateTarget); // ul }) : Name_Not_Found [sage] 2018/02/11(日) 18:39:00.92ID:??? > classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる なんで? 再利用させたいならばjQueryプラグインになるだろうけど jQueryプラグインは特定のクラスに結びつくものじゃない : Name_Not_Found [sage] 2018/02/11(日) 18:47:24.99ID:??? 詳しい説明ありがとうございました。 : Name_Not_Found [sage] 2018/02/11(日) 19:12:11.35ID:??? >spanなどが入っている場合 HTML構造がそうなってるならspanだったらparentNode拾ってくればいいだけでは classを使う必要性がない : Name_Not_Found [sage] 2018/02/11(日) 19:34:32.90ID:??? spanじゃなくて、divの中にspanだったら こんどはparentNodeのparentNodeを取ってくればいいだけ。 またその他の要素が入っていたら、頑張ってJavaScriptを メンテナンスすればやれないことはない 気合と金と時間さえあれば歩いて九州から北海道だって行ける! : Name_Not_Found [sage] 2018/02/11(日) 19:35:14.22ID:??? 今はどれだけ簡単にできるかって話をしてるんだから そこでparentNodeを取ってくればーと言った時点で、 簡単にはできないってことになるんだよ : Name_Not_Found [sage] 2018/02/11(日) 19:36:00.78ID:??? やっぱりjQueryのdelegate相当のことをやろうとしたら 素のDOM APIでは大変そうですね : Name_Not_Found [sage] 2018/02/11(日) 19:36:44.02ID:??? やっぱりjQuery良く出来てるわー 一年経って減るどころか増えてるからぐうの音もでないだろうね : Name_Not_Found [sage] 2018/02/11(日) 19:37:35.56ID:??? html構造 javascriptも使うしCSSも使う class名 一般的にはCSSが使う html構造変わったらjavascriptコードも変わるのが当たり前 class変わってもjavascriptコードが変わることはあまりない javascriptでclassをトグル切り替えするとかその程度 : Name_Not_Found [sage] 2018/02/11(日) 19:41:05.71ID:??? 1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい? 逆に、デザイナがCSSいじるとき javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい そういう話をしているんだけど再利用ならjQueryプラグインが云々で何を言いたいのかさっぱり : Name_Not_Found [sage] 2018/02/11(日) 19:41:30.90ID:??? > html構造変わったらjavascriptコードも変わるのが当たり前 そう、それがDOM APIの常識だった。 だけど、jQueryはそれを打ち破った。 なにせCSSと同じくセレクタを使って要素を絞り込むわけだから、 CSSと同じ効果が得られた そして同じセレクタに同じデザインを適用するCSSと 同じセレクタに同じ振る舞いを持たせるjQueryという関係が出来上がった 考えてみれば、セレクタ=コンポーネント、 同じコンポーネントが同じデザインとう振る舞いを持つのは当然ではないか そして混沌としてHTMLとJavaScriptの世界に 汎用性がもたらされた : Name_Not_Found [sage] 2018/02/11(日) 19:43:30.58ID:??? 生DOMはいい加減自分を操作するために親を経由するとかそういうのやめてほしい やるとしても適当に関数作って内部でやっとけばいいのに : Name_Not_Found [sage] 2018/02/11(日) 19:43:59.66ID:??? > 1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい? そうだよ。知らなかった? 複雑度っていうのは条件分岐一つで大きく膨れ上がる。 ifが1つ増えれば2倍、2つ組み合わさればなれば、2倍の2倍で4倍。 3つだと8倍。一つ増えるだけででテストしなければいけない場合は 指数関数的に増加する if一つだから簡単だと思っているやつは 考えが浅いというわけさ : Name_Not_Found [sage] 2018/02/11(日) 19:45:04.61ID:??? > javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい デザイナがいじるのはデザインであってclass名じゃないからね : Name_Not_Found [sage] 2018/02/11(日) 19:48:13.86ID:??? 同じスタイルを適用したくても javascriptがclass名で決め打ち処理入れてるから CSSをコピペしたり別のclass名を作ったりしなきゃいけない、と嘆かないデザイナ? : Name_Not_Found [sage] 2018/02/11(日) 19:49:27.45ID:??? 違うものに同じデザインを適用したいってことないでしょw : Name_Not_Found [sage] 2018/02/11(日) 19:49:37.98ID:??? Webデザイナと連携したことないけど何かいろいろ闇があるんですか? : Name_Not_Found [sage] 2018/02/11(日) 19:50:03.87ID:??? 切り分けたい時もあるし切り分けたくない時もある 切り分けられないを強要するライブラリということだ : Name_Not_Found [sage] 2018/02/11(日) 19:50:10.81ID:??? あるわい! 違うものであってもデザインが同じなら クラス名も同じにするんだい! デザインが赤なら、クラス名もredにするだろ! : Name_Not_Found [sage] 2018/02/11(日) 19:50:42.82ID:??? デザインが同じでも、本質的に別物なら それは違うクラス名を与えるべきだよ : Name_Not_Found [sage] 2018/02/11(日) 19:51:48.94ID:??? CSSに他classのスタイルを継承する文法があれば筋が通るんだけどね : Name_Not_Found [sage] 2018/02/11(日) 19:52:51.35ID:??? デザインが同じなら同じクラス名にしたいっていうのは このボタンの色は青でフォントサイズ2emですね。 こちらの見出しも青でフォントサイズも2emですね。 ならボタンと見出しでデザイン一緒ですから 同じクラス名にしましょうって考える人? : Name_Not_Found [sage] 2018/02/11(日) 19:54:32.31ID:??? JavaScriptを使う人はHTMLとCSSのことも理解していなければ だめだってわかる典型的な例だな なぜかJavaScript使う人でHTMLやCSSが苦手な人が多い : Name_Not_Found [sage] 2018/02/11(日) 19:54:58.82ID:??? なお実行順序の管理 : Name_Not_Found [sage] 2018/02/11(日) 20:05:18.62ID:??? 違うものに同じスタイルを適用したいからって クラス名を同じにするとか愚の骨頂 素人同然だわ : Name_Not_Found [sage] 2018/02/11(日) 20:07:44.45ID:??? HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが idはscriptから参照するためという目的が明示されてるが 併記されているclassにはそれがない 同じclassが同じ振る舞いであるべきかどうかは定かではないと言っておきたい : Name_Not_Found [sage] 2018/02/11(日) 20:08:40.11ID:??? > HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが 思い込みな。何処かに書いているというのなら言ってみてくれ ちなみに、idはスタイルのためのものかい?w : Name_Not_Found [sage] 2018/02/11(日) 20:10:55.73ID:??? ttp://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176 ここからリンクされている ttp://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-class これ 「role」としてid, class双方に「style sheet selector」が明示されているが scriptはというとidのみ : Name_Not_Found [sage] 2018/02/11(日) 20:12:24.83ID:??? どうせ適当な事を言うだけ言って逃げるだろうから 書いておくわ ttps://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes > 要素のクラスを空白区切りで並べたリストです。クラスは CSS の > クラスセレクター や JavaScript の Document.getElementsByClassName() メソッドと > いった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。 ttps://dev.w3.org/html5/spec-preview/global-attributes.html#classes > Assigning classes to an element affects class matching in selectors in CSS, > the getElementsByClassName() method in the DOM, and other such features. : Name_Not_Found [sage] 2018/02/11(日) 20:12:29.22ID:??? CSSがなんたるかどう書くべきかを理解しているデザイナとしか仕事しないのならいいけどね : Name_Not_Found [sage] 2018/02/11(日) 20:13:27.58ID:??? なんで今さらHTML4.01なんか持ち出してきたの? わざと? : Name_Not_Found [sage] 2018/02/11(日) 20:14:27.71ID:??? 後者引用の文章は、classの割り当てはgetElementsByClassName()に影響すると言っているのみであって classとは何であるかを説明しているものではないようだが : Name_Not_Found [sage] 2018/02/11(日) 20:15:02.57ID:??? ほう、やっぱり意図的にHTML4.01を持ってきたようだ ttps://www.w3.org/TR/2014/REC-html5-20141028/dom.html#classes Note: Assigning classes to an element affects class matching in selectors in CSS, the getElementsByClassName() method in the DOM, and other such features. : Name_Not_Found [sage] 2018/02/11(日) 20:15:04.30ID:??? w3 vs mozilla、ファイッ! : Name_Not_Found [sage] 2018/02/11(日) 20:15:41.23ID:??? クラスは色んな使い方として用いられると書いてあるが スタイル専用なんてどこに書いてあるか? : Name_Not_Found [sage] 2018/02/11(日) 20:16:34.19ID:??? ttps://www.w3.org/TR/2014/REC-html5-20141028/dom.html#classes を翻訳してみた > 3.2.5.7class属性を > すべてのHTML要素にはclass属性が指定されている場合があります。 > > 属性が指定されている場合は、要素が属するさまざまなクラスを表すスペース区切りのトークンのセットである値を指定する必要があります。 > > クラスHTML要素がの値とき、それはすべてのクラスで構成さに割り当てたが返さclass属性がされた空間に分割します。重複は無視されます。 > > 要素にクラスを割り当てると、CSSのセレクタでのクラスマッチングgetElementsByClassName()、DOMでのメソッドなどの機能に影響し ます。 > > 作成者がclass属性で使用できるトークンには追加の制限はありませんが、作成者はコンテンツの所望の表現を記述する値ではなく、コンテンツの性質を表す値を使用することが奨励されています。 > > IDLは、DOMの仕様で定義され、属性を反映したコンテンツ属性を。 [DOM]classNameclassListclass スタイル専用のものと書いてない : Name_Not_Found [sage] 2018/02/11(日) 20:18:48.53ID:??? 同様にIDがJavaScript専用とかも書いてない 実際CSSで使えるわけだしね : Name_Not_Found [sage] 2018/02/11(日) 20:25:27.63ID:??? MDNでclassのことを確認したときに参照として書いてあったのでブックマークしておいたからだ シンプルで分かりやすかったから記憶に残っていたんだが の後者のURLを見ると目的が明示されなくなっているんだな 詳しく読んでくるがその前には取り消す、横から済まなかった : Name_Not_Found [sage] 2018/02/11(日) 20:27:38.57ID:??? お前の知識は古いから話にならないってだけだよ : Name_Not_Found [sage] 2018/02/11(日) 20:31:28.79ID:??? 仕様文書の読み方よく知らないんだけど こういうのって打ち消されない限り以前 のが有効だったりしないの? : Name_Not_Found [sage] 2018/02/11(日) 20:35:45.25ID:??? どちらを採用するかって話 HTML5を採用するなら、HTML5の仕様が全て 他の仕様書に書いて有ることは何の参考にもできない : Name_Not_Found [sage] 2018/02/11(日) 20:37:35.49ID:??? 過去を継承的に考えるのか過去を取り消 し的に考えるのかってことね : Name_Not_Found [sage] 2018/02/11(日) 20:42:23.47ID:??? ? HTL4.01という仕様を元に 必要なことを付け足し、必要ないものを削除し そして以前のものを継承させて完成させたのがHTML5だろ HTML4.01で引き継ぐ所は全部引き継いてるんだから HTML5だけを見ればいい。なくなった部分は廃止されたって意味だ。 : Name_Not_Found [sage] 2018/02/11(日) 20:48:30.15ID:??? HTMLの意味論にどこまで意義があるかはわからないけど 目的が抹消された例は結構あるな 理由はわからんが<dl>, <dt>, <dd>は定義リストじゃなくなった : Name_Not_Found [sage] 2018/02/11(日) 20:49:54.81ID:??? <i>とか<b>とか : Name_Not_Found [sage] 2018/02/11(日) 20:49:59.62ID:??? どーてーりすと? : Name_Not_Found [] 2018/02/11(日) 23:12:13.10:IlEpejin 議論に関係ないが、こういう人いるわ…… わりと疲れる : Name_Not_Found [sage] 2018/02/11(日) 23:44:24.67ID:??? jQuery のソースコードを読むと、 Android 4.0, IE 9, IE 8 などの分岐処理がある こんなの自分で対応できないだろ。 アホらしい : Name_Not_Found [sage] 2018/02/12(月) 05:32:37.11ID:??? つうかここでjQueryはあれに向いてる、これもできると言ってる奴らのレベルが低すぎる 一昔前JSとWebAPIだけであらゆることができると豪語してた奴ら未満 俺達はきちんとその時点でできることできないこと、得意なこと苦手なことを研究して この先何が必要か考えES Discasにも参加したし、ブラウザにissueも投げた JS大好きマンだが渋々C++でパッチも書いたこともある 結局自らの敵は自らで、jQueryがそういう用途に最適化された設計がされていない、 するつもりもあまりない、そういう用途で使おうと思ってる人が少ないって言うことが最大の敵なんだよ いつまでもDOM APIと張り合って、使うべきか使わないべきかみたいなレベルの低い争いを続けてるようじゃ、 今あるjQueryマンセーじゃ未来はないよ : Name_Not_Found [sage] 2018/02/12(月) 05:45:10.35ID:??? そういう話じゃない。 : Name_Not_Found [sage] 2018/02/12(月) 09:56:53.54ID:??? すげえ、驚くほど話が噛み合わない : Name_Not_Found [sage] 2018/02/12(月) 10:09:58.32ID:??? HTMLの最後でjs読み込むのとwindow.onLoadで処理させるのと基本どっちを選ぶべきなの? : Name_Not_Found [sage] 2018/02/12(月) 10:35:10.82ID:??? そうあってほしいと考えているわけですね でもね、最初からjQueryはDOMライブラリだって言ってましたー その他の用途には、それ用のライブラリを使いますー : Name_Not_Found [sage] 2018/02/12(月) 13:00:09.27ID:??? jQueryがそういう用途に最適化された設計がされていないことについてはどう考える? : Name_Not_Found [sage] 2018/02/12(月) 13:00:37.00ID:??? そういう用途って? : Name_Not_Found [sage] 2018/02/12(月) 13:01:19.23ID:??? に書いてあるだろ : Name_Not_Found [sage] 2018/02/12(月) 13:01:44.19ID:??? いやだからどこに? : Name_Not_Found [sage] 2018/02/12(月) 13:03:42.86ID:??? 「いつまでもDOM APIと張り合って」って 書いているところから読み取れないかな? jQueryはなんでもできるんだろ? あれもこれもできるんだろ? だがjQueryはあれもこれもの用途に 最適化された設計になっていない 所詮DOM API代わりのDOM用ライブラリにすぎない : Name_Not_Found [sage] 2018/02/12(月) 13:04:38.97ID:??? 当たり前ですよね? jQueryはDOM用ライブラリですよ? なんでDOM用ライブラリをなんでもできるライブラリに しないといけないんですか? どんな機能にも対応している神ライブラリとでも 思っていたんですか? アホですねw : Name_Not_Found [sage] 2018/02/12(月) 13:05:51.12ID:??? ムキー! お前らがjQueryはなんでもできるライブラリだって言っていただろ その公約を守ってないからjQueryはクソライブラリだ! お前らが言っていたことができないからクソだ : Name_Not_Found [sage] 2018/02/12(月) 13:06:20.30ID:??? window.onload ttps://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload load イベントは文書のローディング工程の終了時に発生します。 このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、 全ての画像とサブフレームのロードは完了しています 画像のロード完了を待つ必要があるかな? 漏れなら、画像など無視するから、<body>のラストで、JS を読み込む : Name_Not_Found [sage] 2018/02/12(月) 13:06:28.15ID:??? お前らが言っていた = 妄想 自分の妄想が実現されてないからクソだって言ってたのか アホだな : Name_Not_Found [sage] 2018/02/12(月) 13:16:21.54ID:??? window.onloadは発動が遅いから、 それよりも早く発動するDOMContentLoadedってのができた。 そしてjQueryはDOMContentLoaded相当のタイミングで発動する readyメソッドっていうのをDOMContentLoadedができるより前から実装していた でもbodyの最後で実行していれば、readyはいらんのよね。 なぜか昔はJavaScriptは、<head>の中に書くもんだってお作法があった 今はbodyの最後で書いてもよいとなったから、実はjQueryでもreadyは使う必要がない。 更に言うならば、<head>で書いたとしても、 $(document).on(イベント, セレクタ) の形式を使っていればreadyはいらないんだよね。 なぜならdocumentはその時点で存在しているから bodyの最後で書くのは最速に思えるかもしれないけど、 1ページの長さが極端に長かった場合、bodyの最後に到達するまでは JavaScriptの処理が発動しないことになる。 でも、<head>で $(document).on(イベント, セレクタ) の形式で書いていれば bodyの最後に到達しなくてもイベントを捉えることができる。 イベントを捉えてももちろんまだ該当の要素が読み込まれていなければ反応はしないが jQueryの正しいやり方で書いていれば、要素が0個でもエラーにはならない。 というわけで要素が画面に表示された直後からJavaScriptの処理が働くように するには、<head>で $(document).on(イベント, セレクタ) の形式で書くやり方なんだが 思考に慣れが必要ではあるだろうな : Name_Not_Found [sage] 2018/02/12(月) 13:16:25.33ID:??? 漏れって久々に見た : Name_Not_Found [sage] 2018/02/12(月) 13:55:03.15ID:??? 上でコンポーネント化の話などが挙がってるし、 逆に色々話題が出たときこれはjQueryでは向いてないという話になったことがない なんやかんや無理やりjQueryが使えると思い込んでる : Name_Not_Found [sage] 2018/02/12(月) 14:09:36.78ID:??? 思い込みが酷すぎて怖い 一緒に仕事したくないタイプ : Name_Not_Found [sage] 2018/02/12(月) 14:12:37.63ID:??? 向いていないという話が出なかったら 向いていると言っているんだ!って思い込んでんのか? 例えば日付処理にjQueryは向いてない ほら言ってやったぞ?どうするんだ? : Name_Not_Found [sage] 2018/02/12(月) 14:54:03.36ID:??? 餅ついてよく読め 脊髄反射するな : Name_Not_Found [sage] 2018/02/12(月) 17:03:04.48ID:??? jQueryはDOMライブラリである。 誰もjQueryが何にもでも使えるとは言ってない ここまではいいな? : Name_Not_Found [sage] 2018/02/12(月) 17:42:29.63ID:??? よかろう : Name_Not_Found [sage] 2018/02/12(月) 17:57:43.89ID:??? > なんやかんや無理やりjQueryが使えると思い込んでる 誰もjQueryが何にでも使えるとは言ってないので (エスパーでもない限り他人が思ってることなんてわからないので) 思い込んでる事とわかるのは自分自身()だけである ここまではよい : Name_Not_Found [sage] 2018/02/12(月) 22:13:26.66ID:??? ああ、スレ建てたやつがライブラリ禁止のテンプレ消したのか : Name_Not_Found [sage] 2018/02/13(火) 01:39:28.88ID:??? example.com?q=文字列 をサーバーサイドで受け取る時に文字列中に¥rや¥nも渡す事は出来ますか? : Name_Not_Found [sage] 2018/02/13(火) 02:54:43.50ID:??? %0Aや%0D : Name_Not_Found [sage] 2018/02/13(火) 09:34:16.09ID:??? 一番の問題はそう思われてるってことだと思うぞ jQuerer含むライブラリスタが過剰にライブラリを推してるのは事実 度々スレ分離したり議論になってるのにまだ自分たちがどう思われてるのかが分かってないのか : Name_Not_Found [sage] 2018/02/13(火) 09:53:45.83ID:??? > 一番の問題はそう思われてるってことだと思うぞ jQueryのアンチが変なふうに思い込んでるのは アンチが悪いってことで終わりじゃね? : Name_Not_Found [sage] 2018/02/13(火) 10:38:11.42ID:??? ライブラリの書き方はライブラリ使わないと通じない ライブラリを使わない書き方はライブラリ使ってても使ってなくても通じる ってところか? : Name_Not_Found [sage] 2018/02/13(火) 10:42:49.53ID:??? クチャラーに自覚したらと諭したら 俺は普通に食べてるだけ 耳障りに聞こえるのはお前が悪いと言われたって感じか : Name_Not_Found [] 2018/02/13(火) 22:29:27.55:AUT9CmqZ react.jsやangular.jsが役立つ大規模案件、とは具体的にどの程度の規模のサイトですか? 今まで小さな企業でしか勤めたことがなく、大規模案件と言われてもイメージが湧きません : Name_Not_Found [sage] 2018/02/13(火) 22:39:43.45ID:??? てことは一生知る必要がないんじゃないか : Name_Not_Found [sage] 2018/02/13(火) 22:43:02.36ID:??? 前もって勉強したいじゃん? : Name_Not_Found [sage] 2018/02/13(火) 23:09:02.10ID:??? すいませんageてしまいましたね 今のままの小さい仕事しかせずにjavascriptと言えばjqueryでチョロチョロ、みたいなキャリアで本当に将来生き残れるのかという不安があるのです あとは、自分がjqueryしかできないから会社も大きな仕事が取れないんじゃないかとか考えてしまったりですね : Name_Not_Found [sage] 2018/02/14(水) 00:01:20.48ID:??? どの位大規模かというと、最近YouTubeがPolymerを導入した だが、そのバージョンはv0.いくつのもの、今の最新はv3 そのくらい年単位で開発する案件に使うもの そこからわかると思うがフレームワークは前もって勉強する必要はない 実際使うべきときには役に立たないから 大手も使うと決めたときに改めて勉強会を開くなりして対応してる : Name_Not_Found [sage] 2018/02/14(水) 00:30:16.57ID:??? 離脱したくても離脱しづらくなるから使うなら見合った理由が必要 大規模だから使うというより 少数の比較的小規模な会社が 使い続けてく方が多い印象がある : Name_Not_Found [sage] 2018/02/14(水) 00:33:55.45ID:??? HTMLに影響強く出るのはあんまりやだな : Name_Not_Found [sage] 2018/02/14(水) 00:36:13.70ID:??? jQueryってもう役目が終わってるんだよ いい加減目を覚ましたほうが良い 作者も見放してReactやってるじゃん : Name_Not_Found [sage] 2018/02/14(水) 00:46:01.50ID:??? jQuery 73.2%(前年比 +1.4%)、React 0.6%(前年比 +0.5%) jQueryの役目が終わってからjQueryの役目が終わったというように ttps://w3techs.com/technologies/overview/javascript_library/all w3techsによると2017年1月の時点で71.9%のサイトが JavaScriptのライブラリとしてjQueryを使用していることが判明したが それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。 またAngularは0.5%、だがReactが伸びてきており0.5% とAngularを逆転したことがわかる だがjQueryには大幅なさをつけられており取って代わるのは いつになるのか動向が注目される : Name_Not_Found [sage] 2018/02/14(水) 01:35:49.34ID:??? これからの自分たちがどうしていくかの話をしてるのに 他の人が今何をやってるのかを気にするって意味がわからんな 良く使われてるのは所謂「枯れた技術」とは言えるけど 熟れた物ってこれから先腐っていくこととほぼイコールじゃん : Name_Not_Found [sage] 2018/02/14(水) 01:36:52.26ID:??? HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ? : Name_Not_Found [sage] 2018/02/14(水) 01:39:09.20ID:??? せやな、一年前に、これからはjQueryは減っていくとか これからは腐っていくとか予想を立てた人恥ずかしいよな これから?来年にはまたjQueryのシェア増えるんじゃね? AngularもReactも熟れる前にくされなきゃ良いけど Angularは一回腐れたよな : Name_Not_Found [sage] 2018/02/14(水) 01:41:28.87ID:??? HTTPSは費用と処理と通信のコストがあるからなあ : Name_Not_Found [sage] 2018/02/14(水) 01:42:14.75ID:??? > HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ? わかったわかった。HTTPSは最初からある程度使われいたからな 何かのフレームワークの使用率が10%を超えたら考えよう。 それでいいだろ? : Name_Not_Found [sage] 2018/02/14(水) 01:52:21.16ID:??? 中小規模の会社が請ける規模の案件なら 素のJSだけでも十分やってけるよ 昔と比べて格段に安定して書けるようになってきたから 万が一必要になったらその時必要な分だけ調べれば済む : Name_Not_Found [sage] 2018/02/14(水) 01:59:06.49ID:??? 大規模な会社がReact使っているかと言ったらそうじゃないからな なにせ0.5%しか使われていない : Name_Not_Found [sage] 2018/02/14(水) 11:54:19.76ID:??? Ruby のHTMLのテンプレートエンジン、erb では、 HTMLとRubyの構文が交互に来るから、わかりにくい。 PHP なんかもそう <% @items.each do |item| %> <li><%= item %></li> <% end %> もしRuby に、JSX があれば最強だろう : Name_Not_Found [sage] 2018/02/14(水) 12:19:02.69ID:??? JSXもクソじゃん。条件分岐とループごときに 言語の機能を使うようじゃダメ mustacheが最強 : Name_Not_Found [sage] 2018/02/14(水) 13:04:34.95ID:??? ここまで見てきて分かったのは 仕様というのは作って環境というのは動かしていくもんだと考えてる開発者と 仕様というのは与えられて環境というのは落ち着いたものに浸かるもんだと考えてる開発者じゃ 話合うわけ無いってことだな : Name_Not_Found [sage] 2018/02/14(水) 13:08:40.64ID:??? 問題 「作って環境というのは動かしていくもん」と 「与えられて環境というのは落ち着いたものに浸かるもんだ」の 違いを完結に述べよ : Name_Not_Found [sage] 2018/02/14(水) 13:39:11.48ID:??? 簡潔に言えば仕様標準化と実装に関わっているかどうかってことで言えるんじゃない? 企業で言うとミーティングやカンファレンスに社員を出張させているかどうか 別にそれは社会貢献のためではなくて自分たちのやりたいように環境を動かすためにそうしてる 環境というが実際は人 その場にいる仕様や実装書いてる人に直接会って、 こここういうバグが有るんですよとか、こういうところで困ってるんですよとか話ができるってことが重要 やっぱりそれはオンラインでプルリクエスト送るのとはぜんぜん違う 仕様や実装を作ってるのは人間で、意外と少数だから、向こうも幅広い意見を汲み取ろうとはしてるけれど どうしても自分たちの近い範囲が得をする恣意的なものになってしまう そのために皆わざわざ録画で見れるものを会場まで行く : Name_Not_Found [sage] 2018/02/14(水) 15:23:42.02ID:??? 会場のふいんきを感じ取れて満足した まで読んだ : Name_Not_Found [sage] 2018/02/14(水) 19:44:59.89ID:??? です ひとまず自分のやりうる業務のことを考えたらjqueryやes6の習熟でひとまずは大丈夫だと感じました まずはjqueryを使い倒してみて、jqueryでは不十分だと感じられるようになった段階で改めて考えてみることにします ありがとうございました : Name_Not_Found [sage] 2018/02/14(水) 23:18:13.39ID:??? ES2017位までは追いかけても損は無いよ : Name_Not_Found [sage] 2018/02/15(木) 02:17:15.83ID:??? オブジェクト型の分割代入やasyncジェネレータなど 既にモダンブラウザで使える重要なES2018の機能もあるよ : Name_Not_Found [sage] 2018/02/15(木) 13:13:52.45ID:??? 初めてのJavaScript 第3版、オライリー、2017 ES2015 の本。 これを読めば、クラスとか、素人はあまりの難しさに愕然とするだろう : Name_Not_Found [sage] 2018/02/15(木) 13:18:59.62ID:??? 素人が騒然とするのは当たり前だろ? いや、お前がプロで、難しくて騒然としたっていうなら それはそれで面白いことだがw : Name_Not_Found [sage] 2018/02/15(木) 15:15:21.53ID:??? そもclassはクソ。 ttps://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3 : Name_Not_Found [sage] 2018/02/15(木) 16:13:48.62ID:??? Maybeモナド的な機能がほすぃ : Name_Not_Found [sage] 2018/02/15(木) 17:07:52.68ID:??? JSのクラス化って何が利点になるの : Name_Not_Found [sage] 2018/02/15(木) 17:14:12.43ID:??? 人間のメンタルモデルとコードを一致させられるから 理解しやすくなる。可読性の向上 ひねくれた方法で「実現できる」じゃだめなんだ 普通に書いて普通に読めなければいけない : Name_Not_Found [sage] 2018/02/15(木) 18:38:34.26ID:??? 設計で方法論に従うことができる。 しかしテストでパターン数爆発で大抵死ぬ。 : Name_Not_Found [sage] 2018/02/15(木) 19:06:50.48ID:??? 自動テストさせちゃえ : Name_Not_Found [sage] 2018/02/15(木) 23:02:20.37ID:??? JSにテストなんて必要ない、トライアンドエラーがベスト テストしたいんならよりし易い言語で書いてコンパイルすべき : Name_Not_Found [sage] 2018/02/15(木) 23:17:37.27ID:??? > テストしたいんならよりし易い言語で書いてコンパイルすべき ではその、よりし易い言語がなにで どういう理由で、よりし易いのか言えるんでしょうな? : Name_Not_Found [sage] 2018/02/15(木) 23:56:25.01ID:??? 726ではないが、結局selenium動かしたり casperでもぞもぞしたりするなあ : Name_Not_Found [sage] 2018/02/16(金) 09:35:25.15ID:??? svgの制御についての質問はここでしてもいいですか : Name_Not_Found [sage] 2018/02/16(金) 11:04:46.77ID:??? OKOK SVG操作系javaScriptライブラリまとめ ttps://jslob.repop.jp/2017/07/svgjavascript.html : Name_Not_Found [sage] 2018/02/16(金) 12:18:40.76ID:??? ナイスまとめ! : Name_Not_Found [sage] 2018/02/16(金) 13:18:36.03ID:??? 昔foreignObjectを使って要素のミラーを作るというのを試した記憶があるのですが 今その情報を教えて頂けますか? 「あああ」をミラーしたら「あああ」が2つになって、大本を 「いいい」に変更するとコピー先も「いいい」になるという機能です : Name_Not_Found [sage] 2018/02/16(金) 13:20:06.33ID:??? 参照渡しやんけ : Name_Not_Found [sage] 2018/02/16(金) 13:20:47.53ID:??? ぐぐれば? : Name_Not_Found [sage] 2018/02/16(金) 17:13:54.49ID:??? 地図上に車のアイコンを置いて決まったルート上(svgのパス上)を動かすアニメーションを考えていて、進行方向に合わせてアイコンの向きを変えたいのですが、何を基準に計算をして向きを調整すれば良いかわからず困っています。 svg関連で角度の計算に使える関数やよい方法があれば教えていただけますか。 動きとしては↓こちらのサイトのようなものです。 ttps://itstudio.co/sample/svganime/anime7.html : Name_Not_Found [sage] 2018/02/16(金) 17:30:02.88ID:??? その犬の動きのほうがよく分からんw : Name_Not_Found [sage] 2018/02/16(金) 17:45:07.03ID:??? 三角関数あんじゃん : Name_Not_Found [sage] 2018/02/16(金) 19:03:04.44ID:??? ここの奴ら役に立たんな もうお前らには一切聞かんわ : Name_Not_Found [] 2018/02/16(金) 19:39:44.83:7Rrckydw SVGの線上となるとアレだけど 動かすルートが決まっているなら接線の傾き求めればいいじゃない : Name_Not_Found [sage] 2018/02/16(金) 19:58:08.01ID:??? そいでそいで? : Name_Not_Found [sage] 2018/02/16(金) 20:21:32.71ID:??? 接線か、なるほど気づきませんでした 接線の求め方から勉強してみます。。 : Name_Not_Found [sage] 2018/02/16(金) 23:25:19.42ID:??? 決まったルートがあるならatanだけで済む気がするんだが : Name_Not_Found [sage] 2018/02/17(土) 00:43:38.95ID:??? すみません。アニメーション自体はサイトのようなもので、これに角度の変化を付け加えたいという意味でした。 そしてよく見たらサイトのも微妙にrotateで傾けてますね。。折り返しの際に逆を向いてくれないので考えているものとは違いますが。 : Name_Not_Found [] 2018/02/17(土) 01:07:44.05:Y6pp8OiO 反転はtransformのscaleを使うのが容易いかも : Name_Not_Found [sage] 2018/02/17(土) 16:14:43.08ID:??? var test = { a: 1, b: 5, c: 6 } ってあって test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか? : Name_Not_Found [sage] 2018/02/17(土) 16:16:29.54ID:??? 3Dモデルでないと不自然になるよ : Name_Not_Found [sage] 2018/02/17(土) 16:19:34.31ID:??? 『javascript test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか?』 のGoogle検索結果を見ていけばわかる : Name_Not_Found [sage] 2018/02/17(土) 16:26:59.42ID:??? for(let [key, value] of Object.entries(test)){ console.log(key + ':' + value); } こうするとちょっとPHPっぽい : Name_Not_Found [sage] 2018/02/17(土) 17:13:27.27ID:??? for (let v of Object.values(test)) { console.log(v); } とか Object.values(test).forEach(v => { console.log(v); }); : Name_Not_Found [sage] 2018/02/17(土) 17:23:12.09ID:??? こっちのが汎用的だったか Object.entries(test).forEach(([key, value], index) => { console.log(key, value, index); }); : Name_Not_Found [sage] 2018/02/17(土) 17:51:17.23ID:??? なんで標準のJavaScriptを使うと 冗長になるのか教えてほしいものだ。 lodashを使ったほうが短いとか意味分からん _.forOwn(test, (value, key) => { console.log(key + ':' + value); }); : Name_Not_Found [sage] 2018/02/17(土) 18:17:17.64ID:??? どの言語も普通は標準よりライブラリ使った方が短くならね? : Name_Not_Found [sage] 2018/02/17(土) 18:54:43.59ID:??? だよなw いつものlodashくんがスレチ話するためのエクスキューズのつもりなんだろw : Name_Not_Found [sage] 2018/02/17(土) 21:34:02.04ID:??? 自作の関数作ればもっと短くなるよね はいlodash敗北 : Name_Not_Found [sage] 2018/02/17(土) 21:39:19.11ID:??? ほんとlodashの名前が出るだけで 必死になるなw : Name_Not_Found [sage] 2018/02/17(土) 22:26:40.80ID:??? for( var key of test )とかfor( var key in test )じゃダメなん? : Name_Not_Found [sage] 2018/02/17(土) 22:58:02.30ID:??? ここに違いが ttps://lodash.com/docs/4.17.4#forIn ttps://lodash.com/docs/4.17.4#forOwn : Name_Not_Found [sage] 2018/02/17(土) 23:23:30.35ID:??? 前者はそもそもエラーなので論外 後者は普通にあり entriesやvaluesは使えない環境も多いしね 個人的にはObject.keysを使うことが多いかな よっぽど大量にループさせるんならfor..in使うけど : Name_Not_Found [sage] 2018/02/17(土) 23:59:58.10ID:??? 使えない環境はあるがけして多くはない そんなことを言ったら何もできない いつまでレガシーブラウザを延命させる気なんだ : Name_Not_Found [sage] 2018/02/18(日) 05:22:16.55ID:??? for..inで十分にできて、key / valuesが key / test[key] になる程度の違い 構造は明示されてて 構造が未知だったり完全に信頼できなかったりしない javascriptはゴルフ絶対主義なんか : Name_Not_Found [sage] 2018/02/18(日) 06:20:37.10ID:??? for-inのデメリットは.hasOwnProperties()のチェックを入れるかどうかの問題が発生するから もちろんオブジェクトにそのチェックが不要だという保証があるなら.hasOwnProperties()で調べる必要はない : Name_Not_Found [sage] 2018/02/18(日) 06:23:06.86ID:??? を見れば一目瞭然だな : Name_Not_Found [sage] 2018/02/18(日) 06:44:57.56ID:??? hasOwnPropertiesやっててよかったとか 今までに一度もないなw : Name_Not_Found [sage] 2018/02/18(日) 08:22:54.79ID:??? for..inは式ではなく文なのがちと煩わしい とはいえ素のJavaScriptで Object.values(test).filter(x => x % 2 === 0).map(x => x * 2) みたく書くと無駄に何度も配列作っちゃうから、そういう意味ではlodashが羨ましい : Name_Not_Found [sage] 2018/02/18(日) 09:25:19.82ID:??? プロゴルファー? : Name_Not_Found [sage] 2018/02/18(日) 11:31:30.39ID:??? 何度も配列作らなくてもforEach内の処理で十分な場合が多い filterとかしなくてもif returnで良いんだし : Name_Not_Found [sage] 2018/02/18(日) 12:02:31.01ID:??? はいはい、俺様専用 : Name_Not_Found [sage] 2018/02/18(日) 13:05:05.05ID:??? 処理分離したいし破壊的代入はなるべく避けたいじゃん? : Name_Not_Found [sage] 2018/02/18(日) 14:10:15.91ID:??? 破壊的代入したって頑張ればできるだろ ほんの少しづつ頑張ればいいだけだよ 小さいものを積み重ねても大きくはならない : Name_Not_Found [sage] 2018/02/18(日) 14:12:21.99ID:??? 今回がそもそもfor-inとの対比の話だからな 値を列挙して利用したいというだけだから 配列をどう処理していきたいかみたいな一般論とは話が違う つまりfor-ループの{}内の置き換えだから、それは素直に考えるとforEachでいいじゃないかと 列挙したい物を連続してフィルタリングしたりする書き方したいか?ということ : Name_Not_Found [sage] 2018/02/18(日) 14:23:07.60ID:??? そもそも、すべての属性を取得するような、 メタプログラミングみたいな設計自体がおかしい もし、テストツール以外で、こういう設計をしていたら、おかしいと思え! : Name_Not_Found [sage] 2018/02/18(日) 14:45:12.60ID:??? いやです : Name_Not_Found [] 2018/02/20(火) 16:33:41.72:rZ442w9v childNodes[n] や item(n) では最後の要素は -1 では取得できないってことでいいですよね? n の変更でアクセスする方法ってないんでしょうか? lastChildとかつうと位置が変わった時に書き換えるのが面倒なんですけど。 : Name_Not_Found [sage] 2018/02/20(火) 18:00:12.11ID:??? length-1 : Name_Not_Found [] 2018/02/20(火) 18:35:21.09:rZ442w9v ありがとうございます。 別の質問なんですけど table の tbody に入っているデータを localStorageに保存したあとで ページを開き直した後に localStorageから呼び出して 同じ形式で再表示したいんですけどどうすれば良いんでしょう? storage.data = document.getElementByID("toboyのID") で保存して appendChild(storage.data) とかやってもうまく行かないんですけど forループかなんかつかって1つづつ要素を createChild とかして appendChild() するしかないんですか? : Name_Not_Found [] 2018/02/20(火) 18:39:48.19:rZ442w9v 訂正 storage.data = document.getElementByID("toboyのID") ↓ storage.data = document.getElementById("tbodyのID") : Name_Not_Found [sage] 2018/02/20(火) 18:45:12.12ID:??? 文字列値以外も保存できたんか? : Name_Not_Found [sage] 2018/02/20(火) 19:45:12.02ID:??? 文字列もそうだけどそもそもlocal Storageの使い方大丈夫か? =使ってるようだが… ttps://developer.mozilla.org/ja/docs/Web/API/Window/localStorage : Name_Not_Found [sage] 2018/02/20(火) 20:25:36.91ID:??? = でいい ttps://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API : Name_Not_Found [] 2018/02/20(火) 20:31:51.05:rZ442w9v プロパティ構文、ブラケット構文、メソッド構文とあるようなので問題ないようです。 あぁ、それ本に書いてたなぁと思って調べたら オブジェクトはJSON.stingiy/parseつかえってかいてたので試したけど 駄目っぽいですね。 一つ一つデータをオブジェクトかなにかで保存して それを取り出して一つ一つcreateElement/appendChildしていくしか無いっぽいですかね。 だれか妙案あれば引き続きよろしくお願いします。 : Name_Not_Found [sage] 2018/02/20(火) 21:14:37.44ID:??? 知らんかった!恥ずかしい こんなかんじでどうじゃろ var storage = localStorage; //保存 storage.data = document.getElementById("tbodyのID").innerHTML; //復元 document.getElementById("tbodyのID").innerHTML = storage.data; : Name_Not_Found [] 2018/02/20(火) 21:20:22.46:rZ442w9v あぁ、それ良いかもですね! あとで試してみます。 : Name_Not_Found [sage] 2018/02/21(水) 07:32:20.17ID:??? LocalStorage って、HTML を保存するものじゃないだろ どちらも文字列の、key : value 型だろ : Name_Not_Found [sage] 2018/02/21(水) 08:10:00.57ID:??? ふーん、じゃがダメならオブジェクトをJSON.stringifyして保存するのも禁止な。 : Name_Not_Found [sage] 2018/02/21(水) 09:33:02.16ID:??? イベントリスナ無視していいなら innerHTMLを出し入れしてもただの文字列でしょ、問題はないんじゃね なんか問題あるっけ : Name_Not_Found [sage] 2018/02/21(水) 11:24:19.58ID:??? ない。がinnerHTMLの戻り値が文字列だと理解してないだけ。だからバカにされている。 : 783 [sage] 2018/02/22(木) 21:10:28.01ID:??? 普通、HTML タグなど、保存しないだろ。 なんで、そんな表示情報を保存するねんw 保存するのは、アプリに必要なデータだろ key : value アプリに必要な、データの項目と値 : Name_Not_Found [sage] 2018/02/23(金) 00:15:24.12ID:??? 今回はtableの保存だからな HTMLのままが駄目と言っちゃ 縦横長+配列に分割することになるんだろうけど そうなったらJSON化もあんまりスマートでないのでIDB使おうかとかも言えるしな まあ、大きなアプリで沢山入出力するなら そこ抽象化して丁寧にやるのもいいけど 簡素なものには適当な対応でHTML突っ込んで戻すくらいで良いんじゃないかと思うよ : Name_Not_Found [sage] 2018/02/23(金) 02:35:44.73ID:??? で?復元時にはバラバラにしたデータからまた元のhtmlの文字列組み直すのか?それとも一つずつcreateElement繰り返して挿入か?w どっちにしろバカなんじゃねーのオメー えんぴつを使わないアメリカかよwww : Name_Not_Found [sage] 2018/02/23(金) 03:19:50.24ID:??? でも君プログラムのアーキテクチャについて無知じゃん : Name_Not_Found [sage] 2018/02/23(金) 03:21:44.81ID:??? っていうか、たったそれだけのことで悩んでどうするんだって気がするけどねw 値からテーブルを作るコードはデータの部分を除いてたったの6行でできる。 (アロー関数を使えばもっと減らせる) ttps://jsfiddle.net/1uopxycn/ var data = [ [{text: 1, colspan:2},{text: 3}], [{text: 1},{text: 2},{text: 3}], [{text: 1},{text: 2},{text: 3, style: 'color:red'}], ]; var rows = data.map(function(row) { return $('<tr/>').append(row.map(function(attrs) { return $('<td/>', attrs); })); }); $('#table').append(rows); : Name_Not_Found [sage] 2018/02/23(金) 04:55:47.88ID:??? スマートかどうか、仕様的に許されたことかどうか、この2つは別問題 1行で終わる話 : Name_Not_Found [sage] 2018/02/23(金) 09:06:27.41ID:??? テーブルの部分をコンポーネントにしてそっちに配列読み込みの機能を持たせるべきだと思う : Name_Not_Found [sage] 2018/02/23(金) 09:14:57.35ID:??? ネズミ倒すのに戦車が必要とか組織再編が必要とか言い出す兵隊、降格です。 : Name_Not_Found [sage] 2018/02/23(金) 09:17:30.10ID:??? javascriptを使ってネズミを駆除 : Name_Not_Found [sage] 2018/02/23(金) 09:22:25.98ID:??? $('#table').append(data.map(function(row) { return $('<tr/>').append(row.map(function(attrs) { return $('<td/>', attrs); })); })); : Name_Not_Found [sage] 2018/02/23(金) 09:42:12.16ID:??? つーかHTMLをそのままデータにすると柔軟性がなくなるよ。 後からHTMLをかえたくなったときとかね テンプレートにデータを流し込んでビューを作るってことを やっている人なら理解できると思う そもそもデータとして参照する時HTMLを解析しなければいけなくなる 仕様的に許されているからOKと考えるんじゃなくて 後々のメンテナンス性なんかも考えらるようでなければダメ : Name_Not_Found [sage] 2018/02/23(金) 09:44:05.49ID:??? ちなみにjQueryの例を出したけどデータが多くなるとさすがに重くて lodashとかにあるテンプレートエンジンの機能を使って 文字列として処理したほうが速い attrsの部分がちょっと大変だけどね : Name_Not_Found [] 2018/02/23(金) 11:56:08.52:zjNZIwXS innerHTMLつかった書き換えはセキュリティ上よくないからあんま使うなってよんだけど : Name_Not_Found [sage] 2018/02/23(金) 12:17:35.43ID:??? そりゃどういう時どうして危険か理解できないなら使って問題ないか問題か自分で判定できないだろうから一律使用しないという方針にするしかないな。哀れw : Name_Not_Found [sage] 2018/02/23(金) 12:42:38.11ID:??? javascriptはセキュリティ上よくないから使っちゃいけないな ある意味、真理ではあるが : Name_Not_Found [sage] 2018/02/23(金) 13:09:29.48ID:??? tableじゃ無くてflexboxにすると多少抽象度と、コードのシンプルさと、パフォーマンスが担保できると思う : Name_Not_Found [sage] 2018/02/23(金) 13:49:22.23ID:??? アクセシビリティを担保できなくなる : Name_Not_Found [sage] 2018/02/23(金) 13:58:04.89ID:??? もうtext/plainでいいよ : Name_Not_Found [sage] 2018/02/23(金) 14:41:00.06ID:??? それが一番簡単でアクセシビリティも高い : Name_Not_Found [sage] 2018/02/23(金) 15:40:23.48ID:??? テーブルセルの幅の取り方の挙動をflexで再現できたらいいのになっておもうことがある 区切り線付きの横並びの要素とかで : Name_Not_Found [sage] 2018/02/23(金) 16:15:33.24ID:??? gridで無理なんか?知らんけど。 : Name_Not_Found [sage] 2018/02/23(金) 18:08:07.84ID:??? 基本的にアプリは、MVC で作る Model(データ)と、View は分離させる。 View は、しょっちゅう変わるから、Modelは、View に依存させない 異なるドメインから読み込んだものや、素性の知れない者が作ったものを、 innerHTML で読み込んで実行すると、何されるか分からないので、危険 自分自身で作ったものだけで、ハッキングされていないなら、まあ大丈夫かな : Name_Not_Found [sage] 2018/02/23(金) 18:11:48.00ID:??? Houdini Layout API : Name_Not_Found [] 2018/02/24(土) 16:35:23.24:ZwKHpr8s javascriptの知識一通り合ったらjQueryってすぐおぼえられるもんなん? 20時間くらいでいける? : Name_Not_Found [sage] 2018/02/24(土) 16:39:50.42ID:??? ただのライブラリだからすぐに覚えられる20時間もいらん。 本気で1時間やればもうDOM APIは使いたくなくなる。 : Name_Not_Found [sage] 2018/02/24(土) 16:46:08.13ID:??? DOM APIつかってループで繰り返し要素を作ったり変更したり したことがあるならjQueryの簡単さに感動するだろうな : Name_Not_Found [sage] 2018/02/24(土) 16:59:21.24ID:??? 正規表現リテラルって 別に普通にシングルクォートで囲ってパターン文字列として書いてもいいんですよね : Name_Not_Found [sage] 2018/02/24(土) 17:04:45.85ID:??? だめ : Name_Not_Found [] 2018/02/24(土) 19:00:58.00:ZwKHpr8s jQueryってDOM操作特化なの? : Name_Not_Found [sage] 2018/02/24(土) 19:16:49.06ID:??? そうだよ。ライブラリってのは普通何か目的があって その目的をうまくやるために作られる。 なんにでも使えるライブラリとかそいういうのゴミだから : Name_Not_Found [] 2018/02/25(日) 11:42:32.95:+FLdsO/Y できました。 ありがとうございます。 とりあえずはコレでいきたいと思いますが、 他の方の指摘にありますし データ処理には興味あるので勉強としてデータを構造的に保存する方法も模索していこうと思います。 データは2次元配列に格納していけばよいこいうことでしょうか コンポーネントというのはどういうことなんでしょう? flexboxにするいうのは <p>かなんかに各データポイントをいれて display: flex; flex: columnにして それを行方向に積み重ねていくって感じでしょうか? JavaScriptデザインパターン ttps://www.amazon.co.jp/dp/toc/487311618X/ この本に書いてそうなので読んでみます。 ヒントありがとうございます! : Name_Not_Found [sage] 2018/02/25(日) 12:33:31.82ID:??? 画像を真ん中に配置したいのですが真ん中に配置されずに困っています var imgTag = document.createElement('img'); imgTag.setAttribute('src', fugafuga); imgTag.setAttribute('title', hogehoge); setAttributeを使用し画像を真ん中に設置する方法はありません出ようか? : Name_Not_Found [sage] 2018/02/25(日) 13:09:17.86ID:??? setAttributeなら style属性に "margin-right:auto; margin-left:auto" でいいんじゃない? 外部スタイルシートなら cssに .someName { whatever: anything } JSで imgTag.className ='someName' : 818 [sage] 2018/02/25(日) 14:14:52.80ID:??? 多分ID変わってます ありがとうございます 頑張ってみます! : Name_Not_Found [sage] 2018/02/25(日) 14:29:05.50ID:??? 書名紛らわしいが、一般に「JavaScriptパターン」のほうが良書と評価されてるよ。ご参考まで。 : Name_Not_Found [] 2018/02/25(日) 21:12:43.79:tH4r9gsg macOS High Sierra 10.13.2 safari 11.0.2です。 実現したい機能:Youtubeの自動再生ボタン(動画を再生した後に次の動画に自動遷移する機能)をUserScriptで自動クリックしてオフにする。 Youtubeの自動再生機能はデフォルトではオンで、オフにする事もできるのですが、その設定はCookieで保存されるようです。 しかし私は普段、プライベートモードでブラウジングをします。 そこで上記の機能をTampermonkeyのUserScriptで実現しようとしました。 私はjavascriptに関しては完全な初心者なので、ググって出てきたソースを改変しましたが、機能しませんでした。 おそらく、的外れなことをしているんだと思います。 以下のソースについてアドバイス、ここがおかしい等のツッコミをいただけたら幸いです。 // ==UserScript== // @name Youtube自動再生ブロック2 // @namespace ttp://tampermonkey.net/ // @version 0.2 // @description try to take over the world! // @author You // @match ttps://www.youtube.com/* // @grant none // ==/UserScript== (function() { 'use strict'; setInterval(function() { var button = document.querySelector("style-scope ytd-compact-autoplay-renderer"); if (!button || button.style.display == "none") return; var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); button.dispatchEvent(evt); }, 1000); })(); : Name_Not_Found [sage] 2018/02/25(日) 21:50:46.55ID:??? >自動再生ボタンをUserScriptで自動クリックしてオフに 意図がわからん ボタンを自動クリックしたら再生が始まってしまうではないか? 最近のブラウザは勝手に自動再生しないように環境設定できるのがあるぞ : Name_Not_Found [sage] 2018/02/25(日) 22:46:33.87ID:??? ツベのプレイヤーって特殊だよね javascriptで操作できんのか : Name_Not_Found [] 2018/02/25(日) 23:39:34.21:tH4r9gsg 822です。レスありがとうございます。 私の意図している”自動再生”は、ページを開いた時に再生ボタンをクリックをしなくても動画が再生される機能のことではなく、 動画を再生し終えた後に10秒ほどのカウントダウンがあり、さらにその後別の動画に自動リダイレクトされる機能の事です。 質問文がわかりにくかったようで、申し訳ないです。 スクショを用意しました。 ttps://imgur.com/a/UDsCL : Name_Not_Found [sage] 2018/02/26(月) 00:20:30.30ID:??? ほらよ。直してやったで // ==UserScript== // @name Youtube自動再生ブロック2 // @namespace ttp://tampermonkey.net/ // @version 0.2 // @description try to take over the world! // @author You // @match ttps://www.youtube.com/* // @grant none // ==/UserScript== (function() { 'use strict'; setInterval(function() { var button = document.querySelector("paper-toggle-button[checked]"); if (!button || button.style.display == "none") return; var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); button.dispatchEvent(evt); }, 1000); })(); : Name_Not_Found [sage] 2018/02/26(月) 00:20:55.28ID:??? ついでにjQueryを使ったバージョンな。 覚えるとサクッとできるぞ。 // ==UserScript== // @name Youtube自動再生ブロック2 // @namespace ttp://tampermonkey.net/ // @version 0.2 // @description try to take over the world! // @author You // @match ttps://www.youtube.com/* // @grant none // @require ttps://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js // ==/UserScript== (function() { 'use strict'; setInterval(function() { $("paper-toggle-button[checked]").click(); }, 1000); })(); : Name_Not_Found [sage] 2018/02/26(月) 00:23:17.60ID:??? 補足しておくと最初のやつはセレクタがよく分からんやつだった。 適切と思われるものに直した後、checkedがついているときだけoffにするようにした またjQueryバージョンは、buttonの存在チェックをしていないが、 jQueryっていうのは、セレクタで見つかった要素全てにメソッドを実行する(この場合はclick) というものだから、要素が見つからなければ何もしないので存在チェックが不要になる : Name_Not_Found [sage] 2018/02/26(月) 00:30:44.50ID:??? なお、一行でも書ける setInterval(() => $("paper-toggle-button[checked]").click(), 1000); : Name_Not_Found [] 2018/02/26(月) 01:05:40.91:anD7k8Wx 822です。 ,,, 動作を確認できました。助かりました。 欲しい機能をさらって実現出来たら最高ですよね! 本当にありがとうございました。 Javascript勉強します。 : Name_Not_Found [sage] 2018/02/26(月) 01:28:47.36ID:??? document.querySelector("paper-toggle-button").checked = false これでもいける? createEvent("MouseEvents"); evt.initMouseEvent(); button.dispatchEvent(evt); このあたり何やってるんだろう 質問者じゃないけど詳しい人教えて : Name_Not_Found [sage] 2018/02/26(月) 01:39:57.14ID:??? 行けるかもしれないけど実装次第だろうね まずpaper-toggle-buttonというタグ(カスタムタグ?)は 動き見てると非同期で表示されてる感じがする。 なので、ページ読み込んだすぐには存在しておらずsetIntervalで 1秒おきにチェックしてるおり、paper-toggle-buttonが nullの場合になにもしないようになってる。 こういう所、jQueryは存在しなくてもエラーにならない設計なので便利 クリックは実際のマウスクリックをエミュレートしており、 実際にマウスでクリックしたのと同じ動きをする。 YouTube側の実装がcheckedだけを見てるなら、それで動くかもしれないけど 他にクリックされた時に何かしている可能性があるからクリックを エミュレートするほうが確実 本気で解析すればわかると思うけど、こういうハックでそんな面倒なことしたくない ささっと解決したいね。 : Name_Not_Found [sage] 2018/02/26(月) 04:45:38.01ID:??? やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞 ttp://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです 掻い摘んで説明すると ・創価学会は、町内会や老人会、PTA、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を 90年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた ・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為 防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった ・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが 創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ 防パトに尾行や監視、付き纏いをさせるようになった ・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい 不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった ・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず 私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り 防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた(防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官) ※これに加えて防犯要員が同様のお願いをして回る ・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕 詳細は下記スレをご覧下さい(現在スレが荒されてますので、テンプレと87の連絡先さえ確認して頂ければokです) やりすぎ防犯パトロールは創価学会と警察署の仕業だった ttps://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/1-87 : Name_Not_Found [sage] 2018/02/26(月) 04:46:12.86ID:??? おいおい、、、、頼むからもうcreateEvent系は使うな コンストラクタでスマートに作れるだろ : Name_Not_Found [sage] 2018/02/26(月) 05:36:10.88ID:??? じゃあ作ってくれよ : Name_Not_Found [sage] 2018/02/26(月) 06:28:00.10ID:??? clickイベントを発行するだけなら. document.querySelector("paper-toggle-button").click() でいける jQueryではなく標準JavaScriptでサポートしてる ただし<input type="image">の_xや_yを指定したいとかなら、 createEvent()で細かく指定する必要がある : Name_Not_Found [sage] 2018/02/26(月) 08:39:38.20ID:??? jquwryは他所でやれ : Name_Not_Found [sage] 2018/02/26(月) 09:31:38.10ID:??? jq広めてどんな得があるというのか 本が売れるとか?アフィが捗るとか? : Name_Not_Found [sage] 2018/02/26(月) 11:31:45.54ID:??? 変に謎関数を自作されるより既存のちゃんとしたライブラリ使ってくれる方が後の人が助かる : Name_Not_Found [sage] 2018/02/26(月) 11:37:17.85ID:??? とりあえずjqueryは他いけな : Name_Not_Found [sage] 2018/02/26(月) 12:02:37.73ID:??? イベントは new Event(nameString,optionObject) の形で作れ createは非推奨 : Name_Not_Found [sage] 2018/02/26(月) 16:24:03.79ID:??? Stoyan Stefanov 著 JavaScriptパターン ―優れたアプリケーションのための作法、2011 オブジェクト指向JavaScript、2012 JavaScriptデザインパターン、Addy Osmani, 2013 : Name_Not_Found [sage] 2018/02/26(月) 17:35:05.56ID:??? JavaScriptパターン > JavaScriptデザインパターン >>>>> オブジェクト指向JavaScript : Name_Not_Found [sage] 2018/02/27(火) 00:25:56.22ID:??? jQueryはすでに広まってるよ どんな特があるかは、広めて特があるんじゃなくて使うと特がある。 今回みたいなのはささっと実装できるという得がね 俺の得じゃなくて、使うみんなが得をする : Name_Not_Found [sage] 2018/02/27(火) 00:30:54.05ID:??? > var imgTag = document.createElement('img'); > imgTag.setAttribute('src', fugafuga); > imgTag.setAttribute('title', hogehoge); だと $('<img>', {src: fugafuga, title: hogehoge}); ね? : Name_Not_Found [] 2018/02/27(火) 03:07:57.09:yvlj/jpz JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法 これは? : Name_Not_Found [sage] 2018/02/27(火) 03:37:44.33ID:??? グッドパーツは世界的に超有名な本だけどさすがに古いから読む場合は現在どうなってるか気を付けながら読んで : Name_Not_Found [sage] 2018/02/27(火) 04:52:43.68ID:??? The Good Partsなんて出たときから歴史を振り返る見て楽しむ本であって それで勉強するような本ではない : Name_Not_Found [] 2018/02/27(火) 12:57:13.86:snOiXd7a 配列に関しての質問いいでしょうか? hoge[10].parentNode.insertBefore(elmDiv, hoge[10].nextSibling) 上記のような配列を指定して要素を追加する記述において、hoge[10]の部分を”一番最後の配列”に指定するメソッドは存在するんですかね? 配列の値が毎度変動するため、(1〜10の時もあれば、1〜30の時もある) それができるとものすごく楽なのですが・・・調べてみてもあらかじめ配列の数が決まっている場合に最後の値を取得するメソッドしか出てこないんですよね。。 : Name_Not_Found [sage] 2018/02/27(火) 13:01:21.36ID:??? hoge.length - 1で何かまずいのか? : Name_Not_Found [sage] 2018/02/27(火) 14:31:14.67ID:??? JSではlengthゲッタに副作用を持たせる事ができるし ロジック的にhogeが正当な混じりけのないNodeListだと確認もする 保証された方法がないのでセキュアでない : Name_Not_Found [sage] 2018/02/27(火) 15:14:56.35ID:??? ゲッタ・・・ : Name_Not_Found [] 2018/02/27(火) 15:16:07.33:yvlj/jpz 本読んで勉強してたらXMLHttpRequestの項目が合って コードをうって試して見るんだけど Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. というエラーが出てうまく生きません。 サーバーの概念とか全くよく分かってないのですが コレは自分が今使ってるPCをサーバーとみなして処理とかできないってことなんでしょうか? いまいちよくわかりません。 現在は自分のPCのあるフォルダにJSとHTMLを置いて HTMLを同じ自分のPC上でクロムで開いています。 : Name_Not_Found [sage] 2018/02/27(火) 15:26:14.60ID:??? ローカル環境では自由にXHRはできない、特にChromeはその制約がややきつい なぜなら、readme.htmlとか開いただけでPCの全データを外部に送信されたりしたら困るだろう? セキュリティを無効にする方法もあるが、 基本的には「live-server」などの簡易ローカルサーバを立てることが推奨 ちなみに今ではXHRはもう使われない Fetch APIを使う : Name_Not_Found [sage] 2018/02/27(火) 15:41:08.05ID:??? 単純にhtmlを ttp://localhost/some_file.html じゃなくて file:///C:/WEBFOLDER/some_file.html とかで開いてしまってて、 他方htmlの中では ttp://localhost/some_data.json にXHRしてる、・・・とかじゃねーの 当然だがしっかりCORSに引っかかる まあ本読んで勉強してますなんかおかしいです、っつーなら 本出したとこに電話して聞けよとか : Name_Not_Found [] 2018/02/27(火) 16:27:33.21:yvlj/jpz なんとなく構造がわかりました。 live-serverで検索してみたけど難しそうなので今回は諦めます。 有益な情報有り難うございました。 : Name_Not_Found [sage] 2018/02/27(火) 18:02:52.83ID:??? いくらJSとはいえlengthが配列の長さじゃないかもしれないと疑いだしたらキリがなくない? : Name_Not_Found [sage] 2018/02/27(火) 20:37:30.61ID:??? live-serverなんて何も考えなくても1分あれば準備できる最もお手軽なサーバーだぞ : Name_Not_Found [sage] 2018/02/27(火) 20:43:48.29ID:??? npm i serve -g でインストール以降、 serve . これだけ。 : Name_Not_Found [sage] 2018/02/27(火) 21:43:46.27ID:??? CORS だろ。 サーバーを立てていないと、異なるドメインにアクセスできない Python, Ruby など、何かの言語に、最初から入っている、 サーバーを起動させて開発をやれば? : Name_Not_Found [sage] 2018/02/27(火) 21:51:16.55ID:??? htmlとjsだけなんだから Windows環境でも使えて日本語環境もばっちりの apache httpdでいいじゃん・・・ : Name_Not_Found [sage] 2018/02/27(火) 21:53:05.05ID:??? > ちなみに今ではXHRはもう使われない > Fetch APIを使う これはウソ。前提としてXHRを使えば以下の問題は全て解決している まずFetch APIにはIE11が対応してない。 Fetch APIに対応していたとしてもStreams APIに対応していなければ プログレスの取得やキャンセルが実装できない。 ttps://developer.mozilla.org/en-US/docs/Web/API/Streams_API Firefox、IE、が対応していない。Safariは不明 Chromeも59からなので少し前の機種は使えないかもしれない また仕様上アップロードのProgressは取ることはできない 以上のような制限があるので、苦行の道を進みたい人ぐらいしかFetch APIを使ってない。 嘘だと思うのなら勉強サイト以外でFetch APIを使ってるサイトを探してみると良い まず見つからない : Name_Not_Found [sage] 2018/02/27(火) 22:03:42.47ID:??? ブラウザ互換性は重要だが正直言えばそろそろIEは切り捨てても赦して欲しい 仕事ではそうもいかんけど : Name_Not_Found [sage] 2018/02/27(火) 22:05:13.09ID:??? 仕事でそうはいかないのをわかってるなら どの辺で切り捨てようというのだ 趣味サイトならいくらでもお好きにどうぞじゃん : Name_Not_Found [] 2018/02/27(火) 22:13:06.82:wA1MMf5K 最初から読み込んでいるJavascriptで制御している開閉ボタンつきサブメニュー部分を ここだけajaxで更新した時、その開閉ボタンが開閉しなくなるので なんとかしたいんですが、何かいい方法ないでしょうか? うまく何がしたいか言葉に表せないのですが、以下の記事とだいたい同じことがしたいです。 ttp://petitviolet.hatenablog.com/entry/20130418/1366288852 : Name_Not_Found [sage] 2018/02/27(火) 22:18:13.74ID:??? どうせ簡単な話だろうが、めんどくさい サンプルコードかけ : 865 [sage] 2018/02/27(火) 22:32:13.89ID:??? わかりやすい説明じゃなくてすいません $(function(){ $("#menu") .empty() .load("./menu_output.php"); }); ↑こんな感じで#menuだけ更新、 menu_output.php の中に最初から読み込んでいる $("button").click(function () { $("p").slideToggle(); }); で動かしてる部分があり、更新し直す前はトグルできるが 更新した後はトグルができない、更新後もトグルできるようにしたいということです : Name_Not_Found [sage] 2018/02/27(火) 22:55:04.12ID:??? $(document).on("click", "button", function () { $("p").slideToggle(); }); って書き直せば動く。documentの部分は たぶん"#menu"でもいい : Name_Not_Found [sage] 2018/02/28(水) 00:27:19.48ID:??? うまくできました! ありがとうございます。 : Name_Not_Found [sage] 2018/02/28(水) 01:35:15.70ID:??? スレ違い質問 ttp://mevius.5ch.net/test/read.cgi/hp/1517028608/769 に対する回答こちらに書かせてもらいます。 1秒(1000ミリ秒)後別タブでやほおを開き10秒後(10000ミリ秒)後もとのタブをアマゾンに遷移 <a href="javascript:setTimeout((function(){window.open(' ttps://www.amazon.co.jp', '_self')}), 10000)" onclick="setTimeout((function(){window.open(' ttps://www.yahoo.co.jp') }), 1000)">[テキスト]</a> 注意) ・onclickのタイムアウトの値1秒(1000ミリ秒)超える値設定するとChromeではブラウザにブロックされた。迷惑広告対策か。 ・当然だけどhrefのタイムアウトの値がonclickのタイムアウトの値を下回ってると元のページが先に遷移しちゃうからyahoo開く処理は破棄される : Name_Not_Found [sage] 2018/02/28(水) 03:14:34.55ID:??? ここはお仕事相談所ではなくて 純粋にJSを勉強しようと思う人のための質問スレだからね : Name_Not_Found [sage] 2018/02/28(水) 09:06:05.99ID:??? jsじゃないから他所いけ : Name_Not_Found [sage] 2018/02/28(水) 09:48:06.70ID:??? jQueryというライブラリを使ってるだけでJavaScriptだよ : Name_Not_Found [sage] 2018/02/28(水) 14:54:28.28ID:??? 料理の為の質問スレと言っても 料理技術を磨きたいっていうのと、とりあえず今日食うものをどうにかしたいっていうのは違う ここはどちらかと言うと前者で、中食買ってきてレンジでチンみたいなのはお断り : Name_Not_Found [sage] 2018/02/28(水) 17:55:22.17ID:??? nativeのjsスレですよー : Name_Not_Found [sage] 2018/02/28(水) 18:05:34.10ID:??? nativeオンリーならDOM関連の質問は全部jQueryスレに行ってほしい jQueryならサラッと書ける回答を素のJSで書くのダルい もちろん、質問者自身が素のJSで書くことを望んでるなら別にいいんだけどさ : Name_Not_Found [sage] 2018/02/28(水) 18:41:59.13ID:??? だるいなら回答やめればいいんじゃね : Name_Not_Found [sage] 2018/02/28(水) 20:19:31.72ID:??? だるいって言うのはまあ良いんじゃない でもできないって言うのはやっぱり良くないと思うから 初心者には素のJSで教えるべきだよ 基本的にライブラリは背景を理解しとかないとね これは電子レンジでチンすればできるものということしか知らないのと 暖める必要があるから電子レンジを使うということを知っているのと 電子レンジの温める仕組みと性質を理解してるのではやはり状況対応度が違う : Name_Not_Found [sage] 2018/02/28(水) 20:36:18.20ID:??? jquery宣伝してるやつは書いたやつだろ jqueryならこう書けると称して jquery関係なく処理変更で行数減らしたやつ : Name_Not_Found [sage] 2018/02/28(水) 21:02:42.15ID:??? ブラウザ固有のDOM APIなどはnativeのJavaScriptではないので その理屈はとおらない : Name_Not_Found [sage] 2018/02/28(水) 21:05:54.42ID:??? 質問に回答する人 >>>>>>> 何も書かないで文句だけ言う人 これだけは理解しような。 書けばいいんやで、誰よりも早く : Name_Not_Found [sage] 2018/02/28(水) 21:24:00.39ID:??? 回答だけが欲しいなら専門サイトでやれ ここは5chだぞ 発言に優劣は無いし急かされる理由もない : Name_Not_Found [sage] 2018/02/28(水) 21:27:16.25ID:??? 俺は回答がしたいだけやで?w : Name_Not_Found [sage] 2018/02/28(水) 23:08:12.41ID:??? ライブラリ禁止なんてどこに書かれてんの? : Name_Not_Found [sage] 2018/02/28(水) 23:26:20.17ID:??? javascript自体勉強したいんだけどコード書くような本は全部jqueryなんだよなぁ : Name_Not_Found [sage] 2018/02/28(水) 23:30:02.91ID:??? nodejsとかブラウザを使わないような本なら jQueryは出てこないと思うよ : Name_Not_Found [] 2018/02/28(水) 23:58:02.30:S6UN6FH7 なんか変な争い始まってんなwwww 個人的にはどっちでもいいが 求められてないのにちなみにjQueryでは。。。とかあえて別にかくコメもうざかったりするが。 : Name_Not_Found [sage] 2018/03/01(木) 00:12:45.81ID:??? + JavaScript & jQuery 質問用スレッド vol.8 + ttp://mevius.5ch.net/test/read.cgi/hp/1510321470/ ありますやん : Name_Not_Found [sage] 2018/03/01(木) 05:48:18.21ID:??? それは当たり前のように横暴に書かないということで 一応色んな人に配慮してる書き方のつもりなのでは? : Name_Not_Found [sage] 2018/03/01(木) 09:14:37.23ID:??? エラーが出てないのにe.preventDefaultが機能しない のって経験上何か思い当たる? : Name_Not_Found [sage] 2018/03/01(木) 10:01:16.14ID:??? stopPropagation()と勘違いしてる : Name_Not_Found [sage] 2018/03/01(木) 12:18:04.61ID:??? アロー関数式とfunction式って挙動に何か違いあるの? : Name_Not_Found [sage] 2018/03/01(木) 12:26:33.76ID:??? thisの扱いが違う : Name_Not_Found [sage] 2018/03/01(木) 12:35:10.71ID:??? 分かった、じゃあ(function(){〜}).bind(this)と()=>{〜}の違いは? : Name_Not_Found [sage] 2018/03/01(木) 13:11:25.38ID:??? クロージャーを作るかどうか : Name_Not_Found [sage] 2018/03/01(木) 13:14:34.52ID:??? 嘘乙。 : Name_Not_Found [sage] 2018/03/01(木) 19:50:57.79ID:??? アロー関数ってリテラルやろ? だったらfunnction命令と違ってかならず 呼び出す前に定義をかかないといけない。 と適当に書いて見る。 適当に突っ込んどいてくれ。 : Name_Not_Found [sage] 2018/03/01(木) 20:09:16.53ID:??? はfunction式って言ってるんだから巻き上げが起こらないのはどっちも同じだよ 基本的にfunction式にthisをbindしたものと同じと考えて相違ないと思う : Name_Not_Found [sage] 2018/03/01(木) 20:54:20.28ID:??? 同じじゃないぞ var aaa; aaa = (function bbb(){}).bind(this); aaa.name; => "bbb" aaa = ()=>{}; aaa.name; => "aaa" chromeなに勝手に無名関数に名前付けてんだよ… : Name_Not_Found [sage] 2018/03/02(金) 01:20:32.20ID:??? >chromeなに勝手に無名関数に名前付けてんだよ… ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/name Inferred function names Variables and methods can infer the name of an anonymous function from its syntactic position (new in ECMAScript 2015). 狐とクロムだけが対応してる仕様てことじゃないの? : Name_Not_Found [sage] 2018/03/02(金) 04:22:09.61ID:??? aaa = (function bbb(){}).bind(this); aaa.name; => "bound bbb" ってなったが? : Name_Not_Found [sage] 2018/03/02(金) 04:23:26.12ID:??? aaa = function (){} aaa.name => "aaa" : Name_Not_Found [sage] 2018/03/02(金) 06:44:12.48ID:??? へぇ、ブラウザ何? : Name_Not_Found [sage] 2018/03/02(金) 06:48:59.74ID:??? く : Name_Not_Found [sage] 2018/03/02(金) 09:32:42.74ID:??? ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name Bound function names Function.bind() produces a function whose name is "bound " plus the function name. function foo() {}; foo.bind({}).name; // "bound foo" : Name_Not_Found [] 2018/03/02(金) 10:32:50.96:LbN5BTkq DHCってもともとは翻訳会社なんだぜ 知らんと思うが : Name_Not_Found [sage] 2018/03/02(金) 10:37:50.11ID:??? ドコサヘキサエン酸だっけ? : Name_Not_Found [sage] 2018/03/02(金) 10:41:55.31ID:??? これなんでこうなってんの? bind()が名前に影響及ぼさなきゃならんの? 適当にisBoundとかのプロパティ設定するんじゃだめなの? : Name_Not_Found [sage] 2018/03/02(金) 11:11:37.76ID:??? ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind bind() 関数は、新たな関数(束縛された関数 = a bound function; BFとも)を生成して返します。 BF は 特殊関数オブジェクト (exotic function object; ECMAScript 2015からの用語) であり、 元の関数オブジェクトをラップします。BF を呼び出すとラップされた関数が実行されます。 新しい別の関数を生成してるからオリジナルとは別の名前が付けられるってことじゃないの? : Name_Not_Found [sage] 2018/03/02(金) 11:41:17.42ID:??? ならnewは? : Name_Not_Found [sage] 2018/03/02(金) 11:45:47.54ID:??? newで返すのはオブジェクトであって関数じゃない : Name_Not_Found [sage] 2018/03/02(金) 11:47:20.00ID:??? f = (function bbb(){}).bind(this).bind(this).bind(this).bind(this).bind(this).bind(this); f.name => "bound bound bound bound bound bound bbb" : Name_Not_Found [sage] 2018/03/02(金) 11:49:46.76ID:??? 自分でbindメソッドを実装してみれば? 元と同じ名前ではダメな理由がわかるよ : Name_Not_Found [sage] 2018/03/02(金) 12:27:15.55ID:??? はchromeだけどなんでnameにbound足されてないの?google舐めてんの? : Name_Not_Found [sage] 2018/03/02(金) 12:30:11.12ID:??? お前のバージョンが古いんだろ : Name_Not_Found [sage] 2018/03/03(土) 00:58:06.31ID:??? google先生に喧嘩売ってるやついるよwwww ぎゃっはっはっは : Name_Not_Found [sage] 2018/03/03(土) 11:45:17.59ID:??? そうなのか。 good partsはちょっと古いけど、アマゾンレビューにも古いからどうとか書いてなくて(最近のレビューないけど) ページ数もそんななくて手頃だし評判もいいので次コレ読もうと思ってたんだけど。 どうするかなぁ : Name_Not_Found [sage] 2018/03/03(土) 18:56:11.20ID:??? jqueryでpreventDefaultする時も、falseを返す必要ありますか? : Name_Not_Found [] 2018/03/03(土) 20:28:51.66:eXUXKasV XMLHttpRequestって同期モードだとresponseTypeを変更できないみたいだけど、同期モードだとテキストしか受信できないってこと? 同期モードでバイナリを受信する方法はないの? : Name_Not_Found [sage] 2018/03/03(土) 21:39:40.98ID:??? 同期モードは使うな : Name_Not_Found [sage] 2018/03/03(土) 21:39:59.73ID:??? ない : Name_Not_Found [sage] 2018/03/03(土) 21:45:27.59ID:??? しなくていいんですね ありがとうございました : Name_Not_Found [sage] 2018/03/03(土) 23:26:58.99ID:??? Web APIの仕様書で URL:/xxx_get とあるものは、ブラウザのURLに/xxx_getをつければ値が返ってくるのですが、 URL:/xxx_set Request:cmd={xxx_no}&id={xxx_id} とあるものは、どうやってアクセスすればよいのでしょうか? ド素人の質問で恐縮ですが教えて下さい。 : Name_Not_Found [sage] 2018/03/03(土) 23:39:19.73ID:??? 自分の仕事は自分でなんとかしろや : Name_Not_Found [sage] 2018/03/04(日) 00:22:23.84ID:??? JavaScriptの質問ではないような気が : Name_Not_Found [sage] 2018/03/04(日) 00:48:05.25ID:??? scriptタグの中に何か指定するのかな、じゃあJavaScriptかなと思いました。 : Name_Not_Found [sage] 2018/03/04(日) 02:15:30.65ID:??? それサーバー側のプログラミングの問題じゃないの? サーバーのプログラミング組んだ人に聞かないと駄目なんじゃない? まぁ俺自信が完全な素人やから参考にしないで : Name_Not_Found [] 2018/03/04(日) 02:19:13.06:YlpsNuwL URLに ?cmd={xxx_no}&id={xxx_id} つければいいのじゃないのかな : Name_Not_Found [sage] 2018/03/04(日) 03:05:28.92ID:??? 説明不足ですみません、httpのPOSTです。xmlで返ってきます。 GETならば、URLに?cmd={xxx_no}&id={xxx_id}をつければよいみたいですが。 サンプルがありまして、jqueryを読み込んでいて、scriptタグの中に以下の記述があります。 function xxx_setup(id) { $.ajax({ type: "POST", url: "cgi/xxx", data:"cmd=1&id="+ id }); } 宛先であるURLにデータを送る方法、つまりPOST?の方法が分かりません。 : Name_Not_Found [sage] 2018/03/04(日) 03:29:40.00ID:??? なんでそんなdataなんだろうな。動くと言えば動くんだろうが ってかPOSTしてるじゃん その関数を実行すれば動くだろうさ : Name_Not_Found [sage] 2018/03/04(日) 03:36:50.56ID:??? なんでそんなdataなんだっていうのは、 data: {cmd: 1, id: 1} こっちの書き方で良くて、見やすく文字列加工がいらないから あとpostなら$.ajaxじゃなくて、$.post使えばいいのに なんでみんな長い$.ajaxを使うんだろうな? $.post("cgi/xxx", {cmd: 1, id: 1}); でいい。 んで、お前が分かってないのは、そんな所じゃなくて、 相手のサーバー(ホスト名)は何なんだってところだろ? そんなのドキュメントでも見ろとしか urlは見ての通りパスしか書いてないから、そのHTMLを追いてる サーバーのホスト名になる で、さらに次は、postしたあとの結果の受け取り方どうするのかわかってるのか? そこも分かってなさそうなんだが。 : Name_Not_Found [sage] 2018/03/04(日) 03:39:57.88ID:??? あとな、POSTならHTMLのformから送れる まあこんな感じだな <form action="cgi/xxx" method="post"> <input type="hidden" name="cmd" value="1"> <input type="hidden" name="id" value="1"> <input type="submit"> </form> まあ、答えたはしたがこのレベルじゃないな。 GETっていうのはサーバーからデータを受け取るもの POSTっていうのはサーバーにデータを送信することだよ お前に必要なのはこのレベルの説明だろ? : 923 [sage] 2018/03/04(日) 03:47:02.43ID:??? で書いたサンプルは一部でして、idには他で値を入れてます。 そのPOSTする方法が分からないのです。 ボタンとかを作ってクリックしてあげる必要があるのでしょうか。 以下のサイトを参照しています。 ttps://qiita.com/busyoumono99/items/9b5ffd35dd521bafce47 URLは、192.168.xx.xx/cgi/xxx_set なのですが、どのようにして送信するのでしょうか? : Name_Not_Found [sage] 2018/03/04(日) 03:53:05.36ID:??? なんじゃこのファッキンな記事・・・ : Name_Not_Found [sage] 2018/03/04(日) 03:54:58.99ID:??? だから関数を実行すればいい。 実行する方法はいくらでもある。 この仕事をする上で、その方法を知らないわけがない。 つまりだな。 手術の真っ最中にメスって何って聞いてるようなもんだ : Name_Not_Found [sage] 2018/03/04(日) 04:03:49.56ID:??? url: "cgi/xxx", の箇所を、url: "192.168.xx.xx/cgi/xxx_set", にして、 ボタンとかを作って押してあげるでよいのでしょうか : Name_Not_Found [sage] 2018/03/04(日) 04:17:37.77ID:??? 勉強すればわかる : Name_Not_Found [] 2018/03/04(日) 08:13:55.01:KR/1MVGQ XMLHttpRequestって同期モードだとresponseTypeを変更できないみたいだけど、同期モードだとテキストしか受信できないってこと? 同期モードでバイナリを受信する方法はないの? : Name_Not_Found [sage] 2018/03/04(日) 09:14:34.58ID:??? jsスレです : Name_Not_Found [sage] 2018/03/04(日) 10:20:17.95ID:??? そのコメントで興味をもって見てみたが MicroSoftのあたりで見るのをやめたw : Name_Not_Found [sage] 2018/03/04(日) 13:33:21.42ID:??? Promiseじゃだめなの? : Name_Not_Found [sage] 2018/03/04(日) 13:40:12.03ID:??? これか? ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise XHRによる画像の読み込み PromiseとXMLHttpRequestで画像を読み込む別の例は、MDN GitHub js-examplesリポジトリにあり、動作を確認することができます。それぞれの行のコメントでプロミスとXHRの構造がよくわかるはずです。 : Name_Not_Found [sage] 2018/03/04(日) 15:08:04.99ID:??? 非同期使えばいいだろ : Name_Not_Found [sage] 2018/03/04(日) 16:05:19.90ID:??? url: "cgi/xxx/cmd=1&id=" + id, or data: { cmd: "1", id: id } : Name_Not_Found [sage] 2018/03/04(日) 16:18:38.47ID:??? どうせcgi/xxx/cmd=1&id=undefinedになってるというオチ : Name_Not_Found [sage] 2018/03/04(日) 16:53:04.97ID:??? var xhr = new XMLHTTPRequest() xhr.open('POST', 'cgi/xxx', true); xhr.setRequestHeader('Content-Type','application/x-www-urlencoded;charset=UTF-8'); xhr.send("cmd=1&id="+ id ) かな : 923 [sage] 2018/03/04(日) 18:49:59.11ID:??? >url: "cgi/xxx/cmd=1&id=" + id, urlにホスト名を記述していないのに、なぜ宛先に届くのかが分かりません。 GETの場合は、URLで指定しているので分かります。 POSTの場合は、サーバにデータを送信するのに、サーバのアドレス(ホスト名)をどこに指定すればよいのか?が分かりません。 関数を実行するには、ボタンとかを作って押すというので正しいのでしょうか : Name_Not_Found [sage] 2018/03/04(日) 18:53:12.82ID:??? 宛先であるホスト名は、192.168.xx.xx なのですが、 >xhr.open('POST', 'cgi/xxx', true); これでどうやってホスト名に送るのでしょうか? : Name_Not_Found [sage] 2018/03/04(日) 18:59:58.41ID:??? cgi/xxxがアドレスじゃないんか? : Name_Not_Found [sage] 2018/03/04(日) 19:05:08.53ID:??? ttp://js.studio-kingdom.com/jquery/ajax/ajax ここにかいとるよ : Name_Not_Found [sage] 2018/03/04(日) 19:52:50.61ID:??? アドレスは、192.168.xx.xx/cgi/xxx です。 : Name_Not_Found [sage] 2018/03/04(日) 20:12:52.77ID:??? 趣味で知識ゼロからサイト作ってる人? : 923 [sage] 2018/03/04(日) 20:13:14.05ID:??? >サーバへのデータ送信について の箇所を読みましたが、疑問がはれません。 GETのときは、ブラウザのURLに192.168.xx.xx/cgi/xxx_get などと指定してアクセスすれば値が返ってくる。←単純明快 POSTのときは、ブラウザのURLに指定する?しない? どうやら、XMLHTTPRequest()を作って送るみたいだ。どうやれば実行される? 実行されたとして、どうやって192.168.xx.xx/cgi/xxx へメッセージを送っているのか? GETのときは、192.168.xx.xx をブラウザのURLで指定したけど、 POSTのときは、192.168.xx.xx をどこにも指定しないでどうやって送るのだろうか? : Name_Not_Found [sage] 2018/03/04(日) 20:17:40.57ID:??? 一回試しにうごかしてみりゃいいやん : 923 [sage] 2018/03/04(日) 20:18:22.02ID:??? Web系の知識ゼロの底辺SEがWeb APIを使おうとして悪戦苦闘中です。 : Name_Not_Found [sage] 2018/03/04(日) 20:20:18.34ID:??? いまの環境だと試せないので明日試します。 : Name_Not_Found [sage] 2018/03/04(日) 20:21:43.00ID:??? そのWeb APIの仕様書が何の仕様書でどう書かれてるかは知らんけど 通信先URLが、ホスト名が指定されていない cgi/xxx だけであっても、 だから絶対に機能しないとはいえない : Name_Not_Found [sage] 2018/03/04(日) 20:40:15.72ID:??? GETの時 xhr.open('GET',encodeURIComponent('sample.sample?query1=some2&query2=some2')) xhr.send(null) POSTのとき xhr.open('POST', 'sample.sample') xhr.setRequestHeader('content-type','application/x-www-urlecoded;charset=UTF-8'); xhr.send(encodeURIComponent('query1=some1&query2=some2')) : Name_Not_Found [sage] 2018/03/04(日) 20:48:33.84ID:??? <img src="img.png"> : Name_Not_Found [sage] 2018/03/04(日) 22:10:50.78ID:??? GETのときは、ブラウザのURL欄に192.168.xx.xx/cgi/xxx_get と指定するので、そこにあるデータを取得するのは分かります。 POSTのときは、GETのときのようにブラウザのURL欄に指定することはしないみたいなので、どこに192.168.xx.xx を指定しているのでしょうか? この構文の中に 192.168.xx.xx/cgi/xxx のアドレスが含まれているようではなさそうですし。。 : Name_Not_Found [sage] 2018/03/04(日) 22:22:22.30ID:??? カレントディレクトリじゃねぇの? : Name_Not_Found [sage] 2018/03/04(日) 22:38:24.22ID:??? >GETのときのようにブラウザのURL欄に指定 ? : Name_Not_Found [sage] 2018/03/04(日) 22:51:38.22ID:??? 相対パスと絶対パスの話じゃないの : Name_Not_Found [sage] 2018/03/04(日) 22:56:01.92ID:??? 悪戦苦闘って言葉を使っていい状況じゃないな : Name_Not_Found [sage] 2018/03/04(日) 23:20:19.62ID:??? カレントディレクトリはどこのカレントディレクトリでしょうか? サーバーの?それともクライアントの? : 923 [sage] 2018/03/04(日) 23:22:18.24ID:??? でRequestを設定しなくてよい方は、ブラウザにURLを入れて実行したら値が表示されたので、 これがGETなのかなと思っていて、そのことを言っています。 : Name_Not_Found [sage] 2018/03/04(日) 23:27:43.92ID:??? の >url: "cgi/xxx", このパスはサ−バのカレントディレクトリからのパスを指していると思うのですが、 192.168.xx.xx を指定しなくても送信できるのでしょうか? 宛先が分からないのではないでしょうか? : Name_Not_Found [sage] 2018/03/04(日) 23:34:14.51ID:??? そうですよね。前途多難です : Name_Not_Found [sage] 2018/03/04(日) 23:43:47.70ID:??? 'URL'にすきなもんおきゃいいだけだろ ばかなのかこいつ : Name_Not_Found [sage] 2018/03/04(日) 23:48:27.75ID:??? おまえらなんでキレながら丁寧に教えてんの? ツンデレなの? : Name_Not_Found [sage] 2018/03/05(月) 00:12:14.87ID:??? べっべつに教えてるわけじゃないんだからっ ただの独り言なんだからっ : Name_Not_Found [sage] 2018/03/05(月) 00:14:45.16ID:??? いや、俺はjQuery以前の問題なんでさっさと手を引いたよ 流石にこの程度じゃjQueryの素晴らしさを他の人に 伝えることは難しいからね。 つまり1+1の答はなんだ?っていう話題で jQueryを使うと〜という話をするのは難しいということ せめてAjaxの話にまでくれば良いんだけどね : Name_Not_Found [] 2018/03/05(月) 00:30:57.02:sxVFIZX2 : Name_Not_Found [sage] 2018/03/05(月) 00:32:37.38ID:??? jQueryニキに見放されるとは もうおまえこの業界でいきていけんぞ : Name_Not_Found [sage] 2018/03/05(月) 01:16:26.77ID:??? 見放すとは失敬な。お前らに任せるって言ってるんだよw jQueryの話題じゃねーもの : Name_Not_Found [sage] 2018/03/05(月) 01:48:34.87ID:??? HTMLのformでGETとPOST勉強してこい : Name_Not_Found [sage] 2018/03/05(月) 02:38:27.82ID:??? フォームデータを送信する ttps://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data : Name_Not_Found [] 2018/03/05(月) 04:57:30.71:NlfT2vVU ttp://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#executeAsyncScript ↑このexecuteAsyncScriptのExampleにあるarguments[arguments.length-1]が指してるのはどの関数に渡されてる引数のこと? : Name_Not_Found [sage] 2018/03/05(月) 13:03:34.23ID:??? どこにあるか見つからんのやけど とりあえずコレ嫁 ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments : Name_Not_Found [sage] 2018/03/05(月) 15:21:02.11ID:??? jQuery でフォーム送信は、form.submit(); かな? 「jquery form submit」で検索! Ajax で同期処理は、非推奨だから使うな。 非同期のみ使え JavaScript のXHR は、ややこしいので使うな。 素人は、jQueryのAjaxなどを使え 「jquery ajax example」で検索! : Name_Not_Found [sage] 2018/03/05(月) 16:09:55.80ID:??? jQueryは甘え : Name_Not_Found [sage] 2018/03/05(月) 16:33:51.61ID:??? ライブラリもフレームワークも甘え 高級言語自体甘え : Name_Not_Found [sage] 2018/03/05(月) 16:54:38.46ID:??? c++は甘えですか : Name_Not_Found [sage] 2018/03/05(月) 17:39:31.56ID:??? 自分で作ったライブラリは甘えですか : Name_Not_Found [sage] 2018/03/05(月) 19:06:45.69ID:??? 甘えんぼさんばっかりだね : Name_Not_Found [sage] 2018/03/05(月) 20:33:23.50ID:??? GreasemonkeyのAPIであるGM_xmlhttpRequestって戻り値がundefinedになる仕様なのですが return出来ないとなると即時関数内にまとめて処理を書くしかないんでしょうか? 処理を分離したいのですが良い方法はありませんでしょうか? GM.xmlHttpRequest({ method: "GET", url: " ttp://www.example.com/", onload: function(response) { 処理 } }); : Name_Not_Found [sage] 2018/03/05(月) 21:04:32.82ID:??? 別の関数作ってGM.xmlHttpRequestのonLoadでそれ呼ぶようにすれば? : 923 [sage] 2018/03/05(月) 23:32:10.86ID:??? を参考にフォームデータを送信してみました。 Requestのデータにcmdだけを設定するものがあったので、まずはそれを試してみました。 <form action=" ttp://192.168.xx.xx/cgi/yyy" method="post"> <input name="cmd" value="1"> <button>test</button> </form> すると、ブラウザでは<error> xxxxxxxx </error> タグが入ったものが返ってきました。 ステータスコードは、302 Foundでした。とりあえずはサーバからResponseが返ってきました! 302の意味は「今ちょっとここにないよ」みたいなので、設定が足りないのだと思います。(何となく心当たりがあります) : Name_Not_Found [] 2018/03/06(火) 12:32:36.52:nWSEmP07 ttp://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#executeAsyncScript ↑このexecuteAsyncScript関数のExampleにあるarguments[arguments.length-1]が指してるのはどの関数に渡されてる引数のこと? : Name_Not_Found [sage] 2018/03/06(火) 14:06:53.36ID:??? Promiseオブジェクトのresolve関数だろう executeAsyncScript関数の定義の中身が Promiseになっててarguments[arguments.length-1] でresolve関数が実行されるようになってるのだろう Unlike executing synchronous JavaScript with #executeScript, scripts executed wit h this function must explicitly signal they are finished by invoking the provided call back. This callback will always be injected into the executed function as the last a rgument, and thus may be referenced with arguments[arguments.length - 1]. てかいてるやん。 : Name_Not_Found [sage] 2018/03/06(火) 14:46:32.29ID:??? 次スレよろ : Name_Not_Found [sage] 2018/03/06(火) 16:06:32.24ID:??? おまえってさ 何日か前にXHRのバイナリがなんとかで質問してたやつ? 解答ないと質問コピペで繰り返して 解答あってもスルーする糞野郎だろ? しねよ こいつの質問には今後一切答えないように : Name_Not_Found [sage] 2018/03/06(火) 16:36:19.03ID:??? 了解! : Name_Not_Found [sage] 2018/03/06(火) 17:09:39.66ID:??? そりゃ的外れな回答されても反応に困るわな : Name_Not_Found [sage] 2018/03/06(火) 18:32:22.56ID:??? 的はずれな回答されたなら またコピペ質問してるはずだろ こいつならw : Name_Not_Found [sage] 2018/03/06(火) 18:48:25.16ID:??? 誰も立てないから立ててきた ttps://mevius.5ch.net/test/read.cgi/hp/1520329583/ : Name_Not_Found [sage] 2018/03/06(火) 18:57:02.64ID:??? 的外れなら「的はずれなんだよボケ。俺はこうしたいの。オマエ馬鹿なのか。バカは返答するな」って言ってもらわんと方向修正できんやろ。 コピペで質問返されてもな。 : 980 [sage] 2018/03/06(火) 22:08:15.01ID:??? に書いてある 素人は、jQuery のAjax を使え!! : Name_Not_Found [sage] 2018/03/06(火) 22:12:59.80ID:??? 次スレ + JavaScript の質問用スレッド vol.132 + ttps://mevius.2ch.net/test/read.cgi/hp/1520329583/ : Name_Not_Found [sage] 2018/03/06(火) 23:33:28.43ID:??? jsコード上でxhrでapi叩くのと formを作ってsubmit()させるのとじゃ効果が違くね? : 1001 [] Over 1000Thread このスレッドは1000を超えました。 新しいスレッドを立ててください。 life time: 105日 1時間 34分 55秒 : 1002 [] Over 1000Thread 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。 運営にご協力お願いいたします。 ─────────────────── 《プレミアム会員の主な特典》 ★ 5ちゃんねる専用ブラウザからの広告除去 ★ 5ちゃんねるの過去ログを取得 ★ 書き込み規制の緩和 ─────────────────── 会員登録には個人情報は一切必要ありません。 月300円から匿名でご購入いただけます。 ▼ プレミアム会員登録はこちら ▼ ttps://premium.5ch.net/ ▼ 浪人ログインはこちら ▼ ttps://login.5ch.net/login.php
凡例:
レス番
100 (赤) → 2つ以上レスが付いている
100 (紫) → 1つ以上レスが付いている
名前
名無しさん (青) → sage のレス
名無しさん (緑) → age のレス
ID
ID:xxxxxxx (赤) → 発言が3つ以上のID
ID:xxxxxxx (青) → 発言が2つ以上のID
このページは2ch勢いランキング が作成したアーカイブです。削除についてはこちら 。