AIプログラミングとタスク分解

2年前、サイトにコード領域のコピー機能を追加するために、半日ほど試行錯誤した結果、レンダリング効果が少し不満だった。半ば無能なフロントエンド開発者として、改善することも思わなかった。動けばそれで十分だ、と割り切っていた。今年、AIを使って小程序を開発し、フロントエンドの開発もより慣れてきた。そしてリファクタリングを行った（AIが再設計）。

悟り：タスク分解をして、多くの小さなタスクはAIで開発すると自然にこなせる。すでに閉鎖された小程序において、75%のコードをAIが提供し、複数のタスクを分割して引き渡すことで、人工によってプロジェクトコードが組み立てられた。

前文

簡単なことだと考えたけど、コードのコピーボタンを追加する

正文

promot: クラス “highlight” を持つウェブページの要素のコンテナ内に、コードと JavaScript の CSS およびコードを記述して、テキストのコピー機能を実現するコピーボタンを追加します。

最初のドラフトのコードは一見問題があり、基本的には使用可能なものを生成し、コピーされた内容が正しくなく、冗長な文字が含まれているため、最適化を再度誘導し、コアの色設計を指定し、エフェクトを含めるようにしました。

お客様がボタンのサイズと色に関して特定の要件をお持ちであることを認識しており、これらの要件に合わせてスタイルのデザインを再構築できます。以下は、提供されたカラーパレットとボタンサイズの最適化を含むスタイルです。

.copy-btn {
  position: absolute;
  top: 2px; /* 位置調整 */
  right: 2px;
  padding: 3px 6px; /* サイズ縮小 */
  font-size: 12px; /* フォントサイズ縮小 */
  background-color: #8FD1E1; /* ボタンの背景色 */
  color: #272822; /* テキストの色 */
  border: 1px solid #272822; /* ボーダーの色 */
  border-radius: 3px; /* 角丸 */
  cursor: pointer;
  opacity: 0.7; /* デフォルトの不透明度 */
  transition: opacity 0.3s ease, background-color 0.3s ease; /* 平滑なトランジション効果 */
}

.copy-btn:hover {
  opacity: 1; /* マウスオーバー時に完全表示 */
  background-color: #A3D4E5; /* マウスオーバー時の背景色 */
}

.highlight {
  position: relative;
}

このスタイルでは、ボタンのサイズとフォントサイズを小さくして、より洗練された外観にしています。また、ボタンはデフォルトで半透明になっており、マウスをホバーすると完全表示され、背景色がわずかに明るくなることで視覚的なフィードバックを提供します。これにより、お客様のカラー要件を満たしつつ、モダンでユーザーフレンドリーな特徴を備えたデザインを実現しています。

以下はよりシンプルな JavaScript です。

document.addEventListener('DOMContentLoaded', function() {
  // すべての .highlight 要素を検索
  const highlights = document.querySelectorAll('.highlight');

  highlights.forEach(function(highlight) {
    // コピーボタンを作成
    const copyBtn = document.createElement('button');
    copyBtn.textContent = 'コピー';
    copyBtn.classList.add('copy-btn');

    // ボタンを各 .highlight 要素に追加
    highlight.appendChild(copyBtn);

    // クリックイベントリスナーを追加
    copyBtn.addEventListener('click', function() {
      // .highlight 内の最初の <code> 要素からコピーするコードを取得 (存在する場合)
      const code = highlight.querySelector('code') ? highlight.querySelector('code').textContent : '';

      navigator.clipboard.writeText(code).then(() => {
        // コピー成功メッセージを表示
        copyBtn.textContent = '已コピー!';
        setTimeout(() => {
          copyBtn.textContent = 'コピー';
        }, 2000);
      }).catch(err => {
        console.error('コピー失敗: ', err);
      });
    });
  });
});

終わりに

コード領域の右上隅に、トップエリアにコピーボタンを追加することを望んでいたが、フロントエンドに関する知識が不足しており、キーワードに基づいて機能を正確に記述することができなかったため、AIと何度もやり取りして期待に応えられなかった。

しかし、時間の経過とともに、AIがプログラミング開発にどの程度の影響を与えるのかは分からない。