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

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

今日からしばらくの間、「環境構築」をテーマにしたひょっとこ塾をコラムからお届けいたします。
記念すべき第一回は、「ディレクトリ構成」について書いていきます！

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

コードを書けるのと環境の構築は別モノ！

今回のターゲットは表題の通りですが、駆け出しエンジニアのみなさんです。
ネットの記事でしたり、本でしたり、通われているスクールの初級手順に従えば、「コードを書くこと」はすんなりできると思います。
またその後、htmlとcssを動かすことはできたと思います。

しかしながら、環境構築はどうでしょう。
scssは使った方が良いの？　その場合はどんな構造にすれば良い？　jsはちゃんとライブラリと分けてる？　srcディレクトリってなに？
といった多くの質問を、今まで受けてきました。

コードを書けるのと、これら環境の構築は別モノです。

環境構築は生産性や保守性に大きく影響してくるので、基本はしっかりマスターしましょう！

でも、環境構築ってムズカシイ…

それでは今回の話題、「ディレクトリ構成」についてですが、「どんなディレクトリ構造で作業したらベストなの？」と言った疑問の解消って難しいですよね。

正直なところ、ディレクトリ構造だけなら適当な構造でも動きますし。

しかし今はホームページ制作会社でも、nodeを使うことも比較的当たり前になってきました。
scssをcssに変換したり、たくさんのjsを1つのファイルにまとめたり、localhostを立ち上げたり…
これらに対応できる状態にして、しっかりとコードの記述に集中して知識を増やしていきましょう！

まずはディレクトリ構成の整理から！

ホームページ制作をしてみよう！　となった場合、シンプルにhtmlとcssとjsファイルがあればできますね。

ただし、全てのファイルを並列で置くことは可読性も下がるのでやめておきましょう。

最初のうちにきちんと設計しておかないと、途中で読み込みのパスを変えることにつながります。こうなってしまうと結構な修正地獄です。

例えば、下記のような例にしましょう。

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ディレクトリについて

こちらはアドレスに直結しますし、シンプルにルート直下にしましょう。

弊社のドメインを例にすると、下記のようなURLになります。
https://noveltyinc.jp/index.html

ちなみにレンタルサーバーを借りている場合は、index.htmlは基本的に省略できるケースが多いです。
https://noveltyinc.jp/

これでアクセスできるのは、サーバー側の仕組みなんですね。

また、indexだけでもアクセス可能なケースも多くあります。拡張子の省略なんかも一緒です。

レンタルサーバーごとに指定するルートディレクトリは異なりますが、例えばxserverですとpublic_htmlの直下となります。

サーバーのマニュアルをしっかりと読んで、どこに環境を展開することが適切なのかは、見極めていきましょう。

htmlファイルを追加する際には、同列に追加しましょう。

そうすると、下記のURLでアクセスすることが可能になります。
https://noveltyinc.jp/xxx.html

上記はサーバーを例にしましたが、ローカル環境で作業をしている場合は、ルートのURLはかなり冗長になることが多いと思います。

下記は、macでデスクトップにsampleというディレクトリを作り、そこに構築した例です。
file:///Users/hashimoto/Desktop/sample/index.html

このように、環境によってパスは大きく変わります。

環境構築を考えていくとより見えてくることですが、パスを参照する際には、さまざまな形に対応できるようにしておくのが良いですね！

続いてcss

cssについては、文字通りですね。css/以下のファイルを読み込んでいきます。

基本的に、役割ごとにファイルを分けた方が良いです。構築しやすくなる点がメリットです。

例えばreset.cssは既存のスタイルを解除するためのcssです。今回は深く触れませんが、調べるとたくさん出てくるので参考にしましょう。

base.cssはhtmlタグやimgタグなど、全体に影響するものを書きます。
例えばよく見る下記のコードなんかは、baseに書きたいですね。

html {
     font-size: 62.5%;
}

ここまでは、今後作っていくサイトに対して共通で使い回していきたいものになります。

基本的に共通化してあるべきものなので、初回にきっちり作り込くとベストです。

最後にstyle.cssに対して、案件ごとのスタイルを書きます。

本当はページごとに分けていきたいところですが、cssが増えれば読み込みが多数発生することになります。これはホームページ制作においてよくないです。

ただ、今コードを書いている瞬間はどのcssか明確ですが、来年の今頃クラス名まで明確に覚えていられるでしょうか。

上記の問題を解消するためにも、scssがおすすめなんですね。それはまた後日。

ここでポイントなのは、読み込み順をreset.css→base.css→style.cssとすること。

cssは基本的に後から読んだものが強いので、案件ごとに変わるstyle.cssを後に持っていくべきなのです。

各言語の仕様をきちんと捉えたうえで構成を整えていきます。この辺りをしっかり理解しておくことが、環境構築と設計におけるポイントです！

前編まとめ

というわけで長くなってきましたので、前編はここまでです！

駆け出しの方は、なんとなく同ディレクトリにファイルを並べていらっしゃるかもですが、今日からしっかりとディレクトリを整理してみましょう！

コーディングする際の情報整理が格段に変わりますし、次の案件では強くてニューゲームの状態で臨むことが可能になりますよ。

それでは後半をお楽しみに！

ではまた！