推しを布教できるウェブアプリWAIFU sharing

主な使用技術：React TypeScript firebase

目次：

|   制作のきっかけ  |   苦労したこと  |   試行錯誤  |   工夫  |   完成品について  |   今後について  |

Reason制作のきっかけ

このアイデア自体は私自身が出したものではありませんが、友人と「オタク」な会話で盛り上がっている際、ふと話題に上がりました。「推しを布教したけど反応がイマイチで刺さらなかった」、「新たな界隈に足を踏み入れてみたいけど、出会いがない」この双方を解決できるウェブアプリを作ってしまおうという話から、今回のWAIFU sharingの制作が決定しました。この布教がうまくいかなかった、みたいな経験は、オタクなら誰でも経験したことあると勝手に思っています。それくらい今の日本の文化によく刺さるアプリケーションだと思っています。
なお、今後「オタク」という言葉を使いますが、差別の意図は一切ありませんし、私自身オタクです。何かに熱中している人という意味合いで使います。
「推し」は、その熱中先の人やキャラクター、グループ等を指します。
「布教」は、他人にその推しの良さを伝え、好きになってもらう、またはハマってもらおうとすることを指します。
ちなみに「WAIFU sharing」という攻めたタイトルですが、海外のネットミームで「WAIFU」とは推しのことを指します。「推しを布教/布教される」という意味合いで、この名前を付けました。

Difficulty苦労したこと

今回の開発で私は初めてReactもTypeScriptも触ることになりました。しかし開発期間は10日間、ましてやその最初の方は、U22の提出に追われていましたので、実質7日間程度でした。そのため、1日で本を読みながら書いてなんとか習得、とにかくわからないなりに色々書いてみて、技術担当のメンバー(石田)に教えてもらいながら書いていました。
この短期間で一気にインプットとアウトプットを詰め込んだのは相当な苦労でしたし、終わらないかもしれないというところまできて、ひたすらに期限に追われていました。ただ、この学習によって新たな技術が身に着きましたし、部品化して無駄な開発を減らすという考え方やその分担などの経験もできたのは、とても良い機会だったと考えています。

Trial and Error試行錯誤

そうはいっても、Reactに関しては石田もあまり使用経験がなく、どう開発を進めていくか、ただひたすらに試行錯誤を繰り返していました。Hack Uではヤフー株式会社様の社員の方が数名サポーターとしてチームについてくださるので、その方々を頼りながら開発をしていました。
例えば、1度しか呼び出さないかもしれない部品はコンポーネントとしてファイル分割するべきか、それともベタで書いてしまうべきか等々。道なき道を2人で突き進んでいた感じだったので、先が見えない中で、試行錯誤という言葉が良く似合うほどに日々考えながら開発をしました。

Ideas工夫

このシステムでは、データベース(firestore)の構造や、「おすすめ機能」の、どのようにおすすめを芋づる式でやっていくかという部分の開発で工夫しました。何よりも、ピンポイントにターゲットを絞って布教する、布教されるというのがこのシステムの要になるので、どのように実装するかについてはよく話し合い、企画を練って作り上げました。
最終的にはユーザ依存にはなりますが、「Aが好きな人にはBがおすすめ」というおすすめが投稿されたら、Aをフォローしている人の「布教される」にBが表示されるようになりました。また、更にこれが好きな人にはこれがおすすめ……と連なっていく事で、無駄足にならずに済む推し活アプリケーションを開発できたと考えています。

Finished完成品について

こちらから実際にお使いいただけます。
大会のリンクはこちら
発表会の動画はこちら(58:40頃)
[GitHubリポジトリ]

Future今後について

このシステムは一旦完成したので、今後修正を重ねる予定は特にありませんが、修正するならば「布教される」で、おすすめの投稿数順にソートして表示したり、ミュート機能や、タグの追加をユーザ依存にしないなどで改善していく事になるかと思います。