プログラミング

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

投稿日:2019年11月28日 更新日:

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.cssmain.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

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

Web

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

📂-プログラミング
-, ,

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ウェブプログラミングの知識があるとできること(その1)

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …

Canvasでの回転

Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。 Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。 目次1. スク …

Babel とは?

目次1. Babel とは?2. JavaScript のバージョン3. プラグイン (plugins)4. プリセット (preset)5. 基本的な使い方6. Babel のイメージ 1. Bab …

web development

Web Development for Beginners を読む:レッスン12, 13, 14

目次1. はじめに2. Lesson 12: Browser Extension Project Part 1: All about BrowsersIntroductionAbout the bro …

React Redux

React + Redux を1つのJavaScriptファイル内で使うサンプル

目次1. はじめに2. デモページ3. 画面4. JavaScript のコード(全文)5. 解説1. Action (Action Creator)adddionActionclearAdditio …