React Native(Expo)で始める
ゆとりネイティブアプリ開発
自己紹介
シュトウヒロアキ
ココナラ入社後、ココナラハンドメイド・ココナラ法律相談
等の新規サービスの開発のリーダーとして従事。
ワタシ
アベマサト
ココナラ入社後、ココナラの開発に従事。特にマイクロサービ
ス化を提言し、サービス側のみならずAPI開発等マルチに担当
。
弊社
阿部
Expoとは?
エキスポ(expo)とは、英語で博覧会を意味する「exposition
」の略。特に日本では、国際博覧会を意味する「Universal
Exposition」の略としても用いられる。
博
覧
会
の
予
感
!!!
前身はExponentというプロジェクト
※どちらにしろググラビリティは最悪である
今北産業
• ReactNative上で完全に「JavaScriptのみ」でiOS/Androidアプリ
作れるようになる開発/ビルド環境
• ネイティブプラグインは一切使えない世界
(JavaScript天国/地獄)
• QRコード(URL)経由で簡単に共有、実機等で動かしたりでき
る
三
行
で
は
語
れ
な
い
!!!
ということで今日はExpoのお話
と、その前に
なぜReact Nativeを選んだのか?
時は2017年初夏
ココナラの新規事業開発チームの体制
…
ココナラチーム 新規事業開発チーム
⇐ ワタシ
⇐ 助っ人さんたち
(当時)
CMやるよ!
マジか!
Web作ってる場合じゃねぇ!!
なぜなら…
ココナラハンドメイドをローンチして3ヶ月、
なかなか伸びない利用者数を何とかしたいと思ったワタシは…
※ イメージです
ワタシ
やっぱ、いまどき
アプリっしょ!
ワタシ
CMでブーストしてやんよ!
!
と、安易に考えていた…
ココナラの新規事業開発チームの体制
…
ココナラチーム 新規事業開発チーム
⇐ ワタシ
⇐ 助っ人さんたち
(2017年夏)
そう言えば、我がチームにはモバイルアプリを作れる人が
居なかったんだった…
ワタシ
• Webエンジニア
• モバイルアプリ開発経験ナシ
• (iOSだけ習作レベルならアリ)
• Webエンジニア
• 翌月で契約終了…
助っ人さんたち
ということで…
ReactならWebの技術だし
何とかなんじゃね?
ワタシ
React未経験
弊社
阿部
React未経験
ワタシ
本体Web担当エンジニアをそそのかし…
ReactNativeで
ハンドメイドのアプリ作ろ
ーぜ
イイネ!ヤローゼ!タノシ
ソー!
以下の布陣で、開発スタート!
ワ
タ
シ
iOSアプリ
API開発(サーバー側)
弊
社
阿
部
React Nativeとは?
ReactはFacebookが開発したJavaScriptのviewライブラリであ
り、React Nativeは同じ世界観でiOS/Androidのネイティブアプ
リを開発できるようにしたものである
概要
他の多くのクロスプラットフォームを謳う開発方法(Cordova
やIonic)と違い、WebViewではなくネイティブで描画される
のが大きな利点となる。
パフォーマンス
開発体験
• Chromeのディベロッパーツールでデバッグを行える
• 画面上でCommand + Rを行うだけで即変更を反映
• Hot Code Pushができるのでレビューを通さなくておk
(AppleはJavaScriptベースの変更を認めている)
https://github.com/Microsoft/react-native-code-push
• Reactが使える人なら難なく開発に着手できる
(learn once, write anywhere)
信頼性
FB製であり、名だたるサービスがプロダクションで使っている
with
Expoのすごいところ
Native層を一切意識させないディレクトリ構成
$ create-react-native-app MyApp
$ cd MyApp
$ ls -l
create-react-native-app
ヤバくね?
Xcode、Android Studioなどの
複雑怪奇なGUIを覚えなくてOK
設定はapp.jsonに集約
https://docs.expo.io/versions/latest/guides/configuration.html
{
"expo": {
"name": "My app",
"slug": "my-app",
"sdkVersion": "25.0.0",
"privacy": “public"
…
}
}
コマンド一発で本番用ビルド
$ exp build:android
or
$ exp build:ios
※Expoの世界では「Standalone Apps」と呼んでいる
Expoクライアントで実機確認・共有
QRコードをExpoクライアントアプリで読み込めば実行可能
■iOS
https://itunes.apple.com/us/app/expo-client/id982107779?mt=8
■Android
https://play.google.com/store/apps/details?id=host.exp.exponen
t&hl=ja
ね、簡単でしょ?
ディレクトリ構造比較
Xcodeのみ vs React Nativeのみ vs Expo
$ tree
Xcode
素のReact Native
素のReact Native(2階層限定)
Expo
実演コーナー
(できる方はやってみてください)
$ create-react-native-app HogeApp
$ cd HogeApp
$ npm start
or
$ yarn start
$ npm install -g create-react-native-app
or
$ yarn global add create-react-native-app
少しだけ応用編
Expo Push Notification
ExpoでPush通知を実現するためには
難しいことは必要ありません
基本的に…
自分たちのサーバにExpoトークン(iOS,Android共通)を
送信して、ExpoAPIにぶん投げるだけ
ここ重要
実例紹介
import { } from 'expo';
gem 'exponent-server-sdk'
Expoトークンの流れ
感想
そうは言っても、当時は本格的にアプリ作るには
かなりの苦労がありました…
• 公式推薦のナビゲーション用ライブラリである「React
Navigation」がβ版で恐ろしいほどバグだらけ
• デバッグツールのバグ
• その他パッケージのバグ
• Expoビルドサーバの不具合
• WebViewとのつなぎ込み
etc…
ということで、再度、
今北産業
• 銀の
• 弾丸は
• ない
ココナラでは気軽に人柱になれる
フットワークの軽いエンジニアを
募集しております
(/ω・\)チラッ
いこうよ!おいでよ!Expo!

React Native(Expo)ではじめる"ゆとり"モバイルアプリ開発