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

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

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

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

React.js

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

Q&A

解決済

2回答

8111閲覧

関数の実行時にページをリロードする

gnx_vw903

総合スコア74

JavaScript

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

React.js

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

0グッド

1クリップ

投稿2019/05/09 04:06

前提・実現したいこと

Reactで開発を行っており、ある関数の実行時にページをリロードさせたいです。

該当のソースコード

ですがどのように実装すれば良いか調べてもわかりませんでした。

js

1import React, { Component } from 'react' 2 3class App extends Component { 4 5 handleButton = async () => { 6 7 } 8 9 render() { 10 return ( 11 <Button onClick={this.handleSetFilter}>リロード</Button> 12 ); 13 } 14 } 15 16 export default App;

仮に上記のようなコードだった場合、なにを書けばButtonをクリックした時にリロードが実行できますでしょうか?
よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

まずリロードの定義に関して描く必要があります。
リロードの定義ってなんじゃ?説明していきましょう。

一般的にリロードというのはF5キーを叩いてWebサーバからHTMLファイルを受け取り直して
そのHTMLファイルに従って画面構成を作り直すというものを指します。

しかし、JSフレームワークやJSフレームワークで構築したSPAでそのリロードは完全に悪手です。
HTMLファイルそのものは殺風景なあれですよね。
そこからは全てJavaScript起動によりReactというJSフレームワークを実行し、
JSXファイルに従ってページ構成を作り直すということを指します。

つまり、これを1からやるのは、テンプレートによる差分書き換えで低コストでぱぱっと画面遷移するSPAの目的からは大きくハズレたものになります。
なので、JSフレームワークでF5リロードと同じ事はしてはいけません。

それでもいいならJavaScriptのグローバル変数領域にlocationというオブジェクトがあるので、
reloadメソッドを実行すればリロードされます。

JavaScript

1location.reload()

JSフレームワーク流儀に従ったリロードというのは、

AjaxでWebサーバに最新の情報を問い合せて、
JSフレームワーク世界の値を最新の情報で上書きしてやることで、
表示されているDOMの中身を最新のもので描画し直すことを指します。

そのためには何の情報を全て揃えれば「リロード出来た」とみなしても構いませんか?
これの定義が第一段階になります。


しかしReactそのものは親子のコンポーネント感でstateを受け渡しすることしか出来ません。
なので、ひ孫の孫のコンポーネントのボタンをクリックしたらReact世界全体のコンポーネントを最新にするため、
あちこちのstateのやり取りを書く事になり、端的に言えば「あなた死ぬわよ」。

そこで、グローバル領域にstate置き場を作って管理します。
このやり方でReactでメジャーになっているstate管理用ライブラリがReduxです。

流れはこんな感じになるでしょう。

  • 現状のReactをReduxによるstate管理で再構築しなおす
  • ButtonをクリックしたらAjaxを飛ばしてWebサーバから最新の情報を取得しなおす
  • データを受け取ったらReduxのルールに従ってstateを更新
  • 後はReactとReduxが協力してDOMツリーを最新の状態にリフレッシュしてくれる

React+Reduxは超メジャーなので、
日本語訳された記事やチュートリアルがそこらじゅうにあるのでちょっと調べれば入門出来ると思います。
頑張ってくださいね。

投稿2019/05/09 04:25

miyabi-sun

総合スコア21158

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

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

gnx_vw903

2019/05/09 06:00

ありがとうございます。もう一度勉強し直します!
guest

0

location.reload()を指定してはどうでしょうか?

投稿2019/05/09 04:11

yambejp

総合スコア114583

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

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

gnx_vw903

2019/05/09 04:16

Unexpected use of 'location' となってしまいます。
gnx_vw903

2019/05/09 04:24

window.location.reload()で実装できました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問