浜村拓夫(・∀・)作品集

頭の中にあるイメージを表現できるデザイン力が欲しいです(><)

LLMをプログラミングで活用

チームみらいがLLM(AI)を活用して、ほぼ自動でプログラムを作成したという話題がありました。 これらの記事をChatGPT-5に要約してもらいました。

marumie.team-mir.ai

みらい まる見え政治資金

note.com

note.com

95%以上をLLMが実装。『みらいまる見え政治資金』を45日で完成させた、AIネイティブな開発手法についてご紹介

note.com

📰 【まとめ】95%以上をLLMが実装!『みらいまる見え政治資金』が示したAIネイティブ開発の新時代

  • 政治資金の透明化を目的としたWebプラットフォーム「みらいまる見え政治資金」が、わずか45日間でリリースされた。
  • その驚くべき点は、コードの95%以上がLLM(大規模言語モデル)によって自動生成されたということだ。
  • この記事では、チームみらいのエンジニア・伊藤淳氏が実践した「AIネイティブ開発手法」の全貌を整理する。

🚀 LLMが中心となった高速開発の背景

  • 伊藤氏は、フルタイムの本業を持ちながらもパートタイムで本プロジェクトに参加。
  • フルスクラッチで開発できる環境と、LLMが得意とするNext.js+TypeScriptを採用したことで、AI主導の開発が可能になった。
  • コード量は約15,000行。OSSとして公開され、リリース2日で20万PVを記録するなど大きな反響を得た。

🧩 設計のポイント:「AIが迷わない構造」を作る

  • プロジェクトはpnpmによるモノレポ構成で、webappadminsharedを分割。
  • さらにclient/serverを明確に分離し、実行環境の混同を防止した。
  • サーバー処理にはクリーンアーキテクチャ風のレイヤー構造を採用し、責務を厳密に分けることでLLMの混乱を最小化。
  • 全体ルールは「CLAUDE.md」にまとめ、Next.jsの実装方針やGitHub運用ルールまで統一した。

🛠️ 実装の工夫:AIに“考えさせる”仕組み

  • 複雑な機能は、いきなりコードを書かせずに設計ドキュメントを生成させることから開始。
  • LLMと対話しながら仕様を固めた後、実装へ移行する流れを確立した。
  • デザイン面でもFigma MCP(Framelink)連携を活用し、Tailwindでの実装までAIが自動化。
  • 粗い指示ではなく「ヘッダー外枠→ロゴ→メニュー挙動」といった段階的な指示を与えることで、品質を安定させた。

🔍 コードレビューと品質担保

  • AIが書いたコードも人間が責務単位でレビュー
  • ロジックの正しさはユニットテストで確認し、server/lib層を中心にテストを整備。
  • また、Biome+simple-git-hookによる自動整形やCIでのlint/test実行を徹底し、ミスを減らした。
  • Vercelのプレビュー機能でLLM生成PRを即確認できる体制も整え、開発サイクルを高速化している。

💡 成果と学び

  • 伊藤氏は「実装の99%以上をLLMに任せられた」と振り返る。
  • 人間が苦手な厳密なルール運用を、AIは例外なく実行できるため、一定品質を維持しながら高速に開発を進められた。
  • AIネイティブ開発は「AIだから特別なことをする」わけではなく、人間にも有効な基本原則を徹底的に守ることが成功の鍵だという。

🧭 まとめ

  • 設計・実装・レビューの各工程で、AIと人間の役割を明確に分担。
  • LLMの「忍耐力」と「正確さ」を引き出すために、明快な設計とルールの一貫性を重視。
  • 小〜中規模アプリなら、LLM中心の開発でも十分に高品質な成果が得られる。

『みらいまる見え政治資金』の成功は、「AIが人間の手を完全に代替できる時代」ではなく、「AIを設計思想に組み込んだ新しい開発文化」の幕開けを示している。


『みらい まる見え政治資金』を支える技術-国政政党がリリースしたOSSの技術選定と実装について

note.com


『みらい まる見え政治資金』を支える技術まとめ

