TatamiGalaxyBlog

独り言

No.1 Reactアプリをつくる。

事前知識

crate react app でreactアプリの雛形をつくることができる。
上記はfacebookが提供しておりtypescriptでの構築も可能。

調査

create react app(以下CRA)はなにをしてくれている？

参考記事①

create-react-app が裏で何をやっているか理解する - Qiita
npm run ejectを行いファイルを比較している。
npm run ejectってなにいい？？

npm run eject

引用
npm run eject で create-react-app はアプリケーションの長寿を保証する - valid,invalid

  • create-react-app の裏側で react-script を介して使われている諸々のツール・スクリプトをコピーしたり、依存関係を package.json に書き込んだりして、自分で用意したのと同じ状態にするコマンド。実行以降、好きにカスタマイズし放題となる。

  • これがいつでも出来るのでロックインを回避できる、create-react-app が死んでもアプリケーション側で自前でこれらのツールを制御することが出来る。 つまり、create-react-app はこのツールよりも、アプリケーションの方が長いライフサイクルを持てることを保証するということ。

わかったこと
→ 様々な依存関係をいい感じに設定してくれるもの。ロックインのデメリットもあるが回避可能なコマンドが用意されている。

参考記事②(WebpackやBabelってなに)

Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita

CRAが出るまで(2016/07/22)と出たあとでの変化

アプリを作る際はWebpackやBabelなどの設定をいじる必要があり、導入障壁が高かったのですが、create-react-appを使えばそれらのステップをすっ飛ばせます。

CRAが出た背景

JSXやES6を使うにはBabelやWebpack、ESLintなどのツールが必要不可欠なので、学習コストが増加した。どのパッケージを入れればいいか悩んだり、依存管理が面倒になる

派生疑問

裏では何が使われている？(公開当時)
  • webpack、webpack-dev-server、html-webpack-plugin、style-loader
  • Babel (ES6/ES2015)
  • Autoprefixer
  • ESLint
(公開時点で)入ってないもの

わかったこと
→ JSXやES6からの手法として加わったconstやアロー構文に対応するために、WebpackやBabelがReactでも必要だったが個人で行うには参入難易度が高くなっていた。それらの問題を解決するべきCRAが誕生し、全てをいい感じにしてくれる。

参考記事③(SSG/SSRってなに)

Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳
内容が難しいかつ分量が多いので、断片的にしか読めていません、、、 ただ今後のReact、CRAについて詳しくまとめられているようだったので頑張って全部読もう！(To 自分)

CRAが出る以前

CRAをリリースする以前は自分で一連のツールをインストールして(中略)JSXを使うための正しいプリセットの設定や開発環境と本番環境で異なる設定、アセットのキャッシュのための正しい設定、linterの設定などがありました。

当初のCRAの目的
  • 設定なしで新規のReactプロジェクトを始めるための簡単な方法を提供する
  • コンパイル関連の依存関係を統合し、簡単にアップデートできるようにする
  • Reactチームがツールのアップデートをできるだけ広く展開できるようにする(例えば、Fast RefreshやHooksのlintルール)
CRAの問題
  • 代替品より遅い(viteとかのこと？)
    • 次世代バンドルツールについて
      • Turbopack、Vite
      • こちらも回り道がすぎるので調査は略。簡単にwebpackよりめちゃくちゃ早い
  • 定番のツールをサポートしていない

関連参考記事(引用)
脱 create-react-app! webpackでReact ×TypeScrip開発環境構築からHello World!まで

  • 重要な設定部分がブラックボックス化してしまう: 本来しっかりと理解して運用すべきであるバンドルの設定の箇所が見えなくなり、カスタマイズ等がやりづらい
  • 不必要なdependenciesが生まれる(バンドルサイズが膨らむ)
  • 依存関係の問題で新しい機能(新しいverがサポートされていない)が使えない。

分かったこと
当初の目的以外の様々な問題（動作の軽さ・ツールのサポート）がCRAに生じてきている。ただ、webpackなどの設定に頭を使わずReactを使えう分にはとても優秀である。CRAで困ったら他の候補について調べるくらいで良いのかも、、、ただCRAに生じている問題点を解消するために？それらを中心に？新たな開発ツールが出てきている。

