Rails×Reactで構成されたアプリケーションに対して git clone した後、環境構築しようとした際に、ものすごく時間がかかったので、同じミスをしないようにメモしておく。 結論 ()は必要に応じて ① Nodeのバージョンを指定 (② .nvmrcに希望のバージョンを指定) (③ .gitignoreに .nvmrcを追加) ④ gemfile.lock削除 ⑤ Railsのバージョンを指定 ⑥ Bundle install ⑦ Rails db:create ⑧ Rails db:migrate ⑨ npm ci ⑩ yarn -v(→ yarnがインストールされていなければ yarn install) ( rails webpacker:compile) ①について まずlatestなNodeを使用するとnode-gypのエラーが後々発生する可能性があるので、出来ればstableなバージョンをインストールして使用するべき。 (npmは基本自動で変更されるので合わせる必要なし) ②について 筆者は、Nodeバージョン管理にnvmを使用していたので以下のHPを参考にした。 引用：https://shinshin86.hateblo.jp/entry/2020/05/14/220149 ③について 今後gitでマージする際に、.nvmrcファイルをアップロードしないように、以下のソースコードをプロジェクト内の.gitignoreファイルに追加。 .gitignore /.nvmrc ④について 基本的にGemfile.lockを削除することは、基本的にNG。 だが、筆者がクローンしたプロジェクトは、mimemagic <= 0.3.5に依存しているRailsアプリであったため、どうしても⑤のbundle installに失敗してしまっていた。 以下のHP上での、「都合によりRailsをアップデートできない・したくない場合の操作」を実行しても、どうしても上手くいかなかったため、 ④→⑤の流れをするとなぜか上手くいった。 引用：https://hackmd.io/@mametter/mimemagic-info-ja ⑤について Gemfileにrailsのバージョンを指定。 ⑨について npm ciとは。 package-lock.json から依存関係をインストールするコマンド。 既に node_modules フォルダの中身があっても一旦削除してくれる。 依存関係の更新をせずに整合性チェックと依存パッケージのダウンロードのみを行い、 npm install より高速に動作し、CIで必要なことだけを行うのが、このコマンドである。 nodeを使用しているプロジェクトをgit cloneするときは、必ず必要になるコマンド 引用：https://qiita.com/mstssk/items/8759c71f328cab802670 ⑩について ローカルでサーバーを開いたときに、 ℹ ｢wdm｣: wait until bundle finished: / ...... などが出てきてフロント画面の描画が遅い時などは、このコマンドが必要になる場合がある。

react-routerの機能を使用する方法 遷移先へ値を受け渡す方法 import { useHistory } from 'react-router-dom'; const history = useHistory(); history.push({ pathname: '/foo', state: { bar: 'bar' } }); 遷移元から受け取った値を使用する方法 import { useHistory, useParams } from 'react-router-dom'; const location = useLocation<{ bar: string }>(); location.state.bar;

せっかくReactを学んだのなら、Reactを使ってサービスを作ってみようという試み。 サービス紹介 ReactでVtuber（VRM）の姿で参加できるZoomみたいなサービスを作ってみました。 こんなサービスです。 IoTのラジコンに乗せれば、遠隔操作も。 新しい形のバーチャルオフィス・スクールですね。 バーチャルの世界からリアルに飛び出しましょう。 See the Pen vteacher-iot-demo by rgb(suzuki) (@rgbkids-the-decoder) on CodePen. 使い方 roomId（英数字のみ）を決定して、リンクを開いてください（Safari/Chrome/Edge等）。 See the Pen vteacher-vrm by rgb(suzuki) (@rgbkids-the-decoder) on CodePen. 操作方法 Name: あなたの名前です。 Mic: マイクの設定です。 VRM: STARTでVRMに切り替わります。 File: お好きなVRMをアップロードできます。 Cast: 画面共有ができます。 Join: 入室します。 説明 「作ってみた」と書きましたが、GitHubに公開されている下記のコードの組み合わせたものですので、どなたでも挑戦できます。 SkyWay Conference by skyway SkyWayを利用したWeb会議アプリ「SkyWay Conference」のソースコードです https://github.com/skyway/skyway-conf VRM 4 SkyWay Conference by Keshigom SkyWayを利用した SkyWay Conferenceを拡張し、 VRMを用いたビデオ会議機能を追加したものです https://github.com/Keshigom/VRM4SkywayConference 最新情報はこちら React 18 に向けてのプラン https://ja.reactjs.org/blog/2021/06/08/the-plan-for-react-18.html React 18 の主な新機能 自動で有効になるパフォーマンス改善（例：自動バッチング） 新たな API（例：startTransition） React.lazy の組み込みサポートを有する新しいストリーミングサーバレンダラ What’s new in React 18 https://youtu.be/bpVRWrrfM1M React 18 のインストール https://github.com/reactwg/react-18/discussions/9 ひとこと たのしいReactライフを！

