X



+ JavaScript の質問用スレッド vol.131 +
■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2017/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にして見えないようにしてください。文句をつける=荒らしです
0002Name_Not_Found
垢版 |
2017/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 型の中身をそのまま表示してくれます。)
0003Name_Not_Found
垢版 |
2017/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 和訳)
0004Name_Not_Found
垢版 |
2017/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
0007Name_Not_Found
垢版 |
2017/11/22(水) 01:51:46.08ID:???
>>1
ライブラリ禁止の条項をなくした、という事はいつもの人か
0008Name_Not_Found
垢版 |
2017/11/22(水) 02:09:04.06ID:???
ライブラリ禁止をなくせば問題は全て解決する
0009Name_Not_Found
垢版 |
2017/11/22(水) 02:11:24.02ID:???
ライブラリ禁止は質問者やほかの人のためになるかどうかじゃなくて
アンチが荒らす免罪符とてしか使われてないからな
0010Name_Not_Found
垢版 |
2017/11/22(水) 08:06:26.11ID:???
だからテンプレリンクあまりに多すぎだって
こんな沢山のリンク読む人はいない
MSDNだってMDNに統合されるし、リファレンスはMDNだけで十分
WHATWGとかW3CはMDNを読んでもっと詳しく知りたいと思った人が勝手にたどり着く
ES仕様もしかり、ここで紹介しても仕方がない
0011Name_Not_Found
垢版 |
2017/11/23(木) 10:24:10.82ID:???
>>10
次はちゃんと吟味して更新しておくよ
0012Name_Not_Found
垢版 |
2017/11/23(木) 15:02:08.95ID:???
テンプレが無駄に多いのは100スレ続く伝統
技術者のクセ
0013Name_Not_Found
垢版 |
2017/11/23(木) 20:29:10.91ID:???
「伝統」は本当にそれでいいのかを常に見直し更新していくのがプログラマのさだめ
「ずっとこうだから」と言った時点でその人はただのコーダー
0014Name_Not_Found
垢版 |
2017/11/24(金) 00:22:28.46ID:???
node.jsの勉強にいいサイトありませんか?
0016Name_Not_Found
垢版 |
2017/11/24(金) 00:56:13.28ID:???
Node.jsでどんなことができるの?
0017Name_Not_Found
垢版 |
2017/11/24(金) 01:29:49.36ID:???
前スレに書きましたが、chromeのローカルストレージの実装がLevelDBなので
LevelDBのデータファイルの中身を
node.jsで見ようと思ったのです
0018Name_Not_Found
垢版 |
2017/11/24(金) 03:16:54.45ID:qZ01KuDr
おまえら大先生なんだから
本質的にJSというよりライブラリの話だなってわかった時点で誘導してあげればいいじゃん?
そんなにけんけんしないで
0019Name_Not_Found
垢版 |
2017/11/24(金) 03:52:21.64ID:???
殆どがライブラリでも解決できる話題なのでここでやる方がいい
誘導が多い=ここでやるべき話題ってことだ
0020Name_Not_Found
垢版 |
2017/11/24(金) 09:01:08.60ID:???
質問者がライブラリの話を始めるのが問題なんじゃなくて
ライブラリ使わずとも数行で実現できることであっても
頑なにライブラリを勧めようとする回答者がいることが問題
0021Name_Not_Found
垢版 |
2017/11/24(金) 09:50:31.51ID:???
いろんな回答があって良いのだからライブラリを使った回答でも良い
その人がライブラリを使わない回答を書く義務もない

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

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

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

>>21がごもっともだと思う
こうも書けるよ!って言うだけで良いのだろうなと
0023Name_Not_Found
垢版 |
2017/11/24(金) 10:43:35.24ID:???
自分で関数を作ってもある意味ライブラリ
0024Name_Not_Found
垢版 |
2017/11/24(金) 13:02:29.64ID:???
>>14-17
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017

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

