「Reactを学びたいけど、どうやって学習を進めたらいいのか分からない！」そんな悩みを持っている方も多いはず。

そんな方のためにステップバイステップでプログラミングの超基礎的な部分から、アプリケーションを開発・公開するまでを学ぶ連載を実施します。

本記事は全8回の連載記事のうち第1回目です。

第1回目では、Reactを使用してブラウザ上に自分の名前を表示するところまで解説します。

少し難しいところもあると思いますが、頑張って理解していきましょう！

開発環境の作成

開発環境の作成

まずは、開発環境を構築します。本連載では以下のものをインストールします。

  • Visual Studio Code
  • Node.js
  • Create React App

本連載ではソースコードの作成や編集にVisual Studio Codeを使用します。

開発の方法としてはコマンドラインツールであるCreate React Appを利用して、Reactアプリケーションを開発するためのプロジェクトを作成する方法を取ります。

Create React Appを動かすためにはNode.jsが必要となりますので、そちらも併せてインストールを行ってください。

詳しいインストールの仕方については「VSCodeでReactの開発環境を整える！手順とおすすめ拡張機能を紹介」を参考にしてください。

それぞれインストールが終わり開発の準備が整ったら、コマンドプロンプトを立ち上げます。

プロジェクトを保存したいディレクトリにcdコマンドで移った後、以下のコマンドを実行してください。

npx create-react-app 01_printname

これで「01_printname」という名前のプロジェクトができます。

プロジェクトの作成が終わったらcdコマンドで01_printnameディレクトリの中に移動し、以下のコマンドでプロジェクトを実行します。

npm start

ブラウザが立ち上がり、以下のようなReactのページが表示されれば開発の準備はOKです。

画面「HelloWorld」を表示させよう

それでは、画面に文字を表示するアプリケーションを作成してみます。

Visual Studio Codeでプロジェクトディレクトリ配下にあるsrcディレクトリの中のApp.jsというファイルを開きます。

ファイルには最初からソースが書かれているので、以下のように書き換えてください。

【修正前】

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;

【修正後】

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>Hello World</p>
      </header>
    </div>
  );
}

export default App;

ブラウザの表示が以下のようになっていれば成功です。

先ほどソースを削除した個所はスタイルシートを解除、修正をした個所では画面に「Hello World」と表示させるようにしています。

それでは、ここでブラウザに表示させる文字を「Hello World」から自分の名前に変更してみてください。

正解は、<p>Hello World</p>を<p>あなたの名前</p>に変更することで表示させることができます。

※実際はご自分の名前を入力ください。

定数を使ってみよう

定数を使ってみよう

今作成したソースコードをもとにして、今度は少し進んで考えた「定数」を使った処理を作ってみましょう。

function App() {
  const myName = "My Name";
  return (
    <div className="App">
      <header className="App-header">
        <p>{myName}</p>
      </header>
    </div>
  );
}

Appメソッドの内容を書き換えて、以下を打ち込んでください。これでconstで定数を定義できます。

表示をするには{}で定数名を囲ってください。

ブラウザで表示を確認すると見かけは変わっていないことが分かります。

これは表示する個所の処理は変更したけれども、表示結果に変更がないという状態です。

それでは、定数を使って表示する意味とはどのようなものでしょうか。

実際にソースで説明します。

例えば、以下のように5個表示させるプログラムがあったとします。

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>My Name</p>
        <p>My Name</p>
        <p>My Name</p>
        <p>My Name</p>
        <p>My Name</p>
      </header>
    </div>
  );
}

これを「My Name」ではなく「Your Name」に直すことになった場合、5ヵ所を修正することになり、修正が抜けてしまう可能性が高くなります。

2つ目だけ修正し損ねてしまった例がこちらです。

このようなミスをなくすために定数を使用します。

function App() {
  const myName = "My Name";
  return (
    <div className="App">
      <header className="App-header">
        <p>{myName}</p>
        <p>{myName}</p>
        <p>{myName}</p>
        <p>{myName}</p>
        <p>{myName}</p>
      </header>
    </div>
  );
}

同様に表示する名前の修正が必要になった場合、定数を定義する1ヵ所のみに修正を加えることで「My Name」から「Your Name」に一括で表示を変更することができます。

このように定数を使えば、修正ミスを減らすことができます。

定数と変数の違い

定数と変数の違い

constを使って宣言した定数に関してですが、実はこの部分は以下に変更しても同様の結果を得ることができます。

let myName = "Your Name";

constとlet、この2つには違いがあります。

constに関しては「定数」であり、値を1度代入すると値を変更することができません。

一方でletに関しては「変数」と言い、値は何度でも変更することができます。

それでは、constの使い方の復習とletの使い方を実際のソースコードで見てみましょう。

以下のソースコードを記載し、保存してください。

function App() {
  const myName = "Your Name";
  const names = [];

  for (let i = 0; i < 5; i++) {
    names[i] = <p>{myName} {i}</p>;
  }

  return (
    <div className="App">
      <header className="App-header">
        {names}
      </header>
    </div>
  );
}

定数のmyName、namesに注目してください。

myNameに関しては定数を宣言するときに値を代入しています。なのでmyNameはこれ以降の処理で別の名前に変更することができません。

namesに関しては配列であることを宣言しているのみで値を代入していません。なのでこれ以降、1度だけ代入が可能です。

次にfor (let i = 0; i < 5; i++)の部分に注目してください。

これはfor文と言い繰り返し同じ処理を行う場合に使用するもので、for(実行前の処理; 終了判定; 実行後の処理)で定義されています。

for文の実行前には「let i」でiという名前の変数を定義し、0という値を代入しています。for文の{}の中に書かれた処理が終わったらi++が行われます。i++というのはi= i+1とすることなので、iには計算結果の1が再代入されて、結果iの値は0から1に更新されます。

このように、値を更新する必要のある場合はletで変数を宣言して使用することになります。

for文はiが5よりも少ないときに繰り返し実行され、iが1ずつ増えて5になったときに終了します。

この例では「Your Name」の後に0～4までの数字をつけて出力しています。

こちらが出力結果となります。

for文に関しては「【React入門】Mapメソッドの使い方 | 配列のレンダリング方法を解説」で詳しく説明しているので参考にしてください。

まとめ

今回の記事では以下の2つを勉強しました。

  • 画面に文字を表示する方法
  • 定数と変数の違いについて

for文に関してもよく使われるので、押さえておいてください。

それでは次回の記事でお会いしましょう！