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

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

なでしこ3でイベント委譲のプログラムをつくってみよう

nadesi.com なでしこ3のプログラムは貯蔵庫エディタで実行できます n3s.nadesi.com

※ この記事はなでしこ3.7.17のころ書かれたものです

ブラウザ版のなでしこ3で イベント委譲 を利用したプログラムを作ってみましょう。 まずはサンプルから!

サンプル

親となるラベル1つと、子となるボタン3つを作ります。 ラベルにはクリック時のイベントを書きます

//なでしこ3「」ラベル作成
3回:
 「ぼたん{回数}」ボタン作成
 それDOM子要素追加

親クリックした時:
  対象からテキスト取得
  それ言う

部品を親子関係にするにはDOM子要素追加を使います

親のラベル部品にはクリックした時のイベントをつけています。 子のボタン部品にはクリックした時のイベントをつけていませんが、クリックすると イベントが起きます

これは イベント委譲 によるものです。この場合、ぼたん3をクリックすると「ぼたん3」のダイアログがでます

そして この先の文章はAI生成です(暴露)
ただし長すぎたし変なところがあったので直したりカットしたりしました。

AI生成ここから

イベント委譲とは

イベント委譲とは、

子要素に発生したイベントを、親要素がまとめて受け取るテクニック

のことです。

JavaScriptではよく使われる方法で、なでしこ3のDOM部品でも考え方が使えます。

今回の例では、ボタンを3つ作っています。

もしイベント委譲を使わない場合は、

  • ボタン1にクリックイベントを付ける
  • ボタン2にクリックイベントを付ける
  • ボタン3にクリックイベントを付ける

…と、3回イベント設定をしなければいけません。

しかし、イベント委譲を使えば、 親に1つイベントを付けるだけで、すべての子ボタンのクリックを拾える というメリットがあります。

どうして親が子のイベントを拾えるの?

ブラウザのイベントには「バブリング(伝播)」という仕組みがあります。

  1. 子要素でイベントが発生する
  2. そのイベントが親 → さらに親へと伝わっていく

この伝わる途中で、親が「お、イベント来たな」と拾うことができるわけです。

今回のコードのこの部分がまさにそれです。

親のクリックした時には:
  対象からテキスト取得
  それを言う

「対象」とは、実際にクリックされた要素(=ボタン)です。 親はクリックイベントを受け取ったときに「どの子がクリックされたのか」を知ることができます。

実際の動作の流れ

