アプリ基盤編 第2章 / 全13章
フロントエンドとSPAとは
HTML ・ CSS ・ JavaScript ・ React
ブラウザの中で動く部分紙芝居とホワイトボード。紙芝居（MPA）は場面ごとに1枚まるごと差し替える。ホワイトボード（SPA）は、変わった部分だけを書き直す。
図とさわれるデモで確かめる →
ポイント
- 画面は HTML（骨組み）・CSS（見た目）・JavaScript（動き）でできている
- SPAは、必要なデータだけを取りに行って画面の一部を書き換えるので、操作が速い
- 最初の表示を速くするため、サーバー側で画面を組み立てておく（SSR）方法もある
名前の由来
single1枚のpageページapplicationアプリ
SPA（Single Page Application）：1枚のページの中身を書き換えながら動くWebアプリ。
仕事の現場では
Gmail や Googleマップのように、ページを移っても画面が白くならないWebアプリはSPAの代表です。社内システムでも、操作の多い画面ではSPAが選ばれることが増えています。
くわしく（正確な話）
- 画面づくりでは React・Vue・Angular などのフレームワークがよく使われる。
- React をもとに、SSRなどをまとめて提供するのが Next.js。
- SPAは最初に読み込むプログラムが大きくなりがちで、検索エンジンへの見え方にも工夫が要る。
- スマホでもアプリのようにホーム画面から使えるWebアプリを PWA と呼ぶ。
うまれ：React は2013年に Facebook（現 Meta）が公開した。
この章の用語（意味と語源）
- SPA / MPA エスピーエー / エムピーエー
1枚のページを書き換えながら動くWebアプリ／ページごとに丸ごと読み込むWebサイト。
語源Single Page Application / Multi Page Application の頭文字。
- HTML / CSS / JavaScript Webの画面を作る3つの言葉
Webの画面を作る3つの言葉。骨組み・見た目・動き。
覚えておく：骨組み / 見た目 / 動き
語源HTML は HyperText Markup Language（印を付けて書く言語）、CSS は Cascading Style Sheets（滝のように上から順に効く見た目の指定）。
- React / Vue / Next.js 画面づくりのフレームワーク
画面を作るための代表的なフレームワーク。
語源react は「反応する」。データが変わると画面が反応して書き換わることから。Vue はフランス語で「眺め（view）」。
- SSR（サーバーサイドレンダリング） Server-Side Rendering
画面の組み立てをサーバー側で済ませてから送る方法。
最初の表示が速く、検索エンジンにも内容が伝わりやすくなります。
語源Server-Side Rendering（サーバー側での描画）の頭文字。
- レンダリング Rendering
データやHTMLから、画面を描き上げること。
語源render（仕上げて差し出す）。