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
   

   View Slide

2. PWA Night CONFERENCE is BACK!
   

   View Slide

3. Do you ♥ the Web?
   

   View Slide

4. どのようにWeb開発を楽しみ、続けていくか？
   

   View Slide

5. どのように 私が Web開発を楽しみ、続けていくか？
   

   View Slide

6. 対比いただき、なにかきっかけ
   や参考になれば幸いです！
   

   View Slide

7. 原 一成
   HARA Kazunari
   @herablog
   テックリード、Web Developer
   長期プロダクト運用
   新規開発
   CyberAgent Developer Experts
   趣味: Twitter, Cat, F1, Football
   

   View Slide

8. I ♥ the Web
   

   View Slide

9. View Slide

10. https://www.sony.jp/products/Consumer/PCOM/PCV-R73K/index.html
    

    View Slide

11. View Slide

12. マークアップ for
    モバイル、IE
    ● HTML
    ● CSS
    

    View Slide

13. HTML5
    Web Application
    のつくりかた
    ● Amebaピグのモバイル版
    ● AI to Canvas
    ● Single Page Application
    ● パフォーマンスチューニング
    https://ameblo.jp/ca-1pixel/entry-11009598050.html
    

    View Slide

14. HTML5
    Web Application
    のつくりかた
    ● Amebaピグのモバイル版
    ● AI to Canvas
    ● Single Page Application
    ● パフォーマンスチューニング
    https://ameblo.jp/ca-1pixel/entry-11009598050.html
    

    View Slide

15. HTML5
    Web Application
    のつくりかた
    ● Amebaピグのモバイル版
    ● AI to Canvas
    ● Single Page Application
    ● パフォーマンスチューニング
    https://ameblo.jp/ca-1pixel/entry-11009598050.html
    

    View Slide

16. Ameba
    Platform
    ● Node.js
    https://www.slideshare.net/herablog/ameba-22035207
    

    View Slide

17. テックリードとして
    大事にしていること
    

    View Slide

18. What Is Front-End?
    

    View Slide

19. https://bit.ly/3HZ5K7j
    

    View Slide

20. https://bit.ly/3HZ5K7j
    

    View Slide

21. https://bit.ly/3HZ5K7j
    

    View Slide

22. https://bit.ly/3HZ5K7j
    

    View Slide

23. View Slide

24. Portofolio Like
    Strategy
    変化を前提とした
    ポートフォリオ的な戦略
    

    View Slide

25. いち開発者として大事と思うこと
    

    View Slide

26. 変化を前提とし
    た個人スキル
    ● フレームワークを使い作れる
    ● フレームワークに依存しないスキ
    ルをつける
    ● コラボレーションできる
    

    View Slide

27. テックリードとして大事と思うこと
    

    View Slide

28. Portofolio Like
    Strategy
    変化を前提とした
    ポートフォリオ的な技術戦略
    

    View Slide

29. Portofolio Like
    Strategy
    変化を前提とした
    ポートフォリオ的な技術戦略
    Stable
    Challenge
    Transition
    

    View Slide

30. Amebaブログ
    フル刷新 (2016)
    ● トラディッショナルな構成がボト
    ルネックに
    ● ハイリターンの見込みあり
    ● チャレンジしつつ標準化
    https://developers.cyberagent.co.jp/blog/archives/636/
    

    View Slide

31. https://developers.cyberagent.co.jp/blog/archives/636/
    Amebaブログ
    フル刷新 (2016)
    ● Isomorphic (Universal)
    ● Lazy Load
    ● HTML Server Cache
    

    View Slide

32. https://developers.cyberagent.co.jp/blog/archives/636/
    Amebaブログ
    フル刷新 (2016)
    ● Isomorphic (Universal)
    ● Lazy Load
    ● HTML Server Cache
    

    View Slide

33. https://developers.cyberagent.co.jp/blog/archives/636/
    Amebaブログ
    フル刷新 (2016)
    ● リスクを下げるため、人気
    のあるライブラリを利用
    ● React, Redux, Expressなど
    

    View Slide

