React Nativeでモバイルアプリ開発を始める前に知っておくべき基礎知識

JavaScriptでアプリを開発することほど素晴らしいことはありません。ただし、モバイルアプリの開発は別話でした。JavaScriptはWebアプリ開発のための言語であり、ネイティブモバイルアプリの開発には使えないのが常識だったのです。Web開発者がネイティブモバイルアプリ開発に足を踏み入れるのは容易ではなく、JavaやObjective-Cなど、目的に応じたプログラミング言語を一から学ぶ必要がありました。

そんな常識を打ち破ったのが、Facebook(現Meta)が生み出したReact Nativeです。React Nativeには、AndroidとiOSの両方に対応したクロスプラットフォームアプリを構築できるなど、多くの利点があります。React Native以前は、Android用とiOS用にコードを2回書く必要がありましたが、今はもうその必要はありません。

この記事はReact Nativeの世界への入門編です。それでは始めましょう。

なぜReact Nativeなのか?

では、なぜ他の技術ではなくReact Nativeなのでしょうか?React Nativeには、他の技術では実現できない多くのソリューションがあります。React Nativeでできることは以下の通りです。

ネイティブモバイルアプリの構築

React Nativeを使えば、iOSとAndroidの両方に対応したネイティブアプリをJavaScriptで書くことができます。ジェスチャー、プッシュ通知、カメラ、位置情報など、すべてのネイティブコンポーネントを利用できます。IonicやPhoneGapなど、モバイルアプリ開発用のJavaScriptライブラリは他にもありますが、これらはWebViewを使用しており、それらの技術で作られたアプリは真のネイティブアプリではありません。

クロスプラットフォームモバイルアプリ(iOS・Android)の構築

そう、React NativeならiOSとAndroidの両方で動作するモバイルアプリを作れます。これはReact Native最大のメリットの一つです。FacebookがReact Nativeを作る前は、異なるコードでアプリを2回構築する必要がありました。iOS用にはSwiftかObjective-C、Android用にはJavaかKotlinを使って。React Nativeはこの問題を解決し、一度作ればiOSでもAndroidでも動作します。素晴らしいですね!

すべてのコードをJavaScriptとReactで記述

React Nativeアプリの開発では、実際に書くのはJavaScriptです。Reactのコードにより、優れたUIとユーザー体験を提供するコンポーネントを構築できます。

React Nativeを始めよう

React Nativeを始めるのはワクワクしますが、同時に少し混乱するかもしれません。最初のステップはインストールですが、方法はいくつかあります。

expo-cliを使う

expo-cliはコマンドラインツールで、Expo APIと統合されたReact Nativeのボイラープレートをダウンロード・インストールしてくれます(インストールガイドはこちら)。React Nativeアプリを簡単に構築できる方法であり、React Nativeを始めたばかりの方にはこの方法がおすすめです。

expo-cliには多くのオプションがあります。面倒な設定なしでモバイルデバイス上でアプリを実行・テストでき、QRコードをスキャンすればExpoモバイルアプリでアプリが開きます。さらに、「Appetize」というWebインターフェースを使えば、ブラウザ上でReact Native製の他のモバイルアプリを試すこともできます!

react-native-cliを使う

react-native-cliはexpo-cliと同じ役割を果たしますが、アプローチが異なり、追加の利点もあります。react-native-cliで作成したアプリでは、独自のネイティブモジュールを作成するオプションと能力が得られます。ネイティブモジュールを作るためにアプリをejectする必要はありません(ejectすると、ネイティブモジュールを使えるようになり、自分で書くことも可能になります。ネイティブモジュールの書き方は別の記事で詳しく解説します)。

プラットフォームごとにReact Nativeアプリの開発プロセスは異なります。特定のプラットフォームには特別な設定が必要な場合もあります。例えばAndroid向けにビルドするにはAndroid SDKが必要です。それでは、その仕組みを見ていきましょう!

Android向けモバイルアプリのビルド

Android開発を始めるには、いくつかの要件をインストールする必要があります。まず、Android SDKとAndroid Studioをダウンロードして設定してください。こちらのリンクからダウンロードできます。

Android Studioをダウンロードしたら、いくつかのAPIもインストールする必要があります。Android Studioを開き、設定タブをクリックすると、次のようなウィンドウが開きます:

まず、SDK PlatformsタブでReact Nativeに対応させたいプラットフォームにチェックを入れます(例：Android 6.0 Marshmallow)。次にSDK Toolsタブに切り替えます。

そして「Android SDK Build-Tools」「Android SDK Tools」「Google Play services」にチェックを入れます。Android SDK Build-Toolsでは、以下のすべてのプラットフォームを選択してください:

