Node.jsモックデータレイヤーでVue.js環境モードを使用する方法
著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。
序章
ソフトウェア開発に関しては、スタックの両端があります。 スタックは、ソフトウェアが機能するために使用されるテクノロジーのコレクションです。 プログレッシブユーザーインターフェイスフレームワークであるVue.jsは、ユーザーが直接対話するスタックの一部であるフロントエンドの一部です。 このフロントエンドはクライアントとも呼ばれ、ユーザーのブラウザでレンダリングされるすべてのものを網羅しています。 HTML 、 JavaScript 、CSSなどのテクノロジーはすべてクライアントでレンダリングされます。 対照的に、バックエンドは通常、 Java 、 Kotlin 、.NETなどのテクノロジーを介してデータまたはサーバーと対話します。
アプリケーションはデータ自体であり、インターフェイス（フロントエンド）は、ユーザーが対話できるようにユーザーにとって意味のあるデータを表示する方法です。 ソフトウェア開発の初期段階では、開始するためにバックエンドは必要ありません。 場合によっては、バックエンドがまだ作成されていないこともあります。 このような場合、独自のローカルデータを作成してインターフェイスを構築できます。 Node 環境と変数を使用すると、環境ごとに異なるデータセットを切り替えたり、ネットワーク呼び出しを介してローカルデータと「ライブ」データを切り替えたりできます。 モックデータレイヤーがあると、バックエンドの準備が整う前にフロントエンドをテストするためのデータが提供されるため、まだデータがない場合に便利です。
このチュートリアルの終わりまでに、いくつかのノード環境を作成し、これらのデータセットをノード環境変数で切り替えました。 これらの概念を説明するために、環境全体でこのデータを視覚化するためのVueコンポーネントをいくつか作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- コンピューターにインストールされているNode.jsバージョン
10.6.0以降。 これをmacOSまたはUbuntu18.04にインストールするには、macOSで Node.jsをインストールしてローカル開発環境を作成する方法、またはNode.jsをインストールする方法のPPAを使用してインストールするセクションの手順に従います。 Ubuntu18.04で。 - Vue CLIがマシンにインストールされ、新しいプロジェクトが生成されます。 これを取得するには、 VueCLIを使用してVue.jsシングルページアプリを生成する方法のステップ1および2に従ってください。
- また、JavaScript、HTML、およびCSSの基本的な知識も必要です。これは、 HTMLを使用してWebサイトを構築する方法シリーズ、CSSを使用してWebサイトを構築する方法シリーズにあります。 、およびJavaScriptでコーディングする方法。
ステップ1—モードを使用した環境の作成
Vue CLIプロジェクトに関しては、モードは重要な概念です。 mode は、環境タイプ、またはビルド中にロードされる変数のセットです。 これらの変数は、プロジェクトのルートディレクトリにある.envファイルに保存されます。 デフォルトのvue-cli-serviceプラグインの一部として、すぐに3つのモードにアクセスできます。 これらは：
development：vue-cli-service serveが実行されるときに使用されます。test：vue-cli-service test:unitが実行されるときに使用されます。production：vue-cli-service buildおよびvue-cli-service test:e2eが実行されるときに使用されます。
おそらく最もよく使われるモードはdevelopmentモードです。 これは、Vue.js開発者がローカルマシンでアプリケーションを操作するときに使用するモードです。 このモードでは、ホットモジュールのリロード（ブラウザーの即時更新）が有効になっているローカルノードサーバーが起動します。 一方、testモードは、単体テストを実行するためのモードです。 単体テストは、アプリケーションのメソッド、イベント、場合によってはユーザーの操作をテストするJavaScript関数です。 最後のデフォルトモードはproductionです。 これにより、すべてのコードが圧縮され、パフォーマンスが最適化されるため、本番サーバーでホストできます。
Vue CLI から生成されたプロジェクトには、これらのコマンドがnpm run serve、npm run test:unit、およびnpm run buildに事前にマッピングされています。
各環境は独自の.envファイルに関連付けられており、アプリケーションが参照できるカスタムノード環境のキーと値のペアを配置できます。 CLIからプロジェクトを生成した後はこれらのファイルはありませんが、ターミナルで1つのコマンドを使用してこれらを追加できます。
ここで、開発環境ファイルを生成します。このファイルは、チュートリアルの後半で使用します。 ターミナルを開き、プロジェクトのルートディレクトリに次のように入力します。
touch .env.development
選択したテキストエディタで、新しく作成したファイルを開きます。 このファイルでは、環境タイプを明示的に定義する必要があります。 これは、任意のキーと値のペアです。 ただし、.envファイルの名前に対応する環境タイプを定義することをお勧めします。
このNODE_ENVは、ビルド時に選択した環境またはモードに応じて異なるデータセットをロードすることにより、チュートリアルの後半で使用します。 次の行を追加します。
.env.development
NODE_ENV="development"
ファイルを保存して終了します。
このファイルのキーと値のペアは、アプリケーションが開発モードの場合にのみプログラムに影響します。 [X11X] ファイルにファイルを追加するか、ファイル名に.local拡張子を追加しない限り、Gitはこれらのファイルを自動的にコミットすることに注意してください。[ X182X]。
Vue.jsが提供する標準環境に限定されません。 ワークフローに固有の環境が他にもいくつかある場合があります。 次に、stagingサーバーのカスタム環境を作成します。
ステージング環境用の.envファイルを作成することから始めます。 選択したターミナルを開き、ルートディレクトリで次を実行します。
touch .env.staging
このファイルで、このプロジェクトのNODE_ENVを定義するキーと値のペアを作成します。 このファイルは、選択したテキストエディタで開くか、ターミナルを使用して変更できます。 Nano は、ターミナルウィンドウで使用されるエディターです。 Vimなどの他のエディターがある場合があります。
このNODE_ENVは、ビルド時に選択した環境またはモードに応じて異なるデータセットをロードすることにより、チュートリアルの後半で使用します。
ファイルに以下を追加します。
.env.staging
NODE_ENV="staging"
ファイルを保存して終了します。 nanoでは、CTRL+X、CTRL+Yの順にファイルを保存できます。
この環境を使用するために、package.jsonファイルに新しいスクリプトを登録できます。 このファイルを今すぐ開きます。
"scripts"セクションに、次の強調表示された行を追加します。
package.json
{
...
"scripts": {
...
"staging": "vue-cli-service serve --mode staging",
},
...
}
このファイルを保存して、エディターを終了します。
npm run stagingで実行できる新しいスクリプトを作成しました。 フラグ--modeは、ローカルサーバーの起動時に.env.staging（または.env.staging.local）ファイルを使用することをVueCLIに通知します。
このステップでは、2つのVue.jsモードdevelopmentとstagingのカスタムNODE_ENV変数を作成しました。 これらのモードは、これらの各モードのカスタムデータセットを作成するときに、次の手順で役立ちます。 プロジェクトをいずれかのモードで実行することにより、これらのファイルを読み取ることでさまざまなデータセットをロードできます。
ステップ2—モックデータレイヤーを作成する
はじめにで述べたように、モックデータレイヤーを使用すると、バックエンドなしでユーザーインターフェイスの開発を開始できます。 モックデータレイヤーは、アプリケーションが参照できるようにローカルに保存される静的データです。 Vueを使用する場合、これらのデータファイルはJavaScriptオブジェクトおよび配列です。 これらが保存される場所は、個人的な好みです。 このチュートリアルのために、モックデータファイルはdataという名前のディレクトリに保存されます。
このチュートリアルでは、「メイン/詳細」空港ブラウザアプリケーションを構築しています。 「メイン」ビューでは、ユーザーにはいくつかの空港コードと場所が表示されます。
ターミナルのルートプロジェクトディレクトリで、mkdirコマンドを使用して新しいディレクトリを作成します。
mkdir data
次に、touchコマンドを使用して、airports.staging.mock.jsという名前の.jsファイルを作成します。 これらのファイルに名前を付けることは個人的な好みですが、通常、このモックデータをアプリ内の重要なファイルと区別することをお勧めします。 このチュートリアルのために、モックファイルは次の命名規則に従います：name.environment.mock.js。
次のコマンドでファイルを作成します。
touch data/airports.staging.mock.js
選択したエディターで、この新しく作成されたJavaScriptファイルを開き、次のオブジェクトの配列を追加します。
data /airports.staging.mock.js
const airports = [
{
name: 'Cincinnati/Northern Kentucky International Airport',
abbreviation: 'CVG',
city: 'Hebron',
state: 'KY'
},
{
name: 'Seattle-Tacoma International Airport',
abbreviation: 'SEA',
city: 'Seattle',
state: 'WA'
},
{
name: 'Minneapolis-Saint Paul International Airport',
abbreviation: 'MSP',
city: 'Bloomington',
state: 'MN'
}
]
export default airports
このコードブロックでは、米国の空港を表すオブジェクトを作成し、それらのname、abbreviation、およびcityとstateを提供します。それらはあります。 次に、配列をエクスポートして、プログラムの他の部分で使用できるようにします。 これは、「ステージング」データとして機能します。
次に、「開発」などの別の環境（npm run serveを実行するときのデフォルト環境）のデータセットを作成します。 命名規則に従うには、touchコマンドを使用して端末に新しいファイルを作成し、airports.development.mock.jsという名前を付けます。
touch data/airports.development.mock.js
選択したエディターで、この新しく作成されたJavaScriptファイルを開き、次のオブジェクトの配列を追加します。
data /airports.development.mock.js
const airports = [
{
name: 'Louis Armstrong New Orleans International Airport',
abbreviation: 'MSY',
city: 'New Orleans',
state: 'LA'
},
{
name: 'Denver International Airport',
abbreviation: 'DEN',
city: 'Denver',
state: 'CO'
},
{
name: 'Philadelphia International Airport',
abbreviation: 'PHL',
city: 'Philadelphia',
state: 'PA'
}
]
export default airports
これは、npm run serveを実行するときに「開発」データとして機能します。
環境のモックデータを作成したので、次のステップでは、v-forディレクティブを使用してそのデータを反復またはループし、ユーザーインターフェイスの構築を開始します。 これにより、さまざまなモードを使用したときの変化を視覚的に表現できます。
ステップ3—App.vueのモックデータの反復
モックデータができたので、srcディレクトリのApp.vueコンポーネントでこのデータを反復処理することにより、環境がどれほど有用であるかをテストできます。
まず、選択したエディターでApp.vueを開きます。
開いたら、templateタグ内のすべてのHTMLを削除し、scriptセクションのimportステートメントを削除します。 また、exportオブジェクトのHelloWorldコンポーネントを削除します。 データを読みやすくするために、いくつかの一般的なスタイルも提供されています。
次の強調表示された行をApp.vueファイルに追加します。
src / App.vue
<template>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1rem;
max-width: 960px;
margin: 0 auto;
}
.airport {
border: 3px solid;
border-radius: .5rem;
padding: 1rem;
}
.airport p:first-child {
font-weight: bold;
font-size: 2.5rem;
margin: 1rem 0;
<^>}
.airport p:last-child {
font-style: italic;
font-size: .8rem;
}
</style>
この場合、 CSSグリッドを使用して、これらの空港コードのカードを3つのグリッドに作成しています。 このグリッドが.wrapperクラスでどのように設定されているかに注目してください。 .airportは、各空港コード、名前、および場所を含むカードまたはセクションです。
次に、前に作成した開発モックデータをインポートします。 これはバニラJavaScriptであるため、importステートメントを介してインポートできます。 また、このデータをdataプロパティに登録して、Vueテンプレートがこのデータにアクセスできるようにする必要があります。
次の強調表示された行を追加します。
src / App.vue
...
<script>
import airports from '../data/airports.development.mock'
export default {
name: 'App',
data() {
return {
airports
}
}
}
</script>
...
モックデータがインポートされたので、それを使用してインターフェイスを構築できます。 このアプリケーションの場合、v-forディレクティブを使用してこのデータを反復処理し、テンプレートに表示します。
src / App.vue
<template>
<div class="wrapper">
<div v-for="airport in airports" :key="airport.abbreviation" class="airport">
<p>{{ airport.abbreviation }}</p>
<p>{{ airport.name }}</p>
<p>{{ airport.city }}, {{ airport.state }}</p>
</div>
</div>
</template>
...
この場合、v-forは、空港のリストをレンダリングするために使用されます。
ファイルを保存して閉じます。
ターミナルで、次のコマンドを実行して開発サーバーを起動します。
npm run serve
Vue CLIは、ローカルアドレス（通常はlocalhost:8080）を提供します。 選択したブラウザでそのアドレスにアクセスします。 ブラウザでレンダリングされたairports.development.mock.jsのデータが見つかります。
この時点で、静的モックデータレイヤーを作成し、npm run serveを実行したときにロードしました。 ただし、サーバー（CTRL+C）を停止してステージング環境を開始すると、ブラウザーでも同じ結果が得られることに気付くでしょう。 この次のステップでは、環境ごとに一連のデータを読み込むようにアプリに指示します。 これを実現するために、Vue計算プロパティを使用できます。
ステップ4—計算されたプロパティを使用して環境固有のデータをロードする
Vueでは、計算されたプロパティは、値を返す必要があるコンポーネント関数です。 これらの関数は引数を受け入れることができず、Vueによってキャッシュされます。 計算されたプロパティは、ロジックを実行してその戻り値をプロパティに割り当てる必要がある場合に非常に役立ちます。 この点で、計算されたプロパティは、templateに関する限り、dataプロパティと同様に機能します。
このステップでは、計算されたプロパティを使用して、staging環境とdevelopment環境に異なるデータセットを使用します。
src/App.vueを開き、両方のデータセットをインポートすることから始めます。
src / App.vue
...
<script>
import DevData from '../data/airports.development.mock'
import StagingData from '../data/airports.staging.mock'
export default {
name: 'App',
...
}
</script>
...
いずれかの環境をまだ実行している場合、データは表示されなくなります。 これは、JavaScriptモックデータをtemplateに接続しているdataプロパティを削除したためです。
次に、airportsという名前の計算プロパティを作成します。 ここで重要なのは、Vueが関数の戻り値を取得し、それをtemplateが使用するためにairportsに割り当てるためです。 この計算されたプロパティでは、少しロジックを書く必要があります。 ノード環境名を評価するif/elseステートメント。 Vueでノード環境の値を取得するには、process.env.NODE_ENVでアクセスできます。 ノード環境を作成すると、Vueは自動的にNODE_ENVをdevelopmentとstagingにそれぞれ割り当てました。
src / App.vue
...
<script>
import DevData from '../data/airports.development.mock'
import StagingData from '../data/airports.staging.mock'
export default {
name: 'App',
computed: {
airports() {
if (process.env.NODE_ENV === 'development') return DevData
else return StagingData
}
}
}
</script>
...
これで、それぞれの環境ごとにデータの各セットをロードしています。
ターミナルで、npm run serveを使用してローカル開発環境を開始します。
npm run serve
データは以前と同じになります。
次に、最初にサーバーを停止し、次にターミナルウィンドウでnpm run stagingを実行して、ステージング環境を開始します。
npm run staging
ブラウザでlocalhost:8080にアクセスすると、別のデータセットが表示されます。
結論
このチュートリアルでは、さまざまなVue.js環境モードを使用して、package.jsonファイルに環境スクリプトを追加しました。 また、いくつかの環境の模擬データを作成し、v-forディレクティブを使用してデータを反復処理しました。
このアプローチを使用して一時的なバックエンドを作成することにより、インターフェイスとアプリケーションのフロントエンドの開発に集中できます。 また、Vueが提供する環境やデフォルトの環境の数に制限されません。 開発、ステージング、ユーザー受け入れテスト（UAT）、本番の4つ以上の環境で.envファイルを使用することは珍しくありません。
Vue.jsおよびVueCLI 3 の詳細については、それらのドキュメントを読むことをお勧めします。 Vueのその他のチュートリアルについては、Vueトピックページをご覧ください。
