javascriptのsplitを使い1文字ずつ表示する[jQueryなし]

こんにちは。

プログラミング学習中のdynaです。

この記事は、Javascriptを学習している方向けに、 Javascriptで1文字ずつ表示する方法を記録しています。

やり方は色々あると思うのですが、ここでは1文ずつタグで囲み、表示しています。

デモはこちら↓　右下のrerunを押せばまた動きます。

See the Pen split-javascript-CSS by dyna (@sakudyna) on CodePen.

1. 考え方
2. ①HTMLから1文字ずつ表示したい文字を取得
3. ②①をsplitで区切り、で囲む
4. ③②のそれぞれに表示するstyleを付与する
5. 最後に

考え方

①HTMLから1文字ずつ表示したい文字を取得

②①をsplitで区切り、で囲む

③②のそれぞれに表示するstyleを付与する（元の要素には不透明度0を設定しておく）、遅延表示で1文字ずつ表示させる

全体コードはデモのcodepenにありますので、ご覧ください。

では詳細を見ていきます。

①HTMLから1文字ずつ表示したい文字を取得

コードを見ていきます。

HTML↓


  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bonheur+Royale&display=swap" rel="stylesheet">
  
　<div id ="word">
        <p id ="text">javascript-sample</p>
  </div>

javascript-sample

</div>

今回取得して、1文字ずつ表示したいのは、

javascript-sample

の部分です。

取得するJavaScriptはこちら↓


//textのid要素を取得、のち<span>～に書き換える
let spanText  = document.getElementById('text');

//要素の中身を取得、文字を区切るため
let text = document.getElementById('text').innerHTML;

//textのid要素を取得、のち～に書き換える

let spanText = document.getElementById('text');

//要素の中身を取得、文字を区切るため

let text = document.getElementById('text').innerHTML;

用語の簡単な説明は以下です。

document.getElementById

id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。

Element.innerHTML

要素内の HTML または XML のマークアップを取得したり設定したりします。

引用元：https://developer.mozilla.org/

つまり、要素（変数 spanText）と要素内のHTML（変数 text）を取得しているのね。

②①をsplitで区切り、で囲む

要素が取得できたので、innerHTMLで取得した内容をで囲みます。

対象のJavaScript↓　


//変数に空白を設定(spanで上書きする）
let newText ="";
    
　//splitで<span>に区切る
　 text.split("").forEach(function(value,i) {
        newText += '<span style ="animation:showtext 3s ease ' + [i]*0.2 + 's forwards;" class ="show">' + value + '</span>';
    });

  //spanTextを書き換える
   spanText.innerHTML = newText;

//変数に空白を設定(spanで上書きする）

let newText ="";

//splitでに区切る

　 text.split("").forEach(function(value,i) {

newText += '' + value + '';

});

//spanTextを書き換える

spanText.innerHTML = newText;

詳細は以下です。

文字を分割して、それぞれにを付与したいので、split関数を使用しました。

split関数

stringObj.split(区切り文字または正規表現[, 分割数]

文字列を分割して、配列に格納できます。

ちなみにここでいう「javascript-sample」を　split(“”)　で区切ると、下図のように配列で確認できます。

Javascript↓

console.log↓

splitで分割した配列を　forEach　で回してを付与します。

forEachについてはこちら↓

forEach()

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します

引用元：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

ここでは
配列名.forEach( コールバック関数(要素の値, 要素のインデックス, 配列) )
という形で使用しています。

デモのコードでいうと、

text.split.(“”).forEach( function(value){ 　←ここのfunction内がコールバック関数

newText += “” + value + “”;

})

という形になります。

分割した配列の中身1つずつに、function内の処理を実行しているのね。
valueはここでいう配列の値（”ｊ”,”a”,”v”,…….)ね。

③②のそれぞれに表示するstyleを付与する

さて、1文字ずつ分割してで囲ったので、その中についでにスタイルも設定してしまいます。

考え方としては

CSSで要素の不透明度を0　⇒　styleを付与（不透明度0から不透明度1へアニメーション）+　CSSのdelayをずらして、1文字ずつ遅延して表示させる

です。

元のCSS↓


body{
    background-color: rgb(73, 40, 0);
}
.word{
    width: 100%;
    height: 80px;
    margin: auto;
    position: absolute;
    top:150px;
}
p{
    text-align: center;
    font-family: 'Bonheur Royale', cursive;
    font-size: 80px;
    font-weight: bold;
    line-height: 1.5em;
    letter-spacing: 0.5em;
    color: rgb(255, 255, 255);
}
span{
    opacity: 0;
}
@keyframes showtext{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

body{

background-color: rgb(73, 40, 0);

}

.word{

width: 100%;

height: 80px;

margin: auto;

position: absolute;

top:150px;

}

text-align: center;

font-family: 'Bonheur Royale', cursive;

font-size: 80px;

font-weight: bold;

line-height: 1.5em;

letter-spacing: 0.5em;

color: rgb(255, 255, 255);

}

span{

opacity: 0;

}

@keyframes showtext{

0%{

opacity: 0;

}

100%{

opacity: 1;

}

先ほどと一緒ですが、JavaScript　↓


  let newText ="";

    text.split("").forEach(function(value,i) {
        newText += '<span style ="animation:showtext 3s ease ' + [i]*0.2 + 's forwards;">' + value + '</span>';
    });
    spanText.innerHTML = newText;