Web

Web制作

hero

Web制作で学んで欲しいJavaScriptの基礎

 

JavaScriptとは？

クライアントサイド（ブラウザ上）で動作するスクリプト言語です。HTMLで作成されたページに動きを加えたり、ユーザーの入力に応じてリアルタイムに反応する機能を作成できます。

 

 

DOMとは

DOMは、ブラウザがHTMLやXMLを解析して生成するデータ構造のことです。「Document Object Model」の略で、組織図のようなツリー構造になっていますね。

 

JavaScriptを使ってこのDOMにアクセスしたり、操作することができます。

 

 

 

HTML内にJavaScriptを書く（インラインスクリプト）

HTMLの<script>タグ内に書くこともできます。

<script>
  console.log("こんにちは、JavaScript!");
</script>

特に理由がなければ、別ファイルに分けた方が管理しやすいです。

 

 

外部ファイルにJavaScriptを書く

index.jsのように、拡張子がjsのファイルに書きます。

HTMLで読み込むには、下記のように書きます。

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

 

 

letとconstで変数を宣言

letは、再代入可能なので、値を変更する場合に使います。

constは、再代入ができない定数を宣言します。

使い分けの基本方針として、できるだけconstを使い、再代入が必要な場合のみletを使うようにしましょう。

※varは使わないようにしましょう。

 

（例）再代入可能

const score = 100;
console.log(score); // 100

// 値を再代入
score = 150;
console.log(score); // 150

 

 

変数について

変数は、プログラム内でデータを一時的に保存・管理するために使用されます。変数を使う理由は、プログラムが効率的にデータを扱い、動的な動作を実現するためです。

変数やJavaScriptのデータは、ユーザーのブラウザ上のメモリ（RAM）に保存されます。これは、ウェブページが表示されている間だけ保持され、ページがリロードされたり閉じられると消えます。

 

（例）計算結果を保存して利用する

const a = 10;
const b = 20;
let sum = a + b; // 計算結果を変数sumに保存
console.log(sum); // 30（保存された結果を利用）

 

（例）値を簡単に操作できる

変数を使うことで、コード内で繰り返し使う値や、後で変更したい値を簡単に管理・操作できます。直接値を使う代わりに、変数に格納しておくと、コードが柔軟に対応できるようになります。

let price = 100;
let discount = 0.2;
let discountedPrice = price * (1 - discount); // 割引後の価格を計算
console.log(discountedPrice); // 80

 

（例）再利用できて便利！

const userName = "太郎";
console.log("こんにちは、" + userName + "さん！");
console.log("ようこそ、" + userName + "さん！");

 

 

プログラミングで = は代入

const userName = "太郎";

は、userNameという変数に、太郎を代入している。

 

 

デベロッパーツールでコンソールを使ってみよう！

デベローパーツールは、右クリックで「検証」か、キーボードのF12（もしくはfn + F12）で開けます。

タブにElements、Console、Sources、などがありますね。Consoleを開きましょう。

 

ここにJavaScriptを書いてみましょう。

alert("test")

パネルを出すコードを書いてみると、出ますね。

 

自分でJavaScriptでコードを書いていくときには、console.log(出力したい内容)のように、変数の中身を出力しながら開発を進めていきます。

 

 

値の取得

「値の取得」とは、HTMLドキュメント内の要素やその値を取得して操作することを指します。これを行うために、主にDOMを操作します。

 

querySelector

document.querySelector: 指定したセレクタに一致する最初の要素を取得します。
 

（例）テキストフィールドの値を取得して表示

const inputField = document.querySelector('.myInput');
const button = document.querySelector('button');

button.addEventListener('click', function() {
    const inputValue = inputField.value;
    alert('入力された値: ' + inputValue);
});

ここでは、#myInputというIDを持つ入力フィールドの値を取得し、その値をアラートで表示しています。ユーザーがボタンをクリックすることが「きっかけ」となり、入力された値を取得しています。
※「きっかけ」については後から説明します。

 

querySelectorAll()

CSSセレクタに一致するすべての要素を取得します。
querySelectorが最初に見つかった要素のみを返すのに対し、querySelectorAllは一致するすべての要素を静的NodeListとして返します。これにより、配列のように複数の要素に対して操作を行えます。

