ID:28178さん

# 概要 * jQueryベースだった自社サービスのフロントエンドのコードをwebpack + TypeScriptによりモダナイズした * 再利用性の薄いjQuery DOMで作られていたコンポーネントの責務とユースケースを整理しReactのコンポーネントとして共通化した * 自社のフロントエンド基盤の技術を紐解き、必要なチームへのレクチャーや他部署とのコラボレーションした ## 詳細 ### webpack + TypeScriptによりモダナイズ 自社のフロントエンドの共通コードは巨大なグローバル変数への関数や変数登録により成り立っており、そのままwebpackに移行した際、ほぼ全ての共通変数が全てのページに露出してしまう状況となっていた。 実際に必要なグローバル変数とそうでないものにわけ、そうでないものについてはモジュール化し再利用可能としたあとTSに書き直した状態につくり直した。この際の技術検証・ロードマップ策定については自分で行い、作業の大部分については外部協力会社のエンジニアに依頼し協業することで作業速度を担保した。多少の課題は残るもののプロジェクト自体は完遂。 ### Reactのコンポーネントとして共通化 jQueryベースの共通コンポーネントであることにより、コンポーネントをnpmモジュールとして社内共通部品として公開できないという問題があるが、それを解消するためにReact化することで扱いやすくする試みを行なった。単純なコンポーネントであれば問題なく行えることは確認できたが、ステートフルな通信を行う必要があるコンポーネントなどについて工夫の余地があるため現状は仕掛かり中。他のプロジェクトの兼ね合いで別チームに引き継いだ。 ### チームへのレクチャーや他部署とのコラボレーション webpackやTypeScriptの導入にあたり想定される利用者向けの説明会・勉強会を開催したほか、実際の開発の際にペアプロ・モブプロなどでプロジェクトに参画している。