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

1Name_Not_Found2017/11/21(火) 21:58:33.01ID:???
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。

■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【条件】期待する回答の条件を書いてください。(ex: jQuery不可, フレームワーク不可)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
 1レスに収まらないならコード投稿サイトを利用してください。
 http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/

■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです

2Name_Not_Found2017/11/21(火) 21:59:12.78ID:???
■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/

◆開発者ツール(Developer Tools)の基本的な使い方 (全部はhttp://fiddle.jshell.net/vSqKr/44/show/light/#Browser-Developer-Tools )
 ▼諸注意
  - 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
  - Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
  - Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
  https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
 ▼要素を検証
 1. ページ上で右クリックして [要素を検証]
 2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
 3. 右側のサイドバーから知りたいステータス名のタブを選択する
   - [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
   - [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
   - [Properties] タブ … 選択したDOMノードのプロパティを表示
 ▼コンソール
 1. JavaScript コード上で console.log('Hello, World!'); と入力
 2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
 3. [Console] パネルに "Hello, World!" と表示される
 (※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。)

3Name_Not_Found2017/11/21(火) 21:59:43.39ID:???
■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。

■各種仕様 ( http://fiddle.jshell.net/vSqKr/44/show/light/#Link も参照 )
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳)

4Name_Not_Found2017/11/21(火) 22:00:08.82ID:???
■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳)
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events)
http://www.w3.org/TR/uievents/ (UI Events)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等)
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳)
http://www.whatwg.org/specs/ (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
https://developer.mozilla.org/ja/docs
◆ MSDN Library
https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html

5Name_Not_Found2017/11/21(火) 22:06:20.25ID:???
>>1
いいね! 乙

6Name_Not_Found2017/11/22(水) 00:24:20.79ID:???
http://www.hcn.zaq.ne.jp/___/WEB/
だいぶ前からリンク切れ

7Name_Not_Found2017/11/22(水) 01:51:46.08ID:???
>>1
ライブラリ禁止の条項をなくした、という事はいつもの人か

8Name_Not_Found2017/11/22(水) 02:09:04.06ID:???
ライブラリ禁止をなくせば問題は全て解決する

9Name_Not_Found2017/11/22(水) 02:11:24.02ID:???
ライブラリ禁止は質問者やほかの人のためになるかどうかじゃなくて
アンチが荒らす免罪符とてしか使われてないからな

10Name_Not_Found2017/11/22(水) 08:06:26.11ID:???
だからテンプレリンクあまりに多すぎだって
こんな沢山のリンク読む人はいない
MSDNだってMDNに統合されるし、リファレンスはMDNだけで十分
WHATWGとかW3CはMDNを読んでもっと詳しく知りたいと思った人が勝手にたどり着く
ES仕様もしかり、ここで紹介しても仕方がない

11Name_Not_Found2017/11/23(木) 10:24:10.82ID:???
>>10
次はちゃんと吟味して更新しておくよ

12Name_Not_Found2017/11/23(木) 15:02:08.95ID:???
テンプレが無駄に多いのは100スレ続く伝統
技術者のクセ

13Name_Not_Found2017/11/23(木) 20:29:10.91ID:???
「伝統」は本当にそれでいいのかを常に見直し更新していくのがプログラマのさだめ
「ずっとこうだから」と言った時点でその人はただのコーダー

14Name_Not_Found2017/11/24(金) 00:22:28.46ID:???
node.jsの勉強にいいサイトありませんか?

15Name_Not_Found2017/11/24(金) 00:55:02.41ID:???
Node.jsで何がしたいの?

16Name_Not_Found2017/11/24(金) 00:56:13.28ID:???
Node.jsでどんなことができるの?

17Name_Not_Found2017/11/24(金) 01:29:49.36ID:???
前スレに書きましたが、chromeのローカルストレージの実装がLevelDBなので
LevelDBのデータファイルの中身を
node.jsで見ようと思ったのです

18Name_Not_Found2017/11/24(金) 03:16:54.45ID:qZ01KuDr
おまえら大先生なんだから
本質的にJSというよりライブラリの話だなってわかった時点で誘導してあげればいいじゃん?
そんなにけんけんしないで

19Name_Not_Found2017/11/24(金) 03:52:21.64ID:???
殆どがライブラリでも解決できる話題なのでここでやる方がいい
誘導が多い=ここでやるべき話題ってことだ

20Name_Not_Found2017/11/24(金) 09:01:08.60ID:???
質問者がライブラリの話を始めるのが問題なんじゃなくて
ライブラリ使わずとも数行で実現できることであっても
頑なにライブラリを勧めようとする回答者がいることが問題

21Name_Not_Found2017/11/24(金) 09:50:31.51ID:???
いろんな回答があって良いのだからライブラリを使った回答でも良い
その人がライブラリを使わない回答を書く義務もない

ライブラリを使わない回答は他の誰かがやればいい
それをやらないで頑なにライブラリを使った回答をするなと
言うやつが問題

ライブラリを使うなというのではなく、
ライブラリを使わない回答を書け

そうすれば荒れることはない

22Name_Not_Found2017/11/24(金) 10:16:13.72ID:qZ01KuDr
>>20
それなー
わかるんだけど、初心者とかだと特にjQuery使うだろうから
ピュアJSで教えたら、教えた部分だけ浮いちゃったりするんじゃないかなー
とも思う

>>21がごもっともだと思う
こうも書けるよ!って言うだけで良いのだろうなと

23Name_Not_Found2017/11/24(金) 10:43:35.24ID:???
自分で関数を作ってもある意味ライブラリ

24Name_Not_Found2017/11/24(金) 13:02:29.64ID:???
>>14-17
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017

この本では、データアクセス(CRUD)は、Flux の、Store という部分で、
UI とは完全に分離させている

nmp の、immutable パッケージで、データを変更不能にしたり

25Name_Not_Found2017/11/24(金) 13:16:13.20ID:???
>>23
00年代前半にオレオレライブラリを作ってた記憶が…うっ、頭が

26Name_Not_Found2017/11/24(金) 13:59:17.25ID:???
初心者だとjQueryを使うっていう考えに違和感

27Name_Not_Found2017/11/27(月) 15:17:03.43ID:???
■テンプレ案
http://fiddle.jshell.net/fH4cC/174/show/light/

■諸注意
vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の話題はvol.116から禁止されました。
vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。
本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。
ライブラリの話題はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。

28Name_Not_Found2017/11/27(月) 22:07:10.95ID:???
JavaScriptでたまに
{ ...abc, }
みたいなの見ますが「...」って何なんでしょうか?

29Name_Not_Found2017/11/27(月) 22:45:27.59ID:???
>>27
伝統あるテンプレをvol.116から勝手に変えないでください
いい加減怒りますよ?

勝手に変えて良いのであれば、vol.131からライブラリは解禁になりました。
スレの住民の意見をちゃんと取り入れましょう

30Name_Not_Found2017/11/27(月) 22:48:15.24ID:???
>>28
これ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator

>>1より
> ・動作ブラウザや環境が限られる場合は、それを明記してください
ということなので書くと

比較的最近使えるようになった。リンク先にも書いてあるが
IEではサポートされていない(Edge12から使える)

Chrome、Firefox、Safariも古いやつは使えないが
これらの古いやつはシェア低いので無視していいだろう

3129 = 302017/11/27(月) 22:48:53.48ID:???
もう一つ、IEに対応する必要があるのであれば
babelやtypescriptを使って変換するという手もある

32Name_Not_Found2017/11/27(月) 22:54:36.34ID:???
>>30
スプレッド演算子とかいうやつですか。
調べてみます。ありがとうございます。

33Name_Not_Found2017/11/27(月) 22:54:56.09ID:???
スプレッド演算子知らなかった
これ、使える?

34Name_Not_Found2017/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>
);

35292017/11/27(月) 23:17:10.77ID:???
> これ、使える?

ブラウザが対応しているか?ということなら>>30に書いたとおり

ではなくて、便利か?という意味なら
一度知ってしまえば、有って然るべき機能だと思うようになるよ
以前は変則的な書き方をしていた所をシンプルに書けるようになる

例えば、以前はこんな感じで一瞬「?」となるような書き方が必要だった
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Copy_an_array
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#A_better_way_to_concatenate_arrays

36Name_Not_Found2017/11/27(月) 23:17:31.95ID:???
オブジェクトに関するスプレッド演算子は、以前はlodashなどのライブラリを使わないとやりづらかった
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals

あとこの「...」は関数の引数にも使用できる。正確にはこっちはrest parameterと呼ばれているけどね
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

37292017/11/27(月) 23:27:08.22ID:???
>>34
こういう書き方も好き
(hrefやtaget変数に入れておいて何らかの処理をすることはよくあるので)

const href = '〜';
const target = '_blank';
const attr = {href, target};

return <a {...attr}>あ</a>

38Name_Not_Found2017/11/28(火) 00:07:55.41ID:???
>>29
テンプレを勝手に書き換えた>>1にもどうぞ文句を入れて下さいよ

39Name_Not_Found2017/11/28(火) 00:51:34.53ID:???
戻しただけなので問題ない

40Name_Not_Found2017/11/28(火) 02:45:01.60ID:???
質問テンプレートとか、テンプレも結構後から改変されてるよね
残してほしいところだけ「前からあった」といい、変えては困る場所だけ「勝手に変えるな」と彼はいう

41Name_Not_Found2017/11/28(火) 03:15:00.28ID:???
>>40
5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら?
でないのであれば、俺とお前は立場は一緒、
俺がスレの民意をまとめてその内容でテンプレにしただけの話

42Name_Not_Found2017/11/28(火) 07:22:51.26ID:???
>>41
>>27のテンプレも当時のスレの民意をまとめて決めたものだけど、なぜその伝統は無視するの?
>>1は事前に話し合ったわけでもなく、彼が独断で決めただけでしょ
話し合いのあった当時と比べるべくもないよ

43Name_Not_Found2017/11/28(火) 07:40:54.97ID:???
テンプレ案にjsfiddleを使い始めたのはvol.97からか
http://fiddle.jshell.net/fH4cC/1/show/light/
ライブラリ禁止はvol.116から続く伝統
ライブラリ荒らしとの言い争いも伝統といえなくもないな

44Name_Not_Found2017/11/28(火) 07:51:59.25ID:???
>>41
> 5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら?
> 俺がスレの民意をまとめてその内容でテンプレにしただけの話
君が>>1なら、>>1のルールを守るのは最低限の礼儀だと思うよ

> ・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)

45Name_Not_Found2017/11/28(火) 10:23:08.52ID:QIJXvf1S
javascript初歩的な質問で申し訳ありません
var string = "1020304";
string,split("0")
を最初に出てきた0だけで分割して[1,20304]にしたいです
どうすればいいんでしょうか?

46Name_Not_Found2017/11/28(火) 14:48:11.95ID:???
>>45
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);

47Name_Not_Found2017/11/28(火) 15:28:54.71ID:???
俺だったらstring,split("0",1)にした後
その結果とその文字数+0を差し引いたものを配列として扱うね

48Name_Not_Found2017/11/28(火) 17:08:12.93ID:???
なんでsplitの2番目の引数指定した時の動作が他の言語と違うんだろうか

49Name_Not_Found2017/11/28(火) 19:14:41.20ID:???
string.split(/0(.*)/,2)

50Name_Not_Found2017/11/28(火) 19:29:37.54ID:???
var string = "1120304"; 場合 >>49だと無理

51Name_Not_Found2017/11/28(火) 20:04:20.45ID:???
>>45
/^([1-9]*)0(\d*$)/.exec(string);

52Name_Not_Found2017/11/28(火) 21:01:34.18ID:???
>>45
事前に string 値が整数文字列である事を保証できるか否かで>>51と使い分ける
var i = string.indexOf('0');
var match = [string.slice(0, i), string.slice(i + 1)];
console.log(match); // ["1", "20304"]

>>46
var string = "100"; で破綻する

53Name_Not_Found2017/11/28(火) 22:19:01.45ID:???
ライブラリ荒らしは、ライブラリを禁止にした奴が荒らしかな?
とにかく、スレを一杯立てた奴が荒らしなんだよ

Undescore から、Lodash へ移行したのは、皆が知ってる常識だから、荒らしじゃない。
今でも、Undescore を使っているのは、Backbone だけ

荒らしは、jQuery, Lodash とか、皆が新しい知識を得るのを、邪魔してくる。
荒らしは食えないから、他人の勉強の邪魔をしてくる

とにかく、JavaScript の情報を書いてない奴が荒らし。
推薦書を書いても、ステマやステマやとか、荒らしは皆の邪魔してくる

とにかく、JavaScript の情報を書いてない奴とは、会話しないように。
そいつは荒らしだから

54Name_Not_Found2017/11/28(火) 22:50:20.27ID:???
>>45
> var string = "1020304";
> 分割して[1,20304]にしたいです
まずstringの文字列の法則と、分割後の array は String なのか、Number なのか
質問に於いての説明が不十分

55Name_Not_Found2017/11/28(火) 22:53:46.60ID:???
Vue.js meet upが応募開始10分で100人満員になってた…
Vue.js人気だねー

56Name_Not_Found2017/11/29(水) 00:31:12.26ID:???
file:///d:\sample.htmlからhttp://localhost/postmethodにajaxでpostすると失敗します。エラーコードは0です。
失敗する原因として、下記が3つ存在することまではたどり着きましたが、試行錯誤のうえ解決に至っていません。
1.サーバがCORSに対応していない。
2.異なるプロトコルにAjaxできない。
3.Chromeのセキュリティポリシー。
他に何か思い当たることはありますか?
やはりfileからhttpにajaxは出来ないのでしょうか?
(そうなるとデバッグが微妙に面倒です)

57Name_Not_Found2017/11/29(水) 02:48:43.74ID:???
0は成功してる可能性もあるぞ

58Name_Not_Found2017/11/29(水) 07:12:15.77ID:???
>>56
クロスドメインかセキュリティポリシーだと思う
hosts触って
http:/exasmple.com
でアクセスした時にローカルを見るようにするといい

具たち的にはこんな感じ
https://qiita.com/nbkn/items/e72b283c54403a30b2e1

59Name_Not_Found2017/11/29(水) 07:14:56.47ID:???
>>56
プロトコルもホスト名もポート番号すら違って、同一オリジンと見なされるわけがない
CORSについて勉強し直すべき

60Name_Not_Found2017/11/29(水) 20:19:58.42ID:???
SPAみたいなアプリを作るんですが、内部の状態を全部保存して、次にアプリを表示したときに
復元するのですが、普通の静的型付け言語ならモデルにメソッド追加したりしても、
大抵は元に簡単に戻せるんですが、JavaScriptではどうすればいいんでしょうか??
JSONじゃなくてもいいんですが、自前でシリアライズ・デシリアライズする処理を
かいてるんでしょうか??

61Name_Not_Found2017/11/29(水) 21:10:01.55ID:???
メソッドごと保存しようというのは正しくない
まず、仮想DOM的なものを設計して、HTMLでもCanvasでもアタッチ出来るくらいのビューを用意する
そしてそのビューに対してこれからどういう変更を加えるか、加えてきたかのアクションチェーンを設計する
実行はアクションチェーンを読み出しつつ各アクションの種類に応じてswichを使ったりして行う
保存はアクションチェーンオブジェクトと仮想DOMオブジェクトをそのままIndexedDBなんかに保存すれば良い
JSONは循環参照を扱えないのでオススメしない、まあ循環参照だけならほぐしてJSON化可能だが
画像なんかのバイナリも別に保存したいこともあろうからIDBがオススメ
1アクション中のアニメーションだったり、もうちょっと工夫が必要だがそれで概ね上手くいく

621/22017/11/29(水) 21:24:24.05ID:???
>>60
なんかいろいろずれてる気がするな
web製作板なのだからウェブアプリってことでいいのか?
SPAみたいなアプリを作ると書いているが、あなたが書いている内容は
SPAとは関係ない話になっている。

まず
> 内部の状態を全部保存して、次にアプリを表示したときに復元するのですが、
と書いてあるがウェブの世界ではSPAでなくとも一般的にサーバーにデータを保存し、
ページを表示した時にサーバーからデータを取ってくる。SPAではそれがページ単位ではなく
何かしらのコンポーネント単位になることもよくある

> 普通の静的型付け言語ならモデルにメソッド追加したりしても、
> 大抵は元に簡単に戻せるんですが、
一般的にシリアライズっていうのはデータのみを保存するのだから
モデルへのメソッドを追加に関しては、静的型付け言語かどうかは関係ない

シリアライズが(簡単に)可能かどうかっていうのはクラスのインスタンス変数を
全て取得する方法を言語やライブラリが提供しているかどうかにかかっている
JavaやRubyはそれが可能なので簡単に実現できるが
JavaScriptはではそういったことは完璧にはできないので出来たとしても制限がある
一般的にできないと考えたほうが良い

とはいっても、JavaScriptのobject(配列や連想配列)≒JSONなのでJavaScriptのクラスが
持っているデータをobjectとして管理していれば、比較的簡単にJSON化できる。
なおJSONではなく他のバイナリデータにシリアライズするライブラリも有ったはず

そして「次にアプリを表示したときに復元する」というのはobjectを表現するデータを
JSON形式でもいいし、そうでない形式でも良いが、サーバーに保存することになる
オブジェクト自身を保存するというより、中身のデータを保存するという感じ
まあつまりは自前でシリアライズ・デシリアライズする処理を書くことに相当するわけだが
繰り返すがJSON形式を用いればそれは大したことじゃない

632/22017/11/29(水) 21:30:41.02ID:???
そしてSPAとは関係ない話では有るが、SPAを実装する時は
自力で作るのではなく、何らかのフレームワークを使ったほうが良い

残念ながら俺はSPAフレームワークには詳しくないのだが、
SPAを作りやすくする"フレームワーク"として機能で
オブジェクトをシリアライズ・デシリアライズする機能があるかもしれない。

つまりフレームワークが決めたルールに従って作ることで
モデルを簡単にシリアライズしたりデシリアライズできる。
そういう機能があるかないかはしらないが、自力でSPAアプリを作るのは骨が折れるので
SPAアプリを作るというのが本当の目的であれば、
まずSPA対応のフレームワークの使い方を勉強することをおすすめしたい


ちなみになぜ「SPAアプリを作るというのが本当の目的であれば」なんて
わざわざ言ってるのかというと繰り返すが>>60の内容はSPAアプリを
作る時の話とは関係ないから

64Name_Not_Found2017/11/29(水) 21:41:57.38ID:???
>>60ですが、そこまでは書きませんでしたが、実際はReactを使います。で、それと他にRedux使うかMobX使うかとか
どうするか色々調べてるところです。例えば、MobXとか使うと元のオブジェクトがラップしてオーブザーバルになるみたいんです。
React使う前にも他にデータバインディングできるライブラリを調べると、元のオブジェクトをラップしたり
とか何種類か方法があるみたいんですが、そららを使うと
JavaScriptのobject(配列や連想配列)≒JSONじゃなくなるっぽいので、一般的にどうすればいいのかなと
思った次第です。

65Name_Not_Found2017/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 など、
サーバーを立てて、サーバーを介して通信しないといけない

66Name_Not_Found2017/11/29(水) 21:52:12.00ID:???
JavaScript一般的にはシリアライズする方法はないので自力でやる必要がある。
そこら辺をフレームワークがカバーしている(かもしれない)
というのが答かな


もともとJavaScriptはクラスなんてものはなかったから
シリアライズすべき変数はなんや?って話なんだよ。

ローカル変数を使われるとクラス(に相当する関数)の外から見る方法はないし、
関数を値として扱えるから、関数のコードをシリアライズするの?って話まででてくるし

67Name_Not_Found2017/11/29(水) 21:55:27.62ID:???
>>65
YQLなんていずれだめになるだろう
あれは使うべきではない

68Name_Not_Found2017/11/29(水) 22:00:32.30ID:???
入門 React ――コンポーネントベースのWebフロントエンド開発、2015

Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017

Stefanov の本では、Flux を使って、JSON で、localStorage に保存している。
まあ、これは例題だから、実際には、DB を使うのだろう

69Name_Not_Found2017/11/29(水) 22:03:37.19ID:???
怖い例題だな
ブラウザ開発者の機嫌次第で一発でふっとびそう

70Name_Not_Found2017/11/29(水) 22:14:18.15ID:???
>>68
> JSON で、localStorage に保存している。
そこは(どうでも)いいんだよね。
表現形式と保存場所の話だから

シリアライズっていうのはオブジェクト(クラスのインスタンス)を
どうやって保存できる形式に変換するかって話だから

その本ではクラスのインスタンスのシリアライズの話をしてる?

71Name_Not_Found2017/11/29(水) 22:21:05.46ID:???
PWAっぽい

72Name_Not_Found2017/11/29(水) 22:34:24.67ID:???
>>64ですけど、
>>66
>もともとJavaScriptはクラスなんてものはなかったから
>シリアライズすべき変数はなんや?って話なんだよ
ありがとうございます。
いったんクラスというのも忘れて真剣に考えないとダメっぽいですね。

>>68
そうですね。redux使うと、完全にStoreはシンプルになるので、そのまんまシリアライズ・デシリアライズ
できそうなんで、そこは楽そうなんですが、redux自体がactionやらactionCreaters,Reducersやらで・・

73Name_Not_Found2017/11/29(水) 22:43:31.41ID:???
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://github.com/stoyan/reactbook

whinepad という名前で、Excel みたいな表を作っている

インスタンスの保存だけど、メソッドは保存しない。
保存するのは、データだけ

74Name_Not_Found2017/11/29(水) 23:12:17.69ID:???
>>53
なんか素で勘違いしてそうだからレスするけど
スレをいっぱい立てまくってたのが件のテンプレ改変した人であり前スレとここの>>1だよ

75Name_Not_Found2017/11/29(水) 23:28:35.87ID:???
スレをいっぱい立てまくっていたのが、荒らしだろ?
それで皆、苦労したんだろ?

このスレは、荒らしが立てたスレか?
まあそれなら、再利用すればよい

とにかく荒らしは、議論させないように、皆の邪魔をする。
jQuery の話をするなとか、Lodash の話もするなとか、DOM の話もするなとか、
荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる。
そうやって、ここのコミュニティをつぶすつもりだろ

スレを分けるなら、プログラム板のように、
初心者向け・上級者向けに分けるべき

76Name_Not_Found2017/11/29(水) 23:32:17.41ID:???
その話いい加減にしてくれないかな?
いま問題なく進行してるだろうが

77Name_Not_Found2017/11/29(水) 23:46:16.66ID:???
スレ議論スレでも作れば

78Name_Not_Found2017/11/29(水) 23:48:36.69ID:???
>>77
はいどうぞ。そしてその末路も見ていってください。
投票結果見て明らか。議論にすらならない。やるだけ無駄

+ JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net
http://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など禁止)

79Name_Not_Found2017/11/29(水) 23:53:10.48ID:???
>>78
thx
あったんだ、知らなかった・・・

80Name_Not_Found2017/11/30(木) 00:12:37.60ID:???
>新しいスレの内容の条件

