【JavaScript】イラストや文章等を時間をずらして表示させるには？

Question

###前提・実現したいこと
イラストや文章等の要素を時間をずらして表示させるような効果を付けたいと思っています。
遅延時間に法則性はありません。

思いついたのが、「setTimeout」を使う方法です。

とりあえず下記2パターンで思い通りの動きにはなりました。

###HTML

<p id="text01">1番目の文章（1秒後に表示）</p>
<p id="text02">2番目の文章（1.5秒後に表示）</p>
<p id="text03">3番目の文章（4.5秒後に表示）</p>

###CSS

p {display: none;}

###パターン1

setTimeout(function (){
	document.getElementById('text01').style.display = 'block';
}, 1000);
setTimeout(function (){
	document.getElementById('text02').style.display = 'block';
}, 1500);
setTimeout(function (){
	document.getElementById('text03').style.display = 'block';
}, 4500);

###パターン2

setTimeout(function() {
	document.getElementById('text01').style.display = 'block';
	setTimeout(function() {
		document.getElementById('text02').style.display = 'block';
		setTimeout(function() {
			document.getElementById('text03').style.display = 'block';
		}, 3000);
	}, 500);
}, 1000);

ただ、このような記述が良いものかがわかりません。
下記についてご教授いただけないでしょうか？

-「setTimeout」を使用した場合の良い記述
-「setTimeout」以外でこのような効果を付ける記述

通常このような効果を付けるにはどのような記述をするのが一般的であるか知りたく思っています。
もしくは生のJavaScriptでこのような効果をつけることはあまり無かったりするのでしょうか？

Answer 1

個人的には非同期処理を同期処理のようにしたい場合はPromiseを利用して記述しています。
※IE11はPromiseに対応していないので、こちらのpolyfillを読み込むことで同様の処理が可能です。
babelやTypescriptの変換環境があるのであれば、await/asyncを利用すればより簡素に記述できます。

var anime  = function (target, delay) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      document
        .querySelector(target)
        .setAttribute('class', 'show');

      resolve();
    }, delay);
  });
}

anime('#text01', 1000)
  .then(function () {
    anime('#text02', 500)
  })
  .then(function () {
    anime('#text03', 3000)
  });

https://jsfiddle.net/takmatz/b7ugohwq/

Comments

[umauman]

ご回答ありがとうございます。（サンプルコードも感謝いたします！）

PromiseについてMDNの記事等少し読んでみました。ちょっと初心者にはハードルが高そうですが勉強してみようと思います。
スタイルを付与するように書いてくださったので、CSSの方でもう少し工夫もできるかもしれません。

Answer 2

仕様としてどちらを実現したいのでしょうか?

• text2は画面表示後1.5秒後に表示したい
• text2はtext1が表示されてから0.5秒後で表示したい

この２つは似ているようで大きく異なります。
前者ならパターン1、後者ならパターン2ですね

JavaScriptの経験も浅いということなので
わかりやすさ重視でsetTimeoutをつかうのはありだと思います

ただDOMのスタイルを直接操作することはやめましょう
初期値でis-hidden的なクラスをつけておき時間が来たら外すのが良いと思います
あと、共通の処理になる場合は関数にまとめたほうが良いです

<p id="text01" class="is-hidden">1番目の文章（1秒後に表示）</p>
<p id="text02" class="is-hidden">2番目の文章（1.5秒後に表示）</p>
<p id="text03" class="is-hidden">3番目の文章（4.5秒後に表示）</p>

.is-hidden { display: none; }

function show(id, delay, next) {
    setTimeout(function() {
        var target = document.getElementById(id)
        target.classList.remove('is-hidden')
        if (next) next()
    }, delay)
}
// パターン1
show('text01', 1000)
show('text02', 1500)
show('text03', 4500)

// パターン2
show('text01', 1000, function() {
    show('text02', 500, function() {
        show('text03', 3000)
    })
})

ちゃんと動かしていないですがおそらく動くはずです
※ classList.removeはブラウザによっては使えないため注意

Comments

[umauman]

ご回答ありがとうございます。
初心者向けに考えてくださって感謝いたします。
処理としては今作っているものに関しては、順番に表示したい（前のアニメーションが終わってから）なので、後者の「text2はtext1が表示されてから0.5秒後で表示したい」に当たるのかなと思います。

>ただDOMのスタイルを直接操作することはやめましょう

そうなのですね。普通にこのような書き方をしてしまっていました。
調べてみたのですが、「拡張性に欠ける」「数が多くなると負荷がかかる」といった感じの内容が出てきますね。（という認識で大丈夫でしょうか？）
classのつけ外しで調整してみようと思います。

関数にまとめる方法も教えていただき、とても助かります。
ソースを見て思ったのですが、要素の取得はIDで行って、実際の表示部分の制御はclassのつけ外しで行うといった役割分担もテクニックなのかなと思いました。
（要素取得はIDで行うのが速い、と入門書で学習したので…）

