IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【Reactで作る】iOSのスイッチのようなトグルボタン | javascript | react | jsx

f:id:Surprisedblog:20200824220145p:plain

 

 

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> タグを自動変換するようにしましょう。

https://ja.reactjs.org/docs/add-react-to-a-website.html

 

www.it-the-best.com