【React】リアルタイムで楽曲を検索するサービスを作ってみよう！

Reactでリアルタイム楽曲検索サービスを開発！本教材を通して、Reactを使ったWEBアプリケーション開発の流れの理解を目指す。

1-2

ReactでHelloWorldしてみよう

ここからは実際のコードを書いて行きたいと思います。

Reactは、Facebook社が作っているUIのJavaScriptライブラリです。

https://reactjs.org/

業界でもモダンな技術で、採用する企業も多いです。

React を使うには react と react-dom というライブラリが必要になります。

その両方をまずインストールしてみましょう。以下のコマンドを実行してください。

shell
1
 
Copied!
$ yarn add react react-dom

すると、プロジェクトのディレクトリに node_modules というフォルダができていると思います。

node_modulesの中には先ほどダウンロードした react や react-dom などyarnでインストールしたライブラリがたくさん入っています。

たくさんのファイルがあるので、今回の講義では触れませんが git を使ったバージョン管理などをする場合、このフォルダは git にあげないようにします。

プロジェクトに .gitignore というファイルを作ります。

その中に以下のコードを追加してください。


Copied!
node_modules/

Web の業界に限らず ignore という単語は、なにかを排除するときなどによく使われますのでこの単語をみたときは、なにかを管理しないようにするんだな。と思っていいです。

ではインストールできたので、実際のコードを書いていきましょう。

Reactを書いていく

まず実際のコードを書くためのディレクトリを作ります。以下のコマンドを実行してください。

shell
1
 
Copied!
$ mkdir src

ターミナルでの操作、もしくはこのプロジェクト（react-music-app）をお使いのエディタで開いてフォルダを作成してください。

次に src の中に HTML を書いて行きます。srcフォルダの中にindex.htmlファイルを作成して以下のコードを追加してください。


Copied!
src
└── index.html //新規作成

html
12345678910111213
             
Copied!
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>music app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

これだけです。

React は JavaScript で書くので最後その書いたものを <div id="app"></div> と言うところにマウントします。

よくこの HTML 上の React がマウントされるタグのことを マウントポイント といったりします。

では実際の React のコードを書いて行きます。

src ディレクトリに index.js というファイルを作成し、以下のコードを追加してください。


Copied!
src
└── index.js //新規作成

js
12345
     
Copied!
import React from "react";
import { hydrate } from "react-dom";
import App from "./components/App";

hydrate(<App />, document.getElementById("app"));

次にsrcフォルダの中に components というディレクトリを作成して、 App.jsx というファイルを作ります。

App.jsx の .jsx とは、React で使われている JSX 記法 というのを使うための拡張子です。

参考：https://qiita.com/uto-usui/items/4b02089efa86b4aaf8af

React は、JavaScript の中に HTML（XML）を書いて開発することが多いので今回も JSX 記法で書いて行きます。


Copied!
src
└── components //新規作成
    └──App.jsx //新規作成

jsx
1234567
       
Copied!
import React from "react";

export default class App extends React.Component {
  render() {
    return <h1>Hello World in React</h1>;
  }
}

Reactでは、 class で書くものと function で書くものがありますが今回は全て class で書いて行きます。

js
1
 
Copied!
export default class App extends React.Component

の一文ですが、まず export という構文が登場します。

この export はのちに import されることを想定して記述します。

default とは、 import する際に import App from "./components/App" と書くために default で export しています。

もしこの default を書かずに export した場合、 import 側では import { App } from "./components/App" とかけます。

この import/export の構文は ES6 という JavaScript のバージョンの仕様になりますので、詳しく知りたい場合は「export import javascript」 と検索してください。

class とは Java や PHP でも登場する class と似たものです。本来 JavaScript には class はないのですが、Parcel がよしなにしてくれるので、モダンな JavaScript の構文を使って書いて行きます。

class App extends React.Component は、分割すると class App と extends React.Component に分けることができます。

class App は App という class を定義する構文です。

extends React.Component は React.Component を 継承する という意味になります。

class の継承に関しては調べてみるとたくさん資料が出てきますが、やっていることは App という class は React.Component の機能を引き継いで書くよ。という意味です。

