概要

JavaScript で関数の宣言と実行を行う方法と、オブジェクト、引数についての学んだことをまとめる。

前提知識

ローカルで 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 を利用する

参考ページ

アロー関数の基本