0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Amplify x Kiro】超自分仕様の高配当株ポートフォリオ管理アプリを作ってみた

0
Posted at

はじめに

Amplify Gen 2Kiro で日本の高配当株ポートフォリオを管理する Web アプリケーションを作ってみました。

既存の証券会社アプリや配当管理アプリなど、無料の範囲ではあるものの色々使ってましたが、持ち株情報の登録が面倒だったり、自分の欲しい粒度でデータが見れなかったりと、なかなか満足出来る物がありませんでした。
それなら自分が欲しい機能を全部盛り込んだ 超自分仕様 のアプリを作ってしまおう、というのが今回の動機です。

具体的にやりたかったこと:

  • 家族名義の複数口座をまとめて管理したい
  • 証券会社の取引履歴をコピペするだけで一括登録したい
  • セクター別・景気感応度別の分散状況をグラフで見たい
  • 配当予想を登録して、年間の配当収入見通しを立てたい
  • 過去の投入金額配当実績の推移をグラフで見たい

これらを全部詰め込んだのが今回のアプリです。
ちなみにバックエンドでの自動更新処理は入ってません。個人利用で毎日使うわけでもないので、使いたい時に手動更新することで余計なコストが掛からないようにしています。

アプリ開発のベースとなるテンプレートには、以前作成した Kiro x Amplify Gen 2 テンプレート を活用しています。

コーディングは Kiro の Spec 駆動開発で進めました。要件定義 → 設計 → タスク分解 → 実装の流れを Kiro に任せることで、効率的に開発できました。

完成イメージ

全4つのタブで構成されています。

  • 現在状況がひと目で分かるサマリタブ

KiroStockManagementSummaryTab.png

  • 持ち株の分散状況や過去からの推移が見えるグラフタブ

KiroStockManagementGraphTab.png

  • 持ち株を簡単に登録できる持ち株一覧タブ

KiroStockManagementStockTab.png

  • 配当情報を登録・編集できる配当管理タブ

KiroStockManagementDividendTab.png

主な機能

機能 説明
サマリ 合計取得額・現在評価額・含み損益・配当利回りを一覧表示
グラフ 銘柄別/セクター別/景気感応度別の円グラフ、ツリーマップ、年別・月別配当推移
持ち株一覧 取得記録の登録・編集・削除、売却記録の登録、一括貼り付け
配当管理 配当実績の自動取得・手動登録、配当予想の管理、一括検証
現在価格更新 保有銘柄の最新株価をバッチ取得し評価額を再計算
Google ログイン Google アカウントによるソーシャルログイン対応
操作マニュアル アプリ内にマニュアルページを内蔵(別タブで表示)
モバイル対応 スマートフォンでも操作しやすいレスポンシブデザイン

機能の詳細

サマリタブ

ポートフォリオ全体の状況を一目で把握できるダッシュボードです。

  • サマリカード: 合計取得額、現在評価額、含み損益額、配当利回り等をカード形式で表示

KiroStockManagementSummaryCard.png

  • Top3 ランキング: 配当金額 Top3 / 時価総額 Top3 を表示

KiroStockManagementSummaryTop3.png

  • 銘柄別サマリテーブル: 銘柄ごとの保有数量・取得単価・含み損益等を一覧表示。名義人・証券会社別の明細表示可能。含み損益順などでソート可能。

KiroStockManagementSummaryStock.png

グラフタブ

Recharts を使った多彩なグラフでポートフォリオを可視化しています。
ツリーマップだけは CSS Grid で自前実装になっています(何故か)。Recharts の Treemap を使うことも可能。

  • 円グラフ(PieChart): 銘柄別・セクター別・景気感応度別の構成比率を表示。高配当株投資ではセクター分散が重要なので、偏りを一目で確認できます

KiroStockManagementGraphPie.png

  • ツリーマップ(Treemap): 保有金額の大きさを面積で表現。どの銘柄にどれだけ資金を投じているかが直感的にわかります

KiroStockManagementGraphTreemap.png

  • 年別配当推移/月別配当推移/年別購入額推移(BarChart): 年ごとの配当受取額や月別の配当推移等を棒グラフで表示。配当収入の成長や年ごとの投資額を確認できます

KiroStockManagementGraphBar.png

  • 年度選択/税引き前・後表示: デフォルトは本年度。過去の配当実績や税引き後の配当金額もグラフ化して表示可能。
  • 銘柄設定: 銘柄ごとのセクターや景気影響の編集。銘柄登録時に自動設定されるが、誤っている場合は修正。

持ち株一覧タブ

取得記録の CRUD 操作を行うメイン画面です。

  • 取得記録の登録: 銘柄コード・銘柄名・取得日・数量・取得単価・名義人・証券会社・口座種別を入力
  • 一括貼り付け(BulkPaste): Excel やスプレッドシートからコピーしたデータをそのまま貼り付けて一括登録。証券会社の取引履歴をコピペするだけで取り込めます
    ①銘柄貼り付け(タブ区切りで、銘柄コード 数量 取得単価 取得日 銘柄名(任意))

