ファイル構成
納品ファイル
納品ファイルの構成はクライアントなどが定義したサイトマップに則って出力されるようにしてください。
例は以下となります。
ディレクトリroot
- index.html // Topページ
ディレクトリassets/
ディレクトリcss/
- …
ディレクトリfonts/
- …
ディレクトリimages/
- …
ディレクトリjs/
- …
ディレクトリcategory/
- index.html
Node.jsなどを用いてビルドステップを挟む場合、URLに影響するもの以外はある程度ざっくりした構成にしてしまって構いません。 ただし、公開後にビルドステップを挟まない運用を想定している場合はサイトオーナーやクライアントとファイル格納のルールについて示し合わせてください。
開発環境
開発環境のファイル構成はその時に使いやすい構成であれば問題ありません。
制作するものの規模や開発チームの大きさやスキルセットなどで必要な構成はかわってくるためプロジェクトに合わせて設計してください。
設計したディレクトリ構成はREADMEに記載しましょう。
いくつかのパターンを記載します。
推奨環境に従う
JavaScriptフレームワークを使用する場合はそのフレームワークが推奨しているファイル構成にしましょう。
公式ドキュメント上で推奨を謳っていなくても、サンプルリポジトリなどはある程度の一貫性があるため参考にできます。
パターン1
NextJsなどと同様にpagesディレクトリを使用し、各コンポーネントでstorybookのstoryを管理する場合。
ディレクトリlint-tools/ // monosus/lint-tools
- …
ディレクトリpublic // 変更を加えずdistフォルダにそのままコピーされるもの
ディレクトリimages/
ディレクトリbland/
- logo.svg
ディレクトリscript/
- gtm.js
ディレクトリsrc
ディレクトリassets/
ディレクトリimages/
- xxxxx.webp
ディレクトリstyle/
- base.css
- tokens.css
- ui.css
ディレクトリ_import
- reset.css
- button.css
- xxx.css
ディレクトリindex.ts
ディレクトリmodules
- dataScheme.ts
- dialogHelper.ts
ディレクトリcomponents
ディレクトリbutton/
- index.tsx
- button.stories.tsx
ディレクトリheader/
- index.tsx
- header.stories.tsx
ディレクトリpages/
- index.tsx
パターン2
モノサスコーディングテンプレート。gulpファイルでコンパイルや出力先をコントロールしている。
ディレクトリlint-tools/ // monosus/lint-tools
- …
ディレクトリsrc
ディレクトリimage/
- …
ディレクトリjs/
- …
ディレクトリstatic/ // pdfなど
- …
ディレクトリstyles/
- …
ディレクトリview/
ディレクトリcomponents/
- …
ディレクトリlayouts/
- …
ディレクトリpages/
- …
バージョン管理に含めないファイル
以下のファイルなどは.gitignoreで管理し、リモートリポジトリに入りこまないようにしてください。
.env、.env.localなどの環境変数ファイル- APIキー、パスワード、クレデンシャル情報が含まれるファイル
- SSL証明書や秘密鍵ファイル
- ログファイルや分析データ
- 依存ライブラリ（
node_modules/） - ブランチ（作業者）ごとに巨大な差分がでるもの
- CSSフレームワークなどのキャッシュ
- 開発時に自動的に生成されるファイル
- コンパイル、ビルド時の出力
- OSが自動で生成するもの
.DS_Store、Thumbs.db
- その他、納品時に含めない、含めるべきでないファイル
- 個人的なメモ書き
- 退避目的でとりあえずコピーしたファイル・フォルダ
.gitignoreのスターターとしてmonosus/lint-tools/.gitignoreからプロジェクト用に修正することができます。
判断に迷うもの
例えば.vscode/のようなエディターの設定ファイルについてプロジェクト内で拡張機能を揃える必要がある場合はバージョン管理下に置きましょう。
とくにその様な取り決めがない場合は管理対象外とします。