5-things-for-front-end

Transcript

1. 覚えておきたい5つ こと 森田 亘 / GMO PEPABO inc. 2022.06.20 2022年度新卒研修 1
2. 2 自己紹介 ホスティング事業部　マーケティングチーム 2019年 中途入社 森田 亘 　 　Morita Wataru • エンジニア • 米 2杯目からスタート • Twitter、Github : @tascript
3. 3 アジェンダ 1. JavaScriptと なにか 2. TypeScriptと なにか 3. モジュール 4. モジュールバンドラ 5. 宣言的UIライブラリおよびフレームワーク
4. JavaScriptと なにか 4
5. JavaScriptと なにか • Webブラウザ、Node.js上などで動作するプログラミング言語 • 正確に JavaScriptエンジンが搭載されたプラットフォーム上で動作する • Node.js 言語じゃなくて実行環境 • ECMA InternationalがECMAScriptとして標準化(Webブラウザで利用することを前提 ) • ページをインタラクティブにしたり非同期通信ができる • Javaじゃないよ！ JavaScript 5
6. JavaScriptと なにか とりあえずJavaScriptを動かしてみようぜ 6
7. 7 JavaScriptと なにか consoleタブにコードを書いてみる Chrome Dev Toolsを開く ⌥⌘I で一発で開けます。今回 ロリポップ！レン タルサーバー トップページで Dev Toolsを開いて みましょう！ ロリポップ！レンタルサーバー タイトルタグに なにが書かれている か見てみましょう！
8. 8 JavaScriptと なにか ブラウザでファイルを開いてみる コードを書いてファイルに保存する scriptタグにJavaScript コードを書いて、html拡 張子 ファイルに保存しましょう！ Chrome アドレスバーに「file://ファイル 絶対 パス」を入力してど ような動作をするか見てみま しょう！ ❓
9. JavaScriptと なにか ブラウザ上で起きていること 9
10. 10 JavaScriptと なにか トークン列から抽象構文木(AST)を作成 字句解析によりトークン列に分解 JavaScriptエンジン内でソースコードをトークン列 に分解します。トークン列 文字列 リストを作成 して構文解析 準備段階として用意されます。 トークン列 構文解析により抽象構文木を作成す ることでプログラム 実行に必要な情報だけを残 しておきます。
11. 11 JavaScriptと なにか コンパイラにより実行可能な状態に変換し実行 抽象構文木を仮想マシン用 コードや機械語など に変換し、JavaScript 処理系で実行されます。
12. TypeScriptと なにか 12
13. TypeScriptと なにか • JavaScriptに静的型付けを加えたスーパーセット • tscと呼 れるコンパイラを使って型情報 確認やトランスパイルによる .jsファイル 生成が可能 • データ 表現に関する正誤判定を実行前に実施する • 新規開発時に 導入しておいたほうがよい TypeScript 13
14. 14 TypeScriptと なにか TypeScript JavaScript JavaScript 実行時にエラーが発生します。プロ グラムを実行することでデータ 表現方法 正誤 判定ができます。 TypeScript コンパイル時にエラーが発生しま す。プログラムを実行する前にデータ 表現方法 正誤判定ができます。
15. JavaScriptと なにか • 型情報があることで実行エラーを未然に防ぐことができる • 型情報によるコード 仕様書が作成できる ◦ 関数 引数 型情報 ◦ API リクエストに必要なパラメータ 型情報 ◦ APIから レスポンス 型情報 • ざっくり言え 型情報があるかないか • TypeScriptどんどん書いていこう JavaScriptとTypeScript 違い 15
16. モジュールと なにか 16
17. モジュールと なにか • JavaScript NetScapeを始めとするブラウザで利用され始めた • モジュール(コードを適切に分割する )という概念がなかった ◦ Ruby requireやPHP requireに近いも がなかった • グローバル汚染、コード間 依存関係をどう解消するか JavaScript黎明期 17
18. モジュールと なにか • CommonJS(Webブラウザ以外 環境下における JavaScript 仕様を決定しているプロジェクト )に含 まれるモジュール解決用 実装 • require関数とmoduleオブジェクトによるモジュール ロードと宣言が可能になった CommonJS Modules 18
19. 19 モジュールと なにか index.js greet.js moduleオブジェクトを利用しエクスポートします。 require関数を利用してgreet.jsで宣言された関数 を読み込みます。
20. モジュールと なにか • require関数 同期的にロードするため、モジュールが多くなれ 多くなるほどロード 時間が増える • ブラウザ上で利用できるモジュール解決 方法で ない ◦ ブラウザ上でモジュール解決を実施する場合 、 Browserifyでトランスパイルする必要があっ た 課題点 20
21. モジュールと なにか • ES6(ECMAScript 6th edition)以降で利用できるようになったモジュール 仕様 • import文、export文 シンタックスを用意してモジュール ロードと宣言が可能になった • Webブラウザを始めES6が利用可能な環境下でモジュールを解決できるようになった ◦ モジュールが「仕様」になった ◦ モジュールと言う観点において Node.jsとブラウザ間 JavaScript 境界線がなくなってくる • import 非同期 ロードを実行できるため、 CommonJS Modules 課題を解決できるようになった ECMAScript Modules(ESM) 21
22. 22 モジュールと なにか index.js greet.js export構文を利用してエクスポートします。 import構文を利用してgreet.jsで宣言された関数 を読み込みます。
23. モジュールバンドラーと なにか 23
24. モジュールバンドラーと なにか • CommonJS Modulesを始め、require.js、AMD、UMD、ECMAScript Modulesと様々なモジュール 解決方法が生まれた • 既存 コード資産 モジュール解決を統一したいケースが出てくる モジュールバンドラ 活躍 24
25. モジュールバンドラーと なにか • みんな大好きモジュールバンドラ • モジュールを解決しバンドル (1つにまとめる)ことができる • Browselifyと異なり、複数 モジュール 解決方法に対応 • loaderを利用して、SassやImageファイルもバンドルできるようになった • ES5にバンドルすることが前提 webpack 25
26. モジュールバンドラーと なにか • ES6でバンドルすることを前提としたモジュールバンドラ • 必要に応じてES5に変更する ◦ ECMAScript Modulesを前提としたNode.js パッケージ 増加 rollup 26
27. モジュールバンドラーと なにか • 既存 Node.js パッケージ うち、 CommonJS ModulesからESMに切り替えるパッケージが発生 ◦ 対象パッケージを含むプロダクトがモジュール 解決ができないという課題が発生 ◦ 依存が大きいほど書き換えが大変 ESM対応 27
28. モジュールバンドラーと なにか • 厳密に ビルドツール (production buildにrollupを使用) • Native ESMによるモジュール 読み込みを実施した開発環境 提供 • CommonJS/UMDをESMに変換して依存関係を事前にバンドル (Pre-bundling) • 実質的な依存関係 全てブラウザ上で解決する (バンドルしない) • ビルドしない分開発環境 立ち上がりが早い Vite 28
29. 宣言的UIライブラリ およびフレームワーク 29
30. 宣言的UIライブラリおよびフレームワーク • (好み あるだろうけど )ペパボで React(Next.js)、Vue.js(Nuxt.js)、Angularが採用されています • 情報が沢山出回っているも を利用するほうがベター (取捨選択 必要) • State of JS見ようぜ • 実際に手を動かして触ってみましょう どれを選択するべきか 30
31. 31 宣言的UIライブラリおよびフレームワーク 複数 メトリクスで判断 ペパボが選択している技術スタックが世 中 ト レンドと大きな差がないことがわかります。
32. 最後に 32
33. 最後に • JavaScriptやブラウザに関する歴史および仕様を把握する力 • パフォーマンス向上 ため コーディング力やビルドスタックを選定できる力 • ユーザーにとって最適なタッチポイントを提供できる • レガシーな環境をモダンな環境に切り替える力 • 周囲 フロントエンド力を底上げするリーダーシップ • 諦めずに何度も挑戦する力 ペパボで必要なフロントエンド力 33
34. 34 Thank You! おしまい