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
Nokogiri
April 16, 2017
Technology
2
640
怖くないReact
2017年4月19日 ReactHandon イベント向けのPPT
中で紹介しているレポジトリ
https://github.com/nokogiring/ReactLogoGenerator
Nokogiri
April 16, 2017
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
Zustandを用いた実践的状態管理
undefined_name
3
590
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
170
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
350
FizzBuzzで学ぶOCP
undefined_name
0
130
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.9k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.6k
モププロ@kintone開発チーム
undefined_name
1
600
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.3k
Other Decks in Technology
See All in Technology
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
Create Ruby native extension gem with Go
sue445
0
130
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
500
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
6
750
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
140
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
1
460
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Cult of Friendly URLs
andyhume
79
6.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
It's Worth the Effort
3n
187
28k
The World Runs on Bad Software
bkeepers
PRO
70
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
We Have a Design System, Now What?
morganepeng
53
7.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Transcript
ා͘ͳ͍React @nokogiri ॳ৺ऀ͚React ϋϯζΦϯ
Nokogiri Job: SIer I — JS , Ruby ,Java and
Design. ͡Ί·ͯ͠
Nokogiri Job: SIer I — JS , Ruby ,Java and
Design. ͡Ί·ͯ͠ https://nokogiring.github.io/
ͱΓ͋͑ͣReactʹ৮ͬͯΈΔ ReactͷϝϦοτΛΔ ≠DOMૢ࡞ͳJSΛΔ ࠓΓ͍ͨ͜ͱ
ͱΓ͋͑ͣReactʹ৮ͬͯΈΔ ReactͷϝϦοτΛΔ ≠DOMૢ࡞ͳJSΛΔ ࠓΓ͍ͨ͜ͱ ͳΜ͔ͦ͠͏ͱࢥ͍ͬͯΔ ReactͷڪාΛऔΓআ͘
ࠓΒͳ͍͜ͱ ։ൃڥߏஙͷखॱ ES2015ͷઆ໌ ଞͷϥΠϒϥϦͱͷൺֱ jQueryσΟεΓ
What’s React ?
FacebookͷJavascriptϥΠϒϥϦ એݴతɾίϯϙʔωϯτࢦɾҰֶͿͱͲ͜Ͱ ͔͚Δ ʮԾDOMʯʹΑΔߴͳϨϯμϦϯά What’s React ?
FacebookͷJavascriptϥΠϒϥϦ એݴతɾίϯϙʔωϯτࢦɾҰֶͿͱͲ͜Ͱ ͔͚Δ ʮԾDOMʯʹΑΔߴͳϨϯμϦϯά ͱʹ͔͘ྲྀߦͬͯΔ What’s React ?
None
Hello World
// ҙͷϑΥϧμʹҠಈ cd Desktop // Ϋϩʔϯ git clone https://github.com/nokogiring/ReactLogoGenerator.git //
தʹҠಈ cd ReactLogoGenerator // ϞδϡʔϧͷΠϯετʔϧ npm i // Script࣮ߦ npm start Hello World https://github.com/nokogiring/ReactLogoGenerator
Hello World ϒϥβͰ http://localhost:3000 ʹΞΫηε
ղઆ
~লུ~ <body> <div id="root"></div> <script src="./dist/bundle.js"></script> </body> ~লུ~ Hello World
index.html
// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';
import ReactDom from 'react-dom'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <div>Hello React World</div>, el ) Hello World src/index.js
// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';
import ReactDom from 'react-dom'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <div>Hello React World</div>, el ) Hello World src/index.js จࣈΛม͑ͨΓɺଞͷλάʹஔ͖͑ͨΓͯ͠Έ·͠ΐ͏ɻ EJWλάͷதʹɺλάΛೖΕͯΈ·͠ΐ͏
σΟϨΫτϦߏͱਐΊํ
σΟϨΫτϦߏͱਐΊํ
σΟϨΫτϦߏͱਐΊํ ϑΥϧμ ࡞ۀ༻ϑΥϧμ ىͱͳΔ+4 Θ͔Βͳ͚ΕɺΛݟ͍ͯͩ͘͞ɻ
Hello World 2
ίϯϙʔωϯτࢦ
// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';
import ReactDom from 'react-dom'; // Hello WorldΛΠϯϙʔτ import HelloWorld from './HelloWorld/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <HelloWorld />, el ) Hello World 2 src/index.js )FMMP8PSMEϞδϡʔϧͷ Πϯϙʔτ ඳը͢ΔରΛ )FMMP8PSMEʹมߋ
// ToDo // divλάʹ main ͱ͍͏ΫϥεΛՃ͠·͠ΐ͏ // h1ʹΠϯϥΠϯελΠϧͰ color :
tomato Λࢦఆ͠·͠ΐ͏ // JSXಛผͳϧʔϧ͕͋Δɻ // class => className // for => htmlFor // ΠϯϥΠϯελΠϧ style={{ xxxx: 'yyyyy' }} Ͱදݱ͠·͢ɻ <div> <h1>Hello World2</h1> </div> Hello World 2 src/HelloWorld/index.js
Hello World 2 ϒϥβJSΛߋ৽͢ΔͱࣗಈϦϩʔυ͠·͢ɻ ҎԼͷҎԼͷը໘͕ग़ΕOKͰ͢ɻ
ιʔεΛͬͯղઆ͠·͢ Hello World 2 src/HelloWorld/index.js
Page
// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';
import ReactDom from 'react-dom'; // PageΛΠϯϙʔτ import Page from './Page/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <Page />, el ) Page src/index.js 1BHFϞδϡʔϧͷ Πϯϙʔτ ඳը͢ΔରΛ 1BHFʹมߋ
Page ൛͜Μͳײ͡
Page src/Page/index.js import React, { Component } from 'react'; //
Todo1 // Header,Sidebar,Main,footerͷindex.jsΛΠϯϙʔτ͍ͯͩ͘͠͞ɻ
Page src/Page/index.js // Todo2 // Header,Sidebar,Main,footerͷॱʹҎԼͷdivͷதʹίϯϙʔωϯτΛॻ͍͍ͯͩ͘͞ɻ // SidebarͱMainΛ"contents"ͱ͍͏ΫϥεͷdivλάͰғ͍ͬͯͩ͘͞ɻ <div> </div>
Page src/Sidebar/Page/index.js const contentsList = ["News", "Blog", "SNS", "Recruit", "aaa",
"bbb"]; let viewList = []; // Todo // contentsListͷཁૉ viewListʹ <Item /> Λ֨ೲ͍ͯͩ͘͠͞ɻ // ͜ͷͱ͖ <Item title={ contentsListͷཁૉ } key={ contentsListͷཁૉ } /> // ͱ͍͏ܗͰɺtitleͱkeyʹcontentsListͷཁૉΛࢦఆ͍ͯͩ͘͠͞ɻ // ͜Ε͕Կ͔࣍ͷষͰઆ໌͠·͢ɻ return ( <div className="sidebar"> {viewList} </div> );
JSϑΝΠϧΛׂ͢Δ͜ͱͰɺඞཁͳػೳຖʹϑΝ ΠϧΛׂͰ͖ΔΠϝʔδ͕Ͱ͖ͨͣ ֎ଆ͔Βύϥϝʔλͱͯ͢͜͠ͱ͕Ͱ͖Δ HTMLͱJS͕ີ݁߹ Page
Props & State
Props & State ࣮ԋ
// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';
import ReactDom from 'react-dom'; // PropsStateΛΠϯϙʔτ import PropsState from './PropsState/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <PropsState defaultValue="Mastodon" />, el ) Props & State src/index.js 1SPQT4UBUFϞδϡʔϧͷ Πϯϙʔτ ඳը͢ΔରΛ 1SPQT4UBUFʹมߋ EFGBVMU7BMVFΛઃఆ
Props & State src/PropsState/index.js // Todo1 // textarea ͷ style
ʹ textAreaStyle ΛదԠ͍ͤͯͩ͘͞͞ɻ // textarea ͷ value ʹ this.state.text ΛదԠ͍ͤͯͩ͘͞͞ɻ // textarea ͷ onChange ʹ this._setValue ΛదԠ͍ͤͯͩ͘͞͞ɻ // Todo2 // "จࣈɿ" ͷޙΖʹ this.state.count Λग़ྗ͍ͯͩ͘͠͞ɻ // "resultɿ" ͷޙΖʹ this.state.text Λग़ྗ͍ͯͩ͘͠͞ɻ return ( <div className="main"> <h1>Props State Counter</h1> <input type="textarea" /> <span> จࣈ : </span> <p>result: </p> </div> );
Props & State src/PropsState/index.js constructor(props) { super(props); this.state = {
// Todo3 // textͷΛ "" => this.props.defaultValue ʹมߋ͍ͯͩ͘͠͞ɻ // countͷΛ 0 =>ɹthis.props.defaultValue.length ʹมߋ͍ͯͩ͘͠͞ɻ text: "", count: 0, } this._setValue = this._setValue.bind(this); }
Props & State src/PropsState/index.js // Πϕϯτϋϯυϥʔ // ೖྗϑΟʔϧυͷΛstateʹઃఆ͢Δ _setValue(e) {
// Todo4 // text, countʹ textarea ͷೖྗจࣈྻͱ count ͷೖྗจࣈྻΛೖΕ͍ͯͩ͘͞ɻ // textareaͷೖྗจࣈྻ e.target.value // textareaͷೖྗจࣈྻ e.target.value.length // ͰऔಘͰ͖·͢ɻ this.setState({ text: "", count: 0, }) }
ιʔεΛͬͯղઆ͠·͢ Props & State src/PropsState/index.js
Props => ֎෦͔Β͞ΕΔ Πϛϡʔλϒϧ(ޙͰมߋෆՄೳ) State => ίϯϙʔωϯτ෦Ͱཧ͢Δ ϛϡʔλϒϧ(ޙͰมߋՄೳ) Props &
State
PropsΛΠϯϙʔτ࣌ʹ͢͜ͱͰίϯϙʔωϯτ ͷதͰར༻Ͱ͖·͢ɻ React͕Stateͷͷมߋʹै͍ɺมߋલޙͷࠩ ͚ͩΛ࠶ඳը͍ͯ͠·͢ɻ Props & State
ReactDom.render( <div> <PropsState defaultValue="Mastodon" />, <PropsState defaultValue="Twitter" />, </div>, el
) Props & State src/index.js EJWͰғͬͯɺ 1SPQT4UBUFΛ̎ͭ͏ EFGBVMU7BMVFΛมߋͯ͠ΈΔ
LogoGenerator
ίϯϙʔωϯτΛ·͕ͨͬͯ εςʔτΛड͚͢
LogoGenerator ࣮ԋ
// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';
import ReactDom from 'react-dom'; // ίϯϙʔωϯτΛΠϯϙʔτ import LogoGenerator from './LogoGenerator/index' // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <div> <LogoGenerator /> </div>, el ) LogoGenerator src/index.js 1SPQT4UBUFϞδϡʔϧͷ Πϯϙʔτ ඳը͢ΔରΛ -PHP(FOFSBUPSʹมߋ
LogoGenerator src/LogoGenerator/index.js // Todo1 // logo ͷதͷ <Message></Message>ίϯϙʔωϯτʹҎԼͷϓϩύςΟʹཧ͍ͯ͠Δ // ಉ໊ͷStateΛηοτ͍ͯͩ͘͠͞ɻ(ώϯτ
hogehoge={this.state.hogehoge}) // backgroundColor // fontSize // fontfamily // textColor // Todo2 // <Message></Message>ίϯϙʔωϯτͷࢠͲͱͯ͠ // StateͰཧ͍ͯ͠Δ textValue ΛೖΕ͍ͯͩ͘͞ɻ // ࢠͲ(fugafuga)ʹड͚͢ํ๏<hogehoge>{this.state.fugafuga}</hogehoge> // hogehogeΫϥε this.props.children ͰfugafugaΛड͚औΓ·͢ɻ // ϩΰ const logo = ( <Message> </Message> )
LogoGenerator src/LogoGenerator/index.js Todo3 <Button>ίϯϙʔωϯτΛͬͯɺϩΰΛ০͢ΔϘλϯΛ࡞͍ͯͩ͘͠͞ɻ {/*Todo3ɹPlease fill me !*/} ͱ͍͏ՕॴΛ͏Ί͍ͯͩ͘͞ɻ <Button>ίϯϙʔωϯτʹɺname,
selectedName, handleClickΛϓϩύςΟͱ͍ͯͯͩ͘͠͠͞ɻ FontFamilyϘλϯͷ name names_FontFamily ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ FontFamilyϘλϯͷ selectedName stateͷ fontfamily Λઃఆ͍ͯͩ͘͠͞ɻ FontFamilyϘλϯͷ handleClick this._selectFontFamily ͔Βऔಘ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ name names_textColor ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ selectedName stateͷtextColor Λઃఆ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ handleClick this._selectTextColor ͔Βऔಘ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ name names_FontFamily ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ selectedName stateͷ fontfamily Λઃఆ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ handleClick this._selectBackGroundColor ͔Βऔಘ͍ͯͩ͘͠͞ɻ
ιʔεΛͬͯղઆ͠·͢ Props & State src/PropsState/index.js
ؔΛίϯϙʔωϯτʹpropsͱͯ͢͜͠ͱ͕Ͱ ͖·͢ɻstateͷཧ͕͍࣋ͬͯΔͷͰɺͷ stateΛߋ৽͢ΔؔΛࢠͲʹ͢͜ͱͰɺ͜Ͳ ͕ͷstateΛߋ৽Ͱ͖·͢ɻ LogoGenerator
͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·͍ͨ͠