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

**デフォルトの名無しさん** · 2018/02/18(日) 16:48:01.14

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

前スレ
+ JavaScript の質問用スレッド vol.124 + [転載禁止](c)2ch.net
https://mevius.5ch.net/test/read.cgi/tech/1427008785/

（ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです）

**デフォルトの名無しさん** · 2018/02/18(日) 16:49:02.27

さて、むそろそろ俺の登場かな？
この問題はねSPAだからといってパフォーマンスさげないよね？
無駄なことはしないよね？という話で解決するんだよ。

例えば、http://example.com/foo/1 とかにアクセスした時、
index.html に30x のリダイレクトしたりはしない
なぜかって？リダイレクトしたらパフォーマンス落ちるでしょ？

つまりね。PATH_INFO（でいいかな？）の情報を持った状態で
サーバーサイドアプリが呼び出されるんだよ
そこでサーバーサイド側の仕組みを使って404を返せばいい

SPAの話なのに何を言ってるのと思うかもしれないけど、
ちゃんとしたSPAっていうのはF5を押しても同じ画面が表示されるし
URLも http://example.com/foo/1 のままになるもの

SPAは/foo/1のデータをAjaxで読み込むものだと思ってるかもしれないけど、
それは他のページから辿った場合で、直接 http://example.com/foo/1 に
アクセスした場合は、JavaScriptで取ってくるそのデータを最初からHTMLに埋め込むものなんだよ。
なぜかって？ページアクセスして表示されてからデータを取りに行くとパフォーマンスさがるだろ？
だからSPAは基本Ajaxでデータを取るのは間違ってないんだけど、最初のページに限っては
最初からHTMLに埋め込んでおく。埋め込むことができるってことは、
データが見つからない時に404を返すことも容易

そして検索エンジンとかは、基本的にAjaxを使ってデータを読んだりしない。
読むことも有るかもしれないけど、Ajaxリクエスト（Content-Type: application/json）として
そのページを読み込むことはないだろう。だからいま問題にしているどうやって404を返すか？という
話は実は当てはまらない。検索エンジンは http://example.com/foo/1 を直接読み込むのだから

Ajaxによるリクエスト、つまり別ページを読み込んでからSPAの処理としてページを読み込む場合は
そのリクエストを404にすればよい。たしかにページ自体は404にはならないんだけどね。
でも検索エンジンには関係ない話

**デフォルトの名無しさん** · 2018/02/18(日) 16:49:33.38

SPAを作る時にページが存在しない場合にをどうやって404を返せばいいんでしょうか？

現状
https://support.google.com/webmasters/answer/181708?hl=ja
に示すみたいにソフト404エラーみたいになってるんですが
SPAでステータスコードを返す方法がよくわからないんです。

**デフォルトの名無しさん** · 2018/02/18(日) 16:50:02.42

質問と回答が逆になった。>>3が質問で>>2が答

**デフォルトの名無しさん** · 2018/02/18(日) 16:51:04.80

補足

「その与えられたURIだけでルータが割り振ったあとコントロールのJS内で画面と内容をレンダリング」
という処理をするためには、

1. URIからサーバーにリクエストを投げる
2. サーバーからindex.html/js相当を貰う
3. クライアントのJSでURIから画面と内容を表示するのデータを貰うためにサーバーにリクエストを投げる
4. サーバーから画面と内容を表示するためのデータを貰う
5. そのデータを使って画面と内容をレンダリングする

の3～4のサーバーへのリクエストの処理について考察できてないんでしょ？

そしてSPAでは2回サーバーにリクエストを投げるのが当たり前で解決できない問題だと思い込んじゃってる。
まともなSPAだとここを1回にする。理由は2回リクエストを投げるとパフォーマンスが落ちるから。

2回サーバーにリクエストを投げる方法だと2の時点で200が返ってきてしまい、4の時点で404を返すことになるが、
リクエストを1回にした場合は、2の段階でindex.html/js相当＋画面と内容を表示するためのデータを貰うことになるので
この時点で404を返すことができる。

**デフォルトの名無しさん** · 2018/02/18(日) 16:51:34.30

クローラーについて

今、話をしてるのはクローラーの話だって分かってない？

クローラーはクッキーやローカルストレージは使わない
https://www.suzukikenichi.com/blog/googlebot-uses-a-web-rendering-service-that-is-based-on-chrome-41/
ページレンダリング中に一時的に使ってるかもしれないが読み込み時に毎回クリアされる

クローラーっていうのは、HTMLを取得（ページをレンダリング）する処理と、URLをかき集める処理が別れている
そしてクローラーは自分が知ってるURLに対してGETリクエストを送る
だから一回もリクエストを送らないということはありえないんだよ。

クローラーはブラウザじゃない。ブラウザのように前の状態というのを持たない。
だからアプリの作りが例えサーバーと通信しない作りであっても
知ってるURLに対して初回アクセスと同じようにかならずGETリクエストを送ってくる
そしてクッキーやローカルストレージは持たない

クローラーは必ずSPAのアプリケーションの特定のURLに対して直接GETでアクセスしてきており
（アクセスしない＝最新の情報がわからないのだからクロールされてるページ内容の更新を行わない）
なおかつ初回アクセスと同じようにデータは空なのだから、状態は200か404のどちらかに決定することが可能
（まあ他にもリダイレクトとかあるだろうけどいずれにしろどれかに決定できる）

クローラーがブラウザと同じようにクライアントサイドだけでアプリを動かしているかもしれないじゃないか
とか頓珍漢なこと言うなよ？それなにもクロールしてないからｗクローラーの使命を果たしていない

**デフォルトの名無しさん** · 2018/02/18(日) 16:55:51.36

ターニングポイント

ん？もしかして>>834もそうなのかもしれないが、他のやつも
404が「サーバーから返すもの」
つまり HTTPというプロトコルを使ってクライアントから
サーバーにアクセスした時に、サーバーからクライアントへ
返すものだって分かってないのか？

404はHTTPプロトコルレベルの話なんだから、

仮にHTMLとJavaScriptだけで動くものがって
一切サーバーとアクセスしない=HTTPプロトコルを使わない場合
には、当然HTTPプロトコルレベルの話であるHTTPステータスコード404（200も）はでてこない。

これは常識だよね？
ここまではいいよね？

**デフォルトの名無しさん** · 2018/02/18(日) 22:24:06.39

すいません。404の件で質問したものですけどスレが切り替わった後でも
議論していただいていてありがとうございます。
その後facebookでもソフト404を許容していることがわかったりとか
サービスによってまちまちであることがわかったので、
他のサービスとの比較もしてみて、どうしても必要だったら
リダイレクトで404ページに飛ばすという簡易戦略で検証を進めてみます。
ありがとうございました。

**デフォルトの名無しさん** · 2018/02/19(月) 02:01:33.45

>>8
そういわれるとちょっと違うと言わざるをえないんだよね。

仕方ないんで、facebookで再現する方法を探してきたよ

まず以下のABC News（でいいのかな？）のページを開く
https://www.facebook.com/abc/

その左側の「ページ情報」と「投稿」のリンクをクリックして
ページを行き来してみると（ブラウザのURLが変わることに注意）
Ajax（xhr）での通信が行われており、これがSPAであることがわかる
（Chromeのデベロッパーツールなんかで確認してね）

（ページ上の「メールアドレスまたは電話番号」とかいう文字を適当な文字列に変えておけば
SPAから抜け出してしまった時にすぐに気付ける）

=== ここまではfacebookでSPAで動作していることの確認 ===

で、Chromeのデベロッパーツールなどで左側の「ページ情報」のリンクを以下のように書き換えてみる
<a class="_2yau" data-endpoint="/abc/about/?ref=page_internal" aria-current="page" href="/abc/about/?ref=page_internal">
↓
<a class="_2yau" data-endpoint="/abc/about/aa?ref=page_internal" aria-current="page" href="/abc/about/aa?ref=page_internal">
（「abount/」を「about/aa」に変えた）

