プログラミング初心者のための入門ブログエンジニアが未来を切り開く。ES6とES7のクラス構文の使い方と仕組みを解説この広告は、90日以上更新していないブログに表示しています。本日のチュートリアルはJavaScriptのクラスについて学習します。JavaScriptクラスを学習し始めたあなたは中級者レベルに到達しています。Reactなどの一般的なJavaScriptライブラリはクラス構文を頻繁に使用するため、クラスに精通していると非常に役立ちます。本日はES6クラス構文およびES7クラス構文の解説を致します。JavaScriptにおけるクラスとPrototypeの違いは、他の記事として取り扱いますが、Prototypeについて精通していない初心者様もいらっしゃるかと思いますので短めに解説します。この記事では、すでに(Prototype)および(this)にある程度精通している方を対象としている事をご理解ください。最後にPrototypeとは?JavaScriptにおけるprototypeは、あるオブジェクトのプロパティやメソッドを他のオブジェクトから継承するための仕組みです。prototypeという特別なプロパティを持っています。このprototypeは、オブジェクトの「元」となる別のオブジェクトを指します。この「元」となるオブジェクトには、プロパティやメソッドが定義されていることがあります。下記のコードをご確認下さい。PersonオブジェクトのprototypeにsayHelloメソッドが定義されます。sayHelloメソッドを継承することができます。定義されたsayHelloメソッドが呼び出されます。prototypeは、オブジェクトのプロパティやメソッドを継承するための一般的な方法であり、JavaScriptでのオブジェクト指向プログラミングにおいて重要な概念となっております。クラスとは?JavaScriptクラスはECMAScript2015(ES6)で導入されました。ES6以前では、クラスの概念がなかったので関数を使用しプロトタイプの方法で実装していました。クラスは、他のプログラミング言語とは異なり、JavaScriptのシンタックスシュガーです。JavaScriptには適切なクラスが含まれていません。クラスは、関数でのプロトタイプを使用した以前でのメソッドを置き換え、オブジェクトテンプレートを作成するために改善され、よりクリーンな構文を提供するためのJavaScriptのクラス概念となっております。JavaScriptのクラスはオブジェクトではなく、JavaScriptオブジェクトを作成するためのテンプレートのようなものです。JavaScriptにおけるクラスは、オブジェクト指向プログラミングにおける重要な概念の一つです。それでは、JavaScriptクラスの基本的な使用方法を説明します。JavaScriptクラス構文クラスは特殊な種類の関数なので、関数宣言や関数式(無名関数)と同じようにクラスを定義できます。クラスは関数に似ています。クラス関数式(無名関数)これらはclassキーワードによって宣言されます。JavaScriptは、クラスを定義する主要な方法であるclassキーワードを提供します。これは、既存のプロトタイプ継承パターンに対するシンタックスシュガーとして機能します。JavaScriptクラスを作成するには、classキーワードの後に​​クラスの名前を続けます。以下のClassnameはクラスの名前です、クラス名は通常ではクラス名の先頭に大文字を使用して定義されます。}}以下でのnewはクラスをインスタンス化します。新しい空のオブジェクトが作成され、thisに割り当てられます。Classname();Classnameクラスの新しいオブジェクトであるインスタンスを作成する方法です。functionインスタンスに関しましては、後に詳しく解説致します。JavaScriptでは、クラスは一種の関数となっています。クラスに名前を付ける必要はありません。クラス式を使用すると、クラスを変数に割り当てることができます。以下では、無名関数である名前無しの宣言となります。namedこれらのように、クラスは名前付きまたは名前なしにすることができます。名前付きクラス式に付けられた名前は、クラスの本体に対してローカルです。名前付きクラスと無名クラスの最も重要な違いは、名前付きクラスが再利用可能であることです。名前付きクラスは、複数の場所で同じ名前で参照できます。一方で、無名クラスは、そのインスタンスを作成するためにのみ使用され、再利用することはできません。初期化クラスは関数の一種であり似ておりますが、実際には関数とは多少異なる部分があります、それはJSのクラスは巻き上げられません。JavaScriptのクラスには、constructorと呼ばれる特別なメソッドがあり、オブジェクトの初期化時にフィールドの初期値を設定できます。constructorはオブジェクトの作成とプロパティを初期化するために使用される関数オブジェクトです。constructor関数は、関数自体を参照しthisのプロパティとして割り当てられ、いくつかのパラメーターで初期化されます。}}引数は括弧()で囲まれ、その後に中括弧{}で囲まれたコードブロックが続きます。これらの中括弧は、メソッド本体の開始位置の開き中括弧{と終了位置の閉じ中括弧}を示します。外側にあるペアの中括弧は、クラス自体そのものを定義し、内側のペアの中括弧はconstructorメソッドの境界を定義するために使用されています。thisキーワードを使用して現在のクラスを参照します。constructorメソッドは1つしか存在できません。thisキーワードに精通されていない方は、当ブログの以下のチュートリアルを参照してみて下さい。dev-k.hatenablog.comクラスのインスタンス化インスタンスとは、クラスのプロパティ名とメソッドを含むが、一意のプロパティ値を持つオブジェクトです。インスタンスはクラスによって記述されたデータと動作を含むオブジェクトという事です。クラスはカテゴリと考えることもできます。各クラスは異なる値を含み、クラスのインスタンス(オブジェクト)の状態を記述する属性やプロパティを持つことができます。各ユーザー情報の異なる値と考えてみて下さい。クラスのインスタンスを作成するとは、それらをクラスとして管理するのがインスタンスになります。クラスを使ってオブジェクトを作成するには、newキーワードを使用します。user.age);上記のコードでは、newキーワードを使用してUserクラスからuserというインスタンスを作成しています。nameという式で、フィールドのnameを作成し、初期値を代入しています。Userクラスのconstructorメソッドが呼び出され、nameプロパティに"Taro"、ageプロパティに30が設定されます。これで、新しいuserオブジェクトを作成し、そのnameプロパティにアクセスできるようになりました。CodePen.クラスのメソッドクラスは、メソッドを追加するためのよりクリーンで洗練された構文を提供しています。}}thisキーワードを使用すると、constructorとメソッド内のインスタンスデータにアクセスできます。Taroメソッド呼び出しのuser.getName()は、Userクラス内のメソッドを実行し、nameプロパティを返します。CodePen.他の例で、もう少し学んでみましょう。}}上記のコードでは、Personというクラスを定義しております。constructorメソッドは、クラスのインスタンスが作成されたときに呼び出される特別なメソッドで、nameとageという2つの引数を受け取って、それぞれthis.nameとthis.ageというプロパティに値を設定しています。sayHelloメソッドは、this.nameとthis.ageの値を使って、挨拶をするためのメソッドとなります。静的メソッドメソッドをそのプロトタイプではなく、クラス関数自体に割り当てることも可能です。そのようなメソッドはstatic(静的)と呼ばれ、以下のキーワードが先頭に追加されます。4上記のDoubleクラスのdoubleメソッドは、与えられた数値を2倍にする単純な計算を行っています。静的メソッドでは、クラスのインスタンス特有のデータや状態にアクセスすることはできませんが、その代わりに引数を受け取って処理を行います。このような簡単な計算や処理を行う場合、インスタンスを作成する必要はなく、クラス自体で直接メソッドを呼び出すことができるため、静的メソッドが有用です。このように、静的メソッドはユーティリティクラスで計算を行うためによく使用されます。クラスの拡張および継承extendsキーワードを使用して、JavaScriptのオブジェクトとクラスを拡張できます。一部のクラスを拡張するクラスは子クラスと呼ばれ、他のクラスは親クラスと呼ばれます。通常では、別のクラスの子であるクラスを作成するために使用されます。クラスを拡張する理由は、新しいクラスに元のクラスと同じ機能をすべて持たせたい場合は、クラスを拡張します。子クラスは、新しい機能を追加するか、親クラスのいくつかの機能をオーバーライドすることができます。extendsキーワードは、他のクラスまたは親クラスに存在するプロパティとメソッドにアクセスするのに役立ちます。ES6でクラスを拡張するプロセスは簡単です。クラス名の後にextendsキーワードを記述し、拡張するクラスの名前を記述するだけです。}例えば、以下のようなクラスPersonがあるとします。}}このクラスを拡張し形成し、ベースクラスから拡張してpersonInfo()メソッドを継承し、特定のメソッドやプロパティを提供できます。}}ES6ではextendsとsuperキーワードを使用することで、以前のプロトタイプの継承手法の手順を簡略化しました。以下の例では、PersonクラスとStudentクラスを定義し、extendsとsuperキーワードで継承を確立しています。CodePen.まず、extendsキーワードを使用し、Personクラスを継承したStudentクラスにします。...}先述したように、上記であればPersonクラスは基本クラスおよび親クラス呼ばれ、Studentクラスは派生クラスまたは子クラスと呼ばれています。Studentクラスは、Personクラスのすべてのプロパティとメソッドを継承します。Studentクラスのconstructorでsuper()を呼び出しnameを引数としてPersonのconstructorを呼び出します。}}JavaScriptでは、子クラスがconstructorを持つ場合はsuper()を呼び出すことが要求されます。superは親クラスからクラスを拡張する場合、子クラスを使用する前に親クラスを呼び出す必要があります。JavaScriptによって提供されるsuper()メソッドがあるので、それが呼び出しを行います。クラスにconstructorがない場合には、他に何もする必要はありません。super()はthisオブジェクトを初期化するため、thisオブジェクトにアクセスする前にsuper()を呼び出す必要があります。したがって、super()を呼び出す前にthisにアクセスしようとすると、エラーになりますので注意して下さい。7(2016)クラス構文の最も良い点は、constructorまたはsuper()メソッドを記述する必要がないことです。それは、アロー関数をクラスメソッドとして使用することもできます。これにより、コードの記述がより簡単かつ迅速になります。Person();person.personInfo();ES7クラス構文では、constructorとsuper()メソッドは裏側で書かれているので、あなたが書く必要はありません。CodePen.最後に同じ種類のオブジェクトを複数作成する必要がある場合は、クラスを使用します。mode(厳格モード)で実行され、巻き上げられない特別な種類の関数となります。クラスには、クラスインスタンスからアクセスできるフィールドとメソッドを含めることができ、それらを拡張することにより、他のクラスから機能を継承できます。子クラスは親クラスのすべての機能を継承できるため、コードの再利用が可能になります。それにより、コードがよりクリーンになり、保守が容易になります。それだけでなく、子クラスに独自の機能を追加することもできるため、有用な機能だけを継承し、その他の必要な機能を定義することができます。継承は、オブジェクト指向プログラミングの中心的な概念の1つであり、継承とは親クラスや基本クラスのメソッドや属性を子クラスや派生クラスにコピーまたは継承することであり、JavaScriptではextendsというキーワードを使って実現することができます。プロトタイプの継承は時代遅れで複雑です。extendsはより単純で、Java、C++などの他の言語に似ています。本日は以上となります。最後までこの記事を読んで頂きありがとうございます。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。