[備忘録] MacBook(M1)にTypeScriptの実行環境を作ってみた

ことの発端はクラメソさんの下記記事。自分でもやってみよ〜と思ったら、ソースコードが「.gs」ではなくて「.ts」だったので（記事内にも、開発言語：Google Apps Script（TypeScript）との記載あり）、TypeScriptとはなんぞやと思い調べてみました。

くらめその情シス：Slackから取得した情報で情シス業務を数値化してみた | DevelopersIO

・TypeScriptとは

TypeScriptは、JavaScriptを拡張して作られたプログラミング言語（Javaよりも短く分かりやすいコードが書ける）。

TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されるため、JavaScriptファイルが実行できる環境ならすぐに使えて、JavaScriptライブラリもTypeScriptから使用できるなど、互換性の高さが特徴。

Javaの環境は入れてないしJavaは触ったことがあるので、初めてのTypeScriptを触ってみようと、TypeScriptの環境を入れてみることにしました！

他にもGASでコードを共有できる「google/clasp」というのがTypeScriptのサポートを開始したとのことも理由の一つです。

※2021.5.21現在：もしかしたらclasp、M1にはまだ対応されていないかも？インストールしようとしたら脆弱性のメッセージが消えなかったので、claspインストールはちょっと保留中

・claspとは

Googleドライブ上のGASプロジェクトを操作できるCLIツール（CLI（コマンドインターフェース）：文字列で操作するコマンドプロンプトとか（コマンドプロンプトはWindows専用CLIツール））。以前はWebエディタ上でしかコードを書けなかったのが、自分の使い慣れたエディタ上で書けるようになった。

SVNやGithubみたいにソース管理ができるため、複数人での開発もしやすい。

それではTypeScriptを使えるように環境構築していきましょう！

TypeScriptをインストールするためにはnpmが必要。

TypeScriptファイルはJavaScriptに変換された上で実行されるため、まずはJavaScriptが実行できる環境を整える。今回はJavaScriptをデスクトップで使用できる「Node.js」というプラットフォームを使用。Node.jsをインストールすると、パッケージ管理ツールのnpm（Node Package Manager）も自動的にインストールされる。

参考：TypeScriptを入門者向けに解説！JavaScriptとの違い…｜Udemy メディア

1. 「homebrew」をインストール

・homebrewとは

Macのパッケージ管理ツール。何かをインストールしようとした際の、「ファイルをDLして、それを実行して、他にも必要なものをインストールして…」等の一連の作業をコマンド1行で一発で自動的に行ってくれる。

※パッケージ：実行ファイルや設定ファイル、ライブラリ等を一つのファイルとしてまとめているもの。

私のMacはM1チップなので、下記M1用のHomebrewをインストールします。

　※PC情報

　 OS：macOS Big Sur

　 Ver. 11.3.1

　メモリ：8GB

インストールコマンド掲載サイト：The Missing Package Manager for macOS (or Linux) — Homebrew

①ターミナルを開いて、赤枠内の「/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"」をコピペしてエンター。

f:id:totin_3:20210518135508p:plain

②PWを求められるので、入力してエンターすると「This script will install:」とインストールが始まる。途中「Press RETURN to continue or any other key to abort」と表示されるので、エンターをクリックすると処理が続く。

f:id:totin_3:20210518145434p:plain

③途中Warningが出るが、インストールは完了する。

その後パスを追加しないといけないので、「echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザー名/.zprofile」を入力して追加する。

f:id:totin_3:20210518153022p:plain

④続いて「eval "$(/opt/homebrew/bin/brew shellenv)"」と入力して実行すると、無事「brew help」も「brew --version」も使えることが確認できる（「--version」は「-v」でも可）。

f:id:totin_3:20210518185359p:plain

f:id:totin_3:20210520131053p:plain

※余談※

最初、④の「eval "$(/opt/homebrew/bin/brew shellenv)"」をすっかり見逃しており、③の「echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザー名/.zprofile」実行後すぐに「brew help」を入力して実行してしまい、そんなコマンドないよとエラーになってしまいました。

うまくパスが追加できなかったのかと思い、lsコマンドで「.zprofile」の場所を調べたら、ちゃんと「echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザー名/.zprofile」で指定した通り「/Users/ユーザー名/.zprofile」にあるし、更にcatコマンドで「.zprofile」の中身も確認してみましたがちゃんと「eval "$(/opt/homebrew/bin/brew shellenv)"」って書いてありました…

f:id:totin_3:20210518182257p:plain

色々調べた結果、、、

・zprofileとは

ログインシェルの場合に１度だけ読み込まれる。

参考：zshの設定ファイルの読み込み順序と使い方Tipsまとめ - Qiita

・ログインシェルとは

ログインして最初に動くシェルのこと。

