Zenn
🤖

【初学者向け】自分自身の「あったら嬉しい」を生成 AI を用いて作成してみる

に公開
Python
個人開発
初心者向け
生成 AI
tech

はじめに

クラウドエース 第一開発部の濱です。

普段生活していて「これあったら便利なんだけど、ちょっと満足できないんだよなぁ」と思うこと、よくあると思います。

  • 有料アプリしかない
  • 欲しい機能がない
  • 自分専用にカスタマイズしたい

こうなってしまった場合、妥協するか...ではなく、簡単な機能なら生成 AI を用いて自分で作ってしまえばいいと考えています。

私の「あったら嬉しい」と思った瞬間

先日 (2025年2月28日)、モンスターハンターワイルズが発売されました。私はゲームが大好きで、本作もよくプレイしています。

現状の最終コンテンツまでクリアして、あとは最強の装備を作成するのみとなりました。
その際重宝するのがスキルシミュレータです。
どんなスキル構成だと実現可能か、必要なスキルに加えてどんなスキルがつけられるか検索できる優れものです。

様々なサイトでスキルシミュレータが紹介されていたりしますが、個人的に欲しい機能がないことが多く、歯がゆい思いをしています。
例えば、会心率が 100％を超えて無駄にならないかチェックする機能などです。100% を超えてしまう分を他のスキルに回した方が効率はよくなりますよね。自力で計算すればよいのですがやや面倒なので、そこは全てシミュレータに任せたいなと考えました。

進め方

基本的な進め方を以下に示します。

  1. 基本の仕様定義
  2. あったら嬉しい機能を列挙する
    1. と 2. を参考にして、生成 AI に作成させる
  4. 実際に動かしてみて期待通りの挙動を見せるかチェックする
  5. 自分が満足するまで 3. と 4. を繰り返す

今回作成したシミュレータは、外部公開などはせず、個人利用の範囲で収めるため厳密な実装は行いません。

作成手順

1. 基本の仕様定義

まず、自分の欲しい機能などは一旦置いておいて、基本の動作や仕様を決定していきます。
自身がそのサービスを利用している場面を想像することがコツです。

  • フロントエンドは JavaScript を使用。
  • バックエンドは Node.js を使用。
  • 欲しいスキルとそのレベルを選択して実行すると、実現可能な場合装備が表示される。
  • スキルは文字を打つと候補が出るプルダウン式。
    • この後にスキルレベルを設定、スキルの上限レベルによって表示される数値を変更。
    • 装備候補は最大で 20 個表示される。それ以上の検索結果になった場合は「表示限界になりました」と表示し、掲載を中断する。
  • 実現不可能な場合、不可能と表示。
  • 頭、胴、腕、腰、足、護石の 6 種でスキルを構成する。（装飾品もあるが今回は省略）

2. あったら嬉しい機能を列挙

どのような機能が欲しいか書き起こします。
今回は以下 2 点をオリジナル要素として組み込むことを考えます。

  • 会心率を算出して表示する
    • どのスキルでどれくらい増えるか表示
    • 100% を超えると赤文字で表示

実装手順

0. 用意するもの

Cursor

Cursor は生成 AI を搭載したコードエディタです。無料版では 1 日あたりの使用回数に制限がありますが、基本的なコード生成や質問は可能です。
こちらに料金体系や機能が記載されたページがありますので確認してみてください。

モンハンワイルズのスキルデータ

こちらで公開されているデータを使用させていただきます。

1. 環境構築

プログラミングを行うには、色々な環境準備を行う必要があります。
…が、今回は環境準備も全て生成 AI にお任せしてみようと思います。

2. 実装：ベース作成

まずは基本要件を生成 AI に入力してみます。
先ほど基本要件としてまとめた部分を以下のようにして生成 AI に投げてみましょう。

モンスターハンターワイルズのスキルシミュレータを作成したいです
まず最初に基本設計を言うので細かい実装はあとで大丈夫です
- データを元に装備を組むシミュレータの作成
- 欲しいスキルとそのレベルを選択して実行すると、実現可能な場合装備が表示される
- スキルは文字を打つと候補が出るプルダウン式
  - この後にスキルレベルを設定、スキルの上限レベルによって表示される数値を変更
  - 装備候補は最大で 20 個表示される。それ以上の検索結果になった場合は「表示限界になりました」と表示し、掲載を中断する
- 実現不可能な場合、不可能と表示
- 頭、胴、腕、腰、足、護石の 6 種でスキルを構成する

実施したところ、以下のように概要を記載してくれました。
生成 AI の出力結果
この内容を Accept してコードを書いていきます。

書いてもらったコードについて自分でテストして、想定と違ったりもっとこうして欲しいという部分があった場合に、生成 AI と対話していくだけです。
細かい仕様でも気にせずに対話を進めてアプリを作成していきましょう。

3. 動作テスト①

基本的には 1 から 10 まで作成してくれるので、私たちが行うのは起動とテストだけです。
実際に起動してみると以下のような画面が出てきました。
起動画面
UI までは指示していませんでしたが、全体的にダークを基調としていてかっこいいですね。
画面左側でスキルを選択し、検索を行う仕様にしてくれたようです。

