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
Spatial Rendering for Apple Vision Pro
warrenm
0
160
ドメインイベント増えすぎ問題
h0r15h0
2
430
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
4
780
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
350
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
330
Amazon S3 NYJavaSIG 2024-12-12
sullis
0
110
快速入門可觀測性
blueswen
0
410
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
3
490
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
260
nekko cloudにおけるProxmox VE利用事例
irumaru
3
460
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
980
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
1
110
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Visualization
eitanlees
146
15k
Designing for Performance
lara
604
68k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Making the Leap to Tech Lead
cromwellryan
133
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による認証システム 優れたプロダクトをつくる開発チーム まだまだ話したかったこと。。。