JSXでStyle属性を指定する方法【React.js入門#2】

2022年10月21日

みやちゃ

皆さんこんにちは、みやちゃです！

物理とプログラミングについて解説しています！

こちらの記事で、Railsのアプリケーション開発からRspecのテスト、herokuにデプロイまで解説しています！

今回はReact.js入門の第2弾です！

JSXのStyle属性の指定方法をご紹介します。

今回は

JSXでStyle属性を指定する方法

この記事を読むと

JSXでstyle属性を指定できるようになります！

React.jsで文字列を表示

まずは以下のコードを見てください。

文字だけを表示しているもので、スタイルは何も指定していません。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(
        getDOM(),
        document.getElementById('root')
      )
      function getDOM() {
        return (
          <div>
            <p>コクリコ坂から</p>
          </div>
        )
      }
    </script>
  </body>
</html>

ReactDOM.renderの第一引数に、getDOM()関数を渡しています。

その後functionでgetDOMの中身を定義しています。

上記のプログラムをブラウザで表示すると、以下のようになります。

スタイルを何も指定していないので、当然ただ文字列が表示されているだけです。

この文字列にスタイルを指定していきましょう。

オブジェクトでスタイルを指定

JSXでは、CSSのスタイルをオブジェクトのプロパティに指定することで、スタイルを指定します。

書き方にも２種類あり、「CSS形式」と「Javascript形式」があります。

それぞれの書き方を見てみましょう。

CSS形式

まずはCSSスタイルで書いていきます。

以下のコードを見てください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(
        getDOM(),
        document.getElementById('root')
      )
      function getDOM() {
        const css = {
          "color": 'red',
          "background-color": 'blue',
          "font-size": '50px'
        }

        return (
          <div>
            <p style={css}>コクリコ坂から</p>
          </div>
        )
      }
    </script>
  </body>
</html>

追記したのは、１７〜２１行目の部分です。

cssという名前の変数を定義して、CSSのスタイルを代入しています。

２５行目で「style={css}」とすることで、スタイルを指定しています。

ブラウザでは以下のように変化しました。

Javascript形式

続いてJavascriptスタイルの書き方を見てみましょう。

以下のコードを見てください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(
        getDOM(),
        document.getElementById('root')
      )
      function getDOM() {
        const css = {
          color: 'red',
          backgroundColor: 'blue',
          fontSize: '50px'
        }

        return (
          <div>
            <p style={css}>コクリコ坂から</p>
          </div>
        )
      }
    </script>
  </body>
</html>

どこが変わったかお分かりでしょうか？

まずはダブルクォーテーションがなくなっています。

さらに「font-size」と記述していたのが、「fontSize」となっています。

Javascriptスタイルで記述する場合、小文字から始めて、大文字になるところで単語の区切りを示します。

Javascriptスタイルで書いても当然ブラウザでの変化は同じです。

まとめ

いかがでしたでしょうか？

今回は、JSXでstyle属性を指定する方法をご紹介しました！

みやちゃ

ここまでご覧いただきありがとうございます！