とっても参考にさせて頂いた大変有益なソースコード

ソースコードを公開されている方々の有り難みを痛感しました。
これらがなければ1人でここまで頑張れなかったです。
ありがとうございます🙇‍♀️🙏

有益ソースコード

• Next.js × TypeScript × Firebase Auth.
  -こちら（ 今更ながらのNext.js + TypeScript + Firebaseで認証機能を実装する ）の記事を書かれた方のコード

  • 全体的にNext.js × Firebase Auth.の実装方法を学んだ
    
    

• Next.js × Firebase Auth.
  -こちら（ チャットApp(next.jsでfirebaseを使う時の注意点)） の記事を書かれた方のコード

  • Firebase Auth.を導入する際に、AuthContextProviderで_app.js内をラップすることが大事だということを学んだ
    
    

• Nuxt.js × RailsAPI × Firebase Auth.

  • こちら（【独学・未経験】Nuxt.js, Rails, Docker, AWS ECS(Fargate), TerraformなSPAポートフォリオを作成しました。）の記事を書かれた方のコード
  • Next.jsではなくNuxt.jsだが、RailsAPI側のディレクトリ構成などを参考にしました
    
    

• Next.js × RailsAPI × Firebase Auth.

  • こちら（Rails + Next.js + Firebase Authentication で認証付きアプリを作成する
    ）の記事を書かれた方のコード
  • 記事自体は簡潔だが、ソースコードを載せてくれているのが本当に助かった
    
    

• React × RailsAPI

  • Techpitのこちらの講座（RailsとReactでUberEats風SPAアプリケーションをつくってみよう！）
    • Next.jsではないですが、RailsAPIの基本的な作り方をここで学びました

その他

スクラップの都合上下に下に伸びてしまうので一番上を「その他」とする。
ほかに分かりやすかったもの、タメになったもののまとめ。

• Web三層構造とは？インターネットが表示される仕組みを徹底解説！
• SPA開発におけるWeb API設計入門（エンドポイント編）
• Next.jsでネストしたルーティングの場合のディレクトリ構造が分かりません
  • Next.jsでのネストした動的ルーティングの実装方法について学んだ

非同期処理 の学習

非同期処理周りの学習の際に分かりやすかったもの、タメになったもののまとめ。

Promise（JavaScript）の学習で良かったもの

• 今日こそJavaScriptの非同期処理とPromiseを理解しよう！
• JavaScriptのPromiseって何？を解決したい
  　→ Promiseの説明としては分かりやすいが、アロー関数表記じゃないのが惜しいところ
  　→ ある程度アロー関数に慣れていたら自分で書き換えて実践してみるのがいいかも？
  
  

非同期処理 の学習で良かったもの

• ラーメンで理解するasync/await

Next.jsで認証機能を実装しようとしたときに調べたあれこれ（Firebase Auth.）

useContext の学習（基礎）

まずそもそもuseContextなんてものがあることを知らなかった。
コンポーネント間で状態が共通したグローバルなステートを持った変数などを利用できるようになる。
そんなuseContextの学習の際に分かりやすかったもの、タメになったもののまとめ。

基礎理解として良かったもの

• 【React hooks】噛み砕いて解説してみた~useContext編~
• こんなに簡単なの？React useContextって
• React Context API と useContext() の使い方
  
  

実際の実装の参考になったもの

• useContextの使い方
• nextjs with typescript:37 useContext
• 【React】 Firebaseを使用して認証機能の実装
  
  

その他個人的なメモ

useContextで子コンポーネント共通で使用できるグローバル変数?のような変数はSPA上ではずっとステートを維持できるが、リロードなど（更新ボタンを押すとか）の場合にはステートが初期値に戻るみたい。

リロードした後にもログイン状態の変更を検知するために、Firebase Auth.のonAuthStateChangedメソッドを使ってリロード後のログイン状態の判定をする（useEffectで初回のみ実行）
　→ リロードしたはずなのにそのログイン状態はどこから判定しているのかというと、Fb AuthがIndexedDBというローカルストレージ的なところ?にログイン状態を保持していて、そこを参照してログイン状態の判定をすることができるとのこと
（参考：firebase.auth().onAuthStateChangedはどうやってログイン中であることを判定しているんでしょうか？）

