JavaScript function文の使い方

  • JavaScript
  • 関数
最終更新日:

この記事のポイント

  • コードの再利用を実現するfunction文の基礎知識
  • さまざまな関数定義パターンと使い方
  • 実用的なコード例を通じた理解の促進

目次

JavaScriptのfunction文とは？

JavaScriptのfunction文は、一連の処理をひとまとめにしてパッケージ化するために使う構文です。

function文で宣言した関数を使うことで、同じコードを何度も書く代わりに、一度定義したコードを必要なときに呼び出して再利用できます。この仕組みをうまく活用すると、コード重複が回避できることに加えて、管理しやすいプログラム作成が実現するでしょう

function文で宣言した関数は、特定のタスクを実行するための「命令セット」と考えることができます。たとえば「挨拶を表示する」「数値を計算する」といった処理を関数として定義することで、必要なときに何度でも呼び出して実行できます。

function文で宣言した関数を使うメリットは、コードの再利用性だけではありません。

プログラムを論理的な機能単位に分割することで可読性が向上し、メンテナンスが容易になります。また、大きな問題を小さな部分に分解して解決する「分割統治」のアプローチを実現できるため、複雑なプログラムの開発においても重要な役割を果たすテクニックでしょう。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

JavaScriptでfunction文を使った関数定義の基本構文は、functionキーワードのあとに関数名、括弧内に引数を並べていき、そして最後に波括弧{}内で実行するコードを記述します。関数は、定義しただけでは実行されません。呼び出すことで初めて処理が実行される仕組みです。

// 基本的な関数の定義 function 関数名(引数1, 引数2, ...) { // 関数内で実行される処理 return 戻り値; // 省略可能 } // 関数の呼び出し 関数名(値1, 値2, ...); // 具体例 function greet() { console.log("こんにちは"); } greet(); // 関数を呼び出す

関数には、引数（パラメータ）を設定して外部からデータを受け取れる特徴があります。また、return文を使って関数の実行結果を呼び出し元に返すことも可能です。引数や戻り値は必要に応じて使います。

function addNumbers(a, b) { return a + b; } var result = addNumbers(5, 3); // 関数を呼び出し、結果を変数に格納 console.log(result); // 8

JavaScriptには、関数式やアロー関数といった複数の関数定義方法があります。基本的な動作原理は、どの方法でも同じです。目的や状況に応じて適切な方法を選択することが重要でしょう。

実用例

このセクションでは具体的なコード例を通して、function文の使い方を見ていきましょう。各例はプログラミング初心者にもわかりやすいように、簡潔に記述しています。また、実用的なシナリオを想定したものばかりです。

関数の使いこなしは、コードの整理整頓や、メンテナンス性・再利用性の向上にも欠かせません。また、小さな関数に分割することで、各部分のテストや修正も容易となるでしょう。関数は、ウェブサイトやアプリケーションの開発において、基本的な構成要素です。

プログラミング初心者の皆さんは、これから紹介するコード例をぜひとも自分の開発環境に実装してみてください。

多くのコードに触れるなかで、想定外の動作やエラーに直面する経験は、プログラミング能力自体の向上に不可欠なものとなります。失敗を恐れず、たくさんのコードを使っていきましょう。

シンプルな関数定義

以下のコード例は、最も基本的な関数の定義と呼び出し方を示したものです。具体的には、処理内容をひとまとめにしたうえで、必要なときに呼び出せるようにしています。このテクニックを使うと、同じコードを複数の場所に書く必要がなくなることで、プログラムの効率性と可読性が向上するでしょう。

function showAnimal() { console.log("キリンは首が長い動物です"); } showAnimal(); // 関数の呼び出し showAnimal(); // 同じ関数を何度でも呼び出せる







実行結果：
キリンは首が長い動物です
キリンは首が長い動物です
引数を使った関数
関数に引数（パラメータ）を追加すると、外部から受け取ったデータを処理できるようになります。このテクニックには、同じ処理を異なるデータで実行できるため、関数の汎用性が高まる効果もあります。引数は複数設定することも可能でしょう。

  
function describePet(animal, sound) { console.log(animal + "の鳴き声は" + sound + "です"); }
describePet("ネコ", "ニャーニャー");
describePet("イヌ", "ワンワン");

  


  







