環境
以下の環境で構築していきました。
・macos Sonoma
・MacBook Air M1
前置き
今回 TypeScriptの学習をする機会があったのでその備忘。
これから環境構築をしようと考えている方々に、方法を共有しようと思い書きました。
はじめに
Homebrew
まず、Homebrewのインストールを行いましょう。
以下のリンクからインストールが行えます。
パスワードやエンターを求められるので、都度入力しましょう。
インストールが完了したか、以下のコマンドで確認してください。バージョンが表示されれば完了しています。
brew --version
Node環境の構築
TypeScriptを使用するためにはNode.js環境が必要です。Node.jsはTypeScriptコンパイラを実行するために必要となってきます。
以下の手順で環境を構築しましょう。構築済みの方は次へ進んでください
まず、 .zshrcファイルがあるか確認してください。
以下のコマンドで確認が可能です。
ls -la
ファイルが見つからない場合は、touchコマンドで.zshrcファイルを作成しましょう。
続いて、nvmのインストールを行います。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
次に、sourceコマンドでzshrcファイルを更新しましょう。
source ~/.zshrc
そして、nvm --versionでバージョンが確認できるか確かめてください。
こちらのnvmを使用してNode.jsのインストールを行なっていきます。
nvm ls-remoteでNode.jsのバージョンが確認できます。
表示されたリストから Latest LSTと表示されているものをインストールしましょう。
こちらはNVMでサポートされており、最新のバージョンになります。
以下のコマンドでインストールができます。
nvm install [バージョン指定]
それでは、node -vでインストールしたNodeのバージョンが確認できるか確かめましょう。
これにより、npm（Nodeのパッケージマネージャー）もインストールされます。
npm -vでバージョンの確認を行いましょう。
以上でNode環境の構築は完了です。
TypeScriptの環境構築
まず作業を行なっていくディレクトリの作成を行いましょう。（ディレクトリ名は何でも良いです）
mkdir ts-project
以下のコマンドで、作成したディレクトリに移動しましょう。
cd ts-project
次にnpm の初期化を行います。
npm init
そうすると色々聞かれると思いますが、今回は全てyesで大丈夫です。
ここからはお使いでエディタで作業を進めていきましょう。
VScodeを使用している方は、code .で起動させることができます。
「command + J」でVScode上でもターミナルが開けます。
続いて、関連パッケージのインストールを行います。
npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server
・typescript ：TypeScriptをJavaScriptに変換するコンパイラ
・ts-loader ：webpackと連携してTypeScriptコンパイラを起動
・webpack ：ファイルを一つまとめる
・webpack-cli :コマンドラインでwebpackを使う
・webpack-dev-server:開発用webサーバーの起動
こちらの５つを開発環境のみにインストールします。（詳しい説明は省略させていただきます）
package.jsonにインストールされているか確認してください。またscriptの部分も以下のように変更してください。
{
"name": "ts-basic",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "webpack --mode=production",
"start": "webpack-cli serve --mode development"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"ts-loader": "^9.5.1",
"typescript": "^5.4.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
}
}
そして、```webpack.config.jsファイルを作成して以下を記述してください。
const path = require('path');
module.exports = {
entry: {
bundle: './src/index.ts'
},
output: {
path: path.join(__dirname, 'dist'), //distファイルを作成しておきましょう
filename: '[name].js'
},
// import文でファイルの拡張子を書かずにする設定
resolve: {
extensions: ['.ts', '.js']
},
devServer: {
static: {
directory: path.join(__dirname, 'dist')
},
open: true //サーバー起動時にブラウザを開く
},
//moduleのルール設定
module: {
rules: [
{
loader: 'ts-loader',
test: /\.ts$/
}
]
}
}
以下のコマンドでTypeScriptのコンパイラの起動を行いましょう。
tsc --init
もしできない場合は、npm install -g typescriptでtscが使用できるようになります。
起動するとtsconfig.jsonという設定ファイルが作成されていればTypeScriptの環境構築は完了です。