Skip to content

Commit

Permalink
article: fix textlint
Browse files Browse the repository at this point in the history
  • Loading branch information
mymactive committed Dec 1, 2023
1 parent 8f0df6f commit 4726f92
Showing 1 changed file with 8 additions and 7 deletions.
15 changes: 8 additions & 7 deletions articles/81a7c2d0201344.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ published: false

コンポーネント指向は、開発をコンポーネントに集中させるアプローチですが、実際にこの方法を採用しようとすると、様々な困難に直面します。これらの課題の中心には、HTML/CSSが持つ固有の特性があります。HTML/CSSは以下のような性質を持っています:

1. ネストと依存性: HTML要素はネストされた構造を持ち、親子関係に基づいてスタイルや動作が継承されます。この構造は、親要素の変更が子要素に影響を及ぼすため、個々のコンポーネントの独立性を維持することを難しくします。
2. 変更の伝播: ツリー内のあるノード(HTML要素)の変更は、他のノードに波及する可能性があります。例えば、CSSスタイルの変更が意図せず他の要素に影響を及ぼすことがあります。これもコンポーネントの独立性を維持することを複雑にします。
1. ネストと依存性 HTML要素はネストされた構造を持ち、親子関係に基づいてスタイルや動作が継承されます。この構造は、親要素の変更が子要素に影響を及ぼすため、個々のコンポーネントの独立性を維持することを難しくします。
2. 変更の伝播 ツリー内のあるノード(HTML要素)の変更は、他のノードに波及する可能性があります。例えば、CSSスタイルの変更が意図せず他の要素に影響を及ぼすことがあります。これもコンポーネントの独立性を維持することを複雑にします。

これらの特性は、コンポーネントの独立性を保つことを難しくし、結果としてコンポーネント指向のアプローチを難しくさせます。シンプルなHTML/CSSの構造では、ページのような全体感を持つ対象から作る方が合理的な場合があります。実際に、ページ全体のHTML/CSSを作成した後、それをコンポーネントに分割する開発プロセスには、私は何度か経験しましたし一定の合理性があると思っています。

## コンポーネント指向の意義

それでもなお、コンポーネントが現代のフロントエンド開発において重要な役割を果たしています。
その理由の一つは、複雑化するアプリケーションの要求にあります。
その理由の1つは、複雑化するアプリケーションの要求にあります。
この文脈で、以下の引用が示唆に富んでいます。

> ソフトウェア開発は、ほとんどすべての物理法則を超越できますが、エントロピー増大の法則には強く縛られます。
Expand All @@ -45,7 +45,7 @@ published: false
さて複雑性を最小化する試みを考える上ではソフトウェアが持つ性質を考えることが重要です。
ソフトウェアはほとんどすべての物理法則を超越したおかげなのか、実行と合成が非常に得意です。
実際、数千件であっても自動テストは何度でも短時間で実行できますし、多くのプログラミング言語では単純にコードを並べるだけで処理を合成できます。
この性質からよく知られているベストプラクティスの一つが導かれます
この性質からよく知られているベストプラクティスの1つが導かれます
それはモジュール性のある単一責務を持つコードを個別に作成し、それらの合成によってソフトウェア開発を進めることです。
具体的には、独立したモジュールを作成し、自動テストなどでその動作を保証し、それらを組み合わせてソフトウェアを構築することを意味します。

Expand All @@ -61,7 +61,7 @@ published: false

### Figma

ここで言う「Figma」とは、実際にはFigmaを代表とするデザインツール全般を指します。これらのツールは、コンポーネント指向を実現する上で最も重要な役割を担っています。その理由は、適切なコンポーネント設計のためにはまず、アプリケーション全体の優れた設計が不可欠であるからです
ここで言う「Figma」とは、実際にはFigmaを代表とするデザインツール全般を指します。これらのツールは、コンポーネント指向を実現する上で最も重要な役割を担っています。その理由は、適切なコンポーネント設計のためにはまず、アプリケーション全体の優れた設計が不可欠です

Figmaのようなツールは、コードから独立してアプリケーションを直感的かつ迅速に設計することを可能にします。これらは軽量で、変更も容易であるため、アプリケーション設計のプロセスにおいて非常に効率的です。設計の柔軟性と速度は、コンポーネント指向のアプローチにおいて重要な要素であり、Figmaなどのツールはこれを強力にサポートします。

Expand Down Expand Up @@ -90,7 +90,7 @@ Testing Libraryの大きな利点は、テストの実行速度が速く、フ

### SWR

コンポーネント単位でAPIリクエストを行う場合、リクエストの重複によりパフォーマンスが低下することがあります。これは「Network Request Waterfall」として知られる問題です。SWRは、この問題に対する解決策の一つとして利用されます。SWRは重複するAPIリクエストを効率的に管理し、パフォーマンスの最適化を図ります。
コンポーネント単位でAPIリクエストを行う場合、リクエストの重複によりパフォーマンスが低下することがあります。これは「Network Request Waterfall」として知られる問題です。SWRは、この問題に対する解決策の1つとして利用されます。SWRは重複するAPIリクエストを効率的に管理し、パフォーマンスの最適化を図ります。

これにより、ある程度の独立性を保ちつつパフォーマンスを改善します。
昨今Next.jsのApp Routerでも同様の最適化が試みられています。
Expand All @@ -101,6 +101,7 @@ Testing Libraryの大きな利点は、テストの実行速度が速く、フ
現代のフロントエンドは、複雑化するアプリケーションの要求に直面しています。私は、この状況がフロントエンド開発を、ソフトウェア開発の古典的なベストプラクティスに向かわせていると考えています。具体的には、コンポーネントという形のモジュールをきちんと作成し、それらの合成によってアプリケーションを構築するというアプローチです。

このアプローチを実現するための有効な技術を本稿では幾つか紹介しました。
フロントエンドは技術の変遷が速いと言われますが、このコンポーネント指向の視点で技術の善し悪しを整理する一助となるのではないかと感じております。
フロントエンドは技術の変遷が速いと言われますが、このコンポーネント指向の視点で技術の変遷を大枠として理解できるのではと考えています。


[^POP]: [上田勲 著. プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則. 秀和システム, 2016.](https://www.shuwasystem.co.jp/book/9784798046143.html)

0 comments on commit 4726f92

Please sign in to comment.