秀丸エディタのアウトライン機能を使用して、JavaScript関数だけをツリー形式で表示

方法1.アウトライン(ツリー)+強調表示

1.アウトライン機能
〔ウインドウ〕-〔アウトライン解析の枠〕

2.ツリー表示
・「アウトライン解析の枠」で右クリック
・「ツリー表示」選択

3.強調表示
・「アウトライン解析の枠」で右クリック
・「アウトライン解析の設定」選択
・右下の「読込み」ボタンクリック
・「js20141014-4.hilight」選択

---

方法2.アウトライン(関数一覧)+マクロ)

1.アウトライン機能
〔ウインドウ〕-〔アウトライン解析の枠〕

2.関数一覧
・「アウトライン解析の枠」で右クリック
・「関数一覧」選択
・関数一覧が表示される
・「アウトライン解析の枠」で右クリック後、「一覧をコピー」選択して、表示内容をコピー
・新規ファイルへ貼り付け

3.罫線変換マクロでツリー形式へ変換
・マクロ実行
・「TabTreeConvert.mac」選択

Ver8.34

・アウトライン解析の枠（Ver8.34対応版）

Ver8.34

・解析（Ver8.34対応版）

---

JavaScript

JavaScriptにも対応しているが、JavaScriptに特化しているわけではない
・「function ★★」関数名は取得できるが、即時無名関数オブジェクトのメソッドはデフォルトでは取得できない
・即事無名関数オブジェクトはfunctionとして取得される

感想
・他に似たようなツールを知らないので、便利なのは便利
・細かい設定を加えていけば、使えるようになるかも…

---

「関数一覧」選択後

仕様
・罫線未対応

function

function

function

function

function

function

function

function

function

function

function

function

function

function

gaEventSend

updateStatus

parseParams

