吉本式 Web制作のコーディングガイドライン

美しいコーディング・設計をするためのガイドラインコンテンツです。

Web制作の開発環境とファイル構成について

現在(2019年7月)、私はWeb制作を行う際は、Pug + SCSS + TypeScriptを使用しています。
htmlファイル、cssファイル、jsファイルへのコンパイルには、webpackを使用しています。
以前まではgulpも使用しており、gulp + webpackという構築環境でしたが、現在はgulpを使用せず、npm-script + webpackという構築環境です。

早速、まずは私の構築環境が実際にどのようになっているかを体験していただきたく、構築環境を下記にアップしました。

サンプルデータ一式 : sample.zip

zipを解凍し、ターミナルでsampleフォルダに移動し、次のコマンドを実行します。

npm i

これで必要なパッケージがインストールされるはずですが、もしこの時点でエラーが出た場合は、node.jsやnpmに不具合があるかバージョンが古すぎるかなど確かめてみてください。
パッケージがインストールされたら、続けて次のコマンドを実行します。

npm run build

初期状態ではhtmlファイル、cssファイル、jsファイルがコンパイルされていないので、上のコマンドでコンパイルします。
続けて、次のコマンドを実行します。

npm run w

ブランザが起動し、シンプルなページが表示されたと思います。
現在表示されているのは、下のhtmlファイルになります。

/sample/public/index.html

このindex.htmlは、下のpugファイルがコンパイルしたhtmlファイルになります。

/sample/src/pug/index.pug

試しに、このindex.pug内にある文言を変更してみてください。
ブラウザで表示されていた文言が、変更した文言に変更されたと思います。
webpackが常にファイルを監視していて、変更されたファイルを自動的にコンパイルしています。
さらに、自動リロードの機能を持つbrowser-syncを同時に実行しているので、ファイルが更新されるとブラウザが自動リロードを行いページが更新されます。
これが私の構築環境です。

この構築環境を数回に分けて、解説していきます。
webpackの設定の解説の前に、まずはファイル構成の解説をします。

ファイル構成

  • node_modules
  • public - 公開フォルダ(納品フォルダ)
    • js
      • plugins.js - プラグインをまとめたjsファイル
      • main.js
      • home.js
      • page.js
    • css
      • style.css
      • home
        • style.css
      • page
        • style.css
    • img
    • index.html
    • page
      • index.html
  • src - 作業フォルダ(開発フォルダ)
    • ts
      • main.ts
      • home.ts
      • page.ts
    • scss
      • style.scss
      • home
        • style.scss
      • page
        • style.scss
    • pug
      • index.pug
      • page
        • index.pug
  • webpack.config.js
  • package.json
  • bs-config.js
  • pug.config.js
  • tsconfig.js
  • .csscomb.json
  • postcss.config.js
  • tslint.json

一部フォルダ・ファイルを省略してますが、上のような構成となっています。
ルートフォルダ(sampleフォルダ)直下にあるjsファイル、jsonファイルは設定ファイルです。
srcフォルダは作業フォルダとなり、publicフォルダは作業ファイルのコンパイル先となり、これが公開フォルダ(納品フォルダ)となります。

作業フォルダと公開フォルダで中間言語(pug, scss, ts)と出力ファイル(html, css, js)が対になるようなファイル構成となっています。
tsファイルに対してjsファイル、scssファイルに対してcssファイルが同じ階層になるようにファイルが出力されます。
html/pugについてのみ、作業フォルダにpugフォルダがあるため、階層が1つ異なります。
これらの設定は全て、後ほど解説するwebpackの設定ファイル(webpack.config.js)によるものです。

例) ts → js
/src/ts/main.ts
/public/js/main.js

例) scss → css
/src/scss/home/style.scss
/public/css/home/style.css

例) pug → html
/src/pug/page/index.pug → pugのみpugフォルダが入るため、階層が異なる。
/public/page/index.html

基本的には公開フォルダ(public)には、自動的(更新が入るたび)にファイルが出力されますが、imgフォルダに格納される画像ファイルに関しては、直接、公開フォルダ(public)に保存します。
また、jsフォルダにあるplugins.jsですが、こちらはプラグインをまとめるjsファイルとして用意しておきます。

それでは、続いて設定ファイルについて簡単に補足します。

  • node_modules- node.jsのpackageを管理するフォルダ
  • public- 公開フォルダ(納品フォルダ)
  • src- 作業フォルダ(開発フォルダ)
  • webpack.config.js- webpackの設定ファイル
  • package.json- npmプロジェクトの管理ファイル
  • bs-config.js- browser-syncの設定ファイル
  • pug.config.js- pugファイルの設定ファイル
  • tsconfig.js- typescriptの設定ファイル
  • .csscomb.json- cssのプロパティ管理ファイル
  • postcss.config.js- postcssの設定ファイル
  • tslint.json- typescriptのlintファイル

webpack.config.js
webpackの設定ファイルです。こちらに関しては、後ほど解説します。

package.json
npmプロジェクトの管理ファイルです。ここに、npm-scriptを記述します。
このファイルに関しても、webpackの設定ファイルと合わせて解説します。

bs-config.js
browser-syncの設定ファイルです。
このファイルに関しても、webpackの設定ファイルと合わせて解説します。

pug.config.js
このpugの設定ファイルは、私の方で独自に用意したファイルとなります。
webpackの解説時、またpugファイル設計の解説時に合わせて解説します。

その他の設定ファイル
tsconfig.js
.csscomb.json
postcss.config.js
tslint.json
これらに関しては、解説を割愛します。興味があれば、それぞれ調べてみてください。

Web制作における私の構築環境とファイル構成について簡単に触れました。
これらについては、今後の各記事で改めて触れると思いますので、ざっくりと把握する程度で良いかと思います。
それでは続いてwebpackの具体的な設定を解説していきます。