
react-native のプロジェクトで[react-styleguidist](https://github.com/styleguidist/react-styleguidist)を使う方法です。

コードのサンプルは本家の方に PR 送ったのでこちらの見てください。

- <https://github.com/styleguidist/react-styleguidist/tree/master/examples/react-native>

> 本家の方でコードが変わっている場合もあります。ご注意ください。

使っているライブラリなどのバージョンは次の通りです。

- expo: 32.0.0
- react-styleguidist: 8.0.6
- react: 16.5.0
- react-dom: 16.7.0
- react-native-web: 0.10.0
- @babel/core: 7.2.2

Expo を使ってますが、react-native のプロジェクトでも大まかな手順はほとんど同じだと思います。

## 動作の仕組み

react-styleguidist には react-native で動作させるための仕組みがないので、[react-native-web](https://github.com/necolas/react-native-web)を使って react-native の UI コンポーネントを Web で表示できるように変換して表示します。

簡単な図に表すと次のような仕組み  に  なっています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-react-styleguidist1.jpg)

通常は react-native は[Metro bundler](https://facebook.github.io/metro/)を通して実行可能な形式になりますが、react-native-web で動かす場合は、[Babel](https://babeljs.io/)を  使って  トランスパイルを行ってから、react-styleguidist で処理します。

## react-styleguidist の導入

### react-styleguidist とその  依存モジュールをインストール

react-styleguidist とその依存モジュールをインストールします。

```sh
npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/polyfill @babel/preset-env babel-loader babel-plugin-react-native-web file-loader metro-react-native-babel-preset react-dom react-native-web react-styleguidist webpack
```

注意点としては、react-native v0.57 から[babel-preset-react-native](https://www.npmjs.com/package/babel-preset-react-native)は[metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset)に置き換わっていて、Babel も 7 系を  使うようになっています。古いサンプルなどは依存関係のバージョンに注意してください。

> `react-art`が依存関係に見つからないというエラーが出る場合は、npm インストールしてください。

### styleguide.config.js を設定  する

styleguide.config.js を追加します。

```js
// styleguide.config.js
const webpack = require("webpack");

module.exports = {
  require: ["@babel/polyfill"],
  components: "src/**/[A-Z]*.js",
  webpackConfig: {
    resolve: {
      // auto resolves any react-native import as react-native-web
      alias: { "react-native": "react-native-web" },
      extensions: [".web.js", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: "babel-loader",
          exclude: [/node_modules/],
          options: {
            plugins: [
              "@babel/proposal-class-properties",
              "@babel/proposal-object-rest-spread",
              "react-native-web",
            ],
            presets: [
              "@babel/preset-env",
              "module:metro-react-native-babel-preset",
            ],
            babelrc: false,
          },
        },
        {
          test: /\.(jpe?g|png|gif)$/i,
          use: [
            {
              loader: "file-loader",
              options: {
                hash: "sha512",
                digest: "hex",
                name: "[hash].[ext]",
              },
            },
          ],
        },
        {
          test: /\.ttf$/,
          loader: "file-loader",
        },
      ],
    },
    // Most react native projects will need some extra plugin configuration.
    plugins: [
      // Add __DEV__ flag to browser example.
      new webpack.DefinePlugin({
        __DEV__: process.env,
      }),
    ],
  },
};
```


注意点としては、webpack の`resolve.alias`オプションで、`react-native`の参照先を`react-native-web`に置き換えている部分です。これで内部で宣言されている react-native 部分を react-native-web に豪快に置き換えています。

 実際のファイルはこちらです。

- <https://github.com/mitsuruog/react-styleguidist/blob/master/examples/react-native/styleguide.config.js>

これで`npm run styleguide`をすると、次のような画面が表示されます。
![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/react-native-react-styleguidist2.png)

## まとめ

最近、react-native を仕事で使うことが多いので react-styleguidist が動かせるかどうか調べてみました。

`react-native`の参照先を`react-native-web`に置き換えているため、実際の再現度など細かな部分で差異がありそうです。

- [react\-native\-web: Compatibility with React Native](https://github.com/necolas/react-native-web#compatibility-with-react-native)

> 自分の場合は、採用を検討した結果、`react-native-web`部分に不安があるので見送りました。


react-nativeでreact-styleguidistを使う


今回は、TypeScript の React プロジェクトと[react-styleguidist](https://react-styleguidist.js.org/)を一緒に使う方法についての紹介です。

紹介する内容は、こちらの Github で見ることができます。

- [mitsuruog/react\-styleguidist\-typescript\-demo: A sample for using react\-styleguidist, React and Redux\.](https://github.com/mitsuruog/react-styleguidist-typescript-demo)

## はじめに

react-styleguidist とは、「**style guide**」と呼ばれるドキュメントツールの一種です。

最近は、小さな React コンポーネントを積み重ねて巨大なアプリケーションを構築していくのですが、どんなコンポーネントがあるかを俯瞰的見るために、このようなツールを使います。

こちらで公式のサンプルを見ることができます。

- [React Styleguidist Example Basic Style Guide](https://react-styleguidist.js.org/examples/basic/)

> 個人的には、「**コンポーネントカタログ**」と言った方がバックエンドの人も理解してくれるので、こちらの呼び方をする方が多い。

## 基本セットアップ

まず、react-styleguidist をインストールします。

```sh
npm install --save-dev react-styleguidist
```

つぎに`package.json`の`scripts`の部分にタスクを追加していきます。

```json
{
  ...
  "scripts": {
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build"
  }
  ...
}
```

最後に`styleguide.config.js`を作成して、TypeScript のプロジェクトで動かすための設定を追加します。

```js
module.exports = {
  components: "src/shared/components/**/*.{ts,tsx}",
  webpackConfig: Object.assign({}, require("./webpack.config"), {}),
  propsParser: require("react-docgen-typescript").parse,
};
```

細かい内容はこちらです。

- `components`: コンポーネントとして扱うファイルを[glob](https://github.com/isaacs/node-glob)形式で指定します。
- `webpackConfig`: react-styleguidist は TypeScript のコンパイルができないので、Webpack の設定ファイルを指定します。
- `propsParser`: TypeScript の interface などの Props 情報をメタデータに変換するためのカスタム Paser です。

以上で、基本セットアップは完了しました。

コードのサンプルや使用例は、コンポーネントと同じディレクトリに`README.md`を作成します。

````typescript
// README.md

ここに説明```
<Lovely />
```;
````

そのあとに`npm run styleguide`をすると、スタイルガイドが見れるようになります。

## Redux と一緒に使う

Redux などのサードパーティ製のライブラリと一緒に使う場合は、既存のスタイルガイドの root コンポーネントを置き換える必要があります。
今回は割と需要がありそうな国際化ライブラリ[react\-intl\-redux](https://github.com/ratson/react-intl-redux)を使ってみました。

`Wrapper.tsx`という名前のコンポーネントを作成して、これで置き換えます。

```typescript
// src/styleguide/Wrapper.tsx

...

import { Provider } from "react-intl-redux";
import { addLocaleData } from "react-intl";
import * as jaLocale from "react-intl/locale-data/ja";

// add japanese localisation data
addLocaleData([...jaLocale]);

... (Redux storeの準備)

// デフォルトの言語設定
store.dispatch(langSwitchAction("ja"));

export default class Wrapper extends React.Component<{}, {}> {
  render() {
    return (
      <Provider store={store}>
        {this.props.children}
      </Provider>
    );
  }
}
```

Redux の Store の準備は、プロジェクトのエントリポイントのファイル(通常は`entry.tsx`とか`index.tsx`)にあると思うので、そのまま使えると思います。
いろいろ割愛しているので、詳細はこちらのコードを見てください。

- <https://github.com/mitsuruog/react-styleguidist-typescript-demo/blob/master/src/styleguide/Wrapper.tsx>

作成したコンポーネントを`styleguide.config.js`に設定します。

```diff
module.exports = {
  ...
+  styleguideComponents: {
+    Wrapper: __dirname + "/src/styleguide/Wrapper.tsx",
+  },
  ...
};
```

これでサードパーティ製のライブラリと一緒に使うことができるようになりました。

## Connect コンポーネントを使うための工夫

> この工夫は必要ない人もいると思います。ただカスタマイズが必要になった場合に必要な知識なので、頭の片隅にでも覚えておくといいと思います。

プロダクトの構成次第ですが、自分の場合はコンポーネントに関連するファイル一式を同じフォルダに管理しています。

```txt
Lovely
  Lovely.tsx
  Lovely.connect.tsx
  Lovely.scss
  Lovely.spec.tsx
  README.md
```

このような構成をとった場合、(`styleguide.config.js`の`components`の設定次第ではありますが)`Lovely.tsx`と`Lovely.connect.tsx`の 2 つがスタイルガイド上に登場してしまいます。

そのため、`components`プロパティをもう少しカスタマイズする必要が出てきます。
`components`プロパティは基本的に[node-glob](https://github.com/isaacs/node-glob)で対象となったコンポーネントのリストがあればいいので、これに関数を渡してカスタマイズします。

```js
module.exports = {
  ...
  components: () => {
    return glob.sync("src/shared/components/**/*.{ts,tsx}").filter(file => {
      // Take only connect component if exists, ignore others.
      if (file.match(/connect.tsx$/)) {
        return true
      } else {
        const pathObject = path.parse(file);
        pathObject.ext = `.connect${pathObject.ext}`
        const { root, dir, ext, name } = pathObject;
        return !fs.existsSync(path.format({ root, dir, ext, name }));
      }
    });
  },
  ...
};
```

同じフォルダに`connect.tsx`があったら、これをスタイルガイドのコンポーネントとして使うだけのコードです。
ご自身の環境に合わせてさらにカスタマイズすることもできます。

最後に`README.md`で使うコンポーネントを調整する必要があります。

README.md の Example プロックの中では、`require`でモジュールをロードして使えるので、次のように Connect コンポーネントを直接呼び出して利用します。

````typescript
// README.md

```
const FormattedMessage = require("react-intl").FormattedMessage;
const LangSwitch = require("./LangSwitch.connect").default;
<div>
  <LangSwitch />
  <p><FormattedMessage id={"greeting"} /></p>
</div>
```;
````

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/react-styleguidist01.gif)

他にもできることがあるので、詳しい説明は公式ドキュメントを見てください。

- [Documenting components — React Styleguidist](https://react-styleguidist.js.org/docs/documenting.html#writing-code-examples)

## まとめ

TypeScript の React プロジェクトと[react-styleguidist](https://react-styleguidist.js.org/)を一緒に使う方法についての紹介でした。

> (余談)
> すこし前までは、[create\-react\-app](https://github.com/facebook/create-react-app)で作成したアプリケーションは`webpack.config.js`を取り出す手段がなかったので、仕方なく eject していまいたが、今は必要ないようです。素晴らしい。
>
> - [Configuring webpack — React Styleguidist](https://react-styleguidist.js.org/docs/webpack.html#create-react-app-typescript)


TypeScriptのReactプロジェクトでreact-styleguidistを使う

仕事が忙しくアドベントカレンダーシーズンに乗り遅れてしまいました。数年ぶりに平穏な 12 月を過ごしております。

> と思ったら[JavaScript その 2 Advent Calendar 2015 - Qiita](http://qiita.com/advent-calendar/2015/javascript2)の 7 日目が開いていたので急遽参加 w

ところで、[Javascript のスタイルガイドでは割と有名な Airbnb](https://github.com/airbnb/javascript)の日本語訳をしているのですが、最近本家のスタイルガイドが ES6 対応していたので、日本語訳の方もアップデートしました。

[Javascript\-style\-guide](http://mitsuruog.github.io/javascript-style-guide/)

スタイルガイドを ES6 にアップデートする過程で、私なりに ES6 でより良いコードを書くために気づいた点、注意する点などピックアップして紹介したいと思います。  
この記事は、ES6 でより良いコードを書きたい人向けの ES6 入門です。



## ES6 での良いコードとは？

ES6 については大きな変更があるアップデートであるため、仕様についての日本語の記事を目にする機会が多いかと思います。

私が ES6 で最初につまづいたポイントは、**「今まで ES5 で書いていたコードを、ES6 に置き換えた場合にどう書けば、より良いコードとなるのか？」** という素朴な疑問でした。  
今まで ES5 で書いていた人の中で、ES6 で実際に書くコードについて、具体的なイメージできてない人も多いのではないか？という思いがこの記事を書こうと思ったきっかけです。

結論としては、Airbnb のスタイルガイドを読めばヒントが隠されているかもしれないということですが、今回はスタイルガイドを ES6 にアップデートする過程で、私なりに ES6 でより良いコードを書くために気づいた点、注意する点などピックアップして紹介したいと思います。  
（知ってて同然かなと思う部分は割愛してたりしています。）

## スタイルガイドから見た ES6 良いコードを書くために知っておくべきこと

### 変数宣言は const が基本

ES6 からは変数宣言には`const`と`let`が利用できます。これからは`var`をやめ、基本的にはすべて`const`を使っていきます。

途中で一度定義した変数の中身を変更したい場合は、`let`を使いますが、これはあくまで例外的な扱いにしておいた方が、メンテナンスしやすいコードになります。

`const`と`let`を使うもう一つのメリットとして、Javascript 特有の変数の巻き上げというトリッキーな問題が緩和されます。

ES5 以前は変数宣言はブロックスコープの先頭に巻き上げられるため、宣言する前でその変数を利用した場合、エラーにならず`undefined`となっていましたが、`const`と`let`を使うことで`ReferenceError`が発生するようになりました。

```js
// ES5)
console.log(hoge); // => undefined
var hoge = 'hoge';

// ES6)
console.log(hoge); // => throws a ReferenceError
const hoge = 'hoge';
```

### アロー関数(Arrow Functions)と注意点

ES6 のアロー関数は記述の簡潔さと、実行時のコンテキスト(いわゆる`this`)を束縛してくれるため、Promise などの非同期処理を書く場合は、積極的に利用するべきです。

```js
// ES5)
function Person() {
  var self = this;
  self.age = 0;
  setInterval(function growUp() {
    console.log(self.age++); // => 1
  }, 1000);
}
var p = new Person();

// ES6)
function Person() {
  this.age = 0;
  setInterval(() => {
    console.log(this.age++); // => 1
  }, 1000);
}
var p = new Person();
```

ところが、アロー関数を利用するべきではないケースが存在します。ライブラリなどを利用している場合で、途中`this`を書き換えているケースです。  
このような場合、アロー関数が`this`を束縛してしまうため、コードが動作しなくなります。

このように利用する際のハマりポイントを知っておく必要がありますが、`var that = this;`や`.bind()`を書く機会がぐっと減りそうです。

### ES6 時代のデフォルトパラメータの書き方

ES5 時代のデフォルトパラメータは`||`演算子を利用したものでした。  
この記法は、時に判別しにくいバグを生み出す要因でしたので、ES6 ではデフォルトパラメータを利用しましょう。

```js
// ES5)
function say(name) {
  // nameが「false, 0」の場合、`mitsurog`となって本当にいいのか！？
  name = name || 'mitsurog';
  // say Hello
}

// ES6)
function say(name = 'mitsurog') {
  // say Hello
}
```

### コードを簡潔に書くために構造化代入(Destructuring)を効果的に使おう

ES6 からはオブジェクトと配列に構造化代入が導入されました。

普段のコードの中で、オブジェクトの詰め替えを行っているケースは意外に多く、中間参照変数が多い場合、名前付けに悩むケース(`tmp~`にするかうーんみたいな)が多々あります。

私自身あまり注目していなかった仕様の 1 つだったのですが、中間参照変数を減らすという意味で、今後は考えを改めで積極的に使って行きたいと思う仕様です。

```js
// ES5)
function getFullName(user) {
  var firstName = user.firstName;
  var lastName = user.lastName;
  return firstName + ' ' + lastName;
}

// ES6)
function getFullName({firstName, lastName}) {
  return `${firstName} ${lastName}`;
}

// 呼び出し側
console.log(getFullName({
  firstName: 'taro',
  lastName: 'yamada',
})); // => taro yamada
```

## 番外編

その他、ES6 で書く場合に考えていることなど。

### Template strings には愛しか感じないので使おう

ES6 で Template strings が導入されました。文字列補完機能・複数行文字列対応と至れり尽せりでもう愛しか感じません。さようなら`underscore.js`。

```js
const name = "mitsuruog";
console.log(`Hello ${name}`); // => Hello mitsuruog

// [注意]複数行の場合、先頭の空白もそのまま出力されます。
console.log(`
  Hello
  ${name}
`);
// =>
//   Hello
//   mitsuruog
```

### 末尾の余計なカンマは付ける？付けない？

最後に「末尾の余計なカンマ(Additional trailing comma)」は付けるか付けないかという話題です。  
以前はレガシーブラウザで問題があるとの理由で避けられて来ましたが、ES6 版ではむしろ付ける方を推奨していました。

理由は、git の diff が綺麗になるからと、どうせ Babel などでトランスパイル処理されるので、末尾の余計なカンマはトランスパイラでよしなに処理されるでしょ w ということです。  
トランスパイラ導入が前提の話でちょっと驚いています。時代の流れですね。

```js
// ES5)
var name = {
  firstName: 'taro',
  lastName: 'yamada'
}

// ES6)
const name = {
  firstName: 'taro',
  lastName: 'yamada',
}
```

### クラスとシングルトンとモジュールの見分け方についての問題提起

ES6 で導入された Class 構文ですが、やはりシングルトンとして利用したいという議論があるのは歴史の流れでしょうか。。。

[javascript - Converting Singleton JS objects to use ES6 classes - Stack Overflow](http://stackoverflow.com/questions/26205565/converting-singleton-js-objects-to-use-es6-classes)

singleton パターンを使おうとか、そもそも class にする必要はないとか、なかなか興味深いです。

とはいえ、利用者側としては提供されたモジュールがシングルトンでの利用を期待しているなど、コードを見ないと分からないわけで、スタイルガイド的に何かルールかあるかと思いきや。。。  
スタイルガイドでは、クラスもシングルトンもパスカルケースなので見分けがつきませんね。  
このあたり皆さんどうしているのでしょうか？

## 最後に

つらつらと ES6 でより良く書くための話をしました。コードスタイルの話なので、あくまで参考にしてください的な話です。

とはいえ、最近の Javascript は Babel などトランスパイラ前提なので、ますます敷居た高くなってきましたね。

スタイルガイドから考えるES6でより良いコードを書きたい人向けのES6入門

フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。
初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。  
まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。

今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるために**スタイルガイド**を有効活用しているという話です。



ちなみにこの記事は[Frontrend Advent Calendar 2014 - Qiita](http://qiita.com/advent-calendar/2014/frontrend)の 6 日目の記事です。

- 5 日目[はじめての CSS 設計 - Qiita(@moschann)](http://qiita.com/moschann/items/c7cbf62056d77cbc1d66)
- 7 日目[CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter)](http://morishitter.hatenablog.com/entry/2014/12/07/000205)

## 良いスタイルガイドとは

巷にはスタイルガイド(コーディング規約)と銘打ったものがあふれています。
そのため有効に活用できるスタイルガイドを自身で見極めなければなりません。  
頼りにするスタイルガイドが大雑把で必要なことが書いてなかったり、1000 ページもあってすぐ必要な場所が探せないようでは使えません。

私がスタイルガイドを見たときに良さそうだなと思うのは次のような場合です。

- 目次をみて言語やフレームワークの機能を網羅しているか
- `Bad`と`Recommended`の両方のスタイルが提示されているか
- そのスタイルに至った理由や背景が書かれているか
- スタイルの提示だけではなく、具体的なユースケースが提示されているか

このようなことを頭の片隅に置きながら、自分にあったスタイルガイドを探すといいと思います。

## なぜスタイルガイド？

私がスタイルガイドを読む理由はいくつかあるので紹介しますね。

### 良いコードを書くために悩む時間を短縮

例えば、Javascript でのオブジェクトや配列の定義の仕方については、通常`{}`と`[]`が使われると思いますが、Javascript の言語自体あまり普段やらない人にとってはそれすらわからないと思います。

```js
// bad
var item = new Object();

// good
var item = {};

// bad
var items = new Array();

// good
var items = [];
```

> [mitsuruog/Javacript-style-guide | オブジェクト](http://mitsuruog.github.io/javacript-style-guide/#objects)より

スタイルガイドを読むことで基本的な部分では悩まなくなります。基本的なことで悩まないということは、本当にやるべきところで悩むことに集中するために大切なことです。

様々な書き方存在する中で良いコードを書くために悩む時間を少なくしたいですね。  
(とはいえ、悩むのですが。。。)

### 地雷源を早期に把握

良いスタイルガイドには、先人達がその言語やフレームワークにて発見した地雷源が記載されています。

例えば、AngularJS で controller などを作成する際に、複数の書き方ができるのですが、スタイルガイドを読むことで悩むことなく自分が書くべきコードを見つけることができました。

> 世の中のサンプルは avoid で実装されていることが多いです。それを疑わないままそのまま覚えてしまうことは危険です。

```js
/* avoid */
angular
  .module("app")
  .controller("Dashboard", [
    "$location",
    "$routeParams",
    "common",
    "dataservice",
    function Dashboard($location, $routeParams, common, dataservice) {},
  ]);

/* recommended */
angular.module("app").controller("Dashboard", Dashboard);

Dashboard.$inject = ["$location", "$routeParams", "common", "dataservice"];

function Dashboard($location, $routeParams, common, dataservice) {}
```

> [johnpapa/angularjs-styleguide | Manually Identify Dependencies](https://github.com/johnpapa/angularjs-styleguide#style-y091)より

また、DI の部分を以下のように省略して書いてしまうとソースコードを Minify したときにエラーになるという地雷も発見することができました。

```
/* avoid - not minification-safe*/
angular
    .module('app')
    .controller('Dashboard', Dashboard);

function Dashboard(common, dataservice) {
}

/* recommended - minification-safe*/
angular
    .module('app')
    .controller('Dashboard', Dashboard);

Dashboard.$inject = ['common', 'dataservice'];

function Dashboard(common, dataservice) {
}
```

> [johnpapa/angularjs-styleguide | UnSafe from Minification](https://github.com/johnpapa/angularjs-styleguide#style-y090)より

これらの先人たちの地と涙を汗の結晶である**地雷源情報**を参考にしない手はありませんね。

### コードリーディング時間の短縮

チームで作業する場合に、同じスタイルガイドを参照することで統一感のあるコードを書くことができます。

これは OSS でも同じことで同じスタイルガイドに習うことで他人のコードも読みやすく、また自分のコードも読んでもらいやすくなります。

例えば、Nodejs では API 呼び出しの最後の引数に function を渡すことで、API 呼び出し後に callback を実行させることが慣例となっています。(引数が 1 つの場合はそれが callback になることが多いです。)

express のサーバー作成のコードを例として提示します。

```js
// Setup server
var app = require("express")();
var server = require("http").createServer(app);

// Start server
// [MEMO]3番目のfunctionがcallback
server.listen(port, ip, function () {
  console.log("Express server listening on %d", port);
});
```

> どこかでこんな内容のガイド見たのですが、忘れてしまいました。知っているかたいましたら教えてください。

自分が作成した node 製モジュールの API で、最初の引数を callback にしてしまった場合はどうでしょうか。
他人が読む場合とてもストレスを感じると思います。

**Go に入れば Go に従えで**はないですが、そのコミュニテイ内でのルールは守ったほうがいいですよね。

## スタイルガイドの紹介

私がよく参照するスタイルガイドを紹介します。これからフロントエンド習得しようと思う方は参照してみてください。  
(よく利用しているフレームワークに偏りあるので、全ては網羅していませんが。。。)

### Javascript

airbnb のスタイルガイドを私が翻訳したものです。(本家はこちら[airbnb/javascript](https://github.com/airbnb/javascript))  
有名なスタイルガイドは他にもいくつかあるのですが、内容とボリュームがちょうどいいと思います。

- [mitsuruog/Javacript-style-guide](http://mitsuruog.github.io/javacript-style-guide/)

もうちょっと手が動く様になるとこちらも読むといいです。

- [JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/ja/)

### Backbone

スタイルガイドというかパターン集ですね。最近の Backbone は[Marionette.js](http://marionettejs.com/)を併用することが多いので、これはもうあまり出番がないかも。。。

- [rstacruz/Backbone patterns](http://ricostacruz.com/backbone-patterns/)

### AngularJS

AngularJS はこれを読んでおけばいいです。

- [johnpapa/angularjs-styleguide](https://github.com/johnpapa/angularjs-styleguide)

### CSS

基本ですね。

- [idiomatic-css/translations/ja-JP](https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP)

本格的に勉強したい場合はまずこちらを読むといいです。

- [SMACSS E-book 日本語](http://shop.smacss.com/products/smacss-e-book)

### HTML

結構マークアップで悩む事が多いので、参考になります。

- [hail2u/html-best-practices](https://github.com/hail2u/html-best-practices)

## まとめ

進化の早いフロントエンドの世界ですが、私が進化に追いつくためにスタイルガイドを有効活用しているという話をしました。  
特に最近は特定のフレームワークや言語のスタイルガイドが付属するようなトレンドになってきたような気がしています。  
(ここで言うスタイルガイドは、従来のスタイルガイドとは違うジャンルの新しいタイプのものなのかもしれませんね。)

他の習得方法として、書籍を読む方法もいいと思いますが、スタイルガイドで特性などを把握してから本を読み進んだほうが、途中で挫折しないような気がしています。  
スタイルガイドは面倒な前置きなどないので、忙しいエンジニアは普段使いするには向いていると思いますし。
(書籍の内容は StackOverflow で参照できる内容もおおくありますし。。。)

良いスタイルガイドを知ることは、自分の組織やプロダクトでどのようなスタイルガイドを作成すればいいか、重要なヒントが隠されていると思います。

進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話

知っている人は知っている「Airbnb」の JavaScript スタイルガイドを翻訳しました。  
急に上司から「Javascript のスタイルガイドないの？」って言われて困ったら思い出してください。



### このエントリでお伝えしたいこと。

1.  ネタがなくて困ってたら使ってください。
2.  困ってなくても、イイなと思ったら使ってください。
3.  良かったら Airbnb も使ってください。

## Airbnb とは

Airbnb とはアメリカのサンフランシスコにある、個性的な宿を扱うスタートアップ企業です。詳細は下の記事を読んでください。

[旅行のソーシャル化は「現実世界の Facebook」、AirBnB CEO に聞いた。](http://www.atmarkit.co.jp/ait/articles/1211/30/news123.html)

[Airbnb（JP）](https://www.airbnb.jp/)

去年の秋くらいに、サイバーエージェントさん主催の Frontrend で名前を聞いた（ような気がする・・・）辺りからチェックしていました。  
このたび勉強のついでに翻訳してみました。

## スタイルガイドについて

翻訳したものはこちらです。

[https://mitsuruog.github.com/javascript-style-guide/](https://mitsuruog.github.com/javascript-style-guide/)

このスタイルガイドの特徴は、

- オープンな議論を通じてスタイルが決定していること。
- スタイルについてパフォーマンスに関するエビデンスがあること。

だと感じています。

上級者にとってはあまり目新しいものは無いかもしれませんし、異論がある方もいるでしょう。この点については、本家の人たちも「この規約がすべての人に受け入れることを期待していない」と言い切っていますし、私も同感です。

とは言っても、ちまたに溢れるオレオレスタイルについて、一定の議論をした上で、取りまとめて公開している点は非常に評価できると思いました。

この翻訳版については、本家にプルリクエストしてリンク張ってもらってます。

[https://github.com/airbnb/javascript（本家）](https://github.com/airbnb/javascript)

最近、ドイツ語訳版作られたので、この先何ヶ国語に翻訳されるかちょっと楽しみです。

> (2014/11/09 追記)
> 現在 10 ヶ国語に翻訳されています
> ![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/airbnb_javascript.png)

ちなみに、組織（法人とか）で採用した場合、本家にプルリクエストするとリストに追加してます。もちろん翻訳版を使ってくれて、私にプルリクエストくれても結構です。

他に有名なスタイルガイドとしては以下のようなものでしょうか。

[Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)

[JavaScript Style Guide \| Contribute to jQuery](https://contribute.jquery.org/style-guide/js/)

[JavaScript Guide \| MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)

他には、

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=qf_sp_asin_til&t=mitsuruog-22&m=amazon&o=9&p=8&l=as1&IS1=1&detail=1&asins=4873113911&linkId=5004dc6f4630ee1e45646abc8c8bf379&bc1=000000&lt1=_blank&fc1=333333&lc1=0066c0&bg1=ffffff&f=ifr">
</iframe>
    
を座右の銘としているエンジニアも良く見ますね。

個人的には好きなスタイルを使えばいいと思いますが、より良いコードを書けるよう日々努力することはとても大切なことだと思います。

スタイルガイドのネタで困ったら、思い出してください。

Tag: styleguide

react-nativeでreact-styleguidistを使う

TypeScriptのReactプロジェクトでreact-styleguidistを使う

スタイルガイドから考えるES6でより良いコードを書きたい人向けのES6入門

進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話

Airbnb JavaScript スタイルガイドを翻訳しました