エクセル関数を検索できます | ちょっとした時にあると便利なWebブラウザー上で使用できるツール集です。

使用しているJavaScriptのライブラリ

• jQuery v3.3.1
• Handsontable v6.2.2

HTML

<div id="excel-function-search" class="excel-function-search">
    <p>お探しのエクセル関数についてのキーワードを入力してください。最大10件まで表示します。</p>
    <ul id="excel-function-search-tags" class="excel-function-search-tags">
        <li><a href="javascript:void(0);" data-label="絶対値">絶対値</a></li>
        <li><a href="javascript:void(0);" data-label="集計">集計</a></li>
        <li><a href="javascript:void(0);" data-label="平均">平均</a></li>
        <li><a href="javascript:void(0);" data-label="個数">個数</a></li>
        <li><a href="javascript:void(0);" data-label="検索">検索</a></li>
        <li><a href="javascript:void(0);" data-label="比較">比較</a></li>
        <li><a href="javascript:void(0);" data-label="四捨五入">四捨五入</a></li>
    </ul>
    <input type="text" id="search-keyword" placeholder="例）絶対値">

    <div class="btn-group-submit">
        <button id="submit">検索する</button>
    </div>
</div>

<div id="search-result" class="search-result">
    <div id="search-result-table"></div>
</div>

<div id="excel-function-list"></div>

エクセル関数一覧を用意

$.ajaxメソッドを使用して、JSONファイルからエクセル関数のデータを取得して定数に格納します。
※ブラウザーによっては直接開くと文字化けします。

const EXCEL_FUNCTION_LIST = '../excel-function-list.json';
const LIST = getJsonData(EXCEL_FUNCTION_LIST);

function getJsonData(url) {
    return $.ajax({
        type: 'GET', 
        url: url,
        dataType: 'json',
        timeout: 5000
    });
}

エクセル関数一覧を表示

doneメソッドでエクセル関数一覧を取得できたら、HTMLを組み立ててemptyメソッドで一旦空にしてからappendメソッドで該当の個所に表示します。

LIST.done(data => {
    excelFunctionTable(data, false, '#excel-function-list');
});

function excelFunctionTable(data, showExample, output, limit) {
    let html = '';
    let i = 1;
    
    $.each(data, (key, val) => {
        if (i > limit) {
            return false;
        }
        
        if (showExample) {
            html += '<div class="search-result-box">';
        }
        
        html += '<h3>' + val.name + '</h3>';
        html += '<table class="bordered-table excel-function-table">';
        html += '<tr>';
        html += '<th>説明</th>';
        html += '<td>' + val.desc + '</td>';
        html += '</tr>';
        html += '<tr>';
        html += '<th>書式</th>';
        html += '<td>' + val.form + '</td>';
        html += '</tr>';
        html += '<tr>';
        html += '<th>引数</th>';
        html += '<td>';
        html += '<ol>';
        $.each(val.arg, (k, v) => {
            html += '<li>' + v + '</li>';
        });
        html += '</ol>';
        html += '</td>';
        html += '</tr>';
        html += '<tr>';
        html += '<th>引数の説明</th>';
        html += '<td>';
        html += '<ol>';
        $.each(val.arg_desc, (k, v) => {
            html += '<li>' + v + '</li>';
        });
        html += '</ol>';
        html += '</td>';
        html += '</tr>';
        html += '</table>';
        
        if (showExample) {
            html += '<div id="example-' + val.name.replace('.', '-') + '" class="search-result-example">';
            html += '<p>' + val.example_sup + '</p>';
            html += '<div id="example-inner-' + val.name.replace('.', '-') + '" class="search-result-example-inner"></div>';
            html += '</div>';
        }
        
        if (showExample) {
            html += '</div>';
        }
        
        i++;
    });
    
    $(output).empty().append(html);
}

エクセル関数の検索を実行

検索するボタンが押された時に、入力されているキーワードに合うエクセル関数を検索します。

$('#submit').on('click', () => {
    searchExcelFunction();
});

function searchExcelFunction() {
    LIST.done(data => {    
        let $keyword = $('#search-keyword').val();
        let $example = '';
        let $exampleInner = '';
        let result = [];

        if ($keyword !== '') {
            $.each(data, (key, val) => {
                $.each(val.tag, (k, v) => {
                    if (
                        (
                            v.toLowerCase().indexOf($keyword) !== -1
                            || v.toUpperCase().indexOf($keyword) !== -1
                        )
                        && result.indexOf(val) === -1
                    ) {
                        result.push(val);
                    }
                });
            });
        }
        
        $('#search-result').hide();

        if (result.length > 0) {
            $('#search-result').show();
            excelFunctionTable(result, true, '#search-result-table', 10);
            
            $.each(result, (key, val) => {
                $example = $('#example-' + val.name.replace('.', '-'));
                $exampleInner = $('#example-inner-' + val.name.replace('.', '-'));
                $('<h4>' + val.name + 'の例</h4>').prependTo($example);
                new Handsontable($exampleInner[0], {
                    data: val.example,
                    rowHeaders: true,
                    colHeaders: true
                });
            });
        }
    });
}

タグからキーワードを検索

エクセル関数一覧のデータに設定されているタグから、入力されたキーワードを検索します。$.each関数でタグを1つずつキーワードと比較して、該当するタグがあればそのタグを含むエクセル関数をpushメソッドを使用して変数に格納します。検索キーワードが大文字でも小文字でも引っかかるようにするために、toLowerCaseメソッドで小文字、toUpperCaseメソッドで大文字に変換します。

let $keyword = $('#search-keyword').val();
let result = [];

if ($keyword !== '') {
    $.each(data, (key, val) => {
        $.each(val.tag, (k, v) => {
            if (
                (
                    v.toLowerCase().indexOf($keyword) !== -1
                    || v.toUpperCase().indexOf($keyword) !== -1
                )
                && result.indexOf(val) === -1
            ) {
                result.push(val);
            }
        });
    });
}

該当するエクセル関数を表示

検索で引っかかったエクセル関数を表示します。検索結果にはそのエクセル関数の使用例を、Handsontableを使用して表示します。Handsontableを使用することで、Excelと同じように表示することができます。また、関数名をクラス名としても使用しているため、replaceメソッドを使用してFLOOR.MATHなどのドットをハイフンに変換します。

if (result.length > 0) {
    $('#search-result').show();
    excelFunctionTable(result, true, '#search-result-table', 10);

    $.each(result, (key, val) => {
        $example = $('#example-' + val.name.replace('.', '-'));
        $exampleInner = $('#example-inner-' + val.name.replace('.', '-'));
        $('<h4>' + val.name + 'の例</h4>').prependTo($example);
        new Handsontable($exampleInner[0], {
            data: val.example,
            rowHeaders: true,
            colHeaders: true
        });
    });
}

おわりに

今回はJSONファイルを使用していますが、やり方を少し変えればXLSXファイルやCSVファイルでも行うことができます。キーワードでの検索は手動で設定しているタグを使用しているので、入力されたキーワードが登録されていない場合は当然検索に引っかかりません。JSONファイルからJavaScriptでデータを検索したり表示する際は「javascript json」などで検索してみてください。