Web SQL データベースのテーブルを作成する

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

概要

Web SQLデータベースのテーブルを作成する場合は、CREATE TABLE コマンドを実行します。
CREATE TABLEコマンドについてはこちらの記事を参照してください。

プログラム例

コード

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

    function Proc() {
      var db = OpenMyDatabase();
      CreateTable(db);
    }

    function OpenMyDatabase() {
      var dbsize = 1000;
      var dbname = "myDB";
      var dbversion = "1.0";
      var dbdescription = "Test Database"
      var db = window.openDatabase(dbname, dbversion, dbdescription, dbsize);
      if (db == null) {
        alert("データベースが開けませんでした。");
      }
      return db;
    }

    function CreateTable(dbobj) {
      dbobj.transaction(
        function (transact) {
          transact.executeSql("CREATE TABLE product ( id, name, price )", [],
            function () { alert("CREATE TABLE SUCCESS"); },
            function () { alert("CREATE TABLE ERROR"); }
          );
        }
      );
    }
  </script>
</head>
<body>
  <p>テーブルの作成 テストページ</p>
  <a href="javascript:Proc();">CreateTable</a><br />
</body>
</html>

解説

SQLコマンドを実行するには、データベースオブジェクトの transaction() メソッドを実行します。
transaction メソッドに与えたコールバック関数でtransactionオブジェクトの executeSql() メソッドを実行します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。^ Web SQL データベースのテーブルを作成する:画像1

[CreateTable]リンクをクリックします。テーブルが作成され、[CREATE TABLE SUCCESS]のダイアログが表示されます。
Web SQL データベースのテーブルを作成する:画像2

なお、再度[CreateTable]リンクをクリックして、CREATE TABLEコマンドを実行すると、下図のエラーメッセージが表示されます。 すでにテーブルが作成されているためエラーが発生します。
Web SQL データベースのテーブルを作成する:画像3

AuthorPortraitAlt
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2021-05-15
Copyright © 1995–2025 iPentec all rights reserverd.