JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~ 2019年2月2日（土） 2019年2月号 第1回JavaScript(ECMAScript 2015)初心者もくもく勉強会の日 @ さくらインターネット本社

About me 福井 洋（ふくい ひろし） WordPress関連の個人事業主 （ブログサイトの運営・プラグイン開発・サーバー環境構築） http://e-yota.com https://speakerdeck.com/echizenyayota https://twitter.com/echizenya_yota 主なコミュニティ活動 さくらクラブ いろいろ初心者もくもく勉強会 管理人 https://saku-love.doorkeeper.jp/events/63785 WordCamp Tokyo 2018 スピーカー https://2018.tokyo.wordcamp.org/speaker/fukui-hiroshi/

エコテキブログ（個人ブログ） https://e-yota.com/

Reactとは UIを作るために Facebook社が開発した JavaScriptライブラリ (公式ドキュメント)

私がReactの学習をはじめた理由 自分のブログサイトを 高速表示させたいから (フロントエンドとバックエンドの分離)

Reactを知っておくメリット 複雑なUIが簡単に扱える (らしい)

Reactの例（カウンターアプリ） http://takaiba.net/basic_react_js/

Reactの学習方法 ドットインストール（980円/月） (React入門 全19回) （ReactでTodo管理アプリを作ろう 全17回）

ドットインストールの学習効果を引き出すコツ a. 公式ドキュメントのアプリを作って試す b. JavaScriptの文法（ECMAScript2015）を学習

a. 公式ドキュメントのアプリを作成 http://takaiba.net/react_class/

ボタンアプリのコーディング https://bit.ly/2FLZsLD

b. JavaScriptの文法（クラス構文)を学習 クラス構文とはデータを初期化することで変数やメソッドを使い回 しができるようにする文法のこと

クラス構文 ≒ たい焼き

「あいさつアプリ」の作成

「あいさつアプリ」をたい焼きに例えると...

1. クラスの定義(Greetクラス) https://bit.ly/2B1MtBi

2. コンストラクタの作成とプロパティの定義 https://bit.ly/2Mxa5CE

3. メソッドの作成（sayHiメソッド） https://bit.ly/2RMTsZq

4. インスタンスの作成（Greetクラスの実体化） https://bit.ly/2WeL6rZ

5. コンソール画面への出力 https://bit.ly/2Td03cc

6. コンソール画面の確認

7. 継承によるクラスの拡張（Helloクラス） https://bit.ly/2sIHwZJ

8. メソッドの定義（sayHelloメソッド） https://bit.ly/2Msel6g

9. インスタンスの作成（Helloクラスの実体化） https://bit.ly/2Td0B1K

10. コンソール画面への出力 https://bit.ly/2CGGhP7

11. コンソール画面の確認

参考ページ Reactと新しいJavaScriptの文法（ECMAScript6）~ クラス構文について https://e-yota.com/webservice/react_es6_class/

ご清聴ありがとうございました！