34. AmebaNews
    システム改善
    (2021)
    ● Amebaブログの構成を踏襲
    ● ハイリターンは見込みにくい
    ● 管理しやすい構成に変更
    https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u
    

    View Slide

35. AmebaNews
    システム改善
    (2021)
    ● モバイル・デスクトップ統合
    ● Isomorphic, AMP to MPA
    https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u
    

    View Slide

36. AmebaNews
    システム改善
    (2021)
    ● SPA vs MPA
    ● Page Per Session, Largest
    Contentful Paintを比較
    https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u
    

    View Slide

37. AmebaNews
    システム改善
    (2021)
    ● Client-Side Scriptsを削減
    https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u
    

    View Slide

38. こえのブログ
    新規開発 (2019)
    ● 新規開発
    ● 作りきり寄り
    ● 意図的なチャレンジ
    https://speakerdeck.com/herablog/pwa-night-vol-dot-4
    

    View Slide

39. ● The PWA
    ● Web Components
    ● WebAssembly
    こえのブログ
    新規開発 (2019)
    https://speakerdeck.com/herablog/pwa-night-vol-dot-4
    

    View Slide

40. ● The PWA
    ● Web Components
    ● WebAssembly
    こえのブログ
    新規開発 (2019)
    https://speakerdeck.com/herablog/pwa-night-vol-dot-4
    

    View Slide

41. ● The PWA
    ● Web Components
    ● WebAssembly
    こえのブログ
    新規開発 (2019)
    https://speakerdeck.com/herablog/pwa-night-vol-dot-4
    

    View Slide

42. Now 今取り組んでいること
    

    View Slide

43. 生産性の向上
    ⇒ システム化
    ⇒ 人がやらなくていいことを任せる
    

    View Slide

44. CMSの利用
    

    View Slide

45. 感じていた課題
    うまく分業できず
    余分なコミュニケーション発生
    システムの重複、老朽化
    サイト内の文言を変更したい場合
    変更お願いします
    編集者
    デザイナー
    反映しました！
    エンジニア
    確認お願いします
    確認しました！
    デプロイします
    

    View Slide

46. 感じていた課題
    うまく分業できず
    余分なコミュニケーション発生
    システムの重複、老朽化
    サイト内の文言を変更したい場合
    変更します！
    編集者
    CMSポチッ
    

    View Slide

47. CMSでページを量産 with
    News Campaign Site
    

    View Slide

48. function Profile ({ name: '', thumbnail: {} }) {}
    function Heading ({ text: '', level: '' }) {}
    function RichText ({ html: '' }) {}
    function Picture ({ url: '', width: 640 }) {}
    デザイナー エンジニア 編集者
    

    View Slide

49. CMSの利用でリードタイムが改善
    -7
    days
    構成案
    流入設計
    オリエン
    ページデザイン バナー作成
    実装
    テスト
    公開
    

    View Slide

50. CMSでページを量産
    

    View Slide

51. デザインシステム
    

    View Slide

52. 感じていた課題
    UIがバラバラ
    毎回作成
    何がより「正しい」かわからない
    

    View Slide

53. 感じていた課題
    UIがバラバラ
    毎回作成
    何がより「正しい」かわからない
    ボタン追加！
    微妙に違うかも？
    おっと確認します
    正式ボタン is...
    デザイナー
    エンジニア
    デザイナー
    

    View Slide

54. View Slide

55. ブランドを体現す
    るための
    デザインシステム
    ⬇コスト(考慮・コミュニケーション)
    やリスク(ミス・不具合)
    ⬆一貫性
    https://spindle.ameba.design/
    

    View Slide

56. Spindle UI
    ● ミニマルなReactコンポーネント
    ● スタイルが定義されたCSS
    ● 拡張性 < 一貫性
    https://github.com/openameba/spindle/tree/main/packages/spindle-ui
    @openameba/spindle-ui
    

    View Slide

