・ フロントエンド / 個人開発
はじめに
こんにちは！H×Hのセンリツ大好きエンジニアです！✌️
このサイトに遊びに来てくださり、ありがとうございます！
突然ですが、「Kuboyage」って何？と思った方も多いのではないでしょうか。
今回はこのサイトについて詳しく紹介させていただきます！技術的な話もしつつ、なるべく楽しく読んでいただけるように書いたので、最後まで付き合っていただけると嬉しいです！
Kuboyage って何？
Kuboyageは、私（久保）のポートフォリオサイト兼技術ブログです！
主な目的
- 📝 技術記事の発信: フロントエンドからバックエンドまで、学んだことを共有
- 🚀 プロダクトの紹介: 作ったものを自慢する場所（大事！）
- 💭 日常の記録: たまにポエムも書きます（エンジニアあるある）
- 🤝 コミュニティとの交流: 同じような境遇の方とつながりたい
要するに、私の技術人生を記録する場所という感じですね！
💡 ひとこと: コードを書いて、コーヒーを飲んで、たまにバグと格闘しています。今日も元気にプログラミング！
名前の由来とロゴについて
名前の由来：Kubo + Voyage = Kuboyage
- Kubo: 私の苗字「久保」
- Voyage: 航海、冒険、旅という意味
つまり、久保の技術的な冒険・航海の記録という意味で名付けました。
ロゴのコンセプト
ロゴは船をモチーフにしています！なぜ船かというと？
- 🚢 航海: プログラミングは未知の海を航海するようなもの
- ⚓ 安定: 技術力という錨で安定した開発を
- 🌊 波: 変化の激しい技術トレンドの波を乗りこなす
正直な話...
実は名前については公開してから後悔しているんですよね 😅（上手い！）
「Kuboyage」って言いにくいし、覚えにくいし...もうちょっと考えればよかったなと思っています。でも今更変えるのもアレなので、このまま突き進みます！
皆さんは名前を付けるときは慎重にしてくださいね〜（経験談）
このサイトでできること
🏠 ホーム画面
- 自己紹介
- 最新記事の表示
- 作成したプロダクトの紹介
- お問い合わせフォーム
📚 ブログ機能
- 記事一覧: タグやカテゴリで絞り込み可能
- 高度な検索: タイトル、内容、タグから横断検索
- 記事詳細: Markdown で書いた記事をきれいに表示
- SNS シェア: 気に入った記事はシェアしてください！
🔧 管理機能（私専用）
- 記事の作成・編集・削除
- Markdown エディター（画像アップロード機能付き）
- タグ管理
- アクセス解析
使用技術とこだわりポイント
フロントエンド技術 🎨
| 技術 | 選定理由 |
|---|---|
| React 18 | 最新の機能（Concurrent Features）を活用 |
| TypeScript | 型安全性でバグを減らす |
| Vite | 爆速ビルドで開発効率アップ |
| Tailwind CSS | ユーティリティファーストで素早いスタイリング |
| shadcn/ui | 美しくアクセシブルなコンポーネント |
バックエンド技術 ⚙️
- Supabase: PostgreSQL + Auth + Storage がオールインワン
- Row Level Security: セキュリティもバッチリ
- リアルタイム機能: 将来的にコメント機能で使う予定
使用ツール
- Lovable: UIやおおまかな機能を開発
- Cursor: 詳細な設計やほとんどの機能を開発
こだわりポイント ✨
1. SEO 対策がガチめ
- メタタグの動的生成
- 構造化データ（JSON-LD）
- サイトマップの自動生成
- Core Web Vitals を意識したパフォーマンス
2. Markdown サポートが充実
# コードブロック
def hello_world():
print("Hello, Kuboyage!")
# テーブル
| 項目 | 値 |
| ---- | ------ |
| 言語 | Python |
| 好み | カレー |
3. レスポンシブデザイン
スマホでも PC でも快適に読めるように作りました！
4. アクセシビリティ対応
- ARIA 属性の適切な設定
- キーボードナビゲーション
- スクリーンリーダー対応
アーキテクチャ図
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Cloudflare │ │ Vite │ │ Supabase │
│ Pages │───▶│ React App │───▶│ PostgreSQL │
│ (CDN/Host) │ │ TypeScript │ │ Auth/Storage │
└─────────────────┘ └─────────────────┘ └─────────────────┘
制作の裏話
AI駆動による爆速開発
このサイトは、10時間ちょっとで作れました！ AIによる進化が著しいため、ほとんどコードには干渉せず、Vibe Codingによって作れたので、かなり満足しています。
また、仕様に関してもAIと並走して決めていけたので考える箇所が比較的少なくて済みました！
開発環境のこだわり
- Bun: npm より高速なパッケージマネージャー
- ESLint + Prettier: コード品質の自動チェック
- Vitest: 高速なテスト実行環境
- GitHub Actions: CI/CD パイプライン
CI/CD パイプライン 🚀
# 自動で実行される処理
┌─────────────┐
│ Git Push │
└─────┬───────┘
▼
┌─────────────┐
│ Type Check │ ← TypeScriptの型チェック
└─────┬───────┘
▼
┌─────────────┐
│ Lint & Test │ ← ESLint + Vitest
└─────┬───────┘
▼
┌─────────────┐
│ Build Check │ ← ビルドが通るかチェック
└─────┬───────┘
▼
┌─────────────┐
│ Deploy │ ← Cloudflare Pagesにデプロイ
└─────────────┘
苦労したポイント 😅
- ブラウザバック検知: フォーム離脱防止が意外と難しかったです
- Markdown パーサー: Qiita や Zenn 風の UI にするのに試行錯誤しました
- SEO 対策: 構造化データの設定が奥深すぎました
- レスポンシブ対応: スマホと PC の両方で美しく見せるのは大変でした
特に気に入ってる機能 🌟
スラッグ自動生成機能
// タイトルから自動でURLスラッグを生成
"美しいReactコンポーネントの作り方"
↓
"beautiful-react-components-guide"
インライン編集機能
管理画面では記事をその場で編集できます！UX 重視です〜
ビュー数カウント
- 重複防止機能付き
- 管理者のみ表示
- リアルタイム更新
今後の展望
やりたいこと TODO リスト 📝
- コメント機能: 読者との交流を増やしたいです
- いいね機能: 記事の反応が見えるように
- 関連記事表示: AI を使った記事推薦
- ダークモード: 目に優しく
- PWA 対応: アプリっぽく使えるように
- 多言語対応: 英語版も作るかもしれません
技術的な挑戦 🚀
- React Server Components: Next.js App Router への移行検討
- Astro: 静的サイト生成での高速化
- Rust: WebAssembly での機能拡張
- AI 統合: ChatGPT との連携機能
さいごに
ここまで読んでくださり、ありがとうございます！😊
このサイトは私の技術的な成長を記録する場所なので、これからもどんどん更新していく予定です。
もし何か気になることや、「こんな記事書いて〜」みたいなリクエストがあったら、気軽にお問い合わせフォームから連絡してください！
関連リンク 🔗
Tech Stack
最後まで読んでくださり、本当にありがとうございます！🙏
P.S. バグを見つけたら教えてください〜（特にスマホで見たとき）