【環境構築】TypeScript, Node.js

環境

以下の環境で構築していきました。
・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の環境構築は完了です。