目次
正しさ:私たちが本当に欲しいもの
プログラムの正確性の視覚化モデル
テストと正確性
タイプと正しさ
それらをまとめてください
ホームページ ウェブフロントエンド CSSチュートリアル タイプまたはテスト:両方ではないのはなぜですか?

タイプまたはテスト:両方ではないのはなぜですか?

Apr 19, 2025 am 09:50 AM

タイプまたはテスト:両方ではないのはなぜですか?

タイプされたJavaScriptの価値について、時々議論があります。 「もっとテストを書く!」一部の対戦相手は叫んだ。 「ユニットテストをタイプに置き換えてください!」他の人は叫んだ。どちらもいくつかの点で正しいものであり、他の点では間違っています。 Twitterのスペースは、微妙さを反映するのに十分ではありません。しかし、この記事では、この2つがどのようにどのように共存するかについての合理的な議論を詳しく説明しようとすることができます。

正しさ:私たちが本当に欲しいもの

結果から始めるのが最善です。これらすべてのメタエンジニアリングから本当に望んでいるのは正確さです。私は厳格な理論的なコンピューターサイエンスの定義に言及しているのではなく、プログラムの行動とその規範をより一般的に順守しています。プログラムがどのように機能するかについてのアイデアがあり、プログラミングプロセスがビットとバイトを整理し、このアイデアを実現します。私たちは常に自分が望むものを正確に知っているとは限らず、変更を加えるときにプログラムが壊れないことを確認したいので、最初に物事を機能させるために、既存の元のコードの上にタイプとテストを書きます。

したがって、正しさが私たちが望むものであり、その種類とテストがこれを達成するための自動化された方法であることを受け入れる場合、タイプとテストが正確性を達成するのに役立つ方法を示すための直感的なモデルを持つことをお勧めします。

プログラムの正確性の視覚化モデル

プログラムが実行できるすべての操作(エラーを含む)が巨大な灰色の領域として実行できるすべての操作のすべての無限の完全なスペースを想像する場合、プログラムを実行したいもの、仕様は、その可能なスペースの非常に小さなサブセットです(下の図の緑の菱形は、何かを表示するためにサイズが誇張されています):

