Honmushi blog
「Expo JavaScript Style Guide」を読んでみる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の場合は以下

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

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

  • このエントリーをはてなブックマークに追加