東桂西柿
副業メモ翻訳

IT初心者向け③：フロントエンド、バックエンド、データベースとは何か。レストランで考える

ソフトウェア開発をまったく知らない人にとって、次の言葉は少し面倒に感じるかもしれません。

でも、怖がる必要はありません。

まずは一つのレストランとして考えてみます。

フロントエンド、バックエンド、データベースとは何か。レストランで考える

フロントエンド：ユーザーが見る店構えと店員

フロントエンドは、ユーザーが直接見て、クリックし、入力する部分です。

たとえば次のようなものです。

レストランに例えるなら、フロントエンドは店構え、メニュー、店員、注文画面です。

解決すべき問題は一つです。

ユーザーが理解でき、スムーズに操作できるか。

今のフロントエンドでは、TypeScript と React が重要です。TypeScript は JavaScript に説明書を付けるようなもの、React はページを小さな部品に分ける考え方です。

初心者は最初から複雑なコードを書く必要はありません。ただ、フロントエンドは単なる「見た目」ではなく、操作体験とデータ表示を担当していると知っておきましょう。

バックエンド：厨房とお店のルール

バックエンドは、本当の業務ルールを処理します。

たとえば次のようなことです。

レストランなら、バックエンドは厨房と店長のルールです。

店員が注文を厨房へ伝え、厨房がルールに沿って料理を作ります。ユーザーからは見えませんが、厨房が止まれば体験全体が崩れます。

代表的なバックエンド技術には、Python、Go、Node.js、Java、PHP などがあります。

初心者がすべてを学ぶ必要はありません。まず一つ主軸を選べば十分です。TypeScript を学んでいるなら Node.js は自然です。性能やデプロイの単純さを重視するなら Go もよいでしょう。業務管理画面を早く作りたいなら PHP、特に Laravel は今も実用的です。

データベース：倉庫と帳簿

データベースはデータを保存します。

たとえば次のようなものです。

レストランなら、データベースは倉庫と帳簿です。

誰が何を注文し、いくら払ったのか、在庫がどれだけ残っているのかを記録します。

まずは次の2種類を知っておけば十分です。

データベースを高級な Excel だと思わないほうがいいです。本当に重要なのは、構造、検索、権限、バックアップ、一貫性です。

API：フロントエンドとバックエンドの会話

フロントエンドがデータベースを直接触るべきではありません。

通常は API を通じてバックエンドとやり取りします。

たとえばユーザーが「ログイン」をクリックすると、フロントエンドはこういうリクエストを送ります。

このアカウントとパスワードでログインできるか確認してください。

バックエンドは処理して、次のように返します。

ログインできます。これがユーザー情報です。

これが API です。

代表的なのは HTTP API や REST API です。定義を暗記する必要はありません。まずはこう理解すれば十分です。

異なるシステム同士が、安全かつ分かりやすくデータを交換する方法。

WebSocket、キュー、キャッシュはこう理解する

これらの言葉も今後よく出てきます。最初はざっくりで大丈夫です。

これらはすべてのプロジェクトで最初から必要なわけではありません。

小さなプロジェクトの失敗原因は、技術が高度でないことより、早すぎる複雑化にあることが多いです。まず最小構成で検証することのほうが大切です。

まずこの図が描ければいい

最も単純なソフトウェア構造は次の通りです。

ユーザー → フロントエンド → API → バックエンド → データベース

この線が理解できれば、多くのプロジェクトはそれほど謎ではなくなります。

AI がコードを書いてくれたときにも、次のような判断ができるようになります。

専門用語を暗記するより、こうした問いを持てることのほうが重要です。