const elements = document.querySelectorAll('.myClass');

 

getElementById()

IDで要素を取得する際に使用。
IDはページ内で一意であるため、IDで要素を取得する場合にはgetElementByIdが最適です。querySelectorと異なり、最初からID用に最適化されているため、少し高速に動作します。

const element = document.getElementById('myId');

 

getElementsByClassName()

特定のクラス名を持つすべての要素を取得します。
クラス名で複数の要素を取得する場合に便利で、取得された要素はライブHTMLコレクションとして返されます。これは、DOMが変わるたびに自動的に更新される特性を持っています。

const elements = document.getElementsByClassName('myClass');

 

 

きっかけ（イベントハンドリング）

「きっかけ」とは、ユーザーの操作（イベント）に対して反応するためのコードです。たとえば、ボタンがクリックされた時や、入力フィールドが変更された時に処理を実行する方法です。

 

addEventListener

addEventListenerは、特定の要素にイベントを設定し、そのイベントが発生した時に指定した処理を実行する関数です。

 

よく使うイベントとして、

・click: 要素がクリックされた時に発生します。
・input: フォーム要素に入力された内容が変わった時に発生します。
・submit: フォームが送信された時に発生します。
・mouseover: マウスが要素に乗った時。
・scroll: ページがスクロールされた時。

 

があります。

 

イベントの基本的な書き方は、

何が.addEventListener(どうなったら, どうなる)

という書き方をします。

 

（例）ボタンのクリックイベント

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

button.addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

この例では、ページ内のbutton要素がクリックされたときにアラートを表示します。
addEventListenerでイベントを監視し、イベントが発生したときにコールバック関数（アラートを表示する処理）が実行されます。
つまり、ボタンが　クリックされたら　アラートを表示する
となっていますね。

 

 

JavaScriptの基礎を学ぶのにおすすめの書籍

 

1冊ですべて身につくJavaScript入門講座

🔗Amazonリンク

 

 

要素をフェイドイン

下から画像要素がフワッと出てくる動きを実装してみましょう。

index.html

<div class="about__item">
  <img class="about__balloon1 fade-up" src="/img/about-image01.png" alt="">
  <img class="about__balloon2 fade-up" src="/img/about-image02.png" alt="">
  <img class="about__balloon3 fade-up" src="/img/about-image03.png" alt="">
  <img class="about__balloon4 fade-up" src="/img/about-image04.png" alt="">
</div>

 

style.scss

.about__item img {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 各画像に遅延を設定 */
.fade-up.about__balloon1 {
  transition-delay: 0.2s; /* 最初の画像は0.2秒遅延 */
}

.fade-up.about__balloon2 {
  transition-delay: 0.6s; /* 次の画像は0.6秒遅延 */
}

.fade-up.about__balloon3 {
  transition-delay: 0.6s; /* 次の画像は0.6秒遅延 */
}

.fade-up.about__balloon4 {
  transition-delay: 1s; /* 最後の画像は1秒遅延 */
}

 

index.js

// DOMが完全に読み込まれたときに実行
document.addEventListener("DOMContentLoaded", function() {
  // フェードインさせたい要素（classにfade-inがついているもの）を全て取得
  const fadeElements = document.querySelectorAll('.fade-up');

  // IntersectionObserverである要素がビューポートに入ったり出たりするタイミングを監視
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 要素がビューポートに入ったときに "is-visible" クラスを追加
        entry.target.classList.add('is-visible');
        // 一度アニメーションしたら監視を停止
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.5 }); // 50%見えたら発火

  // 各要素に対してIntersectionObserverを適用
  fadeElements.forEach(element => {
    observer.observe(element);
  });
});

 

🔗デモページ

 

IntersectionObserverは、ある要素がビューポートに入ったり出たりするタイミングを監視できるAPIです。
JavaScriptの中でスクロールイベントを監視して要素の表示を検知する従来の方法に比べて、効率的でパフォーマンスに優れています。
スクロールの度に計算するのではなく、ブラウザが最適なタイミングで要素の可視状態を通知してくれる仕組みです。