【JAVASCRIPT】JavaScriptの関数についての基本的な概念と使用方法

タグ :

JAVASCRIPT

PROGRAMMING

1 関数の定義
2 関数の呼び出し
3 引数と戻り値
4 関数のデフォルト引数
5 即時実行関数 (Immediately Invoked Function Expression, IIFE)
6 関数のスコープとクロージャ
7 サンプル1: 要素の取得と内容の変更
8 サンプル2: 要素の作成と追加
9 サンプル3: 要素のスタイルを変更
10 サンプル4: イベントリスナーの追加

関数の定義

JavaScriptでは、関数を定義する方法はいくつかあります。代表的な方法は以下の通りです。

1. 関数宣言 (Function Declaration)

関数宣言は、functionキーワードを使用して関数を定義します。関数宣言は、関数を定義するスクリプトが実行される前に関数をホイスティングします。



function greet(name) {
  return `Hello, ${name}!`;
}

2. 関数式 (Function Expression)

関数式は、関数を変数に割り当てる方法です。関数式は、その定義が評価される時点で初めて関数を作成します。



const greet = function(name) {
  return `Hello, ${name}!`;
};

3. アロー関数 (Arrow Function)

アロー関数は、ES6（ECMAScript 2015）で導入された短縮構文です。アロー関数は、特にコールバック関数や無名関数に便利です。



const greet = (name) => {
  return `Hello, ${name}!`;
};

関数の呼び出し

関数を呼び出すには、その関数名の後に括弧を付けて呼び出します。必要に応じて、括弧内に引数を渡します。



console.log(greet('Alice')); // "Hello, Alice!"

引数と戻り値

関数は、引数を受け取り、結果を呼び出し元に返すことができます。



function add(a, b) {
  return a + b;
}

console.log(add(3, 5)); // 8

関数のデフォルト引数

デフォルト引数を使用すると、関数が呼び出される際に引数が渡されなかった場合に、デフォルトの値を使用できます。



function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet()); // "Hello, Guest!"
console.log(greet('Alice')); // "Hello, Alice!"

即時実行関数 (Immediately Invoked Function Expression, IIFE)

IIFEは、定義と同時に実行される関数です。スコープを分離するために使用されます。



(function() {
  console.log('This is an IIFE');
})();

関数のスコープとクロージャ

関数のスコープは、その関数内で定義された変数が関数外からアクセスできないことを意味します。クロージャは、関数が定義されたスコープを覚えている関数のことです。



function outerFunction() {
  let outerVar = 'I am outside!';
  
  function innerFunction() {
    console.log(outerVar); // "I am outside!"
  }
  
  return innerFunction;
}

const myInnerFunction = outerFunction();
myInnerFunction(); // "I am outside!"

サンプル1: 要素の取得と内容の変更

特定のHTML要素を取得し、その内容を変更する関数です。



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOM操作サンプル</title>
</head>
<body>
  <div id="myDiv">元のテキスト</div>
  <button onclick="changeContent()">テキストを変更</button>

  <script>
    function changeContent() {
      // 要素を取得
      const myDiv = document.getElementById('myDiv');
      // 要素の内容を変更
      myDiv.textContent = '新しいテキスト';
    }
  </script>
</body>
</html>

サンプル2: 要素の作成と追加

新しいHTML要素を作成し、既存の要素に追加する関数です。



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOM操作サンプル</title>
</head>
<body>
  <ul id="myList">
    <li>項目1</li>
    <li>項目2</li>
  </ul>
  <button onclick="addItem()">項目を追加</button>

  <script>
    function addItem() {
      // 新しいリスト項目を作成
      const newItem = document.createElement('li');
      newItem.textContent = '新しい項目';
      // 既存のリストに新しい項目を追加
      const myList = document.getElementById('myList');
      myList.appendChild(newItem);
    }
  </script>
</body>
</html>

サンプル3: 要素のスタイルを変更

特定のHTML要素のスタイルを変更する関数です。



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOM操作サンプル</title>
  <style>
    #myDiv {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
  <button onclick="changeStyle()">スタイルを変更</button>

  <script>
    function changeStyle() {
      // 要素を取得
      const myDiv = document.getElementById('myDiv');
      // 要素のスタイルを変更
      myDiv.style.backgroundColor = 'red';
      myDiv.style.width = '200px';
      myDiv.style.height = '200px';
    }
  </script>
</body>
</html>

サンプル4: イベントリスナーの追加

ボタンがクリックされたときに特定の関数を実行するようにイベントリスナーを追加するサンプルです。



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOM操作サンプル</title>
</head>
<body>
  <button id="myButton">クリックしてください</button>

  <script>
    // 関数を定義
    function showAlert() {
      alert('ボタンがクリックされました');
    }

    // イベントリスナーを追加
    const myButton = document.getElementById('myButton');
    myButton.addEventListener('click', showAlert);
  </script>
</body>
</html>

前ページに戻る