~/VibeHandbook
$39

05 · 06

プロジェクトの形

典型的なプロジェクトを開くと、フォルダの一覧はノイズのように感じられるかもしれません。でもそうではありません。ほとんどのプロジェクトは見覚えのあるパターンに従っています。これは余分なものを削ぎ落としたWebアプリの例です。

my-app/
├── package.json          # 依存関係+実行コマンド(上で見たもの)
├── package-lock.json     # lockfile — 正確なバージョン
├── .env                  # ローカルの秘密情報/設定 — 共有しない
├── .gitignore            # Git が無視すべきファイル(.env など)
├── README.md             # このプロジェクトは何で、どう動かすか
├── public/               # そのまま配信される静的ファイル(画像、アイコン)
└── src/                  # 実際のコードはここにある
    ├── components/        # 再利用可能な frontend の部品(ボタン、カード)
    ├── pages/ (or app/)   # ユーザーが移動する画面/ルート
    ├── lib/               # 共有のヘルパーと backend のロジック
    └── styles/            # CSS

これを暗記する必要はありません——ただ見覚えがあればいいのです。そうすればAIが「これを src/lib に追加します」と言ったとき、それがだいたいどこにあって、なぜそこなのかが分かります。いくつかの土台となる慣習を挙げます。

  • src/ にはあなたが書くコードが入ります。トップレベルにごちゃごちゃしているのは、ほとんどが設定です。
  • ルートにある設定ファイルpackage.json やドットファイル)は、ツールを設定するものであって、アプリの振る舞いを設定するものではありません。
  • .gitignore には、バージョン管理に保存されるべきでないファイルが並びます——あなたの .env はここに属しますし、まさにこれによって秘密の情報が共有リポジトリの外に保たれるのです。

オフラインでも読みたい?

PDF + EPUB + ダウンロード可能なプロンプトライブラリ + バージョンアップデートを入手しよう。

$ PDFを入手 — $39