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

**Name_Not_Found** · 2017/11/21(火) 21:58:33.01

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にして見えないようにしてください。文句をつける＝荒らしです

**Name_Not_Found** · 2017/11/21(火) 21:59:12.78

■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 型の中身をそのまま表示してくれます。)

**Name_Not_Found** · 2017/11/21(火) 21:59:43.39

■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 和訳)

**Name_Not_Found** · 2017/11/21(火) 22:00:08.82

■各種仕様 (続き)
◆ 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

**Name_Not_Found** · 2017/11/21(火) 22:06:20.25

>>1
いいね！乙

**Name_Not_Found** · 2017/11/22(水) 00:24:20.79

http://www.hcn.zaq.ne.jp/___/WEB/
だいぶ前からリンク切れ

**Name_Not_Found** · 2017/11/22(水) 01:51:46.08

>>1
ライブラリ禁止の条項をなくした、という事はいつもの人か

**Name_Not_Found** · 2017/11/22(水) 02:09:04.06

ライブラリ禁止をなくせば問題は全て解決する

**Name_Not_Found** · 2017/11/22(水) 02:11:24.02

ライブラリ禁止は質問者やほかの人のためになるかどうかじゃなくて
アンチが荒らす免罪符とてしか使われてないからな

**Name_Not_Found** · 2017/11/22(水) 08:06:26.11

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

**Name_Not_Found** · 2017/11/23(木) 10:24:10.82

>>10
次はちゃんと吟味して更新しておくよ

**Name_Not_Found** · 2017/11/23(木) 15:02:08.95

テンプレが無駄に多いのは１００スレ続く伝統
技術者のクセ

**Name_Not_Found** · 2017/11/23(木) 20:29:10.91

「伝統」は本当にそれでいいのかを常に見直し更新していくのがプログラマのさだめ
「ずっとこうだから」と言った時点でその人はただのコーダー

**Name_Not_Found** · 2017/11/24(金) 00:22:28.46

node.jsの勉強にいいサイトありませんか？

**Name_Not_Found** · 2017/11/24(金) 00:55:02.41

Node.jsで何がしたいの？

**Name_Not_Found** · 2017/11/24(金) 00:56:13.28

Node.jsでどんなことができるの？

**Name_Not_Found** · 2017/11/24(金) 01:29:49.36

前スレに書きましたが、chromeのローカルストレージの実装がLevelDBなので
LevelDBのデータファイルの中身を
node.jsで見ようと思ったのです

**Name_Not_Found** · 2017/11/24(金) 03:16:54.45

おまえら大先生なんだから
本質的にJSというよりライブラリの話だなってわかった時点で誘導してあげればいいじゃん？
そんなにけんけんしないで

**Name_Not_Found** · 2017/11/24(金) 03:52:21.64

殆どがライブラリでも解決できる話題なのでここでやる方がいい
誘導が多い＝ここでやるべき話題ってことだ

**Name_Not_Found** · 2017/11/24(金) 09:01:08.60

質問者がライブラリの話を始めるのが問題なんじゃなくて
ライブラリ使わずとも数行で実現できることであっても
頑なにライブラリを勧めようとする回答者がいることが問題

**Name_Not_Found** · 2017/11/24(金) 09:50:31.51

いろんな回答があって良いのだからライブラリを使った回答でも良い
その人がライブラリを使わない回答を書く義務もない

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

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

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

**Name_Not_Found** · 2017/11/24(金) 10:16:13.72

>>20
それなー
わかるんだけど、初心者とかだと特にjQuery使うだろうから
ピュアJSで教えたら、教えた部分だけ浮いちゃったりするんじゃないかなー
とも思う

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

**Name_Not_Found** · 2017/11/24(金) 10:43:35.24

自分で関数を作ってもある意味ライブラリ

**Name_Not_Found** · 2017/11/24(金) 13:02:29.64

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

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

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

**Name_Not_Found** · 2017/11/24(金) 13:16:13.20

>>23
00年代前半にオレオレライブラリを作ってた記憶が…うっ、頭が

**Name_Not_Found** · 2017/11/24(金) 13:59:17.25

初心者だとjQueryを使うっていう考えに違和感

**Name_Not_Found** · 2017/11/27(月) 15:17:03.43

■テンプレ案
http://fiddle.jshell.net/fH4cC/174/show/light/

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

