【誰でもできる】ReactをHTMLとCSSの知識だけで使う方法

もっとも効率的なReactの勉強方法

今では私は日常的にReactを使って仕事をしていますが、数年前はReactをどういう風に使えばいいのか、まったくわかっていませんでした。

そもそもReactのベースとなっているJavaScriptの理解すらおぼつかない状態だったので、Reactを始めるスタートラインにすら立っていなかったといっていいでしょう。

そういう中で私がした方法は、「習うより慣れろ」のアプローチです（詳しくは下の記事を参照）。

プログラミング勉強をしている人は真面目な人が多いので、一つ一つ順番通りに理解を積み重ねていくアプローチを取ることが多いですが、理屈を後回しにして先に手の動かし方を覚える方が結果的には近道、ということも多くあります。

本記事は「Reactは難しいと思ってたけど、自分でもできそうだ」というポジティブな気持ちを抱いてもらうことを目的として、これまでReactもJavaScripも触ったことのないビギナー向けに書き進めていきます。

なお予備知識として、HTMLとCSSは理解をしていてください。

OSはMac、コードエディターにはVSコードを使っていきます。

React開発の下準備

React開発にはNode.jsが必要なので、下の公式サイトからダウンロードしてください。

ダウンロードできるバージョンには安定版の「LTS」と最新版の「CURRENT」がありますが、通常は「LTS」をダウンロードしましょう。

• https://nodejs.org/en/download

create-react-appのダウンロード

Reactは複雑なテクノロジーが組み合わさって作られているので、開発を始めるには最初にさまざまな設定をする必要があります。

しかしそれを毎回行なっていると時間がかかるので、Reactの開発元Facebookは公式のスターターキットを用意しています。

それがcreate-react-app (CRA)と呼ばれるもので、必要なパッケージやホットリロードなどの機能がすでに用意された状態になっており、React開発をすぐに始めることができます。

まずはcreate-react-appをダウンロードするフォルダにターミナルで移動しましょう。

ターミナルは「アプリケーション」フォルダ内の「ユーティリティ」フォルダにあるので、クリックして開きましょう。

ターミナルを開いて現在の場所を確認してみます。

通常は一番上位にあるホームフォルダになっていると思いますが、わからない場合はpwdを打ちEnterを押せば今いるフォルダの場所がわかります。

mod728:~ mod728$ pwd
/Users/mod728

このように/Users/mod728や/Users/Takeshiなどとなっていれば、今いるのはホームフォルダになります。

今回はダウンロードフォルダにcreate-react-appをダウンロードしたいので、ホームフォルダからダウンロードフォルダに移動します。

最初に今いるホームフォルダに含まれているフォルダを表示してみましょう。

ls（エルエス）と打ってEnterキーを押してください。

mod728:~ mod728$ ls
Applications	Downloads	Public
Desktop		Library		Pictures
Documents	Movies

今いるホームフォルダの中にDownloadsフォルダが確認できるので、ここに移動します。フォルダ移動のコマンドcdを打ち、スペースを一つあけて移動先のDownloads、そしてEnterキーを押してください。

cd Downloads

ダウンロードフォルダに移動できたか確認してみます。

lsでDownloadsフォルダの中身を表示させてみましょう。

ls

次のようになります。

mod728:downloads mod728$ ls
work	travel	  hobby    books	

これが正しいか確認するために、Finderでダウンロードフォルダを見てみましょう。

Finderでダウンロードフォルダを開いて、ターミナルで表示された中身と一致していたら、いまターミナル上でたしかにダウンロードフォルダにいることになります。

それではここにcreate-react-appをダウンロードします。

次のコマンドをターミナルに入力してください。

npx create-react-app react-weather-app

最初のnpxはcreate-react-appをダウンロードするときに必要な一つの決まり文句と考えてください。

npxの横のcreate-react-appが、create-react-appのダウンロードを指示するもので、最後のreact-weather-appはダウンロードしたフォルダの名前となります。ここは好きな名前を使って大丈夫です。

Enterを押して実行します。

なお場合によっては下のようなメッセージが表示されることがあります。

Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

この場合は指示通りYesを表すyを入力し、Enterを押します。

ダウンロードが完了したらFinderでダウンロードフォルダにいってみましょう。

