/ut-lecture-2023

Primary LanguageTypeScript

U-Tokyo Lecture 2023

受講者へ。次の講義までに、環境構築とサンプルコードの実行を事前に行ってください。

環境構築

Node.js v18 がインストールされている環境を準備します（最新の LTS (Long Term Support) は v20 ですが、現時点ではまだ日が浅いため、v18 を使用します）。

ここでは、macOS と Windows を想定して、構築手順を説明します。NVM (Node Version Manager) 経由で Node.js v18 をインストールし、NPM (Node Package Manager) 経由で Yarn をインストールする手順です。すでに Node.js v18 がインストールされている場合は、このステップを飛ばしてください。

NVM のインストール

macOS

  1. NVM をインストールします。公式ドキュメントを参照するか、次の手順に従ってください。すでにインストールされている場合は、このステップを飛ばしてください。

    1. Terminal.app を開き、次のいずれかのコマンドを実行します。

      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

      もし、command not found: curl と表示される場合は、次のコマンドを実行します。

      wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Windows

  1. Windows PowerShell をインストールします。公式ドキュメントを参照するか、次の手順に従ってください。すでにインストールされている場合は、このステップを飛ばしてください。

    1. Windows PowerShell 7.4 インストーラーをダウンロードします。
    2. インストーラーを開き、画面に表示される手順に従ってインストールを完了します。

  2. NVM をインストールします。公式ドキュメントを参照するか、次の手順に従ってください。すでにインストールされている場合は、このステップを飛ばしてください。

    1. NVM インストーラーをダウンロードします。
    2. インストーラーを開き、画面に表示される手順に従ってインストールを完了します。

Node.js のインストール

macOS

  1. Terminal.app を開き、次のコマンドを実行して、Node.js v18 をインストールします。

    nvm install lts/hydrogen

  2. さらに次のコマンドを実行して、正しくインストールされたか確認します。

    nvm use lts/hydrogen

    Now using node v18.19.0 (npm v10.2.3) というメッセージが表示されれば OK です。

  3. 念のため、次のコマンドも実行します。

    node -v
npm -v

    表示されるバージョンが、2. で表示されたバージョンと一致していれば OK です。

Windows

  1. PowerShell を開き、次のコマンドを実行して、Node.js v18 をインストールします。

    nvm install hydrogen

  2. さらに次のコマンドを実行して、正しくインストールされたか確認します。

    nvm use hydrogen

    Now using node v18.19.0 (64-bit) というメッセージが表示されれば OK です。

  3. 念のため、次のコマンドも実行します。

    node -v
npm -v

    表示されるバージョンが、2. で表示されたバージョンと一致していれば OK です。

Yarn のインストール

  1. Terminal.app か PowerShell を開き、次のコマンドを実行して、Yarn をインストールします。

    npm install --global yarn

  2. さらに次のコマンドを実行して、正しくインストールされたか確認します。

    yarn -v

    何かしらのバージョンが表示されれば OK です。

サンプルコードの実行

  1. このリポジトリをクローンします。もしクローンする方法がわからない場合は、ここから Zip を直接ダウンロードし、適当な場所に展開してください。

  2. Terminal.app か PowerShell を開き、クローンした場所、あるいは Zip を展開した場所へ cd し、yarn を実行します。

    cd ut-lecture-2023
yarn

    しばらく経った後に、Done with warnings in Xs XXXms と表示されれば OK です。

  3. さらに、次のコマンドを実行し、Three.js のサンプルコードを実行します。

    yarn nx serve three

  4. ウェブブラウザで http://0.0.0.0:4200 を開き、PLATEAU 3D 都市モデルが表示されれば OK です。