三項演算子を使う 例）ダークモードにする export default function App() { const { isDarkMode } = useDarkMode(); return ( <main className={`body ${isDarkMode ? "body-dark" : "body-light"}`}> <Routes /> </main> ); } cssのクラスを関数(useDarkMode())で真偽値を変更させる。

目次 1.はじめに 2.今回やること 3.ご紹介 4.前提条件 5.AWSの設定 6.Next.jsプロジェクトの作成、Amplifyの組み込み 7.ソースコードの管理 8.ソースのホスティング 9.おわりに 1. はじめに 業務でNext.js、Amplifyを扱うことになりました。 そのとき構築したことの手順をつらつらと書き綴っていきます。 本記事ではWindows10で構築しています。 2. 今回やること Next.jsで新規プロジェクトの雛形を作成。 AmplifyでWebサイトのデプロイ、ホスティング。 とりあえず開発環境を整えるというイメージで進めていきます。 3. ご紹介 今回登場する主役2名の簡単な紹介をします。 Next.jsくん Reactをベースとしたフレームワーク。 SSR（サーバーサイドレンダリング）やファイルシステムベースのルーティングができる。 SSRを行う事によって、初期表示の読み込み速度を大幅に改善してくれる。 Amplifyさん AWSで提供されているサービス。 諸々のバックエンド構築をしてくれる。 フロントエンドとバックエンドの接続を容易にする。 静的ページのデプロイ、ホスティングを一瞬で実現できる。 4. 前提条件 以下環境が整っていることを前提に進めていきます。 nodejsがインストールされている。 git 1.7.9以上 がインストールされている。 pythonがインストールされている。 AWSアカウントを所持している。 Visual Studio Codeがインストールされている。(他のエディタでも大丈夫です) 5. AWSの設定 AWSCLI用のユーザーを作成 AWSの下記ページにてユーザーを作成します。 ユーザー追加ページ ①ユーザー名の設定 任意のユーザー名を設定 AWSCLI用のユーザーなのでAwsCliUserとします。 ②アクセスの種類の選択 AWSCLIでアクセスするので、プログラムによるアクセスは必須です。 ③次のステップを押下 ④アクセス許可の設定 既存のポリシーを直接アタッチを選択 ⑤アタッチするポリシーを選択 AdministratorAccessを選択(AWSCLIを操作するために管理者権限が必要なため) ⑥次のステップを押下 ⑦次のステップを押下 ⑧ユーザーの作成を押下 ⑨アクセスキーIDを確認＆メモ ⑩シークレットアクセスキーを確認＆メモ シークレットアクセスキーは他人にみせちゃダメなやつです。 そしてシークレットアクセスキーは必ずここでメモしてください。 後から確認できないです。 AWSCLI用ユーザーの作成完了です。 Amplify用のユーザーを作成 先程と同様にユーザーの追加を行います。 ほとんど同じ操作なので、画像は省略します。 ①ユーザー名の設定 任意のユーザー名を設定 Amplify用のユーザーなのでAmplifyUserとします。 ②アクセスの種類の選択 プログラムによるアクセスにチェック ③次のステップを押下 ④アクセス許可の設定 既存のポリシーを直接アタッチを選択 ⑤アタッチするポリシーを選択 先人様がいらっしゃったので、こちらを参考にポリシーを選択しました。 下記のポリシーを選択 AdministratorAccess-Amplify IAMFullAccess AmazonS3FullAccess 更に追加でAmplifyの全権限を持ったインラインポリシーを設定しますがそちらは後述します。 ⑥次のステップを押下 ⑦次のステップを押下 ⑧ユーザーの作成を押下 ⑨アクセスキーIDを確認＆メモ ⑩シークレットアクセスキーを確認＆メモ Amplify用ユーザーの作成完了です。 インラインポリシーの作成と適用 先程少し話が出てきましたが、Amplifyの全権限を持ったインラインポリシーを作成しAmplifyUserに付与します。 AWSの下記ページにてポリシーを作成します。 ポリシー作成ページ ①サービスの選択 Amplifyを選択します。 ②許可するアクションの選択 すべてのAmplifyアクションを選択します。 ③リソースの指定 すべてのリソースを選択します。 ④次のステップを押下 ⑤次のステップを押下 タグの追加は不要です。 ⑥名前の指定 今回はAmplifyFullAccessとする。 ⑦ポリシーの作成を押下 ⑧作成したポリシーを適用 ユーザー一覧からAmplifyUserを選択します。 アクセス権限の追加から先ほど作成したAmplifyFullAccessを直接アタッチします。 最終的に下記のようになればOKです。 AWS CLIのインストール、ユーザーの紐付け AWS CLIのインストーラをダウンロード くわしい手順はこちら ダウンロード後、AWS CLI をインストールします。 その後コマンドプロンプトを開いて下記コマンドを実行します。 aws --version 次のような感じでバージョンが確認できればOKです。 aws-cli/2.1.38 Python/3.8.8 Windows/10 exe/AMD64 prompt/off 次にAWS CLIとAwsCliUserを紐付けます。 ①下記コマンドを実行 aws configure --profile aws-cli ②（AwsCliUserの）アクセスキーを入力 AWS Access Key ID [None]: ③（AwsCliUserの）シークレットアクセスキーを入力 AWS Secret Access Key [None]: ④ ap-northeast-1 と入力 Default region name [None]: ⑤ json と入力 Default output format [None]: ⑥下記コマンドを実行 aws ec2 describe-instances --profile aws-cli プロフィール情報が表示されれば完了です。 ※-- More --　と出力されている状態は ctrl+c で処理中断できます。 Amplify CLIのインストール、ユーザーの紐付け 下記コマンドを実行し、 Amplify CLIをインストールします。 npm install -g @aws-amplify/cli 次のコマンドでバージョンが確認できればOKです amplify --version 次にAmplify CLIとAmplifyUserを紐付けます。 ①下記コマンドを実行 amplify configure ②ブラウザが開いてAWSの画面へ遷移するので、コマンドプロンプトに戻る。 ③Press Enter to continue　と表示されているので Enterを押下 ④ap-northeast-1 を選択 ※ユーザー作成済みなのでホントは何でも良い ⑤任意のユーザー名を入力（今回はAmplifyとしました。） ※ユーザー作成済みなのでホントは何でも良い ⑥IAMユーザーの作成画面が表示されますが、すでにユーザーは作成しているのでそのまま閉じてコマンドプロンプトに戻る。 ⑦Press Enter to continue　と表示されているので Enterを押下 ⑧（AmplifyUserの）アクセスキーIDを入力 ? accessKeyId: ******************** ⑨（AmplifyUserの）シークレットアクセスキーを入力 ? secretAccessKey: ******************** ⑩任意のプロファイル名を入力 今回はAmplifyProfileとしました。 ? Profile Name: AmplifyProfile 下記メッセージが表示されたら完了です。 Successfully set up the new user. AWSの設定が完了しました。 お疲れさまです！ 6. Next.jsプロジェクトの作成、Amplifyの組み込み プロジェクトの作成 ①コマンドプロンプトを開き、プロジェクトを格納したいフォルダの作成&遷移 mkdir Workspace cd Workspace ②Nextjsプロジェクトの作成 npx create-next-app ③プロジェクト名を聞かれるので任意の名前を入力 今回は nextjsapp としました ? What is your project named? » nextjsapp ④Visual Studio Codeでプロジェクトフォルダ(nextjs_app)を開く 今後はVisual Studio Code内のターミナルでコマンドを実行していきます。 Amplifyの組み込み ①下記コマンドを実行 amplify init ②プロジェクト名を入力 Enter a name for the project (nextjsapp) ③環境名を入力 Enter a name for the environment (dev) ④使用エディタを選択 > Visual Studio Code ⑤言語を選択 > javascript ⑥フレームワークを選択 > react ⑥ソースディレクトリを入力 Source Directory Path: (src) ⑦ディストリビューションディレクトリを入力 ※outに書き換える（デフォルトだとbuild） Distribution Directory Path: out ⑧ビルドコマンドを入力 Build Command: (npm.cmd run-script build) ⑨スタートコマンドを入力 Start Command: (npm.cmd run-script start) ⑩AWSプロファイルを使用する > AWS profile ⑪先ほど作成したプロファイルを選択 > AmplifyProfile 以上でプロジェクトの作成、Amplifyの組み込みが完了しました。 お疲れ様です！ 7. ソースコードの管理 コードの管理はCodeCommitを利用します。 CodeCommitは簡単に言うとAWS上で使えるGitHubのようなものです。 役割としては同じものになります。 リポジトリの作成とプッシュ ①git-remote-codecommit (GRC)をインストール CodeCommitを扱うためのツールです。pythonがインストールされている必要があります。 pip install git-remote-codecommit ②リポジトリを作成 aws codecommit create-repository --repository-name nextjs_app ③リポジトリの確認 CodeCommitでリポジトリが作成されていることを確認します。 ④リモートリポジトリ追加 git remote add origin codecommit::ap-northeast-1://nextjs_app ⑤プロジェクトのソースをプッシュ git push origin HEAD ⑥（再）リポジトリの確認 CodeCommitでソースがアップされていることを確認します。 これでCodeCommit上でソースの管理ができるようになりました。 お疲れさまです。 8. ソースのホスティング Web上に今回作成したソースを公開します。 ①FrontEnd Frontend environments タブを選択 ②AWS CodeCommit を選択 ③Connect branch を押下 ④リポジトリ:nextjs_appを選択 ⑤ブランチ:mainを選択 ⑥次へを押下 ⑦Create New Role を押下 新しいタブが開きロール作成画面が表示されます。（次へ の押下だけなので画像省略） ⑧次のステップ: アクセス権限　を押下 ⑨次のステップ: タグ　を押下 ⑩次のステップ: 確認　を押下 ⑪ロールを作成　を押下 ロール作成後、元のページに戻って操作をします。 ⑫devを選択 ⑬Refresh existing roles を押下 ⑭amplifyconsole-backend-role を選択 ⑮チェックを入れる ⑯次へ を押下 ⑰保存してデプロイを押下 デプロイには少し時間がかかるので少々お待ち下さい ⑱サイトの確認 Next.jsのプロジェクトページが表示されれば、ホスティング完了です。 以上で全行程完了です。本当にお疲れさまでした！ あとはNextjsを思う存分楽しみましょう。 9. おわりに NextjsもAmplifyもコマンドを打つだけで簡単に環境を構築できるのでとても便利だなと思いました。 技術の進歩は目覚ましいです！ 拙い記事でしたがここまで閲覧いただきありがとうございます。 今後も新しい技術に触れることがあればまた筆を取ると思いますのでよろしくおねがいします。 以上、したらば！

