2025/04/15

コーディングの話

JavaScript勉強日記📔#04

こんにちは🌞

前回の更新に引き続いて、JavaScript勉強日記#04をお届けします。

前回は勉強方法と理解度の変化についてお話をしました。

そちらもぜひあわせてご覧ください！👀👉JavaScript勉強日記03

今回は、私が実装でよく使っているJavaScriptのコードをご紹介します。

基本的な書き方を押さえるだけでも、ぐっと理解度が上がり、

実装できるアニメーションも増えるので、

ぜひ最後までお付き合いください🙇🏻‍♀️🫶🏻

arrow関数

まずは、このあとたくさん登場する「arrow関数（アロー関数）」について。

arrow関数は、以下のようなシンプルな書き方をする関数です👇

(引数) => {
  処理
}

JavaScript

途中に出てくる => が矢印のように見えることから、英語で「矢印」を意味する「arrow（アロー）」が関数の名前になっています。

通常の function を使う書き方と同じ機能を持っていますが、書き方がよりコンパクトになります。

※arrow関数とfunctionの書き方は見た目以外にも「this」の扱いなどで違いがありますが、今回は書き方に慣れることが目的なので、細かい違いは気にせずOKです！

arrow関数をfunction を使って書くと次のようになります。

ちなみに、function を使った書き方はこんな感じ👇

function(引数) {
  処理
}

JavaScript

こちらは「無名関数」と呼ばれ、主に変数に代入して使うことが多いです。

これから紹介するコードでは、arrow関数と無名関数の両方を載せているので、「こんな感じなんだ〜🧐」と気軽に読んでみてください!!

書き始めの基本形（DOMContentLoaded）

JavaScriptはHTMLの読み込みが終わる前に実行されることがあります。

そのため、HTMLが完全に読み込まれてから処理を実行したいときには、この書き方を使います👇

基本の書き方

//arrow関数を使う場合
document.addEventListener('DOMContentLoaded', () => {
  // ここに処理を書く
});

//無名関数を使う場合
document.addEventListener('DOMContentLoaded', function() {
  // ここに処理を書く
});

JavaScript

こんなふうに使う！

たとえば、ボタンをクリックしてクラスを追加したいとき👇

document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    button.classList.add('open');
  });
});

JavaScript

要素の取得

HTMLの中にある特定のタグやクラス・IDの要素をJavaScriptで使いたいときに使います。

クラス名は.（ドット）
ID名は#（シャープ）

を指定するのがポイントです。

基本の書き方

document.querySelector() は1つの要素だけを取得しますが、

document.querySelectorAll() は条件に合うすべての要素をまとめて取得します。

const element = document.querySelector('.クラス名'); // クラス名の場合
const element = document.querySelector('#ID名');   // ID名の場合

//同じクラス名を持つ複数の要素を全て取得したい時
const element = document.querySelectorAll('.クラス名');

JavaScript

こんなふうに使う！

querySelectorを使って、クラス名.blog-itemの要素と、ID#sec-companyの要素を取得しています。

同じクラス名・ID名を持つ要素が複数ある時にquerySelectorを使うと、

最初に一致する要素を1つ返します。

const blogItem = document.querySelector('.blog-item'); // クラス名の場合
const sectionCompany = document.querySelector('#sec-company');   // ID名の場合

JavaScript

クラス名の追加 / 削除

HTML上の要素に対してクラス名を追加したり、削除したりする時に使います。

基本の使い方

※ クラス名の前に .（ドット）は不要です⚠️

//クラス名〇〇を追加
document.querySelector('要素').classList.add('〇〇');
//クラス名〇〇を外す
document.querySelector('要素').classList.remove('〇〇');

JavaScript

こんなふうに使う！

classList.add()でbigクラスを追加し、classList.remove()でそのクラスを削除しています。

これにより、要素のスタイルを動的に変更できます。

const element = document.querySelector('.blog-item');
//クラス名bigを追加
listItem.classList.add('big');
//クラス名bigを外す
listItem.classList.remove('big');

JavaScript

CSSを変更する

style プロパティを使えば、JavaScriptから直接CSSを変更できます。

