【サンプルコード有】List.jsの使い方を徹底解説！どこよりもわかりやすく解説してみた

2023年8月5日2023年11月17日

Webエンジニアの初心者のみなさん、こんにちは！

今回は、JavaScriptライブラリの一つであるList.jsについて解説します。

List.jsは、HTMLのリストやテーブルを操作するためのライブラリで、ソート・検索・フィルタリング・追加・編集・削除など、さまざまな機能を提供しています。

今回は、それぞれの機能の基本的な使い方を見ていきましょう。

List.jsとは？

List.jsは、HTMLのリストやテーブルを操作するためのJavaScriptライブラリです。

List.jsを使用すると、HTMLのリストやテーブルに対して、ソート・検索・フィルタリング・追加・編集・削除などの操作を簡単に行うことができます。

List.jsは非常に軽量でほかのプログラムとの依存関係もないため、プロジェクトに簡単に追加できるのがメリットです。

List.jsの基本的な使い方

ソート

はじめに、List.jsを使ってリストをソートする方法を見てみましょう。

こちらのHTMLとJavaScriptコードでは、リストを名前と都市によってソートしています。

<div id="hacker-list">
    <table border="1">
        <tr>
            <td class="sort" data-sort="name">Sort by name</td>
            <td class="sort" data-sort="city">Sort by city</td>
        </tr>
    </table>

    <ul class="list">
        <li>
            <h3 class="name">Jonny</h3>
            <p class="city">Stockholm</p>
        </li>
        <li>
            <h3 class="name">Jonas</h3>
            <p class="city">Berlin</p>
        </li>
        ~~~~
    </ul>
</div>



<script type="text/javascript">
    var options = {
      valueNames : [ 'name', 'city' ]
    };
    var hackerList = new List('hacker-list', options);
</script>

こちらのコードでは、hacker-listというIDを持つ要素がList.jsによって操作されます。

valueNamesオプションには、ソート可能なフィールドの名前を配列として指定しましょう。

検索

次に、List.jsを使ってリストから特定の項目を検索してみましょう。

こちらは、名前と都市によってリストを検索するHTMLとJavaScriptコードの一例です。

<div id="hacker-list">
    <table border="1">
        <tr>
            <td class="sort" data-sort="name">Sort by name</td>
            <td class="sort" data-sort="city">Sort by city</td>
            <td><input type="text" class="search"></td>
        </tr>
    </table>
    ~~~~
</div>


<script type="text/javascript">
    var options = {
      valueNames : [ 'name', 'city' ]
    };
    var hackerList = new List('hacker-list', options);
</script>

こちらのコードでは、searchというクラスを持つ入力フィールドに入力されたテキストに基づき、リストが検索されます。

フィルタリング

続いて、List.jsを使ってリストをフィルタリングする方法を見てみましょう。

こちらのHTMLとJavaScriptコードでは、使用言語によってリストをフィルタリングしています。

<div id="hacker-list">
    <table border="1">
        <tr>
            <td class="sort" data-sort="name">Sort by name</td>
            <td class="sort" data-sort="city">Sort by city</td>
            <th />
        </tr>
        <tr>
            <td id="filter-none">Show all</td>
            <td id="filter-java">Only show Java user</td>
            <td id="filter-cplus">Only show C++ user</td>
        </tr>
    </table>

    <table>
        <thead>
            <tr>
                <th>use</th>
                <th>name</th>
                <th>city</th>
            </tr>
        </thead>
        <tbody class="list">
            <tr>
                <td class="use">Java</td>
                <td class="name">Jonny</td>
                <td class="city">Stockholm</td>
            </tr>
            <tr>
                <td class="use">C++</td>
                <td class="name">Jonas</td>
                <td class="city">Berlin</td>
            </tr>
            ~~~~
        </tbody>
    </table>
</div>