ここで、今回のサンプルが内部でどう動いているかを整理してみましょう。

  1. 親要素を作る(ラベル作成
  2. 3つのボタンを作り、それぞれ親にDOM子要素追加する
  3. 親に「クリックした時」イベントを設定する

ここでクリック待ちになります。

  1. ボタンがクリックされる
  2. クリックイベントが親へ伝わる(バブリング)
  3. 親のクリックした時が動く
  4. 対象(=クリックされたボタン)のテキストを取得
  5. そのテキストを「言う」

つまり、ボタン自身は何も知らないのに、親が全部面倒を見てくれているという構造です。

イベント委譲のメリットまとめ

  • 子要素が増えてもイベント設定は1回で済む
  • 動的に追加された要素にも自動で対応できる
  • コードがスッキリする
  • パフォーマンスが良くなる(大量の要素にイベントを付けなくて済む)

特に「後からDOMを追加する」ケースでは、イベント委譲は非常に強力です。

AI生成ここまで

今回はサンプルプログラム1個つくって、AIにテーマを伝えて「続きを書いてください」で生成してみました。 ちなみに検索サイトで「ブログ記事」と入れるとサジェストに「aiで書く」がありました。

まとめ

  • 部品を親子にして、親部品にだけイベントをつける手法があるよ!
  • 親の部品は「」のラベル作成みたいなラベルがいいよ!
  • 部品を親子関係にするにはDOM子要素追加を使うよ!

なでしこ3の検索命令で失敗した場合の返り値

nadesi.com

※ この記事が書かれたのはなでしこv3.7.16 時点です

なでしこには文字検索範囲切り取るなど文字を探して何かを返す命令がたくさんあります。
マニュアルには見つかったら何を返すか書いてあるけど、 見つからなかったらどうなるか 書いてなかったりします。

なので試してみました

前知識として、なでしこ3のシステム定数をいくつか紹介します。 javascriptの用語と対応しています

なでしこの定数 説明
javascriptの空文字列""のこと
未定義 javascriptのundefinedのこと
無限大 javascriptのInfinityのこと(数値としてふるまう)
NULL javascriptのnullのこと

文字列処理の命令

・試したこと 文字列Sから何かを探す命令には、ヒットしない場合(見つからなかった)は何を返すか・どんな動作をするか、など
文字数とりだす関連の命令にはでかい数(無限大)を与えたときの挙動など

●SでAが何文字目

通常:Aの文字位置を戻す(最初の文字は1文字目)
 Aがヒットしない場合、 0を戻す

●SのpからAを文字検索

通常:位置pより後ろのAの文字位置を戻す(最初の文字は1文字目)
 Aがヒットしない場合、 0を戻す

●SをAで区切る

通常:SをAで分割した配列を戻す
 Aがヒットしない場合、要素数1の 配列[S]を戻す
 Sを空で区切るとした場合、 文字列分解の動作になる

●SをAで文字列分割

通常:要素数2の配列 [Aの手前,Aの後ろ] を戻す
 Aがヒットしない場合、要素数1の 配列[S]を戻す
 Sを空で文字列分割とした場合、要素数2の配列["",S]を戻す

●SのAまで切取る

通常:文字列Aの手前までの文字列を戻す。Aの後ろを対象に入れる
 Aがヒットしない場合、 末尾まで切り取る。
 Sを空まで切取るとした場合、空を戻す。対象にSが入る

●SのAからBの範囲切取る

通常:AからBの間の文字を戻す。
 Aがヒットしない場合、 を戻す。切り取らない。
 Aがヒットし、 Bだけがヒットしない場合、末尾まで切り取る

●SのAからCNTを文字抜出

  通常:A文字目からCNTの文字数だけ取り出して返す
 AがSの文字数より大きいとを返す
 CNTがマイナスだとを返す
 CNTに 無限大を指定するとA文字目から後ろの文字すべてを返す
(例)「いろはにほへと」の3から 無限大 を文字抜出す //→はにほへと

●SがAに正規表現マッチ

通常:Aを「/」で囲うかどうかで挙動が変わる。「/A/」の場合、文字列を返す。違えば配列を返す
 Aがヒットしない場合、 NULLを戻す
 NULLとの比較はミスしがちなので、もしSがAに正規表現マッチするならばと書くのが無難。  

●SをAで正規表現区切る

 Aがヒットしない場合、要素数1の 配列[S] を戻す
 Sを空で正規表現区切るとした場合、文字列分解の動作になる

配列関連の命令

・ためしたこと
マイナスの値を入れたり、大きいマイナス値を入れたり、無限大を入れたりした

●ARからAを配列検索

通常:0以上の値を返す
 Aにヒットする要素がない場合、 -1 を戻す

●ARからNを配列切取

通常:N番目の要素をひっこぬいて返す。ARを変更する。
 Nに マイナスを指定すると配列の後ろから数える (-2ならうしろから2番目)
 要素数より 大きいマイナス値を指定すると0番目が切り取られる
 要素数より大きいNを指定すると、未定義(undefined)を戻す。ARは変化しない。

●ARのNからCNTを配列取出

通常:N番目の要素からCNT個だけひっこぬいて返す。ARを変更する。
 Nに マイナスを指定すると配列の後ろから数える (-2ならうしろから2番目)
 Nに大きいマイナス値を指定すると0番目から切り取られる
 Nに大きいNを指定すると、空の配列 [ ]を戻す
 CNTに 大きいNを指定すると、Nから後ろすべて取り出す
(例)ARの3から無限大を配列取り出すと書くと配列の3番目から後ろすべてを取り出す

●ARのNを配列参照

通常:配列のN番目の値を返す。範囲オブジェクトを指定すると配列からその範囲をコピーしたものを返す
 Nに マイナスを指定すると未定義(undefined)を返す。※
 Nに要素数より大きいNを指定すると、未定義(undefined)を返す。
 Nに 範囲オブジェクトを指定した場合、マイナスを指定すると配列の後ろから数える (-2ならうしろから2番目)
 Nに範囲オブジェクトを指定した場合、大きい開始地点を指定すると、空の配列 [ ]を戻す
※ これはのちのバージョンで変わるかも?

●ARのIとJを配列入替

通常:配列のI番目とJ番目を入れ替える
 Iに マイナスを指定すると、AR[J]は未定義(undefined)になる
 Iに要素数より大きい値を指定すると、AR[J]は未定義(undefined)になり、AR[I]=AR[J]は行われる
 IとJを逆にしても同様
 大きい値で入れ替えると要素数が拡張される(下図)

おわりに

検索命令は文字列の場合は0、配列の場合は-1が返るようです

正規表現マッチだけはNULLが返ってくるので、分岐する場合はもしSがAに正規表現マッチするならばと書いてしまうのが無難。

「いろはにほへと」の3から無限大を文字抜出すARの3から無限大を配列取り出すで特定位置からうしろすべてを取りだせるので、これは便利に使えそう

なでしこ1のYahoo!知恵袋☆課題質問対策室

nadesi.com

ようこそ、ここは 日本語プログラミング言語「なでしこ」専門 のブログです。

近年、11月から12月にかけてYahoo知恵袋に似たような質問が投稿されます。 たぶんどこかの課題なのでしょう。2025年11月、2024年11月、2023年12月に見られます。

chiebukuro.yahoo.co.jp

Yahoo!知恵袋のプログラミングカテゴリにはなでしこv1に詳しい人は少なく、ほかのプログラム言語ができる人が答えているようです。

ここにはYahoo!知恵袋で 回答する人のための資料 を置いておきます。 ちょっとだけ基礎知識からいきますよ。

日本語プログラム言語「なでしこ」にはv1とv3がある

なでしこv1はwindows用のプログラム言語です。コンパイルしてexeファイルを作ることもできます。
なでしこv3は主にブラウザで動作するAltJS(JavaScriptの代替言語)です。js同様、htmlのscriptタグ内に書きます。またはNodeJSと連携して実行します。
なでしこv2は開発停止となったので存在しません。

文法がけっこう変化しており、 特に描画関連はゴッソリ変わっています。

質問される課題はおそらく なでしこv1 です。添付画像にwindowsのウィンドウが見られることでしょう。

質問が「なでしこボード」であればなでしこv3+独自拡張です。こちらへどうぞ。https://www.manabu-tech.net/nakopad/?load=nb04-sensor1.txt

現代ではプログラミング=AIに聞け、ですが、AIはおそらくなでしこv1とv3の違いに気づいていません。 さらになでしこの命令表にない自然言語をぶちこんできますから、文法エラーが頻発します。(2026/02/28時点)

なでしこv1の命令表はこちら→ なでしこ命令一覧〜機能順

なでしこv3の命令表はこちら→ 📖 なでしこ3 マニュアル - 命令一覧/機能順

・なでしこの文法(v1,v3共通)の特徴1

なでしこでは、プログラム内にある全角英数文字半角英数文字として動作します。
たとえば全角カッコは半角カッコ(として動きます。
算術記号、なども半角同様になります。

関数名も CSV取得CSV取得 命令として動作します。
変数名も hogehoge は同じものを指します。
この仕様はプログラム初心者というより タイピング初心者向け でしょう。

・なでしこの文法(v1,v3共通)の特徴2

なでしこでは、書き方が2通り以上あることが多いです。
たとえば一行コメントには//#、の記号が使えて、どれも同じ動作です。
値の代入、配列へのアクセス記号、関数呼び出しの方法が複数あります。

//←コメント記号 # ←コメント記号 ※ ←コメント記号
A=B。 AB。 BA代入。// 値を代入する方法
A[0]。 A0。 A0。  # 配列へのアクセス記号 [ ]、@、¥
A表示。 表示(A)。 ※ 関数呼び出し 引数・助詞・命令名、命令名(引数)

質問者の記法に寄り添って回答できるとエレガントです。

線をいっぱい描画する課題

仮に、IMEを日本語ローマ字打ちモード固定、テンキーのないノートPCでかき、変換(F7~F10キーを含む)をなるべくしない、という縛り(想定)で書くとこう書けます

#なでしこv1で実行可能
線太さ1
nから20まで繰り返す
  x20
  y400から引く
  線色赤色
  x、0から0、y線
  線色青色
  x、400から400、y

他言語を習得されている方は下記のほうが読みやすいでしょうか。

//なでしこv1で実行可能
線太さ = 1
n0から20まで繰り返す
  x = n * 20
  y = 400 - x
  線色 = 赤色
  線(x,0,0,y)
  線色 = 青色
  線(x,400,400,y)

どちらも実行可能で動作も同じ コードです。 タイピング初心者にとって楽なのは 見た目がへっぽこなほう です。

各行の説明に入ります。

線の色と太さの指定

//なでしこv1
線色赤色
線太さ1

線色線太さはシステム変数で、この値がのちの描画命令に影響します。 赤色青色はなでしこv1の定数で、初期値としてRGB値($FF0000など)が入っています。

色定数は8つあり(残りは白色黒色水色黄色緑色紫色)、それ以外は単なる変数となります。 たとえば「灰色」や「桃色」は定義されていないので、初期化していないグローバル変数となります。

赤色に線色設定1に線太さ設定は、なでしこv3での書きかたです。

線を引く

//なでしこv1
0,0から400,0線 //x1,y1からx2,y2へ線

線を引く命令は引数として数値4つをとります。

[10, 10]から[200, 100]まで線描画は、なでしこv3での書きかたです。線描画命令は引数を2つ(配列2個)とります。

ループ処理

//なでしこv1
hoge0から20まで繰り返す
  hoge表示 //ループの内側(インデントが必要)
「完了」表示 //ループの外側

なでしこv1のループ処理には「n回」「nをaからbまで繰り返す」「(真偽値式)の間」「arrayを反復」の文法があります。

今回は「繰り返す」でループするのがよいでしょう。 インデントをつけた部分がブロックとなります。
インデント記号は全角スペース が推奨されます。
半角スペースやタブでも動きますが、掲示板で表示が崩れるので全角スペースを使いましょう。

なでしこv3ではインデントはあってもなくてもよく、予約語ここまでがブロックの終端となります

//なでしこv3
hoge0から20まで繰り返す
  hoge表示 //ループの内側(インデントはなくてもよい)
ここまで //予約語 ブロックの終端
「完了」表示 //ループの外側

カクテルグラスの描画問題

  1. 緑の棒  (円、線)
  2. チェリー (円)
  3. ドリンク (網掛け三角形)
  4. グラス底 (網掛け楕円)
  5. グラス輪郭 (Y字に線をひく)

この順番で描画します。

難所だけ紹介

円と線だけでできる部分は除き、難所の描画だけ紹介します。

//なでしこv1
//3. ドリンク(網掛け三角形)
線太さ1
線色白色  //枠の色
塗り色RGB($cc,$33,$33) //内側の色 RGB値を返す関数 $は16進数の記号
塗りスタイル「斜め十字線」 //網掛けの指定 べた塗りではない
px = 200 //起点 三角形下座標X
py = 175 //起点 三角形下座標Y
「{px},{py},{px-100},{py-100},{px+100},{py-100}」多角形 //三角形 下、左上、右上の座標

//4. グラス底(網掛け楕円)
線太さ2
線色青色
塗色青色
塗りスタイル「横線」 //網掛けの指定
px=200 //中心点X
py=275 //円の左上座標
px-75,pyからpx+75,py+25円  //楕円

実行結果

あとはY字に線を引けばカクテルグラスの完成です。

網掛け(塗りスタイル)について

ドリンク部分の網掛けは 塗りスタイルを指定します。

//なでしこv1
塗りスタイル「斜め十字線」

指定の文字列は「べた, 透明, 格子, 十字線, 縦線, 横線, 右斜め線, 左斜め線, 斜め十字線」のいずれかです。 システム変数である塗りスタイルの初期値は「べた」、つまりべた塗りです。

この情報はヘルプを見なくても、なでしこ付属の専用エディタで単語の補完(Ctrl+Space)をするとでてきます。

ドリンク部分は塗りスタイルは「斜め十字線」となります。
グラス底は塗りスタイルは「横線」でしょう。

円の描画について

//なでしこv1
0,0から30,30円 //x1,y1からx2,y2へ円

なでしこv1の命令は 矩形の左上と右下 を指定します。 幅と高さが一致すれば正円となり、そうでなければ楕円になります。

中心点が[px,py]、半径rの正円を描きたい場合は

//なでしこv1
px=15
py=15
r=15
px-r,py-rからpx+r,py+r円 //x1,y1からx2,y2へ円

のように計算するとよいでしょう。

なでしこv3では[x,y]からrの円描画のように中心点と半径の指定となります。

三角形(多角形)について

ドリンク部分は三角形です。これを描画する命令は多角形となります。

多角形の引数は「カンマ区切りの文字列」です。 三角形の座標は3点あるので、6個の数値をカンマ区切りの文字列で指定します。

//なでしこv1
//下向きの三角形 x,y、x,y、x,yへ線を引き、塗りつぶす
「200,175,100,75,300,75」多角形

なでしこ3ではJSON記法の二次元配列となります。命令は多角形描画を使います

//なでしこv3
[[200,175],[100,75],[300,75]]多角形描画

なでしこv1では四角多角形
なでしこv3では線描画円描画四角描画多角形描画
描画命令名および引数も変化しています。

(おまけ)なでしこのシンタックスハイライトについて

ブログの標準機能では生成できません。 なでしこで自作したものを使用して<span style="color:blue;">のようなhtmlタグを生成し色付けしています。 色付けタグ多用のため、この記事は内部で12000文字程度あることになっています。つらい。

なでしこ3の関数オブジェクトに辞書キーを付ける

※この記事はなでしこv3.7.14のころ書かれた記事です

関数が値を返したあとも変数を保持したいことがあるかと思います。
AIに聞くとVBC言語ではstatic、jsではクロージャというものを使って関数に専用の変数を持たせるようです。

なでしこ3でも関数に専用の変数、欲しいですね?
関数オブジェクトの特性を使ってそれっぽいものを作ってみましょう!

(ちなみに関数の外部から参照できるので「専用の変数」ではないです)

なでしこ3の関数オブジェクトとは

//使用例(マニュアルより)
F = 関数(a, b)
  それa+b
ここまで。
F(3,5)表示。 //無名関数の実行

変数名 = 関数() ~~ ここまで関数()ここまでの部分が無名関数の生成です。
それを変数Fに代入しています。

変数Fには関数オブジェクトが入ります。

関数オブジェクトはオブジェクト

関数オブジェクトって・・・オブジェクトなんですよね
オブジェクトには 辞書キー をつけて遊ぶことができます。

カウンタをつけてみよう

例題です。 「呼ばれるたびに+1した値を返す」関数を書いてみましょう

//ふつうはこう
カウンタ0
●hoge
  カウンタ1だけ増やす
  カウンタ戻すここまで

hoge()表示 //→1
hoge()表示 //→2
hoge()表示 //→3

関数の外部に変数「カウンタ」を置き、関数内で増やして戻す・・・ふつうはこうなります。

ところがプログラム自体が長くなってくると考えるようになるのです。ある1つの関数のためだけにグローバル変数を増やすのがダサい、と。

変数「カウンタ」は君が持ちなさい!

//関数にカウンタを持たせる
hoge = 「」
hoge = 関数
  hoge「カウンタ」1だけ増やす
  hoge「カウンタ」戻す
ここまで

hoge()表示 //→1
hoge()表示 //→2
hoge()表示 //→3

1行目のhoge = 「」は変数の宣言です。値は何でもいいです。 グローバル変数のhogeがありますよ、というアピールです。

2行目のhoge = 関数は無名関数の書き出しです。 hogeを関数オブジェクトで上書きします。

3行目のhoge@「カウンタ」を1だけ増やすはオブジェクトhogeに「カウンタ」の辞書キーに+1します hogeは関数オブジェクトなので辞書キーを付けられます

これでhoge自身は関数でありながらhoge@「カウンタ」も持つことができました。

関数にカンペをつけてみよう

問題と答えをセットにしたカンニングペーパーを作りましょう。 例えば与えられた時間「9:00」などを何分かに直す関数です

初めて聞く質問なら計算し、カンペにメモします。すでに聞いた質問ならカンペを見て即答します

分変換 = 「」
分変換 = 関数 (ask)
  もし分変換「カンペ」辞書キー存在しなければ:
    分変換「カンペ」= 空辞書 //初回はカンニングペーパーを作る
  変数 カンペ = 分変換「カンペ」
  変数 ans //計算結果
  
  //カンペにメモがあるか見る
  もしカンペask辞書キー存在しなければ:
    ans = 「00:00:00」ask分差 /* 面倒な計算 */
    カンペask = ans  //メモを取る
  違えば:
    ans = (カンペask )&「だってば」 //メモにある
  ans戻す
ここまで

分変換(「9:00」)表示 //→540
分変換(「17:00」)表示 //→1020
分変換(「9:00」)表示 //→540だってば
分変換(「17:00」)表示 //→1020だってば

分変換@「カンペ」が関数オブジェクトにつけた辞書キーです 初回は分変換@「カンペ」= 空辞書としてカンペを作ります

以下、同じ引数で関数が呼ばれたら答えを即答できるようにカンペに書き込み、見たことある質問が来たらカンペから答えを返します

注意点

関数オブジェクトは自前のキーを持っています(namelengthcallapplyなど) 将来的にもそのキーとかぶらないものをつけましょう。

かんたんに言うと、関数オブジェクトには日本語の辞書キーをつけましょう

なでしこ3の単位付き数値を活用する

※ この記事はv3.7.9のころに書かれたものです

なでしこ3には数値に関する文法に「単位」があり、数値に特定の単位をつける書き方があります

などの単位はコメントとして扱われ、動作上は無視されます。 pxemなどの、htmlで使う単位は文字列になります。

//例 なでしこ3
100×3表示 //→300 (数値)
100px表示 //→100px (文字列)

今回は主にコメントとして扱われるほうに注目していきます。
理解して使いこなすことで豊かなプログラム文になる でしょう。

単位となるものの定義

なでしこ3のマニュアル 文法/数値に載っています

📖 なでしこ3 マニュアル - 文法/数値

コメントになる単位は以下の通り。 (リンク先である nako_lex_rules.mts が最新の単位です)

円, ドル, 元, 歩, ㎡, 坪, 度, ℃, °, 個, つ, 本, 冊, 才, 歳, 匹, 枚, 皿, セット, 羽, 人, 件, 行, 列, 機, 品, m, mm, cm, km, g, kg, t, b, mb, kb, gb

文字列になる単位は以下の通り。(スタイルシートに使われる単位です)

px, em, ex, rem, vw, vh, vmin, vmax

時間の単位が入っていないのは、タイマー命令「秒待つ」などとのかねあいだと思います。 (なでしこv3.7.9現在)

文字列になる単位について

文字列になる単位はDOM部品のサイズ指定が便利になるように作られました。

//文字列になる単位の使用例
「よこなが」ボタン作成
それ.幅300px //最近の書き方
それ「幅」「300px」DOMスタイル設定 //以前の書き方

以前は「300px」のように文字列で指定していましたが、サクっと書きたい需要に応えて文法が進化しました。

単位の注意点

変数に単位はつけらません。数値につけます。

//つけられない例
それ100
それ×3表示 //→NaN (数値じゃないという意味)

それ円のような使い方はできません。 数値をプログラムに直接打つ場面で使いましょう

「増やす」で使う

回転角10増やす   //単位なし
回転角10度増やす  //単位「度」あり

単位をつけると360度で一周するほうの角度だと分かります。 「10度増やす」と書いたほうが豊かなプログラム文になるでしょう。
動作は変わりません。

タートルグラフィックスで使う

タートルグラフィックスの命令「カメ進む」「カメ右回転」などは数値をプログラムに直接うつことが多そう。 単位のを付けてみましょう。

//単位なし
100だけカメ進む
90だけカメ右回転

//単位あり
100だけカメ進む
90だけカメ右回転

あたたかみのあるプログラムになりました。
動作は変わりません。

ラジアン変換で使う

角度を度からラジアンに変換する命令です。 単位「度」をつけてみましょう

//単位なし
180ラジアン変換して表示  //→3.141592653589793

//単位あり
180ラジアン変換して表示 //→3.141592653589793
180ラジアン変換して表示 //→3.141592653589793

は温度の単位なので間違いです。アツアツのプログラムになったと言えます。
動作は変わりません。

二次元配列処理で使う

単位にがあります。

//単位なし0表ソート
表1表重複削除
表2表列取得
表0から0「hoge」表曖昧検索

//単位あり0表ソート
表1表重複削除
表2表列取得
表0から0「hoge」表曖昧検索

列をきめうちする機会はそれなりにありそう。 「列目」は単位リストにないので書けません。残念。(v3.7.9時点)

「助詞なし」と単位の組み合わせ

先日投稿したパネル部品プラグインでは前部品という命令を●前部品(domのnだけ|n)で定義してあります。

//domのn個前の部品を返す
●前部品(domのnだけ|n)
 変数 target=dom
 もしn数列判定でなければ、n=1
 n回
   target = target["previousElementSibling"]
 target戻す

引数にnだけ|nと書くと、domのnだけ前部品もしくはdomのn前部品のどちらでも書くことができるようになります。
これはマニュアルの関数のところに・・・載ってねえな? なでしこ1からつづく仕様です。

domのn前部品は実際に使用するときそれの2前部品みたいになります。これでは文面が変ですが実は単位を前提に定義してあるんです。

それ2前部品  //単位なし
それ2つ前部品 //単位あり

もちろん動作は変わりません。

なでしこ3のパネル部品プラグイン(仮)を作成(その2)

※ これはなでしこv3.7.9のころに書かれた記事です

パネルにボタン詰め弁当

前回のあらすじ

!「貯蔵庫:3105.nako3」を取り込むパネル作成とかの命令が使えるようになります。 プラグインの内容は ここ→https://n3s.nadesi.com/id.php?3105

機能の紹介となっていますがあまりCSSに詳しくないので変なところがあればご指摘ください。 プラグインの正式版では変更して投稿します。

パネル内配置のsize指定

前回紹介したdomをsizeへパネル内配置の命令はsizeの部分に[x,y][x,y,w,h]を指定できます。 数値には内部で単位「px」がつきますが、文字列で指定する場合はCSSの単位(「%」など)が使えます。

//使用例
!「貯蔵庫:3105.nako3」取り込む
[300,200]パネル作成
それ.ボーダー「1px solid」
それ部品作成先一時変更
「テスト」ボタン作成
それ[10,10,100,100]パネル内配置 //[x,y,w,h]
「テスト2」ボタン作成
それ[「30%」,「40%」,「60%」,「50%」]パネル内配置 //[x,y,w,h]

(実行結果)

プラグインではw,hはdom.幅とdom.高さにいれているだけであり、%の単位が使えるのはなでしこ3の元からある機能です)

ちなみに、部品が重なった場合には部品.重なりに値を入れるとどれを手前に表示するかを操作できます。

レイアウト命令

//使用例
!「貯蔵庫:3105.nako3」取り込む
[300,200]パネル作成
それ.ボーダー「1px solid」
それ部品作成先一時変更
「テスト」ボタン作成
それ[10,10]パネル内配置
それ横長レイアウト

(実行結果)

レイアウト命令は3つあります。

●縦長レイアウト(domを)
●横長レイアウト(domを)
●全体レイアウト(domを)

レイアウト命令は 部品が横や縦に伸びます。位置は変わりません。 なでしこ1と同じにはできなかったよ。

●右側(domの)と●下側(domの)

//使用例
!「貯蔵庫:3105.nako3」取り込む
[300,200]パネル作成
それ.ボーダー「1px solid」
それ部品作成先一時変更
「テスト」ボタン作成
それ[200,100]パネル内配置

変数 xy = それ下側 //[x,y]を戻す
「テスト2」ボタン作成
それxyパネル内配置

(実行結果)

●右側(domの)●下側(domの)は座標[x,y]を戻します。 パネル内配置の引数にするとよいでしょう。

ここでは変数に座標を入れていますが、後述の命令で変数宣言をなくせます。

前後の部品を返す命令

●前部品(domのnだけ|n)
●後部品(domのnだけ|n)
●直前部品(domの)
●直後部品(domの)

domのnだけ前部品は引数のdom部品から見て、n個前にある部品を返します。

domの直前部品は引数domの1個前にある部品を返します。

使用例:イベントで使う

//使用例
!「貯蔵庫:3105.nako3」取り込む
「こんにちは」エディタ作成
「発言」ボタン作成
それクリックした時:
  対象直前部品からテキスト取得 //対象はイベントが発生した部品(ボタン)
  それ言う

ボタンをクリックした時に隣の部品からテキスト取得する例です。 エディタ側に変数名を付けなくてよい のがメリットです。

改行作成した場合は改行も部品なので気を付けましょう。

使用例:配置で使う

//使用例
!「貯蔵庫:3105.nako3」取り込む
[300,200]パネル作成
それ.ボーダー「1px solid」
それ部品作成先一時変更
「テスト」ボタン作成
それ[200,100]パネル内配置
「テスト2」ボタン作成
直前部品下側パネル内配置

(実行結果)

直前の部品の下側に配置したいときに見目麗しく書けます。 なのでパネル部品と一緒にプラグインに入れています。

直前部品の下側へパネル内配置の部分は引数「それ」を省略した書き方です。
省略しない書き方と比較してみると・・・

直前部品下側パネル内配置 //省略した書き方
それ(それ直前部品)下側、パネル内配置 //省略なし

「それ」の省略ってすげえ!

トップ絵のプログラム

上記のパネルはこんな感じ↓のプログラムです

!「貯蔵庫:3105.nako3」取り込む
[300,200]パネル作成
それ部品作成先一時変更

「A」ボタン作成して[0,0,0,「20%」]パネル内配置
それ横長レイアウト

「B」ボタン作成して直前部品下側パネル内配置
それ縦長レイアウト
それ.幅100px

「C」ボタン作成して直前部品右側パネル内配置
それ全体レイアウト

短くてそこそこ平易な文で書けます。
ボタン作成のかわりに別の部品をおけばツールっぽくなるはずです。

なでしこ3のパネル部品プラグイン(仮)を作成(その1)

※ これはなでしこv3.7.9のころに書かれた記事です

なでしこの貯蔵庫にパネル部品などに関するプラグインを投稿してきました。

パネル部品他のプラグイン

以下の命令が含まれており、プラグイン取り込むすると使用できます。

※親部品・キャンバスのスタック命令ほか
●部品作成先変更(domに)
●部品作成先取得
●部品作成先保存
●部品作成先一時変更(domに)
●部品作成先戻す
●描画先一時変更(domに)
●描画先保存
●描画先戻す
●描画状態保存
●描画状態戻す
●キャンバスサイズ変更(domをwhに)
※前後の部品参照命令
●前部品(domのnだけ|n)
●後部品(domのnだけ|n)
●直前部品(domの)
●直後部品(domの)
※パネルとパネル内配置命令 ●パネル作成(whの)
●パネル内配置(domをsizeへ|sizeに)
●右側(domの)
●下側(domの)
●DOMサイズ取得(domを|domの|domから)
●縦長レイアウト(domを)
●横長レイアウト(domを)
●全体レイアウト(domを)
※移行命令(transition-)
●移行時間変更(domをvに)
●移行タイミング関数変更(domをvに)
●移行ディレイ変更(domをvに)

長い! 多い! よって、この中から主要な命令を紹介します。

●パネル作成(whの)

//使用例
『貯蔵庫:3105.nako3』取り込む
[300,200]パネル作成
それ.ボーダー「1px solid」

(実行結果)

パネル部品

[幅,高さ]を指定して四角い領域を作成します。 この内側に部品を配置するとよいでしょう

これはdivタグなのですが、このプラグインでは これがパネル部品だと言い張っています

ベータ版なので取り込みの指定が!『貯蔵庫:3105.nako3』を取り込むと無骨なものになっています。 アドベントカレンダー期間中に命令名などに異議があれば吟味して別途正式版を投稿するつもりです。

qiita.com

●部品作成先一時変更(domに) と ●部品作成先戻す

//使用例
『貯蔵庫:3105.nako3』取り込む
[300,200]パネル作成
それ.ボーダー「1px solid」
それ部品作成先一時変更
50回:
 回数ラベル作成 //パネルの中に作られる
 改行作成
部品作成先戻す

(実行結果)

部品があふれるとスクロール可能

部品作成先一時変更部品作成先戻すはセットで使います。 パネルの中に部品を作りたいときに便利です。

パネルの中の部品があふれるとスクロールバーがでます(なでしこ1のスクロールパネル風)

部品作成先という名称ですが・・・
なでしこ3の DOM親要素 はなんか受け入れがたい(失礼)
なでしこ1の デフォルト親部品 じゃ長い
ということでこの名前になりました。
異議はないな、よし!(あるかも)

●パネル内配置(domをsizeへ|sizeに)

//使用例
『貯蔵庫:3105.nako3』取り込む
[300,200]パネル作成
それ.ボーダー「1px solid」
それ部品作成先一時変更
「テスト」ボタン作成
それ[200,100]パネル内配置
部品作成先戻す

(実行結果)

パネル内配置

domを[x,y]へパネル内配置でパネルの中の部品を 自由な位置 に配置できます。
ようするに2024年のアドベントカレンダー

qiita.com

これを手軽に書けるようにしたもの、です!

ちなみにdomを[x,y,w,h]へパネル内配置で座標と大きさを指定できるようにしています

いったんここまで

プラグインにはまだ ●右側(domの) とか ●下側(domの) とかレイアウトとかの命令があります。
●直前部品とかと絡めて次回に説明します。