コーダー向け生成AIの活用方法

コーダー向けに、生成AIの活用方法を紹介します。

コーディングやプログラミングと生成AIの相性はかなり良いので、ぜひ活用してみてください。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

活用法1：ダブルチェック

例えば、何か不明点があり、ネットで検索したとします。

そこで得られた答えは、必ず正しいとは限りません。プログラミング学習においては、間違った情報もそこそこあります。

検索して1ページ目の記事は全て確認するくらいやれば、おそらく正しい情報に辿り着けますが、一旦ChatGPTに聞いてみるのも良いです。

具体例

スマホとPCで画像を切り替える方法を知りたいとします。検索してみたら、下記の方法が紹介されていました。

<img class="pc" src="hoge.png" alt="...">
<img class="sp" src="hoge-sp.png" alt="...">

.pc { display: none; }
.sp { display: block; }
 
@media only screen and (min-width: 800px) {
    .pc { display: block; }
    .sp { display: none; }
}

これが正しいのか、ChatGPTにもチェックしてもらいます。

雑に聞いても正しい回答が返ってくることが多いです。

HTML・CSSのコードを貼り付けて、『スマホとPCで画像を切り替える方法は、これであっていますか？他にもっと良い方法がありますか？』と質問します。下記が、返ってきた回答の要約です。

• それで正しく動作する(ただし欠点がある)
• どちらの画像もブラウザによってダウンロードされ、その結果、ページのロード時間が増加する可能性がある
• より効率的な解決策として、picture要素を使用する方法がある
• picture要素を使った具体的な例紹介
• 具体例の解説

ChatGPTが言うように、pictureタグを使った方が無駄な画像の読み込みがなくて、パフォーマンス的に良いです。

活用法2：リファクタリング

自分が書いたコードをもっと効率的に書けないか？と疑問に思った時は、ChatGPTに投げてみると良いです。

具体例

let age = 20;

if (age >= 18) {
    console.log("あなたは成人です。");
} else {
    console.log("あなたは未成年です。");
}

このコードをChatGPTに貼り付けて、『このコードをリファクタしてください。』と送れば回答が得られます。下記がその回答です。

let age = 20; // あるいは任意の値

console.log(`あなたは${age >= 18 ? "成人" : "未成年"}です。`);

あまりリファクタリングしすぎると、直感的にわかりにくくなります。回答を見て採用すべきかは、判断しましょう。

活用法3：コードの解説

人のコードを読む際に、なぜこう書くのか？と疑問に思うことや書いてあるコードの意味がわからない時もあるかと思います。

そんな時は、そのコードを丸ごと貼り付けて、聞いてみると良いです。

具体例

.u-visually-hidden {
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    border: 0 !important;
    padding: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    margin: -1px !important;
}

このコードをChatGPTに貼り付けて、『このコードはなんですか？』と送れば回答が得られます。

回答を要約すると、このような回答が得られました。

• これは視覚的に非表示にするためのスタイル
• スクリーンリーダーなどの補助技術に対しては要素が存在することを示す
• 視覚的には要素が存在しないように見えますが、スクリーンリーダーを使用しているユーザーには要素の内容が伝えられる
• 各コードの説明&!importantの注意点

ここでさらに質問してみても良いですし、知り得た情報を使って、検索してみても良いでしょう。例えば、『スクリーンリーダー CSS スタイル』で検索して、深掘りしていくイメージです。

活用法4：コードの書き換え

例えば、jQueryで書かれているコードを素のJavaScriptで書き換えたい場合など、『書き換えてください。』と投げれば、うまいこと書き換えてくれます。

具体例

$('#button').click(function(){
  ...
})

このコードをChatGPTに貼り付けて、『このコードをjQuery使わない書き方に変更してください。』と送れば回答が得られます。

document.getElementById('button').addEventListener('click', function(){
  // ここにクリック時の処理を書く
});

このような回答が得られました。因みに、この回答に対して、『リファクタしてください。』と投げると下記の回答になります。

function handleClick() {
    // ここにクリック時の処理を書く
}

const buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', handleClick);

『アロー関数で書いてください。』と投げると、下記が返ってきました。

const buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', () => {
  // ここにクリック時の処理を書く
});

このように質問を繰り返して、理想系に近づけていくと良いです。

活用法5：エラーの内容を聞く

何かエラーが出ている場合、エラーの文章をコピペーして、『このエラーは何が原因ですか？』と聞くと、解決の糸口が見つかる場合があります。

また、スペルミスなど、初歩的なミスも見つけてくれる場合があります。

具体例

<spna class="hoge">今日の天気は...</spam>

.hoge{
	 color: red;
}

『ここに当てたスタイルが効きません。原因はなんでしょうか？』と聞いてみると、スペルミス(閉じタグがspamになっている)を指摘してくれます。

これはかなり初歩的な例ですが、考えてもわからないエラーは、検索する前にChatGPTに聞いてみる方が早い場合もあります。

基礎学習後...迷子になっていませんか？