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
560
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
120
エンジニアと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
知られざるprops命名の慣習 アクション編
uhyo
11
2.7k
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
130
Browser
recruitengineers
PRO
5
920
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
150
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
130
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.4k
トヨタ生産方式(TPS)入門
recruitengineers
PRO
4
640
Claude Code x Androidアプリ 開発
kgmyshin
1
600
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
300
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
450
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
140
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
We Have a Design System, Now What?
morganepeng
53
7.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Documentation Writing (for coders)
carmenintech
73
5k
Thoughts on Productivity
jonyablonski
69
4.8k
Done Done
chrislema
185
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Writing Fast Ruby
sferik
628
62k
Unsuck your backbone
ammeep
671
58k
Speed Design
sergeychernyshev
32
1.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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
͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·͍ͨ͠