「会議の紙資料」で例えるSPAの仕組み
〜もう全ページ印刷し直さない〜
こんにちは！
35歳、未経験からWebエンジニアの道を歩み始めた者です。
さて、みなさんは普段スマホでSNSを見ているとき、「いいね」を押しても画面が真っ白にならずにサクサク動くのを当たり前に感じていませんか？
もし「いいね」を1回押すたびに、画面全体が真っ白になってイチから読み込み直されたら……想像するだけで「よくないね」になりますよね。
今回は、今のWebアプリが当たり前のようにサクサク動く裏側にある
「SPA（シングルページアプリケーション）」という技術について、働く人なら誰もが共感するであろう「会議の紙資料」に例えてスッキリ解説します！
この記事はこんな人におすすめ
「SPA」という言葉を初めて聞いた、Webの仕組みが分からない方
「Fetch」や「Promise」といった専門用語が並ぶと、ページを閉じたくなる方
「いいね」を押すたびに、ページ全体がイチから読み込み直されたら発狂する方
結論（先にシンプルに！）
ズバリ例えるなら
・従来型のWebアプリ
「1文字の修正のために、会議資料を”全員分・全ページ”刷り直す非効率な会社」
・SPA
「修正があった箇所だけ、サッと”付箋”を貼って上書きしてくれるスマートな会社」
これだけです！これがどういうことなのか、順番に見ていきましょう。
従来型Webアプリケーションの特徴と課題
昔ながらのWebサイトには、大きく分けて2つの「しんどいポイント」がありました。
1. 画面遷移の課題（毎回画面が真っ白問題）
一言でいうと： ページの一部（例えば「いいね」の数など）を変えたいだけでも、画面全体をイチから読み込み直す必要がある。
具体例：
会議室で資料を読んでいる時、「あ、10ページ目の売上数字、1桁間違えてる！」と気づいたとします。
従来型のWebサイトは、「申し訳ありません！それでは一度、皆様のお手元の資料を回収し、もう一度新しく印刷して配り直します！」という挙動をしていました。
資料が没収されて手元に何もない（会議が中断する）時間、それが「画面が真っ白になる」正体です。
2. サーバー通知の問題（総務・複合機の負担増加）
一言でいうと： サーバー（資料を作る総務部）が毎回「HTML（表紙）」「CSS（デザイン）」「データ（中身）」のすべてをイチから印刷してホチキス留めしなければならない。
具体例：
たった1文字直すだけなのに、全ページ分のインクと紙を消費して印刷している状態です。
これでは総務部（サーバー）もコピー機もパンクしてしまいます。
SPAの登場による課題解決！
この「毎回全ページ印刷し直し問題」を解決したのが
SPA（Single Page Application）です。
SPAはその名の通り、「1つのページ（今配られている資料）」のまま、必要な部分だけを書き換える技術です。
SPAがこれを実現できたポイントは、以下の2つです。
1. Fetch API（会議を止めずに裏で走る若手社員）
2. DOM操作（資料の該当箇所に「付箋」を貼って上書きする）
つまり、「会議はそのまま進行しながら、若手社員が裏で正しい数字だけをもらってきて、手元の資料にササッと付箋を貼って修正してくれる」ようになったのです！
会議をスムーズにする技術たちを深掘り
では、その「裏で数字だけを持ってくる仕組み」を支える3つの技術を見てみましょう。ここさえ分かればもう完璧です！
1. Fetch API（裏で走る優秀な若手社員）
一言でいうと：
画面を固まらせることなく、裏側でサーバーにデータを取りに行ってくれる機能です。（これを非同期通信と呼びます）
具体例：
誤字を見つけた時、会議自体はストップさせず、若手社員のFetch君に「ちょっと経理に正しい数字だけ確認してきて！」とコソッと頼みます。Fetch君が裏で確認に走っている間も、あなたは別のページの議論を続けることができます。（＝画面がフリーズせずに操作し続けられる！）
2. Promise（若手社員への「段取りメモ」）
一言でいうと：
通信（若手社員のお使い）の「結果」に対して、あらかじめどうするか指示を予約しておく書き方です。
具体例：
Fetch君を走らせる時、「確認できた後の段取り（Promise）」を事前に伝えておきます。
「正しい数字が分かったら（then）付箋に書いて資料に貼って」「もし経理が不在だったら（catch）俺にこっそり教えて」と、未来の行動ルールをセットしておくイメージです。
// Promiseを使った「段取りメモ」の例
fetch('https://api.example.com/sales-data') // ① Fetch君、経理に数字聞いてきて！
.then(response => response.json()) // ② 経理の返答を、付箋に書き起こす！
.then(data => console.log('修正するぞ！', data)) // ③ その付箋を、手元の資料に貼る！
.catch(error => console.error('経理が不在です！', error)); // ④ 失敗したら報告！
3. JSON（文字だけが書かれたシンプルな付箋）
一言でいうと：
サーバー（経理部）とやり取りするための、必要なデータだけをシンプルにやり取りするための形式です。
具体例：
経理部から渡される正しい数字が、また「立派な表紙がついた分厚い報告書（HTML）」だったら、Fetch君が会議室に持ち帰るのに時間がかかりますよね。
だから、SPAでは『{ "売上": "500万", "達成率": "120%" }』とだけ書かれた、必要な情報だけが書かれたシンプルな付箋（JSON）で受け取ります。これならFetch君も一瞬で運べますし、受け取った側も資料にペタッと貼るだけで済みます。
まとめ
お疲れ様でした！
今回の重要ポイントを3つにまとめます。
1. 従来型は「毎回、資料を全ページ印刷し直す」ため、シンプルだが更新のたびにコストがかかる
2. SPAは裏側でデータだけを取得し、必要な部分だけを更新できる
3. やり取りには「Promise（非同期処理の管理）」と「JSON（データ形式）」がよく使われる
この「会議の紙資料」のイメージを頭に入れておくと、
今後「非同期通信」や「JSON」といった用語も、イメージしやすくなると思います。
自分もまだまだ勉強中ですが、少しずつ理解を積み重ねていけたらと思っています。
それでは、また次回の記事で！