JavaScript/TypeScriptの開発環境を構築してみよう(実行環境 編)

JavaScript/TypeScriptを使った開発プロジェクトを始めていくために、必要な開発環境の構築の流れを細く資料として作成したものです

Transcript

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

   View Slide

2. 概要
   2
   

   View Slide

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

   View Slide

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

   View Slide

5. 実行環境構築
   5
   

   View Slide

6. Mac編
   6
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. Windows編
    14
    

    View Slide

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

    View Slide

16. Windowsにインストール編
    16
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

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

    View Slide

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

    View Slide

26. おわり
    26
    

    View Slide