2022 年の Vue 開発レポート [編集および共有]

2014 年の最初のリリース以来、Vue.js は人気とユーザー数が増加し続け、世界中の何千もの開発者によって使用される成熟したフレームワークになりました。 Vue が 2022 年にどのように発展するかを見てみましょう!

1. Vue エコシステム

Vue 3 のリリース以来、ますます多くのライブラリが Vue 3 を受け入れるようになりました。他のライブラリが互換性のあるバージョンを開発している間、そのサポートを追加しました。 2022 年の Vue エコシステムにおけるエキサイティングな開発の一部を紹介します。 (学習ビデオ共有: vue ビデオ チュートリアル )

(1) Vite

Vite は、フロントエンド開発のための新しい構築ツールです。最新バージョンは v3.0.0-beta.9 です。 Vite は、超高速な開発エクスペリエンスと高度に最適化された運用パッケージをもたらします。フレームワークに依存しないので、誰でも使用できます。 Vite は、Vue CLI がメンテナンス モードに入るときに新たに推奨される選択肢です。

(2) Vitest

Vitest は、Vite でサポートされる新しい単体テスト フレームワークで、最新バージョンは v0.18.0 です。 Vitest はその後のテスト実行に驚異的な速度をもたらし、TDD メソッドに最適な選択肢となります。

(3) Pinia

Pinia は、Vue 3 の推奨状態管理ライブラリになりました。よりシンプルな API、適切な TypeScript サポートなどが導入されており、開発エクスペリエンスにとって大きな前進となります。 Vuex は引き続き Vue 3 と互換性がありますが、現在はメンテナンス モードになっています。

(4) Volar

Volar VS Code 拡張機能の開発者である Johnson Chu が Vue.js コア チームに加わりました。 Johnson はリリースとバグ修正をリリースしており、より効率的でより多くの機能をカバーできるように内部コードベースのリファクタリングに取り組んでいます。また、拡張機能のメンテナは Vue のスポンサーになっているため、IDE ツールの将来はさらに明るいです。

(5) Nuxt 3

Nuxt チームは、Nuxt v3 がこの夏にリリースされると発表しました。予想されるバージョン1。現在はリリース候補段階にあり、安定版に近づいています。

(6)Vuetify

多くの人にとって、Nuxt と Vuetify が Vue 2 から Vue 3 へのアップグレードの妨げになっています。 2 つの主要な部分から構成されます。 Vuetify 3 の最新バージョンはベータ 5 で、正式リリースに近づいています。

(7) VitePress 1

VitePress は最近 1.0 alpha 4 をリリースし、新しい Vue ドキュメントで使用されています。 v1.0 リリースの準備として、コア チーム メンバーの Kia はエンド ユーザーに高レベルの API を提供することに取り組んでいます。 VitePress は、Vue 3 をサポートする静的サイト生成の推奨ソリューションになりました。ただし、名前と VuePress との共存に関する問題はまだ議論中です。簡単に言えば、VitePress は VuePress 3 を置き換えるべきです。

(8) Vue の新しいドキュメント

新しい Vue ドキュメントがリリースされ、設計の包括的な検査と改善が行われました。とユーザー エクスペリエンスを強化し、新しいガイダンスとオプション API とコンポジション API を切り替える機能を導入しました。このリリースでは、Vue のすべての主要機能を説明する対話型チュートリアルも導入されています。

(9) Vue コア

4 月から 5 月にかけて、Vue チームは約 1 か月かけてコアのバグに取り組みましたv3 では大規模なパッチ リリース (3.2.24 ～ 26) が行われ、約 70 の PR がマージされ、約 140 の問題が解決されました。

(10) Vue のデフォルト バージョン

Vue 3 が正式にデフォルト バージョンになります。

2. Vue の現在と将来

このセクションでは、Vue.js の作成者である You Yuxi が Vue 3 の主な変更点を要約し、その手順を共有します。最新のデフォルト バージョンにアップグレードするプロセスの詳細と、Vue の将来について説明します。

(1)前回の更新以降、Vue 3 では何が変更されましたか?

