[2021年末版]React Native アプリの開発環境

この記事は 2021 年 React Native アドベントカレンダーに登録しています。私はモバイルアプリエンジニアで、普段の業務でReact Nativeを使ってアプリを開発しています。日々の開発の中で使っているツールなどを紹介してみます。これから React Native を使い始める人や、すでに使っている人のお役に立てるといいな。それでは Let’s get started!

Expo

まずはこれ。Expo です。 公式ページ。最初から素のReact Nativeは使わず、Expoで開発しています。Expo を使っていて便利だと思うことを挙げてみました。

• 付属するライブラリが豊富
• クラウドでビルドされる

Expo はReact NativeのSDKに加えて、開発によく使われそうなライブラリを提供してくれています。例えば、 WebView, Map, Stripe などが提供されています。全てのライブラリをExpoが開発しているわけではない（例に挙げた WebView はコミニュティが主導して開発しているReact Native WebView）ですが、Expo のSDKに組み込まれているので簡単に使うことができるようになっています。

また、Expoを使っていると、Expoが管理するサーバーにアプリをビルドさせることができます。弊社はスタートアップということもあり、主に私一人でアプリを開発しています。一人で開発をしていると、CI環境を構築する手間も惜しいので初めからクラウドでビルドする環境が付属しているというのは魅力的です。

Expo のManaged Workflow + EAS Buildを使っています。従来のManaged Workflowではネィティブコードを含むライブラリが使えないという大きな欠点があったのですが、EASの登場によりその欠点も解消されました。手前味噌ですが、EASについては今年のReact Native Matsuriで紹介いたしました。その際に使用した資料を公開していますので、詳細はこちらの資料もどうぞご覧ください！

VS Code

どんどん紹介していきます。次はエディタです。VS Codeを使っています。React Nativeに関連する拡張機能では、VS Code Expoを入れています。Expoを使うと、アプリ名など各種設定は app.json ファイルに書くのですが、VS Code Expoを入れていると app.json を編集するときに補完及び検証が働きます。

TypeScript

言語はJavaScriptではなくTypeScriptを使っています。React Native本体の開発ではMeta社が開発しているFlowが使われていますが、アプリケーションを開発する上ではTypeScriptも全く問題なく使うことができます。動的型付け言語では現代の複雑なアプリケーション開発に耐えられないと思っている（もちろん個人の感想です）ので、TypeScriptは必須です。型はいいぞ。

AWS Amplify

もはやReact Nativeとは関係ないですが、モバイルアプリは往々にしてバックエンドも必要とすると思うので紹介しておきます。弊社ではバックエンドの開発にAWSのAmplifyを使っています。Amplifyを使うと素早くバックエンドを構築することができます。データベースやAPIの構築がAmplify経由で可能です。

GraphQL

アプリを開発していて一番便利だと思っている技術です！これがなかったら同じ機能を作るのに今の倍の時間がかかるんじゃないかと思うくらい。それくらい便利だと思っているので特筆していますが、Amplifyの一機能という形で使っています。

AmplifyではGraphQLのAPIを作ることができます。実態はAWSのAppSyncです。GraphQLの形式でスキーマファイルを記述すると、AmplifyがAPIの構築及び、DynamoDBのテーブル作成を自動的にやってくれます。また、Amplifyに内包されているCodegenのおかげでGraphQLクエリとTypeScriptで解釈できる型（type）も自動的に生成されます。APIから返されるJSONに対して静的に型情報を付けられるので、不具合も減って開発速度も上がると信じています。型はいいぞ。

Next.js

紹介するツールはこれで最後です。最終的にモバイルアプリの開発ツールですらありません。しかしFlutterなど他のクロスプラットフォーム技術とReact Nativeを比較したときに、ReactはWeb開発でも使われる技術というのは一つのメリットだと思うので紹介しておきます。

私はモバイルアプリ開発をメインとしていますが、会社のプロジェクト進行状況に応じてwebの開発に参加することも多いです。Webの開発にはReactベースのNext.jsを使っています。もちろんWebアプリを開発するためにはモバイルとは違う知識が必要になりますが、どちらもReactの文法で記述できるというのは大きなメリットです。個人的にアプリ開発において難しいところは状態管理と非同期処理だと思っています。状態管理と非同期処理が難しいのはWebでもモバイルアプリでも変わりません。Reactでは useState や useEffect に代表されるhookなどを使って状態管理と非同期処理を実現しますが、hookはモバイルのReact NativeでもWebのNext.jsでも同じように使えます。
そのため、普段はモバイル開発をメインにしているけどWebもやる、ということがやりやすいと感じます。同様に弊社ではWeb開発をメインにしているエンジニアにモバイル開発を手伝ってもらうこともあります。スタートアップ企業に代表されるような、人が少ない＆作るサービスが頻繁に変わるチームでは、Web開発とモバイル開発間の障壁が低いのは大きなメリットだなと感じています。

まとめ

私が普段の開発で使っているツールを羅列いたしました。皆様のお役に立てることがあったならこの記事を書いた甲斐があります

コメント欄などで皆様が使っているツールもぜひ教えてください！それでは良いクリスマスを！