Edited at
vte.cxDay 21

【vte.cx応用】20.サーバーサイドJavascriptについて

More than 3 years have passed since last update.

今回はサーバーサイドjavascriptの書き方、実行の仕方について説明します。

サーバサイドのJavaScriptは特別なビルドを必要としません。

単に/app/serverフォルダにjavascriptのソースを配置するだけで使えるようになります。

サーバーサイドjavascriptを書く際は必ず「module.exports」の中にソースを記述してください。

module.exports = function () {

// ソースを書く

};


サーバーサイドjavascriptのサンプルソース


sample.js

module.exports = function () {

var res = {'feed': {'entry': [{'title': 'test'}]}};
ReflexContext.doResponse(res);
};

まずこのようなサーバーサイドjavascriptを用意しました。

これにクライアント側からアクセスするには以下のようにします。


サーバーサイドjavascriptへのアクセス方法


画面側の呼び出し

$.ajax({

url: '/s/sample',
method: 'get'
}).done(function(res) {

console.log('返り値: ' res.feed.entry[0].title);

}).fail(function( jqXHR, textStatus, errorThrown ) {
alert('アクセス失敗');
});


こうするとconsole.logには以下の値が返却されます。

   返り値: test


URLは「/s」から開始する

通常、vte.cxではリソースデータへアクセスする場合は、「/d/◯◯」のように始まりますが、サーバーサイドjavascriptの場合は「/s」 から開始します。


アクセス先はサーバーサイドjavascriptのファイル名を指定する

サーバーサイドjavascriptで「sample.js」を用意した場合、アクセス先は以下のようになります。

   /s/sample

同じように「hoge.js」を用意した場合は

    /s/hoge

となります。


生のjavascriptなら何でも記述できます

サーバーサイドjavascriptはその名の通り、javascriptによって処理させることができます。

例えば以下のようなjavascriptも動かすことができます。

module.exports = function () {

var res = [];
for (var i = 0, ii = 5; i < ii; ++i) {
res.push('test' + i);
}
return res;
};

こうすると以下のようなデータが取得できます。

    ['test0', 'test1', 'test2', 'test3', 'test4']


function関数も記述できます

function関数も使用することができます。

module.exports = function () {

var res = getResData();
return res;
};

function getResData() {
var array = [];
for (var i = 0, ii = 5; i < ii; ++i) {
array.push('test' + i);
}
return array;
}


ReflexContext.httpmethod()でhttpのメソッド名を取得する

例えば以下のようなサーバーサイドjavascriptを用意することで、GETの場合にする処理と、POSTの場合にする処理を分けることができます。

module.exports = function () {

var method = ReflexContext.httpmethod();
var res;

if (method === 'GET') {

// GETリクエストが送信されてきた場合

} else if (method === 'POST') {

// POSTリクエストが送信されてきた場合

} else if (method === 'PUT') {

// PUTリクエストが送信されてきた場合

} else if (method === 'DELETE') {

// DELETEリクエストが送信されてきた場合

}
return res;
};


ReflexContext.getRequest()でリクエストデータを取得する

クライアントから送信されたデータを取得することができます。


画面側の呼び出し

$.ajax({

url: '/s/sample',
method: 'post',
dataType: 'json',
data: '{feed: {entry : [{title: '送信テスト', subtitle: null }]}}'
}).done(function(res) {

console.log('返り値: ' res.feed.entry[0].subtitle);

}).fail(function( jqXHR, textStatus, errorThrown ) {
alert('アクセス失敗');
});



sample.js

module.exports = function () {

var request_data = ReflexContext.getRequest();

if (request_data.feed.entry[0].title === '送信テスト') {

request_data.feed.entry[0].subtitle = '受信し加工しました';

}

ReflexContext.doResponse(request_data);

};


console.logには以下の値が返却されます。

   返り値: 受信し加工しました


リソースデータにアクセスする

ReflexContext.getEntry(url)やReflexContext.getFeed(url)を使い、

サーバに登録してあるリソースデータにアクセスできます。

module.exports = function () {

// hoge自身のデータを取得する
var entry_data = ReflexContext.getEntry('/hoge');

// hoge配下のデータ一覧を取得する
var feed_data = ReflexContext.getFeed('/hoge');

};


他にも様々なメソッドを用意しています。

サーバーサイドjavascriptのメソッドは上記以外にも様々なメソッドがあります。

詳しくは仕様書をご覧ください。


サーバーサイドjavascriptのソースの置き場所

サーバーサイドjavascriptのソースはvtecxblankプロジェクトの以下の場所に配置してください。


ファイルの置き場所

   /app/server

sample.js
hoge.js


サーバーサイドjavascriptを実行する際は必ずデプロイしてください

サーバーサイドjavascriptを書き、上記の「/server」フォルダにソースを置いたら、

必ず一度デプロイしてコンテンツをサーバに保存してください。

そうすることでサーバーサイドjavascriptにアクセスできるようになります。

サーバーサイドjavascriptの動作チェックの流れは以下のようになります。


  1. 「◯◯.js」(サーバーサイドjavascript)を「/server」に保存する

  2. デプロイを実行する

  3. 「/s/◯◯」にアクセスし、動作チェックを行う

  4. 「◯◯.js」を修正する

  5. デプロイを実行する

  6. 「/s/◯◯」にアクセスし、動作チェックを行う

あとは4〜6の繰り返し

少し面倒ですが、動作チェックをする際はデプロイを忘れないようにお願い致します。

以上でサーバーサイドjavascriptの説明を終わります。