この状態で「ページ情報」をクリックした時 URLが https://www.facebook.com/abc/about/aa になる
HTTPステータスコードは404。（もちろんSPA状態から抜け出てはいない）
abount/aaなんてページは存在しないので画面は正しく表示されない
facebookは画面が変わらないようだが、ソフト404としてエラー画面にしようと思えばできるだろう

=== ここまではSPAとしてこのURLを開いた時のHTTPステータスコードの話 ===

**デフォルトの名無しさん** · 2018/02/19(月) 02:02:45.81

じゃあ、ブラウザのURLに https://www.facebook.com/abc/about/aa を直接入力して開くと
facebookの画面がでてくるのか？というともちろんそうじゃない。

HTTPステータスコードは404だし、「このページはご利用いただけません
リンクに問題があるか、ページが削除された可能性があります。」の画面がでてくる

つまりまとめると、

https://www.facebook.com/abc/about/aa というURLで示される存在しないリソースを要求したときは404になる。
SPA状態でアクセスされているときは、内部的に404になっているとしても画面上はそれが出てこない。

最初から言っているとおりだが、SPAで404を返したいという質問が意味不明で、単にサーバーにアクセスされて
レスポンスを返す時に、そのリソースが存在しないときは404を返すだけでいいんだよ。

**デフォルトの名無しさん** · 2018/02/19(月) 02:11:58.24

SPAだからどうしても200になってしまうっていうのは間違いで、
200になってしまうのは>>5でも書いたけど

1. URIからサーバーにリクエストを投げる
2. サーバーからindex.html/js相当を貰う
3. クライアントのJSでURIから画面と内容を表示するのデータを貰うためにサーバーにリクエストを投げる
4. サーバーから画面と内容を表示するためのデータを貰う
5. そのデータを使って画面と内容をレンダリングする

この状態になってるからだよ

SPAのためのindex.htm/jsの読み込みと（そのURLで示される）データの読み込みを
二段階に分けてしまうからそうなる

SPAでデータがない時に404を返したければ、リクエストを2回に分けるのではなく
2. と 4. の内容をまとめて1回で行うようにする。
そうすれば404が返せるし、パフォーマンスアップにもつながる

**デフォルトの名無しさん** · 2018/02/19(月) 02:23:50.84

この検証からfacebookは（調べた範囲では）ソフト404を使ってないことになるね。

クローラーはURLを直接入力したときと同じように取得するわけだから
facebookで存在しないページをクロールしてしまうことはない。
（GoogleBotはJavaScriptを実行するとかSPAだからとかいうのは全く関係ない話）

**デフォルトの名無しさん** · 2018/02/19(月) 02:46:19.97

> SPAでデータがない時に404を返したければ、リクエストを2回に分けるのではなく
> 2. と 4. の内容をまとめて1回で行うようにする。

補足 ↑言っておくけど、これはサーバーサイドでレンダリングするって話じゃない
HTMLにJSONを埋め込めばいいだけ

っていうのは前スレのこれを呼んでいればわかるはずだが

https://mevius.5ch.net/test/read.cgi/tech/1427008785/889

https://qiita.com/takeshy/items/b7e1b6bd30d12ecb02c6
> 1.データを別々にAjaxで取得
> 各CollectionやModelがRESTを使ってデータをAjaxで取得するので、
> リクエスト数が多くて遅くなる上に、ブラウザの同じサイトに対しての同時リクエスト数制限にひっかかります。

> 1.に関しては、初期画面のHTMLにAjaxで取得予定のデータを予め埋め込んでしまい、
> 初期データとして使うことで初期画面表示時のAjax呼び出しをなくしました。

https://qiita.com/takeshy/items/ba8b3ee4606993c1c5b8

> 初期表示時にサーバとの通信を極力行わない
> SPAで作成する場合、各モデルごとにサーバとデータを同期する必要がありますが、
> データを初期のHTMLにJSONデータとして埋め込んでしまうことで、Ajax通信を回避することが可能です。

**デフォルトの名無しさん** · 2018/02/20(火) 13:24:42.29