**Name_Not_Found** · 2017/11/27(月) 22:07:10.95

JavaScriptでたまに
{ ...abc, }
みたいなの見ますが「...」って何なんでしょうか？

**Name_Not_Found** · 2017/11/27(月) 22:45:27.59

>>27
伝統あるテンプレをvol.116から勝手に変えないでください
いい加減怒りますよ？

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

**Name_Not_Found** · 2017/11/27(月) 22:48:15.24

>>28
これ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator

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

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

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

**29 = 30** · 2017/11/27(月) 22:48:53.48

もう一つ、IEに対応する必要があるのであれば
babelやtypescriptを使って変換するという手もある

**Name_Not_Found** · 2017/11/27(月) 22:54:36.34

>>30
スプレッド演算子とかいうやつですか。
調べてみます。ありがとうございます。

**Name_Not_Found** · 2017/11/27(月) 22:54:56.09

スプレッド演算子知らなかった
これ、使える？

**Name_Not_Found** · 2017/11/27(月) 23:13:50.26

ECMA 6 から使える、スプレッド(展開)演算子。
React, JSX でも使える

Babel で、ECMA 5 に変換できる

var attr = {
href: '～',
target: '_blank',
};

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

return (
<a href={attr.href} target={attr.target}>あ</a>
);

29 · 2017/11/27(月) 23:17:10.77

> これ、使える？

ブラウザが対応しているか？ということなら>>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

**Name_Not_Found** · 2017/11/27(月) 23:17:31.95

オブジェクトに関するスプレッド演算子は、以前は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

29 · 2017/11/27(月) 23:27:08.22

>>34
こういう書き方も好き
（hrefやtaget変数に入れておいて何らかの処理をすることはよくあるので）

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

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

**Name_Not_Found** · 2017/11/28(火) 00:07:55.41

>>29
テンプレを勝手に書き換えた>>1にもどうぞ文句を入れて下さいよ

**Name_Not_Found** · 2017/11/28(火) 00:51:34.53

戻しただけなので問題ない

**Name_Not_Found** · 2017/11/28(火) 02:45:01.60

質問テンプレートとか、テンプレも結構後から改変されてるよね
残してほしいところだけ「前からあった」といい、変えては困る場所だけ「勝手に変えるな」と彼はいう

**Name_Not_Found** · 2017/11/28(火) 03:15:00.28

>>40
5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら？
でないのであれば、俺とお前は立場は一緒、
俺がスレの民意をまとめてその内容でテンプレにしただけの話

**Name_Not_Found** · 2017/11/28(火) 07:22:51.26

>>41
>>27のテンプレも当時のスレの民意をまとめて決めたものだけど、なぜその伝統は無視するの？
>>1は事前に話し合ったわけでもなく、彼が独断で決めただけでしょ
話し合いのあった当時と比べるべくもないよ

**Name_Not_Found** · 2017/11/28(火) 07:40:54.97

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

**Name_Not_Found** · 2017/11/28(火) 07:51:59.25

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

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

**Name_Not_Found** · 2017/11/28(火) 10:23:08.52

javascript初歩的な質問で申し訳ありません
var string = "1020304";
string,split("0")
を最初に出てきた0だけで分割して[1,20304]にしたいです
どうすればいいんでしょうか？

**Name_Not_Found** · 2017/11/28(火) 14:48:11.95

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

**Name_Not_Found** · 2017/11/28(火) 15:28:54.71

俺だったらstring,split("0",1)にした後
その結果とその文字数+0を差し引いたものを配列として扱うね

**Name_Not_Found** · 2017/11/28(火) 17:08:12.93

なんでsplitの２番目の引数指定した時の動作が他の言語と違うんだろうか

**Name_Not_Found** · 2017/11/28(火) 19:14:41.20

string.split(/0(.*)/,2)

**Name_Not_Found** · 2017/11/28(火) 19:29:37.54

var string = "1120304"; 場合 >>49だと無理

**Name_Not_Found** · 2017/11/28(火) 20:04:20.45

>>45
/^([1-9]*)0(\d*$)/.exec(string);

**Name_Not_Found** · 2017/11/28(火) 21:01:34.18

>>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"; で破綻する

**Name_Not_Found** · 2017/11/28(火) 22:19:01.45

