+ JavaScript の質問用スレッド vol.125 + ->画像>4枚

このスレへの固定リンク： http://5chb.net/r/tech/1518940081/
ヒント：5chスレのurlに http://xxxx.5chb.net/xxxx のようにbを入れるだけでここでスレ保存、閲覧できます。

1デフォルトの名無しさん2018/02/18(日) 16:48:01.14ID:F2O3xW/S

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
http://2chb.net/r/tech/1427008785/

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

2デフォルトの名無しさん2018/02/18(日) 16:49:02.27ID:F2O3xW/S

さて、むそろそろ俺の登場かな？
この問題はね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にはならないんだけどね。
でも検索エンジンには関係ない話

3デフォルトの名無しさん2018/02/18(日) 16:49:33.38ID:F2O3xW/S

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

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

4デフォルトの名無しさん2018/02/18(日) 16:50:02.42ID:F2O3xW/S

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

5デフォルトの名無しさん2018/02/18(日) 16:51:04.80ID:F2O3xW/S

補足

「その与えられた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を返すことができる。

6デフォルトの名無しさん2018/02/18(日) 16:51:34.30ID:F2O3xW/S

クローラーについて

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

クローラーはクッキーやローカルストレージは使わない
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のどちらかに決定することが可能
（まあ他にもリダイレクトとかあるだろうけどいずれにしろどれかに決定できる）

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

7デフォルトの名無しさん2018/02/18(日) 16:55:51.36ID:F2O3xW/S

ターニングポイント

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

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

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

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

8デフォルトの名無しさん2018/02/18(日) 22:24:06.39ID:+Qsqi9wm

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

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

>>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ステータスコードの話 ===

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

じゃあ、ブラウザの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を返すだけでいいんだよ。

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

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が返せるし、パフォーマンスアップにもつながる

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

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

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

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

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

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

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

http://2chb.net/r/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通信を回避することが可能です。

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

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

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

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

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

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

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

17デフォルトの名無しさん2018/02/21(水) 01:49:20.69ID:w/kCm8RN

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

18デフォルトの名無しさん2018/02/21(水) 02:06:56.65ID:1KGQWp4x

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

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

TwitterはSPAじゃないしな。

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

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

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

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

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

22デフォルトの名無しさん2018/02/21(水) 12:11:20.96ID:24hGvHf2

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

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

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

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

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

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

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