Foundation CLIのwatchで発生したエラーをnpm startで回避する方法

レスポンシブフロントエンドフレームワークのFoundationを開発環境で利用する際に、Foundation CLIのコマンドを使って開発していたのですが、久しぶりに使ってみたところエラーで動きませんでした。

根本的なエラー解決には至りませんでしたが、別の方法で回避できましたので、経緯を残しておきます。

エラー発生までの経緯

静的HTMLを効率良く開発するため、テンプレートエンジンとしてFoundationを利用しているプロジェクトがありました。FoundationはnpmやFoundation CLI、CDNやダウンロードといった様々なインストール方法が用意されていますが、JavaScriptのテンプレートエンジンであるHandlebarsをベースとしたPaniniという機能があり、これを使うには「Foundation for Sites」をインストールする際に「ZURB template（Panini Template）」としてインストールする必要があります。Foundation CLIを使ってインストールすることで、ZURB templateをインストールしテンプレートエンジンが利用できるようになります。

そうして当初は問題なく利用できていましたが、先日このプロジェクトの更新を行うために約1年振りにFoundation CLIを利用したところ、エラーが発生しタスクランナーが動きませんでした。

foundation watchができない

Foudation CLIにwatchコマンドがあります。Foundationをインストールしたディレクトリに移動し、watchコマンドを実行することで、サーバーが起動しアプリが走り、各ファイルの変更を反映したりコンパイルするタスクランナーであるGulpが実行されるため、変更処理がリアルタイムで反映されます。

foundaton watchを実行したところ、エラーとなり実行できませんでした。エラー内容を調べてみると、公式のGithubのissuesに同じようなエラーがありました。

Foundation watch error · Issue #148 · foundation/foundation-cli · GitHub

Foundationのメンバーと思われる方の返答として「Node 14を使え」とありましたので、Node のバージョンを14に変更、Foundation cliをnpm経由でインストールし、再度foundaton watchを実行しました。……が、変わらずエラー。念の為以下のバージョンで試しましたが、全てエラーでした。

• v14.0.0
• v14.18.0
• v14.19.1

foundation newもエラー

新しくプロジェクトを作成するnewコマンドもエラーでした。

✗ Node modules not installed.

ちなみに、Node.jsやnpmのバージョンに起因するかと思い、Node.jsのバージョンを変更してみましたが変わりませんでした。以下、試したバージョンです。

• v5.12.0
• v8.17.0
• v10.16.3
• v10.24.1
• v12.22.10

foundation watchではなく、npm startでGulpを実行する

別のissueにヒントがありました。

How can i resolve that foundation problem with npm? · Discussion #12321 · foundation/foundation-sites · GitHub

foundation watchではなくnpm startによって自己解決したようです。そこでnpm startを実行してみたところ、以下のエラーが表示されました。

Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 14.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 10.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.

Node.jsのバージョンが以前から変わっていたため、Node Sassが見つからないとのこと。npm rebuild node-sass を実行することでダウンロードされるようです。そこで早速 npm rebuild node-sass を実行し、現在の環境にあったバージョンがダウンロードされました。

再度npm startすると、無事Gulpが起動しローカルサーバーが立ち上がり、タスクランナーも問題なく動きました。

Finished 'server' after 282 ms
Starting 'watch'...

foundation watch での起動は変わらずエラーですし、foundation new がエラーになるため新規プロジェクトは作成できませんが……既存プロジェクトでのwatchの代わりに利用できるということで良しとします。新規プロジェクトではFoundationは利用せず、別のテンプレートエンジンを採用するのが良さそうです。

テンプレートエンジンの将来はどうなるのか

PaniniのGithubのスター数は582、最終リリースは2020年7月となり、盛り上がっているわけではなく積極的に開発されてもいないため、将来的に利用できなくなる可能性があると言えます。となると、このままHandlebarsを基本としたPaniniを使っていくよりかは、別のテンプレートエンジンに乗り換えて置いたほうがいいかもしれません。

例えばテンプレートエンジンのPugのGithubを見るとスター数は2万、最終リリースは2021年3月です。同じくEJSはスター数6,000、最終リリースは2021年2月。

実際触っていないのでわかりませんが、このような声もありました。

EJSとかって結局Vue.jsとがあるからいらないのですか？

HTMLのテンプレートエンジンだけでVue.jsやReactを学ぶには学習コストが高いなぁと思い、なかなか手がでないでいます。流行り廃りも早いですし、将来的に使い続けられるという保証もありません。

「最適解を見つける」というよりはその都度プロジェクトにあった方法を採用していく、というのがベターなのかもしれませんね。