アンチパターン、または単に効果のないコードの例は、経験豊富な開発者のソースコードであっても、非常に陰湿な貢献者になる可能性があります。これは、タスクの設定または非常に厳しい期限の結果である場合もあれば、不注意が失敗する場合もあります。
この記事では、クリスマスツリーのデザインのアンチパターンについて説明します。このアンチパターンの本質は、場合によっては、命令型アプローチがソーステキストに影響を与え、理解と維持がはるかに困難になるという事実にあります。すべてを最初から書き直す方が簡単であることがわかるまで、1つの複雑さが次の問題を引き起こします。
このアンチパターンは、1回の変更ではなく、コードの開発に関連する一連の改善で取得できるため、興味深いと思います。そして、はい、あなたは正しく理解しました、私たちはコードが良くなっていることを私たち自身と顧客に納得させます、しかし結局私たちはクリスマスツリーを手に入れます。これをよりよく理解するために、単純なものから複雑なものまでの一連のタスクを検討し、効果のないコードにつながる判断の過程を追跡してみてください。
問題の誕生
特定の数を表示する単純なコンポーネントがあると想像してみましょう-「カウンター」
const Counter = ({ value }) => {
return <div>{ value }</div>;
};
「カウンター」は文字通りに解釈されるべきではありません。これは、問題の本質を対比するための単純化されたモデルにすぎません。
数値の後に、測定単位を入力するなど、より機能的にするためのタスクを受け取りました- digits
。コンポーネントは次のようになります。
const Counter = ({ value, digits }) => {
return <div>{ `${value} ${digits}` }</div>
};
, , : 10 ()
. , :
const Counter = ({ value, digits, type }) => {
const temp = type ? `(${digits})` : digits;
return <div>{ `${value} ${temp}` }</div>
};
, . , «Counter» , . . , — a
, b
c
, y
- f(a, b, c)
, .
, « ». , , . , . , ,
a * b
. ,a + b.
«Counter» , (digits
type
) , . . a * b
, . , , :
, digits
, value
, , a
, . , , . . type
.
... . , , , , .
, , digits
, , , «Counter» . , ...
?
, «Counter» . , , , . digits
type
, b' = f(b)
. :
const getCoveredDigits = (digits) => `(${digits})`;
<Counter
value={value}
digits={getCoveredDigits(digits)}
/>
, :
, f(b)
, . , «Counter».
もちろん、「Counter」を実装する際に、実際の制作では見過ごされがちないくつかの間違いを故意に犯しました。理想的なコンポーネントモデルはありませんが、より有益な分解を行うことで、ソーステキストの量を減らし、その結果、アプリケーションの全体的な信頼性とスケーラビリティを向上させることができます。