《Vue》computedプロパティを別ファイルでモジュールとして定義して使う方法

Vue.js

computedをモジュール化するメリット

コードの可読性が向上する

複雑なアプリケーションをvueで開発しようとした場合、computedプロパティが肥大することが多々あります。あまりにも肥大するとそのvueファイルのコードの可読性が落ちるので、複雑なcomputedプロパティは外部モジュールとして定義するのをお勧めします。こうすることで複雑なロジックをcomputedプロパティに書いた場合でもvueファイルの可読性を下げることを回避することができます。

computedのモジュール化を実装してみた

前提条件

今回は次のコードに記述されているcomputedプロパティを外部ファイルでモジュール化して、それをインポートして使える状態にするのを目標とします。

<template>
  <div>{{ introduction }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: "katuo",
      age: "50"
    };
  },

  computed: {
    introduction() {
      return `my name is ${this.name}, my age is ${this.age}`;
    }
  }
};
</script>

このコードは正しく動き、ブラウザで「my name is katuo, my age is 50」が出力されます。

失敗パターン

まず初めに私がハマった失敗パターンを紹介します。introductionプロパティを別のファイル(utils.js)にモジュールとして定義しました。

const combineTexts = (text1, text2) => {
    return `${text1}+${text2}`
}

export { combineTexts }

このモジュールを次のように読み込んで表示しようと試みました。

<template>
  <div>{{ introduction(name,age) }}</div>
</template>

<script>
import { introduction } from "../misc/utils"
export default {
  data() {
    return {
      name: "katuo",
      age: "50"
    };
  },

  computed: {
    introduction
  }
};
</script>

しかしこのコードでは動かず、検証ツールのconsoleに次のエラーが表示されました。

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: _vm.introduction is not a function"

introductionは関数型ではないと言われています。確かにutils.jsで定義したintroductionの返り値はstring型でした。string型に対してintroduction()と書けないのは当然ですね。

成功パターン

先程のエラーを解消するためにutils.jsのintroductionの返り値を関数型に変更しました。

export const introduction = () => {
  return (name, age) => {
    return `my name is ${name}, my age is ${age}`;
  };
};

この変更によって、エラーを吐くことなく「my name is katuo, my age is 50」がブラウザに表示されることが確認できました。結論、computedプロパティを外部ファイルでモジュール化してそれをimportして使いたい時は関数型を返すモジュールを定義すればOKです。

番外:おすすめアイテム

記事の内容とは別に自宅・オフィスでの開発がもっと快適に、楽しくなる商品を紹介します。アイテム1つで開発効率が一気に向上したり、開発のモチベーションが上がったりするので良いアイテムにはお金を投資すると良いかと。

KATUO
KATUO
今回紹介する商品は普段自分が使っているものなので自信を持ってお勧めできますー。では1つずつ紹介していきます。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

筆者
筆者

今回の記事の内容は以上で終了です!最後まで読んでくれてありがとうございました!Twitterもやってるのでよかったらフォローしてください!

タイトルとURLをコピーしました