演習 - GitHub Copilot を使用して JavaScript ポートフォリオを更新する
GitHub Copilot のコード提案を使用する方法を見てみましょう。 この演習では、ライブ提案を含むアニメーションを追加し、プロンプトを使用して、既存の JavaScript テンプレート リポジトリからスクロール動作をカスタマイズします。 GitHub Copilot を使用すると、実際の JavaScript の状況をすばやく処理できます。
JavaScript ポートフォリオ
学生でも、最近卒業したばかりでも、経験豊富な専門家でも、あなたのポートフォリオはあなたのスキルと経験を紹介するための個人的なスペースです。
ポートフォリオを用意することで、仕事に応募するときに履歴書で言及している経験に対して信頼性と評判が提供されます。 データ科学者、UX デザイナー、フロントエンド開発者のいずれであっても同じです。 強力なオンライン プレゼンスは、仕事を見つけ、また自分が発見されるのに役立ちます。
注
この演習では、ブラウザーで、事前構成済みの環境で Codespace を使用します。
JavaScript ポートフォリオをカスタマイズする
このテンプレート ポートフォリオでは、Web ブラウザーのみを使用して簡単にカスタマイズおよびデプロイできる React ベースの Web アプリケーションが用意されています。
開始する前に、独自のリンクを使用してポートフォリオをカスタマイズできます。
src/App.jsx に移動し、siteProps を自分の情報で更新します。
siteProps 変数は、サイトのカスタマイズに使用されるキー値ペアを保持する JavaScript オブジェクトです。次のようになります。
const siteProps = {
name: "Alexandrie Grenier",
title: "Web Designer & Content Creator",
email: "alex@example.com",
gitHub: "microsoft",
instagram: "microsoft",
linkedIn: "satyanadella",
medium: "",
twitter: "microsoft",
youTube: "Code",
};
プロンプトを使用してソーシャル メディア アイコンをアニメーション化する
アニメーションを使用すると、ソーシャル メディア セクションをより際立たせることができます。 Copilot のヘルプにアイコンをアニメーション化するように尋ねてみましょう。 GitHub Copilot Chat を使用して、Copilot に質問するか、次のプロンプト コメントを src/styles.css ファイルに書き込むことができます。
/* add an amazing animation to the social icons */
Copilot からの提案は次のようになります。
img.socialIcon:hover {
animation: bounce 0.5s;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
Tab キーを押して提案を受け入れます。 まったく同じ提案を受け取らない場合は、提供された提案を試してみるか、一致するまで CSS コードを入力し続けることができます。
サイトは codespace で既に実行されており、変更は自動的にページに再読み込みされます。 それらを表示するには、フッターのソーシャル メディア アイコンの 1 つにマウスを合わせるとその効果を確認することができます。
お疲れさまでした。演習を通じて、Copilot を使用してコードを生成しただけでなく、対話型の楽しい方法で行いました。 GitHub Copilot を使用すると、コードを生成するだけでなく、ドキュメントを記述したり、アプリケーションをテストしたりすることができます。
GitHub で演習を終えたら、以下のためにここに戻ります。
- 簡単な知識チェック
- 学習した内容のまとめ
- このモジュールを修了するためのバッジ