仕事や趣味を通してJavaScriptのコードを書いている方であれば、「CodeSandboxを使ってReactのUIコンポーネントを作る」といってピンとくる方も多いと思いますが、実際に興味はあるけれど、どうReactを書けばよいのかわからないという方も多いと思います。
基本的な問題をCodeSandbox上で動作確認すること通して、JavaScriptに触れる機会をつくっていきたいと考えています。 コードを書くことに慣れるという点でも手を動かして考える機会にして頂ければ幸いです。
今回はCodeSandboxを使って、「ReactでTodoリストを作成」する方法について確認していきたいと思います。
オンラインのコードエディタ「CodeSandbox」を使ってみる
・オンラインのコードエディタ
Webサイト： https://codesandbox.io/
今回使用するオンラインのコードエディタです。Webエディタ上で簡単にJavaScriptの作成ができて、コーディングや、URLでの共有、GitHubとの連携も行うことができるサービスです。
開発の現場で使われるというより、個人の勉強やコードの共有の為に使われるサービスで、環境構築自体に時間を割かずにコードを書く勉強に取り組むことができます。
► CodeSandboxのTOPページ
CodeSandboxメニュー画面で表示されたテンプレートの中にある[React]をクリックして、Reactのプロジェクトを開始します。
まずは、CodeSandboxでReactのプロジェクトを作成し、Hello Worldを表示させてみましょう。
CodeSandboxのメニュー画面で表示されたテンプレートの中にある [React] をクリック
一度srcフォルダ内にあるファイルを全て削除し、index.js を新規に作成します。
以下のコードを記載して、「Hello World」を表示してみましょう。
まず、今回作成するTodoリストの画面レイアウトを確認してみましょう。
機能を追加する前に、ダウンロードした資料を参考にして、画面レイアウトを作成していきましょう。
Todoリストの画面レイアウトの作成
CodeSandboxで、ダウンロード資料のstartフォルダにあるプログラムで画面表示してみましょう。
↓のような画面が表示されると思います。
画面レイアウトが表示できた後は、イベントごとの機能を実装していきましょう。
タスクの追加機能の実装
タスクの削除
今回の内容はいかがだったでしょうか。スクリプトを実行しながら動作確認できると面白いなと感じて頂けた方もいらっしゃるかもしれません。自分にできる範囲のものから少しずつJavaScriptにも挑戦してみようかなと思っていただければ幸いです。
以上となります。
参考文献：
・岡田 拓巳『モダンJavaScriptの基本から始める React実践の教科書 』Informatics&IDEA（2021年）
