vscodeで最低限のTypeScript環境を構築（初学者向け）

初心者は情報を絞ろう

JavaScriptを取り巻く環境が盛り上がる中でTypeScriptという静的型付けな言語が誕生しました。
そしてそれをより便利に扱うためにたくさんの有用なノウハウも蓄積されつつあります。
ですがそうした知識は時として初学者の入門を阻んでしまうものです。

いざTypeScriptを勉強しようとしてもいきなり「node.jsをインストールして下さい」とくるわけです。
そこで「node.jsて何…」となるのですが、それを調べると「JavaScriptをサーバサイドで実行可能にしたものです」といわれ「JavaScriptとサーバに何の関係があるの…」と疑問が次々にわき段々深みに嵌まってしまうかもしれません。
その頃には既に疲れ果て環境構築をする気力は底をついているでしょう。

node.jsの次にはnpm、npmの次はビルドタスクがtscがjsonがと来られると初学者の頭はパンパンになってしまいます。
もしこうした状態になったなら、何も考えずスーッとシンプルな環境を構築してしまいましょう。
分からないことは未知の世界の魔法のようなものと考え、さっさと書けるようにしておけば良いのです。
書いていく内にそれまで分からなかったことは随時調べることになるものです。

下準備の大まかな手順

まずはTypeScriptの環境のベースともなるnode.jsというものを公式サイトでインストールします。
参考：https://nodejs.org/ja/
インストーラーを実行すればささっとやってくれるので頭を空っぽにしてインストールすればOKです。

お次はコマンドプロンプトを立ち上げてnode.jsがきちんとインストールされているかどうかを次のコマンドで確認しておきましょう。

node -v

npm -v

これらのnodeコマンドとnpmコマンドが機能していればそれぞれのバージョンが表示されるはずです。
npmというのはパッケージ管理ソフトというものの一種で、node.jsの機能群を適宜インストールするために使うツールとなります。
深く考えずに「node.jsとかいうものの道具箱みたいなもんだな」と思っておけば大丈夫です。

TypeScriptを扱う環境のベースができたので次にvscodeをさくっとインストールしておきましょう。
参考：https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx
インストールしたら起動して下さい。
これでもう半分は環境が構築できたも同然です。

TypeScriptの環境を構築

これまでの流れでnode.js、npm、vscodeという3つのものを用意することができました（npmはnode.jsをインストールしたときに一緒にくっついてきます）。
ではここからより具体的にTypeScriptの環境を構築していきましょう。

TypeScriptというのはトランスパイラというものを必要とします。
これはC言語やJava言語におけるコンパイラのようなもので、TypeScriptで書いたコードをJavaScriptに変換するという役目を担っているのです。
そしてトランスパイラの名前は「tsc」といいます。
これをインストールするにはコマンドプロンプトで次のコマンドを打ち込んで下さい。

npm install -g typescript

これは「TypeScriptのトランスパイラtscをグローバルな形でインストールします」という意味で、-gを指定することで勝手にパスを通してくれます。
そして次にtscがインストールされているかどうか次のコマンドで確認していきます。

tsc -v

これでバージョンが表示されれば無事TypeScriptを扱う環境が整ったことになります。

vscodeの設定は…いらない！

TypeScriptの環境構築を調べていると様々な設定を行うjsonファイルの作成やvscode内で一括して開発するための各種設定などを目にすることになると思いますが、最低限の実行環境であればそれらは不要です。
vscodeはデフォルトでTypeScriptのインテリセンス（入力補完）に対応していますし、きちんとエラーも表示してくれます。
またトランスパイラを通したjsファイルはコマンドプロンプトで実行することもできますし、ブラウザでの動作もエクスプローラでファイルをドラッグしてしまえば良いだけです。

最初はvscodeで新規ファイルを作成しハローワールドなコードを書き「.ts」ファイルとして保存してトランスパイルしてみましょう。
なお例えばhoge.tsという名前のファイルをトランスパイルする方法は、コマンドプロンプトやvscode上のターミナル（ctrl＋@で起動）でhoge.tsのあるディレクトリへ行き以下のようにコマンドを打ちます。

tsc hoge.ts

そして動作を確認する場合は以下のようにnodeコマンドを用いて、先のコマンドで生成されたjsファイルを指定すればOKです。

node hoge.js

以上が正常に動作すればもう最低限の環境構築は完了となります。
がんがん書いていきましょう。

環境構築に迷い込まないように

特にWeb系の開発環境の変遷はスピードが速いため情報量も膨大です。
それを作るための前提となる知識が多く求められるので、学習しようとしたときにそこでつまづいてしまうかもしれません。
そんなときにはきちんと情報を絞って自分に必要な環境を構築していきましょう。