仕事ですぐに使えるTypeScript その２
目的
学習の記録と学びになった部分をアウトプットするため。
期限
対象書籍の読了・内容理解が8月中に完了していること。
対象
今回の対象は「Node.jsエコシステムを体験しよう」。
著作権者：フューチャー株式会社（Future Corporation）様
Node.jsのエコシステムを体験しよう
三行サマリ
- package.jsonにはプロジェクトで使用されているライブラリやバージョン、scriptsが記載されており、package.jsonを起点に解析するとわかりやすい。
- TypeScriptを使用したアプリケーションを実行する際は、最新のJavaScriptやTypeScriptを実行環境に合わせたJavaScriptへコンパイル作業と複数ファイルに記述されているJavaScriptを1つのファイルにまとめるバンドルという作業が必要。
- .tsのファイルを実行する際は、npx経由でts-nodeを実行する。
Node.jsのインストール
- npm init -yでカレントディレクトリにpackage.jsonを作成する。
-yオプションは全てyesで選択するときに使用するオプション。
- 他の人が行っているプロジェクトのコードを見るときに、package.jsonを起点に解析していくとわかりやすい。
また、
package.jsonにはnpmjs.orgにアップロードする際に必要な情報も入っている。プロジェクトを後悔することはないと思われるが、念のため"private: true"を追記しておくと安心。--save-devはproductionでは必要ないが、開発では必要という意味。本番環境でもしようしたい場合は--saveを使用する。- Node.jsは基本的に現在いるフォルダ以外のところにライブラリがインストールされることはなく、全てnode_modulesの中にインストールされる。（キャッシュはあるけど）そのため、プロジェクトごとにバージョンが異なる、といった事象は発生しない。node_modulesは基本的にgitignoreに入れとく。
プロジェクトフォルダ共有後の環境構築
| コマンド | 説明 |
|---|---|
npm install |
dependenciesとdevDependenciesの両方をインストール |
npm install --prod |
dependenciesのみインストール |
npm ci |
dependenciesとdevDependenciesの両方をインストールするが、package-lock.jsonは更新しない |
npm ci --prod |
dependenciesをインストールするが、package-lock.jsonは更新しない |
インストールしたコマンドの実行
- ts-nodeのREPLを使用したい場合は、下記のように実行できる
$ npx ts-node $ > const a: string = "aaa";
- npxとは
- npx とはnpmパッケージを簡単に実行できるコマンド。run scriptを使用せず、コマンドを実行することができる。
TypeScriptの環境設定
JavaScript系のツールのビルドは大きく分けて二つのフェーズがある。
- コンパイル
- TypeScriptを実行環境に合わせたJavaScriptに変換する。TypeScriptやBabelで対応できる。
- バンドル
- 複数のファイルに記載されたJavaScriptのコードを一つのファイルにまとめるもの。代表的なものだと、webpack, parcel, Browserify等がある。
- コンパイル
TypeScriptの設定はtsconfig.jsonで管理する。 作成する際は下記のコマンドを実行する。
$ npx tsc --init
ts-nodeを使ったTypeScriptの実行
下記を実行したい場合は、npx経由でts-nodeコマンドを実行する。
const hoge: string = "fuga"; console.log(hoge);
$ npx ts-node first.ts
もしくは、playgroundを使用するのもOK
