こんにちは、アールグレイです。

最近、バイブコーディングに興味を持つ人が増えてきたんですけど、実際に始めてみると「用語がわからなくて、AIとうまく会話できない...」って悩む人が多いみたいです。

確かに、AIに「GitHubにプッシュしましたのでVercelでデプロイしていることを確認してください」とか言われても、そもそも何を言ってるのかわからないと、せっかくのバイブコーディングも進められませんよね（笑）。

そこで今回は、バイブコーディングをするときに知っておくと超便利な用語を、わかりやすくまとめてみました！

これ、私も最初は全然わからなかったんですけど、ひとつずつ覚えていくとAIとのやり取りがめちゃくちゃスムーズになったんです。

Webの土台：基本三兄弟

まずは基本中の基本から。

Webサイトを作るときに絶対に出てくる3つの言語があるんです。

HTML（エイチティーエムエル）
これ、ページの骨組みを作る言語なんです。

家で例えると「柱」や「壁の配置図」みたいなもの。

「ここにタイトル、ここに画像、ここにボタン」って配置を決めるのがHTMLの役割です。

CSS（シーエスエス）

ページの見た目を整える言語。お部屋の「壁紙」や「カーテン」みたいなものですね。

文字の色を変えたり、ボタンを丸くしたり、影をつけたりできるんです。

JavaScript（ジャバスクリプト）

ページに動きをつける言語。スイッチで動く「リモコン」みたいな感じ。

ボタンをクリックしたら何か起きる、とか、画像がふわっと表示される、みたいな動きはJavaScriptが担当してるんです。

UI開発の道具：見た目・操作性を作る

次は、もうちょっと高度な道具たち。これらを使うと、効率的にきれいなWebサイトが作れるんです。

React（リアクト）

UI（画面）を作る道具。ボタンやスライダーが入った「部品セット」みたいなもの。

Facebookが作った技術で、今めちゃくちゃ人気なんです。

部品を組み合わせてWebサイトを作れるから、レゴブロックみたいで楽しいんですよ。

Next.js（ネクストジェーエス）

Reactベースの開発フレームワーク。レゴで例えると「街シリーズ」のセットみたいな感じ。

基本的な部品だけじゃなくて、「こうやって組み立てるといいよ」っていうガイドもついてるんです。

Tailwind CSS（テイルウィンドシーエスエス）

CSSを速く書くためのスタイルツール。着せ替えパーツが揃ったコーデセットみたいなもの。

「赤いボタン」「大きな文字」みたいなパーツが最初から用意されてるから、組み合わせるだけでおしゃれなデザインができちゃうんです。

コンポーネント

再利用できる画面パーツのこと。レゴの「窓」や「ドア」のパーツみたいなもの。

一度作ったボタンを、いろんなページで使い回せるんです。効率的でしょ？

開発環境のツール：書く・操作する・支える

プログラミングをするときに使う道具たちです。

これらがあると、作業がめちゃくちゃ楽になるんです。

ターミナル

コンピュータと会話する黒画面。呪文で操作する「魔導書」みたいなもの。

最初は怖いけど、慣れると「npm install」とか打つのが楽しくなってきますよ（笑）。

CLI（シーエルアイ）

文字で操作する方法のこと。Alexaに文字で命令する感じですね。

「音楽をかけて」って声じゃなくて文字で伝える、みたいな。

.envファイル（ドットエンブファイル）

秘密の設定を保存するファイル。ロッカーの暗証番号メモみたいなもの。

APIキーとかパスワードとか、他の人に見られたくない情報を入れておくんです。

ローカル環境

自分のPCで試す環境。自宅のキッチンで料理練習する感じ。

失敗しても誰にも迷惑かからないから、思う存分実験できるんです。

本番環境

実際に動かす公開版。レストランの厨房みたいなもの。

ここでミスると、お客さん（ユーザー）に影響が出ちゃうから緊張しますね。

ビルド

コードを動かせる形に変える作業。材料を料理にする工程みたいな感じ。

人間が読めるコードを、コンピュータが理解できる形に変換するんです。

再利用と効率化の道具

効率的に開発するための仕組みたちです。

これらを使いこなせると、開発スピードが格段に上がるんです。

フレームワーク

アプリの作り方の枠組み。弁当箱の仕切りみたいなもの。

「ここにご飯、ここにおかず」って決まってると、詰めやすいですよね。

ライブラリ

よく使う機能のセット。調味料セットみたいな感じ。

「ログイン機能」とか「画像アップロード機能」とか、よく使う機能がまとまってるんです。

モジュール

小さな機能ブロック。引き出しユニットみたいなもの。

必要な機能だけ選んで組み合わせられるんです。

パッケージ

機能をまとめた配布物。カレーのルーセットみたいな感じ。

誰かが作った便利な機能を、簡単に自分のプロジェクトに追加できるんです。

npm / yarn（エヌピーエム / ヤーン）

パッケージを取り寄せる道具。Amazonで材料を注文する感じ。

「npm install react」って打つと、Reactがダウンロードされてくるんです。便利でしょ？

