ストーリー

ミッション概要

プロジェクトのREADMEファイルを作成してください。

達成条件

• プロジェクトの概要が書かれている
• ファイル構成が記載されている
• セットアップ手順が記載されている
• データベースの再現手順が記載されている
• コミット・プッシュした

READMEの構成（月9の復習）

良いREADMEには以下の要素が含まれます。

Part 1: READMEの作成

タスク 1-1: README.md を作成

cd ~/projects/internal-tools-page

cat > README.md << 'EOF'
# 社内ツール紹介ページ

社内で活用しているツール10件を紹介するWebページです。

## 概要

社内ツールの情報をデータベースで管理し、HTML/CSSでカテゴリ別に紹介するページを作成しました。

### 掲載ツール

| カテゴリ | ツール |
|---------|--------|
| 開発ツール | VS Code, GitHub, Docker |
| コミュニケーション | Slack, Google Workspace, Zoom |
| ドキュメント | Notion, Confluence |
| デザイン | Figma |
| プロジェクト管理 | Jira |

## 特徴

- カテゴリ別にツールを整理して表示
- 各ツールの名前、説明、公式サイトへのリンクを掲載
- ナビゲーションでカテゴリ間を移動可能
- シンプルで見やすいカード型デザイン

## ファイル構成

<pre data-language="mermaid">
graph TD
    Root["internal-tools-page/"]
    Root --> F1["index.html\nメインページ"]
    Root --> F2["style.css\nスタイルシート"]
    Root --> Data["data/"]
    Data --> CT["create_tables.sql"]
    Data --> ID["insert_data.sql"]
    Data --> QS["queries.sql"]
    Root --> Docs["docs/"]
    Docs --> AM["analysis.md"]
    Docs --> UC["url_check.md"]
    Docs --> TL["tool_list.txt"]
    Docs --> RR["review_result.md"]
    Docs --> Daily["daily/"]
    Daily --> D1["day1〜day5.md"]
    Docs --> Report["report/"]
    Report --> CR["completion_report.md"]
    Report --> WK["weekly.md"]
    Root --> GI[".gitignore"]
    Root --> RM["README.md"]
    style Root fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e40af
    style Data fill:#fef3c7,stroke:#d97706,color:#92400e
    style Docs fill:#fef3c7,stroke:#d97706,color:#92400e
    style Daily fill:#fef3c7,stroke:#d97706,color:#92400e
    style Report fill:#fef3c7,stroke:#d97706,color:#92400e
    style F1 fill:#d1fae5,stroke:#059669,color:#065f46
    style F2 fill:#d1fae5,stroke:#059669,color:#065f46
    style CT fill:#d1fae5,stroke:#059669,color:#065f46
    style ID fill:#d1fae5,stroke:#059669,color:#065f46
    style QS fill:#d1fae5,stroke:#059669,color:#065f46
    style AM fill:#d1fae5,stroke:#059669,color:#065f46
    style UC fill:#d1fae5,stroke:#059669,color:#065f46
    style TL fill:#d1fae5,stroke:#059669,color:#065f46
    style RR fill:#d1fae5,stroke:#059669,color:#065f46
    style D1 fill:#d1fae5,stroke:#059669,color:#065f46
    style CR fill:#d1fae5,stroke:#059669,color:#065f46
    style WK fill:#d1fae5,stroke:#059669,color:#065f46
    style GI fill:#f3f4f6,stroke:#9ca3af,color:#6b7280
    style RM fill:#d1fae5,stroke:#059669,color:#065f46
</pre>

## セットアップ

### 必要なツール

- ブラウザ（Chrome, Firefox, Safari など）
- SQLite3（データベースを再現する場合）

### Webページの表示

`index.html` をブラウザで開いてください。

```bash
open index.html  # macOS
xdg-open index.html  # Linux

データベースの再現

# データベースの作成
sqlite3 data/tools.db < data/create_tables.sql

# サンプルデータの投入
sqlite3 data/tools.db < data/insert_data.sql

# データの確認
sqlite3 -header -column data/tools.db "SELECT * FROM tools;"

技術スタック

作成者

（あなたの名前）

ライセンス

社内利用限定 EOF

---

## Part 2: READMEのチェック

### タスク 2-1: 内容の確認

```bash
cat README.md

チェックリスト

Part 3: コミット・プッシュ

タスク 3-1: コミット

git add README.md
git commit -m "プロジェクトREADMEを作成"

タスク 3-2: プッシュ

git push

タスク 3-3: GitHubで確認

GitHubのリポジトリページを開いて、READMEが表示されることを確認してください。

GitHubでは、リポジトリのトップページにREADME.mdの内容が自動的に表示されます。

良いREADMEのポイント

ポイント1: 最初の3秒で伝える

READMEを開いた人は、最初の数秒で「このプロジェクトは何か」を判断します。 タイトルと最初の1文で伝えましょう。

# 社内ツール紹介ページ
社内で活用しているツール10件を紹介するWebページです。

ポイント2: セットアップは「コピペで動く」レベルで

初めてこのプロジェクトに触れる人が、コマンドをコピペするだけで環境を作れるように書きます。

ポイント3: ファイル構成でプロジェクトの全体像を示す

ディレクトリツリーを見れば、どこに何があるかが一目でわかります。

まとめ

• READMEを作成した
• 内容を確認した
• コミット・プッシュした
• GitHubで表示を確認した

次のステップへ

READMEの作成が完了しました。

次のセクションでは、1週間の週報を作成します。 Day 5の最後の作業です。

推定所要時間: 60分