5-things-for-front-end - Speaker Deck

Slide 1

Slide 1 text

覚えておきたい5つこと森田亘 / GMO PEPABO inc. 2022.06.20 2022年度新卒研修 1

Slide 2

Slide 2 text

2 自己紹介ホスティング事業部　マーケティングチーム 2019年中途入社森田亘　　Morita Wataru ● エンジニア ● 米 2杯目からスタート ● Twitter、Github : @tascript

Slide 3

Slide 3 text

3 アジェンダ 1. JavaScriptとなにか 2. TypeScriptとなにか 3. モジュール 4. モジュールバンドラ 5. 宣言的UIライブラリおよびフレームワーク

Slide 4

Slide 4 text

JavaScriptとなにか 4

Slide 5

Slide 5 text

JavaScriptとなにか ● Webブラウザ、Node.js上などで動作するプログラミング言語 ● 正確に JavaScriptエンジンが搭載されたプラットフォーム上で動作する ● Node.js 言語じゃなくて実行環境 ● ECMA InternationalがECMAScriptとして標準化(Webブラウザで利用することを前提 ) ● ページをインタラクティブにしたり非同期通信ができる ● Javaじゃないよ！ JavaScript 5

Slide 6

Slide 6 text

JavaScriptとなにかとりあえずJavaScriptを動かしてみようぜ 6

Slide 7

Slide 7 text

7 JavaScriptとなにか consoleタブにコードを書いてみる Chrome Dev Toolsを開く ⌥⌘I で一発で開けます。今回ロリポップ！レンタルサーバートップページで Dev Toolsを開いてみましょう！ロリポップ！レンタルサーバータイトルタグになにが書かれているか見てみましょう！

Slide 8

Slide 8 text

8 JavaScriptとなにかブラウザでファイルを開いてみるコードを書いてファイルに保存する scriptタグにJavaScript コードを書いて、html拡張子ファイルに保存しましょう！ Chrome アドレスバーに「ﬁle://ファイル絶対パス」を入力してどような動作をするか見てみましょう！ ❓

Slide 9

Slide 9 text

JavaScriptとなにかブラウザ上で起きていること 9

Slide 10

Slide 10 text

10 JavaScriptとなにかトークン列から抽象構文木(AST)を作成字句解析によりトークン列に分解 JavaScriptエンジン内でソースコードをトークン列に分解します。トークン列文字列リストを作成して構文解析準備段階として用意されます。トークン列構文解析により抽象構文木を作成することでプログラム実行に必要な情報だけを残しておきます。

Slide 11

Slide 11 text

11 JavaScriptとなにかコンパイラにより実行可能な状態に変換し実行抽象構文木を仮想マシン用コードや機械語などに変換し、JavaScript 処理系で実行されます。

Slide 12

Slide 12 text

TypeScriptとなにか 12

Slide 13

Slide 13 text

TypeScriptとなにか ● JavaScriptに静的型付けを加えたスーパーセット ● tscと呼れるコンパイラを使って型情報確認やトランスパイルによる .jsファイル生成が可能 ● データ表現に関する正誤判定を実行前に実施する ● 新規開発時に導入しておいたほうがよい TypeScript 13

Slide 14

Slide 14 text

14 TypeScriptとなにか TypeScript JavaScript JavaScript 実行時にエラーが発生します。プログラムを実行することでデータ表現方法正誤判定ができます。 TypeScript コンパイル時にエラーが発生します。プログラムを実行する前にデータ表現方法正誤判定ができます。

Slide 15

Slide 15 text

JavaScriptとなにか ● 型情報があることで実行エラーを未然に防ぐことができる ● 型情報によるコード仕様書が作成できる ○ 関数引数型情報 ○ API リクエストに必要なパラメータ型情報 ○ APIからレスポンス型情報 ● ざっくり言え型情報があるかないか ● TypeScriptどんどん書いていこう JavaScriptとTypeScript 違い 15

Slide 16

Slide 16 text

モジュールとなにか 16

Slide 17

Slide 17 text

モジュールとなにか ● JavaScript NetScapeを始めとするブラウザで利用され始めた ● モジュール(コードを適切に分割する )という概念がなかった ○ Ruby requireやPHP requireに近いもがなかった ● グローバル汚染、コード間依存関係をどう解消するか JavaScript黎明期 17

Slide 18

Slide 18 text

モジュールとなにか ● CommonJS(Webブラウザ以外環境下における JavaScript 仕様を決定しているプロジェクト )に含まれるモジュール解決用実装 ● require関数とmoduleオブジェクトによるモジュールロードと宣言が可能になった CommonJS Modules 18

