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
670
tech_hills 20220727
kou1127h
0
110
tech_stand #8 2022.06.03
kou1127h
0
620
Other Decks in Programming
See All in Programming
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
150
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
300
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
rage against annotate_predecessor
junk0612
0
170
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
3.9k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
480
Kiroで始めるAI-DLC
kaonash
2
580
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
print("Hello, World")
eddie
2
530
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Statistics for Hackers
jakevdp
799
220k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
Faster Mobile Websites
deanohume
309
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Code Reviewing Like a Champion
maltzj
525
40k
Designing Experiences People Love
moore
142
24k
Designing for humans not robots
tammielis
253
25k
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までお気軽に!