## はじめに
ChatGPTなどのAPIを使うことで、これまで難しかった書類から必要な情報をピックアップする処理や、多言語への変換などがとても容易に行えるようになりました。
しかしながら、その処理はある程度の曖昧さを含まざるを得ないため、1回だけで最適な答えを出すこと難しいケースは多々あります。
そこで今回は、再帰的にChatGPTのAPIへ指示を出すことで、答えを洗練させられるかどうか、検証してみました。

## OpenAIチャットAPIでアイディアを再帰的に洗練させる

OpenAIのチャットAPIとTypeScriptを使い、アイディアを段階的に洗練させるプログラムを紹介します。  

### 作ってみたプログラム

```typescript
import dotenv from "dotenv";
import OpenAI from "openai";
import { zodResponseFormat } from "openai/helpers/zod";
import { z } from "zod";

dotenv.config({ path: `${__dirname}/.env` });

// APIの返答の形式を安定化させるため、Zodを使ってフォーマット指定を行います
const responseFormat = z.object({
  idea: z.string()
});

const main = async () => {
  // OpenAIの初期設定
  const client = new OpenAI({
    organization: process.env.CHAT_GPT_ORGANIZATION_ID,
    project: process.env.CHAT_GPT_PROJECT_ID,
    apiKey: process.env.CHAT_GPT_API_KEY
  });

  const MAX_COUNT = 5; // 再帰処理で呼び出す回数制限

  const getIdeas = async (
    question: string,
    ideas: string[],
    count: number = 1
  ) => {
    // 最初の指示
    let content = `## 指示
次に挙げる議題について、アイディアを出してください
「${question}」

## 制限事項
- 200文字程度で出してください`;

    // 再帰的に呼び出された時の指示
    if (count > 1) {
      content = `## 指示
次に挙げるアイディアを類推を使って洗練させてください
課題: ${question}
アイディア：「${ideas[ideas.length - 1]}」

## 制限事項
- 200文字程度で出してください`;
    }

    // チャットAPIの実行
    const chatCompletion = await client.chat.completions.create({
      model: "gpt-4o-mini",
      response_format: zodResponseFormat(responseFormat, "idea"),
      messages: [
        {
          role: "user",
          content
        }
      ]
    });

    // APIのレスポンスをパースして、情報を取得
    const responseMessage =
      JSON.parse(chatCompletion?.choices?.[0]?.message?.content ?? "{}")
        ?.idea ?? "";

    // 過去データに追加
    ideas.push(responseMessage);

    // 再帰的に呼び出す
    if (count < MAX_COUNT) {
      return getIdeas(question, ideas, count + 1);
    }

    return {
      question,
      ideas
    };
  };

  // 関数の実行
  const result = await getIdeas(
    "アジア向け越境ECを国内メーカーの販売担当者へ広告する場合の効果的なバナーデザイン",
    []
  );

  console.log(result);
};

main()
  .then(() => {
    console.log("Done");
  })
  .catch((error) => {
    console.error("Error:", error);
  });
```

#### プログラムの解説

- `.env`ファイルに定義されたAPIキーなどの環境変数を`dotenv`で読み込みます。
- Zodを使い、APIレスポンスの形式（idea: string）を指定することで、レスポンスの型を保証し、安定性を高めます。
- `getIdeas`関数は、指定回数（MAX_COUNT）まで再帰的にChatGPT APIへリクエストを送り、毎回新しいアイディアを生成・洗練します。
- 1回目は議題からアイディアを生成し、2回目以降は直前のアイディアをさらに洗練するよう指示します。
- すべてのアイディアは配列に蓄積され、最終的にまとめて出力されます。

### 実行結果例

#### 1回目
```md
1. クリーンでモダンなデザインを使用し、アジア市場を象徴する色彩（赤、金など）を取り入れる。
2. 商品写真を大きく配置し、目立たせることで視覚的インパクトを強調。
3. アジア顧客のニーズを反映したメッセージ（例：トレンド性や伝統的価値）を強調。
4. 言語はターゲット地域に応じたローカリゼーションを施し、親しみやすさを演出。
5. "越境ECで新市場開拓！"などのキャッチコピーで興味を引く。
```

#### 3回目
```md
アジア向け越境ECのバナーデザインには、
1. アジア特有の色（赤、金）を取り入れたクリーンでモダンなデザインが効果的。
2. 大きな商品写真でインパクトを与え、
3. トレンドと伝統を融合させたメッセージで興味を引く。
4. 各地域の言語で親しみやすさを演出し、
5. "新市場開拓のチャンス！"などの魅力的なキャッチコピーを加えることで、販売担当者の関心を高める。
```

#### 5回目
```md
「アジア向け越境ECのバナーデザインでは、
1. アジアの文化に根ざした明るい色合い（特に赤や金）を使用し、パッと目を引くデザインに。
2. 商品の魅力を伝えるために、大きな商品画像を配する。
3. トレンドと伝統を融合したキャッチコピーで感情に訴えかけ、
4. 地域ごとの言語で表記して親しみを感じさせる。
5. 更に、「新市場開拓は今がチャンス！」というポジティブなフレーズで顧客の関心を引く。
```

### 感想
結果を見てみると、アイディアそのものが洗練されているというより、文章として洗練されていっているという感じでした。
「洗練させる」ということが、人間にとっても解釈が難しいように、そもそも曖昧な指示なのが原因かもしれませんね。
また、ただ繰り返せばいいというわけではなさそうです。
ただし、情報を絞り込んでいくなど、プロンプトや利用目的を工夫すれば、この方法も有効に活用できる可能性があります。

### 注意
- 実案件でAPIを再帰的に利用する場合、API利用コストの増大や、レスポンスの質が頭打ちになる可能性についても、さらなる検証が必要です。

### 参考サイト
- <a href="https://platform.openai.com/docs/overview" target="_blank" rel="noopener noreferrer">Overview - OpenAI API</a>

