Open1

PRの振り返り

Hiroki ShimizuHiroki Shimizu

Reviewing PR

Project No.4 toB 組織マネジメントSaaS

  • BE
    • Go(Gin, GORM)
    • クリーンアーキテクチャ
    • ドメイン駆動
  • FE
    • TypeScript,React/Next.js
    • App router, Zustand, SWR, (RHF→)React Conform with Zod validation, Container/View Arch, Server Actions for Mutations(データ変更), SWR for Queries(データ取得)
  • Infra
    • AWS, Docker, Github Actions
PRレビュー:Zustandを使ったパネル開閉の状態管理
サイドパネルをドラッグで広げたり縮めたりできるようにする。
  • 実装方針が思い浮かばないので調査から入る。
    • AIに聞く。
    • 自前で実装とライブラリでの実装のパターン三つを教えてれる。自前でもそんなに肥大化しなそうなので、キャッチアップ容易性と保守性の観点で自前で実装にすることに決定。
  • 実装
    • <ResizeHandle />コンポーネントを作成。カスタムフックで操作する。
      • パネル(親: relative goroup)の左側一体(子div: absolute group-hover:opacity)を反応させる
    • ロジックの作成
      • onPointerDown={handlePointerDown}
        • handlePoiterMove()
        • handlePointerUp()
        • documentレベルでイベントを管理。メモリリークや、挙動ズレをなくす
    • リロード時も幅を保持する
      - localとsession Storageの判断はどちらでも良かったので、既存のコードに合わせてlocalでsessionで実装
サイドバーの警告タブ選択時、オブジェクティブ付け替えボタンを表示しないようにする

概要から、すでにあるコンポーネントの表示の切り替えであることがわかる。
なんとなく、booleanのpropsを渡して、表示の切り替えをするだろうなと思い描く

  • オブジェクティブ付け替えボタン<switchObjectiveButton />コンポーネントはすでにある。
  • サイドバーの警告タブ選択時、表示しない。
    • !sideBarAlertTab: bool && <switchObjectiveButton />的な実装

Project No.3 toC 交通予約システム(基本設計〜結合テスト)

Java エンタープライズ開発

① ホストサーバーの負荷分散対応

  • システムの単一障害点(SPOF)となるホスト
    サーバーへの処理集中を回避するため、処理
    の他サーバーへの分散移行および不要処理の
    廃止対応を実施(どのデータと処理をどのサーバーで責務を負わせるか)
  • 現行処理の分析から影響範囲調査を行い、パ
    フォーマンス・信頼性の観点から代替案を複
    数提示
  • 基本設計~結合テストまでを一貫して担当
    し、システム全体の安定稼働性と拡張性向上
    に寄与
  • ログの整備
    • 必要なデータの洗い出し
    • データの抽出
    • データの加工
    • ログの吐き出し

② 海外旅行代理店向け画面の英語対応

  • グローバル対応として、海外旅行代理店向け
    予約画面においてユーザーフラグに応じた言語
    表示切り替え
  • 単体テスト~結合テストを通じて、品質面の
    信頼性向上と多国籍ユーザーへの利用拡大に
    貢献
    https://chhao-serv.com/?p=567

Project No.2 toC 交通インフラシステム(総合テスト)

E2Eテスト、Linux ICMPを使ってサーバー間連携の確認

① システム全体の動作確認(end-to-end)
高速道路の料金所に設置された顧客対応端末
と、料金システム/課金システム/顧客管理シ
ステムなどとのシステム間連携の動作検証を
実施
テストシナリオに基づく網羅的な動作確認に
より、現場でのユーザー体験を想定した品質
担保を実現

② サーバ連携・障害解析
複数の業務サーバーに接続し、実際の電文
(通信ログ)を解析
障害発生時には迅速に原因を特定し、再現条
件・影響範囲を論理的に整理したうえでチ
ケットを作成

Project No.1 toC 中規模ポイントサイト(開発・テスト・保守)

ユーザーに紐づくポイント失効日をAPIから取得、mobile, webのフロントそれぞれで受け取って日数により条件分岐しモーダルを表示する。(PHP, React, TypeScript)
  • 概要
    • ポイント失効通知の仕様変更対応(API設
      計・開発、マルチデバイス対応)
  • API詳細設計書
  • 実装
    • 境界値データの洗い出し
    • SQLでinsertしてデータを用意
    • postmanでデータが取れるか確認
    • フロントで受け取り条件分岐ロジックを通して表示する
  • UnitTestのルールブックに基づいて単体テスト
    • 境界値テスト
  • 画面で総合テスト
    • stg環境でテスト
      • データの用意
    • prd環境で問題ないか見届け
管理画面でポイント有効対象のurlを設定する(VanillaJS, PHP, MySQL)
  • 概要
    • 管理画面機能の追加開発(マーケ部門向け
      の集計・設定機能)
  • チェックボックスが押下されると、入力できる(disabled)
  • urlの入力フォーム
    • フロントとバックでバリデーション(regular expression)
    • フォームセキュリティ(htmlspecialchracters, CSRF)
  • CSRF
    • 目的は、不正な(悪意のある)場所に飛ばされないようにする。
    • バックエンドでトークンの発行する
    • フロントエンドでトークンが一致するか確認する