React公式ドキュメントを読む1 「Hello World」を表示

まず、必要なReactファイルを読み込む

CDNで読み込むのが簡単

Reactは、CDNで読み込んで利用できます。React本体をインストールして利用することもできますが、とりあえずReactを軽く動かしてみたい場合などには、CDNで読み込んで利用するのが簡単です。

CDN（Content Delivery Network＝コンテンツ配信ネットワーク）とは、多数の利用者に効率的にコンテンツを配布するための仕組みです。配布するコンテンツをコピーして複数のサーバに分散しておくことで、オリジナルコンテンツのあるサーバへの集中アクセスを避けられます。

ReactをCDNで読み込むには？

ReactをCDNで読み込むには、HTMLソース中に以下のように記述します。 このソースを自分のHTMLファイル内にコピー＆ペーストすれば、Reactを利用できるようになります。 

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

unpkg.comについて

上記のHTMLソースでは、script要素のsrc属性で「https://unpkg.com/～」で始まるURLを指定しています。「 unpkg.com 」は、npmに公開されているファイルをいろいろと配布しているCDNです。JavaScriptフレームワークを利用するなら、必ず目にするURLと言えるでしょう。

Reactを読み込めるCDNは「 unpkg.com 」だけではなく他にもありますが、React公式サイトでは「 unpkg.com 」から読み込む例が紹介されています。特にこだわりが無ければ、それにならっておきましょう。

React公式サイト： https://ja.reactjs.org/docs/cdn-links.html

crossorigin 属性とは

CDNでReactを読み込む際には、 crossorigin属性を指定することが推奨されています。crossorigin属性とは、別オリジンからリソースを読み込む場合に、文書内でリソースを利用する際のルールを指定するための属性です。

上記のHTMLソースではcrossorigin属性の値が省略されていますが、属性値を省略した場合には crossorigin=”anonymous” と指定したのと同じになります。 crossorigin=”anonymous” は、異なるオリジンにあるリソースへのアクセス権を、ブラウザに対して与える指定です。

CDNで読み込む場合、開発完了後は本番用ファイルに差し替える

CDNで読み込むReactファイルには、開発用の読み込み先と本番用の読み込み先があります。上記ソースでは開発用ファイルを読み込み先として指定しています。開発が完了して、いざ本番のウェブサイトとして公開する際には、以下のソースに書き換えて利用することが推奨されています。

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

開発用の読み込みファイルと本番用の読み込みファイルがある理由

開発用と本番用の違いですが、開発用のReactファイルは適宜コメントが入っていたり、ホワイトスペースでコードが見やすくなっています。一方、本番用のReactファイルでは不必要なコメントやホワイトスペースなどは取り除かれた縮小版となっています。

Reactの内部を参照しながら開発する場合には開発用ファイルの方がコードを読みやすく、公開が始まれば最小化された本番用ファイルの方が無駄をそぎ落としてあって軽くて良いというわけです。

２つのファイルを読み込む

ReactをCDNで利用する場合、react.***.jsとreact-dom.***.jsの２つのファイルを読み込みます。２つのファイルには、それぞれ以下の役割があります。

  • react.***.js … Reactの基本スクリプト
  • react-dom.***.js … ブラウザ上でDOM操作をする際に必要となるスクリプト

react.***.js は、Reactの基本スクリプトです。React製のアプリを動作させる際には共通して必要になるファイルです。

react-dom.***.js は、ブラウザ上でDOM操作をする際に必要となるスクリプトです。React製のアプリをブラウザ上で動作させる場合に必要となるファイルです。

react.***.jsとreact-dom.***.jsの２つのファイルは、ブラウザ上で動作するReact製のウェブアプリを開発するなら両方とも必要になります。せっかくなので、それぞれのファイルの内容を見ておきましょう。

うーん、分かりません。上記のファイルの内容が分からなくても、CDNで読み込むだけで高度なUIのウェブアプリを作れるのですから、ありがたいことです。

「Hello World」と表示してみる

なぜ「Hello World」？

CDNでのReact読み込みの指定ができたら、Reactを使って画面に「Hello World」と表示してみましょう。その手順に入る前に、なぜ「Hello World」と表示するのか疑問に思われる方がおられるかもしれませんので、簡単に説明しておきます。

プログラミングの学習をする場合、その技術を使って画面に何らかの文字列を書き出すところから始めるのが定石となっています。書き出す文字列はなんでも良いのですが、プログラミング学習の世界では「Hello World」と書き出すのが定番です。「Hello World」に深い意味はなく、「こんにちは」でも「あいうえお」でも何でも構いません。

実際にHTMLファイルを作成して「Hello World」と表示してみよう

それでは、実際にHTMLファイルを作成して「Hello World」と表示してみましょう。以下のHTMLソースをコピーして、「hello.html」などの適当なファイル名で保存してください。そのファイルをブラウザで表示した際に、画面に「Hello World」と表示されればReactが動作していることになります。 

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
  <div id="hyouji"></div>
  <script>
    ReactDOM.render(
      React.createElement('div',null,'Hello World'), 
      document.getElementById('hyouji')
    );
  </script>
</body>
</html>

上記のサンプルソースをHTMLファイルにしてありますので、よろしければ参考にご確認ください。

https://programming-world.net/sample/react_hello_world1-1.html

上記リンクをクリックすると、画面に「Hello World」と表示されているのが確認できるかと思います。

とにかくReactを動かすことができました。

さらに理解を深めるために次回へ続きます。

前の記事

Reactで何ができるのか？Reactでできること

次の記事

React公式ドキュメントを読む2 公式ドキュメントの「Hel…