「react-weather-app」というフォルダができていると思います。

このフォルダをVS Codeで開きましょう。

VS Codeを起動し、上部メニューバーの「File」から「Open...」へと進み、ダウンロードフォルダ内の「react-weather-app」を選択して開きます。

ここまででReactの開発環境の準備が完了です。

create-react-appの中身

VS Codeでreact-weather-appのフォルダを開いてみると、次のような構成になっていると思います。

複数のファイルとフォルダが入っていますが、開発で使っていくのはsrcフォルダです。srcはソース（source）の略で、その名前の通りソースコードがすべてここに入っています。

src以外のフォルダとファイルも簡単に解説します。

node_modulesフォルダにはnpmからダウンロードされたパッケージが保存されています。アプリ開発には必須のフォルダですが、本書ではこまかく触れないので無視して大丈夫です。

publicフォルダには開発完了後、オンライン上に公開する準備ができたファイルやデータが入っています。次章で少し触れますが、本章では触れないので今は無視して構いません。

.gitignoreはコードを管理するgitで使われるファイルです。これまでHTML / CSSで開発をしてきた人は、まだgitを本格的に使っていないと思うのでここも無視して大丈夫です。

package.jsonには、このアプリのテクニカルな情報やインストールされているパッケージの情報が書かれています。重要なファイルですが、ビギナーの人は現時点で深く理解する必要はありません。

README.mdにはこのアプリの概要や起動方法などが書かれています。興味のある人は読んでみましょう。本書では特に触れません。

それでは開発で使っていくsrcフォルダを見ていきます。

srcフォルダのクリーニング

srcを開くと次のようなファイルがデフォルトで入っています。

ここには本書の開発を進める上で必要のないファイルやコードがあるので、まずはそれらを削除してスッキリさせましょう。下のファイルを削除してください。

src
├── App.css               
├── App.js    
├── App.test.js             <--削除
├── index.css               <--削除
├── index.js
├── logo.svg                <--削除
├── reportWebVitals.js      <--削除
└── setupTest.js            <--削除

ファイルを削除するとsrcの中は次のようになります。

src
├── App.css               
├── App.js    
└── index.js

次にApp.cssを開きます、コードがすでに書かれていますが、すべて消します。

次はApp.jsを開いてください。ここでは以下の部分を削除します。

//App.js

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.js</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;

そうすると次のようになります。

//App.js

import './App.css';

function App() {
  return (
    <div className="App">

    </div>
  );
};

export default App;

クリーンアップの最後がindex.jsです。開くと次のようになっているので、本章の開発に関係のないコードを削除します。

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';       // 削除
import App from './App';
import reportWebVitals from './reportWebVitals';    // 削除

ReactDOM.render(
  <React.StrictMode>    // 削除
    <App />
  </React.StrictMode>,  // 削除（最後のコンマ（,）は削除しないで残す）
  document.getElementById('root')
);

// ↓削除

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

// ↑削除

そうすると次のようになります。

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

以上でcreate-react-appを使う前のクリーンアップが完了して、React開発をはじめる地ならしができました。

Reactを動かす

HTML / CSSで開発していたときは、ブラウザにHTMLのindex.htmlファイルを直接ドラッグ & ドロップするだけで表示されました。

しかしReactでその方法は使えません。Reactはターミナルから起動する必要があります。

VS Codeにはターミナルが内蔵されているので、それを使っていきます。

画面上部のメニューの「Terminal」から「New Terminal」を選ぶと、コードスクリーンの下部にターミナルが表示されます。

そこに下のコマンドを打ち、Enterを押すと、Reactの開発環境が起動し、ブラウザへと自動的に遷移します。

npm start

もしブラウザに遷移しない場合は、ブラウザのアドレスバーにhttp://localhost:3000と打ってください。

そうするとブラウザにまっ白な画面が表示されると思います。

それではVS Codeに戻ってApp.jsを開いてください。

コードをよく見ると、<div>というHTMLでよく見かけたタグがあることに気がつくと思います。

// App.js

import './App.css';

function App() {
  return (
    <div className="App">

    </div>
  );
};

export default App;

returnの後のカッコの中だけをみると、HTMLによく似ています。

