Webサイトを開くとき、私たちはまずブラウザを立ち上げる。ブラウザはURLを受け取り、その先にある情報を取りに行く。返ってくる情報の一番骨組みになっているのがHTMLだ。

HTMLはあくまで「構造」を伝える言葉なので、それだけでは静かなページしか作れない。クリックで何かが変わる、入力をチェックする、表示を切り替える——そういう「動き」を担うのがJavaScript。JavaScriptは元々、ブラウザの中だけで動く言語だった。

ところが「これをサーバー側でも動かしたい」という需要が出てきた。そこで生まれたのがNode.js。JavaScriptをブラウザの外で動かす仕組み。これがあるからこそ、開発に使う多くの道具が動いている。

大きなWebサイトを作るときに、JavaScriptだけで全部の画面を組み立てるのはしんどい。そこでReactのような道具が登場する。画面を「部品」として作って組み合わせる考え方だ。ただ、Reactだけだと、ページの切り替えや初回表示の速さなど、自分で組み立てる部分も残る。

そこで使われるのがNext.js。Reactを土台にしたフレームワークで、Webアプリ作りに必要なものが一通り揃っている。フレームワークとは、ゼロから家を建てる代わりに、柱や配管がすでに通った家を借りるようなもの。

コードができたら、それを保存・共有する場所としてGitHubを使うのが定番。「いつ誰が何を変えたか」が全部残るので、間違えても戻せる。ひとりで使っても十分役に立つ。

ただ、GitHubに置いただけでは、まだ世界からは見えない。GitHubはあくまで「コードの倉庫」だからだ。Webサイトとして人がアクセスできるようにするには、ホスティングが要る。GitHubとホスティングを繋いでおくと、コードを更新するだけで自動的にWebに反映される、という流れが組める。

代表的な選択肢は2つある。VercelとCloudflare。VercelはNext.jsを作っている会社が運営しているので、Next.jsと相性がいい。Cloudflareは無料枠が広く、データ保存や処理など追加のサービスも揃っているのが強み。

道具はたくさん見えるが、関係を整理すると流れはひとつ。ブラウザで動かす言葉がHTMLとJavaScript。JavaScriptを外でも動かすのがNode.js。画面を作りやすくする道具がReactとそのフレームワークであるNext.js。コードを置く場所がGitHub。世界に見せる場所がホスティング（VercelやCloudflare）。点と点が、線で繋がる。

Web開発の構造