jQueryでAjaxを扱う
前提
- Google Chromeでしか検証していません
Ajaxを使うメリット
非同期通信ができることです。 具体例を挙げると
- ユーザのストレスを軽減できる
- サーバへの負荷を軽減できる
というメリットがあります。もちろんデメリットもありますが、ほかのサイトでいろいろ考察されているので、 ここでは流します。
いろいろ書き方があるみたいだけど
ajaxで検索すると、結構いろんな書き方が紹介されています。
$.ajax({ url: "test.html", success: function(data) { console.log("success"); }, error: function(data) { console.log("error"); } });
$.ajax({ url: "test.html", }).success(function(data) { console.log("success"); }).error(function(data) { console.log("error"); });
調べてみると上記2つの書き方は旧式の書き方のようです。
今回は下の書き方で統一します。
$.ajax({ url: "test.html", }).done(function(data) { console.log("success"); }).fail(function(data) { console.log("error"); });
これがベストプラクティス、というわけではないようですが、今回はとりあえずこの記述法で 実装します。
サンプルコード
AjaxでCSV、JSON形式のデータを取得し、出力するというサンプルをつくってみたいと思います。 HTMLファイルにjavascriptの関数が入っていたりするので、よかったらリファクタリングにも挑戦してみてくださいね。(人任せ)
1.index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="script.js"></script> </head> <body> <input type="button" onClick="output(0)" value="output_data0"> <input type="button" onClick="output(1)" value="output_data1"> <input type="button" onClick="output_json()" value="output_data_json"> <div id="output_zone"></div> </body> </html>
2.script.js
function output(num) { clear(); $.ajax({ url: "data" + num + ".csv" }).done(function(result) { var tmp_ary = result.split("\n"); // console.log(tmp_ary); for (var i = 0; i < tmp_ary.length; i++) { $("#output_zone").append(tmp_ary[i]).append("<br>"); } }).fail(function(data) { console.log(data); }); } function output_json() { clear(); $.getJSON("data.json", function(json) { for (var i = 0; i < json.student.length; i++) { var student = json.student[i]; $("#output_zone").append(student.name + " : " + student.age).append("<br>"); } }); } function clear() { $("#output_zone").empty(); }
3.data0.csv
Takeda,20 Sakurai,45 Hashimoto,36
4.data1.csv
Takeda Yuri, woman Sakurai Kaoru, woman Hashimoto Takuya, man
5.data.json
{"student" : [ { "name" : "Takeda", "age" : 20 }, { "name" : "Sakurai", "age" : 45 }, { "name" : "Hashimoto", "age" : 36 } ]}
HTMLファイルであるindex.html
を、ブラウザにドラッグアンドドロップとかしても動きません。これはクロスドメイン制約があるためです。
ドキュメントルートに設置するか、PHPのビルトインサーバを立てるかして、http://localhost/hogehoge/~
というような感じでアクセスしましょう。
左のボタンを押せばdata0.csv
の情報が、中央のボタンを押せばdata1.csv
の情報が出力されるはずです。
そして、右のボタンを押せばJSON形式であるdata.json
が出力されます。
Node.jsでいろんな形式のデータを扱う
注意事項
以下のファイルの文字コードはすべてUTF-8で実装しているので、Windows環境などでは、日本語が 文字化けする可能性があります。それらを踏まえた上で、テスト用のテキストなどに日本語 を使うことは避けていますが、やはり、環境によっては上手くいかないことがあることを ご理解ください。
対象となるデータ形式
1. JSON
javaScriptrといえばJSONですね。
下のようなdata.json
を用意しました。
{ "title" : "-- programming --", "languages" : [ {"id":1000, "name":"Java"}, {"id":1001, "name":"Ruby"}, {"id":1002, "name":"PHP"}, {"id":1003, "name":"Python"}, {"id":1004, "name":"JavaScript"} ] }
そして、こちらが上のJSONファイルを読み込んだり、パースしたりする
json_read.js
です。
var fs = require('fs'); var json_data = fs.readFileSync("data.json", "utf-8"); var obj = JSON.parse(json_data); console.log(obj.title); for (var i in obj.languages) { console.log(obj.languages[i].name); }
node json_read.js
で実行すると、プログラミング言語がずらっと表示されるはずです。
非常に簡単ですね。
javaScriptのオブジェクトをJSONのデータに変換するには
var json_data = JSON.Stringify(obj);
とします。JSON.parse(json_data);
と対になっていると考えると理解しやすいです。
2. XML / RSS
node.jsでXMLを扱うには、xml2js
やcheerio
というモジュールを使います。
ここでは、jQueryライクにDOMへアクセスできるcheerio
の方を使います。
cheerio
は
npm install cheerio
でインストールすることができます。
XMLは、data.xml
というファイルを用意しました。
<item> <name>pen</name> <price>120</price> </item> <item> <name>note</name> <price>150</price> </item> <item> <name>book</name> <price>540</price> </item>
これを扱うファイルをxml_read.js
として作成します。
var fs = require('fs'), che = require('cheerio'); var xml_data = fs.readFileSync("data.xml", "utf-8"); $ = che.load(xml_data); $("item").each(function(i, el) { var name = $(this).children("name").text(); var price = $(this).children("price").text(); console.log(name + " : " + price); });
node xml_read.js
と実行すると、モノと、その値段が表示されるはずです。
直観的にわかるかもしれませんが、cheerio
モジュールのload()
でXMLファイルをパースしたものが、
$
に入っています。そのあとは、jQueryのような構文で各要素の中身を取得していく感じになります。
3. CSV
node.jsでCSV形式のファイルを扱うにはcomma-separated-values
というモジュールが要ります。
npm install comma-separated-values
でインストールできます。
以下はdata.csv
になります。
ID, Name, Birthday 1000, Alice, 19990201 1001, Bell, 20010609 1002, Clara, 20001230
CSVファイルを扱うファイルが以下のcsv_read.js
です。
var fs = require('fs'), CSV = require('comma-separated-values'); var csv_data = fs.readFileSync("data.csv", "utf-8"); var data = new CSV(csv_data, {header:false}); var rec = data.parse(); for (var i = 0; i < rec.length; i++) { console.log(rec[i][0] + " : " + rec[i][1]); }
node csv_read.js
で実行すると、IDと名前が表示されます。
1行目のヘッダ部分がいらない、という場合には、パース直後に、
rec.shift();
と書けば、配列の先頭要素が削除されるので上手い具合になります。
まとめ
どのファイル形式を扱うにしても
- モジュールを読み込む
- fsのreadFileSync()を使ってデータを読み込む
- 読み込んだモジュールを使ってデータをパースする
- パースしたデータから必要な部分を取得したり、出力したりする
といった大まかな流れは変わりません。
また、基本的にnode.jsには便利なモジュールが多く、それらはほとんどnpm
で取得できます。なにか行いたい
場合、先に使えそうなモジュールがないか調べるのも手であることを覚えておきましょう。
参考
Node.jsでSQLite3を使ってみる
環境
- Ubuntu16.04
- Node.js v7.7.1
- npm 4.1.2
SQLite3をnpmでインストール
node.jsはサーバサイドでjavascriptを扱えるようにしたもの。当然、データベースも扱うことが
できます。
今回はSQLiteというデータベースを使ってみます。ほかの選択肢としてはmongoDBなんかがあるみたいですね。
SQLiteはnpmを使ってインストールすることができます。
npm install sqlite3
実行時のディレクトリにnode_modules
というディレクトリができて、さらになかにsqlite3
というディレクトリ
が入ったはずです。
データを挿入する
SQLiteを直接立ち上げて、コマンドでテーブル定義などを行っても良いですが、今回は
sqlite-insert.js
というスクリプトファイルを作成し、それを実行する過程でテーブル
定義などを行いつつ、データも挿入することにします。
var sqlite = require('sqlite3').verbose(); var db = new sqlite.Database('test.sqlite'); db.serialize(function() { // テーブルがなければ作成 db.run('CREATE TABLE IF NOT EXISTS students(name TEXT, age INT)'); // プリペアードステートメントでデータ挿入 var stmt = db.prepare('INSERT INTO students VALUES(?,?)'); stmt.run(["Tanaka", 12]); stmt.run(["Sato", 13]); stmt.run(["Nakamura", 15]); stmt.finalize(); }); db.close();
studentsテーブルは名前と年齢を管理するテーブルです。本当はIDなんかをつけた方が
良いのですが、今回はテストなので省略します。
実行はnode sqlite-insert.js
でできます。
プリペアードステートメントについては、以前MySQLで書いた記事があるので、そちらを参考にしてみてください。
データを取得する
つづいて、データベースからデータを取得するスクリプトを書いてみます。
ファイル名はsqlite-fetch.js
とでもしておきましょう。
var sqlite = require('sqlite3').verbose(); var db = new sqlite.Database('test.sqlite'); db.serialize(function() { db.each("SELECT * FROM students", function(err, row) { console.log(row.name + ":" + row.age); }); }); db.close();
node sqlite-fetch.js
で実行します。
見ての通り、ターミナルにデータを表示するだけです。取得の際コールバック関数を
使っているのがnodeっぽいですよね。
いつのまにかtest.sqlite
というファイルができているかと思いますが、そこに挿入した
データが入っています。