primal - デジナーレ

こんにちは、デジナーレ福岡オフィスの大坪です。

JavaScriptは様々な環境で利用することができますが、JavaScriptでウェブページを開発する上で、内容や見た目をプログラムで操作できることは非常に便利です。この操作を可能にするのが「DOM」です。ここでは、DOMが何か、どのように使われるのかについて説明します。

DOMとは何か？

DOMとはドキュメントオブジェクトモデル (Document Object Model)の略で、HTMLやXMLなどのマークアップ言語で作成されたドキュメントにアクセスするための仕組みになっています。
JavaScript 等の言語では直接HTMLを扱うことができないため、DOMを使い、スクリプト言語を用いてブラウザに描画された内容を抽出、追加や削除を行います。DOMはその手段を提供するAPIなのです。

また、DOMでは名前のとおり、ウェブサイトを作成するために必要なドキュメントに含まれる要素や属性、テキストをそれぞれオブジェクトにまとめられています。このドキュメントを構成する要素や属性らのオブジェクトのことをノードと呼んでいます。

ドキュメントを構成する要素をノードと呼び、オブジェクトの種類に応じて要素ノード、属性ノード、テキストノードと呼ばれています。

HTMLやXML文書をツリー状の構造で表現される

ウェブページを作るときに使うHTMLやXMLは、文字やタグで書かれています。このHTMLやXMLを、DOMでは木の枝が伸びるような形（ツリー構造）で表現されています。

たとえば以下のようなコードがあるとします。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<head>

<title>ページのタイトル</title>

</head>

<body>

<p>これは段落です。</p>

</body>

</html>

このコードをDOMのツリー構造で表すと、次のようになります

最上部に<html>タグがあり、その下に<head>タグと<body>タグがあります。
<head>タグの下には<title>タグがあり、タイトルのテキストが含まれます。
<body>タグの下には<h1>タグ（見出し）と<p>タグ（段落）があります。

このように、DOMはウェブページ全体を一つの大きなツリーとして整理し、それぞれのノードを分かりやすく表現しています。また、このDOMツリー上の上下関係は以下のように呼ばれることもあります。

ルートノード: ツリーの最上部に位置するノード。(<html>タグ)
親ノード：上下関係にあるノード。ルートノードに近いノードのことを親ノードと呼ぶ。(<head>タグ、<body>タグ)
子ノード：ルートノードから遠いノード、親ノードに直接つながっているノード(<head>タグの下の<title>タグ。<body>タグの下の<h1>タグ、<p>タグ)
兄弟ノード：同じ親ノードを持つノード同士。(<body>タグの下の<h1>タグ、<p>タグ)

DOM のインターフェイス

DOMの基本概念を知ったところで、DOMの中でよく使用されるインターフェイスを見ていきましょう。

Document インターフェイス

Document インターフェイスは、ウェブページ全体を表すオブジェクトであり、DOMツリーのルート（最上位）に位置します。Document インターフェイスを使うことで、ページ内の要素にアクセスしたり、新しい要素を作成したりすることができます。

主要なメソッドとプロパティ：

document.getElementById(id)：指定されたIDを持つ要素を取得します。

1

2

3

4

5

6

7

8

9

// IDが"myElement"の要素を取得

const elementById = document.getElementById("myElement");

// 取得した要素をコンソールに表示

console.log(elementById);

document.querySelector(selector)：指定されたCSSセレクタに一致する最初の要素を取得します。

1

2

3

4

5

6

7

8

9

// 最初の <p> 要素を取得

const firstParagraph = document.querySelector("p");

// 取得した要素をコンソールに表示

console.log(firstParagraph);

document.createElement(tagName)：指定されたタグ名の新しい要素を作成します。

1

2

3

4

5

6

7

8

9

10

11

12

// 新しい <div> 要素を作成

const newDiv = document.createElement("div");

// 作成した <div> 要素にテキストを追加

newDiv.textContent = "新しいDIVです";

// 作成した <div> 要素を <body> 要素の子要素として追加

document.body.appendChild(newDiv);

document.body：ページの <body> 要素にアクセスします。

1

2

3

4

5

6

// <body> 要素にアクセスして新しい内容を追加

document.body.innerHTML += "<p>新しい段落が追加されました。</p>";

Element インターフェイス

Element インターフェイスは、HTMLやXML文書の個々の要素を表します。これにより、要素の属性や内容を操作することができます。

主要なメソッドとプロパティ：

element.innerHTML：要素のHTMLコンテンツを取得または設定します。

1

2

3

4

5

6

7

8

9

// 最初の <div> 要素を取得

const divElement = document.querySelector("div");

// <div> 要素のHTMLコンテンツを設定

divElement.innerHTML = "<p>新しい段落が追加されました。</p>";

element.setAttribute(name, value)：要素に新しい属性を追加または変更します。

1

2

3

4

5

6

7

8

// 最初の <h1> 要素を取得

const heading = document.querySelector("h1");

// <h1> 要素にクラス属性を追加

heading.setAttribute("class", "main-heading");

element.getAttribute(name)：要素の属性の値を取得します。

1

2

3

4

5

6

7

8

9

10

// 最初の <h1> 要素を取得

const heading = document.querySelector("h1");

// <h1> 要素のクラス属性の値を取得

const className = heading.getAttribute("class");

console.log(className); // 取得したクラス属性の値をコンソールに表示

element.appendChild(child)：要素に新しい子要素を追加します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// 新しい <span> 要素を作成

const newSpan = document.createElement("span");

// <span> 要素にテキストを追加

newSpan.textContent = "新しいスパン要素です";

// 最初の <div> 要素を取得

const divElement = document.querySelector("div");

// 作成した <span> 要素を <div> 要素の子要素として追加

divElement.appendChild(newSpan);

Nodeインターフェイス

Node インターフェイスは、DOMツリー内のすべてのオブジェクトの基本となるインターフェイスです。Element インターフェイスも Node インターフェイスから継承しています。

主要なメソッドとプロパティ：

node.parentNode：現在のノードの親ノードを返します。

1

2

3

4

5

6

7

8

9

10

// 最初の <p> 要素を取得

const paragraph = document.querySelector("p");

// <p> 要素の親ノードを取得

const parentElement = paragraph.parentNode;

console.log(parentElement); // 親ノードをコンソールに表示

node.childNodes：現在のノードのすべての子ノードのリストを返します。

1

2

3

4

5

6

7

8

9

10

// 最初の <div> 要素を取得

const divElement = document.querySelector("div");

// <div> 要素のすべての子ノードを取得

const childNodes = divElement.childNodes;

console.log(childNodes); // 子ノードのリストをコンソールに表示

node.removeChild(child)：指定された子ノードを削除します。

1

2

3

4

5

6

7

8

9

10

// 親要素を取得

const parent = document.querySelector(".parent");

// 子要素を取得

const child = document.querySelector(".child");

// 親要素から子要素を削除

parent.removeChild(child);

node.textContent：ノードのテキストコンテンツを取得または設定します。

1

2

3

4

5

6

7

8

9

10

11

12

13

// 最初の <p> 要素を取得

const paragraph = document.querySelector("p");

// <p> 要素のテキストコンテンツを設定

paragraph.textContent = "新しいテキストコンテンツ";

// <p> 要素のテキストコンテンツを取得

const text = paragraph.textContent;

console.log(text); // テキストコンテンツをコンソールに表示

EventTargetインターフェイス

EventTarget インターフェイスは、DOM内でイベントを処理するための基本的なインターフェイスです。Element や Document も EventTarget インターフェイスを実装しています。

主要なメソッド：

addEventListener(type, listener)：指定されたタイプのイベントリスナーを登録します。

1

2

3

4

5

6

7

8

const button = document.querySelector("button");

button.addEventListener("click", () => {

alert("ボタンがクリックされました！");

});

removeEventListener(type, listener)：指定されたタイプのイベントリスナーを削除します。

1

2

3

4

5

6

7

8

9

10

11

12

13

const handleClick = () => {

alert("ボタンがクリックされました！");

};

const button = document.querySelector("button");

button.addEventListener("click", handleClick);

// イベントリスナーを削除

button.removeEventListener("click", handleClick);

Windowインターフェイス

window オブジェクトは、ブラウザのウィンドウ全体を表します。このオブジェクトには、ブラウザのウィンドウに関する情報や、表示されているドキュメントにアクセスするためのプロパティやメソッドが含まれています。

主要なプロパティとメソッド：

window.document: 現在表示されているウェブページ（DOMツリー全体）にアクセスする。

1

2

3

4

5

6

// ページのタイトルを取得

console.log(window.document.title);

window.alert(message): 指定したメッセージを表示するアラートダイアログを表示します。ユーザーが「OK」をクリックするまでページの操作を停止します。

1

2

3

4

5

6

// アラートダイアログを表示

window.alert("Hello!");

window.setTimeout(function, milliseconds): 指定した時間（ミリ秒）後に指定した関数を一度だけ実行します。

1

2

3

4

5

6

7

8

// 3秒後にメッセージを表示

window.setTimeout(() => {

console.log("3秒が経過しました");

}, 3000);

window.setInterval(function, milliseconds): 指定した時間間隔（ミリ秒）ごとに指定した関数を繰り返し実行します。

1

2

3

4

5

6

7

8

// 1秒ごとにメッセージを表示

window.setInterval(() => {

console.log("1秒が経過しました");

}, 1000);

window.innerWidth: ブラウザウィンドウの表示可能な領域の幅をピクセル単位で返す。

1

2

3

4

5

6

// ウィンドウの幅を表示

console.log(`ウィンドウの幅: ${window.innerWidth}px`);

window.innerHeight: ブラウザウィンドウの表示可能な領域の高さをピクセル単位で返す。

1

2

3

4

5

6

// ウィンドウの幅を表示

console.log(`ウィンドウの幅: ${window.innerWidth}px`);

window.scrollTo(x, y): ページを指定された位置（x, y）にスクロールします。

1

2

3

4

5

6

// ページを垂直方向に500ピクセルスクロール

window.scrollTo(0, 500);

windowオブジェクトは省略可能
windowオブジェクトのプロパティにアクセスする時はwindow.○○と書きますが、実はwindowを省略することも可能です。
windowがどのようなプロパティを持っているかは覚える必要はないと思いますが、chrome devtoolのconsoleタブで確認することもできます。

つまり私たちが開発をしていく上でプログラムの実行結果を表示させたり、デバッグ等でよく使うは、console.log()は実はwindowオブジェクトのプロパティです。
なので本来はwindow.console.log()と書く事が出来ます。

まとめ

DOMは、ウェブページの構造をプログラムで操作するための強力なツールです。
Document、Element、Node、EventTarget などの主要なインターフェイスを通じて、開発者はウェブページの内容や構造を柔軟に制御することができます。

今回ご紹介したDOMの操作のメソッドはその豊富な機能のほんの一部に過ぎません。これらは覚えるというよりも実装の際に調べたり、都度都度調べていきさらに詳しい情報を探求していくことをお勧めします。DOMの理解を深めることは、最新のフレームワークやライブラリを効果的に活用する上でもきっと大切なはずです。

ぜひこれを機に公式ドキュメントなどもチェックしてみてください！

こんにちは、デジナーレ福岡オフィスの徳安です。

今回は、useEffectを使用すべきではない場所で、

useEffectを使用することを減らすため、

公式ドキュメントを読んで、学んだ内容をまとめようと思います。

https://ja.react.dev/learn/you-might-not-need-an-effect

1. props または state に基づいて state を更新する

＊firstNameとlastNameの２つのstate変数を結合して、

「fullName」という新たな値を作成する場合

■Bad

結合する２つの変数の値が更新されたタイミングで、fullNameの値も更新したい。

↓

useEffectの第二引数に、firstNameとlastNameを追加し、更新する。

const Form = () => {
  const [firstName, setFirstName] = useState("Taylor");
  const [lastName, setLastName] = useState("Swift");

  // 🔴 Bad: 冗長なuseState と 不必要なuseEffect
  const [fullName, setFullName] = useState("");
  useEffect(() => {
    setFullName(firstName + " " + lastName);
  }, [firstName, lastName]);
  // ...
};

