ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web Frontend of Pepabo Hosting division 2022

Transcript

1. 1 ホスティング事業部の Webフロントエンドについて dojineko / GMO PEPABO inc. 2022.06.20 フロントエンド研修
2. ホスティング事業部　シニアエンジニア 2014年 中途入社 2 自己紹介 dojineko • Slackに住むバーチャルネコ • フロントエンドなシニアエンジニアです (※バックエンドとインフラもﾁｮﾄﾀﾞｹやってるよ) • GitHub: @dojineko • Twitter : @dojinekox
3. 1. 「Webフロントエンド」ってなぁに？ 2. 最近のフロントエンド事情 • デザイン寄りな部分 • 技術寄りな部分 3. 社内のフロントエンド事情 4. 情報の集め方 • 社内での情報の集め方 • 社外での情報の集め方 3 おしながき
4. 4 ▼ お話すること • Webフロントエンドについての導入 • 近年の技術傾向について • 情報収集の方法 ▼ お話しないこと • 細かな技術仕様や歴史のについての詳細 • サービス仕様の詳細 ▼ おことわり • 本資料は、Webフロントエンドの初学者を対象としています。 • 分かりやすさを優先するために正確な表現を意図的に行っていない場合があります。 • 外部公開にあたって、文章をスライドにしたため一部読みにくい部分があります。 本資料について
5. 5 「Webフロントエンド」ってなぁに？
6. 6 • ブラウザの標準API実装が拡充してきました • また、ブラウザ以外での JavaScript の利用も増えてきています。 • ES Modules に準拠した npm パッケージが増加しています。 • TypeScript の利用が拡大し、静的型付けによる開発手法が定着してきています。 • React や Vue.js などを活用したアプリ開発がメジャーになってきました。 • 2022年06月16日 に Internet Explorer がサポート終了しました。 最近のフロントエンド事情 ▼ おおまかなWebフロントエンドの最近の傾向
7. 7 最近のフロントエンド事情
8. 8 • 「Webブラウザを介して直接見て触れる部分を担当するアプリケーション領域」です。 従って「表層的に触れる部分は大枠全てがフロントエンド」ということになります。 • 表層の機能を支えるAPIなどの領域は バックエンド • バックエンドを支えるサーバーなどの領域は インフラ • ・・・のように大枠くくられます • ユーザー体験に一番影響する部分であるため、常に体験の最適化を求められます。 • 作ったものが比較的目に触れるものであり、触ると明確に動くので そういった部分が楽しめるとマッチする領域かもしれません。 「Webフロントエンド」ってなぁに？ ▼ Webフロントエンドってなんだろう？
9. 9 社内のフロントエンド事情
10. 10 • 十数年積み上げてきた歴史があり、アプリケーションの実装が大きくなっています。 • 世間的なトレンドに常に追従できているかというと、実際のところそうではありません・・・ • 一方で、新規の機能開発やサービスの開発では新しい開発手法を取り入れた実装を日々検証し、 効果的なものは既存のサービスにも適用していっています。 • 大切なことは「常に安定してエンドユーザーに価値を提供できること」と 「良いものを取り入れつつビジネスの実現に必要なモノをはやく形にすること」のバランスです。 • どちらかだけが重要ということはなく、どちらも程よく必要な要素です。 社内のフロントエンド事情 ▼ 取り組み方
11. 11 • 既存のプロジェクトの多くは SCSS を使用してデザインを実装しています。 • React や Vue.js が使われているプロジェクトでは CSS Modules や CSS-in-JS などを使用してスタイリングしています。 • 物によっては、MUI や Vuetify 、 内製のデザインシステムの Inhouse も活用しています。 • どれを使うかは制限はなく、プロジェクトの担当者で合意のもと 適切な技術を選択して使用しています。 • 逆にピュアな CSS を使うことはあまりありませんが、 CSSの基礎知識などは近年のどの技術を使用する場合でも必要になります。 社内のフロントエンド事情 ▼ デザイン寄りな部分
12. 12 • 長く続いているサービスについては JavaScript で直接実装されたり、 古い jQuery が使われていることが多いです。 • 一方で、新しく手を加えたりする機能は TypeScript や React あるいは Vue.js を 使用して型を活用するなど、比較的モダンな仕組みを使った開発を行っています。 • 社内分書でいくつかアーキテクチャ指針が用意されており、 なかでも「フロントエンドアーキテクチャ指針」では、 文書で大枠の推奨事項と非推奨事項についてまとめられています。 社内のフロントエンド事情 ▼ 技術寄りな部分
13. 13 日々の情報の集め方
14. 14 • 「フロントエンド周りの情報は移り変わりが激しい・・・」と言われますが、 基本的には他の技術領域の進化の動きとさほど変わりないです。 • 特にここ4〜5年は劇的な変化は少なく比較的安定しています。(※2022年現在) • 世界トレンドとして React が使われており、多くの知見が集まっています。 • それ以外のライブラリが登場することもありますが、 それによりシェアが急に入れ替わるということもありません。 • 既存の技術が進化したり、新しい標準APIの策定や追加実装が続いています。 • 「昨日覚えた内容が今日使えなくなった」ということは基本的にありません。 • 簡単に機能を実現できる手段が増えているので、どんどん活用しましょう。 情報の集め方 ▼ フロントエンドの全般の傾向
15. 15 • 「フロントエンドエンジニアチャプター」という情報共有が毎週行われています。 • 最新の開発ツールについて • 新しい ECMA Script の標準機能のについて • 他社のフロントエンド関連のテックブログの内容について • 他事業部でのフロントエンド改善事例について • そのほかのおなやみ相談や関連する話題など • ラジオ代わりに活用してもらえると自然と情報が入ってきて便利...かも？ • ちなみに、EC事業部でも同様の取り組みが毎週行われています。 • Slack の 「#frontender」 チャンネルに流れてくる情報を眺めたり ▼ 社内での情報の集め方 情報の集め方
16. 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. 17 これから色々やって学んでみよう！
18. Thanks! 18