GPT-3.5にminifyしたコードを解説してもらう
感想:実用レベル
2023/3/20
基素.icon このコードを可能な限り人間に読みやすいJavaScriptにし、丁寧に解説してください
var u=i=>new Headers(i.replace(/\r?\n[\t ]+/g," ").split(/\r\n|\r|\n/).flatMap(n=>{let[r,t]=n.split(":").map(e=>e.trim());return r?[[r,t]]:[]})),l=(i,n)=>new Promise((r,t)=>{let e=new Request(i,n),s=Object.fromEntries(e.headers.entries());if(n.referrer&&(s.Referer=n.referrer),e.signal?.aborted){t(new DOMException("Aborted","AbortError"));return}let{abort:a}=GM_xmlhttpRequest({method:e.method,url:e.url,headers:s,...n?.body?{data:n.body}:{},anonymous:e.credentials==="omit",responseType:"stream",onerror:()=>{t(new TypeError("Network request failed"))},ontimeout:()=>{t(new TypeError("Network request timeout"))},onabort:()=>{t(new DOMException("Aborted","AbortError"))},onreadystatechange:o=>{switch(o.readyState){case 2:{let d=new Response(o.response,{status:o.status,statusText:o.statusText,headers:u(o.responseHeaders)});Object.defineProperty(d,"url",{value:o.finalUrl}),r(d);break}case 4:e.signal?.removeEventListener?.("abort",a);break;default:break}}});e.signal?.addEventListener?.("abort",a)});unsafeWindow.GM_fetch=l;
ChatGPT.icon
以下は、可読性の向上のためのJavaScriptコードです。コードをブラウザのコンソールに貼り付け、実行することができます。詳細な解説はコードの後に記載しています。
code:javascript
// iからHeadersを作成する関数
const createHeadersFromText = (i) => {
const lines = i
.replace(/\r?\n\t +/g, " ") .split(/\r\n|\r|\n/);
const headerList = lines.flatMap((line) => {
const name, value = line.split(":").map((e) => e.trim()); if (name) {
return name, value;
} else {
return [];
}
});
return new Headers(headerList);
};
// ネットワークリクエストを行う関数
const makeNetworkRequest = (url, options) => {
return new Promise((resolve, reject) => {
const request = new Request(url, options);
const headers = Object.fromEntries(request.headers.entries());
if (options.referrer) {
headers.Referer = options.referrer;
}
if (request.signal?.aborted) {
reject(new DOMException("Aborted", "AbortError"));
return;
}
const { abort } = GM_xmlhttpRequest({
method: request.method,
url: request.url,
headers: headers,
...(options?.body ? { data: options.body } : {}),
anonymous: request.credentials === "omit",
responseType: "stream",
onerror: () => {
reject(new TypeError("Network request failed"));
},
ontimeout: () => {
reject(new TypeError("Network request timeout"));
},
onabort: () => {
reject(new DOMException("Aborted", "AbortError"));
},
onreadystatechange: (event) => {
switch (event.readyState) {
case 2: {
const response = new Response(event.response, {
status: event.status,
statusText: event.statusText,
headers: createHeadersFromText(event.responseHeaders),
});
Object.defineProperty(response, "url", { value: event.finalUrl });
resolve(response);
break;
}
case 4: {
if (request.signal?.removeEventListener) {
request.signal.removeEventListener("abort", abort);
}
break;
}
default: {
break;
}
}
},
});
if (request.signal?.addEventListener) {
request.signal.addEventListener("abort", abort);
}
});
};
// GM_fetch関数の定義
unsafeWindow.GM_fetch = makeNetworkRequest;
コードを見ると、以下のことがわかります。コードは、 GM_fetchというグローバル変数に、 makeNetworkRequest関数が割り当てられています。makeNetworkRequestは、Promiseオブジェクトを返し、XHR(XMLHttpRequest)のようなHTTPリクエストを行います。createHeadersFromTextは、HTTPヘッダーのテキストをパースしてHeadersオブジェクトを作成する関数です。makeNetworkRequestは、XHRの設定に加えて、XHRにイベントリスナーを追加し、XHRの状態に応
基素.icon 続けて
ChatGPT.icon
答えます。makeNetworkRequest関数は、以下の引数を受け取ります。url: リクエストのURL。options: リクエストの設定オブジェクト。optionsオブジェクトには、以下のプロパティが含まれます。method: リクエストのHTTPメソッド。referrer: リクエストのReferrerヘッダーの値。body: リクエストのボディ。makeNetworkRequest関数は、XHRの設定を行い、Promiseを返します。XHRの状態が変化するたびに、XHRの onreadystatechangeイベントが発生します。 onreadystatechangeイベントハンドラーでは、XHRの状態に応じた処理が行われます。例外が発生した場合は、Promiseが拒否されます。unsafeWindowオブジェクトは、Greasemonkeyスクリプトで使用されるオブジェクトで、安全なウィンドウコンテキスト内で実行されます。 GM_fetchがunsafeWindowオブジェクトに割り当てられているため、これを使用してGreasemonkeyスクリプト内で GM_fetch関数を呼び出すことができます。
普通に戻すとこうなるのでこれよりは相当読みやすくなっていると言える
code:js
var u = i => new Headers(i.replace(/\r?\n\t +/g, " ").split(/\r\n|\r|\n/).flatMap(n => { let r, t = n.split(":").map(e => e.trim()); return r ? [
] : []
})),
l = (i, n) => new Promise((r, t) => {
let e = new Request(i, n),
s = Object.fromEntries(e.headers.entries());
if (n.referrer && (s.Referer = n.referrer), e.signal ? .aborted) {
t(new DOMException("Aborted", "AbortError"));
return
}
let {
abort: a
} = GM_xmlhttpRequest({
method: e.method,
url: e.url,
headers: s,
...n ? .body ? {
data: n.body
} : {},
anonymous : e.credentials === "omit",
responseType: "stream",
onerror: () => {
t(new TypeError("Network request failed"))
},
ontimeout: () => {
t(new TypeError("Network request timeout"))
},
onabort: () => {
t(new DOMException("Aborted", "AbortError"))
},
onreadystatechange: o => {
switch (o.readyState) {
case 2:
{
let d = new Response(o.response, {
status: o.status,
statusText: o.statusText,
headers: u(o.responseHeaders)
});Object.defineProperty(d, "url", {
value: o.finalUrl
}),
r(d);
break
}
case 4:
e.signal ? .removeEventListener ? .("abort", a);
break;
default:
break
}
}
});
e.signal ? .addEventListener ? .("abort", a)
});
unsafeWindow.GM_fetch = l;