同時リクエスト数制限の話はもうやめようぜ
HTTP2だってあるし、ブラウザもESMの導入で依存関係が1000を超えるようなケースが出てきてるので
パッケージング仕様標準化も含め最適化に乗り出してるしさ
そもそもSPAならServiceWorkerでCache使うだろうと

**デフォルトの名無しさん** · 2018/02/20(火) 21:10:35.89

案の定SSR無しとかいろんな前提を捨ててHTTPがどうの言ってたのか。
化石は化石として、現場を荒らすような真似はせずシーラカンスのように漂っててほしいな。

**デフォルトの名無しさん** · 2018/02/20(火) 23:03:06.66

だからSSR（サーバサイドレンダリング）無しの前提で話をしてますよｗ
ちゃんと書いてあるでしょ

レスだけして、反論の一つもないってどういうことだよｗ
悔しかったからレスしたが、言い返せるものは何もなかったって
言ってるようなもんだよ

**デフォルトの名無しさん** · 2018/02/21(水) 01:49:20.69

前スレ眺めてたけど明らかに勘違いをごまかしてるのはレスポンスコードにこだわってる方だろ

**デフォルトの名無しさん** · 2018/02/21(水) 02:06:56.65

ということにしたいんだねｗ

**デフォルトの名無しさん** · 2018/02/21(水) 08:22:42.51

TwitterはSPAじゃないしな。

**デフォルトの名無しさん** · 2018/02/21(水) 09:22:27.13

このスレにでてきた例はTwitterじゃなくてFacebookだけど、こっちはSPA

**デフォルトの名無しさん** · 2018/02/21(水) 11:15:18.06

とあるサービスを作っています。
chrome-extensionと連携するサービスですがその中でお金のかかるapiを使おうとしています。(例えばGoogleTranslateAPI等)
自作のchrome-extensionユーザーには
(私が自腹を切るので)無料で使ってもらおうと思っているのですが、
chrome-extension以外のユーザーからは使ってもらいたくありません。
その場合どうやって制約をかければいいでしょうか？

一応考えているのはproxyとなるapiサーバを作って
ユーザー認証を行いそこから使ってもらおうと考えているのですか
トークンはsessionStorageに配置しているのでそれを取られると
結局無断で使われてしまいます。

**デフォルトの名無しさん** · 2018/02/21(水) 12:11:20.96

https://support.google.com/cloud/answer/6310037?hl=ja

**デフォルトの名無しさん** · 2018/02/21(水) 12:40:06.03

ページと言う概念で見てるのかそうじゃないのかがまずでかいんじゃないの？

**デフォルトの名無しさん** · 2018/02/22(木) 09:48:47.81

というか、404は何がnot foundの時の
エラーなのかってことだな

**デフォルトの名無しさん** · 2018/02/22(木) 09:51:09.56

そして誰に何のために404を返すのかってことだな

**デフォルトの名無しさん** · 2018/02/25(日) 17:41:41.99

Apache24を起動すると以下のような文章が表示され、
localホストと入力してもIt Works!が出なくなってしまいました。
サクラエディタを使用してコードを書いていますが、実行結果が表示されません。
知り合いが言うにはデフォルトで表示する文書の内容替えたか、
デフォルトの文章内容いじったのでは？と言われましたが心当たりがありません。
Apache自体は動いてるようなのですが、どのようにしたらよろしいでしょうか？

AH00558: httpd.exe: Could not reliably determine the server's fully qualified domain name,
using fe80::f862:7a8d:c09a:60b8. Set the 'ServerName' directive globally to suppress this message

**デフォルトの名無しさん** · 2018/02/25(日) 19:53:49.44

なんでここで聞いたの？

**デフォルトの名無しさん** · 2018/02/26(月) 20:37:45.85

electronアプリに適したデザインガイドラインは何でしょうか？

**デフォルトの名無しさん** · 2018/02/26(月) 23:16:35.28

Array.mapの中でawait使いたかったんでcallbackをasyncにしたら処理順序が不定になってしまった。
await使いながらループ順を維持したいなら昔ながらのforを使うしかないんだろうか。

**デフォルトの名無しさん** · 2018/02/27(火) 00:05:06.34

