今回は、社内アプリケーションのプロトタイプを作成したので報告と称してブログにまとめています。プロダクトにならないほど簡易的な仕組みですが、小さなところからUXを上げていくことがエンジニアの本質なのかもしれないと思っています。要件がざっくりと決まっていればあとは作るだけですね。プイっと作ってみました。

はじめも

どもども！外は暑いし、電気代は高い！悲しみの中でコードをポチポチ作っている龍ちゃんです。お盆も始まりそうな雰囲気を感じながら、手を動かしています。今週はええ感じに時間を作ることができました。今週の成果として「依頼者への報告」まで済んだので、個人的な報告としてブログを執筆しています。

さて～今回の内容としてはタイトルに書いているとおりの内容になっています。ちょこっと社内の定期イベントがあったのです。そこでよくエクセルが出てきていて、使い勝手が悪かったのでサイトにしてみました。要件として「社内アプリケーション」とのことで、いつものようにリンクを載せるわけにもいかないところが悲しいところです….

アプリを使えないだけで、僕が作ったので大体全部を公開していこうと思います。

いったん小休憩

本題に入る前に、日記レベルの書き物でもしておきます。

お盆シーズンですね。今年は年末に実家に帰省する予定だったので、お休みを申請することなくお家でお仕事をしています。三連休はいかがお過ごしでしたか？とりあえず海行って、岩盤浴行って、餃子を作っていたら三連休が溶けてしまっていた龍ちゃんです。社会人になってから初めての海水浴でしたが、海は楽しいですね。入社してから、釣りや軽めの登山などアクティビティ森通しの生活をしています。基本がインドアな自分を連れまわしてくれる、同僚や上司に感謝ですね。旅の思い出の写真を乗っけておきます。

社内アプリケーション

さて、リハビリがてらの日記を書き終えたので本題に戻っていこうと思います。今回は「社内アプリケーション」の作成なので、要件は超絶ふわっとな感じから入りました。全体を通してやったことを書いておきますね。

• ふんわり要件定義
• ワイヤーフレーム・デザインカンプ作成
• アーキテクチャ決定
• コーディング
• デプロイ
• お披露目会・改善会議

こんな感じの流れで開発していきました。実働としては、トータル3日程度で「お披露目会・改善会議」までこぎつけました（ひそかな自慢ポイントです）。

では順を追って書いていきます。認識していた要件です。

• 情報を入力して公開する（名前、日付、その他）
• 公開された情報に「いいね！」スタンプを送ることができる

ざっくりと二点になります。この要件を満たす仕組み自体は「Google Sheet」で実現されていました。といっても自動化されていたのは「いいね！」ボタンを押す部分だけでした。入力の際は、自分で空いている行を見つけるか、行の挿入で追加するかの二択でした。イメージを下に置いておきますね。

「いいね！」ボタンを押すとGoogleのアイコンが隣の列に挿入されるというものです。この仕組みであれば、コーディングも必要ないので簡易的なDXという感じがして非常に好きですね。といってもエンジニアなので、アプリケーションに変更していくのですが…

まず一番最初に行ったことは、デザインの作成です。

そこはもちろんFigmaで作りましたね。何ならちょっと頑張って、画面仕様書まで作っておきました。これは、プロジェクトで学んだことのアウトプットにもなるなとのことでまじめにやりました。この辺は頑張る機会があれば、ブログにまとめようと思います。Figmaに関する記事も最近書いたのでぜひ読んでください。

画面仕様書も作ったので、必要なアーキテクチャの選定に入りました。入力者の情報が必要とのことで、Googleアカウントでの認証を選択して、DBも寄せる設計になりました。それではドーンとアーキ図を乗っけておきます。

アプリとしては、「React＋Tailwind＋TypeScript」で作成しています。コードの管理と反映は「GitHub」を使用しています。デプロイ先は「Azure Static Web Apps」です。また認証とDBとして「Firebase」を使用しています。

ここまで作業してやっとの思いでコーディング開始です。特に面白い話もないので、割愛しておきますｗ。デプロイもつつがなく終了しました。

完成した感動をもとに、お世話になっているマーケのお姉さんと同僚にアプリレビューをもらいに行きました。そこから意見をもらって修正案をもらう段階まで来たという感じです。

もちろん、プロトタイプなのでセキュリティなどの本来考慮するべき事項はガン無視してました。なのでめちゃめちゃ楽しかったです。

学び

こんな感じでプチプロジェクトを回していたわけです。ここから得た考えや学びについてまとめは以下になります。

• フロントエンドエンジニアにはFigmaが必要だ！！
• 小さいプロトタイプのアプリならFirebase最強！！
• セキュリティどうしよう
• プチプロジェクトの場合は、デザインに悩むよりも見せて叩いてもらえば一石二鳥

「Figma」や「Firebase」の話は非常に有名だと思うので使ったことないフロントエンドエンジニアの皆さんは覚えましょう。可能性が広がります。フロントだけでアプリを作成することができるのが素晴らしく良い点です。

次にセキュリティですが、悩ましい限りです。今回は、Firebaseの認証部分で特定のドメインからしかアクセスできないようになっています。あとは、IP制限周りだけ整備すればよいのでは？と思っていますが、これは本当に難しいので先輩に聞くしかないですね。

最後は、「人に見せよう」という内容ですね。プロトタイプの場合では、デザインで悩む時間はちょっともったいないように感じます。なぜなら要件定義もふわっとしているので、デザインがガラッと変わることも大いにあります。特に自分の中にアイデアがないのであれば、無難なデザインにしておくに限りますね。人にぶつけて、意見をもらえば新しい知見を得ることも可能になります。実際に六人ぐらいの人に見せたのですが、新しい意見をめっちゃもらえました。恥ずかしがらずに自慢しましょう。

終わりに

爆速でアプリを作るのは楽しいですが、作りこむのも楽しくなってほしいですね。これぐらいのアーキテクチャであれば、皆さんも最短一日でアプリを作ることができるかなと思います。なのでトライしてみてはいかがでしょうか。

三連休も明けたので、今週も張り切って仕事していきたいと思います。

最近のポエムも乗っけときます。ちょっと興味あれば読んでみてね。

ではでは～