VitestとJSDOMで実現するAstroコンポーネントテスト
高速テストフレームワークVitestと、ブラウザ環境をシミュレートするJSDOMを組み合わせ、Astroプロジェクトで堅牢なコンポーネントテストを構築する手法を解説します。
エンジニアの学習と開発の記録を目的としたブログサイトです
高速テストフレームワークVitestと、ブラウザ環境をシミュレートするJSDOMを組み合わせ、Astroプロジェクトで堅牢なコンポーネントテストを構築する手法を解説します。
JavaScriptからTypeScriptへの移行、防御的プログラミング、エラーハンドリング戦略を実践した投稿カレンダー機能の技術的実装記録。レビュー指摘事項を通じたコード品質向上プロセス。
GitHub風のcontribution graphライクな投稿カレンダー機能をAstroで実装。データ処理、UI設計、レスポンシブ対応まで、段階的な開発プロセスと技術的判断を詳細記録。
スマホでの文字サイズと余白問題を解決し、ミニマルデザイン思想に沿ったレスポンシブ対応を実装。フルードタイポグラフィと適切なブレークポイント設計で読みやすさを向上。
「読者が記事に集中できる」ことを最優先に、ブログサイトをモダンなミニマルデザインに刷新。SVGアイコン削除、モノクロ色彩、65ch幅制限など、コンテンツファースト設計の実装プロセス
PR制御ワークフローが動かない原因を特定し、段階的に修正して完全動作させるまでの実践記録
PR制御ボットのワークフローを43行から19行に最適化した実践記録
Astroチュートリアルを参考に、静的なAboutページを動的でインタラクティブなページに改善した開発記録
Astroを使用したブログサイトの開発プロセスと学んだことをまとめた最初の投稿