>>29
それって処理順序が不定じゃなくて
処理終了するタイミングの違いだろ。
処理終了を順序良くしたいなら同期処理するしかないのでは？
というか非同期にする意味がない。

**デフォルトの名無しさん** · 2018/02/27(火) 00:08:03.88

>>29
あとasync-awaitでmap使うんだったらPromise.allを使ったほうがいいのでは？
Promise.allをmapっていってるとか？
参考:
https://qiita.com/m0a/items/6b3965295df92d7bb28d

**デフォルトの名無しさん** · 2018/02/27(火) 05:34:51.61

result = ary.map( v => f( v ) )
↓
result = await Promise.all( ary.map( async v = await f( v ) ) )

**デフォルトの名無しさん** · 2018/02/27(火) 05:35:42.97

誤字は誤愛嬌

**デフォルトの名無しさん** · 2018/02/27(火) 07:49:39.49

>>30
理由は書いたとおり、awaitが使いたかったから。
同期的にやりたいのは山々なんだけど、非同期な関数が混ざってるから仕方なく。
Promise.allはもちろん使ってる。そうしないとPromise[]しか返ってこないし。
やっぱりforしかないのかな。

**デフォルトの名無しさん** · 2018/02/27(火) 08:59:02.40

>>34
Promise-Iteration を使うとか
https://qiita.com/toniov/items/127267fb64a960e8166e

**デフォルトの名無しさん** · 2018/02/27(火) 09:45:08.41

１個ずつ順番に待って実行したいってことか
それならreduce使えば良いんじゃない？
ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
delay = v => new Promise( ok => setTimeout( ( ) => ok( v ), 100 ) )

sum = ary.reduce( ( s, n ) => s + n ) //55
↓
sum = await ary.reduce( async ( s, n ) => await s + await delay( n ) ) //55

**デフォルトの名無しさん** · 2018/02/27(火) 20:40:08.66

>>36
なるほど、reduceは思いつかなかった。
もしかしてこれ、await sを後に持ってくると順序が変わってしまったりする？
どっちにしても試してみる。ありがとう。

**デフォルトの名無しさん** · 2018/02/27(火) 20:56:23.98

for-await-ofの実装が待たれる

**デフォルトの名無しさん** · 2018/02/28(水) 11:00:55.07

初歩的な質問ですみません

要素数の決まっている配列の中身をそれぞれ別の配列(やオブジェクト)で初期化したいとき(Ruby の Array.new(6){ Array.new } がやりたい時)、
何か簡単に書けるやり方はあるでしょうか。
これぐらいでいちいち for ループ書いてを回すのもコードが長くなってなんだかなあという感じで、今は

function arrayInit(length, cb) {
return new Array(length).fill(null).map(cb)
}

const ary = arrayInit(6, () => { return new Array })

こういう感じで処理していますが、一旦 fill で無関係な値で埋め立てないといけないのが冗長な感じがします

**デフォルトの名無しさん** · 2018/02/28(水) 11:03:03.13

最後丸括弧抜けてますね

const ary = arrayInit(6, () => { return new Array() })

**デフォルトの名無しさん** · 2018/02/28(水) 13:29:39.43

const ary = [...'.'.repeat(6)].map(_=>[]);

**デフォルトの名無しさん** · 2018/02/28(水) 13:43:58.24

const ary = Array.from(Array(6),_=>[]);

**デフォルトの名無しさん** · 2018/02/28(水) 13:44:58.59

const ary = [...Array(6)].map(_=>[]);

**デフォルトの名無しさん** · 2018/02/28(水) 14:48:53.13

今では立ち消えになったTypedObject提案にこの手の構造化の仕組みがあったから
それを真似してライブラリを作っても良いかもしれない

**デフォルトの名無しさん** · 2018/03/02(金) 02:41:28.45

今更だけどローカルストレージ便利ンゴねえ

**デフォルトの名無しさん** · 2018/03/02(金) 04:04:31.26

>>45
と言ってもいろいろあるわけで。どれのこと

