【React学習】〜Reactとは〜

　最近プログラミング熱が再燃したので、過去に買ったUdemyの講座を見直しました。
　前回投稿したのが１年前で、そのときにNode.jsやReactについて少しだけ学習したんですが、特にアプリ開発などはせず、学習が止まっていました。
　そこでもう一度講座を見直して、アプリを作ってみることにしました。

　現在稼働しているトランポリン採点集計システムは、PHPをベースに作られています。一部計算やajax通信のためにJavaScriptを使っています。なんとか動くところまではできましたが、「動くだけ」でコードが整理されていないので、アップデートが難しい状態です。今回学習したことを活かして、新しい集計システムを構築していこうと考えています。

　その前に、いくつか簡単なアプリを作ってみたので、制作過程で学んだことを、少しずつまとめていこうと思います。ただし、できるだけ自分の言葉で（自分の理解の範疇で）書いていきますので、間違えていることもあるのはご了承ください。

Reactとは
コンポーネントの何がいいの？

Reactとは

Meta社が開発したJacaScriptのライブラリ
仮想DOMを用いた動的なページの高速表示
コンポーネントを組み合わせてページを構築
ホームページ、Webアプリ、ネイティブアプリなど、様々な場面で活用できる

　React以外にこれまで使ったことがあるのはJQueryというライブラリだけです。「何か書き方が普通と違うなー」くらいにしか思っていませんでした。でもReactを使ってみると、「なんて便利なんだ！」と思いました。大規模なアプリを作っているわけではないので、ページの高速化を特に意識したことはないんですが、それよりも「コンポーネント」という概念がとても便利です。

　例えばこんな感じ。

const Example = ({ props }) => {
  return (
    <div>Hello World</div>
  );
};
export default Example;

　( ) => { … }はJacaScriptのアロー関数で、{ }の中の処理を実行します。この関数は戻り値としてHTML要素を返しています。普通はこんな書き方できなくて、要素を作って、プロパティを設定して・・・なんて作業をする必要があるんですが、これはひと目でdiv要素を返しているのかが分かります。

　これが「関数コンポーネント」というもので、これをexportすることで、どのファイルでも使うことができるのです。つまりこれで「部品」を作ったことになるわけです。

　今回作ったアプリのログイン画面です。これは「ヘッダー」「インプットとボタンの集まり」という２つの部品からなります。もっと細分化すれば、「インプットとボタンの集まり」は「タイトル」「インプット」「ボタン」となります。これら一つ一つをコンポーネントとして定義します。

コンポーネントの何がいいの？　

どんな部品かが分かりやすい
再利用できる（これが大事！！）

　ということでしょうか。特に２番は重要で、同じ働き（あるいは同じスタイル）を持つ要素を何度も作る必要がなく、大本の部品を修正すれば、アプリ全体で修正されるということです。
　コンポーネントにはporpsという情報を渡すことができるので、ボタンならテキストや色などの情報を渡して、形だけを共通化させることもできます。でもこれはCSSでもできることで、propsのいいところは、「オブジェクトや関数を渡せる」ということです。つまり、アラートを表示させるボタンとか、ログアウトするボタンとか、共通の「処理」を持った部品をアプリのいろいろな場所におけるということです。さらに、ボタンに渡した処理を変更するには、大本の処理を書き換えればいいだけです。

　詳しくはReactの公式ドキュメントをご覧ください。