できる気になっているJSを改めてチュートリアルからやってみる 9日目

～～ 関数 ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。

JavaScript の構成要素 をやってます。

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

JavaScriptはたくさんの組み込み関数あるよ。ブラウザー組み込み関数もあるけど、これは背後のブラウザのコードを呼び出してて、ウェブ言語ではなくC++のような低レベルのシステム言語で書かれてるんだよ。

関数とメソッド

オブジェクトのメソッドの一部を、プログラマーは関数として呼び出します。ここでは、あまり正しく言及されてないです。

今のところ、ウェブのあちこちにある関連したリソースを見ていると、メソッドと関数が混在していることがあるとわかってもらいたいだけだそうです。

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();
 }
}

のような関数を作って、次に使うときは

draw();

だけ。

あとこのランダムとかはほぼテンプレートに近い感じがするので、書いておく。

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

かならず実行することを忘れずに。

匿名関数

その名の通り、名前のない関数を作成できます。

const myButton = document.querySelector('button');

myButton.onclick = function() {
 alert('hello');
}

みたいに。匿名関数を変数の値として代入もできます。

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

これは関数に名前を付けたような効果がありますので、以下のように起動できます。

myGreeting();

また、関数を複数の変数の値としても代入することが可能。別で実行もできるよ。

let anotherGreeting = myGreeting;
anotherGreeting();
myGreeting();

ただ、 これは混乱するだけなのでやらないように！ とのことです。普通に関数を作成するときで名前を付けるのはこの形式で行きましょ。

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

匿名関数は主に、イベント発火（ボタンがクリックされたか）とかで使用します。（一番最初のところね）

関数の引数

関数には実行するときに、引数が必要なものがあります。引数は、パラメータ、プロパティ、アトリビュートと呼ばれる場合もあります。

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

関数のスコープと競合

関数を作成するとき、関数のなかで 定義されている変数や関数は内部でそれぞれ独自のスコープを持ちます。

これはそれぞれが独自の小部屋に閉じ込められてて、別の関数の内部から、あるいはこの関数の外部のコードから触れられなくなることを意味しています。

理由は様々ありますが、主となるのは「セキュリティ」と「組織化」のため。

変数にコードのどこあらでもアクセスされないようにしたい場合にどこかから呼び込んだ外部スクリプトがあなたのコードをおかしくして、問題を起こす場合があるかもしれません。

別の場所でたまたま同じ名前の変数を使っていたために... (故意的、単なる偶然どちらの可能性もある）

それが関数の中に隔離されていると、このような問題を避けられるのでこれが一番良いだろうと考えられている。※動物園の表現がありました。わかりやすいかもね。

いじょう。