Category: React.js

まずjsonデータを作成します。適当に株価で作ります。

{
	"stocks": [
		{"id": 4563, "name":"アンジェス", "price": 780},
		{"id": 9318, "name":"アジア開発キャピタル", "price": 9},
		{"id": 8256, "name":"プロルート丸光", "price": 283},
		{"id": 4755, "name":"楽天グループ", "price": 1132},
		{"id": 9984, "name":"ソフトバンクグループ", "price": 7179}
	]
}

### ReactのClassで書く場合

<script type="text/babel">
		class App extends React.Component{
			constructor(props){
				super(props)
				this.state = {
					isLoaded: false,
					error: null,
					stocks: []
				}
			}

			componentDidMount(){
				fetch("http://192.168.34.10:8000/data.json")
				.then(res=> res.json())
				.then(
					(result) => {
						this.setState({
							isLoaded: true,
							stocks: result.stocks
						});
					},
					(error) => {
					this.setState({
						isLoaded: true,
						error: error
					});
				})
			}

			render(){
				if(this.state.error){
					return <div>Error: {this.state.error.message}</div>
				} else if(!this.state.isLoaded) {
					return <div>Loading...</div>
				} else {
					return (
						<ul>
							{this.state.stocks.map( stock =>(
									<li key={stock.id}>
										{stock.name} {stock.price}
									</li>
								))}
						</ul>
					);
				}
			}

		}

		const target = document.getElementById('app');
		ReactDOM.render(<App />, target);
	</script>

### function(関数)で書く場合

function App(){
			const [data, setData] = React.useState([]);

			React.useEffect(() => {
				fetch("http://192.168.34.10:8000/data.json")
					.then((resoponse) => resoponse.json())
					.then((data) =>{
						setData(data.stocks);
				});
			}, []);

			return(
				<ul>
					{data.map( stock =>(
							<li key={stock.id}>
								{stock.name} {stock.price}
							</li>
						))}
				</ul>
			);
		}

		const target = document.getElementById('app');
		ReactDOM.render(<App />, target);

結果は同じですが、関数型の方が遥かに書きやすいですね。

これをbitcoinで実装する

function App(){
			const [data, setData] = React.useState([]);

			React.useEffect(() => {
				fetch("https://blockchain.info/ticker")
					.then((resoponse) => resoponse.json())
					.then((data) =>{
						setData(data.JPY);
				});
			}, []);

			console.log(data);

			return(
				<h1>ビットコイン価格(JPY):{data.last}</h1>
			);
		}

settime intervalでやりたい。

### useState
React本体に関数コンポーネント専用の保存領域を作成してもらい、そこにあるデータを読み書きできる

			const[count, setCount] = useState(0);
			return (
				<div onClick={()=>setCount(count+1)}>{count}</div>
			);

複数の値を扱うときは、複数のuseStateを使う

			const[count, setCount] = useState(0);
			const[isRed, setIsRed] = useState(false);

			return (
				<div 
					style={isRed? {color: 'red'}: null}
					onClick={() => {
						setCount(count+1);
						setIsRed((count+1)%3 === 0);
				}}
				>
			{count}
			</div>
			);

hooksをifやfor文の中で使用してはいけない

### useMemo
useMemoは単純に値を保存するためのhook

			const Calculator = () => {
				const calcResult = useMemo(() => expensiveFunc(), []);

				return <div>{calcResult}</div>
			}

### useCallback
useCallback(func, []) と省略した書き方ができる

			const Button = React.memo((props) => {
				return <button onClick={props.onClick}>Click Me</button>
			});

			const App = () => {
				const onClick = useCallback(() => alert('Hi!'), []);
				return <Button onClick={onClick}/>
			}

### useEffect
コンポーネントのレンダリング後に実行される

			const Message = () => {

				const elem = document.querySelector('#message');
				console.log(elem);

				useEffect(() => {
					const elem = document.querySelector('#message');
					console.log(elem);
					elem.innerText = "Hello!"
				});

				return <div id="message"></div>
			}

### useRef
useStateの参照版。useRefを使うことでReact本体側に値を保存でき、オブジェクトでラップされる

			const Message = () => {

				const divRef = useRef(null);

				useEffect(() => {
					divRef.current.innerText = 'Hello!';
				}, []);

				return <div ref={divRef}></div>
			}

実装したい内容に応じて、Hookを使い分けるってことか。

– Vueの場合はv-ifやv-showなどがあるが、Reactの場合は、if や for などの独自の制御構文は存在せず、mapメソッドや論理演算子で構造を表現する
– Vueではv-bind:classで記述するが、Reactの場合は className 属性を用いる
– イベントは@clickとかではなく、onClick={*} などとHTMLに似た構文が用いられる
– Vueではdata()メソッドの返却によって定義するが、ReactではuseStateフックを用いる
– フォーム処理では、vueではv-modelを扱うが、Reactでは自作する必要がある
– Componentはメソッドで書く必要はない
– computedは useMemoメソッドで似たような表現ができる
– フィルター機能はないので、関数で書く
– createdはないので、returnより前がcreatedにあたる
– useEffectフックを使って、マウント後に実行したい処理を登録する。再描画の処理も同様

とっつきやすさはvueの方があるが、reactは基本機能を提供しているので、使いこなしていけばreactも居心地が良くなりそう

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>⚛️ React todo</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css" />
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			background-color: rgb(240, 240, 255);
		}
		.tweet {
			display: flex;
			background-color: white;
		}
		.tweet:not(:last-child){
			border-bottom: 1px solid rgb(200, 200, 200);
		}
		.icon-container {
			width: 1.5em;
			font-size: 3em;
			padding: 0.2em;
		}
		.body-container {
			flex: 1;
			padding: 0.5em;
		}
		.account-name {
			color: gray;
		}
	</style>
</head>
<body>
	<div id="app"></div>

	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

	<script type="text/babel">
		function Tweet(props){
			return (
				<div className="tweet">
					<div className="icon-container">{props.icon}</div>
					<div className="body-container">
						<div className="status-display">
							<div className="display-name">{props.displayName}</div>
							<div className="account-name">@{props.accountName}</div>
						</div>
						<div className="content">{props.content}</div>
					</div>
				</div>
			)
		}

		function App(){
			return (
				<div>
					<Tweet 
						icon="👶"
						displayName="モカ"
						accountName="mocca"
						content="まあギャンブルだよね。期待はしてる。" 
					/>
					<Tweet 
						icon="🦸"
						displayName="いがこ"
						accountName="igaco"
						content="「稼ぐ力」の実態を見極めないと" 
					/>
				</div>
			);
		}

		const target = document.getElementById('app');
		ReactDOM.render(<App />, target);
	</script>
</body>

– 状態管理

const[value, setValue] = React.useState('defalt');
setValue('new value');

useStateはデフォルト値を与えると、前にコンポーネント関数を呼び出した時の値と、値を更新するための関数を返却

