「Reactを学びたいけど、どのようにすればよいかがわからない！」今回の記事はそのような方のための連載第2回目の記事です。

前回の記事では画面に文字を表示させるプログラムを作成しました。

今回はテキストボックスへの入力と、入力した文字列を画面に出力する機能を持ったプログラムのソースコードを追っていくことで、要素の状態を管理する方法を学びましょう！

自分でプログラムを作ることも大切ですが、他人の書いたプログラムを解析して理解を深めてスキル習得するのも重要なことです。

第1回目と同じく少し難しいと感じる部分もあると思いますが、一つずつ理解していきましょう。

開発の準備

開発の準備

今回は「02_resume」というプロジェクトを作成して開発を行います。

コマンドラインツールで任意の場所に移動したら以下のコマンドを順番に実行してデフォルトのアプリをブラウザに表示させてください。

npx create-react-app 02_resume
cd 02_resume
npm start

入力した文字を表示させよう

入力した文字を表示させよう

まずはテキストボックスに入力した文字をブラウザ上に表示させるプログラムを作りましょう。

画面構成は上の画像の通りとなります。

テキストボックスに任意の文字を入力して「表示する」ボタンをクリックすると、文字を表示するためのグレーの領域に入力した文字が表示されます。

今回、スタイルシートは以下のソースコードを「App.css」に打ち込んでください。

コピーしても動きますが、特に慣れないうちは自分の手でソースコードを打ち込むことでプログラムに対して理解を深めることができます。

* {
  margin: 0;
  padding: 0;
}
.App {
  text-align: center;
}

.App-header {
  margin: 50px auto;
}

h1 {
  text-align: center;
}

.print {
  background: #ccc;
  width: 320px;
  padding: 15px;
  margin: 15px auto;
  font-size: 18px;
}

.print p {
  width: 100%;
  overflow-wrap: break-word;
}