Answer 3

方法は他の方が示されているので、JavaScriptの簡単な説明を記載しておきます。

パターン1の場合、1番目の文章と２番目の文章の間に新たに文章を追加したいときに非常に手間になります。なぜなら、以降の処理すべての秒数をずらす必要があり保守性に欠けます。
また、setTimeout() は、指定ミリ秒後に実行するという単純な仕組みなので、実行順序が保証されているわけでもありません。

パターン2の場合、パターン1とは違い実行順序は保証されています。しかし、処理が増えるにつれて入れ子(ネスト)になり、1つの関数が肥大化する傾向にあります。ゆえに、途中に処理を追加するときに一見してどこに挿入したらよいのか分かりにくいという問題があります。
このような問題をコールバック地獄といいます。

このコールバック地獄の問題を解決するのが、ECMAScript6から追加されたPromiseオブジェクトです。
対応ブラウザに問題がなければ、こちらを利用されたほうがすっきりとした記述で実現できるかと思います。
Tak_Matzさんが紹介してくれているのでそちらが分かりやすいかと思います。

Promise - JavaScript | MDN
Promises - Can I use

参考になれば幸いです。

Comments

[umauman]

補足説明ありがとうございます。
とてもわかりやすい解説です。

setTimeoutは理解しやすくて良いな、と思ったもののおっしゃるとおり、順序を保証したい場合（パターン2）は永遠とネストしていくのかな？と考えていたところでした。
コールバック地獄…まさに…

Promiseオブジェクトに挑戦してみようと思います。

ちょっと本題から反れるのですが、入門の時点で、ECMAScript6の記法を学習する方がいいのかな？と思っていたりします。（なかなか初心者向けの情報が見当たらないですが）

ブラウザ対応等の参考リンクもありがとうございました！

[syuus]

ECMAScript6 + Babelで解説されているJavaScriptの入門書がいくつか出ているので、JavaScriptを学習したいのであればそういった書籍を購入されるのが良いかと思います。

[umauman]

何度もありがとうございます。
手元にある「JavaScript本格入門」という書籍が比較的、JavaScript初学者向けにもわかりやすく解説されているといった印象ですが、「Babel」のキーワード込で他の書籍も当たってみようと思います。
今のところ、Babel公式サイトの変換ツールでちょっと遊んでみている程度なのですが；

[syuus]

お持ちの書籍の最新版「改訂新版JavaScript本格入門」では、Babelの解説やトランスコンパイラーとしてBabelを採用して検証したコードが記載されているようです。もしかしたらお手元の書籍に解説があるかもしれません。

[umauman]

手元にあるのは「改訂新版」です。おっしゃる通り、Babelの項目等々あります。せっかくなので頑張ってみようかと思います。
何度もご親切にアドバイスいただきまして本当にありがとうございました！

Answer 4

ある程度細かく動くのであればアニメーション系ライブラリを試すのも手だと思います。「アニメーション javascript ライブラリ」でいくつか出てくると思います（下記は一例です）。

【ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ - ICS MEDIA】
https://ics.media/entry/14973

【最速のアニメーションライブラリはこれだ！ JSライブラリの性能をDOMとWebGLで比較検証 - ICS MEDIA】
https://ics.media/entry/14993

【Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 | un-Tech】
http://un-tech.jp/tweenmax-started/

Comments

[umauman]

ご回答いただきありがとうございます。
アニメーションライブラリ、沢山ありすぎて悩みますが、今後、シンプル軽量なものを検討してみようと思います。色々なサンプルを見てみましたがとても面白いです。
添付いただいたページに、唯一使用しているjQueryが「幅広い環境で動作する枯れた技術」などと書かれており、ちょっと落胆していますが。jQuery、好きなのですが…。

[kei344]

> jQuery、好きなのですが…。
私も常用していますよー。
大規模なフレームワークがいくつか出てきているので、それらと比較されてしまうのは仕方がないかなと思います。アニメーションについても同じ事で、jQueryはリッチなアニメーションを低負荷で処理することを目指しているわけではないため、アニメーション専用ライブラリに比べると見劣りするというだけだと思います。

[zohnam]

「枯れた技術」というのは、悪い意味ではありませんよ。
長年使い込まれているのでもうトラブルの起きる余地がない、安定した技術という感じの、いい意味の言葉です。

[umauman]

お二方ともコメントありがとうございます。
最近「jQuery」ダメダメ。もうすぐ無くなるよ、と煽る情報が多くて焦っていたりするのですが…
おっしゃる通り記述のお手軽さと同時にトラブルが少ないのがとてもありがたいです。
アニメーションに特化したライブラリにも興味が湧きました。（ちょっと物理学できちゃうような錯覚に陥りそうですね…）