nmp の、immutable パッケージで、データを変更不能にしたり
0025Name_Not_Found
垢版 |
2017/11/24(金) 13:16:13.20ID:???
>>23
00年代前半にオレオレライブラリを作ってた記憶が…うっ、頭が
0026Name_Not_Found
垢版 |
2017/11/24(金) 13:59:17.25ID:???
初心者だとjQueryを使うっていう考えに違和感
0027Name_Not_Found
垢版 |
2017/11/27(月) 15:17:03.43ID:???
■テンプレ案
http://fiddle.jshell.net/fH4cC/174/show/light/

■諸注意
vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の話題はvol.116から禁止されました。
vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。
本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。
ライブラリの話題はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。
0028Name_Not_Found
垢版 |
2017/11/27(月) 22:07:10.95ID:???
JavaScriptでたまに
{ ...abc, }
みたいなの見ますが「...」って何なんでしょうか?
0029Name_Not_Found
垢版 |
2017/11/27(月) 22:45:27.59ID:???
>>27
伝統あるテンプレをvol.116から勝手に変えないでください
いい加減怒りますよ?

勝手に変えて良いのであれば、vol.131からライブラリは解禁になりました。
スレの住民の意見をちゃんと取り入れましょう
0030Name_Not_Found
垢版 |
2017/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も古いやつは使えないが
これらの古いやつはシェア低いので無視していいだろう
003129 = 30
垢版 |
2017/11/27(月) 22:48:53.48ID:???
もう一つ、IEに対応する必要があるのであれば
babelやtypescriptを使って変換するという手もある
0032Name_Not_Found
垢版 |
2017/11/27(月) 22:54:36.34ID:???
>>30
スプレッド演算子とかいうやつですか。
調べてみます。ありがとうございます。
0033Name_Not_Found
垢版 |
2017/11/27(月) 22:54:56.09ID:???
スプレッド演算子知らなかった
これ、使える?
0034Name_Not_Found
垢版 |
2017/11/27(月) 23:13:50.26ID:???
ECMA 6 から使える、スプレッド(展開)演算子。
React, JSX でも使える

Babel で、ECMA 5 に変換できる

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

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

return (
<a href={attr.href} target={attr.target}>あ</a>
);
003529
垢版 |
2017/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
0036Name_Not_Found
垢版 |
2017/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
003729
垢版 |
2017/11/27(月) 23:27:08.22ID:???
>>34
こういう書き方も好き
(hrefやtaget変数に入れておいて何らかの処理をすることはよくあるので)

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

return <a {...attr}>あ</a>
0038Name_Not_Found
垢版 |
2017/11/28(火) 00:07:55.41ID:???
>>29
テンプレを勝手に書き換えた>>1にもどうぞ文句を入れて下さいよ
0039Name_Not_Found
垢版 |
2017/11/28(火) 00:51:34.53ID:???
戻しただけなので問題ない
0040Name_Not_Found
垢版 |
2017/11/28(火) 02:45:01.60ID:???
質問テンプレートとか、テンプレも結構後から改変されてるよね
残してほしいところだけ「前からあった」といい、変えては困る場所だけ「勝手に変えるな」と彼はいう
0041Name_Not_Found
垢版 |
2017/11/28(火) 03:15:00.28ID:???
>>40
5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら?
でないのであれば、俺とお前は立場は一緒、
俺がスレの民意をまとめてその内容でテンプレにしただけの話
0042Name_Not_Found
垢版 |
2017/11/28(火) 07:22:51.26ID:???
>>41
>>27のテンプレも当時のスレの民意をまとめて決めたものだけど、なぜその伝統は無視するの?
>>1は事前に話し合ったわけでもなく、彼が独断で決めただけでしょ
話し合いのあった当時と比べるべくもないよ
0044Name_Not_Found
垢版 |
2017/11/28(火) 07:51:59.25ID:???
>>41
> 5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら?
> 俺がスレの民意をまとめてその内容でテンプレにしただけの話
君が>>1なら、>>1のルールを守るのは最低限の礼儀だと思うよ

