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.4k
ペパボ ホスティング事業部の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
69
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
150
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
170
Viteはいいぞ/Vite is Good
dojineko
1
750
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
440
gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB
dojineko
1
950
もう俺には関係なくない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
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
260
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
280
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
110
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
220
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
780
Rubyの国のPerlMonger
anatofuz
1
410
テキストからの実世界知能の実現に向けて
sumoai
0
110
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
380
Mambaで物体検出 完全に理解した
shirarei24
2
160
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
130
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
450
TypeScript 上達の道
ysknsid25
23
5k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Designing for Performance
lara
610
69k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
86
4.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
It's Worth the Effort
3n
185
28k
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