素のJavaScript と Sass で Webページを作成するための雛形

1. はじめに
2. 雛形
3. おわりに

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" 属性を指定しています。これについては、以下の記事を参照してください。

JavaScript の静的インポートと動的インポート

2019.03.12

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 については、以下の記事を参照してください。

Source Map に関する情報

2019.04.19

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 には期待しています。