More Related Content
Similar to React Native（Expo）ではじめる"ゆとり"モバイルアプリ開発
Similar to React Native（Expo）ではじめる"ゆとり"モバイルアプリ開発 (20)
React Native（Expo）ではじめる"ゆとり"モバイルアプリ開発
- 2. 自己紹介
- 5. Expoとは？
- 11. 今北産業 • ReactNative上で完全に「JavaScriptのみ」でiOS/Androidアプリ 作れるようになる開発/ビルド環境 • ネイティブプラグインは一切使えない世界 （JavaScript天国/地獄） • QRコード（URL）経由で簡単に共有、実機等で動かしたりでき る
- 13. ということで今日はExpoのお話
- 14. と、その前に
- 16. 時は2017年初夏
- 17. ココナラの新規事業開発チームの体制 … ココナラチーム 新規事業開発チーム ⇐ ワタシ ⇐ 助っ人さんたち （当時）
- 18. CMやるよ！
- 19. マジか！
- 20. Web作ってる場合じゃねぇ！！
- 21. なぜなら…
- 25. と、安易に考えていた…
- 26. ココナラの新規事業開発チームの体制 … ココナラチーム 新規事業開発チーム ⇐ ワタシ ⇐ 助っ人さんたち （2017年夏）
- 27. そう言えば、我がチームにはモバイルアプリを作れる人が 居なかったんだった… ワタシ • Webエンジニア • モバイルアプリ開発経験ナシ • （iOSだけ習作レベルならアリ） • Webエンジニア • 翌月で契約終了… 助っ人さんたち
- 28. ということで…
- 32. React Nativeとは？
- 36. 開発体験 • Chromeのディベロッパーツールでデバッグを行える • 画面上でCommand + Rを行うだけで即変更を反映 • Hot Code Pushができるのでレビューを通さなくておｋ （AppleはJavaScriptベースの変更を認めている） https://github.com/Microsoft/react-native-code-push • Reactが使える人なら難なく開発に着手できる （learn once, write anywhere）
- 38. with
- 39. Expoのすごいところ
- 41. $ create-react-native-app MyApp $ cd MyApp $ ls -l create-react-native-app
- 43. ヤバくね？
- 45. 設定はapp.jsonに集約 https://docs.expo.io/versions/latest/guides/configuration.html { "expo": { "name": "My app", "slug": "my-app", "sdkVersion": "25.0.0", "privacy": “public" … } }
- 46. コマンド一発で本番用ビルド $ exp build:android or $ exp build:ios ※Expoの世界では「Standalone Apps」と呼んでいる
- 48. ね、簡単でしょ？
- 49. ディレクトリ構造比較
- 50. Xcodeのみ vs React Nativeのみ vs Expo
- 51. $ tree
- 52. Xcode
- 53. 素のReact Native
- 55. Expo
- 57. $ 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
- 58. 少しだけ応用編
- 63. 実例紹介
- 64. import { } from 'expo'; gem 'exponent-server-sdk' Expoトークンの流れ
- 65. 感想
- 66. そうは言っても、当時は本格的にアプリ作るには かなりの苦労がありました… • 公式推薦のナビゲーション用ライブラリである「React Navigation」がβ版で恐ろしいほどバグだらけ • デバッグツールのバグ • その他パッケージのバグ • Expoビルドサーバの不具合 • WebViewとのつなぎ込み etc…
- 67. ということで、再度、 今北産業
- 68. • 銀の • 弾丸は • ない