②名義人、証券会社などを設定して登録

  • 売却記録: 部分売却・全売却に対応。価格はその時の平均取得価格で固定。売却時のバリデーション(保有数量を超える売却の防止)も実装

KiroStockManagementStockSell.png

配当管理タブ

配当実績と配当予想を管理する画面です。

  • 配当実績・予想の自動取得: yfinance API 経由で過去の配当履歴と配当予想を自動取得。手動入力の手間を大幅に削減

KiroStockManagementGetDividend.png

  • 一括検証: 登録済みの配当予想を IR BANK のデータと突合し、乖離がある場合にアラート表示。配当予想の精度を維持できます
  • 予想→実績: 配当金の確定後に実行することで、配当予想を配当実績に変更し、新たな配当予想を登録します。

yfinanceで取得する配当は実態と異なる場合があります。
IR BANKのデータと突合することで、より正確な配当金額を登録できるように補助します。

現在価格更新

ボタン一つで保有銘柄の最新株価を取得し、評価額・含み損益を再計算します。

  • yfinance API 経由で最新株価を取得
  • 20 銘柄ずつバッチ処理(AppSync の 30 秒タイムアウト対策)
  • 更新日時を記録し、いつ時点の評価額かを明示

アーキテクチャ

技術スタック

レイヤー 技術
フロントエンド Next.js 15 + React 19 + TypeScript
バックエンド AWS Amplify Gen 2
認証 Amazon Cognito(Email + Google OAuth)
データベース Amazon DynamoDB
API AWS AppSync (GraphQL)
Lambda 関数 Python 3.12(株価取得、配当情報取得、セクター情報取得)
ホスティング AWS Amplify Hosting
IDE Kiro(Spec 駆動開発)

AWS 構成図

Amplify Gen 2 を用いた標準的なフルスタックアプリケーション構成です。

AWS構成図_JapanStockManagement.png

使用する AWS リソース

サービス 用途
Amplify Hosting Next.js アプリの配信 + SSR。GitHub push で自動デプロイ
Amazon Cognito ユーザー認証(Email + Google OAuth)
AWS AppSync GraphQL API。DynamoDB への CRUD + Lambda リゾルバー
Amazon DynamoDB データストア(6 テーブル)
AWS Lambda × 4 外部 API 連携(Python 3.12)

データモデル

Amplify Gen 2 の Data(AppSync + DynamoDB)で以下のモデルを定義しています。

モデル 用途
Holder 名義人マスタ(家族名義の管理に対応)
Brokerage 証券会社マスタ
AcquisitionRecord 取得記録(銘柄・数量・取得単価・現在評価額)
DividendActual 配当実績
DividendForecast 配当予想
TickerMaster 銘柄マスタ(セクター・景気感応度分類)

すべてのモデルに owner 認可を設定しているため、ユーザーごとにデータが完全に分離されます。

Lambda 関数(Python)

外部 API との連携は Python Lambda で実装しています。

関数 用途 データソース
getStockPrices 保有銘柄の最新株価を取得(並列処理) yfinance
getDividendInfo 配当履歴・配当予想を取得 yfinance
searchDividendInfo 配当予想を検索・検証 IR BANK(スクレイピング)
getTickerSectorInfo セクター・景気感応度を取得 yfinance

AppSync のタイムアウトは 30 秒固定(調整不可)のため、株価更新は 20 銘柄ずつバッチ処理で対応しています。
非同期処理にしてSubscriptionでリアルタイム通知にすることも出来ましたが、今回実装ではオーバースペックになると判断し分割処理にしています。

利用料試算

少人数(1〜5人)での個人利用を想定した試算です。

サービス 無料枠 想定利用量 月額目安
Amplify Hosting ビルド 1,000分/月、配信 15GB/月、SSR 50万リクエスト/月 ビルド数回、配信 1GB 未満 $0
Cognito 直接サインイン/ソーシャル: 10,000 MAU/月 1〜5 ユーザー $0
AppSync 従量課金($4.00 / 100万リクエスト) 数千リクエスト/月 $0.01〜0.02
DynamoDB 25GB ストレージ、25 WCU/25 RCU 数 MB、低頻度アクセス $0
Lambda 100万リクエスト/月、400,000 GB秒/月 数百回/月 $0
合計 $0〜$0.02

工夫したポイント

1. AppSync タイムアウト対策(バッチ処理)

AppSync のタイムアウトは 30 秒固定で変更できません。保有銘柄が 50 銘柄を超えると、全銘柄の株価を一度に取得するとタイムアウトする可能性があります。

そこで、フロントエンド側で 20 銘柄ずつバッチ処理 して順次リクエストを送る設計にしました。useValuation フックで以下のように実装しています:

