• @kimulacoさん
  • フロントエンド開発センター UIT 1室
  • LINE GIFTのフロントエンドをメインに担当

リニューアルの背景

• LINE GIFT
  • 友達や自分宛てに、Eギフトやお取り寄せギフトを贈れるサービス
  • 住所を知らない友達にギフトを送ることも可能
• LINE アンケート
  • ユーザーにアンケートを配信し、回答を受け付けるサービス

リニューアル企画の進め方

• GIFTとアンケートのリニューアル
  • 似たような状況からのリニューアル
  • AngularJS (Angular v1.x)からVue.js
  • Grunt から Webpackやコードスプリットなどのビルド改善
• リニューアルを始めたきっかけ
  • GIFT
    • リソースに余裕ができていた
    • フロントエンドエンジニアから他のチームに推薦
  • アンケート
    • 元々計画はあったがなかなか始められなかった
    • はるさめさんが入ったことなどをきっかけに企画が動き出した
• リニューアルの進め方
  • GIFT
    • ページ数は60-70ぐらい
    • 季節イベントが多い
    • フェースに分けてイベントと重ならないようにする
      • フェース 1 - 決済以外
      • フェース 2 - 決済周り
  • アンケート
    • 何段階に分けて実装中
      • 1. ビルドスタック改善
      • 2. テンプレートをバックエンドからフロントエンドに
      • 3. AngularJSからVue.js
    • リニューアルと平行するリリース作業はほとんどなかった

リニューアルをすることで気づいた良いことと悪いこと

• まだ使われているかどうかがわからないコードの対処
• 依存ライブラリーでの困りごと
  • OSSライブラリの社内ラッパー
    • 理由がわからないからとりあえず普通のOSSの最新版に
  • CSSのビルドツールをWebpackにするのが難しかった
    • わざわざWebpackにしなくてもいい場合もある

これからリニューアルをするリスナーへ一言

• Sentryなどのエラートラッキングをできるだけ早く入れた方がいい
  • エラーの原因を突き止めやすくなる
• 一気に書き換えるのではなく、ステップを踏むことが大事
  • 最初に手順を計画すると後々楽
• リニューアルしやすい設計もありなのでは？
  • Micro ServicesやMicro Front Endなど

PR

• UIT meetup vol.9 「The new normal for frontend」を開催しました！
  • https://uit.connpass.com/event/172078/
• フロントエンドエンジニア (Lead / Manager) カジュアル面談Days 実施中！
  • https://line.connpass.com/event/179229/

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic