SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「GitHub Copilot」入門

自分でコードを書かずにどこまでやれるか?「GitHub Copilot」をフル活用してReact+ExpressのWebページ実装に挑戦

「GitHub Copilot」入門 第3回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載ではコーディング支援AIツール「GitHub Copilot」のさまざまな機能や活用例を紹介しています。前回はGitHub Copilotのより詳細な操作方法とシーン別の活用法を説明しました。最終回となる今回は、クライアント側にReact、サーバー側にExpressを利用したWebページを、GitHub Coplotに全面的に頼り、できるだけ自分でコードを書かずに実装する事例を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 「GitHub Copilot」は、プログラムのコーディング支援を想定したAIツールです。本連載では、GitHub Copilotの便利な機能や利用法を、複数回にわたって紹介しています。

図1 
図1 GitHub CopilotのWebページ

 前回記事では、ショートカットキーやコマンドといった、GitHub Copilotのより詳細な操作方法と、学習時や開発作業時といったシーン別の活用事例を紹介しました。今回はより具体的な事例として、GitHub Copilotをフル活用したアプリの実装に挑戦します。

 実装するのはクライアント側にReact、サーバー側にExpressを利用したWebページです。実装に際してはGitHub Copilotに全面的に頼り、できるだけ自分で実装を行わないようにします。

 なお、AIの特性上、記事と同じ操作をしても処理結果が同一にならないことがある点に注意してください。

対象読者

  • AIによるコーディング支援を実感したい方
  • プログラミング作業で少しでも楽をしたい方
  • GitHub Copilotがどこまでできるか見定めたい方

必要な環境

 本記事で利用する環境は以下の通りです。GitHub Copilotの契約は個人向けの「Copilot Individual」を利用します。契約や環境構築の手順は本連載の初回記事を参照してください。

  • Windows 11
    • Visual Studio Code
    • Visual Studio Code用の拡張機能「GitHub Copilot」と「GitHub Copilot Chat」
    • React 18.3.1
    • Express 4.19.2
    • Node.js 20.16.0 64bit版
    • Python 3.12.5 64bit版
    • Microsoft Edge 127.0.2651.98

 クライアント側(p001-react)とサーバー側(p002-express)のサンプルコードを実行するには、最初に「npm install」コマンドを実行してライブラリをインストールします。その後クライアント側(p001-react)は「npm run dev」コマンドで実行して、Webブラウザーで「http://localhost:5173/」にアクセスしてWebページを表示できます。

 サーバー側(p002-express)は「node index.js」コマンドで実行できます。なおp003-testdataサンプルはPythonで実装されており、「py smartphones.py」コマンドで実行できます。

次のページ
プロジェクトの生成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「GitHub Copilot」入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/20100 2024/09/27 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング