私は普段reactJSというライブラリを使いwebアプリケーションの開発を行っています。様々な機能を実装するなかで react楽しい！ react最高！ なんて思っているのですが、reactの何が良いのか自分でもはっきりわかってないところがあったので、reactのメリット・周辺技術についてをまとめて解説してみます。ちなみにjavascript3大ライブラリの残りの2つVueJS、AngularJSに関しては現在使ったことがないため、あくまでreact使いとしての立場からの説明となります。
javascriptライブラリの現状
以下は2019年8月現在から5年間のgoogle trendsです。世界的に見ると、中国で圧倒的人気のVueJSが人口数の面から圧倒的になってしまうので、技術の最先端のアメリカでのトレンドを指標にしています。
jQueryは明らかに下火になってきていますね。一時期フロントエンドのjavascript=jQueryのように扱われていたのが懐かしいですね…。
フロントエンドの技術の流行り廃りのサイクルは非常に早いので、今後どうなるかはわかりませんが、現状はコンポーネント指向のフレームワークでSPAを構築するのが一番モダンな開発手法のようです。
コンポーネント指向、SPAとは
コンポーネント指向
コンポーネント指向とは文字通りコンポーネント（部品）を組み合わせて1つのアプリケーションを作成するという考え方です。コンポーネントとはボタンや検索ボックスなど細かい要素も含みますし、ページ全体やヘッダー・フッターなどもコンポーネントです。コンポーネントのなかにはコンポーネントが存在するケースもあり、index.jsを起点としたDOM構造になっています。コンポーネントに対してユーザーが何か動作を行うと、コンポーネントの状態が変化したり、子コンポーネントに情報を送ることで画面が変化します。
jQueryよりも優れている点は、現在どのDOMを操作しているのかDOMの状態はどうなっているのか、コードの見通しが良くなる上、うまく設計するとコンポーネントの再利用が可能なのでコード量が少なくて済むといった点でしょうか。
SPA（シングルページアプリケーション）
SPAというとどうしても製造小売業を思い浮かべてしまいますが、全く関係ないです。SPAとは単一ページでサーバとのやり取りをすることなく、画面遷移やアニメーションの表示を実現するアーキテクチャのことです。コンポーネント指向と相性が良く、ユーザーの操作に対して一部のコンポーネントだけ変化するだけなので動作が軽くあたかもネイティブアプリのようにwebアプリケーションを動作させることが可能になります。ぬるぬるwebページが動作できるのでユーザーにストレスを感じさせません。また、基本的にサーバとのやりとりはAPI通信によって行われるのでサーバサイドはビューに干渉せず、クライアントのAPIリクエストに対してレスポンスを返すという役割に専念することにより、フロントエンドとサーバサイドを厳密に切り分けることが可能になります。
メリット
デメリット
reactでアプリケーションを開発する上で必要な技術
reactによるアプリケーション開発はreact単体で動かすというよりは様々なnpmモジュールを組み合わせて構成していくので、reactの知識というよりは周辺モジュールの知識のほうが必要になってきます。以下で紹介する周辺技術は１つ１つをとっても１記事作れるくらいのボリュームがあるので、今回は各々どういったことを実現できるのかを簡単に説明します。
TypeScript
TypeScriptはマイクロソフトによって開発されたプログラミング言語で、javascriptに省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットです。私自身もjavascriptというよりはtypescriptで基本開発を行っています。バグを未然に防ぐ意味でも導入しておいて損はないです。静的型付というとC言語のようにお硬いイメージをもってしまいそうですが、typescriptは型を宣言しなくてもよかったり、最悪とりあえずany（どんな型でも良い）を指定しておいて後で考えるなど比較的緩めに導入することも可能です。（設定によっては厳密に型定義することもできます。）
Webpack
WebpackとはJavaScriptアプリケーション用の静的モジュールバンドラーです。簡単に言うとアプリケーションをビルドする際に、複数あるjsモジュールを1つにまとめてくれる機能があり、開発中はコードの可読性を保つことができます。また、1つにまとめることでファイルのリクエスト数が減り、ページの読み込み速度の向上を実現させることができます。
Redux
ReduxはUIの状態管理ツールです。ReactのみでもUIの状態管理はできるのですが、アプリ全体で保持したい情報があるとき、その状態を子コンポーネントや孫コンポーネントに引き継いでいく必要があり、長い長いバケツリレーを繰り返すことでコードの可読性が低下してしまうという欠点があります。そういった課題を解決するためのツールといったところです。reactの状態がローカルステート、reduxの状態がグローバルステートと考えるとわかりやすです。原理としてはactionと呼ばれる関数でステートを変更するためのリクエストをreducerに送り、reducerでstoreに保持しているステートを変更するという仕組みなのですが、多少複雑なので別途記事を作成して解説します。
Rest-api
REST(REpresentational State Transfer)はステートを持たないWeb設計思想のこと。エンドポイントのurlはリソースの情報だけを表示し、どんなリクエストかはHTTPメソッド（”GET”、”POST”、”PUT”、”DELETE”）によって判断されます。単純にXML・JSONなどデータのみがレスポンスとして返されるので軽量なうえ、webやモバイルなどどんなデバイスのアプリでも同様の結果を返すことができます。
Axios
http通信を非同期で簡単に実装できるモジュールです。SPAの開発ではrest-apiを使いAWSやGCPにリクエストを送り、レスポンスとしてjsonデータを受け取りビューに反映という流れが一般的なのでこのモジュールは導入が必須だと考えられます。
UI Framework
以前はwebレイアウトといえばHtmlとCSSを使って地道に組み上げるものでしたが、UI Frameworkを使えばボタンやドロップダウン、スライドショー、テーブルなどリッチなUIを一瞬で実装することができます。オリジナリティはなくなってしまうかもしれませんが、GoogleのマテリアルデザインなどUIの標準化が進んできているので、利便性を考えたら使い慣れているUIのほうが良いかもしれません。個人的にはMaterial-UI、Semantic UIがおすすめです。
StoryBook
スタイルガイドのことです。コンポーネントをStoryBookに加えておくことで、コンポーネントの配色の確認やボタンが押されたときの挙動などを確認することができます。コンポーネントの重複作成の防止や、デザイナーやディレクターとのやり取りも楽にできそうですね。もう一つの利点として、コンポーネントのスクリーンショットテストができます。いちいち画面を見てレイアウト崩れの確認をしなくても良くなります。
Eslint・Prettier
Eslintは構文チェッカ、Prettierはフォーマッターです。開発効率を向上させるために必要なモジュールです。コードを書いている最中も、間違いがやルールに従っていないコードを書くと瞬時に指摘をしてくれます。たまに鬱陶しいと思うときもありますが、リアルタイムで間違いに気づけるのは本当にありがたいです。設定によっては、ファイルを保存したときやコミットしたときにコードを自動補正するようにすることも可能です。
Jest
単体テストツールです。mochaやJasmineなど単体テストツールも様々な種類がありますが、reactを開発する上で本家facebookが開発しているjestを使うのが一番相性が良いと考えられます。一般的なテストツール同様、テストしたい関数の実行結果と期待する実行結果を渡してやれば結果が一致するかをテストしてくれます。
Automation testing Tool
インテグレーションテストは手動で行うと結構な時間が取られてしまいます。やはり面倒なテストは自動化しておきたい。そんなときAutomation testing Toolを導入しておくと、ブラウザ上で自動でブラウジングして意図した挙動をするかテストが可能になります。ただし、単体テストと違い、通信状況や動作させる実行環境によって結果が変わってきたりするので、安定してテストを実施するためにはコードのチューニングや実行環境の統一化などハードルは高いです。それでも手作業でポチポチよりは相当にましだと思います。cypressやtestcafeはモダンなuiで比較的安定しているのでおすすめです。
コメント