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
630
怖くない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
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
160
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
4
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
330
FizzBuzzで学ぶOCP
undefined_name
0
110
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.8k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.6k
モププロ@kintone開発チーム
undefined_name
1
590
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.2k
Usefull GitLens
undefined_name
3
810
Other Decks in Technology
See All in Technology
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
720
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1k
実践! AIエージェント導入記
1mono2prod
0
160
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
100
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
200
GitHub Copilot の概要
tomokusaba
1
130
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
生成AIでwebアプリケーションを作ってみた
tajimon
2
140
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
3
980
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Balancing Empowerment & Direction
lara
1
370
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Scaling GitHub
holman
459
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing for humans not robots
tammielis
253
25k
Why Our Code Smells
bkeepers
PRO
337
57k
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
͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·͍ͨ͠