# <input type="datetime-local">



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/z3zxLicEotN02jMdOjeS/origin.webp)

Reactではないですが、Reactでも利用可能です。
Timezoneの機能は様々な要因で削除されているので、タイムゾーン付きの時刻を取得したいのであれば、別の入力と組み合わせる必要があります（詳しくはリンク先を参照）。
パッケージに頼らない実装は長期的なメリットですが、拡張性は劣ります。
個人的には有力な選択肢です。


https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local


# react-datepicker

おそらくもっともメジャーな選択肢。
日付の選択のみで時間の選択はありません。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/JHP6ni19J3iVHnr4pttO/origin.webp)



https://reactdatepicker.com/

https://github.com/Hacker0x01/react-datepicker/


# react-tailwindcss-datepicker


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/dBvA5W4llpbcFtynY36w/origin.webp)

ReactとTailwindcssを使用したDatePicker。
今日などを指定できるショートカットもありますし、日付範囲だけでなく単独日付の指定も可能です。
時間の指定はありません。

https://react-tailwindcss-datepicker.vercel.app/

https://github.com/onesine/react-tailwindcss-datepicker


# react-date-picker


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/EYH2risUZLxOvy1520Nh/origin.webp)

日付選択用のパッケージだが、react-time-pickerも別パッケージとして提供していて連携させられるみたい。

https://projects.wojtekmaj.pl/react-date-picker/

https://github.com/wojtekmaj/react-date-picker

https://github.com/wojtekmaj/react-time-picker


# MUI X Date and Time Pickers

非常に高機能なDatePicker。
日付だけでなく時間の指定も可能です。
名前の通りMUIに依存しているので、MUIを使用しているプロジェクトでは選択肢になります。


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/2LvnezTOr4mV53cZH23O/origin.webp)

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/YsjrT61v9Olp9SjlxUaG/origin.webp)



https://mui.com/x/react-date-pickers/

https://github.com/mui/mui-x


# react-dates

2022年から更新されてないので選択肢から外れそう。

https://github.com/react-dates/react-dates


# react-datetime

2022年から更新されてないので選択肢から外れそう。
メンテナンスが終了したMoment.jsに依存しているのも影響が大きいです。


https://github.com/arqex/react-datetime

[React] 日時選択ライブラリ比較

Tailwind cssで全体の背景色を指定する方法です。

`bg-`で好きな色を指定したうえで、`min-h-[100vh]`で最小の高さを画面の高さに揃えます。

つまり、以下のDivで全体を囲めばいいです。

```ts
<div className="bg-neutral-200 min-h-[100vh]">
```



これを行うと`Navbar`などほかの要素も同じ背景色になってしまいますが、これば他の要素に色が指定されてなくて透明だからです。個別に背景色を指定すれば解決します。


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/xuhXmayntuBu9g4PhZGI/origin.webp)

Tailwind cssで背景全体の色を指定

ブログ投稿サービスである[noh](https://noh.ink/)ではFirebaseを使っているが、Cloud Storageに保存されている画像はCloudflare CDN経由で配信しています。その方法の解説をします。

Firebaseを使っていないCloud Storageでも設定方法はほぼ同じです。


# Cloudflare CDNを使うメリット

- 安い
  - GCPからCloudflareへの通信料金は割引される（[ CDN Interconnect プログラム](https://cloud.google.com/network-connectivity/docs/cdn-interconnect?hl=ja)）
  - Cloudflare CDNは無料で使える。
- 比較的設定が簡単
  - GCPのCloud CDNを使うには多分ロードバランサの設定が必須（使ったことないので間違っていたらすいません）。CloudflareはCNAMEの設定などだけで勝手にキャッシュしてくれて比較的簡単だと思います。

今回はCloud Storage for Firebase を使っていますが、もっと安くしたいのであれば、代わりにCloudflare R2の使用を検討してもいいかもしれません。



# Q&A

## CDNの設定は必ず必要か

A: Cloud StorageはCDNの設定なしでもCDNのような挙動をしてくれるようです（とはいっても通信料金はそのままのはず）。大量のアクセスが無いアプリケーションではなくても困りません。しかし、CDNを経由させることでダウンロード速度の恩恵があったり、大量のアクセスがあったときに料金を安くできます。
また、後で画像のURLを変更しにくいなどの要件があれば早い段階で導入すべきだと思います。例えばこのブログではマークダウン内に画像URLが入っているので、後から画像URLを変更するのはかなり大変です。


## Firebaseのセキュリティルールはどうなるか

A: 今回、バケット内部のオブジェクトすべて（または一部）を公開する設定を行う方法を解説します。これによってFirebaseのセキュリティルールを無視してURLからreadできるようになります(ただし、writeについてはセキュリティルールで制御できます)。公開用のバケットは別のバケットを作成するといいです。

私はデフォルトのバケットを非公開用にしています。こちらはFirebaseのセキュリティルールを使ってreadしています。



# 設定のポイント

- 使用するドメインの所有権の証明が必要です。
- 配信に使用するサブドメインとバケット名は同じにする必要があります。



# 設定方法

## 配信に使用するサブドメインを決定

配信に使用するサブドメインを決定します。先に決めておく理由は、配信に使用するサブドメインとバケット名は同じにする必要があるからです。この記事では`storage-noh-production.noh.ink`とします。

公式ドキュメントにはこのあたりに書かれています。

https://cloud.google.com/storage/docs/request-endpoints?hl=ja#cname



## サブドメインのドメイン所有権の証明

Cloud Storageにサブドメインのバケットを作るためには、ドメイン所有権の証明を行う必要があります。これをせずにFirebaseのコンソール画面で作成を行うと失敗します（`バケットの作成中にエラーが発生しました`としか表示されないので、なんで失敗したかわかりませんでした）。

バケット名の要件のドキュメントに記載されています。

https://cloud.google.com/storage/docs/domain-name-verification?hl=ja

所有権の照明は[Serch console](https://search.google.com/search-console)から行います。基本的にはボタンをポチポチしていけば完了しますが、404が出たり失敗する場合は以下の方法に変更するといいかもしれません。

- 手順のとこで、「Cloudflare」から「任意のDNSプロバイダ」に変更して進める。DNSの設定は名前を`noh.ink`、コンテンツは表示されたTXT レコードを使います。私はこちらで設定しました。
- URL プレフィックスで設定する。サブドメインごとに設定が必要そうです。



## バケットの作成

バケットを追加します。注意点はサブドメイン名をバケット名にします。ここでは`storage-noh-staging.noh.ink`としました。
ロケーションは東京にするならasia-northeast1です。

私は、作成したバケット内のオブジェクトすべてを公開しています。バケット内のすべてのオブジェクトを公開すると、Firebaseのセキュリティルールも無視してアクセス可能になります。該当バケット内に公開したくないオブジェクトを追加しないように注意してください。

私はバケット内のオブジェクトすべてを公開していますが、バケットの一部だけ公開することもできるのでそちらでもいいと思います。

以下のドキュメント通りに設定するだけです。

https://cloud.google.com/storage/docs/access-control/making-data-public?hl=ja#buckets

意図しないファイルが公開されないように、注意して設定してください。



## DNSの設定

DNSにCNAMEを追加します。

| type | name | data |
| -- | -- | -- |
| CNAME | storage-noh-production | c.storage.googleapis.com |

ドキュメントには`c.storage.googleapis.com.`を設定するように書かれていますが、最後のドットは保存すると消えました。

https://cloud.google.com/storage/docs/request-endpoints?hl=ja#cname



## 確認

適当なファイルをFirebase console画面からアップロードします。

アップロードしたファイルにURL経由でアクセスします。
URLは`https://${storageBucketName}/${filePath}`のような感じで、以下の画像のURLは`https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/FJd0PZjcffz6wGdQhyUf/origin.webp`です。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/FJd0PZjcffz6wGdQhyUf/origin.webp)

画像を新しいタブで開いてResponse headersを見てみます。Cloudflare CDN関連のパラメータが確認できます。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/a05ukNpqyM9mYylXKDHl/origin.webp)

何度か再読み込みすると`cf-cache-status:HIT`となり、CDNのキャッシュから配信されていることが確認できました。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/iBNIlusovbgdJwyzoBAV/origin.webp)


# おまけ

## Emulatorを使っている場合について

アクセスするURLは`http://localhost:9199/storage-noh-production.noh.ink/${path}`のようになります。実際には開発環境から本番環境につなぐことはないと思うので、`storage-noh-production.noh.ink`の部分は`storage-noh-development.noh.ink`になると思います。


# 参考

https://cloud.google.com/storage/docs/request-endpoints?hl=ja

https://www.memory-lovers.blog/entry/2021/07/21/110000

Cloud Storage for Firebase でファイルをCloudflare CDN経由で配信する

Three.jsを使った個人的に重宝しているコード集です。

ベクトルAからベクトルBの回転、FPSの固定、複数のカメラを同時にレンダリング、TransformControls の大きさをオブジェクトに対して固定する方法など。



# ベクトルAからベクトルBの回転

追記

Three.jsにはデフォルトでこの機能がありました。

https://threejs.org/docs/#api/en/math/Quaternion.setFromUnitVectors

