Go言語読書メモアプリのアーキテクチャを変更

昨年12月、Go言語を使って読書メモアプリを作る計画を立てました。しかし、開発を進める中で、アーキテクチャの見直しが必要だと感じました。理由は、フロントエンドとバックエンドの役割を明確に分ける方が合理的だと考えたからです。

当初は、すべての処理をGo言語で実装しようと考えていました。しかし、フロントエンドの動作はJavaScriptに任せ、Go言語はバックエンドの処理に専念させる方が適しているのではないかと気づきました。

実際、Go言語は高速なAPIサーバーやデータの保存・処理に強みを持つ一方で、フロントエンドのインタラクティブなUI部分はJavaScript(特にReactやVueなどのフレームワーク)を活用するのが一般的です。そこで、より適切な技術を使い分ける形で、アプリのアーキテクチャを再設計することにしました。

アーキテクチャの再設計案

  1. バックエンド(Go)
    • 書籍情報の保存(データベース: PostgreSQL / SQLite など)
    • 書籍の検索・フィルタリング
    • ユーザー認証(JWT など)
  2. フロントエンド(JavaScript + CSS)
    • 書籍の検索フォーム
    • Google Books API との連携(フロント側で直接取得)
    • ISBNバーコード読取り(JavaScriptフレームワーク:QuaggaJS / zxing-js)
    • 読書メモの追加・編集機能
    • UIの改善(CSSフレームワーク:Tailwind / Bootstrap)
  3. 通信の仕組み
    • GoのAPIを作成し、フロントエンドから fetchAxios でリクエストを送る
    • Google Books API はフロントエンド側で直接取得し、バックエンドのデータとは分けて扱う

メリット

  • 責務分離が明確になる
    → GoはAPIとデータ管理、JavaScriptはUI・UXに集中できる
  • 開発がスムーズになる
    → フロントとバックを独立して開発・デプロイできる
  • フロントエンドの拡張性が上がる
    → React や Vue を使って、より洗練されたUIを作れる

デメリット

  • フロントとバックの統合が必要
    → APIの設計を明確にする必要がある
  • 学習コスト
    → JavaScriptのフレームワーク(React/Vueなど)を学ぶ必要がある

結論

「読書メモアプリ」のユースケースを考えると、Goはバックエンド、フロントエンドはJavaScriptで実装 するのが自然。
今の気づきを活かして、フロントエンドとバックエンドを分けた設計にすると、今後の開発がスムーズに進むと考えました。

なお、現在考えている基本的な仕様は以下の通り。

読書メモアプリ 基本仕様書

1. 概要

本アプリは、読書の記録を効率的に管理し、学びを最大化することを目的とした読書メモアプリである。

2. 開発技術

  • フロントエンド: HTML, CSS, JavaScript
  • バックエンド: Go言語

3. 基本機能

3.1 本の情報取得

  • ISBNバーコードスキャン機能を搭載し、書籍情報を自動取得
  • Google Books API等を利用した書籍情報の取得

3.2 読書記録管理

  • タイムライン形式でのメモ記録(気づき、感想)
  • 読了時のAIによるメモの統合と学習の可視化
  • 読書の進捗状況のトラッキング
  • タグ付けとカテゴリ分類システム

4. 要求定義

4.1 ターゲットユーザー

  • 学生(学習用途)
  • ビジネスパーソン(自己啓発用途)

4.2 主要機能の優先順位

  1. 本の情報取得(ISBNスキャン、書籍データの取得)
  2. 読書記録(メモ、進捗管理、タグ付け)

4.3 UI/UX 基本方針

  • シンプルで直感的なデザイン
  • ダークモード対応
  • タイムライン型メモ表示

4.4 プライバシーとデータセキュリティ

  • クラウド保存の可否(ローカル保存オプション)
  • ユーザーデータの暗号化

総括

今回の開発では、シンプルな機能にフォーカスしつつも、設計プロセスはしっかりと踏襲する方針です。
具体的には、以下のドキュメントを作成し、アーキテクチャを明確にした上で実装を進める予定です。

  • 基本仕様書(システムの全体構成、機能要件、技術選定)
  • サイトマップ / 画面遷移図(ユーザーの操作フローを可視化)
  • 画面リスト / 画面詳細図(各画面の要素や動作仕様を定義)
  • ユースケース図(利用シナリオを整理し、システムの振る舞いを設計)
  • E-R図(エンティティ・リレーションシップ図)(データベースの構造設計)

また、UIデザインには Figma を活用し、プロトタイピングの段階から視覚的な検討を行います。
HTML/CSS化のプロセスについては、手動で細部まで最適化するか、AIツールを活用して効率化を図るかは、実装フェーズの状況を見て判断する予定です。

設計と実装をバランスよく進め、開発の効率と品質の両立を目指していきます。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です