モダンフロントエンド勉強会〜進化し続けるUXとDX〜のまとめ・感想

Web転職する

2019.07.23

https://techplay.jp/event/740712

友人の誘いで普段行かないTECHPLAY主催勉強会に参加しました。

あまり下調べせず行ってみたのですが、勉強会というよりはトレンドについてインプットする会であったりモチベーションの高い企業はどんな感じで開発してるのかが知れたという感じでした。

料金が無料で懇親会もあったのできになる人は他の勉強会もチェックしてみてください。

議事録として取りましたが、間違いがありましたら修正させていただきます。

参加者
1. あなたは何派？（フロントエンド技術）
2. あなたの経験年数は？
登壇者各社の紹介
パネルディスカッション
来場者からの質問
まとめ
参考

参加者

まずはどんなフロントエンドが参加したの？ということで事前にアンケートが取られました。

あなたは何派？（フロントエンド技術）

Vue.js・・・5割
React.js
jQuery
Angular.js
typescript

と、Vue.jsの人気が圧倒的でした。

フロントエンド勉強会始まりました！
今日の参加者は半分くらいVueユーザー。#techplay #vuejs pic.twitter.com/l1NI1m4gVv
— HITO-Link CRM 開発チーム (@hitolinkcrm_dev) July 23, 2019

あなたの経験年数は？

1～3年・・・4割
4～7年・・・4割
1年未満・・・1割

登壇者各社の紹介

freee（会計ソフト）
ラクスル（印刷通販）
サイボウズ（業務改善サービス）

freeeの技術沿革

2011年からbackbone.jsを使用

その後、vue、typescript、React

ラクスルの技術沿革

RakSulもVue.jsが主体

フロントエンド2名

↓

フロントエンド10名

jquery

↓

vue

↓

nuxt

↓

typescript

↓

three.js

特に最近はthree.jsなどグラフィック描画に注力している

サイボウズ

kintone

2011〜

Closure tools + react

typescript

2017年　フロントエンド1名〜

現在　フロントエンド5名

パネルディスカッション

自社のサービスではどんなフロントエンドを使っていますか？

サイボウズ

closure tools独自だから新しいものが入れられず悩みです。

他はreact、typescript。

型安全は重要視している

freee

フレームワークは長いものに巻かれろという考えで選定している

フォームはformic(React)を使用

Raksul

React vueを経験した時に、vueの方がいいと思った。

新しいものの方が社員のモチベーションが上がる。

ビジネスサイドの人間ががあまり理解できない。

nuxtじゃできない（タグマネージャーなど）

新しい技術は使う？

ラクスル、サイボウズ

メリットがわかれば使う

プロダクトへの価値がわかれば使う

freee

新しいものを入れた結果、苦労した経験があるので慎重になってる

サービスのパフォーマンスを高めるためにしていること

ラクスル

ピークが平日で、PCがほとんどなのであまり気にしてない

APIを非同期にする、圧縮頑張るなど

サイボウズ

パフォーマンスの読書会、自社のパフォーマンスを知る

freee

仮想DOMを正しく使う

toBで求められるのはその程度で十分

品質を担保するための取り組み

ラクスル

E2E
テストカフェ
サークルCI
tslint
eslint
prettier

「IE確認した？」

口癖のようにいう

サイボウズ

サークルCI回す
テストピラミッド
QAチーム
テストカフェ

freee

スナップテスト
ストーリーショット
ストーリーブック
lint
QAチームを用意

法律によって仕様が変わる

ユーザーに近い人にテストしてもらう

ワークフローでの工夫

raksul

ペアプロブースやモブプロブースがある
フロントエンドが一人があるあるだった
必ず１スクラムにフロント2名以上になるようにしてる

サイボウズ

社内でデプロイされてから、ユーザーにデプロイする
モブプログラミングが社内で流行ってる
チームでタスクをもつ

モブプログラミングのデメリット

個人の成長にならない
できる人がやっちゃう
疲れる
適切ではない

freee

ライブコーディング
考えてることを口に出しながら

フロントエンドエンジニアが働きやすい環境とは

raksul

サーバーエンジニアが強い。。
フロントエンドが多数派になること
孤独にしない
デザイナーとのディスカッション、コミュニケーションをしっかりやる

freee

UIに対して違和感をデザイナーにフィードバックするのはいいフロー

フロントエンドエンジニアに期待していること

raksul

ビジュアル、立体的を重視しているのでそれに向かって立ち向える人
three.jsに興味ある人
UX、UIにこだわりあるひと
5、10年見据えて設計開発できる

サイボウズ

いかに時間ではなく技術で解決するか
不要なcssを消すツールなど

freee

業務アプリをきちんと壊さずやる
サーバーサイドはrails
静的テスト

来場者からの質問

これがないとやっていけない

raksul

webpack
lint

サイボウズ

eslint
typescript
npm run all

freee

フロー
lint
yarn

デザイナーとの関わり方

raksul

デザイナーとペアプロでアニメーションの調整

フロントエンドの手腕でデザインが決まる

サイボウズ

最後の調整をモブプロでやる

freee

エンジニアから技術をインプットする
エンジニアにもUIを意識してもらう

フロントエンドをどうやって採用している？

raksul

フロントエンド募集してる
勉強会にきてもらったり、社内転職もある

サイボウズ

フルスタックを採用して得意なことをやってもらってる
採用は大変だけどチームに任せてる

freee

抽象的な構造の理解があればどの言語でも理解できる

IEはいつきる？

IE10は見ていない
シェアは2,3%になったら
ユーザーに対する啓蒙
86才のおじいさんにchromeをインストールさせる（ラクスル）

まとめ

以上雑で申し訳ありませんが、2019/7/24のモダンフロントエンド勉強会〜進化し続けるUXとDX〜のまとめ・感想でした。

これまでフロントエンドやっていた自分ですが知らない単語が多く若干パニクりました。

如何に普段のインプットが少ないかを実感させられました。

また、会社によっては自らインプットしなくても強制的にインプットさせてくれるような今回登壇した会社もあります。

自ら情報をキャッチアップするよりそういう会社に入った方が早い気もしてます。

今回登壇した企業は随時フロントエンドを募集していそうです。

（入社の興味があるかみたいなアンケートが終わりにありました。）

気になる人は求人探してみてください。

【無料】Web専門の転職エージェントは下記がおすすめです。

レバテックキャリア：フリーエージェント【レバテック】の転職エージェント
マイナビクリエイター：業界最大手【マイナビ】のIT専門エージェント
WORKPORT：【IT業界・ゲーム業界】に強い、転職決定人数 No.1

参考

今回でできた単語についてアンケートを取るとこのような結果でした。

結構キャッチアップできてる人が多くてすごいですね。

#techplay
モダンフロントエンド勉強会で出てきたモダンワード
どのくらい知ってる？
・formic
・TestCafe
・CircleCI
・スナップショット
・Storybook
・モブプログラミング
フロントエンドだけど
— hoshi@フロントエンドフリーランス (@funclur_01) July 23, 2019