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
540
React事始め
Gizumo社内勉強会「React」勉強会用の資料です。
nabeliwo
September 10, 2016
Tweet
Share
More Decks by nabeliwo
See All by nabeliwo
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
520
Dive into SmartHR UI
nabeliwo
3
1k
Web Componentsを使ったウィジェット埋め込みの話
nabeliwo
0
240
Snowpack で始めるバンドルレス開発 / about Snowpack
nabeliwo
0
130
おいでよ フロントエンドの森 / welcome-to-front-end
nabeliwo
0
77
お前もJavaScriptにしてやろうか〜アメーバピグ編〜
nabeliwo
0
430
React + flumptでイカ戦績グラフ化ツールを作ってみた
nabeliwo
0
170
Other Decks in Programming
See All in Programming
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
134
6.5k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
What's new in Ruby 2.0
geeforr
338
31k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Building Your Own Lightsaber
phodgson
101
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Making Projects Easy
brettharned
111
5.7k
In The Pink: A Labor of Love
frogandcode
139
22k
BBQ
matthewcrist
82
9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
4 Signs Your Business is Dying
shpigford
178
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
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
おわり