inputできるようにします。

	<script type="text/babel">
		function Tweet(props){
			const[liked, setLike] = React.useState(false);
			const toggleLike = React.useCallback(() => setLike((prev)=> !prev), [setLike]);

			return (
				<div className="tweet">
					<div className="icon-container">{props.icon}</div>
					<div className="body-container">
						<div className="status-display">
							<div className="display-name">{props.displayName}</div>
							<div className="account-name">@{props.accountName}</div>
						</div>
						<div className="content">{props.content}</div>
						<div className="status-action">
							<span onClick={toggleLike}>{liked ? '❤️':'♡'}</span>
						</div>
					</div>
				</div>
			)
		}

		function Timeline(props){
			const tweetList = props.tweets.map((tw) => (
				<Tweet
					key={tw.id}
					icon={tw.icon}
					displayName={tw.displayName}
					accountName={tw.accountName}
					content={tw.content}
				/>
			));

			return <div className="timeline">{tweetList}</div>;
		}

		function TweetInput(props){
			const textareaRef = React.useRef(null);

			const sendTweet = React.useCallback(() => {
				if(textareaRef.current){
					props.addTweet({
						id: new Date().getTime(),
						icon: '☠️',
						displayName: '龍神',
						accountName: 'dragon',
						content: textareaRef.current.value
					});
				}
			}, [textareaRef.current, props.addTweet]);

			return (
				<div>
					<div><textarea className="tweet-textarea" ref={textareaRef}></textarea></div>
					<div><button onClick={sendTweet} className="send-tweet">Tweet</button></div>
				</div>
			);
		}

		function App(){
			const [tweets, setTweets] = React.useState([
				{
					id: 0,
					icon: '👶',
					displayName: 'モカ',
					accountName: 'mocca',
					content: 'まあギャンブルだよね。期待はしてる。'
				},
				{
					id: 1,
					icon: '🦸',
					displayName: 'いがこ',
					accountName: 'igaco',
					content: '「稼ぐ力」の実態を見極めないと'
				},
			]);

			const addTweet = React.useCallback((tweet) => setTweets((prev)=> [tweet, ...prev]), [setTweets]);

			return (
				<div>
					<TweetInput addTweet={addTweet} />
					<Timeline tweets={tweets}/>
				</div>
			);
		}

		const target = document.getElementById('app');
		ReactDOM.render(<App />, target);
	</script>

なるほど〜　なんか色々できそうだね

useState, useEffectの他に、カスタムフックを自作することもできる

カスタムフックのメリット
– UIと切り離したロジック抽出
– コンポーネント関数の肥大化抑制
– 複数のフック呼び出しを理論的単位でまとめられる

<script src="https://unpkg.com/@popperjs/core@2"></script>
	<script src="https://unpkg.com/tippy.js@6"></script>

	<script type="text/babel">
		function useTooltip(id, content){
			React.useEffect(() => {
				tippy(`#${id}`, {content});
			}, [id, content]);
		}

		function App(){
			useTooltip('myButton', 'Hello world!');
			useTooltip('myParagraph', 'This is another tooltip.');

			return(
				<>
					<button id="myButton">Hover me</button>
					<p>
						<span id="myParagraph">Hover me too!</span> 
					</p>
				</>
			);
		}

		const root = document.getElementById('root');
		ReactDOM.render(<App />, root);
	</script>

APIからJSONデータを取得

const API = 'https://randomuser.me/api/?results=5&nat=us&inc=gender,name,email';

		function useUsers(){
			const [users, setUsers] = React.useState([]);

			React.useEffect(() => {
				(async () => {
					const response = await
					fetch(API).then(res => res.json());
					setUsers(response.results);
				})();
			},[]);

			return users;
		}


		function App(){
			const users = useUsers();
			return(
				<table>
					<thead>
						<tr>
							<td>Name</td>
							<td>Gender</td>
							<td>Email</td>
						</tr>
					</thead>
					<tbody>
						{users.map(user=>(
							<tr key={user.email}>
								<td>{user.name.title}. {user.name.first} {user.name.last}</td>
								<td>{user.gender}</td>
								<td>{user.email}</td>
							</tr>
						))}
					</tbody>
				</table>
			);
		}

副作用(side effect)とは、JSXを返却する処理およびその状態やイベントハンドラの定義以外の処理

非同期通信など
– DOMの存在を前提とした処理
– stateの更新
– 副作用はuseEffectの中で実行される必要がある
L 状態の更新により再レンダリングが発生するので、無限ループを避けるため、適切な場所で行う必要がある

function Component(){
	React.useEffect(()=>{

		someSideEffects();
	}, [])
}

useEffectはレンダリングが完了した後に実行される

function Component(){
	React.useEffect(()=>{

		new ExternalLibrary('.target-class');
	}, []);

	return (
		// jsx...
	);
}

状態の更新に関しても無限ループが発生しないようにする

function Component(){
	const[val, setVal] = React.useState(0);

	React.useEffect(() =>{
		setVal(123);
	}, []);
}

