エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

重要だけど忘れそうなJavaScriptの記法メモ

はじめに

Reactを勉強する中でJavaScriptの記法を利用している。

その中でよく出てきた、超基本の重要なJavaScript記法をメモしておく。今後、何か月か勉強をお休みすることがあると忘れそうなため。

前提

以下の例に記載してるものは、参考環境の説明章で述べるindex.jsに記載しているもの。

アロー関数

こんな文法で無名関数がつくれる。

( 引数 ) => { 処理 }

非常に重要かつ、私自身が罠にはまったので、別記事にまとめている。

tomiko0404.hatenablog.com

テンプレート文字列

文字列と変数を結合して出力したいときの書き方。

古い書き方だと、文字列はダブルクォーテーション""でくくり、変数はそのまま記載したものを+で結合する。

これだと読みにくいのでテンプレート文字列という書き方がある。

  • 全体を``(バッククォート)で囲む。
  • 変数を使いたいときは${変数名}と記載する。

index.js

const math = 90;
const japanese = 60;
const english = 85;

// 古い書き方
console.log(
    "算数:" + math + "点、国語:" + japanese + "点、英語:" + english + "点です。平均は" + (math + japanese + english) / 3 + "点です。"
);

// テンプレート文字列を利用した書き方
console.log(
    `算数:${math}点、国語:${japanese}点、英語:${english}点です。平均は${(math + japanese + english) / 3}点です。`
);

出力結果は以下。

算数:90点、国語:60点、英語:85点です。平均は78.33333333333333点です。
算数:90点、国語:60点、英語:85点です。平均は78.33333333333333点です。

分割代入

オブジェクトや配列の中身を変数に代入する方法。

オブジェクトの場合

オブジェクトの項目名に合わせた変数名で取得できる。

const point = {
    math: 90,
    japanese: 60,
    english: 85,
    science: 95,
    social: 55,
};
// オブジェクトの分割代入
const {math, japanese, english} = point;

console.log(
    `(point)算数:${math}点、国語:${japanese}点、英語:${english}点です。`
);

配列の場合

配列の場合は以下の通り、順番通りに分割代入できる。 代入の際にはオブジェクトの場合と異なり[]で囲む。

また、配列の前半に変数に代入する必要がないレコードがある場合は、以下のように変数名を入れなくてもよさそう。

const pointArray = [90, 60, 85, 95, 55];

// 配列の分割代入
const [, , , science, social] = pointArray;
console.log(`(pointArray)理科:${science}点、社会:${social}点です。`);

出力結果はオブジェクト分割代入のコードと合わせて以下の通り。

(point)算数:90点、国語:60点、英語:85点です。
(pointArray)理科:95点、社会:55点です。

上記の例のように使うシーンがあるかは不明だが、Reactでは

[num, setNum]=useState(0);

というように、公式の関数から値や関数を取り出すときにたくさん利用する。

スプレッド構文

配列の中身を1個ずつ取り出す構文。

...[配列名]

正確な記載ではないのだが、array1 = [1,2,3,4,5];に対して、...array1と書くと、1,2,3,4,5という扱いになる。とざっくり思っている。

配列の一番後ろに要素を足す(よく使うやり方)

let messages = [
    "こんにちは",
    "元気ですか",
    "はい元気です",
    "テストどうでしたか",
];

messages.forEach((i) => console.log(i));
console.log("------------------------")

// スプレッド構文でmessagesを展開してから結合
messages = [...messages, "まあまあです"];

messages.forEach((i) => console.log(i));

出力結果は以下の通り。

こんにちは
元気ですか
はい元気です
テストどうでしたか
------------------------
こんにちは
元気ですか
はい元気です
テストどうでしたか
まあまあです

オブジェクトのの一番後ろに要素を足す

オブジェクトでも同様に要素を足すことができる。

let point = {
    math: 90,
    japanese: 60,
    english: 85,
    science: 95,
    social: 55,
};

console.log(point);

// スプレッド構文でオブジェクトの要素を追加
point = { ...point, music: 100 };
console.log(point);

出力結果は以下の通り。

出力結果
出力結果

関数の引数にも利用できる

あまり利用シーンは無いように感じられるが、配列から1要素ずつ取り出すので以下のようなこともできる。

const pointArray = [90, 60, 85, 95, 55];
const pointAvg = (p1, p2, p3, p4, p5) => (p1 + p2 + p3 + p4 + p5) / 5;

// スプレッド構文で90, 60, 85, 95, 55を引数に入れる
console.log(`5教科の平均点は${pointAvg(...pointArray)}点です。`);

出力結果は以下の通り。

5教科の平均点は77点です。

map構文

配列の1個1個の要素に対して処理を記載できる。再頻出でかなり重要。

mapの引数には関数を入れる。この関数は、第一引数に配列の各要素、第二引数に配列のインデックスが設定された関数である。

let messages = [
    "こんにちは",
    "元気ですか",
    "はい元気です",
    "テストどうでしたか",
];

// map関数でmessagesの各要素に対して処理
messages.map((data, index) => {
    console.log(index + ":" + data);
});

ここで利用しているアロー関数では、先ほど述べた罠にはまらないように注意。

出力結果は以下の通り。

0:こんにちは
1:元気ですか
2:はい元気です
3:テストどうでしたか

参考までに、以下の記事ではHTMLの<li>要素に各要素を入れて返却したい箇所で利用している。

<ul>
    {messageList.map((data, index) => {
        return <li key={index}>{data}</li>;
    })}
</ul>

tomiko0404.hatenablog.com

参考:環境の説明

プロジェクトフォルダを作成し、その中に

  • index.html
  • index.js

の2ファイルを作成する。

index.htmlをブラウザで表示し、ボディ部でindex.jsを呼び出す。

index.html

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Javascriptのメモ</title>
    </head>
    <body>
        <!-- ★★bodyタグの中にscriptタグを記載 ★★-->
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

おわりに

Reactの勉強を進めることで、JavaScriptの文法はだいぶ頭に入ってきた。 忘れたときにはこの記事が参考になると良いと思います。