こんにちは、イケハヤです。
AIと一緒にコードを書いていく「バイブコーディング」。たしかに、これからの時代のスタンダードな働き方になっていくとぼくは思っています。
でも、AIに指示を出すにしても、基本的な「言葉」を知らないと、そもそも対話が始まりませんよね。
「専門用語が多くて、なんだか難しそう……」と感じるかもしれません。でも大丈夫です。どんなプロフェッショナルも、最初はみんな初心者でした。
今回は、特にコードを書いたことがないというWeb開発初心者の方に向けて、最低限知っておきたい基本用語を、ぼくなりにたとえ話を交えながら、できるだけやさしく解説していきます。
この記事を読めば、開発者たちが話している言葉のイメージが掴めるはずです。では、一緒に学んでいきましょう！
Webアプリの基本的な仕組み
まずは、Webサービスがどうやって動いているのか、その全体像から見ていきましょう。
クライアント (Client)
やさしい定義
クライアントとは、ユーザーが直接操作する側のことです。たとえば、みなさんが今この記事を読んでいる「ブラウザ（ChromeやSafariなど）」がクライアントにあたります。
要するに、「利用者側のコンピュータやアプリ」のことですね。
たとえ話
お店でいうところの「お客さん」です。お客さん（クライアント）は店員さんに「この商品を見せてください」とリクエスト（要求）し、商品を受け取ります。
このように、クライアントは何か情報が欲しいとリクエストして、その結果を受け取る役割を担っています。
使い方の例
「このアプリはクライアント側だけで動くんだって」という会話があれば、「ほう、このアプリはユーザーの手元（ブラウザ）だけで完結する仕組みなんだな」と理解できます。
補足
「クライアントサイド」とも言います。クライアントは、次に出てくる「サーバー」からデータをもらって動いています。
たとえば、ブラウザに表示されているWebページは、サーバーから送られてきたデータそのものです。
サーバー (Server)
やさしい定義
サーバーとは、サービスを提供している側のコンピュータのことです。
Webサイトのデータ（文字や画像など）を保管しておいて、クライアントからの「このページが見たい」という要求に応じて、そのデータを送り返す役割を持っています。
たとえ話
お店にたとえるなら「店員さん」や「お店そのもの」がサーバーです。
お客さん（クライアント）からの「この商品を見せて」というリクエストに対し、店員さん（サーバー）は在庫を探して「はい、どうぞ」と商品（データ）を渡します。
サーバーはまさにこの店員さんのように、求められた情報を用意して渡すのが仕事です。
使い方の例
「サーバーが落ちていてページが見れない」という状況は、「お店が閉まっていて商品を出してもらえない状態」、つまりサーバーが動いていないことを意味します。
補足
「サーバーサイド」とも呼びます。
開発中は、自分のPCを仮想的なサーバーに見立てて動作確認をすることがよくあります。
そのときに使う特別な住所が「localhost（ローカルホスト）」です。
これは「自分のPCそのもの」を指す開発用のテストサーバーだと思ってください。
フロントエンド (Front-end)
やさしい定義
フロントエンドとは、Webサイトやアプリの「見た目」や「操作する部分」を作る役割のことです。
ユーザーが直接触れる画面側の開発全般を指していて、ボタンやメニューといった「UI（ユーザーインターフェース）」を構築します。
たとえ話
レストランにたとえるなら、フロントエンドは「ホールスタッフ」のような存在です。ホールスタッフ（フロントエンド）は、お客さん（ユーザー）から注文（クリックや入力）を受け取り、それを厨房のシェフ（バックエンド）に伝えます。
そして、出来上がった料理（データ）をお客さんに届けるのもホールスタッフの役目。まさにユーザーと、裏方であるバックエンドをつなぐ「窓口」ですね。
使い方の例
「ぼくはフロントエンド担当です」と言われれば、「この人はサイトの画面を作る部分を担当しているんだな」とわかります。
「この案件、フロントが凝ってて大変」という場合は、「画面側の実装が複雑で難しい」というニュアンスです。
補足
フロントエンド開発では、主に「HTML・CSS・JavaScript」という3つの言語が使われます。
最近では「React」や「Vue.js」といったフレームワークを使うのが主流ですね。
バックエンド (Back-end)
やさしい定義
バックエンドとは、Webアプリの「裏側」で動く部分を担当する役割です。
ユーザーからは直接見えませんが、データの保存や処理、ログイン認証など、サービスの心臓部となるロジックを実行します。
たとえ話
レストランのたとえで言うなら、バックエンドは「厨房のシェフ」です。
ホールスタッフ（フロントエンド）から伝えられた注文に応じて、シェフ（バックエンド）が料理（必要なデータや処理）を作ります。
シェフの仕事はお客さんからは見えませんが、美味しい料理を提供するためには不可欠ですよね。バックエンドも同じで、サービスが正しく動くための「縁の下の力持ち」なんです。
使い方の例
「バックエンドはPythonで書かれている」と聞いたら、「このサービスのサーバー側の処理は、Pythonという言語で動いているんだな」と理解できます。
補足
バックエンド開発では「Python」「Java」「Ruby」「Node.js」など、さまざまな言語が使われます。
データベースの操作やサーバーの設定など、幅広い知識が求められる領域です。
フルスタック (Full-stack)
やさしい定義
フルスタックエンジニアとは、フロントエンドからバックエンドまで、幅広く開発できるエンジニアのことです。
つまり、画面側もサーバー側も両方できる「オールラウンドプレイヤー」ですね。
たとえ話
レストランの例でいえば、一人で「ホールスタッフ（フロントエンド）」と「シェフ（バックエンド）」を兼任できるような人です。
メニュー開発から調理、接客まで全部こなせるスーパーマン、と考えると凄さが伝わるでしょうか。
使い方の例
「彼はフルスタックエンジニアだよ」と紹介されたら、「彼はWeb開発なら何でも一通りこなせる人なんだな」と思っておけばOKです。
補足
初心者がいきなりフルスタックを目指すのは大変です。
まずはフロントエンドかバックエンド、どちらか一方をしっかり学び、そこから徐々に守備範囲を広げていくのがおすすめです。
Webページを構成する3つの言語
次に、フロントエンドで使われる基本の3言語を見ていきましょう。
HTML（エイチ・ティー・エム・エル）
やさしい定義
HTMLは、Webページの「骨組み（構造）」を作るための言語です。
「ここが見出し」「ここが段落」といったように、ページの要素をタグで示していきます。
建物の「柱」や「梁」のようなものですね。
たとえ話
人間の体にたとえるなら、HTMLは「骨格」です。
骨格だけだと、まだ見た目は質素ですよね。
HTMLだけで作られたページも、白黒の文字が並んでいるだけのシンプルなものになります。
使い方の例
「まずHTMLでページの構造を作ろう」と言われたら、「見出しや段落などを配置して、ページの土台を作ろう」という意味です。
CSS（シー・エス・エス）
やさしい定義
CSSは、Webページの「見た目（デザイン）」を指定するための言語です。
文字の色や大きさ、背景、レイアウトなどを調整し、HTMLで作った骨組みに「服を着せていく」ような役割です。
たとえ話
人間の体でたとえるなら、CSSは「服装」です。
同じ骨格（HTML）でも、着る服（CSS）によって印象はまったく変わりますよね。CSSによって、Webページはぐっと魅力的になります。
使い方の例
「ここのCSSを調整して」と言われたら、「ここの見た目（色や形など）をデザインし直して」という意味だと捉えましょう。
JavaScript（ジャバスクリプト）
やさしい定義
JavaScriptは、Webページに「動き」や「対話的な機能」を追加するためのプログラミング言語です。
ボタンをクリックしたらメニューが開く、入力内容をチェックするなど、ページに命を吹き込む役割を担います。
たとえ話
人間の体でたとえるなら、JavaScriptは「筋肉」や「表情」です。
骨（HTML）と服（CSS）だけではただの人形ですが、JavaScriptがあることで、実際に動いたり、笑ったりできるようになります。
使い方の例
「JavaScriptでフォームの挙動を制御しよう」と言われたら、「フォームが送信されたときの動きをプログラムで実装しよう」ということです。
補足
「Java」と名前が似ていますが、全くの別物なので注意してください。
メロンとメロンパンくらい違います。
開発を効率化する道具たち
ここからは、開発の現場でよく使われるツールや考え方について解説します。
ライブラリ (Library)
やさしい定義
ライブラリとは、開発でよく使う便利な機能をまとめた「道具セット」のことです。
特定の目的のためのコード集で、必要なものだけを選んで使います。
たとえ話
料理でいえば「便利な調味料セット」のようなものです。
塩、コショウ、スパイスなど、自分の料理（プログラム）に合わせて必要な調味料（機能）を自由に選んで使えます。
あくまで開発を「手助け」してくれる存在ですね。
フレームワーク (Framework)
やさしい定義
フレームワークとは、アプリケーション開発の「骨組み」や「ルール」を提供してくれる枠組みのことです。
決められたお作法に従ってコードを書くことで、効率よくアプリを作ることができます。
たとえ話
料理でいえば「ミールキット」です。
必要な材料とレシピがセットになっていて、手順通りに作れば料理が完成します。
一から自分で考える必要がない分、開発が楽になりますが、そのキットのルールに従う必要があります。
IDE（統合開発環境）
やさしい定義
IDEとは、プログラミングに必要なツールが一つにまとまった高機能なソフトウェアのことです。
コードを書くエディタ、プログラムを実行する機能、バグを見つけるデバッグツールなどが全部入っています。
たとえ話
IDEはプログラマーにとっての「多機能な作業デスク」です。
机の上に必要な道具がすべて揃っていて、あちこち移動しなくても開発に集中できる、そんな環境を提供してくれます。「Visual Studio Code (VS Code)」などが有名ですね。
GUI / CLI
- GUI (グラフィカルユーザーインターフェース): アイコンやボタンをクリックして、視覚的に操作する画面のことです。
- 普段ぼくらが使っているWindowsやスマホの画面がGUIです。
- CLI (コマンドラインインターフェース): キーボードでコマンド（命令文）を打ち込んで操作する黒い画面のことです。
- 初心者にはとっつきにくいですが、慣れると非常に高速に作業できます。開発者はこのCLIをよく使います。
デバッグ (Debug)
やさしい定義
デバッグとは、プログラムのバグ（誤り）を見つけて修正する作業のことです。
思った通りに動かない原因を探り、エラーを取り除きます。
たとえ話
壊れた家電を修理するような作業ですね。
エラーメッセージは、どこが壊れているかを教えてくれる「ヒント」です。
バグと向き合うことは、プログラマーとして成長するための大切なプロセスです。
チーム開発の必須ツール「Git」と「GitHub」
一人で開発するならまだしも、チームで作業するなら絶対に欠かせないツールです。
Git（ギット）
やさしい定義
Gitは、ファイルの変更履歴を管理するためのツールです。
「いつ、誰が、どこを」変更したのかを記録してくれます。
たとえ話
ゲームの「セーブポイント」のようなものです。
こまめにセーブ（コミット）しておけば、もし何か失敗しても、いつでも好きな時点の状態に戻すことができます。
GitHub（ギットハブ）
やさしい定義
GitHubは、Gitで管理している履歴を、インターネット上で保存・共有するためのサービスです。
Gitのデータを置いておくための「クラウド上の保管庫」ですね。
たとえ話
GitHubは「開発者のためのSNS付きオンライン金庫」です。
自分のPC（ローカル）で作ったセーブデータを金庫（GitHub）に預けておけば、PCが壊れても安心ですし、仲間とそのデータを共有することもできます。
リポジトリ (Repository)
やさしい定義
リポジトリとは、Gitで管理されるプロジェクトの「保管庫」のことです。
ソースコードや関連ファイル一式が、変更履歴とともに丸ごと保存されています。
ブランチ (Branch)
やさしい定義
ブランチとは、開発履歴の「分岐」のことです。
メインの履歴に影響を与えることなく、新しい機能の開発などを並行して進めるために、履歴の流れを枝分かれさせる仕組みです。
たとえ話
RPGでセーブデータをコピーして、別のルートを試すようなものです。「並行世界」を作って、そこで安全に実験ができる、というイメージですね。
うまくいけば、後で本流に合体（マージ）させることができます。
コミット (Commit) / プッシュ (Push)
- コミット: 変更内容を「セーブ」することです。自分のPCの中にあるリポジトリに、変更履歴を記録します。
- プッシュ: コミットした内容を、GitHubなど共有の「オンライン金庫」に「アップロード」することです。プッシュして初めて、チームメンバーに変更内容が共有されます。
プルリクエスト (Pull Request)
やさしい定義
プルリクエスト（PR）とは、自分の変更をメインのブランチに取り込んでもらうよう、チームに「レビューを依頼する」ための仕組みです。
たとえ話
「この変更内容で問題ないか確認お願いします！」と、チームに提案する「連絡票」のようなものです。
チーム開発では、このプルリクエストをベースに議論やレビューが行われます。
Webサービスを公開するために
最後に、作ったサービスを世界に公開するための用語です。
デプロイ (Deploy)
やさしい定義
デプロイとは、完成したアプリをインターネット上に公開して、誰もがアクセスできる状態にすることです。
たとえ話
デプロイは「設計図（コード）から、実物の家（Webサイト）を建てる」作業です。
GitHubにコードを置いただけでは、まだ設計図のまま。
デプロイという作業を経て、初めて世界中の人が訪問できる「家」が完成するのです。
「プッシュ」と「デプロイ」は全く違う、と覚えておきましょう。
ビルド (Build)
やさしい定義
ビルドとは、開発用に書いたコードを、ブラウザが読み込める最適な形式に変換・圧縮することです。
デプロイの前に、このビルドという準備作業が行われることが多いです。
たとえ話
製品を出荷する前の「最終仕上げと梱包」です。バラバラだった部品（コード）を一つにまとめ、軽量で使いやすい形に整えてから、お客さん（ブラウザ）に届けます。
環境変数 (Environment Variable)
やさしい定義
環境変数とは、パスワードやAPIキーといった「秘密の情報」を、コードの中に直接書かずに、外部から設定するための仕組みです。
たとえ話
「鍵のかかったロッカー」です。大
事なもの（秘密鍵など）をコードに直接書くと、GitHubなどで公開したときに世界中に見られてしまいます。
そこで、このロッカー（環境変数）に大事なものを入れておき、プログラムが必要なときにだけ鍵を開けて中身を見るようにするわけです。
API（エー・ピー・アイ）
やさしい定義
APIとは、異なるソフトウェア同士が情報をやりとりするための「窓口」です。
たとえば、天気予報アプリが、気象庁の提供するAPI（窓口）から天気データを取得する、といった形で使われます。
たとえ話
レストランの「ウェイター」です。
お客さん（自分のアプリ）が直接厨房（他社のデータベース）に入るのではなく、ウェイター（API）に注文を伝えれば、料理（データ）を運んできてくれます。
APIがあるおかげで、他のサービスの機能を安全かつ簡単に利用できるのです。
データベース (Database)
やさしい定義
データベースとは、大量のデータを整理して、いつでも取り出せるように保管しておくためのシステムです。ユーザー情報や商品リスト、ブログ記事などがここに保存されます。
たとえ話
巨大な「図書館の書庫」です。本（データ）がきちんと整理されているので、必要な情報をすぐに探し出すことができます。
Vercel / Netlify
これらは、Webサイトの「デプロイ」をめちゃくちゃ簡単にしてくれるサービスです。
GitHubと連携させるだけで、プッシュするたびに自動でビルドとデプロイを行ってくれます。ぼくもよく使っています。
まとめ
お疲れ様でした！たくさんの用語が出てきて、頭がパンクしそうになったかもしれませんね。
最後に、今日のポイントをまとめておきます。
- Webアプリは「クライアント（お客さん）」と「サーバー（お店）」のやりとりで動いている。
- 見た目を作る「フロントエンド」と、裏方の処理をする「バックエンド」がある。
- Webページの基本は「HTML（骨格）」「CSS（服装）」「JavaScript（筋肉）」の３点セット。
- チーム開発では「Git」で変更履歴を管理し、「GitHub」で共有するのが当たり前。
- コードの共有（プッシュ）と、サービスの公開（デプロイ）は別物。ここ、本当に重要です。
- APIやデータベースなどをうまく活用して、効率的に開発を進めていく。
最初はわからなくても大丈夫です。
実際に手を動かしながら、わからなければAIに聞いてみてください。丁寧に教えてくれるはずです！
これらの言葉の意味がわかると、AIとの対話（バイブコーディング）も格段にスムーズになりますし、他のエンジニアとのコミュニケーションも円滑になります。
何より、自分が作っているものの仕組みが理解できると、開発はもっともっと楽しくなりますよ。
あなたの挑戦を、心から応援しています！ 🚀
