Download to read offline
フロントエンド技術の変遷
- 1.
- 2. 自己紹介 株式会社 coroutine エンジニアメンター フリーランスプログラマー 東川諒央 Twitter, GitHub: @biwakonbu WEB 領域特化 WEB フロント〜インフラまで、ソフトウェア領域は大体やります。 Laravel, Django, Rails, Nuxt, Vue, React 等の 開発実績がメインです。 現在は技術顧問業とメンターなど、エンジニア教育に力を入れています。 新人育成、チームビルディングなど何かあればご相談ください。
- 3. 何故フロントエンド技術の変遷の話をするのか 自分たちが “今” 使っている技術を理解して次に繋げるため 1.過去の WEB フロントの苦悩と進化の整理 2. WEB フロントの現在 3. 次の WEB フロントの可能性
- 4. WEB フロントの苦悩と進化 -Ajax の登場 Ajax の登場 (2005年頃) ● Asynchronous JavaScript＋XML が AJAX の正式名称 ○ 今では JSON が通信フォーマットの主流で XML を知らない WEB 屋も多い ○ XML (Extensible Markup Language) は UI 定義に良く使われる ● Google が Google Map や Gmail にてブラウザアプリケーションを公開 ○ それまで JavaScript は画面の一部を動かしたり色を変えたりがせいぜいだった ○ SPA (Single Page Application) の発想の元に 技術力 (ノウハウ) = 組織力の時代 Qiita も GitHub もないため個人ブログの発信が重要な情報源
- 5. WEB フロントの苦悩と進化 -jQuery の登場
- 6. WEB フロントの苦悩と進化 -jQuery の登場 jQuery (2006年頃登場) が解決しようとした事とは？ 1. WEB ページのインタラクティブデザイン化の省力化 a. 画面の表示内容を変更するには DOM (Document Object Model) ツリーの操作が必須 b. クロスブラウザ互換との戦い (IE, FireFox, Safari, Opera など) c. インライン Style の操作 i. 当時 CSS3 もなく、グラデーションやアニメーションなどは JS の仕事だった 2. 非同期処理制御 a. Deffered や Promise の提供 3. プラグインによる拡張容易性 Ajax 技術のコモディティ化に貢献し、一気に普及
- 7. WEB フロントの苦悩と進化 -JS エコシステムの登場 エコシステム発達時代 (2010年頃) CSR (Client Side Rendering) 時代 1. AngularJS (や Backbone.js, Ember.js) などのフレームワークの登場 a. データバインディングの元祖 b. Google が SPA 開発のために開発 2. Node.js a. C10K 問題の解決のために開発 b. npm (node package manager) もこの時に登場 3. CoffeeScript (Python + Ruby ライクな AltJS) a. AltJS が流行るキッカケになった言語 b. この言語の影響で ECMAScript 6 (ES2015のこと) に class 構文やその他記法が導入される事に この辺りから一気に JS の雰囲気が変わりました 自分がエンジニアリングをガッツリ勉強し始めたのがこの辺
- 8. WEB フロントの苦悩と進化 -JS エコシステムの登場 CoffeeScript
- 9. WEB フロントの苦悩と進化 -JS エコシステムの登場 エコシステム成熟時代 (2015年頃) SSR (Server Side Rendering) が話題に 1. ES2015 正式リリース 2. TypeScript が少しずつ使われる事例が見える a. リリースは 2012 年頃 b. 時代背景的に WEB フロントが非常に高度な開発を求められるようになりつつあった c. 複雑なアプリケーションの開発には静的型解析とエディタのサポートが重要 3. VirtualDOM (仮想 DOM) の登場 (React.js, Vue.js) a. 登場は 2013 年頃 b. データバインディングによる設計思想重視の DOM の更新は大きなコストが発生する c. その DOM 更新に着眼をおき、差分更新を行なう仕組みによる高速化を提供 4. VSCode 登場 a. Electron による WEB 技術でのテキストエディタ b. この登場により Atom は完全に御役御免 c. 2016 年に登場する LSP (Language Server Protocol) は OSS に衝撃を与えた
- 10. WEB フロントの現在 ライブラリ周りは変化が少なくなりつつ、周辺環境が進化してきた SSR (ServerSide Rendering) から SSG (Static Site Generator) へ変わってきた 環境によっては ISR (Incremental Static Regeneration) の需要が発生 WEB フロントエンジニアの需要が一気に高まった時代 1. Rust のエコシステム進化と WASM の需要によるツールの発展 a. deno, Rome Formatter, swc など b. JS の開発ツールやビルドツールは Rust 化する事でパフォーマンスが向上するため活発 c. deno は TS Runtime かつ JS のモジュールシステムの問題解決を目指している 2. 現場によってフロント開発環境は千差万別になってきた a. CSR ・・・サーバから JSON や他フォーマットデータを受けて端末で DOM を生成 b. SSR ・・・VDOM をサポートするサーバからデータを VDOM に変換してから受信 c. SSG ・・・DB, 静的ファイルなどからデータをフェッチし静的サイトとしてデプロイ d. ISR ・・・SSGの欠点である部分更新をアクセス時部分ビルドなどにして解決
- 11. WEB フロントの現在 ● 単純に通信して動的に変化するアプリケーションを組むコストが低くなった ●WEB フロントエンジニアの需要は二極化 ○ 生産要因 ■ SPA や CSR コンポーネントなどの開発ができる ■ 管理画面レベルのマークアップ能力がある ■ 後は手の速さがキモ ○ 高度技術要因 ■ ブラウザパフォーマンスのチューニングができる ■ CDN を意識したキャッシュコントロールや BFF の知見 ■ ビルドツールやフロント CI などの高速化 ツールの進化や更新は未だに速い感じはありますが方向性は定まってきつつある感 あくまでも 2012 年前後との比較なので市場的には数年で劇的に変化はすると思います
- 12. 次の WEB フロントの可能性 今気にしているのは下記技術 1.CDN Edge & CloudFlare D1 a. D1 は SQLite ベースの DB がクラウドエッジ上でリードレプリカ展開するエッジサービス b. CDN Edge は今後拡張されて専門の人が台頭してくる予感 (その時フロントと呼ぶかは不明) 2. WASM & Rust a. WASM は伸びる要素だらけ b. パフォーマンスにおいては V8 が変態すぎるので時間がかかる印象 c. クラウドエッジにおいてこの組み合わせがプラットフォームで提供され始めている d. サーバもクライアントも仕事をしない時代がくる空気になってきた
- 13.