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

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

Transcript

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

   View Slide

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/
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide