Zenn
👏

【イラスト付き】JavaScript便利文法【丁寧に解説】

2024/09/04に公開
JavaScript
tech

はじめに

皆さんこんにちは。

今回はJavaScriptの知っておくと便利な文法をご紹介します。

今回ご紹介する内容は、知らなくてもコーディングはできます。また、別の書き方で解決できてしまうものもあります。ただし知っておくとコーディングの効率も上がりますので、是非確認していただきたい内容になっています。

こんな人にオススメ

  • よく知られてる便利な機能を知りたい
  • JavaScriptのコードをもっと簡潔にしたい

初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。

😋 便利な上にわかりやすいコードになります♪

switch-case文

まずポイントをチェック

  • 値自体を基準に分岐する
  • 選択肢が複数ある場合に便利
  • if文は条件で分岐するための記述

switch-case文は値自体を基準にして分岐するための構文です。分岐の基準になる値のパターンが複数ある場合に便利です。

🍕 例えば、国名に応じて首都を表示する処理を作る場合、国名が分岐の基準になる値になります。

switch-caseの書き方

  • switchの右側の丸カッコに基準になる値を指定
  • caseには分岐後の処理を指定
    • caseの右側には値のパターンを指定
    • caseは分岐の数だけ用意する
    • コロンの右側から分岐後の処理を記述
    • 処理の最後には必ずbreakを配置
  • defaultは該当するcaseがない場合に利用される処理
    • defaultは必須ではない
    • ただし配置しておくことで想定外の値にも対応可能
switch (変数) {
  case 値:
    処理
    break;
  default:
    処理
}
サンプルコード（国名を基準に分岐）
// 国名を基準に分岐
const country = prompt('国名を入力してね');
switch (country) {
  case '日本':
    console.log('東京');
    break;
  case 'アメリカ':
    console.log('ワシントンDC');
    break;
  case 'フランス':
    console.log('パリ');
    break;
  default:
    console.log('該当なし');
}

😋 選択肢が複数ある際の分岐に使います♪

条件演算子（三項演算子）

まずポイントをチェック

  • 条件によって値を出し分けることができる
  • if文は条件によって処理を分岐するための記述

条件演算子は条件によって２つの値のどちらかを出し分けることができます。条件演算子の記述は1行で行うため、コードの見た目もスッキリすることができます。

条件演算子の書き方

  • 条件を？の前に記述
    • 条件はboolean型の値を指定
  • コロンの左側にtrueの場合の値を記述
  • コロンの右側にfalseの場合の値を
const 変数名 = 条件 ? trueの値 : falseの値;
サンプルコード（正負の判断によって値を出し分ける）
// プラスかマイナスの文字列を取得する
const num = 10;
const result = num >= 0 ? 'プラス' : 'マイナス';

😋 状況に応じて値を変えたい時に便利です♪

バッククォートでの文字列

まずポイントをチェック

  • バッククォートの文字列は改行をそのまま表現できる
  • バッククォートの文字列は値を埋め込むことができる

JavaScriptの文字列表現は通常はシングルクォートかダブルクォートを利用します。バッククォートの文字列はシングルクォートやダブルクォートにはない仕様があります。

シングルクォートの文字列は改行をそのまま表現することができます。

シングルクォートでの改行の書き方

  • 文字列内で改行を入れる
// 文字列に改行を入れる
const lines = `1line
2line`;

シングルクォートの文字列は文字列の中に値を埋め込むことができます。この構文はテンプレートリテラルと言います。

シングルクォートでの値埋め込みの書き方

  • 文字列内で${変数名}を入れる
// 値を埋め込む
const message = 'Hello';
const sentence = `He said ${message}`;

😋 テンプレートリテラルは利用頻度の高い構文です♪

分割代入

まずポイントをチェック

  • オブジェクトや配列から簡潔に個別の値を取り出せる
  • オブジェクトと配列で記述方法がほんの少し異なる

分割代入はオブジェクトや配列から個別に値を取り出す際に便利な構文です。オブジェクトと配列で書き方や挙動が少々異なるのでそれぞれご紹介します。

オブジェクトの分割代入の書き方

  • 変数宣言を中カッコで囲む
  • 中カッコ内には取り出したいプロパティ分の変数を宣言
  • イコールの右側には元になるオブジェクトを指定
  • 変数の右側にコロンで区切って別名を指定することで、別名を付けることができる

変数名とプロパティ名の対応により自動的に同名の変数にプロパティの値が代入されます。

const { プロパティと同名の変数, 複数ある場合はカンマ区切り } = オブジェクト;
サンプルコード（オブジェクトからプロパティの値を取り出す）
// オブジェクトの分割代入
const obj = { title: 'sample', price: 100 };

const { title, price } = obj;

const { title : another, price } = obj; // titleをanotherという別名で扱う

😋 特定のプロパティをまとめて取り出すのに便利です♪

続いて配列の分割代入についてご紹介します。

