JavaScriptのオブジェクトリテラルの前後にスペースを含めないほうが好き

波括弧（curly brace）のオブジェクトリテラルを単一行で書く場合の話。

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

🤔 実は規定がない

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

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

ただ、いろいろな GitHub のコードを見る限りでは、スペースありで書いてるプロジェクトの方が多い。でも個人的にはスペースなしで書いた方が良いと思っているという話。

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

配列リテラルとオブジェクトリテラルを比べた場合、複数行で書く場合は以下のように同じ形式になるけど

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 の書き方を学んだときに確かにそっちの方が一貫性あるな、と感じたので他の言語でも採用することにした。

🐾 Golang

Go 言語の構造体も以下のページのような感じで空白を含めない。go fmt で矯正される。

• Go by Example: Structs

🦋 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'