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
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
440
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
400
WindowInsetsだってテストしたい
ryunen344
1
200
ReadMoreTextView
fornewid
1
480
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
510
NPOでのDevinの活用
codeforeveryone
0
450
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
400
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
Featured
See All Featured
Code Review Best Practice
trishagee
68
18k
Being A Developer After 40
akosma
90
590k
RailsConf 2023
tenderlove
30
1.1k
Become a Pro
speakerdeck
PRO
28
5.4k
4 Signs Your Business is Dying
shpigford
184
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Faster Mobile Websites
deanohume
307
31k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Facilitating Awesome Meetings
lara
54
6.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
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による認証システム 優れたプロダクトをつくる開発チーム まだまだ話したかったこと。。。