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
510
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
340
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.4k
Other Decks in Programming
See All in Programming
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
NEWT Backend Evolution
xpromx
1
140
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
What's new in AppKit on macOS 26
1024jp
0
150
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Visualization
eitanlees
146
16k
It's Worth the Effort
3n
185
28k
A designer walks into a library…
pauljervisheath
207
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
KATA
mclloyd
30
14k
4 Signs Your Business is Dying
shpigford
184
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
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/
ご清聴ありがとうございました!