IT the Best
Facebookが開発したJavaScriptライブラリReact.jsを使用して「トグルボタン」を作成しました。
また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。
これは、UIがどのような見た目かJavaScript自体に記述するためのものです。
React - ToggleButton
- 状態を持つコンポーネント
- 状態に応じて見た目が変わる
- JSX(Babel)を利用したJavaScript
作成物
コード
トグルボタン HTML CSS JS
<div id="root-react-togglebutton"></div>.switch{
cursor: pointer;
position: relative;
display: inline-block;
vertical-align: middle;
width: 50px;
height: 30px;
max-width: 100%;
background: white;
border-radius: 100em;
box-shadow: inset 0px 1px 1px 1px #d6d6d6, inset 0 -1px 1px 1px #ececec, inset 0 0 0px 2px #f5f5f5;
}
.switch::before{
content: "";
display: block;
position: absolute;
left: 5%;
top: 10%;
width: 50%;
height: 80%;
background: white;
border-radius: 100%;
box-shadow: -2px 2px 2px 0 #bbbbbb, 0px 0px 10px 0 #e4e4e4;
transition: all .2s;
}
.switch.on{
background: #00de00;
box-shadow: unset;
}
.switch.on::before{
margin-left: 40%;
box-shadow: 2px 2px 2px 0 #bbbbbb, 0px 0px 10px 0 #e4e4e4;
}"use strict";
class ToggleButton extends React.Component {
constructor(props) {
super(props);
this.state = {
on: props.on || false
};
}
clickHandler() {
this.setState({
on: !this.state.on
});
}
render() {
let className = this.state.on ? "switch on" : "switch";
return (
<div className={className} onClick={this.clickHandler.bind(this)}></div>
);
}
}
ReactDOM.render(
<ToggleButton on={true}></ToggleButton>,
document.querySelector("#root-react-togglebutton")
);
「setState」メソッドで状態(ON・OFF)を変えたあと、「render」メソッドが呼ばれ見た目が変わります。
サンプル
title index.html style.css index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部ファイル -->
<!-- react -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- babel -->
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="style.css">
<div id="root"></div>
<script type="text/babel" src="index.js"></script>
</body>
</html>.switch{
cursor: pointer;
position: relative;
display: inline-block;
vertical-align: middle;
width: 50px;
height: 30px;
max-width: 100%;
background: white;
border-radius: 100em;
box-shadow: inset 0px 1px 1px 1px #d6d6d6, inset 0 -1px 1px 1px #ececec, inset 0 0 0px 2px #f5f5f5;
}
.switch::before{
content: "";
display: block;
position: absolute;
left: 5%;
top: 10%;
width: 50%;
height: 80%;
background: white;
border-radius: 100%;
box-shadow: -2px 2px 2px 0 #bbbbbb, 0px 0px 10px 0 #e4e4e4;
transition: all .2s;
}
.switch.on{
background: #00de00;
box-shadow: unset;
}
.switch.on::before{
margin-left: 40%;
box-shadow: 2px 2px 2px 0 #bbbbbb, 0px 0px 10px 0 #e4e4e4;
}
"use strict";
class ToggleButton extends React.Component {
constructor(props) {
super(props);
this.state = {
on: props.on || false
};
}
clickHandler() {
this.setState({
on: !this.state.on
});
}
render() {
let className = this.state.on ? "switch on" : "switch";
return (
<div className={className} onClick={this.clickHandler.bind(this)}></div>
);
}
}
ReactDOM.render(
<ToggleButton on={true}></ToggleButton>,
document.querySelector("#root")
);
「Script」タグのtype属性が「text/babel」となっていますがこれは、タグ内のコードでJSXが使えるようにするためです。
type属性に有効でない値を設定することで、そのタグ内のコードはタダのテキストとして読み込まれます。
Babelのランタイムトランスパイラは、この属性があるタグ内のテキスト(JSXで書かれたJavaScriptコード)を正しいJavaScriptコードに変換して実行してくれます。
ただし、変換処理があるため全体的に処理が重くなるので、この方法は学習向けで本番環境には適していません。
この方法は学習やシンプルなデモの作成にはいいですが、これをそのまま使うとウェブサイトは重くなってしまい、本番環境には向きません。次のレベルに進む準備ができたら、先ほど追加した
<script>タグとtype="text/babel"属性は削除してしまいましょう。そして次のセクションに進み、JSX プリプロセッサを設定して<script>タグを自動変換するようにしましょう。
