プログラミングの基礎⑥：記述ルール／関数とメソッドの使い方

こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。

Web制作コースと事務・ライティングコースに所属しています。

関数は、よく使う処理をまとめて何度も再利用できる仕組みです。
料理のレシピに例えると、同じ手順を繰り返し使える便利な方法と考えられます。
これを理解すると、プログラムがより整理され、効率よく書けるようになります。

関数
アロー関数
引数
戻り値
コンソール値受け渡し
メソッド
まとめ

関数

概要

関数は、同じ処理を何度も書く代わりに「名前」を付けて呼び出せる仕組みです。

作り方：function 名前(引数) { /* 処理 */ }
呼び出し方：名前(値);

実例

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"><title>関数のデモ</title></head>
<body>
  <button id="btn">クリックしてみて</button>

  <script>
    // functionでshowMessage関数を定義。
    function showMessage() {
      console.log('ボタンが押されました！');
    }

    // ボタンクリック時にshowMessage関数を呼び出す。
    document.getElementById('btn').addEventListener('click', showMessage);
  </script>
</body>
</html>

✅ ポイント

function showMessage() { … } が「showMessage」という名前の関数です。

ボタンをクリックすると、イベントリスナーが showMessage() を呼び出します。

関数内で console.log しているので、開発者ツールにメッセージが表示されます。

アロー関数

概要

アロー関数は関数を短く書ける構文です。

作り方：() => { /* 処理 */ }
=> の前に引数、後ろに処理を書きます。

実例

// 通常の関数。
function add(a, b) {
  return a + b;
}

// アロー関数で同じことを書く。
const addArrow = (a, b) => a + b;

// それぞれ関数に引数を与え呼び出す(引数については後述します)。
console.log(add(2, 3));        // 5
console.log(addArrow(4, 1));   // 5

✅ ポイント

add は従来の関数宣言。

addArrow はアロー構文で書かれ、引数が (a, b)、戻り値が a + b です。

アロー関数は簡潔なので、小さな処理に向いています。

引数

概要

引数は関数に「情報」を渡すためのものです。

関数を呼び出すときに 値 を渡します。
関数内部でその値を使って処理します。

実例

//functionで、greet関数を定義し引数にnameを指定。 
function greet(name) {

  //関数の引数をnameとして、コンソールに出力。
  console.log(`こんにちは、${name}さん！`);
}

//作成したgreett関数に引数'太郎'を与えて実行する。
greet('太郎');   // こんにちは、太郎さん！

//作成したgreett関数に引数'花子'を与えて実行する。
greet('花子');   // こんにちは、花子さん！

✅ ポイント

greet は1つの引数 name を取ります。

呼び出し時に '太郎' や '花子' と渡すと、関数内でその値を使ってメッセージが作られます。

戻り値

概要

戻り値は関数が処理の結果として返すデータです。

return 値; を書くと、呼び出し側にその値が渡ります。

実例

//functionで、multiply関数を定義し引数にa,bを指定。
function multiply(a, b) {

  //return 値; に、a * bと記述することで戻り値は、a * bとなる。
  return a * b;
}

constで定数resultを定義し、multiply関数に引数を指定する。
const result = multiply(6, 7);

//multiply関数で、aに6、bに7の引数を与え、returnで、a * bとした結果をコンソール出力。
console.log(result);   // 42

✅ ポイント

multiply は2つの数を掛けて、その結果を return します。

呼び出し側はその戻り値を変数に受け取るか、直接使えます。

コンソール値受け渡し

概要

コンソール（開発者ツールの Console）はデバッグ時に「何が起きているか」を確認する場所です。

console.log(変数) を使うと、実行結果をブラウザ上で見ることができます。

実例

//functionで、sumArray関数を定義し引数にarrを指定。
function sumArray(arr) {

  // arr.reduce() で配列全体を走査し、acc(累積値)に cur(現在の要素)を加算していく。
  // 初期値は 0 としているので、空配列の場合は 0 が返る。
  const total = arr.reduce((acc, cur) => acc + cur, 0);

  // 合計値をコンソールに出力。
  console.log('配列の合計:', total);

  //計算した合計値を戻り値とする。
  return total;
}

//数値からなる配列 nums を作成。
const nums = [1, 2, 3, 4];

// sumArray(nums) を実行し、nums の合計を求める。
sumArray(nums);   // コンソールに "配列の合計: 10" が出力される。

✅ ポイント

reduce を使って配列の合計を計算。

console.log で結果を表示して、コードが正しく動いているか確認します。

メソッド

概要

メソッドは「オブジェクト」に付属する関数です。

オブジェクトのプロパティとして定義されます。
obj.メソッド名() の形で呼び出します。

実例

//constでpersonオブジェクトを宣言する。
const person = {
  name: '佐藤',
  age: 15,

  // greetメソッド(関数)
  greet() {

    //thisキーワードを使うことで、自身（ここではperson）のプロパティにアクセス。
    console.log(`やあ、${this.name}です。`);
  }
};

//personオブジェクトのgreetメソッド(関数)を使いコンソールに出力する。
person.greet();             // やあ、佐藤です。

✅ ポイント

person はオブジェクト。

greet() はそのオブジェクトに属するメソッドで、this キーワードを使って自分自身（ここでは person）のプロパティにアクセスします。

まとめ

ポイント	内容
関数	同じ処理を名前付きで呼び出せる。
アロー関数	簡潔に書ける関数構文。
引数	関数へデータを渡すための仕組み。
戻り値	処理結果を呼び出し側に返す。
コンソール	実行時に情報を確認するデバッグツール。
メソッド	オブジェクトに付属した関数で、`this` でオブジェクト内部にアクセス。

次回は「プログラミングの基礎⑦：記述ルール／クラスとオブジェクト指向の理解」について学習します。

▶次回

プログラミングの基礎⑦：記述ルール／クラスとオブジェクト指向の理解
こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。Web制作コースと事務・ライティングコースに所属しています。クラスは設計図、インスタンスは実際に作られたもの、と考えるとオブジェクト指向(データと振る舞いを一つにまとめて扱...
kanau-lab.co.jp
2025.11.23

◀前回

プログラミングの基礎⑤：記述ルール／配列とオブジェクトの基本
こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。Web制作コースと事務・ライティングコースに所属しています。複数のデータをまとめて扱うために、配列やオブジェクトの理解は欠かせません。この記事を読むと、データを整理して効率...
kanau-lab.co.jp
2025.11.23