やったこと
初心者で学習中のプログラマーがChatGptでプログラミングすると、上手くいくのかを検証する。
縦10行と横10行のtable生成
自分でもコードをHTMLで書くことはできますが、10行10列を直接書くのは少し時間がかかるのでChatGptに実装してもらえるのかを検証する。
ChatGptに「縦10行と横10列のテーブルをHTMLで作成して」と質問してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブル</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
<td>行1列4</td>
<td>行1列5</td>
<td>行1列6</td>
<td>行1列7</td>
<td>行1列8</td>
<td>行1列9</td>
<td>行1列10</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
<td>行2列4</td>
<td>行2列5</td>
<td>行2列6</td>
<td>行2列7</td>
<td>行2列8</td>
<td>行2列9</td>
<td>行2列10</td>
</tr>
<tr>
<td>行3列1</td>
<td>行3列2</td>
<td>行3列3</td>
<td>行3列4</td>
<td>行3列5</td>
<td>行3列6</td>
<td>行3列7</td>
<td>行3列8</td>
<td>行3列9</td>
<td>行3列10</td>
</tr>
<tr>
<td>行4列1</td>
<td>行4列2</td>
<td>行4列3</td>
<td>行4列4</td>
<td>行4列5</td>
<td>行4列6</td>
<td>行4列7</td>
<td>行4列8</td>
<td>行4列9</td>
<td>行4列10</td>
</tr>
<tr>
<td>行5列1</td>
<td>行5列2</td>
<td>行5列3</td>
<td>行5列4</td>
<td>行5列5</td>
<td>行5列6</td>
<td>行5列7</td>
<td>行5列8</td>
<td>行5列9</td>
<td>行5列10</td>
</tr>
<tr>
<td>行6列1</td>
<td>行6列2</td>
<td>行6列3</td>
<td>行6列4</td>
<td>行6列5</td>
<td>行6列6</td>
<td>行6列7</td>
<td>行6列8</td>
<td>行6列9</td>
<td>行6列10</td>
</tr>
<tr>
<td>行7列1</td>
<td>行7列2</td>
<td>行7列3</td>
<td>行7列4</td>
<td>行7列5</td>
<td>行7列6</td>
<td>行7列7</td>
<td>行7列8</td>
<td>行7列9</td>
<td>行7列10</td>
</tr>
<tr>
<td>行8列1</td>
<td>行8列2</td>
<td>行8列3</td>
<td>行8列4</td>
<td>行8列5</td>
<td>行8列6</td>
<td>行8列7</td>
<td>行8列8</td>
<td>行8列9</td>
<td>行8列10</td>
</tr>
<tr>
<td>行9列1</td>
<td>行9列2</td>
<td>行9列3</td>
<td>行9列4</td>
<td>行9列5</td>
<td>行9列6</td>
<td>行9列7</td>
<td>行9列8</td>
<td>行9列9</td>
<td>行9列10</td>
</tr>
<tr>
<td>行10列1</td>
<td>行10列2</td>
<td>行10列3</td>
<td>行10列4</td>
<td>行10列5</td>
<td>行10列6</td>
<td>行10列7</td>
<td>行10列8</td>
<td>行10列9</td>
<td>行10列10</td>
</tr>
</table>
</body>
</html>
ソースコードが出来ました。自分でコーディングすると時間がかかる作業とかは、お願いできるのかもしれないです。
table生成を効率化できるか
HTMLで直接10行10列を書くのは、プログラミング的には非効率で良くないようです。
これを効率よくするにはどうしたらいいかをChatGptに聞いてみたところjavascriptのfor文を使って生成できるとのこと。
javascriptでHTMLを生成できるという概念が学習中の私には抜けていました。
効率化できたソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブル生成</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table id="myTable"></table>
<script>
const numRows = 10;
const numCols = 10;
const table = document.getElementById('myTable');
for (let i = 0; i < numRows; i++) {
const row = table.insertRow();
for (let j = 0; j < numCols; j++) {
const cell = row.insertCell();
cell.innerText = `行${i + 1}列${j + 1}`;
}
}
</script>
</body>
</html>
今回ChatGptを使用して良かったこと
最初は長いソースコードを手で書くのが面倒だと思い、ChatGptを使用してみましたが結果的にはfor文でコーディングを短くすることができた。
自分のコードや考え方を添削してもらう時に、最適な回答をしてもらうことが出来ました。
結論、ChatGptでもプログラミングができる(基本的なコーディング)
今回のように、基本的な内容であれば問題なくプログラミングができるようです。
また、自分がコーディングしたものを添削や改善をしてもらう場合は、良いアドバイスがもらえるのではないでしょうか。
ソースコードを張り付けて、効率よくする改善できるかを質問すれば回答が今回のように得られるかもしれません。
ChatGptでプログラミングをして簡単なゲームのようなものが作成できるようです。