素の JavaScript でペライチ web ページ作る

# 1. はじめに
今回は、自分自身への備忘録を兼ねて、[ちょまど氏](https://twitter.com/chomado) 考案の「素の JavaScript でペライチ web ページ作る」方法を、お伝えしたいと思います

- 参考文献：[YouTube ちょまどチャンネル：【ライブコーディング】素の JavaScript でペライチ web ページ作る (36:25 あたりから開始)](https://www.youtube.com/live/An8lQm5cx4M?feature=share)
- 参考文献：[Qiita：#技育祭 プログラミング入門 50 分セッション手順書](https://qiita.com/chomado/items/a64d6c0ddd19718ed0ce)

# 2. この記事を読んでできること
- HTML5、CSS、JavaScript でペライチ web ページを作れるようになる

# 3. 注意事項
- 特になし

# 4. 必要なもの
- Windows OS PC（Windows11を想定）
- テキストエディタ（VSCodeを利用）

# 5. VSCode と エクスプローラー を開く
- `cmd` コマンドプロンプトを開き、以下のコマンドを実行する

```plaintext:コマンドプロンプト
// エクスプローラーを起動する
> explorer .

// VSCodeを起動する
> code .
```

# 6. HTMLファイルを作成
- VSCodeの「新しいファイル」から `index.html` ファイルを作成する

```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技育祭</title>
    <link rel="stylesheet" href="style.css">
</head>

<body class="light-theme">
    <h1>今日やることリスト</h1>
    <ol>
        <li>[html] とりあえず web サイトを作る</li>
        <li>[css] いい感じの見た目にする</li>
        <li>[css] ライトテーマとダークテーマを作る</li>
        <li>[JavaScript] ライトテーマとダークテーマをボタンで切り替える</li>
        <li>[行けたら] デバッグ用にコンソールメッセージ出力</li>
        <li>[行けたら] カスタムプロパティ（CSS 変数）を：root 疑似</li>
    </ol>

    <button id="btn">ダークテーマにする</button>

    <script src="app.js"></script>
</body>

</html>
```


# 7. CSSファイルを作成
- VSCodeの「新しいファイル」から `style.css` ファイルを作成する

```css:style.css
:root {
    --pink: pink;
    --white: rgb(255, 255, 255);
    --black: #303030;
}

body {
    font-family: Meiryo;
    background-color: var(--white);
    color: var(--black);
}

/* ライトテーマ */
.light-theme {
    background-color: var(--white);
    color: var(--black);
}

/* ダークテーマ */
.dark-theme {
    background-color: var(--black);
    color: var(--white);
}

/* ボタン */
#btn {
    background-color: var(--black);
    color: var(--white);
    border: var(--white);
    height: 50px;
    width: 150px;
    border-radius: 8px;
    position: absolute;
    top: 20px;
    right: 50px;
}
```

# 8. JavaScriptファイルを作成
- VSCodeの「新しいファイル」から `app.js` ファイルを作成する

```javascript:app.js
"use strict";

// ボタンの参照を取得
const btn = document.getElementById("btn");

// ボタンクリック時
btn.addEventListener("click", () => {
    // テーマを切り替え
    document.body.classList.toggle("dark-theme");
    document.body.classList.toggle("light-theme");
    
    // クラス名を取得
    const className = document.body.className;

    // ボタンのテキスト切り替える
    if (className === "light-theme") {
        btn.textContent = "ダークテーマにする";
        btn.style.color = "white";
        btn.style.backgroundColor = "black";
    } else {
        btn.textContent = "ライトテーマにする";
        btn.style.color = "black";
        btn.style.backgroundColor = "white";
    }

    // ログ出力
    console.log("現在のクラス名は" + className);
});
```

# 9. 動作確認
- エクスプローラー から `index.html` ファイルをダブルクリックし、開いたブラウザにて動作確認する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240522/4bb807b8-2260-f7aa-e6eb-e8a7b3dbc3b7.png)

---

# 10. おわりに
いかがでしたでしょうか？素の JavaScript でペライチ web ページ作ることができたのではないかと思います
今回の記事が、みなさまの学習の参考になれば幸いです

2023/3/18 TAKAHIRO NISHIZONO

---