webフロントエンドに限りますが、LLMsは見た目に対する想像力がないので、指示でなかなか苦労します。

例えばハンバーガーメニュー制作を依頼した場合、LLMsはUIに弱く、cssがうまく書けないので何度か修正をさせる必要があります。それぞれへの指示の出し方を比べてみましょう。

Code LLaMAへの指示は日本語でもOK

日本語を理解しますが、返答は英語なので最初っから英語で質問します。

Code LLaMAここをクリックすると手軽にチャットボットとして利用できます。

ハンバーガーメニューコードをCode LLaMAに依頼

筆者問：Min-width: 760px for a navbar, max-width: 768px for a hamburger menu and html css js for a menu with a drawer menu that comes right out when the button is clicked. width: 768px for the hamburger menu Specify an appropriate colour for the button and make sure it is displayed properly on the screen. The button has three lines in it, which form an X when clicked.

htmlのメニューを表示するタグが抜けていた

下記のコードが生成されました。ボタンはあるけどメニューのタグがありません。実際にこれを実装してみたらわかりますがまるで用をなしません。

 #html 

<div class="brand">Logo</div>
<div class="hamburger"><span></span><span></span><span></span></div>
 #css 

.hamburger {
  cursor: pointer;
  padding: 5px;
  margin-right: 10px;
  border: none;
  background-color: transparent;
  outline: none;
  
  span {
    display: block;
    height: 4px;
    width: 30px;
    background-color: #ccc ;
    margin-bottom: 5px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  @media (max-width: 768px) {
    display: none;
  }
}

 #JavaScript 

const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelectorAll('.nav-link');

function toggleNav() {
  if (window.innerWidth < 769) {
    navLinks.forEach(link => link.classList.toggle('active'));
  } else {
    navLinks.forEach(link => link.classList.remove('active'));
  }
}

hamburger.addEventListener('click', toggleNav);

nav部分を追加してcss jsを完成する様に依頼してみた

そこでこのように再依頼しました。
筆者問：With the above html there is no drawer menu, please create 4 menu items with nav ul li. Rewrite the css and js accordingly.

文脈を繋げる力が足りないCode LLaMA

今度はnavは作ったが、前回の依頼をすっかり忘れ、下記のようなコードを書いてきました。ハンバーガーボタンの実装部分がすっかり忘れ去られています。

#hrml

<header>
  <nav>
    <ul>
      <li><a href="#home" class="logo">Home</a></li>
      <li><a href="#about" class="logo">About Us</a></li>
      <li><a href="#services" class="logo">Services</a></li>
      <li><a href="#contact" class="logo">Contact Us</a></li>
    </ul>
  </nav>
</header>


 #css 
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

nav {
  background-color: #333;
  padding: 10px;
  text-align: center;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  float: left;
  margin-left: 20px;
}

nav a {
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

nav a:hover {
  color: black;
}

.current {
  color: red;
}

/* JS */
var currentPage = window.location.pathname;
var menuItems = document.querySelectorAll("nav li");
for (var i = 0; i < menuItems.length; i++) {
  var item = menuItems[i];
  if (item.href == currentPage) {
    item.className += " current";
  }
}


 #JavaScript 
var currentPage = window.location.pathname;
var menuItems = document.querySelectorAll("nav li");
for (var i = 0; i < menuItems.length; i++) {
  var item = menuItems[i];
  if (item.href == currentPage) {
    item.className += " current";
  }
}

新規で書くのではなく追加で書くという依頼を再度してみた

これでわかってくれるかな？
筆者問：Now the bottom button section is gone. Could you add to the code you have already filled in?
<div class="brand">logo</div> <div class="hamburger"><span></span><span></span><span></span></div>

しかし返答はこちら。全く違うコードを書き始めました。

<form action="" method="post">
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email"><br><br>
  <button type="submit">Submit</button>
</form>

さらに質問してみます。
筆者問：No, that's not what I meant - go back one. Now the button part below has disappeared. Can you write a complete set of code including it? <div class="brand">Logo</div> <div class="hamburger"><span></span><span></span><span></span></div>

一つ前の質問を踏まえる事ができないらしい

その結果がこちら。トランスフォーマーはどこまで届いているのやら。navの中に入れ子にして、ロゴなどを気を利かせて配置してくれはしたが、メニュー部分が欠落しています。

<nav class="navbar">
  <div class="container">
    <div class="brand">Logo</div>
    <div class="hamburger"><span></span><span></span><span></span></div>
    <button class="btn btn-primary">Sign Up</button>
  </div>
</nav>

なぜこの様な事が起こるのか本人に聞いてみた

筆者問：LLaMa Chatに一つ前のチャットで依頼したものに修正を加えて欲しい場合に、一つ前での依頼をすっかり忘れてしまうので、依頼を１からしなければならないのですが理由はなぜですか？

Code LLaMA返答： LLaMA Chatbotは、直前の会話内容を記憶しており、それに基づいて次の会話を行うことができます。しかし、一度会話が終了すると、LLaMA Chatbotはその情報を失い、新しい会話を開始することになります。
これは、LLaMA Chatbotが持つメモリーの性質上の制限によるものであり、人間の会話と同じく、会話ごとに情報を保存することは不可能です。

そのため、直前の会話内容を参照する必要がある場合は、再度会話を開始する必要があります。

筆者さらに問：同じ会話のスレッドで、私が1つ前のチャットで指示したものに修正を依頼する時にどの様にしたら、一つ前に依頼した要件を維持したまま、それに修正を加えてくれますか？

Code LLaMA返答： LLaMA Chatbotは、直前の会話内容を記憶しており、それに基づいて次の会話を行うことができます。しかし、一度会話が終了すると、LLaMA Chatbotはその情報を失い、新しい会話を開始することになります。
そのため、直前の会話内容を参照する必要がある場合は、再度会話を開始する必要があります。

例えば、以下のように入力することで、直前の会話内容を参照しながら、修正を依頼することができます。

• 「前回の会話で、○○○と言われた部分を○○○に変更してほしい」

• 「前回の会話で、○○○と言われた部分を○○○に修正してほしい」

このように、直前の会話内容を明示的に参照することで、LLaMA Chatbotはその情報を引き継いで修正を行うことができます。

Code LLaMAの問題についてGPT-4に聞いてみた

筆者問：LLaMa Chatに一つ前のチャットで依頼したものに修正を加えて欲しい場合に、一つ前での依頼をすっかり忘れてしまうので、依頼を１からしなければならないのですが理由はなぜですか？

GPT-4返答：LLaMa Chatや他の一部のチャットボットが前のチャットを引き継がない理由はいくつか考えられます。

1. ステートレス設計: 一部のチャットボットはステートレス（状態を持たない）で設計されているため、各チャットセッションが独立しています。これにより、過去のチャット履歴に依存しないで各リクエストを処理できます。

2. プライバシーとセキュリティ: 過去のチャットを保存して引き継ぐと、ユーザーのプライバシーとデータのセキュリティに関わる問題が生じる可能性があります。

3. リソースの制限: 状態を保存しておくには、サーバーサイドでリソース（メモリやデータベース）を確保する必要があります。これがコストやパフォーマンスに影響を与える場合もあります。

4. シンプルな設計: 状態を持たないことで、システムの設計やメンテナンスがシンプルになり、トラブルシューティングが容易になる場合があります。

5. ユーザーエクスペリエンスの選択: 一部の用途（例えば、カスタマーサポート）では、新しい問い合わせごとに状態をリセットする方がユーザーエクスペリエンスに適している場合もあります。

それらの理由から、LLaMa Chatが状態を引き継がない設計になっている可能性があります。ただし、これは一般的な観点であり、LLaMa Chatの具体的な設計理由については確認する必要があります。

GPT-4にハンバーガーメニューを依頼

いつもの通り日本語で依頼します。
筆者問：@media screen and (max-width: 768px) {} のnav内のUIのliが縦並びのプルダウンメニューにし、それ以外はボタンを非表示にしてナブバーになるよに修正してください。また、ボタンは三本線でクリックしたら×になる様にお願いします。

GPT-4が書いたコードがこちら

 #html 
<nav>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <button id="hamburger-btn" aria-label="Toggle Menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </button>
</nav>


 #css 
body {
  font-family: Arial, sans-serif;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
}

.menu li {
  margin-left: 50px;
}

.menu a {
  color: white;
}

#hamburger-btn {
  display: none;  /* Initially hidden */
}

.bar {
  width: 25px;
  height: 3px;
  margin: 3px 0;
  background-color: #333;
}

@media screen and (max-width: 768px) {
  .menu {
    position: fixed;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    transition: left 0.3s ease;
  }

  .menu li {
    margin-left: 0;
    padding: 15px;
  }

  #hamburger-btn {
    display: block;
    position: fixed;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
  }

  #hamburger-btn.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  #hamburger-btn.active .bar:nth-child(2) {
    opacity: 0;
  }

  #hamburger-btn.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}


 #JavaScript 
