Share
Embed
Slide 1
Slide 1 text
フロントエンド研修2021
ライブエクスペリエンス事業本部
システム部 プロダクト開発G
阿部 峻大
Slide 2
Slide 2 text
目的
● フロントエンドの技術変化の理由を知る
● React で宣言的 UI を知る
Slide 3
Slide 3 text
講義
Slide 4
Slide 4 text
目次
● 開発ツールの変遷
● UI ライブラリ
Slide 5
Slide 5 text
開発ツールの変遷
Slide 6
Slide 6 text
開発ツールの変遷
● script タグの列挙
● タスクランナーによるファイル結合
● browserify, webpack
Slide 7
Slide 7 text
JavaScript の基礎
JavaScript は環境によって様々
● ブラウザ
● Node.js
● Web Worker
● Deno
Slide 8
Slide 8 text
ブラウザでの JavaScript
スコープに注意
● 基本は関数スコープ
○ 昔は var くらいしか無かった
○ 最近は let, const がある
● プログラム直下はグローバルスコープ
○ 単純にファイル直下で変数宣言すると別ファイルから読み出せる
読み込み順に注意
● ファイル間で依存がある場合は依存関係順に読み込む
Slide 9
Slide 9 text
ページロード
ページが表示されるまで
1. URL にアクセスするとサーバから HTML が返却される
2. HTML に記載されたリソースの取得が始まる
Slide 10
Slide 10 text
ページロード
HTTP/1 のおさらい
● 1つの TCP コネクションで1リクエスト/レスポンス
ブラウザのリソース取得
● 1つずつの取得では流石に遅い
● 複数の TCP コネクションを張る
○ 6つくらい
Slide 11
Slide 11 text
仕様から見えてきた課題
● *.js の依存関係解決
○ HTML に script タグを羅列するのは大変
● ファイル数
○ ファイル数を減らすとロード完了までが優位になる傾向
（ファイルサイズとの兼ね合いもあるため一概には言い切れないものの）
同時取得数の制限によるページロードのパフォーマンス低下が主な課題
→ ファイル結合というアプローチが取られた
Slide 12
Slide 12 text
タスクランナー活用
Slide 13
Slide 13 text
ファイル結合
JavaScript
● HTML に script タグを依存関係順に並べる
→ 依存関係順に単純にファイル結合し1つの *.js ファイルにする
画像
● CSS スプライト
Slide 14
Slide 14 text
ファイル結合｜JavaScript
タスクランナー grunt, gulp の活用
https://github.com/gulp-community/gulp-concat より
Slide 15
Slide 15 text
ファイル結合｜CSSスプライト
複数の画像を結合し、CSS で位置調整・クリッピングし表示する
元画像
500 x 1000
Slide 16
Slide 16 text
ファイル結合
利用頻度は低下
● HTTP/2
○ 対応した CDN
● による先読み
キャッシュヒット率を考慮すると、むしろ結合しないほうが有利な場合も
Slide 17
Slide 17 text
仕様から見えてきた課題
● *.js の依存関係解決
○ HTML に script タグを羅列するのは大変
● ファイル数
○ ファイル数を減らすとロード完了までが優位になる傾向
（ファイルサイズとの兼ね合いもあるため一概には言い切れないものの）
同時取得数の制限によるページロードのパフォーマンス低下が主な課題
→ ファイル結合というアプローチが取られた
Slide 18
Slide 18 text
bundler 登場
Slide 19
Slide 19 text
Node.js
● 2009年に登場
● 作者は Ryan Dahl 氏
● ブラウザとは異なる JavaScript の実行環境
Slide 20
Slide 20 text
ファイル結合｜JavaScript
タスクランナー grunt, gulp の活用
https://github.com/gulp-community/gulp-concat より
require しているじゃん
こっちも出来れば！
Slide 21
Slide 21 text
JavaScript の依存関係解決｜browserify
browserify
● https://github.com/browserify/browserify
● Node.js 由来の require を使ったコードを bundle してブラウザで動かせるように
するツール
Slide 22
Slide 22 text
JavaScript の依存関係解決｜browserify
browserify によって以下が実現
● require による依存関係解決
● npm package の利用
Slide 23
Slide 23 text
JavaScript の依存関係解決｜webpack
● https://webpack.js.org/
● 基本的には browserify と同様
● より広範囲のリソースをターゲットにした bundler
○ html, css, 画像といったものを JavaScript として扱う
Slide 24
Slide 24 text
webpack
● *.js 以外のファイルの import を可能に
● CSS ファイルの場合
○ css-loader が CSS ファイルの依存関係を解決
○ style-loader が タグを <head> タグの
子要素に追加する JavaScript を生成
● webpack Module を扱う
○ ECMAScript Modules だけではない
● webpack への強い依存には注意
○ 仕様に無い挙動を実現できてしまうため
Slide 25
Slide 25 text
webpack
● Web フロントエンド開発の主たるツール（2021年4月時点）
● 役割を理解し目的に合わせて適切に使う
Slide 26
Slide 26 text
開発ツールの変遷まとめ
リソースの取得の最適化
→ grunt, gulp のようなタスクランナーの活用
→ HTTP/2 や preload の活用
JavaScript の依存関係解決
→ Node.js 由来の require を持ち込んだ bundler
→ 標準となった ECMAScript Modules の活用
Slide 27
Slide 27 text
UI ライブラリ
Slide 28
Slide 28 text
UI ライブラリ｜目次
● React, Vue, Angular のような UI ライブラリが使われ始めたのはなぜ？
● Single Page Application (SPA)
● Next.js とは
Slide 29
Slide 29 text
UI ライブラリ｜状態管理の複雑化
課題: ブラウザ上で扱う状態が複雑化
→ jQuery で状態に合わせて dom の書き換えを行う手法に限界が来ていた
Backbone.js が MVC を持ち込んだように、他領域の設計手法を用いた試み
→ UI ライブラリ（フレームワーク）の激動の時代
→ フロントエンドが早すぎるといわれる場合はこの辺を指していることが多そう
Slide 30
Slide 30 text
UI ライブラリ｜状態管理の複雑化
● 宣言的 UI、リアクティブ、コンポーネント
● 状態から view へ、という一方向での更新サイクル
https://facebook.github.io/flux/docs/in-depth-overview より
Slide 31
Slide 31 text
UI ライブラリ｜紹介
React
A JavaScript library for building user interfaces
Vue
The Progressive JavaScript Framework
Angular
The modern web developer's platform
Slide 32
Slide 32 text
UI ライブラリ｜jQuery
jQuery はどうなったの？
● 状態 → view の一方向の反映にあまり向いていない
○ 自由に dom を触れてしまうので
○ 宣言的 UI ライブラリとの組み合わせも不向き
● jQuery の機能の一部は JavaScript 自体に入った
Slide 33
Slide 33 text
UI ライブラリ｜jQuery
要素取得の $() は
document.querySelector(), document.querySelectorAll()に
Slide 34
Slide 34 text
Single Page Application
単一の Web ページを読み込み、表示内容は fetch 等で取得したデータを用いて
書き換えを行うアプリケーション
● 例: body タグ以下が全部空の状態でサーバから HTML が返却される
○ 中身は JavaScript で組み立てられる
Slide 35
Slide 35 text
UIライブラリ｜まとめ
ブラウザ上で行うことが増えたことによる状態管理の複雑化
● 他領域のアプローチを取り入れ試行錯誤した時代
● 手続き的な処理から宣言的な処理への変化