インラインスタイルとして適用されるイメージです。

基本の書き方

// 特定の要素のCSSプロパティを変更
document.querySelector('要素').style.プロパティ = '値';

JavaScript

こんなふうに使う！

style.backgroundを使って、ボタンの背景色を動的に変更しています。

styleプロパティを使うと、インラインスタイルを直接変更できます。

const element = documet.querySelector('button')
element.style.background = 'pink';

JavaScript

イベントの設定

「クリック」「スクロール」「マウスが乗ったとき」など、ユーザーの操作をきっかけにアニメーションを実装したい時に使います。

第1引数にイベント名（例：click）、第2引数に実行したい処理（関数）を書きます。

基本の書き方

addEventListener('イベント名', 関数) 

//arrow関数を使う場合
button.addEventListener('イベント名', () => {
  //ここに処理をを書く
});

//無名関数を使う場合
button.addEventListener('イベント名', function() {
  //ここに処理をを書く
});

JavaScript

こんなふうに使う！

navButtonをクリックした時にheaderNavにshowというクラス名をつけています。

//クリックイベント
const navButton = document.querySelector('.drawer-btn');
const headerNav = document.querySelector('.header-nav');
navButton.addEventListener('click', () => {
    headerNav.classList.add('show');
});

JavaScript

関数を定義する

関数（function）は、「ひとまとまりの処理」を名前をつけて保存しておくようなものです。

同じ処理を複数回使いたいときや、処理を整理して見やすくしたいときに役立ちます。

関数を書くだけではアニメーションが動かないので、呼び出しが必要です。

あとから『関数名();』 と書くだけでどこでも呼び出せるので便利です！

基本の書き方

//関数の定義
function 関数名() {
  //ここに処理を書く
}

//関数の呼び出し
関数名();

JavaScript

こんなふうに使う！

「elementにanimateというクラス名を追加する」という処理を関数setAnimationにまとめて、

buttonがクリックしたら関数setAnimationを呼び出すという実装をする場合の書き方です。

//関数setAnimationの定義
function setAnimation() {
  const element = document.querySelector('.box');
  element.classList.add('animate');  // 'animate'クラスを追加してアニメーションを開始
}

// ボタンがクリックされたら、関数setAnimationを呼び出す
const button = document.querySelector('button');
button.addEventListener('click', () => {
  setAnimation();  // 関数を呼び出す
});

JavaScript

条件分岐（if, else if, else）

「〜のときはこうする、それ以外はこうする」 という分岐処理をしたいときに使います。

私は「特定もクラス名が含まれているか」を判定してアニメーションを実装する時によく使っています。

基本の書き方

if (条件) {
  // 条件がtrueのときの処理
} else {
  // 条件がfalseのときの処理
}

JavaScript

こんなふうに使う！

elementにshowというクラス名が含まれているかを確認し、

含まれていればshowを削除、含まれていなければshowを追加します。

if (element.classList.contains('show')) {
  element.classList.remove('show');
} else {
  element.classList.add('show');
}

JavaScript

forEach（繰り返し）

forEach() は、配列や複数の要素を1つずつ取り出して処理するための便利なメソッドです。

配列：複数のデータを1つのまとまりとして扱いたいときに「配列」という形を使います。

HTML上のボタンなど、「同じクラス名の複数の要素」にイベントをつけたいときにもよく使います。

forEachは「配列（または配列のようなもの）」に対して使うメソッドなので、

HTMLの複数の要素を扱うときは document.querySelectorAll() をセットで使うことがとても多いです。

基本の使い方

配列.forEach(コールバック関数);

//arrow関数を使う場合
elements.forEach((element) => {
   //ここに処理を書く
});

//無名関数を使う場合
elements.forEach(function(element) {
  //ここに処理を書く
});

JavaScript

こんなふうに使う！

querySelectorAllで .nav-item 要素をすべて取得し、forEachでそれぞれにクリックイベントリスナーを追加。

クリック時に、そのアイテムの文字色を赤に変更します。

const navItems = document.querySelectorAll('.nav-item')
navItems.forEach((navItem) => {
  navItem.addEventListener('click', () => {
      navItem.style.color = 'red';
  });
});