## はじめに
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を再帰的に呼び出す方法を検証してみた

## はじめに

ChatGPT API 呼び出しを含むコードのユニットテストは、レスポンスが一定でないため難しいと思われがちですが、いくつかのポイントを押さえることで実装可能です。本記事では、Jest を用いた ChatGPT API のユニットテスト実装方法について、実例を交えながら解説します。

## 対象読者

- ChatGPT API を利用する開発者
- Jest を用いたユニットテストの経験者
- API 連携を含むコードのテストに課題を感じている方

## 前提知識

- JavaScript の基本的な知識
- Jest を用いたユニットテストの経験
- ChatGPT API の利用経験

## 実装例

ChatGPT API を利用したコードのテスト実装例として、2 つの入力を比較して大きい方を返す関数 `greaterOf` のテストコードを作成します。

**テスト対象のコード (greaterOf.js)**

```javascript
import OpenAI from "openai";

/**
 * OpenAIのAPIを使用して2つの入力を比較し、大きい方を返します。
 */
const greaterOf = async (
  openai: OpenAI,
  a: string,
  b: string
): Promise<string> => {
  const chatCompletion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    response_format: { type: "text" },
    messages: [
      {
        role: "system",
        content: `1件目の入力と2件目の入力を比較して大きい方の入力をそのまま返してください。`,
      },
      {
        role: "user",
        content: a,
      },
      {
        role: "user",
        content: b,
      },
    ],
  });

  return chatCompletion?.choices?.[0]?.message?.content?.trim() ?? "";
};

export default greaterOf;
```

**テストコード (greaterOf.test.js)**

```javascript
import OpenAI from "openai";
import greaterOf from "./greaterOf";

const runTests = process.env.CHAT_GPT_TEST;

(runTests ? describe : describe.skip)("greaterOf", () => {
  const openai = new OpenAI({
    organization: "********", // API接続情報を外部から注入
    project: "********", // API接続情報を外部から注入
    apiKey: "********", // API接続情報を外部から注入
  });

  test.each`
    a                     | b                         | expected
    ${"木星"}             | ${"土星"}                 | ${"木星"}
    ${"北海道"}           | ${"スコットランド"}       | ${"スコットランド"}
    ${"セーム・シュルト"} | ${"シャキール・オニール"} | ${"シャキール・オニール"}
  `("greaterOf($a, $b) should return $expected", async ({ a, b, expected }) => {
    for (let i = 0; i < 3; i++) {
      const result = await greaterOf(openai, a, b);
      expect(result).toBe(expected); // 結果を検証
    }
  });
});
```

## 実装のポイント解説

- **テスト対象の関数は同じ入力に対して同じ出力を返すように設計する:** 出力が一定にならない関数の動作はテストケースで確認するのが難しいです。
- **API 接続情報の外部注入:** テストコードでは、API キーなどの接続情報を環境変数から取得しています。これにより、本番環境とテスト環境で異なる設定を使用できます。
  - **対応箇所:** テストコードの `const openai = new OpenAI({ ... });`
- **テストデータの準備:** `test.each`を用いて、複数のテストケースを簡潔に記述しています。各テストケースでは、入力値 `a`、`b` と期待される出力値 `expected` を定義しています。
  - **対応箇所:** テストコードの `test.each`
- **繰り返し実行:** 各テストケースを 3 回繰り返して実行しています。ChatGPT API のレスポンスは変動する可能性があるため、複数回実行することで結果の安定性を確認しています。
  - **対応箇所:** テストコードの `for (let i = 0; i < 3; i++) { ... }`
- **テストのスキップ:** 環境変数 `CHAT_GPT_TEST` が設定されている場合のみテストが実行されるようにしています。これにより、CI 環境などで API キーを保護し、テスト実行時間を短縮できます。
  - **対応箇所:** テストコードの `(runTests ? describe : describe.skip)("greaterOf", () => { ... });`

## まとめ

