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

はじめに

日頃からオープンソースに恩恵を受けてることを強く感じます。
先人たちのお陰でより楽しいソフトウェア開発ができていることに感謝し、僕もその一助になれればと思い、オープンソースで公開することにしました。

謝辞

2018年12月25日現在、iOS版はリリースできていません。審査だけ通ってない状態ですので、手が空き次第リリースできます。リリースの際はこの記事をみてくださった人たちに伝わるようにおしらせします。

アプリについて

CodePicks（コードピックス）と名付けました。
個人開発者やプログラマ・フリーランスの方向けのニュースアプリです。もろ分かりな通り、NewsPicksにインスパイアされてます。

UIも影響を受けていますし、最終的な仕様もNewsPicksのようになれればなと思っています。

Android版URL:
https://play.google.com/store/apps/details?id=com.codepicks

現在の機能と展望について

現在は基本的にニュースの閲覧だけができる状態です。
カテゴリごとに眺めて、気になる記事をWebViewで表示できる感じです。

OSSなので、最低限だけ実装してリリースしました。続きの実装はOSSコミュニティが自走してくれるのが理想ですが、

• 認証機能
• 記事の保存機能（Pick）
• コメント機能

くらいはタイミングを見て僕が実装しようかなという感じです。

ソースコード

自分の端末でアプリを起動するところまでの流れ

Readmeの通りですが、ここにも書きます。

• ReactNative初心者の方は公式ドキュメントをご一読ください。開発マシンは何でも構いませんが、iOSアプリをビルド・開発するにはMacが必要です。
• git clone [e-mail]:KangYoosam/CodePicks.git
• npm install: 依存ライブラリをインストールします。
• react-native run link: ReactNativeの依存ライブラリへリンクします。
• cp .env{.example,} .env.exampleファイルから.envファイルをコピーし、生成します。
• react-native run-ios: iOSのSimulatorを起動します。
• react-native run-android: Androidのemulatorを起動します。

使用しているライブラリ紹介

基本的なの・アーキテクチャに影響があるものだけ書きます。

Redux

状態管理のフレームワーク。
Reduxは学習コストが高いとか複雑になるとか言われているが、個人的にはそうは思わない。ディレクトリ構造もスッキリしてると思う（ソースを参照。ご意見あったらください。）し、使わない手はないくらい便利。

参考:
You Might Not Need Redux

React Navigation

ルーティングのライブラリ。ルーティングは他にもreact-native-router-fluxとかいくつかあるみたいだけど、一通り使ってみて僕にはこれが一番使いやすかった。
Verion3になってから結構破壊的な変更があったけど非常に良い改善がなされたので許容範囲。

react-native-scrollable-tab-view

一覧画面でカテゴリごとにスクロールを可能にしているライブラリ。

Axios

Promise basedなHTTPクライアントツール。JSで通信するならほぼこれがデファクトスタンダードな気がする。

Eslint

言わずと知れたJSのLinterツール。チーム開発だけじゃなく、1人で開発してても全然助かる。VSCodeとの相性が最強じゃった。

NativeBase

よく使うUIの雛形がだいたい入ってる。今回のように、細かなUIにこだわらなくて良いケースとかは実装効率が格段に上がる。

React Native Elements

NativeBaseに同じく。UI構築に便利。FontAwesomeのようなiconを提供してくれるComponentもあるのでこれがないとやってられない。

APIについて

APIに関してはLaravel Novaを購入・導入しているのでオープンにできない。
今の所は取得系だけだし、用意は難しくないと思ったので一旦置いておいてる。.env.exampleには本番のエンドポイントを書いておいたので、APIは気にせずそのままローカルで動かせます。

もっと詳しく知りたい人へ

12月27日に東京で勉強会をやります。その際、アプリを発表させてもらってニーズがあったらハンズオン的なのもしようと思います。参加費等無料なのでぜひいらしてください。
https://r-n.connpass.com/event/112874/

急なので、都合が合わない方でどうしても質問とかあれば↓へどうぞ。
https://twitter.com/kangyoosam