以下のように実行できます。
```ts
new THREE.Quaternion().setFromUnitVectors(
  fromVec.clone().normalize(),
  toVec.clone().normalize(),
)
```

追記終わり

個人的に重宝してる関数。

```ts
import * as THREE from "three"

export const quaternionAtoB = (a: THREE.Vector3, b: THREE.Vector3) => {
  const normalizedA = a.clone().normalize()
  const normalizedB = b.clone().normalize()

  // ベクトルAとベクトルBの間の軸と角度を計算
  const axis = new THREE.Vector3()
    .crossVectors(normalizedA, normalizedB)
    .normalize()
  const angle = Math.acos(normalizedA.dot(normalizedB))

  // 回転を表すクォータニオンを作成
  const quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle)
  if (isNaN(quaternion.x) || isNaN(quaternion.y) || isNaN(quaternion.z)) {
    return new THREE.Quaternion()
  }
  return quaternion
}
```



# FPSを制限する

FPSLimitter のオブジェクトを作成して、レンダリングループの中でisRenderingを使ってレンダリングするか分岐させます。

```ts
export class FPSLimitter {
  maxFPS: number
  lastFrameTime: DOMHighResTimeStamp

  constructor(maxFPS: number) {
    this.maxFPS = maxFPS
    this.lastFrameTime = performance.now()
  }

  isRendering() {
    const now = performance.now()
    const frameDuration = 1000 / this.maxFPS
    const delta = now - this.lastFrameTime

    if (delta > frameDuration) {
      this.lastFrameTime = now - (delta % frameDuration)

      return true
    }
    return false
  }
}

```

```ts
const fpsLimitter = new FPSLimitter(30)

const animate = () => {
  if (fpsLimitter.isRendering()) {
    renderer.render(scene, camera)
  }

  requestAnimationFrame(animate)
}
animate()
```



# FPSをログに表示

```ts
export class FPSLogger {
  frameCount: number
  prevTime: DOMHighResTimeStamp

  constructor() {
    this.frameCount = 0
    this.prevTime = performance.now()
  }

  update() {
    const currentTime = performance.now()
    this.frameCount++

    if (currentTime >= this.prevTime + 1000) {
      const fps = this.frameCount
      this.frameCount = 0
      this.prevTime = currentTime

      console.log("FPS: " + fps)
    }
  }
}
```

```ts
const fpsLogger = new FPSLogger()

const animate = () => {
  fpsLogger.update()

  requestAnimationFrame(animate)
}
animate()
```



# TransformControls の大きさをオブジェクトに対して固定する

ハックな解決方法になってしまう。
この関数を毎フレーム呼ぶ。

transformControlsPositionはGizmoの中心位置（ワールド座標）。`transformControls.object.getWorldPosition(new THREE.Vector3())`でも多分問題ない。

```ts
import * as THREE from "three"
import { TransformControls } from "three/addons/controls/TransformControls.js"

export const fixWorldSizeOfTransformControls = (
  transformControls: TransformControls,
  transformControlsPosition: THREE.Vector3,
  camera: THREE.PerspectiveCamera,
  baseSize: number,
) => {
  const distance = camera.position.distanceTo(transformControlsPosition)
  const fov = (camera.fov * Math.PI) / 180
  transformControls.setSize(baseSize / (Math.tan(fov / 2) * distance))
}
```



# ダブルクリックでOrbitControlsが壊れる

複数のカメラを使っているときに発生する？
どういった場合に発生するか詳しく検証していないが、以下の方法で解決できた。

```css
/* Disable text selection for all elements */
* {
  user-select: none;
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
}

/* Allow text selection for elements with class "selectable" */
.selectable {
  user-select: auto;
}
```

参考: https://discourse.threejs.org/t/orbitcontrols-double-click-breaks-with-multiple-scenes/54229/6


Reactでインラインスタイル指定するなら以下のように。

```ts
    <div
      style={{
        userSelect: "none",
        MozUserSelect: "none" /* Firefox */,
        msUserSelect: "none" /* Internet Explorer */,
        WebkitUserSelect: "none" /* Chrome, Safari, Opera */,
      }}
    >
```


# 複数のカメラを同時に表示する

複数のCanvasを使用するのはいい方法ではないです。

Canvasの上にDiv要素を重ね、その中にカメラに対応するDiv要素を並べてレンダリングします。

```ts
function resizeRendererToDisplaySize(renderer: WebGLRenderer) {
  const canvas = renderer.domElement
  const width = canvas.clientWidth
  const height = canvas.clientHeight
  const needResize = canvas.width !== width || canvas.height !== height
  if (needResize) {
    renderer.setSize(width, height, false)
  }
  return needResize
}

function setScissorForElement(
  renderer: WebGLRenderer,
  elem: HTMLDivElement | null,
) {
  const canvas = renderer.domElement
  const canvasRect = canvas.getBoundingClientRect()
  const elemRect = elem.getBoundingClientRect()

  // compute a canvas relative rectangle
  const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left
  const left = Math.max(0, elemRect.left - canvasRect.left)
  const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top
  const top = Math.max(0, elemRect.top - canvasRect.top)

  const width = Math.min(canvasRect.width, right - left)
  const height = Math.min(canvasRect.height, bottom - top)

  // setup the scissor to only render to that part of the canvas
  const positiveYUpBottom = canvasRect.height - bottom
  renderer.setScissor(left, positiveYUpBottom, width, height)
  renderer.setViewport(left, positiveYUpBottom, width, height)

  // return the aspect
  return width / height
}
```

```ts
const renderer = new WebGLRenderer({
  canvas: canvasRef.current,
  antialias: true,
})
const scene = new Scene()

const animate = () => {
  resizeRendererToDisplaySize(renderer)
  renderer.setScissorTest(true)

  context.main.camera.aspect = setScissorForElement(
    renderer,
    mainRef.current,
  )
  context.main.camera.updateProjectionMatrix()
  renderer.render(scene, context.main.camera)

  context.sub.camera.aspect = setScissorForElement(
    renderer,
    subRef.current,
  )
  context.sub.camera.updateProjectionMatrix()
  renderer.render(scene, context.sub.camera)

  requestAnimationFrame(animate)
}
animate()
```

```tsx
<div
  style={{
    position: "relative",
    width: "100vw",
    height: "100vh",
  }}
>
  <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />
  <div
    ref={splitedRef}
    style={{
      position: "absolute",
      left: 0,
      top: 0,
      width: "100%",
      height: "100%",
      display: "flex",
    }}
  >
    <div
      ref={subRef}
      style={{
        width: "40%",
        height: "100%",
      }}
    ></div>
    <div
      ref={mainRef}
      style={{
        width: "60%",
        height: "100%",
      }}
    ></div>
  </div>
</div>
```


# TransformControlsのGizmoObjectを取得

`transformControls._gizmo`で取得できなくはないが、プライベートな変数にアクセスするのはお行儀がよくない。個人的には以下のような感じで取得している。複数のGizmoをChildとして持たないはずなので問題はないが、少し変更に弱いコードになってしまう。

```ts
const transformControls = new TransformControls(camera, elem)

const getTransformControlsGizmo = (transformControls: TransformControls) => {
  // return this._gizmo
  for (const child of transformControls.children) {
    if (child instanceof TransformControlsGizmo) {
      return child as TransformControlsGizmo
    }
  }
  return undefined
}

getTransformControlsGizmo(transformControls)
```


Three.jsの便利なハック集

functionで定義した関数とアロー関数ではthisの動作が異なります。

「functionで定義した関数」が呼び出されるとき、その this は呼び出し元に依存します。例えば、イベントリスナー内で this を使用すると、通常はイベントが発生した要素や、グローバルオブジェクト（ブラウザ環境では window）を指します。

アロー関数は、this のスコープをその外側のスコープから継承します。アロー関数内の this は、アロー関数が定義された場所の this をそのまま使用します。これにより、アロー関数内で this の参照を変更せずに、外側の this を利用することができます。

# コード例

以下のコードは`Property 'mousedownPosition' does not exist on type 'Window'.`というエラーになります。
`this`は`Window`になっています。

```ts
export class ModelList extends THREE.Group {
  mousedownPosition: THREE.Vector2 | undefined

  constructor() {
    super()

    window.addEventListener("mousedown", function(event) {
      this.mousedownPosition = new THREE.Vector2(event.clientX, event.clientY)
    })
```

これを動作させようとすると以下のコードになります。アロー関数に変更すれば`this`はクラスオブジェクト自身になります。

```ts
export class ModelList extends THREE.Group {
  mousedownPosition: THREE.Vector2 | undefined

  constructor() {
    super()

    window.addEventListener("mousedown", (event) => {
      this.mousedownPosition = new THREE.Vector2(event.clientX, event.clientY)
    })
```

[JS] functionで定義した関数とアロー関数でthisの扱いは異なる

今回はViteで作ったパッケージにVitePressでドキュメントを作成する方法を解説します。

https://vitepress.dev/

リポジトリ例

https://github.com/yosipy/react-dropzone-vv



# Vitepressを導入する

インストールした後に初期化します。

```bash
npm add -D vitepress
```

```bash
npx vitepress init
```

初期化ではいくつか質問をされます。
VitePressのリポジトリは`./docs`を指定する以外に注意点はありません。

