0%

Programmingプログラミングナレッジ

Posted:2019.11.08

Nuxt.jsプロジェクト内で共通の処理をpluginsディレクトリにて管理する

特定の決まった処理を使い回す場合に、コンポーネント内のロジックに都度記述するのは手間ですし、保守性も下がってしまいます。Nuxt.jsではそんな場合にpluginsディレクトリへ処理を記述したjavascriptファイルを配置することで、コンポーネント内で呼び出すことができます。

 

ということで、下記の通り、プロジェクト内にある「plugins」フォルダの中に、任意の名前でjsファイルを用意します。

/PROJECT ROOT
  ┣ plugins
    ┣ *********.js

 

pluginsフォルダ内のjsファイルには下記のように処理を記述していきます。まずはvueをインポートしておきます。そして、「Vue.prototype.」に続けて、処理を定義する関数名を$マークに続けて指定します。ここではサンプルとして、日付文字列を年月日のフォーマットに整形する処理を記述しています。

【/plugins/example.js】

import Vue from 'vue'

Vue.prototype.$dateTimeToJaDate = (dateTimeString) => {
 if (dateTimeString) {
  const date = new Date(dateTimeString)
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
 }
 return ''
}

 

処理を記述したら、「nuxt.config.js」にて、「plugins」のキーで、それぞれ用意したpluginsのjsファイルを指定していきます。パスはルートディレクトリからのルートパスで指定します。作成した分だけ個別に記述していきます。

【nuxt.config.js】※一部抜粋

export default {
 plugins: [
  { src: '~/plugins/example.js', ssr: false },
  { src: '~/plugins/*********.js', ssr: false },
  ........
 ],
 ........
}

 

これで、plugins内で定義した処理をコンポーネント内で自由に呼び出せるようになります。例えば下記のようなケースで、日付情報を出力する場合にそのままですと、整形される前の文字列として表示されてしまいます。

【Vue】※一部抜粋

<template>
 <div id="app">
  <div v-for="(item, index) in items" :key="index">
   <span class="date-display">{{ item.date }}</span>
  </div>
 </div>
</template>

// HTML
<span class="date-display">2019-02-27T12:53:17+09:00</span>

 

そこで、pluginsで定義した関数を挟むことで、その関数内での処理が実行される形になります。pluginsで定義した関数を記述する場合には$マークに続けて、関数名を記述すればOKです。

【Vue】※一部抜粋

<template>
 <div id="app">
  <div v-for="(item, index) in items" :key="index">
   <span class="date-display">{{ $dateTimeToJaDate(item.date) }}</span>
  </div>
 </div>
</template>

// HTML
<span class="date-display">2019年2月27日</span>

 

ウェブアプリケーションを作成する場合には、決まった処理を使い回すケースが多いかと思います。そんな時にはpluginディレクトリで処理を管理することで、コードの見通しが良くなり、運用・保守コストも削減できるのではないでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】