Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Enjoy the Web

Kazunari Hara
December 03, 2022

Enjoy the Web

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

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

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

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

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

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

Kazunari Hara

December 03, 2022
Tweet

More Decks by Kazunari Hara

Other Decks in Technology

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