グローバル定数と変数の活用：Nuxt.jsでサイト構築の基本をマスターしよう

シェアする：

投稿日時：2023年10月12日

この記事をおすすめしたい人

  • Nuxt.jsでグローバル変数を自分で定義したい人
  • Nuxt.jsでサイトの効率的なコーディング方法を探している人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

今回はグローバル定数やら変数やら関数やら、プロジェクト単位で使い回す仕組みをまとめました。

えー、稼動させてるサイトは増えてきているんですが、相変わらず基本的なJavaScript？Node.js？の知識が不足していて、

なんでそんな不細工な書き方してんの。

みたいなのが多々あると思います。 あくまで現段階での理解のまとめということで…。

動作に関してはチェックしているので、参考になる人がいれば参考にしてください。

定数を使い回す方法

実装順序の都合、狭い用途の方から先に書きます。

nuxt.config.js内で使う

これは簡単で、どっかテキトーにjsなりjsonで設定したファイルを作って、それをimportしたりrequireするだけでいいみたいです。

ファイル形式は個人的にはjsの方が好きで、JSONは規格？があるのかけっこう細かい制約がてんこ盛りで、特に末尾のカンマを許容してくれないのが追記していく時にすげー不便です。 jsならかなり雑に書いても許容してくれます。

jsで書く場合はこんな↓感じ。 


export default {
  rootUrl: 'https://example.com/',
  siteName: 'サイト名',
  gtagId: 'G-XXXXXXXXX',
}

関数も実装できますが、ライフサイクルでしたっけ？ 動いた時に組み込まれる順番のせいか、thisとかappとかのコンテキスト？にはアクセスできなさそう。 引数で渡せばどうにいけます。

これを例えばpluginsフォルダにlib.jsとかにして保存したとして、後はnuxt.config.jsにこんな↓感じで読み込めばオブジェクトになります。 


import lib from './plugins/lib.js'
const lib = require('./plugins/lib.js')

ページやコンポーネントで使う

これも一応上の方法で対応可能です。 設定した値を使いたいvueファイルでインポートするだけ。

ですが、せっかく使い回せるよう設定を分離したのにページごとに読み込まないといけないとか面倒じゃないですか？

そういう時にinjectという機能があるようです。 この↓ように書きます。 


export default ({ app, route }, inject) => {
  const data = {
    rootUrl: 'https://example.com/',
    siteName: 'サイト名',
    gtagId: 'G-XXXXXXXXX',
  }
  
  inject('lib', data)
}

これをpluginsフォルダにlib-set.jsとかにして保存したとして、nuxt.config.js内のpluginsにこんな↓感じで追記します。 


export default {
  plugins: [
    { src: '~/plugins/lib-set.js' },
  ],
}

この形で読み込むと、thisやらappやらにアクセスできる環境でどのページからでも「this.$lib」「app.$lib」のような形でアクセスできるようになります。 ルートURLなら「this.$lib.rootUrl」ですね。

「$lib」の部分はinject()の第一引数で決められます。

いや、便利やけどlibとlib-setで同じ内容を2回書いてるやん！

という問題の解決方もあって、lib-setの方でこう↓書けばいいだけ。 


import data from './lib.js'

export default ({ app, route }, inject) => {
  inject('lib', data)
}

lib-setは他のメリットもあって、引数にコンテキストにアクセスできるんですよ。 上の例では展開して、appとrouteを受け取っています。 他にどんな値があるのかは公式で確認してください。 ほぼ何にでもアクセスできます。

他のモジュールの値や現在のパスを使用して使い回す設定を追加することができます。

変数を使い回す方法

ここでは「定数とは違い、ページによって変わる可能性のある値」という意味で変数を使っていますが、上のinjectを使った方法でも対応可能です。

ですが頻繁に使う値だと「this.$lib.name」とかタイプするの長いじゃないですか？

そもそもthis以下に直接追加できへんの？

とお友達のChatGPTくんに聞いて帰ってきた方法がVue.mixinという方法でした。

書き方は分かったんですが、このmixinというの。 プラグインの作例やSASSでも見た記憶があるんですが、何をどうしているのか分かっていません。 「こう書けばオレの希望の動作をする」と分かってるだけです、すいません。

コードはこんな↓感じ。 


import Vue from 'vue'

Vue.mixin({
  computed: {
    isDev() {
      return this.$root.context.isDev
    },
    lang() {
      return this.$i18n.locale
    },
    isJa() {
      return this.$i18n.locale == 'ja'
    },
    isEn() {
      return this.$i18n.locale == 'en'
    },
  },
})

これをpluginsフォルダにmixin.jsとかにして保存したとして、nuxt.config.js内のpluginsにこんな↓感じで追記します。 


export default {
  plugins: [
    { src: '~/plugins/mixin.js' },
  ],
}

これでどのページからでもコンポーネントからでも「this.isDev」みたいな形でアクセスできるようになります。

これ、要は全ページのcomputedに最初から追加しておくってことみたいです。 僕は上の4つをほとんどのページで追加していたのでまさにオレ向けの書き方でした。 1箇所で書けるならメンテナンス性が飛躍的に上がりますからね。

試してませんがお友達によると、methodsやdataもここに書けるとのことでした。 注意事項はthis以下に隔離するためのパッケージが存在しないので、Nuxt側でデフォルトで用意された名前と被っちゃうと上書きされるので危ないよって言ってました。

僕はチェックとしてthis.nameみたいな感じでテスト出力してみて、undefinedが返ってたらおっけー？みたいな感じで名前を付けてます。

まとめ

値をグローバルに扱う方法をまとめてみました。

mixinの方を使うと定数でも変数でも関数でもなんでも使い回しできそうですが、たぶんこの書き方だとnuxt.config.js内で読めないんですよね。 僕は今のところ用途によって使い分けてます。

効率のよいコーディングの役に立てば幸いです。

以上、WordPressからお届けしました！

シェアする：
Nuxt.js