JavaScriptでは、少し工夫するだけでコードを1行にまとめることができます。
短くシンプルなコードは可読性を上げたり、開発効率を高めたりするのにとても役立ちます。
この記事では、覚えておくとすぐ使える1行テクニックを厳選して紹介します！
三項演算子で条件分岐を1行に
const result = score >= 80 ? '合格' : '不合格';通常のif-else文を三項演算子でスマートにまとめます。
シンプルな条件分岐ならこれで十分です。
論理演算子でデフォルト値を設定
const username = inputName || 'ゲスト';inputNameが空だった場合に**「ゲスト」**を設定する例です。
未入力や未定義時の初期値設定によく使われます。
スプレッド構文で配列をコピー
const copy = [...originalArray];配列をそのままコピーしたいときに。
参照ではなく、新しい配列を作りたい場合に便利です。
filter()で特定条件の要素だけ抽出
const adults = users.filter(user => user.age >= 18);年齢が18歳以上のユーザーだけを抽出しています。
条件に合う要素を簡単に絞り込みできます。
map()で配列を変換
const names = users.map(user => user.name);配列の各要素から特定のプロパティだけを取り出すときに使えます。
データ加工の基本です。
includes()で要素の存在をチェック
const hasItem = items.includes('りんご');配列や文字列に、特定の要素が存在するかを確認できます。
直感的で読みやすいコードになります。
アロー関数で即時実行
(() => console.log('Hello!'))();小さな関数をすぐ実行したいときに役立つテクニックです。
IIFE（即時実行関数式）をアロー関数で短く書けます。
Object.keys()でオブジェクトのキー一覧を取得
const keys = Object.keys(user);オブジェクトのプロパティ名を配列で取得できます。
フォームデータやAPIレスポンスの処理などで活躍します。
文字列を数値に変換
const num = +'123';文字列を数値に変換するには+を付けるだけ。
意外と知られていない超省略テクニックです。
ループ処理を短く書く
[...Array(5)].forEach((_, i) => console.log(i));for文を書かなくても、0〜4のループを作成できます。
ちょっとしたループ処理に便利です。
まとめ
avaScriptの1行テクニックを活用すると、
コードが短くなり、シンプルで見やすくなります。
ただし、すべてを無理に1行にまとめると読みにくくなることもあるので、
可読性とのバランスを考えながら取り入れていきましょう！
