KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

7つのReact Nativeオープンソースアプリ 比較表

f:id:sfujisak:20190201224041p:plain

React Nativeのオープンソースアプリから学ぶ

CTOの Shoken です。キッチハイクアプリはReact Nativeで開発を始めて1年半ほど経ちます。その間、オープンソースで公開されているReact Nativeのアプリを参考に学びながら、開発を進めてきました。この記事では、詳細なコードを読む前に行っているチェックポイントと、オープンソースで公開されているReact Nativeアプリを紹介します。

ソースコードリーディング前のチェックポイント

READMEの次に読むのは package.json

GitHubにオープンソースとして公開してくれている開発者たちのおかげで、私たちはソースコードを読むことができ、多くの知識を得ることができます。ただ、React Nativeのバージョンが低かったり、使っているライブラリが自分たちのものと違っていると、コードの知識を自分たちのプロダクトに活かすことが難しくなります。そのためソースコードを読む前に、いくつかの観点でチェックを行います。React Nativeのアプリではpackage.jsonを読むことで、多くの情報を把握することができます。READMEを読んだあとには、package.jsonを読んでみるのをおすすめします。

React Native, Reactのバージョン

React Nativeのバージョンが違いすぎているとそのままのコードでは動かないので、まずはReact NativeとReactのバージョンをチェックします。また、React Nativeのバージョンアップ履歴があるかどうかもポイントになります。React Nativeは頻繁に更新があるので、React Nativeを使っているアプリはReact Nativeのバージョンアップについていくことが必要となります。このバージョンアップ作業はなかなか大変なので、オープンソースのReact NativeアプリでReact Nativeのバージョンアップをしていると、メンテナンスされているという一つの指標になります。

使用ライブラリが自分たちのものと近いか

主にはreduxとnavigationライブラリをチェックします。キッチハイクではFirebaseを使っているので、react-native-firebaseもあるとなお良しです。

型チェック

JavaScriptの型チェックツールを確認します。Flowだったら .flowconfig、TypeScriptだったら tsconfig.json があります。

テストツール

React Native標準のテストツールJestに加えて、E2E ( Appium, Detox, Cavyなど) が使われているかを確認します。

コンポーネントカタログ

Storybook, Styleguidist, Docz などをチェックします。

ライブラリ構成の比較表

アプリ React Native Ver. React Ver. redux Ver. navigation Type Checker ツール
Rocket.Chat 0.57.8 16.6.3 4.0.1 react-native-navigation 2.8.0 Flow Jest, Detox, Storybook
PxView 0.57.4 16.6.0-alpha 3.7.2 react-navigation 2.3.1 Flow Jest, Fabric, Firebase
FastBuy 0.57.4 16.6.0-alpha 4.0.1 react-native-router-flux 4.0.5 Flow Firebase
Quirk CBT 0.57.1 ( expo v31 ) 16.5.0 - react-navigation 3.0.8 TypeScript expo, Jest
CodePicks 0.57.1 ( expo v32 ) 16.5.0 4.0.1 react-navigation 3.0.9 - expo
GitPoint 0.54.4 16.3.0-alpha.1 3.0.6 react-navigation 1.0.0-beta.27 Flow Jest, Travis CI
AskApiko 0.52.0 ( expo v26 ) 16.3.0-alpha.1 3.7.2 react-navigation 2.0.0 Flow expo, Jest, Sketch

※記事執筆時(2019年1月31日)の情報です。

アプリのライブラリ構成の特徴

簡単に各アプリの使用ライブラリや開発ツールやついての特徴を書いていきます。

Rocket.Chat

README、Storybook、Detoxと開発周りが充実しているオープンソース

Rocket.Chatの特徴は開発ツールが充実していることです。READMEにRoadmapが書いてあり、Features(機能一覧)もドキュメントがあります。StorybookとDetoxまであるオープンソースのReact Nativeアプリは珍しいのではないでしょうか。Detoxのテストケースを書く参考になるオープンソースです。

GitHub上のcontributorsやcommitも多く、開発が活発に行われていることも特徴です。

f:id:sfujisak:20190201221046p:plain

PxView

多くのユーザーに使われているアクティブなアプリ

PxViewはFunctional ComponentやHOCなどの使っていて、実装の参考になるアプリです。HOCは専用のディレクトリを作成して管理してあります。

例えば、FollowButtonというコンポーネントはFunctional Componentで実装されています。 https://github.com/alphasp/pxview/blob/master/src/components/FollowButton.js

キッチハイクにもフォロー機能があるので、参考にさせてもらいました。

Google Play StoreにAndroidアプリが公開されています。高評価のレビュー数が多く、ユーザーに使われていて開発もアクティブなアプリなので、参考になる点が多いです。

f:id:sfujisak:20190201221130p:plain

FastBuy

Firebase Storageのデモ動画あり

Firebaseストレージの管理画面を表示しながらのデモ動画があり、実装後のイメージがしやすいオープンソースです。 サインアップと認証、itemを編集してFirebaseに保存、カメラと写真など一通りの機能が実装されていて、ReactやReact Nativeも最新に近い新しいアプリなので、Firabaseを使ったアプリ開発の参考になると思います。

f:id:sfujisak:20190201221150p:plain

Quirk CBT

TypeScriptが使われているアプリ

今回紹介するアプリでは唯一TypeScriptが使われています。それ以外ではreduxも使っていないシンプルな構成です。

react-navigationが3系で、React, React Nativeも最新に近いアプリです。

f:id:sfujisak:20190201221216p:plain

CodePicks

Qiitaに解説記事あり

CodePicksの開発者による記事がQiitaにあります。

ReactNativeでオープンソースなアプリを開発しました - Qiita

redux, react-navigationを使ったシンプルな構成で、Qiitaに使用しているライブラリの解説も書いてあります。

f:id:sfujisak:20190201221236p:plain

GitPoint

Travis CIまである継続的に開発されているオープンソースアプリ

GitPointは今回紹介するアプリの中で一番のスター数とcontributors数があるオープンソースアプリです。アクティブに開発が行われてます。Travis CIが設定されており、導入する際には参考になりそうです。

f:id:sfujisak:20190201221254p:plain

AskApiko

Sketchファイルが公開されている

Apiko Full Stack Courses 2018 というYouTube動画の、React Nativeコースのデモ用アプリです。このアプリのGitHubにはSketchファイルが公開されており、画面デザインを確認しながらコードを読むことができます。

f:id:sfujisak:20190201221315p:plain

まとめ

この記事ではGitHubにオープンソースとして公開されているReact Nativeアプリを紹介しました。ソースコードを読む前のチェックポイントとしては以下がまとめとなります。

  • package.json を読む
  • React Native, React のバージョンチェック
  • 使用ライブラリのチェック
  • 型チェック、テストツールのチェック

React Nativeアプリのリポジトリから学べることは多く、これからもたくさんのソースコードを読んでいきたいと思います。

We’re Hiring!

キッチハイクではエンジニアのOSS活動を推奨しています。社員、インターン関係なくOSSにPRを出して、マージされています。一緒にOSS活動とアプリ開発をするメンバーを募集しています! React Nativeエンジニア・Reactエンジニア・Railsエンジニア・インターンエンジニアを募集中です!

www.wantedly.com

www.wantedly.com

www.wantedly.com