Reactを学びたいけど、何から初めていいのか分からない！　今回の記事はそのような方たちのための連載第3回目の記事です。

前回のプログラムではテキストボックスに入力された文字列を出力するプログラムを実際に追っていきました。

今回はそのプログラムを応用して、学歴を表示させるプログラムを作成してみましょう！

開発の準備

開発の準備

今回のプログラムは前回の続きから作ります。

ソースコードを保存しておきたいという人は、バックアップを取っておいてください。

今回のアプリ

今回のアプリ

今回は学歴出力アプリを開発します。

生年月日を入力すると、在籍していた中学校〜大学までの入学年度と卒業年度を出力する機能を作りましょう！

アプリ外観と機能

このような外観のアプリを作成します。

基本機能としては生年月日を入力後「表示する」ボタンをクリックすると、中学～大学までの入学、卒業した年月を出力します。

オプションの機能として、テキストボックスの中に学校名を入力すると、該当する項目に表示します。

こちらは入力と同時に出力されます。

各パーツの説明

上記のように日付入力欄、結果表示エリア、学校名入力欄、表示ボタンに分けて作っていきます。

それでは、それぞれのパーツに関するソースコードについて見ていきます。

日付入力欄

生年月日を入力する欄は以下のようにコーディングしています。

<div className="year">生年月日：
  <input type="date" value={date} min="1900-01-01" max="2050-12-31" onChange={(e) => onChangeDate(e)} />
</div>

inputタグのtype=”date”を使って日付の入力欄を使っています。

入力できる日付に関しては、1900年1月1日～2050年12月31日の間に限定しています。value={date}の部分に関しては前回の記事で扱ったhookの機能であるuseStateで保存されている変数dateの状態を現在の値として扱っています。

生年月日は初期値を2000年1月1日とし、その後はアプリの利用者によって入力された日付を保持し続けます。

結果表示エリア

結果表示エリアは以下のようにコーディングしています。

<div className="print">
  <p>{inputJhsY}年 4月 {inputJhs}中学校 入学</p>
  <p>{jhsEndY}年 3月 {inputJhs}中学校 卒業</p>
  <p>{inputHsY}年 4月 {inputHs}高等学校 入学</p>
  <p>{hsEndY}年 3月 {inputHs}高等学校 卒業</p>
  <p>{inputUniversityY}年 4月 {inputUniversity}大学 入学</p>
  <p>{universityEndY}年 3月 {inputUniversity}大学 卒業</p>
</div>

生年月日を入力後「表示する」ボタンを押した後に結果を表示するエリアです。

各変数が示している内容に関しては以下の表にまとめます。

inputJhs中学校の名前を保持しています。
inputJhsY中学校に入学した年を西暦で保持しています。
jhsEndY中学校を卒業した年を西暦で保持しています。
inputHs高等学校の名前を保持しています。
inputHsY高等学校に入学した年を西暦で保持しています。
hsEndY高等学校を卒業した年を西暦で保持しています。
inputUniversity大学名を保持しています。
inputUniversityY大学に入学した年を西暦で保持しています。
universityEndY大学を卒業した年を西暦で保持しています。

中学校を卒業した年と高等学校に入学した年は一般的には同じとなりますが、今回のプログラムでは分かりやすさを重視して別々の変数として宣言して使用しています。

学校名入力欄と表示ボタン

学校名の入力欄と表示ボタンはまとめて以下のようにコーディングしています。

<div className="ctr">
  <input value={inputJhs} onChange={(e) => setJhs(e.target.value)} type="text" placeholder="中学校名" />
  <input value={inputHs} onChange={(e) => setHs(e.target.value)} type="text" placeholder="高等学校名" />
  <input value={inputUniversity} onChange={(e) => setUniversity(e.target.value)} type="text" placeholder="大学名" />
  <button onClick={printText}>表示する</button>
</div>

中学校、高等学校、大学ともに初期状態では何も入力されていないテキストボックスを表示しています。

onChangeイベントを使用して、テキストボックスの内容に変更があった時にsetJhs、setHs、setUniversityを実行します。

解説

ここでは、中学校の入学した年、卒業した年、学校名を表示するプログラムに絞って解説をします。

初期設定

hookの機能を利用して、生年月日、所属年度、学校名、入学した年、卒業した年を管理します。

// 生年月日
const [date, setDate] = useState("2000-01-01");
const [year, setYear] = useState(2000 - 1);

// 学校名
const [inputJhs, setJhs] = useState("");

// 中学校
const [inputJhsY, setJhsY] = useState("");
const [jhsEndY, setJhsEndY] = useState("");
変数管理情報を変更する関数初期値管理内容
datesetDate2000年1月1日生年月日
yearsetYear1999所属年度
inputJhssetJhsなし学校名
inputJhsYsetJhsYなし入学した年
jhsEndYsetJhsEndYなし卒業した年

初期値の所属年度のyearに関しては、直接1999を設定していただいて構いません。

今回のソース例では後述する年度の処理に合わせて2000から1を引く形で初期値の設定をしています。

画面に年度を表示する関数

画面に入学した年、卒業した年を計算して表示する関数として「printText」メソッドを定義しています。

中学校の処理を取り上げて解説します。

// 画面に年度を表示
const printText = () => {
  setJhsY(year + 13);
  setJhsEndY(year + 16);
}

「表示する」ボタンをクリックするとprintTextが実行される仕組みになっています。

メソッド内では、生まれた年度である「year」変数に年齢をプラスすることで入学または卒業した年を計算し、hookの機能を使って保存しています。

これを実行するとhookの機能でレンダリング処理が走るので、計算結果が画面にも表示される仕組みとなっています。

所属年度の計算

生年月日を年度に計算しなおす関数として「onChangeDate」メソッドを定義します。

// 生年月日と計算年度を保持
const onChangeDate = (e) => {
  let input = e.target.value;
  let y = parseInt(input.split("-")[0]);
  let m = parseInt(input.split("-")[1]);

  // 生年月日を更新
  setDate(input);

  // 年度を更新
  if(m > 3)
  {
    setYear(y);
  }
  else
  {
    setYear(y - 1);
  }
}

生年月日を変更するとonChangeメソッド経由で呼ばれる関数です。

入力した生年月日のデータをinputという変数に入力しています。

変数yとmではそれぞれ年と月を扱います。

inputには初期値であれば文字列で「2000-01-01」と入っています。これを「-」で区切った時に0番目の値が誕生した年、1番目の値が誕生月となります。yとmの値は数値として取り扱いたいので、parseIntを使用して文字列から数値に変換しています。

誕生日に関しては入力された値をそのまま保存したいので、そのまま更新します。

次にyearでは生まれた「年度」を扱いたいので、4～12月生まれであれば生年月日の年をそのまま、それ以外の1～3月生まれであれば生年月日の年から1を引いた値を保存します。

ソースコード全容

以下にソースコードの全容を示します。ここまでの解説をもとにして処理を追っていき、理解するようにしてください。

スタイルシートは前回の記事と同じものを使用しています。

今回はApp.jsのみを作成してください。

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

function App() {
  // 生年月日
  const [date, setDate] = useState("2000-01-01");
  const [year, setYear] = useState(2000 - 1);

  // 学校名
  const [inputJhs, setJhs] = useState("");
  const [inputHs, setHs] = useState("");
  const [inputUniversity, setUniversity] = useState("");

  // 中学校
  const [inputJhsY, setJhsY] = useState("");
  const [jhsEndY, setJhsEndY] = useState("");
  
  // 高校
  const [inputHsY, setHsY] = useState("");
  const [hsEndY, setHsEndY] = useState("");

  // 大学
  const [inputUniversityY, setUniversityY] = useState("");
  const [universityEndY, setUniversityEndY] = useState("");


  // 画面に年度を表示
  const printText = () => {
    setJhsY(year + 13);
    setJhsEndY(year + 16);
    setHsY(year + 16);
    setHsEndY(year + 19)
    setUniversityY(year + 19);
    setUniversityEndY(year + 23);
  }

  // 生年月日と計算年度を保持
  const onChangeDate = (e) => {

    let input = e.target.value;
    let y = parseInt(input.split("-")[0]);
    let m = parseInt(input.split("-")[1]);

    // 生年月日を更新
    setDate(input);

    // 年度を更新
    if(m > 3)
    {
      setYear(y);
    }
    else
    {
      setYear(y - 1);
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>学歴出力アプリ</h1>

          <div className="year">生年月日：
            <input type="date" value={date} min="1900-01-01" max="2050-12-31" onChange={(e) => onChangeDate(e)} />
          </div>

        <div className="print">
          <p>{inputJhsY}年 4月 {inputJhs}中学校 入学</p>
          <p>{jhsEndY}年 3月 {inputJhs}中学校 卒業</p>
          <p>{inputHsY}年 4月 {inputHs}高等学校 入学</p>
          <p>{hsEndY}年 3月 {inputHs}高等学校 卒業</p>
          <p>{inputUniversityY}年 4月 {inputUniversity}大学 入学</p>
          <p>{universityEndY}年 3月 {inputUniversity}大学 卒業</p>
        </div>

        <div className="ctr">
          <input value={inputJhs} onChange={(e) => setJhs(e.target.value)} type="text" placeholder="中学校名" />
          <input value={inputHs} onChange={(e) => setHs(e.target.value)} type="text" placeholder="高等学校名" />
          <input value={inputUniversity} onChange={(e) => setUniversity(e.target.value)} type="text" placeholder="大学名" />
          <button onClick={printText}>表示する</button>
        </div>
      </header>
    </div>
  );
}

export default App;

改造の課題

改造の課題

それでは、今回はプログラムの課題を出します。

今までの処理の解説やプログラムのソースコードを参考にして、小学校に入学した年、卒業した年、小学校名を扱うことのできる機能を追加してください。

説明が難しかったと思いますが、実際にこのように自分の手で実装してみると理解が深まります。

ぜひ、こちらの課題に取り組んでみてください。

まとめ

まとめ

今回の記事では以下を学習しました。

  • 入力されたデータから値を計算
  • 入力されたデータを加工して表示
  • 日付のデータ取り扱い

課題も出してみましたので、力を付けるために取り組んでみてください。

それではまた次回の記事でお会いしましょう。