limitVue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。前回の続きとして、Typescriptを使ったVue.jsプロジェクト開発について解説していきます。www.sky-limit-future.com今回はfilter、環境変数、vuexのモジュール化など今後の実装を簡単にするためのものになります。いろんな方法があるかと思いますが、個人的には快適な実装環境を整えることができたと思います。参考ページデフォルトのディレクトリ構成まずプロジェクト作成直後のディレクトリ構成を確認しましょう。tslint.jsonそれぞれの役割などを簡単に説明していきます。興味のない方は次の項目へ移動して下さい。installでインストールしたパッケージが入ります。手動で変更を加えることはありません。installすることでもう一度node_modulesが作成されます。publicwebpackを通らないので、絶対パスを使用する必要があるようです。デフォルトではfavicon.icoとindex.htmlがあります。index.htmlがアプリ全体のindexページです。id="app"></div>のなかに描画されます。ビルド中に作成されたjavascriptやcssファイルのassetリンクも挿入されます。srcディレクトリ実装ファイルを置く場所になります。ファイルの役割ごとにさらにディレクトリが細分化されています。■assets静的なファイルを置く場所です。画像、cssなどが含まれます。■components拡張子「.vue」のファイルを配置します。ここに置くファイルは各ページで使う部品のようなものです。ページ本体のvueファイルはこの後に出てくる「views」ディレクトリ内に配置します。今回のアプリでは共通header、footerや、コメントの表示・投稿に使うコンポーネントなどを用意します。■viewsページ単位でファイルを用意します。この後に出てくる「router.ts」との組み合わせで使います。作成するので以下の3つのファイルを作成します。Home.vueList.vueDetail.vue必要があれば追加しますが、現段階ではこの3つだけにします。■App.vueVue.jsのindexファイルです。</div></template>vue-routerでの画面切り替えが、router-viewで行われます。vueで作成するコンポーネントのうち、共通のheaderやfooterはここに記載します。■main.tsrouterやvuexのインジェクトを行い、アプリケーション全体で認識できるようにします。デフォルトでは以下のようになっており、routerとvuex(store)がインジェクトされています。h(App),}).$mount('#app');今回はvuexのモジュール化のために、storeの部分だけ変更を加えます。■router.tsVue-Routerのルーティングを設定するファイルです。デフォルトでは以下の通り。],});ページ構成に応じてroutesオブジェクトの中身を変更する必要があります。■shims-tsx.d.ts型を定義しているファイルになるので、触ることはないでしょう。「.tsx」という拡張子を用いることで、JSXを含むコードを書いたり、認識したりできるようにしているようです。■shims-vue.d.tsこちらも同様に型を定義しているファイルになるので、触ることはないでしょう。ここでは単一ファイルコンポーネントである拡張子が「.vue」のファイルを書いたり、認識できるようにしているみたいです。■store.tsVuexの実装ファイルになります。デフォルトは以下のようになっています。},});今回のアプリではVuexのモジュール化したいので、デフォルトとは異なる実装方法を取り入れます。モジュール化することによって、値の参照・保存が楽になります。今回作成するアプリくらいの規模であれば不要だと思いますが、拡張や今後の大規模アプリ作成時のテストとしてモジュール化を取り入れます。モジュール化の詳細については以下のページを参照してください。以下のファイルは設定ファイルだったり、READMEだったり。.browserslistrc.gitignorebabel.config.jspackage-lock.jsonpackage.jsonpostcss.config.jsREADME.mdtsconfig.jsontslint.jsonここまででデフォルトのディレクトリ構成を解説しました。続いて、快適な実装のためにディレクトリ構成を修正していきたいと思います。ディレクトリ構成改善やりたいことを列挙するとentity置き場作成filter置き場作成Vuexのモジュール化準備utility置き場作成になります。「entity」という言葉を使うのが正しいかわかりませんが、要はデータの受け取り時などに使うclassを定義しておこうということです。res.item;としたいという感じです。説明が下手かもしれないですが、今後の実装の内容を見ていただければわかると思います。srcディレクトリの直下にentityというディレクトリを作成しておきます。filter置き場作成Vue.jsのfilterを定義する場所になります。https://jp.vuejs.org/v2/guide/filters.htmlfilterはローカルフィルタ、グローバルフィルタとして定義できますが、個人的には全てグローバルフィルタとして定義したいので、そのファイルをここに置くようにします。srcディレクトリの直下にfilterというディレクトリを作成しておきます。先ほども説明しましたが、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_」で始まることが期待されており、それ以外だと読み込まれないようです。webpack.DefinePlugin.上記ファイルを作成する場合、プロジェクト直下におきます。ここでも「.env」ファイルをプロジェクト直下に作成します。hoiku/.env今回はアプリ名を「Hoiku」として作成しました。VUE_APP_TITLE=Hoiku「.env.development」ファイル開発環境でのみ読まれる設定ファイルです。よって異なることがほとんどだと思いますが、そのような場合に使用します。」としたいときはプロジェクト直下に「.env.development」ファイルを作成し、以下のように設定します。VUE_APP_BASE_URL=http://localhost:8080/hoiku/.env.development「.env.production」ファイル本番環境でのみ読まれる設定ファイルです。先ほど同様プロジェクト直下に「.env.production」ファイルを作成します。」だけど、本番環境では「http://www.sky-limit-future.com/」としたいときは以下のように設定します。末尾に「.local」が付くファイルは開発者ごとに保持しておきたい値を記載します。「.local」が付くファイルは「.gitignore」の対象(デフォルト)なので、自分だけで使う値です。今のとこの今回のアプリで使用する予定はありません。以上で快適な開発環境になったかと思います。次回から本格的な実装を行います。Vue.js【Vue.js】Vue.Draggableを使って、Vue.jsでドラッグ&ドロップを実装する【Vue.Draggable】Vue.jsはてなブログをはじめよう!duo-taro100さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。