Slide 19

Slide 19 text

19 モジュールとなにか index.js greet.js moduleオブジェクトを利用しエクスポートします。 require関数を利用してgreet.jsで宣言された関数を読み込みます。

Slide 20

Slide 20 text

モジュールとなにか ● require関数同期的にロードするため、モジュールが多くなれ多くなるほどロード時間が増える ● ブラウザ上で利用できるモジュール解決方法でない ○ ブラウザ上でモジュール解決を実施する場合、 Browserifyでトランスパイルする必要があった課題点 20

Slide 21

Slide 21 text

モジュールとなにか ● ES6(ECMAScript 6th edition)以降で利用できるようになったモジュール仕様 ● import文、export文シンタックスを用意してモジュールロードと宣言が可能になった ● Webブラウザを始めES6が利用可能な環境下でモジュールを解決できるようになった ○ モジュールが「仕様」になった ○ モジュールと言う観点において Node.jsとブラウザ間 JavaScript 境界線がなくなってくる ● import 非同期ロードを実行できるため、 CommonJS Modules 課題を解決できるようになった ECMAScript Modules(ESM) 21

Slide 22

Slide 22 text

22 モジュールとなにか index.js greet.js export構文を利用してエクスポートします。 import構文を利用してgreet.jsで宣言された関数を読み込みます。

Slide 23

Slide 23 text

モジュールバンドラーとなにか 23

Slide 24

Slide 24 text

モジュールバンドラーとなにか ● CommonJS Modulesを始め、require.js、AMD、UMD、ECMAScript Modulesと様々なモジュール解決方法が生まれた ● 既存コード資産モジュール解決を統一したいケースが出てくるモジュールバンドラ活躍 24

Slide 25

Slide 25 text

モジュールバンドラーとなにか ● みんな大好きモジュールバンドラ ● モジュールを解決しバンドル (1つにまとめる)ことができる ● Browselifyと異なり、複数モジュール解決方法に対応 ● loaderを利用して、SassやImageファイルもバンドルできるようになった ● ES5にバンドルすることが前提 webpack 25

Slide 26

Slide 26 text

モジュールバンドラーとなにか ● ES6でバンドルすることを前提としたモジュールバンドラ ● 必要に応じてES5に変更する ○ ECMAScript Modulesを前提としたNode.js パッケージ増加 rollup 26

Slide 27

Slide 27 text

モジュールバンドラーとなにか ● 既存 Node.js パッケージうち、 CommonJS ModulesからESMに切り替えるパッケージが発生 ○ 対象パッケージを含むプロダクトがモジュール解決ができないという課題が発生 ○ 依存が大きいほど書き換えが大変 ESM対応 27

Slide 28

Slide 28 text

モジュールバンドラーとなにか ● 厳密にビルドツール (production buildにrollupを使用) ● Native ESMによるモジュール読み込みを実施した開発環境提供 ● CommonJS/UMDをESMに変換して依存関係を事前にバンドル (Pre-bundling) ● 実質的な依存関係全てブラウザ上で解決する (バンドルしない) ● ビルドしない分開発環境立ち上がりが早い Vite 28

Slide 29

Slide 29 text

宣言的UIライブラリおよびフレームワーク 29

Slide 30

Slide 30 text

宣言的UIライブラリおよびフレームワーク ● (好みあるだろうけど )ペパボで React(Next.js)、Vue.js(Nuxt.js)、Angularが採用されています ● 情報が沢山出回っているもを利用するほうがベター (取捨選択必要) ● State of JS見ようぜ ● 実際に手を動かして触ってみましょうどれを選択するべきか 30

Slide 31

Slide 31 text

31 宣言的UIライブラリおよびフレームワーク複数メトリクスで判断ペパボが選択している技術スタックが世中トレンドと大きな差がないことがわかります。

Slide 32

Slide 32 text

最後に 32

Slide 33

Slide 33 text

最後に ● JavaScriptやブラウザに関する歴史および仕様を把握する力 ● パフォーマンス向上ためコーディング力やビルドスタックを選定できる力 ● ユーザーにとって最適なタッチポイントを提供できる ● レガシーな環境をモダンな環境に切り替える力 ● 周囲フロントエンド力を底上げするリーダーシップ ● 諦めずに何度も挑戦する力ペパボで必要なフロントエンド力 33

Slide 34

Slide 34 text

34 Thank You! おしまい