HTML / CSS / JavaScript / TypeScript / React / Next.js を使ったWebページ・UIを自分で書ける技術を、基礎から応用まで体系的に学べる教材リポジトリです。
初学者でも迷わず、最終的に自力でWebサイトを構築・公開できる状態を目指します。 必ずこのページの最後の重要を読んでください。
| 学習ゴール | 内容 |
|---|---|
| 技術力 | TypeScript / React / Next.js を理解し使い分けできる |
| 実装力 | UIコンポーネントを組み立ててWebサイトを書ける |
| 設計力 | 情報設計・状態管理を踏まえて書ける |
| 発信力 | GitHub Pages または Vercel で公開できる |
| 自走力 | 自力で環境構築からデプロイまで実行できる |
| 章 | 内容 | 成果物 |
|---|---|---|
| 第1章: 環境構築 | VS Code / Node.js / GitHub / Next.js 初期化 | Hello World |
| 第2章: HTML & CSS | レイアウト・レスポンシブ・基本スタイル | 個人プロフィールページ |
| 第3章: JavaScript基礎 | DOM操作、イベント制御 | インタラクティブUI |
| 第4章: TypeScript入門 | 型安全なコンポーネント設計 | 型安全ToDoアプリ |
| 第5章: React基礎 | コンポーネント化、状態管理 | 高機能ToDoアプリ |
| 第6章: Next.js入門 | ルーティング、画像最適化 | 複数ページサイト |
| 第7章: UX向上 | フォーム、API通信、SPA強化 | 簡易Webサービス |
| 第8章: 公開と運用 | Vercel デプロイ、メタ情報設計 | 公開作品URL |
| 第9章: 応用・総合制作 | 自由制作、改善サイクル | 個人Webサイト完成 |
- パソコン（Windows / macOS / Linux）
- インターネット接続
- やる気と好奇心！
git clone https://github.com/K-Subaru-nd80/WebIntro.git
cd WebIntro# 第1章の教材を読む
cat docs/01_env/README.md
# サンプルコードを確認
cat samples/01_env/README.md各章のサンプルコードを自分で実装してみましょう。
# 例: 第1章のサンプルを作成
npx create-next-app@latest my-first-app
cd my-first-app
npm run devWebIntro/
├── docs/ # 教材（Markdown形式）
│ ├── 01_env/ # 第1章: 環境構築
│ ├── 02_html-css/ # 第2章: HTML & CSS
│ ├── 03_js/ # 第3章: JavaScript基礎
│ ├── 04_ts/ # 第4章: TypeScript入門
│ ├── 05_react/ # 第5章: React基礎
│ ├── 06_nextjs/ # 第6章: Next.js入門
│ ├── 07_ux/ # 第7章: UX向上
│ ├── 08_deploy/ # 第8章: 公開と運用
│ └── 09_final/ # 第9章: 応用・総合制作
├── samples/ # 動くサンプルコード
│ ├── 01_env/
│ ├── 02_html-css/
│ ├── ...
│ └── 09_final/
├── CHANGELOG.md # 変更履歴
└── README.md # このファイル
章は基礎から応用へと段階的に構成されています。飛ばさずに順番に学習することをおすすめします。
読むだけでなく、必ず自分でコードを書いて実行してみましょう。
エラーは成長のチャンス。各章の「よくあるエラーと解決策」を参考に、自力で解決してみましょう。
各章末のミニ課題に挑戦することで、理解が深まります。
学んだことを形にして、Webに公開してみましょう。第8章でデプロイ方法を学びます。
- Webフロントエンド初心者〜中級者
- UI/UX・Web制作に興味がある学習者
- 自分のWebサイトを作りたい人
- プログラミングの基礎を学びたい人
このコースで扱う技術：
- HTML5 - Webページの構造
- CSS3 - スタイリング
- JavaScript (ES6+) - プログラミング
- TypeScript - 型安全な開発
- React - UIライブラリ
- Next.js - Reactフレームワーク
- Tailwind CSS - ユーティリティファーストCSS
- Git & GitHub - バージョン管理
- Vercel - デプロイ・ホスティング
- 第1章: 2時間
- 第2章: 4時間
- 第3章: 6時間
- 第4章: 4時間
- 第5章: 6時間
- 第6章: 4時間
- 第7章: 6時間
- 第8章: 3時間
- 第9章: 10時間以上（総合制作）
合計: 約45時間（自分のペースで進めましょう）
GitHub Issuesで受け付けています： Issues
誤字脱字の修正や内容の改善は、プルリクエストをお送りください。
このプロジェクトはMITライセンスの下で公開されています。
このプロジェクトに貢献してくださった皆様に感謝します。
- MDN Web Docs - HTML/CSS/JavaScript
- TypeScript公式
- React公式
- Next.js公式
- Tailwind CSS公式
すべての章を完了したら、以下を試してみましょう：
-
ポートフォリオサイトを作成
- これまで学んだことを活かして、自分のポートフォリオサイトを作りましょう
-
GitHubで公開
- 作成したプロジェクトをGitHubで公開して、他の人に見てもらいましょう
-
SNSでシェア
- 学習の成果をTwitter/Xなどでシェアしましょう
- ハッシュタグ:
#WebIntro#フロントエンド学習
-
次のステップへ
- さらに学びたい方は、第9章の「次のステップ」を参照してください
Webフロントエンド開発は、学び始めは大変かもしれませんが、一歩ずつ進めば必ず形になります。
このコースがあなたのWeb開発の旅の良きパートナーとなることを願っています。
このコンテンツの内容は全てClaudeが作成したものであり、このコードを実行して何らかの被害に遭われても、一切の責任を負いません。
Let's build the web together! 🚀
作成者: K-Subaru-nd80 最終更新: 2025年11月17日