質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.81%

webpack+BabelでReactによるファイルをバンドルするも、記載していたコンポーネントが表示されない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 97

まず最初に

Reactを学習中の初心者でございます。

webpackを使い、Babelによる処理を加えられたJavaScriptファイルを生成し、それを読み込んだHTMLファイルをブラウザで表示させるのですが、「src/index.js」に記載していたコンポーネントが表示されません。

package.jsonとwebpack.config.jsの設定は、ics.media様の最新版で学ぶwebpack 4入門 - Babel 7でES2020環境の構築(React, Vue, Three.js, jQueryのサンプル付き)を参考にし、用意した「src/index.js」の中の記述は、掌田津耶乃『React.js&Next.js超入門』を参考にアレンジして書いてみたつもりです。

初心者ゆえ上手く言語化できず、申し訳ございません。
まずは準備した設定ファイルやコードをご覧いただきたく存じます。

「react_practice」ディレクトリの中はこのようになっております

イメージ説明

package.json

{
  "name": "react_practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

webpack.config.js

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "production",
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: "./src/index.js",
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js",
  },
  module:{
    rules:[
      {
        // 拡張子 .js の場合
        test:/\.js$/,
        use:[
          {
            // Babel を利用する
            loader: "babel-loader",
            options: {
              presets: [
                // プリセットを指定することで、ES2020 を ES5 に変換
                "@babel/preset-env",
                // React の JSX を解釈
                "@babel/react"
              ],
            },
          },
        ],
      },
    ],
  },
};

src/index.js

import React from "react";
import ReactDOM from "react-dom";


let dom = document.querySelector('#root');

const msg1 = {
  fontSize: "24px",
  fontWeight: "bold",
  padding: "16px",
  backgroundColor: "royalblue",
  marginBottom: "16px"
};

const msg2 ={
  fontSize: "14px",
  fontWeight: "nomal",
  padding: "16px",
  backgroundColor: "orchid"
};


function Welcome(props){
  return <p style={props.style}>いらっしゃい!{props.name}さん</p>;
}

function Ara(props){
  return <p style={props.style}>あら、{props.name}さんも来てたの……?</p>;
}

let el = (
  <div>
    <Welcome style={msg1} name="良彦" />
    <Ara style={msg2} name="良子" />
  </div>
);

ReactDOM.render(el, dom);

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React</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>
-->
  <script src="./dist/main.js"></script>

</head>
<body>
  <main>
    <h1>webpack+Babel+Reactの作例</h1>
    <div id="root">
      Wait...
    </div>
  </main>
</body>
</html>

ブラウザのコンソールで表示されたエラー内容

イメージ説明

イメージ説明

コマンドプロンプトにて表示されたメッセージ

イメージ説明

困っています

Reactは初心者であり、「オブジェクト」「クラス」などの新しいJavaScriptの概念はもとより「コンポーネント」「DOM」などの横文字の概念の理解も足りず、説明の仕方が変かもしれませんがご了承ください。

どなたか、先輩エンジニア様方で問題点のおわかりになる方はいらっしゃいますでしょうか?

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

このエラーは,「div#root が描画される前に document.querySelector('#root') を呼んでしまったから,dom === null になっている」のが原因です.HTML ファイルは上から順に読まれていくので,<script src="dist/main.js"> を div#root よりも後に置く必要があります.具体的には,</body> の直前に書くことが多いです.(詳しくは script タグ 位置 等で検索すると分かります.)

また,このエラーとは関係ないですが,ここで議論されている通りファイル名は index.js ではなく index.jsx にするべきです.(それに伴い,webpack.config.js 等の中身も変更します.)JS と JSX は厳密に異なるものなので.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/02 11:06

    回答ありがとうございます!
    div#rootが描画される前、すなわち存在しない、というわけで「対象がDOMではない」というメッセージが遠回しにコンソールに現れたのですね!
    基礎的なミスが原因であることが恥ずかしくもありますが、「src/index.js」の記載内容やwebpack.config.jsの内容にミスがあったわけではないのが嬉しいです。
    index.htmlのscriptタグ位置を変えて読み込むことで、画面にコンポーネントも表示されました。
    とても嬉しいです。
    大変感謝しております。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る