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で見るECMAScript2015のクラス構文~
Search
echizenyayota
February 02, 2019
Programming
0
290
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
310
外出自粛期間のおすすめ! オンラインサービスで 自由気ままな英語学習
echizenyayota
0
320
Visual Studio CodeでJavaScriptプログラミング
echizenyayota
0
220
他人のソースコードをすばやく読むコツ 項とJavaScriptの演算子
echizenyayota
0
110
ドットインストールの質問回答サービスで身につくプログラミング学習法
echizenyayota
0
100
「Webパフォーマンス改善セミナー」 概要説明
echizenyayota
1
49
JavaScriptの正規表現で リファラースパムを退治した話
echizenyayota
0
90
JavaScriptの新しい文法を学習しよう
echizenyayota
1
310
さくらのVPSでプラグインを使わないWordPressのバックアップ
echizenyayota
0
1.2k
Other Decks in Programming
See All in Programming
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
110
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
TCA魔法学入門🪄
dazy
0
280
object-oriented-conference-2024
fuwasegu
6
2k
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
790
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.8k
htmx is fun!
codehex
2
190
Understanding Ast By Looking
inouehi
0
120
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
770
Featured
See All Featured
Unsuck your backbone
ammeep
661
56k
Optimizing for Happiness
mojombo
369
69k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Teambox: Starting and Learning
jrom
126
8.4k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Bash Introduction
62gerente
604
210k
A designer walks into a library…
pauljervisheath
199
23k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Rails Girls Zürich Keynote
gr2m
91
13k
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/
ご清聴ありがとうございました!