Reactページの読み込みが終わるまでの間ローディングを表示する

JavaScript

2022.06.17 2021.03.09

たろ

ReactでWebAPIやちょっぴし重めのページの表示中の間にローディングってどうやって表示するの？

こんな悩みにお答えします。

本記事の内容

Reactでローディング画面を表示する方法
ポイントは三項演算子を使った実装
三項演算子部分ではReactの状態管理を活用

ページ読み込み中のローディング画面を React の状態管理を使い実装してみました。

実装時に使ったコードと実際のローディング（スピナー）画面も閲覧できるようにしていますので、最後まで読んでくれると嬉しいです。

環境
React ローディング表示のサンプルコード
検証
追記2022.6.17 関数コンポーネントを使ったローディング

環境

React
spinkit（ローディング表示するときに使うCSSのライブラリ）

React ローディング表示のサンプルコード

// loadingのStateがTrueのときに表示するコンテンツ
function Content() {
  return (
    <h1>Hello World!!</h1>
  )
}

// loadingのStateがFalseのときに表示するコンテンツ
function Spinner() {
  return (
    <div className="sk-plane sk-center"></div>
  )
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  componentDidMount() {
    // あえてローディング（スピナー）を表示するため5秒待機
    // 5秒後loadingのStateをTrueに変更
    setTimeout(()=>this.setState({loading: true}), 5000);
  }

  render () {
    return (
      <div>
        {this.state.loading ? (<Content/>) : (<Spinner/>) }
      </div>
    )
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

コードのポイントは下記の部分。

{this.state.loading ? (<Content/>) : (<Spinner/>) }

三項演算子を用い、 this.state.loading が TrueかFalseかで表示するコンテンツを切り替えています。

検証

この記事を読んでここまできていただいた方はすでに「Hello World」が表示されてしまっていると思います。

お手数ですが、ページを再読み込みしていただくとローディング画面が表示され、5秒後に「Hello World」が表示されます。

追記2022.6.17 関数コンポーネントを使ったローディング

import React, { useState } from 'react';
import ReactDOM from 'react-dom';


function App() {

    const [load, setLoad] = useState(true);

    const buttonAlert = () => {
        setLoad(false)
    }

    return (
        <div className="App">
            <header className="App-header">
                Learn React App
            </header>
            <body>
                <div>
                    <p> {load ? "Loading" : "Show contents!!!"}</p>
                    <button onClick={buttonAlert}>ボタン</button>
                </div>
            </body>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

上記の例ではボタンを押すことでステートフックを更新してコンテンツの出しわけを行っています。

ローディングは三項演算子の条件切り替えてコンテンツを出し分ける実装が無難かと思います。

Reactの勉強は下記の書籍がおすすめです↓

マイナビ出版