JavaScript｜VB.NET-TIPS などプログラミングについて

■JavaScript

[2025/05/06] [PR] (No.)
[2021/06/18] JavaScript jQuery w2ui.form を使ったフォーム処理方法の紹介 (No.274)
[2021/06/15] JavaScript jQuery イベント関数に引数を渡す方法 (No.273)
[2021/06/07] JavaScript IndexedDB の使い方６（データ削除） (No.272)
[2021/06/04] JavaScript IndexedDB の使い方５（カーソル処理） (No.271)
[2021/06/03] JavaScript IndexedDB の使い方４（全データ取得） (No.270)

≪ [1] [2] [3] [4] [5] [6] [7] [8] [9] ≫

- 2025/05/06
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM

2021/06/18

JavaScript jQuery w2ui.form を使ったフォーム処理方法の紹介

すでにデータグリッドコンポーネントである w2ui.grid については説明しましたが、今回から複数回に渡りフォームコンポーネントである w2ui.form ついて説明をしていきます。

w2ui.form で入力フォームを作る場合、フォームの属性を各種のプロパティで設定することで表現できます。
先ずは簡単な例を以下に示します。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="testForm" style="width: 500px"></div>
</body>
<script>
$(function () {
    $('#testForm').w2form({
        name   : 'testForm',
        header : 'Test Form',
        fields : [
            { field: 'name'   , type: 'text', required: true },
            { field: 'address', type: 'text', required: true },
            { field: 'comment', type: 'text'}
        ],
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                this.save();
            }
        }
    });
});
</script>
</html>

フォームの領域を div タグで宣言し、その領域に対して w2ui の1つの機能である w2form を設定してやります。 w2form への引数は1個のオブジェクトとして宣言したものを渡してやります。そのオブジェクトの中に、フォーム用の各種のプロパティを宣言します。

上記の例ではフォームの名称である name プロパティ、フォームのタイトルである header プロパティ、入力データの中身である fields プロパティ、さらに処理動作を actions プロパティを宣言します。

さらに fields は各入力フィールドの属性を専用のプロパティで宣言した配列で宣言し actions は行いたい処理をプロパティとして宣言します。（fields 用のプロパティは下の方で説明します。）

これを実行させると以下の様な表示になります。

■fields プロパティのオブジェクト配列の内部プロパティについて

プロパティ名	説明	備考
field	入力フィールド指定	この値を入力フィールドの name タグと一致させる
type	データタイプ	タイプには以下のものがあります(他にもあります) check:チェックボックス combo:コンボボックス date:日付 pass :パスワード radio:ラジオボタン text :テキスト textarea:テキストエリア
required	必須指定	true:必須指定、false:必須ではない
hidden	hidden属性	true:hidden指定(デフォルト:false)
disabled	disabled属性	true:disabled指定、false:enabled指定(デフォルト)
html	HTML文字列の生成	各種プロパティがありますがここでは説明を割愛

上記の例では自動で入力フィールドなどを生成できることが分かりましたが、自分で定義したHTMLに対してフォームオブジェクトを関連付けたい場合があります。通常はフォームのデザイン等を入れたりしたいので、こちらが普通だとは思います。
そこで、入力フィールドの HTML と w2form オブジェクト宣言を分ける例を示します。

■入力フィールドの HTML と w2form オブジェクト宣言を分ける例

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="testForm" style="width: 500px">
        <div class="w2ui-page page-0">
            <div class="w2ui-field">
                <label>名前:</label>
                <div>
                    <input name="name" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>住所:</label>
                <div>
                    <input name="address" maxlength="100" size="40"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>備考:</label>
                <div>
                    <textarea name="comment" style="width: 300px; height: 50px;"></textarea>
                </div>
            </div>
        </div>
        <div class="w2ui-buttons">
            <input type="button" value="リセット" name="reset"/>
            <input type="button" value="保存" name="save"/>
        </div>
    </div>
 
</body>
<script>
$(function () {
    $('#testForm').w2form({
        name   : 'testForm',
        header : 'Test Form',
        fields : [
            { field: 'name'   , type: 'text', required: true },
            { field: 'address', type: 'text', required: true },
            { field: 'comment', type: 'text'}
        ],
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                this.save();
            }
        }
    });
});
</script>
</html>

これを実行させると以下の様な表示になります。