新しい Vue ドキュメントは 2022 年 2 月にリリースされ、ソフトローンチプロセスの完了を示しました。 Vue 3 がリリースされたときは、実際には単なるコアでしたが、時間の経過とともに、Vue 全体がルーティング、状態管理、ビルド ツール、開発ツール、拡張機能、IDE サポートなどを含む完全なエコシステムに成長しました。これらはすべて更新するのに多大な労力を必要とします。

つまり、基本的にすべてのライブラリとツールの新しいバージョンが存在します。新しいドキュメントがリリースされ、最新の推奨状態管理ライブラリとして Vuex が Pinia に置き換えられ、ビルド ツールは Vite を利用するようになりました。新しい IDE 拡張機能は Volar で、より優れた TypeScript サポートとエクスペリエンスを提供します。 <script setup></script> などの重要な DX の改善点もリリースされており、さらに多くの改善点がリリースされる予定です。

(2) TypeScript は Vue の開発エクスペリエンスにどのような影響を与えますか?

TypeScript は人気が高まっているため、最新のフレームワークはすべて TypeScript を念頭に置いて設計されることになります。 TypeScript を使用しなくても、Volar は Vue の型を利用してヒントを提供するため、変数の型を覚える必要があるという精神的な負担を軽減します。すべての型の推論とチェックはテンプレートにも適用されます。 TypeScript を使用すると、開発者が大規模なコード ベースをリファクタリングするときにエラーを発見しやすくなります。ツールはエラーをすぐに表示して修正できるようにします。特に大規模なプロジェクトを開発する場合、Vue で TypeScript を使用すると、コードの堅牢性が大幅に向上します。

(3) Vue 3 がリリースされてからデフォルト バージョンになるまで 1 年半かかりましたが、その過程はどうでしたか?

Vue 3 の初期バージョンでは、TypeScript を使用してすべてが書き直されましたが、これは Volar が正式な拡張機能になるまで完了しませんでした。ドキュメントは完全に改訂され、すべてが変更または書き直されました。オプション API と構成 API で動作し、それらを切り替えることができます。その結果、学習体験と日常体験がアップグレードされます。それぞれが別個のプロジェクトであるため、最終的にすべてを準備するまでのプロセス全体に非常に時間がかかりました。これで、Vue 3 の準備ができたと言えます。

(4) このような深い移行プロセスは必要ですか?

すべてが必要というわけではありませんが、アップグレードを考えるときは、既存のコードベースを段階的に改善するか、大幅な書き換えを行うかの間で常にトレードオフが生じます。 Vue 2 コードベースに基づいて 100% の互換性を確保するには、Vue 2 固有の内部動作に依存する多くのライブラリが必要になります。この荷物を持ち歩くと、イノベーションが制限されてしまいます。

したがって、大規模な書き換えは私たちにとって正しい方向です。 Vue 3 の状況では、短期的にはいくつかのものが犠牲になり、いくつかのライブラリが壊れていますが、過去の荷物を取り除くためには喜んで支払う代償です。今、白紙の状態にしておくことは、将来に大きな恩恵をもたらします。

React や Ember は新しいバージョンをほぼシームレスに導入できますが、これによりメンテナンスに多大なオーバーヘッドがかかります。彼らは新しい機能をゆっくりと追加し、古い機能を段階的に廃止するための優れたシステムを備えており、私たちはそこから学ぶことができます。結局のところ、エンジニアリングには絶対的な正解はありません。アップグレードに関してはトレードオフがあります。

(5) Vue は、あらゆる種類のアプリケーションやさまざまな規模の企業で使用できますが、なぜこれほど汎用性の高いフレームワークになっているのでしょうか?

Vue の初期バージョンは、参入障壁を低くし、使いやすく、既存のシステムに簡単に統合できるように設計されており、今でもこのアプローチを堅持し、非常に真剣に受け止めています。シングル ページ アプリケーションのルーティング、状態管理、TypeScript サポートなど、より高度なプロジェクトをサポートするコンポーネントを徐々に追加していきます。

当初は、小規模なアプリケーションで Vue を使用するユーザーが数多くいました。より多くの機能やツールが利用可能になるにつれて、Vue のユーザー ベースは拡大し続けていますが、元のユーザーは残り、好きなように使用できます。それが私たちの秘密です - すべての領域をカバーする。 2014 年からの長い道のりであり、多くの課題がありましたが、新しい機能を追加するたびに、Vue を使用するコア エクスペリエンスを維持するよう努めています。

