プログラミング初心者でも、手軽に実用的なアプリケーションを作成できるサポートツールとして「ChatGPT」を活用してみました。
今回は、学びのモチベーションが上がる「目に見える結果が得られる」プロジェクトとして、JavaScriptでカウントダウンタイマーを作成。カスタマイズや質問のコツを通じて、基本から応用までを身に付けていきました。
さっそく、その過程を振り返りながら、ChatGPTの便利な活用方法をご紹介します。
ChatGPTでプログラミングに挑戦する理由とプロジェクト選定の経緯
プログラミングを始めるとき、最初にぶつかるのが「何を作れば良いか？」というテーマ選びです。
数多くのアイディアから、今回は「カウントダウンタイマー」を題材にしました。ChatGPTに「何か簡単に作れるプログラムは？」と聞くと、いくつかの例を提案されましたが、シンプルでありながら活用の幅が広いタイマー機能が目に留まり、さっそくプロジェクトに挑戦することにしました。
この「タイマー機能を作りたい」といった具体的なリクエストに対し、ChatGPTが返してくれるコードは、自分が学びたい内容にフィットしているため、効率良く勉強・制作を進めることができました。
コード作成とカスタマイズのプロセス
- 具体的な質問で理想のコードを引き出す
はじめに、「JavaScriptを使って、タイマーのような見た目のカウントダウンアプリを作りたい」と具体的にChatGPTに質問を投げました。
質問を具体化することが、適切な回答やコードを得るための第一歩です。
ChatGPTは質問内容に沿って、HTMLとCSSも組み込まれたシンプルなカウントダウンタイマーのコードを提示。JavaScriptで動くようにしっかりと構成されたタイマーで、コピペで即座に動かせる内容でした。 - 基本のカウントダウンタイマーの実装
提示されたコードをそのまま貼り付けると、1時間限定のカウントダウンタイマーが完成しました。
画面上にカウントダウンが進行する様子を確認し、動作確認を通してコードの流れを理解。
例えば、JavaScriptのsetInterval関数が1秒ごとに呼び出されることで、時間が減少していく仕組みになっていることが分かりました。
- ChatGPTに質問して時間設定機能を追加
ただし、このコードは1時間のカウントダウンのみで自由な時間設定はできません。
そこで「カウントダウンの時間を自分で設定できるようにしたい」とChatGPTに再度質問し、修正コードを教えてもらいました。
この追加により、ユーザーが自由に時間を入力してカウントダウンをスタートできる仕様に進化。例えば「2時間30分」の設定や「5分」の短時間カウントダウンも可能になり、タイマーの柔軟性がぐっと高まりました。 - 色のカスタマイズと細かいデザイン調整
機能は整いましたが、見た目がシンプルすぎるため、視覚的にも楽しめるようにカラーを追加することにしました。
コード内を確認していくと、カラー設定のCSSスタイルが見つかり、ChatGPTにアドバイスをもらいながらオレンジ色に変更。
さらに、残り時間の表示を大きくし、背景色を少し暗めに設定することで、残り時間が際立つデザインに整えました。
- 最終調整とトラブル解決
タイマーの見た目や機能に関する最終調整を進める中で、カウントダウンが終了した時に知らせてもらえるように、アラート表示を追加する方法を探しました。
ChatGPTに「カウントダウン終了時にメッセージを表示するには？」と質問し、終了時の処理も含めたコードの追加方法を教わりました。
このように、問題が発生したときや追加機能を実装したいときに、ChatGPTが即座に具体的なヒントを提示してくれるため、「どうすればわからない」「こんな風に出来たらいいのに」を実現することができます。
ChatGPTを使ったプログラミングの感想と学び
今回のプロジェクトを通じて、ChatGPTのサポートは「ただのコード生成」以上の価値があると実感しました。
生成されたコードの役割やカスタマイズの方法をその都度教えてくれるため、少しずつコーディングの仕組みが理解できるようになり、プログラミングに対する知識と自信が着実に身に付いていきました。
さらに、「どの部分を変えれば何が変わるのか」が分かることで、次第に自分でカスタマイズの方法を考える力も養われました。
ChatGPTは、初心者がプログラミングに取り組む際に頼もしい存在です。
もしプログラミングで困ったことがあれば、ぜひ具体的に質問し、自分に必要なサポートを引き出してみてください。段階的に学んでいくことで、簡単なアプリから複雑な機能を持つプログラムまで、どんどん挑戦の幅が広がっていくはずです。