1

2

3

4

5

6

7

8

9

10

11

const Form = () => {

const [firstName, setFirstName] = useState("Taylor");

const [lastName, setLastName] = useState("Swift");

// 🔴 Bad: 冗長なuseState と不必要なuseEffect

const [fullName, setFullName] = useState("");

useEffect(() => {

setFullName(firstName + " " + lastName);

}, [firstName, lastName]);

// ...

};

既存の props や state から作成したいものに関しては、

Reactのレンダリング中に計算されるため、stateでの管理は行わない。

■Good レンダリング中に計算する

const Form = () => {
  const [firstName, setFirstName] = useState("Taylor");
  const [lastName, setLastName] = useState("Swift");
  // ✅ Good: レンダリング中に計算
  const fullName = firstName + " " + lastName;
  // ...
};

1

2

3

4

5

6

7

const Form = () => {

const [firstName, setFirstName] = useState("Taylor");

const [lastName, setLastName] = useState("Swift");

// ✅ Good: レンダリング中に計算

const fullName = firstName + " " + lastName;

// ...

};

上記のように最適化することにより、高速で、シンプルかつ、エラー、バグの原因を減らすことができる。

2. 重たい計算のキャッシュ

＊親コンポーネントから受け取ったpropsを、getFilteredTodosの引数として使用する場合

■Bad 冗長なuseState と不必要なuseEffect

const TodoList = ({ todos, filter }) => {
  const [newTodo, setNewTodo] = useState("");

  // 🔴 Bad: 冗長なuseState と 不必要なuseEffect
  const [visibleTodos, setVisibleTodos] = useState([]);
  useEffect(() => {
    // NOTE: getFilteredTodosは与えられた引数をフィルタリングしてくれる関数
    setVisibleTodos(getFilteredTodos(todos, filter));
  }, [todos, filter]);
  // ...
};

1

2

3

4

5

6

7

8

9

10

11

const TodoList = ({ todos, filter }) => {

const [newTodo, setNewTodo] = useState("");

// 🔴 Bad: 冗長なuseState と不必要なuseEffect

const [visibleTodos, setVisibleTodos] = useState([]);

useEffect(() => {

// NOTE: getFilteredTodosは与えられた引数をフィルタリングしてくれる関数

setVisibleTodos(getFilteredTodos(todos, filter));

}, [todos, filter]);

// ...

};

先ほどの例と同様で、propsの値が変更された場合は、

Reactが自動的に差分を計算して、

必要な際にレンダリングを行ってくれるので、useEffectは必要ない。

■Good 関数内の処理が、重たい計算でなければこれでOK

const TodoList = ({ todos, filter }) => {
  const [newTodo, setNewTodo] = useState("");

  // ✅ Good: 関数内の処理が、重たい計算でなければこれでOK
  const visibleTodos = getFilteredTodos(todos, filter);
  // ...
};

1

2

3

4

5

6

7

const TodoList = ({ todos, filter }) => {

const [newTodo, setNewTodo] = useState("");

// ✅ Good: 関数内の処理が、重たい計算でなければこれでOK

const visibleTodos = getFilteredTodos(todos, filter);

// ...

};

＊＊関数内の処理が重い場合＊＊

関数の処理とは関係のないstateが更新されたタイミングで、

余計なキャッシュを使用している場合は、useMemo()を使用して、関数をメモ化する。

import { useMemo, useState } from 'react';

const TodoList = ({ todos, filter }) => {
  const [newTodo, setNewTodo] = useState('');
  // ✅ Good: useMemoで、関数をメモ化する
  const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);
  // ...
}

1

2

3

4

5

6

7

8

import { useMemo, useState } from 'react';

const TodoList = ({ todos, filter }) => {

const [newTodo, setNewTodo] = useState('');

// ✅ Good: useMemoで、関数をメモ化する

const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);

// ...

}

3. props が変更されたときにすべての state をリセットする

＊ propsで受け取った値が変更されているのに、commentの値がリセットされていない場合

■Bad propsの値が変更になった際に、commentの値が空になるようにする

const ProfilePage = ({ userId }) => {
  const [comment, setComment] = useState("");

  // 🔴 Bad: propsの値が変更になった際に、commentの値が空になるようにする
  useEffect(() => {
    setComment("");
  }, [userId]);
  // ...
};

1

2

3

4

5

6

7

8

9

const ProfilePage = ({ userId }) => {

const [comment, setComment] = useState("");

// 🔴 Bad: propsの値が変更になった際に、commentの値が空になるようにする

useEffect(() => {

setComment("");

}, [userId]);

// ...

};

このように記述すると、ProfilePageとProfilePageが持つ子コンポーネントは、

まず古い値でレンダリングされ、その後に再度レンダリングされることになる為、非効率。

■Good コンポーネントを２つに分割し、親コンポーネントから子コンポーネントに key 属性を渡す

const ProfilePage = ({ userId }) => {
  return <Profile userId={userId} key={userId} />;
};

const Profile = ({ userId }) => {
  // ✅ Good: このstateは、親コンポーネントで設定したkeyが変更された際にリセットされる
  const [comment, setComment] = useState("");
  // ...
}

1

2

3

4

5

6

7

8

9

const ProfilePage = ({ userId }) => {

return <Profile userId={userId} key={userId} />;

};

const Profile = ({ userId }) => {

// ✅ Good: このstateは、親コンポーネントで設定したkeyが変更された際にリセットされる

const [comment, setComment] = useState("");

// ...

}

4. アプリケーションの初期化

＊アプリが読み込まれるときに、一度だけ実行したいロジックがある場合

■Bad 一度しか実行したくないロジックをトップレベルのコンポーネントのuseEffect内に書く

const App = () => {
  // 🔴 Bad: 一度しか実行したくないロジックをトップレベルのコンポーネントのuseEffect内に書く
  useEffect(() => {
    loadDataFromLocalStorage();
    checkAuthToken();
  }, []);
  // ...
};

1

2

3

4

5

6

7

8

const App = () => {

// 🔴 Bad: 一度しか実行したくないロジックをトップレベルのコンポーネントのuseEffect内に書く

useEffect(() => {

loadDataFromLocalStorage();

checkAuthToken();

}, []);

// ...

};

上記は開発環境では2度実行されてしまう。

このように記述すると、

関数が 2 回呼び出されることを想定していないため

認証トークンを無効化させてしまう可能性などがある。

■Good トップレベルに変数を使用することで再実行をスキップする

let didInit = false;

const App = () => {
  useEffect(() => {
    if (!didInit) {
      didInit = true;
      // ✅ Good: アプリが読み込まれる際に一度だけ実行される
      loadDataFromLocalStorage();
      checkAuthToken();
    }
  }, []);
  // ...
};

1

2

3

4

5

6

7

8

9

10

11

12

13

let didInit = false;

const App = () => {

useEffect(() => {

if (!didInit) {

didInit = true;

// ✅ Good: アプリが読み込まれる際に一度だけ実行される

loadDataFromLocalStorage();

checkAuthToken();

}

}, []);

// ...

};

■Good モジュールの初期化時やアプリのレンダリング前に実行する

if (typeof window !== "undefined") {
  // ✅ Good: アプリが読み込まれる際に一度だけ実行される
  checkAuthToken();
  loadDataFromLocalStorage();
}

const App = () => {
  // ...
};`

1

2

3

4

5

6

7

8

9

if (typeof window !== "undefined") {

// ✅ Good: アプリが読み込まれる際に一度だけ実行される

checkAuthToken();

loadDataFromLocalStorage();

}

const App = () => {

// ...

};`

5. 外部ストアへのサブスクライブ

＊サードパーティーライブラリやブラウザに組み込まれたAPIなどを使う場合

■Bad useEffect内で手動でサブスクライブする

const useOnlineStatus = () => {
  // 🔴 Bad: useEffect内で手動サブスクリプション
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    const updateState = () => {
      setIsOnline(navigator.onLine);
    };

    updateState();

    window.addEventListener("online", updateState);
    window.addEventListener("offline", updateState);
    return () => {
      window.removeEventListener("online", updateState);
      window.removeEventListener("offline", updateState);
    };
  }, []);
  return isOnline;
};

const ChatIndicator = () => {
  const isOnline = useOnlineStatus();
  // ...
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

const useOnlineStatus = () => {

// 🔴 Bad: useEffect内で手動サブスクリプション

const [isOnline, setIsOnline] = useState(true);

useEffect(() => {

const updateState = () => {

setIsOnline(navigator.onLine);

};

updateState();

window.addEventListener("online", updateState);

window.addEventListener("offline", updateState);

return () => {

window.removeEventListener("online", updateState);

window.removeEventListener("offline", updateState);

};

}, []);

return isOnline;

};

const ChatIndicator = () => {

const isOnline = useOnlineStatus();

// ...

};

上記のような処理はuseEffect内で行われるのが一般的だが、

外部ストアへサブスクライブする際には、

useSyncExternalStoreを使用することが推奨されている。

■Good

const subscribe = (callback) => {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);
  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
};

