2018年のフロントエンドエンジニアを取り巻く課題とチャレンジ

TOKYO FRONTEND 2018 - FRONTEND開発最前線 2018年に求められる力
Session02 スライド
https://techplay.jp/event/655683

Transcript

1. 2018年のフロントエンドエ ンジニアを取り巻く課題と チャレンジ 2018/3/14 Monstar Lab Daisuke Hirata
2. 自己紹介 - 平田 大祐 - モンスター・ラボ　チーフテクノロジスト - テックリード、マネージャ、エンジニアリングチームの技術戦略 - 出張が増えて来た。ベトナム、バングラデシュ、デンマーク、インド。インドでは、お 腹の強さに自信はあったが、お腹を壊した。 - 最近はサーバサイドのGolang, EthereumのSolidityなど。 - 先日、Serverside Swift の WebフレームワークのVaporのmeetupを開催しまし た。 - フロントエンドはプロフェッショナルと言える自信はない。
3. Overview フロントエンドエンジニアを求める側（需要）と、その技術を提供する側（供給）とで、互い の理解不足により、機会を損失している場面も多く見られる。 （TOKYO FRONTEND 開催趣旨より） 2018年のフロントエンドエンジニアがどのような環境に置かれ、どういう課題に向き合 い、チャレンジしているかについて理解を深めたい。 議論に答えを出すものではなく、悩みが共有されたり、状況を理解することの一助にな れば幸いです。
4. Frontend Developer Handbook 2018 - GitHubで公開されている - フロントエンド界隈のトレンドを広範囲に紹介 しているガイドブック - 学習教材や開発ツールへのリンク - マネージャ、CTO、インストラクタ、ヘッドハン ターがトレンドを知るために - 2017年の振り返りや2018年の予測が面白 い - 特に振り返りは良いまとめになっている
5. 2017 recap - HTML 5.2 is done. - It was a banner year for Vue.js in terms of adoption and popularity. No question about it. - The great divide between a front-end HTML & CSS developer v.s. front-end application developer is realized/verbalized. - Being a Front-end JavaScript developer who builds applications using web technologies continues to get better and worse. - This year seemed fuller than most of app/framework solutions trying to contend with the mainstream JavaScript app tools (i.e. React, Angular, and Vue etc...) Let me list them for you. Moon, Marko, Hyperapp, Quasar Framework, POI, frint, BunnyJS, jsblocks, Sapper, Stimulus, Choo, - This was the year that jsbin and jsfiddle evolved to things like StackBliz and codeSandbox. Making it dead simple to share a working app. - React continues to be flattered by things like preact, inferno, nerv, dva, and rax. - Cheatsheets got organized with devhints.io. - We figured out that the correct pattern for an app boilerplate/cli tool is something very opinionated like React Create App with the ability to escape from it when needed. - Most developers found that the combination of a really good code editor, eslint, and now prettiermake writing code faster, easier, pleasurable. - CSS Flexbox and Grid gain browser support and thus more developers are paying attention to both. - We get, a headless chrome, finally.
6. recapから今回のテーマ向けにピックアップ - HTML & CSS developer と front-end application developer の間に大きな 溝、見解の違いがあることが明らかになった。 - 複雑さを増し続けるフロントエンド環境 - Flutter, ReactNative, NativeScriptのようなWeb技術によるモバイル開発はま だまだハードで、痛みの解決策としてPWAなどWebプラットフォームを支持す る反抗勢力の勢いが増した。
7. HTML & CSS developer と front-end application developer の間に大きな溝、 見解の違いがあることが明らかになった。
8. - The death of “front-end developers” より「フロントエンド開発者」の終焉 (日本語訳 ) - フロントエンドエンジニアはざっくりと二種類に分かれる - フロントエンドエンジニア - ミドルウェアを含む機能的なJavaScriptに強いエンジニア - React, webpackなどに詳しい。JSのビルドと開発に長けている - 見た目はBootstrapでビジュアルやCSSは詳しくない - フロントエンドデザイナ - DOM, CSS, JSのインタラクションのビジュアルに強いエンジニア - フォントサイズ、スペーシング、文字の揃え方に気を配る - 奥深いJSの作業には労力を注がない - フロントエンドフルスタック開発者 - 上記の両方を満たす開発者 フロントエンド開発者とは
9. - Is there any value in people who cannot write JavaScript? - JSエキスパートは認められているが、HTML&CSSのエキスパートであるだけで は十分ではないと多く人が考えている。 - HTML & CSSは不当に低い扱いを受けている。accessibility, SVG, animationな ど - でも、新しいWebサービスやサイトを作るということにおいては、HTML&CSSは とても重要なパズルのピースであるはずだ。 - それぞれの専門領域でのチャレンジをもっと正当に評価すべきだ。 - また、フロントエンドのフルスタックであることは素晴らしいが、全員に強要すべ きではない。 - デザイナにコーディングすべき、と強要するようなものである。 - でなければ、burn outしたりメンタルをやられてしまう。 フロントエンドデザイナーの悲痛な叫び
10. - http://mixinconf.com/videos/full-stack-anxiety/ - 私はデザイナなので、レスポシブデザインやリモートユーザテスト、Sketchや モーショングラフィクスなど、デザイントレンドにキャッチアップすべきでしょう。と 同時にエンジニアとして、SVGアニメーション、NodeやReact、Ember、BEM、 Developer Toolの新しい機能、Vimなんかを学ぶべきでしょう。でも、私は人間 です。全てのことを勉強することは出来ない。何かを選ばないといけない、、、 何を選ぶべきでしょう？何が正しい選択なのかわからない。ああ不安だ。 Full Stack Anxiety
11. - 現場（モンスター・ラボ）を振り返ってみると、プロジェクトやクライアントが求め るフロントエンドエンジニアは、その両方を要求していることが多い。いわばフ ロントエンドフルスタック開発者を求めている。 - 調達・採用サイドはフロントエンドエンジニアが、ざっくりと２タイプあることを知 る。採用ではフロントエンドエンジニアがどちらに強いタイプかをしっかり把握す る。プロジェクトチームを作る場合にも、ピースが足りているか確認する必要が ある。 現場では
12. 複雑さを増し続けるフロントエンド環境
13. モジュール増加のスピード
14. CSS frameworksは100以上ある
15. 新しいプログラミングモデル UIの複雑さを取り扱うために、プログラミングモデル自体も多様化し始めている。 - 既存のエコシステムでの変化 - コンポーネントベースのアーキテクチャ - 関数型のプログラミングモデル - 注意深くステートをカプセル化する - 次世代のプログラミングモデル - Elm - Web Assembly
16. 増え続けるツール - Tools like gulp, webpack, brocolli, rollup, babel, flow - 現状のフロントエンド環境では、（コアテクノロジーではない？）webpackのよう なツールをインテグレートすることに時間を費やす必要がある。 - これらのツールは、あればベターというものではなく、複雑さをうまく管理可能 な状態にするために、もはや必須になっている。 - 同時に、明らかに苦痛のタネにもなっている。 - 設定は（必要以上に）複雑で壊れやすい。 - backendのツールと比べるとrawで未成熟な状態。
17. ネイティブアプリの領域に広がり続ける - 今後もネイティブアプリの領域にどんどん広がり続ける - Progressive Web App - Webとネイティブのいいとこ取り - インストール不要、アップデートの審査も不要 - オフライン動作 - プッシュ通知 - 速い読み込みスピード - ネイティブアプリのようなUI - https - WebVR WebとVRの統合によるエンゲージメント - Web Payments API 　ネイティブアプリのような購買体験をwebに - など
18. そもそもフロントエンド開発は難しい - リアルタイム性（instant load, 60fps） - 分散型でインクリメンタルな性質（臨機応変にリモートデータと同期） - 非同期性 - Reactive （ユーザのアクションにリアルタイムに反応する）
19. なぜ複雑さが増しているのか？ 3つのメガトレンドが合流して、大きなうねりとなってフロントエンドを直撃し、半狂乱 的でカオティックな状況を生んでいる。 - デバイスの多様化 - Webブラウザを動かすデバイスが多様化。スクリーンサイズ、レイテンシー、ネットワーク帯域 のバリエーションの増加。 3Gで接続された320pxのデバイスから、ハイスピードネットワークに 接続された高解像度のデスクトップ機まで - クオリティ要求の劇的な高まり - ネイティブアプリのように、キビキビとしてレスポンシブな使いごごちが求められている。 - デザインを差別化要因とすることも増えている。 - マーケットの急成長 - Webにアクセスできるコンシューマが劇的に増えている。 40億人以上
20. 倦怠感につながっている - The increasing nature of frontend complexity - フロントエンド界には新しいテクノロジーの出現に伴うフラストレーションや倦怠感が渦 巻いている。 - 変化のスピードが速く、ベストプラクティスは2年以内に時代遅れになる。 - エコシステムがフラグメントしたりカオティックな状況で、かつフロンティアも出てきてお り、半狂乱の状態で開発を続けている。 - しかし、これらによって、ビジネス機会が創出されているのも事実。多くのチャンスが転 がっている。
21. PWAを支持する勢力が増して来た
22. Betting on the Web の主張 - Flutter, ReactNative, NativeScriptのようなWeb技術によるモバイル開発はまだまだ ハードで、痛みの解決策としてPWAなどWebプラットフォームを支持する勢力の勢い が増した。 - 65% of smartphone users download zero apps per month - アプリのダウンロード数が少ない - ユーザの獲得は難しい - ユーザの獲得にはお金がかかる - Web以上にポピュラーなオープンプラットホームはない - ユーザは多いほど良い - プラットフォームでの開発者は多いほど良い
23. アドホックなアプリが欲しい - More than 75% of app downloads open an app once and never come back - 駐車場では駐車場のアプリ、ポートランドに行ったら交通機関のアプリ、カンファレンス に行ったらセッションのスケジュール確認やスピーカーへの質問をできるアプリ。でも その場を離れたら、もうそのアプリは要らない。用事が終わったら即座に不要になる。 - ストアにいってダウンロードするのが利用の障壁になっている。 - すぐに捨てられて、すぐに使えると、もっと良い = adhoc - サイズが小さい - Starbucks iOS: 146MB - Starbucks PWA: ~600KB - 0.4% のサイズ - サイズが小さいほど、店舗の前での導入障壁が下がる。
24. まとめ
25. 複雑さと多様性、可能性の広がり - HTML & CSS developer と front-end application developer の間に大きな 溝、見解の違いがあることが明らかになった。 - 複雑さを増し続けるフロントエンド環境 - Flutter, ReactNative, NativeScriptのようなWeb技術によるモバイル開発はま だまだハードで、痛みの解決策としてPWAなどWebプラットフォームを支持す る反抗勢力の勢いが増した。
26. フロントエンド開発は大変である。だから、こんな開発を 毎日している人はヒーローである。 - Yehuda Katz - Ember.jsの創始者のうちの一人 - Rustのコアチームのメンバー - 元Ruby on Rails や jQuery のコア チームのメンバー - ECMAScriptのTC39も標準化チー ムのメンバー - 元W3CのTechnical Architecture Groupのメンバー