+ JavaScript の質問用スレッド vol.131 +
■ このスレッドは過去ログ倉庫に格納されています
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にして見えないようにしてください。文句をつける＝荒らしです >>56
クロスドメインかセキュリティポリシーだと思う
hosts触って
http:/exasmple.com
でアクセスした時にローカルを見るようにするといい
具たち的にはこんな感じ
https://qiita.com/nbkn/items/e72b283c54403a30b2e1 >>56
プロトコルもホスト名もポート番号すら違って、同一オリジンと見なされるわけがない
CORSについて勉強し直すべき SPAみたいなアプリを作るんですが、内部の状態を全部保存して、次にアプリを表示したときに
復元するのですが、普通の静的型付け言語ならモデルにメソッド追加したりしても、
大抵は元に簡単に戻せるんですが、JavaScriptではどうすればいいんでしょうか？？
JSONじゃなくてもいいんですが、自前でシリアライズ・デシリアライズする処理を
かいてるんでしょうか？？ メソッドごと保存しようというのは正しくない
まず、仮想DOM的なものを設計して、HTMLでもCanvasでもアタッチ出来るくらいのビューを用意する
そしてそのビューに対してこれからどういう変更を加えるか、加えてきたかのアクションチェーンを設計する
実行はアクションチェーンを読み出しつつ各アクションの種類に応じてswichを使ったりして行う
保存はアクションチェーンオブジェクトと仮想DOMオブジェクトをそのままIndexedDBなんかに保存すれば良い
JSONは循環参照を扱えないのでオススメしない、まあ循環参照だけならほぐしてJSON化可能だが
画像なんかのバイナリも別に保存したいこともあろうからIDBがオススメ
１アクション中のアニメーションだったり、もうちょっと工夫が必要だがそれで概ね上手くいく >>60
なんかいろいろずれてる気がするな
web製作板なのだからウェブアプリってことでいいのか？
SPAみたいなアプリを作ると書いているが、あなたが書いている内容は
SPAとは関係ない話になっている。
まず
> 内部の状態を全部保存して、次にアプリを表示したときに復元するのですが、
と書いてあるがウェブの世界ではSPAでなくとも一般的にサーバーにデータを保存し、
ページを表示した時にサーバーからデータを取ってくる。SPAではそれがページ単位ではなく
何かしらのコンポーネント単位になることもよくある
> 普通の静的型付け言語ならモデルにメソッド追加したりしても、
> 大抵は元に簡単に戻せるんですが、
一般的にシリアライズっていうのはデータのみを保存するのだから
モデルへのメソッドを追加に関しては、静的型付け言語かどうかは関係ない
シリアライズが（簡単に）可能かどうかっていうのはクラスのインスタンス変数を
全て取得する方法を言語やライブラリが提供しているかどうかにかかっている
JavaやRubyはそれが可能なので簡単に実現できるが
JavaScriptはではそういったことは完璧にはできないので出来たとしても制限がある
一般的にできないと考えたほうが良い
とはいっても、JavaScriptのobject（配列や連想配列）≒JSONなのでJavaScriptのクラスが
持っているデータをobjectとして管理していれば、比較的簡単にJSON化できる。
なおJSONではなく他のバイナリデータにシリアライズするライブラリも有ったはず
そして「次にアプリを表示したときに復元する」というのはobjectを表現するデータを
JSON形式でもいいし、そうでない形式でも良いが、サーバーに保存することになる
オブジェクト自身を保存するというより、中身のデータを保存するという感じ
まあつまりは自前でシリアライズ・デシリアライズする処理を書くことに相当するわけだが
繰り返すがJSON形式を用いればそれは大したことじゃない そしてSPAとは関係ない話では有るが、SPAを実装する時は
自力で作るのではなく、何らかのフレームワークを使ったほうが良い
残念ながら俺はSPAフレームワークには詳しくないのだが、
SPAを作りやすくする"フレームワーク"として機能で
オブジェクトをシリアライズ・デシリアライズする機能があるかもしれない。
つまりフレームワークが決めたルールに従って作ることで
モデルを簡単にシリアライズしたりデシリアライズできる。
そういう機能があるかないかはしらないが、自力でSPAアプリを作るのは骨が折れるので
SPAアプリを作るというのが本当の目的であれば、
まずSPA対応のフレームワークの使い方を勉強することをおすすめしたい
ちなみになぜ「SPAアプリを作るというのが本当の目的であれば」なんて
わざわざ言ってるのかというと繰り返すが>>60の内容はSPAアプリを
作る時の話とは関係ないから >>60ですが、そこまでは書きませんでしたが、実際はReactを使います。で、それと他にRedux使うかMobX使うかとか
どうするか色々調べてるところです。例えば、MobXとか使うと元のオブジェクトがラップしてオーブザーバルになるみたいんです。
React使う前にも他にデータバインディングできるライブラリを調べると、元のオブジェクトをラップしたり
とか何種類か方法があるみたいんですが、そららを使うと
JavaScriptのobject（配列や連想配列）≒JSONじゃなくなるっぽいので、一般的にどうすればいいのかなと
思った次第です。 漏れもブラウザで、ローカルHTML・JS ファイルから、
jQuery のAjax で、2ch にアクセスしようとしたけど出来なかった
iframe 内になら取得できるけど、外側のHTMLファイルからは、アクセスできない。
内外で、異なるサイトに扱われるから
そこで、ブラウザから、YQL(Yahoo! Query Language)のサービス・サーバーを利用して、
アクセスする方法があった。
jquery.xdomainajax.js も、YQLを使っていたけど、動かなくなった
異なるサイト同士では、直接アクセスできない。
Node.js とか、Node.jsを含んだ、Electron など、
サーバーを立てて、サーバーを介して通信しないといけない JavaScript一般的にはシリアライズする方法はないので自力でやる必要がある。
そこら辺をフレームワークがカバーしている（かもしれない）
というのが答かな
もともとJavaScriptはクラスなんてものはなかったから
シリアライズすべき変数はなんや？って話なんだよ。
ローカル変数を使われるとクラス（に相当する関数）の外から見る方法はないし、
関数を値として扱えるから、関数のコードをシリアライズするの？って話まででてくるし >>65
YQLなんていずれだめになるだろう
あれは使うべきではない 入門 React ――コンポーネントベースのWebフロントエンド開発、2015
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
Stefanov の本では、Flux を使って、JSON で、localStorage に保存している。
まあ、これは例題だから、実際には、DB を使うのだろう 怖い例題だな
ブラウザ開発者の機嫌次第で一発でふっとびそう >>68
> JSON で、localStorage に保存している。
そこは（どうでも）いいんだよね。
表現形式と保存場所の話だから
シリアライズっていうのはオブジェクト（クラスのインスタンス）を
どうやって保存できる形式に変換するかって話だから
その本ではクラスのインスタンスのシリアライズの話をしてる？ >>64ですけど、
>>66
>もともとJavaScriptはクラスなんてものはなかったから
>シリアライズすべき変数はなんや？って話なんだよ
ありがとうございます。
いったんクラスというのも忘れて真剣に考えないとダメっぽいですね。
>>68
そうですね。redux使うと、完全にStoreはシンプルになるので、そのまんまシリアライズ・デシリアライズ
できそうなんで、そこは楽そうなんですが、redux自体がactionやらactionCreaters,Reducersやらで・・ Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://github.com/stoyan/reactbook
whinepad という名前で、Excel みたいな表を作っている
インスタンスの保存だけど、メソッドは保存しない。
保存するのは、データだけ >>53
なんか素で勘違いしてそうだからレスするけど
スレをいっぱい立てまくってたのが件のテンプレ改変した人であり前スレとここの>>1だよ スレをいっぱい立てまくっていたのが、荒らしだろ？
それで皆、苦労したんだろ？
このスレは、荒らしが立てたスレか？
まあそれなら、再利用すればよい
とにかく荒らしは、議論させないように、皆の邪魔をする。
jQuery の話をするなとか、Lodash の話もするなとか、DOM の話もするなとか、
荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる。
そうやって、ここのコミュニティをつぶすつもりだろ
スレを分けるなら、プログラム板のように、
初心者向け・上級者向けに分けるべき その話いい加減にしてくれないかな？
いま問題なく進行してるだろうが >>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など禁止） >新しいスレの内容の条件
>・JavaScriptだけを扱う（AltJSやBabelやTypeScript禁止）
>・ブラウザのDOM APIだけを使う（jQueryなどのライブラリやフレームワーク禁止）
>・サーバーサイド禁止（nodejsなど禁止）
これが、荒らしが作りたいスレだろ？
何も、コミュニティが交流できないように作っている
荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる
次スレからは、プログラム板のように、
スレを初心者向けと、普通用に分けてくれ 初心者用と普通用ということであれば話題の内容は一緒だ。
どちらもライブラリの話題も対象となる。 というと反対してくるんだろうな
結局ライブラリの話題を禁止したいだけ 初心者用は、主に言語の文法などが、わからない人向け。
普通用は、フレームワーク・ライブラリも含める
プログラム板もそうだし、これで良い また、初心者用のスレを勝手に立てて、ライブラリ禁止とか書いてる
こいつがいつもスレを一杯立てる、荒らしじゃないのか？ 初心者専用のスレがほしいって言ったから立ててやっただけだろ
あとは勝手にメンテしろや
俺は最初からいらないって言ってる 初心者って言ってもどのような初心者かわからないんだから
分けるんなら目的に応じて分けないと駄目でしょ
JavaScript.DOM勉強スレ（ただしライブラリ排除ではなく、あくまでDOMや標準APIから学んでいく事をモットーとした勉強のためのスレ）と
JavaScript解法相談スレ（JSをできるだけ深く学習する事なくライブラリやツールを駆使して簡単に問題を解決する事をモットーとしたスレ）
で分けよう
これまでの質問スレは終了 ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる
禁止事項を勝手に作って、スレを一杯立ててる、こいつが荒らし
今まで、Lodash厨が荒らしかと思っていたけど、荒らしじゃなかった。
誰が荒らしか、ようやく分かった >>87
勝手にスレ作って勝手に保守してろ
ここが嫌ならさっさとでていけ ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる
結局、スレのテンプレを勝手に変えて、禁止事項を勝手に作って、
スレを一杯立てている奴が荒らしだな
ライブラリ用スレとか、jQuery用スレとか、
スレを分割して、皆が議論できないようにしたのも、この荒らしか
皆、荒らしと会話しないように。
もし気付かず、荒らしと会話している人がいたら、荒らしと教えてあげて テンプレを勝手に変えた>>1も荒らしということだな
>>1を相手にしないように 既存の配列に他の配列を連結したいのですが、１発でやる方法はないでしょうか？
for (let sourceItem of sourceItems) destItems.push(sourceItem);
現状、ループを回しています。 新しい配列で良いなら
destItems.concat(sourceItems) JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f
指定した位置に一つ以上追加 - splice
非破壊的な結合 - concat
破壊的な結合 - push pushにこだわるなら
Array.prototype.push.apply(destItems,sourceItems);
あるいは
destItems.push(...sourceItems); 既存の配列を書き換えたいのです。要は破壊的結合で。
destItems.push(...sourceItems);
ああ、pushでそんな書き方できたんですか・・
>>28で教えてもらったスプレッド演算子ってやつですね。
ありがとうございます。 スプレッドって巨大な配列でやろうとするとエラーになるから嫌いなんだよな 配列長の制限値を超えた配列作ろうとすればそりゃエラーになるが
別にスプレッド関係ないわな こんな式を見たのですが、これは何ですか？
var data = ('' == 0 ? '' : ''); >>101
では、このコードを書いた人はどういう意図で書いたのでしょうか？
JavaScript専門家の方の推理を聞かせて下さい。 >>102
・あなたか「書いた人」が転記ミスしている
・「書いた人」が文法をよくわかっていない
文法エラーは関わった人に問題がある以外に考えられないので、第三者が推理するのは時間の無駄です。
大抵はあなたか「書いた人」が頭の中のイメージで転記しているだけで転記ミスしているケースが大半です。 >>101を鵜呑みにして書いてしまいましたが、文法エラーはないですね。
>>100は
var data = '';
と等価で>>100のように回りくどい書き方をする必要は全くありません。
説明用のコードか、難読化の一環なのか知りませんが、コードの意図は書いた人に聞く以外の方法はないでしょう。 >>104は
・あなたが転記ミスをしていないのなら
・「書いた人」が転記ミスしていないのなら
の条件付きの回答です。
その可能性を捨ててはいけないと思います。 >>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
引数の問題だからスプレッド自体に問題が有るわけではないけどな 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が必要だって >>100-105
式 ? a : b
3項演算子は、式が真なら a で、偽なら b だろ
var data = ('' == 0 ? '' : '');
式 ? a : a
式が、真でも偽でも、空文字を返すから、この式は無意味。
単に空文字を代入すれば良いだけ あー、まだ >>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の場合だけ空文字になる 訂正
var data = ('<?= $v ?>' == 0 ? '' : '<?= $v ?>'); もちろん、意味があるコードかもしれないとは言うが
無駄かつ良くないコードだとも言う
普通はこんな書き方はしない。
こんな書き方はしないが意味が無いとは言い切れない >>112
無駄なコードを意味がないコードと表現してるだけだろ
言葉遊びも程々にしろ >>113
「0だったら空文字にしたい」という要望があったとしたら
それを正しく実装しているわけで無駄ではないよ >>116
それは三項演算子ではなく、ただのif文だろ
それと「無駄かつ良くないコードだとも言う」に言及して反論してるのだが、前言撤回もここまで早いと信頼性ゼロだな >>117
少なくともifであることは認めたようだが
あんたにとって三項演算子とifの違いって何？ > var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>');
これはやってることに意味があるが
無駄かつ良くないコードだろ
何を反論してるんだ？ >>118
質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら、話はここで終わりだな > 質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら
無駄かつ良くないコードだと言ったのは俺なんだが、
なんで俺が自分が行った言葉に反論しなきゃいけないんだ？ 無駄かつ良くないコードだが
ちゃんと動く
っていうことの意味が分からんのかな？
俺ここでよく無駄かつ良くないコードを
修正してるんだが >>119
>>112では「無駄」と認めながら>>116では「無駄ではない」といってるだろ
前後で主張が変化する奴は信用できない 揚げ足ではないような
自己矛盾を抱える人は日本語が分かってない人という典型かな 日本語がわからんやつは困るね。いちいち説明せんといかんのかね
コードが無駄だってだけで動作は無駄じゃないってことだよ
ちゃんと書いてあるだろ 必要なことをやっているけど無駄の多いコードは冗長なコードというべきではないか 1 + 1 // ->
で2が出力されるのですが、これは何でしょうか？？？ > 必要なことをやっているけど無駄の多いコード
「必要」と「無駄」は対義語
必要なことをやっているなら無駄ではない >>132
なるほど、この場合はコードに無駄が多くて長いが
処理そのものには意味がある（無駄ではない）ってことだな >>133
必要の対義語は不必要ってでてきたけど？ >>136
日本語ひどすぎねぇか・・
「必要」かつ「無駄」ってそれぞれ修飾してる語が違うんだけど >>137
俺は無駄なコードを書いている
俺は必要なことをやっている(無駄なコードを書く事は必要である) 必要なことをやっているコードと
必要なことだけで書かれてるコードは違うだろう 意味不明な論理だし、直接的に反論しないところがいやらしいな >>112はいつもの日本語破綻者だしなあ
曖昧に濁して、相手の反応を伺う事で糸口を探してるんだろ > 必要なことをやっているけど無駄の多いコード
そもそも、これは「無駄なコードを残すことに意味がある」と主張したいが為の論理でしょ
「必要」と「無駄」の修飾先が違うのなら、必要なAだけ残して無駄なコード(B)を排除すれば良いだけ
よって、「無駄なコード(B)を書く事に意味はない」と結論される
どちらにしても、論理が破綻してるんだよ カレンダーのマス目に編集ボタンが配置されていて、編集ボタンをクリックすると編集画面が表示されるページを作成しています。ここでお尋ねしたいのが、idの名前の付け方です。
今は、id=btnEdit20171201、id=btnEdit20171202と名前を付けていますが、より良い名前の付け方はありますか？ idをつけない、という選択肢もあるんじゃないかな
押したボタンから日付を取得したいなら、カスタムデータ属性なり、button要素でvalue属性を使うなり、手はいくらでもある >>145
>>146も書いているけどそういうIDが必要になるのがおかしい気がするね。
JavaScriptのスレに書いてるってことは、JavaScriptからそれらを参照するつもりなのだろう
本題の前に言っておくと、普通HTMLでは全部小文字でハイフン区切りが多い
btn-edit-20171201 みたいに。なぜかはよく分からんけどアンダースコアはあまり使われない
まあそれでもBEMみたいな変則的なものは有るし、強制ではない
んで、本題。あーだこーだ言いたいが、まあ要するにIDなしでやる方法を知らんのだろう？
なので軽くサンプルを書いてあげよう
https://jsfiddle.net/bfw0m3p6/ >>146,147
ありがとうございます。とても参考になりました。idを振らずにイベントをトリガーしたり、カスタムデータ属性を使う方法などがあるのですね。
編集画面でクリックされた日の年月日を引き継いで表示したりすることを考えると、カスタムデータ属性が面白そうですね！ >>148
そのマス目に入れるものが日付だけならtime要素を使うのが良いかもね
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time
<time datetime="2017-12-05">5日</time> ['みかん','りんご','みかん','ばなな','りんご','りんご',]から
一番出現回数の多い「りんご」を得るにはどうすればいいでしょうか？ >>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;
}
みたいな感じ（細かい所は省略 >>151
すまん、 reduce の使い方がダメダメだったので取り消す 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 に入れたけど、最大値が複数ある場合の、処理がわからない >>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);
// => ["りんご"]
出現回数が最大のものが複数ある場合を考慮して複数返している >>154
ありがとうございます
やっぱりライブラリ使わないと難しそうですね >>155
別にライブラリ使わなくてもできるよ。
ただ見て分かる通り優れたライブラリを使うとこの程度の問題なら
複雑化の原因になる条件分岐やループを使わずに最小のコード量で実装できる ■ このスレッドは過去ログ倉庫に格納されています