(6) フロントエンドが直面している主な課題は何ですか?

Web 開発の世界には、シンプルなログイン ページ、完全にインタラクティブなアプリケーション、バックエンド ダッシュボード、より高いパフォーマンスが要求される電子アプリケーションなど、あらゆる種類のアプリケーションがあります。ビジネス アプリケーションなど。一般的に言えば、課題は開発者の生産性と最終アプリケーションのパフォーマンスのバランスを取ることです。コンテンツ集約型の電子商取引を除き、これらの分野のほとんどで当社は順調に業績を上げています。

最近では、Remix や Qwik などの新しいものがあります。これらの多くは、コンパイラーからサーバー、クライアントに至るまでの制御を必要とし、エンドツーエンドで最適化された完全に統合されたソリューションを提供するには、すべてが連携して動作する必要があります。それでも比較的単純なコードを記述して、最終的に最高のパフォーマンスを得ることができます。これが最大の課題になります。これら 3 つの部分を最もよく統合するソリューションはどれでしょうか?これは、Nuxt チームや Vue エコシステムの他のチームと緊密に協力して検討できる方向性です。

バックエンドとフロントエンドの両方を処理できる、より多くの垂直ソリューションが必要であり、純粋なクライアントや純粋なバックエンドの観点から考えるのはやめてください。

(7) 今後 5 年を見据えて、Vue についてどう思いますか?

Vue は常に進化するプラットフォームです。 Vue 3 は長期にわたって拡張できる十分に強固な基盤であるため、おそらく今後 5 年間は「Vue 2 から 3」タイプのアップグレードは行われないでしょう。 Vue の強みは非常に柔軟で反応的なシステムであるため、コンパイル戦略を引き続き実験していきます。

コンパイルされた単一ファイル コンポーネントがあり、これをさまざまな出力にコンパイルできます。ソースコードは変更せずに、出力を変更できます。この間、ユーザー エクスペリエンスが安定していることを願っています。開発エクスペリエンスの観点からは、安定したままであることが望ましいですが、コンパイルされたアプローチにより、舞台裏で大幅な改善を行うことができます。これが私たちの目標です。

3. Vue の開発動向

フロントエンド分野における Vue の現状は何ですか? Vue はどれくらいの速さで成長していますか?さまざまな機関の調査統計を見てみましょう！

(1) Statista

Vue は、2020 年と比較して 2021 年に 2 つ順位を上げ、5 位にランクされ、回答者の 19% がそれを選択しました。

(2) BuiltWith

2022 年 5 月における、世界の上位 100 万 Web サイトのフレームワーク使用状況は次のとおりです。 。

(3) NPMtrends

NPMtrends によると、Vue の使用は過去 5 年間で着実に増加しています。

(4) 類似技術

Vue を使用して構築された Web サイトの数は、当初から着実に増加し続けています。

(5) GitHub の依存関係

2020 年以降 Vue で構築 アプリケーションの数46.52% 増加し、引き続き成長しています。

(6) スタック オーバーフローに関する質問の数

スタック オーバーフローについて、ユーザーからの質問Vue に関する問題はますます増えています。

(7) JS の現状

開発者による Vue.js の使用率は上昇傾向にあり、2021 年に到達すると予想されています51%。

(8) Stack Overflow アンケート

Stack Overflow は毎年ユーザーを対象に、最も好きなフレームと最も嫌いなフレームを尋ねるアンケートを行っています。利用可能な調査の質問は長年にわたって一貫していませんでしたが、結果は Vue の上昇傾向を裏付けています。

#2021:

#2020:

2019:

#2018:

(9) JetBrains 調査

2021 年に JetBrains が発表した「2021 Developer Ecosystem Status」レポートによると、Vue.js ユーザーのシェアは 2020 年の 32% から 2020 年に 32% に増加しました。 2021 年には 43% に成長します。

#(10) Google トレンド

2020 年 10 月、すべてのフレームに対するユーザーのビューどちらの検索も減少しましたが、それ以来、Vue の人気が再び高まり、徐々に軌道に乗り始めています。

[関連ビデオチュートリアルの推奨事項:

Web フロントエンド]