【JavaScript】タイプライター風に文字列を一文字ずつ出力する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでタイプライター風に文字列を一文字ずつ出力する方法をご紹介しています。

完成イメージは下記の通りです。「Run Pen」をクリックすると実際の動きをご確認いただけます。

DEMO

See the Pen
Typewriter Animation | JavaScript by ryohei (@intotheprogram)
on CodePen.

実行すると、要素の中に文字列が一文字ずつ出力されるかと思います。

上記の疑問にお答えできればと思います！

では、解説していきます。

文字列を出力する要素を作成する

まずはタイプライター風にエキスつを表示する要素を作成します。JS側で「id」で要素を取得するので、適当に名前を付けておきます。下記のサンプルでは「typewriter」としています。

HTML

<span id="typewriter"></span>

以上でHTML要素の作成は完了です。続いてスクリプトを作成していきます。

タイプライター風に文字列を表示するスクリプトを作成する

本記事で作成する処理の流れは下記のようになるかと思います。

• 文字列を出力する要素を指定する
• タイプライター風に表示する文字列を指定する
• 文字列を出力する要素を取得する
• 文字列を一文字ずつ分割して配列に格納する
• 配列内の文字を一定の秒間隔で一文字ずつ指定要素に出力する

上記の流れをイメージしつつスクリプトを作成します。使いまわすことができて、拡張しやすいように組んでみます。

JS

const typewriter = (param) => {

    let el = document.querySelector(param.el);

    let speed = param.speed;

    let string = param.string.split("");
    string.forEach((char, index) => {

        setTimeout(() => {

            el.textContent += char;

        }, speed * index);

    });

};
typewriter({

    el: "#typewriter", //要素

    string: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", //文字列

    speed: 50 //速度

});

以上でタイプライター風に文字列を一文字ずつ出力することができます。

使い方は簡単で、実行時にパラメータに要素、文字列、スピードを指定するだけです。内部ではsplit()で文字列を一文字ずつ分割して、分割した文字列をsetTimeout()で時間をずらして要素に入れる処理を実行しています。

最後に文字列を入力しているように見せるためにカーソルを付けてみましょう。

出力する文字列の末尾にカーソルを付ける

カーソルはCSSの擬似要素で作ります。contentの記号を変えるだけで済みますし、スタイルも思い通りです！

#typewriter::after {

    content: "|";

    animation-name: blink;

    animation-duration: 1s;

    animation-iteration-count: infinite;

}

@keyframes blink {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

以上でカーソルの設定は完了です。必要に応じて使用しましょう！

最後に

今回文字列をタイプライター風に出力する処理を自前で組んでみました。もしライブラリが使用できるのであれば下記の記事でご紹介している「iTyped.js」がおすすめです。設定も簡単で必要な機能は一通り揃っていますので、ぜひ試してみてくださいね！

以上、JavaScriptでタイプライター風に文字列を一文字ずつ出力する方法のご紹介でした！