<p data-line="1" class="code-line">どーも！clameyes (<a href="http://twitter.com/clameyes39" target="_blank" rel="nofollow noopener noreferrer">@clameyes39</a>)です！</p>
<p data-line="3" class="code-line">ブログの記事を書くのは実際にやってみると思っていたよりも時間がかかります。そんな時に助けてくれる頼れる相棒がいるといいのになと思ったりしませんか？</p>
<p data-line="5" class="code-line">そんな頼れる相棒になれそうなのが、今回紹介するGithub Copilotです。</p>
<h2 id="github-copilot%E3%81%A8%E3%81%AF" data-line="7" class="code-line"><a class="header-anchor-link" href="#github-copilot%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Github Copilotとは</h2>
<p data-line="8" class="code-line"><img src="https://i.gyazo.com/1d12c360c9876689c3483e1c61206ee3.png" alt="Image from Gyazo" /></p>
<p data-line="10" class="code-line">CopilotはGithub（Microsoft傘下）が開発したAIで、プログラムを書く（コーディング）際のヒントを与えてくれます。プログラムを書く際にコードの一部を入力すると、そのコードに対応するコードを提案してくれます。</p>
<p data-line="12" class="code-line">要するにCopilotはAIではありますが全てを自動でやってくれるわけではなく、主体は私達であくまで提案をしてくれる存在です。強力な自動補完機能と言った方がいいかもしれません。</p>
<p data-line="14" class="code-line">ちなみにCopilotのベースはOpenAIのChatGPTを使っているので、使ったことがある方はある程度性能のイメージがしやすいかもしれません。</p>
<p data-line="16" class="code-line">先ほど説明でプログラムのヒントと言いましたが、実はCopilotは日本語の文章を書く際にも使えます。日本語の文章を書く際に、文章の一部を入力すると、その文章に対応する文章を提案してくれます。</p>
<p data-line="18" class="code-line">それなら<strong>ブログの記事を書く際にもCopilotを使うと楽になるかもしれない</strong>と思い立ったわけです。</p>
<p data-line="20" class="code-line">ちなみにこの記事もCopilotを使って書いてます。</p>
<h2 id="copilot%E3%81%A7%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%8F" data-line="22" class="code-line"><a class="header-anchor-link" href="#copilot%E3%81%A7%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> Copilotでブログの記事を書く</h2>
<p data-line="23" class="code-line">ここではCopilotを使ってブログの記事を書く方法について解説します。</p>
<p data-line="25" class="code-line">Copilotを使ってブログの記事を書くのは、下記の通り行います。</p>
<h3 id="github%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%99%E3%82%8B" data-line="27" class="code-line"><a class="header-anchor-link" href="#github%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%99%E3%82%8B" aria-hidden="true"></a> Githubにログインする</h3>
<p data-line="28" class="code-line">Copilotを使うには、Githubにログインする必要があります。</p>
<h4 id="github%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B" data-line="30" class="code-line"><a class="header-anchor-link" href="#github%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B" aria-hidden="true"></a> Githubにアクセスする</h4>
<p data-line="31" class="code-line">下記リンクからGithubのトップページにアクセスします。</p>
<p data-line="33" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://github.com/" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<p data-line="35" class="code-line">上記のURLもCopilotが提案してくれています。URLまで書いてくれるのは便利すぎですね（間違っていることも多いので、確認はしましょう）。</p>
<h4 id="github%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%99%E3%82%8B-1" data-line="37" class="code-line"><a class="header-anchor-link" href="#github%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%99%E3%82%8B-1" aria-hidden="true"></a> Githubにログインする</h4>
<p data-line="38" class="code-line">Githubのトップページにアクセスすると、下記のようなトップページに行くので右上の<code>「Sign in」</code>からログインしましょう。</p>
<p data-line="40" class="code-line"><img src="https://i.gyazo.com/310710811821318ca2010b92029736d0.png" alt="Image from Gyazo" /></p>
<p data-line="42" class="code-line">Githubのアカウントを持っていない場合は、同じく右上の<code>「Sign up」</code>からアカウントを作成してください。</p>
<h4 id="github-copilot%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B" data-line="44" class="code-line"><a class="header-anchor-link" href="#github-copilot%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> Github Copilotを有効にする</h4>
<p data-line="45" class="code-line">ログインできたら続いて、Github Copilotを有効にします。有効にするには、以下の手順で行います。</p>
<p data-line="47" class="code-line">まずはGithub Copilotのページにアクセスして登録を行います。</p>
<p data-line="49" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://github.com/features/copilot/" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<p data-line="51" class="code-line">上記リンクから<code>「Get Started with Copilot」</code>をクリックして登録してください。</p>
<p data-line="53" class="code-line"><img src="https://i.gyazo.com/90d9ae9cb4de6e6108a001da10992b54.png" alt="Image from Gyazo" /></p>
<p data-line="55" class="code-line">ちなみに価格は最初の2ヶ月は無料で使えます。</p>
<p data-line="57" class="code-line"><img src="https://i.gyazo.com/7c1dfbd46fe714a1da5a1bf238c11c11.png" alt="Image from Gyazo" /></p>
<p data-line="59" class="code-line">その後は個人の場合月10ドルか年100ドルか選択することができます。</p>
<p data-line="61" class="code-line">2ヶ月使ってみて微妙だったら解約できるので、まずは無料で試してみましょう。</p>
<p data-line="63" class="code-line">ただしクレジットカードの登録が求められるので、クレジットカードの登録が必要です（後で解約できます）。</p>
<p data-line="65" class="code-line">また初期設定で、各種登録やGithub Copilotの利用規約に同意する必要があるので、同意してください。</p>
<h3 id="github-copilot%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" data-line="67" class="code-line"><a class="header-anchor-link" href="#github-copilot%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> Github Copilotをインストールする</h3>
<p data-line="68" class="code-line">Github Copilotは、VSCodeの拡張機能として提供されています。</p>
<h4 id="vscode%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" data-line="70" class="code-line"><a class="header-anchor-link" href="#vscode%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> VSCodeをインストールする</h4>
<p data-line="71" class="code-line">VSCodeは、Microsoftが開発したコードエディタです。VSCodeをインストールするには、下記の通り行います。</p>
<p data-line="73" class="code-line">下記のダウンロードページにアクセスしてダウンロードしてください。</p>
<p data-line="75" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://code.visualstudio.com/" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<p data-line="77" class="code-line"><img src="https://i.gyazo.com/d4f32a5844d5c8728df14ce68699252a.png" alt="Image from Gyazo" /></p>
<p data-line="79" class="code-line">ダウンロードしたVSCodeのインストーラを実行してインストールしてください。</p>
<h4 id="github-copilot%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B-1" data-line="81" class="code-line"><a class="header-anchor-link" href="#github-copilot%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B-1" aria-hidden="true"></a> Github Copilotをインストールする</h4>
<p data-line="82" class="code-line">VSCodeの拡張機能としてGithub Copilotをインストールするには、VSCodeの左側のメニューから、拡張機能を開きCopilotと検索します。インストールボタンを押すと、インストールが始まります。</p>
<p data-line="84" class="code-line">インストールするとGithubのログインが求められるので、ログインしてください。</p>
<p data-line="86" class="code-line">ちなみにMacの場合は一度VSCodeを再起動したほうが良いです。（なぜか私のMacBookProでは、VSCodeを再起動しないとCopilotが動作しなかった。）</p>
<h3 id="github-copilot%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%8F" data-line="88" class="code-line"><a class="header-anchor-link" href="#github-copilot%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> Github Copilotを使ってブログの記事を書く</h3>
<p data-line="89" class="code-line">早速Github Copilotを使ってブログの記事を書いてみましょう。</p>
<p data-line="91" class="code-line">VSCodeでmarkdownファイルを開いてください。（別に文章を書けるなら、htmlでもtxtでもどんなファイルでもOKです。）</p>
<p data-line="93" class="code-line">後は適当に記事を書き始めましょう。</p>
<p data-line="95" class="code-line">文章を書いていると、バックグラウンドでCopilotが動作しています。提案された文章は薄文字で表示されるので、そのまま使うこともできますし適当に書き換えることも可能です。</p>
<p data-line="97" class="code-line"><img src="https://i.gyazo.com/c892ee55c2987d8032c5096971d5496b.png" alt="Image from Gyazo" /><br />
<em>Copilotの提案された文がバックグランドに表示される</em></p>
<p data-line="100" class="code-line">そのまま使う場合は、Tabキーを押すと提案された文章が挿入されます。</p>
<p data-line="102" class="code-line">あとはCopilotが提案する文章を見て修正したりしながら文章を書いていくだけ。</p>
<p data-line="104" class="code-line">使ってみると意外にも精度が高く、文章を書くのに役立つのが分かると思います。</p>
<p data-line="106" class="code-line">特に私の場合、自分だけで書いていると考え込んで筆が止まってしまうことがあるので、Copilotが提案してくれる文章を見ながらだと記事を書くのがだいぶ楽になります。</p>
<p data-line="108" class="code-line">みなさんも、Github Copilotを使ってブログの記事を書いてみてはいかがでしょうか？</p>


最強の相棒Github Copilotでブログの記事を書いてみる