オブジェクト型

以下に記述するものがオブジェクト型になります。

オブジェクト(object)

オブジェクトはプロパティの集合体になります。例えば、一つの商品があるとします。

商品は名前と値段等のプロパティを持っています。それを踏まえると以下のように定義できます。

let productName = "りんご";
let productPrice = 200;

上記のように定義した場合、商品とプロパティの数が多くなった場合、管理が大変になるかと思います。

そう言った場合に、オブジェクトとして定義すると管理が楽になります。

index.js

...
console.log(typeof fruit);

let product = {
    name: "りんご",
    price: 200,
};
console.log(product);

オブジェクトとして定義した際に、nameやpriceなどのプロパティ名をkey(キー)とも言います。

ブラウザにて以下のように確認できるかと思います。

特定のプロパティの値を変更、取得するには2つの方法があります。

1つ目は、.で繋げる方法です。

index.js◎

...
console.log(product);
product.name = 'みかん';
console.log(product.name);

2つ目は、[]でkeyを指定する方法です。

index.js◎

...
console.log(product.name);
product['price'] = 300;
console.log(product['price']);

基本的には、1つ目の方法で記載するのが良いかと思います。しかし、keyを変数として動的に変更したい場合は、2つ目の方法を使うのが良いかと思います。

オブジェクトに関しては、後のセクションにて詳細に説明します。

配列(Array)

複数の値を格納したい場合は、配列として定義します。

配列として定義する場合は、[]の中に値を記載します。

index.js◎

...
console.log(product['price']);

let fruits = ['りんご', 'みかん'];
console.log(fruits);

以下のようにブラウザで確認できるかと思います。

配列として定義したそれぞれの値は要素とよび、それぞれの要素にはインデックスが割り振られます。

インデックスは要素の位置を指し示すもので、先頭から0,1,2,3..と割り振られます。

上記の場合だと、りんごに0、みかんに1とインデックスが割り振られます。このインデックスを利用することで、要素の変更、取得が可能です。インデックスを利用して要素を変更、取得するには、[]にてインデックスを指定します。

index.js◎

...
console.log(fruits);
fruits[0] = 'バナナ';
console.log(fruits[0]);

配列に要素を追加する場合は、最後のインデックスの次のインデックス(上記の場合は2)を指定することで、追加することができます。

index.js◎

...
console.log(fruits[0]);
fruits[2] = 'パイナップル';
console.log(fruits);

配列の要素数を知りたい場合は、.lengthと繋げることで取得することができます。

index.js◎

...
console.log(fruits);
console.log(fruits.length);

配列に関しても、後のセクションにて詳細に説明します。

関数(Function)

同じ処理を複数回使う場合や、処理をグルーピングしてまとめたい場合は、関数を定義します。

関数は以下のように() => {}を使って定義します。呼び出す場合は、定義した関数名に()をつけます。

index.js◎

...
console.log(fruits.length);

const outputProductInfo = () => {
    console.log('こんにちは');
    console.log('みかんの値段は100円です');
};
outputProductInfo();

ブラウザにて以下のように確認できるかと思います。

こちらの関数にて出力されるみかんと、100の部分を変えたいとします。その場合は引数を受け取るようにします。引数を受け取るには、()の中に受け取った際に格納する変数名を記述し、その変数名を関数内で呼び出すことができます。また、(バッククォート)を使用し、``内で、${変数名}とすることで、変数を文字列に埋め込むことができます。こちらの構文をテンプレートリテラルと言います。

index.js◎

...
console.log(fruits.length);

const outputProductInfo = (productName, productPrice) => {
    console.log('こんにちは');
    console.log(`${productName}の値段は${productPrice}です`);
};

呼び出しの際には、()の中に渡したい値を引数の数だけ記述します。

index.js◎

...
const outputProductInfo = (productName, productPrice) => {
    console.log('こんにちは');
    console.log(`${productName}の値段は${productPrice}です`);
};
outputProductInfo('みかん', 100);
outputProductInfo('りんご', 150);
outputProductInfo('パイナップル', 200);

ブラウザにて以下のように確認できるかと思います。

上記の関数は、処理を行うだけの関数ですが、値を返却することができ、その場合は、returnを記述します。

index.js◎

...
outputProductInfo('パイナップル', 200);

const add = (a, b) => {
    return a + b;
};
console.log(add(1, 2));

※関数の書き方に関して、functionを使った書き方があり、機能的に若干の違いがあります。下記の記事にも記載されているのですが、特に理由がない場合は、上記のようなアロー関数で定義するのが良いかと思います。

従来の関数とアロー関数の違い | TypeScript入門『サバイバルTypeScript』typescriptbook.jp