WordPressテーマのスターターテンプレート"Sage"のすすめ ＆ 調整してみた

# 目次

- [WordPressテーマ開発でもサクッと環境構築したいよね](https://qiita.com/tsuchiya_daisuke/private/87ecee9ea5d2c656d393#wordpress%E3%83%86%E3%83%BC%E3%83%9E%E9%96%8B%E7%99%BA%E3%81%A7%E3%82%82%E3%82%B5%E3%82%AF%E3%83%83%E3%81%A8%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%9F%E3%81%84%E3%82%88%E3%81%AD)
- [そんなあなたに"Sage"](https://qiita.com/tsuchiya_daisuke/private/87ecee9ea5d2c656d393#%E3%81%9D%E3%82%93%E3%81%AA%E3%81%82%E3%81%AA%E3%81%9F%E3%81%ABsage)
- [でも少しだけ気になる点が...](https://qiita.com/tsuchiya_daisuke/private/87ecee9ea5d2c656d393#%E3%81%A7%E3%82%82%E5%B0%91%E3%81%97%E3%81%A0%E3%81%91%E6%B0%97%E3%81%AB%E3%81%AA%E3%82%8B%E7%82%B9%E3%81%8C)
- [調整するやつ、作りました！](https://qiita.com/tsuchiya_daisuke/private/87ecee9ea5d2c656d393#%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B%E3%82%84%E3%81%A4%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F)
- [まとめ](https://qiita.com/tsuchiya_daisuke/private/87ecee9ea5d2c656d393#%E3%81%BE%E3%81%A8%E3%82%81)

# WordPressテーマ開発でもサクッと環境構築したいよね

VueやReactって、全部入りの開発環境がCLIで簡単に構築できて、出だしが快適ですよね。
WordPressにも、そういうの欲しくないですか。
WP CLI？ちがうんです。
SCSSやESのコンパイル/トランスパイル、変更保存時のブラウザ自動更新といった、Node.jsを利用した開発環境を構築したいんです！

# そんなあなたに"Sage"

そんな想いから色々さがして見つかったのが、こちら。

[**Sage**](https://roots.io/sage/)

Sageは、**WordPressテーマのスターターテンプレート**です。
つまり、WordPressテーマの開発に必要なあれこれを束ねた雛形です。
特徴は大きく分けて以下の3つ。

1. 2018/12/10時点で、**WordPressボイラープレートでは、おそらくGitHubスター数No.1**（9700超）

2. Webpackを利用した**モダンなフロントエンド開発環境**

3. テンプレートを**Bladeで記述できる**

そして、2つ目の特徴には以下の機能が含まれています。

- CSS
    - SCSSのコンパイル
    - 接頭辞自動付与（Autoprefixer）
    - 最小化
    - 文法チェック

- JavaScript
    - ECMAScript>=2015のトランスパイル
    - 依存関係解決（Module Bundling）
    - 最小化
    - 文法チェック

- ETC
    - ブラウザの自動リロード
    - 画像サイズ削減

これぞまさに欲しかったもの！やったぜ！

# でも少しだけ気になる点が...
基本的に問題なく動作しますが、細かい部分で気になる部分がありました。

## `yarn start` / `npm start`時に発生するmain.cssの404エラー
[GitHub Issue](https://github.com/roots/sage/issues/1826)
WebpackのCSSファイル出力機能は、本番ファイル生成時のみONとなるため、開発サーバーではCSSの404エラーが発生します。

## `yarn start` / `npm start`時にJavaScriptの変更保存で発生するHMRの警告
[GitHub Issue](https://github.com/webpack-contrib/webpack-hot-middleware/issues/43)
Hot Module Replacement(HMR)を受け入れるための設定がJavaScript内に存在しないため、変更保存のたびに警告とリロードが発生します。

## `yarn start` / `npm start`時にSSL接続で発生するブラウザからの警告
[Discourse](https://discourse.roots.io/t/self-signed-ssl-cert-w-browser-sync-localhost-proxy-chrome-on-windows/5862)
HTTPSで開発サーバーに接続すると、SSL証明書が確認できないことによるエラーが発生します。

## 初期状態でのjQuery依存
[GitHub Issue](https://github.com/roots/sage/pull/2022)
初期状態でjQueryへの依存しています。

## git管理対象ファイルへの環境変数記載
[GitHub](https://github.com/roots/sage/blob/master/resources/assets/config.json)
開発ドメイン、テーマディレクトリへのパスなど、環境に依存する情報がgitで管理されてしまいます。

# 調整するやつ、作りました！
以上の問題を調整するシェルスクリプト、作りました！

[**Sage optimizer**](https://github.com/dsktschy/sage-optimizer)

Sageインストール時の質問に続いて、いくつか追加の質問が求められる形となっています。
Sageの依存関係を満たす環境であれば、同じく利用できるはずです。
くわしい使用方法はREADMEをご参照ください。

# まとめ
[GitHub](https://github.com/roots/sage/pull/2122)を見た感じ、どうやら次期バージョン以降で、フロントエンド部分に[Laravel Mix](https://github.com/JeffreyWay/laravel-mix)を採用する計画があるようです。
上記の調整をプルリクエストしようかとも思いましたが、Laravel Mixに置き換えられることで、問題が一気に解決する可能性も考えられます。
なので、次期バージョンが出るまでは、このスクリプトを使いつつ様子見かなーと思ってます。
比較的モダンな環境を用意していて、かつメンテナンスが継続しているボイラープレートが他に見当たらないので、しばらくはこのSageでテーマ開発していくことになりそう。
よろしくな！Sage！

（他にも良いボイラープレートあったら教えてください）