AIによるプログラムの作成（JavaScript）

－HTMLから入力してCSVファイルを出力する－

1. 概要

「プログラム作りはAIでやる時代になった」と思っています。前回の投稿において、HTMLから底辺と高さを入力し、三角形の面積を求め、結果をHTMLに表示し、CSVファイルとして出力するプログラムの作成を紹介しました。これを題材に、AIで同じものを作って、どの程度うまく行くのかを調べてみることにしました。その結果、（当然ながら）超簡単に数秒でプログラムを作ってくれました。「質問」や「修正質問」には、JavaScriptのプログラミング技術よりも、JavaScriptとHTMLの関係やOS特有のコード等、基本的な取り決め事を知っておく必要があると思いました。この部分を知るためには、前回の「JavaScript習得－HTMLから入力してCSVファイルを出力する－」は参考になると思います（この基本的な取り決め部分もAIに聞きながら進むことは原理的には可能）。基本的な枠組みがわかっていれば、プログラミング技術はなくても、的確な日本語を書ければ、十分なレベルのプログラムが作れます。

今回は、三角形の面積計算を例にしましたが、職場には、「入力と表の出力」の作業は多くあるので、これを参考にすれば、すぐに活用できるプログラムが簡単に作れます。ブラウザとメモ帳とAIがあれば、だれでも、簡単に有用なプログラムを作れます。便利な時代になりました。

最後に、注意点をひとつ。わずかな入力・出力形式の調整には、トライ＆エラーが必要で、特に、美的センスも含めるとかなりの時間が必要でしょう。AIの気まぐれな部分がこの作業を難しくするようです。その意味で、美的センス部分は、ある程度で妥協するか、直接コードを修正する技術を習得する必要があります。

JavaScript習得－HTMLから入力してCSVファイルを出力する－へのリンク

2. Grok3によるプログラムの作成

▶ 質問；「三角形の底辺と高さをHTMLから入力して、面積をHTMLに表示して、結果をCSVで保存するプログラムをJavaScriptで作ってください」

注意点：

・JavaScriptとHTMLの関係を知らないと、「三角形の底辺と高さを入力して、面積を計算し表示して、結果をCSVで保存するプログラムをJavaScriptで作ってください」とHTMLを無視して質問すると思います。この質問で作ったら、HTML部分のないJavaScript部分だけのプログラムを出力しました（単体で使えない）。→前回の投稿を読めば、この質問ではよくないということは分かります。

▶ 作成結果；

（HTML画面とエクセルによるCSVファイルの表示）



プログラムは、ほぼ、私が作ったものと同じですが、エラー処理等もありAIのほうが優れたプログラムと言えます。しかし、出力ファイルの文字化けが起こっていました。これは、CSVの先頭に「バイトオーダーマーク（BOM）」が無いことに起因しています。質問時に、「windowsのエクセルで読めるCSVで保存する」とすれば改善できます。また、エクセルの表は横向きの表で、縦にして欲しいとのリクエストもしました。

▶ 追加質問；「結果はwindowsのエクセル読み取ります。適切な出力に変更してください」

注意点；

・CSVファイルの中には、OSに依存する部分あるという事を知っておく必要があります。具体的には、先頭のBOMと改行コード。

→→前回の投稿を読めば、バイトオーダーマークのことが分かります

▶ 追加質問；「エクセルへの出力を縦にしてください」

注意点；

特に知識必要なし、常識の範囲内

（エクセルによるCSVファイルの表示）



3. 最終リスト

  • <!DOCTYPE html>
  • <html lang="ja">
  • <head>
  • <meta charset="UTF-8">
  • <title>三角形の面積計算</title>
  • <style>
  • body {
  • font-family: Arial, sans-serif;
  • max-width: 600px;
  • margin: 20px auto;
  • padding: 20px;
  • }
  • label, input, button {
  • margin: 10px 0;
  • }
  • #result {
  • margin-top: 20px;
  • font-weight: bold;
  • }
  • </style>
  • </head>
  • <body>
  • <h1>三角形の面積計算</h1>
  • <form id="triangleForm">
  • <label for="base">底辺 (cm):</label><br>
  • <input type="number" id="base" name="base" step="any" required><br>
  • <label for="height">高さ (cm):</label><br>
  • <input type="number" id="height" name="height" step="any" required><br>
  • <button type="submit">面積を計算</button>
  • </form>
  • <div id="result"></div>
  • <button id="downloadBtn" style="display:none; margin-top: 10px;">結果をCSVでダウンロード</button>
  • <script>
  • // フォーム送信時の処理
  • document.getElementById('triangleForm').addEventListener('submit', function(event) {
  • event.preventDefault();
  • // 入力値の取得
  • const base = parseFloat(document.getElementById('base').value);
  • const height = parseFloat(document.getElementById('height').value);
  • // 入力値の検証
  • if (isNaN(base) || isNaN(height) || base <= 0 || height <= 0) {
  • document.getElementById('result').innerText = '正の数を入力してください。';
  • document.getElementById('downloadBtn').style.display = 'none';
  • return;
  • }
  • // 面積の計算
  • const area = (base * height) / 2;
  • // 結果の表示
  • document.getElementById('result').innerText = `三角形の面積: ${area.toFixed(2)} 平方cm`;
  • document.getElementById('downloadBtn').style.display = 'block';
  • // CSVデータの準備（縦に配置）
  • const csvContent = `項目,値\n底辺(cm),${base}\n高さ(cm),${height}\n面積(平方cm),${area.toFixed(2)}`;
  • const bom = "\uFEFF"; // UTF-8 BOM
  • const fullCsvContent = bom + csvContent;
  • // ダウンロードボタンの設定
  • const downloadBtn = document.getElementById('downloadBtn');
  • downloadBtn.onclick = function() {
  • const blob = new Blob([fullCsvContent], { type: 'text/csv;charset=utf-8;' });
  • const link = document.createElement('a');
  • const url = URL.createObjectURL(blob);
  • link.setAttribute('href', url);
  • link.setAttribute('download', 'triangle_area.csv');
  • document.body.appendChild(link);
  • link.click();
  • document.body.removeChild(link);
  • };
  • });
  • </script>
  • </body>
  • </html>

