Vue開発を初めて使用する場合、シングルページアプリ、動的 & 非同期コンポーネント、サーバーサイドレンダリングなど、多くの専門用語が使用されていることを聞いたことがあるでしょう。
また、Vuex、Webpack、Vue CLI、Nuxtなど、Vueと一緒によく言及されるツールやライブラリについて聞いたことがあるかもしれません。
おそらく、この無数の用語とツールはフラストレーションになると思うでしょう。その中であなたは一人ではありません。すべての経験レベルの開発者は、自分が知らないことや、そうすべきだと感じているという永続的なプレッシャーを感じています。
0. JavaScriptと基本的なWeb開発
中国語で書かれた本のすべてを学ぶように頼んだら、まず中国語を読むことを学ぶ必要がありますよね？
同様に、VueはWebユーザーインターフェイスを構築するためのJavaScriptフレームワークです。 Vueを使用する前に、JavaScriptとWeb開発の基本を理解する必要があります。
FreeCodeCampでJavaScriptと基本的なWeb開発から上級な開発まで無料で学べます
https://www.freecodecamp.com/
1. Vueの基本的な概念
新しいVue開発者であれば、Vueコアライブラリ、Vueルーター、Vuexを含むVue.jsエコシステムの中核に注目する必要があります。
これらのツールは、ほとんどのVueアプリで機能し、このマップの他のほとんどの領域が構築するフレームワークを提供します。
Vueのコア機能
最も基本的なVueは、WebページをJavaScriptと同期します。これを実現するための重要な機能は、リアクティブデータ、およびディレクティブやテンプレート構文などのテンプレート機能です。これらは、初日に学ぶべきことです。
最初のVueアプリを作成するには、WebページにVueをインストールする方法を知って、Vueインスタンスのライフサイクルを理解する必要もあります。
コンポーネント
Vueコンポーネントは、再利用可能な分離されたUI要素です。コンポーネントの宣言方法、およびプロパティとイベントを介してコンポーネント間の通信方法を理解する必要があります。
また、コンポーネントで構成する方法を学ぶことも重要です。これは、Vueで堅牢でスケーラブルなアプリケーションを構築するための基本です。
シングルページアプリケーション
シングルページアプリケーション（SPA）アーキテクチャにより、ユーザーが移動するたびにページを再読み込みおよび再構築するという非効率性なしに、単一のWebページを従来のマルチページWebサイトのように動作させることができます。
Vueコンポーネントとして「ページ」を作成したら、Vueチームが管理するSPAを構築するためのツールであるVue Routerを使用して、それぞれを一意のパスにマッピングできます。
2.現実世界のVue
パート1で得たすべての知識を使用して、ローカルサーバー上であっても、高性能で効率的なVueアプリを構築できます。しかし、本番環境ではどのように立ち上がるのでしょうか？
Vue.jsベースの製品を実際のユーザーに出荷する場合は、さらに知っておく必要があります！
プロジェクトの足場
Vueアプリを頻繁にビルドすると、ほとんどすべてのプロジェクトに戻ってくる設定、セットアップ、開発者ツールがあります。
Vueチームは、Vue CLIと呼ばれるツールを維持しており、これにより数分で堅牢なVue開発環境を構築できます。
フルスタック/認証済みアプリ
Real Vueアプリは通常、データ駆動型のユーザーインターフェイスです。データは多くの場合、Node、Laravel、Rails、Django、またはその他のサーバーフレームワークで作成された安全なAPIから供給されます。
おそらく、データは従来のREST APIまたはGraphQLによって提供されるか、Webソケットを介したリアルタイムデータになる可能性があります。
また、Vueをフルスタック構成に統合するために一般的に使用される設計パターン、およびVueアプリのユーザーデータを安全に保つためのさまざまな考慮事項についても理解する必要があります。
次のVueアプリに最適なバックエンドを決定しようとしている場合は、この記事をご覧ください。
テスト
本番環境で保守可能で安定したVueアプリを作成したい場合、本当にテストを提供する必要があります。
Vueアプリでは、ユニットテストにより、コンポーネントが特定の入力（小道具やユーザー入力）に対して常に同じ出力（つまり、再レンダリングされたHTMLまたは放出されたイベント）を提供することが保証されます。
Vueチームは、Vue Test Utilsと呼ばれるツールを維持します。このツールを使用すると、分離されたVueコンポーネントでテストを作成および実行できます。
Vueとは特に関係ありませんが、E2Eテストはプロジェクトの堅牢性も提供します。 Vue CLI 3を介してプロジェクトに追加できる優れたE2Eツールはサイプレスです。
最適化
アプリをリモートサーバーに展開し、ユーザーが低速の接続を介してアプリにアクセスすると、開発中のテストで経験した速度と効率が得られません。
Vueアプリを最適化するために、サーバー側レンダリングを含むさまざまな手法を使用できます。これは、Vueアプリがサーバーで実行され、出力がユーザーに配信されるHTMLページにキャプチャされる場所です。
最適化のための他の手法には、非同期コンポーネントとレンダリング関数の使用が含まれます。
基本的な機能を学び、無料の2時間のビデオコースBuild Your First Vue.js Appで実際のWebアプリを構築して、Vueを使い始めましょう。
3.主要な関連ツール
これまで見てきたことはすべて、Vue.jsコアまたはエコシステムのツールからのものです。しかし、Vueは単独では存在しません。フロントエンドスタックの1つのレイヤーにすぎません。
上級Vue開発者は、Vueだけでなく、すべてのVueベースのプロジェクトの一部となる主要なツールに精通している必要があります。
モダーンJavaScriptとBabel
Vueアプリは、既存のほとんどすべてのブラウザーがサポートするJavaScriptの標準であるES5で効果的に構築できます。
Vue開発エクスペリエンスを強化し、新しいブラウザー機能を活用するために、最新のJavaScript標準ES2015の機能とES2016以降の提案機能を使用してVueアプリを構築できます。
ただし、最新のJavaScriptを使用することを選択した場合は、古いブラウザーをサポートする方法が必要になります。そうしないと、ほとんどのユーザーが製品を使用できません。
これを達成するためのツールはバベルです。その仕事は、アプリを出荷する前に、最新の機能を標準機能に「トランスパイル」（翻訳およびコンパイル）することです。
Webpack
Webpackはモジュールバンドラーです。つまり、コードが異なるモジュール（たとえば、異なるJavaScriptファイル）にまたがって書かれている場合、Webpackはこれらをブラウザーで読み取り可能な1つのファイルに「ビルド」できます。
また、Webpackはビルドパイプラインとしても機能するため、Babel、Sass、TypeScriptなどを使用して、ビルドする前にコードを変換したり、一連のプラグインでアプリを最適化することもできます。
多くの開発者はWebpackを把握するのが難しく、設定するのがさらに難しいと感じていますが、Webpackがなければ、単一ファイルコンポーネントのようなVueの最高の機能の一部にアクセスできません。
最近リリースされたVue CLI 3では、VueプロジェクトでWebpackを抽象化し、自動的に構成するためのソリューションが提供されています。
これは、学ぶ必要がないということですか？ Webpackの構成をカスタマイズまたはデバッグする必要がある場合が必ずあるので、私はノーと言います。
TypeScript
TypeScriptは、タイプ（文字列、ブール、数値など）を含むJavaScript言語のスーパーセットです。これの目的は、堅牢なコードを記述し、バグを早期に発見できるようにすることです。
2019年に登場するVue.js 3は、すべてTypeScriptで記述されます。これは、Vueプロジェクトで使用する必要があるという意味ではありませんが、Vueに貢献してその内部動作を理解する場合は、TypeScriptを理解する必要があります。
4. Vueフレームワーク
フレームワークはVueの上に構築されているため、サーバー側のレンダリングをゼロから実装したり、独自のコンポーネントライブラリを作成したり、その他の多くの一般的なタスクを行う必要がありません。
多くの優れたVueフレームワークがありますが、ここでは最も広く使用され重要な3つのフレームワークについて説明します。
Nuxt.js
高性能のVueアプリを構築する場合は、もちろん、コンポーネントベースのルーティング、サーバー側のレンダリング、コード分割、その他の最先端機能が必要になります。また、SEOタグなどの便利な制作機能も必要になります
Nuxt.jsフレームワークは、このすぐに使用できるすべての機能と、さまざまなコミュニティプラグインを通じて、PWAなどのさらに多くの機能のオプションを提供します。
Nuxt.jsサイトの良い例をご覧になりたい場合は、今すぐご覧ください😉
検証
Googleのマテリアルデザイン標準は、美しく論理的なユーザーインターフェースを構築するために広く使用されているガイドラインのシステムであり、AndroidのようなGoogleの製品やWeb全体で使用されています。
Vuetifyフレームワークは、一連のVueコンポーネントでマテリアルデザインを実装します。これにより、マテリアルデザインレイアウトとスタイリングに加えて、モーダル、アラート、ナビゲーションバー、ページネーションなどのウィジェットを備えたVueアプリをすばやく構築できます。
NativeScript-Vue
Vue.jsは、Webユーザーインターフェイスを構築するためのライブラリです。ネイティブのモバイルインターフェースに使用したい場合は、NativeScript-Vueフレームワークで使用できます。
NativeScriptはiOSおよびAndroidのネイティブユーザーインターフェイスコンポーネントを使用してアプリを構築するためのシステムであり、NativeScript-VueはNativeScriptの上にあるフレームワークであり、Vue構文とコンポーネントの使用を提供します。
5.その他
この最後のセクションでは、重要であるが重要ではないトピックまたは上記のカテゴリに当てはまらないトピックについて説明します。
プラグイン開発
プロジェクト全体でVue機能を再利用したり、Vueエコシステムに貢献したい場合は、Vueプラグインとしてインストール可能な機能を作成できます。
プラグインはVueコアの機能ですが、移植可能なVueコードの作成に役立つさまざまなツールと定型文もあります。
アニメーション
アニメーションが必要な場合は、Vueの移行システムも確認してください。これもVueコアの一部です。トランジションを使用すると、DOMに要素を追加または削除するたびにアニメーションを適用できます。
トランジションを行うには、CSSクラスを作成して、フェードイン、色の変更など、目的のアニメーション効果を定義します。 Vueは、要素がDOMに追加または削除されたことを検出し、移行中に適切なクラスを追加または削除します。
プログレッシブWebアプリ
プログレッシブWebアプリ（PWA）は通常のWebアプリに似ていますが、ユーザーエクスペリエンスを向上させる最新の機能で強化されています。たとえば、PWAにはオフラインキャッシュ、サーバーレンダリング、プッシュ通知などが含まれる場合があります。
ほとんどのPWA機能は、Vue CLI 3プラグインまたはNuxt.jsのようなフレームワークを使用してVueアプリに簡単に追加できますが、Webアプリマニフェストやサービスワーカーなどの主要なテクノロジーを理解する必要があります。
2020年に上級Vue開発者になります！