知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。「jQueryくらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出ればドキュメント(2019年2月に無事日本語化されました)を読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。厳密性や網羅性よりはイメージ優先なので、本来「DOM要素」と書くべき部分を「DOM」と略記しまくったりしていますが、ご了承ください。文法(アロー関数とか)を普通に使います。Reactを使う以上、どうせ何らかのトランスパイラはほぼ必須ですし、だいたい今どきBabelかTypeScriptか使ってない人とかおらんやろ(煽り)。この部分が怪しい人は先にアロー関数だけでも知ってから先に進んでください。以下の説明中、このアイコンで表すのは(2019年2月現在から見た)『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事自体はReactの最新に追従するように定期的に更新し、表現を見直しています。ReactがやることReactがやることは非常にシンプルで、APIも数えるほどしかありません。「暗記力を使って覚えることの少なさ」に関してはピカイチです。そのわずかなAPIに、みんな慣れ親しんできたjQueryのメソッドの大部分を駆逐してしまうほどの威力があります。Reactがやることを3行で説明すると、こうなります。「テンプレート的な関数」を作用させて、「仮想DOM」と呼ばれるDOMの設計図を取り出し、その設計図を使って本物のDOMを構築する。ここでいう「プレーンなJSのオブジェクト」とは、JSONをパースしたりするだけで取得でき、タグとかの文字列を一切含まない、クリーンなデータを保持しているJSオブジェクトと思ってください。APIなどからプレーンなオブジェクトを取り出し、そこからDOMを作り出すことはjQueryでもよくやる作業です。「商品データを一覧表示」なら、愚直にやるとこんな感じ。});});難しいことはしていませんが、見た目に直感的ではない感じはします。同じことをReactで書くと、こういう全く違う見た目になります(行数が増えているのは関数を分割したりしているから)。);});え~ととりあえず、面妖な外見のHTMLタグっぽいものを見て速攻逃げ帰りたくなった人がいますよね。なんとReactでは、このようにJavaScriptとHTML(?)が悪魔合体しているのが基本作法です。我慢してお付き合いください。筆者も当初はこの壮絶な外見を嫌悪して逃げていたクチですが、1日経たずにあっさり寝返りました。後でもう少し詳しく述べますが、とりあえずこの「タグ」は実際には単なる関数呼び出しであり、Babelなどに通すと機械的に関数呼び出しに変換されるので、これはあくまでJavaScriptです。これですが、お好みでsuperagentやaxiosを使っても構いません。DOMを直接切ったり貼ったりする部分はなくなり、代わりに2つのコンポーネント(というか関数)を定義しています。このタグっぽいものが、巷で話題の仮想DOMと呼ばれているアレです。これがこの記事に出てくる唯一のReactのAPIです。データを表示するだけならとりあえずこれさえあれば作れます。いうAPIを使ってコンポーネントを定義している記事を見た人がいるかもしれませんが、これは既にレガシーとなっています。今後書くコンポーネントはこのように単なる関数か、あるいは後述するES6のクラスで記述します。見、サーバサイド言語でもよく使われている、いわゆる「テンプレート」に似ている気がしませんか。ベースに処理をします。ItemListやItemDetailといった関数が返している「タグっぽいもの」はDOM要素ではなく、あくまで設計図であり、つまりは非常に軽量なJavaScriptのオブジェクトです。古典的なテンプレートエンジンでは、開発者はそのエンジン独自のテンプレート構文(ループとか)を覚え、テンプレートファイルを書いていきます。その代わりにReactでは、開発者はDOMの設計図をreturnする関数をJavaScriptで書いていきます。このHTMLタグっぽい記法と{}による任意の式の埋め込み以外に、独自規則はありません。そのまま使うだけです。それに対応する本物のDOM要素を指定した場所に構築してくれます。jQuery的なDOM操作を書かなくて済む理由です。Reactとは基本これだけをするライブラリです。んー、大したことない気がしませんか。いうか、これってサーバサイド言語(PHPとかJSPとか)で使ってきたテンプレートを、ちょっと面倒くさくしただけではないでしょうか。テンプレートと比べて何が嬉しいのでしょう。以下で述べていきます。呼ばれる新しい記法をJavaScriptに導入しています。これが必要な理由は単純で、普通のJavaScriptの構文だけを使ってDOMの設計図を読み書きするのは人間には辛いからです。JSON的なデータを記述するにはJavaScriptの構文は最強ですが、「要素や属性があって、子にはテキストノードや別の要素があって」というHTML/XML的なデータ構造を、素のJavaScriptは効率的に表現できません。