AndAppのフロントエンド事情

by emahiro

Slide 1

Slide 1 text

AndAppのフロントエンド事情 ~SPA化からTypeScriptの導入まで~ 2019.02.19 hiromichi ema

Slide 2

Slide 2 text

自己紹介 name: 江間啓道 (Hiromichi Ema) twitter: @ema_hiro DeNA歴: 2年と4ヶ月くらい (キュレーション半年 -> OPF: 1年半ちょっと) job: AndAppのサーバーサイド/フロントエンドを担当してます。趣味: サッカー観戦、フットサル、カメラ

Slide 3

Slide 3 text

AndAppとは？

Slide 4

Slide 4 text

スマホゲームをPCでできるプラットフォーム ● スマホとPCでアカウントを同期できる。 ● AndAppポイントやツールなどの「捗る」をサポートする便利機能多数。 ● 興味がある方はぜひ -> https://www.andapp.jp にアクセスしてPCアプリをDLしてみてください。

Slide 5

Slide 5 text

本日話すこと ● AndAppクライアントのSPA化 ● AndAppクライアントのフロントエンドへのTypeScriptの導入について ※ この発表における「AndAppクライアント」とはユーザー向けに提供されてる UI部分を指します。

Slide 6

Slide 6 text

Slide 7

Slide 7 text

AndAppクライアントのSPA化

Slide 8

Slide 8 text

背景 ● AndAppクライアントのUI部分はelectronのwebviewで実装されている。 ● AndAppクライアントのタブを遷移ごとにこのwebviewの再読み込みがかかってページの表示に時間がかかっていた。 => ちょうどその頃AndAppクライアントの機能を再定義して、UIを刷新するというプロジェクトが立ち上がった。

Slide 9

Slide 9 text

AndAppクライアントリニューアルプロジェクト発足 ● 2017年夏ごろから足掛け1年半くらいかけてのAndAppクライアントのUIリニューアルプロジェクト (2017年夏にスタートし、最終的なリリースは2018年12月) ● UIを刷新するならせっかくなのでUI部分をSPA化して、タブ遷移時のユーザー体験を改善させることに。

Slide 10

Slide 10 text

リニューアル Phase1 - 2 リスティング機能、通知周りのUI刷新

Slide 11

Slide 11 text

Phase1~2でやったこと ● Vue.jsを採用してSPAとして再実装。 ● 対象はTOP・詳細・カテゴリ・通知一覧の画面。

Slide 12

Slide 12 text

なぜ、Vue.jsを採用したのか？

Slide 13

Slide 13 text

なぜ Vue.js? AndAppで使用実績がすでにあったから！ ● フロントエンドエンジニアが馴染んでいたこと。 ● VueのSFC(Single File Component)が書きやすかったこと。 ● 技術統一的な観点。

Slide 14

Slide 14 text

開発の仕方 1. Interfaceを決める。 2. サーバーからInterfaceに沿った素のjsonファイルを返すだけのEndpointを先んじて実装し、バックエンドとフロントエンドそれぞれでパラレルで開発。 3. 出来上がったEndpointからダミーと本番を差し替える。 ※ ありがちなパターンでAndAppプロジェクトに限った話はなし。

Slide 15

Slide 15 text

SPA化の効果 ● 読み込みは初回だけ時間がかかるが導入前に比べると改善された。 ● 問題だったタブ間遷移はサクサク動くように! ● フロントエンドのスキルスタックとしてSPAが追加され、少しだけモダンな開発環境になった。

Slide 16

Slide 16 text

Phase1~2の課題 ● APIとのつなぎこみやQA検証段階で見つかるバグがめちゃくちゃ多かった。 ○ しかも意図しない型違いや、undefinedエラーなど初歩的なエラーがポコポコ出てきてしまった。 ● その結果、UI側の検証項目(QCの項目)に対するバグ修正がめちゃくちゃ多くてフロントエンジニアが帰れなくなった。

Slide 17

Slide 17 text

Slide 18

Slide 18 text

