日本語プログラミング言語「なでしこ」でグラフを表示してみる

ITのニュースサイトを見ている方はご存知の方も多いと思いますが、
日本語プログラミング言語「なでしこ」が2021年度の中学校の教科書で採用されました。

ということで、今回は「なでしこ」というプログラミング言語を利用して
コーディングをしていきましょう。

日本語で書けるプログラミング言語「なでしこ」とは？

日本語プログラミング言語「なでしこ」の大きな特徴は
「日本語でプログラミングができる」という点です。

一般的に、プログラミングは英単語、数字、記号でパソコンへの命令文を記述していきますが
「なでしこ」は日本語でパソコンへの命令を記述することができます。

例えば “こんにちは”と表示するプログラムは、python言語で次のように表すことができます。

print(“こんにちは”)

1	print(“こんにちは”)

これを「なでしこ」で記述するとこうなります。

「こんにちは」と表示

1	「こんにちは」と表示

完全に日本語です！
下記のリンク先から「なでしこ」を実行することができるので
実際にプログラムを入力して試してみてください。
https://eznavi.net/nade3/index.php

実行結果

このように、日本語でコードが記述できるため
英語が苦手な方でもプログラムの処理内容が
理解しやすいというメリットがあります。
次は「なでしこ」の基本構文をみていきましょう。

「なでしこ」は3つのパターンで変数が作れる!?

日本語は曖昧な言葉といわれますが、「なでしこ」でもその片鱗が見られます。
通常、プログラミングで変数を作成する場合はイコールを利用します。

something = 10

1	something = 10

一方「なでしこ」では下記の3つの方法で変数を
作成することができます。

#パターン1
リンゴ値段＝300
#パターン2
リンゴ値段は300
#パターン3
リンゴ値段に3000を代入。

#パターン1

リンゴ値段＝300

#パターン2

リンゴ値段は300

#パターン3

リンゴ値段に3000を代入。

この3つ書き方は全て同じ意味で[リンゴの値段]という変数に[300]を設定しています。
同じ結果なのに複数の書き方があるのは不思議な感じがしますね！

日本語プログラミング言語「なでしこ」の繰り返しは「回」を利用する！

次は「なでしこ」の繰り返し処理を見てみましょう。
繰り返し処理も日本語なので簡単です。
単純に何回処理をしたいか書くだけでOKです。

例えば「おはよう」を3回表示するプログラムは次のように書くことができます。

3回「おはよう」と表示。

1	3回「おはよう」と表示。

実際に実行するとつぎのようになります。

ここまでは簡単です。
次は回数を決めた繰り返しではなく、
「ある条件の場合は繰り返す」
という処理を書いてみましょう。
次のプログラムをみてください。

数=1
(数≦3)の間
「おはよう」と表示。
数=数+1
ここまで。

数=1

(数≦3)の間

「おはよう」と表示。

数=数+1

ここまで。

ちょっと分かりにくいのですが、プログラムの流れは次の通りです。

「数」という変数に1を保存します。
現在「数」は1で3以下なので「おはよう」と表示します。
「数」を今の「数」プラス1します。（「数」を1増やす )
現在「数」は2で3以下なので「おはよう」と表示します。
「数」を今の「数」プラス1します。（「数」を1増やす )
現在「数」は3で3以下なので「おはよう」と表示します。
「数」を今の「数」プラス1します。（「数」を1増やす )
現在「数」は4で3以下ではないので「おはよう」と表示しません。

実際にプログラムを入力して確認してみましょう。

実行結果

その他のコーディングの記述につきましては、公式サイトのマニュアルで確認してみてください。
ここからは、「なでしこ」を利用して簡単なプログラムを作成してみましょう。

日本語プログラミング言語「なでしこ」で掛け算九九を表示する

まずは簡単なプログラムとして、「なでしこ」で掛け算九九を表示してみます。
プログラムは下記の通りです。

段を1から9まで繰り返す
　　数を1から9まで繰り返す
　　　　「{段}x{数}={段×数}」を表示