>・JavaScriptだけを扱う(AltJSやBabelやTypeScript禁止)
>・ブラウザのDOM APIだけを使う(jQueryなどのライブラリやフレームワーク禁止)
>・サーバーサイド禁止(nodejsなど禁止)

これが、荒らしが作りたいスレだろ?
何も、コミュニティが交流できないように作っている

荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる

次スレからは、プログラム板のように、
スレを初心者向けと、普通用に分けてくれ

81Name_Not_Found2017/11/30(木) 00:34:22.31ID:???
初心者用と普通用ということであれば話題の内容は一緒だ。
どちらもライブラリの話題も対象となる。

82Name_Not_Found2017/11/30(木) 00:46:22.21ID:???
というと反対してくるんだろうな
結局ライブラリの話題を禁止したいだけ

83Name_Not_Found2017/11/30(木) 00:50:52.17ID:???
初心者用は、主に言語の文法などが、わからない人向け。
普通用は、フレームワーク・ライブラリも含める

プログラム板もそうだし、これで良い

84Name_Not_Found2017/11/30(木) 01:01:54.94ID:???
はいどうぞ
JavaScript 初心者用質問用スレ(ライブラリ禁止)
http://mevius.2ch.net/test/read.cgi/hp/1511971305/

85Name_Not_Found2017/11/30(木) 01:23:35.71ID:???
また、初心者用のスレを勝手に立てて、ライブラリ禁止とか書いてる

こいつがいつもスレを一杯立てる、荒らしじゃないのか?

86Name_Not_Found2017/11/30(木) 01:28:02.36ID:???
初心者専用のスレがほしいって言ったから立ててやっただけだろ
あとは勝手にメンテしろや
俺は最初からいらないって言ってる

87Name_Not_Found2017/11/30(木) 02:50:24.30ID:???
初心者って言ってもどのような初心者かわからないんだから
分けるんなら目的に応じて分けないと駄目でしょ

JavaScript.DOM勉強スレ(ただしライブラリ排除ではなく、あくまでDOMや標準APIから学んでいく事をモットーとした勉強のためのスレ)と
JavaScript解法相談スレ(JSをできるだけ深く学習する事なくライブラリやツールを駆使して簡単に問題を解決する事をモットーとしたスレ)
で分けよう

これまでの質問スレは終了

88Name_Not_Found2017/11/30(木) 06:42:10.12ID:???
ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる

禁止事項を勝手に作って、スレを一杯立ててる、こいつが荒らし

今まで、Lodash厨が荒らしかと思っていたけど、荒らしじゃなかった。
誰が荒らしか、ようやく分かった

89Name_Not_Found2017/11/30(木) 08:27:32.88ID:???
>>87
勝手にスレ作って勝手に保守してろ
ここが嫌ならさっさとでていけ

90Name_Not_Found2017/11/30(木) 20:23:32.06ID:???
ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる

結局、スレのテンプレを勝手に変えて、禁止事項を勝手に作って、
スレを一杯立てている奴が荒らしだな

ライブラリ用スレとか、jQuery用スレとか、
スレを分割して、皆が議論できないようにしたのも、この荒らしか

皆、荒らしと会話しないように。
もし気付かず、荒らしと会話している人がいたら、荒らしと教えてあげて

91Name_Not_Found2017/11/30(木) 20:36:33.57ID:???
テンプレを勝手に変えた>>1も荒らしということだな
>>1を相手にしないように

92Name_Not_Found2017/11/30(木) 21:08:37.84ID:???
既存の配列に他の配列を連結したいのですが、1発でやる方法はないでしょうか?
for (let sourceItem of sourceItems) destItems.push(sourceItem);
現状、ループを回しています。

93Name_Not_Found2017/11/30(木) 21:38:08.27ID:???
新しい配列で良いなら
destItems.concat(sourceItems)

94Name_Not_Found2017/11/30(木) 21:42:26.10ID:???
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f

指定した位置に一つ以上追加 - splice

非破壊的な結合 - concat
破壊的な結合 - push

95Name_Not_Found2017/11/30(木) 22:02:59.31ID:???
pushにこだわるなら
Array.prototype.push.apply(destItems,sourceItems);
あるいは
destItems.push(...sourceItems);

96Name_Not_Found2017/11/30(木) 22:36:42.10ID:???
既存の配列を書き換えたいのです。要は破壊的結合で。
destItems.push(...sourceItems);
ああ、pushでそんな書き方できたんですか・・
>>28で教えてもらったスプレッド演算子ってやつですね。
ありがとうございます。

97Name_Not_Found2017/12/01(金) 02:33:38.45ID:???
スプレッドって巨大な配列でやろうとするとエラーになるから嫌いなんだよな

98Name_Not_Found2017/12/01(金) 07:29:45.46ID:???
巨大ってどれぐらい?

99Name_Not_Found2017/12/01(金) 08:34:48.80ID:???
配列長の制限値を超えた配列作ろうとすればそりゃエラーになるが
別にスプレッド関係ないわな

100Name_Not_Found2017/12/01(金) 09:38:33.33ID:X7oqfLY+
こんな式を見たのですが、これは何ですか?
var data = ('' == 0 ? '' : '');

101Name_Not_Found2017/12/01(金) 09:46:19.17ID:???
文法エラーです

102Name_Not_Found2017/12/01(金) 09:52:55.80ID:X7oqfLY+
>>101
では、このコードを書いた人はどういう意図で書いたのでしょうか?
JavaScript専門家の方の推理を聞かせて下さい。

103Name_Not_Found2017/12/01(金) 11:35:39.13ID:???
>>102
・あなたか「書いた人」が転記ミスしている
・「書いた人」が文法をよくわかっていない

文法エラーは関わった人に問題がある以外に考えられないので、第三者が推理するのは時間の無駄です。
大抵はあなたか「書いた人」が頭の中のイメージで転記しているだけで転記ミスしているケースが大半です。

1041032017/12/01(金) 11:46:06.60ID:???
>>101を鵜呑みにして書いてしまいましたが、文法エラーはないですね。
>>100

var data = '';

と等価で>>100のように回りくどい書き方をする必要は全くありません。
説明用のコードか、難読化の一環なのか知りませんが、コードの意図は書いた人に聞く以外の方法はないでしょう。

1051032017/12/01(金) 11:48:12.00ID:???
>>104

・あなたが転記ミスをしていないのなら
・「書いた人」が転記ミスしていないのなら

の条件付きの回答です。
その可能性を捨ててはいけないと思います。

106Name_Not_Found2017/12/01(金) 17:40:23.92ID:???
>>98-99
var a = [0]; として Chrome62の場合
a.push(...a); を繰り返すとlengthが131072の時点で Maximum call stack size exceeded
a=a.concat(a); の場合はlengthが33554432の時点で Invalid array length

引数の問題だからスプレッド自体に問題が有るわけではないけどな

107Name_Not_Found2017/12/01(金) 23:36:41.01ID:???
jQueryが必要とされなくなってきたのは,Reactなどの他のフレームワークが登場したせいではなく,標準DOM APIが進歩したおかげです
https://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が必要だって

108Name_Not_Found2017/12/02(土) 00:00:42.05ID:???
 jQueryをフレームワークにすればと思うけど

109Name_Not_Found2017/12/02(土) 01:01:06.91ID:???
>>100-105
式 ? a : b
3項演算子は、式が真なら a で、偽なら b だろ

var data = ('' == 0 ? '' : '');
式 ? a : a

式が、真でも偽でも、空文字を返すから、この式は無意味。
単に空文字を代入すれば良いだけ

110Name_Not_Found2017/12/02(土) 01:25:47.76ID:???
あー、まだ >>100の答え出てなかったのか?

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の場合だけ空文字になる

111Name_Not_Found2017/12/02(土) 01:26:42.28ID:???
訂正

var data = ('<?= $v ?>' == 0 ? '' : '<?= $v ?>');

112Name_Not_Found2017/12/02(土) 01:29:18.11ID:???
もちろん、意味があるコードかもしれないとは言うが
無駄かつ良くないコードだとも言う
普通はこんな書き方はしない。
こんな書き方はしないが意味が無いとは言い切れない

113Name_Not_Found2017/12/02(土) 09:12:56.52ID:???
>>112
無駄なコードを意味がないコードと表現してるだけだろ
言葉遊びも程々にしろ

114Name_Not_Found2017/12/02(土) 09:14:30.51ID:???
論理演算の意味がない

115Name_Not_Found2017/12/02(土) 09:22:55.15ID:???
三項演算子を出力する意味がない

116Name_Not_Found2017/12/02(土) 18:16:31.30ID:???
>>113
「0だったら空文字にしたい」という要望があったとしたら
それを正しく実装しているわけで無駄ではないよ

117Name_Not_Found2017/12/03(日) 00:19:35.36ID:???
>>116
それは三項演算子ではなく、ただのif文だろ
それと「無駄かつ良くないコードだとも言う」に言及して反論してるのだが、前言撤回もここまで早いと信頼性ゼロだな

118Name_Not_Found2017/12/03(日) 00:42:59.95ID:???
>>117
少なくともifであることは認めたようだが
あんたにとって三項演算子とifの違いって何?

1191182017/12/03(日) 00:44:06.26ID:???
> var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>');

これはやってることに意味があるが
無駄かつ良くないコードだろ
何を反論してるんだ?

120Name_Not_Found2017/12/03(日) 00:46:44.07ID:???
>>118
質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら、話はここで終わりだな

121Name_Not_Found2017/12/03(日) 00:47:37.59ID:???
> 質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら

無駄かつ良くないコードだと言ったのは俺なんだが、
なんで俺が自分が行った言葉に反論しなきゃいけないんだ?

122Name_Not_Found2017/12/03(日) 00:48:48.68ID:???
無駄かつ良くないコードだが
ちゃんと動く

っていうことの意味が分からんのかな?

俺ここでよく無駄かつ良くないコードを
修正してるんだが

123Name_Not_Found2017/12/03(日) 00:49:05.59ID:???
>>119
>>112では「無駄」と認めながら>>116では「無駄ではない」といってるだろ
前後で主張が変化する奴は信用できない

124Name_Not_Found2017/12/03(日) 00:50:11.59ID:???
あ、揚げ足取っていただけかw

125Name_Not_Found2017/12/03(日) 00:54:47.33ID:???
揚げ足ではないような
自己矛盾を抱える人は日本語が分かってない人という典型かな

126Name_Not_Found2017/12/03(日) 01:10:35.99ID:???
日本語がわからんやつは困るね。いちいち説明せんといかんのかね
コードが無駄だってだけで動作は無駄じゃないってことだよ
ちゃんと書いてあるだろ

127Name_Not_Found2017/12/03(日) 14:02:27.52ID:???
動作自体が無駄

128Name_Not_Found2017/12/03(日) 14:11:59.68ID:???
じゃあ無駄じゃない動作とは?

129Name_Not_Found2017/12/03(日) 14:27:27.65ID:???
祈りの所作

130Name_Not_Found2017/12/03(日) 16:24:26.70ID:???
必要なことをやっているけど無駄の多いコードは冗長なコードというべきではないか

131Name_Not_Found2017/12/03(日) 17:55:51.86ID:???
1 + 1 // ->
で2が出力されるのですが、これは何でしょうか???

132Name_Not_Found2017/12/04(月) 12:45:59.51ID:???
>>130
>>130
「冗長」の意味を調べなおした方がいいのではないか。

"文章・話などが、「むだ」が多くて長いこと。また、そのさま。"
https://dictionary.goo.ne.jp/jn/109389/meaning/m0u/

133Name_Not_Found2017/12/04(月) 13:17:53.26ID:???
> 必要なことをやっているけど無駄の多いコード
「必要」と「無駄」は対義語
必要なことをやっているなら無駄ではない

134Name_Not_Found2017/12/04(月) 13:19:29.68ID:???
>>132
なるほど、この場合はコードに無駄が多くて長いが
処理そのものには意味がある(無駄ではない)ってことだな

135Name_Not_Found2017/12/04(月) 13:20:38.96ID:???
>>133
必要の対義語は不必要ってでてきたけど?

136Name_Not_Found2017/12/04(月) 18:31:21.62ID:???
必要かつ無駄は矛盾してると思うけどね

137Name_Not_Found2017/12/04(月) 18:45:27.08ID:???
>>136
日本語ひどすぎねぇか・・
「必要」かつ「無駄」ってそれぞれ修飾してる語が違うんだけど

138Name_Not_Found2017/12/04(月) 18:47:12.01ID:???
>>134
いつも通りの曲解だな

139Name_Not_Found2017/12/04(月) 18:48:18.37ID:???
>>137
俺は無駄なコードを書いている
俺は必要なことをやっている(無駄なコードを書く事は必要である)

140Name_Not_Found2017/12/04(月) 21:08:50.03ID:???
必要なことをやっているコードと
必要なことだけで書かれてるコードは違うだろう

1411392017/12/04(月) 21:14:31.74ID:???
意味不明な論理だし、直接的に反論しないところがいやらしいな

142Name_Not_Found2017/12/04(月) 21:18:43.71ID:???
つまりダムってことだな

143Name_Not_Found2017/12/04(月) 21:20:39.67ID:???
>>112はいつもの日本語破綻者だしなあ
曖昧に濁して、相手の反応を伺う事で糸口を探してるんだろ

144Name_Not_Found2017/12/04(月) 21:53:11.51ID:???
> 必要なことをやっているけど無駄の多いコード
そもそも、これは「無駄なコードを残すことに意味がある」と主張したいが為の論理でしょ
「必要」と「無駄」の修飾先が違うのなら、必要なAだけ残して無駄なコード(B)を排除すれば良いだけ
よって、「無駄なコード(B)を書く事に意味はない」と結論される
どちらにしても、論理が破綻してるんだよ

145Name_Not_Found2017/12/04(月) 22:13:47.23ID:???
カレンダーのマス目に編集ボタンが配置されていて、編集ボタンをクリックすると編集画面が表示されるページを作成しています。ここでお尋ねしたいのが、idの名前の付け方です。
今は、id=btnEdit20171201、id=btnEdit20171202と名前を付けていますが、より良い名前の付け方はありますか?

146Name_Not_Found2017/12/04(月) 23:25:30.85ID:???
idをつけない、という選択肢もあるんじゃないかな
押したボタンから日付を取得したいなら、カスタムデータ属性なり、button要素でvalue属性を使うなり、手はいくらでもある

147Name_Not_Found2017/12/04(月) 23:48:01.31ID:???
>>145
>>146も書いているけどそういうIDが必要になるのがおかしい気がするね。
JavaScriptのスレに書いてるってことは、JavaScriptからそれらを参照するつもりなのだろう

本題の前に言っておくと、普通HTMLでは全部小文字でハイフン区切りが多い
btn-edit-20171201 みたいに。なぜかはよく分からんけどアンダースコアはあまり使われない
まあそれでもBEMみたいな変則的なものは有るし、強制ではない

んで、本題。あーだこーだ言いたいが、まあ要するにIDなしでやる方法を知らんのだろう?
なので軽くサンプルを書いてあげよう
https://jsfiddle.net/bfw0m3p6/

148Name_Not_Found2017/12/05(火) 00:40:08.94ID:???
>>146,147
ありがとうございます。とても参考になりました。idを振らずにイベントをトリガーしたり、カスタムデータ属性を使う方法などがあるのですね。
編集画面でクリックされた日の年月日を引き継いで表示したりすることを考えると、カスタムデータ属性が面白そうですね!

149Name_Not_Found2017/12/05(火) 00:54:54.75ID:???
>>148
そのマス目に入れるものが日付だけならtime要素を使うのが良いかもね
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time

<time datetime="2017-12-05">5日</time>

150Name_Not_Found2017/12/06(水) 17:17:54.46ID:6QjIZVj3
['みかん','りんご','みかん','ばなな','りんご','りんご',]から
一番出現回数の多い「りんご」を得るにはどうすればいいでしょうか?

151Name_Not_Found2017/12/06(水) 18:26:46.19ID:???
>>150
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;
}

みたいな感じ(細かい所は省略

152Name_Not_Found2017/12/06(水) 18:33:37.87ID:???
>>151
すまん、 reduce の使い方がダメダメだったので取り消す

153Name_Not_Found2017/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 で書いた。以下で試して。
https://try.haxe.org/

Map に入れたけど、最大値が複数ある場合の、処理がわからない

154Name_Not_Found2017/12/07(木) 00:27:44.39ID:???
>>150
lodashを使った
https://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);
// => ["りんご"]

出現回数が最大のものが複数ある場合を考慮して複数返している

155Name_Not_Found2017/12/07(木) 15:49:48.80ID:???
>>154
ありがとうございます
やっぱりライブラリ使わないと難しそうですね

156Name_Not_Found2017/12/07(木) 21:15:11.79ID:???
>>155
別にライブラリ使わなくてもできるよ。
ただ見て分かる通り優れたライブラリを使うとこの程度の問題なら
複雑化の原因になる条件分岐やループを使わずに最小のコード量で実装できる

157Name_Not_Found2017/12/07(木) 23:12:55.32ID:???
すごいな。ちゃんとconstだけでかけちゃってる

158Name_Not_Found2017/12/07(木) 23:19:30.37ID:???
Haxe で書いた通り、まずMap が必要だから、
ES6(2015) + Babel で、ES5 へ変換

>>153
で、Map に入れる所までは書いたから、その後を書けば?
漏れは、最大値が複数ある場合の、処理がわからなかったけど

Lodash も、ES6 もほぼ同じ

159Name_Not_Found2017/12/08(金) 00:00:01.13ID:???
ES6は必要最小限しか言語機能として搭載しない
という考え方があるから、高度なことはできんよ

>>154の例だとcountByとpickByはない
その他は代替方法があるが少し冗長になる
まあ書いてみると良いよ

160Name_Not_Found2017/12/08(金) 00:20:11.03ID:???
ES6 が流行れば、Underscore/Lodash がいらなくなる、という記事が一杯あるけど

Ruby, Kotlin だと、ライブラリが無くても、かなり簡潔に書けるけど。
列Aでソートして、それが同じ値なら、さらに列Bでソートするとか

Kotlin 2
https://mevius.5ch.net/test/read.cgi/tech/1509462463/18

161Name_Not_Found2017/12/08(金) 01:46:22.33ID:???
>>160
そこに出てくるMutableListやmutableListOfってのはライブラリだよ

Kotlin Standard Library の一部
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/-mutable-list/index.html
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/mutable-list-of.html

RubyのArrayも(組み込み)ライブラリ
https://docs.ruby-lang.org/ja/latest/class/Array.html


言語の範囲っていうのは一般的にはかなり少なく作るもの
関数やクラスの文法とか基本的なものだけ
大部分は標準ライブラリとして実装するのが普通

残念ながらJavaScript(ES6)の標準ライブラリはかなり小さく作られてる
その気になれば一気に最低でもRubyレベルまで実装するのは可能だろうになぜかそういうことをしない。
互換性を保つためなのかブラウザベンダーの負担を減らすためなのか知らんけど

この方針が変わらない限り、貧弱なライブラリとそれを補うlodashとかの構図は変わらない

162Name_Not_Found2017/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');
  }
};

163Name_Not_Found2017/12/08(金) 02:01:45.73ID:???
>>155
ライブラリ使わなくても単純に考えればいいのよ
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);

164Name_Not_Found2017/12/08(金) 02:06:22.46ID:???
>>162
jQueryが得意そうな課題だなw
動かしてないけどこんな感じかな

$(function() {
 $('.gallery img').attr('src', function() {
  return this.src.replace(/xxx/, 'xxx_s');
 });
});

165Name_Not_Found2017/12/08(金) 02:06:56.67ID:???
>>162
var images = document.querySelectorAll("div.gallery img");

1661622017/12/08(金) 02:23:12.26ID:???
>>164
>>165
さっそくありがとうございます。
お二方のコード双方動きました。
動くと嬉しいですね〜。

167Name_Not_Found2017/12/08(金) 02:50:47.41ID:???
>>166
あ、ごめん。少し無駄があった。
(最初のページロードを待つ部分は単に書くのを省略するとして)

$('.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

168Name_Not_Found2017/12/08(金) 03:16:43.69ID:???
文字列の先頭からのマッチングに使うのに適した変数名は何だろう
startWithか?とか思って検索していて、
ES6からStringにstartsWithメソッドが追加されているのに気づきました
こんなメソッド知ってましたか?
Google書籍検索で「JavaScript startsWith」で検索しても、
日本語の本は一冊も出てこないところをみると、
知らない人は決して少なくないと思います
他にもES6で追加されているのに知らないメソッドがある気がします
どう調べればいいですか?

169Name_Not_Found2017/12/08(金) 03:19:02.22ID:???
普通にググって見つかるので

1701532017/12/08(金) 06:13:25.95ID:???
Ruby 初心者スレッド Part 62
https://mevius.5ch.net/test/read.cgi/tech/1511451329/96

ちなみに、Ruby でやってみた

171Name_Not_Found2017/12/08(金) 06:29:21.92ID:???
>>163
答えが複数ある場合でも、OK だね

ただ、そういう複雑なプログラムを書きたくないから、
便利な関数を検索していた

172Name_Not_Found2017/12/08(金) 12:42:30.79ID:???
>>163
ありがとうございます
みかんとりんごが同数の場合は、どちらか一つが取れればいいので
こんな感じに書いてみましたが間違ってたらご指摘下さい

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);

173Name_Not_Found2017/12/08(金) 21:54:48.56ID:???
>>171
何を持って複雑というかだね。

俺は条件分岐やループが多く処理の中で状態が
変化するようなものを複雑だと定義している

だけど人によっては知らない関数を使うことを
複雑だと言う人もいるだろう

174Name_Not_Found2017/12/08(金) 21:57:13.56ID:???
>>172
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]);

こうすればいいだけだよ

175Name_Not_Found2017/12/08(金) 22:06:48.91ID:???
>>173
> 何を持って複雑というかだね。
いや、複雑の定義は(いくつか有るとは言え)ソフトウェア業界で決まってるんだから
いくつか有るうちのどれかに従おうよw

オンラインで複雑度を調べるサイトぐぐってみたら
http://jsmeter.info ってのを見つけた
(意味は知らないのあるからちょっと調べてみようかな)

>>163の結果
http://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

>>154の結果
http://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

176Name_Not_Found2017/12/08(金) 22:20:56.36ID:???
Statements: 文の数(少ない方が良い)
Line: 行数(少ない方が良い)
Branches: 分岐数(少ない方が良い)
Depth: ネストの深さ(少ない方が良い)
Cyclomatic Complexity: 循環的複雑度
 10 以下であればよい構造
 30 を越える場合,構造に疑問
 50 を越える場合,テストが不可能
 75 を越える場合,いかなる変更も誤修正を生む原因を作る
Halstead Volume: よくわからん
 https://www.imagix.com/user_guide_jp/class-metrics.html
 Halstead プログラム量?
Halstead Potential: よくわからん
 http://se-naist.jp/old/lecture/se3/2006/handouts/productmetrics2.pdf
 語彙の多さに着目した尺度?
Program Level: 抽象度?(高い方がいい?)
MI: 保守容易性(高い方がいい)

