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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

React.js

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

Q&A

0回答

414閲覧

Material-UIを使いたい【Uncaught ReferenceError: require is not defined 】

shukonda

総合スコア13

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

React.js

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

0グッド

0クリップ

投稿2017/11/02 05:40

編集2022/01/12 10:55

###前提・実現したいこと
Java(Spring Boot)+Reactでアプリケーションを実装しています。

###発生している問題・エラーメッセージ
Material-UIを使うため、コマンドラインから必要なものをnpm installし、jsファイルにimportしたところ、ブラウザのコンソールに"Uncaught ReferenceError: require is not defined"というエラーが出てしまいました。
(参考:https://codezine.jp/article/detail/10074)

###該当のソースコード

js

1import getMuiTheme from 'material-ui/styles/getMuiTheme'; 2import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 3import injectTapEventPlugin from 'react-tap-event-plugin'; 4injectTapEventPlugin(); 5import { AppBar, MenuItem, Drawer } from 'material-ui'; 6 7var request = window.superagent; 8 9class Body extends React.Component { 10 11 constructor() { 12 super(); 13 this.state = { 14 data: [] 15 }; 16 } 17 18 fetchData () { 19 request 20 .get('/ac/video/get-all-json') 21 .set('Content-Type', 'application/json') 22 .end((err, res) => { 23 console.log(res.text);//レスポンス 24 //レスポンスがJSONの場合 25 console.log(res.body);//ここにparse済みのオブジェクトが入る 26 if (err) { 27 console.log('error') 28 } 29 this.setState({ 30 data: res.body 31 }) 32 }) 33 } 34 35 componentDidMount() { 36 this.fetchData() 37 } 38 39 render() { 40 return ( 41 <ul> 42 {this.state.data.map((item) => { 43 return (<li>{item.bandName}</li>) 44 })} 45 </ul> 46 ) 47 } 48} 49 50//ボディの定義 51class Header extends React.Component { 52 render() { 53 return ( 54 <MuiThemeProvider> 55 <div> 56 <Drawer 57 docked={false} 58 width={200} 59 open={this.props.open} 60 onRequestChange={() => this.props.onToggle()} 61 > 62 <MenuItem>React</MenuItem> 63 <MenuItem>Redux</MenuItem> 64 <MenuItem>React Router</MenuItem> 65 <MenuItem>Material UI</MenuItem> 66 <MenuItem>Electron</MenuItem> 67 </Drawer> 68 <AppBar 69 title="React Study" 70 onLeftIconButtonTouchTap={ () => this.props.onToggle()} 71 /> 72 </div> 73 </MuiThemeProvider> 74 ) 75 } 76} 77 78//フッターの定義 79class Footer extends React.Component { 80 render() { 81 return ( 82 <h1>フッター</h1> 83 ) 84 } 85} 86 87//コンポーネントを一つにまとめる 88class Index extends React.Component{ 89 render() { 90 return ( 91 <div> 92 <Header/> 93 <Body/> 94 <Footer/> 95 </div> 96 ) 97 } 98} 99 100ReactDOM.render( 101 <Index / >, 102 document.getElementById('root'));
jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Acappella</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <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> <script src="${pageContext.request.contextPath}/js/superagent.js"></script> <script type="text/babel" src="${pageContext.request.contextPath}/js/index.js"></script> </head> <body> <div id="root"></div> </body> </html>

###試したこと
webpack、Browserify等をインストールしてみましたが、上手く行きませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
Java8、React v15

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問