見出し画像

【保存版】Week 1基盤構築で使う用語を初心者向けに完全解説！React、TypeScript、Vite...これだけ知っておけばOK

YaroTech｜生成AIの傾奇者

こんにちは！YaroTechです。

「React？TypeScript？Vite？なにそれ美味しいの？」

Day86の記事を読んでいて、こんな専門用語が次々と出てきて、途中で諦めそうになっていませんか？

でも、大丈夫です。

今日は、Day86「Week 1基盤構築編」を読む前に知っておきたい用語を、プログラミング初心者でも100%理解できるように、身近な例え話で解説します。

この記事を読み終わる頃には、あなたも自信を持ってDay86の実践編に進めるはずです！
※見出し画像のプロンプトは一番下におまけで公開中！


🎯 この記事で得られること

✅ Week 1で使う技術用語を「レゴ」「設計図」「秘書」など身近な例えで理解
✅ 「なぜその技術が必要なのか」が分かる
✅ 公式ドキュメントへの道しるべ
✅ Day86のWeek 1実践編をスムーズに読める自信
✅ モダンWeb開発の基礎知識が身につく

⚛️ フレームワーク・ライブラリ編

React

一言で言うと: UIを作るための「レゴブロック」

身近な例え:
レゴで家を作ることを想像してください：

  • 普通のHTML: 1枚の大きな板に全部を描く（後から変更が大変）

  • React: レゴブロック（部品）を組み合わせて作る（後から組み替え簡単）

Reactでは、ボタン、メニュー、カードなどを「コンポーネント」という部品に分けて作ります。部品を組み合わせてWebページを作るイメージです。

具体例:

<Header />（ヘッダー部品）
<ArticleCard />（記事カード部品）
<Footer />（フッター部品）

なぜ必要？:

  • 部品を使い回せる（同じボタンを何度も書かなくていい）

  • 修正が簡単（ボタン部品を直せば、全部のボタンが変わる）

  • チームで分業できる（Aさんはヘッダー、Bさんはカード担当）

公式ドキュメント: React 公式ドキュメント（日本語）

TypeScript

一言で言うと: JavaScriptに「設計図」と「品質チェック」を追加した言語

身近な例え:
料理のレシピを想像してください：

  • JavaScript: 「適量の塩を入れる」（曖昧）

  • TypeScript: 「塩を小さじ1（5g）入れる」（明確）

TypeScriptは、変数に「これは数字だよ」「これは文字だよ」と明示します。すると、間違った型のデータを入れようとした時に、書いている最中にエラーで教えてくれます。

具体例:

// TypeScript
let articleCount: number = 10;  // 数字だと宣言
articleCount = "テスト";  // エラー！文字は入れられない

// JavaScript
let articleCount = 10;
articleCount = "テスト";  // エラーにならない（実行時にバグる）

なぜ必要？:

  • バグが減る（書いている最中に間違いを見つけられる）

  • IDEが賢くなる（自動補完が正確になる）

  • チーム開発がスムーズ（他の人のコードが読みやすい）

公式ドキュメント: TypeScript 公式ドキュメント

Vite

一言で言うと: 「爆速」でアプリを起動・ビルドするツール

身近な例え:
PCを起動するとき：

  • 従来のツール（Webpack）: 古いPC（起動に5分かかる）

  • Vite: 最新のゲーミングPC（3秒で起動）

開発中、コードを書き換えるたびに「保存→ビルド→ブラウザで確認」という流れが必要です。Viteは、この「ビルド」を一瞬で終わらせてくれます。

なぜ必要？:

  • 開発中の待ち時間がほぼゼロ

  • ファイルを保存した瞬間にブラウザに反映

  • 従来ツールより10倍〜100倍速い

Day86での使われ方:
プロジェクト作成時に `npm create vite@latest` で爆速開発環境を構築

公式ドキュメント: Vite 公式ドキュメント（日本語）

🎨 スタイリング編

Tailwind CSS

一言で言うと: 「クラス名を書くだけでデザイン完成」するCSSフレームワーク

身近な例え:
服を作るとき：

  • 普通のCSS: 生地から裁断して縫う（時間がかかる）

  • Tailwind CSS: 既製品の服にアクセサリーをつける（速い）

