![見出し画像](https://assets.st-note.com/production/uploads/images/71575208/rectangle_large_type_2_11cc71d9535c9b1c0bd71bf38fff4824.jpeg?width=1200)
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 のインストール
まず、インストール可能なディストリビューションを確認します。
![](https://assets.st-note.com/img/1644113102613-uCXxG8CLYF.png?width=1200)
オプション -l は、--list のようです。
![](https://assets.st-note.com/img/1644113311792-iwYyiYl3v1.png?width=1200)
kali-linux も気になりますが、Ubuntu-20.04(Ubuntu 20.04 LTS)をインストールすることにします。
![](https://assets.st-note.com/img/1644114632922-7DQN1fMVRA.png?width=1200)
再起動が必要なので、再起動します。
![](https://assets.st-note.com/img/1644122675131-WqyfHbuW1W.png?width=1200)
OSが再起動した直後、Ubuntuのターミナルが自動表示されて、default UNIX user account の入力を求められました。default UNIX user account と、パスワード(2回)を入力して、インストールを完了します。
![](https://assets.st-note.com/img/1644122959004-XoeQhfyOHL.png?width=1200)
画面の表示に従って、更新可能なモジュールを確認します。
![](https://assets.st-note.com/img/1644123491552-aKnAWKuAWG.png?width=1200)
sudo apt upgrade で、更新を実行します。
![](https://assets.st-note.com/img/1644123949574-QUSqcFnTvy.png?width=1200)
![](https://assets.st-note.com/img/1644124638450-PG2IBDHNai.png?width=1200)
バックアップできるらしい
インストール実行後にPC再起動して、Ubuntu のターミナルが起動したってことは、これ環境が保持されるってことでは?さらに、参考にしている@ITの記事の続きを読むと、wsl --export でWSL 実行イメージ内を tar ファイルに出力できるそうです。exportしたtarファイルからまるごと復元したり、tarコマンドで一部を取り出して反映したりできるとのこと。では、TypeScript が実行できる環境を作って実行の確認ができたら、バックアップファイルを作成して停止して、また再起動したときにどうなるか?を確認すればOKですね。もし、環境が復元できなかったら、バックアップから復元すれば良いわけです。
TypeScriptのための環境構築
まず、Node.js のインストールから。WSLへのインストールは、Microsoftの「Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする」に従ってやってみます。
![](https://assets.st-note.com/img/1644140393615-MEqHV1d4jp.png?width=1200)
nvm の最新は、v0.39.1 らしいので、最新をインストールしました。
![](https://assets.st-note.com/img/1644141008673-IR43NwWfIC.png?width=1200)
![](https://assets.st-note.com/img/1644141370776-bbYhiQuiQE.png)
一旦ターミナルを閉じて、開き直して、nvmのインストール状態と Node.js のバージョン確認(インストールされていないことの確認)って、これができるってことは、ターミナル閉じても環境が残っているってことですね。ばんざい。手順に従って、現在のバージョンと安定バージョンの両方の Node.js をインストールします。(nvm で切り替えて使うため)
![](https://assets.st-note.com/img/1644141621009-9xkgVpc7c5.png?width=1200)
![](https://assets.st-note.com/img/1644141722156-ncDCHNOj8X.png?width=1200)
![](https://assets.st-note.com/img/1644141852703-5Yv349lG0Q.png)
![](https://assets.st-note.com/img/1644142136596-re3YIazLR1.png)
Visual Studio Code(VS Code)との再会
続いて、Microsoft のインストール手順には、VS Codeのインストールがおすすめされていました。ふむふむ。
Visual Studio Code と Remote Development 拡張機能パックを併用することをお勧めします。
おすすめに従って、VS CodeとRemote Development 拡張パックをインストールすることにします。(Windows上のVS Codeで編集してWSL上で自動的にビルドされるそうです。すてき。)VS Code については、TypeScript Deep Dive の TypeScript入門&環境構築でもおすすめされているので、必須って感じですね。
![](https://assets.st-note.com/img/1644149491397-Qx5yt6KLSr.png?width=1200)
![](https://assets.st-note.com/img/1644149756961-GJP02Kgegc.png?width=1200)
![](https://assets.st-note.com/img/1644150447263-aj2MvrjcZE.png?width=1200)
最初、Microsoftの手順に「拡張機能画面がLOCALとWSL:Ubuntu と推奨の3つのペインに分かれている」と書かれているのに、WSL拡張パックをインストール後に再起動したVS Codeの拡張機能画面にはWSLペインが表示されていませんでした。よく見ると、拡張機能アイコンの下に「リモートエクスポローラー」というアイコンがあり、こちらをクリックすると新しい画面が表示されて、そちらで拡張機能をクリックすると、WSL:Ubuntuペインが表示されました。これで、WSL側に Node.js 拡張パックのインストールができました。
WSL へ Git をインストール
Linux 用 Windows サブシステムで Git の使用を開始するの手順に従って、WSL に、Gitをインストールします。
![](https://assets.st-note.com/img/1644151196168-71RahOEfxu.png?width=1200)
gitのユーザーとメールアドレスを設定して、ついでにGithubの2要素認証も設定してしまいました。よき。
![](https://assets.st-note.com/img/1644153848163-M24Wzn7ORo.png?width=1200)
Git Credential Manager のセットアップ
そうそう、AWS Amplifyでアプリをホストするときにも、認証情報の設定をしたんでした。こちらも、資格情報マネージャを利用して再ログインなしで資格マネージャのトークンを使ってプッシュしたりできるようにします。
![](https://assets.st-note.com/img/1644154599930-nOg2hIfPFk.png?width=1200)
TypeScript のインストール
やっと、ここまで来ました。TypeScript Deep Dive の環境構築に従って、ターミナルで npm install -g typescript@next とインストールします。
![](https://assets.st-note.com/img/1644154876132-CNfUGCqJJ4.png?width=1200)
![](https://assets.st-note.com/img/1644155196019-uJL3AuHYt7.png)
ああ、ここまで長かった!今週はここまで!続きは、また次の週末の予定です。次回は、チュートリアル課題にチャレンジしたいなぁ!
この記事が気に入ったらサポートをしてみませんか?