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

2018/12/25

kangyoosam

はじめに

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

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

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

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

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

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

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

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

ReactNative初心者の方は公式ドキュメントをご一読ください。開発マシンは何でも構いませんが、iOSアプリをビルド・開発するにはMacが必要です。
git clone [email protected]: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は学習コストが高いとか複雑になるとか言われているが、個人的にはそうは思わない。ディレクトリ構造もスッキリしてると思う（ソースを参照。ご意見あったらください。）し、使わない手はないくらい便利。

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

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

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

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

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

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

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

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

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