+ JavaScript の質問用スレッド vol.143 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」＋!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです
■前スレ
+ JavaScript の質問用スレッド vol.142 +
https://mevius.5ch.net/test/read.cgi/hp/1568622157/ ■FAQ
◆開発者ツール(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 型の中身をそのまま表示してくれます。) ■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ （githubのアカウントが必要です）にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証（要出典）されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様
◆ 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 和訳) Q. jQueryはどのバージョンを使えばいいのですか？
A. IE9以上であれば、jQuery 3.0を使用してください。
IE8以下にも対応するならば、jQuery 1.12を使用してください。
補足
jQuery 1.9 までは一系統しかなく、古いブラウザも含めて全て対応していました。
その後、古いブラウザを切り捨てるためにバージョンを分岐させました。
古いブラウザにも対応した1系（1.10、1.11、12）と
古いブラウザを切り捨てた2系（2.0, 2.1, 2.2）です。
1系と2系は対応ブラウザの違いだけで機能は全く一緒です。
機能が同じなのにメジャーバージョンが違っているのが分かりにくい
ということでバージョン番号の付け方を変えることになり、
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。
しかしマイクロソフトが古いIEのサポートポリシーを変更し
サポート中であるOSで動く、最新のIEしかサポートしなくなったために、
2016年1月でVista上のIE8のサポートが終了しました。
そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。 ■JavaScript主要ライブラリ・フレームワーク 利用率
https://w3techs.com/technologies/overview/javascript_library/all
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 html内に記述のjavascriptにはlinter?は効かないのでしょうか。
オンラインでそれに対応したサービスはないでしょうか。 2019年もjQueryのシェアは微増で終わりましたね（苦笑）
だから言ったんだよ。誰もがウェブアプリ作ろうと思ってたりしないんだから
普通のウェブサイトならjQueryでいいんだって
適切じゃない技術に乗り換える意味がない どっかのフロントエンジニア君（笑）が必死に終わる終わるいっても
結局はこの結果ですよ。Angular？ReactJS？一年経ってもぜんぜん増えてませーんｗ
https://w3techs.com/technologies/history_overview/javascript_library/all
Historical trends in the usage of javascript libraries for websites
73.5% 73.6% 73.7% 73.8% 73.9% 74.0% 73.9% 73.9% 74.1% 74.1% 74.1% 74.0% 74.1% 74.2%
結果＋0.7%
https://w3techs.com/technologies/history_overview/javascript_library
Market share trends for JavaScript libraries
97.2% 97.3% 97.3% 97.3% 97.3% 97.3% 97.4% 97.4% 97.4% 97.5% 97.5% 97.5% 97.3% 97.4%
結果+0.2%
2011年より
28.3% 42.8% 54.5% 57.4% 61.5% 68.3% 71.9% 73.1% 73.6% 74.2%
74.0% 84.1% 90.2% 92.9% 94.5% 95.8% 96.4% 96.2% 97.3% 97.4% 形骸化？AngularやReactが増えないから
jQueryは減らないんですよ
AngularやReactが形骸化しちゃったと？ｗ ここまでjQuery信者っぷりが露骨なテンプレだと、何も感じないな
2020年も彼は平常運転なんだろうね 一生懸命覚えたjQueryを使った案件が減っちゃうとまんまが食えなくなっちゃうんだろうね
かわいそうに でもjQuery減ってないじゃんｗ
AngularとかReactはバージョナップで
また覚え直しになるでしょ？ 現実を見据えた奴なら全部覚えるだろ
jQueryに拘ってるのは信者だけ そりゃjQueryが消えるわけないんだから
jQueryも全部の中に含まれるだろうな >>17みたいにjQuery以外をこき下ろすのはアホってことだな 別にこき下ろしてないだろ
Angularが1と2で互換性なくなったのは事実だし
ブラウザ標準のWeb Componentsが控えてるから
脱Angular、脱Reactの流れは明らか Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
jQueryなんてとっくに使われなくなってるはずでしょ
ここは自ら学ぶスレでJS仙人Web仙人を目指す者が多いだろうけど
全体で見ればできるだけ自ら学びたくなくて他者にすがりたい人が多いでしょ
だからこのスレでライブラリやフレームワークを進めるのは
このスレ以外で相談されたときと比べたら控えるべき
例えば全く無知な人からこういう見た目のグラフを起きたいと言われて、
WebGLの数十のAPIと数十の技法をここで説明仕切るのは不可能だし、
より噛み砕いても説明しきれないときはWebGLを0から学んでこいとだけいうのはあまりに辛辣なので
グラフ表示ライブラリを提示して、そちらのこの使い方を変わりに学べということを言うのは極悪ではないとは思う
何れにせよ目的が学ぶことより問題対処の答えをもらうほうが大きくなってはいけないということ
ここは仕事依頼所ではなくて質問者が自ら学ぶ機会を作るための場所ということを忘れてはいけない そこで質問者に何を学ばしたいのかということ
jQuery力を身に付けさせたいのか、
jQueryなどに頼らなくてもWebAPIで実現できる力を身に付けさせたいのか、
それは各回答者によって違うし違ってて良いと思うが
ここがJavaScriptスレということは頭の片隅に置いておいてほしい
フランス料理スレがあったとして、そこで電子レンジ中心でするというのは面白いと思うが
あまり電子レンジ最高、これに頼らないのは変だというアピールをすると
なにかに特別こだわるのであれば亜流として他スレでやれということにってしまうのは仕方がないだろう >>24
> Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
> jQueryなんてとっくに使われなくなってるはずでしょ
それは違うよ。Web Componentsはウェブアプリを作るもの
なので同じウェブアプリを作るAngularやReactと競合してる。
jQueryはウェブサイトに動きをつけるもの
Web Componentsと競合してない。
将来的にはWeb Componentsで作ったコンポーネントを
組み合わせるライブラリとしてjQueryが使われるだろう jQuery厨と反jQueryとのバトルかお
大晦日だし朝までやってみろだお
生テレビみたいに >>26
Web ComponentsとjQueryを対比してるのではなくて、
標準で補えるような機能があるから、競合すると言って移行が進むとは限らないでしょってこと
競合するってことは見方を変えると親和性が高く補い合えるということでもあるのだから
Web Componentsはウェブアプリを作るものではなく
要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
それに作れたからと言ってそれらを上手く使ったり運用することまでは含まれていないのだから
そういう面でフレームワークは必要でしょ
またjQueryはウェブサイトに動きをつけるものっていうのであれば
Web Animation APIが競合するでしょ
でもだからといってjQueryが不要ということにはなっていないでしょ >>26
標準の各機能というのはあくまで機能であって、
フレームワークとか、ライブラリでもjQuery規模のものは
その世界観をまるごと提供するもので、そこに意味があるわけでしょ
そういう使い方をしているのであれば、
標準機能があるからフレームワークやライブラリが不要とはならないでしょ
「機能」のような粒度でそれらを欲しているわけではないのだから >>28
jQueryとの対比？何を言ってるのですか？
標準の機能があるからAngularやReactのような重いフレームワークが不要になり
またそれに伴いフレームワークがまたガラリと変わるって話をしてるんですが
> Web Componentsはウェブアプリを作るものではなく
> 要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
従来のWebの延長だから、みんなWeb Componentsを選ぶでしょうね
> またjQueryはウェブサイトに動きをつけるものっていうのであれば
> Web Animation APIが競合するでしょ
動きってアニメーションのことじゃないですよ（笑）
動きというのは各コンポーネントの連携の話です。
AngularやReactでコンポーネントを作る時代は終わり
Web標準のWeb Componentsでコンポーネントを作るようになります。
いろんな所がオレオレブランドのコンポーネントを作るようになるでしょう
そこにフレームワークは組み込まれません
コンポーネントは部品です。その部品をつなげるものが必要です。
それがjQueryです。 jQueryでコンポーネント(笑)作ってる奴には関係ないだろ Web Componentsでコンポーネント作るんでしょ？ >>30
それは違う
原則として標準機能というのは低レイヤーを攻めてる
フレームワークなどは高レイヤー
Web Componentsも一番大きい部分はなにかというとShadowDOMであり
今まで既存の要素spanやdivなどを無理くり使って
欲しい物を作っていたのがよりスマートにできるということ
スマートにできるようになったからと言って、
開発者誰もが自分でShadowDOMを触るかと言うと違う
そこは引き続きフレームワークを使うのが普通だろう
要するにこの手の標準機能はフレームワークを
よりスマートに作れるようにするためにあると言っても過言ではない
>>コンポーネントは部品です。その部品をつなげるものが必要です。
そのとおり
>>それがjQueryです。
それは違う
jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
要素間の高度な連携のための機能は入っていない
jQueryしか使わないのであればそこのロジックは全部自前で書くことになる
だからjQueryはあくまで「ライブラリ」と言われている >>33
デスクトップアプリの歴史を学んだほうが良いぞ
ShadowDOMでコンポーネントが作れるようになったら
次起きる流れはコンポーネントの配布だ
コンポーネントは特定のフレームワークに依存せずに
単独で使えたほうが良い。そしてツリービューとかそういった
便利なものが配布される。そしてRADツールの登場だ
RADツールを前提としたプログラミングモデルになる
.NETフレームワークと同じようなもん
今もあるがそれがウェブ標準技術をベースに再構成される
今あるものは何も残らんよ。MFCが消えたのと同じように
すべてが作り直される >>33
> jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
jQueryで要素を操作するんじゃないよ。要素の操作はコンポーネントに組み込まれる。
jQueryの担当はイベントハンドラだよ。
コンポーネント時代において、コンポーネント間の情報のやり取りは
すべてイベントによって引き起こされる。イベントドリブンって知ってるかね？ｗ
コンポーネントから特定のベントを受け取り、そしてそのまま又は多少加工して
他のコンポーネントに情報を渡す。コンポーネントは必ずしもUIを持っているとは限らない
タイマーコンポーネントのようなものもある。
ウェブという貧弱な技術からスタートしているだけで
結局の所、必要としているプログラミングモデルは、
最初から自由だったデスクトップアプリと変わらない。
デスクトップアプリを見ればウェブ技術の将来はわかる イベントハンドラに特化したライブラリがあれば充分だな
めでたしめでたし FormDataのappendをjqueryのcallbackで使ったらappendされなかったのですが
これはjqueryのせいですよね？
たしか$.ajaxでは"processData":falseと"contentType":falseの設定しなきゃいけなかったような・・
ajaxのときとは違ってエラーがでなかったのでめちゃくちゃハマりました・・ >>39
よくよく考えるとformdataにはキーも値もsetされていて
そのformdata送信後のパラメーター（コンソールのnetworkのところ）に反映されてないだけかも、でした
jqueryのcallback(例えばtoggleとかeach)の中でformdata.appendのときは送信後のパラメータに反映されてなくて
jquery関係ない外のブロックでformdata.appendすると送信後のパラメーターに反映される
みたいなところまでは検証できたと思います
”そもそもformdataにキーがセットされているか否か”をまた近い内に検証してみます
てっきり、パラーメータに反映されない＝formdataにキーがセットできてない
だと思ってました https://httpbin.org/
サイト上のコンソール上にて検証しました
var prm=[["key0","val0"],["key1","val1"],["key2","val2"]];
var $hoge=$('<div id="hoge">hogehoge</div>');
$(document.body).append($hoge);
var formData=new FormData();
formData.append(...prm.shift());
$hoge.toggle(function(){
formData.append(prm[0][0],prm[0][1]);
formData.set(prm[1][0],prm[1][1]);
});
$.ajax({
"url": "https://httpbin.org/post";,
"type": "POST",
"processData":false,
"contentType":false,
"data": formData
}).complete(res=>console.log(res));
$.eachは大丈夫でした
$().toggleで使うとキーがappendできないっぽいです > $().toggleで使うとキーがappendできないっぽいです
だからそんなことはないって
お前が使い方間違ってるだけ だいたいその検証でなにがどうなってるのかさっぱりわからんし
他人にわかるようにかけ >>42,43
chromeとffでしか検証していませんが
FormDataにはgetメソッドというのがあってそれを使うとキーが取得できます
var prm=[["key0","val0"],["key1","val1"],["key2","val2"],["key4","val4"]];
var $hoge=$('<div id="hoge">hogehoge</div>');
$(document.body).append($hoge);
var formData=new FormData();
formData.append(...prm.shift());
$hoge.toggle(function(){
formData.append(prm[0][0],prm[0][1]);
formData.set(prm[1][0],prm[1][1]);
formData.append("key3","val3");
});
formData.set(prm[2][0],prm[2][1]);
console.log(formData.get("key0"));//val0
console.log(formData.get("key1"));//null
console.log(formData.get("key2"));//null
console.log(formData.get("key3"));//null
console.log(formData.get("key4"));//val4 一応原因はわかりました
toggle内でconsoleするとなぜか最後のconsoleの後にconsole.logされるのでおかしいと思い
時間を置いてから最後のconsole.logを実行したらキーがセットされていました >>35
コンポーネントは要素でしょ
要素を操作するってことじゃん
逆に要素の属性指定で操作できない要素を作ったら
それWeb Componentの意味半減でしょ >>46
コンポーネントとなってる要素は操作する（事がある）
コンポーネントの中身の要素は操作しない
> 逆に要素の属性指定で操作できない要素を作ったら
コンポーネントとなってる要素の属性は操作する
コンポーネントの中身の要素の属性は直接操作しない（メソッド、イベント経由で行う） JQ厨にとってのコンポーネントはこれだから
同じものと思わない方が良い
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div> input type="file"のファイルを選択するボタンを押さずにダイアログを開きたいのですが
どうやればいいのでしょうか（File APIの常にひらっきぱなしD&Dのやつではありません） >>44
「javascript formdata」で検索して、MDN のサンプル通りに作れば？ >>49
任意のタイミングで開きたいって話ならそんな横着は無理
あくまでもユーザーのアクションが起点
https://jsfiddle.net/ekhruwcj/ >>50
フォームの設置は簡単なのですが
ファイルを選択ボタンをjavascriptでクリックしたことにするやりかたがわからなかったのです
>>51
.click()で思い通りのやつができました！！
ありがとうございました！ >>48
"俺が想像する"JQ厨にとってのコンポーネントはこれだから
でしょ？
そしてお前は、お前が想像するjQuery厨を叩いてるだけ
お前の中のお前が作り出した架空のjQuery厨と争ってるｗ >>54
ならこのコードをコンポーネントと呼ぶ奴は
jQuery厨でもないただのアホってことでいいんだよな？
いやー良かった良かった Web Componentsの話をしてるんだから
（今の文脈では）コンポーネント＝Web Componentsでしょ？
今の文脈ではだからね。
Reactの話をしているときに、コンポーネント＝Web Componentsなわけはない >>56
つまり文脈が変わればコンポーネントと呼ぶと？ そりゃあそうだろう
componentsは何かの固有名詞ではなく
部品って意味の一般名詞だもの >>60
PHPなどを使ってその部分だけ別ファイルにして
使い回せるようにすれば部品になるでしょ？ 結局>>42さんの＞だからそんなことはないって
のそんなことってどんなことだったんですか・・？ https://api.jquery.com/toggle/#toggle-duration-complete
toggle関数の仕様を確認すると、
durationを省略してcompleteのみを指定した場合、completeが実行されるのはdurationのデフォルトである400ms後。
つまり、>41 は設定処理実行前に出力してる。
よって
> $().toggleで使うとキーがappendできないっぽいです
toggle関数の中でFormData#appendの動作が変わる、なんてことは起きてない。 ようは400ms経つ前にappendされてないformdataを送ってしまうので
post先に反映されないということでは？
つまり>>42の段階で＞そんなことはないって
のニュアンスが違うような
仮にそういう意味ではなく>>63だということは最初からわかってた
ってことなら>>44の結果が出る前に
「toggleの処理より先に$.ajaxやってるから」もしくは「全部toggleの中に書け」みたいな言い当てができているはず
それらを踏まえて＞そんなことはない
のニュアンスは明らかに、>>41通りやってもformdataは送れる
みたいな意味だよなぁ・・ ＞$().toggleで使うとキーがappendできないっぽいです
の意味は質問者回答者それぞれの視点で
質問者>>41 （ 結果的にappendされていないデータが返ってきた → appendできない、なぜ？ ）
回答者１ （ appendはできていることを知っている → appendできない、と言っているのは間違っている ）
回答者２ （ appendはできていることを知っている → appendできないと思っているのは、処理の順番を質問者が知らないから ）
ざっくりこういう回答者の思考パターンがあると思うけど
回答者１みたいな人だと、そもそもソレがわからないから質問してるんだが？みたいな質問とかなり相性が悪い
もちろん質問者がコードを開示しなかったり質問の難易度にもよるけど function boxclear03() {
const clears = document.getElementsByClassName('clear03');
for(var i=0, len = clears.length; i< len; i++){
var clearem = clears.item(i);
clearem.value = "";
clearem.checked = false;
}
}
あるイベントが行われると、
クラス「clear03」の要素全ての、フォームの値とチェックボックスのチェックが取り除かれる
スクリプトを作ってみたのですが、フォームはクリアになるのですが、チェックボックスはクリアに
なりません。
チェックボックスをクリアにするにはどうすればいいでしょうか？ 【環境】Windows10 pro, chrome バージョン: 79.0.3945.117（Official Build） （64 ビット）
【条件】自前の class データを、JSON 経由で保存・復元したいが、復元部分のやりかたがわからない
【何をしたのか】
(1) 自前の class データを用意
(2) データを入力
(3) そのデータを、class ごと localStrageに stringify で保存
(4) (3) のデータを localStrage から stringify と parse で取得
(問題) 取得した文字列をどうしたら、自前の class に再格納できるのかわからない
【エラーメッセージ】なし
【期待する結果】自前の class にすんなりデータ格納する方法が知りたい
【サンプルコード】
(1) class testClass {
constructor ( a, b, c ) {
this.aa = a; this.bb = b; this.cc = c;
};
あとは上記のゲッターセッター
}
(2) var xxx = new testClass ( 963, 852, 741 );
(3) localStorage.setItem ( "testKey", JSON.stringify( xxx ) );
ここで、 testKey を chrome のデバッグ機能で見ると、
{ "aa": 963, "bb": 852, "cc": 741 } が入っているのは確認。
(4) JSON.parse( JSON.stringify ( localStorage.getItem ( "testKey" ) ) );
で取得すると、{ "aa": 963, "bb": 852, "cc": 741 } が得られるが、
この値をどうしたら testClass 型に戻せるのかわからないです。
イメージ的には、下記のような感じのことがしたいです。testClass yyy にデータを読み込む感じ
testClass yyy = JSON.parse( JSON.stringify ( localStorage.getItem ( "testKey" ) ) ); >>68
(2) var xxx = new testClass ( 963, 852, 741 );
(3) localStorage.setItem ( "testKey", xxx.AABBCC );
みたな感じで(3)で{ "aa": 963, "bb": 852, "cc": 741 }を返すゲッター（AABBCC）を放り込み
で、その後は（も）xxxを扱う
というのが普通だと思うけど >>69
すみません、(4) について教えて下さい。
新しく作った testClass のデータに
以前のセッションで保存していた localStorage データを
復元するように読み込む方法が知りたいです。 >>70
localStorage.setItem('testKey', `data:text/html,<ｓｃｒｉｐｔ>alert('testClass相当のオブジェクトを書き込む');</ｓｃｒｉｐｔ>`);
$(document.body).append(localStorage.getItem("testKey")); 一般的にインラインの記述をすると、デバッガーが効かなくなるんでしょうかね >>70
型とかそもそも…
説明ではnewしてインスタンスが返る
とか普通の言語っぽく言ってっけど
ただのオブジェクトですし
そのtestClassをコピペしてtestClass2作って
new testClass2したら
全く同じもの出来ちゃうよ RegExp.$1.replace('foo', 'bar')
などとすると、RegExp.$2が機能しなくなるようなんですが
この理由について解説してるサイトがあれば教えて下さい RegExp
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp
$1, $2(match[ 1 ], match[ 2 ])などは正規表現で、( ) で囲ったキャプチャー部分を表す。
match[ 0 ] は、マッチした全体を表す
例えば、
var re = /([0-9]+)-([0-9]+)/;
var str = '123-789';
var match = re.exec( str );
console.log( match[ 0 ], match[ 1 ], match[ 2 ] );
// 123-789, 123, 789 それは後方参照の説明をしてるだけで質問の答ではない >>68
constructor の引数を、オブジェクト渡しに、変えた方が良いのでは？
JavaScript では、constructorの多重定義が出来ないので、面倒
class Test {
constructor ( obj ) {
this.a = obj.a;
this.b = obj.b;
}
}
var obj = new Test ( { b: "2", a: 1 } );
console.log( obj );
// Test { a: 1, b: '2' } >>77
・回答には多様性があります。他人の回答を尊重してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです つまりそれを利用してわざと的外れな回答をしたわけだな わざと的外れな回答をしたかどうかは関係ありません
ルールに従いましょう new FileReaderのreader.readAsTextってめちゃくちゃ読み込み遅くないですか？
フォルダ３０個分（ファイル数１００個くらい）を同時にやってみたら
いつまで経ってもうんともすんともいいません
マシンのスペックに依存しているのはわかるのですがもしかしてそれ以外にも制限あったりしますか new FileReaderで読み込んでアップロードし終わったファイルデータ？の
メモリ解放的なことってどうにかできないものか・・
タブ閉じればいいけど、同じタブだとどんどん貯まってく >>85
var hoge=formdata;みたいにそのままにしてた
hoge=nullとかにすれば開放されるの？
今度試してみる >>68 です。
みなさん、いろいろご回答ありがとうございます。
説明が下手ですみません。
ゲームのセーブデータのような使い方をしたいと思いました。
ネットを頼りに見様見真似で、保存していた
{ "aa": 963, "bb": 852, "cc": 741 }
を取得できたのはいいけど、この文字列をどうしたら便利に使えるか
（＝元のデータに復元できるか）、がわかりませんでした。
探し方がわるいのか、どの説明も上記の「文字列として取れます」で終わっていて、
その先の解説が欲しいなと…
それとも、文字列を取得できた時点で JSON の役目はおわっていて、
あとは csv 読み込みみたいに自分で切り分けて使うのでしょうか。
みなさんなら、この文字列どうするかんじでしょうか。。。
最悪、JSON使わなくても大丈夫そうな処理なのですが、
せっかくなので使って便利なら試したく思いました。 const obj = JSON.parse()
const yyy = new testClass(obj.aa, obj.bb, obj.cc)
yyy.aa // 963 >>88
データ形式によっちゃ使えないけど例だけ満たせればよいなら
const yyy = new testClass(null, null, null);
JSON.parse(json, (key, value) => {
if (key) yyy[key] = value;
});
とかｗ >>78
みたいに、
new testClass( obj )
と、1つの引数のオブジェクト渡しに変えた方が、良さそう
引数を3つも渡すのは、面倒でしょ？ 理由は面倒だから？ｗ
new testClass(1, 2, 3)
と書くのが面倒で、
new testClass({a: 1, b: 2, c: 3})
と書くのは面倒じゃないんだ？ｗｗｗ WebフォームとDBいじるだけならテトリス要らないと思われ
ゲーム作るならテトリスをコピーするのは大事だけど、新しい落ちゲー作るアイデアのが大変 新しいおちげー作るにしてもテトリスは基本になるかなと
ゲームエンジン使ってるんですけどね みなさん本当にありがとうございます。
>>89
すみません、保存するのは何かのポイントのように変わるものです
数字は固定じゃないです
>>90
アロー演算子わかんないです…
>>91
ちょっと何言ってるかわかんないです…（自分の習熟度が低すぎて）
localStorage.getItem ( "testKey" ) から取れた値を復元したいです
>>92
var aaa = new testClass ( 1, 2, 3 );
localStorage.setItem ( "testKey", JSON.stringify( aaa ) );
var bbb = new testClass( localStorage.getItem ( "testKey" ) );
で、bbb が {aa: "{"aa":1,"bb":2,"cc":3}", bb: undefined, cc: undefined} になっちゃった…
おしい…？
でも、そんなニュアンスのことをしたかったです。
>>93
はい（真顔）
なんで皆さんが頑なに localStorage.getItem ( "testKey" ) を起点に答えてくれないのか
未だにわかっていません…
{"aa":1,"bb":2,"cc":3} になった時点で再利用できないデータなのか。。。
−−−
初歩から出直すべきですかね… （＾＾；；； 最近不思議に思っていることがあります
各ブラウザがサードパーティクッキーを制限すると発表して騒ぎになっていますが、
別に広告主が提供先サイトにＪＳを埋め込ませれば好きなように好きなだけ広告主のサーバーとやり取りさせられますよね?
サードパーティクッキーを制限すると、どんな問題が本質的に解決するのでしょうか? 広告主に「たくさん広告表示されました！だからお金ください！」って
請求できるってこと？ >>99
> 別に広告主が提供先サイトにＪＳを埋め込ませれば好きなように好きなだけ広告主のサーバーとやり取りさせられますよね?
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS ■ このスレッドは過去ログ倉庫に格納されています