useEffect()はレンダリングが開始された直後に実行される
第二引数の配列を省略すると、コールバックはレンダリング後に毎回実行される

	React.useEffect(() =>{
		document.title = 'Hello world';
	}, []);

function Component(){
	const[val, setVal] = React.useState(0);

	React.useEffect(() =>{
		document.title = `Hello. ${firstName} ${lastName}`;
	}, [firstName, lastName]);
}

function App(){
			const[num, setNum] = React.useState(0);

			const handleClick = () => setNum(num + 1);

			return (
				<>
					<button onClick={handleClick}>{num}</button>
					{num % 2 === 0 && <Children />}
				</>
			);
		}

		function Children(){
			React.useEffect(() =>{
				console.log('hello');

				return() => console.log('bye');
			}, []);

			return <p>I am a child.</p>;
		}

### 非同期処理

function User({userId}){
	const [user, setUser] = React.useState(null);

	React.useEffect(() => {
		fetch('/api/users/${userId}')
			.then(res => res.json())
			.then(json => setUser(json));
	}, [userId]);

	return user ? <h1>Hello, {user.name}</h1> : <p>Loading...</p>
}

thenの代わりに　async/await構文を用いる場合は注意が必要

– DOM操作の例

function ImageSlider({id, images}){
	const [swiper, setSwiper] = React.useState(null);

	React.useEffect(() => {
		const instance = new Swiper('#${id}', {
			// options...
		});
		setSwiper(instance);
	}, [id]);

	React.useEffect(() => {
		swiper.update();
	}, [images]);

	return (
		<div id={id} className="swiper-container">
			<div className="swiper-wrapper">
				{images.map(image => (
					<div key={image.id} className="swiper-slide">
						<img src={image.url} alt={image.title} />
					</div>
				))}
			</div>
		</div>
	);
}

非同期処理の場合は、TimeIntervalで実装できるのだろうか。。。
何か道が遠いな。

state と onChange でstateを更新する
L useStateで初期値を設定している

		function App(){
			const [name, setName] = React.useState('Jhon');

			const handleChange = e => setName(e.target.value);

			return(
				<>
					<h1>Hello, {name}</h1>
					<input value={name} onChange={handleChange} />
				</>
			);
		}

textareaもinputと同じ

<textarea value={val} onChange={handleChange} />

– radioボタンを使う場合

		function App(){
			const [val, setVal] = React.useState('cat');

			const handleChange = e => setVal(e.target.value);

			return(
				<>
					<label>
						<input
							type="radio"
							value="cat"
							onChange={handleChange}
							checked={val == 'cat'}
						/>
						猫
					</label>
					<label>
						<input
							type="radio"
							value="dog"
							onChange={handleChange}
							checked={val == 'dog'}
						/>
						犬
					</label>
					<p>Your Choice: {val}</p>
				</>
			);
		}

– checkbox
L 配列の場合はuseStateのところで[”]とする
L stateは変更できず、val.push(e.target.value)とはできない

function App(){
			const [val, setVal] = React.useState(['js']);

			const handleChange = e => {
				if(val.includes(e.target.value)){
					setVal(val.filter(item => item !== e.target.value));
				} else {
					setVal([...val, e.target.value]);
				}
			};

			return(
				<>
					<label>
						<input
							type="checkbox"
							value="js"
							onChange={handleChange}
							checked={val.includes('js')}
						/>
						JavaScript
					</label>
					<label>
						<input
							type="checkbox"
							value="python"
							onChange={handleChange}
							checked={val.includes('python')}
						/>
						Python
					</label>
					<label>
						<input
							type="checkbox"
							value="java"
							onChange={handleChange}
							checked={val.includes('java')}
						/>
						Java
					</label>
					<p>Your Choice: {val.join(', ')}</p>
				</>
			);
		}

