【2023年】はじめての JavaScript（TypeScript） 環境構築【Homebrew / Volta / rtx】
はじめに
プログラミング未経験の初心者が、JavaScript（TypeScript）を学習するために mac 上で開発環境を構築したので、その備忘録を残しておきます。これから JS を始めようとしている人の助けになればいいなと思っています。
ゴール
- Homebrew パッケージマネージャー導入
- JavaScript（TypeScript）のコーディング環境導入
- Volta 導入
- Node.js 導入
- npm / yarn / pnpm 導入
- VS Code（エディタ）導入
番外編
- ni 導入
- rtx ランタイムマネージャー導入
ターミナルを開く
⌘ + Spaceで Spotlight Search を開き、「terminal」と入力して Terminal.app が出てきたら return（Enter）を押して起動します。
あなたが今後、サービスのドキュメントや技術ブログなどで目にするであろう
$ cd ~
や
% cd ~
のように、$ や % から始まる文字列は、ターミナルで打ち込むコマンドを示しています。実際にそのコマンドを実行したいときには、$ や % を省いてコマンドラインに入力します。$ や % を省かずにそのまま入力してしまうと、コマンドが正常に実行できず、エラーが出るはずです。
Homebrew
Homebrew とは、macOS 用のパッケージ管理ツールです。
あなたが開発に使用するさまざまなツール（パッケージ）をインストールしたりアップデートしたりできます。
▼ Homebrew がインストールされているか確認します。
$ brew -v
Homebrew 4.1.0
ここでバージョンが返ってきたらインストールされています。
バージョンが返ってこなかった人はインストールされていないので、いまからインストールしましょう。
Homebrew の公式サイトにアクセスしてインストール方法を確認します。
▼ インストールコマンド
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
このコマンドを叩くことでHomebrew をインストールすることができるようです。
▼ インストールされているか確認しましょう。
$ brew -v
Homebrew 4.1.0
Volta
あなたのmac上でプログラムを動かすための環境を準備します。その環境のことを「実行環境」や「ランタイム」といいます。
JavaScript（TypeScript）向けの実行環境のひとつに Node.js というものがあります。Node.js にはバージョンがあり、日々アップデートされています。
これから Volta という、Node.js の各バージョンをインストールしたりアップデートしたり、管理するための便利なツールをインストールします。
Volta の公式ドキュメントに行き、インストール方法を確認しましょう。
こういったツールをインストールする際には、必ず公式情報（一次情報）を確認します。
▼ インストールコマンド
$ curl https://get.volta.sh | bash
※ コマンドの後ろにbashと書かれていますが、zsh や fish のユーザーも気にせずそのままコマンドを実行してください。自動的にパスが通ります。
▼ インストールされているか確認します
$ volta -v
1.1.1
Node.js
Volta がインストールできたら、次は Node.js をインストールします。
Node.js の公式サイトに行き、現在のバージョンを確認しましょう。
（リンク先で Node.js をダウンロードする必要はありません。）
2023/7/23 時点では、18.17.0 が LTS となっていました。
LTS とは、Long Term Support の略で、開発元に長期サポートが約束されたバージョンを指します。
特に理由がない限り、Node.js では LTS バージョンを使用しましょう。
では、先程インストールした管理ツールの Volta を使って、Node.js の LTS リリースをインストールしましょう。
Volta の公式ドキュメントに行って、Node.js のインストール方法を確認します。
You can also specify latest—or even leave off the version entirely, and Volta will choose the latest LTS release:
volta install node
つまり、最新の LTS リリースを選択するには以下のコマンドを叩けばいいそうです。
▼ インストールコマンド
$ volta install node
▼ インストールされているか確認します
$ node -v
v18.17.0
▼ 参考：特定のバージョンを指定してインストールすることも可能です
$ volta install node@18.17.0
npm（yarn / pnpm）
Node Package Manger、略して npm と呼ばれる Node.js 専用のパッケージマネージャーがありますので、そちらをインストールします。
npm は JavaScript（TypeScript）を使った開発ではほぼ必須といえるもので、コーディングを効率化・サポートしてくれる便利な npm モジュールを管理できます。
npm 自体は、Node.js をインストールした時点で一緒にインストールされているかと思います。
▼ インストールされているか確認します
$ npm -v
9.8.1
実は、npm には互換性を持った後継ツールがあり、徐々にそちらが使われることも多くなってきているので紹介します。
まず、yarn と pnpm です。
一般的に、npm よりも高速で、厳密にモジュールを管理できるとされています。詳しい機能比較が気になる方は検索してみてください。
▼ インストールコマンド
$ volta install yarn
$ volta install pnpm
▼ インストールされているか確認します
$ yarn -v
4.0.0-rc.48
$ pnpm -v
8.6.9
npm、yarn、pnpm は、それぞれモジュールをインストールするときのコマンドが異なりますので、確認しておきましょう。
▼ npm、yarn、pnpm それぞれのインストールコマンドの例
$ npm install <モジュール名>
$ yarn add <モジュール名>
$ pnpm add <モジュール名>
番外編：ni
基本的に個人開発では自分の好きなマネージャーを使えばいいのですが、複数人で開発するときはマネージャーを統一しなければいけません。（必須というわけではありませんが、思わぬエラーなどを回避するためです）
そのため、プロジェクトや人に合わせて使い分ける場面が発生します。
npm、yarn、pnpm は同じ操作でもそれぞれコマンドが異なりますので、いちいちコマンドを調べたり覚えたりするのが大変です。
そこで便利なのが ni と呼ばれるツールです。
▼ インストールコマンド
$ npm i -g @antfu/ni
▼ インストールされている確認します
$ ni -v
ni の使い方
こちらのツールは、マネージャーの各コマンドを統一してくれるものです。
例えば、Jest モジュールを開発環境にインストールしたい場合、
$ npm i jest -D
$ yarn add -D jest
$ pnpm add -D jest
のようにコマンドが微妙に異なります。
ni を使えば、同じコマンドを叩くだけで、プロジェクトで使用されているマネージャーを自動で検知して、適切なマネージャーで操作を実行してくれます。
Jest モジュールを開発環境にインストールしたい場合、
$ ni jest -D
で、先ほどの 3 種類のコマンドと同じ意味を持ちます。
▼ ni のコマンド例
$ ni -g eslint
#以下のコマンドと同等
$ npm install -g eslint
$ yarn global add eslint
$ pnpm add -g eslint
$ nr dev
# 以下のコマンドと同等
$ npm run dev
$ yarn run dev
$ pnpm run dev
TypeScript（tsc）
JavaScript に静的型付けを追加したスーパーセットである TypeScript。
TypeScript はコードが実行される前にコンパイルすることで、事前にバグやエラーを見つけることができます。これにより、ランタイムエラーを大幅に減らし、信頼性のあるコードを開発できるようになります。
TypeScript で開発するには、tscと呼ばれるコンパイラが必要です。
▼ インストールコマンド
$ ni -g typescript
▼ インストールされているか確認します
$ tsc -v
Version 5.1.6
Visual Studio Code
プログラム言語を書く際に、IDE と呼ばれるエディターを使用することが一般的です。
ここでは、おそらく世界で最も使用率の高い IDE である Visual Studio Code（通称 VS Code）をインストールします。
VS Code をインストールする方法を確認します。
▼ インストールコマンド
$ brew install --cask visual-studio-code
▼ インストールされているか確認します
$ code -v
1.63.2
899d46d82c4c95423fb7e10e68eba52050e30ba3
arm64
mac のアプリケーションフォルダに VS Code があるはずなので、起動して色々触ってみてください。
VS Code の使い方はここでは割愛します。
番外編：rtx（asdf）
アプリケーションを開発している中で、データベースと連携したり、IaC ツールを使用したり、さまざまなツールを利用する場面が出てくると思います。
そういったツールを利用するための実行環境を一元管理するためのツールである rtx のインストール方法を紹介します。
（rtx のインストールは必須ではありませんが、非常に便利かつ高速なのでおすすめです）
rtx の GitHub リポジトリに行って、インストール方法を確認しましょう。
▼ インストールコマンド
$ brew install rtx
▼ 使用しているシェルが何か確認しておきます
$ echo $SHELL
/bin/zsh
▼ zsh 用の rtx をシェルにフックするコマンド
$ echo 'eval "$(~/bin/rtx activate zsh)"' >> ~/.zshrc
※ zsh 以外のシェルを使用している人は、そのシェルに対応するコマンドを叩いてください。
▼ インストールされているか確認
$ rtx -v
1.34.1 macos-arm64 (unknown 2023-07-14)
rtx の使い方
rtx は asdf というランタイムマネージャーの後継にあたる上位互換ツールです。
基本的には、asdf 向けに作成されたプラグインを rtx でインストールするという方法になります。
プラグインを探すときには「asdf 〇〇」と検索するとヒットします。
- asdf 向けプラグインをググる
- リポジトリの README でプラグイン名を確認する
- rtx でプラグインをインストールする
今回は rtx の使用例として、MySQL をインストールする手順を紹介します。
まずは、「asdf mysql」と検索します。
検索結果の一番上に「iroddis/asdf-mysql: A MySQL Plugin for asdf」という GitHub リポジトリが表示されているので、これを開きます。
README.md の始めに、
MySQL plugin for asdf version manager.
と書かれているので、asdf 向けの MySQL プラグインだということが確認できます。
それではこの irroddis/asdf-mysql を rtx でインストールしてみましょう。
rtx で asdf プラグインをインストールする方法を、rtx の GitHub リポジトリで確認します。
▼ rtx でプラグインをインストールするコマンド
$ rtx use --global <プラグイン名>
では次に、irroddis/asdf-mysql のプラグイン名を確認しましょう。
asdf plugin-add mysql asdf list-all mysql asdf install mysql [VERSION] asdf global mysql [VERSION]
と書かれているので、プラグイン名はmysqlだと確認できます。
▼ rtx で mysql プラグインをインストール
$ rtx use --global mysql
▼ インストールされているか確認
$ rtx ls
mysql 8.0.33 ~/.tool-versions latest
Discussion