JavaScript/TypeScriptを使った開発プロジェクトを始めていくために、必要な開発環境の構築の流れを細く資料として作成したものです
JavaScript/TypeScriptの開発環境を構築してみよう(実行環境 編)日本仮想化技術株式会社VirtualTech.jp2023/02/241
View Slide
概要2
● Webブラウザ上で動作するプログラム言語の1つ● クライアントサイドのWeb開発に広く使用されている● JavaScriptは、HTMLやCSSと組み合わせてWebページを動的に操作し、ユーザーのインタラクション1を処理することができる● 1995年にNetscape Communicationsによって最初に開発された● Node.js2を使ってJavaScriptでWebアプリケーションのバックエンドを構築することもできる[1] インタラクションとは、ユーザーがWebページ上で操作を行った際に、Webページがその操作に応じて反応することを指す[2] Node.jsとは、サーバーサイドのJavaScriptランタイム3JavaScriptとは
● 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
スクリプトでまとめて実行する方法13https://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