.ctr {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input {
  width: 320px;
  padding: 15px;
  font-size: 14px;
}

button {
  margin: 15px auto;
}

次にそれぞれのパーツの配置や処理の記述を行います。

記述するファイルはApp.js、以下のようなソースコードとなります。こちらもより深く理解したい人は是非、ご自分の手で打ち込んでみてください。

import React, { useState } from "react";
import './App.css';

function App() {
  const [inputText, setInputElement] = useState("");
  const [text, setText] = useState("ここに表示されます。");
  const printText = () => {
    if(inputText !== "") {
      setText(inputText);
      setInputElement("");
    }
    else
    {
      setText("文字を入力してください。");
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>入力した文章を表示するアプリ</h1>
        <div className="print">
          <p>{text}</p>
        </div>
        <div className="ctr">
        <input value={inputText} onChange={(e) => setInputElement(e.target.value)} type="text" placeholder="入力してボタンを押してください。" />
        <button onClick={printText}>表示する</button>
        </div>
      </header>
    </div>
  );
}

export default App;

それでは、細かく処理を見ていきましょう。

必要なパーツの配置

今回は次の図の形でレイアウトをします。

表示エリアについては以下のように表現しています。

<div className="print">
  <p>{text}</p>
</div>

{text}については後述しますが、表示エリアに表示する文字列を管理している変数です。

初期状態では「文字を入力してください。」という文字列が設定されています。

文字を入力するためのテキストボックスと文字列を表示するためのボタンは以下のように定義します。

<div className="ctr">
<input value={inputText} onChange={(e) => setInputElement(e.target.value)} type="text" placeholder="入力してボタンを押してください。" />
<button onClick={printText}>表示する</button>
</div>

テキストボックスはinputタグで表現しており、{inputText}という値を表示しています。{inputText}に関してはテキストボックスに入力されている文字列を管理するための変数であり、初期状態では何も表示されずプレースホルダーの値が見えるようになっています。

hookについて

今回は、hookという機能を利用して画面に表示させる文章の状態や、テキストボックス内の状態を管理します。

useStateのインポート

まずはインポートの箇所を見てください。

import React, { useState } from "react";

この一文で、useStateを使えるようにします。

useStateとはフックという機能の基本的な構文であり、状態管理を行うための関数コンポーネントです。

機能の基本的な使い方

実装されているソースからは離れて、useStateを使ってシンプルに0から1ずつインクリメントしていく方法を解説します。

定義の仕方は以下のように行います。

const [count, setCount] = useState(0);

こちらは変数とメソッドを宣言しています。変数はcountという名前で、それを変更するメソッドをsetCountという名前で宣言しています。

また、右辺ではcountの値を0で初期化しています。これでcountを0からインクリメントしていく準備ができました。

実際にcountを1増やす場合は、以下のようにsetCountメソッドを使用することで実現できます。

setCount(count + 1)

setCountメソッドに対してcountに1を足した数を渡しています。

setCountはcountを更新するメソッドなので、これが実行されると初期値が0であったcountの値を1に更新します。

useStateの初期化

それでは実際に今回使っている内容を見ていきます。

const [inputText, setInputElement] = useState("");

const [text, setText] = useState(“ここに表示されます。”);

この2行は初期化をしています。

1つ目の宣言で、テキストボックスに入力されている値を管理するために使う変数inputTextを宣言しています。最初は文字列が入力されていないため、「””」で初期化します。

2つ目の宣言では、表示用のエリアに出力されている文字列を管理するために使う変数textを線ゲインしています。右辺では最初に表示しておきたいテキストを入力しておきます。

このようにしておくことで、ブラウザを起動したときはテキストボックスには何も入っていない状態、表示用のエリアには「ここに表示されます。」というテキストを表示することができます。

また、1つ目のuseStateではsetInputElementを、2つ目ではsetTextを実行することで値を更新することができるようにしましょう。

処理の説明

では、実際の処理を見ていきましょう。

テキストボックスのデータの管理

まずはテキストボックスの管理について見てみましょう。

以下のソースコードを見てください。

<input value={inputText} onChange={(e) => setInputElement(e.target.value)} type="text" placeholder="入力してボタンを押してください。" />

{inputText}では、現在のinputTextの値を表示することができます。これをinputタグのvalueに代入することで、ブラウザ上でテキストボックスの中に表示される値を指定していることができます。

「””」で初期化されているので、今回はテキストボックスには何も表示されません。inputタグに設定されているプレースホルダーのみが表示されていることを確認してみましょう。

onChangeイベントはJavaScriptのイベントです。HTML要素の値の変更が終わったタイミングで発生します。

つまり、テキストボックスへの入力が終わった際に、イベントの情報の中からテキストボックスに入力されている値を取得して、setInputElementに渡すという処理となっています。

このようにテキストボックスに入力された情報を管理しています。

onChangeイベントを使っているので、テキストボックスに入力されている内容を変更するたび、入力された値を保持し直すことができます。

表示エリアのデータの管理

次に、表示エリアに表示されるテキストの管理について見てみます。

<p>{text}</p>

この部分でtextの値を表示しています。

textについては初期化処理にて「ここに表示されます。」という文字列を設定しています。そのため、最初は表示エリアには「ここに表示されます。」と表示されます。

最後に、ボタンが押された時にtextを更新する処理について見てみます。

<button onClick={printText}>表示する</button>

onClickイベントはHTML要素をクリックした際に発生するイベントです。

ここではボタン要素に指定しているので、ボタンが押されたときに以下のprintText関数を実行します。

const printText = () => {
  if(inputText !== "") {
    setText(inputText);
    setInputElement("");
  }
  else
  {
    setText("文字を入力してください。");
  }
}

printTextでは、テキストボックスに入力された値であるinputTextの値を評価します。

if文により、inputTextに文字列が入力されているかを確認します。

文字列が入力されていた場合はif文でtrueとなります。

trueの場合はテキストボックスに入力されていた値を表示エリアの文字列として保存し、さらにテキストボックスの内容を未入力の状態に設定します。

文字列が未入力であった場合はif文でfalseとなり、表示エリアの文字列に「文字を入力してください。」というメッセージを保存します。

レンダリングされるタイミング

ここまでで、入力された情報や表示される情報の管理の仕方を解説してきました。

それでは管理してきた情報に変更があった場合、どのタイミングでレンダリングされるのでしょうか。

それは、useStateで管理している情報が変更されたタイミングです。

実はテキストボックスに入力をしたときには再レンダリングがされており、打ち込んだ文字がリアルタイムに表示されているのです。

表示ボタンを押したときは、表示エリアが持っている文字列の情報が変わったタイミングと、テキストボックス内の値を初期化したタイミングの2回レンダリングが行われています。

このようにレンダリングは実は高い頻度で行われています。

まとめ

まとめ

今回の記事では、以下について学習しました。

  • hookによる情報の管理の仕方
  • 管理情報の保存方法
  • レンダリングのタイミング

hookに関してはuseState以外も様々なものがありますので、ご自分が作りたいプログラムの幅を広げるためにも確認してみてください。