joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

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

投稿日:2017年4月7日 更新日:

Pocket


概要

みなさんこんにちは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の環境がある

SPONSORED LINK


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からか定かではありませんが、行末のセミコロンは必須ではなくなりました。
設定でこの警告を非表示にし、インデントの幅をスペース2つに変更します。

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

(add-hook 'rjsx-mode-hook
          (lambda ()
            (setq indent-tabs-mode nil) ;;インデントはタブではなくスペース
            (setq js-indent-level 2) ;;スペースは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が便利だと思いました。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Emacsでreact+es6に対応したflycheck + eslintの環境を構築する

概要 みなさんこんにちはcandleです。 今回は以外に難しい、emacs + eslintの導入をしてみましょう。 emacsは他にもjsHintやjsxHintなどjavascriptの記法をチェ …

Mac Yosemiteを購入したので、よく使うソフトウェアをインストールする

概要 みなさんこんにちはcandleです。 今回は私がよく使っているソフトウェアの紹介をします。主に「文章、ブログ、プログラミング、デザイン」に関わっている人に向けてになります。 Skitch1.0. …

Mac OSで使われているポート番号を確認する(portsscan)

概要 みなさんこんにちはcandleです。今回はMacで使われているポートの確認方法を紹介します。 ポート番号とはパソコンがインターネット(とは限らないのですが)、外部からのアクセスを受け付けている番 …

Mac OS MavericksにX11(Xquartz)をインストールする

概要 みなさんこんにちはcandleです。今回はX11のインストールを行います。MavericksからかMountain Lionからか忘れましたが、MacではX11が標準でインストールされなくなりま …

Macのログインフックを利用して自動でlo0のipアドレスを割り振る

概要 みなさんこんにちはcandleです。 今回はMacのログインフックを使って、自動的にローカルのipアドレスを割り振ってみたいと思います。 Macでは自動的に127.0.0.1がローカルのIPアド …

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