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

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

名前

タイトル

本文

DOM関連についての所感と変更案です。
自分はHTML・javascriptにうといので雰囲気でお願いします。

なでしこ3のマニュアルを見て、やってみて、DOM関連があまりにとっつきにくかったので思ったことを書いてみました。

変なこと言っている部分もあると思いますが、納得できる部分をつまんでもらえればいいなと思います。

★DOMの作られる位置問題
（DOM親要素、DOM親要素設定、DOM要素作成）
　・「DOM親要素設定」の名称が「DOM属性設定」「DOMテキスト設定」「DOMイベント設定」などの命令と似ているのに用途がまるで違う
　　・「DOM親要素設定」はなでしこv1では「デフォルト親部品設定」だったのでそのまま用語を持ってくるとよい
　・自力でHTMLファイルを作ってなでしこ3を取り込んだ時、「ボタン作成」「表示」しても何も起こらない
　　・できればbody直下をデフォルトの親部品とする
　　・v1の「母艦にデフォルト親部品設定」に相当することが必要なので母艦が必要だと思う
　　　・簡易エディタ等では初めに指定するdivタグが母艦になるようにする
　・DOM要素作成は作成するだけなので（初心者的に）使い勝手が悪い
　　・HTMLタグを作ってすぐデフォルト親部品にぶら下げる命令が欲しい

（変更案）
変更前	｜変更後	｜備考
変数　DOM親要素	｜変数　デフォルト親部品	｜タグ作成時の親部品
DOM親要素設定	｜デフォルト親部品設定	｜v1互換の名前
（なし）	｜定数　母艦	｜あるとべんり
DOM要素作成	｜タグ作成	｜（機能変更）デフォルト親部品の下にtagを作成してDOMを返す

例）母艦とかデフォルト親部品設定を使えるようにした
　https://n3s.nadesi.com/id.php?746

★DOM～～設定・取得命令が多すぎる問題１
　（DOM要素取得、DOM要素ID取得、DOM子要素取得、DOM要素全取得、タグ一覧取得、DOM子要素全取得）
　（DOM属性設定、DOMスタイル設定、DOMスタイル一括設定、DOMテキスト設定、DOMイベント設定、DOM_HTML設定）
　・DOMを探す命令とDOMの中身に関する命令で語感を分けるべき
　・js互換の記法を使えるものと、初心者用のかんたんな命令を分ける
　　・初心者用命令をマニュアル上でオススメする
　　・js互換のほうが難しそうな名前にする

（案）
　　DOM～～検索　…　DOMを探して一つ返す
　　DOM～～列挙　…　DOMを探して配列を返す
　　DOM～～取得　…　DOMの属性を取得する
　　DOM～～設定　…　DOMの属性を変更する

（案）初心者用命令
　　（wordを）DOM検索
　　（wordを）DOM列挙
　　（domの属性名を）DOM取得
　　（domの属性名にvalを）DOM設定

「(wordを)DOM検索」
　　　ID=wordを持つ要素を検索して先頭のDOMを返す。
　　　見つからなければタグ名=wordで検索して先頭のDOMを返す。
　　　見つからなければ未定義を戻す

（名称変更案）
変更前	｜変更後	｜引数	｜備考
DOM要素ID取得	｜DOM検索	｜wordを	｜ID=wordをかタグ名=wordを持つ要素を検索して先頭のDOMを返す。
DOM子要素取得	｜DOM子要素検索	｜domからwordを	｜ID=wordをかタグ名=wordを持つ子要素を検索して先頭のDOMを返す。
DOM要素取得 	｜DOMクエリ検索	｜qを	｜CSSクエリセレクタqで検索して先頭のDOMを返す

変更前	｜変更後	｜引数	｜備考
タグ一覧取得 	｜DOM列挙	｜tagの	｜ドキュメント内でタグ名「tag」を持つDOMの配列を返す
タグ一覧取得	｜DOMタグ列挙	｜tagの	｜ドキュメント内でタグ名「tag」を持つDOMの配列を返す
DOM子要素全取得	｜DOM子要素列挙	｜domのtagを	｜domの子要素からタグ名「tag」を持つDOMの配列を返す
DOM要素全取得	｜DOMクエリ列挙	｜qを	｜CSSクエリセレクタqで検索してDOMの配列を返す

※ 案として出してはみたけど名称は審議

★DOM～～設定・取得命令が多すぎる問題２
（DOM属性設定、DOMスタイル設定、DOMスタイル一括設定、DOMテキスト設定、DOMイベント設定、DOM_HTML設定）
　・HTMLの心得がないので理解にかなりかかった
　　・マニュアルのDOM操作の項目にずらりと並んでいる
　　　・DOM属性設定の重要度が高いことにたどりつくまでとても長い時間を要した
　　・初心者はスタイルに設定するか属性に設定するかわからない
　　　・なでしこv1ではサイズもアイテムもイベントも横並びだった
　・初心者用命令「DOM設定」を作って、これ一つでだいたいまかなえるようにしてオススメする
　　　・DOM設定の引数省略版が「DOMテキスト設定」「DOM_HTML設定」であることマニュアルにのせる

例）
　　　幅を設定したい初心者　→domの「幅」に300をDOM設定
　　　widthを属性に設定したい人　→domの「幅」に300をDOM属性設定
　　　widthをスタイルに設定したい人　→domの「幅」に「300px」をDOMスタイル設定

（案）
　・初心者用命令「domの(属性名)に(val)をDOM設定」の仕様
　　・属性名は日本語またはhtml属性名（日本語の一部は和DOMスタイルで実装済み）
　　・属性名の日本語はなでしこv1の互換を持つ名称を優先する
　　・domの種類と属性名を見て、スタイル、属性、イベントのいいところにvalを設定する

・属性名に使えるもの
　　・高さ、高、H、幅、W など	…DOMスタイル設定したことにする
　　・背景色、文字色、文字サイズ、文字書体	…DOMスタイル設定したことにする
　　・テキスト、ヒント	…DOM属性設定する
　　・有効、可視	…値を反転してdisable、hiddenにDOM属性設定する
　　・親部品	…DOM子要素追加する

・domによって変換するhtml属性名を変更する
　　(dom種類)の属性名→html属性名
　　・キャンバスの幅　→　widthにDOM属性設定
　　・ボタンの幅　→　幅にDOMスタイル設定
　　・セレクトボックスの行数　→　size
　　・テキストエリアの行数　→　rows
　　・チェックボックスの値　→　checked
　キャンバスの幅は属性に設定するのにボタンの幅はスタイルに設定とか、ちょっと受け入れがたいと思います。
　なでしこ3が「いい感じに設定してくれる」のが望まれているはず。

例）dom設定でいろいろできるようにした
　https://n3s.nadesi.com/id.php?747

・簡易エディタの初期宣言の例？
　母艦＝「nako3result_div_1」をDOM検索
　母艦にデフォルト親部品設定
　母艦の「HTML」に空をDOM設定

・最後に
　javascriptに慣れた人にとって分かりにくくなるかどうかはたぶん重要ではない

(attach:37-DOME6938DE4BD9C.jpg)

優先度

状態

確認キー

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

編集キー

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

添付ファイル

🎁 ファイルを選択...

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