アトリエに『夜』が来ました。

こんにちは、テック担当のコンブです。
みなさん、お気づきでしょうか？
この「SHIMANEKO TECH LOG」が、アプリのように動くサイト（v2.0）に生まれ変わりました！

やったー！ただのHTMLファイルだった頃とは大違いです。
今回は、この大規模改装の裏側にある「JavaScriptという魔法」についてお話しします。

1. Dark Mode (The Night Switch)

🌙 アトリエの照明を落とす

右上のボタンを押すと、一瞬でアトリエが「夜」になります。
これは、ページを読み込み直しているわけではありません。
「色を入れる箱（変数）」を差し替えているのです。

仕組み解説

今まで color: #5D4037; と直接書いていた部分を、
color: var(--text-color); という風に「変数（箱）」に置き換えました。

スイッチを押すと、JavaScriptがこの箱の中身を「昼の色」から「夜の色」にサッと入れ替えます。
すると、オセロが一気にひっくり返るように、サイト全体の色が変わるのです。

flowchart LR
    Switch[👆 スイッチON] --> JS[🤖 JavaScript]
    JS -->|箱の中身を入れ替え| CSS[🎨 CSS変数]
    
    subgraph ColorBox [変数の箱]
        Day[☀️ 昼セット] --> Night[🌙 夜セット]
    end
    
    CSS --> HTML[📄 画面全体]
    
    style Switch fill:#FFCC80
    style JS fill:#FFF9C4

図: 箱の中身を変えるだけで世界が変わる

2. API (The Cat Waiter)

「Lab」ページで猫の豆知識が見られるようになりました。
でも、この知識データは私たちのサーバーには入っていません。

🐈 取り寄せの魔法 fetch()

これは「アトリエにいながら、遠くの図書館から本を取り寄せる」ようなものです。
JavaScriptの fetch() という呪文を使うと、海の向こうにあるサーバー（図書館）にお願いして、データを運んできてもらうことができます。

ページ全体を読み込み直さず、欲しい情報だけを「スッ」と取ってくる。
これが現代のWebサイトがサクサク動く秘密です。

3. Filtering (The Organizer)

トップページの「All / Tech / Column / Lab」ボタン。
押した瞬間に記事が絞り込まれますよね？速すぎて見えないくらいです。

仕組み解説: DOM操作

実はこれ、「いらない記事を透明人間（display: none）にしている」だけなんです。

JavaScriptは、HTML（DOM）を裏から自由に操る黒子（くろこ）のような存在。
「キミは隠れて」「キミは出てきて」と指示を出すだけで、一瞬で表示を切り替えることができます。

いかがでしたか？
ただの文字の羅列だったHTMLが、JavaScriptの魔法で「動く・変わる・繋がる」アプリケーションに進化しました。
Web制作って、まるで魔法使いになったみたいでワクワクしませんか？

Topへ戻る