177Name_Not_Found2017/12/09(土) 00:53:25.98ID:???
>>175-176
ライブラリのコードを含めて比較しなければ公正とはいえない

1781662017/12/09(土) 00:53:30.06ID:???
>>167
両方動きました!
上級者になると一行で書けるんですね。

179Name_Not_Found2017/12/09(土) 00:55:50.83ID:???
>>177
ライブラリの部分は十分にテストされて書かなくていい部分だから
そこを含める必要はないよ

っていうかその話をするとブラウザの部分まで含めろ
OSの部分まで含めろってなるだろ

180Name_Not_Found2017/12/09(土) 02:40:12.73ID:???
自分の書くコードをシンプルにするためにライブラリを使うのに
ライブラリを使ってシンプルにするなど許さん!
ライブラリの分まで含めるのが公平だ!なんて言ってるのか?
どんだけ複雑すれば気が済むんだろうか

181Name_Not_Found2017/12/09(土) 03:09:49.01ID:???
そもそも複雑度ってファイルごと、クラスごと、関数毎に出すものだから
例えライブラリが複雑だとしても、

・使ってるライブラリが複雑です
・それはそれとしてあなたの書いたコードはシンプルです

という結果になるだけの話なんだけどね

対するは、

・ライブラリは使ってません
・それはそれとしてあなたの書いたコードは複雑です

となるだけの話

182Name_Not_Found2017/12/09(土) 09:12:58.40ID:???
> 自分の書くコードをシンプルにするためにライブラリを使うのに
そう思っているのはあんただけ
意味も分からずに http://jsmeter.info/ を使っているから、ライブラリを使うためのツールぐらいにしか思えないんだろうな

183Name_Not_Found2017/12/09(土) 10:16:41.91ID:???
>>182
それで何が言いたいのさ?
否定だけして、お前の意見が何も書いてないぞ

184Name_Not_Found2017/12/10(日) 03:05:54.10ID:???
プログラム板にも、荒らしが出てるぞ

元々、荒らしは、全部のスレで、いちゃもんを付けてくる。
漏れも、何回も攻撃されてる

プログラミングの話は、一切できないくせに、批判ばっかり書いてるのが荒らし

ただ、Ruby, JavaScript のスレでは、
荒らしにかまうから、喜んで居着いてるだけ

荒らしは一切、無視すべし!

185Name_Not_Found2017/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 )

186Name_Not_Found2017/12/10(日) 15:18:23.37ID:???
>>185
最大を複数取得したい場合は?

187Name_Not_Found2017/12/10(日) 16:09:19.03ID:???
誰が複数取得したいなんていったんだ?

188Name_Not_Found2017/12/10(日) 16:19:48.14ID:???
>>166が言ってるけど?

189Name_Not_Found2017/12/10(日) 16:20:04.59ID:???
>>186の間違い

190Name_Not_Found2017/12/10(日) 17:45:40.53ID:???
>>186
あれに付け加えてもいいけど
別のやり方でもうちょっと汎用的な処理を書くとして例えばこういうのはどう?

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] // ["りんご", "みかん"] => 最大個数

191Name_Not_Found2017/12/10(日) 20:34:15.96ID:???
コードゴルフってやつだね

192Name_Not_Found2017/12/10(日) 20:43:06.10ID:???
>>190くらいなら同時に把握しない要素数が10も無いから
プログラマのワーキングメモリに乗るという意味で普通のコードの範疇だと思う

193Name_Not_Found2017/12/10(日) 20:59:52.72ID:???
関数や命令を知っているという前提で、1行の処理を把握するのに
5秒以上かかるようなものは普通のコードではないと思う
コードは読むものであって、解析するものになってはいけない

194Name_Not_Found2017/12/10(日) 22:45:15.56ID:???
場合による
行数が短く一つのブロックがスクロール無しに見れることも重要
つかそもそも読む必要はできるだけ少ないほうが良い
今回のような処理の場合ただ最大個数の要素を得るためだけに十行二十行かけるのは極めて愚策
そこからの処理が重要なんだから、普通は外部関数化する
あえてインラインで書くならできるだけ目につかないように短く書いたほうが良い
仮にもしそこに問題がありそうだということになれば、一行捨てて書き直しても良い程度のものだし

195Name_Not_Found2017/12/10(日) 22:47:45.60ID:???
> つかそもそも読む必要はできるだけ少ないほうが良い

ということは、ライブラリを使って読むものを減らすのが正解なわけか

196Name_Not_Found2017/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個ぐらい
これぐらいの量を、ひとつづつ意味を考えながら
読んでいかないといけない

1971532017/12/11(月) 01:05:24.91ID:???
>>170
にも書いた通り、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回走査してしまう。
一発で取得できないから、無駄を感じる

198Name_Not_Found2017/12/11(月) 05:39:34.10ID:???
>>196
考え方が逆
そもそも一度限りのかき捨てのコードなんだから読む必要がない
問題があれば捨てればいいだけでその時に例えば>>174のような感じだと
4個も公開変数があるから結局一部を捨てたりということもしづらい
一部を修正しようと思えば結局全ての行とそのほかの部分の絡みを考えないといけない
これもワンラインで書くなり使わない変数を削って一つの塊にすべき
もしくは5行程度なら即時関数にしてスコープ限定してもいいけど
本当にデバッグを考えたら結局コメントだったりわかりやすさが足りない

逆に何度も使うんならライブラリ使ったり書いたりする
もし単関数で取れるライブラリがあればそれで良し
中途半端な気遣い(?)は一番無駄

199Name_Not_Found2017/12/11(月) 05:43:08.85ID:???
> そもそも一度限りのかき捨てのコードなんだから読む必要がない

一度限りのかき捨てのコードなんて誰が決めたの?
あなたの思い込みですよね?

200Name_Not_Found2017/12/11(月) 05:53:03.70ID:???
> 問題があれば捨てればいいだけでその時に例えば>>174のような感じだと
> 4個も公開変数があるから結局一部を捨てたりということもしづらい

公開変数ってなんや?
this.foo なんてのが公開変数やろ?
どうみても>>174はローカル変数や

一部を捨てたりってなんや?
全くもって意味不明だ

201Name_Not_Found2017/12/11(月) 06:10:08.40ID:???
初心者です。
この本(http://amzn.asia/386grG8)を文中の課題をやりながら読み終わったので、
次はこちらの本(http://amzn.asia/cDn7CWG)に行こうと思っております。
この話を知人にしたところ、旧版(http://amzn.asia/cv1is9n)を持っているから貸してやろうか?と言われました。

同じ本ですが2010年の旧版です。
javaScriptの学習において そこまで問題がなければ旧版を借りようかと思うのですが、
この界隈の技術の移り変わりは早いので本書も最新版を買うべきでしょうか?

202Name_Not_Found2017/12/11(月) 08:39:09.19ID:???
初めてのJavaScript 第3版、オライリー、2017

この本は、ES6(2015)の本だけど、
プログラミングを数年以上やっていないと、難しくて読めない

初心者は、(ECMA Script)ES3, ES5, ES6 と順番に、やった方が良いかも

今のブラウザは、ES5だけど、
ES6ではクラス構文などもできて、極端に難しくなる

203Name_Not_Found2017/12/11(月) 08:54:39.81ID:???
>>201
間違いなく新しい方が良いけど
古いから役に立たないって訳でもない

204Name_Not_Found2017/12/11(月) 12:57:28.50ID:???
クラス構文習うよりprototype習うほうが難しくね?

205Name_Not_Found2017/12/11(月) 15:22:11.55ID:???
>>174, >>185
ありがとうございました!

206Name_Not_Found2017/12/11(月) 15:31:05.98ID:???
>>201
あってもいいけど物理的な本は必要か?と思う

207Name_Not_Found2017/12/11(月) 16:38:16.76ID:???
あるていど経験してるとサイト検索で十分だと思うけど
最初のうちは体系立てて勉強できるように、本がいいと思う

208Name_Not_Found2017/12/11(月) 19:20:43.67ID:???
>>204
プロトタイプは超簡単
「prototype」は難しいが、それはプロトタイプベースとは関係なく
関数をクラスに見立てたJSの旧クラスシステムで必要になるもので本質とは関係がない
でもプロトタイプベースで書けるようになったのはES2015からで
その教え方をしている入門書なりは見たことがない

209Name_Not_Found2017/12/11(月) 20:34:04.11ID:???
phpマニュアルみたいなサイトないもんかね
あれを一度ガッツリ読むとすんげーレベルアップするんだけどな

210Name_Not_Found2017/12/11(月) 23:09:50.28ID:???
>>208
> でもプロトタイプベースで書けるようになったのはES2015からで

JavaScriptは最初からプロトタイプベースだよ

「俺は昔のJavaScriptはプロトタイプベースとは認めん!」というのは無しな
それはお前の「オレオレ定義」であって世間一般には通用しないものだから
世間一般にはJavaScriptは最初からプロトタイプベース

211Name_Not_Found2017/12/11(月) 23:33:14.20ID:???
>>210
んだね

212Name_Not_Found2017/12/12(火) 02:59:49.05ID:MrUcGD8N
HPで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

717PZBPVIE

213Name_Not_Found2017/12/12(火) 14:42:25.20ID:???
>>210
いやいや、JSのベースがプロトタイプかどうかを言ってるんじゃなくて、
プロトタイプベースらしいプログラミングができる言語だったかを言ってるんだよ
ES2015まではプロトタイプの設定が自由にできなかったんだが
それでプロトタイプベースプログラミングが出来るわけ無いでしょ

だから長らく継承テクニックとしてJSの内部プロトタイプの操作を利用するハックが使われてきたのよ
それでもES2015でいうextendsの効果にもある
関数のプロトタイプを別の関数にするとかいう重要な操作はできなかったわけよ
でも当時でも独自実装であった__proto__を使えばそれは容易にクリアできたわけで
それこそがプロトタイプベースのポテンシャルなわけよ

214Name_Not_Found2017/12/12(火) 14:50:46.50ID:???
class構文追加でより難しくなるかどうかの話だったと思うが

215Name_Not_Found2017/12/12(火) 16:05:59.03ID:???
>>214
とりあえず自分が言いたいことは、prototypeプロパティやnew演算子を使った継承周りのテクニックは
確かに簡単とは言いにくく、class構文はその点分かりやすいけれど、
勘違いしてほしくないのは『プロトタイプ』を活用した継承システムは本来簡単なはずなんだってこと
でもJSでは長らく活用が許されてなかったので、プロトタイプベースOOPの文化や学習が整っていないということ

216Name_Not_Found2017/12/12(火) 21:23:35.72ID:???
>>215
因みにプロトタイプベースらしい書き方ってどんな感じ?
TypeScriptメインだからよくわからんのだ

217Name_Not_Found2017/12/12(火) 22:15:37.27ID:???
>>216
最初から用意されている1つのクラスシステムに縛られないのがプロトタイプベースの良さと言っても
大きなコードを書けば自ずと抽象化の結果として何らかのクラスシステムを作ることになる
既存のJSの2つのクラスシステムは当然内部的にプロトタイプベースのプロトタイプ設定を利用しているのを見ても分かるが
プロトタイプの自由な設定機能がないとまともなクラスシステムを作るのは困難
一番わかり易い形で具体的に絶対にできないことを挙げるなら上で書いたように関数のプロトタイプ設定
つまり関数へのメソッドの継承が実現できない

因みにプロトタイプベースらしい書き方って言うのも一概には言えないのかもしれないし、
実際はコンストラクタ的な機能を考えたりしてクラスシステムを構築する場合もある
そもそも自分がこれを挙げた理由は継承の概念を理解するのが簡単ということで
本当に単純なプロトタイプの設定だけでOOPが円滑にできるとは言わない
その上で書くと

218Name_Not_Found2017/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構文でない旧クラスシステムで書いたコードと比べたら明らかにそうだよねってこと

219Name_Not_Found2017/12/12(火) 22:19:09.90ID:???
>>213
いや、だからそれはあんたの「オレオレ定義」であって
世間一般ではJavaScriptはプロトタイプベースのオブジェクト指向だって
最初から言われてる

言われているかどうか。事実の話をしている。
あんたが認めるかどうかじゃない

220Name_Not_Found2017/12/12(火) 22:23:27.86ID:???
>>218
俺は前者だな
知ってるからかもしれんが

class構文がなかったころと比べたら
まあどっちも理解しやすい

221Name_Not_Found2017/12/12(火) 22:36:46.52ID:???
>>217
> つまり関数へのメソッドの継承が実現できない

それはクラスベースでは当たり前にある機能で
プロトタイプベースはクラスベースと同じ機能が
なければないと思ってるからだよね?

つまりあんたはクラスベースとプロトタイプベースを
違うものだって考えられてないってこと

プロトタイプベースをクラスベースの書き方を変えただけと思ってるから
クラスベースと同じ機能がない=プロトタイプベースではない
という意味がわからないことになってるんだよ。

222Name_Not_Found2017/12/12(火) 22:39:48.00ID:???
ようするに「プロトタイプベースのオブジェクト指向」を
やるのであれば昔のJavaScriptでもそれは普通にできる

プロトタイプベースのオブジェクト指向で
クラスベースの真似事をしようとするから
機能が足りないって思ってしまう

プロトタイプベースでやるならば、
別に最初から機能は不足してない

223Name_Not_Found2017/12/12(火) 22:43:55.05ID:???
これも一応書いておくか
言いたいことはいろんな形のオブジェクト指向があるということ

https://codezine.jp/article/detail/3708
>  継承は決してオブジェクト指向の必須技術ではありませんが
> (実際、継承を持たないオブジェクト指向言語も存在しています)、

224Name_Not_Found2017/12/12(火) 22:56:59.96ID:???
>>222
完全にJS流クラスシステムに毒されてんな
自分はプロトタイプベースのメリットは最初から用意されているクラスシステムに縛られないことって言ったでしょ?
でも旧JSは半分、いや3/4くらい縛られてたわけよ
旧JSでプロトタイプベースっぽい、つまりクラスに縛られない固い言語でない特徴が現れていたのは
オブジェクトとプロパティのゆるさだけで、ここで問題にしている継承周りに関しては
他のクラスベース言語同様に縛られていたし、むしろクラスシステムがクソな分状況が酷かった
だからみんな旧クラスシステムの内部のプロトタイプ操作を利用する
『機能が十分なクラスシステム』をいろいろ考えてたわけじゃん
それでも関数のプロトタイプ設定はできないってことが長年の悩みだったわけだけどね

それと話を整理するけど
プロトタイプベースでも機能は足りるっていうのは話が食い違っている
よく考えてみて
それって、new演算子やprototypeプロパティを使えば、
プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ?

でもこちらはそもそもそのnew演算子やprototypeプロパティを使ったJS流旧クラスシステムの複雑さと
本来のプロトタイプベースでの継承実現の簡潔さを比較してるんだよ
話がおかしいよね?

あとそちらこそプロトタイプベースとクラスシステムの関係を分かっていないようだけど
プロトタイプベースでも、デフォルトのクラスシステムがあることとは矛盾しない
それに縛られないってことが重要だからね

225Name_Not_Found2017/12/12(火) 23:08:03.69ID:???
> それって、new演算子やprototypeプロパティを使えば、
> プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ?

いわんよ?
継承はオブジェクト指向に必須ではない。


new演算子やprototypeプロパティを使えば、
プロトタイプベースのオブジェクト指向が実現できる
それだけ

226Name_Not_Found2017/12/13(水) 12:54:32.31ID:???
分かった分かった、自分が悪かった
『継承』っていうのをクラスベース的な捉え方してクラス同士の話だけと思っている人がいるようだから話が食い違うんだな
自分が言っているのはプロトタイプ的継承だったり、もっと一般的な「継承」の話だから
例えば>>223でも引用されているWikipediaを見てくれ
https://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プロパティだって継承のための機能なんだよ
要するに継承が云々言ってきたのは、(ある程度構造化した状態で)プロトタイプチェーンを繋げるのは云々って話だから

227Name_Not_Found2017/12/13(水) 17:21:42.62ID:EPMhIZDs
テスト

228Name_Not_Found2017/12/13(水) 17:41:49.02ID:EPMhIZDs
スクリプト書こうとするとNGワードが出て書き込めない…
質問したいのに〜

229Name_Not_Found2017/12/13(水) 17:42:50.07ID: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]を書くと上書きされてしまいます。。
任意の配列に複数要素を追加する書き方をご教授願えませんでしょうか…?

230Name_Not_Found2017/12/13(水) 21:40:35.76ID:???
>>226
まだ話が食い違ってるな。

俺が最終的に言いたいことは、JavaScriptは昔からプロトタイプベースの
オブジェクト指向だってことだけだよ


で君がいいたいことはだいたい分かる。
それに対して反論するならば、

[君がいいたいこと] 昔のJavaScriptは継承がやりにくい

それは事実だろう。だがやりにくいからといってもできる以上
プロトタイプベースであることを否定することにはならない。
つまり継承がやりづらいプロトタイプベースのオブジェクト指向

[君がいいたいこと] 一般的な「継承」ができない(面倒)

大変でもできる。できるのだからオブジェクト指向と言える。
それにそもそも継承はオブジェクト指向の必須要件ですらない
だからプロトタイプベースのオブジェクト指向


わかる? 継承があってもなくても、面倒であってもそうでなくても
JavaScriptは昔からプロトタイプベースのオブジェクト指向なんだよ

231Name_Not_Found2017/12/13(水) 22:04:20.84ID:???
>>228
本当にNGワード?ブラウザで書き込めるんじゃない?って思わなくはないが、
jsfiddleあたりで動く最低限のサンプルコード書いてから質問すればいい

232Name_Not_Found2017/12/13(水) 22:04:39.62ID:???
あ、ごめん>>229を見てなかった

233Name_Not_Found2017/12/13(水) 22:49:20.89ID:???
あ、やっぱり動く最低限のサンプルコード書いてもらわないとダメだな
divがネストしてるのかどうかわからんから答えられん

234Name_Not_Found2017/12/13(水) 22:58:43.71ID:???
任意の配列とか言ってるのに、1以上から始まってるのが謎だし
じゃあ複数とはいくつまでなのかとか書いてないし情報が足りんだよ

まあ、情けでエスパーして(いつも通りjQueryで)書いてやったが
次はもれなく情報を書くか、jsfiddleにサンプル書くか、その両方をやってからレスしてくれ

https://jsfiddle.net/ft3aegkx/

235Name_Not_Found2017/12/13(水) 23:24:52.73ID:???
>>229
>上書き
上書きの意味がよくわからんが、
2回目の追加は、実際は1回目に追加した elmDiv の移動になった
ということか?

追加するたびに createElement(cloneNodeでもOK)で
新たに要素を作成しないとそうなる

236Name_Not_Found2017/12/14(木) 03:14:36.36ID:???
要素を2つ、追加したいのなら、

まず要素を2つ、作った(new した)かどうかを確かめる

237Name_Not_Found2017/12/15(金) 01:37:08.42ID:???
var aaa=undefined;
とのか変数にundefinedを入れるって文法的に正しいのでしょうか?
undefinedって変数未定義のときにwebコンソールとかで出ると
考えているため、変数に代入することはないと思ってんですけど
どうなのでしょうか?

238Name_Not_Found2017/12/15(金) 01:52:06.85ID:???
文法的には問題ない NaNとかと同じ
ただ変数に直接入れるような使い方が相応しい場面はかなり少ないと思う

239Name_Not_Found2017/12/15(金) 02:28:46.69ID:???
undefined は、JS の実行環境が使うもの

プログラマーが使うのは、null

240Name_Not_Found2017/12/16(土) 20:43:37.18ID:G0N7qOwo
すいません、正規表現について教えてください

メールアドレス判定の許可として下記条件にプラスして
/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/
空(何も無い)も許可として追加したいのですが
どのように書いたらよいでしょうか・・

241Name_Not_Found2017/12/16(土) 21:32:25.56ID:???
/^(^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$)?$/
出来なくもないけど非常に分かり辛い
文字列長0で分岐させたほうが良さそうな気がする

242Name_Not_Found2017/12/16(土) 22:03:00.98ID:???
>>240
正規表現をそのまま使うやつは馬鹿
名前をつけて使え

名前というのは関数名のことだ。

function is_email(email) {
 正規表現チェック
}

空を許可するんだろう?

function is_email(email) {
 emailが空なら return true
 正規表現チェック
}

こうすればよかろう

243Name_Not_Found2017/12/17(日) 03:05:23.03ID:???
>>241,>>242
ありがとこのやろう

244Name_Not_Found2017/12/17(日) 18:24:28.70ID:???
質問です

環境はvagrantでubuntu16.04を使用してます

vue-cliを使ってるんですけどnpm run buildしてlocalhost:8080にアクセスできません。
ポートフォワーディングは8080→8080で設定しています。

http_proxyも設定しています。

ローカルホストからアクセスする方法を教えてください

245Name_Not_Found2017/12/17(日) 22:08:55.18ID:???
>>244ですが、自己解決しました

246Name_Not_Found2017/12/20(水) 22:43:03.65ID: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');
}
);
});
});

247Name_Not_Found2017/12/20(水) 22:46:17.45ID:???
thisがbuttonじゃないから

248Name_Not_Found2017/12/20(水) 22:50:44.82ID:aEN4Dhcy
>>247
高速回答ありがとうございます!
もうちょっと考えてみます

249Name_Not_Found2017/12/20(水) 22:51:32.51ID:???
$(this).attr
でええやろ
dataはキャッシュかなんかですげー使いにくいぞ

250Name_Not_Found2017/12/20(水) 22:58:53.90ID:aEN4Dhcy
スコープの問題と分かりました
こういう場合はどう解決すればいいんでしょうか?
グローバル変数にする、DOMにclassをつける、などが思い浮かびましたが違う気がしてなりません
お助け下さい・・・

251Name_Not_Found2017/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');
   }
  );
 });
});

252Name_Not_Found2017/12/20(水) 23:18:10.18ID:???
答を書きはしたがな、これは、

253Name_Not_Found2017/12/20(水) 23:20:49.27ID:???
>>251
なるほどー!なるほど!ありがとうございます
jsって難しいですね

254Name_Not_Found2017/12/20(水) 23:45:36.06ID:???
idすげーな

255Name_Not_Found2017/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');
   }
  );
 });
});

256Name_Not_Found2017/12/21(木) 00:19:46.53ID:???
>>249
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で現在地を入れ込むという処理を割り込ませると考える

257Name_Not_Found2017/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だけで動くことを確認して、その続きで
処理を加えていくという作り方ができる

258Name_Not_Found2017/12/21(木) 07:48:48.11ID:???
現在地の取得はhttpsにしないとエラーが出るゾ
気づいたら昔作ったサービスが動いてなかったゾ

259Name_Not_Found2017/12/24(日) 14:53:18.88ID:???
http://www6.kaiho.mlit.go.jp/02kanku/aomori/tappisaki_lt/livecamera/index.html

ここのライブカメラを見ようとするとJAVAのセキュリティの警告とやらが出て表示されないんですが、
どうすれば見れる様になりますか?

260Name_Not_Found2017/12/24(日) 23:49:35.67ID:???
ここは、JavaScript のスレです

