外国為替証拠金取引(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を使っているところでエラーになりました。