【ブラウザ拡張機能】ビュー＆スキ数ランキングTOP20を縦並び棒グラフで一括表示してみた！

はじめに

前回は、noteのダッシュボードデータから「ビュー（PV）数ランキングTOP20」を自動でグラフ表示する機能を追加しました。

今回はさらに一歩進めて、分析の精度を上げるために「ビュー数ランキング」と「スキ数ランキング」の2つのグラフを縦に並べて一括表示する機能をブラウザ拡張機能に実装しました！

…が、実はこの実装の裏で、思わぬ見た目のバグ（失敗）を生み出してしまうハプニングがありました。今回はその失敗談と修正プロセスも含めてシェアします！

🎥 実際の動いている様子（動画デモ）

まずは、実際にダッシュボード上でデータ取得から2つのグラフが縦並びで表示される様子をご覧ください。

データ取得が完了すると画面上にモーダルが表示され、上段に「ビュー数TOP20」、下段に「スキ数TOP20」のグラフが並んで表示されます。マウスホイールやスワイプで上下にスムーズにスクロールして確認できます。

😅 開発の失敗談：単純思考が生んだ「巨大パネルバグ」

「グラフを2つにするなら、表示エリア（パネル）の高さを2倍に伸ばせばいいや！」

最初、私は非常に浅はかな考えで、パネルの高さを表す panel.style.height の数値をビュー単体のときの単純に2倍に設定してしまいました。

その結果どうなったかというと……画面を遥かに突き破るほど巨大なパネルが出現し、しかもスクロールすらできないという極上のバグが完成してしまいました。

「単純に見た目を倍にするだけでは、画面枠に収まらない」という至極当然の事実に、動かしてみて初めて気づかされた痛恨のミスです（笑）。

🛠️ 失敗から学んだ2つの改修ポイント

このバグを教訓に、以下の2つのアプローチでコードをスマートに改修しました。

1. overflowY = 'scroll' で縦スクロール領域を作る

画面枠を超えてしまう問題は、パネル（モーダル要素）に対してCSSのスクロールプロパティを1行追加するだけで一発解決しました。

panel.sytle.overflowY = 'scroll';

パネルの最大高さを画面内に収まるサイズに制限した上で、この設定を入れることで、パネル内部だけが縦にスクロールできるようになり、動画のような快適な操作感が実現しました。

2. 描画ロジックの「関数共通化（外出し）」

「ビュー数グラフ」と「スキ数グラフ」は、表示するデータ（項目）が異なるだけで、グラフを描画する仕組みや「長すぎるタイトルを『...』でカットする処理」の原理は全く同じです。

これを別々にベタ書きしてしまうと、コードが肥大化し、修正があった時に両方を直さなければならずバグの温床になります。

そのため、描画処理を1つの共通関数として外出しし、「ビュー用データ」か「スキ用データ」かを引数（渡すデータ）で切り替える構造へと共通化（リファクタリング）しました。

📝 まとめ：失敗を重ねて「プログラミング的思考」を深める

今回は、浅い思考で適当に高さを2倍にして失敗した悪い見本（笑）と、それをどう修正したかをお伝えしました。

最初から完璧なコードや設計を思い描くのは難しくても、こうして「作ってみる→失敗する→原因を考えて修正する」というサイクルを泥臭く回すことこそが、プログラミング的思考（アルゴリズム思考）を深める一番の近道だと実感しています。

失敗も成功もすべて自分の経験値（そしてnoteのネタ！）にして、引き続き時間創出のためのツール開発を楽しんでいきます！

📢 【Amazon1位獲得】あなたのPCを「自動化の武器」に変える一冊

こうした日常の泥臭い手作業やデータ収集をプログラムで自動化し、自分だけの「圧倒的な時間」を生み出す思考法をまとめた新刊『PC魔改造術』が、おかげさまでAmazonキャリア1位を獲得🥇しました！

PythonやVBA、ブラウザ自動化を駆使して「1時間の作業をボタン一発で終わらせる」ノウハウを徹底解説しています。効率化で自分の時間を取り戻したい方は、ぜひKindle本をチェックしてみてください！

👤 最後に：フォロー＆スキをお願いします！

この記事が「失敗談に親近感が湧いた！」「スクロール処理参考になった」「個人開発の試行錯誤が面白い」と思った方は、ぜひスキ（いいね）とフォロー、そしてご感想のコメントをいただけると大変励みになります！

みなさんも個人開発や仕事の作業中に「やってしまった…！」という思わぬバグの思い出はありますか？ぜひコメント欄で教えてください！