Vibe Coding用語集

ヘッダー

Header

別の呼び方: 上部バー、トップバー

ページ上部でロゴ、主要導線、現在地をまとめる構造領域です。

AI指示「ヘッダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

フッター

Footer

別の呼び方: 下部バー、ページ下部

ページ末尾で補助リンク、運営情報、問い合わせ先をまとめる領域です。

AI指示「フッター」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

セクション

Section

別の呼び方: ブロック、かたまり

一つの話題や目的を持つ内容を、見出しと余白で区切ったまとまりです。

AI指示「セクション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ヒーローセクション

Hero Section

別の呼び方: メインビジュアル、トップ画像エリア

最初の画面で価値、対象者、次の行動を短く伝える主要領域です。

AI指示「ヒーローセクション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

コンテナ

Container

別の呼び方: ラッパー、幅を揃える箱

読みやすい最大幅と左右余白を保つ、レイアウトの基準となる箱です。

AI指示「コンテナ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

CTA

Call to Action

別の呼び方: 行動喚起の呼びかけ、申込みへの誘導

申し込みや開始など、利用者に次の行動を具体的に促す要素です。

AI指示「CTA」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

サイドバー

Sidebar

別の呼び方: サイドメニュー、横のメニュー

本文の横で目次、絞り込み、関連情報を補助する縦長の領域です。

AI指示「サイドバー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ナビゲーションバー

Navigation Bar

別の呼び方: メニューバー、上部メニュー

主要ページへのリンクを一定の位置と順序で並べる移動用の領域です。

AI指示「ナビゲーションバー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ハンバーガーメニュー

Hamburger Menu

別の呼び方: 三本線メニュー、ハンバーガー

限られた画面幅で、三本線のボタンから主要メニューを開く方式です。

AI指示「ハンバーガーメニュー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

パンくずリスト

Breadcrumb

別の呼び方: パンくず、現在地表示

ホームから現在地までの階層を示し、上位へ戻れるようにする導線です。

AI指示「パンくずリスト」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ページネーション

Pagination

別の呼び方: ページ送り、ページ番号

長い一覧を複数ページへ分け、前後や番号で移動できるようにします。

AI指示「ページネーション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

タブ

Tabs

別の呼び方: タブ切り替え

同じ領域の中で、関連する複数の内容をラベルで切り替える仕組みです。

AI指示「タブ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

アンカーリンク

Anchor Link

別の呼び方: ページ内リンク、ジャンプリンク

同一ページ内の見出しやセクションへ直接移動するためのリンクです。

AI指示「アンカーリンク」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ボタン

Button

保存や送信などの操作を実行し、その結果を利用者へ返すUI部品です。

AI指示「ボタン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

カード

Card

別の呼び方: カード型、カードUI

画像、見出し、説明、操作を一つの情報単位としてまとめるUI部品です。

AI指示「カード」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ディバイダー

Divider / Separator

別の呼び方: 区切り線、仕切り線

異なる内容の境界を、細い線や余白によって控えめに示します。

AI指示「ディバイダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

モーダル

Modal / Dialog

別の呼び方: ポップアップ、ダイアログ

現在の画面を保ったまま、確認や短い入力へ注意を集中させる領域です。

AI指示「モーダル」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ドロップダウン

Dropdown

別の呼び方: ドロップダウンメニュー、メニューの展開

操作を起点に候補や追加メニューを一時的に展開するUI部品です。

AI指示「ドロップダウン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

アコーディオン

Accordion

別の呼び方: 開閉メニュー、折りたたみ

見出しを操作して詳細内容を開閉し、長い情報を整理する部品です。

AI指示「アコーディオン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

トースト通知

Toast / Snackbar

別の呼び方: 通知メッセージ、スナックバー

保存完了などの一時的な結果を、作業を妨げず画面上へ伝えます。

AI指示「トースト通知」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

バッジ

Badge

別の呼び方: 丸いマーク、件数表示

状態、件数、新着などの短い補助情報を小さな形で示す部品です。

AI指示「バッジ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

アバター

Avatar

別の呼び方: プロフィール画像、プロフィールアイコン

人物や組織を写真、イニシャル、図柄で識別する小さな表示です。

AI指示「アバター」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

タグ

Tag / Chip

別の呼び方: チップ、分類タグ

分類や属性を短いラベルとして表示し、絞り込みにも利用する部品です。

AI指示「タグ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

スピナー

Spinner / Loading

別の呼び方: ぐるぐる、読み込み中マーク

短い待ち時間に処理中であることを示し、重複操作を防ぐ表示です。

AI指示「スピナー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ツールチップ

Tooltip

別の呼び方: ふきだし、補足説明

アイコンや短いラベルの意味を、操作時に補足する小さな説明です。

AI指示「ツールチップ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

プログレスバー

Progress Bar

別の呼び方: 進捗バー、ローディングバー

完了までの進み具合や処理状況を横方向の量として示します。

AI指示「プログレスバー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

カルーセル

Carousel / Slider

別の呼び方: スライドショー、画像スライダー

複数の画像やカードを同じ領域で前後に切り替える表示方式です。

AI指示「カルーセル」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

スケルトン

Skeleton Screen

別の呼び方: 読み込み中の枠、仮の枠表示

読み込み前に完成後の配置を薄い形で示し、待ち時間を予測可能にします。

AI指示「スケルトン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

テキスト入力欄

Input / Text Field

別の呼び方: 入力欄、テキストボックス

名前や検索語など、一行の文字列を受け取るための入力部品です。

AI指示「テキスト入力欄」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

テキストエリア

Textarea

別の呼び方: 複数行入力欄、コメント欄

問い合わせ本文など、複数行の文章を入力するための領域です。

AI指示「テキストエリア」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ラベル

Label

別の呼び方: 項目名

入力欄が何を求めているかを、常に読める文字で示す説明です。

AI指示「ラベル」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

プレースホルダー

Placeholder

別の呼び方: 入力例、薄い文字のヒント

入力前に例を示す補助文であり、ラベルの代用にはしません。

AI指示「プレースホルダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

チェックボックス

Checkbox

別の呼び方: チェック項目

独立した複数の選択肢を、それぞれ選択または解除する部品です。

AI指示「チェックボックス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ラジオボタン

Radio Button

別の呼び方: 丸ボタン選択

互いに排他的な候補の中から、一つだけ選択するための部品です。

AI指示「ラジオボタン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

セレクトボックス

Select

別の呼び方: セレクトメニュー、選択ボックス

多くの候補を折りたたみ、一つの値を選択させるフォーム部品です。

AI指示「セレクトボックス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

トグルスイッチ

Toggle Switch

別の呼び方: オンオフボタン、スイッチ切替

設定をその場でオンまたはオフへ切り替える二値の操作部品です。

AI指示「トグルスイッチ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

バリデーション

Validation

別の呼び方: 入力チェック、エラーチェック

入力内容の不足や形式を確認し、修正方法と一緒に伝える仕組みです。

AI指示「バリデーション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ホバー

Hover

別の呼び方: マウスオーバー、カーソルを乗せる

ポインターが要素上にある状態へ、控えめな視覚フィードバックを返します。

AI指示「ホバー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

クリック／タップ

Click / Tap

別の呼び方: クリック、タップ

マウスや指で対象を選び、定義された操作を実行する基本入力です。

AI指示「クリック／タップ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

スクロール

Scroll

別の呼び方: スクロールバー、無限スクロール

表示領域を移動し、画面外に続く内容へアクセスする基本操作です。

AI指示「スクロール」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

トランジション

Transition

別の呼び方: 切り替えの動き

色や位置など二つの状態の変化を、短時間で連続的に見せます。

AI指示「トランジション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

アニメーション

Animation

別の呼び方: 動き、モーション

状態変化や因果関係を理解しやすくするために要素を時間的に動かします。

AI指示「アニメーション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

フォーカス

Focus

別の呼び方: フォーカス枠、操作中の位置を示す枠

キーボード操作の対象がどこにあるかを明確な輪郭で示す状態です。

AI指示「フォーカス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ドラッグ＆ドロップ

Drag and Drop

別の呼び方: ドラッグドロップ、つかんで移動

対象をつかんで移動し、別の位置や領域へ配置する直接操作です。

AI指示「ドラッグ＆ドロップ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

スワイプ

Swipe

別の呼び方: 指でなぞる操作

タッチ画面で指を滑らせ、移動や切り替えを指示するジェスチャーです。

AI指示「スワイプ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

フレックスボックス

Flexbox

別の呼び方: フレックス、並び・間隔・伸縮を柔軟に指定する仕組み

一方向に並ぶ要素の整列、間隔、伸縮を柔軟に制御するCSS方式です。

AI指示「フレックスボックス」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

マージン

Margin

別の呼び方: 外側の余白

要素の境界より外側に取り、周囲との距離を作る余白です。

AI指示「マージン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

パディング

Padding

別の呼び方: 内側の余白

要素の境界と内容の間に取り、読みやすさを作る内側の余白です。

AI指示「パディング」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ギャップ

Gap

別の呼び方: 要素の間隔

FlexboxやGridの子要素同士へ一貫した間隔を設定する値です。

AI指示「ギャップ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

グリッド

CSS Grid

別の呼び方: グリッドレイアウト、格子状レイアウト

行と列の二方向を使い、複数要素を規則的に配置するCSS方式です。

AI指示「グリッド」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

レスポンシブ

Responsive Design

別の呼び方: レスポンシブ対応、スマホ対応

端末や画面幅に応じて内容の幅、順序、密度を調整する設計です。

AI指示「レスポンシブ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ブレークポイント

Breakpoint

別の呼び方: 画面幅の境目

内容に応じてレイアウトを切り替える画面幅の境界条件です。

AI指示「ブレークポイント」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

重なり順

z-index

別の呼び方: z-indexの値、重なりのレイヤー順

同じ重なり文脈にある要素の前後関係を指定するCSSの値です。

AI指示「重なり順」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

フォント

Font Family

別の呼び方: 書体、フォントの種類

内容の声と読みやすさに合う書体の種類と代替候補を指定します。

AI指示「フォント」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

フォントサイズ

Font Size

別の呼び方: 文字サイズ

情報の役割と優先順位に合わせて文字の大きさを設定します。

AI指示「フォントサイズ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

太さ

Font Weight

別の呼び方: 文字の太さ調整、ボールドや細字の指定

文字の線の太さを変え、見出しや重要語の差を作ります。

AI指示「太さ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

テキスト揃え

Text Align

別の呼び方: 文字揃え

文章やラベルを左、中央、右などの基準線へ揃える指定です。

AI指示「テキスト揃え」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

見出し

Heading

別の呼び方: タイトル、見出しタグ

内容の階層をh1からh6で示し、読む順序とページ構造を作ります。

AI指示「見出し」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

行間

Line Height

別の呼び方: 行の高さ

複数行の文章が追いやすくなるよう、行の基準線間の距離を設定します。

AI指示「行間」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

文字間

Letter Spacing

別の呼び方: 字間

文字サイズや用途に合わせ、文字同士の間隔を微調整します。

AI指示「文字間」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

テキスト省略

Text Truncation

別の呼び方: 文字の省略、三点リーダー表示

限られた領域で長い文字列を省略し、全文への導線を別に用意します。

AI指示「テキスト省略」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

背景色

Background Color

別の呼び方: 背景の色

内容のまとまりや状態を区別するため、面の基調色を指定します。

AI指示「背景色」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ボーダー

Border

別の呼び方: 枠線、境界線

要素の境界や選択状態を、太さと色を抑えた線で示します。

AI指示「ボーダー」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

角丸

Border Radius

別の呼び方: 角の丸み、角丸デザイン

要素の角の丸みを指定し、部品の性格やまとまりを表現します。

AI指示「角丸」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

グラデーション

Gradient

別の呼び方: グラデーション色、色の変化

複数の色を連続的に変化させる背景や塗りの表現です。

AI指示「グラデーション」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

シャドウ

Box Shadow

別の呼び方: 影、ドロップシャドウ

浮いている機能層を示す場合に限り、奥行きを補助する装飾です。

AI指示「シャドウ」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

透明度

Opacity

別の呼び方: アルファ値、透け具合

要素全体の見え方を0から1の範囲で調整する値です。

AI指示「透明度」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

背景ぼかし

Backdrop Blur

別の呼び方: すりガラス効果、背景ぼかし効果

半透明の面の背後だけをぼかし、機能層を分離する効果です。

AI指示「背景ぼかし」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

画像

Image

別の呼び方: 画像ファイル、絵や写真などの画像

内容を補足する静止画で、寸法、代替文、読み込み方法まで設計します。

AI指示「画像」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

アイコン

Icon

別の呼び方: 小さい図、ピクトグラム

操作や概念を小さな図形で示し、必要に応じて文字ラベルを添えます。

AI指示「アイコン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

動画

Video

別の呼び方: 動画ファイル、ムービー

時間変化を含む情報で、字幕、再生操作、音の扱いまで考慮します。

AI指示「動画」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

ファビコン

Favicon

別の呼び方: タブのアイコン、サイトアイコン

ブラウザのタブやブックマークでサイトを識別する小さな画像です。

AI指示「ファビコン」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

OGP画像

Open Graph Image

別の呼び方: シェア画像、リンクのサムネイル

SNSやメッセージでURLを共有した際に表示される代表画像です。

AI指示「OGP画像」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

画像の表示方法

Object Fit

別の呼び方: 画像の切り抜き方、画像フィット

画像や動画を指定枠へ収める際の切り抜き方と比率を制御します。

AI指示「画像の表示方法」を使い、目的、配置、状態、スマホ時の振る舞いまで明示してください。

IDE（統合開発環境）

IDE (Integrated Development Environment)

別の呼び方: 統合開発環境、integrated development environment

コードを書く・探す・動かす・直す作業を一つの画面にまとめた開発用アプリです。代表例がVS Codeです。

出会う場面「VS Codeで開いてください」と言われたとき

台所でいうとシステムキッチン

• 図で見る: VS Codeの画面の地図

講座で詳しく: 知っておきたい7つの言葉（前半：LLM〜IDE）

AIに聞くならIDEって何ですか。普通の文字編集アプリと何が違うのか教えてください。

コードエディタ

Code Editor

コードを書くことに特化した文字編集アプリです。IDE（複数の作業を一つの画面にまとめた開発アプリ）より機能は少なく、動作が軽い傾向があります。

出会う場面『まずはコードエディタから始めましょう』と手順書に出てきたとき

台所でいうと調理台

AIに聞くならコードエディタとIDEとメモ帳の違いを、初心者向けに教えてください。

VS Code（Visual Studio Code）

Visual Studio Code

別の呼び方: VSCode、ブイエスコード、ビジュアルスタジオコード

Microsoftが無料で配布している軽量コードエディタです。拡張機能を足すことでIDEに近い機能を持たせられます。

出会う場面講座の手順書で「VS Codeを開いて」と出てきたとき

台所でいうと定番メーカーのシステムキッチン

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: VS Codeの画面の地図

講座で詳しく: 知っておきたい7つの言葉（前半：LLM〜IDE）

AIに聞くならVS Codeとはどんなアプリですか。無料で使える範囲を教えてください。

Cursor

Cursor

VS Codeを土台にして、AIとの対話や自動編集をあらかじめ組み込んだコードエディタです。

出会う場面道具選びで「CursorかVS Codeか」を比べているとき

台所でいうと料理人常駐のシステムキッチン

講座で詳しく: 知っておきたい7つの言葉（前半：LLM〜IDE）

AIに聞くならCursorとVS Codeは何が違いますか。初心者はどちらから始めるべきか教えてください。

エクスプローラー（ファイルツリー）

File Explorer

別の呼び方: ファイルツリー

エディタの左側に表示される、フォルダとファイルの一覧です。クリックすると開くファイルを切り替えられます。

出会う場面「左のsrcフォルダを開いてください」と言われたとき

台所でいうと棚をひと目で見渡せる小窓

• 図で見る: VS Codeの画面の地図

AIに聞くならエディタの左側にあるファイル一覧の見方と、ファイルの開き方を教えてください。

統合ターミナル

Integrated Terminal

別の呼び方: ターミナルパネル

文字だけでコマンドを打ち込んで操作する画面（ターミナル）を、エディタの中に組み込んだものです。画面下に開き、別アプリを起動せずコマンドを打てます。

出会う場面「エディタ内のターミナルで実行してください」と言われたとき

台所でいうと台所の中にある注文口

• 図で見る: VS Codeの画面の地図

AIに聞くならエディタに内蔵されたターミナルと、普通のターミナルアプリの違いを教えてください。

未保存マーク

Unsaved Changes Indicator

別の呼び方: ●マーク、ドットマーク

編集中のタブに付く小さな印です。保存するまで、変更内容はファイルにまだ書き込まれていません。

出会う場面直したはずのコードが画面に反映されないとき

台所でいうとまだ容器に移していない下ごしらえ

注意保存せずにタブやアプリを閉じると、その変更は失われます。マークが付いている間はこまめに保存したほうがよいです。

• 図で見る: VS Codeの画面の地図

AIに聞くならファイルを保存したかどうかを画面で見分ける方法を教えてください。

拡張機能（Extension）

Extension

エディタに後から追加できる機能です。プログラミング言語への対応やAI連携、見た目の変更などがあります。

出会う場面「Claude Code拡張機能を入れてください」と言われたとき

台所でいうと後付けの調理器具

注意提供元が不明な拡張機能はコードや秘密情報を読み取れる場合があるため、入れる前に配布元を確認したほうがよいです。

