【JavaScript】関数定義について

みなさんこんにちは！
のむ（@nomu_engineer）です！

今回の記事ではJavaScriptの関数の定義についてまとめました。

この記事を読むメリット
・JavaScript関数の定義の仕方がわかる。
・JavaScript関数の定義の種類がわかる。

この記事を読むおすすめの読者
・プログラミング初心者
・駆け出しエンジニア

それでは早速JavaScript基礎的な文法からまとめていきたいと思います。

JavaScriptの基礎的な文法について

まずはJavaScriptの概要も含めて基礎的な概要からまとめていきたいと思います。

JavaScriptは主にクライアントサイドにおいて力を発揮する言語となっています。
特徴としては、ページの遷移なしで、画面の表示を切り替えらるということです。

これは本当にJavaScriptの大きな武器と言えると思います。
何気ないことに感じるかもしれませんが、皆さんが日々使っているインスタやTwitterが「いいね」をするたびに画面の読み込みが行われていたら、不快に感じる人が多いかもしれません。

JavaSのおかげで、画面遷移なしでそれらの行為が行われるようになってます。
感謝ですね。笑

それでは、JavaScriptの基礎的な文法ということで、Rubyにおけるputsの役割をしている、メソッドからまとめていきます。

Rubyの「puts」の役割をJavaScriptでになっているのは、「console.log」です。
このメソッドを使うことで、ブラウザにテキストを表示することができます。

書き方としては、console.log(“表示したい文字”)です。
実際に書いてみます。

console.log("俺は海賊王になる")
=> 俺は海賊王になる

と言った感じで、使うことができます。

次に変数定義についてですが、こちらはRubyとは少し違います。
変数定義の前に、var, const,letいずれかの変数宣言を行います。

varは今はほとんど使われていないのでconstまたはletのどちらかになります。
どのように記述するかというと、

let fruits = "apple"
console.log(fruits)
=> apple

const fruits = "apple"
console.log(fruits)
=> apple

と言った感じで、変数名の前に変数宣言として、letかconstを宣言します。
この二つの違いは、後から再代入するかしないかです。

letは再代入することができるので、後々再代入したい場合はletを使い、letに対してconstは再代入ができないので、再代入したくない場合に使います。

letとconstを使い分けることで、再代入してもいいものなのか、してはいけないのか視認しやすくなります。

最後に補足しておくと、変数宣言はしなくても変数は使えるということです。
ただ、使うことで、どのような変数なのかを視認しやすくなるので、開発がスムーズになります。

JavaScriptの関数について

RubyにおけるメソッドのことをJavaSでは関数と言います。
Rubyのメソッドの定義は、

def メソッド名 do 
  #処理内容
end

上記の記述で、メソッドの定義をしていました。
JavaSの場合はfunctionを用いて関数の定義をします。

function 関数名(仮引数) {処理内容}、と言った感じで記述します。
それでは早速記述記述していきましょう。

function sayHello() {
  console.log("こんにちは！");
}
sayHello();

=> こんにちは！

と言った感じです。
呼び出し方はRubyと同じで、関数名を記述して関数を呼び出します。

JavaSには他にも関数の定義の仕方があります。

関数式という形式で関数を定義することができます。
function(){}という無名の関数を変数に定義または代入して関数を定義するやり方です。

書き方としては、
変数 = function(){#処理内容}です。

呼び出すときは変数名を記述して呼び出します。

const hello = function() {
  console.log("hello");
}；
hello();

=>hello

上記の記述の仕方で変数の定義をします。
まずはconstで変数宣言をして、helloに変数定義します。

その後にfunctionを用いて、関数を記述していく流れになります。
最後に、変数名を使って関数を呼び出して終了です。

この記述は無名関数というものです。
無名関数は関数名なしで関数を定義することができます。

より簡潔なコードを記述できるというメリットがあります。

次は即時関数と呼ばれる記述の仕方です。
即時関数とは、関数を定義すると同時に関数が実行される構文です。

記述の仕方は以下になります。

(function countNum(num) {
  console.log(num);
})(1);

=> 1

このように関数を定義することで、定義と同時に関数が実行されます。
上記の即時関数は、（１）という実引数が(num)という仮引数に代入されて、処理が行われます。

（）の中にfunctionから始まる関数定義そのものを配置することで、関数を即実行することができます。

最後にアロー関数についてです。

アロー関数とは以下のようにfunctionを省略して、代わりに()=>を記述することで、変数を定義することができる。

const countNum = (num) => {
  console.log(num);
}
countNum(1)

=> 1

アロー関数の特徴としては、より短い記述で関数を定義することができるということです。

以上の4つが関数の定義の仕方でした。
まとめると以下のようになります。

関数宣言による関数の定義と、無名関数を変数に定義、代入することで関数を定義する関数式の2種類あります。

JavaScriptのオブジェクトについて

Rubyのオブジェクトは簡単にまとめると生成する全ての値や、クラスのことでした。
JavaScriptのオブジェクトはデータや機能をまとめた情報をのもののことです。
そして、このデータはハッシュのように名前と値をセットにして管理します。

オブジェクトの説明をしていきます。

このようにオブジェクトの中にオブジェクトがある状態です。
そして「shibaオブジェクト」などは、プロパティを持つことができます。

プロパティとはデータの値と名前をセットにしたもので、そのオブジェクトが持つ属性を表すことができます。
属性というのはそのオブジェクトの特徴みたいなもので、名前は豆柴で、年齢は3歳と言った情報のようなものです。

書き方としては以下のようになります。

shiba {
  name: "豆柴"
  age: 3
}

上記のように記述することで、shibaオブジェクトに名前が豆柴で年齢が3歳というプロパティを与えることができます。
この豆柴や3歳という情報のことを属性値とも言います。

各オブジェクトはそれぞれ固有の属性値を持つことができるものです。

最後にオブジェクトの値の取得の仕方ついてまとめて終わります。

オブジェクトの値の取得は
オブジェクト名.プロパティ名で取得できます。

さっきのshibaオブジェクトで記述すると、

console.log(shiba.name);
=>豆柴

のような感じでオブジェクトの値を取得できます。

最後に

以上がJavaScriptにおける関数の定義の仕方と種類でした。

JavaScriptを極めるには必須のスキルですので、ぜひ抑えておきましょう！