日本語プログラミング言語「なでしこ」は、バージョン3になってWebブラウザで動くようになりました。どういう仕組みかと言うと、なでしこのプログラムがJavaScriptに変換されて実行されるのです。ブラウザでなでしこを動かすことができるのでとても便利です。本稿では、JavaScriptの代わりになでしこを使う方法を紹介します。
HTMLになでしこのプログラムを埋め込んでみよう
それでは、HTMLでJavaScriptの代わりになでしこを使う方法を紹介します。
ここに書いた手順は、公式マニュアルのHTML埋め込みで紹介されているものなのですが、簡単に要約して紹介します。
まず、なでしこのエンジンとなるJavaScriptを読み込みます。
<html><meta charset="utf-8"><body>
<!-- なでしこエンジンの取り込み -->
<script defer src='https://nadesi.com/v3/cdn.php?v=3.1.7&f=release/wnako3.js&run'></script>
</body><html>
次に、なでしこのプログラムを<script type="なでしこ"> ... </script>のように書きます。
<html><meta charset="utf-8"><body>
<!-- なでしこのプログラムを記述 -->
<script type="なでしこ">
//
// ここになでしこのプログラム
//
「こんにちは」と言う。
</script>
<!-- なでしこエンジンの取り込み -->
<script defer src='https://nadesi.com/v3/cdn.php?v=3.1.7&f=release/wnako3.js&run'></script>
</body><html>
記述方法は、HTMLにJavaScriptを記述するのとほとんど同じで簡単です。
また、なでしこのエンジンは、v3.1.7では224KBです。JPEG画像一枚と同程度のサイズなので、ダウンロードに時間もほとんどかかりません！
BMI判定プログラムを作ってみよう
BMIというのは肥満度を判定する指標の一つです。
以下の計算式で求めることができます。
BMI = 体重 ÷ (身長 / 100) ^ 2
以下のように、身長と体重を指定すると、肥満度判定を行うプログラムを作ってみましょう！
さっそく、プログラムを紹介します。
<html><meta charset="utf-8"><body>
<!-- 画面をHTMLで作る -->
<div>
身長(cm):<br><input id="身長"><br>
体重(kg):<br><input id="体重"><br>
<button id="計算ボタン">計算</button><br>
<div id="結果"></div>
</div>
<!-- なでしこのプログラムを記述 -->
<script type="なでしこ">
// ここになでしこのプログラム
「#計算ボタン」をクリックした時には
# BMIの計算 --- (*1)
身長＝「#身長」からテキスト取得。
体重＝「#体重」からテキスト取得。
BMI=体重÷(身長/100)^2
# 肥満度判定 --- (*2)
結果＝「不明」
もし、BMI<18.5ならば
結果＝「痩せすぎ:{BMI}」
違えば、もし、BMI<25ならば
結果＝「普通:{BMI}」
違えば、もし、BMI<30ならば
結果＝「肥満(軽度:1度):{BMI}」
違えば、もし、BMI<40ならば
結果＝「肥満(中度:2度/3度):{BMI}」
違えば、
結果＝「肥満(重度:4度):{BMI}」
ここまで
# 結果を表示 --- (*3)
「#結果」に結果をテキスト設定。
ここまで。
</script>
<!-- なでしこエンジンの取り込み -->
<script defer src='https://nadesi.com/v3/cdn.php?v=3.1.7&f=release/wnako3.js&run'></script>
</body><html>
ポイントを確認してみましょう。
なでしこのプログラムが少し長いですが、主に、肥満度判定をしている部分です。
(*1)の部分に注目してみてください。
プログラムの冒頭で紹介した計算式そのままでBMIを求めることができています。「テキスト取得」命令を使うと、HTMLでidを付与した要素から値を取得できます。
そして、(*2)の部分を見てみると、もし・・・違えば、もし・・・違えば、もし・・・のようにして、順に条件を確認していきます。最後に、プログラムの(*3)では結果を
以下のように、体重を多めにしてみると肥満と判定します。
改めてプログラムを見てみると、なんだか日本語としても読めそうではないですか？
日本語プログラミング言語の素晴らしいところです。
変換されて実行？ それって遅くない？
ちなみに、「変換されて実行される」と言うと、とても遅くなる気がしますが、実際のところそれほど遅くありません。最近のJavaScriptはとても速いので気にするほどではありません。またプログラムを作った時に、変換後のJavaScriptのプログラムを保存することができるので、変換処理を気にする方は、変換後のプログラムだけを利用することもできます。
簡単にフィボナッチによるベンチマークで確かめてみましょう。プログラミング言語ごとにかかった時間を計測したものです。
| 言語 | かかった時間 |
|---|---|
| JavaScript(Node.js v13.10.1) | 0.072s |
| なでしこ v3.1.7 | 0.458s |
| Perl v5.18.4 | 0.523s |
| Python v3.7.4 | 0.413s |
もちろん、JavaScriptの方が速いわけですが、それでもPerlよりも速く実行できています。いやはやフィボナッチを使った実行で言うと、JavaScriptがダントツで速いですね。
それにしても、BMI判定のプログラムなど実行してみると分かりますが、よっぽど複雑な計算式を指定しても、遅いと感じることはないでしょう。
検証に使ったプログラム
function fib(n) {
if (n < 2) return n
return fib(n-1) + fib(n-2)
}
let a = fib(30)
console.log(a)
●FIB(Nの)
もし、N<2ならばNで戻る。
((N-1)のFIB)+((N-2)のFIB)で戻る。
ここまで。
A=(30のFIB)
Aを表示。
まとめ
以上、ここではHTMLに「なでしこ」のプログラムを埋め込んで実行する方法を紹介しました。
とても手軽に使えるので、皆さんも使ってみてください。
なお、JavaScriptのライブラリを取り込んで実行する形ですが、なでしこのエンジンはオープンソースでライセンスも非常に緩い「MITライセンス」なので、気軽にwnako3.jsを自分のWebサイトに配置してお使いいただけます。また、ここで紹介しているようにCDN(コンテンツ配信ネットワーク)を利用して、リンクするだけでも動かすことができます。
もっとなでしこが知りたいという方は、なでしこのWebサイトをご覧ください！