なでしこを明後日の方向に

日本語プログラム言語なでしこを応援しています

なでしこ3で部品を扱う

日本語プログラム言語なでしこ なでしこ1 なでしこ3

//これが書かれたのはなでしこv3.2.36の頃です

なでしこv1となでしこv3で部品関連が結構変わったので比較して書いてみる。

部品について

ボタンやラベルやイメージなどの「部品」の呼び方が変わった。
なでしこv1では「GUI部品」
なでしこv3では「DOM部品」

GUIがwindows由来の言葉で、DOMはHTML由来な感じ。

HTML上にあるタグを、プログラムではDOM要素と呼ぶ。
HTMLにbuttonタグを書き込むとブラウザ上ではボタンが表示される。
プログラムからHTMLを書き込むことができる。

このプログラムというのがjavascriptであったり、なでしこv3だったり。

たとえば、なでしこv3のボタン作成命令ではHTMLにボタンタグを書き込むことができる。

マニュアルの命令群について

ボタンなどの部品を作るとき、だいたいプログラムではこの手順。
①　ボタンを作る
②　ボタンの見た目（テキストなど）を設定する
③　ボタンの動作（クリックした時）を設定する

↓マニュアルだと作る命令が下に来ているので戸惑う。

f:id:tkizzz:20220130125731p:plain
マニュアルの命令群

ボタンを作りかたが変わった

「宣言」から「命令」に変わった。

//なでしこv1　　（マニュアルより）
OKボタンとはボタン。　//宣言
OKボタンをクリックした時は～「OK」と言う。

//なでしこv3　　（マニュアルより）
挨拶ボタン=「挨拶」のボタン作成。　//「ボタン作成」命令
挨拶ボタンをクリックした時には
　　「こんにちは」と言う。
ここまで。

なでしこ1では「(変数名)とはボタン」のように「とは」で部品を作る。
変数「そ」にボタンを操作するための変数(グループ)が入る。
例ではOKボタンという変数をボタンとして宣言している感じ。

なでしこ3では(テキスト)のボタン作成のように命令でボタンを作る。
命令なので、ボタンを操作するための変数が変数「それ」に返る。
例では返ってきた値を変数挨拶ボタンに入れている。

なでしこ3のマニュアルの解説の説明

f:id:tkizzz:20220130130507p:plain

上記はなでしこ3のマニュアルのボタン作成の解説文。

　ラベルlabelを持つbutton要素を追加しDOMオブジェクトを返す

ちょっとこれの説明をしようと思う。
これが読めるようになればDOM関連に応用が利く。

これを分解すると
　1.ラベルlabelを持つ
　2.button要素を追加し
　3.DOMオブジェクトを返す
の3つ。

1.ラベルlabelを持つ

「ラベルlabelを持つ」のラベルというのはここでは部品のラベルじゃなくて、商品とかに貼るラベルのこと。
ボタンにシールが貼ってあって、シールを指してラベルって言っている。

　LABELのボタン作成

と書いた時、引数LABELの部分の……テキストを持っていると書いてある。

「ラベルlabelを持つ」の部分は
「引数LABELのテキストを持つ」に読み替えるとよさそう。

2.button要素を追加し

button要素というのはHTMLのbuttonタグのこと。
「追加し」の追加先はDOM親要素。　なでしこv1の母艦やデフォルト親部品に当たる。
ボタンタグがHTMLのどこかに追加されることでボタンが画面に配置される。

「button要素を追加し」の部分は
「ボタンタグをHTMLに追加し」に読み替えるとよさそう。

3.DOMオブジェクトを返す

「DOMオブジェクト」はなでしこv1でいう部品グループが近い。
「このDOM部品を操作するための変数」がわかりやすいか。
「を返す」は他の命令と同じく「『それ』に値をいれる」の意味。

ボタンの動作や見た目を変えるには、このオブジェクト（変数）を使ってください、ということ。

