ケケンタ

JavaScriptでタイプライター効果を実装したい……

ケケンタ

ページ読み込み時に自動で動くタイプライターが欲しい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において人気の高いアニメーション効果
JavaScriptタイプライター

をご紹介します。

ボタンなしで自動開始するシンプルな実装なので、いままさに「タイプライター効果を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

特にページ読み込み時に自動で動くタイプライターの実装は、ユーザビリティを向上させる効果的なアニメーションです。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するタイプライターはES6クラスを使用した実装になっていますが、従来の関数ベースの実装も可能です。

【コピペOK】基本的なJavaScriptタイプライター

① デモ

最初からテキストが表示されてしまっている場合は、一度ページをリロードしてみてください。

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

  このタイプライターの特徴

② HTML

<div id="typewriter-demo" class="typewriter-text"></div>

シンプルなdiv要素のみです。IDを指定してJavaScriptから要素を取得できるようにしています。

③ CSS

.typewriter-text {
    font-family: 'Courier New', monospace;
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c3e50;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
}

今回はモノスペースフォントを使用することで、タイプライターらしい見た目を実現しています。

④ JavaScript

class Typewriter {
    constructor(element, text, speed = 100) {
        this.element = element;
        this.text = text;
        this.speed = speed;
        this.currentIndex = 0;
        this.isTyping = false;
    }

    start() {
        if (this.isTyping) return;

        this.isTyping = true;
        this.currentIndex = 0;
        this.element.textContent = '';
        this.type();
    }

    type() {
        if (this.currentIndex < this.text.length) {
            this.element.textContent += this.text.charAt(this.currentIndex);
            this.currentIndex++;
            setTimeout(() => this.type(), this.speed);
        } else {
            this.isTyping = false;
        }
    }
}

// ページ読み込み時に自動開始
document.addEventListener('DOMContentLoaded', function() {
    const typewriter = new Typewriter(
        document.getElementById('typewriter-demo'),
        'Hello, World! これは基本的なJavaScriptタイプライターです。',
        100
    );
    typewriter.start();
});

DOMContentLoadedイベントを使用することで、ページの読み込みが完了したタイミングで自動的にタイプライター効果が開始されます。

実装のポイント

1. クラスベースの設計

ES6クラスを使用することで、コードの可読性と保守性が向上します。

2. 自動開始の仕組み

document.addEventListener('DOMContentLoaded', function() {
    // タイプライターの初期化と開始
});

この部分により、ページ読み込み完了時に自動でタイプライターが開始されます。

3. 速度のカスタマイズ

コンストラクタの第3引数で速度を調整できます

// 遅い速度（200ms）
const slowTypewriter = new Typewriter(element, text, 200);

// 速い速度（50ms）
const fastTypewriter = new Typewriter(element, text, 50);

カスタマイズ例

テキストの変更

const typewriter = new Typewriter(
    document.getElementById('typewriter-demo'),
    'カスタムテキストをここに入力してください',
    100
);

複数のタイプライター

document.addEventListener('DOMContentLoaded', function() {
    // 1つ目のタイプライター
    const typewriter1 = new Typewriter(
        document.getElementById('typewriter-1'),
        '1つ目のテキスト',
        100
    );

    // 2つ目のタイプライター
    const typewriter2 = new Typewriter(
        document.getElementById('typewriter-2'),
        '2つ目のテキスト',
        150
    );

    typewriter1.start();
    typewriter2.start();
});

よくある質問

タイプライターを停止したい場合は？

現在の実装では停止機能は含まれていませんが、以下のようにstop()メソッドを追加できます：

stop() {
    this.isTyping = false;
}

ループ再生は可能ですか？

はい、type()メソッドの最後の部分を修正することで実現できます：

type() {
    if (this.currentIndex < this.text.length) {
        this.element.textContent += this.text.charAt(this.currentIndex);
        this.currentIndex++;
        setTimeout(() => this.type(), this.speed);
    } else {
        this.isTyping = false;
        // ループ再生の場合
        setTimeout(() => this.start(), 2000); // 2秒後に再開
    }
}

まとめ

今回ご紹介した基本的なJavaScriptタイプライターは、以下の特徴があります：

• シンプルな実装：ブラウザ表示されたら自動開始
• カスタマイズ可能：速度やテキストを簡単に変更
• 軽量：必要最小限のコードで実装

ケケンタ

Webサイトのトップページやランディングページで使用することで、ユーザーの注目を集める効果的なアニメーションとして活用できます。

実装時の注意点として、アクセシビリティを考慮してprefers-reduced-motionメディアクエリでの制御も検討してみてください。アニメーションが苦手なユーザーへの配慮になります。

この記事が皆様のWeb制作のお役に立てれば幸いです！

ケケンタの独学ITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしていただけるとうれしいです！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...

関連記事

ケケンタ

こんにちは！　ケケンタです。

