happo31

画像認識プラットフォームの使用フレームワーク移植案件。 Vue.js で作成されたフロントエンドのコードを React.js へと移行する業務を行う。 会社に所属しているエンジニアのうち React.js をプロダクト品質で書けるメンバーがいなかったため、ヘルプとして参加。 長年 React.js を共通コンポーネントの作成や、 Vue.js には標準で存在する機能を React.js で再実装するといった成果を挙げる。

## 概要 - コメントが流れる動画視聴サービスの保守・継続開発 - 新機能の追加やバグの修正、パフォーマンス改善など ## 特徴 - 一部コードは10年以上保守されている - フロントエンドはモダンに保つという方針があった - アジャイル開発 ## 自身の役割 - 機能追加開発 - 一部、PHPで書かれたAPIサーバーの修正も担当 - Github のリポジトリに登録された Issue の修正 - 自分が入る前からあるものをやっつけた - モジュール分割を行ったことにより、アプリの起動時間が短縮された - webpack の設定を切り詰めて、ビルドしたJSファイルの容量が以前の半分ぐらいになった - コードベースの TypeScript への移行 - 徐々に JavaScript から TypeScript へと移行していく作業を率先して行うようにした。一時期はコードの修正量がチームの誰よりも多くなった - TypeScript 化もくもく会を週一でやってみたり - Jenkins を利用した CI の構築・保守

# 概要 PDF化された契約書類から、弊社が独自で開発した自然言語処理エンジンを用いて重要な単語を抜き出し、その部分をPDF上にハイライトしてくれる機能を持つウェブアプリケーションのウェブフロントエンド作成を担当 # 技術的な挑戦要素 - Microsoft Graph API を用いた AzureAD による認証の取り扱い - MobXによるパフォーマンスを意識したState管理 - react-pdf-highlighter を用いた単語ハイライト箇所の表示・編集機能の作成 - それぞれの大きさが変更可能な3カラム構成の画面の作成 # 役割 本アプリケーションにおけるウェブフロントエンドのほぼすべての作成工程を担当した。 社内向けアプリケーションとのことで機能数こそ多くはないものの、確実に動くことを求められたため、パフォーマンスを下げないために余計な再レンダリングが発生しないよう、MobXの仕様を理解しながらStateの管理方法に注意を払って作成した。 特に単語のハイライト表示をするために用いた react-pdf-highligher があまり筋のいい設計ではなかったため、時にはライブラリ内のソースコードを読みに行って動作を理解する必要があった。 大きさの変更可能な3カラム構成の画面の実現のために一部 react-dnd というライブラリを用いたが、これは単にドラッグアンドドロップとドロップ後の要素の大きさの制御を行うためのライブラリであり、要素が必要以上にドラッグ出来ないようにするためには自力でJavaScriptやCSSを書く必要があった。 振り返ればこのプロジェクトは非常に動きやすく、それはプロジェクトマネージャーによるタスク粒度の具合がとても適切であったことが多いにある。この場を借りて感謝を申し上げたい。