Tailwindは、`text-blue-500`（青い文字）、`p-4`（余白）、`rounded-lg`（角丸）など、クラス名を書くだけでデザインが完成します。

具体例:

<!-- 普通のCSS -->
<div class="my-button">ボタン</div>
<style>
.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

<!-- Tailwind CSS -->
<div class="bg-blue-500 text-white px-5 py-2.5 rounded">
  ボタン
</div>

なぜ必要？:

  • CSSファイルを書く必要がほぼない

  • デザインが爆速（クラス名を組み合わせるだけ）

  • レスポンシブ対応も簡単（`md:text-lg`でタブレット以上で文字大きく）

Day86での使われ方:
すべてのUI要素のスタイリングに使用

公式ドキュメント: Tailwind CSS 公式ドキュメント

🔧 開発ツール編

ESLint

一言で言うと: コードの「文法チェッカー」

身近な例え:
作文を書くとき：

  • ESLintなし: 誤字脱字、文法ミスに気づかず提出

  • ESLintあり: Wordの赤線（「これ間違ってるよ！」）が出る

ESLintは、「この書き方は危険だよ」「こっちの書き方のほうがいいよ」とコードに赤線を引いて教えてくれます。

具体例:

// ESLintが警告を出す例
const x = 10;  // ⚠️ 警告：変数xが使われていません

なぜ必要？:

  • バグの早期発見

  • コードの品質向上

  • チーム全員が同じルールで書ける

Day86での使われ方:
プロジェクト作成時に自動設定され、コード品質を維持

公式ドキュメント: ESLint 公式ドキュメント

Prettier

一言で言うと: コードを「自動で整形」してくれるツール

身近な例え:
ノートを書くとき：

  • Prettierなし: 文字がガタガタ、行揃えバラバラ

  • Prettierあり: ボタン1つで全部きれいに整列

Prettierは、保存した瞬間にコードの字下げ、改行、スペースなどを自動で整えてくれます。

具体例:

// 保存前
const   data={name:"Kenta",age:30  };

// 保存後（Prettierが自動整形）
const data = {
  name: "Kenta",
  age: 30,
};

なぜ必要？:

  • コードが読みやすくなる

  • フォーマット論争がなくなる（「インデントは2スペース？4スペース？」問題の解決）

  • チーム全員のコードが同じスタイルになる

Day86での使われ方:
コード保存時に自動整形

公式ドキュメント: Prettier 公式ドキュメント

Husky

一言で言うと: Gitコミット前の「門番」

身近な例え:
郵便物を送るとき：

  • Huskyなし: 住所を書き忘れたまま投函（届かない）

  • Huskyあり: 郵便局員が「住所書いてないですよ！」と教えてくれる

Huskyは、Gitでコミット（保存）する前に、「ESLintのエラーはないか？」「テストは通ったか？」をチェックしてくれます。

具体例:

$ git commit -m "新機能追加"
⚠️ エラー！ESLintで3個のエラーが見つかりました
→ コミットを中止します

なぜ必要？:

  • バグのあるコードをコミットできない

  • チーム全員が品質基準を守れる

  • 本番環境へのバグ混入を防ぐ

Day86での使われ方:
コミット前の品質チェックとして設定

公式ドキュメント: Husky 公式ドキュメント

📦 パッケージ管理編

npm

一言で言うと: プログラムの「部品倉庫」から必要なパーツを取り寄せる仕組み

身近な例え:
プラモデルを作るとき：

  • npmなし: 全部の部品を自分で作る（時間がかかる）

  • npmあり: Amazonで注文（すぐ届く）

npmは、世界中の開発者が作った便利なツール（パッケージ）を、コマンド1つでダウンロードできます。

具体例:

$ npm install react  # Reactをインストール
$ npm install axios  # HTTPリクエストツールをインストール

なぜ必要？:

  • 車輪の再発明をしなくていい（既にあるツールを使う）

  • 最新版への更新が簡単

  • 世界中の開発者と同じツールを使える

Day86での使われ方:
React、TypeScript、Vite、Tailwind CSSなどをすべてnpmでインストール

公式ドキュメント: npm 公式ドキュメント

💾 状態管理・ルーティング編

Zustand（状態管理）

一言で言うと: アプリ全体で共有する「メモ帳」

