Chapter 02

1章.1 メンタルモデル?①:React と JSX

Satoshi Takeda
Satoshi Takeda
2021.10.01に更新

メンタルモデル?

初出がどこかは詳しく知りませんが、私が初めてメンタルモデルという言葉を目にしたのはドナルド・ノーマンの「誰のためのデザイン?」でした。

メンタルモデルとは、ある物事を認知する際に「これはこういうものであろう」と頭の中でのイメージのことを指しています。

バッテリーのイラスト

たとえば上記のような表示を見たときに、我々は残容量がなくなっていることや赤くなったら充電が必要であることなどを認識します。それはこれまでの経験が培ってきた認知したモデル = メンタルモデルと言えます。

なんとはなしに扱うライブラリやフレームワークも、ユーザーとなる我々開発者のメンタルモデルに寄り添うように設計されています(はずです)。はじめにそんな話を少しだけしましょう。

安心してください。これからクラス構文や継承を果物基底クラスやりんごサブクラスを使って説明するつもりはありません。

React, Angular から何を得るか

React や Angular を使っていると、あたかもそれだけで Web アプリケーションを動かせる気がしてしまうのですが、実際にはコンパイラが前段にないとブラウザで動くものにはなりません。そんなの当たり前じゃないか、とお思いの方も準備体操がてら少しだけお付き合いください。

2 つともコンパイル前提ではあるものの、独自の構文を駆使しながら我々が開発に従事する際、メンタルモデルを補強してくれるようなしくみを提供しています。

React と JSX

export function Foo({ bar }) {
  return <p>{bar}</p>;
}

React は JavaScript の構文の中に View が構築できるうえ、宣言的であるということが大きなメリットです。宣言的をもっとも体現しているのが JSX という構文でしょう。

HTML に類似した構文を記述可能であるため、戻り値からどういった UI を構築すべきか(言うなれば HTML 構造がどうあるべきか)決定的であることが特徴とも言えます。

しかしながら上記構文はブラウザネイティブで動かすことはできません。コンパイルが必須なのです。

各 JSX 要素は、React.createElement(component, props, ...children) を呼び出すための単なるシンタックスシュガーです

上記のコードは実際には Babel か TypeScript のコンパイラによって以下のようにコンパイルされます。

export function Foo({ bar }) {
  return React.createElement("p", null, bar);
}

JSX 構文だけを携えて旅に出ようと思ってはいけません。曲がり角で突然 Uncaught SyntaxError: Unexpected token '<' に遭遇し出鼻をくじかれてしまいます。

JSX はコンパイラのおかげで宣言的であると同時に、我々が Web UI を実現するための手段である HTML に酷似していることが、React の扱いやすさを体現しています。

また JavaScript を扱う開発者が React に取り掛かるとき、JSX を戻り値とすることで期待する画面結果を想起しやすく、新たなメンタルモデル構築までの距離が最短で済むということもメリットとしてあるでしょう。