LESSON 45分

ストーリー

Day 1の朝。計画に従って、まずは環境構築から始める。

先
先輩
月1で学んだターミナル操作の出番だ。プロジェクト用のフォルダを作ろう

キーボードに手を置く。9ヶ月前の自分なら、ターミナルを開くことすら怖かったかもしれない。

でも今は違う。

必要なツールの確認

作業を始める前に、必要なツールが使えるか確認します。

ツール一覧

ツール用途確認コマンド
ターミナルコマンド操作（起動するだけ）
Gitバージョン管理git --version
SQLite3データベース操作sqlite3 --version
ブラウザWebページの表示確認（起動するだけ）
テキストエディタファイルの編集（VSCodeなど）

確認手順

ターミナルを開いて、以下のコマンドを実行してください。

# Gitのバージョン確認
git --version

# SQLite3のバージョン確認
sqlite3 --version

両方ともバージョン番号が表示されればOKです。

ヒント: ツールがインストールされていない場合

Git がない場合:

# macOS
xcode-select --install

# Ubuntu/Debian
sudo apt install git

SQLite3 がない場合:

# macOS（デフォルトで入っている場合が多い）
sqlite3 --version

# Ubuntu/Debian
sudo apt install sqlite3

プロジェクトフォルダの作成（月1の復習）

ディレクトリ構成

今回のプロジェクトのフォルダ構成を考えます。

graph TD
    Root["~/projects/"] --> Project["internal-tools-page/\nプロジェクトルート"]
    Project --> F1["index.html\nメインページ"]
    Project --> F2["style.css\nスタイルシート"]
    Project --> D1["data/\nデータ関連"]
    D1 --> F3["tools.db\nSQLiteデータベース"]
    Project --> D2["docs/\nドキュメント"]
    D2 --> D3["daily/\n日報"]
    D2 --> D4["report/\n報告書"]
    Project --> F4[".gitignore\nGit除外ファイル"]
    Project --> F5["README.md\nプロジェクト説明"]
    style Root fill:#f3f4f6,stroke:#9ca3af,color:#6b7280
    style Project fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e40af
    style D1 fill:#fef3c7,stroke:#d97706,color:#92400e
    style D2 fill:#fef3c7,stroke:#d97706,color:#92400e
    style D3 fill:#fef3c7,stroke:#d97706,color:#92400e
    style D4 fill:#fef3c7,stroke:#d97706,color:#92400e
    style F1 fill:#d1fae5,stroke:#059669,color:#065f46
    style F2 fill:#d1fae5,stroke:#059669,color:#065f46
    style F3 fill:#d1fae5,stroke:#059669,color:#065f46
    style F4 fill:#d1fae5,stroke:#059669,color:#065f46
    style F5 fill:#d1fae5,stroke:#059669,color:#065f46

フォルダ作成の実行

# ホームディレクトリに移動
cd ~

# projectsフォルダがなければ作成
mkdir -p projects

# プロジェクトフォルダを作成
mkdir -p projects/internal-tools-page

# プロジェクトフォルダに移動
cd projects/internal-tools-page

# サブフォルダを作成
mkdir -p data
mkdir -p docs/daily
mkdir -p docs/report

# 構成を確認
ls -la

確認

# ディレクトリ構造を確認
find . -type d

期待される出力：

.
./data
./docs
./docs/daily
./docs/report

.gitignore の作成

Gitで管理しないファイルを指定する .gitignore ファイルを作成します。

何を除外するか

除外対象理由
*.dbデータベースファイルはローカルで生成する
.DS_StoremacOSのシステムファイル
Thumbs.dbWindowsのシステムファイル
*.swpVimの一時ファイル

.gitignore の作成

以下の内容で .gitignore を作成してください。

cat > .gitignore << 'EOF'
# Database files
*.db

# OS generated files
.DS_Store
Thumbs.db

# Editor files
*.swp
*.swo
*~

# IDE
.vscode/
.idea/
EOF

確認

cat .gitignore
ヒント: なぜDBファイルを除外するのか

データベースファイル（*.db）はバイナリファイルです。Gitはテキストファイルの差分管理が得意ですが、バイナリファイルは差分が取れず、リポジトリサイズが大きくなります。

今回はSQLのCREATE TABLE文とINSERT文をファイルとして保存し、誰でもデータベースを再現できるようにします。

初期ファイルの作成

プロジェクトの骨格となるファイルを作成します。

index.html（空のテンプレート）

cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社内ツール紹介</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- TODO: コンテンツを追加する -->
</body>
</html>
EOF

style.css（空のテンプレート）

cat > style.css << 'EOF'
/* 社内ツール紹介ページ スタイルシート */
/* TODO: スタイルを追加する */
EOF

確認

ls -la

期待される出力（一部）：

.gitignore
index.html
style.css
data/
docs/

環境構築チェックリスト

すべての項目を確認してください。

#チェック項目状態
1Gitが使える[ ]
2SQLite3が使える[ ]
3プロジェクトフォルダが作成された[ ]
4サブフォルダ（data, docs）が作成された[ ]
5.gitignore が作成された[ ]
6index.html のテンプレートが作成された[ ]
7style.css のテンプレートが作成された[ ]

まとめ

ポイント内容
ツール確認Git, SQLite3, ブラウザ, エディタ
フォルダ構成用途ごとにサブフォルダを分ける
.gitignore管理不要なファイルを事前に除外
テンプレート空のHTML/CSSファイルを準備
  • 必要なツールがすべて使えることを確認した
  • プロジェクトフォルダを作成した
  • .gitignore を作成した
  • 初期ファイルを作成した

次のステップへ

環境が整いました。

次のセクションでは、このプロジェクトフォルダをGitリポジトリとして初期化し、最初のコミットを行います。

推定読了時間: 45分