終わったら必要なファイルが生成され、package.jsonにコマンドが追加されます。

```json:package.json
  "scripts": {
    ...
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
```

どこかのタイミングでキャッシュファイルが作られていたら随時gitignoreしてください。

```txt:.gitignore
.vite
docs/.vitepress/cache
```


# VitePressでページを表示する

詳しく説明しないので、ドキュメントを読んでください。難しくないです。
マークダウンを追加するとページを追加でき、「docs/.vitepress/config.ts」でヘッダーやサイドバーの内容を更新します。

以下のような現象があった。

https://noh.ink/articles/fquYwbOIueT38cv14N0V


# VitePressのページにReactのデモを表示する

VitePressの何が素晴らしいって、ドキュメント内にJSを使ったデモを埋め込んで実行させられるところです。
以下のIssueで紹介されてました。

https://github.com/vuejs/vitepress/discussions/2183

以下のようなコードを書きます。
mdファイル内に複雑なTypescriptを書くのはよくないので、ベルファイルに分けています。

```md:docs/introduction/what-is-react-dropzone-vv.md
# What is react-dropzone-vv

Simple React hook to create a drag-and-drop zone for files.
It is simple yet user-customizable.

A similar Package, [react-dropzone](https://github.com/react-dropzone/react-dropzone), is well known.
However, as of 2024, it has been out of date for about two years.
So I did not use react-dropzone for our own products, and used components I created myself. The created component is published as react-dropzone-vv.

react-dropzone-vv is heavily influenced by react-dropzone, but instead of Forking the repository, we rewrote it from scratch.
The purpose of react-dropzone-vv is to provide a simple and easy-to-use HTML5-compliant drag-and-drop zone for files.

# demo

<div ref="el" />

<script setup>
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
import { Introduction } from './Introduction'

const el = ref()
onMounted(() => {
  const root = createRoot(el.value)
  root.render(createElement(Introduction, {}, null))
})
</script>

```

```tsx:docs/introduction/Introduction.tsx
import { FC, useState } from "react"
import {
  useReactDropzoneVV,
  ReactDropzoneVV,
  RejectedClassifiedFile,
} from "../../lib/index"

export const Introduction: FC = () => {
  const [acceptedFiles, setAcceptedFiles] = useState<File[]>([])
  const [fileRejections, setFileRejections] = useState<
    RejectedClassifiedFile[]
  >([])

  const reactDropzoneVV = useReactDropzoneVV({
    accept: "image/*",
    onSelect: async (props) => {
      setAcceptedFiles(props.acceptedFiles)
      setFileRejections(props.fileRejections)
    },
    onError: (e) => {
      console.log(e)
    },
  })

  return (
    <section style={{ border: "solid", padding: "1rem" }}>
      <ReactDropzoneVV
        reactDropzoneVV={reactDropzoneVV}
        style={{
          padding: "2rem",
          border: "dashed",
          backgroundColor: reactDropzoneVV.isDragging ? "#737373" : "#404040",
        }}
      >
        <p>Drag & drop some files here, or click to select files</p>
        <p>{'(Allowed mime type is "image/*"")'}</p>
      </ReactDropzoneVV>

      <div>acceptedFiles</div>
      <ul>
        {acceptedFiles.map((acceptedFile, index) => (
          <li key={index}>{acceptedFile.name}</li>
        ))}
      </ul>
      <div>fileRejections</div>
      <ul>
        {fileRejections.map((fileRejection, index) => (
          <span key={index}>
            <li>{fileRejection.file.name}</li>
            <ul>
              <li>{fileRejection.rejectedCode}</li>
            </ul>
          </span>
        ))}
      </ul>
    </section>
  )
}

```

以下のような画面を表示できます。



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/7tujudDi2CaM2d4YNat3/origin.webp)

こちらから動かすこともできます。

https://react-dropzone-vv.yosidev.com/introduction/what-is-react-dropzone-vv.html



# lib/のコードをdocs/にimportするときにエイリアスを使う

```tsx
import {
  useReactDropzoneVV,
  ReactDropzoneVV,
  RejectedClassifiedFile,
} from "../../lib/index"
```

の部分で毎回相対パスを書くのは面倒なのでエイリアスを設定しましょう。

tsconfig.jsonとvite.config.tsにエイリアスの設定があることを確認してください。

```json:tsconfig.json
    "baseUrl": ".",
    "paths": {
      "@lib/*": ["./lib/*"]
    }
```

```ts:vite.config.ts
    resolve: {
      alias: [{ find: "@lib", replacement: "/lib" }],
    },
```

そしてtsconfig.jsonの`include`に./docsを追加します。

```diff:tsconfig.json
- "include": ["./lib", "./src"]
+ "include": ["./lib", "./src", "./docs"]
```

さらにdocs/.vitepress/config.tsにもaliasの設定を追加します。

```ts:docs/.vitepress/config.ts
import { defineConfig } from "vitepress"

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "react-dropzone-vv",
  description: "...",
  themeConfig: {
    ...
  },
  vite: {
    resolve: {
      alias: [{ find: "@lib", replacement: "/../lib" }],
    },
  },
})

```

これで以下のようにエイリアスインポートできるようになりました。

```tsx
import {
  useReactDropzoneVV,
  ReactDropzoneVV,
  RejectedClassifiedFile,
} from "@lib/index"
```

# ドキュメントのデプロイとホスティング

これに関しては選択肢がたくさんあるので紹介程度に留めます。

ホスティング先の候補としてはおすすめ順にGithub Pages, Cloudflare Pages, Netlifyです。mainブランチにマージされた時に自動的にデプロイしてもいいですが、僕はホスティングしてるサービスの管理画面から手動でデプロイするように設定しています（デプロイ頻度が低いので）。

docs/.vitepress/dist のファイルがアップロードされるように設定するだけなので難しくないと思います。


# 最後に

これで解説は終わりです。

この記事を読んでいるということはパッケージを作っていると思います。

ぜひ頑張ってください！

あと、react-dropzone-vvをよろしく。

https://github.com/yosipy/react-dropzone-vv

Vite で作ったパッケージのドキュメントを Vitepress で作成する

僕は最近JS(TS)を一番書いていますが、最も好きな言語はRubyです。
それは言語自体が高機能であることに加えて、エコシステムが成熟していることが大きいです（枯れているとも言える）。

例えばRubyで以前、yaml_structure_checkerというGem(NpmでいうPackage)を作成したのですが、非常に体験が良いです。
Gemを作る際、用意されているコマンドでひな形を作ると、すぐに機能の開発に取り掛かれます。Railsと同じように、どこにどんなファイルを配置するか決まっているので悩むことがありません。

対して、JSはどうでしょうか。Package制作にかかわらず、非常に多くの選択肢から最適と思うのもを選択しなければいけません。TSかJSか、ViteかWebpackか、[Pure ESM package](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)にするのか、フォルダ構成はどうするのか、tsconfigどうするか。実行エンジンですら選択肢があります。ベストプラクティスが無いというよりは、非常に流れの速い中で常にベストプラクティスが変わり続けているという印象です。

前置きが長くなりましたが、そんな中でViteやVitePress を用いてPackage作成を行ったら非常に体験が良かったです。少ない設定ですぐに開発に取り掛かれ、CJSとESMに対応した出力が可能で、ドキュメントも同じconfigでビルドできます。

今回はVite と VitePress で NPM Packageを作成する方法を解説していきます。


# 各ツールの簡単な紹介

## Viteとは

https://ja.vitejs.dev/guide/why.html

AstroやHonoなどの新しめのフレームワークによく使われているフロントエンドツール（開発サーバーやビルドツール）です。高速かつ少ない設定で動かせるので非常に好きなツールです。

## VitePressとは

https://vitepress.dev/guide/what-is-vitepress

