【ChatGPT】作成してもらったプログラミングコードのヒント

2025年1月6日ブログ

この記事では、質問に対してAIが答えを教えてくれる自然言語処理サービス「ChatGPT」に作成してもらったプログラミングコード関連について書きます。

著作権などよく分かっていないので実際のコードは貼りません。こういう質問をすることでこういうコードを教えてもらったよ～というヒントです。

「ChatGPT」は質問に対してすぱっと回答してくれる便利なサービスです。日々の豆知識や面白い話など幅広いジャンルを網羅もうらしていて、その中の一つにプログラミング（コード）生成があります。

プログラミングの知識が乏とぼしくても「〇〇を〇〇するJavaScriptを教えて」といった感じで質問すると答えが返ってきます。

僕はHTMLとCSSが少しだけできます。できるというのも恥ずかしいくらいほんのちょっとです。1ヶ月だけ「Progate」に加入（今は分からないけど当時は月1,000円ちょっとだった）して学んだだけです。そんな僕からしたら「ChatGPT」は革命でした。

僕はプログラミングの知識はないのにウェブページのあれやこれや変えたいという欲ばかりあります。例えば以下の感じです。

各ウェブサイトの日付を「1日前」という形から「2023年03月08日」という絶対表記に変えたい（例：GitHub）
ページネーションの数を増やしたい
YouTubeのコメント欄で英語を排除するボタンを新規に設置したい
X（旧Twitter）の左側サイドバーに「ミュート」へのリンクボタンを新しく設置したい

上記を実装する場合、今まではプログラミングができる友人や知人にちょっとしたお礼をしてから教えてもらっていました。忙しかったり僕のお金がない時は諦めるしかありませんでした。

「ChatGPT」が登場してからは誰かに依頼することなく自分が持っている能力の範囲内で実装できるようになりました。

小さいものを含めると優に100を超えるコードを教えてもらったので本記事ではこういう質問をしたよ～とメモ代わりに書きたいと思います。実際のコードは書きません。こういう質問をしたよ！というヒントだけです。

当たり前ですがChatGPT（AI）に限らず、インターネット上にあるコードを適用する場合は全部自己責任です。結局のところ誰かに頼らずコードを作れるよう自分で勉強するのが一番です。

1. 「ChatGPT」に作成してもらったコード（JavaScriptなど）一覧
2. 「ChatGPT」に関するポイント
3. 感想

「ChatGPT」に作成してもらったコード（JavaScriptなど）一覧

GitHubの日付を絶対表示

通常、PCウェブサイト版「GitHub」サイトのReleasesページ（例：こちら）では更新日時が「yesterday」や「3 days ago」といった感じで相対表示になっています。

僕は3日前だろうが昨日だろうが「2023年〇月〇日」という形式（絶対表示）で表示してほしいです。設定で何かあるかなぁと思い調べてみましたが、それらしき項目が見当たらず…。「ChatGPT」に頼んでみることにしました。

まず開発者ツールを起動して日付が書かれている部分の要素やclass名を調べます。「relative-time」というタグに「datetime="〇〇"」といった形で記載されていることが分かりました。

PC版「GitHub」のリリースページにある相対表示の日付を開発者ツールで確認してみた画像

僕は以下のように質問しました。

以下のJavaScriptを教えてください。
relative-timeのdatetime属性を取得する。「2023-03-08T08:33:50Z」といった感じで日付になっているので、その日付を「2023年03月08日」といった形に直す。変換した日付を新しくrelative-timeのテキストと置き換える

上記質問だけだとうまく動作しなかったので、もっと具体的に質問したり、ページが書き換わっていないことを検出したら自動的に実行するようにしたり、追加でやりとりしました。

結果、GitHubにアクセスすると自動的に日付を絶対表示にしてくれるJavaScriptコードを教えてくれました。

PC版「GitHub」のリリースページにある相対表示の日付を「ChatGPT」に頼んだJavaScriptで絶対表記に変換した画像

僕は今回のようなウェブサイトを書き換えるJavaScriptを主に教えてもらっています。

これらのコードはウェブサイトにJavaScriptを適用できるChrome拡張機能やFirefoxアドオンを利用することで実装できます。本記事を最初に書いた2023年2月では「Tampermonkeyタンパーモンキー」を使っていましたが、2024年夏からは「Violentmonkeyバイオレントモンキー」を使っています。

「ChatGPT」に教えてもらったJavaScriptコードを「Violentmonkey」拡張機能に書き込んでいる画像

X上で確認ダイアログを表示せずにツイート削除

X（旧Twitter）に投稿したポストを削除する場合、一度「ポストを削除しますか？」という確認ダイアログが表示されます。

僕はメインとサブで2つのアカウントを所持しています。サブ垢のほうは確認ダイアログを表示せずにすぐ削除してほしいと思いました。「ChatGPT」の出番です。

