見出し画像

TypeScript 入門の記録(2)「はじめまして」の前に(2)

前回は、「TypeScript って何者なの?」を調べて終わったのですが、別件でWindows Subsystem for Linux(WSL)が使えるようにならないといけなさそうな状況が発生したので、AWS とは離れて、Windows11+WSL2というローカル環境上で TypeScript の学習をすることにします。

WSL の環境構築をしよう

自宅ではWindows11、職場ではWindows10を使用しているのですが、WSLを使えば、Windows上でLinux環境を作って、EC2上で作成実行していたのと同じことができるわけです。ちょうどよいタイミングで@ITに「Windows 10/11でLinux環境「WSL」を始める第一歩」という記事が公開されていたので、これを参考に自宅のWindows 11にWSL2(Ubuntu)をインストールします。と、ここで、気になる点が1つ。EC2は停止後、また開始すれば前回の環境を引き続き使用できますが、WSL は終了後も実行中の環境は保持できるのかしら?もし保持できないのであれば、実行環境を退避しておいて再ロードする必要があります。このあたり、コンテナで解決できるのかも?とか予想を立てつつ、いろいろ試していきます。(TypeScriptの入門前に、いったいどんだけ準備を盛り込んでいるのか…滝汗)

WLS のインストール

まず、インストール可能なディストリビューションを確認します。

あら、オプション指定が違うみたい

オプション -l は、--list のようです。

インストール可能なディストリビューションが表示できた!

kali-linux も気になりますが、Ubuntu-20.04(Ubuntu 20.04 LTS)をインストールすることにします。

Ubuntu-20.04をインストール

再起動が必要なので、再起動します。

再起動したらUbuntuのターミナルが自動起動した

OSが再起動した直後、Ubuntuのターミナルが自動表示されて、default UNIX user account の入力を求められました。default UNIX user account と、パスワード(2回)を入力して、インストールを完了します。

インストール完了


画面の表示に従って、更新可能なモジュールを確認します。

更新可能なモジュールのリストが表示されました

sudo apt upgrade で、更新を実行します。

次々に更新されていきます
更新完了!

バックアップできるらしい

インストール実行後にPC再起動して、Ubuntu のターミナルが起動したってことは、これ環境が保持されるってことでは?さらに、参考にしている@ITの記事の続きを読むと、wsl --export でWSL 実行イメージ内を tar ファイルに出力できるそうです。exportしたtarファイルからまるごと復元したり、tarコマンドで一部を取り出して反映したりできるとのこと。では、TypeScript が実行できる環境を作って実行の確認ができたら、バックアップファイルを作成して停止して、また再起動したときにどうなるか?を確認すればOKですね。もし、環境が復元できなかったら、バックアップから復元すれば良いわけです。

TypeScriptのための環境構築

まず、Node.js のインストールから。WSLへのインストールは、Microsoftの「Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする」に従ってやってみます。

cURLのインストール

nvm の最新は、v0.39.1 らしいので、最新をインストールしました。

nvm(v0.39.1)のインストール


nvmあり、Node.jsなし

一旦ターミナルを閉じて、開き直して、nvmのインストール状態と Node.js のバージョン確認(インストールされていないことの確認)って、これができるってことは、ターミナル閉じても環境が残っているってことですね。ばんざい。手順に従って、現在のバージョンと安定バージョンの両方の Node.js をインストールします。(nvm で切り替えて使うため)

Node.js安定版のインストール
Node.js最新版のインストール
Node.jsのバージョン確認(安定版と最新版)
Node.jsとnpmのバージョン確認

Visual Studio Code(VS Code)との再会

続いて、Microsoft のインストール手順には、VS Codeのインストールがおすすめされていました。ふむふむ。

Visual Studio Code と Remote Development 拡張機能パックを併用することをお勧めします。

Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする

おすすめに従って、VS CodeとRemote Development 拡張パックをインストールすることにします。(Windows上のVS Codeで編集してWSL上で自動的にビルドされるそうです。すてき。)VS Code については、TypeScript Deep Dive の TypeScript入門&環境構築でもおすすめされているので、必須って感じですね。

VS Codeのインストール
Remote - WSL 拡張機能のインストール
WSL側にNode.js拡張パックのインストール

最初、Microsoftの手順に「拡張機能画面がLOCALとWSL:Ubuntu と推奨の3つのペインに分かれている」と書かれているのに、WSL拡張パックをインストール後に再起動したVS Codeの拡張機能画面にはWSLペインが表示されていませんでした。よく見ると、拡張機能アイコンの下に「リモートエクスポローラー」というアイコンがあり、こちらをクリックすると新しい画面が表示されて、そちらで拡張機能をクリックすると、WSL:Ubuntuペインが表示されました。これで、WSL側に Node.js 拡張パックのインストールができました。

WSL へ Git をインストール

Linux 用 Windows サブシステムで Git の使用を開始するの手順に従って、WSL に、Gitをインストールします。

ディストリビューションにすでに含まれてた

gitのユーザーとメールアドレスを設定して、ついでにGithubの2要素認証も設定してしまいました。よき。

これで安心感Up

Git Credential Manager のセットアップ

そうそう、AWS Amplifyでアプリをホストするときにも、認証情報の設定をしたんでした。こちらも、資格情報マネージャを利用して再ログインなしで資格マネージャのトークンを使ってプッシュしたりできるようにします。

gitの設定

TypeScript のインストール

やっと、ここまで来ました。TypeScript Deep Dive の環境構築に従って、ターミナルで npm install -g typescript@next とインストールします。

TypeScriptをインストールしたらnpmも更新が必要でした


tscコマンドのバージョン確認

ああ、ここまで長かった!今週はここまで!続きは、また次の週末の予定です。次回は、チュートリアル課題にチャレンジしたいなぁ!


この記事が気に入ったらサポートをしてみませんか?