ReactNative入門 ExpoとReactNativeCliの使い方では、初めてReactNativeを利用する人向けに最初のアプリケーション立ち上げまでの方法について解説しました。
今回は、Expoの便利さやソースコードや動作が共有しやすいSnackについて解説していきます。
Contents
デザインや動作がメンバーに共有しづらい
アプリの動作をチャットで伝えたけど、全然伝わらない・・・
チームで開発したり、プロジェクトを進めているとこんなケースがあると思います。
リモートで働いていたりすると、作業の進捗を共有する際にもよくききます。
そんなとき、WebであればテストURLで画面を見ながら・・・なんてことがアプリでできるといいですよね。
ExpoのSnackはそれができるんです！
Expoってなに？
React Nativeは知っているけど、Expoってなに？という方も多いのではないでしょうか？
Expoは、React Nativeの開発ツールです。SnackはExpoのサービスExpo.ioの中にあるWeb上で開発可能なIDE(総合開発環境)です。
React Naiveでは、画像の加工やマップなどが単体ではできないため、ライブラリをインストールして利用します。そのためXcodeのプロジェクトとの連携を各自でしなければいけません。
Expoは、これを省くために多くのライブラリが埋め込まれた状態で、配布されます。そのため、Xcodeの紐付けを設定せずとも勝手にExpoがやってくれた状態でアプリをビルドしてくれます。
その結果、アプリのビルドの時間を大幅に削ることができます。
バージョンアップも楽
アプリをリリースする際には、バイナリデータをApple StoreやGoogle Playに配布する必要があります。Expoでは、Expo内部に入っているライブラリを全て詰め込むため、容量が簡単なアプリでも150MB以上になります。
そのおかげで、配布後でも後からアプリの変更をして再度審査を通すことなくアプリのバージョンアップができます。(UIの大幅な変更など、アプリ掲載時のスクリーンショットと違っていた場合は、配信を一時停止されることがあるため注意)
Snackについて
まずは、Snackのページをみてみましょう。Expoのアカウントでログインした後は、画像のようなページに飛びます。
Snackの最初に書かれているコードは時期によって変わっているかもしれません。
ReactNativeをローカルで動かすためには、色々インストールが必要です。詳しくは、ReactNative入門 ExpoとReactNativeCliの使い方をみてください。
そこで、Web上で作成して、動作確認をExpoアプリで読み取るだけでできるのがExpo.ioのSnackです。すごく便利ですね。
では、便利さを体感するために、ローカルで作業せずにSnack上でコードを編集してみましょう。
定番のHello World
言語の最初に使う文字として「Hello World」は、必須ですね。
App.jsのTextと書かれている中身を書き換えてHello Wolrdにします。Imageという部分も消してしまいましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.paragraph}> Hello World </Text> </View> ); } } |
その後、右上にある「Save」ボタンをクリックします。
すると、右にある画面が変化しました。
Hello Worldが表示されています！
<Text> 表示する文字 </Text> で文字を表示させます。コンポーネントの使い方は別で紹介していきます。
Snackで作ったアプリの共有
Snackで作ったアプリの共有方法はいくつかあるため紹介します。
QRコード(デバイスを持っているとき)
- Expoのアプリをインストールします。
- Snackの画面で右上にある「Run」ボタンをクリックします。
- QRコードが表示されるため、Expoアプリで読み取るとSnackで作ったアプリが実行されます。
WebのリンクでSnackを表示できる(ブログなど)
Snackの画面をURLで埋め込むこともできます。
こうすることで、技術ログでも紹介しやすくなりますね。
これでWebでExpo.ioにログインしてアプリ状態を共有することもできます。
まとめ
ReactNaiveの入門としてExpoを使うメリットとExpoのSnackで簡単にアプリを共有できる方法を紹介しました。
- Expoは、ReactNative単体ではできないことをライブラリで包括した状態で始められる
- 配布後にもバージョンアップが楽
- ExpoのSnackを利用すると、他の人にアプリを紹介しやすくなる
- Expoのアプリをモバイルに入れておくと、QRコードでアプリを実行できる
Expoをロカールで作った後、Snackにアップロードして共有することもできますし、簡単なものであれば、Expo.ioのSnack上でサクッと作って共有できます。
