cos

フロントエンド開発について#

起源、アーキテクチャ、変遷#

"すべての情報がどこにでもあるコンピュータにリンクされていると仮定しましょう。私のコンピュータにプログラムを作成して、すべてがすべてにリンクできる空間を作成できると仮定しましょう。"

—— ティム・バーナーズ＝リー、ワールドワイドウェブの発明者

“コンピュータに保存されているすべての情報が相互にリンクされていると想像してみてください。さらに、私がコンピュータにプログラムを作成し、すべてのものが相互にリンクできる空間を作成できると想像してみてください。” まさに万物がつながる感じです。

Web は 1989 年初頭に誕生し、当初の Web は 3 つの技術で構成されていました。

• HTML
• HTTP
• URL

CSS と JavaScript は数年後に登場しました。

Web 技術の変遷：

• 読み取り専用時代、クライアントは静的なページに相当し、ページを更新するにはネットワークリクエストを送信する必要があり、リフレッシュせずにページを更新することはできませんでした。
• 体験時代、クライアントは静的から動的への移行を実現し、動的なインタラクション能力を持ち、バックエンドで js を使用してサーバーにリクエストを送信し、DOM を変更して更新された内容をウェブページに表示できるようになりました。当時の Google マップなどはこの技術を使用していました。
• アジャイル時代、現在の主流で、ユーザーの体験がますます重視され、フロントエンドが注目され、フロントエンド開発はモジュール化、コンポーネント化が進み、この時代には React、Vue などの有名なフレームワークや Webpack のようなバンドルツールが登場しました。

フロントエンドアプリケーションの分野#

To Business 企業

バイトダンスの火山エンジンやパブリッククラウドなど、企業に多様なサービスを提供するウェブサイトとして表現されており、大規模で非常に収益性の高い分野です。

To Customer 顧客

最初のウェブページは情報共有の役割を果たしていましたが、現在の顧客に直接アクセスするウェブサイト、e コマースプラットフォーム、オンライン教育、モバイル端末の H5 などはすべて ToC のアプリケーションです。

To Develop 開発者

Web 開発の効率を向上させるツール、コードエディタなど。

ブラウザ

デスクトップブラウザ：Chrome、FireFox、Edge など

モバイルブラウザ：Android、iOS

端末とクロスプラットフォーム

コマンドライン / 端末

• Webpack CLI
• Babel CLI
• Vue CLI
• React CLI

デスクトップクロスプラットフォーム

• Electron
• NW.js

モバイルクロスプラットフォーム

• React Native
• Flutter

言語、フレームワーク、ツール#

• 基本言語、この図はわかりにくい この図は簡潔で明確で、フロントエンドの三大要素に加えて WebAssembly もあります。

• フレームワーク

ブラウザ、ネットワーク、サーバー#

ブラウザ おすすめ記事：

• 原文：全 4 章 Inside look at modern web browser (part 1) | Web | Google Developers
• 译文：現代ブラウザの深い理解

ネットワーク

HTTP の概要 - HTTP | MDN (mozilla.org)

学習ロードマップ#

フロントエンド開発者のロードマップ：現代のフロントエンド開発者になるために学ぶ

Web 標準について#

• W3C: ワールドワイドウェブコンソーシアム（一般的な意味での Web 標準）

  • 公式サイト：https://www.w3.org/
  • Github：https://github.com/w3c
  • 規格検索：すべての標準とドラフト - W3C

• Ecma: エクマインターナショナル（ECMAScript 標準化規格）

  • Ecma TC39 公式サイト：ホーム - エクマインターナショナル (ecma-international.org)
  • TC39：TC39 – JavaScript の仕様。
  • Github：Ecma TC39 (github.com)
  • Discourse（ディスカッショングループ）：TC39 - JavaScript の仕様 (es.discourse.group)

• WHATWG: Web ハイパーテキストアプリケーション技術作業部会

  • 公式サイト：Web ハイパーテキストアプリケーション技術作業部会 (WHATWG)
  • Github：WHATWG (github.com)
  • 規格検索：標準 — WHATWG

• IETF: インターネット技術者協会

  • 公式サイト：IETF | インターネット技術者協会
  • Github：インターネット技術者協会 (IETF) (github.com)

W3C および Ecma メンバー#

W3C 規格策定プロセス#

• W3C 勧告トラックプロセス

• 説明デモ
• 適切なコミュニティ / グループを見つける
• API リンクの Web IDL
• ステップバイステップのアルゴリズム
• Github、Markdown、respec、bikeshed など
• 早期レビューを受ける w3ctag/design-reviews
• web-platform-tests (WPT) テストを書く。

Ecma TC39 規格策定プロセス

• TC39 での提案の推進
• 良い説明を書く方法
• TC39 に提案を提示する
• 提案草案を読む
• ステージ 3 提案レビュー
• ステージ 4 前に提案を試す方法
• TC39 提案の実装と出荷

参加方法 —— 会議に注目#

W3C 会議 w3C 技術全体会議 / 諮問委員会会議週（略称 TPAC）は、W3C の年次グローバル技術会議であり、W3C の各作業部会メンバー（作業部会、興味グループ、コミュニティグループなど）、諮問委員会（AB）、技術アーキテクチャグループ（TAG）、会員代表（AC）、一般公募の専門家、そして世界中のコミュニティメンバーが集まり、1〜2 週間の集中したインタラクションを通じて、今後のオープン Web プラットフォーム技術の方向性を深く議論します。

• 年次大会

  • AC
  • TPAC（技術全体会議および諮問委員会）

• 作業部会会議

  • 毎月の会議
  • 各種ワークショップ

まとめと感想#

フロントエンドエンジニアとして、Web 標準を理解し、ブラウザやネットワークについて把握し、技術の更新をタイムリーに取得することは非常に重要です。この講義での学習ロードマップはフロントエンドの学習にとって非常に良い整理を提供しており、推奨された記事はブラウザについてより深く理解する手助けとなりました。素晴らしいです！

本文で引用された内容の大部分は李松峰先生の講義および MDN からのものです。