const btn = document.getElementById("hamburger-btn");
const menu = document.querySelector(".menu");

btn.addEventListener("click", function () {
  if (menu.style.left === "0px" || menu.style.left === "") {
    menu.style.left = "100%";
    btn.classList.remove("active");
  } else {
    menu.style.left = "0px";
    btn.classList.add("active");
  }
});

スマホビューが真っ白

いつものようにcssが変です。
筆者問：残念なことに @media screen and (max-width: 768px) {} のビューでは画面が白紙になり何も表示されていません。
GPT-4修正css:

/* ... (前のCSS設定) */

#hamburger-btn {
  /* ... (前の設定) */
  background-color: #333;  /* ボタンの背景色を設定 */
  color: white;  /* ボタンのテキスト（アイコン）色を設定 */
}

.bar {
  width: 25px;
  height: 3px;
  margin: 3px 0;
  background-color: white;  /* 三本線の色を白に設定 */
}

/* ... (他の設定) */

この様に助言してあげると理解してくれる

筆者問：@media screen and (max-width: 768px) {} のビューで navの高さが０になっているのでボタンが見えません。 よって初期画面には何も表示されません。 ボタンの高さを指定し、NAV内のボタンのみは表示されているように修正してください。

GPt-4返答：なるほど、ボタンが表示されていないから画面が白紙に見えるのですね。それでは、 #hamburger -btn に明示的な高さと幅を設定し、nav の高さも調整してみましょう。

