【Vue CLI 3】Typescriptを使ったVue.jsプロジェクト開発 実装準備編
前回の続きとして、Typescriptを使ったVue.jsプロジェクト開発について解説していきます。
今回はfilter、環境変数、vuexのモジュール化など今後の実装を簡単にするためのものになります。
いろんな方法があるかと思いますが、個人的には快適な実装環境を整えることができたと思います。
デフォルトのディレクトリ構成
まずプロジェクト作成直後のディレクトリ構成を確認しましょう。
hoiku
- node_modules
- public
- src
--- assets
--- components
--- views
--- App.vue
--- main.ts
--- router.ts
--- shims-tsx.d.ts
--- shims-vue.d.ts
--- store.ts
- .browserslistrc
- .gitignore
- babel.config.js
- package-lock.json
- package.json
- postcss.config.js
- README.md
- tsconfig.json
- tslint.json
それぞれの役割などを簡単に説明していきます。
興味のない方は次の項目へ移動して下さい。
ディレクトリ構成改善
node_modules
npm installでインストールしたパッケージが入ります。
手動で変更を加えることはありません。
node_modulesを削除してしまっても、
$ npm install
することでもう一度node_modulesが作成されます。
public
webpackを通らないので、絶対パスを使用する必要があるようです。
デフォルトではfavicon.icoとindex.htmlがあります。
index.htmlがアプリ全体のindexページです。
Vue.jsで作られたアプリがindex.htmlに記載のある
<div id="app"></div>
のなかに描画されます。
また、ビルド中に作成されたjavascriptやcssファイルのassetリンクも挿入されます。
srcディレクトリ
実装ファイルを置く場所になります。ファイルの役割ごとにさらにディレクトリが細分化されています。
■assets
静的なファイルを置く場所です。
画像、cssなどが含まれます。
■components
拡張子「.vue」のファイルを配置します。
ここに置くファイルは各ページで使う部品のようなものです。
ページ本体のvueファイルはこの後に出てくる「views」ディレクトリ内に配置します。
今回のアプリでは共通header、footerや、コメントの表示・投稿に使うコンポーネントなどを用意します。
■views
ページ単位でファイルを用意します。この後に出てくる「router.ts」との組み合わせで使います。
今回のアプリではホーム画面、一覧画面、詳細画面を作成するので以下の3つのファイルを作成します。
Home.vue
List.vue
Detail.vue
必要があれば追加しますが、現段階ではこの3つだけにします。
■App.vue
Vue.jsのindexファイルです。
デフォルトでは以下のようになっており、
<template> <div id="app"> <router-view/> </div> </template>
vue-routerでの画面切り替えが、router-viewで行われます。
またvueで作成するコンポーネントのうち、共通のheaderやfooterはここに記載します。
■main.ts
routerやvuexのインジェクトを行い、アプリケーション全体で認識できるようにします。
デフォルトでは以下のようになっており、routerとvuex(store)がインジェクトされています。
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; Vue.config.productionTip = false; new Vue({ router, store, render: (h) => h(App), }).$mount('#app');
今回はvuexのモジュール化のために、storeの部分だけ変更を加えます。
修正内容は次回。
■router.ts
Vue-Routerのルーティングを設定するファイルです。デフォルトでは以下の通り。
import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue'; Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home, }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ './views/About.vue'), }, ], });
ページ構成に応じてroutesオブジェクトの中身を変更する必要があります。
■shims-tsx.d.ts
型を定義しているファイルになるので、触ることはないでしょう。
「.tsx」という拡張子を用いることで、JSXを含むコードを書いたり、認識したりできるようにしているようです。
■shims-vue.d.ts
こちらも同様に型を定義しているファイルになるので、触ることはないでしょう。
ここでは単一ファイルコンポーネントである拡張子が「.vue」のファイルを書いたり、認識できるようにしているみたいです。
■store.ts
Vuexの実装ファイルになります。デフォルトは以下のようになっています。
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, });
今回のアプリではVuexのモジュール化したいので、デフォルトとは異なる実装方法を取り入れます。
モジュール化することによって、値の参照・保存が楽になります。
今回作成するアプリくらいの規模であれば不要だと思いますが、拡張や今後の大規模アプリ作成時のテストとしてモジュール化を取り入れます。
モジュール化の詳細については以下のページを参照してください。
その他
以下のファイルは設定ファイルだったり、READMEだったり。
説明は省略します。
.browserslistrc
.gitignore
babel.config.js
package-lock.json
package.json
postcss.config.js
README.md
tsconfig.json
tslint.json
ここまででデフォルトのディレクトリ構成を解説しました。
続いて、快適な実装のためにディレクトリ構成を修正していきたいと思います。
ディレクトリ構成改善
やりたいことを列挙すると
entity置き場作成
filter置き場作成
Vuexのモジュール化準備
utility置き場作成
になります。
entity置き場作成
「entity」という言葉を使うのが正しいかわかりませんが、要はデータの受け取り時などに使うclassを定義しておこうということです。
例えば保育園情報をAPIで取得したときに、以下のように帰ってきたとします
res : { result : 'OK', message : '', item : { name : '保育園の名前', description : '保育園の説明', address : '保育園の住所', } }
res.itemの中身を
this.name:string = res.item.name; this.description:string = res.item.description; this.address:string = res.item.address;
のように詰め替えるのではなく,「Item」というclassを作成し
this.item:Item = res.item;
としたいという感じです。
説明が下手かもしれないですが、今後の実装の内容を見ていただければわかると思います。
srcディレクトリの直下にentityというディレクトリを作成しておきます。
filter置き場作成
Vue.jsのfilterを定義する場所になります。
https://jp.vuejs.org/v2/guide/filters.html
filterはローカルフィルタ、グローバルフィルタとして定義できますが、個人的には全てグローバルフィルタとして定義したいので、そのファイルをここに置くようにします。
srcディレクトリの直下にfilterというディレクトリを作成しておきます。
Vuexのモジュール化準備
先ほども説明しましたが、Vuexをモジュール化したいのでそのためのディレクトリを配置します。
srcディレクトリの直下にstoreというディレクトリを作成しておきます。
後ほどsrcディレクトリ直下にある「store.ts」は削除します。(今削除するとエラーが出てしまうので)
utility置き場作成
filterとは異なる役割のもので、様々な場所から呼ばれるであろう機能はここに集約します。
例えば文字列に関する処理を行う「StringUtility.ts」などを作成していきます。
srcディレクトリの直下にutilsというディレクトリを作成します。
今回はこんな感じです。修正後の構成は以下のようになっています
環境変数の設定
最後に環境変数を設定します。以下の公式ドキュメントを参考にしました
cli.vuejs.org
上記ページにあるように、環境変数を設定するためには
.env
.env.local
.env.[mode]
.env.[mode].local
のような設定ファイルを作成します。
[mode]には検証環境(development)、本番環境(production)、テスト環境(test)などを指定できます。
それぞれのファイルについてもう少し細かく解説します。
「.env」ファイル
全ての環境で読まれる設定ファイル。
例えばアプリケーション名などのどこの環境においても同じ値である物を定義します。
これらの「.env」ファイルで定義する変数は「VUE_APP_」で始まることが期待されており、それ以外だと読み込まれないようです。
cli.vuejs.org
Note that only variables that start with 「VUE_APP_」 will be statically embedded into the client bundle with webpack.DefinePlugin.
上記ファイルを作成する場合、プロジェクト直下におきます。
ここでも「.env」ファイルをプロジェクト直下に作成します。
hoiku/.env
今回はアプリ名を「Hoiku」として作成しました。
VUE_APP_TITLE=Hoiku
「.env.development」ファイル
開発環境でのみ読まれる設定ファイルです。
アクセスするURLが開発環境、本番環境によって異なることがほとんどだと思いますが、そのような場合に使用します。
例えば開発環境用のBASE_URLを「http://localhost:8080/ 」としたいときはプロジェクト直下に「.env.development」ファイルを作成し、以下のように設定します。
VUE_APP_BASE_URL=http://localhost:8080/
hoiku/.env.development
「.env.production」ファイル
本番環境でのみ読まれる設定ファイルです。
先ほど同様プロジェクト直下に「.env.production」ファイルを作成します。
hoiku/.env.production
例えば開発環境用のBASE_URLを「http://localhost:8080/ 」だけど、本番環境では「http://www.sky-limit-future.com/」としたいときは以下のように設定します。
VUE_APP_BASE_URL=http://www.sky-limit-future.com/
「.local」
末尾に「.local」が付くファイルは開発者ごとに保持しておきたい値を記載します。
「.local」が付くファイルは「.gitignore」の対象(デフォルト)なので、自分だけで使う値です。
今のとこの今回のアプリで使用する予定はありません。
以上で快適な開発環境になったかと思います。
次回から本格的な実装を行います。
