前書き

Reactを学習していた中で "class構文・function構文" を学習しましたので、こちらでアウトプットとして記録いたします。
学習されている方にお役に立てると非常に嬉しいです。

また、コードは Github で公開しているので気になるかたはダウンロードしてみてください。

class構文と function構文とは

Reactをコーディングする方法として "class構文" と "fanction構文" があります。
これらの表記は↓になります。

Class構文

import React from 'react';

class 関数名 extends React.Component {
    render(){
        return(
         <React.Fragment>
          処理
         </React.Fragment>
        );
    }
}

export default 関数名;

function構文

import React from 'react';

function 関数名(引数) {
  return (
    <div className="Comment">
     処理
    </div>
  );
}

export default 関数名;

また、function構文にはもう1つ表記方法があります。

arrow関数

import React from 'react';

const 関数名 = (引数) => {

    return(
        <>
        処理
        </>
    )
}

export default 関数名;

こちらは、ES2015(ES6)のアロー関数で表記されたものです。

どの構文で書けばいいのか？

業務環境により、構文使用の優先度は異なると思いますが、できるだけなら "function構文のアロー関数" で表記する方が良いです。

その理由は "class構文" よりも "function構文" の方が シンプル に表現できるため。
コーディングをする上では、複雑なコードを書くよりも、シンプルに表記される方が好ましいです。
また、Javascriptの使用は現在では "ES2015(ES6)" が推奨されます。アロー関数は ES2015 に該当するので使っていく方が良いでしょう。

しかし、アロー関数は全てのブラウザで表示可能な訳ではありません。
現在では大抵のブラウザは対応しますが、古い環境下だと対応していないのでこれは知識に入れましょう。

(アロー関数の動作環境)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

また、次からは MAP配列を使った "class構文" と "function構文" のページを比較します。

class構文で書く

ここでは、横並びのコンテンツを "class構文" で書いてみます。
次に、function構文で同じ者を作るので、比較をしてみましょう

Class構文(Language.js)

import React from 'react';

class Language extends React.Component {
    // Übergeben "props" mit Daten als Argument
    render(){
        return(
            <div className='language-item'>
                <div className="language-name">{this.props.name}</div>
                <img
                className='language-image'
                src={this.props.image}
                />
                <div className="language-introduction">{this.props.introduction}</div>
                </div>
        );
    }
}



export default Language;

(行っていること)
データを持つpropsを引数に渡しています。
class構文だとこの処理に "this.props.image" など this を使うのが特徴的です。

Class構文(Language.js)

import React from 'react';
import Language from './Language'
import './App.css';

class Main extends React.Component{
  render(){
    //Datenarray Definition (MAP)
    const languageList = [
      {
        name: 'English',
      image: 'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_england.png',
      introduction: 'Diese Sprache wird vom Vereinigten Königreich und den Vereinigten Staaten gesprochen.'
      },
      {
        name: 'Japanish',
      image: 'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_japan.png',
      introduction: 'Diese Sprache wird in Japan gesprochen.'
      },
      {
        name: 'Deutsch',
      image: 'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_germany.png',
      introduction: 'Diese Sprache wird in Deutschland und der Schweiz gesprochen.'
      }
    ];

    return(
      <div>
        <h1>Welche Sprache sprichst du?</h1>
        <div className='language'>
          {/* Datenarray aufrufen */}
          {languageList.map((languageItem)=> {
            return(
              <Language
              name = {languageItem.name}
              image = {languageItem.image}
              introduction = {languageItem.introduction}
              />
            )
          })}
        </div>
        </div>
    );
  }
}

export default Main;

(行っていること)
MAP配列を定義し、(MAPの)データ配列を呼び出しています。
アロー関数を使って (languageItem) => {return ‥} の中です。

Class構文(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import Header from './Header';
import Footer from './Footer';
import Main from './Main';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
   <Header />
   <Main />
   <Footer />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

(行っていること)
個別のコンポネートを index.js に記しています。

※こちらでは、cssや他コンポネートは記していません。下記のgithubでコーディングファイルを共有しているので、気になった方はダウンロードをして確認してみてください。

→Github
こちらでは、class構文のファイルをダウンロードできます。
(Githubでは、CSS・HTMLなど他データも含まれます)

class構文では "this" やが特徴的です。

では、function構文(アロー関数)で書いてみます。

function構文(アロー関数)で書く

Function構文(Main.js)

import React from 'react';
import Language from './Language'
import './App.css';

const Main = (props) => {
  //Datenarray Definition (MAP)
  let languageList = [
    {
      name: 'English',
    image: 'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_england.png',
    introduction: 'Diese Sprache wird vom Vereinigten Königreich und den Vereinigten Staaten gesprochen.'
    },
    {
      name: 'Japanish',
    image: 'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_japan.png',
    introduction: 'Diese Sprache wird in Japan gesprochen.'
    },
    {
      name: 'Deutsch',
    image: 'http://hudehisa.sakura.ne.jp/gitgub_image/react_flag_germany.png',
    introduction: 'Diese Sprache wird in Deutschland und der Schweiz gesprochen.'
    }
  ];
  
  return(
    <>
     <h1>Welche Sprache sprichst du?</h1>
        <div className='language'>
          {/* Datenarray aufrufen */}
          {languageList.map((languageItem)=> {
            return(
              <Language
              name = {languageItem.name}
              image = {languageItem.image}
              introduction = {languageItem.introduction}
              />
            )
          })}
        </div>
    </>
  )
}

export default Main;

(行っていること)
MAP配列を定義し、(MAPの)データ配列を呼び出しています。
アロー関数を使って (languageItem) => {return ‥} の中です。

Function構文(Language.js)

import React from 'react';

const Language = (props) => {
// Übergeben "props" mit Daten als Argument
    return(
        <div className='language-item'>
        <div className="language-name">{props.name}</div>
        <img
        className='language-image'
        src={props.image}
        />
        <div className="language-introduction">{props.introduction}</div>
        </div>
    )
}

export default Language;

(行っていること)
データを持つpropsを引数に渡しています。
function構文だと this がないのが特徴的です。

→Github
こちらでは、アロー関数とアロー関数ではないのファイルをダウンロードできます。
(Githubでは、CSS・HTMLなど他データも含まれます)

以上が Class構文と function構文でした。
また下記は、function構文の注意点です。

function構文の注意! "state" が使えない

Reactでの制作経験があると、多くの場合は "state" 処理をしています。
しかし、タイトルにある様に "function構文" では state が使えません。なので、どうしても state を使いたい場合は "class構文" が書く必要があります。

しかし、先に述べた様に "function構文" を推奨しています。
では、 functionでstateを使用したい場合はどうすればいいのだろうか？
解決方法があります。それは "React hocks" を使用することです。

#あとがき
ここまで読んでいただき、ありがとうございました。
学習をしていて、class構文やfunction構文で悩んでいたので、こちらを学習しました。
まだまだ、Reactについては浅学ですが、学習を続けたいと思います。

#参考リンク

日本一わかりやすいReact入門#4 コンポーネント間でデータの受け渡しと再利用をしよう

#Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

Twitter
Portfolio
Github

前書き

class構文 と function構文とは

どの構文で書けばいいのか？

class構文で書く

function構文(アロー関数)で書く

function構文の注意! "state" が使えない

class構文と function構文とは