今後はさらに w2ui.form のいろんな使い方をご紹介したいと思います。

■jQuery ではなく javascript の addEventListener メソッドを使う方法

上記の例では jQuery の on メソッドを使ってイベント関数への引数の渡し方を説明しましたが、 javascript そのものの addEventListener メソッドを使う方法について説明します。

addEventListener を使う場合は、第1引数にイベントの種類を文字列で指定し、第2引数でイベント処理関数を指定します。HTMLファイルは以下の様になります。

<html>
<head>
<meta charset="utf-8">
<title>test Event Para - 2</title>
<script type="text/javascript">
//ロード時にイベント処理関数設定
window.onload = function(){
    document.getElementById('button1').addEventListener('click', clickFunc);
    document.getElementById('button2').addEventListener('click', clickFunc);
    document.getElementById('button3').addEventListener('click', clickFunc);
}
//addEventListener で登録される関数
function clickFunc(event) {
    console.log(event);
}
</script>
</head>
<body>
    <h2>test Event Para - 2</h2>
    <button id="button1">ボタン１</button>
    <button id="button2">ボタン２</button>
    <button id="button3">ボタン３</button>
</body>
</html>

そこでイベント関数に引数を渡すのですが、addEventListener の第2引数はイベント処理関数そのものでは無く、オブジェクトとして渡すことが出来ます。以下の様にオブジェクトの handleEvent プロパティにイベント処理関数を指定します。「ロード時にイベント処理関数設定」の部分だけを抜粋してその方法を示します。

window.onload = function(){
    document.getElementById('button1').addEventListener('click', { handleEvent: clickFunc } );
    document.getElementById('button2').addEventListener('click', { handleEvent: clickFunc } );
    document.getElementById('button3').addEventListener('click', { handleEvent: clickFunc } );
}

addEventListener の第2引数にオブジェクトが渡せるということは、他のデータも別のプロパティとして渡せることになります。

<html>
<head>
<meta charset="utf-8">
<title>test Event Para - 3</title>
<script type="text/javascript">
//ロード時にイベント処理関数設定
window.onload = function(){
    document.getElementById('button1').addEventListener('click', { handleEvent: clickFunc, para1: "10", para2: "aa" } );
    document.getElementById('button2').addEventListener('click', { handleEvent: clickFunc, para1: "20", para2: "bb" } );
    document.getElementById('button3').addEventListener('click', { handleEvent: clickFunc, para1: "30", para2: "cc" } );
}
//addEventListener で登録される関数
function clickFunc(event) {
    //[this]には addEventListener の第2引数そのものが渡される
    console.log(this.para1);
    console.log(this.para2);
    console.log(event);
}
</script>
</head>
<body>
    <h2>test Event Para - 3</h2>
    <button id="button1">ボタン１</button>
    <button id="button2">ボタン２</button>
    <button id="button3">ボタン３</button>
</body>
</html>

■簡単な delete メソッドの利用

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - delete - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  データ追加処理
 */
