CodeSandboxでReactのUIコンポーネントを作成してみよう

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

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

添付資料はこちらから

今回はCodeSandboxを使って、「ReactのUIコンポーネントを作成してみよう」をテーマに確認していきたいと思います。

Contents

1 はじめに
2 React ～モダンなWeb開発のためのライブラリ　について
3 Reactの基礎～問題演習～
4 問題1 JSX記法～ CodeSandboxでJSX記法を用いて、簡単なHTMLを出力する
5 問題2 コンポーネント分割～ Appという名前の関数コンポーネントを新規作成し、読み込む
6 問題3 関数でコンポーネント作成～ Greetingという関数コンポーネントを定義して、表示する
7 問題4 スタイルの扱い方～ style属性を記述してスタイルを適用する
8 問題5 Propsの利用～色とテキストをPropsとして受け取り、文字列を表示する
9 問題6 State の利用～数値のStateを定義し画面に表示し、ボタン押下時にカウントアップする

はじめに

　JavaScriptの開発で、最も基本的なツールと言えるのは、「Webブラウザ」でしょう。Webブラウザには、開発を強力にサポートしてくれる開発者ツールが用意されていますので、開発者ツールの使い勝手も選択肢の一つになるように思います。

　Windowsでは、F12キー
　macOSでは、 Command＋Option＋Iキー　　

を押すと表示できます。

HTML / JavaScriptの開発では、適宜テキストエディタやオンラインのコードエディタを使うことで仕事も早く進めることができます。ここでは、「Visual Studio Code」と「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の基礎」から確認していきたいと思います。