CodeSandboxにNuxt3の開発環境を構築する（テンプレートを使わずに）

## 目的
* お手軽にNuxt3の開発環境を構築したい
* ローカル環境を汚さずに、CodeSandboxというクラウドでのWebアプリケーション開発環境を利用して、手軽にNuxt3のサンプルを共有したい。
* CodeSandboxにはNuxt3用にテンプレートが利用できるが、環境構築がブラックボックス化されているため、NodeJS環境からの構築を確認したい。

## CodeSandboxについて
* https://codesandbox.io/
* クラウド環境に、Vue、React、Angular等のWebアプリケーション開発環境を構築できる。
    * チーム内でのサンプルコードの共有が容易
    * ローカル環境に依存しない
* GitHubとの連携が可能
    * ローカル環境への移行が容易

## Nuxt3開発環境構築手順
### Vanilla環境の構築
* NodeJS環境から理解するため、Vanillaテンプレートから環境を構築する。
        
1. CodeSandboxから「New sandbox」を押下
![new_sandbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282300/ac1f1b20-0bae-9e0a-e4e5-f48218201ba2.png)


2. 「Vanilla」を選択すると、以下の初期画面となる。
![new_vanilla.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282300/4d5bab8b-65f1-6036-c38a-ea7fb644e025.png)

3. 「Terminal」を選択する。terminalを利用するには、「Browser Sandbox」から「Cloud Sandbox」にupdateが必要(Freeのまま利用可能)とのことなので、「Yes, convert」を押下。
![terminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282300/2295d056-1b20-ac28-f561-742fe3c053e4.png)


4. 右上部の「+」をクリックし、「New Terminal」を選択すると、新規terminalが起動する。

![new_terminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282300/78f2330e-4c87-d680-7b1a-69c0ba5e0118.png)

![new_terminal2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282300/c45bba20-2386-34ce-575c-c6ad854303dc.png)
5. terminalで、既定の開発環境を確認する。(2023/04/17現在)

        ➜  workspace git:(master) ✗ node --version
        v16.17.0
        ➜  workspace git:(master) ✗ npm --version
        8.15.0
        ➜  workspace git:(master) ✗ yarn --version
        1.22.19

### Nuxt3環境の構築
* 後は、[Nuxt3のスタートアップ](https://nuxt.com/docs/getting-started/installation)をterminalで実行していくだけ。
1. nuxt3appというアプリケーションを作成する。

        ➜  workspace git:(master) ✗ npx nuxi init nuxt3app
        Need to install the following packages:
        nuxi@3.4.1
        Ok to proceed? (y) y
        [4:35:36 AM] Nuxi 3.4.1
        [4:35:37 AM] ✨ Nuxt project is created with v3 template. Next steps:
        [4:35:37 AM]  › cd nuxt3app
        [4:35:37 AM]  › Install dependencies with npm install or yarn install or pnpm install
        [4:35:37 AM]  › Start development server with npm run dev or yarn dev or pnpm run dev
        npm notice 
        npm notice New major version of npm available! 8.15.0 -> 9.6.4
        npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.4
        npm notice Run npm install -g npm@9.6.4 to update!
        npm notice 

2. アプリケーションフォルダに移動し、npm installを実行

        ➜  nuxt3app git:(master) ✗ npm install
        npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

        > postinstall
        > nuxt prepare

        Nuxi 3.4.1                                                                                      4:39:02 AM
        ✔ Types generated in .nuxt                                                                      4:39:03 AM

        added 621 packages, and audited 622 packages in 54s

        104 packages are looking for funding
        run `npm fund` for details

        found 0 vulnerabilities
3. devモードでアプリケーション起動

        > npm run dev

        Nuxi 3.4.1                                                                                      4:44:29 AM
        Nuxt 3.4.1 with Nitro 2.3.3                                                                     4:44:29 AM
                                                                                                        4:44:30 AM
        > Local:    http://localhost:3000/ 
        > Network:  http://192.168.241.2:3000/

        ℹ Vite client warmed up in 1785ms                                                               4:44:33 AM
        ✔ Nitro built in 857 ms                                                                   nitro 4:44:33 AM
4. localhost:3000（または上記Network)にブラウザからアクセス
        * nuxt3の初期アプリケーション画面が表示される。
        * 環境によってはブラウザからのアクセスは許可されず、「Unconfigured:3000」タブにアプリケーション画面が表示される。

![nuxt3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282300/ef272db3-63ec-1eda-540b-d83492fae879.png)