Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web開発者がReactNativeでProgateアプリを開発した話

Kenta Murai
February 22, 2018

 Web開発者がReactNativeでProgateアプリを開発した話

ReactNativeはいいぞ、という話です。

Kenta Murai

February 22, 2018
Tweet

Other Decks in Programming

Transcript

  1. 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 , 村 井 謙 太

    View full-size slide

  2. 村井謙太 - Progate共同創業者 & CTO
    自 己 紹 介
    Progate ( https://prog-8.com )というプログラミング学習サービスを作ってます。
    サーバーサイドにはRailsやNode.jsを、webフロント開発にはReactを使っています。
    インフラもたまにやります。
    @wyvernMurai
    ....最近モンスターハンター買いました(初⼼者)

    View full-size slide

  3. iOSアプリをリリース
    デモリンク:
    https://youtu.be/0OLtyLc0QiA
    ※ 2018年1月リリース
    プログラミングを学べるアプリ
    教育カテゴリ1位を獲得
    - ReactNativeで開発

    View full-size slide

  4. React Nativeファンとして
    布教したい!
    日本では知見や事例がまだまだ少ない、、、

    View full-size slide

  5. そもそもReactNativeとは?

    View full-size slide

  6. R e a c t N a t i v e に つ い て
    ・Reactを使ってネイティブアプリを作れるプラットフォーム
    ReactNativeとは
    ・iOSアプリとandroidアプリを両方対応できる
    ・世界的に有名なアプリで導入されている

    View full-size slide

  7. R e a c t N a t i v e に つ い て
    webのReactでお馴染みの方法でコンポーネントを作る。
    のようなwebのタグでなく、ReactNativeが用意している
    などのコンポーネントを使用する。
    実際のコードどんな感じ?

    View full-size slide

  8. ReactNativeの偉大な点

    View full-size slide

  9. 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開発において即戦力になる。

    View full-size slide

  10. R e a c t N a t i v e の 偉 大 な 点
    ライブリロード、ホットリロードが標準で備わっている。
    一切設定不要。
    コード書いて3秒で動作確認できる。
    2. ビルド速すぎて最高!
    デモ: https://youtu.be/bwrlRo6iLoA

    View full-size slide

  11. 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

    View full-size slide

  12. ReactNativeの辛い点、、、

    View full-size slide

  13. R e a c t N a t i v e の 辛 い 点 、 、 、
    エラーが起きた時、機能の実現方法がわからないときなど、ネット上ではほぼ
    100%日本語で回答が見つからない。
    英語ドキュメントを読み込む必要がある。
    ソースコードなどの1次情報を見る必要性が多々ある。
    → エンジニアとしてのレベルが上がっていいことかも、、、?
    1. 日本語の情報が少なすぎる

    View full-size slide

  14. R e a c t N a t i v e の 辛 い 点 、 、 、
    外部ライブラリのセッティングなどで、objective-Cなどネイティブのコードを
    書く必要性がたまに出て来る。
    ほとんどコピペで動くが、たまにデバッグが必要になるので、キソのキくらい
    は知らないとまずい。
    Progateのリポジトリでは20行くらい存在する。
    2. たまにネイティブコードを書く必要性あり

    View full-size slide

  15. リリースまでしてみて得られた知見

    View full-size slide

  16. リ リ ー ス ま で し て み て 得 ら れ た 知 見
    fluxアーキテクチャのフレームワークとしてデファクトスタンダードになりつつ
    ある。
    洗練されたフレームワークなので、これを選んでおけば間違いない。
    若干学習コスト高め。
    1. redux使おう

    View full-size slide

  17. リ リ ー ス ま で し て み て 得 ら れ た 知 見
    アプリ開発は状態が多くて複雑になりやすい。
    関数の入出力などが安定していないとバグを引き起こしやすい。
    flowかtypescriptを用いて、静的型付けをしましょう。
    2. 静的型付けしよう

    View full-size slide

  18. リ リ ー ス ま で し て み て 得 ら れ た 知 見
    アプリに限った話ではないが、アプリは複雑になりがちな故、テストがより重
    要となる。
    複雑なロジックはテストを書いていないと後半つむ。
    jestが標準で入っているので開発初期からテストを書きましょう。
    3. テストは早めから書こう

    View full-size slide

  19. リ リ ー ス ま で し て み て 得 ら れ た 知 見
    パフォーマンスは結構すぐ悪化するので注意。
    以下の3つのツールを使うとよい。
    ・ReactNative標準の簡易プロファイラ
    ・Chromeのperformanceツール
    ・xcodeのInstruments
    デバッグビルドとリリースビルドではアプリの動作速度がまるで違うので、パ
    フォーマンスチェック時には必ずリリースビルドにする。
    注: プロダクトの開発初期は気にしなくてよい。開発後半でやりましょう。
    4. パフォーマンスチューニングは必須

    View full-size slide

  20. サマリー
    web開発でReactを使っていて、
    アプリ開発未経験な人はReact Nativeは素晴らしいツールとなります。
    みなさん是非使ってみてください!
    ReactNative仲間が増えると嬉しいです。

    View full-size slide

  21. Progateはエンジニアを
    絶賛募集中です!

    View full-size slide

  22. ご 清 聴 あ り が と う ご ざ い ま し た 。
    P r o g a t e . I n c , 村 井 謙 太
    ReactNativeのおすすめライブラリ
    Expoを使うべきか
    ReactNative周りのエコシステム
    スケーラブルなreduxのアーキテクチャ
    reduxアプリにおけるパフォーマンスチューニング
    JWTによる認証システム
    優れたプロダクトをつくる開発チーム
    まだまだ話したかったこと。。。

    View full-size slide