AIとつくる はじめてのWeb開発

用語集

学習中に出てくる用語（全289語）を、やさしい言葉でまとめて引けます。くわしくは、各用語の「出てくるセクション」へ。

英数字

① 検索（SEO）
GoogleやYahoo!の検索結果から来てもらう。→ 集客の基礎（SEO・SNS・AI検索）
1080p（1920×1080・フルHD）
SNS・Webの標準。基本はこれでOK。→ 動画生成
② SNS・シェア
XやInstagramなどで紹介されて来てもらう。→ 集客の基礎（SEO・SNS・AI検索）
2アカウント確認
他人のデータが見えないことを実際に確かめる儀式。→ 初級⑤ データを保存する
③ AI検索（GEO）
ChatGPTやClaudeなどのAIが回答の中で紹介してくれる、新しい入口。→ 集客の基礎（SEO・SNS・AI検索）
4K（3840×2160）
高精細だが、AI生成での“ネイティブ4K対応”は少数で高コスト。多くは後述のアップスケーリングで対応。ファイルも重い。→ 動画生成
720p（1280×720）
軽い。下書きや軽用途に。→ 動画生成
Adobe Firefly
商用利用に配慮。デザインソフトとの連携が強み。→ 画像生成
AI（相棒）
具体的なコードを書く・動かす・直す。調べものや下書きも手伝う。→ AIと一緒に作るとは？
AIレビュー
変更のあとに「バグや穴がないかレビューして」。仕上げの儀式。→ 中級⑤ テストと公開前チェックの型を作る
AI検索対応
llms.txt＋構造化データ。AIに「正しく紹介してもらう」ための装備。→ 中級④ SEO・OGP・AI検索対応を実装する
anon public キー
ブラウザに置く前提の“公開用の鍵”。これを使う。→ 初級④ ログインをつける
anon キー
公開前提の鍵。service_role は絶対に出さない。→ 初級④ ログインをつける
API（従量課金）
プログラム向けの窓口。チャットの定額プランとは別契約。→ 中級③ アプリにAIを組み込む（Claude API）
App
このドリルで“自動で表示される”特別な名前の部品。→ Reactドリル① はじめてのコンポーネント
C／C++
ゲームや機器の制御など、速さが命の分野。→ プログラムの種類
ChatGPT（GPT Image 2）
チャットの流れで手軽。指示の理解や文字入れに強い。→ 画像生成
Checkout
Stripeが用意する決済ページ。カード情報を預からずに済む定石。→ 上級① Stripeで決済をつける
CI（GitHub Actions）
pushのたびにビルド＋テスト。見張り番の常駐化。→ 上級④ 運用を自動化する
className
JSXでCSSのクラスを付ける書き方（HTMLのclass）。→ Reactドリル② propsで使い回す
Claude Code
ターミナルで動くコーディング用エージェント。コードを読み書き・実行し、Git操作まで。本サイトの主役。→ Claudeの種類（Chat・Code・Cowork・Design）
Claude Cowork
デスクトップで“非エンジニアの作業”を代行。ローカルのファイルやアプリを横断し、調査・資料作成・整理などを実行。いわば「Claude Codeの力を一般の知的作業へ」。→ Claudeの種類（Chat・Code・Cowork・Design）
Claude Design
文章からプロトタイプ・スライド・1枚資料などのビジュアルを作る実験的製品（Anthropic Labs）。コードやFigmaを読んでチームのデザインを反映できる。→ Claudeの種類（Chat・Code・Cowork・Design）
CLAUDE.md
プロジェクトのルールや前提を書いておく“指示書”。Claude Codeが毎回読んでくれる。→ Claude Code
Claude（Chat）
ブラウザ／アプリでの対話。質問・相談・文章作成の定番。→ Claudeの種類（Chat・Code・Cowork・Design）
Clerk / Auth0
認証専門。きれいなログイン画面を手早く用意できる。→ ログイン機能（認証）
Cloudflare Images
画像のリサイズ・最適化・配信まで自動（基本有料）。画像が主役なら。→ 番外編 画像アップロードをつける（保存先の選び方つき）
Cloudflare R2
大容量・動画・配信多めに強い。無料枠と転送量で有利。S3互換。→ 番外編 画像アップロードをつける（保存先の選び方つき）
Cron
決まった時刻に自動実行。週報・集計・掃除に。CRON_SECRETで保護。→ 上級④ 運用を自動化する
DBに入れるのはURL
画像そのものではなく「置き場所（文字）」だけ。→ 番外編 画像アップロードをつける（保存先の選び方つき）
Dependabot
部品の更新・脆弱性をGitHubが通知。提案はAIと確認して取り込む。→ 上級④ 運用を自動化する
DNS
名前と住所をつなぐ電話帳。設定後は反映待ちがある。→ 初級⑥ 公開を仕上げて、独自ドメインをつなぐ
ElevenLabs
自然な音声と多言語対応で有名。→ 音声生成
Fable
最上位の旗艦グレード（“Mythos級”）。ただし最新版「Fable 5」は2026年6月の公開後まもなく停止。→ Claudeの種類（Chat・Code・Cowork・Design）
Firebase
Googleの定番。スマホアプリにも強い。→ ログイン機能（認証）
FLAC
高音質のまま圧縮する選択肢。→ 音楽生成
Flux 2 / Stable Diffusion
オープン系で自由度が高く、自分のPCでも動かせる。→ 画像生成
GA4
Googleの無料解析。流入元・端末・リアルタイムまで見える定番。→ 中級⑥ アクセス解析で改善ループを回す
GitHub Pages
かんたんな静的サイト向け。→ デプロイ・公開
Google Gemini（Nano Banana）
会話で「ここをこう直して」と編集していくのが得意。→ 画像生成
Google Veo
高品質。音声付き生成にも対応。→ 動画生成
H.265 / HEVC
高圧縮で軽いが、対応環境がやや限られる。→ 動画生成
Haiku
高速・低コスト。手軽な作業向け。→ Claudeの種類（Chat・Code・Cowork・Design）
Java／C#
業務システムや大きめのアプリ、ゲーム。→ プログラムの種類
JavaScript
Webサイトの“動き”。ブラウザで動く定番。→ プログラムの種類
JSX
関数の中に書くHTML風の記法。1つの親タグで包む。classはclassName。→ Reactドリル① はじめてのコンポーネント
Kling
映画的なカットや動きが得意。→ 動画生成
layout.tsx
全ページ共通の枠。1つ直せば全部変わる。→ Next.jsドリル① 仕組みまるわかり
llms.txt
AI向けの自己紹介ファイル。「このサイトはこういうサイトです」をAIが読みやすい形で置く新しい慣習。→ 中級④ SEO・OGP・AI検索対応を実装する
max_tokens
出力の上限。必須項目。長文の暴走を防ぎ、1回あたりのコストにフタをする。→ 中級③ アプリにAIを組み込む（Claude API）
MCP
外部の道具（DBやサービス）をつなぐ仕組み（→次のセクション）。→ Claude Code
MCPサーバー
実際の道具（GitHub用・DB用…）。→ MCP（外部ツール連携）
messages
AIへの依頼文。チャットで打っていたことを、プログラムが代わりに送っている。→ 中級③ アプリにAIを組み込む（Claude API）
Midjourney
アート寄りの高品質な画像が得意。→ 画像生成
model
使うモデルの指定。ここを1行変えるだけで頭脳を差し替えられる。→ 中級③ アプリにAIを組み込む（Claude API）
MOV / ProRes
編集向けの高品質（その分とても重い）。→ 動画生成
MP3
圧縮で軽い。配布・共有・Web向け（音質はやや落ちる）。→ 音楽生成
MP4（H.264）
最も互換性が高い“標準”。まずはこれ。→ 動画生成
Netlify
同じく手軽な定番。→ デプロイ・公開
NEXT_PUBLIC_の有無
付ける＝ブラウザに公開してよい値。付けない＝サーバー専用の秘密。→ 中級② お問い合わせフォームとメール通知をつける
Next.js（App Router）
本格サイトの“全部入りセット”。appフォルダでページを管理する方式。→ 初級① Next.jsプロジェクトをAIと立ち上げる
OGP画像
SNSのプレビューカード。1200×630。文字大きめが正義。→ 中級④ SEO・OGP・AI検索対応を実装する
OpenAI / Google / Microsoft の音声合成
各社が高品質なTTSを提供。→ 音声生成
Opus
高性能。難しい・長い作業向け。→ Claudeの種類（Chat・Code・Cowork・Design）
PayPal
世界的に有名。海外向けにも使いやすい。→ 決済と手数料（お金を受け取る仕組み）
pk_ と sk_
公開可能キーとシークレットキー。NEXT_PUBLICの判断、完璧でしたか？→ 上級① Stripeで決済をつける
Project URL
あなたのSupabaseの住所（https://〇〇.supabase.co）。→ 初級④ ログインをつける
Projects
資料や指示を一度入れておくと、毎回その文脈付きで会話できる“保存ワークスペース”。→ Claudeの種類（Chat・Code・Cowork・Design）
props
部品に渡す中身。使う側は属性の形、受け取る側は props.名前。→ Reactドリル② propsで使い回す
Python
AI・データ分析・自動化に人気。読みやすい。→ プログラムの種類
Resend
メール送信の専門サービス。アプリからのメールは専門サービス経由が常識。→ 中級② お問い合わせフォームとメール通知をつける
RLS（行レベルセキュリティ）
「自分の行しか触れない」門番。enableで立てて、policyでルールを書く。→ 初級⑤ データを保存する
Runway
映像制作向けの細かい制御が得意。→ 動画生成
Seedance / Pika ほか
手軽で人気。多くは1080pが中心。各社が多数。→ 動画生成
service_role
RLSを超える全権鍵。サーバーの奥でだけ。NEXT_PUBLIC厳禁。→ 上級② 有料プランの出し分けを作る
sitemap / robots
検索ロボット向けの地図と案内板。/sitemap.xml で確認できる。→ 中級④ SEO・OGP・AI検索対応を実装する
Skills
得意技（手順）を再利用する仕組み（→次のセクション）。→ Claude Code
Sonnet
速度と賢さのバランス型。→ Claudeの種類（Chat・Code・Cowork・Design）
Stripe（ストライプ）
個人でも使える定番。サブスクや単発課金に強い。→ 決済と手数料（お金を受け取る仕組み）
Supabase
認証＋データベースのセット。このサイトの会員機能もこれ。→ ログイン機能（認証）
Supabase Storage
まず試すならこれ。統合が楽でRLS感覚で権限管理。→ 番外編 画像アップロードをつける（保存先の選び方つき）
Swift／Kotlin
iPhone（Swift）／Android（Kotlin）アプリ。→ プログラムの種類
Tailwind
クラス名で見た目を指定する道具。AIが書くので“名前だけ”でOK。→ 初級③ デザインを整える
title / description
検索結果に出る見出しと紹介文。ページごとに内容に合ったものを。→ 中級④ SEO・OGP・AI検索対応を実装する
UI（ユーアイ）
User Interface＝“見た目と操作”。ボタン・文字・色・配置など、目に見える部分。→ デザインの基礎（UI/UX）
URLだけDBに
ファイル本体は倉庫へ、DBには置き場所（URL）だけ。引っ越しも楽になる。→ 番外編 画像アップロードをつける（保存先の選び方つき）
UX（ユーエックス）
User Experience＝“使ったときの体験・感じ方”。分かりやすい？ストレスない？目的を達成できた？→ デザインの基礎（UI/UX）
Vercel
Next.jsと相性抜群。個人なら無料枠で始められる。→ デプロイ・公開
Vercel Analytics
2分で入る計測。ページ別の閲覧数と訪問者数。まずこれ。→ 中級⑥ アクセス解析で改善ループを回す
WAV
無圧縮で高音質。ファイルは重い。編集・マスタリング・納品向け。→ 音楽生成
Webhook
サービス間の自動連絡。お金の確定処理は画面ではなくこれで。→ 上級② 有料プランの出し分けを作る
Webアプリ
VercelなどにデプロイすればURLですぐ公開。審査は基本なし。手軽。→ アプリリリースまでの流れ
Webサイト／Webアプリ
ブラウザ（Chromeなど）で動く。例：YouTube、Gmail、Googleマップ、このサイト。→ プログラムの種類

