ポートフォリオ制作演習 / 約25分
ポートフォリオ設計（何を作るか・技術選定・マイルストーン）
なぜこれを学ぶか
就職・転職面接で最も聞かれる質問は「ポートフォリオを見せてください」です。しかし「何でもいいから作る」では評価されません。このレッスンでは「誰のためのどんな課題を解決するアプリか」を言語化し、技術選定とマイルストーンを設計します。
評価されるポートフォリオの3条件: ①課題が明確（「〇〇が困っていること」を一文で言える）②動くものがある（デプロイ済みで実際に試せる）③コードが読める（GitHubに公開、READMEが丁寧）。「技術の新しさ」より「課題解決の説明できる度」が重要です。
ポートフォリオのテーマ選定3原則: ①自分が困ったことを解決する（「自分が毎朝Excelに書いている〇〇を自動化したい」）②身の丈のスコープに絞る（最初は1機能でよい。機能を増やすより「完成してデプロイ」が10倍価値がある）③既存ツールの簡易版でよい（TodoアプリでもDB・API・認証があれば十分な技術力の証明になる）
推奨テーマ: 問い合わせ管理ツール（ContactBoard）: 以降のレッスンではこのテーマを例に設計を進めます。「社内で問い合わせをExcelで管理しているが、誰が対応中か分からない」という課題を解決するWebアプリです。機能: 問い合わせの一覧・登録・ステータス管理（未対応/対応中/完了）。技術スタック（例）: フロントHTML/CSS/JS、バックエンドNode.js + Express、DBは SQLite（ローカル）/PostgreSQL（本番）。
技術選定の考え方: 「最新技術を使う」のではなく「自分が説明できる技術を使う」。面接で「なぜこの技術を選びましたか？」と必ず聞かれます。選んだ理由（軽量・学習コスト・日本語情報が多い等）を言語化できるものを選ぶ。
マイルストーン計画の例（4週間）: Week1: DB設計・環境構築・Git初期化。Week2: バックエンドAPI実装（GET/POST/PATCH）。Week3: フロントエンド画面実装・API接続。Week4: デプロイ・README作成・動作確認。「毎日少しずつ」より「週ごとの完成物を決める」のがコツ。
【ワークシート P1】: 以下の項目を手元のメモ帳（またはテキストエディタ）に書き出してください。①対象ユーザー: 「〇〇な人が」②課題: 「〇〇で困っている（現状）」③解決: 「〇〇を作ることで、△△できるようになる」④必須機能: 最大3つ（例: 登録・一覧・ステータス変更）⑤技術スタック: フロント・バックエンド・DB⑥マイルストーン: Week1〜4の完成物
重要ポイント
- 評価されるポートフォリオの3条件: 課題が明確・動くものがある・コードが読める
- スコープは最小限に。1機能でもデプロイされたものが10倍価値がある
- 技術選定は「説明できるもの」を選ぶ。面接で必ず理由を聞かれる
- マイルストーンは「週ごとの完成物」で設計する
理解度チェック
選ぶと即座に解説が表示されます。
ポートフォリオのテーマ選定として、最も面接で評価されやすいのはどれ？
ヒントを見る
面接官が見ているのは「技術の新しさ」ではなく「課題解決の言語化力」です。
コードレビュー演習
以下は「問い合わせ管理ツール（ContactBoard）」のポートフォリオ企画書ドラフトです。5つの項目を確認し、最も改善が必要な箇所を選んでください。
/* === ポートフォリオ企画書ドラフト === */
// ① 対象ユーザー
「社内で問い合わせ対応をExcelで管理しているヘルプデスク担当者」
// ② 課題（現状）
「Excelのシートで問い合わせを管理しているため、
誰が対応中か・未対応がいくつあるか一目で分からない」
// ③ 解決（このアプリで実現すること）
「問い合わせをWebで登録・一覧・ステータス管理でき、
対応状況をリアルタイムで確認できるツールを作る」
// ④ 機能スコープ
「問い合わせ登録 / 一覧表示 / ステータス変更 /
全機能（チャット・通知・メール送信・権限管理・多言語対応）も実装したい」
// ⑤ 技術選定
「Node.js + Express + SQLite / 理由: 軽量で学習コストが低く、
一人でフルスタックを体験できるため」④の機能スコープに問題があります。最も的確な改善指摘はどれ？
ヒントを見る
「全機能実装したい」と「評価されるポートフォリオ」の関係を考えてください。
スキルセルフチェック
このレッスンの内容をどの程度理解できましたか？