1. はじめに
以下の技術を使ってWebページを作成する場合の雛形(の一例)を紹介します。
- HTML
- 素のJavaScript
- Sass (CSS)
- makeコマンド
2. 雛形
想定するディレクトリ構成
想定するファイルとディレクトリは以下とします。
.
│
├─ Makefile
├─ package.json
├─ README.md
├─ dist(公開用ディレクトリ、src を元に生成する)
│ ├─ css
│ │ └─ main.css(src/scss/main.scss を元に生成させる)
│ ├─ img
│ │ └─ foo.png(src/img/foo.png をコピーさせる)
│ ├─ js
│ │ └─ main.js(src/js/main.js を元に生成させる)
│ └─ index.html(src/img/foo.png をコピーさせる)
│
└─ src(ソースディレクトリ)
├─ scss
│ └─ main.scss
├─ img
│ └─ foo.png
├─ js
│ └─ main.js
└─ index.html
src
ディレクトリ以下のファイルを自分で記述し、これを元にして Makefile に記述したコマンドで、dist
ディレクトリ側にファイルを生成します。
これはあくまで一例です。これ以外に必要なファイルやディレクトリがあれば、これから紹介するファイルの内容をカスタマイズしてください。
導入しておく npm パッケージ
以下の npm パッケージを使用します。
npm パッケージ | 説明 |
---|---|
sass | Sass で書いたファイルを、CSS に変換するのに使用します。 |
uglify-es | JavaScript コードを圧縮するのに使用します。 |
以下のコマンドでインストールすることができます。
$ npm install -g sass uglify-es
index.html
ここでは、main.css
と main.js
を読み込んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/main.css">
<title>このドキュメントのタイトル</title>
</head>
<body>
<p>このドキュメントの内容</p>
<script type="module" src="js/main.js" charset="utf-8"></script>
</body>
</html>
JavaScript ではモジュールを使いたいので、<script>
タグに type="module"
属性を指定しています。これについては、以下の記事を参照してください。
Makefile
以下の Makefile を用意します。
ENV := development
all: html js css img
html: index.html
js: main.js
css: main.css
img: images
index.html: src/index.html
cp -p src/index.html dist/index.html
main.js: src/js/main.js
@if [ "$(ENV)" = "development" ]; then \
uglifyjs src/js/main.js -c -m \
-o dist/js/main.js --source-map "root='..',url=main.js.map"; \
else \
uglifyjs src/js/main.js -c -m \
-o dist/js/main.js; \
fi
main.css: src/scss/main.scss
@if [ "$(ENV)" = "development" ]; then \
sass src/scss/main.scss dist/css/main.css --style compressed; \
else \
sass src/scss/main.scss dist/css/main.css --style compressed \
--sourcemap=none; \
fi
images: src/img/*
cp src/img/foo.png dist/img/foo.png
clean:
rm -f dist/js/main.js
rm -f dist/js/main.js.map
rm -f dist/css/main.css
rm -f dist/css/main.css.map
rm -f dist/img/foo.png
ENV
という変数で開発用と本番用のビルドを分けており、sass
コマンドと uglify
コマンドに異なったオプションを指定しています。これにより、開発時のみ Source Map ファイルを生成するようにしています。Source Map については、以下の記事を参照してください。
package.json
npm run
コマンドで、ビルドが実行できるようにします。
{
(省略)
"scripts": {
"build": "make",
"build-p": "make ENV=production clean all"
},
(省略)
}
build
が開発用、build-p
が本番用のコマンドです。
本番用では、Source Map ファイルも含めて dist
ディレクトリ以下のファイルを削除してからビルドを行っています。
README.md
README.md ファイルに必ずしも書く必要はありませんが、ついでですので npm run
コマンドの実行例をここに記載しておきます。
Build
--------
### 開発用のビルドコマンド
```
$ npm run build
```
### 本番用のビルドコマンド
```
$ npm run build-p
```
3. おわりに
できるだけシンプルに、且つそれなりに便利に Webページが作成できるよう今回の雛形を考えてみました。現在、Makefile は廃れているようですが、枯れている分安定していますし、今でも便利に使えます。
Web の標準機能が充実するに従って、余計なライブラリが必要なくなってきました。できれば、Vue.js の Single File Components のような機能が標準で実装されるとよいのですが。Web Components には期待しています。