Next.js + Chakra UIでポートフォリオサイトを作った
作ったもの
ポートフォリを作成した理由
このサイトを作成した理由としては、転職活動やSNSでの活動をする際に自分が何者なのか、何ができるのかをアピールするためです。
現状すぐにの転職は考えていないのですが、自分が今までやってきたこと、今何をしていて、今後どうなりたいのか、自分のことを振り返る機会という意味でも、整理ができて良いのかなと思い制作に至りました。
リリースまでの流れ
リリースまでの流れは以下の通りです。それぞれのフェーズの詳細を後述してあります。
- 機能、記載する情報の洗い出し
- Todoの作成
- デザインの作成
- 実装
- リリース
機能、記載する情報の洗い出し
notionを使用してサイトに載せたいものや実装したい機能などを洗い出しました。
大まかなTODOも最初にここに書き出しました。
細かいTodoの作成
Todo管理はGitHub Projectsを使用しました。理由としては、普段業務で使用していることもあり使い慣れていたからです。
自分がリポジトリを作成し実装に入る前に行ったのが、今後実装したい機能も含めて、GitHub ProjectsにTodoを全て書き出すということでした。
今後やりたいことも書き出すということがポイントで、頭の中でやりたいなーとか考えて放っておくと、余計な頭のリソースを使ってしまうので、ここは書き出して良かったなと思いました。
また、開発を進めているとアイデアが湧いてきて、これもやりたい！となった場合でもとりあえずこのTodoに書き出していました。
今後も個人開発をする場合はこのやり方を採用していきたいと思います。
Figmaでデザインの作成
シンプルで簡単なデザインにしようと決めていたので、コーディング中にデザインを考えても良かったのですが、迷った挙句手戻りなどが発生すると嫌だったので、事前に作成することにしました。
実装
実装に関して、使用した技術はNext.js、Chakra UIになります。
Next.jsに関しては業務では使用したことがなく、1年ほど前にチュートリアルのサイトを作成した程度でした。フロントエンドを志す者としては、流石に触って慣れておきたいと感じたので選びました。といってもまだNext.jsの性能を十分に活かせるような実装は行えていませんが・・。
ChakraUIについてもまともに触ったことがなかったのですが、以前何かの勉強会で紹介されていて、いつか使ってみたいとぼんやり思っていたのを思い出したので選定しました。
使い心地として、Next.jsはもちろんChakraUIもかなり良かったです。
スタイルの拡張もかなり柔軟に、簡単にできました。ドキュメントも分かりやすく丁寧に整備されていて、ほとんど迷うことがなく実装することができました。
また、可読性においても個人的にTailwindのようにclassNameにutilityクラスを詰め込むよりも、ChakuraUIのようにコンポーネントのpropsとして、値を渡す形の方が優れていると感じました。
ただ、コンポーネントに渡すpropsが多くなりがちで、何も考えずに実装していると大変なことになりそうなので、この辺りはtextStyleやコンポーネントの共通化などでうまくやりくりする必要がありそうです。
実装する際こちらの記事を参考にさせていただき、とても助かりました。
Tailwind CSSが適しているケースもあると思いますが、今後個人開発として何か作成する場合はChakraUIを積極的に採用したていきたいと思いました。
リリース
改善と機能の追加を繰り返していいものにしていこうという方針で、ある程度できてしまったら、リリースをすることにしました。実際に、プロフィールに使用するアイコンがちゃんと決まっていなかったり、記載する文章があまり納得いってなかったのですがリリースを行いました。
デプロイ先はNext.jsとの相性が良いということもありvercelにしました。
ほとんど何の設定もなく、数クリックでデプロイが完了してしまったので驚愕しました。
DNSのレコード追加も分かりやすく、簡単に行うことができました。
ドメインの取得はお名前.comなどを昔使っていたのですが、ユーザービリティなどに関して厳しいものを感じていたので、Google Domainsを利用しました。
工夫した点など
サイトを作るに当たって一番の懸念点は、技術的なところではなく、モチベーションに関する物でした。
平日はフルリモートではありますが、きっちりと終日8時間業務をこなしているため、休日や業務前後に時間をとるしかないのですが、普段個人開発などしてこなかった自分にとっては、とてもハードルが高く感じました。
そこで、やることとやらないことを決めて、やるべきことのハードルを最大限低くし、着実に進めていけるような形にしました。具体的には以下のようなものです。
- やること
- 朝いつもより早く起きて最低10分の作業を行う
- 業務後は余裕があれば作業を行う
- やったことを記録する
- TODOを細かく管理する
- とにかくリリースすること
- やらないこと
- 完璧なものをリリースすること
- 締切を決めること
- ゲーム
この中で自分がやって特に効果を感じたのはTODOを細かく管理したことでした。また、友人に協力してもらって、Discordサーバ内で作業用のチャンネルを立ててもらい、作業時はその中で行なっていました。これも完成まで辿りつけた要因になったと思います。感謝🙏
今後やりたいこと
今後個人開発で開発したものをこのサイトにどんどん載せていこうと思います。
無駄に色々な機能を追加して、オーバーエンジニアリングを積極的に行っていきたいと考えています。近々やろうと思っているのは、ブログ機能の追加、CI/CDの追加、テストの追加など、ゆっくりやっていこうと思います。
Discussion