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

フロントエンド研修2021 ライブエクスペリエンス事業本部システム部プロダクト開発G 阿部峻大

目的 • フロントエンドの技術変化の理由を知る • React で宣言的 UI を知る

講義

目次 • 開発ツールの変遷 • UI ライブラリ

開発ツールの変遷

開発ツールの変遷 • script タグの列挙 • タスクランナーによるファイル結合 • browserify, webpack

JavaScript の基礎 JavaScript は環境によって様々 • ブラウザ • Node.js • Web
Worker • Deno

ブラウザでの JavaScript スコープに注意 • 基本は関数スコープ ◦ 昔は var くらいしか無かった ◦
最近は let, const がある • プログラム直下はグローバルスコープ ◦ 単純にファイル直下で変数宣言すると別ファイルから読み出せる読み込み順に注意 • ファイル間で依存がある場合は依存関係順に読み込む

ページロードページが表示されるまで 1. URL にアクセスするとサーバから HTML が返却される 2. HTML に記載されたリソースの取得が始まる

ページロード HTTP/1 のおさらい • 1つの TCP コネクションで1リクエスト/レスポンスブラウザのリソース取得 • 1つずつの取得では流石に遅い
• 複数の TCP コネクションを張る ◦ 6つくらい

仕様から見えてきた課題 • *.js の依存関係解決 ◦ HTML に script タグを羅列するのは大変 •
ファイル数 ◦ ファイル数を減らすとロード完了までが優位になる傾向（ファイルサイズとの兼ね合いもあるため一概には言い切れないものの）同時取得数の制限によるページロードのパフォーマンス低下が主な課題 → ファイル結合というアプローチが取られた

タスクランナー活用

ファイル結合 JavaScript • HTML に script タグを依存関係順に並べる → 依存関係順に単純にファイル結合し1つの *.js
ファイルにする画像 • CSS スプライト

ファイル結合｜JavaScript タスクランナー grunt, gulp の活用 https://github.com/gulp-community/gulp-concat より

ファイル結合｜CSSスプライト複数の画像を結合し、CSS で位置調整・クリッピングし表示する元画像 500 x 1000

ファイル結合利用頻度は低下 • HTTP/2 ◦ 対応した CDN • <link rel=”preload”/>
による先読みキャッシュヒット率を考慮すると、むしろ結合しないほうが有利な場合も

仕様から見えてきた課題 • *.js の依存関係解決 ◦ HTML に script タグを羅列するのは大変 •
ファイル数 ◦ ファイル数を減らすとロード完了までが優位になる傾向（ファイルサイズとの兼ね合いもあるため一概には言い切れないものの）同時取得数の制限によるページロードのパフォーマンス低下が主な課題 → ファイル結合というアプローチが取られた

bundler 登場

Node.js • 2009年に登場 • 作者は Ryan Dahl 氏 • ブラウザとは異なる
JavaScript の実行環境

ファイル結合｜JavaScript タスクランナー grunt, gulp の活用 https://github.com/gulp-community/gulp-concat より require しているじゃんこっちも出来れば！

JavaScript の依存関係解決｜browserify browserify • https://github.com/browserify/browserify • Node.js 由来の require を使ったコードを
bundle してブラウザで動かせるようにするツール

JavaScript の依存関係解決｜browserify browserify によって以下が実現 • require による依存関係解決 • npm package
の利用

JavaScript の依存関係解決｜webpack • https://webpack.js.org/ • 基本的には browserify と同様 • より広範囲のリソースをターゲットにした
bundler ◦ html, css, 画像といったものを JavaScript として扱う

webpack • *.js 以外のファイルの import を可能に • CSS ファイルの場合 ◦
css-loader が CSS ファイルの依存関係を解決 ◦ style-loader が <style> タグを <head> タグの子要素に追加する JavaScript を生成 • webpack Module を扱う ◦ ECMAScript Modules だけではない • webpack への強い依存には注意 ◦ 仕様に無い挙動を実現できてしまうため

webpack • Web フロントエンド開発の主たるツール（2021年4月時点） • 役割を理解し目的に合わせて適切に使う

開発ツールの変遷まとめリソースの取得の最適化 → grunt, gulp のようなタスクランナーの活用 → HTTP/2 や preload
の活用 JavaScript の依存関係解決 → Node.js 由来の require を持ち込んだ bundler → 標準となった ECMAScript Modules の活用

UI ライブラリ

UI ライブラリ｜目次 • React, Vue, Angular のような UI ライブラリが使われ始めたのはなぜ？ •
Single Page Application (SPA) • Next.js とは

UI ライブラリ｜状態管理の複雑化課題: ブラウザ上で扱う状態が複雑化 → jQuery で状態に合わせて dom の書き換えを行う手法に限界が来ていた Backbone.js
が MVC を持ち込んだように、他領域の設計手法を用いた試み → UI ライブラリ（フレームワーク）の激動の時代 → フロントエンドが早すぎるといわれる場合はこの辺を指していることが多そう

UI ライブラリ｜状態管理の複雑化 • 宣言的 UI、リアクティブ、コンポーネント • 状態から view へ、という一方向での更新サイクル https://facebook.github.io/flux/docs/in-depth-overview
より

UI ライブラリ｜紹介 React A JavaScript library for building user interfaces
Vue The Progressive JavaScript Framework Angular The modern web developer's platform

UI ライブラリ｜jQuery jQuery はどうなったの？ • 状態 → view の一方向の反映にあまり向いていない ◦
自由に dom を触れてしまうので ◦ 宣言的 UI ライブラリとの組み合わせも不向き • jQuery の機能の一部は JavaScript 自体に入った

UI ライブラリ｜jQuery 要素取得の $() は document.querySelector(), document.querySelectorAll()に

Single Page Application 単一の Web ページを読み込み、表示内容は fetch 等で取得したデータを用いて書き換えを行うアプリケーション •
例: body タグ以下が全部空の状態でサーバから HTML が返却される ◦ 中身は JavaScript で組み立てられる

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

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

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

More Decks by MIXI ENGINEERS

Other Decks in Technology

Featured

Transcript