Airbnb React/JSX Style Guide

A mostly reasonable approach to React and JSX

React と JSX に対する、程よく健全なアプローチ

This style guide is mostly based on the standards that are currently prevalent in JavaScript, although some conventions (i.e async/await or static class fields) may still be included or prohibited on a case-by-case basis. Currently, anything prior to stage 3 is not included nor recommended in this guide.

このスタイルガイドは、現在 JavaScript で一般的に使われている標準に主に基づいていますが、async/await や静的クラスフィールドのように、状況に応じて含めたり禁止したりする規約もあります。現在のところ、Stage 3 に達していないものは、このガイドには含まれておらず、推奨もされません。

Table of Contents

  1. Basic Rules
  2. Class vs React.createClass vs stateless
  3. Mixins
  4. Naming
  5. Declaration
  6. Alignment
  7. Quotes
  8. Spacing
  9. Props
  10. Refs
  11. Parentheses
  12. Tags
  13. Methods
  14. Ordering
  15. isMounted

Basic Rules

Class vs React.createClass vs stateless

Mixins

Why? Mixins introduce implicit dependencies, cause name clashes, and cause snowballing complexity. Most use cases for mixins can be accomplished in better ways via components, higher-order components, or utility modules.

理由: Mixins は暗黙的な依存関係を生み、名前の衝突を引き起こし、複雑さが雪だるま式に増大します。多くの場合、Mixins の用途はコンポーネント、HOC（高階コンポーネント）、ユーティリティモジュールなどを使うことで、より良い方法で実現できます。

Naming

Declaration

Alignment

Quotes

Spacing

Props

Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.

理由: キーボードショートカットと、スクリーンリーダー利用者が使用するキーボード操作との間で不整合が生じ、アクセシビリティが複雑になるためです。

// bad
<div accessKey="h" />

// good
<div />

Why? Not using a stable ID is an anti-pattern because it can negatively impact performance and cause issues with component state.

理由: 安定した ID を使用しないことはアンチパターンであり、パフォーマンスに悪影響を与えたり、コンポーネントの state に問題を引き起こす可能性があるためです。

We don’t recommend using indexes for keys if the order of items may change.

アイテムの順序が変わる可能性がある場合、キーとしてインデックスを使用することは推奨しません。

// bad
{
  todos.map((todo, index) => <Todo {...todo} key={index} />);
}

// good
{
  todos.map((todo) => <Todo {...todo} key={todo.id} />);
}

Why? propTypes are a form of documentation, and providing defaultProps means the reader of your code doesn’t have to assume as much. In addition, it can mean that your code can omit certain type checks.

理由: propTypes はドキュメントの一種であり、defaultProps を指定することでコードを読む人が余計な推測をせずに済みます。さらに、一部の型チェックを省略できる場合もあります。

// bad
function SFC({ foo, bar, children }) {
  return (
    <div>
      {foo}
      {bar}
      {children}
    </div>
  );
}
SFC.propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.string,
  children: PropTypes.node,
};

// good
function SFC({ foo, bar, children }) {
  return (
    <div>
      {foo}
      {bar}
      {children}
    </div>
  );
}
SFC.propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.string,
  children: PropTypes.node,
};
SFC.defaultProps = {
  bar: "",
  children: null,
};

Exceptions: 例外:

function HOC(WrappedComponent) {
  return class Proxy extends React.Component {
    Proxy.propTypes = {
      text: PropTypes.string,
      isLoading: PropTypes.bool
    };

    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}

export default function Foo {
  const props = {
    text: '',
    isPublished: false
  }

  return (<div {...props} />);
}

Notes for use:

Filter out unnecessary props when possible. Also, use prop-types-exact to help prevent bugs. 可能であれば不要な props をフィルタリングしてください。また、バグ防止のために prop-types-exact を使用してください。

// bad
render() {
  const { irrelevantProp, ...relevantProps } = this.props;
  return <WrappedComponent {...this.props} />
}

// good
render() {
  const { irrelevantProp, ...relevantProps } = this.props;
  return <WrappedComponent {...relevantProps} />
}

Refs

Parentheses

Tags

Methods

Ordering

  1. optional static methods
  2. constructor
  3. getChildContext
  4. componentWillMount
  5. componentDidMount
  6. componentWillReceiveProps
  7. shouldComponentUpdate
  8. componentWillUpdate
  9. componentDidUpdate
  10. componentWillUnmount
  11. event handlers starting with ‘handle’ like handleSubmit() or handleChangeDescription()
  12. event handlers starting with ‘on’ like onClickSubmit() or onChangeDescription()
  13. getter methods for render like getSelectReason() or getFooterContent()
  14. optional render methods like renderNavigation() or renderProfilePicture()
  15. render
  1. 任意の static メソッド
  2. constructor
  3. getChildContext
  4. componentWillMount
  5. componentDidMount
  6. componentWillReceiveProps
  7. shouldComponentUpdate
  8. componentWillUpdate
  9. componentDidUpdate
  10. componentWillUnmount
  11. 'handle' で始まるイベントハンドラ（例: handleSubmit()、handleChangeDescription()）
  12. 'on' で始まるイベントハンドラ（例: onClickSubmit()、onChangeDescription())
  13. render 用のゲッターメソッド（例: getSelectReason()、getFooterContent())
  14. 任意のレンダーメソッド（例: renderNavigation()、renderProfilePicture())
  15. render
  1. displayName
  2. propTypes
  3. contextTypes
  4. childContextTypes
  5. mixins
  6. statics
  7. defaultProps
  8. getDefaultProps
  9. getInitialState
  10. getChildContext
  11. componentWillMount
  12. componentDidMount
  13. componentWillReceiveProps
  14. shouldComponentUpdate
  15. componentWillUpdate
  16. componentDidUpdate
  17. componentWillUnmount
  18. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
  19. getter methods for render like getSelectReason() or getFooterContent()
  20. optional render methods like renderNavigation() or renderProfilePicture()
  21. render
  1. displayName
  2. propTypes
  3. contextTypes
  4. childContextTypes
  5. mixins
  6. statics
  7. defaultProps
  8. getDefaultProps
  9. getInitialState
  10. getChildContext
  11. componentWillMount
  12. componentDidMount
  13. componentWillReceiveProps
  14. shouldComponentUpdate
  15. componentWillUpdate
  16. componentDidUpdate
  17. componentWillUnmount
  18. onClickSubmit() や onChangeDescription() のような clickHandlers / eventHandlers
  19. getSelectReason() や getFooterContent() のような render 用ゲッターメソッド
  20. renderNavigation() や renderProfilePicture() のような任意の render メソッド
  21. render

isMounted

Why? isMounted is an anti-pattern, is not available when using ES6 classes, and is on its way to being officially deprecated.

理由: isMounted はアンチパターン であり、ES6 クラスでは使用できず、公式に非推奨となる流れにあります。

Translation

This JSX/React style guide is also available in other languages:

この JSX/React スタイルガイドは他の言語でも利用できます:

⬆ back to top