ここに試しに<h1>を使って「こんにちは」と書いてみましょう。

// App.js

import './App.css';

function App() {
  return (
    <div className="App">
        <h1>こんにちは</h1>     // 追加
    </div>
  );
};

export default App;

保存してブラウザを見てみると、次のように表示されています。

ここからわかるのは、returnのカッコの中はHTMLと同じようにコードを書いていけそうだということです。

HTMLファイルには必ずあった<head>や<body>といったタグはありませんが、それでもHTMLを書くようにここでもコードを書き進めていけそうな気がしませんか？

これがReactのJSXと呼ばれるもので、HTMLと同じような記法でコードを書き進められるようになっているのです。

HTMLとの違いがいくつかありますが、まずは一番わかりやすいものを1つ紹介します。

App.jsのreturnのカッコ内を見てください。

// App.js

...

return (
    <div className="App">  
        <h1>こんにちは</h1>
    </div>
);

<div>にclassNameとあります。

これはHTMLでCSSスタイルを当てるときに使ったclassと同じものです。

HTMLでは次のように書いていました。

<div class="app">さようなら</div>

これがReactの場合、次のようになります。

<div className="app">さようなら</div>

classがclassNameになっただけなので簡単です。

では本当にHTML / CSSと同じようにスタイルが適用されるのか確認してみましょう。

再びApp.jsのreturnのカッコ内を見てください。

// App.js

...

return (
    <div className="App">
        <h1>こんにちは</h1>
    </div>
);

classNameの"App"を"test"と変更して保存します。

// App.js

...

return (
    <div className="test">      // 変更
        <h1>こんにちは</h1>
    </div>
);

次にApp.cssを開きます。先ほど中身はすべて削除したので、何も書かれていません。

ここに次のようなCSSを書いて保存してください。

// App.css

.test {
    letter-spacing: 30px;
    color: red;
}

ブラウザを開くと次のように表示が変わっているのが確認できます。

これでclassがclassNameに変わっていても、しっかりCSSが適用されることがわかりました。

ReactもHTMLと同じように書いていけることがわかったと思います。

これがReact学習の最初の一歩になります。

本記事で学んだことからさらにもう一歩踏み込んで、React入門をするには、次の本を参考にしてください。

【Amazonで見る】

この本はHTMLとCSSを終えたビギナーがしっかりReact入門できるように書かれており、次のような特徴があります。

特徴１　HTMLとCSSの知識だけで進められる

本の表紙にも書かれている通り、この本の対象読者はHTMLとCSSの知識がある人で、JavaScriptの知識は必要としていません。

多くの書籍やネット情報などでは、「Reactのコードはなぜこう書かれているのか」という原理の説明から入り、そしてその原理の理解にはJavaScriptの知識が必要です。

本書ではそのような原理の理解に時間をかけるよりも、「ReactのコードのHTMLに似た部分」に注目をしているので、HTMLの知識があれば読み進められるようになっています。

また私自身がJavaScriptでつまづいた原因の「配列」や「メソッド」などの専門用語も、読者に余計な負担がかからないよう、本書では使わないようにしてあります。

特徴２　手を動かしながら進められる】

本書の目的は、理論的な知識を増やすことではなく、「実際に手を動かしてReactに慣れること」です。

そのため、細々とした例外事項や細かな周辺知識は削り、世界の天気を表示する簡単なアプリケーションを自分の手で作り上げることを重視して書かれています。

ページが進むごとに、新しい機能を自分の手で作りあげる充実感を感じられます。

特徴３　必要なことだけを2部構成で学べる】

本書の冒頭でも書いてありますが、この本はReactの網羅的な解説を目指した教科書ではありません。

中身は見本アプリの開発に必要なものにしぼってあります。

それでもそこには、「いま必ず知っておかなければならないこと」と「後で知るのでもいいこと」の2つがあるので、本書は2部構成をとっています。

以下が本書の目次ですが、「いま必ず知っておかなければならないこと」とは【第2章　開発編】の内容、そして「後で知るのでもいいこと」が【第4章　ブラッシュアップ】に当たります。

このような2部構成を取ることで、読者はスムーズに前に進んでいるという感覚を味わいながら、知識を増やしていくことができます。