国政政党がOSSで挑む「政治資金の見える化

  • 2025年、国政政党「チームみらい」がリリースしたWebサービス「みらい まる見え政治資金」は、政治資金の流れを一般市民にも分かりやすく公開する透明化プラットフォームです。
  • 公開からわずか2日で20万PVを突破し、ソースコードオープンソース化されるなど、大きな注目を集めました。
  • この記事では、開発を担当した永田町エンジニアチームの伊藤氏(エディ)が語る、技術選定と実装の裏側をまとめます。

公共性のあるサービスとしての設計思想

  • 政治資金という公共性の高いデータを扱うため、開発ではまず安定性と信頼性を最優先。
  • PageSpeed InsightやVercelの計測では満点に近いスコアを獲得し、アクセス集中時にもダウンタイムなしで稼働しました。
  • さらに、SEOアクセシビリティ評価も高得点を記録し、「誰でも見やすい政治資金サイト」を実現しています。

スピードと汎用性を両立した技術選定

  • 本プロジェクトは参院選に向けた「100日プラン」の一環として進行。
  • 限られた期間での開発が求められる一方、将来の再利用も見据えて設計が行われました。

🧱 採用技術

  • フロントエンド:Next.js + VercelSSRSEO最適化を容易に実現。AIコーディング支援との相性も高い構成。
  • BaaS:Supabase(Postgres) → Firebaseよりもロックインが少なく、スピーディーに環境構築可能。
  • 設計方針:抽象化の濃淡をつける → DB層は汎用化、表示層はスピード優先で開発。結果として100日で完成。

高速で安定した体験を支えるキャッシュ戦略

想定以上のアクセスにも耐えた秘密は、二層キャッシュ構造にあります。

  • ISR(Incremental Static Regeneration)によるHTMLレベルのキャッシュ
  • サーバー関数キャッシュで動的データにも対応 これにより、キャッシュヒット率は98.3%に達し、常に高速な表示を実現しました。

アクセシビリティと誰もが使えるUI

国政政党の公式サービスとして、アクセシビリティ対応にも力を入れました。

  • キーボード操作での完全ナビゲーション対応
  • スクリーンリーダー対応(音声読み上げ)
  • PageSpeed Insightで「ユーザー補助」スコア91点

AI支援を活用しながら、より多様な利用者に配慮した設計が実現されています。


単式簿記×複式簿記の融合データ構造

政治資金は単式簿記(現金主義)で管理されますが、元データは複式簿記(発生主義)の会計ソフトから取得。

この違いを吸収するため、

保存は複式簿記、表示は単式簿記 という設計を採用。 透明性を維持しながら、将来的な会計標準の高度化も見据えています。


「気持ちが湧く」UIへの挑戦

  • 当初は法定分類のままでは“感情が湧かない”という課題が。
  • そこで、より親しみやすい独自カテゴリを導入し、支出の内容を生活感のある言葉で可視化。
  • SNS広告費が意外に高い」「印刷代ってこんなにかかるんだ」といった新たな気づきを促す設計となりました。

OSSとしての拡張性

将来的に他の政治団体でも利用できるよう、

  • 各会計ソフト(freee, 弥生など)に対応可能なアダプター層を設計
  • CSVアップロード/変換処理を独立化 Webアプリ部分を改修せずに他団体でも導入可能な仕組みに。

さらに、CSVダウンロード機能により、誰でもデータを分析・検証できる“完全オープン”な仕組みも備えています。


まとめ

「みらい まる見え政治資金」は、 スピード・透明性・拡張性・公共性のすべてを両立した稀有な政治系OSSプロジェクトです。

「テクノロジーの力で民主主義をアップデートする」 ― チームみらい 永田町エンジニアチーム

今後もチームみらいは、政治と市民をつなぐ新しい形を技術で提示していくとのこと。 OSSとして公開されたこのプロジェクトが、他の政党・市民団体へ広がっていくことが期待されます。


感想

目的と手段の峻別

  • AI(LLM)は、あくまでも手段に過ぎません。
  • この便利な道具をどのように使うか?という目的が大事ですね。

AIで時短できるところは徹底的に時短にして、人間は他のところで活躍すれば良いと思いました。 LLMの使い方について、もっと理解を深めたいです。