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
0
8.5k
ペパボ ホスティング事業部の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
10
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
87
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
140
Viteはいいぞ/Vite is Good
dojineko
1
650
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
360
gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB
dojineko
1
740
もう俺には関係なくないTypeScript/Our TypeScript
dojineko
3
300
TypeScript ではじめる Clean Architecture / Let's start Clean Architecture with TypeScript
dojineko
2
3k
Hosting meets .NET / hosting-meets-dotnet
dojineko
0
620
Other Decks in Technology
See All in Technology
JAWS-UG 事務局 の「これまで」から みんなで「ここから」を考えよう
miu_crescent
2
140
AIとともに歩んだライブラリアップデートの道のり/ vue-fes-japan-2024-link-and-motivation
lmi
2
2.1k
次は君だ。~Japan AWS Jr. Champions 受賞までの奇跡~
fukuchiiinu
0
120
生成AIの活用パターンと継続的評価
asei
3
270
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
270
Automated Tests Now and Future @ SQiP Workshop Special Lecture 2024
teyamagu
PRO
2
490
RAG: from dumb implementation to serious results
glaforge
0
670
新入社員 オンボーディング改善プロジェクト - シンプルな仕組みで変革のきっかけを
enpipi
0
480
エンジニア向け会社紹介資料
caddi_eng
14
270k
組織デバイスのための効率的なアプリケーション更新戦略
kenchan0130
0
460
Demystifying Vite Internals
nozomuikuta
3
760
サーバレスで挑む IoT プロジェクトの現実解 / Real solutions for the IoT project using serverless service
genkiogasawara
1
130
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
What's in a price? How to price your products and services
michaelherold
243
11k
Thoughts on Productivity
jonyablonski
67
4.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Writing Fast Ruby
sferik
626
60k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Faster Mobile Websites
deanohume
304
30k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
GitHub's CSS Performance
jonrohan
1030
450k
Automating Front-end Workflow
addyosmani
1365
200k
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