身近な例え:
家族の買い物リストを想像してください：

  • 状態管理なし: 各自がバラバラにメモ（誰が何を買ったか分からない）

  • Zustand: 冷蔵庫に貼った1枚の紙（全員が同じリストを見る）

Zustandは、「ログインユーザー名」「カートの中身」「ダークモード設定」など、アプリ全体で共有したいデータを管理します。

なぜ必要？:

  • どのページからでも同じデータにアクセスできる

  • データが変わったら、関連する画面すべてが自動更新

  • シンプルで学習コストが低い

Day86での使われ方:
記事データ、分析データ、設定などの管理

公式ドキュメント: Zustand 公式ドキュメント

React Router（ルーティング）

一言で言うと: ページ切り替えの「道案内」

身近な例え:
ショッピングモールを想像してください：

  • React Routerなし: 1フロアに全部の店が並ぶ（ごちゃごちゃ）

  • React Routerあり: 各フロアに分かれていて、エスカレーターで移動

React Routerは、`/home`（ホーム）、`/articles`（記事一覧）、`/settings`（設定）など、URLに応じて表示する画面を切り替えます。

具体例:

https://example.com/        → ホーム画面
https://example.com/articles → 記事一覧画面
https://example.com/settings → 設定画面

なぜ必要？:

  • ブラウザの戻るボタンが使える

  • URLを共有できる（特定のページを直接開ける）

  • ブックマークできる

Day86での使われ方:
ホーム、記事、分析、設定の各ページを管理

公式ドキュメント: React Router 公式ドキュメント

🔄 Git関連用語

Git worktrees

一言で言うと: 同じ本棚の本を、複数の部屋で同時に読める仕組み

身近な例え:
料理レシピ本を持っているとします：

  • 通常: リビングで読んでいたら、キッチンで見られない

  • Worktrees: リビング用とキッチン用の本を同時に開ける（実体は1冊だけど、分身が作れる）

開発では、「今の機能を壊さずに新機能を試す」ときに使います。Day86では、PM/Dev/QAの3つのworktreeを作成します。

なぜ必要？:

  • 安定版を触らずに実験できる

  • 複数の作業を同時並行できる

  • 作業を切り替える手間が激減

Day86での使われ方:
PM、Dev、QAの3つのサブエージェント用にworktreeを作成

公式ドキュメント (英語): Git - git-worktree Documentation

コンテキストスイッチが大変

一言で言うと: 作業を切り替えると、元の作業に戻る時に思い出すのが大変

身近な例え:
料理をしている途中で電話がかかってきたとします：

  1. 「今、野菜を炒めているところ」と覚える

  2. 電話対応

  3. 戻ったら「あれ、どこまでやったっけ？」

プログラミングでも、作業Aから作業Bに切り替えると、「どこまでやったっけ？」と思い出す時間が必要です。

なぜ問題？:

  • 思い出す時間が10分×10回 = 100分のロス

  • ミスが起きやすい

  • 集中力が途切れる

Day86での解決策:
Git worktreesとサブエージェントで、作業の切り替えを最小化

📁 プロジェクト構造編

ディレクトリ構造

一言で言うと: ファイルを「きちんと整理された本棚」に収納すること

身近な例え:
本棚を整理するとき：

  • 悪い例: 全部の本を床に積む（見つからない）

  • 良い例: ジャンル別の棚に分ける（すぐ見つかる）

src/
├── components/  （部品置き場）
├── pages/       （ページ置き場）
├── types/       （型定義置き場）
└── styles/      （スタイル置き場）

なぜ必要？:

  • ファイルがすぐ見つかる

  • チーム開発がスムーズ

  • 後から変更しやすい

Day86での使われ方:
完全なディレクトリ構造を作成（components、hooks、store、services等）

TypeScript型定義

一言で言うと: データの「設計図」

身近な例え:
家を建てるとき：

  • 型定義なし: 「なんとなく」で建てる（失敗する）

  • 型定義あり: 設計図を見ながら建てる（成功する）

型定義は、「記事データには、タイトル(文字)と日付(日付型)が入る」という設計図です。

なぜ必要？:

  • 間違ったデータを入れられない

  • IDEが自動補完してくれる

  • チームで同じ認識を持てる

Day86での使われ方:
7つの型定義ファイル（article.ts、analytics.ts、settings.ts等）を作成

🔗 関連記事

今回の用語を実際に使っている記事はこちら：