• 図で見る: VS Codeの画面の地図

AIに聞くならこのエディタに拡張機能を追加する手順と、入れる前に確認すべき点を教えてください。

タブ（エディタのタブ）

Editor Tab

別の呼び方: ファイルタブ

開いているファイルを切り替えるための見出しです。ブラウザのタブと同じ仕組みです。

出会う場面画面上部に開いたファイル名が並んでいるのに気づいたとき

注意未保存の変更があるタブを閉じようとすると保存確認が出ることが多いですが、確認をスキップして閉じると変更内容は失われます。

• 図で見る: VS Codeの画面の地図

AIに聞くなら開いているファイルのタブを閉じる方法と、閉じても大丈夫かどうかを教えてください。

配色テーマ（ライト/ダークモード）

Editor Theme

エディタやターミナルの背景色・文字色の組み合わせです。暗い画面が見づらければ、明るい配色に変更できます。

出会う場面ターミナルやエディタの画面が暗すぎて見づらいと感じたとき

AIに聞くならエディタの配色を白背景のライトテーマに変える手順を教えてください。

Finder

Finder (macOS)

別の呼び方: ファインダー

Macに標準で入っている、フォルダやファイルを操作するためのアプリです。Windowsのエクスプローラーにあたります。

出会う場面「Finderでフォルダを作ってください」と手順書に書かれているとき

AIに聞くなら作ったフォルダがFinderのどこにあるか、パスをそのまま教えて。

テキストエディタ

Plain Text Editor

別の呼び方: メモ帳、テキストエディット、TextEdit、Notepad

文字を書くだけのシンプルなアプリです。Windowsのメモ帳、Macのテキストエディットが該当します。

出会う場面AIが書いたコードを「テキストエディタに貼って保存して」と言われたとき

講座で詳しく: ChatGPTで最初の1本

AIに聞くならこのコードをテキストエディタに貼って保存するとき、拡張子は何にすればいいか教えて。

デスクトップアプリ

Desktop App

PCにインストールして使うアプリのことです。ブラウザ版と違い、PC内のファイルを直接扱えます。

出会う場面「その機能はデスクトップアプリだけ」とAIツールの案内で見たとき

AIに聞くならこのツールのブラウザ版とデスクトップアプリ版で、できることの違いを教えて。

コマンドパレット

Command Palette

Cmd+Shift+PまたはCtrl+Shift+Pで開く、エディタの機能を名前で呼び出せる検索窓です。

出会う場面設定の変更手順で「コマンドパレットを開いて」と出てきたとき

• 図で見る: VS Codeの画面の地図

AIに聞くならコマンドパレットの開き方と、よく使う操作の呼び出し方を教えてください。

ワークスペース

Workspace

エディタで開いているフォルダ、つまり作業対象の範囲全体を指す言葉です。プロジェクト全体を意味します。

出会う場面「フォルダを開いてください」と手順書に書かれているとき

• 図で見る: VS Codeの画面の地図

AIに聞くならワークスペースとフォルダは同じ意味ですか。違いがあれば教えてください。

Markdownプレビュー

Markdown Preview

別の呼び方: MDプレビュー

.mdファイルを、見出しや箇条書きの記号を反映した整形後の見た目で表示する機能です。

出会う場面CLAUDE.mdやREADMEを読みやすい形で確認したいとき

AIに聞くなら.mdファイルをプレビュー表示に切り替える方法を教えてください。

検索と置換

Find and Replace

別の呼び方: Find & Replace、置換

エディタ内の文字列を探したり、まとめて別の文字列に置き換えたりする機能です。長い文書で重宝します。

出会う場面『Cmd+F（WindowsはCtrl+F）で探してください』と言われたとき

注意ファイル全体を一括置換すると、意図しない箇所まで書き換わることがあるため、実行前に対象範囲を確認したほうがよいです。

AIに聞くならこのファイルの中で特定の単語を全部置き換える方法を教えてください。

自動フォーマット

Auto Format

別の呼び方: フォーマッタ

保存した瞬間にコードのインデントや空白を自動で整える機能です。見た目の乱れが直り、読みやすくなります。

出会う場面保存した瞬間にコードの見た目が勝手に整うとき

AIに聞くなら保存時に自動フォーマットが効いていて意図と違う形に変わった理由を教えてください。

分割表示（スプリットビュー）

Split View

別の呼び方: スプリットエディタ、画面分割

一つの画面を左右や上下に分けて、複数のファイルを同時に見比べながら編集する表示方法です。

出会う場面2つのファイルを並べて見比べながら直したいとき

AIに聞くならエディタを左右に分割して2つのファイルを同時に開く方法を教えてください。

シンタックスハイライト

Syntax Highlighting

別の呼び方: 色分け表示

コードの種類ごとに文字の色を変えて表示する機能です。読み違いや書き間違いに気づきやすくなります。

出会う場面エディタの文字が黒一色でなく色分けされているのに気づいたとき

• 図で見る: VS Codeの画面の地図

AIに聞くならこのコードの色分けが何を意味しているのか、種類ごとに教えてください。

ターミナル

Terminal

別の呼び方: Terminal.app、黒い画面

文字を打ち込んでパソコンに指示を出す、チャット画面のような入力専用のアプリです。

出会う場面「ターミナルで実行してください」と言われたとき

台所でいうと注文口

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: ターミナルの1行を読む

講座で詳しく: ターミナルって怖くない

AIに聞くならターミナルとは何か、何のためのアプリなのかを、初心者向けにたとえ話つきで教えてください。

シェル

Shell

ターミナルに打った文字を受け取り、実際に実行してくれる裏方のプログラムです。zshやbashなどの種類があります。

出会う場面PATHの設定を変えた後、AIに「新しいターミナルを開き直してください」と言われたとき

台所でいうと注文口と台所をつなぐ伝声管

• 図で見る: ターミナルの1行を読む

講座で詳しく: ターミナルって怖くない

AIに聞くならシェルとは何か、ターミナルとの違いを、初心者にも分かるように教えてください。

Bash

Bash

別の呼び方: バッシュ

昔から使われている代表的なシェルの一つです。解説記事やLinuxのサーバーでよく使われています。

出会う場面解説記事や手順書で「bashで実行してください」と書かれているとき

台所でいうと昔からある古株の伝声管

• 図で見る: コーディングエージェントの動き方

講座で詳しく: ターミナルって怖くない

AIに聞くならこの画面のBashという表示は何をしている途中か教えてください。

zsh

Zsh

別の呼び方: Z Shell、ズィーシェル

今のMacに標準で入っているシェルです。Bashとほぼ同じ感覚で使え、補完機能が強めです。

出会う場面ターミナルを開いたときの表示に「zsh」と出ているとき

台所でいうと今のMacの台所に備え付けの伝声管

• 図で見る: ターミナルの1行を読む

講座で詳しく: ターミナルって怖くない

AIに聞くならzshとBashは何が違うのか、初心者にも分かるように教えてください。

PowerShell

PowerShell

別の呼び方: パワーシェル

Windowsに標準で入っているシェルです。Macのターミナルとはコマンドの書き方が一部違います。

出会う場面Mac向けの手順書のコマンドがWindowsで通らないとき

講座で詳しく: ターミナルって怖くない

AIに聞くならこのコマンドのWindows（PowerShell）向けの書き方を教えてください。

コマンド

Command

別の呼び方: 命令

ターミナルに打ち込んで実行する、一行ずつの指示のことです。多くは英単語と記号の組み合わせでできています。

出会う場面手順書に「次のコマンドを実行してください」と書いてあるとき

台所でいうと注文票の1行

注意意味が分からないコマンドを、確認せずに実行しないでください。

• 図で見る: ターミナルの1行を読む

AIに聞くならこのコマンドが何をするものか、実行する前に日本語でわかりやすく説明してください。

CLI（コマンドラインインターフェース）

CLI (Command Line Interface)

別の呼び方: command line interface

文字の命令で操作する方式や道具のことです。Claude CodeもCLIの一つです。

出会う場面「CLIをインストールしてください」と言われたとき

講座で詳しく: 5つの神連携（コネクター/MCP/API/CLI/ブラウザ）

AIに聞くならCLIとGUIの違いを、具体例つきで初心者にも分かるように教えてください。

GUI

GUI (Graphical User Interface)

別の呼び方: グラフィカルユーザーインターフェース

画面上のボタンやアイコンをクリックして操作する方式のことです。CLIの反対にあたります。

出会う場面CLIとGUIのどちらを使うか、道具を比較しているとき

AIに聞くならこの作業はCLIとGUIのどちらでやるのが向いているか、理由つきで教えてください。

プロンプト（ターミナルの）

Shell Prompt

別の呼び方: $マーク、%マーク

ターミナルで入力を待っている記号のことです。`%`や`$`で表示され、AIへの「プロンプト」とは別物です。

出会う場面手順書の`$ npm install`という表記をそのまま打ってエラーになったとき

台所でいうと「ご注文どうぞ」の札

注意行頭の`$`や`%`は入力の目印なので、そのまま打ち込むとエラーになります。

• 図で見る: ターミナルの1行を読む

AIに聞くなら手順書に書いてある$やこの記号は、実際に打ち込む部分に含めるべきか教えてください。

カレントディレクトリ

Current Directory

別の呼び方: 作業ディレクトリ、カレントフォルダ

いま自分がいるフォルダのことです。ターミナルのコマンドは、ここを基準に動きます。

出会う場面「プロジェクトのフォルダに移動してから実行してください」と言われたとき

台所でいうといま立っている棚の前

• 図で見る: ターミナルの1行を読む

講座で詳しく: ターミナルって怖くない

AIに聞くなら今のカレントディレクトリがどこか、確認する方法を教えてください。

pwd

pwd

別の呼び方: print working directory

いま自分がパソコンのどのフォルダにいるかを表示してくれる、迷子解消のコマンドです。

出会う場面今どこのフォルダで作業しているか分からなくなったとき

台所でいうと「いま、どの棚の前？」

講座で詳しく: ターミナルって怖くない

AIに聞くなら今いる場所が分からないので、pwdを実行して今の場所を教えてください。

ls

ls

別の呼び方: list

今いるフォルダの中にあるファイルやフォルダの名前を、一覧にして表示してくれるコマンドです。

出会う場面目当てのファイルがそのフォルダにあるか確かめたいとき

台所でいうと目の前の棚をのぞく

• 図で見る: ターミナルの1行を読む

講座で詳しく: ターミナルって怖くない

AIに聞くならこのフォルダに何が入っているか確認したいので、lsを実行して見せてください。

cd

cd

別の呼び方: change directory

指定したフォルダへ移動するコマンドです。`cd ..`と打つと、一つ上のフォルダへ戻れます。

出会う場面作業したいプロジェクトのフォルダへ移動するとき

台所でいうと別の棚の前へ移る

講座で詳しく: ターミナルって怖くない

AIに聞くならこのプロジェクトのフォルダへcdで移動する手順を教えてください。

rm

rm

別の呼び方: remove

ファイルやフォルダを削除するコマンドです。ゴミ箱を通らずに消えるため、元に戻せません。

出会う場面AIが「このファイルを削除してよいですか」と承認を求めてきたとき

台所でいうとゴミ箱を通さない即時回収

注意rmで消したファイルはゴミ箱を経由しないため、元に戻せません。対象をよく確認してください。

AIに聞くならこのrmコマンドで何が消えるのか、実行前に具体的に説明してください。

Tab補完

Tab Completion

別の呼び方: タブ補完

途中まで打ってTabキーを押すと、ファイル名などの残りを自動で埋めてくれる機能です。

出会う場面長いフォルダ名やファイル名を打つのが面倒なとき

• 図で見る: ターミナルの1行を読む

AIに聞くならこのフォルダ名を毎回打つのが大変なので、Tab補完の使い方を教えてください。

コマンド履歴

Command History

別の呼び方: 履歴呼び出し

上矢印キーを押すと、直前に打ったコマンドをもう一度呼び出して、打ち直す手間を省ける機能です。

出会う場面さっきと同じコマンドをもう一度実行したいとき

• 図で見る: ターミナルの1行を読む

AIに聞くなら同じコマンドをもう一度打ちたいのですが、コマンド履歴の呼び出し方を教えてください。

Ctrl+C

Ctrl+C

別の呼び方: コントロールシー

実行中のコマンドを途中で止めるキーの組み合わせです。開発サーバーを止めるときによく使います。

出会う場面開発サーバーが動きっぱなしで、ターミナルに次のコマンドを打てないとき

台所でいうと「そこまで、ストップ」の合図

• 図で見る: ターミナルの1行を読む

AIに聞くなら動いているこのプロセスをCtrl+Cで止めても問題ないか教えてください。

command not found

command not found

別の呼び方: コマンドノットファウンド、見つかりません

打ったコマンドが見つからないというエラーです。インストールされていないか、置き場所の設定が違うことが多いです。

出会う場面インストール直後にコマンドを打ったら「command not found」と出たとき

台所でいうと「その料理はメニューにありません」

AIに聞くなら「command not found」というエラーが出ました。原因と対処法を教えてください。

clear

clear

別の呼び方: 画面クリア

ターミナルの画面に溜まった表示を消して、まっさらにするコマンドです。実行したコマンドの記録自体は消えません。

出会う場面ターミナルの画面が文字でいっぱいになって見づらいとき

AIに聞くなら画面が見づらいので、clearで一度きれいにしてから続きを進めてください。

echo

echo

ターミナルに指定した文字をそのまま画面に表示するだけの、最初に覚える最も基本的なコマンドです。

出会う場面ターミナル入門で最初に打つコマンドとして紹介されたとき

講座で詳しく: ターミナルって怖くない

AIに聞くならechoで自分の好きな文字を画面に表示するには、ターミナルにどう打てばいいか教えて。

mkdir

mkdir

別の呼び方: make directory

新しいフォルダをその場で作るコマンドです。作業用のフォルダを用意するときによく使います。

出会う場面新しく作業用のフォルダをターミナルで作りたいとき

講座で詳しく: ターミナルって怖くない

AIに聞くなら作業用の新しいフォルダを、mkdirコマンドで作る手順を教えてください。

mv

mv

別の呼び方: move

ファイルやフォルダを、別の場所への移動や名前の変更に使うコマンドです。元の場所からは無くなります。

出会う場面AIが「このファイルを移動してよいですか」と承認を求めてきたとき

注意移動先に同名のファイルがあると、確認なしに上書きされることがあります。

AIに聞くならこのmvコマンドで、ファイルがどこからどこへ移動するのか説明してください。

cp

cp

別の呼び方: copy

ファイルやフォルダを複製するコマンドです。複製してもコピー元はそのまま残ります。

出会う場面AIが「このファイルをコピーしてよいですか」と承認を求めてきたとき

注意コピー先に同名のファイルがあると、確認なしに上書きされることがあります。

AIに聞くならこのcpコマンドで、何がどこに複製されるのか説明してください。

open

open (command)

Macで、ファイルやフォルダを普段使うアプリで開くコマンドです。`open .`で今のフォルダをFinderに開けます。

出会う場面作ったHTMLファイルをブラウザで確認したいとき

AIに聞くならこのファイルをopenコマンドでブラウザから開く方法を教えてください。

引数

Argument

別の呼び方: パラメータ

コマンドの後ろに付け加える対象のことです。`cd Desktop`の「Desktop」がこれにあたります。

出会う場面手順書のコマンドに書かれた単語の意味が分からないとき

台所でいうと注文の中身（何を）

• 図で見る: ターミナルの1行を読む

AIに聞くならこのコマンドの引数（後ろに続く部分）が何を指しているのか、具体的に教えてください。

オプション（フラグ）

Option / Flag

コマンドの動きを変える、`-`が付いた指定のことです。`ls -a`の「-a」がこれにあたります。

出会う場面手順書のコマンドに`-`付きの記号が並んでいるとき

台所でいうと「大盛り」「ネギ抜き」の指定

• 図で見る: ターミナルの1行を読む

AIに聞くならこのコマンドの-から始まる部分（オプション）が何をしているのか教えてください。

sudo

sudo

別の呼び方: スードゥー

管理者の権限でコマンドを実行するための指定です。理由を確かめてから使うのが安全です。

出会う場面インストール中に権限エラーが出て、AIが「sudoを付けて実行しますか」と聞いてきたとき

台所でいうと店主のマスターキーを使う注文

注意sudoは管理者権限での実行なので、内容を理解しないまま許可すると、システムに影響する操作をされる可能性があります。

講座で詳しく: ターミナルって怖くない

AIに聞くならなぜこのコマンドにsudoが必要なのか説明し、実行してよいか私に確認してください。

PATH

PATH

別の呼び方: パス（環境変数）

コマンドの実体をパソコンが探しに行く場所の一覧です。ここが通っていないと「見つかりません」と出ます。

出会う場面インストールしたはずのコマンドが「command not found」になるとき

台所でいうと道具を探しに行く棚の一覧

講座で詳しく: Claude Codeを準備する

AIに聞くなら「command not found」と出ています。PATHが原因かどうか確認する方法を教えてください。

Homebrew（brew）

Homebrew

別の呼び方: ブリュー

Mac用のソフトを、ターミナルのコマンド一つでインストールできるようにしてくれる道具です。

出会う場面「brew installで入れてください」と手順書に書いてあるとき

台所でいうと業務用品の通販

AIに聞くならHomebrewとは何か、なぜ最初に入れておくと便利なのか教えてください。

curl

curl

別の呼び方: カール

