電通国際情報サービス、オープンイノベーションラボの比嘉康雄です。
今回は、Expoに入門します。
Expo とは、開発者が React Native 単体で開発した場合に意識しないといけなかったネイティブ部分を隠蔽して、アプリケーション本体の開発をより Web アプリケーションの開発体験に近づけたものです。
expo cliのインストール
expo cliは、下記のようにして、npxでインストールするようです。
npx expo -h
実行すると下記のように言われるので、yでインストールします。
Need to install the following packages: expo@48.0.17 Ok to proceed? (y)
Expo Goのインストール
Expo Go は、ローカルで何も構築する必要がなく、Android および iOS 上で React Native アプリをテストするための無料のオープンソース クライアントです。 Android または iOS デバイスで Expo Go クライアントアプリを使用するのが、最も速く起動して実行できる方法です。これにより、Expo CLI を通じて提供されるアプリを開いて、開発時にプロジェクトをより速く実行できます。
と公式が言っているので、Expo Goを使いましょう。
iOSのApp StoreやAndroidのPay Storeからインストールしてください。
プロジェクトの作成
npx create-expo-app my-appでプロジェクトを作成しましょう。my-appに移動して、プロジェクトを開始します。
cd my-app npx expo start
QRコードの読み取り
QRコードが表示されます。
Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
と言われるので、僕は、iPhoneのカメラでQRコードを読み込みました。Expo Goが立ち上がって、下記のようにアプリが表示されます。
Open up App.js to start working on your app!
アプリの修正
my-appディレクトリで、VS Codeを立ち上げます。code .
App.jsのTextタグで囲まれている部分を適当に修正してください。アプリの表示もすぐ変わります(HOT Reloading)。
まとめ
Expoは、Webアプリを開発しているような感覚で、Nativeアプリを開発できるというのは、本当だなと感じました。Expoはもう少し詳しく見ていきたいと思います。
仲間募集
私たちは同じグループで共に働いていただける仲間を募集しています。
現在、以下のような職種を募集しています。
