はじめに
☝ 始めに と書いてあるということは、終わりがあるというわけでして、、、是非、ちょっとでもいいので、読み進めていただけると私のように単純な人間は非常にうれしく感じるはずです。ハイ。
この記事では、タイトルに書いてあるように、 JavaScript の秘密の武器：Object.getownPropertyDescription() のガイド というテーマでお話が進んでいきます。そーいう脚本になっているのです。
何で秘密の武器が必要になったのか（読まなくても問題はありません）
+-
どうやら最近は、Qiita Advent Calendar というものがあるそうでして、私はめんどくさがり屋なので、記事を作成した際に、その記事をカレンダーに自動で登録するプログラムを作成する際に、ほら、なんかタイトルと、記事の URL を入力しなきゃじゃないですか、その時、以下のコードみたいにして簡単にやっても、うまくいかなかったので調べて、今回、記事という形にさせていただきました。
document.querySelector(".style-6jir9>button").click();
document.getElementById("NotRegisterCalendarItemJoinModal-title").value = <article_title>;
document.getElementById("NotRegisterCalendarItemJoinModal-url").value = <article_url>;
document.querySelector(".style-114pv74").click();
document.querySelector(".style-1icqxx9").click();
なんだ！？なんなんだ！？
Object.getOwnPropertyDescription() は、指定されたオブジェクトの特定のプロパティに関する詳細な情報を返すメソッドです。このメソッドは、プロパティの属性を調査し、操作するための強力なツールです。
基本的な使い方
const obj = { name: "John Doe" };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);
// 出力:
// {
// value: "John Doe",
// writable: true,
// enumerable: true,
// configurable: true
// }
プロパティディスクリプタの４つの主要な属性
1 - value
プロパティの実際の値を保持します。
const person = { age: 30 };
const ageDescriptor = Object.getOwnPropertyDescriptor(person, 'age');
console.log(ageDescriptor.value); // 30
2 - writable
プロパティの値を変更できるかどうかを示します。
const constObj = {};
Object.defineProperty(constObj, 'PI', {
value: 3.14159,
writable: false
});
console.log(constObj.PI); // 3.14159
constObj.PI = 3.14; // 厳格モードでエラー、通常モードでは無視される
console.log(constObj.PI); // まだ3.14159
3 - enumerable
プロパティが for...in ループや Object.keys() で列挙可能かどうかを示します。
const hiddenObj = {};
Object.defineProperty(hiddenObj, 'secretKey', {
value: 'top-secret',
enumerable: false
});
console.log(Object.keys(hiddenObj)); // []
for (let key in hiddenObj) {
console.log(key); // 何も出力されない
}
4 - configurable
プロパティを削除したり、その属性を変更したりできるかどうかを示します。
const mutableObj = { data: 'original' };
Object.defineProperty(mutableObj, 'data', {
configurable: false
});
delete mutableObj.data; // 削除できない
console.log(mutableObj.data); // 'original'
実践的な活用例：React でのイベント操作
はい、お話が初めに戻ります。
何か入力フィールドに対して、値を入力しても反映されないことがよくあります。モダンなフレームワークを使っているサイトでは。
// React コンポーネントの入力フィールドの値を設定
const inputElement = document.getElementById('myInput');
const valueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
'value'
).set;
// 内部の値を直接設定
valueSetter.call(inputElement, 'New Value');
// 入力イベントを発火
inputElement.dispatchEvent(new Event('input', { bubbles: true }));
最後に
最中的に、私のコードはこんな☟感じになったのでした。
document.querySelector(".style-6jir9>button").click();
Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set.call(document.getElementById("NotRegisterCalendarItemJoinModal-title"), <article_title>);
document.getElementById("NotRegisterCalendarItemJoinModal-title").dispatchEvent(new Event("input", { bubbles: true }));
Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set.call(document.getElementById("NotRegisterCalendarItemJoinModal-url"), <article_url>);
document.getElementById("NotRegisterCalendarItemJoinModal-url").dispatchEvent(new Event("input", { bubbles: true }));
document.querySelector(".style-114pv74").click();
document.querySelector(".style-1icqxx9").click();
今回の記事は面白くないです。私がもうお眠なので、、、
最後まで読んでくれて、本当にありがとう😆