Webアプリの開発にはAngularをよく使っています。APIやバッチ処理などのサーバサイドのプログラムもTypeScriptで開発を行なっています。フロントからバックエンドまで1つのプログラミング言語で実装すると、人間の脳に優しん感じがしています。
nvmはnode.jsの複数バージョンを切り替えて利用できるツールになります。node.jsの公式サイトからダウンロード、インストールしても良いのですがプロジェクトによって使用するバージョンが違ったり、ターミナルなどから使うコマンドをグローバルにインストールする場合の扱いなどを考えるとnvmのようなツールを利用するのがおすすめです。
nvmと同じような機能を提供しているツールは他にも色々あるようですが、ずっとnvm使っていて特に困っていないのでnvmを今回もインストールします。
インストール方法はGitHubのページに書かれているコマンドを実行するだけです。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
Homebrewと同じようにシェルスクリプトをダウンロードして実行しています。
実行するとうまく動いているよう見えて、上手く設定できていないので気をつけましょう。
=> Profile not found. Tried ~/.bashrc, ~/.bash_profile, ~/.zshrc, and ~/.profile.
=> Create one of them and run this script again
OR
=> Append the following lines to the correct file yourself:
こんなメッセージが表示されてますね。シェルの設定ファイルがなくて設定が書き込まれていない状態です。
ひとまず .profileを作って再度実行しましょう。
touch .profile # 空の.profileファイルを作成
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
今度は上手く設定が書き込まれました。ターミナルを一度閉じて開き直すとnvmコマンドが使える状態になります。
と思ったら使えませんでした。
少し前ののMacOSから標準のシェルがbashからzshになっていて、.profileを読み込んでいないようです。
.profileの代わりに.zprofileを読み込むようになっているので、.profileの内容を.zprofileにコピーしてしまいます。
cat ~/.profile >> ~/.zprofile
これでターミナルを開き直せばnvmコマンドが使えるようになります。
nvmコマンドを使ってnode.jsのインストールを行います。このブログを書いている時点でのアクティブLTSはnode.js 16になっていますが、直近の開発でメインで使っている14系をインストールします。
インストールできるバージョンは nvm ls-remote で確認できます。基本的にLTSなバージョンしかインストールしないので–ltsオプションを付けるとLTSなバージョンだけがリストアップされるので確認しやすいです。
14系のバージョンにはfermiumというコード名がついているので次のコマンドでインストールできます。
nvm install lts/fermium
node.js 14ではM1Mac用のバイナリパッケージが用意されていなくて、ゴリゴリビルドし始めるのでしばらく待ちます。16からはM1Mac用のバイナリパッケージが提供されているようなので、サクッとインストールできるはずです。
インストールが終わったらnodeコマンドやnpmコマンドが使える状態になります。
実行時にはv14.18.1がインストールされていました。
node -v
v14.18.1
node.jsが使えるようになったので、Angular CLIのインストールなどしておきます。
Angularの開発環境構築は公式ドキュメントにも丁寧に書かれています。
npm installで@angular/cliをインストールするだけですね。
kat@MacMax ~ % npm install -g @angular/cli
/Users/kat/.nvm/versions/node/v14.18.1/bin/ng -> /Users/kat/.nvm/versions/node/v14.18.1/lib/node_modules/@angular/cli/bin/ng.js
> @angular/cli@13.0.2 postinstall /Users/kat/.nvm/versions/node/v14.18.1/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see https://angular.io/analytics. (y/N)
インストールを行なうと、Angularの開発チームに利用状況のデータなどを送っていいか質問があるので気分で答えてください。Angular CLIのインストールが終わるとngコマンドが使えるようになります。新しいプロジェクトを作って動かしてみて、問題なくインストールできていることを確認します。
ng new hello-angular
cd hello-angular
ng serve -o
ブラウザが開いて下のような画面が表示されたらバッチリです。
サーバサイドの開発にnest.jsを使う機会が多いのでnest.jsの環境も整えておきます。
（どうでもいいですが nest.jsとかnext.jsとなnuxt.jsとか名前紛らわしくて勘弁して欲しいです）
nest.jsもドキュメントがしっかりしているので、こちらの公式サイトに全て書かれています。
nest.jsのCLIをまずはインストールします。
npm i -g @nestjs/cli
インストールするとnestコマンドが使えるようになるので、新しいプロジェクトを作って動かしてみます。
cd ~/
nest new hello-app
cd hello-app
npm run start
ブラウザで http://localhost:3000/ を開くと Hello World! と表示されます。まごうことなき完璧なハローワールドです。
node.jsの実行環境はいい感じにできてきました。いざファイルを編集しようと思ったら、まだエディタをインストールしていませんでした。エディタはお好みの物を使えば良いと思いますが、みんな大好きVisual Studio Code (以下 VSCode)を愛用しています。
VSCodeはとっくの昔にM1 Macに対応しているので公式サイトからダウンロード、インストールするだけです。
ダウンロードが終わったらアプリケーションフォルダに移動させておきます。
セキュリティの確認ダイアログが表示されるので[開く]を押して開きます。
起動すると、日本語化をするダイアログが出るようになってました。以前はこんなの表示されていなかったのですが、とりあえず日本語化しておきますか。
初回起動時にターミナルなどから code コマンドでVSCodeが起動できるようPATHの設定を行うか聞かれるはずなんですが、今回はなぜか聞かれませんでした。PATHの設定をしておきます。
⌘+shift+P でコマンドパレットを開きて shell と入力すると候補が表示されます。
シェルコマンド:PATH内に ‘code’ コマンドをインストールしますを選ぶとPATHの設定が行えます。
あとはAngular開発で必須のAngular Language Serviceをインストールしておきます。
とりあえずAngularの開発はできる準備が整いました。