> ・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
0045Name_Not_Found
垢版 |
2017/11/28(火) 10:23:08.52ID:QIJXvf1S
javascript初歩的な質問で申し訳ありません
var string = "1020304";
string,split("0")
を最初に出てきた0だけで分割して[1,20304]にしたいです
どうすればいいんでしょうか?
0046Name_Not_Found
垢版 |
2017/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);
0047Name_Not_Found
垢版 |
2017/11/28(火) 15:28:54.71ID:???
俺だったらstring,split("0",1)にした後
その結果とその文字数+0を差し引いたものを配列として扱うね
0048Name_Not_Found
垢版 |
2017/11/28(火) 17:08:12.93ID:???
なんでsplitの2番目の引数指定した時の動作が他の言語と違うんだろうか
0052Name_Not_Found
垢版 |
2017/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"; で破綻する
0053Name_Not_Found
垢版 |
2017/11/28(火) 22:19:01.45ID:???
ライブラリ荒らしは、ライブラリを禁止にした奴が荒らしかな?
とにかく、スレを一杯立てた奴が荒らしなんだよ

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

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

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

とにかく、JavaScript の情報を書いてない奴とは、会話しないように。
そいつは荒らしだから
0054Name_Not_Found
垢版 |
2017/11/28(火) 22:50:20.27ID:???
>>45
> var string = "1020304";
> 分割して[1,20304]にしたいです
まずstringの文字列の法則と、分割後の array は String なのか、Number なのか
質問に於いての説明が不十分
0055Name_Not_Found
垢版 |
2017/11/28(火) 22:53:46.60ID:???
Vue.js meet upが応募開始10分で100人満員になってた…
Vue.js人気だねー
0056Name_Not_Found
垢版 |
2017/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は出来ないのでしょうか?
(そうなるとデバッグが微妙に面倒です)
0057Name_Not_Found
垢版 |
2017/11/29(水) 02:48:43.74ID:???
0は成功してる可能性もあるぞ
0059Name_Not_Found
垢版 |
2017/11/29(水) 07:14:56.47ID:???
>>56
プロトコルもホスト名もポート番号すら違って、同一オリジンと見なされるわけがない
CORSについて勉強し直すべき
0060Name_Not_Found
垢版 |
2017/11/29(水) 20:19:58.42ID:???
SPAみたいなアプリを作るんですが、内部の状態を全部保存して、次にアプリを表示したときに
復元するのですが、普通の静的型付け言語ならモデルにメソッド追加したりしても、
大抵は元に簡単に戻せるんですが、JavaScriptではどうすればいいんでしょうか??
JSONじゃなくてもいいんですが、自前でシリアライズ・デシリアライズする処理を
かいてるんでしょうか??
0061Name_Not_Found
垢版 |
2017/11/29(水) 21:10:01.55ID:???
メソッドごと保存しようというのは正しくない
まず、仮想DOM的なものを設計して、HTMLでもCanvasでもアタッチ出来るくらいのビューを用意する
そしてそのビューに対してこれからどういう変更を加えるか、加えてきたかのアクションチェーンを設計する
実行はアクションチェーンを読み出しつつ各アクションの種類に応じてswichを使ったりして行う
保存はアクションチェーンオブジェクトと仮想DOMオブジェクトをそのままIndexedDBなんかに保存すれば良い
JSONは循環参照を扱えないのでオススメしない、まあ循環参照だけならほぐしてJSON化可能だが
画像なんかのバイナリも別に保存したいこともあろうからIDBがオススメ
1アクション中のアニメーションだったり、もうちょっと工夫が必要だがそれで概ね上手くいく
00621/2
垢版 |
2017/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形式を用いればそれは大したことじゃない
00632/2
垢版 |
2017/11/29(水) 21:30:41.02ID:???
そしてSPAとは関係ない話では有るが、SPAを実装する時は
自力で作るのではなく、何らかのフレームワークを使ったほうが良い

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

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


