本サイトではアフィリエイト広告を利用しています。

2019/10/25

「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を次の順序でグループ化、ソートする。

importが先、requierが後
Unassignedが先、assignedが後
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で使えるように設定しました。ルールを意識しながらプログラムを書くことはもちろんですが、これらの便利なツールでチェック・整形していくことができます。そう考えるとそれほど面倒な作業もなさそうです。

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