Webアプリ

🚀 はじめに この記事でわかること SPA（シングルページアプリ）とは何か なぜ Webアプリがヌルッと動くのか（ページ遷移が速い理由） SPAが使われる場面と、もし使わないとどうなるか 初心者でもイメージしやすい「動きの仕組み」 ✅ 概要解説 SPA（シングルページアプリ）とは何か 一言でいうと、「ページを切り替えずに中身だけ入れ替えるWebアプリ」 のことです。 普通のWebサイト（MPA：マルチページアプリ）は、 リンクをクリックするたびに ページ全体をサーバーから読み直します。 一方、SPAは… 最初に 1枚のページ（HTML）を読み込む あとは必要な部分だけ JavaScriptで書き換える ページ全体を読み直さないので ヌルッと動く という仕組みになっています。 何のためにあるのか SPAの目的は 「体験を速く・滑らかにする」 こと。 ページ全体を読み直さない 必要なデータだけサーバーから取ってくる 画面の切り替えがアプリのようにスムーズ その結果、ユーザーは アプリを触っているような快適さ を感じます。 SPAがないとどうなるのか SPAを使わない場合（普通のWebサイト）だと… ページ遷移のたびに 画面が真っ白になる 読み込みが終わるまで 待ち時間が発生 ボタンを押すたびに ページ全体がリロード つまり、動きがカクカクしやすい。 SPAはこの「毎回リロード問題」を解決するために生まれました。 どんな場面で使えるのか SPAは、動きの多いWebアプリに向いています。 SNS（Twitter / Instagram） チャットアプリ（Slack / Discord） 地図アプリ（Google Maps） 管理画面・ダッシュボード ECサイトの検索画面 逆に、ブログや企業サイトのように 「ページを読むだけ」のサイトでは、SPAである必要はありません。 💡 小話・豆知識・逸話 1) SPAが“アプリっぽい”理由 SPAは、画面の切り替えを ブラウザではなくJavaScriptが担当します。 スマホアプリと同じように、画面の中身だけ差し替えるので、 「アプリみたいに動く！」と感じるわけです。 2) 実は昔のWebは全部“MPA”だった 昔のWebは、リンクを押すたびにページ全体を読み直すのが当たり前でした。 SPAの登場で、Webが アプリのように動く時代 に進化しました。 ...

🚀 はじめに この記事でわかること Webサイトを開いたとき、裏側で起きている一連の流れ 「リクエスト」「レスポンス」という言葉の正体 Webアプリがどうやって画面を表示しているのかのイメージ ✅ 概要解説 Webアプリの“リクエストの旅”とは？ Webサイトを見るたびに発生する、 「お願い（リクエスト）」→「返事（レスポンス）」の往復旅行のことです。 たとえば、あなたがブラウザで 「https://example.com」と入力してEnterを押した瞬間。 実は、そのとき 小さな旅 が始まっています。 何のためにあるのか？ Webアプリの世界では、勝手に情報は届きません。 利用者が →「このページを見せてください！」とお願いする サーバーが →「はい、どうぞ！」と返事を返す このルールがあるからこそ、 世界中の人が 同時に 同じしくみで Webを使えるようになっています。 もし“リクエスト”がなかったら？ ブラウザは 何を表示したらいいかわからない サーバーも 何を返せばいいかわからない Webは 沈黙したまま つまり、 Webの会話は「リクエスト」がなければ始まらないのです。 “リクエストの旅”をざっくり全体像で見る まずは細かい用語を忘れて、流れだけ見てみましょう。 あなた（ブラウザ）がURLを入力 「このページください！」という手紙（リクエスト） を送る インターネットの道を通って Webサーバーに到着 サーバーが「OK！」と返事（レスポンス） を作る 返事が同じ道を戻ってくる ブラウザが画面を組み立てて表示 これが、1回のページ表示で起きている基本の旅です。 もう少したとえ話で理解する 📨 郵便で考えてみる あなた：手紙を出す人 ブラウザ：ポストに入れる係 インターネット：郵便道路 サーバー：手紙を受け取る会社 あなたが 「この商品カタログを送ってください」 と手紙（リクエスト）を出すと、 サーバーが 「了解です。こちらがカタログです」 と封筒（レスポンス）を返してくれる。 Webも、基本はこれと同じです。 Webアプリになると何が変わる？ ただのWebサイト（静的サイト）なら、 あらかじめ用意されたページを返すだけ ですが、Webアプリでは少し進化します。 ログイン情報をチェックする あなた専用のデータを取り出す 状況に合わせて内容を組み立てる それでも基本は同じ。 ...