以下に修正後のコードを示します。

/* ... (前のCSS設定) */

nav {
  min-height: 60px;  /* navの高さを指定 */
}

@media screen and (max-width: 768px) {
  .menu {
    /* ... (前の設定) */
  }
  
  #hamburger -btn {
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 50px;  /* 幅を指定 */
    height: 50px;  /* 高さを指定 */
    background: none;
    border: none;
    z-index: 1;  /* オプション: 他の要素より前に来るように */
  }
  
  /* ... (他の設定) */
}

ボタンは出たが三本線が見えない

筆者問：デベロッパーツールでボタンの位置が確認できたのでクリックして、ドロアーメニューが出てきました。 しかしボタンが白くて三本線も見えていないのでボタンがどこにあるか分からず、以前として初期画面は真っ白です。

GPT-4返答：ご指摘ありがとうございます、Zunさん。ボタンの色と三本線（バー）の色が反映されていない問題があるようですね。

以下のようにCSSを調整して、ボタンと三本線が見えるようにしましょう。

/* ... (前のCSS設定) */

#hamburger-btn {
  /* ... (前の設定) */
  background-color: #333;  /* ボタンの背景色を設定 */
  color: white;  /* ボタンのテキスト（アイコン）色を設定 */
}

.bar {
  width: 25px;
  height: 3px;
  margin: 3px 0;
  background-color: white;  /* 三本線の色を白に設定 */
}

/* ... (他の設定) */

GPT-4返答：この修正でボタンが黒背景に白い三本線として見え、初期画面も真っ白でなくなるはずです。

どうでしょうか？確認していただけますか？ 😊

と顔文字付きで返答してきたのはいいが、問題は解決されていません。

spanはインライン要素なので線に指定したサイズが反映されていない

なので、chromeのウェブでヴェロッパーツールの助言をそのまま投げてみました。
筆者問：以下の三本線のサイズが無効になっています。 width: 25px; height: 3px; でヴェロッパーツールの助言は、以下の通りです。 display: inline プロパティによって width の適用がブロックされています。 display を inline 以外に設定してみてください。

GPT-4返答：デベロッパーツールの助言に従い、.bar セレクタに display: block; を追加することで、widthとheightが適用されるように修正できます。以下のようにCSSを更新してみてください。

ということで出来たコードがこちら。まだcssのブラッシュアップが必要ですが、一応形にはなりました。