WSL2 + Cursor + Claude Codeの最強AI環境でスマホアプリを作るベストプラクティス(Flutter vs React Native)

最近、CursorとClaude Codeを組み合わせたAI駆動の開発ワークフローが非常に強力になっています。私自身も開発に専念できる環境が整ったため、WindowsマシンのWSL2上に構築したこのモダンな環境を使って、クロスプラットフォームのスマホアプリ(ニュースアプリなど)を開発しようと調査を行いました。

しかし、いざ「WSL2でスマホアプリ開発」を始めようとすると、いくつか特有の「壁」にぶつかります。本記事では、この環境下におけるベストプラクティスと技術選定の結論をまとめました。

結論:WSL2環境なら「React Native (Expo)」一択

クロスプラットフォーム開発といえば「Flutter」と「React Native」が2大巨頭ですが、現在のWSL2をベースとした開発環境においては、圧倒的にReact Native(特にExpo)をおすすめします。

WSL2でFlutter(ネイティブ開発)が辛い理由

Flutter自体は素晴らしいフレームワークですが、WSL2の中で開発しようとすると以下の問題が発生します。

  • エミュレーターとadb接続の壁: スマホアプリ開発では実機やエミュレーターでの動作確認(ホットリロード)が必須ですが、WSL2(仮想Linux)からWindows側のUSBや画面出力にアクセスする設定は非常に複雑で、エラーの温床になります。
  • Flutterで開発する場合は、WSL2を諦めてWindows側に直接Android StudioやFlutter SDKをインストールするのが正解です。しかし、それではせっかくWSL2上に構築したWeb開発・AIツールのエコシステムから外れてしまいます。

React Native (Expo) がベストな理由

一方、React Native (Expo) であれば、現在のWSL2環境をフル活用できます。

  1. Node.js環境がそのまま使える: WSL2のターミナルでそのまま開発が可能です。TypeScriptとの相性も抜群で、CursorやClaude Codeの強力なコード自動生成の恩恵を最大限に受けられます。
  2. 「Expo Go」でエミュレーター不要: お手持ちのスマホに「Expo Go」アプリを入れ、同じWi-Fiに繋ぐ(または --tunnel オプションを使う)だけで、PC上のコード変更が即座にスマホの実機画面に反映されます。重いエミュレーターを立ち上げる必要はありません。
  3. Webシステムとのシームレスな連携: 今回はニュースアプリを想定していますが、バックエンドにSupabaseのようなBaaSを使ったり、WordPressをヘッドレスCMSとして稼働させる構成とも相性が良いです。例えば、n8nを使って外部ニュースの収集を自動化しWordPressに投稿する際、n8nのWordPressノードのアイキャッチ画像設定項目はプルダウンに存在しなくても、featured_mediaキーを手動入力すれば問題なく連携できます。こうしたWeb系の知見がそのままアプリ開発に活かせるのは大きなメリットです。

クロスプラットフォーム開発の現実と設定

「iOS用とAndroid用で別々の設定が必要なのでは?」と不安になるかもしれませんが、Expoを使えばほぼ全ての設定をプロジェクト内の app.json というファイルで一元管理できます。

  • アプリID: Androidの package、iOSの bundleIdentifier をそれぞれ記述するだけ。
  • 権限(パーミッション): プッシュ通知などの権限要求メッセージも、このファイルにまとめて記述できます。
  • UIの微調整: OSごとに少しだけ見た目を変えたい場合は、コード内で Platform.OS === 'android' のように簡単に分岐可能です。

本番ビルドと気になる「課金」について

アプリをストアに公開するための最終的なファイル(.apk.aab.ipa)を作成する際、通常iOSアプリのビルドにはMac(Xcode)が必須です。しかし、Windows環境でもExpo EAS(Expo Application Services)というクラウドビルドサービスを使えば、クラウド上のサーバーが代わりにビルドしてくれます。

「クラウドを使うならお金がかかるのでは?」と思うかもしれませんが、個人の開発レベルであれば完全無料(Free Tier)で十分運用可能です。

  • 月に合計30回(うちiOSは15回)まで無料でビルド可能。
  • 普段のコーディングやExpo Goでの動作確認ではビルド回数は一切消費しません
  • 回数を消費するのは、本番用のファイルを出力する時や、特殊なネイティブモジュールを追加してテストする時だけです。

無料枠の唯一のデメリットは、共有サーバーを使うためビルド開始までに「順番待ち(10〜30分程度)」が発生することです。アプリがスケールして待ち時間が惜しくなったら、月額課金を検討すれば良いでしょう。

まとめ

Windows + WSL2 + Cursor + Claude Code というAI時代の最強構成でスマホアプリを作るなら、「React Native (Expo)」を選びましょう。

既存のWeb開発の知識とAIのコーディング支援をフルに掛け合わせることで、驚くほどのスピードでクロスプラットフォームアプリを形にすることができます。これからアプリ開発を始める方の参考になれば幸いです!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール