ホームページ > ウェブフロントエンド > jsチュートリアル > 抽象化: プログラム的に考える方法

抽象化: プログラム的に考える方法

PHPz
リリース: 2024-08-14 10:35:36
オリジナル
479 人が閲覧しました

Abstractions: A Way of Thinking Programmatically

「なぜプログラマーはベッドから出ることを拒否したのですか?彼らは多層の抽象化に囚われすぎたのです!」

プログラミングでは、人生と同じように、複雑なものを管理しやすくするために単純化する必要があることがよくあります。コンピュータを見たことがない人にインターネットについて説明しようとするときを想像してみてください。サーバーやプロトコルの話から始めることはありません。代わりに、たとえ話、ストーリー、または簡略化したバージョンを使用してアイデアを伝えます。これがプログラミングにおける抽象化、つまり複雑なものを単純化することです。

抽象化: シンプルさのレシピ
プログラミングを料理と同じように考えてください。レシピに従うときは、オーブンで起こる化学反応については考えません。手順に従うだけでおいしい料理が作れます。プログラミングにおける抽象化も同様です。これにより、内部の複雑な詳細を気にせずに、達成しようとしていることに集中できます。

抽象化とは何ですか?
抽象化は、プログラミングの複雑さを管理する方法です。これには、複雑なシステムの簡略化されたモデルの作成が含まれ、複雑な詳細ではなく高レベルの操作に集中できるようになります。コードの特定の部分を抽象化することで、より効率的に作業し、コードを再利用し、エラーの可能性を減らすことができます。

サンドイッチのメタファー: 抽象化レイヤーの構築
サンドイッチのメタファーを使用した実際の例を見てみましょう。
1.材料 (低レベルの詳細) 最も基本的なレベルには、パン、レタス、トマト、チーズ、七面鳥の材料があります。これらは、プログラミングにおける生データまたは低レベルの操作に似ています。これらは不可欠ですが、直接対処するのは面倒な場合があります。

例:

let bread = "whole grain";
let lettuce = "romaine";
let tomato = "sliced";
let cheese = "cheddar";
let turkey = "smoked";

ログイン後にコピー

2.サンドイッチ (高レベルの抽象化) 各材料を個別に扱う代わりに、サンドイッチを作成します。これは、要素を 1 つのより管理しやすいエンティティにバンドルする抽象化です。

例:

function makeSandwich(bread, lettuce, tomato, cheese, turkey) {
    return `${bread} sandwich with ${lettuce}, ${tomato}, ${cheese}, and ${turkey}`;
}
let myLunch = makeSandwich("whole grain", "romaine", "sliced", "cheddar", "smoked");

ログイン後にコピー

詳細を makeSandwich 関数に抽象化することで、ランチを作るたびに個々の材料について心配する必要がなくなり、関数を呼び出すだけで済みます。

3.ランチの注文 (さらに高度な抽象化) さて、デリでランチを注文したい場合はどうすればよいでしょうか?サンドイッチを作るプロセスについて考える必要さえありません。注文するだけです。これはより高いレベルの抽象化であり、さらに単純化されたインターフェイスを操作します。

例:

function orderLunch(type) {
    if (type === "sandwich") {
        return makeSandwich("whole grain", "romaine", "sliced", "cheddar", "smoked");
    }
    // Other lunch options could go here
}
let myOrder = orderLunch("sandwich");

ログイン後にコピー

実用的な使用例のシナリオ: ユーザー インターフェイスの構築
ユーザー インターフェイス (UI) などの複雑なシステムを構築する場合、抽象化は不可欠です。ソーシャル メディア アプリの UI を構築しているとします。各ボタン、テキストボックス、画像のコードを個別に記述するのではなく、それらを表す抽象コンポーネントを作成します。

function createButton(label) {
    return `<button>${label}</button>`;
}
function createUserProfile(name, bio) {
    return `
        <div>
            <h1>${name}</h1>
            <p>${bio}</p>
            ${createButton("Follow")}
        </div>
    `;
}
let profile = createUserProfile("Koobimdi", "Passionate about coding and storytelling.");
ログイン後にコピー

ここで、createButton 関数はボタンの作成を抽象化し、createUserProfile 関数はユーザー プロファイルを抽象化します。毎回生の HTML タグを扱うのではなく、より高レベルの抽象化を扱うだけです。

注意すべき重要なポイント
抽象化により複雑さが簡素化されます: これにより、根底にある複雑さを気にせずに、より詳細なレベルで作業できるようになります。
抽象化のレイヤー: 作成する抽象化のレイヤーが増えるほど、各レベルで重要なことに集中できるようになります。
再利用性: 抽象化により、複数のコンテキストで使用できる汎用関数またはコンポーネントを作成できるようになり、再利用性が促進されます。
効率: 反復的なタスクを抽象化することで、より効率的で保守しやすいコードを作成できます。

結論
抽象化は料理のプロセスを簡素化するレシピのようなもので、細部にこだわることなく複雑な料理を作成できるようになります。プログラミングにおいて、複雑さを管理し、より効率的に作業し、よりクリーンなコードを作成するのに役立つ強力なツールです。

「覚えておいてください、物事が複雑になりすぎたときは、そこから抜け出す方法を抽象化するときです。キッチンが散らかりすぎたときにテイクアウトを注文するときと同じです。」

以上が抽象化: プログラム的に考える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート