5-things-for-front-end

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

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

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

JavaScriptとなにか 4

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

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

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

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

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

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

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

TypeScriptとなにか 12

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

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

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

モジュールとなにか 16

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後に 32

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

34 Thank You! おしまい

5-things-for-front-end

5-things-for-front-end

More Decks by Wataru Morita

Other Decks in Technology

Featured

Transcript