Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
5-things-for-front-end
Search
Wataru Morita
June 20, 2022
Technology
0
10k
5-things-for-front-end
Wataru Morita
June 20, 2022
Tweet
Share
More Decks by Wataru Morita
See All by Wataru Morita
thanks_react_router_v7
tascript
0
150
legacy_code_fukuoka_js
tascript
1
440
svelte_typescript_fukuoka_ts
tascript
1
460
enjoy_mruby_2021
tascript
0
110
TypeScript_BFF
tascript
4
4.8k
frontend_to_cli_tool_by_rust
tascript
0
560
nestjs_typeorm
tascript
0
660
Asyncで 非同期処理を 少しだけ楽に書く/ ruby_with_async
tascript
0
200
Other Decks in Technology
See All in Technology
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
400
このままAIが発展するだけでAGI達成可能な理由
frievea
0
110
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
180
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
650
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
110
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
260
Featured
See All Featured
Side Projects
sachag
455
43k
Mobile First: as difficult as doing things right
swwweet
225
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Rails Girls Zürich Keynote
gr2m
95
14k
4 Signs Your Business is Dying
shpigford
185
22k
The Cult of Friendly URLs
andyhume
79
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Music & Morning Musume
bryan
46
6.8k
Transcript
覚えておきたい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
アドレスバーに「file://ファイル 絶対 パス」を入力してど ような動作をするか見てみま しょう! ❓
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! おしまい