ターミナルからインターネット上のURLにアクセスして、データを受け取るコマンドです。

出会う場面インストール手順の1行目に`curl`から始まるコマンドが書いてあるとき

注意知らない相手のcurlコマンドを`| bash`で直接実行すると、意図しないプログラムが動く危険があります。

AIに聞くならこのcurlコマンドが何を取得しようとしているのか、実行前に説明してください。

export

export

別の呼び方: エクスポート

値を環境変数として登録し、そのターミナルから起動するプログラムに渡せるようにするコマンドです。

出会う場面「.zshrcにexportで書いてください」とAIに言われたとき

注意exportで設定したAPIキーの値をそのままAIとの会話に貼り付けると、漏洩の原因になります。

講座で詳しく: APIキー、Claudeに渡してませんか？

AIに聞くならこのexportの行が、何のキーをどこに設定しているのか説明してください。

&&（コマンドの連結）

&& (Command Chaining)

別の呼び方: アンパサンド2つ、コマンド連結

前のコマンドが成功したときだけ、次のコマンドを続けて実行する記号です。`mkdir foo && cd foo`のように使います。

出会う場面AIが実行するコマンドの表示に`&&`が並んでいるとき

AIに聞くならこの&&でつながったコマンドを、1つずつ順番に何をしているか説明してください。

exit

exit

別の呼び方: quit

開いているターミナルやシェルを終了し、入力を受け付けない状態にするコマンドです。

出会う場面その日の作業が終わって、ターミナルを閉じたいとき

AIに聞くならこのターミナルをexitで終了しても、作業中のデータは残るか教えてください。

cat

cat

別の呼び方: concatenate

ファイルの中身を、エディタを開かずにそのままターミナルへ表示してくれるコマンドです。

出会う場面設定ファイルの中身をエディタを開かずにさっと確認したいとき

AIに聞くならcatでこのファイルの中身を表示して、内容をわかりやすく説明してください。

パイプ（|）

Pipe

別の呼び方: 縦棒

前のコマンドが出力した結果を、次のコマンドへそのまま受け渡す記号です。長いコマンドの途中によく出てきます。

出会う場面AIが打つ長いコマンドの途中に`|`という記号があるとき

AIに聞くならこのコマンドの|（パイプ）の前後で、それぞれ何をしているのか教えてください。

リダイレクト（>）

Redirect

別の呼び方: リダイレクション

コマンドの出力結果を、画面ではなくファイルへ書き出す記号です。`>`は既存の内容を上書きします。

出会う場面AIが打つコマンドの中に`>`という記号があるとき

注意`>`は上書き保存なので、既存のファイルの中身が消える場合があります。

AIに聞くならこのコマンドの>（リダイレクト）で、どのファイルに何が書き出されるのか教えてください。

シェルスクリプト（.sh）

Shell Script

別の呼び方: shファイル、.shファイル

複数のコマンドを順番に並べて1つのファイルにまとめたものです。実行すれば全部まとめて動きます。

出会う場面「このシェルスクリプトを実行してください」と言われたとき

注意中身を確認せずに実行すると、意図しない削除や変更が一括で行われる可能性があります。

AIに聞くならこのシェルスクリプトが実行前後で何をするのか、順を追って説明してください。

実行権限

Execute Permission

別の呼び方: パーミッション（実行）

ファイルをプログラムとして動かしてよいという許可のことです。`chmod`というコマンドで付けます。

出会う場面「Permission denied」というエラーが出たとき

AIに聞くなら「Permission denied」と出ました。実行権限が原因か確認し、対処法を教えてください。

.zshrc

.zshrc

別の呼び方: ズィーエスエイチアールシー

ターミナルを開くたびに読み込まれる設定ファイルです。PATHなど、毎回使う設定をここに書きます。

出会う場面「.zshrcに追記してください」とAIに言われたとき

注意APIキーをここに書くと、このファイルを読めるほかのプログラムやAIにも見えてしまいます。共有もしないでください。

講座で詳しく: APIキー、Claudeに渡してませんか？

AIに聞くなら.zshrcに追記する前に、何が書き加えられるのか説明してください。

SSH

SSH

別の呼び方: エスエスエイチ

別のコンピューターへ暗号化して安全に接続する仕組みです。GitHubへの接続の鍵にも使われます。

出会う場面GitHubの初期設定で「SSH鍵を作成しますか」と聞かれたとき

注意SSH鍵には公開鍵と秘密鍵があります。GitHubに登録するのは公開鍵だけで、秘密鍵は誰にも渡さないでください。

講座で詳しく: GitHubに上げる

AIに聞くならSSH鍵の作成から登録まで、何をしているのか説明しながら進めてください。

grep

grep

別の呼び方: グレップ

たくさんのファイルや文章の中から、指定した文字列を含む行だけを探し出すコマンドです。

出会う場面AIの作業画面に`grep`から始まるコマンドが表示されたとき

AIに聞くならこのgrepコマンドで、何のファイルから何を探しているのか説明してください。

ディレクトリ

Directory

別の呼び方: フォルダ、folder

フォルダのことです。プログラミングの分野ではこう呼ぶことが多く、意味はフォルダとまったく同じです。

出会う場面エラーメッセージや手順書に「ディレクトリ」と出てきたとき

台所でいうと棚

• 図で見る: フォルダとパス

AIに聞くなら「ディレクトリ」はフォルダと同じ意味ですか？違いがあれば教えてください。

パス

Path

別の呼び方: ファイルパス

ファイルやフォルダの場所を示す住所です。`/Users/名前/Desktop` のように、階層を区切りながら書きます。

出会う場面AIから「ファイルのパスを教えてください」と言われたとき

台所でいうと棚の番地

• 図で見る: フォルダとパス

AIに聞くならこのファイルの正確なパスを、コピーしてそのまま貼れる形で教えてください。

ホームディレクトリ（~）

Home Directory

別の呼び方: チルダ、ホームフォルダ、home

自分専用に用意されたユーザーフォルダです。`~`（チルダ）という記号1文字で表すことができます。

出会う場面ターミナルで `cd ~` と打つとき、パスの中に `~` を見かけたとき

台所でいうと自分の持ち場

• 図で見る: フォルダとパス

AIに聞くなら`~` は自分のパソコンでは実際にどのフォルダを指していますか。

プロジェクトフォルダ

Project Folder

別の呼び方: 作業フォルダ

一つのアプリのファイルをまとめて入れる、いちばん上のフォルダです。多くのAIツールは既定でこの中だけを作業範囲にしますが、設定次第では外にもアクセスできることがあります。

出会う場面Claude Code を起動するフォルダを選ぶとき

台所でいうとこの料理専用の棚一式

注意プロジェクトフォルダの外までAIに触らせてしまうと、関係ないファイルまで書き換えられることがあります。

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: フォルダとパス

AIに聞くならデスクトップに新しいプロジェクトフォルダを作りたいです。手順を教えてください。

拡張子

File Extension

別の呼び方: ファイル拡張子

ファイル名の末尾に付く `.html` や `.js` などの部分です。ファイルの中身がどんな種類かを表します。

出会う場面「index.html」を開いても、何も表示されないとき

台所でいうと容器に貼った種類のシール

注意Macは拡張子を初期設定で隠すため、`.html` のつもりが `.html.txt` になり、ブラウザで開けない事故が起きます。

• 図で見る: フォルダとパス

講座で詳しく: コラム　詰まったときの抜け方

AIに聞くならこのファイルの拡張子を確認する方法を、Macでの手順で教えてください。

隠しファイル（ドットファイル）

Hidden File

別の呼び方: ドットファイル

`.` から始まる、普段は見えないファイルのことです。Finderでは表示設定を変えるまで見えません。

出会う場面.gitフォルダなど、普段見えないファイルにFinderで気づいたとき

台所でいうと裏の引き出し

• 図で見る: フォルダとパス

AIに聞くならMacで隠しファイルを表示する方法を、あとで元に戻す手順も含めて教えてください。

ソースコード

Source Code

別の呼び方: ソース

人が書いたプログラムの文章そのもののことです。AIが生成したコードもソースコードと呼びます。

出会う場面「ソースコードを見せてください」とAIや人に言われたとき

AIに聞くならこのファイルのソースコードの、大まかな処理の流れを日本語で説明してください。

index.html

index.html

別の呼び方: インデックスファイル

Webページで最初に開かれる、入口にあたるファイルです。フォルダを公開すると、Webサーバーやホスティングサービス（Vercelなど）がこの名前を自動で選んで表示します。

出会う場面作ったページをダブルクリックしてブラウザで開こうとするとき

• 図で見る: フォルダとパス

講座で詳しく: そもそもVibe Codingってなに？

AIに聞くならindex.html以外に、これから増える予定のファイルの構成を教えてください。

Markdown（.md）

Markdown

別の呼び方: マークダウン、mdファイル

`#` や `-` のような簡単な記号で見出しや箇条書きを書く、軽い書式です。CLAUDE.md もこの書式で書かれています。

出会う場面CLAUDE.md や README を開いて、記号だらけだと感じたとき

AIに聞くならこのMarkdownファイルを、記号の意味も添えて日本語で要約してください。

ファイル名の付け方

File Naming

別の呼び方: ファイル命名規則

ファイル名やフォルダ名は、半角英数字とハイフン・アンダースコアだけにするのが安全です。スペースや日本語は避けます。

出会う場面作ったファイルやフォルダの名前を、自分で決めるとき

注意ファイル名にスペースや日本語、記号があると、コマンドやパスの指定でエラーの原因になることがあります。

AIに聞くならこのファイル名は開発でも安全な名前になっていますか。直した方がよければ理由も教えてください。

絶対パス

Absolute Path

一番上の階層（/）から書いた、省略のない完全な住所です。どこから実行しても同じ場所を指します。

出会う場面エラー文に長い `/Users/...` から始まるパスが出てきたとき

• 図で見る: フォルダとパス

AIに聞くならこのファイルの絶対パスを、コピーしてそのまま貼れる形で正確に教えてください。

相対パス

Relative Path

今いる場所を基準にした住所です。`./` は今の場所、`../` は一つ上のフォルダを指します。

出会う場面ページ内の画像やリンクが表示されない、と気づいたとき

• 図で見る: フォルダとパス

AIに聞くならこの相対パスは、今のファイルからどのフォルダを基準にしているか教えてください。

README

README

別の呼び方: リードミー、README.md

そのプロジェクトが何をするものかを説明する、最初に読むべきファイルです。多くの場合README.mdという名前です。

出会う場面GitHubのリポジトリページを開いたとき

• 図で見る: フォルダとパス

AIに聞くならこのプロジェクトにREADMEがあれば中身を見せてください。無ければ、初めて読む人向けに新しく作成してください。

設定ファイル

Configuration File

別の呼び方: config file、コンフィグ

アプリやツールの動き方をあらかじめ決めておく値を書いたファイルです。中身を直接いじると挙動が変わります。

出会う場面「設定ファイルを開いて」とAIから案内されたとき

AIに聞くならこの設定ファイルの、それぞれの項目が何を意味するか説明してください。

JSON

JSON

別の呼び方: jsonファイル

波かっこと「名前と値」の組で、データを書き表す形式です。package.jsonなど設定用のファイルによく使われます。

出会う場面package.json のような、波かっこだらけのファイルを開いたとき

AIに聞くならこのJSONファイルの構造を、初心者向けにかみ砕いて説明してください。

.env

.env

別の呼び方: envファイル、ドットイーエヌブイ

APIキーなど、他人に見せてはいけない値をまとめて置いておくファイルです。GitHubには絶対に上げません。

出会う場面AIから「APIキーは.envファイルに書いてください」と言われたとき

台所でいうと人に見せない専用の引き出し

注意.envの中身がGitHubに上がると世界中から見える状態になり、APIキーが不正利用されることがあります。

• 図で見る: フォルダとパス

講座で詳しく: GitHub + Vercelで公開する

AIに聞くならAPIキーを.envファイルに書く手順と、.gitignoreへの追加も含めて教えてください。

.gitignore

.gitignore

別の呼び方: gitignore、ジットイグノア

変更履歴を記録する仕組み（Git）に、記録させたくないファイルの名前を書いておくファイルです。ここに書いたものはGitHubへ上がりません。

出会う場面.envを守るために「.gitignoreに追加して」と言われたとき

台所でいうと「持ち出し禁止」の貼り紙

注意.gitignoreへの追加は今後のファイルにしか効きません。過去にコミット済みの.envは別途、履歴からの削除が必要です。

• 図で見る: フォルダとパス
• 図で見る: パッケージが入るしくみ

講座で詳しく: GitHub + Vercelで公開する

AIに聞くなら.gitignoreの中身を見せて、このプロジェクトで秘密情報が漏れる設定になっていないか確認してください。

CSVファイル

CSV File

別の呼び方: csv、カンマ区切り

表のデータをカンマ区切りの文字だけで保存するファイル形式です。Excelなど表計算ソフトとやり取りするときによく使います。

出会う場面AIから「CSV形式で書き出しますか」と聞かれたとき

注意CSVをExcelで開いて上書き保存すると、日付や先頭の0が意図せず変換されることがあります。

AIに聞くならこのデータをCSV形式でエクスポートする方法を教えてください。

ZIP（圧縮ファイル）

ZIP File

別の呼び方: zip、圧縮ファイル、解凍

複数のファイルを一つにまとめて容量を小さくしたファイルです。ダブルクリックすると元の状態に戻ります（解凍）。

出会う場面GitHubの「Download ZIP」でコードをダウンロードしたとき

注意解凍先のフォルダに同名のファイルがすでにあると、確認なく上書きされることがあります。大事なファイルは解凍前にバックアップしておくと安全です。

AIに聞くならダウンロードしたZIPファイルを解凍して、中身のフォルダ構成を教えてください。

.DS_Store

.DS_Store

別の呼び方: ds store

MacのFinderが自動で作る、フォルダの表示設定を記録する隠しファイルです。フォルダ内のファイル名が入ることがあるので、公開するものには含めません。

出会う場面Gitの差分に見覚えのない .DS_Store が大量に出てきたとき

AIに聞くなら.DS_Storeがgitの差分に出てきます。.gitignoreに追加して今後は無視されるようにしてください。

ルート（/）

Root

別の呼び方: ルートディレクトリ

ディスクの一番上にある、すべてのフォルダの出発点となる階層です。絶対パスは必ずここから始まります。

出会う場面絶対パスの説明で「ルートから始まる」と言われたとき

台所でいうと台所の入口

• 図で見る: フォルダとパス

AIに聞くなら「ルートディレクトリ」という言葉を、今の話の文脈でかみ砕いて説明してください。

YAML

YAML

別の呼び方: ヤムル、yml

インデント（字下げ）で構造を表す、設定を書くための書式です。GitHub Actionsなどの設定でよく使われます。

出会う場面GitHub Actionsの設定ファイルを開いたとき

注意YAMLはインデントにタブ文字を使うこと自体が禁止されており、混ぜると即座にエラーになります。

AIに聞くならこのYAMLファイルの、インデントの意味も含めて日本語で説明してください。

文字コード（UTF-8）と文字化け

Character Encoding / Mojibake

別の呼び方: 文字化け、UTF-8、mojibake

文字を数値として保存する取り決めが文字コードで、UTF-8が標準です。取り決めが合わないと文字が化けて表示されます。

出会う場面CSVファイルをExcelで開いたら、日本語が記号の羅列になっていたとき

AIに聞くならこのファイルを開いたら文字化けしていました。文字コードをUTF-8に指定し直す方法を教えてください。

プログラミング言語

Programming Language

別の呼び方: プログラム言語

コンピューターに何をしてほしいかを、決まった書き方で伝えるための人工的な言葉です。

出会う場面「プログラミング言語」という言葉が講座やAIの説明に出てきたとき

講座で詳しく: そもそもVibe Codingってなに？

AIに聞くならプログラミング言語って結局何なのか、専門用語を使わずに教えてください。

HTML

HTML

別の呼び方: エイチティーエムエル、エッチティーエムエル

Webページの見出し・段落・画像の配置を、タグと呼ばれる印で書き表す骨組み用の言語です。

出会う場面「HTMLで書いて」とAIやドキュメントに書かれているとき

• 図で見る: Webアプリの中身

講座で詳しく: アプリを育てる②　ファイルを分ける

AIに聞くならHTMLって何なのか、プログラミング初心者向けに一言で説明してください。

CSS

CSS

別の呼び方: スタイルシート

Webページの色、大きさ、余白、配置といった見た目の指定をまとめて担当する言語です。

出会う場面「デザインを直して」と頼んで、CSSファイルが更新されたとき

• 図で見る: Webアプリの中身

講座で詳しく: アプリを育てる②　ファイルを分ける

AIに聞くならCSSを直すとき、見た目のどこが変わるのか教えてから直してください。

JavaScript

JavaScript

別の呼び方: JS、ジャバスクリプト

ボタンを押したときの計算やデータの入れ替えなど、Webページに動きと処理を与える言語です。

出会う場面「ボタンが動かない」というときにJavaScriptのエラーを疑うとき

• 図で見る: Webアプリの中身

講座で詳しく: アプリを育てる②　ファイルを分ける

AIに聞くならJavaScriptって何を担当している言語なのか、簡単に教えてください。

ライブラリ

Library

よく使う処理をあらかじめまとめて、自分のコードから呼び出せるようにした部品集です。

出会う場面AIが「〇〇ライブラリを使います」と言って作業を進めるとき

