JavaScirptの関数とは。使い方を初心者向けに解説する

JavaScript
スポンサーリンク

進め方

JavaScriptの関数について初心者の方でもわかりやすいように、この記事では解説します。以下の内容で進めていきます。

  1. 関数とは
  2. 関数を使う
  3. まとめ

関数とは

一言でいうと

一連の処理をひとまとめにしたものです。

なにがいいのか

一連の処理にまとめることで、その処理を使いまわせます。使いまわせることによって毎回同じ処理を書く必要がなく簡単に呼び出せることや、コードの修正する必要があるときに関数を直すだけで済むので管理が楽になります。

また、関数にまとめることでコードの量が減り可読性が高くなることや、関数名から処理の内容が想像しやすくなります。

注意すること

むやみに関数を作りすぎると似たような処理が多くなり、どれを使えばいいのかわかりづらく、可読性が低くなります。なるべく関数は使いまわせる形で分かりやすい関数名にしましょう。

種類は2パターン

自作関数

自分で定義したものです。上でご説明したのは自作関数のことを言っています。

組み込み関数

元から用意されているものです。実際プログラムを書いていて結構使います。

関数を学習するキーワード

引数

呼び出すときに関数に渡す変数。渡した変数は関数内で使えるようになる。引数はあってもなくてもよい。

戻り値

関数を呼び出したときに関数で処理された結果を入れた値。戻り値は必ず1変数になる。複数返したい場合はオブジェクトに入れて返す必要がある。戻り値もあってもなくてもよい。

匿名関数

関数名を省略して宣言した関数。詳しい書き方は下でまとめて書きます。

即時関数

定義と同時に処理される関数。関数を1回しか使わない場合に使う。

関数を使う

引数・戻り値による種類

最初に覚えるのはこの引数と戻り値による関数の4パターンです。

引数あり・戻り値なし

呼び出し時に引数を渡します。

//変数宣言
function dispStr(str){
  console.log(str);
}

//呼び出し
dispStr('Hello!');

引数なし・戻り値あり

呼び出し結果を使います。宣言にはreturn値が必要です。

//変数宣言
function getNum(){
  var num = 1;
  return num; 
}

//呼び出し
var num = getNum();
console.log(num); //1

引数あり・戻り値あり

//変数宣言
function addCount(count){
  result = count + 1;
return result;
}

//呼び出し
var one = 1;
two = addCount(one);

引数なし・戻り値なし

//変数宣言
function func(){
 //処理
}

//呼び出し
func();

宣言の種類

次に関数の宣言方法の4パターンです。先ほどの無名関数、即時関数もここでご紹介します。

  1. 基本の書き方
  2. 変数に入れる書き方
  3. 無名関数
  4. 即時関数
//基本の書き方
function funcName(){
  //処理内容
}

//変数に入れる書き方
var func = function funcName(){
  //処理内容
};

//無名関数
var func = function(){
  //処理内容
};

//即時関数
(function() {

})("");

まとめ

関数を初めて見た方はこの記事を一通り見終わって、種類が多く戸惑うかもしれません。しかし実際にコードを書いていると、書き方に慣れてきますので自分で書いてみてください。特に動いていることを確認できるのは以下のメソッドを関数内に書くことです。

//コンソールに表示
console.log(変数);

//アラートを画面に表示
alert(変数);

関数の呼び出しは関数名を指定して呼び出すので、あまり使う場面がないと思うかもしれません。実際はイベントというものから呼び出すことが多くなります。イベントとはブラウザからクリックやスクロールなどの操作を感知するものです。自分何か作成しようと思ったときには必ず必要になってくるので、関数についてはしっかり理解しておきましょう。

スポンサーリンク
JavaScript プログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人3年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました