Web基礎

2025年度後期オリエンテーション

React / Next.js で学ぶモダンフロントエンド

授業でやること

  1. React ポケモン図鑑
    PokeAPI を使って React と API Fetch の基礎を習得 (4 週)

  2. Next.js + microCMS ブログサイト
    教科書のテンプレートを実装しモダン開発フローを理解 (6 週)

  3. ポートフォリオサイト
    ブログをベースに自分の作品を公開
    期末課題として提出(詳細はNotionページに書いています)

なぜこれを学ぶのか

  • React と Next.js は業界標準。習得 = 就職・案件の即戦力
  • API 連携を通して 自走力 を養う
  • テンプレート拡張 → 設計力・実装力 を体得
  • 生成AI・検索を駆使し 未知の領域を攻略する方法 を付ける

課題・評価

区分 提出物 配点
授業内課題・期末課題 React ポケモン図鑑(react-pokemon-zukan) 30%
中間課題 Next.js ブログサイト(my-next-project) 30%
期末課題 ポートフォリオサイト(react-next-portfolio) 40%

Reactポケモン図鑑
教科書課題
[ポートフォリオ](https://www.notion.so/kyototech/
react-next-portfolio-27c24b6a67ce8012aed8c275e46df9e3)

60 点以上で単位認定。詳細 rubric は Notion を参照。

進行スケジュール（概略）

週 トピック
1 オリエンテーション・環境構築・Reactポケモン図鑑
2–5 Reactポケモン図鑑
6–11 Next.js + microCMS (教科書に沿ってブログサイト作成)
12–14 ポートフォリオサイト開発
15 講評会

※ 詳細カレンダーは Notion に随時更新。

使用教材・参考リンク

次のステップ

  1. GitHub Education を有効化し Copilot を準備
  2. 自分の PC で Node.js / pnpm をインストール（Windows 勢は教室 iMac 可）
  3. 教科書を購入・予習
  4. Notion ページの FAQ を確認

質問があれば Slack / Notion でいつでも相談！

一緒にモダン Web を

楽しもう！