コンテンツ中心の静的サイトを構築するジェネレーター。基本的にはマークダウンを追加していくことで、ほぼコードを書かずにドキュメントサイトなどを構築することができます。マークダウン内にVueやReactのコードを埋め込んで、ドキュメント内でデモプログラムを動かすこともできます（[こんな感じ](https://react-dropzone-vv.yosidev.com/examples/basic-example.html)）。ViteやVitePress自体のドキュメントもVitePressを使って作られてそうです。


# NPM Packageを作成する方法

今回作成するプログラム例

https://github.com/yosipy/react-dropzone-vv

この記事はreact-dropzone-vvというパッケージを作った時の知見をまとめた記事になってます。細かいファイル構成や設定は上記リポジトリも参考にしてください。

作成する構成全体は以下のような感じです。

```
.
├── Dockerfile
├── LICENSE
├── README.md
├── dist
│   ├── index.js
│   ├── index.umd.cjs
│   ├── lib
│   └── tsconfig.package.tsbuildinfo
├── docker-compose.yml
├── docs
│   ├── examples
│   ├── index.md
│   ├── introduction
│   └── public
├── index.html
├── lib
│   ├── ReactDropzoneVV.tsx
│   ├── index.ts
│   ├── types.ts
│   ├── useReactDropzoneVV.ts
│   ├── utils.test.ts
│   └── utils.ts
├── package-lock.json
├── package.json
├── src
│   ├── App.tsx
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.package.json
└── vite.config.ts
```

lib/ はPackageとして公開するコードを入れるフォルダです。
src/ はlibに書いたコードを実際に動かすコードを入れるフォルダです。
docs/ はVitePressに関するファイルが含まれています。
dist/ はlib/ をビルドしたファイルが出力されるフォルダです。

僕はDockerを使って環境を作るのが好きなので関連ファイルがありますが、使わずに直接NodeをインストールしてももちろんOKです（この記事ではDocker使わない説明を書きます）。

# Viteプロジェクトを新規作成

`create vite`コマンドを使って作成します。私の場合は「React」「TypeScript + SWC」を選択しましたが、自身の使いたいものを選んでください。

```bash
npm create vite@latest
```

通常のViteプロジェクトができたので`npm run dev`コマンドを実行すると開発サーバーが立ち上がります。

# ViteプロジェクトをPackage作成できるように変更する

まずはlib/フォルダを作成して好きなコンポーネントや関数を追加しましょう。lib/index.tsでexportしていればOKです。以下のようなイメージです。

```ts:lib/index.ts
export * from "./ReactDropzoneVV"
export * from "./useReactDropzoneVV"
export * from "./utils"
export * from "./types"
```

```ts:lib/utils.ts
...

export const isExtensionMatch = (file: File, extensions: string[]) => {
  const fileName = file.name.toLowerCase()

  return extensions.some((extension) =>
    fileName.endsWith(extension.toLowerCase())
  )
}

export const isMimeTypeMatch = (file: File, mimeTypes: string[]) => {
  const fileType = file.type

  return mimeTypes.some((mimeType) => {
    if (mimeType.includes("/*")) {
      const baseType = mimeType.split("/")[0]

      return fileType.startsWith(baseType + "/")
    }

    return fileType === mimeType
  })
}

...
```

次にlib/に追加したコードをビルドするようにvite.config.tsを変更します。

```ts:vite.config.ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    plugins: [react()],
    resolve: {
      alias: [{ find: "@lib", replacement: "/lib" }],
    },
    build: {
      outDir: "dist",
      lib: {
        entry: "lib/index.ts",
        name: "react-dropzone-vv",
        fileName: "index",
        formats: ["es", "umd"],
      },
      rollupOptions: {
        external: ["react", "react-dom"],
        output: {
          globals: {
            react: "React",
            "react-dom": "ReactDOM",
          },
        },
      },
    },
  }
})


```

解説します。
formatsのデフォルトは` ["es", "umd"]`なので書かなくてもよいです。これでESMとCJS向けにビルドできます。
Reactを使ってなければrollupOptionsとかは丸々いらないです。

以下の設定でsrc/からlib/のコードにエイリアスを使ってimportできるようにしています。

```ts:vite.config.ts
    resolve: {
      alias: [{ find: "@lib", replacement: "/lib" }],
    },
```

tsconfigも変更しましょう。

```json:tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "jsx": "react-jsx",

    "declaration": true,
    "emitDeclarationOnly": true,
    "declarationMap": true,
    "outDir": "./dist",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@lib/*": ["./lib/*"]
    }
  },
  "include": ["./lib", "./src"]
}

```

解説します。
以下の設定で型定義ファイルを出力するようにしています。tscコマンド実行で生成されるようになります。

```json:tsconfig.json
    "declaration": true,
    "emitDeclarationOnly": true,
    "declarationMap": true,
    "outDir": "./dist",
```

先ほどvite.config.tsの設定を変えてエイリアスインポートできるようにしたと思いますが、vite.config.tsの設定だけだとTSがそれを理解できずVSCodeなどで補完できなかったり問題があります。
そこでtsconfig.jsonにもエイリアスの設定を追加しています。

```json:tsconfig.json
    "baseUrl": ".",
    "paths": {
      "@lib/*": ["./lib/*"]
    }
```

最後に`"include": ["./lib", "./src"]`でsrc/だけじゃなくてlib/もビルドの対象にしています。
src/はPackageのビルド結果に必要ないですが、VSCodeの補完とかのためにこの設定は必要です。
とはいえ、パッケージのビルド結果には必要ないので、パッケージビルド時は別のtsconfigを使います。

```json:tsconfig.package.json
{
  "extends": "./tsconfig",
  "include": ["./lib"],
  "exclude": ["./lib/**/*.test.ts"]
}
```

`extends`で指定することで`tsconfig.json`をベースの設定にしつつ、`include`を上書きしてビルド対象をlib/だけに絞っています。


package.jsonのビルドコマンドを更新しましょう。

```json:package.json
  "scripts": {
    "dev": "vite",
    "build": "vite build && tsc -p tsconfig.package.json",
```

`vite build`は実行時にdist/内のファイルを一度消してしまうので、`tsc && vite build`の順番で実行するとtscコマンドで生成された型定義ファイルが消えてしまいます。そこでtscコマンドを後に実行しています。

余談ですが、tsconfigに`incremental: true`や`tsBuildInfoFile`の指定があると、型定義ファイル生成が最適かされて変更差分があったコード分しか型定義ファイルが生成されなくなります。`vite build`と同じdist/に生成している関係上、tsc実行のたびに型定義ファイル全体を生成する必要があります。
https://noh.ink/articles/cuQq3iC5angmpOseGRlA

ここまで出来たら`npm run build`コマンドを実行すると、パッケージに関するコードと型定義ファイルがdist/に生成されます。

```bash
# npm run build

> react-dropzone-vv@0.2.0 build
> vite build && tsc -p tsconfig.package.json

vite v5.3.5 building for production...
✓ 13 modules transformed.
dist/index.js  26.73 kB │ gzip: 7.92 kB
dist/index.umd.cjs  17.85 kB │ gzip: 6.80 kB
✓ built in 135ms
```

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/5hACjFEcWqF68Bx0IEDT/origin.webp)


長くなったのでCI/CDの導入やリポジトリの設定、パッケージをNPMJSで公開する話は別記事になりました。

次は

https://noh.ink/articles/DrVLoQ0rsYKGVmUJEW74

Vite と VitePress でドキュメントまで含めた NPM Packageを作成する(esm, cjs対応)

前回Viteを利用したNPMパッケージ作成方法の解説をしました。

今回はパブリックなリポジトリを前提に基本的に必要だと思うリポジトリの設定とCIを構築しようと思います。


# mainブランチの保護

間違ってマスタープッシュ(mainブランチだけど)したりしないようにしたり、マージにはレビュー必須にします（レビューしてくれるメンバーがいない場合はマージできなくなるので自分はルールから除外します）。

任意のリポジトリの Settings > Branches からルールを追加します。

ルールセット名は適当に入力。後で変えれます。

Targets > Target branches > Branch targeting criteria に main を入力。mainブランチを保護対象にします。

Rules > Require a pull request before merging にチェック。その下はお好みで設定。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/iEKyGMy5d1VnN2V9lo4O/origin.webp)

ステータが失敗の時にマージされたくないので Require status checks to pass にもチェックを入れます。
今は必要なステータスチェックを選択しないといけないみたいです。

Enforcement statusを「Active」にして、一番下のボタンで保存すると、これでmainブランチは保護されました。

しかし、これでは自分自身もPRをマージできなくなりました（自分以外のレビューしてくれるメンバーがいないので）。


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/U9j18xF8NA0BhvYNEUyx/origin.webp)

そこでBypass listに追加して、ルールから自分を除外します。

大抵バイパスするのは「Organization admin
Role」か「Repository admin
Role」でいいと思います。他のメンバーもいるときは適切なものを選んでください（というかほかのメンバーがいるならバイパスしない方が良い）。
Bypass listのとこで「Always allow」と出てますが、「Allow for pull requests only
Select bypass mode
」で充分だと思います。


これで自分自身は1人でマージできるようになりました。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/JyRb44AB8JafaTms8QCS/origin.webp)


# タグの保護

リリース時にタグを使うのがおすすめなのですが、そのタグを他のユーザーがつけられないように保護します。

ブランチ保護と同じような感じです。

タグの作成や更新に制限を掛けて、Bypass lisに自分が含まれるようにしてください。

Enforcement statusをActiveにするのを忘れないでください。


# CIの導入

.github/workflows/ci.yml を追加して、自動テストが実行されるようにします。特に言及してませんが、Vitestを導入してテストを書いてる前提とします。

```yml:.github/workflows/ci.yml
name: CI

on:
  push:

jobs:
  ts-test:
    name: TS Test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
      - name: Cache node modules
        uses: actions/cache@v4
        id: node_modules_cache_id
        env:
          cache-name: cache-node-modules
        with:
          path: ./node_modules
          key: ${{ runner.os }}-npm-${{ env.cache-name }}-${{ hashFiles('./package-lock.json') }}
      - name: npm ci
        if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
        run: |
          npm ci
      - name: Run test
        run: |
          npm run test
      - name: Run build
        run: npm run build

```

特に難しいことはないです。

ややこしそうな部分といえば、npm installの結果をキャッシュしているくらいですか。

ビルドは非常に短い時間で済んでいるので入れてますが、時間がかかるようなら外してもいいと思います。ただ、その場合はtscコマンドは入れておくといいです。


次回は

