React Native 使用レポート(二)

本当に気持ち悪い、思いっきり愚痴らせてもらう。

最近 React、Next.js、React Native を猛勉強している。まず React Native について話したい。

言語がダメ?

数ヶ月経って、TypeScript への理解が深まり、基本的に TypeScript を使えるようになった。例えば分割代入なんかは結構面白い。自分でも TypeScript で VSCode プラグインを開発したが、このプロジェクトを経てようやく TypeScript に好感を持つようになったと言える。

型に関しては、まだあまり理解できていない。特にある型が実際にどうなっているのかを知りたい時、つまりソースコードを掘る時に、多くの Union Type の間をジャンプしなければならず、これは結構面倒だ。以前も話したが、Dart は非常に直感的で、こんなに回りくどくない —— とはいえ、Dart にも Union Type を追加してほしいとは思っているけど。

そうそう、補足だけど、以前 Java に null 安全性チェックがないと言ったが、それはあまり正確じゃない。なぜなら後のバージョンの Java には null 安全性があり、いくつかの Java コードで @Nullable アノテーションを使っているのも見たことがある。

企業で今どのバージョンの Java を使っているのかは分からないが、まさか Java 8 のままじゃないよね?僕は言語でもフレームワークでも常に最新版を追いかけるべきだと思う。なぜ彼らが更新するのか?新しいものを追加するからだ。それらはちゃんと議論された後に追加されるものだし、deprecated になったものは最終的には削除される。アップグレードしないわけにはいかない。新バージョンは通常いくつかのバグも修正するし、パフォーマンスも向上させる。後方互換性の範囲も小さくなる可能性がある。とにかく更新は良いことだ。

ただし、このプロセスは段階的であるべきで、そうでないとバグが出た時に本当に辛い。例えば Windows のアップグレードなんて、自動更新すらさせたくない。

フレームワークがダメ?

コンポーネント設計

これはやはり批判せざるを得ない。基礎コンポーネントが少なすぎて、レイアウトを書くのが非常に面倒だ。

そこでコンポーネントライブラリを探して、React Native Paper というライブラリを見つけた。Material Design 3 のデザインを採用しているが、Flutter の Scaffold のようなものはない。まあ何とか使えるレベルだ。

コンポーネントの修正

スタイルは確かに別のフォルダに置く必要はなく、インラインで書ける。React Native ではよく style 属性で修正する。Next.js を語る時に Tailwind CSS についてもまた言及する。

Lint の提示は正直あまり良くない。いくつかの属性名は元の CSS 属性名と違いがあって、疲れ死にたくない。

マルチプラットフォームでのコンポーネントの表現

これについてはあまり語らないが、React Native の表現は結構悪い。でも今は Android 側だけをやっているから、まあいいか。

Navigation ナビゲーション

お前の母ちゃんクソ食らえだ 😅、使いにくいったらありゃしない —— 今使っているのは @react-navigation というパッケージだ。

まず、僕はやはり名前付きルーティングが好きじゃない。Flutter でも同じだ。第一に、これはルート名がハードコードされた文字列であることを意味し、リファクタリングする時に非常に面倒だ。第二に、パラメータの受け渡しが型を全く持たなくなる。どうやって必要なパラメータがあるかどうかを判断すればいいのか?パラメータを必要とする全てのページ(ルート、ダイアログ)で as を書かなければならないのか?しかも、パラメータの型を修正しても、navigation.navigate 側では何の提示もない。

そうそう、この navigate 関数自体の型にも問題があるようだ。なぜか never が要求されているのに、僕は文字列とページへのパラメータを渡す必要がある。でもそれは lint エラーが出ているだけで、使うことはできる。

それから Flutter で AppBar と呼ばれているもの —— 誰が勝手に全てのルート内のインターフェースに自動で付けたんだ?でもこれで僕は混乱した。そうか、じゃあ自分で AppBar を書かないとダメか。うん、React Native Paper には Appbar というものがある。いいじゃないか…… ちょっと待って、戻るボタンは自動実装されていない。なぜならこの二つのパッケージは全く関係ないからだ。つまり、自分で AppBar コンポーネントを書いて、このコンポーネントの上位にルートがあるかどうかを確認し、あれば Flutter のように自動実装しなければならない。

唯一の利点は、ページ間の遷移アニメーションが綺麗なことだ。なぜなら遷移アニメーションは Android 標準のもので、遷移にはネイティブを使っているからだ。

Debug ツールが不便

そう、今日は第三節を開いて React Native を愚痴り続ける。

僕は VSCode と React Native Cli で開発していて、Microsoft が開発したプラグインも使っている。

まず嫌なところは起動だ。 で起動できない(というか設定方法が分からない)。 でパネルから選択しなければならない。これはまだいいとして、次に僕は困惑した。VSCode がデバッグモードに入らない —— つまり下のステータスバーが黄色にならない。これは VSCode Debugger がないということだ。これは?(ちょうど VSCode Debugger を使えるプラグインがあるという 記事 を見つけた。使ってみてから補足する)

エラーが出ても具体的にどこでエラーが起きているのか分からない。マウスが自動的に問題のあるコードにジャンプしてくれない。

それに、これはホットリスタートができない。僕は VSCode をリロードしてから起動するしかない —— ホットリロードも同じで、多くの場合それが更新されたかどうかが分からない。特にバグが出た後、黒い画面のまま。自分で再起動しなければならない。

終わりに

とにかく書くのが疲れる。Flutter と比較して、レイアウト、ナビゲーション、プログラミング言語、デバッグツール、どれをとっても React Native には大きな優位性がない —— 最大の優位性はおそらく React の恩恵を受けていることだろう。「Web フロントエンド開発に精通した技術者は少しの学習だけでモバイルアプリ開発分野に入れる」というやつだ。でも React については、やはりちゃんと Web 開発をやらせた方がいい。モバイルアプリは本当に向いていない。

PS: このレポートには第三期があるかもしれない。