【React Native】文系1回生が独学でアプリをリリースした時に使ったライブラリ、記事、書籍まとめ

#はじめに

文系大学1回生です。
今は京都のベンチャー企業でインターンをしており、自社サービスの開発でバックエンド(Django)をしています。
フロントもできるようになりたいなーと思い、Reactを独学でやり、なんとかアプリをリリースできたのでまとめておこうと思います。

[アプリはこちら！](https://apps.apple.com/jp/app/%E6%97%A5%E6%9C%AC%E7%B5%B1%E8%A8%88-%E6%96%87%E7%B3%BB%E5%AD%A6%E7%94%9F%E3%81%A8%E5%AD%A6%E3%81%B6%E7%A4%BE%E4%BC%9A%E7%B5%B1%E8%A8%88%E5%AD%A6/id1491159876)
androidはまだでiosしかリリースできていません。。。


#アプリ制作をはじめるまで
初めはアプリを作る気は無かったので、javascript、React、Reduxを2ヶ月ほど勉強していました。

##Javascript

[プロゲート](https://prog-8.com/)
Javascriptの基礎を学習しました。

[【初心者】React&Redux入門を理解するための超入門/jsの基礎編](https://qiita.com/wafuwafu13/items/3a2f38afde66e6c83460)
プロゲートでは足りなかったのでちょっと深くやったのをまとめた記事です。

[Javascript本格入門](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X/ref=sr_1_1?adgrpid=60120324664&gclid=CjwKCAiAxMLvBRBNEiwAKhr-nLXBjZIvyMv_OMpBz9mR6yvCP56lZfZ_P3Z4vj6_548-zN6Jq50FPhoCr6QQAvD_BwE&hvadid=338518119357&hvdev=c&hvlocphy=1009507&hvnetw=g&hvpos=1t1&hvqmt=e&hvrand=10901191009394303209&hvtargid=kwd-332716054270&hydadcr=27268_11561170&jp-ad-ap=0&keywords=javascript+%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80&qid=1576111618&sr=8-1)
おすすめの書籍です。めちゃくちゃ分かりやすかったです。

##React、Reduxの基礎
アプリではReduxは一切使っていません。

[プロゲート](https://prog-8.com/)
なんとなくわかった気になりました。

[React公式チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)
難しくて挫折したので下の書籍に手を出しました。

[React.js&Next.js超入門](https://www.amazon.co.jp/React-js-Next-js%E8%B6%85%E5%85%A5%E9%96%80-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798056928/ref=sr_1_1?adgrpid=75395600344&gclid=CjwKCAiAxMLvBRBNEiwAKhr-nGYv8kSTJQ-w3Sn5DM9MfNc84Ocq4OKjvE6xt9kc9mgvEXnNM47MJBoCRiAQAvD_BwE&hvadid=341064654947&hvdev=c&hvlocphy=1009507&hvnetw=g&hvpos=1t1&hvqmt=b&hvrand=6372893688746338897&hvtargid=kwd-748761268962&hydadcr=27272_11561223&jp-ad-ap=0&keywords=react.js+next.js%E8%B6%85%E5%85%A5%E9%96%80&qid=1576111703&sr=8-1)
優しく解説してあるのでおすすめです。Reduxまでやりました。5周目ぐらいで理解できた気になりました。


##React、Reduxなどを深く
周辺知識も入れておこうと思いました。
アプリでは何も使っていないので、スピードを求めるならやらなくても良かったと思います。

[Typescript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
さらっとやりました。

[Babel](https://babeljs.io/docs/en/)
概念を理解した気でいます。

[webpack](https://mae.chab.in/archives/59782)
概念を理解した気でいます。

[Jest,enzyme](https://mae.chab.in/archives/60066)
テストも書いてない。。。書かないとダメですね。

[React Router](https://qiita.com/katatu801/items/81253b54b6b6713e1332)
ページ遷移は必須なので、これはやってよかったです。

[Redux-saga](https://redux-saga.js.org/)
ほとんど理解できていないです。。。

[React入門](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-NEXT-ONE-%E7%A9%B4%E4%BA%95/dp/4798153354/ref=sr_1_2?adgrpid=75395600344&gclid=CjwKCAiAxMLvBRBNEiwAKhr-nGYv8kSTJQ-w3Sn5DM9MfNc84Ocq4OKjvE6xt9kc9mgvEXnNM47MJBoCRiAQAvD_BwE&hvadid=341064654947&hvdev=c&hvlocphy=1009507&hvnetw=g&hvpos=1t1&hvqmt=b&hvrand=6372893688746338897&hvtargid=kwd-748761268962&hydadcr=27272_11561223&jp-ad-ap=0&keywords=react.js+next.js%E8%B6%85%E5%85%A5%E9%96%80&qid=1576111703&sr=8-2)
Reduxが難しすぎて萎えたので書籍を購入しました。難しいですがやって良かったと思います。写経ですが制作物として[yahooshopランキング](https://shopping-tagawa.firebaseapp.com/)ができて自信がつきました。

##アプリ構想
これだけやってきて制作物が写経だけでは物足りなかったのでアプリを作ることにしました。
アプリを作る前に、まずはhtmlファイル1枚でdomを使って形にしてみました。

[政府統計の総合窓口(e-Stat)のAPIを使ってみよう](https://qiita.com/mima_ita/items/44f358dc1bc4000d365d)
ちょうど講義でe-Statを使った課題が出たので、せっかくプログラミングしてるからみんなと違うことをしたいと思い、APIを使って何かしようと思いました。

[JSON Pretty Linter Ver3](https://lab.syncer.jp/Tool/JSON-Viewer/)
jsonのデータを見やすくするのに良かったです。

[Reactでaxiosを超絶シンプルに使ってみる！！](https://qiita.com/reoisym/items/245e3cdedc194a9f4062)
非同期通信にはaxiosを使いました。

[D3.js](https://www.tutorialspoint.com/d3js/)
グラフを描画するのに使いました。

##React Native
なんとなく形ができたのでReactNativeに手を出しました。
ここで紹介する記事は補足的に使った記事で、ライブラリの使い方はほとんど公式ドキュメントを参考にしました。

[ReactNative+Expoではじめるスマホアプリ開発](https://www.amazon.co.jp/React-Native%EF%BC%8BExpo%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA-%E6%9D%BE%E6%BE%A4-%E5%A4%AA%E9%83%8E-ebook/dp/B07GP9FDX7)
まずはこの書籍を半分くらいまでやりました。
書き方はReactとほぼ同じなのですんなり理解できました。
環境構築もこの本でできました。

[React Native - Debugの方法](https://qiita.com/shohey1226/items/0051844ac3bf9c7610b2)
デバッグはこれで十分でした。

[React Nativeの実は使ってはダメなライブラリ素晴らしいライブラリ(随時更新)](https://qiita.com/kaba/items/569aafd80889bb5d9328)
[【React Native】良さげなコンポーネント紹介](https://qiita.com/YutamaKotaro/items/052768ca01a6369a8ad5)
何を使ったら良いのかがわかったので非常に参考になりました。
``react-navigation``、``react-native-elements``、``react-native-vector-icons``、``react-native-scrollable-tab-view``、``react-native-parallax-scroll-view ``、``react-native-webview``を使いました。

[Victory](https://formidable.com/open-source/victory/about/)
グラフの描画にはドキュメントが充実している、かつ相性が良かったvictory-nativeを用いました。

[React-Native-vector-iconsで使えるアイコン一覧](https://qiita.com/kana-t/items/3cad4fae393b6a5fc8a0)
アイコン一覧が見つからなかったので助かりました。

[ReactNativeでレスポンシブデザインを作る唯一の方法](https://qiita.com/kaba/items/a595ef1e1cad74fc09d5)
Dimensionを使っても崩れてしまったので最初からこの記事に巡り会えていればよかったです。

[React Nativeで iOS/Androidアプリ開発をゼロから始めよう！](https://www.udemy.com/course/react-native-ios-android/)
Udemyの動画です。アプリのリリースってどうやるんだと悩んでいた矢先、セールがあったので迷わず購入しました。
最後の方の動画だけ見て、リリースの仕方を教わりました。
これがなかったらリリースできなかったのでとても良かったです。

##おわりに

ひとまず自分のアプリができて良かったです。
ReactNativeは書き方はわかるのですが、謎のエラーで半日苦しんだりするのがざらにありました。
でも、公式ドキュメントやgithubのissueを参考にしてエラーを解消する自走力はついたかなと思います。
ReactNativeに手を出すまえにReact、Redux等を2ヶ月程度、ReactNativeに手を出してから1ヶ月でできたので全体で3ヶ月くらいかかりました。
アプリの中身を完全体にする前にひとまずリリースしてみようという方針でやってきたので、今後はアプリのボリュームを増やしていこうと思います。
せっかくReactNativeを使ったのでandroidでもリリースしようかなとも思います。
アプリをリリースするにあたってAppleに12000円ほど課金したので他にもアプリを作っていこうと思ってます。
自分の頭で空想したものが形になる素晴らしさに気づいたのでこれからどんどんいろんなもの作っていきたいです。
あとは独学だと限界があるのでReactを実務で使いたいです。