次の行で以下の関数が登場しています。

js
1
 
Copied!
render() {}

この render 関数で return されたものが HTML となって Web ページに出力されます。

jsx
123
   
Copied!
render() {
  return <h1>Hello World in React</h1>;
}

上記のコードは h1 要素を返しているのが分かると思います。

src/index.js ファイルに戻ってみてみます。

js
12345
     
Copied!
import React from "react";
import { hydrate } from "react-dom";
import App from "./components/App";

hydrate(<App />, document.getElementById("app"));

この import App from "./components/App" で、先ほど h1 をrenderした App クラスを import しています。

この App は React では、 コンポーネント と呼ばれます。

コンポーネントは、自作した HTML の要素だと考えるとわかりやすいです。

App を <App/> と書くと、HTML っぽくみえてくると思います。

この <App/> はHTMLっぽく書くのであれば <App></App> になりますが、 App でなにも要素をはさんでいないのでself closing をします。

例えば HTML の meta 要素などは <meta charset="utf-8"> と書いていると思います。

React は HTML を記述しているのではなく、厳密にいうと XML を記述しているのでタグを書くときに <meta> のように <App> とかけません。

なので self closing します。

ドキュメントとして https://zhenyong.github.io/react/tips/self-closing-tag.html に書いてあります。

hydrate という関数が react-dom から import されていますが、この関数を使って実際のマウントポイントへ React のコンポーネントをマウントします。

document.getElementById("app") は、HTML の中から id が app の DOM を取得する JavaScript のコードです。

hydrate を使って、<App/> を <div id="app"></div> と置き換えていると考えるとわかりやすいです。

では Parcel を使って、コンパイルしてみます。package.json を開いて下記のコードのように編集します。

json
12345678910111213141516
                
Copied!
{
  "name": "react-music-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "parcel src/index.html -d dist",
    "build": "parcel build src/index.html -d dist"
  },
  "dependencies": {
    "parcel": "^1.12.3",
    "react": "^16.8.5",
    "react-dom": "^16.8.5"
  }
}

書き加えたのは以下の部分です。

js
1234
    
Copied!
"scripts": {
  "dev": "parcel src/index.html -d dist",
  "build": "parcel build src/index.html -d dist"
}

scripts というフィールドに、コマンドを書くことで yarn <コマンド名> で実行できるようになります。

上記のコマンドを実行したらターミナルで以下のコマンドを実行してください。

shell
1
 
Copied!
$ yarn dev

dev と build の違いは以下に示します。


Copied!
- dev: 開発中に使うもの。サーバーが立ってくれるのでその URL にアクセスして確認する。
- build: コードの圧縮などを行う本番用ビルドが可能。ビルドが終わるとコマンドが終了する。

dev をすると、ターミナルが使えないようになります。これは開発用のサーバーを自動で立ててくれるためです。

切りたいときは、 control + c をするとコマンドが終了します。

コマンド実行後、ターミナルに


Copied!
yarn run v1.13.0
$ parcel src/index.html -d dist
Server running at http://localhost:1234 
    Built in 5.75s.

のような感じで表示されます。

http://localhost:1234

にアクセスしてみましょう。

Webページに、Hello World in React と文字が表示されていたら成功です！！

Parcel を実行すると、-d distと指定しているディレクトリ（今回は dist）にファイルが生成されます。

そのほかにも、 .cache という Parcel が実行するときに使うキャッシュファイルを格納するディレクトリが作られます。

この2つのディレクトリは git にあげないでいいので .gitignore に追記します。

.gitignore


Copied!
node_modules/
dist/
.cache/

以上で今回のパートは終了です。

間違いや改善の指摘

質問ポリシー①

教材の内容に関する質問を投稿しましょう

【React】リアルタイムで楽曲を検索するサービスを作ってみよう！

0章 : はじめに

1章 : HelloWorld

2章 : WebAPIをReactから扱う方法

3章 : 画面の作成をしよう

4章 : RxJSを使ってみよう

ReactでHelloWorldしてみよう

Reactを書いていく