large_eycatch.png

medium_eycatch.png

small_eycatch.png

thumbnail_eycatch.png

eycatch.png

OpenAIのチャットAPIを再帰的に呼び出す方法を検証してみた

## はじめに
Reactでフロントエンドの開発を行う場合に、おそらく一度は誰でも状態管理に頭を悩ませるのではないでしょうか。  
2023年10月現在、Redux、React Hooks、zustand、そしてここで取り上げる Recoil、Jotai など、Reactの状態管理をするためのライブラリや方法は数多く存在ます。  
多くの開発者によりその使い方が模索・洗練されていますが、絶対的な正解というものは存在しません。  
故に、プロジェクトに導入する場合に、どれを選定するかで、とても迷う方は多いのではないでしょうか。  
このブログでは、私が状態管理のライブラリを選定するときに悩んだ内容から、案件の向き不向きについて考察し、ご紹介したいと思います。  

**[2024.6.3 追記] Recoilから正式に発表されているわけではありませんが、2023年3月以降アップデートがなく、Recoilの開発は実質的に打ち切られてしまったようです。そのため、Recoilを選択することは避けた方がよさそうです…  
参考: <a href="https://github.com/facebookexperimental/Recoil/issues/2318" target="_blank">React 19 support · Issue #2318 · facebookexperimental/Recoil</a>**

