【個人開発】会社の制度を作ってツイートできるWebサービスを作りました【リポジトリ公開】

作ったもの

突然ですが、皆さん 「会社にこんな制度あったらな〜」 「こんな制度がある会社で働いてみたいな〜」 と思った事はありませんか？ その願い叶える事ができます... そう、制度作ってみたったーならね

...という事で今回は「会社の制度を作ってツイートできる」サービスを作りました 🎉
入力項目を埋めて作成ボタンを押すだけで簡単に制度を作る事ができます！

　　

登録不要で遊べるのでぜひお試しください！
制度つくったったー

開発のきっかけ

3月から新しいプロジェクトの立ち上げに関わることになり、案件で使う事になった技術を素振りしておこうという事で開発を始めました。

当初バックエンドを Nest.js で実装する予定だったのですが、catnose さんのツイートを拝見し、こちらの技術を採用してみる事にしました。

技術スタック

最終的に以下の構成になりました。ほとんどはじめて触る技術ばかりでドキュメントと睨めっこしながら開発をしていました。

フロントエンド

• Next.js
  • 制度の詳細ページを SSR して OGP を動的に変えています。
• TypeScript
  • 一度手を出したらやめられなくなるやつ
• Emotion
  • styled を object 記法で使ってみた。
  • 型が効くし、テーマ変数も簡単に呼び出せて開発体験がとても良かった。
• StoryBook
  • 1か月期間開発できない期間が空いたときにどんなコンポーネントを作ったかを思い出すのにとても役に立った。
  • チーム開発だと後からプロジェクトに参加した人がキャッチアップするのにめっちゃ役立ちそう。
• Chromatic
  • コマンドを叩くだけでstorybookをデプロイしてくれるすごいやつ。
  • PRからUIの差分を確認する事ができたりする。
• SWR
  • fetch してきたデータをキャッシュしてくれるえらいやつ。
  • 気になったのでChrome DevToolsのnetworkで確認してみた所、2回目以降はリクエスト飛んでなくて感動した。
  • react-query も気になる。

バックエンド

• API Routes
  • 今回くらいの簡単なAPIだったらこれで十分、ロジックが増えたり複雑になってくると工夫が必要そう？
  • Graph QL サーバーを立てたりすることもできるらしい。
• Prisma
  • 簡単にリレーションを定義できたり型がめっちゃ効いてサクサク開発できて最高だった
• PlanetScale
  • ブランチ機能を持ったMySQLのマネージドサービス。
  • 今後も使って行きたい

デザイン

• figma
  • はじめてコンポーネント機能を使ってみた。
    

リポジトリ

今回のプロジェクトのリポジトリになります。コードはご自由に利用していただいて問題ないです🙆‍♂️

PR/Star/Issue など貰えると嬉しいです🐧

工夫した所

今回の開発を通して工夫した所を振り返らせていただきます。

OGPの動的作成

node-canvas というライブラリーを利用して、作成した制度のデータを送る事で動的にOGP画像を生成できるapiを作りました。 タイトルの長さに対して概要文の長さを切り替えている所がこだわりポイントです😃

タイトルが1行の時は、概要文が3行で、

タイトルが2行の時は、概要文が2行に切り替わります！

制度作成時に紙吹雪 🎉

開発序盤の頃は制度作成時にモーダルが表示されるだけだったのですが、なんかワクワク感が足りないなと思ったので、 react-reward というライブラリーを使って、紙吹雪が舞うようにしてみました😃

いいねボタンを押した際にも表示されます！

会話風コンポーネント

キャラが会話してる風コンポーネントを作ってみたのですが、サクッと実装できたわりに可愛く仕上がりました😍

これでキャラに会話させるサービスを作ってるのも面白そう！

反省点

今回の開発での反省点。

デザインより先に画面を作ってしまう問題

自分の中であるあるなのですが、コードを描きながらああでもないこうでもない〜とデザインを考えがちで、せっかく figma でプロジェクトを作ったのに、画面ができてから　それを figma に移すだけになってしまっていました。次何か作るときは強い気持ちでデザインから作り始めようと思います。

テストサボり問題

jest / testing-library を導入したのですが、早く開発を進めたいという思いからテストを書くのをさぼってしまいました。
途中まで snapshot テストだけは書いていたのですが、デザインが常に変わっていた為、差分が発生し続けて不便に感じる事が多かったです。ある程度デザインが固まってから導入すべきでした。

共通化できそうなコンポーネント問題

これもデザイン・仕様が固まらないまま開発を進めてしまったのと僕の設計力の不足から起きてしまったのですが、最初はいらないと思っていたコンポーネントが後から必要になったりして、似たような機能を持ったコンポーネントがいくつもできてしまいました。

たとえば、 Icon コンポーネントより先に IconButton を実装してしまった為、Icon を使用しているコンポーネントとしていないものが存在してしまっています。

どう考えても　 Icon から作り始めるべきなのですが、当時の僕は何を思ったのか IconButton から作り始めてしまったようです。

感想

去年社会人になってから、業務後になかなかやる気が起きず、TwiLink を公開して以来、約1年半ぶりの個人開発になりました。業務で開発するのももちろん楽しいのですが、やはり自分で考えたものを「ああでもないこうでもないと言いながら開発するのは、また違った面白みがあるなと感じました。

今回はじめて使う技術が多かったのもあり、他の人のリポジトリを覗きにいったり、OSSを参考にしてみたり、ドキュメントを読んだりする中でいろいろな発見や学びがありました。

またリリースツイートをした際、やめ太郎さんにツイートをして頂けたおかげで、いつもより多くの人に遊んでいただけました🙏
自分の作ったものを人に使ってもらえるのはとても嬉しい事だな〜と再実感しました。やはり自分は人に楽しんでもらえたり喜んでもらえるようなプロダクトを作れるエンジニアになりたいという思いがより一層強くなりました。

宣伝

制度作ったったーは登録不要で遊ぶ事ができるので是非遊んでみてください！！
自分の作った制度が本当にどこかの会社で採用されるかも...!?

私が所属している株式会社ゆめみには有給取り放題制度・勉強し放題制度といった嘘のようで本当な制度がいくつもあります。
興味を持っていただけた方はぜひこちらのnotionをご覧ください〜

フロントエンジニアも採用中なので、気軽にカジュアル面談など受けていただければなと思います！