NOSU:RI.Home

某情報閲覧サイト改修、会員登録リプレイス

化粧品会社の診断アプリUI改修

ゲームプラットフォーム新規開発(フロントエンド)

ECサイト改修(BtoB)

某情報閲覧サイト改修、会員登録リプレイス
2023-06~現在

    Summary(概要)
  • ・情報閲覧サイトの改修・リプレイスに参画。UIデザイン改善から状態管理の最適化、テストコード整備まで幅広く担当。
    • Work Scope(業務範囲)
  • 内容詳細
    デザイン改修
    • FigmaデザインをReactコンポーネントに実装
    • iOS環境デザイン崩れ対応
    機能設計・ライブラリ移行
    • ContextAPIからRedux, Zustand移行調査・比較
    • 状態管理最適化の提案
    コンポーネント共通化再利用可能なコンポーネントの設計・実装
    テストコード作成ユニットテスト作成
    コードレビュー-
    • Technologies(技術構成)
  • 内容詳細
    言語
    • React
    • Nextjs
    • Typescript
    • HTML
    • CSS
    フレームワーク
    • React
    • Nextjs
    ライブラリ
    • Redux
    • Zustand
    OSLinux
    DBMySQL
    ツール
    • Backlog
    • Figma
    • slack
    • docker
    • Acquired Skills(習得スキル)
  • 内容詳細
    Nextjs 15系
    • AppRouter設計
    • server, clientコンポーネント設計
    • server-actions設計
    状態管理ライブラリ比較検討サンプルアプリ作成し、導入比較検討
    ファシリテーション力
    • 朝会の進行
    • タイムキーパー
    • チームメンバーとのコミュニケーション
    • Method(手法)
  • 内容詳細
    アジャイルスクラムをベースとして反復型開発
    • Process
    工程要否
    Requirements Definition(要件定義)✕
    Basic Design(基本設計)◯
    Detailed Design(詳細設計)◯
    Development(開発)◯
    Testing(テスト)◯
    Maintenance(運用・保守)◯

化粧品会社の診断アプリUI改修
2023-03~2023-06

    Summary(概要)
  • ・化粧品会社の診断アプリ改修(LineブラウザLIFFと店舗で使用するWebアプリ)
    • Work Scope(業務範囲)
  • 内容詳細
    デザイン改修-
    ライブラリ移行React-Bootstrap -> slick
    多言語対応react-i18nextで対応
    負荷改善再レンダー改善
    テストコード作成Vitestによる遷移テスト
    コードレビュー-
    • Technologies(技術構成)
  • 内容詳細
    言語
    • React
    • Typescript
    • HTML
    • CSS
    フレームワークReact
    ライブラリ
    • react-i18next
    • slick
    • React-bootstrap
    • recharts
    OSLinux
    DBMySQL
    ツール
    • Backlog
    • Figma
    • Acquired Skills(習得スキル)
  • 内容詳細
    vitestライブラリモック方法-
    独自モジュール調査exmodule, commonjsによりimport, requireで記載が異なる
    多言語対応react-i18next
    • Method(手法)
  • 内容詳細
    アジャイル-
    • Process
    工程要否
    Requirements Definition(要件定義)✕
    Basic Design(基本設計)✕
    Detailed Design(詳細設計)◯
    Development(開発)◯
    Testing(テスト)◯
    Maintenance(運用・保守)◯

ゲームプラットフォーム新規開発(フロントエンド)
2020-12~2023-03

    Summary(概要)
  • ・ゲームを遊戯できるプラットフォームWebアプリ新規開発。配信機能や複数ゲームの起動が可能なプラットフォーム
    • Work Scope(業務範囲)
  • 内容詳細
    Spineアバターアニメーション実装仮想ゲーム画面にアバターを表示させ、視聴者・配信者アバターにアニメーションさせる
    配信サムネイル編集機能作成
    • 画像をユーザーがトリミングできる機能
    • ライブラリ移行
    GoogleAnalytics対応
    • 内部モーダルの画面情報の送信
    • 独自イベント作成
    プッシュ通知バナー遷移機能
    • Firebaseでバナー押下時のイベントをWebアプリに送信
    UIデザイン対応Figmaデザインのコンポーネント落とし込み
    負荷改善
    • 負荷がかかる処理調査
    • 再レンダー改善
    モバイル端末依存不具合対応
    • iOS14でflex-gapが効かない
    • ソフトウェアキーボードなどネイティブ機能の調査
    visxによるグラフ作成
    • グラフの表示
    • 拡大・縮小機能
    • Technologies(技術構成)
  • 内容詳細
    言語
    • React
    • Typescript
    フレームワークReact
    ライブラリ
    • RxJS
    • framer-motion
    • pixi.js
    • antmedia
    • vite
    • storybook
    • visx
    OSLinux
    DBMySQL
    パッケージEccube3系
    ツール
    • Backlog
    • WinMerge
    • Acquired Skills(習得スキル)
  • 内容詳細
    ライブラリ内部コード調査-
    モバイル端末の不具合調査・修正-
    関心分離したプログラムの実装-
    必要最小限でのcssデザインの組み方-
    React独自hooksの作成-
    rxjsを用いた非同期処理-
    TypescriptのGenericsでの型限定方法-
    コードレビュー-
    • Method(手法)
  • 内容詳細
    アジャイル-
    • Process
    工程要否
    Requirements Definition(要件定義)✕
    Basic Design(基本設計)✕
    Detailed Design(詳細設計)◯
    Development(開発)◯
    Testing(テスト)◯
    Maintenance(運用・保守)◯

ECサイト改修(BtoB)
2020-06~2020-11

    Summary(概要)
  • ・加盟店に商品を販売するBtoBのECサイトの新規機能作成、不具合改修
    • Work Scope(業務範囲)
  • 内容詳細
    バッジ処理受注に関するメールバッジ処理
    外部API連携在庫連携
    • Technologies(技術構成)
  • 内容詳細
    言語PHP
    フレームワークSymfony2
    OSLinux
    DBMySQL
    パッケージEccube3系
    ツール
    • Backlog
    • WinMerge
    • Acquired Skills(習得スキル)
  • 内容詳細
    バッジ実装方法クーロン設定
    Linux操作-
    template Twigの記法-
    Git操作Gitlabでプロジェクト管理
    • Method(手法)
  • 内容詳細
    アジャイル-
    • Process
    工程要否
    Requirements Definition(要件定義)✕
    Basic Design(基本設計)✕
    Detailed Design(詳細設計)◯
    Development(開発)◯
    Testing(テスト)◯
    Maintenance(運用・保守)◯
;