お問い合わせ
お問い合わせ
ホーム > JavaScript > コードをスッキリさせる！モダンJavaScriptの書き方ガイド

コードをスッキリさせる！モダンJavaScriptの書き方ガイド

JavaScript
深い青と紫のグラデーション背景に、中央に光り輝くJSロゴと、そこから広がるモダンなコード（const, let, map()など）と幾何学的なライン。左側に白い日本語で「コードをスッキリさせる！ モダンJavaScript の書き方ガイド」というタイトルが書かれたアイキャッチ画像。
コードをスッキリさせる！モダンJavaScriptの書き方ガイド

現代のWeb開発において、JavaScriptの書き方は日々進化しています。以前の標準だった書き方から、より短く、読みやすく、そしてエラーを防ぎやすい「モダンな書き方」へと移行することが推奨されています。

本記事では、コードを劇的にスッキリさせるための主要なテクニックを厳選して紹介します。

変数宣言は const と let を使い分ける

かつては var による変数宣言が一般的でしたが、現在は const と let を使うのが基本です。

再代入の有無で区別する

  • const: 値の書き換え（再代入）を行わない場合に使用します。
  • let: ループのカウント変数など、値を書き換える必要がある場合に使用します。
// モダンな書き方
const taxRate = 0.1;
let subtotal = 1000;

subtotal = 1100; // letなら再代入可能

var を避けることで、意図しない変数の重複定義や、スコープによるバグを未然に防ぐことができます。

アロー関数で記述をシンプルにする

関数を定義する際、function キーワードを省略できる「アロー関数」が広く使われています。

記述の比較

従来の関数定義に比べ、タイピング量が減るだけでなく、処理内容が直感的に把握しやすくなります。

// 従来の書き方
const double = function(num) {
  return num * 2;
};

// アロー関数（モダンな書き方）
const doubleArrow = (num) => num * 2;

console.log(doubleArrow(10)); // 20

引数が一つの場合は括弧を省略したり、処理が一行であれば return を省略したりすることも可能です。

[JavaScriptの関数とは？基本と使い方を徹底解説]

テンプレートリテラルで文字列結合をスムーズにする

文字列の中に変数を埋め込む際、プラス演算子（+）で繋ぐ方法はコードが煩雑になりがちです。テンプレートリテラルを使うと、バッククォート（`）で囲むだけで直感的に記述できます。

変数の埋め込み

${変数名} という記法で、文字列内に直接変数を展開できます。

const userName = '田中';
const point = 500;

// テンプレートリテラル
const message = `${userName}様の現在のポイントは ${point}pt です。`;

console.log(message);

改行もそのまま反映されるため、HTML要素をJavaScript側で組み立てる際にも非常に便利です。

分割代入でオブジェクトから必要な値を取り出す

オブジェクトや配列から特定のプロパティを取り出して変数に代入する場合、分割代入を使うとコードが大幅に短縮されます。

オブジェクトの分割代入

プロパティ名と同じ変数名を用意することで、一行で複数の値を抽出できます。

const user = {
  id: 1,
  name: '佐藤',
  email: 'satou@example.com'
};

// 分割代入
const { name, email } = user;

console.log(name);  // 佐藤
console.log(email); // satou@example.com

[効率的なデータ操作：オブジェクトと配列の応用テクニック]

配列メソッド（map, filter）を活用する

for 文を使ったループ処理の多くは、配列メソッドに置き換えることができます。これにより「何をするための処理か」が明確になります。

map と filter

  • map: 配列の要素を加工して新しい配列を作る
  • filter: 条件に合う要素だけを抽出して新しい配列を作る
const numbers = [1, 2, 3, 4, 5];

// 偶数だけを取り出して2倍にする
const result = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2);

console.log(result); // [4, 8]

ループのカウンタ（i++ など）を管理する必要がなくなるため、記述ミスが減り、可読性が向上します。

スプレッド構文で配列やオブジェクトを操作する

ドット3つ（...）を使うスプレッド構文は、配列の結合やコピー、オブジェクトの統合に非常に役立ちます。

配列の結合

既存の配列を汚さずに、新しい要素を追加した配列を簡単に作成できます。

const fruits = ['apple', 'banana'];
const newFruits = [...fruits, 'orange'];

console.log(newFruits); // ["apple", "banana", "orange"]

元のデータを保護しながら新しい状態を作る「不変性（イミュータビリティ）」を保つのに最適な手法です。

まとめ

モダンJavaScriptの書き方を取り入れることで、コードの見た目がスッキリするだけでなく、メンテナンス性の高いプログラムを構築できるようになります。まずはテンプレートリテラルや分割代入など、取り入れやすいものから実践していくことが推奨されます。

関連記事