💬

関数— 再利用可能なコードブロック

2023/06/13に公開

JavaScript

tech

MDN（ https://developer.mozilla.org/ja/docs/Web/JavaScript ）
を参考に勉強するように注意が入ったので、ここを教本にしていきます。
その為、抜粋しながら進めたいと思います。

今回はこちらです。

関数とは

関数とはあるデータを受け取り、定められた独自の処理を実行し、その結果を返す命令のことです。
独自の名前の直後にカッコがついてるもの（例：draw()）を見かけたら、それはカスタム関数です。

関数には2種類あり、1つ目は独自関数、2つ目は標準関数（組み込み関数）です。
独自関数は、自由に名前と処理を考え、プログラマーが作ることです。
今回は「標準関数（組み込み関数）」を見ていきます。

関数とメソッド

メソッドとはオブジェクト（プログラムを設計するときの考え方のひとつ）内のデータを操作するためのものです。
その一部をプログラマーは関数として呼び出します。

関数の例として、function(){}を使用したものを２つあげます。

function 関数名（引数）{
//何らかの処理
//return 戻り値
}

「draw()」使用文

draw():連続して実行

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

「random()」使用文

Math.random():0以上1未満(0は含むが、1は含まない)の範囲で浮動小数点(10進数)の乱数を作成

function random(number) {
  return Math.floor(Math.random()*number);
}

関数の呼び出し

「myFunction()」使用文

function myFunction() {
  alert('hello');
}
myFunction();

匿名関数

名前のない関数のことを「匿名関数」と呼びます。

function myFunction() {
  alert('hello');
}

上記から関数の名前（myFunction()）を無くしたものが下記です。

function() {
  alert('hello');
}

匿名関数はよくイベントハンドラで使われています。
例えば下記では関連づけられたボタンがクリックされるたび、関数の中のコードが走ります。

const myButton = document.querySelector('button');
myButton.onclick = function() {
  alert('hello');
}

「匿名関数を変数の値として代入する」使用文

const myGreeting = function() {
  alert('hello');
}

こちらの文から、関数の名前を無くしたものが下記です。

function myGreeting() {
  alert('hello');
}

イベントハンドラで使用される場合はこの様な書き方になります。

myButton.onclick = function() {
  alert('hello');
  // I can put as much code
  // inside here as I want
}

関数の引数

関数には実行する時に引数が必要なものがあります。
関数のカッコとカッコの間に書かなければならない値で、関数が正しい仕事をするのに必要とされます。

引数がいらないもの

Math.random() など

let myNumber = Math.random();

引数が必要なもの

replace()など
ブラウザー組込みの文字列関数replace()は二つの引数が必要です。
それは、主文字列から探すべき部分文字列と、部分文字列を置換する文字列です。

let myText = 文字列
myText.replace( 対象の文字, 置換する文字 );

「replace()」使用文

let myText = 'I am a string';
let newString = myText.replace('string', 'sausage');

引数の省略

join()など
引数には省略可能なものもあります。
省略された場合、関数はだいたいデフォルトに規定された動作を行ないます。

let myArray = 配列;
myArray.join( '区切り文字' );

「join()」使用文

let myArray = ['I', 'love', 'chocolate', 'frogs'];
let madeAString = myArray.join(' ');
// returns 'I love chocolate frogs'
let madeAString = myArray.join();
// returns 'I,love,chocolate,frogs'

結合/区切り文字を指定する引数が省略された場合は、デフォルトとしてカンマが使用されます。

関数のスコープと競合

スコープとは、関数を作成する時、変数や関数などを定義する際に、どこまでその変数や関数を利用できるのかを決める範囲のことです。

スコープは２種類あります。

グローバルスコープ　
全ての関数の外側で宣言されている為、定義された値はすべて、コードのどこからでもアクセスできる。
ローカルスコープ　
限定的に範囲が狭められた、ページ内の部分的な範囲のみアクセスできる。

「スコープ」使用文

HTMLファイルが二つの外部JavaScriptファイルを呼び出しているとして、そのどちらも同じ名前の変数と関数を定義している使用例です。

HTML ファイル

<script src="first.js"></script>
<script src="second.js"></script>
<script>
  greeting();
</script>

js ファイル（first.js）

let name = 'Chris';
function greeting() {
  alert('Hello ' + name + ': welcome to our company.');
}

js ファイル（second.js）

let name = 'Zaptec';
function greeting() {
  alert('Our company is called ' + name + '.');
}

呼び出したいのはどっちもgreeting()関数ですが、first.jsファイルのgreeting()関数しかアクセスできません(second.jsファイルは無視されます)。
また、second.jsファイルでletキーワードでname変数に2度目の定義をしようとするとエラーになります。

下記がエラー文です。

参考文献

MDN「関数 — 再利用可能なコードブロック」
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Functions (2023/06/12閲覧)

GitHub「mdn/learning-area」
learning-area/javascript/building-blocks/functions/function-scope.html
https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-scope.html (2023/06/12閲覧)