プログラミングでの私たちの仕事は、プログラムを可能な限り仕様に合わせることです(もちろん、私たちは不完全であり、人間の誤り、新機能、または不特定の動作のために、私たちの仕様は絶えず変化していることがわかります。

ここでの議論の目的のために、手続き的行動の境界には計画されたエラーと計画外の両方のエラーも含まれることに注意してください。 「正しさ」の意味には、計画されていないエラーではありませんが、計画されていないエラーは含まれません。

テストと正確性

私たちのプログラムが私たちの期待を満たしていることを確認するためにテストを書きますが、テストするものには多くのオプションがあります。

理想的なテストは、図のオレンジ色のドットです。プログラムが仕様と重複するかどうかを正確にテストします。この視覚化では、テストタイプを実際に区別するものではありませんが、ユニットテストを非常に小さなポイントと考えることができ、統合/エンドツーエンドのテストが大きなポイントです。いずれにせよ、それらはポイントです。なぜなら、プログラム内のすべてのパスを完全に記述できるテストはないからです。 (実際、100%のコードカバレッジを使用できますが、爆発が組み合わされているため、すべてのパスをテストすることはできません!)

写真の青い点は悪いテストです。もちろん、プログラムが機能するかどうかをテストしますが、実際には基礎となる仕様に固定していません(1日の終わりには、プログラムから本当に取得したいこと)。このテストは、プログラムを修正して仕様とより密接に整合すると壊れ、偽陽性が得られます。

紫色のドットは、プログラムが機能するべきだと考える方法をテストし、プログラムが現在機能していない領域を決定するため、貴重なテストです。紫色のテストでリードし、それに応じてプログラムの実装を修正することは、テスト駆動型開発としても知られています。

写真の赤いテストはまれなテストです。 「ハッピーパス」(計画の間違った状態を含む)をテストするのは、通常の(オレンジ)テストではなく、「不幸なパス」が失敗したことを期待して検証するテストです。このテストが「失敗する」場所に「合格」する場合、それは何かが間違っているという大きな早期警告サインですが、スペックグリーン領域の外に存在する大きな不幸なパスをカバーするのに十分なテストを書くことは基本的に不可能です。うまくいかないものをテストすることが価値があることを見つけることはまれです。したがって、彼らはそれをしません。しかし、物事がうまくいかない場合、それはまだ役立つ早期警告サインになる可能性があります。

タイプと正しさ

テストがプログラムが操作を実行できる可能性空間の単一のポイントである場合、このタイプは、パーツ全体を総確率空間から分割するカテゴリを表します。それらを長方形として視覚化することができます:

プログラムを表すダイヤモンドを比較するために長方形を選択します。なぜなら、タイプシステム自体がタイプを使用してプログラムの動作を完全に説明できるためです。 (簡単な例を示すために、常に正の整数である必要があるIDは数値タイプですが、数値タイプも分数と負の数を受け入れます。数値リテラルの非常に単純な結合を除けば、数値タイプを特定の範囲に制限することは不可能です。)

タイプは、コードを書くときにプログラムが実行できる場所の制約として機能します。プログラムがプログラムタイプの指定された境界を超え始めた場合、タイプチェッカー(TypeScriptやFlowなど)は、単にプログラムのコンパイルを許可することを拒否します。これは良いことです。なぜなら、JavaScriptのような動的な言語では、確かに作成したくないクラッシュプログラムを誤って作成できるからです。最も簡単な付加価値は、自動ヌル値チェックです。 fooにbarという名前のメソッドがない場合、foo.bar()を呼び出すと、よく知られていない未定義が機能することは機能の例外ではありません。 FOOが完全に入力されている場合、執筆時点でタイプチェッカーでこの問題をキャッチし、コードの問題のある行を指摘することができます(および自動コンプリートの伴う利点があります)。これは、テストができないことです。

まるで私たちの仕様に適合している可能性のある長方形をできるだけ小さな長方形に書こうとしているかのように、プログラムの厳格なタイプを書きたいと思うかもしれません。ただし、タイプシステムを活用するには、完全に新しい構文と演算子と、JavaScriptの完全なダイナミックレンジをシミュレートするために必要な一般的なタイプロジックの構文を学習することが含まれるため、これには学習曲線があります。マニュアルとチートシートは、学習曲線を下げるのに役立ち、ここでより多くの投資が必要です。

幸いなことに、この採用/学習曲線は私たちを止める必要はありません。タイプチェックは、フローのオプションのプロセスであり、タイプスクリプトの構成可能なストリンジェンシー(問題のコードのラインを選択的に無視する機能)であるため、タイプの安全性の範囲内から選択できます。これをモデル化することもできます:

上記の画像の大きな赤い長方形のように、より大きな長方形は、コードベースのタイプシステムの非常にゆるい採用を示しています。たとえば、インクリティニーを許可し、タイプの推論に完全に依存して、プログラムを最悪のコーディングから単純に制限します。

中程度のストリンジェンシー(中型の緑の長方形など)は、より忠実なタイプ化を示すことができますが、コードベース全体で明示的なインスタンスや手動型アサーションを使用するなど、多くの脆弱性があります。それにもかかわらず、このような軽量のタイピング作業が実行されたとしても、仕様と一致しない効果的なプログラムの可能な表面積は大幅に削減されます。

紫色の長方形のような最大の厳密さは、物事を非常にきつくするため、プログラムの不適合な部分を見つけることがあります(通常、プログラムの動作における予定外のエラーです)。このような既存のプログラムでエラーを探すことは、通常のJavaScriptコードベースを変換するチームで非常に一般的なケースです。ただし、タイプチェッカーから最大タイプの安全性を取得するには、各変数と機能の可能なタイプスペースを改良および絞り込むように設計された一般的なタイプと特別な演算子を活用する必要があります。

タイプを書く前にプログラムを作成する必要はないことに注意してください。結局のところ、タイプが仕様を密接にシミュレートすることを望んでいるので、実際にタイプを最初に記述してから、後で実装を入力できます。理論的には、これはタイプ駆動型開発です。実際には、実際のプログラムコードにタイプが浸透してインターワインするため、実際にこのように開発する人はほとんどいません。

それらをまとめてください

最終的に構築したいのは、プログラムの正確性を確保するためにタイプとテストが互いに補完する方法を示す直感的な視覚化です。

私たちのテストは、私たちのプログラムが選択された臨界パスで予想どおりに特別に実行されることを主張しています(ただし、上記のように、特定の他のテストバリアントがありますが、テストの大部分はそうしています)。私たちが開発した視覚言語では、プログラムの濃い緑色の菱形を標準的な薄緑色の菱形に「修正」します。プログラムの動きはこれらのテストを破壊し、警告を発します。それは素晴らしい!テストには、最もカスタマイズされたユースケースの無制限の柔軟性と構成性もあります。

私たちのタイプは、私たちのプログラムが、できるだけ密接に仕様を囲むことを望んで、私たちが描いた境界を越えて可能な障害モードを禁止することによって私たちの制御不能にならないと主張しています。私たちの視覚言語では、彼らは標準から逸脱するプログラムの可能性のあるドリフトを「封じ込め」(私たちは常に欠陥があり、私たちが犯すすべての間違いはプログラムに追加の障害を追加するからです)。タイプも鈍いですが、(推論とエディターツールのタイプのため)、ゼロから書く必要のないタイプを提供する強力なコミュニティから利益を得る強力なツールです。

要するに:

  • テストは、幸せな道が機能するようにするのに最適です。
  • タイプは、不幸なパスが存在するのを防ぐのに最適です。

最良の結果を得るために、それらの強みに従ってそれらを一緒に使用してください!

タイプとテストがどのように交差するかについて詳しく知りたい場合、ゲイリー・ベルンハルトの境界に関する素晴らしいスピーチとケント・C・ドッズのテストトロフィーは、この投稿についての私の考えに大きな影響を与えました。

以上がタイプまたはテスト:両方ではないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ホットトピック

一般的なCSSブラウザの矛盾とは何ですか? 一般的なCSSブラウザの矛盾とは何ですか? Jul 26, 2025 am 07:04 AM

さまざまなブラウザのCSS解析に違いがあるため、主にデフォルトのスタイルの違い、ボックスモデルの計算方法、フレックスボックスおよびグリッドレイアウトサポートレベル、および特定のCSS属性の一貫性のない動作を含む一貫性のないディスプレイ効果が得られます。 1.デフォルトのスタイル処理は一貫性がありません。解決策は、cssresetまたはremormize.cssを使用して初期スタイルを統合することです。 2。IEの古いバージョンのボックスモデル計算方法は異なります。 Box-Sizing:Border-Boxを統一された方法で使用することをお勧めします。 3. FlexBoxとグリッドは、エッジの場合や古いバージョンでは異なる機能を示します。より多くのテストを行い、Autoprefixerを使用します。 4.一部のCSS属性の動作は一貫性がありません。 Caniuseは相談して格下げする必要があります。

アクセントカラーのプロパティとは何ですか? アクセントカラーのプロパティとは何ですか? Jul 26, 2025 am 09:25 AM

Accent-Colorは、CSSで使用される属性であり、チェックボックス、ラジオボタン、スライダーなどのフォーム要素のハイライト色をカスタマイズします。 1.チェックボックスの青いチェックマークを赤に変更するなど、フォームコントロールの選択した状態のデフォルト色を直接変更します。 2。サポートされている要素には、type = "チェックボックス"、type = "Radio"、type = "range"の入力ボックスが含まれます。 3.アクセントカラーを使用すると、複雑なカスタムスタイルと余分なDOM構造を回避し、ネイティブアクセシビリティを維持できます。 4.一般的に最新のブラウザによってサポートされており、古いブラウザを格下げする必要があります。 5. Accent-Colを設定します

「垂直アライグル」プロパティとその典型的なユースケースを説明してください 「垂直アライグル」プロパティとその典型的なユースケースを説明してください Jul 26, 2025 am 07:35 AM

thevertical-AlignPropertyincsSalignSinlineortable-cellElementsive.1.ItadjustsemageSlikeImagesSwitSwitSwithinputswithintingtlinessingVaseLine、Middle、super、andsub.2.IntableCells、ItControlScontEntalInmentWithop、Middle、Orbottomvalues、頻繁に

未使用のCSSをパージする方法は? 未使用のCSSをパージする方法は? Jul 27, 2025 am 02:47 AM

useautomatedtoolslikepurgecssoruncsStoscanandRemoveUnusedcss; ’scontentConfiguration; 3.OuditcsSusageWithRedevtoolScoveragetabbeavePurgingToavoidRemovingedStyles; 4.SafelistDynamic

CSSのテキスト色を変更する方法は? CSSのテキスト色を変更する方法は? Jul 27, 2025 am 04:25 AM

CSSのテキスト色を変更するには、色属性を使用する必要があります。 1。色属性を使用して、テキストの前景色を設定し、色名(赤など)、16進コード(#FF0000など)、RGB値(RGB(255,0,0)など)、HSL値(HSL(0,100%、50%)など)、RGBAまたはHSLAを使用してRGBAまたはHSLA 2. H1からH6タイトル、パラグラフP、リンクAなどのテキストを含む任意の要素に色を適用できます(a:link、a:a:a:hover、a:active、div、spanなどの異なる状態の色設定に注意してください)。 3。最も

CSSバックドロップフィルタープロパティを使用する方法は? CSSバックドロップフィルタープロパティを使用する方法は? Aug 02, 2025 pm 12:11 PM

バックドロップフィルターは、要素の背後にあるコンテンツに視覚効果を適用するために使用されます。 1。バックドロップフィルター:Blur(10px)およびその他の構文を使用して、つや消しガラス効果を実現します。 2。ぼやけ、明るさ、コントラストなどの複数のフィルター関数をサポートし、重ねることができます。 3.ガラスカードの設計でよく使用されており、要素が背景と重複するようにする必要があります。 4.最新のブラウザには優れたサポートがあり、@Supportsを使用してダウングレードソリューションを提供できます。 5。パフォーマンスを最適化するために、過度のぼかしと頻繁な再描画を避けてください。この属性は、要素の背後にコンテンツがある場合にのみ有効になります。

CSSダークモードのトグル例 CSSダークモードのトグル例 Jul 30, 2025 am 05:28 AM

まず、JavaScriptを使用して、ユーザーシステムの設定とローカルに保存されたテーマ設定を取得し、ページテーマを初期化します。 1. HTML構造には、トピックの切り替えをトリガーするボタンが含まれています。 2。CSSの使用:rootは明るいテーマ変数を定義し、.dark-modeクラスは暗いテーマ変数を定義し、これらの変数をvar()を介して適用します。 3. JavaScript検出は、カラーのスchemeを好み、LocalStorageを読み取り、最初のテーマを決定します。 4.ボタンをクリックするときにHTML要素のダークモードクラスを切り替え、現在の状態をLocalStorageに保存します。 5.すべての色の変更には、ユーザーを強化するために0.3秒の移行アニメーションが伴います

CSSアスペクト比プロパティとの使用方法は何ですか? CSSアスペクト比プロパティとの使用方法は何ですか? Aug 04, 2025 pm 04:38 PM

Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres

See all articles