https://noh.ink/articles/5CDV3XNFUny2C3ieS0v0

作成したNPMパッケージのCI導入とリポジトリの設定（ブランチやタグの保護）

NPMJSでパッケージを公開する方法を説明します。Github Actionsを使って自動デプロイ（CD）させるようにします。


# NPMJSでトークンの発行

NPMJSのアカウントが無ければ作成する。あればログインする。

https://www.npmjs.com/

アカウント作ったらトークンを発行します。

「Classic Token」ではなく「Granular Access Token」を選択します。
「Expiration」は理想的には短い方が良いですが、期限切れして再設定するのは面倒なので自分の許容できる範囲にしてください。異常に長い期間に設定するのはやめた方が良いです。

「Packages and scopes」は「Read and Write」に設定。「Select packages」は最初のリリースは「All packages」にする必要があります（選択するパッケージが存在しないので）。初回リリースを終えたら作成したトークンは破棄して、「Select packages」を「Only select packages and scopes」にしたトークンを使うとよさそうです（そのとき、作成したパッケージを選択してください）。


# Github Actions の設定

Github Actionsで公開するように設定します。以下のドキュメント通りにやります。

https://docs.github.com/ja/actions/publishing-packages/publishing-nodejs-packages

https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions 

Githubの該当リポジトリの設定に行きます。
secrets and variables > Actions secrets and variables > Repository secrets に発行したトークンを追加します（NameはNPM_TOKEN）。

次にActionsの設定YAMLを追加。

```yml:.github/workflows/publish_package_to_npmjs.yml
name: Publish Package to npmjs
on:
  release:
    types: [published]
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write
    steps:
      - uses: actions/checkout@v4
      # Setup .npmrc file to publish to npm
      - uses: actions/setup-node@v4
        with:
          node-version: "20.x"
          registry-url: "https://registry.npmjs.org"
      - run: npm ci
      - name: Build
        run: npm run build
      - run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

```

# リリース作業

mainブランチに`github/workflows/publish_package_to_npmjs.yml`の差分をマージしたら、Releaseから新しいリリースを作成します。

以下のコマンドを実行してタグを付けておくといいです。
しなくてもいいですが、リリースノートを自動で生成できたりするのでお勧すすめです。
ちなみにmainブランチでタグを付けないと以下の画像のようなさみしいリリースノートが生成されます（「There were no pull requests associated with the commits included in this release.」と出る）。

```bash
git checkout main
git pull origin main
git tag -a v0.1.0 -m 'version 0.1.0'
git push origin v0.1.0
```

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/kCNipdgcb4WI0fivyqjo/origin.webp)



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/6Fh1wsdpQVmU9xdnLSFx/origin.webp)

リリースを作成するとActionsが実行されてパッケージが公開されます。

成功しました



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/P9g6R89TJVEbZ8Ocrup6/origin.webp)

https://www.npmjs.com/package/react-dropzone-vv

次回は

https://noh.ink/articles/5azsqR0Vc27BbPPXAd9u

# 失敗したとき

Actionsのログを読んで対処してください。記事の下にいくつか僕の遭遇したエラーと対処方法をメモしています。

もし、Actionsの内容が間違っていて公開に失敗したときは、RerunしてもActionsで実行されるファイルは更新されないので、新しくリリースを作る必要があります。

package.jsonに書かれてるバージョンを変更してコミット、mainブランチに取り込みます。

```bash
git tag -a v0.1.1 -m 'version 0.1.1'
git push origin v0.1.1
```

とした後に同じようにGithubの画面からリリースを作成。




# トークンの権限不足によるエラー

以下のようなエラーが出たら権限が足りてません。

```
npm error code E403
npm error 403 403 Forbidden - PUT https://registry.npmjs.org/react-dropzone-vv - You may not perform that action with these credentials.
npm error 403 In most cases, you or one of your dependencies are requesting
npm error 403 a package version that is forbidden by your security policy, or
npm error 403 on a server you do not have access to.
```

granular-access-tokensでトークンを作成していたのですが、「Only select packages and scopes」を選択していたのがまずかったみたい。「All packages」を選択したトークンを生成して設定します。

初回公開の際は公開されてるパッケージが存在しないので、権限不足になります。
パッケージを公開した後は「Only select packages and scopes」のトークンを使う方がよさそうです。

# 「id-token: write」のないエラー

Github Actionsで公開するように設定するとき、以下のドキュメント通りにやるとエラーになりました。

https://docs.github.com/ja/actions/publishing-packages/publishing-nodejs-packages

```yml:.github/workflows/publish_package_to_npmjs.yml
name: Publish Package to npmjs
on:
  release:
    types: [published]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      # Setup .npmrc file to publish to npm
      - uses: actions/setup-node@v4
        with:
          node-version: "20.x"
          registry-url: "https://registry.npmjs.org"
      - run: npm ci
      - name: Build
        run: npm run build
      - run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

```
npm error code EUSAGE
npm error Provenance generation in GitHub Actions requires "write" access to the "id-token" permission

npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2024-07-28T00_50_45_086Z-debug-0.log
Error: Process completed with exit code 1.
```

前述している通り、以下を追加して対応できます。

```yml
    permissions:
      contents: read
      id-token: write
