先日、Go言語とVue.js 3を使って画像ギャラリーアプリケーションを作成してみました。最初は単純な画像アップロード機能だけを想定していたのですが、気がつくとSEO最適化、PWA対応、レスポンシブデザインまで実装した本格的なWebアプリケーションになっていました。

今回は、そんな開発過程での試行錯誤、つまづいたポイント、そして最終的にできあがったアプリケーションについて、実際の開発者の目線でお話ししたいと思います。

本記事について

この記事は、私が実際に開発したvibe-go-image-galleryプロジェクトの開発体験記です。コードの詳細な解説というよりは、「なぜこの技術を選んだのか」「どこで詰まったのか」といった、開発者の生の体験をお伝えします。

免責事項: この記事は個人的な開発体験を元にした内容です。技術選択や実装方法については、プロジェクトの要件や環境によって最適解が異なる場合があります。また、記載されているコードやアプローチは、セキュリティやパフォーマンスの観点から本番環境では追加の考慮が必要となる場合があります。

なぜこのプロジェクトを始めたのか

きっかけ

最近のWebフレームワークの進歩がめざましく、特にVue.js 3のComposition APIとGoのGinフレームワークの組み合わせに興味を持っていました。理論的な知識はあっても、実際に手を動かして作ってみないと分からないことが多いと感じていたので、何か実用的なアプリケーションを作ってみることにしました。

画像ギャラリーを選んだ理由は、シンプルに見えて実は奥が深い機能だからです。基本的なCRUD操作から始まって、ファイルアップロード、画像処理、SEO対策、パフォーマンス最適化まで、モダンなWebアプリケーションに必要な要素がほぼ全て含まれています。

技術選択の理由

Go + Ginを選んだ理由は、まずシンプルで高速なAPIサーバーを構築できることでした。Nodeと比較して、型安全性と並行処理の扱いやすさが魅力的でした。また、単一バイナリでデプロイできる点も、運用面で大きなメリットだと感じました。

Vue.js 3 + Composition APIについては、ReactのHooksに近い感覚でロジックを再利用できる点が決め手でした。Options APIも悪くないのですが、複雑な状態管理や副作用の処理において、Composition APIの方が直感的に書けると感じています。

Tailwind CSSは、最初は「クラス名が長くなって読みにくいのでは？」と懸念していたのですが、実際に使ってみると、デザインシステムの一貫性とレスポンシブ対応の簡単さに感動しました。特に、hover:やgroup-hover:といったバリアントの豊富さは、インタラクティブなUIを作る上で非常に便利でした。

開発過程で学んだこと

バックエンド開発での発見

Go言語でのWeb API開発は想像以上にスムーズでした。Ginフレームワークのドキュメントが充実していて、基本的なルーティングから中間件まで、直感的に実装できました。

特に印象的だったのは、画像処理の部分です。github.com/nfnt/resizeライブラリを使ったサムネイル生成機能では、GoのGoroutineを活用して並行処理を実装できました。

// サムネイル生成の並行処理（実際のコード抜粋）
go func() {
    defer wg.Done()
    if err := generateThumbnail(originalPath, thumbnailPath); err != nil {
        log.Printf("Thumbnail generation failed: %v", err)
    }
}()

完全なサムネイル生成コードはこちらで確認できます。

最初はデータベースを使う予定でしたが、要件がシンプルだったので、JSONファイルによるメタデータ管理に変更しました。結果的に、デプロイが簡単になり、開発速度も向上したと感じています。

フロントエンド開発での試行錯誤

Vue.js 3のComposition APIは確かに強力でしたが、最初は「どこまでをcomposableに切り出すべきか」で悩みました。結果的に、API通信と状態管理に関する部分をuseImages.jsとしてコンポーザブル化することで、各コンポーネントがスッキリしました。

// useImages composableの一部
export function useImages() {
  const images = ref([])
  const loading = ref(false)
  
  const fetchImages = async () => {
    // API通信ロジック
  }
  
  return { images, loading, fetchImages }
}

画像のアップロード機能では、ドラッグ&ドロップとプログレス表示の実装で少し手こずりました。Upload.vueのコードを見ていただくと分かりますが、ファイルの検証からエラーハンドリングまで、意外と考慮すべき点が多かったです。

SEO対策での学び

SPAでのSEO対策は、正直なところ当初は軽視していました。しかし、実際に検索エンジンでの表示を考えると、適切なメタタグ設定は必須だと痛感しました。

Vue Routerのナビゲーションガードを使った動的メタタグ生成や、Open Graph、Twitter Cardsへの対応は、router/index.jsで実装しています。特に画像詳細ページでは、バックエンドAPIからSEOデータを取得して動的にメタタグを更新する仕組みを作りました。

つまづいたポイントと解決策

CORS設定で四苦八苦

開発環境でフロントエンドとバックエンドを別ポートで起動していたため、CORS エラーに何度も遭遇しました。最終的に、Ginのcorsミドルウェアを使って解決しましたが、本番環境との設定の違いを考慮するのに時間がかかりました。

