よしかわーるど

プログラミングで世界を変える

2018-07-24

webpack4を触ってみる

僕の立場

@yoshikawataikiです。
僕は、ネットワークなどに興味があってサーバ周りを弄ってるエンジニアです。
好きな言語は特にはないのですが、 PHP, Ruby, Python, golang をメインに書いてます。
最後に CSS を書いたのが、1 年も前なので少し覚えているかなくらいです。
めんどくさがり屋 なので、CSS を 1000 行以上書くとか、やりたくないです。
僕は研究やサークルの Web サイトなどを開発していこうと意気込んでいました。
しかしながら、フロントエンドが書ける人が僕の周りにいませんでした。

……

どうなったか、分かりますよね?

僕自身が、フロントエンドも開発しなければいけなくなりました。

記事概要

最新のフロントエンド開発(webpack4 など)を触ってみて、サーバサイドエンジニアもフロントエンドエンジニアらしいコーディングが出来たということをまとめています。

対象読者

  • 何でもやれる俺 SUGEEE!!したい人
  • サーバサイド技術しか触ったことのない人
  • フロントエンド技術しか触ったことのない人

フロントエンド技術を紹介

ここからは、真面目にフロンエンド技術について触れていくよ。

webpack4

そもそも、webpack ってなんだよ 💢
ええ、僕も知った時はなんやこれ…使えるんか…ってなったんですが、これ便利です…

2018 年 2 月にwebpack4 がリリースされました。

webpack は、最新の JavaScript アプリケーション用の静的なモジュールバンドラです。
CSS や JavaScript を 1 つの JavaScript ファイルにまとめたり、複数のファイルに分割して出力することができます。
ファイル出力の際に、JavaScript を圧縮や難読化したり、画像の画質を下げてファイルサイズを小さくすることも出来ます。
前述のとおり、あくまでも webpack はモジュールバンドラなので、ローダーを使用して画像圧縮などを行います。

なぜファイルを 1 つにまとめる必要があるかというと、 ウェブページの HTTP リクエストを減らして高速で Web サイトを表示しようぜ! の世の中になってきました。
webpack が注目されているのは、これが一番なのかなと思ってます。

EJS

EJS は JavaScript から HTML を生成できるテンプレートエンジン。パーツごとに分けたりするので、ソースコードの管理がしやすいです。

SASS・SCSS

ずっと CSS を使っている僕にとって、SASS・SCSS は結構画期的なものでした。 例えば、超サイヤ人が超サイヤ人 2 になった感じです。 CSS を兼ね備えてるスーパー CSS って感じです。
かっちょいいですね 知らんけど

SASS 記法と SCSS 記法があるのですが、僕は CSS をずっと読んできたので、SCSS 記法を採用しました。
また、変数を扱えることや、出力する CSS を 1 つのファイルにまとめること出来るなどメリットがいっぱいです。
SASS・SCSS の概要はこちら

Bulma

僕自身、Bootstrap しか知りませんでした。しかし、世界は広かった。
多くの CSS フレームワークが存在しました。
僕が尊敬している先輩が「これいいよ!」と勧めていたのが、Bulma
ドラゴンボールじゃないよ
Bulma の利点として、Flexbox ベースのフレームワークであり、JavaScript を必要としていないところです。
使い方は Bootstrap と似ているので、導入してみることにしました。

TypeScript

JavaScript で開発するか悩んでいて、そういえば色々な AltJS あるけど、どれが良いんだろうって調べた結果、「型がしっかりしている言語で開発したい!」というこだわりがあったので、TypeScriptが一番良いのかなと思いました。

開発してみる

以下のリポジトリを参考にして、開発していきます。

javascript-framework/front-end at master · YoshikawaTaiki/javascript-framework · GitHub

テキストエディタは何でもいいです。僕は Visual Studio Code を使っています。

Node.js のインストール

Node.js のインストールをしてください。 インストールしたら CLI でnode -v npm -vを実行してバージョンが表示されるか確認します。

$ node -v
v9.3.0
$ npm -v
6.0.0

プロジェクトディレクトリを作成

作業するためのディレクトリを作成します。
mkdir front-end

開発用のディレクトリを作成

cd front-end して mkdir src

front-end/
   └ src

webpack(ビルドツール)を用いた開発は、開発ディレクトリ内で開発して、ビルドすると出力先のディレクトリにファイルが作られる仕組みになります。

