ChatGPTにJavascriptをJQueryに変換して貰った結果

2023-04-30ChatGPT プログラム,ChatGPT

OpenAIの対話型AIモデル「ChatGPT」にいくつかのJavascriptをJQueryに変換して貰ってみました。

今回からGPT-4モデルを利用しています。

確認環境

ChatGPT PLUS

1. AIにJavascriptをJQueryに変換して貰った結果

AIにJavascriptをJQueryに変換して貰った結果

「ChatGPT」にJavascriptをJQuery変換して貰った結果になります。

マウスカーソルに要素を追従移動させるコード

マウスカーソルに要素を追従移動させるJavaScriptをJQueryに変換します。

以下のJavascriptをPythonに変換して下さい。

let container = document.querySelector('#container');
let item = document.querySelector('#item');

let mousemove_function = () => {
	item.style.left = event.clientX - 25 + "px";
	item.style.top = event.clientY - 25 + "px";
}

container.addEventListener('mousemove', mousemove_function);

以下のコードが、指定されたJavaScriptをjQueryに変換したものです。

$(document).ready(function() {
  let container = $('#container');
  let item = $('#item');

  let mousemove_function = (event) => {
    item.css('left', event.clientX - 25 + 'px');
    item.css('top', event.clientY - 25 + 'px');
  };

  container.on('mousemove', mousemove_function);
});

このコードは、ドキュメントが準備されると、コンテナとアイテムをjQueryオブジェクトとして選択し、マウスムーブイベントをコンテナにバインドします。イベントが発生すると、アイテムの位置がマウスカーソルの位置に応じて変更されます。

OSがダークモードかどうか判別するコード

OSがダークモードかどうか判別する場合のJavaScriptコードをJqueryに変換する。

if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
	console.log('ダークモードです。');
} else {
	console.log('ダークモードではありません。');
}

以下のコードが、指定されたJavaScriptをjQueryに変換したものです。

$(document).ready(function() {
  if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
    console.log('ダークモードです。');
  } else {
    console.log('ダークモードではありません。');
  }
});

このコードは、ドキュメントが準備されると、ウィンドウのカラースキーム設定を確認し、ダークモードの場合とそれ以外の場合で異なるメッセージをコンソールに出力します。ただし、この例では実際のjQuery機能は使用されていません。

SVGの図形を描画するコード

SVGの図形を描画するコードの場合、JQueryではどういった記述になるのでしょうか。

//svg
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
svg.setAttribute("viewbox", "0 0 200 200");
svg.setAttribute('style', 'background-color:#faebd7;');

//line
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1',20);
line.setAttribute('y1',20);
line.setAttribute('x2',180);
line.setAttribute('y2',180);
line.setAttribute('stroke', '#008080');
line.setAttribute('stroke-width', 5);
line.setAttribute('stroke-dasharray', "none");//破線 10,10 etc
line.setAttribute('stroke-linejoin', 'miter'); //角 miter round bevel inherit
line.setAttribute('stroke-linecap', 'butt'); //切れ目 butt round square inherit
line.setAttribute("opacity", 1);
line.setAttribute('fill-opacity', 1);
line.setAttribute('stroke-opacity', 1);
line.setAttribute('transform', "rotate(0)");

//作成した図形をsvgに追加
svg.appendChild( line );

//特定の要素内にsvgを追加（bodyでも可）
document.querySelector('#container').appendChild( svg );

以下のコードが、指定されたJavaScriptをjQueryに変換したものです。

$(document).ready(function() {
  //svg
  const svg = $(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
  svg.attr({
    "width": "200",
    "height": "200",
    "viewbox": "0 0 200 200",
    "style": "background-color:#faebd7;"
  });

  //line
  const line = $(document.createElementNS('http://www.w3.org/2000/svg', 'line'));
  line.attr({
    'x1': 20,
    'y1': 20,
    'x2': 180,
    'y2': 180,
    'stroke': '#008080',
    'stroke-width': 5,
    'stroke-dasharray': "none", //破線 10,10 etc
    'stroke-linejoin': 'miter', //角 miter round bevel inherit
    'stroke-linecap': 'butt', //切れ目 butt round square inherit
    "opacity": 1,
    'fill-opacity': 1,
    'stroke-opacity': 1,
    'transform': "rotate(0)"
  });

  //作成した図形をsvgに追加
  svg.append(line);

  //特定の要素内にsvgを追加（bodyでも可）
  $('#container').append(svg);
});

このコードは、ドキュメントが準備されると、SVG要素とその中の線要素を作成し、線の属性を設定した後、SVG要素を特定の要素（この場合は#container）に追加します。

まず、私が書いた元のコードが無駄に冗長なので、コンパクトにされているようですね。

CSSのスタイルを動的に変更するコード

JavaScriptのフロントエンドで良く使われるクリックイベントとCSSの変更系です。
addEventListener()はon()イベントに変換されている事が確認できます。

//要素を指定
const blue = document.getElementById('blue');
const red = document.getElementById('red');
const target = document.getElementById('target');

//blueボタンが押された時
blue.addEventListener('click', function () {

	target.style.background = '#FF1744';

}, false);

//redボタンが押された時
red.addEventListener('click', function () {

	target.style.background = '#0091EA';

}, false);

以下のコードが、指定されたJavaScriptをjQueryに変換したものです。

$(document).ready(function() {
  //要素を指定
  const blue = $('#blue');
  const red = $('#red');
  const target = $('#target');

  //blueボタンが押された時
  blue.on('click', function() {
    target.css('background', '#FF1744');
  });

  //redボタンが押された時
  red.on('click', function() {
    target.css('background', '#0091EA');
  });
});

このコードは、ドキュメントが準備されると、blueボタンとredボタンをクリックしたときのイベントリスナーを設定し、それぞれのボタンがクリックされたときに、ターゲット要素の背景色を変更します。

JavascriptからJQueryへの変換では概ね問題なく変換が完了しています。
そもそも、JQuery内でJavaScriptが動きますので、変換する必要がない場面も多いですが、JQueryが読み込まれている環境であれば、JavaScriptより短いコードになる可能性が高いので利用する価値はあります。

ChatGPT プログラム,ChatGPT

Posted by Yousuke.U

ディスカッション

コメント一覧

まだ、コメントがありません