Nuxt3アプリをモバイル化してみた話

# 背景

nuxt2アプリをnuxt3にマイグレーションしてた時、これネイティブアプリ化するって思ったら、もう一回作るのか、面倒くさいなぁ、って思ったことと、reactなりnext.jsにするのって大変だなぁって思ってしまったので、そこそこ大規模に改修したので、なんとかnuxt.js自体をネイティブアプリ化できないか考えたのですが、普通にありましたので、やり方を記載しておきます。

## 前提

- xcode 15(**14以下でも構いませんが、xcodeがないとiosで動かせません**)
- nuxt 3.7.4(ぶっちゃけv3なら問題ないと思います)
- android studio(**androidを使う場合インストールしておいてください**)
- npm(**18以上だと、nuxt3に完全対応してるはずです**)

### 準備

今回、マイグレーションしたnuxtアプリですが、version2の頃から多少お世話しておりました。

[こちら](https://kusuri-miru.com/)のサイトをv2からv3へマイグレーション致しました。(自慢話)

で、nuxtアプリを用意しましたら、使えるようにgenerateしていきます。

---

### やり方
`pnpm`や`yarn`をパッケージマネージャにしてるかたはそれに読み替えてください。
基本的には`npx`と書かれてる部分を`yarn`にしたりするだけです。

```bash
# まずはアプリを生成すること
npm run generate
```

さて、この状況でメモリが足りない、という旨のエラーが出ることがありますが、ちゃんと対処法がありますので、安心してください。また、別の理由でエラーが出ても対処法があるので記しておきます。

```bash
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
```

以上のようなエラーが出たら、ヒープ領域が足りてないので、ターミナルが生きてる間だけ増やしましょう。

```bash
export NODE_OPTIONS="--max-old-space-size=4096"
```

4096とは4GBのことですが、各自必要な領域を考えて割り当ててください。私の場合はこれくらいないとダメでした。

---
#### ERROR Exiting due to prerender errors.が出たとき

```bash
ERROR Exiting due to prerender errors.
```
とででしまったときはnuxt.config.tsを書き換えます。

```nuxt.config.ts
nitro:{
    prerender: {
        failOnError: false,
        },
},
```
を`defineNuxtConfig`内に追記しましょう。

## Capacitorの用意

私は気にならなかったので、良いのですが、`nuxt`に全く関係ない`gradle`ファイル等がnuxtディレクトリに入るのが嫌な方は、`src`ディレクトリ等にnuxtを移動させましょう。

それでは`Capacitor`の準備です。

```bash
# capacitor本体のインストール
npm i @capacitor/core
# capacitorのCLIをインストール
npm i -D @capacitor/cli
```
これでインストールは完了ですので、次に初期化を行います。
```bash
npx cap init
```
- まずは、アプリ名を尋ねられるので答えます。
- 次にIDを聞かれるので、一意になるようにしましょう。(xcodeだと一部の名前の付け方が気に入らなくてエラるときがありますが、あとで変えられます。むしろ、android studio側の方が大変なので、注意しましょう)
- 次にindex.htmlのディレクトリを聞かれるので、nuxt3の方は、`.output/public`と記載してください。`dist`ではありません。(なんでかは私も詳しくは知らないですｗ)
- 次にcapacitorに会員登録する？的な事を聞かれますが、Nと選択し、エンターキーを押せばそれ以上は聞かれません

最終的に、`capacitor.config.ts`が生成されていれば大丈夫です。

## ネイティブアプリ化
```bash
npm i @capacitor/android @capacitor/ios

# androidフォルダにandroidで実行に必要なファイルを準備する
npx cap add android
# iosフォルダにiosで実行に必要なファイルを準備する
npx cap add ios

# capacitorで起動するのに必要なファイル群を同期させる(ios、android共通)
npx cap sync
```

これで、正直やるべきことは全部終わりました。iosで少し、作業が必要ですがおおむねこれで完了です。

---

### Android編

```bash
npx cap open android
```

残念ながらflutterみたくcliでadb経由して転送してくれるほどのリッチなライブラリではないのですが、(flutterがすごすぎるとも言えなくもない？)、このコマンドで自動で`android studio`が起動してくれます。
この段階でエラーが起きたら`android studio`がインストール出来てないです。

正直、android studioですることは特にないです。そのまま、runして頂ければ大丈夫です。

---

### ios編

```bash
npx cap open ios
```
こちらはxcodeの関係で少し問題は複雑です。
私はこのコマンドの存在を最初知らなくて、android studioから直接、プロジェクトファイルを開いてしまい、androidはそれでも問題なかったのですが、iosはそうではないので、気を付けましょう。

まずは、xcode 15からデフォルト設定が変わっている項目を修正します。
target→Build Settings→User Script Sandboxingが`YES`になっていると思うので、`NO`にしましょう。

おそらく、これで問題なくビルドが通ると思いますが、もしこけてしまった人向けのtipsです

#### clang: error: linker command failed with exit code 1 (use -vto see invocation)
```bash
clang: error: linker command failed with exit code 1 (use -vto see invocation)
```

が、発生してしまった場合は、`ios/App/`に移動し、

```bash
pod install --repo-update
```
を実行しましょう。

---

### 雑記

nuxt3って誰も見向きもしないような気がしてるんですけど、なんといいますか、あんまりtypescriptのうまみを引き出せてないよなぁ、って気がするだけで、reactライクな感じにしちゃっただけだと思うのですが、実際の所はどうなのでしょうか。
nuxt2から3へのマイグレーションで正直一番不便なのは、cssフレームワークが軒並み使えなくなったことと、vitestが上手くテストしてくれないことだと思ってます。

というわけで、nuxtはv2.6くらいからお世話になっているので、誰かnuxt.jsの案件とか回してくれると泣いて喜ぶのでよろしくお願いします。

---

誰か
```bash
illegal tag name. use '&lt;' to print '<'.
```
の解消法知ってたら教えてください。