プログラミングするのに準備はいらない！ChatGPTを使って最短手順でプログラミング！
爆速プログラミング手順
ChatGPTは使えるようにしておいてください。
使うアプリは以下だけです。
- メモ帳（PC標準のものでOK）
- ブラウザ（PC標準のものでOK）
「インストール」とか「環境設定」といった、謎の作業はいりません。
手順は以下。
- ChatGPTにプログラムを書いてもらう
- メモ帳に貼り付け、拡張子を “.html” にして保存
- 保存したファイルをダブルクリック
これだけです。
Step1：ChatGPTにプログラムを書いてもらおう
今回は3Dグラフィックを表示する画面を作ってみましょう。
このようにChatGPTに聞いてみます。
HTMLとJavaScriptとthree.jsを使って、いろいろな3Dグラフィックを表示するサンプルプログラムを作って
この３つのキーワードを入れます。
- HTML
- JavaScript
- three.js
特に、three.js がポイント。
three.js は、JavaScriptでグラフィックを表示できるライブラリです。このキーワードを入れておかないと、ちょっと複雑なプログラムになってしまいます。
このようなプログラムを書いてくれました。（違うようになる場合もあります）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Graphics with Three.js</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// レンダラーを作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// オブジェクトを作成
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const geometry2 = new THREE.SphereGeometry();
const material2 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(geometry2, material2);
sphere.position.x = 3;
scene.add(sphere);
// アニメーションの設定
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
sphere.rotation.x -= 0.01;
sphere.rotation.y -= 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>Step2：メモ帳に貼り付けよう
ChatGPTが書いたコードの右上に、Copy code ボタンがあります。押してコピーしましょう。
メモ帳を立ち上げましょう。貼り付けメニューでコードを貼り付けます。
graphic.html という名前で保存しましょう。
Step3：ページを立ち上げよう
graphic.html をダブルクリックします。
Webページが表示されました！
実際に表示すると、くるくる回転しています。
3Dグラフィック画面プログラムの完成です！
いろいろ改造してみよう
。。と、ここで終わってはいけません。ここからがプログラマーの本職です。
これを元手にして、いろいろ改造してみましょう！
- 色を変えてみよう：それっぽいところを色々いじってみましょう
- 回転速度を変えてみよう：それっぽいところを色々いじってみましょう
- 図形を増やしてみよう：それっぽいキーワードで検索して調べよう
プログラムの全容が全然分からなくても、大丈夫。
色だったらcolorかな？じゃあcolorとかいじってみようかな？程度でよいんです。
初めは、とりあえず直して動かしてみるのが大事。間違ったって、何も壊れないし、誰に迷惑かけるでもないし。
まとめ
プログラミングで大変なこと、ひとつには、まずプログラミングを開始するまでの準備がたいへん、ということがあります。
たいへんなことはChatGPTにお願いして、がんがんプログラミングしましょう！
コメント