前提知識 Reactの基礎(useState, useEffect) Next.jsの基礎 TypeScriptの基礎 対象 JavaScriptは理解できている React初学者 使用技術 Next.js TypeScript Sass この記事で行うこと 今回はReactを用いてinputフィールドにフロント側からバリデーションをかけていきます。 今回は初級編と応用編に分けておこなっていきます！ 初級編はまずはtodoアプリを用いてinputフィールドを作成し、 応用編ではinputフィールドをcomponentに落とし込んで再利用可能にしていきます。 さっそくやってみる まずゴールとしては簡単なtodoを作成するだけにするので inputフィールドにタスクを追加する 追加ボタンを押す todoエリアに追加される こちらの基本的な工程から行っていきます。 ※今回はNext.jsを使用しています。 pages/input/index.tsx import styled from "./input.module.scss" export default function Input() { return ( <> <h1 className={styled.heading}>インプットフィールドの練習</h1> </> ); }; pages/input/input.module.scss .heading { font-size: 30px; font-weight: bold; } まず簡単に二つのファイルを作成しましょう。 ではこちらにTodoの追加フローを足していきます。 コードを書いた後に説明していきます。 pages/input/index.tsx import styled from "./input.module.scss" import React, {useState} from "react"; export default function Input() { const [ todoText, setTodoText ] = useState(""); const [ todos, setTodos ] = useState([]); const onChangeTodoText = (event: React.ChangeEvent<HTMLInputElement>): void => setTodoText(event.target.value); const onClickAddTodoText = (): void => { const newArrayTodos = [...todos, todoText]; setTodos(newArrayTodos); setTodoText(""); } return ( <> <h1 className={styled.heading}>インプットフィールドの練習</h1> <div className={styled.inputArea}> <input className={styled.todoInputField} placeholder={"todoを入力してください"} type={"text"} value={todoText} onChange={onChangeTodoText} /> <button className={styled.addTodoButton} onClick={onClickAddTodoText} >todoを追加</button> </div> <div className={styled.todoArea}> <h2 className={styled.heading2}>Todoリスト</h2> {todos.length === 0 ? ( <p className={styled.md10}>todoはまだ登録されていません</p> ) : ( <ul className={styled.md10}> {todos.map((todo) => ( <li key={todo}>{ todo }</li> ))} </ul> ) } </div> </> ); }; pages/input/input.module.scss .heading { font-size: 30px; font-weight: bold; } .heading2 { font-size: 24px; font-weight: bold; margin-top: 20px; } .md10 { margin-top: 10px; } .inputArea { margin-top: 20px; .todoInputField { margin-right: 5px; } } こちらが表示されたかと思います。 では簡単に説明していきます。 <input className={styled.todoInputField} placeholder={"todoを入力してください"} type={"text"} value={todoText} onChange={onChangeTodoText} /> まずはこちらからみていきましょう。 inputのtypeはtextにし、valueでtodoTextを受け取っています。 todoTextは const [ todoText, setTodoText ] = useState(""); こちらでstateとして定義しています。 初期値は空文字列なのでinputの中身はplaceholderが表示されている状態です。 このままではvalueが空文字で設定されているので文字を入力することができません。 ここでonChangeイベントを使っています。 onChangeはinputフィールドに変更があった時に反応するイベントです。 ここでonChangeTodoTextの関数が発火します！ const onChangeTodoText = (event: React.ChangeEvent<HTMLInputElement>): void => setTodoText(event.target.value); こちらですね。 inputフィールドはeventを引数に受け取ります。 これはもうお決まり事項なので暗記しましょう。 eventの型もお決まりといった形なのですが、これは覚えるというよりかは都度eventの型はこんな感じかというのを把握して都度ググるといった感じで大丈夫だと思います。 setTodoTextでtodoTextの初期値を更新しています。 event.target.valueでinputフィールドに入力された値を受け取っています！ こちらもお決まりなので暗記です！！ これでinputフィールドが入力できるようになっています。 <button className={styled.addTodoButton} onClick={onClickAddTodoText} >todoを追加</button> todoの追加ボタンでClickイベントを発火させています。 const onClickAddTodoText = (): void => { const newArrayTodos = [...todos, todoText]; setTodos(newArrayTodos); setTodoText(""); } newArrayTodosで新しい配列を生成しております。 const newArrayTodos = [...todos, todoText]; こちらはスプレット構文です。 [...もとの配列, 追加する実態] = 新しい配列 といったイメージです。 昔は.pushなどで配列にボコボコ追加していくスタイルが主流でしたが、pushなどは破壊的メソッドで少し危険な部分があるため、基本的にはスプレット構文を使うことをおすすめいたします。 setTodos(newArrayTodos); setTodoText(""); 新しく生成した配列をsetTodosで空の初期値の配列を更新しています。 const [ todos, setTodos ] = useState([]); 初期値はstateで定義してあります。 さらに最後にinputフィールドから追加された際はinputフィールドから文字は消えてほしいためsetTodoTextを空文字に更新しています。 <div className={styled.todoArea}> <h2 className={styled.heading2}>Todoリスト</h2> {todos.length === 0 ? ( <p className={styled.md10}>todoはまだ登録されていません</p> ) : ( <ul className={styled.md10}> {todos.map((todo) => ( <li key={todo}>{ todo }</li> ))} </ul> ) } </div> 追加の処理がかけたのであとはtodoを表示していきます。 三項演算子を活用し todo.length === 0 ?のとき、つまり配列の数が0のとき "todoはまだ登録されていません"を表示しています。 逆にtodoが登録された場合は {todos.map((todo) => ( <li key={todo}>{ todo }</li> ))} mapで配列を回しています。 こちらでtodo作成するフローは終了です。 バリデーションをかけていく 今回は - Todoは0文字では追加できない - Todoは10文字以内 といったバリデーションを練習としてかけていきます。 ではファイルを更新していきましょう。 こちら一応今回の完成系のコードになります。 では一つずつ確認していきましょう。 pages/input/index.tsx import styled from "./input.module.scss" import React, {useEffect, useState} from "react"; export default function Input() { const [ todoText, setTodoText ] = useState<string>(""); const [ todos, setTodos ] = useState<Array<string>>([]); const [ isError, setIsError ] = useState<boolean>(false); const [ errorMessage, setErrorMessage ] = useState<string>(""); const todoLengthZero = (): boolean => { if (todoText.length === 0) return true; } const onChangeTodoText = (event: React.ChangeEvent<HTMLInputElement>): void =>　{ if (todoText.length >= 10) { setIsError(true) setErrorMessage("Todoは10文字いないで入力してください") } else { setIsError(false) } setTodoText(event.target.value); } const onClickAddTodoText = (): void => { const newArrayTodos = [...todos, todoText]; setTodos(newArrayTodos); setTodoText(""); } useEffect((): void => { todoLengthZero() }, []) return ( <> <h1 className={styled.heading}>インプットフィールドの練習</h1> <div className={styled.inputArea}> {isError && <p className={styled.errorMessage}>{ errorMessage }</p>} <input className={styled.todoInputField} placeholder={"todoを入力してください"} type={"text"} value={todoText} onChange={onChangeTodoText} /> <button className={styled.addTodoButton} onClick={onClickAddTodoText} disabled={isError || todoLengthZero()} >todoを追加</button> </div> <div className={styled.todoArea}> <h2 className={styled.heading2}>Todoリスト</h2> {todos.length === 0 ? ( <p className={styled.md10}>todoはまだ登録されていません</p> ) : ( <ul className={styled.md10}> {todos.map((todo) => ( <li key={todo}>{ todo }</li> ))} </ul> ) } </div> </> ); }; まずエラーメッセージの定義からです。 {isError && <p className={styled.errorMessage}>{ errorMessage }</p>} こちらでエラーがある場合のみエラーメッセージを表示するように設定しています。 エラーのフラグはisErrorで定義していますが、 const [ isError, setIsError ] = useState<boolean>(false); こちらはstateで初期値をfalseで定義しています。 なのでデフォルトはエラ〜メッセージが表示されません。 その下のinputフィールドをみていきましょう。 <input className={styled.todoInputField} placeholder={"todoを入力してください"} type={"text"} value={todoText} onChange={onChangeTodoText} /> こちらはonChange(フィールドに入力された際に発火)イベントでonChangeTodoTextの関数を呼び出しています。 const onChangeTodoText = (event: React.ChangeEvent<HTMLInputElement>): void =>　{ if (todoText.length >= 10) { setIsError(true) setErrorMessage("Todoは10文字いないで入力してください") } else { setIsError(false) } setTodoText(event.target.value); } こちらです。 内容としてはtodo.length >= 10(todoの文字数が10以上であれば)setIsErrorをtrueにし setErrorMessageを入力します。 const [ isError, setIsError ] = useState<boolean>(false); const [ errorMessage, setErrorMessage ] = useState<string>(""); こちらで初期値が定義されていたので変わります。 ここでisErrorがtrueになるため {isError && <p className={styled.errorMessage}>{ errorMessage }</p>} 先ほどのerrorMessageが表示されるようになります。 こちらで10文字以上のエラーメッセージの表示は完了です。 次は0文字のバリデーションは初めからエラーメッセージが表示されるのは少しうざいのでdisabledを処理していきます。 <button className={styled.addTodoButton} onClick={onClickAddTodoText} disabled={isError || todoLengthZero()} >todoを追加</button> disabled={isError || todoLengthZero()}まずこちらの処理でisErrorがtrueになっている場合、つまり10文字以上の文字が入力されている場合はtrueが入ります。 それとtodoLengthZoroの関数をここで呼んでいます。 const todoLengthZero = (): boolean => { if (todoText.length === 0) return true; } こちらはtodoの文字が0と等しければtrueを返す関数です。 つまり0文字以上ではボタンにdisabledにtrueが入り、ボタンが押せなくなるのです。 こちらをまとめると disabled = { 文字数が10文字以上の場合はtrue または 文字数が0文字と等しい場合はtrue　} になります！ ただこれだけだと、初期ロード時には0文字でもボタンがdisabledになりません。 なぜなら todoLengthZeroの関数が呼ばれないからです。 こちらを改善するのがuseEffectです useEffect((): void => { todoLengthZero() }, []) useEffectはマウント時に処理を走らせます。 ちなみにreturnを記載するとアンマウント時の処理になります。 つまり初期ロードが走りマウント時に関数が走るためdisabledが有効になります。 これでバリデーションの処理が完了になります。 最後にスタイルを少し整えましょう。 .heading { font-size: 30px; font-weight: bold; } .heading2 { font-size: 24px; font-weight: bold; margin-top: 20px; } .md10 { margin-top: 10px; } .inputArea { margin-top: 20px; .todoInputField { margin-right: 5px; } } .errorMessage { color: red; } こちらで初級編は終了になります。 次に応用編ですが今回のコードをリファクタリグして、保守性の高いコードに近づけていきます。 お疲れさまでした！