配列の分割代入の書き方

  • 変数宣言を角カッコで囲む
  • 角カッコ内には取り出したい要素数分の変数を宣言
  • イコールの右側には元になる配列を指定

変数宣言の順番と要素の順番の対応により自動的に変数に各要素が代入されます。

const [要素を受け取る変数, 複数の場合はカンマ区切り] = 配列;
サンプルコード（配列から要素を取り出す）
// 配列の分割代入
const arr = ['A', 'B'];
const [val1, val2] = arr;

😋 配列の中身をまとめて取り出す際に便利です♪

分割代入の応用として、関数の引数で利用する方法をご紹介します。

配列の分割代入の書き方

  • 関数の引数宣言を中カッコもしくは角カッコで囲む
    • 引数がオブジェクトの場合は中カッコ
    • 引数が配列の場合は各カッコ

引数の時点で分割代入することで、関数内ではオブジェクトや配列を意識せずに済みます。

function 関数名 ({プロパティと同名の変数, 複数ある場合はカンマ区切り}) {処理}
function 関数名 ([要素を受け取る変数, 複数の場合はカンマ区切り]) {処理}
サンプルコード（オブジェクトや配列の引数を分割代入で受け取る）
// 引数を分割代入で受け取る
const getObj = ({ title }) => console.log(title);
const getArr = ([val1]) => console.log(val1);

😋 関数内にオブジェクト名や配列名が出てこないのでスッキリします♪

スプレッド構文

まずポイントをチェック

  • オブジェクトや配列の中身のコピーを取り出すことができる
  • 同じ値を持つ別のオブジェクトや配列を作成できる

スプレッド構文はオブジェクトや配列の中身を全てコピーして取り出す構文です。スプレッドという言葉は展開するという意味なので、文字通り中身を展開するための構文です。

スプレッド構文を使うと同じ値を持った新しいオブジェクトや配列を作成することができます。オブジェクトや配列のコピーを作りたい場合に利用できます。

スプレッド構文の書き方

  • オブジェクトや配列の前に「…」を付けるだけ

「…」をつけたオブジェクトや配列の中身を展開することができます。

...オブジェクト;
...配列;

スプレッド構文を利用し、次のようなことができます。

  • 新しい値を追加しつつ新しいオブジェクトや配列を生成
  • 新しいオブジェクトを生成する際に、特定のプロパティの値を更新
    • オブジェクトは同名のプロパティを複数用意すると最後のものが採用されるため、特定のオブジェクトのみ値を更新することもできます。
サンプルコード（オブジェクトの場合）
const obj = { title: 'sample', price: 100 };
const copyObj = { ...obj }; // 中身をコピー
const newObj = { ...obj, isOk: true }; // isOkプロパティを追加
const updateObj = { ...obj, title: 'new' }; // titleプロパティを更新
サンプルコード（配列の場合）

const arr = ['A', 'B'];
const copyArr = [...arr]; // 中身をコピー
const newArr = [...arr, 'C']; // 要素を追加

😋 既存のオブジェクトや配列を汚さないで新しいものを用意できます♪

オブジェクトの省略表現

まずポイントをチェック

  • オブジェクトの宣言時にプロパティの省略表現がある
  • プロパティ名と同名の変数をプロパティの値として利用する場合に省略可能

オブジェクトを宣言する際にプロパティの記述を省略することができます。

オブジェクト宣言の省略表現の書き方

  • 省略の条件はプロパティ名と値に設定する変数名が一致していること
  • 条件を満たしている場合、プロパティ名だけで宣言可能
{ プロパティと同名の変数, 複数の場合はカンマ区切り };
サンプルコード（オブジェクトの省略表現）
const title = 'sample';
const price = 100;
const obj = { title, price }; // titleプロパティとpriceプロパティに同名の変数の値を利用

😋 指定した変数名と同じ名前のプロパティが用意されます♪

即時実行関数

まずポイントをチェック

  • 関数を定義してその場で実行できる
  • 昔は変数のスコープを制限するために利用していた

即時実行関数は関数を定義してすぐに実行するための構文です。関数を使い回さないで１度しか使わない場合は、即時実行関数の形式にすると便利です。

即時実行関数の書き方

  • 丸カッコで関数自体を囲む
  • その直後に丸カッコとセミコロンで実行
    • 必要であれば引数も指定可能
(関数)(引数);
サンプルコード（関数宣言と同時に実行）
(()=>{
    const message = 'Hello';
    console.log(message);
})();

😋 再利用しない場合に使える構文です♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

JavaScriptには記述を簡略化するための便利な仕組みが色々あります。直感的にコードを書けることがJavaScriptの強みでもありますので、こういった便利な記述も覚えていきましょう。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集（MDN Web Docs のリンク）

switch：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch
条件 (三項) 演算子：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
テンプレートリテラル (テンプレート文字列)：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals
分割代入：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
スプレッド構文：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
オブジェクト初期化子：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer
IIFE (即時実行関数式)：https://developer.mozilla.org/ja/docs/Glossary/IIFE

Discussion