ライブラリ荒らしは、ライブラリを禁止にした奴が荒らしかな？
とにかく、スレを一杯立てた奴が荒らしなんだよ

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

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

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

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

**Name_Not_Found** · 2017/11/28(火) 22:50:20.27

>>45
> var string = "1020304";
> 分割して[1,20304]にしたいです
まずstringの文字列の法則と、分割後の array は Sｔring なのか、Number なのか
質問に於いての説明が不十分

**Name_Not_Found** · 2017/11/28(火) 22:53:46.60

Vue.js meet upが応募開始10分で100人満員になってた…
Vue.js人気だねー

**Name_Not_Found** · 2017/11/29(水) 00:31:12.26

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

**Name_Not_Found** · 2017/11/29(水) 02:48:43.74

0は成功してる可能性もあるぞ

**Name_Not_Found** · 2017/11/29(水) 07:12:15.77

>>56
クロスドメインかセキュリティポリシーだと思う
hosts触って
http:/exasmple.com
でアクセスした時にローカルを見るようにするといい

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

**Name_Not_Found** · 2017/11/29(水) 07:14:56.47

>>56
プロトコルもホスト名もポート番号すら違って、同一オリジンと見なされるわけがない
CORSについて勉強し直すべき

**Name_Not_Found** · 2017/11/29(水) 20:19:58.42

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

**Name_Not_Found** · 2017/11/29(水) 21:10:01.55

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

**1/2** · 2017/11/29(水) 21:24:24.05

>>60
なんかいろいろずれてる気がするな
web製作板なのだからウェブアプリってことでいいのか？
SPAみたいなアプリを作ると書いているが、あなたが書いている内容は
SPAとは関係ない話になっている。

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

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

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

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

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

**2/2** · 2017/11/29(水) 21:30:41.02

そしてSPAとは関係ない話では有るが、SPAを実装する時は
自力で作るのではなく、何らかのフレームワークを使ったほうが良い

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

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

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

**Name_Not_Found** · 2017/11/29(水) 21:41:57.38

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

**Name_Not_Found** · 2017/11/29(水) 21:51:40.81

漏れもブラウザで、ローカルHTML・JS ファイルから、
jQuery のAjax で、2ch にアクセスしようとしたけど出来なかった

iframe 内になら取得できるけど、外側のHTMLファイルからは、アクセスできない。
内外で、異なるサイトに扱われるから

そこで、ブラウザから、YQL(Yahoo! Query Language)のサービス・サーバーを利用して、
アクセスする方法があった。
jquery.xdomainajax.js も、YQLを使っていたけど、動かなくなった

異なるサイト同士では、直接アクセスできない。
Node.js とか、Node.jsを含んだ、Electron など、
サーバーを立てて、サーバーを介して通信しないといけない

**Name_Not_Found** · 2017/11/29(水) 21:52:12.00

JavaScript一般的にはシリアライズする方法はないので自力でやる必要がある。
そこら辺をフレームワークがカバーしている（かもしれない）
というのが答かな

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

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

**Name_Not_Found** · 2017/11/29(水) 21:55:27.62

>>65
YQLなんていずれだめになるだろう
あれは使うべきではない

**Name_Not_Found** · 2017/11/29(水) 22:00:32.30

入門 React ――コンポーネントベースのWebフロントエンド開発、2015

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

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

**Name_Not_Found** · 2017/11/29(水) 22:03:37.19

怖い例題だな
ブラウザ開発者の機嫌次第で一発でふっとびそう

**Name_Not_Found** · 2017/11/29(水) 22:14:18.15

>>68
> JSON で、localStorage に保存している。
そこは（どうでも）いいんだよね。
表現形式と保存場所の話だから

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

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

**Name_Not_Found** · 2017/11/29(水) 22:21:05.46

PWAっぽい

**Name_Not_Found** · 2017/11/29(水) 22:34:24.67

>>64ですけど、
>>66
>もともとJavaScriptはクラスなんてものはなかったから
>シリアライズすべき変数はなんや？って話なんだよ
ありがとうございます。
いったんクラスというのも忘れて真剣に考えないとダメっぽいですね。

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

**Name_Not_Found** · 2017/11/29(水) 22:43:31.41

Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://github.com/stoyan/reactbook

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

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

**Name_Not_Found** · 2017/11/29(水) 23:12:17.69

