わたしはつい今までyeomanのジェネレーターを用いて静的サイトコーディングに取り組んでいた。yeomanは、cliによる操作ひとつでHTML5 Boilerplateをはじめ、Sass、Bootstrap、Modernizrなどトレンドに富んだ導入環境を構築してくれる。そして環境自体はタスクランナーのGulpであるから作業の自動化が特徴だ。

しかしwebpackが台頭したことでGulpによる環境構築するシーンは圧倒的に激減した。SPAライブラリに代表されるReactやVue、Angularもこぞってwebpackである。まずwebpackはバンドラーと呼ばれるもので、ファイルをガッチャンコしてくれる。そしてGulpはタスクランナーと呼ばれるもので前述したとおり作業自動化してくれる。したがってそもそも役割が違うわけだけれども、webpackは作業自動化も担っていて、Gulpを使うメリットが減ってしまったのだろう。

そんなこんなでwebpackの環境構築は常々検討していたのだけれど、自作のwebpack環境はトレンドやバージョンを考えると気が引けてしまい、それに至ることはなかった。やはりyeomanのようにcliで操作できる容易さがほしかったわけで、webpack製のものを探してはいたのだけれど巡り合うことがなかった。

そしてこのたびyeomanに取って代わるツールを発見したかもしれない。

このエントリーでは、webpack製の静的Webサイトジェネレーター「Spike」を紹介したい。

Spikeについて

Spikeは、静的Webサイトジェネレーターだ。yeomanを使ったことがあるならば、そのようなものと捉えてもらうとよいだろう。

【Spike】
https://spike.js.org/

特徴

• JavaScriptバンドラーにwebpack
• HTMLパーサーにReshape
• CSSパーサーにPostCSS
• JavaScriptトランスパイルにBabel

Spikeに触ってみる

それでは、Spikeのインストールと使い方について解説しよう。

インストール

Spikeをグローバルにインストールする。Macユーザーは先頭にsudoで試してほしい。

$ npm i spike -g

さてインストールが成功したか下記コマンドで確認しよう。

$ spike -v

バージョン値が表示されればOKだ。

プロジェクト初期化

Spike環境をジェネレートしてみよう。任意のフォルダで下記コマンドを実行する。

$ spike new my-project

上記コマンド末尾の「my-project」は任意だ。プロジェクト名を適用するとよいだろう。

つづいて、ウィザード形式で進めていく。下記内容が問われる。

? What is the name of your project? ?プロジェクトの名前
? Describe your project ?プロジェクトの説明
? What is your github username? ?githubのユーザー名
? Would you like to use whitespace-sensitive syntax? ?空白を区別する構文を使用する？
? Would you like a production config file? ?本番環境設定ファイルが必要？

果たして、プロジェクト雛形をジェネレートできたならば、つづいてプロジェクトに関わるnodeモジュールをインストールする。cdコマンドでプロジェクトディレクトリに移動したのち、npm installかyarnを実行しよう。

$ cd my-project
$ npm install
# or
$ cd my-project
$ yarn

開発開始

開発をスタートさせるときは、下記コマンドを実行する。

$ npm run start
# or
$ yarn start

するとローカルサーバーが起動して、ブラウザタブにhttp://localhost:1111が開く。

まとめ

webpack製の静的Webサイトジェネレーター「Spike」の紹介だった。

まだyeoman使っていたのか、という感想は受け止めなければならない。かなり希少種であることは自覚しているのだけれど、静的コンテンツをコーディングする程度なら、まずまずの使い勝手を誇るのがyeomanだった。

もしわたし以外にもyeomanを使っていて、webpackに乗り換えたい意欲があるならば、よい機会なのではないだろうか。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。