ポジション計算機

FX の含み損益・証拠金維持率等をシュミレートできる Nuxt.js 製 の計算アプリです。
https://fx-calculator-advanced.netlify.com/

アピールポイント

アプリ

• ライブラリやフレームワークは必要最低限のものを使用し、ページネーション・モーダルウィンドウ等の UI コンポーネントを含め すべて自作 です。
• バックエンドに Firebase を使用し、 データに永続性のある Web アプリを開発しました。
• Promise を理解し、Firebase の通信を待つ等処理を 非同期的に制御 しています。
• モダンな UX を導入し、ローディング時には スケルトンスクリーン を表示させています。
• 前職の Web デザイナーの経験 を活かし、余白・色使い・モノのバランスを考えたモダンなデザインを施しました。

開発

• アプリではありますが、 セマンティクス を考慮したタグ付けをしています。
• 通貨ペアの追加に 対応しやすい データ構造にしています。
• Sass (CSS) はコンポーネント設計を意識し、 BEM 記法 でコーディングしました。
• 実際に現場で使われる git-flow を導入し、master / develop / feature ブランチをマージさせながら開発しました。（プライベートリポジトリ）
• 基本は独学ですが、メンターの コードレビュー を受けながら開発しました。（プライベートリポジトリ）

経緯・用途

「ユーロドルのレートは 1.12764。1.13 になったら今のポジションの含み益はどうなる？」
「10,000 円出金したいんだけど証拠金維持率は大丈夫だろうか。いくらになる？」

FX の計算は複合的で、少し面倒です。
損益をひとつ計算するにも、ブローカーのレバレッジや取引単位、保有ポジションの通貨ペアやロット数等、いろんな条件を加味しなければなりません。

「fx calculator」「証拠金シュミレーター」等でググって出てくるアプリは、複数のポジションから計算できるものがなかったり、あるいは知りたい計算結果が何かしら欠けているため、その都度自分で計算していくしかありませんでした。

この「ポジション計算機」は、FX に関するあらゆる条件をリアクティブでシュミレートし、 為替トレーダーの億劫な計算を助けるアプリ です。

使い方

1. 計算機ページ左側のフォームに条件を入力すると、右側にグラフや算出された値が反映されます。
2. 計算結果を保存するにはログインする必要があります。ナビゲーションの ゲスト からログインしましょう。
3. タイトルを付けて 保存 しましょう。15 件まで保存できます。始めから計算する場合は リセット しましょう。
4. ナビゲーションの保存済み から保存した計算結果の一覧を確認できます。
5. 計算結果をクリックすると、保存した計算結果の詳細を確認できます。
6. 詳細ページからは 編集 と 削除 ができます。
7. 編集モードでは 上書き保存 で計算結果を更新しましょう。新しく別の計算結果として保存する場合は 新規保存 します。
8. また、編集モードで リセット すると、編集前に保存した状態へ戻すことができます。一から計算を始めたい場合は、ナビゲーションから 新規計算 しましょう。

機能

• 計算結果・保有ポジションの 保存 ・ 編集 ・ 削除
• Myfxbook からの 取得 による保有ポジションの入力
• Twitter アカウントによるユーザー認証
• 保有ポジションの割合をグラフで表示

UI コンポーネント

• ページネーション（「保存済み」一覧ページ）
• フラッシュメッセージ（ナビゲーション下）
• モーダルウィンドウ（計算機ページ、「保存済み」詳細ページ）
• ツールチップ（含み損益等表示箇所）

使用技術

• 言語: JavaScript
• フレームワーク: Nuxt.js (Vue.js)
• ライブラリ等: axios, Chart.js
• プリプロセッサ: Sass
• API: Foreign exchange rates API, Myfxbook API
• バックエンド: Firebase (Firestore)
• デプロイ: Netlify

バージョン

• JavaScript ES2015 (ES6)
• Vue.js 2.6.10
• Nuxt.js 2.8.1
• Firebase 6.2.4