動機
React Nativeを愛し始めて、はや6年が経ちます。
React Native CLIベースで作っている時も、Expoベースで作っている時も、いついかなる時も「もっと開発体験を向上させて欲しい」と感じており、愛が憎悪に変わりそうな時もありました。Flipperが来た時それはそれは嬉しかったですが、実際使いながらもたくさんのストレスを抱えていました。
そんな中、App.js Conf 2024で気になる発表がありました。
React Native IDEの発表です。reanimatedやgesture handlerなど素晴らしいOSSを作っているSoftware Mansion社が主導しているIDEで、
私たちSoftware Mansion社はReact Nativeのエコシステムについての調査を行い、今年の最大の課題はデバッグであることがわかりました。55%の投票者がデバッグを改善する必要があると答えています。
と、デバッグ改善の必要性を感じ立ち上がってくれました。(XcodeやAndroid Studioの設定して、CocoaPodsで依存関係管理して、Metroの起動と戦ってなどなど結局ネイティブの開発と同程度の学習コストが掛かるストレスも開発の動機みたいです。)
開発が始まってから9ヶ月が経ち、遂にお披露目されたので期待を込めて実際に触ってみました。
導入
React Native IDEはVSCodeかCursor上で拡張機能として動きます。VSCodeを使っている人なら拡張機能を追加するだけでIDEが使えるようになります。
初めてReact Nativeを触る人でも簡単にセットアップできるし、素晴らしい体験ですね。React Native IDEを使えるのはReact Native（0.71以降）とExpo SDK 49以降です。
また現在はMacのみの対応です。
触ってみた
IDEの開き方
React Native IDEの開き方はすごく簡単です。
React Native または ExpoプロジェクトをVSCodeで開くと下のgifのようにReact Native IDEを開くためのボタンが表示されるのでこれを押すだけです。
機能
主な機能を5つ紹介します。
コンポーネントインスペクター
インスペクター機能がついており、IDE上でコンポーネントを選択するとコードの場所までジャンプできます。
ナビゲーション
IDE上でナビゲーションが可視化されます。(Expo Router対応)
ディープリンクに対応しており、さらにナビゲーションをヒストリーとして残してくれるのですごく便利です。
ログ
ログにも対応しています。
出力されたログから、そのログを出力したコードの箇所までジャンプすることが可能です。
ブレークポイント
ブレークポイントにも対応しています。
特に設定することなく、VSCode上でブレークポイントを設定するだけで使えます。
また、実行時に例外が発生したら自動的に停止し、例外が発生したコードまでジャンプできます。
コンポーネントプレビュー
これは「おー」と思った機能なのですが、コンポーネントを独立させてUIの確認ができます。以下のgifを見てもらえば何ができるかパッと分かると思います。
ただ、この機能を有効にするには以下の手順が必要です。
-
bun add -D react-native-ideでライブラリをインストールする。 - コンポーネントプレビューしたいコンポーネントファイルで
preview(<ComponentName />);を記述する。 - 2を記述すると上部に
Open previewが表示されるので押下する。
最初は「おー、カッケー」と思いましたが、個人的にはプロダクトのコードにプロダクト実行に関係のないコード(テストコードとか)を混ぜたくないので結局今のメリットだけでは使わないかなーと思います。わざわざStorybookを導入するまでもないプロダクトでパッと確認したい時には使えるのか🤔 (んー、結局ライブラリインストールしたりする方が精神コストかかるしなー。。。結局消すしなー。。。)
デバイス設定
エミュレータを利用している時に意外と面倒なデバイス設定も簡易にできます。
- ライトモード・ダークモードの切り替え
- テキストサイズの拡大・縮小
- ロケーションの切り替え
このあたりの機能が拡張されていけば、React Native IDEを使うメリットが増えそうです。
今はできないこと
2024年7月現在、まだまだBeta版なのでできないことがいっぱいあるのは仕方ないですが、特に「あっ、Betaですもんね🫠」と感じたのが以下です。
- エミュレータを回転できない
- 今自社プロダクトで受付アプリ作ってて、横向き固定なので詰んだ
- タブレット使えない
- 今自社プロダクトで受付アプリ作ってて、iPadなので詰んだ
- 端末増やせない
- 今自社プロダクトで受付アプリ作ってて、iPadなので詰んだ
そっとIDEのパネルを閉じて、expo startして、Metroとこんにちはしました。
最後に
絶賛開発中のBetaなのでまだまだ出来ないことが多いです。
実際に現場で活躍するのはもう少し先でしょうが、Software Mansion社が主導しているのですごく期待しています。(動画で貼りましたが、App.js Confの盛り上がりは凄かった) React Nativeのデバッグで苦しんでいる人はウォッチしておくべきかと思います。アップデートが楽しみです🌈
憎悪が愛に変わる日は近いかも。
Discussion