関連記事: Day86: Imagine終了でも大丈夫！実践🚀Claude Codeでチーム開発 - Week 1基盤構築編

Day85のプロトタイプから、Week 1基盤構築までの実践編です。

📝 まとめ

✅ Week 1で使う技術スタック

フレームワーク・ライブラリ

  • React: UIを作るレゴブロック

  • TypeScript: ミスを防ぐJavaScript

  • Vite: 爆速ビルドツール

スタイリング

  • Tailwind CSS: クラス名を書くだけでデザイン

開発ツール

  • ESLint: コードの文法チェッカー

  • Prettier: 自動整形ツール

  • Husky: コミット前の門番

パッケージ管理

  • npm: 部品倉庫からパーツを取り寄せ

状態管理・ルーティング

  • Zustand: アプリ全体の共有メモ帳

  • React Router: ページ切り替えの道案内

Git関連

  • Git worktrees: 複数の作業台で同時作業

  • コンテキストスイッチ: 作業切り替えのコスト

プロジェクト構造

  • ディレクトリ構造: きちんと整理された本棚

  • TypeScript型定義: データの設計図

🚀 次のステップ

これで、Day86のWeek 1実践編を読む準備が完璧に整いました！

用語の意味が分かったので、Claude Codeでサブエージェント開発を実践する記事も、スムーズに理解できるはずです。

自信を持って、Day86 Week 1基盤構築編に進みましょう！

🎨 おまけ：見出し画像作成プロンプト

今日の見出し画像のベースはチャッピー（ChatGPT）に下記プロンプトで作成してもらいました！：

柔らかな照明で撮影された超現実的でプロフェッショナルな写真を作成してください。

下記条件のnote見出し画像をサイズは横長で作成してください。サイズは必ず横長で作成してください。
## 🎨 見出し画像案

### デザインコンセプト
- **背景**: オレンジから黄色へのグラデーション（親しみやすさ・学習の楽しさ）
- **テーマ**: 用語解説 × 初心者向け
- **目的**: 難しい用語を身近に感じてもらう

### メインビジュアル
- 中央: 📚（辞書・本）のアイコン
- 左側: 💡（電球）のアイコン（理解の象徴）
- 右側: ✅（チェックマーク）のアイコン（習得完了）
- 周囲: 🔧（ツール）、🐳（Docker）、📊（データ）のアイコンを配置

### テキスト要素
- 上部: 「初心者OK！」（白色・太字・28pt）
- 中央: 「用語解説」（黄色・48pt・太字・最も目立つ）
- 中央下: 「API、Git、Docker」（白色・32pt）
- 下部: 「これだけ知っておけばOK」（白色・24pt）

### 装飾
- 辞書を開いているイメージ
- 電球が光っているエフェクト（💡✨）
- チェックマークが並ぶ（✅✅✅）
- 用語の吹き出し
- YaroTechロゴ（右下・12pt）

### カラーパレット
- **背景**: #FF8C00 → #FFD700（オレンジ→イエロー）
- **テキスト**: ホワイト（#FFFFFF）、イエロー（#FFD700）
- **アクセント**: オレンジ（#FFA500）

### 作成手順
1. スライドサイズ（1536×1024px）
2. オレンジ→黄色のグラデーション背景を作成
3. 中央に📚のアイコンを大きく配置
4. 左側に💡、右側に✅のアイコンを配置
5. 周囲に🔧、🐳、📊のアイコンを散りばめる
6. 「初心者OK！」を上部に配置
7. 「用語解説」を中央に大きく目立つように配置（黄色）
8. 「API、Git、Docker」を中央下に配置
9. 「これだけ知っておけばOK」を下部に配置
10. 辞書を開いているイメージ、電球の光エフェクトを追加
11. YaroTechロゴを右下に控えめに配置

#YaroTech #ClaudeCode #Week1基盤構築 #React #TypeScript #Vite #TailwindCSS #プログラミング初心者 #用語解説 #完全ガイド

いいなと思ったら応援しよう！

YaroTech｜生成AIの傾奇者 記事がお役に立てたなら嬉しいです！ いただいたチップは、新しいMCPツールの検証や、より深い実践実験の資金として大切に使わせていただきます。 あなたの応援が次の「AI活用の感動」を生み出す原動力になります✨ 一緒に羽ばたき続けましょう！