非エンジニアが生成AIで高配当株を分析してみた【Webサイト公開】

2024年4月26日 15:17

こんにちは、smorceです。久しぶりの更新です。
最近の X では非エンジニアの方が生成AIを活用してプロダクト開発されているのをよく見かけます。

GPT-4を使って非エンジニアの人が面白いアプリや機能を作ってるのを観測してるんですが、作りたいものを想像してGPT-4が作れるレベルまでタスクを細かく分解してそれぞれを繋ぎこむ力があれば大体動くものは作れるし、作りたいものが大規模でもこれさえ徹底してれば別に難しくないのかも。
— ねぎぽよし (@CST_negi) March 18, 2023

そういった方々の活動に触発されて非エンジニアの私も何か作ってみたいと考え、まずは簡単なWebサイトの制作から始めてみることにしました！

実際に作成したサイトは以下です、ぜひご覧ください～！
何かご意見などありましたらコメントいただけると嬉しいです！

高配当株分析サイト

こちらが私が作成した”生成AIで高配当株を分析したサイト”です。生成AIで分析した結果が掲載されておりますので、ぜひご覧ください。
（ご注意：Webサイト上でユーザーがインタラクティブに分析するというコンセプトではなく、分析した結果を閲覧するためのサイトです。）

なぜ高配当株の分析なのか？

私自身が兼業投資家であり、高い配当利回りを提供する連続増配株に興味を持っています。
連続して配当を増やしている銘柄は非常に魅力的ですが、単純に連続増配年数が長かったり配当利回りが高いという理由だけで銘柄を選ぶのは危険が伴います。
高配当でかつ優良株を見分けるにはファンダメンタルズ分析をして銘柄を精査する作業が不可欠です。

健全な経営状態か？安定した成長が見込めるか？など多角的に分析することでよりリスクの低い投資が可能になります。

しかし、兼業投資家にとってファンダメンタルズ分析に取り組むには手間も時間もかかり過ぎるため、私自身がずっと手つかずでいました。

そこで、生成AIを利用してこのプロセスを自動化する方法を考えました。具体的には、AIが企業の公開情報を基にファンダメンタルズ分析を行い、各銘柄に対するスコアと総評を出力するシステムです。このシステムを定期的に稼働させることで、楽に優良株を発掘しよう、と考えました。

Webサイトのコンセプト

「生成AIがアメリカ株式のデータに点数をつけてコメントしてくれた結果を一覧するサイト」です。

【注意点】
AIによる分析コメントを掲載しておりますが、投資は自己責任でお願い致します。

見方の解説

Webサイトの見方でつまづきそうなポイントがありますので一部補足致します。

(1) 連続増配年数について
(2) 点数計算について
(3) 掲載順について
(4) Webサイトの更新頻度について

------------------------------------------------------
(1) 連続増配年数について
------------------------------------------------------
「連続増配年数」の取得が難しかったため配当貴族(25年以上増配を続ける銘柄)に該当する銘柄だけデータを入力しました。逆に「連続増配年数」がゼロになっているものは「増配をしていない」という意味ではなく、配当貴族ではないため分からなかったからゼロで置いている、という意味です。（本当は連続増配をしている可能性もあります。）

------------------------------------------------------
(2) 点数計算について
------------------------------------------------------
生成AIでスコアリングをしました。以下は5点満点です。

収益と市場優位性 … 5点
財務の健全性 … 5点
稼ぐ力と安全性 … 5点
配当実績と支払い能力 … 5点
総合得点 … 1から4の平均値

------------------------------------------------------
(3) 掲載順について
------------------------------------------------------
配当利回りの高い順で掲載しています。

------------------------------------------------------
(4) Webサイトの更新頻度について
------------------------------------------------------
更新は1ヶ月単位です。毎月1日に最新の情報に更新します。

Webサイトの説明は以上となります。
ここまでの説明でWebサイトの利用は問題なく行えると思います。

ここから先は実装周りの技術的な話を解説いたします。

