Reactってなんでしょうか、概念ですか？
こんにちは、無資格・無免許エンジニアの三木です。
クイックに入社した時、それまでC++やC#、PHPをメインで触れていた私はバックエンドはともかくwebのフロント開発には大変疎い状態でした。
表題のようなことを素で思っていたレベルです。
インフラもオンプレ歴の方が長く「AWS完全に理解した」とは冗談でも言えず。
…なかなかにまずいですね。
また、時はコロナ禍の初期、在宅勤務が当たり前のようになった結果、誰がオフィスにいて誰が在宅なのかわからないことに一定のペインを感じていました。
よし、このペインを解決するアプリをフロント・バック全て社内FWに寄せて一人で開発して、ついでにAWSの環境も全て作って一気に習熟度を上げよう！
というのが事の発端です。
作るもの・決めごと
- 在宅か出社が一目でわかればOK
- プロジェクトごとのグルーピングはしたい
- GSuiteでアカウントを制御して面倒な手続きはカットする
- 日々の入力も楽にする
- FWはLaravelとする
- Laravelは疎いけど
- TypeScriptとReactにする
- ReactもTypeScriptもあんましわかんないけど
- AWSはterraformでやる
- AWSは疎いしterraformも全然わからないけど
- デザインは不問！XDで最低限を作る
といったことだけ決めて、いざ開発開始です。
Web室ポータルVer1.0
当時はWeb本部ではなくWeb室という名称だったのでこのような名前で。
こういう投稿をすることになるなら、もうちょっとセンスある名前にしておくべきだった…とジャストなうで思っています。
で出来上がったのがこちら（後述のVer2.0の画面となります）
ログインしてもらった後に「オフィスで出勤」「在宅で出勤」のいずれかのボタンを押してもらうと勤怠状況が保存されます。
その勤怠状況がプロジェクトごとにグルーピングされていて
誰がオフィスで誰が在宅なのか…ということがわかる仕組み。
今は色々メニューが増えているのですが、当時は「勤怠共有」のページだけです。
また、画面のメンバーはLaravelのSeederで生成された名前ですので実在しません。
利用したものは下記です。
| 場所 | 利用ツールなど | 備考 |
|---|---|---|
| バックエンド | Laravel | |
| PHP | ||
| php-cs-fixer | ||
| GraphQL | ||
| Lighthouse | ||
| フロントエンド | React | |
| TypeScript | ||
| MUI(4.x) | ||
| ESLint | ||
| prettier | ||
| その他 | terraform | |
| GraphQL Codegen | ||
| Vite | 最初はwebpackだったかも | |
| husky | ||
| lint-staged |
そして構成はざっくりとこんな感じ、SPA構成であまり特別なことはしていません。
terraformはまともにapplyするまでも苦戦したのですが、なにより開発をbacklogのgitで始めてしまったため
自動デプロイに非常に苦労しています。
開発時間の80%がここの解決じゃないでしょうか。
また、Ver1.0の画面が残っていないので2.0で記事を書かせて頂いていますが
当初のデザインはあまり褒められたものではなく同僚のやさしいPRによって今の綺麗なデザインになっています、ありがとうございました。
この開発過程で知りたかったことについては大分詳しくなれたのかなと思います。
とはいえど、習熟度の低いコードが多く、作ったばかりですがリファクタしたい欲求もありました。
そしてそれは実現しました。
PCの交換
これまではmacで開発していましたが、WSL/WSL2+Ubuntuなどによって
あまり開発機にこだわらなくとも体験は変わらないようになってきました。
なのであれば慣れ親しんだWindowsにしちゃえ…とWindows機に交換します。
業務上使うファイルは全部ネットワークにあげているつもりだったので、気軽にWindows機へ。
業務影響もなく1～2ヵ月経過した頃に問題に気づきます。
.tfstateというterraformが利用するAWS上の現在設定が記載されているファイルを消失していました。
インフラメンバーに相談に行ったら「アハハハ」と言われ、復元不可能という事態の深刻さに気付きます。
コンソールから変更をかける事は出来るのですが、せっかくterraform覚えたのに…
importという手段もあるのですがこの時点ではあまり把握しておらず。
諸々考えたのですが、これはもうリファクタしてさらに習熟度を上げようという啓示だと思うことにして
terraformで管理するリソースも含めて１から作り直すことにしました。
ちょうどInertiaなるものが登場しており、GraphQLの代わりに試してみたかったというのもあります。
Web本部ポータルVer2.0
「Web事業企画開発本部」という名前に変更になりましたので、ポータルの名前も変更しています。
利用したものは下記
| 場所 | 利用ツールなど | 備考 |
|---|---|---|
| バックエンド | Laravel | |
| Inertia.js | ||
| PHP | ||
| Larastan | ||
| Pint | <- php-cs-fixer | |
| GraphQL | ||
| Lighthouse | ||
| フロントエンド | React | |
| TypeScript | ||
| MUI(6.x) | <- MUI(4.x) | |
| ESLint | ||
| prettier | ||
| その他 | terraform | |
| GraphQL Codegen | ||
| Vite | ||
| husky | ||
| lefthook | <- lint-staged |
Inertia.jsを追加し、基本の通信はInertiaを介して行うように変更しています。
terraformは全て作り直す気概で始めたのですが、マニュアルからimportコマンドを覚えて
既存のterraformのコードを上手く再利用してAWSを構成しました。
よって基本的な構成は何も変わらないのですが、gitをGitHubに移動したためビルドやデプロイを全てGitHub Actionsで書けるようになり、とても楽になりました。
通信のたびにGraphQLのスキーマを書くのも億劫な部分もあったのですが、Inertiaでかなり手軽にフロントとのデータのやりとりが出来るようになったのも良かったです。
※Inertia.jsについてはこちらの記事を
利用開始～範囲拡大
さて、解決したかった自分のペインは「誰が在宅で誰が出社かわからない」です。
自分の所属するプロジェクトメンバーに説明して、出社時にいずれかのボタンを押してもらうようにしました。
単純な可視化ツールなので効果は十分に得られますし、状態切替は１ボタンなので運用コストも最小限に抑えられたのではないかと思います。
次第に他プロジェクトの状況も見えた方が助かるという要望だったのか、何かの折に他のプロジェクトでも使いたいという話があがったのか、知らず知らずのうちに登録プロジェクトと利用者数は増えていきました。
今現在は14プロジェクト/チームの単位で利用されています。
当初は「利用は任意」色が強かったので気にならなかったのですが、次第に「出退勤の時はこれを打刻しないといけない」という色も強まってしまい、このあたりは最初に気を付けておくべきだったと思っています。
追加した機能
利用が広まっていく過程で段階的に色々追加しました。
ほぼ興味と勉強のためでペインの解決は二の次です。
- スマートフォンでのログイン
- 個人端末で見られると便利ということでレスポンシブ対応の習得に
- QRの読み書きも試した
- 出退勤のSlack特定チャンネルへの通知
- SlackのアプリやAPIを操作したかった
- リワード機能とお金機能
- 健全な出退勤がポータル内通貨に！最も入れたかった機能、でも使い道がない！
- 有志にランチをごちそうしてもらうチケット販売
- とにかく使い道！
- Googleカレンダーを操作したかった
好き勝手に勉強出来てとても楽しいです。
次はシャッフルランチ＋AI、BiqQueryでのデータレイクもしくはSpine2Dか3D Gaussian Splattingのようなビジュアルインパクトのある何かを触りたいなと思っています。
おわりに
「誰が在宅で誰が出社かわからない」のペインは解決しました。
副次的な効果として、場合によるのですが、何か試してみたいことができたときに
ある程度出来上がっているアプリで試せると便利なことが多く、いまでもそういったお試し利用にとても役に立っています。
※ その２を作成しました