ちなみになぜ「SPAアプリを作るというのが本当の目的であれば」なんて
わざわざ言ってるのかというと繰り返すが>>60の内容はSPAアプリを
作る時の話とは関係ないから
0064Name_Not_Found
垢版 |
2017/11/29(水) 21:41:57.38ID:???
>>60ですが、そこまでは書きませんでしたが、実際はReactを使います。で、それと他にRedux使うかMobX使うかとか
どうするか色々調べてるところです。例えば、MobXとか使うと元のオブジェクトがラップしてオーブザーバルになるみたいんです。
React使う前にも他にデータバインディングできるライブラリを調べると、元のオブジェクトをラップしたり
とか何種類か方法があるみたいんですが、そららを使うと
JavaScriptのobject(配列や連想配列)≒JSONじゃなくなるっぽいので、一般的にどうすればいいのかなと
思った次第です。
0065Name_Not_Found
垢版 |
2017/11/29(水) 21:51:40.81ID:???
漏れもブラウザで、ローカルHTML・JS ファイルから、
jQuery のAjax で、2ch にアクセスしようとしたけど出来なかった

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

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

異なるサイト同士では、直接アクセスできない。
Node.js とか、Node.jsを含んだ、Electron など、
サーバーを立てて、サーバーを介して通信しないといけない
0066Name_Not_Found
垢版 |
2017/11/29(水) 21:52:12.00ID:???
JavaScript一般的にはシリアライズする方法はないので自力でやる必要がある。
そこら辺をフレームワークがカバーしている(かもしれない)
というのが答かな


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

ローカル変数を使われるとクラス(に相当する関数)の外から見る方法はないし、
関数を値として扱えるから、関数のコードをシリアライズするの?って話まででてくるし
0067Name_Not_Found
垢版 |
2017/11/29(水) 21:55:27.62ID:???
>>65
YQLなんていずれだめになるだろう
あれは使うべきではない
0068Name_Not_Found
垢版 |
2017/11/29(水) 22:00:32.30ID:???
入門 React ――コンポーネントベースのWebフロントエンド開発、2015

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

Stefanov の本では、Flux を使って、JSON で、localStorage に保存している。
まあ、これは例題だから、実際には、DB を使うのだろう
0069Name_Not_Found
垢版 |
2017/11/29(水) 22:03:37.19ID:???
怖い例題だな
ブラウザ開発者の機嫌次第で一発でふっとびそう
0070Name_Not_Found
垢版 |
2017/11/29(水) 22:14:18.15ID:???
>>68
> JSON で、localStorage に保存している。
そこは(どうでも)いいんだよね。
表現形式と保存場所の話だから

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

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

>>68
そうですね。redux使うと、完全にStoreはシンプルになるので、そのまんまシリアライズ・デシリアライズ
できそうなんで、そこは楽そうなんですが、redux自体がactionやらactionCreaters,Reducersやらで・・
0073Name_Not_Found
垢版 |
2017/11/29(水) 22:43:31.41ID:???
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://github.com/stoyan/reactbook

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

インスタンスの保存だけど、メソッドは保存しない。
保存するのは、データだけ
0074Name_Not_Found
垢版 |
2017/11/29(水) 23:12:17.69ID:???
>>53
なんか素で勘違いしてそうだからレスするけど
スレをいっぱい立てまくってたのが件のテンプレ改変した人であり前スレとここの>>1だよ
0075Name_Not_Found
垢版 |
2017/11/29(水) 23:28:35.87ID:???
スレをいっぱい立てまくっていたのが、荒らしだろ?
それで皆、苦労したんだろ?

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

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

スレを分けるなら、プログラム板のように、
初心者向け・上級者向けに分けるべき
0076Name_Not_Found
垢版 |
2017/11/29(水) 23:32:17.41ID:???
その話いい加減にしてくれないかな?
いま問題なく進行してるだろうが
0077Name_Not_Found
垢版 |
2017/11/29(水) 23:46:16.66ID:???
スレ議論スレでも作れば
0078Name_Not_Found
垢版 |
2017/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など禁止)
0079Name_Not_Found
垢版 |
2017/11/29(水) 23:53:10.48ID:???
>>78
thx
あったんだ、知らなかった・・・
0080Name_Not_Found
垢版 |
2017/11/30(木) 00:12:37.60ID:???
>新しいスレの内容の条件

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

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

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

