JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~

JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~

2019年2月2日(土)
2019年2月号 第1回JavaScript(ECMAScript 2015)初心者もくもく勉強会の日
@ さくらインターネット本社

61e8d2d797a37913aafaeb8e8b38c373?s=128

echizenyayota

February 02, 2019
Tweet

Transcript

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

  2. 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/
  3. エコテキブログ(個人ブログ) https://e-yota.com/

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

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

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

  7. Reactの例(カウンターアプリ) http://takaiba.net/basic_react_js/

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

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

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

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

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

  13. クラス構文 ≒ たい焼き

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

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

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

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

  18. 3. メソッドの作成(sayHiメソッド) https://bit.ly/2RMTsZq

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

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

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

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

  23. 8. メソッドの定義(sayHelloメソッド) https://bit.ly/2Msel6g

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

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

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

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

  28. ご清聴ありがとうございました!