Gridsomeで「window」の値を使うときに注意したいこと

Vue.jsではwindowは頻繁に使うAPI

Javascriptでは、windowインターフェイスは、ウィンドウのサイズを取ったり、スクロール位置を取ったり、セッションストレージにアクセスしたりと、意外と頻繁に使うWeb APIです。

Window | MDN

Gridsomeは、ビルドする際に静的サイトをレンダリングするために全てのJavascriptを一旦実行しますが、Gridsomeのビルド実行環境はCLIであってブラウザではないので、windowsインターフェイスが使えません。

試しにwindowインターフェイスをコードに仕込んでおくと、

ReferenceError: window is not defined

というエラーを吐いて、ビルドに失敗します。

エラーを回避する方法

ビルドエラーが起こるからといって、windowインターフェイスを全く使わないというのは現在のWebサイトの表現手法を考えたら、全く現実的ではありません。

ですので、Gridsomeのビルドの時にだけ回避するようにします。ブラウザかどうかは、「process.isClient」で取得できるので、その値で条件分岐をします。

if (process.isClient) {
  localStorage.setItem("login", state.login)
}

上記の例は、VuexでstateをlocalStorageに保存するプログラムの抜粋ですが、localStorageはwindowインターフェイスなので、「ブラウザの時にだけ実行する」という条件にすれば、ビルドでエラーを吐かずに成功します。

importするプラグインは使えない可能性が高い

GridsomeはVue.jsのプラグインが使えるので、main.jsなどでimportしてプラグインを使うケースがあります。

しかし、Gridsomeのビルドではwindowが使えないため、windowを使うプラグインをimportをすると、プラグインをイニシャルで無条件にロードしてしまうため、同様に「window is not defined」というエラーを吐くようになってしまいます。

プラグインによっては、ロード方法を変えれば使えますが、プラグインによるのでその都度対応することになるでしょう。

Gridsomeで「window」の値を使うときに注意したいことでした。

Gridsomeは静的サイトジェネレータという特殊な環境なので、色々なことがおきますね。