# Nodejs

ServBayを使用してNodejsの複数バージョンを管理することは非常に簡単です。これをNodejs 22をインストールすることで説明します。

# Nodejs 22をインストールする

左側のサイドバーで「サービス」をクリックしていただくと、ServBayが提供する複数のNodejsバージョンを見ることができます。

Nodejs 22をインストール

Nodejs 22が配置されている行を見つけて、右側の緑色のダウンロードボタンをクリックしてください。そうすると、Nodejs 22は数秒でダウンロードおよびインストールされます。

# yarnとpnpmのインストール

Nodejs 22がインストールされた後、それを確認しましょう:

Nodejs 22バージョン

ターミナルの出力から、Nodejs 22がインストールされたことがわかります。

それでは、corepackを経由してyarnとpnpmをインストールしましょう:

$ corepack enable yarn
$ yarn -v
1.22.22
$ corepack enable pnpm
$ pnpm -v
9.1.0
1
2
3
4
5
6

私たちはyarnとpnpmがインストールされていることがわかります。

# Vue 3 例

Nodejsとyarn/pnpmがインストールされた後、フロントエンドの開発を始めることができます。次に、例としてVue 3を使用します。

# Vue 3 スキャフォールド

まず、Vue 3のスキャフォールドを実行してVue 3プロジェクトを生成しましょう。

Vue 3 スキャフォールド

# yarnによるdepsのインストール

次にプロジェクトディレクトリに移動します:

$ cd hello
1

依存パッケージをインストールするには yarn を実行します:

Yarnが依存関係をインストール

# 開発サーバーを起動する

次に、ローカル開発サーバーを起動するために yarn dev を実行します。

$ yarn dev
1

サーバーが正常に起動した後、以下の情報が表示されます:

Yarn Devの情報

この時点で、ブラウザでhttp://localhost:5173にアクセスすれば、Vue 3 によって生成されたデフォルトのホームページが表示されます。

Vue 3 デフォルトホームページ

# ソースコードを編集する

それでは、「You did it!」を「Hello, World!」に変更して、何が起こるか見てみましょう:

Vue 3 ハローワールドソースコード

コードを修正した後、Vue 3はページを自動的に更新しますので、修正したウェブサイトのホームページを見ることができます:

Vue 3 ハローワールドページ

これで、nodejsを使用したフロントエンド開発を行う準備ができました。

Last Updated: 5/12/2024