【⏱12h💥】社内勉強会カルチャー「Hello Study」の枠組みの中で、爆速でWebアプリを作ろうとした

当社では、社員が主体的にスキルアップできるよう、定期的に勉強会「Hello Study」を開催しています。
Hello Study は、各チームが自由に学びたいテーマを選び、定期的に知識を共有し合う場です。
今回の記事では、各チームが Hello Study を通じて学んだことや発見した知見を紹介します。
各チームの学びの成果をお楽しみください！

私たちのチームは「Webアプリの制作」をテーマに選び、普段の仕事とは無関係の、まったく自由なWebアプリ作り（要爆速）に勤しみました。

Hello Studyでは、普段仕事で開発をやっているからこそあえてそこからかなり離れた自由なテーマで勉強会をするチームが割合としては多いのですが、この Webアプリの制作 テーマを選んだメンバーは「クライアントワークの楽しさはそれはそれとして、たまには完全に自分たち主導の開発もやりたーい」な人たちが集まったチームなのだと思います。

とはいえHello Studyで１クールごとに用意されている期間はおおよそ3ヶ月・時間は週に1回1時間で、合計では12~14時間ほどしか割けません。いくら普段仕事でやっているからといっても12時間たらず（しかも連続していない時間）で何か１つ動くアプリを作るって「どこまで何をやれるんだ！？」状態で、けっこう無茶なことは確定でした（笑）

💥とにかく走りだせ！過去についえたネタを使うぞ！

企画検討からやっていると当然時間が無いので、今回作るアプリのネタは過去にやろうとして出来なかった社内企画（検討止まりだったもの）から一部の要素を切り出したものにすると決めていました。

元ネタの猫の健康管理アプリ企画。こんな感じのサムシングでした。

今回一部切り出しで作るのは・・・

その名も　「 CATCARD -ウチの子紹介カード生成アプリ- 」

やりたいこと自体は至ってシンプルなアプリで、「猫ちゃんのプロフィール情報を入力したり、デザインを選んだりして、ウチの子専用の自己紹介カード画像を作れる」アプリとなっています。

💥想定デザイン、全体構成

大きく分けると3つの主要の画面「ランディングページ」「カード編集ページ」「カード完成ページ」と、
2つのサブ画面（モーダル含む）「カードデザイン選択」「写真選択＆切り抜き」で構成されるような形となっています。

ランディングページ

• トップページとしてアプリ機能への入り口となるページ。
• どのようなアプリかも説明する。

カード編集ページ

• ランディングページトップの「さっそく作ってみる」ボタン、もしくは「ウチの子で作ってみる」ボタンから進めるアプリのメイン機能の画面。
• ここで猫ちゃんのプロフィール情報の入力や画像の挿入とクロップ、カードデザインの変更ができる

カード完成ページ

• カード編集画面で「完成画像を出力する」ボタン押下から進む最終画面。
• 完成したカード画像を保存できる。
• アプリのシェアを促すリンクなどもある。

💥結果、どこまでいけたか。完成したもの

様々な調整余地やデザイン通りに行き切っていない所を残しつつも、なんと「なにかしら動くもの」まで漕ぎつけました！🎉

→ 現状ここまで!! 完成アプリへのリンク

💥やってみてどうだったか？開発の工夫、利用技術など

フジト：
時間がないので、とにかく急ぎで設計しようと思いました。
また、その設計の段階で、最低限公開するのに必要なことだけに絞ろうと思いました。
具体的には以下、

* ドメインなし
* もちろん証明書もなし
* バックエンドなし
* 公開はs3の静的ホスティングを利用
* デプロイもdevopsとかは考えずに配置するだけ

です。
個人的にreactでの開発をほとんどしてなかったので、出だしに苦労しました。
が、それと同時に、だからこそ最初からchat-gptをフル活用することを決めていたので、9割以上はchat-gptの書いたコードを採用し、爆速でコードを作ることをができました。
また、そのコードを理解する作業をとおして、最後はかなりreactに習熟することができました。

ガフニー：
​フジトさんとイワキさんと一緒に開発してすごく楽しかったです。私は遅く入りましたが、この二人は私を優しくて入らせて歓迎しました。イワキさんのデザインとフジトさんの実装を見ると、「やっぱりベテランだな。。。」といつも思っていました。久しぶりReact.jsを使って、データベースがなくてLocal Storageを使うようになりました。しかし、Local Storageの使い方（保存・習得）が分からなくて大変でした。時間をかかりすぎてイワキさんの素晴らしいテーマ機能を実装できませんでした。もっと時間があればよかったと思いますが、いい勉強でした。

イワキ：
てんやわんやしながら進められて大変楽しかったです。
生成できるカードのデザイン案は元となった企画のベースがあったので苦労しなかったのですが、それでも全く時間が足りませんでした。結果画面ではもっと気の利いたデザインを考えたかったのですがその暇すら無く…ランディングページや編集ページも最低限の整えで終了、かなり簡素なものに。
カードデザインをユーザーがカスタマイズ出来るのがアプリのミソなので、選択肢として用意するパターン素材やテクスチャーなども自前で用意するのをワクワクしていたのですが、やはり時間が無く。笑　そこはAdobe Firefly (生成AI)を使ったりしながら時短しました。（が、そこは残念ながら実装ならず！）

一部終業後に触ったりもしていましたが、これのブラッシュアップ、せっかくだからやり切りたいなぁ～あともうちょっとじゃん！という気持ちです。とはいえこの短時間で動く物が出来て、他の２人スゲェ！となると共に感謝です。👏

💥おわりに

いかがでしたか？ferixの社内文化に触れていただくと共に、私たち猫チーム（猫チーム？）のギリギリ感を楽しんでいただけたでしょうか？
あらゆることがギリギリでしたが、チーム的には短期ハッカソンみたいなノリで存分に楽しめました。

今回の記事は社内向けの発表用資料としての役割もありつつ、発表後は各チーム一斉に投稿する仕組みです。どうやら閲覧数や反応数などで順位の高かったチームにご褒美があるそうなので、みなさん良ければ記事の「💛」をポチっとお願いします！