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
Web開発者がReactNativeでProgateアプリを開発した話
Search
Kenta Murai
February 22, 2018
Programming
1
1.7k
Web開発者がReactNativeでProgateアプリを開発した話
ReactNativeはいいぞ、という話です。
Kenta Murai
February 22, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
How to use Macrobenchmark
veronikapj
0
160
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Product Management LT会_クアンド新家
shinshin
0
250
CSC307 Lecture 11
javiergs
PRO
0
240
Trial
cairolibrary720
1
130
Temporalを取り巻く仕様を整理する
sajikix
0
110
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
506
110k
GraphQLとの向き合い方2022年版
quramy
36
13k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Become a Pro
speakerdeck
PRO
15
4.8k
Design by the Numbers
sachag
277
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
A Tale of Four Properties
chriscoyier
155
22k
What's in a price? How to price your products and services
michaelherold
239
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Transcript
W e b 開 発 者 が R e a
c t N a t i v e で P r o g a t e ア プ リ を 開 発 し た 話 P r o g a t e . I n c , 村 井 謙 太
村井謙太 - Progate共同創業者 & CTO 自 己 紹 介 Progate
( https://prog-8.com )というプログラミング学習サービスを作ってます。 サーバーサイドにはRailsやNode.jsを、webフロント開発にはReactを使っています。 インフラもたまにやります。 @wyvernMurai ....最近モンスターハンター買いました(初⼼者)
iOSアプリをリリース デモリンク: https://youtu.be/0OLtyLc0QiA ※ 2018年1月リリース プログラミングを学べるアプリ 教育カテゴリ1位を獲得 - ReactNativeで開発
React Nativeファンとして 布教したい! 日本では知見や事例がまだまだ少ない、、、
そもそもReactNativeとは?
R e a c t N a t i v
e に つ い て ・Reactを使ってネイティブアプリを作れるプラットフォーム ReactNativeとは ・iOSアプリとandroidアプリを両方対応できる ・世界的に有名なアプリで導入されている
R e a c t N a t i v
e に つ い て webのReactでお馴染みの方法でコンポーネントを作る。 <div>のようなwebのタグでなく、ReactNativeが用意している <Text>などのコンポーネントを使用する。 実際のコードどんな感じ?
ReactNativeの偉大な点
R e a c t N a t i v
e の 偉 大 な 点 xcodeをほぼ使わなくていい(個人的にstoryboardとか苦手) packageはnpm(yarn)で管理 スタイルはCSSを書ける(CSS in JS) reduxなどでstate管理 axiosやfetchでAPIリクエスト 1. 開発プロセスがweb開発とほぼ変わらない! 9割くらいreduxを書く時間となる。ネイティブアプリを作っている実感がわかないほど。 webでreactを使っている人は、ReactNative開発において即戦力になる。
R e a c t N a t i v
e の 偉 大 な 点 ライブリロード、ホットリロードが標準で備わっている。 一切設定不要。 コード書いて3秒で動作確認できる。 2. ビルド速すぎて最高! デモ: https://youtu.be/bwrlRo6iLoA
R e a c t N a t i v
e の 偉 大 な 点 chromeの要素の検証的な感じで、 リアルタイムにスタイルなどを 変更して実験できる。 3. react-devtools最高! リンク: https://github.com/facebook/react-devtools/blob/master/packages/react-devtools/README.md
ReactNativeの辛い点、、、
R e a c t N a t i v
e の 辛 い 点 、 、 、 エラーが起きた時、機能の実現方法がわからないときなど、ネット上ではほぼ 100%日本語で回答が見つからない。 英語ドキュメントを読み込む必要がある。 ソースコードなどの1次情報を見る必要性が多々ある。 → エンジニアとしてのレベルが上がっていいことかも、、、? 1. 日本語の情報が少なすぎる
R e a c t N a t i v
e の 辛 い 点 、 、 、 外部ライブラリのセッティングなどで、objective-Cなどネイティブのコードを 書く必要性がたまに出て来る。 ほとんどコピペで動くが、たまにデバッグが必要になるので、キソのキくらい は知らないとまずい。 Progateのリポジトリでは20行くらい存在する。 2. たまにネイティブコードを書く必要性あり
リリースまでしてみて得られた知見
リ リ ー ス ま で し て み て
得 ら れ た 知 見 fluxアーキテクチャのフレームワークとしてデファクトスタンダードになりつつ ある。 洗練されたフレームワークなので、これを選んでおけば間違いない。 若干学習コスト高め。 1. redux使おう
リ リ ー ス ま で し て み て
得 ら れ た 知 見 アプリ開発は状態が多くて複雑になりやすい。 関数の入出力などが安定していないとバグを引き起こしやすい。 flowかtypescriptを用いて、静的型付けをしましょう。 2. 静的型付けしよう
リ リ ー ス ま で し て み て
得 ら れ た 知 見 アプリに限った話ではないが、アプリは複雑になりがちな故、テストがより重 要となる。 複雑なロジックはテストを書いていないと後半つむ。 jestが標準で入っているので開発初期からテストを書きましょう。 3. テストは早めから書こう
リ リ ー ス ま で し て み て
得 ら れ た 知 見 パフォーマンスは結構すぐ悪化するので注意。 以下の3つのツールを使うとよい。 ・ReactNative標準の簡易プロファイラ ・Chromeのperformanceツール ・xcodeのInstruments デバッグビルドとリリースビルドではアプリの動作速度がまるで違うので、パ フォーマンスチェック時には必ずリリースビルドにする。 注: プロダクトの開発初期は気にしなくてよい。開発後半でやりましょう。 4. パフォーマンスチューニングは必須
サマリー web開発でReactを使っていて、 アプリ開発未経験な人はReact Nativeは素晴らしいツールとなります。 みなさん是非使ってみてください! ReactNative仲間が増えると嬉しいです。
Progateはエンジニアを 絶賛募集中です!
ご 清 聴 あ り が と う ご ざ
い ま し た 。 P r o g a t e . I n c , 村 井 謙 太 ReactNativeのおすすめライブラリ Expoを使うべきか ReactNative周りのエコシステム スケーラブルなreduxのアーキテクチャ reduxアプリにおけるパフォーマンスチューニング JWTによる認証システム 優れたプロダクトをつくる開発チーム まだまだ話したかったこと。。。