AIに聞くならこのライブラリは何をしてくれるもので、なぜ今回使うのか教えてください。

フレームワーク

Framework

アプリを作るときの骨組みと決まりごとを、先にまとめて用意してくれる開発の土台です。

出会う場面「Next.jsで作ります」とAIが構成を決めるとき

AIに聞くならフレームワークって何のためにあるものか、たとえ話で教えてください。

TypeScript

TypeScript

別の呼び方: TS

JavaScriptに「型」の仕組みを足し、間違いを実行前に見つけやすくした言語です。

出会う場面プロジェクトの拡張子が「.ts」になっているのを見たとき

AIに聞くならTypeScriptがJavaScriptと何が違うのか、初心者向けに教えてください。

Python

Python

別の呼び方: パイソン

読みやすく、少ないコード量で書けることが特徴の言語で、データ処理や自動化の場面でよく使われます。

出会う場面「Pythonで作ります」と言われたとき、または.pyファイルを見たとき

AIに聞くならPythonってどんなことが得意な言語なのか、簡単に教えてください。

型

Type

値が数字なのか文字なのかといった種類のことです。TypeScriptなど型を厳密にチェックする仕組みでは、種類が合わないと実行前にエラーとして知らせてくれます。

出会う場面「型エラーが出ています」とAIから報告を受けたとき

AIに聞くなら型エラーって具体的に何が間違っているということなのか教えてください。

変数

Variable

値に名前を付けて入れておく入れ物のことで、後から中身を自由に書き換えることもできます。

出会う場面コードを読んでいて、意味の分からない英単語が出てきたとき

AIに聞くなら変数って何なのか、日常生活の身近な例えを使ってわかりやすく教えてください。

関数

Function

決まった処理をひとまとめにして名前を付けておき、何度でも呼び出せるようにしたものです。

出会う場面「〇〇関数を作って」とAIに頼む場面や、コードの中に出てきたとき

AIに聞くなら関数って何をまとめてくれるものなのか、簡単な例で教えてください。

React

React

別の呼び方: リアクト

画面を小さな部品(コンポーネント)の組み合わせで作る、JavaScriptのライブラリです。

出会う場面「Next.jsの下地」や部品(コンポーネント)という言葉が出てきたとき

AIに聞くならReactって何のためのものなのか、初心者向けに教えてください。

Next.js

Next.js

別の呼び方: Nextjs、ネクストジェイエス

Reactを使ってWebサイトやアプリを作るための土台で、Vercelという会社が作っています。

出会う場面「Next.jsで作ります」と講座やAIの提案に出てきたとき

AIに聞くならNext.jsって何をするための道具なのか、簡単に教えてください。

Tailwind CSS

Tailwind CSS

別の呼び方: テイルウィンド

「p-4」のような短い名前をHTMLに並べるだけで、見た目を指定できるCSSの便利な道具です。

出会う場面AIが書いたコードに「p-4」や「text-lg」のような短い文字が並んでいるとき

AIに聞くならTailwind CSSって何をするための道具なのか、簡単に教えてください。

静的サイト

Static Site

誰が見ても同じ内容を返す、HTMLとCSSとJavaScriptだけでできたサイトです。

出会う場面最初に自分でWebページを公開するとき、ログインや保存機能が無いと言われるとき

AIに聞くなら静的サイトってどういう意味で、動的サイトと何が違うのか教えてください。

Webアプリ

Web App

別の呼び方: ウェブアプリ

ログインや保存機能など、見る人や状況によって表示される中身が変わる、動きのあるサイトです。

出会う場面静的サイトの次の段階として「Webアプリ」という言葉が出てきたとき

AIに聞くならWebアプリって静的サイトと何が違うのか、具体例をあげて教えてください。

コメント

Comment

コードの中に書くメモのことで、「//」や「#」の後ろの部分はプログラムとして実行されません。

出会う場面AIが書いたコードの中に、灰色で書かれた説明文を見つけたとき

AIに聞くならこのコードのコメント部分が何を説明しているのか教えてください。

構文

Syntax

別の呼び方: シンタックス、シンタックスエラー

プログラミング言語ごとに決まっている、正しい書き方の規則のことで、破ると動かなくなります。

出会う場面「構文エラー」や「SyntaxError」という表示を見たとき

AIに聞くなら構文エラーって具体的に何が原因で起きるものなのか教えてください。

配列

Array

別の呼び方: リスト

複数の値を順番に並べてひとまとめにし、番号で取り出せるようにしたデータの入れ物です。

出会う場面AIの説明に「この配列には」という言い回しが出てきたとき

AIに聞くなら配列って何なのか、身近な例を使ってわかりやすく教えてください。

オブジェクト

Object

別の呼び方: 連想配列

「名前:値」という組をいくつも持たせて、関連する情報をひとまとめにしたデータの形です。

出会う場面AIが「このオブジェクトのプロパティは」と説明しているとき

AIに聞くならオブジェクトって何なのか、身近な例を使ってわかりやすく教えてください。

条件分岐

Conditional (if statement)

別の呼び方: if文、条件式

ある条件を満たすかどうかによって、プログラムの動きを枝分かれさせるための書き方です。

出会う場面AIが「もし〇〇ならこうする、という条件分岐です」と説明したとき

AIに聞くなら条件分岐って何をしているものなのか、身近な例で教えてください。

リファクタリング

Refactoring

見た目の動きは変えずに、コードの書き方だけを整理して読みやすくする作業のことです。

出会う場面「1枚のファイルを分けましょう」とAIから提案されたとき

注意動きを変えないはずの作業でも、まれにアプリが壊れることがあるため、直後に必ず動作確認してください。

講座で詳しく: アプリを育てる②　ファイルを分ける

AIに聞くならこのコードの動きを変えずに、リファクタリングして読みやすくして。

localStorage／sessionStorage

localStorage / sessionStorage

別の呼び方: ローカルストレージ、ブラウザストレージ

ブラウザの中にデータを覚えさせる仕組みです。前者は消えず、後者はタブを閉じると消えます。

出会う場面「入力した内容をブラウザに保存したい」とAIに相談するとき

注意localStorageの中身はブラウザの開発者ツールから誰でも読めるため、他人に見られて困る情報は入れないでください。

講座で詳しく: アプリを育てる①　機能を足す

AIに聞くならlocalStorageに保存する内容に、個人情報が入っていないか確認して。

SDK

SDK

別の呼び方: エスディーケー

あるサービスを自分のコードから使うために必要な道具一式を、ひとまとめにしたものです。

出会う場面「Stripe SDK を使って」のように特定サービス名のSDKを指す言葉がAIへの指示文に出てきたとき

AIに聞くならSDKって何のためにあるものなのか、初心者向けに教えてください。

npm

Node Package Manager

別の呼び方: エヌピーエム

npmはインターネット上にある便利な部品（パッケージ）を検索し、自分のプロジェクトに取り込み、バージョンごと管理する道具です。

出会う場面画面に「npm install」というコマンドが出て、何をしているのか分からなかったとき

台所でいうと食材の問屋

注意見慣れないパッケージを確認せずに入れると、意図しないコードが実行される場合があります。

• 図で見る: パッケージが入るしくみ

AIに聞くならいまnpmで何を、何のために入れようとしているのか教えてください。

Node.js

Node.js

別の呼び方: ノードジェイエス、Node

Node.jsは、JavaScriptという言語をブラウザの外、パソコン上で動かすための土台になるソフトです。Claude Codeもこの上で動きます。

出会う場面「Claude Codeの前提としてNode.jsが必要です」と案内されたとき

台所でいうと台所のコンロ

• 図で見る: パッケージが入るしくみ

講座で詳しく: Claude Codeを準備する

AIに聞くなら今のパソコンにNode.jsが入っているか確認して、入っていなければLTS版の入れ方を教えて。

パッケージ

Package

誰かが作って公開した、プログラムの部品です。インストールすれば自分のプロジェクトから呼び出して使えます。

出会う場面AIが「このパッケージをインストールします」と言ったとき

台所でいうと出来合いの材料

• 図で見る: パッケージが入るしくみ

AIに聞くなら今インストールしようとしているパッケージが何をするものか、簡単な言葉で説明して。

package.json

package.json

package.jsonは、プロジェクトの名前、必要なパッケージ、実行できるコマンドなどをまとめて書いておく名札のようなファイルです。

出会う場面プロジェクトのフォルダを開いて、一番上にあるファイルを見たとき

台所でいうと材料リスト兼段取りメモ

• 図で見る: フォルダとパス
• 図で見る: パッケージが入るしくみ

AIに聞くならpackage.jsonの中身を見て、このプロジェクトが何のパッケージを使っているか一覧にして。

node_modules

node_modules

別の呼び方: ノードモジュールズ

node_modulesは、インストールしたパッケージの実物が入るフォルダです。中身は巨大になりやすく、GitHubには上げません。

出会う場面npm installのあとにフォルダが急に重くなったと感じたとき

台所でいうと材料をぎっしり詰めた棚

• 図で見る: フォルダとパス
• 図で見る: パッケージが入るしくみ

AIに聞くならnode_modulesフォルダがなぜこんなに大きいのか、消しても大丈夫か教えて。

npm install

npm install

別の呼び方: npm i

npm installは、package.jsonに書かれたパッケージをまとめてパソコンに入れるコマンドです。作業前に一度実行します。

出会う場面手順書に「まずnpm installを実行してください」と書かれているとき

台所でいうと材料リストを見てまとめて仕入れる

• 図で見る: パッケージが入るしくみ

AIに聞くならnpm installを実行して、エラーが出たら原因と直し方を教えて。

npm run dev

npm run dev

npm run devは、自分のパソコンで作ったサイトやアプリを、確認用に一時的に動かすためのコマンドです。

出会う場面AIに「開発サーバーを起動して」と頼んだあと、実際に打たれるコマンドを見たとき

台所でいうと「試食の準備して」の合図

• 図で見る: パッケージが入るしくみ
• 図で見る: 自分のPCの中と、インターネット

AIに聞くならnpm run devを実行して、表示されたURLとポート番号を教えて。

インストール

Install

別の呼び方: セットアップ

インストールとは、ソフトやパッケージを、パソコンの中で実際に使える状態にすることです。

出会う場面「まずNode.jsをインストールしてください」と案内されたとき

講座で詳しく: Claude Codeを準備する

AIに聞くならこのソフトのインストール手順を、初心者向けに一つずつ省略せず教えて。

開発サーバー

Development Server

別の呼び方: dev server、ローカルサーバー

開発サーバーは、自分のパソコンの中だけで、作ったサイトを試しに表示するための一時的な仕組みです。

出会う場面AIに「開発サーバーを起動して」と頼み、画面が動き出したとき

台所でいうと試食用のコンロ

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: パッケージが入るしくみ
• 図で見る: 自分のPCの中と、インターネット

AIに聞くなら開発サーバーを起動して、ブラウザで確認できるURLとポート番号を教えて。

localhost

localhost

別の呼び方: ローカルホスト、127.0.0.1

localhostは「自分のこのパソコン」を指す特別な名前です。localhostのURLは、自分にしか見えません。

出会う場面`localhost:3000`のようなURLを開くよう案内されたとき

台所でいうと自分の台所だけの呼び名

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: 自分のPCの中と、インターネット

AIに聞くならlocalhostと本番のURLは何が違うのか、他の人に見えるかどうかの観点で教えて。

ポート

Port

別の呼び方: ポート番号

ポートは、同じパソコンの中で通信の窓口を区別するための番号です。localhost:3000の3000がこれにあたります。

出会う場面「ポート3000がすでに使われています」というエラーが出たとき

台所でいうとそのコンロの何番目の口か

• 図で見る: 自分のPCの中と、インターネット

AIに聞くならポートが使用中というエラーが出た。原因と直し方を分かりやすく教えて。

LTS

LTS (Long Term Support)

別の呼び方: Long Term Support

長く安定して使えるように保守が続けられる、ソフトウェアのバージョンのことを指します。

出会う場面Node.jsのダウンロードページで「LTS」と「Current」の2択が出たとき

講座で詳しく: Claude Codeを準備する

AIに聞くならNode.jsのLTS版とCurrent版、どちらを入れればいいか私の環境に合わせて教えて。

パッケージマネージャー

Package Manager

別の呼び方: パッケージ管理ツール

パッケージマネージャーは、パッケージを入れる、更新する、削除するのを助ける道具の総称です。npmがその代表です。

出会う場面「npmとpnpm、どちらのパッケージマネージャーを使いますか」と聞かれたとき

AIに聞くならこのプロジェクトが使っているパッケージマネージャーは何か教えて。

pnpm

pnpm

別の呼び方: ピーエヌピーエム

pnpmは、npmと同じ役割を持つ別のパッケージマネージャーです。ディスク容量を節約できるのが特徴です。

出会う場面手順書に「pnpm installで入れてください」と書かれているとき

AIに聞くならこのプロジェクトはpnpmとnpmのどちらを使うべきか教えて。

yarn

Yarn

別の呼び方: ヤーン

yarnは、npmと同じ役割を持つ別のパッケージマネージャーです。以前は速さを理由によく選ばれていました。

出会う場面手順書に「yarn installで入れてください」と書かれているとき

AIに聞くならこのプロジェクトはyarnとnpmのどちらを使うべきか教えて。

npx

npx

npxは、パッケージをパソコンに入れずに、その場で一度だけ実行するためのコマンドです。

出会う場面手順書の最初に「npx create-next-app」と書かれているとき

AIに聞くならこのnpxコマンドが何をするものか、実行する前に分かりやすく説明して。

依存関係

Dependencies

別の呼び方: デペンデンシー

依存関係とは、そのプロジェクトが動くために必要なパッケージを、まとめて記録した一覧のことです。

出会う場面AIに「依存関係を入れて」と言われたり、package.jsonの中でその一覧を見たとき

台所でいうと材料リストの「必要な材料」欄

• 図で見る: パッケージが入るしくみ

AIに聞くならこのプロジェクトの依存関係を一覧にして、それぞれ何のために使われているか教えて。

バージョン

Version

別の呼び方: 版

バージョンは、ソフトやパッケージの版のことです。版が違うと動きが変わったり、動かなくなったりします。

出会う場面「Node.jsのバージョンが古いようです」とエラーで指摘されたとき

台所でいうと材料の製造ロット

• 図で見る: パッケージが入るしくみ

AIに聞くなら今のバージョンと必要なバージョンの違いを教えて、どう合わせればいいか教えて。

ビルド

Build

ビルドとは、書いたコードを公開できる形に変換してひとまとめにする作業のことです。

出会う場面「ビルドに失敗しました」というエラーメッセージが出たとき

台所でいうとお店に出せる形に盛り付けて包む

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: 自分のPCの中と、インターネット

AIに聞くならビルドが失敗した理由を教えて、直せるところがあれば直しておいて。

ホットリロード

Hot Reload

別の呼び方: ホットリローディング

ホットリロードは、ファイルを保存すると画面が自動で更新される仕組みです。手動での再読み込みが要りません。

出会う場面開発サーバーを動かしたまま、コードを直してもらったとき

台所でいうと即時反映の味見皿

AIに聞くなら保存しても画面が更新されない。ホットリロードが効いているか確認して。

グローバルインストール

Global Install

別の呼び方: グローバル、-g

グローバルインストールとは、パッケージを特定のプロジェクトではなく、パソコン全体で使えるように入れることです。

出会う場面「npm install -g」のように-gという指定がついたコマンドを見たとき

注意sudo付きで実行すると管理者権限で外部コードが動きます。信頼できるパッケージか確認してから実行してください。

AIに聞くならこのパッケージはプロジェクトの中だけに入れるべきか、パソコン全体に入れるべきか教えて。

nvm

nvm (Node Version Manager)

別の呼び方: Node Version Manager、エヌブイエム

nvmは、パソコンにNode.jsの複数のバージョンを入れて、プロジェクトごとに切り替えられるようにする道具です。

出会う場面Node.jsのバージョン違いのエラーが続き、nvmの利用を提案されたとき

AIに聞くならnvmを使ってNode.jsのバージョンを切り替える手順を、初心者向けに教えて。

脆弱性の警告

Vulnerability Warning (npm audit)

別の呼び方: npm audit、vulnerabilities

npm installのあとに表示される、使っているパッケージにセキュリティ上の弱点が見つかったという警告です。

出会う場面npm installの最後に脆弱性ありという英文が表示されたとき

AIに聞くならこの脆弱性の警告は今すぐ対処すべきものか、様子見でいいものか教えて。

ランタイム

Runtime

別の呼び方: 実行環境

ランタイムとは、プログラムを実際に動かすための土台となるソフトのことです。Node.js本体などがこれにあたります。

出会う場面エラー文に「ランタイムエラー」や実行環境という言葉が出てきたとき

AIに聞くならこのエラーはランタイムの問題か、コードの書き方の問題か切り分けて教えて。

ロックファイル

Lockfile

別の呼び方: package-lock.json、pnpm-lock.yaml、yarn.lock

ロックファイルは、入れたパッケージの正確な版を記録しておくファイルです。誰が入れても同じ版になります。

出会う場面AIの変更差分に、覚えのない大量の変更が出たとき

台所でいうと仕入れ伝票（銘柄とロットまで）

• 図で見る: パッケージが入るしくみ

AIに聞くならロックファイルの差分が大量に出ている。何が起きたのか分かりやすく教えて。

npm scripts

npm scripts

別の呼び方: scripts

npm scriptsは、package.jsonのscriptsという欄に書いておいた、名前で呼び出せるコマンドのことです。

