ふんばりフロントエンジニアのブログ

新米フロントエンジニアのふんばっている日々と備忘録です。

「初心者と学ぶReact.js!」入門チックなことを書いてみよう

今回は何かと話題のFacebook謹製jsライブラリ「React.js」について学習した記録を書き綴ろうと思います。

Angular、Vue、Reactの御三家みたいなところはありますが、なんとなく名前がかっこいいのとFacebook製というところに惹かれ一週間前からちびちび学習してみた、というのが学習のきっかけですね〜

ということで学習してみたはいいものの、これまた意外と難しい...

チュートリアルが優しい!」ということでも有名なようですが、自分の理解力のなさが露呈してしまいましたねえ... (意外と同じようなかた多いのではないだろうか(希望)

さて、そんなことはさておきましてなんやかんやでReactで一通りの使い方や考え方を自分なりに掴んだつもりでおりますので今回書いてみようと思った始末でございます。

では早速、Reactとはどのような仕組みなのかをオレオレ解説でいってみよーと思います。

Reactの仕組みをオレオレ解説

Reactとは先ほどもいったように、Facebook謹製のjsライブラリです。

よく言われているのが「MVW」のV、つまりView部分を担っているのがReact。

そしてReactの考え方で重要なのは「Component(コンポーネント)」です。

このComponentは直訳で「構成要素・成分」などの意味がありますが、まさに役割としては意味の通りで「構成要素」と考えてもらっていいと思います。

まあjsを使用する中で「コンポーネント化」というのは聞き馴染みのある方も多いのではないでしょうか?

処理ごとにjsを分けて最終的に一つのjsにまとめて読み込む、というアレですね。

これはscssやphpのテンプレート化でも使われている考え方ですし、これからは「コンポーネント化することが主流となる」とも言われています。

少し脱線しましたが、要するにコンポーネントは構成要素で部品です。

このコンポーネントを最終的に組み合わせて一つのアプリケーションを作ることがReactの考え方で、それぞれをコンポーネントとして分けることでそれぞれの保守性を高めている、と考えて大丈夫そう。

少し文字が多くなってしまったので、ここで例をみてみたいと思います。

codepen.io

こちらは簡単なサンプルです。

こちらのサンプルはcodepenで作っていますが、ちょっと設定に戸惑ったのでメモ。

1.settingsからjsを「Babel」にする。

2.「Add External Scripts/Pens」からcdnのURLを読み込むか、「Quick-add」からReactを選ぶ

基本設定はこれで終わりますし、あとはコードを書くだけなので、よかったら試してみてください。

一番時間がかかったReactをnpmで使う場合も今度の機会に...

さて今回のサンプルですが、二つのクラス「Hello」と「World」を作り、それを「HelloWorld」というクラスでまとめて、最後にHelloWorldクラスをidがrootの場所に配置する、というもの。

Reactの記法はバージョンによってコロコロ変わっているようですが最新のドキュメントではこちらの記法が推奨されているよう。

クラスを作る方法は、「class クラス名前 extends React.Component」でいけます。

そしてこのクラスはほぼコンポーネントと考えて良さそう。

厳密に言うと違うようですがそんな感じの理解でいいでしょう(適当)

そしてクラスにはある重要なメソッドが含まれています。

それが「render」というメソッド。

このrenderについては正直あまり考えなくていいと思うのですが、どうやらHTML要素を生成するためのもののようです。

このrenderを使わないとどうにもなりませんし、renderで返すものが一つもないとえらーになります。

つまりコンポーネントを作成するにはrenderが必要で、renderで返すものがないとComponentは作成できない、ということですね。

さて、ここまではなんとなーく理解ができるような気がします。

しかし私を悩ませたよくわからないもの二つが↓から登場するのです...

codepen.io

こちらはボタンを押すとカウントが上がるというシンプルなアプリケーションです。

基礎を学ぶには一番いいのかな?と個人的に思いましたね。

そして私がよくわからなかったものは上記に出てくる「state」と「props」です。

正直、上記の例ではstateだけで動かせてしまうので最初のうちはpropsについて深く考えない方が得策な気がしましたね。

さて、まず攻略したいがのこのstateというもので、これは直訳すれば「状態」という意味を持ちます。

今回で言えばCountクラスの中の「state:状態」としてcountというプロパティを持っている、と言えます。

そしてReactの特徴なのが、このstateによって描画(render)されるものが変わっていくということ!

拙い例ではありますが、カウントがどんどん上がっていくのがいい例ですね。

ではこのstateをどのようにして更新していくのか?

それはsetStateというメソッドを使うことで実現することができます。

実はReactではstateを「this.state.count += 1」のように更新することはできません。

その代わりにsetStateというメソッドを使ってしっかりstateの値を変えることを明記する必要があるんですね。

setStateの使い方は上記の通りで「setState( { state名:変数や値 } )」とするのが作法です。

今回の例では最初に変数countを定義し、その変数を+1したのちにsetStateするという流れになっています。

この考え方は重要なので覚えておくといいですよ!きっと!!笑

そして今回定義している関数「countUp」なのですが普通のjsとは少し書き方が違いますよね。

これも作法なのでとりあえずは何も考えないでこのように書いてみてください。

さてここまでで、「class」「render」「state」について知ることができました。

次はいよいよpropsなのですが、propsはちょっと長くなるかもなのでとりあえず今日なこの辺で終わりにしようと思います...

初心者で拙い解説ではありますが、少しでもお役に立てればよいなあ...