emacsのReactの開発をrjsx-modeで行う

English
日本語

概要

みなさんこんにちはcandleです。
今回はemacsのreact開発用のメージャーモードのrjsx-modeを導入してみたいと思います。
Reactの開発はこれまで、web-modeまたはjs2-modeのjs2-jsx-modeを使うなどの方法がemacsユーザー間で試行錯誤されてきました。
私も、rjsx-modeの前はjs2-jsx-modeを使っていました。

rjsx-modeはjs2-modeを拡張したものなので、js2-modeの方も違和感なく使えるでしょう。
rjsx-modeはJSXの補完があったり便利です。

前提

emacsがある
melpaまたはel-getの環境がある

rjsx-modeのインストール

rjsx-modeのインストールはmelpaかel-getでできます。
私はel-getを使っていますが、どちらも簡単に説明します。

meplaからインストール

emacsを起動して
「M-x package-list-packages」を実行します。

melpaのパッケージ一覧が出てくるので、C-sで「rjsx-mode」と検索します。

rjsx-modeにカーソルを合わせて「i」と打ち込み、その後、「x」と打ち込んで、インストールします。
インストールするか尋ねられるので、「y」と打てばインストールできます。

melpaでのインストールは以上です。

el-getでインストールする

el-getでrjsx-modeをインストールするのは簡単です。
まず、自分のemacs設定ファルを開きます。僕は.emacs.d/init.elファイルを開きます。

下の方に、以下を記述します。

(el-get-bundle rjsx-mode)

「M-x eval-buffer」でinit.elを再読み込みして、el-getからrjsx-modeをインストールします。

経過を見ていると、js2-modeがインストールされていることがわかります。

インストールは以上です。

rjsx-modeの設定

rjsx-modeは自動的に.jsx拡張子に対してメージャーモードで起動します。
一方、.jsファイルには紐付けされていないので、メージャーモードとしては起動しません。

React jsxが書かれているファイル全てが.jsx拡張子ではありません。
全ての.jsファイルでrjsx-modeを起動する設定は以下の様にします。
前にも書いた通り、rjsx-modeのベースはjs2-modeなので、全ての.jsファイルで使っても問題なく使えます。

(add-to-list 'auto-mode-alist '(".*\\.js\\'" . rjsx-mode))

公式サイトにあるように、componentsまたはcontainersフォルダ以下にあるjsファイルのみrjsx-modeを実行する場合は以下のようにします。

(add-to-list 'auto-mode-alist '("components\\/.*\\.js\\'" . rjsx-mode))
(add-to-list 'auto-mode-alist '("containers\\/.*\\.js\\'" . rjsx-mode))

適当なreactのファイルを作成して、確認します。

touch App.jsx

以下を記述します。

import React from 'react';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      txt: 'this is the state text',
    }
  }

  update(e){
    this.setState({
      txt: e.target.value
    })
  }

  render(){
    return(
      <div>
        <p>Text: {this.state.txt}</p>
        <input name="" type="text" onChange={this.update.bind(this)} />
      </div>
    )
  }
}

export default App;

メージャモードが「RJSX」担っていることがわかります。

さて、上の画像をみると、行末にセミコロンが無いので警告が出ています。
ES6からか定かではありませんが、行末のセミコロンは必須ではなくなりました。
設定でこの警告を非表示にし、インデントの幅をスペース２つに変更します。

.emacs.d/init.elを開いて以下を記述します。

(add-hook 'rjsx-mode-hook
          (lambda ()
            (setq indent-tabs-mode nil) ;;インデントはタブではなくスペース
            (setq js-indent-level 2) ;;スペースは２つ、デフォルトは4
            (setq js2-strict-missing-semi-warning nil))) ;;行末のセミコロンの警告はオフ

これで良いでしょう。

基本的な設定は以上です。

JSXの補完について

rjsxモードはjsxのタグ補完をやってくれます。
jsxで「<」とタグを打ち込むと自動的に「/>」が展開されます。

そのまま、「button」と入力して、「C-d」で「/」を消すと、<button>タグの閉じタグ</button>が作成されます。

便利ですね。

まとめ

今後しばらくReactのメージャモードはjs2-jsx-modeやweb-mode、rjsx-modeなどが犇めき合うと思います。
その中でも僕はrjsx-modeが便利だと思いました。