2 ポイント 投稿者 GN⁺ 2023-11-13 | 1件のコメント | WhatsAppで共有

HTML First の原則紹介

  • 現代のWebブラウザーの基本機能を活用
  • HTML属性構文の極端なシンプルさを活用
  • WebのView Source機能を活用

HTML First の目標

  • Webソフトウェアのコードベースに携われる人を増やす
  • 個人的には、より多くの人がWebプログラマーになって収入を増やせるようにする
  • ビジネス面では、ソフトウェア開発コストを下げ、人材採用リソースを節約する

HTML First の2つ目の目標

  • Webソフトウェア開発をより楽しく、よりスムーズにする
  • ツールやフレームワークの習得に何年もかける代わりに、HTML First の原則で素早く習熟できるようにする

HTML First の実現方法

  • HTMLが理解しやすいことを認め、内容と構造の定義だけでなく、スタイリングと振る舞いの設定にもHTMLを基盤として使う

原則: Vanilla アプローチを好む

  • スタイリングと振る舞いの設定にHTML属性を使う
  • HTML属性を活用するライブラリを使う
  • ビルド工程を避ける
  • "Naked" HTML を好む
  • View Source フレンドリーなアプローチを使う

ブラウザーの標準サポート機能を活用

  • 外部フレームワークよりも "vanilla" アプローチで機能を実現する
  • ライブラリやフレームワークを追加する前に、純粋なHTML/CSSで可能か確認する

スタイルと振る舞いをHTML属性で定義

  • スタイリングはTailwindやTachyonsのようなSPCライブラリで可能
  • 振る舞いはhyperscript、Alpine などのライブラリを使う
  • HTMLは複雑に見えるかもしれないが、他の開発者が理解して変更しやすい

HTML属性を活用するライブラリを使う

  • JavaScriptやユーザー定義構文を中心にしたライブラリより、HTML属性を活用するライブラリの利用を推奨

ビルド工程を避ける

  • ファイル変換を要求するライブラリは保守負担を増やし、View Source機能を損なう
  • HTML First ライブラリを使えば追加のCSSやJSの必要性を最小化できる

"Naked" HTML を好む

  • バックエンド実装に最も適用しやすい原則
  • HTMLに慣れた開発者なら、バックエンドフレームワークを知らなくてもビュー・ファイルを理解できる

View Source 機能を維持

  • 初期のWebの魅力は、コードを"のぞき見"してWebページの一部を理解できることだった
  • HTML First の原則に従うサイトでは、View Source機能を再び取り戻せる

まとめ

  • このサイトで説明されている実践と原則は、依然として業界全体では少数派
  • こうしたアイデアに共感する人を見つけ、つながりたい

GN⁺の意見

この記事で最も重要なのは、Web開発のアクセシビリティと保守性を向上させるために HTML First の原則を導入している点だ。これらの原則はWeb開発をより簡単かつ迅速にし、より多くの人がWebプログラミングに参加できるようにすることで、個人にもビジネスにも利点をもたらす。このアプローチはWeb開発の複雑さを減らし、コードの可読性を高め、開発者コミュニティ内での知識共有と協業を促進できる可能性があり、興味深い。

1件のコメント

 
GN⁺ 2023-11-13
Hacker Newsの意見
  • 理論的には、あるいは単純な例では面白いが、これらの原則が大規模なプロジェクトにどう適用され、どのような違いを生んだのかを示す事例が必要だ。
  • Webプラットフォームを最大限活用し、複雑さを減らすことには賛成だが、提示された原則が実際に複雑さを減らすかどうかについては懐疑的だ。
  • HTMLの基本機能を使うのは良いが、10年前も今も実用的ではなく、htmxなどがReactのような重いソリューションより優れているとは感じない。
  • ドロップダウン、マルチセレクト、日付ピッカーのような機能を実装する際、ブラウザ間で一貫性がなくスタイリングにも制約があるため、組み込みのHTML要素だけでは十分ではない。
  • 例が弱く、インラインHTML属性でスタイルや動作を定義するのは複雑になりうる。
  • 必要なライブラリを使う場合、JavaScriptや独自構文の代わりにHTML属性を活用するライブラリを使うことには同意する。
  • HTMLマークアップだけで構成されたSaaSプラットフォームの開発には、この哲学がよく合う。
  • 複雑なWebサイトを構築した過程を経ていない人が提示したアンチパターンであり、悪い助言に見える。
  • ユーザーがソース表示を通じて理解できるべきだという主張には同意するが、Webアプリの場合は型付き言語を使うのが望ましい。
  • 「行動の局所性」は関心の分離に反する曖昧に定義されたルールであり、CSSを「距離を超えた不気味な作用」と呼ぶのは誇張表現だ。