UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. ゲスト紹介
    01:06
  • 2. リニューアルの規模と範囲
    02:00
  • 3. 大型リニューアルの進め方
    04:32
  • 4. 中長期で向き合う TS 移行
    14:01
  • 5. 大型移行を円滑にする TS テクニック
    28:23
  • 6. 手応えとこれから
    39:57
  • 7. クロージング
    42:25

ep.55 TypeScriptへのマイグレーション対応開始!LINEポイントクラブのリファクタについて聞いてみた。

2020/07/31
985 views
HANATANI Takuma Pittan shoyo.kyo

@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 へのマイグレーションを進める予定

Refs

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

10秒前へ 10秒次へ