Webコースへようこそ
お疲れさまでした！「Web・プログラミング基礎」を完了しましたね。
ここからは Webコース に入ります。
Webコースで作るもの
このコースでは、自分で考えたWebアプリを作って公開することが最終ゴールです。
- ユーザー登録・ログインができる
- データを保存・表示・削除できる
- インターネットに公開されている
6月下旬の発表会で、自分のアプリをデモします。
使う技術スタック
| 役割 | 技術 | 説明 |
|---|---|---|
| フロントエンド | Next.js 16 | React ベースのフレームワーク。ページ・ルーティング・APIを一括管理できる |
| スタイリング | Tailwind CSS / MUI | CSSを効率よく書ける。MUIはUIコンポーネントが豊富 |
| バックエンド | Next.js API Routes | 同じプロジェクト内にAPIサーバーを作れる |
| データベース | Supabase | PostgreSQLのDBをクラウドで管理できる無料サービス |
| ORM | Prisma | JavaScriptからDBを操作するためのライブラリ |
| 認証 | Supabase Auth | メール/パスワード認証をかんたんに実装できる |
| デプロイ | Vercel | GitHubと連携してNext.jsアプリを公開できる |
「Supabase？Prisma？」と思っても大丈夫です。それぞれ使うタイミングで丁寧に説明します。
Webコースの全体の流れ
各セクションの目安時間
| セクション | 目安 | やること |
|---|---|---|
| Reactの基本 | 1〜1.5週 | Next.jsセットアップ、コンポーネント、state、画面遷移 |
| スタイリング | 0.5週 | Tailwind・MUIでデザインを整える |
| バックエンド・DB | 1.5〜2週 | API作成、DB設計、Todoアプリ完成、認証実装 |
| 自作アプリ開発 | 4週 | 企画〜実装〜デプロイ |
このコースで身につくこと
- Reactコンポーネントを自分で設計・実装できる
- REST APIを作ってフロントエンドとつなげられる
- DBのスキーマを設計してCRUD操作を実装できる
- 認証機能（ログイン・ログアウト）を実装できる
- 作ったアプリをインターネットに公開できる
セキュリティについて
このコースでは、セキュリティも実践の中で学びます。
「脆弱なコードを先に書いて、攻撃を体験してから直す」という流れで、
XSSやSQLインジェクションなどを身をもって理解します。
困ったときは
- 30分ルール: 30分悩んでも解決しなければメンターに相談する
- AIを使う: エラーメッセージとコードをそのまま貼れば解決することが多い
- リファレンス: よくあるエラーと対処法 を確認する
次のステップ
まずはReactとNext.jsの基本から入ります。
Last updated on