JavaScriptの新しい文法を学習しよう

Reactで見るECAMScript2015のアロー関数式

Transcript

1. JavaScriptの新しい文法を学習しよう
   ~Reactで見るECMAScript2015のアロー関数式~
   2019年4月7日（土）
   2019年4月号 第2回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. 宣言文に関数名の定義
    https://bit.ly/2G7NNpz
    

    View Slide

14. 関数リテラルによる定義
    https://bit.ly/2DHC2Vv
    

    View Slide

15. Functionコンストラクタによる定義
    https://bit.ly/2FUkK9N
    

    View Slide

16. アロー関数式による定義
    https://bit.ly/2Utn2jD
    

    View Slide

17. アロー関数式の例（その1）
    https://bit.ly/2RRL0rT
    

    View Slide

18. アロー関数式の例（その2）
    https://bit.ly/2CPwQwT
    

    View Slide

19. アロー関数式の変形バージョン（その1）
    https://bit.ly/2HDr9YM
    

    View Slide

20. アロー関数式の変形バージョン（その2）
    https://bit.ly/2DE4K9t
    

    View Slide

21. 参考ページ
    Reactと新しいJavaScriptの文法（ECMAScript6）~ アロー関数式について
    https://e-yota.com/webservice/react_ec6_arrow_function/
    

    View Slide

22. 参考書籍
    https://amzn.to/2D2yL2n
    

    View Slide

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

    View Slide