iPentec.com  /  Document  /  カテゴリ: JavaScript  /  タグ:  JavaScript Web SQL

目次

Web SQL を利用する

シンプルなデモを作成してWeb SQL を利用するコードを紹介します。
注意
WebSQLは非推奨となり、多くのWebブラウザでは機能が廃止されています。本記事で紹介しているコードも最新のWebブラウザでは動作しない場合があるためご注意下さい。
代替の実装
IndexedDB を利用すると同様の処理を実現できます。詳しくはこちらのページを参照してください。

概要

WebSQLを利用すると、Webブラウザ内でデータベースを利用でき、SQL文を利用したデータベースの操作ができます。この記事ではWebSQLを利用するコードを紹介します。

プログラム

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    var db;

    function OpenDatabase() {
      var dbsize = 1000;
      var dbname = "myDB";
      var dbversion = "1.0";
      var dbdescription = "Test Database"
      db = window.openDatabase(dbname, dbversion, dbdescription, dbsize);
      if (db == null) {
        alert("DBがnullです。");
      }
    }

    function DropTable() {
      db.transaction(
        function (transact) {
          transact.executeSql("DROP TABLE IF EXISTS product", [],
            function () { out("DROP TABLE SUCCESS"); },
            function () { out("DROP TABLE ERROR"); }
          );
        }
      );
    }

    function CreateTable() {
      db.transaction(
        function (transact) {
          transact.executeSql("CREATE TABLE product ( id, name, price )", [],
            function () { out("CREATE TABLE SUCCESS"); },
            function () { out("CREATE TABLE ERROR"); }
          );
        }
      );
    }

    function InsertRecord() {
      db.transaction(
        function (transact) {
          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['1', 'ぺんぎんクッキー', '280'],
            function () { out("Insert Record SUCCESS"); },
            function () { out("Insert Record ERROR"); }
          );

          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['2', 'しろくまアイス', '160'],
            function () { out("Insert Record SUCCESS"); },
            function () { out("Insert Record ERROR"); }
          );

          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['3', 'らくだキャラメル', '90'],
            function () { out("Insert Record SUCCESS"); },
            function () { out("Insert Record ERROR"); }
          );
        }
      );
    }

    function SelectRecord() {
      db.transaction(
        function (transact) {
          transact.executeSql("select * from product where id = ?", ['2'],
            function (rt, rs) {
              for (var i = 0; i < rs.rows.length; i++) {
                var row = rs.rows.item(i);
                result_out(row.id + ", " + row.name + ", " + row.price);
              }
            },
            function () { out("Insert Record ERROR"); }
          );
        }
      );
    }

    function result_out(message) {
      document.getElementById("result").innerHTML += message + "<br>";
    }

    function out(message) {
      document.getElementById("message").innerHTML += message + "<br>";
    }

  </script>
</head>
<body onload="">
  <a href="javascript:void(0);" onclick="OpenDatabase();">Open Databse</a><br />
  <a href="javascript:void(0);" onclick="DropTable();">Drop Table</a><br />
  <a href="javascript:void(0);" onclick="CreateTable();">Create Table</a><br />
  <a href="javascript:void(0);" onclick="InsertRecord();">Insert Record</a><br />
  <a href="javascript:void(0);" onclick="SelectRecord();">Select Record</a><br />

  <hr />
  <div id="result"></div>
  <hr />
  <div id="message"></div>
</body>
</html>

解説

データベースのオープン

WebSQLのデータベースを開く関数が下記です。データベースを開くにはopenDatabase() 関数を利用します。データベースが開けると、データベースオブジェクトが戻り値として返ります。以後のSQL実行などのデータベースの操作は、このデータベースオブジェクトを利用します。
openDatabase()メソッドの詳細はこちらの記事を参照してください。
    function OpenDatabase() {
      var dbsize = 1000;
      var dbname = "myDB";
      var dbversion = "1.0";
      var dbdescription = "Test Database"
      db = openDatabase(dbname, dbversion, dbdescription, dbsize);
      if (db == null) {
        alert("DBがnullです。");
      }
    }

openDatabse関数の書式は以下になります。
openDatabase(データベース名, データベースのバージョン, 説明, データベースのサイズ);

