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

この回の目標

  • JavaScriptがプログラミング言語だと理解できる
  • 書けなくても「何をやっているか」が理解できる
  • よく使う動きを自分で組み立てられる
目次
  1. 見出し1
  2. 見出し2
    1. 見出し2-1
    2. 見出し2-2

JavaScriptとは

JavaScriptとは何か？

Webサイトやシステムの開発に使われているプログラミング言語

HTML/CSSとの役割の違い

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

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

JavaScriptが使われている例

クリックで表示／非表示

ここが表示されます！

メニューの開閉

スクロールで表示

Scroll
スクロールで表示①
スクロールで表示②
スクロールで表示③

JavaScriptの使い方

JSファイルの作成

js/script.jsを作成する

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


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

👉 基本は bodyの一番下

JavaScriptでできること

CSSだけではできなかった動きをつけることができる

CSS

例：ボタンにマウスを乗せると色が変わる

入力：マウスが乗った
出力：見た目を変える
👉 hover

ただし…
👉 マウスを外すと元に戻る

👉 一時的に見た目を変えるだけ
📌 状態を覚えられない
📌 変化を維持できない

JavaScript

例：クリックで開く／閉じる

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

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

JavaScriptの基本

変数


let isOpen = false;

値を入れて使い回せる箱（例：開いている or 閉じている）

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

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


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

状態によって処理を変えられる

ifを使うと条件を「分岐」できる

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

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

同じ処理を何回もやる仕組み。

forを使うと処理を「繰り返し」できる

JavaScriptが動く仕組み

DOM（Document Object Model）

HTML文書をJavaScriptから操作可能な形式に変換する仕組み

特別なツールや環境を用意する必要はなし

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

などが可能

DOM操作の例

document.querySelector(".box");

👉 .boxのHTMLを取得している

イベント

JavaScriptはきっかけがないと動かない
👉 何かの「きっかけ」が必要

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

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

👉 「クリックされたら動く」

実演

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

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

JavaScriptの基本パターン

クラスを付け替える


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

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

👉 JSの役割
クラスをつける / 外す

👉 CSSの役割
見た目を変える

スクロール時の処理

window.addEventListener("scroll", function() {

  const scroll = window.scrollY;              // 今のスクロール位置
  const windowHeight = window.innerHeight;    // 画面の高さ
  const boxes = document.querySelectorAll(".fade-in");

  boxes.forEach(function(box) {

    const boxTop = box.offsetTop; // 要素の位置

    if (scroll + windowHeight > boxTop) {
      box.classList.add("active");
    }

  });

});

① スクロールされたら処理が動く
👉 scrollイベント

② 要素の位置を取得
👉 offsetTop

③ 画面に入ったか判定
スクロール位置 + 画面の高さ > 要素の位置

④ 入ったらクラスを付ける
👉 .active を追加 

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.5s;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

jQuery

jQueryとは？

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

JavaScriptとの書き方の違い


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

// jQuery
$(".btn");

現在はJSでも十分書ける。

⑨ エラーとの付き合い方

コンソールを見る

右クリック → 検証 → Console

よくある原因

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

⑩ ミニ課題

クリックで開閉する要素を作ろう。 


const btn = document.querySelector(".btn");
const box = document.querySelector(".box");

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

CSSと連携させて動きを作る。

JSは全部書けなくてもいい。 「何をしているか」が分かれば使える。

この回のまとめ

  • JavaScriptは動きを作る言語
  • 条件によって処理を変えられる
  • クラス切り替えが基本パターン