重要だけど忘れそうなJavaScriptの記法メモ
はじめに
Reactを勉強する中でJavaScriptの記法を利用している。
その中でよく出てきた、超基本の重要なJavaScript記法をメモしておく。今後、何か月か勉強をお休みすることがあると忘れそうなため。
前提
以下の例に記載してるものは、参考環境の説明章で述べるindex.js
に記載しているもの。
アロー関数
こんな文法で無名関数がつくれる。
( 引数 ) => { 処理 }
非常に重要かつ、私自身が罠にはまったので、別記事にまとめている。
テンプレート文字列
文字列と変数を結合して出力したいときの書き方。
古い書き方だと、文字列はダブルクォーテーション""
でくくり、変数はそのまま記載したものを+
で結合する。
これだと読みにくいのでテンプレート文字列という書き方がある。
- 全体を
``
(バッククォート)で囲む。 - 変数を使いたいときは
${変数名}
と記載する。
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>
参考:環境の説明
プロジェクトフォルダを作成し、その中に
- 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の文法はだいぶ頭に入ってきた。 忘れたときにはこの記事が参考になると良いと思います。