<script type="text/javascript">
    var options = {
        valueNames : [ 'use', 'name', 'city' ]
    };
    var hackerList = new List('hacker-list', options);

    $('#filter-java').click(function() {
        hackerList.filter(function(item) {
            if (item.values().use == "Java") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    });

    $('#filter-cplus').click(function() {
        hackerList.filter(function(item) {
            if (item.values().use == "C++") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    });
    $('#filter-none').click(function() {
        hackerList.filter();
        return false;
    });
</script>

こちらのコードでは、filter-java・filter-cplus・filter-noneというIDを持つ要素がクリックされたときに、リストがフィルタリングされるようになります。

追加

次は、List.jsを使ってリストに新しい項目を追加する方法です。

こちらのHTMLとJavaScriptコードでは、新しい項目をリストに追加しています。

<div id="hacker-list">
    <table border="1">
        <thead>
            <tr>
                <th>use</th>
                <th>name</th>
                <th>city</th>
            </tr>
        </thead>
        <tbody class="list">
            <tr>
                <td class="use">Java</td>
                <td class="name">Jonny</td>
                <td class="city">Stockholm</td>
            </tr>
            <tr>
                <td class="use">C++</td>
                <td class="name">Jonas</td>
                <td class="city">Berlin</td>
            </tr>
            ~~~~
        </tbody>
    </table>

    <table>
        <tr>
            <td><input type="text" id="use-field" placeholder="use" /></td>
            <td><input type="text" id="name-field" placeholder="name" /></td>
            <td><input type="text" id="city-field" placeholder="city" /></td>
            <td><button id="add-btn">Add</button></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var options = {
        valueNames : [ 'use', 'name', 'city' ]
    };
    var hackerList = new List('hacker-list', options);

    var useField = $('#use-field'),
        nameField = $('#name-field'),
        cityField = $('#city-field'),
        addBtn = $('#add-btn');

    addBtn.click(function() {
        hackerList.add({
            use  : useField.val(),
            name : nameField.val(),
            city : cityField.val()
        });
        clearFields();
    });

    function clearFields() {
        useField.val('');
        nameField.val('');
        cityField.val('');
    }
</script>

こちらのコードでは、add-btnというIDを持つボタンがクリックされたときに、新しい項目がリストに追加されます。

追加する項目の値は、use-field・name-field・city-fieldというIDを持つ入力フィールドから取得します。

編集

続いて、List.jsを使ってリストの項目を編集する方法を解説します。

こちらのHTMLとJavaScriptコードは、リストの項目を編集する際の一例です。

<tbody class="list">
    <tr>
        <td class="id" style="display: none;">1</td>
        <td class="use">Java</td>
        <td class="name">Jonny</td>
        <td class="city">Stockholm</td>
        <td><button class="edit-item-btn">Edit</button></td>
    </tr>
</tbody>

<script type="text/javascript">
    var options = {
        valueNames : [ 'id', 'use', 'name', 'city' ]
    };
    var hackerList = new List('hacker-list', options);

    var idField = $('#id-field')
        useField = $('#use-field'),
        nameField = $('#name-field'),
        cityField = $('#city-field'),
        addBtn = $('#add-btn'),
        editBtn = $('#edit-btn').hide(),
        editBtns = $('.edit-item-btn');

    refreshCallbacks();

    addBtn.click(function() {
        hackerList.add({
            id   : Math.floor(Math.random()*110000),
            use  : useField.val(),
            name : nameField.val(),
           city : cityField.val()
        });
        clearFields();
        refreshCallbacks();
    });

    editBtn.click(function() {
        var item = hackerList.get('id', idField.val())[0];
        item.values({
            id   : idField.val(),
            use  : useField.val(),
            name : nameField.val(),
            city : cityField.val()
        });
        clearFields();
        addBtn.show();
        editBtn.hide();
    });

    function refreshCallbacks() {
        // Needed to add new buttons to jQuery-extended object
        editBtns = $(editBtns.selector);
        editBtns.off('click').click(function() {
            var itemId = $(this).closest('tr').find('.id').text();
            var itemValues = hackerList.get('id', itemId)[0].values();
            idField.val(itemValues.id);
            useField.val(itemValues.use);
            nameField.val(itemValues.name);
            cityField.val(itemValues.city);

            addBtn.hide();
            editBtn.show();
        });
    }

    function clearFields() {
        useField.val('');
        nameField.val('');
        cityField.val('');
    }
</script>

こちらのコードでは、edit-item-btnというクラスを持つボタンがクリックされたときに、対応する項目が編集モードになります。

編集モードでは、use-field・name-field・city-fieldというIDを持つ入力フィールドに項目の値が表示され、add-btnボタンが非表示になり、edit-btnボタンが表示されます。

edit-btnボタンがクリックされると、入力フィールドの値が項目に反映されて編集モードが終了します。

削除

最後に、List.jsを使ってリストの項目を削除する方法を見てみましょう。

こちらのHTMLとJavaScriptコードは、リストの項目を削除する一例です。

<tbody class="list">
    <tr>
        <td class="id" style="display: none;">1</td>
        <td class="use">Java</td>
        <td class="name">Jonny</td>
        <td class="city">Stockholm</td>
        <td><button class="remove-item-btn">Remove</button></td>
    </tr>
</tbody>

<script type="text/javascript">
    var options = {
        valueNames : [ 'id', 'use', 'name', 'city' ]
    };
    var hackerList = new List('hacker-list', options);

    var removeBtns = $('.remove-item-btn');

    refreshCallbacks();

    function refreshCallbacks() {
        // Needed to add new buttons to jQuery-extended object
        removeBtns = $(removeBtns.selector);
        removeBtns.off('click').click(function() {
            var itemId = $(this).closest('tr').find('.id').text();
            hackerList.remove('id', itemId);
        });
    }
</script>

<tbody class="list">
    <tr>
        <td class="id" style="display: none;">1</td>
        <td class="use">Java</td>
        <td class="name">Jonny</td>
        <td class="city">Stockholm</td>
        <td><button class="remove-item-btn">Remove</button></td>
    </tr>
</tbody>

<script type="text/javascript">
    var options = {
        valueNames : [ 'id', 'use', 'name', 'city' ]
    };
    var hackerList = new List('hacker-list', options);

    var removeBtns = $('.remove-item-btn');

    refreshCallbacks();

    function refreshCallbacks() {
        // Needed to add new buttons to jQuery-extended object
        removeBtns = $(removeBtns.selector);
        removeBtns.off('click').click(function() {
            var itemId = $(this).closest('tr').find('.id').text();
            hackerList.remove('id', itemId);
        });
    }
</script>

こちらのコードでは、remove-item-btnというクラスを持つボタンがクリックされたときに、対応する項目がリストから削除されます。

ここまでが、List.jsの基本的な使い方です。このライブラリを使うことで、HTMLのリストやテーブルを簡単に操作できるようになります。

とくに、大量のデータを扱う場合や、ユーザーによるデータの操作を許可する場合には、List.jsは非常に便利なツールとなるでしょう。

List.jsを使った実践的な例

ここからは、List.jsを使った実践的な例を解説します。

こちらの例では、ユーザーが入力したデータをリストに追加し、そのリストをソート・検索・フィルタリングすることができます。

<div id="hacker-list">
    <input class="search" placeholder="Search" />
    <button class="sort" data-sort="name">Sort by name</button>
    <button class="sort" data-sort="city">Sort by city</button>

    <ul class="list">
        <li>
            <h3 class="name">Jonny</h3>
            <p class="city">Stockholm</p>
        </li>
        <li>
            <h3 class="name">Jonas</h3>
            <p class="city">Berlin</p>
        </li>
        ~~~~
    </ul>

    <input id="name-field" placeholder="Name" />
    <input id="city-field" placeholder="City" />
    <button id="add-btn">Add</button>
</div>

<script type="text/javascript">
    var options = {
        valueNames: [ 'name', 'city' ],
        item: '<li><h3 class="name"></h3><p class="city"></p></li>'
    };

    var hackerList = new List('hacker-list', options);

    var idField = $('#id-field'),
        nameField = $('#name-field'),
        cityField = $('#city-field'),
        addBtn = $('#add-btn');

    addBtn.click(function() {
        hackerList.add({
            name: nameField.val(),
            city: cityField.val()
        });
        nameField.val('');
        cityField.val('');
    });
</script>

こちらのコードでは、name-fieldとcity-fieldというIDを持つ入力フィールドに入力されたデータをリストに追加します。また、searchというクラスを持つ入力フィールドに入力されたテキストに基づいてリストが検索され、sortというクラスを持つボタンがクリックされるとリストがソート化されます。