クラス構文について投稿日:2018年10月31日UIを作るためのJavaScriptライブラリであるReactの公式ドキュメントでは、JavaScriptの新しい規格であるECMAScript6(ECMAScript2015)で記述されています。WikipediaでECMAScriptについて調べてみると、冒頭でこのように説明されています。Internationalのもとで標準化手続きなどが行われている。他言語の機能が取り入れられたECMAScript6Wikipediaの説明だけでは分かりにくいかもしれませんね。踏み込んだ説明をすると、ECMAScript6はそれまでのJavaScriptの言語仕様を温存しつつ、多言語で実現されていたさまざまな最新機能が取り入れらています。ECMAScript6にはブロックスコープや配列の分割代入などさまざまな新機能がありますが、その中でも今回はクラス構文についてご紹介します。クラス構文についてクラス構文とはコンストラクタの糖衣構文(シンタックスシュガー)です。コンストラクタとはオブジェクトを初期化して使えるようにする関数で、糖衣構文とはよりシンプルでわかりやすい書き方で書く構文のことを言います。echizenya上記のクラス構文はコンストラクタ関数であるGreetを定義していますコンストラクタ関数によって仮引数の”name”は、オブジェクトの”name”として扱われることになります。(名前)”が表示されます。echizenya”が表示されます。Hello("yota");console.log(h.sayHello());クラス構文にextendsキーワードを追加すると、他のコンストラクタやメソッドを継承し、新しいメソッドの追加・拡張ができます。上記の例ではHelloクラスの宣言文が、Greetクラスのコンストラクタを継承しています。そのためHelloクラスではコンストラクタの定義が省略されています。yota”が表示されます。Reactのクラス構文ECMAScript6のクラス構文にもとづいて、Reactの公式ドキュメントに掲載されているToggleというクラスを確認しましょう。}class宣言子と波括弧でReact.Componentクラスから継承したToggleクラスを宣言します。}次にオブジェクトを初期化して使えるようにするために、props(プロパティ)を仮引数としたコンストラクタ関数を定義します。true};Reactのコンストラクタ関数では”super()”を使って、最初に必ず親クラスの呼び出します。”super()”についてはMDNのドキュメントを参考にしてください。true}”というボタンの状態を示すプロパティを”this.state”に代入します。stateとはUIの書き換えをするために必要なComponentを保持するためのプロパティです。Toggleクラスのプロパティであることを示すためにthisキーワードを用います。this.handleClick.bind(this);公式ドキュメントではコンストラクタ関数の下にこの1行が最後に加えられています。これはメソッドを要素(この場合はonClick要素)の中で使ってもエラーにしないためにbindメソッドを使ってクラスを挟むという形にしています。}クラスの中で使われる”handleClick()”はメソッドと呼ばれます。ECMAScript6で言えば、先述したhiメソッドやsayHelloメソッドが相当します。!state.isToggleOn}));handleClickメソッドでは、setStateメソッドによって現在の状態を変更するように定義をします。({})”となっている箇所がありますが、アロー関数式において引数が1つしかない場合は、引数(state)を囲む丸括弧は省略が可能です。);}最後にrenderメソッドで読み込みます。このコードを実行するとWebブラウザ上でボタンが表示され、クリックするとONとOFFが切り替わります。検索検索なかの人Webサービス開発者&ドットインストール学習者&個人事業主&ねこ。