あ行

あなた（人）
何を・誰のために作るか決める。出てきたものを確認し、方向を直す。→ AIと一緒に作るとは？
あのとき触るなと言った理由
全権鍵は、ブラウザに出たら全データが他人に渡るから。→ 上級② 有料プランの出し分けを作る
アフィリエイト
商品を紹介し、成約で報酬。記事サイトと相性◎。→ マネタイズの基本（稼ぎ方の種類）
アプリ内課金（ストア）
スマホアプリは App Store／Google Play の課金を使う（手数料は高め）。→ 決済と手数料（お金を受け取る仕組み）
エラー（赤）
処理が止まった状態。原因が書いてあるので、コピーしてAIへ。→ エラーとの付き合い方
オブジェクトストレージ
ファイル専用の倉庫。URLで出し入れする。→ 番外編 画像アップロードをつける（保存先の選び方つき）

か行

カード番号
4242 4242 4242 4242（テストモード専用の魔法の番号）→ 上級① Stripeで決済をつける
カード並べ
display: flex + flex: 1 で均等配置（②の実戦）。→ HTML・CSSドリル③ ミニページを丸ごと組む
クライアント
お願いする側（あなたのブラウザやアプリ）。→ サーバー
クライアント側（"use client"）
クリックや入力など“その場の反応”が要る画面は、ファイル先頭に "use client" と書く。→ Next.jsドリル① 仕組みまるわかり
コード／エージェント
Claude Code など。文章AIが“作業”までこなす。→ 生成AIの種類
コマンド
命令の言葉（例：「中身を見せて」）。→ ターミナルの基礎
コミット
セーブすること。AIが hello.html を作って保存した。→ ハンズオン② ブラウザだけで始めるClaude Code
コミット（commit）
セーブすること（「ここまでの変更を記録」）。→ Git／GitHub
コンポーネント
画面の“部品”。1つ直せば、使っている場所すべてに反映。→ 初級② ページを増やして、部品に分ける