段を1から9まで繰り返す

　　数を1から9まで繰り返す

　　　　「{段}x{数}={段×数}」を表示

九九の「段」は9まであるので9回繰り返し、
各段には9の「数」があるため、再び9で繰り返しています。
そして繰り返しのなかで段と数字を掛けたものを表示しています。
実行すると次のような九九表が表示されます。

日本語プログラミング言語「なでしこ」で二次関数を表示する

中学校数学といえば二次関数と言うことで「なでしこ」を利用して二次関数のグラフを記述してみます。
なでしこはjavascript(ジャバスクリプト)のcanvas(キャンバス)という描画の機能を利用することができます。
この機能を利用して二次関数のグラフを書いてみます。
機能の詳細は、「なでしこ」の「plugin_browser/描画」を参照してください。
ここからいよいよグラフを書いていきますが、注意するべき点があります。
グラフを書く場合は原点(0,0)を中心として書いていきますが
canvasの座標は左上が原点(0,0)となり、右にいくほとxの値が増加し、
下にいくほどyが増加する仕様となります。
縦横500pxのcanvasを図示すると次のようになります。

このcanvasにグラフを表示するため、縦(x=250)、横(y=250)の交わる点を原点としてグラフを記述していきます。
つまりcanvasの中心(250,250)を原点とします。

上記を踏まえて二次関数を表示するプログラムを作成すると
次のようになります。

赤色に塗り色設定。
1に線太さ設定。
#キャンバスの設定
幅は500
高さは500

#原点を設定
原点Xは幅÷2
原点Yは高さ÷2

#y=0, x=0の地点に線を引く
[原点X-250, 原点Y]から[原点X+250, 原点Y]まで線描画。
[原点X, 原点Y-250]から[原点X, 原点Y+250]まで線描画。

#y=0, x=0の地点にラベルを追加
[幅, 原点Y-10]に「X」を文字描画。 [原点X-10, 10]に「Y」を文字描画。

#グラフを表示する範囲
X=-18
(X≦18)の間

#表示する関数
YはX × X

#×10は幅調整
[原点X+X×10, 原点Y-Y,1]に１の円描画。
X=X+0.01
ここまで。

赤色に塗り色設定。

1に線太さ設定。

#キャンバスの設定

幅は500

高さは500

#原点を設定

原点Xは幅÷2

原点Yは高さ÷2

#y=0, x=0の地点に線を引く

[原点X-250, 原点Y]から[原点X+250, 原点Y]まで線描画。

[原点X, 原点Y-250]から[原点X, 原点Y+250]まで線描画。

#y=0, x=0の地点にラベルを追加

[幅, 原点Y-10]に「X」を文字描画。 [原点X-10, 10]に「Y」を文字描画。

#グラフを表示する範囲

X=-18

(X≦18)の間

#表示する関数

YはX × X

#×10は幅調整

[原点X+X×10, 原点Y-Y,1]に１の円描画。

X=X+0.01

ここまで。

このプログラムはxの二乗のグラフを描画します。
処理内容は単純で、xの値を-18から18まで0.01づつ増加させその時のyの
座標に点を描画しています。
これで見慣れたUの字のグラフが表示されました。

式を変更すれば二次関数以外の関数も表示可能です！

赤色に塗り色設定。
1に線太さ設定。
#キャンバスの設定
幅は500
高さは500

#原点を設定
原点Xは幅÷2
原点Yは高さ÷2

#y=0, x=0の地点に線を引く
[原点X-250, 原点Y]から[原点X+250, 原点Y]まで線描画。
[原点X, 原点Y-250]から[原点X, 原点Y+250]まで線描画。

#y=0, x=0の地点にラベルを追加
[幅, 原点Y-10]に「X」を文字描画。 [原点X-10, 10]に「Y」を文字描画。

X=-18
(X≦18)の間
YはX × X　× X +9 × X　× X　+ 3 　× X　 - 40
#×25は幅調整
[原点X+X×25, 原点Y-Y,1]に１の円描画。
X=X+0.01
ここまで。