ReactNative_Expoによるモバイル開発入門/ReactNative_Expo

Transcript

1. React Native + Expo による モバイルアプリ開発⼊⾨ 2019/12/13
2. アジェンダ u はじめに u なぜクロスプラットフォーム技術なのか u 代表的なクロスプラットフォーム技術 u React Native + Expo とは u 単語帳.com のご紹介 u Demo u おわりに u Appendix
3. はじめに u この発表(約30分)のゴールは以下のように設定しています u なぜクロスプラットフォーム技術が必要なのか分かる u 代表的なクロスプラットフォーム技術の概要が分かる u React Native + Expo の概要が分かる ※注意!! 発表内容は発表者の主観が⼊っているので 客観性に⽋けている点はご容赦ください
4. なぜクロスプラットフォーム技術なのか u スマホアプリはiPhoneとAndroidの両⽅出す時代 u スマホシェアは、iPhoneが 47.4%、 Androidが 52.6% u ドコモ「ケータイ社会⽩書2019年版」 u https://www.itmedia.co.jp/news/articles/1908/29/news051.html u 両OSのアプリ作成は２倍の⼯数と時間がかかる u 時間がかかりビジネスチャンスを逃すリスク u ２倍のコストに耐えられるか u スマホアプリ技術者の確保や維持が困難 既存技術を活かし、短期間で効率よく両OSのアプリを 構築できるクロスプラットフォーム技術に注⽬が集まる
5. 代表的なクロスプラットフォーム技術 u iPhone,Androidアプリを開発可能なクロスプラットフォーム技術 u React Native(リアクトネイティブ) u Xamarin(ザマリン) u Flutter(フラッター) u Kotlin/Native(コトリンネイティブ) u 概要 開発元 使⽤⾔語 開発環境 配布ライセンス React Native Facebook JS/TS ※1 VSCode ※2 ※3 MIT Xamarin Microsoft C# Visual Studio ※2 MIT Flutter Google Dart Android Studio ※2 三条項BSDライセンス Kotlin/Native JetBrains Kotlin Android Studio ※2 Apache License 2.0 ※1 JavaScript/TypeScript ※2 iOSアプリのビルドにはXcodeが必要 ※3 Expo の場合はXcode不要
6. 代表的なクロスプラットフォーム技術 Xamarin u Microsoft のクロスプラットフォーム技術 u 2016年にXamarin社をMicrosoftが買収して無償提供開始 u Visual StudioとC#で開発。Xamarin.Forms を使うのが⼀般的。 u メリット u C#で開発ができ、.NETの資産を活かし⾼い⽣産性で開発できる u デメリット u 情報の少なさに⼼が折れそうになる u 個⼈的⾒解 u C#の技術を活かすならこれ⼀択
7. 代表的なクロスプラットフォーム技術 Flutter u Google のクロスプラットフォーム技術 u Dartという独⾃⾔語を使い Android Studioで開発 u メリット u すばやく、美しいUIで、⾼速なアプリが作成できる u ホットリロード機能で⼿早く動作確認 u デメリット u オープンソースのライブラリが少なく⽇本語の情報も少ない u Googleはサービス打ち切りに容赦がない u 個⼈的⾒解 u Flutter 採⽤は厳しい。既存技術が活かせずリスクもある。
8. 代表的なクロスプラットフォーム技術 Kotlin/Native u JetBrains のクロスプラットフォーム技術 u ⼈気の⾼いKotlinで開発できる u Android Studio で開発 u メリット u Spring Bootの開発もKotlinでできるので、すべてがKotlinになる u デメリット u まだプレビュー版なので本採⽤は厳しいかも u 個⼈的⾒解 u Kotlinの⼈気の⾼さとServer Side Kotlinにより将来が⾮常に有望な技術
9. 代表的なクロスプラットフォーム技術 React Native u Facebook のクロスプラットフォーム技術 u JavaScript/TypeScriptで開発ができる u Visual Studio Code で開発 u メリット u 既存のWeb技術を活かして開発ができる u 実績も多い u デメリット u 情報は少ない。が、いざとなればWeb技術でなんとかできる。 u 個⼈的⾒解 u 実績もあるし、Web技術、特にReactの経験があれば⼀択
10. React Native + Expo とは u ExpoはReact Nativeの開発を⽀援するプラットフォーム u メリット u iPhoneの実機があればWindowsでも開発ができる u ホットリロード機能による⾼速な開発 u Push通知やOTAアップデートが簡単にできる u デメリット u Expoにはできないことがある(AR,Bluetooth,ネイティブ連携等) u 適⽤範囲を超えたら eject が必要でサポート外になりいばらの道へ u 個⼈的⾒解 u 開発側の裁量がある程度あり、Expoの範囲内で開発できるなら⼤本命
11. 単語帳.comのご紹介 u 単語帳.comとは u 個⼈で開発中の無料単語帳サービス u https://www.tangochou.com/ u 現在ベータ版、１２⽉末に正式版リリース予定 u スマホアプリも開発中 u 実装技術 ⇒ サーバレスアーキテクチャ u ブラウザ（PC+スマホ ーレスポンシブデザイン） u React + Redux + Amplify + TypeScript, etc u サーバーサイド（AWS） u Cognito, DynamoDB, CloudFront, S3, Route 53, SES, etc u スマホアプリ u React Native + Expo + Redux + Amplify + TypeScript, etc
12. Demo
13. Demoその１- React Native + Expo u Expo でプロジェクトの作成 u Expo の起動 u iPhone シミュレーターによる実⾏ u Android エミュレーターによる実⾏ u ホットリロード機能 $ expo init expo-demo $ cd expo-demo $ expo start
14. Demoその２- 単語帳.com u ブラウザのアドレスバーで「単語帳.com」と⼊⼒ u Googleで「単語帳.com」を検索してもOK u AWS Cognito を使⽤したユーザー認証 u 単語帳.com の機能をざっくり u Excelファイルの⼀括登録
15. おわりに u クロスプラットフォーム技術というテーマでお話しましたが、 いかがだったでしょうか︖ u ビジネスシーンと環境によってはネイティブ技術が必要な場 合ももちろんあります u iPhone は Swift, Android は Kotlin で開発 u 最適な技術選定は難しいものですが、この発表が⼀助になれ ば幸いです
16. Appendix
17. 参考⽂献 u React Native+Expoではじめるスマホアプリ開発 u https://www.amazon.co.jp/dp/4839966648/ u 実践 React Native 〜 プロジェクト構成からリリースまで u 技術書典6で頒布された同⼈誌、現在⼊⼿不可 u React Native Expoで作る3プラットフォーム対応アプリ開発ハンズオン u https://booth.pm/ja/items/1569367 u ゼロから始める Kotlin / Native u https://booth.pm/ja/items/1300271 u 基礎から学ぶ Xamarinプログラミング u https://www.amazon.co.jp/dp/4863542240
18. 参考サイト u React Native + Expoでアプリ作ってみて、採⽤するならこんな感じの時 かな〜という記事 u https://blog.nabettu.com/entry/techselection u Xamarin と React Native と Flutter の違いを正しく理解しよう – Qiita u https://qiita.com/amay077/items/dff88e7ce6868615a9bb u スマホアプリ開発のフレームワークGoogle Flutterの機能と利点とは︖ React Nativeとの違い｜SeleQt【セレキュト】 u https://www.seleqt.net/programming/why-you-should-use-google-flutter- 42f2c6ba036c/