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
200
技育祭2022勉強会資料
K.Hayashi
March 16, 2022
Tweet
Share
More Decks by K.Hayashi
See All by K.Hayashi
React Native Matsuri2022
kou1127h
0
530
tech_hills 20220727
kou1127h
0
90
tech_stand #8 2022.06.03
kou1127h
0
480
Other Decks in Programming
See All in Programming
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
380
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
2
120
GitHub Copilotのススメ
marcy731
1
200
見た目から始める生産性向上
ikumatadokoro
8
990
Site Reliability Engineering for GMO
pyama86
8
1.1k
PHPはいつから死んでいるかの調査
chiroruxx
1
400
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
950
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
250
Elm 0.19.0 Changes
bkuhlmann
0
490
"config" ってなんだ? / What is "config"?
okashoi
0
240
Git Rebase
bkuhlmann
11
1.6k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
RailsConf 2023
tenderlove
4
540
Infographics Made Easy
chrislema
238
18k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Agile that works and the tools we love
rasmusluckow
325
20k
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までお気軽に!