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.8k
Web開発者がReactNativeでProgateアプリを開発した話
ReactNativeはいいぞ、という話です。
Kenta Murai
February 22, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
WebDriver BiDiとは何なのか
yotahada3
1
140
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Software Architecture
hschwentner
6
2.1k
技術を根付かせる / How to make technology take root
kubode
1
240
CI改善もDatadogとともに
taumu
0
110
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
Rails アプリ地図考 Flush Cut
makicamel
1
110
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
GraphQLとの向き合い方2022年版
quramy
44
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Building an army of robots
kneath
302
45k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Automating Front-end Workflow
addyosmani
1367
200k
Code Review Best Practice
trishagee
66
17k
Agile that works and the tools we love
rasmusluckow
328
21k
Side Projects
sachag
452
42k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Code Reviewing Like a Champion
maltzj
521
39k
Docker and Python
trallard
44
3.3k
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による認証システム 優れたプロダクトをつくる開発チーム まだまだ話したかったこと。。。