2019/07/23 モダンフロントエンド勉強会〜進化し続けるUXとDX〜 に参加してきました！
2019/07/23（火）に開催されたモダンフロントエンド勉強会〜進化し続けるUXとDX〜 に参加してきました！
パネルディスカッションと質疑応答の内容まとめます。
- 会社紹介＆技術スタック紹介
- ラクスル株式会社の水島 壮太氏
- サイボウズ株式会社の小林 徹氏
- パネルディスカッション
- 6つめ：自社がフロントエンドエンジニアに期待していることをぜひ教えてください
- 会場からのQAタイム！！！
- 感想
会社紹介＆技術スタック紹介
freee株式会社の加藤 慧氏
- 2013年頃に技術選定をおこなったため、当時の選択としては妥当
ラクスル株式会社の水島 壮太氏
- ビジュアルや見た目が大切になるので、グラフィック系のJSを使用
サイボウズ株式会社の小林 徹氏
- 専門的にサポートするチームがある
パネルディスカッション
ファシリテーターの方が6つの質問に従ってパネラーの方々に尋ねていく形式でした。
1つめ：自社のフロントエンドサービスではどんなフロントエンド技術を使っていますか？
サイボウズ株式会社の小林 徹氏
- 技術選定について
- 例：Closure Toolsについて
- 当時はVue.jsやReact.jsはなかった
- 型安全のものを作りたかったので、当時の選択としては妥当
- 例：Closure Toolsについて
- 過去からどんな変遷があったの？
- 現状では固有のシステムになってしまった
- まだ脱却できていないのでこれから
- 各技術のメリット・デメリット
- 選定する技術として、会社では指針は設けていない
- 作るプロダクト規模感を意識し、型安全な言語を選ぶよう意識している
freee株式会社の加藤 慧氏
- 技術選定について
- ノウハウがあった技術を当時は選んでいた
- Vue.js 1.0を導入したときには、やんちゃな心が残っていた
- 基本的には長いものには巻かれろな精神
- メジャーに使われていて、issuseが少ないライブラリ
- 過去からどんな変遷があったの？
- メジャーなものを取り言えれることで安定した開発を実現できていることはいい流れ
ラクスル株式会社の水島 壮太氏
- 技術選定について
- 2年前
- モノリシックなシステム
- 部分的に導入を考えていたのでVue.jsを導入
- そこからVue.jsに舵切りしていく
- 最近
- 新規プロダクト
- 思い切って技術的チャレンジをしていこう！ということでNuxt.jsを行って、事例を作れたので、横展開を行っている
- 新規プロダクト
- 2年前
- 各技術のメリット・デメリット
- メリット
- 新しい技術を取り入れるとエンジニアの人がテンションが上がって仕事してくれる（PO目線）
- デメリット
- 既存で入っていたタグが入れれないパターンが多発
- 分析関係は早めに確認して、マーケ側などと相談して入れる入れないを決める必要がある
- 既存で入っていたタグが入れれないパターンが多発
- メリット
+α 新しい技術を使うことを組織的に推奨してるか？
サイボウズ株式会社の小林 徹氏
- 目的があるならOK
- フロントエンドの場合、Reactシフトでモチベーションにつながっている
freee株式会社の加藤 慧氏
- 最近やってみたい技術はありますか？
- 特にない
- 新しい技術を追加するのはよいことだが、ノウハウがないものを入れると苦労が伴う（その苦労をした経験者が多い）
- よく使われているメジャーなものを使うことの方が多め
2つめ：サービスのパフォーマンスを高めるためにしていることを教えてください！
ラクスル株式会社の水島 壮太氏
- パフォーマンスの定義は曖昧
サイボウズ株式会社の小林 徹氏
- BtoBなので、BtoCよりパフォーマンスはクリティカルではない
- サービスの性質上、ユーザーがJSを書いてAPIを叩くことが可能なため、SQLのチューニングは行う
- クライアントサイドではパフォーマンスなんなの？を読書会したり、speedcurveをいれたりしており、現状は、パフォーマンスがどうなっているかを知るフェーズ
- データを元に改善を検討している
- USのサービスだとネット環境が日本より安定しない環境なことも多いので、ファイルサイズのケアは意識
freee株式会社の加藤 慧氏
- toB サービスはネットワーク制限を受けることが少ないので、その点は考慮してない
- 仮想DOMを正しく使うことが大切なので、どちらかというとクリーンチューニングの世界
- Reactが出る前はいろんな知識を使ってチューニングしていた
- 仮想DOMを正しく使うことで賄えそう
3つめ：品質担保するための取り組みを教えてください
freee株式会社の加藤 慧氏
- スナップショットテストを導入
- マニクレーションてすとはメンテコストが高いのでやっていない
- storybookに追加できるコンポーネント＝責務が分解できている
- Linterやprettierでコードを担保している
ラクスル株式会社の水島 壮太氏
- 品質管理にもいろんな観点がある
サイボウズ株式会社の小林 徹氏
- CIやJenkinsを導入
- QAチームと一緒にスクラムをしているチーム
- モブプロで一緒にテスト書くチームもある
- テストピラミッドを用いながら、カバーできる範囲を増やしている
- プロダクトでチームが分かれているので、色んな人が話し合って品質をあげている
+α：QAチームはありますか？
freee株式会社の加藤 慧氏
4つめ：ワークフローで工夫していることがあれば教えてください
サイボウズ株式会社の小林 徹氏
- 各プロダクトのヘビーユーザーは社内
- githubのdevelopにマージされると、順に開発環境、社員環境、本番環境へ自動デプロイ
- 社内でスクラムが流行り、今ではモブプロが流行
- Zoomでモブプロしている
- レビューのコストの削減や属人化が解消できる
- 最近ではモブプロ勉強会
- よくないところもあるよね、と反省
- 上がったデメリット
- 個人の成長がないがしろにされる（ みんなで考えるので、1人で考えて解決するプロセスがなくなる）
- 単純に疲れる
- モブプロに適切じゃないタスクもあるので、使い分けが必要そう
- 上がったデメリット
- チームでタスクをこなしていく精神はよい
- よくないところもあるよね、と反省
ラクスル株式会社の水島 壮太氏
freee株式会社の加藤 慧氏
- 同じくモブプロを導入
- ライブコーディングをする頻度が多め
- 社内はフロントエンド、バックエンドの区切りがなく、アプリエンジニアとして領域は広めに業務を遂行
- 専門知識が身に付かないデメリットはあるが、いろんな知識が身につく
- 考えていることを口に出しながら実施
- ライブコーディングしている人の手先を見て勉強になった！という話はよく聞く話
+αモブプロ知見
- 社内はフロントエンド、バックエンドの区切りがなく、アプリエンジニアとして領域は広めに業務を遂行
- 会議室でモニターがおいてある方向（椅子の向きとは違う方向）を向いて実施すると、首が痛くなるので、気をつける
- 椅子とパソコンの向きに合わせて行うことが大切
- パソコンに向き合うために、ハングアウトを使ってやってみる
5つめ：フロントエンドエンジニアが働きやすい環境とはどんな環境だと思いますか？
freee株式会社の加藤 慧氏
- 社内ではアプリエンジニアとして領域を幅広くやっているため、フロントエンドとしての働きやすい環境は述べにくい
- サーバー＆フロントを見ているので、お互いがどうしているのか気になるところ
- フロントエンドエンジニア×デザイナーORビジネスサイドとの関わり
- フロントエンドエンジニアは、デザインを真っ先に知る顧客のうちの1人
- UIに関する感じた違和感をデザイナーORビジネスサイドに共有するフローは確立済み
サイボウズ株式会社の小林 徹氏
- Freeeさん同様にフロントやバックの区分けがないため、フロントエンドとしての働きやすい環境はわからない
- フロントエンドエンジニア×デザイナーORビジネスサイドとの関わり
- SmartHRさんの事例（※技術顧問をされているため）
- UIの良さを押していることから、プロダクトとしてよいユーザー体験を作ろうとしている
- フロントエンドエンジニアは重宝される
- UIの良さを押していることから、プロダクトとしてよいユーザー体験を作ろうとしている
ラクスル株式会社の水島 壮太氏
- フロントとサーバーで業種はわかているが、どちらかに歩み寄っている人もいる
- フロントエンドの働きやすい環境
- 人数がすくないため、 フロント < サーバー < インフラ の順で意見が通りやすくなりがち
- フロントエンドが多数派になること
- よいサービスを作る上で正しいこと、やりたいことを伝えられる環境をつくる
- フロントエンドエンジニアはデザイナーさんとのディスカッションが多いことは自覚して、コミュニケーションをしっかりとっていく意識するべき
- 人数がすくないため、 フロント < サーバー < インフラ の順で意見が通りやすくなりがち
6つめ：自社がフロントエンドエンジニアに期待していることをぜひ教えてください
- 弊社に入るとこういうことができるよ
ラクスル株式会社の水島 壮太氏
- リアル産業なため、リアルな部分（印刷されるデザインなど）を確認してもらうことが多いため、立体的なUXを再現することを求める
- UXUIにこだわりをもってほしいので、とりあえずJavaScript書きたいよりもプロダクトを大事にできる人がよさそう
- to C よりも長く使われるコードなので負債を残さないように書けることが大切
freee株式会社の加藤 慧氏
- 業務アプリケーションなので、グラフィカルな部分もある
- 破綻しないデザインでできること
- JavaScriptも強く
- 技術を楽しく使いこなせると楽しくできる、そんな人におすすめ
サイボウズ株式会社の小林 徹氏
- プロダクトが大規模なので、気合で書き直す！っていうフェーズではない
- 技術を使って課題をどう解決していくかを考えるべき
- 例えば、大量のCSSを削除
- 技術を使って課題を解決し、OSSやインターネットへ還元していってほしい
会場からのQAタイム！！！
いろんな質問があって面白かったです。
これがなくてはやってけない的なライブラリ、ビルドツールなどありましたら、教えてください！
freee株式会社の加藤 慧氏
- 社内の中でもいろんなツールを使っている
- 最新動向は常に追っている
- 一例
- webpack × vue.js
- Linter
- Sentry はフロントにもいれるべき
- エラーモニタリング
サイボウズ株式会社の小林 徹氏
- npmを制御するlibraryなど細かいツールはたくさんある
- npmの更新管理は問題になりがちだが、gitのpackage検知はわりとおすすめ
- 一例 - ESLint - Prettier - TSLint
デザイナーとの協業の観点として役割がグレーな部分はどう切っているのか？
ラクスル株式会社の水島 壮太氏
- デザイナーとエンジニアがペアプロでアニメーションをチューニングを行うので、それぞれの得意な分野で共有中
- デザイナーのデザインからフロントエンドエンジニアがよしなに調整
- 社内のデザイナーはCSSを書かないので、コンフリクトは起きていない
サイボウズ株式会社の小林 徹氏
- デザイナーからFigma で共有
- フロントエンドエンジニアが実装
- モブプロで最終調整
- 一緒に作っていってる感がある
freee株式会社の加藤 慧氏
- デザイナーとエンジニアはペアプロはしない
- エンジニアはエンジニアのできることを察することが難しいので、エンジニアからできることを提供
- エンジニアは、ただデザインに沿って実装するのではなく、本当にこのデザインが適切なのか？を考えながら実装していく
フロントエンドエンジニアってどう採用している？？？
サイボウズ株式会社の小林 徹氏
- 会社としては、フロントとバックエンドの役職は別れていない
- 得意な人がフロントやっていく
- 募集したり、イベントで声かけたり、面接したりを行っている
ラクスル株式会社の水島 壮太氏
- 会社としては、フロントとして募集
- 会社で勉強会を実施
- コミュニティから興味を持ってくださった人を入れる
freee株式会社の加藤 慧氏
- 面接
- 抽象的な構造への理解がある人ってを大切にしている
- どの言語でも大丈夫そう
- 野良レビューもやる
- 成長メインで採用している
- 抽象的な構造への理解がある人ってを大切にしている
IEいつ切りますか？
ラクスル株式会社の水島 壮太氏
- IE推奨な会社もあったり、Windows7のIEのアクセスログはあったりするので、現状維持
- 今後のChromiumベースのEdgeに期待
- IE10は対象外でIE11以降を公式サポートとしている
- ユーザーのシェアが2〜3％になった時点でサポート外にすることを検討
サイボウズ株式会社の小林 徹氏
- MicroSoftのサポートに合わせて対応します
freee株式会社の加藤 慧氏
感想
今回のパネルディスカッション企業の中ではモブプロが流行されていてびっくりでした。 なかなか導入ハードルが高いように感じているので、いろいろ調べてみたいと思います。 フロントエンドに関して幅広く話を伺えて充実した一日でした！