const useOnlineStatus = () => {
  // ✅ Good: useSyncExternalStoreを使用して外部ストアへサブスクライブする
  return useSyncExternalStore(
    subscribe, // 同じ関数を渡す限り、React は再サブスクライブしない
    () => navigator.onLine,
    () => true
  );
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

const subscribe = (callback) => {

window.addEventListener("online", callback);

window.addEventListener("offline", callback);

return () => {

window.removeEventListener("online", callback);

window.removeEventListener("offline", callback);

};

const useOnlineStatus = () => {

// ✅ Good: useSyncExternalStoreを使用して外部ストアへサブスクライブする

return useSyncExternalStore(

subscribe, // 同じ関数を渡す限り、React は再サブスクライブしない

() => navigator.onLine,

() => true

);

};

6. データのfetch

＊イベントによってデータのfetchを行う必要がある場合

■Bad クリーンアップなしでfetch

const SearchResults = ({ query }) => {
  const [results, setResults] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    // 🔴 Bad: クリーンアップなしでfetch
    fetchResults(query, page).then((json) => {
      setResults(json);
    });
  }, [query, page]);

  const handleNextPageClick = () => {
    setPage(page + 1);
  };
  // ...
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

const SearchResults = ({ query }) => {

const [results, setResults] = useState([]);

const [page, setPage] = useState(1);

useEffect(() => {

// 🔴 Bad: クリーンアップなしでfetch

fetchResults(query, page).then((json) => {

setResults(json);

});

}, [query, page]);

const handleNextPageClick = () => {

setPage(page + 1);

};

// ...

};

queryとpageの値が変更になったときに、

ネットワークからのデータと同期させる必要がある。

エフェクトに記述するべきだが、このコンポーネントでは、バグが生じる可能性がある。

例えば検索などのinputエリアがある場合、

ユーザーが入力フィールドにhelloと打つと、

h, he, hel, hell, helloのそれぞれでfetchされることになる。

しかしこの5つのレスポンスの結果がfetchした順序で返ってくる保証がない。

この現象のことを、race condition（競合状態）と呼ぶ。

これを解消するためには、クリーンアップを追加する必要がある。

■Good

const SearchResults = ({ query }) => {
  const [results, setResults] = useState([]);
  const [page, setPage] = useState(1);
  useEffect(() => {
    // NOTE: 変数を導入
    let ignore = false;
    fetchResults(query, page).then((json) => {
      if (!ignore) {
        setResults(json);
      }
    });
    // ✅ Good: クリーンアップ関数
    return () => {
      ignore = true;
    };
  }, [query, page]);

  const handleNextPageClick = () => {
    setPage(page + 1);
  };
  // ...
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

const SearchResults = ({ query }) => {

const [results, setResults] = useState([]);

const [page, setPage] = useState(1);

useEffect(() => {

// NOTE: 変数を導入

let ignore = false;

fetchResults(query, page).then((json) => {

if (!ignore) {

setResults(json);

}

});

// ✅ Good: クリーンアップ関数

return () => {

ignore = true;

};

}, [query, page]);

const handleNextPageClick = () => {

setPage(page + 1);

};

// ...

};

クリーンアップの追加により、最後にリクエストしたもの以外のレスポンスが無視される。

コンポーネント内の生の useEffect の呼び出しが少なければ少ないほど、

アプリケーションのメンテナンスは容易になるため、

データ取得ロジックをカスタムフックに移動することも検討する必要がある。

const SearchResults = ({ query }) => {
  const [page, setPage] = useState(1);
  const params = new URLSearchParams({ query, page });

  // ✅ Good: コンポーネント内でeffectを呼び出さずにカスタムフックに切り分ける
  const results = useData(`/api/search?${params}`);

  const handleNextPageClick = () => {
    setPage(page + 1);
  };
  // ...
};

const useData = (url) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    let ignore = false;
    fetch(url)
      .then((response) => response.json())
      .then((json) => {
        if (!ignore) {
          setData(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [url]);
  return data;
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

const SearchResults = ({ query }) => {

const [page, setPage] = useState(1);

const params = new URLSearchParams({ query, page });

// ✅ Good: コンポーネント内でeffectを呼び出さずにカスタムフックに切り分ける

const results = useData(`/api/search?${params}`);

const handleNextPageClick = () => {

setPage(page + 1);

};

// ...

};

const useData = (url) => {

const [data, setData] = useState(null);

useEffect(() => {

let ignore = false;

fetch(url)

.then((response) => response.json())

.then((json) => {

if (!ignore) {

setData(json);

}

});

return () => {

ignore = true;

};

}, [url]);

return data;

};

まとめ

ReactのuseEffectは、副作用の管理に便利な機能ですが、

考えなしに使用すると、思わぬ場所でバグが発生したりエラーの原因となってしまうことがあります。

私自身もuseEffectを深く理解した上で、

本当にuseEffectを使用するべき場所なのかということを、

再度確認して慎重に使用していこうと思います。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

今回は、プロジェクトでlodashを使用する機会があったので、

lodashについて調べた内容と、

今後活用できそうなメソッドを記事にまとめてみました。

lodashとは

Lodashとは、配列、数値、オブジェクト、文字列などの

操作をまとめて提供してくれるライブラリ。

・配列、オブジェクト、文字列の反復処理

・値の操作とテスト

・複合関数の作成

などの操作で使用するのが最適。

https://lodash.com/docs/4.17.15

使い方

インストール

 npm i -g npm
npm i --save lodash

1 2	npm i -g npm npm i --save lodash

インストール後に、使用するファイルでインポートして使用する。

import _ from 'lodash';

1	import _ from 'lodash';

Array(配列)

_.chunk(array, [size=1])

配列を引数の数で分割してくれるメソッド

// Example
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]


_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]


_.chunk(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'], 2);
// [["a","b"],["c","d"],["e","f"],["g","h"]]

1

2

3

4

5

6

7

8

9

10

11

// Example

_.chunk(['a', 'b', 'c', 'd'], 2);

// => [['a', 'b'], ['c', 'd']]

_.chunk(['a', 'b', 'c', 'd'], 3);

// => [['a', 'b', 'c'], ['d']]

_.chunk(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'], 2);

// [["a","b"],["c","d"],["e","f"],["g","h"]]

_.compact(array)

配列の中から falsyな値を全て排除してくれるメソッド

*falsyな値　（false、空文字、NaN、0、undefined、null）

// Example
_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

_.compact([0, 1, false, true, null, 2, '', 3, NaN, undefined])
// [1,true,2,3]

1

2

3

4

5

6

// Example

_.compact([0, 1, false, 2, '', 3]);

// => [1, 2, 3]

_.compact([0, 1, false, true, null, 2, '', 3, NaN, undefined])

// [1,true,2,3]

_.difference(array, [values])

array : 比較したい配列

values : 除外したい値

二つの配列を比較して、

第二引数(values)で指定された配列に含まれない値を、返却してくれるメソッド。

返却された配列の順序は、最初の配列の順列で決まる。

// Example
_.difference(['Nao', 'Tom', 'Taro', 'Jun'], ['Liz', 'Nao'])
// ["Tom","Taro","Jun"]

_.difference([2, 1], [2, 3]);
// => [1]`

1

2

3

4

5

6

// Example

_.difference(['Nao', 'Tom', 'Taro', 'Jun'], ['Liz', 'Nao'])

// ["Tom","Taro","Jun"]

_.difference([2, 1], [2, 3]);

// => [1]`

_.drop(array, [n=1])

先頭から[n=1]で指定した要素の数だけ削除し

配列を作成してくれるメソッド。

n個指定しないと、先頭の1つだけ削除される。

array (配列) : 照会する配列

[n=1] (数値) : 削除する要素の数

// Example
_.drop([1, 2, 3]);
// => [2, 3]

_.drop([1, 2, 3], 2);
// => [3]

_.drop([1, 2, 3], 5);
// => []

_.drop([1, 2, 3], 0);
// => [1, 2, 3]

1

2

3

4

5

6

7

8

9

10

11

12

// Example

_.drop([1, 2, 3]);

// => [2, 3]

_.drop([1, 2, 3], 2);

// => [3]

_.drop([1, 2, 3], 5);

// => []

_.drop([1, 2, 3], 0);

// => [1, 2, 3]

_.dropRight(array, [n=1])

末尾から[n=1]で指定した要素の数だけ削除し、

配列を作成してくれるメソッド。

n個指定しないと、先頭の1つだけ削除される。

array (配列) : 照会する配列

[n=1] (数値) : 削除する要素の数

// Example
_ .dropRight ([ 1 , 2 , 3 ] );
// => [1, 2]

_ .dropRight ([ 1 , 2 , 3 ] , 2 ) ;
// => [1]

_ .dropRight ([ 1 , 2 , 3 ] , 5 ) ;
// => []

_ .dropRight ([ 1 , 2 , 3 ] , 0 ) ;
// => [1, 2, 3]

1

2

3

4

5

6

7

8

9

10

11

12

// Example

_ .dropRight ([ 1 , 2 , 3 ] );

// => [1, 2]

_ .dropRight ([ 1 , 2 , 3 ] , 2 ) ;

// => [1]

_ .dropRight ([ 1 , 2 , 3 ] , 5 ) ;

// => []

_ .dropRight ([ 1 , 2 , 3 ] , 0 ) ;

// => [1, 2, 3]

_.flatten(array)

配列のネストを1つ浅くすることができるメソッド。

// Example
_ .flatten ([ 1 ,  [ 2 ,  [ 3 ,  [ 4 ]] , 5 ] ]);
// => [1, 2, [3, [4]], 5]

1

2

3

// Example

_ .flatten ([ 1 , [ 2 , [ 3 , [ 4 ]] , 5 ] ]);

// => [1, 2, [3, [4]], 5]

_.flattenDeep(array)

_.flattenDeepは配列のネストをなくして、全てフラットにすることができるメソッド。

// Example
_ .flattenDeep ([ 1 , [  2 , [ 3 ,  [ 4 ]]  , 5 ] ]);
// => [1, 2, 3, 4, 5]

1

2

3

// Example

_ .flattenDeep ([ 1 , [ 2 , [ 3 , [ 4 ]] , 5 ] ]);

// => [1, 2, 3, 4, 5]

_.fromPairs(pairs)

二つの配列のkey、valueからオブジェクトを生成してくれるメソッド。

pairs (配列) : キーと値のペア

// Example
_ .fromPairs ([[ 'a' , 1 ] , [ 'b'  , 2 ] ]);
// => { 'a': 1, 'b': 2 }

1

2

3

// Example

_ .fromPairs ([[ 'a' , 1 ] , [ 'b' , 2 ] ]);

// => { 'a': 1, 'b': 2 }

_.union([arrays])

指定された配列から、一意の値の配列を順番に作成してくれるメソッド。

[arrays] : 検査する配列

// Example
_.union([2], [1, 2]); // [2, 1]

_.union([1, 2, 3, 4, 5, 6, 7], [5, 6, 7]) // [1,2,3,4,5,6,7]

1

2

3

4

// Example

_.union([2], [1, 2]); // [2, 1]

_.union([1, 2, 3, 4, 5, 6, 7], [5, 6, 7]) // [1,2,3,4,5,6,7]

_.uniq(array)

配列から一意な値を取得してくれるメソッド。

結果値の順序は、配列内での出現順序によって決まる。

// Example
_.uniq([2, 1, 2]);
// => [2, 1]

1

2

3

// Example

_.uniq([2, 1, 2]);

// => [2, 1]

そのほかのメソッド

_.isEqual(value, other)

2 つの値を比較して、値が等しいかどうかを判断してくれるメソッド。

value : 比較する値

other : 比較するもう一方の値

const  object = { 'a': 1 };
const  other = { 'a': 1 };
 
_.isEqual(object, other);
// => true
 
object === other;
// => false

1

2

3

4

5

6

7

8

const object = { 'a': 1 };

const other = { 'a': 1 };

_.isEqual(object, other);

// => true

object === other;

// => false

_.uniqueId([prefix=''])

一意の ID を生成してくれるメソッド。

prefixが指定されている場合は、prefixの後にID が追加される。

// Example
_.uniqueId('contact_');
// => 'contact_104'

_.uniqueId();
// => '105'

1

2

3

4

5

6

// Example

_.uniqueId('contact_');

// => 'contact_104'

_.uniqueId();

// => '105'

_.castArray(value)

引数に入れた値を配列として返却してくれるメソッド。

配列が来た場合は、そのまま返却される。

value : 検査する値

// Example
_.castArray(1);
// => [1]

_.castArray({ 'a': 1 });
// => [{ 'a': 1 }]

_.castArray('abc');
// => ['abc']

_.castArray(null);
// => [null]

_.castArray(undefined);
// => [undefined]

_.castArray();
// => []

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// Example

_.castArray(1);

// => [1]

_.castArray({ 'a': 1 });

// => [{ 'a': 1 }]

_.castArray('abc');

// => ['abc']

_.castArray(null);

// => [null]

_.castArray(undefined);

// => [undefined]

_.castArray();

// => []

_.clone(value)

valueに入れた値を、1階層までコピーしてくれるメソッド。

（シャローコピー）

value : 複製する値

// Example
const objects = [{ 'a': 1 }, { 'b': 2 }];

const shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

1

2

3

4

5

6

// Example

const objects = [{ 'a': 1 }, { 'b': 2 }];

const shallow = _.clone(objects);

console.log(shallow[0] === objects[0]);

// => true

_.cloneDeep(value)

valueに渡された値を再帰的にコピーしてくれるメソッド。

（ディープコピー）

value : 再帰的に複製する値

// Example
const objects = [{ 'a': 1 }, { 'b': 2 }];

const deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

1

2

3

4

5

6

// Example

const objects = [{ 'a': 1 }, { 'b': 2 }];

const deep = _.cloneDeep(objects);

console.log(deep[0] === objects[0]);

// => false

lodashを使用することによって、

配列の操作、抽出、オブジェクトへの変換などが簡単にできます。

コードもすっきりし、可読性が上がるため、

プロジェクトで使用している場合は、効率よく組み込んでいきたいと思います。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

今回はTypeScriptのtype と interfaceについてまとめてみました。

interface(インターフェース)

interfaceは、クラスやオブジェクトが持つ、

プロパティやメソッドを定義した型のことを指す。

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "John",
  age: 5,
};

1

2

3

4

5

6

7

8

9

interface Person {

age: number;

}

const person: Person = {

age: 5,

};

type(型エイリアス)

typeは、型に名前を付けることができる。

名前のついた型を、型エイリアス(タイプエイリアス: type alias)と呼ぶ。

type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: "John",
  age: 5,
};

1

2

3

4

5

6

7

8

9

type Person = {

age: number;

};

const person: Person = {

age: 5,

};

// NOTE: string | number型に型名を付ける
type StringOrNumber = string | number;

1 2	// NOTE: string \| number型に型名を付ける type StringOrNumber = string \| number;

※interface では、上記のような型定義はできない。

typeでの型定義では、ほかにも様々な型に名前を付けることができる。

// NOTE: プリミティブ型
type Str = string;
// NOTE: リテラル型
type Literal = 200;
// NOTE: 配列型
type Numbers = number[];
// NOTE: オブジェクト型
type UserObj = { id: number; name: string };
// NOTE: ユニオン型
type NumberOrNull = number | null;
// NOTE: 関数型
type CallbackFunction = (value: string) => boolean;

1

2

3

4

5

6

7

8

9

10

11

12

// NOTE: プリミティブ型

type Str = string;

// NOTE: リテラル型

type Literal = 200;

// NOTE: 配列型

type Numbers = number[];

// NOTE: オブジェクト型

type UserObj = { id: number; name: string };

// NOTE: ユニオン型

type NumberOrNull = number | null;

// NOTE: 関数型

type CallbackFunction = (value: string) => boolean;

interfaceとtypeの違い

継承について

interface は、interfaceやtypeを継承することができる。

interface Animal {
  name: string;
}
type Creature = {
  dna: string;
};

// NOTE: interfaceを使用すると、interface、typeのどちらも継承ができる
interface Dog extends Animal, Creature {
  dogType: string;
}

1

2

3

4

5

6

7

8

9

10

11

interface Animal {

}

type Creature = {

dna: string;

};

// NOTE: interfaceを使用すると、interface、typeのどちらも継承ができる

interface Dog extends Animal, Creature {

dogType: string;

}

typeでの型定義では、extendを使用して継承することはできない。

交差型を使用することで、extendでの継承と似たものを再現することは可能。

type Animal = {
  name: string;
};
type Creature = {
  dna: string;
};

/* NOTE: typeではextendでの継承はできないが、
        交差型を使用して、再現することは可能  */
type Dog = Animal &
  Creature & {
    dogType: string;
  };

1

2

3

4

5

6

7

8

9

10

11

12

13

type Animal = {

};

type Creature = {

dna: string;

};

/* NOTE: typeではextendでの継承はできないが、

交差型を使用して、再現することは可能 */

type Dog = Animal &

Creature & {

dogType: string;

};

継承による上書き

interfaceで継承の際に、プロパティを上書き（オーバーライド）すると、

継承元のプロパティの型が上書きされる。

interface Animal {
  // NOTE: Animalのnameの型はany
  name: any;
  price: {
    yen: number;
  };
  legCount: number; // Dog
}

interface Dog extends Animal {
  // NOTE: Dogのnameの型はstring
  name: string; // Dog
  price: {
    yen: number; // Dog
    dollar: number; // Dog
  };
}

// NOTE: 最終的なDogの定義
interface Dog {
  name: string;
  price: {
    yen: number;
    dollar: number;
  };
  legCount: number;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

interface Animal {

// NOTE: Animalのnameの型はany

price: {

yen: number;

};

legCount: number; // Dog

}

interface Dog extends Animal {

// NOTE: Dogのnameの型はstring

price: {

yen: number; // Dog

dollar: number; // Dog

};

}

// NOTE: 最終的なDogの定義

interface Dog {

price: {

yen: number;

dollar: number;

};

legCount: number;

}

※上記では、nameの型定義をany → string に上書きされているが、

上書きできるものは、元の型に代入できるもののみ。

下記のように、number型であるnumberFieldを、string型で上書きすることはできない。

interface A {
  numberField: number;
}

interface B extends A {
  numberField: string; // インターフェイス 'B' はインターフェイス 'A' を正しく拡張していません。
}

1

2

3

4

5

6

7

interface A {

numberField: number;

}

interface B extends A {

numberField: string; // インターフェイス 'B' はインターフェイス 'A' を正しく拡張していません。

}

typeでの型定義では、上書きにならずにフィールドの型の交差型が計算される。

交差型で計算ができない場合でもコンパイルエラーにはならない。

type Animal = {
  name: number;
  price: {
    yen: number;
    dollar: number;
  };
};

type Dog = Animal & {
  name: string;
  price: {
    yen: number;
    euro: number;
  };
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

type Animal = {

price: {

yen: number;

dollar: number;

};

type Dog = Animal & {

price: {

yen: number;

euro: number;

};

// NOTE: 最終的なDogの定義
type Dog = {
  name: never; // 交差型を作れない場合はコンパイルエラーではなくnever型になる
  price: {
    yen: number;
    dollar: number;
    euro: number;
  };
};

1

2

3

4

5

6

7

8

9

// NOTE: 最終的なDogの定義

type Dog = {

price: {

yen: number;

dollar: number;

euro: number;

};

同名のものを宣言

interface の場合は、同じ名前のinterface を定義することができる。

定義したinterfaceは、すべての宣言を合成させたものになる。

interface Animal {
  name: string;
  legCount: number;
}
interface Animal {
  price: {
    yen: number;
  };
}

const animal: Animal = {
  name: "",
  legCount: 0,
  price: {
    yen: 1,
  },
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

interface Animal {

legCount: number;

}

interface Animal {

price: {

yen: number;

};

}

const animal: Animal = {

legCount: 0,

price: {

yen: 1,

},

};

同じ名前で型定義できるということは、気づかぬうちに同じ名前で宣言し、

定義した型の中身が変わってしまうことにもなりうるので、使う際には注意する必要がある。

typeでの型定義では、同じ名前での型定義はできない。

type Animal = { // 識別子 'Animal' が重複しています。
  name: string;
  legCount: number;
};

type Animal = {  // 識別子 'Animal' が重複しています。
  price: {
    yen: number;
  };
};

1

2

3

4

5

6

7

8

9

10

type Animal = { // 識別子 'Animal' が重複しています。

legCount: number;

};

type Animal = { // 識別子 'Animal' が重複しています。

price: {

yen: number;

};

Mapped Types

Mapped Typesは型のキーを動的に指定することができる仕組み。

オブジェクトのキーに型定義をすることが可能。

typeでの型定義のみで実装することができる。

type Fruits = "apple" | "banana" | "strawberry" | "orange";
type FruitsObj = {
  [key in Fruits]: string;
};

1

2

3

4

type Fruits = "apple" | "banana" | "strawberry" | "orange";

type FruitsObj = {

[key in Fruits]: string;

};

interfaceで使用するとエラーが発生する。

type Fruits = "apple" | "banana" | "strawberry" | "orange";
interface FruitsObj  {
  [key in Fruits]: string; // マップされた型では、プロパティまたはメソッドを宣言しない場合があります。
};

1

2

3

4

type Fruits = "apple" | "banana" | "strawberry" | "orange";

interface FruitsObj {

[key in Fruits]: string; // マップされた型では、プロパティまたはメソッドを宣言しない場合があります。

};

今回はinterfaceとtypeでの型定義の違いについてまとめてみました。

interfaceとtypeのどちらを使用して型定義を行うかは、

それぞれのメリットやデメリットを理解して、

プロジェクト内でルールを決め、そのルールに則って開発をするようにします。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの大坪です。

今回は、JavaScriptにおいて非常に重要な概念のひとつであるスコープについて解説したいと思います。適切にスコープを理解することは、バグの発生を防ぎ、パフォーマンスの向上やメモリ管理の適正化に貢献します。スコープを正しく把握することで、モジュール性の高いコードを書くことができ、コードの保守性と拡張性が格段に向上します。

スコープとは?

スコープとは、定義した変数や関数が参照できる範囲のことを指します。変数やオブジェクトなどが特定のスコープに存在しない場合は参照することが出来ません。また、関数内で宣言された変数はその関数に属するため、他の関数からも参照できません。
そのため、存在しない変数を取得しようとしたとみなされ、参照エラー(RefarenceError)が発生します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function firstFunction() {

let localVal = "ローカルな変数です"; // firstFunctionスコープに定義された変数

console.log(localVal); // 出力: ローカルな変数です

}

function secondFunction() {

// secondFunctionからlocalValを参照しようとする

console.log(localVal); // ReferenceError: localVal is not defined

}

このサンプルのように変数localValはfirstFunction内で宣言されており、そのスコープ外からは参照できません。secondFunctionやグローバルスコープからlocalValを参照しようとすると、ReferenceErrorが発生します。

また、スコープは階層構造を持っているので、子スコープから親スコープの変数にアクセスすることはできますが、その逆である親スコープから子スコープの変数にアクセスすることはできません。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

// 親スコープ

function parentFunction() {

let parentVal = "親関数で定義された変数";

// 子スコープ

function childFunction() {

let childVal = "子関数で定義された変数";

// 子スコープから親スコープの変数にアクセス

console.log(parentVal); // 出力: 親関数で定義された変数

console.log(childVal); // 出力: 子関数で定義された変数

}

childFunction();

// 親スコープから子スコープの変数にアクセスしようとする

console.log(childVal) // ReferenceError: childVal is not defined

// プログラムはこの時点でエラーを出して停止します。

}

// parentFunctionを呼び出して関数を実行

parentFunction();

スコープにはアクセスできる範囲に制約があります。それでは、どのような種類のスコープがあるのでしょうか。まずは、グローバルスコープについて見ていきましょう。

グローバルスコープ

グローバルスコープとは、プログラム全体で定義された変数や関数は、どこからでも参照可能になるスコープです。また、varと使って定義される変数を関数はブロックスコープにならず、グローバルスコープになります。(ブロックスコープについては下記で説明します。)

1

2

3

4

5

6

7

8

9

10

11

12

var globalVal = "グローバル変数"; // グローバルスコープ

function myFunction() {

console.log(globalVal); // 出力: グローバル変数

}

myFunction();

console.log(globalVal); // 出力:グローバル変数

このコードでは、globalValはグローバルスコープに定義されているため、myFunction内および関数外からも参照可能です。

グローバルスコープは便利な反面、乱用するとさまざまな問題を引き起こす可能性があります。
まず、名前の衝突が発生しやすくなります。他の開発者やライブラリから定義された変数と同じ名前を使ってしまうと、意図せずに上書きされてしまう危険があります。
また、グローバル変数はアプリケーション全体から参照可能となるため、どこからでも変更される可能性があります。変数の値が適切に管理されないと、バグの原因になります。

グローバルスコープ以外にローカルスコープに分類される関数スコープとブロックスコープがあります。
ローカルスコープに定義された変数や関数は、そのスコープ外からはアクセスできません。ではそれも見ていきましょう！

関数スコープ

関数スコープは、関数内で宣言された変数の有効範囲を指します。関数外からはアクセスできません。

1

2

3

4

5

6

7

8

9

10

11

12

function myFunction() {

var functionVal = "関数スコープの変数"; // 関数スコープ

console.log(functionVar); // 出力: 関数スコープの変数

}

myFunction();

console.log(functionVal); // ReferenceError: functionVar is not defined

関数内でのみ有効な変数を作成でき、異なる関数内であれば同じ変数名を使用できます。そして、関数スコープ内の変数は、関数が呼び出されるたびに再作成されます。

しかし、異なる関数スコープに配置された変数や関数を使うことはできません。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function firstFunction() {

let functionVal1 = "firstFunction関数スコープの変数";

console.log(functionVal1); // 出力: firstFunction関数スコープの変数

}

function secondFunction() {

let functionVal2 = "secondFunction関数スコープの変数";

console.log(functionVal2); // 出力: secondFunction関数スコープの変数

console.log(functionVal1); // ReferenceError: functionVal1 is not defined

}

firstFunction();

secondFunction();

上記の例では、functionVal1はfirstFunction関数のスコープ内に限定されており、secondFunction関数のスコープからは参照できないため、ReferenceErrorが発生します。

関数スコープはグローバルスコープとは違い、関数の外で値が更新されることがなく、保守性が上がります。

ブロックスコープ

ブロックスコープは、letとconstで宣言された変数で、特定のブロックである{}内でのみ有効となるスコープのことです。このスコープ内に定義された変数や関数は、そのブロックの外では使用できません。
また、letやconstで宣言された変数は、宣言される前にアクセスするとエラーが発生しますので注意しましょう。

1

2

3

4

5

6

7

8

9

10

if (true) {

let blockVal = "ブロックスコープの変数";

console.log(blockVal); // 出力: "ブロックスコープの変数"

}

console.log(blockVal); // ReferenceError: blockVar is not defined

一方、varではブロックスコープは適用されず、関数スコープが適用されます。

1

2

3

4

5

6

7

8

9

10

if (true) {

var varVal = "var変数"; // 関数スコープ

console.log(varVal); // 出力:"var変数"

}

console.log(varVal); // 出力:"var変数"

このように、varとlet/constでは、スコープの扱いが異なります。ES6以降は、できる限りletやconstを使用することが推奨されています。

レキシカルスコープ

レキシカルスコープは、関数がどこで定義されたかによって、その関数が参照できる変数が決まるというものです。レキシカルスコープは、実行中のコードが属しているスコープの外側のスコープを指します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function outerFunction() {

let outerVal = "外部の変数";

function innerFunction() {

console.log(outerVal); // 出力: 外部の変数

}

innerFunction();

}

outerFunction();

この例では、outerFunctionがouterValというローカル変数を作成し、その中でinnerFunctionという内部関数を定義しています。innerFunctionはouterFunctionの中でしか利用できません。しかし、innerFunctionはouterFunctionで宣言されたouterValにアクセスすることができます。これは、入れ子の関数がその外側のスコープで宣言された変数にアクセスできるということを意味します。

スコープチェーン

スコープチェーンは、スコープの階層構造を指し、変数や関数の探索がどのように行われるかを決定します。JavaScriptでは、スコープチェーンを通じて、内側のスコープから外側のスコープへと順に検索を行います。

次のコードを見てみましょう。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

let globalVal = "グローバル変数";

function outerFunction() {

let outerVal = "outerFunctionの変数";

function innerFunction() {

let innerVal = "innerFunctionの変数";

function nestedFunction() {

console.log(innerVal); // 出力: innerFunctionの変数

console.log(outerVal); // 出力: outerFunctionの変数

console.log(globalVal); // 出力: グローバル変数

}

nestedFunction();

}

innerFunction();

}

outerFunction();

このコードでは、関数outerFunctionがouterValという変数を定義し、その中でinnerFunctionを定義しています。さらにinnerFunctionの中でnestedFunctionを定義しています。各関数内で変数をログに出力することで、スコープチェーンの動作を示しています。

スコープチェーンの順序

まず、現在の関数スコープで変数を探します。
もし変数が見つからない場合は、一つ外側のスコープに移動して変数を探します。
これを繰り返して、最終的にはグローバルスコープまで検索を行います。

具体的なスコープチェーンの動作

innerValの参照:
- nestedFunctionのスコープでinnerValを探しますが見つかりません。
- 次に親スコープであるinnerFunctionのスコープで探します。ここでinnerValが見つかります。
outerValの参照:
- nestedFunctionおよびinnerFunctionのスコープで見つからないため、さらに外側のouterFunctionのスコープで探します。ここでouterValが見つかります。
globalValの参照:
- nestedFunction、innerFunction、outerFunctionのいずれのスコープでも見つからないため、最終的にグローバルスコープで探します。ここでglobalValが見つかります。

クロージャー

クロージャとは、ネストされた関数と、その関数の外側への参照の組み合わせを指します。クロージャを使用すると、子の関数から親である外側の関数スコープに参照できます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function createClosure() {

let outerVal = "外側の変数";

return function innerFunction() {

console.log(outerVal); // 出力: 外側の変数

}

const closure = createClosure();

closure();

上記の例では、innerFunctionはcreateClosureのスコープ内で宣言された変数outerValを参照できます。これがクロージャーの概念です。クロージャーは関数を作成する度に形成されます。

まとめ

JavaScriptにおけるスコープの理解は、コードの質を大きく左右する重要な概念です。適切にスコープを把握し、変数の有効範囲を意識的に管理することが、バグの防止やパフォーマンス向上に直結します。特にグローバルスコープの乱用は避け、関数スコープやブロックスコープを活用することをおすすめします。

適切なスコープ管理は、保守性と可読性に優れたコードを生み出します。この重要な概念を確実に理解することで、JavaScriptでの実装の質をさらに高められるはずです。

こんにちは、デジナーレ東京オフィスのWebデザイナー宮島です。

2024年4月1日に施行された「障害者差別解消法」の改正により、国や地方公共団体だけでなく、すべての民間企業もWebアクセシビリティの「合理的配慮の提供」が義務化されました。

今回は、比較的簡単にできる、デザイン面でのWebアクセシビリティ対策の要点をまとめてみました。

「障害者差別解消法」とは

障害者差別解消法は、障害者に対する差別を解消し、社会のあらゆる側面で平等に参加できるようにすることを目的とした法律です。
この法律に基づき、政府や企業は障害者の権利を保護し、彼らが生活のあらゆる場面で差別を受けないようにするための施策を講じる責任があります。

「Webアクセシビリティ」とは

外務省の「ウェブアクセシビリティ」に関する説明には、「ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームページで提供されている情報や機能に支障なくアクセスし、利用できること」と表記があります。

ここでいう「全ての人」というのは、様々な障害（視覚障害、聴覚障害、運動障害、認知障害など）のある人々や、一時的な特定の障害がある人々（怪我や病気など一時的な障害をもつ、高齢による視力や聴力・運動能力の低下が見られる人々）というだけではなく、インターネットの接続状況が悪い、メガネを忘れたので文字が読みにくい、Bluetoothイヤホンの電池が切れて音が聞けない、外国に旅行中で外国語のサイトを調べにきているが言語がわからないのような状態も含まれます。
Webアクセシビリティは、これらの人々もWebサイトやWebアプリケーションを支障なく操作できるようにするための原則や技術のことをいいます。

「障害者差別解消法」により、民間企業も情報やサービスにアクセスするための主要な手段としてWebサイトやアプリケーションを提供する際に、全ての人があらゆる状況でページを利用できるよう、企業が取り組むべき努力目標として、段階的に対応していく必要がでてきました。

Webアクセシビリティを考えたサイトデザイン

Webアクセシビリティを重視したサイトデザインは、誰もがWebサイトを利用できるようにするだけでなく、法的要件（達成基準）を満たすことも重要です。
この対策は、ユーザーエクスペリエンスの向上にもつながります。適切なデザイン原則を遵守し、Alt属性の使用や、適切なコントラスト比の確保、適切な構造とラベリングの提供など、Webアクセシビリティを実現するための工夫が必要です。

Webアクセシビリティの達成基準

Webアクセシビリティの達成基準はは、W3C（World Wide Web Consortium）が策定したWeb Content Accessibility Guidelines（WCAG）に基づいています。
WCAGは、ウェブコンテンツのアクセシビリティを向上させるための国際的な標準であり、それぞれの基準はA、AA、AAAの3つのレベルで定義されています。
現状、AAAは実装難度が高く、一般企業向けとしては、AAを目指す企業が多いように思います。
達成基準には、以下のような具体的な指針でレベルごとに基準が用意されています。

・知覚可能
・操作可能
・理解可能
・堅牢性

この指針は、必ずしも達成しなければいけないというものではなく、提供するサービスによって、対応する度合いを決める形が望ましいです。
今回はデザイン面に注目して、上記の「知覚可能」に絞っての要点をまとめています。

その他、上記４つの指針の詳細は下記リンクでご確認ください。

ウェブアクセシビリティ基盤委員会
JIS X 8341-3:2016 達成基準早見表（レベルA & AA）

現状のサイトの分析をしてみよう

現状のサイトのWebアクセシビリティにどこまで対応しているかを調べてみましょう！
簡単に調査を行えるという点で、既存のサービスを利用して、自社サイトのチェックを行ってみましょう

１、PageSpeed Insights

調べたいサイトのURLを入力して診断します。
この中のユーザー補助をチェックすると、コントラスト比やAltタグの文字入力漏れなどのチェックが行えます

PageSpeed Insights

２、WCAG Color contrast checker

chromeの拡張機能「WCAG Color contrast checker」は、chromeで開いて、インストールして使用します。
文字のコントラスト比についてのチェックを細かく行うことができます。

WCAG Color contrast checker

デザイン面で対応できるWebアクセシビリティ対策

１、テキストのコントラスト比

テキストと背景のコントラストを高めることで、視覚障害者や高齢者にも読みやすくします。

WCAGの基準では、

見出しなどに使用する大きい文字とその背景のコントラスト比は 3:1
通常のテキストとその背景のコントラスト比は最低4.5:1以上

となっています。

文字の小さいサイトはよりコントラスト比を気にして作る必要があります。

コントラスト比の基準をクリアした色の例

そして、この４色のコントラスト比は、ほぼ同じ数値になるように並べていますが、実際の視認性は色によって大きく違って見えるのではないでしょうか？
デザイン上なかなかコントラストを強めたくないという場合でも、配色を変更する、文字の大きさを変更するなどでの対応も視野に入れてみましょう。

２、適切なAlt属性の使用

画像にはAlt属性を付けることで、画像が読み込まれない場合やスクリーンリーダーを使用する場合に代替テキストとして表示されるようにします。
その際に、画像を説明するテキストを意識して挿入してみましょう。

３、適切な構造とラベリング

ページの構造を明確にし、適切な見出しやラベルを使用してコンテンツを整理します。
正しいHTMLマークアップを意識してコーディングを行なっているか意識してみましょう。

見出しタグ（<h1>から<h6>）を階層的に使用していないと、スクリーンリーダーが正しく読み上げることができない不親切な作りとなってしまいます。

また、同じリンク先に遷移するボタンに異なるテキストを使用する、別の遷移先のボタンに同じテキストを使用するなど、従来のデザインではやりがちな読み上げ時に不親切な構造を見直すことでWebアクセシビリティの改善が行えます。

例：お問い合わせページに遷移するボタン

例：別の詳細ページに誘導するボタン

まとめ

今後、一般企業のWebサイトでもWebアクセシビリティ対策を考えていかないといけない状況になり、すべてのユーザーがWebサイトを平等に利用できる環境を意識したデザインが不可欠になっていきます。アクセシビリティを考慮したデザインは、ユーザーエクスペリエンスの向上や法的要件の遵守にもつながります。

今回は、主に、デザイン面でのWebアクセシビリティ対策についてまとめました。
このほかにも、操作可能、理解可能、堅牢性などの面でのWebアクセシビリティ対策も意識していく必要があると思いますが、基本はまずできるところから一歩ずつ。

デザインの各ポイントを遵守し、継続的な改善を行うことで、より包括的で使いやすいWebサイトを提供することができます。

次回は「操作可能」の視点での比較的簡単に導入できるWebアクセシビリティ対策の記事でお会いしましょう〜！

こんにちは、デジナーレ福岡オフィスの徳安です。

今回はTypeScriptのジェネリクスについてまとめてみました。

Generics

ジェネリクスとは、「型も変数のように、扱えるようにすること」

ジェネリクスを用いると、「型の安全性とコードの共通化」を両立することができる。

コードを共通化する際に、共通化したいすべてのコードが同じ型になるわけではない。

any型を使用し共通化することで、コードの共通化はできるが、型の安全性が欠ける。

逆に、型の安全性を優先し、共通化せずに実装すると、

同じようなコードをたくさん作成する必要が出てきてしまう。

このような問題を解決するために、使用するものがGenerics（ジェネリクス）。

Generics の使い方

以下のように同じようなコードだが、返したい結果の「型が異なる場合」、

同じような記述を繰り返さないといけない。

Genericsを使用しない場合

// number型
const test = (arg: number): number => {
  return arg;
};

// string型
const test2 = (arg: string): string => {
  return arg;
};

test(1); //=> 1
test2("文字列"); //=> 文字列
```

1

2

3

4

5

6

7

8

9

10

11

12

13

// number型

const test = (arg: number): number => {

return arg;

};

// string型

const test2 = (arg: string): string => {

return arg;

};

test(1); //=> 1

test2("文字列"); //=> 文字列

```

上記のコードで異なる部分は、「TypeScriptの型のみ」。

この型が変数のように扱えれば、共通化できる。

// 注意: これは架空の文法です
const test = <type>(arg: <type>): <type> => {
  return arg;
};

test<number>(1);
test<string>("文字列");

1

2

3

4

5

6

7

// 注意: これは架空の文法です

const test = <type>(arg: <type>): <type> => {

return arg;

};

test<number>(1);

test<string>("文字列");

このように、関数を実行する際に<type>で、記述した部分の型を

変数として扱うことができれば、共通化できる。

Genericsを使用する場合

以下のように、関数の引数の()の前に Generics を記述する。

const test = <T>(arg: T): T => {
  return arg;
};

test<number>(1);
test<string>("文字列");

1

2

3

4

5

6

const test = <T>(arg: T): T => {

return arg;

};

test<number>(1);

test<string>("文字列");

Generics は「暗黙的に型が解決される仕組み」があるため、

引数で型を指定しなくても、TypeScriptが暗黙的に型を定義してくれる。

const test = <T>(arg: T): T => {
  return arg;
};

test(1); // test: <1>(arg: 1) => 1
test("文字列"); // test: <"文字列">(arg: "文字列") => "文字列"

1

2

3

4

5

6

const test = <T>(arg: T): T => {

return arg;

};

test(1); // test: <1>(arg: 1) => 1

test("文字列"); // test: <"文字列">(arg: "文字列") => "文字列"

extends による型制約

extends を使用し、ジェネリクスの型Tを特定の型に限定することができる。

const stringFunc = <T extends string>(arg: T) => {
return { value: arg };
};

stringFunc<string>("");
stringFunc(1); // 型 'number' の引数を型 'string' のパラメーターに割り当てることはできません。

1

2

3

4

5

6

const stringFunc = <T extends string>(arg: T) => {

return { value: arg };

};

stringFunc<string>("");

stringFunc(1); // 型 'number' の引数を型 'string' のパラメーターに割り当てることはできません。

ジェネリクスの場合extendsを使用せずに実装も可能だが、

どんな型でも渡せてしまうため、型安全や、保守性の向上のために

どのような型が来るのかわかっている場合は、extendsで型規制を行う。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの大坪です。

フロントエンドのポジションは、しばしばデザイナーとの連携する必要がありますが、デザインの専門用語や原則の理解が不足していると、うまくコミュニケーションが取れなかったり、デザインカンプを元に開発を進めていく際にも、意図してデザインされたものが理解できなかったりします。

デザインの知識を持つことは、エンジニアにとって重要なスキルの1つです。デザインの基本原則を理解することで、デザイナーとのコミュニケーションがスムーズになり、ユーザーに優れたUIを提供できるようになります。

本記事では、デザインの基礎中の基礎である「4大原則」について解説します。

４大原則とは？

デザインには、視覚的な魅力と分かりやすさを生み出すための基本ルールがあります。これが「4大原則」です。

近接(Proximity)
整列(Alignment)
反復(Repetition)
コントラスト(Contrast)

これから紹介する４つの原則はどれか一つだけでも欠けると見栄えの悪いデザインが仕上がります。これらの知識を入れるだけで、何が「良い」デザインで何が「悪い」デザインなのかというのが少し見えてくるのではないでしょうか？

ここでは、以下のようなウェブサイトのセクションを参考に紹介していこうと思います。

近接

関連する要素同士を近くに配置し、グループ化すること。

デザインされた要素同士の距離が近ければ近いほど、要素間の関連性が強く、離れていると要素間に関連性が無いとユーザーに伝わります。また、グループ化することで可読性が上がりますので、要素をどの順番で見てほしいか、どこで見終わるか、見終わった後にどこに視線が行くかを考える必要があります。

逆に、関連のない要素が近すぎると、誤って関係があると認識されてしまう可能性がありますので、適切な間隔を設けましょう。

このサンプルは見やすいでしょうか？一見コンテンツが並んでいてきれいに見えますが、余白が気になりますね。特に各カードの間隔が広いため、均等な余白サイズでもまとまりがないように感じてしまいます。

これを改善するためにはカード間の間隔や、小タイトルに対する説明文の行間を狭めたり、タイトルとカードの余白に差をつけ、タイトルからカードまでをグループとして捉えることでより一体感が生まれます。

そうすることで視覚的に見やすくなるだけでなく、伝えたい情報がグループ化されているので意味も理解されやすくなります。

整列

コンテンツに規則性を持たせて一体感を作ること。このサンプルを見てください。このセクションはいずれも小タイトルに対して説明文が書かれていますが、左揃え、中央揃え、右揃えが混在しています(多少大袈裟かもしれませんが)。同じような構成ではありますが、統一感が感じられません。
そして、揃えが混在している以外にも他に何か違和感は感じましたか？

ガイドラインを引いてみると、よりその違和感が明瞭になるはずです。

タイトル、イメージ、小タイトル、そして説明文にガイドラインを引いてみました。よくみると小タイトルの水平のベースラインが少しずれているのに気づきませんか？垂直のベースラインもそれぞれわずかにずれいていますね。列や行が複数ある場合、水平・垂直のベースラインが揃っている必要があります。

また、この例のようにテキストや画像などを配置する際、根拠なく配置してはいけません。意味があって整列させるのは構いませんが、左揃え、中央揃え、右揃えをむやみに混在させると視点をどこに誘導させたいのか、どこから見ればいいのかが分からなくなってしまいます。逆に整列させることで視点を自由に誘導させることも可能になっていきます。どう整列させればいいか分からない場合は、基本的に左揃えにさせればいいかと思いますが、左揃えにしなくていいパターンもあります。
こちらのテーブルをご覧ください。

テーブルに数値が並んでいる時、左揃えにしてしまうと数字が非常に見ずらくなってしまいます。またこれが金額だった場合、桁を読み間違えたりしてしまいます。特に数値は右から左に桁が増えていくので、左揃えにしてしまうのは適切ではありませんね。

この場合は右揃えにしましょう。

反復

同じ属性を持つ要素を繰り返して一貫性を持たせること。

まずはこちらのサンプルをご覧ください。このセクションのタイトルは同じカテゴリーの内容をまとめたものになるのですが、どれもデザインがバラバラで統一感がありません。

この場合は４つのパターンの中から１つにデザインを絞る必要があります。他にも例えばウェブサイト上での掲示板のスレッドや投稿などは、あらかじめ決まった情報表示させます。それらで使用するフォントのサイズ、フォントの種類、スタイル、配色、などを統一させ意図的に反復させることで、ユーザーは一貫性のあるデザインパターンを認識しやすくなります。
それに加えてページ全体での配色なども指定することで、より共通性があるように見え、多少要素を変更させても一貫性のある見え方になります。

その一方で、異なる意味を持つ要素に同じデザインを反復させると、かえってその違いが分かりにくくなってしまいます。このような場合は、コントラストをつけるなどして区別する必要があります。

コントラスト

強弱を要素に付け、要素の差を意識的に付けること。

こちらのサンプルを見てみましょう。メインタイトル、小タイトル、説明文が並んでいますが、どの要素に最初に目がいくでしょうか?

まずカードに目が行き、そしてその中の内容に視線が移ると思います。タイトルはその後ではないでしょうか？
それぞれの要素の大きさや、フォントのウェイトがほとんど変わらず同じ抑揚で書かれているので、どの要素に注目すべきかがすぐには分かりにくいかと思います。

ですので、重要な要素には目立つように大きなサイズ、濃い色、太字のフォントを使用するなどしてコントラストを強調しましょう。一方で、補助的な情報は控えめにすることが視線の誘導に効果的です。ただし、コントラストを過度に強調しすぎると、逆に不自然に目立ってしまい、違和感を与える可能性もあります。適度なコントラストを心がけることが重要です。

コントラストはサイズや色の調節だけではなく、情報の優先度に応じて文字の大きさや、色の濃度を変えることで、視覚的に重要な情報を際立たせることができます。これにより意図的に情報の伝達を効果的に行うことが可能となります。

まとめ

今は全く知らなくてもこの４つの原則を理解し、意識して活用することで、バランスの取れた見栄えの良いデザインを作ることができます。普段からこれらの原則がどう活用されているのかを観察していくことで、デザインが何を一番伝えようとしているのか、どうしてその配置にしたのか作り手の意図を読み取る力も養われていくことでしょう。
エンジニアであってもデザインの基礎的な知識を身に付けることは重要です。それによってデザイナーとのコミュニケーションがスムーズになり、要件を正しく理解して適切に実装できるようになります。
もちろん、この知識はデザイン以外の分野、例えば画像やテキストを用いた資料作成や普段の業務でもきっと役に立つはずです！

このブログがあなたの意識を変えるきっかけに慣れれば幸いです。

ここまでお読みくださりありがとうございました！

こんにちは、デジナーレ福岡オフィスの徳安です。

今回はReduxについての記事です。

Reduxとは？？

Reduxとは、状態管理のためのライブラリで、Fluxアーキテクチャに則って設計されている。

単一方向しかデータが流れないのが特徴。

Reduxの主な要素

・Store

ReduxでのStateはstoreと呼ばれるオブジェクト内に保持されている。

・Action、Dispatch

ActionをDispatchする。

Reduxで状態変更を行う唯一の方法。

・Reducer

Dispatch（送信）されたActionを受け取るのがReducer。

Reducerは「現在のState（currentState）」と「受け取ったAction」を受け取り、

新しいstateの結果を返却する純粋関数。

Redux Toolkit(RTK)

Reduxの利用を簡単かつ効果的に設計されているのが

Redux Toolkitであり、公式からもRedux Toolkitの利用が推奨されている。

createSlice

reducerと状態に対応するアクションクリエーターとアクションタイプを自動的に生成する関数。

Reduxアプリケーションでは、アクションやリデューサーの定義が冗長になるが、

createSliceはこの冗長性を削減し、コードの記述を簡素化することができる。

createSliceは初期状態（initialState）、

reducer関数のオブジェクト、スライスの名前（sliceName）を受け取る。

<span style="font-family: 'arial black', sans-serif">// counterSlice.ts

import { createSlice } from "@reduxjs/toolkit";

type CounterState = {
  value: number;
};
const initialState = (): CounterState => ({ value: 0 });

const counterSlice = createSlice({
  // sliceName
  name: "counter",

  // initialState
  initialState: initialState,


  // stateを書き換える処理内容を記載
  reducers: {
    increment(state: CounterState) {
      state.value++;
    },
    decrement(state: CounterState) {
      state.value--;
    },
  },
});</span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<span style="font-family: 'arial black', sans-serif">// counterSlice.ts

import { createSlice } from "@reduxjs/toolkit";

type CounterState = {

value: number;

};

const initialState = (): CounterState => ({ value: 0 });

const counterSlice = createSlice({

// sliceName

// initialState

initialState: initialState,

// stateを書き換える処理内容を記載

reducers: {

increment(state: CounterState) {

state.value++;

},

decrement(state: CounterState) {

state.value--;

},

});</span>

＊createSliceの戻り値

<span style="font-family: 'arial black', sans-serif">{
  name: string,
  reducer: ReducerFunction,
  actions: Record<string, ActionCreator>,
  caseReducers: Record<string, CaseReducer>.
  getInitialState: () => State,
  reducerPath: string,
  selectSlice: Selector;
  selectors: Record<string, Selector>,
  getSelectors: (selectState: (rootState: RootState) => State) => Record<string, Selector>
  injectInto: (injectable: Injectable, config?: InjectConfig & { reducerPath?: string }) => InjectedSlice
}</span>

1

2

3

4

5

6

7

8

9

10

11

12

<span style="font-family: 'arial black', sans-serif">{

reducer: ReducerFunction,

actions: Record<string, ActionCreator>,

caseReducers: Record<string, CaseReducer>.

getInitialState: () => State,

reducerPath: string,

selectSlice: Selector;

selectors: Record<string, Selector>,

getSelectors: (selectState: (rootState: RootState) => State) => Record<string, Selector>

injectInto: (injectable: Injectable, config?: InjectConfig & { reducerPath?: string }) => InjectedSlice

}</span>

このようなオブジェクト形式で返却されるので、

createSliceを定義した時点で分割代入しておくと後々使いやすい。

<span style="font-family: 'arial black', sans-serif">// counterSlice.ts

import { createSlice } from "@reduxjs/toolkit";

type CounterState = {
  value: number;
};
const initialState = (): CounterState => ({ value: 0 });

// NOTE: 分割代入に変更
// - const counterSlice = createSlice({
const {reducer:counterReducer, action: counterActions} = createSlice({
  // sliceName
  name: "counter",

  // initialState
  initialState: initialState,

  // stateを書き換える処理内容を記載
  reducers: {
    increment(state: CounterState) {
      state.value++;
    },
    decrement(state: CounterState) {
      state.value--;
    },
  },
});</span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<span style="font-family: 'arial black', sans-serif">// counterSlice.ts

import { createSlice } from "@reduxjs/toolkit";

type CounterState = {

value: number;

};

const initialState = (): CounterState => ({ value: 0 });

// NOTE: 分割代入に変更

// - const counterSlice = createSlice({

const {reducer:counterReducer, action: counterActions} = createSlice({

// sliceName

// initialState

initialState: initialState,

// stateを書き換える処理内容を記載

reducers: {

increment(state: CounterState) {

state.value++;

},

decrement(state: CounterState) {

state.value--;

},

});</span>

configureStore

configureStoreでstoreの作成を行う。

<span style="font-family: 'arial black', sans-serif">// store.ts

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
     counter: counterReducer,
  }
})</span>

1

2

3

4

5

6

7

8

9

10

<span style="font-family: 'arial black', sans-serif">// store.ts

import { configureStore } from "@reduxjs/toolkit";

import counterReducer from "./counterSlice";

export const store = configureStore({

reducer: {

counter: counterReducer,

}

})</span>

combineReducersを使用して、複数のsliceReducerを管理することも可能

<span style="font-family: 'arial black', sans-serif">// store.ts

import { combineReducers, configureStore } from "@reduxjs/toolkit"

// NOTE: 複数のsliceReducerを管理可能
const rootReducer = combineReducers({
  counter: counterReducer,
  toast: toastReducer,
})

export const store = configureStore({
  reducer: rootReducer
})</span>

1

2

3

4

5

6

7

8

9

10

11

12

13

<span style="font-family: 'arial black', sans-serif">// store.ts

import { combineReducers, configureStore } from "@reduxjs/toolkit"

// NOTE: 複数のsliceReducerを管理可能

const rootReducer = combineReducers({

counter: counterReducer,

toast: toastReducer,

})

export const store = configureStore({

reducer: rootReducer

})</span>

また、typeScriptを使用している場合は、ここでstoreの型定義までしておく。

使用する際に、自動補完が行われタイプミスなどを減らすことができる。

<span style="font-family: 'arial black', sans-serif">// store.ts

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch</span>

1

2

3

4

<span style="font-family: 'arial black', sans-serif">// store.ts

export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch</span>

storeを参照できるようにする

AppをProviderで囲むことで、アプリケーション全体からStoreを利用することができるようになる。

<span style="font-family: 'arial black', sans-serif">// main.tsx

import { Provider } from "react-redux";
import { store } from "./store";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)</span>

1

2

3

4

5

6

7

8

9

10

11

12

<span style="font-family: 'arial black', sans-serif">// main.tsx

import { Provider } from "react-redux";

import { store } from "./store";

ReactDOM.createRoot(document.getElementById("root")!).render(

<React.StrictMode>

<App />

</Provider>

</React.StrictMode>

)</span>

storeの値を参照する

1. useSelectorをインポートし、グローバル管理しているcounter stateを取得する

2. 使用したい場所で表示する

<span style="font-family: 'arial black', sans-serif">// Page.tsx

import { useSelector } from "react-redux"

import { RootState } from "./store"

const Page = () => {
  // 1
  const counter = useSelector((state: RootState) => state.counter)

  return (
    <>
      // 2
      <p>{counter.value}</p>
    </>
  )
}
</span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<span style="font-family: 'arial black', sans-serif">// Page.tsx

import { useSelector } from "react-redux"

import { RootState } from "./store"

const Page = () => {

// 1

const counter = useSelector((state: RootState) => state.counter)

return (

<>

// 2

<p>{counter.value}</p>

</>

)

}

</span>

storeの値を更新する

1. useDispatchをインポートし、store に紐付いた dispatch を取得する

2. 使用したい部分で（下記だとボタンを押下したアクション部分）

createSliceで定義したActionをDispatchし、状態を更新する

<span style="font-family: 'arial black', sans-serif">// CounterButton.tsx

import { useDispatch } from "react-redux"
import { AppDispatch } from "./store"

const CounterButton = () => {
  // 1
  const dispatch = useDispatch<AppDispatch>()

  const handleClickIncrement = () => {
    // 2
    dispatch(
      counter.increment()
    )
  }

  const handleClickDecrement = () => {
    // 2
    dispatch(
      counter.decrement()
    )
  }

  return (
    <>
      <button onClick={handleClickIncrement}>+</button>
      <button onClick={handleClickDecrement}>-</button>
    </>
  )
}</span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<span style="font-family: 'arial black', sans-serif">// CounterButton.tsx

import { useDispatch } from "react-redux"

import { AppDispatch } from "./store"

const CounterButton = () => {

// 1

const dispatch = useDispatch<AppDispatch>()

const handleClickIncrement = () => {

// 2

dispatch(

counter.increment()

)

}

const handleClickDecrement = () => {

// 2

dispatch(

counter.decrement()

)

}

return (

<>

</>

)

}</span>

まとめ

Redux ToolkitではActionとReducerが同じオブジェクト内で定義されるため、

記述が追いやすく、可読性が上がります。

また、Redux Toolkitを使った場合、

stateのイミュータブル性を気にすることなくコーディングができる為、

コードをより簡潔にすることができます。

今回は良く使用される関数やReact-Reduxフックを紹介しました。

記述が追いやすく、可読性が上がるので、

グローバル管理する際には、積極的にRedux Toolkitを使用していきたいと思いました。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの大坪です。

皆さんは、ウェブサイトをデザインしているときに、適用したはずのスタイルが機能していないことに気づいた経験はありませんか？多くの場合、この問題は同一要素に対して異なるルールが競合しているために起こります。このような競合を解決し、どちらのルールが優先されるかを決定するためには、スタイルの継承規則とルールの優先順位の概念を理解することが必要です。今回の記事では、予期せずに起こるスタイルの適用問題や、CSSプロパティが親要素からどのように継承されるか、また継承されないのかといった疑問についても触れていきたいと思います。

CSSの「継承」とは？

継承とは、特定のCSSプロパティが親要素から子要素へ自動的に「継承」される仕組みです。これをうまく使えば、全体のフォントや色などを一括で設定できたり、同じプロパティを何度もの要素ごとに書くなどのコードの重複することが減り、スタイルシートをより簡潔に保つことが可能になります。

継承されるプロパティの例

HTML：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

<p>divタグ内のテキスト</p>

</div>

<p>sectionタグ内のテキスト</p>

</section>

<p>フッタータグ内のテキスト</p>

</footer>

</body>

</html>

CSS：

1

2

3

4

5

6

7

8

9

10

body {

width: 500px;

color: red;

font-family: Roboto;

font-size: 16px;

}

OUTPUT：

bodyタグ内のｐ要素すべてにスタイルが適用されていますね！

この例では、body 要素にCSSスタイルが指定されています。このスタイルにより、color 、font-family 、font-size プロパティが指定されており、これらのプロパティは子要素に継承されます。具体的には、div、section、footer 内の各 p 要素に対して、指定されたフォントスタイルが適用されることになります。

継承されないプロパティの例

ではCSSのみ以下のように書き換えたらどのようなスタイルが適用されるでしょうか？

CSS：

1

2

3

4

5

6

7

8

9

body {

width: 500px;

border: 1px solid #000;

margin: 20px;

}

OUTPUT：

この結果では、body要素に対してwidth、border、 div 、section 、footer には適用されません。

このようにCSSを用いて具体的なHTML要素にスタイルを指定する場合、継承されるプロパティとそうでないプロパティを明確に理解することが重要です。それにより、デザインの意図に合わせて適切なプロパティを選択し、予期せぬレイアウトの変更を避けることができます。

こちらで挙げた例以外にも継承されるプロパティ、継承されないプロパティはまだまだありますので、調べてみましょう。

セレクタと優先度

CSSでは、複数のセレクタが同一の要素に適用される場合、セレクタの優先度に基づいてどのスタイルを適用するかが決定されます。これを理解できれば、予期せずに起こるスタイルが適用されない課題を解決する鍵になります！

セレクタの詳細度の具体例

パターン１

HTML：

1

2

3

4

5

6

7

8

<p>テキストです。</p>

</div>

CSS：

1

2

3

4

5

6

7

8

9

p {

color: red;

color: blue;

color: green;

}

基本的にはCSSは後から記述されたものを優先します。ですのでこの場合は、

OUTPUT:

テキストの色が緑になります。ではこれはどうでしょうか？

パターン２

HTML：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

p {

color: red;

}

</style>

</head>

<body>

<p style="color: blue;">テキストです。</p>

</div>

</body>

</html>

CSS：

1

2

3

4

5

6

7

p {

color: green;

}

HTMLファイルではstyle要素の中にp要素のスタイルが記述され、ここではテキストの色が赤になるように指定されています。このような書き方を内部スタイルシートと言います。
内部スタイルシートの下の方にはp要素の中に直接スタイル属性が追加され、ここではテキストの色が青になるように指定されています。この書き方をインラインスタイルと言います。
CSSファイルはどうでしょう？こちらにもテキストの色が緑になるように指定されていますね。このように別途CSSファイルを作成し、そこにスタイルを記述していく書き方を外部スタイルシートと言います。

このように記述場所が異なるだけでも優先順位が変わってきます。

記述場所の優先順位

外部スタイルシート < 内部スタイルシート < インラインスタイル

結果はこのようになります。

OUTPUT:

パターン３

HTML：

1

2

3

4

5

6

7

8

<p>テキストです。</p>

</div>

CSS：

1

2

3

4

5

6

7

8

9

10

11

12

13

#main p {

color: red; /* idセレクタ + タグセレクタ */

}

.content p {

color: blue; /* classセレクタ + タグセレクタ */

}

p {

color: green; /* タグセレクタのみ */

}

この場合はどうなるでしょうかidセレクタとclassセレクタでのテキストの色の指定と、タグセレクタでのテキストの色の指定があります。パターン１で紹介したCSSは後から記述されたものを優先する。というルールがあるので、これも最後に記述しているタグセレクタのみのスタイルの優先度が高くなると思いますよね？

では、OUTPUTを見てみましょう。

OUTPUT:

テキストの色が赤になっていますね。しかし、ちょっと待ってください。color: red; は最初に記述したのに適用されているのはなぜでしょう？

実はセレクタの種類の中でも優先順位があります。ですので、たとえ最初に記述したとしてもidセレクタの優先度が高くなっていたのです。

セレクタの優先順位

タグ < class < id

ちなみにこれらの詳細度は計算して算出できますが、その計算方法のアルゴリズムは少々複雑ですので、今回は割愛させていただきます。
気になる方はこちらを見てみるとよいでしょう。

参考：詳細度の計算方法

このようにCSSの詳細度と優先順位を把握することで、複数のスタイルルールが競合した場合でも、どのスタイルが適用されるかを予測することが可能になります。これは、特に複雑なウェブサイトのデザインや、複数のスタイルシートが組み合わさっている場合において、効果的なスタイル管理を行う上で知っておかなければなりません。

魔法の呪文「!important」

詳細度が高ければ優先順位が高いというのをお伝えしましたが、その全ての優先順位を無視する存在がいます。!importantです。トランプの大富豪でいうジョーカーの立ち位置ですね。優先させたいプロパティがあるのであれば、!importantを使用するとよいでしょう。

1

2

3

4

5

p {

color: red !important;

}

!importantは便利そうだし、全部これでスタイルを適用させればいいじゃないか！と思うかもしれません。しかし、この使用はなるべく避けるべきです。多用しすぎると今度は!important同士で競合が発生してしまい、思うようなスタイルにできなかったり、複数人での開発現場ではコードが見にくくなったりすることもあります。誰が見ても分かりやすいコードを書く為には、セレクタの優先順位を理解して開発していきましょう。

まとめ

CSSの継承とセレクタの優先度に関する知識は、ウェブサイトの開発において非常に重要です。全てを完璧に覚える必要はありませんが、これらの基本的な概念を適切に理解し活用することで、スタイルが予期せずに機能しない場合の原因を特定し、効果的に問題を解決できるようになります。ステップバイステップで学び、実践することが大切です。この知識を活用して、より効率的で効果的なウェブデザインを実現しましょう！

こんにちは、デジナーレ福岡オフィスの徳安です。

今回は以下の記事を参考に

『UI Stack』について私なりにまとめてみました。

How to fix a bad user interface

Bad な UI を改善する「UI Stack」って知ってます？

『UI Stack』の必要性

「考慮もれ」「手戻り」を極力減らし、

エンジニアとデザイナーが、

認識を合わせるために大事な考え方です。

上記のように、データがない場合のデザインを考慮していないと、
確認する手間や認識のずれが発生してします。

設計の段階でデザインを考慮できていれば、
確認する手間や認識のずれ、なども起きにくくなり、
よりスムーズに開発を進めることができます。

『UI Stack』とは

UI StackのStackとは、

１つの画面が持つ複数の状態、（側面、状態、ステータス）のこと。

その複数の状態ごとに最適化されたUIを設計するのが、 UI Stack の考え。

※Stackとは、「データを積み重ねたもの」という意味を持っている。

UIを考案する上で考慮すべき5つの状態

・Enpty State　（空の状態）
・Error State　（エラー状態）
・Loading State　（ローディング状態）
・Partial State　（部分達成状態）
・Ideal State　（理想状態）

この『5つの状態』に分けて考えることで、

考慮漏れなども起きにくくなり、

統一的なUIを作成・実装することができる。

Ideal State（理想状態）

UI／UXを考えるときに、最初に考えるのが理想の状態

すべてのコンテンツが揃っている状態。

全てのUIの状態は、理想的な状態につながる。

Empty State（空の状態）

空の状態には大きく分けて 3 つにわけることができる。

1．ユーザーが初めてサービスを使用する時

この状態の時に表示するものは、

データが存在するときに表示される内容など。

ユーザーにアクションを促し、サービスの価値を理解してもらう。

2 ．ユーザが意図的にコンテンツを消した時

To Do リストのすべての項目を完了した場合や、

すべての電子メールをアーカイブした場合、

すべての音楽のダウンロードを完了した場合などが該当する。

このタイプの空の状態は、

ユーザーに報酬を与えたり、さらなるアクションを促す機会となる。

音楽をダウンロードが完了した空の状態であれば、

ダウンロードした音楽を聞くための導線を作ることで

ユーザーに次なるアクションをさせる足がかりとなる。

3 ．検索結果０件など、該当のデータが存在しない時

ECサイトの場合は、ユーザーが検索した単語に似た情報を出してあげると良い。

Loading State（ローディング状態）

・データを読み込んでいる時

・インターネットに接続している時

・ページの遷移をしている時 ...等

この状態の時は、

待っていれば、該当の内容が表示されることが伝わるものや、

対応中であることを伝えるものを表示すると良い。

ロード中何も表示されないと、
直前に行ったアクションが本当に実行されてるのか？と
ユーザーは不安になってしまう恐れがある。

Partial State（部分達成状態）

Blank State（空の状態）と Ideal State（理想状態）の間みたいな状態。

・プロフィール登録などで途中まで登録した時 ...等

サービス利用を継続させるために、

ユーザーに次のアクションを促すものや

ユーザーがサービスを利用する上での理想の状態を目指したくなるようなものが望ましい。

Error State（エラー状態）

・何かが間違っている状態

・エラーが発生している状態

サーバーに接続できない状況でのエラーだけではなく

バリデーションエラーが発生した場合も該当する。

曖昧な表現や技術的な専門用語は避け、

何をすれば良いかを簡潔に分かりやすく表示すると良い。

まとめ

実装する際に「あれ？この状態の時ってどうやって表示すればいいんだろう...？」

ということが何度かあったので、

これからはUI Stackを意識して設計をしていこうと思います。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの大坪です。

今回はなぜマルチデバイス対応のウェブサイトが必要なのか、その重要性と具体的な設計・実装方法について深掘りします。

モバイルファーストインデックスとは何か

Googleが2018年から導入した「モバイルファーストインデックス」というものがあります。これは検索結果の順位を決める際に、従来のPC版ウェブサイトではなく、モバイル版のウェブサイトを重視するというものです。

私たちは普段、何かを調べたいと思ったらまずキーワードで検索し、その検索結果の中で上位に表示されるサイトから情報を得ることが多いと思います。このランキングはSEO（検索エンジン最適化: Search Engine Optimization ）の対策次第で変わりますが、モバイルファーストインデックスの導入以降、モバイル版のパフォーマンスが重要になっています。

スマートフォンやタブレットなどのモバイルデバイスでの検索が増えている昨今、Googleはこのような変化に対応して、モバイルでのユーザーエクスペリエンスの質が直接、ウェブサイトの検索順位に影響するようにシステムを変更しました。つまり、モバイルでサイトが使いやすいかどうかが、そのサイトのSEO評価に大きく影響するわけです。

この変更は、ウェブサイト運営者にとっても大きな意味を持ちます。モバイルユーザーにとって使いやすいサイト設計を心がけることが、これまで以上に重要になってくるのです。

モバイルデバイスの普及はどのぐらいなのか？

今ではスマートフォンのない生活は考えられず、ほとんどの人がスマートフォンを持っている時代です。では実際の普及率はどのくらいなのでしょうか？

総務省が毎年行っているメディアの利用時間と情報行動に関する調査によると、日本国内でのスマートフォンの普及率は全世代の97%に達しており、ほとんどの人がスマートフォンやタブレットを利用して日常的に情報を収集していることが分かります。この結果を見ても、私たちはウェブサイトはモバイルファーストのアプローチで設計されるべきです。

モバイルデバイスの特性とデザインのポイント

ではどのようなことに気を付けて私たちはモバイルファーストな設計を行っていけばよいのでしょうか？いくつかポイントを挙げてみました。

パフォーマンスの最適化

モバイルデバイスは処理能力が限られるため、軽量で高速に動作するウェブページの設計が求められます。検索してウェブサイトに遷移したときに、ページの読み込みが３秒を超えると半数近くのユーザーがモバイルサイトから離脱してしまいます。そのためには画像の最適化、ページの読み込み時間を短くすることが不可欠になります。このページの読み込み速度などの測定はGoogle Chrome Devtools にある Performance タブで見ることが出来ますし、googleが提供しているPage Speed Insightsを利用すると、SEOやパフォーマンスなど、ウェブサイトのパフォーマンスを診断することが出来ます。

: Page Speed Insightsを使って色んなウェブサイトのパフォーマンスを調べてみましょう！

タッチデバイスへの最適化

モバイルデバイスは小さい上に直接指で操作するため、タップしやすいサイズと間隔でボタンやリンクを設計することが重要になってきます。また、必要な情報を拡大などせずいち早く見つかるようなインターフェイスの設計にしなければなりません。

また、スワイプ、ピンチといったジェスチャーは、モバイルデバイスならではの操作です。これらの操作が可能なデザインを考慮に入れ、ユーザーが自然にサイトを操作できるよう配慮しましょう！

技術的実装のポイント

CSSメディアクエリを追加する

異なるデバイスサイズに対応するために、CSSメディアクエリを使用してスタイルを調整します。
メディアクエリとは、画面幅が特定の基準を満たすと、そのデバイスに適したデザインにコンテンツの配置を変更する技術です。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.h1 {

width: 300px;

margin: 40px auto;

padding: 30px;

background-color: yellow;

font-family: Roboto;

font-size: 32px;

color: #000;

text-align: left;

line-height: 1;

}

/* 480px以下の場合のレイアウト調整 */

@media screen and (max-width: 480px) {

.h1 {

width: 200px;

font-size: 30px;

text-align: center;

}

このコードだとプリンター以外のPC、スマホやiPad等のデバイス（@media screen）で画面幅が480px以下(max-width: 480px)の時に見出しの幅が200px、テキストのサイズが30px、文字の位置が中央揃えになります。
それ以外の見出しのスタイルは変更がありません。
画面幅をどのviewpointで変えたいのかは、プロジェクトによって異なるかと思いますが、実際に実装しながら必要に応じてレイアウトの調整ポイントを追加することもあります。

ビューポート設定

HTMLファイルに以下のようにメタタグを追加すると、ウェブサイトがどのデバイスにも適切に表示されます。これにより、ユーザーはズームインやズームアウトをすることなく、コンテンツを快適に閲覧できます。

1

2

3

上記のコードはviewport幅が画面幅と同じ(width=device-width)で、縮小表示を行わない(initial-scale=1)設定になります。

イメージの最適化

レスポンシブイメージはsrcsetやpicture要素を利用して、デバイスの画面解像度やサイズに応じた画像を提供します。

1

2

3

4

5

6

7

8

<img src="example-small.jpg"

srcset="example-small.jpg 400w, example-medium.jpg 800w, example-large.jpg 1200w"

sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"

alt="Responsive image">

また、 SVGやアイコンフォントの使用により、任意の解像度でクリアなビジュアルを保ちつつ、ページの読み込み時間を短縮します。

まとめ

モバイルデバイスの普及はウェブデザインにおいて無視できない要素です。マルチデバイス対応のウェブサイトを設計することで、より多くのユーザーにとってアクセスしやすい、快適な閲覧体験を提供することが可能となります。今回のブログが、マルチデバイス対応の設計と実装の参考になれば幸いです。

DOMとは何か？

DOMとは何か？

HTMLやXML文書をツリー状の構造で表現される

DOM のインターフェイス

Document インターフェイス

Element インターフェイス

Nodeインターフェイス

EventTargetインターフェイス

Windowインターフェイス

まとめ

1. props または state に基づいて state を更新する

■Bad

■Good レンダリング中に計算する

2. 重たい計算のキャッシュ

■Bad 冗長なuseState と 不必要なuseEffect

■Good 関数内の処理が、重たい計算でなければこれでOK

3. props が変更されたときにすべての state をリセットする

■Bad propsの値が変更になった際に、commentの値が空になるようにする

■Good コンポーネントを ２つに分割し、親コンポーネントから子コンポーネントに key 属性を渡す

4. アプリケーションの初期化

■Bad 一度しか実行したくないロジックをトップレベルのコンポーネントのuseEffect内に書く

■Good トップレベルに変数を使用することで再実行をスキップする

■Good モジュールの初期化時やアプリのレンダリング前に実行する

5. 外部ストアへのサブスクライブ

■Bad useEffect内で手動でサブスクライブする

■Good

6. データのfetch

■Bad クリーンアップなしでfetch

■Good

まとめ

lodashとは

使い方

インストール

Array(配列)

_.chunk(array, [size=1])

_.compact(array)

_.difference(array, [values])

_.drop(array, [n=1])

_.dropRight(array, [n=1])

_.flatten(array)

_.flattenDeep(array)

_.fromPairs(pairs)

_.union([arrays])

_.uniq(array)

そのほかのメソッド

_.isEqual(value, other)

_.uniqueId([prefix=''])

_.castArray(value)

_.clone(value)

_.cloneDeep(value)

interface(インターフェース)

type(型エイリアス)

interfaceとtypeの違い

継承について

継承による上書き

同名のものを宣言

Mapped Types

スコープとは?

グローバルスコープ

関数スコープ

ブロックスコープ

レキシカルスコープ

スコープチェーン

クロージャー

まとめ

「障害者差別解消法」とは

「Webアクセシビリティ」とは

Webアクセシビリティを考えたサイトデザイン

Webアクセシビリティの達成基準

現状のサイトの分析をしてみよう

１、PageSpeed Insights

２、WCAG Color contrast checker

デザイン面で対応できるWebアクセシビリティ対策

１、テキストのコントラスト比

２、適切なAlt属性の使用

３、適切な構造とラベリング

まとめ

Generics

Generics の使い方

Genericsを使用しない場合

■Bad 冗長なuseState と不必要なuseEffect

■Good コンポーネントを２つに分割し、親コンポーネントから子コンポーネントに key 属性を渡す