第7回: JavaScript / jQuery 基礎：動きの仕組み

この回の目標

JavaScriptがプログラミング言語だと理解できる
全部書けなくても「何をやっているか」が理解できる
よく使う動きを自分で組み立てられる

JavaScriptとは
JavaScriptの使い方
JavaScriptでできること
JavaScriptの基本
JavaScriptが動く仕組み
JavaScriptのよくあるパターン
jQueryについて
エラーとの付き合い方
ミニ課題
まとめ

JavaScriptとは

webサイトに動きや処理を加えることができるプログラミング言語のこと

HTML/CSSとの役割の違い

HTML：構造
CSS：見た目
JavaScript：動き・反応

JavaScriptを使うと、Webページに「動き」をつけることができる

JavaScriptが使われている例

クリックで表示／非表示

ここが表示されます！

メニューの開閉

スクロールで表示

Scroll

スクロールで表示①

スクロールで表示②

スクロールで表示③

JavaScriptの使い方

① JSファイルの作成

js/script.jsを作成する

② HTML内でJSファイルを読み込む

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

基本は<body>の一番下（閉じタグの直前）に書く

JavaScriptでできること

CSSではできない「記憶（変数）」と「判断（条件分岐）」ができる

CSS

見た目を整える「デコレーション」の役割

動き

例：ボタンにマウスが乗ったら、見た目を変える（hover）

マウスを外すと元に戻ってしまい、一時的に見た目を変えるだけ
状態を覚えられない・変化を維持できない

JavaScript

その時の状態を「記憶」し、「判断」して動く役割

動き

例：ボタンをクリックでメニューを開く／閉じる

入力：クリックされた
状態：開いている or 閉じている
判断：開いてたら → 閉じる
　　　閉じてたら → 開く

開く／閉じるの状態を「覚えている」
状態によってどのアクションを起こすか「判断」できる

JavaScriptの基本

変数

変数とは値を入れて使い回せる箱のこと

「開いている」 or 「閉じている」などの状態を記憶することができる

let isOpen = false;

let 変数名 = 初期値;の形で定義する

let: 値を何度も変えることのできる変数定義
const: 最初に決めた値から変更することのできない変数定義

例：
isOpen = false;　・・・　閉じている
isOpen = true;　・・・　開いている

条件によって動きを変える（if文）

ifを使うと条件を「分岐」でき、状態によって処理を変えることができる

if (isOpen) {
  // 開いている時
} else {
  // 閉じている時
}

if ()の中に条件を書く
if (isOpen)は、省略せずに書くと if (isOpen === true) という意味
else は「それ以外すべて」となる

同じ処理を繰り返す（for）

forを使うと処理を「繰り返し」でき、同じ処理を指定した回数分「繰り返し」できる

for (let i = 0; i < 3; i++) {
  console.log(i);
}

カッコの中にある ;（セミコロン）で区切られた3つのエリアには、それぞれ下記の意味がある

let i = 0 【スタート地点】
「今、何周目？」を数えるための変数 i を作って、最初は 0 から始めるという宣言
（プログラミングの世界では、数は 0 から数え始めるのが基本）
i < 3 【ゴール条件】
「いつまで走るか」を決めるルールで、「i が 3 より小さい間は、ずっと繰り返す」という意味になる
i++【1周終わるごとの処理】
「1周終わったら、i を1つ増やす」という意味（i = i + 1 と同じ）

動きのイメージ

【1周目】 i = 0 : 「0 < 3」はOKなので 0 を表示 → そのあと i = 1 になる
【2周目】 i = 1 : 「1 < 3」はOKなので 1 を表示 → そのあと i = 2 になる
【3周目】 i = 2 : 「2 < 3」はOKなので 2 を表示 → そのあと i = 3 になる
【終了】 i = 3 : 「3 < 3」はNGなのでここで繰り返し終了

JavaScriptが動く仕組み

JavaScriptを使ってHTMLに動きをつけていくために、DOMという仕組みが利用されている

DOM（Document Object Model）

JavaScriptが操作しやすいように、HTMLを「ツリー状の構造（木のような形）」に変換する仕組み
特別なツールや環境を用意する必要はなし

DOMは、HTMLのタグ一つひとつを、JavaScriptから触れる「オブジェクト（部品）」に変えてくれる

DOM操作でできること

要素の取得
スタイルの変更（文字色変更など）
クラスの付与

などが可能

要素の取得

const btn = document.querySelector('.btn');

.btnのHTMLを取得して、btn変数に入れる

スタイルの変更（直接色を変える）

// 文字の色を赤色に変える
btn.style.color = 'red';

// フォントサイズを大きくする
btn.style.fontSize = '24px';

style.プロパティ名 で、CSSを直接書き換えることができる

クラスの付与（CSSで用意したスタイルを適用する）

// 「active」というクラスを追加する
btn.classList.add('active');

// もしあれば消す、なければつける（切り替え）
btn.classList.toggle('active');