テーブルの作成

データベースにテーブルを作成するコードは下記です。SQL文のCREATE TABLEを実行してテーブルを作成します。CREATE TABLE のSQL文や書式についてはこちらの記事を参照して下さい。
    function CreateTable() {
      db.transaction(
        function (transact) {
          transact.executeSql("CREATE TABLE product ( id, name, price )", [],
            function () { out("CREATE TABLE SUCCESS"); },
            function () { out("CREATE TABLE ERROR"); }
          );
        }
      );
    }

Web SQL文を実行するには、データベースオブジェクトのtransactionメソッドを呼び出します。transactionメソッドの第一引数にトランザクションで実行する関数を与えます。上記のコードでは匿名関数を利用して引数中に関数の実装コードを記述しています。
トランザクション内の処理ではトランザクションオブジェクトの executeSql メソッドを呼び出してSQL文を実行します。executeSqlの書式は次の通りです。
(トランザクションオブジェクト).executeSql("実行するSQL文", [(パラメーター値)], 
  SQL文の実行に成功した場合のコールバック関数, SQL文の実行に失敗した場合のコールバック関数)
SQL文中のパラメーターのプレースホルダーは "?" 記号で表現します。

レコードの挿入

作成したテーブルにレコードを挿入します。レコードの挿入も一般的なSQL文が利用できるデータベースと同様に INSERT INTO文を利用してレコードを挿入します。INSERT INTO のSQL文や書式についてはこちらの記事を参照して下さい。
レコードを挿入するコードは下記です。
SQL文中に"?"のプレースホルダーがあり、第二引数の値が、順番に?の位置に設定されます。

下記のコードで実際に実行されるSQL文は 
  transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['1', 'ぺんぎんクッキー', '280'],null,null)

INSERT INTO product VALUES ( '1', 'ぺんぎんクッキー', '280' )
となります。
    function InsertRecord() {
      db.transaction(
        function (transact) {
          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['1', 'ぺんぎんクッキー', '280'],
            function () { out("Insert Record SUCCESS"); },
            function () { out("Insert Record ERROR"); }
          );

          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['2', 'しろくまアイス', '160'],
            function () { out("Insert Record SUCCESS"); },
            function () { out("Insert Record ERROR"); }
          );

          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['3', 'らくだキャラメル', '90'],
            function () { out("Insert Record SUCCESS"); },
            function () { out("Insert Record ERROR"); }
          );
        }
      );
    }

レコードの選択/検索

テーブルに挿入したレコードを選択する処理は下記のコードになります。
レコードの選択もSQL文が利用できるデータベースで利用されるSelect文を用います。Select文の書式についてはこちらの記事を参照して下さい。

    function SelectRecord() {
      db.transaction(
        function (transact) {
          transact.executeSql("select * from product where id = ?", ['2'],
            function (rt, rs) {
              for (var i = 0; i < rs.rows.length; i++) {
                var row = rs.rows.item(i);
                result_out(row.id + ", " + row.name + ", " + row.price);
              }
            },
            function () { out("Insert Record ERROR"); }
          );
        }
      );
    }

Select文が成功して、レコードが取得できた場合の処理は、executeSqlの第三引数の成功時のコールバック関数に記述します。
Select文の実行に成功した場合は下記のコードが実行されます。
関数中の rs.rows に検索結果がセットされています。検索結果の件数を取得する場合は rs.rows.length で取得できます。
下記のコードではforループで検索結果を一レコードずつ読み出し、値をカンマ区切りの文字列にして、result_out関数を呼び出しています。
  function (rt, rs) {
    for (var i = 0; i < rs.rows.length; i++) {
      var row = rs.rows.item(i);
      result_out(row.id + ", " + row.name + ", " + row.price);
    }
  }

result_out関数では、id="result" の値のタグに関数に与えられた、メッセージ文字列の内容を表示します。
    function result_out(message) {
      document.getElementById("result").innerHTML += message + "<br>";
    }

実行結果

著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2019-12-18

関連するページ

ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
iPentecについて
プライバシー
お問い合わせ
Copyright © iPentec all rights reserverd.