TypeScript で Web アプリを作るための、開発環境構築手順です。
- Homebrew のインストール
- nodebrew のインストール
- bash-completion のインストール
- node.js/npm のインストール
- TypeScript のインストール
- Visual Studio Code のインストール
Homebrew のインストール
macOS 用のパッケージマネージャです。コマンドを実行するだけで、様々なソフトウェアのインストールや更新が行えます。
新規インストールの場合
公式サイトのトップページに載っているコマンドを、Terminal にコピペして実行します。
実行するコマンドは変わる可能性があるので、古いブログ記事などを見ずに、必ず公式サイトからコピーしましょう。
過去にインストール済みの場合
Homebrew 本体と、Homebrew でインストールした既存のパッケージを更新しておきます。
以前は、3 つのコマンドを順に実行する必要がありました。
$ brew update && brew upgrade && brew cleanup
最近のバージョンでは、1 つでよくなっているので、こちらを実行します。
$ brew upgrade --cleanup
※詳しくは下記の記事を参照してください。
状態の確認
brew doctor を実行して下記のメッセージが出れば、Homebrew は問題なく準備できています。
$ brew doctor Your system is ready to brew. $
警告やエラーが表示された場合は、メッセージの内容を読んで適宜対応します。
僕の場合、古いバージョンの Homebrew が入ったまま macOS をバージョンアップしたせいか、以下のようなエラーが出ていました。ただし、更新は問題なく行えて、それ以降、このエラーは出なくなりました。
$ brew doctor Error: Unrecognized Mach-O load command: 0x32 $
nodebrew のインストール
nodebrew は、node.js/npm のバージョンを切り替えるためのコマンドです。複数のバージョンをインストールしておいて、使うときにバージョンを切り替えることができます。
最近では、同様のコマンドである ndenv も使われているようです。こちらは、使うバージョンをプロジェクトごとに指定することができ、切り替えミスによるトラブルを避けることができます。
ただし ndenv を使う場合、他のソフトウェアとの連携をきちんと整えないと、指定したはずのバージョンとは違うものが使われてしまうことがあるようです。下記の記事では、Visual Studio Code での対応方法が説明されていました。
ここでは nodebrew を使うことにします。
インストール
以下のコマンドを実行します。
$ brew install nodebrew
nodebrew が使用するディレクトリを作成するため、nodebrew setup を実行します。
$ nodebrew setup Fetching nodebrew... Installed nodebrew in $HOME/.nodebrew ======================================== Export a path to nodebrew: export PATH=$HOME/.nodebrew/current/bin:$PATH ======================================== $
また、ホームディレクトリ (/Users/$USER) にある .bash_profile を vi などのテキストエディタで開きます。
先ほど nodebrew setup を実行したときに表示されていた以下の記述を、.bash_profile に追加して保存します。
export PATH=$HOME/.nodebrew/current/bin:$PATH
変更を反映するために、Terminal のウィンドウを開き直すか、以下のコマンドを実行します。
$ source ~/.bash_profile
bash-completion のインストール
bash-completion は、bash の入力補完機能を強化するソフトウェアで、インストールすると brew や npm といったコマンドのサブコマンドについても補完が効くようになります。
インストール
以下のコマンドを実行します。
$ brew install bash-completion
また、ホームディレクトリ (/Users/$USER) にある .bash_profile を vi などのテキストエディタで開き、以下の記述を追加して保存します。
[ -f /usr/local/etc/bash_completion ] && . /usr/local/etc/bash_completion
変更を反映するために、Terminal のウィンドウを開き直すか、以下のコマンドを実行します。
$ source ~/.bash_profile
node.js/npm のインストール
node.js は JavaScript (ECMAScript) でスタンドアロンアプリケーションを作るための実行環境です。Web アプリケーション開発に必要なわけではありませんが、node.js 用のパッケージマネージャである npm は、Web アプリケーションの開発にも使用されます。
npm 自体が node.js を使ったアプリケーションであることに加え、node.js をインストールすると npm もついてくるため、npm を使うためには node.js をインストールすることになります。
インストール
nodebrew から node.js/npm をインストールする場合、明示的にバージョンを指定するほかに、最新版や安定版を自動選択することができます。
最新版をインストールするには、以下のコマンドを実行します。
$ nodebrew install-binary latest
最新版ではなく、安定版をインストールするのであれば、以下のコマンドを実行します。
$ nodebrew install-binary stable
使用するバージョンの選択
インストールに成功したら、nodebrew use コマンドを使って、そのバージョンを使用するように切り替えます。
例えば、本稿執筆時点で最新版を選択したところ、v10.12.0 がインストールされたため、これを使うように以下のコマンドを実行します。
$ nodebrew use v10.12.0
バージョンの確認
node.js/npm の、インストールしてあるバージョンと、使用しているバージョンを確認するには、nodebrew ls コマンドを実行します。
$ nodebrew ls v10.12.0 current: v10.12.0 $
TypeScript のインストール
TypeScript は、JavaScript (ECMAScript) の代わりに開発に使えるように作られた代替言語、いわゆる AltJS のひとつです。
TypeScript の処理系は、npm のパッケージとしてインストールすることができます。
インストール
インストールするには、Terminal で以下のコマンドを実行します。npm でパッケージをインストールするとき、システム全体で使えるようにインストールするか、特定のプロジェクト専用にインストールするかを選べますが、ここでは -g オプションを付けて、システム全体で TypeScript が使えるようにインストールします。
$ npm install -g typescript
バージョンの確認
以下のコマンドで、バージョンを確認できます。
$ tsc -v Version 3.1.3 $
Visual Studio Code のインストール
Visual Studio Code は、高機能なテキストエディタです。統合開発環境の Visual Studio で高評価を得ているコード補完機能の IntelliSense や、デバッグ機能など、開発者向けの機能が充実しています。
インストール
インストールするには、上記の公式サイトから "Download for Mac" ボタンを押します。
VSCode-darwin-stable.zip のダウンロードが始まるので、終わるまで待って展開します。
中から "Visual Studio Code" のアプリが出てくるので、macOS の Finder でアプリケーションフォルダに移動すると、インストール完了となります。
起動
アプリケーションフォルダでダブルクリックするか、macOS の Launchpad で選択します。
表示の日本語化
デフォルトでは、Visual Studio Code の UI は英語で表示されます。日本語のリソースは、拡張機能として提供されているため、追加でインストールする必要があります。
Visual Studio Code のメニューから "View"→"Extensions" を選択し、"Japanese Language Pack for VS Code" をインストールします。
インストールが完了すると画面右下に、Visual Studio Code の再起動を促すメッセージが表示されるので、再起動します。
なお、ネット上の記事で、拡張機能のインストール後に、設定ファイル locale.json を修正する必要があるとされているものがありますが、Visual Studio Code を初めてインストールした場合は不要です。OS の言語設定に従って、自動的に Visual Studio Code の UI も言語が切り替わります。