```

どういった経緯で必要になってるのか興味があれば以下の記事がわかりやすかったです。

https://zenn.dev/bicstone/articles/npm-provenance


# package.jsonの設定不足のエラー

package.jsonの設定が足りないと以下のようなエラーが出ます。

```
npm error code E422
npm error 422 Unprocessable Entity - PUT https://registry.npmjs.org/react-dropzone-vv - Error verifying sigstore provenance bundle: Failed to validate repository information: package.json: "repository.url" is "", expected to match "https://github.com/yosipy/react-dropzone-vv" from provenance
```

次回は

https://noh.ink/articles/5azsqR0Vc27BbPPXAd9u

GitHub Actions 経由でNPM パケージを公開する方法（トークン発行方法の説明付き）

vitepressでエラー出た

`Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.`

バグっぽい
以下のようにフォルダをネストしてindex.mdを孫に作ると発生することが分かった。
```
.
├── .vitepress
├── examples
│   └── accepting-specific-file-types
│       └── index.md
│   └── basic-example
│       └── index.md
└── index.md
```

以下のように`<route名>.md`にすると回避できた

```
.
├── .vitepress
├── examples
│   ├── accepting-specific-file-types
│   ├── accepting-specific-file-types.md
│   ├── basic-example
│   └── basic-example.md
└── index.md
```

[vitepress] the server responded with a MIME type of "text/html"

npm packageを作ろうとしていてちょっとはまったのでメモ
以下のようなコマンドでビルド後に型定義ファイルを生成するようにしていた。

```json:package.json
  "scripts": {
    "build": "vite build && tsc",
```

この時、型定義ファイルが生成されたりされなかったりしてちょっと困ってました。
生成のされ方もソースコードや設定を更新したときだけ型定義ファイルが出力されるので、変更した設定が有効だったのかと勘違いして余計に時間がかかってしまいました。。

挙動的に変更後2回目のtscコマンド実行時に型定義ファイルが生成されないので、キャッシュとかコンパイル時に最適化されてるとこが怪しいなと。
そして設定を見直すと`tsBuildInfoFile`の設定が入ってました。
`incremental`オプションをtrueにしたとき`tsconfig.tsbuildinfo`ファイルの保存場所をしているする設定です。

この設定があると変更があったファイルのみ再コンパイルされるのでコンパイルが高速になる。

しかし、今回のように`vite build`コマンドと併用すると`vite build`コマンドがビルドファイルや型定義ファイルを削除してしまうので、差分のみコンパイルすると型定義ファイルが足りなくなります。

これが型定義ファイルが生成されてないように見える正体でした。

[このあたりのIssue](https://github.com/microsoft/TypeScript/issues/40173)を見ていて気付きました。

結論

```diff:tsconfig.json
{
  "compilerOptions": {
-   "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+   // "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
```


TSC で型定義ファイルが生成されない

ファイル操作をしているとFile, Blob, ArrayBuffer, Base64等の型に出会ってそれらを相互変換する機会はそれなりにあると思います。
それぞれ私が使っているコードを紹介するのでご活用ください。
JS標準で非同期関数が提供されてる機能については Async / Await で扱いやすくしたものを載せています。
番外編としてURL.createObjectURLについても少し書いてます。


相互変換できれば検証やテストの時にも便利です。


信頼性の加点になる情報としては、例えば`fileToArrayBuffer`関数、`fileToBase64`関数、`objectURLToBlob `は ImgRoller のプロダクトのソースコードで実用しているコードです。パンダと戦うImgRollerをどうぞよろしく。

https://yosidev.com/tools/imgroller/

その他の関数も一応検証してます。

コードはTypeScriptで書いてますが、型を消せばJavascriptでも動くと思います。


# FileまたはBlobからの変換

FileとBlobは扱いが近いので、まとめて扱えることが多いです。

## FileまたはBlobからArrayBufferへの変換

readAsArrayBufferを使うと変換できますが、Async / Await が使われていないので扱いずらいです。そう思った人のためにAsync / Await で非同期処理をしたコードを紹介します。

```ts
export const fileToArrayBuffer = async (
  file: File | Blob,
): Promise<ArrayBuffer> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()

    reader.onload = () => {
      if (reader.result instanceof ArrayBuffer) {
        resolve(reader.result)
      } else {
        reject(new Error("FileReader result is not an ArrayBuffer"))
      }
    }

    reader.onerror = () => {
      reject(reader.error)
    }

    reader.readAsArrayBuffer(file)
  })
}
```

## FileまたはBlobからBase64への変換

readAsDataURLをAsync / Await を用いて扱いやすく変えています。
ポイントとしてはreader.resultはreadAsDataURLを使ってる時点でstring型になるはずですが、型推論的にはArrayBuffer型とNull型も取ります。なので、ArrayBuffer型とNull型を除外しています。`as any`で型エラーをつぶしてもいいのですが、こちらの方がきれいかなと思います。

```ts
export const fileToBase64 = async (file: File | Blob): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (e) => {
      if (reader.result instanceof ArrayBuffer || reader.result == null) {
        reject(new Error("FileReader result is not an string"))
      } else {
        resolve(reader.result)
      }
    }
    reader.onerror = (e) => {
      reject(e)
    }
    reader.readAsDataURL(file)
  })
}
```



# Fileからの変換

## FileからBlobへの変換

説明することありませんね。
[mdn](https://developer.mozilla.org/en-US/docs/Web/API/Blob)に従って変換するだけです。

```ts
export const fileToBlob = (file: File, mimeType: string) => {
  return new Blob([file], { type: mimeType })
}
```



# Blobからの変換

## BlobからのFileへの変換

こちらも説明することありませんね。
[mdn](https://developer.mozilla.org/en-US/docs/Web/API/File/File)に従って変換するだけです。

```ts
export const blobToFile = (blob: Blob, filename: string, mimeType: string) => {
  return new File([blob], filename, { type: mimeType })
}
```




# ArrayBufferからの変換

## ArrayBufferからFileへの変換

[mdn](https://developer.mozilla.org/en-US/docs/Web/API/File/File)に従って変換するだけです。

```ts
export const arrayBufferToFile = (
  arrayBuffer: ArrayBuffer,
  filename: string,
  mimeType: string,
) => {
  return new File([arrayBuffer], filename, { type: mimeType })
}
```

## ArrayBufferからBlobへの変換

[mdn](https://developer.mozilla.org/en-US/docs/Web/API/Blob)に従って変換するだけです。

```ts
export const arrayBufferToBlob = (
  arrayBuffer: ArrayBuffer,
  mimeType: string,
) => {
  return new Blob([arrayBuffer], { type: mimeType })
}
```

## ArrayBufferからbase64への変換

経験上、ArrayBufferからbase64への変換を行う機会はあまりないでしょう。したがって、新たに関数を作るよりは他で紹介した関数を用いて変換するのが良いでしょう。Blobを一度経由します。

```ts
export const arrayBufferToBase64 = async (
  arrayBuffer: ArrayBuffer,
  mimeType: string,
) => {
  return await fileToBase64(arrayBufferToBlob(arrayBuffer, mimeType))
}
```




# base64からの変換

## base64からFileへの変換

```ts
export const base64ToFile = (
  base64: string,
  filename: string,
  mimeType: string,
) => {
  const byteCharacters = atob(base64.split(",")[1])
  const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0))
  const byteArray = new Uint8Array(byteNumbers)

  return new File([byteArray], filename, { type: mimeType })
}
```

## base64からBlobへの変換

```ts
export const base64ToBlob = (base64: string, mimeType: string): Blob => {
  const byteCharacters = atob(base64.split(",")[1])
  const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0))
  const byteArray = new Uint8Array(byteNumbers)

  return new Blob([byteArray], { type: mimeType })
}
```

## base64からArrayBufferへの変換

経験上、base64からArrayBufferへの変換を行う機会はあまりないでしょう。したがって、新たに関数を作るよりは他で紹介した関数を用いて変換するのが良いでしょう。Blobを一度経由します。

```ts
export const base64ToArrayBuffer = (base64: string, mimeType: string) => {
  return fileToArrayBuffer(base64ToBlob(base64, mimeType))
}
```


# 番外編: URL.createObjectURLで作成したURLを相互変換

画像をこねるサービスを作っているとURL.createObjectURLも使うかもしれません。
これはブラウザが閉じたり、故意に開放するまでメモリ上にファイルを保持する機能です。
ブラウザ上に画像を表示するときなどに使います。

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static

## FileやBlobからObjectURLを作成する

これはmdnに書いてある通りにできます。

```ts
URL.createObjectURL(object)
```

## ObjectURLからBlobへ変換する

fetchを使ってURLからファイルをダウンロードした後に変換して使えます。

```ts
export const objectURLToBlob = async (objectURL: string) => {
  const respnse = await fetch(objectURL)
  const blob = await respnse.blob()
  return blob
}
```

[JS TS] Async / Await を使った File, Blob, ArrayBuffer, Base64 の相互変換関数の紹介

`document.getElementById("test")?.showModal()`のようなコードを書いたとき、`Property 'showModal' does not exist on type 'HTMLElement'`という型エラーが出た。

# TypeScriptでの解決法

`showModal` メソッドは `HTMLDialogElement` に存在しますが、`HTMLElement` には存在しません。TypeScriptを使用している場合、この型エラーを回避するために、要素を `HTMLDialogElement` としてキャストする必要があります。

以下は、`document.getElementById` で取得した要素を `HTMLDialogElement` にキャストして `showModal` メソッドを呼び出す方法です。

```typescript
const dialogElement = document.getElementById("test") as HTMLDialogElement | null
dialogElement?.showModal()
```

という小ネタでした

Property 'showModal' does not exist on type 'HTMLElement'

# TypeScriptで配列からUnion Typeを生成

[厳密にORじゃないみたい](https://numb86-tech.hatenablog.com/entry/2020/07/03/090900)ですが、Union Typeがパッと浮かばない人がOR型とかのワードでも検索するかなと思ってこの一文を足してます。

TypeScriptでリテラル型を作成するには、まずリテラル型のユニオンを定義する必要があります。`const values = ["0.6" , "0.7" , "0.8" , "0.9" , "1.0", "auto"]`から`"0.6" | "0.7" | "0.8" | "0.9" | "1.0" | "auto"`という型を作成する方法を示します。

```ts
const values = ["0.6" , "0.7" , "0.8" , "0.9" , "1.0", "auto"] as const;

type Value = typeof values[number];

// Valueは "0.6" | "0.7" | "0.8" | "0.9" | "1.0" | "auto" になります
```

これだけです。


# 余談　const assertion な配列に文字列が含まれるか判定する方法

valueの型は`"0.6" | "0.7" | "0.8" | "0.9" | "1.0" | "auto"`、textはstring型なので以下のコードはエラーになる。

```ts
    if(values.includes(text)) {
      ...
    }
```

`
Argument of type 'string' is not assignable to parameter of type '"0.6" | "0.7" | "0.8" | "0.9" | "1.0" | "auto"'.ts(2345)
`

string[]型にasキャストすると良い。

```ts
    if((values as readonly string[]).includes(text)) {
      ...
    }
```

TypeScriptで配列からUnion Typeを生成する

ファイルのドラッグアンドドロップを実装しているときに、要素上をドラッグし続けているのにonDragLeaveが実行される挙動に同ぐうした。

結論としてはドラッグ中に子要素上にカーソルが乗るとonDragLeaveが実行されていた。

---

GPTに聞いてみた回答

**Question**
要素上をドラッグし続けているのにhandleDragLeaveが実行されます


**Answer**

`handleDragLeave` が誤って実行される理由の一つは、ドラッグ対象が要素の子要素に移動すると、`dragenter` と `dragleave` イベントが交互に発生するためです。これを防ぐには、`relatedTarget` を使用して、イベントが要素の外側で発生しているかどうかを確認する必要があります。

以下のコードは、この問題を解決するために修正されたバージョンです：

```jsx
import { useState, useCallback, useEffect } from 'react';

export const Dropzone = () => {
  const [isDragging, setIsDragging] = useState(false);

  const handleDragEnter = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(true);
  }, []);

  const handleDragLeave = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
    // relatedTargetが親要素内に存在するかをチェック
    if (!e.currentTarget.contains(e.relatedTarget  as Node)) {
      setIsDragging(false);
    }
  }, []);

  const handleDragOver = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
  }, []);

  const handleDrop = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);

    const files = e.dataTransfer.files;
    console.log(files);
  }, []);

  return (
    <div
      style={{ 
        border: isDragging ? "2px dashed #00f" : "2px dashed white", 
        padding: "20px",
        textAlign: "center" 
      }}
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
    >
      <input type="file" style={{ display: 'none' }} />
      <p>Drag 'n' drop some files here, or click to select files</p>
      <em>(Only *.jpeg and *.png images will be accepted)</em>
    </div>
  );
}
```

この修正では、`handleDragLeave` が呼び出されたときに `e.relatedTarget` が `e.currentTarget` の外側にあるかどうかを確認しています。これにより、ドラッグ対象が要素の子要素に移動しても `handleDragLeave` が誤って実行されることを防げます。


---


ミソは

```ts
    if (!e.currentTarget.contains(e.relatedTarget  as Node)) {
      setIsDragging(false);
    }
```

の部分。

https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/relatedTarget

調べているとこれと同じ実装を載せてる記事を発見。
https://qiita.com/keiliving/items/5e8b26e6567efbc15765
この記事によると2022年時点のWebKitにバグがあって動かないとのこと。
手元にMacが無いので確認できない。。。

パッといい解決方法が思いつかないが、以下のように保険をかけておくといいかもしれない。

```diff
  const onDragOverInner = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
+   if (!isDragging) setIsDragging(true)
    console.log("handleDragOver")
  }, [])
```

要素上をドラッグし続けているのにonDragLeaveが実行されます

AstroにGoogle Analyticsを導入する際、GAタグをそのままHead内に書く方法と[Partytown](https://docs.astro.build/ja/guides/integrations-guide/partytown/)を使う方法がある。

Partytownを使った方が良いのはわかりきっているが、以下で調査したところパフォーマンスには思ったより差が出たのでまとめる。

https://noh.ink/question_posts/EqQogwtZjtu80P2BpT9Y

# パフォーマンス比較

今回は調査に自身が管理している以下のサイトを用いた。

https://joke-job.pages.dev/

[GAタグが無い状態でのPageSpeed Insightsは100点](https://pagespeed.web.dev/analysis/https-joke-job-pages-dev/jqcp9fvw67?form_factor=mobile)です。

![GAタグが無い状態でのPageSpeed Insightsは100点](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/X65qWGqOuo8joxcnHJF5/origin.webp)


[GAタグをhead内最後に追加した状態(Partytown無し)でのPageSpeed Insightsは92点](https://pagespeed.web.dev/analysis/https-joke-job-pages-dev/nli42xzrp4?form_factor=mobile)です。

![GAタグをhead内最後に追加した状態(Partytown無し)でのPageSpeed Insightsは92点](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/gTMlqWmhST6nBA9tUv10/origin.webp)

GAタグを追加することで8点も下がってしまった。
（余談だが、<script>タグは</body>の直前に書くといいが、試してみると93点であまり変わらなかった）

最後にPartytownを使ってみた結果。

[GAタグをhead内最後に追加した状態(Partytownあり)でのPageSpeed Insightsは100点](https://pagespeed.web.dev/analysis/https-joke-job-pages-dev/wqhc7ef9sd?form_factor=mobile)になり、ほぼパフォーマンスが劣化しませんでした。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/MKhUH7MlH2EkcCJVOI8m/origin.webp)

# Partytownを使ってGoogle Analyticsを導入する方法

1. @astrojs/partytownをインストール

```bash
npm install -D @astrojs/partytown
```

2. 

Google タグ マネージャーはイベントを送信するためにdataLayer配列を使用します。
Partytown が呼び出しを`window.dataLayer.push({..})`に転送するために設定を追加します。
https://partytown.builder.io/google-tag-manager#forward-events

```diff:astro.config.mjs
import { defineConfig } from "astro/config";
import react from "@astrojs/react";
+ import partytown from "@astrojs/partytown";

import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  integrations: [
    react(),
    tailwind(),
+     partytown({
+       // Adds dataLayer.push as a forwarding-event.
+       config: {
+         forward: ["dataLayer.push"],
+       },
+     }),
  ],
});

```

3. Tagの挿入

Googleから提供されるタグを若干変更する必要があります。
scriptタグに2か所`type="text/partytown"`を追加します。


```tsx:Layout.astro
<!doctype html>
<html lang="ja" data-theme="cupcake">
  <head>
    
    <script
      type="text/partytown"
      async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
    ></script>
    <script type="text/partytown">
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-XXXXXXXXXX');
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

```

参考
https://www.kevinzunigacuellar.com/blog/google-analytics-in-astro/

これで完了です。

AstroにGoogle Analyticsを導入する際はPartytownを使うとパフォーマンスが劣化しない

# ReferenceError An error occurred. ○○ is not defined

マークダウン一覧からタグ情報を取り出して、各タグページを作成させようとしていた。

`getStaticPaths()`を使うと実現できる。

https://docs.astro.build/ja/guides/routing/#%E9%9D%99%E7%9A%84ssg%E3%83%A2%E3%83%BC%E3%83%89

```ts:src/pages/tags/[tag].astro
---
import { getTags } from '../../helpers/getTags';

const allJobs = await Astro.glob('../../pages/jobs/*.md')
const tags = getTags(allJobs)

export function getStaticPaths() {
  return tags.map(tag => {
    return {params: {tag: tag.name}}
  })
}

const { tag } = Astro.params;
---
<div>{tag}</div>

```

以下のエラーが出た。

```
ReferenceError
An error occurred.
tags is not defined
```

解決策

Astroのページでは、getStaticPathsはビルド時に最初に実行される関数であるため、ページのスコープ内で定義された変数にはアクセスできないらしい。

getStaticPathsの中でAstro.globとgetTagsを呼び出すように変更する必要がある。

```ts:src/pages/tags/[tag].astro
---
import { getTags } from '../../helpers/getTags';

export async function getStaticPaths() {
  const allJobs = await Astro.glob('../../pages/jobs/*.md')
  const tags = getTags(allJobs)
  return tags.map(tag => {
    return {params: {tag: tag.name}}
  })
}

const { tag } = Astro.params;
---
<div>{tag}</div>

```



# Cannot find module '@/layouts/Layout.astro' imported from '/app/src/pages/tags/[tag].astro'

Astroでもimport aliasが使える。

https://docs.astro.build/ja/guides/imports/#import%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9


```json:tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

のように設定を書くと

```ts
import Layout from '@/layouts/Layout.astro';
```

とimportできる。

この時、`Cannot find module '@/layouts/Layout.astro' imported from '/app/src/pages/tags/[tag].astro'`とエラーが出た。

Astroに限らないが、`baseUrl`が必要。

```json:tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

```

Astro使ってるときに遭遇したエラーと解決集

SQLのGROUP BY & COUNTで重複したレコードの数を取得するようなことをTypeScript（Javascript）で行う。

以下のようなjobs変数があるとする。

```ts
const jobs: { tags: string[] }[] = [
  { tags: ["出社", "program", "C++"] },
  { tags: ["出社", "工事"] },
  { tags: ["program", "C++"] },
  { tags: ["出社", "C++"] },
  { tags: ["program"] },
  { tags: ["出社"] },
  { tags: ["program"] },
  { tags: ["出社"] },
  { tags: ["program"] },
  { tags: ["出社"] },
];
```

tagの文字列ごとに集計してソートするコードをTSで書きたい。
以下のような出力をイメージ。

```ts
[
  { name: "出社", count: 6 },
  { name: "program", count: 5 },
  { name: "C++", count: 3 },
  { name: "工事", count: 1 }
]
```

ソースコード

```ts
type TagCount = { name: string; count: number };

// タグの出現回数を集計する関数
function countTags(jobs: { tags: string[] }[]): TagCount[] {
  const tagCounts: { [key: string]: number } = {};

  // 各ジョブのタグを集計
  jobs.forEach(job => {
    job.tags.forEach(tag => {
      if (tagCounts[tag]) {
        tagCounts[tag]++;
      } else {
        tagCounts[tag] = 1;
      }
    });
  });

  // オブジェクトから配列に変換
  const result: TagCount[] = Object.keys(tagCounts).map(tag => ({
    name: tag,
    count: tagCounts[tag]
  }));

  // 出現回数でソート
  result.sort((a, b) => b.count - a.count);

  return result;
}

// 集計結果を取得
const tagCounts = countTags(jobs);

// 出力
console.log(tagCounts);
```

[TS] オブジェクトの配列をGroup byのように集計してCountでソートする

Github Actionsのworkflow_dispatchを使うようにしています。

リリースするリモートブランチ名とリリース先を選択できるようになっています。
ただし、プロダクション環境にリリースできるのはmainブランチだけにしています。


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/DZCUEk3JFUGHteQ0JGJJ/origin.webp)



```yml:.github/workflows/release.yml
name: Deploy

on:
  workflow_dispatch:
    inputs:
      target:
        type: choice
        description: Deploy target
        options:
          - staging
          - production

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to CloudRun(Staging)
        if: github.event.inputs.target == 'staging'
        run: |
          git branch
          git push origin ${{ github.ref_name }}:release-staging -f
      - name: Deploy to CloudRun(Production)
        if: github.event.inputs.target == 'production'
        run: |
          git branch
          git checkout main
          git pull origin main
          git branch
          git push origin main:release-production -f

```

特に面白いところはないです。

`github.ref_name`でリリースするリモートブランチ名を取得できます。


このActionsはリリース用のブランチにプッシュするだけです。
それによってCloudrunなどにリリースする処理が別途必要です。

ちなみに上記Actionsを実行するためには Settings -> Actions -> General -> Workflow permissions を`Read repository contents and packages permissions`から`Read and write permissions`へ変更しておく必要がある。

リリース用ブランチにPushするGithub Actions

100均で買った猫と肉球のケーブルタイが可愛すぎて購入したyosiです。

これまでいくつかサイトを運営してきたなかで、ドメインを取得する機会が何度もあったわけですが、その時に考えていることを書こうと思います。

