Mill's Note
  1. HOME
  2. jQuery・js
  3. jQueryをJavaScriptへ変換

【jQuery・js】jQueryをJavaScriptへ変換

/

私は script 系があまり得意ではないので、script を使う時はもっぱら直感的にいける jQuery を少し使う程度で作成していましたが、、、

Google様のページスピード重視もあって、最近 jQuery への風当たりが > <;

そもそも jQuery 本体を読み込むだけで、「第三者コードが・・」「レンダリングブロックが・・」と、PageSpeed Insightsでは お小言の嵐。。

案件作業は納期や確実性の問題があるので、ネイティブJS は殆ど使用しなかったのですが、失敗してもOKな自サイトだし、スピード上げという実験の意味も兼ね jQuery 排除にトライ。

とは言え、そもそも苦手なネイティブJS。簡単にできないかと、調べてみました^^;

ChatGPTでjQueryをJavaScriptへ変換

結論から言います
ChatGPT で、メチャ簡単に、jQuery を JS に変換してくれます !!

賢すぎるChatGPT

  1. ChatGPT( https://chatgpt.com/ ) に行く
  2. Box に 「以下のjQueryをJavascriptに変換して下さい」と記入して Enter
  3. 例題が出ますが無視して、Box に 組み終わった jQuery を貼り付けて Enter

たったこれだけで、JS に変換されたコードを書きだしてくれる。
個別の説明まで付けて、、ありがたや～m(__)m

当サイトは script が少ないのでので、確実ではありませんが、、

サイトに載せて、window.scrollTo({ behavior: 'smooth' }); がスムーススクロールにならない以外は全く問題なし。( これは別の原因かも? 原因究明に時間がかかりそうですw )

WordPress の jQuery読み込み解除

functions.php に以下を書き込めばOKです

コンタクトページだけに読み込ませています
PHP
if(!is_page('contact')){ wp_deregister_script("jquery"); }

結果、スピード寄与は少しかも?

サイト共通の jQuery をJS に書き換えて、jQuery解除して

携帯 62p → 64p / デスクトップ 94p で変わらず

うーんコスパ的には、web-font 減らす方が大きい気がします^^;

[おまけ] AI恐るべし

AI 向上の凄まじさは何となく知ってはいましたが。。。

今はフォトショで簡単にできるようになった画像背景の継ぎ足しや細かい抜き、ちょっと前までは一仕事でしたよね。

ChatGPTでは今回のJS変換だけでなく、「css 背景色を黒に」と書けば css コードを書き出してくれる。

今まで身に着けてきた知識がいらなくなるのも遠くはないのかも。。。
と思ってしまいました _ _;;

参考サイト