プロジェクトの中で利用したjsライブラリ紹介

infonet_ytakemoto

2024年3月28日 15:56

こんにちは、入社7年目のエンジニアです。
今回は私が今まで携わったプロジェクトの中で利用したjsライブラリ3点を紹介させていただきます。

1. jsライブラリの紹介

・tabulator.js

公式サイト：https://tabulator.info/

概要：グリット表示を行うjsライブラリです。
標準の機能がとても多く、機能追加も可能です。
公式サイトにて操作確認ができます。

・splide

公式サイト：https://splidejs.com/

概要：スライダー機能のjsです。
画像だけでなく、HTMLを構築しスライダー化することも可能です。

・simple-keyboard

公式サイト：https://virtual-keyboard.js.org/

概要：画面にキーボードを表示するjsライブラリです。
テンキーの表示も可能で、タブレット端末で数字を入力させるために利用しました。
独自にボタンを追加したり、ボタンを押した時の処理の調整も可能なようです。
補足：タブレット端末標準のキーボードを利用する場合、表示されるキーボードの位置によっては画面の表示と重なってしまい見えなくなってしまいます。そのため必要最低限なキーだけを表示できるこちらのjsを導入しました。

2. ソースコードのサンプル

・tabulator.js

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タブレータサンプル</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css">
</head>
<body>
    <div id="example-table"></div>

    <script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
    <script>
        // テーブルのデータ
        var tableData = [
            { id: 1, 名前: "山田太郎", 性別: "男性", 誕生日: "1990-01-01", 出身地: "東京" },
            { id: 2, 名前: "鈴木花子", 性別: "女性", 誕生日: "1995-05-05", 出身地: "大阪" }
        ];

        var table = new Tabulator("#example-table", {
            data: tableData,
            columns: [
                { title: "", field: "checkbox", formatter: "rowSelection", headerSort: false, width: 50 },
                { title: "名前", field: "名前", sorter: "string" },
                { title: "性別", field: "性別", sorter: "string" },
                { title: "誕生日", field: "誕生日", sorter: "string" },
                { title: "出身地", field: "出身地", sorter: "string" }
            ],
            layout: "fitColumns",
            movableColumns: true,
            resizableColumns: true,
            langs:{
                ja:{
                    "pagination":{
                        "first":"最初",
                        "first_title":"最初のページ",
                        "last":"最後",
                        "last_title":"最後のページ",
                        "prev":"前",
                        "prev_title":"前のページ",
                        "next":"次",
                        "next_title":"次のページ",
                    }
                }
            },
            langs:["ja"],
        });
    </script>
</body>
</html>

・splide

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="splide" class="splide">
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--prev"></button>
    </div>
    <div id="splide__track" class="splide__track">
      <ul id="splide__list" class="splide__list"></ul>
    </div>
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--next"></button>
    </div>
  </div>
  <div id="page-number"></div>
  <script>
    //#region splide.js 初期化処理
    document.addEventListener('DOMContentLoaded', function () {
      var splide = new Splide('#splide', {
        type: 'loop',
        perPage: 1,
        heightRatio: 0.5,
        pagination: false,
        arrows: true,
      }).mount();

      splide.on('moved', function () {
        viewPageCount();
      });
    });
    //#endregion

    //#region 表示データ生成
    const lst = [
      { name: 'テスト 1', code: 'A001' },
      { name: 'テスト 2', code: 'A002' },
      { name: 'テスト 3', code: 'A003' },
   ];

    const ulElement = document.getElementById('splide__list');

    for (let i = 0; i < lst.length; i++) {
      const liElement = document.createElement('li');
      liElement.className = 'splide__slide';
      liElement.innerHTML = '<H2>' + lst[i].name + '</H2>';
      liElement.innerHTML = liElement.innerHTML + '<div>コード：' + lst[i].code + '</div>';
      ulElement.appendChild(liElement);
    }
    //#endregion
  </script>
</body>
</html>

・simple-keyboard

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/simple-keyboard@3.7.33/build/css/index.css" />
</head>

<body>
  <input type="text" id="output" placeholder="Type here..." readonly>

  <div id="key" class="keyWrap">
    <div id="keyboard" class="simple-keyboard"></div>
  </div>

  <script src="https://unpkg.com/simple-keyboard@3.7.33/build/index.js"></script>
  <script>
    let Keyboard = window.SimpleKeyboard.default;
    let keyboard = new Keyboard({
      onChange: input => onChange(input),
      layout: {
        default: ["1 2 3", "4 5 6", "7 8 9", "{bksp} 0 {clear}"]
      },
      display: {
        '{clear}': 'C',
        '{bksp}': '⌫'
      },
      theme: "hg-theme-default hg-layout-numeric numeric-theme",
      onKeyPress: button => onKeyPress(button)
    });
    const key = document.getElementById('key');

    function onChange(input) {
      document.getElementById('output').value = input;
    }

    function onKeyPress(button) {
      if (button === "{clear}") {
        keyboard.clearInput();
      }
    }
  </script>
</body>
</html>

3. chatGPTに助けられた話

tabulator.jsは日本語のドキュメントが少なく、仕様の確認に時間がかかりました。chatGPTを活用することで、サンプルコードの作成や利用方法を把握が可能です。一部誤った情報が出力される場合もありますが、適宜調整しながら確認を進めました。
上記でお伝えしたサンプルコードも、chatGPTから生成して一部調整したものになります。
※インフォネットでは、入力したソースコードや機密情報が二次利用されることを防ぐため、社内用のchatGPTを作成して利用しております。

4. まとめ

今回はjsライブラリを3点紹介させていただきました。
先ほどご紹介させていただいたように、日本語のドキュメントが少ないライブラリでもchatGPTを活用することで、技術調査や導入がスムーズになります。
個人的にはtabulator.jsはまだ利用できていない機能が多く、確認を進めたいと感じました。

この記事が気に入ったらサポートをしてみませんか？