日本語プログラミング言語「なでしこ」は、バージョン3になってWebブラウザで動くようになりました。どういう仕組みかと言うと、なでしこのプログラムがJavaScriptに変換されて実行されるのです。ブラウザでなでしこを動かすことができるのでとても便利です。本稿では、JavaScriptの代わりになでしこを使う方法を紹介します。

HTMLになでしこのプログラムを埋め込んでみよう

それでは、HTMLでJavaScriptの代わりになでしこを使う方法を紹介します。

ここに書いた手順は、公式マニュアルのHTML埋め込みで紹介されているものなのですが、簡単に要約して紹介します。

まず、なでしこのエンジンとなるJavaScriptを読み込みます。

sample-準備.html

<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>のように書きます。

sample-hello.html

<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

以下のように、身長と体重を指定すると、肥満度判定を行うプログラムを作ってみましょう！

さっそく、プログラムを紹介します。

bmi.html

<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判定のプログラムなど実行してみると分かりますが、よっぽど複雑な計算式を指定しても、遅いと感じることはないでしょう。

検証に使ったプログラム

fib.js

function fib(n) {
  if (n < 2) return n
  return fib(n-1) + fib(n-2)
}
let a = fib(30)
console.log(a)

fib.nako3

●FIB(Nの)
　　もし、N<2ならばNで戻る。
　　((N-1)のFIB)+((N-2)のFIB)で戻る。
ここまで。
A=(30のFIB)
Aを表示。

まとめ

以上、ここではHTMLに「なでしこ」のプログラムを埋め込んで実行する方法を紹介しました。
とても手軽に使えるので、皆さんも使ってみてください。

なお、JavaScriptのライブラリを取り込んで実行する形ですが、なでしこのエンジンはオープンソースでライセンスも非常に緩い「MITライセンス」なので、気軽にwnako3.jsを自分のWebサイトに配置してお使いいただけます。また、ここで紹介しているようにCDN(コンテンツ配信ネットワーク)を利用して、リンクするだけでも動かすことができます。

もっとなでしこが知りたいという方は、なでしこのWebサイトをご覧ください！

JavaScriptの代わりになでしこを使ってみよう

HTMLになでしこのプログラムを埋め込んでみよう

BMI判定プログラムを作ってみよう

変換されて実行？ それって遅くない？

検証に使ったプログラム

まとめ

変換されて実行？それって遅くない？