～ 簡易ショッピングサイトを例に実践的に学ぶ ～
目次
なぜドキュメントが重要なのか
現実的なメリット
開発の迷いがなくなる
- 何を作るか明確になる
- コーディング中に「次はどうしよう」で手が止まらない
- 無駄に機能を追加しないようになる
採用担当者への強力なアピール
- 「この人は開発プロセス全体を理解している」
- 「実務レベルの思考ができる」
- 「技術を言語化できる」
他の未経験者との差別化
- 多くの人は「動くもの」だけ作って終わり
- ドキュメントがあるだけで圧倒的に目立つ
対象者
- プログラミング未経験からエンジニア転職を目指す方
- 成果物作成中だが何をドキュメント化すべきか分からない方
必須ドキュメント一覧
未経験者が作成すべき7つの必須ドキュメント：
| ドキュメント | 作成タイミング | 所要時間 | 重要度 |
|---|---|---|---|
| 要件定義書 | プロジェクト開始時 | 4-6時間 | ★★★★★ |
| 技術スタック | 設計時 | 2-3時間 | ★★★★★ |
| データベース設計書 | 設計時 | 4-6時間 | ★★★★★ |
| 画面設計書 | 設計時 | 6-8時間 | ★★★★★ |
| 画面遷移図 | 設計時 | 3-4時間 | ★★★★★ |
| README.md | 開発開始時 | 2-3時間 | ★★★★★ |
| 環境構築手順 | 開発開始時 | 3-4時間 | ★★★★☆ |
各ドキュメントの作成方法
1. 要件定義書
目的：何を作るのか、なぜ作るのかを明確化
書くべき内容：
- プロジェクト背景・目的
- 成功の基準
- 機能要件（一般ユーザー向け・管理者向け）
- 制約事項
テンプレート：
簡易ショッピングサイト要件定義書
1. プロジェクト目的
- プログラミング学習の集大成として実用的なWebアプリを作成
- HTML/CSS/JavaScript/PHPの技術を組み合わせた開発経験
- 採用選考での技術力アピール
2. 成功の基準
- ユーザーが商品閲覧・カート追加・購入できる
- 管理者が商品の登録・編集・削除できる
- セキュリティ対策が実装されている
3. 主要機能
一般ユーザー向け
- 商品一覧・詳細表示
- ショッピングカート機能
- 購入フォーム
管理者向け
- 商品管理（登録・編集・削除）
4. 制約事項
- 個人学習プロジェクトのため決済は模擬実装
- 開発期間：2ヶ月程度
- 開発者：1名
作成のポイント：
- 学習目的でも立派な理由 - 「転職のため」「スキル向上のため」は正当な動機
- 制約を正直に書く - 現実的な開発計画を示す
- 具体的な成功基準 - 曖昧な表現は避ける
2. 技術スタック
目的：技術選定理由を明確化
書くべき内容：
- 使用技術一覧
- 各技術の選定理由
- バージョン情報
テンプレート：
技術スタック
フロントエンド
- HTML5/CSS3：標準的なマークアップ言語
- JavaScript (ES6+)：フレームワークなしでDOM操作を学習
- Bootstrap 5：高速開発とレスポンシブ対応
バックエンド
- PHP 8.0：Web開発で広く使用、学習コストが低い
- PDO：SQLインジェクション対策に優秀
データベース
- MySQL 8.0：無料で高機能、PHPとの相性が良い
開発環境
- XAMPP：Apache + MySQL + PHP が一括インストール
- Git + GitHub：バージョン管理とポートフォリオ公開
作成のポイント：
- 選定理由を必ず記載 - 技術理解度をアピール
- バージョン情報も明記 - 環境再現性を示す
- 学習要素を強調 - 成長意欲をアピール
3. データベース設計書
目的：データ構造と制約を明確化
書くべき内容：
- ER図
- テーブル定義
- 初期データ
テンプレート：
データベース設計書
1. ER図
categories ←→ products ←→ product_images
↓
order_items ←→ orders
2. 主要テーブル
products（商品）
| カラム名 | データ型 | 制約 | 説明 |
|-------------|---------------|--------------------|-------------|
| id | INT | PK, AUTO_INCREMENT | 商品ID |
| name | VARCHAR(100) | NOT NULL | 商品名 |
| price | DECIMAL(10,2) | NOT NULL | 価格 |
| category_id | INT | FK | カテゴリーID |
| created_at | TIMESTAMP | DEFAULT NOW() | 作成日時 |
orders（注文）
| カラム名 | データ型 | 制約 | 説明 |
|---------------|---------------|--------------------|---------|
| id | INT | PK, AUTO_INCREMENT | 注文ID |
| customer_name | VARCHAR(50) | NOT NULL | 顧客名 |
| total_amount | DECIMAL(10,2) | NOT NULL | 合計金額 |
| created_at | TIMESTAMP | DEFAULT NOW() | 注文日時 |
作成のポイント：
- 視覚的なER図 - 関係性を分かりやすく
- 適切な制約設定 - データ整合性への配慮を示す
- 将来の拡張性 - 長期的な視点をアピール
4. 画面設計書
目的：UI/UXを明確化
書くべき内容：
- 画面一覧
- 主要画面のレイアウト
- レスポンシブ対応
テンプレート：
画面設計書
1. 画面一覧
フロントエンド
| 画面ID | 画面名 | URL | 説明 |
|--------|-------------|----------------|--------------------|
| F001 | トップページ | / | 人気商品表示 |
| F002 | 商品一覧 | /products | 商品一覧・絞り込み |
| F003 | 商品詳細 | /products/{id} | 商品詳細・カート追加 |
| F004 | カート | /cart | カート内容確認 |
管理画面
| 画面ID | 画面名 | URL | 説明 |
|--------|---------|-----------------|-----------|
| A001 | ログイン | /admin/login | 管理者認証 |
| A002 | 商品管理 | /admin/products | 商品CRUD |
2. レスポンシブ対応
- モバイル：320px〜767px（2列グリッド）
- タブレット：768px〜1023px（3列グリッド）
- デスクトップ：1024px以上（4列グリッド）
3. 主要画面レイアウト
トップページ（デスクトップ）
┌─────────────────────────────────┐
│ ヘッダー │
│ [ロゴ] [検索バー] [カート] │
├─────────────────────────────────┤
│ メインビジュアル │
│ "Welcome to EasyShop" │
├─────────────────────────────────┤
│ 人気商品 │
│ [商品1] [商品2] [商品3] [商品4] │
└─────────────────────────────────┘
作成のポイント：
- 一貫性のあるURL設計 - RESTfulな設計思想
- ユーザビリティへの配慮 - 使いやすさを重視
- レスポンシブ対応 - モダンな開発手法
5. 画面遷移図
目的：ユーザーフローを明確化
テンプレート：
画面遷移図
一般ユーザーフロー
[トップページ] → [商品一覧] → [商品詳細] → [カート] → [注文完了]
↑ ↓
[検索結果] ←←←←←←←
管理者フロー
[ログイン] → [商品管理] → [商品登録/編集]
主要遷移パターン
- 商品詳細からカート追加：Ajax処理（画面遷移なし）
- カート数量変更：Ajax処理（画面遷移なし）
- エラー時：適切なエラーページへ
作成のポイント：
- シンプルな図 - 複雑にしすぎない
- Ajax処理も明記 - モダンなUX設計
- エラーハンドリング - 堅牢性への配慮
6. README.md
目的：プロジェクトの第一印象を決める
テンプレート：
EasyShop - 簡易ショッピングサイト
プロジェクト概要
個人学習用に作成したショッピングサイトです。
商品閲覧・カート機能・購入機能を実装しています。
使用技術
- Frontend: HTML, CSS, JavaScript, Bootstrap
- Backend: PHP 8.0
- Database: MySQL 8.0
主な機能
- 商品一覧・詳細表示
- ショッピングカート
- 商品管理（管理者）
デモ
[デモサイトURL]
ローカル環境での起動
1. リポジトリをクローン
git clone https://github.com/username/easyshop.git
2. データベース設定
- MySQLで「easyshop」データベースを作成
- config/database.phpで接続情報を設定
3. ローカルサーバー起動
php -S localhost:8000 -t public
作成者
[あなたの名前]
作成のポイント：
- 具体的な起動手順 - 採用担当者が実際に試せる
- デモURLの掲載 - すぐに動作確認できる
- 簡潔で分かりやすく - 最初の印象が重要
7. 環境構築手順
目的：開発環境の再現可能性
テンプレート：
環境構築手順
必要なソフトウェア
- XAMPP 8.0以上
- Git
- Visual Studio Code（推奨）
セットアップ手順
1. XAMPP インストール
1. [XAMPP公式サイト](https://www.apachefriends.org/)からダウンロード
2. インストール実行
3. Apache・MySQLを起動
2. プロジェクトセットアップ
XAMPPのhtdocsディレクトリに移動
cd C:\xampp\htdocs # Windows
cd /Applications/XAMPP/htdocs # Mac
リポジトリクローン
git clone [リポジトリURL]
cd easyshop
3. データベース設定
1. ブラウザで http://localhost/phpmyadmin にアクセス
2. 「easyshop」データベースを作成
3. database/schema.sqlを実行
4. 動作確認
http://localhost/easyshop でアクセス確認
トラブルシューティング
- Apacheが起動しない：ポート80が使用中の可能性
- データベース接続エラー：config/database.phpの設定確認
作成のポイント：
- OS別の手順 - 環境差異への配慮
- よくあるエラー - 実用性を重視
- 段階的な確認 - トラブル箇所の特定しやすさ
作成順序とタイミング
Phase 1：設計フェーズ（コーディング前）
- 要件定義書（1日目）- 何を作るかを明確化
- 技術スタック（2日目）- 使用技術の決定
- データベース設計書（3-4日目）- データ構造の設計
- 画面設計書（5-6日目）- UI/UXの設計
- 画面遷移図（7日目）- ユーザーフローの整理
Phase 2：開発開始時
- README.md（開発開始と同時）- プロジェクトの顔
- 環境構築手順（開発開始と同時）- 環境の再現性確保
重要：コーディングを始める前に1-5を必ず完成させる
採用担当者へのアピールポイント
1. 思考プロセスの可視化
「なぜこの技術を選んだのか」「どんな課題をどう解決したのか」という思考プロセスを説明できる
2. 実務レベルの理解度
要件定義から運用まで一連の開発プロセス全体を理解していることを示せる
3. 継続的改善への姿勢
ドキュメントの存在自体が、継続的に学習・改善する姿勢を示す
4. コミュニケーション能力
技術を文書化して説明する能力は、チーム開発において重要なスキル
5. 計画性・プロジェクト管理能力
計画的にドキュメントを作成し、プロジェクトを進行する能力
まとめ
成功の鍵は「ドキュメントを先に作る」こと
多くの未経験者は「とりあえず動くものを作ろう」と考えますが、設計を先に文書化することで：
- 開発中の迷いや手戻りを大幅削減
- 採用担当者への強力なアピール
- 体系的な開発プロセスの習得
- 他の未経験者との明確な差別化
付録：開発に必要なドキュメント一覧表
以下は開発プロジェクトで使用される全ドキュメントの一覧です。
- ◎：必須
- 〇：推奨
- −：不要またはオプション