派生疑問
記事に度々出てきていた単語が分からなかったので、、

  • SSG/SSRってなに
    参考記事
    Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する - Qiita
    とても丁寧に書かれている記事のため、ほとんどそのまま引用させていただいています。ただ、こちらも量が多く内容が難解なのでかいつまむ程度読みました、、

    • SSR(Server Side Rendering)、CSR(Client Side Rendering)
      • JavaScript の最も素朴な使い方は、HTML ファイルの中でscriptタグの中に JavaScript のコードを記述して、ブラウザ上で JavaScript が動作させること
      • (そのため？)React や Vue.js などの JavaScript ライブラリやフレームワークも基本的にはクライアントサイドでのレンダリングを行うのは納得できる話
      • CSRの場合、ユーザが使っているデバイスに依存するためJSの容量が膨大になるほどレンダリングの時間が長くなる可能性がある。すなわちサーバーサイドレンダリングを採用すれば、JavaScript を大量にクライアントに送信するという問題は回避できる。
      • React でサーバーサイドレンダリングを行えるフレームワークが Next.js
      • ただ、SSRであってもオーバーヘッドが発生する。そこで脚光を浴びているのが静的サイト生成(SSG)。
    • SSG (Static Site Generation)
      • クライアント側で処理を行う CSR も、サーバー側で処理を行う SSR も、ユーザーからのリクエストに応じてその場でレンダリング処理を行うことが速度を下げてしまう主要な原因のひとつだった。
      • SSGの発想:あらかじめレンダリングを行なっておいて、ユーザーからのリクエストに対して、すでに構築済みの HTML を返却するだけという形を取れば高速な応答を実現できるはず
      • SSG の真の力を引き出すためには、その構築済みの HTML を都度アプリケーション・サーバーから返却するのではなく、CDN に HTML ファイルのキャッシュを配置しておき、各ユーザーに近い CDN からそのキャッシュを返す、という方法を取ることが有効
        • CDN（Contents Delivery Network）
        • 参考サイト
          CDNとは？ ～ノンエンジニア向けにわかりやすく解説～ - Ｊストリーム
          • インターネットコンテンツを高速配信するために連携する地理的に分散されたサーバー
          • CDNは提供されたコンテンツをキャッシュ（コピー）して保持し、コンテンツの閲覧時にサーバーにかかるはずだったアクセス負荷を代わりに受け止めコンテンツを提供する。
      • アプリケーションをビルドするタイミングでデータ取得を行う。そのためユーザーからリクエストがあったタイミングでは、データは取得済み。
    • CSR(クライアントサイドレンダリング)再考
      • 取得したデータをクライアント側でキャッシュするReactライブラリについて
      • SWR(stale-while-revalidate)、react-query
        • 回り道がすぎるのでこの違いには触れない。
    • SSGとCSRの使い分け(簡単に)
      • 結果整合性（最新ではないデータが表示されることを許容する）でじゅうぶんである場合はインクリメンタル静的再生成（Next.jsの機能(SSG側)）で対応すればよい
      • 強整合性（つねに最新のデータが表示されてほしい）を求める場合は、都度のサーバーサイドレンダリングあるいは SWR 等（CSR側）を用いたクライアントサイドでのデータ取得を行う。

公式ドキュメントを読む

https://github.com/facebook/create-react-app

CRA以外のreactアプリの構築方法

Babel、webpackを自力で導入する。

参考サイト

webpackからviteなどに移行する。

参考サイト

今回色々調べたたが、
今回学ぶ主題としているのはReactの基礎的な構文や触れて学ぶことなので、CRAで行う。またCRAで作成したプロジェクトをyarn ejectやreact-app-rewiredにより拡張しviteなどに移行できるみたいなので、今後の課題として行いたいと思う。

構築(今回はCRA)

myPCの環境の確認とコマンドの確認

構築

さいごに

追記
State of JavaScript 2022: フロントエンドフレームワーク