出会う場面「npm run build」のように、npm runのあとに独自の名前が続くのを見たとき

• 図で見る: パッケージが入るしくみ

AIに聞くならpackage.jsonのscriptsに書かれているコマンドを、それぞれ何をするものか一覧で教えて。

pip

pip

別の呼び方: pip install

pipは、Pythonのパッケージをパソコンに入れるための道具です。npmのPython版にあたります。

出会う場面Pythonのパッケージについて「pip installで入れて」と案内されたとき

AIに聞くならpipで入れようとしているパッケージが何をするものか、入れる前に教えて。

uv

uv

別の呼び方: uv (Python)

uvは、Pythonのパッケージと実行環境をまとめて管理する道具です。パソコン全体を汚さず、フォルダの中だけで完結します。

出会う場面「Pythonの環境はuvで管理します」とAIやCLAUDE.mdの設定で案内されたとき

講座で詳しく: PCを汚さないで済む方法（UV）

AIに聞くならこの作業でuvが何を作ったのか、フォルダの中身を見て説明して。

仮想環境

Virtual Environment

別の呼び方: .venv

仮想環境とは、プロジェクトごとにPythonのパッケージを分けて入れておく仕組みです。他のプロジェクトに影響しません。

出会う場面フォルダの中に.venvという見慣れないフォルダができているのを見つけたとき

講座で詳しく: PCを汚さないで済む方法（UV）

AIに聞くならこのプロジェクトの仮想環境が今どういう状態か、フォルダを見て教えて。

プロセス

Process

プロセスとは、いま実行されているプログラムひとつひとつのことです。画面を閉じても裏で動き続けることがあります。

出会う場面「ポートがすでに使われています」というエラーの原因を調べているとき

注意動いているプロセスを不用意に止めると、保存していない作業内容が消えることがあります。

AIに聞くならこのポートを使っているプロセスを調べて、必要なら安全に止めて。

セマンティックバージョニング

Semantic Versioning

別の呼び方: SemVer

セマンティックバージョニングは、版を「メジャー.マイナー.パッチ」の数字で表す規約です。壊れる変更・機能追加・修正を区別します。

出会う場面package.jsonの中で「react: ^18.2.0」のような表記を見たとき

AIに聞くならpackage.jsonの先頭についている記号がそれぞれ何を意味するか教えて。

エラーメッセージ

Error Message

別の呼び方: エラー文、赤いエラー

何かの処理が失敗したときに表示される文章です。まず「Error」の行と最後の数行を読むと、原因の手がかりになります。

出会う場面画面に赤い文字でエラーメッセージが表示されたとき

台所でいうと「焦げました」の報告

• 図で見る: エラーの読み方

講座で詳しく: コラム　詰まったときの抜け方

AIに聞くならこのエラーメッセージが出ました。原因と直し方を教えてください（このあとにエラー文を貼ります）。

警告（Warning）

Warning

別の呼び方: ワーニング、黄色い警告

処理は止まりませんが、注意した方がよいという知らせです。エラーとは違い、そのままでも動作は続きます。

出会う場面インストール中に黄色い文字の警告が出たとき

台所でいうと「少し塩が多いかも」の注意

• 図で見る: エラーの読み方

AIに聞くならこの警告(Warning)は無視して問題ないか、それとも対応が必要か教えてください。

ログ

Log

別の呼び方: ログ出力、実行ログ

プログラムが実際にどう動いたかを記録した文章です。不具合の原因を探る手がかりになります。

出会う場面AIから「ログを見せてください」と言われたとき

台所でいうと調理記録

AIに聞くならこのログを貼ります。ここから何が起きているか、原因を教えてください。

コンソール

Console

別の呼び方: コンソール画面

ログやエラーが表示される画面です。ブラウザにもエディタにもあり、不具合調査の起点になります。

出会う場面「コンソールを開いて確認して」と言われたとき

AIに聞くならコンソールに表示された内容を貼ります。これは何を意味していますか。

バグ

Bug

別の呼び方: 不具合

プログラムが作った人の意図とは違う動きをしてしまう誤りのことです。動かないだけでなく、間違った結果を返す場合も含みます。

出会う場面「これってバグですか」と誰かに聞かれたとき

AIに聞くならこの動きはバグだと思います。何が原因か調べてから直してください。

デバッグ

Debug

別の呼び方: デバッグ作業

バグの原因を探し当てて、正しく動くように直すまでの一連の作業のことです。地道な確認の繰り返しになります。

出会う場面「デバッグしてください」とAIに頼むとき

台所でいうと焦げの原因さがしと立て直し

AIに聞くならこの不具合をデバッグしてください。原因を教えてから直してください。

再現手順

Steps to Reproduce

別の呼び方: 再現ステップ

同じ不具合をもう一度起こすための操作の順番です。AIに伝えると原因を特定しやすくなります。

出会う場面AIに不具合の起きた操作の流れを報告するとき

台所でいうと同じ焦げ方をもう一度起こす手順

• 図で見る: エラーの読み方

AIに聞くならこの操作をすると不具合が起きます。手順は次の通りです。原因を調べてください。

TypeError（型エラー）

TypeError

値の種類に合わない操作をしたときに出るエラーです。undefinedやnullの中身を読もうとしたときによく出ます。

出会う場面画面の一部が動かず、コンソールに赤字のエラーが表示されたとき

講座で詳しく: コラム　詰まったときの抜け方

AIに聞くならこのTypeErrorのエラーメッセージをそのまま貼るので、原因と直し方を教えて。

ReferenceError（参照エラー）

ReferenceError

まだ定義していない変数や関数を呼び出したときに出る、参照に関するエラーのことです。

出会う場面コンソールに「is not defined」というエラーが出たとき

講座で詳しく: コラム　詰まったときの抜け方

AIに聞くならこのReferenceErrorのエラーメッセージをそのまま貼るので、原因と直し方を教えて。

開発者ツール（DevTools）

DevTools

別の呼び方: デベロッパーツール、検証ツール

ブラウザに付属している調査用の道具です。Macは Cmd+Option+I、Windowsは F12 で開けます。

出会う場面「開発者ツールを開いて確認して」と言われたとき

AIに聞くなら開発者ツールのコンソールにこの表示が出ています。何を意味しているか教えてください。

スタックトレース

Stack Trace

別の呼び方: スタックトレース情報

エラーが起きるまでにプログラムが通った処理の道のりを示す文章です。原因になった行数が書かれています。

出会う場面長いエラー文に処理の履歴が何行も並んでいるとき

台所でいうと焦げるまでの工程表

• 図で見る: エラーの読み方

AIに聞くならこのスタックトレースを貼ります。原因になっている行を教えてください。

構文エラー

Syntax Error

別の呼び方: SyntaxError、構文の誤り

コードの書き方の決まりが守られていないときに出るエラーです。括弧の閉じ忘れなどが典型例です。

出会う場面「SyntaxError」という文字がエラーに含まれているとき

講座で詳しく: コラム　詰まったときの抜け方

AIに聞くならSyntaxErrorが出ました。カッコの対応など書き方の誤りを確認して直してください。

テスト

Test

別の呼び方: 自動テスト、テストコード

コードが期待通りに動くかどうかを自動で確かめる仕組みです。結果は緑か赤で表示されます。

出会う場面「テストも一緒に書いて」とAIに頼むとき

講座で詳しく: AIが書いたコード、ほんとに大丈夫？（テスト）

AIに聞くならこの関数のテストを、境界値やエラーになる入力も含めて書いてください。

キャッシュ

Cache

別の呼び方: ブラウザキャッシュ

一度読み込んだデータを手元に保存しておく仕組みです。直したはずの内容が反映されない原因になります。

出会う場面コードを直したのに画面の表示が変わらないとき

台所でいうと作り置き

注意スーパーリロードなどキャッシュを消す操作は、入力途中のフォーム内容も消えることがあります。

講座で詳しく: アプリを育てる①　機能を足す

AIに聞くなら直したのに画面が変わりません。キャッシュが原因の可能性はありますか。

スーパーリロード

Hard Reload

別の呼び方: 強制再読み込み

キャッシュを無視してページを読み込み直す操作です。Macでは Cmd+Shift+R、Windowsでは Ctrl+Shift+R で行えます。

出会う場面直したのに変わらない、とAIに言われて試すとき

台所でいうと作り置きを下げて作り直してもらう

注意入力中のフォームやカートの中身など、保存していない画面上のデータは再読み込みで消えます。

講座で詳しく: アプリを育てる①　機能を足す

AIに聞くならスーパーリロードしても画面が変わりません。他に原因は考えられますか。

HTTPステータスコード

HTTP Status Code

別の呼び方: ステータスコード、404エラー、500エラー

サーバーからの返事を表す番号です。200は成功、404は見つからない、500はサーバー側の失敗を意味します。

出会う場面「404」や「500」という数字が画面に表示されたとき

• 図で見る: Webアプリの中身

AIに聞くならこのページで404(または500)が表示されました。原因を確認してください。

ポート使用中エラー（EADDRINUSE）

EADDRINUSE

別の呼び方: ポート衝突、Port already in use

同じ番号のポートを別のプログラムがすでに使っているために出るエラーです。開発サーバーが起動できません。

出会う場面開発サーバーを起動しようとして「EADDRINUSE」と出たとき

AIに聞くならEADDRINUSEというエラーで開発サーバーが起動しません。原因と直し方を教えてください。

モジュールが見つからないエラー

Module Not Found

別の呼び方: Cannot find module、モジュール未検出

使おうとした部品(パッケージ)がまだ手元に入っていないときに出るエラーです。インストールし忘れが主な原因です。

出会う場面「Cannot find module」という文字が表示されたとき

AIに聞くならCannot find moduleというエラーが出ました。何をインストールすればよいか教えてください。

ネットワークエラー

Network Error / Failed to fetch

別の呼び方: Failed to fetch、Network Error、通信エラー

サーバーとの通信がうまくいかなかったときに出るエラーです。ネット接続や相手先の不調が原因のことが多いです。

出会う場面「Failed to fetch」という表示でデータが読み込めないとき

AIに聞くならFailed to fetchというエラーで通信できません。原因として何が考えられますか。

ビルドエラー

Build Error

別の呼び方: ビルド失敗、Build failed

公開前にコードをひとまとめにする作業の途中で見つかった問題です。ここを通らないと公開できません。

出会う場面デプロイしようとして「ビルドに失敗しました」と表示されたとき

AIに聞くならビルドが失敗しました。このエラー内容を貼ります。原因を確認して直してください。

無限ループ

Infinite Loop

別の呼び方: 処理のフリーズ、固まる

終わる条件がないまま処理を繰り返し続けてしまう状態です。画面が固まったように見えることがあります。

出会う場面画面や処理が固まって反応しなくなったとき

注意無限ループ中に保存前のデータを扱っていると、強制終了で入力内容が消えることがあります。

AIに聞くなら画面が固まって動きません。無限ループになっていないか確認して直してください。

権限エラー

Permission Denied

別の呼び方: 権限拒否、アクセス権限エラー

そのファイルやフォルダを操作する権限が足りないときに出るエラーです。強い権限で無条件に解決するのは危険です。

出会う場面ターミナルで「Permission denied」と表示されたとき

注意権限エラーを消すためにsudoなど強い権限のコマンドを言われるままに実行すると、大事なファイルを壊す危険があります。

AIに聞くならPermission deniedと出ました。なぜ権限が必要なのか説明したうえで、安全な対処法を教えてください。

リント（lint）

Lint

別の呼び方: リンター、ESLint

コードの書き方の誤りや危ない癖を、実行する前に自動で見つけて指摘してくれる道具です。

出会う場面「lintを通して」とAIや手順書に言われたとき

AIに聞くならlintを実行して、指摘された内容を確認してから直してください。

型チェック

Type Check

別の呼び方: 型検査、TypeScriptの型エラー

変数や関数に想定と違う種類の値が渡されていないかを、実行する前に検査する仕組みです。

出会う場面「型エラーが出ています」とAIに言われたとき

AIに聞くならこの型エラーの意味を教えてください。どこをどう直せばよいですか。

undefined / null

Undefined / Null

別の呼び方: undefined、null、ヌル、アンディファインド

値が存在しないことを示す特別な値です。undefinedは値を入れ忘れた状態、nullは意図的に空にした状態を表し、扱おうとするとエラーになることがあります。

出会う場面「Cannot read properties of undefined」と表示されたとき

• 図で見る: エラーの読み方

講座で詳しく: コラム　詰まったときの抜け方

AIに聞くならundefinedのプロパティを読もうとしてエラーになっています。原因を確認してください。

CORSエラー

CORS Error

別の呼び方: CORS、CORSエラー表示、Cross-Origin

別のドメインへのアクセスを、ブラウザが安全のために止めたときに出るエラーです。APIを呼ぶ処理でよく起こります。

出会う場面外部のAPIを呼び出した処理が失敗したとき

AIに聞くならCORSエラーが出てAPIの呼び出しに失敗しました。原因と対処法を教えてください。

Git

Git

別の呼び方: ギット

ファイルの変更履歴を手元で記録し、比較、分岐、復元を行うバージョン管理システムです。

出会う場面「さっきまで動いてたのに壊れた」と思い、元の状態に戻したくなったとき

台所でいうと試作ノート

講座で詳しく: 知っておきたい7つの言葉（後半：Git〜デプロイ）

AIに聞くならこのフォルダをGitで管理できるようにして、今の状態をコミットしてもらえますか？

GitHub

GitHub

別の呼び方: ギットハブ

Gitリポジトリを共有し、レビューや課題管理、自動検証を行うオンラインサービスです。

出会う場面AIから「GitHubにアップロードしましょう」と言われたとき

台所でいうと本店の書庫

注意GitHubは設定次第で誰でも見られるため、パスワードやAPIキーを一緒にアップしないよう注意が必要です。

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: GitHubに上げる

AIに聞くならこのリポジトリをGitHubにアップロードしてもらえますか。公開・非公開の違いも教えてください。

リポジトリ

Repository

別の呼び方: リポ、repo

コード、設定、履歴を一つの開発単位として保存し、追跡する場所です。

出会う場面「このリポジトリをGitHubに上げて」と言われ、フォルダと何が違うのか迷ったとき

台所でいうと試作ノート一冊（これまでの履歴ごと）

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: GitHubに上げる

AIに聞くならリポジトリとただのフォルダは何が違うのか、教えてもらえますか？

コミット

Commit

別の呼び方: セーブポイント

意味のまとまりごとに変更内容と説明をGitの履歴へ記録する操作です。

出会う場面AIに「コミットして」と頼まれ、保存とどう違うのか分からなかったとき

台所でいうと「ここまでOK」とノートに記録する

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: GitHubに上げる

AIに聞くならいまの変更をコミットして、後で分かるような一言の説明も付けてもらえますか？

バージョン管理

Version Control

別の呼び方: バージョニング

ファイルの変更履歴を記録し、いつでも前の状態に戻せるようにする考え方です。Gitはその代表的な道具です。

出会う場面AIから「Gitで管理しますか」と聞かれたとき

台所でいうと試作ノートの書き直し履歴

講座で詳しく: 知っておきたい7つの言葉（後半：Git〜デプロイ）

AIに聞くならバージョン管理って何のためにあるのか、私のプロジェクトに当てはめて教えて。

ローカル

Local

別の呼び方: local environment

自分のパソコンの中のことです。Gitでは、手元のリポジトリをローカル、GitHubなど手元以外にあるものをリモートと呼びます。

出会う場面「まずローカルで確認してから公開しましょう」と言われたとき

• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: GitHub + Vercelで公開する

AIに聞くなら今の変更は、ローカルとGitHubのどちらにある状態なのか教えて。

差分（diff）

Diff

別の呼び方: 差分表示

変更前と変更後で、どこがどう変わったかを見比べる表示のことです。AIの変更を承認する前に必ず確かめます。

出会う場面AIが提案した変更に、赤と緑の行が並んで表示されたとき

台所でいうと前の版との違い（赤ペン）

• 図で見る: Gitで変更を記録して届ける流れ

AIに聞くならこの差分で何が変わるのか、行ごとに日本語で分かりやすく説明して。

git status

git status

別の呼び方: ステータス確認

今どのファイルが変更されているか、記録待ちの状態は何かを一覧で確かめるためのコマンドです。

出会う場面AIが「git statusで確認します」と言って変更一覧を表示したとき

講座で詳しく: Gitに秘密を残さない

AIに聞くならgit statusの結果を見せて、何が変更されていて何を記録しようとしているか説明して。

プッシュ（push）

Push

別の呼び方: 反映

手元のパソコンで記録した変更を、GitHubなどネット上の保管庫へ送る操作です。

出会う場面「コミットしてプッシュして」とAIに頼むとき

台所でいうとノートの控えを本店の書庫に預ける

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: 自分のPCの中と、インターネット
• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: GitHubに上げる

AIに聞くなら今の変更をコミットして、GitHubへプッシュしておいてください。

プル（pull）

Pull

別の呼び方: 取り込み

GitHubなどネット上の最新の変更を、自分のパソコンへ取り込む操作です。プッシュの反対にあたります。

出会う場面別のパソコンで続きの作業をする前、AIに「最新を取り込んで」と頼むとき

台所でいうと本店の書庫から最新版を持ち帰る

• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: 知っておきたい7つの言葉（後半：Git〜デプロイ）

AIに聞くならGitHubにある最新の変更を、このパソコンへ取り込んできて。

クローン（clone）

