はじめに
みなさんは Console Ninja というツールをご存知でしょうか？
個人的にはフロントエンドを書く上で、1,2を争うほど有用なツールかと思うのですが、意外にしられていないため、布教するための記事を書きました。
昨今、AIが流行し、概ねAIにコードをかかせる時代で我々がする仕事はdebugぐらいなのではないでしょうか。そんなときにConsole Ninjaはとっても役に立ちます。
console.logをフロントエンドに埋め込み、コードを修正しているあなた。最初は無料ですので、ぜひ使用してみてください。
Console Ninjaとは？
Console Ninja公式サイト によると、
VS Code 上で
console.logの出力を直接エディターに表示できる拡張機能
です。
従来はブラウザの DevTools を開いて F12 → コンソールを確認していましたが、
Console Ninja を入れるだけで、VS Code のエディター上にリアルタイムなログが現れます。
- ブラウザ画面を切り替えずにデバッグできる
- 変数の履歴をホバーで確認できる
のような、特にフロントを書く方には「痒いところに手が届く」体験をもたらしてくれます。
インストール方法
- 下記リンクにアクセス
https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja - VS Code の拡張機能からインストール
- （ターミナルに「Using Console Ninja...」と表示されれば OK）
consoleNinjaはさまざまな環境で動作しますが、一部環境では未対応のものもあるのでご自身の環境と照らし合わせて使用できるかも確認しましょう。
使用環境について（公式githubから一部抜粋）
- Viteを用いて作られた、React,Vue,Preact,Lit,Svelte,Vanilla (Typescript, Javascriptいずれも可）
- Next.jsのブラウザ、サーバサイド側のログ（ただし、turbopack使用時、ミドルウェアについては非サポート）
- Nest.js
- Remix
- Astro
などなど...
さまざまな環境で利用が可能となっています。
なぜこの記事を書いたのか
このままですと、Zenn上に先駆者がすでにいらっしゃるので、ただの丸パクリの記事ですし、機能の紹介に関しては公式の方がより詳しく書かれています。
ですので、本記事では下記の観点で解説をしたいと思います。
- 実務でよく使用しているユースケースの紹介
- consoleNinjaのMCPを使った応用例
- dockerでフロントを動かしている方へ
使用例
今回は最新のnext.jsを用いて例を示したいと思います。
また使用しているIDEはCursorになります。
基本の使用例
まずは基本的な使用例を見ていこうと思います。
-
console.logを使用してuseStateの中身を覗き見る。
console.logを記載した横に現時点での変数の中身が表示されるようになります。
データはリアルタイムで更新されるので、最新のデータが常に表示されるようになります。
-
hoverすることでポップアップでそのデータの過去のデータが見れたり、別タブから過去の変数名の履歴なども追うことができるようになります。
一覧でlogが閲覧できるようになるので、リアルタイムで変数のデータを追うことができます。
-
functionが複数あってどの処理か見失った際に、console.logを使用することでこの処理が走る動作かを確認することができます。
無料版の時はだいたい"hoge"とかを挟んで処理がどのように流れているかを確認します。pro版ではlogpointを挟むことができるので、ショートカットコマンドを用いながら活用しています。
-
console.time, timeEndを用いることで、処理にかかった時間を計測することもできます。
使用する頻度は低いですが、処理を計測したい際に秒数が表示されるのは地味に便利かと思います。
-
runtimeErrorの場合、どんなエラーが出ているか表示もしてくれます
runtimeErrorがそのまま表示されるので、どの部分を直せば良いのかが分かりやすくなります。AIを使用して置換した際、大量のコードを修正された際などに便利です。
ここまで紹介した機能は、無料で使用することのできる機能となっています。
その他にも、公式がさまざまな機能を用意してくれていますが、実務でよく使う例を今回はご紹介させていただきました。
pro版の利用例
pro版では結構ニッチな機能が多く追加されます。そのため、ユースケースは低めのものが多いですが、覚えておくと時々役に立つケースがあります。ここでは私が過去使用した例について紹介します。
-
ログポイントのハイライト化
ログが大量に出てきてしまった場合、流れていってしまうのでそのデータをハイライトさせ対時に便利です。
-
コードのカバレッジを可視化してくれる
なかなか使用する機会は私にはなかったですが、このfunctionが通っているかをカラーで可視化してくれます。
緑は実行されている、黄色は部分的に実行されている、白はまだ実行されていない。という内訳になっています。
pro版では、他にもNetworkを取得してbackend側のデータを閲覧できたり、VScode上ではgithub copilotとの連携を強めた機能 GitHub Copilot Integration なども展開されています。
MCP連携でAIにコンテキストを自動付与（Pro版）
※プロ版の機能です。
GitHub リポジトリ にある設定をエディターに追加するだけで、
ブラウザの runtimeError やログを自動的に MCP 経由で AI に渡せるようになります。
導入方法は上記のgithubに各エディターごとに追加する文言が記載されていますので、参照をしてください。
下記は実際に使用してみたプロンプトの例とその結果です。
現在数字を100カウントするようなボタンがありますが、そのデータを100の時と500の時、1000の時にかかる時間を計測してみてください。
計測して出た結果を表にしましょう。また、計測のログとしてconsoleNinjaのMCPを用いて計測してみましょう。
MCPで呼び出しをしてConsoleNinjaでデータを取得できたことがわかります。
今回は処理速度をケースごとに記録させるといったユースケースで使用しましたが、
web上で出たログや、Runtime ErrorをAIにコンテキストで渡せるということは、実行することでしか気づけないエラーなどをAIに解釈させることができる。ということになります。
よって、Runtime Errorが毎回発生していないか確認させたり、出力されたログを元にコードを調整してもらうといった使用用途にも用いることができました。
細かいテクニックとしてですが、MCPを使って〜などの細かいプロンプトを書いていくと冗長なので、MCPのユースケースを事前にエディターのルールを書いておくことで、不要なコミュニケーションが発生しなくなるためより便利になります。
下記は私が使用しているUser rulesのプロンプト例です。
Always respond in 日本語
When making code modifications, first check in your editor that there are no errors or linting issues. Then, to confirm that no runtime errors occur in the browser, use consoleNinja’s MCP and verify that no runtime errors have been raised.
今回の例の中では特にエラーはないため、上記のような返答で終わりましたが、複雑な指令を出した際にはAgent機能を追加で用いることで、runtimeErrorも追加でチェックしてくれるようになったので、より精度の高い回答結果を出してくれるようになりました。
dockerで使用する
dockerを用いて、フロントエンドを開発している方にもconsoleNinjaは使用することができます。
Docker コンテナ内でも Console Ninja を使いたい場合は、
下記拡張を追加してリモートコンテナに入れば OK です。
VS Code拡張機能パレットの中にある「Remote Containers: Reopen in Container」からコンテナの中に入ることで、ローカルと同様に使用することが可能です。
さいごに
今回VScode拡張である Console Ninjaについてご紹介させていただきました。
VScodeとしての機能にあるLog pointの機能をより拡張させ、見やすくするというのがこの拡張機能のメインとなります。
ブラウザの開発者モードを使用しないため、画面を圧迫せず効率性が上がると思い、気軽に使い始めましたが、今では課金するほど利用しています。
今回記事を書く中で、再度Console Ninjaの機能を確認しましたがまだまだ知らない機能がたくさんあることも知見として得られました。
AIを使ったコーディングが流行っていく中、我々人間は生成されたコードを精査するスピードを上げることが開発効率性を上げるカギだと私は考えています。
この記事がその一助となれば幸いです。
株式会社カンリーは「店舗経営を支える世界的なインフラを創る」をミッションに、店舗アカウントの一括管理・分析SaaS「カンリー店舗集客」の開発・提供、他複数のサービスを提供しております。 技術系以外のnoteはこちらから note.com/canly
Discussion