Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

21新卒技術研修で実施したフロントエンド研修の講義資料です。
動画:https://youtu.be/dPPu2WnjIaQ
リポジトリ:https://github.com/yami-beta/frontend-bootcamp-demo

21新卒技術研修全体のまとめ記事
https://medium.com/mixi-developers/a0bcdbf9bca0

B16717ef4b7aab0b253d933c3934f280?s=128

mixi_engineers

April 27, 2021
Tweet

Transcript

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

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

  3. 講義

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

  5. 開発ツールの変遷

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

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

    Worker • Deno
  8. ブラウザでの JavaScript スコープに注意 • 基本は関数スコープ ◦ 昔は var くらいしか無かった ◦

    最近は let, const がある • プログラム直下はグローバルスコープ ◦ 単純にファイル直下で変数宣言すると別ファイルから読み出せる 読み込み順に注意 • ファイル間で依存がある場合は依存関係順に読み込む
  9. ページロード ページが表示されるまで 1. URL にアクセスするとサーバから HTML が返却される 2. HTML に記載されたリソースの取得が始まる

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

    • 複数の TCP コネクションを張る ◦ 6つくらい
  11. 仕様から見えてきた課題 • *.js の依存関係解決 ◦ HTML に script タグを羅列するのは大変 •

    ファイル数 ◦ ファイル数を減らすとロード完了までが優位になる傾向 (ファイルサイズとの兼ね合いもあるため一概には言い切れないものの) 同時取得数の制限によるページロードのパフォーマンス低下が主な課題 → ファイル結合というアプローチが取られた
  12. タスクランナー活用

  13. ファイル結合 JavaScript • HTML に script タグを依存関係順に並べる → 依存関係順に単純にファイル結合し1つの *.js

    ファイルにする 画像 • CSS スプライト
  14. ファイル結合|JavaScript タスクランナー grunt, gulp の活用 https://github.com/gulp-community/gulp-concat より

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

  16. ファイル結合 利用頻度は低下 • HTTP/2 ◦ 対応した CDN • <link rel=”preload”/>

    による先読み キャッシュヒット率を考慮すると、むしろ結合しないほうが有利な場合も
  17. 仕様から見えてきた課題 • *.js の依存関係解決 ◦ HTML に script タグを羅列するのは大変 •

    ファイル数 ◦ ファイル数を減らすとロード完了までが優位になる傾向 (ファイルサイズとの兼ね合いもあるため一概には言い切れないものの) 同時取得数の制限によるページロードのパフォーマンス低下が主な課題 → ファイル結合というアプローチが取られた
  18. bundler 登場

  19. Node.js • 2009年に登場 • 作者は Ryan Dahl 氏 • ブラウザとは異なる

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

  21. JavaScript の依存関係解決|browserify browserify • https://github.com/browserify/browserify • Node.js 由来の require を使ったコードを

    bundle してブラウザで動かせるように するツール
  22. JavaScript の依存関係解決|browserify browserify によって以下が実現 • require による依存関係解決 • npm package

    の利用
  23. JavaScript の依存関係解決|webpack • https://webpack.js.org/ • 基本的には browserify と同様 • より広範囲のリソースをターゲットにした

    bundler ◦ html, css, 画像といったものを JavaScript として扱う
  24. webpack • *.js 以外のファイルの import を可能に • CSS ファイルの場合 ◦

    css-loader が CSS ファイルの依存関係を解決 ◦ style-loader が <style> タグを <head> タグの 子要素に追加する JavaScript を生成 • webpack Module を扱う ◦ ECMAScript Modules だけではない • webpack への強い依存には注意 ◦ 仕様に無い挙動を実現できてしまうため
  25. webpack • Web フロントエンド開発の主たるツール(2021年4月時点) • 役割を理解し目的に合わせて適切に使う

  26. 開発ツールの変遷まとめ リソースの取得の最適化 → grunt, gulp のようなタスクランナーの活用 → HTTP/2 や preload

    の活用 JavaScript の依存関係解決 → Node.js 由来の require を持ち込んだ bundler → 標準となった ECMAScript Modules の活用
  27. UI ライブラリ

  28. UI ライブラリ|目次 • React, Vue, Angular のような UI ライブラリが使われ始めたのはなぜ? •

    Single Page Application (SPA) • Next.js とは
  29. UI ライブラリ|状態管理の複雑化 課題: ブラウザ上で扱う状態が複雑化 → jQuery で状態に合わせて dom の書き換えを行う手法に限界が来ていた Backbone.js

    が MVC を持ち込んだように、他領域の設計手法を用いた試み → UI ライブラリ(フレームワーク)の激動の時代 → フロントエンドが早すぎるといわれる場合はこの辺を指していることが多そう
  30. UI ライブラリ|状態管理の複雑化 • 宣言的 UI、リアクティブ、コンポーネント • 状態から view へ、という一方向での更新サイクル https://facebook.github.io/flux/docs/in-depth-overview

    より
  31. UI ライブラリ|紹介 React A JavaScript library for building user interfaces

    Vue The Progressive JavaScript Framework Angular The modern web developer's platform
  32. UI ライブラリ|jQuery jQuery はどうなったの? • 状態 → view の一方向の反映にあまり向いていない ◦

    自由に dom を触れてしまうので ◦ 宣言的 UI ライブラリとの組み合わせも不向き • jQuery の機能の一部は JavaScript 自体に入った
  33. UI ライブラリ|jQuery 要素取得の $() は document.querySelector(), document.querySelectorAll()に

  34. Single Page Application 単一の Web ページを読み込み、表示内容は fetch 等で取得したデータを用いて 書き換えを行うアプリケーション •

    例: body タグ以下が全部空の状態でサーバから HTML が返却される ◦ 中身は JavaScript で組み立てられる
  35. UIライブラリ|まとめ ブラウザ上で行うことが増えたことによる状態管理の複雑化 • 他領域のアプローチを取り入れ試行錯誤した時代 • 手続き的な処理から宣言的な処理への変化