JS Masterpiece: Ultimate Visual Guide

01 01

Data Attribute Architecture

HTMLはただの表示器ではない。「データ格納庫」だ。

DATA

<img>

Presentation Layer

DATASET (裏データ)

name: "Bird A"

image: "big.jpg"

なぜHTMLにデータを書くのか？
JavaScriptの中に画像リスト（配列）を書くと、画像の追加変更のたびにJSファイルを編集する必要があります。
HTMLタグの中に data-* という「隠しポケット」を作ることで、HTMLを編集するだけでコンテンツ管理が完結します。

<!-- HTML側 -->

<img src="thumb.jpg"

  data-image="hd-photo.jpg"

  data-name="Wild Bird">

// JS側での取得 (datasetプロパティ)

const url = element.dataset.image;

const name = element.dataset.name;

02 02

NodeList Collection

ページ上の要素を「連番付きの箱」に整理する。

const thumbs = document.querySelectorAll(...)

index [0]

IMG

current = 0

index [1]

IMG

index [2]

IMG

index [3]

? 課題1: 不在

NodeListとは何か？

querySelectorAll(".thumb") は、クラス名が一致するすべての要素をかき集めて、NodeList という「番号付きの整理箱」に入れます。
課題1で4枚目の画像が動かないのは、HTML上で class="thumb" を付け忘れたため、この「整理箱」に入れてもらえなかったからです。

// NodeListは配列のように扱える
const thumbs = [
  img要素 (0番目),
  img要素 (1番目),
  img要素 (2番目),
  // ...ここに追加されないと操作できない
];
                    

03 03

Event & Scope (this)

クリックされた「当事者」を特定する。

Click! this

私はクリックされた要素です

thumbs.forEach(function(item) {
  item.onclick = function() {
    // ここでの 'this' は item (クリックされた本人)
    this.dataset.image; 
    
    // 逆に 'item' 変数を使っても同じだが、
    // イベントハンドラ内では this を使うのが慣例
  };
});
                        

04 04

Modulo Operator Logic

if文を使わずに、数値を永遠に回転させる魔法。

FORMULA

(i + 1) % 4

世界は「余り」で回っている

時計の針は「12」を超えると「1」に戻ります。これと同じことを計算で行うのが剰余演算子（%）です。
「現在値 + 1」を「全体の数（4）」で割った余りを求めると、3の次は自動的に0になり、無限ループが完成します。

Current: 0 -> (0+1)%4 = 1

Current: 1 -> (1+1)%4 = 2

Current: 2 -> (2+1)%4 = 3

Current: 3 -> (3+1)%4 = 0 Return!

05 05

Recursion Engine

関数が自分自身を呼び出し、時間を刻む。

requestAnimationFrame()

Function Call Self

fadeOut() を実行

透明度 > 0 ?

YES / NO

自分を再予約 (Loop)

画像入替 & fadeIn()

06 06

The Mathematics of Fade

0.01の引き算が作る滑らかな曲線。

Opacity: 1.0

Opacity: 0.0

fadeOut()
val -= 0.01

Switch Image

fadeIn()
val += 0.01

07 07

Perfect Sync (Task 2)

画像と文字を「同じ神経」でつなぐ。

Variable: opacityval

bigImg (画像)

課題2

bardname (文字)

TEXT

                        // 同じ変数を代入することで同期する

                        bigImg.style.opacity = opacityval;

                        bardname.style.opacity = opacityval;