**→ [2024.7.19 追記] [Reduxへ移行する方法の記事](https://sterfield.co.jp/blog/recoil-to-redux/)を投稿しました。**

## まず Redux、zustand と Recoil、Jotai の違いについて
Redux は、Reactを作ったFacebookが提唱した[Flux](https://github.com/facebookarchive/flux/tree/main/examples/flux-concepts)というアーキテクチャをもとにした、初期から最も利用されている状態管理ライブラリです。  
Reactとは切り離して１つのストアに集約して管理するため、情報の流れが一方通行で辿りやすい特徴があります。WEBアプリ全体の一貫性を重視し、堅牢な作りにする場合、Reduxは有望な選択肢となります。  
しかしながら、Reduxは非同期通信を伴うような複雑な状態管理ではそのまま使うのはあまりにもコードが膨大になってしまうため、サードパーティのプラグインなどを導入することが現実的な選択肢となります。また、1つのストアで管理するため、コンポーネント単位でのカプセル化が苦手です。  
  
zustand はこのReduxの苦手な部分を補うことで、Reduxからの乗り換えが進んでいるライブラリです。  
基本的な思想はReduxと同じですが、Reduxで煩雑になるような記述をより簡潔に書くことができます。 
  
Recoil は Redux とは違う思想で、ストアを複数持ち、それぞれに対して別々のコンポーネントからアクセス可能です。ストアが一元管理されているReduxやzustandとちがい、コンポーネント単位でのカプセル化がしやすく、データとアプリ全体の結合を制限することに向いているので、柔軟性を重視するアプリに向いていると言えそうです。
ただ、複数のストアに別々のコンポーネントから双方向でアクセスできる特徴が故に、組み方によってはReduxと比べると情報の流れを辿りにくくなる可能性があることに注意が必要です。  
  
Jotai は Recoil をより簡潔に記述できるようにしたライブラリで、[npm trends](https://npmtrends.com/Jotai-vs-react-redux-vs-recoil-vs-zustand)を見ると、2023年10月現在、本家のRecoilを追い抜いています。  

## RecoilよりJotaiが向いている案件
RecoilとJotaiで同じ状態管理をするためのコードを比べてみましょう。
#### Recoil
```typescript
const exampleState = atom({
  key: "exampleState",
  default: 0
});
const exampleSelector = selector({
  key: "exampleSelector"
  get ({ get }) => `${get(exampleState)}個を選択中`
});
```
#### Jotai
```typescript
const exampleState = atom(0);
const exampleSelector = atom((get) => `${get(exampleState)}個を選択中`);
```
こうやって並べてみるとよく分かりますが、  
Jotaiの方が圧倒的にコード数が少なくなります。  
Recoilで用意されている機能の多くはJotaiでも利用できるので、よりシンプルに状態管理を行いたい場合は、  Jotaiが向いていると言えます。  
  
## JotaiよりRecoilが向いている案件
では、次の場合はどうでしょう。  
#### Recoil
```typescript
// Writable
const idState = atom({
  key: "idState",
  default: 1
});

// Read Only
const fetchState = selector({
  key: "fetchState",
  get: async ({ get }) => {
    const id = get(idState);
    try {
      const response = await fetch(`example.api.json?id=${ id }`);
      const json = await response.json();
      return json;
    } catch (error) {
      throw error;
    }
  }
});

// Writable (default value fetched)
const complexState = atom({
  key: "complexState",
  default: selector({
    key: "complexSelector",
    get: async ({ get }) => {
      const json = await get(fetchState);
      return {
        id: json.id,
        name: json.exampleName
      }
    }
  })
});
```
#### Jotai
```typescript
// Writable
const idState = atom(1);

// Read Only
const fetchState = atom(async (get) => {
  const id = get(idState);
  try {
    const response = await fetch(`example.api.json?id=${ id }`);
    const json = await response.json();
    return json;
  } catch (error) {
    throw error;
  }
});

// Writable (default value fetched)
const defaultComplexState = atom(async (get) => {
  const json = await get(fetchState);
  return {
    id: json.id,
    name: json.exampleName
  }
});
const overWrittenComplexState = atom(null as { id: number; name: stirng; });
const complexState = atom<number, [number], void>(
  async (get) =>
    (await get(overWrittenComplexState)) ||
    (await get(defaultComplexState)),
  (_get, set, update) => set(overWrittenComplexState, update)
);
```
このように初期値をフェッチしつつ、後からデータの上書きもできるようなストアを作ろうとするような複雑な処理をさせようとした場合、JotaiよりRecoilの方が分かりやすいコードになることがわかるかと思います（もっと上手な書き方があったらすみません）。  
また、フェッチしたデータをリセットできるようにする場合、  
  
#### Recoil
```jsx
const exampleState = atom({
  key: "exmapleState",
  default: 0
})
const ExampleComponent = () => {
  const [example, setExample] = useRecoilState(exampleState);
  const reseter = useResetRecoilState(exampleState);
  const handleAddClick = () => setExample(previousState => previousState + 1);
  return (
    <div>
      <p>{example}</p>
      <button onClick={handleAddClick}>追加</button>
      <button onClick={reseter}>リセット</button>
    </div>
  )
}
```
のように、Recoilはatomに対してそのままuseResetRecoil()を使うことでリセット可能ですが、  
  
#### Jotai
```jsx
const exampleState = atomWithReset(0);
const ExampleComponent = () => {
  const [example, setExample] = useAtom(exampleState);
  const reseter = useResetAtom(exampleState);
  const handleAddClick = () => setExample(previousState => previousState + 1);
  return (
    <div>
      <p>{example}</p>
      <button onClick={handleAddClick}>追加</button>
      <button onClick={reseter}>リセット</button>
    </div>
  )
}
```
のように、Jotaiでは、あらかじめreset用のutil（atomWithRest）を使ってatomを用意する必要があります。  
その他にも、Jotaiでは複雑な操作をしようとした場合に、Recoilと同様の操作をするためにより多くのutilを使ったり、helperを自前で用意しなければいけない場合に遭遇します。  
  
これらのことから、より複雑なデータ処理を扱うような使い方をする場合、Recoilの方が向いていると言えます。  

## まとめ
堅牢でアプリ全体を見通すことを優先するのであれば Redux。  
基本的な思想はReduxと同じだけど、よりシンプルに描きたいのであれば zustand。  
機能追加やコンポーネントの入れ替えが多いような柔軟性のあるアプリで、複雑なデータ管理が必要なら Recoil。  
柔軟性とシンプルさを重視するなら Jotai というのが、現時点での自分の選択基準でした。

## 参考リンク

- [Jotai](https://jotai.org/)
- [Recoil](https://recoiljs.org/)
- [Redux](https://redux.js.org/)
- [zustand](https://github.com/pmndrs/zustand)
- [npm trends: jotai vs recoil vs redux vs zustand](https://npmtrends.com/jotai-vs-recoil-vs-redux-vs-zustand)

medium_20231006_1.png

small_20231006_1.png

thumbnail_20231006_1.png

20231006_1.png

Reactの状態管理ライプラリはRecoilとJotaiならどちらをえらべばいいか？

ツイートのいいね数やコメント数、YouTubeの投稿日時、Amazonなどネットショップのレビュー数、通貨ごとの適切な価格表示など、UX（ユーザーエクスペリエンス）の向上やコンテンツや商品の競争力を高めるためには、これらの数字をユーザーが一目で理解できるようにすることが一つのポイントになります。

また、数字が非常に長い場合は、簡潔に表示する方が読みやすいです。さらに、ユーザーの使用言語や文化に合わせて、数字を適切に表示することが良いでしょう。

上のように数字、日付、価格を簡潔に表示するために、外部ライブラリを使用せずに、JavaScript標準仕様にあるIntl APIを使用するとより簡便に実装できます。

### Intl API
**Intl** APIはinternationalization（国際化）APIの略で、下記はMDNからの引用です。

> **`Intl`** オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 **`Intl`** オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します。
> 

また、internationalizationは始めのiから終わりのnまでの間に18文字入っていることで**i18n**と呼ばれています。

ほとんどの最新のブラウザでサポートされているため、互換性を心配せずに使用できます。

では、いくつかの使い方を紹介します。

## 数字を簡潔に表示
`Intl.NumberFormat`を使用します。
viewsに閲覧数を表す数字を入れています。このように大きな数字をそのまま表示すると読みにくくなります。
最初の引数には言語を指定するだけで良いので、日本語の場合は`ja-JP`を指定します。
```
const views = 9741275;
const formatter = new Intl.NumberFormat('ja-JP');

console.log(formatter.format(views));  // 9,741,234
```
より簡潔に表示するには、2番目の引数にさまざまなオプションを指定できます。オプションの中で`notation: 'compact'`を指定するとコンパクトになります。
```
const views = 9741275;
const formatter = new Intl.NumberFormat('ja-JP', {
    notation: 'compact'
});

console.log(formatter.format(views));  // 974万
```
さらに、1番目の引数に言語ブラウザのAPIでサポートされている`navigator.language`を指定すると、ユーザーがブラウザで設定した言語を自動的に取得でき、ユーザーが指定した言語に応じて数字を表示できます。
```
const views = 9741234;
const formatter = new Intl.NumberFormat(navigator.language, {
  notation: 'compact'
});

console.log(formatter.format(views));  // 974万
```
## 価格を通貨に合わせて簡潔に表示
同様に`Intl.NumberFormat`を使用します。
1番目の引数には同じく言語を、2番目の引数のオプションで`style: 'currency'`に設定し、currencyオプションで通貨`currency: 'JPY'`を指定します。
```
const price = 1000000;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency', 
  currency: 'JPY'
});

console.log(formatter.format(price)); // ￥1,000,000
```
ここでも"compact"オプションを使用してコンパクトにすることができます。compactオプションは価格よりはいいねの数など大体の数を表す時にいいかもしれません
```
const price = 1000000;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency', 
  currency: 'JPY',
  notation: 'compact'
});

console.log(formatter.format(price)); // ￥100万
```
## 相対時間をスマートに表示
商品や記事がいつ公開されたか、何日前、何時間前に投稿されたかを表す必要もあります。相対時間をスマートに表示するためには`Intl.RelativeTimeFormat`を使用します。
`format`の1番目の引数は数字で、2番目には日付か時間か月かなどを指定します。
```
const formatter = new Intl.RelativeTimeFormat('ja-JP');

console.log(formatter.format(1, 'day')); // 1 日後
```
オプションに`numeric: 'auto'`にすると言葉を変えてくれます。
```
const formatter = new Intl.RelativeTimeFormat('ja-JP', {
  numeric: 'auto'
});

console.log(formatter.format(1, 'day')); // 明日
```
入社して何日経ったかを示したい場合、今日を基準にして、入社日の日付を指定し、現在までの日数を計算し、フォーマッタを使用すると、"〜日前”と表示されます。
```
const today = new Date();
const startDate = new Date(2021, 4, 17); // 2021年5月17日　monthは0から始まるため5→4
const daysPassed = Math.ceil((startDate - today) / (1000 * 60 * 60 * 24));
const yearsPassed = Math.ceil((startDate - today) / (1000 * 60 * 60 * 24　* 365));
const formatter = new Intl.RelativeTimeFormat('ja-JP', {
  numeric: 'auto'
});

console.log(formatter.format(daysPassed, 'day')); // 857 日前
console.log(formatter.format(yearsPassed, 'year')); // 2 年前
```
ただし、2番目の引数は日か時間かのどちらか1つだけを指定できます。

この問題を補完できるライブラリ`timeago.js`がありますが、時間がどれだけ経過したかに応じて日か時間かを自動的に表示されるので、相対的な時間のみが必要な場合に便利かと思います。

## 日付と時間を正確に表示
時間を表示するときには、コンパクトにしてより読みやすい場合もありますが、正確な日付を表示する必要があるときもあります。その場合は`Intl.DateTimeFormat`または`toLocalDateString`を使用します。
```
const today = new Date(); // 作成日基準の今日

console.log(today.toString()); // Thu Sep 21 2023 12:05:01 GMT+0900 (日本標準時)
console.log(new Intl.DateTimeFormat('ja-JP').format(today)); // 2023/9/21
```
これをさらに簡略化した方法もあります。
```
const today = new Date();

console.log(
  today.toLocaleDateString('ja-JP', {
    minute: 'numeric',
    hour: 'numeric',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    weekday: 'short'
  })
); // 2023年9月21日(木) 12:18
```
日付にtoLocaleDateStringを使用するだけで、内部的にはIntl APIを使用するため、より簡単にフォーマットを使用できます。言語を指定するだけでその言語に合わせたフォーマットが表示されます。さらに、さまざまなオプションを指定することもできるので、より簡単にまたはより詳しく表示できます。

### まとめ

IntlはJavaScriptの標準仕様であるので、定期的に更新され常に最新の国際化に向けた実装が可能です。また、外部ライブラリに依存せずに使用できることも良い点です。もちろん一つの言語だけを対応するサイトでも使用でき、その言語に合わせたフォーマットにしてくれるので別途用意しなくて済みます。

日々の開発においても活用していきたいと思います。


#### 参考
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl
- https://cercopes-z.com/JavaScript/Object-Intl-js.html


【JavaScriptのIntl】数字や日付、価格の表示をスマートに

<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-17883" src="/uploads-archive/2022/08/81ZkGOHcf6L-809x1024.jpg" alt="プロを目指す人のためのTypeScript入門表紙" width="809" height="1024" srcset="/uploads-archive/2022/08/81ZkGOHcf6L-809x1024.jpg 809w, /uploads-archive/2022/08/81ZkGOHcf6L-237x300.jpg 237w, /uploads-archive/2022/08/81ZkGOHcf6L-768x972.jpg 768w, /uploads-archive/2022/08/81ZkGOHcf6L-1213x1536.jpg 1213w, /uploads-archive/2022/08/81ZkGOHcf6L-1618x2048.jpg 1618w, /uploads-archive/2022/08/81ZkGOHcf6L-228x289.jpg 228w, /uploads-archive/2022/08/81ZkGOHcf6L.jpg 1975w" sizes="(max-width: 809px) 100vw, 809px" /></p>
<p>&nbsp;</p>
<h1>著者</h1>
<p>鈴木 僚太(すずき りょうた) (  <a href="https://twitter.com/uhyo_">https://twitter.com/uhyo_</a> )<br />
2013年からTypeScriptを使用中。LINE株式会社でフロントエンドエンジニアとして自社開発に従事しながら、技術顧問なども行っている(本書発行当時)。専門はTypeScriptとReactで、講演やインターネット上での記事公開を通じて初心者向けから上級者向けまでさまざまな情報を発信している。OSS活動にも積極的だが自作のライブラリはあまり流行っていない。</p>
<p>&nbsp;</p>
<h1>目次</h1>
<ul>
<li>第1章 イントロダクション</li>
<li>第2章 基本的な文法・基本的な型</li>
<li>第3章 オブジェクトの基本とオブジェクトの型</li>
<li>第4章 TypeScriptの関数</li>
<li>第5章 TypeScriptのクラス</li>
<li>第6章 高度な型</li>
<li>第7章 TypeScriptのモジュールシステム</li>
<li>第8章 非同期処理</li>
<li>第9章 TypeScriptのコンパイラオプション</li>
</ul>
<h1>ここがすごい</h1>
<h2>TypeScript の復習と深い理解が得られる</h2>
<p>後述しますが、「入門」とは言い難い分、TypeScript でプロダクトを作ったことのある方におすすめしやすい本でした。サンプルコードも充実しているし、7,8章当たりになると、「TypeScriptらしさ」の内容に深入りしてきますので、まさにプロのTypeScripterを目指すための本です。</p>
<h2>コラムが面白い</h2>
<p>「比較演算とNaN」「letを避けるてプログラムを読む人の負担を減らそう」など、わざわざ検索エンジンにかけて探すような話題をコラムという形で提供してくれます。しかも、いいタイミングで！ コラムは、全部で38ありますが、コミケの評論島で頒布されているような内容なので、これだけでも1000円くらいは出したくなりました。</p>
<p>&nbsp;</p>
<h1>ここはもうちょっと</h1>
<h2>「プログラム入門書」ではないので、タイトルは誤解ないように</h2>
<p>確かに、TypeScript の入門書ではあるんですが、プログラムの入門書ではありません。</p>
<p>また、あくまでも「プロを目指す人のため」です。プロを目指しているなら、型の概念も知っているし、TypeScriptに興味があるということは、JavaScript の概要を知っていて当然ということだと受けました。</p>
<p>TypeScript の理解には、TypeScript ネイティブのシステムが少ない現状、JavaScript との関係性の理解は不回避ですが、本書のJavaScript に関する記載は、5ページのみです。</p>
<p>型については「プリミティブ型」の解説から始まるような構成です。プログラム初心者は、他のJavaScript入門書などを併せて用意した方が良いでしょう。</p>


medium_81ZkGOHcf6L-768x972.jpg

small_81ZkGOHcf6L-768x972.jpg

thumbnail_81ZkGOHcf6L-768x972.jpg

81ZkGOHcf6L-768x972.jpg

書評: プロを目指す人のためのTypeScript入門 技術評論社

<p>普通のcheckboxはこういう感じで表示されてます。</p>

		<div id="crayon-6495402651b00018235234" 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;">
&lt;input type="checkbox"&gt;
&lt;input type="checkbox" checked&gt;</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-6495402651b00018235234-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402651b00018235234-2">2</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-6495402651b00018235234-1"><span class="crayon-h">&lt;</span><span class="crayon-e">input </span><span class="crayon-i">type</span>=<span class="crayon-s">"checkbox"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402651b00018235234-2"><span class="crayon-h">&lt;</span><span class="crayon-e">input </span><span class="crayon-i">type</span>=<span class="crayon-s">"checkbox"</span><span class="crayon-h"> </span><span class="crayon-i">checked</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p><input type="checkbox"><br />
<input type="checkbox" checked></p>
<p>実はcheckboxはcheckedだけじゃなかったです。<br />
三つのステータスがあります。<br />
indeterminateというプロパティです。<br />
<input type="checkbox"> Unchecked <br />
<input type="checkbox" checked> Checked<br />
<input type="checkbox"><script>document.currentScript.previousElementSibling.indeterminate = true</script>Indeterminate</p>
<h2>使い方</h2>
<h3>JavaScript</h2>
<p></p>

		<div id="crayon-6495402651b04956490473" 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;">
var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;</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-6495402651b04956490473-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402651b04956490473-2">2</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-6495402651b04956490473-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">checkbox</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"some-checkbox"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402651b04956490473-2"><span class="crayon-i">checkbox</span><span class="crayon-sy">.</span><span class="crayon-i">indeterminate</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>jQuery</h2>
<p></p>

		<div id="crayon-6495402651b06011742447" 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;">
$("#some-checkbox").prop("indeterminate", true); //jQuery 1.6+</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-6495402651b06011742447-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-6495402651b06011742447-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#some-checkbox"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">prop</span><span class="crayon-sy">(</span><span class="crayon-s">"indeterminate"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//jQuery 1.6+</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>注意点</h2>
<h3>checkedはtrueとfalseどっちもなれる</h3>
<h3>クリックするとindeterminateがはずれるだけじゃなくてcheckedも切り替わる</h3>
<p>indeterminate状態のチェックボックスをクリックした場合の動きはindeterminateがはずれてcheckedの状態が反対になります</p>
<p>indeterminate:true checked:true<br />
クリック<br />
indeterminate:false checked:false<br />
クリック<br />
indeterminate:false checked:true</p>
<p>indeterminate:true checked:false<br />
クリック<br />
indeterminate:false checked:true<br />
クリック<br />
indeterminate:false checked:false<br />
クリック<br />
indeterminate:false checked:true</p>
<p><script async src="//jsfiddle.net/sfshu/41zgqL8s/embed/js,html,css,result/dark/"></script></p>
<p>indeterminateはあくまで見た目優先なものだから、Formに使われたら、POSTの結果はcheckedで判定します。</p>
<p>このサイトにjQueryでクリックするとunchecked、indeterminate、checkedの変換できるようにイデアがあります。<br />
<a class="link" href="https://css-tricks.com/indeterminate-checkboxes/">リンク</a><br />
一応ご参考に<br />
<script async src="//jsfiddle.net/sfshu/hj042kpu/embed/js,html,css,result/dark/"></script></p>

checkboxのindeterminate状態

Nuxt.jsをコーディングツールとして使えるか試してみる

JavaScriptでIoTの組み込みプログラミングが学習できるobnizを試してみました

データの可視化ツール Echarts

ネイティブアプリ並みのパフォーマンス！WebAssemblyでフロントエンド開発が変わる

Vue CLIとVue RouterでVueのSPAをはじめる

<h2>スマホのクリックイベント順</h2>
<p>1.touchstart<br />
2.touchmove<br />
3.touchend<br />
4.mouseover (focusを当てた)<br />
5.mousemove (一回のみ)<br />
6.mousedown<br />
7.mouseup<br />
8.click</p>
<p>mousemoveイベントは一回のみ発生しますので、<br />
マウスの移動で出るアニメーションはスマホには出ません。</p>
<p>または、ダブルタップによるズームイン/ズームアウトを検知するため、300ms~350msの遅延が発生します。</p>
<h2>解決方法</h2>
<h3>1.<a href="https://github.com/ftlabs/fastclick ">FastClick.js</a>などlibraryを使う</h3>
<h3>2.以下をページに入れる</h3>
<p></p>

		<div id="crayon-649540264fabb372473436" 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;">
&lt;meta name="viewport" content="width=device-width"&gt;</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-649540264fabb372473436-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-649540264fabb372473436-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"viewport"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"width=device-width"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>そうなるとダブルタップによるズームイン/ズームアウトが無効になります。<br />
<a href="https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay ">サポートされているブラウザ</a></p>
<h3>3.preventDefault()</h3>
<p>タッチイベントを優先し、preventDefault()を呼び出し、<br />
マウスイベントを発生させないようにしています。</p>
<p>参考サイト</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Events/Touch_events/Supporting_both_TouchEvent_and_MouseEvent ">TouchEvent と MouseEvent の両方をサポートする</a><br />
<a href="https://www.html5rocks.com/en/mobile/touchandmouse/ ">Touch And Mouse</a><br />
<a href="https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away ">300ms tap delay, gone away</a></p>

タッチイベント &#038; マウスイベント

<p>以前 AngularJS についてご紹介したとき、バージョンは 1 系でしたが、<br />
バージョン2系で大幅に変更が加わり、現行のバージョン6系では、Angular と名前を変え（JSがなくなった）更に進化を遂げています。</p>
<p>バージョン1では HTML を直接編集して開発を行う方法が取られていましたが、<br />
バージョン2以降では、Angular CLI というコマンドラインのインターフェースで開発を行う方法に変わっています。<br />
更に、JavaScript ではなく、TypeScript でスクリプトを記述するのもAngularの特徴です。</p>
<p>TypeScriptで記述されており、<a href="https://jp.vuejs.org/index.html" target="_blank" rel="noopener">Vue.js</a> や <a href="https://reactjs.org/" target="_blank" rel="noopener">React</a> と比べて学習コストがかかり、<br />
小規模なサイトで気軽に導入するのには向きませんが、</p>
<p>堅牢な構造で、Symfony のようなPHPフレームワークにも似た構造で開発を進められるため、<br />
大規模なサイトでの導入に向いています。</p>
<p>今回は試しに Angular を使って、簡単な管理画面を作ってみました。</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="/demo/ninomiya/140/">DEMO</a></p>
<p>&nbsp;</p>
<p>基本、<a href="https://angular.jp/tutorial" target="_blank" rel="noopener">公式のチュートリアル</a>をもとしていますが、<br />
こちらを作るときに、難しかったテクニックなどについて、<br />
追って紹介させていただく予定です。</p>
<p>&nbsp;</p>
<h2>参考にさせていただいたサイト</h2>
<p><a class="link" href="https://angular.jp/docs" target="_blank" rel="noopener">Angular 公式ドキュメント</a></p>
<p><a class="link" href="https://qiita.com/ksh-fthr/items/e43dd37bff2e51e95a59" target="_blank" rel="noopener">[Angular] サービスを使用してデータをコンポーネント間で共有する</a></p>
<p><a class="link" href="http://jasonwatmore.com/post/2017/04/19/angular-2-4-router-animation-tutorial-example" target="_blank" rel="noopener">Angular 2/5 &#8211; Router Animation Tutorial &amp; Example | Jason Watmore&#8217;s Blog</a></p>
<p>&nbsp;</p>
<h3>↓しっかり組みたいけど、部分導入から始めるのであれば</h3>
<p><a class="link" href="https://launchcart.jp/blog/react-hooks%e3%81%ab%e3%82%88%e3%82%8bflux%e3%81%a7%e3%82%bf%e3%83%96%e3%82%92%e4%bd%9c%e3%82%8b%e3%81%be%e3%81%a7/" target="_blank" rel="noopener">React HooksによるFluxでタブを作るまで | LaunchCart | 越境EC専用カート</a></p>


大規模なシステムの管理画面の開発にAngularが良さそう

<p>React Nativeをいずれ試そうと考えていた所、Vue Nativeなるものが存在しているということを先日知りました。</p>
<p><a href="https://vue-native.io/" target="_blank">Vue Native</a></p>
<h2>React Native</h2>
<p><a href="https://facebook.github.io/react-native/" target="_blank">React Native</a></p>
<p>実はReact Nativeを知ったのもそんな前のことではなく、<br />
整理のためにどんなものか簡潔にいうと、<br />
・reactでアプリ(iOS,Android)が作れる、しかも一つのコードで。<br />
・つまり、Javascriptでアプリが作れる！<br />
・エディタも特に縛りはない<br />
・Chromeでのデバックもできる<br />
・もちろん、Reactの書き方を知っていなければならない</p>
<p>javaやswiftを知らずともアプリが作れるという非常に魅力的な存在です。<br />
私はその辺りの言語に手を伸ばすのは控えており、おのずとアプリ制作に目を向けてなかったのですが、javascriptでできるのであれば話は別で、自分でも作れることが可能であればいずれやってみたいと思っていました。</p>
<h2>Vue Native</h2>
<p>そして冒頭述べた、Vue Nativeの存在を知りVueでも可能ということにさらなる衝撃を受けました。</p>
<p>今学ぼうとしている順番としては、<br />
1.Vue + Nuxt<br />
2.React + Redux<br />
3.React Native<br />
だったので、React Nativeはまだ先でした。</p>
<p>このVue Nativeの存在で、<br />
1.Vue + Nuxt<br />
2.Vue Native<br />
3.React + Redux<br />
4.React Native<br />
に変更しようかなと考えています。</p>
<p>このVue Nativeは、React NativeのAPIを使用しているのことなので、<br />
感覚的にはReact NativeだけどVueで書けるようになった、みたいな感覚なのでしょうか？</p>
<p>まだ試すことができていないので、<br />
試されている記事を紹介します。</p>
<p><a href="https://qiita.com/nitaking/items/5c6fb6990d3bdb5769cc" target="_blank">Vue NativeでTodoアプリを作ろう その１ &#8211; Qiita</a><br />
<a href="https://qiita.com/taquaki-satwo/items/523f65723cf2bf7b049a" target="_blank">さっそくVue NativeでHello Worldしてみた &#8211; Qiita</a><br />
<a href="https://note.mu/ymfn4685/n/ne71a120b346f" target="_blank">話題のVue Nativeでサクッと「Hello World」してみた｜とっとこふな太郎＊⊿｜note</a></p>
<h2>Vue + Nuxt の話</h2>
<p>先程述べた様に、今はVue + Nuxtをやっています。<br />
Nuxtの話はこちら<br />
<a href="https://ja.nuxtjs.org/guide" target="_blank">はじめに &#8211; Nuxt.js</a></p>
<p>今回、一つのアウトプットして、<br />
<a href="https://qiita.com/aytdm/items/0096e497837ec3aa8b35#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88" target="_blank">Nuxt.jsでQiita投稿一覧サービスを作る &#8211; Qiita</a><br />
こちらをがっつり参考にして試しに制作してみました。</p>
<p>少し手を加えたりしましたが、制作したもの以下からご覧になれます。<br />
<a href="http://try.alan-trigger.info/" target="_blank" class="demo">DEMO</a></p>
<p>CSSのフレームワーク「element」を使用しているので、簡単かつキレイにUIが作れています。</p>


React NativeのVue版、Vue Nativeというものが存在していた

DOMmy.js

large_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

medium_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

small_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

thumbnail_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

簡単なメモ帳に、markdown形式、ダウンロード、削除のモーダルの機能を追加してみた

medium_nino_eye130625.png

small_nino_eye130625.png

thumbnail_nino_eye130625.png

nino_eye130625.png

Three.jsで360°パノラマ動画を表示する

フロントエンドのフレームワーク「materialize」を使って簡単なメモ帳を作ってみた

<p class="code-line">2010年12月に WebGL が Chrome で利用可能となり、<br />
2011年には3月に Firefox、7月に Safari で利用可能となり、<br />
2013年10月には IE の最終版で WebGL も利用可能な IE11 が登場し、<br />
一般的なほとんどのブラウザで WebGL が利用可能となりました。</p>
<p class="code-line">それから5年経った2018年、ようやく GPU などのハード面でも WebGL の動作環境が一般的に整い、<br />
今、WebGL の実装の機会が増え、必要性も求められつつあります。</p>
<p class="code-line">私もそんな状況も踏まえ、WebGL の技術習得を本格的に目指そうと思い、<br />
WebGL のライブラリである Three.js について、これまでも何度か勉強してきたのですが、<br />
Three.js の 公式 DEMO をコピーして画像やモデルを差し替える程度に留まってしまい、<br />
技術を応用して新たに何かを作り出すというところまで行きつけずにいました。</p>
<p class="code-line">これはひょっとして、WebGL そのものや、3D グラフィックの仕組みについて理解できていないのが原因なのではないかと思うようになり、<br />
改めて素の WebGL について、学ぶことにいたしました。</p>
<p class="code-line">WebGL については、以下のサイトを中心に学ばせていただきました。<br />
<a class="link" title="https://wgld.org/" href="https://wgld.org/" target="_blank" rel="noopener">wgld.org</a><br />
（非常に詳しく、わかりやすく、これから WebGL を学ぶ方にとてもおすすめです。）</p>
<p class="code-line">こちらを中心に学ばせていただいた内容を基に、<br />
WebGL の基本の基本となる仕組みについて、私なりにまとめてみました。</p>
<ol>
<li class="code-line"><a href="#webgl1">WebGL とは</a></li>
<li class="code-line"><a href="#webgl2">WebGL における描画までの手順</a></li>
<li class="code-line"><a href="#webgl3">GLSL(OpenGL Shading Language) について</a></li>
<li class="code-line"><a href="#webgl4">シェーダーに渡す情報の基本となるモデル・ビュー・プロジェクションについて</a></li>
</ol>
<h2 id="webgl1" class="code-line">1. WebGL とは</h2>
<p class="code-line">WebGL とは、WEB ページ上で、OpenGL ES 2.0 を扱えるようにするための、JavaScript API のことです。<a title="https://ja.wikipedia.org/wiki/OpenGL" href="https://ja.wikipedia.org/wiki/OpenGL" target="_blank" rel="noopener">OpenGL</a> とは、GPU による高速な 2D・3D の画像描画処理を行い、画面に表示するための仕組みを提供しているライブラリで、オープン標準として、多くの GPU で利用可能です。そのため、WebGL を利用すると、WEB ページ上で高速な 2D・3D の画像描画処理が可能になります。<br />
WebGL で扱うことになる OpenGL ES 2.0 では、プログラマブルシェーダーを利用できるので、柔軟な描画を実現することができます。ただ、プログラマブルシェーダーの利用には <a href="https://ja.wikipedia.org/wiki/GLSL" target="_blank" rel="noopener">GLSL(OpenGL Shader Language)</a> というＣ言語ベースのプログラム言語での記述が必要となります。</p>
<h2 id="webgl2" class="code-line">2. WebGL における描画までの手順</h2>
<ol>
<li class="code-line">HTML から Canvas 要素を取得</li>
<li class="code-line">Canvas から WebGL コンテキストの取得</li>
<li class="code-line">シェーダーのコンパイル（シェーダーは GLSL で記述）</li>
<li class="code-line">モデルデータを用意（各頂点の座標・色・法線など）</li>
<li class="code-line">VBO(Vertex Buffer Object) の生成と通知</li>
<li class="code-line">（ポリゴンを扱う場合）IBO(Index Buffer Object) の生成と通知</li>
<li class="code-line">座標変換行列の生成と通知</li>
<li class="code-line">描画命令の発行</li>
<li class="code-line">Canvas を更新してレンダリング</li>
</ol>
<p class="code-line">参考: <a title="https://wgld.org/d/webgl/w014.html" href="https://wgld.org/d/webgl/w014.html" target="_blank" rel="noopener">wgld.org | WebGL: ポリゴンのレンダリング</a> より改変</p>
<h2 id="webgl3" class="code-line">3. GLSL(OpenGL Shading Language) について</h2>
<p class="code-line">GLSL(OpenGL Shading Language) は、OpenGL ES 2.0 以降で標準実装されたプログラマブルシェーダーを記述するためのプログラム言語です。 GLSL で記述するシェーダーは、以下の二つです。</p>
<ol>
<li class="code-line">頂点シェーダー: 頂点に関する情報</li>
<li class="code-line">フラグメントシェーダー: 色の情報 GLSL では描画処理を行うためのデータの型や組込関数が用意されています。以下はデータの一例です。</li>
</ol>
<h3 id="" class="code-line">変数の修飾子</h3>
<ul>
<li class="code-line">attribute 修飾子: 頂点の情報をシェーダー側で受け取る変数</li>
<li class="code-line">uniform 修飾子: すべての頂点に一律で渡す情報を渡すことが可能（モデル・ビュー・プロジェクションをかけ合わせた座標変換行列を WebGL から渡すのに利用）</li>
<li class="code-line">varying 修飾子: 頂点シェーダーとフラグメントシェーダーの橋渡し</li>
</ul>
<h3 id="" class="code-line">変数の型</h3>
<ul>
<li class="code-line">vec*: ベクトル; vec2 〜 vec4</li>
<li class="code-line">mat*: 正方行列; mat2 〜 mat4</li>
<li class="code-line">int: 整数</li>
<li class="code-line">float: 浮動小数点</li>
<li class="code-line">bool: 真偽</li>
</ul>
<p>GLSL の例</p>
<h4>頂点シェーダー</h4>
<p></p>

		<div id="crayon-649540264dae1786875938" 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><span class="crayon-language">C</span></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;">
attribute vec3 position;
attribute vec4 color;
uniform   mat4 mvpMatrix;
varying   vec4 vColor;

void main(void) {
  vColor = color;
  gl_Position = mvpMatrix * vec4(position, 1.0);
}</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-649540264dae1786875938-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-2">2</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-4">4</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-6">6</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-8">8</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-9">9</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-649540264dae1786875938-1"><span class="crayon-m">attribute</span><span class="crayon-h"> </span><span class="crayon-e">vec3 </span><span class="crayon-i">position</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-2"><span class="crayon-m">attribute</span><span class="crayon-h"> </span><span class="crayon-e">vec4 </span><span class="crayon-i">color</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-3"><span class="crayon-e">uniform&nbsp;&nbsp; </span><span class="crayon-e">mat4 </span><span class="crayon-i">mvpMatrix</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-4"><span class="crayon-e">varying&nbsp;&nbsp; </span><span class="crayon-e">vec4 </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-6"><span class="crayon-t">void</span><span class="crayon-h"> </span><span class="crayon-e">main</span><span class="crayon-sy">(</span><span class="crayon-t">void</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">vColor</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gl_Position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">mvpMatrix</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-e">vec4</span><span class="crayon-sy">(</span><span class="crayon-i">position</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-9"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h4>フラグメントシェーダー</h4>
<p></p>

		<div id="crayon-649540264dae6022538408" 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><span class="crayon-language">C</span></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;">
precision mediump float;
varying vec4 vColor;
void main(void) {
  gl_FragColor = vColor;
}</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-649540264dae6022538408-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae6022538408-2">2</div><div class="crayon-num" data-line="crayon-649540264dae6022538408-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae6022538408-4">4</div><div class="crayon-num" data-line="crayon-649540264dae6022538408-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-649540264dae6022538408-1"><span class="crayon-e">precision </span><span class="crayon-e">mediump </span><span class="crayon-t">float</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae6022538408-2"><span class="crayon-e">varying </span><span class="crayon-e">vec4 </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae6022538408-3"><span class="crayon-t">void</span><span class="crayon-h"> </span><span class="crayon-e">main</span><span class="crayon-sy">(</span><span class="crayon-t">void</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae6022538408-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gl_FragColor</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae6022538408-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2 id="webgl4" class="code-line">4. シェーダーに渡す情報の基本となるモデル・ビュー・プロジェクションについて</h2>
<p>WebGL での描画処理までの過程では、シェーダーに頂点情報を渡す必要がありますが、<br />
その頂点情報はモデル・ビュー・プロジェクションの３つの座標を掛け合わされた情報で、<br />
WebGL を理解する上でこの３つについての理解はとても重要になりますので、ご紹介いたします。</p>
<p><a href="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13909" src="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png" alt="" width="725" height="495" srcset="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png 725w, /uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6-300x205.png 300w, /uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6-228x156.png 228w" sizes="(max-width: 725px) 100vw, 725px" /></a></p>
<p class="code-line code-active-line">モデルとは、描画する対象のことです。モデルの座標を回転させたりして変換することをモデル変換と呼びます ビューとは、対象を撮影するカメラにあたります。こちらの変換はビュー変換と呼びます。 プロジェクションとは、描画する範囲や遠近の状態のことです。こちらの変換はプロジェクション変換と呼びます</p>
<p>&nbsp;</p>
<p>↓ 参考までに、学習中に作った DEMO です。<br />
<a class="demo" href="https://sterfield.co.jp/demo/ninomiya/138/">DEMO</a></p>
<p>ソース元: <a href="https://wgld.org/d/webgl/w036.html" target="_blank" rel="noopener">wgld.org | WebGL: 点や線のレンダリング</a></p>

small_0594cb54b580680d3862632e4299b9e6.png

thumbnail_0594cb54b580680d3862632e4299b9e6.png

0594cb54b580680d3862632e4299b9e6.png

WebGLの仕組みについてまとめ直してみました

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #JavaScript

2025/05/22

2023/10/05

2023/09/22

2022/08/06

2019/06/12

2019/03/12

2019/02/19

2019/01/09

2019/01/09

2018/12/12

2018/11/14

2018/09/15

2018/08/23

2018/07/11

2018/07/11

2018/07/11

2018/06/13

2018/05/10