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
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
GAEログのコスト削減
mot_techtalk
0
110
時計仕掛けのCompose
mkeeda
1
280
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Code Reviewing Like a Champion
maltzj
521
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Documentation Writing (for coders)
carmenintech
67
4.6k
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による認証システム 優れたプロダクトをつくる開発チーム まだまだ話したかったこと。。。