💨

【初学者向け】Reactについて

2024/11/18に公開

React: UI development framework

ウェブアプリケーションのUIを開発するにあたっては,TypeScriptやJavaScript(JS)で直接コーディングするのは大変なので,Reactや,VueAngularなどのライブラリが主に利用される[1]

ここでは,React に関して少し踏み込んでみておこう[2]
React: https://ja.react.dev/learn

React basics

React の特徴として,コンポーネントによる記述がある.

Components

React では,コンポーネント(すでにUIが実装された部品)を組み合わせてアプリ開発を行なっていく.

Reactコードにおけるコンポーネントは,マークアップを返すJavaScript関数のことを指します.
ファイル拡張子は,Reactコードが XML (Extensible Markup Language, 拡張マークアップ言語)であることを明示するため, .tsx(TypeScript),.jsx(JavaScript) が与えられます.

Reactのコンポーネントは大文字で定義し,XML/HTML のタグは小文字を持つことに注意しましょう.

MyButton というコンポーネントを定義してみます:

function MyButton(){
    return (
        <button>Click this!</button>
    );
}

MyButtonMyAppコンポーネント内にネスト(入れ子)してみます:

export default function MyApp() {
    return(
        <div>
            <h1>Welcome to my app</h1>
            <MyButton />
        </div>
    );
}

export defaultはファイル内のメインコンポーネントを指定している.
JavaScript構文に関しては,リファレンス,MDNや,javascript.infoを随時参照しよう.

Responce to events: Event hundler function

コンポーネント中にイベントハンドラ関数を宣言すると,イベント(ここではボタンのクリック)に応答する:

function MyButton(){
    function handleClick() {
        alert(`You clicked me!`)
    }
    
    return (
        <button onClick={handleClick}>
        Click me!
        </button>
    );
}

これで,ユーザーがクリックした際に,イベントハンドラ関数 handleClick が呼び出される.

より詳細は,また別途ノートにするとして,ここでは以上のコンポーネントを用いた記述によって,XML/HTMLライクな構文が使えて,JavaScript/TypeScriptで実現しようとすると煩雑になってしまうコードが簡素かつ簡略に実装できることだけを抑えておきます.

脚注
  1. 他にも,Solid, Svelte, Qwikなど多数ある(参考). ↩︎

  2. Reactは現在,最も使われている JS の UI フレームワークのようである(参考). ↩︎

Discussion