Visual Studio Code+TypeScriptでJavaScriptの開発をしてみる（超入門）

私はvimが大好きです。
JavaScriptを直接書くなら迷わずvimを起動します。
しかし、時代の波はJavaScriptを直接書くことを許してくれないようです。
BabelやCoffeeScriptなどで開発したソースをトランスパイルすることでJavaScriptにする。（各種ブラウザやバージョンに対応するのは人間にはシンドイ世の中になってきました）
そんな中、普段からVisual Studioを使用する機会が多い私はVSCodeを使いたいです。
ということはTypeScriptの出番ですね。

TypeScriptからJavaScriptを生成するまでの手順を簡単にまとめます。

## Visual Studio Codeのインストール
[公式サイト：Download Visual Studio Code](https://code.visualstudio.com/download)からdownload→インストールでOK。
日本語はインストール後に「拡張機能」から「Japanese Language Pack for Visual Studio Code」をインストールしてvscodeを再起動すればOK。
ちなみに、Language Packには『インストールが完了したら、Japanese Language Pack を読み込むために locale.json 内で "locale": "ja" を設定します。』という説明があるのですが、自分はインストール＋再起動だけで日本語になったんですよね・・・？
あれ、localeの設定って最近は必要無い？

## npm, Node.jsのインストール
npmとNode.jsをインストールします。
npmとNode.jsのバージョンを切り替えて使用できるようにしたい場合はnvmあたりを使用しましょう。
インストール方法は既に先人の方々が説明してくれているので。。。

### npmとNode.jsを直接インストールする場合
[Windowsでのnode.jsとnpmのインストール方法](https://php-labs.com/programming/nodejs/how-to-install-nodejs-and-npm-on-windows.html)
[Node.js Windows 版バージョン 10.15.3 のインストール ](https://www.kkaneko.jp/tools/win/nodejs.html)
などを参考にインストールしましょう。

### バージョンを切り替えられるようにする場合
[nvm + Node.js + npmのインストール](https://qiita.com/sansaisoba/items/242a8ba95bf70ba179d3)
[nvmを使ったNode.jsのインストール&バージョンアップ手順](https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a)
が参考になると思います。

## 準備（お試しテスト環境）
ここまででvscodeとnpm+Node.jsが使えるようになりました。
これだけで開発環境は整っています、後は使い方だけです。
という事で、お試しでtsからjsを生成してみます。（このTypeScriptで書かれたプログラムからJavaScriptのコードを生成することをトランスパイルといいます）

### ディレクトリ準備
どこでもよいので以下のようなディレクトリを用意します。

```
/ts_test
   中身は空
```

はい、用意というかディレクトリ切っただけでした。

### package.jsonの生成
以下のコマンドはvscodeからも実行出来ますが、個人的にコマンドはプロンプトから実行するのが好きなので（CUIバンザイ）コマンドプロンプトから実行する方法で説明します。

1. コマンドプロンプトを起動
![cmd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51925/a64b5fc2-9025-1d0b-7eb0-91a22bba7808.png)

2. ts_testディレクトリに移動
3. `npm init`を実行
![npm_init.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51925/59414156-9e1d-ce6c-914d-2849aee714c6.png)


4. とりあえずテストなのですべて未設定でOKにする
![npm_init_input.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51925/e81c7965-7534-a340-4174-c6031f5df3c1.png)

すべて完了したらディレクトリを確認します。
![dir.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51925/2f8cb14d-0eeb-4bf6-4566-cb41cc97b325.png)
無事package.josnが生成されています。
package.jsonが何か？という疑問に関して、これまた先人の方が詳しく説明してくれているので、
[npmでライブラリをインストールする方法](https://tsuyopon.xyz/2019/02/09/how-to-install-libraries-with-npm/)
[package-lock.jsonの役割とは？【Node.js】](https://tsuyopon.xyz/2019/02/11/what-is-the-package-lock-json/)
お任せしたいと思います（おいおい）

### typescriptのインストール
package.jsonが出来たところ、Typescriptを使うためのパッケージをインストールしたいと思います。

```dos
npm install -D typescript
```

まず`-D`ですが、これは`--save-dev`を短くしたものです。
--save-devで指定されたパッケージは`package.josnのdevDependencies `に追加されます。
`devDependencies `は開発時のみ使用するパッケージを指します。

typescritpなどのパッケージのインストール方法の説明で多いのが`-g`を付けてインストールする方法ですが、、、`-g`はグローバル環境にtypescriptをインストールしてね。という設定になります。
個人的にはネットワーク速度も速く、HDDも余裕のある現在、パッケージはプロジェクト毎にインストールした方が環境に依存しないpackage.jsonを作れるため良いのではないかと思っています。
（-gでインストールしている場合、別のどこかでインストールされたパッケージが既に入っているから自分の環境だと問題ない。なんて現象も起きたりします）

### tscコマンドをnpmで実行出来る様にする
しかし！
`-g`でtypescriptをインストールしていない場合、以下のコマンドが使えません。

```
tsc -v
```
これは、グローバル環境にtypescriptをインストールしていないため、tscコマンドが解決されていないため発生する現象になります。
そのため、tscコマンドを実行するために以下の設定を行います。

```Javascript:package.json
  "scripts": {
    "tsc": "tsc",         <--------これを追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```
package.jsonの設定後に以下の様にコマンドを実行します。

```
npm run tsc -- -v
```
今度はちゃんとバージョンが表示されました。
![tsc_v.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51925/658208fd-9adb-7e3c-de99-58cd91a58a00.png)
`scripts`に"tsc"を追加したことにより、`npm run`コマンドでtscが実行出来る様になりました。
"tsc"だけで実行するより不便かもしれませんが、環境を汚さないことを考えたら許容できないですか？
尚、`npm run tsc`の場合、引数は`--`の後に渡す必要があるため`-- -v`となっています。

### tsconfig.jsonの生成
これで`tsc`コマンドが使えるようになったので、次にtsconfig.jsonを生成します。

1. `npm run tsc -- --init`を実行
2. vscodeからtsconfig.jsonを編集

編集内容はテストなのでts_testディレクトリ直下のtsファイルをindex.jsにまとめることにする。

```Javascript:tsconfig.json
"compilerOptions": {
    "outDir": "./",         <---- コメントを外す
},                          <---- 意外と忘れるカンマの追加
"exclude": [                <---- これを追加
    "node_modules"
]
```

### index.tsを新規作成
これまたテストなので適当な内容を準備する。

```Typescript:index.ts
console.log("test");
```

### ビルドしてみる
vscodeからビルドをする。
![build.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51925/b3939647-3134-6222-4ad5-a4d4e2de9ebd.png)
![build2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51925/7bef3c95-40ab-d614-f837-a3e5a632e41b.png)

### jsファイルが生成された
ビルドが正常に終了するとindex.jsファイルがディレクトリ直下に生成される。
![exp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51925/77870f93-ca41-3491-bea2-0bde87ec8835.png)

## 最後に
ここで実行した内容は単純に**ts→jsを体験してみよう**という内容になっています。

そのため実際の開発では、ディレクトリ直下のtsファイルを全部読んで、ディレクトリ直下にjsファイルを生成する。
なんて乱暴なことはないので、srcディレクトリ以下にtsファイルを管理して、assetsなりbuildなりのディレクトリに使用するjsファイルを生成する。
なんて流れになると思います。
また、jQueryを使用するためにjquery用の型定義ファイルである`index.d.ts`を追加する。ということも往々にしてあると思います。

次はもっと開発に沿った内容でまとめたいと思います。