【JavaScript 初心者講座】関数を定義する
[JavaScript 初心者講座]関数を定義する
関数について学習する。前講座で、文字列が持っている関数を利用した。 関数の利用方法についてはマスターしたと思う。 今回、自分で関数を作成して、その関数を実行する手順を学習する。
引数無し。戻り値無し
自分で関数を定義し、その関数を利用するサンプルプログラムである。
001<script>
002
003//関数を定義
004function message ( ) {
005 alert ( "OK" ) ;
006}
007//message()関数を実行[OK]
008message() ;
009
010</script>
002
003//関数を定義
004function message ( ) {
005 alert ( "OK" ) ;
006}
007//message()関数を実行[OK]
008message() ;
009
010</script>
プログラムを実行すると、「OK」と表示する。
関数について、もう一度確認する。
関数とは 関数とは、何か処理をするプログラムである。
たとえば、alert () 関数は、ポップアップダイアログを開いて、文字を表示する処理をする。
文字列が持っている、includes()関数は、文字列に特定の文字列が含まれているか確認する。
関数は、処理を行なうプログラムである。
今回、関数を自分で作成する。
function 関数名 () {
処理 ;
}
関数を作成する記述である。
関数を定義する 関数を作成する事
関数を作成する事を、「関数を定義する」と言う。一般的に利用される言葉なので覚える必要がある。
さて関数を定義する場合、まず
function というキーワードを利用する。その後に、
関数名を記述して括弧を記述する。
括弧を記述した後に、中括弧を開き、数行下で中括弧を閉じる。
中括弧で囲まれた部分を、関数のブロックと言う。
あるいは、「関数本体」などと言う人も少数ながらいる。
さて、関数は何か処理をするものである。
関数で何か処理をさせる場合、関数ブロックの中に処理内容を記述する。
001<script>
002
003//関数を定義
004function message ( ) {
005 alert ( "OK" ) ;
006}
007//message()関数を実行[OK]
008message() ;
009
010</script>
002
003//関数を定義
004function message ( ) {
005 alert ( "OK" ) ;
006}
007//message()関数を実行[OK]
008message() ;
009
010</script>
プログラムを解説する。4行目で、functionキーワードを利用して、関数を定義する。 関数の名前は「message」である。つぎに、関数名の後ろに括弧を記述して、 その後、中括弧を開く。6行目で中括弧を閉じているので、 関数本体は、4行目から6行目という事になる。 この関数は、message()関数と言う事になる。 さて、message()関数の処理内容を見る。 処理は5行目に書かれている。
005alert ( "OK" ) ;
message()関数が実行すると、このプログラムが実行する。 ここまでが、message()関数の定義である。
001<script>
002
003//関数を定義
004function message ( ) {
005 alert ( "OK" ) ;
006}
007//message()関数を実行[OK]
008message() ;
009
010</script>
002
003//関数を定義
004function message ( ) {
005 alert ( "OK" ) ;
006}
007//message()関数を実行[OK]
008message() ;
009
010</script>
このプログラムを実行する。 4行目から6行目までは「message()関数の定義」である。 「関数の実行」ではない。関数は実行されないと実行しない。 そのため、プログラムが実行すると、最初に8行目が実行する。 8行目で、message()関数を実行する。 ここで初めてmessage()関数が実行する。message()関数の処理は、alert()関数を実行する事である。 「OK」と表示してプログラムが終了する。
001<script>
002
003//関数を定義
004function message ( ) {
005 alert ( "OK" ) ;
006}
007//message()関数を実行[OK]
008//message() ;
009
010</script>
002
003//関数を定義
004function message ( ) {
005 alert ( "OK" ) ;
006}
007//message()関数を実行[OK]
008//message() ;
009
010</script>
いま、8行目をコメントアウトした。このプログラムはmessage()関数を定義しているが、 message()関数を実行していないため、プログラムを実行しても何も表示しない。
引数1つ。戻り値無し
引数を持つ関数を解説する。
001<script>
002
003//関数を定義
004function message ( name ) {
005 alert ( "OK " + name ) ;
006}
007//message()関数を実行[OK IORI]
008message( "IORI" ) ;
009
010</script>
002
003//関数を定義
004function message ( name ) {
005 alert ( "OK " + name ) ;
006}
007//message()関数を実行[OK IORI]
008message( "IORI" ) ;
009
010</script>
プログラムを実行すると、「OK IORI」と表示する。
プログラムの4行目でmessage()関数を定義している。 括弧の中に注目してほしい。 括弧の中に、「 name 」という記述がある。 これは、「引数を持つ関数」と言われる。
function 関数名 ( 引数1 , 引数2 ... ) {
処理 ;
}
関数は「パラメーター（引数）」を受け取る事ができる。 そして、そのパラメーターを関数の中で利用できる。 プログラムを見ながら解説する。
001<script>
002
003//関数を定義
004function message ( name ) {
005 alert ( "OK " + name ) ;
006}
007//message()関数を実行[OK IORI]
008message( "IORI" ) ;
009
010</script>
002
003//関数を定義
004function message ( name ) {
005 alert ( "OK " + name ) ;
006}
007//message()関数を実行[OK IORI]
008message( "IORI" ) ;
009
010</script>
4行目でmessage()関数を定義する。
message()関数は引数を一つ持っている。それが「name」である。
5行目で、文字列「OK 」と引数の変数nameを文字列結合して表示する。
これが、message()関数の処理である。6行目でmessage()関数のブロックが終了する。
これが、message()関数の定義である。では、message()関数はどのように実行されるのだろうか？
プログラムの8行目でmessage()関数を実行する。
message()の括弧の中に、文字列「IORI」を記述している。
これは、
message()関数の引数に文字列「IORI」を渡すプログラムである。
このように、message()関数を利用する場合、パラメーター（引数）を、
message()関数に渡す事ができる。
8行目でmessage()関数を実行するが、
プログラムは次のようになる。
001<script>
002
003//関数を定義
004function message ( "IORI" ) {
005 alert ( "OK " + name ) ;
006}
007//message()関数を実行[OK IORI]
008message( "IORI" ) ;
009
010</script>
002
003//関数を定義
004function message ( "IORI" ) {
005 alert ( "OK " + name ) ;
006}
007//message()関数を実行[OK IORI]
008message( "IORI" ) ;
009
010</script>
8行目を実行すると、message()関数の引数に「IORI」が渡される。 ここで、関数の処理が実行する。 5行目で、文字列結合をする。
001<script>
002
003//関数を定義
004function message ( "IORI" ) {
005 alert ("OK IORI" ) ;
006}
007//message()関数を実行[OK IORI]
008message( "IORI" ) ;
009
010</script>
002
003//関数を定義
004function message ( "IORI" ) {
005 alert ("OK IORI" ) ;
006}
007//message()関数を実行[OK IORI]
008message( "IORI" ) ;
009
010</script>
このように文字列結合して、その文字列がダイアログに表示する。 引数がある関数の定義について解説を終了する。
引数2つ。戻り値無し
引数を二つ持つ関数を見る。
001<script>
002
003//関数を定義
004function message ( name , ja) {
005 alert ( name + ":" + ja ) ;
006}
007//message()関数を実行[IORI:イオリ]
008message( "IORI" , "イオリ" ) ;
009
010</script>
002
003//関数を定義
004function message ( name , ja) {
005 alert ( name + ":" + ja ) ;
006}
007//message()関数を実行[IORI:イオリ]
008message( "IORI" , "イオリ" ) ;
009
010</script>
プログラムを実行すると、「IORI:イオリ」と表示する。
4行目から6行目までが、message()関数である。
引数を見ると、「name」と「ja」とある。
message()関数は引数を二つ持つ関数と言える。
では、message()関数を実行しよう。
プログラムを実行すると、8行目が実行する。
8行目は、引数に「IORI」と「イオリ」を渡して、message()関数を実行する。
ここで、4行目のmessage()関数が実行する。
第一引数に「IORI」が入り、第二引数に「イオリ」が入る。
001<script>
002
003//関数を定義
004function message ( "IORI" , "イオリ" ) {
005 alert ( name + ":" + ja ) ;
006}
007//message()関数を実行[IORI:イオリ]
008message( "IORI" , "イオリ" ) ;
009
010</script>
002
003//関数を定義
004function message ( "IORI" , "イオリ" ) {
005 alert ( name + ":" + ja ) ;
006}
007//message()関数を実行[IORI:イオリ]
008message( "IORI" , "イオリ" ) ;
009
010</script>
引数に「IORI」「イオリ」を渡してmessage()関数を実行すると、 message()関数の引数にそれぞれ値が入る。 message()関数の処理は5行目である。
001<script>
002
003//関数を定義
004function message ( "IORI" , "イオリ" ) {
005 alert ( "IORI" + ":" + "イオリ" ) ;
006}
007//message()関数を実行[IORI:イオリ]
008message( "IORI" , "イオリ" ) ;
009
010</script>
002
003//関数を定義
004function message ( "IORI" , "イオリ" ) {
005 alert ( "IORI" + ":" + "イオリ" ) ;
006}
007//message()関数を実行[IORI:イオリ]
008message( "IORI" , "イオリ" ) ;
009
010</script>
5行目が実行すると、引数の値が文字列結合して、「IORI:イオリ」となり、 この値が表示する。
引数2つ。戻り値有り
戻り値がある関数を定義して実行する。
001<script>
002
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
007//add()関数を実行
008var res1 = add ( 3 , 7 ) ;
009
010//[10]
011alert ( res1 )
012
013//add()関数を実行
014var res2 = add ( 10 , 7 ) ;
015
016//[17]
017alert ( res2 ) ;
018
019</script>
002
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
007//add()関数を実行
008var res1 = add ( 3 , 7 ) ;
009
010//[10]
011alert ( res1 )
012
013//add()関数を実行
014var res2 = add ( 10 , 7 ) ;
015
016//[17]
017alert ( res2 ) ;
018
019</script>
プログラムを実行すると、「10」「17」と表示する。
戻り値 戻り値とは、関数の実行結果である。
「戻り値」は関数を実行した結果、その関数から戻される値である。
function 関数名 ( 引数1 , 引数2 ... ) {
処理 ;
return 値 ;
}
戻り値をもつ関数を定義する場合、関数の最後に、
return 値 ;
と記述する。関数を実行した実行元へ、ここで指定した「値」が戻る。
関数から戻される値を、戻り値と言う。
「値を戻す関数」を「戻り値がある関数」と言う。
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
004function add ( a , b ) {
005 return a + b ;
006}
プログラムを一部抜粋した。add()関数を定義している。 add()関数は、「a」「b」と二つの引数を受け取る。 関数の最後にreturnがある。 つまり、add()関数は値を戻す（戻り値がある）関数である。 では、どのような値を戻すのだろうか？
005 return a + b ;
このように記述されている。 「a」と「b」は引数である。 つまり、add()関数は二つの引数を加算して戻す。
001<script>
002
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
007//add()関数を実行
008var res1 = add ( 3 , 7 ) ;
009
010//[10]
011alert ( res1 )
012
013//add()関数を実行
014var res2 = add ( 10 , 7 ) ;
015
016//[17]
017alert ( res2 ) ;
018
019</script>
002
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
007//add()関数を実行
008var res1 = add ( 3 , 7 ) ;
009
010//[10]
011alert ( res1 )
012
013//add()関数を実行
014var res2 = add ( 10 , 7 ) ;
015
016//[17]
017alert ( res2 ) ;
018
019</script>
プログラムを解説する。 4行目から6行目はadd()関数の定義である。 8行目で、引数に「3」と「7」を渡してadd()関数を実行する。 add()関数は戻り値を戻すので、その戻り値を変数res1で受け取る。 ここで、add()関数が実行する。
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
004function add ( a , b ) {
005 return a + b ;
006}
「a」と「b」に、「3」と「7」が代入される。
003//関数を定義
004function add ( 3 , 7 ) {
005 return a + b ;
006}
004function add ( 3 , 7 ) {
005 return a + b ;
006}
このように、関数実行元から渡された引数が、それぞれの引数に代入される。 add()関数は二つの引数を加算して戻す。 つまり、add()関数の実行元へ、「10」が戻される。
001<script>
002
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
007//add()関数を実行
008var res1 = 10 ;
009
010//[10]
011alert ( res1 )
012
013//add()関数を実行
014var res2 = add ( 10 , 7 ) ;
015
016//[17]
017alert ( res2 ) ;
018
019</script>
002
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
007//add()関数を実行
008var res1 = 10 ;
009
010//[10]
011alert ( res1 )
012
013//add()関数を実行
014var res2 = add ( 10 , 7 ) ;
015
016//[17]
017alert ( res2 ) ;
018
019</script>
8行目で、add()関数の実行結果「10」が変数res1へ代入される。
11行目で、変数res1の値を表示する。
つぎに、14行目で、再度add()関数を実行する。
引数に「10」と「7」を渡す。
003//関数を定義
004function add ( 10 , 7 ) {
005 return a + b ;
006}
004function add ( 10 , 7 ) {
005 return a + b ;
006}
add()関数の引数に「10」と「7」が代入される。 add()関数は二つの引数を加算して、その結果を戻す。 add()関数を実行した実行元へ、「17」が戻る。
001<script>
002
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
007//add()関数を実行
008var res1 = 10 ;
009
010//[10]
011alert ( res1 )
012
013//add()関数を実行
014var res2 = 17 ;
015
016//[17]
017alert ( res2 ) ;
018
019</script>
002
003//関数を定義
004function add ( a , b ) {
005 return a + b ;
006}
007//add()関数を実行
008var res1 = 10 ;
009
010//[10]
011alert ( res1 )
012
013//add()関数を実行
014var res2 = 17 ;
015
016//[17]
017alert ( res2 ) ;
018
019</script>
14行目でadd()関数を実行すると、17が戻る。その「17」を変数res2で受け取る。 プログラムの最後で変数res2の値「17」を表示する。
練習問題1
以下の仕様を満たす関数を作成しよう。
| 関数名 | displayName() |
| 引数 | 文字列 |
| 戻り値 | 文字列 |
| 機能 | 引数で受け取った文字列に「さん」をつけて戻す |
引数で受け取った値に、「さん」を文字列結合して戻す関数、displayName()を作成しよう。
001<script>
002
003function displayName ( name ) {
004
005 //戻り値
006 var result = name + "さん" ;
007
008 //戻り値を戻す
009 return result;
010}
011
012//displayName()関数を実行
013var name = displayName ( "清水" ) ;
014
015//[清水さん]
016alert ( name ) ;
017
018</script>
002
003function displayName ( name ) {
004
005 //戻り値
006 var result = name + "さん" ;
007
008 //戻り値を戻す
009 return result;
010}
011
012//displayName()関数を実行
013var name = displayName ( "清水" ) ;
014
015//[清水さん]
016alert ( name ) ;
017
018</script>
プログラムを実行すると、「清水さん」と表示する。
まず、3行目から10行目まで関数displayName()を定義している。
displayName()関数は、引数に文字列nameを受け取る。
6行目で引数で受け取ったnameに「さん」という文字列を追加して、
変数resultに代入する。
関数ブロックで、変数resultの値を戻す。
ここまでが、displayName()の定義である。
プログラムを実行すると、13行目から処理が始まる。
13行目で、引数に文字列「清水」を渡してdisplayName()を実行する。
displayName()が実行すると、引数に「清水」が代入される。
003function displayName ( "清水" ) {
004
005 //戻り値
006 var result = name + "さん" ;
007
008 //戻り値を戻す
009 return result;
010}
004
005 //戻り値
006 var result = name + "さん" ;
007
008 //戻り値を戻す
009 return result;
010}
6行目で、文字列「清水」と「さん」が文字列結合して変数resultに代入される。 関数ブロックの最後で、returnキーワードを利用して変数resultを、 関数実行元へ戻す。
012//displayName()関数を実行
013var name = displayName ( "清水" ) ;
014
015//[清水さん]
016alert ( name ) ;
013var name = displayName ( "清水" ) ;
014
015//[清水さん]
016alert ( name ) ;
引数「清水」を渡して、displayName()関数を実行すると、「清水さん」という文字列が戻る。
012//displayName()関数を実行
013var name = "清水さん" ;
014
015//[清水さん]
016alert ( name ) ;
013var name = "清水さん" ;
014
015//[清水さん]
016alert ( name ) ;
プログラムの最後で、変数nameの値「清水さん」を表示する。
練習問題2
以下の仕様を満たす関数を作成しよう。
| 関数名 | display() |
| 引数 | 配列（値は文字列） |
| 戻り値 | 配列（値は文字列） |
| 機能 | 引数で受け取った配列の文字列にすべて「さん」を追加して戻す |
先ほど作成したdisplayName()関数は、引数で受け取った文字列に「さん」を追加して戻した。 こんかいは、引数で文字列の入った配列を受け取り、配列に入った全ての文字列に「さん」をつけて戻す。 では、作成しよう。
001<script>
002
003function display ( args ) {
004
005 //戻り値
006 var result = [ ] ;
007
008 //戻り値を戻す
009 return result;
010}
011//配列を作成
012var names = [ "清水" , "本田" , "佐藤" ] ;
013
014//display()関数を実行
015var res = display ( names ) ;
016
017//繰り返し文で全て表示
018for ( var i = 0 ; i < res.length ; i ++ ) {
019
020 alert ( res [ i ] ) ;
021}
022
023</script>
002
003function display ( args ) {
004
005 //戻り値
006 var result = [ ] ;
007
008 //戻り値を戻す
009 return result;
010}
011//配列を作成
012var names = [ "清水" , "本田" , "佐藤" ] ;
013
014//display()関数を実行
015var res = display ( names ) ;
016
017//繰り返し文で全て表示
018for ( var i = 0 ; i < res.length ; i ++ ) {
019
020 alert ( res [ i ] ) ;
021}
022
023</script>
このプログラムを実行しても、何も起こらない。未完成である。
解説する。まず3行目でdisplay()関数を定義した。
引数はargsとした。6行目で、戻り値とする配列resultを宣言した。
関数ブロックの最後、9行目で戻り値として配列resultを戻す。
これが未完成のdisplay()関数である。
12行目から解説する。プログラムを実行すると、12行目から処理が始まる。
12行目で文字列「清水」「本田」「佐藤」が入った配列を作成して、変数namesに代入する。
15行目で配列namesを引数に渡してdisplay()関数を実行して、戻り値を変数resで受け取る。
18行目でfor文を利用して、変数resに入った値を全て取り出し、ダイアログに表示する。
ほんらい、「清水さん」「本田さん」「佐藤さん」と表示するはずだが、
こんかい、display()関数が未完成なので、なにも表示しない。
では、display()関数を完成させる。
001<script>
002
003function display ( args ) {
004
005 //戻り値
006 var result = [ ] ;
007
008 //繰り返し文で値を全て取り出す
009 for ( var i = 0 ; i < args.length ; i ++ ) {
010
011 result.push ( args [ i ] + "さん" ) ;
012 }
013 //戻り値を戻す
014 return result;
015}
016//配列を作成
017var names = [ "清水" , "本田" , "佐藤" ] ;
018
019//display()関数を実行
020var res = display ( names ) ;
021
022//繰り返し文で全て表示
023for ( var i = 0 ; i < res.length ; i ++ ) {
024
025 alert ( res [ i ] ) ;
026}
027
028</script>
002
003function display ( args ) {
004
005 //戻り値
006 var result = [ ] ;
007
008 //繰り返し文で値を全て取り出す
009 for ( var i = 0 ; i < args.length ; i ++ ) {
010
011 result.push ( args [ i ] + "さん" ) ;
012 }
013 //戻り値を戻す
014 return result;
015}
016//配列を作成
017var names = [ "清水" , "本田" , "佐藤" ] ;
018
019//display()関数を実行
020var res = display ( names ) ;
021
022//繰り返し文で全て表示
023for ( var i = 0 ; i < res.length ; i ++ ) {
024
025 alert ( res [ i ] ) ;
026}
027
028</script>
プログラムを実行すると、「清水さん」「本田さん」「佐藤さん」と表示する。
display()関数を完成させた。
3行目から解説する。3行目でdisplay()関数を定義する。引数の名前はargsとした。
6行目で戻り値となる配列を作成する。
9行目からfor文が始まる。
for文を利用して引数で受け取った配列から文字列を全て取り出し、
取り出した文字列に「さん」を追加する。
そして、push()関数を利用して、戻り値resultに代入する。
14行目で、戻り値resultを戻す。
以上で、display()関数の解説を終了する。
プログラムを実行すると、17行目が実行する。17行目で
文字列「清水」「本田」「佐藤」が入った配列を作成して、変数namesに代入する。
20行目で、変数namesを引数に渡してdisplay()関数を実行する。
display()関数を実行すると、配列の中の文字列に「さん」が追加される。
001<script>
002
003function display ( args ) {
004
005 //戻り値
006 var result = [ ] ;
007
008 //繰り返し文で値を全て取り出す
009 for ( var i = 0 ; i < args.length ; i ++ ) {
010
011 result.push ( args [ i ] + "さん" ) ;
012 }
013 //戻り値を戻す
014 return result;
015}
016//配列を作成
017var names = [ "清水" , "本田" , "佐藤" ] ;
018
019//display()関数を実行
020var res = [ "清水さん" , "本田さん" , "佐藤さん" ] ;
021
022//繰り返し文で全て表示
023for ( var i = 0 ; i < res.length ; i ++ ) {
024
025 alert ( res [ i ] ) ;
026}
027
028</script>
002
003function display ( args ) {
004
005 //戻り値
006 var result = [ ] ;
007
008 //繰り返し文で値を全て取り出す
009 for ( var i = 0 ; i < args.length ; i ++ ) {
010
011 result.push ( args [ i ] + "さん" ) ;
012 }
013 //戻り値を戻す
014 return result;
015}
016//配列を作成
017var names = [ "清水" , "本田" , "佐藤" ] ;
018
019//display()関数を実行
020var res = [ "清水さん" , "本田さん" , "佐藤さん" ] ;
021
022//繰り返し文で全て表示
023for ( var i = 0 ; i < res.length ; i ++ ) {
024
025 alert ( res [ i ] ) ;
026}
027
028</script>
display()関数の実行結果（戻り値）を変数resに代入する。 23行目で、for文を利用して配列の全ての値を表示する。 つまり、「清水さん」「本田さん」「佐藤さん」と表示する。
練習問題3
以下の仕様を満たす関数を作成しよう。
| 関数名 | search() |
| 引数 | 配列（値は文字列） |
| 戻り値 | 配列（値は文字列） |
| 機能 | 引数で受け取った配列の文字列の中で、「ball」という文字が含まれた文字を戻す |
文字列配列を受け取り、「ball」という文字が含まれる文字を戻したい。 文字は配列の中に代入して戻す。
001<script>
002
003var sports = [ "Football" , "Swimming" , "Baseball" ]
004var res = search ( sports ) ;
005
006for ( var i = 0 ; i < res.length ; i ++ ) {
007
008 alert ( res [ i ] ) ;
009}
010</script>
002
003var sports = [ "Football" , "Swimming" , "Baseball" ]
004var res = search ( sports ) ;
005
006for ( var i = 0 ; i < res.length ; i ++ ) {
007
008 alert ( res [ i ] ) ;
009}
010</script>
作成するsearch()関数の利用方法を示した。
3行目で変数sportsを宣言して配列を代入する。
配列の値は、「Football」「Swimming」「Baseball」の三つである。
この文字列の中で、「ball」が含まれる文字列がほしいと思う。
つまり、「Football」と「Baseball」の二つである。
4行目で、引数に配列を渡してsearch()関数を実行して、戻り値を変数resへ代入する。
このsearch()関数を自分で作成する。
今のところは、未完成である。
search()関数を実行すると、「ball」という文字列を含む文字列が戻される（そのように製造する）。
search()関数の戻り値は配列である。
戻り値には、文字列「ball」が含まれる文字列が配列で戻る。
6行目から始まるfor文で、戻り値の配列の値を、全て表示する。
こんかい、「Football」「Baseball」と順番に表示される。
このようなsearch()関数を自作したい。
では、作る。
001<script>
002function search ( sports ) {
003
004 //戻り値
005 var result = [ ];
006
007 //戻り値を戻す
008 return result ;
009}
010var sports = [ "Football" , "Swimming" , "Baseball" ]
011var res = search ( sports ) ;
012
013for ( var i = 0 ; i < res.length ; i ++ ) {
014
015 alert ( res [ i ] ) ;
016}
017</script>
002function search ( sports ) {
003
004 //戻り値
005 var result = [ ];
006
007 //戻り値を戻す
008 return result ;
009}
010var sports = [ "Football" , "Swimming" , "Baseball" ]
011var res = search ( sports ) ;
012
013for ( var i = 0 ; i < res.length ; i ++ ) {
014
015 alert ( res [ i ] ) ;
016}
017</script>
未完成である。 2行目で、search()関数を作成した。引数の名前はsportsとした。 しかし、引数の名前は何でも良い。 search()関数の戻り値は配列という事であった。 まず5行目で、戻り値にする配列resultを作成する。 そして、関数ブロックの最後で、配列resultを戻す。 このプログラムは未完成である。つぎに、関数ブロック内に処理を記述する。
001<script>
002function search ( sports ) {
003
004 //戻り値
005 var result = [ ];
006
007 //配列から値を取り出す
008 for ( var i = 0 ; i < sports.length ; i ++ ) {
009
010 //戻り値に追加
011 result .push ( sports [ i ] ) ;
012 }
013 //戻り値を戻す
014 return result ;
015}
016var sports = [ "Football" , "Swimming" , "Baseball" ]
017var res = search ( sports ) ;
018
019for ( var i = 0 ; i < res.length ; i ++ ) {
020
021 alert ( res [ i ] ) ;
022}
023</script>
002function search ( sports ) {
003
004 //戻り値
005 var result = [ ];
006
007 //配列から値を取り出す
008 for ( var i = 0 ; i < sports.length ; i ++ ) {
009
010 //戻り値に追加
011 result .push ( sports [ i ] ) ;
012 }
013 //戻り値を戻す
014 return result ;
015}
016var sports = [ "Football" , "Swimming" , "Baseball" ]
017var res = search ( sports ) ;
018
019for ( var i = 0 ; i < res.length ; i ++ ) {
020
021 alert ( res [ i ] ) ;
022}
023</script>
プログラムを実行すると、「Football」「Swimming」「Baseball」と表示する。
未完成である。
8行目でfor文を利用して、引数sportsから値を取り出す処理を記述した。
11行目で、変数iを利用して配列から値を取り出し、
戻り値resultに代入する。これで、引数に渡された値が全て戻り値resultに入った。
もう一度、search()関数の仕様を確認する。
| 関数名 | search() |
| 引数 | 配列（値は文字列） |
| 戻り値 | 配列（値は文字列） |
| 機能 | 引数で受け取った配列の文字列の中で、「ball」という文字が含まれた文字を戻す |
「機能」の部分で、文字列「ball」が含まれる文字列を戻す、とある。 引数に渡された値に、文字列「ball」が含まれるか確認する必要がある。 ここで、if文を利用する。では、完成品を掲載する。
001<script>
002
003function search ( sports ) {
004
005 //戻り値
006 var result = [ ];
007
008 //配列から値を取り出す
009 for ( var i = 0 ; i < sports.length ; i ++ ) {
010
011 //「ball」が含まれる場合、戻り値に追加
012 if ( sports [ i ] .includes ( "ball" ) ) {
013
014 //戻り値に追加
015 result .push ( sports [ i ] ) ;
016 }
017 }
018 //戻り値を戻す
019 return result ;
020}
021
022var sports = [ "Football" , "Swimming" , "Baseball" ]
023var res = search ( sports ) ;
024
025for ( var i = 0 ; i < res.length ; i ++ ) {
026
027 alert ( res [ i ] ) ;
028}
029</script>
002
003function search ( sports ) {
004
005 //戻り値
006 var result = [ ];
007
008 //配列から値を取り出す
009 for ( var i = 0 ; i < sports.length ; i ++ ) {
010
011 //「ball」が含まれる場合、戻り値に追加
012 if ( sports [ i ] .includes ( "ball" ) ) {
013
014 //戻り値に追加
015 result .push ( sports [ i ] ) ;
016 }
017 }
018 //戻り値を戻す
019 return result ;
020}
021
022var sports = [ "Football" , "Swimming" , "Baseball" ]
023var res = search ( sports ) ;
024
025for ( var i = 0 ; i < res.length ; i ++ ) {
026
027 alert ( res [ i ] ) ;
028}
029</script>
プログラムを実行すると、「Football」「Baseball」と表示する。
12行目で、if文を利用する。 if文の条件式は、引数「sports」の「i」番目の文字に、「ball」が含まれているかどうか、である。 もし、「sports」の「i」番目の文字に「ball」が含まれている場合、 戻り値resultに代入する。それ以外の場合は、何も処理しない。 このif文により、戻「ball」が含まれる文字列が戻り値の配列に入る。 解説は以上である。
まとめ
function 関数名 ( 引数1 , 引数2 ... ) {
処理 ;
return 戻り値 ;
}
