CDNのReactでMateril-UI(MUI)を使う方法

記事内に広告が含まれています。

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

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

この記事ではCND版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)コンポーネントを宣言するだけで、簡単に表示することが可能になります。

スポンサーリンク
スポンサーリンク
【PR】
React学習のおすすめの本
【PR】
Javascriptの学習におすすめの本
JavaScript
スポンサーリンク
タイトルとURLをコピーしました