Slide 1
Slide 1 text
フロントエンドカンファレンス福岡 スポンサーセッション
チームラボ株式会社 teamLab Inc
チームラボの
フロントエンドアーキテクチャ
フロントエンドチーム 田村亮弥
Slide 2
Slide 2 text
2
公開先はこのあと、@teamlab_recruit にてツイートします
このスライドは公開されます！
Slide 3
Slide 3 text
自己紹介
3
Slide 4
Slide 4 text
自己紹介
● 1997年6月28日生まれ（22歳）
● 山口県下関市出身
● 宇部工業高等専門学校 制御情報工学科卒
● 2018年4月 チームラボに新卒入社
● 好きなもの：鉄道、東京03
● 好きなエディタ：VS Code
○ テーマ：Netflix Red theme
● 気になるもの： Parcel v2 / TypeScript 3.7
田村 亮弥
@lollipop_onl
チームラボ株式会社
フロントエンドチーム
4
Slide 5
Slide 5 text
チームラボの紹介
5
Slide 6
Slide 6 text
チームラボの各チーム
6
● Webアプリケーションチーム
● フロントエンドチーム
● スマホアプリチーム
● インタラクティブチーム
● 機械学習チーム
● サーチ・レコメチーム
● ハードウェアチーム など
● UI / UX デザイナー
● ビジュアルデザイナー など
650人
● カタリスト
Slide 7
Slide 7 text
チームラボの受託開発は、初期の提案フェーズから行う。
エンジニアはすべてのフェーズに参加する。
チームラボの受託開発
7
提案 見積もり、実現の可否
1
要件定義 仕様の詰め、外部ベンダーとの連携
2
設計 / 実装 考える、作る、レビューする
3
テスト 仕様通りに動作するか確認
4
リリース リリースしてからがスタート
5
保守・追加開発 不具合、障害対応・追加開発
6
Slide 8
Slide 8 text
プロジェクトの規模
● 人数
○ 5人（カタリスト：1、デザイナー：1、フロントエンド：1、バックエンド：2）〜
30人規模（カタリスト：3、デザイナー：3、フロントエンド：3、バックエンド：20、テスター：3）
○ フロントエンドは平均３〜４名
● 期間
○ ３ヶ月 〜 数年（保守を含む）
8
Slide 9
Slide 9 text
フロントエンドチーム
● メンバー：12人（平均: 27歳）
● 受託開発 / アート案件のJavaScript実装
○ Node.jsでのツール開発やサーバー開発を行うこともある
● 仕様やデザイン、API設計をそれぞれの担当者と検討
○ プロジェクトの中心で各方面と連携
● チーム内の活動
○ 週定例・タスクチェック
○ ナレッジ共有会 … 案件で利用した技術や体験の共有
○ 勉強会 … 担当者持ち回りで隔週で開催。最近の話題はReasonML、Svelte、DIなど
9
Slide 10
Slide 10 text
フロントエンドチームの実績
10
Slide 11
Slide 11 text
成田空港リニューアル
11
Slide 12
Slide 12 text
イノベーション自販機
12
Slide 13
Slide 13 text
チームラボアプリ
13
Slide 14
Slide 14 text
スマホサイフ
14
Slide 15
Slide 15 text
マイナビバイト Webサイト
15
Slide 16
Slide 16 text
本題
16
Slide 17
Slide 17 text
ご注意
17
このスライドでのアーキテクチャは「フロントエンド開発の構成そのもの」を指し、
プロジェクトごとのフレームワークや周辺ツール、コーディング規約まですべてを含みます。
Slide 18
Slide 18 text
採用されたことのある技術
18
Slide 19
Slide 19 text
今回フォーカスする部分
19
Webpackでのマークアップ環境構築
実案件への採用と苦労話
社内で自作ルールを作成
Slide 20
Slide 20 text
実案件への採用と苦労話
20
Slide 21
Slide 21 text
21
● The Progressive Vue.js Framework
● サーバーサイドレンダリング（SSR）
● ルーティング
○ ディレクトリ構成からのルーティングの自動生成
● Webpack開発環境
● 静的サイトジェネレータ
○ SEOを意識したSPAアプリのビルド
● TypeScriptの公式サポート（Nuxt TypeScript）
Nuxt.js - The Vue.js Framework
Slide 22
Slide 22 text
22
● 静的型付け、型推論
○ 型による動作保証
● 11/5に TypeScript 3.7.2 がリリースされた
○ Optional Chaining
■ ? をつけると値がなくても {} と解釈される
○ Nullish Coalescing
■ Null/Undefined のみ false となるOR比較
TypeScript - JavaScript that scales.
Slide 23
Slide 23 text
採用実績
23
Slide 24
Slide 24 text
RAKURU
24
Slide 25
Slide 25 text
Nuxt採用の経緯
● バックエンドはAPIを開発する
● ページ表示速度の高速化のため、非同期ページ遷移（
Pjax）をしたい
● SEOも考慮しなければならない
➢ SEO対応もできるSPA → Nuxt
● 初めての採用は2018年10月（当時 Nuxt 2.1.0）
● 現在は 7 案件で採用
25
Slide 26
Slide 26 text
Nuxtでの苦労話
26
Slide 27
Slide 27 text
Nuxt採用のメリット
27
● バックエンドとフロントエンドの責務分割
○ バックエンドがメタタグの SSRだけ担当のようなことがなくなる
○ CMS組み込みにするとSPAにしづらい
● 初期コストの削減
○ 開発環境、ルーティング、 Vuexなど必要な機能があらかじめ揃っている
Slide 28
Slide 28 text
苦労①：ライブラリの使用
● ライブラリの読み込みがうまく行かない
○ window or document undefined
○ Tree Shakingはしたい
➢ プラグインとして読み込み
28
window or document undefined - NuxtJS
Slide 29
Slide 29 text
苦労①：ライブラリの使用
● Nuxtのドキュメントで紹介されている記法。
29
window or document undefined - NuxtJS
Slide 30
Slide 30 text
苦労②：lodash-esの使用
● lodash-esを使いたい
○ Tree Shakingしたい
○ Nodeが import 文を解釈できないため実行時エラーになる
30
Slide 31
Slide 31 text
苦労②：lodash-esの使用
● build.transpile プロパティを使用する
○ マッチしたモジュールを Babelでトランスパイルできる
○ Nodeが参照するときにはトランスパイル済み
31
API: The build Property - NuxtJS
Slide 32
Slide 32 text
余談：Tree Shaking
● Tree Shakingの力
○ lodashのisEqualメソッドのみ使用した場合
○ lodash：527.84 KB (Stat size)
○ lodash-es：58.96 KB (Stat size)
32
Slide 33
Slide 33 text
苦労③：Nuxtサーバーのメモリリーク
● Nuxtサーバーがメモリリークを起こしていた
○ ユーザーのアクセスに比例してメモリ使用率が上昇していた
○ 当初はメモリ使用率 2GB前後でサーバーがダウンしていた
33
2GB
10/2 10/3 10/4
Slide 34
Slide 34 text
苦労③：Nuxtサーバーのメモリリーク
● 原因予測
○ VuexのSSR時のStateがメモリ内に残っている？
○ パースしたテンプレートの文字列がメモリ内に残っている？
● 暫定対応
○ Nodeのメモリ上限を 7GB に変更
34
Slide 35
Slide 35 text
苦労③：Nuxtサーバーのメモリリーク
● 原因
○ Nodeのインスペクタのメモリスナップショットで開放されていないメモリを調査
○ クラスの静的メンバーの Mapへ値が追加され続けていた
35
Slide 36
Slide 36 text
苦労④：複数のパスを持つページ
● 同じページなのに複数のパスを用意しなければ行けない場合
○ /pages/cart.vue と /pages/cart/_cartId.vue
○ いずれかを参照して export すればパスを量産できる
36
Slide 37
Slide 37 text
Webpackでのマークアップ環境構築
37
Slide 38
Slide 38 text
38
● JavaScript静的モジュールバンドラー
○ 依存関係を解決して静的なファイルに書き出す
● Webpack 5.0.0-beta.0が10/11に公開された
webpack
Slide 39
Slide 39 text
フロントエンドとWebpack
39
● フロントエンドチームでの開発環境の主力は Webpack
○ 少し前の案件はGulp + Webpackの構成が多い
○ 小規模な案件ではParcelが使わることもある
● マークアップをすることも多い
● PugのためだけにGulpは使用したくない
➢ Webpack でマークアップしたい
Slide 40
Slide 40 text
vs HTMLWebpackPlugin
● HTMLWebpackPlugin
○ HTMLをビルドするプラグイン
○ 1ファイルにつき 1プラグイン必要
○ 動的なファイル追加・HMRが難しい
➢ HTMLWebpackPluginは使わない
40
Slide 41
Slide 41 text
WebpackでPugをビルド
① Pugのエントリーポイントファイルを作成
● Pugのエントリーポイントになる js ファイルを作成
41
webpackだけでpugをビルドする環境を作る - Qiita
Slide 42
Slide 42 text
WebpackでPugをビルド
② Pug関連のLoaderを追加
42
webpackだけでpugをビルドする環境を作る - Qiita
Slide 43
Slide 43 text
Pugファイル更新時のHMR
● Pugファイル更新時にリロードされない
○ webpack-dev-server の Hot Reload の設定と競合
➢ browser-sync でHMRさせる
○ webpackだけでpugをビルドする環境を作る - Qiita
43
webpackだけでpugをビルドする環境を作る - Qiita
Slide 44
Slide 44 text
社内で自作ルールを作成
44
Slide 45
Slide 45 text
コーディング規約
45
● 社内でコーディング規約が統一できていなかった
● ただ、各自に好みのルールがあるのは事実
○ 個人的に comma-dangle は譲りたくない
@team-lab/eslint-config - npm
Slide 46
Slide 46 text
ESLintルールの自作
● フロントエンドチームでオリジナルの
ESLintルールを作成
@team-lab/eslint-config
team-lab/eslint-config
● サポート
○ JavaScript / TypeScript
46
@team-lab/eslint-config - npm
Slide 47
Slide 47 text
ESLintルールを自作して
● ソースコードの体裁を揃えるのは保守性が上がる
● 社内ルールということでプロジェクトに導入しやすい
● ルールに手を入れやすい
● ルールを検討する中で、JavaScriptの知識が増えた
○ no-caller
○ @typescript-eslint/unbound-method
47
Slide 48
Slide 48 text
ESLintの便利な機能
● overrides プロパティ
○ 対象のファイルでのルールを上書きする
○ Vueファイルのみで以下の設定を変更
■ this を使わないクラスメソッドの
定義を許可
■ $_veeValidate という変数名を
許可
48
Slide 49
Slide 49 text
ESLintの便利な機能
● --max-warnings オプション
○ エラーにしない警告の上限を設定
○ --max-warnings 0 で警告があればチェック後にエラーとなる
○ CIでのESLintチェックの際に警告も許したくない場合に便利
49
Slide 50
Slide 50 text
おわりに
50
Slide 51
Slide 51 text
チームラボではこういう人を募集しています
51
● ものづくりが好きな人
● フロントエンドが好きな人
● 自発的に動ける人
● 面白い人
teamLab recruit: https://www.team-lab.com/recruit
Wantedly: https://www.wantedly.com/projects/21489
Slide 52
Slide 52 text
ご清聴ありがとうございました
52
ブース出展もしているのでぜひお越しください！