Vue

全てのVue.jsエンジニアが学びたいコードの書き方TOP11

VueJSの普及が進むにつれ、いくつかのベストプラクティスが生まれ、標準になりつつあります。

この記事では、いくつかの素晴らしいリソースからのヒントを紹介します。

v-forの中では常に:keyを使う

 

v-forディレクティブでkey属性を使用すると、データを操作したいときに、アプリケーションを一定かつ予測可能にすることができます。

これは、Vueがコンポーネントの状態を追跡したり、異なる要素への一定の参照を持つために必要です。

キーが非常に役立つ例として、アニメーションやVueのトランジションを使用する場合があります。

キーがないと、VueはDOMを可能な限り効率化しようとします。

これは、V-Forの中の要素が不規則に表示されたり、その動作が予測できなくなることを意味するかもしれません。

各要素へのユニークなキー参照があれば、VueアプリケーションがDOM操作をどのように処理するかをより正確に予測することができます。

 

<!-- BAD -->
<div v-for='product in products'>  </div>

<!-- GOOD! -->
<div v-for='product in products' :key='product.id'>

 

イベントではケバブケースを使う

カスタムイベントを発行する際には、常にkebab-caseを使用するのがベストです。

なぜなら、親コンポーネントでは、そのイベントをリッスンするのに同じ構文を使用するからです。

コンポーネント間の一貫性を保ち、コードを読みやすくするために、どちらの場所でもkebab-caseを使うようにしましょう。

this.$emit('close-window') 

 

<popup-window @close-window='handleEvent()' />

 

プロップを camelCase で宣言し、テンプレートでは kebab-case を使う

このベストプラクティスは、単に各言語の慣習に従うだけです。

Javascriptではキャメルケースが標準で、HTMLではケバブケースが標準なので、それに従って使用します。

幸いなことに、VueJSはケバブケースとキャメルケースを変換してくれるので、実際に宣言する以外のことを心配する必要はありません。

これはボックスのタイトルです。
Javascriptではキャメルケースが標準で、HTMLではケバブケースなので、それに合わせて使います。
BAD!

<PopupWindow titleText='hello world' />

props: {
  'title-text': String
}

 

GOOD!

<PopupWindow title-text='hello world' />

props: {
  titleText: String
}

 

データは常に関数を返す必要がある

 

コンポーネントのデータを宣言するとき、dataオプションは必ず関数を返す必要があります。

関数を返さず、単にオブジェクトを返した場合は、そのデータはコンポーネントのすべてのインスタンスで共有されます。

 

BAD!
data: {
  name: 'My Window',
  articles: []
}

 

しかし、ほとんどの場合、再利用可能なコンポーネントを構築することが目的であるため、

各オブジェクトが一意のオブジェクトを返すようにします。

これを実現するために、関数の中でデータオブジェクトを返すようにしています。

GOOD!
data () {
  return {
    name: 'My Window',
    articles: []
  }
}

 

v-ifとv-for要素を併用しない

 

配列の要素をフィルタリングするために、v-ifとv-forを一緒に使いたいと思うことがあります。

 

BAD!
<div 
   v-for='product in products' 
   v-if='product.price < 500'
>

 

この問題は、VueJSがv-if指令よりもv-for指令を優先してしまうことです。そのため、フードの下では、すべての要素をループしてから、v-if条件をチェックします。

 

this.products.map(function (product) {
  if (product.price < 500) {
    return product
  }
})

 

つまり、リストからいくつかの要素だけをレンダリングしたい場合でも、配列全体をループする必要があるのです。

 

もっとスマートな解決策は、計算済みのプロパティを繰り返し処理することです。上の例では、次のようになります。

 

GOOD!
<div v-for='product in cheapProducts'>


computed: {
  cheapProducts: () => {
    return this.products.filter(function (product) {
      return product.price < 100
    })
  }
}

 

これが良い理由はいくつかあります。

  • すべてのアイテムをループしないので、レンダリングの効率が上がる
  • フィルタリングされたリストは、依存関係が変更されたときにのみ再評価されます。
  • コンポーネントのロジックをテンプレートから分離し、コンポーネントをより読みやすくします。

適切な定義によるプロップの検証

これが最も重要なベストプラクティスであることは間違いありません。

なぜ重要なのか?

それは 基本的に、将来の自分を現在の自分から守るためです。

大規模なプロジェクトを設計していると、小道具に使用した正確なフォーマット、タイプ、その他の規則を忘れてしまうことがあります。

また、大規模な開発チームに所属している場合、同僚は読解力があるわけではないので、コンポーネントの使用方法を明確にしておきましょう。

