【ブラウザ拡張機能】noteダッシュボードの「全記事数」を一瞬でカウントしてみた

はじめに

毎日noteを書いていると、ふと「自分はこれまで合計で何本の記事を書いてきたんだろう？」と気になったことはありませんか？

また、ダッシュボードからデータを取得して分析する際も、「全体の母数（総記事数）」が正確に把握できていると、データの抜け漏れや分析時の比較がグッとやりやすくなります。

そこで今回は、前回作成した「noteダッシュボードの自動データ取得ツール」に、データ取得完了と同時に『全記事数』をボタン上に表示する機能を追加してみました！

💡 今回追加した機能と実際の動き

改修後の挙動は非常にシンプルです。

画面右上の「データ取得」ボタンを押すと、自動で「もっとみる」が連打されて全データが読み込まれます。

そして、取得が完了した瞬間に「取得完了！全〇〇件」と、カウントされた全体の件数がボタン上にパッと表示されます。

手作業で数えたりExcelに貼り付けてから行数を確認したりする必要がなくなり、ツールを動かしたその場で自分の積み重ねた「執筆実績」が数字として可視化されるようになりました！

🛠️ 実装のアイデア（方法論）

仕組み自体は、プログラミング的にも非常にシンプルです。

1. JavaScriptの querySelectorAll でダッシュボードのテーブル行（tr要素）をすべて取得

2. 取得した要素の数（.length）をカウント

3. ボタンの表示テキスト（textContent）にカウントした数値を埋め込む

たったこれだけの処理を追加した形です。

あえて複雑なコードを組むのではなく、ブラウザに標準で備わっている基本機能を組み合わせるだけで、こうしたちょっとした「欲しかった便利機能」が簡単に実現できます。

AIに「取得したテーブルの行数をカウントしてボタンの文字に反映して」と指示を出すだけでもサクッとコードを書いてくれますので、ご自身のスキルに合わせてぜひチャレンジしてみてください！

🚀 次回予告：難易度アップ！ランキングの可視化へ

今回はサクッとできるワンポイント改修でしたが、次回はいよいよ少し難易度を上げてみます！

取得したダッシュボードのデータをもとに、「PV（ビュー数）のランキングを美しい表やグラフにして画面上に直接可視化する機能」の開発に挑戦します。

単にCSVをダウンロードするだけでなく、ブラウザ上で直感的に自分の人気記事が一目でわかる仕組みを目指しますので、ぜひお楽しみに！

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

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

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

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

この記事が「参考になった！」「次回のグラフ化も気になる」と思った方は、ぜひスキ（いいね）とフォロー、そしてご感想のコメントをいただけると大変励みになります！

みなさんは現在、noteで通算何本の記事を書かれていますか？「そろそろ〇本達成しそう！」などのコメントもお待ちしております！