// 20銘柄ずつに分割してリクエスト
const BATCH_SIZE = 20;
for (let i = 0; i < tickers.length; i += BATCH_SIZE) {
  const batch = tickers.slice(i, i + BATCH_SIZE);
  const result = await client.queries.getStockPrices({ tickers: batch });
  // 結果をマージ...
}

プログレスバーで進捗を表示し、ユーザーに待ち時間を意識させない工夫もしています。

2. 配当情報の多段取得と検証

配当情報は以下の優先順位で取得しています:

  1. Yahoo Finance — pythonのyfinanceライブラリを利用(非公式)。
  2. IR BANK — スクレイピングで取得。1〜2秒置きにアクセス。

さらに「一括検証」機能で、登録済みの配当実績と IR BANK の実績データを突合し、乖離がある場合にアラートを出します。これにより、配当実績の精度を継続的に維持できます。

外部サービス(yfinance、IR BANK)の仕様変更で取得できなくなる可能性があります。取得失敗時はエラーを表示し、手動入力にフォールバックする設計にしています。

3. 一括貼り付け(BulkPaste)

証券会社の取引履歴画面からデータをコピーして、そのまま貼り付けるだけで取得記録を一括登録できます。

  • タブ区切りテキストに対応(Excel やスプレッドシートからのコピペを想定)
  • バリデーション(必須項目チェック、数値チェック、日付形式チェック)
  • プレビュー表示で確認してから登録
  • 名義人・証券会社・口座種別を一括で指定可能

手動で 1 件ずつ入力する手間を省き、初期データの投入を大幅に効率化しています。

4. コスト配分タグの自動付与

AWS Cost Explorer でプロジェクト別のコストを追跡できるよう、CDK でタグを自動付与しています。

amplify/backend.ts
const stack = backend.stack;
Tags.of(stack).add('Project', 'japan-stock-management');
Tags.of(stack).add('Environment', process.env.AWS_BRANCH === 'main' ? 'production' : 'dev');

AWS_BRANCH 環境変数を使って本番/開発を自動判定するのがポイントです。Amplify Hosting がブランチごとにこの値を設定してくれます。

5. 名義人・証券会社のマスタ管理

家族名義で複数の証券口座を持っている場合に対応するため、名義人(Holder)と証券会社(Brokerage)をマスタとして管理しています。

  • 取得記録に名義人・証券会社を紐付け
  • 一括貼り付け時にも名義人・証券会社を指定可能

6. セクター・景気感応度の自動分類

銘柄を登録すると、yfinance API からセクター情報を自動取得して分類します。

分類
景気敏感(Cyclical) 情報技術、金融、素材、一般消費財
ディフェンシブ(Defensive) 生活必需品、ヘルスケア、公益事業

高配当株投資では「景気敏感株に偏りすぎていないか」を確認することが重要です。円グラフで景気感応度別の構成比率を表示し、ポートフォリオのバランスを可視化しています。

7. 売却時のバリデーション

売却記録を登録する際、以下のバリデーションを実施しています:

  • 保有数量を超える売却の防止
  • 同一銘柄の複数ロット(取得日が異なる)がある場合、どのロットから売却するか選択可能
  • 売却後の保有数量が 0 になった場合の表示制御

8. 配当予想の取り扱い

配当予想がうまく見えるようにいくつか工夫してます。

  • 配当予想がない場合に過去実績を登録
    決算直後など、次の配当予想が存在しない場合に、過去実績を配当予想として仮設定。
  • 配当予想から配当実績への自動移行
    配当予想の中で予想日(forecastDate)が今日以前になったものを1ボタンで配当実績に移行。
  • グラフ表示で最新年度の表示方法
    受け取り済みの配当実績と配当予想をひとまとめに取り扱うことで、前年度比を見える化。

制約事項

制約 詳細
対象市場 日本市場の個別株・ETF のみ。海外株・投資信託は非対応
AppSync タイムアウト 30 秒固定(調整不可)。株価更新は 20 銘柄ずつバッチ処理で対応
Lambda メモリ getStockPrices は 512MB に設定。銘柄数が多い場合はさらに増やすことも可能
外部 API 依存 yfinance・IR BANK の仕様変更で取得できなくなる可能性あり
リアルタイム性 株価はオンデマンド更新(自動更新・プッシュ通知なし)

まとめ

「自分の管理スタイルに合ったツールが欲しい」— そんな動機から、Amplify Gen 2 + Kiro で超自分仕様のポートフォリオ管理アプリを作ってみました。

  • フロントエンド: Next.js + Recharts でグラフ可視化
  • バックエンド: AppSync + DynamoDB でサーバーレス CRUD
  • 外部連携: Python Lambda で株価・配当情報を取得
  • 認証: Cognito + Google OAuth
  • 開発体験: Kiro の Spec 駆動開発で要件から実装まで一気通貫

Kiroちゃんが優秀すぎて、ほぼハマることなく徐々に形にしていくことが出来ました。

自分仕様で作ったアプリですが、リポジトリは公開しているので、高配当株投資をしている方はフォークして自分好みにカスタマイズしてみてください。

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?