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

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

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

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

6846閲覧

Reactを用いたクリックに合わせて表示を変える機能のプログラムで、'is not defined no-undef'のエラーを解決したい。

knhoge

総合スコア2

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2021/02/23 11:28

前提・実現したいこと

現在ポートフォリオ作成のための勉強しており、React.jsでReduxを導入してボタンをクリックするとステートが変更されるコードを記述しております。
参考書を見ながら記述しており、ブラウザ上で表示する際に以下のエラーが起きました。

発生している問題・エラーメッセージ

Failed to compile. src/App.js Line 36:3: 'style' is not defined no-undef Line 55:3: 'style' is not defined no-undef Search for the keywords to learn more about each error.

該当のソースコード

JavaScript

1import React,{ Component } from 'react'; 2import './App.css'; 3import { connect } from 'react-redux'; 4 5function mappingState(state){ 6 return state; 7} 8 9class App extends Component{ 10 constructor(props){ 11 super(props); 12 } 13 render(){ 14 return( 15 <div> 16 <h1>Redux</h1> 17 <Message /> 18 <Button /> 19 </div> 20 ); 21 } 22} 23App = connect()(App); 24 25class Message extends Component{ 26 style = { 27 fontSize:"20pt", 28 padding:"20px 5px" 29 } 30 render(){ 31 return( 32 <p style={this.style}> 33 {this.props.message}: {this.props.counter} 34 </p> 35 ); 36 } 37} 38Message = connect(mappingState)(Message); 39 40 41class Button extends Component{ 42 style = { 43 fontSize:"16pt", 44 padding:"5px 10px" 45 } 46 constructor(props){ 47 super(props); 48 this.doAction = this.doAction.bind(this); 49 } 50 doAction(e){ 51 if (e.shiftKey){ 52 this.props.dispatch({type:'DECREMENT'}); 53 }else{ 54 this.props.dispatch({type:'INCREMENT'}); 55 } 56 } 57 render(){ 58 return( 59 <button style={this.style} onClick={this.action}>click</button> 60 ) 61 } 62} 63Button = connect()(Button); 64 65export default App;

試したこと

  • Reduxを導入する前までは、コンポーネントクラスにcss情報をオブジェクトにしてJSXにstyleを反映させることはできていたので、プロジェクトを作り直して再度Reduxを導入。

 →同じエラー

  • スペルミスかと思い参考書の配布用ソースコードで、VSコードのCompare Active File with Clipbordで検証後、各所スペースの有無が見られたため、配布用ソースコードからindex.jsとApp.jsに対してコードをコピペして実行。

 →同じエラー

  • 参考書で使用しているNode.js/Reduxのバージョンが現在のバージョン仕様が大きく異なり記述規則が違うのかと思い、バージョンによる変更内容を調べる。

参考書:node-10.14.0 redux-4.0.1 _ 自分:node-14.15.4 redux-4.0.5
→仕様変更を見つけられず。

補足情報(FW/ツールのバージョンなど)

  • node-14.15.4
  • redux-4.0.5
  • macOSを使用
Reduxを導入する際に用いたコマンド
  • npm install --save redux
  • npm install --save react-redux

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

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

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

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

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

hoshi-takanori

2021/02/23 15:37

ソースをコピペして動かしてみましたが、とりあえずエラーは出ず、style も適用されてるように見えます。 ちなみに、参考書は何という本でしょうか?
knhoge

2021/02/23 15:48

ご回答いただきありがとうございます。 参考書は「React.js&Next.js超入門第1版」です。この本を参考にして同様のエラーが出たなどの情報は探してみましたが、ありませんでしたので私の環境設定に問題があるのでしょうか?
knhoge

2021/02/23 16:04

はい、ご提示いただいたリンク先からサンプルコードをダウンロードしております。 念の為再度index.jsとApp.jsにサンプルコードをコピペして実行しましたが同様のエラーが出ており、 0.3秒ほど正常に表示されてすぐに下記画面になります。 https://gyazo.com/7cc166c8aac41cd0c58a38f2ef77f6d1 ちなみに、プロジェクトの作成・reduxの導入は下記コマンドで行っております。 npx create-react-app react_app cd react_app npm install --save redux npm install --save react-redux まだ試してはいませんが、他のreduxを用いたサンプルコードで動作するかも確認しておきます。
hoshi-takanori

2021/02/24 00:12

その手順でちゃんと動きましたけど…。なお、参考書がだいぶ古いようなので、Hooks に対応した新しいものを使った方がいいかもしれませんね。個人的なお勧めは「りあクト!」です。https://oukayuka.booth.pm/
knhoge

2021/02/24 02:07

他のソースコードを試してみると同じようなエラーが出てきたので、私のコピペ作業に不備があるか、もろもろの環境要因がありそうですね。 hosi-takanori様おすすめの本も購入検討しておりましたが、同人であったので結局は他のものを選んでいました。これを機会に「りあクト!」での学習をしていきたいと思います。 あと、約2年前の書籍では情報が古いのですね。勉強になります、ありがとうございます。 余談ですが最終的な目的はRailsで作ったアプリのデザインをReactで行うというところなので、しっかりとReactの基礎を固めたいと思います。
hoshi-takanori

2021/02/24 07:54

「0.3秒ほど正常に表示されてすぐに下記画面になります。」というのが気になります。タブを閉じた状態から npm start してもそうなりますか? 環境については、たまにセキュリティソフトやネットワークドライブが悪さをすることもあるような。 同人誌はピンキリですが、たまに現場でバリバリその技術を使ってる (かつ説明が上手な) 人が書いてるのがあります。特に Web フロントエンドやモバイルは技術の進化が速いので、2 年前のものは役に立たなかったりしますね…。
knhoge

2021/02/24 11:22

タブを閉じ、http://localhost:3000へ接続した後にnpm startを実行すると解決しました! これからは動作確認を行う際にタブを閉じて過去のリソースが残らないようにして実行したいと思います。 余談ですが、「りあクト!」を早速拝読しております。webpackなどの説明が分かりやすく3部とも読みたいと思います。 この度はありがとうございます!
guest

回答1

0

自己解決

hoshi-takanori様のコメント・修正依頼にて解決致しました。

解決法

  • ブラウザのタブを閉じてnpm startを実行で解決。

仮説

  • 過去のリソースがキャッシュに残っていて邪魔していたのでは?

投稿2021/02/24 11:33

knhoge

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問