効率よくコーディングを進めるためにChatGPTを使ってみよう

この記事について

この記事は、 Web制作の基礎から学べる「Webコーディングスクール」などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。

emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。

ChatGPTとは

ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。

今回はChatGPTを使って、効率よくコーディングを進めてみます。

headタグ内のコードをChatGPTで生成しよう
HTMLの大枠をChatGPTを使ってコーディングしてみよう
グロナビをChatGPTで生成してみよう
ボタンをホバーした時のCSSをChatGPTで生成してみよう

HTMLの大枠をChatGPTを使ってコーディングしてみよう

ChatGPTにコーディングを依頼する時は、ページ全体を細部まで1度に完成させようとするよりも、段階的に依頼する方がうまく伝わると思います。

まずは、コーディングしたいWebサイトのデザインを見て、ページに必要な要素をリストアップします。

今回は「ヘッダー」「メインビジュアル」「お知らせ」「サービス紹介のバナー３つ」「フッター」の生成をしてもらえるように、わかりやすく箇条書きで質問しています。

質問:

Webサイトで使用するHTMLの大枠となるソースを教えてください
必要なものは下記でお願いします
・ヘッダー
・メインビジュアル
・お知らせ
・サービス紹介のバナー３つ
・フッター

回答:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サイトタイトル</title>
  <meta name="description" content="サイトの説明文">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="main-visual">
      <img src="main_visual.jpg" alt="メインビジュアル">
    </div>
    <div class="news">
      <h2>お知らせ</h2>
      <ul>
        <li><a href="#">お知らせ1</a></li>
        <li><a href="#">お知らせ2</a></li>
        <li><a href="#">お知らせ3</a></li>
      </ul>
    </div>
    <div class="service-banners">
      <a href="#" class="banner"><img src="banner1.jpg" alt="サービス1"></a>
      <a href="#" class="banner"><img src="banner2.jpg" alt="サービス2"></a>
      <a href="#" class="banner"><img src="banner3.jpg" alt="サービス3"></a>
    </div>
  </main>
  <footer>
    <nav>
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>
    <p>Copyright © 2021 サイト名 All rights reserved.</p>
  </footer>
</body>
</html>

するとこのように、HTMLの大枠の部分のコードが生成されました。
この大枠をもとに不足している中身のHTMLを埋めていけば作業を進めやすくなります。

headタグ内のコードをChatGPTで生成しよう

前章でHTMLの大枠のコードが生成されました。
headタグはHTML文書の情報となる部分です。必要に応じて追加が必要になります。

どんなタグを追加すればいいかわからない場合は、ChatGPTに追加したいことを分かりやすいように箇条書きにして質問します。

質問:

このソース内に下記を追加してheadタグ全体を完成させてください
・レスポンシブで見ることができるように
・javascript
・ogp
・アナリティクス

<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<meta name="description" content="サイトの説明文">
<link rel="stylesheet" href="style.css">
</head>

回答:

下記が追加されたheadタグ全体になります。

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイトタイトル</title>
<meta name="description" content="サイトの説明文">
<meta property="og:title" content="サイトタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="サイトの説明文">
<script src="script.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
<link rel="stylesheet" href="style.css">
</head>

上記の例では、レスポンシブ対応のためにviewportのmetaタグを追加しています。
また、JavaScriptを読み込むためにscriptタグを使用し、アナリティクスのトラッキングコードをGoogle Tag Managerを使用して追加しています。
さらに、OGPのタグを追加して、Webサイトをソーシャルメディアで共有する際に表示される情報を設定しています。

前章で生成されたheadタグの部分を質問内に入力すると、必要なタグが追加された完成形が生成されます。

ボタンのCSSをChatGPTで生成してみよう

作成したいボタンの通常時、hover時のCSSをChatGPTを使用し、生成してもらいます。

まずは、作成したいボタンの条件を決めます。

ボタンの背景色
文字の色
hover時の切り替わり方

質問:

Webサイトで使用する下記のボタンのCSSを教えて欲しいです
・通常時は背景が黒
・hover時は背景は透過で文字と枠が黒でふわっと切り替わるように

回答:

以下は、要素に対して通常時とhover時で異なるスタイルを適用するCSSの例です。

css
/* 通常時のスタイル */
button {
  background-color: black;
  color: white;
  border: 2px solid black;
  transition: all 0.3s ease-in-out; /* hover時のスタイル変化にアニメーションを付ける */
}

/* hover時のスタイル */
button:hover {
  background-color: transparent;
  color: black;
  border: 2px solid black;
}


このCSSでは、button要素に対して、通常時には背景色を黒、文字色を白、枠線を黒に設定し、hover時には背景色を透明に、文字色と枠線を黒に変更するように指定しています。
また、hover時にはtransitionプロパティを用いて、スタイル変化にアニメーションを付けています。