実行結果:
ネコの鳴き声はニャーニャーです
イヌの鳴き声はワンワンです
戻り値のある関数
関数から値を返したい場合は、return文を使いましょう。function文のなかでreturn文を使うと、関数の処理結果を変数に格納したり、別の処理で利用したりすることが可能です。このテクニックは、計算や変換処理などの場面で関数を使ううえで特に重要な考え方でしょう。

  
function getAnimalSpeed(animal) {
  if (animal === "チーター") { return 112; }
  else if (animal === "ライオン") { return 80; }
  return 30; // その他の動物はデフォルト値
}
console.log("チーターの最高速度は" + getAnimalSpeed("チーター") + "km/h");

  


  







実行結果:
チーターの最高速度は112km/h
関数式の使い方
JavaScriptでは、関数を変数に代入する「関数式」という方法も用意しています。関数式を使うと、関数を値として扱うことが可能です。変数への代入や他の関数への引数として渡す場面などで、より柔軟な使い方が可能になるでしょう。

  
var getAnimalInfo = function(animal) { return animal + "に関する情報です"; };
console.log(getAnimalInfo("ゾウ"));
var animalData = getAnimalInfo; // 関数を別の変数に代入
console.log(animalData("キリン"));

  


  







実行結果:
ゾウに関する情報です
キリンに関する情報です
アロー関数
ES2015（ES6）で導入されたアロー関数は、従来の関数定義よりもコードを簡潔に書ける構文です。短い関数の記述で特に役立ち、コードの可読性が向上します。シンプルな処理や関数式でよく使われるテクニックです。

  
var getSound = animal => animal === "ネコ" ? "ニャー" : "不明";
console.log("ネコの鳴き声: " + getSound("ネコ"));
var calcWeight = (animal, base) => animal === "ゾウ" ? base * 100 : base * 10;
console.log("ゾウの体重目安: " + calcWeight("ゾウ", 50) + "kg");

  


  







実行結果:
ネコの鳴き声: ニャー
ゾウの体重目安: 5000kg
デフォルト引数の設定
引数にデフォルト値を設定できるようになったのも、ES2015（ES6）以降です。この仕組みによって、引数が省略された場合でも関数が正常に動作します。オプショナルな引数を扱う際に特に便利な機能です。

  
function createAnimalDescription(animal, habitat = "不明", speed = "通常") {
  return animal + "は" + habitat + "に住み、速さは" + speed + "です";
}
console.log(createAnimalDescription("ライオン", "サバンナ", "速い"));
console.log(createAnimalDescription("ペンギン", "南極"));

  


  







実行結果：
ライオンはサバンナに住み、速さは速いです
ペンギンは南極に住み、速さは通常です
複数の引数を処理する関数
不特定多数の引数を処理したい場合は、残余引数（rest parameters）を使用しましょう。この関数を使うと、可変長の引数リストを配列として受け取ることが可能となります。動的な処理の実現で役立つテクニックでしょう。

  
function listAnimals(...animals) { return "動物リスト: " + animals.join(", "); }
console.log(listAnimals("ライオン", "トラ", "クマ"));
console.log(listAnimals("ウマ", "ウシ"));

  


  







実行結果:
動物リスト: ライオン, トラ, クマ
動物リスト: ウマ, ウシ
関数のスコープと変数
関数内で宣言された変数は、基本的にその関数内でのみ有効です。このことを、ローカルスコープと呼びます。ローカルスコープの特性を活用すると、関数間で変数名の衝突を避けることが可能です。一方、関数外で宣言された変数は、プログラム全体から参照できるグローバルスコープとなります。

  
var animalType = "哺乳類"; // グローバル変数
function showInfo() {
  var animalName = "キツネ"; // ローカル変数
  console.log(animalName + "は" + animalType);
}
showInfo();
// console.log(animalName); // エラー: animalNameはローカル変数

  


  







実行結果：
キツネは哺乳類
まとめ
JavaScriptにおけるfunction文は、コードの再利用性と整理整頓を実現する強力ツールです。この記事では、function文における関数の基本定義から応用的な使い方について、初心者にもわかりやすく解説しました。
プログラム内で関数を使うと、同じコードを何度も書く必要がなくなります。そこから得られるメリットが、プログラムの効率性と可読性の向上です。
また、引数を使うことでデータを関数に渡すことが可能となります。return文を使用すると、処理結果を返すこともできるでしょう。ほかには、関数式やアロー関数といった状況に応じた関数定義方法を選択することで、より柔軟なプログラミングが実現するはずです。
関数の概念を理解することは、プログラミングの基礎を身につけるうえでも非常に重要です。
JavaScript初心者の方は、このページで学んだfunction文および関数の知識を自分の開発環境で表現してみましょう。小さな関数から始めて、徐々に複雑な処理を実装していくことで、JavaScriptの真の力を発揮できるようになります。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript function文の使い方