実際にスキルを選択、検索してみましょう。
スキル選択後の画面

いい感じに検索できています。
大まかな部分は一旦完成とし、ここから私が個人的に欲しかった会心率の計算に着手していきます。

4. 実装：会心率計算

次に、会心率の計算に関する部分を実装していこうと思います。

今回使用しているデータには、スキル効果の情報はなく、その部分も実装してもらう必要があります。
非常に手間ですが、実際のゲームのスキル情報を参考に手打ちして生成 AI に教えてあげます。

スキルの会心率を合計し、100% を超えた場合赤文字で表示して、損があることをユーザに伝えたい
会心率に関して、レベルが 1 上がるごとに以下のように定義されています。
・弱点特攻...5,10,15,20,30 上昇
・渾身...10,20,30 上昇
・無我の境地...3,6,10 上昇
・挑戦者...3,5,7,10,15 上昇
・力の解放...10,20,30,40,50 上昇
・攻勢...0,5,10,15,20 上昇

以下のように返答がきました。
最初に改修方法を、次に改修部分の説明をしてくれています。

5. 動作テスト②

では実際に、会心率の計算が行われて表示されるかを確認します。
今回は以下のようにスキルを設定します。

  • 挑戦者 : 5
  • 無我の境地 : 3

これらのスキルで、理論上は会心率が 15 + 10 で 25% と表示されるはずです。

うまく表示されていますね！

次に、会心率が 100% を超えてしまった場合を考えます。
以下のようなスキルを設定します。

  • 力の解放 : 5
  • 弱点特効 : 5
  • 渾身 : 3

このとき、会心率は 110% となり、10% 無駄になってしまいます。

しっかりと赤文字で警告が入っており、ユーザはすぐに無駄に気づくことができます。

また、こちらが指定していないスキルでも会心率の変動がある場合、それも計算に入れてくれており、大変嬉しい仕様になっています。

これにて私の欲しい機能を搭載したスキルシミュレータが完成となりました！！

Tips: 作成に詰まったとき

多くの初学者にとって、生成 AI を使用したプログラム作成の障壁となる部分と解決策を紹介していきます。

  • アプリの起動方法が分からない

    • 起動方法が不明な場合は、「このアプリはどのようにすれば起動しますか？」のように具体的な質問を生成 AI に投げかけてみましょう。
      生成 AI の出力結果

  • 改善点が思いつかない

    • アプリの更なる改善点についてアイデアが欲しい場合は、「このアプリの改善点は？」のように問いかけることで、AI が提案を生成してくれます。
      生成 AI の出力結果

その他、一般的な詰まりポイントと考え方

  • 生成 AI が指示を理解してくれない

    • 問題を分解する: 大きな指示ではなく、より小さなステップに分けて指示してみましょう。「〇〇を実装して」ではなく、「まず〇〇の関数を作って、次に△△の処理を追加して」のように。
    • 指示を具体的にする: 曖昧な表現を避け、より明確な言葉で指示します。「いい感じにして」ではなく、「ボタンの色を青にして、サイズを大きくして」のように。
    • 例を示す: 期待する入力と出力の例を具体的に示してみましょう。
    • 文脈を明確にする: どのファイル、どの部分について話しているのかを明確に伝えます。

  • 期待通りのコードが出力されない

    • 制約条件を追加する: 「〇〇は使わないで」「〇〇の形式で出力して」のように、制約や要件を明確に伝えます。
    • 段階的に修正する: 一度で完璧なコードを求めず、出力されたコードを元に「ここをこう修正して」と具体的に指示を重ねます。
    • 別の表現で試す: 同じ指示でも、言い方を変えるとうまくいくことがあります。

  • エラーが発生して動かない

    • エラーメッセージを AI に伝える: エラーメッセージ全体をコピーして AI に渡し、解決策を尋ねます。
    • 関連するコードを共有する: エラーが発生している箇所のコードとその周辺のコードを AI に共有し、原因究明を依頼します。
    • 原因を特定する: AI に頼るだけでなく、自分でエラーメッセージを読んだり、デバッグを試みたりすることも重要です。

まとめ

この記事では、日常で感じた「あったら嬉しい」という個人的なニーズを、生成 AI を活用して形にするプロセスを、モンスターハンターワイルズのスキルシミュレータ作成を例に紹介しました。

プログラミングの専門知識がなくても、生成 AI との対話を通じて:

  1. 仕様定義: 必要な機能や「あったら嬉しい」機能を明確にする
  2. 実装: 生成 AI にコード作成を指示し、段階的に実装を進める
  3. テストと修正: 実際に動作させ、期待通りでなければ AI と対話して修正を繰り返す

ことで、自分だけのツールを作成できることを示しました。

特に、環境構築から具体的な機能追加、さらには詰まった際の AI とのコミュニケーション方法まで、実践的な手順を解説しました。

生成 AI は、専門家でなくてもアイデアを形にする強力な味方です。この記事が、皆さんの「あったら嬉しい」を実現する一助となれば幸いです。

Discussion