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
420
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
530
Visual Studio CodeでJavaScriptプログラミング
echizenyayota
0
310
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
130
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
140
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
67
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
130
JavaScriptの新しい文法を学習しよう
echizenyayota
1
340
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.4k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
500
What's new in Spring Modulith?
olivergierke
1
160
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
200
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
6.3k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
940
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Devoxx BE 2025 Loom lab
josepaumard
0
110
技術的負債の正体を知って向き合う
irof
0
210
Webサーバーサイド言語としてのRustについて
kouyuume
0
2.3k
CSC509 Lecture 05
javiergs
PRO
0
310
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
760
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Automating Front-end Workflow
addyosmani
1371
200k
Fireside Chat
paigeccino
40
3.7k
Docker and Python
trallard
46
3.6k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Agile that works and the tools we love
rasmusluckow
331
21k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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/
ご清聴ありがとうございました!