>>53
なんか素で勘違いしてそうだからレスするけど
スレをいっぱい立てまくってたのが件のテンプレ改変した人であり前スレとここの>>1だよ

**Name_Not_Found** · 2017/11/29(水) 23:28:35.87

スレをいっぱい立てまくっていたのが、荒らしだろ？
それで皆、苦労したんだろ？

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

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

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

**Name_Not_Found** · 2017/11/29(水) 23:32:17.41

その話いい加減にしてくれないかな？
いま問題なく進行してるだろうが

**Name_Not_Found** · 2017/11/29(水) 23:46:16.66

スレ議論スレでも作れば

**Name_Not_Found** · 2017/11/29(水) 23:48:36.69

>>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など禁止）

**Name_Not_Found** · 2017/11/29(水) 23:53:10.48

>>78
thx
あったんだ、知らなかった・・・

**Name_Not_Found** · 2017/11/30(木) 00:12:37.60

>新しいスレの内容の条件

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

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

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

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

**Name_Not_Found** · 2017/11/30(木) 00:34:22.31

初心者用と普通用ということであれば話題の内容は一緒だ。
どちらもライブラリの話題も対象となる。

**Name_Not_Found** · 2017/11/30(木) 00:46:22.21

というと反対してくるんだろうな
結局ライブラリの話題を禁止したいだけ

**Name_Not_Found** · 2017/11/30(木) 00:50:52.17

初心者用は、主に言語の文法などが、わからない人向け。
普通用は、フレームワーク・ライブラリも含める

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

**Name_Not_Found** · 2017/11/30(木) 01:01:54.94

はいどうぞ
JavaScript 初心者用質問用スレ（ライブラリ禁止）
http://mevius.2ch.net/test/read.cgi/hp/1511971305/

**Name_Not_Found** · 2017/11/30(木) 01:23:35.71

また、初心者用のスレを勝手に立てて、ライブラリ禁止とか書いてる

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

**Name_Not_Found** · 2017/11/30(木) 01:28:02.36

初心者専用のスレがほしいって言ったから立ててやっただけだろ
あとは勝手にメンテしろや
俺は最初からいらないって言ってる

**Name_Not_Found** · 2017/11/30(木) 02:50:24.30

初心者って言ってもどのような初心者かわからないんだから
分けるんなら目的に応じて分けないと駄目でしょ

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

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

**Name_Not_Found** · 2017/11/30(木) 06:42:10.12

ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる

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

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

**Name_Not_Found** · 2017/11/30(木) 08:27:32.88

>>87
勝手にスレ作って勝手に保守してろ
ここが嫌ならさっさとでていけ

**Name_Not_Found** · 2017/11/30(木) 20:23:32.06

ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる

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

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

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

**Name_Not_Found** · 2017/11/30(木) 20:36:33.57

テンプレを勝手に変えた>>1も荒らしということだな
>>1を相手にしないように

**Name_Not_Found** · 2017/11/30(木) 21:08:37.84

既存の配列に他の配列を連結したいのですが、１発でやる方法はないでしょうか？
for (let sourceItem of sourceItems) destItems.push(sourceItem);
現状、ループを回しています。

**Name_Not_Found** · 2017/11/30(木) 21:38:08.27

新しい配列で良いなら
destItems.concat(sourceItems)

**Name_Not_Found** · 2017/11/30(木) 21:42:26.10

JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f

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

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

**Name_Not_Found** · 2017/11/30(木) 22:02:59.31

pushにこだわるなら
Array.prototype.push.apply(destItems,sourceItems);
あるいは
destItems.push(...sourceItems);

**Name_Not_Found** · 2017/11/30(木) 22:36:42.10

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

**Name_Not_Found** · 2017/12/01(金) 02:33:38.45

スプレッドって巨大な配列でやろうとするとエラーになるから嫌いなんだよな

**Name_Not_Found** · 2017/12/01(金) 07:29:45.46

巨大ってどれぐらい？

**Name_Not_Found** · 2017/12/01(金) 08:34:48.80

配列長の制限値を超えた配列作ろうとすればそりゃエラーになるが
別にスプレッド関係ないわな

**Name_Not_Found** · 2017/12/01(金) 09:38:33.33

こんな式を見たのですが、これは何ですか？
var data = ('' == 0 ? '' : '');

**Name_Not_Found** · 2017/12/01(金) 09:46:19.17

文法エラーです

