## はじめに
UXデザインを改善しようとする際、どこから手をつければ良いか迷うことがあります。UXデザインを向上させるためには、アフォーダンス(Affordances)、シグニファイア(Signifiers)、フィードバック(Feedback)の3つの要素に分けて改善方法を検討すると、わかりやすくなります。これら3つの要素に分けて考えることで、UX改善に効果的にアプローチできることを学びましたので、それぞれの段階についてまとめてみました。

### アフォーダンス(Affordances)とは
デザイン用語としてのアフォーダンスとは、人と物との関係のことです。Webデザインの例では、クリックやスクロール、スワイプなどの操作が挙げられます。
元々の心理学の用語では、動物と物の間に存在する行為の関係性を表す言葉で、行為の選択肢の一つという意味合いが強いですが、デザインの領域では、**要素に対する行為**（**操作**）という意味で使われることが多いようです。
アフォーダンスを適切にデザインすることで、ユーザーの利用可能性を広げるだけでなく、間違った操作を予防する効果も期待できます。

### シグニファイア(Signifires)とは
シグニファイアとは、人と物との関係をユーザーに伝達するもので、わかりやすく言い換えると、**行為(操作)へ誘導するためのヒント**のことです。Webデザインの例では、クリックすることで意図した画面へ移動できるようにナビゲーションを工夫することや、スワイプが可能であることをわかりやすくすることが挙げられます。
シグニファイアを適切にデザインすることで、ユーザーが目的を達成するまでストレスなく到達できます。

### フィードバック(Feedback)とは
フィードバックとは、操作やアクションの後に即時の手応えや反応のことです。Webデザインの例では、クリックしたときのボタンの色の変化や、コンテンツの読み込み中や処理中のプログレスバーの表示などが挙げられます。
フィードバックを適切にデザインすることで、ユーザーに正しい操作をしていることを確信させ、安心して操作することをサポートできます。

## アフォーダンスを改善する方法
アフォーダンスには明示的なものと暗黙的なものがあり、特にWebデザイン領域では暗黙的なアフォーダンスが多く使われる傾向があります。例えば、画像をクリックすると拡大して表示されたり、左にスライドさせると削除される、一覧の一番上でさらに下にスクロール操作をすると最新情報に更新されるといった操作は、明確にUIとして示されず、ユーザーの経験によって成り立っています。

暗黙的なアフォーダンスはユーザーの直感に頼るため、学習コストが低い一方で、新しいユーザーには理解しづらい場合があります。逆に、明示的なアフォーダンスは誰にでも理解しやすいですが、デザインが煩雑になる可能性があります。したがって、広く一般化されたアフォーダンスではない限り、積極的に隠さない明示的なアフォーダンスを選択することが最善と言えます。