ですから、プロップのフォーマットを決定するためにコンポーネントを丹念にトレースする手間を省き、プロップバリデーションを書いてください。

Vueのドキュメントにあるこの例を見てみましょう。

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

 

コンポーネントにはPascalCaseまたはkebab-caseを使う

 

コンポーネントの一般的な命名規則は、PascalCaseまたはkebab-caseを使用することです。

どちらを選択するにしても、常に一貫性を保つことが最も重要です。

パスカルケースは、ほとんどのIDEのオートコンプリート機能でサポートされているので、最も効果的です。

# BAD

mycomponent.vue
myComponent.vue
Mycomponent.vue

# GOOD

MyComponent.vue

 

ベースとなるコンポーネントには、それに応じたプレフィックスを付ける必要がある

 

もう1つの命名規則は、ベース・コンポーネントの命名に焦点を当てています。

ベース・コンポーネントとは、純粋に体裁を整えるためのコンポーネントで、アプリ全体で共通のスタイルを設定するのに役立ちます。

Vueのスタイルガイドによると、ベースコンポーネントとは、以下の要素のみを含むコンポーネントです。

  • HTML要素
  • 追加のベースコンポーネント
  • サードパーティのUIコンポーネント

これらのコンポーネントに名前を付ける際には、"Base"、"V"、または "App "という接頭辞を付けるのが最善の方法です。

繰り返しになりますが、プロジェクト全体で一貫性が保たれていれば、これらのいずれを使用しても構いません。

 

BaseButton.vue
BaseIcon.vue
BaseHeading.vue

 

この命名規則の目的は、ベースとなるコンポーネントをファイルシステムにまとめておくことにあります。

また、webpackのインポート機能を使えば、命名規則のパターンに一致するコンポーネントを検索して、

Vueプロジェクトのグローバルとして自動的にすべてのコンポーネントをインポートすることができます。

 

宣言され、一度でも使用された部品には、"The "という接頭語を付ける

 

ベースコンポーネントと同様に、シングルインスタンスコンポーネント(1ページに1回使用され、プロップを受け取らないもの)には、

独自の命名規則があります。

これらのコンポーネントは、アプリに固有のもので、通常は、ヘッダー、サイドバー、フッターなどです。

このコンポーネントのアクティブなインスタンスは1つだけであるべきです。

TheHeader.vue
TheFooter.vue
TheSidebar.vue
ThePopup.vue

 

作成されたANDウォッチのメソッドを呼び出してはいけない

 

Vueの開発者がよく犯すミス(私だけかもしれませんが)は、

不必要にcreated and watchでメソッドを呼び出してしまうことです。

この背景には、コンポーネントが初期化されたらすぐにwatchフックを実行したいという考えがあります。

 

BAD!
created: () {
  this.handleChange()
},
methods: {
  handleChange() {
    // stuff happens
  }
},
watch () {
  property() {
    this.handleChange()
  }
}

 

しかし、そこにはVueには解決策が組み込まれています。

それは、Vueのウォッチャーのプロパティで、私たちがよく忘れてしまうものです。

ウォッチャーを少し再構築して、2つのプロパティを宣言するだけでいいのです。

handler (newVal, oldVal) - これはウォッチャーのメソッドそのものです。

immediate: true - インスタンスが生成されたときにハンドラが実行されるようにします。

 

GOOD!
methods: {
  handleChange() {
    // stuff happens
  }
},
watch () {
  property {
    immediate: true
    handler() {
      this.handleChange()
    }
  }
}

 

テンプレート式は、基本的なJavascriptの表現のみとする

 

テンプレートにできるだけ多くのインライン機能を追加したいと思うのは自然なことです。

しかし、これではテンプレートが宣言的でなくなり、複雑になってしまいます。

つまり、テンプレートが極端に散らかってしまうのです。

これについては、Vueスタイルガイドの別の例を見てみましょう。

いかに混乱しているかがわかります。

 

BAD!
{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

 

 

基本的には、テンプレート内のすべてのものが、何を表示しているのかを直感的に理解できるようにしたいと考えています。

これを維持するためには、複雑な式を適切な名前のコンポーネントオプションにリファクタリングする必要があります。

複雑な式を分離することのもう一つの利点は、これらの値を再利用できることです。

 

GOOD!
{{ normalizedFullName }}


// The complex expression has been moved to a computed property
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

 

結論

これで終わりです。

以上、Vueのコードをより保守的に、より読みやすく、よりプロフェッショナルにするための最も一般的な12のベストプラクティスを紹介しました。

これらのヒントが皆さんのお役に立てれば幸いです(私も常に覚えておきたいことですから)。

Pocket
LinkedIn にシェア

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-Vue

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.