• 19.0.0〜20.0.0
• 22.0.0〜24.0.0
• 25.0.2、26.0.1〜26.0.3
• 27.0.3、28.0.1〜28.0.2

これでSDKとAndroid Studioの準備は完了です。次のステップはエミュレーターです。エミュレーター(シミュレーター)は、アプリを実行してテストするための場所です。選択肢はたくさんあります。

Android Studioのエミュレーターを使うこともできます。Android Studioでエミュレーターを作成する方法はこちらを参照してください。正直に言うと、私は使ったことがありません。私はGenymotionか実機を好んで使います。

Genymotion

Genymotionは、アプリをテストするための仮想エミュレーターを提供するデスクトップアプリケーションです。動作が速いので私はよく使っています。Wi-Fi、位置情報、カメラなど、実機にあるような機能を備えたカスタマイズ済みのスマートフォンを作成できます。Android Studioのエミュレーターやその他のエミュレーターよりも、Genymotionを強くおすすめします。

実機を使う

アプリの実行とテストには、実機ほど良いものはありません。実際のデバイスでアプリがどのように表示されるかを確認できるからです。仮想デバイスでは得られないリアルな感覚を味わえます。テスト用のデバイスを用意できるなら、迷わず使いましょう。

ここまででAndroidの準備はOKです。では、iOSはどうでしょうか?

iOS向けReact Nativeアプリのビルド

iOSでのReact Nativeの実行は、Androidとあまり変わりません。Androidで動作する同じReact Nativeアプリは、いくつかの例外を除いてiOSでも動作します。

例えば、iOSデバイスで実行したい場合はmacOSが必要です。macOSとiOSについては、Android用のSDKのような追加の依存関係をダウンロードしなくても、iOSでReact Nativeを実行できます。

エミュレーターについては、XcodeにはReact Nativeアプリのテストに使える優れたエミュレーターが用意されています。エミュレーターで使える便利なテクニックを紹介した記事もあるので、ぜひチェックしてみてください。

macOSではiOSとAndroidの両方を実行できます。macOSにAndroid StudioとGenymotionをインストールすることももちろん可能です。一方、Windows PCではAndroidエミュレーターしか実行できず、iOSエミュレーターは使えません。つまり、macOSを持っているあなたはラッキーです。楽しんでください!

これでReact Nativeアプリを構築する環境が整い、必要なものはすべてインストールできました。しかし、React Nativeのコードはどう書くのでしょうか?答えはとてもシンプルです。実際に書くのはReactのコードです。

公式ガイドでReact Nativeの練習をしてみてください。入門としては「React Native YouTube Replica」という素晴らしい記事をおすすめします。ステップバイステップで、初めてのReact Nativeアプリを作成できるように丁寧に案内してくれます。

すごい!ここまで来れば、もうReact Nativeでコーディングできています。しかし、エラーの確認やデバッグ、コードのログを見る必要がありますよね。そう、ログです!というわけで、デバッガーが必要になります。React Nativeではどうやってデバッグするのでしょうか?

React Nativeのデバッグ

コードのデバッグは非常に重要です。React Nativeに限らず、あらゆるプログラミング言語で同じことが言えます。React Nativeのコードでも、何が起きているのかを常に把握する必要があります。React Nativeアプリのデバッグ方法はいくつかあります。

Chrome DevToolsでデバッグ

React Nativeでは、Chrome DevToolsを使ってアプリのログを確認できます。Chromeでデバッグするには、まずエミュレーター上でデバッグモードを有効にします。キーボードでCtrl + Mを押してください。

次のような画面がポップアップ表示されます:

そして「Debug JS Remotely」を選択します。すると、Google Chromeでhttps://localhost:8081/debugger-ui/というアドレスのタブが開きます。これがChrome DevToolsを使った方法ですが、他の選択肢はないのでしょうか?

React Native Debuggerを使う

React Native Debuggerは、React Nativeコードをデバッグするための優れたツールです。多くの利点を備えたデスクトップアプリケーションで、Redux DevToolsとReact DevToolsの統合機能が付属しています。スタイルのデバッグも可能です。実際、React Nativeにとって最高のデバッガーであり、私自身もこれを使っています。通常、macOS、Windows、Linuxで利用可能です。インストールと統合のガイドをチェックしてみてください。

今回はここまでにしましょう。これはReact Nativeでモバイルアプリを構築する完全ガイドの第1部です。次回のパートでは、ネイティブコンポーネントの使い方、React Native API、他のライブラリとの統合、Redux、GraphQLなど、より技術的なヒントや課題について掘り下げていきます。次回の公開をお見逃しなく、メーリングリストへの登録をおすすめします。お読みいただきありがとうございました!