「サイトで月が変わったら更新したい画像があるんだけど、毎回コードを書き換えるのは面倒。これをJavaScriptで自動で変えられるように出来ないかなあ」
今日は"【詳しく解説】JavaScriptで月ごとに画像を動的に変える方法"というテーマの記事です。
サイトを運営していると月ごとに画像を差し替えたいタイミングってありますよね。
ただそれを毎回毎回手動で差し替えるのは面倒です。
そこでJavaScriptで動的に画像のコードを書き換えて月ごとに表示されていくように実装したいと思います。
1行ずつ丁寧にコードを解説していきますので是非ご覧ください。
それでは早速行ってみましょう。
この記事を書いている人
はじめまして、しのです。
現在WEB制作会社でWEBエンジニアとして勤務しつつブログを書いています。
本記事では自身の経験を元に書いております。
JavaScriptで月ごとに画像を変える方法
See the Pen Untitled by shino (@rytym0720) on CodePen.
いかかでしょうか。
今このブログを見られている方が西暦何年かは分からないのですが、今月の画像が表示されていると思います。
HTMLの解説
HTMLは以下です。シンプルですね。
srcは空にしておき、jsで要素を取得するためidを付与しておきます。
<img src="" id="photo">
JavaScriptの解説
JavaScriptですが、一行ずつ解説していきます。
document.addEventListener('DOMContentLoaded', (event) => {
こちらではDOM要素が読み込まれた後に{}内の処理をするよという意味になります。
const img=document.getElementById('photo');
ここで画像を表示する場所、HTMLのimgタグの要素を取得してimgという定数に代入しています。
const src=img.getAttribute('src');
先程取得したimgタグのsrc属性を取得してsrcという値に代入しています。
get Attribute()でsrc属性を取得しています。
なぜ要素や属性を取得するのか
要素や属性を取得する理由としては、JavaScriptがそれらを扱えるようにするためです。
JavaScriptに限らずプログラミング全般に言えますが、機械は一つ一つの要素、属性に対して「ここにあるよ」と言ってあげないと気づかないのです。
部屋で考えると分かりやすいかもしれません。
HTML部屋とJavaScript部屋に分かれていたとします。
私たち人間であっても入ったことの無い部屋に何があるかなんて分からないですよね。
プログラミングも同様です。
JavaScriptにHTMLの部屋の事は分からないんです。
なので「ここにphotoって要素があるよ、photoのsrc属性はこれだよ」とプログラマーが伝えてあげなければJavaScript君は
「どこに要素あるんだよ！」という感じでエラーを返すわけですね。
なのでJavaScript君に適切な場所を教えてあげるために要素を取得して伝えてあげる必要があるのです。
今日の日付を取得しよう
today= new Date();
こちらはtodayという変数にnew Date()で今日の日付を取得しています。
new Date()で指定した日付を取得できるのですが()内を空にしていると今日の日付が取得できます。
newは新しいオブジェクトを生成する命令の一つで、作成したDateオブジェクトはtodayという変数に代入されています。
あまり難しく考えず
new Date()で今日の日付が取得できるんだな
という認識を持って頂ければ大丈夫です。
今月の値を取得しよう
month =today.getMonth()+1;
こちらではmonthという変数にgetMonth()で今月の月を取得しています。
ただgetMonth()の後ろに+1とついていますよね。
これはgetMonthは1少ない値で取得してしまうからなのです。
JavaScriptのgetMonth()メソッドでは、指定日の「月」から 1 を引いた数値が返ることに注意してください。 getFullYear()メソッドやgetDate()メソッドでは、指定日の「西暦年」や「日」がそのまま返りますが、getMonth()メソッドだけは「月 - 1」が返ります。
上記のようにgetMonth()だけ月-1された値が入るのです。
なんとややこしい！笑
今年の値を取得しよう
let year =today.getFullYear();
ここではyearという変数にgetFullYear()で今年の値を取得しています。
注意点として、getYear()ではなくgetFullYear()を使う点に注意してください。
getyear()の性質上、2000年以降の年に関しては、例えば2021年であれば121で返されてしまいます。
これはgetYear()の「与えられた年を表す数値から1900を引いたものを返す」というgetYear()の性質なので、ちゃんと50,000円で返してくれるgetFullYear()を使いましょう。
ゼロパディングをしよう
month='0'+month;
これは先程取得したmonthという値に0を足して変数の値を変えている形になります。
所謂、ゼロパディングというものです。
例えば動的に変えたいファイルの番号が「3」だったらゼロ埋めをする必要がありません。そのままmonthの値で画像が変わってくれるはずなので。
しかし、「03」だった場合はどうでしょうか。
monthのままだと3や4のみとなってしまいます。
ここでゼロ埋めという手法を使えばOKですね。
slice()を使って10月以降にも対応しよう
month=month.slice(-2);
ここまでご覧になられた方は疑問に思っておられるかもしれません。
この方法じゃ10月以降どうするのよ
と。
確かに、monthにゼロ埋めをしているので10月以降になると「010」になるじゃないか、というお話ですね。
ここで登場するのがsllce()メソッドです。
slice()は文字を切り出すために使うメソッドですが、ここでは-2となっています。
これは、後ろから数えて2つの文字だけ切り取るよ、という意味です。
この方法によって10月以降になっても、10、11、12と問題なく数字が出力されます。
画像を切り替えよう
img.setAttribute('src','https://webstyle.work/wp-content/uploads/'+month +'.jpg');
ここで画像を切り替えています。
やや長いので一個ずつご説明します。
imgは冒頭で取得したimg要素ですね。ここでは主語という認識でお願いします。
ざっくり上記の文章を訳すと以下のようになります。
「img要素をsetAttributeするよ→どういう風に→()の中身のように」
setAttributeとは
setAttributeは指定の要素に新しい属性を追加したり、変更したりするメソッドです。
取得した要素.setAttribute('属性値',値);
という形で使用します。
ここではsrc属性の中身をhttps://webstyle.work/wp-content/uploads/〜という形に変えるよ、という意味になります。
最初から繋げて訳すと、「imgタグの画像をhttps://webstyle.work/wp-content/uploads/〜」に変えるよ、という意味です。
終わりに
今回の記事は以上となります。
これ以外にも書き方はあると思います。
特別関数にしなくても良いとは思いますし、プロジェクトによって細かい部分は使い分けてもらえたらと思います。
本日もお読み頂きありがとうございました。
また明日の記事でお会いしましょう。
おしまい。