Reactとは

目次 🌺

Reactを使うメリット🌴

React (React.js) はFacebook社が開発している JavaScriptライブラリ です。2013年にリリースされてから、急速に人気を獲得していき、今ではフロントエンドの代表的なライブラリのひとつととして挙げられます。世界中で数多のプロジェクトに React が採用されています。

React.js Webサイト

Reactを使って開発することで、複雑な動きや機能を持つフロントエンドアプリをよりメンテナンスしやすい形で開発することができます。例えば従来の直接的なDOM操作を多用する開発方法で、複雑な動きを持つWebサイトを開発しようとするとエンジニアがフロントエンドの複雑性を管理しきれず、サービスのメンテナンスが難しくなってしまうことが度々発生しました。

Reactは開発者がアプリの複雑性を適切に管理することをサポートし、アプリケーションをメンテナンス可能な状態にキープすることを助けてくれるライブラリです。

本チュートリアルはReactの基礎知識を固めつつ、実際にReactアプリを開発・テスト・デプロイしてみるところまでをご紹介します。

Reactはアップデートのサイクルが早く、ここでご紹介するReactの知識が古くなってしまう可能性がありますが、極力・適宜React本体のアップデートに追随しつつ、更新をかけていきたいと思っております。Reactに限らず、現代のモダンなJavaScriptフレームワークに言えることは、「直接的なDOM操作をなるべくしない」、「ReactにJSONなどのデータを渡せばそのままそれがHTMLとして構築される。」という手法・思想です

近年のWeb開発の流れとして、大規模なアプリケーション開発では直接的なDOM操作を多用することよりも、データをそのままJavaScriptのライブラリやフレームワークに流し込んでHTMLを生成・構築するという手法が主流になっています。もちろん、静的なLPページ構築や管理画面などそこまでリッチ・複雑な動きが必要ではない開発案件では従来のDOM操作を行う開発の方がコストが低く済むこともあります。それぞれの得意・関心分野に応じて棲み分けがなされていると言うことができると思います。

保守性・メンテナビリティの向上❄️

複雑な状態を持つWebページを開発するとしましょう。例えば

A: 「ユーザーがチェックボックスをチェックしているときには、ダイアログを出すが、チェックしていないときには出さない。しかし、ユーザーの入力しているメールアドレスに誤りがある時には例外的に表示させる」

B: 「ユーザーが利用規約ボタンにチェックをしており、課金状態にある場合には専用の文言を表示するが、そのどちらでもない場合にはユーザー登録用のフォームを表示させる」

などのページの複雑な状態管理を必要とするアプリケーションを従来のDOM操作の延長で開発・管理しようとすると、アプリケーションの状態がデータとして管理されず、またマークアップ (HTML)、スタイル (CSS)

ロジック (JavaScript)が分断されているため、開発者がコードを編集するときに意識・気をつけなければならないことが増えていく傾向があります。

それらの意識しなければならないことが段々と積み重なっていき、アプリケーション内部で複雑な状態管理が増えると、ある時点で複雑性が爆発し、なにか編集するたびに別の箇所が壊れるといったメンテナンスが難しいアプリケーションができ上がってしまうことが度々あります。

コードの見通しが悪くなり、「どこを編集すれば、一体どの機能に影響するのか?」といったことをエンジニアが把握することも難しくなります。こうなると、新規機能の開発や既存箇所の修正も難しくなり、サービスの開発速度にも大きく影響が出てしまうことがあります。

従来のDOM操作による開発では、開発者が意識しなければならないことが多くなる

Reactはこのような複雑なフロントエンドアプリの状態を適切に管理して、可能な限りメンテナンスのしやすいアプリを作ることをサポートしてくれます。Reactを使って 適切に設計 することで、アプリケーションの状態 (例えば、ユーザーがチェックボックスにチェックを入れたかなど) は データとして管理 され、ヘッダーや入力フォームなどのWebページの各部品は コンポーネント という細かな部品に還元されます。開発者はデータがユーザーのアクションによって更新された時に コンポーネントがどのように変化するか・振る舞うか を定義すれば良くなり、設計によってコンポーネント内部に 変更の影響範囲を抑え込む ことができるので、アプリ全体の状態管理がやりやすくなります。

また、Reactを使うことで、関数型の思想に則った作法など、ある程度一定のルールに従ってアプリケーションを作ることを強制され、TypeScriptやFlow Typeなど型システムとの親和性も高くなり、これらの機構を導入すれば、アプリケーションはさらに堅牢なものになります。

