ソース コードを勉強すれば、間違いなく開発者としてのキャリアの軌道を変えることができます。表面を 1 レベルだけ見るだけでも、平均的な開発者の多くと一線を画すことができます。 それは習得への第一歩です！ 個人的な話ですが、現在私が勤めている AI/ML スタートアップでは、チームが Neo4j データをサーバーからフロントエンドに取得して視覚化する方法を見つけられず、12 時間以内にプレゼンテーションを行う必要がありました。私はフリーランサーとして雇われましたが、パニックに陥っている様子がはっきりと見て取れました。問題は、Neo4j から返されるデータが、視覚化ツール が想定する正しい形式ではなかったことです。 neo4jd3 想像してみてください。Neo4jd3 は三角形を期待しますが、Neo4j は四角形を返します。これは互換性のない不一致です。  近いうちに で JavaScript と Neo4j を使ったグラフ データ サイエンスをやるかもしれません。この画像は懐かしいですね。 Mastered 選択肢は 2 つしかありませんでした。Neo4j バックエンド全体をやり直すか、Neo4jd3 のソース コードを調べて予想される形式を把握し、正方形を三角形に変換するアダプターを作成するかです。     neo4jd3 <- adapter <- Neo4j 私の脳はデフォルトでソースコードを読み、アダプタ を作成しました。 neo4jd3-ts   import createNeoChart, { NeoDatatoChartData } from "neo4jd3-ts"; アダプターは で、他のすべては過去のものです。私はこの教訓を心に留め、機会があれば、使用するすべてのツールで 1 レベル下げるようにしています。この方法があまりにも普及したため、ドキュメントを読まないこともあります。 NeoDatatoChartData このアプローチは私のキャリアを大きく変えました。私がすることすべてが魔法のように見えます。数か月後には、重要なサーバーの移行とプロジェクトを主導するようになりましたが、それはすべて私がソースに向かって一歩踏み出したからです。 このシリーズのテーマは、API に満足するのではなく、その先へ進み、これらのツールを再作成する方法を学ぶことです。AI が大流行しているこの世界で平均的な存在から脱却することが、開発者を平均以上の価値あるものにするのです。 このシリーズでの私の計画は、人気のある JavaScript ライブラリとツールを研究し、それらがどのように機能し、どのようなパターンをそこから学べるかをツールごとに一緒に理解することです。 私は主にバックエンド エンジニア (フル スタックですが、90% の時間をバックエンドの処理に費やしています) なので、Express.js よりも優れたツールはありません。 あなたはプログラミングの経験があり、プログラミングの基礎をよく理解しているものと想定しています。上級初心者に分類されるかもしれません。 基礎を教えながらソースコードを学習/教えるのは本当に大変で退屈なことです。シリーズに参加できますが、大変になることは覚悟してください。すべてを網羅することはできませんが、できる限り努力します。 この記事が Express 以前の記事であるのには理由があります。Express が依存する非常に小さなライブラリ、  について説明することにしたのです。この記事を書いている時点で、このライブラリのダウンロード数は 27,181,495 回で、コードはわずか 26 行です。 merge-descriptors これにより、構造を確立する機会が得られ、JavaScript モジュールの構築に不可欠なオブジェクトの基礎を紹介できるようになります。 設定 先に進む前に、Express と システムにあることを確認してください。こうすることで、IDE で開くことができ、行番号でどこを見ているのかを案内することができます。 ソース コード マージ記述子が  Express は強力なライブラリです。他のツールに移る前に、数回の記事でできるだけ詳しく説明します。  IDE で Express ソースを開き (できれば行番号付きで)、  フォルダーに移動して、エントリ ファイルである ファイルを開きます。 lib express.js  17 行目に、最初のライブラリがあります。   var mixin = require('merge-descriptors'); 使用方法は42行目と43行目にあります。   mixin(app, EventEmitter.prototype, false); mixin(app, proto, false); ここで何が起こっているのかを探る前に、少し立ち止まって、データ構造を超えて JavaScript のオブジェクトについて話す必要があります。この記事のタイトルである、構成、継承、プロトタイプ、ミックスインについて説明します。  JavaScript オブジェクト Express ソース コードを閉じて、重要なオブジェクトの基礎を学習するためにどこかに新しいフォルダーを作成します。 オブジェクトは、 の中核となるデータと動作のカプセル化です。興味深い事実: JavaScript のほぼすべてがオブジェクトです。 オブジェクト指向プログラミング (OOP)   const person = { // data name: "Jane", age: 0, // behavior grow(){ this.age += 1; } };   オブジェクト内の開き括弧と閉じ括弧の間にあるすべてのものは、 と呼ばれます。これは重要です。 person オブジェクト固有のプロパティ 独自のプロパティは、オブジェクトに直接存在するプロパティです。   、   、    独自のプロパティです。 name age grow person すべての JavaScript オブジェクトには プロパティがあるため、これは重要です。上記のオブジェクトを関数ブループリントにエンコードして、  オブジェクトを動的に作成できるようにしましょう。 prototype person   function createNewPerson(name, age){ this.name = name; this.age = age; } createNewPerson.prototype.print = function(){ console.log(`${this.name} is ${this.age}`); }; const john = new createNewPerson("John", 32); プロトタイプは、JavaScript オブジェクトが他のオブジェクトからプロパティとメソッドを継承する方法です。  と の違いは、オブジェクトのプロパティにアクセスするときです。 Own Properties Prototype   john.name; // access  JavaScript は、優先順位が高いため、最初に を検索します。プロパティが見つからない場合は、null が見つかるまでオブジェクト自身の オブジェクトを再帰的に検索し、エラーをスローします。 Own Properties prototype プロトタイプ オブジェクトは、独自のプロトタイプを介して別のオブジェクトから継承できます。これをプロトタイプ チェーンと呼びます。   console.log(john.hasOwnProperty('name')); // true console.log(john.hasOwnProperty('print')); // false, it's in the prototype ただし、  では 機能します。 john print   john.print(); // "John is 32" これが、JavaScript がプロトタイプベースの言語として定義されている理由です。プロトタイプを使用すると、継承などのプロパティやメソッドを追加するだけでなく、さらに多くのことが可能になります。 継承の「hello world」は、哺乳類オブジェクトです。これを JavaScript で再現してみましょう。   // our Mammal blueprint function Mammal(name) { this.name = name; } Mammal.prototype.breathe = function() { console.log(`${this.name} is breathing.`); };  JavaScript では、  オブジェクト内に静的関数があります。 Object   Object.create(); これは、  や と同様にオブジェクトを作成しますが、違いは、  継承するパラメーターとしてプロトタイプを受け取ることができることです。 {} new functionBlueprint create   // we use a cat blueprint function here (implemented below) Cat.prototype = Object.create(Mammal.prototype); // correction after we inherited all the properties Cat.prototype.constructor = Cat; これで、    にある 法を持つことになりますが、重要なのは、    をプロトタイプとして指しているということです。 Cat Mammal breathe Cat Mammal 説明：   : まず 関数を定義し、そのプロトタイプに メソッドを追加します。 Mammal ブループリント Mammal breathe   :  関数を作成し、  を に設定します。これにより、  プロトタイプは から継承されますが、  ポインターは に変更されます。 Cat 継承 Cat Cat.prototype Object.create(Mammal.prototype) Cat Mammal constructor Mammal :  を修正して を指すようにし、  からメソッドを継承しながら オブジェクトがその ID を保持するようにします。最後に、  に メソッドを追加します。 コンストラクタの修正 Cat.prototype.constructor Cat Mammal Cat Cat meow このアプローチにより、  オブジェクトは  (  など) と独自のプロトタイプ (  など) の両方のメソッドにアクセスできるようになります。 Cat Mammal breathe meow これを修正する必要があります。完全な例を作成しましょう。   function Cat(name, breed) { this.name = name; this.breed = breed; } Cat.prototype = Object.create(Mammal.prototype); // cat prototype pointing to mammal // correction after we inherited all the properties Cat.prototype.constructor = Cat; // we are re-pointing a pointer, the inherited properties are still there Cat.prototype.meow = function() { console.log(`${this.name} is meowing.`); };   を理解するには、ポインターについて知っておく必要があります。  を使用して から継承すると、  プロトタイプのポインターが に変更されますが、これは誤りです。親が であるにもかかわらず、  独自の個体であることが必要です。 Cat.prototype.constructor = Cat Object.create Mammal Cat Mammal Mammal Cat だからこそ、それを修正する必要があるのです。 この例では、  プロトタイプ チェーンを使用して から継承します。Cat オブジェクト  、  と メソッドの両方にアクセスできます。 Cat Mammal Cat breathe meow   const myCat = new Cat("Misty", "Ragdoll"); myCat.breathe(); // Misty is breathing. myCat.meow(); // Misty is meowing. 哺乳類から継承した犬も作成できます。   function Dog(name, breed) { this.name = name; this.breed = breed; } Dog.prototype = Object.create(Mammal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log(`${this.name} is barking.`); }; const myDog = new Dog('Buddy', 'Golden Retriever'); myDog.breathe(); // Buddy is breathing. myDog.bark(); // Buddy is barking. 基本的な古典的な継承を作成しましたが、なぜこれが重要なのでしょうか? ソース コードについて説明していると思っていました。 確かにそうですが、プロトタイプは継承を超えて、効率的で柔軟なモジュールを構築する上で中核となるものです。シンプルでよく書かれたモジュールでさえ、プロトタイプ オブジェクトが満載です。私たちは基礎を築いているだけです。 継承の代替手段はオブジェクト合成です。これは、2 つ以上のオブジェクトを緩く取得し、それらを結合して「スーパー」オブジェクトを形成します。 ミックスインを使用すると、オブジェクトは継承を使用せずに他のオブジェクトからメソッドを借用できます。関連のないオブジェクト間で動作を共有するのに便利です。 これが私たちの最初の調査で行うこと、つまり最初に取り上げると約束した ライブラリです。 merge-descriptors マージ記述子モジュール Express でそれがどこでどのように使用されるかは既に確認しました。これで、オブジェクトの構成について理解できました。  17 行目に、最初のライブラリがあります。   var mixin = require('merge-descriptors'); 使用方法は42行目と43行目にあります。   mixin(app, EventEmitter.prototype, false); mixin(app, proto, false); 私たちが知っていることから、    と   というオブジェクトに合成していることはすでに推測できます。 mixin EventEmitter.prototype proto app  Express について話すときに、  についても説明します。 app これは のソースコード全体です: merge-descriptors   'use strict'; function mergeDescriptors(destination, source, overwrite = true) { if (!destination) { throw new TypeError('The `destination` argument is required.'); } if (!source) { throw new TypeError('The `source` argument is required.'); } for (const name of Object.getOwnPropertyNames(source)) { if (!overwrite && Object.hasOwn(destination, name)) { // Skip descriptor continue; } // Copy descriptor const descriptor = Object.getOwnPropertyDescriptor(source, name); Object.defineProperty(destination, name, descriptor); } return destination; } module.exports = mergeDescriptors; 最初から、関数がどのように使用され、どのようなパラメータを受け取るかを常に確認してください。   // definition mergeDescriptors(destination, source, overwrite = true) // usage var mixin = require('merge-descriptors'); mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);   が目的地です。mixin  オブジェクトの構成を意味することはご存じのとおりです。大まかに言うと、このパッケージは、上書きオプションを使用して、ソース オブジェクトを宛先オブジェクトに構成します。 App mixin 上書きは、想定では、   (宛先) にソースとまったく同じプロパティがある場合に実行されます。  上書きされる場合は、そのプロパティは変更されず、スキップされます。 app true オブジェクトは同じプロパティを 2 回持つことはできないことはわかっています。キーと値のペア (オブジェクト) では、キーは一意である必要があります。  Express では、上書きは になります。 false 以下は基本的なハウスキーピングであり、常に予想されるエラーを処理します。   if (!destination) { throw new TypeError('The `destination` argument is required.'); } if (!source) { throw new TypeError('The `source` argument is required.'); } ここからが面白いところです: 12 行目。   for (const name of Object.getOwnPropertyNames(source)) { 上記から、  意味がわかっているので、  明らかに独自のプロパティのキーを取得することを意味します。 OwnProperty getOwnPropertyNames   const person = { // data name: "Jane", age: 0, // behavior grow() { this.age += 1; } }; Object.getOwnPropertyNames(person); // [ 'name', 'age', 'grow' ] キーを配列として返し、次のインスタンスではそれらのキーをループしています。   for (const name of Object.getOwnPropertyNames(source)) { 以下は、現在ループしている宛先とソースのキーが同じかどうかをチェックしています。   if (!overwrite && Object.hasOwn(destination, name)) { // Skip descriptor continue; }  overwrite が false の場合、そのプロパティをスキップします。つまり、上書きしません。これが の動作です。ループを次の反復に進め、その下のコード (次のコード) は実行しません。 continue   // Copy descriptor const descriptor = Object.getOwnPropertyDescriptor(source, name); Object.defineProperty(destination, name, descriptor);   の意味はすでにわかっています。新しい単語は、  です。この関数を自分の オブジェクトでテストしてみましょう。 getOwnProperty descriptor person   const person = { // data name: "Jane", age: 0, // behavior grow() { this.age += 1; } }; Object.getOwnPropertyDescriptor(person, "grow"); // { // value: [Function: grow], // writable: true, // enumerable: true, // configurable: true // } これは 関数を値として返します。次の行は説明不要です。 grow   Object.defineProperty(destination, name, descriptor); ソースから記述子を取得して、それを宛先に書き込みます。ソースの独自のプロパティを、宛先オブジェクトにその独自のプロパティとしてコピーします。   オブジェクトの例を見てみましょう。 person   const val = { value: function isAlien() { return false; }, enumerable: true, writable: true, configurable: true, }; Object.defineProperty(person, "isAlien", val); これで、  に プロパティが定義されるはずです。 person isAlien 要約すると、このダウンロード数の多いモジュールは、上書きオプションを使用して、ソース オブジェクトから宛先に独自のプロパティをコピーします。 この で最初のモジュールを無事カバーできました。今後さらにエキサイティングな内容が予定されています。 ソース コード層 これは入門編です。まず、モジュールを理解するために必要な基礎を取り上げ、副産物として、ほとんどのモジュールのパターンであるオブジェクトの構成と継承について理解しました。最後に、  モジュールについて説明しました。 merge-descriptors このパターンはほとんどの記事でよく見られます。カバーする必要がある基礎事項があると感じた場合は、最初のセクションでそれを説明してから、ソース コードについて説明します。 幸いなことに、   Express で使用されています。Express は、ソース コード研究の開始点として私たちが注目している部分です。そのため、Express を十分に使いこなしたと感じられるまで、Express.js のソース コードに関する記事がさらに掲載され、その後、Node.js などの別のモジュールやツールに切り替えられることを期待してください。 merge-descriptors その間、課題としてできることは、マージ記述子のテスト ファイルに移動して、ファイル全体を読むことです。自分でソースを読むことは重要です。それが何を実行し、何をテストしているのかを理解し、それを壊し、はい、そして再び修正するか、さらにテストを追加してください。 プログラミング スキルを向上させるための、より実践的で長めの独占コンテンツにご興味がある場合は、  で詳細をご覧ください。 Ko-fi

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Hire Me

このオーディオは、ストーリーの元の言語で制作されています。

ソースコードの学習方法: Express.js のオブジェクトプロトタイプとミックスイン

About Author

コメント

ラベル

この記事は

Related Stories

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps

ソースコードの学習方法: Express.js のオブジェクト プロトタイプとミックスイン

About Author

コメント

ラベル

この記事は

Related Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps

ソースコードの学習方法: Express.js のオブジェクトプロトタイプとミックスイン