【JavaScript】文字列を一文字ずつ表示させる

タイプライター風に一文字ずつテキストが表示されるコードを書きました。JavaScriptでの記述なのでjQueryの呼び出しなどは必要ありません。

タイプライター風に一文字ずつ表示されるJavaScriptコード

See the Pen [js][/js]一文字ずつ出てくる文章（300万ドルのお金を稼いだ老婦人） by nkmrkisk (@rekid) on CodePen.

説明

「id」属性を付与したHTML要素を、配列データで設定することでタイプライター風に一文字ずつ表示させるJavaScriptコードになっています。設定の内容については、一文字ずつ表示させたいHTML要素に対して「id」を付け、それをJavaScriptのOptionに設定してあげるだけになります。特に転用に関する決め事などは無いのでご自由にお使いください。

設定できるOptionについての説明

/* ----- option ----- */
var id = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t']; //指定するidを全て配列で渡す
var txSp = 100; // テキストの表示速度
var dly = 1000; // 次の文章までの待ち時間
/* ----- option ----- */

Optionの設定によっては、テキストの表示速度を変えたり、次の段落（id指定）に移るまでの時間の感覚をミリ秒単位で設定できるようにしております。

注意点

注意するべき点としては、id指定でかこった要素の中に<br>などのHTMLタグが挿入されていると、そこで処理がとまってしまいます。
細かい指定などを行いたい場合は、<span>などのインライン要素に対しての指定が適切な場合があります。

一文字ずつ表示させるためのソースコード

※ページトップで紹介しているHTMLソースは冗長なので、省略しています。

html
<div id="a">ある老婦人がチェース・マンハッタン銀行本店に書類鞄を持って入って来た。</div>
<div id="b">老婦人は、銀行の窓口係に、鞄の中の３百万ドルを預金するために、</div>
<div id="c">口座を開きたい事、多額故に、先ず、銀行の頭取に会いたい旨も告げた。</div>

javascript
/* ----- option ----- */
var id = ['a','b','c']; //指定するidを全て配列で渡す
var txSp = 100; // テキストの表示速度
var dly = 1000; // 次の文章までの待ち時間
/* ----- option ----- */
var count = 0;
var tx = [];
var txCount = [];

window.onload = function(){
  kamikakushi();
  countSet();
  itimozi();
}

function countSet(){ // 文字数カウントの初期設定
  for(n=0;n<id.length;n++){
    txCount[n] = 0;
  }
}

function kamikakushi(){ // 要素をtx[i]に保持させ、非表示にする
  for(i=0;i<id.length;i++){
    id[i] = document.getElementById(id[i]);
    tx[i] = id[i].firstChild.nodeValue; // 初期の文字列
    id[i].innerHTML = '';
  }
}

function itimozi(){ //　一文字ずつ表示させる
  id[count].innerHTML = tx[count].substr( 0, ++txCount[count] )+"_"; // テキストの指定した数の間の要素を表示
  if(tx[count].length != txCount[count]){ // Count が初期の文字列の文字数と同じになるまでループ
    setTimeout("itimozi()",txSp); // 次の文字へ進む
  }else{
  id[count].innerHTML = tx[count].substr( 0, ++txCount[count] ); // テキストの指定した数の間の要素を表示
    count++; // 次の段落に進む為のカウントアップ
    if(count != id.length){ // id数が最後なら終了
    setTimeout("itimozi()",dly); // 次の段落へ進む
    }
  }
}

まとめ

JavaScriptだけで作ったタイプライター風の一文字ずつ表示させるサンプルコードはいかがでしたでしょうか。
こういった表示のさせかたは、意外と汎用性が高いのではないかと思っています。（今後、ルパン三世のタイトルみたいなの作ろうかな。）
勉強がてら作ったので、まだまだ改善の余地はあります。