React.jsからVue.jsに切り替えてみた

導入

数年前、他の多くの人たちと同じように、私は React.js フロントエンド ライブラリのフックと機能コンポーネントの登場に「興奮」しました。これらは、Components クラスよりもはるかに少ないコードを記述することで、まったく新しい開発方法を提供しました。私はかなりの間、本当に夢中になりました。

今日、私はまったく新しいクライアント プロジェクトのニーズを満たすために Vue.js フレームワークを選択する必要がありました。そして、このプロジェクトが終わりに達したので、これはこのフレームワークの新規ユーザーとしてフィードバックを提供する機会だと自分に言い聞かせました!

それでは、このスキルの向上は Vue.js の悪名に応えたのでしょうか?
現在、フロントエンドを React で開発するよりも Vue で開発する方が良いでしょうか?

それが私たちが見ていくものです!

プロジェクトの立ち上げ

ボイラープレート

プロジェクトを始めようと言う人は、何時間も、場合によっては数日もかかる面倒な構成を節約するための、適切な ボイラープレートを探すと言うのです!
それほど詳しく調べる必要はありませんが、npm create vue@latest コマンドは私のニーズをほぼ満たしています。

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

Typescript 言語はすでにサポートされており、ルーティング システムとストアが提供されており、単体テストやエンドツーエンド テストの余地もあります!

デフォルトでは、Vite バンドラーがインストールされています。どちらが私を不快にさせないでしょうか？実際、ビルドは高速で、ほとんどの場合、ホット モジュール交換 (HMR) が適切に機能します。

少し npm run dev を実行して、ローカル開発サーバーを起動します。これで完了です。すでにブラウザで実行されています!

そして本番環境については? npm run build コマンドを入力するだけで、入力をチェックした後 (Typescript がアクティブ化されている場合)、プロジェクトが dist ディレクトリに静的ファイルとしてエクスポートされます。

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

プロジェクトのアーキテクチャ

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

プロジェクトのアーキテクチャ面では、特に次のことがわかります:

• index.html ファイル (タグ
  >); Vue アプリケーション全体が移植されています;
• main.ts、アプリコンポーネント、ルーター、ストアを連続して作成します。

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

• ルーティングとストアを管理するための純粋な .ts ファイル;
• いくつかの構成ファイルとテストファイル;
• ...そしてもちろん *.vue ファイルは、コンポーネント (一般的で再利用可能な要素に相当します) と ビュー (高レベルに相当します) に区別されます。ページ)

つまり、ファイル アーキテクチャは非常にシンプルで、ボイラープレートで多くのオプションがチェックされているにもかかわらず、React のアーキテクチャに比較的似ています。
これまでのところ、React から来たものとしては、特に新しいものはありません。そのとき、大きな違いが現れます!

Vue ファイルのアーキテクチャ

これは、公式 Web サイトからインスピレーションを得たコード スニペットです。クリックするとテキストの色が変わり、該当する場合は「上のテキストは緑色です」というフレーズが表示されますが、これは *.vue ファイルの典型的なアーキテクチャを表しています。

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

@click によるイベントのバインド、v-if による条件付き表示、および v-bind() による CSS のバインドに注意してください。

コードは 3 つの非常に異なる部分に分かれています:

• スクリプト: 制御コード;
• テンプレート: HTML 構造;
• style: CSS スタイルシート。

そしてこれら 3 つの部分は決して混ざりません ?.
これには、クライアント プロジェクトでの経験を通じて私が個人的に経験したいくつかの利点があります。

• HTML 構造は明確で、固定されており、非常に宣言的なスタイルです。条件付きで表示されるタグも含め、すべてがそこにあります。
• ロジック部分は表示部分から十分に分離されています;
• サードパーティのライブラリをインストールせずに、コンポーネントに直接リンクされた純粋な CSS をその場で作成できます。
• スタイルを分離しても、CSS に変数を挿入できます。

小さな欠点: 先験的 自動 CSS ポリフィルはありません。したがって、vue-emotion のような書店を目指すべきです。

私の観点から見ると、この種の「オールイン JS」ライブラリは Vue が提供するアーキテクチャを少し壊しているように見えます。そして明らかに、ブラウザ固有の CSS プロパティは現代でははるかにまれです。 したがって、de Vue は多くの場合、自己完結型です。

一言で言えば、このオールインワン アーキテクチャは非常に快適ですが、セクションが明確に分かれていることがわかりました。これにより、きれいなコードを維持できるだけでなく、より簡潔なを保つことができます。実際、「ビジネス ロジック / 表示 / スタイル」という 3 つのセクションが同時に存在すると、コードをより小さなモジュールに再分割し、より小さなファイルに分割することが奨励されることがよくあります。

それでは、Vue.js API 自体を詳しく見てみるとどうでしょうか?

Vue.js API

ここでは、私が遭遇した Vue.js API のすべての要素を網羅したリストではなく、Vue のロジックをかなり代表していると思われる非常に具体的な要素のみをいくつか紹介します。

(再) 計算された値

React の世界でよく知られている操作から始めましょう。データの更新後に HTML レンダリング (または変数) をインテリジェントに再計算します。
記憶 システム (一種の「キャッシュ」) の恩恵を受けて、毎回出力値を再計算する必要を回避する、非常に直感的な computed() 関数があります。

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

ここでは、pushBtn の値が変更された場合にのみ、magicNumber が計算されます。そしてそれは検証可能です。「再計算されました!」というメッセージが表示されます。別のボタンをクリックした場合にのみコンソールに表示されます。
したがって、React とは異なり、この関数で監視する変数を明示的に指定する必要はありません。

