こんにちは。普段はNext.jsを使ってウェブアプリを開発しています（Next.js歴約1年）。
今回は初めてReact NativeとExpoを触ってみました。
モバイルアプリ開発は未経験だったので、どんな感じか試しにやってみた！というレベルですが、React Native＋Expoを使うと意外と簡単に始められることがわかりました。
この記事では、React NativeとExpoを少ーーしだけ触った感想を、個人の備忘録も兼ねてまとめています。同じように「アプリ開発はウェブ開発と全然違いそう！」「なんとなくハードルが高そうだなぁ。」と感じているNext.js開発経験者の方への参考になれば嬉しいです！
React NativeとExpoについて
React Native とは
React Nativeは、Reactを使ってiOSやAndroid向けのモバイルアプリを開発できるフレームワークです。
「React Native」という名前の通りReactベースなので、ウェブアプリ開発と同じようにReactの構文で書けるため、React（Next.js)での開発経験がある人にとっては、学習コストが低いのが特徴です。
Expoとは
Expoは、React Nativeをさらに簡単に使えるようにするツールセットやフレームワークです。
React Nativeだけで始めると、環境構築や設定がちょっと面倒そうですが、Expoを使うとそのあたりを全部いい感じに整えてくれます。
ReactとNext.jsの関係に近い感じで、React Nativeの部分的にややこしい設定をExpoが抽象化して、すぐに使える状態にしてくれています。
簡単にExpoを使うメリットをピックアップしてみました。
Expoの特徴
- 環境構築が簡単で、Android StudioやXcodeをインストールしなくても始められる。
- スマホでのプレビューがQRコードスキャンだけで可能(スマホへのアプリ「Expo Go」のダウンロードが必要）。
- ライブリロード機能があり、コード変更がリアルタイムで反映される。
このあと記述しますが、スマホに「Expo Go」をインストールして、QRコードを読み込むだけで（またはログインしている場合は、アプリ側でアプリ名が表示されるのでクリックするだけで）プレビュー表示ができて、こんなに簡単に表示ができるのね！！と手軽さを実感しました。
環境構築
React Native＋Expoのセットアップ方法を簡単に共有します。
- 新しいプロジェクトを作成する
npx create-expo-app@latest
- Expo CLIをインストールする
npm install -g expo-cli
- Watchmanをインストールする
brew install watchman
次に、モバイルでの表示準備を行います。
私はAndroidでの表示を試したので、GoogleAppStoreから「ExpoGo」をインストールしました。
iOSの場合は、AppStoreからどうぞ。
次に、起動してみます。
npx expo start
無事起動できたら、ターミナルにQRコードが表示されます。
このQRコードをスマホの「Expo Go」アプリで読み取ると、プレビュー表示ができます。
※Expoにサイインアップ＆ログインすると、スマホアプリ側にプロジェクトが表示されるので、クリックするだけでも表示できます。
スマホ画面
おお、ものすごく簡単。
実際、私も開発環境準備から実機プレビュー表示まで、30分以内に辿り着きました。
試しに公式ドキュメント通りに「Welcome」を「Hello World」と更新してみたところ、ライブリロードで即時反映され、実機での開発がとてもスムーズにできそうだとも感じました。
React NativeとNext.jsの共通点・相違点
Reaxt・Next.jsでの開発経験のある人にわかりやすいよう、共通点と相違点をいくつかピックアップして記載してみます。
共通点
- Reactの基本フック（useState、useEffect）がそのまま使える。
- JSXを使った記述方法が同じ。
- コンポーネント指向の開発スタイルも共通。
共通点が多いので、Reactを使ったウェブ開発の経験がそのまま活かせるのは大きなポイント。
実際にコードを見ても、ウェブ開発との大きな差はなさそうなコードで、キャッチアップが早くできそうな印象です。
相違点
- JSXタグの違いがある
- スタイリングでのCSS設定方法が異なる
タグの違いについて
タグの代わりにコンポーネントを使います。
例えば、<div>タグは<View>コンポーネントに、
<button>タグは<TouchableOpacity>コンポーネントを使います。
そのほかにも、アプリならではのコンポーネントがあります。
参考：React Native Core Components and APIs
JSXでの表示方法
| React Nativeタグ | HTMLタグ | (ChakraUIでのタグ) |
|---|---|---|
| <View> | <div> | <Box> |
| <TouchableOpacity> | <button> | <Button> |
| <Text> | <p> | <Text> |
私はNext開発時はUIコンポーネントライブラリChakraUIを使っていたのでの、<Text>は同じです。
コンポーネントライブラリを使ったことがある人にとっては、JSXタグの違いはすぐに慣れそうです。
Next.jsとReact Nativeの比較
// Next.js
const App = () => (
<div>
<p>Hello World!</p>
<button onClick={() => alert('Button clicked!')}>
<p>Click Me</p>
</button>
</div>
);
// React Native
import { View, Text, TouchableOpacity } from 'react-native';
const App = () => (
<View>
<Text>Hello World!</Text>
<TouchableOpacity onPress={() => alert('Button clicked!')}>
<Text>Click Me</Text>
</TouchableOpacity>
</View>
);
スタイリング方法について
React Nativeでは、基本的にはStyleSheetオブジェクトを使います。
Next.jsの開発ででTailwind CSSを使ってる場合、NativeWindなどのライブラリを利用することで、Tailwind CSSのスタイルを使うことができるようです。
⇩
Tailwind CSSを使っている人にとっては、ライブラリさえ導入すれば、そのままTailwind CSSが使えるので、これも問題ではなさそうです。
私は普段ChakraUIを使っているので、次回スタイルも含めて実装をさらに試してみる時には、ReactNative用のUIコンポーネントライブラリを使ってみたい！と思いました。
React Native＋Expoを1時間触ってみての感想
-
ハードルが思った以上に低かった
React Native＋Expoを使えば、モバイルアプリ開発のハードルはかなり低いと感じました。特にReactやNext.jsの経験があれば、セットアップや基本的な使い方はスムーズに理解できます。 -
セットアップがかなり簡単で驚いた
QRコードをスキャンするだけでスマホで動くアプリをプレビューできるのは驚きでした。コードの修正が即時反映されるライブリロードも便利です。 -
制約について気になる
React Nativeはクロスプラットフォームなので、ネイティブ開発と比べての制約があるようです。
自分が欲しい機能に影響があるのかどうかにより採用する・しないを決める必要がありそうです。
まとめ：React Native＋Expoを試してみた感想
React NativeとExpoを初めて触りましたが、React/Next.jsでの開発経験がある人にとっては、かなりスムーズに開発できそうな印象でした。
フロントエンドエンジニアの方でモバイルアプリ開発に興味がある方は、まずはReact Native＋Expoを試してみるのが手軽で良さそうです。環境構築も簡単で、すぐに動くアプリを作れるので、アプリ開発の第一歩としてちょうどいい選択肢だと思いました！
次は、簡単な機能＆UIコンポーネントの導入を試してみようと思います！
参考にさせていただいたドキュメント・動画のリンク
Discussion