✅ functionとは

JavaScriptで関数を定義する最も基本的な方法です。

以下のように書きます:

function 関数名() {
  return "some value";
}

例:

function sayHello() {
  return "Hello!";
}

console.log(sayHello());
// Hello!

このように、functionキーワードで関数を宣言し、その関数名で呼び出すスタイルです。

アロー関数に比べて少し長いですが、関数を宣言した位置よりも前で呼び出しても動作するのが特徴です。

✅ function記法のコツ

• 最近はアロー関数が主流になりつつありますが、function の書き方も覚えておくと便利です。

✅ 練習

コピペではなく実際に打ち込んで練習してみましょう。

1行の function（引数なし）

function returnValue() {
  return "return value";
}
console.log(returnValue());
// return value

function getNumber() {
  return 123;
}
console.log(getNumber());
// 123

function isAvailable() {
  return true;
}
console.log(isAvailable());
// true

function getUser() {
  return { name: "John" };
}
console.log(getUser());
// { name: "John" }

1行の function（引数あり）

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice"));
// Hello, Alice!

function square(x) {
  return x * x;
}
console.log(square(4));
// 16

function isEven(num) {
  return num % 2 === 0;
}
console.log(isEven(5));
// false

function toUpperCase(str) {
  return str.toUpperCase();
}
console.log(toUpperCase("hello"));
// HELLO

複数行 function（引数なし）

function sayHello() {
  const greeting = "Hello!";
  console.log(greeting);
}

sayHello();
// Hello!

function getDateInfo() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  return `${year}-${month}-${day}`;
}

console.log(getDateInfo());
// 2025-4-5（※実行日によって変わります）

function logNumbers() {
  for (let i = 1; i <= 3; i++) {
    console.log(i);
  }
}

logNumbers();
// 1
// 2
// 3

複数行 function（引数あり）

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

greet("Taro");
// Hello, Taro!

function multiply(a, b) {
  const result = a * b;
  console.log(`Result is ${result}`);
  return result;
}

multiply(3, 5);
// Result is 15

function getUserInfo(user) {
  const { name, age } = user;
  return `Name: ${name}, Age: ${age}`;
}

console.log(getUserInfo({ name: "Hanako", age: 25 }));
// Name: Hanako, Age: 25

function sumArray(arr) {
  let sum = 0;
  for (let num of arr) {
    sum += num;
  }
  return sum;
}

console.log(sumArray([1, 2, 3, 4]));
// 10

✅ 練習のコツ

まずはページの例をそのまま写して動かしながら、「関数ってこういうものか」と感覚をつかみましょう。

慣れてきたら、以下のようなテーマで自分なりに関数を作ってみると実力がつきます。

• 引数を使って計算する関数（例：合計、平均など）
• 文字列を加工する関数（例：文字列を逆にするなど）
• 配列を受け取って処理する関数（例：合計、最大値、フィルタリング）

✅ まとめ

• function は JavaScript の基本的な関数定義方法
• 後からでも呼び出せる（巻き上げ：Hoisting）のが特徴
• 自分でもいくつか function を使って関数を定義・実行してみましょう