**デフォルトの名無しさん** · 2018/03/02(金) 08:41:19.91

>>46
これ
https://www.granfairs.com/blog/staff/local-storage-01

**デフォルトの名無しさん** · 2018/03/02(金) 08:41:51.52

ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方

**デフォルトの名無しさん** · 2018/03/02(金) 11:56:05.82

>>47
サイズ５MBしかないし単純のkey-value型でしょ
indexdbのほうが良い気がする。

**デフォルトの名無しさん** · 2018/03/02(金) 20:28:07.04

そんなんあるんやね

**デフォルトの名無しさん** · 2018/03/02(金) 21:29:53.20

>>49
手軽さはlocalStorageとsessionStorageのほうがはるかに上
要は適材適所

**デフォルトの名無しさん** · 2018/03/04(日) 08:29:39.81

jQueryでa要素のリンクをクリックされた時の処理を
ハンドリングするにはどうすればいいでしょうか？
キーボードで選択&エンターされる場合もあるので
onclickは適当ではないと思います

**デフォルトの名無しさん** · 2018/03/04(日) 09:11:37.67

ここjsスレです

**デフォルトの名無しさん** · 2018/03/04(日) 09:14:20.34

>>52の件ですが
キーボードでフォーカス＆enterした場合にもclickが発火するんですね

**デフォルトの名無しさん** · 2018/03/04(日) 14:48:23.17

jQuery の質問は、web制作管理板のjQueryのスレへ

JavaScript・ブラウザ関連の質問も、web制作管理板へ書き込む方が良い

**デフォルトの名無しさん** · 2018/03/04(日) 15:09:05.19

>>54
そうだよ。jQueryの機能ではなくDOM API自体がそうなってる

**デフォルトの名無しさん** · 2018/03/06(火) 17:08:15.28

セレクトボックスのようなUI部品を表示し、
他の部分をクリックした時にそのUI部品を閉じる、
というような処理をする時は
UI表示時にclickなどのハンドラをセットして
自分以外の部分がクリックされていたら自分を消してハンドラを削除する、
というようなやり方をするのでしょうか？

**デフォルトの名無しさん** · 2018/03/06(火) 20:51:41.15

閲覧環境がクリックという概念を発生させやすいデバイスとは限らない
そのために各環境向けに調整することを許された標準要素がある
それらを再実装することは最もやってはいけないこと
標準要素に出来る限り頼って軽くスタイルをあてるだけが良い

**デフォルトの名無しさん** · 2018/03/06(火) 21:42:29.28

>>58
bootstrapは再実装してるよ

**デフォルトの名無しさん** · 2018/03/06(火) 22:32:23.80

>>57
documentレベルにハンドラ追加して
バブルアップしてきたイベントで対応

**デフォルトの名無しさん** · 2018/03/07(水) 06:13:15.60

>>59
そういうのはサポート環境決まった上で
きちんと検証してユーザーからのフィードバックもしてるからね
個人ではそれは無理

**デフォルトの名無しさん** · 2018/03/07(水) 08:42:02.75

> （ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです）
多数の意見？

**デフォルトの名無しさん** · 2018/03/07(水) 10:53:50.71

ブラウザ内座標をpx基準で(x,y)にある要素をクリックすることはできますか？

**デフォルトの名無しさん** · 2018/03/07(水) 10:58:43.99

document.elementFromPoint(x, y).click();

上は試しました。
初歩的な質問なのかもしれませんが、ブラウザ上のpixel座標と全く違う箇所をクリックしてしまいます。
どうしたらいけますでしょうか？

**デフォルトの名無しさん** · 2018/03/07(水) 11:00:34.27

>>58
セレクトボックスを再実装すべきではないということですが、
セレクトボックスは
通常CSSで実装されるドロップダウンメニューの
メインメニューが一つになったものと考えられるので、そこまで難解ではないのでは？
select要素だと項目の最大の文字数によってサイズが規定されますが
それを避けたいので、再実装しています

>>60
デレゲーションですね
考えてみればいちいちハンドラの付け外しをする必要なかったです
ありがとうございました

