JavaScriptのオブジェクトリテラルの前後にスペースを含めるべきか否か

波括弧(curly brace)のオブジェクトリテラルを 1 行で書く場合の話。

const withSpace = { name: 'yamada', locale: 'JP' };  // 空白あり
const withoutSpace = {name: 'yamada', locale: 'JP'}; // 空白なし

🤔 実は規定がない

どれを見ても『オブジェクトリテラルを 1 行で書く場合』の規定がない。

• Google JavaScript Style Guide
• Airbnb JavaScript Style Guide
• Node.js Style Guide

ただし、いろいろなオープンソースのコードを見る限りでは、スペースありで書くケースの方が多いようだ。

🦉 スペースなしの方が一貫性がある

配列リテラルとオブジェクトリテラルを比べた場合、複数行で書く場合はこうなって同じ形式が使えるけど

const array = [
  'apple',
  'google',
  'facebook',
  'amazon',
];

const obj = {
  name: 'apple',
  ceo: 'timothy donald cook',
};

配列リテラルを単一行で書く場合は前後にスペースを含めないので、オブジェクトリテラルもこれに合わせた方が一貫性があるという考え。

const array = ['apple', 'google', 'facebook', 'amazon'];
const obj = {name: 'apple', ceo: 'timothy donald cook'};

📝他の言語の場合

🍷 Ruby

Ruby Style Guide にはハッシュリテラル（JavaScriptでいうオブジェクトリテラルのこと）の書き方について記述されているが、好きな方を使えというスタイル。
Ruby 界隈でも JavaScript と同じようにスペースありで記述されているケースが多い。しかし、Ruby にはブロック構文が存在する。

array = ['apple', 'google', 'facebook', 'amazon']

array.each do |name|
  p name
end

array.each { |name|  p name }

ブロックを複数行で書く場合は do...end で記述することが推奨されるが、単一行で書く場合は波括弧が推奨される。
ブロック構文とハッシュリテラルの明確な区別のため、スペースなしの方が良いと考える。

🐍 Python

Python の場合は明確に「空白を入れるな」と規定されている。

• Google Python Style Guide
• PEP 8

今回のブログ記事も Python の書き方を学んだときに確かにそっちの方が一貫性あるな、と感じたので他の言語でも採用することにした。

🦋 ES6 と TypeScript の普及で使う機会が増えた

import 文で分割代入(Destructuring assignment)構文が多用されるので、単一行のオブジェクトリテラルを使うケースがかなり増えた。この機会に一貫させてスッキリさせようと思う。

import {DateUtil} from 'luxon';
import {Get, Controller, UseInterceptors} from '@nestjs/common';

🐹 Prettier でコードフォーマットする

ESLint や TSLint に単一行オブジェクトリテラルに対して警告を出す機能はないが、Prettier にはコードフォーマットさせるための bracketSpacing オプションが存在する。

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false
}

$ yarn global add prettier
$ prettier --write '**/*.ts'