Firebase Auth. の学習

Firebase Auth. の学習の際に分かりやすかったもの、タメになったもののまとめ。

• Firebase Authentication を利用した認証システムの実装
• Firebase Authentication これだけは覚えておけ！テストに出るぞ！
• Firebase Authentication を利用した認証システムの実装
  • onAuthStateChangedの使い方を知った
    
    

Firebase Auth. × Next.js の学習

Firebase Auth. × Next.jsの学習の際に分かりやすかったもの、為になったもののまとめ。

• React(Hooks)で認証付きリアルタイムチャットアプリを作ってみた。
  　　→ Next.jsではなくReactだが参考になる
• 【React】 Firebaseを使用して認証機能の実装
  　　→ Next.jsではなくReactだが参考になる
• Next.js を使ってみる（TypeScript + firebase + Recoil + vercel) その1
• チャットApp(next.jsでfirebaseを使う時の注意点)
  • Next × Firebaseのソースコードを公開してくれている。有り難い。こちら
  • ソースコード内にはメアドやパスなどのバリデーションのコードも書かれているので今後参考になるかも
• FirebaseAuth,Firestoreでログイン処理
• Next.js × TypeScript × Firebase AuthenticationでGoogle認証を実装する
  • AuthContextや_app.jsの構成など、恐らくめちゃくちゃ参考にした
• Typescript×React×Hooksで会員管理②Contextでアプリの状態管理
  • NextではなくReactだが参考になる
