ポートフォリオサイトを作り直した
このポートフォリオを作り直しました。
ブログ機能も搭載しましたが、1つも記事がないとテストができないということで、折角なので使った技術と感想を書きます。
過去のサイト
過去のサイトは、データを残していないのでもうアクセスできませんが、このサイトのHomeにある情報を単純に書き並べていました。
CSS力が十分に無かったので、new.cssというClassless CSSフレームワークを使いCSSを1文字も書かずに作っていました。もう使っていませんが、デザインしなくても適用するだけでそれなりの見た目になるのでおすすめです。
しかし問題点として、生のHTMLでコンポーネントを使えないので、複数ページを更新したときに1つ1つ手で書き換える必要があったり、Viteなどのモダンな開発ツールを使えないという問題がありました。
また、ブログとしてWordPressを使っていましたが、これはやはり重く、記事の追加も面倒でした。
そういう状況でフロントエンド力に不足を感じていたので、鍛えたいと思い先日Webサイトを作る仕事をさせていただきました。そのときにReactを初めて本格的に使い、これめちゃくちゃいいなと思ったので、ポートフォリオもReactで作ることにしました。
改善点
- 技術がモダンになった
- コンポーネント化により開発が楽になった
- デザインがいい感じになった
- ダークモードに対応した
- ブログ機能を作った
使用技術
Bun
Bun — A fast all-in-one JavaScript runtime
Bundle, install, and run JavaScript & TypeScript — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner, and npm client built-in.
bun.sh
フロントエンドに直接出てこない技術ですが、使ってみたので紹介します。
BunはNode.js互換のJavaScriptランタイムで、速度を重視して作られているようです。
ずっと本家Node.jsを使っていましたが、確かにパッケージのインストールなどの操作が体感早いように感じます。
また、Node.jsのようにバージョン管理しなくても良いのも気に入っています。
（余談ですが、Nodeのバージョン管理は最近nvmからfnmに乗り換えました。これも爆速でcd時の自動切り替えもあり良かったです。新しい技術を使うの大事。）
Astro
Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
astro.build
Reactを使って静的なWebサイトを作ることができるフレームワークです。
Next.jsにあるような動的サイト用の機能が排除されていて、非常に開発体験が良かったです。
また、後述のTailwind CSSへの対応や、Prettierのプラグインもあり良いです。
ブログ用のテンプレートも用意されていて、このポートフォリオではそれを使用させていただきました。Markdownを書くだけで記事ができて最高です。
Tailwind CSS
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
tailwindcss.com
有名なライブラリですが、今回始めて使いました。
HTMLとCSSのファイルを往復したり、CSSをstyleに書かなくても、classを付けるだけでスタイルの調整ができて最高に自分好みでした。
いい感じにデザインしてあるクラスがたくさん用意されているのも、デザインができない自分にとっては非常にありがたいです。
また、tailwindcss-typographyを使うと、MarkdownをレンダリングしたHTMLに簡単にスタイルを当てることができました。
ただ、適切にコンポーネント化しないと長い共通部分がすぐ生まれるなとは思いました。ちょくちょくGitHub Copilotにコンポーネント化してもらっていました。
daisyUI
Tailwind CSS Component Library ⸺ daisyUI
Tailwind CSS Components Library for 2026 - Tailwind CSS components examples, Tailwind themes and Tailwind blocks for fast UI development
daisyui.com
Tailwind CSSのコンポーネントライブラリです。
ヘッダーやカードなどのコンポーネントやテーマ機能があり良かったです。
また、以前はBootstrapを主に使っていたのですが、これと比べるとTailwind CSSのクラスで簡単にカスタマイズできるのもやりやすかったです。
おわりに
モダンなWeb技術、楽しい！