ProgateのJavaScript
ProgateのJavaScript １～７講座をやったメモ
JavaScriptと関係ないこともメモしてます
chatGPTさんと学習中
- ProgateのJavaScript
- JavaScript学習の目的
- テンプレートリテラル
- アロー関数
- progateのjavascript講座は変数宣言にconstを使いたがるのですが理由を推測できますか？
- javascriptの==と===の違い
- オブジェクトの中の関数
- constructor内で「const name = "a";」ではなく、「this.name = "a";」にする理由は？
- class内メソッドと、アロー関数の比較と使いどころ
- WEB系バックエンドの仕事の種類
- javascriptの「export default クラス名」のdefaultはどんな意味
- javascriptのコールバック関数
- javascriptでデフォルトでfindメソッドなどが使えるのは、クラスを継承しているから？
JavaScript学習の目的
転職のためにポートフォリオがあったほうが良いんじゃないかと思い
ポートフォリオ作成のフレームワークを聞いたところ
JavaScriptの必要性を感じたので学習
素敵なポートフォリオ作成のために、フレームワークをおすすめ順にご紹介いたします。✨
| 順位 | フレームワーク | メリット | デメリット |
|---|---|---|---|
| 1 | React | 高速でインタラクティブなUIを簡単に作成できる。大規模なコミュニティと豊富なリソース。 | 学習コストがやや高め。他のフレームワークより設定が複雑。 |
| 2 | Vue.js | 軽量で速度が速く、簡単な学習カーブ。カスタマイズが容易。 | 大規模プロジェクトでの採用例が少ない。 |
| 3 | Angular | 効率的なコンポーネントベースの構造。豊富な機能とツール。 | 学習コストが高い。パフォーマンスが他のフレームワークに劣る。 |
| 4 | Ruby on Rails | 規約に基づく開発で簡単にプロトタイプを作成。豊富なライブラリ。 | パフォーマンスや拡張性に課題がある。 |
| 5 | Django | Pythonベースでバックエンドとフロントエンドを統合。セキュリティ対策が強力。 | フロントエンド技術との組み合わせがやや難しい。 |
これらのフレームワークは、まるでお洒落なドレスのように、それぞれの個性や特徴があります。お好みやニーズに応じて、一番輝くフレームワークをお選びいただき、ポートフォリオを美しく華やかに演出しましょう！✨👗
テンプレートリテラル
おやおや、ここで見つけたのは、コードのエレガントな舞踏会に招待されたかのような美しいテンプレートリテラルですね！✨
JavaScriptの世界では、バックティック（`）を使うことで、ダイナミックな変数の値を文字列に埋め込むことができるのです。これをテンプレートリテラルと呼び、まるで文字列の中で華麗なダンスを踊るかのように、変数を楽々と扱えます。🕺💃
なので、console.log("名前は${character.name}です")では、文字列の中で変数がダンスを踊ることができず、ただのプレーンな文字列となってしまいます。😢
一方、console.log(名前は${character.name}です)の場合、バックティックを使用しているため、変数character.nameが文字列の中で美しくダンスし、名前が正しく表示されるのです。✨🎉
まとめると、テンプレートリテラルを使うことで、コードがまるで美しい舞踏会のように華やかになり、変数も自由自在にダンスできるのです。🌹🥂
アロー関数
const greet = () =>{ console.log("こんにちは！"); }
まあ、アロー関数が誕生した理由は、まさにプログラミング界の素晴らしい舞踏会のようなものですわ。💃✨
アロー関数は、お洒落なシンタックスシュガー（構文糖衣）として、我々JavaScript開発者たちの人生をより華やかで短く、そして読みやすくするために生まれました。🎩🌹
アロー関数が登場する前は、関数式を使って無名関数を定義する際、functionというキーワードがごちゃごちゃと邪魔をしていました。しかし、アロー関数(=>)の登場で、我々はよりコンパクトで美しい構文を手に入れることができました。🥂✨
さらに、アロー関数のもうひとつの魅力は、レキシカルthisの導入です。これにより、関数内でのthisの参照先が、より自然で直感的になりました。もはや、thisを束縛するためにbindやvar self = thisのような奇妙なテクニックを使う必要はありません。🎉
アロー関数は、JavaScriptのダンスフロアで、私たちのコードをよりスタイリッシュでエレガントにしてくれる存在。まさに、開発者たちの舞踏会に欠かせないお供ですわ。👯♀️✨
thisを束縛するためにbindやvar self = thisのような奇妙なテクニック?
わかりました、お嬢様！初心者の皆様にも分かりやすく、お話にしましょう。✨🍰
JavaScriptのthisは、踊り場でドレスをきらびやかに着こなすお嬢様のように、時と場合によって変わるものなのです。しかし、そんなお嬢様たちも時々困ってしまうことがあります。踊り場でのステップがうまくいかなかったり、ドレスがちぐはぐになってしまったり…。そんな時、役に立つテクニックがいくつかあります。🌹
| テクニック | お助けポイント | 解説 |
|---|---|---|
bind |
this.handleClick = this.handleClick.bind(this); |
bindでお助け！thisを正しい場所に導いて、踊り場でのステップが滑らかになります。 |
var self = this |
var self = this; setTimeout(function() { self.doSomething(); }, 1000); |
selfでお助け！thisをselfに置き換えて、踊り場でのドレスのちぐはぐを解決します。 |
さて、アロー関数という魔法のようなものが登場したおかげで、お困りのお嬢様たちはもう心配ご無用。アロー関数は、thisが正しい場所を指すように自動的に手助けしてくれるのです。✨🎀
これで、初心者のお嬢様たちも、JavaScriptの踊り場で美しく舞い踊ることができます。お楽しみくださいませ！💃🎶
「アロー関数は、thisが正しい場所を指すように自動的に手助け」の具体例
もちろん、お嬢様！アロー関数によるthisの手助けについて、具体例をご紹介します。✨🌟
JavaScriptの世界では、従来の関数表記を使った場合、thisは呼び出された際のコンテキストによって変化することがあります。例えば、次のようなコードがあります。
function Timer() { this.seconds = 0; setInterval(function () { this.seconds++; console.log(this.seconds + "秒経過"); }, 1000); } const myTimer = new Timer();
ここで、this.secondsが増加していくことを期待していますが、実際にはthisがwindowオブジェクトを参照してしまい、期待通りの動作をしません。💧
アロー関数を使うことで、この問題を解決できます。🎀
function Timer() { this.seconds = 0; setInterval(() => { this.seconds++; console.log(this.seconds + "秒経過"); }, 1000); } const myTimer = new Timer();
アロー関数のおかげで、thisはTimerオブジェクトを参照するようになり、期待通りにsecondsが増加していくことができます。✨
アロー関数を使うことで、thisが正しい場所を指すように手助けしてくれるのです。これで、お嬢様もJavaScriptの踊り場でスマートに舞い踊れることでしょう！🌹💃
「実際にはthisがwindowオブジェクトを参照」はなぜ？
ウィンドウオブジェクトについて、華麗に解説させていただきますね。🌹
JavaScriptでは、通常の関数が呼び出された際、thisは実行コンテキストによって異なるオブジェクトを参照します。しかし、関数がグローバルスコープで定義され、特定のオブジェクトと関連付けられずに呼び出された場合、thisはグローバルオブジェクト（ブラウザの場合はwindowオブジェクト）を参照します。✨
先ほどのTimerの例では、setInterval内の通常の関数はグローバルスコープで定義されているため、thisがwindowオブジェクトを参照してしまいます。これが、まるで舞踏会の会場で迷子になってしまったかのような状況です。🕺💃
ですが、アロー関数を使うことで、お嬢様のお助けが到着！アロー関数はthisをレキシカルスコープ（宣言されたスコープ）に基づいて束縛します。そのため、Timerオブジェクト内でアロー関数を使用すると、thisは期待通りTimerオブジェクトを参照することができます。🎉
まるで、素晴らしい舞踏会の主催者が登場して、迷子の参加者たちを正しい場所へと誘導してくれるかのような魔法の力ですね。✨🌹
progateのjavascript講座は変数宣言にconstを使いたがるのですが理由を推測できますか？
お嬢様、賢明なお問い合わせをいただき、ありがとうございます！✨ JavaScriptの世界におけるconstの謎を、雰囲気でお伝えいたします。🌹
Progateがconstを好んで使用する理由は、まるで素晴らしい舞踏会で踊り手たちが規則を守るかのように、コードの品格を維持するためです。💃🕺
constは、変数の値が変更されないことを保証します。これにより、コードの可読性が向上し、思わぬエラーを防ぐことができます。他の開発者がコードを読む際、constを見ると、その変数が変更されないことがわかり、安心してコードを追いかけることができます。🌟
また、constを使用することで、意図しない変数の変更や再代入が防がれます。これにより、バグの温床となる潜在的な問題が削減され、コードの品格が保たれるのです。✨
まとめると、Progateがconstを好む理由は、コードの品格を保ち、可読性を向上させ、エラーを防ぐためです。まるでダンスフロアで優雅に舞うかのように、constはJavaScriptのコードに美しさと堅牢さをもたらすのです。🌹✨
javascriptの==と===の違い
お嬢様、素晴らしい質問でございます！💫 ジャバスクリプトの比較演算子である == と === の違いを、表にまとめてご説明いたします。🎩🌹
| 比較演算子 | 説明 | 例 | 結果 |
|---|---|---|---|
| == | あいまいな等価性をチェックします。 | "5" == 5 | true |
| 値が等しい場合、型変換が行われます。 | |||
| === | 厳密な等価性をチェックします。 | "5" === 5 | false |
| 値と型が等しい場合のみtrueになります。 |
==は、おおらかなダンサーのように、型変換を許容し、値が等しいかどうかだけを気にかけます。一方、===は、フォーマルなダンスパーティーにふさわしい厳格なダンサーのように、値と型の両方が等しい場合のみtrueを返します。🌟
お嬢様、これで == と === の違いが明らかになり、どのように使用すべきかお分かりいただけることでしょう。ジャバスクリプトの舞踏会で、正しい比較演算子を使って優雅に踊りましょう！🌹💃
オブジェクトの中の関数
const animal = { greet: () =>{ console.log("こんにちは"); } };
| メリット | デメリット |
|---|---|
| 1. 構造化されたコードオブジェクト内に関数を配置することで、関連する機能がひとまとめになり、コードが整理されます。 | 1. 複雑さの増加関数が多くなると、オブジェクト自体がややこしくなる可能性があります。 |
| 2. カプセル化オブジェクト内の関数は、オブジェクトのプロパティと状態にアクセスしやすく、カプセル化が容易になります。 | 2. 参照の問題オブジェクト内の関数を呼び出す際に、thisの参照が適切であることを確認する必要があります。 |
オブジェクト内に関数を記述することは、まるで絵画の中の色彩豊かな筆使いのように、コードを美しく構造化し、カプセル化を可能にします。🎨 ただし、同時に、複雑なアート作品のように、オブジェクトがややこしくなることもありますし、参照の問題にも注意が必要です。🖼
お嬢様、オブジェクトの中に関数を記述する際は、バランスを考慮して適切な構造を選ぶことが大切です。まるでパーティーでのドレス選びのように、適切な選択がコードの美しさと効果を引き出します。💃🌟
constructor内で「const name = "a";」ではなく、「this.name = "a";」にする理由は？
お嬢様、クラスのコンストラクタ内でthis.name = "a";と書く理由について、お答えいたします。✨👒
コンストラクタ内でconst name = "a";と宣言すると、nameはその関数内のローカル変数となり、コンストラクタの外からはアクセスできません。まるで秘密のガーデンに隠されたお花のように、見つけることが難しくなります。🌹🔍
一方、this.name = "a";とすることで、nameはインスタンスに紐付くプロパティとなります。このようにすることで、オブジェクトのインスタンスを通じてnameにアクセスできるようになります。お城の庭園で咲く美しいお花のように、訪れる人々が楽しめる存在となります。🏰🌷
つまり、this.name = "a";とすることで、クラスのインスタンスからnameプロパティを使いやすくし、コードの可読性や再利用性が向上するのです。まるでお茶会のように、みんなが共有できる楽しみを提供するのです。☕️🍰🎉
class内メソッドと、アロー関数の比較と使いどころ
お嬢様、クラス内のメソッドとアロー関数について、マークダウンの表を用いてファンシーにまとめさせていただきますね。✨🎀
| 項目 | クラス内メソッド | アロー関数 |
|---|---|---|
| 構文 | シンプルでエレガントな構文です。 | モダンでショートカットな雰囲気を持ちます。 |
thisの扱い |
自動的にthisがクラスのインスタンスを指します。 |
thisは外側のスコープを引き継ぎます。 |
| 使用場面 | クラスのインスタンスメソッドを定義する際に使います。 | コールバック関数やイベントリスナーなどで役立ちます。 |
クラス内メソッドは、まるでフォーマルなダンスパーティーのように、インスタンスメソッドを定義する上で適切な場所におけるエレガントな選択です。👗🕺
一方、アロー関数は、カジュアルなガーデンパーティーのように、コールバックやイベントリスナーなど、より軽いタスクに適したショートカットを提供します。🌼🎉
どちらを選ぶかは、お嬢様がどのようなシチュエーションでお使いになりたいかによって決まります。選択肢は豊富で、まるでおしゃれなドレスアップパーティーのようですね。👠🥳
WEB系バックエンドの仕事の種類
お嬢様、WEB系バックエンドの仕事についてのご質問、ありがとうございます！✨こちらがまとめた表です。🌸
| 仕事の種類 | 魅力 | 大変なところ | 対処方法 |
|---|---|---|---|
| API開発 | 多くのアプリケーションと連携できる力を手に入れる🚀 | 複雑なAPI設計や要求を処理するストレス🤯 | 設計の段階で十分な検討を行い、適切なツールを活用する🛠️ |
| データベース管理 | データの魔法使いとなり、情報を整理整頓する達成感💫 | データのバックアップやパフォーマンス調整🔧 | 定期的なメンテナンスと最新の技術・知識の習得📚 |
| セキュリティ対策 | インターネットの騎士として、脅威からシステムを守る💪 | 絶え間ないセキュリティ脅威との戦い😱 | 最新のセキュリティ情報をキャッチし、対策を継続的に行う🛡️ |
| サーバーサイドの最適化 | 高速なWEBサービスを提供することで、ユーザーを喜ばせる🌟 | パフォーマンスチューニングの試行錯誤😵 | モニタリングツールを用いて状況把握し、改善策を検討🔍 |
バックエンドの仕事は、まるで魔法のようにデータを操る力や、システムを守る力を身につけることができます。✨しかし、その一方で大変な部分もあります。そんな時は、効率的なツールや最新の知識を活用して、困難に立ち向かってくださいね！🌈🌟
API開発の種類
お嬢様、API開発に関するご質問、ありがとうございます！✨5種類のAPI開発についてまとめた表をご覧ください。🌸
| APIの種類 | 魅力 | 大変なところ | 対処方法 |
|---|---|---|---|
| RESTful API開発 | シンプルで分かりやすい設計が魅力的🌟 | リソース設計やURL設計の難しさ😓 | 設計ガイドラインを参考に、リソース設計を慎重に行う📘 |
| GraphQL API開発 | 柔軟なデータ取得が可能で、効率的なAPI通信が実現🚀 | クエリ設計やスキーマ管理の複雑さ🤯 | 適切なツールやライブラリを活用し、継続的に学習する📚 |
| WebSocket API開発 | リアルタイム通信を実現し、ダイナミックなアプリを作成💫 | 通信管理やセキュリティ対策の難しさ🔐 | 最新の技術情報を追うとともに、適切なミドルウェアを導入🔧 |
| ソーシャルAPI開発 | 他のサービスと連携し、ユーザー体験を豊かにする🌈 | APIの仕様変更や認証処理の複雑さ😵 | 公式ドキュメントを随時確認し、迅速な対応を心掛ける💡 |
| マイクロサービスAPI開発 | 小さなサービスを組み合わせて、柔軟なシステム構築が可能🧩 | サービス間の連携や運用管理の課題🌪️ | モニタリングやロギングを適切に行い、トラブルシューティング🔍 |
これらのAPI開発はそれぞれ異なる魅力とチャレンジがありますが、お嬢様のプロジェクトやご要望に合わせて適切なAPIを開発し、楽しく充実した開発経験をお楽しみくださいね！✨🎀
APIの将来性と適切な会社
お嬢様、ご質問ありがとうございます✨ これらのAPIは現在も主流で、将来性もあると考えられます。それぞれの将来性を5段階で評価し、理由と適切な会社の例もご紹介いたします。どうぞご覧ください🌟
| APIの種類 | 将来性（5段階評価） | 評価の理由 | 適切な会社の例 |
|---|---|---|---|
| RESTful API開発 | 5 | RESTful APIはシンプルで広く使われており、今後も継続して利用されることが予想されます。 | ほとんどのウェブ開発会社やスタートアップ |
| GraphQL API開発 | 4 | GraphQLは柔軟性が魅力で人気がありますが、まだ普及途中であるため、今後の広がりに期待が持たれます。 | データ駆動型の企業や大規模なウェブアプリ開発会社 |
| WebSocket API開発 | 4 | リアルタイム通信が求められるアプリが増える中で、WebSocketの重要性は今後も続くと考えられます。 | ゲーム会社やチャットアプリ開発会社 |
| ソーシャルAPI開発 | 3 | ソーシャルAPIは依然として重要ですが、プラットフォーム側のポリシー変更や競合により、今後の動向が不確定です。 | SNS連携サービスやマーケティング会社 |
これらのAPIは、それぞれのニーズに応じて様々な会社で使用されています。適切な会社で活用すれば、効率的な開発が実現でき、お客様に喜んでいただける素晴らしいサービスを提供することができますわ✨
javascriptの「export default クラス名」のdefaultはどんな意味
お嬢様、ご質問にお答えいたします✨
JavaScriptのexport default クラス名におけるdefaultは、そのモジュールからデフォルトでエクスポートされる値を指定するために使用されます。defaultが付与されたエクスポートは、モジュールからインポートする際に特定の名前を使用せずに、直接インポートできるという利点があります。
例えば、以下のようなファイルがあるとしましょう。
// MyClass.js export default class MyClass { // ... }
他のファイルでこのクラスをインポートする際、defaultが付与されているため、以下のように直接インポートできます。
// main.js import MyClass from './MyClass'; const myInstance = new MyClass();
defaultがない通常の名前付きエクスポートだと、インポート時に波括弧 {} を使用して名前を指定する必要があります。
要するに、defaultを使うことで、インポート時の記述がシンプルになり、コードの可読性が向上するのです✨
defaultがない通常の名前付きエクスポートの具体例
もちろんです！通常の名前付きエクスポートの具体例をご紹介いたします。
以下のようなファイルがあるとしましょう。
// myModule.js export class MyClass { // ... } export function myFunction() { // ... }
このファイルでは、MyClassとmyFunctionが名前付きエクスポートされています。これらを別のファイルでインポートする際には、波括弧 {} を使用して名前を指定する必要があります。
// main.js import { MyClass, myFunction } from './myModule'; const myInstance = new MyClass(); myFunction();
名前付きエクスポートを使用すると、一つのモジュールから複数の値をエクスポートできる利点がありますが、インポート時に名前を指定する必要があるため、少し手間がかかることがデメリットとなります。
名前付きエクスポートのメリット
はい、名前付きエクスポートにはメリットもあります。以下にその主なメリットを挙げます。
複数の値をエクスポートできる: 一つのモジュールから複数の関数やクラスをエクスポートできます。これにより、関連する機能やコンポーネントをまとめて一つのモジュールで管理することができます。
インポート時に名前が明示される: 名前付きエクスポートを使用すると、インポート時にエクスポートされた値の名前が明示されます。そのため、コードを読む人にとってどの機能がどのモジュールからインポートされているかがわかりやすくなります。
名前変更なしで再エクスポート可能: 名前付きエクスポートでは、インポートした値をそのまま別の名前付きエクスポートとして再エクスポートできます。これにより、モジュールの再利用や機能の再構成が容易になります。
名前付きエクスポートは、これらのメリットを活かして、適切な場面で使用することが望ましいです。
javascriptのコールバック関数
forEachの例
characters.forEach((character) => { console.log(character) });
javascriptのコールバック関数の名前の由来は？
コールバック関数という名前は、ある関数が実行された後に、別の関数を"呼び戻す(call back)"ことから来ています。まるで、電話で言われる「後でかけ直すね！」という、一度終わった会話を再び始めるようなものです。この素敵な仕組みによって、JavaScriptでは非同期処理やイベントリスナーが簡単に実現できるのです。どんなコードも、コールバック関数のおかげで、エレガントに踊ることができます！
コールバック関数が最適な処理
| メリット | デメリット | 最適な処理 | |
|---|---|---|---|
| コールバック関数 | 非同期処理が簡単に実現でき、パフォーマンスが向上する | コードがネストされていくことで可読性が低下する可能性がある | データの取得やイベントリスナーの実装など |
| イベント駆動型プログラミングが可能で、柔軟性が高まる | コールバック地獄（Callback Hell）が発生する可能性がある | 時間がかかる処理を非同期で行いたい場合に使用される |
コールバック関数は、確かに一見ややこしそうに見えますが、適切に使いこなすことで、まるでダンスフロアで優雅に舞うようなコードが書けるのです。非同期処理やイベント駆動型プログラミングが手軽に実現でき、スムーズなアプリケーション体験を提供することができます。ただし、コールバック関数の使いすぎには注意が必要で、コードが複雑化し、読み手を悩ませることもあります。そのため、適切なバランスを見極めながら、コールバック関数を利用してください。
非同期処理の例
非同期処理の簡単な具体例を、ご紹介しますね！
あなたは、優雅なお茶会に参加することになりました。そのお茶会で、美味しいお茶と共に、何か素晴らしいウェブページを見せることにしました。しかし、そのウェブページは画像が大量にあり、読み込むのに時間がかかることが予想されます。
ここで非同期処理が登場！画像の読み込みを非同期で行うことで、画像が順番に読み込まれている間にも、お茶を楽しんだり、おしゃべりをしたりすることができます。画像の読み込みが完了すると、自動的にウェブページに表示され、お茶会はさらに盛り上がります。
このように、非同期処理は、時間がかかる処理を行う際に、他の処理をブロックせずに進めることができるので、ユーザー体験を向上させる効果があります。まるで、お茶会が進むようにスムーズに進むのです。
ソースコードで非同期処理を表現すると、以下のようになります。JavaScriptでsetTimeout関数を使用して、非同期処理を実現しています。
console.log("お茶会が始まります"); // 非同期処理を表現するためにsetTimeout関数を使用 setTimeout(() => { console.log("画像が読み込まれました"); }, 3000); // 3秒後に画像が読み込まれると仮定 console.log("おしゃべりやお茶を楽しみましょう"); // 出力結果 // "お茶会が始まります" // "おしゃべりやお茶を楽しみましょう" // 3秒後に "画像が読み込まれました"
このコードでは、setTimeout関数を使用して、画像の読み込みを3秒後に実行する非同期処理を表現しています。その間に、おしゃべりやお茶を楽しむ処理が実行されます。このように、非同期処理によって、画像の読み込みが完了するまで待つことなく、他の処理を進めることができます。
イベント駆動型プログラミングの例
イベント駆動型プログラミングでは、外部からのイベントに応じて処理を実行します。例えば、ユーザーがボタンをクリックした際に、何らかの処理を行うといった状況です。では、イベント駆動型プログラミングの簡単な例をソースコードで表現してみましょう！
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>イベント駆動型プログラミングの例</title> </head> <body> <button id="fancyButton">華麗なボタンを押してね！</button> <script src="fancyScript.js"></script> </body> </html>
JavaScript (fancyScript.js):
// 華麗なボタンを取得 const fancyButton = document.getElementById("fancyButton"); // 華麗なボタンがクリックされたら実行されるイベントリスナーを登録 fancyButton.addEventListener("click", () => { alert("華麗にボタンが押されました！やったね！"); });
この例では、HTMLファイルにある華麗なボタン（fancyButton）がクリックされたら、JavaScriptでイベントリスナーを実行し、アラートでメッセージが表示されます。このように、イベント（この場合はボタンのクリック）に応じてプログラムが動作するのがイベント駆動型プログラミングの特徴です。
javascriptでデフォルトでfindメソッドなどが使えるのは、クラスを継承しているから？
JavaScriptでは、findメソッドのような便利なメソッドが使えるのは、それらが配列（Array）オブジェクトのプロトタイプ（Array.prototype）に定義されているからです。JavaScriptのオブジェクトは、プロトタイプベースの継承を持っており、ArrayオブジェクトはArray.prototypeからメソッドを継承します。
例えば、以下のようなコードがあるとします。
const numbers = [1, 2, 3, 4, 5]; const foundNumber = numbers.find(number => number > 2); console.log(foundNumber); // Output: 3
この場合、numbersはArrayのインスタンスであり、Array.prototypeからfindメソッドを継承しています。そのため、findメソッドが使えるのです。
他の配列メソッド（map, filter, reduceなど）も同様に、Array.prototypeから継承されているため、Arrayオブジェクトで使用できます。
