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

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


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

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

ここに書いた手順は、[公式マニュアルのHTML埋め込み](https://nadesi.com/doc3/go.php?22)で紹介されているものなのですが、簡単に要約して紹介します。

まず、なでしこのエンジンとなる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
```

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

![肥満度判定1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33180/366301ca-c7ca-f1df-a480-3594ecfdf62b.png)

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

```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を求めることができています。「[テキスト取得](https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E5%8F%96%E5%BE%97)」命令を使うと、HTMLでidを付与した要素から値を取得できます。

そして、(*2)の部分を見てみると、もし・・・違えば、もし・・・違えば、もし・・・のようにして、順に条件を確認していきます。最後に、プログラムの(*3)では結果を<div id="結果">の要素に設定します。

以下のように、体重を多めにしてみると肥満と判定します。

![肥満度判定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33180/82f16b13-867e-e342-1636-663017a5634e.png)

改めてプログラムを見てみると、なんだか日本語としても読めそうではないですか？
日本語プログラミング言語の素晴らしいところです。



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

ちなみに、「変換されて実行される」と言うと、とても遅くなる気がしますが、実際のところそれほど遅くありません。最近の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サイト](https://nadesi.com)をご覧ください！