4. 複数の三角形を入力できるプログラムへ変更

複数の三角形を入力できるようにするには、AIに「複数に対応」と入力すると、プログラムを作ってくれました。しかし、（美的センスの問題として）なかなかいい感じのプログラムになりませんでした。取り組みの途中に、とても感じの良いプログラムを作ってくれましたが、別の日に作ってみると、同じようなきれいな表示のプログラムを作ってくれませんでした。記念に、綺麗なHTML画面とプログラムリストを残しておきます。今後、このプログラムを出力する質問をどう作るのか検討してみたいと思っています。

▶ 複数の三角形の処理

  • <!DOCTYPE html>
  • <html lang="ja">
  • <head>
  • <meta charset="UTF-8">
  • <title>三角形の面積計算（複数データ対応・横並びCSV）</title>
  • <style>
  • body {
  • font-family: Arial, sans-serif;
  • max-width: 600px;
  • margin: 20px auto;
  • padding: 20px;
  • }
  • .form-group {
  • margin-bottom: 15px;
  • }
  • label {
  • display: inline-block;
  • width: 100px;
  • }
  • input {
  • padding: 5px;
  • width: 150px;
  • }
  • button {
  • padding: 10px 20px;
  • background-color: #4CAF50;
  • color: white;
  • border: none;
  • cursor: pointer;
  • margin-right: 10px;
  • }
  • button:hover {
  • background-color: #45a049;
  • }
  • #result {
  • margin-top: 20px;
  • font-weight: bold;
  • }
  • #dataList {
  • margin-top: 20px;
  • }
  • table {
  • width: 100%;
  • border-collapse: collapse;
  • margin-top: 10px;
  • }
  • th, td {
  • border: 1px solid #ddd;
  • padding: 8px;
  • text-align: left;
  • }
  • th {
  • background-color: #f2f2f2;
  • }
  • </style>
  • </head>
  • <body>
  • <h2>三角形の面積計算（複数データ対応）</h2>
  • <div class="form-group">
  • <label for="base">底辺 (cm):</label>
  • <input type="number" id="base" step="0.1" required>
  • </div>
  • <div class="form-group">
  • <label for="height">高さ (cm):</label>
  • <input type="number" id="height" step="0.1" required>
  • </div>
  • <button onclick="calculateArea()">面積を計算</button>
  • <button onclick="downloadCSV()">CSVをダウンロード</button>
  • <div id="result"></div>
  • <div id="dataList">
  • <h3>計算履歴</h3>
  • <table id="historyTable">
  • <thead>
  • <tr>
  • <th>底辺 (cm)</th>
  • <th>高さ (cm)</th>
  • <th>面積 (cm2)</th>
  • </tr>
  • </thead>
  • <tbody id="historyBody"></tbody>
  • </table>
  • </div>
  • <script>
  • // データを保存する配列
  • let calculations = [];
  • function calculateArea() {
  • // 入力値の取得
  • const base = parseFloat(document.getElementById('base').value);
  • const height = parseFloat(document.getElementById('height').value);
  • // 入力値の検証
  • if (isNaN(base) || isNaN(height)) {
  • document.getElementById('result').innerHTML =
  • '<span style="color: red;">有効な数値を入力してください</span>';
  • return;
  • }
  • if (base <= 0 || height <= 0) {
  • document.getElementById('result').innerHTML =
  • '<span style="color: red;">正の数値を入力してください</span>';
  • return;
  • }
  • // 面積の計算
  • const area = (base * height) / 2;
  • // 結果をHTMLに表示
  • document.getElementById('result').innerHTML =
  • `底辺: ${base}cm, 高さ: ${height}cm, 面積: ${area.toFixed(2)}cm2`;
  • // データを配列に保存
  • calculations.push({ base, height, area: area.toFixed(2) });
  • // 履歴テーブルを更新
  • updateHistoryTable();
  • // 入力フィールドをクリア
  • document.getElementById('base').value = '';
  • document.getElementById('height').value = '';
  • }
  • function updateHistoryTable() {
  • const tbody = document.getElementById('historyBody');
  • tbody.innerHTML = ''; // テーブルをクリア
  • calculations.forEach(calc => {
  • const row = document.createElement('tr');
  • row.innerHTML = `
  • <td>${calc.base}</td>
  • <td>${calc.height}</td>
  • <td>${calc.area}</td>
  • `;
  • tbody.appendChild(row);
  • });
  • }
  • function downloadCSV() {
  • if (calculations.length === 0) {
  • alert('データがありません。まず面積を計算してください。');
  • return;
  • }
  • // CSVデータ作成（UTF-8 BOMを先頭に付加、横並び形式）
  • let csvContent = '\uFEFF底辺(cm),高さ(cm),面積(cm2)\n';
  • calculations.forEach(calc => {
  • csvContent += `${calc.base},${calc.height},${calc.area}\n`;
  • });
  • // CSVファイルのダウンロード
  • const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  • const link = document.createElement('a');
  • const url = URL.createObjectURL(blob);
  • link.setAttribute('href', url);
  • link.setAttribute('download', 'triangle_area.csv');
  • link.style.visibility = 'hidden';
  • document.body.appendChild(link);
  • link.click();
  • document.body.removeChild(link);
  • }
  • </script>
  • </body>
  • </html>