著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。

序章

ソフトウェア開発に関しては、スタックの両端があります。 スタックは、ソフトウェアが機能するために使用されるテクノロジーのコレクションです。 プログレッシブユーザーインターフェイスフレームワークであるVue.jsは、ユーザーが直接対話するスタックの一部であるフロントエンドの一部です。 このフロントエンドはクライアントとも呼ばれ、ユーザーのブラウザでレンダリングされるすべてのものを網羅しています。 HTML JavaScript CSSなどのテクノロジーはすべてクライアントでレンダリングされます。 対照的に、バックエンドは通常、 Java Kotlin .NETなどのテクノロジーを介してデータまたはサーバーと対話します。

アプリケーションはデータ自体であり、インターフェイス(フロントエンド)は、ユーザーが対話できるようにユーザーにとって意味のあるデータを表示する方法です。 ソフトウェア開発の初期段階では、開始するためにバックエンドは必要ありません。 場合によっては、バックエンドがまだ作成されていないこともあります。 このような場合、独自のローカルデータを作成してインターフェイスを構築できます。 Node 環境と変数を使用して、環境ごとに異なるデータセットを切り替えたり、ネットワーク呼び出しを介してローカルデータと「ライブ」データを切り替えたりできます。 モックデータレイヤーがあると、バックエンドの準備が整う前にフロントエンドをテストするためのデータが提供されるため、まだデータがない場合に便利です。

このチュートリアルの終わりまでに、いくつかのノード環境を作成し、これらのデータセットをノード環境変数で切り替えました。 これらの概念を説明するために、環境全体でこのデータを視覚化するためのVueコンポーネントをいくつか作成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

ステップ1—モードを使用した環境の作成

Vue CLIプロジェクトに関しては、モードは重要な概念です。 mode は、環境タイプ、またはビルド中にロードされる変数のセットです。 これらの変数は、プロジェクトのルートディレクトリにある.envファイルに保存されます。 デフォルトのvue-cli-serviceプラグインの一部として、すぐに3つのモードにアクセスできます。 これらは:

  • developmentvue-cli-service serveが実行されるときに使用されます。
  • testvue-cli-service test:unitが実行されるときに使用されます。
  • productionvue-cli-service buildおよびvue-cli-service test:e2eが実行されるときに使用されます。

おそらく最もよく使われるモードはdevelopmentモードです。 これは、Vue.js開発者がローカルマシンでアプリケーションを操作するときに使用するモードです。 このモードでは、ホットモジュールのリロード(ブラウザーの即時更新)が有効になっているローカルノードサーバーが起動します。 一方、testモードは、単体テストを実行するためのモードです。 単体テストは、アプリケーションのメソッド、イベント、場合によってはユーザーの操作をテストするJavaScript関数です。 最後のデフォルトモードはproductionです。 これにより、すべてのコードが圧縮され、パフォーマンスが最適化されるため、本番サーバーでホストできます。

Vue CLI から生成されたプロジェクトには、これらのコマンドがnpm run servenpm run test:unit、およびnpm run buildに事前にマッピングされています。

各環境は、独自の.envファイルに関連付けられています。このファイルには、アプリケーションが参照できるカスタムノード環境のキーと値のペアを配置できます。 CLIからプロジェクトを生成した後はこれらのファイルはありませんが、ターミナルで1つのコマンドを使用してこれらのファイルを追加できます。

ここで、開発環境ファイルを生成します。このファイルは、チュートリアルの後半で使用します。 ターミナルを開き、プロジェクトのルートディレクトリに次のように入力します。

  1. touch .env.development

選択したテキストエディタで、新しく作成したファイルを開きます。 このファイルでは、環境タイプを明示的に定義する必要があります。 これは、任意のキーと値のペアです。 ただし、.envファイルの名前に対応する環境タイプを定義することをお勧めします。

このNODE_ENVは、ビルド時に選択した環境またはモードに応じて異なるデータセットをロードすることにより、チュートリアルの後半で使用します。 次の行を追加します。

.env.development
NODE_ENV="development"

ファイルを保存して終了します。

このファイルのキーと値のペアは、アプリケーションが開発モードの場合にのみプログラムに影響します。 [X11X]