フロントエンド研修2021【21新卒技術研修】/2021-frontend-training

by MIXI ENGINEERS

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

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ライブラリ｜まとめブラウザ上で行うことが増えたことによる状態管理の複雑化 ● 他領域のアプローチを取り入れ試行錯誤した時代 ● 手続き的な処理から宣言的な処理への変化