# 技術用語→やさしい言葉 変換辞書

## 変換の原則

1. **機能で命名する**: 「何をするものか」で名前をつける
2. **身近な比喩を添える**: 日常生活での類似物を示す
3. **初出時に解説ボックス**: 最初に出てきたとき必ず説明

---

## よく使う変換表

### プログラミング基礎

| 技術用語 | やさしい言葉 | たとえ |
|---------|------------|--------|
| コールバック関数 | チェック係 | 「何かあったら呼んでね」と登録しておく処理。電話の折り返しと同じ |
| API | 窓口 | 銀行の窓口。決まった書類を出すと、決まったサービスを受けられる |
| インターフェース | 約束事 | 「この形式で頼めば対応します」というルール |
| パラメータ | 指示内容 | 注文票に書く内容 |
| 引数 | 渡す情報 | 窓口に提出する書類 |
| 戻り値 | 受け取る結果 | 窓口から返ってくる書類 |
| 変数 | 名前付きの箱 | ラベルを貼った引き出し |
| 関数 | 処理の塊 | 自動販売機（入れると出てくる） |

### 非同期・イベント

| 技術用語 | やさしい言葉 | たとえ |
|---------|------------|--------|
| 非同期処理 | 待たずに進む処理 | レストランで注文後、席で待つ。厨房の前で立ち尽くさない |
| イベント | きっかけ | ドアベルが鳴る、ボタンを押す |
| リスナー | 見張り役 | インターホンの前で待機している人 |
| トリガー | 発動条件 | 「このボタンを押したら」という条件 |
| フック | 割り込みポイント | 会社のセキュリティゲート |
| ハンドラ | 対応係 | イベントが起きたとき対応する担当者 |

### データ・構造

| 技術用語 | やさしい言葉 | たとえ |
|---------|------------|--------|
| JSON | データの書き方 | 住所録の書式 |
| オブジェクト | 情報のまとまり | 名刺1枚（名前、電話番号、住所がセット） |
| 配列 | 順番付きリスト | 番号札のついた待合室の椅子 |
| スキーマ | 設計図 | 入力フォームの項目一覧 |
| バリデーション | 入力チェック | 書類の不備確認 |

### セキュリティ・権限

| 技術用語 | やさしい言葉 | たとえ |
|---------|------------|--------|
| 認証 | 本人確認 | パスポートを見せる |
| 認可 | 許可 | 「この部屋に入っていいですよ」というOK |
| トークン | 入場券 | 映画のチケット |
| セッション | 接続状態 | 電話がつながっている間 |
| パーミッション | 権限 | 「閲覧OK、編集NG」のような許可レベル |

### AI・エージェント

| 技術用語 | やさしい言葉 | たとえ |
|---------|------------|--------|
| プロンプト | 指示文 | AIへの依頼書 |
| ストリーミング | 逐次表示 | 手紙を1文字ずつ読み上げる |
| コンテキスト | 文脈・前提情報 | 会話の流れ、今までの話 |
| エージェント | 自動で動くAI | 自分で判断して動く秘書 |
| ツール | AIが使える道具 | 秘書が使えるファイル、電話、パソコン |

---

## 用語解説ボックスの書き方

```html
<div class="term-explain">
  <div class="flex items-start gap-4">
    <i data-lucide="lightbulb" class="w-8 h-8 text-purple-500"></i>
    <div>
      <div class="term-word text-xl font-bold">「コールバック関数」とは？</div>
      <div class="term-meaning text-lg mt-2">
        難しそうな名前ですが、要は<span class="font-bold text-purple-600">「呼び出されたときに実行される処理」</span>のこと。<br>
        電話の「コールバック（折り返し電話）」と同じで、「何かあったら呼んでね」と登録しておく処理です。<br>
        <span class="font-bold">この図解では「チェック係」と呼びます。</span>
      </div>
    </div>
  </div>
</div>
```

### CSS

```css
.term-explain {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  border-left: 4px solid #9333ea;
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
}
.term-word {
  color: #7c3aed;
}
```