**デフォルトの名無しさん** · 2018/03/07(水) 18:22:22.46

>>65
例えばスマホでは画面が小さいのでselect要素が選択された時、文字が拡大表示される
これからはスマートウォッチのような超小型デバイスで見られるかもしれないし、
標準要素を使えば操作に関してもデバイスや閲覧者のハンデに応じた補正が入る
それらを全て再実装することは不可能なのですべきではないということ

もしそれっぽくデザインしてもそれが別の環境では改悪になることもある
Webっていうのは様々なデバイスで様々に見られる柔軟性が良いのであって
Flashが廃れてHTML5が栄えた理由の一つもFlashがスマホという新しい環境に適応できなかったから
だから自分の好きなデザインで固定化するという悪歴史の繰り返しは避けないといけない

それがサイトの構成上本当にどうしても必要なものであれば良い
でもデザイン上自作したほうが良いように思えるという理由ならやめとけ

**デフォルトの名無しさん** · 2018/03/07(水) 21:19:03.68

セマンティクス的な意味でもそのままの要素を使う方が望ましいのは当然ですが
そうはいかない場合もありますよね
なんとか元のタグを生かそうとしたのですが機能上不可能だったので自分で実装しました

**デフォルトの名無しさん** · 2018/03/08(木) 02:00:43.54

そこに現れたJSオフユーザー

**デフォルトの名無しさん** · 2018/03/08(木) 06:41:02.68

これ以上アドバイスしようがない
人の忠告を聞く気がないなら初めから自分で好きにやればいい

**デフォルトの名無しさん** · 2018/03/08(木) 17:54:27.13

ちょっと抽象的な質問で恐縮なのですが、ハロワの要求する経験欄に、
JavaScriptに精通している事、とあるのですが、どのレベルまで行っていれば
その条件を満たしていると考えてよいでしょうか？
具体例などを挙げて頂けると幸いです。

**デフォルトの名無しさん** · 2018/03/08(木) 19:12:11.83

電話して聞けよ。

**デフォルトの名無しさん** · 2018/03/08(木) 21:31:21.97

>>70
会社によっても違うかと。
teratailでスコアをある程度jsで取れてる？
qiitaに、記事を書いてる？

70 · 2018/03/08(木) 23:21:20.53

答えてくれた方、ありがとうございます。

>>71
検討してみます。

>>72
いえ、teratailやqiitaにはノータッチです…。

**デフォルトの名無しさん** · 2018/03/09(金) 08:07:45.79

generatorの中でawait使いたくなって混乱した。
処理を細切れにasync即時関数にするくらいしかないのかな。

yield (async () => {
})();

もうちょっと目に優しい方法があると良いが。

**デフォルトの名無しさん** · 2018/03/09(金) 20:58:40.68

もうChromeとかではasync generatorが使える

**デフォルトの名無しさん** · 2018/03/09(金) 21:56:48.81

ググってもよくわからんかったが、そのasync generatorてのを使った記述ってどんな感じなの？
あと、ESで言うとどのバージョンに含まれる仕様なんだろうか。

**デフォルトの名無しさん** · 2018/03/11(日) 00:46:13.29

ある配列から別の配列に存在する要素を削除する
一番いい方法はどういったものですか？

**デフォルトの名無しさん** · 2018/03/11(日) 00:50:38.53

>>77
lodashの_.differenceメソッドを使用する

https://lodash.com/docs/4.17.5#difference

_.difference([2, 1], [2, 3]);
// => [1]

**デフォルトの名無しさん** · 2018/03/11(日) 00:57:57.53

>>78
これはいいですね
ありがとうございました

**デフォルトの名無しさん** · 2018/03/11(日) 01:14:30.17

>>77
バニラならfilterで

var foo = [1,2,3,4,5]
var bar = [2,4,6]
foo.filter(x => !bar.includes(x))
//=> [1,3,5]

**デフォルトの名無しさん** · 2018/03/11(日) 01:51:38.61

>>80
バーニラバニラバーニラ

**デフォルトの名無しさん** · 2018/03/11(日) 02:27:31.31

高・収・入～！