ReactJSによるフロントエンド開発

react-logo

私は普段reactJSというライブラリを使いwebアプリケーションの開発を行っています。様々な機能を実装するなかで react楽しい! react最高! なんて思っているのですが、reactの何が良いのか自分でもはっきりわかってないところがあったので、reactのメリット・周辺技術についてをまとめて解説してみます。ちなみにjavascript3大ライブラリの残りの2つVueJS、AngularJSに関しては現在使ったことがないため、あくまでreact使いとしての立場からの説明となります。

javascriptライブラリの現状

以下は2019年8月現在から5年間のgoogle trendsです。世界的に見ると、中国で圧倒的人気のVueJSが人口数の面から圧倒的になってしまうので、技術の最先端のアメリカでのトレンドを指標にしています。
jQueryは明らかに下火になってきていますね。一時期フロントエンドのjavascript=jQueryのように扱われていたのが懐かしいですね…。
フロントエンドの技術の流行り廃りのサイクルは非常に早いので、今後どうなるかはわかりませんが、現状はコンポーネント指向のフレームワークでSPAを構築するのが一番モダンな開発手法のようです。

compare_lib

コンポーネント指向、SPAとは

コンポーネント指向

コンポーネント指向とは文字通りコンポーネント(部品)を組み合わせて1つのアプリケーションを作成するという考え方です。コンポーネントとはボタンや検索ボックスなど細かい要素も含みますし、ページ全体やヘッダー・フッターなどもコンポーネントです。コンポーネントのなかにはコンポーネントが存在するケースもあり、index.jsを起点としたDOM構造になっています。コンポーネントに対してユーザーが何か動作を行うと、コンポーネントの状態が変化したり、子コンポーネントに情報を送ることで画面が変化します。
jQueryよりも優れている点は、現在どのDOMを操作しているのかDOMの状態はどうなっているのか、コードの見通しが良くなる上、うまく設計するとコンポーネントの再利用が可能なのでコード量が少なくて済むといった点でしょうか。

SPA(シングルページアプリケーション)

SPAというとどうしても製造小売業を思い浮かべてしまいますが、全く関係ないです。SPAとは単一ページでサーバとのやり取りをすることなく、画面遷移やアニメーションの表示を実現するアーキテクチャのことです。コンポーネント指向と相性が良く、ユーザーの操作に対して一部のコンポーネントだけ変化するだけなので動作が軽くあたかもネイティブアプリのようにwebアプリケーションを動作させることが可能になります。ぬるぬるwebページが動作できるのでユーザーにストレスを感じさせません。また、基本的にサーバとのやりとりはAPI通信によって行われるのでサーバサイドはビューに干渉せず、クライアントのAPIリクエストに対してレスポンスを返すという役割に専念することにより、フロントエンドとサーバサイドを厳密に切り分けることが可能になります。

メリット

  • UXが向上する
  • アプリケーションを疎結合にできる
  • サーバレス(Faas)と相性が良い
  • コードの見通しが良くなる
  • デメリット

  • javascriptのコードが多い分、初期ページの読み込みが長い
  • 初期ページの読み込みが長い分、ページ滞在が短いサイトには向かない
  • すでにRails+jQueryなどで組まれているサイトをSPAにするのはめちゃくちゃ面倒
  • reactでアプリケーションを開発する上で必要な技術

    reactによるアプリケーション開発はreact単体で動かすというよりは様々なnpmモジュールを組み合わせて構成していくので、reactの知識というよりは周辺モジュールの知識のほうが必要になってきます。以下で紹介する周辺技術は1つ1つをとっても1記事作れるくらいのボリュームがあるので、今回は各々どういったことを実現できるのかを簡単に説明します。

    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で比較的安定しているのでおすすめです。

    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする