ReactJSことはじめ

ずっと前からはやっているなぁ、と思いつつ、やり過ごしていたReactJS。
ついに重い腰を上げて学習してみることにしました。
ただ、ネットで情報を漁っても、日本語で丁寧に解説しているサイトって少ないのですよね。
仕方なく本家の「Get Started」を読んで、「Tutorial」を読んで、大雑把に理解できたので、
これからReactJSを学び始める人の役に立てればいいなと思いつつ、これから何回かにわたり
ReactJSの初歩（というかこれが全てか・・・）を連載していこうと思います。

まずはそもそもReactとは何をするものか・・・
というと、今の僕なりの解釈ですが、動的なコンテンツを表示する場合に・・・
一般的なWebアプリだと、HTMLのBodyタグを大半普通のHTMLタグを使って記述し、
一部動的に変化する部分をテンプレート言語などを使って、動的な変数の内容を出力します。
Reactの場合、変化するものがあるのなら、その部分はHTML言語として記述せず・・・
全部JavaScript（厳密にはBabelやJSX）で記述しちゃえばいいじゃん、というコンセプト。
なのでHTMLテンプレートに記述するのはごく普通のHTMLで、かつ、めっちゃ短い。
なぜ短いかというと、ReactJSでHTMLをほぼまるまるレンダリングするので・・・
レンダリングするためのきっかけとなるdivタグなどが１つだけあればOK。

日本語でごちゃごちゃ説明しても理解しがたいかもなので、何はともあれ、
「Hello World」を。

まずは雛形となるHTMLを作成。
[bash]





[/bash]
雛形はこれだけでOK。
今後 どんどん複雑な処理をするにしても、HTMLに書くのは、基本これだけ。

ReactJSを使わなきゃなので、ReactJSに必要なJavaScript３つを、Headタグに挿入。
[bash]

　　〜 中略　〜

　　〜 中略　〜

[/bash]

ここまででReactJSを行う準備ができたので、いざBabelScript（ReactJS）を記述していきましょう。
基本的にReactJSを記述するのはBodyタグ内です。Bodyタグ内に Scriptタグを作り、そこに記述していきます。
[bash]

[/bash]

結果は

Hello World!

以上。
「Hello World」を出すだけで、どんだけめんどくさいんだよとお思いになるかもしれませんが、
我慢してください。これだけは最低のルールです。

まずはScriptタグでこれからReactJSを書きますよーと目印をつけます。
そして 「root」というIDを持ったタグに HelloWorldクラスをレンダリングしてねとおねがいします。
その部分が

[bash]
ReactDOM.render(
,
document.getElementById(“root”)
);
[/bash]

ここで疑問が出てくると思います。HelloWorldタグってなんぞね？？？
そんなタグ HTMLにはありませんよね。
じゃあなにかというと、要はReactJSは独自のタグをScriptで作っていこうというコンセプトなのです。
聞いたことのない独自のタグ名を class 名として、クラスを作ります。
そのクラスの継承元は固定で React.Componentです。

よくわからないかもしれませんが、おまじないで、

[bash]
class 自分が作りたいタグ名 extends React.Component
[/bash]

と書くと覚えてください。

じゃあ、実際に作ったタグ名がどんなHTMLをレンダリングするかというのを決めるのが、
自作のタグ名のクラス（ここではHelloWorldクラス）の renderメソッドなのです。

[bash]
render(){
return (

Hello World!

);
}
[/bash]

renderメソッド内では、HTMLライクなタグを戻り値として戻します。
ここでは、 <h2>タグですね。

メソッドの戻り値というと普通は変数を連想するものですが・・・
ReactJSの場合はこのタグのようなもの を戻すのがルールです。
「タグのようなもの」というのが味噌で、これがタグではなく ReactJSのオブジェクトというもののようです。
（正確には間違っているかもしれません・・・）

たんに <h2>Hello World!</h2> と出力するのにどんだけ記述しなきゃならないんだよと
お思いかと思いますが・・・これは最低限のルールですので我慢してください。

これだけじゃあまりにつまらないので、動的に変化するものも入れてみましょう。

[bash]
class HelloWorld extends React.Component{
render(){
var dt = new Date();
var hms = dt.getHours() + “:” + dt.getMinutes() + “.” + dt.getSeconds();

return (

Hello World!{hms}

);
}
}
[/bash]

こうすると出力結果はブラウザーをリフレッシュするたびに変化させることができます。

結果はこんな感じ。

Hello World!19:20.33

とりあえず、初回はここまで。
覚えておかなきゃならないことは 独自のタグ名を作り、それをクラスとして定義し、
クラス内に renderメソッドを定義して、そこに出力したいHTMLライクなものを記述する。
最後に ReactDOM.render で、HTML上の固定のエレメント内に renderで出力する。

わかりにくいかもしれませんが、ざっとこんな感じです。

次回は TODOリストを作ってみましょう。