生成AIはコードの修正に向いている

こんにちは！私はこれまでしていたプログラミングの勉強が意味ないものを化してしまった現実を受け入れられない1人の中年です。

大人になってからの勉強というのはただの自信以外の何物でもないのかなと思いました。

そもそも昔はローマのカソリック教会によって聖書すら読ませてくれない時代もありました。

日本も戦後様々な本が燃やされたということを耳にしました。

勉強できる、こういった駄文を書けるだけでもありがたいのかなと思っています。

生成AIですが私はあれに月数千円もかけたくないJRAという邪教の信者なのでperplexity.aiをよく使っています。

AIを使い倒すコツは一度書いてもらったコードをもとに自分がしっくりくるまで修正を依頼すること

AIを使い倒すことはAI様が仕事しやすいように我々おぢがしっかりと説明してあげることだと思います。

AIを使い倒せていない人はAIが1回で完璧な回答をだせると勘違いしていて失望する人が多いようです。

しかし、AIにはワンチャンあるんじゃないかと感じているおぢはあきらめずに何度も書き直してもらい、ついには自分が思っているコードを出力してもらえるようになるんです。

こちらが自分の寿命までの残りがなんとなくわかるタイマーです

年まで計算できるようになっているので自分が〇〇歳でタヒぬことを想定したカウントダウンや〇年後のイベントまでのカウントダウンが作れます。

私は1986年の4月29日生まれなので、寿命が80くらいだと想定して、あと41年と290日くらい寿命あることがわかりました

このコードはAIに一部書いてもらい、自分でも1ミリ程度修正しました。

再読み込みするごとに色が変わります。メッセージはパラメーターに?msg=自分の寿命のように指定すると表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .timer-container {
            text-align: center;
        }
        .timer-display {
            margin-top: 20px;
        }
        .container{
            margin:10% 0 0 0;
        }
    </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h1><span class="event"></span>まであと</h1> 
        <div>
        <label for="datetime-input">タイマー設定：</label>  <input type="datetime-local" id="datetime-input" name="datetime-input">
        <button id="start-button">タイマー開始</button>
        </div>

        
        <div id="timer-container" class="timer-container">
            <p class="timer-display" id="timer-display">00:00:00:00:00:00</p>
        </div>
    </div>

    <script>
        document.getElementById('start-button').addEventListener('click', function() {
            const inputDateTime = document.getElementById('datetime-input').value;
            if (!inputDateTime) {
                alert('Please enter a valid date and time.');
                return;
            }

            const targetTime = new Date(inputDateTime).getTime();
            const timerDisplay = document.getElementById('timer-display');

            const updateTimer = () => {
                const now = new Date().getTime();
                const distance = targetTime - now;

                if (distance < 0) {
                    clearInterval(timerInterval);
                    timerDisplay.textContent = '00:00:00:00:00:00';
                    alert('Time is up!');
                    return;
                }

                const years = Math.floor(distance / (1000 * 60 * 60 * 24 * 365));
                const days = Math.floor((distance % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                timerDisplay.textContent = `${String(years).padStart(2, '0')}:${String(days).padStart(3, '0')}:${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
            };

            updateTimer();
            const timerInterval = setInterval(updateTimer, 1000);
        });

        // New function to adjust font size
        function adjustFontSize() {
            const timerDisplay = document.getElementById('timer-display');
            const containerWidth = document.body.offsetWidth;
            const fontSize = containerWidth * 0.1; // Adjusted multiplier for longer text
            timerDisplay.style.fontSize = `${fontSize}px`;
        }

        // Call adjustFontSize on window load and resize
        window.addEventListener('load', adjustFontSize);
        window.addEventListener('resize', adjustFontSize);
    </script>
    <script>
        $(document).ready(function() {
            const OUTPUT_ELE = ".event";
            function getUrlParameters() {
                var params = {};
                var search = decodeURIComponent(window.location.search.substring(1));
                var pairs = search.split('&');
    
                for (var i = 0; i < pairs.length; i++) {
                    var pair = pairs[i].split('=');
                    params[pair[0]] = pair[1] || '';
                }
    
                return params;
            }
    
            var parameters = getUrlParameters();
            var output = '';
    
            $.each(parameters, function(key, value) {
                output += value;
            });
    
            if (output === '') {
                output = '次のイベント';
            }
    
            $(OUTPUT_ELE).html(output);
        });
    </script>
    <script>
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function setRandomBackgroundColor() {
            document.body.style.backgroundColor = getRandomColor();
        }

        window.onload = setRandomBackgroundColor;
    </script>
</body>
</html>