【初級編DAY12】JavaScriptの基本文法を学ぼう②
【初級編DAY12】JavaScriptの基本文法を学ぼう②
引き続き基本文法について学んでいきます。
関数（function）
■関数（function）とは■
処理をまとめたもの
ある複数の計算をいろいろなところで使いたいときなどに、その複数の計算に名前を付けて、必要なところで呼び出すことを可能とする処理。
ある複数の計算をいろいろなところで使いたいときなどに、その複数の計算に名前を付けて、必要なところで呼び出すことを可能とする処理。
基本的な書き方
基本的な書き方
function 関数名(引数){
// 処理を書く
}
使用要素・・・function
関数名 ・・・関数を定義する。関数に名前を付ける。
引数 ・・・引数が必要な時は()内に記述※必須ではない
{}内 ・・・処理内容を記述
関数名 ・・・関数を定義する。関数に名前を付ける。
引数 ・・・引数が必要な時は()内に記述※必須ではない
{}内 ・・・処理内容を記述
記述書いただけでは実行されないので、実行を行いましょう！
呼び出し方（実行）
関数名(引数に受け渡しする値);
これで作成した関数を呼び出し実行をすることができます。
引数
■引数とは■
受け渡しをしたい値
都度処理の際に値が代わる際は引数を使用することで値の受け渡しが可能となる。
都度処理の際に値が代わる際は引数を使用することで値の受け渡しが可能となる。
例
// 関数の宣言
function showMessage(message){
console.log(message);
}
// 実行
showMessage("こんにちわ");
// 結果 こんにちわ
showMessage関数内にconsole.log処理を記述。
messageを引数とし、処理内に引数を記述使用。すると処理実行時に指定した値がmessageに引き渡され実行される。
関数の宣言時にmessageに指定した部分に”こんにちわ"が入ったね！
複数の引数
複数の引数を当てることも可能です。
基本の記述方法
// 基本の記述方法
function 関数名(引数1, 引数2) {
console.log(`${引数1}${引数2}`);
}
// 呼び出し方
関数名(引数1, 引数2);
例
function say(firstName, lastName) {
console.log(`${firstName} ${lastName}`);
}
say("田中", "太郎");
//出力結果 田中 太郎
定義した関数の引数と呼び出す際に入れこむ引数は、同様の順番で記述を行ってください。
戻り値・返り値（return）
■戻り値・返り値（return）とは■
関数の結果を要求元に返すこと
関数を定義実行した際、通常実行のみが行われるため、自動的には答えは返ってこない。そのため「結果を教えて」と指示するのがreturnである。
returnを記述せずに実行させると結果がわからないため、undefined(未定義である）と返ってきてしまうので注意。
関数の実行を終了する
強制的に関数の実行が終了されてしまうので注意。
例
// 関数doubleの定義をする
// returnを入れることでdoubleに結果が返る
function double(number){
return number *2 ;
}
// 引数doubleに2を入れた場合の結果4がコンソール画面で確認出来る
console.log(double(2));
関数を定義する際に結果を関数doubleに返すよう指示を出している。
そうしたことでconsole.logで関数double・引数2で計算をした際に結果4としてコンソール画面に表示が可能となる。
仮にreturnを記述せず、number*2のみで記述をした際は計算をしても結果は教えてくれないため、処理を行っただけに過ぎなくなってしまう！
プログラミング初心者にはつまずきポイントでした・・
こちらのサイトがとても初心者向けに分かり易く解説をしてくださっています。
円の面積を求めてみよう！【練習問題】
上記のことを踏まえて円の面積を求めてみましょう。
＜functionを使用しない場合＞
// 円の面積を求める計算
const pai = 3;
console.log(area);
//出力結果 108
＜functionを使用して関数をまとめた場合＞
最終的に表示する変数（円の面積）＝calCircleArea
// 関数にまとめると
const pai = 3;
return area;
}
console.log(calCircleArea(6));
//出力結果 108
functionを使用した方がすっきりするね！
スコープの概念
変数や定数にはスコープという概念があります。
■スコープとは？■
変数がどの場所から参照でき、どの範囲まで使えるのか。有効範囲のこと。同じスコープ上では使用が可能ですが、別のスコープのであれば使用や参照はできません。
グローバルスコープ
すべてのスコープから使用参照が有効であるスコープのことを指します。
注意事項
外で定義した変数をfunction内で使用や書き換えを行うことは可能ですが、基本的にfunction内で定義した定数に関しては、そのfunction内が有効範囲となります。
関数内で定義した際
// 関数内で定義した変数や定数は、関数の外では使用できません
function hello() {
let message = "こんにちは";
}
console.log(message);
// エラー
関数外で変数定義をした際
// 関数外で定義した変数や定数は、関数内での書き換え表示が可能です
// このときmessageはグローバルスコープとなります。
let message="こんばんわ";
function hello() {
message = "こんにちは";
}
hello();
console.log(message);
// 結果 こんにちわ
最初はどこまで使えるのか、を意識しておくと良いね!
条件分岐(if)
ifを使うにあたり基本情報
■条件分岐（if）とは■
〇〇の場合◆◆する
という条件を指定したいときに使用する
という条件を指定したいときに使用する
基本的な記述方法
// 基本の記述
if (条件){
// 処理
}
条件にはBoolean(ブーリアン)というデータ型を使用している。
■Booleanとは■
true(一致) と false(不一致)を扱うデータ型のこと
※これまではこのようなデータ型を使用していたよ！※
String・・・文字列のデータ型
number・・数字のデータ型
このBoolean内で比較演算子を行い、trueとなるかfalseとなるかでifを使用し結果を返したい。
■比較演算子とは■
二つの式や値を比べて結果を真偽（true or false)で返すこと
例
console.log(10>2);
// 回答 2は10より小さいのでtrueが返ってくる
一般的な比較演算子
A>B AはBより大きい（Bは含まれない）
A<B AはBより小さい（Bは含まれない）
A>=B AはB以上である（Bも含まれる）
A<=B AはB以下である（Bも含まれる）
A===B AとBは同じ
A!==B AとBは異なる
こちらの比較演算を使用し、返ってきたtrueまたはfalseを使用し、ifで条件分岐を行っていく。
if 基本記述
let score=89;
if (score>70){
console.log("70以上");
}
// scoreには89が格納されているので、条件の結果はtrueとなり、処理が行われ”70以上”が表示される
// 条件結果がfalseとなった場合は{}内の処理はされない。
複雑な条件分岐（論理演算子）【条件が or 又は and となるとき】
OR（OR演算）・・・ || で表示
どちらかがまたはどちらも一致でtrue、どちらも一致しないfalse
AND（AND演算）・・・ && で表示
どちらも一致でtrue、どちらも一致ないまたは片方一致でもfalse
どちらかがまたはどちらも一致でtrue、どちらも一致しないfalse
AND（AND演算）・・・ && で表示
どちらも一致でtrue、どちらも一致ないまたは片方一致でもfalse
例
// scoreを定義
let score=89;
// 条件 scoreが89または0である時に”89または0"と表示
if (score === 89 || score === 0){
console.log("89または0");
}
// 条件 scoreが20超えかつ90未満である時に”20超えかつ90未満"と表示
if (score > 20 && score <90 ){
console.log("20超えかつ90未満");
}
複雑な条件分岐【else、else if】
基本記述
// 条件一致した場合とそれ以外の場合の処理
if (条件){
// 処理
}else{
// 処理
}
// 条件一致した場合と次の処理
if (条件){
// 処理
}else if{
// 処理
}
ifにて結果がfalseであった際に、
①一致しなかった場合の処理を記述したい【else】
// scoreが89超えであった時とそれ以外であった場合の処理を指示
if (score > 89){
console.log("89超え");
}else{
console.log("89以下");
}
②一致しなかった場合に次の条件を指定する【else if(次の条件)】
// scoreが89超えであった時に一致しなかった場合に次の条件を記述
if (score > 89){
console.log("89超え");
}else if(score > 30){
console.log("89以下、30超え");
}
③条件が重なりあう場合【入れ子】
// scoreを定義
let score=89;
// 【条件①】scoreが0以上、100以下であった場合
// 【条件②】89超えだったら”範囲内であり、89超え”、それ以外”範囲内であり、89以下”と表示
if (score >= 0 && score <= 100){
if(score > 89){
console.log(範囲内であり、89超え);
}else {
console.log(範囲内であり、89以下);
}
}
if、比較演算、複雑な条件の書き方など記述方法を整理しよう！
switch文
基本記述
switch(変数){
case 条件:
// 処理
break;
case 条件:
// 処理
break;
case 条件:
// 処理
break;
default:
// 条件
break
}
case 条件：・・・変数の値と比較したうえで処理の記述が可能となる。
break；・・・・・この処理から抜ける、という意味。breakを記述忘れるとそれ以降の処理を行ってしまうため、一致した時点で処理から抜ける必要が有る。
default：・・・・・条件に一致しないもの。条件以外のものに対しての処理
例
// scoreを定義
let score=10;
switch (score){
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
case 10:
console.log("10");
break;
default:
console.log("その他");
break;
}
// scoreには10が入っているので10が返ってくる
入り組んだif分の時はコチラで書くとすっきりするよ！
ifはフローチャート
switchは合う条件を上から当てはめていくイメージかな！
覚えることが増えてきて少しとっつきにくくなり始めてきました(;´･ω･)
まずは基本を理解して、頭で記憶するのではなく、「何ができるか」を把握して実際にコードを書く際の引き出しを増やしていきましょう！٩( ''ω'' )و
