非開発者のための IT 常識 #1 ウェブサイトは何でできているのか — フロントエンド・バックエンド・データベース
開発者と同じチームで働いていると、同じ言語で会話しているはずなのに、何を言っているのか分からない瞬間が訪れます。「それはフロントの作業だからすぐに終わります」「バックエンドを直す必要があるので数日かかります」「DB に溜まっていません」といった言葉がそうです。企画書を書き、画面をデザインし、サービスをマーケティングする人にとって、これらの単語は毎日耳にするものの、正確には分からない言葉として残りやすいものです。
このシリーズは、コードを一行も書かない人のための IT 常識講座です。開発者になるための記事ではなく、開発者と正確に会話するための記事です。用語を一つきちんと理解すれば、会議で迷う時間が減り、バグを正確に報告でき、スケジュールがなぜそのように組まれるのかも納得しやすくなります。
今回のシリーズは 非開発者のための IT 常識 の全 5 編で構成されます。
- #1 ウェブサイトは何でできているのか — フロントエンド・バックエンド・データベース ← この記事
- #2 API とは何か
- #3 サーバー、クラウド、そしてデプロイ
- #4 バグ、ホットフィックス、ロールバック — 開発者が障害に対応する方法
- #5 Git とバージョン管理 — 複数人で一つのコードを直す方法
最初の記事の目標はただ一つです。私たちが毎日使うウェブサイトやアプリが フロントエンド、バックエンド、データベース という三つの層に分かれていること、そして各層が何をしているのかの感覚をつかむことです。
画面の裏には三つの層があります #
ショッピングサイトで商品を検索し、カートに入れ、決済ボタンを押すという短い過程にも、実は別々の仕事をする三つの部分が一緒に動いています。レストランに例えると分かりやすくなります。
- フロントエンド はお客様が座るホールです。メニュー、テーブル、スタッフの応対のように、お客様の目に見え、お客様が直接触れるすべてのものです。
- バックエンド は厨房です。注文が入ると料理を作って送り出すところであり、お客様の目には見えません。
- データベース は食材の倉庫であり、帳簿です。材料を保管し、誰が何を注文したのかの記録を残します。
お客様が見るのはホールだけですが、ホールだけでは料理は出てきません。ウェブサイトも同じです。画面は全体の一部にすぎず、その裏で見えない二つの層が一緒に働いています。
フロントエンド — 目に見えるすべてのもの #
フロントエンドは、ユーザーの画面に直接現れる部分です。ボタンの色、文字の大きさ、メニューが開く動き、入力欄に文字を打ったときの反応が、すべてフロントエンドの領域です。ユーザーのコンピュータやスマートフォンで、正確には Chrome や Safari のようなウェブブラウザの中で動きます。
フロントエンドを作る基本的な材料は三つです。HTML が画面の骨組みを作り、CSS が色と形をまとわせ、JavaScript が動きと反応を加えます。デザイナーや企画者が最もよく向き合う部分が、まさにここです。「このボタンを右に移動してください」「フォントを大きくしてください」「ローディングアニメーションを入れてください」といった依頼は、ほとんどがフロントエンドの作業です。
ただし、画面に見えるからといって、すべてがフロントエンドというわけではありません。画面に表示される商品価格や会員名のような中身は、バックエンドから受け取った結果です。フロントエンドはその中身を見やすく配置して見せるだけです。この区別が、次の二つの層を理解する出発点です。
バックエンド — 見えないところで判断する頭脳 #
バックエンドは、ユーザーの目に見えないサーバーで動く部分です。ログインするときにパスワードが合っているかを確認し、注文が入ると在庫があるかを判断し、決済金額を計算し、権限のあるユーザーかどうかを検査する仕事をします。サービスのルールと判断が集まっているところなので、よくビジネスロジックと呼ばれます。
フロントエンドが「決済ボタンが押されました」と知らせると、バックエンドは「このユーザーがログイン状態であるか、残高や限度が十分か、在庫が残っているか」を順に確認したうえで、決済を進めるか拒否するかを決めます。「ログインできません」「決済が何度も失敗します」といった問題の多くは、画面ではなく、このバックエンドの判断過程で生じます。
同じバグでも、どの層の問題かによって、直す難易度は大きく変わります。ボタンの色を変えるフロントエンドの修正は短く終わる場合が多いですが、決済ルールを変えるバックエンドの修正は、間違えれば実際にお金が動く問題につながるため、慎重に進められます。開発者が「それはバックエンドなので少し時間がかかります」と言う理由が、ここにあります。
データベース — すべてを記憶する倉庫 #
フロントエンドとバックエンドだけでは、一つ足りないものがあります。それは記憶です。会員情報、注文履歴、投稿、商品リストのように、長く保管しなければならない情報を、どこかに保存しておかなければなりません。その保存場所がデータベースです。
データベースは、巨大な Excel の表を思い浮かべると近いです。会員の表には一行ごとに一人の情報が入り、注文の表には一行ごとに一つの注文が記録されます。バックエンドは必要なときにこの表から情報を取り出し、新しい情報を書き込み、変わった内容を更新します。ユーザーが会員登録をすると会員の表に一行が追加され、注文をすると注文の表に一行が積み上がっていく、という具合です。
「昨日登録したのに、今日見たら情報が消えていました」といった問題は、データベースと深く関係します。データベースは、電源が切れても内容が残るという点で、画面やサーバーの一時的な処理とは異なります。サービスが積み上げてきたすべての記録がここに残るため、データベースは最も慎重に扱う層でもあります。
一度のクリックが三つの層を経る過程 #
三つの層がどのように一緒に動くのか、ログイン一回を例にたどってみましょう。
- ユーザーが画面で ID とパスワードを入力し、ログインボタンを押します。ここまでが フロントエンド です。
- フロントエンドが入力された値を バックエンド に送ります。バックエンドは、この ID が実際に存在するアカウントかを確認するために、データベース に会員情報を要求します。
- データベースがその会員の保存された情報をバックエンドに返します。バックエンドは、入力されたパスワードが保存された値と合っているかを比較します。
- 合っていれば、バックエンドが「ログイン成功」という結果をフロントエンドに返し、フロントエンドはユーザーに歓迎画面を見せます。違っていれば「パスワードが正しくありません」というメッセージを見せます。
ボタン一回で三つの層が順に会話したことになります。このとき、フロントエンドとバックエンドが情報をやり取りする約束を API と呼びますが、この部分は次回で取り上げます。
なぜこれを知ると仕事が楽になるのか #
三つの層を区別できるようになると、実務ですぐに変わることがあります。
- バグを正確に報告できます。 「画面には 1,000 ウォンと見えるのに、決済すると 1,100 ウォンが引き落とされます」のように書けば、開発者は画面ではなくバックエンドの計算を疑えばよくなります。どの層の問題かを見積もった報告は、解決速度を大きく高めます。
- スケジュールの感覚が身につきます。 フロントエンドの修正かバックエンドの修正かによって作業の重さが違うことを知れば、「これはなぜ一日かかり、あれはなぜ一週間かかるのか」を納得しやすくなります。
- 会議で道に迷いません。 開発者たちが交わす会話の大きな流れを追うことができ、必要なときに正確な質問を投げかけられます。
まとめ #
この記事では、ウェブサイトやアプリが三つの層からできているという大きな絵を見てきました。
- フロントエンド は、ユーザーの目に見え、直接触れる画面です。
- バックエンド は、見えないサーバーでルールを判断し、処理する頭脳です。
- データベース は、情報を長く保管し、記録する倉庫です。
この三つの層は離れて働くのではなく、ユーザーの行動一つごとに絶えず互いに会話します。その会話がどんな約束の上で行われるのかが、次回のテーマです。次の記事では、開発者たちが口癖のように使う単語である API が何なのかを見ていきます。