Posted on

by

in

M1 MacbookのWeb開発環境

ng new myapp ちょっと時間が開いてしまいましたが、開発環境の整備をしていこうと思います。

Web開発にはプロジェクトによって色々なプログラミング言語を使ったりしていますが、ここ最近一番多い構成はAngular / node.js / TypeScript な構成です。エディタにはVisual Studio Codeを使っています。

Node.jsのインストール

v15からARM64に対応しているそうなので、v15をインストール。node.jsのバージョン管理には以前からnvmを使用しているので、まずはnvmをインストール。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

xcodeをまだ動かしていなかったのでライセンスの確認をするようにメッセージが表示される。

You have not agreed to the Xcode license agreements, please run ‘sudo xcodebuild -license’ from within a Terminal window to review and agree to the Xcode license agreements.

Failed to clone nvm repo. Please report this!


エラーメッセージの通り sudo xcodebuild –license を実行してライセンスを確認して agree と入力。

もう一度 nvmのインストールスクリプトを実行。


すると今度はシェルの設定ファイルがないから、ファイルを作って再度スクリプトを実行するか、設定ファイルに追記しろってメッセージが表示される。


=> 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:

touch ~/.zshrc を実行して再度nvmのインストールスクリプトを実行して無事にインストールできました。

開いているターミナルではパスが通っていないので、一旦ターミナルを立ち上げ直して、nvmコマンドが使えることを確認したら

nvm install v15

を実行してnodejs v15のインストールを行います。バイナリファイルがないようで、ソースコードからビルドを行うので少々時間がかかります。

Visual Studio Codeのインストール

Visual Studio Codeのリリース版ではまだARM64版は提供されていませんが、ベータ版的な位置付けのInsider BuildでARM64版が提供されているのでこちらをインストールしてみます。

https://code.visualstudio.com/insiders/

ARM64版をダウンロードしたら、zipファイルを展開してアプリケーションフォルダにコピーするだけですね。

Insider版はアイコンの色がちょっと違う

まあ、普通に使えてますね。

Angularを動かしてみる

とりあえずnodeとエディタの準備ができたので、angularを動かしてみる。

npm install g @angular/cli ng new myapp cd my-app npm install ng serve

はい、何事も問題なく動きますね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です