p5.js Web Editor上で AlaSQL を動かしてみる

Posted at 2024-05-13

以下の記事の続きで、引き続き「AlaSQL」を扱ってみます。

●ブラウザ上で AlaSQL を利用するための下調べ（簡単なメモ） - Qiita
　https://qiita.com/youtoy/items/f36138ddcb2e696dc5db

今回は、p5.js Web Editor上で AlaSQL を使った簡単な処理を動かしてみようと思います。

元にするサンプル

今回、元にする内容は以下の公式サイトに掲載されているサンプルです。

p5.js Web Editor上で AlaSQL を使う

早速、p5.js Web Editor上で動かしてみます。

ライブラリは、CDN から読みこむこととします。今回は、以下を使います。

●alasql - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
　https://cdnjs.com/libraries/alasql

p5.js Web Editor上では、このライブラリの読み込みを index.html で行います（※ 以下を追記します）。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/4.3.3/alasql.min.js"></script>

あとは、p5.js Web Editor上の sketch.js に、JavaScript のプログラムを書いていきます。

今回はシンプルに、以下の内容としました。

function setup() {
  createCanvas(400, 400);
  background(220);

  alasql("CREATE TABLE test (language INT, hello STRING)");
  alasql("INSERT INTO test VALUES (1,'Hello!')");
  alasql("INSERT INTO test VALUES (2,'Aloha!')");
  alasql("INSERT INTO test VALUES (3,'Bonjour!')");

  const result1 = alasql("SELECT * FROM test WHERE language > 1");

  const result2 = alasql("SELECT * FROM test");

  console.log(result1);
  console.log(result2);
}

これを動かした際の出力は、以下のとおりです。無事、意図した出力が得られているのが分かります。

公式の Wiki の関連ページを見てみる

最後に、上記のプログラムで使った処理について、公式の Wiki の掲載ページがどこかを見てみることにします。

今回の内容だと、Wiki の中で、さらに以下などを見ていくと良さそうでした。

●sql · AlaSQL/alasql Wiki
　https://github.com/AlaSQL/alasql/wiki/Sql

以下に、具体的なページのリンクのみ羅列していきます。

その他

その他、以下なども気になったので、引き続き内容を追いかけて行こうと思っています。

●Data manipulation · AlaSQL/alasql Wiki
　https://github.com/AlaSQL/alasql/wiki/Data-manipulation

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up