「Expo JavaScript Style Guide」を読んでみる

Expoのコーディングスタイルガイドを読んで簡単に訳してみました。

Expoの開発へ参加する場合のルールやコーディングガイドが公開されています。 他のサービスでもこういったものは公開されていることがあると思います。

Contributing to Expo
Expo JavaScript Style Guide

個人開発でやっていると独自ルールになってしまい、後からソースを見たときに混乱するような状態になっていることがあります。

よく利用するサービスやシステムのルールに従うことで綺麗なソースを保つことも出来ますし、今時の現場のルールに触れることもできて良いのではないかと考えました。

私がよく利用していて、かつ開発も活発なExpoのjsコーディングルールを読んで訳していこうと思います。

概要

Expo JavaScript Style Guide

• Modern JavaScript

• ESLint and Prettier

  • Editor Integration

• Formatting

  • Prettier
  • Comments
  • Imports

• Naming

  • Classes, functions, and variables
  • Async functions
  • Private variables
  • Boolean names
• Examples
• BabelO

Modern JavaScript

jsはなるべく新しい、ES20xx仕様の安定バージョンを使用する。
「leading edge」すなわち先端の近く、「bleeding edge」最先端ではない。

ESLint and Prettier

Editor Integration

ESLintのプラグインを紹介
Vimの場合は以下

• Vim: Syntastic:
  https://github.com/vim-syntastic/syntastic/blob/master/syntax_checkers/javascript/eslint.vim
  Configure it to use the nearest available copy of ESLint by searching up node_modules

Syntasticのドキュメントを読み込んでいくとtypescript用のチェッカーは削除されているらしい。
tsuquyomiというプラグインを使ってくださいって書かれてました。

ESLIntとvim-syntasticをvimで使えるようにする

• ESLintのインストール

  npm install -g eslint

• vimで使えるようにする

  NeoBundle 'vim-syntastic/syntastic'
  " デフォルトの設定
  set statusline+=%#warningmsg#
  set statusline+=%{SyntasticStatuslineFlag()}
  set statusline+=%*
  let g:syntastic_always_populate_loc_list = 1
  let g:syntastic_auto_loc_list = 1
  let g:syntastic_check_on_open = 1
  let g:syntastic_check_on_wq = 0
  let g:syntastic_javascript_checkers = ['eslint']

Formatting

Prettier

コードのフォーマットにはPrettierを使用。
Prettier

設定ファイルはexpoのリポジトリにあります。
.prettier

ファイル単位でPrettierを無効にする設定ファイルもexpoのリポジトリにあります。
.prettierignore

Prettierをvimで使えるようにする

• Prettier のインストール

  npm install -g prettier

• vimで使えるようにする
  vimrcに以下を追加、<leader>pで発動する

  NeoBundle 'prettier/vim-prettier'
  " expoのリポジトリにあるprettierrcを参照
  let g:prettier#config#print_width = 100
  let g:prettier#config#single_quote = 'true'
  let g:prettier#config#jsx_bracket_same_line = 'true'
  let g:prettier#config#bracket_spacing = 'true'
  let g:prettier#config#trailing_comma = 'es5'

Comments

以下サンプルを引用

/**
 * Gets the latest version of Android that's been released. This is a version
 * string like 7.1 instead of the code name Nougat.
*/
function getLatestAndroidVersion() {
  // Keep this logic in sync with Google's versioning scheme
  return maxBy(getAndroidVersions(/* includePrereleases */ false), linearizeSemver);
}

• 行でのコメントアウト使う
• クラスや関数や連想配列の上ではブロックコメントを使う
• 行途中ではインラインのコメントも使う
• コメントアウトされたコードを削除してからGitHubにプッシュ

Imports

importとrequireを次の順序でグループ化、ソートする。

1. importが先、requierが後
2. Unassignedが先、assignedが後
3. nodejsビルトインが先、エイリアスのある内部モジュールが次、相対モジュールが後

import 'side-effect';

import invariant from 'invariant';
import Expo, { Audio } from 'expo';
import path from 'path';

import HomeScreen from '../screens/HomeScreen';
import Colors from '../style/Colors';
import calculateViewport from '../style/calculateViewport';
import LoginButton './LoginButton';

const assert = require('assert');

インポートされたモジュールの名前でソート、割り当てられた名前ではなく元の名前。
ASCII順なのでA-Za-zの順にする。

import Z from 'Z';
import b from 'x';
import a from 'y';
import p from '@scope/package';

デフォルトのインポートが先、名前空間でのインポートが次、名前付きインポートが後。

import a, * as b, { c } from 'module';

Naming

検索しやすい名前を心がける

Classes, functions, and variables

• すべての名前にキャメルケースを使用。
• クラスとコンストラクター関数は大文字初め、他は小文字で始める

Async functions

非同期で完了する場合は最後に「Async」を付ける
関数自体に「async」が設定されていなくても、同じような動作をする場合は「Async」を最後に付ける
同期作業を行うが、それでもpromiseを返すことがある場合は「Async」を省略してよい

Private variables

プライベートに使う変数はアンダースコアを付ける。

Boolean names

bool変数には「is」とか動詞を先頭につけて命名する。deletedではなくisDeletedにする。

Examples

Expo JavaScript Style Guideを参照

Babel

Babelをつかって新しいjsの機能を有効にしている。対象はfinalized version of the JavaScript standard.

おわりに

これからjs書くときはこのルールにしたがってプログラミングをしていこうと思います。
ESLint と Prettierをvimで使えるように設定しました。 ルールを意識しながらプログラムを書くことはもちろんですが、これらの便利なツールでチェック・整形していくことができます。そう考えるとそれほど面倒な作業もなさそうです。

あとは、すでに書いてあるものもルールに従ってリファクタリングしよう、そう思いました。