🖖🏻 ⛽️ 🔌 大規模なVueプロジェクトを開発するための4つのベストプラクティス 👈 🔷 👨🏾‍🚒

ご存知のように、Vue.jsはJavaScriptベースのフレームワークであり、その人気は近年急速に高まっています。

Vueの人気が高まった理由はたくさんあります。これには、フレームワークの単純さ、既存のプロジェクトへの統合の容易さ、フレームワークでの作業の利便性、およびVueアプリケーションに課せられるあまり強くない制限が含まれます。これらすべては、VueがAngularおよびReactと競合するのにも役立ちます。実際、Vueは、多くの点で、他の一般的なフレームワークやライブラリと同等であるように感じます。

私は彼らがVueの欠点について何を書いているのかを知ることにしました。関連資料を探していると、どこでもVueは大規模なプロジェクトを開発するには不十分だと言われていることに気づきました。Vueを知っているので、これは真実ではないと自信を持って言えます。この投稿では、大規模なVueプロジェクトを開発するための4つの詳細なガイドラインに注目したいと思います。

1. Vueスロットを使用して、コードを明確にします

コンポーネントの関係を設定する場合、親子モデルが最もよく使用されます。しかし、状況によっては、そのようなモデルが最も成功するとはほど遠い場合があります。多数の子コンポーネントをホストする単一の親コンポーネントがあるとします。これは、コンポーネントの相互作用を確立するために、多数の入力パラメーター（props）を使用し、多くのイベントを生成する必要があることを意味します。このような状況では、コードはすぐに乱雑になります。これらは、大規模プロジェクトの開発者が直面する状況です。しかし、Vueには、この種の問題に対処するために特別に設計されたメカニズムがあります。

私たちはスロットについて話している。これらは、親子関係を表す別の方法を提供するために使用されます。スロット、つまり要素<slot>は、開発者にコードを再編成する機能を提供します。スロットを使用する簡単な例を次に示します。

<div class="demo-content">
   <slot></slot>
</div>

このようなコンポーネントがレンダリングされると、そのタグ<slot></slot>はタグのコンテンツに置き換えられます<demo-content>。

<demo-content>
  <h2><font color="#3AC1EF">Hi!</font></h2>
  <class-name name="Welcome to Vue!"></class-name>
</demo-content>

Vueプロジェクトで使用できるスロットにはさまざまな種類があります。スロットについて知っておく必要がある最も重要なことは、スロットの使用が成長するプロジェクトに大きな影響を与える可能性があるということです。プロジェクトコードを適切な状態に保ち、クリーンなコードを作成するのに役立ちます。

2.独立したコンポーネントを作成し、それらを再利用します

コンポーネントを開発するときは、最初の原則に従い、コンポーネントをフォーカス、独立、再利用可能、小型、およびテスト可能にします。

実際、「大規模な」システムを効果的に設計する秘訣は、そもそもそれらのシステムを構築しようとしないことです。代わりに、これらのシステムは、高度に専門化された問題を解決する小さな部品から組み立てる必要があります。これにより、システムの小さな部分が「大きな」目標にどのように適合するかを簡単に評価できます。

Eddie Osmani Bit

などの特殊なシステムを使用して、コンポーネントを作成および管理できます。ここだそれについてのものが。

3.Vuexストアを適切に整理します

Vuexは、Vueアプリケーションの状態管理パターンおよびライブラリです。Vuexを使用すると、すべてのアプリケーションコンポーネントの集中データストアを整理できます。Vuexについてのコメントを見たことがありますが、Vuexは開発者がプロジェクトを構築する能力を制限し、開発者が必要なことを実行できないようにします。私はそのような声明に同意しません。Vuexは、実際には、一連の原則に従ってプロジェクトを構造化する開発者を支援し、プロジェクトをより適切に編成します。

これらの原則について説明する前に、Vuexリポジトリの4つの主要コンポーネントについて説明したいと思います。このようなリポジトリを効果的に使用したい場合は、知っておく必要があります。これらのコンポーネントに精通している場合は、Vuexストアを簡単に構築し、プロジェクトの編成を改善できることを意味します。簡単な説明は次のとおりです。

状態：アプリケーションデータを保存するために使用されます。
ゲッター：ストレージ外の状態オブジェクトへのアクセスを整理するために使用されます。
変異：状態オブジェクトを変更するために必要です。
アクション：突然変異を適用するために使用されます。

これらのコンポーネントに精通していると仮定して、上記の原則について説明しましょう。

アプリケーション層の状態は、リポジトリに保存することで一元管理する必要があります。
状態の変更は、常にミューテーションを使用して行う必要があります。
非同期ロジックはカプセル化する必要があります。アクションを通じて状態にのみ作用する必要があります。

これらの3つの原則を順守できれば、プロジェクトを適切に構成できることを意味します。プロジェクトの成長の過程で、対応するVuexコンポーネントのコードを別のファイルに配置する必要があると判断した場合は、これを簡単に行うことができます。以下は、Vuexを使用したプロジェクト構造の例です。

├── index.html
├── main.js
├── api
├── components
└── store
    ├── index.js          
    ├── actions.js
    ├── mutations.js
    └── modules

▍Vuexモジュラーストレージ組織