アフォーダンスを改善するためには、以下の点に注意することが重要です。
- **意図せず隠すアフォーダンスを避ける**: ユーザーが直感的に理解できるように、明示的なアフォーダンスを優先する。
- **デザインシステムの活用**: 既存のデザインシステムを利用するだけでなく、オリジナルのデザインシステムを構築する場合も、一般的なUIコンポーネントやパターンを参考にする。これにより、一貫性のあるデザインを実現しやすくなります。
- **多様な視点からの参考**: [マテリアルデザイン](https://m3.material.io/)や[Appleのデザインシステム](https://developer.apple.com/jp/design/)に加え、[Bootstrap](https://getbootstrap.jp/)や[Ant Design](https://ant.design/)などの他のデザインフレームワークも参考にする。これらのフレームワークから得られるベストプラクティスを取り入れることで、オリジナルのデザインシステムを強化できます。
- **ユーザーテストの実施**: オリジナルのデザインシステムを構築する際には、ユーザーテストを実施してフィードバックを収集し、アフォーダンスの改善に役立てる。

これらの方法を取り入れることで、アフォーダンスの質を向上させ、ユーザーが直感的に操作を理解できます。

## シグニファイアを改善する方法
シグニファイアは、ユーザーに対して行為(操作)を誘導するためのヒントを提供します。例えば、ハンバーガーメニューのアイコンがナビゲーションを開くためのボタンを意味していたり、虫眼鏡のアイコンがキーワード検索を開始するためのボタンを意味しているなど、アイコン自体がシグニファイアの役割を果たしている場面をよく見かけます。

シグニファイアを改善するためには、以下の点に注意することが重要です：
- **複数の手段を組み合わせる**: 一つの記号に頼らず、テキスト、コントラスト、色、シンボル、テクスチャなどを適切に組み合わせることで、ユーザーに対するヒントを強化します。
- **文化的背景を考慮する**: アイコンやシンボルが異なる文化や世代に対してどのように解釈されるかを考慮し、普遍的に理解されるデザインを目指します。例えば、フロッピーディスクを知らない世代には保存の意味が伝わりにくい、郵便マークも各国でシンボルが異なることがあるなどを考慮する必要があります。
- **補足情報を提供する**: アイコンだけでなく、テキストやツールチップを併用して意味を明確にすることで、ユーザーが直感的に操作を理解できるようにします。
- **一貫性を保つ**: 同じ意味を持つシグニファイアを一貫して使用することで、ユーザーの混乱を防ぎます。

これらの方法を取り入れることで、シグニファイアの効果を最大化し、ユーザーが直感的に操作を理解できます。

## フィードバックを改善する方法
Webにおいてフィードバックは、色の変化、画面の遷移、プログレスバー、メッセージの表示などで表現されます。適切なフィードバックは、ユーザーが操作の結果を理解しやすくし、次のアクションを促す役割を果たします。

例えば、ボタンをクリックした後に何も変化がないと、ユーザーはクリックできなかったと判断して操作を中断してしまいます。また、入力フィールドで間違った入力をしても何も変化がなければ、ユーザーは次のアクションを起こしづらくなります。

フィードバックを改善するためには、以下の点に注意することが重要です。
- **即時性**: ユーザーのアクションに対して即時にフィードバックを提供する。例えば、ボタンをクリックした際に色が変わる、プログレスバーが表示されるなど。
- **視覚的な変化**: 色の変化やアニメーションを利用して、ユーザーに操作が成功したことを視覚的に伝える。CSSの`:active`や`:focus`擬似クラスを利用すると簡単に実装できます。
- **明確なメッセージ**: エラーメッセージや成功メッセージを表示して、ユーザーが次に何をすべきかを明確に伝える。
- **ユーザーストーリーに沿った設計**: ユーザーの行動パターンを理解し、それに合わせたフィードバックを設計する。例えば、フォームの入力エラーをリアルタイムで表示するなど。

これらの方法を取り入れることで、フィードバックの質を向上させ、ユーザーが安心して操作できます。

## まとめ
UXデザインを向上させるためには、アフォーダンス、シグニファイア、フィードバックの3つの要素を適切にデザインすることが重要です。

- アフォーダンスは、ユーザーが直感的に操作を理解できるようにするための要素です。明示的なアフォーダンスを優先し、意図せず隠すアフォーダンスを避けることが重要です。既存のデザインシステムを活用するだけでなく、オリジナルのデザインシステムを構築する際には、一般的なUIコンポーネントやパターンを参考にし、ユーザーテストを実施してフィードバックを収集することが効果的です。
- シグニファイアは、ユーザーに対して行為を誘導するためのヒントを提供します。複数の手段を組み合わせ、文化的背景を考慮し、補足情報を提供することで、ユーザーが直感的に操作を理解できるようにします。また、一貫性を保つことで、ユーザーの混乱を防ぎます。
- フィードバックは、ユーザーの操作に対する即時の反応を提供し、次のアクションを促す役割を果たします。即時性、視覚的な変化、明確なメッセージ、ユーザーストーリーに沿った設計を取り入れることで、フィードバックの質を向上させ、ユーザーが安心して操作できます。

これらの要素を総合的に改善することで、ユーザーエクスペリエンスを向上させ、ユーザーが直感的に操作を理解し、ストレスなく目的を達成できます。

UXを改善したいけど、どこから直していけば良いか迷った場合は、ぜひ参考にしてみてください。

## 参考にさせていただいたサイト

- [3 Key Elements for Great UX Design: Affordances, Signifiers, and Feedback](https://careerfoundry.com/en/blog/ux-design/affordances-signifiers-feedback/)


image1.webp

UXに大事なアフォーダンス(Affordances)・シグニファイア(Signifires)・フィードバック(Feedback) とそれぞれの改善について

## はじめに

2023 年 10 月ごろに、[Recoil と Jotai に関する記事](https://sterfield.co.jp/blog/which-recoil-or-jotai/)を投稿しましたが、2023 年 3 月以降、Recoil の更新が進められていない状況で、React 19 以降では正常に動作しない見込みとなってきました[<a href="https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312" target="_blank">参考</a>]。  
そのため、これまで Recoil を使ってきた React のプロジェクトにおいて、別の状態管理ライブラリへの移行が必要となり、対応を進めています。  
その選択肢の一つとして、Redux への移行を行ったので、そのときの方法を Recoil と Redux のコードを比べながら、通常の状態と、API との通信を伴う非同期の状態の移行に分けて、ご紹介します。  
ここでご紹介する方法は、Redux は、Redux Toolkit と React Redux の利用を前提にしています。

## インストール

Recoil から Redux へ移行する場合、Redux Toolkit と React Redux を使うことで、Recoil のときと同じようなコードの書き方で、スムーズに移行できるので、そちらをインストールします。

```bash
npm i @reduxjs/toolkit react-redux
```

## ファイルの準備

以下はファイル構成の例です。

```
redux
├ hooks/ // React用のHooksを格納する
│ ├ normalExample.ts
│ ├ familyExample.ts
│ ┗ asyncExample.ts
├ slices/ // ReduxのSliceを格納する
│ ├ normalExampleSlice.ts
│ ├ familyExampleSlice.ts
│ ┗ asyncExampleSlice.ts
┗ store.ts  // Reduxのstore
```

## 通常の状態

### Recoil

```typescript
import {
  atom,
  useRecoilValue,
  useResetRecoilState,
  useSetRecoilState,
} from "recoil";

// Recoilのatomを設定
export const normalExampleState = atom<string>({
  key: "normalExample",
  default: "",
});

// get state
export const useNormalExampleValue = () => useRecoilValue(normalExampleState);

// set state
export const useSetNormalExampleState = (key) =>
  useSetRecoilState(loadingState);

// reset state
export const useResetNormalExampleState = () =>
  useResetRecoilState(normalExampleState);
```

上記のような状態を Recoil で設定していた場合、Redux Toolkit と React Redux を使って以下のように置き換えることができます。  
ご覧いただくとわかりますが、reducer による action の設定や Root の store.ts への設定のところが Recoil にはない記述ですが、それ以外は似たコードで構成できることがわかります。

### Redux

redux/slices/normalExampleSlice.ts

```typescript
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

const initialState = "";

// ReduxのSliceを設定
export const normalExampleSlice = createSlice({
  name: "normalExample",
  initialState,
  reducers: {
    // set
    setNormalExample: (state, action: PayloadAction<string>) => {
      state.normalExample = action.payload;
    },
    // reset
    resetNormalExample: (state) => {
      state.normalExample = "";
    },
  },
});

export const { setNormalExample, resetNormalExample } =
  normalExampleSlice.actions;

export default normalExampleSlice.reducer;
```

redux/store.ts

```typescript
import { configureStore } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useSelector } from "react-redux";
import normalExample from "./slices/normalExampleSlice";

// 用意したSliceをstoreに登録する
export const store = configureStore({
  reducer: {
    normalExample,
  },
});

export type AppStore = typeof store;

export type RootState = ReturnType<AppStore["getState"]>;

export type AppDispatch = AppStore["dispatch"];

// useSelectorでは型が引き継がれないので、TypeScriptでは型を引き継げるuseAppSelectorを用意する
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

React 用の Hooks は、以下のように React Redux の useDispatch と useSelector（TypeScript の場合は store.ts で定義した useAppSelector）を利用して以下のように構成できます。

redux/hooks/normalExampleSlice.ts

```typescript
import { useDispatch } from "react-redux";
import { useCallback } from "react";
import {
  setNormalExample,
  resetNormalExample,
} from "@/redux/slices/normalExampleSlice";
import { useAppSelector, type RootState } from "../store";

// get state
export const useNormalExampleValue = () =>
  useAppSelector((state: RootState) => state.normalExample);

// set state
export const useSetNormalExampleState = () => {
  const dispatch = useDispatch();
  return (value: string) => {
    dispatch(setNormalExample(value));
  };
};

// reset state
export const useResetNormalExampleState = () => {
  const dispatch = useDispatch();
  return () => {
    dispatch(resetNormalExample(value));
  };
};
```

## AtomFamily からの移行

Recoil では、atomFamily という、同じ型の状態をキーごとに再利用するための便利な機能が用意されていますが、Redux Toolkit の Slice でも、以下のように構成することで、似た機能を実装できます。

### Recoil

```
import { atomFamily } from "recoil";

import {
  atom,
  useRecoilValue,
  useResetRecoilState,
  useSetRecoilState,
} from "recoil";

// RecoilのatomFamilyを設定

export const familyExampleState = atomFamily<string, string>({
  key: "familyExample",
  default: null
});

// get state
export const useNormalExampleValue = (key: string) => useRecoilValue(familyExampleState(key));

// set state
export const useSetNormalExampleState = (key: string) =>
  useSetRecoilState(familyExampleState(key));

// reset state
export const useResetNormalExampleState = (key: string) =>
  useResetRecoilState(familyExampleState(key));
```

### Redux

redux/slices/familyExampleSlice.ts

```typescript
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

export interface FamilyExampleState {
  [key: string]: string | null;
}

const initialState: FamilyExampleState = {
  default: null,
};

const familyExampleSlice = createSlice({
  name: "familyExample",
  initialState,
  reducers: {
    // set
    setFamilyExample(
      state,
      action: PayloadAction<{ key: string; value: string }>
    ) {
      state[action.payload.key] = action.payload.value;
    },
    // reset
    resetFamilyExample(state, action: PayloadAction<string>) {
      state[action.payload] = null;
    },
  },
});

export const { setFamilyExample, resetFamilyExample } =
  familyExampleSlice.actions;

export default familyExampleSlice.reducer;
```

redux/hooks/familyExampleSlice.ts

```typescript
import { useDispatch, shallowEqual } from "react-redux";
import { type RootState, useAppSelector } from "../store";
import {
  setFamilyExample,
  resetFamilyExample,
} from "../slices/familyExampleSlice";

export const useFamilyExampleValue = (key: string) =>
  useAppSelector((state: RootState) => state.familyExample[key], shallowEqual);

export const useSetFamilyExampleState = (key: string) => {
  const dispatch = useDispatch();
  return (value: string) => {
    dispatch(setFamilyExample({ key, value }));
  };
};

export const useResetFamilyExampleState = (key: string) => {
  const dispatch = useDispatch();
  return () => {
    dispatch(resetFamilyExample(key));
  };
};
```

## API 通信を伴う非同期の状態

API からのデータ取得など、非同期を伴う場合、Redux への移行には少しなれがひつようかもしれません。
以下のような Recoil では selector で API からのデータ取得を伴う状態を構成していた場合を移行する場合の例です。

### Recoil

```typescript
import {
  atom,
  selector,
  useSetRecoilState,
  useRecoilValue,
  useRecoilRefresher_UNSTABLE,
} from "recoil";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery } from "@/api/query/exampleQuery";

export const asyncExampleState = selector({
  key: "asyncExample",
  get: async () => {
    const { data, errors } = await apolloClient.query({
      query: exampleQuery,
      fetchPolicy: "no-cache",
    });
    if (errors) {
      throw errors;
    }
    return data.example;
  },
});

// get state
export const useAsyncExampleValue = () => useRecoilValue(asyncExampleState);

// reset state
export const useResetAsyncExampleState = () =>
  useRecoilRefresher_UNSTABLE(asyncExampleState);
```

### Redux

Redux Toolkit で非同期を伴う Slice を作成する場合、createAsyncThunk と createSlice の extraReducers で構成します。

redux/slices/asyncExampleSlice.ts

```typescript
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import type { ApolloError } from "@apollo/client";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery, type Example } from "@/api/query/exampleQuery";
import type { RootState } from "../store";

// API用の状態の型を定義
const initialState: {
  data: Example[];
  status: "idle" | "loading" | "succeeded" | "failed";
  error: ApolloError;
} = {
  data: [],
  status: "idle",
  error: null,
};

// 非同期用のreducerを設定
export const fetchAsyncExample = createAsyncThunk<
  Example[],
  void,
  { state: RootState }
>("asyncExample/fetchAsyncExample", async (_, { rejectWithValue }) => {
  const { data, errors } = await apolloClient.query({
    query: exampleQuery,
    fetchPolicy: "no-cache",
  });

  if (error) {
    return rejectWithValue(error);
  }

  return data.example;
});

// SliceにextraReducersを使って非同期用のreducerを紐づける
export const asyncExampleSlice = createSlice({
  name: "asyncExample",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchAsyncExample.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchAsyncExample.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.data = action.payload;
      })
      .addCase(fetchAsyncExample.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.payload as any;
      });
  },
});

