数日前より、Buddy新規お申込みページへのアクセス不具合が発生しております。

現在復旧作業を進めておりますが、復旧に多少日数がかかる見込みです。

つきましては誠にお手数ではございますが、当面の間の新規お申込みについては

お問合せフォームをご利用ください。

お問合せ本文に「Buddyご利用申込」の旨ご記入いただければ、

弊社担当者よりお申込み要件やプランに関するご案内をさせて頂きます。

本不具合にかかる事象が解消次第、ホームページにてお知らせいたします。

お客様におかれましては、ご不便ご迷惑をおかけすることお詫び申し上げます。

上記、どうぞよろしくお願いいたします。

Javascript言語は、もともとは各Webブラウザでの違いが大きかったのですが、現在では標準化が進んでいます。標準化された名称がECMAScriptです。その第6版が通称としてES6と呼ばれ、規格としての正式名称はECMAScript2015です。その後のさらに新しい規格としてECMAScript2017があります。これらの最近の規格では、Javascript言語の弱点を補う改良が施されているので、ぜひ活用したいものです。ここでは主な機能だけ紹介しますが、ECMAScript2015やECMAScript2017と検索していただくと解説しているサイトがいろいろ見つかると思います。

Buddyアプリのスクリーンスクリプトはブラウザ上で実行されるので、使える機能はそのブラウザのJavascript言語の実装に依存することになります。Edge、Chrome、Firefoxといったブラウザはみな最近のJavascriptの規格に対応していますが、IE（Internet Explorer）は基本的に対応していません。

しかし、IEでもES6の新しい機能を使えるようにするBabelという仕組みがあります。これはES6の文法で書かれたスクリプトを古いES5で実行できるスクリプトに変換してくれるものです。Buddyではアプリ生成の際のオプションでBabelを使用するように指定することができます。ただし、変換されたスクリプトが実行されることになるのでデバッグの際にブラウザでソースコードを見ると元のスクリプトとは異なることになって、わかりにくくなるという難点はあります。

ES6になれた方だとBuddyアプリの開発でも下記でご紹介するようなES6の機能を使ったスクリプトを自然に書いてしまう場合もあるでしょう。それをBabelを使用しないでアプリとして生成すると、Edge、Chrome、Firefoxでは問題ないが、IEでは動かないということになりますので注意が必要です。アプリ開発の一般的な注意事項ですが、そのアプリはどのブラウザで利用するのかをあらかじめきちんと決めておくこと、そして対象のブラウザでテストすることが重要です。IEを対象外とできる場合は、ES6をどんどん使うことができ、Babelを使用する必要もなくなります。

以上が今回の「プログラミングの罠」ですが、ES6の新しい機能が具体的にわからないとピンとこないかもしれません。Buddyのアプリ開発でもすぐに役立ちそうな点に絞っていくつかご紹介します。

letとconst

変数の定義は従来はvarで行いますが、varには、何度も同じ変数を定義できる、スクリプト全体から見える、という大きな弱点があります。

var a = 1;
if(true) {
	var a = 2;
}
console.log(a);

この場合、最初の var a と、ifの中の var a は同じ変数になり、最後のconsole.logは 2 と表示されることになります。変数の定義は、本来は一度だけ適切な場所で行われるべきもので、そうでない状況はバグの原因になります。しかしコピーアンドペーストで編集したりすると同じ名前の変数を二箇所以上で定義している状況が生まれることがあり、var ではこれがエラーにならないため、気づきにくいのです。

letはvarと同様に変数を定義しますが、指定の変数名が既存だとエラーになります。また、{ } の間であればその中に有効範囲が限定されます。

let a = 1;
if(true) {
	let a = 2;
}
console.log(a);

このように先ほどの var を let に返ると、このスクリプトはifの中の let a のところで「a はすでにあるよ」という意味のエラー二なります。

let a = 1;
if(true) {
	let b = 2;
}
a = b;
console.log(a);

こうすればletでのエラーは起こりませんが、a = b; のところで「bは未定義」という意味のエラーになります。let b はifの{ }の中にあるため、その中だけで有効な変数となり、外側で使おうとするとこうなるわけです。
var だとあるところで定義して使った変数が、無関係なところでも見えてしまってバグの原因になることがありますが、let ではそれが防げます。

const は let と同様ですが、定義した変数の値を変更することができないという違いがあります。

const c = 1;
c = 2;

これは c = 2; のところでエラーになります。変更されるべきでないものは const にしておくと安心です。

アロー関数

Javascriptでは無名関数をよく使います。代表的なものが非同期処理でのコールバックです。例えばBuddyではDBテーブルからデータを読み出すreadDataは次のようになります。

this.tables.table1.readData(options, function(err, data){
	…
});

