React Training

なぜReactを学ぶのか?

React とは？

「ユーザインターフェース構築のための JavaScript ライブラリ」です。

  1. 宣言的な View（Declarative）
  2. コンポーネントベース（Component-based）
  3. 一度学習すれば、どこでも使える（Learn Once, Write Anywhere）

宣言的な View(UI)とは

命令的 UI と宣言的 UI の違いについて、「いいね」ボタンなどのシンプルな UI コンポーネントを想像してみてください。タップすると、以前は灰色だった場合は青色に、青色だった場合は灰色に変わります。

これを命令的 UI で構築する方法は次のとおりです。

if (user.likes()) {
  if (hasBlue()) {
    removeBlue();
    addGrey();
  } else {
    removeGrey();
    addBlue();
  }
}

基本的に、命令的 UI では現在画面に何が表示されているかを確認し、現在の状態で再描画するために必要なすべての変更を処理する必要があります。これには、前の状態からの変更を元に戻すことも含まれています。開発者は UI を手動で作成および管理し、状態の変更ごとに UI をどのように更新するかを具体的に指定します。これが実際のシナリオでどれほど複雑になるか想像できます。

一方で、宣言的 UI は次のようになります。

if (isLiked) {
  return <blueLike />;
} else {
  return <greyLike />;
}

宣言的 UI では関心が分離されるため、この部分では UI が特定の状態でどのように見えるかを処理するだけでよく、したがって理解がはるかに簡単になります。

React 登場前の Web アプリ開発の現場

主に以下の問題が多くの現場で発生していました。

  • 実装の協調を保つエンジニアがいないため、アプリ実装がカオス化していた
    • 炎上リスク
    • 修正によるデグレの発生
  • DOM 操作に関する理解不足によるパフォーマンス劣化
    • 前述した命令的 UI を指します

各年代ごとの状況を見ていきます。

1990 年代後半〜現在： Vanilla.js

Vanilla.js という名前は、ジョークサイトが由来です。

http://vanilla-js.com/

ライブラリサイズが「0 バイト」、パフォーマンス最速を謳っています。

JavaScript の DOM API を駆使してプログラミングしていく、プログラミングスタイルの総称として この名前が使われることもあります。

DOM を使いこなしてプログラミングしていくため、DOM 職人と呼ばれたりします。 局所的には高速である反面、大規模な Web アプリケーション開発では、細かなプログラミングルールを決めておく必要があり、また全体の設計・実装を理想的なかたちに保っていくことが難しい側面を持っています。場合によっては、 パフォーマンスの劣化を招きます。独自のフレームワークを構築していくことになるため、時が経過するとメンテナンスが困難になるという問題もあります。

2000 年代〜現在： jQuery

クロスブラウザ対応の DOM ユーティリティライブラリ。

2000 年代のブラウザは、IE、Firefox、Safari、Chrome 等のブラウザごとに DOM API の定義の有無や挙動が異なるという状況が続いていました。そこで登場したのが、jQuery です。jQuery は各ブラウザの差分を吸収した API を提供します。

スタティックなサイトの Web デザインに jQuery は広く普及しています。とくに、Web デザイナが好んで使用しています。

Web アプリの開発においても、jQuery が使われていたことがあります。ただし、jQuery のバイトサイズが比較的大きいため、現在ではあまり好まれていません。また、モダンブラウザでは、旧来の挙動の違いが解消されてきたので、jQuery の役割は終えつつあります。

ACCESS では、jQuery を新規の Web アプリケーション開発で利用することはありません。

2010 年代前半〜現在： 命令型 MVC、MVVM フレームワーク

jQuery とは異なり、アプリケーションの開発を目的としたフレームワークが数多く登場したのはこの時期です。 弊社では、一時期、Backbone.js という名前の MVC ライブラリが多くの案件で利用されていました。

このようなフレームワークの多くは、jQuery と同様に命令型のプログラミングスタイルです。そのため、大規模な Web アプリケーションの開発では、実装が複雑化してしまう問題を孕んでいます。ユニットテストの実装も難しくなる問題もありました。

この状況を解決するのが React

React では、以下の課題を解決します。

  • 宣言的に UI をプログラミングできる
  • DOM のパフォーマンス劣化の改善
  • 大人数の大規模アプリケーション開発に優れている

React は、世界で最も人気のある View ライブラリです。そのため、OSS の世界では多くの知見があります。 絶えず開発が続けられており、今後の成長も見込めます。

ACCESS では、Web アプリケーション開発で React の利用を推奨しています。 社内の多くの案件で利用されているため、本研修で学んだことが配属先の現場で必ず役に立つでしょう。

roadmap.sh/frontend

https://roadmap.sh/frontend

とりあえずはじめてみるには？

React の一番短いコードの例が下記です。

ReactDOM.createRoot(document.body).render(<h1>Hello, world!</h1>);

本研修では紹介のみとなりますが、手っ取り早く React を始めるための方法があります。

Online Playground を使う

ローカルで React を試す

https://ja.react.dev/learn/installation#try-react-locally

ローカル環境で React を試すには、この HTML ページをダウンロードしてください。そしてエディタとブラウザで開いてください！

React プロジェクトを始める

Vite で始める

最初の Vite プロジェクトを生成する

セットアップ

$ npm create vite@latest
  • プロンプトに従ってプロジェクトの名前を入力します（例：my-react-app）。
  • 次に、使用するフレームワークを選択します。react を選択して、React のプロジェクトを始めます。
  • さらに、TypeScript を使うかどうかを尋ねられた場合は、お好みで選択します。
$ cd my-react-app

依存関係のライブラリを install

$ npm install

開発サーバーの起動

$ npm run dev

その他フレームワークを利用する

https://ja.react.dev/learn/start-a-new-react-project

React だけで新しいアプリやウェブサイトを作りたい場合は、コミュニティで人気のある React フレームワークから、ひとつを選ぶことをおすすめします。

フレームワークなしで React を使うことも可能ですが、ほとんどのアプリやサイトにおいては、コード分割、ルーティング、データ取得、HTML 生成といった問題に対処するための開発が必要であることが分かっています。これらは React に限らずあらゆる UI ライブラリに共通の問題です。

フレームワークを使ってスタートすることで React での開発を素早く立ち上げ、後で実質的に独自フレームワークのようなものを作ってしまわずに済むようになるでしょう。

Next.js

Next.js の Pages Router はフルスタックの React フレームワークです。ほぼ静的なブログサイトから複雑でダイナミックなアプリまで、どんな規模の React アプリでも作成できる万能フレームワークです。

Remix

Remix は、ネスト状のルーティングを備えたフルスタック React フレームワークです。複雑なアプリを階層的に分割し、並列に読み込み、ユーザアクションに応じてリフレッシュすることができます。

Gatsby

Gatsby は、CMS ベースで高速なサイトを作成するための React フレームワークです。豊富なプラグインのエコシステムと GraphQL データレイヤーにより、コンテンツ、API、サービスの統合が簡素化されます。

Expo（ネイティブアプリ向け）

Expo は、Android、iOS、およびウェブ向けに、真にネイティブな UI を持ったユニバーサルアプリを作成できる React フレームワークです。React Native 用の SDK を提供し、ネイティブなパーツの使用を簡素化します

Previous
準備
Next
目次