export default asyncExampleSlice.reducer;
```

redux/hooks/asyncExampleSlice.ts

```typescript
import { useDispatch, shallowEqual } from "react-redux";
import { type RootState, useAppSelector } from "../store";
import { fetchAsyncExample } from "../slices/asyncExampleSlice";

// get state
export const useAsyncExampleValue = () => {
  const dispatch: AppDispatch = useDispatch();
  const { data, status } = useAppSelector(
    (state: RootState) => state.example,
    shallowEqual
  );

  // 状態が"idle"の時はfetchを実行する
  useEffect(() => {
    if (status === "idle") {
      dispatch(fetchAsyncExample());
    }
  }, [status, dispatch]);

  return data;
};

// reset state
export const useResetNormalExampleState = () => {
  const dispatch = useDispatch();
  return () => {
    dispatch(fetchAsyncExample());
  };
};
```

## 移行途中で Recoil と依存する状態を連携させる場合

移行途中で共存させなければならない場合、以下のように Recoil に依存する状態を Redux と連携できます。
ただし、Recoil 同士の状態と違い、Redux の状態の変化を Recoil は自動で検知してくれないので、Redux の状態を変更するときに、Recoil で Reset や Refresh を実行する必要があることの注意が必要です。

```typescript
import { selector } from "recoil";
import { store } from "@/redux/store";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery, type Example } from "@/api/query/exampleQuery";

