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
410
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
520
Visual Studio CodeでJavaScriptプログラミング
echizenyayota
0
300
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
130
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
140
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
64
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
130
JavaScriptの新しい文法を学習しよう
echizenyayota
1
340
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.4k
Other Decks in Programming
See All in Programming
Design Foundational Data Engineering Observability
sucitw
3
200
AI時代のUIはどこへ行く?
yusukebe
18
9k
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
Kiroで始めるAI-DLC
kaonash
2
610
チームのテスト力を鍛える
goyoki
3
700
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
590
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
print("Hello, World")
eddie
2
530
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Music & Morning Musume
bryan
46
6.8k
Building Applications with DynamoDB
mza
96
6.6k
The Invisible Side of Design
smashingmag
301
51k
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/
ご清聴ありがとうございました!