Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript201...
Search
echizenyayota
February 02, 2019
Programming
0
360
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~
2019年2月2日(土)
2019年2月号 第1回JavaScript(ECMAScript 2015)初心者もくもく勉強会の日
@ さくらインターネット本社
echizenyayota
February 02, 2019
Tweet
Share
More Decks by echizenyayota
See All by echizenyayota
日本語話者と英語話者のためのIT技術者交流コミュニティ_事始め_日本語_英語_.pdf
echizenyayota
0
400
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
500
Visual Studio CodeでJavaScriptプログラミング
echizenyayota
0
290
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
120
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
130
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
58
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
120
JavaScriptの新しい文法を学習しよう
echizenyayota
1
330
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.4k
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
700
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
童醫院敏捷轉型的實踐經驗
cclai999
0
210
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
300
Goで作る、開発・CI環境
sin392
0
190
Discover Metal 4
rei315
2
110
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
2.1k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
630
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
100
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
XP, Testing and ninja testing
m_seki
3
220
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Code Reviewing Like a Champion
maltzj
524
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
RailsConf 2023
tenderlove
30
1.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Speed Design
sergeychernyshev
32
1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
KATA
mclloyd
30
14k
Transcript
JavaScriptの新しい文法を学習しよう ~Reactで見るECMAScript2015のクラス構文~ 2019年2月2日(土) 2019年2月号 第1回JavaScript(ECMAScript 2015)初心者もくもく勉強会の日 @ さくらインターネット本社
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/
エコテキブログ(個人ブログ) https://e-yota.com/
Reactとは UIを作るために Facebook社が開発した JavaScriptライブラリ (公式ドキュメント)
私がReactの学習をはじめた理由 自分のブログサイトを 高速表示させたいから (フロントエンドとバックエンドの分離)
Reactを知っておくメリット 複雑なUIが簡単に扱える (らしい)
Reactの例(カウンターアプリ) http://takaiba.net/basic_react_js/
Reactの学習方法 ドットインストール(980円/月) (React入門 全19回) (ReactでTodo管理アプリを作ろう 全17回)
ドットインストールの学習効果を引き出すコツ a. 公式ドキュメントのアプリを作って試す b. JavaScriptの文法(ECMAScript2015)を学習
a. 公式ドキュメントのアプリを作成 http://takaiba.net/react_class/
ボタンアプリのコーディング https://bit.ly/2FLZsLD
b. JavaScriptの文法(クラス構文)を学習 クラス構文とはデータを初期化することで変数やメソッドを使い回 しができるようにする文法のこと
クラス構文 ≒ たい焼き
「あいさつアプリ」の作成
「あいさつアプリ」をたい焼きに例えると...
1. クラスの定義(Greetクラス) https://bit.ly/2B1MtBi
2. コンストラクタの作成とプロパティの定義 https://bit.ly/2Mxa5CE
3. メソッドの作成(sayHiメソッド) https://bit.ly/2RMTsZq
4. インスタンスの作成(Greetクラスの実体化) https://bit.ly/2WeL6rZ
5. コンソール画面への出力 https://bit.ly/2Td03cc
6. コンソール画面の確認
7. 継承によるクラスの拡張(Helloクラス) https://bit.ly/2sIHwZJ
8. メソッドの定義(sayHelloメソッド) https://bit.ly/2Msel6g
9. インスタンスの作成(Helloクラスの実体化) https://bit.ly/2Td0B1K
10. コンソール画面への出力 https://bit.ly/2CGGhP7
11. コンソール画面の確認
参考ページ Reactと新しいJavaScriptの文法(ECMAScript6)~ クラス構文について https://e-yota.com/webservice/react_es6_class/
ご清聴ありがとうございました!