Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

echizenyayota

April 07, 2019
Tweet

More Decks by echizenyayota

Other Decks in Programming

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. b. JavaScriptの文法(関数)を学習
    関数とは一連の処理をいつでも呼び出せるようにしたもの。

    View full-size slide

  13. 宣言文に関数名の定義
    https://bit.ly/2G7NNpz

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide