Web開発

【React.js】React.jsとは？環境構築やHello World表示までをご紹介

目次

1. React.jsとは？
2. React.jsの環境構築
   1. Node.jsのインストール
   2. 開発プロジェクトの作成
   3. プロジェクトの実行
3. React.jsでHello Worldを表示してみる
4. 最後に

今回は、JavaScriptライブラリの一つであるReact.jsの概要と環境構築からHello World表示までについてご紹介します。

JavaScriptライブラリに関しては、Vue.jsについても当ブログで紹介しております。

数記事に渡り、Vue.js及びNuxt.jsのナレッジを紹介しているので、興味のある方はそちらもご確認ください。

【Vue + vue-cli】Vue.jsとは？〜環境構築まで
https://www.dailyupblog.com/web_development/716/

【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築まで
https://www.dailyupblog.com/web_development/860/

今回は筆者が学習中のReact.jsを勉強したことの備忘録として記事にしていきたいと思います。

それではいきましょう。

React.jsとは？

React.jsとは、Facebook社が開発したWebアプリなどのUI部分を開発できるJavaScriptライブラリの一つです。

InstagramやSlack、Netflix、Yahoo!など、数多くのサービスでこのReactが使用されています。

年々、注目度も高まっていき、今ではReactの需要はかなり高いといえます。

Reactの特徴といえば、以前に紹介したVue.jsと同様にSPA及びSSRの開発ができるところです。

以前の記事でも同様に紹介していますが、SPA（Single Page Application）はページ遷移せず、1つのWebページ内で全ての処理を完結させるため、ユーザビリティが高く、効率的なアプリ開発が可能です。

また、SSR（Server Side Rendering）とは、従来のブラウザ側（クライアント側）で実行されHTMLを描画するJavaScriptをサーバー内部で実行し、HTMLを描画するものであり、SPAの欠点でもあった初期ロードが遅い問題を解決します。

React.jsの他に、Vue.jsやAngular.jsも同じくSPAやSSRでの開発ができるJavaScriptライブラリですが、この3つの中でもシェア数がダントツなのがReact.jsです。

React.jsの特徴として、公式サイトでは下記のように3つ挙げられています。

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

この3つの特徴から

• UIの部品に対し「このような表示（見た目）になります」と宣言するように実装できるという特徴を持っている
• 部分ごとにコンポーネントに分けて、カスタマイズしやすくなっている
• 既存ソースコードを書き換えることなく新機能などを追加できるため、どんなWebアプリにもすぐ導入できる

といったことがいえます。

React – ユーザインターフェース構築のための JavaScript ライブラリ
https://ja.reactjs.org/

React.jsの環境構築

それでは早速環境構築をしていきましょう。

※筆者の開発環境はmac環境です

なお、今回からReact.jsを学んでいくにあたり、実際の開発現場で使用することを想定して、TypeScriptを用いて開発をしていこうと思います。

TypeScriptに関しては、数記事に渡り紹介していますので、そちらも合わせてご覧いただければと思います。

【TypeScript】TypeScriptとは？概要やメリット、環境構築からHelloWorld表示
https://www.dailyupblog.com/languages/1680/

Node.jsのインストール

React開発環境にはNode.jsが必要です。

Node.jsをインストールしていない方のみ、下記公式サイトから自身のPCにあった最新のnodeをインストールしてください。
https://nodejs.org/ja/download/

インストールが完了したら、コマンドプロンプト（Macならターミナル）を開いて、下記コマンドを実行して、nodeがインストールされたか確認してください。

node -v

バージョンが表示されれば、OKです。

nodeコマンドが使えない場合、パスを通す必要があるので、その場合は下記手順に従って、パスを通してください。

Windows10の場合
https://qiita.com/shuhey/items/7ee0d25f14a997c9e285

Macの場合
https://qiita.com/nbkn/items/01a11392921119fa0153

開発プロジェクトの作成

Node.jsがインストールされたら、いよいよReactの開発プロジェクトを作成していきます。

ターミナル（コマンドプロンプト）にて、プロジェクトフォルダを作成したいディレクトリに移動したら、下記コマンドを実行してください。

npx create-react-app react-test --template typescript

前述の通り、TypeScriptを用いて開発をしていくので、「–template typescript」で、TypeScript用のテンプレートになるように指定をしてください。

「react-test」フォルダが作成されていると思います。

プロジェクトの実行

このフォルダに移動して、ターミナルで下記コマンドを実行してください。

//npmの場合
npm start

//yarnの場合
yarn start

すると、ブラウザ上に下記画面が表示されると思います。

これで環境構築は完了です。

React.jsでHello Worldを表示してみる

少しReact.jsを触ってみようと思います。

詳しいディレクトリ構成などに関しては、次回以降に紹介します。

エディタでプロジェクトフォルダを開いてください。

今回はTypeScriptを扱っているため、型整合性チェックやnull安全性チェックなどをコーディング中に自動で行ってくれるVisual Studio Codeがおすすめです。

さて、App.tsxを開いて下記のように書き換えてください。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;


↓↓↓下記のように書き換え


import './App.css';

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

ブラウザですでに開いているページを確認してください。

React.jsはホットリロードで変更が即時に反映されると思います。

下記のように変更されていたらOKです。

最後に

いかがだったでしょうか。

今回は、JavaScriptライブラリの一つであるReact.jsの概要と環境構築、Hello World表示までを紹介いたしました。

次回以降、React.jsの使い方を細かく紹介していこうと思います。

筆者も同時進行で勉強中なので、間違いもあるかと思いますが、ご了承ください。

一緒にReactを使いこなせるようになれるよう頑張りましょう！

次回：【React.js】React.jsにおけるコンポーネントとpropsの使い方をご紹介！
https://www.dailyupblog.com/web_development/1860/