Clone

別の呼び方: 複製

GitHub上のリポジトリを、自分のパソコンへまるごと複製して手元で使えるようにする操作です。

出会う場面「このリポジトリをクローンしてください」と手順書に書かれているとき

台所でいうと本店のノートを丸ごと写して持ち帰る

• 図で見る: Gitで変更を記録して届ける流れ

AIに聞くならこのGitHubのURLをこのパソコンにクローンして、中身を開いて。

ステージング（git add）

Staging

別の呼び方: git add、ステージ

次に記録する変更として、どのファイルを含めるかを選んでおく段階のことです。記録する前の最終確認にあたります。

出会う場面AIから「git add で変更を選んでからコミットします」と説明されたとき

• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: GitHubに上げる

AIに聞くなら今どのファイルがステージングされているか、コミットする前に見せて。

コミットメッセージ

Commit Message

別の呼び方: コミットログ

コミットに添える「何を、なぜ変えたか」の短い説明文です。後で履歴を見返すときの手がかりになります。

出会う場面AIがコミットのたびに一言メモを書いてくれているとき

台所でいうと記録に添える一言

• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: GitHubに上げる

AIに聞くなら今回の変更内容がわかるコミットメッセージを、日本語で短く付けて。

main ブランチ

Main Branch

別の呼び方: main、master、本線

プロジェクトの本線となるブランチのことです。多くの場合、公開中のアプリの中身と直接つながっています。

出会う場面「mainに直接変更を入れないでください」と手順書にあるとき

台所でいうとお店で出している正式なページ

注意mainブランチへ直接大きな変更を入れると、動いている公開中のアプリがそのまま壊れることがあります

• 図で見る: Gitで変更を記録して届ける流れ

AIに聞くなら今どのブランチにいるか、mainなのか作業用なのか確認して教えて。

プルリクエスト（PR）

Pull Request

別の呼び方: PR、マージリクエスト

ブランチで作った変更を本線に取り込む前に、内容を見せて確認してもらうための依頼のことです。

出会う場面GitHubに「Compare & pull request」ボタンが出てきたとき

• 図で見る: Gitで変更を記録して届ける流れ

AIに聞くならこの変更のプルリクエストを作って、何を変えたか説明文に書いて。

公開／非公開リポジトリ

Public / Private Repository

別の呼び方: public repository、private repository、公開リポジトリ、非公開リポジトリ

公開リポジトリは誰でも中身を見られ、非公開リポジトリは招かれた人だけが見られます。秘密情報は公開側に置きません。

出会う場面リポジトリを作るとき「Public」か「Private」かを選ぶ画面が出たとき

注意Publicにすると誰でも中身とコミット履歴を見られるため、APIキーや個人情報が入っていないか先に確認します

講座で詳しく: GitHubに上げる

AIに聞くならこのリポジトリはPublicとPrivateどちらにすべきか、含まれる情報から判断して。

ブランチ

Branch

別の呼び方: 枝分かれ

既存の履歴から作業を分岐し、本線へ影響させずに変更を進める仕組みです。

出会う場面「ブランチを切って作業しましょう」と言われ、本線とどう違うのか迷ったとき

台所でいうと試作用の別ページ

• 図で見る: Gitで変更を記録して届ける流れ

AIに聞くならいまの本線には影響しない形で、新しいブランチを作って試してもらえますか？

マージ

Merge

別の呼び方: 統合

分かれて進んだブランチの変更履歴を一つの履歴へ統合する操作です。

出会う場面別々に進めていた変更を、「一つにまとめましょう」と言われたとき

台所でいうと試作を正式なページに書き写す

注意同じ場所を別々に変更した状態でマージすると、どちらかの変更が意図せず消えることがあります。

• 図で見る: Gitで変更を記録して届ける流れ

講座で詳しく: 知っておきたい7つの言葉（後半：Git〜デプロイ）

AIに聞くならこのブランチの変更を、本線へ安全にマージする手順を教えてもらえますか？

リモート（origin）

Remote (origin)

別の呼び方: remote、origin

自分のパソコン以外の場所にあるリポジトリのことです。GitHub上の保管庫を指すことが多く、originという名前がよく使われます。

出会う場面pushで「no such remote 'origin'」と表示されたとき

• 図で見る: Gitで変更を記録して届ける流れ

AIに聞くならこのエラーの意味と、originという接続先をどう直せばいいか教えて。

コンフリクト（衝突）

Merge Conflict

別の呼び方: conflict、マージコンフリクト、衝突

同じ箇所が別々に変更されて、Gitがどちらを残すべきか自動で決められなくなった状態のことです。人が選んで解決します。

出会う場面pullやマージのときに「CONFLICT」という表示が出たとき

台所でいうと同じ行の書き換えがかち合った状態

注意どちらを残すか選び間違えると、自分か相手の変更のどちらかが消えます。両方の中身を見てから選びます

• 図で見る: Gitで変更を記録して届ける流れ

AIに聞くならこのコンフリクトはどこで起きているか、両方の変更内容を並べて説明して。

リバート（revert）

Revert

別の呼び方: 巻き戻し

過去のコミットを取り消す変更を、新しい記録として追加する操作です。履歴は消さずに元の状態へ戻します。

出会う場面「さっきの変更を取り消して、1つ前の状態に戻して」とAIに頼むとき

AIに聞くなら直前のコミットをリバートして、1つ前の状態に戻して。履歴は消さないで。

リセット（reset）

Reset

別の呼び方: git reset、巻き戻し

コミットの記録そのものを、指定した過去の時点まで巻き戻す操作です。使い方によっては変更履歴ごと消えます。

出会う場面AIから「resetすると履歴が消えますが実行しますか」と確認されたとき

注意reset（特にhard指定）は、まだGitHubに送っていない変更やコミットを完全に消すことがあります

AIに聞くならresetを実行する前に、何が消えて何が残るのか具体的に説明して。

スタッシュ（stash）

Stash

別の呼び方: git stash、退避

作業途中の変更を、コミットせずに一時的に脇へ退避しておく操作です。あとで呼び戻して作業を再開できます。

出会う場面pullする前に「作業中の変更をstashしますか」と聞かれたとき

注意stashは一覧を積み重ねる仕組みで、放置すると自分でもどの変更か分からなくなりやすい操作です

AIに聞くなら今の作業中の変更を、stashで一時的に退避しておいてください。

ワークツリー（worktree）

Worktree

別の呼び方: git worktree、並行作業

同じリポジトリの作業コピーをもう一つ別のフォルダに作り、複数の作業を同時に独立して進められる仕組みです。

出会う場面AIを複数同時に動かすため「worktreeを使いますか」と提案されたとき

講座で詳しく: Claudeを複数同時に走らせる（マルチエージェント）

AIに聞くならこのリポジトリのworktreeを作って、別のフォルダで並行して作業できるようにして。

Issue（イシュー）

Issue

別の呼び方: 課題、チケット

GitHub上でやることやバグを1件ずつ記録しておくメモのことです。会話や進捗もその下に残せます。

出会う場面GitHubのリポジトリ画面で「Issues」というタブを見かけたとき

注意公開リポジトリのIssueは誰でも読めるため、個人情報や社内事情は書かないようにします

AIに聞くならこのバグの内容がわかるIssueを日本語で書いて、GitHubに登録して。

GitHub Actions

GitHub Actions

別の呼び方: Actions

コードをGitHubに送るたびに、テストや公開作業などを自動で実行してくれる仕組みです。

出会う場面pushするたびに画面に緑や赤のチェックマークが表示されるようになったとき

注意非公開リポジトリには毎月の無料の実行時間があり、超える使い方をすると支払い設定によっては課金されます。

AIに聞くならpushするたびにテストを自動で実行するGitHub Actionsを設定して。

環境変数

Environment Variable

別の呼び方: env、環境変数ファイル

実行環境ごとに変わる設定値を、ソースコードの外から渡す仕組みです。

出会う場面AIに「APIキーは環境変数に入れましょう」と言われ、意味が分からなかったとき

注意環境変数の値を誤ってコードやGitに書き込むと、秘密情報がそのまま流出することがあります。

• 図で見る: Webアプリの中身

講座で詳しく: APIキー、Claudeに渡してませんか？

AIに聞くならこのAPIキーは、コードに直接書かずに環境変数として設定するには、どうすればいいですか？

秘密情報

Secrets

別の呼び方: シークレット、機密情報

APIキーやパスワードなど、漏れると不正利用につながるため公開しない値です。

出会う場面APIキーやパスワードを、そのままAIとの会話に貼ろうとしたとき

注意APIキーやパスワードを会話やコードに直接書くと、その時点で漏えいのリスクが生まれます。

• 図で見る: エラーの読み方
• 図で見る: Webアプリの中身

講座で詳しく: APIキー、Claudeに渡してませんか？

AIに聞くならこのAPIキーを会話に貼らずに安全に渡す方法を、順番に教えてもらえますか？

サーバー

Server

求めに応じてページやデータを送り返す、ネット上で動き続けるコンピューターです。Vercelなどのサービスが用意してくれるので、自分で機械を買う必要はありません。

出会う場面「サーバーにデプロイします」とAIや手順書に言われたとき

台所でいうとお客から見えない厨房

• 図で見る: Webアプリの中身

講座で詳しく: ネットに公開する（デプロイ）

AIに聞くならサーバーという言葉が今の文脈でどういう意味か、たとえ話を使って教えてください。

URL

URL

別の呼び方: ユーアールエル、ウェブアドレス

Web上の住所のことです。httpsから始まり、ブラウザに入力するとその場所のページが開きます。

出会う場面「このURLを開いてください」とAIに言われたとき

台所でいうとお店の住所

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: 自分のPCの中と、インターネット

講座で詳しく: ネットに公開する（デプロイ）

AIに聞くならこのURLの意味と、末尾に付いている記号（?や/）が何を表しているか教えてください。

本番環境

Production environment

別の呼び方: プロダクション、本番

実際の利用者が使う、公開された状態の環境です。ここでの失敗はすぐ利用者に届くため、変更前の確認がとくに大切です。

出会う場面「本番に反映します」とAIから確認されたとき

台所でいうとお店の客席

注意本番環境への変更は利用者に即座に届くため、事前確認なしに実行させないでください。

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: 自分のPCの中と、インターネット

AIに聞くなら今からの変更は本番環境に影響しますか。先にローカルや開発環境だけで確認できないか教えてください。

開発環境（ローカル環境）

Development environment (local environment)

別の呼び方: ローカル環境、dev環境

自分のパソコンの中だけで動く、試作用の環境です。ここで壊しても、公開中のアプリには影響しません。

出会う場面AIから「ローカルでは動くのに本番で動きません」と相談を受けたとき

台所でいうと自宅の台所そのもの

• 図で見る: 自分のPCの中と、インターネット

AIに聞くならローカルでは動くのに本番で動かない場合、まず何を疑えばよいか教えてください。

Vercel

Vercel

別の呼び方: バーセル、ヴァーセル

GitHubのリポジトリをつなぐだけで、作ったサイトをネット上に公開できるサービスです。個人の小さな利用なら無料の範囲で始められます。

出会う場面「Vercelでデプロイしましょう」と手順に出てきたとき

台所でいうと店舗と配膳をまとめて貸してくれる会社

注意つないだリポジトリの本番用のブランチ（ふつうはmain）へpushすると、そのまま本番のURLに反映されます。

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: 自分のPCの中と、インターネット

講座で詳しく: ネットに公開する（デプロイ）

AIに聞くならVercelで公開するまでの手順を、GitHubとの連携から順番に説明してください。

APIキー

API key

別の呼び方: APIトークン、鍵

サービスを利用する権利を示す合言葉です。他人に知られると、勝手に使われて高額な請求が来ることがあります。

出会う場面AIのAPIを使う設定で、鍵の文字列を入力してほしいと言われたとき

台所でいうと仕入れ先の会員カード

注意APIキーをそのままチャットやコードに貼ると漏れて、他人に使われ高額請求される恐れがあります。

• 図で見る: Webアプリの中身

講座で詳しく: APIキー、Claudeに渡してませんか？

AIに聞くならこのAPIキーを安全に扱うために、コードに直接書かず環境変数として設定するやり方を教えてください。

従量課金

Usage-based billing (pay-as-you-go)

別の呼び方: pay-as-you-go、使った分だけ課金

使った分だけ料金がかかる支払い方式です。多くのAPIがこの方式なので、使いすぎると請求額が想定以上になることがあります。

出会う場面AIのAPIを使い始めるときに、料金体系を説明されたとき

台所でいうと使った分だけ来る請求書

注意上限を設定しないまま使い続けると、気づかないうちに高額な請求が発生することがあります。

講座で詳しく: 実装編：PubMed APIで論文検索ツールを作る

AIに聞くならこの従量課金のAPIで、想定外の高額請求を防ぐために設定すべき上限やアラートを教えてください。

無料枠（フリープラン）

Free tier

別の呼び方: フリープラン、Hobbyプラン

一定の範囲までなら無料で使える利用枠のことです。超えると有料プランへの切り替えが必要になります。

出会う場面Vercelなどのサービスで「無料プランには制限があります」と案内されたとき

注意無料枠を超えた利用に気づかないまま放置すると、想定外の課金が発生する場合があります。

講座で詳しく: Vercelで世界に出す

AIに聞くならこのサービスの無料枠の範囲を教えてください。個人で使う分には無料枠内で足りるか判断したいです。

デプロイ

Deploy

別の呼び方: 公開する、リリース

作ったアプリをVercelなどの実行環境へ送り届け、URLで誰でも使える状態にする作業です。

出会う場面アプリが動くようになり、「これをネットに公開しましょう」と言われたとき

台所でいうと料理をお店に出す

注意デプロイすると誰でもアクセスできる状態になるため、公開前にAPIキーや患者情報などの秘密情報が含まれていないか確認が必要です。

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: 自分のPCの中と、インターネット

講座で詳しく: ネットに公開する（デプロイ）

AIに聞くならこのアプリをVercelにデプロイする手順を、一つずつ確認しながら一緒に進めてもらえますか？

デプロイメント

Deployment

別の呼び方: 公開版

実行環境に反映された結果、いま実際に稼働していて誰でも使える1つのバージョンを指します。

出会う場面「本番のデプロイメントにエラーが出ています」という報告を受けたとき

注意本番デプロイメントには実際の利用者がアクセスしています。停止や変更の前に影響範囲とタイミングの確認が必要です。

AIに聞くならいまの本番デプロイメントで何が起きているのか、ログを見て教えてもらえますか？

ロールバック

Rollback

別の呼び方: 巻き戻し、切り戻し

公開後の問題に備え、アプリや設定を安全だった以前の版へ戻す操作です。

出会う場面公開した直後に不具合が見つかり、前の状態へ戻したくなったとき

台所でいうと前の献立に戻す

注意アプリを前の版に戻しても、データベースの中身は戻りません。データの形を変えた後に戻すと、動かなくなることがあります。

AIに聞くなら直前の変更が原因で不具合が出ています。安全だった前の版へロールバックする手順を教えてください。

アクセス解析

Analytics

別の呼び方: アナリティクス、GA

利用状況を計測し、仮説や改善判断につながる傾向を読み取る活動です。

出会う場面アプリを公開した後、「誰か使ってくれているのかな」と気になったとき

注意利用者の行動を計測する際、個人を特定できる情報まで収集していないか確認する必要があります。

講座で詳しく: アクセスをMCPで自動で見る

AIに聞くなら公開したアプリのアクセス状況を、毎朝自動で簡単にまとめてもらえますか？

クライアント

Client

サーバーにお願い（リクエスト）を送る側のことです。Webアプリでは、利用者のブラウザがクライアントにあたります。

出会う場面システムの構成図で「クライアント」と「サーバー」が矢印でつながれているのを見たとき

• 図で見る: Webアプリの中身

AIに聞くならこの構成図のクライアントとサーバーは、それぞれ何をしていて、どうやりとりしているか教えてください。

フロントエンド

Frontend

別の呼び方: フロント

利用者が実際に見て操作する、画面側の部分です。デザインやボタンの動きなど、目に見える範囲を担当します。

出会う場面「フロントエンドの見た目を直しました」とAIから報告されたとき

台所でいうと客席に出る皿と盛り付け

• 図で見る: Webアプリの中身

AIに聞くなら今回直したのはフロントエンドとバックエンドのどちらですか。画面に見えない変更が含まれていれば教えてください。

バックエンド

Backend

別の呼び方: サーバーサイド

サーバー側でデータの保存や計算を担う、利用者には見えない部分です。ログインや保存の仕組みはここで動きます。

出会う場面「バックエンドの処理でエラーが出ています」と言われたとき

台所でいうと厨房の奥の仕込み

• 図で見る: Webアプリの中身

AIに聞くならこのエラーはバックエンド側の問題ですか。画面（フロントエンド）側では直せない場合の対処法を教えてください。

ホスティング

Hosting

作ったサイトやアプリを、ネット上のどこかに置いて公開してもらうサービスの総称です。Vercelもこの一種です。

出会う場面公開先をVercel以外にも広げたいとAIに相談したとき

AIに聞くなら個人が無料で使えるホスティングサービスにはどんな選択肢があり、それぞれ何が向いているか教えてください。

クラウド

Cloud

別の呼び方: クラウドサービス

自分の機械ではなく、ネット越しに借りて使うコンピューターの資源のことです。サーバーやデータベースの多くはここで動きます。

出会う場面「データはクラウドに保存されます」と説明されたとき

