Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドのトレンドをざっくりと知る/trends-in-front-end-techno...
Search
osawata
April 10, 2021
Technology
1
71
フロントエンドのトレンドをざっくりと知る/trends-in-front-end-technologies
Webフロントエンドの開発・技術のトレンドをざっくりと説明。技術を深く知ることより、ことばを知り、ざっくりどんな技術かイメージをつかんでもらうことを重視した資料。
osawata
April 10, 2021
Tweet
Share
More Decks by osawata
See All by osawata
生産性とリソース効率とフロー効率と/productivity-and-flow-efficiency-and-resouce-efficiency
osawatanabe
2
510
リーンスタートアップとアジャイル開発の進化/evolution-of-leanstartup-and-agile
osawatanabe
1
210
ビジネスモデルいろいろ / interesting-business-models
osawatanabe
3
220
Amazonのビジネスモデル/businessmodel-of-amazon
osawatanabe
1
160
アジャイルとかDevOpsとかの似た概念を整理したい / meaning-of-buzzies
osawatanabe
1
1.4k
Other Decks in Technology
See All in Technology
君は隠しイベントを見つけれるか?
mujyun
0
300
バクラクにおける可観測性向上の取り組み
yuu26
3
420
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.5k
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
120
スプリントゴールにチームの状態も設定する背景とその効果 / Team state in sprint goals why and impact
kakehashi
2
100
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
590
一休.comレストランにおけるRustの活用
kymmt90
3
590
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
110
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Thoughts on Productivity
jonyablonski
67
4.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Writing Fast Ruby
sferik
626
61k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Scaling GitHub
holman
458
140k
Transcript
©intrapreneur Lab all rights reserved フロントエンドのトレンドをざっくり知る Osamu Watanabe
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
お品書き SSR Ajax SPA Webフロントエンドに関するこれらのことば をざっくりと説明します JAMStack PWA SSG
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
Webアプリの画面周り ユーザーが目にして操作する ブラウザで動作する フロントエンドとは バックエンド HTML css javascript
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
HTML + CSS + javascript(Typescript) フロントエンドの技術で作られています
©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ベースのものが多い
©intrapreneur Lab all rights reserved ここから本編 フロントエンドの変遷
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
2003年頃から、Webの技術を採用したアプリケーションが 本格的に広まり始める。 (それまでは”クラサバ”が多かった) Java/J2EE/Tomcat(Servlet) Webアプリケーションのはじまり Struts, Spring, Rails, Seasar... サーバーサイドのMVCアーキテクチャフレームワークが たくさん登場 フロントエンドという概念はまだない
©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 に名前がつけられた
©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)
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
• jQueryを駆使して、API呼び出し>データ取得>HTML構築をやってきたが、限界を 迎える。 • フロントエンドのUI周りライブラリ/フレームワークが多数登場 • Node.jsがフロントエンド開発環境として使われる • パッケージ管理やトランスパイル、Lint実行やファイルサイズ圧縮など ...jQueryが限界を迎える フロントエンドフレームワーク戦国時代 アンギュラー リアクト ビュー
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
• 言語仕様としてのECMA Script(≒javascript)は進化するが、ブラウザ側の対 応は追いつかない • 新しい仕様で書かれたコードを、ブラウザ側で動くコードに変換するトランスパ イラが創り出された 2015年、BABEL(6to5)誕生。 当初はES6をES5に変換するツールだった (小咄)ECMA Scriptとブラウザ実装状況
©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の開発者
©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
©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だとこんな感じ
©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 リンク先のコンテンツが出る
©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
©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
©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
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
• SSRを更におしすすめ、あらかじめビルド処理で静的サイトを作ってしまう(APIコー ルもやってしまう)方式 • リクエスト時には事前生成済みのレスポンスページを配信 Pros • 超高速な初期表示と画面表示。速さは正義。 • 静的ホスティング可能 Cons • すべてのページを事前ビルドすると時間がかかる • ビルド時にデータ取得しているので、その後の更新がページに反映されない SSG - Static Site Generator
©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
©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
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
東京都コロナウイルス 感染症対策サイト Users モダン技術使いまくりの JAMStack(少しちがうけど)です https://stopcovid19.metro.tokyo.lg.jp GitHub コミットを検知して Nuxtビルド(静的化)を 実行して公開
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
参考)GitHub Starの推移 Angular Angular Angular Angular Angular jQueryしか使えないって相当ヤバい
©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以外の分野でフロントエンド技術採用が盛んに
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
• WebAssembly, Rustなどで爆速化? • Web Components、bit.devなどでコンポーネント再利用促進? • フロントエンドエンジニアとデザイナーの融合? この先の注目は?
©intrapreneur Lab all rights reserved ©intrapreneur Lab all rights reserved
Thanks! Any questions?