• Next.js、TypeScript、FirebaseAuthでメール認証(確認メールつき)
• ReactHooks + Firebase(Authentication, Firestore)でTodoアプリ作る
• (React + Firebase Authenticationでログイン機能を簡単に実装する)[https://qiita.com/setsunachan/items/3e375a59030d68642f2a]
  • Reactだが簡潔でわかりやすく参考になる
• 今更ながらのNext.js + TypeScript + Firebaseで認証機能を実装する
  • この方の記事はとても参考にした。ソースコードもある神。こちら
  • Tailwind使っているところにも親近感

Cookieを用いた認証についての参考記事（universal-cookie）

• NuxtでFirebase AuthのトークンをCookieに入れたり出したりする
• 【Rails×Nuxt.js】デモプロジェクトの作成とHerokuデプロイ(ログイン認証完)

e.preventDefault() の学習

フォーム送信時によく見かけるpreventDefault周りの学習の際に分かりやすかったもの、タメになったもののまとめ。

preventDefault() の学習で良かったもの

• 【JavaScript】event.preventDefault()が何をするのか
  　→「フォームからonSubmitで発火した時の関数内にあるpreventDefault()がどういう役割を果たしているのか」についてのみ端的に記述してあってとても分かりやすかった
• JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識

Rails(Ruby)関連 の学習

RailsでのAPI開発の際に分かりやすかったもの、タメになったもののまとめ。
また、Rubyに関しての分かりやすかった記事などもその他などにまとめています。

Railsでのデバッグ用Gem pry-byebug の学習で良かったもの

• Rails で開発する場合はまずは byebug （pry-byebug）の使い方を学ぼう
• 【Rails】Pryについて徹底解説！
• pry-byebug を使ってRailsアプリをデバックする方法
• pry-byebugでrubyをデバッグする
• Rubyのpry-byebugを使いこなす！7つの方法
  
  

Rails × Firebase Auth （× Next.js）の認証関連で参考になったもの

• Rails + Next.js + Firebase Authentication で認証付きアプリを作成する（とりわけ参考にしたもの1）
  • Qiita記事自体は簡略的だが、ソースコードを載せてくれているのがとても助かる（こちら）
• RubyでFirebaseのidトークンを認証に使ってみる（とりわけ参考にしたもの2）
• [Railsアプリ、pay.jp、firebase]決済機能付き駐車場貸し出しアプリを自作した（とりわけ参考にしたもの3）
• Firebase+React+Railsでの認証の流れ
• Rails と Firebase Authentication でJWT認証実装してみた
• Rails API×Firebase authの場合、Railsは何をすべきなのかを考えた【設計編】
  • この記事は本当に参考になったんですが、続きの【実装編】を更新せずに消息不明となってしまっていてとても悲しかったです…
• Firebase公式 IDトークンを検証する
• フロントから送ったJWTトークンを、Rails側でどのように受け取ればいいのかの参考になったもの（とりわけauthenticate_with_http_tokenについて）
  • Rails でトークンを扱う方法
  • Rails でトークン認証 API を 15 分で実装する
  • 【Rails】RailsでAPIの簡単なトークン認証を実装する
  • JWTとは何か?(ruby-jwtのインストール)
    • これは受け取り方ではないがruby-jwtによるデコード方法などについて参考になった
  • RubyでFirebase Authenticationトークンを検証するサンプル
  • Firebase Authentication の ID トークンを Ruby で検証する
    
    

公開鍵暗号方式についてタメになったもの

• 公開鍵暗号方式とは？初心者でもわかる公開鍵暗号方式の基礎
• 公開鍵と秘密鍵の仕組みや違いについて分かりやすく説明してみた
• 公開鍵暗号方式 (public- key cryptography)とは
  
  

Rails（Ruby）でのHTTP通信についてタメになったもの

• Railsでhttps通信を使ってjsonでPOSTする
• 【Rubyでhttp通信】net/httpを使ってgetリクエストする方法
• RubyのHTTPリクエストをできるだけシンプルに実装する
• railsでhttpsのWEB APIの取得方法
• 【Rails入門】JSON.parseでパラメーターをHashに変換する方法
  
  

多対多のアソシエーションについてタメになったもの

• Ruby on Railsにおける多対多の関係の実装
• [Rails]多対多のモデルの実装、コントローラー、ビューの書き方
• railsで多対多のアソシエーションの作り方と、出来ること
  
  

1つのデータに紐付いた複数のデータを登録する方法（1つの質問をDBに登録する際に複数の問題画像をDBに保存するみたいな例）

• has_manyで関連づけられたモデルも一括保存する方法
• 【Rails】has_many と belongs_to のリレーションで データベースに保存する
• Railsにおける未保存状態のリレーションモデルのつくりかた
• 【Rails】モデルの関連付けで用いられるbuildメソッドまとめ
• Railsモデルの関連付けで、buildを使うときのメソッド名
  
  

その他

• React Hooks + Rails APIを使ったログイン・認証系機能の実装手順
• RUNTEQ勉強会レポート　Railsで学ぶCookieとセッション〜入門編〜
  
• 【初心者向け】丁寧すぎるRails『アソシエーション』チュートリアル【幾ら何でも】【完璧にわかる】🎸
• concernsディレクトリについて[Rails]
• Rails API × Vue.js × Firebase AuthでSPA入門
• 図解 X.509 証明書
• ストロングパラメータをprivate以降に記述する理由
• ローカル変数・インスタンス変数・クラス変数の違い(Ruby)
• Railsのfindメソッドがすぐ分かる！find_byとの違いも即理解
• 【Rails×JWT】ログイン認証解説とJWT初期設定ファイルの作成
  
• HerokuのclearDB MySQLをUTCからJSTに変更したい

useSWR の学習

useSWRの学習の際に分かりやすかったもの、タメになったもののまとめ。

useSWRの学習で良かったもの

• 公式（概要）
• 公式（Next.jsのSSGなどと併用する方法）
• そうです。わたしがReactをシンプルにするSWRです。
• 【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい
• 【React】クライアントでデータを素早くフェッチするSWRの使い方
• nextjs with typescript:20 SWRの使い方

Reactで作成するフォーム の学習

Reactで投稿フォームなどを作ろうとした際に分かりやすかったもの、タメになったもののまとめ。

Reactでのフォーム作成で参考になったもの

• React入門チュートリアル (4) フォームとイベントハンドリング