本記事は【Advent Calendar 2025】 25日目①の記事です。
🌟🎄 24日目② ▶▶ 本記事 ▶▶ 25日目② 🎅🎁

1. はじめに

こんにちは！アプリケーションエンジニア 2年目の松澤です。

突然ですが、皆さんは個人開発をやっていますか？私の将来の夢は、個人開発で世の中が熱中するサービスを作り、あわよくばお金をたくさん稼ぐことです(笑)。

しかし、業務でアプリケーション開発をしていると、なかなかインフラの知識が身につきづらいです。ローカルではアプリケーションを開発できても、それをデプロイする環境の構築となると、フルスタックエンジニアレベルの知識は必要です。個人開発をする上では、インフラとアプリどちらの技術も必要となるのがネックとなります。

しかし、AWS Amplify Gen2（以降 Amplify）というアプリケーション開発プラットフォームのサービスを利用すると、バックエンド構築をTypeScriptの少量のコードで定義できます。すなわち、アプリケーションエンジニアが（多少のバックエンドの知識のみで）手っ取り早くアプリを開発するのに最適なサービスとなっています。

そんなAmplifyを用いて聖地巡礼マッピングアプリケーションを個人開発してみました。本ブログでは、AWS Amplify Gen2やその他のツールに関する利用方法の詳細は話さず、主に個人開発の経験談について話します。このブログを通して、「個人開発をやってみよう！」と初めの一歩を踏み出していただく方が少しでもいらっしゃれば幸いです。

1. はじめに
2. 開発したWebアプリケーションについて
- 地図表示機能
- 観光地一覧表示機能
3. AWS Amplify Gen2
4. 実際の開発で用いたツール
5. その他個人開発について
6. まとめ
あとがき

2. 開発したWebアプリケーションについて

今回作成したアプリは、金沢のお気に入り観光地をマッピングして、コメントや写真を投稿するというコンセプトで作成した「かなまっぷ」というWebアプリケーションです（金沢＋マップで名づけました）。なぜ金沢かというと、金沢で開催されたJAWS FESTA 2025というイベントに参加するときに、使ってもらいたいなと考えたからです。ただ、残念ながらJAWS FESTA 2025には間に合いませんでした。開発期間は約1か月半となります。β版をご覧いただければと思います。

ちなみにJAWS FESTA 2025のレポートブログも執筆しました。よろしければあわせてお読みください。

tech.nri-net.com

地図表示機能

地図表示機能：金沢の地図をOpenStreetMapで表示します
ジオコーディング（Geocoding）機能：観光地の住所を検索できます
聖地登録機能：お気に入りの観光地を聖地として登録できます。登録した聖地は一覧表示されます

観光地一覧表示機能

観光地コメント登録機能：観光地に関するコメントを1件投稿できます
観光地写真アップロード機能：観光地の写真を複数枚投稿できます
観光地一覧表示機能：登録した観光地が表示されます
- コメントも表示します。下記の図では、近江町市場に「おいしい海鮮丼が食べられます」というコメントが表示されます。
- 写真も表示します。近江町市場に海鮮丼の写真が表示されています。

その他、簡単なチャットアプリケーションを作成しました。

UIの改善、新規機能の追加、チャットアプリケーションのLLMに観光地に関するRAGを行うなど、さまざまな開発も今後行いたいと考えています。

3. AWS Amplify Gen2

AWS Amplify Gen2は、Webアプリケーションなどを簡単に構築できるプラットフォームサービスです。フロントエンドでReactやAngularといったモダンなフレームワークを利用でき、バックエンドをCDKで定義することで、AWSリソースを構築することができます。詳細はこちらの公式ドキュメントをご参照ください。

docs.amplify.aws

アーキテクチャ図

構成はこのようになっています。

バックエンドではAmplifyで提供されている4つのコンポーネントを用いました。

Amplify Geo：Amazon Location Serviceを利用して地図の表示等の機能が利用できます。
Amplify Data：スキーマを定義することで、GraphQLを利用することができます。
Amplify Storage：Amazon S3と統合することができます。
AI Kit：Amazon Bedrockなどのサービスと連携し、推論を行うことができます。

