ログイン機能で条件付きレンダリングを学ぶ

2024年3月29日 18:02

こんにちは、PR広報の山下です。
弊社では、エンジニアだけでなく、広報の私のような非エンジニアにも様々な業務に対応するため技術力を求められてます。
弊社の必須技術のReactを身につけるために、学習している内容をメモとして残せればと思います。

今回はログイン機能で条件付きレンダリングを学んでいきたいと思います。

条件付きレンダリングの基本

条件付きレンダリングは、JavaScriptの条件演算子（三項演算子）または論理演算子を使うことが多く使われるようです。これを使うことで、ある条件がtrueの場合にのみ特定のコンポーネントや要素を表示する等のようなことができます。

振り返りも含めて、条件演算子と論理演算子について軽く触れておきます。

条件演算子（三項演算子）

条件演算子は、条件 ? 式1 : 式2; の形式で、条件がtrueの場合は式1を、falseの場合は式2を返します。

function LoginButton({ isLogIn }) {
  return (
    <div>
      {isLogIn ? (
        <button>ログアウト</button>
      ) : (
        <button>ログイン</button>
      )}
    </div>
  );
}

論理演算子

ReactではAND(&&)演算子が使われるようです。これは、左側の式がtrueとされる場合にのみ、右側の式を使用します。

function WelcomeMessage({ isLogIn }) {
  return (
    <div>
      {isLogIn && <p>ようこそ、ユーザーさん。</p>}
    </div>
  );
}

エラーメッセージの表示やローディングのインジゲーターの表示とかで使えそうですね。

シンプルなログイン機能を作ってみる

ユーザーのログイン状態に基づいて異なるメッセージを表示するシンプルなログイン機能を作ってみましょう。

import { useState } from 'react'
import './App.css'

function App() {
  const [LogIn, setLogIn] = useState(false);

  const message = LogIn ? "ログイン済みです" : "ログインしてください";
  const buttonText = LogIn ? "ログアウト" : "ログイン";
  const handleClick = LogIn ? () => setLogIn(false) : () => setLogIn(true);

  return (
    <>
   　　  <h1 className="title">{message}</h1>
      <button className="button" onClick={handleClick}>
    　　　　  {buttonText}
      </button>
    </>
  );
}

export default App

こんな感じで基本的に三項演算子でsetLogInがtureなのかfalseなのかを判別を行い、それに合わせてmessageやbuttonTextの判別するというものにしています。

フォームを

さいごに

Reactの学習を通してJavaScriptの理解も深まってきました。
次回はログイン機能の応用として、フォームやバリデーション機能を実装していきたいと思います。

bluecodeで一緒に働きませんか？

bluecodeはsystemではなくlifestyleを開発する会社です。
エンジニアやプロジェクトマネージャーをフルタイムからスポットまで様々な働き方で採用を行っております。
釣り人には嬉しい『釣り補助』という制度もございます！
気になった方は、ぜひ一度HPをご覧ください！