読者です 読者をやめる 読者になる 読者になる

GitHubのWeb系プロジェクトのフォルダ構成を調べてみる

モンストのガチャ、大不調。当たりがなかなか出ません。ハーレーX欲しい…。

今回はいつにも増して地味なのですが、GitHubで新しくプロジェクトを始めるにあたってリポジトリ名やフォルダ構成で迷ったので、他のメジャーなプロジェクトがどうしているか調べてみました。

GitHubのWeb系プロジェクトのフォルダ構成

GitHubで新しくプロジェクトを作る時にいくつか迷うことがあります。例えば、

  • リポジトリ名はすべて小文字にするか
  • リポジトリ名に.jsのようにドットを含めるか、-jsのようにハイフンに置き換えるか
  • ソースコードを置くフォルダはjssrc
  • テストコードを置くフォルダはtesttests
  • 外部ライブラリを置くフォルダはvendorlib
  • 完成したライブラリはどこに置くか

といったことです。特にフォルダ名を単数形と複数形のどちらにするかといった話は、ネイティブスピーカーでない人間にとってはなかなかニュアンスや慣習がわからなくてもやもやするところです。そこでGitHubのメジャーなプロジェクトを参考にしてみます。

参考にしたプロジェクト

参考にしたGitHubのプロジェクトは以下のとおりです。私が普段使ったり参考にすることが多いプロジェクトを選んでいます。

プロジェクト名 リポジトリ スター数 概要
jQuery jquery 30,235 DOM操作ユーティリティ
AngularJS angular.js 22,167 MVCフレームワーク
BackboneJS backbone 17,483 MVCフレームワーク
three.js three.js 14,677 3Dグラフィックスエンジン
Pixi.js pixi.js 3,914 2Dグラフィックスエンジン
Phaser phaser 3,734 ゲームエンジン
Processing.js processing-js 1,330 ビジュアルデザインライブラリ

Processing.jsのスター数が思った以上に少ない事にびっくりですが、それはさておき、どのプロジェクトもリポジトリ名は全て小文字名前の.(ドット)は置き換えずにそのまま使用しています。

では、それぞれのプロジェクトのフォルダ構成から、共通する主要部分を抜き出してみます。

jQuery

build/ # リリース用スクリプト置き場
dist/ # ライブラリ本体置き場(ビルド時に自動作成される)
src/
test/
Gruntfile.js

buildにはライブラリ本体ではなく、ビルド用スクリプトを置くという点が他のプロジェクトと異なっています。

AngularJS

build/ # ライブラリ本体置き場(ビルド時に自動作成される)
docs/
lib/ # 外部ライブラリ置き場
src/
test/
Gruntfile.js

BackboneJS

docs/
examples/
test/
# ライブラリ本体はルート直下に置かれる

three.js

build/ # ライブラリ本体置き場
docs/
examples/
src/
test/

Pixi.js

bin/ # ライブラリ本体置き場
docs/
examples/
src/
test/
Gruntfile.js

ネイティブ言語時代の名残か、ライブラリ本体の置き場がbinフォルダになっています。

Phaser

build/ # ライブラリ本体置き場
dist/ # ビルド時の一時ファイル置き場として使用
docs/
examples/
src/
Gruntfile.js

distフォルダでビルドを行って、リリース時にbuildフォルダへライブラリ本体をコピーしています。

Processing.js

lib/ # テスト用外部ツール置き場
src/
test/
Gruntfile.js
# ライブラリ本体はルート直下に置かれる

わかったこと

もっとバラバラになるかと思っていたのですが、想像以上にどのプロジェクトも同じフォルダ構成になっていました。気づいたことを挙げてみます。

  • ソースコード置き場は皆srcフォルダを使っている(jsだと言語が限定されてしまうから?)
  • docsexamplesなど複数種類のものが寄せ集めになるフォルダは複数形を使っている
  • ただしテストコードを置くフォルダは単数形のtestを使う(一連のユニットテストをまとめて1つという扱い?)
  • 外部ライブラリやツールはlibフォルダに置かれることが多い
  • 出力されたライブラリはbuildフォルダに置かれることが多い
  • Gruntfileは皆Gruntfile.coffeeではなくGruntfile.jsを使っている

大分すっきりしました。これで心おきなく新しいプロジェクトが始められそうです。