Vue 開発ガイドの重要な知識の要約

概要

Vue 開発を初めて行う場合は、シングルページアプリケーション、非同期コンポーネント、サーバー側レンダリングなど、Vue 開発に関する専門用語をたくさん聞いたことがあるかもしれません。

Vue と一緒に言及されるツールやライブラリとして、Vuex、Webpack、Vue CLI、Nuxt などもよく耳にするかもしれません。

おそらく、未知の用語やツールに直面して、無力感や絶望感を覚えるでしょう。でも、それはあなただけではありません。なぜなら、これはすべての初心者が初めて Vue に触れたときに感じる感情だからです。

しかし、一度にすべてを習得しようとすると、これらの大規模なシステムに簡単に圧倒されてしまう可能性があります。この目的のために、ここでは、プロフェッショナルな Vue 開発プロセスの重要な部分をすべて含む「ナレッジグラフ」を紹介します。この図を参考にして、2019 年に Vue を学習するプロセスをガイドできます。

0. JavaScriptとWeb開発の基礎

純粋な英語の本を英語で読みなさいと言ったら、まず英語を学ぶべきですよね？

同様に、Vue は Web ユーザーインターフェイスを構築するための JavaScript フレームワークです。 Vue を使い始める前に、少なくとも JavaScript と Web 開発に関する基本的な知識が必要です。

1. Vueの基本概念

新しい Vue 開発者の場合は、Vue コアライブラリ、Vue Router、Vuex を含む Vue.js エコシステムのコアに重点を置く必要があります。これらのツールはほとんどの Vue アプリケーションで使用されるためです。さて、まずは Vue に関する基本的な概念を紹介しましょう。

Vue コア機能

最も基本的な部分では、Vue は Web ページと JavaScript を同期させます。これを可能にするのは、レスポンシブデータと、ディレクティブや補間などのテンプレート機能です。これらは初日に学習します。

最初の Vue アプリケーションを構築する前に、Web ページに Vue をインストールして使用する方法と、Vue 参照インスタンスのライフサイクルについても理解しておく必要があります。

コンポーネント

Vue コンポーネントは再利用可能で独立した UI 要素です。コンポーネントを宣言する方法と、プロパティとイベントを通じてコンポーネントが相互に通信する方法を理解する必要があります。

また、コンポーネントを組み合わせる方法を学ぶことも同様に重要です。これは、Vue を使用して堅牢でスケーラブルなアプリケーションを構築できるかどうかを決定するためです。

シングルページアプリケーション

シングルページアプリケーション (SPA) アーキテクチャでは、ユーザーがリンクをクリックした後にページ全体を再読み込みするなどの非効率的な動作をすることなく、作成する Web ページで複数ページの Web サイトと同じリッチコンテンツを表示できます。

「ページ」を Vue コンポーネントとして作成したら、各コンポーネントに Vue Router を使用して、各リクエストを一意のアクセスパスにマップできます。Vue Router は、シングルページアプリケーション (SPA) を構築するために Vue チームによって管理されているツールです。

状態管理

プロジェクトの規模が大きくなるにつれて、SPA の多くのページにコンポーネントが増え、グローバル状態の管理がますます困難になります。コンポーネントは、多数のプロパティとイベントリスナーによって肥大化します。

「Flux」と呼ばれる特別なモードにより、データは安定した中央ストレージに保存されます。 Vuex ライブラリも Vue チームによって管理されており、Vue.js アプリケーションに Flux を実装するのに役立ちます。

2. 本番環境でのVue

パート 1 で得た知識はすべて、ローカルサーバー上でもパフォーマンスが高く効率的な Vue アプリケーションを構築するために使用できます。では、実際の運用環境で実行できることをどのように確認すればよいのでしょうか。

Vue.js ベースの製品をユーザーに提供したい場合は、さらに詳しい情報を知る必要があります。以下で紹介します。

プロジェクトの足場

Vue アプリケーションを頻繁に構築する必要がある場合は、ほぼすべてのプロジェクトで構成、セットアップ、および開発者ツールが提供されていることがわかります。

Vue チームは、わずか数分で強力な Vue 開発環境を構築できる Vue CLI というツールを管理しています。

フルスタック / 認証アプリケーション

Vue アプリケーションは通常、データ駆動型のユーザーインターフェイスであり、データは通常、Node、Laravel、Rails、Django などによって生成されます。

または、ソースとして安全な API で記述された他のサーバーフレームワーク。

データは従来の REST API または GraphQL によって提供される場合もあれば、Web ソケットによって提供されるリアルタイムデータである場合もあります。

また、Vue をフルスタック構成に統合するために一般的に使用される設計パターンや、Vue アプリケーションでユーザーデータを安全に保つためのさまざまな考慮事項についても理解しておく必要があります。

Vue アプリケーション開発に最適なバックエンド製品を評価している場合は、この記事で答えが得られるはずです。

テスト

Vue アプリケーションが本番環境で保守可能かつ安定していることを確認したい場合は、アプリケーションの完全なテストを提供する必要があります。

Vue アプリケーションでは、ユニットテストにより、コンポーネントが特定の入力 (プロパティまたはユーザー入力) に対して常に同じプロパティ (レンダリングされた HTML またはイベント) を提供することが保証されます。

