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
ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web F...
Search
dojineko
June 20, 2022
Technology
1
9.3k
ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web Frontend of Pepabo Hosting division 2022
dojineko
June 20, 2022
Tweet
Share
More Decks by dojineko
See All by dojineko
iOSのWebViewとClipboardAPI / WebView and ClipboardAPI on iOS
dojineko
0
65
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
150
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
160
Viteはいいぞ/Vite is Good
dojineko
1
740
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
430
gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB
dojineko
1
940
もう俺には関係なくないTypeScript/Our TypeScript
dojineko
3
350
TypeScript ではじめる Clean Architecture / Let's start Clean Architecture with TypeScript
dojineko
2
3.3k
Hosting meets .NET / hosting-meets-dotnet
dojineko
0
720
Other Decks in Technology
See All in Technology
ゼロからはじめる採用広報
yutadayo
3
990
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
390
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
4
290
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
180
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
130
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
240
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
190
SREのためのeBPF活用ステップアップガイド
egmc
1
200
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
130
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
410
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
140
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
4 Signs Your Business is Dying
shpigford
184
22k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Code Review Best Practice
trishagee
69
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How GitHub (no longer) Works
holman
314
140k
Music & Morning Musume
bryan
46
6.6k
Transcript
1 ホスティング事業部の Webフロントエンドについて dojineko / GMO PEPABO inc. 2022.06.20 フロントエンド研修
ホスティング事業部 シニアエンジニア 2014年 中途入社 2 自己紹介 dojineko • Slackに住むバーチャルネコ • フロントエンドなシニアエンジニアです
(※バックエンドとインフラもチョトダケやってるよ) • GitHub: @dojineko • Twitter : @dojinekox
1. 「Webフロントエンド」ってなぁに? 2. 最近のフロントエンド事情 • デザイン寄りな部分 • 技術寄りな部分 3. 社内のフロントエンド事情
4. 情報の集め方 • 社内での情報の集め方 • 社外での情報の集め方 3 おしながき
4 ▼ お話すること • Webフロントエンドについての導入 • 近年の技術傾向について • 情報収集の方法 ▼
お話しないこと • 細かな技術仕様や歴史のについての詳細 • サービス仕様の詳細 ▼ おことわり • 本資料は、Webフロントエンドの初学者を対象としています。 • 分かりやすさを優先するために正確な表現を意図的に行っていない場合があります。 • 外部公開にあたって、文章をスライドにしたため一部読みにくい部分があります。 本資料について
5 「Webフロントエンド」ってなぁに?
6 • ブラウザの標準API実装が拡充してきました • また、ブラウザ以外での JavaScript の利用も増えてきています。 • ES Modules
に準拠した npm パッケージが増加しています。 • TypeScript の利用が拡大し、静的型付けによる開発手法が定着してきています。 • React や Vue.js などを活用したアプリ開発がメジャーになってきました。 • 2022年06月16日 に Internet Explorer がサポート終了しました。 最近のフロントエンド事情 ▼ おおまかなWebフロントエンドの最近の傾向
7 最近のフロントエンド事情
8 • 「Webブラウザを介して直接見て触れる部分を担当するアプリケーション領域」です。 従って「表層的に触れる部分は大枠全てがフロントエンド」ということになります。 • 表層の機能を支えるAPIなどの領域は バックエンド • バックエンドを支えるサーバーなどの領域は インフラ
• ・・・のように大枠くくられます • ユーザー体験に一番影響する部分であるため、常に体験の最適化を求められます。 • 作ったものが比較的目に触れるものであり、触ると明確に動くので そういった部分が楽しめるとマッチする領域かもしれません。 「Webフロントエンド」ってなぁに? ▼ Webフロントエンドってなんだろう?
9 社内のフロントエンド事情
10 • 十数年積み上げてきた歴史があり、アプリケーションの実装が大きくなっています。 • 世間的なトレンドに常に追従できているかというと、実際のところそうではありません・・・ • 一方で、新規の機能開発やサービスの開発では新しい開発手法を取り入れた実装を日々検証し、 効果的なものは既存のサービスにも適用していっています。 • 大切なことは「常に安定してエンドユーザーに価値を提供できること」と
「良いものを取り入れつつビジネスの実現に必要なモノをはやく形にすること」のバランスです。 • どちらかだけが重要ということはなく、どちらも程よく必要な要素です。 社内のフロントエンド事情 ▼ 取り組み方
11 • 既存のプロジェクトの多くは SCSS を使用してデザインを実装しています。 • React や Vue.js が使われているプロジェクトでは
CSS Modules や CSS-in-JS などを使用してスタイリングしています。 • 物によっては、MUI や Vuetify 、 内製のデザインシステムの Inhouse も活用しています。 • どれを使うかは制限はなく、プロジェクトの担当者で合意のもと 適切な技術を選択して使用しています。 • 逆にピュアな CSS を使うことはあまりありませんが、 CSSの基礎知識などは近年のどの技術を使用する場合でも必要になります。 社内のフロントエンド事情 ▼ デザイン寄りな部分
12 • 長く続いているサービスについては JavaScript で直接実装されたり、 古い jQuery が使われていることが多いです。 • 一方で、新しく手を加えたりする機能は
TypeScript や React あるいは Vue.js を 使用して型を活用するなど、比較的モダンな仕組みを使った開発を行っています。 • 社内分書でいくつかアーキテクチャ指針が用意されており、 なかでも「フロントエンドアーキテクチャ指針」では、 文書で大枠の推奨事項と非推奨事項についてまとめられています。 社内のフロントエンド事情 ▼ 技術寄りな部分
13 日々の情報の集め方
14 • 「フロントエンド周りの情報は移り変わりが激しい・・・」と言われますが、 基本的には他の技術領域の進化の動きとさほど変わりないです。 • 特にここ4〜5年は劇的な変化は少なく比較的安定しています。(※2022年現在) • 世界トレンドとして React が使われており、多くの知見が集まっています。
• それ以外のライブラリが登場することもありますが、 それによりシェアが急に入れ替わるということもありません。 • 既存の技術が進化したり、新しい標準APIの策定や追加実装が続いています。 • 「昨日覚えた内容が今日使えなくなった」ということは基本的にありません。 • 簡単に機能を実現できる手段が増えているので、どんどん活用しましょう。 情報の集め方 ▼ フロントエンドの全般の傾向
15 • 「フロントエンドエンジニアチャプター」という情報共有が毎週行われています。 • 最新の開発ツールについて • 新しい ECMA Script の標準機能のについて
• 他社のフロントエンド関連のテックブログの内容について • 他事業部でのフロントエンド改善事例について • そのほかのおなやみ相談や関連する話題など • ラジオ代わりに活用してもらえると自然と情報が入ってきて便利...かも? • ちなみに、EC事業部でも同様の取り組みが毎週行われています。 • Slack の 「#frontender」 チャンネルに流れてくる情報を眺めたり ▼ 社内での情報の集め方 情報の集め方
16 • 有志の運営するニュースサイトや、公式サイトを眺めていると自然と情報が入ってきます。 • JSer.info https://jser.info/ Web技術の最新情報を日本語でまとめてくれているサイトです。 • Can i
use https://caniuse.com/ 標準APIの実装がどのブラウザまで行われているかを視覚的に表示してくれます。 • MDN (Mozilla Developer Network) https://developer.mozilla.org/ja/docs/Web Firefox を開発する Mozilla が主導で運営する Web開発者向けの情報サイトです。 • web.dev https://web.dev Google が主導する Webアプリケーション作成の基本ノウハウを解説したサイトです。 ▼ 社外での情報の集め方 情報の集め方
17 これから色々やって学んでみよう!
Thanks! 18