フロントエンドのトレンドをざっくり知る
48.3K Views
August 25, 22
スライド概要
フロントエンド界隈の技術変遷をざっくりと。
関連スライド
各ページのテキスト
フロントエンドのトレンドをざっくり知る Osamu Watanabe ©intrapreneur Lab all rights reserved
お品書き Ajax Webフロントエンドに関するこれらのことば をざっくりと説明します SPA SSR PWA SSG JAMStack ©intrapreneur Lab all rights reserved
フロントエンドとは Webアプリの画面周り ユーザーが目にして操作する ブラウザで動作する HTML css バックエンド ©intrapreneur Lab all rights reserved javascript
フロントエンドの技術で作られています HTML + CSS + javascript(Typescript) ©intrapreneur Lab all rights reserved
フロントエンド関連技術いろいろ UIライブラリ／フレームワーク • React • Angular • Vue.js BABEL タスクランナー • Gulp • Grunt webpack Sass（CSS拡張言語およびcssトランスパイラ） • SCSS記法 • SASS記法 パッケージマネージャ • npm • Yarn Node.jsベースのものが多い CSSフレームワーク • Bootstarp/Bulma/... HTMLテンプレートエンジン • Pug ©intrapreneur Lab all rights reserved
フロントエンドの変遷 ここから本編 ©intrapreneur Lab all rights reserved
Webアプリケーションのはじまり Java/J2EE/Tomcat(Servlet) 2003年頃から、Webの技術を採用したアプリケーションが 本格的に広まり始める。 （それまでは”クラサバ”が多かった） Struts, Spring, Rails, Seasar... サーバーサイドのMVCアーキテクチャフレームワークが たくさん登場 フロントエンドという概念はまだない ©intrapreneur Lab all rights reserved
Ajaxの登場 AjaxはAsynchronous JavaScript + XMLの略で、2005/02/18 に名前がつけられた Google Mapの衝撃（2005年） 非同期通信をWebアプリケーションに用いる方法 で、なめらかなスクロールを実現。それまではヌル ヌル動く地図なんて無かった。 Before Ajax時代のマップは こんな感じだった https://image.itmedia.co.jp/ait/articles/0708/23/r20imasara03_01.gif ©intrapreneur Lab all rights reserved
SPA時代の到来 • Webアプリ画面の一部分にajaxを採用する流れが広まる • 郵便番号を入力すると住所が自動入力されるやつとか • ユーザー作成時のIDの重複エラー出すとか • 画面遷移のたびに毎回HTMLをサーバーから取得するのは遅いし、見た目 にもなめらかではない • じゃあ、そもそもすべてのデータをajaxで取得し、ブラウザ側でHTMLのほと んどを生成してしまおう、と誰かが思い始めた • もはやサーバーはHTML(text/html)を返すのではなく、jsonデータ (application/json)を返す役割となる SPA（Single Page Application）の誕生 • ブラウザ側＝フロントエンド • APIサーバー側＝バックエンド ©intrapreneur Lab all rights reserved MPA （Multi Page Application）
...jQueryが限界を迎える • jQueryを駆使して、API呼び出し＞データ取得＞HTML構築をやってきたが、限界を 迎える。 • フロントエンドのUI周りライブラリ/フレームワークが多数登場 • Node.jsがフロントエンド開発環境として使われる • パッケージ管理やトランスパイル、Lint実行やファイルサイズ圧縮など フロントエンドフレームワーク戦国時代 アンギュラー リアクト ©intrapreneur Lab all rights reserved ビュー
(小咄)ECMA Scriptとブラウザ実装状況 • 言語仕様としてのECMA Script（≒javascript）は進化するが、ブラウザ側の対 応は追いつかない • 新しい仕様で書かれたコードを、ブラウザ側で動くコードに変換するトランスパ イラが創り出された 2015年、BABEL（6to5）誕生。 当初はES6をES5に変換するツールだった ©intrapreneur Lab all rights reserved
(小咄2)BABELの開発者 Babelは、JavaScriptトランスパイラ。新しい文法で書かれたコードを、古いバージョンのコー ドに変換（トランスパイル）することで、旧バージョンしかサポートしていない実行環境でも動 作可能にする。 Babelの開発者はSebastian McKenzieという人物。彼は17歳のとき(2015)にBabelの初期 バージョンを開発した天才プログラマ。彼はその後Facebookにヘッドハントされ入社し、 2020年5月まで在籍し主にJavaScriptに関連するさまざまな開発を行った。Node.jsパッ ケージマネージャーツールであるyarnも彼が開発した。2021現在、彼はFacebookを退社 し、Romeというプロダクトを開発している。 ©intrapreneur Lab all rights reserved
Fluxアーキテクチャ, Redux/Vuex • SPAが流行りだすと、新たな問題が発生 • フロントエンドでのデータ状態管理どうする問題 • ユーザー操作や、APIレスポンスなど、非同期に不特定イベントからデータ が更新される • そのデータ変化を表示に反映させるべきViewがいくつもある • ひとつの解としてFacebookが提唱した状態管理のための構造がFlux https://qiita.com/knhr__/items/5fec7571dab80e2dcd92 Fluxは設計パターン名称。Reactでの実装がRedux、Vue.jsでの実装がVuex ©intrapreneur Lab all rights reserved
サーバレスSPA SPAで作られたWebアプリケーションの鉄板構成 フロントエンドを静的ホスティング＋CDNに配置し、 バックエンド（API）をサーバレスなFaaSで実装する AWSだとこんな感じ [GET] html/js/css AWS Certificate Manager CloudFront Route53 S3 Users API Calls API Gateway Lambda ©intrapreneur Lab all rights reserved Aurora DynamoDB
SSR - Server Side Rendering 画面遷移が早く、サクサクUXのSPAにも弱点があった 1. SEO（検索エンジン最適化）が弱い クローラーがページコンテンツを正しく解釈してくれないから 2. 初回読み込みが遅い： →Google検索スコアが下がる 全ページ分のJavascriptを初期ロードするから （一度ブラウザにキャッシュされたあとは早い） これらの弱点はECサイトなどにとっては痛い • オーガニック(Google検索などからたどり着くこと)なユーザーを捕まえられ ない • SNSなどでリンク貼ったときにサムネイル出すヤツ(OGP)が大変 非SPAのリンク SPAのリンク リンク先のコンテンツが出る ©intrapreneur Lab all rights reserved 何も出ない
SSR - Server Side Rendering • 初期ロード時のみサーバー側でHTML生成して表示 • 初期表示後の画面遷移はSPA同様の動きをする（クライアントでHTML構造 を作り、データはAPIで取得する） • 実装難易度が高くなる • SSR対応フレームワークとしてNext/Nuxtの登場 • 静的ホスティングできない（サーバーサイドで実行環境が必要） Client Side Rendering • SSRに対して、クライアントブラウザ側でjavascritによって画面構築 することをCSRという（通常のSPA） • 静的ホスティングやCDNを利用できる ©intrapreneur Lab all rights reserved
（小咄3）REST-APIsとBFFとGraphQL バックエンドAPIサーバーのお話 • バックエンドは、REST-APIが主流だった • 関連の高い小さなサービス単位でAPIを提供するマイクロサービスアーキテクチャー が人気 • APIの利用者が別システムだったり様々なデバイスだったりと多様化してくるにつれ て、RESTではしんどくなってきたので、新たなアプローチが誕生。 BFF(Backend for Frontend)アーキテクチャ：Netflix、Twitter • フロント個別事情に対応したAPIを提供するレイヤーを追加するアプローチ GraphQL：Facebookが規格策定したクエリ言語 • Web APIのための規格。RESTでは無い新たなアプローチ。 • クライアント側が返して欲しい情報を、リクエストで指定できる • ひとつのHTTPエンドポイントのみを持つ（RESTはリソースごとに持つ） ©intrapreneur Lab all rights reserved
PWA - Progressive Web Application • Googleが提唱した技術（というか仕様） • 主にスマホでの体験向上を目的とした、Webアプリの作り方お作法 • アプリのように動作するが、インストール不要＆公開審査不要 • PUSH通知／オフライン動作／ホーム画面から起動 • PWAのお作法にのっとってWebアプリを作ると、PWAとして動く • アプリのように見えるが実際はブラウザ＋サイトの セットが動いているイメージ • TwitterやInstagramはPWAに対応している • Android版Chromeはもちろんフルサポート • iPhoneは一部非対応 ©intrapreneur Lab all rights reserved
SSG - Static Site Generator • SSRを更におしすすめ、あらかじめビルド処理で静的サイトを作ってしまう（APIコー ルもやってしまう）方式 • リクエスト時には事前生成済みのレスポンスページを配信 Pros • 超高速な初期表示と画面表示。速さは正義。 • 静的ホスティング可能 Cons • すべてのページを事前ビルドすると時間がかかる • ビルド時にデータ取得しているので、その後の更新がページに反映されない ©intrapreneur Lab all rights reserved
ISG,ISR - Incremental Static Generation/Regeneration SSGの2つの短所を補うNext.jsの機能 （たぶんNext.jsの用語で、一般名称ではなさそう） • ISG：ビルド時には基本のページのみ静的化しておき、他のページ はリクエストがあったときに初めてSSGする。 • ビルド時間を短縮 • ISR：SSGした静的ページを一定期間で破棄して再生成する • データ更新の反映が可能 ©intrapreneur Lab all rights reserved
JAM stack • Javascript/APIs/Markupの頭文字をとった技術スタックによるWeb アプリケーション • 要はSSGを使って構築したWebアプリ（サイト）のアーキテクチャを カッコよく呼びたいときに使う 使用例）「今回はJamstackでつくります」 • 仲間 • MEAN Stack（MongoDB/Express/Angular/Node.js） • LAMP（Linux/Apache/MySQL/Php,Perl,Python） ©intrapreneur Lab all rights reserved
東京都コロナウイルス 感染症対策サイト https://stopcovid19.metro.tokyo.lg.jp モダン技術使いまくりの JAMStack（少しちがうけど）です Users GitHub コミットを検知して Nuxtビルド(静的化)を 実行して公開 ©intrapreneur Lab all rights reserved
参考）GitHub Starの推移 Angular Angular Angular Angular Angular jQueryしか使えないって相当ヤバい ©intrapreneur Lab all rights reserved
まとめ：フロントエンドのトレンド －－レガシーなWebサイト－－ cgi perl, 装飾レベルでのjavascript使用 －－Webアプリ時代－－ jsp Java & Javascript, templateベースhtml Servlet, J2EE, アプリケーションサーバー －－ajax登場－－ Ajax jQuery Backbone.js －－SPA（Single Page Application）時代－－ Single Page Applicationフレームワーク/ライブラリの隆盛 AngularJS/React/Vue.js/Riot.js Fluxアーキテクチャ（Redux, Vuex） RESTfulなAPIs マイクロサービスアーキテクチャ 静的なhtml中心 サーバーで動的なhtmlを生成して返す時代 Struts, Spring, Rails サーバーと非同期通信をし、画面の一部を更新 基本はサーバーサイドWebアプリ 画面(html)をブラウザ側ですべて構築。サーバーはデータを返すAPIを提供 フロントエンド・バックエンドという言葉が定着 ーーWebフロントエンド技術の発展時代 SSR（Server Side Rendering）Next/Nuxt PWA（Progressive Web Application） SPAの弱点を補う技術やWeb以外の分野でフロントエンド技術採用が盛んに BFF（Backend for Frontend）やGraphQLの登場 静的サイトジェネレータ(SSG)、JAMStack, electron, Cordova, Ionic, React NativeなどWebフロントエンド技術で スマホアプリやデスクトップアプリが作れる時代に ©intrapreneur Lab all rights reserved
この先の注目は？ • WebAssembly, Rustなどで爆速化？ • Web Components、bit.devなどでコンポーネント再利用促進？ • フロントエンドエンジニアとデザイナーの融合？ ©intrapreneur Lab all rights reserved
Thanks! Any questions? ©intrapreneur Lab all rights reserved