export const exampleState = selector({
  key: "exampleState",
  get: async ({ get }) => {
    const keyword = store.getState().keyword;

    const { data, errors } = await apolloClient.query({
      query: exampleQuery,
      variables: {
        keyword,
      },
      fetchPolicy: "no-cache",
      errorPolicy: "all",
    });
    if (errors) {
      throw errors;
    }
    return data.example;
  },
  cachePolicy_UNSTABLE: {
    eviction: "most-recent",
  },
});
```

## まとめ

Recoil の atom や selector の書き方と Redux Toolkit の createSlice の書き方が似ていることもあり、意外とコードの移行の親和性が高いと感じました。  
ただ、非同期関係では Redux において createAsyncThunk を利用するなど、Recoil にはない独特の記述も必要で、慣れが必要な部分も実感しました。

## 参考リンク

- Recoil の更新状況: <a href="https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312" target="_blank">React 19 support · Issue #2318 · facebookexperimental/Recoil</a>
- Recoil の更新状況: <a href="https://recoiljs.org/blog" target="_blank">Blog | Recoil</a>
- Redux Toolkit の使い方 (はじめ方): <a href="https://redux-toolkit.js.org/tutorials/quick-start" target="_blank">Quick Start | Redux Toolkit</a>
- Redux Toolkit の使い方 (TypeScript): <a href="https://redux-toolkit.js.org/tutorials/typescript" target="_blank">TypeScript Quick Start | Redux Toolkit</a>
- Redux Toolkit の使い方 (非同期の状態): <a href="https://redux-toolkit.js.org/api/createAsyncThunk" target="_blank">createAsyncThunk | Redux Toolkit</a>

20240719_recoil-to-redux.png

Recoil から Redux へ移行するときにやったこと

<h2>Windows上でUbuntuが動く</h2>
<p>Windows 10の定例アップデートで「Linux on Windows」という機能が追加されました。マジでUbuntuが動きます。以下はMicrosoft Storeにて&#8221;ubuntu&#8221;で検索した結果です。「本当です」と大変強気な姿勢。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-13510 size-large" src="/uploads-archive/2018/01/LinuxOnWindowsStore-1024x462.png" alt="" width="1024" height="462" srcset="/uploads-archive/2018/01/LinuxOnWindowsStore-1024x462.png 1024w, /uploads-archive/2018/01/LinuxOnWindowsStore-300x135.png 300w, /uploads-archive/2018/01/LinuxOnWindowsStore-768x346.png 768w, /uploads-archive/2018/01/LinuxOnWindowsStore-228x103.png 228w, /uploads-archive/2018/01/LinuxOnWindowsStore.png 1320w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
「Linux on Windows」という機能を乱暴にざっくり言うと「Linux向けにコンパイルされた実行ファイルを（Linux on Windowsを経由で）Windows上で直接実行できる」ということです。<br />
細かい導入手順は他の詳しいサイトを見て頂くとして、何が出来て何が出来ないのかをUbuntu on Windowsを例に簡単に列挙していきます。ここで言うUbuntuはWindows上で動くUbuntu on Windowsのことを指します。</p>
<h2>サポートされてないこと</h2>
<p>・Ubuntuをサーバ用途として利用する<br />
Windowsからは見かけ上Ubuntuがアプリになってます。Windowsのサービスとして登録…というのは現段階ではサポートされていないようです。本当はこれを期待していました。<br />
・X-windowを動かす<br />
未サポートと言いながら必要なパッケージを入れれば、以下の通り動作はします。しかし、アテにしていたVisual Stdio Codeは起動しなかったのでこれも残念。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-13515 size-large" src="/uploads-archive/2018/01/ChromeOnUoW-1024x426.png" alt="" width="1024" height="426" srcset="/uploads-archive/2018/01/ChromeOnUoW-1024x426.png 1024w, /uploads-archive/2018/01/ChromeOnUoW-300x125.png 300w, /uploads-archive/2018/01/ChromeOnUoW-768x319.png 768w, /uploads-archive/2018/01/ChromeOnUoW-228x95.png 228w, /uploads-archive/2018/01/ChromeOnUoW.png 1131w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h2>じゃあ何ができるのか</h2>
<p>・Windows-Ubuntu間で標準入出力が透過的に使える<br />
Ubuntu上からは以下のコマンド<br />
<code>motki@k_motoki:/mnt/c/Users/admin$ /mnt/c/Windows/System32/cmd.exe /c dir | grep "DIR"</code><br />
Windows上からは以下のコマンド<br />
<code>C:\Users\admin&gt;dir | bash -c "grep DIR"</code><br />
それぞれ、Windowsのフォルダ内ファイル列挙コマンドの結果をUbuntuのgrepに流し込んでいる処理です。</p>
<p>標準出力をWindows|Linuxで加工したい、って時がごくまれにあったりしたのですが、これまではコンソール画面のテキストをコピペしたり、ファイルに出力したものを利用したり、が一般的でした。他にもLinux側のプログラムからWindows側のファイルを操作できるようになったことで、ファイル検索やファイル内探査、ファイル加工などがやりやすくなったと思います。例えばWindowsのIDEで書いたスクリプトをちょっとLinuxで実行したい、といった時などにも応用できるのではないでしょうか。</p>
<p>このLinux on Windowsはまだまだ開発途上ですが、将来的に大きく化けそうな気がします。</p>


Windows subsystem for Linux

<p>我々が普段生活している中では、気づかないところでコンピュータが生み出す「ランダム（乱数）」にお世話になっています。</p>
<p>スマホのゲームでガチャを回した時、アタリつき自動販売機で飲み物を買った時、モンテカルロ法シミュレーションを実行する時とさまざまです。</p>
<p>20年くらい前に日本人の数学者グループが考案した「メルセンヌツイスタ（MT）」と呼ばれる疑似乱数生成アルゴリズムは多くのプログラミング言語に実装され、今では疑似乱数が欲しいときのデファクトスタンダードになってるんじゃないでしょうか。</p>
<p>疑似乱数とは、乱暴に言っちゃえば「数が出るパターンに周期があるから、厳密には正しくないけど、だいたいランダムな数字の集まり」というものです。詳しいことは専門家の説明を読みましょう。疑似乱数の質はCPUの計算速度とメモリ量で決定するのですが、その中で効率が良い方法のひとつがMTなのです。MTの乱数周期は2<sup>19937</sup>-1と、とても長いので実用に耐えられるわけです。</p>
<p>余談ですが計算資源が貧弱な頃、例えば8bit、16bit時代のテレビゲームは1から255までの数字を良い具合に散らしたテーブルで保持する、なんて無茶をやってます。この場合、乱数列周期2<sup>8</sup>-1非常に短い。</p>
<p>一方、RSA暗号キーの生成など、暗号を作るときには周期性がある疑似乱数を使うと解読される可能性があります。そのため、キーを生成する際に「マウスを無作為に動かせ」「キーボードのキーをしっちゃかめっちゃかに叩け」といった指示が出ていた時代もありました。人為的なランダム入力を乱数の元にしていたわけです。</p>
<p>ところが10年くらい前から、CPUが持つ熱雑音などをもとに暗号化用の乱数がPCのハードウェアから取得できるようになりました。Linux処理系だと/dev/random、/dev/urandomがそれに該当します。</p>
<p>/dev/randomをファイルとして読み出すだけで、システムに溜まっている乱数が手に入ります。ただし、保持している情報量には限りがあるため、次の乱数が生成されるまで「処理をブロッキングする」か「疑似乱数で代用する」という限定条件があります。</p>
<p>前置きが長くなりました。その良質な乱数である/dev/randomがMTの乱数生成の代わりになるかどうか、を簡単なプログラムで検証してみました。</p>
<p>ちなみにphpであれば</p>
<div>


		<div id="crayon-6495402649157027523049" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
hexdec(bin2hex(file_get_contents('/dev/urandom', false, NULL, 0, 4)));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402649157027523049-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402649157027523049-1"><span class="crayon-e">hexdec</span><span class="crayon-sy">(</span><span class="crayon-e">bin2hex</span><span class="crayon-sy">(</span><span class="crayon-e">file_get_contents</span><span class="crayon-sy">(</span><span class="crayon-s">'/dev/urandom'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">NULL</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">4</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<p>これで4byte=32bit長の乱数が整数で入手できます。</p>
<p>ひたすらループを繰り返して、乱数を生成するテストプログラムを私のphp開発環境にて実行してみました。</p>
<table>
<tbody>
<tr>
<td>試行回数(回)</td>
<td>MT<br />
(10,000,000回ループ)</td>
<td>/dev/random<br />
(10,000回ループ)</td>
</tr>
<tr>
<td style="text-align: right;">1</td>
<td style="text-align: right;">2.84585</td>
<td style="text-align: right;">9.743988</td>
</tr>
<tr>
<td style="text-align: right;">2</td>
<td style="text-align: right;">2.868848</td>
<td style="text-align: right;">9.796494</td>
</tr>
<tr>
<td style="text-align: right;">3</td>
<td style="text-align: right;">2.865435</td>
<td style="text-align: right;">9.752865</td>
</tr>
<tr>
<td style="text-align: right;">4</td>
<td style="text-align: right;">2.836898</td>
<td style="text-align: right;">10.043154</td>
</tr>
<tr>
<td style="text-align: right;">5</td>
<td style="text-align: right;">2.832968</td>
<td style="text-align: right;">9.751514</td>
</tr>
<tr>
<td style="text-align: right;">6</td>
<td style="text-align: right;">2.866058</td>
<td style="text-align: right;">9.690516</td>
</tr>
<tr>
<td style="text-align: right;">7</td>
<td style="text-align: right;">2.91101</td>
<td style="text-align: right;">9.747249</td>
</tr>
<tr>
<td style="text-align: right;">8</td>
<td style="text-align: right;">2.857296</td>
<td style="text-align: right;">10.180832</td>
</tr>
<tr>
<td style="text-align: right;">9</td>
<td style="text-align: right;">2.856203</td>
<td style="text-align: right;">10.204445</td>
</tr>
<tr>
<td style="text-align: right;">10</td>
<td style="text-align: right;">2.872247</td>
<td style="text-align: right;">10.323912</td>
</tr>
<tr>
<td style="text-align: right;">平均</td>
<td style="text-align: right;">2.8612813</td>
<td style="text-align: right;">9.9234969</td>
</tr>
</tbody>
</table>
<p>結論から言えば、実行速度的に比べる必要もありませんでした。速度差およそ300倍。</p>
<p>しかし、/dev/randomからの乱数取得も実装コストが低いため、用途と利用シーンによっては利用することも検討してよいのでは、と思います。</p>
<p>&nbsp;</p>

その乱数、適切ですか？

<p>CentOS6.7にて、SSL VersionをNSSからOpenSSLに変更する際に、curlのバージョンアップが必要があったため、それを記事にしてみました。</p>
<p>現状のバージョンは下記コマンドで確認できます。</p>

		<div id="crayon-6495402644bea586191189" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
curl --version</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402644bea586191189-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402644bea586191189-1"><span class="crayon-i">curl</span><span class="crayon-h"> </span>--<span class="crayon-i">version</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>私が実行した環境では、curl 7.19.7でした。</p>
<p>いくつか必要なモジュールをインストールします。</p>

		<div id="crayon-6495402644bee322939001" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
yum install openssl-devel libmetalink-devel libssh2-devel c-ares-devel lbzip2</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402644bee322939001-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402644bee322939001-1"><span class="crayon-e">yum </span><span class="crayon-e">install </span><span class="crayon-i">openssl</span>-<span class="crayon-e">devel </span><span class="crayon-i">libmetalink</span>-<span class="crayon-e">devel </span><span class="crayon-i">libssh2</span>-<span class="crayon-i">devel</span><span class="crayon-h"> </span><span class="crayon-i">c</span>-<span class="crayon-i">ares</span>-<span class="crayon-e">devel </span><span class="crayon-i">lbzip2</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>curlのソースを落としてきます。<br />
最新のものは<br />
<a href="https://curl.haxx.se/download.html" target="_blank">https://curl.haxx.se/download.html</a><br />
より確認ができます。</p>

		<div id="crayon-6495402644bf0119489904" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
wget https://curl.haxx.se/download/curl-7.50.3.tar.gz</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402644bf0119489904-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402644bf0119489904-1"><span class="crayon-e">wget </span><span class="crayon-i">https</span><span class="crayon-sy">:</span><span class="crayon-c">//curl.haxx.se/download/curl-7.50.3.tar.gz</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>コンパイルし、インストールします。</p>

		<div id="crayon-6495402644bf1315921386" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
tar xfvz curl-7.50.3.tar.gz
 cd curl-7.37.0
./configure --enable-libcurl-option
make
sudo make install</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402644bf1315921386-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402644bf1315921386-2">2</div><div class="crayon-num" data-line="crayon-6495402644bf1315921386-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402644bf1315921386-4">4</div><div class="crayon-num" data-line="crayon-6495402644bf1315921386-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402644bf1315921386-1"><span class="crayon-e">tar </span><span class="crayon-e">xfvz </span><span class="crayon-i">curl</span>-<span class="crayon-cn">7.50.3.tar.gz</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402644bf1315921386-2"><span class="crayon-h"> </span><span class="crayon-e">cd </span><span class="crayon-i">curl</span>-<span class="crayon-cn">7.37.0</span></div><div class="crayon-line" id="crayon-6495402644bf1315921386-3"><span class="crayon-sy">.</span>/<span class="crayon-i">configure</span><span class="crayon-h"> </span>--<span class="crayon-i">enable</span>-<span class="crayon-i">libcurl</span>-<span class="crayon-e">option</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402644bf1315921386-4"><span class="crayon-e">make</span></div><div class="crayon-line" id="crayon-6495402644bf1315921386-5"><span class="crayon-e">sudo </span><span class="crayon-e">make </span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>以上で、インストールは終わりです。</p>

		<div id="crayon-6495402644bf2549218699" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
curl --version</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402644bf2549218699-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402644bf2549218699-1"><span class="crayon-i">curl</span><span class="crayon-h"> </span>--<span class="crayon-i">version</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>にて、バージョンが変更されていれば、成功です。</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #UX

2024/12/06

2024/07/19

2018/01/17

2017/07/19

2016/09/28