Java ではありませんので、スレ違い!

261Name_Not_Found2017/12/26(火) 05:01:29.75ID:???
動画サイトを見ていて、動画ページでコメントだけを見たいときとかに、ページを軽くしようとして

$("video").remove();
とか
$("video").parent().remove();
とかするのですが、これだと音声は再生されたままになってしまいます

コントローラーは消えるので音声を止められないし、ミュートだとちょっと重くなりそうなので
ムービー関係のもの全て消す方法ってないでしょうか?
例サイトはYouTubeです

262Name_Not_Found2017/12/26(火) 09:27:00.46ID:???
再生を止めればいいだけで消す必要なくない?

263Name_Not_Found2017/12/26(火) 13:35:26.16ID:???
>>261
pause() を使うとか、src属性を無効なURLに設定するとか

264Name_Not_Found2017/12/26(火) 18:42:35.36ID:???
>>261
for (var video of document.querySelectorAll('video')) {
video.pause();
video.parentNode.removeChild(video);
}

265Name_Not_Found2017/12/26(火) 18:48:41.82ID:???
>>262,264
再生を止めても、裏では動画や音声は読み込まれてるので、やっぱり結構CPUメモリ食べちゃうんですよね

>>263
無効なURLにするの良さげですね
ありがとうございます

266Name_Not_Found2017/12/26(火) 20:46:29.51ID:???
は?PentiumDでも使ってんの?

267Name_Not_Found2017/12/26(火) 21:33:20.14ID:???
まあ環境は人それぞれだから

268Name_Not_Found2017/12/26(火) 23:15:45.24ID:???
>>261
一時期軽くしたいと思っていたときは、
そういったものは原則OFFで、必要なときだけ再生するようにしていたな
昔はProximitronでHTMLを書き換えて実現していた、
比較的最近はブラウザの機能でFlashを自動的に再生しないようにしていた

もしかしたらブラウザに動画を自動的に再生しないような
設定があるんじゃないかな?
もし今の俺が同じことをやろうとしたら、ブラウザのプラグインである
TampermonkeyかStylishを使うかな? 実現できるか知らんけど

269Name_Not_Found2017/12/26(火) 23:27:25.73ID:???
おみとろん懐かしいな
今ならTampermonkeyだろうけど

本気でコメントだけ読みたいならapiを叩くという手もある

270Name_Not_Found2017/12/27(水) 17:13:45.73ID:???
EcmaScriptという言葉はES5あたりから良く聞くようになったと思いますが
それより前のES3相当のJavaScriptも、
EcmaScriptの標準を参照して作られていたのでしょうか?

271Name_Not_Found2017/12/27(水) 22:16:48.95ID:???
https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources
ECMAScript は JavaScript の基礎を成すスクリプト言語です。
ECMAScript は標準化団体 ECMA International によって ECMA-262 および
ECMA-402 specifications として標準化されています。
次のような ECMAScript 標準が承認済みおよび策定中です:

272Name_Not_Found2018/01/05(金) 15:14:20.79ID:???
ショッピングサイトにビットコイン決済を導入した際に、価格表記をビットコイン、マウスを重ねたら円表記が出るシステムを外注したいのですが、JavaScriptで大丈夫でしょうか?

273Name_Not_Found2018/01/05(金) 19:50:26.20ID:???
>>272
できるよ
マウスオーバーで表示変わるのはJavaScriptの得意とするところだから問題ない
単純なのならCSSでもできる
リアルタイムな相場の取得はAPIでできる
仮想通貨の各取引所がAPIを公開してるからそれ使えばいい
取引所によって取得の仕方や形式が違うからその辺は好みかな
ずっと提供されるかは保証ないからいくつかをフェイルオーバー的に作っておいた方がいい

274Name_Not_Found2018/01/05(金) 20:07:44.63ID:???
>>273
事細かにありがとうございます。
プログラミングの知識はないのですが、外注に当たって方向性だけでも確認したかったので助かりました

275Name_Not_Found2018/01/06(土) 00:41:01.92ID:???
HTMLは初級ぐらいでJavaScript(TypeScript)も普通ぐらいには使えるようになって、
Reactも使えるようになったのですが、目的のUI作れません。
WPF/UWPならXAMLとコントロール使って、AndroidならレイアウトファイルとViewコントロールを使って
複雑でないUIならとりあえず普通に作ってアプリ作れるんですが。
自分のレベルだとWebアプリだとかなり死ねます。

例えば、ちょっとこの項目を右寄せ表示するにしてもできねぇーとかのレベルです。

やっぱ、CSSを覚えるしかないのでしょうか??みなさんはバリバリCSS使いこなしてるんでしょうか??

276Name_Not_Found2018/01/06(土) 00:44:40.86ID:???
>>275の続きです。
例えば、Material UIなどReact用のコンポーネントはドキュメント見れば普通には使えるようになったんですが、
タブにアイコンつけたいとか、リスト表示でこの項目を右寄せしたいとか
Reactコンポーネントのプロパティに用意されてないことやると、
とたんにダメなレベルで、UIがつくれません。

277Name_Not_Found2018/01/06(土) 06:18:30.78ID:???
>>275-276
cssも覚えないと、結局細かい事は何も出来ない

>タブにアイコンつけたい
font-awesomeのver4を使う

>リスト表示でこの項目を右寄せ
text-align:right

278Name_Not_Found2018/01/06(土) 15:00:09.67ID:???
>>275
> やっぱ、CSSを覚えるしかないのでしょうか??みなさんはバリバリCSS使いこなしてるんでしょうか??

HTMLもCSSも使いこなしてるよ。というかJavaScriptだけでやろうとしたら破綻する
基本的にJavaScriptではデザインは作らない
JavaScriptでやるのは状態に応じてclassを設定するとかそういうことぐらい
そのclassに応じてどういう見た目にするかはすべてCSSで行う
そうしないと面倒なだけだから

逆にCSSを使いこなすと処理とデザインの責任範囲が明確になるから
コードはシンプルになるし、デザインの修正も簡単になる

279Name_Not_Found2018/01/06(土) 16:26:17.74ID:???
個人的には細かいこと気になるならCanvasの方がオススメ