ですが、私自身は非エンジニアですので、技術的なところは詳しくありません。
もし説明でおかしなところがあればコメントで教えていただけますと幸いです。

【！】この記事では様々な場面で生成AIが登場します

技術的な話

概要

高配当株の分析を目的としたWebアプリケーションを開発しました。このアプリケーションは、React（Next.js フレームワークを使用）で構築されており、TypeScript, Tailwind CSS, Framer Motion などが使用されています。主なフローは次のとおりです。

初期化: ユーザーがWebページにアクセスし、index.htmlがロードされます。このHTMLファイルは、Reactアプリケーションのマウントポイントとなる<div id="root"></div>を含みます。
React コンポーネントのレンダリング: Reactアプリケーションがブラウザによって解釈され、Home コンポーネントがマウントされます。
データの取得: page.tsx は Cloudflare Workers 経由で非同期にデータを取得し、そのデータを Home コンポーネントに渡します。
ユーザーインタフェースのインタラクション: ユーザーはWebページ上のUI要素と対話し、異なるアクション（データの展開、情報の表示など）をトリガーすることができます。

データ更新ワークフロー

(1)Webからデータを収集し、(2)生成AIで高配当株のデータを分析して、(3)結果を Cloudflare Workers KV に登録しております。
このプログラムを GitHub Actions で毎月自動で実行する運用となっています。

開発スタート時に考えていたこと

まずプロダクト開発の前に最初に決めていたことがあります。それはWebサイトのホスティングは Cloudflare Workers & Pages でやる、ということです。
どこからアクセスされても高速に表示される快適なWebサイトを目指したいと思い、色々調べていくうちに Cloudflare Workers & Pages を知りました。

こちらのサービスは GitHub のリポジトリと連携すれば自動的に Cloudflare の CDN 上にデプロイしてくれるというもので、かつ、個人開発レベルなら無料枠も十分なサイズが確保されていたため、とても良いサービスだと思いました。
Webサイトを作りたいという私の目的に合致していると思いましたので、Webサイトのホスティングはこちらのサービスを利用しようと考えました。

それでは実際の作業手順を解説していきます。バックエンドとフロントエンドに分けて解説します。

バックエンド

株式銘柄の分析には生成AIを使い、それを Python で動かしています。(GPT3.5や4は使っておりません)。プロンプトエンジニアリングでは GPT4 を使いました。

データを収集して特徴量エンジニアリングを行い、作成したデータを生成AIに渡して分析してもらっています。
最後に分析した結果をまとめて Cloudflare Workers KV にアップロードしデータを登録・更新してます。

この一連の流れをスクリプトで作成して、GitHub Actions に登録し毎月自動で動かすようにしております。

Cloudflare Workers KV に必要なデータが登録されれば、あとはそれをフロントエンド側で表示するだけです。

バックエンドの説明は以上で、非常にシンプルな構成となっております。

フロントエンド

冒頭でも述べた通り Cloudflare Workers & Pages を使い、フレームワークは Next.js を使っています。

さて、フロントエンドの実装の前に、まずはWebサイトのデザインを決めようと考えました。

しかし、デザインの経験もセンスも皆無だったため、まずはDALL·E 3に相談してWebサイトのコンセプトデザインを作成しようと考えました。
やりたいことからして、大して複雑な機能は必要なく、また静的なWebサイトならシンプルなデザインが良いと思い、DALL·E 3に相談しながら進め、以下のデザインを作成してもらいました。

こちらを基にWebサイトを作成することに決めました。

次に、個人レベルの開発でかつ快適なWebサイトを目指すならどのフレームワークが良いか検討するため、色々調査をしました。

多様な意見がありましたが、結果的にフレームワークは Next.js を選択しました。インフラがいらないようなWebサイトの制作であればこちらのフレームワークで十分要件を満たしてくれそうです。

やりたいことから逆算してフレームワークを決めるまでは良かったのですが、私が Next.js を触ったことがなく全く知識を持っていなかったため、ここで詰まってしまいました。

そこで、まずは HTML でコンセプトデザインに近いWebサイトを作り、その後に Next.js にコンバートするという計画を立てました。

