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
🔨 小さなビルドシステムを作る
momeemt
3
670
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
510
Ruby Parser progress report 2025
yui_knk
1
420
旅行プランAIエージェント開発の裏側
ippo012
2
890
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
460
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
280
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
510
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
110
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Cult of Friendly URLs
andyhume
79
6.6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Designing for humans not robots
tammielis
253
25k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Language of Interfaces
destraynor
161
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Building Adaptive Systems
keathley
43
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Side Projects
sachag
455
43k
Building an army of robots
kneath
306
46k
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までお気軽に!