この記事では、私が作成した「コードの宣言にジャンプできる Web コードビューア」を紹介します。
プログラムの関数呼び出しから宣言へ一瞬で飛ぶことができ、さらに元の位置に戻る履歴機能まで備えています。
また、リンク化されるのは宣言が存在するメソッドのみで、宣言が見つからない呼び出しは普通の文字として扱われるため、
読みやすさと正確性を両立しています。
公開ページはこちら：
👉 https://uni928.github.io/TestYou/index4.html
■ このツールを作った理由
大規模なコードを読んでいると、
「このメソッドどこで定義されてるんだっけ？」
という場面がとても多いと感じます。
IDE のジャンプ機能は便利ですが、すべてのコードを IDE で開くのは手間ですし、
GitHub 上のコードや過去に受け取ったコード片など、IDE に放り込みにくい状況も多々あります。
「ブラウザでコピペするだけで宣言ジャンプできたら便利なのでは？」
と思ったのが本ツール作成のきっかけです。
■ このサイトでできること
✔ メソッド呼び出し（foo(...)）を自動で検出し、宣言が存在する場合のみリンク化
✔ リンク化されたメソッドをクリック → 自動で宣言行までスクロールジャンプ
✔ ジャンプ前のスクロール位置とクリックしたメソッドを履歴に保存
✔ 右下に大きな「戻る」ボタンで、呼び出し位置へ気持ちよく戻れる
✔ 履歴はスタック方式で何段階でも戻れる
✔ 宣言が存在しないメソッドは普通の文字として扱う（誤リンクを防止）
✔ HTML 単体で動作（localStorage や IndexedDB 不要）
✔ スマホ・PC両対応のレスポンシブ UI
✔ 一度ジャンプしたメソッドにはチェックマークが付き、既読かどうかがひと目で分かります。
特に「戻るボタン」は 400px または画面幅の 1/3 の小さいほうを採用し、
親指で押しやすいサイズになるよう UI 面も調整しています。
■ 実際の画面（要点）
● 上部：コード入力エリア（textarea）
● 下部：解析後のコードビュー（宣言にジャンプ可能）
● 右下：大きな戻るボタン（呼び出し位置へ戻る）
操作イメージは IDE の「宣言へジャンプ」「戻る」機能に近いですが、
ブラウザだけで動くためセットアップ不要です。
■ 仕組みの概要
- コードを行ごとに分解し、関数宣言らしき行（function foo(...) / int foo(... など）を解析
- 宣言一覧を辞書として保持（名前 → 宣言ID）
- 各行の「foo(...」を正規表現で検出し、宣言が存在すればリンク化
- クリックイベントで宣言位置へスクロール
- ジャンプ前のスクロール位置＋対象メソッドを履歴に push
- 戻るボタンで履歴 pop → 呼び出し位置を選択表示してスクロール
localStorage や IndexedDB は不要で、ページを閉じれば痕跡は残りません。
■ 公開ページ
👉 https://uni928.github.io/TestYou/index4.html
コードを貼るだけで動作します。
サンプルコードも同梱しているため、すぐに動作確認できます。
■ こんな方におすすめ
・受け取ったコード片を素早く読みたい
・ブラウザだけで関数ジャンプしたい
・GitHub のコードをコピペして軽く読みたい
・IDE を立ち上げるほどでもないけど宣言を追いたい
・プログラミング学習中で、関数の流れをビジュアルに追いたい
宣言ジャンプと戻るの流れが視覚的で分かりやすいため、
初学者にもかなり向いていると思います。
■ 最後に
宣言へジャンプして、右下の大きい戻るボタンでサッと戻る。
このシンプルな操作だけでコードリーディングが驚くほど快適になります。
本記事が皆さんの作業効率化に少しでも役立てば幸いです。
最後まで読んでいただき、ありがとうございました。
公開ページはこちら：
👉 https://uni928.github.io/TestYou/index4.html