PaizaCloudの無料プランでReactをお試し！

React

2025.08.17

PaizaCloudはブラウザだけで開発環境を使える便利なサービスである。
ただし無料プランでは容量が非常に少ないため、create-react-app のようなnpmインストールは失敗してしまう。

そこでおすすめなのが CDN版React。
npm不要でHTMLファイル一つでReactを動かせるので、初心者やお試し利用に最適である。

まずは、前提知識として、Node.js と Reactについておさらいしておこう。

Node.jsとReactとは？

Web開発を学び始めると、よく耳にするのが Node.js と Reactである。
どちらもJavaScriptに関連した技術だが、役割は大きく異なる。

Node.jsとは？｜サーバーサイドで動くJavaScript

Node.jsの基本

JavaScriptをブラウザの外で動かせるようにした環境。
2009年に登場し、GoogleのV8エンジンを利用している。
これまでブラウザでしか動かせなかったJavaScriptをサーバーでも使えるようになった。

Node.jsでできること

Webサーバーを構築。（Expressなどのフレームワークが有名）
CLIツール※（npmコマンドなど）
※コマンドラインインターフェース (Command-Line Interface) を通じて操作するツール
APIサーバー※やリアルタイム通信（チャットアプリなど）
※アプリケーションプログラミングインターフェース（API）を提供する専用のサーバーのこと

Node.jsの特徴

非同期処理が得意 → 高速でスケーラブル。（利用規模の増減に柔軟に対応できる性質のこと）
JavaScriptをフロントエンド・バックエンド両方で使える。

Reactとは？｜ユーザーインターフェースを作るライブラリ

Reactの基本

Facebook（現Meta）が開発したJavaScriptライブラリである。
「UI（見た目）を効率的に作る」ことに特化している。
部品（コンポーネント）を組み合わせてWebアプリを作る仕組みである。

Reactでできること

動的でリッチ※なWebアプリ開発。
※従来のWebアプリケーションよりも表現力や操作性が高く、ユーザーにとって使いやすいアプリケーション
状態管理によるUI更新。（データが変わると画面も自動で更新）
SPA（シングルページアプリケーション）の開発に最適。

Reactの特徴

コンポーネント指向 → 再利用しやすい。
仮想DOMによる高速なレンダリング。
世界中で使われる人気No.1フロントエンドライブラリである。

Node.jsとReactの関係

実際のWebアプリ開発では、この2つを セットで使う ことが多い。

Node.js側 → APIサーバーを作る。
React側 → ブラウザでUIを作る。
両者はHTTP通信（REST API / GraphQL）でやり取りする。

CDN版Reactとは？

CDN（Content Delivery Network）から提供されるReactのライブラリを読み込んで利用する方法である。
つまり、npmでReactをインストールせずに、以下のようにHTMLで直接読み込む。

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

環境構築不要でReactが使えるのが最大の魅力である。

今回は、「Hello, React」を表示する手順をご紹介しよう。

手順①：PaizaCloudにログインしてサーバを起動

PaizaCloud の公式サイトにアクセスして、「登録無料」をクリックする。

まずは、アカウントを作成する。

「確認メールをabc@def.ne.jpに送信しました。メールに書かれたURLをクリックしてください。」とメッセージが出る。

「PaizaCloud 登録確認メール」を確認して、リンクをクリックする。

新しいブラウザが立ち上がるので、「新しいサーバを作成」をクリックする。

次にプランを選択する。ここでは、「無料プラン」を選択しよう。

「サーバ設定」で「Node.js」を選択して「新規サーバ作成」をクリックする。

手順②：新規HTMLファイルを作成

画面左側に「メニュー」がある。

「新規ファイル作成」をクリックする。

「hello-react.html」と入力して「作成」ボタンをクリックする。

手順③：Reactを使うHTMLコードを貼り付ける

作成した「 hello-react.html」を開き、以下のコードを貼り付けて保存する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const App = () => <h1>Hello, React</h1>;
      ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
  </body>
</html>