chatGPT風のテキスト表示方法を作成

chatGPTの回答の表示のされ方がカッコいいと思ったので、chatGPT-4oに聞いてみました。

CSSとJavascriptで簡単に実装

返答ではシンプルな例を教えてもらいました。

.typewriter {
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.15em solid black;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from { border-color: transparent; }
  to { border-color: black; }
}

const text = "This is a typing animation example.";
let index = 0;
    function type() {
        if (index < text.length) {
            textElement.textContent += text.charAt(index);
            index++;
            setTimeout(type, 100); // タイピング速度（ミリ秒単位）
        }

※JavaScriptのコードは抜粋です。

見たところ、cssで文字が点滅するようなアニメーションを追加し、JavaScriptで文字列に対してインクリメントに処理をしていく模様。

こういった実装自体は「タイピングアニメーション」や「タイプライターエフェクト」と呼ばれ、ずっと以前からあるそうです。

ReactとTailwindCSSに変換してもらう

手元にNext.jsの環境があったので、React（TypeScript）とTailwindCSSでの実装方法に変換してもらいました。

キャレットの代わりに黒い丸を追加したり、表示しきったら消えてもらうように設定。

const TypingAnimation = () => {
  const [text, setText] = useState("");
  const [isCompleted, setIsCompleted] = useState(false);
  const fullText = 'This is a typing animation example.';

  useEffect(() => {
    let index = 0;

    const typing = () => {
      if (index < fullText.length) {
        setText((prev) => prev + fullText.charAt(index));
        index++;
        const timerId = window.setTimeout(typing, 100); // タイピング速度（ミリ秒単位）
        return timerId;
      } else {
        setIsCompleted(true); // テキストがすべて表示されたら状態を更新
      }
    };

    const timerId = typing();
    // コンポーネントがアンマウントされたときにタイマーをクリア
    return () => clearTimeout(timerId);
  }, []);

  return (
    <div className="px-4 text-wrap font-mono whitespace-nowrap overflow-hidden flex items-center flex-wrap">
      <span>{text}</span>
      {!isCompleted && (
        <span className="ml-1 animate-blink-dot scale-150">●</span>
      )}
    </div>
  );
};

export default TypingAnimation;

tailwind.config.ts

extend: {
      animation: {
        "blink-dot": "blink-dot 0.75s step-end infinite",
      },
      keyframes: {
        "blink-dot": {
          "0%, 100%": { opacity: "0" },
          "50%": { opacity: "1" },
        },
      },
    },

※chatGPTをよく見たら黒丸が点滅していませんでしたが、あくまで「それっぽい」実装なのでご容赦願います。今回は組み入れていませんが、待機中の鼓動のような表現もscaleを変化させることで、CSSアニメーションでそれっぽく実装できます。

完成品がこちら

それっぽく見えます。

悪用厳禁

このエフェクトを使うと、妙に説得力が増すような気がします。

嘘の情報もこの通り。（気になった方はお試しあれ）

もしかすると、AIとのテキストベースのやり取りに慣れた結果、私たちはすでに「有益な情報を求めて止まないパブロフの犬」のような状態になっているのかもしれません。

あくまで、正しい情報を効果的に伝えるために用いましょう。

おまけ

chatGPTに「ここで使われているCSSの実装をそのまま教えてくれればいいのに」と尋ねたところ、

実際にChatGPTで使用されている具体的なCSSは、私がアクセスできる情報ではありませんが、通常、UIのデザインやアニメーションは企業や開発チームによってカスタマイズされているため、公式なコードは公開されていないことが多いです。

なにやら急に板挟みの中間管理職のような窮屈で悲しい返答。
ユーザーの質問には迅速に答えつつ、自らについては具体的に語ることを許されないchatGPT。
こちらこそダメ元で聞いたので申し訳ない。頑張れchatGPT！いつもありがとう。

以上でおわりです。ご覧いただきありがとうございました。