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
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
850
Dive into SmartHR UI
nabeliwo
3
1.2k
Web Componentsを使ったウィジェット埋め込みの話
nabeliwo
0
390
Snowpack で始めるバンドルレス開発 / about Snowpack
nabeliwo
0
190
おいでよ フロントエンドの森 / welcome-to-front-end
nabeliwo
0
100
お前もJavaScriptにしてやろうか〜アメーバピグ編〜
nabeliwo
0
490
React + flumptでイカ戦績グラフ化ツールを作ってみた
nabeliwo
0
180
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
開発生産性を上げるための生成AI活用術
starfish719
1
170
明日から始めるリファクタリング
ryounasso
0
110
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
390
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Embracing the Ebb and Flow
colly
88
4.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
How GitHub (no longer) Works
holman
315
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Music & Morning Musume
bryan
46
6.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Context Engineering - Making Every Token Count
addyosmani
5
180
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
おわり