57. デザインシステム
    https://spindle.ameba.design/
    

    View Slide

58. WEB+DB
    PRESS vol.127
    フロントエンド羅針盤 ── Web体験向上へのアプ
    ローチ
    【最終回】品質の優れたプロダクトを継続的に提供
    ……チームで使えるデザインシステムを作る
    https://gihyo.jp/magazine/wdpress/archive/2022/vol127
    

    View Slide

59. 専門性を高める取り組み
    

    View Slide

60. 専門性を高める
    スキル取得 ⇒ 個人メリット
    知識伝承 ⇒ 組織メリット
    プロダクト品質反映 ⇒ 事業メリット
    

    View Slide

61. “Yatteiki”
    ● 業界で使えるスキルを習得
    ● Accessibility, Performance,
    Productivity
    ● 3ヶ月ごとに共有会開催
    

    View Slide

62. Ameba
    Accessibility
    Guidelines
    ● WCAG 2.1を簡易的に説明
    ● DO/DON’T 実装を記載
    ● 継続的にアップデート
    https://a11y-guidelines.ameba.design/
    

    View Slide

63. Amebaブログが
    レベルAに適合
    ● a11y gudelinesを起点に
    ● 実装を改善
    ● テスト
    https://www.cyberagent.co.jp/techinfo/news/detail/id=28260
    

    View Slide

64. レイアウトシフ
    ト改善
    ● CWVのCLSを改善
    ● ログを収集・分析
    ● 実装を改善
    

    View Slide

65. レイアウトシフ
    ト改善
    ● CWVのCLSを改善
    ● ログを収集・分析
    ● 実装を改善
    

    View Slide

66. デプロイの
    しやすさを整備
    ● ワークフローの移行・改善
    ● プレビュー環境の整備
    

    View Slide

67. Future 気になる技術
    (Web App方面)
    

    View Slide

68. Instant &
    Seamless
    Navigations
    快適なナビゲーション
    https://twitter.com/addyosmani/status/1592907811968626688?t=HEsIvVaW_fF7j8YrbotXhA
    

    View Slide

69. Instant &
    Seamless
    Navigations
    快適なナビゲーション
    https://twitter.com/dannymoerkerke/status/1597187172783693824
    

    View Slide

70. View
    Transitions
    実装例 (2022年12月)
    https://developer.chrome.com/docs/web-platform/view-transitions/
    

    View Slide

71. “Advanced”
    Web Apps
    - Storage
    - Sensors
    - WASM などなど
    

    View Slide

72. Project Fugu
    API Showcase
    AdvancedなWebアプリ
    https://developer.chrome.com/blog/fugu-showcase/
    

    View Slide

73. Project Fugu
    API Showcase
    AdvancedなWebアプリ
    https://developer.chrome.com/blog/fugu-showcase/
    

    View Slide

74. Project Fugu
    API Showcase
    AdvancedなWebアプリ
    https://www.youtube.com/watch?v=O_0UIOo5eBA
    

    View Slide

75. Project Fugu
    API Showcase
    AdvancedなWebアプリ
    https://developer.chrome.com/blog/fugu-showcase/
    

    View Slide

76. Project Fugu
    API Showcase
    AdvancedなWebアプリ
    https://docs.google.com/forms/d/e/1FAIpQLScNd1rClbmFWh6FcMmjUNrwg9RLz8Jk4BkHz_-EOpmkVd_-9g/viewform
    

    View Slide

77. Web UI
    ● Open UI
    ● Dark Mode
    ● CSS などなど
    https://open-ui.org/
    

    View Slide

78. CSS
    ● Container Queries
    ● Cascade Layers
    ● Viewport Units
    ● :has() などなど
    https://coliss.com/articles/build-websites/operation/css/css-in-2022-new-features.html
    

    View Slide

79. おわりに
    

    View Slide

80. View Slide

81. https://twitter.com/t_wada/status/1451433290552905735
    

    View Slide

82. Enjoy the Web!
    

    View Slide