初めまして。講師の藤井郁です。
簡単な機能だったらプラグインに頼らず自分でコードを書きたいと思い、挑戦することがあります。
イメージ通りにはいかず、想定以上の時間を費やすこともありますが、ひらめいたことが上手くと嬉しいですし、完成したときの達成感は大きいです。
このような満足感や高揚感をみなさんと共有できたらいいなと思い、ブログを始めました。
ということで、早速ですが、最新の投稿ブロックと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);
}3. 気を付けること
最新の投稿がレンダリングされる前にJavaScriptコードを実行すると、どうなるな分かりますか？
答えは明白ですね。取得したいHTML要素が見つかりません。
この問題を回避する方法はさまざまですが、ここでは、「addEventListener」関数を使用して、ページがロードされた後にのみコードが実行されるようにする方法を紹介します。
document.addEventListener('DOMContentLoaded', function() {
ticker();
});まとめ
この例を微調整して、何をしているのかを推測することから始めてみてください。
たとえすべてを理解できなくても、JavaScriptコードを数行変更するだけで、多くのことを学べます。