AIに聞くならこのサービスで言う「クラウド」とは具体的にどこに何が保存されているのか、分かりやすく教えてください。

プレビュー環境（プレビューURL）

Preview environment / preview URL

別の呼び方: プレビューURL、preview deployment

本番に出す前に、変更を確かめるための一時的な公開先です。Vercelでは変更のたびに専用のURLが作られます。

出会う場面GitHubで変更を送ったあと、Vercelから一時的なURLが発行されたとき

台所でいうと関係者だけの試食会

• 図で見る: 自分のPCの中と、インターネット

AIに聞くならこのプレビューURLと本番URLは何が違いますか。プレビューで確認してから本番に反映する手順も教えてください。

ドメイン

Domain

example.comのような、ネット上の場所を表す名前です。費用を払って取得し、URLの一部として使います。

出会う場面「独自ドメインを設定したい」と考え始めたとき

台所でいうとお店の看板の名前

注意ドメインは年額の更新費用がかかります。更新を忘れると失効し、他人に取得され使えなくなることがあります。

• 図で見る: 自分のPCの中と、インターネット

講座で詳しく: ネットに公開する（デプロイ）

AIに聞くなら独自ドメインを取得してVercelに設定するまでの手順と、必要な費用の目安を教えてください。

HTTPS（SSL）

HTTPS (SSL)

別の呼び方: SSL証明書

通信の内容を暗号化して送る仕組みです。鍵のマークは通信が守られている印で、サイトそのものが安全という意味ではありません。

出会う場面公開後、URLの横のアイコンで暗号化されているか確認するとき

台所でいうと封をして届ける出前

• 図で見る: 自分のPCの中と、インターネット

AIに聞くならこのサイトはHTTPSで公開されていますか。Vercelなどのホスティングで自動的に有効になるのか教えてください。

Supabase

Supabase

別の呼び方: スーパーベース

データベース、ログイン機能、ファイル保存をまとめて提供するサービスです。保存機能を作るときによく使われます。

出会う場面「保存機能を付けたいのでSupabaseを使います」とAIから提案されたとき

台所でいうと台帳と会員受付をまとめて貸してくれる業者

注意初期設定のままだとテーブルが全世界に公開された状態になり、他人にデータを読み書きされる恐れがあります。

• 図で見る: Webアプリの中身

講座で詳しく: データベースに鍵をかける（RLS）

AIに聞くならSupabaseを使ってデータを保存する場合、最低限やっておくべきセキュリティ設定を教えてください。

RLS（行レベルセキュリティ）

Row Level Security (RLS)

別の呼び方: Row Level Security、行レベルセキュリティ

データベースの行ごとに「誰が読み書きできるか」を決める仕組みです。Supabaseでは有効にしないと誰でも中身を見られます。

出会う場面Supabaseのダッシュボードで「RLS disabled」という赤い警告を見たとき

台所でいうと台帳の行ごとの見せる相手の決まり

注意RLSを設定しないままデータベースを公開すると、他人が全データを自由に読み書きできる状態になります。

• 図で見る: Webアプリの中身

講座で詳しく: データベースに鍵をかける（RLS）

AIに聞くならこのテーブルにRLSを有効化し、自分のデータだけ読み書きできるポリシーを書いてください。設定後のテスト手順も教えてください。

Basic認証（簡易パスワード保護）

Basic authentication

別の呼び方: ベーシック認証、パスワード保護

サイトにアクセスするとブラウザがID・パスワードの入力を求め、正しく入力した人だけが中身を見られるようにする仕組みです。本格的なログイン機能より手軽に設定できます。

出会う場面「本格的なログインではなく、簡易にパスワードだけかけたい」と考えたとき

注意簡易的な保護であり、医療情報など本当に守るべき情報の保護には使わないでください。

AIに聞くならこのアプリのURLに簡易的なパスワード保護（Basic認証）をかける方法を教えてください。

監視

Monitoring

別の呼び方: モニタリング、死活監視

稼働状況、エラー、性能を継続的に観測し、問題を早く発見する仕組みです。

出会う場面公開したアプリが、いつの間にか止まっていないか心配になったとき

AIに聞くならアプリが止まったりエラーが増えたりしたときに、すぐ気づける仕組みを提案してもらえますか？

DNS

DNS

別の呼び方: ディーエヌエス

example.comのようなドメイン名を、実際のサーバーの番号に対応づける仕組みです。独自ドメインを使うときに設定します。

出会う場面独自ドメインをホスティングに接続する設定画面を見たとき

AIに聞くなら独自ドメインをこのホスティングに接続するために、DNSでどんな設定を追加すればよいか教えてください。

IPアドレス

IP address

ネット上のコンピューター一つ一つに割り当てられた番号です。DNSはこの番号とドメイン名を結びつけています。

出会う場面DNSの設定画面で数字の並びを入力するよう言われたとき

AIに聞くならこの設定で入力するIPアドレスは何を表しているのか、初心者向けに教えてください。

Cloudflare

Cloudflare

別の呼び方: クラウドフレア

サイトの公開、ドメインの管理、高速な配信、攻撃からの防御をまとめて提供するサービスです。

出会う場面公開先やドメイン管理の選択肢としてCloudflareの名前が挙がったとき

講座で詳しく: 知っておきたい7つの言葉（後半：Git〜デプロイ）

AIに聞くならVercelとCloudflareは何が違い、どちらを選べばよいか、この用途に合わせて教えてください。

GitHub Pages

GitHub Pages

GitHubのリポジトリから、HTML/CSS/JSだけのシンプルなサイトを無料で公開できる機能です。

出会う場面公開先の候補としてVercel以外の選択肢を調べたとき

講座で詳しく: 知っておきたい7つの言葉（後半：Git〜デプロイ）

AIに聞くならこのサイトはGitHub PagesとVercel、どちらで公開するのが向いていますか。違いを教えてください。

ステージング環境

Staging environment

本番とほぼ同じ条件で、公開する前に最終確認をするための環境です。個人開発では省略されることも多いです。

出会う場面チームでの開発手順に「まずステージングで確認」と書かれていたとき

AIに聞くなら個人開発でもステージング環境を用意した方がよい場面はどんなときか教えてください。

CDN

CDN (Content Delivery Network)

別の呼び方: コンテンツデリバリーネットワーク

世界各地にサイトのコピーを置き、利用者に近い場所から速く届ける仕組みです。表示速度を上げるために使われます。

出会う場面サイトの表示速度が話題になり、CDNという言葉が出てきたとき

AIに聞くなら今のホスティングにはCDNが最初から含まれていますか。表示速度で困ったときに確認すべき点を教えてください。

サーバーレス

Serverless

サーバーを自分で管理せず、呼ばれたときだけ処理が動く仕組みです。Vercelの一部の機能もこの方式です。

出会う場面「この処理はサーバーレスで動きます」と構成の説明で出てきたとき

AIに聞くならサーバーレスと、サーバーを常に立てておく方式は何が違いますか。この構成ではどちらを使っているか教えてください。

レート制限

Rate limit

別の呼び方: rate limiting

一定時間に使える回数の上限です。超えると一時的に使えなくなり、意図しない高額請求を防ぐ役目もあります。

出会う場面「429エラー」が出た、またはAI機能を公開する前に設定を求められたとき

注意レート制限を設定しないままAI機能を公開すると、悪用や事故で想定外の高額請求が発生することがあります。

講座で詳しく: 入力と出力を信用しない

AIに聞くならこのAPIにレート制限と利用上限アラートを設定してください。設定後、正しく動くか確認する方法も教えてください。

Vibe Coding

Vibe Coding

別の呼び方: バイブコーディング

自然言語でAIに実装を依頼し、人間が結果を確認しながらソフトウェアを作る開発アプローチです。

出会う場面「Vibe Codingで作りました」という言葉を初めて聞いたとき

講座で詳しく: そもそもVibe Codingってなに？

AIに聞くならVibe Codingという開発スタイルが、これまでのプログラミングと何が違うのか教えてください。

人間の判断

Human Judgment

別の呼び方: 最終確認

文脈、根拠、影響を人間が評価し、AIへ委ねず最終的な選択と責任を引き受けることです。

出会う場面AIが出した案をそのまま採用していいのか迷ったとき

AIに聞くならこの案を採用する前に、私自身が確認すべき目的や安全面のポイントを教えてください。

ダミーデータ

Dummy Data

別の呼び方: 架空データ、テストデータ

実在する人や機密情報を表さず、開発やテストのために人工的に用意したデータです。

出会う場面試作アプリに入れるサンプルとして、本物の患者情報を使おうとしたとき

注意実在する人物や患者の情報をダミーデータとして使うと、そのまま情報漏えいにつながります。

AIに聞くなら本物の情報を使わずに、実在しない人物の架空データで試作を進めてもらえますか？

コンポーネント

Component

別の呼び方: UIパーツ、部品

見た目、状態、振る舞いをまとめ、再利用できる単位にしたUI部品です。

出会う場面AIが「ここはコンポーネントに分けましょう」と提案してきたとき

講座で詳しく: コンポーネント、状態、デザイントークン

AIに聞くならこのボタンは他の画面でも使い回すので、共通のコンポーネントとして切り出してもらえますか？

API

Application Programming Interface

別の呼び方: エーピーアイ、Web API、REST API

別のサービスや機能と、決められた形式でデータを交換する接点です。

出会う場面AIから「外部のAPIと連携しましょう」と言われ、課金が心配になったとき

注意従量課金のAPIは呼び出し回数に応じて費用が発生し、想定外の高額請求につながることがあります。

• 図で見る: Webアプリの中身

講座で詳しく: 実装編：PubMed APIで論文検索ツールを作る

AIに聞くならこのAPIは無料ですか。有料の場合、想定外に高額請求されないよう上限を設定する方法を教えてください。

クラス

CSS Class

別の呼び方: CSSクラス

複数のHTML要素へ同じスタイルや役割を適用するための名前です。

出会う場面同じ見た目のボタンが複数あり、「クラスでまとめましょう」と言われたとき

AIに聞くならこのクラス名は、他のどの部分にも使われていますか。変更したときの影響範囲を教えてください。

ダークモード

Dark Mode

別の呼び方: 夜間モード、ダーク表示

暗い背景を基調に、明度とコントラストを再設計した表示テーマです。

出会う場面自分のアプリを「ダークモードにも対応させたい」と思ったとき

AIに聞くならこのページに、明るい画面と暗い画面を切り替えられるダークモードを追加してもらえますか？

データベース

Database

別の呼び方: DB、データベース管理システム

アプリが扱う情報を一定の構造で保存し、必要な条件で読み書きする仕組みです。

出会う場面「入力した情報を保存できるようにして」とAIに頼んだとき

台所でいうと予約台帳と在庫台帳

注意個人情報を扱うデータベースは、公開設定を誤ると誰でも中身を見られる状態になることがあります。

• 図で見る: Webアプリの中身

講座で詳しく: 知っておきたい7つの言葉（後半：Git〜デプロイ）

AIに聞くならこの情報を保存するデータベースには、どんな種類があり、どれが向いていますか？

認証

Authentication

別の呼び方: ログイン認証、サインイン

ログイン情報などを使い、アクセスしている人が誰かを確認する仕組みです。

出会う場面自分のアプリに「ログイン機能を付けたい」と思ったとき

注意認証の仕組みが弱いと、他人が本人になりすまして情報を見たり操作したりできてしまいます。

• 図で見る: Webアプリの中身

講座で詳しく: ログインを、今の常識で作る

AIに聞くならパスワードだけに頼らない、いまの基準に沿ったログインの仕組みを提案してもらえますか？

認可

Authorization

別の呼び方: 権限判定

確認済みの利用者に、どのデータや操作を許可するかを判定する仕組みです。

出会う場面「ログインはできるのに、他人のデータまで見えてしまう」と気づいたとき

注意認可の確認が抜けていると、ログインさえできれば他人のデータも操作できてしまうことがあります。

AIに聞くならログインした本人のデータしか見えないように、認可の確認をどこに入れるべきか教えてください。

停止基準

Stop Criteria

別の呼び方: 停止条件、ストップ条件

異常や許容できない危険を検知したとき、作業や公開を止めるために事前に定める条件です。

出会う場面AIに大きな変更を頼む前に、「どこまで進んでいいのか」迷ったとき

AIに聞くならこの変更を始める前に、どんな異常が起きたら作業を止めるべきか、基準を一緒に決めてもらえますか？

DOM

Document Object Model

HTMLをブラウザが要素の木構造として扱うための表現です。

出会う場面「DOMを書き換える」という説明が出て、HTMLと何が違うのか分からなかったとき

AIに聞くならDOMとHTMLの違いを、専門用語を使わずに一言で説明してもらえますか？

イベント

Event

別の呼び方: イベントリスナー

クリックや入力などの発生を検知し、処理へ渡すブラウザの仕組みです。

出会う場面「クリックイベントを検知する」という説明の意味が分からなかったとき

AIに聞くならボタンを押したときに処理が動く仕組みを、初心者向けに説明してもらえますか？

CSS変数

CSS Custom Properties

別の呼び方: CSSカスタムプロパティ

色や余白などの値へ名前を付け、複数箇所で共有する仕組みです。

出会う場面コードの中に「--main-color」のような記述があり、意味が分からなかったとき

AIに聞くならこのCSS変数はどこで使われていて、値を変えると見た目がどう変わりますか？

アクセシビリティ

Accessibility

別の呼び方: a11y、アクセシビリティ対応

能力や環境にかかわらず、情報と操作へ到達できるようにする設計です。

出会う場面「スクリーンリーダーでも使えるようにしてほしい」という要望を受けたとき

AIに聞くならキーボードだけの操作や読み上げソフトでも使えるか、アクセシビリティの観点で確認してもらえますか？

SQL

Structured Query Language

別の呼び方: エスキューエル、構造化問い合わせ言語

主にリレーショナルデータベースへ、取得や更新の条件を伝える問い合わせ言語です。

出会う場面「SQLで検索条件を書く」という説明が出て、専門的すぎると感じたとき

注意入力欄の文字をそのままSQLに組み込むと、意図しないデータ取得や改ざんを許すことがあります。

AIに聞くならSQLという言葉の意味を、専門用語を使わずに一言で説明してもらえますか？

NoSQL

Not Only SQL

別の呼び方: ノーエスキューエル

表の関係に限定せず、文書やキーと値などの形でデータを保存する方式の総称です。

出会う場面「このデータはNoSQLに向いています」とAIに言われ、SQLとの違いが分からなかったとき

AIに聞くならNoSQLとSQLデータベースの違いを、自分のアプリの例で説明してもらえますか？

エンドポイント

API Endpoint

別の呼び方: APIエンドポイント

APIが特定のデータや操作を受け付ける、URLとHTTPメソッドの組み合わせです。

出会う場面APIの説明で「このエンドポイントを呼び出す」という言葉が出てきたとき

• 図で見る: Webアプリの中身

AIに聞くならこのAPIには、どんなエンドポイントがあり、それぞれ何ができるのか教えてもらえますか？

HTTP

Hypertext Transfer Protocol

別の呼び方: エイチティーティーピー

ブラウザやアプリとサーバーが、要求と応答を交換するための通信規約です。

出会う場面URLが「https://」で始まる理由を、AIに聞いてみたとき

• 図で見る: Webアプリの中身

AIに聞くならHTTPとHTTPSの違いを、専門用語を使わずに説明してもらえますか？

セッション

Session

別の呼び方: ログイン状態

認証後の利用者状態を複数のリクエストにまたがって安全に維持する仕組みです。

出会う場面ログインしたはずなのに、ページを移動すると毎回ログアウトされるとき

AIに聞くならログイン状態をページ移動後も保つには、セッションをどう扱えばいいか教えてもらえますか？

LLM

Large Language Model

別の呼び方: 大規模言語モデル、エルエルエム、言語モデル

大量の文章を学習し、次に続く言葉を予測する形で受け答えするAIの中身です。ChatGPTやClaudeという名前は、このLLMを使ったサービスの名前です。

出会う場面ChatGPT・Claude・Geminiの違いを聞かれたとき

• 図で見る: コーディングエージェントの動き方

講座で詳しく: 知っておきたい7つの言葉（前半：LLM〜IDE）

AIに聞くならChatGPTとClaudeとGeminiは何が違うの？コーディングに向いているのはどれ？

コーディングエージェント

Coding Agent

別の呼び方: AIエージェント

指示を受けて、自分でファイルを作ったりコマンドを実行したりしながら作業を進めるAIです。質問に答えるだけのAIより一歩踏み込んで、実際に手を動かします。

出会う場面「Claude Codeやコーディングエージェントを使いましょう」と言われたとき

台所でいうと自分で包丁も火も使う料理人

• 図で見る: コーディングエージェントの動き方

講座で詳しく: 知っておきたい7つの言葉（前半：LLM〜IDE）

AIに聞くならコーディングエージェントって普通のチャットAIと何が違うの？何をどこまで任せていいの？

Claude Code

Claude Code

別の呼び方: クロードコード、claude code cli

Anthropic社が作っているコーディングエージェントです。ターミナルやエディタ、デスクトップアプリから話しかけて、ファイルの読み書きやコマンド実行を任せられます。

出会う場面「Claude Codeを入れましょう」と案内されたとき

台所でいうと料理人の一人

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: コーディングエージェントの動き方

講座で詳しく: Claude Codeを準備する

AIに聞くならClaude Codeって何ができるの？普通のChatGPTと比べて何が便利になるの？

プロンプト

Prompt