rewriteHash

	switch (step) {

		case 1:

		case 0:

applyParams

nextStepApplyParams

chRadio

	switch(this.name) {

		case "participation" : {

chCheckbox

	switch(d.attr("id")) {

		case "cb-dlr":

		case "cb-dlsr":

		case "cb-dllh":

		case "cb-dlucdg":

		case "cb-dlvml":

		default :

chValue

checkCompleted

redrawStats

getUserRepo

runShow

redrawRepos

meiRepo

moiRepo

meForks

meSources

meFS

fSource

fFork

refreshRepoList

	name

	size

	age

	titleAge

	color

	darker

	sort

	width

	star

	fork

	chCheck

	append

	appendStat

repoItemOver

repoItemOut

repoItemClick

getAccessToken

init

	function

	pauseShow

	startShow

罫線変換マクロ導入
「ツリーそのものをコピー」のTAB-罫線変換マクロ
▼D:/Program Files (x86)/Hidemaru/macro/TabTreeConvert.mac
・「アウトライン解析の枠」にある「ツリーそのものをコピー」を使用してクリップボードに出力されるデータを、TAB→罫線変換を行うマクロ
・ 「ツリーそのものをコピー」を実行し、秀丸エディタに貼り付けてから実行
・範囲選択している場合は、選択範囲のみ実行

├function

├function

├function

├function

├function

├function

├function

├function

├function

├function

├function

├function

├function

├function

├gaEventSend

├updateStatus

├parseParams

├rewriteHash

│└switch (step) {

│  ├case 1:

│  └case 0:

├applyParams

├nextStepApplyParams

├chRadio

│└switch(this.name) {

│  └case "participation" : {

├chCheckbox

│└switch(d.attr("id")) {

│  ├case "cb-dlr":

│  ├case "cb-dlsr":

│  ├case "cb-dllh":

│  ├case "cb-dlucdg":

│  ├case "cb-dlvml":

│  └default :

├chValue

├checkCompleted

├redrawStats

├getUserRepo

├runShow

├redrawRepos

├meiRepo

├moiRepo

├meForks

├meSources

├meFS

├fSource

├fFork

├refreshRepoList

│├name

│├size

│├age

│├titleAge

│├color

│├darker

│├sort

│├width

│├star

│├fork

│├chCheck

│├append

│└appendStat

├repoItemOver

├repoItemOut

├repoItemClick

├getAccessToken

└init

  ├function

  ├pauseShow

  └startShow

※一番上の階層のみ一行空けるよう設定したいのだが、やり方が不明

〔ウインドウ〕-〔アウトライン解析の枠〕

---

ツリー設定

〔その他〕-〔ファイルタイプ別の設定〕-〔アウトライン解析の方法〕
・「ツリー表示」にチェックを入れる

---

ツリーコピー

・「アウトライン表示エリア」で右クリック
・〔ツリー操作〕-〔ツリーそのものを選択〕


ツリー操作
・「ツリー表示」選択している場合のみ表示されるナビゲーション

SQL

ツリー表示項目のプロパティ
・下記ページで文字列を指定する簡単な例が解説されている
・秀丸のアウトライン解析が地味に便利な件

・表示範囲指定にも踏み込むと、さらに細かい挙動を制御可能となる

作成例

GUIで作成した結果を保存
・GUIで操作した結果を出力しているだけなので、下記内容を理解する必要は全くない
▼D:/Program Files (x86)/Hidemaru/macro/Setting/js20141014-4.hilight

/<TreeWord>

/0000,0002,0000,00000000,00014553,"^[ \\t]*class[^:;{]*",""

/0000,0003,0000,00000000,00006156,"struct",""

/0000,0001,0000,00000000,00002652,"",""

/0001,0003,0000,00000000,000041D6,"switch",""

/0002,0003,0000,00000000,000041D6,"case",""

/0002,0003,0000,00000000,000061D6,"default",""

/0003,0002,0000,00000000,00000750,".prototype = {",""

/0004,0002,0000,00000000,00000750,".prototype={",""

/0005,0002,0000,00000000,00000750," = function",""

/0006,0003,0000,00000000,00000152,"return {",""

上記条件 ＋ マクロ適用例

├$ = function(xpr){

├$$ = function(xpr){

├var createDigits = function(xpr){

│└return {

│  ├get : function(){

│  ├show : function(num){

│  ├warnUnder : function(num){

│  ├inc : function(num){

│  ├dec : function(num){

│  └reset : function(){

├var codes = function(html){

│├rgxGlobal    = function(){

│└var highlight = function(code){

├var overlay = function(){

│└return {

│  ├show : function(fnc){

│  └hide : function(fnc){

├var timer = function(){

│└var stop = function(){

│  └return {

│    ├create : function(ms, fnc){

│    └sec : function(){

├var status = function(){

│└return {

│  ├show : function(typ, str, fnc){

│  ├hide : function(fnc){

│  ├point : function(num, fnc){

│  └getScore : function(){

├var results = function(){

│└return {

│  ├show : function(score){

│  └add : function(question, rightAns, yourAns, isCorrect){

├var questions = function(codes){

│├var uneval = function(xpr){

││└switch(typeof xpr){

││  ├case "string" : return '"' + xpr + '"';

││  └default       : return xpr;

│├var next = function(){

│├var correct = function(ans){

│├var incorrect = function(ans){

│└var check = function(yourAns){

│  └return {

├var answer = function(){

│└elm.onkeydown = elm.onkeypress = elm.onkeyup = elm.change = function(){

│  └return {

│    ├get : function(){

│    ├reset : function(){

│    ├focus : function(){

│    ├lock : function(){

│    └unlock : function(){

├$("form").onsubmit = $("#btnAnswer").onclick = function(){

│├$("#btnStart").onclick = function(){

│└return {

│  └eval : function(/* xpr */){

└function(){

  ├transitions[LINEAR] = function(x){

  ├transitions[EASE_IN] = function(x){

  ├transitions[EASE_OUT] = function(x){

  ├transitions[EASE_OUT2] = function(x){

  ├transitions[SIN] = function(x){

  ├var createTransitionArray = function(type, dx){

  ├var animate = function(){

  ├var stop = function(){

  │└css = function(elm, prp){

  └var createTween = function(elm, sty, prp, from, to, dx, trn, repeat, comp, init){

    ├tweens.push(repeat ? function(){

    ├} : function(){

    └return {

      ├resume : function(){

      └add : function(elm, prm){

---

感想

実際に使用してみた感想
・正規表現を駆使しなければ抽出できないと思い込んでいた
→そんなことはない
→プロパティの設定項目は想定していたよりはるかに豊富
→GUI(プルダウン等で選択する)だけでかなり細かい指定が可能

ポイント
・「見出しの定義」に文字列を指定することで、ほぼ何でも出来る
・「インデントの深さでレベルを決める」にチェックを入れる
・表示範囲 … 行全体