ポートフォリオ制作演習 / 約25分
実装プラン（Git構成・フェーズ分割・デイリー目標）
なぜこれを学ぶか
設計図が完成したら、次は「どう実装するか」の計画を立てます。このレッスンではGitリポジトリ構成・実装フェーズ分割・デイリー目標の立て方を学びます。計画なしに始めると、必ず途中で迷子になります。
Gitリポジトリの初期構成: 推奨フォルダ構成:`
contact-board/
├── README.md # 最初に書く（設計メモを移すだけ）
├── .gitignore # node_modules/, .env は絶対に入れる
├── package.json # npm init で生成
├── server.js # Expressのエントリーポイント
├── public/ # フロントエンド（HTML/CSS/JS）
│ ├── index.html
│ ├── style.css
│ └── app.js
└── database.js # SQLiteの接続・初期化
`最初のコミットは「Initial commit: プロジェクト構成作成」だけでよい。
実装フェーズの分割（4フェーズ）: Phase1（環境構築）: Git init・npm init・.gitignore作成・Hello World確認。Phase2（DB）: SQLite接続・contactsテーブル作成・INSERTとSELECTの確認。Phase3（API）: GET /api/contacts・POST /api/contacts・PATCH /api/contacts/:id の3エンドポイント実装。Phase4（フロントエンド）: 一覧表示・登録フォーム・ステータス変更ボタン・デプロイ。各フェーズで「動くものをコミット」してからフェーズを進める。
デイリー目標の立て方: 「今日は何かを実装する」ではなく「今日はサーバーが起動してHello Worldが返るまで」「今日はSQLiteに接続してテーブルを作るまで」という「完了の定義」を決める。1回のコーディングセッションは1〜2時間が集中力の限界。完了の定義が小さいほど継続しやすい。
コミットメッセージの書き方: feat: 問い合わせ一覧取得APIを追加（機能追加）/ fix: statusがnullのときのエラーを修正（バグ修正）/ docs: READMEにAPI仕様を追記（ドキュメント）/ refactor: 問い合わせ取得ロジックを関数化（リファクタリング）。動詞+コロン+日本語の1行で。
デプロイ先の選択肢: 無料でデプロイできるサービス: Render.com（Node.js + SQLite対応）・Railway（PostgreSQL対応）・Cloudflare Pages + Workers（静的サイト + API）・Vercel（フロントエンド）。「動く本番URLがある」ことが面接で非常に重要なので、最終フェーズでは必ずデプロイまで行う。
【ワークシート P3】: 手元のメモ帳に書いてください。①リポジトリ名（例: contact-board）②フォルダ構成（上記をベースに自分のアプリ用に調整）③Phase1〜4の完了定義（各フェーズで「何ができれば完了か」を一文で）④Week1〜4のデイリー目標（Week1はPhase1+2、Week2はPhase3、等）
重要ポイント
- README.mdとGitは「最初のコミット」から始める。後で作ると忘れる
- 実装は4フェーズに分け、各フェーズで「動くものをコミット」してから次へ
- デイリー目標は「完了の定義」を小さく明確に設定する
- デプロイまでやり切ることが最重要。本番URLが面接で使える
理解度チェック
選ぶと即座に解説が表示されます。
Gitリポジトリの.gitignoreに必ず追加すべきファイル・フォルダはどれ？
ヒントを見る
Gitに上げてはいけない「秘密情報」と「依存関係の巨大フォルダ」を考えましょう。
コードレビュー演習
以下はNode.js + ExpressのAPIサーバーの「一覧取得エンドポイント」の実装例です。 コードレビューの観点で、最も改善が必要な箇所を見つけてください。
/* === GET /api/contacts の実装例 === */
const express = require('express')
const sqlite3 = require('sqlite3').verbose()
const app = express()
// ① DBへの接続（ハードコード）
const db = new sqlite3.Database('./contacts.db')
const DB_PASSWORD = 'admin123' // ② 未使用だがコードに残っている
app.get('/api/contacts', (req, res) => {
// ③ SQL（プレースホルダー使用・問題なし）
db.all('SELECT * FROM contacts ORDER BY created_at DESC', [], (err, rows) => {
if (err) {
// ④ エラー情報をそのままレスポンスに返している
return res.status(500).json({ error: err.message, stack: err.stack })
}
res.json(rows)
})
})
app.listen(3000, () => console.log('Server running on port 3000'))このコードで「本番環境に出してはいけない」最重大な問題はどれ？
ヒントを見る
セキュリティの観点で「外部に漏らしてはいけない情報」を探しましょう。
スキルセルフチェック
このレッスンの内容をどの程度理解できましたか？