別の呼び方: 指示文、AIへの指示

AIに何をしてほしいかを伝える指示文です。何を、どう、どこまで書くかで、返ってくる結果の質が変わります。

出会う場面「プロンプトを工夫してみましょう」と言われたとき

台所でいうと料理人への頼みごと

• 図で見る: 作ってから公開するまでの全体地図
• 図で見る: コーディングエージェントの動き方

講座で詳しく: ChatGPTで最初の1本

AIに聞くならこのお願いの仕方で伝わりにくい部分があれば指摘して。目的と条件を足した文に直して。

コンテキスト

Context

別の呼び方: 文脈

AIがその時点で見えている情報の全体のことです。これまでの会話、読み込んだファイル、伝えた指示がすべて含まれます。

出会う場面「コンテキストが足りていない」とAIから言われたとき

台所でいうと料理人がいま見ているメモと会話

• 図で見る: コーディングエージェントの動き方

講座で詳しく: Context Engineering（何を読ませ、何を捨てるか）

AIに聞くなら今のあなたのコンテキストに、この作業に必要な情報は足りている？足りないなら何を渡せばいい？

モデル

Model

別の呼び方: AIモデル

AIの本体そのものを指す言葉です。Opus、Sonnet、Haikuのように種類があり、それぞれ考える深さと料金、返ってくる速さが違います。

出会う場面「どのモデルを使いますか」と選択肢が出たとき

• 図で見る: コーディングエージェントの動き方

講座で詳しく: 「俺もアプリ作れるんじゃね」を体験する

AIに聞くならこの作業に向いているのは速いモデルとじっくり考えるモデル、どっち？理由も教えて。

ハルシネーション

Hallucination

別の呼び方: ハルシネ、AIの嘘、事実と異なる生成

AIが、もっともらしい言い方で事実と違う内容を出してしまうことです。自信ありげな口調と正しさは別物だと覚えておく必要があります。

出会う場面AIの回答に「本当にこの通りなのかな」と違和感を持ったとき

台所でいうと自信満々の間違った味付け

注意AIの説明を裏取りせずそのまま業務や患者説明に使うと、誤った情報を広めてしまう危険があります。

• 図で見る: コーディングエージェントの動き方

講座で詳しく: AIはなぜ、自信たっぷりに間違えるのか

AIに聞くなら今の答えの根拠は何？確認できる出典があれば教えて。自信がない部分は正直に言って。

CLAUDE.md

CLAUDE.md

別の呼び方: クロードエムディー

Claude Codeが作業を始める前に毎回読み込む、プロジェクトの説明や約束事を書いておくファイルです。一度書けば、次からは説明し直さずに済みます。

出会う場面初期設定で「CLAUDE.mdを作りましょう」と案内されたとき

台所でいうと台所に貼った店のルール

• 図で見る: コーディングエージェントの動き方

講座で詳しく: CLAUDE.md（約束事を育てる）

AIに聞くならこのプロジェクトの説明と、いつも気をつけてほしいことをCLAUDE.mdにまとめて。

権限（パーミッション）

Permission

別の呼び方: パーミッション

AIにどの操作までを許すかを決める設定です。ファイルの書き換えやコマンド実行など、影響の大きい操作ほど確認を求められます。

出会う場面「〇〇を実行してもよいですか？」と確認されたとき

台所でいうと料理人に任せる範囲の取り決め

• 図で見る: コーディングエージェントの動き方

講座で詳しく: 権限モードの選び方

AIに聞くなら今から実行しようとしている操作は、何にどんな影響を与える？安全なら理由も添えて教えて。

承認

Approval

別の呼び方: approve、承認する

AIが操作を実行する前に、人がその内容を確認して実行してよいと許可することです。毎回の確認は面倒でも、内容を見ずに押し続けると事故のもとになります。

出会う場面内容を確認せずに「Yes」を連打していると気づいたとき

台所でいうと店主のOKサイン

注意内容を見ずに「次から確認しない」を選び続けると、危険な操作まで確認なしで通るようになります。

• 図で見る: コーディングエージェントの動き方

AIに聞くならこの操作を承認する前に、何が変わるか一言でまとめて。取り返しがつかない操作かどうかも教えて。

スラッシュコマンド

Slash Command

「/」から始まる、決まった操作を呼び出す命令です。`/clear`のように、会話をリセットするなどの定型作業に使います。

出会う場面会話を整理したいときに`/clear`のような入力を見たとき

講座で詳しく: 毎回頼むのをやめる（Hooks・Skills・Plugins）

AIに聞くなら使えるスラッシュコマンドの一覧を教えて。会話を整理したいときはどれを使えばいい？

Cowork

Cowork

別の呼び方: コワーク

Claudeのアプリの中で、メールやタスク、資料整理といった日常業務を相談しながら進めるための画面です。がっつり開発するClaude Codeとは使い分けます。

出会う場面Claudeのアプリで「Cowork」という画面に気づいたとき

AIに聞くならこの作業は日常業務の相談なのでCoworkで進めたい。何から始めればいい？

アーティファクト

Artifact

別の呼び方: アーティファクト機能

Claude.aiで会話の隣に、生成したアプリやコードがそのまま表示され動かせる画面のことです。

出会う場面Claude.aiでアプリを作ってもらい、右側に画面が現れたとき

AIに聞くならこのArtifactに表示されているアプリを、私のPCにあるコードとして保存する方法を教えて。

PROGRESS.md

PROGRESS.md

作業の進み具合をAIに書かせておくファイルです。次回そこを読ませるだけで続きから再開できます。

出会う場面長い作業を何日かに分けて進める、と決めたとき

講座で詳しく: 会話を切る・畳む・続ける（/clear・/compact・再開）

AIに聞くならこのフォルダにPROGRESS.mdを作って、作業のたびに進捗を追記していくようにして。

OAuth

OAuth

パスワードを直接渡さずに、ブラウザ経由で安全にログイン・許可を行う認証の仕組みです。

出会う場面Claude Codeの初回起動でブラウザが自動で開き、認証画面が出たとき

AIに聞くならOAuthの認証画面でブラウザが開かない場合、どう対処すればいいか教えて。

Codex

Codex

別の呼び方: OpenAI Codex、コーデックス

OpenAI社が出しているコーディングエージェントです。ChatGPTと同じ会社が提供している、Claude Codeと似た立ち位置の道具です。

出会う場面道具を比較する話の中で「CodexとClaude Codeどっちがいい？」と聞かれたとき

講座で詳しく: 知っておきたい7つの言葉（前半：LLM〜IDE）

AIに聞くならClaude CodeとCodex、何が違うの？両方使い分けるとしたらどう役割分担すればいい？

コンテキストウィンドウ

Context Window

別の呼び方: 文脈の上限

AIが一度に扱える情報量の上限のことです。会話やファイルの内容がこの上限に近づくと、AIは古い情報を忘れたり要約したりし始めます。

出会う場面長い会話の途中で、AIが前に伝えたことを忘れたように感じたとき

台所でいうと作業台の広さ

• 図で見る: コーディングエージェントの動き方

講座で詳しく: Context Engineering（何を読ませ、何を捨てるか）

AIに聞くなら今のコンテキストウィンドウはどのくらい埋まってる？残しておいてほしい情報があれば先に言うので教えて。

トークン

Token

別の呼び方: トークン数

AIが文章を数えるときの単位です。料金や、一度に扱える情報量の上限は、この単位で測られます。

出会う場面「トークンを消費します」と料金や上限の話で出てきたとき

台所でいうとメモの文字を数える単位

注意長い会話や大きなファイルを読み込ませるとトークン消費が増え、想定より高額な請求につながることがあります。

• 図で見る: コーディングエージェントの動き方

講座で詳しく: トークン化とコンテキストウィンドウ

AIに聞くなら今の作業でトークンをたくさん使いそうな部分はどこ？減らせる工夫があれば教えて。

Planモード

Plan Mode

別の呼び方: プランモード、計画モード

コードを変更せず、まず計画だけを立てさせるモードです。大きな変更に入る前にこのモードで方針を確認すると、想定外の失敗を減らせます。

出会う場面大きめの変更を頼む前に「Planモードで進めますか」と案内されたとき

台所でいうと作る前に献立を相談する時間

注意ファイルを変更しないだけで、外部への影響はゼロではありません。Web検索など外向きの操作は計画中でも起こりえます。

• 図で見る: コーディングエージェントの動き方

講座で詳しく: Plan mode（プランモード）　先に考えさせる

AIに聞くならこの変更、まずPlanモードで進め方を計画してから見せて。実際の変更はまだしないで。

チェックポイント（巻き戻し）

Checkpoint

別の呼び方: rewind、巻き戻し

AIが変更を加える前の状態に戻すための仕組みです。`/rewind`のような操作で、失敗した作業をやり直せます。

出会う場面作業が失敗して「さっきの状態に戻したい」と思ったとき

台所でいうと手を入れる前の写真

注意巻き戻しはファイルの編集には効きますが、コマンドで直接消したり動かしたりしたファイルは追跡されず戻せないことがあります。

• 図で見る: コーディングエージェントの動き方

講座で詳しく: Checkpoints（チェックポイント）　巻き戻す

AIに聞くなら今の変更を試す前に、失敗したときすぐ戻せるように状態を確認しておいて。

MCP

Model Context Protocol

別の呼び方: エムシーピー

AIをNotionやカレンダーなど外部のサービスや道具とつなぐための共通の規格です。これを設定すると、AIに他のサービスも扱ってもらえるようになります。

出会う場面「NotionやGitHubと連携しましょう」とMCPの設定を案内されたとき

台所でいうと外の業者とつなぐ共通の電話線

注意提供元がわからないMCPサーバーをつなぐと、意図しないデータの持ち出しや操作を許してしまう危険があります。

講座で詳しく: NotionやカレンダーとClaudeをつなぐ（MCP）

AIに聞くならこのサービスとClaudeをMCPでつなぐには何が要るか教えて。安全に設定する手順も一緒に。

バイパス権限モード（自動承認）

Bypass Permissions Mode

別の呼び方: bypass mode、バイパスモード、自動承認モード

確認をすべて省略して、AIをノンストップで動かすモードです。速く進みますが、想定外のコマンドが実行される危険も一緒に引き受けます。

出会う場面「バイパス権限モードを許可しますか」と設定で見かけたとき

注意手順が固まっていない新しい作業や本番のデータベースを触る作業でバイパスモードを使うと、確認なしに取り返しのつかない操作が実行される危険があります。

講座で詳しく: 権限モードの選び方

AIに聞くならこの作業はバイパスモードで回しても安全か教えて。危ない操作が混ざりそうなら先に指摘して。

学習利用設定

Model Improvement Setting

別の呼び方: Model Improvement、学習に使う設定

自分がAIに入力した内容を、AIの学習に使わせるかどうかを選べる設定です。個人向けのプランではオンになっている場合があります。

出会う場面claude.aiの設定でModel Improvementの項目を見かけたとき

注意学習利用設定がオンのまま患者情報や社内の機密情報を入力すると、意図せずAIの学習データに使われてしまう危険があります。

講座で詳しく: AIエージェントの安全運転

AIに聞くなら今のアカウントの学習利用設定がオンかオフか、確認手順を教えて。

サンドボックス

Sandbox

別の呼び方: /sandbox

AIによる書き込みの範囲をOSレベルで制限する隔離機能です。ただし読み取りまでは制限しません。

出会う場面「/sandboxを有効にする」という設定を見かけたとき

注意サンドボックスは書き込みしか守らないため、秘密情報の読み取りまで防げると誤解しないでください。

講座で詳しく: APIキー、Claudeに渡してませんか？

AIに聞くならサンドボックスを有効にした場合、書き込みと読み取りでそれぞれ何ができて何ができないか教えて。

コンパクト（会話の要約）

Compaction

別の呼び方: /compact、auto-compaction

会話が長くなったとき、これまでのやり取りを要約して情報量を詰め直す仕組みです。作業を続けながら、上限に達するのを防ぎます。

出会う場面長い作業の途中で会話が自動で要約されたと感じたとき

注意要約されると、会話の早い段階で伝えた細かい指示や決定事項が失われます。残したい内容はCLAUDE.mdに書いておく必要があります。

• 図で見る: コーディングエージェントの動き方

講座で詳しく: Context Engineering（何を読ませ、何を捨てるか）

AIに聞くなら`/compact`でこれまでの会話を要約して。ただし今取り組んでいる変更点とバグの内容は残しておいて。

AGENTS.md

AGENTS.md

別の呼び方: エージェンツエムディー

Codexなど複数のコーディングエージェントが読み込む、CLAUDE.mdと同じ役割を持つ説明ファイルです。複数のAIを併用するときに使います。

出会う場面「Codexも使うのでAGENTS.mdも作りますか」と聞かれたとき

AIに聞くならCLAUDE.mdの内容をもとに、Codex用のAGENTS.mdも作って。書き方の違いがあれば教えて。

settings.json

settings.json

Claude Codeの権限や動作をまとめて決めておく設定ファイルです。どの操作を確認なしで許すかなどを書いておけます。

出会う場面確認画面で「次から聞かない」を何度も選んだ気がして、設定を見直したいとき

講座で詳しく: settings.json（セッティングス）　設定の置き場所と効く順番

AIに聞くなら今のsettings.jsonの中身を見せて。許可しすぎている操作があれば指摘して。

スキル

Skill

別の呼び方: スキル化

特定の仕事の手順書をまとめておき、必要なときだけAIが読み込んで使う仕組みです。同じ指示を毎回書き直す手間を減らせます。

出会う場面「これはスキルにしておきましょう」と定型作業を提案されたとき

講座で詳しく: Skills（スキル）　手順書を渡す

AIに聞くならこの作業、毎回同じ手順を繰り返しているのでスキルにまとめて。次から呼び出せるようにして。

サブエージェント

Subagent

別の呼び方: サブエージェント呼び出し

本体のAIが、仕事の一部を任せる別のAIです。別の場所で調べ物や作業をこなし、結果の要約だけを本体に返してきます。

出会う場面大きな作業で「サブエージェントに任せますか」と提案されたとき

注意小さな作業まで何でもサブエージェントに任せると、かえってトークン消費（コスト）が膨らむことがあります。

講座で詳しく: Subagents（サブエージェント）　別の頭に任せる

AIに聞くならこの調べ物、サブエージェントに任せて要点だけ報告してもらって。全部のログは要らない。

フック

Hook

別の呼び方: hooks

決まったタイミングで必ず自動実行される処理です。CLAUDE.mdの約束事が「お願い」だとすると、フックは「強制」にあたります。

出会う場面「破られて困るルールはフックにしましょう」と言われたとき

注意hooksは確認なしに強制実行されるため、書き方を誤ると危険な操作を無条件で通したり全操作を止め続けたりする危険があります。

講座で詳しく: Hooks（フック）　お願いではなく強制する

AIに聞くならこのルール、CLAUDE.mdに書くだけでなくフックで強制できないか教えて。設定方法も一緒に。

GitHub Copilot

GitHub Copilot

別の呼び方: Copilot、コパイロット

GitHub（マイクロソフト傘下）が出しているAI補助です。もともとはエディタ内での入力補完から始まったサービスです。

出会う場面道具を比較する話の中で「Copilotも試した？」と聞かれたとき

講座で詳しく: 知っておきたい7つの言葉（前半：LLM〜IDE）

AIに聞くならGitHub CopilotとClaude Code、得意なことの違いを教えて。両方使う意味はある？

マルチエージェント（並列実行）

Multi-agent

別の呼び方: 並列実行、並行作業

複数のAIを同時に走らせて、別々の作業を並行して進めてもらうことです。1つずつ順番に待つより早く仕上がります。

出会う場面「タブを増やして並行で走らせましょう」と提案されたとき

注意同じファイルを複数のAIに同時に触らせると、互いの変更を上書きし合って作業が壊れる危険があります。

講座で詳しく: Claudeを複数同時に走らせる（マルチエージェント）

AIに聞くならこの3つの作業、同じファイルを触らないように分担してマルチエージェントで並行に進めて。

プラグイン

Plugin

別の呼び方: Plugins

複数の作業手順（Skills、AIへの個別指示書）やカスタムコマンド、自動処理の設定などをひとまとめにして、まとめて配布・共有できるようにした仕組みです。

出会う場面「このPluginを入れると便利」と勧められたとき

注意PluginにはMCPサーバーや自動実行されるhookが含まれるため、信頼できる配布元のものだけを導入してください。

講座で詳しく: 毎回頼むのをやめる（Hooks・Skills・Plugins）

AIに聞くならこのPluginにはどんなSkillsが含まれているか、内容を確認してから教えて。

コネクタ

Connector

別の呼び方: Connectors

GoogleカレンダーやSlack、Notionなど、外部サービスとAIをつなぐ仕組みです。

出会う場面「コネクタを設定してください」とアプリの設定画面で言われたとき

注意外部サービスの情報を読み書きできるようになるため、つなぐ前に何にアクセスできるか確認してください。

AIに聞くならこのコネクタをつなぐと、私のどんな情報にアクセスできるようになるか説明して。

Explore（探索フェーズ）

Explore (phase)

複雑な作業を頼む前に、AIにまずコードを読ませて状況を把握させる段階のことです。

出会う場面「Explore→Plan→Implement→Commit」という進め方を紹介されたとき

講座で詳しく: 全部つなげて1本作る（実践）

AIに聞くなら本格的に直す前に、まずExploreの段階として関係するコードを読んで状況を説明して。