71. 日経平均株価の推移グラフを作ったよ

今回みたいに「日経平均株価推移(2000年〜2024年)」のような長期データを1枚のグラフにすると、全体感は掴みやすい反面、直近の値動き（1年）や中期（10年）が潰れて見えがちでした。そこで私は、表示期間を切り替えられる“見やすい株価チャート”に寄せるのが一番使い勝手が良いと感じました。 ■ 1年・10年・全期間を切り替えると一気に見やすくなる UIはシンプルに「1年 / 10年 / 2000年〜2024年」のボタンを置いて、同じデータ配列を期間でスライスして再描画するだけでも十分便利でした。日経平均株価 推移 1 年 グラフを見たい人は“直近の上下”が目的で、日経平均株価 推移 10年 チャートを探す人は“景気の波・トレンド”を見たいことが多いので、同じグラフでも目的が変わります。 ■ Chart.jsで「株価推移グラフ」を見やすくする設定（体感で効いたもの） ・線は太すぎない：borderWidthは2前後が見やすい ・点（point）は消す：データ点が多いとノイズになるのでpointRadius: 0 ・ツールチップは残す：hover時だけ値が出るとスッキリ ・y軸の目盛りは“ざっくり”に：tickを細かくしすぎない ・アニメーションは短め：見た目は良いけど長いとストレスなのでdurationを短縮 ■ データの用意：まずは日経平均の終値を揃える 私はまず「日付, 終値」のCSVにして、JSで読み込んでlabels（日付）とdata（終値）に分けました。全期間（2000年〜2024年）だと営業日ベースで点が増えるので、最初は月次データに間引くのもアリです。表示が軽くなって、スマホでも“見やすいアプリっぽいチャート”に近づきます。 ■ ついでにやると便利：指数やファンドの比較 検索だと特定テーマ（例：半導体関連ファンド）に興味がある人もいるので、日経平均と一緒に「TOPIX」や「NASDAQ」などを重ねると比較がしやすいです。私は2本線にするだけで理解が一気に進みました（ただし色のコントラストは強め推奨）。 このあたりを足すと、「株価 チャート 見やすい」系のニーズにかなり寄せられます。次は期間切り替え＋データ間引き＋ツールチップの3点セットだけでも、完成度がグッと上がりました。