この function(err, data){ … } が無名関数です（通常の関数定義であれば function の後の括弧の前にある関数名がありません）。readDataの処理が終わるとこの無名関数が呼ばれ、引数のerrやdataで結果を得ることができます。
これをES6のアロー関数で書くと次のようになります。function を省略して ) と { の間に => を書きます。

this.tables.table1.readData(options, (err, data) => {
	…
});

これだけだと、書き方が簡便になったくらいのことですが、従来の無名関数とはthisの扱いが異なります。従来の無名関数ではthisは関数を呼び出したオブジェクトですが、アロー関数では定義時のthisになります。
例えば上記の例で、得られたレコード数をLABEL1にセットして表示したい場合、従来の無名関数では、

this.tables.table1.readData(options, (function(err, data){
	this.items.LABEL1.setValue(data.length);
}).bind(this));

のように、bind(this) を付ける必要があります。しかしアロー関数では、

this.tables.table1.readData(options, (err, data) => {
	this.items.LABEL1.setValue(data.length);
});

と、bind(this)無しでOKで、非常にすっきりします。

テンプレート文字列

Javascriptでは文字列はシングルクォート「’」またはダブルクォート「”」で囲みます。ES6ではこれに加えてバッククォート「`」で囲むことができ、その場合は ${変数名} で変数の値を埋め込むことができます。また途中に改行を入れることもできます。

従来であれば、

const name = '名前';
const age = 25;
const s = "名前: " + name + "\n年齢: " + age + "\n";

と書くところを、

const name = '名前';
const age = 25;
const s = `名前: ${name}
年齢: ${age}
`;

と書くことができます。

いくつか限定してご紹介しましたが、ES6の新しい機能はこのほかにもたくさんありますので、検索して調べてみてください。

（2022/2/2 中島）

Buddyではアプリの動作のほとんどはスクリーンのスクリプトとしてJavascriptで記述します。しかし、いくつかのスクリーンあるいはアプリで共通する処理をライブラリファイル（拡張子が.jsのファイル）として独立させたい場合もあります。また、世の中には便利なJavascriptライブラリファイルがたくさん公開されていますので、そういったものを使いたい場合もあるでしょう。

Buddyでは、アプリの files/javascripts/ フォルダに.jsファイルを入れれば、アプリ起動時に読み込まれ、スクリーンのスクリプトで利用できるようになります。

※一つ注意すべき点として、Buddyアプリでは内部でReactというJavascriptライブラリを使用しているということがあります。ReactはDOM（ブラウザで表示されるHTMLの画面要素を表すオブジェクトモデル）を独自に管理してDOM書き換えのタイミングを適切に行うことでアプリの動作を軽くしてくれます。そのため、例えばjQueryのようなDOMを操作するライブラリはうまく動作しないことがあります。

さて、現在のBuddyが用意している、files/javascripts/ フォルダに.jsファイルを入れるという方法は、二つの弱点があります。
一つは読み込む順序を指定できないことです。複数の.jsファイルを入れた場合、どういう順序で読み込まれるかは内部的な状況により、ユーザーが指定することができません。ライブラリによっては読み込む順序が重要な場合があります。例えばキャンバスにグラフ表示をするChart.jsに機能を追加するプラグインは、まずChart.jsを読み込み、そのあとでプラグインの.jsファイルを読み込まなければならないものがあります。
もう一つは、URLで.jsファイルを指定することができないことです。広く使われているライブラリファイルを集めてそれぞれ所定のURLで利用できるようにしている便利なサービスがあります。例えばChart.jsであれば、https://cdn.jsdelivr.net/npm/chart.js@3.3.2 というURLでバージョン3.3.2を利用できます。（このURLは一例で、同様のサービスはほかにもあります。）こういうサービスを使うと、目的のライブラリファイルをダウンロードしてきてサーバーに配置するという手間がかかりません。しかし残念ながら現在のBuddyの files/javascripts/ フォルダに.jsファイルを入れるという方法では利用できません。

この問題を解決するライブラリファイルが jsloader.js です。← このファイル名部分をクリックしてダウンロードしてください。

jsloader.js は、上記でダウンロードしたファイルをそのまま使うのではなく、どういうライブラリファイルを読み込みたいかに応じて内容を編集してから使用します。jsloader.js の冒頭部分は次のようになっています。

// 読み込むjsファイルを置くディレクトリ
var JSLoaderDir = 'files/users/jsloader';
// 読み込むjsファイルのリスト（上記ディレクトリ内のファイル名、またはURL）
var JSLoaderList = [
'1.js',
'2.js',
'3.js',
];

この記述のままであれば、files/users/jsloader/ に入れた、1.js、2.js、3.js がこの順序で読み込まれることになります。JSLoaderDir に files/javascripts を指定してはいけないことに注意してください。

URLで指定する場合の例は次のようになります。Chart.jsとそのプラグイン、およびそれに必要なライブラリファイルを指定しています。この場合はURL指定しているので JSLoaderDir の指定は無意味ですが、あっても害はないのでそのままにしています。

// 読み込むjsファイルを置くディレクトリ
var JSLoaderDir = 'files/users/jsloader';
// 読み込むjsファイルのリスト（上記ディレクトリ内のファイル名、またはhttps:のURL）
var JSLoaderList = [
"https://cdn.jsdelivr.net/npm/chart.js@3.3.2",
"https://cdn.jsdelivr.net/npm/luxon@1.27.0",
"https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0",
"https://cdn.jsdelivr.net/npm/hammerjs@2.0.8",
"https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0",
"https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2",
"https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.1.1",
];

このように編集した jsloader.js を、アプリの files/javascripts/ フォルダに入れます。アプリの設計画面で「アプリメニュー」を選び、管理メニューから「ファイル管理」を選びます。開いたダイアログで、「javascripts」フォルダをクリックし、jsloader.js をドロップしてアップロードします。
そうすれば、jaloader.js 内で指定したライブラリファイルが指定した順で読み込まれて利用できます。

なお、将来のBuddyでは、このような補完テクニックを使わなくても順序やURLの指定ができるようになるかもしれません。

（2022/1/5 中島）