この記事では、大規模なプロジェクトについて話します。これらのプロジェクトでは、非常に大きく複雑なファイルを使用することが予想されます。このようなプロジェクトを作成するプログラマーは、ニーズを反映したストレージ管理メカニズムを必要としています。同時に、ストレージの構造は不必要に複雑であってはなりません。したがって、Vuexストアをモジュール方式で編成し、そのようなストアに最適な構造のビジョンに従ってカスタマイズすることをお勧めします。ストレージをモジュールに分割する明確な方法はありません。一部の開発者は設計機能ベースのアプローチを採用し、一部の開発者はデータモデルアプローチを採用しています。ストレージをモジュールに分割する最終決定は、プロジェクトを担当するプログラマーが行います。合理的に構造化されたストレージは、長期的にプロジェクトの使いやすさにプラスの影響を与えます。

ストレージを構造化するためのモジュラーアプローチの例を次に示します。

store/
   ├── index.js 
   └── modules/
       ├── module1.store.js
       ├── module2.store.js
       ├── module3.store.js
       ├── module4.store.js
       └── module5.store.js

▍ヘルパーメソッドの使用

上記では、Vuexリポジトリで使用される4つのコンポーネントについて説明しました。状態にアクセスしてゲッターを操作する必要がある場合、コンポーネントのアクションとミューテーションを呼び出す必要がある場合を考えてみます。このような場合、多くのメソッドや計算されたプロパティを作成する必要はありません。あなたは、単に（ヘルパーメソッドを使用することができmapState、mapGetters、mapMutationsおよびmapActions）の使用は、コード量を増やす不当避けるだろう。これらのヘルパーメソッドの使用について話しましょう。

▍mapState

コンポーネントが複数のストレージプロパティまたは複数のゲッターにアクセスする必要がある場合、これはヘルパーメソッドmapStateを使用してゲッター関数を生成できることを意味します。これにより、比較的大量のコードを作成する必要がなくなります。

import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count,
    countAlias: 'count',
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

▍mapGetters

ヘルパーメソッドはmapGetters、ストレージゲッターのローカル計算プロパティへのマッピングを構成するために使用されます。

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'count1',
      'getter1',
    ])
  }
}

▍mapMutations

ヘルパーメソッドはmapMutations、ミューテーションを適用するためにコンポーネントで使用されます。コンポーネントメソッドと呼び出しの間の対応を定義しますstore.commit。さらに、この方法を使用して、一部のデータをストレージに転送できます。

import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations({
      cal: 'calculate' //  `this.cal()`  `this.$store.commit('calculate')`
    })
  }
}

▍mapActions

ヘルパーメソッドmapActionsは、アクションをディスパッチするためにコンポーネントで使用されます。コンポーネントメソッドと呼び出しの間の対応を定義しますstore.dispatch。

import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions({
      cal: 'calculate' //  `this.cal()`  `this.$store.dispatch('calculate')`
    })
  }
}

4.ユニットテストを忘れないでください

テストは、プロジェクトのもう1つの重要な側面です。開発者は、プロジェクトの重要性やサイズに関係なく、作成したものをテストする必要があります。これは、数百または数千もの小さな機能を持つ大規模プロジェクトに特に当てはまります。私たちの仕事はそれらのそれぞれをテストすることです。ユニットテストは、この問題の解決に役立ちます。これらにより、プログラマーはコードの個々のモジュールをテストできます。このようなテストでは、エラーを特定して排除できるだけではありません。また、既存のコードに変更が加えられたときのアクションの正確さに対するプログラマーまたはプログラマーのチームの信頼度も高まります。時間の経過とともにプロジェクトが成長するとき、開発者はユニットテストの使用のおかげで、新しい機能を安全にプロジェクトに追加できると同時に、それを恐れることはありません。その革新は既存のメカニズムの仕事を混乱させるでしょう。これを行うには、プロジェクトの最初からユニットテストを作成する方法に従う必要があります。

Vueに基づくプロジェクトで使用されるユニットテストについて言えば、そのようなテストは、他のフレームワークやライブラリに基づくプロジェクトで使用されるものとほぼ同じであると言えます。つまり、Jest、Karma、またはMochaはVueとうまく連携します。ただし、テストの作成にどのフレームワークを選択した場合でも、ユニットテストを開発する際に留意すべき一般的なガイドラインがいくつかあります。

テストが失敗した場合、明確なエラーメッセージが表示されます。
テストを作成するときは、適切なアサーションライブラリを使用することをお勧めします。（たとえば、クレームを生成するメカニズムはJestに組み込まれており、MochaではChaiライブラリが使用されます）。
ユニットテストは、すべてのVueコンポーネントをカバーする必要があります。

プロジェクトの最初からこれらの推奨事項に従うと、プロジェクトが成長するにつれて、コードのデバッグと手動テストに費やす時間が大幅に短縮されます。

Vueプロジェクトは、ユニットテストに加えて、エンドツーエンドの統合テストを受けることができます。ここでの状況は、ユニットテストの場合と同様に、他のフレームワークやライブラリの状況と非常によく似ています。したがって、プロジェクトや同様のテストに含めることをお勧めします。通常、プロジェクトのルーティング部分はユニットテストではテストされません。ここでは、エンドツーエンドのテストが使用されます。Vueストアのテストは最大の課題です。状態、アクション、またはゲッターを個別にテストするのは時間の無駄と見なされるため、統合テストを使用してテストすることをお勧めします。

結果

この投稿でVue.jsの技術的機能を確認した後、このフレームワークは大規模なプロジェクトの開発に適しているという確信を強めました。他のフレームワークやライブラリと同様に、その助けを借りて、そのようなプロジェクトを作成および管理し、それらを良好な状態に保つことができます。

Vueは大規模なプロジェクトの開発に適していると思いますか？

大規模なVueプロジェクトを開発するための4つのベストプラクティス