JavaScriptの関数(function)を習う!高階関数や無名関数についても解説。APIコラム海外エンジニアエンジニア論PC機器・書籍HOMEJavaScriptJavaScript入門JavaScriptの関数(function)を習う!高階関数や無名関数についても解説。JavaScriptの関数(function)を習う!高階関数や無名関数についても解説。初心者向けこの記事では、JavaScriptの関数(function)について説明していく。この記事は以下のような人たちに向けて書いている。プログラミング初心者でJavaScriptの基礎を習得したい人。JavaScriptの関数について勉強したい人。他のプログラミング言語をすでに習得しており、JavaScriptの関数についてその特徴などを知りたい人。ChromeやFireFoxといったおもなブラウザを使用している人はデベロッパーツールを使いJavaScriptのコードを実際に実行することができる。自分でコードを書きながら記事を読み進めてほしい。無名関数(関数リテラル・匿名関数)関数とはまずは関数の定義から確認しよう。「関数」とはプログラミングにおける一連の処理の集まりで、繰り返し使用するコードを集めたものと考えるとわかりやすいだろう。関数は「ファンクション」「メソッド」などとも呼ばれる。関数にはデフォルトで用意されている「デフォルト関数」とユーザが作成する「ユーザ定義関数」がある。この記事で説明しているのはユーザ定義関数のほうだ。JavaScriptのユーザ定義関数の定義の方法には以下の3種類がある。関数の書き方では、実際に関数の書き方を勉強していこう。関数の定義の仕方を例を使って説明する。ここではfunction命令を使って関数を定義したい。{console.log(text);}この関数は変数に格納することもできる。{console.log(text);}関数の命名ルール関数の名前は通常キャメルケースで表記する。キャメルケースとは最初の文字を小文字で表記し、単語の変わり目で大文字を使用する表記方法。changeView()関数名は単語2・3語から構成されているのが望ましい。長すぎると読みづらく、短すぎると識別しずらくなる。関数は複数の引数とひとつの戻り値を持つ。足し算の関数であれば、2つの数字を引数として関数に渡し、結果を戻り値として返すことになる。op2;}JavaScriptでは、引数や戻り値のデータ型の指定は行わない。戻り値はreturn命令の後に表記する。関数の呼び出し定義した関数を呼び出す際は関数名で呼び出すことができる。5));関数の高度な使い方ここからはより高度な関数の使い方を見ていこう。JavaScriptの関数の自由度の高さがわかるだろう。JavaScriptの関数は一種のデータ型JavaScriptにおける関数は一種のデータ型であり、これはJavaScript特有の非常に重要な特徴だ。これを確認するために、以下のようなコードを書いてみよう。4));console.log(triangle);ひとつ目の呼び出しではコンゾールに「10」が出力される。これは多くのプログラミング言語で使用されるような普通の関数の呼び出しだ。ふたつ目の呼び出しを呼び出しを見てみよう。ここでは通常渡すはずの引数が書かれていない。Javaなどのプログラミング言語ではエラーとなるコードだが、JavaSciptでは関数の定義を呼び出すことができる。2;}これが「JavaScriptでは関数は一種のデータ型である。」ということの証明となる。引数のデータ型を明示する関数の呼び出しの際には、引数の名前を明示的に示してもいい。5));関数を引数として渡す(高階関数)JavaScriptでは、関数を他の関数の引数として渡すことができる。showValue);上記の関数では、関数「showValue」を引数として関数「arrayLoop」に渡している。無名関数(関数リテラル・匿名関数)無名関数は名前を持たない関数で、再利用しない関数に対して用いられる。無名関数は特に先の項で紹介した高階関数とともに使用される。先ほどのコードを無名関数を使って書き換えると以下のようになる。});どうだろう少し読みやすくなったのでは無いだろうか?執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事JavaScriptのnullとundefinedの違いを理解する!判定の方法と正しい使い分け。2022.02.24この記事では、JavaScriptのnullとundefinedの違いについてプログラミング初心者向けに説明する。プログラミング言語の多くは変数を「[...]JavaScriptの開発環境を準備する!jsに対応したオススメのIDEも紹介。2021.07.15この記事では、これからJavaScriptを使ってWebサイトやWebアプリケーションの開発をしたいという人に向けて、必要な準備を解説していきたい。[...]JavaScriptの変数を勉強する!宣言や代入の方法。2021.07.22この記事では、JavaScriptの変数の種類やその使い方について説明していく。変数はプログラミングを書く上でもっとも重要な存在だ。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。