本記事では、Jest を用いた ChatGPT API のユニットテスト実装方法について解説しました。API 接続情報の外部注入、テストデータの準備、繰り返し実行、テストのスキップなどのポイントを押さえることで、ChatGPT API を含むコードのテストを効果的に行うことができます。

ユニットテストはコードの品質向上に不可欠です。ChatGPT API を利用したアプリケーション開発においても、ユニットテストを積極的に導入し、より信頼性の高いソフトウェア開発を目指しましょう。

small_OpenAI-black-monoblossom.png

thumbnail_OpenAI-black-monoblossom.png

OpenAI-black-monoblossom.png

Jest で実装する ChatGPT API のユニットテスト

## はじめに
サイトの監視アラート通知をメールで受け取ると埋もれがちなので、普段使っているチャットツールで受け取りたいということがあります。

今回は、[さくらクラウドのシンプル監視](https://cloud.sakura.ad.jp/products/simple-monitor/)のアラート通知をGoogle Chatで受け取る方法を紹介します。

シンプル監視はSlackのみを公式にサポートしています。弊社ではGoogle Chatをメインで利用しているため、SendGridとGoogle Apps Scriptを活用し、Google Chatにアラート通知を送信する仕組みを構築しました。この方法であれば、追加費用をかけずに、柔軟なカスタマイズが可能です。

以下、具体的な設定方法を解説します。

## 概要 
![Overview](https://cont.sterfield.co.jp/uploads/overview_f0a47bc2aa.png) 

図のとおりシンプル監視からのメール通知をSendGridで受信して、そこからGoogle App Sriptを経由してGoogle Chatに書き込む仕組みです。

### ポイント
- シンプル監視のWebhook通知は、ZapierやIFTTT経由でGoogle Chatに通知できますが、2024年12月現在は有料プランが必要なため、今回は無料のメール通知を利用します。
- SendGridのInbound Email Parse Webhook自体は無料で利用可能ですが、SendGrid自体のアカウント開設には審査が必要となっています。また、Inbound Email Parse Webhookを利用するためには、SendGrid上でドメイン認証を行ったドメインのメールアドレスのみ設定可能です。詳細は[SendGridのヘルプ](https://sendgrid.kke.co.jp/docs/User_Manual_JP/Settings/parse.html)を参照してください。
- Google Chatで外部からWebhookを受け取る機能は無料版では使えません。有料のGoogle Workspaceを契約している必要があります。

## Google ChatのWebhook設定
スペースの設定画面でアプリと統合メニューを開いた画面で下の方にあるWebhookを追加からWebhookを追加してリンクをコピーしておきます。

![Google Chat](https://cont.sterfield.co.jp/uploads/google_chat_29b557565c.png) 

## Google App Scriptの設定
コピーしたリンクを使って下記のスクリプトを作成して外部から起動できるようにデプロイしてください。シンプル監視から送られるメールのエンコードはISO-2022-JP(いわゆるJISコード)のため、文字コード変換が必要です。

```js
function doPost(e) {
  const { text } = e.parameter;

  // Google ChatのWebhook URL (事前にコピーしたURLを貼り付ける)
  const webhookurl = 'https://chat.googleapis.com/v1/spaces/**********/messages?key=**********';

  // JISコードで送信されてくるメールデータを、Google Chatで扱えるUTF-8に変換します。
  const data = {
    'text': Utilities.newBlob(text).getDataAsString("JIS")
  };

  const options = {
    'method': 'post',
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    'payload': JSON.stringify(data)
  };
  UrlFetchApp.fetch(webhookurl, options);
}
```

デプロイが完了したらウェブアプリのURLをコピーしおきます。

![deploy](https://cont.sterfield.co.jp/uploads/deploy_d3a68796ab.png) 

## SendGridの設定
SendGridにログインして、Setting > Inbound Parseを開いてAdd & Hostボタンを押して、下記の設定値を入力してWebhook設定を追加します。

Receiving Domain:

シンプル監視からのメール通知を受け取るためのメールのドメイン

Destination URL:

前項でコピーしておいたウェブアプリのURL

![sendgrid](https://cont.sterfield.co.jp/uploads/sendgrid_1a2731c45b.png) 

## シンプル監視の設定
さくらのクラウドの設定画面でオプション > メールアドレスを開いて、前項で設定したドメインのメールアドレスでアラートの通知を受け取るように設定します。

![simple](https://cont.sterfield.co.jp/uploads/simple_b79b0c893e.png) 

アラートの通知設定はデフォルトのまま（通知方法：メール、メールタイプ：テキスト）にしておきます。

## アラート通知の例
シンプル監視でアラートが発生した際にGoogle Chatに下記の通知が表示されたら設定成功です。

![example](https://cont.sterfield.co.jp/uploads/example_fe539f6c67.png) 

## まとめ
以前はIFTTTの有料プランを利用して通知の自動化を行っていましたが、今回構築した新しい仕組みによって、運用コストの削減が実現できました。

今後は、Google App Scriptのコードをカスタマイズしてサイトごとに通知先スペースをわけて複数サイトのアラート通知をうまく受け取れる仕組みの構築を進めてもっと活用していこうと思います。皆様も是非参考にしてみてください。

## 参考リンク
- [お知らせをWebhookでGoogle Chatに通知してみよう &ndash; Shopらんサポートサイト](https://shoprun.support-dreamarts.com/hc/ja/articles/17847405156377-%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%82%92Webhook%E3%81%A7Google-Chat%E3%81%AB%E9%80%9A%E7%9F%A5%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)
- [ISO-2022-JP（7bit JIS）のeml形式データをApps Scriptで解読する #JavaScript - Qiita](https://qiita.com/takatama/items/696557f4eb51d4e50b8f)

medium_3-4-2line-rgb-blackback-solidcolor.png

small_3-4-2line-rgb-blackback-solidcolor.png

thumbnail_3-4-2line-rgb-blackback-solidcolor.png

3-4-2line-rgb-blackback-solidcolor.png

さくらのシンプル監視のアラートをGoogle Chatで受け取る方法

## はじめに
[Cloudflare Workers](https://www.cloudflare.com/ja-jp/)の実践的なサンプルコードを事例を交えて紹介します。

すでにCloudflareを利用していてCloudflare Workersのことは知っているが、使い所が分からず手が出せてない方の参考となれば幸いです。

以下で紹介するコードはWebフレームワークの [Hono](https://hono.dev/) を使って実装しています。Cloudflare Workersにいち早く対応し、シンプルかつ型システムを活用した堅牢なコードが書けるのでおすすめです。

## サンプル1: オブジェクトストレージにデプロイしたHTMLにBASIC認証をかける

問題：
AWSやGoogle Cloudのようなクラウド事業者が提供しているオブジェクトストレージでWebサイトを構築しているが、そのサイトにBASIC認証をかけたい。

解決方法：WebサイトのネームサーバーをCloudflareに移行した上で、下記のWorkersを作成します。Workersの[ルート設定](https://developers.cloudflare.com/workers/configuration/routing/#matching-behavior)を行い、Workers→オブジェクトストレージの流れでリクエストが処理されるように設定します。

```
import { Hono } from "hono";
import { basicAuth } from "hono/basic-auth";

const app = new Hono<{ Bindings: CloudflareBindings }>();

app.all("*", basicAuth({ username: "username", password: "password" }), (c) => {
  return fetch(c.req.url);
});

export default app;
```

## サンプル2: ルールにそってURLを書き換えてリダイレクトする
問題：複数のサブドメインにわかれているシステムを運用しているが、外部のシステムと連携するにあたって、連携先のドメインが1つしか登録できない。

解決方法：下記のWorkersを作成して[カスタムドメイン設定](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/)を行い、そのドメインを外部連携先として利用します。このサンプルコードでは、URLを加工してリダイレクトしていますが、マッピング表をコード上に持つようにしたり、外部に保存したマッピングを参照してリダイレクトすることも可能です。

```
import { Hono } from 'hono';

const app = new Hono();
const domain = "example.com";

app.get('/:subdomain/', (c) => {
	const { subdomain } = c.req.param();
	const url = `https://${subdomain}.${domain}/`;
	return c.redirect(url);
});

export default app;
```

使用例：
```
https://redirect.example.com/aaa/ => https://aaa.example.com/
https://redirect.example.com/bbb/ => https://bbb.example.com/
```

## サンプル3: APIとして使える簡易的なKVS
問題：一時的なデータの保存場所としてMemcachedやRedisのようなKVSが必要になったが、サーバーを立ち上げたりクラウド上のサービスを使うとなると費用がかかるので、お金がかからない方法で検証までは行いたい。

解決方法：Cloudflare Workersに付随するサービスであるCloudflare Workers KV(以下KV)を使ってデータの保存と読み取りを行うWorkersを作成します。事前にKVの[名前空間の作成](https://developers.cloudflare.com/queues/tutorials/web-crawler-with-browser-rendering#2-create-kv-namespace)を行います。その後、下記のコードのWorkersを作成してデプロイします。

```
import { Hono } from "hono";

export interface Bindings {
  kvs: KVNamespace;
}

const app = new Hono<{ Bindings: Bindings }>();

app.post("/set/:key", async (c) => {
  const key = c.req.param("key");
  const obj = await c.req.json();

  await c.env.kvs.put(key, JSON.stringify(obj));

  return c.json({});
});

app.get("/get/:key", async (c) => {
  const key = c.req.param("key");
  return c.json(JSON.parse((await c.env.kvs.get(key)) || "{}"));
});

export default app;
```

使用例：
```
$ curl -X POST -H "Content-Type: application/json" -d '{"Name":"aaaa", "Age":"100"}' https://kvs-sample.****.workers.dev/set/123
{}

$ curl https://kvs-sample.****.workers.dev/get/123
{"Name":"aaaa","Age":"100"}
```

## まとめ
今回紹介したサンプルはすべて無料プランのCloudflareアカウントでも利用可能です。是非気軽に試してみてください。

## 参考リンク
- [Cloudflare Workersで手っ取り早くBasic認証を設定する](https://qiita.com/AnaKutsu/items/1c8bd0eb938edd3c0e0a)

large_CF_logo_stacked_blktype.jpg

medium_CF_logo_stacked_blktype.jpg

small_CF_logo_stacked_blktype.jpg

thumbnail_CF_logo_stacked_blktype.jpg

CF_logo_stacked_blktype.jpg

Cloudflare Workersの実践的サンプルの紹介

## はじめに
フロントエンドにおいても、製品の品質を向上させ、維持していく上で、テストは必須と言えるほど重要になってきています(参考: <a href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">Frontend Developer Roadmap</a>)。  
テストの状態を計測するよく使われる指標の一つとして、テストのカバレッジ率があります。  
フロントエンドのテストは、主に単体テスト、統合テスト（コンポーネントテスト）、E2Eテストに分けられます。  
Cypressでは基本的にこれらすべてを一元的に実装できるため、テストを書く上で便利です。  
ただ、CypressはJestやJestベースのPlarywrightと違って、標準ではカバレッジレポートを出力できません。  
特にNext.jsでは<a href="https://docs.cypress.io/guides/tooling/code-coverage" target="_blank" rel="noopener noreferrer">公式で紹介されている方法</a>そのままでは計測できなかったので、  
Next.jsとCypressを使ったサイトでテストカバレッジ率を計測する方法について、  
実際に検証しながら整理してみました。

※この記事では、Cypressの導入部分は省略します

## 全体の流れ
1. 計測のためのプラグインを追加する
1. package.json レポートのオプションを追加
1. Cypress の config に計測のための設定をを追加
1. Cypress の 共通設定部分にプラグインの読み込みを追加
1. Next.js の config にプラグインの記述を追加
2. テストを実行し、レポートを表示する

## 計測のためのプラグインを追加する
Cypressでカバレッジ率のタスクを実行するための **@cypress/code-coverage** と Next.jsでレポートを作成するための **swc-plugin-coverage-instrument** をインストールします。
```bash
npm i -D @cypress/code-coverage swc-plugin-coverage-instrument
```

## package.json レポートのオプションを追加
レポートに含めたいファイルや、含めたくないファイルがある場合、以下のように"nyc"の項目を追加して、オプションを指定します。

###### package.json
```diff
{
  "name": "example",
  ︙
  },
+  "nyc": {
+    "extension": [".ts", ".tsx"],
+    "include": ["pages/**/*.tsx", "src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["node_modules/**", "mock-data/**", "cypress/**", "**/*.cy.ts"],
+    "excludeNodeModules": true,
+    "excludeAfterRemap": true
+  }
}
```

## Cypress の config に計測のための設定を追加
cypress.config.ts へ以下のように、コードカバレッジを計測するための設定を追加します。

###### cypress.config.ts
```diff
import { defineConfig } from "cypress";
+ import codeCoverageTask from "@cypress/code-coverage/task";

export default defineConfig({
  env: {
    enableMock: true,
+    codeCoverageTasksRegistered: true
  },
  e2e: {
+    setupNodeEvents(on, config) {
+      codeCoverageTask(on, config);
+      return config;
+    },
    baseUrl: "http://localhost:3000"
  },
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack"
    },
    defaultCommandTimeout: 6000,
+    setupNodeEvents(on, config) {
+      codeCoverageTask(on, config);
+      return config;
+    }
  }
});
```

## Cypress の 共通設定部分にプラグインの読み込みを追加
cypress/support/component.ts や cypress/support/e2e.ts に、  
プラグイン読み込みのコードを追加します。
###### cypress/support/component.ts | cypress/support/e2e.ts
```diff
+ import "@cypress/code-coverage/support";
```

## Next.js の config にプラグインの記述を追加
next.config.js のビルド設定部分にも、プラグインの記述を追加します。

###### next.config.js
```diff
const withImages = require("next-images");

module.exports = withImages({
  trailingSlash: true,
+  experimental: {
+    swcPlugins: [
+      ["swc-plugin-coverage-instrument", {
+        compact: false
+      }]
+    ],
+  },
});
```

## テストを実行して、レポートを表示する
これで、準備ができましたので、実際にテストを実行してレポートを表示してみます。

### テストを実行
テストの script は package.json で以下のように設定しているとします。
```diff
{
  ︙
  "scripts": {
    ︙
+    "cypress": "cypress open",
+    "cypress:e2e": "cypress run --e2e",
+    "cypress:component": "cypress run --component"
    ︙
  },
  ︙
}
```

コンポーネントテストを実行してみます。
```
npm run cypress:component
```
テストが終了すると、以下のディレクトリにファイルが生成されます。  
- coverage
- .nyc_output

coverage/lcov-report/index.html を表示すると、  
以下のようなレポートを確認できます。  
  
 ![](https://cont.sterfield.co.jp/uploads/report_gui_883931f06d.png) 

また、以下のようにコマンドを打つことで、概要を表示できます。
```bash
npx nyc report --reporter=text-summary 
```
  
 ![](https://cont.sterfield.co.jp/uploads/report_cl_7970bcc25b.png) 
状態、分岐、関数、行数など、色々な方向で評価してくれます。

## まとめ
Next.jsでは、バンドラーがSWCなため、公式ドキュメントに従って設定すると実行が難しいことがわかりました。  
ただ、調査を進めることで、レポートの取得が可能であることがわかりました。  
今後はこれを活用し、Next.jsとCypressを組み合わせて効果的なテスト運用を構築していく予定です。  
この組み合わせにおいては、準備が整えば手軽にテストレポートを取得でき、より効率的かつ信頼性の高い開発プロセスを構築できると考えています。  
今回の課題を克服することで、将来的なプロジェクトでの利用をスムーズに進めることが期待できます。  
Next.js ✖️ Cypressの組み合わせを最大限に活かし、テストの品質向上に貢献していきます。

## 参考リンク

- [Frontend Developer Roadmap](https://roadmap.sh/frontend)
- [Code Coverage | Cypress Documentation](https://docs.cypress.io/guides/tooling/code-coverage)
- [swc-plugin-coverage-instrument](https://github.com/kwonoj/swc-plugin-coverage-instrument?tab=readme-ov-file)

small_nino-eye.jpg

thumbnail_nino-eye.jpg

nino-eye.jpg

Next.jsとCypressを使ったWebアプリでテストのカバレッジ率を計測する

### 書籍の情報
- 書籍名: TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
- 著者: 手島拓也、吉田健人、高林佳稀
- 出版社: 技術評論社
- ISBN-13: 978-4297129163
- 発行日: 2022/7/25
- リンク: https://gihyo.jp/book/2022/978-4-297-12916-3

## はじめに
「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」は、開発をより快適・堅牢にするTypeScriptを用いて、React/Next.jsの基礎、最新フロントエンドやWebアプリケーションの開発方法が学べる書籍です。

TypeScriptは、JavaScriptのスーパーセットであり、型システムを備えたプログラミング言語です。型による静的チェックにより、プログラムの欠陥をコンパイル時やデバッグ時に検出することができます。これにより、バグの早期発見や、コードの保守性の向上につながります。TypeScriptはWebアプリケーション、Node.jsアプリケーション、モバイルアプリケーションなどのさまざまなプラットフォームで利用されており、特に大規模で複雑なプロジェクトの開発に適しています。開発者が型安全なコードを書くのを支援し、コードの保守性を向上させるために広く採用されています。

Next.jsは、フルスタックのWebアプリケーションを構築するためのReactフレームワークです。設定に時間を費やすことなく、アプリケーションの構築に集中することができるよう設計されています。Next.jsは、Reactアプリケーションを開発するためのツールセットやサーバーサイドレンダリング（SSR）および静的サイト生成（SSG）の機能を提供し、それらの機能により、SEOの向上、パフォーマンスの向上、セキュリティの向上など、多くの利点を提供します。従って、多くのウェブ開発者によって採用され、高品質のウェブアプリケーションの開発に役立っています。

## こんな方におすすめ

- モダンなWebフロントエンドに興味のある方
- React/Next.jsを初めて使う方、本番に導入したい方
- React/Next.jsとTypeScriptを組み合わせた開発スタイルに興味のある方
- TypeScriptを中心に据えたWebフロントエンド開発に興味のある方
- Atomic DesignやStorybookなど、コンポーネント中心の開発に興味のある方

## 目次

1. Next.jsとTypeScriptによるモダン開発
2. TypeScriptの基礎
3. React/Next.jsの基礎
4. コンポーネント開発
5. アプリケーション開発1〜設計・環境設定〜
6. アプリケーション開発2〜実装〜
7. アプリケーション開発3〜リリースと改善〜
- Appendix Next.jsのさらなる活用

## 各章について

### 1~3章

1章では、Next.jsやTypeScriptを使用したモダンなフロントエンド開発の概要と歴史を紹介しています。歴史の説名を踏まえ、Next.jsの機能に絡めてSSRやSSGの紹介やその必要性に関する説明もされています。

2章では、TypeScriptの基本的な使い方や重要な型について説明されています。また、設定やツールのセットアップについても触れられています。

3章では、Reactの基本的なコンポーネントやフックの書き方やNext.jsの機能の使い方が紹介され、再レンダリングの防止など重要なポイントもカバーされています。

### 4章

この章ではデザインシステムの設計方法であるAtomic Designが紹介され、ReactコンポーネントもAtoms, Molecules, Organisms, Templates, Pagesの5レイヤーに分類することが推奨されています。Atomic Designとあわせて、ファイル分割やコンポーネント設計の参考になるPresentational Component（見た目）とContainer Component（振る舞いロジック）についても説明されました。
あと、styled-componentsスタイルライブラリから、Storybookでのコンポーネント管理、React Testing Libraryでのコンポーネントテストまで、コンポーネント開発のために使われる一連のツールの使い方が説明されています。

### 5~7章、付録

後半からはアプリケーション開発の実践になります。

5章では主にアプリケーション開発に向けての環境構築を行います。Next.jsや前の章で説明があったstyled-components、StorybookとESLintのセットアップとReact Hook Formをはじめ、SWRとMaterial Icons、React Content Loaderなどさまざまなライブラリやツールの導入が紹介されます。

6章は、総435ページで150ページほど占めて本のメイン部分ですが、ほぼコードに構成されていて間に簡単な説明が入ります。まずは、Atomic Designに従って各ページをコンポーネントコンポーネントへと分割して、一番小さい部品であるAtomsから実装していきます。次のMolecules実装も特にロジックを持たないようにしています。Organisms, Templates, Pagesについても同様の構成で進みます。Pagesからは4章にあったPresentational ComponentとContainer Componentの見た目とロジックを別ファイルに分ける方法で実装していきます。加えて、React Testing LibraryでAtoms, Molecules, Organismsレイヤーのユニットテストを書きます。

7章では、まず、5章と6章でつくったアプリケーションをVercel, Heroku, Logflareといったサービスにデプロイする方法の説明されており実際にデプロイして見るのができます。また、SEO対策として、構造化データをページに付与する方法やOGP、sitemap.xmlの生成などを取り扱います。さらに、アクセシビリティ、XSSとかCSRFのセキュリティの説明もされています。

付録には外部サービスの連携活用など、さまざまな内容が説明されています。これらの内容は現場にも役立ち、読者にとって嬉しい情報となっています。

## 感想

既に探り探りでTypeScriptとReact/Next.jsで開発していましたが、本書を読んでから、TypeScriptとReact/Next.jsの組み合わせでの開発経験が浅い私にとっては、良い見本になりました。

本書は、全般的にわかりやすく、実践的な内容で、概観を掴めることができて満足しています。
また、さまざまなライブラリを取り入れて使用できてみたのも、良い点でした。例えば、Next.jsと同じチームで作られているデータ取得のためのReact HooksライブラリであるSWRやローディングを表示するライブラリReact Content Loaderは初めて使用してみて今後の開発にも良い選択肢になると思いました。

ただ、もうちょっと具体的な説明や使う理由などがあったらよかったなと思った部分もありました。例えば、ライブラリの使い方の説明では、なぜそのライブラリを使うのか、そのライブラリのメリットやデメリットなどについて、もう少し詳しく説明があると、理解しやすかったでしょう。

とはいえ、本書は、TypeScriptとReact/Next.jsの両方を学びたい人にとって、最適な入門書であることは間違いありません。本書を参考にして、TypeScriptとReact/Next.jsの開発スキルを磨き、実践で役立てていきます。

以上、『TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発』についての紹介でした。もし、TypeScriptとReact/Next.jsの組み合わせで実際動かしてみながら学びたい方には、ぜひおすすめの一冊です！

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

large_book.png

medium_book.png

small_book.png

thumbnail_book.png

book.png

【書籍紹介】TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

## はじめに
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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #script

2025/05/22

2025/02/21

2024/12/20

2024/09/13

2024/03/01

2023/11/10

2023/10/05

2023/09/22

2022/08/06

2019/06/12

2019/03/12

2019/02/19

2019/01/09

2019/01/09

2019/01/09

2018/12/12

2018/11/14

2018/09/15