津江のブログ

モバイルエンジニアが仕事での学びをアウトプット

退職エントリーと抱負

退職にあたって「業務の棚卸し」を行い、「達成したことと、今後を考える」が今回のテーマ。
ちなみにフロントエンドを自分が１人で担当しました。

業務遍歴

2020/12
React Nativeで実装されているアプリ2つを改修。
https://eat-and-app.jp/r-baker/
https://eat-and-app.jp/osaka-ohsho/
一部のAndroid端末でアプリが落ちる、ということでメモリーリーク等調査のためSentryを導入。
初めてのエラー解析に挑む。

2021/1〜4
大阪王将のテーブル上にタブレットを設置して注文を行う為のアプリを新規実装。
アプリ特有のタッチ操作や画面遷移、toC向けのユーザビリティなど、色々学びつつ完成。

2021/3〜5
副業。効率的なプロダクト開発とはかくあるべし、という感じ。
チーム開発について超勉強になった。

2021/4〜5
受託開発としてマーケティングweb管理アプリを実装&オフショア企業に一部委託。
オフショアの納品物がバグだらけで眠れない日々が続く。(睡眠3時間)
この反省を活かして8月は丁寧にオフショアと協業中。

2021/5〜2021/8
自社サービスとしてキャッシュレス決済のPOSレジをタブレットアプリとして開発。
社内のスケジュール見積もりが甘く、再び寝れない日々が続く。
8月に無事ローンチし店舗にて稼働中。
実際使ってもらうと色々フィードバックを貰えるため追加機能を実装中。
ゼロから作り上げ、パフォーマンス改善まで行えたので、非常にレベルアップした気がする。

2021/8〜
自社サービス兼、受託案件でマーケティングツール(上記POSレジのデータ分析)を開発。
別のオフショア企業と協業し、津江がプロジェクトリーダー的な役割を務める。
日本語が通じないので英語でコミュニケーション。
上記の自社サービスが押して納期がヤバい。特にバックエンド(怒)
9月末にキレイに仕事を納める。

2020/10〜
転職予定。

2021年残りの抱負

技術面:①TypeScript→業務で伸ばす。②バックエンドの知識→個人開発でNode.jsを触ってみる。
生活面: 腰痛予防に適度な運動をする。セルフマネジメントの習慣付け(空き時間の読書、運動、健康的な食生活etc...)。
仕事面:技術以外にも価値を生み出せるよう適切なコミュニケーションを図る。

「銀行丸め」を知っているか？（JavaScript版）

経緯

フロントエンドエンジニアとして、自社サービスのキャッシュレスPOSレジ（タブレットアプリ）をReact Nativeで開発しています。
先日、値引按分額を算出する際にデバッグしていたところ「1円がどうしても合わない！！！」と悩んでいました。
調べたところ、「銀行丸め」で計算すればOKとのこと。

「銀行丸め」とは何か

こちらの記事に詳しく書かれていました。
抜粋すると下記の通り。四捨五入の特殊版です。

「端数が0.5より小さいなら切り捨て、端数が0.5より大きいならば切り上げる。端数がちょうど0.5なら切り捨てと切り上げのうち結果が偶数となる方へ丸める。」 f:id:tsue_blog:20210805100231p:plain

前提

APIで下記のような会計処理するデータを取得したとする。

★ 問題ない会計パターン
[
　商品A:{
　　price:750,
　},
　商品B:{
　　price:300,
　},
　商品C{
　　price:1180,
　},
　subTotal:2230, //小計
　discount:0, //クーポン値引額
　total:2230, //最終支払額
]

しかし、上記のケースで値引クーポン（会計から400円値引する）がある場合はどうだろうか？
仕様により、「商品ごとに値引額を按分し、先に算出しないといけない」とする。

★ 1円ずれる会計パターン

400円を商品A~Cで按分(値引額 * 商品代金 / 小計)し、itemDiscountに代入
[
　商品A:{
　　price:300,
　　itemDiscount:54, //按分した単品の値引額
　},
　商品B:{
　　price:750,
　　itemDiscount:135, //按分した単品の値引額
　},
　商品C{
　　price:1180,
　　itemDiscount:212, //按分した単品の値引額
　},
　subTotal:2230,//小計
　discount:401,//クーポン値引額(54+135+212=401)
　total:1829,//最終支払額、正しくは1830
]

discount:401、、、だと！？
ちなみにitemDiscountの算出方法は
値引額 * 商品代金 / 小計 の四捨五入
つまり商品Aなら、
 400 * 300 / 2230 = 53.811....  →　四捨五入し「54円」

しかし、商品Bでは
 400 * 750/ 2230 = 134.5  →　四捨五入し「135円」となるが、 少数点第一位が.5なので 
「銀行丸め」により「134円」としないと1円オーバーしてしまう！
商品B:{
　price:750,
　itemDiscount:135, //1円オーバーの原因
},

答え

const calcItemDiscountWithCoupon = (orderData) => {
　const apportionmentPrice = 値引額 * 商品代金 / 小計
　//按分後、少数点以下が'.5'の場合に銀行丸めを行う
　if (apportionmentPrice.indexOf('.5') !== -1) {
　　//少数点以下を切捨て2で割りきれるか確認
　　const floorApportionmentPrice = Math.floor(apportionmentPrice)
　　if(floorApportionmentPrice % 2 === 0){
　　　return floorApportionmentPrice //偶数ならそのまま返す
　　} else{
　　　return Math.ceil(apportionmentPrice)//奇数ならapportionmentPriceを切り上げ
　　}
　}
}

これによって、商品Bの値引き額は「134円」になった！！！

この後に「単品でのディスカウントや消費税（8%・10%）」の分岐を踏まえて、
「内税算出（表示義務化が2021年4月施行）」するために必要な工程の一つでしたが、
基本的には上記で「銀行丸め」しました。

【React Native】'超'動的なフォーム作成

概要

動的に増減しつつ、順番をドラッグ＆ドロップで変更できるフォームを作成しました。 コードは下記のExpo Snackのリンクからご参照下さい。

動作確認

コードは下記

https://snack.expo.io/@tsue/super-dynamic-form

使用したライブラリ

"react-native-drax"

とうとうZennにデビューしてしまいました。

【React Native】動的な入力フォーム

動作

Image from Gyazo

コード&動作確認はこちら↓

snack.expo.io

概要

React Nativeにて、動的に入力フォームを増減。
肝は

const _inputs = [...inputs];

とスプレッドで複製し、もとの配列は破壊しないこと。

日曜日も仕事してるよ！😅
expo snack上だと、コード書きにくいんでstyleのリファクタリングは堪忍してや～

【pathを短く】config-overrides.jsに感動した話

経緯

いつも通り一人寂しく開発をしていたところ、超便利な機能を見つけてしまった。
その名もconfig-overrides.js。もうpathに悩まなくて済む！
今後は愛用していきたい。

導入

なにはともあれyarn

yarn add react-app-rewired --dev

Directory直下にconfig-overrides.jsを作成。

const path = require('path');
const { useBabelRc, override, addWebpackAlias } = require('customize-cra');

module.exports = override(useBabelRc(), addWebpackAlias({
  'components': path.resolve(__dirname, 'src/app/components'),
  'constants': path.resolve(__dirname, 'src/app/constants'),
  'pages': path.resolve(__dirname, 'src/app/pages'),
  'routes': path.resolve(__dirname, 'src/app/routes'),
  'utils': path.resolve(__dirname, 'src/app/utils'),
  'styles': path.resolve(__dirname, 'src/app/styles'),
}));

package.jsonのscriptsも修正。

 "scripts": {
    "start": "react-app-rewired start",
    ....
    },
    ....

本来であれば相対パスやらで書かなくてはいけないところ、下記のように短縮できる。

import CustomDatePicker from 'components/common/DatePicker/DatePicker';

【CSS】React NativeでTextにアニメーションを付ける

経緯

業務で実装中のアプリにて、文字にエフェクトを付ける必要があった。
react-native-animatableというライブラリが簡単。
下記のような感じになる。

コード

snack.expo.io iterationCount="infinite"でループする

例

https://i.gyazo.com/102c9d301f49a70a49f46f4a2d576f97.gif