6

Reactのドキュメントを読み始めました。

Getting Started – React

自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。

とあるので、「このHTMLファイル」を開いてみると下記のようになっていました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
  </body>
</html>

ここでJSXについて知りたいと思い下記を読みました。

構文についての引用:

以下の変数宣言を考えてみましょう:

const element = <h1>Hello, world!</h1>;
このおかしなタグ構文は文字列でも HTML でもありません。

これは JSX と呼ばれる JavaScript の構文の拡張です。

JSXについての引用:

The quickest way to try JSX in your project is to add this tag to your page:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Now you can use JSX in any tag by adding type="text/babel" attribute to it. Here is an example HTML file with JSX that you can download and play with.

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your tags automatically.

なるほど、「babel.min.jstext/babel を使うことでいい感じに動くんだな(ただし本番では使わない)」と理解したのですが....

下記のように babel.min.js を剥がして、JSXだけ書いてもエラーになりません。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      <h1>aaaa</h1>
    </script>
  </body>
</html>

加えて、下記のように

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      console.log("AA
    </script>
  </body>
</html>

と明らかに console.log の構文をミスってみてもエラーになりませんでした。

text/babel を剥がすとどちらのパターンもエラーになりました。

text/babel とはいったい何でしょうか?

(babelはローカル環境でコンパイルして使ったことしかなかったのでこれは不思議です)

Chromeで試しています。

1 件の回答 1

7

MDNの<script>要素のドキュメントを読むと

type
スクリプトを表すタイプを指定します。この属性の値は、以下の種類のいずれかにします。

  • 省略または JavaScript の MIME タイプ: これはスクリプトが JavaScript であることを示します。 HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。過去のブラウザーでは埋め込まれている、あるいは (src 属性で) インポートされたコードのスクリプト言語を指定していました。JavaScript の MIME タイプは仕様書に掲載されています。
  • module: コードを JavaScript モジュールとして扱います。スクリプトの処理は、charset および defer 属性の影響を受けません。 module の利用についての情報は、 JavaScript モジュールをご覧ください。クラシックスクリプトとは異なり、モジュールスクリプトはオリジン間のフェッチに CORS プロトコルの使用を必要とします。
  • その他の値: このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。 src 属性は無視されます。

とあり、text/babelは「その他の値」に該当します。つまり、ブラウザはこれをただのデータフラグメントとして扱い、記述されたコードは無視します。babelのランタイムトランスパイラはこれ(text/babelを指定したscriptタグなど)をテキストとして読み込み、パース、トランスパイル、実行をしてくれます。これによってscriptタグ内にJSコードを書くのと同様に実行できるわけです。

1
  • なるほど。質問に書くのを忘れましたが、確かに console.log("AAAA") と書いても出力されず、不思議だなと思っていたのですが、単純に無視していたんですね。 Commented 2020年6月27日 1:27

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。