はじめに
こんにちは。
Kojirockの1人アドベントカレンダー Advent Calendar 2018の8日目の記事です。
以下の本を読んで勉強できたことを記載していきます。
今回は第8章です。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
中規模・大規模向けアプリケーション開発① 開発環境のセットアップ
目次
8.1 Vue.jsのプロジェクト構築の特徴
8.2 本章で作成するアプリケーション
8.3 アプリケーションの開発環境構築
8.4 Vue CLIによる開発環境の構築
8.5 アプリケーションのビルド
8.6 テスト環境
8.7 フロントエンド・バックエンド連携
8.8 さらなる開発環境の強化
8.1 Vue.jsのプロジェクト構築の特徴
大規模アプリケーションのプロジェクト構築に向けての話が記述されています。
ここは概要程度でしたので、流し読みしました。
8.2 本章で作成するアプリケーション
今回作成するアプリケーションの説明が記述されています。
Trelloのようなタスク管理アプリケーションになります。
仕様や、ページのレイアウト画面参考図などが記載せれています。
モックを作成して、バックエンド連携も擬似的に行うので、axiosを使用することになります。
8.3 アプリケーションの開発環境構築
Vue CLIで環境を作成します。
本書では、Vue CLIのinitコマンド(vue init)を実行していますが、tipsとして、vue initはレガシーコマンドとなっており、 前章でも使用した、vue createの使用が推奨されています。
今回は、本書に沿って一から プロジェクトを作成します。
8.4 Vue CLIによる開発環境の構築
vue create で作成したので、本書のプロジェクトツリーとは違いますが、このような感じで作成しました。
$ tree -L 2 -I 'node_modules' . . ├── README.md ├── babel.config.js ├── cypress.json ├── jest.config.js ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ ├── components │ ├── main.js │ ├── router.js │ ├── store.js │ └── views ├── tests │ ├── e2e │ └── unit └── yarn.lock 8 directories, 13 files
8.5 アプリケーションのビルド
こちらのブロックでは、ビルドに必要なwebpackなどの説明があります。
また、linterの実行などの説明があります。
今回は vue createで作成したため、若干構成が違います。
vue createでの作成だからだとは思いますが、package.jsonのscriptsにそれぞれのスクリプトが登録されています。
- yarn serve => サーバーたちあげ
- yarn build => ビルド実行
- yarn lint => lint実行
- yarn test:e2e => e2e test実行
- yarn test:unit => unit test実行
8.6 テスト環境
フロントでのテストツールの説明が記載されています。
ここでは具体的な方法は、記述されていません。おそらく次章で出てくるのだと思います。
jsのテストは自分は、何年か前に書いた記憶があるのですが、完全に忘れているので、これを気に学び直したいです。
8.7 フロントエンド・バックエンド連携
バックエンドとの連携関しての概要が記載されています。
このあたりはどちらかというと、自分が得意としている分野だったので、流し読みしました。
8.8 さらなる開発環境の強化
ここで紹介された以外の開発を進める上での便利なツールを紹介されています。
ただ、 vue createでプロジェクトを作れば、紹介されている大体の機能が入ってしまいますので、流し読みでも大丈夫だと思います。
２点だけ、モックとしてのjsonを返すバックエンドサーバーと、chromeのaddonであるVue DevToolsは入れておくべきです。
バックエンドサーバは、 json serverとかでとりあえず代用するのでも大丈夫だと思います。
終わりに
今回は、非常にかんたんに終わりました。
次章のための用意という感じです。
テストの書き方などは学び直したいと思っていたので、次章は気合を入れて取り掛かりたいと思います。
ではでは。