他にもさまざまなコンポーネントが提供されています。

AWS Amplifyを使って感じたメリット

コード量が少ない

コンポーネントを利用することでバックエンド側のコードはかなり少なく定義することができます。Amplify Dataがわかりやすい例です。バックエンドはこのコードだけで定義できます。

import { a, defineData, type ClientSchema } from '@aws-amplify/backend';

const schema = a.schema({
  touristSpot: a
    .model({ // データモデル
      spotId: a.id().required(), // 主キー
      title: a.string().required(), // 観光地の名前
      address: a.string().required(),// 観光地の住所
      longtitude: a.float().required(),
      latitude: a.float().required(),
      photoUrl: a.string().array(), // 写真のURLリスト
      comment: a.string() // コメント
    }).identifier(['spotId'])
    .authorization((allow) => [allow.publicApiKey()]), // 公開APIキーで認証
});

/**
 * クライアント用スキーマの方定義
 */
export type Schema = ClientSchema<typeof schema>;

/** 
 * データリソースの定義
 */
export const data = defineData({
  schema: schema,
  authorizationModes: {
    defaultAuthorizationMode: 'apiKey', 
    apiKeyAuthorizationMode: {
      expiresInDays: 30 // APIキーの有効期限を30日として設定
    },
  },
});

Amplify Dataに至っては、これだけでDynamoDBテーブル、レコードのCRUD用API、createdAt/updatedAtフィールドなどが自動的に生成できます。

デプロイに関して意識をしなくてもよい

Amplify Hostingを利用すると、フロントエンドのホスティングをしてくれるだけでなく、ブランチの差分を検知して自動的にデプロイすることができます。例えば、開発環境用のreleaseブランチを、本番環境のmasterブランチにマージすると、マスターブランチは自動的にデプロイされます。

AmplifyはHostingやバックエンドの構築をはじめ、開発者がビジネスロジックの構築に注力しやすいプラットフォームとなっているため、CD（継続的デリバリー）などの領域はかなり簡単に利用できるようになっています。デプロイ自体は、リポジトリと連携しなければ手動で行うこともできます。*1

AWS Amplifyの弱点

4. 実際の開発で用いたツール

実際の開発は、アジャイル開発を模して行いました。ただし、開発に多くの時間を割ける休日や、全く開発できない日など、工数が定まらないので、厳密にスプリントを組んでいたりはしません。

また、個人開発でお金をなるべくかけたくないため、無料で利用できる（サブスクリプションを行わず、無料で利用できる範囲）ツールのみ利用しています。

エディタ：Visual Studio Code / Kiro

エディタはフロントエンド開発で個人的に使い慣れているVS Codeを利用しています。無料で利用できる範囲ならば、Kiroにしてもよいと考えています。

コーディングアシスタント：GitHub Copilot / Amazon Q Developer IDE

コーディングアシスタントは、GitHub CopilotとAmazon Q Developer IDEを用いていました。両者をVS Codeにインストールして、GitHub Copilotをまず利用し、クレジットが切れた場合にAmazon Q Developerを使いました。

GitHubのカスタムインストラクションや、Amazon Q Developer IDEのプロジェクトルールなどが二重管理になるというデメリットがありますが、1ヶ月以上開発しても、両者無料利用枠の範囲内で利用することができました。料金が心配な方は、生成AIコーディングアシスタントツールを複数併用するというのはとても良い選択肢だと思います。

チケット管理・ドキュメント管理：Notion

www.notion.com

チケット管理・ドキュメント管理はNotionで行っていました。理由は私が普段使っており、使い慣れているツールだからです。Notionでは、新たにワークスペースを作成すると、チケット管理データベースやガントチャートなど、開発に用いることができるテンプレートが公開されています。そちらを利用すると、簡単にチケット管理データベースなどを構築することが可能です。

（個人開発なので、当時の私は誰にも見られまいと思い、口語でラフにメモしています。そこもご愛敬ということで。。）

リポジトリ管理：GitHub

リポジトリ管理はGitHubを利用しました。リポジトリ管理は、個人開発をする分ではどのサービスも大差がないと思いますが、OSSの大半はGitHubのイメージがあります。GitHub ActionsでCI時にテストなどが行える点も便利です。

