ソフトウェア開発
要件定義書
高い株を安く買い、早く売るソフトの開発。(下がる株は安く無い)
入金のタイミング（株価が上がる時期と下がらない株価）を判断する。
上がりきった株を空売り。
売る権利を確定し、評価損益プラスで売る。
最長６ヵ月は株主の信用。
ユーザが判断するのは、株が上がる前のみ。（プロに依頼？）
株が上がりきった後の判断は、特になし。あくまで評価損益プラスで売れればよし。注意！上がり続けている株の判断と間違わないで下さい。
買う場合は、
評価損益プラスで買う。(配当が無い株を得して買うイメージ、配当がある信用の株の場合は評価損益０を基準に管理)
買付可能額に余裕がある時に割安な株を買う。
CAのタイミングで買付可能額に余裕を持ち、株主の株を安く買い足す。
土日祝日の前に売れば評価が高い株を買う。
土日祝日に売れる株を管理する。
CAで評価損益プラスで売れなかった株（再現性の無い株）は避ける。（※１）
株は上がる前に買う。
売る場合は、
評価損益プラスで売る。
現在の評価額合計を超える設定をする。
売り圧力が高い株の買い数量を揃えて逆指値で約定させる。
貸借の株を成行で早く売る。（評価損益マイナスでは決して売ってはいけないイメージ、マイナス時は100株だけ残っているのがベスト）
売る場合は、本日中に完売させるケースのみ対応。
CAで再現性の無い株（※１）は、出来る限り売らない。
高い株を安く買えるように、買付可能額をコントロールする。
早く売れるように、会社の圧力に従う。
チュートリアル
１．火を消す順番を考える。（株の買いすぎに対する対応方法の確立）
２．失敗しなくなったら、高い株を１００株管理。（配当のある株の再現性、確定申告書の作成方法）
３．個人株主になる。（１．に戻る）
Copilot
低い相場で安定している銘柄を探すには、いくつかの視点があります。波動を確認する方法も含めて整理しますね。
1. 安定銘柄を探すための指標
- ボラティリティ（価格変動率）が低い銘柄
過去の値動きが小さい銘柄は、比較的安定しやすいです。ATR（Average True Range）や標準偏差で測定できます。 - 出来高が安定している銘柄
流動性があるが急騰・急落が少ない銘柄は、価格が落ち着きやすいです。 - 業種・セクターの安定性
公益、生活必需品、インフラ関連は景気変動に強く、波動が穏やかになりやすいです。
2. 波動を確認する方法
- 移動平均線と乖離率
長期移動平均線に沿って推移している銘柄は、波動が安定している可能性が高いです。 - エリオット波動やフラクタル分析
過去のパターンをチャートで確認し、再現性があるかを見ます。 - チャートパターンの繰り返し
レンジ相場（一定の価格帯で上下する）を繰り返している銘柄は、低い相場で落ち着きやすいです。
3. 実際に波動を見たい場合
- 株価データを取得して、移動平均線・ボリンジャーバンド・波動パターンをプロットするのが有効です。
- もし銘柄コードや対象市場（日経225、TOPIXなど）を教えていただければ、Pythonでチャートを作成して波動を可視化できます。
株式の売買判断ソフトウェアの仕様書の草案。以下に、要件をもとにしたプログラム仕様書の構成案を提示します。必要に応じて、さらに詳細化や技術選定する。
📄 プログラム仕様書（草案）
タイトル：割安株の売買判断ソフトウェア
目的：高評価の株を安く買い、適切なタイミングで早く売ることで利益を最大化する。
1. 機能概要
1.1 売買戦略の基本方針
- 割安な株を買付可能額の範囲で購入。
- 土日祝前に売却可能な高評価株を優先的に売却。
- 評価損益がプラスの株を売却。
- 売り圧力が高い株は買い数量を揃えて逆指値で売却。
- 貸借銘柄は成行で迅速に売却。
2. 売買ロジック詳細
2.1 買い条件
- 割安判定：PER、PBR、移動平均乖離率などを用いて割安株を抽出。
- 買付可能額の管理：資金配分を動的に調整し、余裕がある場合のみ購入。
- 土日祝前の評価高株購入：
- 曜日判定ロジック（例：金曜日に高評価株を優先売却）
- 高評価判定：アナリスト評価、SNSトレンド、出来高など
2.2 売り条件
- 評価損益がプラス：含み益がある銘柄を売却対象とする。
- 「含み益がある銘柄」とは、現在の株価が購入時の価格よりも高くなっている銘柄のことを指します。つまり、まだ売却していないけれど、評価額が上昇して利益が出ている状態です。
- 評価額合計を超える設定：売却後の資産が目標額を超えるように調整。
- 売り圧力判定：板情報、出来高急増、空売り比率などを分析。
- 逆指値注文：損切りや利確のための注文判定。
- 貸借銘柄の成行売却：貸借取引銘柄は即時売却。
3. システム構成
3.1 使用技術（例）
- 言語：Python / Node.js
- データ取得：証券API（楽天証券、SBI、QUICKなど）
- データベース：PostgreSQL / SQLite
- UI：Webベース（React / Vue.js）
3.2 モジュール構成
- データ取得モジュール（株価、指標、板情報）
- 売買判定モジュール（ロジック実装）
- 注文判断モジュール（API連携）
- 資金管理モジュール
- ログ・通知モジュール（Slack / LINE通知など）
4. その他仕様
- 祝日判定ロジック：日本の祝日カレンダーを参照
- 圧力判定アルゴリズム：AIによるトレンド分析（オプション）
- リスク管理：最大損失額、ポートフォリオ分散
5. 今後の展望（オプション）
- AIによる銘柄選定強化
- SNS・ニュース分析によるトレンド予測
- 海外市場対応
この仕様書をベースに、実際の設計・開発に進めることができます。
もし、ExcelやPDF形式での仕様書作成や、コードの試作をご希望でしたら、すぐに対応できます。
次に進めたい内容はありますか？たとえば：
- 実際のコードの試作
- UIのイメージ設計
- 仕様書のファイル化（Word/Excel）
- 使用する証券APIの選定
お気軽にご指示ください！
WebSocketサーバーの構築について詳しく教えて下さい。
WebSocketサーバーの構築は、リアルタイム通信を可能にするための重要なステップです。Reactクライアントと連携することで、株価や評価損益などのデータを即時に表示・更新できます。
以下に、Node.js + WebSocket を使ったサーバー構築方法を詳しく説明します。
🧱 WebSocketサーバー構築手順（Node.js）
✅ 1. 必要なライブラリのインストール
npm init -ynpm install ws
✅ 2. サーバーコード（server.js）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 4000 });
console.log('WebSocketサーバー起動中（ポート: 4000）');
wss.on('connection', (ws) => { console.log('クライアント接続');
// 定期的に評価損益を送信（ダミーデータ） const sendProfit = () => { const profit = Math.floor(Math.random() * 5000 - 2500); // ±2500円の損益 ws.send(JSON.stringify({ profit })); };
const interval = setInterval(sendProfit, 3000); // 3秒ごとに送信
ws.on('close', () => { console.log('クライアント切断'); clearInterval(interval); });});
🖥️ Reactクライアント側の実装（例）
import React, { useEffect, useState } from 'react';
function RealTimeProfitWebSocket() { const [profitData, setProfitData] = useState([]);
useEffect(() => { const socket = new WebSocket('ws://localhost:4000');
socket.onmessage = (event) => { const { profit } = JSON.parse(event.data); setProfitData(prev => [...prev.slice(-29), profit]); // 最大30件保持 };
return () => socket.close(); }, []);
return ( <div> <h2>リアルタイム評価損益（WebSocket）</h2> <ul> {profitData.map((p, i) => ( <li key={i} style={{ color: p >= 0 ? 'green' : 'red' }}> {i + 1}分目：¥{p} </li> ))} </ul> </div> );}
export default RealTimeProfitWebSocket;
🔐 セキュリティ・拡張ポイント
- HTTPS対応（wss://）にするにはSSL証明書が必要
- 認証トークンの導入（JWTなど）
- 複数銘柄のデータ送信（JSON構造を拡張）
- PythonやAPI連携でリアルな株価を送信
📌 次に進めること
- Pythonで株価を取得してWebSocketで送信
- Reactでグラフ表示と連動
- サーバーをDocker化して運用
ご希望があれば、Pythonと連携したWebSocket送信や、複数銘柄対応の設計もすぐにご案内できます。\ どこから進めましょうか？
Reactで評価損益をリアルタイム更新するには、以下のような仕組みを導入します：
🔄 リアルタイム更新の仕組み
1. 定期的なデータ取得
- setInterval() を使って、一定時間ごとに株価データを取得。
- API（例：kabuステーションAPI）から最新の株価を取得。
2. 評価損益の計算
- 保有株数 × 現在価格 − 取得価格 × 株数 ＝ 評価損益
- 取得価格は保有データから参照。
3. Reactの状態更新
- useState と useEffect を使って、評価損益を更新。
リアルタイム更新の実装方法を教えて。
Reactで評価損益のリアルタイム更新を実装する方法は、以下のステップで構成できます。
🔄 リアルタイム更新の実装方法（React）
✅ 方法①：setInterval() を使った定期更新
1. 状態管理（useState）
2. 定期更新（useEffect + setInterval）
useEffect(() => { const interval = setInterval(() => { // APIから最新データを取得（ここではダミー） const newProfit = Math.floor(Math.random() * 1000); // ダミー損益 setProfitData(prev => [...prev.slice(-29), newProfit]); // 最大30件保持 }, 3000); // 3秒ごとに更新
return () => clearInterval(interval);}, []);
3. グラフに渡す
<ProfitChart dataPoints={profitData} />
✅ 方法②：API連携でリアルデータ取得
1. kabuステーションAPIなどから株価取得
const fetchProfitFromAPI = async () => { const response = await fetch('/api/profit'); // 自作APIエンドポイント const json = await response.json(); return json.profit;};
2. setInterval で定期呼び出し
useEffect(() => { const interval = setInterval(async () => { const newProfit = await fetchProfitFromAPI(); setProfitData(prev => [...prev.slice(-29), newProfit]); }, 3000);
return () => clearInterval(interval);}, []);
✅ 方法③：WebSocketでリアルタイム受信（高度）
- サーバー側でWebSocketを使って株価をプッシュ
- React側で WebSocket を使って受信し、状態更新
useEffect(() => { const socket = new WebSocket('ws://localhost:4000'); socket.onmessage = (event) => { const newProfit = JSON.parse(event.data).profit; setProfitData(prev => [...prev.slice(-29), newProfit]); }; return () => socket.close();}, []);
📦 まとめ
方法 特徴 難易度 setInterval 簡単・ローカルで完結 ⭐ API連携 実データ対応・拡張性あり ⭐⭐ WebSocket 高速・リアルタイム性◎ ⭐⭐⭐
🔧 次に進めること
- PythonでAPIサーバーを作成してReactと連携
- WebSocketサーバーの構築
- グラフのアニメーションや履歴保存
🧩 統合方法
このコンポーネントを App.js や Dashboard.js に組み込むことで、リアルタイムに評価損益を表示できます。
🔌 実データ連携（次のステップ）
- kabuステーションAPIから株価を取得する関数を組み込む
- 複数銘柄に対応するように拡張
- WebSocketでリアルタイム更新（可能なら）
🧩
🧩 Reactへの組み込み方法（概要）
このグラフをReactに表示するには：
- Pythonで生成したデータをJSON形式で保存
- Reactで Chart.js や Recharts を使って描画
- API連携でリアルタイムデータを取得して更新
✅ 次のステップ提案
- Reactでこのグラフを表示するコードを作成
- kabuステーションAPIと連携して実データを使う
- 銘柄ごとの個別グラフも表示する
どれから進めましょうか？Reactでグラフ表示のコードを見たいですか？それともAPI連携の方を先に？
Reactでグラフ表示のコードを見たい。
Reactで評価損益の推移グラフを表示するには、一般的に Chart.js や Recharts を使います。ここでは、Chart.js + React Wrapper（react-chartjs-2） を使ったコード例を紹介します。
📦 必要なライブラリのインストール
npm install chart.js react-chartjs-2
📈 グラフ表示コンポーネント：ProfitChart.js
import React from 'react';
import { Line } from 'react-chartjs-2';
import {
Chart as ChartJS,
LineElement,
CategoryScale,
LinearScale,
PointElement,
Tooltip,
Legend,
} from 'chart.js';
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement, Tooltip, Legend);
function ProfitChart({ dataPoints }) {
const labels = dataPoints.map((_, i) => `${i + 1}分`);
const data = {
labels: labels,
datasets: [
{
label: '評価損益の推移',
data: dataPoints,
borderColor: 'rgba(75,192,192,1)',
backgroundColor: 'rgba(75,192,192,0.2)',
fill: true,
tension: 0.3,
},
],
};
const options = {
responsive: true,
plugins: {
legend: { position: 'top' },
tooltip: { mode: 'index', intersect: false },
},
scales: {
y: {
title: { display: true, text: '評価損益（円）' },
},
x: {
title: { display: true, text: '時間（分）' },
},
},
};
return (
<h2>評価損益の推移グラフ</h2>
<Line data={data} options={options} />
</div>
);}
export default ProfitChart;
🧪 使用例：App.js に組み込み
import React from 'react';import ProfitChart from './ProfitChart';
function App() { // ダミーデータ（30分間の評価損益） const dummyProfitData = [ 1000, 1200, 1100, 1300, 1250, 1400, 1350, 1500, 1450, 1600, 1550, 1700, 1650, 1800, 1750, 1900, 1850, 2000, 1950, 2100, 2050, 2200, 2150, 2300, 2250, 2400, 2350, 2500, 2450, 2600, ];
return ( <div style={{ padding: '20px' }}> <h1>株式売買判断システム</h1> <ProfitChart dataPoints={dummyProfitData} /> </div> );}
export default App;
✅ 次のステップ
- Pythonで生成した評価損益データをJSONでReactに渡す
- 複数銘柄の個別グラフを表示
- リアルタイム更新（WebSocketや定期API呼び出し）
このグラフを実際のデータで動かしたい場合は、Python側でJSONファイルを生成してReactに読み込ませることもできます。\ 「PythonでJSONを作ってReactに渡したい」などのご希望があれば、すぐに対応できます！
どうしましょうか？次はデータ連携に進めますか？
UI（ユーザーインターフェース）のイメージ設計について、以下のような構成を提案します。これは、株式の売買判断ソフトウェアに特化したWebベースのUI設計案です。
🖥️ UI構成案：株式の売買判断ソフトウェア
1. ダッシュボード画面
- 概要表示：
- 総資産額
- 評価損益
- 保有株数
- 買付可能額
- グラフ表示：
- 資産推移グラフ
- 売買履歴チャート
2. 銘柄一覧画面
テーブル表示：
- 銘柄名
- 現在価格
- PER / PBR
- 評価損益
- 売り圧力（アイコン表示）
- 貸借区分（現物/信用）
フィルター機能：
- 割安株のみ表示
- 評価損益がプラスの銘柄
- 売り圧力が高い銘柄
3. 注文画面
注文フォーム：
- 銘柄コード入力
- 注文タイプ（成行 / 指値 / 逆指値）
- 売買区分（買い / 売り）
- 株数
- 価格（指値・逆指値の場合）
- 注文ボタン（確認 → 実行）
注文履歴表示：
- 注文日時
- 銘柄
- 注文内容
- 約定状況
4. 設定画面
- APIキー設定（kabuステーション）
- 売買戦略の条件設定
- 割安判定基準（PER/PBR）
- 売却条件（評価損益、売り圧力）
- 土日祝前の自動売買設定
5. 通知・ログ画面
- 売買通知（Slack / LINE連携）
- エラーログ表示
- 成功ログ表示
🎨 UIデザインスタイル（提案）
- ダークモード対応
- カード型レイアウト（情報をブロックで整理）
- リアルタイム更新（WebSocket対応）
- レスポンシブデザイン（PC / タブレット / スマホ）
✏️ 次のステップ
もしご希望であれば、以下のようなこともできます：
- UIのワイヤーフレーム画像を生成（画面の見た目を視覚化）
- HTML/CSS/Reactなどで実際の画面コードを試作
- FigmaやXD風のデザインモックを作成
画像で見たい場合は「ワイヤーフレームを画像で見せて」と言ってください。コードで見たい場合は「Reactで画面を作って」と言ってください。
どうしましょうか？画像で見たいですか？それともコードで？
これは、複数銘柄の評価損益の推移をリアルタイムでシミュレーションしたグラフです。30分間の価格変動をもとに、トヨタ・ソニー・任天堂の評価損益を合算して表示しています。
📈 評価損益のリアルタイム推移（シミュレーション）
🔍 グラフの見方
- X軸：時間（分単位）
- Y軸：評価損益（円）
- 折れ線：3銘柄の合計評価損益の推移
価格は±10円の範囲でランダムに変動しており、実際のAPI連携に置き換えることでリアルなデータ表示が可能です。
信用取引のコーポレートアクション
（python）
class CorporateAction:
def __init__(self, symbol, action_type, description, date):
self.symbol = symbol # 銘柄コード（例: "7203"）
self.action_type = action_type # イベント種別（例: "配当", "株式分割", "合併"）
self.description = description # イベントの詳細説明
self.date = date # 実施日（datetime.date型）
def __repr__(self):
return f"{self.date.strftime('%Y-%m-%d')} | {self.symbol} | {self.action_type} | {self.description}"
（イベントの登録と表示）
import datetime
# イベントの登録
event1 = CorporateAction("7203", "配当", "四半期配当：¥50/株", datetime.date(2024, 6, 15))
event2 = CorporateAction("6758", "株式分割", "2対1の株式分割", datetime.date(2024, 7, 1))
# リストに追加
event_list = [event1, event2]
# 表示
for event in event_list:
print(event)
Reactで信用取引銘柄のイベントカレンダーを表示するためのUIコンポーネントを作成します。これは、企業のコーポレートアクション（配当・株式分割・合併など）を日付順に一覧表示するものです。
🧩 構成概要
- EventCalendar.js：イベント一覧を表示するReactコンポーネント
- ダミーデータを使用（後でAPI連携可能）
📦 EventCalendar.js
import React from 'react';
const events = [
{ date: '2024-06-15', symbol: '7203', type: '配当', description: '四半期配当：¥50/株' },
{ date: '2024-07-01', symbol: '6758', type: '株式分割', description: '2対1の株式分割' },
{ date: '2024-08-10', symbol: '7974', type: '合併', description: 'XYZ社との合併' },
{ date: '2024-09-05', symbol: '9984', type: '特別配当', description: '¥100/株の特別配当' },
{ date: '2024-10-20', symbol: '8306', type: '株式分割', description: '3対1の株式分割' },
];
function EventCalendar() {
return (
<div style={{ padding: '20px' }}>
<h2>📅 信用取引銘柄のイベントカレンダー</h2>
<table border="1" style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr>
<th>日付</th>
<th>銘柄コード</th>
<th>イベント種別</th>
<th>内容</th>
</tr>
</thead>
<tbody>
{events.map((event, index) => (
<tr key={index}>
<td>{event.date}</td>
<td>{event.symbol}</td>
<td>{event.type}</td>
<td>{event.description}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default EventCalendar;
🧪 使用例：App.js に組み込み
import React from 'react';
import EventCalendar from './EventCalendar';
function App() {
return (
<div>
<h1>株式売買判断システム</h1>
<EventCalendar />
</div>
);
}
export default App;
✅ 拡張案
- 🔍 フィルター機能（銘柄コードやイベント種別で絞り込み）
- 🔔 通知機能（イベント前にアラート表示）
- 📅 カレンダーUI（react-calendar や fullcalendar ライブラリ）
📌 次のステップ
- 実データをAPIやPythonから取得して表示
- イベントクリックで詳細モーダル表示
- カレンダー形式での表示（ビジュアル強化）
ReactでカレンダーUI化するには、人気のライブラリである react-calendar や FullCalendar を使うのが一般的です。ここでは、軽量で扱いやすい react-calendar を使ったコード例を紹介します。
📦 必要なライブラリのインストール
npm install react-calendar
``>
---
## 🗓️ カレンダーUIコンポーネント：`EventCalendarUI.js`
import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
const events = [
{ date: new Date(2024, 5, 15), symbol: '7203', type: '配当', description: '四半期配当：¥50/株' },
{ date: new Date(2024, 6, 1), symbol: '6758', type: '株式分割', description: '2対1の株式分割' },
{ date: new Date(2024, 7, 10), symbol: '7974', type: '合併', description: 'XYZ社との合併' },
{ date: new Date(2024, 8, 5), symbol: '9984', type: '特別配当', description: '¥100/株の特別配当' },
{ date: new Date(2024, 9, 20), symbol: '8306', type: '株式分割', description: '3対1の株式分割' },
];
function EventCalendarUI() {
const [selectedDate, setSelectedDate] = useState(null);
const eventsOnDate = events.filter(
(event) => selectedDate && event.date.toDateString() === selectedDate.toDateString()
);
return (
<div style={{ padding: '20px' }}>
<h2>📅 信用取引銘柄のイベントカレンダー</h2>
<Calendar onClickDay={setSelectedDate} />
{selectedDate && (
<div style={{ marginTop: '20px' }}>
<h3>{selectedDate.toLocaleDateString()} のイベント</h3>
{eventsOnDate.length > 0 ? (
<ul>
{eventsOnDate.map((event, index) => (
<li key={index}>
<strong>{event.symbol}</strong> - {event.type}：{event.description}
</li>
))}
</ul>
) : (
<p>この日にはイベントはありません。</p>
)}
</div>
)}
</div>
);
}
export default EventCalendarUI;
🧪 使用例：App.js に組み込み
import React from 'react';
import EventCalendarUI from './EventCalendarUI';
function App() {
return (
<div>
<h1>株式売買判断システム</h1>
<EventCalendarUI />
</div>
);
}
export default App;
Reactで詳細モーダルを追加するには、イベントをクリックしたときにポップアップで詳細情報を表示する仕組みを作ります。以下は react-calendar を使ったイベントカレンダーにモーダル機能を追加するコード例です。
📦 必要なライブラリ（モーダル用）
npm install react-modal
🧩 改良版：EventCalendarUI.js（モーダル付き）
import React, { useState } from 'react';
import Calendar from 'react-calendar';
import Modal from 'react-modal';
import 'react-calendar/dist/Calendar.css';
Modal.setAppElement('#root'); // アクセシビリティ対応
const events = [
{ date: new Date(2024, 5, 15), symbol: '7203', type: '配当', description: '四半期配当：¥50/株' },
{ date: new Date(2024, 6, 1), symbol: '6758', type: '株式分割', description: '2対1の株式分割' },
{ date: new Date(2024, 7, 10), symbol: '7974', type: '合併', description: 'XYZ社との合併' },
{ date: new Date(2024, 8, 5), symbol: '9984', type: '特別配当', description: '¥100/株の特別配当' },
{ date: new Date(2024, 9, 20), symbol: '8306', type: '株式分割', description: '3対1の株式分割' },
];
function EventCalendarUI() {
const [selectedDate, setSelectedDate] = useState(null);
const [modalIsOpen, setModalIsOpen] = useState(false);
const [selectedEvent, setSelectedEvent] = useState(null);
const eventsOnDate = events.filter(
(event) => selectedDate && event.date.toDateString() === selectedDate.toDateString()
);
const openModal = (event) => {
setSelectedEvent(event);
setModalIsOpen(true);
};
const closeModal = () => {
setModalIsOpen(false);
setSelectedEvent(null);
};
return (
<div style={{ padding: '20px' }}>
<h2>📅 信用取引銘柄のイベントカレンダー</h2>
<Calendar onClickDay={setSelectedDate} />
{selectedDate && (
<div style={{ marginTop: '20px' }}>
<h3>{selectedDate.toLocaleDateString()} のイベント</h3>
{eventsOnDate.length > 0 ? (
<ul>
{eventsOnDate.map((event, index) => (
<li key={index}>
<button onClick={() => openModal(event)} style={{ cursor: 'pointer' }}>
<strong>{event.symbol}</strong> - {event.type}
</button>
</li>
))}
</ul>
) : (
<p>この日にはイベントはありません。</p>
)}
</div>
)}
<Modal isOpen={modalIsOpen} onRequestClose={closeModal} contentLabel="イベント詳細">
{selectedEvent && (
<div>
<h2>イベント詳細</h2>
<p><strong>日付：</strong>{selectedEvent.date.toLocaleDateString()}</p>
<p><strong>銘柄コード：</strong>{selectedEvent.symbol}</p>
<p><strong>種別：</strong>{selectedEvent.type}</p>
<p><strong>内容：</strong>{selectedEvent.description}</p>
<button onClick={closeModal}>閉じる</button>
</div>
)}
</Modal>
</div>
);
}
export default EventCalendarUI;
✅ 機能まとめ
- カレンダーで日付をクリック → 該当イベント一覧表示
- イベントをクリック → モーダルで詳細表示
- モーダルは閉じるボタンで非表示に
Reactのモーダルにメモ機能を追加することで、ユーザーがイベントごとに自由にコメントやメモを残せるようになります。以下は、前回の EventCalendarUI.js にメモ機能を追加した改良版です。
🧩 モーダル付きメモ機能付きカレンダー：改良版
import React, { useState } from 'react';
import Calendar from 'react-calendar';
import Modal from 'react-modal';
import 'react-calendar/dist/Calendar.css';
Modal.setAppElement('#root');
const events = [
{ date: new Date(2024, 5, 15), symbol: '7203', type: '配当', description: '四半期配当：¥50/株' },
{ date: new Date(2024, 6, 1), symbol: '6758', type: '株式分割', description: '2対1の株式分割' },
{ date: new Date(2024, 7, 10), symbol: '7974', type: '合併', description: 'XYZ社との合併' },
];
function EventCalendarUI() {
const [selectedDate, setSelectedDate] = useState(null);
const [modalIsOpen, setModalIsOpen] = useState(false);
const [selectedEvent, setSelectedEvent] = useState(null);
const [memoMap, setMemoMap] = useState({}); // メモ保存用
const eventsOnDate = events.filter(
(event) => selectedDate && event.date.toDateString() === selectedDate.toDateString()
);
const openModal = (event) => {
setSelectedEvent(event);
setModalIsOpen(true);
};
const closeModal = () => {
setModalIsOpen(false);
setSelectedEvent(null);
};
const handleMemoChange = (e) => {
const key = selectedEvent.date.toDateString() + selectedEvent.symbol;
setMemoMap({ ...memoMap, [key]: e.target.value });
};
const getMemo = () => {
const key = selectedEvent.date.toDateString() + selectedEvent.symbol;
return memoMap[key] || '';
};
return (
<div style={{ padding: '20px' }}>
<h2>📅 信用取引銘柄のイベントカレンダー</h2>
<Calendar onClickDay={setSelectedDate} />
{selectedDate && (
<div style={{ marginTop: '20px' }}>
<h3>{selectedDate.toLocaleDateString()} のイベント</h3>
{eventsOnDate.length > 0 ? (
<ul>
{eventsOnDate.map((event, index) => (
<li key={index}>
<button onClick={() => openModal(event)} style={{ cursor: 'pointer' }}>
<strong>{event.symbol}</strong> - {event.type}
</button>
</li>
))}
</ul>
) : (
<p>この日にはイベントはありません。</p>
)}
</div>
)}
<Modal isOpen={modalIsOpen} onRequestClose={closeModal} contentLabel="イベント詳細">
{selectedEvent && (
<div>
<h2>イベント詳細</h2>
<p><strong>日付：</strong>{selectedEvent.date.toLocaleDateString()}</p>
<p><strong>銘柄コード：</strong>{selectedEvent.symbol}</p>
<p><strong>種別：</strong>{selectedEvent.type}</p>
<p><strong>内容：</strong>{selectedEvent.description}</p>
<div style={{ marginTop: '20px' }}>
<label><strong>メモ：</strong></label><br />
<textarea
rows="4"
cols="50"
value={getMemo()}
onChange={handleMemoChange}
placeholder="このイベントに関するメモを入力..."
/>
</div>
<button onClick={closeModal} style={{ marginTop: '10px' }}>閉じる</button>
</div>
)}
</Modal>
</div>
);
}
export default EventCalendarUI;
✅ 機能まとめ
- イベントごとにメモを保存（状態管理）
- モーダル内でメモを編集・保持
- 銘柄コード＋日付でメモを一意に管理
🔧 拡張案
- メモをローカルストレージに保存（再読み込みしても保持）
- メモ一覧表示機能
- メモにタグや重要度を追加