ReactはJavaScriptのライブラリで、開発者がWeb、モバイル、デスクトップ用のインタラクティブなユーザーインターフェイスを簡単に構築できるようになります。
この記事ではReact導入の最初の一歩として、環境構築から簡単なメッセージリストの作成まで行います。
目次
Reactプロジェクトを開始する
この記事では、Create React Appをして環境のセットアップをすることにします。
例によってnpmでグローバルインストールします。別のプロジェクトでも今後使用することを想定しています。
npm install -g create-react-app
さっそく、次のコマンドを実行してReactアプリを作成しましょう。
project-nameは任意のプロジェクト名を指定してください。この記事ではtest-appとしました。
create-react-app project-name
create-react-appコマンドを初めて実行する場合には、完了までに少し時間がかかるかもしれません。
プロジェクトのセットアップが完了したら、次のような画面が表示されるはずです。
画面の指示に従って、次のコマンドを実行してReactアプリケーションを起動してみましょう。
cd test-app
npm start
コマンドを実行すると、コンソールに次の出力が表示されます。
さらにブラウザが自動的に起動し、次のような画面が表示されます。
Reactアプリが無事起動しました。
Hello, World
srcディレクトリ内のindex.jsの内容を次のコードで置き換えてみます。
再度npm startで開発サーバを起動すると、ブラウザに次のように表示されるでしょう。
これはもっとも基本的なコードの例です。コードの各行には次の意味があります。
- 1行目：JSXを処理するためにReactパッケージをインポート
- 2行目：ReactDOMパッケージをインポートして、ルートReactコンポーネントをレンダリング
- 3行目：レンダリング関数を呼び出して、表示する内容を渡す
JSXでJavaScript式を評価するには、次のように中括弧{}で囲みます。
オブジェクトの場合には、次のようにすることができます。
コードを更新して、ブラウザに「Hello, Taro Tanaka」と表示されることを確認しましょう。
Reactコンポーネント
ここまでは、ReactDOM.render()がどのように機能するか簡単な例で確認してきました。
次にReactコンポーネントを作成して、コンポーネント内に表示の処理をカプセル化して、それをReactDOM.render()に渡すようにしてみます。
src/App.jsを次のコードで置き換えます。
React.ComponentクラスのサブクラスとしてReactコンポーネントを作成しています。
クラス内では、JSX要素を返すレンダリング関数を定義しました。
ブラウザで表示が正しく行われるか確認するために、src/index.jsを次のように変更します。
4行目でAppコンポーネントをインポートして、6行目でrender()に渡してます。
ブラウザで「Hello, World from React component」という文字が表示されることを確認しましょう。
スタイルの適用
この記事では、次の2つの方法について紹介します。
- インラインスタイリング
- 外部スタイルシート
まずインラインスタイリングを実装する方法から見ていきます。
このサンプルコードからReactのスタイリングが通常のCSSの記述方法と非常に似ていることがわかります。
ただし、オブジェクトリテラルでスタイルを指定していることに注意してください。
また、text-decorationの代わりにtextDecorationを使用していまが、このように基本的にはキャメルケースでの記述となります。
ステートレスコンポーネント/ステートフルコンポーネント
少し実践的な例として、メッセージリストの作成してみます。
メッセージリストには、メッセージの送信者、ステータス（未読・既読）、メッセージの内容を表示させるようにします。
まずは、単に情報を表示するコンポーネントを作成してみます。
このように単純に情報を表示するコンポーネントをステートレスコンポーネントと呼びます。
リストを表示するために、messageView.jsをsrcディレクトリ内に作成しましょう。
次にリストのスタイルを整えるためにsrc/App.cssも書き換えます。
最後にsrc/Appj.jsのコードを次のように変更して、リストが表示されるようにします。
ここまで完了したら、ブラウザで結果を確認しましょう。
次のような画面が表示されるはずです。
messageView.jsの3行目でクラスとして定義していますが、実際には次のように関数コンポーネントとして記述を簡略化できます。
コードを変更しても同じ結果が得られるはずです。
ステートレスなコンポーネントが無事作成できました。
今のところ静的な内容を表示するだけでしたので、表示する文字列を直接コードの中に記述していました。
しかし、実際のアプリではデータを取得して動的に表示を切り替えられるようにしたいはずです。
実現するためには、propsと呼ばれるものを使用しますが、これは親コンポーネントから渡されるデータとなります。
propsを受け入れられるように、コードを次のように書き換えます。
4行目でmessageにpropsから値を割り当てていますが、このpropsはステートフルな親コンポーネントから渡されます。
JSXではmessage変数を参照してメッセージの内容をページに出力します。
続いて、MessageViewの親コンポーネントを作成していきます。
新規のファイルmessageList.jsを作成して次のようにコードを記述します。
コードの5行目ではstateにメッセージ情報のオブジェクトを格納しています。
Reactの便利な機能の一つとして、stateオブジェクトが更新されると、コンポーネントが再レンダリングされるというものがあります。
コード17行目でstateオブジェクトのmessageプロパティをMessageViewコンポーネントに渡しています。
ここで渡した情報をもとに、MessageViewでレンダリングがされることになります。
最後にsrc/App.jsを編集して、ステートレスなコンポーネントMessageViewでなく、新しく作成したステートフルなコンポーネントMessageListコンポーネントをレンダリングすようにしましょう。
変更が完了したら、ブラウザで実行結果を確認します。
次のような画面が表示されれば成功です。
コンポーネントの再利用
通常、メッセージリストといえば、複数のメッセージが表示されるはずです。
ここまでで作成したMessageViewコンポーネントを使用して、複数のメッセージが表示されるようにしていきます。
src/messageList.js内でstate.messageに単一のメッセージのを格納していましたが、これを配列にして複数のメッセージ情報を格納します。
繰り返し処理のためにJavaScriptのmapを使用します。
MessageViewコンポーネントのインスタンスを複数生成するときに、keyというidなどの一意の値を指定する必要があります。
Reactがリスト内のどのアイテムが追加、変更、削除されたかを追跡するために必要です。
これらをMessageListに反映すると次のようになります。
ブラウザで結果を確認してみましょう。
次のようにメッセージリストが表示されるはずです。
MessageViewコンポーネントを使うことで、簡単にリストを作成することができました。
このようにコードの再利用が非常に簡単に可能になります。
この例でReactを使用するメリットを感じられたのではないでしょうか。
Reactフックを少しだけ
ここでは、MessageViewコンポーネントをリファクタリングして、Reactフックで状態を管理する関数コンポーネントに書き換えてみます。
この例ではメッセージ情報をstateオブジェクトへ代入していたコードを、useStateReactに置き換えました。
これにより、コンポーネントの状態を管理できるようになります。
大規模なプロジェクトになるとコンポーネントが深くネストされ、コンポーネント間のpropsのやり取りを何度も記述することになり、コードが複雑になりがちです。
prop drillingと呼ばれます。
フックを使えば、コードを簡略化してこの問題を解決できるというメリットもあります。（この記事ではフックについてこれ以上書きませんが、機会があれば書きます）
リファクタリングの続きを再開します。
MessageViewコンポーネントも関数コンポーネントに書き換えることができます。
ここでJavaScriptのアロー関数を使用していますが、アロー関数については以前の記事に整理しています。
最後にブラウザで実行して、リファクタリングで結果が変わっていないことを確認しておきましょう。
まとめ
今回の記事では、Reactの導入とメッセージリストの作成について扱いました。
本当に便利なライブラリで、アプリ開発がどんどん楽になっていくのを感じます。
私自身もまだ使いこなせていませんが、これからどんどん触って慣れていきたいので、今後も記事を追加していきます。
コメントを残す