68048


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

[Getting Started – React](https://ja.reactjs.org/docs/getting-
started.html#try-react) に

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

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

[code]

    <!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>
    
[/code]

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

  * [JSX の導入 – React](https://ja.reactjs.org/docs/introducing-jsx.html)
  * [Add React to a Website – React](https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-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.js` と `text/babel`
を使うことでいい感じに動くんだな（ただし本番では使わない）」と理解したのですが....

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

[code]

    <!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>
    
[/code]

加えて、下記のように

[code]

    <!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>
    
[/code]

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

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

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

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

Chromeで試しています。


CC BY-SA 4.0
2020-06-27T00:06:50.597
68045
2020-06-27T01:28:55.260
2020-06-27T01:04:18.907
9008
9008
question
javascript reactjs babeljs react-jsx
text/babel とはなんですか？


MDNの[`<script>`要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#:%7E:text=type)のドキュメントを読むと

> `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タグ](https://github.com/babel/babel/blob/eea156b2cb8deecfcf82d52aa1b71ba4995c7d68/packages/babel-
standalone/src/transformScriptTags.js#L192)など)をテキストとして読み込み、パース、トランスパイル、実行をしてくれます。これによってscriptタグ内にJSコードを書くのと同様に実行できるわけです。


CC BY-SA 4.0
2020-06-27T01:21:45.633
68048
2020-06-27T01:28:55.260
2020-06-27T01:28:55.260
2376
2376
68045
answer