<!--2025年1月時点では既にX（旧Twitter）の構造が変わっているのでセレクタは変える必要がある-->
「.css-1dbjc4n.r-1loqt21.r-18u37iz.r-1ny4l3l.r-ymttw5.r-1f1sjgu.r-o7ynqc.r-6416eg.r-13qz1uu」クラスをクリックした時、自動的にポップアップ内にあるdiv[style="background-color: rgb(244, 33, 46);"]要素を1回クリックするJavaScript

上記質問に加えて1000ミリ秒ごとにコードを実行させるようお願いしました。結果、ポスト内にある「…」ボタン→「削除」を押すとその後の確認ダイアログを表示させずにすぐ削除できるようになりました。

「Vivaldi Social（マストドン）」上でのコードです。マストドンは右側サイドバーに各種ボタンがありますが、「プロフィール」へのリンクはありません。

自身のプロフィールページにアクセスしたい時、うっかり右側サイドバーを見てしまい「あれ？ないぞ…」となってしまいました。実際は左側サイドバーのプロフィールアイコンをクリックする必要があります。

不便に感じたので右側サイドバーに「プロフィール」ボタンを設置してみました。「ChatGPT」に作成してもらい「Tampermonkey」や「Violentmonkey」上で有効にします。

「Vivaldi Social」の右側サイドバーにプロフィールリンクを設置するJavaScriptを「Tampermonkey」に書き込んでいる画像

「Vivaldi Social」にアクセスすると自動的に「プロフィール」へのリンクが右側サイドバーに設置されます。

「ChatGPT」に教えてもらったJavaScriptコードを使って「Vivaldi Social」の右側サイドバーにプロフィールリンクを設置した画像

コードだけが残っていて質問した内容はどこかにいっていました。

コードを解説するよう「ChatGPT」に頼んだ画像を貼っておきます。左上のプロフィールアイコンのリンクを取得してそれを右側サイドバーにも複製する…的な感じで質問した気がします。

「ChatGPT」に「Vivaldi Social」の右側サイドバーにプロフィールリンクを設置するコードを解説してもらっている画像

YouTubeのコメント欄から英語を排除

僕はYouTubeでサッカーのハイライトをよく見ますが、海外の場合英語コメントが多く日本人のコメントが埋もれています。

「YouTube」に公開されている海外サッカーのハイライトに投稿された英語のコメント画像

Chrome拡張機能を利用して絞り込むことも可能です。しかし、僕は「Show YouTube comments while watching」というコメント欄をサイドバーに設置するChrome拡張機能を利用していてこの拡張機能と相性が悪い時があります。

「ChatGPT」があるんだから…ということでChrome拡張機能を利用せずに自分で実装することにしました。自分で…っていってもAI任せなので自分とは言えないですね…(笑)

これまた部屋を削除していて残っていなかったので何となくこんな感じで質問したよーというのを貼っておきます。

【質問1】
comment-content #content-text内のテキストを調べて、もし英語が含まれている場合、ytd-comment-thread-rendererを非表示するJavaScript

【質問2】
1つだけでなく、全てのcomment-content #content-textに実行するよう修正

【質問3】
ytd-comments#comments div#title内に、「英語排除」というspanテキストを作成。それをクリックした時に、先ほど教えてくれたJavaScriptを実行するようにして。かつ以下のスタイルを埋め込んで。
cursor: pointer; color: #fff; font-size: 18px; margin-left: 21px;

【質問4】
完成したコードを、4000ミリ秒後に実行するよう修正

上記のように質問して返ってきたJavaScriptを「Violentmonkey」にて有効にします。

YouTubeにアクセスした時、コメント欄の「並び替え」ボタンの横に「英語排除」というボタンが出現します。クリックすると英語が含まれるコメントを非表示（display: none)にしてくれます。

「ChatGPT」に教えてもらったJavaScriptコードを使ってPC版「YouTube」のコメント欄に英語排除ボタンを設置した画像

現在読み込まれているコメントに対してだけ発動するので、何回かクリックしてコメントが最後まで読み込まれるようにする必要があります。

「ChatGPT」はちょっとCSSとHTMLが分かるだけでJavaScriptの書き方一切分からない！という僕にとても便利です。

恐らく、完全初心者というよりどこかの言語をほんの少しかじっている程度の人に役立つと思います。わざわざ他の言語を学ばなくても学んでいる範囲の言語でAIが別言語に書き換えてくれます。

YouTube、常に「最近アップロードされた動画」タブを選択する

「YouTube」のトップページを開いた時、常にヘッダーの「最近アップロードされた動画」を選択するJavaScriptもお願いしました。2025年1月時点ではもう使っていませんけども。

以下のJavaScriptを教えてください。解説は不要です。
#header内のyt-chip-cloud-chip-rendererを取得する。yt-chip-cloud-chip-renderer内の#textのtitle属性を調べる。もし、「最近アップロードされた動画」というテキストだった場合に選択する。そのテキストの1つ上の階層のyt-chip-cloud-chip-rendererに戻って、aria-selected="〇〇"を調べる。もしaria-selected="false"だった場合、1回クリックして切り替えるJavaScript。