最近、主婦や会社員、はたまた学生の間でもWeb制作の副業の需要が高まっています。

Web制作スキルはプログラミングと比較すれば身につけやすく、独学で案件を獲得できるレベルに到達することも決して不可能ではありません。

とはいえ、Web制作を副業にするためには多くのことを学び、身につける必要があることもまた事実です。

この記事ではその中の１つとも言える

Web制作で副業をするなら使いこなしたい
JavaScriptアニメーション

をいくつかピックアップしてご紹介したいと思います。

JavaScriptアニメーションはHTML/CSSと比べて習得難易度が高めです。
一方、一度作成してしまえば、あとは部品として使い回すことも可能という特徴も持っています。

ケケンタ

この記事でご紹介するJavaScriptアニメーションのコードはもちろんすべてコピペ使用OKですので、お気軽にご活用ください！

※アニメーションは今後も追加する可能性があります。

Web制作で副業をするならアニメーション実装は避けては通れない道です。

ご自身でJavaScriptアニメーションを自作できるようになるまでの間、あるいは自作するまでもないようなシンプルなアニメーション案件に遭遇したときなどに、この記事をご活用いただければと思います。

ケケンタ

各アニメーションの簡単な解説もご用意しています。
ご参考になれば幸いです。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

フェードイン

See the Pen フェードインアニメーション【VanillaJS】 by ケケンタ (@lgshifbg-the-looper) on CodePen.

フェードインアニメーションはWeb制作で必須アニメーションの１つです。
実装方法も比較的シンプルで、それに対する演出のプラス効果が大きい便利なアニメーションです。

スライダー

See the Pen スライダー【slick】 by ケケンタ (@lgshifbg-the-looper) on CodePen.

slickスライダーはスライダー実装でよく用いられるJavaScriptライブラリです。
JavaScriptライブラリはいくつも種類があり、ライブラリを活用することで自作するのがとても大変なアニメーションも簡単に実装することが可能です。
※皆さんご存じのjQueryもライブラリの１つです。

CDN（Web上から直接jsファイルを読み込む方式）以外だと、jsファイルをWeb上からダウンロードし、CSSファイルなどと同じようにしてHTMLファイルに読み込む方法があります。

※基本的にCDNで問題ありませんが、ローカル環境で使用する際はネットに繋がっていないとファイルが読み込めずエラーになる点に注意です。

ハンバーガーメニュー

See the Pen ハンバーガーメニュー【vanillaJS】① by ケケンタ (@lgshifbg-the-looper) on CodePen.

ハンバーガーメニューは、スマホサイズのコーディングでよく利用されます。その理由はスマホサイズではヘッダーメニューが横に表示しきれないためです。
そのため、実際の案件でよくあるパターンは、PCサイズでは通常のヘッダーメニューを表示し、スマホサイズではハンバーガーメニューを表示するという実装です。

ケケンタ

ハンバーガーメニューもWeb制作の実案件ではよく実装するため、必須アニメーションの１つと言えます。

アコーディオンメニュー

See the Pen アコーディオンメニュー【vanillaJS】 by ケケンタ (@lgshifbg-the-looper) on CodePen.

上記のコードでは素のJavaScriptを使用していますが、アコーディオンメニューは実を言うとjQueryを使用すればもっと簡単に実装することが可能です。

しかし、jQueryで実装されたアコーディオンメニューには、連続クリックされた際に不自然の動きをしてしまうという不都合が生じます。

そのため、この記事ではjQueryを使用せず素のJavaScriptだけでアコーディオンメニューを実装したコードをご紹介しています。

②でheightを使用すると滑らかな動きを実装できないという点について、
こちらはCSSの仕様（heightにautoや100％を使用するとtransitionが効かなくなる）によるものです。

一方、heightにautoや100％を指定できないということは、アコーディオンメニューの各要素の高さの固定値を設定することになってしまい、行数などに合わせた適切な高さを要素に設定できない＝見た目が崩れる結果になります。

そのため、上の実装ではheight以外でHTML要素の高さを構成するプロパティ（border,padding,line-height）に着目して開閉動作を制御しています。

Web制作で副業をするならJavaScriptアニメーションの習得は必須

ケケンタ

以上、Web制作で副業をするなら絶対に使いこなしたいJavaScriptアニメーションでした。

JavaScriptはHTML/CSSと比較して習得難易度が高めです。

そのため、ついつい敬遠しがちになってしまう方も多いのではないかと思います。

しかし、Web制作で副業をするならJavaScriptの使用は必須です。

まだJavaScriptに慣れていない、手を出せていないという方は、まずはこの記事でご紹介しているコードをそのまま使い回すという形でも、少しずつJavaScriptを使用することに慣れていくことをおすすめします。

ケケンタ

いきなり完璧は目指さず、少しずつでもアニメーションに慣れていきましょう！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...

関連記事