はじめに

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

アプリはこちら！
androidはまだでiosしかリリースできていません。。。

アプリ制作をはじめるまで

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

Javascript

プロゲート
Javascriptの基礎を学習しました。

【初心者】React&Redux入門を理解するための超入門/jsの基礎編
プロゲートでは足りなかったのでちょっと深くやったのをまとめた記事です。

Javascript本格入門
おすすめの書籍です。めちゃくちゃ分かりやすかったです。

React、Reduxの基礎

アプリではReduxは一切使っていません。

プロゲート
なんとなくわかった気になりました。

React公式チュートリアル
難しくて挫折したので下の書籍に手を出しました。

React.js&Next.js超入門
優しく解説してあるのでおすすめです。Reduxまでやりました。5周目ぐらいで理解できた気になりました。

React、Reduxなどを深く

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

Typescript
さらっとやりました。

Babel
概念を理解した気でいます。

webpack
概念を理解した気でいます。

Jest,enzyme
テストも書いてない。。。書かないとダメですね。

React Router
ページ遷移は必須なので、これはやってよかったです。

Redux-saga
ほとんど理解できていないです。。。

React入門
Reduxが難しすぎて萎えたので書籍を購入しました。難しいですがやって良かったと思います。写経ですが制作物としてyahooshopランキングができて自信がつきました。

アプリ構想

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

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

JSON Pretty Linter Ver3
jsonのデータを見やすくするのに良かったです。

Reactでaxiosを超絶シンプルに使ってみる！！
非同期通信にはaxiosを使いました。

D3.js
グラフを描画するのに使いました。

React Native

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

ReactNative+Expoではじめるスマホアプリ開発
まずはこの書籍を半分くらいまでやりました。
書き方はReactとほぼ同じなのですんなり理解できました。
環境構築もこの本でできました。

React Native - Debugの方法
デバッグはこれで十分でした。

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

Victory
グラフの描画にはドキュメントが充実している、かつ相性が良かったvictory-nativeを用いました。

React-Native-vector-iconsで使えるアイコン一覧
アイコン一覧が見つからなかったので助かりました。

ReactNativeでレスポンシブデザインを作る唯一の方法
Dimensionを使っても崩れてしまったので最初からこの記事に巡り会えていればよかったです。

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

おわりに

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