さ行

サーバー
お願いに応える側。データやページを返す。→ サーバー
サーバー/クライアント
裏方は既定、反応が要る画面は "use client"。→ Next.jsドリル① 仕組みまるわかり
サーバープログラム
裏側で動いて、データを配ったり保存したり（→サーバーのセクション）。例：ネットショップの注文処理、ゲームの対戦サーバー。→ プログラムの種類
サーバー側（既定）
厨房。データベースから取る・秘密の鍵を使う“裏方”はここ。Next.jsでは何も付けなければこちら。→ Next.jsドリル① 仕組みまるわかり
サーバー側で呼ぶ
鍵を持つのはサーバーだけ。ブラウザからAIを直接呼ばない構成が鉄則。→ 中級③ アプリにAIを組み込む（Claude API）
サブスク（月額・年額）
毎月／毎年の継続課金。安定収入になりやすい定番。→ マネタイズの基本（稼ぎ方の種類）
シークレットキー（sk_test_…）
請求や返金など全部できる鍵。→ NEXT_PUBLIC_ 厳禁、サーバー専用。→ 上級① Stripeで決済をつける
スキル
よく頼む定型作業を“1コマンド”にまとめたもの。/コマンド名 で呼び出せる。→ 中級① 開発環境を本格化する（CLAUDE.md・スキル・MCP）
すぐ帰られているページ
期待と中身がズレているサイン。見出しか冒頭を直す候補。→ 中級⑥ アクセス解析で改善ループを回す
スペンドリミット
月の上限額。最初に低く設定しておけば事故が起きない。→ 中級③ アプリにAIを組み込む（Claude API）
スマホアプリ
iPhone／Androidに入れて動く。例：LINE、Instagram、スマホゲーム。→ プログラムの種類

