コース目次 / 第7章
動きを付ける
JavaScript を導入して、ボタンでダークモードに切り替わるようにします。
ここまでのサイトは、見るだけのものでした。この章から JavaScript を使って、押したら変わる サイトにします。
今日のゴール
ヘッダーに小さなボタンが1つ増えます。それを押すと、ページ全体が暗い配色に変わります。もう一度押すと元に戻ります。
ミニ解説その1: JavaScript は「〜されたら〜する」
JavaScript(ジャバスクリプト) は、ページに動きを付ける言語です。長いので JS と略します。
やることは、ほとんどの場合この形です。
何かが起きたら、何かをする。
今回でいえば「ボタンが押されたら、ページの配色を切り替える」です。この1文をそのままコードにします。
使う道具は3つだけです。
| 書き方 | 意味 |
|---|---|
document.querySelector('.名札') |
その名札が付いた部品を1つ取ってくる |
.addEventListener('click', ...) |
クリックされたら、続きの処理をする |
.classList.toggle('dark') |
dark という名札を付けたり外したりする |
toggle(トグル) は「切り替える」という意味です。付いていなければ付ける、付いていれば外す。この1語でオンオフの両方をやってくれます。
ミニ解説その2: 仕組みのからくり
配色を切り替えると聞くと難しそうですが、実際にやっていることは単純です。
- CSS に、あらかじめ 「
darkが付いているときの見た目」 を書いておく。 - JS は、ボタンが押されたら
<body>にdarkという名札を 付け外しするだけ。
色を変えているのは CSS で、JS は名札を付け外ししているだけです。ここが分かると、あとの応用がぐっと楽になります。
ミニ解説その3: script タグの位置は固定ルール
<script src="script.js"></script> は、必ず </body> の直前に置きます。 例外を考えなくていいように、ルールとして覚えてください。
理由は簡単で、JS は「部品を取ってくる」ところから始まるからです。HTML より先に JS が動いてしまうと、取ってくるはずの部品がまだ存在せず、何も起きないまま止まります。だから最後に置きます。
書き写すその1: script.js を作る
mysite の中に script.js という新しいファイルを作って、書き写します。たった5行です。
// ヘッダーのボタンを押したら、body に dark クラスを付けたり外したりする
const themeButton = document.querySelector('.theme-button');
themeButton.addEventListener('click', () => {
document.body.classList.toggle('dark');
});=> は「アロー関数」という書き方の一部です。いまは「ここから先が、クリックされたときにやること」の合図だと思っておけば十分です。
書き写すその2: HTML にボタンと script を足す
<a href="#hobby">趣味</a> <a href="#links">リンク</a>+ <button class="theme-button" type="button">ダーク</button> </nav> </header> <p class="site-url">https://haruto-camera.example.com/</p> </footer>+ + <script src="script.js"></script> </body> </html>書き写すその3: CSS にダークのときの見た目を書く
style.css の、メディアクエリより前 に足します(メディアクエリは常にいちばん最後です)。
} +.theme-button {+background-color: #3c5747;+color: #fbfaf7;+border: 1px solid #fbfaf7;+border-radius: 999px;+padding: 4px 14px;+font-family: inherit;+font-size: 14px;+cursor: pointer;+}+ +body.dark {+background-color: #23262a;+color: #e6e3dd;+}+ +body.dark h1,+body.dark h2,+body.dark .card h3 {+color: #9dc4ab;+}+ +body.dark .intro,+body.dark .card p,+body.dark .site-footer p {+color: #b0aca4;+}+ +body.dark .card {+background-color: #2e3238;+box-shadow: none;+}+ +body.dark .site-footer {+background-color: #2e3238;+}+ @media (max-width: 600px) { .site-header {body.dark h1, のようにカンマで区切って並べると、「このどれにも同じ見た目を当てる」という意味になります。1つずつ書かなくて済む書き方です。
保存してリロードし、ヘッダーの「ダーク」ボタンを押してください。配色が変われば成功です。もう一度押すと戻ります。
ミニ解説その4: エラーの見つけかた(Console)
JS は 1文字でも間違えるとその先が全部止まります。HTML や CSS のように「一部だけ効かない」ではなく、まるごと動かなくなるのが特徴です。
そこで、前の章で開いた開発者ツールをもう一度使います。今度は Console(コンソール) というタブだけを見ます。
開発者ツールを開いて Console タブを押すと、赤い文字でエラーが出ていることがあります。
赤い文字は怒られているのではなく、手がかりです。 英語ですが、いちばん右に script.js:3 のようにファイル名と行番号が出ます。そこを見に行けば、たいてい原因が分かります。全文を読む必要はありません。
よく出るものだけ挙げておきます。
| 赤い文字 | だいたいの意味 |
|---|---|
... is not defined |
名前の綴りが違う |
Cannot read properties of null |
querySelector が部品を見つけられなかった(名札の綴り違い) |
Unexpected token |
括弧かセミコロンが足りない |
あなたの番
- ダークのときの配色を自分で決めてください。
body.darkのbackground-colorとcolorの色コードを変えます。真っ黒(#000000)より、少し明るい暗さ(#23262aなど)のほうが目が疲れません。 - ボタンの文字を変えてください。
<button class="theme-button" type="button">ダーク</button>の「ダーク」の部分です。絵文字を入れてもかまいません。
うまくいかないときは
ボタンを押しても何も起きない
上から順に確認してください。
<script src="script.js"></script>が</body>の直前にありますか。<head>に書くと動きません。- HTML の
class="theme-button"と、JS のquerySelector('.theme-button')の綴りは同じですか。JS 側は先頭に点(.)が必要です。 - 開発者ツールの Console に赤い文字が出ていませんか。出ていれば、そこに書かれた行番号を見に行ってください。
ボタンは効いているのに色が変わらない
JS ではなく CSS 側の問題です。開発者ツールで確認するまでもなく、style.css に body.dark { ... } を書いたか確認してください。body .dark(あいだに空白)と書くと別の意味になってしまい、効きません。空白なしの body.dark が正解です。
ページ全体が真っ白になった
<script> タグの書き方が崩れている可能性があります。<script src="script.js"></script> は、閉じタグまで必要です。<script src="script.js" /> という書き方はできません。
こうなっていればOK
うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。
この章はまだ完了していません。