$30 off During Our Annual Pro Sale. View Details »

Frontend Architecture of teamLab

simochee
November 16, 2019

Frontend Architecture of teamLab

チームラボはアートだけでなくWebやアプリの受託開発も行っています。

そんなチームラボのフロントエンドチームで使用しているアーキテクチャを実例を交えてご紹介します。

Frontend Conference Fukuoka 2019 にて登壇しました。
https://frontend-conf.fukuoka.jp/sessions#a-3

simochee

November 16, 2019
Tweet

Other Decks in Programming

Transcript

  1. フロントエンドカンファレンス福岡 スポンサーセッション
    チームラボ株式会社 teamLab Inc
    チームラボの
    フロントエンドアーキテクチャ
    フロントエンドチーム 田村亮弥

    View Slide

  2. 2
    公開先はこのあと、@teamlab_recruit にてツイートします
    このスライドは公開されます!

    View Slide

  3. 自己紹介
    3

    View Slide

  4. 自己紹介
    ● 1997年6月28日生まれ(22歳)
    ● 山口県下関市出身
    ● 宇部工業高等専門学校 制御情報工学科卒
    ● 2018年4月 チームラボに新卒入社
    ● 好きなもの:鉄道、東京03
    ● 好きなエディタ:VS Code
    ○ テーマ:Netflix Red theme
    ● 気になるもの: Parcel v2 / TypeScript 3.7
    田村 亮弥
    @lollipop_onl
    チームラボ株式会社
    フロントエンドチーム
    4

    View Slide

  5. チームラボの紹介
    5

    View Slide

  6. チームラボの各チーム
    6
    ● Webアプリケーションチーム
    ● フロントエンドチーム
    ● スマホアプリチーム
    ● インタラクティブチーム
    ● 機械学習チーム
    ● サーチ・レコメチーム
    ● ハードウェアチーム など
    ● UI / UX デザイナー
    ● ビジュアルデザイナー など
    650人
    ● カタリスト

    View Slide

  7. チームラボの受託開発は、初期の提案フェーズから行う。
    エンジニアはすべてのフェーズに参加する。
    チームラボの受託開発
    7
    提案 見積もり、実現の可否
    1
    要件定義 仕様の詰め、外部ベンダーとの連携
    2
    設計 / 実装 考える、作る、レビューする
    3
    テスト 仕様通りに動作するか確認
    4
    リリース リリースしてからがスタート
    5
    保守・追加開発 不具合、障害対応・追加開発
    6

    View Slide

  8. プロジェクトの規模
    ● 人数
    ○ 5人(カタリスト:1、デザイナー:1、フロントエンド:1、バックエンド:2)〜
    30人規模(カタリスト:3、デザイナー:3、フロントエンド:3、バックエンド:20、テスター:3)
    ○ フロントエンドは平均3〜4名
    ● 期間
    ○ 3ヶ月 〜 数年(保守を含む)
    8

    View Slide

  9. フロントエンドチーム
    ● メンバー:12人(平均: 27歳)
    ● 受託開発 / アート案件のJavaScript実装
    ○ Node.jsでのツール開発やサーバー開発を行うこともある
    ● 仕様やデザイン、API設計をそれぞれの担当者と検討
    ○ プロジェクトの中心で各方面と連携
    ● チーム内の活動
    ○ 週定例・タスクチェック
    ○ ナレッジ共有会 … 案件で利用した技術や体験の共有
    ○ 勉強会 … 担当者持ち回りで隔週で開催。最近の話題はReasonML、Svelte、DIなど
    9

    View Slide

  10. フロントエンドチームの実績
    10

    View Slide

  11. 成田空港リニューアル
    11

    View Slide

  12. イノベーション自販機
    12

    View Slide

  13. チームラボアプリ
    13

    View Slide

  14. スマホサイフ
    14

    View Slide

  15. マイナビバイト Webサイト
    15

    View Slide

  16. 本題
    16

    View Slide

  17. ご注意
    17
    このスライドでのアーキテクチャは「フロントエンド開発の構成そのもの」を指し、
    プロジェクトごとのフレームワークや周辺ツール、コーディング規約まですべてを含みます。

    View Slide

  18. 採用されたことのある技術
    18

    View Slide

  19. 今回フォーカスする部分
    19
    Webpackでのマークアップ環境構築
    実案件への採用と苦労話
    社内で自作ルールを作成

    View Slide

  20. 実案件への採用と苦労話
    20

    View Slide

  21. 21
    ● The Progressive Vue.js Framework
    ● サーバーサイドレンダリング(SSR)
    ● ルーティング
    ○ ディレクトリ構成からのルーティングの自動生成
    ● Webpack開発環境
    ● 静的サイトジェネレータ
    ○ SEOを意識したSPAアプリのビルド
    ● TypeScriptの公式サポート(Nuxt TypeScript)
    Nuxt.js - The Vue.js Framework

    View Slide

  22. 22
    ● 静的型付け、型推論
    ○ 型による動作保証
    ● 11/5に TypeScript 3.7.2 がリリースされた
    ○ Optional Chaining
    ■ ? をつけると値がなくても {} と解釈される
    ○ Nullish Coalescing
    ■ Null/Undefined のみ false となるOR比較
    TypeScript - JavaScript that scales.

    View Slide

  23. 採用実績
    23

    View Slide

  24. RAKURU
    24

    View Slide

  25. Nuxt採用の経緯
    ● バックエンドはAPIを開発する
    ● ページ表示速度の高速化のため、非同期ページ遷移(
    Pjax)をしたい
    ● SEOも考慮しなければならない
    ➢ SEO対応もできるSPA → Nuxt
    ● 初めての採用は2018年10月(当時 Nuxt 2.1.0)
    ● 現在は 7 案件で採用
    25

    View Slide

  26. Nuxtでの苦労話
    26

    View Slide

  27. Nuxt採用のメリット
    27
    ● バックエンドとフロントエンドの責務分割
    ○ バックエンドがメタタグの SSRだけ担当のようなことがなくなる
    ○ CMS組み込みにするとSPAにしづらい
    ● 初期コストの削減
    ○ 開発環境、ルーティング、 Vuexなど必要な機能があらかじめ揃っている

    View Slide

  28. 苦労①:ライブラリの使用
    ● ライブラリの読み込みがうまく行かない
    ○ window or document undefined
    ○ Tree Shakingはしたい
    ➢ プラグインとして読み込み
    28
    window or document undefined - NuxtJS

    View Slide

  29. 苦労①:ライブラリの使用
    ● Nuxtのドキュメントで紹介されている記法。
    29
    window or document undefined - NuxtJS

    View Slide

  30. 苦労②:lodash-esの使用
    ● lodash-esを使いたい
    ○ Tree Shakingしたい
    ○ Nodeが import 文を解釈できないため実行時エラーになる
    30

    View Slide

  31. 苦労②:lodash-esの使用
    ● build.transpile プロパティを使用する
    ○ マッチしたモジュールを Babelでトランスパイルできる
    ○ Nodeが参照するときにはトランスパイル済み
    31
    API: The build Property - NuxtJS

    View Slide

  32. 余談:Tree Shaking
    ● Tree Shakingの力
    ○ lodashのisEqualメソッドのみ使用した場合
    ○ lodash:527.84 KB (Stat size)
    ○ lodash-es:58.96 KB (Stat size)
    32

    View Slide

  33. 苦労③:Nuxtサーバーのメモリリーク
    ● Nuxtサーバーがメモリリークを起こしていた
    ○ ユーザーのアクセスに比例してメモリ使用率が上昇していた
    ○ 当初はメモリ使用率 2GB前後でサーバーがダウンしていた
    33
    2GB
    10/2 10/3 10/4

    View Slide

  34. 苦労③:Nuxtサーバーのメモリリーク
    ● 原因予測
    ○ VuexのSSR時のStateがメモリ内に残っている?
    ○ パースしたテンプレートの文字列がメモリ内に残っている?
    ● 暫定対応
    ○ Nodeのメモリ上限を 7GB に変更
    34

    View Slide

  35. 苦労③:Nuxtサーバーのメモリリーク
    ● 原因
    ○ Nodeのインスペクタのメモリスナップショットで開放されていないメモリを調査
    ○ クラスの静的メンバーの Mapへ値が追加され続けていた
    35

    View Slide

  36. 苦労④:複数のパスを持つページ
    ● 同じページなのに複数のパスを用意しなければ行けない場合
    ○ /pages/cart.vue と /pages/cart/_cartId.vue
    ○ いずれかを参照して export すればパスを量産できる
    36

    View Slide

  37. Webpackでのマークアップ環境構築
    37

    View Slide

  38. 38
    ● JavaScript静的モジュールバンドラー
    ○ 依存関係を解決して静的なファイルに書き出す
    ● Webpack 5.0.0-beta.0が10/11に公開された
    webpack

    View Slide

  39. フロントエンドとWebpack
    39
    ● フロントエンドチームでの開発環境の主力は Webpack
    ○ 少し前の案件はGulp + Webpackの構成が多い
    ○ 小規模な案件ではParcelが使わることもある
    ● マークアップをすることも多い
    ● PugのためだけにGulpは使用したくない
    ➢ Webpack でマークアップしたい

    View Slide

  40. vs HTMLWebpackPlugin
    ● HTMLWebpackPlugin
    ○ HTMLをビルドするプラグイン
    ○ 1ファイルにつき 1プラグイン必要
    ○ 動的なファイル追加・HMRが難しい
    ➢ HTMLWebpackPluginは使わない
    40

    View Slide

  41. WebpackでPugをビルド
    ① Pugのエントリーポイントファイルを作成
    ● Pugのエントリーポイントになる js ファイルを作成
    41
    webpackだけでpugをビルドする環境を作る - Qiita

    View Slide

  42. WebpackでPugをビルド
    ② Pug関連のLoaderを追加
    42
    webpackだけでpugをビルドする環境を作る - Qiita

    View Slide

  43. Pugファイル更新時のHMR
    ● Pugファイル更新時にリロードされない
    ○ webpack-dev-server の Hot Reload の設定と競合
    ➢ browser-sync でHMRさせる
    ○ webpackだけでpugをビルドする環境を作る - Qiita
    43
    webpackだけでpugをビルドする環境を作る - Qiita

    View Slide

  44. 社内で自作ルールを作成
    44

    View Slide

  45. コーディング規約
    45
    ● 社内でコーディング規約が統一できていなかった
    ● ただ、各自に好みのルールがあるのは事実
    ○ 個人的に comma-dangle は譲りたくない
    @team-lab/eslint-config - npm

    View Slide

  46. ESLintルールの自作
    ● フロントエンドチームでオリジナルの
    ESLintルールを作成
       @team-lab/eslint-config
       team-lab/eslint-config
    ● サポート
    ○ JavaScript / TypeScript
    46
    @team-lab/eslint-config - npm

    View Slide

  47. ESLintルールを自作して
    ● ソースコードの体裁を揃えるのは保守性が上がる
    ● 社内ルールということでプロジェクトに導入しやすい
    ● ルールに手を入れやすい
    ● ルールを検討する中で、JavaScriptの知識が増えた
    ○ no-caller
    ○ @typescript-eslint/unbound-method
    47

    View Slide

  48. ESLintの便利な機能
    ● overrides プロパティ
    ○ 対象のファイルでのルールを上書きする
    ○ Vueファイルのみで以下の設定を変更
    ■ this を使わないクラスメソッドの
    定義を許可
    ■ $_veeValidate という変数名を
    許可
    48

    View Slide

  49. ESLintの便利な機能
    ● --max-warnings オプション
    ○ エラーにしない警告の上限を設定
    ○ --max-warnings 0 で警告があればチェック後にエラーとなる
    ○ CIでのESLintチェックの際に警告も許したくない場合に便利
    49

    View Slide

  50. おわりに
    50

    View Slide

  51. チームラボではこういう人を募集しています
    51
    ● ものづくりが好きな人
    ● フロントエンドが好きな人
    ● 自発的に動ける人
    ● 面白い人
    teamLab recruit: https://www.team-lab.com/recruit
    Wantedly: https://www.wantedly.com/projects/21489

    View Slide

  52. ご清聴ありがとうございました
    52
    ブース出展もしているのでぜひお越しください!

    View Slide