2021-07-27

投資信託の記録付けアプリを書いてみた2

日記

white-azalea.hatenablog.jp

更新して売却機能つけてみた。

使ってみる

$ npm run watch

で起動する。
初期状態だと

f:id:white-azalea:20210727220608p:plain

レコードが無いのだから当然ですの

銘柄を追加する

銘柄の追加を行うと、入力フォームが開き

f:id:white-azalea:20210727220719p:plain

試しに「eMAXIS 全世界株式インデックス」を追加する。

f:id:white-azalea:20210727221558p:plain

初期状態は資産 0 。
買ってないから当然ですな。

購入してみる

7/1 に 100,000 円購入したことにしてみる。

f:id:white-azalea:20210727221741p:plain

追加を押すと

f:id:white-azalea:20210727221804p:plain

「目標金額」は購入金額 + 20% で現状固定。
変更する予定は…あんましないな…。
個人的に売ろうかと考えるレート

価格変動した想定

次月購入前に、この金額が変動したものとする。
仮に 5% 程上がった想定で

f:id:white-azalea:20210727221930p:plain

これで「入力」っと。

f:id:white-azalea:20210727222002p:plain

資産価値の値が設定される。
ここで、追加 100,000 円で買ったとする

f:id:white-azalea:20210727222120p:plain

さらに 5% 値上がりしたと仮定する

205000 * 1.05 = 215250 なので、215250 を入力

f:id:white-azalea:20210727222356p:plain

売却してみる

最初の月に投資したものが、1.1 倍越えたので、110,000 分で売り払ってみる。

f:id:white-azalea:20210727222617p:plain

売り払った行の資産価値が 0 となり、差額を最新の売り払ってない購入記録の資産価値に上乗せ

f:id:white-azalea:20210727222833p:plain

実際には手数料とか、税金とかかかるのでここまで綺麗な数字にはならないと思うが…

2021-07-26

投資信託の記録付けアプリを書いてみた。

投資信託し始めたときに、いつの投資がどれ位の価値になったか知りたかったので作成した。

github.com

nodejs でいじったことない＋OSS LWC もきっちり触ったことない…という状況からやってみた。
多分総工数 8h 位か…

f:id:white-azalea:20210726021723p:plain

こんな感じ。

2回 10 万で投資して

f:id:white-azalea:20210726021812p:plain

その後の合計資産が 20 万まで行った場合

f:id:white-azalea:20210726021916p:plain

先行して投資した分は最終的に 94736 位になったと考えられると。
こんな感じで金額の変動とかに対応できるかなと。

2021-07-20

LWC で slot 探し回って右往左往した件

勉強日記

もったいぶる趣味無いのでざっくり記述。
カスタムコンポーネントの内部に任意のHTMLタグを送り込みたいとする。

自分は Bootstrap の dialog ラッパーを書きたくでこれを使った
white-azalea.hatenablog.jp

<template>
  <lib-dialog
    title="銘柄"
    submit-name="保存"
    cancel-name="キャンセル"
    onclose={dispatchClose}
    onsubmit={dispatchClose}>

    <!-- 内部コンテンツ -->
    <p>Slot の内部</p>

  </lib-dialog>
</template>

これを受け止める dialog の定義は module/lib/dialog/dialog.html

<template>
  <div class="modal fade show" style="display: block;" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{title}</h5>
          <button type="button" class="btn-close" aria-label="Close" onclick={onClose}></button>
        </div>
        <div class="modal-body">

          <!-- こんな風に定義 -->
          <slot></slot>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick={onClose}>{cancelName}</button>
          <button type="button" class="btn btn-primary" onclick={onSubmit}>{submitName}</button>
        </div>
      </div>
    </div>
  </div>
</template>

すると
f:id:white-azalea:20210720224427p:plain

キーワードで「wrap」「inner content」「inner html」「入れ子」いずれで探してもヒットしない… slot ってネーミングセンスなんだよ slot って…（八つ当たり

2021-07-19

OSS 版 LWC でWebApp

LWC 勉強日記

LWC というと、Salesforce の Lightning Web Component が真っ先に浮かぶ人は、Salesforce 界隈の人だと思う。
で、Salesforce プラットフォーム上のフレームワークとして有名ではあるのだけど、実際にはこいつは Opensource としても使える。

因みにこの記事執筆当時の nodejs のバージョンは

$ node --version
v14.17.1
$ npm --version
7.17.0

始め方

と言ってもそんなに難しい話ではない。
nodejs が入ってるなら、大体このコマンドで行ける。

$ npx create-lwc-app account-book

するとインストールウィザードが起動する

⚡⚡⚡⚡⚡  Lightning Web Components  ⚡⚡⚡⚡⚡


? Do you want to use the simple setup? Yes
? Package name for npm account-book
? Select the type of app you want to create (Use arrow keys)
> Standard web app 
  Progressive Web App (PWA) 
  Electron app

当然標準 WebApp を選択

? Do you want a basic Express API server? (y/N) y

express API サーバは、バックエンドで動作させるWebサーバの事。
https://white-azalea.hatenablog.jp/entry/2021/07/14/220816

で、作成したひな型がこんな感じ

f:id:white-azalea:20210719222426p:plain

開発サーバを起動

$ npm run watch と叩くと、開発用のWebサーバ (LWC用)が 3001 ポートで、API サーバが 3002 ポートで起動する。

f:id:white-azalea:20210719222656p:plain

Web サーバ（ポート 3001）にアクセスして存在しないリクエストならAPIサーバにルーティングされるよう設定されているので、API サーバの方のソース(src/api.js)で以下の様に書かれているなら

// Simple Express server setup to serve for local testing/dev API server
const compression = require('compression');
const helmet = require('helmet');
const express = require('express');

const app = express();
app.use(helmet());
app.use(compression());

const HOST = process.env.API_HOST || 'localhost';
const PORT = process.env.API_PORT || 3002;

app.get('/api/v1/endpoint', (req, res) => {
    res.json({ success: true });
});

app.listen(PORT, () =>
    console.log(
        `✅  API Server started: http://${HOST}:${PORT}/api/v1/endpoint`
    )
);

ポート 3002 はもちろん
f:id:white-azalea:20210719223026p:plain

ポート 3001 でも
f:id:white-azalea:20210719223102p:plain

とできる。

2021-07-14

本当に軽量で楽なサーバ Express

日記 OSS nodejs

なんかサクッと軽量なものを作りたいなと思った時、やっぱり Node は楽なのです。
てことで見つけたのはこれ

expressjs.com

どれくらい楽かというと、

npm init して npm install express --save して

const express = require('express')
const app = express()
const port = 3000

app.get('/test', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

REST したけりゃハンドラ書けばよくね？ってレベルでシンプル。
因みに app.get, app.put, app.post, app.delete でそれぞれのHTTP動詞が書ける。

static ディレクトリ掘って app.use('/', express.static('static')); を app.listen 直前に書くだけで静的リソースもそのまま公開できるという素敵仕様です。

もっと複雑なものを作ろうと思ったら npm install express-generator -g で作成しましょう。
express --view=jade --css=sass myapp と打ち込めば、必要なてんぷれをしれっと生成してくれます。

view はテンプレートエンジンで、css はスタイルシートの言語指定です。

f:id:white-azalea:20210714220701p:plain