背筋を伸ばしてスタートアップするブログ

株式会社ペライチでCTOをやっています。

CTOmeetupでフロントエンド技術のトレンドをキャッチアップしてきた

buildersconの興奮冷めやらぬ一昨日の今日ですが、今日も今日とてイベント参加してきました。「CTO meet up〜JavaScript(Angular, React, Vue)〜」という、フロントエンドの技術についてのミートアップイベントです。

flexy.connpass.com

フロントエンドのフレームワークの技術選定や技術課題などについてパネルディスカッション形式で現場の先端を行くエンジニアの方の意見を聞けるというもの。以下メモになります。

技術選定の基準

  • 使う人が多い
    • 話として上がってくる
    • 日本語のQiitaとかでよく書かれている
    • 書き心地はよく見ている
  • 何を選ぶかは組織に依存する
    • ReactかVueかAngularかは些細な問題
    • メンバーのスキル構成に合わせる
  • React, Reduxでデータフローまわしていると型定義の強力さを感じる
    • React, Reduxのflowtype、typescriptはすごい強力
    • リファクタリングがしやすい
  • サードパーティーに頼らない
    • モデル、レビューレイヤーの流れがきちんとできていれば要らないケースも多い
  • npmのパッケージよく使うと思うが、サードパーティーライブラリのバージョンのメンテとかってどうしてる?
    • greenkeeper.io使ってる
    • 2週間に一回は改善dayみたいなの設けて、バグfixなどと一緒にやる
    • 計画を立てて一定のタイミングでバージョンアップする

今の技術の課題・つらみ

  • フリーランスでフロントエンドの顧問とかやってると、相談がすごいくる
    • メインでやってる人が抜けちゃってどうにもならなくなっちゃったパターン
    • パフォーマンス、バグが多すぎて何かあるとすぐ壊れちゃうパターン
  • 勉強の仕方、キャッチアップの仕方を教える
    • 面談をしてご飯を食べながらキャッチアップする方向に気持ちを向かせる
  • React周辺はエコシステムのライフサイクルが早すぎる
    • 以前は年に1回だったのがいまは半年に1回くらいリファクタリングしなきゃいけないくらいの感覚
    • チームがエコシステムについていけるのかが重要
    • いつまで付き合う?
  • ドキュメントを読んでなんとなくできる風になっているプロダクトが凄く多い
    • ex. コンポーネントをぶわーっと羅列してるようなプロダクト
    • 表面だけじゃなくて設計、動き、パフォーマンスを理解して使うのがすごい大事

これからのフロントエンドの動向

  • Webコンポーネント
    • 夢見てる人多いと思うけど、パフォーマンスそんなに出ないと思うしビジネスインパクトは薄い
  • PWA(Progressive Web Apps)
    • オフラインで見えるようになったときに嬉しいやつと嬉しくないやつがある
    • 例えばホットペッパービューティーは予約できないと意味がない
  • guess.js
    • Google製
    • AにアクセスしたユーザーはBにアクセスしやすいという先読み技術
    • ユーザー体験の向上
  • リアルタイム通信
    • React, Angular, VueのようなSPAのリアルタイム通信がくると思う
    • WebRTCはまだハマりどころがある

今現場にもっともほしいフロントエンドエンジニアとは

  • フレームワークとか関係なしに描画まわりで基礎力の高いエンジニア
    • 「表現のためのエンジニアリング」と「機能実装のためのエンジニアリング」
    • アーキテクチャをつくるフロントエンドエンジニアとインタラクションをつくるフロントエンドエンジニア
      • だいたい足りないのはインタラクション
      • 触り心地にコミットできるエンジニアが凄く希少
  • React, Vue, Angularなど使う上でその裏側で何をやっているか知ってる人
    • フレームワーク使って「作ってみました」レベルの人凄く多いけどそれだけだと判断できない
      • 運用の泥臭い部分を含めて苦労やドラマをきちんと語れる人
  • 技術プラスアルファで何か持っている人
    • 技術+デザイン, 技術+マーケティング etc…
    • その上で技術選定、判断ができる人が求められている。特にスタートアップでは。

フロントエンドエンジニアはやることがいっぱいある中で若い人にどうアドバイスするか

  • 「なんでもいいからアプリケーション作った方がいいよ」というアドバイス
    • 実際に技術に深く入り込んで経験値をためる
    • フロントエンド含めたパフォーマンス
  • つくって人に見せる
    • 悩む時間をいっぱい作る
  • プロトタイプバトルというのをやってる
    • 話し合って結論出ないので、両方つくってみる!
  • モブプロはひとつのソリューション
    • コストかからないしお互いに知識を共有できる
    • お互いに苦手な部分をやってみたりする

フロントエンドエンジニアのキャリアパス

  • React, Vue, Angularとかで何かをつくれるってだけだとコモディティ化してきている
  • プラスアルファで強みが必要

質疑応答

  • Q.ベンチャーでスピード感出したい組織において、どのようなエンジニアを採用するべきか?
    • A1.組織によるとしかいえないけど、本当に人数少ないときはフルスタックエンジニア一択。ある程度大きくなってきたら専門性を重視した方がいい。
    • A2.スタートアップだと、技術的難易度がどこにあるのかとどこを強みにしていきたいかによって決めるのが大事。

まとめ

うちもJavaScriptごりごりのSPAなので、話を聞いていてとても参考になったのと課題感やつらみは凄く共感した。React周辺のライフサイクルが早くて辛いというのはそのとおりで、スタートアップにとってフロントエンドのキャッチアップどうするかはうまくやっているいろんな会社の事例をもっと沢山聞きたいなと思った。

結論、フロントエンドは楽じゃない。