ユーザー定義関数ってなんだろう？（JavaScript）
この記事について
学習をする中で、疑問に思った点などをまとめる形式で記したものになります。
- 対象
プログラミング言語における、関数とはなにかをあまりわかっていない方。JavaScriptにおけるユーザー関数定義の方法について、理解を深いめたい方。
関数とは
そもそも関数とは何か
関数とは、コンピュータプログラム上で定義されるサブルーチンの一種で、数学の関数のように与えられた値（引数）を元に何らかの計算や処理を行い、結果を呼び出し元に返すもののこと。 (IT用語辞典より引用)
上記にもあるように、中高生のときに学習した一次関数や二次関数が、ぱっと頭に思い浮かぶかもしれません。見た目こそ違いますが、何らかの計算や処理を行い、結果を返すという点で同じものであるといえます。
この関数についてですが、2種類に分類することができます。
- 各言語の標準関数
- ユーザー定義関数
このユーザー関数定義について深堀りしていきたいと思います。
ユーザー定義関数
ユーザー定義（ここで言う定義とは、いつでも使える状態に準備すること）関数とは、開発者が定義することのできる関数のことです。メリットは、言語がデフォルトでは提供してない処理や計算の結果を自由に定義できる点です。
JavaScriptにおいて、このユーザー定義関数には、大きく4つの定義方法があります。
ユーザー定義関数を定義する上で、いくつかの注意点があります。
- 命名規則を守ること。
- その関数の役割がすぐわかるような名前をつけること
この名前付けが非常に重要で、難しい部分でもあります。（本題からずれますので、時間のある方はこちらの記事をどうぞ。）
1. function
関数を定義する上で、最も基本的な方法です。
使い方
function 関数名 (引数, ...){ return 求めたい結果; }
長方形の面積を求める関数の例を見てみましょう。
縦の長さが2m、横の長さが3mとします。
function square(x, y){ return x * y; } console.log( square(2,3) ); // 結果：6
長方形の面積を求めたいので、関数名はsquareとしています。
また、縦と横の値を引数として関数に渡しています。
2. Functionコンストラクター
1のfunctionと比較すると、少し書きにくい印象を受けます。
使い方
const 変数名 = new Function(引数, ..., 求めたい結果);
では、同様に長方形の面積を求める例を見てみましょう。
const square = new Function('x', 'y', 'return x*y;'); console.log(square(2,3)); // 結果：6
やはり1に比べると記述のしやすさ、見た目ともに劣ります。
基本的に使う必要はないでしょう。
3. 関数リテラル
1のfunctionと書き方が似ているが、functionが関数名をつける必要があるのに対して、関数名を付ける必要がない。匿名関数、または無名関数とも呼ばれることもあります。
使い方
const 変数名 = function(引数, ...){ return 求めたい結果; };
今回は、定義した関数を変数に格納してみました。
この関数リテラルですが、本記事では詳しく触れていませんが、実際に開発を行う中で度々使うべきタイミングがやってくると思いますので、更に理解を深めたい方はこちらの記事をどうぞ。
では、同様に長方形の面積を求める例を見てみましょう。
const square = function(x, y){ return x * y; }; console.log(square(2,3)); // 結果：6
4. アロー関数
ES2015で新しく追加され、関数リテラルをよりシンプルに記述することができるようになったものです。
使い方
(引数, ...) => {... 求めたい結果}
関数リテラルとの大きな違いは、functionを記述しないことで、その代わりに=>を使用しています。これがアロー関数と呼ばれる所以ですかね。
では、最後に長方形の面積を求める例を見てみましょう。
const square = (x, y) => { return x * y; } console.log(square(2, 3)); // 結果：6
アロー関数では、更に省略して書くことが可能です。
const square = (x, y) => x * y; console.log(square(2, 3)); // 結果：6
いかがでしょうか、かなりシンプルになりましたよね。
しかし、他にも色々な使い方があるようなので、かなり奥が深いようです。
以上、ユーザー関数定義の4つの方法でした。
どの方法が使いやすかったでしょうか？個人的にはアロー関数が直感で使えていいかなと思っています。
さいごに
関数って、数学が嫌いな人だと聞いただけでも難しそうに感じますよね。僕もプログラミング学習を始めたばかりのときは、よくわからないけど、難しそうなものくらいの認識でした。うまくこの関数とも付き合っていきたいですね。
また、誤植や間違い等ございましたら、コメントください。
参考・引用文献
JavaScriptのデータ型
この記事について
学習をする中で、疑問に思った点などをまとめる形式で記したものになります。知識が全く無いと理解するのが難しい部分もあるかもしれませんが、多少勉強したことがあれば理解できると思います。
- 対象
JavaScriptにおけるデータ型について、基本的な考え方を身につけ、もう少し理解を深めたい方。
データ型とは
そもそもデータ型とは何か
データ型とは、プログラミング言語などが扱うデータをいくつかの種類に分類し、それぞれについて名称や特性、範囲、扱い方、表記法、メモリ上での記録方式などの規約を定めたもの。 (IT用語辞典より引用)
前提として、プログラミング言語には、このデータ型を強く意識するもの（静的型付け言語）とそうでないもの（動的型付け言語）の2つに分類できます。
JavaScriptは動的型付け言語なので、データの型に対してしばりがゆるいです。どういうことかというと、数値のみの受け取りを想定している変数に、文字列を渡すことができるんです。静的型付け言語から勉強を始めると、理解に苦しむ部分だと思います。つまり、変数名等が曖昧だと、データが何であるかがわかりにくいとも言えます。（本記事では、これ以上は取り上げませんが、動的型付けと静的型付けについて理解を深めたい方は以下の記事へどうぞ。） qiita.com
JavaScriptのデータ型について
JavaScriptのデータ型は大きく2つに分類できます。違いは、値を変数に格納する方法にあります。
基本型 値そのものが、直接格納される。
参照型 参照値（値を実際に格納しているメモリアドレス）が、格納される。
文字だけだとわかりにくいので、実際のコードを見てみましょう
1.基本型
var x = 10; var y = 10; console.log(x === y); // 結果:true
2.参照型
var x = [1,2,3]; var y = [1,2,3]; console.log(x === y); // 結果:false
予想通りの結果になりましたか？ 1がtrueになるのは、もちろん理解できますが、2がfalseになるのは少し抵抗感がある方もいるんじゃないでしょうか。
具体的に考えてみる
この2つの方の違いについて、具体例を交えて考えていきます。
例えば、完全に造りが同じ2棟の家、ｘとｙがあったとします。 ここで、ｘの家とｙの家は全く同じものですか？ と問われたらどうでしょうか。 答えはもちろん'Yes'、つまり、ｘ=ｙですよね。 では、この2つの家の住所は全く同じものですか？ と問われたらどうでしょう？ もちろん、答えは'No'、つまり、ｘ≠ｙです。 番地が違うので、全くの別物と認識されることになります。
基本型は前者、参照型は後者の例で表した内容と感覚的に近いものと考えることができます。これで、JavaScriptにおける2つのデータ型について、基本を抑えることができたのではないでしょうか。
さいごに
言語化するのって、むずかしいですよね。 なんとなく流していた部分だったので、理解とまとめに時間がかかりました。理解の一助になれば嬉しいです。
また、誤植や間違い等ございましたら、コメントください。
参考・引用文献
オブジェクト指向ってなんだろう？
この記事について
学習をする中で、疑問に思った点などをまとめる形式で記したものになります。知識が全く無いと多少理解するのが難しいかもしれませんが、多少勉強したことがあれば理解できると思います。
オブジェクトとは
- そもそもオブジェクトとは何か
- 簡単に言うと、配列みたいなもの、もっというと連想配列（名前をキーにアクセスできる配列）により近いもの
- 1つのオブジェクト（＝モノ）を表現するために、複数の情報からなるひとまとまりのもの
- オブジェクトはデータを保持（＝記録）するもの
連想配列もオブジェクトも複数の要素を内包する集合体であることは共通してますが、
2. 1つのオブジェクト（＝モノ）を表現するために、複数の情報からなるひとまとまりのもの
という点が大きく異なります。
具体的に考えてみる
ここで、オブジェクトの具体例として、パソコンを例に上げて考えてみましょう。
- ディスプレイ、キーボード、マウス、マザーボード、CPU、メモリ、ハードディスクドライブ、グラフィックボード...などいっぱい
これらの集合体が、パソコンという一つのオブジェクト（＝モノ）であることがわかります。
そして、そのパソコンやその他色々を組み合わせて、また別のオブジェクトを作っていくこともできるわけで、1つのパーツであるということがわかると思います。
3. オブジェクトはデータを保持（＝記録）するもの
つまり、同じパソコンであれば使っている部品（要素）も同じであることが担保されているということ。
例では、形のあるものをあげましたが、形のないものでも同じように考えることができます。
オブジェクト指向とは
オブジェクトについて、理解が少し深まったところで、オブジェクト指向とは何かを考えましょう。
オブジェクト指向言語はこのような開発方式に必要な諸機能を言語仕様として備えているものを指し、オブジェクトの雛形であるクラス（class）やプロトタイプ（prototype）、および内部のメソッド（method）やプロパティ（property）を定義する構文や、オブジェクトのインスタンス化、メソッド呼び出し、メッセージ交換などの機能を提供する。 (IT用語辞典より引用)
オブジェクト指向とは、プログラム上で扱う対象をオブジェクト（＝モノ）に見立てて、そのオブジェクトを中心として組みあげていく手法のことです。
オブジェクト指向言語の分類
様々なプログラミング言語がオブジェクト指向で設計されていますが、それらは大きく2つの種類に分けられます。
インスタンス
オブジェクト指向で頻出の単語である、インスタンスとは何かを考えましょう。オブジェクトを複製することをインスタンス化、そして、インスタンス化によって出来上がったコピーのことをインスタンスと言います。
インスタンスがあるといいこと
オリジナルのオブジェクトには手を加えず、コピーを作った上でそのコピーを操作し、 データの競合を防ぐことができる。
具体的に考えてみる
では逆に、インスタンスがなかったら、を考えます。 その上で、1つのオブジェクトに異なる場所からアクセスがあった場合を想定してみましょう。
テーブルにりんごが10個並べてあります。 りんごが大好きなAさんとBさんの2人は、それぞれ6個のりんごをかばんのなかにしまおうとしています。 しかし、2人ともせっかちなので、順番を守ることができません。 2人はりんごをしまうことができるでしょうか。
この例では、AさんとBさんの2人がりんごというモノ（オブジェクト）に対して、同時に取るというアクション（アクセス）をしようとしていることがわかると思います。これでは、お互いに競合してしまい、まともに目的を果たすことができなさそうなのは一目瞭然です。
でも、もしテーブルが2つあって、それぞれにりんごが10個並べてあったら？ Aさんも、Bさんも6個ずつかばんのなかにしまうことができますよね。
さいごに
理解したいけど、ちょっと敬遠してきた。 そんな方向けにまとめてみましたが、いかがだったでしょうか？理解の一助になれば嬉しいです。
また、誤植や間違い等ございましたら、コメントください。
