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
Hello React
Search
Takuya Matsumoto
January 16, 2015
Technology
4
270
Hello React
社内勉強会で発表した資料
https://github.com/upinetree/hello-react
Takuya Matsumoto
January 16, 2015
Tweet
Share
More Decks by Takuya Matsumoto
See All by Takuya Matsumoto
STORES におけるセッションストアへの Amazon MemoryDB for Redis の活用と、移行戦略 / MemoryDB for STORES Session Store
upinetree
2
4.1k
STORES へのID基盤の導入と、ユーザーアカウントの移行を振り返って
upinetree
5
3.1k
バックエンド基盤チームのお仕事 / The value of the backend base team
upinetree
0
3.6k
CSSの技術的負債との向き合い方 / How to Deal with Technical Debt of CSS (ja)
upinetree
5
4.3k
How to Deal with Technical Debt of CSS
upinetree
1
550
書籍紹介LT:現場で使える Ruby on Rails 5 速習実践ガイド
upinetree
0
200
Introduction to Entering Test Design (Japanese)
upinetree
0
830
history of nicorepo gem and me
upinetree
0
150
Visualize team communications on github
upinetree
4
1.2k
Other Decks in Technology
See All in Technology
データの品質が低いと何が困るのか
kzykmyzw
6
1k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
1
240
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Code Review Best Practice
trishagee
66
17k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Writing Fast Ruby
sferik
628
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Gamification - CAS2011
davidbonilla
80
5.1k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Transcript
Hello React 2015-01-16 万葉究楽部
@upinetree
React.js 勉強しながら まとめてみた
準備 https://github.com/upinetree/hello-react • cloneしてね • 動かし方はREADME参照 • npmとbowerが事前に必要です
インストール している間に
React.jsとは • MVCでいえばVの部分 • UIのコンポーネント化に着目している • Virtual DOM • 単一方向のデータフロー
Virtual DOM ? • データの変更差分を検出して最小限に更新 • 荒くデータ更新してもパフォーマンスは問 題にならない • データを一から組み立てて反映する感覚
• 人間がパッチ処理を考慮する必要がない • サーバがリクエストに応じてHTMLを返す 感じと同じ
インストール 終わったかな
まずは練習
Practice 1 コンポーネント定義とJSX
Practice 1 見る 読む public/practice/practice1.html src/practice/javascripts/practice1.js
解説 • React.createClassでコンポーネント作る • React.renderでコンポーネントツリーを DOMに紐付けて、結果としてHTMLが表示 される • 必ず一つのコンポーネントにまとめて renderする
Practice 1
JSX • JSXという記法でタグを記述できる • <div>や<table>等、HTMLと同様に使え る • ただし、これらはReactで定義されたコン ポーネント Practice
1
JSX • JSXからVirtual DOMへの変換は色々あるっ ぽい • gulp + browserify +
reactifyと、 react-toolsを試してみた • 今回のサンプルはreact-toolsで変換して ます Practice 1
Practice 2 コンポーネントの 組み合わせ
Practice 2-1 組み合わせの基本
Practice 2-1 見る 読む public/practice/practice2-1.html src/practice/javascripts/practice2-1.js
解説 • コンポーネントを組み合わせてUIを作っ ていく • コンポーネントで囲われた中身は、その コンポーネント内から this.props.childrenとして参照できる • JSXではclassは予約語で使えないので代
わりにclassNameを使う Practice 2-1
Practice 2-2 静的な値 props
Practice 2-2 見る 読む public/practice/practice2-2.html src/practice/javascripts/practice2-2.js ※2-1とdiffとると分かりやすいです
解説 • authorをコンポーネントの属性に追加 • コンポーネントの属性を定義すると、 this.propsとして参照することができる • propsはイミュータブル • コンポーネント間で情報の受け渡しをす
るのに使う Practice 2-1
Practice 3 動的な値 state
Practice 3 見る 読む public/practice/practice3.html src/practice/javascripts/practice3.js
解説 • githubのissueコメントを見に行って逐次 反映している • 更新が必要なデータは、ミュータブルな stateとして扱う Practice 3
state • this.stateはイミュータブルなので直接更新 はできない • setStateで更新する。同時に再renderされ る(デフォルト動作) • 初期値はgetInitialStateで設定する •
componentDidMountはコンポーネントが ツリーに追加された直後に1回だけ呼ばれる Practice 3
Practice 4 イベント
Practice 4 見る 読む public/practice/practice4.html src/practice/javascripts/practice4.js
解説 • onChangeに設定したコールバックで、 フィールドの変更をstateに反映している • 他にもonClickやonSubmitなど、基本的なも のが揃っている • 画面のフィールドは常にVirtualDOMのvalue と同じ値を保とうとする
• よってvalue属性を指定すると、VirtualDOM 側からしか変更できないフィールドになる Practice 4
だいたい基本はできた
TODOアプリを 作ってみるよ!
Step 1 静的なTODOリスト
Step 1 見る 読む public/todoapp/step1.html src/todoapp/javascripts/step1.js
解説 • 複数のコンポーネントをArrayで扱うとき、 それぞれにkey属性の指定が必要 • 差分比較のため • 指定しなくても動くが、パフォーマンス が悪いし警告が出る •
keyは一意である必要があり、そうでない と正しく更新されなくなる Step 1
Step 2 TODOの追加(未遂)
Step 2 見る 読む public/todoapp/step2.html src/todoapp/javascripts/step2.js $ vimdiff src/todoapp/javascripts/ step{1,2}.js
解説 • イベントを受け取るTodoInputに、propsを 持つTodoAppがコールバックを渡している • 子コンポーネントにref属性を指定すると、 this.refsで参照できる • this.refs.todoTitle.getDOMNodeで実際の DOMが取得できる
• 現状todosは更新できない。なぜだろう?? Step 2
チャレンジ • todoを追加できるように修正してみよう • 制限時間5分くらい • ヒント: getInitialStateを忘れずに Step 2
Step 3 TODOの追加(完遂)
Step 3 見る 読む public/todoapp/step3.html src/todoapp/javascripts/step3.js $ vimdiff src/todoapp/javascripts/ step{2,3}.js
解説 • todosをstateとして持たせることでTODO の追加が可能になった • やったね Step 3
Step 4 TODOの完了を切り替える
Step 4 見る 読む public/todoapp/step4.html src/todoapp/javascripts/step4.js public/todoapp/stylesheets/base.css $ vimdiff src/todoapp/javascripts/
step{3,4}.js
解説 • 今までの応用 • toggle時に富豪的にsetStateしているけ どちゃんと更新してくれる • todoのmodelを作っても良いかも Step 4
個人的な感想
感想 • データの変更差分を考えなくて良いのは楽 • データ更新が雑にできるのも楽だし混乱が 少ない • でも、ちゃんとコンポーネントの構造は考 えないとダメ •
stateをどこに持たせるのか、どうコンポー ネントを分割するのかなど
感想 • Vueなどよりは記述量は多い • addonを使うともっと簡単に書けるよう になるらしい • JSXはHTMLライクだけど結局Javascript • デザイナーさん等、プログラマ以外の人
とのやりとりで一工夫いるかも • コメントが書けない?
参考資料 • "Getting Started | React" http://facebook.github.io/react/docs/getting- started.html • "一人React.js
Advent Calendar 2014 - Qiita" http://qiita.com/advent-calendar/2014/reactjs • "VirtualDOM Advent Calendar 2014 - Qiita" http://qiita.com/advent-calendar/2014/ virtual-dom
おつかれさまでした