普段なにげなく見ているWebページはHTMLという言語で作成されています。
これにJavaScriptというプログラミング言語を使うと様々なことができるようになります。
今回は画像を指定範囲で切り取る簡単なツールを作ってみる開発体験をご紹介します。
この記事では、WindowsでWebブラウザ上で動作する簡単な画像切り取りツールの開発を通して、AI手動での開発体験をご紹介します。
HTMLとJavaScriptを使用し、GitHub Copilotのエージェントモードのサポートを受けながら、以下のステップで進めます。
GitHub Copilotのエージェントモードとは、コマンド操作やファイル操作も含め、AI主体でタスクを実行してくれる機能です。
今回やること
- GitHub Copilot とともに画像切り取りツールを作成
- 作成したものをGitで管理し、GitHubにアップロード
- GitHub Pages機能を使って、ツールを無料でインターネットに公開
- 上記をGitコマンドも含め、GitHub Copilotのエージェントモードにサポートしてもらう
以下のようなツールを作成していきます。
左の画像を読み込んで、切り取りたい領域をマウスで選択するとその部分が右に表示され、ダウンロード可能になります。
開発の準備
GitHubアカウントを作成しよう
作ったツールをインターネットに公開するために「GitHub」というサービスを使います。
GitHubはプログラムコードを管理したり、公開したりできる場所です。
GitHubのウェブサイト（github.com）で無料アカウントを作成しておきましょう。
また、GitHub Copilotを使用するために必要なのでここで作成しておきます。
まだアカウントをお持ちでない場合は、以下の手順で簡単に無料で作成できます。
- GitHub公式サイトにアクセス: ウェブブラウザでGitHubの公式サイトにアクセスします。
- サインアップページへ移動: 「Sign up for GitHub」ボタン（または日本語で「登録」など）をクリックします。
- 必要情報を入力: メールアドレス、ユーザー名、パスワードなどの必要情報を入力し、画面の指示に従って進めます。
- メールアドレスの確認: 入力したメールアドレスに確認メールが届きますので、メール内のリンクをクリックして認証を完了させます。
- アカウント作成完了: これでGitHubアカウントの作成は完了です。
VS CodeのインストールとGitHub Copilotの導入
今回の開発には、VS Codeという無料の高機能なコードエディタが必要です。
プログラマーに広く使われているツールなので、もし持っていなければインストールしておきましょう。
そして、VS Codeに「GitHub Copilot」拡張機能をインストールして使える状態にしておきます。
今回の開発の要となるCopilot Chat機能を使うために必須です。
VS Codeの導入は以下の記事を参考にしてください。
GitHub Copilotの導入・設定については以下をご覧ください。
Gitのインストール（Windows版）
コードのバージョン管理やGitHubへのアップロードにはGitというツールが必要です。
WindowsでGitを使用するには、以下の手順でインストールを行います。
- Git公式サイトにアクセス: https://git-scm.com/downloads/win にアクセスします。
- インストーラーのダウンロード: サイトに表示されているWindows版のインストーラーをダウンロードします。
- インストーラーの実行: ダウンロードした
.exeファイルを実行します。 - インストール設定: インストールウィザードが表示されます。基本的にデフォルト設定で問題ありませんが、必要に応じてPATHの設定などを確認してください。迷ったらデフォルトのまま進めて大丈夫です。
- インストール完了: ウィザードの指示に従って進めるとインストールが完了します。
プロジェクトフォルダとファイル構成の準備
まず、今回の開発を行うためのフォルダをパソコンに作りましょう。
どこでも好きな場所で構いません。（例: image-clipper）
VS Codeを開いて、「ファイル」メニューから「フォルダーを開く」を選び、今作ったフォルダを開いてください。
GitHub Copilot をエージェントモードにする
VS Codeで右上のCopilotのアイコンをクリックしてチェットエリアを表示します。
次に右下のモード切り替え部分をクリックして「エージェント」を選択します。
GitHub Copilotにコードを書いてもらおう
GitHub Copilotにアイデアを伝えて、コードを書いてもらいましょう。
今回作成するツールの機能、画面構成、そしてファイル構成（index.html は直下、CSSは css フォルダ、JavaScriptは js フォルダなど）を、Copilot Chatに分かりやすく、まとめて伝えます。
プロンプトの例
HTML、CSS、JavaScriptで画像の一部を切り取り新たな画像としてダウンロードできるツールを作ってください
・まず元画像を読み込む（読み込みボタン、ドラッグ＆ドロップ）
・切り取りたいエリアをユーザーが指定
・切り取った画像を表示
・切り取った画像をダウンロード可能にする
画面構成
・[画面上]元画像ドラッグ＆ドロップエリア
・[画面左]元画像表示エリア（ここで切り取りたい領域をマウスでドラッグして選択肢る）
・[画面右]切り取り画像表示エリア（元画像表示エリアで領域を選択するとその部分の画像が表示される）
・[画面下]ダウンロードボタン
それぞれの領域のサイズは固定して表示、画像は適切に拡大・縮小して表示する
HIMLはプロジェクトフォルダ直下、CSSは「css」フォルダ、JavaScriptは「js」フォルダ内に作成してください
すると、依頼した３つのファイルを作ってくれました。
良ければ「保持」ボタンをクリックして保存します。
生成されたHTMLをWebブラウザで開く
作ってくれたindex.htmlをブラウザで開いて動作を確認しましょう！
自分でファイルを開いても良いのですが、今回はCopilotにお願いしてみます。
index.htmlをブラウザで開いてください。
「続行」ボタンをクリックするとindex.htmlをWebブラウザで開いてくれました！
AIと対話しながらコードを調整・仕上げる
おそらく、最初の状態では完全に想定通りには動かない部分があったり、見た目の調整が必要だったりするかもしれません。
ここから、AIと対話しながらコードを磨き上げていきます。
コードが動かない？エラーはAIに相談！
ツールの動作がうまくいかない場合は、まずブラウザの開発者ツール（多くのブラウザでF12キーを押すと開けます）を開いて「Console」タブを見てみましょう。
ここに、エラーを示すメッセージが表示されていることがあります。
表示されたエラーメッセージをコピーして、Copilot Chatに「このエラーメッセージはどういう意味ですか？」「このエラーを修正するにはどうすれば良いですか？」と質問してみましょう。
Copilotがエラーの原因や、それを修正するためのコードの変更案を提案してくれます。
機能追加や見た目の調整もAIにお任せ
ツールの見た目を調整したい場合（例: 「ドラッグ＆ドロップエリアの背景色を変えたい」「切り取り画像エリアの周りに枠線を追加したい」）、該当するCSSファイルを開いて、Copilot Chatに具体的な指示を出しましょう。
「この要素にこんなスタイルを適用するCSSを書いてください」のようにも頼めます。
生成されたコードのポイントをAIに解説してもらおう
Copilotが生成してくれたコードの中で、「この部分、何をやっているんだろう？」って疑問に思った箇所があれば、そのコードを選択してCopilotに質問してみましょう。
AIがそのコードの具体的な働きや、使われている技術について分かりやすく解説してくれます。
AIの解説を参考に、コードへの理解を深めていくことは、プログラミングスキル向上につながります。
AIナビゲートでGit管理＆GitHubへのプッシュ！
コードをGitHubで管理するメリット
コードをGitHubで管理することには、様々なメリットがあります。
- バージョン管理: コードの変更履歴を細かく記録できるため、いつでも過去の状態に戻したり、特定の変更内容を確認したりすることが容易になります。
- バックアップ: ローカル環境だけでなく、GitHubのサーバー上にもコードが保存されるため、データの損失リスクを減らすことができます。
- 共同開発: 複数人で一つのプロジェクトに取り組む際に、コードの共有やマージ（統合）を効率的に行うことができます。
- 公開と共有: GitHub Pagesのような機能を使えば、作成したWebサイトやツールを簡単に世界中に公開し、他の人に見てもらうことができます。
- ポートフォリオ: 自分の開発実績を公開することで、就職や転職活動におけるポートフォリオとして活用できます。
Personal Access Token (PAT) の作成
GitHubに、コードをプッシュ（アップロード）する際、認証が必要になります。
セキュリティの観点から、パスワードの代わりにPersonal Access Token（PAT）の使用が推奨されています。
PATは、特定の操作（リポジトリへのプッシュなど）のみを許可する、あなた専用のパスワードのようなものです。
VS CodeなどのツールからGitHubにアクセスする際に、このPATを使用することで、より安全に認証を行うことができます。
Personal Access Tokenの作成
GitHubにログインして右上のプロフィールアイコンをクリックし、「Settings」を選択します。
左のメニューより、「Developer settings」「Personal accsess token」の「Tokens(classic)」の順にクリックします。
「Generate new token(classic)」を選択します。
「Note」にわかりやすい文字列を設定、期限を設定、「Select scopes」で「repo」にチェックします。
セキュリティのため、必要最低限の期限にすることをおすすめします。
「Generate token」ボタンをクリックすると、Personal Access Tokenが作成されます。
コピーアイコンをクリックして、あとでコードをプッシュするときに使用しますので、大切に保管してください。
空のGitHubリポジトリを作成しよう
今回のツール開発で作るコードを保管するための「リポジトリ」（コードの倉庫）をGitHub上に新しく作ります。
GitHubのサイトにログインして、「New repository」ボタンを押し、リポジトリ名を決めましょう。例えば、記事のタイトルに関連した 「image-clipper」 のような、プロジェクトの内容が分かりやすい名前が良いですね。
右上の「+」アイコン、「New repository」の順にクリックします。
リポジトリ名を入力します。
Publicリポジトリ、またはPrivateリポジトリを選択します。
- Publicリポジトリ
- 誰でもリポジトリの内容（コード、ファイル、履歴など）を見ることができます。
- Privateリポジトリ
- リポジトリの内容を見たり、アクセスしたりできるのは、リポジトリの所有者と、所有者が明示的にアクセス権限を与えた共同作業者（コラボレーター）のみです。
「Create repository」ボタンをクリックするとリポジトリが作成されます。
リポジトリのURLをコピーアイコンをクリックしてコピーしておきましょう。
CopilotにGitHubでコード管理する方法を聞いてみよう
完成に近づいてきたコードを、GitHubにアップロードして管理を始めます。
このステップでも、Copilotに頼んで、必要な操作方法（ターミナルで実行するGitコマンドなど）を教えてもらいましょう。
プロンプトの例
プロジェクトをGitで管理して、最終的にGitHubにプッシュしたい。
一連のコマンドを教えてください。
コマンドの実行は私が行います。
GitHubリポジトリのURLは以下です。
＜前ステップでコピーしたリポジトリのURL＞
Copilotが教えてくれたコマンドを理解する
git init：現在のプロジェクトフォルダを、Gitでバージョン管理するための初期設定を行うコマンドです。git remote add origin <GitHubリポジトリのURL>：ローカル（あなたのパソコン内）にあるGitリポジトリと、インターネット上（GitHub）にあるリポジトリを紐付けるコマンドです。今後、このGitHubリポジトリのことを「origin」という名前で参照できるようになります。git add .：現在のプロジェクトフォルダにある、新しく作ったり変更したりしたファイルすべての内容を、「コミット」と呼ばれる変更履歴に記録するための準備エリアに追加するコマンドです。.は「すべてのファイル」という意味です。git commit -m "Initial commit"：git addで準備した変更内容を確定させて、Gitの変更履歴として正式に記録するコマンドです。-mの後ろに、そのコミットがどんな変更だったか説明するメッセージを記述します。「Initial commit」は最初の記録によく使われるメッセージです。git branch -M main：これは、現在いるローカルブランチの名前をmainに変更するコマンドです。-Mオプションは、もしmainという名前のブランチが既に存在しても強制的に名前を変更します。git push origin main：ローカルのGitリポジトリの「main」という名前のブランチ（変更履歴の流れのようなもの）の内容を、紐付けたGitHubリポジトリ（origin）のmainブランチにアップロードするコマンドです。
AIの指示に従ってコマンドを手動実行
Copilotのエージェントモードでは、お願いすればコマンドを実行してくれますが、コマンドのレスポンスが返ってこないなど不安定な場面もあるので、今回はVS Code のターミナルで順に手動で実行していきます。
VS Codeのメニューバーから「表示」→「ターミナル」をクリック、または「Ctrl + @」キーを押して、ターミナルを開いてください。
「git init」から順に実行していきます。
最後に「git push origin main」を実行すると「GitHub Sign in」を求められます。
ここで「Token」をクリックし、Personal Access Tokenを入力します。
GitHubでコードがプッシュされたか確認
GitHubリポジトリページを表示してみましょう！
作成した「index.html」などのファイルが確認できます。
世界に公開！GitHub Pagesの設定と動作確認
GitHub Pagesって超便利！
GitHubには、リポジトリに置いたWebサイトのコード（HTML、CSS、JavaScriptなど）を、簡単な設定をするだけで、インターネット上に「Webサイト」として無料で公開できる「GitHub Pages」という素晴らしい機能があります。
作ったツールを友達や家族に見せたり、自分の作品としてポートフォリオサイトに載せたりするのに、とっても便利なんです！
GitHub上でサクッと公開設定
公開作業はGitHubのウェブサイト上から簡単な設定をするだけです！
リポジトリのページの右上の「Settings」をクリック、左の「Pages」を選択します。
そして、Branchで「main」を選択して「Save」をクリックします。
ページの表示を更新すると、GitHub PagesのURLが表示されます。
「Visit site」をクリックすると、今回作成したツールのページが開かれます。
お疲れさまでした。
これで作成したツールが無事インターネット上に公開されました！
ツールが正常に動作するか確認してください。
AIを使いこなすして次のステップへ
AIはすごい！でも、自分で書けるともっと世界が広がる
今回のGitHub Copilotを使った開発体験、いかがでしたか？ AIがコードを生成し、Gitコマンドまで教えてくれるのは、まるで超有能なアシスタントがいるようで、開発が驚くほどスムーズに進んだことでしょう。
AIの力、すごいですよね！
でも、AIはあくまでツールであり、あなたの指示に基づいて動くものです。
AIが生成したコードが常に完璧であるとは限りませんし、想定通りに動かない時に原因を突き止めて修正したり、AIだけでは思いつかないようなオリジナルのアイデアを形にしたりするのは、開発者であるあなた自身の力です。
AIを「使う側」として、さらに色々なものを作れるようになるためには、AIが生成したコードを理解し、自分でコードを書くための基本的なスキルが大切になってきます。
AIを賢く使いこなすことで、あなたの「作りたい！」というアイデアを実現できる可能性は、無限に広がります。
AIを使いこなすためにも、プログラミングの基礎をしっかり学ぼう
今回使ったHTML、CSS、JavaScriptといったWeb技術の基本的な文法や、プログラミングにおける「変数」「関数」「条件分岐」「繰り返し」といった共通の考え方を体系的に学ぶことは、AIが生成したコードを読み解いたり、自分で新しい機能を実装したり、エラーの原因を見つけ出したりする上で、非常に重要な土台となります。
基礎力が身につけば、AIが提案するコードの意図をより深く理解でき、より効率的に、そしてより高度な開発をAIと一緒に行えるようになります。AIを「賢い道具」として最大限に活用するためにも、その道具を使う「あなた」自身が確かな知識を持っていることが大切なのです。
さらなるレベルアップを目指す君へ：多様な学習方法とプログラミングスクールという選択肢
今回の開発体験が楽しかったなら、ぜひこれからもプログラミングを続けてほしいな。もっと色々なものを作ってみたい、ITエンジニアという仕事に興味が出てきた、という君には、さらにステップアップするための方法がいくつかあるよ。
- 書籍でじっくり学ぶ
- オンラインの学習サイト（Progate、ドットインストールなど）や動画教材（Udemy、Courseraなど）で手を動かしながら学ぶ
といった独学の方法があります。
そして、もし「一人だと挫折しそう」「エラーで何時間も詰まってしまう」「短期間で集中的に、実践的なスキルを身につけたい」「将来、プロのエンジニアとして就職・転職したい」といった目標や不安がある場合は、「プログラミングスクール」という選択肢も、ぜひ考えてみる価値があります。
まとめ：AI時代の新しい開発スタイルを楽しもう！
今回の記事を通じて、GitHub Copilotという頼れるAIパートナーと協力して、Webツールを開発し、Gitでバージョン管理を行い、そしてインターネット上に公開するという、プログラミングにおける一連の主要なプロセスを体験しました。
何もなかったところから、AIの力も借りながら、何かを作り上げ、世界に公開できた経験は、今後のプログラミング学習の道のりにおいて、きっとかけがえのない自信と宝物になるはずです。
AIは最強のパートナー 使いこなすのはあなた自身
これからの時代、AIはますます進化し、私たちの働き方や創造性を大きく変えていくでしょう。
プログラミングの世界でも、AIは単なる便利なツールを超え、強力な共同作業者、パートナーとなります。
AIを恐れるのではなく、その能力を理解し、賢く活用するスキルこそが、これからの時代に求められる力です。AIは、あなたの可能性を広げるための最高の味方です。
これからも「作りたい」気持ちを忘れずに！
プログラミングは、頭の中にあるアイデアや「こんなものが欲しいな」「こうなったらもっと便利なのに」という願いを、現実の形にできる素晴らしいスキルです。
今回の経験で感じた「作る楽しさ」「動いた時の喜び」を大切に、これからも色々なもの作りに挑戦してみてください。
AIを味方につけて、あなたのクリエイティブな世界をどんどん広げていきましょう！
コメント