React Native + Expoを用いて、1週間でアプリを作ってみて学んだこと

React Native(Expo) + Firebaseを使って爆速でアプリを作る

羽賀流登氏：はじめまして、よろしくお願いいたします。「React Native(Expo) + Firebaseを使って爆速でアプリを作る」というタイトルでやらせていただきます。

自己紹介なんですが、羽賀流登と申します。Twitterは「mxcn3」というIDでやらせていただいております。

ふだんはFACTBASEという、仮想通貨関係のニュースをあつかっている会社で、React Nativeでアプリ開発をしたり、Webのフロントエンドをやったりしています。仕事以外ではReact、最近はElmに興味をもって、すごくいいなと思い始めてます。

React LT用にReact Nativeでアプリを作ったので、本日はその話をしようと思っています。使用したUIのライブラリや、Expoなどについて話します。

1つ聞きたいんですが、Reactをやられてる方で、React Nativeをやられてる方はどれくらいいらっしゃるんですかね……？

（会場挙手）

やっぱり少ないですよね、よかったです！（笑）。多かったら今日の話はつまらなさそうだなと思ったので。

React NativeとはFacebookが作っている、クロスプラットフォームで開発ができるフレームワークです。

ReactのJSを書いてる人なら比較的簡単に書くことができます。React Nativeで「Hello, World！」的なことをやろうとするとこうなるのかなと思って、やってみました。

Reactに入っているのをインポートして、ちょっと書けばできるのかな、という。

それで、React Nativeの開発環境を提供してるExpoというのがあるんですけど、そのsnackというのを使うとWebブラウザ上から実行できるので、もしよかったら試してみるとわかりやすいかもしれないです。

Expoとは何か？

Expoとは、React Nativeの開発を限りなくWebアプリの開発の体験に近づけることができるプラットフォーム兼ライブラリです。

さっきの「Hello, World！」は実行すると（スライドを指しながら）こんな感じで、Webからも見れるし、スマホで読み取るとスマホで（見ることができます）。AndroidもiOSもどちらも表示することができます。

アプリのビルドをせずとも専用のクライアントアプリを使って、実機での動作を確認できるのがいいです。KotlinとかJavaとか、Objective-Cとかをぜんぜん書けなくても、アプリを微妙に書けるようになります。

これは一応、うちの上司が技術書典で出していた本から一部引用させていただきました。

ふだんはReact Nativeで開発をしてるんですけど、Expoはあまり使っていなかったので、そっちの開発をしてみたいなと思ったことが、今回LTで発表させていただくことのモチベーションでした。LT発表が決まった瞬間は別のこと発表しようと思ってたんですけど、Expoで作ってみたいなと思って、1週間くらいかけてLT駆動型で作らせていただきました。

1つ申し訳ないんですが、さっきみたいにExpoでアプリをQRコードのかたちで共有できると思っていたんですけど、iPhoneに対してはExpoクライアントの審査の問題で、共有できないと知り、LTのスライドの資料が当初予定していたものと少し変わります。

「ExpoならLT会で共有できる」とテンション上げながら、審査に通さなくても共有できるなと思って作っていたところ、iPhoneでは使えないということがわかりました。こっちのQRコードを読み込むと、自分のアプリが起動できるはずです。iPhoneだと起動できなくて、Androidのみとなっています。

作ったアプリの紹介として、実機のテストが見れないみたいなので、動画にしました。

（動画再生）

こんな感じのマッチングアプリを最近はやってるので、マッチングアプリっぽいものを作ってみました。基本的にバックエンドはFirebaseですべて補っていて、あとRedux sagaとかで状態管理はしています。

自分しかいないので、マッチングする相手も自分しか……（笑）。

（会場笑）

今回は基本的なUIのライブラリの話をしようと思っていて、sagaとかの話はあまりないかなと思います。メッセージも送れますよ、というものを作りました。全部自作自演でやっております……。

開発を捗らせたライブラリ

React Nativeで開発を捗らせたライブラリです。初めてReact Nativeで開発をする人は、かなり積極的に取り入れたらいいんじゃないかなというライブラリを紹介させていただきます。

（スライドを指しながら）これが、Reactで言うstyled-componentsくらい超メジャーな、たぶんReduxくらいメジャーなライブラリです。

React Navigationというものがあって、先ほどの画面の制御などは、ぜんぶここに任せております。これは絶対使うと思います。

これはNativeBaseという……先ほどのボタンの形とかが丸かったりするのをふつうに自作できるんですけど、こういうのを使うとすごくはかどるUIのライブラリになっています。基本的に画像になにかするときに、こういうのを使うとすごく楽になりました。

あとスワイプのアニメーションも、自分で作ってもよかったんですけど、1週間で作りきるとなるとこういうところに時間とっていられないな、と思って（やめました）。使ったらすごく、思いのほかマッチングアプリっぽいデザインに（なります）。これでもう、実装するのに30分もかからない感じの作りができます。

それで、チャットですね。

チャットもかなりメジャーなライブラリがあったみたいで、こういうのも本当に配列をただ渡すだけでできます。Reduxとか、なんでもいいんですけど使って、配列を渡せばいい感じになります。React Nativeは、Stateに渡してあげればいい感じに駆動されるものが作れます。

こういった感じで、1週間でアプリを作りきるということでやってみたところ、やっぱりOSSのライブラリを取り入れていくことで、こういったアプリを早く作ることができました。あとiPhoneでずっと確認してたんですけど、Expoの場合はiPhoneとパソコンの物理的なつながりがなかったのがとても新鮮でした。

あと体力の限界を知ることができました。このアプリは今週の日曜日くらいから作り始めたんですけど、仕事終わりの時間をかなり使いました（笑）。昨日はハロウィンで忙しくて、体力の限界をすごく知る1週間でした（笑）。

（会場笑）

ありがとうございました。

（会場拍手）