AWS Amplifyでアプリを開発する場合は、Amplify Hosting という機能によって Amplify と Git Hub をシームレスに統合できます。 ブランチの差分を自動検知し、自動デプロイ（つまりCD）してくれます。

また、Amazon Q DeveloperのPRエージェントを導入しています。

github.com

一人で開発すると、どうしても偏った思想のコードになってしまっていたり、コーディングミスも生じてしまいます。とはいえ、レビューしてくれる方もいないため、PRエージェントによるレビューは、品質を保つためには必須です。コーディング時にAIに最適化をしてもらうこともできますが、PRエージェントを利用するとレビューが自動化されます。

S3の認証情報をハードコーディングしているのを削除し忘れていたので注意をいただきました。（当然アンチパターンですので後ほど修正いたします。すみません。）

5. その他個人開発について

個人開発の良いところ

なんといっても、個人開発では業務では培えない新しい知識を身につけることができることです。私は普段の業務ではC#のコードしか見ないため、他の言語を学ぶ機会がありません。そういう時に個人開発を通じて様々な技術に触れることで、技術のトレンドを追うことができます。最新のトレンドを追うことで、逆にそれが業務で技術を提案するきっかけになったりします。

また、シンプルに楽しいと思います。個人開発は良くも悪くも自由なので、特にクライアントがいない場合は好きな実装を好きな技術を用いて好きな時間に開発することができます。開発はうまくいかないことも往々にしてありますが、実際にその機能が実装できると業務では味わうことができない感動があります。

個人開発での失敗

今回の個人開発で失敗したなと感じること自体は多いですが、「触ったことがあるツールだから使う」という判断をしてしまったことは大きな失敗だなと感じています。

これは2つの判断を誤ったと考えています。1つ目はNotionの利用です。ドキュメント管理自体はNotionで問題はありませんでしたが、チケット管理は、GitHub Issueを利用するべきだと思っています。リポジトリ管理はGitHubで行っているので、ネイティブにチケット管理ができるのが魅力的です。

2つ目は、Angularの利用です。私はAngularの開発経験が1年程度あり、Reactの開発経験がありませんでした。したがって、学習コストの低いAngularで開発を行おうとしました。ただ、この判断は失敗だったと感じています。コーディング自体は慣れているとはいえ、Reactで実現できてAngularで実現できないことがありました。例えば、AWSが提供しているFrontend MCP Server*2は、Reactには対応していますがAngularには対応していません。

せっかくの個人開発なので、新しいツールを調べて使ってみるのも良いと思います。

生成AIとの向き合い方

大切にしていたのは、最初はあえて生成AIを使わずに自力でコードを書くということです。Angularのコードは多少わかるものの、バックエンドの書き方は何もわかっていませんでした。この状況で生成AIを利用すると、成果物をレビューできなくなります。したがって、多少開発が遅くなってもよいので、初めて触る言語やフレームワークに関しては、自力で書きながら学んでいくことが大事だと思います。

開発に慣れてきて、書き方が分かったら、生成AIにコーディングをしてもらいました。書き方を学んでから開発に用いると、そのクラスに書くべきではないコードなどがわかり、自分で修正することもできます。コードをゼロから生成するのは得意だと感じていますので、少しの修正のみで実装できたりします。

また、UIのレイアウトに関しては、私は（センスがないため）完全に生成AIに任せています。かなまっぷとは別プロダクトですが、「白を基調としたモダンなUIにしてください」とプロンプトを打つだけでこのようにきれいなUIを仕上げてくれます。

モデルはClaude Sonnet v4.0です。デザインまで対応できるのは非常に助かります。

6. まとめ

私の周りでは、個人開発をしたことがあるという方はそれほど多くありません。私も知人からやり方を教わったわけではなく、自力でかなまっぷを開発してみました。ただ、個人開発はやればやるほど楽しい上に、アプリケーション開発に関することを多く学ぶことができます。ですので、とてもおすすめしたい取り組みとなっています。

そのための第一歩として、AWS Amplify Gen2を利用するのが良いと思います。ここまで読んでいただいた方が、個人開発に興味を持っていただけるとうれしいです。