この記事で書いたことが正解というわけではなく、あくまで個人的にこう考えているという話になりますのでご了承ください。
そう考えている根拠はできるだけ丁寧に書くつもりです。


# 結論

- トップレベルドメインは.comか.netをできれば取得する。取得できなければ他のgTLDドメインを検討する。
- 各gTLDドメインにも運営元があり、そのリスクを一応考慮する。
- 国別コードトップレベルドメインは避けた方が良いと思うが、日本国内向けサイトであれば.jpは有用。
- 日本語ドメインを選ぶ理由はない。
- 取得料金ではなく更新料金を確認する。


# おすすめしない選び方

ドメイン取得サイトでほしいドメイン名を検索して、サイトにおすすめされるがままにマイナーなトップレベルドメインのドメインを購入する。というのは避けた方が良いです。


# トップレベルドメインの種類

まず、トップレベルドメイン(TLDs)はドメインにおいて.com, .net, .jp, .co.jp, .ioなどの部分のことです。

一般的なWebサイトを作る際に使用できるトップレベルドメインには以下の種類があります。
大別するとジェネリックトップレベルドメイン (gTLD)と国別コードトップレベルドメイン (ccTLD)があることを理解していただければいいです。

- ジェネリックトップレベルドメイン (gTLD)
  - 有名どころでは1984年に決定された`.com / .net / .org`などや、2001年に実用化された`.biz / .info`などがあります。これらはgTLDの中でスポンサーなしトップレベルドメイン(uTLD)に分類されます。
  - TLDごとに特定コミュニティのスポンサーを持つトップレベルドメインで、`.mobi / .travel / .dev / .app`などがあります。スポンサーによって登録ポリシー等が決められています。こちらはgTLDの中でスポンサー付きトップレベルドメイン(sTLD)に分類されます。ちなみに`.dev / .app`のスポンサーはGoogleです。
  - uTLDやsTLDにどのように分類されるのか知りませんが、条件付き無制限のgTLDというものもあり、日本では`.tokyo / .kyoto`などが取得されています。
- 国別コードトップレベルドメイン (ccTLD): 国や地域ごとに割り当てられたトップレベルドメインです。`.jp / .io / .mu`などがあります。


# 国別コードトップレベルドメイン (ccTLD)を避ける理由

誤解してほしくないのは国別コードトップレベルドメイン (ccTLD)を使ってはいけないわけではないです。
しかし、意味もなく他国のccTLDを使うメリットは無いと個人的に考えます。

まず、ccTLDを使うメリットは何でしょう。信頼性が高く、[その地域での検索結果に表示されやすくなるといわれています](https://developers.google.com/search/blog/2015/07/googles-handling-of-new-top-level?hl=ja)。また、日本向けのサイトでも他国のccTLDを使ってるサイトがあるのを見るに、一見意味のない短い文字列であるというメリットを感じてるのではないかと想像します。


次にデメリットですが、`.mu`や`.io`を使ったときに日本は対象地域ではないのでわざわざccTLDのメリットをつぶしていることになります。むしろデメリットになりそうです。

また、管理している国に依存することもデメリットに感じます。
例えば、[.tcドメインは2012年に大きな値上げを行ったことで話題になりました](https://internet.watch.impress.co.jp/docs/news/564375.html)。
[.ioドメインは2017年にネームサーバー側の問題が発生し、さらに問い合わせ可能な時間も短いという意見が出ていました](https://gigazine.net/news/20171113-io-domain/)

もちろんここで書いたデメリットは必ずしもccTLDだけに当てはまることではありませんが、検討には値します。
参考になる話題としては[noteは2019年に.muから.comドメインに移行しています](https://note.jp/n/naefe7919ceeb)

例外として、日本国内サービスが.jpドメインを使用することは初めに書いた恩恵を受けられ、十分に良い選択肢であると考えます。
日本国内に住所をもつ個人、団体、組織しか登録できないにも関わらず、[.jpは10番目に人気のトップレベルドメイン](https://www.shopify.com/jp/blog/popular-domains)となってます。



# ジェネリックトップレベルドメイン (gTLD)の中でも.com / .netを勧める理由

では.com / .net / .orgなどのジェネリックトップレベルドメイン (gTLD)であればどれを選んでもいいのでしょうか。少なくとも私はそう思いません。

理由としてはトップレベルドメインはそれぞれ異なる組織が管理・運営しているからです。
以下に一部のトップレベルドメイン管理者を表にまとめます([参考](https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%83%E3%83%97%E3%83%AC%E3%83%99%E3%83%AB%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E4%B8%80%E8%A6%A7#%E5%9B%BD%E5%88%A5%E3%82%B3%E3%83%BC%E3%83%89%E3%83%88%E3%83%83%E3%83%97%E3%83%AC%E3%83%99%E3%83%AB%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3))。

| トップレベルドメイン名 | 管理者または運営者 |
| - | - |
| .com | ベリサイン（Verisign, Inc.） |
| .net | ベリサイン（Verisign, Inc.） |
| .org | Public Interest Registry |
| .biz | Neulevel (NeuStar Inc.の90%子会社) |
| .blog | Automattic(WordPress.comの運営元) |
| .wiki | Top Level Design |
| .dev | Google |
| .app | Google |

ここでは有名な管理者のドメインを多く記載しましたが、そういった管理者ばかりではなく、知らない組織も多いです。
トップレベルドメインを選ぶ際は、その管理者が信用できるかを考慮すべきです。

私が.comと.netをお勧めする理由は、それらを使ったWebサイトがインターネット全体の約半分に達するからです。
価格も安いですし、シェアが高いということ自体が安心感につながります。

https://www.shopify.com/jp/blog/popular-domains

.comと.netを使うことにももちろん懸念点があります。
2020年に[.comドメインの登録手数料を値上げ可能にする合意がICANNとベリサインで行われたこと](https://gigazine.net/news/20200212-icann-verisign-dotcom-domain/)が話題になりました。

商用サービスで使うことはあまりないですが.orgにも話題はあります。2019年に[.orgドメインの管理団体であるPublic Interest Registryごと投資会社へ売却されそうになりました](https://gigazine.net/news/20191120-domain-org-sold-private-equity-company/)。[最終的にICANNによって却下されました](https://gigazine.net/news/20201224-how-org-saved/)が、[.orgドメイン登録価格の上限撤廃](https://gigazine.net/news/20190702-icann-pir-org-pricecap/)されていたこともありユーザーは法外な請求の可能性を危惧していました。

ここで紹介した以外のgTLDについても同じようなリスクがあることは知っておくべきでしょう。
とはいっても、法外な価格改定はそうそうないです。マイナーなgTLDを選ぶことは大きなリスクとは言えません。[新しいgTLDも.comなどと同じように処理することをGoogleが発言している](https://developers.google.com/search/blog/2015/07/googles-handling-of-new-top-level?hl=ja)のでSEO的にも影響がないと考えられます。

どのトップレベルドメインを選ぶにしても、最終的には管理者（運営者）を信用できるかという判断に賭けることになります。
個人的には.devや.app、.blogもいいのではないかと思います。




# .comや.netを取得するために

.comや.netが常に取得できれば苦労しないです。
特に短い文字列で取得する難易度は高いです。

そういった場合にマイナーなトップレベルドメインを選んでしまう気持ちもわかります。
僕自身も取得できなかった結果として[noh.ink](https://noh.ink/)を取得していますので。

しかし、最近思うのはユーザーはドメイン名なんて見てないので多少冗長にしてもいいのではないか？ということです。
私の場合、noh.inkよりnoh-dev.com, noh-net.com, noh-web.netみたいにする選択肢もあったなと。ちょっと見た目悪いですが、noh.inkも見た目がいいとは言えないなと思う最近です。



# 日本語ドメインを選ぶ理由はない

日本語ドメインについて検索するとデメリットが多く書かれているので改めてここで書くことは正直無いです。
メリットとして「覚えやすい」「視認性が高い」とよく書かれてますが、覚えてるサイトありますか？僕は1つとして覚えてるサイトなんてありません。



# 取得料金ではなく更新料金を確認する

ドメインを取得するときに取得料金は割とどうでもよくて、更新料金の方が大事です。
特に日本のドメイン取得サービスは取得費用を安くして更新費用が高いイメージがあります。

基本的にサイト運営は複数年行うので、初年度だけ安いことに何の意味もないです。
2年目に移管する手もありますが、更新日なんて気づいたら過ぎてますし、気づいても面倒でやりません。

ある程度知識があるのであれば[Cloudflare Registrar](https://www.cloudflare.com/ja-jp/products/registrar/)が最高のドメイン取得サービスだと思ってます。日本語サポートが欲しいならおとなしく日本企業が運営してるとこにしましょう。





# おまけ知識

トップレベルドメインの公式のリストはInternet Assigned Numbers Authority(IANA)によって管理されており、IANAは2000年にICANNの機能となっています。Public Technical Identifiers (PTI)はICANNの子会社です。

トップレベルドメイン(TLDs)はドメインにおいて.com, .net, .jp, .co.jp, .ioなどの部分です。
トップレベルドメイン一覧は文字通りトップレベルドメインの一覧のことです。

Blogs & Mini Blogs