Reactを使ったWebアプリ開発〜入門編

長い間本ブログを放置していましたが、久しぶりに更新します！
Webエンジニア未経験だった私ですがWeb系のベンチャー企業に転職して早二ヶ月が経過し、今のところ楽しく充実したフロントエンドエンジニア生活を送っています。
さて、今回はこの2ヶ月の開発で感じたことを簡単に振り返りつつ、今流行りのReactについて週末に勉強したことを残しておきます。
※React環境を構築する方法については弊社テックブログの以前の記事(webpackを使ったreact開発環境作成)を参照ください。

2ヶ月間のWebページ開発を通じて感じたこと

入社して以降、HTML+CSS+JavaScript(jQuery)を使ってWebページの開発を行ってきました。個人的にはプログラミングでは”可読性”が最も重要だと考えているので、「わかりやすいコードを書くぞ〜」という意気込みで開発スタートしたのですが、、、コードの量が増えるにつれ、自分でもコードを追っていくのが辛い状態に陥ってしまいました。自分の実力はさておき、これにはHTML+CSS+JavaScript(jQuery)を使うことによる2つの構造上の原因があるのでは？と感じました。
①一つのHTML要素に関連するファイルが3種類もある(構造→HTML、見た目→CSS、振る舞い→JavaScript)。
②HTML要素をコンポーネント化しても可読性自体はよくならない。
①については理解いただけると思いますが②について少し補足すると、例えば、”記事”をFLOCSSの考えに従って表現すると以下のようなコードになると思います。

このコードだけ見ると、あまり問題なさそうに見えますが、実際にはもっと複雑なコンポーネントを作成する場合がほとんどなのでコード自体が長くなり、且つ前後にも膨大な量のコードがあるため、「コンポーネント化した部分ってどこからどこまでだっけ？」という状態によく陥っていました。
この①、②の両方を解決するのがコンポーネント指向のJavaScriptフレームワーク/ライブラリです。
具体的には、以下のコードのようにWebページやアプリ全体を管理するページ（下ではindex.js）にはコンポーネント名のみを記載&詳細は個別ファイル（下ではArticle.js）に記載することで、コンポーネントがどこからどこまでかが一目で分かり(問題②の解消)、さらに個別ファイルには構造と振る舞いの双方が書けるので、わざわざHTMLとJavaScriptの2ファイルを用意する必要が無い(問題①の解消)というわけです。
※ちなみに、コンポーネント≒独自定義のタグという理解です。

JavaScriptフレームワーク/ライブラリを使うメリットは他にもたくさんあるのだと思いますが、このように”可読性”を向上させるという側面だけでも十分導入するメリットがあるのでは？というのが現時点の考えです。

JavaScriptフレームワーク/ライブラリについて

一旦、”React”、”Angular”、”Vue”の3つに絞って比較調査をしていると、以下のようなマトリクス図が見つかり、これが直感的に分かりやすいと感じました。

※引用元：Data binding code in 9 JavaScript frameworks
横軸がシンプルさ、縦軸が自由度となっています。
選定の基準として、
今自分が困っているのはViewの箇所→フルスタックである必要はなくシンプルでOK
今後大規模開発にも使っていきたい→ある程度自由度の高い方が良い
ということから3つの中ではReactが妥当なのではというのが今の所感です。

Reactとは？

Facebookが開発している、MVCでいうとViewに特化したJavaScriptライブラリです。
Virtual DOMやJSXが特徴と言われていますが、ここでは詳細の説明は省きます。

Reactで開発する上での基礎知識

Reactコンポーネントでは、PropsとStateという2つのオブジェクトを使ってデータを管理し、それらを使ってレンダリングしていきます。
この2つのオブジェクトは以下のような違いがあります。
Props：親コンポーネントから渡されるプロパティ
State：そのコンポーネントが持っている状態
図で表すと以下のイメージです。

また、いろいろなサイトを見た結果、設計する上で以下が重要になるようです。
・Propsは親コンポーネントから子コンポーネントに一方向に流れるように作ること。　(逆方向にはデータ伝達しない。)
・Stateを持つコンポーネントは極力少なくなるように作ること。
これらの点を意識しつつ、実際にアプリケーションを作っていきます。

Reactを使った簡易アプリケーションの実装

今回は、以下の本に従ってToDoアプリを作ってみました。
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
ネットの評価を見ていても、これぞ定番！というReactの技術書が見つけられず選択に困りましたが、この本はとてもわかりやすく書かれている印象です。(まだ途中までしか読んでいませんが。)
以下は、完成後のアプリのイメージです。

環境は弊社テックブログの以前の記事(webpackを使ったreact開発環境作成)を参照ください。
ディレクトリ構成は以下の通りです。
※エントリーファイル名も以前の記事と統一しているので、npm startでローカルホストにアプリが立ち上がるはずです。
project
– node_modules/
– src/
— app.js
— Application.js
–TodoInput.js
–TodoList.js
–TodoItem.js
– public/
— bundle.js
— index.html
– .babelrc // babel設定ファイル
– package.json
– webpack.config.js // webpack設定ファイル
【index.html】

【app.js】:エントリーとなるスプリプト

【Application.js】:アプリ全体を表現するコンポーネント

【TodoInput.js】：入力部分を表現するコンポーネント

【TodoList.js】：Todoの一覧を表現するコンポーネント

【TodoItem.js】：ひとつひとつのTodoを表現するコンポーネント

まとめ

今回は、これまでの開発を通じて感じたことやJavaScriptフレームワーク/ライブラリを使うことによるメリットを記載しつつ、最後にReactを使った簡易アプリケーションのコードを載せてみました。
少し内容が浅く広くなってしまったので、次回はReactを使ってオリジナルなアプリを作成しつつ、よりReactの詳細に踏み込んだ記事が書ければなぁと思っています。
それではー！