通常時とhover時のCSSをそれぞれ生成されました。
生成されたHTMLにbuttonタグを追加すると生成されたCSSでスタイルが適用されます。

ナビゲーションをChatGPTで生成してみよう

作成したいグローバルナビゲーションの条件を整理します。
PC、SPそれぞれの表示について生成したい内容を書き出してみましょう。

条件を決めたら、質問が複雑にならないようにステップを踏んで生成するようにします。
HTML、CSS、JavaScriptの生成を分けて質問します。

流れとして
まずはHTMLを生成 → 要件に基づいたCSSを生成 → 必要に応じてJavaScriptを生成
とします。

HTMLを生成

質問:

グローバルナビゲーションのHTML,CSSコードを教えて欲しいです。
最終的な完成の条件は下記の通りです。

・header内の右側にグローバルナビゲーションを配置
・768px以下ではハンバーガーメニューで開閉するグローバルナビゲーションとする
・ハンバーガーメニューの開閉のアニメーションはCSSを使用したアニメーションとする
・headerは常に固定

ステップごとで教えて欲しいのでまずはHTMLをお願いします

回答:

以下は、要件に基づいたグローバルナビゲーションのHTMLコードです。

php
<header>
  <a href="/" class="logo">Your Logo Here</a>
  <nav class="global-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <button class="hamburger">
    <span class="hamburger__line"></span>
    <span class="hamburger__line"></span>
    <span class="hamburger__line"></span>
  </button>
</header>
上記のコードでは、<header>タグ内にロゴ、グローバルナビゲーション、そしてハンバーガーメニューのボタンが配置されています。
グローバルナビゲーションは<nav>タグで囲み、その中に<ul>タグと<li>タグを使用してナビゲーションのリンクを定義しています。
ハンバーガーメニューのボタンは、<button>タグで作成され、3本の横線で表現されます。

要件に基づいたCSSを生成

質問:

では次にCSSをお願いします。
768px以下で表示されるハンバーガーメニューは右側で配置したいです

回答:

以下は、要件に基づいたグローバルナビゲーションのCSSコードです。

css
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

.global-nav {
  display: flex;
}

.global-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.global-nav li {
  margin: 0 20px;
}

.global-nav a {
  font-size: 18px;
  text-decoration: none;
  color: #000;
}

.hamburger {
  display: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
}

.hamburger__line {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #000;
  margin: 5px 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

@media (max-width: 768px) {
  .global-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    text-align: right;
    box-sizing: border-box;
  }

  .global-nav.open {
    display: block;
  }

  .hamburger {
    display: block;
  }

  .hamburger.open .hamburger__line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.open .hamburger__line:nth-child(2) {
    opacity: 0;
  }

  .hamburger.open .hamburger__line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}
上記のコードでは、<header>タグに対して固定の位置を設定し、背景色やパディング、アイテムの配置などのスタイルを指定しています。<nav>タグと<ul>タグ、<li>タグにもスタイルを指定し、ナビゲーションのリンクを整列させています。

メディアクエリを使用して、画面幅が768px以下の場合には、グローバルナビゲーションを非表示にし、ハンバーガーメニューを表示するように設定しています。また、ハンバーガーメニューのアイコンに対して、オープン・クローズ時のスタイルを指定しています。最後に、グローバルナビゲーションを表示するために必要な.openクラスを設定しています。

必要に応じてJavaScriptを生成

質問:

ハンバーガーメニュの開閉の制御でJavaScriptが必要であればお願いします

回答:

はい、ハンバーガーメニューの開閉制御にはJavaScriptが必要です。以下は、要件に基づいたJavaScriptのコードです。

javascript
const hamburger = document.querySelector('.hamburger');
const globalNav = document.querySelector('.global-nav');

function toggleNav() {
  hamburger.classList.toggle('open');
  globalNav.classList.toggle('open');
}

hamburger.addEventListener('click', toggleNav);
上記のコードでは、.hamburgerクラスと.global-navクラスを持つ要素をそれぞれ取得しています。
次に、toggleNav()という関数を定義して、ハンバーガーアイコンをクリックした際に呼び出される処理を記述しています。toggleNav()関数内では、classList.toggle()を使用して、ハンバーガーアイコンとグローバルナビゲーションに.openクラスを付与または削除することで、開閉制御を行っています。

最後に、addEventListener()を使用して、ハンバーガーアイコンにクリックイベントを登録しています。
クリックされた時に、先ほど定義したtoggleNav()関数が呼び出されるように設定されています。

このようにChatGPTを使うとコーディングを効率よく進めることができます。
解説文を追加してくれることもあるので、学びにもなります。
一度にたくさんの条件で質問した場合、生成の途中で止まってしまうこともあるので、段階ごとに分けると良さそうです。

実際の回答はこの記事と全く同じになるとは限りませんが、質問の仕方を参考にしていただければと思います。