はじめに
こんにちは！
35歳から未経験でエンジニアの世界に飛び込んだ者です。
プログラミングの勉強を始めた当初、正直かなり曖昧な理解でした。
- 「ネットに繋がってるから動く」
- 「ボタンを押したら結果が出る」
その裏側で何が起きているのかは、まったく意識していませんでした。
今の開発現場は「分業化」が進んでいます。最初から全ての技術の達人になる必要はありません！
でも、「全体像」を把握して、各技術がどんな役割分担をしているのかを知ることは、絶対に外せない超・重要ポイントなんです。
今回は、私が学習初期に一番チンプンカンプンだった「Webシステムの全体像」について、例え話を使ってスッキリ解説しちゃいます！
参考書籍：
小森裕介『プロになるためのWeb技術入門』
この記事はこんな方におすすめです！
プログラミング学習を始めたばかりで、カタカナ語の洪水に溺れかけている方
フロントエンド？バックエンド？何それ美味しいの？と真顔で思っている方
自分がどの部分を作るのかイメージが湧かない方
Webシステムとは？（一言でいうと）
ズバリ、「超巨大なレストラン」です！
私たちが普段「ネット」と呼んでいるWebシステムは、大きく以下の4つの要素でできています。これをレストランに例えてみましょう。
・Webコンテンツ ＝ お客様に提供する「料理」
スマホやPCの画面に表示される、文章・画像・動画などの「情報そのもの」です。
・フロントエンド ＝ レストランの「客席・ホール」
私たちが直接タップしたり文字を入力したりする「画面」と
それをブラウザ上で動かすための仕組みです。
・バックエンド ＝ レストランの「厨房（キッチン）」
ユーザーからは見えない裏側で、会員データを保存したり
検索結果を計算して引っぱり出してくる「サーバー側の仕組み」です。
・ネットワーク ＝ 料理を運ぶ「通路・道路」
あなたのスマホ（客席）と、遠く離れた場所にあるサーバー（厨房）を繋いで
データをやり取りするための「通信の通り道」です。
これさえ頭に入れておけば、これからの学習がグッと楽になりますよ！さっそく、それぞれの役割を見ていきましょう。
具体的な各パーツの役割
1. Webコンテンツ（提供される料理）
Webサイトを通じてユーザーが見たり聞いたりする情報すべてを「Webコンテンツ」と呼びます。料理の提供方法には2種類あります。
・静的コンテンツ（作り置きのお弁当）
あらかじめ用意されていて、誰が見ても同じもの。
例：企業案内の文章、画像、動画など。
・動的コンテンツ（オーダーメイドの料理）
ユーザーの操作（注文）に応じて、その場でパパッと作られるもの。
例：Googleの検索結果、Amazonのおすすめ商品など。
2. フロントエンド（客席とホールスタッフ）
ユーザーが直接触れる「表側」の世界です。
デバイス：スマホやPCなど、お客さんが使う「テーブル」。
Webブラウザ：ChromeやSafariなど。Webとやり取りする場を提供するアプリ。
ブラウザの中には、さらに優秀なスタッフたちが働いています。
HTTPクライアント：「厨房（サーバー）に注文を伝える」オーダー取りのウェイター。
レンダリングエンジン：HTMLやCSSを読み解いて、盛り付けして見せる（画面に表示させる）配膳係。
JavaScriptエンジン：画面上でアニメーションなどを動かす「エンターテイナー」。
3. バックエンド（裏側の厨房）
ユーザーからは見えない「裏側」の世界です。システムによって使われる道具（ソフトウェア）はバラバラですが、共通しているのは以下の動きです。
ホール（フロントエンド）からの注文（要求）を「HTTP」という通信ルールで受け取る。
注文に合わせて料理（Webコンテンツ）を作り、ホールへ返す。
この注文を受ける窓口が「HTTPサーバー」です。
厨房の中は日進月歩で正解がありませんが、大抵は以下のセット（ソフトウェアスタック）が置かれています。
Webアプリケーションフレームワーク（調理マニュアル・便利な調理器具）
プログラミング言語（調理の技術・レシピ）
データベース（食材がたくさん詰まった巨大な冷蔵庫）
4. ネットワークとインターネット（料理を運ぶ道）
フロントエンド（客席）とバックエンド（厨房）が遠く離れている場合、そこを繋ぐのが「ネットワーク」です。
そして、世界中の様々な組織が運営するネットワークが合体した巨大な道が「インターネット」と呼ばれます。
5. 実行環境（どこでお店を開くか？）
作ったシステムを実際に動かす「場所」のことです。
フロントエンドの実行環境
昔はPC一択でしたが、今の主役は圧倒的にスマートフォンやタブレットです。
バックエンドの実行環境
ここは昔と今で大きな変化がありました。
・オンプレミス（自前で土地を買ってお店を建てる）
自社で機械を買って管理します。
大規模なお店が作れますが、お金も手間もかかり、メンテナンスの人件費も莫大です。
・クラウド（レンタルスペースでお店を出す）
オンプレミスは大変…そこで登場したのがクラウド！
インターネット経由で、必要な時だけ環境を借りられます。
IaaS（イアース）：空の店舗（インフラ）だけ時間貸ししてもらう。
PaaS（パース）：調理器具まで揃った居抜き物件（プラットフォーム）
を借りてもっと楽にアプリを動かす。
35歳がハマったポイント 💦
罠：「謎の横文字を全部丸暗記しようとしてパンクする」
学習を始めると「React」「AWS」「Ruby on Rails」「MySQL」など、新しい単語が次々と襲ってきます。私はこれを単語帳のように丸暗記しようとして、見事に挫折しかけました。
解決策：「これはレストランのどこだ？」と常にマッピングする！
新しい技術用語が出てきたら、「あ、これはフロントエンド（ホール）の話だな」「これはバックエンドの冷蔵庫（データベース）の種類か！」と、必ず全体像のどこに当てはまるのかを分類するようにしました。
地図を持たずに歩くのをやめるだけで、学習の理解度は劇的に変わりますよ！
まとめ
いかがでしたか？
「Webシステム」と聞くと難しそうですが、要は「注文を受けて、料理を作って、お客さんに届ける」という仕組みの巨大版です。
今は細かいプログラムの書き方が分からなくても大丈夫！まずはこの「全体像」という最強の地図を手に入れた自分を褒めてあげましょう。
35歳からの挑戦、まだまだここからですよ！一緒に頑張りましょう！