プロジェクトの初期設定をする

プロジェクトディレクトリでnpm init -yと入力します。

front-end/
   ├ src
   |
   └ package.json

package.json の中身はこんな感じです。

{
  "name": "front-end",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.json のテンプレート

webpack4 + EJS + SCSS + TypeScript + Bulma を使うため bulma-scss, typescriptなどなどが必要になります。
今回は package.json を以下の用に書き直しました。

{
  "name": "front-end",
  "version": "1.0.0",
  "description": "modern web page",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production --module-bind 'ts=ts-loader' --resolve-extensions .ts,.js",
    "start": "webpack  --mode development; webpack-dev-server --mode development"
  },
  "author": "YoshikawaTaiki",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.2.0",
    "bulma-scss": "^0.6.0",
    "css-loader": "^0.28.11",
    "ejs-compiled-loader": "^1.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.8.3",
    "postcss-loader": "^2.1.3",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.3.0",
    "typescript": "^2.8.1",
    "webpack": "^4.8.1",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "copy-webpack-plugin": "^4.5.1"
  }
}

npm install でパッケージのダウンロードができます。

補足

今回は、上記の package.json を使いますが、通常ならば、下記のコマンドでパッケージをインストールします。
npm install --save-dev [パッケージ]

パッケージの説明

webpack4 を使うために、webpack, webpack-cli, webpack-dev-serverをインストールします。
webpack4 から、以下の 2 つが必要になりました。 webpack, webpack-cli です。 どうやら、webpack から分離して、webpack-cli が誕生したそうです。
皆さん、webpack-cli の入れ忘れには気をつけてください!

EJSejs-compiled-loader, html-webpack-pluginが必要になります。EJS のコンパイルローダーを使い、HTML を出力します。また、外部に公開する際に、HTML ファイルを書き出す必要があるので、html-webpack-pluginで HTML ファイルを作成します。

SCSSstyle-loader, css-loader, sass-loader, postcss-loader, node-sassが必要になります。SCSS ファイルをコンパイルするため、node-sassを使います。css-loader, sass-loaderpostcss-loaderでローディングして出力します。prefix の付与をするため、autoprefixerを導入しました。 また、ファイル出力をするために、extract-text-webpack-plugin,file-loaderでローディングして、画像を出力させます。

TypeScript を使うために、typescriptts-loaderが必要になります。TypeScript 本体と TypeScript をロードするためのパッケージです。

Bulmabulma-scssを導入して scss ファイルに@import '~bulma-scss/css/bulma';を記入すれば、読み込む事ができます。

Config ファイルの作成

設定ファイルは以下の配置です。

front-end/
   ├ src
   |
   ├ package.json
   ├ postcss.config.js
   ├ tsconfig.json
   └ webpack.config.js

postcss.config.js

module.exports = {
  plugins: [
    require("autoprefixer")({
      browsers: "last 5 versions"
    })
  ]
};

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    // TSはECMAScript 5に変換
    "target": "es5",
    // TSのモジュールはES Modulesとして出力
    "module": "es2015",
    // node_modules から引っ張ってくる
    "moduleResolution": "node",
    "lib": ["dom", "es2017"]
  }
}

webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.resolve(__dirname, "./src/ts/main.ts"),
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "./js/main.js"
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "./css/main.css"
    }),
    new HtmlWebpackPlugin({
      filename: "./index.html",
      template: "./src/index.ejs"
    })
  ],
  resolve: {
    extensions: [
      ".ts", // for ts-loader
      ".js" // for style-loader
    ]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader"
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ["css-loader", "postcss-loader", "sass-loader"]
        })
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "./images/[name].[ext]",
            outputPath: "./",
            publicPath: path => "." + path
          }
        }
      },
      {
        test: /\.ejs$/,
        use: "ejs-compiled-loader"
      }
    ]
  }
};

実行してみる

npm startを実行。
localhost:8080にアクセスします。

コンソール画面に以下の出力がされていれば、TypeScript での出力が出来ていることが証明されます。
これで、src 内をガツガツ書きまくれば、モダンな Web サイトを作ることが出来ます!
これで、フロントエンドエンジニアにコードで差をつけろ!(俊足)
それでは、良いフロントエンド開発を!お疲れ様でした!