参考：https://wa3.i-3-i.info/word11274.html

今までの一連の処理は、一番初めに立ち上げたターミナル上で行っていたので、これがログインシェルということになり、もう一つターミナルを立ち上げた先で「brew help」を実行すると、無事「brew help」も「brew --version」も使えるようになっていました！

※「Command + N」で新規ターミナル起動可

かなり道草食いましたが、一つ勉強になりました^^;

2. Node.jsをインストールする

①nodebrewをインストール。「brew install nodebrew」を入力して実行。

　※現在の最新Ver.はこちら→nodebrew — Homebrew Formulae

f:id:totin_3:20210518215412p:plain

※Ver.を確認したい場合は「nodebrew --version」を入力して実行（「--version」は「-v」でも可）。

f:id:totin_3:20210518220113p:plain

3. Node.jsをインストール

①nodebrewでインストールする。

今回の場合、個人でお試し開発したいだけなので安定版をインストールするため、「nodebrew install-binary stable」を入力して実行、、、ところが…エラーになってしまいました。「nodebrew setup」を実行してから、再度行うと無事インストール完了。

※参考：MacにNode.jsをインストール - Qiita

f:id:totin_3:20210518224442p:plain

※余談※

「stable」で安定版をインストールしたはずですが、インストールされたVer.は「v16.1.0」となっています。下記サイトでは、最新版が「16.1.0」で、推奨版（安定版）が「14.17.0」となっているのですが…

※参考：Node.js

f:id:totin_3:20210518230228p:plain

念の為、「14.17.0」もインストールしておこう（インストールしたVer.は切り替え可能）と思い、「nodebrew install v14.17.0」を入力して実行してみましたが、エラーになりました。下記色々試してみましたがダメでした…

・インストール可能なVer.一覧表から「v14.17.0」をコピペして使用

　※「nodebrew ls-remote」で一覧表示可
・入力コマンドを変えてみた（「nodebrew install v14.17.0」、「nodebrew install-binary v14.17.0」、「v14.17.0」の「v」無し）

・「curl -L git.io/nodebrew | perl - setup」でnodebrewを再インストール

　※既にnodebrewはVer.1.1.0（最新）

・「nodebrew selfupdate」でnodebrewのVer.をアップデート

　※既にHomebrewはVer.3.1.7（最新）

・macOS Catalina 10.15.7では問題なくインストール可

・他のVer.（v16.0.1の1つ前のv16.0.0はインストール可、v14.17.0の1つ前のv14.16.1は不可）

f:id:totin_3:20210518233657p:plain

ちなみに、CatalinaのMacでは、wgetコマンドでnodebrewをインストールしていたので、「wget」と「curl」の違いかなとも思い、「brew install wget」でインストール後再度「nodebrew install v14.17.0」をしてもダメでした。

※参考：Macでwgetコマンドを使ってみるメモ - Qiita

そもそも、「Can not fetch: https://nodejs.org/dist/v14.17.0/node-v14.17.0-darwin-arm64.tar.gz」で表示されているURLは有効なのかcurlコマンドでヘッダ情報「curl -I "https://nodejs.org/dist/v14.17.0/node-v14.17.0-darwin-arm64.tar.gz"

」で調べたところ、、、404エラー（Not found）になっていました^^;

今更ながら「nodejs m1 support」で調べてみると、M1はv16.0.0から対応されたようですね。もっと早くに調べていればよかったです…またもや道草…

※参考：Apple M1サポートのNode.js v16.0.0がリリース | TECH+

f:id:totin_3:20210519005631p:plain

②nodeを有効化する。

「①」の段階では、「v16.1.0」がインストールされたけど「current: none」になっていて有効化されていないので、「nodebrew use v16.1.0」で、インストールしたVer.を有効化する。

f:id:totin_3:20210519182650p:plain

③最後に、「echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

」で環境パスを通して、念の為catコマンドで.zprofileの中に追記されていることを確認して、ターミナルを立ち上げ直して「node -v」を実行して有効化した「v16.1.0」が表示されれば成功。

f:id:totin_3:20210519183736p:plain

f:id:totin_3:20210519184338p:plain

4. Typescriptをインストール

①「npm install -g typescript」を入力して実行する。「新しいnpm Ver. 7.13.0が使えるようになった」とのアナウンスとインストールコマンドが表示されましたが、肝心のTypescriptについての説明が何もなかったので、「tsc -v」でTypescriptのVer.を確認すると無事「Version 4.2.4」がインストールされたようです。

ちなみに、私のNode.jsはVer.16.1.0なので、npmのVer.は7.11.2のままにしておきました（npm help nmpコマンドで、現在のnpmのVer.確認可）。

※参考：リリース一覧 | Node.js

f:id:totin_3:20210519193535p:plain