「DOMオブジェクトを返す」の部分は
「このDOM部品を操作するためのオブジェクトを、変数『それ』に返す」に読み替えるとよさそう。

読み替え結果

f:id:tkizzz:20220130130507p:plain
↓

ボタン作成 (LABELの)
引数LABELのテキストを持つボタンタグをHTMLに追加し、このDOM部品を操作するためのオブジェクトを、変数『それ』に返す

ちょっとはわかりやすくなった……か？

DOMオブジェクトの扱い方

//なでしこv1
挨拶ボタンとはボタン。
挨拶ボタンのテキストは「ごあいさつ」　//メンバに値を入れるとテキストが変わる

//なでしこv3
挨拶ボタン=「挨拶」のボタン作成。　//変数　挨拶ボタンに、返ってきたオブジェクトを入れる
挨拶ボタンに「ごあいさつ」をDOMテキスト設定　//命令でテキストが変わる

ボタンに書いてあるテキストが変わるはず。
なでしこv1では変数のメンバに値を入れると見た目が変わる。
なでしこv3では見た目を変更する命令を使って変更する。

値を入れて見た目を変更することもできるが、属性名はjavascript由来の英語になる。
テキストにあたる属性名はtextContentなので、以下の書き方になる。

//なでしこv3
挨拶ボタン=「挨拶」のボタン作成。
挨拶ボタン["textContent"]=「ごあいさつ」　//テキストが変わる

「DOM属性設定」命令は、この英語の属性名を使って値を変更する命令。
「DOM属性設定」を使った場合は、以下の書き方になる。

//なでしこv3
挨拶ボタン=「挨拶」のボタン作成。
挨拶ボタンの「textContent」に「ごあいさつ」をDOM属性設定　//テキストが変わる

DOMテキスト設定の言い換えで「テキスト設定」という命令があるので、

//なでしこv3
挨拶ボタン=「挨拶」のボタン作成。
挨拶ボタンに「ごあいさつ」をテキスト設定　//DOMテキスト設定と同じ

このように書くのがスタンダード。　いちばんかんたん！

イベントの設定

//なでしこv1　　（マニュアルより）
OKボタンとはボタン。
OKボタンをクリックした時は～「OK」と言う。

//なでしこv3　　（マニュアルより）
挨拶ボタン=「挨拶」のボタン作成。
挨拶ボタンをクリックした時には
　　「こんにちは」と言う。
ここまで。

なでしこv1では「(ボタンを)クリックした時」に「は～」でイベントを設定する。
そのクリックした時は～という書き方でもOK

なでしこv3では「(ボタンを)クリックした時」に「には」でイベントを設定する。
それをクリックした時にはという書き方でもOK。

//なでしこv3
「挨拶」のボタン作成。
それをクリックした時には
　　「こんにちは」と言う。
ここまで。

また、なでしこv3でもなでしこv1風の「は～」を使用できる。
「その」はムリ。

//なでしこv3でも　は～　を使う
「挨拶」のボタン作成。
それをクリックした時は～　//なでしこ1風
　　「こんにちは」と言う
ここまで。

なでしこv3の「クリックした時」は

●クリック時 (FUNCでDOMを)
　無名関数FでDOMをクリックした時に実行するイベントを設定

という感じの命令になっているようだ。

引数の「FUNCで」の部分は関数が入るのだけど、

DOMをクリック時には
　　//FUNK　//ここに関数FUNKの中身を書く
ここまで

と書くことができるようになっている。 理由はわかりやすいから。

FUNKは文字列で指定することもできるので、関数をボタンから呼ぶ場合は

//なでしこv3
●挨拶関数
　　「こんにちは」と言う
ここまで。

挨拶ボタン＝「あいさつ」のボタン作成
「挨拶関数」で挨拶ボタンをクリック時

こんな感じにすることもできる。
…助詞がなんかアレな感じでわかりにくい。 「には」を使って書くのが無難。