【ゼロからはじめるプログラミング】JavaScript学習 #34

ゼロからはじめるプログラミング講座の第四十六回です。今回は画像のパスを変更してネットサーフィンの効率を上げるプログラムを作ります。規則性を見つけて画像のパスを置き換えるだけのものです。もちろんウェブ上に公開されているサイトでも使用できます

以下のファイルをダウンロードして、各フォルダを作りファイルを配置してください。

ルートフォルダ

index.html
style.css
test.js
smallフォルダ
largeフォルダ

index.htmlにはsmallフォルダ内の画像が表示されるコードが書かれているので、これをJavaScriptでlarge側にある画像と置き換えるプログラムを作ります。コードはtest.jsを作り、その中に書きましょう。

これは置き換える画像のパスが予測できる場合に使える方法です。

ではこれを、

smallフォルダにある画像をlargeフォルダにある画像と置き換えなさい。
置き換えた画像の横幅を30％にして縦並びに変えなさい。

両方とも今まで学んだ知識で実装できます。

まずはプログラムの構成を考えてみましょう。以下は解答例になります。

<img>タグを全て変数化する。
src属性を変更する。
スタイルを書き換える。

簡単そうですね。他にも<body>タグ内のinnerHTML全文を置換する方法もあります。

どちらが軽量高速かはケースバイケースですが今回は1つずつ要素をループします。

1.<img>タグを全て変数化する。src属性を変更する。

const img = document.querySelectorAll("img")

for(let item of img){　// NodeListはfor-ofで
  let src = item.getAttribute("src")
  src = src.replace("small", "large") // メソッドチェーンでもよい
  src = src.replace(/s\.png$/,".png") // 行末のs.pngを変える
  item.setAttribute("src",src)
  item.classList.add("user_custom") // 変更を加えた画像に新しいクラスを付けます
}

querySelectorAll()は取得した要素をNodeListという形式で返します。

NodeListにはfor-inを使いません。もちろん通常のforループを使うのはアリです。

for-inの代わりにfor-ofというものを使います。for-ofの詳しい説明は別の記事にて。

使い方はfor-inとにているんですが区画番号ではなく要素そのものを変数として受け取っています。img[key]のように配列から参照するような書き方は必要ありません。

パスの置換ですが今回はsmallフォルダをlargeフォルダに。行末のs.pngを.pngに変えています。/s\.png$/

\.は何でもよい特殊文字「.」を文字列の”.”に変えるために「\」でエスケープします。

行末を指定するために「$」を付けます。

最後に変更を加えた目印としてuser_customというクラスを追加しています。

要素.classList.add(クラス名)

3.スタイルを書き換える。

const replaced = document.querySelectorAll(".user_custom")

for(let item of replaced){
  item.style.width = "30%"
  item.style.display = "block" // ブロック要素は縦並び
}

これは全て解説済みなので問題ないですね？

const img = document.querySelectorAll("img")

for(let item of img){　// NodeListはfor-ofで
  let src = item.getAttribute("src")
  src = src.replace("small", "large") // メソッドチェーンでもよい
  src = src.replace(/s\.png$/,".png") // 行末のs.pngを変える
  item.setAttribute("src",src)
  item.classList.add("user_custom") // 変更を加えた画像に新しいクラスを付けます
}

const replaced = document.querySelectorAll(".user_custom")

for(let item of replaced){
  item.style.width = "30%"
  item.style.display = "block" // ブロック要素は縦並び
}

お疲れ様でした。これで画像にリンクされているクリック後に拡大表示する画像などを全て置き換えるということができます。今回はあまり練習にならなかったかもしれませんが次回はあらかじめ予測できないリンクを取得して画像を置き換えてみましょう。

次も頑張って記事を作るのでチャレンジしてください！