**Name_Not_Found** · 2017/12/01(金) 09:52:55.80

>>101
では、このコードを書いた人はどういう意図で書いたのでしょうか？
JavaScript専門家の方の推理を聞かせて下さい。

**Name_Not_Found** · 2017/12/01(金) 11:35:39.13

>>102
・あなたか「書いた人」が転記ミスしている
・「書いた人」が文法をよくわかっていない

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

**103** · 2017/12/01(金) 11:46:06.60

>>101を鵜呑みにして書いてしまいましたが、文法エラーはないですね。
>>100は

var data = '';

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

**103** · 2017/12/01(金) 11:48:12.00

>>104は

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

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

**Name_Not_Found** · 2017/12/01(金) 17:40:23.92

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

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

**Name_Not_Found** · 2017/12/01(金) 23:36:41.01

jQueryが必要とされなくなってきたのは,Reactなどの他のフレームワークが登場したせいではなく,標準DOM APIが進歩したおかげです
https://www.ncaq.net/2017/12/02/00/00/01/

またなんか勘違いさんというかｗ、結論ありきさんというかｗ

標準DOM APIがいくら進歩したとしても、jQueryにかなわないんだよ。
それは基本的な設計方針の違いのせい

jQueryも標準DOM APIも、どちらもDOM操作をする。
"DOM操作をするならば"、標準DOM APIよりもjQueryの方が優れてるわけで
わざわざjQueryを捨てる理由はない

その一発逆転がありえるのがReactなどのフレームワーク案だよ
"DOM操作をするならば"、jQueryや標準DOM APIが必要
だけど "DOM操作をしないならば"・・・？

そうDOM操作がいらないフレームワークがでてきたから
JavaScriptフレームワーク導入可能な一部の業種においては
jQueryや標準DOM APIがいらなくなってきたという話
DOM操作がいるならば、これからもjQueryが必要だって

**Name_Not_Found** · 2017/12/02(土) 00:00:42.05

　jQueryをフレームワークにすればと思うけど

**Name_Not_Found** · 2017/12/02(土) 01:01:06.91

>>100-105
式 ? a : b
3項演算子は、式が真なら a で、偽なら b だろ

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

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

**Name_Not_Found** · 2017/12/02(土) 01:25:47.76

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

**Name_Not_Found** · 2017/12/02(土) 01:26:42.28

訂正

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

**Name_Not_Found** · 2017/12/02(土) 01:29:18.11

もちろん、意味があるコードかもしれないとは言うが
無駄かつ良くないコードだとも言う
普通はこんな書き方はしない。
こんな書き方はしないが意味が無いとは言い切れない

**Name_Not_Found** · 2017/12/02(土) 09:12:56.52

>>112
無駄なコードを意味がないコードと表現してるだけだろ
言葉遊びも程々にしろ

**Name_Not_Found** · 2017/12/02(土) 09:14:30.51

論理演算の意味がない

**Name_Not_Found** · 2017/12/02(土) 09:22:55.15

三項演算子を出力する意味がない

**Name_Not_Found** · 2017/12/02(土) 18:16:31.30

>>113
「0だったら空文字にしたい」という要望があったとしたら
それを正しく実装しているわけで無駄ではないよ

**Name_Not_Found** · 2017/12/03(日) 00:19:35.36

>>116
それは三項演算子ではなく、ただのif文だろ
それと「無駄かつ良くないコードだとも言う」に言及して反論してるのだが、前言撤回もここまで早いと信頼性ゼロだな

**Name_Not_Found** · 2017/12/03(日) 00:42:59.95

>>117
少なくともifであることは認めたようだが
あんたにとって三項演算子とifの違いって何？

**118** · 2017/12/03(日) 00:44:06.26

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

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

**Name_Not_Found** · 2017/12/03(日) 00:46:44.07

>>118
質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら、話はここで終わりだな

**Name_Not_Found** · 2017/12/03(日) 00:47:37.59

> 質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら

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

**Name_Not_Found** · 2017/12/03(日) 00:48:48.68

無駄かつ良くないコードだが
ちゃんと動く

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

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

**Name_Not_Found** · 2017/12/03(日) 00:49:05.59

>>119
>>112では「無駄」と認めながら>>116では「無駄ではない」といってるだろ
前後で主張が変化する奴は信用できない

