ホーム最近公開の記事

中の人

【react 力技】reactでscriptタグを挿入して処理する

公開: 2023-02-27 18:09
更新: 2023-04-05 23:07

4125

react 力技 useEffect innerHTML javascript

最近どう頑張ってもやりたいことが実現できず、力技で乗り切ったのでその紹介です。

【広告】

日本最大級のまなびのマーケット

IT専門転職エージェント＠PRO人【アットプロジン】

Beauty online studio SOELU(ソエル)

こんにちは！

中の人です

最近reactでわけわからーんとハマってしまい、scriptを直接埋め込むという力技に頼ったことがあったので紹介したいと思います。

動作している環境: https://ja.reactjs.org/docs/create-a-new-react-app.html

仕様

buttonを押すたびに色が変わるというシンプルな処理を実装します

実装

通常

まず基本的な実装方法です

import './App.css';
import {useState} from 'react';

function App() {

    let app_style = {
        position: 'absolute',
        top: '50%',
        left: '50%',
    };

    const initialButtonStyle = {
        color: 'initial',
    };

    const [button_style, setButtonStyle] = useState(initialButtonStyle);

    return (
        <div className="App" style={app_style}>
            通常
            <button style={button_style} onClick={() => setButtonStyle(button_style.color === 'red' ? {color: 'initial'} : {color: 'red'} )}>ボタン</button>
        </div>
    );
}

export default App;

多分こんな感じ？になるかと思います。

いい感じですね

力技

本題の力技の実装方法です

import './App.css';
import {useEffect} from 'react';

function App() {

    let app_style = {
        position: 'absolute',
        top: '50%',
        left: '50%',
    };

    // 👇 scriptを埋め込む処理
    let script = null;

    // 同じscriptが量産されるのを防ぐため同じscriptタグがある場合は処理しない
    if (document.querySelector('#crazy_script') === null) {
        script = document.createElement('script');
        script.id = 'crazy_script';

        // innerHTMLでやりたい内容を書く
        script.innerHTML = `
            let button = document.getElementById('button');
            button.addEventListener('click', function (e) {
                console.log('力技'); // 👈ちゃんと反応してるかデバッグ
                if (this.style.color !== 'initial') {
                    this.style.color = 'initial';
                } else {
                    this.style.color = 'red';
                }
            });
        `;
    }

    // reactのレンダリング後にscriptを埋め込みたいのでuseEffectで埋め込む
    useEffect(() => {
        if (script !== null) {
            document.body.appendChild(script);
        }
    })

    return (
        <div className="App" style={app_style}>
            力技
            <button style={{color: 'initial'}} id="button">ボタン</button>
        </div>
    );
}

export default App;

react使う意味ないですやん的なコードですが、こんな感じでscriptタグを無理やり埋め込んで実行することができます。