ReactNative入門 ExpoとSnackについて

スクリーンショット 2019-07-26 4.14.30

ReactNative入門 ExpoとReactNativeCliの使い方では、初めてReactNativeを利用する人向けに最初のアプリケーション立ち上げまでの方法について解説しました。

今回は、Expoの便利さやソースコードや動作が共有しやすいSnackについて解説していきます。

 

 

 

デザインや動作がメンバーに共有しづらい

 

action-3435773_1280

アプリの動作をチャットで伝えたけど、全然伝わらない・・・

 

チームで開発したり、プロジェクトを進めているとこんなケースがあると思います。

リモートで働いていたりすると、作業の進捗を共有する際にもよくききます。

そんなとき、WebであればテストURLで画面を見ながら・・・なんてことがアプリでできるといいですよね。

ExpoのSnackはそれができるんです!

 

 

Expoってなに?

 

スクリーンショット 2019-07-26 5.19.02

React Nativeは知っているけど、Expoってなに?という方も多いのではないでしょうか?

Expoは、React Nativeの開発ツールです。SnackはExpoのサービスExpo.ioの中にあるWeb上で開発可能なIDE(総合開発環境)です。

React Naiveでは、画像の加工やマップなどが単体ではできないため、ライブラリをインストールして利用します。そのためXcodeのプロジェクトとの連携を各自でしなければいけません。

Expoは、これを省くために多くのライブラリが埋め込まれた状態で、配布されます。そのため、Xcodeの紐付けを設定せずとも勝手にExpoがやってくれた状態でアプリをビルドしてくれます。

その結果、アプリのビルドの時間を大幅に削ることができます。

 

 

バージョンアップも楽

 

benjamin-dada-BLxjjscm7ho-unsplash

アプリをリリースする際には、バイナリデータをApple StoreやGoogle Playに配布する必要があります。Expoでは、Expo内部に入っているライブラリを全て詰め込むため、容量が簡単なアプリでも150MB以上になります。

そのおかげで、配布後でも後からアプリの変更をして再度審査を通すことなくアプリのバージョンアップができます。(UIの大幅な変更など、アプリ掲載時のスクリーンショットと違っていた場合は、配信を一時停止されることがあるため注意)

 

 

Snackについて

 

まずは、Snackのページをみてみましょう。Expoのアカウントでログインした後は、画像のようなページに飛びます。

スクリーンショット 2019-07-26 4.43.31

https://snack.expo.io/

Snackの最初に書かれているコードは時期によって変わっているかもしれません。

ReactNativeをローカルで動かすためには、色々インストールが必要です。詳しくは、ReactNative入門 ExpoとReactNativeCliの使い方をみてください。

そこで、Web上で作成して、動作確認をExpoアプリで読み取るだけでできるのがExpo.ioのSnackです。すごく便利ですね。

では、便利さを体感するために、ローカルで作業せずにSnack上でコードを編集してみましょう。

 

定番のHello World

言語の最初に使う文字として「Hello World」は、必須ですね。

App.jsのTextと書かれている中身を書き換えてHello Wolrdにします。Imageという部分も消してしまいましょう。

 

その後、右上にある「Save」ボタンをクリックします。

すると、右にある画面が変化しました。

スクリーンショット 2019-07-26 4.50.00

Hello Worldが表示されています!

<Text> 表示する文字 </Text> で文字を表示させます。コンポーネントの使い方は別で紹介していきます。

 

 

Snackで作ったアプリの共有

 

Snackで作ったアプリの共有方法はいくつかあるため紹介します。

 

QRコード(デバイスを持っているとき)

 

スクリーンショット 2019-07-26 4.57.22

  1. Expoのアプリをインストールします。
  2. Snackの画面で右上にある「Run」ボタンをクリックします。
  3. 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上でサクッと作って共有できます。

 


Sponsored Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です