Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
技育祭2022勉強会資料
Search
K.Hayashi
March 16, 2022
Programming
0
220
技育祭2022勉強会資料
K.Hayashi
March 16, 2022
Tweet
Share
More Decks by K.Hayashi
See All by K.Hayashi
React Native Matsuri2022
kou1127h
0
660
tech_hills 20220727
kou1127h
0
110
tech_stand #8 2022.06.03
kou1127h
0
620
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
880
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
100
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
エラーって何種類あるの?
kajitack
5
310
GoのGenericsによるslice操作との付き合い方
syumai
3
690
Create a website using Spatial Web
akkeylab
0
310
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
5つのアンチパターンから学ぶLT設計
narihara
1
120
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Designing for Performance
lara
609
69k
Fireside Chat
paigeccino
37
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Done Done
chrislema
184
16k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Being A Developer After 40
akosma
90
590k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
React Nativeで、ネイティブ知識0でライブコーディ ング! 技育祭2022勉強会 株式会社レアゾン・ホールディングス 開発本部EM 林晃一郎
自己紹介 • 林晃一郎(@yasahhi1127) • フードデリバリーサービス「 menu」でアプリ開発 • フロントエンド開発のEM • 2019年新卒で都内某スタートアップに入社
• 2020年度中途でmenuに入社 • React、React Native触ってます
None
本日の目的とやること(やらないこと) 目的 • React Native+Expoを使ったアプリ開発の雰 囲気を掴むこと → 「アプリを作る」ことへのハードルを下げる やること •
React (Native)についての簡単な解説 • React Nativeを使ったアプリ開発の実演 やらないこと • React(Native)についての詳細な解説 × 状態管理/ルーティング/hooks × 他言語・flutterなどとの詳細な比較 • 丁寧なコーディング
• 自己紹介(済) • 目的の共有(済) • React Native(以降RN)とExpoについての解 説(3min) • ライブコーディング(35min)
◦ テーマ:ゴルフのカウンターアプリ • まとめ・次に勉強するとよいこと( 5min) • 質疑応答タイム アジェンダ 番宣 金曜 17:00〜18:00 → 土曜 14:40〜15:40 →
React (Native)とは? React ユーザインターフェース構築のための JavaScript ラ イブラリ 主にWebアプリ構築の際に広く使われる https://ja.reactjs.org/ React
Native 「Learn once, write anywhere.」 文字通り、Reactを使ってネイティブアプリを作ること ができる https://reactnative.dev/ 今日は「JS書いてたらアプリが出来るんだ〜」くらいの理解度で OKです!
なぜReact Nativeなのか? 利点 • クロスプラットフォーム開発 ◦ 1ソースコードでiOS/android/Webなど様々 なアプリのコードを書ける • Reactを使うことができる
◦ 利用者人口の多い JS/Reactを使って書くこと ができる • Expoによる開発者体験が非常に良い 欠点 • Swift / Kotlinなどでの実装に比べるとパ フォーマンス面で劣る場合がある • 1つのコードベースで複数の PFのUIを管理す る必要がある ◦ 場合によってはPFにより分岐し、コードが複 雑になる場合もある
Expoとは? React Nativeによるアプリ開発・運用がめちゃくちゃ楽になるフレームワーク・プラットフォーム これによって、JavaScript/TypeScriptだけでのアプリ開発が可能になる https://docs.expo.dev/
ライブコーディング https://github.com/kou1127h/geek-fesに完成品があります! 自分で試すときは参考にしてください
はじめる前に https://docs.expo.dev/に従って、以下の2点を終えたところからスタートします! 1. yarn add expo-cli 2. expo init my-project(今回は、geek-fes)
開発のポイント 1. 基本的なUIの実装はReactと同じように実装可能 a. React Native特有の便利なコンポーネントや styleの特徴など、微妙な違いはあります b. npm packageのような外部JSライブラリも基本的にはすべて使用可能
2. ネイティブアプリ特有の機能や OSのAPIを使いたいときは、React NativeやExpoのAPIを参照すると同じ 機能があることが多い a. managed workflowの場合、基本的にここにある以外の OSのAPIは使えない b. とはいえ、機能は豊富なのでこれで事足りるケースも多い
雰囲気はわかった。
雰囲気だけじゃ開発出来ない... と、言うことで、、、→
終わりに(次勉強するとよいこと) • Q:もっとしっかりReact Native&Expoについて知りたい ◦ ドキュメント(6P参照)を読みながら手を動かしてみよう! ◦ RN Japanのdiscordとかもあるのでぜひ入ってください。 •
Q:アプリ、どうやってストアに出すの? ◦ EASビルドを使うとアプリ特有の面倒を回避できます。 • Q:Expoのサポートしてない機能を使いたい ◦ bare workflowを使うと大体は実現できる!(多くの場合、よりネイティブ開発に近い部分を触ることになる) ◦ (Expoのサポートする範囲もどんどん広がっています) • Q:レアゾン・menuでのフロントエンド開発に興味がある ◦ 採用ページから応募 、もしくは林のTwitterまでお気軽に!