最新の投稿のスライドショーを自作する

初めまして。講師の藤井郁です。

簡単な機能だったらプラグインに頼らず自分でコードを書きたいと思い、挑戦することがあります。

イメージ通りにはいかず、想定以上の時間を費やすこともありますが、ひらめいたことが上手くと嬉しいですし、完成したときの達成感は大きいです。

このような満足感や高揚感をみなさんと共有できたらいいなと思い、ブログを始めました。

ということで、早速ですが、最新の投稿ブロックとJavaScriptを組み合わせて、投稿のスライドショーを作成する方法を紹介します。

チャレンジ課題①で使える機能です。

自分で解決したいという方は、ネタバレ注意です！

また、JavaScriptの知識がある方を対象としています。

1. HTML要素の取得

まずは、最新の投稿を表示するHTML要素を取得しましょう。

要素を取得するための関数はいろいろありますが、私は、「querySelector」または「querySelectorAll」という関数を使います。

これらの関数は、CSSと同じセレクターを使用して要素を取得するので、最新の投稿ブロックに「ticker」というクラスを追加します。

開発者ツールで確認すると、次のようなHTMLが追加されていることが分かります。

不要な情報は省きました。

<ul class="ticker">
    <li><a href="[投稿のURL1]">タイトル１</a></li>
    <li><a href="[投稿のURL2]">タイトル２</a></li>
    <li><a href="[投稿のURL3]">タイトル３</a></li>
    <li><a href="[投稿のURL4]">タイトル４</a></li>
    <li><a href="[投稿のURL5]">タイトル５</a></li>
</ul>

５つのリスト項目を取得したいので、「querySelectorAll」関数を使います。

const posts = document.querySelectorAll('.ticker li');

値を変更する必要がないので、「posts」という定数に代入します。

開発者ツールのコンソールを利用して確認してみましょう。

コードを直接入力することができます！

2. スライドショーの作成

つぎに、この「NodeList」を使ってスライドショーを作成しましょう。

コードの書き方はさまざまなので、一例として参考にしてください。

使用している関数の説明は割愛します。

MDNのNodeListや関数についてのドキュメントを参考にしてください。

NodeList APIのforEach()メソッドのブラウザーサポートを確認することも重要です。

let index = 0; // postsのインデックスとして使用する

function ticker() {
    // 最新の投稿のHTML要素を取得する
    const posts = document.querySelectorAll('.ticker li');

    // 全てのリスト項目のdisplayプロパティ値をnoneに変更する
    // 無名アロー関数を使用しています
    posts.forEach( post => {
        post.style.display = 'none';
    });

    // indexの値に基づき１件の投稿を表示する
    posts[index].style.display = "block";

    // indexの値をインクリメントする
    // indexの値が5以上になったら0に戻す
    index++;
    if (index >= posts.length) {index = 0 }
    
    // ５秒ごとに表示する投稿を変更する
    setTimeout(ticker, 5000); 
}

document.addEventListener('DOMContentLoaded', function() {
    ticker();
});

まとめ

この例を微調整して、何をしているのかを推測することから始めてみてください。

たとえすべてを理解できなくても、JavaScriptコードを数行変更するだけで、多くのことを学べます。