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
React事始め
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
nabeliwo
September 10, 2016
Programming
0
550
React事始め
Gizumo社内勉強会「React」勉強会用の資料です。
nabeliwo
September 10, 2016
Tweet
Share
More Decks by nabeliwo
See All by nabeliwo
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
900
Dive into SmartHR UI
nabeliwo
3
1.2k
Web Componentsを使ったウィジェット埋め込みの話
nabeliwo
0
410
Snowpack で始めるバンドルレス開発 / about Snowpack
nabeliwo
0
200
おいでよ フロントエンドの森 / welcome-to-front-end
nabeliwo
0
110
お前もJavaScriptにしてやろうか〜アメーバピグ編〜
nabeliwo
0
500
React + flumptでイカ戦績グラフ化ツールを作ってみた
nabeliwo
0
190
Other Decks in Programming
See All in Programming
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
530
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.7k
Fragmented Architectures
denyspoltorak
0
140
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
920
CSC307 Lecture 05
javiergs
PRO
0
490
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
180
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
kanamasa
11
5.9k
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
350
AgentCoreとHuman in the Loop
har1101
5
200
Pythonではじめるオープンデータ分析〜書籍の紹介と書籍で紹介しきれなかった事例の紹介〜
welliving
3
850
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
550
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
57
14k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
58
42k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.5k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
220
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
800
Exploring anti-patterns in Rails
aemeredith
2
230
End of SEO as We Know It (SMX Advanced Version)
ipullrank
2
3.9k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
160
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
420
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.1k
Transcript
React事始め @nabeliwo React勉強会 on 2016.09.10
React is 何 • Viewライブラリ✨ • facebook作 • https://facebook.github.io/react/ •
Not フレームワーク • But フレームワーク比較によく出てくるやつ • Reactを含むアーキテクチャを丸々ひっくるめて語られ ることが多い
Reactその使われっぷり • Facebook • Instagram • Uber • Netflix •
Airbnb • Yahoo • Twitter Mobile • Abema.TV • Qiita • etc… • ReactNative for iOS • ReactNative for Android • ReactNative for Windows web以外でも…
今一番使われている フレームワーク https://medium.com/@sachagreif/the-state-of-javascript- front-end-frameworks-1a2d8a61510#.vvxdjb9de
Reactその特徴 • JUST THE UI • VIRTUAL DOM • DATA
FLOW 公式サイトより… 昔 今 • Declarative • Component-Based • Learn Once, Write Anywhere
JUST THE UI ReactはComponentを作るためのライブラリ (コンポーネント指向)。 Componentを作るだけなので、覚えること もそんなに多くない。 コンポーネント is 何
=> データ、見た目、振る舞い全てをひとま とめにしたもの。超平たく言うとView。
VIRTUAL DOM データの変更をDOMに反映させる話。 Reactでは、JavaScript内にVirtual DOM としてDOMツリーのような構造体を持つ。 その前後の状態を比較して最小限の変更で DOMに反映させる。 雑にrerenderしても実際には必要最低限の DOMしか更新されない。
=> 設計と速度の両立
DATA FLOW アプリケーションの状態を管理している親コ ンポーネント。 そのデータを子のコンポーネントに渡してい く一方向なデータの流れでわかりやすくアプ リケーションを作ることができる。
Declarative 宣言的である。 「変化」ではなく「状態」を定義するので、 目で見て処理がわかりやすい。
Component-Based ReactのComponentを継承してコンポーネン トを作り、そのコンポーネントを組み合わせ てアプリケーションを作ることができる。
Learn Once, Write Anywhere ReactNativeなどが出てきたことで、一度 Reactを学べば多くのプラットフォームでア プリケーションを作ることができる。
Reactに付随する知識 • JSX XMLライクなSyntaxでComponentを作ることができ る、テンプレートのようなもの。 JSの中でHTMLを作るため、JSの予約語であるclassや forが使えないため、classNameとかhtmlForとかにな る。慣れるまで気持ち悪い • Flux
MVCとかそういうアーキテクチャの一つ。決して React = Fluxではないが、Fluxの構成要素として Reactが存在する。
Reactを動かすために必要なもの • BABEL ES2015で書かれた記述をブラウザで動く記述に変換す るトランスパイラ。BABELにReactのpresetをかませ ることでJSXの記述とかもブラウザで処理できるように なる。 • browserify JSの世界で別のファイルで定義したものを呼び出して
使えるようになる。実際には、依存対象を元のファイ ルにくっつけて1つのJSファイルとしてバンドルする。 ※バンドル前提。scriptでReact読んでとかやらない
実際のコードのお話
1 Hello World • Component • state • jsx •
reactのrender • react-domの render
2 JSX • テンプレート • JSの予約語が使 えない • 中でJSが使える •
1つのDOMツ リーでなければ ならない
おまけ1 メンバ変数の定義だがこれをBABELでコンパイルしようと するとエラーが出ます。class-public-fieldsってやつで Stage 1。 あんまり使わない方が良いので素直にコンストラクタ内で宣 言しよう。なのに書いてごめん。つい手癖が…
おまけ2 〜Stage〜 • Stage is 何 TC39というECMAScriptの策定をしている専門委員会 があって、その中でESの新しい機能が提案されると、 それにはStageと呼ばれる5段階のラベルがつけられま す(0〜4)。Stage
4になった提案は次期ECMAScriptの 仕様に取り込まれます。 • 提案段階の機能を使うには BABELのpresetにbabel-preset-stage-0というのをか ませると、全ての提案段階の機能を使うことができます。 でもあんまりよくないよ。
おまけ3 〜Stage詳しく〜 • Stage 0 Strawman - アイディア ただのアイディアです。 •
Stage 1 Proposal - 提案 プロポーザルの目的や解決方法を示している。Polyfillやデモ等を用いて解説し ている。 • Stage 2 Draft - ドラフト いわゆるドラフト。ECMAScript標準と同じルールでAPIや構文、セマンティッ クについて説明していなければならない。 • Stage 3 Candidate - 仕様書と同じ形式 仕様は完成した状態。ECMAScriptのエディタのチェックが必要。 • Stage 4 Finished 策定完了 ECMAScriptへ取り込まれる準備が完了したことを示す状態。 詳細: https://azu.github.io/slide-what-is-ecmascript/slide/12.html
3 親子コンポーネント props・PropTypes・key
おまけ4 〜SFC 〜 => • Stateless Functional Components State(状態)を持たず、ライフサイクルメソッド(後述) も持たないコンポーネントはただの純粋なJSXを返すだ けの関数にすることができる。
4 状態の変更 • stateの直接の変更は禁止 • setStateを使う • 子にpropsとして関数を渡 す
5 ComponentのLifecycle • componentWillMount => DOM展開前 • componentDidMount => DOM展開後
• componentWillReceiveProps => Props更新前 • shouldComponentUpdate => componentのrerender 前。パフォーマンスチューニング用。 • componentWillUpdate => componentの更新前 • componentDidUpdate => componentの更新後 • componentWillUnmount => DOM削除前 Componentの状態の変化に合わせて呼ばれるメソッド群
)あとはひたすら手を動せ!) https://github.com/nabeliwo/simple-react-sample
おわり