JavaScript/TypeScriptの 開発環境を構築してみよう (実行環境 編) 日本仮想化技術株式会社 VirtualTech.jp 2023/02/24 1

概要 2

● Webブラウザ上で動作するプログラム言語の1つ ● クライアントサイドのWeb開発に広く使用されている ● JavaScriptは、HTMLやCSSと組み合わせてWebページを動的に操作し、ユーザーのインタラク ション1を処理することができる ● 1995年にNetscape Communicationsによって最初に開発された ● Node.js2を使ってJavaScriptでWebアプリケーションのバックエンドを構築することもできる [1] インタラクションとは、ユーザーがWebページ上で操作を行った際に、Webページがその操作に応じて反応することを指す [2] Node.jsとは、サーバーサイドのJavaScriptランタイム 3 JavaScriptとは

● Microsoftが開発したオープンソースのプログラミング言語 ● JavaScriptのスーパーセット1となる言語 ● JavaScriptの構文に加えて、型アノテーションやクラス、インターフェース、ジェネリック型な どの機能をサポート ● 大規模なアプリケーションの開発のために設計 主な特徴： ● 静的型付けによる安全性の向上 ● JavaScriptとの互換性 ● 開発元が同じなのでVS Code2との相性がいい [1] スーパーセットとは、ある言語が別の言語の構文や機能を取り込んで、それに加えて独自の機能を持っている言語のこと [2] Visual Studio Codeの略 TypeScriptとは 4

実行環境構築 5

Mac編 6

● HomeBrewを使用してanyenvをインストール ● anyenvを使用してnodenvコマンドをインストール ● nodenvを使用してnodeコマンドをインストール ● 各種アップデート 手順 7

aynenvをインストール： ● 『brew install anyenv』 anyenvを初期化： ● 『anyenv init』 ● コマンド上に表示された「eval ~~」の部分を設定ファイル1に追加 ○ 『vi ~/.zshrc』 ● 設定ファイルの変更内容を反映 ○ 『source ~/.zshrc』 anyenvインストールの初期化： ● 『anyenv install --init』 ○ 質問が表示されたら『y』と入力 [1] macOSが標準としているzshを使用することを前提にしています HomeBrewでanyenvをインストール 8

nodenvのインストール nodenvをインストール： ● 『anyenv install nodenv』 ● シェルの再起動 ○ 『exec $SHELL -l』 9

インストール可能なバージョンを確認： ● 『nodenv install -l』 バージョンを指定してインストール： ● 『nodenv install {{バージョン}}』 ○ {{バージョン}}は、一覧で確認した任意のバージョンをインストール ○ 公式サイトに表示されているLTS版のインストールを推奨 グローバルで設定する場合： ● ローカルとグローバルのいずれかのスコープで設定することが可能 ● すべてのワークスペースで同じ設定が作用するようにグローバルに設定 ● 『nodenv global {{バージョン}}』 ローカルで設定する場合： ● 設定したいワークスペースに移動 ● 『nodenv local {{バージョン}}』 nodeをインストール 10

nodeコマンドの確認： ● 『node -v』 npmコマンドの動作確認： ● 『npm -v』 nodeのインストール確認 11

anyenvをアップデート： ● 『brew upgrade anyenv』 **envをアップデート： ● 『anyenv install --update』 nodeをアップデート： ● 『nodenv install {{新しいバージョン}}』 ● 『nodenv global {{新しいバージョン}}』 各種アップデート 12

スクリプトでまとめて実行する方法 13 https://gist.github.com/ismt7/82674e3db1927d6f80e056d324f9fc42

Windows編 14

手順 Windowsに開発環境を構築する方法は主に次の方法があります。 1. Windowsにインストールする場合 2. Linux用Windowsサブシステムにインストールする場合(準備中) 15

Windowsにインストール編 16

17

18

19

20

21

22

23

nvmコマンドについて 次のコマンドを上から順に実行してください ● 「nvm -h」： ○ CLIツールのヘルプが表示されたら正常にインストールができています ○ コマンドが認識されていない場合、ターミナルの再起動することで解決する時があります ● 「nvm list available」： ○ インストール可能なバージョンを確認します ○ LTSの列に表示されている1番上に表示されているバージョンを後で使用します ● 「nvm install {{バージョン}}」： ○ 前の手順で確認したバージョンを指定してNode.jsをインストールします ○ インストールしただけでは、nodeコマンドは使用できません ● 「nvm use {{バージョン}}」： ○ インストールしたバージョンを指定して有効化します ○ このコマンドを実行することでnodeコマンドが使用できるようになります ● 「nvm current」： ○ 現在有効化されているnodeコマンドのバージョンが表示されます 24

nodeコマンド ● 「node -v」： ○ nodeコマンドのバージョンを確認することができます ○ この操作は、一般的にCLIツールが正常に動作しているかを確認するために実行します ● 「npm -v」： ○ npmコマンドのバージョンを確認することができます ○ 上のコマンドと同様にCLIツールが正常に動作しているかを確認するために実行します 25

おわり 26