森下様の著書「Visual Studio Code 実践ガイド」をフラゲ（）したので、本書に従い初めてVue.js＋TypeScriptで開発環境を作ってみました。

Vueでの開発環境構築なんてコマンドライン一発でしょ？

$ vue create myapp

Vue CLI入れていれば確かにこれ一発ですね。しかし、お膳立てされすぎててどこから手を付ければいいのか分からなくなってしまいました。デフォで入ってくるライブラリ群大杉問題です。

そんなとき、冒頭で挙げた書籍にTypeScriptでWebアプリの開発環境を整える章があったので、そちらに従い環境構築してみました。

環境構築

フォルダ構成

実践ガイドではTodoリストアプリを例に挙げて、実装まで解説しています。一応、今回は環境構築のため、実装できる直前まで作ってみます。

フォルダ構成は次のとおり。それぞれのフォルダの意味は書籍参照のこと。

todo-list
├─src
│　├model
│　├server
│　└frontend
├─test
│　└model
├─out
├─public
│　└─html
│　　　├─js
│　　　└─index.html
├─.gitignore
└─node_modules  //←自動生成

node_modules以外のsrc, test, public等のフォルダを作ってやったら、ルートフォルダに移動（cd todo-list）してnpm initを叩いてやる。

すると、いろいろ聞かれたあとにプロジェクトのマニフェストファイルpackage.jsonが生成される。

{
  "name": "todo-list",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

.gitignoreにはとりあえず下記を追加。

//.gitignore

node_modules
out
pulic/html/js

tscの導入

TypeScriptを使って開発するので、typescriptを導入する。 TypeScriptコンパイラ（トランスパイラ？）ですね。

$ npm install typescript

なお、npm 5.0.0以降では、--saveオプションは要りません。

qiita.com

これで、.tsファイルのコンパイルは./node_modules/.bin/tscで実行できるようになる。

その他のパッケージのインストール

package.jsonのdependenciesに下記のパッケージを追記する。バージョンはその時の最新のものを使用してください。

{
  "dependencies": {
    "express": "^4.17.1", 
    "mocha": "^7.0.1",
    "power-assert": "^1.6.1",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.2.1",
    "tslint": "^6.0.0",
    "typescript": "^3.7.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

その後$ npm installを叩くことで、素敵に全てのパッケージをインストールしてくれます。

tsconfig.jsonの生成

次のコマンドで一撃。

$ ./node_modules/.bin/tsc --init

tslint.jsonの生成

次のコマンドで（ry

$ ./node_modules/.bin/tslint --init

ここまででざっくり開発環境構築終了です。あとはsrc配下にゴリゴリと書いていく感じで。

感想

コマンドを確認しながら構築していくと楽しいですね。

Vue CLIは確かに便利ですが、そもそもどうしてそういう構成になっているかの理解が不足してしまう気がします。ネット上だと本当に様々な方法が載っているので、一本筋がとおった「本」という形態はいいものです。

「Visual Studio Code 実践ガイド」良い本なのでお勧めです。

日々是好日

プログラミングについてのあれこれ、ムダ知識など

VSCode実践ガイドでWebアプリ開発環境を作ってみた