Reactを使えば、開発者が意識しなければならない要素が減る

また、Reactに限定されませんが、モダンなJavaScriptフレームワークやライブラリは CSSをスコープ化 する機能を持っています。 従来からCSSはグローバルに適用されるという問題があり、壊れにくく再利用しやすいCSSを書くために命名ベースのSMACSSやBEMなどの手法が考案されていましたが、これらの手法も命名に対して、開発者が意識・注意する必要がありました。

Reactを使うことで、スタイルをJavaScriptの中で処理することができ、グローバルではない局限された影響範囲を持つ (スコープ化した) スタイルを書くことができ、またマークアップ (HTML) とスタイル (CSS) とロジック (JavaScript)を コンポーネント というOne Setにして、安全にアプリケーション内部で使い回すことができるようになります。CSS-in-JSを実現するライブラリとして、最近では styled-componentsなども人気です。

UIの再利用可能性・テスタビリティの向上🎋

Reactを使用して、ボタン、リスト、ヘッダーなどのコンポーネント (HTML + CSS + JavaScriptがワンセットになったもの) を作成することで、従来よりも同じコンポーネントを複数の箇所で安全に使いまわしやすくなります。 また、一つ一つが独立したコンポーネントとして機能するので、コンポーネント単体としてテストを記述しやすくなるメリットもあります。

React Nativeで複数OS対応のモバイルアプリ構築🦋

現在一般的な手法でモバイルアプリを開発するためには、通常はAndroidはKotlin, iOSはSwift というようにそれぞれ、異なる言語で開発を行う必要があります。

React NativeというReactとJavaScriptで記述しつつ、Android, iOSアプリを開発できるフレームワークがFacebookから提供されており、こちらも人気です。

ReactNative Webサイト

本チュートリアルではReactを使ったWeb開発にフォーカスをあてているため、 React Native について詳細に立ち入ることはありませんが、解説書が幾つか販売されていますので、興味があれば参照してみてください。

Android/iOSクロス開発フレームワーク React Native入門

Reactを使う上での注意点🌻

コンテンツをクローラーに正しく認識させるのに工夫が必要となる場合がある

上記でReactのメリットを見てきましたが、ここではReactを使う上での注意点について見ていきます。

ブログやコンテンツ系のページ等ではSEOが特に大事になります。Reactに限定されませんが、モダンなフレームワークを使ってJavaScriptでHTMLを描画・生成する場合、Googleのクローラーが正しくページをレンダリングしてくれるかは保証はできません。頑張ってサイトを制作しても、いつまで経ってもGoogleにページが認識されず、検索をかけてもひっかからないことも考えられます。また、FacebookやTwitter用のMeta要素を描画するときにも工夫が必要となる場合があります。

Reactアプリを クローラーに確実に認識させたい 場合には通常 SSR (サーバーサイドレンダリング) がよく用いられます。しかし、 SSR には Node.jsの知識、ビルドツールやアーキテクチャー等に関する詳細な設定や知識が必要となり、考慮すべき点も増えます。もし、自前でSSRを実装したくない場合には、下記のフレームワークや静的ジェネレーターを試してみるのも良いと思います。

Next.js

Next.js Webサイト

Next.js はサーバーサイドレンダリングに関する一連の機能を提供するReact用のフレームワークであり、Zeit社によって開発が進められています。Next.js の指定するディレクトリ構成に従って、Reactコンポーネントを作成して、ビルドコマンドを叩けば、特に何も意識することなく、自動でReactアプリをサーバーサイドレンダリングしてくれます。最近はLP案件などでも用いられています。

React用静的サイトジェネレータ

また、最近ではLPやブログなどのSEOが重要なサイトを作る場合には、Reactを用いた静的サイトジェネレーターの利用も人気です。興味がある場合にはreact-staticGatsbyなどを参照してください。Reactを用いつつ、SEOを重視したサイトを構築できるようになります。

React Static Github

以上でReactの簡単な説明と、Reactを使用するメリット等をご紹介しました。次回からは実際にReactを使っていきましょう。

もし、本稿で React について興味を持たれて、さらに理解を進めたい場合にはReactを解説している書籍やWebサイトなどがありますので、参照してみてください。

速習 React 速習シリーズ

JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書

Reactドキュメント (English)