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

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)

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アプリケーション開発

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)

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>


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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #script

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

2018/08/23

2018/07/11

2018/07/11