html formにセットされた値を効率よく取得する。
Adobe一般, css, html, Illustrator, javascript
前回からの続きですがAdobe CEPでUI上でパラメータの値をユーザー側で設定してjsx側に送る事は何度も何度も出てくると思います。昔はj-queryで取得したなんて事もやってましたが流石に取得するformの数が増えてゆくと地道に一つづつ取得するなんて事は非効率的だし苦痛です。さらにJSONでjsx側に送るため効率よくobjectにまとめなければなりません。arrayメソッドを中心に効率よく取得してみましょう。
topcoatのcssをベースにしたhtmlから取得してゆきます。最初はラジオボタンの簡単なhtmlです。チェックされたボタンの値を取得します。実はラジオボタンの値を取得するだけなら簡単に一行で取得できます。
arrayメソッドで取得する場合もfindメソッドで一発で取得できます。関数内の条件に合った最初の要素を返します。
ただしarrayメソッドを使用する場合はclass属性等から取得後にArray.fromメソッドで配列のようなHTMLCollectionをArrayオブジェクトに変換する必要があるので注意。それでラジオボタンの値の取得はとても簡単ですが問題はid,value,data要素などを一気に取得する場合が厄介です。
今度チェックボックスのチェックのvalueを取得しつつ同時にid名もvalueと紐付けて取得します。後々jsxに値を送る事も考えてobjectに格納します。もちろん一つずつ取得するのは面倒なので一度に取得します。
forEachの外側で一度空のオブジェクトを宣言してArrayオブジェクトに変換されたclass属性からid名をオブジェクトのkeyとして、checkのvalueをオブジェクトのvalueとして格納すれば一度にオブジェクトとしてまとめる。一般的な方法ですが応用の効くやり方です、とはいえ外側の空のオブジェクトの宣言がいまいちなのでうまく纏めてみる。
reduceメソッドなら初期値をセットできて各配列の要素から値を抜き出しが可。数あるECMA5のArrayメソッドの中でも一番強力でしょう。もっと複雑な値をセットしたformからdatasetからも色んな値を取り出してみます。
複数のdatasetから各種値を取り出す。
reduceメソッドで初期値として空のオブジェクトの格納された配列をセットしてそこに各チェックボックスのdatasetとチェックvalueをセットします。初期値に空の配列をセットして各チェックボックスのdatasetのkeyとvalueをObject.entriesでobjectのkeyとvalueとしてセット。さらにチェックボックスのidとチェックの値もオブジェクトにセットして配列に各チェックボックスの情報をオブジェクトとしてセットできます。このようにオブジェクト、配列はもちろんMapなんかもreduceメソッドでkeyとvalueを格納できます。実際Adobe Extension上で役に立つのかというとIllustratorなんかでドキュメントの全ての特色情報を取得してformとしてパネル上に表示して取得した特色情報をさらにユーザーがパネル上で選択して選択した情報を元にjsx上で処理させるなんてこと、頻繁にありますので動的なformの作成、formから情報を取得、jsxに送信といった一連の流れを簡素するのは必須でしょう。