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

Enjoy the Web

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
  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

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

  11. None
  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

  23. None
  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... デザイナー

    エンジニア デザイナー
  54. None
  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. おわりに

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

  82. Enjoy the Web!