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

Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来

Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来

TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来 (2024.06.19) https://techfeed.io/events/techfeed-experts-night-31 で使用のスライドです。本編 15 分。

Ayumu Sato

June 19, 2024
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

  1. Web 開発の 長 距離 走 と持続可能性 2024.06.19 @ahomu TechFeed Experts

    Night#31 〜 フロントエンドアーキテクチャの現状と未来
  2. @ahomu - Ayumu Sato KINTOテクノロジーズ株式会社 前の職場:HR Tech スタートアップで経営ボード + Web

    Dev 前々の職場:メガベンチャーで Web フロントエンド、EM、 人 事 最初の職場:Web システム受託 / 自 社CMS開発で LAMP スタック
  3. 長 距離 走   Wikipedia調べ 陸上競技としては5000メートル以上が 長 距離扱いらしいです 長 距離

    走 (ちょうきょりそう)とは、陸上競技のうち 長 距離を 走 る競技。 絶対的なスピードや瞬発 力 などよりも持久 力 、戦略などが要求される。同様に 高 い有酸素持久 力 を要求される中距離 走 と 比 べると展開は緩やかであるのが特 徴。短距離 走 などは常に 自己 の最 大 パフォーマンスを発揮することを狙い同 走 者の動向によってレース展開を変えることはないが、 長 距離 走 は時には同 走 者と 駆け引きを 行 い、勝負どころを掴み勝機を掴むための 高 い技術 力 も必要とされ る。 via. https://ja.wikipedia.org/wiki/ 長 距離 走
  4. 設計の前提にある 長 距離 走 の理想 もちろん、アプリケーションの設計だけで成し遂げられるわけがない話です • 安 心 して快適に使える堅牢な

    UI、サービスによって価値が提供されていて • コードベースの健全性が 高 い 水 準を保ち続けていて • 事業価値にヒットする (かもしれない) タスクを滞りなく回せていて • 関わるメンバーの成 長 やウェルビーイングが両 立 されていて • あわよくば事業がうまくいっている状態 • ...を実現するための 土 台として「設計」をしたい(ですよね?)
  5. 長 距離 走 に耐えられなさそうな状態 よくある「技術的負債」に丸めず、きっと皆さんが出会ってきたであろう具体ケースを想定してみたい • CSS の変更が予期できず壊れやすいため、変更容易性が損なわれている • limit

    なしの全件取得箇所で、データ増加に伴う性能低下や表 示 崩れが 生 じる • 非 標準のWeb APIに依存していて、 非 合理なブラウザ環境の制約を抱えている • キャッシュレイヤーがなく、アクセス量と 比 例して通信費が 高 騰する • UIの 見 た 目 や操作性、情報構造などに 一 貫性がなく利 用 体験が損なわれる
  6. 人 的資源 今のところはまだ開発のほとんどを 人 間がコーディングしているので、 人 的資源のウェイトが重い • 人 は燃え尽きる

    • 正しい開発習慣の強要も相 手 次第で燃え尽きを助 長 する • メンバーを鑑みて複雑性や強度を調整する必要がある • 生 成 AI が進歩したら計算資源の問題になるかもしれない
  7. 予算/期限 まさに時は 金 なり • 開発費 = ほぼ 人 件費であり、時間に

    比 例して予算が溶ける • アジャイルだろうと滝 行 だろうと時間的制約はある • そのために時間を理由とした妥協も常に 生 じる • 妥協の産物がただの稚拙か、意図的な拙速かの区別はある
  8. Web Sustainability Guidelines (WSG) 1.0 うぇっぶさすてなぼー... Draft Community Group Report

    ですし、標準仕様とかではありません • Web をより持続可能にするため、ESG に基づいた推奨事項のガイドライン • 具体的な実装や配信上のプラクティス、ユーザー体験、ビジネス設計 etc など 多岐にわたる関 心 事を内包したドキュメント • 関連する参考 文 書に Design Principles、Ethical Web Principles、Human Rights Spec、Privacy Principles など....
  9. 持続可能性 ≒ 効率的で 長 期的なシステムであること 長 距離 走 を 走

    り抜くヒントとして役に 立 つ考え 方 のひとつではないか?
  10. 3.21 Align Technical Requirements With Sustainability Goals 技術要件と持続可能性の 目 標を

    一 致させるための達成基準(抜粋) • Identify Requirements • 要件に合わせ最 小 限の実装 (構築負荷が 高 い) か既製品的な実装 (運 用 負荷が 高 い) か慎重に選択する • Optimized Methodology • 重いライブラリ、フレームワークよりもネイティブな機能を優先する • Static VS Dynamic • サーバーで動的 生 成するよりも、配信時の負荷が低い静的 生 成の採 用 を優先して検討する • Expandability Considerations • プラグインや拡張機能の類は相互運 用 性、アクセシビリティ、性能が最 大 限 高 まるよう選択する
  11. 3.21 Align Technical Requirements With Sustainability Goals 技術要件と持続可能性の 目 標を

    一 致させることによる利点(抜粋) • Environmental • 長 期的なテクノロジーの影響を慎重に検討し、時間をかけて最適化して効率的に活 用 すること で、環境への影響を 長 期的に削減できる • Performance • インフラストラクチャの無 用 な複雑さを回避すると、開発者の作業速度が向上するだけでなく、 パフォーマンス 面 のオーバーヘッドも軽減され、排出量削減に関連するメリットも 高 まる • Economic • ユーザー体験に過度の負担をかける可能性のあるテクノロジーを避けることで、結果的にメンテ ナンスなどの 面 で経済的な節約につながる可能性がある
  12. 2.13 Use a Design System To Prioritize Interface Consistency ウェブ標準とわかりやすいパターンに基づいたインターフェースによって体験の

    一 貫性を提供しましょう • Environmental, Economic • 一 貫性と最適化が成されたパーツに倣い、無 用 な再 生 産や冗 長 性を排することで結果的に利 用 者、開発者、企業など全体のエネルギー使 用 量を削減し、経済効率を 高 める • Performance, Accessibility • よく作り込まれて標準化されたコンポーネントによって構築されることは各種のパフォーマンス やアクセシビリティにポジティブな影響がある • Conversion • 一 貫性のある体験によって訪問者が効果的に利 用 できるようになると、リテンション率やコン バージョン率の向上が期待される
  13. 3.17 Manage Dependencies Appropriately "only using libraries where necessary" 本当に必要なものだけを管理しましょう

    • Environmental • 開発者のマシンは、必要のないパッケージのインストールやレンダリングにエネルギーを浪費す る必要がない • Security • サードパーティのコードには、バグやセキュリティ上の問題が含まれている可能性がある。パッ ケージを常に最新の状態に保ち、サードパーティ・ライブラリの使 用 数を減らすことで、セキュ リティ上の 欠 陥が発 生 する可能性を減らすことができる • Performance • クライアントサイドのJavaScriptを減らすと、通常ウェブサイトが速くなる
  14. 4.10 Consider CDNs and Edge Caching CDNで効率的な配信を 行 うことのシンプルな価値を前提として、CDN事業者 自

    体の持続可能性への投資も考慮しましょう • Environmental • アセットの配信が速くなり (サーバーがデバイスに近づくため)、デバイスの前で過ごす時間が短 縮され、その結果、消費者のデバイスのバッテリーが消耗しなくなる • Social Equity • コンテンツが 自 分の所在地に近い地域で利 用 できる可能性があるため、通常はサービスが 行 き届 いていない地域や経済、または恵まれない環境の訪問者にメリットをもたらす • Economic • コンテンツ配信ネットワークは規模の経済性に基づいて機能し、そのデータ転送料 金 は多くのホ スティングプロバイダーよりも安価であることが多い
  15. ” "We hope that more websites start moving in this

    direction of markup-first, small bundles, and less UI- rendering JavaScript code." via. An even faster Microsoft Edge
  16. 太平洋フェリー船内の壁 面 にあった 鳥 の絵 • 開発は 長 距離 走

    • 設計はし続けるもの • 長 距離 走 と持続可能性の親和性 • 持続可能なアプローチにおける 本質的な合理性・効率性を評価 してみても良いのではないか まとめ