た行

ディレクトリ
フォルダのこと。→ ターミナルの基礎
テーブル
データの棚。memosには user_id・body・created_at を保存。→ 初級⑤ データを保存する
デザイン方針
誰に・何を・どんな印象で。指示の前にまず1行。→ 初級③ デザインを整える
デスクトップアプリ
パソコンにインストールして動く。例：Word／Excel、Zoom、Photoshop。→ プログラムの種類
テスト（Vitest）
「これを入れたらこれが返るはず」を確かめる見張り番。npm test で実行。→ 中級⑤ テストと公開前チェックの型を作る
テストモード
偽のお金で何度でも練習できる場。テストカード 4242…。→ 上級① Stripeで決済をつける
デプロイ
作ったものをネットに公開すること。お店の“開店”。→ ハンズオン④ 作ったサイトを世界に公開する
トークン
AIが読み書きする文字のかけら。料金の単位。日本語は1文字1〜2トークン。→ 中級③ アプリにAIを組み込む（Claude API）
ドメイン
サイトの住所（例：example.com）。覚えやすい住所を買って設定できる。→ デプロイ・公開

は行

ハーネス構築
AIが実力を出せるように装備（メモ・コマンド・道具）を整えること。→ 中級① 開発環境を本格化する（CLAUDE.md・スキル・MCP）
パス
ファイルやフォルダの“住所”。→ ターミナルの基礎
バックアップ
戻れるラインの確保。月1で確認の儀式。→ 上級④ 運用を自動化する
バックエンド（裏側）
お客さんから見えない“厨房・倉庫”。データの保存や計算。サーバーやデータベースが担当。→ プログラムの種類
ヒーロー
ページ上部の大きな見出し＋ひとこと＋ボタン。→ HTML・CSSドリル③ ミニページを丸ごと組む
ひな形→自分の言葉
AIで8割→全文読んで実態に合わせる→不安は専門家へ。→ 上級③ 公開に必要な法務ページ
ビルド
文法とつながりの全ページ検査。赤なら公開されない＝最初の安全装置。→ 中級⑤ テストと公開前チェックの型を作る
フォーム→保存→通知
Webサービスの定番パターン。予約も応募も注文も、骨格はこれ。→ 中級② お問い合わせフォームとメール通知をつける
フォルダ
ファイルをテーマごとに整理する“箱”。→ コードエディタ（VS Code）
プッシュ（push）
自分のセーブをGitHubに上げる。→ Git／GitHub
プライバシーポリシー
個人情報の取り扱い説明。解析・AI送信も書く。→ 上級③ 公開に必要な法務ページ
ブランチ
本線を汚さない“別の作業レーン”。AIの変更はここに入ることがある。→ ハンズオン② ブラウザだけで始めるClaude Code
ブランチ（branch）
本線を汚さずに試すための“別の作業レーン”。→ Git／GitHub
プランモード
コードを書く前に“計画だけ”出させて、OKなら実行してもらう安全な使い方。大きな変更の前に便利。→ Claude Code
フリーミアム
基本は無料で、便利な機能だけ有料。集客と収益を両立。→ マネタイズの基本（稼ぎ方の種類）
プル（pull）
GitHubの最新を自分の手元に取り込む。→ Git／GitHub
プルリクエスト（PR）
「この変更を取り込んで」と提案する仕組み。→ Git／GitHub
フロントエンド（表側）
お客さんから見える“内装・メニュー”。画面の見た目や操作。HTML/CSS/JavaScriptが担当。→ プログラムの種類
ペイウォール
払った人だけが通れる壁。判定はサーバー側で。→ 上級② 有料プランの出し分けを作る
ポスト型のRLS
insertだけ開けて、selectは閉じる。投函はだれでも、開封は管理者だけ。→ 中級② お問い合わせフォームとメール通知をつける
ポリシー
門番のルール。select（見る）/insert（書く）/delete（消す）ごとに設定。→ 初級⑤ データを保存する

