Zenn
✍️

ChatGPTのようなタイプライターエフェクトを簡単に実装できるJSライブラリ: TypeIt

2024/06/18に公開
JavaScript
React
library
typewriter
tech

最近、ChatGPTなどで見かけるようになったタイプライターエフェクト。文字が一文字ずつ表示されるあれ、あなたも一度は見たことがあるのではないでしょうか？
私はこのエフェクトが大好きで、自身のプロジェクトでも使ってみたいと思いました。しかし、一から実装するのは大変そう...と思っていたところ、素晴らしいライブラリを見つけました。その名も「TypeIt」です。

TypeItは、ウェブ上で柔軟で動的なタイピング・タイプライターエフェクトを作成するためのJavaScriptライブラリです。このライブラリの存在を知って触ってみたら、その使いやすさと多機能さに感動。これは多くの人に知ってもらいたいと思い、この記事を書くことにしました。

この記事では、TypeItの基本的な使い方から応用例、そしてReactとの連携方法まで、TypeItの魅力を紹介します。ウェブサイトに動的なエフェクトを加えたい方、新しいライブラリを探している方、ぜひ最後までお読みいただければ幸いです。

インストール

npm install typeit-react

yarn add typeit

Reactの場合は type-it-react でインストール

npm install typeit-react

基本的な使用方法


TypeItの基本的な使用方法は、対象となる要素を指定し、文字列を定義するだけ。

<p id="simpleUsage"></p>

new TypeIt("#simpleUsage", {
    strings: "This is a simple string.",
    speed: 50,
    waitUntilVisible: true,
}).go();

複数の文字列をタイプする


複数の文字列を重ねてタイプするには、文字列の配列を渡します。

<p id="multipleStrings"></p>

new TypeIt("#multipleStrings", {
  strings: ["This is a great string.", "But here is a better one."],
  speed: 50,
  waitUntilVisible: true,
}).go();

フォーム要素にタイプする


入力要素やテキストエリア要素にタイプライターエフェクトを作成することも可能です。

<fieldset>
  <label for="formElement">Full Name</label>
  <input type="text" id="formElement" />
</fieldset>

new TypeIt("#formElement", {
  strings: "Alex MacArthur",
  waitUntilVisible: true,
}).go();

アニメーションのキーポイントでコードを実行する


各文字列や文字がタイプされる前後、またはインスタンス全体が終了した後にコールバックメソッドを利用することができます。

new TypeIt("#callback", {
  strings: ["Look, it's rainbow text!"],
  afterStep: function (instance) {
    instance.getElement().style.color = getRandomColor();
  },
}).go();

細かいエフェクトを作成する


TypeItには、スピード、削除、一時停止、カーソル移動など、最小の詳細を制御するためのメソッドが含まれています。

new TypeIt("#companionMethods", {
  speed: 50,
  waitUntilVisible: true,
})
  .type("Nvver", { delay: 300 })
  .move(-3)
  .delete(1)
  .type("e")
  .move(null, { to: "END" })
  .type(" let yees")
  .pause(300)
  .delete(2)
  .type("sterday use up to muc")
  .move(-4)
  .type("o")
  .move(null, { to: "END" })
  .type("h of today.")
  .pause(500)
  .break({ delay: 500 })
  .break({ delay: 500 })
  .type("<em>- Will Rogers</em>")
  .go();

非同期対応


.exec()メソッドを使用すると、アニメーションの任意のポイントで非同期にコードを実行することができます。

new TypeIt("#asyncExec", {
  waitUntilVisible: true,
})![](https://storage.googleapis.com/zenn-user-upload/51e7732b9cd6-20240618.gif)
  .type("Hold up!")
  .exec(async () => {
    //-- Return a promise that resolves after something happens.
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        return resolve();
      }, 2000);
    });
  })
  .type(" OK, now go.")
  .go();

アニメーションの一時停止と再開


freeze()とunfreeze()メソッドを使用すると、アニメーションを簡単に一時停止と再開することができます。

const instance = new TypeIt("#pauseResume", {
  strings:
    "Click the 'freeze' button to freeze and unfreeze this instance as much as you want.",
  waitUntilVisible: true,
}).go();

document.querySelector("#freezeButton").addEventListener("click", function (e) {
  if (instance.is("frozen")) {
    instance.unfreeze();
    return;
  }

  instance.freeze();
});

TypeItとReact

TypeItはReactとも相性が良く、Reactコンポーネント内で簡単に使用することができます。typeit-reactというライブラリを使用することで、ReactのライフサイクルとTypeItのインスタンスを簡単に管理することができます。

import TypeIt from "typeit-react";

function MyComponent() {
  return (
    <TypeIt
      options={{
        strings: "This is a simple string.",
        speed: 50,
        waitUntilVisible: true,
      }}
    />
  );
}

以上がTypeItの基本的な使用方法と特徴です。詳細な情報やドキュメンテーションについては、公式ウェブサイトをご覧ください。

公式サイト / デモ
https://www.typeitjs.com/

公式ドキュメント
https://www.typeitjs.com/docs/

Discussion