読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

Webアプリ向け高機能コードエディタ「Ace」をReactに組み込んで使ってみる

Ace とは?

Ace は、Webアプリケーション向けのリッチなコードエディタです。 シンタックスハイライトや正規表現検索に対応した高機能なコードエディタを、Webアプリにさくっと組み込めます。

機能一覧: (Aceのサイトより)

  • Java,Ruby等を含む、110言語のシンタックスハイライトに対応
  • 自動インデント
  • マルチカーソル
  • 正規表現での検索/置換
  • 関数やクラスの折り畳み機能(Code folding)
  • 「Ctrl + /」での一括コメント
  • ..etc..

おお、なんかすごい高機能だ。

Reactに組み込んで使う

React-Ace を使います。

$ npm install react-ace

jsのソースは以下。

import React     from 'react'
import AceEditor from 'react-ace'

// webpackで統合するので、必要なテーマや拡張モジュールは
// 明示的にimportしておく必要があります。
import 'brace/mode/ruby'
import 'brace/theme/github'
import 'brace/ext/searchbox'

class RubyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <AceEditor
        mode="ruby"
        theme="github"
        value={this.props.source}
        onChange={this.onChange.bind(this)}
        name="editor"
      />
    );
  }

  onChange(newValue) {
    console.log(newValue); // とりあえず
  }
}
RubyEditor.propTypes =  {
  source: React.PropTypes.string.isRequired
};
RubyEditor.defaultProps =  {
  source: "# test. \nclass Foo\nend"
};

React.render(
  <RubyEditor />,
  document.body );

unageanu/sandbox/ace - GitHub にPushしているので、package.jsonなど他のソースはこちらを参照ください。

動いているところはこちら。