CodeSandboxでReactのフォーム部品を操作してみよう

仕事や趣味を通してJavaScriptのコードを書いている方であれば、「CodeSandboxを使ってReactのUIコンポーネントを作る」といってピンとくる方も多いと思いますが、実際に興味はあるけれど、どうReactを書けばよいのかわからないという方も多いと思います。

基本的な問題をCodeSandbox上で動作確認すること通して、JavaScriptに触れる機会をつくっていきたいと考えています。 コードを書くことに慣れるという点でも手を動かして考える機会にして頂ければ幸いです。

Reactの基礎から確認したいという方は以下を参考になさってください。
参考： モダンJSから始める「React」入門

 

ここではCodeSandbox上でUIコンポーネントの表示方法とmapなどの基本的な関数の確認をした後、実際にReactのフォーム部品を作成していければと思います。

はじめに

 

HTML / JavaScriptの開発では、適宜テキストエディタやオンラインのコードエディタを使うことで仕事も早く進めることができます。今回は、CodeSandboxを使用していきます。

・オンラインのコードエディタ　CodeSandbox

► CodeSandboxのTOPページ

　 Webサイト： https://codesandbox.io/

今回使用するオンラインのコードエディタです。Webエディタ上で簡単にJavaScriptの作成ができて、コーディングや、URLでの共有、GitHubとの連携も行うことができるサービスです。

開発の現場で使われるというより、個人の勉強やコードの共有の為に使われるサービスで、環境構築自体に時間を割かずにコードを書く勉強に取り組むことができます。

CodeSandboxメニュー画面で表示されたテンプレートの中にある[React]をクリックして、Reactのプロジェクトを開始します。

 

React ～ モダンなWeb開発のためのライブラリ　について

 

JavaScriptの言語仕様については、2015年頃にES2015：ECMAScript（第6版）にて公開された仕様－クラスやモジュール、イテレータ、ジェネレータ、アロー演算子、テンプレート文字列、型付き配列など－の要素が盛り込まれました。

それは、言語仕様の話だけではなく、JavaScript開発を支援するライブラリ・フレームワークも日々登場しています。その中で注目されているのが、React.js, Vue.js, Augular.js などのライブラリです。

ここでは、UI部品のフォームを画面表示しながら確認していくことで、Reactの基礎事項を小テーマごとに復習していきます。

まずは、CodeSandboxでReactのプロジェクトを作成し、Hello Worldを表示させてみましょう。

CodeSandboxのメニュー画面で表示されたテンプレートの中にある [React] をクリック
一度srcフォルダ内にあるファイルを全て削除し、index.js を新規に作成します。

以下のコードを記載して、「Hello World」を表示してみましょう。

 

Reactの基礎 ～問題演習～

それでは、実際に資料をダウンロードしてReact基礎の演習問題を解いていきましょう。

添付資料はこちらから

まずは、JSX記法の復習をしてCodebox上で簡単なHTMLを出力することができたら、順にフォーム部品を画面表示して確認していきましょう。

 

問題1 JSX記法 ～ CodeSandboxでJSX記法を用いて、簡単なHTMLを出力する

CodeSandboxを使って、index.jsにJSX記法を用いてコードを記載し、次のHTMLが表示されることを確認してください。

► 表示するHTML

問題2 mapメソッドの使い方 ～ 配列の要素をmapメソッドを使って書き出す

 

以下のよう定義した配列を使って、

index.js内にmapメソッドを使用して、画面に「Hello, Dog　Hello,Cat　Hello,Rat」と配列の中身を表示させてください。

>> 画面表示

index.js

 

問題3 input, textareaの作成　：フォーム部品①～inputとtextareaタグ

以下のようなinputタグとtextareaタグを使って、

index.js内で、valueと onChangeに対してStateを連携させるようにして
画面例のようなユーザ情報を表示させてください。

>> 画面表示

index.js でコンポーネントの更新する為に、useStateという関数を使う場合、以下のように読み込みましょう。

import {useState} from "react";

 

問題4 ラジオボタンの作成 ： フォーム部品②～radio ボタン

以下のようなinputタグを使って、

index.js内で、valueと onChangeに対してStateを連携させるようにして
画面例のようなラジオボタンを表示させてください。

>> 画面表示

問題5 チェックボックスの作成 ： フォーム部品③～checkbox ボタン

以下のようなinputタグを使って、

index.js内で、valueと onChangeに対してStateを連携させるようにして
画面例のようなチェックボックスを表示させてください。

>> 画面表示

問題6 プルダウンの作成 ～ フォーム部品④～selectとoptionタグ

以下のようなinputタグを使って、

index.js内で、valueと onChangeに対してStateを連携させるようにして
画面例のようなチェックボックスを表示させてください。

 

---

今回の内容はいかがだったでしょうか。スクリプトを実行しながら動作確認できると面白いなと感じて頂けた方もいらっしゃるかもしれません。自分にできる範囲のものから少しずつJavaScriptにも挑戦してみようかなと思っていただければ幸いです。

以上となります。

参考文献：
_・岡田 拓巳『モダンJavaScriptの基本から始める React実践の教科書 』Informatics&IDEA（2021年）