以下のように書くこともできる

			const initialVal = {js: true, python: false, java: false};
			const [val, setVal] = React.useState(initialVal);

			const handleChange = e => {
				const newVal = Object.assign({}, val, {
					[e.target.value] : !val[e.target.value]
				});
				setVal(newVal);
			};

– select box
L onChangeとするところなどほぼ同じですね

function App(){
			const [val, setVal] = React.useState('react');

			const handleChange = e => setVal(e.target.value);

			return(
				<>
					<select value={val} onChange={handleChange}>
						<option value="react">React</option>
						<option value="vue">Vue.js</option>
						<option value="angular">Angular</option>
					</select>
					<p>Your Choice:{val}</p>
				</>
			);
		}

– コンポーネントのイベント処理

function Tab({ onChange }){
			return (
				<ul>
					<li onClick={()=> onChange(1)}>React</li>
					<li onClick={()=> onChange(2)}>Vue.js</li>
					<li onClick={()=> onChange(3)}>Angular</li>
				</ul>
			);
		}

		function App(){
			const [tab, setTab] = React.useState(1);

			const handleChange = val => setTab(value);

			return(
				<>
					<Tab onChange={handleChange} />

					<div hidden={tab !== 1}>
						A JavaScript library for building user interfaces
					</div>
					<div hidden={tab !== 2}>
						The Progressive JavaScript Framework
					</div>
					<div hidden={tab !== 3}>
						One framework. Mobile &amp; desktop.
					</div>
				</>
			);
		}

React.useState()の使い方は何となくわかってきたのう

Reactコンポーネントでも親子関係を持つと考えられる

<Parent>
	<ChildOne />
	<ChildTwo>
		<Baby />
	</ChildTwo>
</Parent>

props: 親から子へ渡される属性値　※子コンポーネントで変更できない
state: 子の内部状態 ※親コンポーネントから参照・変更できない
L stateが更新されるとstateを持つコンポーネントが再レンダリングされる

### props
外部から渡される属性値は、propsと呼ぶ

<Component
	string="this is string"
	number={123}
	bool={true}
	array={[9,8,7]}
	object={{ hello: 'world'}}
	func = {a=> a*2}
	variable={something}
/>

<button
	id="the-button"
	className="button is-primary"
	onClick={handleClick}
>Button</button>
<label htmlFor="the-id">Label</label>

<input
	type="text"
	id="email"
	arial-labelledby="the-label"
	aria-required="true"
/>

### イベント処理
イベントの処理は別に書く

const handleClick = () => {
	
}

const button = <button onClick={handleClick}>Click me</button>;

### カスタム属性
独自要素には自由にpropsを定義できる

<Component customProp={something} />
<Layout
	header={<Header />}
	content={<Content />}
	footer={<Footer />}
/>

<Panel narrow>...</Panel>

### state
コンポーネント内部でデータを管理したい場合は、useState関数(state)を使う
　　L useStateは更新されたデータを覚えていて、2回目以降はそちらを使う

		function CountButton(){
			const countState = React.useState(0);
　
			const count = countState[0]; // 状態
			const setCount = countState[1]; // 状態を更新するための関数

			const handleClick = () => setCount(count + 1);

			return <button onClick={handleClick}>{count}</button>;
		}

		const root = document.getElementById('root');


		ReactDOM.render(<CountButton />, root);

stateによる更新の影響範囲を確認

		function Parent(){
			const [num, setNum] = React.useState(0);

			const handleClick = () => setNum(num + 1);

			return(
				<>
					<p><button onClick={handleClick}>{num}</button></p>
					<p><Child num={num} /></p>
					<p><Child num={num} /></p>
				</>
			);
		}

		function Child({ num }){
			const [myNum, setMyNum] = React.useState(0);

			const handleClick = () => setMyNum(myNum + 1);

			return (
				<button className="child" onClick={handleClick}>
					{num + myNum}
				</button>
			);
		}

### フック
フックはReactの便利な機能を導入できるヘルパー関数
useStateはフックの一つ

なるほど、propsだけでなくuseStateを使って開発していくのね。
なんとなくイメージが沸きました。