質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.78%

  • JavaScript

    9554questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 4

投稿 2017/08/12 21:50

  • 評価
  • クリップ 0
  • VIEW 183

umauman

score 34

前提・実現したいこと

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

思いついたのが、「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でこのような効果をつけることはあまり無かったりするのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+4

個人的には非同期処理を同期処理のようにしたい場合は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/

投稿 2017/08/12 22:36

編集 2017/08/12 22:46

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2017/08/13 02:39

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

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

    キャンセル

+3

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

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

この2つは似ているようで大きく異なります。
前者ならパターン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はブラウザによっては使えないため注意

投稿 2017/08/13 03:31

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2017/08/13 14:00

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

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

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

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

    キャンセル

+2

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

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

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

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

Promise - JavaScript | MDN
Promises - Can I use

参考になれば幸いです。

投稿 2017/08/13 12:27

編集 2017/08/13 12:31

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2017/08/13 14:23

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

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

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

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

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

    キャンセル

  • 2017/08/13 14:32

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

    キャンセル

  • 2017/08/13 14:43

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

    キャンセル

  • 2017/08/13 14:50

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

    キャンセル

  • 2017/08/13 15:11

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

    キャンセル

+1

ある程度細かく動くのであればアニメーション系ライブラリを試すのも手だと思います。「アニメーション 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/

投稿 2017/08/13 00:00

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2017/08/13 02:42

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

    キャンセル

  • 2017/08/13 02:48

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

    キャンセル

  • 2017/08/13 09:25

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

    キャンセル

  • 2017/08/13 10:20

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.78%

関連した質問

  • 解決済

    三秒点灯させて三秒点滅 JS

    信号っぽいものを作ろうとしています。青をボタンを押してから三秒点灯させて、そこから自動的に三秒点滅させて、黄色というようにしたいのですが、三秒点灯させてから点滅させるやり方がよくわ

  • 受付中

    パスワードを表示する

    前提・実現したいこと パスワードを表示する、の実装の仕方を教えてください。 html css javasc でできるそうですが、phpとかpythonとかを使ってもいいのでおしえて

  • 解決済

    setTimeout()で1秒だけ、キーボードとマウスの入力をできなくする

    setTimeout()を使って、1秒間だけ、パソコンからの全てのキーと、マウスでのクリック操作を無効にしたいのですが、一括で、無効にできる方法はありますでしょうか? setT

  • 解決済

    ロゴをクリックしたらメニューがフェードインする仕組みを作りたいですが

    logoをクリックによってメニューが出てくる仕組みを作りたいです。 下記のよに書いてましたが、まったく出てこなかったです。 もしかしたらスクリプトが間違っていますか? コードを

同じタグがついた質問を見る

  • JavaScript

    9554questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

閲覧数の多いJavaScriptの質問