Zenn
🐣

Reactレクチャー2 (JSX記法)

2021/10/07に公開
React
lecture
tech

JSXの概要

JSXとはなんぞや

  • JavaScriptの拡張言語[1]
    returnの括弧の中身がJSX
  • HTMLライクな記述 + JavaScriptの構文が使える
    結局、JSXはJavaScriptというプログラミング言語とHTMLというドキュメント言語を2つ掛け合わせて使えるようにしたもの。
 const BlueButton = () => {
   return (
     <button className={'btn-blue'}>
       Click me!
     </button>
   )
 }
  • JSXは最終的に、React要素を生成する

そもそも、Reactで書いたものはJavaScriptでしかないので、最終的に画面に描画する際はHTMLに変換しないといけない。その工程がある中で、ReactはReact.createElementというものを使うことにより、HTMLが生成されることを定義している。

  • JSXを使わない場合
 React.createElement (
  'button',
  {className: 'btn-blue'},
  'Click me!'
 )
  • JSXを使うとHTMLライクに書くことができる
    最終的な出力結果は同じになる。
 <button className={'btn-blue'}>
	Click me!
 </button>

先ほど書いた、JSXで書いた構文をコンパイル[2]時に、React.createElementを用いた構文に変換を行なっている。そうすることで、最終的にHTMLとして出力することができる。

  • コンパイル時
    1. JSX->React.createElementの式に変換
    2. React要素を生成
  • React.createElementを使った構文は直感的でない
    -> JSXを使うことで楽に記述することができる

https://ja.reactjs.org/docs/introducing-jsx.html

JSXの基礎文法

基本

 import React from 'react';

 const BlueButton = () => {
     return (
         <button className={'btn-blue'}>
             Click me!
         </button>
     )
 }
 
 export default BlueButton;
  1. Reactライブラリをimportする
    JSXを使う際は、必ずReactをインポートする必要がある。
    拡張子は.jsでもJSXは使えるが、基本.jsxとする。
- import React from 'react';
  1. return文の中がJSXの構文となっている
    基本的にはHTMLと同じ。classは予約語であるため、classNameを用いる。
 <button className={'btn-blue'}>
    Click me!
 </button>

記述方法

 import React from 'react';

 const Profile = () => {
     const caption = 'Reactレクチャー写真'
     const imagePath = '/img/lecture.png'

     return (
         <div>
             <p>{caption}</p>
             <img src= {imagePath} alt={' avatar'}/>
         </div>
     )
 }
 
 export default Profile
  1. キャメルケースで記述する
    image_pathではなく、imagePathとする。
 const imagePath = '/img/lecture.png'
  1. {}内で変数を扱える
    JSX内で変数を用いたい際は、{}を用いることで出力が可能。
 <p>{caption}</p>
  1. 閉じタグが必要
    HTMLの場合はなくても良いが、JSXの場合は必ず閉じタグが必要となる。
<img src= {imagePath} alt={' avatar'}/>

特殊なJSX構文

  1. JSXは必ず階層構造[3]である必要がある。
    return文の中にいきなり並列したタグを並べることはできない。
    <div>タグなど最上位のコンポーネントが必要。
  2. React.Fragmentで囲む
    <div>タグで囲むと不要なHTMLタグが増えてしまうため、それを避けるために<React.Fragment>タグを用いると良いとされる。JSXとしては、階層構造的なタグとして用いられているが、HTMLでは空タグとされており、出力がされない。
 return(
  　 <React.Fragment>
  　      <p>Reactレクチャー</p>
 　       <p>JSXの学習</p>
 　   </React.Fragment>
 )
  1. React.Fragmentは省略が可能
    <>タグで書くことが可能
 return(
  　 <>
  　      <p>Reactレクチャー</p>
 　       <p>JSXの学習</p>
 　   </>
 )

コンポーネントとは

  • 見た目と機能を持つUI部品
    ボタンだけではなく、押したら何か処理が行われるといったもの。
  • コンポーネントを組み合わせてページを作る
  • 大きく2種類に分かれる
    1. class Component(クラスコンポーネント)
    2. Functional Component(関数コンポーネント)

コンポーネントの違い

