# jQueryで作ったメソッドをNuxt.jsで使う

Tags: JavaScript vue jQuery

お疲れ様です、ナガです。

静的ウェブサイトをNuxt化する際に、jQueryで作っていたメソッドを使い回すための備忘録です。

# 対象読者

• Nuxt.js触りたての人
• 今までjQueryしか触ってこなかった人
• ES6記法をなんとなく知ってる人
• jQueryで作ったメソッドをNuxt.jsのアプリでも使いたい人

# この記事で書くこと

• jQueryで作ったメソッドの使うための下準備
• コンポネントでjQueryで作ったメソッドをインポートして使用する方法

# 環境

• macOS High Sierra
• node v8.13.0
• yarn v1.12.3

Nuxtの環境構築は create-nuxt-app を使用するとバチクソ楽に構築することができます。

• create-nuxt-app

# nuxt.config.js

webpack.ProvidePlugin で jQueryを使用できるようにしておきます。

const webpack = require('webpack')

module.exports = {
  // 省略
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery'
      })
    ]
  },
  // 省略
}

# 前提

jQuery製のメソッドは予めモジュール化しておく。

Webpackで扱いたいので assets ディレクトリに入れる。

# assets/js/main.js

export function hideElement(selector) {
  $(selector).hide()
}

# 実装

assets/js/main.js を pages/index.vue に require する。

# pages/index.vue

<template>
  <section class="container">
    <div>
      <div class="logoWrapper">
        <logo />
      </div>
      <!-- ボタンをクリックで methodsに定義した hideElement(selector) を発火する -->
      <p><button @click="execHideElement('.logoWrapper')">Hide Logo</button></p>
    </div>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  methods: {
    execHideElement(selector) {
      // jQuery はDOM操作のライブラリのため browser のみで動作させる
      if (process.browser) {
        // main.js を読み込む
        const main = require('~/assets/js/main')
        // main.js の hideElement(selector) を発火する
        main.hideElement(selector)
      }
    }
  }
}
</script>

# まとめ

サーバーサイドレンダリングする関係上、 process.browser を条件にif文のブロックに記述する必要がありますが、ベースコーディング時にjQueryで作ったDOM操作の振る舞いも一応使い回せます。

ただ、基本的には NuxtアプリケーションにjQueryを使うのは後々痛い目にあう可能性が高いのでオススメしておりません。