グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



【React.js入門】関数コンポーネントで百マス計算を生成してみる

 

現在進行中のプロジェクトの為、goに入門して半年以上が経ちました。
goには多少なれてきたのですがこのプロジェクトでのフロントエンドにはReact.jsを採用することが決まっています。
vue.jsなどは多少触ったことがありますが、React.jsは初めての挑戦です。

React.js&Next.js超入門第二版を一通り読んでみて超入門は果たした状態ですがまだ全く身になっていません。
とりあえず何か作ってみないと身にならないので今回は本の4章あたりまでの知識を利用して百マス計算を生成するサンプルを作成してみようと思います。

完成したサンプルはこちらです

開発環境

Step1.プロジェクトの作成

※プロジェクト作成時に↓ のようなエラーが出たので「–legacy-peer-deps」を追加しています。

開発用サーバを起動して初期画面が表示されることを確認します。

ブラウザが勝手に起動し「http://localhost:3000」で初期画面が表示されます。

Step2.開発前の下準備

今回のアプリの見た目は「React.js&Next.js超入門」にならって、Bootstrapを利用します。 その為にまずはhyakumasu/public/index.htmlを書き換えます。

  • public/index.html

次にhyakumasu/src/App.cssを調整します。既存のApp.cssの下に以下を追記します。

あわせて、hyakumasu/src/App.jsを編集して初期画面を表示してみます。

ここまでで初期の見た目が設定できました。

Step3.useStateを利用して変数から表を作成する

まず最初のステップとしてuseStateの変数を作成し、表の繰り返しの部分をmapで実装してみます。

行方向をrows変数、列方法をcols変数で定義して、その数字の配列をmapで繰り返しながらテーブルをレンダリングしています。見た目は変わっていません。

Step4.「再生成」ボタンをクリックしたら数値が変わるようにする

関数を2つ新しく定義しています。 「reGenerate」関数は再生ボタンをクリックした際に呼び出され、rowsとcolsのステート値を変更しています。 ステート値が変更されると画面もフックの作用により自動的に変更されます。 「rondomArray」は0から10までの配列をシャッフルする関数です。 「再生成」ボタンに「onClick={reGenerate}」を設定したのでこれでボタンをクリックする度に表示が変更されていきます。

ここまでで百マス計算の生成機能の実装は完了しましたが、せっかくなので関数コンポーネントを分割してみます。

Step5.テーブルのヘッダー部分とそれ以外の部分を関数コンポーネントに分割してみる

3つの関数コンポーネント「App」、「Cols」、「Rows」に分割し、「App」のなかで 「Cols」、「Rows」を呼び出しています。 呼び出す際に値の受け渡しを行い、「Cols」、「Rows」側のpropsで受け取って利用しています。

さいごに

いかがだったでしょうか。Reactのほんの1部の機能しか利用していませんが、見通しよくすっきり記述することができました。 今回は単純に0~10までの数字をランダムに生成するだけでしたが、入力フォームを設けて生成する範囲を指定したり、作成した百マス計算の回答を生成したりする機能も比較的簡単に実装できるとおもいます。 ここからさらに改造して徐々にReactに慣れて行ければと思います。


この記事のカテゴリ

FOLLOW US

最新の情報をお届けします