spangled shalalala blog

諦めたらそこで試合終了だよ。

Node.js + TypeScriptの環境を作って最速で入門してみた

普段はサーバーサイドの開発がメインで特にRuby on Railsでの開発をメインにしているのでけれど、ふとNode.jsやTypeScriptを触ってみようと思い軽く入門してみた。

参考文献としてはこのQiitaの記事を読みながら写経してみた。
qiita.com

手を動かしながら読み進めて、30分程度で完了。つまづくところもなく、あっさりと入門できたのでよかった。

f:id:brokenspeaker888:20161013124806p:plain

チュートリアルの内容

チュートリアルの内容としてはTypeScriptとNode.jsをインストール済の段階からpackage.json, tsconfig.jsonを書きながら定番の Hello, World. を出力し、開発効率を上げるためのパッケージを追加しながらnpm-scriptを書くというところまで進めるコースになっている。

それぞれの設定ファイルがどういう役割なのかをざっくりと覚えることができたし、開発の効率化という部分でどういうパッケージを追加すればいいのかも知ることができた。

TypeScriptで開発の効率を上げる

開発の効率を上げるために、 ts-node, ts-node-dev, rimraf, npm-run-all を追加した。

  • ts-node: コンパイルと実行を一気に行ってくれる。
  • ts-node-dev: ファイルの更新をキャッチして、保存が行われたらコンパイルと実行を行ってくれる。
  • rimraf: ビルドを行ったファイルを一括削除する
  • npm-run-all: 複数のnpm-scriptsを実行する

package.jsonにscriptsを定義して実行する

package.json"scripts" を定義してnpmで実行することができる。
これで便利なスクリプトを準備しておけば、ターミナルから簡単にスクリプトを実行できるので便利ですね。

# sample
npm run dev
npm run start

npm installで"devDependencies"にインストールする

npmでpackageをインストールする際に

npm install -D @type/node

のように install -D をオプションで指定する。
このオプションを指定することで devDependencies にパッケージを追加することができました。
dependenciesdevDependencies の違いが最初はわからなかったのですが、dependencies に記載されているパッケージは開発以外の使用のときにインストールされるパッケージで、devDependencies は開発時に必要なパッケージとしてインストールされるパッケージということらしいので違うものだというのを知った。

ひとまず、これでNode.js + TypeScriptに入門できたので、これからNode.js + TypeScriptをつかったアプリを作ってみたいと思います😉