レスポンシブフロントエンドフレームワークの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にヒントがありました。
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を学ぶには学習コストが高いなぁと思い、なかなか手がでないでいます。流行り廃りも早いですし、将来的に使い続けられるという保証もありません。
「最適解を見つける」というよりはその都度プロジェクトにあった方法を採用していく、というのがベターなのかもしれませんね。
コメントを残す