Vue チームは、個々のコンポーネントに対してテストを作成して実行できる Vue Test Utils というツールを管理しています。

最適化

アプリケーションをリモートサーバーにデプロイした後、アプリケーションのアクセス速度と実行効率は開発フェーズ時ほど速くなく、ユーザーがアクセスしたときに速度が非常に遅くなる可能性があります。

効率を向上させるには、Vue アプリケーションを最適化する必要があります。最適化プロセスでは、サーバー側レンダリングなど、さまざまなテクノロジを使用できます。サーバーサイドレンダリングでは、Vue プログラムをサーバー上で実行し、ユーザーがアクセスするとレンダリングされた HTML をユーザーに提示することで、アクセス速度の向上という目的を達成します。

もちろん、非同期コンポーネントやレンダリング関数など、他の最適化手法も含まれています。

3. 主要ツール

これまで見てきたものはすべて、Vue.js コア、またはエコシステム内のツールから来ています。しかし、Vue は単独で存在するわけではなく、フロントエンドテクノロジースタックの一部にすぎません。

高度な開発者は、Vue に精通しているだけでなく、将来の Vue アプリケーションの一部になる可能性があるため、他のいくつかの主要なツールにも精通している必要があります。

ウェブパック

Webpack はモジュールバンドラーです。つまり、コードが異なるモジュール (異なる JavaScript ファイルなど) にまたがって記述されている場合、Webpack はそれらのコンテンツすべてをブラウザーで読み取り可能な単一のファイルに「ビルド」することもできます。

Webpack はパイプラインを構築することもできます。これにより、ビルドする前にコードを変換できます。たとえば、フロントエンドで Babel、Sass、または TypeScript を使用すると、アプリケーションを最適化するために利用できるさまざまなプラグインも用意されています。

多くの開発者にとって、Webpack の理解と設定は難しいと感じていますが、Webpack がなければ、Vue の優れた機能の一部 (シングルページコンポーネントなど) は実現できません。 Webpack の使用方法と構成をすぐに習得できるように、WebPack に関する一連のチュートリアルを用意しています。

タイプスクリプト

TypeScript は、(文字列、ブール値、数値など) を含む JavaScript 言語のスーパーセットです。このような型定義を使用すると、開発中に堅牢で安定したコードを記述し、できるだけ早くエラーを検出できるようになります。

2019 年にリリース予定の Vue.js 3 は完全に TypeScript で開発されますが、Vue プロジェクトで必ず TypeScript を使用する必要はありません。しかし、Vue の内部コードを読み、Vue のオープンソース組織に参加して Vue に貢献する必要がある場合は、少なくとも TypeScript 言語を理解している必要があります。

4. Vueフレームワーク

Vue 上に構築されたフレームワークを使用すると、サーバー側のレンダリングを最初から実装したり、独自のコンポーネントライブラリを作成したり、その他の同様の作業を行う必要がなくなります。

優れた Vue フレームワークは数多くありますが、ここではさまざまな分野で最も広く使用されている 3 つのフレームワークのみを紹介します。

翻訳

ルーティング、サーバー側レンダリング、コード分離などの最先端の機能に基づいて高性能な Vue アプリケーションを構築したい場合、また SEO タグなどのより高度な機能も必要な場合。 Nuxt.js フレームワークを使用できます。

Nuxt.js フレームワークは、豊富なコミュニティプラグインを通じて、これらすべての機能をすぐに使用でき、さらに PWA などの機能も提供します。

ヴューティファイ

Google のマテリアルデザイン標準は、Android や Web システムなどの Google 製品で広く使用されている、美しく合理的なユーザーインターフェースを構築するためのデザイン言語ガイドシステムです。

Vuetify フレームワークは、一連の Vue コンポーネントでマテリアルデザインを実装します。これにより、Material Design レイアウトとスタイルを使用して Vue アプリケーションをすばやく作成し、モーダルボックス、プロンプトボックス、ナビゲーションバー、ページングなどのページウィジェットをアプリケーションに実装できるようになります。

NativeScript-Vue

Vue.js は、Web ユーザーインターフェイスを構築するためのライブラリです。モバイルアプリの構築に使用する場合は、NativeScript-Vue フレームワークを使用できます。

NativeScript は、iOS および Android 上のネイティブユーザーインターフェイスコンポーネントを使用してアプリを構築するためのフレームワークです。一方、NativeScript-Vues は、Vue 構文と Vue コンポーネントの使用をサポートする NativeScript に基づくフレームワークです。

5. その他

この最後のセクションでは、上記のカテゴリに含まれていない重要な事項について説明します。

プラグイン開発

プロジェクトで Vue の機能を再利用したり、Vue エコシステムに貢献したりする場合は、これらの機能をプラグインにパッケージ化して他のユーザーに公開できます。

プラグイン機能は Vue の重要な機能であり、軽量で効率的な Vue コードの作成に役立つツールやテンプレートが多数あります。

アニメーション

アニメーションも Vue のコア機能の一部であり、DOM に要素を追加または削除するときにアニメーションを適用できます。アニメーションを有効にするには、フェードインやフェードアウト、色の変更、その他の効果など、必要なアニメーション効果を定義する CSS クラスを作成します。 Vue は要素が追加または削除されたことを検出し、それに応じて設定したクラスを追加または削除します。