Masayan tech blog.

  1. ブログ記事一覧>
  2. Reactチュートリアル(初級～中級)：Part5

Reactチュートリアル(初級～中級)：Part5

公開日

環境

  • windows10
  • DockerDesktop for Win 3.5.x
  • node 16.13.1
  • npm  8.1.2
  • TypeScript 4.5
  • React 17.0.1
  • Next.js 12.0.7
  • Recoil 0.5.2
  • VsCode
  • gitbash 2.32.0.1

Typescript

ReactはデフォルトでTypescriptをサポートしているので、相性抜群です。型定義で安全なコンポーネント設計が可能

エントリーポイント用モジュール

エントリーポイント is 何?

  • 関連性のあるコンポーネントを1つのjsファイルでまとめてexportすることにより、importする側で簡潔にimportすることが可能なるテクニック
  • エントリーポイントではdefault exportされた各コンポーネントを、名前付きエクスポートを利用してエクスポートする

index.js

// エントリーポイント用のjsファイル

// frontend\next-web\src\components\atomic\Atoms\Select\SelectBox.jsx　を名前付きエクスポート
export { default as TextInput } from './TextInput/TextInput'

// frontend\next-web\src\components\atomic\Atoms\TextInput\TextInput.jsx を名前付きエクスポート
export { default as SelectBox } from './Select/SelectBox'
...割愛

StockEditForm.jsx

import { TextInput, SelectBox } from '../../Atoms/index' // まとめてimportできる

const StockEditForm = (props) => {
...省略

作成手順

  1. エントリーポイントとなるjsファイル(index.js)を作成する
  2. 関連するコンポーネントを、index.jsからexportする
  3. 使用する側のコンポーネントで{}の中でまとめてimportするだけ

分割代入

オブジェクトもしくは、配列の要素を分割して、一気に変数に代入できる

オブジェクト分割代入

const { imageUrl, id, name, url, expiryDate, number, stockType } = stock

setProductImageUrl(imageUrl) // stock.imageUrlみたいに記述しなくてもいい
setProductId(id)
setProductName(name)
setProductUrl(url)
setExpiryDate(expiryDate)
setNumber(number)
setStockType(stockType)

配列分割代入

const array = ["hoge", "foo", "var"]
const [one, two, three] = array
console.log(one)

// "hoge"

importの順番

以下の順にimportすると可読性が高まる

  • ビルトイン
    Reactでもとから使用できるReact Hooksなど
  • 外部
    外部ライブラリなどのコンポーネント
  • 内部
    Reactで作成したコンポーネント

styled-components

npmで事前にインストールしておく必要あり。

npm install --save styled-components

基本的な使い方

  • JavaScriptファイル内でスタイルを記述できる(スタイルシートの管理が不要)
  • ベースとなる要素(Button)を継承した要素(SubmitButton)を作成することも可能
import styled from 'styled-components'

const Button = styled.button`
    font-size: 1rem;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
`
const SubmitButton = styled(Button)`
    border: none;
    color: white;
    background: #83bfff;
`

const StockEditForm = (props) => {
  return (
    <form
      ...割愛 
      <SubmitButton id="submit-button_stock-edit">確定</SubmitButton>
    </form>
  )
}

条件式のショートハンド

true時のみ処理を実行したい場合

true時のみ処理を実行したい場合は、&&条件を使う

const DisplayMode = () => {
    const displayModeState = useContext(DisplayModeContext)
    return (
        <>
            {displayModeState.isEditMode && ( // true時の処理のみ記載
                <div
                    class="bg-blue-100 border border-blue-500 text-blue-700 px-2 py-2 rounded w-20"
                    role="alert"
                >
                    <p class="font-bold text-center">編集中</p>
                </div>
            )}
        </>

true時とfalse時の処理を分けて記載したい場合

true時とfalse時の処理を分けて記載したい場合は、三項演算子を使う

const DisplayMode = () => {
    const displayModeState = useContext(DisplayModeContext)
    return (
        <>
            {displayModeState.isEditMode ? ( // true時の処理
                <div
                    class="bg-blue-100 border border-blue-500 text-blue-700 px-2 py-2 rounded w-20"
                    role="alert"
                >
                    <p class="font-bold text-center">編集中</p>
                </div>
            ) : something } // false時の処理
        </>
    )
}

複雑な条件

  • オブジェクトリテラルによる、switch分の置き換えが可能。
  • ケースの数が少ない場合はスイッチのほうが処理が高速だが、ケースの数が増えるとオブジェクトリテラルでの単一のルックアップがより高速
  • switchよりも条件が増えたときのメンテナンスが容易
// 例えば、propsで渡ってくるkeyの値によって表示させるvalueを切り替えたい場合
const TData = (props) => {
    
    const stockTypes = {
      0: '食料品',
      1: '台所用品',
      2: '掃除用品',
      9: 'その他'
    }
    return <td>{ stockTypes[props.key] }</td>
}

falsyな値の場合のデフォルト値を指定したい場合

  • Javascriptにおけるfalsyな値は全部で8つ
    ・false
    ・0
    ・-0
    ・0n
    ・""
    ・null
    ・undefined
    ・NaN
  • 例えば、parseIntはfalsyな値を引数として受け取ると、NaN(非数)を返してしまうが、
    あらかじめ以下のようにfalsyな値の場合のデフォルト値を設定できる
console.log(parseInt("")|| 0)
console.log(parseInt(false)|| 0)
  • 余談だが、上記のような処理を頻繁に使用するようであれば、以下のようにユーティリティ関数として定義しておくのも一つの手かと思われる
class StringUtil {
    /**
     * @param  {string} str
     * @return  {number}
     */
    static toInt = (str) => {
        return parseInt(str) || 0
    }
}

export default StringUtil

まとめ

いかがでしたでしょうか。本記事では、全5部構成でReactの基礎知識や知っておくと便利なTIPSについて紹介しており、そのPart5の内容になります。対象者としてはReactの初学者～中級者を対象としており、Reactの基本的な書き方は知っているが、細かい処理や仕組みについては理解できていないという方には役に立つのではないかと思います