ClassComponent(クラスコンポーネント)

 import React, {Component} from 'react';

 class Button extends Component {
     render() {
         return <button>Say, {this.props.hello}</button>
     }
 }

 export default Button;

まず、コンポーネントを読み込んでいる。
また、書き方がclassであるため、JavaScriptのクラスのような書き方をする。
ReactのComponentを拡張して、Buttonを作るといった記述の仕方をする。
また、renderといったメソッドを用いているのが特徴である。

Functional Component(関数コンポーネント)

 import React from 'react';

 const Button = (props) => {
　　　　　　　　　　return <button>Say, {props.hello}</button>;
 };

 export default Button;

クラスコンポーネントを用いて記述した場合に比べてとてもシンプルとなっている。
JavaScriptの関数の宣言と同じように記述を行う。関数のパラメーターとしてpropsを渡して、アロー関数であるため、=>{}を書いて、returnの中にJSXを記述。

同じ機能が使えるため、シンプルな記述が可能となっている関数コンポーネントがよく使われるようになった。

そもそもなぜコンポーネントを使うのか

  • 再利用するため
    同じ記述を何度もする必要がない
  • コードの見通しをよくするため
    1コンポーネント = 1ファイル
    別ファイルに分けることでコードが読みやすくなる
  • 変更に強くするため
    複数のページで用いたコンポーネントを一気に変えたいと思った時、1箇所を変えるだけで良い

基本的なコンポーネントの使い方

コンポーネントを使う際に、親・子といった表現がよく用いられる。
子コンポーネントは呼び出される側 : exportされる側

Article.jsxという名前の子コンポーネント
 const Article = () => {
 　　return <h2>こんにちは</h2>
 };
 export default Article;

親コンポーネントは呼び出す側 : importする側

App.jsxという名前の親コンポーネント
 import Article from "./components/Article";
 
 function App() {
  return (
     <div>
        <Article />
     </div>
  );
 }
 
 export default App;

関数コンポーネントは複数の形で宣言することが可能。
App.jsxの場合、function関数、Article.jsxの場合、アロー関数が用いられている。
ファイル名は大文字で書くのが良いとされる。

propsとはなんぞや

親コンポーネントから子コンポーネントにデータを受け渡したい時に利用する。

propsでデータを受け渡す

App.jsx(親)
 import Article, from "./components/Article";

 function App() {
     return (
         <div>
             <Article
                 title={'Reactレクチャー'}
                 content={'propsについて'}
             />
         </div>
     );
 }

 export default App;
Article.jsx(子)
 const Article = (props) => {
     return (
         <div>
             <h2>{props.title}</h2>
             <p>{props.content}</p>
         </div>
     );
 };

 export default Article;

子コンポーネントでは、titleとcontentを表示するコンポーネントを作成することで、コンポーネントの再利用を可能としている。動的に変わる部分はpropsでデータを受け渡すようにする。
親のコンポーネントで呼び出す際に、titleやcontentを指定することで、propsが受け渡され表示することができる。

Articleコンポーネントではpropsとしてtitleとcontentを受け取っている。
親コンポーネントで渡すtitleとcontentの中身を変えたら、実際に受け取るデータが変わるため、表示部分も変わる。

子コンポーネントには文字列は埋め込まず、propsで動的に変化されることが可能となるように再利用可能な記述をする。

  • propsのデータは基本的に{}で記述
  • 渡せるデータとしては、文字列、数値、真偽値、配列、オブジェクト、日付などなんでもOK
  • 変数を渡すことも可能
 const lectureName = 'React講座'
 　<Article
　　　　title={lectureName}
 　/>

コンポーネントの再利用

  • 同じコンポーネントをいくつも呼び出すことが可能
  • 配列データをmap()メソッドで処理するのが一般的
    どんな値が入るかを配列を使ってまとめて、mapメソッドを使うことで繰り返し処理をして、よりスッキリ記述することが可能。
脚注

  1. 元はJavaScriptであるため、JavaScriptベースで記述されている。 ↩︎

  2. ある言語で書かれたものを、別の言語に書き換える。変換。 ↩︎

  3. あるコンテンツ(<div>タグ)の中に別のタグ(<p>タグ)が含まれているといった構造のこと。 ↩︎

GitHubで編集を提案

Discussion