Reactに関して、環境構築せずにCDN利用でもいいのでしょうか？ダメな状況はありますか。

Question

前提・実現したいこと

**CDNでもReactを実行できる認識なのですが、環境構築するメリットなどありますでしょうか。基本CDNでもいいのでしょうか。**CDNの方が手軽なのであえて環境構築する理由が気になります。
調べてみると、まずは環境構築を進められ、少しとっつきづらさはあるので、「CDN利用を進めたらいいのに」と思う場面もありました。

なにかCDN利用だと利用制限などあったりするのでしょうか。根本的な壁にぶつかったりするのでしょうか。現場意識で考えるとやはり環境構築した方がいい理由などあるのでしょうか。なにか認識が抜けていますでしょうか。

BootstrapとかだとCDN利用で、開発始める教育動画など多い気がします。
ReactだとほとんどNode.jsのインストールといった環境構築から始まるのが少し気になります。
(認識ではnode.js,yarn,create-react-appをインストールする認識)

有識者の方よろしくお願い致します。

試したこと

以下を調べ、サーバー負荷などを気にする必要はありそう。といった感想を持ちました。

CDNとは？SEO効果やメリット・デメリットを分かりやすく解説
CDNのメリットとデメリット〜Web制作/運営の幅が広がるCDNを知ろう第2回〜

Comments

[hentaiman]

多くの人はtypescriptを使えるかどうかが重要なようです　typescriptで検索してみましょう

[k499778]

かしこまりました。typescriptで検索してみます。一応過去に調べたことはあって、認識として静的型付けができるJSの拡張版のイメージです。調べる際のポイントなどありますでしょうか？検索ワード「typescript 〇〇」のように。

[hentaiman]

トランスパイル

[k499778]

かしこまりました

[hoshi-takanori]

TypeScript も重要ですが、React では各コンポーネントごとにファイルを分けて作るのが一般的なので、webpack などのモジュールバンドラーも重要ですね。

[k499778]

それがcdn利用ではなく、環境構築した方がいい理由につながるということでしょうか。

[hoshi-takanori]

そうです。webpack を使うには node や yarn などの環境構築が必須です。
(一般的には React などの依存ライブラリも一緒に webpack でまとめるので CDN を使わないことが多いですが、今調べたら webpack から CDN を使うプラグインもありますね。が、いずれにせよ webpack を使うには環境構築が必須になります。)

[k499778]

webpackを使うには、cdnでは厳しいから環境構築が必要ということですね！ありがとうございます

Answer 1

ReactだとほとんどNode.jsのインストールといった環境構築から始まるのが少し気になります。

まず、そのままではJSXをブラウザが認識できません。もちろん「JSXを使わずにReactを書く」という選択肢もありますが、その時点で一般的なフローからは外れてしまいます。

Comments

[maisumakun]

ブラウザでBabelなどを実行してJSXを解釈させることでもいったんの解決はできますが、毎回コンパイルコストが加算されますし、使える条件にも限度があるので、実用環境に使う設定ではありません。

[k499778]

ありがとうございます。かなりスッキリしてきました。
やはりCDNではやれることに制限や限度があるのですね。環境構築も一度把握してしまえばそこまでストレスではないので、基本的に環境構築から進めるようにいたします。