あらかじめCSSで.activeのようなクラスを作っておいて、それを付け外しする

イベント

JavaScriptを動かすためには、何かの「きっかけ」が必要

「きっかけ」 = イベント（例：クリック、スクロール）

btn.addEventListener("click", function() {
  // 処理
});

window.addEventListener("scroll", function() {
  // 処理
});

.addEventListener('click', ...)は、「クリックされたら」というイベントになる
.addEventListener('scroll', ...)は、「スクロールされたら」というイベントになる

書いてみよう

ボタンをクリックしたら、「クリックされた！」というアラートを表示するJavaScriptを書いてみよう

前準備

.buttonというクラスを付与したボタンをHTMLで作ろう
.buttonクラスにCSSでデザインをつけよう

JavaScriptのコード

const button = document.querySelector(".button");

button.addEventListener("click", function() {
  alert("クリックされた！");
});

JavaScriptのよくあるパターン

クリックでクラスを付け替える

// ボタン取得
const button = document.querySelector(".button");

// クリックイベント
button.addEventListener("click", function() {
  button.classList.toggle("active");
});

.buttonを取得して、button（変数）に入れる
buttonをクリックすると、クリックするたびbuttonに.activeが付け外しされる

スクロールでクラスを付与する

const header = document.querySelector('header');

window.addEventListener('scroll', function() {
  
  const scrollValue = window.scrollY;   // 今どれくらいスクロールしたかを取得

  // 「100px以上」スクロールしたか判断する
  if (scrollValue > 100) {
    header.classList.add('is-active');    // 100を超えたらクラス追加
  } else {
    header.classList.remove('is-active'); // 100未満ならクラス削除
  }
});

header要素を取得して、header（変数）に入れる
画面スクロールをすると、window.scrollYで現在のスクロール値を取得してscrollValue（変数）に入れる
if (scrollValue > 100)で100px以上スクロールしたかを判断し、処理を分岐させる
scrollValueが100を超えた場合、headerに.is-activeを付与する

ポイント

JSの役割: クラスをつける / 外す
CSSの役割: 見た目を変える

JSとCSSの役割を完全に分けることで、不具合の発見や修正がしやすくなり、コード管理が楽になる

jQueryについて

jQueryとは？

JavaScriptを簡単に書くためのライブラリのこと

JavaScriptとの書き方の違い

// JS
document.querySelector(".btn");

// jQuery
$(".btn");

メリット

とにかく短く書ける
ブラウザによってJSの動きがバラバラな場合もあったが、jQueryがその差を吸収してくれていた

デメリット

webフォントなどのようにデータをダウンロードしてくる必要があるので、サイトが少し重くなる
jQueryで書けるようになっても、素のJavaScriptの基礎が身につかないことがある

ただし、現在はJSが進化して簡単に書けるようになってきていたり、「余計なライブラリ（jQuery）は入れない」という現場もあったりする

まずは基礎となるJavaScriptをしっかり学ぶと、応用につなげやすい

エラーとの付き合い方

書いたコードがうまく動かないときは、検証ツールのコンソールを確認してみる

コンソールの確認方法

右クリック → 検証 → Console

赤い文字が出ていたら、それがエラーのメッセージ

よくある原因

スペルミス
HTMLが存在しない
読み込み順の問題

エラー解消のコツ

エラーメッセージの意味がわからなかったら、そのメッセージをそのままコピーしてGoogleで検索してみよう

ミニ課題

クリックで開閉する要素を作ってみよう

ここが表示されます！

コード

<button class="btn js-007kadaiBtn">開く / 閉じる</button>

<div class="box js-007kadaiBox">
  <p>ここが表示されます！</p>
</div>

クラス名をデザイン用 (btn)とJS用 (js-007kadaiBtn)で分けておくことで、デザインだけを修正したい場合にクラス名を変更してしまっても、jsの動きは止まることはない

.btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2em;
  padding: 0.5em 1.5em;
  border: 2px solid #e67e22;
  border-radius: 5px;
  background-color: #e67e22;
  color: #fff;
  line-height: 2;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: .2s;

  &:hover {
    background-color: #fff;
    color: #e67e22;
  }
}

/* ボックス（初期は非表示） */
.box {
  display: none;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;

  &.open {
    display: block;
  }
}

.boxは初期状態ではdisplay: none;で非表示にして、.openが付いたらdisplay: block;を指定することで表示することができる

const btn = document.querySelector(".js-007kadaiBtn");
const box = document.querySelector(".js-007kadaiBox");

btn.addEventListener("click", function() {
  box.classList.toggle("open");
});

JS用につけたクラス名（.js-007kadaiBtn.js-007kadaiBox）を使用する

まとめ

今回のまとめ

JavaScriptは動きを作る言語
条件によって処理を変えられる
クラス切り替えが基本のパターン
CSSと役割を切り分けたり、JS専用のクラス名をつけると管理がしやすくなる

次回の予定

webサイトでよく使われるパーツ「コンポーネント」について学びます