【ToDoアプリを作る】React × Mantineでリストコンポーネントを作る。

ReactとMantineを使ってToDoアプリを作成しています。

前回はアプリに使用するコンポーネント作成をしておりました。

【ToDoアプリを作る】React × Mantineで画面の設計に挑戦する。

今回はコンポーネント作成の続きとして、リスト用のコンポーネントを作成します。

リスト用コンポーネントの作成

componentsディレクトリにlist.tsxを作成して以下のコードをコピーアンドペーストしてください。

const elements:string[] = ["task1", "task2", "task3"]

function DemoList() {

  return (
    <ul>
        {elements.map((element) => {
            return(
                <li>{element}</li>
            )
        })}
    </ul>

  );
}
export default DemoList

上記のコードは仮のリストを入力したコードになります。

リストコンポーネントの解説

コピーしていただいたコードの解説をします。

[]で挟まれている部分は配列と呼び、複数のデータを一つにまとめたデータになっています。
この一つのまとまりに「elements」という名前がつけられています。

const elements:string[] = [“task1”, “task2”, “task3”] 　この部分がタスクの内容になっております。

constは次に来る文字列（今回はelements）の名前の定数を定義する際に使用します。
:stringは文字列の定数であることを意味しており、[]がつくことで、文字列のデータのみを扱うelementsという名前の配列を意味しています。

そして＝以降が定数の中身です。
“”で挟むことでその中身を文字列として扱うことができます。

task1、task2、task3の箇所が文字列になっているので、ここを変更することでリストの内容を変更することができます。

リストコンポーネントの名前はDemoListとしています。

その中に書かれている<ul>タグはリストを作成する際に使用されるタグで、<ul>タグで挟まれた<li>タグをリスト化します。

<ul>タグの中には以下の記述があります。

        {elements.map((element) => {
            return(
                <li>{element}</li>
            )
        })}

ここでキーになるのがmapです。

マップは配列内のデータ一つ一つに対して処理を実行するプロパティです。

今回の場合だとelements配列の中身を順に処理して、結果をelementという名前で出力します。

例えば、一つ目の”task1″をelementという名前として、elementを<li>タグで挟んだものを出力しています。
配列の1つ目の処理が完了すると2つ目、3つ目も同じように処理を行います。

結果としてこの部分は以下の通り書き換えることができます。

<li>task1</li>
<li>task2</li>
<li>task3</li>

そしてこの3つの<li>タグが<ul>タグに挟まれることによってリストを作成しています。

<ul>
 <li>task1</li>
 <li>task2</li>
 <li>task3</li>
</ul>

最終的に配列の中身を追加したり削除することで、タスクを追加したり削除する機能を実現させます。

現時点では3つのタスクがすでに登録された状態で一旦編集をストップします。

前回の記事と合わせて、ボタン用、テキスト入力用、リスト用の３つのコンポーネントを作成しました。

index.tsxにコンポーネントを追加

続いて、作成したコンポーネントをindex.tsxにimportします。

index.tsxを開いて、次のコードを一番最初に追加してください。

import DemoButton from '../components/button'
import DemoInput from '../components/input'
import DemoList from '../components/list'

コンポーネントの名前と保存先が異なる場合は適宜修正をお願いします。

次に、return（）内にそれぞれのタグを追加して保存しましょう。

return(
      <DemoInput></DemoInput>
      <DemoButton></DemoButton>
      <DemoList></DemoList>
)

npm run devコマンドをターミナルで実行し、ローカルホストにアクセスしてみましょう。

作成したコンポーネントがそれぞれ一つずつ表示されていればOKです。

今回の作業はここまでとします。
次回は追加したパーツの配置を変更し、リストにタスクを追加できるようにしたいと思います。

まとめ

• リスト用コンポーネントを作成した。
• 配列は複数のデータをまとめた一つのデータ
• :stringと書いて扱うデータの方を宣言した。
• <ul>タグ、<li>タグを使ってリストを作成した。
• mapプロパティは配列内のデータ一つ一つに対して同じ処理を実行する。
• 作成したコンポーネントをindex.tsxにimportして、return内に記述