プログラミング初心者がAIと一緒に作る初心者向けお絵描きアプリ

2024年4月5日 01:41

はじめに

本記事では、プログラミングの世界に足を踏み入れたばかりの私が、AIの力を借りて初心者向けのお絵描きアプリを作る過程を紹介します。

この記事では、p5.jsというJavaScriptのライブラリを使用し、コーディングの基本を学びながら、誰でも簡単にアートを作成できるツールを開発しました。

今回の記事では記載しておりませんが、なぜ自分がプログラミング初心者ながらAIを使いながらプログラミングに挑戦しようとしたのかはこちらで紹介しているので、もしよろしければ読んでみてください。

アプリの機能としては以下の3つのみのシンプルなものです。

以下の画像のようにマウスをドラッグすることで絵が描けます。

eボタンでモードを切り替えることで、間違えた箇所を消すことができます。

書いた画像をpngとして保存することができます。

PCでしか遊べませんがリンクも以下に置いておきます。
https://editor.p5js.org/ryotako/full/V61bhi6M-

作成過程はいたってシンプルで実際、基本的なお絵描きアプリを作るのに必要だったのは、わずか3つのプロンプトと10分ほどの時間だけでした。

まずやることはChatGPTに「p5.jsで簡単なお絵描アプリを作りたい」とお願いし、これで基本的な機能ができます。

さらに自分の場合は、消しゴム機能と画像保存機能をつけたかったので、「軽ゴム機能をつけるにはどうしたらいい？」とプロンプトを送り、「画像保存機能も実装したい」とお願いすることで、どちらも実装できました。

また、相変わらず生成したコードに説明も付いているので、どの部分がアプリのどの部分を担っているのかなどもわかりやすいです。

これらの説明を見ながら自分で少し触ってみることで、次に自分が違うアプリを作る際もコピーするなどで再利用可能かと思います。

このアプリ作成を通じて、プログラミング初心者であっても、わずか10分という短い時間で、AIの力を活用した簡単なお絵描きアプリを作ることが可能であることを実感しました。

プログラミングの基本を学びつつ、実際に動くアプリ開発ができたのは、非常に面白い経験でした。

この短い時間で完成したアプリは、技術を学びながらも楽しみを見出すことができる興味深い例です。

プログラミング初心者でも、AIと共にプログラミングをすることで、アプリ作成の第一歩を踏み出すことができることを、私の経験を通じて証明できたらと考えています。

興味を持っていただけた方は、ぜひ私のYouTubeチャンネルをチェックしてみてください。
初心者プログラマーがAIの力を借りながら様々なアプリを作成する様子を定期的に投稿しています。

また、X（旧Twitter）でもアプリ作成のアップデートや日々の学びをシェアしているので、ぜひ絡んでアイデア交換をしましょう。

私の挑戦を通じて、皆さんも自分だけの何かを始めるきっかけが見つかることを願っています。
プログラミングのハードルは確かに高そうに思えるのですが、一歩踏み出して、新たな創造の世界へ旅立ちましょう。

AIとやってみた

この記事が気に入ったらサポートをしてみませんか？