あるWebサービスの開発メモ・React, JSX チート

• あるWebサービスの開発メモ・目次ページに戻る

やりたいこと

ここでは React と JSX (React = JSX?) のチートシートをコツコツつくっていきます。

チート品書き

• コンポーネントを強制的にレンダリングしたい
• 画像をリサイズしたい (執筆中)
• Next.js で画面サイズを取得する方法
• (これから書きます)複数のボタンコントロール (FAB: Floating action button) の onClick イベントで同じ関数を呼び出す (個別に関数を用意しないで共通の関数で処理する) が、どのボタンから呼び出されたのか関数側で判別できるように引数をつけて呼び出したい
• Username は最大１６文字に制限したい

JSX とは

React をご存じない方には説明が必要かもしれません。React では UI を「コンポーネント」という単位で実装していきます。このコンポーネントをより「楽に」つくれるように React は JSX という JavaScript の a syntax extension (構文拡張？) を提供してくれます。

コードを見た方が早いと思います。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

このコードは 公式ページ から転載したものです。公式ページには CodePen へのリンクがあるので、実際に動かしながら確認できます。

function ... で関数を定義し、const user ... で user オブジェクトを定義しています。

const element ... 部分が JSX です。JSX では {} (カーリーブラケット) で囲った内側に JavaScript を書くことができます。なのでこの h1 タグのなかは Hello, Harper Perez! になります。