「なでしこv3」開発掲示板

→書き込み(#387)を編集する:

名前

タイトル

本文

### 提案の主題

ゲッター・セッター、DOM和属性、DOM和スタイルを`Object.defineProperty`にやらせよう
__setPropと__getPropを捨てよう

### 概要

「ゲッター・セッター、DOM和属性、DOM和スタイルを`Object.defineProperty`にやらせよう」
jsの`Object.defineProperty`はオブジェクトにプロパティを追加する機能がある
同時に、追加したプロパティにゲッター・セッターをつけることができる

DOM和属性が辞書キー形式（dom＠key）で参照できるようになります
やらせたものを貯蔵庫に投稿してあります

DOM和属性革命プラグイン
　本体：https://n3s.nadesi.com/id.php?3147
　使用例：https://n3s.nadesi.com/id.php?3148

コードの追加量はそこそこです。

「オブジェクトの__setPropと__getPropを捨てよう」

こちらは大変な量のコード変更（削除）が発生します
大規模改修のやるきが高まった時に検討してください

__setPropと__getPropを捨てずにDOM和属性革命プラグインだけ採用しても問題はありません

### `Object.defineProperty`について

AIのcopilotくんと語らっていたところ、
jsには`Object.defineProperty`というものがあるのを知りました
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

> 構文
> Object.defineProperty(obj, prop, descriptor)

Object.definePropertyは、オブジェクト(obj)にプロパティ(prop)を追加して、descriptorでセッターゲッターを設定できます。

ふつうにセッター・ゲッターとして使うこともできますし、
domに日本語のプロパティ名を追加して英語のプロパティ名に値を渡すことができます。

なでしこ3のゲッター・セッター、DOM和属性、DOM和スタイルを`Object.defineProperty`にやらせることができそうです。

#### セッターのサンプル

「値セットした時」命令で、hoge["aaa"]に入れた値を100倍にしてhoge["bbb"]に入れるサンプルです。
（以下、サンプルのjs部分はcopilotくん作）

```
//なでしこ3貯蔵庫で実行可能です
//辞書型objのkeyに値を入れた時、funcを実行します
●値セットした時(funcでobjのkeyを|keyに)：
　『(function 値セット時(func, obj, key) {
  const desc = Object.getOwnPropertyDescriptor(obj, key) || {};
  Object.defineProperty(obj, key, {
    get: desc.get || function () {},
    set: function (value) {
      sys.__setSysVar('対象', this);
      func(value);
    },
    enumerable: true,
    configurable: true
  });
}
)』を[func, obj, key]でJS関数実行
　objを戻す

変数　hogeは空辞書
hogeの「aaa」に値セットした時には (v)：
　　対象["bbb"] = v * 100 //対象が使える
hoge["aaa"] = 10 　//値セット時の関数が呼ばれ、bbbに入る
hoge["bbb"]を表示　//→1000
```

貯蔵庫に投稿したプログラムに「値セットした時」・「値ゲットした時」命令があります。
`objのkeyに値セットした時には (v)：`でセッターを付与できます。

#### DOM和属性、DOM和スタイルとして使用する

DOM側に日本語のプロパティを追加し、ゲッターセッターでdomの英語のプロパティに紐づけします。
たとえばdom＠"文字"に入れた値をdom["innerText"]へ入れます。サンプルは下記。

```
//なでしこ3貯蔵庫で実行可能です
//日本語名と英語名(domの属性名)を指定してDOMのプロパティに紐づけします
●DOM和属性追加（jpKeyをoriginalKeyに|originalKeyへ|originalKeyとして）：
　DOM和属性[jpKey] = originalKey //追加
  『(function DOM和属性追加(jpKey, originalKey) {
  Object.defineProperty(HTMLElement.prototype, jpKey, {
    get() { return this[originalKey]; },
    set(v) { this[originalKey] = v; },
    enumerable: false,
    configurable: true
  });})』を[jpKey, originalKey]でJS関数実行

「文字」を「innerText」にDOM和属性追加　//dom＠「文字」を追加し、セッターでinnerTextに渡す
「あ」のボタン作成
それ＠「文字」は「テスト」　//dom＄keyやdom.keyではなくdom＠keyでアクセスできる
```

貯蔵庫に投稿したプログラムには「DOM和属性追加」「DOM和スタイル追加」命令があります。

この命令で追加されたプロパティは辞書キーの形式でアクセスできます。
dom$だけでなく、dom＠やdom[]で参照できるようになります。

### なでしこ本体に組み込むことについて

これをなでしこ本体に組み込んだ時に大きな仕様変更が発生します。

変数`DOM和属性`にキーを追加するプログラムやプラグインは動かなくなります。
そんな時には`DOM和属性`をこの仕様に合わせる「DOM和属性革命」命令を使えばOKなようにしてあります。

```
//すべてのDOMはDOM和属性、DOM和スタイルの辞書キーを得る
●DOM和属性革命：
　DOM和属性を反復：
　　　対象キーを対象へDOM和属性追加　//日本語キーを英語キーへ
　DOM和スタイルを反復：
　　　対象キーを対象へDOM和スタイル追加
```

#### 「DOM側」へプロパティを追加する、とは

「DOM側」の解釈として2つあります。
・案1. HTMLElement.prototypeに追加する
・案2. なでしこが返すdomのみに追加する

貯蔵庫に投稿したプログラムではHTMLElement.prototypeに追加(案1)をしています。
影響範囲はHTMLElementを継承しているオブジェクト（HTMLタグ）だけなので限定的です。
HTMLElement.prototypeに日本語のキーを追加したところで弊害はないでしょう。（"ID"や"HTML"はちょっとアブナイ？）
問題は貯蔵庫のクリアで消えないことくらいです。

AIのcopilotくんはこれはprototype汚染にあたらない、と言っています（日本語キーは他ライブラリとの衝突が少ない、プロトタイプ拡張であるとのこと）
それでもprototypeへの追加に不安があれば案2になるかと思います。

ただし案2の場合は下記が再発します。
https://github.com/kujirahand/nadesiko3/issues/1860
```
テストテーブルをマウス押した時には、:
    もし、対象.nodeName＝「TD」ならば、:
        クリック行＝対象.parentNode。
        クリック行.背景色＝「#CCF」　# できない！？
        //クリック行の「背景色」に「#CCF」をDOMスタイル設定。　# できる
        
```
prototypeに追加する場合は問題が起きません。

下記は動かなくなります。
https://github.com/kujirahand/nadesiko3/issues/1869
```
A=「あああ」のボタン作成
A＠「幅」=200px　//OK
A＠「行揃え」＝「右」　//右辺（右）を変換するのはムリ（セッターを頑張れば可能）
```

### __setPropと__getPropを捨てたい

ゲッター・セッター、DOM和属性、DOM和スタイルをdefinePropertyで書き換えると__setPropと__getPropを捨てることができます。

__setPropと__getPropがオブジェクトから消えます。
ハテナ関数で表示されなくなります。
```
hoge = 空辞書
hoge.A=1
??hoge //→main(3): {"__setProp":null,"__getProp":null,"A":1}
```

セレクトボックスの「要素数」が選択肢の数より 2 大きくなるの件が解消されるでしょう。
https://github.com/kujirahand/nadesiko3/issues/2069

コンパイル後の__setProp/__getPropの存在確認がなくなり、jsが短くなります。
//なでしこ3での記述
hoge.A=1
//↓コンパイル後（とても長い）
  /*[convLetProp]*/
  if (typeof __self.__varslist[2].get("main__hoge").__setProp === 'function') { __self.__varslist[2].get("main__hoge").__setProp('A', 1, __self); } else { __self.__checkPropAccessor('set', __self.__varslist[2].get("main__hoge"));if (typeof __self.__varslist[2].get("main__hoge").__setProp === 'function') { __self.__varslist[2].get("main__hoge").__setProp('A', 1, __self); } else { __self.__varslist[2].get("main__hoge")['A'] = 1 }};

現在の__setPropと__getPropによるセッターゲッターは廃止になります
https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2F%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E6%A7%8B%E6%96%87%E3%80%8C%24%E3%80%8D&show#h418b9cf2

__setPropと__getProp残したままDOM和属性革命をしても動作に問題はないので、廃止予定のまま併用することもできます。

### その他の活用法

DOMのプロパティ構文で、可視や有効などカスタムプロパティを使えるようにする
https://github.com/kujirahand/nadesiko3/issues/1823
についてはセッターゲッターで実装します
```
　変数　HTMLElementprototype　= 『HTMLElement.prototype』をJS実行
　HTMLElementprototypeの"有効"を値セットした時には (v) DOM有効設定(対象,v)。。。
　HTMLElementprototypeの"有効"を値ゲットした時には  DOM有効取得(対象)。。。
```

HTMLElement.prototypeに追加すればすべての部品に影響しますが、
HTMLSelectElement.prototypeに追加すればセレクトボックスにだけ影響します。

HTMLElement.prototype.値 は valueを指し、
HTMLSelectElement.prototype.値 は selectedIndexを指す、ということができます。

```
　//セレクトボックス専用の和属性を設定する
　変数　HTMLSelectElement = 『HTMLSelectElement.prototype』をJS実行
　{
　　"値":"selectedIndex",
　　"行":"size"
　}を反復：
　　　defineProperty(HTMLSelectElement,対象キー,対象)
```

「チェックボックス＠テキスト」や「セレクトボックス＠アイテム」をユーザー側からも追加できます
```
　　変数　select=[1,2,3]のセレクトボックス作成
　　selectの「アイテム」に値セットした時には (v)：
　　　　vを対象へセレクトボックスアイテム設定
　　select＠「アイテム」は[4,5,6,7]
```

### 過去ログ

歴史とか兼ね合いとかかちあいがありそうなissuesの抜粋

https://github.com/kujirahand/nadesiko3/issues/1793
https://github.com/kujirahand/nadesiko3/issues/1823
https://github.com/kujirahand/nadesiko3/issues/1860
https://github.com/kujirahand/nadesiko3/pull/1863

優先度

状態

確認キー

👆お手数ですが、いたずら防止のために、「真夏」の読み方を記入してください。

編集キー

編集時に使うキーを入力(省略可能)

添付ファイル

🎁 ファイルを選択...

画像ファイル(最大300KB)を添付可能