パワポでコンセプトデザインに近いレイアウトを作成し、それをGPTs「Screenshot To Code GPT」にスクリーンショットとして貼りました。

そこから Screenshot GPT に聞きながら手直しをして HTML の Webサイトが完成しました。

左下の方にあるトグルボタンは挙動がおかしくて何度やっても修正できなかったのですが、あくまでもモックなので気にせずに次の作業に移りました。

さて、次は HTML をベースに Next.js にコンバートする作業です。Next.js については全く知識がなかったため、以下のサイトを参考にチュートリアルを始めました。

こちらのサイトで参考になったのは Cloudflare Workers と KV の連携方法です。
Webサイトのホスティングは Cloudflare Workers & Pages を使おうと思っておりましたが、どうやってデータを連携すれば良いのか分からず途方に暮れていましたが、、、
上記の記事を拝見して KV の存在を知りました！

見たところ簡単に使えそうだったので KV にデータを登録しておくのが良さそうだと思い、上記の記事をベースにして、次は GPTs「Grimoire」に聞きながらコンバート作業を進めていきました。

生成AIで分析した結果を KV にアップロードして、Cloudflare Workers は KV に登録された値を取得してWebサイトに表示する構成としました。

また、コンバート作業を進めながら細かい箇所の改善を行っていきました。
- トグルボタンをONにした際にアニメーションをつけて動きを出す
- 集計条件はツールチップにまとめ見た目をスッキリさせる
- 総合得点のカラムを追加する

慣れない Next.js や CSS に苦戦しながらも何とかWebサイトのデザインは形になりました。
次はWebサイトのロゴを作成することにしました。ここではGPTs「image generator」を利用しました。

デザインがWebサイトのイメージに合っており、生成AIが苦手なスペルも正確に描画してくれたため、こちらのロゴを採用しました。
周りの方眼紙みたいなものや、中央横にある 49, 39 は手作業で削除しました。

さらにWebサイトの favicon を用意したいと思い、GPT-4にお願いして、ロゴのpngファイルをicoファイルに変換するためのコードを出力してもらいました。このコードを実行して favicon を作成しました。

これでロゴと favicon も揃いましたので、いよいよWebサイト公開の準備が整いました。後は Cloudflare Workers & Pages にデプロイするだけです。

デプロイの作業は一瞬で、GitHub のリポジトリを更新するだけで勝手にデプロイしてくれます！

そして、公開したWebサイトが以下となります。

苦労した点

Next.js や CSS は初めて触ったため四苦八苦しながら作成しました。

特に困ったのは GPT4 でコードの修正がうまくいかないケースです。しばしばこういったケースがありましたので、そういう時は Poe の「Claude-3-Sonnet」を利用しました。
無料枠では1日に回数の制限がありますので、難しい修正だけ依頼するという形で GPT4 と使い分けました。

Cloudflare も初めて使いましたが、分かりやすく機能が整理されており、調べながらでも簡単に利用することができましたので、ここでは躓くことはほとんどなかったです。（Zenn の解説記事にお世話になりました！）

利用した生成AI一覧

さて、ここまで登場した生成AIは以下の通りです。

OpenAI
- GPT4（→プロンプトエンジニアリング）
- DALL·E 3（→デザイン）
- Screenshot To Code GPT（→HTML）
- Grimoire（→コーディング）
- image generator（→ロゴ）
Poe
- Claude-3-Sonnet（→コーディング）

GPTs はそれぞれ特化したモデルになりますので、用途に応じて使い分けてきました。

感想

イラストもコードも書けない私ですが、生成AIを使い分けながら、何とかWebサイトの公開まで辿り着けました。

Webサイトの作成は比較的簡単なテーマであり、非エンジニアの方が何かを自分で作りたいと考えたときに最適な選択肢だと思います。テーマ選びに困った時はぜひお試しください！

私はこれを機にして、また別のプロダクト開発にチャレンジしていきたいと思います！
ご覧いただきありがとうございました！

この記事が気に入ったらサポートをしてみませんか？