ま行

マージ（Merge）
ブランチの変更を本線（main）に合流させること。→ ハンズオン③ 自己紹介サイトをAIと一緒に作る
まだ保存（コミット）していない変更を捨てる
「いまの変更は全部破棄して、さっきの状態に戻して」とAIに頼む。→ ハンズオン③ 自己紹介サイトをAIと一緒に作る

や行

よく見られているページ
あなたの“勝ちページ”。ここを磨く・ここから他ページへ誘導する。→ 中級⑥ アクセス解析で改善ループを回す

ら行

リクエスト／レスポンス
お願い（リクエスト）と、その返事（レスポンス）。→ サーバー
リポジトリ
プロジェクトの保管箱。今日 hello-ai を作った。→ ハンズオン② ブラウザだけで始めるClaude Code
リポジトリ（repository）
プロジェクトの保管箱（履歴ごと）。→ Git／GitHub
ルーティング
URLとページの対応。Next.jsでは「app/フォルダ名/page.tsx」を置くだけ。→ 初級② ページを増やして、部品に分ける
レスポンシブ
スマホ・PCどちらでも見やすいこと。実機確認が一番確実。→ 初級③ デザインを整える

その他

`.css`
見た目（色・配置）。→ コードエディタ（VS Code）
`.html`
ページの骨組み。→ コードエディタ（VS Code）
`.js` / `.ts`
動き・処理。→ コードエディタ（VS Code）
`.value`
入力欄の中身を読む。→ JSドリル② 入力に反応する
`[...配列, 新しい値]`
今の配列に足した“新しい配列”を作る書き方。→ Reactドリル③ useStateで動かす（状態）
`{ }`（波カッコの窓）
JSXの中でプログラムの値を表示する場所。→ Reactドリル② propsで使い回す
`@media (max-width: Npx)`
「幅がN以下のとき」だけ使うCSS。スマホ用ルールの入口。→ HTML・CSSドリル④ スマホ対応（レスポンシブ）
`/about`
サイトの中の**どのページ**かを表す道順（パス）。→ URLとドメインの仕組み
`<a href="URL">`
リンク。hrefが行き先。→ HTMLドリル① 骨組みのタグを手に入れる
`<h1>`
いちばん大きな見出し。ページの題名に使う。→ ハンズオン① 自分の手で、はじめてのWebページ
`<h1>`〜`<h3>`
見出し。数字が大きいほど小さい見出し。→ HTMLドリル① 骨組みのタグを手に入れる
`<img src="場所" alt="説明">`
画像。閉じタグなし。altは画像の説明。→ HTMLドリル① 骨組みのタグを手に入れる
`<style>`
HTMLファイルの中にCSSを書くための場所。→ ハンズオン③ 自己紹介サイトをAIと一緒に作る
`<title>`
ブラウザのタブに表示されるページ名。→ ハンズオン④ 作ったサイトを世界に公開する
`<title>` / description / favicon
アプリの“顔”。タブ表示・検索結果・アイコン。→ 初級⑥ 公開を仕上げて、独自ドメインをつなぐ
`<ul>` と `<li>`
箇条書きの“枠”と“1行1行”。セットで使う。→ ハンズオン① 自分の手で、はじめてのWebページ
`<部品名 />`
自作の部品を画面に置く書き方。何度でも使い回せる。→ Reactドリル① はじめてのコンポーネント
`===`
等しいか？の比較。→ JSドリル② 入力に反応する
`align-items`
縦方向の揃え。center で上下中央。→ CSSドリル② flexboxで“並べる”
`app/`
ページ置き場。ここのフォルダ構成が、そのままURLになる。→ 初級① Next.jsプロジェクトをAIと立ち上げる
`app/layout.tsx`
全ページ共通の“枠”（ヘッダーなどを置く場所）。→ 初級① Next.jsプロジェクトをAIと立ち上げる
`app/page.tsx`
トップページの中身。→ 初級① Next.jsプロジェクトをAIと立ち上げる
`border-radius`
角の丸み（数字が大きいほど丸い）。→ CSSドリル① 色・文字・余白を自在にする
`border`
枠線（例：1px solid #ddd）。→ CSSドリル① 色・文字・余白を自在にする
`claude`
Claude Codeを起動する合言葉。→ 番外編 自分のPCでClaude Codeを動かす
`color` / `background`
CSSで文字色／背景色を変える。→ ハンズオン① 自分の手で、はじめてのWebページ
`display: flex`
親に付けると中身が横並びに。並べる魔法の入口。→ CSSドリル② flexboxで“並べる”
`example.com`
**ドメイン**＝住所の本体。サイトの“名前”にあたる部分。→ URLとドメインの仕組み
`flex-direction: column`
横並びを縦並びに。スマホ対応の主役。→ HTML・CSSドリル④ スマホ対応（レスポンシブ）
`flex: 1`
余った幅の取り分。全部 1 なら均等。→ CSSドリル② flexboxで“並べる”
`font-size`
文字の大きさ（例：20px）。→ CSSドリル① 色・文字・余白を自在にする
`font-weight`
太さ（bold で太字）。→ CSSドリル① 色・文字・余白を自在にする
`for`
決めた回数くりかえす。i=0; i<length; i++ の3点セット。→ JSドリル③ リストと繰り返し
`getElementById("名札")`
idでHTMLの部品を取ってくる。→ JSドリル① はじめての“動き”
`getItem(...) || "[]"`
値が無いとき（null）の“代わり”を用意する書き方。→ JSドリル④ 保存してみる（localStorage）
`getItem("名札")`
取り出す（無ければ null）。→ JSドリル④ 保存してみる（localStorage）
`https://`
通信のやり方。`s`付きは暗号化されていて安全（鍵マーク🔒）。→ URLとドメインの仕組み
`if / else`
もし〜なら／そうでなければ。条件分岐。→ JSドリル② 入力に反応する
`index.html`
トップページを意味する特別なファイル名。→ ハンズオン③ 自己紹介サイトをAIと一緒に作る
`innerHTML`
中身をHTMLとして入れる（タグが効く）。→ JSドリル③ リストと繰り返し
`JSON.stringify / parse`
配列⇄文字の変換。配列の保存に必須。→ JSドリル④ 保存してみる（localStorage）
`justify-content`
横方向の配置。center（中央）／space-between（両端に散らす）など。→ CSSドリル② flexboxで“並べる”
`layout.tsx`
全ページ共通の枠。ヘッダーやフッターの定位置。→ 初級② ページを増やして、部品に分ける
`line-height`
行間（1.8 くらいが読みやすい）。→ CSSドリル① 色・文字・余白を自在にする
`map`
配列を並べてJSXにする。forのReact版。key を付ける。→ Reactドリル③ useStateで動かす（状態）
`margin`
外側の余白（箱どうしの距離）。→ CSSドリル① 色・文字・余白を自在にする
`max-width: 100%`
親より大きくしない。はみ出し（横スクロール）防止。→ HTML・CSSドリル④ スマホ対応（レスポンシブ）
`mkdir` / `cd`
フォルダを作る／そのフォルダへ移動する。→ 番外編 自分のPCでClaude Codeを動かす
`node -v`
Node.jsが入ったか、バージョン番号で確認するコマンド。→ 番外編 自分のPCでClaude Codeを動かす
`npm install -g …`
部品（パッケージ）をPC全体で使えるように入れる。→ 番外編 自分のPCでClaude Codeを動かす
`Number()`
文字を数に変換。計算の前に必須。→ JSドリル② 入力に反応する
`onclick`
クリックされたら実行。→ JSドリル① はじめての“動き”
`package.json`
使っている部品（パッケージ）のリスト。→ 初級① Next.jsプロジェクトをAIと立ち上げる
`padding`
内側の余白（箱の中のゆとり）。→ CSSドリル① 色・文字・余白を自在にする
`padding` / `border-radius`
CSSで内側の余白／角の丸みを付ける。→ ハンズオン① 自分の手で、はじめてのWebページ
`page.tsx`
そのページだけの中身。→ Next.jsドリル① 仕組みまるわかり
`page.tsx` / `layout.tsx`
ページの中身／全ページ共通の枠。→ 初級① Next.jsプロジェクトをAIと立ち上げる
`public/`
画像などの素材置き場。→ 初級① Next.jsプロジェクトをAIと立ち上げる
`push`
配列の末尾に足す。→ JSドリル③ リストと繰り返し
`React.useState(初期値)`
覚えておく箱。返り値は [今の値, 変える関数]。→ Reactドリル③ useStateで動かす（状態）
`setItem("名札", 値)`
ブラウザにしまう。→ JSドリル④ 保存してみる（localStorage）
`text-align`
寄せ（center で中央）。→ CSSドリル① 色・文字・余白を自在にする
`textContent`
部品の中の文字。書き換えると画面が変わる。→ JSドリル① はじめての“動き”
`value` / `onChange`
入力欄をstateと繋ぐ往復（制御された入力）。→ Reactドリル③ useStateで動かす（状態）
`var 名前 = 値`
覚えておく箱（変数）を作る。→ JSドリル① はじめての“動き”
音楽
Suno, Udio など。→ 生成AIの種類
音声（読み上げ）
ElevenLabs などのナレーション・音声合成。→ 生成AIの種類
価格・支払時期・提供時期
表示価格（税込）／申込時に課金／決済完了後すぐ利用可、など実態どおりに。→ 上級③ 公開に必要な法務ページ
画像
Midjourney, DALL·E, Stable Diffusion など。→ 生成AIの種類
改善ループ
見る→仮説→1つ直す→また見る。勘ではなくデータで育てる。→ 中級⑥ アクセス解析で改善ループを回す
開発のリズム
頼む→mainに反映→自動デプロイ→公開URLで確認。→ 初級① Next.jsプロジェクトをAIと立ち上げる
環境変数
APIキーなどの“秘密”を、コードに直書きせず安全に渡す仕組み。公開サービスの設定画面に入れる。→ デプロイ・公開
区画分け
header / main / footer で“帯と本文”に分けると作りやすい。→ HTML・CSSドリル③ ミニページを丸ごと組む
計画→OK→実行
大きな作業の前に計画だけ出させる、事故らない頼み方（プランモードの実践）。→ ハンズオン③ 自己紹介サイトをAIと一緒に作る
警告（黄・warning）
止まらないけど「気をつけて」のお知らせ。あとで直せばよいことも。→ エラーとの付き合い方
月額（サブスク）
継続して価値があるもの向け。収入が安定しやすい。→ 料金プランと価格の決め方
公開/非公開
公開バケットのURLは誰でも開ける。秘密のファイルは非公開＋署名URL。→ 番外編 画像アップロードをつける（保存先の選び方つき）
公開URL（.vercel.app）
無料でもらえる、あなたのサイトの住所。独自ドメインは初級編で。→ ハンズオン④ 作ったサイトを世界に公開する
公開可能キー（pk_test_…）
ブラウザに置く前提の鍵。これだけでは支払いを完了できない。→ NEXT_PUBLIC_ でOK。→ 上級① Stripeで決済をつける
公開前チェック
秘密情報・スマホ表示・変な入力・RLS。リリース前の儀式。→ 初級⑥ 公開を仕上げて、独自ドメインをつなぐ
公開前チェックの型
毎回同じ項目を機械的に。スキル化して1コマンドで呼ぶ。→ 中級⑤ テストと公開前チェックの型を作る
効果×手間
優先順位の2軸。「やらない」を決めるのも仕事。→ 上級⑥ 成長させる
広告
ページに広告を表示して収入。アクセスが多いほど有利。→ マネタイズの基本（稼ぎ方の種類）
構造化データ（JSON-LD）
「これはサイト名」「これは運営者」と機械向けにラベル付けするデータ。検索結果のリッチ表示にも効く。→ 中級④ SEO・OGP・AI検索対応を実装する
今日から使ってよい理由
Webhookの処理は**サーバーの奥（Route Handler）だけ**で動く。金庫の鍵は金庫室の中でだけ使う、なら安全。→ 上級② 有料プランの出し分けを作る
使い回し
同じ部品に違う中身を渡して何度も使うこと。→ 初級② ページを増やして、部品に分ける
事業者名・責任者
個人なら本名（屋号があれば併記）。→ 上級③ 公開に必要な法務ページ
自動デプロイ
mainが更新されると、サイトも自動で更新される仕組み。→ ハンズオン④ 作ったサイトを世界に公開する
自分の内容に置換
お手本は土台。最後は必ず自分のものに。→ HTML・CSSドリル③ ミニページを丸ごと組む
自由型（NoSQL）
表にこだわらず柔軟に保存。例：MongoDB, Firebase。→ データベース
実機確認 / viewport
本番はスマホ実機で。自前HTMLはviewportメタが必須（Next.jsは自動）。→ HTML・CSSドリル④ スマホ対応（レスポンシブ）
実行（run）
命令を動かすこと。→ ターミナルの基礎
修正ループ
頼む→見る→直す。一発で完璧を狙わないのがコツ。→ ハンズオン③ 自己紹介サイトをAIと一緒に作る
週30分・1つだけ
続く運営の型。1年で52改善。→ 上級⑥ 成長させる
住所・電話番号
原則記載。個人開発者は「ご請求があったときは遅滞なく開示します」とする運用が広く使われています（消費者庁の解釈に基づく方式）。バーチャルオフィスを使う手も。→ 上級③ 公開に必要な法務ページ
署名検証（whsec_）
連絡が本物のStripeからかを確かめる仕組み。検証なしのWebhookは偽装され放題。→ 上級② 有料プランの出し分けを作る
商品と価格（Price）
売り物の登録。サブスクか買い切りかは価格に設定。→ 上級① Stripeで決済をつける
色
color（文字）／background（背景）。カラーコードで自由自在。→ CSSドリル① 色・文字・余白を自在にする
色のルール
基本2色＋強調1色。使う色を絞ると上品になる。→ 初級③ デザインを整える
深める→広げる→増やす
次の一手の基本順序。→ 上級⑥ 成長させる
声の口
ワンタップFB＋問い合わせ＋目の前で使ってもらう。→ 上級⑥ 成長させる
設計図と中身の分離
見た目の設計図は部品に1つ、中身はpropsで何通りでも。→ Reactドリル② propsで使い回す
測定ID
G-で始まる公開前提のID。だからNEXT_PUBLIC_でOK。→ 中級⑥ アクセス解析で改善ループを回す
投げ銭・寄付
応援として任意で支払ってもらう。→ マネタイズの基本（稼ぎ方の種類）
動くけど見た目が変
エラーは出ていない状態。AIに「こうしたい」と希望を伝えて直す。→ エラーとの付き合い方
動画
Runway, Google Veo, Kling など。→ 生成AIの種類
特商法表記
有料販売の義務。売る人の身元と条件の明示。→ 上級③ 公開に必要な法務ページ
独自ドメイン
自分だけの住所。年額制。Vercelには Settings → Domains でつなぐ。→ 初級⑥ 公開を仕上げて、独自ドメインをつなぐ
入れ子のlayout
フォルダごとにlayoutを置くと、その区画だけの共通枠も作れる。→ Next.jsドリル① 仕組みまるわかり
認可（Authorization）
あなたは何をしてよい？を決める（例：自分のデータだけ見られる）。→ ログイン機能（認証）
認証
「あなたは誰？」を確かめる仕組み。次回は“認可”（誰が何を見られるか）へ。→ 初級④ ログインをつける
認証（Authentication）
あなたは誰？を確かめる（＝ログイン）。→ ログイン機能（認証）
配列 `[ ]`
値をまとめる箱。リスト[0]で1個目（0から数える）。→ JSドリル③ リストと繰り返し
買い切り
1回で完結するもの向け。気軽に買ってもらいやすい。→ 料金プランと価格の決め方
売り切り（買い切り）
1回払いで購入。テンプレ・素材・有料記事など。→ マネタイズの基本（稼ぎ方の種類）
箱
padding（内側）／margin（外側）／border／border-radius。→ CSSドリル① 色・文字・余白を自在にする
表型（SQL）
Excelのような“表”で管理。きっちり整理したいとき向き。例：PostgreSQL, MySQL, SQLite。→ データベース
文字
font-size／font-weight／text-align／line-height。→ CSSドリル① 色・文字・余白を自在にする
文章・対話（LLM）
ChatGPT, Claude, Gemini など。文章作成・要約・翻訳・コード生成。→ 生成AIの種類
変える関数（setXxx）
呼ぶと画面が自動で描き直される。自分で書き換えなくていい。→ Reactドリル③ useStateで動かす（状態）
返品・解約
デジタルコンテンツの返金条件と、サブスクの解約方法を明確に。→ 上級③ 公開に必要な法務ページ
保存したけど、やっぱり前が良かった
「mainを1つ前のコミットに戻して」または「さっきの変更を取り消して（revert）」。→ ハンズオン③ 自己紹介サイトをAIと一緒に作る
無料トライアル
一定期間お試し→自動で有料、という流れも定番。→ 料金プランと価格の決め方
有効期限／CVC
未来の日付なら何でも／3桁なら何でも（例：12/34・123）→ 上級① Stripeで決済をつける
利用規約
サービスのルールブック。免責と禁止事項が核。→ 上級③ 公開に必要な法務ページ
流入元（GA4）
検索・SNS・直接。多い経路をさらに伸ばすのが効率的。→ 中級⑥ アクセス解析で改善ループを回す
連携（許可）
「触れていい範囲」を渡すこと。必要最小限が鉄則。→ ハンズオン② ブラウザだけで始めるClaude Code