ゲスト紹介

• 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 さんが紹介したスライド

• その他移行時の知見はこちら
  • https://engineering.linecorp.com/ja/blog/typescript-enum-tree-shaking/

TypeScript へのマイグレーションの今後について

• 今回、TypeScript 対応できたのは全体の15%ほど
• 現段階で手応えはあるとのこと
• ゆっくり進む形になるが、既存開発と並行しつつ着実に、TypeScript へのマイグレーションを進める予定

Refs

カジュアル面談はこちら: https://linecorp.com/ja/career/position/475
BGM: 騒音のない世界
SE: 魔王魂