TypeScriptの導入

Slide 19

Slide 19 text

背景 ● クライアントリニューアルプロジェクトの各段階は独立しており、phase1、2の課題点を phase3に持ち越したくなかった。 ● phase3は仕様としてもかなり大きく、このまま行くと検証がめっちゃ大変になりそうっていうことをなんとなく開発してるチーム内で感じていた。 ● 再び帰れなくなる日々が待ってるかも知れなかった。

Slide 20

Slide 20 text

リニューアルPhase3 ライブラリタブとツールタブの追加 (画像はライブラリタブのものです)

Slide 21

Slide 21 text

Phase3でやったこと ● TypeScriptの導入 ○ SFC以外では全面的に採用 ● 一部UnitTestの導入 ○ テストには「jest」を採用

Slide 22

Slide 22 text

なぜ、TypeScriptを採用したのか？

Slide 23

Slide 23 text

なぜ TypeScriptか？その１ Phase1~2の時の課題のおさらい ● 検証段階になってバグがめちゃくちゃでる ● UI側のバグ修正ががめちゃくちゃ出てフロントエンドの工数が肥大化する。この課題へのアプローチとして ● 実装段階で静的にチェックしてくれる機構が欲しくなった。 => 実装時に検出できる不具合や凡ミスはできるだけ実装時に気づきたい。

Slide 24

Slide 24 text

なぜ TypeScriptか？その２当初候補は２つあった ● TypeScript ● Flow TypeScriptに決めた理由 ● トランスパイルした結果、中間ファイルとしてjsが出力されるので捨てやすそうという期待。 ● TypeScriptがフロントエンドの流れ的に主流派になりそうな雰囲気があった。

Slide 25

Slide 25 text

マイグレーション方法 1. TypeScriptのルールを決める 2. 既存のES6のファイルを愚直にTypeScriptに書き換える 3. 新機能は最初からTypeScriptで実装

Slide 26

Slide 26 text

TypeScriptのルールを決める 1. tsconfigでどのルールを採用するかを検討。 a. noImplicitAny: true まで含めて採用 cf. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 2. tslintのルールも並行して決定。 a. tslint:latest に準拠

Slide 27

Slide 27 text

既存のES6のファイルを愚直にTypeScriptに書き換える 1. *.js -> *.ts に変更 2. コンパイルエラー解消 3. ファイル単位で相互にレビュー

Slide 28

Slide 28 text

新機能は最初からTypeScriptで実装先にTypeScriptに慣れていたので、特に問題なく進められた。

Slide 29

Slide 29 text

TypeScript導入の効果その１効果があったこと ● 実装時に防げるミスを実装時に寄せることができた。 ● 開発者体験の向上

Slide 30

Slide 30 text

TypeScript導入の効果その２効果がなかったこと ● 最終的なバグ、開発工数の減少には効果があまりなかった。 ● Phase3から一部ユニットテストを導入したが、ロジックのミス、開発工数の削減についてはこちらの方が効果があった。

Slide 31

Slide 31 text

その他 ● phase3の時からwebpack-dev-serverでlocalにserverを立ててレスポンスをmockに差し替えるという開発手法に変更。 ● Vuexに型をつけるという作業が結構手間取った。

Slide 32

Slide 32 text

まとめ

Slide 33

Slide 33 text

まとめ ● AndAppクライアントのフロントエンドは足掛け１年くらいかけてぼちぼちモダンな技術スタックになっていること。 ● リファクタリング(TypeScript化)と機能追加(ライブラリ/ツールの追加)は一緒に行ってはいけない。というあたり前のことに気付かされたこと。 ● 今後の野望 ○ 三重管理されているInterface定義をどうにかする。 ○ 別ウェブページとしてサーブされてるポイント機能を同じSPA上に乗せる & TypeScript 化 ○ Vue3.0にあげる(夏過ぎくらいに出るらしい）

Slide 34

Slide 34 text

ご静聴ありがとうございましたご意見ご質問等ありましたらお気軽に #times-emahiro まで