React未経験の元プログラマーがKiroでWebアプリケーション開発で戦ってみた / 20251102 Mitsutoshi Matsuo

2025/11/2　JAWS-UG彩の国埼玉支部 #5
https://jawsug-sainokuni-saitama.connpass.com/event/372964/

株式会社SHIFT
シニアコンサルタント
松尾 光敏

1. React未経験の元プログラマーがKIROで Webアプリケーション開発で戦ってみた 株式会社SHIFT 松尾 光敏 JAWS-UG彩の国埼玉支部 #5 re:Invent準備回（11/2）
2. 1 はじめに（自己紹介） ◆松尾 光敏 ◆業務内容 ➢官公庁案件が中心。行政機関のガバメントクラウドへの利用支援 etc... ➢AWS CCoE 社内活動 ◆受賞／保有資格 ➢2025 Japan AWS Top Engineers ➢2023/2024/2025 Japan AWS All Certifications Engineers ➢その他（CISSP、CISA、PMP etc...）
3. 2 出身は川越！ 【出典】フリー写真素材 フォトック https://photock.jp/
4. １．Webアプリケーション開発の経緯 3
5. 4 1. Webアプリケーション開発の経緯 世の中に提供されているSaaSを活用すれば、Webアプリケーション開発は 要らない…という夢を見ていたんだ。 社内用のデータ検索の アプリケーションがほしいんだよね。 え？簡単なSaaSを 使ったほうがいいですよ。 独自のカスタマイズがそれなりに 必要で保守費が高くてねぇ。。 （あっ、これ来るな…） 上司 私
6. 2．要件整理 5
7. 6 2.1．業務要件整理 業務要件を整理した結果、業務未経験者にナレッジをトランスファーし、 人的リソースを削減するためにデータ検索アプリケーションを用意するというもの でした。 業務経験者 業務未経験者 手持ちのタスクが消化できない… 教育 自主学習 ナレッジDB （データ検索アプリケーション）
8. 7 2.2．機能・非機能要件整理 主な機能・非機能要件としては、以下のものがありました。 ・DBデータはオンプレミスで管理すること ・ソフトウェアライセンス費はかからないようにすること ・検索データをCSVなどで出力し、加工したCSVをデータ投入できること ・追加改修は少ないため、保守が容易なアプリケーションのつくりとすること etc... 単純なアプリケーションではあるが、タスクを抱えながら1から開発するのは辛いなぁ… そうだ、 でなんとかならないか？？
9. 3．開発 8
10. 9 3.1．私のアプリケーション開発履歴 新卒 中小SIer （10年前） 転職 （３年前） 現在 某アプリケーションパッケージを使って、以下の言語で開発していました。 ・クライアントサイド：HTML、JavaScript ・サーバーサイド：Java、JavaScript（※） ・その他（データベース）：Oracle DB、MS SQL Serverなど （※）JavaScriptをサーバーサイド言語として扱えるNode.jsが2009年にローンチされていましたが、 開発当時は、JavaScriptはクライアントサイドの開発言語として周囲からの認知が強かったです。
11. 10 3.2．開発環境（概要） Windows Subsystem for Linux（WSL2） Ubuntu 24（仮想環境） React.js TypeScript （Node.js） MySQL mysql2によるDB接続 （MySQLドライバー） WSLによるCLIでミドルウェアのインストールなどを実行 クライアントサイドは「React.js」、サーバーサイドは「TypeScript」そしてDBはMySQLのOSS構成としました。 Windows OS（Windows 11）
12. 11 3.3．KIROの活用 特にReact.jsについては知見がなかったので、ミドルウェア導入からプログラミングまですべてKiroにおまかせ。 KIROと対話形式でエラーを解消しつつ、構築 React.jsなどのミドルウェアの 導入から、プログラミングを実行
13. 12 3.4.1．Webアプリケーション開発 ー DB導入での課題 まず、Kiroにクライアントサイドは「React.js」、サーバサイドは「TypeScript」そしてDBはMySQLとして データ検索アプリケーションをつくりたいと依頼しました。MySQLの導入の際は、OSユーザのパスワードをこちらで 入力指定してあげる必要がありました。 DB初期化時に、Ubuntuユーザの パスワードをKIROが入力しようとし、 複数回失敗することでMySQLを諦めて SQLiteにしようとした。
14. 13 3.4.2．Webアプリケーション開発 ー 初期アプリケーションの完成 Kiroと対話形式でエラーを解消しつつ、一旦、カード形式のデータ検索アプリケーションをつくってくれました！ 【A5M2によるDBデータ検索結果】
15. 14 3.4.3．Webアプリケーション開発 ー 最終形の表現へ 【A5M2によるDBデータ検索結果】 データ構造が1つのテーブルデータのみであったため、マスタを用意して最適な正規化をしてもらいつつ、カードで はなく、テーブル形式でのデータ検索アプリにつくり替えを依頼したら、スピーディーに対応してくれました！
16. 15 3.5．KiroでWebアプリケーションを実装してみて思ったこと ミドルウェア導入から、アプリケーション構築まで2～3時間程度でできてしまった…恐ろしい…。 ただ頻度は低いとは言え、小規模程度の改修が運用後に発生した場合に、（現時点で）Kiroとの 対話形式でリグレッションテストによる品質の担保をするのがむずかしいとは考えています。 ・コーディング内容に脆弱性（※） はない？ ・大量データに対する検索時のレスポ ンスの品質は大丈夫？ etc… （※）SQLインジェクション対策として、 コーディングでのバインド機構はKiroに指示し なくても実装されていました。
17. 4．総括 16
18. 17 4．総括 Kiroを活用すると、数時間でデータ検索アプリケーション（プロトタイプレベル）を構築することができたが、 保守が容易なアプリケーションかどうかの妥当性の判断が難しかった。 【業務要件】 ・DBデータはオンプレミスで管理すること ・ソフトウェアライセンス費はかからないようにすること ・検索データをCSVなどで出力し、加工したCSVをデータ投入できること ・追加改修は少ないため、保守が容易なアプリケーションのつくりとすること Kiroは、AWSサービスだけでなく、オンプレミス向けのミドルウェアの設定もアシスト可 Kiroは、OSSのミドルウェア構成でアプリケーションを組んでくれる 検索表示アプリケーションをつくってくれる （※CSV出力の実装はこれから） 動くものはつくれたが、後任者へ引継ぎしやすいかは わからない… Kiroを活用することで、開発時間（ソースコードの記述など）を大幅に削減可能。 ⇒ プロトタイプをKiroに提案してもらい、実装してもらうと生産性が向上すると実感（百聞は一見に如かず）。