レガシーな静的サイトを作る環境のボイラープレートを作ってみた

3811 ワード
生産性向上 フロントエンド フロントエンド テキストリンク

生産性向上のための環境整備2020 【PR】 Lenovo Advent Calendar 2020の15日目の記事です。

はじめに

Reactや、Vuejsなどのモダンな開発環境では、linterやビルドツールは簡単に導入できます。
しかし、VueやReactなしの環境でlinterやビルドツールを導入するとなると、
なかなかまとまっている記事がないため、環境を準備するのに時間がかかってしまいます。
かといって、それらを導入せずに開発を行うと、普段と違って生のCSSを書くのに苦戦したり、linterで防げていたミスなどが頻発してしまいます。
それらを解決するために、レガシーな環境でも、できるだけReactやVuejsに負けないDXの環境を作ってみました。

ディレクトリ構成

ディレクトリ構成は以下のようになっています。
基本的に、ビルド対象は、srcに格納し、.cache(開発時)またはdest(リリース時)ディレクトリに出力するようになっています。

ProjectRoot/
　├ .cache/              ・・・ 開発用ビルド結果出力ディレクトリ
　│                          src内の資産がビルドされた結果の資産が格納される
　├ dest/                ・・・ リリース資産出力ディレクトリ
　│                          public内の資産(.から始まるファイルは除く)がコピーされたもの
　│                          + src内の資産がビルドされた結果の資産が格納される
　├ node_modules/        ・・・ npmでインストールしたパッケージの格納ディレクトリ
　├ public/              ・・・ 静的資産配置ディレクトリ
　│                          ビルド対象とならない、HTMLや画像、ライブラリなどを配置する
　├ src/                 ・・・ 開発用資産配置ディレクトリ
　│                          ビルド対象となるstyleなどを配置する
　├ .bs-config.js        ・・・ Browsersync(開発用ローカルサーバ)設定ファイル
　├ .browserslistrc      ・・・ browserslist設定ファイル
　├ .editorconfig        ・・・ editorconfig設定ファイル
　├ .eslintignore        ・・・ ESLint除外設定ファイル
　├ .eslintrc.js         ・・・ ESLint(JS用のlinter)設定ファイル
　├ .gitattributes       ・・・ Git設定ファイル 
　├ .gitignore           ・・・ Git除外設定ファイル
　├ .postcssrc.js        ・・・ PostCSS設定ファイル
　├ .prettierignore      ・・・ Prettier除外設定ファイル
　├ .prettierrc.js       ・・・ Prettier(コードフォーマッター)設定ファイル
　├ .stylelintignore     ・・・ stylelint除外設定ファイル
　├ .stylelintrc.js      ・・・ stylelint(css用のlinter)設定ファイル
　├ LICENSE
　├ package-lock.json
　├ package.json
　└ README.md

使い方

事前準備

この環境は、Node.jsを利用しますので、インストールしておいてください。
また、バージョン管理ツールとしてGitを利用することを想定しています。

補足
Node.jsの普通のインストーラーを使ってもいいですが、nodenvなどのバージョン管理ツールを使うことを推奨します。
※普通にインストールすると案件毎にバージョンが異なる場合につらい思いをするため

ダウンロード&実行

コンソールで以下のコマンドを実行します。

console
# 環境のダウンロード
% git clone https://github.com/ohnaka0410/web-starter-kit.git
% cd web-starter-kit
# 初期構築
% npm ci
# 開発サーバ起動(２回目以降はこれだけで大丈夫)
% npm run serve

表示確認

ブラウザで以下のURLを開けばページが確認できます。

http://localhost:3000

リポジトリ

ohnaka0410/web-starter-kit

まとめ

11tyやsass、babelを使いたい方など、案件や好みによって環境は多少変わってきますが、
使いたいpackageをインストールしたあと、package.jsonにsrcからdestに出力するように少し追記するだけで
簡単に使えるようになりますので、自分なりにカスタマイズして、快適に開発していただければと思います