経済指標カレンダーと各種レートと取引数量計算とReact

広告

外国為替証拠金取引(FX, Forex, Foreign eXchange)で毎日使うもののページにしました。 経済指標カレンダーとFX、指数、商品先物、金利と債券のレートはブログパーツがあったので、導入してみました。 資金管理の取引数量計算は React を使って実装してみました。 コンポーネントとかは全く意識してません。the transformation in the browser.

経済指標カレンダー

金融ポータルサイト、Investing.com 日本によって提供されている経済カレンダー

市場相場表


市場相場はInvesting.com 日本 によって機能されている

取引数量計算

各項目について

  • 資金
    • 口座残高
  • リスク
    • 1トレード当たりで許容する損失
    • 資金に対する比率
    • %
    • 1~2%程度を破産しない目安とする
  • ストップ
    • 1トレードで許容する損失
    • pips数
  • ドル円
    • クロス円の通貨ペアのトレードは100円とする
    • クロス円以外は1トレードの損失を円換算で計算するためにドル円のレートを入力する
  • 取引数量
    • (リスク × 資金) ÷ (ストップ × ドル円) = (定率 × 口座残高) ÷ 個々のトレードリスク = 取引枚数
    • 定率による資金管理
    • 「システムトレード 基本と原則:トレーディングで勝者と敗者を分けるもの」(ブレント・ペンフォールド)
    • 逆マーチンゲール(パーレー)
    • 口座残高が増えるとリスクをとれる資金も多くなるので、取引枚数も増やすことができる
    • 同様に、口座残高が減るとリスクをとれる資金も少なくなるので、取引枚数を減らすしかない

ソース

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>取引数量計算</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="calculation"></div>
    <script type="text/babel">
      const style = {
        number: {
          color: "#555",
          fontFamily: 'Avenir, "Open Sans", "Helvetica Neue", Helvetica',
          fontSize: "14px",
          textAlign: "right"
        }
      };
      class Calculation extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            value: '1,000,000',
            b: '1',
            c: '20',
            d: '100.00',
            e: '0'
          };
        }
        componentDidMount() {
          this.calculate();
        }
        render() {
          return (
            <div>
              <form>
                <table>
                  <tbody>
                    <tr>
                      <td width="30%">
                        資金(¥)
                      </td>
                      <td width="70%">
                        <input type="text"
                          value={ this.state.value }
                          onChange={ this.handleChange.bind(this) }
                          onFocus={ this.handleFocus.bind(this) }
                          onBlur={ this.handleBlur.bind(this) }
                          pattern="\d*"
                          placeholder="資金"
                          style={ style.number } />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        リスク(%)
                      </td>
                      <td>
                        <input type="text"
                          value={ this.state.b }
                          onChange={ this.handleChangeB.bind(this) }
                          pattern="\d*"
                          placeholder="リスク"
                          style={ style.number } />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        ストップ(pips)
                      </td>
                      <td>
                        <input type="text"
                          value={ this.state.c }
                          onChange={ this.handleChangeC.bind(this) }
                          pattern="\d*"
                          placeholder="ストップ"
                          style={ style.number } />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        ドル円(¥)
                      </td>
                      <td>
                        <input type="text"
                          value={ this.state.d }
                          onChange={ this.handleChangeD.bind(this) }
                          pattern="\d*"
                          placeholder="ドル円"
                          style={ style.number } />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        取引数量(万通貨)
                      </td>
                      <td>
                        <span>{ this.state.e }</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </form>
            </div>
          );
        }
        addComma(v) {
          return v.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        }
        removeComma(v) {
          return v.replace(/,/g, '');
        }
        calculate() {
          const v = this.state.value ? this.removeComma(this.state.value) : '';
          if (!v || isNaN(v)) return;
          if (!this.state.b || isNaN(this.state.b)) return;
          if (!this.state.c || isNaN(this.state.c)) return;
          if (!this.state.d || isNaN(this.state.d)) return;
          this.setState({ e: (Number(v) * Number(this.state.b) / 100 / Number(this.state.c) / Number(this.state.d)).toFixed(2) });
        }
        handleChange(event) {
          this.setState({ value: event.target.value }, this.calculate.bind(this));
        }
        handleFocus(event) {
          this.setState({ value: this.removeComma(event.target.value) }, this.calculate.bind(this));
        }
        handleBlur(event) {
          this.setState({ value: this.addComma(event.target.value) }, this.calculate.bind(this));
        }
        handleChangeB(event) {
          this.setState({ b: event.target.value }, this.calculate.bind(this));
        }
        handleChangeC(event) {
          this.setState({ c: event.target.value }, this.calculate.bind(this));
        }
        handleChangeD(event) {
          this.setState({ d: event.target.value }, this.calculate.bind(this));
        }
      };
      ReactDOM.render(
        <Calculation />,
        document.getElementById('calculation')
      );
    </script>
  </body>
</html>

ECMAScript® 2015で書いてみました。 最初thisを使っているところでエラーになりました。

参考

広告
広告