概要
今までJavaScriptは多少触ってきましたが、近年のTypeScriptの勢いを見て、そろそろ触らないといけないなぁ、と思ったエンジニアの備忘録です。
目的
何事もまずは動かしてみる、の精神で、まずは最低限TypeScriptが実行できる環境をvscode上で整え、簡単なコードを実行するまでを目的とします。
想定読者
・JavaScriptを触ったことがあり、TypeScriptはなんとなく聞いたことがあるがよくわからない方
・コマンド実行に苦手意識が無い方
全体の流れ
環境構築
・Node.js、npmインストール
↓
JSONファイルの作成
├package.json
└tsconfig.json
↓
サンプルコード作成
↓
実行
↓
デバッグ
└ブレイクポイントの設定
↓
ESLint設定
↓
感想
環境
・Windows 11
・Visual Studio Code(以下、「vscode」)
・Node.js v20.16.00
・Node Package Manager(以下、npm) 10.8.2
環境構築
Node.jsのインストール
何はともあれ、まずはNode.jsをインストールします。
これがないと始まりません。
下記公式サイトからダウンロード(v20.16.00)して、インストーラーに従って進めていきます。
最後に正常にインストールが完了したか、下記コマンドで確認します。
※npmはNode.jsインストーラーに同梱されています。
> node -v
v20.16.0
> npm -v
10.8.1
npmの最新バージョンは10.8.2なので、下記コマンドでアップデートしておきます。
> npm install -g npm@10.8.2
> npm -v
10.8.2
TypeSriptのインストール
無事npmがインストールされたので、下記コマンドを実行し、TypeScriptをインストールし、結果を確認します。
> npm install -g typescript
> tsc -v
Version 5.5.4
JSONファイルの作成
環境構築が完了したので、続いてTypeScriptを実行するために必要な下記2つのJSONファイルを作成していきます。
// 「package.json」プロジェクトのパッケージ依存関係やビルドスクリプトのためのファイル
> npm init -y
// 「tsconfig.json」TypeScript 用のビルド設定ファイル
> tsc --init
生成された「tsconfig.jsonファイル」に下記を追記します。
// Visuao Studio Codeコンパイラに必要
"sourceMap": true,
// コンパイラがトランスパイルしたファイルの保存場所
// デフォルトはプロジェクトのルートフォルダだが、ビルドファイルでいっぱいになるのを避けるため、別フォルダを指定
"outDir": "./build"
サンプルコード作成
今回は、下記のサンプルコードを実行してみようと思います。
const message: string = "Hello, World!"
console.log(message)
実行
トランスパイル
下記コマンドで、プロジェクト内の全てのTypeScriptファイルがJavaScriptにトランスパイルされます。
> tsc -p .
-p .がカレントディレクトリにあるtsconfig.jsonファイルを使用するようコンパイラに指示する役割を果たします。
トランスパイルされた結果(出力ファイル: index.js、index.js.map)は、./buildディレクトリに配置されます。
実行
下記コマンドで、トランスパイルされたjsファイルを実行できます。
> node ./build/index.js
Hello, World!
デバッグ
折角なので、vscode上でデバッグをしてみたいと思います。
vscodeサイドバーの「Run and Debug」→「create a launch.json file.」→「Node.js」とクリック。
すると、.vscodeフォルダ内に、「launch.json」ファイルが作成されるので、下記のように変更します。
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
// 今回は変更しませんが、vscodeでデバッグボタン押下時に実行するtsファイルを指定します。
"program": "${workspaceFolder}\\index.ts",
// アプリケーションを起動する前に実行するvscodeのビルドタスクの名前を指定します。
"preLaunchTask": "tsc: build - tsconfig.json",
// トランスパイルによって生成されるjsファイルのパスを指定します。
// "sourceMap": trueにより生成されたソースマップファイルを使用して、TypeScriptソースコードと生成されたJavaScriptコードのマッピングが行われます。
// この仕組みによりTypeScriptのコードを直接デバッグできるようになります。
"outFiles": [
"${workspaceFolder}/build/**/*.js"
]
}
]
}
上記設定が完了後、vscode上でブレークポイントを設定し、「F5」で実行すると、
下記画像のように、ブレークポイントを設定した行でプログラムが一時停止するので、使い慣れたいつものデバッグが可能です。
ESLint設定
折角なのでESLintも設定してみます。
ESLint拡張機能インストール
vscodeにESLint拡張機能をインストールします。
eslint.config.mjs作成
以下コマンドでプロジェクトのESLintを初期化します。
> npm init @eslint/config
いくつか質問されるので、以下のように回答しました。
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npm
すると、「eslint.config.mjs」ファイルが作成されるので、このファイルにルールを記述できます。
※以前は「esling.config」だったようですが、2024年5月に「ESLing version 9.0.0」がリリースされ、「flat config」が正式サポートされた影響で変わったようです。
では試しに怒られるコードを書いてみます。
しっかり仕事してくれていますね！
まとめ
触り始める前は、「トランスパイル」を実行しないといけないのは面倒くさそうだなぁ、と思ってたのですが、環境構築も詰まることなく、vscodeでのデバッグ設定もかなり簡単でした。
今後、ちょっとしたJavaScriptのコードを書く際は、一旦TypeScriptで書くようにしてみても良いかなと思いました。
参考サイト