こんばんは。

社内システムの構築プロジェクトが終わったので、日記風にどんなことをやったかを書いていきます。

まず、プロジェクトの概要ですが、社内でExcelで管理している出社状況データ(今日は○○さんはテレワークだよーとか、〇日はお休みだよーとか、部の出社率とかを管理するもの)のweb化でした。

上長からこんな技術使ってとか、こんな風に作ってという指定はありませんでした。

なのでまずは社内の集会などを利用して、どんなシステムを作ったらいいかという皆さんの要望を聞き出すヒアリングから開始しました。

大体20人くらいの方から意見を頂き、すべての意見を反映させることは出来ないので、要望の数が多いものをピックアップして、あとはExcelで管理していたデータをそのままweb上で再現することとしました。

ここで僕にとって幸福だったのは、使用技術の指定がなかったことです。ちょうどプライベートでReactやTypeScript、Node.js、AWSあたりを勉強していたので、SPAでWebアプリを作ってみようと思い、この4つの技術を使うこととしました。

SPAについて簡単に説明すると、従来のよくあるフレームワークでのWebアプリの作り方とは異なり、クライアントとサーバーサイドを独立させて、データのみをやり取りする手法です。

ちなみに現在はGolangで別途APIサーバを作ってこんな感じで機能追加する予定です。
(プライベートで)

まず、React(クライアント側)ですが、stateとpropsを使っていきます（当たり前)。
社内には部署が4つあります。そのため部署1～4のstateが必要です。
そしてカレンダーは月ごとに管理しているので、年(2022とか)と月(1～12)のstateも必要です。

次にログイン機能です。ログイン機能の作成についてはこちらの記事で詳しく説明しています。
https://qiita.com/natarisan/items/b43219f03566da8d0a66
ログインしているクライアント情報を保持するstateも必要です。

これらのstateをprops(場合によってはuseContextとか)を用いてうまいことコンポーネント間で共有します。

そして、各stateが変わったとき、そのstate応じたデータをfetchメソッドやaxiosメソッドでNodeサーバと通信して取ってきます。こんな感じで、fetchメソッドの中に現在のstateを当てはめる形でサーバにリクエストを送りました。

データベースもstateに対応するよう作成し、stateに対応するデータを返すようにしました。

同じくサーバ側で対応するデータの出社率計算機能も作成し、ひとまずアプリは完成です。
React-routerなども用いてやっとSPAっぽくなったなあという印象でした。

続いての記事は、作成したアプリをAWSにデプロイするまでを書いていきます。

今回は以上です。