次スレからは、プログラム板のように、
スレを初心者向けと、普通用に分けてくれ
0081Name_Not_Found
垢版 |
2017/11/30(木) 00:34:22.31ID:???
初心者用と普通用ということであれば話題の内容は一緒だ。
どちらもライブラリの話題も対象となる。
0082Name_Not_Found
垢版 |
2017/11/30(木) 00:46:22.21ID:???
というと反対してくるんだろうな
結局ライブラリの話題を禁止したいだけ
0083Name_Not_Found
垢版 |
2017/11/30(木) 00:50:52.17ID:???
初心者用は、主に言語の文法などが、わからない人向け。
普通用は、フレームワーク・ライブラリも含める

プログラム板もそうだし、これで良い
0085Name_Not_Found
垢版 |
2017/11/30(木) 01:23:35.71ID:???
また、初心者用のスレを勝手に立てて、ライブラリ禁止とか書いてる

こいつがいつもスレを一杯立てる、荒らしじゃないのか?
0086Name_Not_Found
垢版 |
2017/11/30(木) 01:28:02.36ID:???
初心者専用のスレがほしいって言ったから立ててやっただけだろ
あとは勝手にメンテしろや
俺は最初からいらないって言ってる
0087Name_Not_Found
垢版 |
2017/11/30(木) 02:50:24.30ID:???
初心者って言ってもどのような初心者かわからないんだから
分けるんなら目的に応じて分けないと駄目でしょ

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

これまでの質問スレは終了
0088Name_Not_Found
垢版 |
2017/11/30(木) 06:42:10.12ID:???
ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる

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

今まで、Lodash厨が荒らしかと思っていたけど、荒らしじゃなかった。
誰が荒らしか、ようやく分かった
0089Name_Not_Found
垢版 |
2017/11/30(木) 08:27:32.88ID:???
>>87
勝手にスレ作って勝手に保守してろ
ここが嫌ならさっさとでていけ
0090Name_Not_Found
垢版 |
2017/11/30(木) 20:23:32.06ID:???
ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる

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

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

皆、荒らしと会話しないように。
もし気付かず、荒らしと会話している人がいたら、荒らしと教えてあげて
0091Name_Not_Found
垢版 |
2017/11/30(木) 20:36:33.57ID:???
テンプレを勝手に変えた>>1も荒らしということだな
>>1を相手にしないように
0092Name_Not_Found
垢版 |
2017/11/30(木) 21:08:37.84ID:???
既存の配列に他の配列を連結したいのですが、1発でやる方法はないでしょうか?
for (let sourceItem of sourceItems) destItems.push(sourceItem);
現状、ループを回しています。
0093Name_Not_Found
垢版 |
2017/11/30(木) 21:38:08.27ID:???
新しい配列で良いなら
destItems.concat(sourceItems)
0095Name_Not_Found
垢版 |
2017/11/30(木) 22:02:59.31ID:???
pushにこだわるなら
Array.prototype.push.apply(destItems,sourceItems);
あるいは
destItems.push(...sourceItems);
0096Name_Not_Found
垢版 |
2017/11/30(木) 22:36:42.10ID:???
既存の配列を書き換えたいのです。要は破壊的結合で。
destItems.push(...sourceItems);
ああ、pushでそんな書き方できたんですか・・
>>28で教えてもらったスプレッド演算子ってやつですね。
ありがとうございます。
0097Name_Not_Found
垢版 |
2017/12/01(金) 02:33:38.45ID:???
スプレッドって巨大な配列でやろうとするとエラーになるから嫌いなんだよな
0099Name_Not_Found
垢版 |
2017/12/01(金) 08:34:48.80ID:???
配列長の制限値を超えた配列作ろうとすればそりゃエラーになるが
別にスプレッド関係ないわな
0100Name_Not_Found
垢版 |
2017/12/01(金) 09:38:33.33ID:X7oqfLY+
こんな式を見たのですが、これは何ですか?
var data = ('' == 0 ? '' : '');
■ このスレッドは過去ログ倉庫に格納されています

ニューススポーツなんでも実況