React+Redux+Firebaseのいい感じチュートリアル紹介

React+Reduc+Firebaseでアプリを作ろうとしているのでいいチュートリアルの紹介

経緯

軽いノリで試してみようと思いつく

• 普段バックエンドしーしゃーぱーであまりにモダンJS界隈についていけなくなった
• 危機感を感じてとりあえず流行りのFirebaseでなんか作ったろうと思った
• とりあえずよく聞くReactでいいんじゃねという軽いノリ

とりあえず触ってみようとしてみて挫折

• Qiitaの記事を適当にみてやろうとしたけどうまくいかない
  • 環境がわるいのかミスっているのかわからん
  • 突然出てきたメソッドの意味とかわからなくて泣きそうになる

観念して本家のチュートリアルやる

• 当然のように英語だけど頑張る
  • Google翻訳の拡張機能を付けることで解決
  • 慣れると普通によめる
  • チュートリアル系の英語めっちゃやさしいことに気づく
• やったのはこのあたり
  • React：https://reactjs.org/tutorial/tutorial.html
  • Redux：https://redux.js.org/basics

これでなんとなくReactとReduxはわかった（つもり）になったぞ！

Firebaseでつまずく

• 意外とReact+Redux+Firebaseの組み合わせで良いチュートリアルがなかなか見つからない
• Qiitaに本当にさわりだけやってみた系の記事はあるけど、、、古い記事が多くてなんとも
• Firestoreまでやっているものは少ない（たいていRealtimeDatabase）
• 仕方ないのでまた英語系で役に立ちそうなチュートリアルを探す
• 結局見つけていい感じだったのは英語系だった

イイ感じだったチュートリアル紹介

• https://medium.com/quick-code/how-to-integrate-react-redux-and-firebase-in-3-simple-steps-c44804a6af38
  • 結構わかりやすく丁寧に解説してくれている
  • ただし手順通りにやってもエラーになるところはある（結構漏れがある）
  • 最新版のGitHubには記事には記載のない認証系が追加されていて参考になる
    • RouteでrequireAuthを呼んでいるところとか
  • componentWillMountとかcomponentWillUpdateの使い方がわかる
• https://www.youtube.com/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3
  • NetNinja先生の神動画
  • 初心者向けにアプリの開発手順を順番にやってくれてかなり丁寧
    • まず一覧作る（いったん固定値セットする）→logで確認する→DB接続…など
  • VSCodeの使い方もかなり参考になった
    • Terminal便利ですね…（今更）
    • Altで矩形選択できるんですね…（今更）
    • HTML Snippets便利ですね…
  • 全部で40本あるので大変ですが、1本1本は10分以内で短いものが多いので分けてみれるよ
  • かなりおすすめです

まとめ

新しい技術を習得するときは頑張って英語の文献も見ると理解が広がる！と思います