魔法使いの弟子

いつか私もあなたみたいに

フォルダ構成はどうすればいいんだ - Webアプリを作ろう1

Webアプリを作ることにした。 どんなものを作るかはまだ内緒。

いままで一人でWebサービスをつくって公開というのをやったことがない。 ちょっと調べてみたがやることがたくさんありそうだ。

しかし、やることが多いという事実にひるんでいてもしょうがないので とりあえず一番簡単そうなフォルダ(ディレクトリ)構成から始めよう。

Webアプリを作るということは、サーバ側で動くプログラムやHTMLテンプレート、jsやcssをファイルに書かなくてはいけない。

これらのファイルの置き場所は最初に決めておけば、以後そのルールを守ればリソース管理に悩まされることはないだろう。

この問題に関して、すでに多くの実例が存在する。 今回参考にしたのは、Googleの「Web Starter Kit」。

github.com

私の考えでは、こういうところはオリジナリティを出す必要はなく、 スタンダートなものを使えば良いのだ。

こういうところというのは、Webサービスの内容に関係ない部分をさす。 ユーザがそのサービスを使う際サーバ側のフォルダ構成やどんなプログラミング言語が使われているかはどうでもいいことだ。 (それが原因で動作速度が遅くなるっていうなら話は別だ。)

ということで Web Starter Kit の中身をみていこう。 以下にディレクトリ構成の概要を記すが、実際に動かしてみたい人は上記のgithubのリンクからダウンロードやクローンができる。

/
┗app
    ┣images
    ┃┗touch
    ┣scripts
    ┃┗sw
    ┗styles

上の構成図ではファイルや、docフォルダは省略している。 各フォルダの役割は以下の通りだ。

フォルダ 内容
/ 一番上(親)のフォルダ。git関連のファイルやLISENCEなどのメタ系ファイルが格納されている
app ここの直下にはhtmlファイルやファビコンが配置されている
images 画像格納場所
scripts jsファイル格納場所
css cssファイル格納場所

以上からわかるようにapp内でファイル形式ごとにフォルダ分けがされている。 scriptsフォルダ内にはさらにフォルダが作成されているが、ファイル数が多くなる場合は 機能や画面毎にフォルダ分けを行うのが効果的だろう。

よって、今後の我がWebアプリ開発におけるフォルダ構成のルールは

  1. ファイル形式別にフォルダを作成
  2. Webアプリに複数の機能がある場合、ルール1で作成したフォルダ内に機能毎にフォルダを作成 3.ファイルはファイル形式と機能により適切なフォルダに配置する。

とする。

サーバサイドで動くソースコード類はsrcフォルダを作ってそこに入れることにする。 よし、今日はフォルダ作って終わり!!