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

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

61e8d2d797a37913aafaeb8e8b38c373?s=47 echizenyayota
February 02, 2019
Programming
0
210

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

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

61e8d2d797a37913aafaeb8e8b38c373?s=128

echizenyayota

February 02, 2019
Tweet

More Decks by echizenyayota

See All by echizenyayota
日本語話者と英語話者のためのIT技術者交流コミュニティ_事始め_日本語_英語_.pdf
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
210
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
210
Visual Studio CodeでJavaScriptプログラミング
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
130
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
87
ドットインストールの質問回答サービスで身につくプログラミング学習法
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
70
「Webパフォーマンス改善セミナー」 概要説明
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
1
36
JavaScriptの正規表現で リファラースパムを退治した話
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
55
JavaScriptの新しい文法を学習しよう
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
1
270
さくらのVPSでプラグインを使わないWordPressのバックアップ
61e8d2d797a37913aafaeb8e8b38c373?s=48 echizenyayota
0
1k

Other Decks in Programming

See All in Programming
Learning DDD輪読会#4 / Learning DDD Book Club #4
E10ba38646a905c8cd2c893c84d5c520?s=48 suzushin54
1
130
書籍『良いコード/悪いコードで学ぶ設計入門』でエンジニアリングの当たり前を変える
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
3
1.1k
TSDサービスRecap ～PMBOK®ガイド第7版超速まるわかりガイド～｜ミツエーリンクスTSD
F1bcf74c372e3d1b68834eef7163063c?s=48 mlctsd
0
100
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
0
1.1k
質とスピード（2022春版、質疑応答用資料付き） / Quality and Speed 2022 Spring Edition
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
PRO
28
18k
Licences open source : entre guerre de clochers et radicalité
323bb1cb39e6478e559b6e13d2fdf518?s=48 pylapp
1
250
Loom is Blooming
F784a8de872a5d98f67ac5ccbd6683d0?s=48 josepaumard
3
540
脱オブジェクト指向講座(5分LT資料)
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
8
11k
Becoming an Android Librarian
D4df9c152982182ce1125e49fe83527c?s=48 skydoves
3
460
A technique to implement DSL in Ruby
110cd4dcaed019b3bd9809e541afdeb6?s=48 okuramasafumi
0
690
Named Document って何？
4cda705b5eecbba889fb97ce9f374efe?s=48 harunakano
0
370
WindowsコンテナDojo : 第1回 Visual StudioでWindowsコンテナアプリ作成
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
330

Featured

See All Featured
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
265
21k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.6k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
11
1.3k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
25
1.5k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
44k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.1k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
5.9k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k

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. ご清聴ありがとうございました！