技育祭2022勉強会資料

Transcript

1. React Nativeで、ネイティブ知識0でライブコーディ ング！ 技育祭2022勉強会 株式会社レアゾン・ホールディングス 開発本部EM 林晃一郎
2. 自己紹介 • 林晃一郎（@yasahhi1127） • フードデリバリーサービス「 menu」でアプリ開発 • フロントエンド開発のEM • 2019年新卒で都内某スタートアップに入社 • 2020年度中途でmenuに入社 • React、React Native触ってます
4. 本日の目的とやること（やらないこと） 目的 • React Native＋Expoを使ったアプリ開発の雰 囲気を掴むこと → 「アプリを作る」ことへのハードルを下げる やること • React (Native)についての簡単な解説 • React Nativeを使ったアプリ開発の実演 やらないこと • React（Native）についての詳細な解説 × 状態管理/ルーティング/hooks × 他言語・flutterなどとの詳細な比較 • 丁寧なコーディング
5. • 自己紹介（済） • 目的の共有（済） • React Native（以降RN）とExpoについての解 説（3min） • ライブコーディング（35min） ◦ テーマ：ゴルフのカウンターアプリ • まとめ・次に勉強するとよいこと（ 5min） • 質疑応答タイム アジェンダ 番宣 金曜　17:00〜18:00 → 土曜　14:40〜15:40 →
6. React (Native)とは？ React ユーザインターフェース構築のための JavaScript ラ イブラリ 主にWebアプリ構築の際に広く使われる https://ja.reactjs.org/ React Native 「Learn once, write anywhere.」 文字通り、Reactを使ってネイティブアプリを作ること ができる https://reactnative.dev/ 今日は「JS書いてたらアプリが出来るんだ〜」くらいの理解度で OKです！
7. なぜReact Nativeなのか？ 利点 • クロスプラットフォーム開発 ◦ 1ソースコードでiOS/android/Webなど様々 なアプリのコードを書ける • Reactを使うことができる ◦ 利用者人口の多い JS/Reactを使って書くこと ができる • Expoによる開発者体験が非常に良い 欠点 • Swift / Kotlinなどでの実装に比べるとパ フォーマンス面で劣る場合がある • 1つのコードベースで複数の PFのUIを管理す る必要がある ◦ 場合によってはPFにより分岐し、コードが複 雑になる場合もある
8. Expoとは？ React Nativeによるアプリ開発・運用がめちゃくちゃ楽になるフレームワーク・プラットフォーム これによって、JavaScript/TypeScriptだけでのアプリ開発が可能になる https://docs.expo.dev/
9. ライブコーディング https://github.com/kou1127h/geek-fesに完成品があります！ 自分で試すときは参考にしてください
10. はじめる前に https://docs.expo.dev/に従って、以下の2点を終えたところからスタートします！ 1. yarn add expo-cli 2. expo init my-project(今回は、geek-fes)
11. 開発のポイント 1. 基本的なUIの実装はReactと同じように実装可能 a. React Native特有の便利なコンポーネントや styleの特徴など、微妙な違いはあります b. npm packageのような外部JSライブラリも基本的にはすべて使用可能 2. ネイティブアプリ特有の機能や OSのAPIを使いたいときは、React NativeやExpoのAPIを参照すると同じ 機能があることが多い a. managed workflowの場合、基本的にここにある以外の OSのAPIは使えない b. とはいえ、機能は豊富なのでこれで事足りるケースも多い
12. 雰囲気はわかった。
13. 雰囲気だけじゃ開発出来ない... と、言うことで、、、→
14. 終わりに（次勉強するとよいこと） • Q：もっとしっかりReact Native＆Expoについて知りたい ◦ ドキュメント（6P参照）を読みながら手を動かしてみよう！ ◦ RN Japanのdiscordとかもあるのでぜひ入ってください。 • Q：アプリ、どうやってストアに出すの？ ◦ EASビルドを使うとアプリ特有の面倒を回避できます。 • Q：Expoのサポートしてない機能を使いたい ◦ bare workflowを使うと大体は実現できる！（多くの場合、よりネイティブ開発に近い部分を触ることになる） ◦ （Expoのサポートする範囲もどんどん広がっています） • Q：レアゾン・menuでのフロントエンド開発に興味がある ◦ 採用ページから応募 、もしくは林のTwitterまでお気軽に！