**Name_Not_Found** · 2017/12/03(日) 00:50:11.59

あ、揚げ足取っていただけかｗ

**Name_Not_Found** · 2017/12/03(日) 00:54:47.33

揚げ足ではないような
自己矛盾を抱える人は日本語が分かってない人という典型かな

**Name_Not_Found** · 2017/12/03(日) 01:10:35.99

日本語がわからんやつは困るね。いちいち説明せんといかんのかね
コードが無駄だってだけで動作は無駄じゃないってことだよ
ちゃんと書いてあるだろ

**Name_Not_Found** · 2017/12/03(日) 14:02:27.52

動作自体が無駄

**Name_Not_Found** · 2017/12/03(日) 14:11:59.68

じゃあ無駄じゃない動作とは？

**Name_Not_Found** · 2017/12/03(日) 14:27:27.65

祈りの所作

**Name_Not_Found** · 2017/12/03(日) 16:24:26.70

必要なことをやっているけど無駄の多いコードは冗長なコードというべきではないか

**Name_Not_Found** · 2017/12/03(日) 17:55:51.86

1 + 1 // ->
で2が出力されるのですが、これは何でしょうか？？？

**Name_Not_Found** · 2017/12/04(月) 12:45:59.51

>>130
>>130
「冗長」の意味を調べなおした方がいいのではないか。

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

**Name_Not_Found** · 2017/12/04(月) 13:17:53.26

> 必要なことをやっているけど無駄の多いコード
「必要」と「無駄」は対義語
必要なことをやっているなら無駄ではない

**Name_Not_Found** · 2017/12/04(月) 13:19:29.68

>>132
なるほど、この場合はコードに無駄が多くて長いが
処理そのものには意味がある（無駄ではない）ってことだな

**Name_Not_Found** · 2017/12/04(月) 13:20:38.96

>>133
必要の対義語は不必要ってでてきたけど？

**Name_Not_Found** · 2017/12/04(月) 18:31:21.62

必要かつ無駄は矛盾してると思うけどね

**Name_Not_Found** · 2017/12/04(月) 18:45:27.08

>>136
日本語ひどすぎねぇか・・
「必要」かつ「無駄」ってそれぞれ修飾してる語が違うんだけど

**Name_Not_Found** · 2017/12/04(月) 18:47:12.01

>>134
いつも通りの曲解だな

**Name_Not_Found** · 2017/12/04(月) 18:48:18.37

>>137
俺は無駄なコードを書いている
俺は必要なことをやっている(無駄なコードを書く事は必要である)

**Name_Not_Found** · 2017/12/04(月) 21:08:50.03

必要なことをやっているコードと
必要なことだけで書かれてるコードは違うだろう

**139** · 2017/12/04(月) 21:14:31.74

意味不明な論理だし、直接的に反論しないところがいやらしいな

**Name_Not_Found** · 2017/12/04(月) 21:18:43.71

つまりダムってことだな

**Name_Not_Found** · 2017/12/04(月) 21:20:39.67

>>112はいつもの日本語破綻者だしなあ
曖昧に濁して、相手の反応を伺う事で糸口を探してるんだろ

**Name_Not_Found** · 2017/12/04(月) 21:53:11.51

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

**Name_Not_Found** · 2017/12/04(月) 22:13:47.23

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

**Name_Not_Found** · 2017/12/04(月) 23:25:30.85

idをつけない、という選択肢もあるんじゃないかな
押したボタンから日付を取得したいなら、カスタムデータ属性なり、button要素でvalue属性を使うなり、手はいくらでもある

**Name_Not_Found** · 2017/12/04(月) 23:48:01.31

>>145
>>146も書いているけどそういうIDが必要になるのがおかしい気がするね。
JavaScriptのスレに書いてるってことは、JavaScriptからそれらを参照するつもりなのだろう

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

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

**Name_Not_Found** · 2017/12/05(火) 00:40:08.94

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

**Name_Not_Found** · 2017/12/05(火) 00:54:54.75

>>148
そのマス目に入れるものが日付だけならtime要素を使うのが良いかもね
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time

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

**Name_Not_Found** · 2017/12/06(水) 17:17:54.46

['みかん','りんご','みかん','ばなな','りんご','りんご',]から
一番出現回数の多い「りんご」を得るにはどうすればいいでしょうか？

**Name_Not_Found** · 2017/12/06(水) 18:26:46.19

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

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

