Zenn
📝

自主制作サイトの作成にあたり考えた事、大変だった事

2021/10/10に公開
Rails
React
TypeScript
Redux
SPA
tech

この記事では、自身で作成したWebサイトの作成にあたり、考えた事、大変だった事等を主にフロントエンド側を紹介します。

作成サイトについて

サイト名はMoneyFlowといいます。
家計簿管理アプリとなります。

作成理由

初めてSPAシステムの作成を行いました。
その際、実践的なものが一番良いと思い、ログイン機能とCRUD機能があるシステムを作ろうと思い作成しました。
サイト的にはまだまだ不十分ですが、勉強にあたりたくさんのことを学ぶことができたシステムとなりました。

サイトへのアクセス

MoneyFlowへアクセスできます。
使用する際は、下記IDをご使用ください。
USERID : user1@gmail.com
PASSWORD : user1@123

使用技術

フロントエンド

  • TypeScript
  • React
  • Redux
  • Material-ui v4

バックエンド

  • Ruby
  • Ruby on rails

DB

  • MySql

IDaaS

  • Auth0

インフラ

  • AWS
  • Docker
  • docker-compose

作成機能

ホーム画面からLOG INボタンを押すとログイン画面に遷移します。

ホーム

ログイン

ログイン後、一覧画面に遷移できます。

一覧

追加と書いてある所を押すと、入力項目が表示されます。

一覧 登録

何も入力せず追加ボタンを押すとエラーとなります。

一覧 登録
入力後、追加ボタンを押すと下の一覧に表示されます。

一覧 登録前

一覧 登録後

項目の右横にあるメニューバーを押すと編集・削除が選べます。

一覧

編集中

編集後

考えた事

SPAシステムを作る上でログイン後の認証済みをどこに保持させる方法

サーバーサイドシステムでは、セッションに認証済を保持させます。
しかし、SPAではクライアントで基本は動くため、セッションに保持はさせれません。
Cookieに保持されることができますが、脆弱性の観点であまりよろしくないということを知ったため、IDaaSを提供しているAuth0を使用しました。
公式サイトを貼っておきます。
Auth0公式

認証したユーザのデータを取得する方法

どうやって認証したユーザのデータのみを取得することができるのか、処理の流れを考えました。
上記でも説明した通り、Auth0を使用してログイン認証を行ったため、API側でログインユーザの情報は保持していません。
ですので、今回はJWTをAPI通信時に送ることで、API側でもログイン認証を行いデータの取得を行いました。
これで直接APIのURLにアクセスしてもデータは取得できませんし、ログインしたユーザのデータしかいじることができません。

大変だった事

データの取得・保持

React,Reduxを使用する事自体初めてだったため、どうやってデータを保持するのか仕組みを理解するのに苦労しました。
データを取得して表示するまでに、２周間近くかかってしまいました・・・
時間がかかった分、画面に表示できたときはすごくうれしかったです！

APIとの非同期通信で上手く行かない時

システムを作る際、エラーとの格闘が基本かと思います。
その際、非同期通信が上手く行かないときにバックエンドが悪いのかフロントエンドが悪いのか、調べるのに苦労しました。
ある程度知ってしまえば、見つけることができるようになりました。
それまでは、何が悪いのかわからないという深みに何度かハマりました。

終わり

ここまで見てくださりありがとうございました。
今回始めてSPAシステムを作成しましたため、サーバーサイドシステムとは違う作りで苦労はしました。
ですが、それ以上にSPAシステムのおもしろさに触れることができました！
今後はさらに知識を深められるように勉強を続けていきたいと思います！！

ツイッターもやっているのでぜひフォローもお願いします！
Twitter

Discussion