同じように、react の useEffect のように、コンポーネントのプロパティのすべてまたは一部の変更に反応できる watch と watchEffect も見つかります。

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

数値修飾ボタンをクリックするだけで、「監視」カウンターが増加します。
watch() を使用すると、特定の変数が変更されるたびにコールバックをトリガーできます。

この関数の強みは、変数変更の詳細な分析にあります。Vue は、サブオブジェクト内の深い部分でも変更を検出します!

双方向同期

プロパティを宣言して親コンポーネントから子コンポーネントに渡すことは、かなり繰り返し行われる操作です。フォームの入力などで、子と親の間でこの値を同期することも可能です。

また、ここのようにプロパティとイベントベースの更新コールバックの両方を管理するのではなく、

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

…代わりに、defineModel マクロを使用すると、記述が簡素化されます。

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

かなり短くなりました! ?それに、モデルが 1 つしかないので、名前を付ける必要すらありませんでした!

そして親と一緒に:

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

for ループ

v-model を見た後、v-for を続けると、Vue.js が暗黙的なコードを通じて多くの「魔法」を導入し始めていることに気づきました。

import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

const app = createApp(App); // composant racine

app.use(createPinia()); // store
app.use(router); // routage des pages front

app.mount('#app');

その結果:

ご想像のとおり、v-for 命令を使用すると、イテラブルの各要素に対して HTML パターンの一部 (ここでは

タグ) を自動的に繰り返すことができます。

React 側では、JSX を使用して各要素を自分で構築する必要があり、コンポーネントが大きくなるにつれてコードが読みにくくなります。

<script setup>
  import { ref } from 'vue';

  const color = ref('green');

  function toggleColor() {
    color.value = color.value === 'green' ? 'blue' : 'green';
  }
</script>

<template>
  <p class="main-text">
    Cliquez sur ce texte pour changer de couleur.
  </p>
  <p v-if="color === 'green'">Le texte ci-dessus est vert.</p>
</template>

<style scoped>
  .main-text {
    color: v-bind(color);
  }
</style>

個人的には、デバッグの必要がない限り、コードのクリーンさの点で Vue の構造を好みます。 ?
ところで、デバッグについて話しているので、Vue エコシステム ツールについてはどうですか?

開発ツール

ここでは、私のプロジェクトの開発で注目を集めた 3 つのツールを紹介します。

VSCode 拡張機能: Vue 公式

明白なことから始めますが、はい、VSCode Vue (および他の IDE) には、構文の強調表示、オートコンプリート、スニペットなどを追加する拡張機能があります。必需品です!

しかし、カラーリングとオートコンプリートにいくつかの不安定性があることに気づきました。これは時々少し気まぐれでしたが、React 側の安定性の向上を評価することができました。

Vue.js 開発ツール

React Developer Tools ブラウザ プラグインと同様に、Vue.js devtools プラグインがあります。これは、認めざるを得ませんが、すでに非常によく提供されています。

タブは 4 つあります:

• コンポーネント。コンポーネントの状態を観察できるだけでなく、変更することもできます。
• タイムライン: イベントとコンポーネントのレンダリング時間を記録できます。これは実際にはブラウザーの [パフォーマンス] タブのバージョンに対応しますが、Vue に焦点を当てています。
• Pinia。これにより、標準ストアの状態を直接観察および変更できます。これは、私が特に歓迎した既成の統合です。
• ルート: さまざまな道路とそのアクティビティをリストできます。これは、中規模のプロジェクトで少しギミックを見つけたタブです (特に、情報が「コンポーネント」の情報とあまり冗長ではないため) " タブですが、複雑なルーティングでは非常に便利です。

つまり、デバッグに必要なものはすべて揃っており、さらにそれ以上のものがあります!

ヴエティファイ

ほぼ驚くことではありませんが (メリットは同じです!)、Google のマテリアル デザインを実装し、標準アイコンのリストも提供する Vue 用の UI ライブラリ、Vuetify もあります。

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

これにより、プロジェクトの開始時、またはグラフィックのカスタマイズをあまり必要としないプロジェクトで時間を大幅に節約できます。

しかし、いつものように、この種の高レベルのライブラリを使用してレンダリングのパフォーマンスに注意を払うことをお勧めします。ライブラリの構成容量は他の場所で支払われることがよくあります!

結論

React から Vue に移行するこのエクスペリエンスについて、何が言えますか?

まず、コードの観点から、React と比較すると、Vue ライブラリは次のようになります。

• より構造化された;
• より宣言的です ;
• より簡潔に.

しかし、JSX で書かれたコードのおかげで、React は Vue よりもはるかに相互運用性が高く、よりプログラム的で明示的であり、リンターの安定性も優れていることがわかりました。

開発環境とコミュニティに関しては、Vue は実稼働に至るまで効率的な開発を保証するためのすべてのカードを備えています。

それでは、Vue のスキルの向上はその悪名に応えたのでしょうか?私ならそうだと思います。学習曲線が効果的であることがわかり、機会があれば Vue を使用して開発を続けるつもりです。

最後に、今日フロントエンドを React で開発するよりも Vue で開発した方が良いでしょうか?
完全に個人的な観点から言えば、そうではないと思います。 Vue と React はそれぞれアプリケーションのケースが若干異なりますが、私は React の信頼できる型付けシステムとより柔軟なコードに依存することを好みます。しかし、もしかしたら Vue とそのツールの次のバージョンでは考えが変わるかもしれません?

それで、フィードバックは何ですか?

以上がReact.jsからVue.jsに切り替えてみたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。