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 ファイル (タグ
• 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 に変数を挿入できます。