【JavaScript】1行で書ける便利テクニック10選

JavaScriptは、少し工夫すると処理を1行でスッキリ書けます。よく使う便利な1行テクニックを10個、厳選して紹介します。

三項演算子で条件分岐を1行に

const result = score >= 80 ? '合格' : '不合格';

シンプルな if-else は三項演算子でまとめられます。条件が単純なときに向いています。

デフォルト値を設定する（?? がおすすめ）

const username = inputName ?? 'ゲスト';   // null / undefined のとき 'ゲスト'
const old      = inputName || 'ゲスト';   // 0 や '' も 'ゲスト' になる

スプレッド構文で配列をコピー

const copy = [...originalArray];

参照ではなく新しい配列を作れます（浅いコピー）。オブジェクトの複製も { ...obj } で同様に書けます。

filter()で条件に合う要素を抽出

const adults = users.filter((user) => user.age >= 18);

条件に合う要素だけを絞り込みます。最初の1件だけなら find() が便利です（配列から条件に合う要素を取り出す方法）。

map()で配列を変換

const names = users.map((user) => user.name);

各要素を別の形に変換します。集計の reduce とあわせてmap・filter・reduceの使い方で詳しく解説しています。

includes()で存在チェック

const hasItem = items.includes('りんご');

配列や文字列に特定の要素が含まれるかを、true / false で直感的に判定できます。

アロー関数で即時実行（IIFE）

(() => console.log('Hello!'))();

その場で1回だけ実行したい小さな処理に。IIFE（即時実行関数式）をアロー関数で短く書けます。

Object.keys()でキー一覧を取得

const keys = Object.keys(user);

オブジェクトのプロパティ名を配列で取得します。値の一覧は Object.values()、両方なら Object.entries() です。

文字列を数値に変換する

const num = +'123';      // 123（単項プラスで変換）
const num2 = Number('123'); // 123（読みやすさ重視ならこちら）

+ を付けるだけで数値化できます。ただし +'' は 0、+'12px' は NaN になる点に注意します。詳しくは文字列を数値に変換する方法を参照してください。

短いループを書く

[...Array(5)].forEach((_, i) => console.log(i)); // 0〜4

for を書かずに、決まった回数のループを作れます。Array.from({ length: 5 }, (_, i) => i) でも同じことができます。

おまけ：さらに便利な1行

定番の10個に加えて、知っておくと差がつくモダンな1行も紹介します。

1行テクニック早見表

よく使う1行をまとめました。コピーして使ってください。

よくある質問（FAQ）

まとめ

JavaScriptの1行テクニックを使うと、コードが短くシンプルになります。三項演算子・??・スプレッド・配列メソッドなどは、短くても読みやすい定番です。

ただし、すべてを無理に1行にまとめると逆に読みにくくなります。可読性とのバランスを考えながら、意図が伝わる書き方を選びましょう。