開発、コーディングが捗りそうなツールを導入しました。
簡単に導入できたのでご紹介します。
概要
- 自動でコードの提案をしてくれるGitHub Copilot
- GitHub Copilotの導入方法と、簡単な使い方を紹介
- GitHub Copilotは、30日間無料で使える
前提
- Githubのアカウントは登録済みである
導入
GitHub Copilotに登録する
1. 公式サイトにアクセスして、「Start my free traial」をクリック
30日間無料で使えます。
![](https://github.githubassets.com/assets/copilot-2023-83117d7c0b8a.png)
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-1-1024x431.png)
2. 支払いプランを選ぶ
私は月払いにしました。(Monthly plan)
年払いだと、2カ月無料になるのでこちらもいいですね。
気本の支払いプランを選んだら
「Get access to GitHub Copilot」をクリック。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-2-724x1024.png)
3. 名前・住所を入力して「Save」をクリック
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-3-1024x741.png)
4. 支払い方法を選ぶ
Pay withで希望の支払い方法を選択する。
クレジットカードなら、「Credit or debit card」
PayPalなら、「PayPal account」
私は、PayPalにしました。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-4-1024x887.png)
それぞれの方法で進めると
緑の「Save and continue」ボタンが表示されるので、クリック。
5. 「Submit」をクリックして登録
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-5-1024x796.png)
6. Select your preferences を設定
下記をもとに設定して、「Save and get started」をクリックして完了。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-6-1024x611.png)
Suggestions matching public code
githubに公開されている他人のコードを使用するかどうか。
これを許可すると、あまりよくないコードがそのままの状態で提案されるらしいです。
Blockにして、Copilotがアレンジしたコードを提案できるようにします。
Allow GitHub to use my code snippets for product improvements *
製品の改善のために情報を共有するかどうか。
自分のコードを送信されたくないのでチェックを外しました。
7. Copilot 準備完了
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-7-785x1024.png)
VSCodeで導入する
1. Github Copilot のプラグインをインストールする
VSCodeを開いたら、プラグインをインストールします。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-8.png)
2. Githubにサインイン
サインインしてない場合は、する。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-9.png)
クリックすると、ブラウザが立ち上がるので、
「Authrize …」をクリック。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-10.png)
サインインが完了します。
これで使えるはず。
使ってみる
※うまく使えない場合は、VSCodeを再起動しましょう。
候補の出し方は主に2つ
- インラインに表示する
- 複数個、別ファイルに表示する
まずは、index.html
を作成しておきます。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-11.png)
1. 候補をインラインに表示する
コメントでロゴ画像・グローバルメニューなどを入力すると
コードの候補が提案されます。やってみます。
コメントを入れて
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-13-1024x519.png)
改行をしたり、エンターを押すと
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-14-1024x569.png)
候補が出てくる・・・!
そのままTABキーを押すと適用されます。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-16-1024x617.png)
※不完全ですね。。。
2. 候補を複数個、別ファイルに表示する
先程のは不完全だったので、別のコードも提案してもらいます。
Ctrl + Enter を押すと、別ファイルが立ち上がり
いくつかコードが表示されます。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-15-1024x916.png)
今回は、Suggestion 2を適用したいので、
その上にある「Accept Solution」をクリックします。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-17.png)
適用されました。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-18-768x1024.png)
ロゴ画像のところをもう少し工夫したいので、再度コメント入れて、再提案してもらうことも可能でした。
![](https://pan-shoku.com/wp-content/uploads/2023/04/image-19-1024x859.png)
React TypeScriptとかでも使える
実務ではこれが使えそう。
ほぼ自動でコーディングしている例
同じ方の動画ですが、
カウントアップ・ダウンボタンを
- コメント入力
- エンター
だけで作成しています。
すごい。。。
コメント