function delData() {
    //キー値
    var id = $("#id").val();
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readwrite');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //削除処理開始
    var request = objectStore.delete(id);
    request.onsuccess = function(event) {
        console.log('削除成功。');
    };
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - delete - 1</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
     id:<input type="text" name="id"   id="id" value="" />
    <button id="buttonDel"  onclick="delData()">データ削除</button>
    <br />
</body>
</html>

ブラウザの「ウエブ開発ツール」の「ストレージ」の表示で「Indexed DB」⇒「TestDB」⇒「Test1」を確認したものが下図です。

さてここでデータの削除を行ってみます。「DBオープン」ボタンをクリック後 IDテキストボックスに "01" を入力し「データ削除」ボタンをクリックすると「削除成功。」と表示されます。
その後、ブラウザの「ウエブ開発ツール」の「ストレージ」の「Indexed DB」⇒「TestDB」⇒「Test1」の再読込をを確認したものが下図です。 KEYが "01" のデータが存在せず "02" からの一覧表示になっています。

但し、既に存在しないキーで削除を行っても、エラーは発生しませんでした。

■delete メソッドにキー範囲の指定

getAll メソッドの時と同様に delete メソッドにキー範囲指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ～ '22' の範囲指定で指定しています。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - delete - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  データ追加処理
 */
function delData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readwrite');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //キーの範囲指定オブジェクト
    var query = IDBKeyRange.bound('01', '22');  //キー範囲:'01'～'22'
    //削除処理開始
    var request = objectStore.delete(query);
    request.onsuccess = function(event) {
        console.log('削除成功。');
    };
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - delete - 2</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonDel"  onclick="delData()">データ削除</button>
    <br />
</body>
</html>

ブラウザの「ウエブ開発ツール」の「ストレージ」の表示で「Indexed DB」⇒「TestDB」⇒「Test1」のデータを全て手動で削除し、「JavaScript IndexedDB の使い方２（データ追加）」の最後の部分の６件のデータ生成で再度データを追加します。

その後、上記のHTMLソースをロードし、「DBオープン」ボタンをクリック後「データ削除」ボタンをクリックすると、キー範囲が '01' ～ '22' のデータが全て削除されていることが分かります（下図参照）。

■簡単な openCursor メソッドとカーソルオブジェクトの continue メソッドの利用

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  全データ取得処理
 */
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //カーソル開始
    var request = objectStore.openCursor();
    //カーソルで対応するデータが存在した場合の処理
    request.onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {
            console.log('データ:', cursor.value);
            //次のカーソルへ
            cursor.continue();
        } else {
            //これ以上のデータは存在しない
            console.log('データ終了');
        }
    };
    //カーソル取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - cursor - 1</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールに順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります（下図参照）。

上の例では openCursor メソッドの引数を指定していないので「オブジェクトストア」内の全データが返されます。

■openCursor メソッドにキー範囲とカーソル移動方向("next"：昇順)の指定

getAll メソッドの時と同様に openCursor メソッドにキー範囲指定、およびカーソル移動方向を昇順指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ～ '22' の範囲指定で、カーソル移動方向は 'next' を指定しています。 ('next' はデフォルトなので指定しなくても 'next' になります。)

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  全データ取得処理
 */
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //キーの範囲指定オブジェクト
    var query = IDBKeyRange.bound('01', '22');  //キー範囲:'01'～'22'
    //カーソル開始
    var request = objectStore.openCursor(query, 'next');    //キーの範囲指定、カーソル移動方向指定
    //カーソルで対応するデータが存在した場合の処理
    request.onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {
            console.log('データ:', cursor.value);
            //次のカーソルへ
            cursor.continue();
        } else {
            //これ以上のデータは存在しない
            console.log('データ終了');
        }
    };
    //カーソル取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - cursor - 2</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールににキーの昇順で順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります（下図参照）。

■openCursor メソッドにキー範囲とカーソル移動方向("prev"：降順)の指定

getAll メソッドの時と同様に openCursor メソッドにキー範囲指定、およびカーソル移動方向を降順指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ～ '22' の範囲指定で、カーソル移動方向は 'prev' を指定しています。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  全データ取得処理
 */
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //キーの範囲指定オブジェクト
    var query = IDBKeyRange.bound('01', '22');  //キー範囲:'01'～'22'
    //カーソル開始
    var request = objectStore.openCursor(query, 'prev');    //キーの範囲指定、カーソル移動方向指定
    //カーソルで対応するデータが存在した場合の処理
    request.onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {
            console.log('データ:', cursor.value);
            //次のカーソルへ
            cursor.continue();
        } else {
            //これ以上のデータは存在しない
            console.log('データ終了');
        }
    };
    //カーソル取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - cursor - 3</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにキーの降順で順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります（下図参照）。

■簡単な getAll メソッドの利用

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - allget - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  全データ取得処理
 */
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //全データ取得
    var request = objectStore.getAll();
    //取得が成功した場合の関数宣言
    request.onsuccess = function(event) {
        var result = event.target.result;   // データ配列が返る!!
        console.log('データ:', result);
    };
    //取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - allget - 1</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにArrayデータとしてレコードの内容が表示されるのが分かります（下図参照）。

上の例では getAll メソッドの引数を指定していないので「オブジェクトストア」内の全データが返されます。

■getAll メソッドにキー範囲とデータ件数の指定

そこで getAll メソッドにキー範囲とデータ件数の指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ～ '22' の範囲で、データ件数は4件を指定しています。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - allget - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  全データ取得処理
 */
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //キーの範囲指定オブジェクト
    var query = IDBKeyRange.bound('01', '22');  //キー範囲:'01'～'22'
    //データ取得
    var request = objectStore.getAll(query, 4); //キーの範囲指定、データ数４件
    //取得が成功した場合の関数宣言
    request.onsuccess = function(event) {
        var result = event.target.result;   // ４件のデータ配列が返る!!
        console.log('データ:', result);
    };
    //取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - allget - 2</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにArrayデータとして４件のレコードの内容が表示されるのが分かります（下図参照）。

■キーが存在しないキー範囲指定

ここでキー範囲指定オブジェクトで以下の様に、キーが存在しない設定にすると、結果として０件のデータ配列が返されますので、注意が必要です。

// [getAllData]関数のみ抜粋、その他は変更なし
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //キーの範囲指定オブジェクト
    var query = IDBKeyRange.bound('05', '07');  //キー範囲:'05'～'07'
    //データ取得
    var request = objectStore.getAll(query, 4); //キーの範囲指定、データ数４件
    //取得が成功した場合の関数宣言
    request.onsuccess = function(event) {
        var result = event.target.result;   // ０件のデータ配列が返る!!
        console.log('データ:', result);
    };
    //取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールに０件のArrayデータとして表示されるのが分かります（下図参照）。

■キー範囲 IDBKeyRange オブジェクト

IDBKeyRange オブジェクトにはキー範囲を生成する bound , lowerBound , upperBound , only のメソッドがあります。 IDBKeyRange.bound は抽出するキー範囲を指定し、IDBKeyRange.lowerBound は指定キーより大きいか、以上のものを対象とし、 IDBKeyRange.upperBound は指定キーより小さいか、以下のものを対象とします。
また、IDBKeyRange.only は指定キーそのものが対象となります。

コード	キー範囲	備考
IDBKeyRange.lowerBound(X)	[全キー]　≧　(X)	(X) 以上のキーが対象
IDBKeyRange.lowerBound(X, true)	[全キー]　＞　(X)	(X) より大きいキーが対象
IDBKeyRange.upperBound(Y)	[全キー]　≦　(Y)	(Y) 以下のキーが対象
IDBKeyRange.upperBound(Y, true)	[全キー]　＜　(Y)	(Y) より小さいキーが対象
IDBKeyRange.bound(X, Y)	(X)　≦　[全キー]　≦　(Y)	(X) 以上かつ (Y) 以下のキーが対象
IDBKeyRange.bound(X, Y, true, true)	(X)　＜　[全キー]　＜　(Y)	(X) より大きくかつ (Y) より小さいキーが対象
IDBKeyRange.bound(X, Y, true, false)	(X)　＜　[全キー]　≦　(Y)	(X) より大きくかつ (Y) 以下のキーが対象
IDBKeyRange.bound(X, Y, false, true)	(X)　≦　[全キー]　＜　(Y)	(X) 以上かつ (Y) より小さいキーが対象
IDBKeyRange.only(Z)	[キー]　＝　(Z)	キーが (Z) のものが対象

■その他注意点

今回の getAll メソッドは Internet Explorer では実装されていません。
Edge には実装されていますが Internet Explorer で全データの取得を行う場合は、カーソル処理で行う必要があります。 (2022年には IE のサポートを終了するというアナウンスが Microsoft からあったので、これからは IE をそこまで気にしなくても良くなりそうですが)

なお、カーソル処理については次の記事で紹介したいと思います。

VB.NET-TIPS などプログラミングについて

■fields プロパティのオブジェクト配列の内部プロパティについて

■入力フィールドの HTML と w2form オブジェクト宣言を分ける例

関連する記事

■jQuery ではなく javascript の addEventListener メソッドを使う方法

関連する記事

■簡単な delete メソッドの利用

■delete メソッドにキー範囲の指定

関連する記事

■簡単な openCursor メソッドとカーソルオブジェクトの continue メソッドの利用

■openCursor メソッドにキー範囲とカーソル移動方向("next"：昇順)の指定

■openCursor メソッドにキー範囲とカーソル移動方向("prev"：降順)の指定

関連する記事

■簡単な getAll メソッドの利用

■getAll メソッドにキー範囲とデータ件数の指定

■キーが存在しないキー範囲指定

■キー範囲 IDBKeyRange オブジェクト

■その他注意点

関連する記事