ポートフォリオ制作演習 / 約20分
ポートフォリオの磨き方（README・チェックリスト・面接ストーリー）
なぜこれを学ぶか
コードが動くようになったら、次は「見せ方」を磨く番です。このレッスンでは評価されるREADMEの書き方、動作チェックリスト、そして面接で使える「説明ストーリー」の組み立て方を学びます。同じアプリでも「見せ方」で評価が大きく変わります。
評価されるREADMEの6要素: ①概要（1〜2行）「このアプリは〇〇のためのWebアプリです」②デモURL（本番URLが命）③スクリーンショット（一覧ページ・登録画面を1〜2枚）④機能一覧（箇条書き）⑤技術スタック（使った言語・ライブラリ・DB）⑥ローカル起動手順（git clone → npm install → node server.js の3ステップで動くように）
動作確認チェックリスト（リリース前）: □ デプロイURL でブラウザから開ける □ 問い合わせを新規登録できる □ 一覧に表示される □ ステータスを変更できる □ ページをリロードしてもデータが残っている □ スマートフォンでも崩れない（最低限）□ README にデモURLが記載されている □ GitHubリポジトリがPublicになっている
面接での「ストーリー」組み立て方: 面接官は「技術の知識」だけでなく「課題を解決しようとした姿勢」と「学習プロセス」を見ています。推奨のストーリー構成: ①背景「〇〇という課題に気づき」→ ②目的「〇〇を解決するために作りました」→ ③技術選定の理由「〇〇を使った理由は〜です」→ ④苦労した点「実装で一番難しかったのは〜で、〜して解決しました」→ ⑤今後「次は〜機能を追加したいと考えています」
「苦労した点」の答え方: 最悪な答え: 「特になかったです」。良い答え: 「CORSエラーが出てAPIが繋がらず、2時間詰まりました。調べてExpressのcorsミドルウェアを設定したら解決しました」。具体的なエラー名と解決プロセスが「実際に作った証拠」になります。作業ログ（メモやコミットログ）を見返して準備しておく。
【ワークシート P4】: 自分のポートフォリオ用に以下を作成してください。①READMEのドラフト（概要・デモURL・機能・技術スタック・起動手順）②動作確認チェックリスト（上記8項目を自分のアプリに合わせて追記）③面接用ストーリー（5段階の構成で100〜200字）④「苦労した点と解決策」を2〜3個書き出す（コミットログを見返して）
重要ポイント
- READMEの6要素: 概要・デモURL・スクリーンショット・機能・技術スタック・起動手順
- デプロイURLとGitHubのPublic設定が命。まずここから
- 面接ストーリーは「背景→目的→技術選定→苦労→今後」の5段階で
- 「苦労した点」は具体的なエラー名と解決プロセスで答える。「なかった」は最悪
理解度チェック
選ぶと即座に解説が表示されます。
面接でポートフォリオを説明するとき、最も評価される「苦労した点」の答え方はどれ？
ヒントを見る
面接官は「完璧な経験」ではなく「問題を解決した過程」を知りたがっています。
コードレビュー演習
以下はポートフォリオのREADMEドラフトです。 「評価されるREADMEの6要素」の観点で、最も重要な欠落を見つけてください。
# ContactBoard - 問い合わせ管理ツール
## 概要
社内の問い合わせをWebで管理するツールです。
## 機能
- 問い合わせの一覧表示
- 新規問い合わせの登録
- ステータスの変更（未対応・対応中・完了）
## 技術スタック
- フロントエンド: HTML / CSS / JavaScript
- バックエンド: Node.js + Express
- データベース: SQLite
## ローカル起動手順
```bash
git clone https://github.com/yourname/contact-board.git
cd contact-board
npm install
node server.js
```
ブラウザで http://localhost:3000 を開いてください。このREADMEで最も重要な欠落はどれ？
ヒントを見る
面接官がGitHubを開いて最初に確認する「証拠」は何でしょうか？
スキルセルフチェック
このレッスンの内容をどの程度理解できましたか？