TechUniのメンバーサイトを作った話
目次
TechUni のメンバーサイトの作成をしました。TechUni という組織で、「どんな人がいるのか」「どんな活動をしてるのか」といった部分が、組織が大きくなった分なかなか伝えきれていなかったので、それを解消する目的で作りました。そしてなるべくこのメンバーサイト内で TechUni 関連の情報を共有できるように制作をしています。
このページでは、メンバーサイトで使った技術や、それらから自分がどんな学びを得たのかなどを書いていきます。
中身の具体的な機能に関しては、しん / Tech.Uni が Qiita に既に書いてくれているので、そちらをご覧ください！
https://twitter.com/TechUni1026 https://qiita.com/cocococo_panda/items/21eb3c5ad7f8b6b2bb5a https://github.com/TechUni2020
フロントエンド
Next.js
今回、メインの開発者である自分と副代表のしんくんの 2 人がメインで触ってるのがこの Next.js だった、さらに今のフロントエンドの主流であるため、今後もし自分が開発から離れた場合でも開発が止まってしまうということはないという将来的観点からも、こちらを採用しました。もちろん TypeScript も同時に採用しています。
TailwindCSS + Mantine
メンバーサイトを作るに当たって、自分は二つのことを意識しました。
- 必ず完成させること
- なるべく早く完成させること
「え、当たり前やん」って思われるかもしれないですが、途中で放置されたプロジェクトがあったり、自分は社会人、新くんも学生でインターンにいってたりと、お互いいつまで開発に関われるかわからない状況だったので、自分はこの二つを意識することにしました。
そこで技術の話に戻りますが、TailwindCSS はお互い使い慣れていて、スタイリングが爆速でできる。それを踏まえた上で、ここは少しチャレンジですが、TailwindCSS と相性の良い Mantine を採用しました。
結果としては、とても良かったと思います。Mantine のドキュメントは非常に充実しており、細かなスタイリングも className が使えるため TailwindCSS で修正できたため、とても開発がしやすかったです。今後も採用したいと思いました。
:::message 今思えば両方も採用する必要はなく、Mantine の createStyles を使って追加のスタイリングはすればよかったと思ってます... :::
pnpm
最後はパッケージマネージャーです。 最近だと、npm や yarn を使って開発される方が多いと思います。自分達も開発当初は yarn を使っていましたが、途中で pnpm に切り替えました。 理由は、pnpm の特徴 を読んで、正直ここは検証も兼ねて使ってみたいと思ったためです。 結果的には node_modules の圧倒的簡略化に感動したくらいで、パフォーマンスにはそこまで差は感じませんでした。もしかすると規模が大きくなれば、差を実感できるかもしれないです。
:::message 他の大きなプロジェクトで pnpm を使ってみましたが、ローカルの起動速度や、yarn では起きる謎バグの解消もできるみたいだったので、可能であれば pnpm へ移行した方がいいなと思っています！ :::
その他の使用技術
Recoil: 割とここに関しては悩みませんでした。自分は本業でも使っていますが、非常に便利です。
react-hot-toast: おしゃれなトーストを簡単に出せます。自分はかなり推しています。
tanstack-query: 後述しますが、最初は useEffect でデータフェッチなどを行なっていたところを、リリース後に書き換えを行いました。レンダリングの最適化という意味でも、今後は必ず使いたいです。
バックエンド
Firebase
開発する上で色々不安だったのが、Firebase の採用です。 理由は、自分もしんくんも Firebase をかじったことある程度で、CRUD 操作も開発当初はほぼ無知の状態でした。 そして案の定、最初は苦戦をしました。特に認証周りの理解と実装で 1 ヶ月くらいかかったと思います。ただ CRUD 操作などは自分はそこまで苦戦せず、むしろシンプルでとても便利だと思いました。 メンバーサイトを通じてかなり Firebase について学ぶことができたので、結果としてはこの採用も良かったと思います。
デプロイ
こちらは Vercel を使用しました。 Firebase Hosting も検討しましたが、Preview 機能が開発を通じて便利なことや、特に大人数での開発をしていたわけではなかった。あとはなんと言ってもデプロイまでが簡単だったことや、Next.js の機能を使う際に色々考えなくてもいいので、今回は Vercel にしました。
ここまでが、技術についての内容です。
開発を通しての感想
良かった点
形にできたこと。普段の開発よりも幅広く任せてもらたこと。レビューをしっかりしたこと。この三つが良かったポイントかなと思っています。
一つ目は、無事に形にできたことが良かったと思っています。
TechUni には優秀な学生が多く、規模も大きな組織ですが、きちんと TechUni として完成させたプロダクトがないのはとても勿体無いことだと思ったので、こうして形になるものを残せたことは、とても嬉しいです。
二つ目は、テックリード的な立ち位置で開発を行なって、色々な経験ができたことです。
コードレビューや技術選定、実装したい機能に対しての実装方法の提案など、普段の自分の業務ではあまりしない部分を担当できたことで、『なんでそうすれば動くのか』『なぜそうした方がいいのか』みたいな部分を説明する機会が多くあり、そこで自分がそのことについてどれくらい理解しているかどうかを判断するきっかけになったので、とてもいい経験になりました。
三つ目は、レビューをしっかりしたことです。
完成させることと速さ、この二つを意識して今回開発を行いましたが、それの実現のためにもコードレビューに関してはかなり意識して行いました。
開発を通して、最初の予定よりも UI も実装した機能も変わっています。それは開発においてよくあることかなと思います。
ただそういった中で、『この機能作りたいのに、コードがぐちゃぐちゃで実装が大変...』みたいなことが起きたりとか、開発を通してよくあったのが、Preview 触ってたらバグ見つけた。とかです。PR の Preview で見つけれた方が、バグの原因解明も早くなると思いますし、修正もすぐに終わることが多いと思うので、綺麗なコード、バグのないコードを常に書くことが、結果的に開発速度が上がるし、開発者のモチベも維持できると考えたので、レビューはしっかり行いました。
結果としても、かなりモチベは高く開発を進められ、かつコードも崩壊まではしてないのでまだマシかなとおもっています。(もちろん修正しないといけない箇所は多々ありますが 😀)
次回に向けての改善点
初期リリースまで少しかかり過ぎたこと。技術選定する際の調査不足。この 2 点が改善点かなと思っています。
初期リリースまで少し時間がかかり過ぎた
これは、自分が『なるべく早く完成させること』という目標を掲げていましたが、実際には約 3 ヶ月かかってしまいました...
リリース自体はできたので結果的には OK でしたが、アプリの内容的に 1 ヶ月で作れたと自分は少し思っているので、最初の詰まった Firebase のところも TechUni 内でもっと質問しても良かったと思いますし、開発人数が 2 人だと少しきつかったので、もう何人か人を増やせていればと思いました。
技術選定する際の調査不足
これは tanstack query の導入を、自分が初期の段階では見送ったことを指します。
React において、個人的にどのプロジェクトでも苦戦する一つのポイントとして、useEffect の扱いがあるかなと思っています。
実際、今回の開発でも第二引数に何を入れるかとか、入れる値をミスって無限ループが走ったりとかして結構色々チーム内で苦戦しました。
初期リリースをした後にリファクタをするよう元々決めていたのですが、そこで TechUni のメンバーから tanstack query の導入提案をいただきました。自分自身フェッチ系のライブラリは使った方がいい、useEffect を手動では使わない方がいいというのは認識としてありました。
しかし、自分が Firebase をほぼ触ったことなかったり、しんくんも今回の技術スタックだといくつか初見のものもあったみたいなので、その状況での導入はそもそもリリースまで行かない恐れもあるかと思い、初期の段階では導入を見送っていました。
ただ、実際に tanstack query を使ってみたところ、そこまで導入に苦戦したわけでもなく、非常に快適に開発ができるので、最初から導入しても良かったなと思っています。
まとめ
色々反省するべき点は多いですが、まずは本当にリリースできて良かったと思っています 😭
あんまり自分は個人開発ガッツリやるというタイプではないのですが、こうやって自分達で 1 から考えて作ったものを実際に使ってもらえると、とても作った甲斐があったと感動しています 😭
0