主なオプション(data, computed, filter, props)

単一ファイルコンポーネントを実装する時に利用する主なコンポーネントオプションについて整理します。オプションの「概要」「記述順」「使い分け」など確認します。

主なオプション一覧

利用例

まず、単一ファイルコンポーネントの scriptタグ 内の記述例を示します。主なコンポーネントオプションをスタイルガイドで推奨されいてる順序で記述しています。

import SampleButton from '@/components/SampleButton'
import myMixin from '@/mixins/my-mixin'

export default {
  name: 'TheHeader',

  // 依存関係
  components: {
    SampleButton
  },

  filters: {
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },

  // オプションをマージ
  mixins: [myMixin],

  // コンポーネントへのインタフェース
  props: {
    items: {
      type: Array,
      default: [],
      required: true
    }
  },

  // ローカル リアクティブプロパティ
  data() {
    return {
      count: 0,
      message: 'Hello'
    }
  },

  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },

  // イベント
  watch: {
    '$route' (to, from) {
      console.log('route changed')
    }
  },

  created() {
    console.log('created')
  },

  mounted() {
    console.log('mounted')
  },

  // リアクティブではないプロパティ
  methods: {
    sampleMethod() {
      console.log('sampleMethod')
    }
  }
}

各オプションの概要

プロパティ 概要
name vue-devtools でデバッグするとき、指定したコンポートの名前が表示されます。
components ローカルで利用するコンポーネントを登録します。
filters テキストフォーマット用の処理を定義します。{{ message | capitalize }} のように、パイプ形式でデータを受け取りフォーマットします。
mixins 1. ミックスインオブジェクトを定義
2. 定義したミックスインを利用したいコンポーネント内のmixinsオプションに指定
といった流れで利用します。

複数コンポーネントで利用する共通オプションを定義したいときなどに便利です。
props 親コンポーネントからデータを受け取ります。
data Vueインスタンスで利用するデータオブジェクトを定義します。SFCでは各Vueインスタンスで独立したデータを持たせるため、Function型で登録する必要があります。
computed データの変更に対して反応します。デフォルトは、getterのみ提供してますが、setterも利用できます。
watch データの変更に対して反応します。
ライフサイクルフック インスタンスライフサイクルで実行したい処理を定義します。
methods 「イベント発生時に実行する処理」「computedから呼び出したい処理」がある場合、メソッドを定義します。

比較

computed と data

値の変更が無いのであれば、computedで定義します。

computed と methods

テンプレート内にロジックを記述すると使いまわせないですが、computed methods を利用することでロジックを使いまわせます。パフォーマンス、キャッシュの有無を考えて使い分けます。

  • computed
    • 依存するものが更新されたときにだけ、処理を再実行します。
    • それ以外は、キャッシュが利用されます。
  • methods
    • 常に再描画されると実行します。
  • 参考

computed と watch

computed よりも watch のほう冗長な記述になるため、基本的には computed を利用します。
watch は、データの変更に応じて非同期処理をしたいときなどに利用します。

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。