CORS設定のコードでは、環境変数による制御も組み込んでいます。

パフォーマンス最適化の重要性

最初は数枚の画像でテストしていたので気づかなかったのですが、画像が50枚を超えると明らかに表示が重くなりました。そこで、以下の対策を実装しました：

遅延読み込み: Intersection Observer APIを使った画像の遅延読み込み
仮想スクロール: 大量の画像でもスムーズなスクロールを実現
サムネイル: バックエンドでの自動サムネイル生成

遅延読み込みの実装は特に効果的で、初期ページロード時間が大幅に改善しました。

ビルド設定の調整

Viteのビルド設定では、バンドルサイズの最適化に注力しました。vite.config.jsで、適切なチャンク分割を設定することで、必要な部分だけをロードできるようにしています。

完成したアプリケーションの特徴

実装済み機能

画像アップロード: ドラッグ&ドロップ対応、複数ファイル同時アップロード
メタデータ編集: タイトル、説明、タグ、alt属性の動的編集
レスポンシブデザイン: モバイルからデスクトップまで対応
SEO最適化: 動的メタタグ、Open Graph、Twitter Cards対応
PWA対応: オフライン表示、ホーム画面への追加
パフォーマンス最適化: 遅延読み込み、サムネイル、キャッシュ戦略

技術的なハイライト

バックエンド:

RESTful API設計
並行処理による画像処理
適切なエラーハンドリング
セキュリティ考慮（ファイル検証、CORS設定）

フロントエンド:

Composition APIによる再利用可能なロジック
Tailwind CSSによる効率的なスタイリング
Vue Routerによる SPA ルーティング
PWA対応（Service Worker、Web App Manifest）

GitHub リポジトリの構成

プロジェクトはGitHubで公開しており、以下のような構成になっています：

vibe-go-image-gallery/
├── main.go                 # Go バックエンド
├── go.mod                 # Go モジュール設定
├── frontend/              # Vue.js フロントエンド
│   ├── src/
│   │   ├── components/    # Vue コンポーネント
│   │   ├── composables/   # Composition API ロジック
│   │   └── router/        # ルーティング設定
│   ├── package.json
│   └── vite.config.js
├── uploads/               # アップロード画像
├── data/                  # メタデータ JSON
└── README.md

詳細なセットアップ手順はREADMEに記載しています。

これから改善したい点

短期的な改善計画

ユーザー認証: 現在は誰でもアップロードできるので、認証機能を追加予定
画像編集: 基本的な画像編集機能（回転、リサイズ等）
検索機能: タグやメタデータでの画像検索
バックアップ機能: クラウドストレージとの連携

長期的な構想

マルチテナント対応: 複数ユーザーでの画像管理
AI連携: 自動タグ付け、画像認識
API公開: 外部アプリケーションからの利用
統計機能: アクセス解析、使用状況の可視化

学んだことと今後について

技術的な学び

このプロジェクトを通じて、「モダンなWebアプリケーション開発」について多くのことを学びました。特に印象的だったのは：

フルスタック開発の面白さ: バックエンドとフロントエンドの連携を一人で設計・実装することで、全体的な理解が深まりました
パフォーマンスの重要性: ユーザー体験に直結するパフォーマンス最適化の重要性を実感しました
SEOの奥深さ: SPAでのSEO対策は想像以上に考慮すべき点が多いことを学びました

開発体験について

Go + Vue.js 3の組み合わせは、開発体験という観点でも非常に良好でした。型安全性とホットリロードのおかげで、開発中のストレスが少なく、集中して機能開発に取り組めました。

特に、Viteの高速なビルドとVue 3のComposition APIの組み合わせは、「書いたコードがすぐに動く」感覚が心地よく、開発のモチベーション維持にも大きく貢献しました。

おわりに

「画像ギャラリーアプリを作る」という、一見シンプルな目標から始まったこのプロジェクトですが、気がつくと現代的なWebアプリケーションに必要な要素をほぼ全て含む、学習価値の高いプロジェクトになりました。

最初は「動けばいい」程度の認識でしたが、実際にユーザーが使うことを想定すると、SEO、アクセシビリティ、パフォーマンス、セキュリティなど、考慮すべき点が無数にあることを実感しました。

このプロジェクトのコードは全てGitHubで公開しています。興味を持っていただけた方は、ぜひコードを見て、改善提案やフィードバックをいただけると嬉しいです。

また、実際に動作するデモも用意する予定ですので、実際に触って体験していただければと思います。

関連リンク

プロジェクトのGitHubリポジトリ - 全ソースコード
バックエンドコード (main.go) - Go API実装
フロントエンドコード - Vue.js 3実装
セットアップガイド - 環境構築手順
コンポーネント設計 - Vue.js コンポーネント
API設計資料 - RESTful API仕様

技術ドキュメント

この記事が、Go + Vue.js でのWebアプリケーション開発に興味のある方の参考になれば幸いです。質問やフィードバックがございましたら、GitHubのIssuesまたはDiscussionsでお気軽にお声がけください！