280Name_Not_Found2018/01/06(土) 16:54:45.33ID:???
CSS勉強します(´・ω・`)

281Name_Not_Found2018/01/07(日) 12:45:39.51ID:PY90DREO
>>234
>>235
>>236


規制で書き込めなかったけど読ませていただきました。
無事解決しました!ありがとうございました(遅)

282Name_Not_Found2018/01/08(月) 14:31:08.81ID:nlt9GcxA
【大イスラエル帝国】「覚えておけ、我々は数百万人を殺した」 ((゜Д゜;;))) こんなのが直接来るのよ
https://rosie.5ch.net/test/read.cgi/liveplus/1515114599/l50

283Name_Not_Found2018/01/08(月) 14:39:06.71ID:???
「当方のエージェントは、追跡を避けるためメールアドレスを毎週変更している。

かあわいい

284じゃがりきん2018/01/11(木) 23:10:13.35ID:ZlMal6Wd
ついに宇宙一難解なパズルが完成しました・・

その名も
『宇宙一難解なパズルゲーム』!!
http://jagarikin.html.xdomain.jp/pzl.html

htmlでできてるのでブラウザから手軽に宇宙一難解なパズルをプレイできるよ〜

285Name_Not_Found2018/01/11(木) 23:52:10.05ID:???
5年ぶりに触り始めたんですけども、
var不要論ってなんすかね?

286Name_Not_Found2018/01/12(金) 06:53:35.21ID:???
let, constが使えるならvarで宣言する意味はない(少なくともletに置き換えて問題ない)
そして現状、メジャーな環境では使える
それならvarいらんよね、という主張かと

287Name_Not_Found2018/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のミステリーについて教えてください。

288Name_Not_Found2018/01/12(金) 21:07:47.77ID:???
>>287
> 関数を実行するだけ

ではない。
asyncFunction() は promise も返す。

2 つめの then は、その promise がresolveされたときに呼ばれることになる

289Name_Not_Found2018/01/12(金) 21:11:10.05ID:???
>>288
訂正
2 つめの then は、…

2 つめの then の中のfunctionは、 …

290Name_Not_Found2018/01/12(金) 21:26:37.01ID:???
>>289
ありがとうございます。

asyncFunction()
.then(function (value) {
console.log(value); // => 'Async Hello world'
asyncFunction()
}).then(function (value) {
console.log(value); // => 'Async Hello world'
})

この書き方では動かないのは、これではpromiseが返ってこないということです…かね?
説明が下手で本当に申し訳ないです。

291Name_Not_Found2018/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を作成することを繰り返してもいいが、
そうすると所謂コールバック地獄のようにネストが深くなってしまう
それを平坦化するためにこの機能がある

292Name_Not_Found2018/01/12(金) 23:00:30.24ID:???
2つめのthenで捕まえられるようにだろ。

293Name_Not_Found2018/01/12(金) 23:01:42.96ID:???
失礼、リロードしてなかった。

294Name_Not_Found2018/01/12(金) 23:12:06.81ID:???
>>290
Promiseをreturnするのが自然だけど
気持ち悪いなら別にこう書いたって良い
https://jsfiddle.net/4kks4bns/

295Name_Not_Found2018/01/12(金) 23:45:26.63ID:???
皆さん、ありがとうございました。
ようやく納得がいきました。

296Name_Not_Found2018/01/13(土) 00:15:17.83ID:???
この流れで理解できたのか・・・?
なんか質問者も回答者もずれまくってる気がするんだが

297Name_Not_Found2018/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;
 });

298Name_Not_Found2018/01/13(土) 00:37:04.30ID:???
>>297の例では、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に変えても
同じように動かすことができる。同期と非同期の違いを吸収していると考えることができる。

299Name_Not_Found2018/01/13(土) 00:45:35.15ID:???
>>287で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()された結果

300Name_Not_Found2018/01/13(土) 00:49:38.49ID:???
>>287

> 以前も別件でfoo.map( ( x ) => x*2 )を
> foo.map( ( x ) => { x*2 } )と書いてしまい、returnでハマりました。

これは単純な勘違いをしているだけ
{ } を省略したら return も省略できる
{ } で囲んだら return が必須
というだけの話

個人的にはアロー関数は、関数っぽく見えないのも利点の一つだと思ってるので
前者の書き方をおすすめする。 { } をつけて returnを書いて、ましてや { } の中に
複数の式や文を書くのはなんか違うと思ってる

301Name_Not_Found2018/01/13(土) 02:25:38.45ID:???
>>284
これ何に描画してんの?

302Name_Not_Found2018/01/13(土) 09:05:24.97ID:???
>>300
ありがとうございます。自分の納得は低レベルでした。
めちゃくちゃわかりやすかったです。精進します。

303Name_Not_Found2018/01/13(土) 20:09:36.72ID:???
>>300
お前それforEachさんの中でもおんなじこと言えんの?

304Name_Not_Found2018/01/13(土) 20:12:13.36ID:???
forEachとか使わないな。
普通はmapとか使う

305Name_Not_Found2018/01/13(土) 22:06:05.52ID:???
個人的にforEachは名前をforやeachにしなかったのが結構な失敗だと思ってる

306Name_Not_Found2018/01/13(土) 22:33:45.51ID:???
>>304
普通って何よ。お前の普通なんて知らんがな。
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);
});

307Name_Not_Found2018/01/13(土) 23:07:38.78ID:???
普通こうやるからなぁ

console.log(['foo', 'bar']);

308Name_Not_Found2018/01/13(土) 23:21:26.18ID:???
おじいちゃん、配列の要素をそれぞれログするのと配列をそのままログするのは違うでしょ。
前者は
foo
bar
後者は
[ 'foo', 'bar' ]
になるでしょ。
ロシアのえんぴつ的なことが言いたいならそもそもブラウザのデベロッパーツール使えばいいでしょ。
でもそういう話じゃないから。

309Name_Not_Found2018/01/13(土) 23:25:42.43ID:???
まあ普通にこうかくだろうな
何度もconst order = ・・・を実行するのは無駄だし

const order = ['小', '中', '大'];
const data = ['大', '小', '小', '中', '中', '大'];
data.sort((a, b) => order.indexOf(a) > order.indexOf(b));

310Name_Not_Found2018/01/13(土) 23:27:40.62ID:???
>>309
ごもっともな指摘。
もっとちゃんとした例考えないとな…

311Name_Not_Found2018/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));

312Name_Not_Found2018/01/14(日) 01:12:23.56ID:???
へぇー思想違うんだなぁ。
考えてみてもこの仕様で困る例が思い付かない。
素のsortでは表現できてlodashのsortByでは無理な比較仕様ってあるのかな

313Name_Not_Found2018/01/14(日) 01:35:02.67ID:???
思想? 違いがあるとしたら
まあ何かやりたいことがあって、それを実現するためには
どういうふうに処理したらいいか?と考える人と
やりたいことがそのままコードになってないと気がすまない人の違いかな

俺は「文字の小さい順に並び替えたい」と思ってるから
コードには「文字」「大小を求める」「並び替える」この3つぐらいしか
登場してほしくないんよ。人間の思考の通りのコードになって間違いが少なくなる

一方で、並び替えるには文字と文字をそれぞれ数値化したものを比較する関数を
ソート関数に渡せば実現できるという、やりたいことを処理に置き換えてからコードにするやつもいる
処理を考えてしまうから、こっちのやり方では冗長化してしまうんだよ。それが困ることだな

314Name_Not_Found2018/01/14(日) 09:38:18.99ID:???
>>313
あれは何に描画してんの?

315Name_Not_Found2018/01/14(日) 18:32:38.21ID:???
>>312
あり得そうな気がするが、相当なレアケースじゃないかな。事実上困らない

316Name_Not_Found2018/01/14(日) 18:37:15.54ID:???
複数の値で比較したい場合はどうすんの?

317Name_Not_Found2018/01/14(日) 23:29:09.25ID:???
>>316
こういうこと?

https://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]]

318Name_Not_Found2018/01/15(月) 06:30:58.52ID:???
ライブラリ使う必要ない場面で
ここでしか見ないナントカってのを執拗に勧めるやつまだいたのか
害悪だなぁ

319Name_Not_Found2018/01/15(月) 14:39:23.27ID:???
ここでライブラリを使うって事は間違ってないと思うよ
ただsortByっていう名前での
結局ライブラリを覚えないと自明ではない振る舞いは好きじゃないし
それがこの一時で便利だとは思わない

320Name_Not_Found2018/01/15(月) 15:17:45.29ID:???
さよかw

321Name_Not_Found2018/01/15(月) 23:13:05.92ID:???
>>319
sort by というのは例えばRuby標準にも有るしよく知られた単語なんだよ

プログラマにとって、for といえば ループねって
わかるように、sort by というだけで何をするのか知ってるもの

それに対して、オレオレライブラリで勝手な名前を作ると困る
それが何をするのかわからない

同じ覚えることでも、一般的なものを覚えるのと
プロジェクト固有のものを覚えるのとでは、覚える価値が違う

lodashはよく知られたアルゴリズムをよく知られた名前で実装してるので
覚える価値が高い。たとえ使わなくても知っておいたほうが良いものばかりだよ

322Name_Not_Found2018/01/16(火) 07:49:09.00ID:???
他の言語にあるって然程重要では無いと思うけどね
特に補完が弱い動的型付け言語のJSでは
いかに他のJS周りの標準と命名規則を揃えて
振る舞いや型を想像付かせるかが大事

JSにsortByのような文化は無いのだから
なんぼRubyやらにそれがあると言われても
多くのJSerはローダッシュのsortByと覚えることになるのよ

323Name_Not_Found2018/01/16(火) 14:05:09.25ID:???

324Name_Not_Found2018/01/16(火) 22:43:30.12ID:???
>>322
> JSにsortByのような文化は無いのだから

世界が狭いな。
あんたはJSの世界に生きてるわけか

俺はプログラマの世界に生きてるんだよ。
JSはそのプログラマの世界の一地域にすぎない

325Name_Not_Found2018/01/17(水) 08:43:29.78ID:???
俺様の世界w

326Name_Not_Found2018/01/17(水) 09:10:46.47ID:???
>>324
それは日本人に会った時世界の挨拶だからと言ってハグするようなもんだぞ

327Name_Not_Found2018/01/17(水) 22:13:04.85ID:???
>>326
それは的はずれだな。

今言ってる世界っていうのは、広さの話をしてる
JSの世界っていうのはプログラマの世界の一部

328Name_Not_Found2018/01/17(水) 22:58:51.39ID:???
プログラマの世界も狭くね?

329Name_Not_Found2018/01/17(水) 23:20:47.83ID:???
>>328
今は相対的な話をしているので、
プログラマの世界よりも○○の世界が広い言い方をしてくれない困る
そして○○が話と全く関係ない世界だとそれは意味がない

330Name_Not_Found2018/01/18(木) 02:32:12.39ID:???
JSerの価値観っていう話でさえ既に十分に大袈裟で広い話なのに
JS質問スレにプログラマの世界(しかも一部の>>324が好きな言語限定)とか持ち込まれてもな

331Name_Not_Found2018/01/18(木) 22:44:43.52ID:???
好きな言語限定?

いろんな言語の知識を持っていると
好きな言語以外の話も持ち込むよ?

本当にあんた世界が狭いねw

332Name_Not_Found2018/01/19(金) 19:22:45.51ID:???
すんごく初歩的なことで申し訳なさでいっぱいなんですが教えて下さい

clickイベントリスナをつけた<button>や<input>があって
これをdisabled="disabled"やelement.disabled = trueでdisabledにしたとき
<button>や<input>をclickしてもイベントは発火しない

これ合ってます?この挙動普通?

333Name_Not_Found2018/01/19(金) 20:01:38.96ID:???
>>331 見てて恥ずかしい奴だな もう口を開くな

334Name_Not_Found2018/01/19(金) 21:07:59.84ID:???
>>333
断るw いくらでも言うよ?見たくない、聞きたくないなら、
俺に何かをさせるんじゃなく、あんたが自分で行動しなきゃだめだよ

335Name_Not_Found2018/01/19(金) 21:40:56.60ID:???
自演しつけえ
お前が低レベルなことはみんなわかってるからw

336Name_Not_Found2018/01/19(金) 21:42:43.07ID:???
みんなって誰?
一人何役してるの?

337Name_Not_Found2018/01/19(金) 21:51:27.37ID:???
>>318-322,324-331,333,334,336
とりあえずこれ全部低レベルな1人の自演

338Name_Not_Found2018/01/19(金) 21:57:49.59ID:???
はい、はずれw

それはいいからどこが低レベルなのか
その理由を言ってみたら?
言えなきゃ言えないやつが低レベルってことだし

339Name_Not_Found2018/01/19(金) 22:25:39.03ID:???
>>337
君って俺様の世界なんだよねw

340Name_Not_Found2018/01/19(金) 22:37:48.12ID:???
なぜ自作自演だって見抜いただけで
俺様の世界ってことになるのか?

341Name_Not_Found2018/01/19(金) 23:24:00.06ID:???
ばれて必死になりすぎ

342Name_Not_Found2018/01/19(金) 23:26:25.72ID:???
>>340
自演なんだろ?お前の中ではな
って言えば理解できるかい?

343Name_Not_Found2018/01/20(土) 09:02:51.37ID:???
俺様の世界のグローバル化

344Name_Not_Found2018/01/20(土) 11:18:39.49ID:???
アジアではこういう考え方が主流なんだから狭い価値観に捕われるなって言うのと
その前にここは日本人による日本人のためのスレなんだから日本の考え方を深く学ぶべきって言うのと
アジア基準が常識とか中途半端で恣意的な価値観だなっていうヤジの3つに分けれてる

345Name_Not_Found2018/01/20(土) 11:48:39.11ID:???
質問スレなんだから質問とそれに対する回答だけでいいんだよ
考え方とかどうこうはいらない
自分の考え方と違うなら「こういうやり方もあるよ」と自分なりの答えを書けばいい
どれを採用するかは質問者の自由

346Name_Not_Found2018/01/20(土) 12:14:57.76ID:???
つまり自分なりの考えを書くんですね?

347Name_Not_Found2018/01/20(土) 12:32:06.88ID:???
「考え」は書くな
「答え」を書け
ただし質問に書いてもいないライブラリやフレームワーク持ち出すのはただのバカだからNGだろ

348Name_Not_Found2018/01/20(土) 12:53:03.62ID:???
書いてもいないライブラリやフレームワークが答えの場合だってあるだろ?

ってか答を知らないから質問する訳で
答を質問に書くわけがない

349Name_Not_Found2018/01/20(土) 14:03:12.49ID:???
お前らwshスレって落ちました?
質問しようとしたらスレッド一覧にない・・・

350Name_Not_Found2018/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).〜;
}
}

より簡単な書き方教えてください。

351Name_Not_Found2018/01/21(日) 10:23:17.94ID:???
そもそもfunc(A);func(B);で良くねとは思うけど

function func(...args) {
for (let arg of args) {
// $('#hoge-' + arg).〜;
// $('#hage-' + arg).〜;
}
}

352Name_Not_Found2018/01/21(日) 12:37:55.62ID:???
> 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類(のみ)。
> (A, B)の場合は共に実行。

その(A, B)をやめろって話だな

353Name_Not_Found2018/01/21(日) 17:21:55.95ID:???
>(A, B)をやめろ

そうなのですが、すると
yobidasi(A);
yobidasi(B);
となり、yobidasiの類は20種類あるので40行になってしまいまして。

354Name_Not_Found2018/01/21(日) 17:38:24.17ID:???
yobidasi(A), yobidasi(B);
で良いじゃん

355Name_Not_Found2018/01/21(日) 20:35:03.46ID:???
>>351
forループはオブジェクトのみ推奨って先生が言ってなかったっけ?

356Name_Not_Found2018/01/21(日) 22:28:35.52ID:???
いいんだよ、俺様の世界なんだから

357Name_Not_Found2018/01/21(日) 22:40:32.35ID:???
>>355
その「先生」は担任の先生って言う意味で素人だろw

358Name_Not_Found2018/01/21(日) 23:13:52.24ID:???
>>357
google先生だろ
SEO少しでもかじったのならすぐピンとくる

359Name_Not_Found2018/01/21(日) 23:15:40.97ID:???
>>358
オマエ馬鹿だろ JavaScriptって知ってるか?

360Name_Not_Found2018/01/21(日) 23:32:03.53ID:???
まさかSEOとjsが関係ないとでも

361Name_Not_Found2018/01/21(日) 23:39:42.75ID:???
> forループはオブジェクトのみ推奨って先生が言ってなかったっけ?

これがSEOと関係があるとでも?
ないない

362Name_Not_Found2018/01/22(月) 00:04:07.14ID:???
Objectのみ推奨ってのはfor-inのことだろ

363Name_Not_Found2018/01/22(月) 00:22:17.35ID:???
SEO関係あるもん!

364Name_Not_Found2018/01/22(月) 10:08:34.84ID:???
>>353
>>351でもいいけど、
とにかく君に一番必要なことは配列を覚えることだな

365Name_Not_Found2018/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です のように出来るとありがたいです。

366Name_Not_Found2018/01/22(月) 18:23:42.71ID: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

とコンソールにエラーがでます

367Name_Not_Found2018/01/22(月) 18:43:34.12ID:???
>>359が何言いたいのかわからん

368Name_Not_Found2018/01/22(月) 19:12:58.02ID:???
配列はfor かfor of
for in はオブジェクとって本に書いてた

369Name_Not_Found2018/01/22(月) 19:53:51.03ID:???
>>364
配列でもあんま変わらなくね?

370Name_Not_Found2018/01/22(月) 20:04:42.30ID:RO0qKM/0
>>365
自分も初心者だとことわっておくけど
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'))

371Name_Not_Found2018/01/22(月) 20:08:18.30ID:RO0qKM/0
中身の追加 はaddじゃなくてsetだった
mail.set('name3','address3')

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype

372Name_Not_Found2018/01/22(月) 20:28:08.39ID:RO0qKM/0
>>366
自己解決しました
formエレメントの要素オブジェクトにsubmitをつけるんですね

373Name_Not_Found2018/01/22(月) 21:40:41.15ID:???
>>365
Object.keys(accounts)でキーの配列を取得できる
総数が欲しいならObject.keys(accounts).length
ES2017からはObject.entries(accounts)が理想的

ただし順序は保証されない
可能ならオブジェクトは避けるべき

374Name_Not_Found2018/01/22(月) 22:18:37.71ID:???
>>370,373
ありがとうございます!
一歩先にすすめそうです

375Name_Not_Found2018/01/22(月) 23:43:57.35ID: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ではとりだせないのですが

376Name_Not_Found2018/01/22(月) 23:59:04.35ID:???
>>375
そりゃあるだろうけど、それってangularだよな?
angularのやり方でやれば良いんじゃないの?

まあ俺はそのやり方を忘れたけどなw
アレだろ?jsの変数にバインドされてるってやつ

377Name_Not_Found2018/01/23(火) 00:03:29.33ID:WLPFoLKy
>>376
angularってやつなのですか。
聞いたことはありますが全く知らないです。
勉強しないといけないことおおすぎる。。。

378Name_Not_Found2018/01/23(火) 00:43:41.02ID:WLPFoLKy
obj.getAttribute('qa-value')でとれました!!!!
感動!!!

379Name_Not_Found2018/01/23(火) 00:48:19.81ID:???
とれるっていうのならそうなんだろうけどさ
angularのやり方じゃねーぞ?
それで良いのか悪いのか知らんけどさ
普通は正しくないやり方だろうな

380Name_Not_Found2018/01/23(火) 15:14:35.38ID:???
勝手なやり方をしたら、ダメ!
フレームワークのやり方に従っていないのなら、誤動作を起こす

Angular を勉強すべし

381Name_Not_Found2018/01/23(火) 20:05:46.77ID:???
>>364
最初配列でやってたのですがA,値,B,値という形もあり、
また通しで見てるとABの方がどっち渡してるか一目でわかりやすいので変えました。
どうもでした。

382Name_Not_Found2018/01/24(水) 01:04:14.72ID:UdszAn8A
>>380
jQueryもやりたいんだけど
AngularとjQueryどっちをさきにやればいい?

383Name_Not_Found2018/01/24(水) 02:08:15.18ID:???
何を目指すかによる
JavaScript必須なページを作りたいならAngular

384Name_Not_Found2018/01/24(水) 08:55:26.78ID:UdszAn8A
今一番やりたいのはスクレイピングで
次にデータ可視化なんで
サイトの仕組みの理解とスクレイピングのスクリプトかくためにJavaScriptの勉強初めたんだけど
jQuery使ってるサイトが多いのであとでjQueryもやろうとおもってたけど

JavaScriptの勉強一通りおわったら
Angurlarやってみることにしました
そのあとD3やるかな
ほんでひつようそうだったらjQueryやるかな
やることおおすぎ。。。

385Name_Not_Found2018/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スイッチを使った場合はグループ化を使えないのでしょうか?
こういう場合どうするのがいいのでしょうか?

386Name_Not_Found2018/01/24(水) 23:14:33.52ID:???
スクレイピングなら、Angular なんて関係ない。
君が、たまたま、Angular製のページを対象にしただけだろ

JavaScript なら、jQuery は必須

Ruby で、Nokogiri とか、

Selenium WebDriver, PhantomJS とか、
Chromium, Chrome のヘッドレスモードとか

387Name_Not_Found2018/01/24(水) 23:22:55.14ID:???
>>385
グループ化した部分ってどこ?
グループ化って何のこと?

388Name_Not_Found2018/01/24(水) 23:24:07.94ID:???
>>385
jQuery を使え

$('tag').text();

389Name_Not_Found2018/01/24(水) 23:25:21.67ID:???
>>387
(.*?)のことです
正規表現において一般的な用語だと思いますが

390Name_Not_Found2018/01/24(水) 23:37:05.77ID:???
結局、jQuery でも、Ruby のNokogiri でも、
取得する要素を、CSS セレクターで指定するのは同じ

上はjQuery、下はNokogiri

$('tag').text();
doc.css('tag').text

xpath で指定するのではなく、CSSセレクターの方が、簡単に指定できる

391Name_Not_Found2018/01/24(水) 23:49:50.17ID:???
正規表現では、データに親子関係のような構造があるものは、うまく取れない

<tag1><tag2></tag2></tag1>

このように要素がネストしていると、<tag1></tag2> が対応してしまうから

jQuery とか、Ruby のNokogiri で、
取得する要素を、CSS セレクターで指定する

3923872018/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);

入れ子は考慮せず
そこまでやると複雑すぎてどうにもならない

3933922018/01/25(木) 00:07:22.24ID:???
>>392
while(s)
じゃなくて、
while(regex.test(s))
のほうがいいかも

DOM(jQueryでもできるはず)で、

let div = document.createElement('div');
div.innerHTML = s;
let elements = div.querySelectorAll('tag');
// で、各elementsのtextContentを取得

というのもありかと
タグの入れ子は考慮せず

394Name_Not_Found2018/01/25(木) 01:19:36.76ID:???
https://qiita.com/honeydaisuki/items/d2a38cef1b95fd347fa4
これ?
最短マッチと最長マッチ

395Name_Not_Found2018/01/25(木) 06:23:05.64ID:???
String.matchで正規表現にgオプションをつけるとキャプチャが取れるのかどうかの話で答えは上の通り「取れない」
RegExp.execを(複数回)使うか正規表現をやめてHTMLパーサを使うかだが正直後者を推奨する

396Name_Not_Found2018/01/25(木) 09:05:37.30ID:???
var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
根本的に参照が間違っている

397Name_Not_Found2018/01/25(木) 10:29:09.69ID:???
HTMLタグならHTMLパーサーやXMLパーサーが使えるけど
正規表現はセパレーターがタグ(<>記号で囲まれた文字列)でない場合でも使える

398Name_Not_Found2018/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()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

399Name_Not_Found2018/01/26(金) 01:32:12.62ID:???
jsで初めてプロトタイプベースに触れたけど、最初クラスベースとの違いに混乱して悪態ついたりしたけど今じゃクラスベースより好きだわ。
js以外クラスベースが主流なのは大規模設計手法が確立されてるというエンタープライズ用途のためってことかな?
それにしてもプロトタイプベースのメジャー言語なさすぎじゃ…

400Name_Not_Found2018/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"]

401Name_Not_Found2018/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"]

402Name_Not_Found2018/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"]

403Name_Not_Found2018/01/26(金) 02:29:08.11ID:???
クラスベース言語が多いのは皆C++に影響を受けているから
多くの言語は別に人間工学的や信念として選んでいるのではなく揃えるのが無難だからそうしているだけ
C++がクラスベースなのはCの構造体からの自然な発想
CにOOPを組み込むに当たって当然プロトタイプベース的な方向にはなり得ない

JSがプロトタイプベースなのはクラスベースのインタプリタエンジンは実装も大変で
生半可なものではシンプルなプロトタイプベースに比べて性能を出すのが難しいという事実があるから
また、スクリプト言語としてはクラスに縛られるというのは不便となることも多い

クラスかプロトタイプかと言うよりはクラスベースを選んだか、選ばなかったかという違い

404Name_Not_Found2018/01/26(金) 02:57:54.16ID:???
よっしゃジャバスクリプトの勉強始めるで!
お前らよろしく!!!!!!!!!!!

405Name_Not_Found2018/01/26(金) 09:55:40.02ID:???
プロトタイプベースは型システムとの相性が良くない, 気がする

406Name_Not_Found2018/01/26(金) 10:32:36.63ID:???
htmlをStringで参照していることが笑えるw

407Name_Not_Found2018/01/26(金) 13:42:13.67ID:???
独学で参考書をペン片手に読んでる。今2冊目。
読み終えたところまでのコード解読はいける。
まだまだ何もできないけど
まずは基礎知識の積み重ねが大事だなと深く感じてる

408Name_Not_Found2018/01/26(金) 14:52:29.75ID:???
ペン片手は駄目 キーボード片手でないと
とにかくサンプルを試して、自分で改変して仕組みを学び
分からない所は調べてそのうち1%でも理解したような気になるようにする
本はあくまで導入と思うこと

409Name_Not_Found2018/01/26(金) 17:20:08.99ID:???
いいえ、自分にあったやり方を見つけているのでこの順番が自分にとって最善。

410Name_Not_Found2018/01/26(金) 20:02:12.46ID:???
なんで何もできない段階でそれが最善だと分かるのか謎だなぁ。
>>408もいいアドバイスだと思うんだが。
もちろん本でしっかり知識積み重ねるのも大事だとも思うよ。
しかしそもそもどういう意図で>>407書き込んだんだ?
エライエライ頑張れして欲しかったのかな?

411Name_Not_Found2018/01/26(金) 21:10:49.59ID:???
>>408はごく普通な方法だな。誰でもいえる事。

412Name_Not_Found2018/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"]

413Name_Not_Found2018/01/27(土) 01:31:35.31ID:+mZ3NtMu
やり方なんて自分が一番吸収しやすい方法をみつければいいんだよ
こればかりは人によって違うもの。

414Name_Not_Found2018/01/27(土) 01:51:37.67ID:???
まだまだ何もできないのにどうしてそれが最善なの?
その人の最善の方法見つけるには他の方法も試さなきゃダメでは?
合理化とか埋没費用の誤謬とかで既に時間かけた方法に固執してるだけでは?

415Name_Not_Found2018/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ね念のため。

416Name_Not_Found2018/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を使ったほうが僅かに短いよ

417Name_Not_Found2018/01/27(土) 03:08:14.13ID:???
ほんまや!

速度はどんなもんかperformance.now()で測ってみたけど長さ10のランダム文字列をtagでくくったものを1000個連結したもので確認した限り3つとも5ms前後で目立った差なかったわ。
もっと大きくなると差もあるかも知れないけど実用上はどれも問題ないね。

418Name_Not_Found2018/01/27(土) 09:01:48.16ID:???
また俺様の世界を語ってるのw

419Name_Not_Found2018/01/27(土) 09:12:05.42ID:???
>>418
おまえも語って良いんやで?

420Name_Not_Found2018/01/27(土) 16:25:13.08ID:+mZ3NtMu
>>414
試した上で書いてるのでは。

421Name_Not_Found2018/01/28(日) 04:41:23.29ID:???
その人の最適な方法とかいう魔法みたいなものはない
人間の脳はニューラルネットと同じなんだから
Web技術の情報、特に本の内容は糞な場合が多いという事実がある以上
沢山の検索と試行錯誤をして知識を積み重ねていって形にする以外はない
ブロックを積み上げるように体系的に学ぶのは無理
薄い絵の具を塗り重ねて絵を浮かび上がらせる感じしか無い

422Name_Not_Found2018/01/28(日) 04:46:06.46ID:???
>>421
お前Changelogに○○を最適化しましてって
書いてあったら、それは最適な方法じゃないって
いちいちツッコむのか?

423Name_Not_Found2018/01/28(日) 04:57:00.46ID:???
その最適化は恐らくoptimizationの訳語としての用法だから最善の方法を見つけ出しそして実装した!という意味ではないだろう。
virtual→仮想と並ぶ近代クソ訳語のひとつ。

424Name_Not_Found2018/01/28(日) 18:13:39.13ID:zZNs90iR
他者を認められない受け入れられないというのも
自分の、個人の考え方やり方なんだよね

425Name_Not_Found2018/01/28(日) 20:11:26.66ID:ZkfV466A
【ほら吹きマネク】マイトLーヤ「太陽凝視は危険」
http://matsuri.5ch.net/test/read.cgi/esp/1517129538/l50

426Name_Not_Found2018/01/29(月) 01:29:43.15ID:???
>>424
初心者と今活躍してる業界人とじゃけして平等ではないからな
色んな人に教えて自身でも色々失敗してきた経験を元に
無駄をしないようアドバイスしてるのであってそういうのは素直に聞くべき

427Name_Not_Found2018/01/29(月) 08:15:52.37ID:r/D88pTD
onclick="javascript:ac_tracer(

って何でしょうか?ボタン画像を挟む<a>タグ内にあります。

428Name_Not_Found2018/01/29(月) 09:15:51.45ID:???
イベントハンドラの設定方法のひとつです。
今回の場合onclickなのでクリックイベントのハンドラ。
クリックするとそこに書かれたJavaScriptコードが実行されます。

4294272018/01/29(月) 10:53:12.05ID:MncMfLpu
ありがとうございます。
このac_tracerというのは何でしょう?

430Name_Not_Found2018/01/29(月) 10:55:50.48ID:???
さあ?

431Name_Not_Found2018/01/29(月) 11:52:50.50ID:???
>>429
ブラウザの検証機能でコードを見るのが早い

432Name_Not_Found2018/01/29(月) 11:54:02.20ID:???
極悪onclick

433Name_Not_Found2018/01/29(月) 12:19:15.81ID:???
>>429
昔昔あるところに太郎という人が居ました
この太郎というのは何でしょう?

434Name_Not_Found2018/01/29(月) 12:50:41.45ID:???
>>429
銭湯に行ったらオッサンが湯につかっていました。このオッサンは何でしょう?

435Name_Not_Found2018/01/29(月) 13:12:25.96ID:???
あるところにおじいさんとおばあさんがいました。
さて私は誰でしょう?

436Name_Not_Found2018/01/29(月) 13:29:23.97ID:???
>>429
関数です。
ただし、ac_tracerという名前の関数はJavascriptに元々用意されているものでも、web開発者が利用するDOM APIのものでもないため、ユーザー定義関数、つまり誰かが何かの目的のために作った関数です。
つまり、作った人に聞くか、ac_tracerの定義部分を含むコードを読まなければ、この関数が何なのかエスパーを除き誰にも分かりません。

437Name_Not_Found2018/01/29(月) 13:54:25.86ID:???
長いキッスの途中で

438Name_Not_Found2018/01/29(月) 15:44:45.33ID:???
Fu Fu さりげなく

439Name_Not_Found2018/01/29(月) 16:44:00.27ID:???
首狩り族を倒した

440Name_Not_Found2018/01/30(火) 00:37:08.63ID:???
>>433
> この太郎というのは何でしょう?
人の名前では?

441Name_Not_Found2018/01/30(火) 00:38:26.46ID:???
>>440
そうだねイベントハンドラの設定方法のひとつだね

442Name_Not_Found2018/01/30(火) 00:44:51.93ID:???
>>435
> あるところにおじいさんとおばあさんがいました。
> さて私は誰でしょう?

そんなことよりよ、桃太郎の
おじいさんとおばあさん、子供がいないらしいぜ?

ってことは、おじいさんとおばあさんじゃないよな?
子供ができたら、やっとおとうさんとおかあさんになるはずだ
孫も子供もいないのにおじいさんとおばあさんというのはおかしすぎる

っていうか、子供いないのに孫を養子に取ることってできるのかよ?
孫悟空の孫じゃないぞ。子供の子供という意味の孫だ

443Name_Not_Found2018/01/30(火) 02:07:29.66ID:???
歳的な意味での爺婆だし
子供と言っても当然手続きもして無かろうし家系図にも組み込まれてないだろうし
桃太郎から見たらお父さんお母さんでも
全く関係ない第三者が伝聞として話したり聞く際にはふさわしくないと思う

444Name_Not_Found2018/01/30(火) 04:58:54.24ID:???
>>442
でもお前甥も姪もいないのにおじさんじゃん。

445Name_Not_Found2018/01/30(火) 15:13:26.78ID:???
>>442
【お祖父さん】 祖父(そふ)の敬称。
【お爺さん】 男の老人の敬称、また親しんで言う語。

446Name_Not_Found2018/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利用

4474462018/02/01(木) 09:12:03.27ID:???
ごめん完全に気のせいだった

448Name_Not_Found2018/02/01(木) 12:01:57.89ID:???
http://sdsoffice.com/tools/homepage-patrol-v2b.html
上記サイトのwebサイトを巡回してくれるJavaScriptを利用をしようと思います。

windows8.1(64bit) + IE11の環境で、上記サイト上で実行させるには問題ないのですが、
htmlファイルとしてローカルに保存して、ローカルで実行するとエラーとなります。
(巡回してくれない)

windows7(64bit) + IE11の環境でしたら、ローカルでも問題なく動きます。

windows8.1でエラーになる原因がわかりません。
お詳しい方、力になっていただけないでしょうか?
よろしくお願いいたします。

449Name_Not_Found2018/02/01(木) 22:16:16.86ID:Es0XuYnt
別フレームに指定の複数のページをランダム時間(何分から何分の間ランダム)で表示する。

の参考資料とかありませんか?
十数年前「html」だったのか「javascript」か覚えていないけど
色んな例を組み合わせて作って偶然動いたことがあったのでどこかに保存しておいたんだけどなくなってしまったので・・・
よかったら教えてください。

450Name_Not_Found2018/02/01(木) 22:38:53.38ID:???
>>448
そもそも普通は、crossOrigin (CORS)アクセス禁止だろ

自分のPC 上の、HTML ファイルから、他のドメインにアクセスできないだろ。
iframe 内に、他のドメインのページを読み込んでも、
iframeの内外で、異なるサイトになるから、アクセスできない

自分のPC で、サーバーを立てて、それを経由しないとアクセスできない。
または、ネット上のそういうサーバーを利用するとか

以前使えていた、Yahoo Query Language (YQL) も、使えなくなった

451Name_Not_Found2018/02/01(木) 22:41:17.04ID:???
aからbまでの間でランダムは
a+(0からb-a)までランダムと表せられる
つまりa+Math.random()*(b-a)となる

452Name_Not_Found2018/02/01(木) 22:42:29.86ID:???
>>449
「iframe ランダム表示」で検索!

iframe 内に、他のドメインのページを、ランダムに読み込む

453Name_Not_Found2018/02/02(金) 00:10:56.52ID:???
あるある質問かもしれませんが
Javascriptのソースコードからコメントをすべて除去するツールなり方法ってどんなものがあるでしょうか?
単独のフリーソフトでも良いですし
atomのbeautify等、構文解析するプラグイン等にオマケでついていてもおかしくないと思うのですが
windows7を使っています

454Name_Not_Found2018/02/02(金) 00:28:03.36ID:???
<iframe src="#" id="ifrm"></iframe>

<script type="text/javascript">
window.onload = function(){

var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://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>タグの中に書いて実行すれば、毎回違うサイトが読み込まれる

455Name_Not_Found2018/02/02(金) 00:46:27.79ID:???
>>449
「jquery plugin カルーセル」で検索!

jQuery Plugin を探す方が、簡単かも

456Name_Not_Found2018/02/02(金) 00:54:55.79ID:???
>>453
「javascript コメント 削除 ツール」で検索!

457Name_Not_Found2018/02/02(金) 02:38:55.11ID:???
>>456
ありがとうお陰でbeautifierの反対語にminifierという言葉があることを知ってatom minifierを入れて解決しました

4584542018/02/02(金) 04:53:16.01ID:???
>>449
454 を修正した。
ランダム時間は難しくてできない。一定時間ならできる

以下を、<body>タグの中に書いて実行すれば、5秒毎に、違うサイトが読み込まれる。
タイマーを止めるには、clearInterval を使う

<iframe src="#" id="ifrm"></iframe>

<script type="text/javascript">
window.onload = function(){

var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://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>

4594542018/02/02(金) 07:06:29.03ID:???
458 を修正した

setTimeout() で、最初から表示する。
その後、setInterval() で、一定時間ごとに表示する

<iframe src="#" id="ifrm"></iframe>

<script type="text/javascript">
window.onload = function(){

var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://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>

460Name_Not_Found2018/02/02(金) 07:23:25.57ID:???
自ら学ぶ人とは回答者の事だったのか

461Name_Not_Found2018/02/02(金) 12:37:30.47ID:???
>>459
setInterval使わずにsetExternalWebsiteの最後で毎回setTimeoutすればいいだけやで

462Name_Not_Found2018/02/02(金) 12:43:41.74ID:???
問題にはならんと思うんだけどどんどん再起が深くなっていくのが気持ち悪い

463Name_Not_Found2018/02/02(金) 12:44:46.38ID:???
>>461
それってスタックオーバーフローしないの?

464Name_Not_Found2018/02/02(金) 13:12:21.97ID:???
スタックは積まれない

465Name_Not_Found2018/02/02(金) 15:06:20.75ID:???
>>464
積まれないんすね、ありがとうございます
関数ポインタみたいなのがどんどん積まれていくのかと思った

466Name_Not_Found2018/02/02(金) 17:41:52.25ID:hJ9iJ7qw
>>452 >>445 >>454 (459)
丁寧に教えてもらってありがとうございます。すごく参考になりました。

ランダム時間なのですがsetIntervalを使っていたの思い出しました。

{
var min = 5000 ;
var max = 10000 ;

setInterval("hyoji()",(max + 1 - min))+ min;
}

としました。

やってないと忘れるものですみませんでした。

467Name_Not_Found2018/02/02(金) 19:01:30.35ID:???
webpackやgulpについて質問したいのですが、その類のスレッドってありますかね??。
なければここで質問してもよろしいでしょうか?

468Name_Not_Found2018/02/02(金) 22:10:29.45ID:???
function(t, i) {
t.target = i, e.apply(this, arguments)
}
こういう構文があったんですが
「 t.target = i;
e.apply(this, arguments);

つまりこういう構文を略して書く書き方って認識であってますか?

4694542018/02/02(金) 23:46:50.02ID:???
>>461-465
1. function f() { setTimeout(f, 5000); }
2. setTimeout(f, 5000);

まず、2の実行では、setTimeout()は実行されるけど、f()はまだ実行されない。
つまり、キューに、fが積まれるだけ

次に5秒後、キューからfが削除されて、1が実行される。
その時に、setTimeout()で、またキューに、fが積まれる

つまり、キューには常に、fが1個しか積まれていない

>>468
わかりにくいから、そんなカンマの使い方をしない方が良い。
勘違い・バグを誘発する

普通に、; で文を区切るべき

470Name_Not_Found2018/02/03(土) 01:26:18.14ID:PujzEQQR
>>469
認識があってるか確認してんだよボケ

471Name_Not_Found2018/02/03(土) 02:24:56.13ID:???
>>467
いいよ。他に該当のスレなんて有るわけないし

472Name_Not_Found2018/02/03(土) 06:33:39.21ID:???
>>450
ありがとうございました。
ローカルファイルで他サイトの呼び出しの規制に引っかかっているわけですね。
今回の案件だけ個別に許可はできないものでしょうか?(ブラウザのセキュリティ上難しい?)

473Name_Not_Found2018/02/03(土) 07:05:49.60ID:???
>>472
ブラウザじゃなくてサーバー側のセキュリティな

474Name_Not_Found2018/02/03(土) 12:01:19.79ID:???
制限をかけてるのがブラウザで
サーバはブラウザがかけてる制限を任意に解除できるだけじゃないのか
違いは無設定の鯖に対してどういう挙動になるか

というか>>448はCORS関係なんか?
みたところ子ウィンドウを開いて、子のlocation.hrefで移動させてるだけ
IE自身のセキュリティ設定、イントラネットのセキュリティポリシーな気がするんだが

475Name_Not_Found2018/02/03(土) 12:08:23.84ID:???
グローバル変数を1つ宣言するのと
関数を1つ宣言するのとでは
グローバルの汚染度は変わらないですよね?

476Name_Not_Found2018/02/03(土) 12:40:30.96ID:???
>>475
変わる

477Name_Not_Found2018/02/03(土) 12:43:46.29ID:???
>>475
変数というのは「変えられる値」関数というのは、変えられない。

(まあ正確に言えば、JavaScriptでは関数もオブジェクトなので変えようと思えば変えられるが、
普通そういう使い方はしないしそういう使い方はグローバル変数と同様になってしまうから
ダメなやり方であるという考え方をする)

グローバル汚染というのは、値がどこから書き換えられるかわからないから問題なので、
グローバル変数はアウトだが、グローバル関数(グローバルクラス含む)は問題ない

478Name_Not_Found2018/02/03(土) 12:56:39.57ID:???
>>476-477
無名関数を使うとかなら、変わると言われても納得なんですけど

function ffff(){}と定義するのとvar ffff = function(){}と定義するのでは変わらないし
どちらの場合も変数名ffffに対する文字列値の再代入も関数再定義も特別の構文なしにできてしまうし
同じ名前の関数宣言があってもエラーも何も出ないのを考えると
宣言時には入れ物はどちらも変数であって(というかポインタと考えたほうが)
中身が、関数か、文字列や数値や配列やオブジェクトか、の違いでしかない、という風に思うんです

そうなると、1個グローバル変数を使うのと1個グローバル関数を使うのとでは、もはや変わりが無いように思うんですが

479Name_Not_Found2018/02/03(土) 13:08:32.34ID:???
ニュアンス的には幾らかの違いがあるけど、汚染度と言う視点だと無いよ
つか、関数もオブジェクトだから変えられるという言い用はJSer失格

480Name_Not_Found2018/02/03(土) 13:13:24.91ID:???
だからnamespace的に1つのオブジェクトに全部押し込めて汚染度下げたりしてたわけですし

481Name_Not_Found2018/02/03(土) 13:13:46.96ID:???
関数は関数だもんな

482Name_Not_Found2018/02/04(日) 13:01:29.10ID:???
>>471
ではこちらで質問させていただきます。
gulpであればgulp-uglifyを、webpackであればUglifyJsPluginを使って
minify化しようと思うのですが、どちらもjsに記述している変数名がiやfに変わってしまいます。
どちらのnpmもオプションに変数名が変わらない様な設定があるかと思ったのですが無いようでした。

変数名が変わるのは困るので、ただ単に改行、コメント削除、空白削除をしたいのですが、何か方法はありますでしょうか。

483Name_Not_Found2018/02/04(日) 13:04:16.82ID:???
変数名が変わって困るのがそもそもおかしい

484Name_Not_Found2018/02/04(日) 14:12:57.48ID:???
>>483
HTMLに直接変数名が書いてあり、その変数を外部jsファイルで使用する時に使えなくなると思ったのですが。
ということは、そもそもjsの書き方がおかしいということでしょうか?
例を出せと言われてもすぐには出せませんが・・・・

485Name_Not_Found2018/02/04(日) 14:26:32.98ID:???
> HTMLに直接変数名が書いてあり
そんなことはしない。HTMLにJavaScriptの変数は出てこない

486Name_Not_Found2018/02/04(日) 19:14:59.77ID:???
uglify=難読化、minify=軽量化、全然別だ
uglifyやってんなら、そりゃそうなる

487Name_Not_Found2018/02/04(日) 19:24:47.55ID:???
ところでnpmに gulp-minify (-cssや-htmlがつかない)があって
minify()で普通に無駄な空白類やコメントの削除してくれるらしいが

488Name_Not_Found2018/02/04(日) 20:11:37.39ID:Z2Ku3KdF
>>482
uglify-js@3だが、mangleオプションにreservedをつければいいんじゃない?

489Name_Not_Found2018/02/04(日) 20:12:55.29ID:Z2Ku3KdF
あ、すべての変数名を変えたくないのか
magleオプションをなくすような設定ができるのかね

490Name_Not_Found2018/02/04(日) 21:22:12.95ID:???
gulp-uglifyは詳しくないけど、
サードパーティー製のライブラリで使用しているグローバル変数(いわゆるネームスペース)を
スクリプト内で参照している場合に、その変数名をminifyしない設定があるのでは?

491Name_Not_Found2018/02/04(日) 22:44:24.61ID:???
>>485
多分私の説明が下手でうまく伝わっていない気がするのでちょっと考え直して
再度ご質問します。ありがとうございました。

>>486
その違いが知りませんでした。
勉強になります。ありがとうございます。

>>487
gulp-minifyですか。ちょっと試してみます。

>>489
uglify-jsも知りませんでした。
これも検証してみます。

>>490
ごめんなさい。話に追いついていけません。。。

492Name_Not_Found2018/02/04(日) 23:36:42.46ID:Z2Ku3KdF
https://github.com/webpack-contrib/uglifyjs-webpack-plugin
これのことだよね
ならmangleオプションが指定できるから
falseにしてみたらいいんじゃないかな

493Name_Not_Found2018/02/05(月) 00:36:25.08ID:???
>>491
だからHTMLに直接変数名を書くことが
間違いだって話だよ

他のやつもやる必要のないことを書くな

494Name_Not_Found2018/02/05(月) 01:08:14.66ID:???
そんなの環境とコーディング規約次第だろ

495Name_Not_Found2018/02/05(月) 01:09:29.45ID:???
>>494
その理屈だと、腐った環境やクソなコーディング規約に
したがって開発しろって言ってるように見えるが?

496Name_Not_Found2018/02/05(月) 01:10:08.48ID:???
だからHTMLに直接変数名を書くことが
腐った環境やクソなコーディング規約だって話だ

497Name_Not_Found2018/02/05(月) 01:44:44.15ID:???
ページごと、ユーザーごとのパラメータをHTMLに書くことはあるぞ
どうせlocalStorageかHTMLに書くかAjaxで取得するかくらいしかないし

498Name_Not_Found2018/02/05(月) 01:52:32.96ID:???
今話をしてるのはJavaScriptの変数の話だ
分かってないなら黙ってろ

499Name_Not_Found2018/02/05(月) 01:56:06.57ID:???
HTML内で
var userData = {}

外部JSファイル内で

(function(){
something(userData.何か);
})();

こういうことだろ

500Name_Not_Found2018/02/05(月) 02:11:37.12ID:???
>>497
常に何から何までXHRで済ませられるわけじゃないしな

501Name_Not_Found2018/02/05(月) 03:20:21.65ID:???
>>499
細かいことだがそれ(function(){ })(); で囲う意味ある?

502Name_Not_Found2018/02/05(月) 03:40:25.36ID:???
window.now = performance.now;
now();

こう書くと"オブジェクトの呼び出しが無効です"と怒られるんすよ
なんででしょうね

503Name_Not_Found2018/02/05(月) 04:26:38.57ID:???
thisの問題ですね。
now()で呼び出したときもthisがperformanceを指すように以下のようにbindしときましょう。
window.now = performance.now.bind(performance);

504Name_Not_Found2018/02/05(月) 05:42:06.72ID:???
とりあえずthisを拘束すればいいという考えはあまり良いとは思えないな
エイリアスという点では今は
fn = ( ...args ) => performance.now( ...args )
と書く方が良い
bind構文が実装されて記述が容易になるとともに
bindを常日頃から使う文化が広がったらbind構文の方が基本になると思う

505Name_Not_Found2018/02/05(月) 05:43:42.70ID:???
より「ハック」っぽくないのはどちらかっていう意味ね

506Name_Not_Found2018/02/05(月) 06:17:58.17ID:???
ハックっぽいかなぁ?
>>503はbindした新しい関数返してるだけで別になんにもハックしてなくない?
bindなんてES5から入ってるし実装されてるかどうか気にするレベルにないのでは…

507Name_Not_Found2018/02/05(月) 16:53:25.38ID:???
Google Maps (Javascript) API に関することはここでいい?

他に適当な質問スレがあれば教えてください。

508Name_Not_Found2018/02/05(月) 17:00:03.74ID:???

509Name_Not_Found2018/02/05(月) 23:52:28.98ID:???
>>474
Windows8.1はダメなので、IE自体の問題のような感じです。
開発者ツールでみると
else { //* not MSIE browser
wid1.location.href=wz1;
}
で止まっているのですが、Windows7では不具合なく動いているので、どこがおかしいかわからないのです。

510Name_Not_Found2018/02/06(火) 02:26:00.54ID:155ekgt0
フォーム内のあるアイテムの入力文字数が
たとえば 5文字あるいは10文字あるいは空白の場合だけ入力できるようにするにはどうすればよい?

511Name_Not_Found2018/02/06(火) 03:50:42.56ID:???
地道に数えろよ

512Name_Not_Found2018/02/06(火) 08:19:49.38ID:???
サロゲートペアと結合文字の問題があるからな
サロゲートペアで結合文字のものもある
例えばアクセント付付点8分音符「"𝅘𝅥𝅮𝅻𝅭"」は一文字でlengthは10だ

513Name_Not_Found2018/02/06(火) 11:45:45.30ID:???
>>492
ありがとうございました。
無事にこちらの方法で変数名を変えずに圧縮することができました。

5145072018/02/06(火) 13:15:35.38ID:???
>>508
ありがとう。しかしそっちはちと寂しかったです。

515Name_Not_Found2018/02/08(木) 22:50:41.60ID:???
基本的なことだと思うんだけど、分かってないので

click event についてなのですが
event発生のタイミングって、カーソルのpushが対象から抜けた時ですよね
表現がヘンで伝わってるか不安だけど

ブラウザゲームっぽいの作ってまして
touchしたときにevent発生させることってできるんでしょうか?

516Name_Not_Found2018/02/08(木) 23:34:02.32ID:???
タッチならタッチ専用のイベントが有る
タッチ専用のイベントは有るがマウスにも対応しようとしたら
いろいろ面倒なので、統合的に使えるライブラリを探したほうが良いかもね
俺の知識は古いので何が最善かまで言えない

517Name_Not_Found2018/02/08(木) 23:38:48.28ID:???
mousedown

5185152018/02/08(木) 23:48:36.33ID:???
>>516
ありがとう!
できないものと思い込んでた
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Events/Touch_events
これ見て吃驚

519Name_Not_Found2018/02/08(木) 23:51:08.92ID:???
マウスならmousedown、タッチならtouchstart
まあ両方やっとけばいい

520Name_Not_Found2018/02/08(木) 23:53:20.77ID:???
タッチは300ms問題とかもあったはず。ライブラリ使うべき。

521Name_Not_Found2018/02/09(金) 00:01:43.51ID:???
300ms問題はtapやで
だからtouchstart使うんや

5225152018/02/09(金) 00:11:31.05ID:???
>>517
えっ!あっそか
と思ってやってみました (jqueryでね)
$('#hoge').on('click', function () {
console.log('ムフフ');
});

$('#hoge').on('mousedown', function () {

desktop版firefox お〜動くー!

iOS safari あれ?挙動が click と同じだなぁ

523Name_Not_Found2018/02/09(金) 00:13:58.77ID:???
あー、思い出した FastClick.js だ
300ms問題を解決するライブラリ

524Name_Not_Found2018/02/09(金) 00:18:02.30ID:???
>>522
そういうこと。
ブラウザによって挙動が違ってよく分からんw

そういやタッチとマウスを統一的に扱えるようにした
Pointer Eventsってどうなったんだろうね

https://caniuse.com/#search=pointer%20events
結局Chromeは実装したみたいだけど

5255152018/02/09(金) 00:25:48.81ID:???
皆様ありがとう!
スマホはmouseじゃないからなのか

ぐぐってやってみて、ちゃんと動くようになったのが
var clickEventType = ((window.ontouchstart!==null) ? 'mousedown':'touchstart');
$('.slotBtn').on(clickEventType, function () {
socket.emit($(this).attr('id'));
});
// thankYou!!!

526Name_Not_Found2018/02/09(金) 00:35:08.20ID:???
タッチパネルつきパソコンはどうなるのか?って考えると
両方onしたほうがいいのかもしれないけどな

イベント2つ扱うときはこういう書き方な

$('.slotBtn').on("mousedown touchstart", function () {
socket.emit($(this).attr('id'));
});

あとどうでもいいけど、イベントハンドラ内のthisみたいに
必ず要素が一個であると断定できる時は、this.id と最近は書いてる

527Name_Not_Found2018/02/09(金) 00:41:05.58ID:???
内部でvarしない関数定義もしない即時関数って、即時関数にする意味なんかある?

528Name_Not_Found2018/02/09(金) 00:42:29.31ID:???
>>526
2回呼ばれることは絶対ないのけ?

5295152018/02/09(金) 00:44:41.07ID:???
>>526
mousedown と touchstart 併記したら
safariのやつが2つとも反応しちゃうんですよ

this.id の件了解!きっとこの方が速いんですよね

5305152018/02/09(金) 00:50:57.13ID:???
>>527
$('.slotBtn').on(clickEventType, socket.emit(this.id));
ってことですね
習慣でいたるところに…

531Name_Not_Found2018/02/09(金) 00:52:03.46ID:???
例えばbuttonの中に生の文字と<img>があってbuttonにイベントリスナつけたとき

532Name_Not_Found2018/02/09(金) 00:53:04.40ID:???
>>530
それダメwww

533Name_Not_Found2018/02/09(金) 00:56:43.96ID:???
>>530
それ動くの?
>>527で言ってるのは例えばこんな感じの記述
(function(){
 document.getElementsByClassName('slotBtn')[0].addEventListener('mousedown', function(){
  call.some.function();
 }, false);
})();

5345152018/02/09(金) 00:56:44.37ID:???
>>532
なんんでぇー

535Name_Not_Found2018/02/09(金) 00:58:46.31ID:???
>>534
関数そのものを渡さなきゃいけない
function(){}を渡すのはいいが、
socket.emit(this.id)ではsocket.emit(this.id)を実行した結果が渡される

って感じか?

5365152018/02/09(金) 01:01:09.65ID:???
>>533
やってないんで、やらんで良かった
コードさんきゅです、理解できた

537Name_Not_Found2018/02/09(金) 01:03:05.75ID:???
>>534
それだとその行にきた段階でリスナー登録じゃなく socket.emit() が実行される
もとのやつでいい

538Name_Not_Found2018/02/09(金) 01:05:39.21ID:???
タッチ、タップは魔境だなぁw
単体でもたくさんあるしuiライブラリ専用のもあるし…
https://npms.io/search?q=touch%20events

これなんかすげえ便利そう
https://github.com/GianlucaGuarini/Tocca.js

あとzingchartってやつはサンプルがウケた。いいのかこれw
https://codepen.io/zingchart/full/BzmdwQ

539Name_Not_Found2018/02/09(金) 01:10:09.52ID:???
そのうえ
画面のスクロールとかスクロールバー付き要素のスクロールとか
2本以上の指のタッチとか
アホかってほどいっぱい面倒なもんが出てくるからな

540Name_Not_Found2018/02/09(金) 01:20:09.65ID:???
zingchartじゃなくてzingtouchだった…
http://zingchart.github.io/zingtouch/

541Name_Not_Found2018/02/09(金) 01:23:18.30ID:???
ただ単にタッチを検出したいだけなら
touchstartとかでいいが

タッチを利用したカルーセルのような
インターフェースを作りたいのなら
自作するより使ったほうが楽

理由は>>539が書いているとおり

542Name_Not_Found2018/02/09(金) 01:31:40.71ID:???
>>515
自分も作るけど使い分けなくて便利だからPointer Events使ってる
来年にはFxとSafariでも使えそうな雰囲気だし
今はChromeとEdgeだけでもいいでしょ

543Name_Not_Found2018/02/09(金) 01:34:56.66ID:???
>>541
カルーセル作りたいなら、の意味がわからん

544Name_Not_Found2018/02/09(金) 01:43:38.37ID:???
touch, mouse を透過的に扱うのは、
Electron, Cordova, React などのフレームワーク

>>533
ECMA5 では、ブロックスコープが無かったから、
関数でスコープを作る

545Name_Not_Found2018/02/09(金) 01:52:06.65ID:???

546Name_Not_Found2018/02/09(金) 01:53:28.22ID:???
バッドノウハウの温床というやつだな

547Name_Not_Found2018/02/09(金) 01:54:39.96ID:???
>>544
内部でvarしない関数定義もしない場合、スコープ作る必要ある?

548Name_Not_Found2018/02/09(金) 04:12:44.08ID:???
前提知識として学ばないといけないことが多すぎ複雑すぎなのが嫌なのに
ライブラリの構造とか使い方とか
さらにさらにバージョンごとの差異とか
そんなん使ってられませんわ

549Name_Not_Found2018/02/09(金) 08:46:59.23ID:???
JSの仕組み自体はシンプル・イズ・ザ・ベストなのに

550Name_Not_Found2018/02/09(金) 08:59:58.13ID:???
というか、柔軟なんだよ

551Name_Not_Found2018/02/09(金) 09:43:55.08ID:???
>>543
> カルーセル作りたいなら、の意味がわからん

考えることがたくさんあるからだよ
要件次第だが

カルーセルで横スクロールする時、
縦スクロールしたらページはスクロールするか?とか

ピンチ、ピンチアウト機能と両立できるか?とか

スクロールはスムーズか?とか
(スムーズにするためのCSSの機能があるが使えない機種がある)

552Name_Not_Found2018/02/09(金) 10:00:02.38ID:???
カルーセルの基礎構造って

・操作に応じて横方向に画像が切り替わりループするスライド
・スライドを操作する「<」「>」ボタンや「□■□□」のようなナビゲーションを兼ねたボタン

これだけじゃないのか
touchendが使えればtouch*、でなきゃclickやmousedown、だけで普通にpure jsで書けね

553Name_Not_Found2018/02/09(金) 11:08:48.56ID:???
初心者が失礼します
http://fast-uploader.com/transfer/7073696781713.jpg
このコードで28行目の関数の引数eventはクリックしたときに引き渡されると思うんですが何が引数として引き渡されているのでしょうか?
event.clientXとevent.clientYでそれぞれ左上から縦横の位置を示してるのはわかるんですが、
じゃぁ.clientXと.clientYをとったときのeventってなんなんだろうって疑問になります。
この引数はいったい何でいつどんな変数が入ってるのでしょうか?

554Name_Not_Found2018/02/09(金) 11:28:00.42ID:???
イベントオブジェクトの一種、マウスイベントオブジェクト
clickされたときにブラウザがイベントオブジェクト作って引数eventとして引き渡してくれる

.clientXや.clientYはマウスイベントオブジェクトが持っているプロパティ
だからevent.clientXでマウスX座標が取れる
https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/clientY

5555152018/02/09(金) 11:47:48.48ID:???
>>542
pointer events って便利そうだけど
今、動作するのは chrome と edge だけってことですか?
作ってるサービスの対応ブラウザとしては、できるだけ多くを相手にしたいです。

自分が作ってる中で
押したらすぐ反応して欲しい部分は、プレイ画面中のボタンだけなんです
ある機械の状態をWebRTCでリアルタイムに流してて、ボタンはその機械を操作するものです
これスレと関係なかった

556Name_Not_Found2018/02/09(金) 11:49:18.43ID:???
>>554
なるほど、リスナーに引数を持つ関数を登録するとブラウザが自動で引数にイベントオブジェクトを入れてくれるんですね。
ありがとうございます。

557515_5552018/02/09(金) 12:16:28.78ID:???
スレ違だろうなぁ、でも他に
知見のある人のいるスレが見つけられない m_m

もう諦めてるんですが
画面サイズから video を90度回して縦方向いっぱいに計算して表示してるのですが
スマホ画面の上とか下に出てくるじゃまなやつのせいで動画が
ちっちゃくなってしまうのは、どうにもならないですか

558Name_Not_Found2018/02/09(金) 13:21:50.31ID:???
何でFullScreenAPI使わないの?

559515_5552018/02/09(金) 14:55:53.28ID:???
>>558 ありがとう!
これも、なんぞそれ!?
ってことで調べながらやってみてます
が、90度回してる影響かうまくいってないです

560Name_Not_Found2018/02/10(土) 11:50:49.98ID: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>

561Name_Not_Found2018/02/10(土) 12:17:41.99ID:???
click()の関数名がまずいっぽいね
click1()に変えたら動いたよ

562Name_Not_Found2018/02/10(土) 12:35:50.48ID:???
そういうのもあるし、onclick属性とは
HTMLのonなんたらで処理呼び出すのやめなよ

563Name_Not_Found2018/02/10(土) 12:51:55.94ID:oy2RaxPK
>>561
ありがとうございます!
>>562
最初は別ファイルからインポートしてたんですけど
はじめてスクリプト埋め込んだのでなんで動かないのかわからなかったので
とりあえず動かなくなる地点を探そうとして
順番に埋め込むところを移動させていました。

564Name_Not_Found2018/02/10(土) 13:20:38.10ID:???
>>562
reactさんをバカにするのはやめるんだ

565Name_Not_Found2018/02/10(土) 13:29:12.18ID:???
react?あれはJSXだから関係ない

566Name_Not_Found2018/02/10(土) 13:47:15.21ID:???
>>565
細かい話をするとreactとJSXも関係ない。別にJSX使わなくても全部関数で書ける。
で、JSXで書いて、reactが生成する生DOM確認してみた?onclick属性使われてるよ。

567Name_Not_Found2018/02/10(土) 13:54:02.97ID:???
>>566
reactとJSXは関係ない。
だからreactは持ち出してくるなって話なんだが?

568Name_Not_Found2018/02/10(土) 14:15:36.43ID:???
>>567
根拠なくon*属性にハンドラ書くの否定するなという話なんだが?

569Name_Not_Found2018/02/10(土) 15:23:07.72ID:???
reactがHTMLのon*使ってるかどうかはon*が良いか悪いかの指標にはならん

570Name_Not_Found2018/02/10(土) 15:27:51.69ID:???
じゃあ>>562のやめなよの根拠は?

571Name_Not_Found2018/02/10(土) 15:45:42.89ID:???
やめなよ

572Name_Not_Found2018/02/10(土) 15:50:10.61ID:???
 |ヽ∧_    
 ゝ __\   やめなよ
 ||´・ω・`| > 
/  ̄ ̄  、ヽ _______
└二⊃  |∪=| |─── /
 ヽ⊃ー/ノ    ̄ ̄ ̄ ̄
    ̄`´ ̄

573Name_Not_Found2018/02/10(土) 20:33:03.75ID:tiFE6zoU
こう言う文字列を作成して
var str ='文字列';
var func = '<button onclick="func(¥'' + str + '¥')">実行</button>';
funcをhtmlのページに埋め込みました。
そのhtmlを表示すると、文字列strが英数字なら問題ないのですが、文字列中にシングルクォーテーションとかダブルクォーテーション
が混じっているとエラーが出ます。
正しい解決方法を教えてください。

574Name_Not_Found2018/02/10(土) 21:22:04.38ID:???
埋め込みました、て・・・document.writeしたりelement.innerHTMLに入れたりしてんだろ
なんでcreateElementしてaddEventListenerしてappendChildしないんですか

575Name_Not_Found2018/02/10(土) 21:33:18.02ID:???
そういう問題ではない

576Name_Not_Found2018/02/10(土) 21:45:41.78ID:???
シングルクォーテーションの数が奇数です

577Name_Not_Found2018/02/10(土) 22:49:57.63ID:tiFE6zoU
>>574
やり方が分からないからです。

578Name_Not_Found2018/02/10(土) 23:12:46.00ID:???
>>577
もろもろエスパーするとこれはサーバーサイドテンプレート…
expressかなにかでやってる?

579Name_Not_Found2018/02/10(土) 23:19:52.42ID:???
>>573
何がどうエラーなのかぐらい書いてくれ
再現できなきゃ話にもならん
https://jsfiddle.net/84f0yahw/

580Name_Not_Found2018/02/10(土) 23:31:51.47ID:???
やっぱたぶんサーバーサイドテンプレートなんだろうな。
質問するのになんで隠すのか分からんが。

ほらよ>>573
出力確認のためのconsole.logもつけたから良く確認するように。
var str = 'こんにちは\'赤"ちゃん'; // 念のため言っとくがこの場合ここシングルクォートにエスケープ必要
console.log(str); // こんにちは'赤"ちゃん
str = str.replace(/'/g, "\\'"); // ブラウザJSのコンテキストでシングルクォートエスケープ処理
console.log(str); // こんにちは\'赤"ちゃん
str = str.replace(/"/g, '&quot;'); // HTMLのコンテキストでダブルクォートエスケープ処理(文字参照に変換)
console.log(str); // こんにちは\'赤&quot;ちゃん
var func = '<button onclick="alert(\'' + str + '\')">実行</button>';
console.log(func); // <button onclick="alert('こんにちは\'赤&quot;ちゃん')">実行</button>

581Name_Not_Found2018/02/10(土) 23:34:28.83ID:???
あ、すまん確認のためfuncをalertに変えてたんだった。alertはfuncに置換してくれ

582Name_Not_Found2018/02/11(日) 00:43:04.96ID:???
babelって今は末尾再帰最適化をサポートしてくれないんですか?
せっかく気軽に再帰で開発できると思ったのに……

583Name_Not_Found2018/02/11(日) 01:03:27.06ID:???
SSIだとなんか問題起きるんか(ハナホジ

584Name_Not_Found2018/02/11(日) 01:36:10.68ID:???
>>582
プラグインになっただけじゃねーの?

https://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

585Name_Not_Found2018/02/11(日) 02:21:31.20ID:???
https://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には大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される

586Name_Not_Found2018/02/11(日) 02:46:01.53ID:???
軽く使えるDOM操作ライブラリってほとんどないから

587Name_Not_Found2018/02/11(日) 02:51:23.00ID:???
jqueryに大幅な差というよりangularやreactが木っ端なだけだろ

588Name_Not_Found2018/02/11(日) 03:18:40.93ID:???
自前でwebサービス立ち上げてる会社以外reactもangularも出番ないんですもの。

589Name_Not_Found2018/02/11(日) 03:57:28.37ID:???
自社でがっつりやるなら自社で組む手があるからなぁ
他所のポリシーに合わせる必要なくなる

590Name_Not_Found2018/02/11(日) 08:39:54.82ID:???
>>573
jQuery を使え

<button id="btn1">押して</button>

$('#btn1').click (function() {
// ここに処理を書く
console.log("クリックされた");
});

591Name_Not_Found2018/02/11(日) 11:48:00.24ID:???
>>585
取って代わるてw
使われ方が全く違うだろ

592Name_Not_Found2018/02/11(日) 11:49:51.13ID:???
> 使われ方が全く違うだろ

ちゃんとした考え方できる人はそうわかるんだけどね。
今のところjQueryがなくなることはない。
jQueryの代替技術はない

だけど一部のjserどもが、jQueryはオワコン
これからはAngular、Reactやで!
jQuery使わなくて頑張ればコストがかかるだけでできる!
などと言い始めたからね。

593Name_Not_Found2018/02/11(日) 11:50:35.97ID:???
jQueryがまだ下り坂になってないのは
この一年でシェアが更に増えたことからも明らかだよな

594Name_Not_Found2018/02/11(日) 11:58:03.08ID:???
>>592
addEventListenerとattachEventの違いの吸収のように
UA間で異なる仕様が少なくなっていくにつれて
jquery自体が不要になっていくんじゃないの
例えばアニメーションだって5年前とは比較にならんほどcss対応進んだし

595Name_Not_Found2018/02/11(日) 11:59:05.35ID:???
どっちかっていうとこれからはピュアなjavascript

596Name_Not_Found2018/02/11(日) 12:10:26.49ID:???
>>594
addEventListenerとonの違いを考えれば
jQuery優位になるんだよ。

今はaddEventListenerが優位な点も残っているが解決できる
でも逆にaddEventListenerはonの優位な点を解決することができない


onが優位な点
・onの方が文字数が少ない
・複数のイベントに対して一度にイベントを設定できる
・後から追加される要素に対しても働くイベントハンドラが簡単に書ける

addEventListenerが優位な点
・イベントハンドラの設定が速い(だが体感できるものではない)
・キャプチャフェーズにも対応できる(そもそもIE8非対応の機能。jQuery 4.0で対応予定)
  https://github.com/jquery/jquery/wiki/jQuery-4.0-Event-Design


結局jQueryオブジェクト=DOM要素のコレクションという仕組みが最強なんだわ
jQueryオブジェクトはjQuery独自のものだから標準にとらわれず自由にメソッドを追加できる

597Name_Not_Found2018/02/11(日) 12:12:46.62ID:???
>>595
> どっちかっていうとこれからはピュアなjavascript

ピュアなjavascriptがループとか条件分岐なしに
書けるようになればね・・・

結局、言語の設計方針レベルの問題だから
ループなしにセレクタに一致する要素群に対して
一括でイベントハンドラを設定できるようにはならんと思うよ

598Name_Not_Found2018/02/11(日) 12:24:44.98ID:???
>後から追加される要素に対しても

よくわからないんだが
適切にHTML構造作ってバブリング考えてリスナ組み立てればいいだけでないの

599Name_Not_Found2018/02/11(日) 12:42:53.72ID:???
>>598
jQueryだと

$('.class').on('click', function() { this はクリックされた要素 } );

これを

$(document).on('click', '.class', function() { this はクリックされた要素 } );

こう書き換えるだけでいい。
イベントハンドラの中身も書き換えなくて済む

これとまったく同じことをjQueryを使わずに書こうとしたら
ほんとうに大変だよ

600Name_Not_Found2018/02/11(日) 13:00:41.21ID:???
class名でイベントリスナ貼り付けるの好きだよねjquery使い

601Name_Not_Found2018/02/11(日) 13:02:25.85ID:???
>>600
IDでイベントハンドラを付ける意味が無いからね。

602Name_Not_Found2018/02/11(日) 13:07:07.65ID:???
jQueryは動的ページと相性が良くて動的ページっていうのはある要素が条件によって
存在したりしなかったりするわけだけど、jQueryを使うといちいち要素が
存在しているかしていないかをチェックする必要がない

その動きはCSSと一緒。
CSSでも特定の要素が存在しなくてもエラーにならない

そして要素が1つであっても複数であっても、それを気にする必要がない。
まったく同じコードで処理できる。

同じことをDOM APIだけでやろうとするとループが必要になってしまう。
そのループを避けるため、ID指定で一つの要素だけ取得しようとするが
そもそもループが存在しないjQueryではID指定に拘る必要がない。

603Name_Not_Found2018/02/11(日) 14:34:55.91ID:???
>これとまったく同じことをjQueryを使わずに書こうとしたら
>ほんとうに大変だよ
後から追加した要素のイベントを検出するのは、
JavaScriptで同じ事をやろうと思えば出来るんですか?
jQueryではどんな手法でやっているんですか?

604Name_Not_Found2018/02/11(日) 14:36:00.82ID:???
そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか
やっぱり中に何があるかわからんけど、取り敢えず外から操る、それを楽にしたいでは無くて
コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう

グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ

605Name_Not_Found2018/02/11(日) 14:43:37.25ID:???
>>603
まずイベントバブルを利用してdocumentにイベントハンドラを設定する
その後、発生したイベントの発生元が、指定したセレクタに一致するか比較する
そうすればできる。

最近のブラウザなら、指定したセレクタに一致するか比較するのは簡単に
できるようになっているらしいが、jQueryはそれができない時代から
独自で実装していた

606Name_Not_Found2018/02/11(日) 14:44:18.43ID:???
>>604
> そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか

JavaScriptを使ったページで、要素が動的に増えたり減ったりするのは
よくあると思うけど?

607Name_Not_Found2018/02/11(日) 14:48:04.46ID:???
>>604
> コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう

そうそれ! jQueryが得意な所

IDを使ってしまうとコンポーネント化とは逆の方向になってしまう。
コンポーネントというのは使いまわしできるもので、
同じコンポーネントが一つのページに複数存在したりするものだからね。

それがjQueryと相性がいい。
同じコンポーネントというのは同じクラスであるということ
クラスに対してイベントハンドラを設定することで
コンポーネントに対しての処理が書きやすくなる。

> グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ

即時関数を使ってグローバル変数を無くすってのはよくあるけど、
jQueryを使うと即時関数を使わなくてもグローバル変数はなくなってしまう。
実際に書いてみればわかるがこんな感じになるから

$(".class").on('click', function() {
 // ここはローカル変数
});

608Name_Not_Found2018/02/11(日) 15:06:24.05ID:???
結局、ここ数年のWeb界隈を見るに、既存のDOM構造の地位を脅かすようなモデルが現れてないからね
それらと相性がいいjQueryは、好みはともかく、現実的にはまだしばらくは覇権でしょう

609Name_Not_Found2018/02/11(日) 15:15:05.35ID:???
jQueryは設計センスが良すぎてとても真似できない
これとlodashであと10年戦う

610Name_Not_Found2018/02/11(日) 15:19:30.26ID:???
懐かしいな。もう一年前になるのか。
jQueryはオワコン、下降傾向にあるって言ってたやつ

一年経って減るどころか1.4%も増えたで?
その増えた量はReactよりも多い

どんな気分?w

611Name_Not_Found2018/02/11(日) 15:39:18.08ID:???
angularやreactとかは大規模複数人開発案件でないとメリットがデメリットを上回らないからjQueryはなくならないと思う。
jQueryにマウント取ってるreactファンボーイが頭おかしいだけ。
しかも攻撃理由がreact等のvirtualDOMとjQueryの生DOM操作は相性悪い→jQueryはオワコン だからな。最高に頭悪い。
飛行機ができたから電車オワコンと言ってるようなもの。
原爆できたから軍隊にナイフ要らないと言ってるようなもの。

612Name_Not_Found2018/02/11(日) 16:49:33.71ID:???
>>607
直近の親要素にaddEventListenerすれば済むことでは
classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる

613Name_Not_Found2018/02/11(日) 16:52:19.03ID:???
>イベントバブルを利用してdocumentに

とりあえずグローバル変数、とりあえずsingletonみたいな感じで気持ち悪い

最低限にまとめろよ

614Name_Not_Found2018/02/11(日) 18:01:41.90ID:???
jQueryの是非は置いておいても
angularもreactもJSXもダメすぎる、あんなものが覇権取れるわけない

615Name_Not_Found2018/02/11(日) 18:32:29.27ID:???
>>612
直近の親要素に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
})

616Name_Not_Found2018/02/11(日) 18:39:00.92ID:???
>>612
> classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる

なんで? 再利用させたいならばjQueryプラグインになるだろうけど
jQueryプラグインは特定のクラスに結びつくものじゃない

617Name_Not_Found2018/02/11(日) 18:47:24.99ID:???
>>605
詳しい説明ありがとうございました。

618Name_Not_Found2018/02/11(日) 19:12:11.35ID:???
>>615
>spanなどが入っている場合
HTML構造がそうなってるならspanだったらparentNode拾ってくればいいだけでは
classを使う必要性がない

619Name_Not_Found2018/02/11(日) 19:34:32.90ID:???
spanじゃなくて、divの中にspanだったら
こんどはparentNodeのparentNodeを取ってくればいいだけ。
またその他の要素が入っていたら、頑張ってJavaScriptを
メンテナンスすればやれないことはない
気合と金と時間さえあれば歩いて九州から北海道だって行ける!

620Name_Not_Found2018/02/11(日) 19:35:14.22ID:???
>>618
今はどれだけ簡単にできるかって話をしてるんだから
そこでparentNodeを取ってくればーと言った時点で、
簡単にはできないってことになるんだよ

621Name_Not_Found2018/02/11(日) 19:36:00.78ID:???
やっぱりjQueryのdelegate相当のことをやろうとしたら
素のDOM APIでは大変そうですね

622Name_Not_Found2018/02/11(日) 19:36:44.02ID:???
やっぱりjQuery良く出来てるわー
一年経って減るどころか増えてるからぐうの音もでないだろうね

623Name_Not_Found2018/02/11(日) 19:37:35.56ID:???
html構造 javascriptも使うしCSSも使う
class名 一般的にはCSSが使う

html構造変わったらjavascriptコードも変わるのが当たり前
class変わってもjavascriptコードが変わることはあまりない
javascriptでclassをトグル切り替えするとかその程度

624Name_Not_Found2018/02/11(日) 19:41:05.71ID:???
>>620
1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい?

逆に、デザイナがCSSいじるとき
javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい

そういう話をしているんだけど再利用ならjQueryプラグインが云々で何を言いたいのかさっぱり

625Name_Not_Found2018/02/11(日) 19:41:30.90ID:???
> html構造変わったらjavascriptコードも変わるのが当たり前

そう、それがDOM APIの常識だった。
だけど、jQueryはそれを打ち破った。

なにせCSSと同じくセレクタを使って要素を絞り込むわけだから、
CSSと同じ効果が得られた

そして同じセレクタに同じデザインを適用するCSSと
同じセレクタに同じ振る舞いを持たせるjQueryという関係が出来上がった

考えてみれば、セレクタ=コンポーネント、
同じコンポーネントが同じデザインとう振る舞いを持つのは当然ではないか

そして混沌としてHTMLとJavaScriptの世界に
汎用性がもたらされた

626Name_Not_Found2018/02/11(日) 19:43:30.58ID:???
生DOMはいい加減自分を操作するために親を経由するとかそういうのやめてほしい
やるとしても適当に関数作って内部でやっとけばいいのに

627Name_Not_Found2018/02/11(日) 19:43:59.66ID:???
>>624
> 1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい?

そうだよ。知らなかった?

複雑度っていうのは条件分岐一つで大きく膨れ上がる。
ifが1つ増えれば2倍、2つ組み合わさればなれば、2倍の2倍で4倍。
3つだと8倍。一つ増えるだけででテストしなければいけない場合は
指数関数的に増加する

if一つだから簡単だと思っているやつは
考えが浅いというわけさ

628Name_Not_Found2018/02/11(日) 19:45:04.61ID:???
>>624
> javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい

デザイナがいじるのはデザインであってclass名じゃないからね

629Name_Not_Found2018/02/11(日) 19:48:13.86ID:???
>>628
同じスタイルを適用したくても
javascriptがclass名で決め打ち処理入れてるから
CSSをコピペしたり別のclass名を作ったりしなきゃいけない、と嘆かないデザイナ?

630Name_Not_Found2018/02/11(日) 19:49:27.45ID:???
>>629

違うものに同じデザインを適用したいってことないでしょw

631Name_Not_Found2018/02/11(日) 19:49:37.98ID:???
Webデザイナと連携したことないけど何かいろいろ闇があるんですか?

632Name_Not_Found2018/02/11(日) 19:50:03.87ID:???
切り分けたい時もあるし切り分けたくない時もある
切り分けられないを強要するライブラリということだ

633Name_Not_Found2018/02/11(日) 19:50:10.81ID:???
あるわい!

違うものであってもデザインが同じなら
クラス名も同じにするんだい!

デザインが赤なら、クラス名もredにするだろ!

634Name_Not_Found2018/02/11(日) 19:50:42.82ID:???
デザインが同じでも、本質的に別物なら
それは違うクラス名を与えるべきだよ

635Name_Not_Found2018/02/11(日) 19:51:48.94ID:???
CSSに他classのスタイルを継承する文法があれば筋が通るんだけどね

636Name_Not_Found2018/02/11(日) 19:52:51.35ID:???
デザインが同じなら同じクラス名にしたいっていうのは

このボタンの色は青でフォントサイズ2emですね。
こちらの見出しも青でフォントサイズも2emですね。

ならボタンと見出しでデザイン一緒ですから
同じクラス名にしましょうって考える人?

637Name_Not_Found2018/02/11(日) 19:54:32.31ID:???
JavaScriptを使う人はHTMLとCSSのことも理解していなければ
だめだってわかる典型的な例だな

なぜかJavaScript使う人でHTMLやCSSが苦手な人が多い

638Name_Not_Found2018/02/11(日) 19:54:58.82ID:???
>>613
なお実行順序の管理

639Name_Not_Found2018/02/11(日) 20:05:18.62ID:???
違うものに同じスタイルを適用したいからって
クラス名を同じにするとか愚の骨頂
素人同然だわ

640Name_Not_Found2018/02/11(日) 20:07:44.45ID:???
HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが
idはscriptから参照するためという目的が明示されてるが
併記されているclassにはそれがない
同じclassが同じ振る舞いであるべきかどうかは定かではないと言っておきたい

641Name_Not_Found2018/02/11(日) 20:08:40.11ID:???
> HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが

思い込みな。何処かに書いているというのなら言ってみてくれ
ちなみに、idはスタイルのためのものかい?w

642Name_Not_Found2018/02/11(日) 20:10:55.73ID:???
>>641
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176
ここからリンクされている
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-class
これ

「role」としてid, class双方に「style sheet selector」が明示されているが
scriptはというとidのみ

643Name_Not_Found2018/02/11(日) 20:12:24.83ID:???
どうせ適当な事を言うだけ言って逃げるだろうから
書いておくわ

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes

> 要素のクラスを空白区切りで並べたリストです。クラスは CSS の
> クラスセレクター や JavaScript の Document.getElementsByClassName() メソッドと
> いった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

https://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.

644Name_Not_Found2018/02/11(日) 20:12:29.22ID:???
CSSがなんたるかどう書くべきかを理解しているデザイナとしか仕事しないのならいいけどね

645Name_Not_Found2018/02/11(日) 20:13:27.58ID:???
>>642

なんで今さらHTML4.01なんか持ち出してきたの?
わざと?

646Name_Not_Found2018/02/11(日) 20:14:27.71ID:???
>>643
後者引用の文章は、classの割り当てはgetElementsByClassName()に影響すると言っているのみであって
classとは何であるかを説明しているものではないようだが

647Name_Not_Found2018/02/11(日) 20:15:02.57ID:???
ほう、やっぱり意図的にHTML4.01を持ってきたようだ

https://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.

648Name_Not_Found2018/02/11(日) 20:15:04.30ID:???
>>642
w3 vs mozilla、ファイッ!

649Name_Not_Found2018/02/11(日) 20:15:41.23ID:???
>>646
クラスは色んな使い方として用いられると書いてあるが
スタイル専用なんてどこに書いてあるか?

650Name_Not_Found2018/02/11(日) 20:16:34.19ID:???
https://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

スタイル専用のものと書いてない

651Name_Not_Found2018/02/11(日) 20:18:48.53ID:???
同様にIDがJavaScript専用とかも書いてない

実際CSSで使えるわけだしね

652Name_Not_Found2018/02/11(日) 20:25:27.63ID:???
>>645
MDNでclassのことを確認したときに参照として書いてあったのでブックマークしておいたからだ
シンプルで分かりやすかったから記憶に残っていたんだが
>>643の後者のURLを見ると目的が明示されなくなっているんだな
詳しく読んでくるがその前に>>640は取り消す、横から済まなかった

653Name_Not_Found2018/02/11(日) 20:27:38.57ID:???
>>652
お前の知識は古いから話にならないってだけだよ

654Name_Not_Found2018/02/11(日) 20:31:28.79ID:???
仕様文書の読み方よく知らないんだけど
こういうのって打ち消されない限り以前
のが有効だったりしないの?

655Name_Not_Found2018/02/11(日) 20:35:45.25ID:???
どちらを採用するかって話
HTML5を採用するなら、HTML5の仕様が全て
他の仕様書に書いて有ることは何の参考にもできない

656Name_Not_Found2018/02/11(日) 20:37:35.49ID:???
過去を継承的に考えるのか過去を取り消
し的に考えるのかってことね

657Name_Not_Found2018/02/11(日) 20:42:23.47ID:???

HTL4.01という仕様を元に

必要なことを付け足し、必要ないものを削除し
そして以前のものを継承させて完成させたのがHTML5だろ

HTML4.01で引き継ぐ所は全部引き継いてるんだから
HTML5だけを見ればいい。なくなった部分は廃止されたって意味だ。

658Name_Not_Found2018/02/11(日) 20:48:30.15ID:???
HTMLの意味論にどこまで意義があるかはわからないけど
目的が抹消された例は結構あるな
理由はわからんが<dl>, <dt>, <dd>は定義リストじゃなくなった

659Name_Not_Found2018/02/11(日) 20:49:54.81ID:???
<i>とか<b>とか

660Name_Not_Found2018/02/11(日) 20:49:59.62ID:???
どーてーりすと?

661Name_Not_Found2018/02/11(日) 23:12:13.10ID:IlEpejin
>>636
議論に関係ないが、こういう人いるわ……
わりと疲れる

662Name_Not_Found2018/02/11(日) 23:44:24.67ID:???
jQuery のソースコードを読むと、
Android 4.0, IE 9, IE 8 などの分岐処理がある

こんなの自分で対応できないだろ。
アホらしい

663Name_Not_Found2018/02/12(月) 05:32:37.11ID:???
つうかここでjQueryはあれに向いてる、これもできると言ってる奴らのレベルが低すぎる
一昔前JSとWebAPIだけであらゆることができると豪語してた奴ら未満

俺達はきちんとその時点でできることできないこと、得意なこと苦手なことを研究して
この先何が必要か考えES Discasにも参加したし、ブラウザにissueも投げた
JS大好きマンだが渋々C++でパッチも書いたこともある

結局自らの敵は自らで、jQueryがそういう用途に最適化された設計がされていない、
するつもりもあまりない、そういう用途で使おうと思ってる人が少ないって言うことが最大の敵なんだよ

いつまでもDOM APIと張り合って、使うべきか使わないべきかみたいなレベルの低い争いを続けてるようじゃ、
今あるjQueryマンセーじゃ未来はないよ

664Name_Not_Found2018/02/12(月) 05:45:10.35ID:???
そういう話じゃない。

665Name_Not_Found2018/02/12(月) 09:56:53.54ID:???
すげえ、驚くほど話が噛み合わない

666Name_Not_Found2018/02/12(月) 10:09:58.32ID:???
HTMLの最後でjs読み込むのとwindow.onLoadで処理させるのと基本どっちを選ぶべきなの?

667Name_Not_Found2018/02/12(月) 10:35:10.82ID:???
>>663
そうあってほしいと考えているわけですね

でもね、最初からjQueryはDOMライブラリだって言ってましたー
その他の用途には、それ用のライブラリを使いますー

668Name_Not_Found2018/02/12(月) 13:00:09.27ID:???
>>667
jQueryがそういう用途に最適化された設計がされていないことについてはどう考える?

669Name_Not_Found2018/02/12(月) 13:00:37.00ID:???
>>668
そういう用途って?

670Name_Not_Found2018/02/12(月) 13:01:19.23ID:???
>>669

>>663に書いてあるだろ

671Name_Not_Found2018/02/12(月) 13:01:44.19ID:???
>>670
いやだからどこに?

672Name_Not_Found2018/02/12(月) 13:03:42.86ID:???
「いつまでもDOM APIと張り合って」って
書いているところから読み取れないかな?

jQueryはなんでもできるんだろ?
あれもこれもできるんだろ?

だがjQueryはあれもこれもの用途に
最適化された設計になっていない

所詮DOM API代わりのDOM用ライブラリにすぎない

673Name_Not_Found2018/02/12(月) 13:04:38.97ID:???
当たり前ですよね?
jQueryはDOM用ライブラリですよ?

なんでDOM用ライブラリをなんでもできるライブラリに
しないといけないんですか?

どんな機能にも対応している神ライブラリとでも
思っていたんですか?
アホですねw

674Name_Not_Found2018/02/12(月) 13:05:51.12ID:???
ムキー! お前らがjQueryはなんでもできるライブラリだって言っていただろ
その公約を守ってないからjQueryはクソライブラリだ!
お前らが言っていたことができないからクソだ

675Name_Not_Found2018/02/12(月) 13:06:20.30ID:???
>>666
window.onload
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

load イベントは文書のローディング工程の終了時に発生します。
このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、
全ての画像とサブフレームのロードは完了しています

画像のロード完了を待つ必要があるかな?
漏れなら、画像など無視するから、<body>のラストで、JS を読み込む

676Name_Not_Found2018/02/12(月) 13:06:28.15ID:???
お前らが言っていた = 妄想
自分の妄想が実現されてないからクソだって言ってたのか
アホだな

677Name_Not_Found2018/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(イベント, セレクタ) の形式で書くやり方なんだが
思考に慣れが必要ではあるだろうな

678Name_Not_Found2018/02/12(月) 13:16:25.33ID:???
漏れって久々に見た

679Name_Not_Found2018/02/12(月) 13:55:03.15ID:???
>>673
上でコンポーネント化の話などが挙がってるし、
逆に色々話題が出たときこれはjQueryでは向いてないという話になったことがない
なんやかんや無理やりjQueryが使えると思い込んでる

680Name_Not_Found2018/02/12(月) 14:09:36.78ID:???
思い込みが酷すぎて怖い
一緒に仕事したくないタイプ

681Name_Not_Found2018/02/12(月) 14:12:37.63ID:???
>>679
向いていないという話が出なかったら
向いていると言っているんだ!って思い込んでんのか?

例えば日付処理にjQueryは向いてない
ほら言ってやったぞ?どうするんだ?

682Name_Not_Found2018/02/12(月) 14:54:03.36ID:???
>>681
餅ついてよく読め
脊髄反射するな

683Name_Not_Found2018/02/12(月) 17:03:04.48ID:???
>>682
jQueryはDOMライブラリである。
誰もjQueryが何にもでも使えるとは言ってない

ここまではいいな?

684Name_Not_Found2018/02/12(月) 17:42:29.63ID:???
>>683
よかろう

685Name_Not_Found2018/02/12(月) 17:57:43.89ID:???
> なんやかんや無理やりjQueryが使えると思い込んでる

誰もjQueryが何にでも使えるとは言ってないので
(エスパーでもない限り他人が思ってることなんてわからないので)
思い込んでる事とわかるのは自分自身(>>679)だけである

ここまではよい

686Name_Not_Found2018/02/12(月) 22:13:26.66ID:???
ああ、スレ建てたやつがライブラリ禁止のテンプレ消したのか

687Name_Not_Found2018/02/13(火) 01:39:28.88ID:???
example.com?q=文字列
をサーバーサイドで受け取る時に文字列中に¥rや¥nも渡す事は出来ますか?

688Name_Not_Found2018/02/13(火) 02:54:43.50ID:???
%0Aや%0D

689Name_Not_Found2018/02/13(火) 09:34:16.09ID:???
>>685
一番の問題はそう思われてるってことだと思うぞ
jQuerer含むライブラリスタが過剰にライブラリを推してるのは事実
度々スレ分離したり議論になってるのにまだ自分たちがどう思われてるのかが分かってないのか

690Name_Not_Found2018/02/13(火) 09:53:45.83ID:???
> 一番の問題はそう思われてるってことだと思うぞ

jQueryのアンチが変なふうに思い込んでるのは
アンチが悪いってことで終わりじゃね?

691Name_Not_Found2018/02/13(火) 10:38:11.42ID:???
ライブラリの書き方はライブラリ使わないと通じない
ライブラリを使わない書き方はライブラリ使ってても使ってなくても通じる

ってところか?

692Name_Not_Found2018/02/13(火) 10:42:49.53ID:???
クチャラーに自覚したらと諭したら
俺は普通に食べてるだけ
耳障りに聞こえるのはお前が悪いと言われたって感じか

693Name_Not_Found2018/02/13(火) 22:29:27.55ID:AUT9CmqZ
react.jsやangular.jsが役立つ大規模案件、とは具体的にどの程度の規模のサイトですか?
今まで小さな企業でしか勤めたことがなく、大規模案件と言われてもイメージが湧きません

694Name_Not_Found2018/02/13(火) 22:39:43.45ID:???
>>693
てことは一生知る必要がないんじゃないか

695Name_Not_Found2018/02/13(火) 22:43:02.36ID:???
前もって勉強したいじゃん?

696Name_Not_Found2018/02/13(火) 23:09:02.10ID:???
すいませんageてしまいましたね
今のままの小さい仕事しかせずにjavascriptと言えばjqueryでチョロチョロ、みたいなキャリアで本当に将来生き残れるのかという不安があるのです
あとは、自分がjqueryしかできないから会社も大きな仕事が取れないんじゃないかとか考えてしまったりですね

697Name_Not_Found2018/02/14(水) 00:01:20.48ID:???
どの位大規模かというと、最近YouTubeがPolymerを導入した
だが、そのバージョンはv0.いくつのもの、今の最新はv3
そのくらい年単位で開発する案件に使うもの

そこからわかると思うがフレームワークは前もって勉強する必要はない
実際使うべきときには役に立たないから
大手も使うと決めたときに改めて勉強会を開くなりして対応してる

698Name_Not_Found2018/02/14(水) 00:30:16.57ID:???
離脱したくても離脱しづらくなるから使うなら見合った理由が必要
大規模だから使うというより
少数の比較的小規模な会社が
使い続けてく方が多い印象がある

699Name_Not_Found2018/02/14(水) 00:33:55.45ID:???
HTMLに影響強く出るのはあんまりやだな

700Name_Not_Found2018/02/14(水) 00:36:13.70ID:???
jQueryってもう役目が終わってるんだよ
いい加減目を覚ましたほうが良い
作者も見放してReactやってるじゃん

701Name_Not_Found2018/02/14(水) 00:46:01.50ID:???
jQuery 73.2%(前年比 +1.4%)、React 0.6%(前年比 +0.5%)
jQueryの役目が終わってからjQueryの役目が終わったというように

https://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には大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される

702Name_Not_Found2018/02/14(水) 01:35:49.34ID:???
>>701
これからの自分たちがどうしていくかの話をしてるのに
他の人が今何をやってるのかを気にするって意味がわからんな

良く使われてるのは所謂「枯れた技術」とは言えるけど
熟れた物ってこれから先腐っていくこととほぼイコールじゃん

703Name_Not_Found2018/02/14(水) 01:36:52.26ID:???
HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ?

704Name_Not_Found2018/02/14(水) 01:39:09.20ID:???
>>702
せやな、一年前に、これからはjQueryは減っていくとか
これからは腐っていくとか予想を立てた人恥ずかしいよな

これから?来年にはまたjQueryのシェア増えるんじゃね?

AngularもReactも熟れる前にくされなきゃ良いけど
Angularは一回腐れたよな

705Name_Not_Found2018/02/14(水) 01:41:28.87ID:???
HTTPSは費用と処理と通信のコストがあるからなあ

706Name_Not_Found2018/02/14(水) 01:42:14.75ID:???
>>703
> HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ?
わかったわかった。HTTPSは最初からある程度使われいたからな

何かのフレームワークの使用率が10%を超えたら考えよう。
それでいいだろ?

707Name_Not_Found2018/02/14(水) 01:52:21.16ID:???
>>696
中小規模の会社が請ける規模の案件なら
素のJSだけでも十分やってけるよ
昔と比べて格段に安定して書けるようになってきたから
万が一必要になったらその時必要な分だけ調べれば済む

708Name_Not_Found2018/02/14(水) 01:59:06.49ID:???
大規模な会社がReact使っているかと言ったらそうじゃないからな
なにせ0.5%しか使われていない

709Name_Not_Found2018/02/14(水) 11:54:19.76ID:???
Ruby のHTMLのテンプレートエンジン、erb では、
HTMLとRubyの構文が交互に来るから、わかりにくい。
PHP なんかもそう

<% @items.each do |item| %>
<li><%= item %></li>
<% end %>

もしRuby に、JSX があれば最強だろう

710Name_Not_Found2018/02/14(水) 12:19:02.69ID:???
JSXもクソじゃん。条件分岐とループごときに
言語の機能を使うようじゃダメ
mustacheが最強

711Name_Not_Found2018/02/14(水) 13:04:34.95ID:???
ここまで見てきて分かったのは
仕様というのは作って環境というのは動かしていくもんだと考えてる開発者と
仕様というのは与えられて環境というのは落ち着いたものに浸かるもんだと考えてる開発者じゃ
話合うわけ無いってことだな

712Name_Not_Found2018/02/14(水) 13:08:40.64ID:???
問題

「作って環境というのは動かしていくもん」と
「与えられて環境というのは落ち着いたものに浸かるもんだ」の
違いを完結に述べよ

713Name_Not_Found2018/02/14(水) 13:39:11.48ID:???
>>712
簡潔に言えば仕様標準化と実装に関わっているかどうかってことで言えるんじゃない?
企業で言うとミーティングやカンファレンスに社員を出張させているかどうか
別にそれは社会貢献のためではなくて自分たちのやりたいように環境を動かすためにそうしてる
環境というが実際は人
その場にいる仕様や実装書いてる人に直接会って、
こここういうバグが有るんですよとか、こういうところで困ってるんですよとか話ができるってことが重要
やっぱりそれはオンラインでプルリクエスト送るのとはぜんぜん違う
仕様や実装を作ってるのは人間で、意外と少数だから、向こうも幅広い意見を汲み取ろうとはしてるけれど
どうしても自分たちの近い範囲が得をする恣意的なものになってしまう
そのために皆わざわざ録画で見れるものを会場まで行く

714Name_Not_Found2018/02/14(水) 15:23:42.02ID:???
会場のふいんきを感じ取れて満足した
まで読んだ

715Name_Not_Found2018/02/14(水) 19:44:59.89ID:???
>>693です
ひとまず自分のやりうる業務のことを考えたらjqueryやes6の習熟でひとまずは大丈夫だと感じました
まずはjqueryを使い倒してみて、jqueryでは不十分だと感じられるようになった段階で改めて考えてみることにします
ありがとうございました

716Name_Not_Found2018/02/14(水) 23:18:13.39ID:???
ES2017位までは追いかけても損は無いよ

717Name_Not_Found2018/02/15(木) 02:17:15.83ID:???
オブジェクト型の分割代入やasyncジェネレータなど
既にモダンブラウザで使える重要なES2018の機能もあるよ

718Name_Not_Found2018/02/15(木) 13:13:52.45ID:???
初めてのJavaScript 第3版、オライリー、2017

ES2015 の本。
これを読めば、クラスとか、素人はあまりの難しさに愕然とするだろう

719Name_Not_Found2018/02/15(木) 13:18:59.62ID:???
素人が騒然とするのは当たり前だろ?


いや、お前がプロで、難しくて騒然としたっていうなら
それはそれで面白いことだがw

720Name_Not_Found2018/02/15(木) 15:15:21.53ID:???

721Name_Not_Found2018/02/15(木) 16:13:48.62ID:???
Maybeモナド的な機能がほすぃ

722Name_Not_Found2018/02/15(木) 17:07:52.68ID:???
JSのクラス化って何が利点になるの

723Name_Not_Found2018/02/15(木) 17:14:12.43ID:???
人間のメンタルモデルとコードを一致させられるから
理解しやすくなる。可読性の向上

ひねくれた方法で「実現できる」じゃだめなんだ
普通に書いて普通に読めなければいけない

724Name_Not_Found2018/02/15(木) 18:38:34.26ID:???
設計で方法論に従うことができる。
しかしテストでパターン数爆発で大抵死ぬ。

725Name_Not_Found2018/02/15(木) 19:06:50.48ID:???
自動テストさせちゃえ

726Name_Not_Found2018/02/15(木) 23:02:20.37ID:???
JSにテストなんて必要ない、トライアンドエラーがベスト
テストしたいんならよりし易い言語で書いてコンパイルすべき

727Name_Not_Found2018/02/15(木) 23:17:37.27ID:???
> テストしたいんならよりし易い言語で書いてコンパイルすべき

ではその、よりし易い言語がなにで
どういう理由で、よりし易いのか言えるんでしょうな?

728Name_Not_Found2018/02/15(木) 23:56:25.01ID:???
726ではないが、結局selenium動かしたり
casperでもぞもぞしたりするなあ

729Name_Not_Found2018/02/16(金) 09:35:25.15ID:???
svgの制御についての質問はここでしてもいいですか

730Name_Not_Found2018/02/16(金) 11:04:46.77ID:???
OKOK

SVG操作系javaScriptライブラリまとめ
https://jslob.repop.jp/2017/07/svgjavascript.html

731Name_Not_Found2018/02/16(金) 12:18:40.76ID:???
>>730
ナイスまとめ!

732Name_Not_Found2018/02/16(金) 13:18:36.03ID:???
昔foreignObjectを使って要素のミラーを作るというのを試した記憶があるのですが
今その情報を教えて頂けますか?
「あああ」をミラーしたら「あああ」が2つになって、大本を 「いいい」に変更するとコピー先も「いいい」になるという機能です

733Name_Not_Found2018/02/16(金) 13:20:06.33ID:???
参照渡しやんけ

734Name_Not_Found2018/02/16(金) 13:20:47.53ID:???
ぐぐれば?

735Name_Not_Found2018/02/16(金) 17:13:54.49ID:???
地図上に車のアイコンを置いて決まったルート上(svgのパス上)を動かすアニメーションを考えていて、進行方向に合わせてアイコンの向きを変えたいのですが、何を基準に計算をして向きを調整すれば良いかわからず困っています。
svg関連で角度の計算に使える関数やよい方法があれば教えていただけますか。

動きとしては↓こちらのサイトのようなものです。
https://itstudio.co/sample/svganime/anime7.html

736Name_Not_Found2018/02/16(金) 17:30:02.88ID:???
>>735
その犬の動きのほうがよく分からんw

737Name_Not_Found2018/02/16(金) 17:45:07.03ID:???
三角関数あんじゃん

738Name_Not_Found2018/02/16(金) 19:03:04.44ID:???
ここの奴ら役に立たんな
もうお前らには一切聞かんわ

739Name_Not_Found2018/02/16(金) 19:39:44.83ID:7Rrckydw
>>735
SVGの線上となるとアレだけど
動かすルートが決まっているなら接線の傾き求めればいいじゃない

740Name_Not_Found2018/02/16(金) 19:58:08.01ID:???
そいでそいで?

741Name_Not_Found2018/02/16(金) 20:21:32.71ID:???
>>739
接線か、なるほど気づきませんでした
接線の求め方から勉強してみます。。

742Name_Not_Found2018/02/16(金) 23:25:19.42ID:???
決まったルートがあるならatanだけで済む気がするんだが

743Name_Not_Found2018/02/17(土) 00:43:38.95ID:???
>>736
すみません。アニメーション自体はサイトのようなもので、これに角度の変化を付け加えたいという意味でした。
そしてよく見たらサイトのも微妙にrotateで傾けてますね。。折り返しの際に逆を向いてくれないので考えているものとは違いますが。

744Name_Not_Found2018/02/17(土) 01:07:44.05ID:Y6pp8OiO
>>743
反転はtransformのscaleを使うのが容易いかも

745Name_Not_Found2018/02/17(土) 16:14:43.08ID:???
var test = {
a: 1,
b: 5,
c: 6
}

ってあって
test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか?

746Name_Not_Found2018/02/17(土) 16:16:29.54ID:???
3Dモデルでないと不自然になるよ

747Name_Not_Found2018/02/17(土) 16:19:34.31ID:???
>>745
『javascript test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか?』
のGoogle検索結果を見ていけばわかる

748Name_Not_Found2018/02/17(土) 16:26:59.42ID:???
for(let [key, value] of Object.entries(test)){
console.log(key + ':' + value);
}
こうするとちょっとPHPっぽい

749Name_Not_Found2018/02/17(土) 17:13:27.27ID:???
>>745
for (let v of Object.values(test)) {
console.log(v);
}
とか
Object.values(test).forEach(v => {
console.log(v);
});

750Name_Not_Found2018/02/17(土) 17:23:12.09ID:???
こっちのが汎用的だったか
Object.entries(test).forEach(([key, value], index) => {
console.log(key, value, index);
});

751Name_Not_Found2018/02/17(土) 17:51:17.23ID:???
なんで標準のJavaScriptを使うと
冗長になるのか教えてほしいものだ。

lodashを使ったほうが短いとか意味分からん
_.forOwn(test, (value, key) => {
 console.log(key + ':' + value);
});

752Name_Not_Found2018/02/17(土) 18:17:17.64ID:???
どの言語も普通は標準よりライブラリ使った方が短くならね?

753Name_Not_Found2018/02/17(土) 18:54:43.59ID:???
だよなw
いつものlodashくんがスレチ話するためのエクスキューズのつもりなんだろw

754Name_Not_Found2018/02/17(土) 21:34:02.04ID:???
自作の関数作ればもっと短くなるよね
はいlodash敗北

755Name_Not_Found2018/02/17(土) 21:39:19.11ID:???
ほんとlodashの名前が出るだけで
必死になるなw

756Name_Not_Found2018/02/17(土) 22:26:40.80ID:???
for( var key of test )とかfor( var key in test )じゃダメなん?

757Name_Not_Found2018/02/17(土) 22:58:02.30ID:???

758Name_Not_Found2018/02/17(土) 23:23:30.35ID:???
>>756
前者はそもそもエラーなので論外
後者は普通にあり
entriesやvaluesは使えない環境も多いしね
個人的にはObject.keysを使うことが多いかな
よっぽど大量にループさせるんならfor..in使うけど

759Name_Not_Found2018/02/17(土) 23:59:58.10ID:???
使えない環境はあるがけして多くはない
そんなことを言ったら何もできない
いつまでレガシーブラウザを延命させる気なんだ

760Name_Not_Found2018/02/18(日) 05:22:16.55ID:???
for..inで十分にできて、key / valuesが key / test[key] になる程度の違い
構造は明示されてて
構造が未知だったり完全に信頼できなかったりしない
javascriptはゴルフ絶対主義なんか

761Name_Not_Found2018/02/18(日) 06:20:37.10ID:???
for-inのデメリットは.hasOwnProperties()のチェックを入れるかどうかの問題が発生するから

もちろんオブジェクトにそのチェックが不要だという保証があるなら.hasOwnProperties()で調べる必要はない

762Name_Not_Found2018/02/18(日) 06:23:06.86ID:???
>>745を見れば一目瞭然だな

763Name_Not_Found2018/02/18(日) 06:44:57.56ID:???
hasOwnPropertiesやっててよかったとか
今までに一度もないなw

764Name_Not_Found2018/02/18(日) 08:22:54.79ID:???
for..inは式ではなく文なのがちと煩わしい
とはいえ素のJavaScriptで
Object.values(test).filter(x => x % 2 === 0).map(x => x * 2)
みたく書くと無駄に何度も配列作っちゃうから、そういう意味ではlodashが羨ましい

765Name_Not_Found2018/02/18(日) 09:25:19.82ID:???
プロゴルファー?

766Name_Not_Found2018/02/18(日) 11:31:30.39ID:???
何度も配列作らなくてもforEach内の処理で十分な場合が多い
filterとかしなくてもif returnで良いんだし

767Name_Not_Found2018/02/18(日) 12:02:31.01ID:???
はいはい、俺様専用

768Name_Not_Found2018/02/18(日) 13:05:05.05ID:???
>>766
処理分離したいし破壊的代入はなるべく避けたいじゃん?

769Name_Not_Found2018/02/18(日) 14:10:15.91ID:???
破壊的代入したって頑張ればできるだろ
ほんの少しづつ頑張ればいいだけだよ
小さいものを積み重ねても大きくはならない

770Name_Not_Found2018/02/18(日) 14:12:21.99ID:???
>>768
今回がそもそもfor-inとの対比の話だからな
値を列挙して利用したいというだけだから
配列をどう処理していきたいかみたいな一般論とは話が違う

つまりfor-ループの{}内の置き換えだから、それは素直に考えるとforEachでいいじゃないかと
列挙したい物を連続してフィルタリングしたりする書き方したいか?ということ

771Name_Not_Found2018/02/18(日) 14:23:07.60ID:???
そもそも、すべての属性を取得するような、
メタプログラミングみたいな設計自体がおかしい

もし、テストツール以外で、こういう設計をしていたら、おかしいと思え!

772Name_Not_Found2018/02/18(日) 14:45:12.60ID:???
いやです

新着レスの表示
レスを投稿する