Enjoy the Web

PWA Night CONFERENCE 2022 基調講演のスライドです。

「Enjoy the Web 〜長くWeb開発を楽しむために大事にしていること〜」

Webはその誕生から大きく進化し、プロダクトを作るための技術もトレンドとともに移り変わってきました。同時にプロダクトを作るための役割も変化し、多くの人が関わるようになってきました。それらはこれからも変化していくと考えられます。

そうした環境で長くWeb開発をおこない、楽しむためにはどのようなことを大事にするとよいでしょうか。

本セッションでは、テックリードとして私自身の経験から学んだことを紹介しながら、今そしてこれからのWeb開発を考えます。

https://conf2022.pwanight.jp/speaker/hara/

Transcript

1. Enjoy the Web Kazunari Hara @herablog Dec 3, 2022 at PWA Night CONFERENCE 2022
2. PWA Night CONFERENCE is BACK!
3. Do you ♥ the Web?
4. どのようにWeb開発を楽しみ、続けていくか？
5. どのように 私が Web開発を楽しみ、続けていくか？
6. 対比いただき、なにかきっかけ や参考になれば幸いです！
7. 原 一成 HARA Kazunari @herablog テックリード、Web Developer 長期プロダクト運用 新規開発 CyberAgent Developer Experts 趣味: Twitter, Cat, F1, Football
8. I ♥ the Web
10. https://www.sony.jp/products/Consumer/PCOM/PCV-R73K/index.html
12. マークアップ for モバイル、IE • HTML • CSS
13. HTML5 Web Application のつくりかた • Amebaピグのモバイル版 • AI to Canvas • Single Page Application • パフォーマンスチューニング https://ameblo.jp/ca-1pixel/entry-11009598050.html
14. HTML5 Web Application のつくりかた • Amebaピグのモバイル版 • AI to Canvas • Single Page Application • パフォーマンスチューニング https://ameblo.jp/ca-1pixel/entry-11009598050.html
15. HTML5 Web Application のつくりかた • Amebaピグのモバイル版 • AI to Canvas • Single Page Application • パフォーマンスチューニング https://ameblo.jp/ca-1pixel/entry-11009598050.html
16. Ameba Platform • Node.js https://www.slideshare.net/herablog/ameba-22035207
17. テックリードとして 大事にしていること
18. What Is Front-End?
19. https://bit.ly/3HZ5K7j
20. https://bit.ly/3HZ5K7j
21. https://bit.ly/3HZ5K7j
22. https://bit.ly/3HZ5K7j
24. Portofolio Like Strategy 変化を前提とした ポートフォリオ的な戦略
25. いち開発者として大事と思うこと
26. 変化を前提とし た個人スキル • フレームワークを使い作れる • フレームワークに依存しないスキ ルをつける • コラボレーションできる
27. テックリードとして大事と思うこと
28. Portofolio Like Strategy 変化を前提とした ポートフォリオ的な技術戦略
29. Portofolio Like Strategy 変化を前提とした ポートフォリオ的な技術戦略 Stable Challenge Transition
30. Amebaブログ フル刷新 (2016) • トラディッショナルな構成がボト ルネックに • ハイリターンの見込みあり • チャレンジしつつ標準化 https://developers.cyberagent.co.jp/blog/archives/636/
31. https://developers.cyberagent.co.jp/blog/archives/636/ Amebaブログ フル刷新 (2016) • Isomorphic (Universal) • Lazy Load • HTML Server Cache
32. https://developers.cyberagent.co.jp/blog/archives/636/ Amebaブログ フル刷新 (2016) • Isomorphic (Universal) • Lazy Load • HTML Server Cache
33. https://developers.cyberagent.co.jp/blog/archives/636/ Amebaブログ フル刷新 (2016) • リスクを下げるため、人気 のあるライブラリを利用 • React, Redux, Expressなど
34. AmebaNews システム改善 (2021) • Amebaブログの構成を踏襲 • ハイリターンは見込みにくい • 管理しやすい構成に変更 https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u
35. AmebaNews システム改善 (2021) • モバイル・デスクトップ統合 • Isomorphic, AMP to MPA https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u
36. AmebaNews システム改善 (2021) • SPA vs MPA • Page Per Session, Largest Contentful Paintを比較 https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u
37. AmebaNews システム改善 (2021) • Client-Side Scriptsを削減 https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u
38. こえのブログ 新規開発 (2019) • 新規開発 • 作りきり寄り • 意図的なチャレンジ https://speakerdeck.com/herablog/pwa-night-vol-dot-4
39. • The PWA • Web Components • WebAssembly こえのブログ 新規開発 (2019) https://speakerdeck.com/herablog/pwa-night-vol-dot-4
40. • The PWA • Web Components • WebAssembly こえのブログ 新規開発 (2019) https://speakerdeck.com/herablog/pwa-night-vol-dot-4
41. • The PWA • Web Components • WebAssembly こえのブログ 新規開発 (2019) https://speakerdeck.com/herablog/pwa-night-vol-dot-4
42. Now 今取り組んでいること
43. 生産性の向上 ⇒ システム化 ⇒ 人がやらなくていいことを任せる
44. CMSの利用
45. 感じていた課題 うまく分業できず 余分なコミュニケーション発生 システムの重複、老朽化 サイト内の文言を変更したい場合 変更お願いします 編集者 デザイナー 反映しました！ エンジニア 確認お願いします 確認しました！ デプロイします
46. 感じていた課題 うまく分業できず 余分なコミュニケーション発生 システムの重複、老朽化 サイト内の文言を変更したい場合 変更します！ 編集者 CMSポチッ
47. CMSでページを量産 with News Campaign Site
48. function Profile ({ name: '', thumbnail: {} }) {} function Heading ({ text: '', level: '' }) {} function RichText ({ html: '' }) {} function Picture ({ url: '', width: 640 }) {} デザイナー エンジニア 編集者
49. CMSの利用でリードタイムが改善 -7 days 構成案 流入設計 オリエン ページデザイン バナー作成 実装 テスト 公開
50. CMSでページを量産
51. デザインシステム
52. 感じていた課題 UIがバラバラ 毎回作成 何がより「正しい」かわからない
53. 感じていた課題 UIがバラバラ 毎回作成 何がより「正しい」かわからない ボタン追加！ 微妙に違うかも？ おっと確認します 正式ボタン is... デザイナー エンジニア デザイナー
55. ブランドを体現す るための デザインシステム ⬇コスト(考慮・コミュニケーション) やリスク(ミス・不具合) ⬆一貫性 https://spindle.ameba.design/
56. Spindle UI • ミニマルなReactコンポーネント • スタイルが定義されたCSS • 拡張性 < 一貫性 https://github.com/openameba/spindle/tree/main/packages/spindle-ui @openameba/spindle-ui
57. デザインシステム https://spindle.ameba.design/
58. WEB+DB PRESS vol.127 フロントエンド羅針盤 ── Web体験向上へのアプ ローチ 【最終回】品質の優れたプロダクトを継続的に提供 ……チームで使えるデザインシステムを作る https://gihyo.jp/magazine/wdpress/archive/2022/vol127
59. 専門性を高める取り組み
60. 専門性を高める スキル取得 ⇒ 個人メリット 知識伝承 ⇒ 組織メリット プロダクト品質反映 ⇒ 事業メリット
61. “Yatteiki” • 業界で使えるスキルを習得 • Accessibility, Performance, Productivity • 3ヶ月ごとに共有会開催
62. Ameba Accessibility Guidelines • WCAG 2.1を簡易的に説明 • DO/DON’T 実装を記載 • 継続的にアップデート https://a11y-guidelines.ameba.design/
63. Amebaブログが レベルAに適合 • a11y gudelinesを起点に • 実装を改善 • テスト https://www.cyberagent.co.jp/techinfo/news/detail/id=28260
64. レイアウトシフ ト改善 • CWVのCLSを改善 • ログを収集・分析 • 実装を改善
65. レイアウトシフ ト改善 • CWVのCLSを改善 • ログを収集・分析 • 実装を改善
66. デプロイの しやすさを整備 • ワークフローの移行・改善 • プレビュー環境の整備
67. Future 気になる技術 (Web App方面)
68. Instant & Seamless Navigations 快適なナビゲーション https://twitter.com/addyosmani/status/1592907811968626688?t=HEsIvVaW_fF7j8YrbotXhA
69. Instant & Seamless Navigations 快適なナビゲーション https://twitter.com/dannymoerkerke/status/1597187172783693824
70. View Transitions 実装例 (2022年12月) https://developer.chrome.com/docs/web-platform/view-transitions/
71. “Advanced” Web Apps - Storage - Sensors - WASM などなど
72. Project Fugu API Showcase AdvancedなWebアプリ https://developer.chrome.com/blog/fugu-showcase/
73. Project Fugu API Showcase AdvancedなWebアプリ https://developer.chrome.com/blog/fugu-showcase/
74. Project Fugu API Showcase AdvancedなWebアプリ https://www.youtube.com/watch?v=O_0UIOo5eBA
75. Project Fugu API Showcase AdvancedなWebアプリ https://developer.chrome.com/blog/fugu-showcase/
76. Project Fugu API Showcase AdvancedなWebアプリ https://docs.google.com/forms/d/e/1FAIpQLScNd1rClbmFWh6FcMmjUNrwg9RLz8Jk4BkHz_-EOpmkVd_-9g/viewform
77. Web UI • Open UI • Dark Mode • CSS などなど https://open-ui.org/
78. CSS • Container Queries • Cascade Layers • Viewport Units • :has() などなど https://coliss.com/articles/build-websites/operation/css/css-in-2022-new-features.html
79. おわりに
81. https://twitter.com/t_wada/status/1451433290552905735
82. Enjoy the Web!