インターネットブラウザで利用するJavascript言語の最大のボトルネックは、ファイルやデータの読み書きです。
Nodejsを使ったサーバーサイドJavascriptはファイルの読み書きから、色々なサーバーサイド処理が行なえますが、
インターネットブラウザ側（いわゆるブラウザサイド）で実行されるJavascriptは、別のファイルをプログラムで読み込むのも一苦労です。
逆に考えると、ファイルを自由に読み書きできれば、webサイトを使ったシステム構築などがはかどるという事なんですね。
サーバーへのファイル書き込み処理はPHPやRuby、PythonなどのCGIアプリが必要なのでここでは読み込み方法のAjaxについて記述します。
カンタンAjax処理
もちろん、jQueryや他にも色々なライブラリを使って簡単に書いてもいいんですが、下記のように書くとライブラリなど無くても簡単にファイルが読み込めます。
読み込みデータサンプル
a,1,100
b,2,200
c,3,300
基本形
const path = 'test.csv'
var req = new XMLHttpRequest()
req.open("get", path, true)
req.onload = loaded
req.send(null)
function loaded(e){
console.log(e.target.response)
}
ajax.jsをHTMLファイル内のscriptタグで読み込むと、test.csvの中身がコンソール画面に表示されます。
インスタンス形
基本形では、複数のファイル読み込みをした場合にコンフリクトを起こす可能性があります。
そこで、処理をインスタンス化して、データを閉じ込めてみます。。
function load(path){
var req = new XMLHttpRequest()
req.open("get", path, true)
req.onload = this.loaded
req.send(null)
}
load.prototype.loaded = function(e){
console.log(e.target.response)
}
new load('test.csv')
Javascriptでインスタンスのthisに埋め込むには、prototype内にfunction関数を埋め込めば良いんですね。
無名関数形
上記の２つはloadという関数がグローバル関数としてセットされますが、これをグローバルを汚さないように書きたければ次のようにします。
((path)=>{
function load(path){
var req = new XMLHttpRequest()
req.open("get", path, true)
req.onload = loaded
req.send(null)
}
function loaded(e){
console.log(e.target.response)
}
load(path)
})('test.csv')
console.log(typeof load)
前回までと同じ結果ですが、最後の行のload関数がundefinedになっていて、グローバルにはセットされていない状態であることが確認できました。
((送られた値)=>{...})(送りたい値)
この無名関数の書き方をマスターできれば、その中で使われる関数や変数はすべて、その中のみでの有効な状態にすることができて、無害プログラムが構築できます。
ちなみに、上記２つのパターンでtypeof loadとすると、"function"という値が返ってきます。
無名関数のもっと簡潔形
((path)=>{
const req = new XMLHttpRequest()
req.open("get", path, true)
req.onload = function(e){
console.log(e.target.response)
}
req.send(null)
})('test.csv')
だいぶ短くなりましたね。
読み込み語の処理を別の関数につなげたい場合は、onloadの箇所をつなげたい関数名にすればいいので、この書き方に慣れたほうがいいかもです。
ちなみに、pathをurlにしたら、apiサーバーなどから値を取得刷ることができます。
独自にapiサーバーを立てて、データベース読み込み処理などを書くと、いい感じのJavascriptでDatabaseを読み書きできるシステム環境が作れそうですね。
あとがき
今回のブログは、Ajaxって簡単に書けるという処理を理解してもらうと同時に、
Javascriptの書き方には複数パターンがあることを理解してもらえたら、このブログを書いた甲斐があったという事です。
Javascriptをゼロベースから書くのが苦手なフロントエンジニアの人に読んで理解してもらえると幸いです。
0 件のコメント:
コメントを投稿