「React Native + Expoでアプリを開発してみた話」を公開 ※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/

1. React Native + Expoで
アプリ開発してみた話

2. Agenda;
1. 自己紹介
2. React Native とは？
3. Expoとは？
4. 作ったもの紹介
5. 良かったこと、辛かったこと、Next Action

3. 自己紹介
黒神 / Yusuke Ishiguro
- 明日で26歳 🎉
- Workshipのフロントエンド全般担当
- CSSとReact.jsが好き
- 0→1フェーズ が大好きです
- Twitter @kokushing

4. React Nativeとは？

5. React Native とは？
- Facebook製のアプリ開発フレームワーク
- iOS/Android用のアプリを開発できる
- React.jsライクな構文
- ネイティブモジュール(Swift, Kotlin, Javaな
ど) との連携に対応
- 優秀なライブラリが豊富

6. 構文がReact.jsに似ている
import React, {Component} from 'react';
import {Text, View} from 'react-native';
class HelloReactNative extends Component {
render() {
return (
<View>
<Text>
If you like React, you'll also like React Native.
</Text>
</View>
);
}
}

7. 優秀なライブラリが豊富
例えば react-native-gifted-chat を使えば
ライブラリをインポートして数行コードを書き込むだけで
チャットアプリをつくることが可能

8. こんなアプリに使われてます

9. Expoとは？

10. Expo とは？
- React Nativeの開発支援ツール
- アプリのビルド周りを簡略化できる
- ネイティブモジュールを独自で内包しており、読み込
むだけで使える（逆にExpo提供外のネイティブモジ
ュールは使用できない）
- 専用のクライアントアプリを使うと、実機で動作確認
もできる
- 公開作業に必要な証明書を用意してくれる

11. ビルド環境が一発で整う
- ローカルサーバが立ち上がり、アプリを
コンパイルしてくれる
- iOSやAndroidのシミュレータを起動させ
ることが可能
- QRコードを読み取ることで、実機での動
作確認も可能

12. ネイティブモジュールが簡単に扱える
- カメラなど本来ネイティブな開発言語で書く必要
があるモジュールも、Expo独自のモジュールを
使用すればJSライクに実装することが可能
- 上の画像はカメラのフラッシュモード切替の処理
- 下の画像はカメラで実際に写真を撮影するメソッ
ド。

13. 作ったもの紹介

14. 良かったこと、辛かったこと

15. 良かったこと
- React.jsやReduxの知識を生かしてアプリ開発ができた
→ JS, JSX記法にも慣れていたので特に抵抗なく開発を進められた
- Expoのおかげで開発がしやすかった
→ ネイティブモジュールもJSライクにかけたので他言語の知識が不要
- Expoのおかげで検証がしやすかった
→ 作った部分から実機で同僚に見せたりできた
- 開発中のホットリロードが神
→ コードを編集して保存すると画面がリロードされすぐに変更が反映される

16. 辛かったこと
- エラーのログがわかりにくい（React系のはなんとなく分かるけどそれ以外
が😇）
- ライブラリのアップデート頻度が高いので、情報が古くなりがち
- 基本的にエラーをググる→Stack OverflowやGitHub Issueで正解を探るの
繰り返し
- StyleをWebの感覚で書こうとするとうまく動作しない
例えばbox-shadowを実装しようとすると...
shadowColor: #ccc, shadowOffset: {width: 0, height: 2,},
shadowRadius: 0, shadowOpacity: 1,

17. この画面とのにらめっこが続く

18. Next Action
- 中途半端になってしまったのでストアに公開するまでをやる
- Expoなしで開発したらどうなるか試してみる
- TypeScriptを導入してみる

19. 参考にした本
- 今回ご紹介したInstagramっぽいアプリを作れる
- 淡々とコードを書いていくので、気になる部分があ
ったらググりながら読み進めるのがオススメ
- 使用されているライブラリのバージョンが結構上が
っているので、無駄な時間を取りたくないなら記述
されている通りのバージョンを使うべし
（割と破壊的変更があって詰む）
- 一通り作ってみてコツを掴んだら最新版のライブラ
リに置き換えると良いかも

20. まとめ
「コラボレーションを加速させる、
フリーランス プラットフォーム」
https://goworkship.com
フリーランスコミュニティ
「GIG Network」
https://www.facebook.com/groups/giginc/

21. まとめ
ご静聴
ありがとうございました🙌

22. Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
のこと