**Name_Not_Found** · 2017/12/06(水) 18:33:37.87

>>151
すまん、 reduce の使い方がダメダメだったので取り消す

**Name_Not_Found** · 2017/12/06(水) 22:06:13.37

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 に入れたけど、最大値が複数ある場合の、処理がわからない

**Name_Not_Found** · 2017/12/07(木) 00:27:44.39

>>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);
// => ["りんご"]

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

**Name_Not_Found** · 2017/12/07(木) 15:49:48.80

>>154
ありがとうございます
やっぱりライブラリ使わないと難しそうですね

**Name_Not_Found** · 2017/12/07(木) 21:15:11.79

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

**Name_Not_Found** · 2017/12/07(木) 23:12:55.32

すごいな。ちゃんとconstだけでかけちゃってる

**Name_Not_Found** · 2017/12/07(木) 23:19:30.37

Haxe で書いた通り、まずMap が必要だから、
ES6(2015) + Babel で、ES5 へ変換

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

Lodash も、ES6 もほぼ同じ

**Name_Not_Found** · 2017/12/08(金) 00:00:01.13

ES6は必要最小限しか言語機能として搭載しない
という考え方があるから、高度なことはできんよ

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

**Name_Not_Found** · 2017/12/08(金) 00:20:11.03

ES6 が流行れば、Underscore/Lodash がいらなくなる、という記事が一杯あるけど

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

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

**Name_Not_Found** · 2017/12/08(金) 01:46:22.33

>>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とかの構図は変わらない

**Name_Not_Found** · 2017/12/08(金) 01:53:01.14

初歩的な質問で恐縮ですが、お分かりの方ご教授ください。

画像のパスの一部を書き換えるjsを書いてるんですが
ネットで調べてページすべての画像は↓で変更できるようになったのですが、
特定のclass（<div class="gallery">）の中にある<img>画像だけ書き換える時の書き方がわかりません。
jsマスターの方、ご教授ください。

window.onload = function() {
var images = document.images;
for (var i=0, n=images.length; i<n; i++) {
var img = images[i];
img.src = img.src.replace(/xxx/, 'xxx_s');
}
};

**Name_Not_Found** · 2017/12/08(金) 02:01:45.73

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

**Name_Not_Found** · 2017/12/08(金) 02:06:22.46

>>162
jQueryが得意そうな課題だなｗ
動かしてないけどこんな感じかな

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

**Name_Not_Found** · 2017/12/08(金) 02:06:56.67

>>162
var images = document.querySelectorAll("div.gallery img");

**162** · 2017/12/08(金) 02:23:12.26

>>164
>>165
さっそくありがとうございます。
お二方のコード双方動きました。
動くと嬉しいですね～。

**Name_Not_Found** · 2017/12/08(金) 02:50:47.41

>>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を使ったんだ？っていうねｗ

**Name_Not_Found** · 2017/12/08(金) 03:16:43.69

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

**Name_Not_Found** · 2017/12/08(金) 03:19:02.22

普通にググって見つかるので

**153** · 2017/12/08(金) 06:13:25.95

Ruby 初心者スレッド Part 62
https://mevius.5ch.net/test/read.cgi/tech/1511451329/96

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

**Name_Not_Found** · 2017/12/08(金) 06:29:21.92

>>163
答えが複数ある場合でも、OK だね

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

**Name_Not_Found** · 2017/12/08(金) 12:42:30.79

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

**Name_Not_Found** · 2017/12/08(金) 21:54:48.56

>>171
何を持って複雑というかだね。

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

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

**Name_Not_Found** · 2017/12/08(金) 21:57:13.56

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

こうすればいいだけだよ

**Name_Not_Found** · 2017/12/08(金) 22:06:48.91

>>173
> 何を持って複雑というかだね。
いや、複雑の定義は（いくつか有るとは言え）ソフトウェア業界で決まってるんだから
いくつか有るうちのどれかに従おうよｗ

オンラインで複雑度を調べるサイトぐぐってみたら
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

**Name_Not_Found** · 2017/12/08(金) 22:20:56.36

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: 保守容易性（高い方がいい）

**Name_Not_Found** · 2017/12/09(土) 00:53:25.98

>>175-176
ライブラリのコードを含めて比較しなければ公正とはいえない

**166** · 2017/12/09(土) 00:53:30.06

