ReactをHTMLとCSSの知識だけで使う方法【超ビギナー向け】

三好アキ（プログラミング教本執筆）

2022年9月18日 03:41

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

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

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

そういう中で私がした方法は、「習うより慣れろ」のアプローチです。

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

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

予備知識HTMLとCSSで十分です。

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

この記事の著者については下記リンクをチェック

Amazon著者ページ：https://www.amazon.co.jp/stores/author/B099Z51QF2

公式サイト：https://monotein.com

Twitter：https://twitter.com/monotein_

リンク

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の代わりに、「Vite + React」というものをスターターキットして使うことがより人気になっています。「Vite + React」の使い方は下記記事にあるので参考にしてください。

Vite + Reactとcreate-react-app、どちらであっても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/client';
import './index.css';       // 削除
import App from './App';
import reportWebVitals from './reportWebVitals';    // 削除

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>   // 削除
    <App />
  </React.StrictMode>  // 削除
);

// ↓削除

// 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/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

以上で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入門をするには、
次の本を参考にしてください。

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

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

本の表紙にも書かれている通り、この本の対象読者はHTMLとCSSを勉強した人で、JavaScriptの知識・経験は不要です。

Reactに関する書籍やネット情報の多くは、Reactの原理や概念の説明から入りますが、本書では原理の理解に時間をかけるよりも、「ReactのコードのHTMLに似た部分」に注目をしているので、HTMLの知識があれば読み進められるようになっています。

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

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

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

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

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

特徴３　必要なことだけを学べる

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

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

そのため読者が、スムーズに進んでいる感覚を味わいながら、Reactに慣れていくことができます。

最後はオンラインでの無料の公開方法まで紹介しているので、作ったアプリを友達や家族と共有することができます。

以下目次です。

目次【はじめてつくるReactアプリ】

第1章　基礎編
ウェブアプリの仕組み
Reactを使う理由
コンポーネント化（部品化）
ターミナルの使い方
Node.js
npm
API
VS Code
エラーが発生した場合の対処方法

第2章　開発編
React開発ツールのダウンロード
React開発ツールの中身
srcフォルダのクリーニング
Reactを動かす
componentsフォルダの作成
Title.jsを作ろう
Form.jsを作ろう　その１
Form.jsを作ろう　その２
Results.jsを作ろう　その１
Results.jsを作ろう　その２

第3章　公開編
Netlify
アプリのファイルを最適化する
終わりに

第4章　ブラッシュアップ
分割代入
ページ名を変える
エラー処理
onSubmit
returnの省略
<>の利用
フォームの入力文字を消す
データ取得中であることを表示する
APIのURLを隠す方法
本書を読んだあとの勉強の進め方

この記事の著者については下記リンクをチェック

◆ Amazon著者ページ：https://www.amazon.co.jp/stores/author/B099Z51QF2

公式サイト：https://monotein.com
Twitter：https://twitter.com/monotein_

◆ React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。メルマガ登録はこちらから → https://monotein.com/register-newsletter

この記事が気に入ったらサポートをしてみませんか？