フロントエンドのトレンドをざっくりと知る/trends-in-front-end-technologies

Webフロントエンドの開発・技術のトレンドをざっくりと説明。技術を深く知ることより、ことばを知り、ざっくりどんな技術かイメージをつかんでもらうことを重視した資料。

Transcript

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