公開・共有：インターネットに出す・連携する

作ったものを世界に公開するための仕組みです。

Git（ギット）

作業履歴を残す仕組み。Googleドキュメントの履歴機能みたいなもの。

「昨日のバージョンに戻したい！」ってときに超便利なんです。

GitHub（ギットハブ）

作業をネットで共有・保管する場所。みんなの作品フォルダみたいな感じ。

世界中の開発者が自分のコードを公開してるから、勉強にもなるんですよ。

リポジトリ

プロジェクトのすべてが入った箱。旅行のスーツケースみたいなもの。

コード、画像、設定ファイル、全部まとめて管理できるんです。

Vercel（バーセル）

作ったアプリをネットに公開する場所。SNSに料理をアップする感じ。

GitHubと連携すると、コードを更新するだけで自動的に公開版も更新されるんです。魔法みたい！

Render（レンダー）

バックエンドも動かせる公開サービス。展示用の棚＋電源付きみたいな感じ。

データベースとかも一緒に動かせるから、本格的なアプリも公開できるんです。

デプロイ

アプリをネットに「引っ越す」作業。料理をお客様に出す瞬間みたいなもの。

ドキドキする瞬間ですね（笑）。

バージョン管理（Git操作）

チームで開発するときに必須の操作たちです。最初は難しいけど、慣れると便利すぎて手放せなくなるんです。

push（プッシュ）

自分の変更をGitHubに送る操作。原稿を出版社に提出する感じ。

「今日の分、できました！」って送るイメージです。

pull（プル）

他人の変更を取り込む操作。新しいレシピをノートにコピーする感じ。

チームメンバーが追加した機能を、自分のPCにも反映させるんです。

branch（ブランチ）

別の作業ライン。もしものストーリーを書くページみたいなもの。

「もしこの機能を追加したら...」って実験できるんです。

main（メイン）

完成品が集まる場所。本編・本屋に並ぶ完成版みたいなもの。

ここには、ちゃんと動くコードだけを入れるんです。

commit（コミット）

変更を保存する区切り。ノートを「1日分」で閉じる感じ。

「ここまでやった！」って記録を残すんです。

merge（マージ）

他の作業と合体させる操作。別エンディングを本編に統合する感じ。

実験が成功したら、本編に取り込むんです。

fetch（フェッチ）

更新の有無だけ確認する操作。本屋に新刊が出たか見に行く感じ。

「何か更新あった？」って確認だけする操作です。

データ・コンテンツのやり取りと管理

データをやり取りするための仕組みです。現代のWebアプリには欠かせない要素なんです。

Sanity（サニティ）

CMS（コンテンツ管理）の一種。電子POPを貼り替える店長ツールみたいなもの。

ブログの記事とか画像とか、コンテンツを管理できるんです。

CMS（シーエムエス）　

記事や画像を管理する仕組み。店内掲示物をPCで変更する感じ。

WordPressも有名なCMSの一つですね。

API（エーピーアイ）

外部とやり取りする仕組み。自販機のボタンみたいなもの。

「コーラください」ってボタンを押すと、コーラが出てくる。そんな感じです。

JSON（ジェイソン）

やりとりに使うデータ形式。宅配便の伝票みたいなもの。

データを整理して送るための共通フォーマットなんです。

エンドポイント

APIの入り口（住所）。荷物の送り先みたいなもの。

「ここにデータを送ってね」っていう住所です。

状態管理・セキュリティ系

アプリの状態を管理したり、安全性を保つための仕組みです。

状態管理（State）

アプリが「今なにしてるか」を記録する仕組み。メモ帳で今の様子を記録する感じ。

「今ログイン中」とか「カートに3個入ってる」とか、アプリの状態を管理するんです。

トークン（JWT）

認証のカギ。入場チケットや会員証みたいなもの。

「この人は本人です」って証明するための仕組みです。

通知・自動連携

自動化のための仕組みです。これを使うと、作業がめちゃくちゃ楽になるんです。

Webhook（ウェブフック）

他サービスから自動で通知を受ける仕組み。ピザ屋に「焼けたら電話して」とお願いする感じ。

何かイベントが起きたら、自動的に別のサービスに通知が行くんです。

まとめ：一歩ずつ覚えていけば大丈夫！

いかがでしたか？結構たくさんありましたよね（笑）。

でも、全部一気に覚える必要はないんです。バイブコーディングしながら、必要になったときに「あ、これか！」って覚えていけばOK。

私も最初は「npm？なにそれ美味しいの？」状態だったんですけど、今では普通に使えるようになりました。

AIと一緒に開発するときは、これらの用語を知ってると「Reactでコンポーネント作って、Vercelにデプロイして」みたいな指示も理解できるようになるんです。

そうすると、AIとのコミュニケーションがスムーズになって、もっと楽しく開発できるようになりますよ！

皆さんも、楽しみながら少しずつ覚えていってくださいね。

わからないことがあったら、AIに「〇〇って何？」って聞けばいいんです。

それがバイブコーディングの醍醐味ですから！