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

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

新規登録して質問してみよう
ただいま回答率
86.02%
Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

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

mario_parallel
mario_parallel

総合スコア5

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

1274閲覧

投稿2020/10/01 16:37

まず最初に

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

json

1{ 2 "name": "react_practice", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "build": "webpack" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "@babel/core": "^7.11.6", 14 "@babel/preset-env": "^7.11.5", 15 "@babel/preset-react": "^7.10.4", 16 "babel-loader": "^8.1.0", 17 "webpack": "^4.44.2", 18 "webpack-cli": "^3.3.12" 19 }, 20 "dependencies": { 21 "react": "^16.13.1", 22 "react-dom": "^16.13.1" 23 } 24}

webpack.config.js

JavaScript

1module.exports = { 2 // モード値を production に設定すると最適化された状態で、 3 // development に設定するとソースマップ有効でJSファイルが出力される 4 mode: "production", 5 // メインとなるJavaScriptファイル(エントリーポイント) 6 entry: "./src/index.js", 7 // ファイルの出力設定 8 output: { 9 // 出力ファイルのディレクトリ名 10 path: `${__dirname}/dist`, 11 // 出力ファイル名 12 filename: "main.js", 13 }, 14 module:{ 15 rules:[ 16 { 17 // 拡張子 .js の場合 18 test:/.js$/, 19 use:[ 20 { 21 // Babel を利用する 22 loader: "babel-loader", 23 options: { 24 presets: [ 25 // プリセットを指定することで、ES2020 を ES5 に変換 26 "@babel/preset-env", 27 // React の JSX を解釈 28 "@babel/react" 29 ], 30 }, 31 }, 32 ], 33 }, 34 ], 35 }, 36};

src/index.js

JavaScript

1import React from "react"; 2import ReactDOM from "react-dom"; 3 4 5let dom = document.querySelector('#root'); 6 7const msg1 = { 8 fontSize: "24px", 9 fontWeight: "bold", 10 padding: "16px", 11 backgroundColor: "royalblue", 12 marginBottom: "16px" 13}; 14 15const msg2 ={ 16 fontSize: "14px", 17 fontWeight: "nomal", 18 padding: "16px", 19 backgroundColor: "orchid" 20}; 21 22 23function Welcome(props){ 24 return <p style={props.style}>いらっしゃい!{props.name}さん</p>; 25} 26 27function Ara(props){ 28 return <p style={props.style}>あら、{props.name}さんも来てたの……?</p>; 29} 30 31let el = ( 32 <div> 33 <Welcome style={msg1} name="良彦" /> 34 <Ara style={msg2} name="良子" /> 35 </div> 36); 37 38ReactDOM.render(el, dom);

index.html

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>React</title> 6<!-- 7 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> 8 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> 9--> 10 <script src="./dist/main.js"></script> 11 12</head> 13<body> 14 <main> 15 <h1>webpack+Babel+Reactの作例</h1> 16 <div id="root"> 17 Wait... 18 </div> 19 </main> 20</body> 21</html>

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

イメージ説明

イメージ説明

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

イメージ説明

困っています

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

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

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

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

回答1

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 01:32

Zomathi

総合スコア26

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

mario_parallel

2020/10/02 02:06

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

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

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。