CodeSandboxでReactのTodoリストを作成してみよう

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

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

添付資料はこちらから

 

今回はCodeSandboxを使って、「ReactでTodoリストを作成」する方法について確認していきたいと思います。
 

オンラインのコードエディタ「CodeSandbox」を使ってみる

 

・テキストエディタ　Visual Studio Code

　Microsoftによって提供されているクロスプラットフォームのテキストエディタで、Windows だけでなく MacOS / Linuxに対応しています。Gitによるソースコード管理や、IntelliSense,デバッガなどの機能を搭載し、拡張機能をインストールすることで、開発のさまざまな用途で使用することができます。

【過去BLOG】：VisualStudioCode入門～例題を解きながら基本操作を覚えよう

 

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

 
► CodeSandboxのTOPページ

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

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

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

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

 

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

 

JavaScriptといえば、Webアプリケーションを作成する際、HTMLソースに組み込んで動的な処理を書くといったイメージをお持ちの方も多いのではないでしょうか。HTML5ではさまざまな機能をJavaScriptから使うことが前提とされ、サーバー側でJavaScriptの処理を書くということも一般的になりつつあります。

 
JavaScriptは、いまでは多くの端末やプラットフォームで動くプログラミング言語といっても良いでしょう。

 
開発で使われることも多い「TypeScript」などは、プログラムを書き、コンパイラを通して従来のJavaScriptとして出力することができます。

【過去BLOG】：TypeScriptで「Hit＆Blowゲーム（数字当て処理の実装）」を作ってみよう

 
　Web開発やスマホアプリを作る際に、JavaScriptに変換する機能があるといっても、他のプログラミング言語を使うというよりJavaScript自体のモダンな言語仕様を使ったほうが開発の効率はあがるでしょう。

 
　そこで、ECMA Internationalは、2015年に大幅に機能の追加されたECMAScriptの第6版を公開しました。この仕様は、とても画期的で、クラスやモジュール、イテレータ、ジェネレータ、アロー演算子、テンプレート文字列、型付き配列など、さまざまなモダンな要素が盛り込まれました。

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

 
ここでは、UIコンポーネントの作り方を確認することで、「Reactの基礎」から確認していきたいと思います。

 

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

 

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


 

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

 


 

 

Reactの基礎 ～問題演習～

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

 

添付資料はこちらから

 
まずは、関数でコンポーネントを作ってみることから考えたいと思います。アロー関数とJSX記法について確認していきましょう。

 


 


 

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

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

► 表示するHTML


 

問題2 コンポーネント分割 ～ Appという名前の関数コンポーネントを新規作成し、読み込む

 

問題1で記載したコードからコンポーネントを分割する為、関数の内容を「App.js」を新規作成してコードを記載してください。

 

index.js でAppという関数コンポーネントを以下のように読み込みましょう。

import {App} from "./App";

 

問題3 関数でコンポーネント作成 ～ Greetingという関数コンポーネントを定義して、表示する

 
以下のようにindex.jsに関数を定義してコンポーネントを作成し、
Greetingというタグを使用して、画面に「Good morning! / Hello!」と表示させてください。

 

問題4 スタイルの扱い方 ～ style属性を記述してスタイルを適用する

 
以下のようにindex.jsに作成したコンポーネントに
style属性を記述してスタイルを適用し、画面に「こんにちは！ / お元気ですか？」と表示させてください。

 

問題5 Propsの利用 ～ 色とテキストをPropsとして受け取り、文字列を表示する

 
以下のようにColoredMessage.jsにPropsを利用してコンポーネントを作成し、
色とテキストをPropsとして受け取って色付きの文字を返し、
画面に「 お元気ですか？」と表示させてください。

 

問題6 State の利用 ～ 数値のStateを定義し画面に表示し、ボタン押下時にカウントアップする

 
以下のようにApp.jsに数値のStateを定義し画面に表示し、
ボタン押下時にカウントアップする機能を実装してください。

 

---

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

以上となります。

 
参考文献：
・クジラ飛行机『いまどきのJSプログラマーのためのNode.jsとReactアプリケーション開発テクニック』(第5版) ソシム株式会社（2020年）

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