Zenn
🦙

Reactでよく使われるJavaScript記法

に公開
JavaScript
tech

ES6のインポート/エクスポート文

Reactでは、一般的にES6のモジュールシステムを使用してコードを整理します。

コンポーネントや関数、変数などを別のファイルから読み込むためにはimport文、
他のファイルから利用できるようにするためにはexport文を使います。

// Button.js
import React from 'react'; // Reactをインポート

const Button = () => <button>Click me!</button>; // Buttonコンポーネントを定義

export default Button; // Buttonコンポーネントをエクスポート

// App.js
import React from 'react'; // Reactをインポート
import Button from './Button'; // Buttonコンポーネントをインポート

const App = () => (
  <div>
    <Button />  {/* Buttonコンポーネントを使用 */}
  </div>
);

export default App; // Appコンポーネントをエクスポート

JSX

Reactでは、JSX (JavaScript XML)という独自の記法を使ってUIを記述します。
JSXはHTMLに似ていますが、JavaScriptの中に書けるため動的な処理を簡単に記述できます。
JSXの中にはJavaScriptの変数や式を{}で囲むことで埋め込むことができます。

const name = 'Alice';
const element = <h1>Hello, {name}</h1>; // 'Hello, Alice'という見出しを表すJSX

アロー関数

アロー関数は、JavaScriptで関数を定義する新しい方法の一つで、
その名前はその形が「アロー（=>）」に似ていることから来ています。

例えば、2つの数値を足す従来の関数はこのように書けます!

function add(x, y) {
  return x + y;
}

console.log(add(1, 2)); // 3

これをアロー関数に書き換えると以下のようになります!

const add = (x, y) => {
  return x + y;
};

console.log(add(1, 2)); // 3

Reactでは、コンポーネントを定義したりイベントハンドラを
記述したりするのにES6のアロー関数がよく使われます。

アロー関数はシンタックスが簡潔であり、thisのスコープが自動的に束縛される特性があります。

const Button = () => <button>Click me!</button>; // アロー関数を使ってコンポーネントを定義

const Counter = () => {
  const [count, setCount] = React.useState(0); // フックを使った状態管理

  return (
    <button onClick={() => setCount(count + 1)}> // アロー関数を使ったイベントハンドラ
      Count: {count}
    </button>
  );
};

分割代入

Reactでは、propsやstateなどのオブジェクトから特定のプロパティを
簡単に取り出すためにES6の分割代入がよく使われます。

const user = {
  name: 'Alice',
  age: 25
};

const { name, age } = user; // 分割代入を使ってプロパティを取り出す
console.log(name); // 'Alice'
console.log(age); // 25

フック

Reactの関数コンポーネントで状態やライフサイクルメソッドを扱うためにはフックが使われます。
フックは主に以下の3つのカテゴリーに分けられます。

  • 基本フック
  • 追加フック
  • カスタムフック

基本フック

基本フックはReactの基本的な機能を使用するためのもので、以下の3つがあります。

useState
ローカル状態を管理するためのフックです。
このフックを使うと、関数コンポーネント内で状態を持つことができます。
初期状態を引数として受け取り、現在の状態とその状態を更新するための関数のペアを返します。

const [count, setCount] = useState(0);

useEffect
副作用（データの取得、購読、手動でのDOMの変更など）を実行するためのフックです。
副作用は関数内で定義し、その関数をuseEffectの引数として渡します。

useEffect(() => {
  document.title = `Count: ${count}`;
});

useContext
コンテクストを使用するためのフックです。
useContextフックを使うと、コンテクストから現在のコンテクスト値を読むことができます。
これにより、コンポーネントのツリーを介してデータを伝えることができます。

const value = useContext(MyContext);

const Counter = () => {
  const [count, setCount] = React.useState(0); // useStateフックを使って状態を管理

  React.useEffect(() => { // useEffectフックを使って副作用を管理
    document.title = `Count: ${count}`;
  });

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
};

Reactで頻出するJavaScriptの記法の一部です。
今日はここまで！

Discussion