【ひょっとこ塾】〜ディレクトリ構成編〜　駆け出しエンジニアのための環境構築！(後編)

こんにちは。ひょっとこです。
船橋市でホームページ制作をしつつ、プラグイン開発とかウェブアプリ開発などなどをしています。

「環境構築」をテーマにしたひょっとこ塾をコラムからお届けいたします。
今回は前回に引き続き、「ディレクトリ構成」について書いていきます！

前編はこちらから！

※今回ご紹介する内容はあくまでも例であり、設計思想によって異なります。さまざまな情報をもとに、ご紹介させていただく内容をアレンジして自分のものにしていきましょう！

前回のおさらい

前回このようなディレクトリ構造を推奨しました！

root/
├ index.html
├ xxx.html
├ styles/
    ├reset.css
    ├base.css
    └style.css
├ js/
    ├index.js
    └lib/
        └jquery-x.x.x.min.js
└ images/
    └common/
        ├logo.png
        └xxx.svg
    └index/
        └image01.png

要点は【html】【css】【js】【images(画像系)】です。

html,cssまでそれぞれの役割とそこに配置する理由を解説させていただきましたので、今回の後編ではjsとimageディレクトリについてご説明です！

ディレクトリ構成は、役割を明確にして

cssの項目でもお伝えしましたが、今回で特に重要になるのがディレクトリごとの「役割」です。

javascriptはライブラリを多く使うでしょうし、画像ファイルはホームページ制作をする上で数枚ではないでしょう。

上記二つはどうしても煩雑化しやすい条件を持っているので、特に注意をしていきたいですね！

javascriptの構造は、機能ごととライブラリでうまく分けて

さっそく、javascriptは結構難しいと思います。

今回の例では単純にindex.jsという1ファイルが配置されている形になっています。

数ページの制作だったり、シンプルなサイトにしたければ特にjavascriptを書く総量は問題にならないでしょう。

しかしリッチなサイトだったり、色々と機能を追加したりするとコード量は増えていきますよね。

この時に分かりやすいファイル名で切り分けてあげることが重要になったりします。

index.jsやcompany.jsなどページごとにjsを分けてあげてもOKですね。

ただし、プログラミングにおいて同じ記述を2回書かないことは鉄則です。indexとcompanyに同じスクリプトを書かないように、共通化できそうなものはcommon.jsなどを作りこちらに書くようにしましょう。

ここは冗長なソースを書かないうえでとっても重要なので、駆け出しのみなさんはぜひ覚えていただきたいです！

上記を踏まえた例

├ js/
    ├index.js
    ├company.js
    └common.js

jsファイルを分けるときには、ほかの手法も

ほかの手法としては、例えばindex.htmlの中で用いるスライダーについての記述でしたら、slider.jsなどに分けることも可能です。

function(機能)のソースとそれらを呼び出すソースに分けると可読性がぐっと上がります。ページごとに分けると、このページで使ってた機能なんだっけとなりがちです。

呼び出す側のjs(ここではindex.jsとします)には、addEventlisternerの実行部分だけ書ければベストです。

ここは重要なので少し詳しく書かせていただきますね。
indexSlider.jsはスライダーについての記述ということで、下記のようなfunctionを書きます。

function test(){
    //xxx機能について記述する
}

このtestという機能は、このままだと動きません。

機能を発火させるにはtest()という形で呼び出す必要があります。

詳しくはこちらの記事を参考にしてくださいね！

この呼び出し部分のみを記述するのをindex.jsにしようという感じです。ちなみにcompany.jsにも同じように書いて、ページごとの分別と同時にやってもOKです。

document.addEventListener('DOMContentLoaded', () => {
test();
});

これで呼び出されると機能と呼び出し元の機能が明確に分けられました。

呼び出される側、つまり機能を書いたjsは別途【components/】のようなディレクトリに入れてあげるとよいですね。

1ファイルに書いてしまうと再利用がしづらくなったり、どこで使っているのか不明瞭になりがちです。

これで例えばスクロール量によってフェードインする機能を作ったとして、indexとcompanyのページそれぞれで同じコードを書いた…なんてこともなくなりますね！
※その際には引数を使うわけですが、それはまた今度

ここでファイルを呼び出す順番は、slider.js(呼び出される側)→index.js(呼び出し側)としましょう。

ただし、多数のファイルを読み込んでしまうと負担がかかる問題はcssと同様です。場合によってはjsもnodeを使って圧縮するなどの工夫が必要になります。

jsファイルを小分けにしようとすると結構難しいのです。このあたりはまた別の機会に詳しく書きたいですね。

上記を踏まえた例

├ js/
    ├index.js
    ├company.js
    └components/
        └slider.js

jsはライブラリの取り扱いも明確に

最後に、jsライブラリについてです

ホームページ制作をすると際に、全てのjavascriptを自身で書くわけではありません。

保証された機能をきちんと利用するために、ライブラリを使用することも多いです。

スライダーですとswiperだったりslickだったり、splideだったりですね。

これらは全て基本的にファイル化されています。CDNで読み込むこともできますが、もし手元で読み込ませる場合にはしっかりとlibなどのディレクトリに分けましょう。

javascriptのライブラリはきちんと分けておくのがすっきり見えて、何のライブラリを使っているのか明確化できて吉です。

コーディング途中で廃止した不要なライブラリが紛れていた…なんてことも減りますよ！

画像ファイルはきちんと小分けに

最後にimagesです。

こちらはなるべく小分けにした方が分かりやすくておすすめです。

例えばロゴや矢印の画像など、サイト内で多数使うものはcommon/とする、indexページの中で使うものはindex/とする...などですね。

画像ファイルはホームページ完成時に結構膨大な数になっていることが多々あります。

最後の最後で分けておけばよかった...なんて後悔がないように、あらかじめページ数分ディレクトリを作っておくとよいかもしれませんね！

まとめ

ということで今回のディレクトリ構成は以上となります！

一番のポイントは大雑把に同一階層に置くのではなく、目的ごとにディレクトリとファイルを分けることが重要ですね。

これで何か新しいことをやるための基盤ができました！

次回はホームページ制作の効率を上げる環境構築について、いろいろと書いていきます。

おすすめのエディタ、その定義について公開しました！　

それではまた！