React.js チュートリアル[超入門] #02 Componentについて

2018年5月8日 19:21

前回のレッスンでは、プロジェクトの始め方を学びました。今回は、Componentについて学習していきます。React.jsを理解する上で、必要不可欠な知識です。

このレッスンの目標
・Componentの定義を理解する
・Atomic Designに触れる
・Componentを作る・組み込む

前回までの作業フォルダーは僕のgithubからダウンロードできます。
もしコードに不具合が起きたり、レッスンをスキップしてきた場合は、ここで新しく始められます。

natsukinglyのgithub URL: https://github.com/natsukingly?tab=repositories
リポジトリー名：super-easy-react-tutorial-01

又は、ターミナルからこんな感じでもダウンロードできます。

$ git clone https://github.com/natsukingly/super-easy-react-tutorial-01.git
$ npm install

1. Componentの定義を理解する

React.jsの記事や本を読むと必ずと言っていいほど、componentという言葉が出てきます。componentを簡単な言葉でいうと、ウェブサイトを構成する「部品」です。React.jsで作るWebサービスは、無数の再利用可能な「部品」を組み合わせる事で機能します。ちょっとわかりづらいと思うので、チュートリアルの目標物（nekotube）を例に、見ていきましょう。

まず、オリジナルの設計図です。

次に、大きめに部品単位で切り分けた設計図です。ここで、分けたHeader, Body, Main, Sidebarは、すべてcomponentです。

切り分けたMain Componentをさらに細かい部品に分けることができます。ここでわけられた、Video, Title, Descriptionもすべてcomponentです。

何となくイメージが湧いてきたと思います。そう、全てcomponentなんです（笑）。繰り返しますが、componentは部品という意味です。そして例のVideo componentのように、component自体がcomponentを構成するということはよくあります。React.jsの開発では従来のウェブサイトと違い、ページ単位ではなく、部品単位で開発を行うということを覚えておいてください。

2. Atomic Designを知る

componentのコンセプトを知るには、Atomic Designについての記事を読むことが一番の近道です。Atomic Designは、UI/UX設計のコンセプトです。先ほどnekotubeのcomponentを切り分けているときに、「おいおい、この人どれだけ細かく切り分けて行くつもりだよ」ってなった人もいるはず。Atomic Designは、その問いについての答えが説明されてます。いきなりオチを言ってしまうと、切り分けられなくなるまでです（笑）。

Atomic Designにおいて、一番細かいcomponentはAtomというカテゴリーに分類されます。Atomの例としては、ボタンだったりインプットタグだったりです。

Atomic Designを理解することは、必須事項ではないです。なので時間がある人は下の記事を読んでみてください。簡潔にまとまっています。

ここまでで、componentを組み合わせて全体を構築して行くというイメージが湧いたと思います。そうすると「じゃあ、全部componentに分ければいいの？」って思いますよね。答えはYES & NOです。実際の開発では再利用可能だと判断したときのみcomponentに分けるというのが適切です。

全部細かく部品化しても間違いではないですが、一度しか利用しないコードを細かく分ける作業は時間の無駄です。この判断は開発を進めて行くと要領が掴めて行くと思うので、今は心配しないでください。

3. Componentを作る・組み込む

目標物
App.jsのtitle部分をホームメイドのcomponentで置き換えます。テキストはわかりやすいように、Hello World 2.0にしました。機能的にはしょぼいcomponentですが、これを実現できたら、自分で一からcomponentを作って、ウェブサイトを構築することができるようになります。

Title.js編

では、実際にcomponentを作っていきましょう。前回作ったプロジェクトフォルダーをテキストエディターで開いてください。今回は、Title.jsというシンプルなcomponentをデフォルトの画面に付け加えます。

まず、srcフォルダーを右クリックして新しいcomponentsという名前のフォルダーを作ってください。続いて、componentsフォルダーを右クリックして新しい「Title.js」という名前のファイルを作ります。下のような構造になっていたら成功です。

ファイルを作成できたら、実際に中身のコードを書いていきましょう。前回説明したように、典型的なcomponentは、インポート、実質的な中身、エクスポートの三つの部分に別れています。

// Title.js

// 外部のライブラリやファイルを参照するインポートの部分
import React from 'react';

// JSXやメソッドを定義する実質上の中身
const Title = () => {
 return(
   <div>
     <h2>Hello World 2.0</h2>
   </div>
 );
}

// 外部のファイルがこのcomponentを利用できるようにするエクスポートの部分
export default Title;

まずcomponentファイルを正常に機能させるために、Reactをインポートします。これは、おきまりの文句だと思ってください。これから何回も書いていきます。そして、componentの中身を書きます。const Title = () ....ってきて気づいた人もいると思いますが、先ほどのApp.jsと比べると、書き方が違いますよね。

これは、componentの中でも２つのカテゴリー（class component と functional component）があって、それぞれ定義の仕方が違うということです。詳細は、「#05 Stateの説明」で紹介します。今はこういうものだと思って、書き写してください。

最後に、componentをエクスポートするコードを書いて終了です。きっとわからないで書いているコードもあるかもしれませんが、それで大丈夫です。何回も同じコードを書いて、試行錯誤しているうちに情報が消化されていきます。それでもわからない場合は、いつでもコメント欄に質問してください。

App.js編

では、作ったcomponentをApp.jsに組み込んで、表示させて見ましょう。

インポート用のコードをまず付け足します。import COMPONENTの名前 from '今いるファイルからの相対パス'　でOKです。ここで覚えて起きたいのは、参照するファイルのデフォルトの拡張子は「.js」だということです。Title.jsはjsファイルなので「.js」が省略されています。例えば、cssファイルを参照する場合には、App.jsにもあるように、import './App.css'; 「〇〇.css」と拡張子が必要です。

次にインポートしたcomponentをJSXとして追加します。<h1></h1>タグはいらないので削除するかコメントアウトしましょう。代わりに<Title />を追加してください。下のようになっていたら、成功です。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// Title.jsをインポートする。
import Title from './components/Title';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          
          // ここのh１タグを削除しました。
          <Title />

        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

ではブラウザーで確認してみてください。下のようになっていますでしょうか？

まとめ

今回のレッスンは以上です。お疲れ様でした。今回習得した部分をおさらいします。

#01 Componentについて
✔︎ Componentの定義を理解する
✔︎ Atomic Designに触れる
✔︎ Componentを作る・組み込む

Componentは基礎ですが、慣れないうちは難しいと思います。今すべてを理解しようとせずに、開発を進めながら消化して行くのがおすすめです。一緒に頑張っていきましょう。