Web アプリケーション

Web アプリケーションとは

Web アプリケーションは、Web ブラウザを通じて利用するアプリケーションだ。専用ソフトを端末にインストールせず、URL にアクセスするだけで使える。ネット通販、SNS、オンラインの業務システムなど、日常的に使う多くのサービスが Web アプリにあたる。インストール不要で、OS を問わず幅広い端末から使える手軽さが特徴になる。

基本構造

要素	役割
フロントエンド	ブラウザ上の画面・操作
バックエンド	サーバー側の処理・ロジック
データベース	データの保存
API	フロントとバックの連携

利用者の操作がフロントエンドで受け取られ、API を通じてバックエンドが処理し、必要なデータをデータベースとやり取りする、という流れで動く。

Web サイトとの違い

Web アプリは利用者の操作に応じて処理を行い、その結果を保存する。ログイン、検索、購入、データの編集のように、送った内容が次に見る画面を変える。読むだけの Web サイトとの違いはここにある。

ただし「動的か静的か」で線を引こうとすると現実に合わない。あらかじめ生成した HTML を配るだけの構成でも、画面の JavaScript が別の API を呼べば申し込みや投稿は成立する。逆に、サーバー側で毎回 HTML を組み立てていても、誰が見ても同じ内容なら読み物にすぎない。分かれ目は配信方式ではなく、利用者ごとに結果が変わる処理と、その結果として残る状態を持つかどうかだ。

ログイン状態が保たれる仕組み

Web アプリで最初につまずきやすいのが、ログインが続く理由だ。HTTP はステートレスな設計で、各リクエストは単独で意味が解釈でき、同じ接続で届いた 2 つのリクエストが同じ利用者のものだとサーバーが仮定してはならない、とまで規定されている。何もしなければ、画面を移った瞬間に相手は誰でもなくなる。

そこを埋めるのが Cookie だ。サーバーは Set-Cookie ヘッダーで識別子を渡し、ブラウザは以降のリクエストで Cookie ヘッダーとして送り返す。この往復によって、ほぼステートレスな HTTP の上に「セッション」という状態が乗る。サーバー側はその識別子に紐づけて、誰がログイン中で、カートに何が入っているかを保持する。

落とし穴は、その状態の置き場所にある。HTTP がステートレスであることを前提に、リクエストは複数のサーバーへ自由に振り分けられる。状態をアプリのメモリに置くと、台数を増やした瞬間に振り分け先が変わってログアウトが起きる。共有のデータストアに置くか、JWT のように署名付きトークンとして利用者側に持たせるか、どちらかを最初に決めておく必要がある。

開発で意識すべきこと

Web アプリは不特定多数がネット越しに利用するため、手元で動くソフトとは詰まる場所が違う。同時アクセスで先に尽きるのは多くの場合 CPU ではなくデータベースへの接続数で、上限に達すると全員が待たされる。表示が遅い原因も、画面 1 枚のために問い合わせを何十回も繰り返している、という形で現れることが多い。

セキュリティで効くのは網羅的な心構えより、置き場所の決め方だ。入力の扱いは受け取った時点でなく表示する時点の処理で決まる。権限の確認は画面でボタンを隠すだけでは足りず、リクエストを受けたサーバー側で毎回やり直す。ブラウザに送ったコードと値は利用者から見えるので、鍵や他人のデータをそこへ載せない。この 3 つを外すと、公開されている入口の数だけ穴が開く。

学習には関連書籍が役立つ。