>>167
両方動きました！
上級者になると一行で書けるんですね。

**Name_Not_Found** · 2017/12/09(土) 00:55:50.83

>>177
ライブラリの部分は十分にテストされて書かなくていい部分だから
そこを含める必要はないよ

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

**Name_Not_Found** · 2017/12/09(土) 02:40:12.73

自分の書くコードをシンプルにするためにライブラリを使うのに
ライブラリを使ってシンプルにするなど許さん！
ライブラリの分まで含めるのが公平だ！なんて言ってるのか？
どんだけ複雑すれば気が済むんだろうか

**Name_Not_Found** · 2017/12/09(土) 03:09:49.01

そもそも複雑度ってファイルごと、クラスごと、関数毎に出すものだから
例えライブラリが複雑だとしても、

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

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

対するは、

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

となるだけの話

**Name_Not_Found** · 2017/12/09(土) 09:12:58.40

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

**Name_Not_Found** · 2017/12/09(土) 10:16:41.91

>>182
それで何が言いたいのさ？
否定だけして、お前の意見が何も書いてないぞ

**Name_Not_Found** · 2017/12/10(日) 03:05:54.10

プログラム板にも、荒らしが出てるぞ

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

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

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

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

**Name_Not_Found** · 2017/12/10(日) 14:47:13.97

sortを使えばいいと思う
こんな感じで

let fruits = [ 'みかん', 'りんご', 'みかん', 'みかん', 'ばなな', 'りんご', 'りんご', ]

let map = new Map
for(let f of fruits) map.set(f, (map.get(f)|0)+1 )
let [[max]] = [...map].sort( ([,a],[,b])=>b-a )

**Name_Not_Found** · 2017/12/10(日) 15:18:23.37

>>185
最大を複数取得したい場合は？

**Name_Not_Found** · 2017/12/10(日) 16:09:19.03

誰が複数取得したいなんていったんだ？

**Name_Not_Found** · 2017/12/10(日) 16:19:48.14

>>166が言ってるけど？

**Name_Not_Found** · 2017/12/10(日) 16:20:04.59

>>186の間違い

**Name_Not_Found** · 2017/12/10(日) 17:45:40.53

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

**Name_Not_Found** · 2017/12/10(日) 20:34:15.96

コードゴルフってやつだね

**Name_Not_Found** · 2017/12/10(日) 20:43:06.10

>>190くらいなら同時に把握しない要素数が１０も無いから
プログラマのワーキングメモリに乗るという意味で普通のコードの範疇だと思う

**Name_Not_Found** · 2017/12/10(日) 20:59:52.72

関数や命令を知っているという前提で、1行の処理を把握するのに
5秒以上かかるようなものは普通のコードではないと思う
コードは読むものであって、解析するものになってはいけない

**Name_Not_Found** · 2017/12/10(日) 22:45:15.56

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

**Name_Not_Found** · 2017/12/10(日) 22:47:45.60

> つかそもそも読む必要はできるだけ少ないほうが良い

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

**Name_Not_Found** · 2017/12/10(日) 22:50:53.43

> fruits.sort().reduce( (c,f,i,a,n=c|0) => (f==a[i+1]) ? n+1 : (ary[n] = [f,...ary[n]||[]]), 0 )

このコードの読むもの = トークンはどれくらいあるのかざっくり数えてみた
（カッコは省略、連続する変数定義は一つにまとめた）

fruits
sort
reduce
c,f,i,a,n
=
c|0)
=> (
f==a[
i+1]
) ?
n+1
:
(ary[n] = [
f,...ary[n]
||[]
]), 0 )

全部で16個ぐらい
これぐらいの量を、ひとつづつ意味を考えながら
読んでいかないといけない

**153** · 2017/12/11(月) 01:05:24.91

>>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回走査してしまう。
一発で取得できないから、無駄を感じる

**Name_Not_Found** · 2017/12/11(月) 05:39:34.10

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

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

**Name_Not_Found** · 2017/12/11(月) 05:43:08.85

> そもそも一度限りのかき捨てのコードなんだから読む必要がない

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

**Name_Not_Found** · 2017/12/11(月) 05:53:03.70

> 問題があれば捨てればいいだけでその時に例えば>>174のような感じだと
> ４個も公開変数があるから結局一部を捨てたりということもしづらい

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

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