迷ったときに立ち返る HTML, JavaScript, CSS 概論 (3)

Last updated at 2021-04-22Posted at 2021-04-22

前段

前回は URL とリクエストのお話ししました。その中で REST の話をしたとき、さらっと "ステートレスなクライアント/サーバプロトコル" と書いたのですが、ステートの話を端折っていたのでその話からしていきます。
その後、Web システムで各種問題を引き起こすキャッシュの話へと流れていきます。

概論 1回目で書いたように HTTP のリクエストとレスポンスはクライアントとサーバの1回のやりとりで処理が完結します。
- クライアントからリクエスト送る、サーバがレスポンスを返すで1回の処理完了
なので、サーバー側で何も考慮しないと処理の状態(例えばログイン状態や、一連の流れの中で処理がどこまで進んでいるか等)を管理することができない。
このままでは複数回のやり取りで処理を行うような場合、すべての状態を各リクエストのパラメタで渡す必要があり、処理が冗長になってしまう。
ここでいう一連の処理の流れがセッション、そのセッション間で保持する状態をステートと言います。
- 例: ログイン～ログアウトまでがセッション、ログインしているかどうかや、複数画面に跨る入力画面のどこまで進んでいるかがステート

ステートフル とはサーバ側でセッションの状態(ステート)を保持していることを言います
- ステートによってリクエストに対するレスポンスが変わります。例えばセッションタイムアウトの状態で画面遷移を行うとログイン画面に遷移したりするのはステートフルだからできることです。
- サーバ側で状態を保持しているので、リクエストはシンプルにできたりします (パラメタを減らせます)
ステートレス とはステートフルの逆でセッションの状態を保持していないことを言います。
- ステートレスな際はリクエストに対するレスポンスは一意です(もちろんデータによってレスポンスは変わるでしょうが、ステートによる影響は受けないという意味です)。
- ステートを持たないのでリクエストが増えてきたときにスケールはしやすいですね
- 前回記載したように REST はステートレスです
ステートフルとステートレスの違いをネットでいろいろ見てみて、わかりやすい例えだったのが下記
- 引用元: https://www.web-knowledge-info.com/posts/web_basic_knowledge17.html

1回目でやりとりした相手を2回目に会ったとき、覚えていることをステートフル。
一方、1回目でやりとりした相手を2回目に会ったとき、覚えていないことをステートレス。

上記でステートフル、ステートレスの話を書いたのですが、意識してコードを書いても思い通りの結果が出なかったときってないですか ? リリースしたのにお客様から画面変わってないと言われたり、画面真っ白になるんだけどとか ...
- Web系のシステムだと(リリース手順にある程度自信がある場合)結構キャッシュが悪さしてたりします
- で、キャッシュが原因だとすると、そのたびお客様にキャッシュをいったん削除していただいて ... とお願いするのですが、この流れが不毛だし、リリースは気分よく終わらせたいのでキャッシュを制御することを意識しましょう
ただ、キャッシュが悪者という訳ではなく、静的コンテンツはキャッシュのおかげで読み込み時間減らせるので、コードやコンテンツの修正がないのであれば非常に有用なものです。悪いのは適切なキャッシュコントロールをしていない開発者 ...

Cache-Control ヘッダ
- キャッシュさせない no-cache が有名ですがディレクティブはいろいろあります
- https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control
IF-Modified-Since ヘッダ
- サーバーは最後にリソースが変更された時刻が、リクエストにより与えられた時刻より後の場合にのみ、リクエストされたリソースを返却します。
- https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/If-Modified-Since
これらのヘッダを HTML に meta タグで記載すれば HTML のキャッシュは制御できるのですが、スタイルシートや javascript のキャッシュまでは制御されません。そこで後述

HTML からスタイルシート、javascript を呼び出す際にファイル名の末尾になんらかのクエリストリングを追加して、キャッシュさせないようにできます
- 例: bar.js をキャッシュさせないようにする

<script src="js/bar.js" />
という記載だったとすると、後述のようにクエリストリングを追加し、キャッシュさせないようにする。
再度修正するときはクエリストリングの数値を大きくしていく。

<script src="js/bar.js?1" />

コメントにて廣瀬さんからキャッシュ除けより "Cache Busting" って用語を覚えてもらったほうがいいのではというのがありましたので、追記しておきます。

今回はステートとキャッシュの話でした。第1回から今回までのキーワードをちりばめて技術系の人と会話するとそれっぽい SE に見られると思いますので恥ずかしがらずに使ってみてください。技術に疎いお客様にこれみよがしに使うと、わかりづらい説明をする人だと思われますので注意してください。
HTML, CSS, JavaScript でこういうの知りたいとかありましたらコメントで残しておいてもらえると、次書く際の材料にしますので、よろしくお願いします。(まだ一つもリクエストないんだよね)
次は開発者ツールの使い方なのか、ログの話なのか、別な概念の話なのか ...