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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
690
tech_hills 20220727
kou1127h
0
110
tech_stand #8 2022.06.03
kou1127h
0
630
Other Decks in Programming
See All in Programming
Codex の「自走力」を高める
yorifuji
0
1k
PostgreSQL を使った快適な go test 環境を求めて
otakakot
0
450
CDIの誤解しがちな仕様とその対処TIPS
futokiyo
0
180
NOT A HOTEL - 建築や人と融合し、自由を創り出すソフトウェア
not_a_hokuts
2
590
New in Go 1.26 Implementing go fix in product development
sunecosuri
0
370
2026年は Rust 置き換えが流行る! / 20260220-niigata-5min-tech
girigiribauer
0
220
15年目のiOSアプリを1から作り直す技術
teakun
1
610
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
yokomachi
1
290
PJのドキュメントを全部Git管理にしたら、一番喜んだのはAIだった
nanaism
0
240
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
o8n
3
1.1k
SourceGeneratorのマーカー属性問題について
htkym
0
170
モジュラモノリスにおける境界をGoのinternalパッケージで守る
magavel
0
3.5k
Featured
See All Featured
Designing for humans not robots
tammielis
254
26k
Optimizing for Happiness
mojombo
378
71k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.4k
Amusing Abliteration
ianozsvald
0
120
Mobile First: as difficult as doing things right
swwweet
225
10k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
280
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
200
Paper Plane
katiecoart
PRO
0
47k
Writing Fast Ruby
sferik
630
63k
Navigating Weather and Climate Data
rabernat
0
130
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
960
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
64
53k
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までお気軽に!