概要
jfunds-comparison は、投資信託のCSVファイルを 2本読み込み、
上段に 正規化チャート、下段に 乖離率(2本目のファンドの正規化価額/1本目のファンドの正規化価額 − 1) を描画するツールです。
X 軸(時間範囲)は上下のチャートで 常に同期 し、外側コンテナ右下の“つまみ”で 横・縦のサイズを同時に変更できます。
- このアプリはマニュアルを含め、全部ChatGPT-5 Thinkingが書いたものです。
- TradingViewがApache 2.0ライセンスで提供するLightweight Charts™︎ライブラリを使用しています。ライセンスなどは以下を参照してください。
- Lightweight Charts™︎ライブラリ取得のために CDN(https://cdn.jsdelivr.net/)への接続性が必要です
- Googleのフォントライブラリ(https://fonts.googleapis.com)への接続性が必要です。
- GoogleとAdobeが共同開発し、Googleから提供されている Noto Sans JP フォントを使用しています。ライセンスはSIL Open Font License 1.1です。詳しくは以下を参照してください。
- GitHubからこのHTMLファイルをダウンロードし、ダブルクリックなどによりファイルをブラウザで開くだけで使えます。
- CSVファイルは「ファンド名.csv」形式に名前を変えてください。
- ただし、1行目がCSVヘッダでない場合は、1行目の文字列をラベル(ファンド名)と仮定して読み込みますのでファイル名変更は不要です。
- SBI証券からダウンロードしたCSVファイルのように、複数行に渡ってCSVヘッダ以外の文字列がある場合は対応していません。
対応ファイル・文字コード・区切り
- 拡張子:
.csv
- 文字コード: Shift_JIS 優先で自動判定(UTF-8 もスコア評価を行い自動判定)
- 区切り文字: カンマ / タブ / セミコロンに対応(ヘッダー行を自動検出)
- 1 行目が ファンド名 の場合はそれを銘柄名として使用。
1 行目がヘッダーの場合はファイル名から拡張子
.csv を除いたものを銘柄名として使用。
- 日付列は ヘッダー名の別名集合または 内容のパース率で自動判定。
価格列(基準価額)も同様に数値列の判定で自動選択。
基本的な使い方
- 画面上部のドロップ領域に、CSV を 2 つドラッグ&ドロップするか、「クリックして選択」で 2 つ選びます。
- CSV ファイルを2つ読み込むと、両 CSV の最古共通日を基準に正規化して上段を描画します。
- 同時に、下段に 乖離率(2本目のファンドの正規化価額/1本目のファンドの正規化価額 − 1)を描画します(欠損日付はホワイトスペース点として補完)。
表示設定
- 正規化基準日(YYYY / MM / DD): 4 桁 + 2 桁 + 2 桁を入力すると 自動で次の入力へフォーカスが移動します。
「正規化基準日更新」ボタンで 厳密一致の基準日を指定して再描画します(どちらかにその日付が無い場合はエラー)。
- 対数チャート(上段のみ): チェックすると価格スケールが対数になります。
- PNG 保存: 上下チャートを 1 枚に合成し、凡例を左上に描画して保存します。
- 分母/分子入れ替え: 下段の乖離率の分母/分子を入れ替え
(2本目ファンド/1本目ファンド − 1) ⇄ (1本目ファンド/2本目ファンド − 1) (両方の系列をあらかじめ計算・保持)。
凡例と系列の削除
- 凡例の右側 「削除」 ボタンでその CSV を削除します。
- 1 つだけ削除した場合は 「2番目のCSVファイルを読み込んでください」と表示し、チャートは待機状態に戻ります。
- 2 つとも削除した場合は 初期状態に戻ります。
- 同一ラベルの CSV を再読み込みした場合は 置換(色は維持)。
チャート操作
- 上下の X 軸は ズーム・スクロールともに双方向同期。
- 外側コンテナ(上下を含む領域)の右下“つまみ”で 横・縦を同時にリサイズ。
- 各パネル(上段/下段)の右下“つまみ”で 縦方向(高さ)のみ個別リサイズ。
- 上段 Y=100.00、下段 Y=0.00 に 白の点線の基準ラインを表示。
ツールチップ
- クロスヘア移動で 色スウォッチ + 値のみを表示(ファンド名は表示しません)。
- 日付の表示形式: X 軸ラベル: YYYY/MM/DD、ツールチップ内の時刻表示: YYYY-MM-DD。
ステータス欄
- 読み込みや処理のログを スクロール可能に表示。区切り線
----- でセパレート。
\n は改行として描画されます(過去ログの参照が容易)。
エラーハンドリングとメッセージ
- 「ヘッダーに日付列が見つかりません」等の判定は nav-chart と同等ロジック。
- 基準日更新は 厳密一致のみ許可(いずれかに存在しない場合はエラー)。
- 読み込み可能な CSV は 2 本まで(上限超過時は警告)。
よくある質問(FAQ)
- 同じ CSV を再度読み込むと? → 既存データとして検出し、置換します(色は維持)。
- 日付が片方にしか無い期間をズームアウトしたい → 欠損日は ホワイトスペース点で補完し、上下 X 軸の同期を維持します。
- 横幅を 1100px 以上にしたい → 上部エリアは初期幅で固定、チャート領域は自由に拡張可能です。
キーボード/操作メモ
- Esc: ヘルプを閉じる
- 右クリック: メニューは無効化。画像保存は「PNG 保存」を使用
バージョン情報
- 2025/10/24 : version 0.1.0 : 初期リリース
- 2025/10/25 : version 0.1.1 : 一部文言の修正
- 2025/10/25 : version 0.1.2 : 一部文言の修正