2020/07/31 に公開2168 views
@potato4d が、 @hyena_shoyo_kyo と @pittanko_pta に、TypeScriptへのマイグレーションを開始した、LINEポイントクラブのリファクタについて聞いてみました。
ゲスト紹介
- shoyo.kyo
- @hyena_shoyo_kyo
- フロントエンド開発センター UIT 1室
- LINEポイントクラブとLINE LIVEのフロントエンドをメインに担当
- amon.keishima
- @pittanko_pta
- LINE Growth Technology UIT Team
- LINEポイントクラブのフロントエンドをメインに担当
LINEポイントクラブとは
- 2013年にリリースをした、LINE運営のポイントサイトです。
- 2020年5月にサービス名を新たに、LINEポイントクラブと言う名称でリニューアル
- 2020年7月に大型リファクタがリリース
LINEポイントクラブの大型リファクタについて
- LINEで昔から使われている、cordovaベースの社内フレームワークをLIFFにマイグレーション
- リファクタ前の技術スタック
- cordovaベースの社内フレームワーク
- Vue JS 2.0
- jQuery
- 開発環境のモダン化を実施
- ECMAScriptをTypeScriptへマイグレーション開始（今回は第一弾対応）
- Skeleton Screen等のインタラクション処理を社内NPMパッケージ化
- 動作確認用のMockをPHPからNode.jsにマイグレーション
- リファクタ作業の規模
- 作業期間：5ヶ月
- 作業人数：2名
- タスク数：120件
- PR数：250件 （中規模小規模）
- 変更ファイル数：702件
- 変更行数： 47,342 行
- リファクタ前の技術スタック
TypeScript へのマイグレーションについて
- LINEポイントクラブのTypeScriptマイグレーション対応は中長期計画。
- ゼロベースでのTypeScript導入と、ECMAScriptをTypeScriptにマイグレーションするとでは、導入障壁の数が異なる
- 他の言語のマイグレーションと違い、TypeScriptは中長期で徐々にマイグレーションできる特徴がある
- TypeScriptを導入した目的とは？
- スローガン：新しいメンバーが古い技術を勉強することよりも、モダンな技術で即戦力となる環境を整備すること。
- => チームビルディングとメンバーのメンタルケア
- 稼働コストの削減はメンタルケアの影響による付加価値
- 稼働コストの削減は主にはおいていないが、LINEポイントクラブでは2年6ヶ月で投資コストの回収が可能と判断。
- 今の仲間と未来の仲間を救うためのTypeScript
TypeScript 移行の工夫
- allowJs オプションの有効化
- targetをes2019
- vue decoratorの導入は次フェーズに見送り
- fork-ts-cheker-webpack-plugin 導入。ビルド時間を短縮
- Karma => Jestに移行
- TODO
:any で攻めのAny - vueのcomputedを使って型定義
- jQueryのTypeScript 移行
- LIFF SDKの型定義 （2020年7月に公開された LIFF SDKのnpmパッケージの型定義を利用）
『改めて考えるフロントエンドライブラリAngular, Vue, React, jQuery etc… 〜何を利用してる？共有LT会〜』にて amon さんが紹介したスライド
TypeScript へのマイグレーションの今後について
- 今回、TypeScript 対応できたのは全体の15%ほど
- 現段階で手応えはあるとのこと
- ゆっくり進む形になるが、既存開発と並行しつつ着実に、TypeScript へのマイグレーションを進める予定