この記事の執筆・監修
テクノロジーアンドデザインカンパニー株式会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。
はじめに
こんにちは。キノコードです。
「【5分レッスン】JavaScript超入門コース#12 関数」について説明します。
関数とは
関数について
・関数とは
・関数の宣言と実行
・関数式
まず、関数について説明します。
関数とは、「処理」を一つにまとめたものです。
関数を使用すると、同じ処理を繰り返し書く必要がなくなり、別のプログラムでも利用することができます。
関数の宣言と実行
関数をプログラムで使えるようにすることを「関数の宣言」といいます。
JavaScriptでの関数の宣言方法についてみていきましょう。
function 関数名( ) { 実行する処理}
JavaScriptでは関数の定義にfunctionを使います。
functionの後に関数につける名前を書き、丸括弧を書きます。
関数に引数を渡したい場合は、丸括弧のなかに引数名を書きます。
引数は、何個でも渡すことができるので、必要な分だけカンマで区切って入れることができます。
最後に{ }波括弧を書いて、波括弧のなかに実行する処理を書きます。
それでは、実際に、コードを書いてみましょう。
// Lesson12_01
function showMessage() {
console.log(""Hello World"");
}
showMessage();文字列の「Hello World」を表示する関数を作成しましょう。
まずは function、関数名を書きましょう。
関数名はメッセージを表示する意味を持つ「showMessage」を書きます。
今回、引数はないので丸括弧のみを書きます。
波括弧を書いて、実行する処理「console.log("Hello World");」を書きます。
これで関数を定義することができました。
関数を実行するには、関数名、丸括弧で実行できます。
関数名の「showMessage」に引数なしの丸括弧。これで「Hello World」が表示されるはずです。
実行してみましょう。
「Hello World」を表示することができました。
定義した関数は何度でも呼び出すことができます。
3回showMessage();を実行します。
「Hello World」は3回表示されるはずです。
実行してみましょう。
// Lesson12_01
function showMessage() {
console.log(""Hello World"");
}
showMessage();
showMessage();
showMessage();「Hello World」を3回表示することができました。
関数式
JavaScriptは関数を変数に代入することができます。
この書き方を関数式といいます。
関数式の書き方について見ていきましょう。
var 変数名 = function() {
実行する処理
}
関数式では変数名、イコール、function、関数名を書きます。
先ほどと同時に、丸括弧、波括弧、実行する処理を書きます。
あいさつを表示する関数式を作ってみましょう。
// Lesson12_02
var sayHello = function sayHello(greeting) {
console.log(greeting);
}
sayHello(""Good Morning"");
変数名はあいさつをする、という意味の「sayHello」とします。
関数名も「sayHello」としましょう。
function関数名、丸括弧、丸括弧の中には引数を書きます。
引数名はあいさつの「greeting」としましょう。
波括弧を書いて、実行する処理を書きます。今回は挨拶を表示するので、「console.log(greeting);」です。
関数を実行するときは、変数名、丸括弧を書きます。
変数名の「sayHello」に引数は「"Good Morning"」丸括弧。これで「Good Morning」が表示されるはずです。
実行してみましょう。「Good Morning」が表示されました。
関数式は関数名を省略することができます。
関数名の「sayHello」を省略しましょう。
「Good afternoon」と「Good evening」も表示させましょう。
// Lesson12_02
var sayHello = function(greeting) {
console.log(greeting);
}
sayHello(""Good Morning"");
sayHello(""Good afternoon"");
sayHello(""Good evening"");実行してみましょう。
「Good afternoon」と「Good evening」も表示することができました。
