Qwikでブログページを刷新して学んだこと
こんにちは。@silverbirderです。 最近、私のブログページを Qwik フレームワークで刷新しました。以下のリンクが、刷新したページになります。
これで、私のブログページの刷新は 4 回目になります。この記事では、その過程で得た学びや経験を共有します。
GitHub のリリースタグも利用していますので、以下のリンクから過去のソースコードを参照できます。
ソースコードも公開しているので、こちらもよければ参考にしてみてください。
なぜ刷新したのか
刷新の動機は主に好奇心です。 それに続いて、自分の技術的知見を広げるためでもあります。 過去には静的サイトジェネレータの Hugo や Google が推奨する AMP、WebComponents を活用できる Rocket などを試してきました。 それぞれの技術には当時の流行や興味を反映していました。今回も、現在のトレンドや興味を持っている技術を中心に選択しました。
Qwik フレームワークの選択
Qwik はパフォーマンスを重視した Web フレームワークですが、そこはあまり重要視していませんでした。 私が Qwik を選んだ主な理由は 以下の点です。
- Markdown のサポート
- ブログ記事を書くのに Markdown が使うため
State of JSでの高い評価- 評価が高いからこそ、学ぶ価値があると思った
- React に近い構文
- 自身の学習コストを下げたかった
ブログ記事の Markdown の Frontmatter にタグ情報を記入していたので、それを活用したいと考えました。調べていくと、 import.meta.glob という構文を知り(Vite の機能)、Frontmatter を抽出する方法を発見しました。これを参考にブログページの構築を開始しました。
機能実装したこと
実際にブログで実装した機能は、silverbirder/silverbirder.github.io - GitHub の README に詳しく記載しています。 主な機能や導入技術を以下に列挙します。
- @unpic/qwik 🚀📸
- Partytown 🥳🌐
- PandaCSS 🐼💃
- Playwright & Vitest 🎭🔬
- Qwik ⚡🕸️
- qwik-speack 🌏🔊
- Storybook 📓🌟
- Buy me a coffee ☕💖
- Chromatic 🌈📊
- Cloudinary 🌌🖼️
- giscus 🐦🗨️
- Google Analytics 🕵️♂️📈
- icones.js 📌🌈
- lottiefiles 🎬📁
- OpenAI 🧠🌐
- OpenReplay 🎥🔄
- OneSignal 📡💌
また、Markdown の Frontmatter を抽出し JSON 化し、それを使ってブログページを構築しています。(RSS フィードも同様)
学んだこと
元々は、Qwik というフレームワークのコンセプトを知り学びを深めようと考えていました。
しかし、Qwik でブログ構築する過程で、フレームワーク自体ではなく、関連する技術やツールに興味関心が移りました。私の知る範囲でキャッチアップするよりも、こういった伸び代ある技術を学ぼうすることで、知らない技術を知る良い機会となりました。 以下は、その中で学んだことです。
PandaCSS
PandaCSS というスタイルエンジンを知りました。 私は、これまで Bootstrap や materialUI のような CSS フレームワークを使うことが多かったのです。 しかし、最近業務でランディングページの開発をする経験から、CSS を書いてみたくなりました。 そこで、PandaCSS を使って、自分で CSS を書いてみました。
global.css を初めて 0 から書いてみましたし、タイポグラフィ定義やセマンティックトークン定義を使ってみたりしました。こういった再利用性の高い CSS を書けるのは良いなと思いました。CSS-in-JS の記法が使えつつ、CSS ファイルを生成できていて、便利だなと思いました。(詳しくない)
多言語対応
多言語対応、初めてチャレンジしました。といってもなんちゃってです。 多言語対応の対象は、Markdown の日本語記事やコンポーネントに含まれる日本語です。日本語を英語に翻訳します。 本来は、日本語から英語に翻訳したものをチェックする人が必要だと思います。しかし個人レベルなら、そこまでやる必要はないかなと思いました(というより能力がない)。そこで、qwik-speack、chatgpt-md-translator の 2 つを使って翻訳しました。内部では、OpenAI の使っているようです。
多言語対応をすると、WebPush する通知コンテンツやリンクコンテンツにも気を使うようになりました。 実際に業務として使うならば、最初の段階からあると良いかもなぁと思います。(仕組みだけでもあると良い)
SaaS の利用
今回は、SaaS を色々使ってみました。
OpenReplay
OpenReplay というものを導入しました。
これは、ユーザーの行動を監視するものです。 実際の運用としては、トラブルシュートや UX 改善などに使えそうなものに思いました。
これをブログページに入れたので、どのページのどのあたりにマウスカーソルが動かすのか見れるので、リンク配置や動線を考えさせられるきっかけとなりました。
OneSignal
WebPush 通知もやってみたいと思いました。 しかし、WebPush 通知するサーバー側の用意が必要と思うのですが、それを掛けるコストはなくしたいと思い、 よく知られている OneSignal というものを入れてみました。
通知をするときに、言語の選択や、通知を受け取るためのベストプラクティスが OneSignal に書いてあり、勉強になりました。
Giscus
Qwik を選ぶ前、技術調査をしていたときに Material for MkDocs というのを発見し、 その中で、giscus というを見つけました。
これは、GitHub の Discussions をブログに埋め込むことができます。これにより、ブログにコメントを残せるようになりました。
途中で諦めたもの
Changesets
changesetsを利用してバージョン管理を試みましたが、途中で運用が面倒になり挫折しました。
Turborepo
turborepoでの monorepo 構成も夢見ていましたが、挫折しました。考えていた構成は以下の通りです。
- apps/docs
- packages/ui
- packages/blog-contents
- packages/translate
しかし、PandaCSS や Qwik の UI ライブラリをうまく組み合わせるのが難しく、実現できませんでした。
今後の展望
例えば、dark モード対応、もしくはテーマカラーの変更ができる機能を作ってみたいなと思いました。 他には、Playwright を使って、cucumber を試してみたいなと思っています。 デザインは、初めて CSS でフルスクラッチでやったので、デザインにもっと強くなりたいと思いました。
最後に
この刷新を通じて、多くの新しい技術やツールに触れることができました。 それぞれの技術には独自の魅力や学びがあり、非常に充実した経験となりました。 これからも、新しい技術やアイディアを追求していきたいと思います。
-
シェアする
フォローする
関連する記事
タグ「成果物」の記事
個人サイト（ジブンノート）をリニューアルしました。本記事では、個人サイトをリニューアルした際にあった出来事などを振り返りたいと思います。ちなみに、個人サイトは以下のページです。ノート風デザインで、ブログ記事が読めるようになりました！🎉
個人サイトをリニューアルしました！🎉 https://silverbirder.github.io リニューアルは、今回で6回目です。制作期間は、去年の12月27日から今年の1月28日までの約1ヶ月間です。個人的には最速の開発期間でした。AIの力は偉大ですね。本記事では、個人サイトのリニューアルでこだわったポイントについて紹介します。
2026-01-28
個人開発として、機能リクエスト投稿サービスを作成しました。 サービス名は Fequest で、Feature Request の略です。 Fequest は、プロダクトに対して「この機能を追加してほしい」「ここを改善してほしい」といった要望
2025-12-28
タグ「フロントエンド」の記事
最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい
2026-01-24
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの
2026-01-20