jQueryプラグインTyped.jsの使い方

Typed.jsは、文字を1文字ずつ打ち込むように表示するタイピングアニメーションのライブラリです。配列に入れた複数の文字列を順番にタイプしては消す動きを、数行の設定で作れます。この記事では、読み込み、HTML、JavaScriptの設定、主なオプションの順に紹介します。

jQueryプラグインTyped.jsの使い方

Typed.jsは「jQueryプラグイン」として紹介されることが多いものの、現在のバージョン（2026年8月時点で3.0.0）はjQueryに依存しない単体のJavaScriptライブラリです。jQueryを使っているサイトでもそのまま動きますが、Typed.jsのためだけにjQueryを読み込む必要はありません。

npmを使う場合は次のコマンドでインストールし、ES Modulesとしてimportします。

npm install typed.js

import Typed from 'typed.js';

CDNの場合は、自作のJavaScriptファイルより前にTyped.jsを読み込みます。

    <script src="https://unpkg.com/typed.js@3.0.0/dist/typed.umd.js"></script>
    <script src="main.js"></script>

バージョン番号は、動作確認した値に固定してください。最新のURLと変更点は公式リポジトリに記載があります。
https://github.com/mattboldt/typed.js

html

    <h1 class="heading-primary">I am <span class="typed"></span></h1>

上の場合、typedクラスを付けたspanタグの中に、文字がタイピングのアニメーション付きで出力されます。spanは空のままにしておき、表示する文字列はJavaScript側で指定します。

jsファイル

document.addEventListener('DOMContentLoaded', function () {
  var typed = new Typed('.typed', {
    strings: [
      'Developer',
      'Designer',
      'Web Marketer'
    ],
    typeSpeed: 20,
    backSpeed: 20,
    startDelay: 2000,
    loop: true,
  });
});

上のようにすると、stringsの配列の文字列が順番に出力されます。
new Typed()の第1引数は出力先のセレクタ、第2引数がオプションです。

主なオプション

• typeSpeed: 1文字を打つ速さ（ミリ秒）。数値が小さいほど速い
• backSpeed: 1文字を消す速さ（ミリ秒）
• startDelay: タイピングを始めるまでの待ち時間（ミリ秒）
• backDelay: 打ち終わってから消し始めるまでの待ち時間（ミリ秒）。表示したままにしておく長さはこちらで調整する
• loop: trueで最後の文字列のあと先頭に戻る
• showCursor / cursorChar: 点滅カーソルの表示と文字（既定は|）
• smartBackspace: 次の文字列と一致する先頭部分は消さずに残す（既定で有効）

止めたい・作り直したいとき

SPAやタブ切り替えで要素が消えるのにタイピングを続けると、エラーやメモリの無駄につながります。インスタンスを変数に残しておき、不要になった時点でtyped.destroy()を呼びます。

const typed = new Typed('.typed', { strings: ['Developer'], typeSpeed: 20 });

// 画面を離れるときなど
typed.destroy();

タイピングのあとに同じ要素をフィルターや並べ替えで動かすなら、jQueryプラグインIsotopeの使い方も参考にしてください。