概要
JavaScript で関数の宣言と実行を行う方法と、オブジェクト、引数についての学んだことをまとめる。
前提知識
使用するソフト
Visual Studio Code : js のスクリプト記述のために利用
ターミナル : macOS High Sierra ver 10.13.6 に標準搭載されている実行環境
Google Chrome （Google Chrome 右クリック → [検証] で [Console] 画面を表示）
関数
プログラミングでは、処理をまとめて関数として名前をつけることで、呼び出しが可能になる。
以下の構成で記述する
関数（ここでは「helloConsole」と命名）を利用して「Hello World」の出力すると、以下のようになる。
.js
//関数の定義
function helloConsole(){
console.log("Hello World");
}
//関数の実行
helloConsole();
関数の定義方法（ここでは、関数名を「hogehoe」とする)
.js
function hogehoge(){
//処理内容の記述
}
※ 関数の命名規則として、数字・大文字で始めない
アロー関数（矢=>を使った関数）
function を利用して関数を定義するよりも、シンプルな構文() => {} で、こちらが利用されることが多い
アロー関数を利用した「Hello World」の定義
.js
const showMessage = () => {
console.log("Hello World");
}
アロー関数の定義方法（ここでは、関数名を「hogehoe」とする)
プログラミングにおいて、= は、右を左に代入という意味
.js
const hogehoge = () => {
//処理内容の記述
}
オブジェクトの定義
オブジェクトは、以下のように書く
.js
const user = {
name: "太郎", // 文字列
age: 21 // 数字
}
ここでは、「user」がオブジェクト名、「name」「age」をプロパティという
オブジェクトを定義すると、各プロパティを取得できます
.js
console.log(user.name);
console.log(user.age);
関数の引数としてオブジェクトを渡す
アロー関数の引数としてオブジェクトを渡すと、一つの変数で複数の値を渡すことができる
.js
//オブジェクトの定義
const user2 = {
name: "二郎",
age: 22
}
//取得するプロパティを定義
const logUser = (u) => {
console.log(u.name)
console.log(u.age)
}
//関数の実行
logUser(user2);
関数とオブジェクトの使用例
「野球少年ランク」を求めるための例文を記載する。
.js
//3人の野球少年のスペックをオブジェクトで定義
const baseballBoy1 = {
name : "ichiro",
power : 90,
speed : 80,
technique : 100
}
const baseballBoy2 = {
name : "jiro",
power : 30,
speed : 50,
technique : 80
}
const baseballBoy3 = {
name : "saburo",
power : 10,
speed : 10,
technique : 10
}
//野球少年のランクを求める関数を定義
//野球少年ランクは power と speed と technique の合計値
const baseballBoyRank = (boy) => {
const total = boy.power + boy.speed + boy.technique
let rank = "";
//合計値に応じたランクの設定
if (total>=250){
rank = "A"
}
else if (total>=150){
rank = "B";
}
else{
rank = "C";
}
return rank;
}
//関数の実行
console.log(baseballBoyRank(baseballBoy1)); //出力結果：A
console.log(baseballBoyRank(baseballBoy2)); //出力結果：B
console.log(baseballBoyRank(baseballBoy3)); //出力結果：C
//getrank によって取得した値を再利用したい場合は、結果を変数に格納する記述方法がいい
const baseballboyRank1 = baseballBoyRank(baseballBoy1)
console.log(baseballboyRank1) //出力結果：A
const baseballboyRank2 = baseballBoyRank(baseballBoy2)
console.log(baseballboyRank2) //出力結果：B
const baseballboyRank3 = baseballBoyRank(baseballBoy3)
console.log(baseballboyRank3) //出力結果：C
変数のletとconst の使い分け
let
変数に代入した値の更新が可能
.js
let name = "Ichiro";
console.log(name);
//出力結果：Ichiro
name = "Jiro"; // 値の更新時には let は不要
console.log(name);
//出力結果：Jiro
const
一度定義した値を更新することができない
.js
let name = "Ichiro";
console.log(name);
//出力結果：Ichiro
name = "Jiro";
console.log(name); //エラーが発生する
再代入する場合は let, それ以外の場合は const を利用する