2021.12.18_Web開発者がアプリ開発時に知っておくとよいアレコレ

Transcript

1. アプリ開発時に 知っておくとよい アレコレ　　　 2021.12.18 きど Web開発者が
2. Hello!! 実務歴：約1年半 PHPをメインに開発している バックエンドエンジニア jQueryはあったものの モダンJSは実務経験なしという 経歴でしたが2021夏から数ヶ月間、 React Nativeでの開発を経験しました
3. Twitter : @youraccount Facebook : your_account URL : http://example.com/ さて、みなさん・・・
4. この場に集まっている方は Webアプリ開発/制作者が多いと思いますが、 モバイルアプリ開発に興味はありませんか…？
5. Twitter : @youraccount Facebook : your_account URL : http://example.com/ アプリが開発できれば ・Webサイトとアプリを繋げれる ・できることの領域を広げられる ・楽しそう そう考える方もいらっしゃるのではないでしょ うか…？
6. Twitter : @youraccount Facebook : your_account URL : http://example.com/ ただ、Webアプリと開発の仕方が違うことがあり ます
7. Twitter : @youraccount Facebook : your_account URL : http://example.com/ React Native中心ですが、 アプリ開発で 「最初から知っておけばよかったな」 と思える内容をギュッとまとめてお話し したいと思います！
8. Twitter : @youracco unt Facebook : your_accou nt URL : http://exam ple.com/ アプリ 管理画面/一部Webview バックエンド （apiサーバー） モノ 状態管理 ユーザー 管理者 DB （MySQL） システム構成
9. React Nativeについて ・Meta(旧Facebook)が開発 ・コード1つでiOSとAndroidの両方の 　アプリ開発ができる ・クロスプラットフォーム ・JavaScript(Type Script)で記述するため、 Web開発ライクに開発できるのが特長
10. 開発について アプリ開発のゴール：「アーカイブファイル」をアップさせる ・iOSは「ipaファイル」 - iOS Application Archive ・Apple Developerで公開する ・Androidは「Apkファイル」 - Android Application Package ・Google Playで公開する
11. エディターについて ・XcodeとAndroid Studioを起動させる ・「ビルド」してシミュレーターを表示する時に使う ・コードは書かないが、シミュレーター起動やビルド設定、 　ビルドなどのために使う(GUIで操作ができる) ・実機にビルドして動かすことも可能です（有線接続） ・VS Codeを使ってコーディング
12. iOSは証明書が必要 ・iOSは開発/公開のため証明書が別途必要 ・Bundle Identifier →アプリケーションを識別するため ・Provisioning Profile →作成したアプリに対してアプリ 　開発者が署名するために 　必要なデータ
13. 開発について（STGまで） ・開発環境、検証環境（ステージング）では両OSともに Firebaseを 　使っていました ・管理はOSごとに別となりますが、(事前登録していれば) 　審査なしにipa/apkファイルをアップして送信先を指定するだけで テスト配信できるため、（本番公開と比べると）お手軽です󰢏 ※「配信」ともいう人もいれば、「配布」という人もいました(Distribution) 

14. 開発について（本番環境） ・前述の通り、iOSはApple Developer、AndroidはGoogle Playで公開します ・ファイルをアーカイブします ・それぞれにあげたら即公開される訳ではないです ・「本番環境でのテスト段階」が存在します →iOSは「Test Flight 」、Androidは「内部テスト」 　「クローズドテスト」「オープンテスト」があります ・両OSとも審査の時間がかかります 特にiOSは審査に一晩位かかります(Androidは20分くらいでした) →クライアントから「すぐにアップして」の要求があっても対応ができないです ※iOSは「輸出コンプライアンス」の提出があります
15. 開発流れ(まとめ) 1. シミュレータor実機にビルドする 2. 開発 3. Git（PR&レビュー&マージ） 4. アーカイブして確認環境にあげてテスト配信 5. アーカイブして本番環境のテスト段階にあげてテスト配信 6. 本番環境で申請し審査 7. 公開 →ビルドやアーカイブがあるので「ちょっとの手直し」が大変です😅 　
16. 開発した所感 ・環境構築がWebアプリより複雑（慣れの問題？） ・キャッシュ等をクリアしないとビルドがすぐにこける ・React Nativeは日本語情報が少なく基本英語だと思っておく ・学習コストは低くはない（特にRedux） ・JSに精通している人が多いチームには良いと思う ・JS強くない&クライアント許容ならFlutterでもいいのでは？ ・余談: 使えれば暦浅でもフリーランスにはなりやすい？
17. ありがとうございました Twitter : @youraccount Facebook : your_account URL : http://example.com/
18. 質疑応答 わかる範囲で お答えします！
19. Metro Bundlerについて ・ビルドするときに起動される ・Metro Bundlerを起動することで 　保存時に変更箇所を検知し 　更新が自動でされ 　「ホットリロード」されます
20. デバッグツール ・標準にあるデベロッパーツールは　 スタイルは実測しか見れないなど使いづらさ があります😵 　 非公式(React Native Debugger)のが良い 💡tips デバッグを表示するにはデバイスを振る動 作の”shake”が必要ですが、shakeの概念 を初めて知りました…