+ 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 ? '' : '');

新着レスの表示
レスを投稿する