CDNのReactでMateril-UI（MUI）を使う方法

Reactは通常Next.jsを使ってその中で使うのが一般的で簡単ですが、実験的にReactを試したりするには専用のCNDが用意されています。

CDN版はローカルに何もインストールすることなく、お手軽にReactを使えるのでちょっとした確認に最適です。

この記事ではCND版ReactにMaterial-UI（MUI）を組み込んでボタンなどの表示をさせてみます。

CDN版Reactの準備
Material-UI（MUI）コンポーネントの宣言
CDN版ReactでMaterial-UI（MUI）を使う
まとめ

CDN版Reactの準備

CDN版のReactを利用するには2つのスクリプトをCDNから読み込む必要があります。

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>

CDNとは
CDNはContent Delivery Networkの略で、「コンテンツ配信ネットワーク」の意味。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組みのこと

次にMaterial-UI（MUI）とスクリプト解析用にbabelを読み込みます。

<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

Material-UI（MUI）コンポーネントの宣言

CDN版ReactでMaterial-UI（MUI）コンポーネントを利用する場合はそのコンポーネントをimportの代わりに宣言する必要があります。

const { 
   Button             //Material-UI（MUI）のButtonコンポーネント
  ,Divider            //Material-UI（MUI）のDividerコンポーネント
  ,CircularProgress   //Material-UI（MUI）のCircularProgressコンポーネント
} = MaterialUI;

今回は実験でButtonコンポーネント、Dividerコンポーネント、CircularProgressコンポーネントを表示させてみます。

CDN版ReactでMaterial-UI（MUI）を使う

準備が完了したので、実際にButtonコンポーネント、Dividerコンポーネント、CircularProgressコンポーネントを表示させてみます。

基本はNext.jsで行うのと同じですが、前項で説明したように利用するMaterial-UI（MUI）コンポーネントを宣言する部分を追加しておきます。

<html>
  <head>
    <meta http-equiv="content-type" charset="utf-8">
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    <script type="text/babel">
      class App extends React.Component{
        render(){
          const { 
             Button             //Material-UI（MUI）のButtonコンポーネント
            ,Divider            //Material-UI（MUI）のDividerコンポーネント
            ,CircularProgress   //Material-UI（MUI）のCircularProgressコンポーネント
          } = MaterialUI;
          return(
           <div>
             <div>これはCDNを使ったReact & Materil-uiです。</div>
             <Button variant="contained" color="primary">Hello World</Button>
             <Divider />
             <CircularProgress />
           </div>
          )
        }
      }
      ReactDOM.render(<App />,document.getElementById('root'));
    </script>
  </head>
  <body>
    <div id="root">root</div>
  </body>
</html>

これで無事CND版のReactでMaterial-UI（MUI）を使ったコンポーネントを作成して表示することができるようになりました。

まとめ

CND版のReactでMaterial-UI（MUI）を使ったコンポーネントを作成するには専用のスクリプトをCDNから読み込めば利用するMaterial-UI（MUI）コンポーネントを宣言するだけで、簡単に表示することが可能になります。