ゼロから始めるReact〜Next.jsの雰囲気を添えて〜
概要
大学祭実行委員会の開発チームに参加する新入生が,Web 開発の基礎からモダンなフロントエンド/フルスタック開発まで駆け上がれるよう構成した教材群です。ハンズオンで手を動かしながら,チーム開発に欠かせない土台づくりと Next.js を軸とした実践力の習得を目指します。
学びのロードマップ
Tip
初めての方は以下の順番で読み進めるとスムーズです。
- 開発の基礎
ファイルシステム・環境構築・Git の基本を整えます。 - HTML・CSS
Web ページの骨組みとデザインをハンズオンで体験します。 - JavaScript / TypeScript
DOM 操作・非同期処理・型の基礎を押さえます。 - React
宣言的 UI・コンポーネント・State を理解し,Next.js へつなげます。 - Next.js (App Router)
フルスタック開発のワークフローを学び,実務に近いダッシュボードアプリを仕上げます。
コース活用のヒント
- Happa の開発・運用に参加する場合は必修です。団体管理システム「Happa」は Next.js の App Router を採用しているため,本コースの習得を前提に作業が進みます。
- 大学祭ホームページ担当で Pages Router を扱う場合は任意です。必要に応じて App Router 章を選択してください。
- つまずいたときは実行委員会の Slack でいつでも相談して構いません。学習ログを残しておくと振り返りやレビューがスムーズになります。
謝辞
React の章は Next.js 公式の「React Foundations」(Vercel 社提供)を日本語訳し,一部編集・再構成したものです。原著の著作権は Vercel 社に帰属します。
Next.js (App Router) の章も同様に,公式ハンズオン「App Router (Dashboard App)」を翻訳・再編集した教材です。