コンポーネントとは
コンポーネントの言葉の定義から見ていきます。
まず、REACTにおけるコンポーネントというのは、画面の各構成要素をREACTで定義したものだと捉えてください。
ページにはいろいろな部品。例えばヘッダーやサイドバーがあったりします。
色々な構成要素がありますが、このそれぞれの部品をREACTで定義したものをコンポーネントという風に呼びます。
コンポーネントを使用するメリット
- 再利用性の向上
まず、コンポーネントで部品を定義するので、コードの再利用性が上がります。
例えば、一つ定義したコンポーネントを、またページの別の部分で使いたいといった場合にも、同じコードをもう一回書く必要はなく、コンポーネントを使いたい部分で再度読み込み直せばいいので、再利用性が上がります。 - 可読性の向上
REACTではコンポーネントごとにそのコンポーネントに含まれる制御を記述しますので、色々な場所のコードを見る必要がありません。一つの場所を見るだけでいいので、コードを追いやすくなります。 - 疎結合になる
プログラミングになじみのない方は聞き慣れない言葉だと思いますが、これはコンポーネント同士の結びつきをなるべく緩くすることができるという意味合いです。
それにより再利用性が上がったり、コンポーネントごとにテストができるようになるので、バグの混入を防ぐことができます。
コンポーネントの定義
コンポーネントはJavascritの関数で下記にようにして定義します。
ここではWelcomeという関数を定義していますが、関数名の先頭を大文字することによって、コンポーネントであることを表わします。
またコンポーネントはJSXを返します。
コンポーネントの作成
では実際にコンポーネントを作成してみましょう。
まず、page.jsのreturnの中身をすべて削除します。
export default function Home() {
return (
//この中をすべて削除
);
}
結果
次に、下記コードを記入して下さい。
function Welcome(){
return<h1>Hello</h1>;
}returnに（）がありませんが、returnで記述するコードが１行であれば（）は省略できます。
結果
さらに、Homeコンポーネント内に下記コードを記述してください。
<Welcome />結果
そしてターミナルで下記入力し開発サーバーを起動してhttp://localhost:3000/にアクセスしてください。
npm run devこのように表示されていれば成功です。
コンポーネントをファイル分割
コンポーネントは上記のように同じファイルで記述するのでなく、ファイルを分割して書くことが一般的です。さきほどのコンポーネントを別ファイルに分割してみましょう。
まず分割するファイルとそれを設置するディレクトリを作成します。
app/components/welcome.js
次にpage.jsからコンポーネントをカットしてください。
結果
先ほどカットしたコンポーネントをwelcome.jsに貼り付けます。
続けて、welcome.jsのWelcomコンポーネンㇳを他のファイルで扱えるように下記コードを追記します。
export default
「default」 をつけるかつけないかで、読み込み先での扱い方が変わるのですが、詳細の説明は今回は省きます。
次にpage.jsに下記コードを書いてWelcomeコンポーネントを読み込みます。
import Welcome from "./components/welcome";書き方は
import 「コンポーネント名」 from 「ファイルのパス」
です。
ページを読み込み直しても結果が先程と同じになります。
見えている画面は先程と同じですが、現在のページの構成は下記のようになっています。
ここまででコンポーネントについて学んできました。
コメント