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.2k
ペパボ ホスティング事業部の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
63
最近の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
420
gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB
dojineko
1
930
もう俺には関係なくない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
710
Other Decks in Technology
See All in Technology
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
330
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
180
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
230
AIのAIによるAIのための出力評価と改善
chocoyama
2
540
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
420
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
190
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
13
4.9k
Model Mondays S2E02: Model Context Protocol
nitya
0
220
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Automating Front-end Workflow
addyosmani
1370
200k
Statistics for Hackers
jakevdp
799
220k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Large-scale JavaScript Application Architecture
addyosmani
512
110k
4 Signs Your Business is Dying
shpigford
184
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
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