# TOKOS Tech Blog

---



---

> 株式会社TOKOSのエンジニアが技術的な知見やノウハウを共有するテックブログです。React、Next.js、TypeScript などフロントエンド技術を中心に情報を発信しています。

---



---

- URL: https://blog.to-ko-s.com

---

- 言語: 日本語

---



---

## 【Zod】v4.5の新機能とパフォーマンス改善をまとめて解説

- URL: https://blog.to-ko-s.com/articles/zod-v4-5
- 著者: 杉田侑祐
- 公開日: 2026-09-24
- タグ: TypeScript, パフォーマンス

> Zod v4.5の新機能とパフォーマンス改善を解説します。スキーマをAOTコンパイルするz.compile()、メモリ最大9.8倍削減、z.toZod()の型安全、そして文字列長のコードポイント化などアップグレード前に確認したい破壊的変更まで扱います。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！

Zod v4.5が2026年8月28日にリリースされました。
新機能とパフォーマンス改善、そしてアップグレードで挙動が変わる箇所をまとめます。

<ExternalLink url="https://zod.dev/blog/zod-4-5" />

### 対象読者

- すでにZodを業務で使っているTypeScript開発者の方
- v4系を使っていて、v4.5へのアップグレードを検討している方
- `z.compile()`を自分のプロジェクトで使えるか判断したい方

### この記事で扱う内容、扱わない内容

扱う内容は下記です。

- Zod v4.5で追加された機能
- v4.4からのパフォーマンス改善点
- アップグレードで挙動が変わる箇所

扱わない内容は下記です。

- Zod自体の入門（スキーマ定義や`parse`の基本）
- Zod v3からv4への移行
- Zod Mini（Zod本体の軽量版）の詳細（`z.compile()`のバンドルサイズに関わる部分だけ触れます）
- `react-hook-form`など他ライブラリとの連携

## Zod v4.5で入った変更の全体像

新機能の追加とパフォーマンスの改善、そして仕様をより正確にする破壊的変更が入っています。

その中でも気になるものだけ取り上げます！

| 変更点                         | 内容                                                                                                                          |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| `z.compile()`                  | スキーマの検証を1本のJavaScript関数に書き出しておく新機能。キーの多いオブジェクトで`parse`が最大10.2倍速い                    |
| メモリ削減と失敗時の高速化     | 内部構造の見直しによる改善で、コードの書き換えは不要。スキーマ1つが使うメモリが最大9.8分の1、失敗する`safeParse()`は7.6倍速い |
| `z.validate()`                 | 値が通るかどうかだけを真偽値で返す型ガード。エラーを組み立てない分、不正な入力に対して`.safeParse().success`より最大16倍速い  |
| `z.toZod()`                    | 先に決めた型とスキーマが一致するか検証。`satisfies z.ZodType<T>`では見逃していた余分なキーや`z.any()`を弾ける                 |
| 文字列長がコードポイント単位に | `.min()`と`.max()`の数え方がUTF-16のコードユニットからUnicodeのコードポイントへ変わり、絵文字を含む入力で結果が変わる         |

ここに入らなかった追加分は「その他の新機能」でまとめて扱います。
`z.deepPartial()`や`z.creditCard()`、循環参照を含むデータのparseなどが該当します。

## z.compile()

Zodはキーが増えるほど、parseに時間がかかります。
`z.compile()`は、この作業を先に済ませて1本のJavaScript関数に書き出しておく機能です。

```ts title="z.compile()の基本" showLineNumbers {9}
import * as z from "zod"

const Player = z.object({
  username: z.string(),
  bio: z.string(),
  xp: z.number(),
})

const CompiledPlayer = z.compile(Player)

CompiledPlayer.parse({ username: "billie", bio: "hello", xp: 100 })
```

`z.compile()`が返すのは元のスキーマと同じ型です。
呼び出し側のコードは変わりません。

使う上で押さえておきたいのは次の2点です！

- エラーメッセージはコンパイルの有無で変わらない
- 失敗するケースは速くならない

コンパイル済みの関数は、値が不正だと分かった時点で処理をやめます。
エラーを組み立てるのが元のパーサなので、メッセージは今までと変わりません。
書き出されるコードの中身は、公式ドキュメントを参照してください。

<ExternalLink url="https://zod.dev/compile" />

速度は公式のベンチマークが公開されています。

| スキーマ                   | 標準  | コンパイル済み |
| -------------------------- | ----- | -------------- |
| 20キーのオブジェクト       | 301ns | 38ns           |
| 10要素のオブジェクト配列   | 377ns | 68ns           |
| 10要素の文字列配列         | 241ns | 33ns           |
| 3つのオブジェクトの`union` | 190ns | 36ns           |
| 5キーの`strictObject`      | 117ns | 32ns           |
| `discriminatedUnion`       | 92ns  | 27ns           |

キーが多いほど差が開きます！
50キーのオブジェクトでは10.2倍という数値も出ています。

### コンパイルはチェーンの最後に

`.refine()`や`.extend()`、`.optional()`が返すスキーマはコンパイルされていません。
チェーンの途中で`z.compile()`を呼ぶと、その後に足したものは元のパーサで処理されます。

```ts title="呼ぶ順番" showLineNumbers
const bad = z.compile(z.string()).refine((val) => val.length > 1) // [!code --]
const good = z.compile(z.string().refine((val) => val.length > 1)) // [!code ++]
```

### コンパイルできないスキーマ

すべてのスキーマがコンパイルできるわけではありません！
対応していない機能を含んでいても、`z.compile()`はエラーを投げずにそのまま返します。
`{ strict: true }`を渡しておくと、そのときにエラーを投げてくれます。

```ts title="strictモードで確認する"
z.compile(z.coerce.number(), { strict: true })
```

```text title="投げられるエラー"
ZodCompileUnsupportedError: z.compile does not support coercion (z.coerce.number());
this schema must use the runtime parser
```

対応していないのは次のものです。

- 非同期の`refine`・`transform`・`check`
- `z.xor()`
- 再帰スキーマ
- `z.coerce.*`
- `when`を指定したcheck
- コールバックを渡した`.catch()`

`.catch("fallback")`のように定数を渡す形はコンパイルできます。

非対応のものが混ざっていても、必ずスキーマ全体が諦められるわけではありません。
効く範囲は場所によって変わります。

- `object`・`array`・`tuple`・`record`・`intersection`の中なら、非対応のものだけが元のパーサに回り、外側はコンパイルされたまま
- `union`のメンバーに非対応のものがある場合、コールバック形式の`.catch()`、どこかに非同期処理がある場合は全体が元のパーサに戻る

### バンドルサイズのトレードオフ

コンパイラそのものが、それなりの量のコードでできています。
`z.compile()`を呼ぶか`zod/compile`をimportした時点で、その分がバンドルに乗ります。

| バンドル | compileなし | compileあり |
| -------- | ----------- | ----------- |
| Zod      | 24.1KB      | 31.1KB      |
| Zod Mini | 4.6KB       | 13.2KB      |

いずれもgzip後の数値です。
Zodでは約1.3倍増加ですが、Zod Miniでは2.9倍になります。
Zod Miniを選ぶ理由はサイズなので、Miniとcompileの組み合わせは噛み合いません！

一度も呼ばなければビルド時に丸ごと削られるので、使わないなら増加はゼロです！
サーバーサイドならバンドルサイズを気にせず採用できます。
クライアントで動かすバリデーションなら、7KB分の速度が得られるかを先に確かめたいところです。

<SpeechBubble icon="/authors/sugita-yusuke.jpg" name="スギタ">
  ZodMiniの4.6KBが13.2KBになるのは、正直かなり厳しい数字だと感じました。Miniとcompileはどちらかひとつでいいという解釈をしています。
</SpeechBubble>

下記公式ブログで紹介されています！

<ExternalLink url="https://zod.dev/blog/introducing-z-compile" />

### import "zod/compile"で全体に適用する

スキーマごとに毎回1つずつコンパイルするのでは無く、アプリケーション全体でコンパイルを有効にできます。

```ts title="グローバルに有効化する" showLineNumbers {1}
import "zod/compile" // スキーマを定義するモジュールより前に置く
import * as z from "zod"

const schema = z.object({ name: z.string() })
schema.parse({ name: "ok" }) // 初回のparseでコンパイルされる
```

`import "zod/compile"`は読み込む順番が重要です！
これより後に定義されたスキーマだけが、コンパイルの対象になります。
import文の並び順で保証しきれないときは、Node.jsの起動時に読み込みます。

```bash title="起動時に読み込む"
node --import zod/compile app.js
```

コンパイルされるのは、実際に`parse`したスキーマだけです。
定義しただけで使っていないスキーマは対象外になります。
公式ドキュメントは「This import is for applications, not libraries.」と明記しています。
ライブラリから読み込むと、利用側のスキーマまで巻き込むためです。

CSP(Content Security Policy)で`new Function`を使えない環境では、コンパイルに失敗してそのまま元のパーサで動きます。
Cloudflare Workersなどが当てはまります。
はっきり無効にしたいときは`z.config({ jitless: true })`を設定してください。

## 何もしなくても速くなった部分

`z.compile()`は自分で呼んだときだけ効く機能です。
一方で、v4.5にはコードを変えなくても効く改善が入っています。

### スキーマ1個あたりのメモリが最大9.8倍削減

スキーマ1つが使うメモリの比較です。

| スキーマ                | v4.4.3 | v4.5   |
| ----------------------- | ------ | ------ |
| 10キーのオブジェクト    | 82.0KB | 11.0KB |
| union                   | 17.5KB | 2.13KB |
| `z.string().min(1)`     | 16.7KB | 3.37KB |
| record                  | 16.4KB | 2.64KB |
| `z.string().optional()` | 12.6KB | 1.50KB |
| `z.string()`            | 7.53KB | 784B   |
| `z.number()`            | 4.44KB | 706B   |

メソッドの持ち方を変えたことによる効果のようです。
これまではスキーマを作った時点で、すべてのメソッドを1つずつ持たせていました。
v4.5では、実際に呼ばれたメソッドだけを後から持たせます。
一度も呼ばないメソッドの分は、まるごと不要になります！

書き方への影響はないので、次のような分割代入も引き続き動きます。

```ts title="分割代入しても動く" showLineNumbers
const { parse } = z.string()

parse("some data")
```

<ExternalLink url="https://zod.dev/blog/reducing-memory-footprint" />

### safeParseの失敗が7.6倍速く

`.safeParse()`は失敗するたびに`ZodError`を作り、スタックトレースまで取っていました。
v4.5でも`ZodError`自体はその場で作られますが、重い処理が後ろにずれました。
エラー文面の組み立ては`message`を読むまで走らず、`safeParse()`ではスタックの記録も省かれます。
`parse()`が投げる場合はスタックが必要なので、そちらは今までどおり記録されます。

公式の計測では、失敗する`safeParse`が6.3msから840nsになっています！
フォームのように入力途中で何度も失敗する画面なら、成功より失敗のほうが回数は多いはずです。

### z.validate()

値が通るかどうかだけを知りたい場面で、`.safeParse().success`を使っていた方は多いはずです。
この書き方だと、失敗するたびにエラーオブジェクトを組み立てる処理が走ります。

v4.5で追加された`z.validate()`は真偽値だけを返します。

```ts title="z.validate()" showLineNumbers
z.validate(z.string(), "hi") // true
z.validate(z.string(), 42) // false
```

公式によると、不正な入力に対して`.safeParse().success`より最大16倍速くなります。
`z.compile()`を通したスキーマを渡すと、差はさらに開きます。
コンパイル時に真偽値だけを返す判定用の関数も作られていて、`z.validate()`はそれをそのまま呼ぶためです。
値を組み立てる処理を通らない分だけ速く終わります。

注意したいのは、絞り込まれる型です。

```ts title="型ガードが効くのはinput側" showLineNumbers {5-6}
const Age = z.string().transform((s) => Number(s))
const value: unknown = "3"

if (z.validate(Age, value)) {
  // ここでの value は string
  // transform 後の number ではない
}
```

`z.validate()`が絞り込むのは、変換した後の型ではなく変換する前の型です！
Zodの用語でいえば`output<T>`ではなく`input<T>`側になります。

非同期の`refine`や`transform`を含む場合は`z.validateAsync()`を使います。
TypeScriptでは非同期の型ガードを書けないため、こちらは`Promise<boolean>`を返すだけで型は絞り込まれません。

<SpeechBubble icon="/authors/sugita-yusuke.jpg" name="スギタ">
  `z.validate()`は`output<T>`ではなく`input<T>`に対する型ガードです。そのため、`transform`を挟んだスキーマで使うときは、絞り込まれた型を一度確認しておくと安全です。
</SpeechBubble>

## z.toZod()

先に型を定義して、それに合うスキーマを書く場面があります。
例えば、外部APIの型や共有パッケージの型に合わせてバリデーションを足すときなどです。

### satisfiesでは防げないケース

これまでよく使われていたのは`satisfies z.ZodType<T>`です。
ただしこれは「型として当てはまるかどうか」しか見ません。
必須キーの書き忘れは捕まえますが、余分なキーや`z.any()`はすり抜けてしまいます。

```ts title="satisfiesはすり抜ける" showLineNumbers {7,11}
type Player = { username: string; xp: number }

// 型に存在しない admin を足してもエラーにならない
z.object({
  username: z.string(),
  xp: z.number(),
  admin: z.boolean(),
}) satisfies z.ZodType<Player>

// z.any() でも通ってしまう
z.any() satisfies z.ZodType<Player>
```

この2つは手元の`tsc`でもエラーになりませんでした！

### z.toZod()なら弾ける

v4.5の`z.toZod()`は、型とスキーマがぴったり一致するかどうかを見ます。
2段階に分けて呼ぶ点だけ注意してください。

```ts title="z.toZod()で書き直す" showLineNumbers {7,11}
// 1段目: 合わせたい型を渡す
// 2段目: その型と一致するスキーマだけ受け付ける
const PlayerSchema = z.toZod<Player>()(
  z.object({
    username: z.string(),
    xp: z.number(),
    admin: z.boolean(), // Playerに無いキー → 型エラー
  }),
)
// z.any()も「Playerと一致しない」のでエラー
const AnyPlayer = z.toZod<Player>()(z.any())
```

先ほどと同じ内容ですが、今度は両方エラーになります！

```text title="tscの出力（抜粋）"
error TS2345: Argument of type 'ZodObject<{ username: ZodString; xp: ZodNumber;
admin: ZodBoolean; }, $strip>' is not assignable to parameter of type
'$ZodObject<{ username: ZodString; xp: ZodNumber;
admin: ToZodKeyMismatch<never, boolean>; }, $strip>'.
  Property '"types do not match"' is missing in type '_ZodBoolean<...>'

error TS2345: Argument of type 'ZodAny' is not assignable to parameter of type
'ZodAny & ToZodMismatch<Player, ZodAny>'.
  Property '"types do not match"' is missing in type '_ZodType<$ZodAnyInternals>'
```

`"types do not match"`という文字列がエラーに現れるので、原因を追いやすくなっています。
`admin`というキー名まで出るのも助かります。

スキーマが正しい場合、`z.toZod()`は渡したスキーマをそのまま返します。
戻り値の`.shape`もそのまま使えます。

<SpeechBubble icon="/authors/sugita-yusuke.jpg" name="スギタ">
`z.toZod<Player>()(schema)`という2段呼び出しは、初見だと書き間違いに見えます。それでも`satisfies`が`z.any()`を弾けないと知ってしまうと、型定義に追従させたいスキーマはこちらへ寄せたくなりました。
</SpeechBubble>

## その他の新機能

### z.deepPartial()とexactPartial()

`z.deepPartial()`はZod 3にあったメソッドです。
v4でいったん削除され、v4.5で関数の形になって戻ってきました。
ネストしたオブジェクトのプロパティも再帰的に`optional`にします。

```ts title="z.deepPartial()" showLineNumbers {6-7}
const Post = z.object({
  title: z.string(),
  author: z.object({ name: z.string(), email: z.string() }),
})

const PartialPost = z.deepPartial(Post)
// { title?: string; author?: { name?: string; email?: string } }

PartialPost.parse({ author: {} }) // ✅
```

元のスキーマは変更されず、結果も`ZodObject`のままなので`.shape`や`.extend()`が使えます。

ただし、どんなオブジェクトにも使えるわけではありません。
内部で`.partial()`を使うため、`.refine()`を持つオブジェクトに行き当たると例外を投げます。

```text title="refineを持つオブジェクトに使った場合"
.partial() cannot be used on object schemas containing refinements
```

既存のスキーマに使うなら、`.refine()`は`z.deepPartial()`のあとに付けてください。
discriminatedUnionに使うと、判別に使うキーまでoptionalになります。
判別できなくなるため、結果は通常のunionに変わります。

`.exactPartial()`は、各フィールドを`z.optional()`ではなく`z.exactOptional()`で包みます。
キーの省略は許しますが、はっきり`undefined`を渡すと弾きます。

```ts title="exactPartialとpartialの違い" showLineNumbers {4-5}
const Recipe = z.object({ title: z.string(), servings: z.number() })

Recipe.exactPartial().parse({}) // ✅
Recipe.exactPartial().parse({ title: undefined }) // ❌
Recipe.partial().parse({ title: undefined }) // ✅
```

TypeScriptの`exactOptionalPropertyTypes`を有効にしているなら、こちらのほうが型と実行時の挙動が揃います。

<SpeechBubble icon="/authors/sugita-yusuke.jpg" name="スギタ">
  `exactOptionalPropertyTypes`はTypeScriptのコンパイラオプションで、`optional`なプロパティと`undefined`を入れていいプロパティを区別する設定です。
</SpeechBubble>

### z.properties()

クラスのインスタンスに対して、複数のプロパティをまとめて検証できます。

これまでは`z.property()`を1つずつ並べる書き方でした。

```ts title="v4.4まで"
z.instanceof(URL).check(
  z.property("protocol", z.literal("https:" as string)),
  z.property("hostname", z.string().regex(z.regexes.domain)),
)
```

v4.5の`z.properties()`なら、オブジェクトで一度に渡せます。
戻り値が配列なので、`.check()`にはスプレッドで渡します。

```ts title="v4.5から" showLineNumbers {2}
const httpsUrl = z.instanceof(URL).check(
  ...z.properties({
    protocol: z.literal("https:" as string),
    hostname: z.string().regex(z.regexes.domain),
  }),
)

httpsUrl.parse(new URL("https://example.com")) // ✅
httpsUrl.parse(new URL("http://localhost")) // ❌ expected "https:"
```

`as string`が要るのは、`URL.protocol`の型が`string`のためです。
これを外すと、リテラル型と一致しないというエラーになります。

### z.creditCard()

クレジットカード番号のフォーマットと、Luhnアルゴリズム(クレジットカード番号の検証アルゴリズム)によるチェックサムを検証します。

```ts title="z.creditCard()" showLineNumbers
z.creditCard().parse("4111111111111111") // ✅
z.creditCard().parse("4111 1111 1111 1111") // ✅ 単一のスペース
z.creditCard().parse("4111-1111-1111-1111") // ✅ 単一のハイフン
z.creditCard().parse("4111  1111 1111 1111") // ❌ 区切りの連続は不可
z.creditCard().parse("4111111111111112") // ❌ チェックサム不一致
```

12桁から19桁を受け付けます。
区切り文字はスペースとハイフンだけで、連続はできません。
カードブランドの判別はしないので、どの発行元の番号でも通ります！

ブランドを絞りたい場合は、これまでどおり自前の判定を足すことになります。
`z.creditCard()`が見てくれるのは、桁数と区切りとチェックサムまでです。

### 循環参照を含むデータのparse

自分自身を含むデータを渡すと、v4.4まではエラーになっていました。

```ts title="自分を含むデータ" showLineNumbers {11}
const Category = z.object({
  name: z.string(),
  get subcategories() {
    return z.array(Category)
  },
})

type Category = z.infer<typeof Category>

const input: Category = { name: "root", subcategories: [] }
input.subcategories.push(input)

const result = Category.parse(input)
```

同じコードを2つのバージョンで走らせた結果です。

```text title="実行結果"
zod@4.4.3
  RangeError: Maximum call stack size exceeded

zod@4.5.4
  result.subcategories[0] === result  // true
```

入力にあった循環は、そのまま結果にも残ります！
同じオブジェクトとして扱われるので、`===`での比較も成立します。

Zod本体では最初から有効になっています。
Zod Miniでは、スキーマを定義する前に登録します。

```ts title="Zod Miniでの有効化"
z.config({ memoizer: z.memoizer() })
```

### z.input()とz.output()の関数版

`z.input`と`z.output`はv4.4まで型だけでしたが、v4.5からは関数としても呼べます。
codecやpipeを含むスキーマから、片側だけを取り出せます。

```ts title="codecの片側だけを検証する" showLineNumbers {8-9}
const isoDate = z.codec(z.iso.datetime(), z.date(), {
  decode: (s) => new Date(s),
  encode: (d) => d.toISOString(),
})

const Event = z.object({ name: z.string(), at: isoDate })

z.input(Event).parse({ name: "launch", at: "2024-01-01T00:00:00Z" }) // ✅
z.output(Event).parse({ name: "launch", at: new Date() }) // ✅
```

型としての使い方はこれまでどおりです。

`z.input()`のほうは、codecに付けたcheckを引き継ぎません。
変換した後の値を縛る条件なので、変換前のスキーマには残らないからです。

codecやpipeを含まないスキーマなら、どちらを呼んでも何も変わりません。

### z.getDiscriminatedOption()

`discriminatedUnion`から、特定のdiscriminatorを持つ選択肢を型安全に取り出せます。

```ts title="z.getDiscriminatedOption()" showLineNumbers {5-6}
const Fruit = z.object({ type: z.literal("fruit"), seeds: z.boolean() })
const Veg = z.object({ type: z.literal("vegetable"), leafy: z.boolean() })
const Produce = z.discriminatedUnion("type", [Fruit, Veg])

z.getDiscriminatedOption(Produce, "fruit") // typeof Fruit
z.getDiscriminatedOption(Produce, "meat") // ❌ TypeScriptのエラー
```

これまでは`Produce.options`から`.find()`で探して、戻り値の型を手で指定していました。
存在しないdiscriminatorを渡すと、コンパイル時に落ちます。

この関数は公式ドキュメントのAPIページには見当たらず、現時点ではリリースノートだけに載っています。
手元では問題なく動きましたが、ドキュメントに載るまでは仕様が変わる可能性もありそうです。

### そのほかの追加はドキュメントで

ここまでのほかにも、細かい追加があります。

- `z.object()`のキーにsymbolを使えるようになった
- `z.nanoid()`で長さを指定できるようになった
- 対応言語が8言語増えた（ベンガル語・ヒンディー語・ブラジルポルトガル語など）

<ExternalLink url="https://zod.dev/api" />

## 破壊的変更

リリースノートでは、これらをbug fixesとして扱っています。
どれも本来あるべき挙動に直す修正です。
そのため、これまでの挙動を前提にしていたスキーマでは、判定が変わるかもしれません。

### 文字列長がUnicodeコードポイント単位に

`.min()`・`.max()`・`.length()`の数え方が変わりました。
UTF-16のコードユニットではなく、Unicodeのコードポイントを数えます。

UTF-16とUnicodeの違いは下記を参考にしてください。

<ExternalLink url="https://qiita.com/tatsubey/items/0ba0d3b84c012fd4d19b" />

```ts title="検証コード" showLineNumbers
z.string().max(5).parse("😀😀😀😀😀")
z.string().min(5).parse("😀😀😀")
```

```text title="zod@4.4.3"
max(5) => ERROR too_big: expected string to have <=5 characters
min(5) => OK "😀😀😀"
```

```text title="zod@4.5.4"
max(5) => OK "😀😀😀😀😀"
min(5) => ERROR too_small: expected string to have >=5 characters
```

挙動が逆転しています！
絵文字1つはUTF-16では2コードユニットなので、`"😀😀😀"`の`.length`は6でした。
v4.5はこれを3と数えます。

ほかの言語やデータベースに合わせるための変更です。
PostgreSQLやMySQL、GoやPythonは、長さの制限をコードポイントで数えます。
`z.toJSONSchema()`が出力する`maxLength`も同じです。

変わり方は`.min()`と`.max()`で逆です。

- `.max()`は緩む方向にだけ動き、これまで弾いていた入力を通すようになる
- `.min()`は厳しくなる方向にだけ動き、これまで通っていた入力を弾くようになる
- `.length()`は指定した数によってどちらにも動く

<Callout variant="warning">
  表示名やユーザー名のように絵文字が入りうるフィールドで`.min()`を使っている場合、これまで通っていた値が弾かれます。アップグレード後にバリデーションのテストを流して確認してください。
</Callout>

ただし「見た目どおりの1文字」で数えてくれるわけではありません。
家族の絵文字のように複数の絵文字をつないだものは、今も複数文字として数えられます。

```text title="家族の絵文字"
"👨‍👩‍👧‍👦".length     => 11
コードポイント数    => 7
z.string().max(1)   => ERROR too_big
```

見た目は1文字ですが、`.max(1)`は通りません！

`.length()`が両方向に動く例です。

```text title="絵文字1つに対する.length(n)"
.length(1)  4.4.3 => ERROR    /  4.5.4 => OK
.length(2)  4.4.3 => OK       /  4.5.4 => ERROR
```

絵文字1つはコードユニットでは2、コードポイントでは1と数えるので、通る指定がそのままずれます。

<SpeechBubble icon="/authors/sugita-yusuke.jpg" name="スギタ">
  v4.5でもっとも怖いのはこの変更だと思っています。仕様としては正しい方向への修正ですし、他の言語やデータベースに揃うのも納得なのですが、日本語のサービスだとニックネームや自己紹介で絵文字が普通に飛んできます。パッチバージョン感覚で上げると本番で気づくことになりかねません。
</SpeechBubble>

### z.iso.datetime()

RFC 3339が秒を必須としているため、それに合わせる修正が入りました。

```text title="秒のないdatetime"
z.iso.datetime().parse("2020-01-01T06:15Z")

zod@4.4.3 => OK "2020-01-01T06:15Z"
zod@4.5.4 => ERROR invalid_format: Invalid ISO datetime
```

秒を省いた形式も受け付けたい場合は、公式が回避策を示しています。

```ts title="秒なしも許容する"
z.union([z.iso.datetime(), z.iso.datetime({ precision: -1 })])
```

`{ offset: true }`を付けた場合も同じ変更が入ります。
`{ local: true }`のほうは`2020-01-01T06:15`を引き続き受け付けます。
タイムゾーンのない日時は、そもそもRFC 3339の対象外だからです。

### そのほかの変更はリリースノートで

上の2つ以外にも、挙動の変わった箇所があります。

- `record`と`intersection`の組み合わせがTypeScriptの型どおりに動くようになった
- `.strict()`に余分なキーと不正な値を同時に渡すと、issueが2件返るようになった
- `__proto__`キーを常に除去するようになった
- `z.ulid()`・`z.ipv6()`・`z.httpUrl()`・`z.emoji()`の判定が厳しくなった

心当たりがあれば、リリースノートで詳細を確認してください。

<ExternalLink url="https://zod.dev/blog/zod-4-5" />

## さいごに

v4.5の変更は、自分で呼んで使うものと、上げるだけで効くものに分かれます。

`z.compile()`は前者です。
サーバーサイドで何度も呼ばれる処理なら、バンドルサイズを気にせず試せます。
クライアントで動かす場合は、7KBの増加と速度を比較して検討する必要がありそうです！
どちらの場合も、`{ strict: true }`で黙ってフォールバックしていないか確認しておくと確実だと思います！

メモリの削減と失敗時の高速化は後者です。
バージョンを上げるだけで効くので、まずはアップグレードして既存のテストを流してみてください。


---

## Oxlintへの移行方法【まだESLint使ってるの？】

- URL: https://blog.to-ko-s.com/articles/oxlint-migration
- 著者: 西原月熙
- 公開日: 2026-08-31
- タグ: TypeScript, JavaScript

> Rust製の爆速LinterであるOxlintへのESLintからの移行方法を解説します。型認識lint(tsgolint)の実測値、TypeScript 7との関係、jsPlugins等、本ブログでの実例をもとに詳しく紹介します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、Rust製の爆速LinterであるOxlintについて、ESLintからの移行方法をまとめていきます💪

前回のOxfmt移行記事の続編で、いよいよLinter編です。

<InternalLink slug="oxfmt-migration" />

実は以前のNext.js 15.5の[記事](/articles/nextjs-15-5)で「LinterはBiomeよりもOxc(oxlint)に期待しています」と書いていたので、ようやくその伏線を回収できた形です😎

Linterについては、今までは基本的に皆さんESLintを使われていたかと思います。
しかし、LinterについてもOxlintの方が速度面で圧倒的なので、移行を検討されている方も多いのではないでしょうか。
また、型の認識についても最近安定版が出たのでいよいよ乗り換えない理由が無くなってきましたね。

本記事では以下の内容を紹介していきます💪

- Oxlintの概要・特徴
- TypeScript 7とOxlintの関係
- 移行方法と本ブログでの実例
- 型認識lintを含めた速度の実測
- jsPluginsについて

## 対象読者

- Oxlintへの移行を検討している方
- ESLintの実行速度が気になっている方
- TypeScript 7に上げたいが、`typescript-eslint`が対応しておらず困っている方

## Oxlintの概要・特徴

### 概要

Oxlintは[Oxc](https://oxc.rs/)プロジェクトに含まれるRust製のLinterで、ESLintの代替を狙うツールです。
2025年6月に1.0がGAとなり、ShopifyやAirbnb、Mercedes-Benzなどの大規模プロジェクトでの採用実績があります✨

<ExternalLink url="https://oxc.rs/docs/guide/usage/linter.html" />

Airbnbでは126,000ファイル超の解析がCI上で7秒、Mercedes-BenzではESLintからの乗り換えでlint時間が71%削減されたと報告されています🔥

<ExternalLink url="https://voidzero.dev/posts/announcing-oxlint-1-stable" />

### ESLintルールのカバレッジ

OxlintはESLintおよび主要プラグインのルールをRustで再実装しています。
組み込みで提供されている主なルールセットは下記です🙌

- `eslint`本体
- `typescript-eslint`
- `eslint-plugin-react`と`eslint-plugin-react-hooks`
- `@next/eslint-plugin-next`
- `eslint-plugin-unicorn`

設定ファイルは`.oxlintrc.json`で、ESLintのJSON形式に近い書き味です。
後述の移行ツールを使えば、既存の`eslint.config.mjs`からほぼ自動で変換できます💪

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  Next.jsにもデフォルトで対応しているのは嬉しいですね😎
</SpeechBubble>

### 型認識lintがstableに

個人的に移行の決め手になったのが、型認識lint(type-aware linting)の対応です。
`no-floating-promises`のような「型情報が無いと判定できないルール」は、長らくESLint(`typescript-eslint`)側でしか行なえませんでした。
しかし、Oxlintは2026年7月に型認識lintがstableになりました🎉

型認識ルールは`typescript-eslint`の61個中59個が実装済みです。

<ExternalLink url="https://github.com/oxc-project/tsgolint" />

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  「速いけど型認識ルールが無いから移行できない」が過去の話になりました✨
</SpeechBubble>

## TypeScript 7とOxlintの関係

最近TypeScriptのバージョンが7に上がったので、そちらについても触れていきます。

### TypeScript 7では`typescript-eslint`が動作しない

TypeScript 7はコンパイラ本体がGo製(通称tsgo)に置き換わった世代です。
爆速になった一方で、従来のJavaScript製コンパイラAPIが廃止されました(新APIは7.1で提供予定)。

<ExternalLink url="https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/" />

`typescript-eslint`はこのJavaScript APIを使って型情報を取得しているため、TypeScript 7では動きません。
実際、`typescript-eslint`のpeerDependenciesは`>=4.8.4 <6.1.0`です。
そのため、`typescript@7`とはインストール自体ができません😨

TypeScript 7対応のissueは存在するものの、ESLint側の制約もあり時間がかかりそうな状況です。

<ExternalLink url="https://github.com/typescript-eslint/typescript-eslint/issues/10940" />

### 登場人物の整理

このあたりは用語が似ていて混乱しやすいので、一度整理しておきます📝

| 名前                | 正体                                                                    |
| ------------------- | ----------------------------------------------------------------------- |
| TypeScript 7        | Go製コンパイラが採用された新しいTypeScript本体                          |
| tsgo                | TypeScript 7のGo製コンパイラの通称                                      |
| `typescript-eslint` | ESLint向けのTypeScriptプラグイン(型認識に従来のJS製コンパイラAPIを使う) |
| tsgolint            | tsgoをベースにしたOxc製の型認識lintエンジン                             |
| `oxlint-tsgolint`   | tsgolintをOxlintから使うためのnpmパッケージ                             |

### Oxlintの対応状況

Oxlintの型認識lint(`oxlint-tsgolint`)は、tsgoベースのバイナリを自前で同梱しており、**プロジェクトにインストールされたTypeScriptパッケージを一切参照しません**。
実際、本ブログでもTypeScript 6のままOxlintへ移行し、型認識lintが動くことを確認してからTypeScript 7に上げています。

つまり、プロジェクトにインストールされているTypeScriptが5系・6系のままでも、型認識lintを利用できます。
「`typescript-eslint`がTypeScript 7に対応するまで待つ」必要が、そもそも無くなるわけです😎

ただし1つ注意点があります。
同梱エンジンはTypeScript 7のセマンティクスで動作するため、ソースと`tsconfig`にはTypeScript 7互換性が必要です。
たとえば`baseUrl`のようにTypeScript 7で廃止されたオプションを使っている場合は、先にtsconfig側の移行が必要です。

<ExternalLink url="https://oxc.rs/docs/guide/usage/linter/type-aware.html" />

{/* prettier-ignore */}
<Callout variant="memo">
  `oxlint-tsgolint`のバージョン表記は同梱チェッカーの世代を表すものです。たとえば`7.0.2001`は「TypeScript 7.0.2ベース + パッチ001」の意味で、
  プロジェクト側にTypeScript 7を要求するものではありません。
</Callout>

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  LinterとTypeScriptのバージョンが完全に切り離されるのは嬉しくもありますが、上手いことバージョンを合わせて使っていく必要があるかもしれないですね🤔
</SpeechBubble>

## 移行方法

Oxlintへの移行方法は、Oxfmtの時と同様に大きく2通りあります。

### 方法A: Claude Skillを使う

`oxc-project`が公式のClaude Skill`migrate-oxlint`を公開しています。

```bash title="ターミナル"
npx skills add https://github.com/oxc-project/oxc --skill migrate-oxlint
```

スキル追加後にClaude Code等で`/migrate-oxlint`を実行すると、移行作業を対話的に進めてくれます。
使用感は前回のOxfmt移行記事で紹介した`migrate-oxfmt`とほぼ同じなので、詳細はそちらをご覧ください🙌

<ExternalLink url="https://github.com/oxc-project/oxc/blob/main/.agents/skills/migrate-oxlint/SKILL.md" />

### 方法B: @oxlint/migrateで移行する

公式の移行ツール`@oxlint/migrate`を使うと、既存のESLint設定から`.oxlintrc.json`を自動生成できます。

```bash title="ターミナル"
npx @oxlint/migrate eslint.config.mjs --type-aware --details
```

`--type-aware`を付けると型認識ルールを含めて変換され、`--details`で移行できなかったルールとその理由が一覧表示されます。
今回はこちらの方法で移行した実例を紹介していきます💪

<ExternalLink url="https://github.com/oxc-project/oxlint-migrate" />

## 実際に移行してみた

本ブログ([TOKOS Tech Blog](https://blog.to-ko-s.com/))のリポジトリで実際に移行した手順を紹介します。

### 移行前の構成

本ブログのESLint構成は、`eslint.configs.all`をベースにルールをてんこ盛りにした構成でした。
`typescript-eslint`の`strictTypeChecked`や`stylisticTypeChecked`に加え、`eslint-plugin-react`のall設定まで重ねています。
個別調整したルールは約90個あり、正直移行はやや大変かなと想像していました🥶

### 移行ツールの実行

`@oxlint/migrate`に`eslint.config.mjs`を渡すと、359ルール中314ルール(約87%)が自動で`.oxlintrc.json`に変換されました✨

`files`ベースのoverrides(`scripts/`ディレクトリ専用の緩和設定)まで正しく変換されたのは驚きでした。

特に、Next.js固有のルールは`@next/eslint-plugin-next`の21ルールすべてがOxlint側に存在し、完全に移行できていました🎉

自動変換後に手を入れたのは、主に下記の3点です。

1. `settings.react.version`の明示(Oxlintは`"detect"`非対応のため`"19.2.8"`を指定)
2. `oxlint-tsgolint`のインストールと`"typeAware": true`の確認
3. `package.json`の`lint`スクリプトを`oxlint src scripts`に変更

`"detect"`は、`eslint-plugin-react`がインストール済みのReactバージョンを自動検出してくれる設定値です。
Oxlintは`"detect"`に未対応のため、バージョンの明示が必要でした。

```bash title="ターミナル"
npm install -D oxlint oxlint-tsgolint
```

<Callout variant="warning">
  `oxlint-tsgolint`はtsgoバイナリ同梱のため、型情報を別途生成する必要はありません。
  ただしNext.jsが自動生成する型(`PageProps`等)を使っている場合、CIでは`next typegen`を先に実行しないと型解決できません。
  本ブログもこの問題に該当するため、CIで`next typegen`を実行してからOxlintを回しています。
</Callout>

### 移行できなかったルールとその判断

一方で、移行できなかったルールもあります。
本ブログでどう判断したかも併せてまとめます📝

| ルール                                  | 状況                                            | 本ブログでの判断                      |
| --------------------------------------- | ----------------------------------------------- | ------------------------------------- |
| `@typescript-eslint/naming-convention`  | 未実装(型情報必須のため後述のjsPluginsでも不可) | コードレビューで担保する運用に切替    |
| `import/order`                          | 実装しない方針(フォーマッターの責務と整理)      | Oxfmtの`sortImports`に引き継ぎ        |
| `@stylistic`系の一部                    | jsPlugins(alpha)経由でのみ利用可能              | alpha依存を避けて廃止 & Oxfmt側に移譲 |
| `react/jsx-no-leaked-render`等の細則4件 | 未実装                                          | 影響が小さいため受容                  |

`import/order`については、`.oxfmtrc.json`に下記を追加することでOxfmt側がimport文の並び替えを担当してくれます。

```jsonc title=".oxfmtrc.json"
{
  // その他設定...
  "sortImports": true,
}
```

lintルールとしての強制が無くなる分、CIには`oxfmt --check`を追加してフォーマット崩れを検知するようにしました💪

`naming-convention`については、昨今のLLMの賢さならよっぽどおかしな命名規則(ex: キャメルケースとスネークケースの混在)等は実装しないと思っています。
なので、コードレビューで担保する運用に切り替えました。

### 誤検知への対処

移行後の初回実行で、誤検知が1件だけありました。
JSXを返さない高階関数`createCachedLoader`が、Reactコンポーネントと誤判定されて`react/function-component-definition`に引っかかるというものです。

こちらはESLintと同様の記法を使い、インラインで無効化できます。

```typescript title="cache.ts"
const isDev = process.env.NODE_ENV === "development"

/**
 * ローダー関数をキャッシュ付きバージョンに変換する高階関数
 */
export const createCachedLoader = <T>(loader: () => T): (() => T) => {
  let cache: T | null = null

  // Reactコンポーネントではない高階関数の戻り値を誤検知するためoffに
  // oxlint-disable-next-line react/function-component-definition
  return () => {
    if (!isDev && cache !== null) {
      return cache
    }
    cache = loader()
    return cache
  }
}
```

約100ファイルの実プロジェクトを移行して誤検知がこの1件だけだったのは、正直期待以上でした✨

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  移行ツールの完成度が本当に高く、体感としてはOxfmt移行と同じくらいスムーズでした😎
</SpeechBubble>

## 移行後に実際にどれくらい速くなったのか

本ブログのリポジトリ(`src`と`scripts`の約100ファイル)で実測してみました🔥
計測に使用したのは`oxlint@1.79.0` + `oxlint-tsgolint@7.0.2001`で、各3回計測した中央値です。

```bash title="ターミナル"
time npx oxlint src scripts
```

| 条件       | eslint  | oxlint   | ESLint比   |
| ---------- | ------- | -------- | ---------- |
| 型認識なし | 約6.7秒 | 約0.36秒 | **約19倍** |
| 型認識あり | 約6.7秒 | 約1.1秒  | **約6倍**  |

型認識を有効にすると型認識なしの約3倍の時間がかかりますが、それでもESLint比では約6倍高速でした😎

「型認識lintは遅くなるから捨てる」という選択を取らずに済むのがOxlintの良さです。
`no-floating-promises`のようなバグを未然に防ぐルールを維持したまま、lint時間を大幅に短縮できます💪

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  CIのlintジョブも体感でかなり速くなりました。地味にPRのマージ待ち時間に効いてきます✨
</SpeechBubble>

## TypeScript 7に上げてみた

本記事のメインテーマではありませんが、Oxlint移行によって`typescript-eslint`への依存が消えたので、TypeScript 7に上げてみました。
結論、`typescript`のバージョンを上げるだけで完了でした🎉

```bash title="ターミナル"
npm install -D typescript@^7.0.2
```

TypeScript 7では`types`のデフォルトが`[]`になる等の破壊的変更があります。
ただ、Next.jsプロジェクトでは`next-env.d.ts`経由の型参照で吸収されるため、本ブログではtsconfigとコードを一切変更せずに済みました。
`tsc --noEmit`もエラーゼロで通っています✨
Next.js 16.3はTypeScript 7を公式サポートしており、`next build`はプロジェクトローカルの`tsc`コマンドを使って型チェックしてくれます🙌

<ExternalLink url="https://nextjs.org/blog/next-16-3" />

{/* prettier-ignore */}
<Callout variant="warning">
  TypeScript 7のnpmパッケージには`tsserver.js`が含まれないため、VSCode(Cursor)の「Use Workspace Version」は使えません。
  当面はエディタ内蔵のTypeScriptをそのまま使うか、公式の「TypeScript 7」拡張機能(旧称: TypeScript Native Preview)を導入する形になります。
  なお後者では、Next.jsのTypeScriptプラグインによる診断が効かなくなる点に注意です。
</Callout>

<ExternalLink url="https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.native-preview" />

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  「Linterが理由でTypeScriptを上げられない」状態から解放されたのが嬉しかったです🥳
</SpeechBubble>

## jsPlugins(alpha)について

「組み込みルールに無いプラグインはどうするの？」という疑問については、jsPluginsで解決可能です！
OxlintはESLint v9互換のプラグインAPIをJavaScriptで提供しており、既存のESLintプラグインをそのまま読み込める仕組みを開発中です。

<Callout variant="warning">記事執筆時点(2026-08-23)ではalpha段階です。</Callout>

設定は`.oxlintrc.json`の`jsPlugins`にプラグインを追加し、`rules`で使いたいルールを指定します。
組み込みプラグインと名前が衝突する場合は、下記のようにエイリアスも指定できます。

```jsonc title=".oxlintrc.json"
{
  "jsPlugins": [
    // 組み込みに無いプラグインはそのまま指定
    "@stylistic/eslint-plugin",
    // 組み込みの`jsdoc`と名前が衝突するためエイリアスを付ける
    {
      "name": "jsdoc-js", // ルール名のプレフィックス
      "specifier": "eslint-plugin-jsdoc", // 実際のnpmパッケージ名
    },
  ],
  // 使いたいルールを指定する
  "rules": {
    "@stylistic/semi": ["error", "never"],
    "jsdoc-js/check-alignment": "error", // プレフィックスはエイリアス名
  },
}
```

ほぼ全てのパターンにおいて、`eslint-plugin-react-hooks`等の実プラグインで正常に動作することが確認されています。
ただし、下記の制約があります。

- 型情報を必要とするルールは動かない
- カスタムパーサ(Vue/Svelte等)は非対応
- alpha段階のため、APIは今後変わる可能性がある

本ブログの移行では`@stylistic`の2ルールをjsPluginsに載せる選択肢もありましたが、alpha段階の機構に依存するのを避けて廃止を選びました。(+ oxfmt側のルールに寄せたかった)
安定化したらあらためて活用を検討したいところです💪

<ExternalLink url="https://oxc.rs/docs/guide/usage/linter/js-plugins.html" />

## VSCode(Cursor)での設定

エディタ統合は、Oxfmt移行時にインストールした公式拡張機能`Oxc`がそのまま使えます。
拡張機能が`.oxlintrc.json`を読み取り、エディタ上でリアルタイムにlint結果を表示してくれます🙌

拡張機能のインストール方法や`settings.json`の設定は、前回の記事をご覧ください。

<InternalLink slug="oxfmt-migration" />

## 補足

最後に、移行のトレードオフ及び本ブログでの方針を記載します。

- `naming-convention`による命名規則の機械強制(→ レビュー運用でカバー)
- `import/order`のlintとしての強制(→ Oxfmtの`sortImports` + `oxfmt --check`でカバー)
- `@stylistic`系の体裁ルールの一部(→ フォーマッターとレビューでカバー)
- ESLintの豊富なサードパーティプラグイン資産(→ jsPluginsの安定化待ち)

本ブログでは、これらを許容しても「TypeScript 7へアップデート」「速度6倍」の方を取った形です。
逆に言うと、`naming-convention`やサードパーティプラグインを必須とするプロジェクトでは、もうしばらくESLint併用(`eslint-plugin-oxlint`でルール重複を回避する構成)が現実的だと思います🤔

とは言え、今後の潮流としてはOxlintの方が良さそうなので、今後はOxlintをメインに使っていきたいと思います。
プラス、他のプロジェクトもoxlint+oxfmtで運用していて問題を感じていないので、やはり移行を推奨という感想になりました💪

## おわりに

今回は、Rust製の爆速LinterであるOxlintへの移行方法を本ブログでの実例と実測値を交えて紹介しました🎉

- 型認識lintを維持したまま約6倍高速化(型認識なしなら約19倍)
- `@oxlint/migrate`で約87%のルールが自動移行、Next.jsルールは21/21で完全移行
- 型認識lintがインストール済みTypeScriptに依存しなくなり、TypeScript 7へ即移行可能に
- 移行しきれないルール(`naming-convention`等)はあるが、大きな問題は無い

OxfmtとOxlintが揃い、本ブログのフォーマッター・LinterはOxcスタックに完全移行しました🎉
これからもアップデート等があれば、随時記事にしていきたいと思います！

<ExternalLink url="https://oxc.rs/" />


---

## 【HTML】キーボード操作で考えるアクセシビリティの基本

- URL: https://blog.to-ko-s.com/articles/keyboard-accessibility
- 著者: 小田優真
- 公開日: 2026-07-27
- タグ: HTML

> マウスを使わずキーボードだけでWebページを操作するという視点から、HTMLのアクセシビリティを解説します。button要素の正しい使い方、フォーカスの当たり順、フォーカスリングの扱いを、WCAGの「操作可能」原則と対応づけながら紹介します。


## はじめに

こんにちは、株式会社TOKOSの優真です。

今回は、HTMLによるWebアクセシビリティを「キーボード操作」の観点から解説します。
WebページのアクセシビリティはHTMLの書き方に左右されます。どの要素を選び、どう組み立てるかによって、操作しやすさが変わります。
普段PCをマウスで操作していると意識しないのですが、マウスを使わずキーボードだけでWebページを操作している方がいます。

そうした操作を妨げないHTMLの書き方は、特別な知識がなくても、基本を押さえるだけで実践できます。
記事内にはキーボード操作を録画した動画も載せているので、あわせて確認してみてください。

### 対象読者

- HTMLのアクセシビリティに興味がある方
- キーボード操作で生じる問題を知りたい方

## キーボード操作とアクセシビリティ

### アクセシビリティとは

アクセシビリティとは、年齢や障害の有無にかかわらず誰もがWebページを利用できる状態を指す考え方です。
書籍『Webアプリケーションアクセシビリティ』では「利用可能な状況の幅広さ」と表現されています。
使う人や環境・状態の幅まで含むため、障害のある方や片手がふさがっている時、加齢で操作しづらくなったときなども対象に入ります。
似た言葉に「ユーザビリティ（使いやすさ）」がありますが、視点が異なります。
ユーザビリティが「どれだけ快適に使えるか」に注目する一方、アクセシビリティは「そもそも使えるのか」という、利用できる範囲そのものを広げる考え方です。キーボードで操作しやすいページは、マウスが使えない方にもたまたまマウスが手元にない方にも使いやすくなります。

<ExternalLink
  url="https://gihyo.jp/book/2023/978-4-297-13366-5"
  title="Webアプリケーションアクセシビリティ（技術評論社）"
/>
その中でも「キーボード操作」は、アクセシビリティの向上に繋がる重要な観点の1つです。

### キーボード操作が重要な理由

キーボード操作ができないとWebページ自体を使いこなせない人がいます。たとえば、次のような方です。

- 手の動きに制約があってマウスの細かい操作が難しい方
- 視覚に制約があって画面を直接見ることが難しい方

手の動きに制約がある方は、マウスの代わりに`Tab`キーや矢印キーでフォーカスを動かします。`Enter`キーや`Space`キーで実行するなど、キーボードだけで画面内を移動します。
視覚に制約がある方は、スクリーンリーダー（画面の内容を音声で読み上げるソフト）とキーボードの専用ショートカット（見出しやリンクへのジャンプなど）を組み合わせて、ページ内の要素をたどりながら操作します。

キーボードだけで操作する方にとって、操作できないボタンやリンクは「存在しないもの」と同じです。

<SpeechBubble icon="/authors/oda-yuma.jpg" name="ユウマ">
  自分で作ったWebが、誰かにとっては使えないものになっているのは悲しいですよね🥲
</SpeechBubble>

### WCAGの「操作可能」という原則

アクセシビリティには、WCAG（Web Content Accessibility Guidelines）という国際的なガイドラインがあります。
このWCAGは「知覚可能」「操作可能」「理解可能」「堅牢」という4つの原則で構成されています。

このうちキーボード操作と深く関わるのが、**操作可能（Operable）**の原則です。
これは、ユーザーインターフェイスのコンポーネントやナビゲーションが操作できる状態でなければならない、という考え方です。

「操作可能」はさらに細かい達成基準に分かれていますが、本記事で扱うポイントは、次の基準と対応しています。

| 本記事で扱うポイント                 | 対応するWCAGの達成基準   |
| ------------------------------------ | ------------------------ |
| キーボードだけで操作できるようにする | 2.1.1 キーボード         |
| フォーカスの順序を整える             | 2.4.3 フォーカス順序     |
| フォーカスリングを消さない           | 2.4.7 フォーカスの可視化 |

各ポイントの解説のなかで、対応する基準もあわせて紹介していきます。

<ExternalLink
  url="https://developer.mozilla.org/ja/docs/Web/Accessibility/Guides/Understanding_WCAG/Operable"
  title="操作可能アクセシビリティ（MDN Web Docs）"
/>

### キーボード操作の基本

キーボードだけでWebページを操作するとき、主に次のキーを使います。

#### `Tab`キー・`Shift+Tab`キーでフォーカスを移動する

`Tab`キーを押すと、リンクやボタン、入力欄など操作できる要素へ順番にフォーカスが移っていきます。
フォーカスとは「いまどの要素を選んでいるか」を示す状態のことです。

| キー          | 動作                         |
| ------------- | ---------------------------- |
| `Tab`         | 次の操作可能な要素へ移動する |
| `Shift + Tab` | 前の操作可能な要素へ戻る     |

下記の動画では、`Tab`キーを押すたびにリンクへ順番にフォーカスが移り、フォーカスの当たった要素に枠線（フォーカスリング）が表示されています。
画面下の「フォーカス状態」には、いまどの要素にフォーカスがあるかが表示されています。

<Video src="/articles/keyboard-accessibility-1.mp4" />

この枠線を目で追うことで、いま自分がどこを操作しようとしているかが分かります。

#### `Enter`キー・`Space`キーで実行する

フォーカスを当てた状態で、`Enter`キーや`Space`キーを押すと、その要素が実行されます。

| 要素                   | 実行に使うキー    |
| ---------------------- | ----------------- |
| リンク（`a`タグ）      | `Enter`           |
| ボタン（`button`タグ） | `Enter` / `Space` |

下記の動画では、リンクは`Enter`キーで、ボタンは`Space`キーで実行できていることが確認できます。

<Video src="/articles/keyboard-accessibility-2.mp4" />

## キーボードだけで操作できるようにする

最初のテクニックは、もっとも基本的で効果の大きいポイントです。
「ボタンやリンクを、正しいHTML要素で作る」というだけの話ですが、これを外すとキーボードで操作できなくなります。

### 問題のあるコード例（`div`タグを`button`タグにする）

見た目を整えやすいという理由で、`div`タグにクリックイベントを付けてボタンのように使うことがあります。

```html showLineNumbers title="HTML"
<div class="button">送信</div>
```

CSSで見た目をボタンらしく整えれば、マウスで使う分には問題なく動きます。
しかし、ここに落とし穴があります。

### `Tab`キーでどうなるか

このページをキーボードで操作しようとすると、次の問題が起きます。

- `Tab`キーを押しても、この「送信」にフォーカスが当たらない
- そもそも到達できないので、`Enter`キーを押して実行できない

下記の動画では、`Tab`キーで上の「お問い合わせ」リンクと下の「キャンセル」ボタンにはフォーカスが当たりますが、`div`タグで作った真ん中の「送信」だけが飛ばされています。

<Video src="/articles/keyboard-accessibility-3.mp4" />

`div`タグはもともと操作するための要素ではないため、`Tab`キーの移動先（フォーカスの対象）になりません。
つまり、マウスを使えないユーザーは、このボタンを永遠に押せません。

<Callout variant="warning">
  見た目がボタンでも、`div`タグや`span`タグで作られたボタンはキーボードで操作できません。マウスユーザーには気づきにくいため、見落とされがちな問題です。
</Callout>

### 改善方法（`button`タグと`a`タグを使う）

解決方法はとてもシンプルで、用途に合ったHTML要素を使うだけです。
これは「セマンティックHTML」と呼ばれる考え方です。

セマンティックHTMLとは、見た目ではなく「その要素がどんな意味・役割を持つか」に基づいてマークアップすることです。MDNの用語集でも、セマンティクスとはコードが持つ意味のことで、HTMLでいえば要素が果たす目的や役割を指す（どう見えるかではない）と説明されています。
見た目を整えるのはCSSの役割で、HTMLは「中身が何であるか」を表すために使う、というわけです。
意味に合った要素を使うと、ブラウザや支援技術がその役割を正しく理解できます。たとえば`button`タグを使えば「これはボタンだ」と伝わり、キーボード操作などの機能も自動で備わります。
具体的には、用途に合わせて次のように要素を選びます。

- ページ内で何かを実行する（送信、開閉など）→ `button`タグ
- 別のページへ移動する → `a`タグ

<ExternalLink
  url="https://developer.mozilla.org/ja/docs/Glossary/Semantics"
  title="Semantics（セマンティクス）（MDN Web Docs）"
/>

```html showLineNumbers title="HTML"
<!-- 何かを実行するならbutton -->
<button type="button">送信</button>

<!-- ページ移動ならa -->
<a href="/contact">お問い合わせ</a>
```

`button`タグや`a`タグは、最初からキーボード操作に対応しています。
`Tab`キーでフォーカスが当たり、`Enter`キー（`button`タグなら`Space`キーも）で実行できます。
特別な属性を追加しなくても、ブラウザがこれらの動作を自動で備えているのです。

下記の動画では、`button`タグに変えた「送信」にもきちんとフォーカスが当たり、操作できるようになっています。

<Video src="/articles/keyboard-accessibility-4.mp4" />

<Callout>
  この内容は、WCAGの達成基準「2.1.1キーボード」に対応します。キーボードを使って行えない操作を除き、すべての機能はキーボードでアクセスできるべき、とされています。`button`タグや`a`タグといった意味のある要素を使うことが、この基準を満たす近道です。
</Callout>

## フォーカスの当たり順を整える

正しい要素を使えていても、次に問題になりやすいのが「フォーカスの当たる順番」です。
`Tab`キーで移動したときに、意図しない順番で飛んでしまうと操作しづらくなります。

### 問題のあるコード例（見た目と並び順がずれている）

CSSで要素の位置を入れ替えると、HTMLの並び順はそのままに、画面上の見た目だけがずれてしまう場合があります。

```html showLineNumbers title="HTML"
<!-- HTML上は「キャンセル → 送信」の順 -->
<div class="buttons">
  <button type="button">キャンセル</button>
  <button type="submit">送信</button>
</div>
```

```css showLineNumbers title="CSS"
/* 見た目だけ左右を入れ替える */
.buttons {
  display: flex;
  flex-direction: row-reverse;
}
```

この場合、画面では「送信」が左、「キャンセル」が右に表示されます。
しかし`Tab`キーの移動順は、見た目ではなくHTMLの並び順に従います。

### `Tab`キーでどうなるか

`Tab`キーを押すと、画面の見た目とは逆の順序でフォーカスが移動します。

- 見た目の並び：送信（左）→ キャンセル（右）
- フォーカスの移動順：キャンセル → 送信

下記の動画では、左にある「送信」より先に、右の「キャンセル」にフォーカスが当たっています。
見た目は左から右に並んでいるのに、フォーカスは右の要素から先に当たっているのが分かります。

<Video src="/articles/keyboard-accessibility-5.mp4" />

目で見ている順番とフォーカスの動きが食い違うため、キーボードユーザーは混乱しやすくなります。
左から押していくつもりが、思っていたボタンと違うものにフォーカスが当たってしまうのです。

<Callout variant="warning">
  CSSで見た目の順序を変えても、`Tab`キーの移動順はHTMLの並び順のままです。見た目と操作順がずれると、キーボードユーザーにとって使いにくくなります。
</Callout>

### 改善方法（DOM順を見た目に合わせる）

基本方針は「見た目の順番とHTMLの並び順をできるだけ一致させる」ことです。
CSSで順序を入れ替えるのではなく、HTMLの記述順そのものを見た目に合わせるのが確実です。

```html showLineNumbers title="HTML"
<!-- 見た目の順番どおりにHTMLを書く -->
<div class="buttons">
  <button type="submit">送信</button>
  <button type="button">キャンセル</button>
</div>
```

下記の動画では、見た目と`Tab`キー順が一致し、左の「送信」から右の「キャンセル」へ自然な順番でフォーカスが移動しています。

<Video src="/articles/keyboard-accessibility-6.mp4" />

### `tabindex`でフォーカス順を変えるのは非推奨

ここまで「フォーカスの当たり順」を見てきましたが、関連してよく登場する`tabindex`という属性についても触れておきます。

`tabindex`（タブインデックス）は、要素のフォーカスの扱いを制御するためのHTMLのグローバル属性です。
通常は`Tab`キーでフォーカスが当たるのはリンクやボタンや入力欄といった操作可能な要素だけです。`tabindex`を使うと、それ以外の要素をフォーカスできるようにしたり、逆にフォーカスの順序から外したりできます。

ここで、「`tabindex`を使えばフォーカス順を直接指定できるのでは？」と思った方もいるかもしれません。
`tabindex`は、次の3パターンの値を取ります。

| 値                 | 動作                                                                |
| ------------------ | ------------------------------------------------------------------- |
| `tabindex="0"`     | 通常はフォーカスされない要素を、フォーカス対象に加える              |
| `tabindex="-1"`    | キーボードの`Tab`キー移動からは外すが、スクリプトでフォーカスは可能 |
| `tabindex="1"`以上 | フォーカス順を手動で指定する（**非推奨**）                          |

一見すると、正の値で並び順の問題を直せるように思えます。次のような書き方です。

```html showLineNumbers title="HTML（非推奨の例）"
<!-- 正の値のtabindexでTabキー順を無理やり指定する -->
<div class="buttons">
  <button type="submit" tabindex="1">送信</button>
  <button type="button" tabindex="2">キャンセル</button>
</div>
```

しかし正の値には、次のような問題があります。

- ページ全体の管理が破綻する：正の値の`tabindex`を付けた要素は、通常のリンクやボタンよりもすべて先にフォーカスされます。一部の要素にだけ付けると、ページ全体のフォーカス順が乱れてしまいます
- 要素を追加するたびに番号を振り直す必要がある：後からボタンを1つ足すだけで、関連する番号をすべて付け替えなければならず、保守が一気に大変になります
- そもそも根本解決になっていない：見た目とDOM順がずれているという本当の原因はそのまま残ります

下記の動画は、ボタンに正の値の`tabindex`を付けた例です。
本来なら上にある「お問い合わせ」リンクから先にフォーカスされるはずです。しかし`tabindex`を付けた「送信」「キャンセル」ボタンへ先にフォーカスが移ってしまいます。その結果、Tabキー順が「送信 → キャンセル → お問い合わせ → 戻る」という不自然な並びになっています。

<Video src="/articles/keyboard-accessibility-7.mp4" />

MDNでも、正の値の`tabindex`は避けるよう警告されています。

> tabindex に正の値を使わないでください。 tabindex に正の値を持つ要素は、ページ上の既定のインタラクティブ要素の前に配置されます。

<ExternalLink
  url="https://developer.mozilla.org/ja/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets"
  title="キーボードで操作可能な JavaScript ウィジェット（MDN Web Docs）"
/>

<ExternalLink
  url="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Accessibility/HTML"
  title="HTML: アクセシビリティの良き基本（MDN Web Docs）"
/>

では、`tabindex`はどう使うのが良いのでしょうか。値は`0`または`-1`に限定するのが安全です。
`0`は本来フォーカスできない要素をフォーカス可能にしたいとき、`-1`はスクリプトからフォーカスを当てたいとき（モーダルを開いた直後など）に使います。
いずれもフォーカス「順」を操作するものではない、という点がポイントです。

フォーカスの順番が論理的であることは、WCAGの達成基準「2.4.3フォーカス順序」に対応します。
タブ移動の順序が意味のある並びになっていれば、キーボードで操作する人にとって、画面を見ている場合も見ていない場合も使いやすいページになります。

## フォーカスリングを消さない

最後は、見落とされがちですが重要なポイントです。
「いまどこにフォーカスが当たっているか」が見える状態を保つことです。

### 問題のあるコード例（outline: none）

要素にフォーカスが当たると表示される枠線（フォーカスリング）を、`outline: none`で消してしまっているケースは意外とよくあります。
原因のひとつが、リセットCSSや自前の初期化スタイルで`outline`をまとめて消していることです。自分では消した覚えがなくても、次のような指定がどこかに入っていると、気づかないうちにフォーカスリングが消えます。

```css showLineNumbers title="CSS"
/* リセットCSSなどでまとめて消してしまいがち */
*:focus {
  outline: none;
}
```

ほかにも、ボタンの見た目を整える過程で`:focus`のスタイルごと上書きしてしまうケースや、標準のフォーカスリングの見た目がデザインに合わないからと意図的に消すケースがあります。
いずれにせよ、マウスで操作している分には見た目がすっきりして、問題に気づきにくいのが厄介なところです。

### `Tab`キーでどうなるか

しかしキーボードで操作すると、深刻な問題が起きます。

- `Tab`キーを押しても、今どの要素にフォーカスが当たっているか分からない
- どこを操作しようとしているのか見失い、操作不能に近い状態になる

下記の動画では、上の「お問い合わせ」と下の「キャンセル」には枠線が見えます。`outline: none`を指定した真ん中の「ボタン」だけは、フォーカスが当たっても見た目が変わりません。
画面下の「フォーカス状態」では中央のボタンにフォーカスが移っているのに、画面上ではその位置が分からない状態です。

<Video src="/articles/keyboard-accessibility-8.mp4" />

フォーカスリングは、キーボードユーザーが「いま自分がどこにいるか」を把握するための重要な手がかりです。
これを消してしまうと、マウスで操作しているときにカーソルが見えないのと近い状況になり、操作がとても難しくなります。

### 改善方法（`:focus-visible`で見やすく示す）

「マウス操作のときは枠線を出さず、キーボード操作のときだけ枠線を出したい」という要望には、`:focus-visible`が使えます。

`:focus-visible`は、ブラウザが「キーボード操作によるフォーカス」と判断したときだけ適用される擬似クラスです。
これを使えば、マウスクリック時には枠線を出さず、`Tab`キーでの移動時にはしっかり枠線を表示できます。

```css showLineNumbers title="CSS"
/* キーボード操作のときだけ、見やすい枠線を表示する */
button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}
```

`:focus-visible`はSafariを含むすべての主要ブラウザが対応済みなので、いまはこのシンプルな書き方で問題ありません。
マウスクリック時にはブラウザが「キーボード操作ではない」と判断して枠線を出さず、`Tab`キーでの移動時だけ上のスタイルが適用されます。

`:focus-visible`非対応の古いブラウザにも備えるなら、`:focus:not(:focus-visible)`でマウス操作時の枠線だけを消す書き方もあります。`:focus-visible`が効かない環境では`:focus`のスタイルが残るため、フォーカスリングが消えにくくなります。必須ではなく、より慎重に対応したい場合の選択肢です。

```css showLineNumbers title="CSS"
/* （任意）未対応ブラウザにも備える書き方 */
button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}
```

下記の動画では、真ん中のボタンにも`Tab`キーでの移動時にしっかり枠線が表示され、フォーカス位置が分かるようになっています。

<Video src="/articles/keyboard-accessibility-9.mp4" />

これで、マウスユーザーには余計な枠線を見せず、キーボードユーザーにはフォーカス位置をはっきり示すことができます。
枠線のデザイン（色や太さ）は、背景とのコントラストを確保しつつ、サイトに合わせて調整してください。

<Callout>
  どうしてもフォーカスリングのデザインを変えたい場合は、`outline`を消すだけで終わらせず、必ず代わりの見た目（枠線・背景色の変化など）を用意してください。「消す」のではなく「見やすく置き換える」のがポイントです。
</Callout>

この「フォーカス位置が目で見えること」は、WCAGの達成基準「2.4.7フォーカスの可視化」に対応します。
タブ移動したときに、どの要素にフォーカスがあるかを示す視覚的な目印が必要、とされています。`outline`を消す場合も、必ず代わりの見た目を残すことが大切です。

## 補足情報

本記事ではキーボード操作の基本に絞って解説しました。
さらに踏み込んで対応する場合は、次のようなキーワードも知っておくと役立ちます。

- スキップリンク：ナビゲーションを飛ばして本文へ直接移動できるリンク
- フォーカストラップ：モーダルを開いている間、フォーカスをその中にとどめる手法
- WAI-ARIA：HTMLだけでは補えない役割や状態を伝えるための仕様（まずは正しいHTML要素を使うのが優先）

スキップリンクの実装は、MDNのHTML機能ガイドで解説されています。

<ExternalLink
  url="https://developer.mozilla.org/ja/docs/Learn_web_development/Howto/Design_and_accessibility/HTML_features_for_accessibility"
  title="アクセシビリティを推進する HTML の機能（MDN Web Docs）"
/>

フォーカストラップはモーダルUIでよく使われます。当ブログでもReact Ariaを使ったアクセシビリティ対応モーダルの記事があります。

<InternalLink slug="react-aria-modal" />

WAI-ARIAの概要は、MDNのアクセシビリティセクションが参考になります。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA" title="ARIA（MDN Web Docs）" />

キーボード操作はアクセシビリティの向上に繋がる要素の1つにすぎません。
スクリーンリーダーでの読み上げや色のコントラストなど、ほかの観点も含めた全体像は、MDNのアクセシビリティガイドが参考になります。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/Accessibility" title="アクセシビリティ（MDN Web Docs）" />

## おわりに

この記事では、HTMLのアクセシビリティを「キーボード操作」という視点から紹介しました。

- マウスを使えないユーザーのために、キーボードだけで操作できることが重要
- ボタンやリンクは`button`タグ・`a`タグを使えば、キーボード操作に自動で対応できる
- フォーカスの当たり順は、HTMLの並び順で自然に整えるのが基本
- フォーカスリングは消さず、`:focus-visible`で見やすく示す
- これらはWCAGの「操作可能」原則（2.1.1・2.4.3・2.4.7など）に対応している

ぜひ皆さんのサイトでも、一度キーボードだけで操作して確かめてみてください。


---

## 【React Native】FlashListとuseDeferredValueで固定ヘッダー付きリストを実装する

- URL: https://blog.to-ko-s.com/articles/react-native-flashlist-sticky-header
- 著者: 鳥井京祐
- 公開日: 2026-07-21
- タグ: React, TypeScript, パフォーマンス

> React NativeのFlashListとReactのuseDeferredValueを組み合わせて、スクロールに追従する固定ヘッダーと、タブ切り替え時のチラつき防止を実装する方法をコード例とともに解説します。


## はじめに

こんにちは、株式会社TOKOSの鳥井です！
今回は、React NativeのFlashListとReactの`useDeferredValue`を組み合わせて、固定ヘッダー付きのリストを実装する方法についてまとめでみました！

最近開発していたモバイルアプリで「上部にカルーセル、その下にタブバー、さらにその下に一覧」という画面を実装しました。
タブバーを画面上部に固定する要件があり、それはFlashListのオプションで実現できました。しかし、タブを切り替えるたびに画面全体がチラつく、という問題が残りました🥲

本記事では、FlashListを用いて固定ヘッダーの実装と、`useDeferredValue`によるチラつきの解消方法を紹介します💪

### 対象読者

- React Nativeを用いたモバイルアプリの開発をしている方
- FlashList、`useDeferredValue`の使い方を学びたい方

## 完成イメージと画面構成

本記事で最終的に作る画面はこちらです。

<Video src="/articles/react-native-flashlist-sticky-header-1.mp4" />

これらをFlashListで実装していきます！
まずは、FlashListがどんなライブラリかを見ていきましょう💪

## FlashListの概要

FlashListは、Shopifyが開発しているReact Native向けのリストコンポーネントライブラリです。
React Native組み込みのFlatListと互換性のあるAPIを持ちながら、より高速に動作するのが特長です！

<ExternalLink url="https://shopify.github.io/flash-list/" />

基本的な使い方はFlatListと同じです。
表示したいデータの配列を`data`に渡し、各要素の見た目を`renderItem`で返すだけです。

```tsx title="FlashListの基本的な使い方" showLineNumbers
import { FlashList } from "@shopify/flash-list"
import { Text } from "react-native"

const products = [
  { id: 1, name: "商品A" },
  { id: 2, name: "商品B" },
  { id: 3, name: "商品C" },
]

function ProductList() {
  return (
    <FlashList
      data={products}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={(item) => item.id.toString()}
    />
  )
}
```

`data`に渡した配列の各要素が、`renderItem`を通して順番に描画されます。
このあとの固定ヘッダー付きリストの実装で、この「1つの配列を渡して描画する」という仕組みを応用します！

また、本記事では2025年にリリースされたv2を前提とします。
v2では、内部実装が新アーキテクチャ（New Architecture）向けに書き直されました。

<Callout variant="warning">
  FlashListのv2は新アーキテクチャを前提に設計されています。
  旧アーキテクチャの環境やv1からの移行を検討している場合は、APIや前提条件が異なるため公式ドキュメントを確認してください。
</Callout>

## `stickyHeaderIndices`でヘッダーを固定する

まずは、スクロールしてもタブバーだけを上部に固定する部分を実装します！
カルーセルはスクロールに合わせて流し、タブバーは上部に固定、という仕様を満たす必要があります。
これを実現するために使用するのが、FlashListの`stickyHeaderIndices`です！
これは固定したい要素のインデックスを指定するためのpropです！

<ExternalLink url="https://shopify.github.io/flash-list/docs/usage#stickyheaderconfig" />

<SpeechBubble icon="/authors/torii-keisuke.jpg" name="鳥井">
  固定ヘッダーまわりの設定は`stickyHeaderIndices`だけではありません！
  `stickyHeaderConfig`を使うと、固定する位置のオフセットや背景の差し込みなどをさらに細かく調整できます。凝ったヘッダーにしたいときは、公式ドキュメントも覗いてみてください💪
</SpeechBubble>

### リスト要素を1つの配列で定義

先程見たとおり、FlashListは`data`に渡した1つの配列を描画します。
そして`stickyHeaderIndices`で固定できるのも、この配列に含めた要素だけです。
つまり、カルーセル・ヘッダー・商品を別々に置くのではなく、すべてを1つの配列にまとめる必要があります。
まず、配列の要素をユニオン型で定義します。

```tsx title="リスト要素の型定義"
type ListItem = { type: "carousel" } | { type: "tabHeader" } | { type: "product"; product: Product }
```

この型をもとに、実際のデータを1次元の配列に並べます。
先頭にカルーセルとヘッダーを置き、その後ろに商品を展開します。

```tsx title="1つの配列にまとめる" showLineNumbers
const listData: ListItem[] = [
  { type: "carousel" },
  { type: "tabHeader" },
  ...products.map((product) => ({ type: "product" as const, product })),
]
```

描画は`renderItem`で型ごとに振り分けます。

```tsx title="型ごとに描画を振り分ける" showLineNumbers
const renderItem = ({ item }: ListRenderItemInfo<ListItem>) => {
  switch (item.type) {
    case "carousel":
      return <Carousel />
    case "tabHeader":
      return <Tabs tabs={tabs} selectedTab={selectedTab} onChangeTab={setSelectedTab} />
    case "product":
      return <ProductCard product={item.product} />
    default:
      throw new Error(`Unexpected list item type: ${(item as ListItem).type}`)
  }
}
```

### `stickyHeaderIndices`で固定対象を指定する

あとは`FlashList`に`stickyHeaderIndices`を渡すだけです。
今回は`tabHeader`が`renderItem`のindex[1]なので、`[1]`をpropとして渡します。

```tsx title="ヘッダーを固定する" showLineNumbers {3}
<FlashList
  data={listData}
  stickyHeaderIndices={[1]}
  getItemType={(item) => item.type}
  keyExtractor={(item) => (item.type === "product" ? item.product.id.toString() : item.type)}
  renderItem={renderItem}
/>
```

`stickyHeaderIndices`に渡したインデックスの要素は、スクロールでその位置に達すると上部に固定されます。
カルーセルは`renderItem`のindex[0]なので固定されず、通常どおりスクロールで流れていきます。

<Video src="/articles/react-native-flashlist-sticky-header-2.mp4" />

その他にも指定している2つのpropsにも触れておきます。

| prop           | 説明                                                                                                                     |
| -------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `getItemType`  | 画面外のリストが描画されるタイミングで、種類ごとに各行の要素を再利用してくれる。異なる種類の要素がある場合は設定を推奨。 |
| `keyExtractor` | 要素ごとに一意なキーを返す。商品はID、それ以外は`type`をキーにしている。v2では設定を推奨。                               |

<Callout>
  `stickyHeaderIndices`は配列なので、複数のインデックスを渡せば複数の要素を固定できます。セクションごとの見出しを順番に固定するような使い方も可能です。
</Callout>

<SpeechBubble icon="/authors/torii-keisuke.jpg" name="鳥井">
  画面全体を1つのリストにまとめてしまうのが今回のポイントです！
  今回のような異なる`type`の要素が混ざるリスト以外にも、使いどころがありそうですね😎
</SpeechBubble>

## タブ切り替えのチラつきを防ぐ

固定ヘッダー付きのリストはできましたが、実はこの画面には1つ問題があります。
タブを切り替えると、選択したタブ内の商品をサーバーから取得する設計となっています。
このままだと、タブを押すたびに画面全体がチラついてしまいます🤮

これは、タブを切り替えるたびにデータの取得が走り、その読み込み中はカルーセルやタブも含めたリスト全体がローディング表示に置き換わってしまうためです。
次に、このチラつきの正体と解消する方法を見ていきます！

### `useSuspenseQuery`で起きるチラつき

商品データの取得には、TanStack Queryの`useSuspenseQuery`を使っています。
このフックを使用するコンポーネントは、表示に必要なデータがまだ取得できていない場合、描画をサスペンドします。
サスペンド中はそのコンポーネントの描画が保留され、代わりにもっとも近い親の`Suspense`に指定した`fallback`が表示されます。

{/* prettier-ignore */}
```tsx title="Suspenseによるローディング表示の例" showLineNumbers
{/* 商品データの準備が整うまでは<LoadingIndicator />が表示される */}
<Suspense fallback={<LoadingIndicator />}>
  {/* ProductList内でuseSuspenseQueryを使用して商品データを取得 */}
  <ProductList />
</Suspense>
```

<ExternalLink url="https://tanstack.com/query/latest/docs/framework/react/guides/suspense" />

本記事では、この`useSuspenseQuery`をラップしたカスタムフックでデータの取得をしています。

```tsx title="カスタムフックの実装例" showLineNumbers
const useProductsQuery = (tabId: string) => {
  const { data } = useSuspenseQuery({
    queryKey: ["products", tabId],
    queryFn: () => fetchProducts(tabId),
  })
  return { products: data }
}
```

この問題はタブを切り替えたときに起こります。
選択中のタブをそのままクエリに渡すと、切り替えるたびにサスペンドします。
すると、リスト全体がフォールバックに置き換わってしまいます。

```tsx title="切り替えるたびにフォールバックが出る" showLineNumbers
const [selectedTab, setSelectedTab] = useState(tabs[0].id)
// selectedTabが変わるたびにサスペンドし、Suspenseのフォールバックが表示されてしまう
const { products } = useProductsQuery(selectedTab)
```

これでは、タブを押すたびに画面がチラついてしまいます。

<Video src="/articles/react-native-flashlist-sticky-header-3.mp4" />

### `useDeferredValue`でチラつきを解消する

ここで活躍するのが`useDeferredValue`です！
これは値の更新を遅延させ、緊急性の低い再レンダリングを後回しにするReact Hookです。

<ExternalLink url="https://ja.react.dev/reference/react/useDeferredValue" />

<Callout variant="warning">
  `useDeferredValue`はReact18以降で利用できるフックです。プロジェクトのReactバージョンが18以上であることを確認してください！
</Callout>

ポイントは、Suspenseと組み合わせたときの挙動です。
`useDeferredValue`を使うと、タブ切り替え時のレンダリングは次の2段階で進みます。

1回目: 古い値（変更前の`deferredTab`）で再レンダリング。サスペンドしないため、前のタブの画面がそのまま残ります。
2回目: 新しい値（新しい`deferredTab`）による裏側のレンダリング。ここでサスペンドしてもReactはフォールバックを表示せず、1回目で描画した古いUIを表示し続けます。データ取得が完了した時点で、新しいタブの内容に差し替わります。

2回目でサスペンドしてもReactはフォールバックを表示しないのが、チラつきが解消されるポイントです！

実装は、クエリに渡す値を`useDeferredValue`でラップするだけです。

```tsx title="useDeferredValueで前の表示を保持する" showLineNumbers
const [selectedTab, setSelectedTab] = useState(tabs[0].id)
const deferredTab = useDeferredValue(selectedTab) // [!code ++]
const { products } = useProductsQuery(selectedTab) // [!code --]
const { products } = useProductsQuery(deferredTab) // [!code ++]
```

この2つの値を使い分けるのがコツです。

- `selectedTab`: 即座に更新される。タブのハイライト表示に使う。
- `deferredTab`: 遅延して更新される。商品データの取得中は前のタブの値を保持し続ける。商品データの取得が完了すると、新しいタブの値に更新される。

タブを押すと、ハイライトは即座に動きます。
一方で商品リストは、`deferredTab`をクエリに渡すことで、新しいデータが届くまで前のタブの内容を表示し続けます。
これにより、フォールバックによるチラつきを抑えつつ、操作にはすぐ反応するUIになります！

<Callout>
  `useDeferredValue`は直前のレンダリング結果を保持する仕組みです！
  そのため初回表示では`Suspense`のフォールバックが表示される点に注意してください！
</Callout>

<Video src="/articles/react-native-flashlist-sticky-header-1.mp4" />

Suspenseそのものの基本的な使い方は、以下の記事も参考にしてください。

<InternalLink slug="nextjs-suspense" />

<SpeechBubble icon="/authors/torii-keisuke.jpg" name="鳥井">
  最初はタブを押すと毎回ローディング画面になってしまい、対応方法が分からず悩みました。
  `useDeferredValue`を挟むだけで解決したときは感動しました✨
</SpeechBubble>

## 全体の実装

ここまでの内容をまとめると、コンポーネントは次のようになります。
なお、`Carousel`・`Tabs`・`ProductCard`などの子コンポーネントの実装は本記事では省略しています。

```tsx title="ProductList.tsx" showLineNumbers
import { FlashList, type ListRenderItemInfo } from "@shopify/flash-list"
import { useDeferredValue, useState } from "react"
import { Carousel } from "@/components/Carousel"
import { ProductCard } from "@/components/ProductCard"
import { Tabs } from "@/components/Tabs"
import { useProductsQuery } from "@/hooks/useProductsQuery"
import type { Product, Tab } from "@/types/product"

type ListItem = { type: "carousel" } | { type: "tabHeader" } | { type: "product"; product: Product }

type Props = {
  tabs: Tab[]
}

export function ProductList({ tabs }: Props) {
  const [selectedTab, setSelectedTab] = useState(tabs[0].id)
  const deferredTab = useDeferredValue(selectedTab)
  const { products } = useProductsQuery(deferredTab)

  const listData: ListItem[] = [
    { type: "carousel" },
    { type: "tabHeader" },
    ...products.map((product) => ({ type: "product" as const, product })),
  ]

  const renderItem = ({ item }: ListRenderItemInfo<ListItem>) => {
    switch (item.type) {
      case "carousel":
        return <Carousel />
      case "tabHeader":
        return <Tabs tabs={tabs} selectedTab={selectedTab} onChangeTab={setSelectedTab} />
      case "product":
        return <ProductCard product={item.product} />
      default:
        throw new Error(`Unexpected list item type: ${(item as ListItem).type}`)
    }
  }

  return (
    <FlashList
      data={listData}
      stickyHeaderIndices={[1]}
      getItemType={(item) => item.type}
      keyExtractor={(item) => (item.type === "product" ? item.product.id.toString() : item.type)}
      renderItem={renderItem}
    />
  )
}
```

なお、`useProductsQuery`はSuspenseに対応している前提です。
そのため、`ProductList`は呼び出し側で次のように`Suspense`で囲っておく必要があります。

```tsx title="呼び出し側の実装イメージ" showLineNumbers
<Suspense fallback={<FullScreenLoader />}>
  <ProductList tabs={tabs} />
</Suspense>
```

また、`useSuspenseQuery`は取得失敗時にエラーをスローするため、`ErrorBoundary`も併用しておくと安全です！

## おわりに

本記事では、React NativeのFlashListとReactの`useDeferredValue`を使って、固定ヘッダー付きのリストを実装する方法を紹介しました！

固定ヘッダーは`stickyHeaderIndices`、タブ切り替え時のチラつきは`useDeferredValue`で、それぞれ解決できます！
「固定タブ＋一覧」のような画面を作る際は、ぜひ参考にしてください💪

<SpeechBubble icon="/authors/torii-keisuke.jpg" name="鳥井">
  最後まで読んでいただきありがとうございました！リスト周りのUIは奥が深いので、また気づきがあれば記事にしたいと思います😎
</SpeechBubble>


---

## 【HTML】imgタグがCore Web Vitalsに与える影響と計測方法

- URL: https://blog.to-ko-s.com/articles/img-core-web-vitals
- 著者: 小田優真
- 公開日: 2026-07-13
- タグ: HTML, パフォーマンス

> imgタグのloading・width・height・fetchpriority属性がCore Web Vitals（LCP・CLS）に与える影響を解説し、Chrome DevToolsで計測・改善する方法を紹介します。


## はじめに

こんにちは、株式会社TOKOSのユウマです。
今回は、HTMLの`img`タグがCore Web Vitalsにどのような影響を与えるのかを解説します。
また、Chrome DevToolsを使った計測と改善の方法も併せて紹介します。

### 対象読者

- HTMLの`img`タグがパフォーマンスへ与える影響を知りたい方
- Core Web Vitalsの改善方法を具体的に学びたい方

## Core Web Vitalsとは

Core Web Vitalsは、Googleがウェブページのユーザー体験を測定するために定めた指標のセットです。
公式ドキュメントでは、次のように定義されています。

> ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する一連の指標です。

ページの使い心地を以下の3つの観点で数値化したものと言えます。

| 観点                           | 説明                                                                                             |
| ------------------------------ | ------------------------------------------------------------------------------------------------ |
| ページの読み込みパフォーマンス | コンテンツが速く表示されるか。表示が遅いほどユーザーは離脱しやすくなります。                     |
| インタラクティブ性             | クリックやタップなどの操作にすぐ反応するか。反応が遅いと「固まった」と感じさせてしまいます。     |
| 視覚的安定性                   | 表示の途中でレイアウトがずれず安定しているか。要素がガタつくと誤操作や読み位置のズレを招きます。 |

### Core Web Vitalsが重要な理由

Core Web Vitalsが重要な理由は2つあります。

1つ目はUX（ユーザー体験）の向上です。
読み込みが遅かったり表示がずれたりするページは、ユーザーにストレスを与えます。
Core Web Vitalsを改善することは、UX（ユーザー体験）が良くなることに直結します。

2つ目はSEO（検索エンジン最適化）への影響です。
SEOとは、検索結果で自分のサイトをより上位に表示させるための取り組みのことです。
GoogleはCore Web Vitalsを検索順位の判断材料の1つにしていますが、その影響はそれほど大きくありません。

<ExternalLink
  url="https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja"
  title="Core Web Vitals と Google 検索（Google Search Central）"
/>

### 3つの指標

Core Web Vitalsは、LCP・INP・CLSの3つの指標で構成されています。
それぞれLargest Contentful Paint、Interaction to Next Paint、Cumulative Layout Shiftの略です。

| 指標                | 何を測るか                                         | 良好の目安        |
| ------------------- | -------------------------------------------------- | ----------------- |
| LCP（読み込み速度） | ビューポート内でもっとも大きいコンテンツの表示時間 | 2.5秒以下         |
| INP（応答速度）     | ユーザー操作から次の描画までの時間                 | 200ミリ秒以下     |
| CLS（視覚的安定性） | ページ表示中のレイアウトのずれの度合い             | 0.1以下（スコア） |

<SpeechBubble icon="/authors/oda-yuma.jpg" name="ユウマ">
  ビューポートとは、ブラウザのウィンドウに現在表示されている領域のことです。
  スマホなら画面全体、PCならウィンドウ内の表示エリアにあたります。
</SpeechBubble>

<ExternalLink
  url="https://web.dev/articles/vitals?hl=ja#core-web-vitals"
  title="Web Vitals：LCP・INP・CLS の詳細解説（Google web.dev）"
/>

## 画像とCore Web Vitalsの関係

ページの表示速度は、表示するデータ量に大きく左右されます。
LCPの対象になる要素の多くは画像であり、画像の読み込みが表示速度のボトルネックになりやすいです。
そのため、画像の扱い方はページのパフォーマンスを左右する重要なポイントになります。

画像のデータ量そのものを減らすアプローチ（圧縮や次世代フォーマットの採用）もありますが、本記事ではHTMLの`img`タグの書き方による改善に焦点を当てます。
属性を適切に指定するだけでも、LCPやCLSは改善できます。

<SpeechBubble icon="/authors/oda-yuma.jpg" name="ユウマ">
  画像のデータ量そのものを減らすアプローチについては、[補足情報](#補足情報)で簡単に触れています😎
</SpeechBubble>

### 画像が関わる指標：LCPとCLS

Core Web Vitalsの3つの指標のうち、画像と深く関わるのはLCPとCLSの2つです。
INP（応答速度）はユーザー操作への反応を測る指標であり、画像の読み込みとは直接関係しません。

LCPは、ビューポート内でもっとも大きいコンテンツが表示されるまでの時間を測ります。
ページのメインビジュアルのような大きな画像はLCPの対象になりやすく、データ量が大きかったり読み込み開始が遅れたりするとスコアが悪化します。

<ExternalLink url="https://web.dev/articles/lcp?hl=ja" title="LCP（Largest Contentful Paint）とは（Google web.dev）" />

CLSは、ページ表示中に発生するレイアウトシフトを数値化する指標です。
レイアウトシフトとは、すでに表示されていた要素の位置が後から変わってしまう現象のことです。イメージしやすいよう、[後述の動画](#問題点1-clsの悪化widthheightの未指定)で具体例も確認できます。

たとえば画像の表示サイズが読み込み前に確定していないと、画像の表示と同時に周囲のコンテンツが押し下げられ、レイアウトシフトが発生してCLSが悪化します。

CLSのスコアは、要素が「どれだけの範囲に」「どれだけの距離」ずれたかで算出されます。

**レイアウトシフトスコア ＝ 影響率 × 距離率**

- 影響率: ずれた要素が移動前と移動後に占める領域の和集合 ÷ ビューポートの面積
- 距離率: 要素が移動した距離 ÷ ビューポートの長辺の長さ

たとえば、ビューポートの50%を占める要素が高さの25%分だけ下にずれた場合を考えます。
移動前（上半分）と移動後（25%下にずれた位置）を合わせた領域はビューポートの75%になるため、影響率は0.75です。
距離率は0.25なので、スコアは`0.75 × 0.25 = 0.1875`となります。

![CLSスコアの計算例](/articles/html-img-performance-13.webp)

| 評価                            | CLSスコア       |
| ------------------------------- | --------------- |
| 良好（Good）                    | 0.1以下         |
| 改善が必要（Needs Improvement） | 0.1超〜0.25以下 |
| 不良（Poor）                    | 0.25超          |

<ExternalLink url="https://web.dev/articles/cls?hl=ja" title="CLS（Cumulative Layout Shift）とは（Google web.dev）" />

## まずは`img`タグの属性を理解する

改善方法を説明する前に、土台となる`img`タグの属性を整理しておきます。
ここで取り上げるのは、`loading`・`width`/`height`・`fetchpriority`の3つです。
いずれも前章で見たLCPとCLSに関わる属性で、このあとの改善はこれらの指定がベースになります。

### `loading`属性

`loading`属性は、画像をいつ読み込むかをブラウザに伝えます。

| 値      | 動作                                       |
| ------- | ------------------------------------------ |
| `eager` | すぐに読み込む（デフォルト）               |
| `lazy`  | ビューポートに近づくまで読み込みを遅延する |

```html showLineNumbers title="HTML"
<!-- デフォルト（eagerと同じ動作） -->
<img src="hero.jpg" alt="メインビジュアル" />

<!-- 遅延読み込み -->
<img src="gallery.jpg" alt="ギャラリー" loading="lazy" />
```

`loading="lazy"`を付けると、画面外の画像は初期リクエストに含まれなくなります。
ユーザーがスクロールして画像に近づいたタイミングで読み込みが始まります。

### `width`・`height`属性

`width`と`height`は、画像の幅と高さをブラウザに伝える属性です。
ブラウザはこの値からアスペクト比（縦横の比率）を計算し、画像の読み込み前にスペースを確保します。

```html showLineNumbers title="HTML"
<img src="photo.jpg" alt="写真" width="1600" height="1200" />
```

`width`と`height`には、画像ファイルの幅と高さをそのまま書きます。

たとえば1600×1200の画像なら、`width="800"height="600"`や`width="4"height="3"`と書いても縦横比は同じになります。ブラウザはこの比率だけを見ているため数値自体はどれでも構いませんが、実際のファイル寸法（`width="1600"height="1200"`）をそのまま書いておくのが確実です。
CSSで表示サイズを変えるときも、HTMLの`width`/`height`は実際の寸法のままにしておきます。
そのうえで、見た目のサイズは`max-width: 100%`や`height: auto`で調整するのが一般的な書き方です。
縦横比はCSSの`aspect-ratio`プロパティでも指定できます。ただ、HTMLは`width`/`height`だけで済み、CSSの読み込みを待たずにブラウザが表示スペースを確保できます。そのため、まずは`width`/`height`を指定しておくのが基本です。

ただし、`width`/`height`でできるのは、あくまで1枚の画像の表示スペースを確保することだけです。
画面サイズや解像度に応じて画像ファイル自体を切り替えるには、`srcset`/`sizes`属性を使います。これらは、表示環境に合わせて最適な画像を出し分けるための属性です（詳しくは[補足情報](#補足情報)で触れます）。

### `fetchpriority`属性

`fetchpriority`属性は、リソースを読み込む優先度をブラウザに伝える属性です。
特に`img`タグでは、LCPの対象となるファーストビュー画像の読み込み開始を早められます。

ファーストビューとは、ページを開いてスクロールする前に見えている範囲のことです。
下の動画で、ファーストビューとスクロールしないと見えない領域の違いを確認できます。

<Video src="/articles/html-img-performance-4.mp4" />

| 値     | 動作                                 |
| ------ | ------------------------------------ |
| `high` | ほかのリソースより優先して取得する   |
| `low`  | 優先度を下げて取得する               |
| `auto` | ブラウザの判断に任せる（デフォルト） |

省略した場合は`auto`になります。

```html showLineNumbers title="HTML"
<!-- LCP候補のメインビジュアル -->
<img src="hero.jpg" alt="メインビジュアル" width="1600" height="1200" fetchpriority="high" />
```

`loading`属性と似ているように見えますが、役割が異なります。
`loading`属性は「いつ読み込むか」を、`fetchpriority`属性は「読み込みの優先度」をブラウザに伝えます。

なお、`fetchpriority`属性は比較的新しい属性ですが、対応していないブラウザでは単に無視されるため、安全に導入できます。

<ExternalLink url="https://web.dev/articles/fetch-priority?hl=ja" title="fetchpriority 属性の解説（Google web.dev）" />

<SpeechBubble icon="/authors/oda-yuma.jpg" name="ユウマ">
  属性の指定は簡単ですが、付け忘れるとCore Web Vitalsに影響します。次のセクションで具体的に見ていきましょう。
</SpeechBubble>

## imgタグ使用時のCore Web Vitalsの問題点

`img`タグの書き方によって、Core Web Vitalsがどのように悪化するかを確認します。

### 問題のあるコード例

以下は、`width`・`height`・`loading`・`fetchpriority`のいずれも指定していない例です。

```html showLineNumbers title="HTML"
<img src="photo.jpg" alt="写真" />
```

このコードには3つの問題があります。

### 問題点1: CLSの悪化（`width`・`height`の未指定）

`width`と`height`がないと、ブラウザは画像の読み込みが完了するまでサイズを把握できません。
読み込みが完了した瞬間にスペースが確保され、周囲のコンテンツが押し下げられます。
これがレイアウトシフトです。テキストを読んでいる途中で画像が読み込まれ、内容が下にずれる様子を確認できます。

<Video src="/articles/html-img-performance-1.mp4" />

{/* prettier-ignore */}
<Callout variant="warning">
  レイアウトシフトはユーザーの誤タップや読み位置のずれを引き起こします。CLSスコアが0.1を超えるとCore Web Vitalsの基準を下回ります。
</Callout>

### 問題点2: LCPの悪化（`loading`属性の最適化不足）

`loading`属性を指定しないと、画面外の画像も含めてすべての画像が、最初のリクエストでまとめて読み込まれます。

たとえば画像が10枚あるページで、ファーストビューに2枚しか見えていなくても、残り8枚を含めた10枚すべてのダウンロードが最初から一斉に始まります。
ここで問題になるのが、回線で一度に運べるデータ量には限りがあるという点です。

1本の道路を一度に通れる車の数が決まっているのと同じで、画面外の画像まで一度に取得しようとすると道が混み合います。

その結果、本来すぐに表示したいファーストビューの画像が優先されず、読み込みが遅れてLCPスコアが悪化します。
このようにダウンロードする画像が増えると、リクエスト数（ブラウザがサーバーに画像を取りにいく回数）と転送量（ダウンロードされる画像データの合計サイズ）が増えていきます。これらの指標は、あとの[DevToolsでの計測](#lcpの改善転送量リクエスト数の計測)で確認していきます。

逆に、ファーストビューの画像に`loading="lazy"`を付けてしまうとブラウザが「まだ見えていないので後回しにして良い」と判断し、表示が遅くなります。
ページのメインビジュアルのような大きな画像はLCPの対象になりやすく、`loading="lazy"`を付けることで読み込みが遅れ、LCPスコアが悪化します。

<Callout variant="warning">
  ファーストビューの画像には`loading="lazy"`を付けないでください。代わりに`loading="eager"`を指定するか、属性を省略します。
</Callout>

### 問題点3: LCPの悪化（`fetchpriority`属性の未指定）

画像にはデフォルトで「低」の優先度が割り当てられます。
ブラウザはレイアウト計算のあとにビューポート内の画像を検出し、そこで優先度を「高」に引き上げる仕組みです。

そのため、`loading="eager"`を指定した画像でも、レイアウト計算の完了を待つ分読み込みが遅れがちです。
LCPの対象となるファーストビュー画像ほど、この遅れが表示速度に影響します。

`fetchpriority="high"`を付与すると、ブラウザは最初から高い優先度で画像を取得します。
レイアウト計算の完了を待たずに読み込みが始まるため、LCPの改善に直接つながります。

<Callout>
  `loading="eager"`は「遅延しないでほしい」とブラウザに伝えます。一方で`fetchpriority="high"`は「ほかのリソースより優先して取得してほしい」とブラウザに伝えます。LCP候補の画像には両方を合わせて指定するのが効果的です。
</Callout>

使い分けの目安はシンプルです。

- ファーストビューのLCP候補画像 → `loading="eager"`（または省略）＋ `fetchpriority="high"`
- 画面外の画像 → `loading="lazy"`

## DevToolsを使った計測と改善方法

Chrome DevToolsを使い、`img`タグの属性がCore Web Vitalsにどう影響するかを確認します。
本記事ではCLSスコア、`loading`属性の効果を示す転送量・リクエスト数の変化、`fetchpriority`属性の効果を示す読み込み優先度の3つを計測します。

<Callout>
  LCPスコアは画像のファイルサイズや配信環境など、属性以外の要因にも左右されます。そのため本記事では、LCPに影響する要素（転送量・優先度）の計測に絞って紹介します。LCPの値そのものを確認したい場合は、記事末で紹介するLighthouseを使うのが手軽です。
</Callout>

### DevToolsの準備

1. Chromeで対象ページを開き、開発者ツール（F12）を開く
2. PerformanceタブでDisable cacheにチェック（比較条件を揃えるため）
3. Performanceのスロットリングで`Slow 3G`を選択

スロットリングとは、DevTools上で通信速度を意図的に遅くし低速な回線環境を再現する機能です。
`Slow 3G`を選ぶと、低速回線での読み込みを疑似体験できます。

下記のように設定できていれば準備完了です。

![DevToolsの設定画面](/articles/html-img-performance-12.webp)

<Callout>
  CLSは回線速度が速いと画像が一瞬で読み込まれるため、ずれが検出されにくくなります。そのため本記事ではスロットリングを使って差を確認しやすくしています。数値は環境やキャッシュ状態によって変わります。
</Callout>

### CLSの改善（レイアウトシフトの計測）

Performanceタブを開き、記録（Record）を開始してからページを再読み込みします。
読み込みが落ち着いたら記録を停止し、CLSの値を確認します。

#### width・heightがない場合

![width・heightがない場合のCLS](/articles/html-img-performance-2.webp)

レイアウトシフトが発生し、CLSスコアが0.08になっています。
0.08は「良好」（0.1以下）の範囲内ですが、画像の枚数や表示サイズ、回線速度などの条件によってはこの値が0.1を超え、基準を下回るリスクがあります。
`width`/`height`を指定することで、こうした条件に左右されずレイアウトシフトを未然に防げます。

#### width・heightがある場合

![width・heightがある場合のCLS](/articles/html-img-performance-3.webp)

アスペクト比に沿った領域が事前に確保されるため、レイアウトシフトは発生せず**0**になっています。

#### 改善方法

画像のファイル寸法に合わせて`width`と`height`を指定します。

```html showLineNumbers title="HTML"
<img src="photo.jpg" alt="写真" width="1600" height="1200" />
```

`width`と`height`を付与した結果、レイアウトシフトが解消されました。

<Video src="/articles/html-img-performance-2.mp4" />

### LCPの改善（転送量・リクエスト数の計測）

Networkタブを開き、Imgフィルタを選択します。
画像のリクエスト件数（requests）と転送量（transferred）を確認します。

![Networkタブの見方](/articles/html-img-performance-4.webp)

#### `loading="lazy"`がない場合

![loading="lazy"がない場合のリクエスト](/articles/html-img-performance-5.webp)

初期リクエストでページ内のすべての画像が読み込まれています。

#### `loading="lazy"`がある場合

![loading="lazy"がある場合のリクエスト](/articles/html-img-performance-6.webp)

画面外の画像はまだリクエストされていないため、リクエスト数と転送量が減少しています。
スクロールすると、画像に近づいたタイミングでリクエストが発生します。

<Video src="/articles/html-img-performance-3.mp4" />

スクロールに応じてリクエスト数と転送量が増えていくのが確認できます。
ユーザーがページ下部までスクロールした場合、最終的な合計転送量は同じになります。
差が出るのは初期読み込みのタイミングです。

#### 改善方法

画面外の画像に`loading="lazy"`を付与し、ファーストビューの画像には`loading="eager"`（または省略）を使います。

```html showLineNumbers title="HTML"
<!-- ファーストビュー -->
<img src="hero.jpg" alt="メインビジュアル" width="1600" height="1200" loading="eager" />

<!-- 画面外 -->
<img src="gallery.jpg" alt="ギャラリー" width="1200" height="800" loading="lazy" />
```

### LCPの改善（読み込み優先度の計測）

NetworkタブのPriority列で、各リソースの読み込み優先度を確認できます。
Priority列はデフォルトでは非表示のため、列ヘッダーを右クリックして表示されるメニューからPriorityを選び、有効化します。

![Priority列の表示設定](/articles/html-img-performance-8.webp)

有効化すると、各画像が`High`/`Low`どちらの優先度で読み込まれているかを一覧で確認できます。

#### `fetchpriority="high"`がない場合

![fetchpriorityがない場合の優先度](/articles/html-img-performance-9.webp)

LCP候補のファーストビュー画像（Typeが`jpeg`の最初の行、240kB）は`High`になっていますが、表示時間（Time）は741msかかっています。
これは、ブラウザが最初は`Low`でリクエストを開始し、レイアウト計算のあとにビューポート内の画像を検出して`High`へ引き上げているためです。
優先度が引き上げられるまでの待ち時間分、取得開始が遅れます。

#### fetchpriority="high"がある場合

![fetchpriorityがある場合の優先度](/articles/html-img-performance-10.webp)

ファーストビュー画像に`fetchpriority="high"`を付与すると、リクエストが最初から`High`で開始されます。
レイアウト計算の完了を待たないため、同じ画像の表示時間が436msに短縮されました。

#### 改善方法

LCPの候補となるファーストビュー画像に`fetchpriority="high"`を付与します。

```html showLineNumbers title="HTML"
<img src="hero.jpg" alt="メインビジュアル" width="1600" height="1200" fetchpriority="high" />
```

### 改善後のコード

これまでの内容をまとめると、最終的な書き方は以下のパターンが基本になります。

```html showLineNumbers title="HTML"
<!-- ファーストビューの画像（LCP候補） -->
<img src="hero.jpg" alt="メインビジュアル" width="1600" height="1200" loading="eager" fetchpriority="high" />

<!-- 画面外の画像 -->
<img src="gallery.jpg" alt="ギャラリー写真" width="1200" height="800" loading="lazy" />
```

```css showLineNumbers title="CSS"
img {
  max-width: 100%;
  height: auto;
}
```

CSSの`max-width: 100%`と`height: auto`により、画面幅に応じてレスポンシブに表示されます。
HTMLの`width`/`height`はアスペクト比の伝達に使われるため、表示崩れは起きません。

<SpeechBubble icon="/authors/oda-yuma.jpg" name="ユウマ">
  Before/Afterを数値で比較すると、改善の効果が実感できます。ぜひ皆さんのサイトでも試してみてください。
</SpeechBubble>

## 補足情報

本記事では3属性の指定を中心に解説しましたが、画像のパフォーマンス改善には、あわせて知っておくと役立つ情報もあります。

- レスポンシブ画像: `srcset`/`sizes`属性や`<picture>`要素で、画面サイズや解像度に応じて画像を出し分ける。なお`loading="lazy"`の画像に`sizes="auto"`を指定すると、ブラウザが実際の表示幅から最適なソースを自動で選び、`sizes`の手動指定が不要になります。Chrome 126以降、Firefox 150〈2026年4月〉でサポートされています。
- 画像フォーマットの最適化: WebP/AVIFなどの次世代フォーマットを採用し、ファイルサイズを削減する
- フレームワークによる自動化: Next.jsの`next/image`などのコンポーネントは、`loading`・`width`/`height`・`fetchpriority`の指定や`srcset`の生成を自動で行う

<ExternalLink
  url="https://web.dev/blog/web-platform-04-2026?hl=ja#auto_sizes_for_lazy-loaded_images"
  title='遅延読み込み画像の sizes="auto" 対応（Google web.dev）'
/>

レスポンシブ画像とWebPの具体的な使い方については、以下の記事で詳しく解説しています。

<InternalLink slug="html-img" />

また、本記事ではPerformanceタブとNetworkタブで個別の指標を計測しましたが、Lighthouseを使うとCore Web Vitals全体のスコアをまとめて確認できます。
属性以外の要因も含めて改善ポイントを洗い出したいときに便利です。

使い方は簡単で、DevToolsのLighthouseタブを開き、対象カテゴリ（Performanceなど）を選んで「Analyze page load」ボタンを押すだけです。

![Lighthouseの使い方](/articles/html-img-performance-7.webp)

数十秒待つとレポートが生成され、LCP・CLSのスコアと具体的な改善提案が一覧表示されます。

<ExternalLink
  url="https://developer.chrome.com/docs/lighthouse/overview?hl=ja"
  title="Lighthouse の概要と使い方（Chrome for Developers）"
/>

## おわりに

この記事では、`img`タグがCore Web Vitalsに与える影響と、DevToolsを使った計測・改善方法を紹介しました。

- Core Web VitalsはUXとSEOの両面で重要な指標
- `width`/`height`の指定でCLSを防止し、レイアウトの安定性を確保できる
- `loading`属性の適切な使い分けで、初期読み込みを軽量化しLCPを最適化できる
- `fetchpriority="high"`でLCP候補画像の取得優先度を引き上げ、表示開始を早められる
- DevToolsのPerformanceタブでCLS、Networkタブで転送量や優先度を確認できる

属性を1つ追加するだけでもCore Web Vitalsの数値は変わります。
ぜひ皆さんのサイトでも計測しながら、少しずつ改善を進めてみてください。


---

## 【Rails】Solid Queueの仕組みとリトライ処理の実装方法

- URL: https://blog.to-ko-s.com/articles/solid-queue
- 著者: 塩見直樹
- 公開日: 2026-07-06
- タグ: Rails

> Solid Queueの解説と、RailsでSolid Queueを使ってリトライ処理を実装する方法を紹介。


## はじめに

こんにちは、株式会社TOKOSのナオキです！

アプリを運用していると、時間のかかる処理や定期的に実行したい処理を、裏側で走らせたい場面が出てきます。
こうした処理は、外部APIの一時的な不調やネットワークエラーなどで失敗してしまうことが多々あります。
そのような失敗に備えて、「失敗したらもう一度実行する」というリトライ処理を用意する必要があります。
本記事ではRailsのSolid Queueについて初学者にも分かりやすく解説し、リトライ処理の実装方法まで紹介していきます。

### 対象読者

- Rails初学者の方
- Solid Queueの仕組みを理解したい方
- リトライ処理を実装したい方

### この記事で扱う内容

- Solid Queueの仕組みの解説
- Solid Queueの導入方法
- ジョブを作成して処理を実行する方法
- リトライ処理の実装方法

## Solid Queueとは？

Solid QueueはActive Jobのキューイングシステムで、Rails 8.0からはこれがデフォルトとして採用されています。
特徴としては、ジョブの管理に通常のデータベースをそのまま使う点です。
SidekiqなどほかのキューイングシステムはRedisという専用の置き場所を別に用意する必要があります。
一方Solid Queueは、アプリがすでに使っているデータベースをジョブの置き場所として活用します。
そのため新しく専用の置き場所を用意せずに済むため、導入コストを削減できます。

<Callout variant="memo">
  **キューイングシステム**とは「後で行う作業（ジョブ）」を順番に並べて処理していく仕組みのことです。
  作業をキューに積むことによって、先に積まれたジョブから順に処理されます。
</Callout>

<SpeechBubble icon="/authors/shiomi-naoki.jpg" name="ナオキ">
  **キュー**とは、データの先入れ先出し(FIFO)のことだね！
  例えるならレジに並ぶ人の列で、先に並んだ人が先にレジを通るイメージです！
  また、対になる概念として、**スタック**もあります！
  スタックはデータの後入れ先出し(LIFO)のことで、例えるなら積み上げられたお皿を上から取り出すイメージです！
</SpeechBubble>

<ExternalLink title="Solid Queue README(翻訳)" url="https://techracho.bpsinc.jp/hachi8833/2026_02_24/140501" />

## Solid Queueを使用する理由

Solid Queueを使用する理由としては、以下のようなものがあります。

- 導入・運用コストが低い
- Rails標準のキューイングシステム
- 利用可能なデータベースが多い
- 機能が豊富

### 導入・運用コストが低い

Solid Queueは、ジョブの保存先にアプリがすでに使っているデータベースをそのまま使えます。
これまでRailsのデファクトスタンダードであったSidekiqなどはRedisというサービスを別に用意・運用する必要がありましたが、Solid Queueにはそれが不要です。
インフラの構成要素が1つ減るため、セットアップや保守がシンプルになり、運用コストを抑えられます。

### Rails標準のキューイングシステム

Solid QueueはRails 8.0以降の新規アプリケーションでは、Active Jobが利用する標準のキューイングシステムとして採用されています。
Rails本体の開発に合わせてメンテナンスされていくため、将来の互換性やサポートの面でも安心感があります。

### 利用可能なデータベースが多い

Solid QueueはMySQL、MariaDB、PostgreSQL、SQLiteといった一般的なRDB（リレーショナルデータベース）で利用できます。
Solid Queueでは、`FOR UPDATE SKIP LOCKED`というSQLの仕組みを使い、複数のジョブ処理（ワーカー）が互いを待たずにジョブを取り出せるよう工夫されています。
`FOR UPDATE SKIP LOCKED`は、複数のワーカーが同じ行を取り合わないようロックされた行をスキップして次の行を読むSQLの構文です。

<Callout variant="warning">
  `FOR UPDATE SKIP LOCKED`が使えるのはMySQL 8以降、MariaDB 10.6以降、PostgreSQL 9.5以降です。
  これより古いバージョンでもSolid Queueは使用可能ですが、同じキューに複数のワーカーを動かすと処理中のジョブを他のワーカーが取り出せず順番待ちになり、処理速度の低下につながる可能性があります。
  なお、SQLiteでは`FOR UPDATE SKIP LOCKED`は使えないため、複数ワーカーを同時に動かす用途には向きません。
</Callout>

### 機能が豊富

シンプルさを重視しつつ、実用上必要な機能はひととおり揃っています。

- 遅延ジョブ：指定した時刻にジョブを実行する
- 繰り返しジョブ：cronのような定期スケジューリング
- 同時実行制御：同時に実行できるジョブ数を種類や引数で制限する
- 優先度の指定：ジョブごとの数値優先度や、キュー順による優先度づけ
- キューの一時停止
- 一括エンキュー（Active Jobの`perform_all_later`に対応）

なお、リトライやエラーハンドリング、ジョブの破棄といった処理は**Solid Queue自身ではなくActive Jobが受け持ちます。** Solid Queueはその裏でジョブを蓄えて処理する役割に徹しています。

Solid Queueの機能については以下の記事で詳しく解説されていますので、ぜひご覧ください。

<ExternalLink url="https://nsinenko.com/rails/background-jobs/performance/2025/10/07/solid-queue-rails-practical-guide/" />

## Solid Queueの導入方法

### Rails 8の新規アプリの場合

Rails 8で新しくアプリを作成した場合、Solid Queueはデフォルトで設定されているため、特別な導入作業は必要ありません。

### 既存アプリ（Rails 7.1以降）に導入する場合

Rails 8より前のバージョンや、既存のアプリに後から導入する場合は、以下の手順で追加できます。

<Callout variant="warning">対応している最低バージョンはRails 7.1、Ruby 3.1.6です。</Callout>

```bash title="ターミナル"
# gemを追加する
$ bundle add solid_queue
# インストールコマンドを実行する
$ rails solid_queue:install
```

このコマンドによって、本番環境でActive Jobが利用するキューイングシステムとしてSolid Queueが設定されます。
また、Solid Queueを使用するために必要な以下のファイルが自動で追加されます。

- 設定ファイル`config/queue.yml`と`config/recurring.yml`が作られる
- スキーマ定義ファイル`db/queue_schema.rb`が作られる
- Solid Queueを起動するための実行ファイル`bin/jobs`が作られる

### データベースの設定

次に、`config/database.yml`にキュー用データベースの設定を追加します。

SQLiteを使う場合は次のようになります。

```yaml title="config/database.yml"
production:
  primary:
    <<: *default
    database: storage/production.sqlite3
  queue:
    <<: *default
    database: storage/production_queue.sqlite3
    migrations_paths: db/queue_migrate
```

MySQLやPostgreSQLを使う場合は、それぞれの接続情報に合わせて`queue`の設定を記述します。

```yaml title="config/database.yml"
production:
  primary: &primary_production
    <<: *default
    database: app_production
    username: app
    password: <%= ENV["APP_DATABASE_PASSWORD"] %>
  queue:
    <<: *primary_production
    database: app_production_queue
    migrations_paths: db/queue_migrate
```

設定を追加したら、本番環境で`db:prepare`を実行し、データベースの作成とスキーマの読み込みを行います。

```bash title="ターミナル"
$ rails db:prepare
```

<Callout variant="memo">
  **補足：アプリと同じデータベースで使う場合**
  キュー専用のデータベースを分けて使うことが推奨されていますが、アプリ本体と同じデータベースを1つだけ使う構成も可能です。
  その場合は、`db/queue_schema.rb`の内容を通常のマイグレーションに移します。
  そして`config/environments/production.rb`の`config.solid_queue.connects_to`の記述を削除してからマイグレーションを実行します。
</Callout>

### 追加されるテーブルについて

`rails db:prepare`（または`db:migrate`）を実行すると、キュー用のデータベースに11個のテーブルが作られます。
中心となるのは`solid_queue_jobs`で、すべてのジョブの情報がここに記録されます。
ほかのテーブルの多くはジョブの「状態」を表すもので、ジョブは処理の進行状況に応じてこれらのテーブルの間を移動していきます。

| テーブル名                         | 役割                                                                                                                               |
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `solid_queue_jobs`                 | すべてのジョブの本体を保存する中心的なテーブル。<br />ジョブのキュー名、クラス名、優先度、実行予定時刻、完了時刻などの情報を持つ。 |
| `solid_queue_ready_executions`     | すぐに実行できる状態になったジョブを保持する。                                                                                     |
| `solid_queue_scheduled_executions` | 将来の時刻に実行するようスケジュールされたジョブを保持する。                                                                       |
| `solid_queue_claimed_executions`   | 現在処理中のジョブを保持する。                                                                                                     |
| `solid_queue_failed_executions`    | 失敗したジョブを記録する。エラー内容も保存されるため、後から原因を確認したり、再実行・破棄したりできる。                           |
| `solid_queue_blocked_executions`   | 同時実行制御によって、現在実行できず待機させられているジョブを保持する。                                                             |
| `solid_queue_recurring_executions` | 繰り返しジョブ（定期実行）が実際に実行された記録を保持する。                                                                       |
| `solid_queue_recurring_tasks`      | 繰り返しジョブの定義（どのジョブを、どんなスケジュールで動かすか）を保持する。                                                     |
| `solid_queue_pauses`               | 一時停止中のジョブを保持する。                                                                                                     |
| `solid_queue_processes`            | 動作中のプロセスを記録する。                                                                                                       |
| `solid_queue_semaphores`           | 同時実行制御のための「鍵」を管理する。                                                                                             |

### Solid Queueを構成するプロセス

Solid Queueでは、役割の異なる4つのプロセスが動いています。
ジョブが登録されてから完了するまでの流れの中で、これらがそれぞれの作業を担います。

| プロセス       | 役割                                                                                                                                                                                               |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ワーカー       | 実行できる状態になったジョブを取り出して、実際に処理する役割。<br />`solid_queue_ready_executions`からジョブを拾って実行する。                                                             |
| ディスパッチャ | 将来実行するようスケジュールされたジョブを見張り、実行時刻が来たものを「実行できる状態」へ送り出す役割。<br />`solid_queue_scheduled_executions`から`solid_queue_ready_executions`へジョブを移す。 |
| スケジューラ   | 繰り返しジョブ（定期実行）を管理する役割。<br />設定したスケジュールの時刻になると、対応するジョブをキューに登録する。                                                                             |
| スーパーバイザ | 上記のワーカーやディスパッチャを取りまとめる管理役。<br />設定に従ってそれらを起動・停止し、各プロセスが正常に動いているかを監視する。                                                             |

<SpeechBubble icon="/authors/shiomi-naoki.jpg" name="ナオキ">
  分かりやすく言うと、以下のようにプロセスが連携してジョブを処理していきます！
  1. **スケジューラ**が繰り返しジョブを登録
  2. **ディスパッチャ**が「そろそろ実行していいよ」とジョブを準備
  3. **ワーカー**が実際にそのジョブを処理
  4. **スーパーバイザ**がプロセスを管理
</SpeechBubble>

### ジョブのライフサイクル

ここまでに紹介したテーブルとプロセスが、実際にどう連携するのかを、1つのジョブが処理されるまでの流れを簡単に説明します。

1. **ジョブの登録**
   ジョブが追加されると、まず`solid_queue_jobs`にジョブの情報が記録されます。

2. **実行待ちへの振り分け**
   すぐに実行するジョブは`solid_queue_ready_executions`へ、将来実行するジョブは`solid_queue_scheduled_executions`へ振り分けられます。
   スケジュールされたジョブは、実行時刻が来るとディスパッチャによって`solid_queue_ready_executions`へ移され`solid_queue_scheduled_executions`から削除されます。

3. **ワーカーによる実行**
   ワーカーが`solid_queue_ready_executions`からジョブを取り出し、`solid_queue_claimed_executions`に記録してから処理を始めます。その際`solid_queue_ready_executions`から該当ジョブが削除されます。
   この記録があることで、ほかのワーカーが同じジョブを二重に処理してしまうのを防いでいます。

4. **完了または失敗**
   ジョブが成功すると、該当ジョブは`solid_queue_claimed_executions`から削除され、`solid_queue_jobs`には完了時刻が記録されます。
   失敗した場合は、エラー内容とともに`solid_queue_failed_executions`に記録され、後から確認・再実行できる状態になります。

## ジョブを作成して処理を実行

ここまでで、Solid Queueの仕組みと導入方法を見てきました。
ここからは、実際にジョブを作ってバックグラウンドで処理を動かす流れを、具体的なコードとともに見ていきましょう。

### 簡単な処理を実行してみる

まずは動きを確かめるため、メッセージをログに出力するだけのシンプルなジョブを作ってみます。
ジョブは`rails generate job`コマンドで作成できます。

```bash title="ターミナル"
$ rails generate job SampleJob
```

このコマンドを実行すると、`app/jobs/sample_job.rb`が作られます。
中身を以下のように書き換えてみましょう。

```ruby title="app/jobs/sample_job.rb"
class SampleJob < ApplicationJob
  queue_as :default

  def perform(name)
    Rails.logger.info("SampleJobを開始します：#{name}")
    sleep(5) # 時間のかかる処理を再現
    Rails.logger.info("SampleJobが完了しました：#{name}")
  end
end
```

`perform`メソッドの中に、実際に実行したい処理を書きます。
ここでは、分かりやすいように`sleep(5)`で「時間のかかる処理」を再現しています。

<Callout variant="memo">
  `queue_as`は、このジョブをどのキューに入れるかを指定するものです。 指定しない場合は`default`キューが使われます。
</Callout>

作成したジョブは、`perform_later`で実行を依頼（エンキュー）します。 Railsコンソールから試してみましょう。

```bash title="ターミナル"
$ rails console
```

```ruby title="Railsコンソール"
SampleJob.perform_later("ナオキ")
```

`perform_later`を呼ぶと、ジョブは即座に実行されるのではなく、一旦キューに積まれます。
具体的には、データベースの`solid_queue_jobs`にジョブの情報がレコードとして記録され、すぐに実行できるものは`solid_queue_ready_executions`へ移されます。
そして、ワーカーがそれを拾って処理します。

<SpeechBubble icon="/authors/shiomi-naoki.jpg" name="ナオキ">
  `perform_later`が「あとでやっておいてね」とお願いするイメージです！
  すぐ実行したい場合は`perform_now`を使うと、キューに積まれずその場で処理されます！
</SpeechBubble>

ただし、このままではジョブはキューに積まれるだけで処理されません。
ジョブを実際に処理するには、ワーカーを起動しておく必要があります。
別のターミナルを開いて、以下のコマンドを実行しましょう。

```bash title="ターミナル"
$ bin/jobs
```

ワーカーが起動した状態で`perform_later`を実行すると、しばらくしてログに以下のような出力が表示されます。

```text title="ログ"
SampleJobを開始します：ナオキ
SampleJobが完了しました：ナオキ
```

これで、バックグラウンドでジョブが処理されたことを確認できました。

### mission_control-jobsでジョブの状態を確認する

コンソールやログでもジョブの状態は確認できますが、ジョブの数が増えてくると、画面上で一覧を見られたほうが便利です。
そこで役立つのが`mission_control-jobs`です。
`mission_control-jobs`は、Active Jobのジョブを管理するためのダッシュボードを提供するgemです。
キューに溜まっているジョブや、失敗したジョブをブラウザ上で確認でき、失敗したジョブの再実行や破棄もボタン操作で行えます。

#### 導入方法

Gemfileに以下を追加します。

```ruby title="Gemfile"
gem "mission_control-jobs"
```

そして`bundle install`を実行します。

```bash title="ターミナル"
$ bundle install
```

#### ルーティングの設定

次に、ダッシュボードにアクセスするためのルーティングを`config/routes.rb`に追加します。

```ruby title="config/routes.rb"
Rails.application.routes.draw do
  # ...
  mount MissionControl::Jobs::Engine, at: "/jobs"
end
```

これで、`/jobs`にアクセスするとダッシュボードが表示されるようになります。

#### 認証の設定

`mission_control-jobs`は、デフォルトでHTTPベーシック認証が有効になっており、認証情報を設定しないとアクセスできないようになっています。
以下のコマンドでユーザー名とパスワードを設定しましょう。

```bash title="ターミナル"
$ rails mission_control:jobs:authentication:configure
```

設定が完了したら、サーバーを起動して[http://localhost:3000/jobs](http://localhost:3000/jobs)にアクセスしてみましょう。
以下のようにダッシュボードが表示され、キューの一覧や各ジョブの状態を画面上で確認できます。

![mission_control-jobsのダッシュボード](/articles/solid-queue-1.jpg)

<SpeechBubble icon="/authors/shiomi-naoki.jpg" name="ナオキ">
  失敗したジョブが一覧で見られて、ボタン1つで再実行できるのがとても便利です！
</SpeechBubble>

## リトライ処理の実装方法

ここからが本題のリトライ処理です。
冒頭でも触れたとおり、Solid Queue自身はリトライの仕組みを持っておらず、リトライやエラーハンドリングは`Active Job`が受け持ちます。
そのため、リトライ処理は`Active Job`の`retry_on`を使って実装します。

### retry_onの基本

`retry_on`は、指定した例外が発生したときにジョブを自動でリトライさせるための仕組みです。
先ほどの`SampleJob`を、わざと失敗してリトライする形に書き換えてみましょう。

```ruby title="app/jobs/sample_job.rb" showLineNumbers {4}
class SampleJob < ApplicationJob
  queue_as :default

  retry_on StandardError, wait: 5.seconds, attempts: 3

  def perform(name)
    Rails.logger.info("SampleJobを開始します：#{name}")
    raise StandardError, "エラーが発生しました"
  end
end
```

`retry_on`には、主に次のような設定を渡せます。

- 第1引数：リトライの対象とする例外クラス（ここでは`StandardError`）
- `wait`：リトライまでの待機時間。`5.seconds`のように秒単位で指定する
- `attempts`：実行する最大回数（初回 + リトライを含めた合計回数）

上記の例では、ジョブが失敗すると5秒待ってから再実行され、それを最大3回まで繰り返します。
3回試しても失敗した場合は、最終的に失敗ジョブとして`solid_queue_failed_executions`に記録されます。

### 動作を確認する

ワーカーを起動した状態で、コンソールから先ほどのジョブを実行してみましょう。

```ruby title="Railsコンソール"
SampleJob.perform_later("ナオキ")
```

ログを見ると、ジョブが失敗するたびに、5秒間隔で繰り返し実行される様子が確認できます。
さらに先ほど導入したmission_control-jobsのダッシュボードを開くと、リトライ待ちのジョブや最終的に失敗したジョブの状態を画面上で確認できます。

### リトライしきれなかったジョブの扱い

`attempts`で指定した回数を試しても成功しなかったジョブは、失敗ジョブとして記録され、自動では再実行されません。
こうしたジョブは、mission_control-jobsのダッシュボードから内容を確認し、原因を直したうえで手動にて再実行できます。
また、コンソールから再実行・破棄も行えます。

```ruby title="Railsコンソール"
# 失敗した実行を取得する
failed_execution = SolidQueue::FailedExecution.find(対象のID)

# エラー内容を確認する
failed_execution.error

# 再実行する
failed_execution.retry

# 破棄する
failed_execution.discard
```

<Callout variant="memo">対象のIDは、mission_control-jobsのダッシュボードから確認できます。</Callout>

<SpeechBubble icon="/authors/shiomi-naoki.jpg" name="ナオキ">
  「自動リトライで一時的なエラーには備えつつ、それでもダメなものは失敗ジョブとして記録して後から対応する」という流れだね！
</SpeechBubble>

### 特定の例外は破棄したいとき

エラーの中には、何度リトライしても成功する見込みのないものもあります（例：対象のレコードがすでに削除されている場合など）。
そういった例外は、リトライせずに破棄する`discard_on`を使用します。

```ruby title="app/jobs/sample_job.rb" showLineNumbers {5}
class SampleJob < ApplicationJob
  queue_as :default

  retry_on Net::OpenTimeout, wait: 5.seconds, attempts: 3
  discard_on ActiveJob::DeserializationError

  def perform(name)
    # ...
  end
end
```

このように`retry_on`と`discard_on`を組み合わせることで「一時的なエラーはリトライし、回復の見込みがないエラーは破棄する」といった状況に応じたエラーハンドリングが実現できます。

## まとめ

本記事では、Solid Queueの仕組みとリトライ処理の実装方法を紹介しました。
Solid Queueは、ジョブの管理に通常のデータベースをそのまま使うことができるため、導入コストが低く、Rails標準のキューイングシステムとして非常に便利です。
また、リトライ処理を実装することで、ジョブの失敗に備えることができます。
ぜひSolid Queueを使って、ジョブの管理やリトライ処理を実装してみてください！


---

## 【Expo】SDK 56で安定版になったExpoUI

- URL: https://blog.to-ko-s.com/articles/expo-sdk-56
- 著者: 杉田侑祐
- 公開日: 2026-06-29
- タグ: JavaScript

> Expo SDK 56で安定版になったExpoUIについて解説します。Universal Componentsの紹介やネイティブAPIの安定化をはじめ、コミュニティライブラリからimport文の書き換えのみで利用出来ることを解説します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回は、React Native向けのフレームワークであるExpoの最新版「SDK 56」におけるExpoUI（パッケージ名`@expo/ui`）について解説します。
2026年5月21日にリリースされたExpo「SDK 56」では、待望だった`@expo/ui`がついに安定版で利用可能になりました。
「SDK 53」でアルファ版として登場してから数バージョンを経て、「SDK 56」ではデフォルトの`create-expo-app`テンプレートに同梱され、Expo Goでも利用できるようになっています。

本記事では、「SDK 55」までの位置づけと「SDK 56」での変化を整理しつつ、ExpoUIの概要が把握できるようにまとめていきます。

<ExternalLink url="https://expo.dev/changelog/sdk-56" />

### 対象読者

- フロントエンドエンジニアの方
- React Native/Expoでアプリ開発をしている方
- `.ios.tsx`/`.android.tsx`での書き分けに課題を感じている方

### この記事で扱う内容、扱わない内容

- ExpoUIの概要
- SDK 56でのExpoUIの主要な変更点
- Universal Componentsの紹介

この記事で扱わない内容は下記です。

- React Native/Expoの基本的な使い方
- SwiftUI/Jetpack Composeの基本的な使い方

## ExpoUIの概要

`@expo/ui`は、iOSではSwiftUI、AndroidではJetpack Composeを直接使ってネイティブUIを構築するためのコンポーネント群です。
「React NativeのViewをネイティブ風に見せる」のではなく、本物のSwiftUI/ComposeをそのままReactからマウントするのがポイントです。

提供される名前空間は大きく3つに分かれています。

- `@expo/ui/swift-ui` : iOS向け、SwiftUIベース
- `@expo/ui/jetpack-compose` : Android向け、Material3Composeベース
- `@expo/ui/...`（Universal）: iOS/Android/Webで共通に使えるクロスプラットフォームAPI

「SDK 56」から新しく追加されたのが、`@expo/ui/...`（Universal）です！

## SDK 55 までのExpoUIの位置づけ

「SDK 56」の変更を理解するために、「SDK 55」時点でのExpoUIの状態を簡単に振り返ります。

- SwiftUI API：「SDK 55」でベータ。SwiftUI寄りに命名を揃える破壊的変更が入った段階
- Jetpack Compose API：「SDK 55」でアルファ版からベータ版に昇格。Material3コンポーネントが一気に追加された段階
- Universalコンポーネント：未提供。クロスプラットフォームUIは引き続き`.ios.tsx`/`.android.tsx`で書き分けるか、React Nativeのコンポーネントを使う必要があった段階
- Expo Go：ExpoUIは、Expo Goで試せなかった段階

「SDK 55」時点ではベータ版ということもあり、プロダクションへの本格採用には踏ん切りがつきにくいフェーズだったと理解しています！

<Callout variant="info">SwiftUIとJetpack Composeは、ベータ版ではAPIが破壊的に変更される可能性がありました！</Callout>

## SDK 56 でのExpoUIの主要な変更点

公式Changelogでは、「SDK 56」におけるExpoUIの柱として以下の3点が挙げられています。

1. Universal Componentsの新登場
2. ネイティブAPI（SwiftUI/Compose）の安定化
3. コミュニティライブラリからimport文の書き換えのみで利用可能

順に見ていきます。

### 1. Universal Components

「SDK 56」の目玉は何と言ってもプラットフォームをまたいで動く共通コンポーネント群(Universal Components)の追加です。
同じコンポーネントでも、**裏側はiOS・Android・Webで別々の仕組み**になります。
対応表は下記です。

| 動かす環境         | Universalの裏で動くもの                                                         |
| ------------------ | ------------------------------------------------------------------------------- |
| iPhone/iPad（iOS） | SwiftUI（細かいAPIが要るときは`@expo/ui/swift-ui`）                             |
| Android 端末       | Jetpack Compose（同様に`@expo/ui/jetpack-compose`）                             |
| ブラウザ（Web）    | ReactがDOMへ描く。`react-dom`か`react-native-web`のどちらかを使う想定になります |

<Callout variant="warning">Webはまだexperimentalです。本番で使うときは公式の注意書きもあわせて読んでください。</Callout>

提供されるのはレイアウト・テキスト・入力・コントロール・シート系の最小コンポーネントです。
レイアウト系には`Host`/`Row`/`Column`/`Spacer`/`ScrollView`があります。
表示系には`Text`/`Icon`、入力系には`TextInput`/`Button`/`Switch`/`Slider`/`Checkbox`が含まれます。
加えて`BottomSheet`や`FieldGroup`といった構成系コンポーネントも提供されます。

これにより、これまで`.ios.tsx`と`.android.tsx`に分けて書いていたUIを単一ファイルに統合できるケースが増えます。
「全部の画面をUniversalで済ます」ではなく、「共通化できる部分はUniversal」、「こだわりたい画面はプラットフォーム別API」という使い分けが現実的な落としどころになりそうです！

### 2. SwiftUI/Jetpack Compose APIの安定化

「SDK 53」から「SDK 56」まで破壊的変更を経て、ネイティブ側APIがついに安定版になりました。
実用面で効くポイントは次の3つです。

#### 2-1. カスタムView/Modifierの拡張

自前のSwiftUI ViewやCompose ModifierをExpoUIへ差し込めるようになりました。
レイアウト同期・props・イベントはExpoUI側が面倒を見てくれるので、「あのネイティブ部品だけ足りない」というケースを自前で埋められます。

#### 2-2. Material 3 Dynamic ColorsとMaterial Symbols

`useMaterialColors`でシステムテーマに追従するMaterial 3の動的カラーが取れるようになり、`Icon` + `@expo/material-symbols`でMaterial Symbolsのフルカタログが使えます。

```tsx title="Material 3 Dynamic Colors と Material Symbols" showLineNumbers
import { Icon, useMaterialColors } from "@expo/ui/jetpack-compose"

export function FavoriteIcon() {
  const colors = useMaterialColors()
  return <Icon name="favorite" tintColor={colors.primary} size={24} />
}
```

#### 2-3. ネイティブ状態と同期

`useNativeState`なら、文字などの状態を端末側に残したままJavaScriptから扱えます。
`WorkletCallback`を使えば、入力イベントにぴったり寄せて処理できます。
結果として、従来の制御入力で出やすかった入力と表示のズレやちらつきを抑えやすくなります。

```tsx title="ネイティブ状態と同期 worklet コールバック useNativeState" showLineNumbers
import { Host, TextInput } from "@expo/ui"
import { useNativeState } from "@expo/ui/swift-ui"

export function NativeStateExample() {
  const [text, setText] = useNativeState("")
  return (
    <Host style={{ flex: 1 }}>
      <TextInput value={text} onValueChange={setText} />
    </Host>
  )
}
```

### 3. コミュニティライブラリからimport文の書き換えのみで利用可能

ExpoUIがネイティブプリミティブをカバーするようになったことで、既存のコミュニティライブラリと役割の重なる部分も出てきました。
「SDK 56」では`import`を差し替えるだけで移行できます。

対象は以下のとおりです。

- `@react-native-segmented-control/segmented-control`
- `@react-native-picker/picker`
- `@react-native-community/datetimepicker`
- `@react-native-masked-view/masked-view`
- `@gorhom/bottom-sheet`

たとえばDateTimePickerは以下のように書き換えられます。

```tsx
// 旧
import DateTimePicker from "@react-native-community/datetimepicker"

// 新
import DateTimePicker from "@expo/ui/community/datetime-picker"
```

<Callout variant="warning">
  ExpoUIの裏側はUIKit/Android ViewではなくSwiftUI/Jetpack
  Composeなので、一部のpropsは非対応だったり挙動が異なったりします。importを変えるだけで動くケースが多いですが、各種オプションを使い込んでいるプロジェクトでは、移行前に必ず差分を確認しましょう。
</Callout>

## Universal Componentsの紹介

### 基本のお作法：`Host`でラップする

`Universal Components`を使うときは、ツリーの先頭を`Host`で包みます。
`Host`がiOSならSwiftUI、AndroidならJetpack Composeへのつなぎ役になります。
中身のコンポーネントは必ずこの`Host`の内側に書き、`import`は`@expo/ui`直下から取ります。

<ExternalLink url="https://docs.expo.dev/versions/v56.0.0/sdk/ui/universal/host/" />

```tsx title="Hostをトップコンポーネントで使用する" showLineNumbers
import { Host, Column, Button, Text } from "@expo/ui"

export default function Example() {
  return (
    // ツリーのトップでHostを使用
    <Host style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Text>Hello, world!</Text>
        <Button label="Press me" onPress={() => alert("Pressed")} />
      </Column>
    </Host>
  )
}
```

ここから個人的に注目している、`FieldGroup`/`BottomSheet`/`TextInput`（+ レイアウト系）の使い方を見ていきます。

### FieldGroup

`FieldGroup`はiOSの設定アプリのような、セクション分けされたグループ型のフォームをそのまま再現してくれるコンポーネントです。
SwiftUIの`Form`に相当する挙動を持ち、AndroidではJetpack Compose側で同等の見た目に変換されます。
サブコンポーネントとして`FieldGroup.Section`/`FieldGroup.SectionHeader`/`FieldGroup.SectionFooter`が用意されています。

<ExternalLink url="https://docs.expo.dev/versions/v56.0.0/sdk/ui/universal/fieldgroup/" />

```tsx title="FieldGroup" showLineNumbers
import { useState } from "react"
import { Host, FieldGroup, Switch, Text } from "@expo/ui"

export default function SettingsScreen() {
  const [push, setPush] = useState(true)
  const [email, setEmail] = useState(false)

  return (
    <Host style={{ flex: 1 }}>
      <FieldGroup>
        <FieldGroup.Section title="通知">
          <Switch label="プッシュ通知" value={push} onValueChange={setPush} />
          <Switch label="メール通知" value={email} onValueChange={setEmail} />
        </FieldGroup.Section>

        <FieldGroup.Section title="アプリ情報">
          <Text>バージョン 1.0.0</Text>
        </FieldGroup.Section>
      </FieldGroup>
    </Host>
  )
}
```

`title`を渡せば見出しが、`<FieldGroup.SectionFooter>`を入れれば説明文（よくある「この設定は〜」みたいなグレーの注釈）がSwiftUI/Compose標準のスタイルで描画されます。
設定画面・プロファイル画面・各種フォームなど、これまで自前で組んでいたありがちな画面の実装コストが大幅に下がるのがこのコンポーネント最大の旨味です。

### BottomSheet

`BottomSheet`は画面下部からスライドアップしてくるモーダルシートです。`@gorhom/bottom-sheet`からimport文を書き換えるだけで利用可能になっており、`isPresented`で表示を制御するReact的なAPIになっています。

<ExternalLink url="https://docs.expo.dev/versions/v56.0.0/sdk/ui/universal/bottomsheet/" />

```tsx title="BottomSheet" showLineNumbers
import { useState } from "react"
import { Host, Column, Button, BottomSheet, Text } from "@expo/ui"

export default function Example() {
  const [isPresented, setIsPresented] = useState(false)

  return (
    <Host style={{ flex: 1 }}>
      <Button label="シートを開く" onPress={() => setIsPresented(true)} />
      <BottomSheet isPresented={isPresented} onDismiss={() => setIsPresented(false)}>
        <Column spacing={12}>
          <Text textStyle={{ fontSize: 18, fontWeight: "700" }}>シートの内容</Text>
          <Text>下にスワイプするか、オーバーレイをタップで閉じます。</Text>
          <Button label="閉じる" onPress={() => setIsPresented(false)} />
        </Column>
      </BottomSheet>
    </Host>
  )
}
```

### TextInput + WorkletCallback

「SDK 56」から`TextInput`は、`value`にネイティブ側の状態を載せられるようになりました。
iOSとAndroidの両方です。

これまでReactの`useState`で入力文字を管理すると、`value`が変わるたびに「端末とJavaScript」を行き来します。
その往復が遅いと、入力と表示のあいだにちらつきが起きやすくなっていました。

`useNativeState`は、この状態をネイティブ側で扱えるフックです。`WorkletCallback`と組み合わせると、ちらつきも抑えやすくなります。

`useNativeState`は、iOSなら`@expo/ui/swift-ui`、Androidなら`@expo/ui/jetpack-compose`から読み込みます。
両方そろえるときは`.ios.tsx`と`.android.tsx`でファイルを分ける書き方がおすすめです。

<ExternalLink url="https://docs.expo.dev/versions/v56.0.0/sdk/ui/universal/textinput/" />

```tsx title="TextInput" showLineNumbers
import { Host, Column, TextInput, Text } from "@expo/ui"
import { useNativeState } from "@expo/ui/swift-ui" // または /jetpack-compose

export default function SearchBar() {
  const [query, setQuery] = useNativeState("")

  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={8}>
        <TextInput value={query} onValueChange={setQuery} placeholder="検索..." />
        <Text>入力中: {query}</Text>
      </Column>
    </Host>
  )
}
```

フォームバリデーション付きの長い入力フォームなど、入力レスポンスを少しでも良くしたい画面で効果を発揮します。

## 参考記事

- Expo SDK 56 Changelog: https://expo.dev/changelog/sdk-56
- Expo SDK 55 Changelog: https://expo.dev/changelog/sdk-55
- Expo UIドキュメント: https://docs.expo.dev/versions/latest/sdk/ui/
- Universal Components: https://docs.expo.dev/versions/v56.0.0/sdk/ui/universal/
- ExpoUI移行ガイド: https://docs.expo.dev/versions/v56.0.0/sdk/ui/drop-in-replacements/

## さいごに

「SDK 56」のExpoUIは、ベータ版から安定版へ変わりこれから多くのプロジェクトで使われていくかと思います。
新規プロジェクトを`create-expo-app`で立ち上げると最初から`@expo/ui`が入ってくるので、「SDK 56」を機にまずは触ってみるのがおすすめです。


---

## 【JavaScript】Fetch APIのラッパーライブラリ「upfetch」の導入方法

- URL: https://blog.to-ko-s.com/articles/upfetch-introduction
- 著者: 鳥井京祐
- 公開日: 2026-06-05
- タグ: JavaScript, TypeScript

> fetchのラッパーライブラリ「upfetch」の導入方法を解説。基本設定からスキーマバリデーション、エラーハンドリングまで、実践的なコード例とともに紹介します。


## はじめに

こんにちは、株式会社TOKOSの鳥井です！
普段の開発でHTTPリクエストを書くとき、Fetch APIに不満を感じたことはありませんか？
`JSON.stringify`や`Content-Type`の設定を毎回書くのは面倒ですし、レスポンスの型安全性も自分で担保する必要があります。
本記事では、そんな課題を解決してくれるfetchラッパーライブラリ「upfetch」の導入方法を紹介します💪

### 対象読者

- Fetch APIやfetchのライブラリでHTTPリクエストを書いている方
- fetchのライブラリを検討している方
- HTTPリクエストのコードに煩雑さを感じている方

## upfetchとは

upfetchは、ネイティブのFetch APIをラップして使いやすくするライブラリです！
主な特長は以下の通りです。

- **軽量**: 1.6kB（gzip）、他npmパッケージへの依存なし
- **型安全**: Zodなどのスキーマライブラリと連携してレスポンスをパースできる
- **自動シリアライズ**: クエリパラメータやリクエストボディをオブジェクトで渡せる
- **その他の機能**: タイムアウト、リトライ、ライフサイクルフックを標準搭載

Fetch APIの使い勝手はそのままに、実務で必要な機能を追加できるのがupfetchの魅力です。

また、使用可能な実行環境はブラウザだけではありません。ブラウザ外でJavaScriptを実行するランタイムや、CDNのエッジサーバー上で動作するエッジ環境にも対応しています。
それぞれの環境における具体例を以下に示します。

- **ブラウザ**: Chrome、Firefox、Safari、Edge
- **ランタイム**: Node.js 18以上、Bun、Deno
- **エッジ環境**: Cloudflare Workers、Vercel Edge Runtime

<ExternalLink url="https://github.com/L-Blondy/up-fetch" />

## 他ライブラリとの比較

fetchラッパーとしてはaxiosやkyも有名です。
upfetchとの違いを表で整理しました。

| 項目                   | upfetch | axios                 | ky    |
| ---------------------- | ------- | --------------------- | ----- |
| サイズ（gzip）         | 1.6kB   | 13kB                  | 3.5kB |
| 外部への依存           | なし    | あり                  | なし  |
| スキーマバリデーション | ◯       | ✕                     | ✕     |
| リトライ               | ◯       | ✕（プラグインが必要） | ◯     |
| タイムアウト           | ◯       | ◯                     | ◯     |

upfetchはfetchネイティブでありながら、スキーマバリデーションを内蔵している点が大きな差別化ポイントです！
axiosはデフォルトでXMLHttpRequestを使用しており、サーバーサイドとの互換性やバンドルサイズの面で不利になる場合があります（fetchアダプターも選択可能です）。
kyも優秀なライブラリですが、スキーマバリデーションは自分で組み合わせる必要があります。

<SpeechBubble icon="/authors/torii-keisuke.jpg" name="鳥井">
  2026年4月にはaxiosでCritical（CVSS10.0）の脆弱性（[GHSA-fvcv-3m26-pcqx](https://github.com/advisories/GHSA-fvcv-3m26-pcqx)）が公表されたこともあり、この機会にaxiosからupfetchへの移行を考えてみるのも良いかもしれませんね！
</SpeechBubble>

## セットアップ

### インストール

```bash title="インストール"
# npm
npm i up-fetch

# yarn
yarn add up-fetch

# pnpm
pnpm add up-fetch

# bun
bun add up-fetch

# deno
deno add up-fetch
```

### fetchクライアントの設定

`up`関数に`fetch`を渡してfetchクライアントを作成します。
第2引数のコールバックでデフォルトのオプションを設定できます。

```ts title="src/libs/api/upfetch.ts"
import { up } from "up-fetch"

export const upfetch = up(fetch, () => ({
  baseUrl: "https://jsonplaceholder.typicode.com",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
}))
```

すべてのリクエストに共通の設定が適用されるfetchクライアントの完成です。

<Callout variant="info">
  本記事のコード例は、[JSONPlaceholder](https://jsonplaceholder.typicode.com/)に対するリクエストとして、そのまま実行できます！
  ただし、POST・PUT・PATCH・DELETEは成功レスポンスが返るだけで、データは実際には保存されない点に注意してください！
  また、Cookie認証・Bearer認証はJSONPlaceholderでは動作しないため、`https://api.example.com`の部分はご自身の認証付きAPIに置き換えてください！
</Callout>

## 基本的なリクエスト

upfetchはレスポンスを自動でパース（JavaScriptのデータに変換）してくれます。
`Content-Type`が`application/json`ならJSONとして、`text/*`ならテキストとして自動判定されるため、`.json()`を呼ぶ必要がありません。
各HTTPメソッドにおける使い方を見ていきましょう！

### GET

```ts title="Fetch APIの場合"
const response = await fetch("https://jsonplaceholder.typicode.com/users")
const users = await response.json()
```

```ts title="upfetchの場合"
import { upfetch } from "@/libs/api/upfetch"

const users = await upfetch("/users")
```

`response.json()`の呼び出しが不要になり、たった1行でデータを取得できます！
さらに、クエリパラメータは`params`オプションにオブジェクトを渡すだけで自動的にシリアライズされます！

```ts title="Fetch APIの場合"
fetch("https://jsonplaceholder.typicode.com/users?_page=1&_limit=5")
```

```ts title="upfetchの場合"
import { upfetch } from "@/libs/api/upfetch"

upfetch("/users", {
  params: { _page: 1, _limit: 5 },
})
```

URLの組み立てを意識する必要がなくなり、コードの見通しがよくなりますね✨

### POST

```ts title="Fetch APIの場合"
await fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "田中太郎", email: "tanaka@example.com" }),
})
```

```ts title="upfetchの場合"
import { upfetch } from "@/libs/api/upfetch"

await upfetch("/users", {
  method: "POST",
  body: { name: "田中太郎", email: "tanaka@example.com" },
})
```

オブジェクトを`body`に渡すだけで、自動的に`JSON.stringify`されます。
`Content-Type`ヘッダーの指定が不要なのも嬉しいです！

<Callout>
  upfetchはfetchの全てのbody型（Blob、ArrayBuffer、FormData等）もそのまま使えます。オブジェクトの場合だけ自動でJSON化される仕組みです。
</Callout>

### PUT / PATCH

```ts title="Fetch APIの場合（PUT）"
await fetch("https://jsonplaceholder.typicode.com/users/1", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "田中次郎" }),
})
```

```ts title="upfetchの場合（PUT）"
import { upfetch } from "@/libs/api/upfetch"

await upfetch("/users/1", {
  method: "PUT",
  body: { name: "田中次郎" },
})
```

PATCHも同様の書き方でOKです👌

```ts title="upfetchの場合（PATCH）"
import { upfetch } from "@/libs/api/upfetch"

await upfetch("/users/1", {
  method: "PATCH",
  body: { email: "jiro@example.com" },
})
```

### DELETE

```ts title="Fetch APIの場合"
await fetch("https://jsonplaceholder.typicode.com/users/1", {
  method: "DELETE",
})
```

```ts title="upfetchの場合"
import { upfetch } from "@/libs/api/upfetch"

await upfetch("/users/1", {
  method: "DELETE",
})
```

DELETEの場合は`body`の差が出ませんが、`baseUrl`を共通化できる分、URLの記述が簡潔になります。

<SpeechBubble icon="/authors/torii-keisuke.jpg" name="鳥井">
  Fetch APIと比べて、ボイラープレートがかなり減りますね。特にPOSTリクエストの簡潔さは感動ものです✨
</SpeechBubble>

## スキーマバリデーション

upfetchでは`schema`オプションにスキーマを渡すことでレスポンスの型をバリデーションできます！
ここではZodを使った例を紹介します。

```ts title="Zodでスキーマバリデーション"
import { upfetch } from "@/libs/api/upfetch"
import { z } from "zod"

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.email(),
})

const user = await upfetch("/users/1", {
  schema: userSchema,
})
// user は { id: number; name: string; email: string } 型として推論される
```

レスポンスのJSONがスキーマの定義を満たしていない場合は`ResponseValidationError`がスローされます。

```ts title="バリデーションエラーのハンドリング"
import { upfetch } from "@/libs/api/upfetch"
import { isResponseValidationError } from "up-fetch"

try {
  const user = await upfetch("/users/1", { schema: userSchema })
} catch (error) {
  if (isResponseValidationError(error)) {
    console.error(error.issues)
  }
}
```

APIの型安全性をランタイムで保証できるのは、upfetchならではの強みです。

<Callout>
  upfetchは[Standard Schema](https://github.com/standard-schema/standard-schema)に対応しています。Standard
  Schemaとは、ZodやValibotなどのスキーマライブラリが共通で実装するインターフェース仕様です。そのため、Zod以外にもValibotやArkTypeなどのスキーマライブラリも利用できます。
</Callout>

<ExternalLink url="https://zod.dev/" />

## ライフサイクルフック

upfetchには複数のライフサイクルフックがあります。ここでは代表的な`onRequest`、`onSuccess`、`onError`を紹介します。
リクエストの前後に共通処理を挟みたい場合に便利です！

```ts title="フックの使用方法"
import { up, isResponseError } from "up-fetch"

const upfetch = up(fetch, () => ({
  baseUrl: "https://jsonplaceholder.typicode.com",
  onRequest: (options) => {
    console.log("リクエスト開始:", options.method, options.url)
  },
  onSuccess: (data, options) => {
    console.log("リクエスト成功:", options.url)
  },
  onError: (error) => {
    if (isResponseError(error) && [400, 401, 422].includes(error.status)) {
      const data = error.data as { message?: string }
      console.error("APIエラー:", data.message)
      return
    }
    console.error("予期しないエラーが発生しました")
  },
}))
```

上記の例では、`onError`でステータスコードに応じてエラーメッセージを出し分けています。
400系のエラーはAPIからのメッセージを表示し、それ以外は汎用的なエラーメッセージを表示する、というパターンは実務でもよく使います。

## タイムアウト

Fetch APIにはタイムアウト機能がなく、`AbortController`を使って自前で実装する必要がありました。

```ts title="Fetch APIの場合"
const controller = new AbortController()
const timeoutId = setTimeout(() => controller.abort(), 3000)
try {
  const response = await fetch("https://jsonplaceholder.typicode.com/users", {
    signal: controller.signal,
  })
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`)
  }
  const users = await response.json()
} catch (error) {
  if (error.name === "AbortError") {
    console.error("リクエストがタイムアウトしました")
  } else {
    throw error
  }
} finally {
  clearTimeout(timeoutId)
}
```

`AbortController`と`setTimeout`を組み合わせ、指定時間後にリクエストを中断する必要があります。
upfetchでは`timeout`オプションを指定するだけです！

```ts title="upfetchの場合"
import { upfetch } from "@/libs/api/upfetch"

await upfetch("/users", {
  timeout: 3000,
})
```

fetchクライアント作成時にデフォルト値として設定も可能です。

```ts title="fetchクライアント単位のタイムアウト設定"
import { up } from "up-fetch"

const upfetch = up(fetch, () => ({
  baseUrl: "https://jsonplaceholder.typicode.com",
  timeout: 5000,
}))
```

タイムアウトすると、リクエストは中断され、例外が発生します！
`AbortController`で手動中断した場合の`"AbortError"`とは異なり、upfetchのタイムアウトでは`"TimeoutError"`がスローされます！

## リトライ

ネットワークの一時的な障害に備えて、自動リトライを設定できます。

```ts title="基本的なリトライ設定"
import { up } from "up-fetch"

const upfetch = up(fetch, () => ({
  baseUrl: "https://jsonplaceholder.typicode.com",
  retry: {
    attempts: 3, // 最大リトライ回数
    delay: 1000, // リトライ間隔（ミリ秒）
  },
}))
```

リトライのたびに待機時間を増やす設定も可能です！
以下の例ではリトライ回数の2乗で待機時間を増やす実装となっています！

```ts title="リトライ間隔を長くする設定"
import { up } from "up-fetch"

const upfetch = up(fetch, () => ({
  baseUrl: "https://jsonplaceholder.typicode.com",
  retry: {
    attempts: 3,
    // 1回目: 1秒後、2回目: 4秒後、3回目: 9秒後にリトライ
    delay: (ctx) => ctx.attempt ** 2 * 1000,
  },
}))
```

<SpeechBubble icon="/authors/torii-keisuke.jpg" name="鳥井">
  設定1つでリトライが済むのは嬉しいポイントです。AbortControllerを書かなくていいのも最高ですね😎
</SpeechBubble>

## エラーハンドリング

Fetch APIはHTTPエラーが返ってきても例外をスローしません。
そのため、`response.ok`を毎回チェックするコードを書く必要があります。
upfetchでは、`response.ok`が`false`の場合に自動で`ResponseError`がスローされるため、このチェックが不要になります！

`isResponseError`と`isResponseValidationError`を使って、エラーの種類に応じた処理を書けます。

```ts title="エラーの種類に応じた分岐"
import { upfetch } from "@/libs/api/upfetch"
import { isResponseError, isResponseValidationError } from "up-fetch"

try {
  const user = await upfetch("/users/1", { schema: userSchema })
} catch (error) {
  if (isResponseError(error)) {
    // APIがエラーレスポンスを返した場合（4xx, 5xx）
    console.error("ステータス:", error.status)
    console.error("レスポンス:", error.data)
  }
  if (isResponseValidationError(error)) {
    // スキーマバリデーションに失敗した場合
    console.error("バリデーションエラー:", error.issues)
  }
}
```

実務では、ステータスコードに応じてUIの通知を出し分けるパターンが多いです。

```ts title="エラーハンドリングの実装例"
import { up, isResponseError } from "up-fetch"

// showNotificationはトースト通知を表示するユーティリティ関数を想定
const handleError = (error: unknown) => {
  if (!(isResponseError(error) && [400, 401, 422].includes(error.status))) {
    showNotification("エラーが発生しました。担当者にお問い合わせください。", "error")
    return
  }
  const data = error.data as { message?: string }
  showNotification(data.message ?? "エラー", "error")
}

const upfetch = up(fetch, () => ({
  baseUrl: "https://jsonplaceholder.typicode.com",
  onError: handleError,
}))
```

<Callout>
  upfetchのエラーは大きく2種類です。`ResponseError`はAPIが4xx/5xxを返した場合にスローされます。`ResponseValidationError`はスキーマバリデーション失敗時にスローされます。
</Callout>

## 認証

HTTPリクエストで認証する方法として、代表的なCookie認証とBearer認証の例を紹介します。

### Cookie認証

Cookie認証を使う場合は、`credentials: "include"`をデフォルトオプションに設定します。

```ts title="Cookie認証の設定"
import { up } from "up-fetch"

export const upfetch = up(fetch, () => ({
  baseUrl: "https://api.example.com",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  credentials: "include",
}))
```

`credentials: "include"`を設定することで、Cookieが自動的に送信されます。
`headers`と同様に、fetchクライアント作成時に1度設定すれば、個別のリクエストごとに指定する必要はありません。

### Bearer認証

Bearer tokenを使う場合は、`headers`の`Authorization`にトークンを設定します。
`up`の第2引数は関数のため、リクエストのたびに呼び出され、最新のトークンを取得できます。

```ts title="Bearer認証の設定"
import { up } from "up-fetch"

export const upfetch = up(fetch, () => ({
  baseUrl: "https://api.example.com",
  headers: {
    // localStorageはブラウザ専用のAPI
    Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
  },
}))
```

なお、upfetch自体はサーバー環境でも動作しますが、`localStorage`はブラウザ専用のAPIです！
サーバーサイドでは別のトークン管理方法を用意する必要があることに注意してください！

トークンを非同期で取得する場合（SDK経由など）は、関数を`async`にすることで対応できます。

```ts title="非同期でトークンを取得する場合"
import { up } from "up-fetch"

const upfetch = up(fetch, async () => ({
  baseUrl: "https://api.example.com",
  headers: {
    Authorization: `Bearer ${await getAccessToken()}`,
  },
}))
```

## おわりに

本記事では、fetchラッパーライブラリ「upfetch」の導入方法を紹介しました！
今回は主要な機能と基本的な使い方を取り上げましたが、その他にもストリーミングやカスタムシリアライザーなどの高度な機能もあります。
ぜひプロジェクトへの導入を検討してみてください✨


---

## Oxfmtへの移行方法【まだPrettier使ってるの？】

- URL: https://blog.to-ko-s.com/articles/oxfmt-migration
- 著者: 西原月熙
- 公開日: 2026-05-18
- タグ: TypeScript, JavaScript

> Rust製の爆速フォーマッターOxfmtへのPrettierからの移行方法を解説します。公式のClaude Skillでの一発移行、本リポジトリでの速度実測、VSCode(Cursor)での設定、Biomeとの比較まで詳しく紹介します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、Rust製の爆速フォーマッターであるOxfmtについて、Prettierからの移行方法をまとめていきます💪

Prettierより圧倒的に速いと謳っているので、気になっている方も多いのではないでしょうか？
Oxfmtは2026年2月にBeta版が公開され、PrettierのJS/TS適合テスト100%通過済みです✨
さらに、公式のClaude Skillを使えばコマンド1つで移行できます😎

本記事では、以下の内容を紹介していきます💪

- Oxfmtの概要・特徴
- 移行方法
- 実際にどれくらい速くなったのか
- VSCode(Cursor)での設定方法
- 補足

## 対象読者

- Prettierを使っていて速度が気になっている方
- 新規プロジェクトのフォーマッター選定で迷っている方
- Tailwind CSSを使っており、`prettier-plugin-tailwindcss`なしでclassNameを並び替えたい方
- Claude Skillsを活用したツール移行の実例を知りたい方

## Oxfmtの概要・特徴

### 概要

Oxfmtは[Oxc](https://oxc.rs/)プロジェクトに含まれるRust製のJavaScript/TypeScriptフォーマッターです。
最大の特徴は、圧倒的な速度とPrettierとの高い**互換性**です✨

<ExternalLink url="https://oxc.rs/docs/guide/usage/formatter.html" />

### Prettierとの速度比較

公式ベンチマークでは、OxfmtはPrettier比で30倍以上と報告されています🚀
個人的には、これが一番のセールスポイントだと感じています😎

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  別のフォーマッターであるBiomeと比較しても、2〜3倍速いとのことです🏎️
</SpeechBubble>

<ExternalLink url="https://oxc.rs/docs/guide/benchmarks" />

### Prettierの適合テスト100%通過

速度だけが売りではありません。
PrettierのJavaScript/TypeScript適合テストを100%通過しているのも、嬉しいポイントです🎉

これにより、PrettierからOxfmtに移行してもフォーマット結果がほぼ完全に一致します。
そのため、移行直後に巨大なdiffで悩むことがなく、心理的なハードルも非常に低めです🙌

### 今後のデファクト候補

同じくOxcプロジェクトの1つとして、ESLint代替のOxlintがあります。
今後はOxlintと合わせてデファクトスタンダードになる可能性が高いと思っています。

<ExternalLink url="https://oxc.rs/docs/guide/usage/linter.html" />

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  Linter周りで前々からOxcに期待していたんですが、フォーマッターまで本格化してきて嬉しい限りです✨
</SpeechBubble>

### Tailwind CSSのサポート

個人的にかなり嬉しいのはTailwind CSSのサポート(classNameの並び替え)をしているという点です✨
Prettierは単体ではTailwind CSSのサポートはされておらず、プラグインを導入する必要がありました。
それに対しOxfmtは下記設定を追加するだけでTailwind CSSのサポートが可能です🙌

```jsonc title=".oxfmtrc.json"
{
  // その他設定...
  "sortTailwindcss": true,
}
```

`sortTailwindcss`はboolean値の他にオブジェクト形式でも指定可能で、`prettier-plugin-tailwindcss`と同じソートアルゴリズムを採用しています。
Tailwind CSS v3 (`config`オプション)/v4 (`stylesheet`オプション)の両方に対応しています。
さらに`functions`オプションで`clsx`/`cn`/`cva`/`tw`などのユーティリティ関数内のクラス並び替えも可能です💪

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `prettier-plugin-tailwindcss`からの乗り換えもスムーズに行えそうです🙌
</SpeechBubble>

<ExternalLink url="https://oxc.rs/docs/guide/usage/formatter/config-file-reference" />

## 移行方法

Oxfmtへの移行方法は、大きく2通りあります。

### 方法A: Claude Skillを使う(個人的に推奨)

`oxc-project`がClaude Skillsの公式スキル`migrate-oxfmt`を公開しています。
Claude Codeなどを使っているなら、これがもっとも楽な方法です💪

```bash title="ターミナル"
npx skills add https://github.com/oxc-project/oxc --skill migrate-oxfmt
```

このコマンドでスキルを追加した後、Claude CodeやCodex等で`/migrate-oxfmt`を実行するだけで、下記を自動でやってくれます🤖

- `oxfmt`のインストール
- `oxfmt --migrate=prettier`による設定変換
- `package.json`のscripts更新
- CIや`lint-staged`の更新
- 全ファイルの再フォーマット
- 不要になった`prettier`関連パッケージのアンインストール
- エディタ設定ファイルの更新

実際自分もこちらの手法を用いて、ほぼ不具合なく移行できました✨
こちらの方が後述の方法Bよりも細かい部分をよしなにやってくれます。

<ExternalLink url="https://github.com/oxc-project/oxc/blob/main/.agents/skills/migrate-oxfmt/SKILL.md" />

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  Skillsを使うと、コマンド1つで移行できるので考えることがほぼ無くなりました。これがAgent時代のツール移行体験ですね✨
  (今回はSkillsについての説明は割愛しています🙏)
</SpeechBubble>

### 方法B: 手動で移行する

Skillsを使わない場合でも、下記ワンライナーで移行できます🎉

```bash title="ターミナル"
npm add -D oxfmt@latest && npx oxfmt --migrate=prettier && npx oxfmt
```

ただしこちらは.prettierrc.jsonから.oxfmtrc.jsonへの変換等までしか行ってくれません。
公式の移行ガイドに、より詳しい手順がまとまっています🙌

<ExternalLink url="https://oxc.rs/docs/guide/usage/formatter/migrate-from-prettier.html" />

## 実際に移行してみる

では、実際に方法Aでの本ブログのリポジトリを移行する手順を紹介します。
本ブログのリポジトリ詳細については、[こちらの記事](/articles/tokos-tech-blog-renewal)をご覧ください。

まずはskillsを追加します。

```bash title="ターミナル"
npx skills add https://github.com/oxc-project/oxc --skill migrate-oxfmt
```

すると、いつもの`skills add`と同様にagents選択画面等が出るので進めていきます。
自分はClaude Codeをメインで利用しているので、Claude Codeを選択します。
![agents 選択画面（Claude Code を選択）](/articles/oxfmt-migration-1.jpg)

scopeは[skills.sh](https://skills.sh/)(Claude Skillsの公式ハブ)の推奨通り「Project」にします。
![scope 選択画面（Project を選択）](/articles/oxfmt-migration-2.jpg)

Installation methodも推奨通りで「Symlink」にします。
![Installation method 選択画面（Symlink を選択）](/articles/oxfmt-migration-3.jpg)

すると、画像のようにSkillsがインストールされます。
![migrate-oxfmt スキルのインストール完了画面](/articles/oxfmt-migration-4.jpg)

これで準備完了です！
あとはClaude Codeで一応Planモードにしながら上記のskillを使いつつ以下プロンプトを打ってみます。

```text title="Claude Code"
> /migrate-oxfmt 移行してください。
```

![/migrate-oxfmt 実行直後の対話プロンプト](/articles/oxfmt-migration-5.jpg)

すると、スクリプトでは考慮されないような質問をしてくれました！

まずはmdxファイルの扱いについてです。
Prettierから完全に移行したいので1番を選択します。
![mdx ファイル扱いの確認プロンプト](/articles/oxfmt-migration-6.jpg)

次に、既存のprettier関連のパッケージの扱いについてです。
こちらももちろん削除したいので1番を選択します。
![prettier 関連パッケージ削除の確認プロンプト](/articles/oxfmt-migration-7.jpg)

3つ目に、どの拡張子のファイルに対してフォーマットをさせるかです。
全拡張子を対象にして良いと思うので、こちらは2番を選択します。
![フォーマット対象拡張子の選択プロンプト](/articles/oxfmt-migration-8.jpg)

最後に、一括フォーマットを行ってしまって良いかの確認をしてくれました。
こちらについては、僕が`.prettierrc.json`に`"experimentalOperatorPosition"`という設定を入れており、こちらはOxfmtのデフォルトと違う部分になるので確認してくれているようです。
強い意思があって上記設定をしているわけではなかったので、ここは2番を選択します。
![experimentalOperatorPosition 設定の確認プロンプト](/articles/oxfmt-migration-9.jpg)

最終的なプランにて、修正対象ファイル等が示されました。
![移行プランの最終確認画面（修正対象ファイル一覧）](/articles/oxfmt-migration-10.jpg)

問題無さそうなので、実行させてみます💪

...すると、かなりいい感じに移行が完了していそうでした✨
例えば、`.oxfmtrc.json`が作成される一方で`.prettierrc.json`や`.prettierignore`が削除されています。

なお、下記の設定値は本ブログの`.prettierrc.json`/`.prettierignore`から自動引き継ぎされた本ブログ固有の値です。
そのままコピペすると意図せぬフォーマット結果になる可能性があるので、自プロジェクトで使う際は適宜調整してください🙏

```json title=".oxfmtrc.json(新規作成)"
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "all",
  "semi": false,
  "objectWrap": "preserve",
  "sortPackageJson": false,
  "sortTailwindcss": true,
  "ignorePatterns": ["package.json", "package-lock.json", "next-env.d.ts", ".next/", "node_modules/"]
}
```

```json title=".prettierrc.json(削除)"
{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "all",
  "semi": false,
  "objectWrap": "preserve",
  "experimentalOperatorPosition": "start"
}
```

```json title=".prettierignore(削除)"
package.json
package-lock.json
next-env.d.ts
.next/
node_modules/
```

その他もいい感じに設定されていそうでした🙌

## 移行後 - 実際にどれくらい速くなったのか

本ブログ([TOKOS Tech Blog](https://blog.to-ko-s.com/))のリポジトリで実測してみました🔥
対象ファイルは`.ts/.tsx/.js/.jsx/.json`の合計103ファイルです。

```bash title="ターミナル"
# Prettierの計測
time npx prettier --check './**/*.{js,jsx,ts,tsx,json}'

# Oxfmtの計測
time npx oxfmt --check './**/*.{js,jsx,ts,tsx,json}'
```

各3回計測した結果の中央値が下記です。

| ツール   | 全体所要時間（npx起動含む） |
| -------- | --------------------------- |
| Prettier | 約1.01秒                    |
| Oxfmt    | 約1.19秒                    |

正直、本リポジトリは規模が小さく、`npx`の起動コストの方が大きいため体感速度にはあまり差が出ませんでした🥲
(何ならOxfmtの方が若干遅い結果になっています...)

なので、他プロジェクト(中規模程度)の計測結果を見てみました。計測結果は下記です。

| ツール   | 全体所要時間（3回平均） |
| -------- | ----------------------- |
| Prettier | 約3.03秒                |
| Oxfmt    | 約0.88秒                |

実測結果から、OxfmtはPrettier比で約3.5倍高速であることが分かります🔥

このことから、走査するコード量が多い場合は、Oxfmtの方が圧倒的に高速であることが分かります😎

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  実行時間が短すぎて、最初は「あれ？実行されてる？」と思ったほどでした😎
</SpeechBubble>

## VSCode(Cursor)での設定方法

エディタ統合も簡単です。
公式のVSCode拡張機能`Oxc`をインストールして、`settings.json`を少し書き換えるだけで動きます🙌

### 1. 拡張機能のインストール

VSCodeで下記の拡張機能ページを開いてインストールしてください。

<ExternalLink
  url="https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode"
  title="Oxc - Visual Studio Marketplace"
  description="Extension for Visual Studio Code - Oxlint and Oxfmt editor integration"
/>

Cursorの場合は下記です。

<ExternalLink
  url="https://open-vsx.org/extension/oxc/oxc-vscode"
  title="Oxc – Open VSX Registry"
  description="Oxlint and Oxfmt editor integration"
/>

チーム開発の場合は、リポジトリ直下の`.vscode/extensions.json`に下記を記載しておくと、メンバーがVSCodeでリポジトリを開いた際に拡張機能のインストールを自動で推奨できます🙌

```jsonc title=".vscode/extensions.json"
{
  "recommendations": ["oxc.oxc-vscode"],
}
```

### 2. settings.jsonの設定

下記をユーザーまたはワークスペースの`settings.json`に追記します。

```jsonc title="settings.json"
{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true,
}
```

または、言語ごとでの設定も可能です。

```jsonc title="settings.json"
{
  // 各言語のデフォルトフォーマッターをoxcに切り替え
  "[javascript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
  },
  "[typescript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
  },
}
```

これで保存時に自動でOxfmtによるフォーマットが走るようになります✨

<ExternalLink url="https://oxc.rs/docs/guide/usage/formatter/editors" />

## 補足

### バージョンが0系であることについて

Oxfmtは記事執筆時点(2026-05-17)ではまだバージョン0系(`0.50.x`)です。
通常、メジャーバージョン0のツールには慎重になるべきでしょう。

ただ、Oxfmtの場合は**フォーマッター**という性質上、生成物が壊れるタイプのリスクは小さいです💪
出力に不満があればPrettierに戻せば良いだけなので、気軽に試して問題ない範囲だと考えています。

### 業務プロジェクトでの導入実績

自分は実プロジェクトですでにOxfmtを導入しています。
Prettierと比較してデグレや不具合は今のところ発生していません💪

JS/TS適合テスト100%通過の実績どおり、移行直後のdiffもほぼ無く、心理的なハードルもかなり低かったです✨

### Biomeとの比較

JavaScript/TypeScriptの新世代ツールとして、Rust製のBiomeという有力な選択肢もあります。
フォーマッターとしてのOxfmtは、Biomeと比べて下記の点で優位です🔥

- 速度: OxfmtはBiome比で約2〜3倍高速
- Prettier適合性: Oxfmtの方がPrettierとのフォーマット差分が小さい

VueやViteの作者であるEvan Youさんも、X(Twitter)で下記のように評しています。

```text title="Evan Youさんの投稿(抜粋)"
- Biomeより2〜3倍高速
- Prettierより45倍高速
- BiomeよりもPrettierの仕様に準拠しているため、移行しても差分が大きく発生しない
- Prettierよりも柔軟な改行設定が可能
```

<ExternalLink url="https://x.com/youyuxi/status/1979839137323864073" />

個人的には、フォーマッター単体ではOxfmtが現時点のベストだと感じています😎

## おわりに

今回は、Rust製の爆速フォーマッターOxfmtへの移行方法を、本リポでの実測値も交えて紹介しました🎉

- 速度はPrettier比で大幅に向上
- Prettier適合性100%で移行diffがほぼ出ない
- Claude Skillで一発移行可能
- VSCode・Cursor拡張も用意済み

ここまで揃っていれば、もう移行しない理由が見当たらないですよね😎
ぜひ皆さんもPrettierからOxfmtへの乗り換えを試してみてください🙌

<ExternalLink url="https://oxc.rs/" />


---

## 【Rails × Next.js】S3 Presigned URLの仕組みと実装方法

- URL: https://blog.to-ko-s.com/articles/presigned-url
- 著者: 塩見直樹
- 公開日: 2026-03-22
- タグ: Rails, Next.js

> Presigned URLの解説と、Rails × Next.js環境でクライアントからS3へ直接ファイルをアップロードする方法を紹介。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
本記事では、Presigned URLとは何かを分かりやすく解説し、Rails × Next.js環境でクライアントからS3へ直接ファイルをアップロードする方法を紹介します。

### 対象読者

- Rails × Next.jsを使っている方
- S3のPresigned URLの仕組みを理解したい方
- S3へのファイルアップロード機能を実装したい方

### この記事で扱う内容

- Presigned URLの仕組みの解説
- AWSの事前準備（IAMユーザー・S3バケットの作成）
- Rails APIでPresigned URLを発行する実装
- Next.jsからS3へ直接ファイルをアップロードする実装

## S3のPresigned URLとは？

S3に保存されたファイル（オブジェクト）は、基本的に**非公開**です。
アクセス権限を持つ所有者のみが閲覧(・更新)できます。
Presigned URLは、アクセス権限を持たないユーザーに対して**一定期間だけファイルのダウンロードやアップロードを許可するURL**を発行する仕組みです。
このURLを知っているユーザーはAWSアカウントやIAM権限が無くても、設定された有効期限内であればS3のファイルに対して閲覧やアップロードができるようになります。

<ExternalLink url="https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/ShareObjectPreSignedURL.html" />

<Callout variant="memo">
  Presigned URLは有効期限内であれば**何度でも使用可能**です。使い捨てではない点に注意しましょう。
</Callout>

### なぜPresigned URLを使うのか？

#### Presigned URLを使わない場合

Presigned URLを使わずにS3へファイルをアップロードする場合、**クライアント → サーバー → S3**という経路になります。

![Presigned URLを使わない場合のシーケンス図](/articles/presigned-url-sequence-diagram-1.webp)

このとき、クライアントからサーバーへ画像などのファイルを送る方法としては、一般的に以下の2つがあります。

- **バイナリ送信（`multipart/form-data`）**
- **Base64エンコード**

しかし、これらの方法にはそれぞれ以下のようなデメリットがあります。

**バイナリ送信（`multipart/form-data`）**

- JSONデータとファイルを同時に送る場合、`multipart/form-data`の構築が複雑になりがち

**Base64エンコード**

- バイナリデータをBase64に変換する際、CPUへ負荷がかかる
- Base64に変換することでデータサイズが**約33%増加**する

また、いずれの方法でもサーバーがファイルデータを中継するため、ファイルサイズが大きいほどサーバーへの負荷も増大します。

バイナリ送信・Base64エンコードについて調べた際に以下の記事が参考になったので、気になった方はご覧ください。

<ExternalLink url="https://qiita.com/shiozaki/items/9d7aeac0dd6733a6e2fb" />

#### Presigned URLを使う場合

一方、Presigned URLを使うと**クライアントからS3へ直接ファイルをアップロード**でき、サーバーはPresigned URLの発行のみを行ないます。

![Presigned URLを使う場合のシーケンス図](/articles/presigned-url-sequence-diagram-2.webp)

これによりサーバーを経由する必要がなくなり、上記のようなデメリットが解消されます。

シーケンス図を見比べると、Presigned URLを使うほうがリクエストの流れが複雑に見えるかもしれません。
しかし、サーバーの負荷においてもっともネックになるのはファイルデータの受け取り・送信処理です。
Presigned URLを使えばその処理がサーバーから不要になるため、サーバーの負荷を軽減できます。

#### Presigned URLを使うメリット

- **シンプルなファイル送信**：画像などのバイナリデータをそのまま送信できるため、`multipart/form-data`の構築やBase64エンコードが不要になる
- **サーバー負荷の軽減**：ファイル送信処理にてサーバーを経由する必要がなくなるため、サーバーの負荷を軽減できる
- **セキュリティの確保**：許可されたユーザーにのみアクセス権限をあたえ、一定時間後にURLが期限切れになる
- **スケーラビリティ**： サーバーがファイルデータを処理しないため、同時アップロード数が増えてもサーバーへの負荷を最小限に抑えることができる

### Presigned URLの生成に必要な情報

Presigned URLを生成するには、以下の4つの情報が必要です。

| 項目             | 説明                                                   |
| ---------------- | ------------------------------------------------------ |
| バケット名       | どのS3バケットに対してアクセスを許可するか             |
| オブジェクトキー | 対象のファイルパス（例：`products/images/sample.jpg`） |
| HTTPメソッド     | 操作の種類を指定する（下記参照）                       |
| 有効期限         | URLがいつまで有効かを指定する                          |

HTTPメソッドによって、Presigned URLで行える操作が異なります。

| HTTPメソッド | 操作             | 用途                     |
| ------------ | ---------------- | ------------------------ |
| GET          | ダウンロード     | S3上のファイルを取得する |
| PUT          | アップロード     | S3にファイルを保存する   |
| HEAD         | メタデータの確認 | ファイル情報を確認する   |

<Callout variant="memo">
  単一リクエストの`PUT`によるアップロードは、S3の仕様上**最大5GB**までです。
  それを超えるファイルは**マルチパートアップロード**（分割アップロード）が必要になります。
  今回はマルチパートアップロードの解説は省略します。
</Callout>

オブジェクトキーの指定方法はHTTPメソッドによって少し異なります。

- **GET/HEAD**：S3上に存在する既存ファイルのパスを指定
- **PUT**：S3のどこにどんな名前で保存するかを指定（ファイルが存在しなくてもOK）

<Callout variant="warning">
  アップロード時、同じファイル名（オブジェクトキー）がすでにS3に存在する場合は**上書き**されます。
  意図しない上書きを防ぐために、ファイル名にはUUIDやタイムスタンプを付けるのが一般的です。
</Callout>

### Presigned URLを作成できるユーザー

Presigned URLは誰でも作れるわけではありません。**有効なセキュリティ認証情報を持つユーザー**である必要があります。

認証情報の種類によって、生成できるPresigned URLの有効期限の上限が異なります。

| 認証情報の種類                     | 有効期限の上限                    |
| ---------------------------------- | --------------------------------- |
| IAMユーザー                        | 最大7日間                         |
| IAMロールの認証情報                | ロールセッションの有効期限まで    |
| EC2インスタンスのIAMロール認証情報 | ロール認証情報の期間（通常6時間） |
| AWS Security Token Service認証情報 | 一時的な認証情報の期間中のみ      |

<Callout variant="warning">
  Presigned URLの有効期限は、使用した認証情報の有効期限を超えることはできません。
  例えば、IAMユーザーの認証情報を使用した場合、Presigned URLの有効期限を8日間に設定してもIAMユーザーの認証情報の有効期限が7日後に切れてしまうため、実質的にPresigned URLの有効期限は7日間になります。
</Callout>

### 有効期限の上限（ツール別）

Presigned URLの有効期限は、使用するツールによっても上限が異なります。

| ツール        | 説明                      | 有効期限の上限 |
| ------------- | ------------------------- | -------------- |
| AWSコンソール | ブラウザの管理画面（GUI） | 1分〜12時間    |
| AWS CLI       | ターミナルでコマンド入力  | 最大7日間      |
| AWS SDK       | コードに組み込んで使用    | 最大7日間      |

今回の実装ではRailsから**AWS SDK**（aws-sdk-s3 gem）を使用してPresigned URLを生成するため、最大7日間の有効期限を設定できます。

### オススメの有効期限

AWSの推奨する有効期限はありませんが、用途に応じて以下のようなポイントを踏まえて決めるのがいいと思われます。

**GET**：メール等で相手に渡すことが多く、開くタイミングをこちらでは決めにくいのでやや長めに取りがちです。Presigned URLが漏洩した場合にファイルの読み取りができてしまいます。そのファイルの機密性によって有効期限を決めるのがいいと思われます。機密性が低いファイルであれば長めに設定しても問題ありません。

**PUT**：Presigned URLを発行してすぐ使用する場面が一般的なので短めにしがちです。Presigned URLが漏洩した場合に第三者が意図しないファイルをS3バケットに書き込めてしまうため、セキュリティ観点からも短めにしたほうがいいです。

目安は`GET`なら15分〜1時間、`PUT`なら5〜15分程度です。

## AWSの事前準備

<Callout variant="memo">
  この章では分かりやすさを重視するために**IAMユーザーを作成する方法**で進めます。
  本来であれば**ロールに対してポリシーをアタッチする方法**が一般的です。
</Callout>

### 1. S3バケットの作成

S3コンソールから「バケットを作成」ボタンをクリックします。
今回はバケット名を「`test-bucket-20260322`」とし、デフォルトの設定で作成しました。

<Callout variant="warning">
  バケット名は自分のAWSアカウント内だけでなく、AWS全体で一意な名前である必要があります。
</Callout>

![S3バケットの作成画面](/articles/presigned-url-bucket-create.jpg)

### 2. CORSの設定

S3コンソールから対象のS3バケットを選択し、「アクセス許可」タブをクリックします。
下部に「Cross-Origin Resource Sharing (CORS)」項目があるので、「編集」ボタンをクリックし、下記のJSON形式で設定を追加します。

```json title="Cross-Origin Resource Sharing (CORS)" showLineNumbers
[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT"],
    "AllowedOrigins": ["http://localhost:3000"]
  }
]
```

![CORSの編集画面](/articles/presigned-url-cors-edit.jpg)

- `AllowedHeaders`：リクエストに含めることを許可するHTTPヘッダー（例：`Content-Type`, `Authorization`など）
- `AllowedMethods`：許可するHTTPメソッド（例：`GET`, `PUT`など）
- `AllowedOrigins`：リクエスト元として許可するオリジン
- `ExposeHeaders`：参照を許可するレスポンスヘッダー（例：`ETag`, `x-amz-meta-custom-header`など）

### 3. IAMポリシーの作成

IAMコンソールから「ポリシー」を選択し、「ポリシーを作成」ボタンをクリックします。
JSONタブを選択し、下記のJSON形式でポリシーを作成します。

```json title="ポリシーエディタ" showLineNumbers
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["s3:PutObject", "s3:GetObject"],
      "Resource": "arn:aws:s3:::test-bucket-20260322/*"
    }
  ]
}
```

![IAMポリシーの作成画面](/articles/presigned-url-policy-create.jpg)

- `Version`：ポリシーのバージョン、最新が`2012-10-17`で推奨されているバージョン
- `Statement`：ポリシーのステートメント、複数のステートメントを記述できる
- `Effect`：ポリシーの効果（`Allow`または`Deny`）、`Allow`は許可、`Deny`は拒否
- `Action`：許可するアクション（例：`s3:PutObject`, `s3:GetObject`など）
- `Resource`：許可するリソース（例：`arn:aws:s3:::test-bucket-20260322/\*`など）

このポリシーは、`test-bucket-20260322`バケットに対して、PUTメソッドとGETメソッドを許可するポリシーになります。

### 4. IAMユーザーの作成

IAMコンソールのサイドバーから「ユーザー」を選択し、「ユーザーを追加」ボタンをクリックします。
今回は名前を「test-user」とし、デフォルトの設定で作成しました。

![IAMユーザーの作成画面](/articles/presigned-url-iam-create.jpg)

### 5. IAMユーザーにポリシーの追加

IAMユーザーの作成が完了したら、3で作成したポリシーを追加します。
対象のIAMユーザーを選択し、「許可ポリシー」項目の「許可を追加」ボタンをクリックし、先ほど作成したポリシーを選択します。

![IAMユーザーのポリシーの追加画面](/articles/presigned-url-iam-policy-add.webp)

### 6. IAMユーザーのアクセスキー・シークレットキーの取得

最後にアクセスキー・シークレットキーを取得します。
対象のIAMユーザーを選択し、「セキュリティ認証情報」タブをクリックし、「アクセスキーを作成」ボタンをクリックします。
以下の項目では「AWSの外部で実行されるアプリケーション」を選択します。

![IAMユーザーのアクセスキー・シークレットキーの取得画面](/articles/presigned-url-iam-accesskey-create.jpg)

後はデフォルトの設定で作成します。
作成後は以下のようにアクセスキーとシークレットキーが表示されます。

![IAMユーザーのアクセスキー・シークレットキーの取得画面](/articles/presigned-url-iam-accesskey-secretkey.jpg)

<Callout variant="memo">
  シークレットキーは**作成時に一度だけ**表示されます。再表示はできないため必ずメモしておきましょう。
</Callout>

これでAWSの事前準備は完了です。

## RailsでPresigned URLを発行する

### 1. aws-sdk-s3 gemの追加

RailsにはAWSのサービスを操作する機能が標準では備わっていません。
そのため、AWSが提供しているRuby向けのSDKである**aws-sdk-s3** gemを追加する必要があります。
このgemを追加することで`Aws::S3::Client`や`Aws::S3::Presigner`などのクラスが使えるようになり、RailsからS3の操作やPresigned URLの生成が可能になります。

```ruby title="Gemfile"
gem 'aws-sdk-s3'
```

### 2. 環境変数の設定

AWSの事前準備で取得したアクセスキーとシークレットキー、リージョン、バケット名を環境変数に設定します。

```dotenv title=".env"
AWS_ACCESS_KEY=取得したアクセスキー
AWS_SECRET_ACCESS_KEY=取得したシークレットキー
AWS_REGION=ap-northeast-1 # 東京リージョン
AWS_S3_BUCKET=test-bucket-20260322
```

### 3. S3クライアントの初期化

`config/initializers/`配下にファイルを作成すると、Railsアプリケーションの起動時に自動で読み込まれます。
ここでAWSの認証情報を設定しておくことで、アプリケーション全体で`Aws::S3::Client`などのクラスを使用する際に、毎回認証情報を渡す必要がなくなります。

```ruby title="config/initializers/aws.rb" showLineNumbers
Aws.config.update(
  region: ENV.fetch("AWS_REGION"),
  credentials: Aws::Credentials.new(
    ENV.fetch("AWS_ACCESS_KEY"),
    ENV.fetch("AWS_SECRET_ACCESS_KEY")
  )
)
```

- `Aws.config.update`：AWS SDK全体の設定を更新するメソッド
- `region`：AWSリソースが存在するリージョンを指定（`ap-northeast-1`は東京リージョン）
- `credentials`：`Aws::Credentials`にアクセスキーとシークレットキーを渡してAWSへの認証情報を設定

### 4. Presigned URLを発行するAPIの作成

Presigned URLを生成するサービスクラスとコントローラーを作成します。

```ruby title="app/services/presigned_url_service.rb" showLineNumbers
class PresignedUrlService
  def initialize
    @client = Aws::S3::Client.new
    @signer = Aws::S3::Presigner.new(client: @client)
    @bucket = ENV.fetch("AWS_S3_BUCKET")
  end

  def generate_presigned_url(filename, content_type)
    object_key = "uploads/#{SecureRandom.uuid}/#{filename}"

    url = @signer.presigned_url(
      :put_object,
      bucket: @bucket,
      key: object_key,
      content_type:,
      expires_in: 600 # 有効期限：10分
    )

    { url:, object_key: }
  end
end
```

`SecureRandom.uuid`でファイル名にUUIDを付与することで、同じファイル名によるS3上のファイルの上書きを防いでいます。

```ruby title="app/controllers/api/presigned_urls_controller.rb" showLineNumbers
module Api
  class PresignedUrlsController < ApplicationController
    def create
      service = PresignedUrlService.new
      result = service.generate_presigned_url(
        params[:filename],
        params[:content_type]
      )

      render json: result
    end
  end
end
```

```ruby title="config/routes.rb"
namespace :api do
  resources :presigned_urls, only: [:create]
end
```

### 5. 動作確認

Railsサーバーをポート3001で起動し、curlでAPIを叩いてPresigned URLが返ってくることを確認します。

```bash title="ターミナル"
rails server -p 3001
```

```bash title="ターミナル"
curl -X POST http://localhost:3001/api/presigned_urls \
  -H "Content-Type: application/json" \
  -d '{"filename": "test.jpg", "content_type": "image/jpeg"}'
```

以下のようなレスポンスが返ってくれば成功です。

```json title="レスポンス"
{
  "url": "https://test-bucket-20260322.s3.ap-northeast-1.amazonaws.com/uploads/550e8400-e29b.../test.jpg?X-Amz-Algorithm=...",
  "object_key": "uploads/550e8400-e29b.../test.jpg"
}
```

返却されたurlは、S3オブジェクトのURL末尾に`?X-Amz-Algorithm=...`のような署名用のクエリパラメータが付与されたものです。
署名を除いた、オブジェクト自体のURLの形は次のようになります。

`https://{バケット名}.s3.{リージョン}.amazonaws.com/{オブジェクトキー}`

本記事の例では、次のようになります。

`https://test-bucket-20260322.s3.ap-northeast-1.amazonaws.com/uploads/.../test.jpg`

S3バケットはデフォルトで非公開のため、署名のないこのURLをブラウザで開いてもファイルは取得できません。

## Next.jsからS3へ直接ファイルをアップロードする

### 1. 環境変数の設定

Rails APIのURLを環境変数に設定します。

```dotenv title=".env.local"
API_BASE_URL=http://localhost:3001
```

### 2. アップロード処理の作成

Rails APIからPresigned URLを取得し、そのURLを使ってS3に直接ファイルをアップロードする関数を作成します。

```typescript title="lib/uploadToS3.ts" showLineNumbers
const API_BASE_URL = process.env.API_BASE_URL

export const uploadToS3 = async (file: File) => {
  try {
    // 1. Rails APIからPresigned URLを取得
    const presignedResponse = await fetch(`${API_BASE_URL}/api/presigned_urls`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        filename: file.name,
        content_type: file.type,
      }),
    })

    if (!presignedResponse.ok) {
      throw new Error("Presigned URLの取得に失敗しました")
    }

    const { url, object_key } = await presignedResponse.json()

    // 2. Presigned URLを使ってS3に直接アップロード
    const uploadResponse = await fetch(url, {
      method: "PUT",
      headers: {
        "Content-Type": file.type,
      },
      body: file,
    })

    if (!uploadResponse.ok) {
      throw new Error("S3へのアップロードに失敗しました")
    }

    return object_key
  } catch (error) {
    console.error(error)
    throw new Error("予期しないエラーが発生しました")
  }
}
```

<Callout variant="warning">
  Presigned URL生成時に指定した`content_type`と、アップロード時のリクエストヘッダー`Content-Type`は**完全に一致**している必要があります。
  不一致の場合は署名エラーとなるため注意してください。
</Callout>

ポイントは2つのリクエストに分かれている点です。

1. **Rails APIへのリクエスト**：Presigned URLを取得する
2. **S3へのリクエスト**：取得したPresigned URLに対してファイルを直接アップロードする

### 3. アップロードフォームの作成

ファイル選択とアップロードを行うコンポーネントを作成します。

```tsx title="app/components/FileUploadForm.tsx" showLineNumbers
"use client"

import { useState } from "react"
import { uploadToS3 } from "@/lib/uploadToS3"

export function FileUploadForm() {
  const [file, setFile] = useState<File | null>(null)
  const [uploading, setUploading] = useState(false)
  const [message, setMessage] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!file) return

    setUploading(true)
    setMessage("")

    try {
      const objectKey = await uploadToS3(file)
      setMessage(`アップロード成功！（${objectKey}）`)
    } catch (error) {
      setMessage(error instanceof Error ? error.message : "エラーが発生しました")
    } finally {
      setUploading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="file"
        accept="image/jpeg, image/png, image/webp"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)}
      />
      <button type="submit" disabled={!file || uploading}>
        {uploading ? "アップロード中..." : "アップロード"}
      </button>
      {message && <p>{message}</p>}
    </form>
  )
}
```

### 4. 動作確認

Railsサーバー（ポート3001）とNext.jsの開発サーバー（ポート3000）をそれぞれ起動し、ファイルを選択してアップロードボタンをクリックします。

```bash title="ターミナル"
# Rails（ポート3001）
rails server -p 3001

# Next.js（ポート3000）
npm run dev
```

「アップロード成功！」と表示されれば、クライアントからS3へ直接ファイルがアップロードされています。
S3コンソールから対象のバケットを確認し、`uploads/`ディレクトリ内にファイルが保存されていることを確認してみましょう。

## まとめ

本記事では、Presigned URLの仕組みからRails × Next.jsでの実装方法まで解説しました。
Presigned URLを活用することで、サーバーを経由せずにクライアントからS3へ直接ファイルをアップロードでき、サーバーの負荷軽減が期待できます。
今回はアップロードを実装しましたが、同様の仕組みでダウンロード用のPresigned URLも発行できます。ぜひ活用してみてください。


---

## 【JavaScript】Temporalによる日時操作を学ぶ

- URL: https://blog.to-ko-s.com/articles/temporal
- 著者: 杉田侑祐
- 公開日: 2026-03-16
- タグ: JavaScript

> Temporal APIの解説をします。Dateオブジェクトの問題点とTemporal APIによって解決された点を解説します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はJavaScriptで標準化された(2026年3月現在)`Temporal` APIについて解説します。
`Temporal` APIは`Date`オブジェクトの問題点を解決するためのAPIです。

### 対象読者

- フロントエンドエンジニアの方

### この記事で扱う内容、扱わない内容

この記事で扱う内容は下記です。

- `Date`オブジェクトの問題点
- `Temporal` APIについて

この記事で扱わない内容は下記です。

- JavaScriptの基本的な使い方

## JavaScriptの標準化について

今回の`Temporal` APIを学ぶ前にJavaScriptの標準化されるまでの流れを簡単に紹介します。
JavaScriptは現在ECMAScriptという規格で標準化されています。
標準化を行う際にTC39という委員会が標準化を行っています。

<ExternalLink url="https://tc39.es/" />

標準化をする際はProposalという形で提案されます。

ProposalはTC39のメンバーが提案し、Stage 0からStage 4まで（Stage 2.7を含む6段階）で進んでいきます。

- Stage 0 : Strawperson（アイデア段階）
  - 目的 : 問題領域の探索とアイデア出し
  - 意味 : 新しいアイデアの初期探索段階
- Stage 1 : Proposal（提案）
  - 目的 : 特定のアプローチで解決策を設計する
  - 意味 : 委員会がその問題領域を検討することにコミット
- Stage 2 : Draft（草案）
  - 目的 : 詳細の詰め、スペックレビュー、実験的実装
  - 意味 : 委員会が優先する解決方向を選択（大きな設計変更はまだあり得る）
- Stage 2.7 : Candidate（候補 - テスト段階）
  - 目的 : テストコードの作成とスペック準拠のプロトタイプによる検証
  - 意味 : 解決策は完成しており、変更はテストや実装からのフィードバックに限定
- Stage 3 : Candidate（候補 - 実装段階）
  - 目的 : 実装経験の蓄積と互換性の問題発見
  - 意味 : 実装が推奨される。基本的に変更は想定されない
- Stage 4 : Finished（完了）
  - 目的 : 年次出版の標準への統合
  - 意味 : ECMAScript標準に組み込まれる

月に一度会議が開かれ、Proposalが議論されています。

<ExternalLink url="https://github.com/tc39/agendas" />

また、今現在も魅力的な様々なProposalが存在しています。

<ExternalLink url="https://github.com/tc39/proposals" />

ちなみに`Temporal`は2017年に提案されました。

## なぜ今Temporalを学ぶのか

では、なぜ今`Temporal`を紹介するのか、その理由は下記になります。

- 最近Stage 4になったため
- 主要ブラウザで対応されたため

2026年3月11日に開催された、第113回のTC39の総会でStage 4になりました。
また、Chrome 144以降で利用可能になります。
対応ブラウザ及び、バージョンは下記です。

- Google Chrome 144
- Firefox 139
- Edge 144

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Temporal#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7" />

まだ、Safari等使用できないブラウザもありますが、今後対応されることが期待されています。
というわけで、今後は`Date`オブジェクトから`Temporal`が主流になっていく事が考えられます。

## Dateオブジェクトの問題点とTemporalの改善

現在主流である`Date`オブジェクトの日時操作の問題点と`Temporal`によって改善された点を簡単に紹介します。
`Date`オブジェクトに関しては下記の記事で詳しく紹介しています。

<InternalLink slug="javascript-date" />

### ミュータブル(可変)である

`Date`オブジェクトはミュータブル(可変)であるため、不整合が発生しやすいです。
`setMonth`メソッドなどを呼ぶと、元の`Date`オブジェクトが変更されてしまいます。

```javascript title="Dateオブジェクトのミュータブル問題" showLineNumbers
const meeting = new Date(2026, 2, 16)
const reminder = meeting // 参照コピー！

reminder.setDate(meeting.getDate() - 1)

console.log(meeting.toDateString())
// → "Sun Mar 15 2026"
// meeting も変わってしまう！
```

`Temporal`はイミュータブル(不変)であるため、元のオブジェクトが変更されずに新しいオブジェクトが作成されます。

```javascript title="Temporalのイミュータブル" showLineNumbers
const meeting = Temporal.PlainDate.from("2026-03-16")
const reminder = meeting.subtract({ days: 1 })

console.log(meeting.toString())
// → "2026-03-16" ✅ 元のまま

console.log(reminder.toString())
// → "2026-03-15" ✅ 新しいオブジェクト
```

### タイムゾーンのサポートが不十分

`Date`はUTCとローカル時間しか扱えず、任意のタイムゾーンを明示的に指定して操作する仕組みがありません。
異なるタイムゾーン間の変換が非常に面倒です。

```javascript title="Dateオブジェクトのタイムゾーン問題" showLineNumbers
// UTC と ローカルしかない
const date = new Date()

console.log(date.toISOString())
// → UTC のみ

console.log(
  date.toLocaleString("ja-JP", {
    timeZone: "America/New_York",
  }),
)
// → 文字列としては表示できるが
//   Date オブジェクトとして
//   NYの時刻を持つことはできない 😱
```

`Temporal`ではタイムゾーンを持つ日時を表す`ZonedDateTime`を使用することで任意のタイムゾーンを扱うことができます。

```javascript title="Temporalのタイムゾーンサポート" showLineNumbers
// 任意のタイムゾーンをネイティブにサポート
const tokyo = Temporal.Now.zonedDateTimeISO("Asia/Tokyo")
const ny = tokyo.withTimeZone("America/New_York")

console.log(tokyo.toString())
// → "2026-03-16T15:30:00+09:00[Asia/Tokyo]"

console.log(ny.toString())
// → "2026-03-16T01:30:00-05:00[America/New_York]"
// ✅ 型としてタイムゾーン情報を保持
```

### 月が0から始まる

`new Date(2026, 0, 1)`が1月1日を意味するという直感に反する仕様で、off-by-oneエラーが頻発します。

```javascript title="Dateオブジェクトの月が0始まり問題" showLineNumbers
// 3月を指定したつもりが...
const date = new Date(2026, 3, 1)

console.log(date.toDateString())
// → "Wed Apr 01 2026" 😱
// 3 は4月！3月は 2 と書く必要がある

const march = new Date(2026, 2, 1)
console.log(march.getMonth())
// → 2  🤔 3月なのに2
```

`Temporal`では直感的に記述できます。

```javascript title="Temporalの月指定" showLineNumbers
// 素直に3月と書ける
const date = Temporal.PlainDate.from({
  year: 2026,
  month: 3,
  day: 1,
})

console.log(date.toString())
// → "2026-03-01" ✅

console.log(date.month)
// → 3 ✅ 3月は3
```

### 月のオーバーフロー

存在しない月日を指定すると、繰り越されてしまいます。
エラーや警告が出ないため、バグに気づきにくいです。

```javascript title="Dateオブジェクトの月オーバーフロー" showLineNumbers
const jan31 = new Date(2026, 0, 31)

// 2月にしたい
jan31.setMonth(1)

console.log(jan31.toDateString())
// → "Tue Mar 03 2026" 😱
// 2/31は存在しない → 3/3に繰り越し
// エラーも警告もなし！
```

`Temporal`ではこのような問題が発生しません。

```javascript title="Temporalのオーバーフロー制御" showLineNumbers
const jan31 = Temporal.PlainDate.from("2026-01-31")

// overflow: "constrain" で安全に丸める
const feb = jan31.with({ month: 2 }, { overflow: "constrain" })
console.log(feb.toString())
// → "2026-02-28" ✅

// overflow: "reject" でエラーにもできる
Temporal.PlainDate.from({ year: 2026, month: 2, day: 31 }, { overflow: "reject" })
// → RangeError ✅ 明示的にエラー
```

### 日付/時刻のみの参照ができない

`Date`は常に日時の両方を持つため、「誕生日」のように日付だけが必要なケースや、「営業時間」のように時刻だけが必要なケースに適しません。

```javascript title="Dateオブジェクトは常に日時両方を持つ" showLineNumbers
// 誕生日を表現したいだけなのに...
const birthday = new Date(1990, 4, 15)

console.log(birthday.toISOString())
// → "1990-05-14T15:00:00.000Z"
// 不要な時刻情報がついてくる
// しかもタイムゾーンで日付がズレる！

// 営業時間 "9:00-17:00" も表現できない
// 必ず日付が必要
```

`Temporal`では任意の年月日や時刻等が取得できます。

```javascript title="Temporalの日付・時刻の個別取得" showLineNumbers
// 日付だけ
const birthday = Temporal.PlainDate.from("1990-05-15")
console.log(birthday.toString())
// → "1990-05-15" ✅ 日付のみ

// 時刻だけ
const openTime = Temporal.PlainTime.from("09:00")
const closeTime = Temporal.PlainTime.from("17:00")
console.log(openTime.toString())
// → "09:00:00" ✅ 時刻のみ

// 年月だけ
const billing = Temporal.PlainYearMonth.from("2026-03")
// → "2026-03" ✅
```

### 文字列パースが不安定

`Date.parse()`や`new Date("...")`の挙動がブラウザによって異なり、同じ文字列が異なる結果になることがあります。

```javascript title="Dateオブジェクトの文字列パース問題" showLineNumbers
// ブラウザによって結果が違う！
const d1 = new Date("2026-03-16")
// → UTC? ローカル? ブラウザ次第

const d2 = new Date("03/16/2026")
// → パース可能だが非標準

const d3 = new Date("March 16, 2026")
// → 動くかもしれないし動かないかも

const d4 = new Date("abc")
// → Invalid Date（例外ではない！）
console.log(d4.getTime()) // → NaN
```

`Temporal`では`ISO 8601`/`RFC 9557`に準拠しています。

```javascript title="Temporalの厳密なパース" showLineNumbers
// 厳密なISO 8601 / RFC 9557 準拠
const d1 = Temporal.PlainDate.from("2026-03-16")
// → 常に同じ結果 ✅

// 不正な文字列は即座にエラー
try {
  Temporal.PlainDate.from("abc")
} catch (e) {
  console.log(e) // → RangeError ✅
}

// オブジェクト形式も使える
const d2 = Temporal.PlainDate.from({
  year: 2026,
  month: 3,
  day: 16,
})
// → 明確で安全 ✅
```

上記で挙げたもの以外にも`Date`オブジェクトの問題点はあり、多くのプロダクトでは日時操作系のライブラリを使用していると思います。

<Callout variant="memo">
  `Date`オブジェクトは下記のような時代・歴史的な背景があるようです。

> (和訳)1995年、ブレンダン・アイヒはMocha（後にJavaScriptとなる）を10日間で開発する任務を負った。厳しい時間的プレッシャーの中、多くの設計判断は実用的だった。その1つがJavaのDate実装を直接移植することだった。

<ExternalLink url="https://bloomberg.github.io/js-blog/post/temporal/#a-product-of-its-time" />

</Callout>

## Temporalの全体像

`Temporal`は大別すると2つに分けることができます。

- タイムゾーンなし
  - `PlainDateTime`
- タイムゾーンあり
  - `ZonedDateTime`

下記が図解になります。

![Temporalの全体像](/articles/temporal-1.svg)

## PlainDateTimeについて

### PlainDateTimeの概要

`PlainDateTime`はタイムゾーンを持たない日時を表します。
`PlainDateTime`が適しているのは、タイムゾーンが暗黙的に決まっている、あるいは無関係な場面です。
たとえば「3月16日14:30に会議室Aで打ち合わせ」という予定は、参加者全員が同じオフィスにいるなら、タイムゾーンを意識する必要はありません。
壁掛け時計が14:30を指していれば、それが正しい時刻です。

こうした「ローカルな日時」を扱うのが`PlainDateTime`の役割です。

```javascript title="PlainDateTimeの作成" showLineNumbers
// ISO 8601 文字列から
const dt = Temporal.PlainDateTime.from("2026-03-16T14:30:00")
console.log(dt.toString())
// → "2026-03-16T14:30:00"

// オブジェクトから
const dt2 = Temporal.PlainDateTime.from({
  year: 2026,
  month: 3,
  day: 16,
  hour: 14,
  minute: 30,
  second: 0,
})
console.log(dt2.toString())
// → "2026-03-16T14:30:00"

// PlainDate + PlainTime を合成
const date = Temporal.PlainDate.from("2026-03-16")
const time = Temporal.PlainTime.from("14:30")
const dt3 = date.toPlainDateTime(time)
// → "2026-03-16T14:30:00"
```

### PlainDateTimeの読み取り専用メソッド

`PlainDateTime`は日付側と時刻側の両方のメソッドを持ちます。
すべて読み取り専用メソッドです。

```javascript title="PlainDateTimeの読み取り専用メソッド" showLineNumbers
const dt = Temporal.PlainDateTime.from("2026-03-16T14:30:45.123")

// 日付フィールド
dt.year // → 2026
dt.month // → 3（1始まり！）
dt.day // → 16
dt.dayOfWeek // → 1（月曜日。ISO 8601準拠で1=月〜7=日）
dt.dayOfYear // → 75
dt.weekOfYear // → 12
dt.daysInMonth // → 31
dt.daysInYear // → 365
dt.inLeapYear // → false

// 時刻フィールド
dt.hour // → 14
dt.minute // → 30
dt.second // → 45
dt.millisecond // → 123
dt.microsecond // → 0
dt.nanosecond // → 0
```

### PlainDateTimeの変更操作 withメソッド

`with`メソッドを使用することで変更できます。
`Temporal`はイミュータブルであるため、新しいオブジェクトを返します。

```javascript title="PlainDateTimeのwithメソッド" showLineNumbers
const dt = Temporal.PlainDateTime.from("2026-03-16T14:30")

// 時刻だけ変更
dt.with({ hour: 9, minute: 0 })
// → "2026-03-16T09:00:00"

// 日付だけ変更
dt.with({ month: 12, day: 25 })
// → "2026-12-25T14:30:00"

// 元のオブジェクトは変わらない
dt.toString() // → "2026-03-16T14:30:00"
```

`with`メソッドはオーバーフロー制御もあります。

```javascript title="withメソッドのオーバーフロー制御" showLineNumbers
// 4月31日は存在しない
Temporal.PlainDateTime.from("2026-03-31T10:00").with(
  { month: 4 },
  { overflow: "constrain" }, // デフォルト
)
// → "2026-04-30T10:00:00"（最も近い有効な日に丸められる）

Temporal.PlainDateTime.from("2026-03-31T10:00").with({ month: 4 }, { overflow: "reject" })
// → RangeError（エラーを投げる）
```

### PlainDateTimeの加減算 add/subtractメソッド

`add`(加算)/`subtract`(減算)メソッドを使用することで加減算を行うことができます。

```javascript title="PlainDateTimeのadd/subtractメソッド" showLineNumbers
const dt = Temporal.PlainDateTime.from("2026-03-16T14:30")

dt.add({ hours: 3, minutes: 45 })
// → "2026-03-16T18:15:00"

dt.add({ days: 1, hours: 12 })
// → "2026-03-18T02:30:00"（日をまたぐ）

dt.subtract({ months: 2 })
// → "2026-01-16T14:30:00"
```

ここで重要なのは、`PlainDateTime`にはタイムゾーンがないため、DST（夏時間）の影響を受けないことです。
「14:30の2時間後は常に16:30」になります。
実際のタイムゾーンではDSTの切り替えで1時間消えたり増えたりしますが、`PlainDateTime`ならそうした複雑さを考慮しなくて良いです。

### PlainDateTimeの差分の計算 until/sinceメソッド

`until`(終了時刻)/`since`(開始時刻)メソッドを使用することで差分を計算できます。

```javascript title="PlainDateTimeのuntil/sinceメソッド" showLineNumbers
const start = Temporal.PlainDateTime.from("2026-03-16T09:00")
const end = Temporal.PlainDateTime.from("2026-03-16T17:30")

start.until(end)
// → PT8H30M（8時間30分）

start.until(end, { largestUnit: "minute" })
// → PT510M（510分）

// 日をまたぐ場合
const overnight = Temporal.PlainDateTime.from("2026-03-17T02:00")
start.until(overnight, { largestUnit: "hour" })
// → PT17H（17時間）
```

### PlainDateTimeの繰り上げ/切り捨ての計算 roundメソッド

`round`メソッドを使用することで繰り上げ/繰り下げを計算できます。

```javascript title="PlainDateTimeのroundメソッド" showLineNumbers
const dt = Temporal.PlainDateTime.from("2026-03-16T14:37:22")

dt.round("hour")
// → "2026-03-16T15:00:00"（繰り上げ）

dt.round({ smallestUnit: "minute", roundingIncrement: 15 })
// → "2026-03-16T14:30:00"（15分刻みで丸め）

dt.round({
  smallestUnit: "hour",
  roundingMode: "floor",
})
// → "2026-03-16T14:00:00"（切り捨て）
```

### PlainDateTimeの他の型への変換

`PlainDateTime`は他の`Temporal`型への変換に使用できます。

```javascript title="PlainDateTimeの型変換" showLineNumbers
const dt = Temporal.PlainDateTime.from("2026-03-16T14:30")

// 日付だけ取り出す
dt.toPlainDate() // → Temporal.PlainDate "2026-03-16"

// 時刻だけ取り出す
dt.toPlainTime() // → Temporal.PlainTime "14:30:00"

// タイムゾーンを付与して ZonedDateTime に変換
dt.toZonedDateTime("Asia/Tokyo")
// → "2026-03-16T14:30:00+09:00[Asia/Tokyo]"

dt.toZonedDateTime("America/New_York")
// → "2026-03-16T14:30:00-04:00[America/New_York]"
// ※同じ壁時計の時刻だが、指す「瞬間」は異なる
```

### PlainDateTimeの比較

比較系のメソッドを使用することで比較できます。

```javascript title="PlainDateTimeの比較" showLineNumbers
const a = Temporal.PlainDateTime.from("2026-03-16T14:30")
const b = Temporal.PlainDateTime.from("2026-03-16T18:00")

Temporal.PlainDateTime.compare(a, b) // → -1（a < b）
a.equals(b) // → false

// ソートにも使える
const events = [b, a]
events.sort(Temporal.PlainDateTime.compare)
// → [a, b]（時系列順）
```

### PlainDateTimeのまとめ

`PlainDateTime`はタイムゾーン情報を持たず「壁掛け時計が示す日時」を表現します。
「タイムゾーンを意識しなくて良い場面で使う軽量な型」であり、タイムゾーンが絡む瞬間に`toZonedDateTime`で明示的に文脈を与えるという設計になっています。
ですので、東京とニューヨークのメンバーが参加するオンライン会議のように、「全員が同じ瞬間に集まる」必要がある場合は`ZonedDateTime`を使います。

## ZonedDateTimeについて

### ZonedDateTimeの概要

`ZonedDateTime`はタイムゾーンを持つ日時を表します。
日付、時刻、タイムゾーン、カレンダーのすべてを持ち、地球上の特定の「瞬間」を一意に表現します。
「全員が同じ瞬間を指している」ことが重要な場面で使います。

```javascript title="ZonedDateTimeの作成" showLineNumbers
// 文字列から（RFC 9557形式）
const zdt = Temporal.ZonedDateTime.from("2026-03-16T14:30:00+09:00[Asia/Tokyo]")
console.log(zdt.toString())
// → "2026-03-16T14:30:00+09:00[Asia/Tokyo]"

// オブジェクトから
const zdt2 = Temporal.ZonedDateTime.from({
  year: 2026,
  month: 3,
  day: 16,
  hour: 14,
  minute: 30,
  timeZone: "Asia/Tokyo",
})
console.log(zdt2.toString())
// → "2026-03-16T14:30:00+09:00[Asia/Tokyo]"

// 現在時刻から（最もよく使うパターン）
const now = Temporal.Now.zonedDateTimeISO("Asia/Tokyo")
```

### ZonedDateTimeの読み取り専用メソッド

`PlainDateTime`のプロパティに加えて、タイムゾーン関連の情報を持ちます。

```javascript title="ZonedDateTimeの読み取り専用メソッド" showLineNumbers
const zdt = Temporal.ZonedDateTime.from("2026-03-16T14:30:00+09:00[Asia/Tokyo]")

// 日付・時刻（PlainDateTimeと同じ）
zdt.year // → 2026
zdt.month // → 3
zdt.day // → 16
zdt.hour // → 14
zdt.minute // → 30

// タイムゾーン固有
zdt.timeZoneId // → "Asia/Tokyo"
zdt.offset // → "+09:00"
zdt.offsetNanoseconds // → 32400000000000
zdt.epochNanoseconds // → BigInt（Unix epoch からのナノ秒）
zdt.epochMilliseconds // → number（Date互換）

// その日のDST対応した時間を取得
zdt.hoursInDay // → 24（DSTの日は23や25になる）
```

`hoursInDay`はDSTの切り替え日には23や25を返します。
「今日は何時間あるか」を正確に知ることができます。

### タイムゾーンの変換 withTimeZoneメソッド

タイムゾーンを変更するメソッドです。
同じ「瞬間」を別のタイムゾーンの壁時計で見たらどうなるか、を一行で表現できます。

```javascript title="withTimeZoneメソッド" showLineNumbers
const tokyo = Temporal.ZonedDateTime.from("2026-03-16T14:30:00+09:00[Asia/Tokyo]")

const ny = tokyo.withTimeZone("America/New_York")
// → "2026-03-16T01:30:00-04:00[America/New_York]"

const london = tokyo.withTimeZone("Europe/London")
// → "2026-03-16T05:30:00+00:00[Europe/London]"

// 同じ瞬間であることを確認
tokyo.epochNanoseconds === ny.epochNanoseconds // → true
tokyo.epochNanoseconds === london.epochNanoseconds // → true
```

![ZonedDateTimeの図](/articles/temporal-3.svg)

### ZonedDateTimeの変更操作 withメソッド

`with`メソッドを使用することで変更できます。

```javascript title="ZonedDateTimeのwithメソッド" showLineNumbers
const zdt = Temporal.ZonedDateTime.from("2026-03-16T14:30:00+09:00[Asia/Tokyo]")

// 時刻を変更（タイムゾーンは維持）
zdt.with({ hour: 9, minute: 0 })
// → "2026-03-16T09:00:00+09:00[Asia/Tokyo]"

// 日付を変更
zdt.with({ month: 12, day: 25 })
// → "2026-12-25T14:30:00+09:00[Asia/Tokyo]"
```

### ZonedDateTimeの加減算 add/subtractメソッド

`PlainDateTime`と異なり、`ZonedDateTime`の加減算はDSTの影響を正しく反映します。

```javascript title="ZonedDateTimeのadd/subtractメソッド" showLineNumbers
// アメリカ東部：2026年3月8日に夏時間開始（時計が1時間進む）
const beforeDST = Temporal.ZonedDateTime.from("2026-03-07T12:00:00-05:00[America/New_York]")

beforeDST.add({ days: 1 })
// → "2026-03-08T12:00:00-04:00[America/New_York]"
// 壁時計上は同じ12:00だが、オフセットが -05:00 → -04:00 に変化
// 実際に経過した時間は23時間

beforeDST.add({ hours: 24 })
// → "2026-03-08T13:00:00-04:00[America/New_York]"
// 24時間後は壁時計上では13:00（DSTで1時間進んだため）
```

### ZonedDateTimeの差分の計算 until/sinceメソッド

`until`(終了時刻)/`since`(開始時刻)メソッドを使用することで差分を計算できます。
タイムゾーンによる時差を計算できます。

```javascript title="ZonedDateTimeのuntil/sinceメソッド" showLineNumbers
const departure = Temporal.ZonedDateTime.from("2026-07-01T10:00:00+09:00[Asia/Tokyo]")
const arrival = Temporal.ZonedDateTime.from("2026-07-01T14:00:00-04:00[America/New_York]")

departure.until(arrival, { largestUnit: "hour" })
// → PT17H（実際のフライト時間は17時間）
// タイムゾーンの差を自動的に考慮
```

### その日の始まり startOfDayメソッド

DSTの切り替え日では00:00が存在しない場合もあります。
`startOfDay`メソッドを使用することで、その日の始まりを正しく取得できます。

```javascript title="startOfDayメソッド" showLineNumbers
const zdt = Temporal.ZonedDateTime.from("2026-03-16T14:30:00+09:00[Asia/Tokyo]")

zdt.startOfDay()
// → "2026-03-16T00:00:00+09:00[Asia/Tokyo]"
// DSTの切り替え日は 00:00 が存在しないことがある
// startOfDay はその場合でも正しい「その日の最初の瞬間」を返す
```

### ZonedDateTimeの他の型への変換

`ZonedDateTime`は他の型への変換に使用できます。

```javascript title="ZonedDateTimeの型変換" showLineNumbers
const zdt = Temporal.ZonedDateTime.from("2026-03-16T14:30:00+09:00[Asia/Tokyo]")

// タイムゾーンを剥がす
zdt.toPlainDateTime() // → "2026-03-16T14:30:00"
zdt.toPlainDate() // → "2026-03-16"
zdt.toPlainTime() // → "14:30:00"

// 絶対時刻に変換
zdt.toInstant()
// → Instant（タイムゾーンなし、エポックナノ秒のみ）

// Dateオブジェクトとの相互変換
const legacyDate = new Date(zdt.epochMilliseconds)
// Date → ZonedDateTime
const fromLegacy = Temporal.Instant.fromEpochMilliseconds(legacyDate.getTime()).toZonedDateTimeISO("Asia/Tokyo")
```

### ZonedDateTimeの比較

`PlainDateTime`とは違い、`ZonedDateTime`の場合はタイムゾーンを持つため結果が異なります。

```javascript title="ZonedDateTimeの比較" showLineNumbers
const a = Temporal.ZonedDateTime.from("2026-03-16T14:30:00+09:00[Asia/Tokyo]")
const b = Temporal.ZonedDateTime.from("2026-03-16T01:30:00-04:00[America/New_York]")

// compare は「瞬間」で比較する
Temporal.ZonedDateTime.compare(a, b) // → 0（同じ瞬間）

// equals は瞬間 + タイムゾーン + カレンダーすべてが一致する必要がある
a.equals(b) // → false（タイムゾーンが異なる）
```

### ZonedDateTimeのまとめ

`ZonedDateTime`は`Temporal`の型体系の中心に位置する型です。
迷ったらまず`ZonedDateTime`から始め、タイムゾーンが不要だと分かった時点で`toPlainDateTime()`などで軽量な型に変換する、というアプローチが安全になります。

## Instantについて

`Temporal.Instant`はタイムゾーンやカレンダーを持たない、純粋な「時間軸上の一点」です。
Unixエポック（1970-01-01T00:00:00Z）からのナノ秒で表現されます。

データベースの作成・更新時刻の記録などに向いています。

![Instantの図](/articles/temporal-2.svg)

また、`toString()`したときにUTC表記（末尾Z）で出力されるので「UTCが取れる」ように見えますが、実態はこういう構造です。

```text title="Instantの内部構造" showLineNumbers
Instant の中身:
  epochNanoseconds = 1773639000000000000n  ← これだけ

toString() すると:
  "2026-03-16T05:30:00Z"  ← UTC表記で「見せている」
```

## Temporal.Nowについて

`Temporal.Now`は現在時刻を取得するメソッドです。
`Date`オブジェクトの`new Date()`/`Date.now()`に該当します。

5つのメソッドが存在します。

```javascript title="Temporal.Nowのメソッド一覧" showLineNumbers
zonedDateTimeISO("Asia/Tokyo") // → 2026-03-16T04:16:43+09:00[Asia/Tokyo]
instant() // → 2026-03-15T19:16:43Z
plainDateTimeISO("Asia/Tokyo") // → 2026-03-16T04:16:43
plainDateISO("Asia/Tokyo") // → 2026-03-16
plainTimeISO("Asia/Tokyo") // → 04:16:43
```

`instant()`以外はすべてタイムゾーン引数を受け取ります。
省略するとシステムのタイムゾーンが使われます。

`Date`オブジェクトの対応は下記になります。

```javascript title="DateオブジェクトとTemporal.Nowの対応" showLineNumbers
new Date() → Temporal.Now.zonedDateTimeISO()
Date.now() → Temporal.Now.instant().epochMilliseconds
```

## Durationについて

### Durationの概要

`Temporal.Duration`は時間の長さ（期間）を表す型です。

```javascript title="Durationの作成" showLineNumbers
// ISO 8601 文字列から
const d1 = Temporal.Duration.from("P1Y2M3DT4H5M6S")
// → 1年2ヶ月3日4時間5分6秒

// オブジェクトから
const d2 = Temporal.Duration.from({
  years: 1,
  months: 2,
  days: 3,
  hours: 4,
  minutes: 5,
  seconds: 6,
})

// 個別のフィールドだけでもOK
const d3 = Temporal.Duration.from({ hours: 2, minutes: 30 })
// → "PT2H30M0S"
```

`ISO 8601`の`P...T...`形式は、Pが期間の開始を示し、Tが日付部分と時刻部分の区切りです。
`P1Y2M3D`は「1年2ヶ月3日」、`T4H5M6S`は「4時間5分6秒」を意味します。

![Durationの図](/articles/temporal-4.svg)

### Durationの読み取り専用メソッド

`Duration`は下記の10個の読み取り専用メソッドを持ちます。
`years`, `months`, `weeks`, `days`, `hours`, `minutes`, `seconds`, `milliseconds`, `microseconds`, `nanoseconds`

```javascript title="Durationの読み取り専用メソッド" showLineNumbers
const d = Temporal.Duration.from({ hours: 2, minutes: 30 })
d.hours // → 2
d.minutes // → 30
d.days // → 0（未指定のフィールドは0）
```

### 他の型との連携

`Duration`の真価は他の`Temporal`型と組み合わせたときに発揮されます。

```javascript title="Durationと他の型との連携" showLineNumbers
const today = Temporal.PlainDate.from("2026-03-16")

// 加算
today.add({ months: 1, days: 5 })
// → "2026-04-21"

// 減算
today.subtract({ weeks: 2 })
// → "2026-03-02"

// 2つの日付の差を取得（Durationが返る）
const start = Temporal.PlainDate.from("2026-01-01")
const diff = start.until(today, { largestUnit: "month" })
// → P2M15D（2ヶ月15日）

// since は逆方向
today.since(start, { largestUnit: "month" })
// → P2M15D（同じ結果）
```

`until`/`since`で期間を取得するとき、`largestUnit`を指定しないとデフォルトでは最大の単位が型によって異なります。
明示的に指定することで結果の表現をコントロールできます。

```javascript title="largestUnitの指定" showLineNumbers
const a = Temporal.PlainDate.from("2025-01-01")
const b = Temporal.PlainDate.from("2026-03-16")

a.until(b) // → P440D（デフォルトはday単位）

a.until(b, { largestUnit: "year" })
// → P1Y2M15D（1年2ヶ月15日）

a.until(b, { largestUnit: "month" })
// → P14M15D（14ヶ月15日）
```

### Durationの繰り上げ/切り捨ての計算 roundメソッド

`Duration`は繰り上げ/切り捨てを計算できます。
ただし、月や年を含む丸めにはカレンダー上の基準日`(relativeTo)`が必要です。

```javascript title="Durationのroundメソッド" showLineNumbers
const d = Temporal.Duration.from({ hours: 7, minutes: 43 })

d.round({ smallestUnit: "hour", roundingMode: "ceil" })
// → PT8H

d.round({ largestUnit: "day", smallestUnit: "hour" })
// → PT8H

// 月・年を含む場合は relativeTo が必須
const long = Temporal.Duration.from({ months: 15, days: 20 })
long.round({
  largestUnit: "year",
  relativeTo: Temporal.PlainDate.from("2026-01-01"),
})
// → P1Y4M（relativeToを起点に計算）
```

### 比較 compareメソッド

`Duration`は比較できます。

```javascript title="Durationのcompareメソッド" showLineNumbers
const d1 = Temporal.Duration.from({ months: 1 })
const d2 = Temporal.Duration.from({ days: 30 })

// 「1ヶ月」と「30日」、どちらが長い？
// → カレンダー上の起点によって変わる！
Temporal.Duration.compare(d1, d2, {
  relativeTo: Temporal.PlainDate.from("2026-02-01"),
})
// → -1（2月は28日なので、1ヶ月 < 30日）

Temporal.Duration.compare(d1, d2, {
  relativeTo: Temporal.PlainDate.from("2026-03-01"),
})
// → 1（3月は31日なので、1ヶ月 > 30日）
```

### 単位変換 totalメソッド

特定の単位に変換した数値が欲しいときは`total`を使います。

```javascript title="Durationのtotalメソッド" showLineNumbers
const d = Temporal.Duration.from({ hours: 1, minutes: 30 })

d.total("minutes") // → 90
d.total("seconds") // → 5400
```

### 符号 signメソッド

`Duration`は正または負のいずれかです。
すべてのフィールドが同じ符号を持つ必要があり、混在はできません。
`sign`プロパティで確認できます。

```javascript title="Durationのsignメソッド" showLineNumbers
const pos = Temporal.Duration.from({ hours: 2 })
pos.sign // → 1

const neg = Temporal.Duration.from({ hours: -2 })
neg.sign // → -1
neg.negated() // → PT2H（正に反転）
neg.abs() // → PT2H（絶対値）
```

### Durationのまとめ

`Duration`の設計で特に重要なのは、「1ヶ月」のような曖昧な単位をそのまま保持し、実際の計算時に`relativeTo`で文脈を与えるという考え方です。
`Date`オブジェクトでは、こうした曖昧さが暗黙的に処理されてバグの原因になっていましたが、`Temporal`では明示的に扱うことで安全性を確保しています。

## さいごに

今回は`Temporal`について紹介しました。
主要ブラウザの対応が完了したため、今後は`Temporal`を使用することが増えていくと思います。
以前まで`Date`オブジェクト・ライブラリを使用していた箇所もJavaScriptの標準APIである`Temporal`に書き換わっていくことでしょう。

<Callout variant="warning">
  まだ対応していないブラウザがあるため、場合によっては`@js-temporal/polyfill`を使用する必要があります。

  <ExternalLink url="https://www.npmjs.com/package/@js-temporal/polyfill" />
</Callout>


---

## 【Next.js】TOKOSテックブログをリニューアル！技術構成と工夫を紹介

- URL: https://blog.to-ko-s.com/articles/tokos-tech-blog-renewal
- 著者: 西原月熙
- 公開日: 2026-03-07
- タグ: React, Next.js, TypeScript

> TOKOSテックブログをNext.js 16 + React 19でフルリニューアルしました。技術スタック、全文検索やダークモード等のUXへのこだわり、textlintによる執筆体験、AIを活用した開発・運用フローについて紹介します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です。
TOKOSテックブログを、WordPressからNext.jsへフルリニューアルしました🎉

旧ブログはWordPressで運用していましたが、カスタマイズの自由度やパフォーマンス面で課題を感じていました。
「自分たちの技術力を活かして、ゼロから理想のブログを作ろう」ということで、Next.jsでの再構築に踏み切りました💪

本記事では、リニューアル後のテックブログの技術構成や工夫したポイントを紹介します。

## 技術スタック・インフラ構成

まずは使用している技術の全体像です。

### 使用技術

| カテゴリ               | 技術                                                                                  |
| ---------------------- | ------------------------------------------------------------------------------------- |
| フレームワーク         | Next.js 16（App Router）                                                              |
| スタイリング           | Tailwind CSS                                                                          |
| 記事の管理             | MDX（[next-mdx-remote-client](https://www.npmjs.com/package/next-mdx-remote-client)） |
| シンタックスハイライト | rehype-pretty-code + Shiki                                                            |

### インフラ・SEO等

| カテゴリ       | 技術                                    |
| -------------- | --------------------------------------- |
| ホスティング   | Vercel                                  |
| ランタイム     | Node.js 24系                            |
| SEO対策        | JSON-LD、OGP、RSS、サイトマップ         |
| アナリティクス | Google Analytics（@next/third-parties） |
| 画像最適化     | AVIF + WebP                             |

主な選定ポイントを紹介します。

#### Next.js

静的コンテンツ中心のブログサイトであるため、SSG可能なNext.jsを選定しました。
`npm run build`でほぼ全てのページが静的生成されるようにしました💪

```bash
$ npm run build

# ...

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ƒ /api/og
├ ○ /api/search
├ ○ /apple-icon.png
├ ● /articles/[slug]
│ ├ /articles/tokos-tech-blog-renewal
│ ├ /articles/css-text-decoration
│ ├ /articles/image-flow-wave
│ └ [+149 more paths]
├ ○ /authors
├ ● /authors/[slug]
│ ├ /authors/nishihara-tsukiya
│ ├ /authors/sugita-yusuke
│ ├ /authors/shiomi-naoki
│ └ [+4 more paths]
├ ○ /feed.xml
├ ○ /news
├ ● /news/[slug]
│ ├ /news/2026-03-07
│ └ /news/migration-from-issen
├ ● /pages/[page]
│ ├ /pages/1
│ ├ /pages/2
│ ├ /pages/3
│ └ [+10 more paths]
├ ○ /robots.txt
├ ○ /sitemap.xml
├ ● /tags/[slug]
│ ├ /tags/react
│ ├ /tags/nextjs
│ ├ /tags/javascript
│ └ [+12 more paths]
└ ● /tags/[slug]/[page]
  ├ /tags/react/1
  ├ /tags/react/2
  ├ /tags/react/3
  └ [+25 more paths]


○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses generateStaticParams)
ƒ  (Dynamic)  server-rendered on demand
```

さらに、可能な限りServer Componentsに寄せ、パフォーマンスを最適化しました。

また、`next.config.ts`の設定は下記のとおりです。

```ts title="next.config.ts"
import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  reactCompiler: true,
  typedRoutes: true,
  experimental: {
    viewTransition: true,
  },
  images: {
    formats: ["image/avif", "image/webp"],
  },
}

export default nextConfig
```

`reactCompiler`を有効にすることで、`useMemo`や`memo`、`useCallback`を手動で書く必要がなくなります。
`typedRoutes`により、ルーティングの型安全性を確保しています。
また、`viewTransition`でページ遷移時のネイティブなアニメーションを実現しています✨

#### MDX（ファイルベース）

MicroCMS等のヘッドレスCMSではなく、Gitで記事をバージョン管理する方式を選びました。
これによりランニングコストの削減と、記事もコードと同じようにPRベースでレビューできるようになりました。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  MDXはMarkdownとReactコンポーネントを組み合わせたファイル形式で、Markdown内にReactコンポーネントを埋め込むことができます🙌
</SpeechBubble>

## こだわりポイント

### 全文検索（Fuse.js）

ブログに検索機能は欠かせません。
Algoliaなどの外部サービスを使う選択肢もありましたが、記事数の規模・コスト面を考えるとクライアントサイド検索で十分と判断しました。
そこで、軽量かつ外部依存のないファジー検索（あいまい検索）ライブラリである**Fuse.js**を採用しています。

<ExternalLink url="https://www.fusejs.io/" />

実装のポイントは以下のとおりです。

- **ビルド時にインデックスを静的生成**: Route Handlerで`force-static`を指定し、ビルド時にJSONを生成
- **遅延読み込み**: 検索モーダルを初めて開いた時に、インデックスとFuse.jsをdynamic importで読み込み
- **Cmd+K / Ctrl+Kショートカット**: キーボードだけで素早く検索を開始できる
- **キーボード操作**: 矢印キーで結果を選択し、Enterで遷移

検索インデックスのエンドポイントは、たったこれだけです。

```ts title="src/app/api/search/route.ts"
import { NextResponse } from "next/server"
import { getSearchIndex } from "@/lib/content/articles"

export const dynamic = "force-static"

export const GET = () => {
  const searchIndex = getSearchIndex()
  return NextResponse.json(searchIndex)
}
```

`force-static`を指定することで、ビルド時に静的なJSONファイルとして生成されます。
ユーザーがモーダルを開いた時だけこのJSONを取得し、Fuse.jsで検索する仕組みです。

<Video src="/articles/tokos-tech-blog-renewal-search.mp4" />

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  かなり心地良い検索体験を実現できました😌
</SpeechBubble>

### ダークモード

ダークモードは**next-themes**で実装しています。
ライト・ダーク・システムの3モードに対応しています。

<ExternalLink url="https://github.com/pacocoursey/next-themes" />

実装で工夫した点を紹介します。

**ちらつき防止のためのCSSベースアイコン切替**

テーマの切替ボタンでは、JavaScriptの状態に依存せずCSSの`dark:`クラスでアイコンを出し分けています。
これにより、ページ読み込み時のアイコンのちらつきを防いでいます。

```tsx title="src/app/_components/ThemeToggle.tsx"
{/* CSSでテーマに応じてアイコンを切り替え（ちらつき防止） */}
<Icon name="sun" className="size-6 dark:hidden" />
<Icon name="moon" className="hidden size-6 dark:block" />
```

**disableTransitionOnChangeの活用**

`ThemeProvider`に`disableTransitionOnChange`を設定し、テーマ切替時にCSSトランジションを一時無効化しています。
これにより、テーマが切り替わる瞬間の中間状態が見えてしまうちらつきを防止できます。

```tsx title="src/app/_components/ThemeProvider.tsx"
<NextThemesProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
  {children}
</NextThemesProvider>
```

**ハイドレーションエラー対策**

テーマに依存するUI（ドロップダウンメニューなど）は、マウント後にのみ表示する必要があります。
本ブログではReact 18から追加された`useSyncExternalStore`を使った`useIsMounted`フックでこれを実現しています。

```ts title="src/lib/hooks/useIsMounted.ts"
export const useIsMounted = () => {
  return useSyncExternalStore(
    () => noop,
    () => true, // クライアント: true
    () => false, // サーバー: false
  )
}
```

`useEffect` + `useState`でも同じことはできますが、`useSyncExternalStore`を使うことで初回レンダリングから正しい値が適用され、マウント後の不要なstate更新を避けられます。
このフックでサーバーとクライアントのHTML不一致によるハイドレーションエラーを回避しています。

## SEO対策

### 内部対策

Next.jsのMetadata APIを活用し、SEOの内部対策を網羅的に実装しています。

**titleタグ・descriptionタグ**

ルートレイアウトで共通のメタデータを定義し、各ページの`generateMetadata`で個別に上書きする構成です。
タイトルには`template`を使用し、「記事タイトル | TOKOS Tech Blog」の形式で統一しています。

```tsx title="src/app/layout.tsx（メタデータ抜粋）"
export const metadata: Metadata = {
  metadataBase: new URL(SITE_CONFIG.url),
  title: {
    default: SITE_CONFIG.name,
    template: `%s | ${SITE_CONFIG.name}`,
  },
  description: SITE_CONFIG.description,
  alternates: {
    canonical: SITE_CONFIG.url,
    types: {
      "application/rss+xml": `${SITE_CONFIG.url}/feed.xml`,
    },
  },
}
```

**canonical URL**

全ページに`alternates.canonical`を設定し、URLの正規化を行っています。
記事ページでは`generateMetadata`内で動的にcanonical URLを生成しています。

**indexの制御**

`robots.ts`でサイト全体のクロール許可を定義しつつ、ページ単位でも`robots: { index: false }`で制御できるようにしています。
例えばお知らせページ（`/news/`）はSEO上のメリットが薄いため、意図的にnoindexとしています。

```ts title="src/app/robots.ts"
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/api/", "/news/"],
    },
    sitemap: `${SITE_CONFIG.url}/sitemap.xml`,
  }
}
```

**構造化データ（JSON-LD）**

`schema-dts`ライブラリを使い、型安全に構造化データを出力しています。
Organization、WebSite、BlogPosting、BreadcrumbListの4種類を実装しています。

**その他の対策**

- **OGP / X(Twitter)カード**: 全ページに設定し、記事ページではOG画像を動的生成
- **サイトマップ**: `sitemap.ts`で全ページを動的に生成し、優先度と更新頻度を設定
- **RSSフィード**: `feed.xml`で配信し、`alternates`でリンクを公開

### Lighthouseオール100点

上記の内部対策とパフォーマンス最適化により、Lighthouseの全4カテゴリで**100点**を達成できました🎉🎉

![Lighthouseスコア（全カテゴリ100点）](/articles/tokos-tech-blog-renewal-lighthouse.webp)

主に貢献しているポイントは以下のとおりです。

- **Performance**: 全ページSSGによる高速表示、AVIF/WebPによる画像最適化、dynamic importによるバンドル分割
- **Accessibility**: セマンティックなHTML、適切な`aria`属性、十分なコントラスト比
- **Best Practices**: HTTPS配信、適切なContent Security設定
- **SEO**: メタデータ、canonical、構造化データ、サイトマップの網羅的な実装

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  オール100点は気持ちいいです😎
</SpeechBubble>

## 執筆体験の改善

技術ブログは「書き続けること」が大切です。
そのため、執筆体験の改善にも力を入れています。

再掲ですが、本ブログの記事は全てMDXファイルとしてGitリポジトリで管理しています。
CMSを使わず、コードと同じようにPRベースで執筆・レビューできる方がエンジニアにとって自然なワークフローなはずです。
この「記事もコード」というアプローチを前提に、`textlint`やバリデーションによる品質チェックを組み込んでいます。

### `textlint`による日本語チェック

`textlint`を導入し、日本語の品質を自動でチェックしています。

```json title=".textlintrc.json（抜粋）"
{
  "rules": {
    "preset-ja-technical-writing": {
      "sentence-length": { "max": 120 },
      "no-mix-dearu-desumasu": {
        "preferInBody": "ですます"
      }
    },
    "preset-ja-spacing": {
      "ja-space-between-half-and-full-width": {
        "space": "never"
      }
    },
    "prh": {
      "rulePaths": ["./prh/tech-terms.yml"]
    }
  }
}
```

主な機能は以下のとおりです。

- **preset-ja-technical-writing**: 一文の長さ制限、「ですます」調の統一、連続する漢字の制限など
- **preset-ja-spacing**: 半角と全角の間のスペースルールなど
- **prh（校正辞書）**: 技術用語の表記統一（例: `typescript` → `TypeScript`、`nextjs` → `Next.js`）

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  prhの技術用語統一は、複数人で執筆する場合に揺れを防ぐのに便利です✨
</SpeechBubble>

### 自前のバリデーション

textlintに加えて、独自のバリデーションスクリプトも用意しています。

チェック項目は以下のとおりです。

- **SEO**: タイトル（25〜65文字）、description（50〜160文字）、本文（最低1000文字）
- **見出し構造**: H1不使用、H2始まり、階層の飛び越しなし
- **コードブロック**: 全てに言語指定があるか
- **画像**: alt属性の有無
- **内部リンク**: `InternalLink`の参照先が存在するか

<Callout>
  pre-commitフック（lint-staged + simple-git-hooks）で、コミット時にtextlintとバリデーションが自動実行されます。
</Callout>

### CI/CDパイプライン

PR作成時には、GitHub Actionsで以下のチェックが自動実行されます。

**フロントエンドCI（全PR）:**

- ESLint
- ビルド

**コンテンツCI（MDX変更時）:**

- textlint（日本語チェック）
- バリデーション（SEO・見出し構造など）

レビュー前に機械的なチェックが完了するため、レビュアーは記事の内容に集中できます💪

## AIの活用

本ブログでは、開発から運用までAIを積極的に活用しています。

### バイブコーディング

本ブログの実装は**Claude Code**をメインに使い、ほぼ全てのコードをAIに生成してもらいました。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  自分でゴリゴリ書いたコードはほとんどないです😎
</SpeechBubble>

AIに一貫したコードを出力してもらうために、プロジェクトルートの`CLAUDE.md`にコーディング規約を記載しています。
Claude Codeはこのファイルを自動で読み込み、ルールに従ってコードを生成してくれます。

```markdown title="CLAUDE.md（コーディングルール抜粋）"
## コーディングルール

- バレルファイルを使用しない
- useMemo, useCallbackを使用しない
- next/linkはprefetchをfalseに設定する
- 関数定義スタイル:
  - コンポーネント: function宣言を使用
  - コンポーネント以外（hooks, ユーティリティ等）: アロー関数を使用
```

このように規約を明文化しておくことで、AIが生成するコードの品質とスタイルが安定します。

### 記事執筆のSkill

Claude Codeの**Skill機能**を活用し、記事の執筆フローを仕組み化しています。
Skillとは、特定タスクの手順や仕様をClaude Codeに教えるための仕組みです。

`.claude/skills/article-writer/`配下に、以下のような構成でスキルを定義しています。

```text title=".claude/skills/article-writer/ のディレクトリ構成"
.claude/skills/article-writer/
├── SKILL.md                  # 執筆フロー・全体方針
└── references/
    ├── frontmatter.md        # frontmatterの仕様
    ├── mdx-components.md     # MDXコンポーネントの使い方
    ├── code-blocks.md        # コードブロック記法
    ├── writing-style.md      # textlintルール・文体ガイド
    └── review-checklist.md   # レビューチェックリスト
```

Claude Codeが記事を書く流れは以下のとおりです。

1. テーマと対象読者の確認
2. アウトラインの提案（H2/H3構造）
3. `frontmatter.md`を参照してメタデータを作成
4. `writing-style.md`に従い、textlint準拠の日本語で本文を執筆
5. `npm run textlint` → `npm run validate` → `npm run build`で検証

`references/`配下に仕様を定義しておくことで、AIが参照しながら記事を書いてくれます。
フォーマットのブレがなく、検証も一発で通ることが多いです。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  AIと一緒に記事を書く感覚です✨
</SpeechBubble>

### 自動レビュー

PRを作成するとGitHub Actions上で**Claude Code**による自動レビューが実行されます。
レビューはコードと記事で分けており、それぞれ異なる観点でチェックしています。

- **claude-code-review.yml**: `.ts`や`.tsx`等のコード変更に対し、バグやセキュリティの観点でレビュー
- **claude-article-review.yml**: MDXファイルの変更に対し、読みやすさや技術的正確性の観点でレビュー

例えば記事レビューでは、以下のような観点をプロンプトで指定しています。

```yaml title="claude-article-review.yml（プロンプト抜粋）"
prompt: |
  このプルリクエストに含まれるMDXファイル（記事）をレビューしてください。
  「読者がこの記事を読んで満足するか」という観点で改善提案をしてください。

  ## 記事レビューの重点
  ### 読みやすさ・構成
  - 導入部で記事の目的や対象読者が明確か
  - 見出し構造が論理的で、読者が流れを追いやすいか
  ### 技術的正確性
  - コードサンプルが正しく動作しそうか
  - 古い情報や非推奨の手法がないか
```

<Callout>AIレビューは補助的な位置付けですが、人間のレビュー負荷を大きく軽減してくれます。</Callout>

## おわりに

WordPressからNext.jsへのリニューアルで、開発・執筆体験が大きく向上しました。
全ページが静的生成（SSG）されているため表示速度は高速で、Turbopackによる開発サーバーの起動も快適です。

最大の成果は、textlintやバリデーション、AIによる開発・執筆フローで「記事を書くハードル」を下げられたことだと感じています。
品質チェックを自動化し、AIにレビューを任せることで、書くことそのものに集中できる環境を作れました。

今後は以下のような改善にも取り組んでいきたいです。

- 記事へのコメント・リアクション機能
- 関連記事の自動レコメンド
- パフォーマンスモニタリングの導入

リニューアルを通じて学んだのは、「AIに任せられる部分はどんどん任せ、人間は判断と品質に集中する」という考え方です。
これからも技術発信を続けていきます💪


---

## 【CSS】下線＋装飾でデザインに差をつけるtext-decoration

- URL: https://blog.to-ko-s.com/articles/css-text-decoration
- 著者: 小田優真
- 公開日: 2025-11-10
- タグ: HTML, CSS

> CSSのtext-decorationプロパティの基本から応用テクニックまでを解説。線の色・太さ・位置・スタイルを自由にカスタマイズして、リンクや見出しをデザインの一部として演出する方法を紹介します。


## はじめに

こんにちは！株式会社TOKOSのユウマです！

Webサイト制作の際、線を引くとなったら`border`プロパティを思い浮かべる方が多いと思います。
今回は`border`プロパティ以外に線を引く方法、`text-decoration`プロパティをご紹介します。
CSSの`text-decoration`プロパティは「下線を引くだけ」ではありません！
線の色・太さ・位置・スタイルを自由に変えることで、リンクや見出しを**デザインの一部として演出**できます。

この記事では、`text-decoration`の基本から、実務でも役立つ応用テクニックまでをわかりやすく紹介します。
初心者の方でも、「見た目がちょっと垢抜ける下線」が作れるようになりますよ！

## borderプロパティ以外に線を引く方法"text-decoration"とは？

```css title="CSS" showLineNumbers
p {
  text-decoration: underline;
}
```

![text-decoration: underlineで下線を引いたテキストの表示例](/articles/image-1-1024x193.webp)

上記のように指定すると、テキスト全体に下線が引かれます。

指定できる主な値は以下のとおりです。

### none

装飾なし

### underline

下線を引く

### overline

上線を引く

### line-through

取り消し線を引く

### underline overline

複数の線を組み合わせる

## text-decorationプロパティの構成・値の意味

`text-decoration`は1つのプロパティでも指定できますが、細かくカスタマイズする場合は以下のサブプロパティを使います。

```css title="CSS" showLineNumbers
text-decoration-line: underline;
text-decoration-color: #ff6b6b;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
```

## 主なサブプロパティ一覧

### text-decoration-line

**役割**：線の位置（下線・上線・取り消し線）を指定
**例**：`underline`

### text-decoration-color

**役割**：線の色を指定
**例**：`#000000`

### text-decoration-style

**役割**：線のスタイル（実線・点線・波線など）
**例**：`wavy`

### text-decoration-thickness

**役割**：線の太さを指定
**例**：`◯px`

### text-underline-offset

**役割**：線と文字の間隔を調整
**例**：`◯px`

これらを組み合わせることで、「読みやすさ」＋「デザイン性」を両立したテキスト装飾ができます。

## 実際に装飾してみよう！基本例

まずは基本的な下線の指定です。

```html title="HTML" showLineNumbers
<p class="underline">これは下線付きのテキストです。</p>
```

```css title="CSS" showLineNumbers
.underline {
  text-decoration: underline;
}
```

![基本的なunderline指定で下線が引かれたテキスト](/articles/image-5-1024x193.webp)

次に、色やスタイルを追加してみます。

```css title="CSS" showLineNumbers
.underline {
  text-decoration-line: underline;
  text-decoration-color: #3498db;
  text-decoration-style: dotted;
}
```

![青い点線スタイルの下線が表示されたテキスト](/articles/image-4-1024x190.webp)

**結果**：青い点線の下線が表示されます。
リンクや見出しの装飾としても使えますね。

## デザイン性を高める応用テクニック

`text-decoration`は、少し工夫するだけで印象が大きく変わります。
ここでは実務でよく使われる応用テクを紹介します。

### 下線の位置を調整して、すっきり見せる

```css title="CSS" showLineNumbers
.text {
  text-decoration: underline;
  text-underline-offset: 4px;
}
```

![text-underline-offsetで下線の位置を文字から離した表示例](/articles/image-6-1024x203.webp)

下線が文字に近すぎると読みにくいですが、少し離すとデザインが整って見えます。

### 太めの下線で強調する

```css title="CSS" showLineNumbers
.title {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}
```

![text-decoration-thicknessで太めの下線を引いた見出しの例](/articles/image-7-1024x207.webp)

線を太くするだけで、強調感のある見出しに。
細かい余白や太さの調整で印象がぐっと変わります。

### hover時に色と線を変える

```css title="CSS" showLineNumbers
a {
  text-decoration: none;
  color: #333;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: #ff6b6b;
  text-underline-offset: 4px;
}
```

ホバーした瞬間に柔らかく色が変わるリンク。
シンプルなのに動きがある印象を作れます。

<Video src="/articles/css-text-decoration.mp4" />

### wavy（波線）で遊び心をプラス

```css title="CSS" showLineNumbers
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #e67e22;
}
```

![text-decoration-style: wavyでオレンジ色の波線を引いた表示例](/articles/image-9-1024x178.webp)

最近ではデザインカンプでもよく見られる「波線強調」。
注意書きや強調文に使うと親しみやすい印象に。

## よくある疑問・解決策

### 下線が文字に重なって見づらい

**解決策：**`text-underline-offset`で間隔を調整

### 太さが変わらない

**解決策：**`text-decoration-thickness`にpx指定を

### `border-bottom`との違いは？

**違い：**`text-decoration`は文字単位、`border-bottom`は要素全体に線を引く

`text-decoration`はテキストそのものの装飾。
→ リンクやキーワード強調などに最適。

`border`はボックス（要素）全体の装飾。
→ 見出し・ボタン・デザイン下線に適している。

<SpeechBubble icon="/authors/oda-yuma.jpg" name="ユウマ">
  `text-decoration`、`border`プロパティを使い分けて、デザインに合った線を実装しましょう✨️
</SpeechBubble>

## おわりに

`text-decoration`は、ただの装飾ではなく「テキストの表現力」を高めるCSSプロパティです。

色・太さ・位置を少し工夫するだけで、サイト全体の印象が変わります。

「リンクに下線を引く」だけで終わらせず、「見た目も含めた設計」に意識を向けることで、一歩先のコーディングを目指してみましょう。


---

## 【CSS＋SVG】波型の中を写真が流れるセクションの作り方

- URL: https://blog.to-ko-s.com/articles/image-flow-wave
- 著者: 寺田拓真
- 公開日: 2025-10-31
- タグ: HTML, CSS

> SVGのclipPathを使って波型の枠を作り、その中で画像を横に流すアニメーションを実装する方法を解説。FlexレイアウトとCSSアニメーションを組み合わせて、LPやブランドサイトでよく見る“ゆれる波ギャラリー”を簡単に再現できます。初心者でも理解できるように、波型パスの仕組みから丁寧に説明します。


## はじめに

みなさん、こんにちは！
たくまです！

みなさんはLPやブランドサイトで以下のようなセクションを見たことはありませんか？

<Video src="/articles/image-flow-wave.mp4" />

上記のように波型に切り抜かれた中を画像が横に流れていくセクションですが、意外と作り方が分かりにくいです。

この記事では**①波型の枠をつくる → ②そこに画像群を当てはめる → ③横流しアニメーションを付ける**の3ステップで、初学者の方でも再現できるように丁寧に解説します。

完成イメージは先の動画のとおり、**波型クリップ**の中に**横並びの画像列**が入り、**無限ループで左へ流れる**構造です。記事内のコードは、本文にある最小構成に置き換えても動作します。

## 全体の考え方（仕組み）

1. **波型の枠＝マスク**をSVGの`clipPath`で作り、`clip-path: url(#waveClip)`で要素を切り抜く。
2. 枠の内側に横並び（flex）の画像群を配置。
3. 画像列を**2周分**用意（=横幅200%）して、`translateX(-100%)`まで動かす**無限ループ**で継ぎ目をなくす。

## 作成方法

### ① 波型の枠（クリップ）を作成する

なぜ`clipPath`を使うのかですが、CSSの`clip-path: path()`でも波型は描けますが、**ブラウザ間の実装差や編集時の見通し**を考えると、SVGの`clipPath`を定義して参照するのが安定・安全です。`mask-image`でも近い表現は可能ですが、透明度ベースなのでアンチエイリアスの差や色のにじみが気になるケースがあります。幾何学的な輪郭で切り抜きたいなら`clipPath`がベターです。

```html showLineNumbers title="HTML"
<div class="gallery">
  <!-- ここに波型クリップの定義 -->
  <svg width="0" height="0" aria-hidden="true" style="position:absolute">
    <defs>
      <clipPath id="waveClip" clipPathUnits="objectBoundingBox">
        <path
          d="
          M 0,0.12
          C 0.083,0.16 0.167,0.08 0.25,0.12
          S 0.417,0.16 0.50,0.12
          S 0.667,0.08 0.75,0.12
          S 0.917,0.16 1.00,0.12
          V 0.88
          C 0.917,0.84 0.833,0.92 0.75,0.88
          S 0.583,0.84 0.50,0.88
          S 0.333,0.92 0.25,0.88
          S 0.083,0.84 0.00,0.88
          Z"
        />
      </clipPath>
    </defs>
  </svg>

  <div class="gallery__inner">
    <!-- 後述：画像の横並び -->
  </div>
</div>
```

#### `clipPathUnits="objectBoundingBox"`とは？

- パス中の座標を**0〜1の割合**で扱える設定です。
- `M 0,0.12`は「左端の少し下（高さ12%）」、`1.00,0.12`は「右端の同じ高さ」を意味します。
- どんな横幅・高さでも同じ形状に伸縮してくれるので、レスポンシブ向き。

#### 波型パスの読み方

- `M`：開始位置（MoveTo）
- `C x1,y1 x2,y2 x,y`：ベジェ曲線の制御点2つ＋終点。
- `S x2,y2 x,y`：直前の曲線の方向を引き継ぐ**滑らか曲線。**
- `V 0.88`：縦線で0.88（=88%の高さ）まで下ろす。
- 最後の`Z`でパスを閉じる（輪郭がつながる）。

上側にさざ波、下側に逆向きのさざ波を描いており、上下とも滑らかになるよう`S`を多用しています。
波の高さを変えたいときは、`0.12 / 0.16 / 0.08`などの値を0.1刻み程度で触ると雰囲気が変わります。

> 🔰コツ：
> 一度`clipPathUnits="userSpaceOnUse"`＋`viewBox="0 0 100 100"`に変えて、
> `M 0,12 …`のように0〜100の座標で試し書きすると形がつかみやすいです。
> 形が決まったら、100で割って0〜1に戻すと失敗しにくいです。

**クリップを要素に適用**

```css showLineNumbers title="CSS"
.gallery {
  background: #fbf8f9; /* 波の外側の色 */
  width: 100%;
}
.gallery__inner {
  width: 100%;
  aspect-ratio: 16 / 8; /* 高さは必ず決める（比率 or 固定高） */
  clip-path: url(#waveClip); /* ここで波型に切り抜く */
  overflow: hidden; /* はみ出しを消す */
}
```

❗注意：`width="0" height="0"`にしておくと**レイアウトに影響しない。**

### ② 波型の中に画像群を流し込む（横並び）

**横スクロールの継ぎ目を無くすため**、同じ並びを**2セット**並べた200%幅の行列を作ります。

```html showLineNumbers title="HTML"
<div class="gallery__inner">
  <div class="strip">
    <div class="item"><img src="1.jpg" alt="" /></div>
    <div class="item"><img src="2.jpg" alt="" /></div>
    <div class="item wide"><img src="3.jpg" alt="" /></div>
    <div class="item wide"><img src="4.jpg" alt="" /></div>

    <!-- もう一周分（同じ順序で） -->
    <div class="item"><img src="1.jpg" alt="" /></div>
    <div class="item"><img src="2.jpg" alt="" /></div>
    <div class="item wide"><img src="3.jpg" alt="" /></div>
    <div class="item wide"><img src="4.jpg" alt="" /></div>
  </div>
</div>
```

```css showLineNumbers title="CSS"
.strip {
  width: 200%; /* 2周分 */
  height: 100%;
  display: flex;
  gap: 4px;
  position: relative;
}

.item {
  flex-shrink: 0; /* つぶれ防止 */
  min-width: 463px;
  max-width: 463px;
  height: 100%;
}

.item.wide {
  max-width: 700px; /* 画像により幅に強弱を付ける */
}

/* 画像の収まり */
.item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* はみ出しなくトリミング */
  object-position: center;
}

/* 高さはレスポンシブで変えやすい */
@media (max-width: 768px) {
  .gallery__inner {
    aspect-ratio: 16/10;
  }
  .item {
    min-width: 200px;
    max-width: 200px;
  }
  .item.wide {
    max-width: 300px;
  }
}
```

- `object-fit: cover`で枠いっぱいに。
- 画像ごとに`object-position`を調整すると見せたい領域を中心にできます。
- `aspect-ratio`で高さを決めると波形が潰れずに済みます（高さの指定を忘れると`clipPath`の比率が不安定になります）。

### ③ 横流しアニメーションを付与（無限ループ）

strip全体を左へ動かします。-100%（=1周分）動かすと最初に戻るので、見た目は継ぎ目なしに。

```css showLineNumbers title="CSS"
.strip {
  animation: slideLeft 50s linear infinite;
}
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* モバイルは少し早めにするなど調整 */
@media (max-width: 768px) {
  .strip {
    animation: slideLeft 30s linear infinite;
  }
}
```

画像を1セットだけにすると、**端まで行った瞬間に戻る動き**が見えてしまいます。
2セット並べて「1周目が左へ消えるのと同時に、2周目が画面に入る」状態にすると、常に連続表示になり違和感が消えます。

### 仕上げのコツ・よくある落とし穴

**SVG参照の位置**
`clip-path: url(#waveClip)`で参照する`#waveClip`は同じドキュメント内に置く。外部読み込みはSafariで失敗しがち。

**高さは必ず固定 or 比率指定**
`clipPath`は親要素の縦横比で見え方が変わります。`aspect-ratio`や`height`をきちんと指定すること。

**画像の最適化**
動画的に動くセクションは描画コストが高いので、画像はWebP/AVIF、適正サイズ、`loading="eager"`（表示直後の領域は遅延しない）などでチューニング。

**はみ出し線が見える**
`gap`に色が付くと波の縁に細いラインが見える場合があります。`gap`は背景色と同色（今回なら`#fbf8f9`に近い色）にすると目立ちません。

**will-changeの使いすぎ注意**
`.strip{ will-change: transform; }`でスクロールを滑らかにできますが、多用はメモリを圧迫します。必要な箇所だけに。

## まとめ

- 波型の枠は、SVGの`clipPath`を0〜1座標（objectBoundingBox）で描いておくとレスポンシブに強い。
- クリップの内側に横並び（flex）の画像列を作り、2セット＝200%幅で継ぎのない無限ループを実現。
- `aspect-ratio`で高さを固定し、`object-fit: cover`で見切れを美しく。
- `prefers-reduced-motion`への配慮や画像最適化で実運用のクオリティを上げる。

これで、波型の中を写真がゆったり流れるヒーローセクションが再現できます。
サイトのトーンに合わせて、波の高さや速度（アニメ時間）、アイテム幅を微調整してみてください。ブランドらしい空気感づくりにとても効きます。

参考：記事内で使った最小コード一式

```html showLineNumbers title="HTML"
<div class="gallery">
  <svg width="0" height="0" aria-hidden="true" style="position:absolute">
    <defs>
      <clipPath id="waveClip" clipPathUnits="objectBoundingBox">
        <path
          d="M0,0.12 C0.083,0.16 0.167,0.08 0.25,0.12 S0.417,0.16 0.5,0.12 S0.667,0.08 0.75,0.12 S0.917,0.16 1,0.12 V0.88 C0.917,0.84 0.833,0.92 0.75,0.88 S0.583,0.84 0.5,0.88 S0.333,0.92 0.25,0.88 S0.083,0.84 0,0.88 Z"
        />
      </clipPath>
    </defs>
  </svg>

  <div class="gallery__inner">
    <div class="strip">
      <div class="item"><img src="1.jpg" alt="" /></div>
      <div class="item"><img src="2.jpg" alt="" /></div>
      <div class="item wide"><img src="3.jpg" alt="" /></div>
      <div class="item wide"><img src="4.jpg" alt="" /></div>

      <div class="item"><img src="1.jpg" alt="" /></div>
      <div class="item"><img src="2.jpg" alt="" /></div>
      <div class="item wide"><img src="3.jpg" alt="" /></div>
      <div class="item wide"><img src="4.jpg" alt="" /></div>
    </div>
  </div>
</div>
```

```css showLineNumbers title="CSS"
.gallery {
  background: #fbf8f9;
  width: 100%;
}
.gallery__inner {
  width: 100%;
  aspect-ratio: 16/8;
  clip-path: url(#waveClip);
  overflow: hidden;
}
.strip {
  width: 200%;
  height: 100%;
  display: flex;
  gap: 4px;
  animation: slideLeft 50s linear infinite;
}
.item {
  flex-shrink: 0;
  min-width: 463px;
  max-width: 463px;
  height: 100%;
}
.item.wide {
  max-width: 700px;
}
.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@media (max-width: 768px) {
  .gallery__inner {
    aspect-ratio: 16/10;
  }
  .strip {
    animation: slideLeft 30s linear infinite;
  }
  .item {
    min-width: 200px;
    max-width: 200px;
  }
  .item.wide {
    max-width: 300px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .strip {
    animation: none;
    transform: none;
  }
}
```


---

## 【CSS】「flex: 1;」ってなに？ これ1行でレイアウトが整う理由を解説！

- URL: https://blog.to-ko-s.com/articles/css-how-to-flex
- 著者: 小田優真
- 公開日: 2025-10-26
- タグ: HTML, CSS

> CSSのflex: 1;の仕組みをflex-grow・flex-shrink・flex-basisの3つの値に分解して初心者向けに解説します。均等レイアウトや比率調整の実用例も紹介します。


## はじめに

こんにちは！株式会社TOKOSのユウマです！
WEB制作をしている際、「`flexbox`を使っているけど子要素の幅がうまく調整できない...」といった経験があるのではないでしょうか。
今回はそんなお悩みを解決するプロパティ`flex: 1;`について、初心者向けに仕組みと効果をわかりやすく解説します。
「なぜ等間隔で並ぶの？」「何をしているの？」という疑問を解消し、実際のコーディングに活かせる知識を身につけましょう！

## 「flex: 1;」の正体は3つの値の省略形

```css title="CSS" showLineNumbers
.box {
  flex: 1 1 0;
}
```

実は`flex: 1;`は以下の3つをまとめた書き方なのです！

### flex-grow

意味：要素がどれだけ**伸びる**か
説明：`flex`アイテムの伸び率を指定するプロパティ。

### flex-shrink

意味：要素がどれだけ**縮む**か
説明：`flex`アイテムの圧縮率を指定するプロパティ。

### flex-basis

意味：基本の大きさ
説明：アイテムの基本の幅を指定するプロパティ。

先述したように`flex: 1;`は、`flex-grow: 1;`、`flex-shrink: 1;`、`flex-basis: 0;`を省略した書き方なので、「残りの空きスペースを**均等に分け合って**伸び縮みする」という指定になります。

## 実際に見てみよう！

### 実際に「flex: 1;」を指定してみよう！

```html title="HTML" showLineNumbers
<div class="container">
  <div class="box box1">A</div>
  <div class="box box2">B</div>
  <div class="box box3">C</div>
</div>
```

```css title="CSS" showLineNumbers
.container {
  display: flex;
  gap: 10px;
}

.box {
  background: lightblue;
  text-align: center;
  padding: 50px;
}

.box1 {
  flex: 1;
}
```

![flex: 1をbox1のみに指定し残りのスペースを全て使って広がった例](/articles/image-8-1024x240.webp)

この場合、`box1`は残りの空きスペースを全て使って広がります。

### 全ての要素に「flex: 1;」を指定したら？

```css title="CSS" showLineNumbers
.box1,
.box2,
.box3 {
  flex: 1;
}
```

![全要素にflex: 1を指定して3つのボックスが均等幅になった例](/articles/image-9-1024x243.webp)

こうすることで、`box1`、`box2`、`box3`はそれぞれ均等に幅を分け合います。
つまり、`width`等で幅を指定せずとも「等間隔に揃ったきれいなレイアウト」が一瞬で完成するんです！

### 「flex: 2;」にしたらどうなる？

もし`flex: 2;`のように数字を変えると、**数字が大きい要素がより多くのスペースを取る**ようになります。
たとえば`flex: 2;`と`flex: 1;`なら、`flex-basis: 0`のため全体のスペースを`2:1`の比率で分け合います。

```html title="HTML" showLineNumbers
<div class="container">
  <div class="box box1">A</div>
  <div class="box box2">B</div>
</div>
```

```css title="CSS" showLineNumbers
.container {
  display: flex;
  gap: 10px;
}

.box {
  background: lightblue;
  text-align: center;
  padding: 50px;
}

.box1 {
  flex: 2;
}

.box2 {
  flex: 1;
}
```

![flex: 2とflex: 1で2:1の比率にスペースが分配された例](/articles/image-10-1024x231.webp)

## 実用例を見てみよう！

実際にWEB制作時に`flex: 1;`を活用できる実用例を挙げてみます。

![flex指定前の会社概要テーブルでヘッダーとデータの幅が不揃いな状態](/articles/image-11-1024x524.webp)

```html title="HTML" showLineNumbers
<div class="c-company">
  <div class="c-company__row">
    <div class="c-company__header">会社名</div>
    <div class="c-company__data">株式会社TOKOS</div>
  </div>
  <div class="c-company__row">
    <div class="c-company__header">代表者</div>
    <div class="c-company__data">石津敬浩 西原月熙</div>
  </div>
  <div class="c-company__row">
    <div class="c-company__header">資本金</div>
    <div class="c-company__data">5,200,000円</div>
  </div>
  <div class="c-company__row">
    <div class="c-company__header">取扱業務</div>
    <div class="c-company__data">システム開発 WEBサイト制作 ECサイト構築</div>
  </div>
  <div class="c-company__row">
    <div class="c-company__header">所在地</div>
    <div class="c-company__data">
      〒150-0043<br />
      東京都渋谷区道玄坂1丁目10番8号渋谷道玄坂東急ビル2F−C
    </div>
  </div>
</div>
```

こちらはよくある会社概要ですが、横並びの`.c-company__header`と`.c-company__data`の幅がバラバラでレイアウトが崩れてしまっています。
ここで、`.c-company__row`に`display: flex;`を指定し、`.c-company__header`に`flex: 1;`、`.c-company__data`に`flex: 2;`をそれぞれ記述してみましょう！

```css title="CSS" showLineNumbers
.c-company__row {
  display: flex;
}

.c-company__header {
  flex: 1;
}

.c-company__data {
  flex: 2;
}
```

![flex: 1とflex: 2で会社概要テーブルのレイアウトが整った状態](/articles/image-12-1024x524.webp)

残っていたスペースが均等に分配され、レイアウトが整いました！

<SpeechBubble icon="/authors/oda-yuma.jpg" name="ユウマ">
  「`flexbox`のレイアウトを整えたい」となったら、「`flex: 1;`が使えるかも！」という発想で試してみてください！
</SpeechBubble>

## さいごに

固定幅を使わずにレイアウトの調整が簡単にできる`flex: 1;`は、均等レイアウトを作る最強の味方です。
また、数字を変更することで、それぞれの要素の比率を調整できるのでとても便利なプロパティです。
ぜひ今回の記事を参考に、デザイン通りのレイアウトを実装するために`flex: 1;`を活用してみてください！


---

## 右（左）寄せセクションが画面幅を広げても間延びしない方法

- URL: https://blog.to-ko-s.com/articles/calc-section
- 著者: 寺田拓真
- 公開日: 2025-10-17
- タグ: HTML, CSS

> 画面が広がると余白が間延びする右寄せレイアウトを、CSSのcalc()で美しく解決。基準幅＋半分の余白を吸収する計算式で、端寄せデザインを自然に仕上げる方法を解説します。


## はじめに

こんにちは、たくまです！
最近のWebデザインでは、コンテンツやセクションを中央に配置するのでなく、あえて**右端や左端に寄せた構成**を使うケースが増えています。こういったレイアウトを見たことはありませんか？

![コンテンツを右端に寄せたセクションレイアウトの例](/articles/image-6-1024x501.webp)

みなさんは、このようなレイアウトの場合どのようにスタイリングしますか？
すぐに思いつくのはmax-widthなどを設定し、margin-left: auto;にするものだと思います。

ところがこのレイアウト、単純に`margin-left: auto;`などで右寄せすると、
**大きなモニター（画面幅）で余白が広がりすぎる**という問題が発生します。
そうなると視線のバランスが崩れ、デザインが「間延びした印象」になってしまいます。

今回の記事では、その問題を**CSSのみ**でスマートに解決する方法を解説します。
キーポイントは、`calc()`を使って「余白の半分だけ吸収する」考え方です🧐

## 右寄せにする方法

### 課題：右寄せにすると余白が暴走する

冒頭でも述べたように、一般的なレイアウトでは全体に中央固定のコンテナを設け、例えば次のように設定します。

```css title="CSS" showLineNumbers
.container {
  max-width: 1240px;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
}
```

これにより、画面幅が1240pxを超えると、左右に均等な余白（＝中央寄せ）ができます。
しかし右寄せセクションを作るために`margin-left: auto; margin-right: 0;`としても、
この「左右均等」のルールが崩れて、**左側の余白だけがどんどん伸びてしまう**のです。

### 解決方法：余白の「半分だけ」吸収する幅計算

この問題を解決する考え方が、次のコードです。

```css title="CSS" showLineNumbers
.container {
  margin-left: auto;
  margin-right: 0;
  width: calc(1240px + (100% - 1240px) / 2);
}
```

この1行で、「画面幅が広がっても、余白を半分だけ吸収する」挙動が実現できます。

### コード解説：calc() の中で何が起きているのか

コードをひとつずつ解説します！

- `100%` … ビューポート全体の幅
- `1240px` … 通常のコンテナ幅（中央レイアウトの基準）
- `100% - 1240px` … 画面全体からコンテナを引いた「余白全体」
- `(100% - 1240px) / 2` … 左右に分かれている余白の**片側分**
- `1240px + (100% - 1240px)/2`
  → コンテナ幅に**余白の半分を足した幅**。つまり、
  **左端は中央コンテナと揃い、右端は画面いっぱいになる**絶妙なサイズになります。

この式のミソは、“画面全体とコンテナの中間点”を基準にしている点です👨‍💻
普通に`width: 100%`にすると全余白を吸収してしまい、右寄せのときに左側が空きすぎます。
`calc()`で半分だけ吸収させると、「見た目の重心」が自然な位置に収まります。

### margin-left: auto; margin-right: 0; の役割

この組み合わせは「要素を右端に寄せる」ための基本設定です。
ここで`margin-left: auto;`は「残りのスペースをすべて左に押し込む」という意味。
`width`の計算で決まったサイズを右端にピタッと固定するわけです。

- `calc()` → 要素の横幅を“半分吸収”で調整
- `margin-left: auto;` → それを右に寄せる

この二段構えで、**中央固定と右寄せを同時に満たす**ことができます。

### 応用：中央固定

中央固定に戻す場合は従来通りの

```css title="CSS" showLineNumbers
.container {
  max-width: 1240px;
  margin: 0 auto;
}
```

### 注意点

**基準幅を統一すること**
　中央固定コンテナと右寄せセクションで基準幅 (`1240px`) が異なると、境界がずれて見えます。

**大画面での横スクロール**
　画像や背景が`width: 100vw`になっていると、計算で1pxズレたときに横スクロールが出ることがあります。
　`overflow-x: hidden;`を無理に使う前に、要素ごとの`max-width`を確認しましょう。

**Safariのサブピクセル誤差**
　高DPIディスプレイでは、`calc()`の結果が小数点になることがあります。
　背景やボーダーが微妙にずれる場合は、`outline`などで見え方を整えるとよいでしょう。

## おわりに

今回のような右寄せレイアウトは、見た目以上に数理的なアプローチが必要です。
`width: calc(基準幅 + (100% - 基準幅)/2)`という式は、
「中央固定のコンテナを壊さず、片側だけを画面端まで伸ばす」ためのシンプルな解法。

難しそうに見えますが、**やっていることは「半分吸収」だけ**です。
これを理解しておくと、デザインに合わせて左右の重心を自在に操作できるようになります。
コンテンツが端に寄っても間延びせず、洗練された印象を保つことができるでしょう！


---

## 【Next.js】バージョン15.5の個人的まとめ【PageProps】

- URL: https://blog.to-ko-s.com/articles/nextjs-15-5
- 著者: 西原月熙
- 公開日: 2025-10-05
- タグ: React, Next.js

> Next.js 15.5の注目アップデートを解説。Turbopackのproduction build対応、PageProps/LayoutProps型の提供、Typed Routesの安定版化、middlewareのNode.jsランタイム安定版化などをまとめています。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
この記事では、2025年8月にバージョンアップしたNext.jsのバージョン15.5について、個人的に注目したい点を中心に解説していきます💪

今回のバージョンアップは、マイナーバージョンアップの割には色々機能が追加されてるので、気になる人はぜひ最後まで読んでください😎

## アップデート内容

### Turbopackのproduction buildが可能に

少し前から、開発環境では`next dev --turbopack`とすると、サーバーがturbopackで立ち上がるようになっていましたね。
こちらに関して、(本番の)ビルド時にも適用できるようになりました🎉

これにより、コンパイルの時間が数倍早くなるそうです!
ただ「(beta)」という文字はあるのでオプションをつけるかどうかは慎重に見ていきたいですね🤔

### middleware(.js) のランタイム指定のNode.jsが安定版に

バージョン15.2から、middlewareで下記設定を行うことにより、ランタイムにNode.jsを設定できていました。
こちらが安定版になりました!

```typescript
export const config = {
  runtime: "nodejs", // 安定版に🎉
}

export function middleware(request: NextRequest) {
  // Node.jsの全APIおよびnpmパッケージへのアクセスが可能になりました🥰
  const fs = require("fs")
  // ...
}
```

これにより、Edgeランタイムでは使えなかったNode.jsランタイム特有のAPIを使用できるようになりました🎉

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  最近はVercelはEdgeランタイムよりもNode.jsランタイムに戻していこうという動きがありますね!
</SpeechBubble>

### Typed Routesが安定版に

ここからは、機能というよりはDX(Developer Experience)的な改善部分になります!

まずは、Typed Routesが安定版になりました!
Typed Routesとは、簡単に言うと`next/link`に指定するhrefに対して存在するパスのみの型安全性を提供する機能です!
具体例で言うと、`users/page.tsx`, `users/[userId]/page.tsx,` `settings/page.tsx`という3つのページのみが有る場合、`<Link>`コンポーネントには`"/users"`, `"/users/1"`, `"/settings"`といった文字列しか指定できず、それ以外の文字列の場合は型エラーになってくれます!

```tsx
export function LinksComponent() {
  return (
    <>
      <Link href="/users" />        // => ✅OK
      <Link href="/users/1" />      // => ✅OK
      <Link href="/users/100" />    // => ✅OK
      <Link href="/users?page=2" /> // => ✅OK
      <Link href="/unknown" />      // => ❌型エラー!
    </>
  )
}
```

これにより、存在しないページへのリンク等に対して未然に防げるようになります!
この機能が安定版になったので、`next.config.ts`で指定をして積極的に使っていきたいですね!

```typescript
const nextConfig = {
  typedRoutes: true,
}

export default nextConfig
```

### PageProps、LayoutPropsという型の提供

なんと`page.tsx`、`layout.tsx`自体の型が生成されるようになりました🎉
いつも自分自身でクエリパラメータ等をそれっぽく書いていた部分をNext.js自身に任せることができるのはかなり嬉しいと思います!
具体的には、`PageProps<"users">`のようにジェネリクスでページのURLを指定する形で使用します。

```typescript
// 旧: 自前でパスパラメータ等を定義
export default async function UserPage(props: {
  // 🤮 必要な値のの型を自分で定義
  params: Promise<{ userId: string }>
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  const { userId } = await props.params
  const searchParams = await props.searchParams
  // ...
}

// 新: PagePropsを使用
export default async function UserPage(
  props: PageProps<"users/[userId]">, // ✅ これだけで色々定義される!
) {
  const { userId } = await props.params
  const searchParams = await props.searchParams
  // ...
}
```

型の書き間違え等も無いので、こちらも積極的に使いたいです💪

ただ、1点注意事項です🚨
PageProps(LayoutProps)は型をNext.js自身が動的に生成します。具体的には、`.next/types/`配下に型が生成されます。
開発環境の場合では、サーバーを立ち上げていればファイル構造が変更された際に即時で型を再生成してくれます!
ですが、eslint等での型チェック時には事前にPagePropsが作成される訳ではありません😨

何が困るかと言うと、CI等でeslintなどを実行している場合です。基本的にCIでeslintを実行する際は、`npm install` → `npm run lint`という流れが基本かと思います!
ですが、この流れではPagePropsの型が生成されていないのでエラーになってしまいます🤮
そのような場合の回避策として、`next typegen`というコマンドを用意してくれています!

```bash title="ターミナル"
$ next typegen
```

これにより、コマンド上でPagePropsを生成してくれます!
つまり、PagePropsを使用した状態でeslint等のCIを回したい場合は事前に`next typegen`を入れ込むことを忘れないようにしましょう📝

### `next lint`コマンドが非推奨に

最後に、非推奨化の話です。
今までは、`create-next-app`等でNext.jsのアプリケーションを作成した際、`package.json`の`"lint"`部分には`"next lint"`が設定されていました。
こちらのコマンドが非推奨になりました。もっと言うと、次のメジャーバージョンであるNext.js16で削除されます😱

これからは、`eslint`や`biome`等のLinterのコマンドをそのまま実行するようにしましょう!

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  余談ですが、個人的にはLinterはBiomeよりもOxc(oxlint)に期待しています✨
</SpeechBubble>

## おわりに

今回はNext.jsのバージョン15.5において個人的に気になったポイントを解説しました!

他にも変更点はありますので、ひご自身で公式ドキュメントも見てみてください🙌

<ExternalLink url="https://nextjs.org/blog/next-15-5" />


---

## JavaScriptで戻る・進むを制御する方法（History API解説）

- URL: https://blog.to-ko-s.com/articles/history-api
- 著者: 塩見直樹
- 公開日: 2025-09-21
- タグ: JavaScript

> ブラウザの履歴をJavaScriptで操作できるHistory APIの基本的な使い方と、フォーム入力中のブラウザバック防止の実装例を解説します。


## はじめに

こんにちは、株式会社TOKOSのナオキです！

プロジェクトを実装している際、ブラウザの「戻る」や「進む」の動作に悩まされたことはありませんか？
たとえば**ユーザーがフォーム入力中に誤って戻るボタンを押してしまい、入力内容が消えてしまう**といったケースです。
そんな悩みを解決してくれるのが、今回ご紹介する**History API** です。
History APIを活用すれば、アプリケーションにおける画面遷移をより直感的に、ユーザー体験を損なうことなく実現できます。
この記事では、基本的な使い方から具体的な実装例までをわかりやすく解説していきますので、ぜひ最後まで読んでみてください！

### 対象読者

- 初学者の方
- フロントエンド開発をされている方

## History APIとは

History APIとは、ブラウザが持つ「履歴」をJavaScriptから操作することのできるAPIのことです。
通常、ブラウザの「戻る」「進む」ボタンはユーザーが操作するもので、開発者が直接制御することはできません。
しかし、History APIを使うことで、アプリケーションから以下のような操作が可能になります。

- ブラウザの「戻る」「進む」と同じ動作を実行する
- ページをリロードせずにURLを変更し、履歴に新しい状態を追加する
- 現在の履歴を新しい内容で置き換える
- ユーザーが戻る / 進むを操作したときにイベントを検知して処理を実行する

## History APIの基本的な使用方法

ここでは代表的な使用方法を紹介します！

### 履歴を移動する方法

**history.back() - 1つ前に戻る**

```javascript title="JavaScript"
history.back()
```

ブラウザの「戻る」と同じ動作です。

**history.forward() - 1つ先に進む**

```javascript title="JavaScript"
history.forward()
```

ブラウザの「進む」と同じ動作です。

**history.go() - 指定した数だけ移動する**

```javascript title="JavaScript"
history.go(0) // 現在のページを再読み込みする
history.go(1) // 1つ先に進む
history.go(-2) // 2つ前に戻る
```

負の数で戻り、正の数で進みます。

### 履歴を追加・置き換える方法

**history.pushState() - 履歴を追加**

```javascript title="JavaScript"
history.pushState({ page: 1 }, "", "/page1")
```

指定したURLをリロードしないで更新し、履歴をブラウザに保存できます。
第一引数には、履歴に紐づけて保存して置きたいデータを指定できます。
戻る / 進むで追加した履歴に戻った場合、`window.history.state`で保存した情報を取得できます。
第二引数には、元々ページのタイトルを指定できましたが、現在では対応しているブラウザがほとんどなく無視されてしまいます。
省略することが出来ないので空文字を渡します。
以下ドキュメントからの引用：

> このパラメータは歴史的な理由で存在しており、省略することはできません。空の文字列を渡すと、メソッドの将来の変更に対して安全になります。

第三引数には、URLを指定できます。**同一オリジン**のURLのみ指定可能です。

<SpeechBubble name="ナオキ" icon="/authors/shiomi-naoki.jpg">
  同一オリジンとは、スキーム、ドメイン、ポート番号がすべて同じであることだね！
</SpeechBubble>

**history.replaceState() - 履歴を置き換える**

```javascript title="JavaScript"
history.replaceState({ page: 2 }, "", "/page2")
```

現在の履歴を新しい内容で置き換えることができます。
引数にいれる値は、上記の`pushState()`と同じです。
`pushState()`が新しい履歴を追加するのに対して、`replaceState()`は今の履歴を上書きします。
つまり、履歴の数は増えずに中身だけ差し替わるということです。

### 履歴の変化を検知する方法

**popstate - 履歴の変更を検知**

```javascript title="JavaScript" showLineNumbers
window.addEventListener("popstate", (event) => {
  console.log("ユーザーにて「進む / 戻る」操作が行われました")
  console.log(event.state)
})
```

戻る / 進むで履歴の変更がされたときに発生するイベントです。
`event.state`にて`pushState`や`replaceState`で保存したデータを取得できます。

## フォーム入力中のブラウザバックを防止する方法

Web上のフォームを利用していると、ユーザーが誤って「戻る」ボタンを押してしまい、入力内容が消えてしまうことがあります。
これはユーザーにとって大きなストレスとなります。
この問題をHistory APIを活用して軽減する方法を紹介します。

```javascript title="JavaScript" showLineNumbers
// 履歴を追加して「戻る」で前のページにすぐ戻れないようにする
history.pushState(null, "", "/form")

// popstateイベントで検知して「はい / いいえ」のダイアログを表示
window.addEventListener("popstate", (event) => {
  const result = confirm("入力内容が失われます。本当に戻りますか？")
  if (result) {
    // はい → 実際に戻す
    history.back()
  } else {
    // いいえ → 履歴を積み直して戻らせない
    history.pushState(null, "", "/form")
  }
})
```

最初の`pushState()`でフォームページに入った時点で履歴を1つ追加します。
これにより「戻る」を押してもすぐに前のページへは移動せず、代わりに`popstate`が発火します。
その際「入力内容が失われます。本当に戻りますか？」という確認ダイアログを表示します。
ダイアログの選択によって次のように分岐します。
「はい」→ `history.back()`により前のページへ遷移し、入力中のデータは失われます。
「いいえ」→ 再度`pushState()`で履歴を積み直し、ページに留まっているため入力データは保持されます。
このような仕組みにより、History APIを利用することで「フォーム入力中に誤って戻るボタンを押してしまう」問題を軽減できます。

## さいごに

今回はHistory APIの基本から実際の使い方を紹介しました。
上記で紹介した以外の場面でも応用できるので、きっと役立つはずです。
まずはちょっとした場面から取り入れてみて、自分のプロジェクトに合った使い方を探してみてください。


---

## CSSで波型デザインを作る

- URL: https://blog.to-ko-s.com/articles/css-howto-wave
- 著者: 寺田拓真
- 公開日: 2025-08-26
- タグ: HTML, CSS

> CSSとSVGマスクを使って、フッターやセクション境界を波型デザインにする方法を解説。画像不要で軽量、レスポンシブでも崩れずきれいに表示できます。


## はじめに

みなさん、こんにちは！

「Webサイトの区切りをおしゃれにしたいけど、どうやって波型を作ればいいかわからない…」
そんなふうに悩んだことはありませんか？

フッターやセクションの境界を波型にするだけで、デザインの印象はグッと柔らかくなります。でも実際に実装しようとすると、**画像を使うべきか、CSSだけでやるべきか**、どの方法が一番きれいで軽いのか迷いますよね。
僕自身、今まで調べるのも面倒で画像で作ることが多かったです🐑
画像だとレスポンシブの制御が難しくなることも多いため、CSSやSVGを使う方法もおすすめです！

この記事では、**SVGとCSSマスクを使った波型デザイン**の作り方を、初心者でもわかりやすい形で解説します。

## 波型の作り方

今回は、**SVG + CSSマスク**で作る方法を紹介します。
ポイントは「HTMLに余計なタグを書かず、CSSだけで実装すること」です。

### 実装イメージ

- フッターやセクションの上に波を追加
- 背景色と自然になじむ
- レスポンシブ対応でスマホでもきれいに表示

### コード例

```scss title="SCSS" showLineNumbers
.footer {
  width: 100%;
  background-color: #fff;
  position: relative;
  /* 波の設定 */
  --wave-w: 540px; /* 波の間隔 */
  --wave-h: 60px; /* 波の高さ */
  &::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: var(--wave-h);
    /* ページ背景と同じ色を塗る */
    background: #fbf5f6;
    /* 波型SVGをマスクとして適用 */
    -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 28' preserveAspectRatio='none'>\
<path d='M0,14 C43,0 87,28 130,14 C173,0 217,28 260,14 L260,28 L0,28 Z' fill='black'/>\
</svg>") top / var(--wave-w) var(--wave-h) repeat-x;
    mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 28' preserveAspectRatio='none'>\
<path d='M0,14 C43,0 87,28 130,14 C173,0 217,28 260,14 L260,28 L0,28 Z' fill='black'/>\
</svg>") top / var(--wave-w) var(--wave-h) repeat-x;
    z-index: 1;
  }
}
```

### コードの解説

#### 1. 擬似要素で波型を追加

`::before`や`::after`を使うことで、HTMLの構造を崩さずにデザインだけ追加できます。

#### 2. SVGマスクで高解像度を実現

マスクを使うことで、拡大・縮小してもきれいな波型を維持できます。

#### 3. カスタムプロパティで柔軟に調整

```scss title="SCSS" showLineNumbers
--wave-w: 540px; /* 波の幅 */
--wave-h: 60px; /* 波の高さ */
```

この2つを変えるだけで、デザインに合わせて簡単に調整可能です。

上記コードで作成したフッターがこちらです。

![SVGマスクで作成したフッター上部の波型デザイン](/articles/image-1-1024x128.webp)

フッター上部が波型になっていることがお分かりいただけるかと思います。

## その他の波型の作り方

### clip-pathを使う方法

```css title="CSS" showLineNumbers
.wave {
  clip-path: path("M0,20 Q30,40 60,20 T120,20 V100 H0 Z");
}
```

軽量ですが、複雑な形は難しいです。

### background-imageで実装

```css title="CSS" showLineNumbers
.wave-bg {
  background: url("wave.svg") repeat-x;
  background-size: 540px 60px;
}
```

SVGを画像として背景に設定する方法。
手軽ですが、マスクより自由度は低めです。

## おわりに

CSSとSVGを組み合わせれば、シンプルなコードで美しい波型デザインが実装できます。

- おしゃれなセクション区切りを作りたい
- レスポンシブ対応したい
- コードはシンプルに保ちたい

そんな方には、この方法がおすすめです!


---

## 【zod】v4で使えるようになったオススメのスキーマ

- URL: https://blog.to-ko-s.com/articles/zod-v4-recommend
- 著者: 西原月熙
- 公開日: 2025-08-04
- タグ: React

> zod v4で追加・改善されたオススメのスキーマを紹介。z.int()やz.email()の簡略化、refine()後のチェーン対応、z.templateLiteralやz.stringbool()などの新機能をコード例とともに解説します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
2025年の7月に、zodのv4がリリースされましたね🚀
書き方が変わったり、便利なスキーマが追加されたりしました✨

<ExternalLink url="https://zod.dev/v4" />

そこで、すでにあるが書き方等が変わったスキーマと、新規で便利そうなスキーマ達を紹介しようと思います💪

v3からのマイグレーションガイドも出ているので、一旦バージョンアップだけしたい方はそちらを参考にしてみてください!

<ExternalLink url="https://zod.dev/v4/changelog" />

## オススメのスキーマ

まずは、v3以前から有ったスキーマ達です!

### z.int()

皆さん、`number`がほしいときにフワッと`z.number()`にしていませんか？
`z.number()`だと、少数等も含まれてしまいます😨
明確に「整数」が良い時は`z.int()`を使いましょう！

```typescript
import { z } from "zod"
const schema = z.int()
schema.parse(1) // 成功!
schema.parse(0.1) // エラー!
```

こちらはv3から有りましたが、`z.number().int()`と書く必要がありました。
v4からは`number()`の宣言ナシにそのまま`z.int()`と呼べるようになったので覚えておきましょう💪

また、「整数かつ正の数」が良い場合は、`z.int().positive()`とも書けます！

```typescript
import { z } from "zod"
const schema = z.int().positive()
schema.parse(1) // 成功！
schema.parse(0.1) // エラー!
schema.parse(-1) // エラー!
```

### z.email()

メールアドレスのバリデーションを正規表現で頑張って設定してたりしてないですか??
そんな時に使えるのが`z.email()`です！

こちらは、一般的なメールアドレスの正規表現をカバーしてくれています✨

`z.email()`についても、v3からありました。ですが、こちらも`z.string().email()`の`string()`が不要になっています。
また、カスタムもできるようになりました!!
細かく調整したい方はこちらも参照してください。

```typescript
import { z } from "zod"
/*
 * Zodのデフォルトemailバリデーション（Gmail規則）
 * colinhacks.com/essays/reasonable-email-regex を参照
 */
z.email()
/*
 * ブラウザがinput[type=email]フィールドの検証に使用する正規表現
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
 */
z.email({ pattern: z.regexes.html5Email })

// RFC 5322に準拠したクラシックなemailregex.comの正規表現
z.email({ pattern: z.regexes.rfc5322Email })

// Unicodeを許可する緩い正規表現（国際化メール対応）
z.email({ pattern: z.regexes.unicodeEmail })
```

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  他の`z.string()`系と併用していたスキーマも、同じく`string()`が不要になっているので合わせて覚えておきたいです!
</SpeechBubble>

### extend()

こちらも元からあるもので、スキーマ同士を合成させるような働きでした。
ですが、`merge()`との違いがよく分かってませんでした🤔

```typescript
import { z } from "zod"

const humanSchema = z.object({
  name: z.string().min(1),
  age: z.number().int().positive(),
})

const extendProgramerSchema = humanSchema.extend({
  occupation: z.string().min(1),
})

const mergeProgramerSchema = humanSchema.merge(
  z.object({
    occupation: z.string().min(1),
  }),
)

type Human = z.infer<typeof humanSchema>
// => { name: string; age: number }

type Programer = z.infer<typeof extendProgramerSchema>
// => { name: string; age: number; occupation: string } 🤔

type Programer = z.infer<typeof mergeProgramerSchema>
// => { name: string; age: number; occupation: string } 🤔
```

そういった背景もあってか、v4からは`merge()`の方が非推奨になりました！
これで自信を持って`extend()`を使えるので、皆さん覚えておきましょう🥳

...ただ、スキーマの合成の際のベストプラクティスは「`shape` + スプレッド構文」になったようです!
スプレッド構文を用いた方法が1番パフォーマンスが良いらしいので、僕は極力こちらを使うようにします！

```typescript
import { z } from "zod"

const humanSchema = z.object({
  name: z.string().min(1),
  age: z.number().int().positive(),
})

const occupationSchema = z.object({
  occupation: z.string().min(1),
})

const programerSchema = z.object({
  ...humanSchema.shape,
  ...occupationSchema.shape,
})

type Programer = z.infer<typeof programerSchema>
// => { name: string; age: number; occupation: string } 🥳
```

### refine()

こちらもv3から存在します！
皆さん1回は使ったことがあると思っていて、カスタムのバリデーションを書けるやつですね!

```typescript
import { z } from "zod"

z.string().refine((val) => val.includes("@")) // 「@」が含まれていないとバリデーションエラー!
```

ただ、v3までは`refine()`後に`min()`等のスキーマを追加できませんでした🥲

```typescript
import { z } from "zod"

z.string()
  .refine((val) => val.includes("@"))
  .min(10) // 型エラー🥲
```

ですが、v4からは可能になりました✨

```typescript
import { z } from "zod"

z.string()
  .refine((val) => val.includes("@"))
  .min(10) // 型エラーにならない🥳
```

次からは新しいスキーマの紹介です！！

### z.templateLiteral

説明するよりコードを読んだ方が分かりやすいので記載します！

```typescript
import { z } from "zod"

const email = z.templateLiteral([z.string().min(1), "@", z.string().max(64)])
type Email = z.infer<typeof email>
// => `${string}@${string}`というテンプレートリテラル型になる✨
```

配列の要素をまとめた上でテンプレートリテラル型になってくれる感じです！
パッといい感じの具体例は思い浮かびませんが、覚えておくとどこかしらで使えそうです💪
(上記の例は、`z.email()`で代用できそうなので...)

### z.stringbool()

文字列からいい感じにbooleanに変換したい時ありますよね？
例えば、文字列の`"true"`をbooleanの`true`にしたい時とかです！
そんな時に使えるのがこちらの`stringbool()`です！

```typescript
import { z } from "zod"

const strbool = z.stringbool()

strbool.parse("true") // => true
strbool.parse("1") // => true
strbool.parse("yes") // => true
strbool.parse("on") // => true
strbool.parse("y") // => true
strbool.parse("enabled") // => true

strbool.parse("false") // => false
strbool.parse("0") // => false
strbool.parse("no") // => false
strbool.parse("off") // => false
strbool.parse("n") // => false
strbool.parse("disabled") // => false
```

こんな感じで、`true`っぽい文字列は`true`に、`false`っぽい文字列は`false`になります！

ただ、「自分で決めたいぜ！」って人もいると思います。
そんな人のためにも、自分で定義することが可能になっています。

```typescript
import { z } from "zod"

const strbool = z.stringbool({
  truthy: ["yes", "true", "hoge"],
  falsy: ["no", "false", "huga"],
})

strbool.parse("yes") // => true
strbool.parse("true") // => true
strbool.parse("hoge") // => true

strbool.parse("no") // => false
strbool.parse("false") // => false
strbool.parse("huga") // => false
```

## おわりに

今回は、v4になったzodの紹介をしました！
破壊的な変更も多く、この他にも便利になったり新しい機能等がいっぱい有るので、ぜひご自身でも確認してみてください！


---

## フォームの作り方：input・textarea・buttonの基本

- URL: https://blog.to-ko-s.com/articles/form-basic
- 著者: 寺田拓真
- 公開日: 2025-07-21
- タグ: HTML, CSS

> WordPressでのサイト制作に慣れた人や初心者向けに、フォームの基本要素であるinput・textarea・buttonタグの使い方をやさしく解説。プラグイン頼りから一歩進んで、HTMLの構造を理解したい方におすすめです。


## はじめに

WordPressでのサイト制作に慣れていると、フォームは「Contact Form 7」や「WPForms」といったプラグインに任せてしまうことが多いのではないでしょうか？
私自身もまさにその一人で、これまでフォームの構造に深く踏み込むことはあまりありませんでした。

しかし最近、HTMLやCSS、JavaScriptの基礎をあらためて学び直す中で、「フォームの構造をしっかり理解しておくことの大切さ」に気づきました。
そして、その中でも特に疑問に思ったのが「`button`タグっていつ使うの？」ということです。

普段、リンクの見た目をボタンにするために`a`タグを`button`風にスタイリングすることが多く、逆に`button`タグ自体を使う機会が少なかったという方も多いのではないでしょうか？

この記事では、WordPressユーザーや初学者の方を対象に、フォームの基本タグである`input`、`textarea`、`button`について解説しつつ、「そもそも`button`タグって必要？」という疑問にも答えていきます。

## タグ紹介

### `<input>`タグ

`<input>`タグは、フォームにおけるもっとも基本的な要素のひとつで、さまざまなタイプのデータ入力に対応しています。

```html title="HTML" showLineNumbers
<form>
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username" placeholder="ユーザー名" />
  <br /><br />
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" />
</form>
```

よく使われる`type`属性には以下のようなものがあります。

- `text`：1行のテキスト入力
- `email`：メールアドレスの入力（バリデーション付き）
- `password`：パスワード入力（非表示）
- `checkbox` / `radio`：選択肢
- `submit`：送信ボタン
- `file`：ファイルアップロード
- `date`：日付入力

### `<textarea>`タグ

複数行のテキストを入力したいときに使用するのが`<textarea>`タグです。
例えば、お問い合わせフォームの「ご意見・ご感想」欄などに使われます。

```html title="HTML" showLineNumbers
<form>
  <label for="message">ご意見・ご感想:</label><br />
  <textarea id="message" name="message" rows="5" cols="40" placeholder="ご自由にご記入ください"></textarea>
</form>
```

`<input type="text">`では1行しか入力できませんが、`<textarea>`は複数行入力可能なため、長文入力が想定される場合に適しています。

### `<button>`タグ

`<button>`はクリック可能なボタンを作るタグで、`type`属性によって動作を変えることができます。

```html title="HTML" showLineNumbers
<form onsubmit="alert('送信されました'); return false;">
  <button type="submit">送信</button>
  <button type="reset">リセット</button>
  <button type="button" onclick="alert('独立したボタンがクリックされました');">ボタン</button>
</form>
```

- `submit`：フォームを送信
- `reset`：フォームを初期化
- `button`：独立したボタン（JavaScriptと連携して使う）

## よくある質問

### Q1. `button`タグって実際いつ使うの？`a`タグで見た目を整えるのじゃダメ？

見た目だけなら`a`タグでも問題ありません。
しかし、「ボタン」としての意味的な役割を持たせたい場合やフォーム内での動作（送信・リセット）を定義したい場合は、`button`タグを使うべきです。

`a`タグは本来「リンク（遷移）」を意味するタグなので、JavaScriptなどで無理やりクリックイベントを使って「ボタンのようにする」ことは、アクセシビリティやHTMLの意味論的観点からは避けるべきとされています。

```html title="HTML" showLineNumbers
<!-- 悪い例 -->
<a href="#" onclick="submitForm(); return false;" class="btn">送信</a>

<!-- 良い例 -->
<button type="submit" class="btn">送信</button>
```

### Q2. `input type="submit"`と`button type="submit"`はどう違うの？

両者はどちらもフォームを送信しますが、`button`タグの方が中にHTMLを含められるという利点があります。

```html title="HTML" showLineNumbers
<!-- inputの例 -->
<input type="submit" value="送信" />

<!-- buttonの例 -->
<button type="submit"><img src="icon.png" alt="" /> 送信</button>
```

### Q3. `button`タグを使うときの注意点は？

`<button>`タグのデフォルトの`type`はブラウザによって`submit`になるため、意図しないフォーム送信が起きる可能性があります。

<Callout>JavaScriptでボタンを使うだけの目的なら、必ず`type="button"`を明記しましょう。</Callout>

```html title="HTML" showLineNumbers
<button type="button" onclick="doSomething()">実行</button>
```

また、`button`タグ内にインライン要素（`<span>`や`<img>`など）を含める場合は、ボタンのスタイリングが崩れないようにCSS側での調整も必要です。

## さいごに

WordPressなどのCMSを使ってWeb制作をしていると、ついつい「フォームはプラグインで済ませるもの」「ボタンは見た目が整っていればいい」と考えがちです。
ですが、HTMLの意味や仕様をきちんと理解しておくことで、より柔軟で信頼性のある実装ができるようになります。

特に`button`タグは、「どこでどう使うべきか」が意外と曖昧になりやすい部分ですが、フォームの送信・リセット、またはJavaScript連携など、その用途に応じて正しく使い分けることが重要です。

また、今後Figmaなどのデザインデータから静的HTMLを書き起こす機会がある方や、JavaScriptでDOM操作を行う場面が増える方にとっても、`button`タグの正しい使い方は避けて通れません。

最後に、フォームのマークアップは、見た目以上に「意味」と「動き」が伴う要素です。
プラグインに頼るだけでなく、その中身の構造にも関心を持つことで、フロントエンドの理解が一段と深まります。

ぜひ、この記事をきっかけにフォーム周りのHTMLにも少しずつ慣れていってください！


---

## 【CSS】flex-stretchを理解して、要素をスマートに揃えよう！

- URL: https://blog.to-ko-s.com/articles/flex-stretch
- 著者: 寺田拓真
- 公開日: 2025-07-15
- タグ: HTML, CSS

> Flexboxのalign-items: stretch（flex-stretch）の仕組みを解説します。子要素の高さが自動で揃う理由や、カードレイアウト・メニューでの実用例、効かない条件など注意点もわかりやすく紹介します。


## はじめに

CSSでレスポンシブなレイアウトを実装するうえで、Flexboxは非常に強力なツールです。
特に最近では、Web制作において「`display: flex`」はもはや当たり前のように使われていますよね。

そのFlexboxのプロパティの1つに「`align-items`」がありますが、その初期値である`stretch`（`flex-stretch`）については意外と深く理解されていないことが多いです。

この記事では、「`flex-stretch`」ってそもそも何？という疑問から、どういうときに便利なのか、実際の活用例までを解説します。

Flexboxを使いこなすための第一歩として、「`stretch`」の特性をしっかりと押さえておきましょう！

## flex-stretchの概要

### Flexboxの基本

まず、Flexboxの基本的な仕組みをおさらいしておきましょう。

```css title="CSS" showLineNumbers
.container {
  display: flex;
}
```

上記のように`display: flex`を指定すると、その子要素たちは「flexアイテム」として並びます。
このとき、**子要素（アイテム）同士をどのように揃えるか**を制御するのが、以下の2つのプロパティです。

- `justify-content`：主軸（通常は横）の揃え方
- `align-items`：交差軸（通常は縦）の揃え方

この中で、今回注目するのが`align-items: stretch;`です。

### align-items: stretchとは？

`align-items: stretch;`は、**親要素の高さに合わせて、子要素（flexアイテム）の高さを自動で引き伸ばす**動作をします。

```css title="CSS" showLineNumbers
.container {
  display: flex;
  align-items: stretch;
}
```

これは`align-items`の初期値（デフォルト値）でもあり、特別に指定しなくても適用されています。

## どういうところで使うのか？

### 実用例1：高さを揃えたいカードレイアウト

よくあるのが、**3列のカードレイアウトで各要素の高さを揃えたいとき**です。

例えば以下のようなHTMLとCSSがあったとします。

```html title="HTML" showLineNumbers
<div class="card-container">
  <div class="card">カード1</div>
  <div class="card">カード2（中のテキストが多い）</div>
  <div class="card">カード3</div>
</div>
```

```css title="CSS" showLineNumbers
.container {
  display: flex;
  align-items: stretch;
}
```

この状態では、テキストの量が多いカードだけ高さが伸びて、他のカードはそのままです。
ここで`align-items: stretch;`を指定すると、**全てのカードの高さがもっとも高いカードに合わせて引き伸ばされます**。

つまり、視覚的に整った3列レイアウトを作ることができるわけです。

### 実用例2：ボタンやメニューを均等な高さに

ナビゲーションメニューやボタンの並びなどでも、要素の高さを揃えたいケースがあります。
特に、デザイン上「高さが揃っている」ことで**UIの一体感**が出ます。

以下のような例でも使えます。

```css title="CSS" showLineNumbers
.menu {
  display: flex;
  align-items: stretch;
}

.menu-item {
  flex: 1;
  padding: 10px;
}
```

こうすることで、メニューのテキスト量に関係なく、**すべてのメニューが同じ高さに**なり、整った印象を与えられます。

## 注意点

ただし、flexアイテムに`height`を明示的に指定してしまうと、`stretch`の効果は無効になります。
つまり、**stretchの効果は「高さを指定していないflexアイテム」にしか効かない**ことに注意が必要です。

```css title="CSS" showLineNumbers
.card {
  height: 200px; /* この指定があると stretch は効かなくなる */
}
```

また、`align-items: stretch`が効くのは「ブロック要素」的な性質を持ったアイテムに限ります。
インライン要素（例：`span`）には適用されないので注意しましょう。

## 終わりに

Flexboxは便利だけど、「細かい動作がよく分からない」ということ、ありますよね。
`align-items: stretch;`は、**実は初期状態で効いている**けれど、意識して使うと「整ったデザイン」「一体感のあるレイアウト」を作るのに非常に役立ちます。

特に、要素の高さをそろえたい場合は、**わざわざJavaScriptで高さを揃えるような処理をせずとも、CSSだけで完結できる**のが大きなメリットです。

「なんだかレイアウトがガタつくな…」というときは、ぜひ一度`align-items: stretch`を疑ってみてください。

Flexboxをより深く理解して、効率的で美しいレイアウトを目指しましょう！


---

## px指定に限界を感じたら！大画面対応に強い相対指定のすすめ

- URL: https://blog.to-ko-s.com/articles/relative-specification
- 著者: 寺田拓真
- 公開日: 2025-07-12
- タグ: HTML, CSS

> px指定だけじゃない！vwやclampを使った相対指定で、画面サイズに左右されない美しいWebデザインを初心者向けに解説します。


## はじめに

みなさん、こんにちは！

Web制作でよく使う「`px（ピクセル）`」指定。
僕もフォントサイズや画像サイズ、`gap`、`padding`などを指定する時に多用しています。
これはとても分かりやすいですが、画面サイズが変わるとバランスが崩れることもあります。

例えば、スマホではちょうど良かった文字サイズが、大きなモニターでは小さく見えたり、逆に大きすぎたり。
コンテンツの幅が空きすぎてしまったり。

そこで今回は、「相対指定」を使って、**どんな画面サイズでもバランスのとれたデザイン**を作る方法を紹介します。

## 相対指定について、基本とその使いどころ

Webサイトのデザインでは、ボタンの大きさ、文字サイズ、余白の幅など、あらゆる「サイズ」を指定する必要があります。
このときに使うのが「単位」です。

多くの初学者が最初に出会うのは、px（ピクセル）という単位でしょう。
`px`は非常にわかりやすく、「1px=画面上の1ドット」なので感覚的に使いやすいです。

しかし、pxにはある欠点があります。

それは、**画面サイズに応じて変化しない**ということです。

たとえば、以下のようなケースを考えてみましょう：

- **スマホで見たとき**： 文字が大きすぎて画面からはみ出る
- **超ワイドモニターで見たとき**： 文字が小さすぎて読みにくい

このようなときに便利なのが、**相対指定の単位**です。
相対指定とは、**「環境に応じてサイズが変わる」柔軟な指定方法**です。

### 主な相対指定の単位とその特徴

| 単位  | 説明                                   | 使いどころ                                          |
| ----- | -------------------------------------- | --------------------------------------------------- |
| `vw`  | Viewport Width：画面の横幅の1%         | フォントサイズやpaddingなど画面幅に比例させたいとき |
| `vh`  | Viewport Height：画面の高さの1%        | セクションの高さ指定や、フルスクリーン表示の調整    |
| `%`   | 親要素に対する比率                     | 幅や高さを柔軟に調整したいとき                      |
| `em`  | 親要素のフォントサイズを基準           | ボタン内のpaddingやmarginに便利                     |
| `rem` | HTMLのルート要素のフォントサイズを基準 | グローバルに統一感を出したいときに有効              |

これらの単位を組み合わせて使うことで、**どの画面サイズでも美しく整ったデザイン**が実現できます。

### なぜ`vw`を使うと良いのか？

例えば、フォントサイズを`3vw`にすると、**画面幅が1000pxなら30px**、2000pxなら60pxになります。

つまり、**文字が画面に対して常に「同じくらいの大きさ」に見える**のです。
これは、**画面幅が変わってもデザインの比率が崩れない**という大きなメリットになります。

## 実例：px指定とvw指定の違い

### 例1：フォントサイズの比較

#### px指定

```css title="CSS"
h1 {
  font-size: 36px;
}
```

この指定だと、スマホでも大型ディスプレイでも常に36px。
スマホでは大きく見えても、モニターでは非常に小さく感じるかもしれません。

#### vw指定

```css title="CSS"
h1 {
  font-size: 4vw;
}
```

この場合、画面幅が：

- 375px（iPhone）→ 4vw = 約15px
- 1920px（デスクトップ）→ 4vw = 約76px

というように、**自然なサイズ感で文字が表示**されます。
**「画面に対しての見た目の大きさ」が一定に保たれる**のがポイントです。

### 例2：paddingやgapの相対指定

相対指定は**文字サイズだけでなく、余白や間隔にも使えます。**

```css title="CSS"
.card {
  padding: 2vw;
  gap: 1.5vw;
}
```

これにより、カードの内側の余白や中身同士の間隔も、**画面に対してバランス良く調整**されます。

例えば、以下のようなレイアウトで使えば、
大きなモニターでも「間延び感」がなく、スマホでも「詰まりすぎない」レイアウトになります。

## 画面幅が狭いときの注意点

相対指定はとても便利ですが、**万能ではありません**。
特に、画面の幅が極端に狭くなるスマホや一部のタブレットでは、**思わぬトラブルが起きることがあります。**

### 相対指定が原因で文字が小さすぎる問題

たとえば以下のようなコードを見てみましょう

```css title="CSS"
p {
  font-size: 2vw;
}
```

これは、画面の横幅に対して2%の大きさで文字サイズを決めるという意味です。
一見、柔軟で良さそうに見えますよね？

しかし、画面幅が小さい場合どうなるでしょう？

- iPhone（横幅375px）で`2vw` → 約7.5px
- 古いスマホ（横幅320px）で`2vw` → 約6.4px

これでは、**文字が読めないほど小さくなる**ことが多く、ユーザーにとってはストレスの原因になります。

### clamp() を使って最小値・最大値を設定しよう

この問題を解決するために活用したいのが、**CSSの`clamp()`関数**です。

`clamp()`は、3つの値を指定します

```css title="CSS"
clamp(最小値, 推奨値, 最大値)
```

たとえば以下のように書くと

```css title="CSS"
p {
  font-size: clamp(14px, 2vw, 24px);
}
```

- 最小でも **14px** は確保される
- 通常は **画面幅の2%** を基準
- 最大でも **24px** を超えない

このように、**柔軟性と読みやすさを両立**できます。

clampについては以下の記事でも解説しています。

<InternalLink slug="layout-no-breakpoint" />

### 他にも気をつけたいポイント

**ボタンやフォームも相対指定だけに頼りすぎない**
小さくなりすぎるとタップしづらくなります。最低幅や高さを`min-width`, `min-height`で設定すると良いです。

**余白（padding・margin）が詰まりすぎる可能性**
狭い画面で`padding: 2vw`だと余白が極端に狭くなって、窮屈な印象になります。

対策としてはこちら

```css title="CSS"
div {
  padding: clamp(10px, 2vw, 30px);
}
```

## おわりに

この記事では、相対指定（特に`vw`）の使い方とメリットについて紹介してきました。

初心者のうちは「pxで全部書いた方が楽そう」と思いがちですが、少し慣れてくると、**相対指定の柔軟さ・便利さに驚くはず**です。

とくに、デバイスごとに画面幅がバラバラな現代では、「すべての環境で見やすく整ったレイアウト」を実現するためには、**相対指定を避けて通ることはできません。**

ただし、相対指定だけに頼ると、**「可変性」ゆえに設計が崩れてしまうリスク**もあります。
そのため、実際には：

- **相対指定で全体のスケーラビリティを確保**
- **`clamp()`や`min-width`などで必要な制限をつける**

という「**バランス型の設計**」がとても重要になります。


---

## 【HTML】Web制作でよく使うHTMLタグ7選とそのTipsについて

- URL: https://blog.to-ko-s.com/articles/html-tag
- 著者: 小田優真
- 公開日: 2025-07-06
- タグ: HTML, CSS

> 初学者向けにWeb制作で頻出のHTMLタグ7つを厳選解説！それぞれの使い方と実務で役立つちょっとしたTipsも紹介します。


## はじめに

はじめまして！株式会社TOKOSのユウマです！

本日は**基礎中の基礎、HTMLタグについて**ご紹介します。
HTMLタグは100種類以上あり「どのタグを使えばいいの？」「このタグにはどんな意味があるの？」と疑問に思ってしまう初学者の方も多いはずです。

とはいえ、今すぐにすべてのHTMLタグを覚える必要はなく、よく使うHTMLタグから徐々に覚えていけば大丈夫です。
この記事では、Web制作の現場でよく使われるHTMLタグを7個紹介するとともに、各HTMLタグを使用する際のTips（コツ）についてもご紹介します。

## よく使うHTMLタグ7選

### 1.`<h1>`~`<h6>`：見出しタグ

**使用例**

```html title="index.html" showLineNumbers
<h1>タイトル</h1>
<h2>タイトル</h2>
<h3>タイトル</h3>
<h4>タイトル</h4>
<h5>タイトル</h5>
<h6>タイトル</h6>
```

![h1からh6までの見出しタグの表示結果](/articles/image.webp)

**💡Tips：**

- 「h」とは、「heading（ヘディング）」の略です。
- 見出しを作成する際に使用するタグで、**`<h1>`は1ページに1つだけ**となります！
- `<h2>`~`<h6>`の順で小さな見出しになっていきます。
- 見出しは階層構造で使うと、検索エンジンやスクリーンリーダーにも優しい構造になります。

### 2.`<p>`：段落

**使用例**

```html title="index.html" showLineNumbers
<p>これは一つ目の段落です</p>
<p>これは二つ目の段落です</p>
```

![pタグで囲んだ2つの段落の表示結果](/articles/image-1-1.jpg)

**💡Tips：**

- 「p」とは「paragraph（パラグラフ）」の略です。
- pタグで囲んだ文章の前後に1行改行が生まれます。
- **段落を分けたいならpタグ**を使い、**文章中に改行する場合はbrタグ**を使いましょう！

### 3.`<a>`：リンク

**使用例**

```html title="index.html" showLineNumbers
<a href="https://example.com">外部サイトへ遷移</a>
```

![aタグで作成したリンクの表示結果](/articles/image-2-1.webp)

**💡Tips：**

- 「a」とは、「anchor（アンカー）」の略です。
- リンクを埋め込む際に使用するタグで、href属性の中にURLを書いて遷移先のリンクを指定します。
- 別タブで開きたいときは`target="_blank"`をつけましょう！

```html title="index.html" showLineNumbers
<a href="https://example.com" target="_blank" rel="noopener">外部サイトへ遷移</a>
```

- アクセシビリティのためにも「リンク先が何かわかるテキスト」にしましょう。
  🙅🏻‍♂️「こちらをクリック」→ 🙆🏻‍♀️「料金表はこちら」

### 4.`<img>`：画像

**使用例**

```html title="index.html" showLineNumbers
<img src="sample.jpg" alt="製品の写真" />
```

**💡Tips：**

- 「img」とは「image（イメージ）」の略です。
- 画像を表示する際に使用します。
- `src`属性は必須の属性で、ファイル名を指定します。
- `alt`属性は必須ではありませんが、アクセシビリティの観点で**画像の代わりになる大切な説明文**です。
- サイズ指定はHTMLではなく**CSSで管理**するのが現代的です。

### 5.`<ul>`・`<li>`・`<ol>`：リスト

**使用例**

```html title="index.html" showLineNumbers
<ul>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
</ul>

<ol>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
</ol>
```

![ulタグとolタグによるリストの表示結果](/articles/image-3.webp)

**💡Tips：**

- 「ul」とは「unordered list（アンオーダードリスト）」の略です。
- **順序のないリストを表示**する際に使用します。
- 「ol」とは「ordered list（オーダードリスト）」の略です。
- **順序のあるリストを表示**する際に使用します。
- 「li」とは「list item（リストアイテム）」の略です。
- リストの**各項目を記述する際に使用**し、ulタグもしくはolタグの入れ子として使用します。
- ナビゲーションなどにも使えますが、その場合は`<nav>`とセットで意味づけをします。

### 6.`<div>`：ブロックのグループ化

**使用例**

```html title="index.html" showLineNumbers
<div class="card">
  <p>divタグで囲まれた文章です。</p>
  <p>divタグで囲まれた文章です。</p>
</div>
```

![divタグでグループ化した要素がブロックとして表示される結果](/articles/image-4-1.webp)

**💡Tips：**

- 「div」とは、「division（ディビジョン）」の略です。
- divタグには特別な意味はありませんが、要素をグループ化する際に使用します。
- **囲んだ要素をブロック化**し、下に積まれていきます。

### 7.`<span>`：インライン装飾用のタグ

**使用例**

```html title="index.html" showLineNumbers
<span>spanタグで囲まれた文章です。</span> <span>spanタグで囲まれた文章です。</span>
```

![spanタグで囲んだ要素がインラインで横並びに表示される結果](/articles/image-6-1.webp)

**💡Tips：**

- 「span」とは、「範囲（領域）をもたせる」という意味で略称ではありません。
- **囲んだ要素をインライン化**し、下に積まれず横に並びます。
- spanタグは**行の中で一部分だけを装飾したいとき**に使います。
- 意味を持たないタグなので、装飾以外の使い道には注意しましょう。

## まとめ

今回ご紹介した7つの基礎的なタグは、**Web制作の現場で日常的によく使うものばかり**です。

| タグ                 | 用途                   |
| -------------------- | ---------------------- |
| `<h1>`〜`<h6>`       | 見出し構造を作る       |
| `<p>`                | 段落（本文）を書く     |
| `<a>`                | リンクを作る           |
| `<img>`              | 画像を表示             |
| `<ul>` `<ol>` `<li>` | リストを作る           |
| `<div>`              | レイアウト・ブロック化 |
| `<span>`             | テキストの一部を装飾   |

ただ覚えるだけでなく、「**どんなときに、どう使うのが適切か？**」を理解しておくことで、よりキレイで意味のあるHTMLが書けるようになります！


---

## GSAPの保守性を上げるEffectsの紹介

- URL: https://blog.to-ko-s.com/articles/gsap-effects
- 著者: 杉田侑祐
- 公開日: 2025-06-30
- タグ: JavaScript

> GSAPのEffects機能でアニメーションのコード管理を劇的改善。registerEffectの設定オプション（name, effect, defaults, extendTimeline）を実例とともに詳しく解説。大規模開発・チーム開発必須のテクニック。


こんにちは、株式会社TOKOSのスギタです！
今回はGSAPのPropertiesの中のEffectsについて紹介します。
初めて聞いた方も多いと思います。
アニメーションのコード管理・保守性・再利用性を向上させてくれます！

## はじめに

### 対象読者

- JavaScriptを用いたアニメーションに興味のある方

この記事で扱わない内容:

- JavaScriptの基本的な使用方法
- GSAPの使用方法やインストール方法

## Effectsの概要

GSAPのEffects機能は、アニメーションの**コード管理・保守性・再利用性**を劇的に向上させる強力な機能です。大規模なWebプロジェクトや複数人での開発において、その真価を発揮します。

### なぜEffectsが必要なのか？

従来のアニメーション実装では以下の問題が発生します！

```javascript title="JavaScript" showLineNumbers
// 悪い例：同じようなアニメーションがあちこちに散らばる
gsap.to(".modal", { duration: 0.3, opacity: 0, scale: 0.8, ease: "back.in" })
gsap.to(".popup", { duration: 0.3, opacity: 0, scale: 0.85, ease: "back.in" }) // 微妙に違う
gsap.to(".tooltip", { duration: 0.25, opacity: 0, scale: 0.8, ease: "back.in" }) // また微妙に違う
```

Effectsを使うことでこのような問題を解決できます。

- **統一性**: 同じ効果を確実に再現
- **保守性**: 一箇所の変更で全体に反映
- **可読性**: 意図が明確になる

## Effectsの解説

まずはEffectsを使用した例を紹介します。

```javascript title="JavaScript" showLineNumbers
// 1. Effectを登録
gsap.registerEffect({
  name: "fadeOut", // ① nameの登録
  effect: (targets, config) => {
    // ② アニメーションの処理を書く
    return gsap.to(targets, {
      duration: config.duration,
      opacity: 0,
    })
  },
  defaults: { duration: 1 }, // ③ デフォルト値を設定
})

// 2. Effectを使用
gsap.effects.fadeOut(".my-element")
```

上記のようにEffectを登録していく流れになります。
ここから① → ② → ③の解説をしていきます！

### ① nameの登録

これがエフェクトの名前になります。
一意である必要があります！
このnameが呼び出し時のメソッド名になります！

```javascript title="JavaScript" showLineNumbers
// 例
gsap.effects.fadeOut()
```

### ② アニメーションの処理を書く

ここがeffect関数の重要な部分になります！

`effect: (targets, config) => {…}`のように記述していきます！

引数の内容は以下のとおりです。

- `targets`
  - アニメーションする要素（`.my-element`が渡される）
- `config`
  - 実行時の設定（`{ duration: 1 }`などが渡される）

```javascript title="JavaScript" showLineNumbers
// 使用例
gsap.effects.fadeOut(".element", { duration: 2, delay: 0.5 })
```

またeffect内では必ずGSAPアニメーションを返す必要があります！

```javascript title="JavaScript" showLineNumbers
// 正しい例
effect: (targets, config) => {
  return gsap.to(targets, { ... }); // GSAPアニメーションを返す
}

// 間違った例
effect: (targets, config) => {
  gsap.to(targets, { ... }); // returnが無い
  // undefined が返される
}
```

### ③ デフォルト値を設定

呼び出し時にConfigの値を省略した場合に使われるデフォルト値を設定します！

```javascript title="JavaScript" showLineNumbers
// 上書きしたい時
gsap.effects.fadeOut(".element", { duration: 2 })
```

### その他

呼び出し時は一部だけ上書きして呼び出すことも可能です！

```javascript title="JavaScript" showLineNumbers
gsap.registerEffect({
  name: "customFade",
  effect: (targets, config) => {
    return gsap.to(targets, {
      duration: config.duration,
      opacity: config.opacity,
      scale: config.scale,
      ease: config.ease,
    })
  },
  defaults: {
    duration: 0.5,
    opacity: 0,
    scale: 0.8,
    ease: "power2.inOut",
  },
})

// 呼び出し時に一部だけオーバーライド
gsap.effects.customFade(".customFade", {
  duration: 1.2, // 他はdefaultsが使用される
})
```

またTimelineも使用可能です！

```javascript title="JavaScript" showLineNumbers
gsap.registerEffect({
  name: "timeline",
  effect: (targets, config) => {
    const tl = gsap.timeline()

    tl.set(targets, { transformOrigin: "center center" })
      .to(targets, { duration: 0.1, scale: 1.1 })
      .to(targets, { duration: 0.2, scale: 1, rotation: 360 })

    return tl
  },
})
```

## さいごに

GSAPのEffectsは単なる機能ではなく、**アニメーションコードの設計思想**を変える重要な仕組みになります。
大規模なサイト制作や多くのアニメーションを実装する際はEffectsで管理することをおすすめします！


---

## GSAPのUtilsメソッド紹介

- URL: https://blog.to-ko-s.com/articles/gsap-utility
- 著者: 杉田侑祐
- 公開日: 2025-06-30
- タグ: JavaScript

> GSAPのUtilsメソッドの中から、clampやmapRange、random、snapなど実務で使えるおすすめのユーティリティ関数を紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はGSAPのUtilsの中からおすすめのメソッドを紹介します。
GSAPはCore機能やScrollTriggerが多く使われると思いますが、Utilsもかなり使いやすいメソッドが用意されています。
その中でも使用できそうなものを紹介していきます。

### 対象読者

- JavaScriptを用いたアニメーションに興味のある方

この記事で扱わない内容:

- JavaScriptの基本的な使用方法
- GSAPの使用方法やインストール方法

## Utilsの概要

### GSAP Utils 公式概要（日本語翻訳）

`gsap.utils`は、驚くほど役立つユーティリティ関数にアクセスできます。これらの関数の多くは、オプションで関数を返すことができるため、GSAPの関数ベース機能を活用して、直接Tweenに組み込むことができます。この場合、すべてのターゲットに同じ終了値を使用するのではなく、各ターゲットに対して一度ずつ呼び出されます。

この「関数を返す」という機能が、GSAPのutilsの特徴になります。

```javascript title="JavaScript" showLineNumbers
// 通常の使い方：全ての要素に同じ値
gsap.to(".box", { x: 100 }) // すべてのボックスが同じ位置に移動

// 関数を返す使い方：各要素に異なる値
gsap.to(".box", {
  x: () => gsap.utils.random(-200, 200), // 各ボックスが異なるランダム位置に移動
})

// またはこのように
gsap.to(".box", {
  x: gsap.utils.random(-200, 200, true), // trueで関数として返す
})
```

このようにUtilsは.toメソッドなどCore機能と相性が良いです！
置き換えられる箇所は積極的に使用していきたいところです！

## Utilsの紹介

### clamp() - 値を範囲内に制限する

値が範囲を超えないように制限してくれます！
**使いどころ**: 要素が画面からはみ出さないようにしたい時など

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
gsap.utils.clamp(0, 100, 150) // 結果: 100 (150は大きすぎるので100に)
gsap.utils.clamp(0, 100, -10) // 結果: 0 (マイナスは0に)
gsap.utils.clamp(0, 100, 50) // 結果: 50 (そのまま)

// 実用例：ボックスを画面からはみ出させない
gsap.to(".box", {
  x: 500,
  modifiers: {
    x: gsap.utils.clamp(0, 300), // 0〜300pxの範囲内に制限
  },
})
```

### mapRange() - 数値を別の範囲に変換する

ある範囲の数値を、別の範囲の数値に変換します。
**使いどころ**: スクロール量で何かを動かしたい時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
// 0〜100の範囲の「50」を、0〜360の範囲に変換すると？
gsap.utils.mapRange(0, 100, 0, 360, 50) // 結果: 180

// 実用例：スクロール量を回転角度に変換
window.addEventListener("scroll", () => {
  const scrollY = window.scrollY
  const rotation = gsap.utils.mapRange(0, 1000, 0, 360, scrollY)
  gsap.set(".wheel", { rotation: rotation })
})
```

### random() - ランダムな値を作る

ランダムな数値や配列の要素を取得します。
**使いどころ**: パーティクルアニメーションや、バラバラな動きを作りたい時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
gsap.utils.random(0, 100) // 0〜100のランダムな数
gsap.utils.random(["red", "blue", "green"]) // 配列からランダム選択

// 実用例：複数の要素をランダムな位置に
gsap.to(".box", {
  x: () => gsap.utils.random(-200, 200), // 各要素に異なるランダム値
  y: () => gsap.utils.random(-100, 100),
  duration: 1,
})
```

### snap() - 値を決まった単位に合わせる

値を指定した単位や値に「スナップ」（ぴったり合わせる）します。
**使いどころ**: グリッドに合わせたり、きれいに整列させたい時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
gsap.utils.snap(10, 23) // 結果: 20 (10の倍数で一番近い値)
gsap.utils.snap(50, 73) // 結果: 50
gsap.utils.snap([0, 25, 50, 100], 30) // 結果: 25 (配列の中で一番近い値)

// 実用例：ドラッグした要素をグリッドに合わせる
gsap.to(".draggable", {
  x: 123,
  modifiers: {
    x: gsap.utils.snap(50), // 50px単位でスナップ
  },
})
```

### wrap() - 値をループさせる

値が範囲を超えたら、最初に戻ります。
**使いどころ**: 無限スクロールやカルーセルを作る時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
gsap.utils.wrap(0, 100, 150) // 結果: 50 (100を超えた分は最初から数える)
gsap.utils.wrap(0, 100, -10) // 結果: 90

// 配列での使用
const colors = ["red", "green", "blue"]
gsap.utils.wrap(colors, 5) // 結果: "blue" (5番目は存在しないので、3番目に戻る)

// 実用例：無限に繰り返すアニメーション
gsap.to(".ball", {
  x: 1000,
  duration: 5,
  ease: "none",
  modifiers: {
    x: gsap.utils.wrap(0, 400), // 0〜400pxの範囲でループ
  },
})
```

### toArray() - いろんな要素を配列にする

CSSセレクターや要素を配列に変換します。
**使いどころ**: 複数の要素を一度にアニメーションしたい時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
const boxes = gsap.utils.toArray(".box") // class="box"の要素を全て配列に
const items = gsap.utils.toArray("#item1, #item2") // 複数のIDを配列に

// 実用例：複数の要素を順番にアニメーション
const elements = gsap.utils.toArray(".item")
gsap.from(elements, {
  y: 50,
  opacity: 0,
  duration: 0.5,
  stagger: 0.2, // 0.2秒ずつずらして実行
})
```

### interpolate() - 2つの値の間を補間する

2つの値の間の中間値を計算します。
**使いどころ**: 色のグラデーションやプログレスバーを作る時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
gsap.utils.interpolate(0, 100, 0.5) // 結果: 50 (中間地点)
gsap.utils.interpolate("#ff0000", "#0000ff", 0.5) // 赤と青の中間色

// 実用例：スクロールに合わせて色を変える
const colorChanger = gsap.utils.interpolate("red", "blue")
window.addEventListener("scroll", () => {
  const progress = window.scrollY / 1000 // スクロール進行度
  const color = colorChanger(progress)
  document.body.style.backgroundColor = color
})
```

### shuffle() - 配列をシャッフルする

配列をランダムに並び替えます。
**使いどころ**: ランダムな順番で何かを表示したい時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
const colors = ["red", "green", "blue"]
gsap.utils.shuffle(colors)
console.log(colors) // ランダムに並び替えられた配列

// 実用例：要素をランダムな順番でアニメーション
const boxes = gsap.utils.toArray(".box")
gsap.utils.shuffle(boxes) // 順番をシャッフル
gsap.from(boxes, {
  scale: 0,
  duration: 0.3,
  stagger: 0.1, // シャッフルされた順番で表示
})
```

### pipe() - 複数の処理を連続で実行

複数の関数を順番に実行します。
**使いどころ**: 複雑な計算を段階的に処理したい時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
const transform = gsap.utils.pipe(
  gsap.utils.clamp(0, 100), // まず0〜100に制限
  gsap.utils.mapRange(0, 100, 0, 360), // 次に0〜360度に変換
)

const result = transform(150) // 150 → 100 → 360

// 実用例：マウス位置を色に変換
const mouseToColor = gsap.utils.pipe(
  gsap.utils.clamp(0, window.innerWidth), // 画面幅に制限
  gsap.utils.mapRange(0, window.innerWidth, 0, 1), // 0〜1に変換
  gsap.utils.interpolate("#ff0000", "#0000ff"), // 色に変換
)

document.addEventListener("mousemove", (e) => {
  document.body.style.backgroundColor = mouseToColor(e.clientX)
})
```

### normalize() - 値を0〜1の範囲に変換

値を0〜1の範囲（パーセンテージ）に変換します。
**使いどころ**: プログレスバーや進行度を表示したい時

```javascript title="JavaScript" showLineNumbers
// 基本的な使い方
gsap.utils.normalize(0, 100, 25) // 結果: 0.25 (25%)
gsap.utils.normalize(0, 100, 50) // 結果: 0.5 (50%)

// 実用例：プログレスバー
window.addEventListener("scroll", () => {
  const maxScroll = document.body.scrollHeight - window.innerHeight
  const progress = gsap.utils.normalize(0, maxScroll, window.scrollY)
  gsap.set(".progress-bar", { scaleX: progress })
})
```

## さいごに

今回はGSAPのUtilsの紹介をしました！
どれもかゆいところに手が届くメソッドだと思います！
どれも使う場面がありそうなので覚えておいて損は無いかと思います！


---

## HTML・CSSでよくやるNG行動と改善法8選

- URL: https://blog.to-ko-s.com/articles/html-css-ng
- 著者: 寺田拓真
- 公開日: 2025-06-13
- タグ: HTML, CSS

> HTML・CSSでやりがちなNG行動8選と改善方法を初心者向けに解説。brタグの連打やdivの乱用など、保守性・SEO・アクセシビリティに悪影響を与えるコーディングの改善法を紹介します。


## はじめに

こんにちは、たくまです！

Web制作を始めたばかりの方にとって、HTMLやCSSは最初の登竜門ですよね。
ネットで見つけたサンプルコードをそのままコピペしたり、うまく表示されることだけを目的に書いたコードは、見た目は動いていても中身がめちゃくちゃ…なんてことがよくあります。

こうした「NG行動」は、**保守性・拡張性・SEO・アクセシビリティ**に悪影響を与えるだけでなく、**学習の妨げにもなります**。

この記事では、**初心者がやりがちなHTML・CSSのNG行動8選**を取り上げ、それぞれの「なぜNGか」「どう直すか」を説明します。

## 各NG行動

### NG1：`<br>`を連打してスペースを作る

```html
<p>こんにちは<br /><br /><br />お元気ですか？</p>
```

#### 改善方法

```html
<p>こんにちは</p>
<p>お元気ですか？</p>
```

```css
p {
  margin-bottom: 1.5em;
}
```

`<br>`は「行の切れ目」を示すものであり、文章の構造を区切る目的には向いていません。たとえば、小説やポエムのような一文ごとの改行には適していますが、見た目の余白目的で使用するのは避けましょう。**CSSでスペースを設計する癖をつけると、レイアウトの柔軟性が劇的に高まります。**

### NG2：すべて`<div>`で囲う

```html
<div class="header">見出し</div>
<div class="main">本文</div>
```

#### 改善方法

```html
<header>見出し</header>
<main>本文</main>
```

HTML5からは「意味のあるタグ（セマンティックタグ）」が豊富に用意されており、Googleのクローラーやスクリーンリーダーもこれらを理解して処理します。構造的に正しいタグを使うことで、**検索エンジン対策やアクセシビリティの向上にもつながります。**

### NG3：インラインスタイルを多用する

```html
<h1 style="color:red;">タイトル</h1>
```

#### 改善方法

```html
<h1 class="main-title">タイトル</h1>
```

```css
.main-title {
  color: red;
}
```

インラインスタイルは「一度だけ」「急ぎで修正する」場合などに限って使うべきです。大量の要素にスタイルを適用する場合や、後からの調整が必要な場面では**スタイルの一元管理ができなくなり、大混乱の元**になります。クラス設計とCSSファイルをしっかり分ける習慣を持ちましょう。

### NG4：適当なクラス名（box1、testなど）

```html
<div class="box1">内容</div>
```

#### 改善方法

```html
<div class="product-card">内容</div>
```

クラス名は**コードを読む人へのメッセージ**でもあります。命名に意味があればあるほど、構造が直感的に理解できるようになります。BEM記法（例：`.product__title--highlight`）なども習得すると、大規模サイトにも対応しやすくなります。
上記のNG行動は特にネットのコードをコピペしたときにしがちなので注意しましょう。

### NG5：画像にサイズ指定がない

```html
<img src="sample.jpg" alt="画像" />
```

#### 改善方法

```html
<img src="sample.jpg" alt="画像" width="600" height="400" />
```

画像のサイズを指定しないと、ページの読み込み中に**突然コンテンツがずれて表示される**ことがあります。これが「CLS（レイアウトのズレ）」というUX悪化の一因です。**あらかじめサイズを指定することで、ページ全体が安定して表示されます。**

### NG6：`!important`を多用する

```css
.button {
  color: white !important;
}
```

#### 改善方法

```css
.btn-primary {
  color: white;
}
```

`!important`は最終手段です。あまりにも多用すると、**どのCSSが効いているのか分からなくなり、バグの温床**になります。どうしても必要な場面（例：サードパーティCSSの上書きなど）以外は使わないようにしましょう。

### NG7：背景画像に意味のある画像を使う

```css
.hero {
  background-image: url("main.jpg");
}
```

#### 改善方法

```html
<img src="main.jpg" alt="製品Aのイメージ画像" />
```

背景画像には`alt`が付けられないため、**意味のある画像や情報を含む画像には不向き**です。検索エンジンやスクリーンリーダーが画像の内容を理解できないため、重要な画像は`<img>`タグで扱いましょう。

### NG8：スタイルに`id`を使用している

```css
#header {
  background-color: blue;
}
```

#### 改善方法

```css
.header {
  background-color: blue;
}
```

`id`は1ページ内で唯一であるべきで、**JavaScriptやアンカーリンクのターゲット用に使用**するのが基本です。CSSはクラスベースで管理することで、**再利用性が高まり、スタイル競合のトラブルも避けやすくなります。**

## おわりに

プログラミングやマークアップの世界では、「とりあえず動けばOK」な時期も必要です。しかし、次のステップに進むには「**なぜその書き方をするのか**」「**なぜこれは避けるべきなのか**」という視点が欠かせません。

今回紹介したNG行動は、ほんの一部です。学習を続けるうちに「最初にこれを知っておきたかった！」と思うような知識がどんどん出てくるでしょう。

HTMLやCSSは、見た目を整えるだけのものではありません。**意味のあるタグ選び、構造的に正しいレイアウト、柔軟で保守しやすいスタイル**——それらを実現することで、プロフェッショナルなWeb制作ができるようになります。

この記事をきっかけに、「なぜその書き方なのか？」という意識を持ってコーディングに取り組んでみてください。小さな意識の積み重ねが、**確実なスキルアップ**につながります。


---

## 【Rails】コールバックの基本、応用、スキップを分かりやすく解説

- URL: https://blog.to-ko-s.com/articles/active-record-callback
- 著者: 塩見直樹
- 公開日: 2025-06-08
- タグ: Rails

> Railsのコールバック機能を基本から応用まで解説。before_save、after_createなどの使い方、条件付き実行、スキップ方法を初学者向けに紹介します。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
皆さんはコードの可読性を気にした設計が出来ていますか？
「とりあえず思い通りに動けばいいや」と思いコントローラーにロジックを詰め込んだり、同じ処理をコントローラー毎に記述していませんか？
もしそのような方がいましたら今回解説するコールバックを使用し、メソッドの複雑度をさげ可読性が上がるよう設計していきましょう！

#### 対象読者

- Rails初学者の方
- コードの可読性を上げたいと思っている方

## コールバックとは

Railsガイドより

> オブジェクトのライフサイクルの特定の瞬間に呼び出されるメソッドのことです。
> コールバックを使えば、Active Recordオブジェクトがデータベースで初期化・作成・保存・更新・削除・バリデーション・読み込みのたびに実行されるコードを記述できます。

詳細に知りたい方は以下を参照してください！

<ExternalLink url="https://railsguides.jp/active_record_callbacks.html" />

よく使用されるコールバックには以下のようなものがあります。

| コールバックの種類 | 説明                         |
| ------------------ | ---------------------------- |
| `before_save`      | レコードが保存される前に実行 |
| `after_save`       | レコードが保存された後に実行 |
| `before_create`    | レコードが作成される前に実行 |
| `after_create`     | レコードが作成された後に実行 |
| `before_destroy`   | レコードが削除される前に実行 |
| `after_destroy`    | レコードが削除された後に実行 |

## 基本的な使用方法

コールバックを使用する際は、モデルクラス内で上記で紹介したようなコールバックを登録し、実行させたいメソッドを受け取ります。
以下のサンプルコードは、保存前に名前の余分な空白をなくす処理です。
保存時にデータを一貫した形式にしたい場合、このように記述する方法もあります。

```ruby title="user.rb" showLineNumbers
class User < ApplicationRecord
  before_save :normalize_name

  private

  def normalize_name
    self.name = name.strip
  end
end
```

このようにコールバックを登録することで、`User`のレコードが保存されるたびに`normalize_name`メソッドが実行されます。
`User`のレコードを保存するという処理を複数箇所で行っていた場合、本来であればその使用箇所全てに同じ記述をしなくてはいけません。
しかし、コールバックを登録しておけば他の箇所でその処理の記述をしなくても済みます。
それによりメソッドの記述量が減り、可読性をあげることができるのです！
コールバックの登録ではメソッド以外にも以下のようにブロックを受け取ることができます。
コールバックしたいロジックが短い時などはこちらを使用してみてもいいかもしれません。

```ruby title="user.rb" showLineNumbers
class User < ApplicationRecord
  before_save do
    self.name = name.strip
  end
end
```

例としてサンプルコードをもう1つあげます。
以下はユーザーを作成した後にそのユーザーに対してメールを送る処理です。

```ruby title="user.rb" showLineNumbers
class User < ApplicationRecord
  after_create :send_email

  private

  def send_email
    UserMailer.welcome_email(self).deliver_now
  end
end
```

基本的にはこのような感じで使用していきます！

## コールバックの応用

特定の条件下でのみコールバックを実行することも可能です。
以下は`if`を使用しユーザー作成後、`email`が存在する場合にのみメール送信をします。
`if`の逆である`unless`を使用することも可能です！

```ruby title="user.rb" showLineNumbers
class User < ApplicationRecord
  after_create :send_email, if: -> { email.present? }

  private

  def send_email
    UserMailer.welcome_email(self).deliver_now
  end
end
```

また、以下のように`if, unless`を併用してコールバック登録をすることも出来ます。

```ruby title="user.rb" showLineNumbers
class User < ApplicationRecord
  after_create :send_email, if: -> { email.present? }, unless: -> { status == 'guest' }

  private

  def send_email
    UserMailer.welcome_email(self).deliver_now
  end
end
```

上記はユーザー作成時、`email`が存在しなおかつ、`status`が`guest`でないユーザーに対してメール送信を行います。

## コールバックのスキップ

#### スキップされてしまう場合

以下のメソッドを使用するとコールバックはスキップされます。
これはバリデーションも同様です！

- `delete`
- `delete_all`
- `update_column`
- `update_all`
- `upsert`

スキップされるメソッドがあることを知らないと、なぜコールバックが実行されないのかで詰まってしまう可能性があります。
なので、コールバックがうまく実行されない場合は使用しているメソッドがスキップされるメソッドでないかを確認しましょう！
上記以外にもスキップされるメソッドがあるので詳しく知りたい方は、記事の上部に貼ってあるRailsガイドを参照してください。

#### あえてスキップしたい場合

通常はコールバックを行いたいが、例外的にスキップさせたい場合もあるかと思います。
そのような場合には`attr_accessor`を使用する方法があります！
以下のように`attr_accessor`で、コールバックをスキップするかどうかを管理するためのフラグを追加し、そのフラグの状態でコールバックの処理を実行するかどうか制御します。

```ruby title="user.rb" showLineNumbers
class User < ApplicationRecord
  attr_accessor :skip_normalize_name # 追加

  before_save :normalize_name, unless: -> { skip_normalize_name }

  private

  def normalize_name
    self.name = name.strip
  end
end
```

上記のように設定したらあとは以下のように使用するだけです！

**通常時の保存の場合：**

```ruby title="Ruby"
user = User.new(name: "  田中太郎")
user.save
puts user.name
# => "田中太郎"
```

**コールバックをスキップしたい場合：**

```ruby title="Ruby"
user = User.new(name: "  田中太郎")
user.skip_normalize_name = true
user.save
puts user.name
# => "  田中太郎"
```

このように`attr_accessor`を使用したらコールバックの制御を簡単に行えます。
スキップ処理が必要な場合のみ適切に使用することが大切になります！

## おわりに

今回はコールバックについて解説をしました！
コールバックは、モデルのライフサイクルに特定の処理を組み込む便利な機能ですが、使い方を誤るとコードが複雑化し、デバックが難しくなってしまいます。
本記事で紹介した、特定の条件下でのコールバック実行やスキップ機能をうまく活用し、必要な箇所にだけ適切にコールバックを取り入れることが大切になります！
ぜひ、この記事を参考に、プロジェクトでコールバックを効果的に活用してみてください！


---

## 要素のサイズでUIを切り替える！@containerでレスポンシブ対応

- URL: https://blog.to-ko-s.com/articles/css-container-query-responsive
- 著者: 成岡拓哉
- 公開日: 2025-06-01
- タグ: HTML, CSS

> CSSで要素サイズに応じたレスポンシブを実現したい方に向けて、@containerの基本構文と使い方をやさしく解説しました。ぜひ参考にしてください。


## はじめに

こんにちは。株式会社TOKOSのタクヤです。

いきなりですが、「CSSで画面サイズに合わせてデザインを変えたいのに、うまくいかない…」そんな風に思ったことはありませんか？

CSSでは画面の幅に合わせてデザインを変える方法が一般的かと思いますが、最近では要素の大きさに応じて見た目を変えられる、新しい書き方が登場しています。

この記事では、その新しい方法である`@container`について、はじめての方でも分かるように使い方をやさしく解説します。

### 対象読者

- CSSを学び始めた方
- メディアクエリでのレスポンシブに限界を感じている方

## @containerとは

`@container`は、**対象となる要素のサイズに合わせて見た目を変えられるCSSの仕組み**です。
これまでのCSSでは、画面の幅に合わせて文字の大きさや配置などを切り替えるのが一般的でした。しかし実際のWebサイトでは、画面全体ではなくある特定の要素のサイズに合わせて見た目を調整したい場面も多くあります。

たとえば、以下のような場面です。

- 狭いスペースでは、コンテンツを縦並びにして収めたい
- 広いスペースがあるときは、画像と文字を横に並べたい

こういったときに便利なのが`@container`です。
その**要素のサイズに合わせてCSSのスタイルを切り替えられる**ので、見た目の調整がもっと自由に、細かくできるようになります。

## 基本的な使い方

### 基本構文

`@container`を使うには、まず見た目を切り替える基準となる要素を設定する必要があります。

```css title="style.css" showLineNumbers
.container {
  container-type: inline-size;
}
```

この指定によって、`.container`のサイズを基準に見た目を切り替えられるようになります。

```css title="style.css" showLineNumbers
@container (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}
```

このように記述すると、`.container`のサイズが600px以上のとき、`.text`の文字サイズが大きくなります。

### コード全文

```html title="index.html" showLineNumbers
<div class="container">
  <p class="text">この文字はコンテナのサイズによって大きさが変わります。</p>
</div>
```

```css title="style.css" showLineNumbers
.container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  padding: 24px;
  background: #f5f5f5;
  margin: 0 auto;
}

.text {
  font-size: 16px;
  color: #333;
}

/* .container のサイズが600px以上になったらフォントサイズを大きくする */
@container (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}
```

## 応用編

通常の`@container`は、基本的な使い方で見たように、子要素の見た目を親コンテナ（`container-type`を指定した要素）のサイズに合わせて切り替えます。
しかし、`container-name`というプロパティを使えば、**どのコンテナを基準にしているかコード上で明確になり、可読性が向上します**。

以下の例では、親要素`.layout`に`container-name`を指定し、その中にある`.sidebar`と`.main-content`の見た目を、`.layout`のサイズに応じて切り替えています。

```html title="index.html" showLineNumbers
<div class="layout">
  <div class="layout-inner">
    <aside class="sidebar">
      <h2>サイドバー</h2>
      <p>メニューや広告など</p>
    </aside>
    <main class="main-content">
      <h2>メインコンテンツ</h2>
      <p>記事の本文など</p>
    </main>
  </div>
</div>
```

```css title="style.css" showLineNumbers
/* 親要素を名前付きコンテナとして定義 */
.layout {
  container-name: layout;
  container-type: inline-size;
}

/* 通常の見た目（狭いとき：縦並び） */
.sidebar {
  background: #e0e0e0;
  padding: 16px;
  margin-bottom: 16px;
}

.main-content {
  background: #f5f5f5;
  padding: 16px;
}

/* layoutコンテナが広くなったときの見た目（横並び） */
@container layout (min-width: 600px) {
  .layout-inner {
    display: flex;
    gap: 16px;
  }

  .sidebar {
    width: 200px;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .main-content {
    flex: 1;
  }
}
```

### 解説

`.layout`に`container-name: layout;`を指定することで、この要素のサイズを`layout`という名前で参照できるようになります。
`@container layout ...`と書くことで、`.layout-inner`や`.sidebar`、`.main-content`といった子孫要素の見た目を、`.layout`コンテナのサイズに応じてまとめて切り替えられます。

なお、Container Queriesはコンテナの子孫要素にのみ適用されるため、`.layout`自身にはスタイルを適用できません。そのため、`.layout-inner`というラッパー要素を設けて、そこにFlexboxのスタイルを適用しています。

このように`container-name`を使えば、どのコンテナを基準にするかを明示的に指定できるため、複雑なレイアウトでも柔軟に対応できます。

## 終わりに

今回は要素のサイズに応じて見た目を切り替える方法である`@container`について解説しました。
これまでのように画面の幅に頼らず、特定の要素の大きさに合わせて文字サイズやレイアウトを変えられるため、より細かく、思い通りにデザインを調整できます。
ぜひこの記事を参考に使ってみてください。


---

## 【CSS】clip-path入門編、三角形も丸も自由自在に作成！

- URL: https://blog.to-ko-s.com/articles/css-clip-path
- 著者: 寺田拓真
- 公開日: 2025-05-24
- タグ: HTML, CSS

> CSSのclip-pathを使って三角形や円形を作る方法を初心者向けに解説。border三角形との違いや、hoverアニメーションの活用例も紹介します。


## はじめに

こんにちは！たくまです！

みなさんはCSSで三角形を作成する際、どのように作成しますか？
僕はWeb制作を始めたての頃、borderを使用して以下のように作成していました。

```css title="CSS" showLineNumbers
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #555555;
  border-right: 0;
}
```

確かに上記で三角形を表現することは可能です。
ただ、borderを使用した際には以下のような問題点があります。

- **背景色や背景画像が使えない**（「面」がない）
- **構造が直感的ではない**（なぜかwidth/heightがゼロ）
- **サイズ調整が難しい**（borderの太さで調整する必要がある）
- **影や角丸など、CSSの他のプロパティと相性が悪い**

上記にあげたように、使い勝手が悪いです。

そこで、今回はclip-pathを使用した三角形などの作成方法を紹介します。
clip-pathであれば背景色や影をつけることができ、仕組みさえ覚えたらかなり応用が効きます。

## clip-path について

### clip-pathの基本

`clip-path`は、CSSで**要素の表示領域を指定の形で切り抜く**ためのプロパティです。
簡単に言えば、「ここだけ見せて、それ以外は隠す」マスクのようなものをイメージしてください。

たとえば、画像を円形に見せたいときは以下のように書きます：

```css title="CSS" showLineNumbers
.circle-image {
  clip-path: circle(50%);
}
```

画像の角を丸くするのではなく、「切り抜いて」形を変えるのがポイントです。
`clip-path`は`border-radius`と違い、三角形や斜めの多角形、波形なども再現できる点が非常に強力です。

### clip-pathのメリットとは？

`clip-path`の大きなメリットは以下の通りです。

#### 1\. 背景色や背景画像を活かした形状が作れる

よくある「CSS三角形」は、冒頭で紹介したように以下のような`border`を使って作ります。

```css title="CSS" showLineNumbers
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
```

これは「三角形」に見えるだけで、要素としての面積はゼロであり、**背景色や背景画像を使えません**。

一方で`clip-path`を使うと、普通に背景色や画像を適用した状態で三角形を表現できます。

```css title="CSS" showLineNumbers
.clip-triangle {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
```

これはしっかりと“面”として存在する三角形。背景画像も透過も影もOKです。

#### 2\. クリック範囲（hit area）も変わる

`clip-path`を使って表示されていない部分は、マウスイベントの対象外になります。つまり、視覚的に見えない部分は**クリックできません。**

たとえば、円形ボタンを`clip-path: circle()`で作れば、**円の中だけがクリック可能**になります。
これはアクセシビリティやUIの一貫性の観点でも大きなメリットです。

#### 3\. アニメーションとの相性が良い

`clip-path`は数値で指定するので、**hover時の形状変化**や**スクロールアニメーション**にも使いやすいです。

```css title="CSS" showLineNumbers
.box {
  clip-path: circle(40%);
  transition: clip-path 0.4s ease;
}
.box:hover {
  clip-path: circle(75%);
}
```

ボタンのホバーやカードの動きにちょっと変化をつけたいとき、見た目にインパクトを出したいときに使えます。

### clip-pathで作れる主な形

`clip-path`は様々な関数で形を指定できます

| 形                 | 使う関数    | 説明                           |
| ------------------ | ----------- | ------------------------------ |
| 円形               | `circle()`  | 中心と半径を指定               |
| 楕円形             | `ellipse()` | 横・縦方向の半径を指定         |
| 四角形（角丸も可） | `inset()`   | 内側の距離と角丸を指定         |
| 三角形〜多角形     | `polygon()` | 自由な頂点で指定               |
| SVGパス            | `path()`    | 複雑な図形も対応（上級者向け） |

## 初心者でもできるclip-path活用アイデア

### 三角形のサンプルコード

```css title="CSS" showLineNumbers
.clip-triangle {
  width: 200px;
  height: 200px;
  background: #0077cc;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  margin: 40px auto;
}
```

基本的な三角形です。

### ホバーで形を変えるアニメーション

```css title="CSS" showLineNumbers
.card {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 0.3s ease;
}
.card:hover {
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}
```

ほんの少し形を変えるだけで「動きのあるおしゃれなUI」が実現できます。
こちらは実際にデモ画面でご覧ください。

<CodePen url="https://codepen.io/TOKOS-the-looper/pen/jEPObMv" height={300} defaultTab="html,result" />

## よくある注意点

便利なclip-pathですが、以下のような注意点もあります。

- **IEは非対応**（基本的に2023年以降は気にしなくてOK）
- ブラウザによっては`clip-path`の複雑なアニメーションでパフォーマンス低下することも
- `polygon()`の座標は **%指定にするとレスポンシブ対応しやすい**
- スマホでは形の崩れが起きやすいので、**実機でのテストが必須**

## おすすめツール

複雑な形を自分で手入力するのは大変…という方は、
以下のツールを使うと、マウス操作だけでclip-pathを作成できます。

<ExternalLink url="https://bennettfeely.com/clippy/" />

GUIで形を作れば、その場でCSSが生成されるのでとても便利です！

## おわりに

`clip-path`を使えば、CSSだけで今まで難しかった形状デザインがサクッと実装できます。

- 背景色付きの三角形や波型など、簡単に作れる
- デザインの差別化・動きのあるUIにぴったり
- 初心者でも、コピペから試せる手軽さ

まずは三角形や斜めの区切りから始めてみましょう。
1つ使えるようになると、表現の幅が一気に広がります！


---

## position: absolute を使ってレスポンシブ対応！%で相対指定のすゝめ

- URL: https://blog.to-ko-s.com/articles/position-absolute-specification
- 著者: 寺田拓真
- 公開日: 2025-04-26
- タグ: HTML, CSS

> position absoluteでのレスポンシブ対応をpx指定からパーセンテージ指定に変えることで実現する方法を解説。固定値指定の問題点と、親要素に対する相対指定によるレイアウト崩れの防止方法を紹介します。


## はじめに

こんにちは！たくまです！

Web制作を始めたばかりの方にとって、要素の配置は難題の1つです。
特に`position: absolute`を使って要素を配置しようとすると、画面サイズが変わったときに思ったように動かないことがありませんか？
例えば、以下のような記述を使用した場合：

```css
.container {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.absolute-box {
  position: absolute;
  top: 100px;
  left: 50px;
  width: 300px;
}
```

このコードでは、`.absolute-box`は`.container`の中で、上から100px、左から50pxの位置に幅300pxで配置されます。

しかし、タブレットやスマホなどの画面サイズが小さいデバイスでは、`.container`の幅が狭くなり、`.absolute-box`が親要素からはみ出したり、他の要素と重なったりする可能性があります。
特に、固定のピクセル値を使用するとレスポンシブデザインに対応しづらくなります。

しかし、`position: absolute`を使いながらも、親要素に対するパーセンテージ指定を活用することで、レスポンシブ対応に適した柔軟なレイアウトを実現できます。

## `position: absolute`の基本

ご存じの方も多いかと思いますが、`position: absolute`について簡単なおさらいです！

`position: absolute`を指定した要素は、それまでの流れから外れて、特定の位置に配置されます。
その配置の基準となるのは、主に`position`が`relative`に設定された親要素です。
もしそのような親要素が存在しない場合、`body`要素が基準となります。

```css
.container {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.absolute-box {
  position: absolute;
  top: 100px;
  left: 50px;
  width: 300px;
}
```

冒頭の例の場合、`container`に`position: relative;`が設定されているため、`.container`の中で、上から100px、左から50pxの位置に幅300pxで配置されます。

しかし、`position: relative;` が設定されていない場合は、`body`の上から100px、左から50pxの位置に幅300pxで配置されます。

## ピクセル（`px`）指定の問題点

`position: absolute`を使用する際に、`top`、`left`などをpx単位で指定すると、以下のような問題が発生することがあります。

- **画面サイズに応じた調整が困難**：固定されたピクセル値は、異なるデバイスや画面サイズに対応しづらく、要素が意図しない位置に表示されることがあります。
- **重なりやはみ出しの発生**：他の要素との重なりや、コンテナからのはみ出しが発生し、レイアウトが崩れる原因となります。
- **メンテナンスの難しさ**：複数のメディアクエリを使用して各画面サイズに対応する必要があり、スタイルシートが複雑になります。

特に複数の`position: absolute`をpx指定で使用した場合、レスポンシブ対応で意図せぬレイアウトが多発して修正に時間がかかってしまうことも多いかと思います🫠

## パーセンテージ（%）指定の活用でレスポンシブ対応

`position: absolute`を使用する際、`top`、`left`、`width`、`height`などのプロパティにパーセンテージ（%）を使用することで、親要素のサイズに対する相対的な配置が可能になります。

これにより、画面サイズの変化に応じて要素の位置やサイズが自動的に調整され、レスポンシブなレイアウトが実現できます。

### なぜパーセンテージ指定がレスポンシブ対応に有効なのか？

`top`や`left`などの位置指定プロパティに%を使用、`width`や`height`に%を使用すると、その値は親要素のサイズに対する割合として解釈されます。
つまり、**親要素のサイズが変化しても、子要素の位置やサイズはその割合に基づいて自動的に調整される**ため、画面サイズの変化に柔軟に対応できます。

実際のコードと画面で確認してみましょう。

```html
<div class="container">
  <div class="absolute-box">コンテンツ</div>
</div>
```

```css
.container {
  position: relative;
  width: 80%;
  background-color: red;
  margin: 0 auto;
  height: 700px;
}

.absolute-box {
  position: absolute;
  background-color: blue;
  top: 30%;
  left: 5%;
  width: 50%;
  height: 50px;
  color: white;
}
```

上記のコードでは、`.absolute-box`は`.container`の上から30%、左から5%の位置に配置され、幅は親要素の50%となります。画面サイズが変化して`.container`のサイズが変わっても、`.absolute-box`の位置とサイズは自動的に調整され、レスポンシブなレイアウトが実現されます。

<Video src="/articles/position-absolute-specification.mov" />

画面幅が小さくなってもコンテンツの位置関係は変わってないことが分かるかと思います。

{/* prettier-ignore */}
<Callout variant="warning">
  - %指定は親要素のサイズに依存するため、親要素に`position: relative`を設定し、明確なサイズを指定することが重要です。
  - 要素の高さや幅を%で指定する場合、親要素の高さや幅が明確に設定されていないと、期待通りに動作しないことがあります。
</Callout>

## まとめ

`position: absolute`を使用しながらも、親要素に対するパーセンテージ指定を活用することで、レスポンシブ対応の柔軟なレイアウトが実現可能です。
`position: absolute`は非常に便利なプロパティですが、使い方次第では他の要素を巻き込んでおかしなレイアウトになってしまうので注意しましょう。

適切な親要素の設定と相対的な配置を意識することで、画面サイズの変化にも対応したレイアウトを構築できます。
また、複雑なレイアウトや多くの要素を含む場合は、FlexboxやGridレイアウトの使用も検討しましょう。

今後のWeb制作において、これらのテクニックを活用して、より柔軟でユーザーフレンドリーなレイアウトを目指しましょう。


---

## 【2025年最新】WordPressにreCAPTCHAを導入する方法

- URL: https://blog.to-ko-s.com/articles/wordpress-anti-spam-recaptcha
- 著者: 成岡拓哉
- 公開日: 2025-04-20
- タグ: WordPress

> WordPressにGoogleのreCAPTCHAを導入する方法を解説します。従来の専用サイトからの登録方法とGoogle Cloud Consoleでの導入方法の両方を紹介します。


## はじめに

こんにちは。株式会社TOKOSのタクヤです。

いきなりですが、
「お問い合わせフォームから迷惑メールが毎日のように届いて困っている…」
「reCAPTCHAの設定って難しそう…」
そんなお悩みをお持ちではありませんか？

WordPressでサイト運営をしている方が抱える問題として迷惑メールが挙げられます。
この記事では、Googleが提供するスパム対策ツール「reCAPTCHA」を活用して迷惑メール対策をする方法を最新情報をもとに詳しく解説していきます。
従来の専用サイトからの登録方法だけでなくGoogle Cloudを使用した導入方法までしっかりと紹介します。

### 対象読者

- WordPressのお問い合わせフォームでスパム対策をしたい方
- reCAPTCHAの導入をしたい方

<Callout>
Googleは2025年末までに、すべてのreCAPTCHAキーをGoogle Cloudプロジェクトに統合する方針を発表しています。
これにより、今後はCloud Consoleでの管理が標準となっていく見込みです。
</Callout>

## reCAPTCHAとは

reCAPTCHA（リキャプチャ）とは、Googleが提供するスパム防止システムで、アクセスしてきた相手が「人間かボットか」を判定してくれる仕組みです。
例えば、あなたがWebサイトにアクセスしたときに「信号機の画像を選んでください」のような質問が表示されたことがあるかと思いますが、それがまさにreCAPTCHAです。

### reCAPTCHAの種類

| **バージョン**        | **特徴**                                           | **対象ユーザー**                           |
| --------------------- | -------------------------------------------------- | ------------------------------------------ |
| v2 チェックボックス型 | 「私はロボットではありません」にチェックするタイプ | 初心者にも使いやすい                       |
| v2 Invisible          | ボタンを押したタイミングで裏側で認証               | ユーザーに負担をかけたくない場合におすすめ |
| v3 スコア判定型       | 裏で自動判定される仕組み。UIに影響を与えない       | 上級者・中〜大規模サイト向け               |
| Enterprise            | v3の拡張版で、課金と詳細分析が可能                 | 商用サービス向け（Google Cloud必須）       |

reCAPTCHAは無料で利用できて導入も難しくありません。
ただ無料で利用できる月間リクエスト数が10,000リクエストとなっているため、中〜大規模サイトでは無料版だと不十分です。そんな場合は有料版のEnterpriseを契約するか、別のサービスを利用するのも良いかもしれません。

同等の機能で無料で利用できるサービスとして、Cloudflareが提供している`Cloudflare Turnstile`というものがあります。
`Cloudflare Turnstile`についてはこちらの記事を参考に導入してみてください。

<InternalLink slug="wordpress-anti-spam-cloudflare-turnstile" />

## 従来の導入手順

以前は、Googleの専用サイトからreCAPTCHAを手軽に導入できました。

<ExternalLink url="https://www.google.com/recaptcha" />

※ただし、現在でも従来の方法で導入が可能なため、念のため解説します。

**1. reCAPTCHA公式サイトにアクセス**

<ExternalLink url="https://www.google.com/recaptcha/admin/create" />

**2. Googleアカウントでログイン**

**3. 新しいサイトの登録を行う（ラベル、ドメイン、reCAPTCHAのバージョンなどを選択）**

![reCAPTCHA公式サイトでのサイト登録画面](/articles/recaptcha-recaptcha-setting-1-930x1024.jpg)

**4. サイトキーとシークレットキーを取得**

![サイトキーとシークレットキーの取得画面](/articles/recaptcha-recaptcha-setting-2-1024x615.jpg)

**5. WordPress側にプラグインを導入（例：Contact Form 7）**

**6. WordPressの管理画面から取得したキーを登録**

![WordPress管理画面でのreCAPTCHA設定](/articles/recaptcha-wordpress-setting-1-1024x921.jpg)

![Contact Form 7のインテグレーション設定](/articles/recaptcha-wordpress-setting-2-1024x921.jpg)

WebサイトにreCAPTCHAが導入されました。

![reCAPTCHAが導入されたWebサイト](/articles/recaptcha-wordpress-setting-3-e1745280726899-1024x358.jpg)

## Google Cloud での導入

以前はGoogle reCAPTCHA専用サイトから簡単に導入できるものでしたが、現在はGoogle Cloudへの統合が進んでおり、より高機能で安全な利用が可能になっています。

**1. Google Cloud Consoleにアクセス**

<ExternalLink url="https://console.cloud.google.com/" />

**2. Googleアカウントでログイン**

**3. プロジェクトを作成（reCAPTCHA専用でOK）**

![Google Cloud Consoleのプロジェクト作成](/articles/recaptcha-gc-setting-1-1024x672.jpg)

![プロジェクト名の入力画面](/articles/recaptcha-gc-setting-2-1024x501.jpg)

**4. 「reCAPTCHA Enterprise API」を有効化**

![reCAPTCHA Enterprise APIの検索](/articles/recaptcha-gc-setting-3-1024x396.jpg)

![reCAPTCHA Enterprise APIの有効化](/articles/recaptcha-gc-setting-4-1024x343.jpg)

**5. キーを作成**

![キーの作成画面](/articles/recaptcha-gc-setting-5-1024x301.jpg)

![キー設定の入力画面](/articles/recaptcha-gc-setting-6-1024x747.jpg)

**6. サイトキーを取得**

![サイトキーの取得画面](/articles/recaptcha-gc-setting-7-1024x341.jpg)

**7. シークレットキーの取得**

![シークレットキーの作成画面](/articles/recaptcha-gc-setting-8-1024x454.jpg)

![シークレットキーの取得画面](/articles/recaptcha-gc-setting-9-1024x345.jpg)

**8. WordPress側にプラグインを導入（例：Contact Form 7）**

**9. WordPressの管理画面から取得したキーを登録**

![WordPress管理画面でのreCAPTCHA設定](/articles/recaptcha-wordpress-setting-1-1024x921.jpg)

![Contact Form 7のインテグレーション設定](/articles/recaptcha-wordpress-setting-2-1024x921.jpg)

WebサイトにreCAPTCHAが導入されました。

![reCAPTCHAが導入されたWebサイト](/articles/recaptcha-wordpress-setting-3-e1745280726899-1024x358.jpg)

## さいごに

今回はWordPressにGoogleのreCAPTCHAを導入する方法を解説しました。
WordPressサイトでのスパム対策に効果的なreCAPTCHAは、今後Google Cloudでの利用が主流になっていきます。
ぜひこの記事を参考にWordPressのスパム対策をしてみてください。


---

## 【初心者向け】JavaScriptで要素の監視を行う方法

- URL: https://blog.to-ko-s.com/articles/javascript-mutation-observer
- 著者: 成岡拓哉
- 公開日: 2025-04-18
- タグ: JavaScript

> JavaScriptのMutationObserverでDOMの変化を監視する方法を解説します。要素の追加・削除、属性変更、テキスト変更を検知する実装例を紹介します。


## はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！

「HTMLが変化したときに自動で監視できたら便利なのに…」と感じたことはありませんか？
この記事では、JavaScriptでHTMLの変化を監視する方法として、`MutationObserver`の使い方を解説します。初学者の方でも理解できるよう、構文と具体的なコード例を交えて紹介していきます。

### 対象読者

- JavaScriptを学び始めた方
- JavaScriptを用いて要素の変更を監視したい方

## MutationObserverとは

`MutationObserver`（ミューテーションオブザーバー）とは、Webページ上の要素（DOM）が変化したことを監視するためのJavaScriptの仕組みです。

例えば、HTMLの要素が追加・削除されたり、テキストが書き換えられたり、属性（classやidなど）が変更された場合に、JavaScriptがリアルタイムでそれを監視してくれるといった具合です。

Webサイトでは、要素が追加・削除されたり、属性が変更されたりすることがあります。こうしたDOMの変化をリアルタイムで監視して、任意の処理を実行できるのが`MutationObserver`の役割です。

以前はMutation Eventsという仕組みがありましたが、今ではパフォーマンスと柔軟性の面で優れた`MutationObserver`が主流です。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/MutationObserver" />

## 基本的な使い方

```html title="index.html" showLineNumbers
<span id="target-element">ISSENブログ</span>
```

```javascript title="main.js" showLineNumbers
// 監視対象の要素を取得
const targetElement = document.getElementById("target-element")

// 変更があったときに実行される関数の定義
const callback = () => {
  console.log("変更がありました")
}

// オプションの設定（どの変更を監視するか）
const config = {
  childList: true, // 子要素の追加・削除を監視
}

// インスタンス生成と監視開始
const observer = new MutationObserver(callback)
observer.observe(targetElement, config)
```

`config`では、どの種類の変化を監視するかを細かく設定できます。
`childList`は子要素の追加・削除を監視するオプションです。
`callback`はコールバック関数で、監視対象に変更があった際に自動で呼び出される関数です。

## 実例

少し複雑な実例として、もとからあるHTML要素の中に新しく要素を作成してそれを監視してみます。

```html title="index.html" showLineNumbers
<button id="add-btn">テキストを追加</button>
<div id="target-element"></div>
```

```javascript title="main.js" showLineNumbers
// 監視対象の要素を取得
const targetElement = document.getElementById("target-element")
// ボタンの要素を取得
const btnElement = document.getElementById("add-btn")

// 変更があったときに実行される関数の定義
const callback = () => {
  console.log("新しい要素が追加されました")
}

// オプションの設定（どの変更を監視するか）
const config = {
  childList: true, // 子要素の追加・削除を監視
}

// インスタンス生成と監視開始
const observer = new MutationObserver(callback)
observer.observe(targetElement, config)

// ボタンをクリックで要素を追加
btnElement.addEventListener("click", () => {
  const newElement = document.createElement("span")
  newElement.textContent = "新しいテキストです"
  targetElement.appendChild(newElement)
})
```

### 監視オプションの詳細解説

以下は、MutationObserverで指定できる主なオプションとその意味をまとめた表です。

| オプション名  | 説明                                                               |
| ------------- | ------------------------------------------------------------------ |
| childList     | 子要素の追加・削除を監視します。                                   |
| attributes    | HTMLタグの属性（classやidなど）の変更を監視します。                |
| characterData | テキストノードの中身が変更されたときに検出します。                 |
| subtree       | 指定した要素の中にある子や孫の要素もすべて含めて監視対象にします。 |

### テキスト内容の変化を監視（characterData）

タグの中にあるテキストそのものが書き換えられたときに監視したいときは、`characterData: true`を使います。
ただし、テキストノード自体を監視対象に指定する必要があります。

<Callout>
`textContent`を変更すると子ノードの置換として扱われるため、`characterData`では検知されません。
テキストノードの`nodeValue`を直接変更するか、`subtree: true`を併用する必要があります。
</Callout>

```html title="index.html" showLineNumbers
<span id="target-element">ISSENブログ</span>
```

```javascript title="main.js" showLineNumbers
// 監視対象の要素を取得
const targetElement = document.getElementById("target-element")

// 変更があったときに実行される関数の定義
const callback = () => {
  console.log("テキストに変更がありました")
}

// オプションの設定（タグ内のテキストの変更）
const config = {
  characterData: true,
  subtree: true, // 子孫のテキストノードも監視対象にする
}

// インスタンス生成と監視開始
const observer = new MutationObserver(callback)
observer.observe(targetElement, config)

// テキストノードのnodeValueを直接変更
targetElement.firstChild.nodeValue = "新しい文字" // ここで監視される
```

### タグの属性の変更を監視（attributes）

HTMLタグには`class`や`id`、`disabled`などの属性があります。
これが変更されたときに監視したい場合は、`attributes: true`を設定します。

```html title="index.html" showLineNumbers
<span id="target-element">ISSENブログ</span>
```

```javascript title="main.js" showLineNumbers
// 監視対象の要素を取得
const targetElement = document.getElementById("target-element")

// 変更があったときに実行される関数の定義
const callback = () => {
  console.log("属性に変更がありました")
}

// オプションの設定（属性の変更）
const config = {
  attributes: true,
}

// インスタンス生成と監視開始
const observer = new MutationObserver(callback)
observer.observe(targetElement, config)

// 属性の変更
targetElement.setAttribute("class", "changed") // ここで監視される
```

### 子要素の追加・削除を検知する（childList）

指定した要素の「直下の子要素」に変更があったかどうかを監視します。
例えば、`appendChild()`や`removeChild()`で子要素が追加・削除されたときに反応します。
ただし、子孫要素（子の中の子など）の変更までは監視できません。
それらも含めて監視したい場合は、次の`subtree`オプションを追加します。

```html title="index.html" showLineNumbers
<div id="target-element"></div>
```

```javascript title="main.js" showLineNumbers
// 監視対象の要素を取得
const targetElement = document.getElementById("target-element")

// 変更があったときに実行される関数の定義
const callback = () => {
  console.log("子要素に変更がありました")
}

// オプションの設定（直下の子要素の変更を監視）
const config = {
  childList: true, // 直下の子要素の追加・削除を監視
}

// インスタンス生成と監視開始
const observer = new MutationObserver(callback)
observer.observe(targetElement, config)

const newElement = document.createElement("span")
newElement.textContent = "新しいテキストです"
targetElement.appendChild(newElement) // ここで監視される
```

### 子要素や孫要素もまとめて監視（subtree）

`subtree: true`を指定すると、指定した要素の「子ども」や「孫」の要素もすべてまとめて監視できます。
これがない場合、直下の子要素の変更しか検知できません。

```html title="index.html" showLineNumbers
<div id="target-element">
  <div id="child-element">
    <span>テキスト</span>
  </div>
</div>
```

```javascript title="main.js" showLineNumbers
// 監視対象の要素を取得
const targetElement = document.getElementById("target-element")

// 変更があったときに実行される関数の定義
const callback = () => {
  console.log("子孫要素に変更がありました")
}

// オプションの設定（子孫要素も含めて監視）
const config = {
  childList: true,
  subtree: true, // 子孫要素も監視対象にする
}

// インスタンス生成と監視開始
const observer = new MutationObserver(callback)
observer.observe(targetElement, config)
```

## よくあるミスと注意点

### 監視対象の要素が存在しない

```javascript title="main.js" showLineNumbers
const targetElement = document.getElementById("target-element")
```

この行で`null`が返ると、その後の`observer.observe()`がエラーになります。
監視前に必ず対象があるか確認しましょう。

### オプション設定の漏れ

たとえば子要素の追加を監視したいのに`childList: true`を設定していなければ、何も監視されません。
目的に応じて正しく`config`を指定しましょう。

### 不要な範囲の監視でパフォーマンスが低下

`subtree: true`にすると、対象の子孫すべてを監視します。
大量のDOMを対象にする場合は、必要最小限に絞ることが重要です。

## 終わりに

今回はJavaScriptでHTMLの変化を監視する方法を解説しました。
`MutationObserver`を使えば、DOMの変更を効率的に監視できます。
非同期通信やユーザー操作によって変化するWebサイトではとても役立つ技術です。
ぜひ参考にしてみてください。


---

## 【JavaScript】データ重複を許さないSetクラスの紹介

- URL: https://blog.to-ko-s.com/articles/javascript-set
- 著者: 杉田侑祐
- 公開日: 2025-04-06
- タグ: JavaScript

> JavaScriptのSetクラスと配列の違いを解説。重複を許さないSetの特性や、主要メソッドの対応関係、パフォーマンス比較、実践的な使用例を学べます


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSの杉田です！
今回はJavaScriptのSetクラスの基本的な使い方から、実践的な応用例まで詳しく解説していきます！
あまり使用する頻度はないかもしれませんが重複を許さないユニークな値の集合を扱う場合などに活躍します！
ぜひ最後までご覧ください！

この記事では、以下の内容について詳しく解説します：

- Setクラスの使用方法

### 対象読者

- 初学者の方
- フロントエンド開発をされている方

### この記事で扱う内容、扱わない内容

この記事で扱う内容 :

- Setクラスの概要

この記事で扱わない内容:

- JavaScriptの基本的な使用方法

## 概要

JavaScriptのSetクラスは、ES6（ECMAScript 2015）で導入されました！
冒頭でもお伝えしましたが、重複を許さないユニークな値の集合を扱う場合などで使用します！

### Setクラスの基礎

Setオブジェクトは、プリミティブ値やオブジェクト参照を含む、どのような型のユニーク(一意)の集合も保持できます。
Setの主な特徴は下記になります。

- 値が一度だけ格納される（重複不可）
- 順序が保持される（挿入順）
- キーを使わず値のみを格納
- NaNとundefinedも格納可能

また、紛らわしいですが配列とは別物になります。
配列との違いは下記になります。

重複要素の扱い

- Set
  - 重複する値を保持できない
- 配列
  - 同じ値を複数持つことができる

要素の検索効率

- Set
  - `has()`メソッドによる要素検索は非常に高速
- 配列
  - `includes()`や`indexOf()`による検索はSetに劣る

要素へのアクセス

- Set
  - インデックスによる直接アクセスはできない
- 配列
  - `array[index]`のように直接インデックスでアクセスできる

### Setクラスの主要メソッド

Setクラスの主要メソッドは下記になります。

| Setのメソッド     | 配列での同等の操作                           | 説明                                                         |
| ----------------- | -------------------------------------------- | ------------------------------------------------------------ |
| new Set()         | \[\]                                         | 新しい空のコレクションを作成                                 |
| add(value)        | push(value)                                  | 要素を追加する                                               |
| delete(value)     | splice(array.indexOf(value), 1)              | 特定の値を削除する                                           |
| has(value)        | includes(value) または indexOf(value) !== -1 | 値が存在するか確認する                                       |
| clear()           | length = 0 または splice(0)                  | すべての要素を削除する                                       |
| forEach(callback) | forEach(callback)                            | 各要素に対してコールバックを実行                             |
| values()          | values()                                     | 値のイテレータを返す                                         |
| entries()         | entries()                                    | キーと値のペアのイテレータを返す（配列では\[index, value\]） |

### 基本的な使用例

要素の追加・削除などメソッドを使用した例は下記になります。

```javascript title="JavaScript" showLineNumbers
// 新しいSetを作成
const colors = new Set()

// 要素を追加
colors.add("赤")
colors.add("青")
colors.add("緑")

console.log(colors.size) // 3

// 重複要素の追加は無視される
colors.add("赤")
console.log(colors.size) // 3（変わらない）

// 要素の存在確認
console.log(colors.has("赤")) // true
console.log(colors.has("黄")) // false

// 要素の削除
colors.delete("青")
console.log(colors.size) // 2

// すべての要素を削除
colors.clear()
console.log(colors.size) // 0
```

上記例のように、重複要素が追加される場合は無視されます！

### 配列との相互変換

冒頭で配列とは別物とお伝えしましたが、相互変換ができます！

```javascript title="JavaScript" showLineNumbers
// 配列からSetへの変換
const array = [1, 2, 2, 3, 4, 4, 5]
const uniqueSet = new Set(array)
console.log(uniqueSet) // Set(5) {1, 2, 3, 4, 5}

// SetからArrayへの変換
const uniqueArray = [...uniqueSet]
console.log(uniqueArray) // [1, 2, 3, 4, 5]

// または Array.from() を使う方法
const anotherUniqueArray = Array.from(uniqueSet)
console.log(anotherUniqueArray) // [1, 2, 3, 4, 5]
```

### 実践的な応用例

ここからよく使うパターンを紹介します！

**配列から重複を削除する**

```javascript title="JavaScript" showLineNumbers
function removeDuplicates(array) {
  return [...new Set(array)]
}

const numbersWithDuplicates = [1, 2, 2, 3, 4, 4, 5, 5, 5]
const uniqueNumbers = removeDuplicates(numbersWithDuplicates)
console.log(uniqueNumbers) // [1, 2, 3, 4, 5]
```

**2つの配列の共通要素を見つける（交差）**

```javascript title="JavaScript" showLineNumbers
function intersection(arrayA, arrayB) {
  const setB = new Set(arrayB)
  return arrayA.filter((element) => setB.has(element))
}

const array1 = [1, 2, 3, 4, 5]
const array2 = [3, 4, 5, 6, 7]
console.log(intersection(array1, array2)) // [3, 4, 5]
```

**2つの配列の差分を見つける（差集合）**

```javascript title="JavaScript" showLineNumbers
function difference(arrayA, arrayB) {
  const setB = new Set(arrayB)
  return arrayA.filter((element) => !setB.has(element))
}

const array1 = [1, 2, 3, 4, 5]
const array2 = [3, 4, 5, 6, 7]
console.log(difference(array1, array2)) // [1, 2]
```

**2つの配列を結合して重複を削除（和集合）**

```javascript title="JavaScript" showLineNumbers
function union(arrayA, arrayB) {
  return [...new Set([...arrayA, ...arrayB])]
}

const array1 = [1, 2, 3]
const array2 = [2, 3, 4, 5]
console.log(union(array1, array2)) // [1, 2, 3, 4, 5]
```

**オブジェクト配列から特定のプロパティの重複を削除**

```javascript title="JavaScript" showLineNumbers
function getUniqueByProperty(array, prop) {
  const seen = new Set()
  return array.filter((item) => {
    const value = item[prop]
    if (seen.has(value)) {
      return false
    }
    seen.add(value)
    return true
  })
}

const users = [
  { id: 1, name: "田中" },
  { id: 2, name: "鈴木" },
  { id: 3, name: "田中" }, // 重複した名前
  { id: 4, name: "佐藤" },
]

const uniqueUsers = getUniqueByProperty(users, "name")
console.log(uniqueUsers)
// [{ id: 1, name: '田中' }, { id: 2, name: '鈴木' }, { id: 4, name: '佐藤' }]
```

### パフォーマンスの考慮点

大量のデータを扱う場合、Setは配列操作よりもパフォーマンスが良いです。
下記コードは配列とSetのパフォーマンスを比較した例です。
Setの`has()`は配列の`includes()`と比べて、実行時間が100分の1程度になります。

```javascript title="JavaScript" showLineNumbers
// パフォーマンス比較の例
const largeArray = Array.from({ length: 100000 }, (_, i) => i)
const largeSet = new Set(largeArray)

console.time("Array includes")
const inArray = largeArray.includes(99999)
console.timeEnd("Array includes") // Array includes: ~5-10ms

console.time("Set has")
const inSet = largeSet.has(99999)
console.timeEnd("Set has") // Set has: ~0.01-0.05ms
```

## さいごに

今回はあまり馴染み深くないSetクラスについて紹介しました！
配列を使用することが多いとは思いますが、扱うデータによっては実装が簡潔になり、パフォーマンスも向上するため、ぜひ活用してみてください！


---

## 【Next.js】Suspenseの初歩的な使い方

- URL: https://blog.to-ko-s.com/articles/nextjs-suspense
- 著者: 西原月熙
- 公開日: 2025-03-30
- タグ: React, Next.js

> Next.jsでのSuspenseの基本的な使い方を解説。サーバーコンポーネントでのawaitパターンやクライアントコンポーネントでのuse hookを用いた実装方法を、コード例とともに紹介します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
React18から、`Suspense`が本格的に使えるようになりましたね。
適切に使うことでUXやパフォーマンス観点で有益な機能です✨
本記事では、そんな`Suspense`をNext.jsと組み合わせて使う一般的な方法を説明します💪

## Suspenseとは？

ひとことで簡単に言うと、「**コンポーネントが読み込み（ロード）中の間に、別のコンポーネントを一時的に表示する仕組み**」です!

では、「読み込み中」とはどんな状態でしょうか？🤔
これもひとことで言うと「`Promise`が解決していない」データを持っている状態です!
簡単なコード例を見てみましょう!

```tsx title="page.tsx"
export default function Page() {
  const response = fetch("https://jsonplaceholder.typicode.com/posts")

  return (
    <main>
      <Suspense fallback={<div>Loading...</div>}>
        <PostList response={response} />
      </Suspense>
      <footer>{/* 静的なフッターの内容 */}</footer>
    </main>
  )
}
```

上記の`PostList`というコンポーネントは、`fetch`した返り値の`response`という値をそのまま`props`として受け取っています。
また、`fetch`は非同期関数なので、返り値の`response`は`Promise`でラップされている状態です。(`await`等を使用していないため)
この時、`PostList`は`response`の「`Promise`が解決」するまではUIとして表示できません🥶
この「`Promise`が解決」するまでの間は`Suspense`の`fallback`の中の`<div>Loading...</div>`という文字が表示されることになるわけです!

この時、「静的なUIは即座にUIに表示させることができる」点が嬉しいポイントです✨
今回の例で言うと、`footer`は静的なUIなので、データの`fetch`等を待たずに即座に表示された方がユーザー体験としては嬉しいですよね🤭
`Suspense`を使わずにすぐに`await`をするパターンだと、「`Promise`が解決」されるまでは、画面内の全てのUIが表示されないことになってしまうのです😨

Promise(= 非同期)部分を適切に`Suspense`で括ることで、使っていて気持ち良いサイトにできるのです!

## Next.jsでSuspense対応をさせてみよう

それではざっくり理解が進んだところで、Next.jsで`Suspense`を使っていきましょう！
流れとしては、「`Suspense`を使わないバージョン」→「`Suspense`を使うバージョン」で進めていきます。

### 前提知識

サーバーコンポーネントやRouteHandler等の理解をしている前提で説明していきます。
また、TypeScriptを使用しています。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  分からない部分は必要に応じて調べていただけると幸いです🙏
</SpeechBubble>

### 環境

- Next.js：`15.2.4`
- React：`19.1.0`

### エンドポイントの作成

まずはRouteHandlerを使ってエンドポイントを作成します!

```ts title="src/app/api/posts/route.ts"
import { NextResponse } from "next/server"

export type Post = {
  id: number
  title: string
  body: string
}

export async function GET() {
  // 3秒待機
  await new Promise((resolve) => setTimeout(resolve, 3000))

  return NextResponse.json([
    {
      id: 1,
      title: "最初の投稿",
      body: "これは最初の投稿の内容です。",
    },
    {
      id: 2,
      title: "2番目の投稿",
      body: "これは2番目の投稿の内容です。",
    },
    {
      id: 3,
      title: "3番目の投稿",
      body: "これは3番目の投稿の内容です。",
    },
  ])
}
```

データは静的に返すことにします。
ローディングしているかどうかを分かりやすく確認したいので、中で3秒程度待たせるようなロジックを入れています!

### page.tsx・PostListコンポーネントの作成

次に呼び出す側のUIを作成します!

```tsx title="src/app/page.tsx"
import { Post } from "@/app/api/posts/route"
import { PostList } from "@/components/PostList"

export default async function Page() {
  const response = await fetch("http://localhost:3000/api/posts")
  const posts = (await response.json()) as Post[]

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm">{/* 静的なヘッダーの内容 */}</header>

      <main className="mx-auto max-w-7xl px-8">
        <div className="mt-10 w-full max-w-4xl">
          <h2 className="mb-8 text-3xl font-bold text-gray-800">投稿一覧</h2>
          <PostList posts={posts} />
        </div>
      </main>
    </div>
  )
}
```

```tsx title="src/components/PostList.tsx"
import { Post } from "@/app/api/posts/route"

type Props = {
  posts: Post[]
}

export function PostList({ posts }: Props) {
  return (
    <div className="space-y-6">
      <div className="grid gap-6">
        {posts.map((item: Post) => (
          <div
            key={item.id}
            className="rounded-lg border border-gray-200 bg-white p-6 shadow-md transition-shadow duration-100 hover:shadow-lg"
          >
            <h2 className="mb-2 text-xl font-semibold text-gray-700">{item.title}</h2>
            <p className="text-gray-600">{item.body}</p>
          </div>
        ))}
      </div>
    </div>
  )
}
```

これでUIは下記のようになりました!

![Suspense未使用時の投稿一覧ページの表示結果](/articles/975a49bcda679959fc98dc83850721af-1024x895.jpg)

今現在の状況が「Suspenseを使わないバージョン」になっています!
エンドポイント側で3秒待つようにしているので、ページにアクセスすると画面全体の描画までに時間がかかることが分かると思います🥶

### Suspense有りで実装してみる

それでは、`Suspense`有りバージョンに変更してみます!
(変更がある部分のみ抜粋しています)

```tsx title="src/app/page.tsx(変更後)"
export default async function Page() {
  const response = fetch("http://localhost:3000/api/posts")

  return (
    <div className="min-h-screen bg-gray-50">
      {/* ... */}
      <main className="mx-auto max-w-7xl px-8">
        <div className="mt-10 w-full max-w-4xl">
          <h2 className="mb-8 text-3xl font-bold text-gray-800">投稿一覧</h2>
          <Suspense
            fallback={
              <div className="space-y-6">
                <div className="grid gap-6">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="rounded-lg border border-gray-200 bg-white p-6 shadow-md">
                      <div className="mb-2 h-6 w-3/4 animate-pulse rounded bg-gray-200"></div>
                      <div className="h-4 w-full animate-pulse rounded bg-gray-200"></div>
                    </div>
                  ))}
                </div>
              </div>
            }
          >
            <PostList responsePromise={response} />
          </Suspense>
        </div>
      </main>
    </div>
  )
}
```

```tsx title="src/components/PostList.tsx(変更後)"
import { Post } from "@/app/api/posts/route"

type Props = {
  responsePromise: Promise<Response>
}

export function PostList({ responsePromise }: Props) {
  const response = await responsePromise
  const posts = (await response.json()) as Post[]

  return <div className="space-y-6">{/* 同じ内容 */}</div>
}
```

`page.tsx`側で`await`していた部分を`PostList.tsx`側で行うようにした点と、`Suspense`(+`fallback`)コンポーネントを追加した部分が変更点となります！
こうすることで、`Promise`を使用していない部分は即時でUIに描画され、`PostList`の3秒待っている間は`fallback`のUIが表示されることになります💪

<Video src="/articles/nextjs-suspense.mp4" caption="Suspense有りVer" />

イメージとしては、「`Promise`を解決」する部分を子コンポーネントにズラした形です!

### サーバーコンポーネントでの使用方法

...と書いたのですが、上記での実装自体がサーバーコンポーネントでの使用方法になっています!
具体的には、コンポーネント自体は`async`な関数コンポーネントにした上で、中で`await`を使うだけです。

応用として、先ほどのコードを改善してみます。
結論としては、`props`で渡すのでは無く子コンポーネント側で直接`fetch`をしてしまいます!

```tsx title="src/components/PostList.tsx(改善Ver.)"
// propは不要!!
// type Props = {
//   responsePromise: Promise<Response>
// }

export async function PostList() {
  const response = await fetch("http://localhost:3000/api/posts")
  const posts = (await response.json()) as Post[]

  return <div className="space-y-6">{/* 同じ内容 */}</div>
}
```

こうすることで、`props`の受け渡しすら必要無くなります💪
(`page.tsx`側はfetch部分の記述をする必要が無くなります)

また、もし他のコンポーネントからもこのエンドポイントを叩きたいとなっても、Next.jsにはRequest Memoizationという機能があるので、重複した通信は無くなります✨

<ExternalLink url="https://nextjs.org/docs/app/building-your-application/caching#request-memoization" />

### クライアントコンポーネントでの使用方法

ボタン等インタラクティブなコンポーネントの場合はサーバーコンポーネントを使えない = `await`を使うことができません😨
そんな場合(=クライアントコンポーネント)でも`Suspense`を使う方法(≒「Promiseの解決方法」)を解説します。

端的に言うと、「`use`」を使うのが一番手っ取り早いです!
まずはコードを見てみます!

```tsx title="src/app/page.tsx(クライアントコンポーネントに渡すVer.)" {11}
export default async function Page() {
  const response = fetch("http://localhost:3000/api/posts")

  return (
    <div className="min-h-screen bg-gray-50">
      {/* ... */}
      <main className="mx-auto max-w-7xl px-8">
        <div className="mt-10 w-full max-w-4xl">
          <h2 className="mb-8 text-3xl font-bold text-gray-800">投稿一覧</h2>
          <Suspense fallback={/* ... */}>
            <PostList responsePromise={response.then((res) => res.json())} />
          </Suspense>
        </div>
      </main>
    </div>
  )
}
```

```tsx title="src/components/PostList.tsx(クライアントコンポーネントVer.)" {12}
"use client"

import { use } from "react"
import { Post } from "@/app/api/posts/route"

type Props = {
  responsePromise: Promise<Post[]>
}

export function PostList({ responsePromise }: Props) {
  // ここ!!
  const posts = use(responsePromise)

  return <div className="space-y-6">{/* 同じ内容 */}</div>
}
```

変更としては、親側で`response.then((res) => res.json())`として`then`の記述を追加し、子側のクライアントコンポーネントで`use`を使用しているだけです!

「`use`」をひとことで言うと、「`Promise`を解決する」hookです!
本記事で度々出ている「`Promise`を解決する」というワードにピッタリのhookですね😎

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  「`use`」はReact19からの新機能です✨
</SpeechBubble>

このように、サーバーコンポーネントでもクライアントコンポーネントでもSuspenseを使ってユーザー体験を向上できます💪

## おわりに

Suspenseの利点としては他にも、「`Promise.all`が不要になる」「ローディング中のUIをfallbackに任せられるためDX(Developer Experience)が向上する」等もあったりします！
また、紹介した`use`を使わなくても、SWRやTanStack Queryのようなライブラリを使うことでよりスマートに記述することも可能です😆

Suspenseのベストプラクティスは定まってないように思うので、本記事を参考にした上でぜひカスタマイズしてみてください！
基本は「より子コンポーネント側でPromiseを解決させるべき」だと思っています🤔

また、ページ遷移自体を高速にしたい場合は`loading.tsx`を使用することも検討した方が良いかもしれないです。
僕もケースバイケースで考えていきたいです💪


---

## 【Rails】便利メソッド10選！

- URL: https://blog.to-ko-s.com/articles/activerecord-method
- 著者: 塩見直樹
- 公開日: 2025-03-24
- タグ: Rails

> Railsの便利メソッド10選を紹介。find_by、exists?、pluck、find_eachなど、開発効率を高めるActiveRecordメソッドを解説。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回はRailsの便利メソッドを10つ紹介します！
どれも普段からよく使用するメソッドなので、まだ使用したことのないものはこれを機に使用してみてください！

### 対象読者

- Rails初学者の方
- Railsを用いて開発を行っている方

## 便利メソッド10選

### find_by

指定した条件に一致する最初の1件のレコードを返します。
見つからない場合は`nil`を返します。

```ruby title="Ruby" showLineNumbers
user = User.find_by(email: "test@example.com")
if user
  puts user.name
else
  puts "ユーザーが見つかりませんでした"
end
```

似ているメソッドの`find`は見つからない場合に例外を発生させますが、`find_by`は`nil`を返すため、エラーを防ぎつつ分岐で扱いやすいです。

### find_or_initialize_by

条件に一致するレコードがあればそのレコードを返し、なければ保存されていない新しいインスタンスを返します（データベースにはまだ保存されません）

```ruby title="Ruby" showLineNumbers
user = User.find_or_initialize_by(email: "test@example.com")
user.name ||= "新規ユーザー"
user.save
```

似ているメソッドで他にも`find_or_create_by`がありこちらは、なければ作成し保存してから返すメソッドです。

### exists?

条件に一致するレコードが存在するかどうかを`true`/`false`で返します。

```ruby title="Ruby" showLineNumbers
if User.exists?(email: "test@example.com")
  puts "ユーザーは存在します"
else
  puts "ユーザーは存在しません"
end
```

### where.missing

指定した関連（アソシエーション）が存在しないレコードを取得できます。関連が`nil`または空の場合に絞り込むのに便利です。
例として、投稿（`Post`）とコメント（`Comment`）が一対多の関係だとします。
以下はコメントが一件もない投稿だけを取得できます。

```ruby title="Ruby" showLineNumbers
Post.where.missing(:comments)
```

### pluck

指定したカラムの値だけを配列で取得できます。

```ruby title="Ruby" showLineNumbers
user_names = User.pluck(:name) # => ["田中太郎", "佐藤一郎", ...]
```

### select

指定したカラムだけをデータベースから取得して、オブジェクトとして返します。

```ruby title="Ruby" showLineNumbers
users.select(:id, :name).each do |user|
  puts user.id      # OK
  puts user.name    # OK
  puts user.email   # NG → 指定していないemailにはアクセスできません。
end
```

### find_each

大量のレコードを一括で読み込まずに、デフォルトでは1000件ずつ取得して処理を行います。
似ているメソッドの`each`は全件を一括で読み込むため、データ量が多い場合メモリを大幅に消費してしまいます。
その点、`find_each`はデフォルトでは1000件ずつ読み込むため、データ量が多い場合でも安定した処理が可能になります

```ruby title="Ruby" showLineNumbers
User.find_each do |user|
  user.update(params)
end
```

取得件数を変更したい場合は以下のように`batch_size`を指定します。

```ruby title="Ruby" showLineNumbers
User.find_each(batch_size: 500) do |user|
  user.update(params)
end
```

### present?

値がnilや空文字、空配列などではないかを判定し、空でなければ`true`を返します。
条件分岐にてよく使われます。
以下はユーザー（`User`）をキーワード（`Keyword`）で検索する場合の例です。

```ruby title="Ruby" showLineNumbers
if params[:keyword].present?
  # キーワードが存在する場合の処理
  @users = User.where("name LIKE ?", "%#{params[:keyword]}%")
else
  # キーワードが空 or nil の場合の処理
  @users = User.all
end
```

### compact_blank

配列やハッシュから`nil`や空文字、空配列の要素を取り除くことができます。

```ruby title="Ruby" showLineNumbers
["", nil, "hello"].compact_blank # => ["hello"]

{ name: "Taro", email: "", phone: nil }.compact_blank # => { name: "Taro" }
```

似たようなメソッドで`compact`メソッドがありますが、`compact`はnilのみを取り除きます。
空文字や空配列も取り除きたい場合には`compact_blank`を使いましょう。

### where.not

指定した条件に一致しないレコードを取得できます。
以下の例は商品の在庫が0でないレコードを取得しています。

```ruby title="Ruby" showLineNumbers
products = Product.where.not(stock: 0)
```

`where`は指定した条件のレコードを取得できるメソッドなので、その逆になります。

## おわりに

今回はRailsの便利なメソッドの紹介をしました！
まだ使ったことのないメソッドがあればぜひ使用してみてください。
コード量を減らすことができ、可読性があがります！


---

## 【React】コピペOK! QRコードダウンロードボタンの実装

- URL: https://blog.to-ko-s.com/articles/react-qr-code
- 著者: 杉田侑祐
- 公開日: 2025-03-17
- タグ: JavaScript, React

> この記事ではReactを用いたQRコードダウンロードボタンの実装例を紹介します。この記事を読めばQRコードダウンロードボタンを作成することができます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSの杉田です！
今回はReactを用いたQRコードのダウンロードボタンを作成します！
QRコード生成用のライブラリの比較もしましたので、最後まで見ていただけると幸いです！

この記事では、以下の内容について詳しく解説します：

- QRコード生成用のライブラリ
- Blobデータの変換

### 対象読者

- Reactを用いたフロントエンド開発を行っている方
- QRコード生成ライブラリを選定している方

### この記事で扱う内容、扱わない内容

この記事で扱う内容 :

- QRコード生成ライブラリについて
- Blobデータの生成・変換方法

この記事で扱わない内容:

- JavaScriptの基本的な使用方法
- Tailwindcssについて

### 今回の成果物

今回は非表示状態のQRコードをダウンロードできるボタンを作成いたします！

## 開発環境

- `next`: 15.1.4
- `react`: ^19.0.0
- `tailwindcss`: ^4.0.1

## QRコード生成ライブラリの比較(2025年 3月)

まずはQRコード生成ライブラリの選定を行います。

今回は2つのライブラリを比較します。
比較するライブラリは下記になります。

1. `react-qr-code`
2. `qrcode.react`

比較項目は下記になります。

- Weekly Download数
- 最終更新日
- パッケージサイズ(Minified)

### Weekly Download数

| `react-qr-code` | `qrcode.react` |
| --------------- | -------------- |
| 373,477         | 1,459,090      |

### 最終更新日

| `react-qr-code` | `qrcode.react` |
| --------------- | -------------- |
| 9ヶ月前         | 3ヶ月前        |

### パッケージサイズ(Minified)

| `react-qr-code` | `qrcode.react` |
| --------------- | -------------- |
| 16.8kB          | 16.4kB         |

比較結果として3つの項目全てで`qrcode.react`に軍配があがりました！
今回は`qrcode.react`を使用しようと思います！

<ExternalLink url="https://www.npmjs.com/package/qrcode.react" />

## 実装

今回はPNGデータでダウンロードすることを目標とします。

### QRCodeSVGの呼び出し

今回はQRコードを非表示にし、ダウンロードのみできる実装としたいのでhidden(display:none)を使用しています！
またQRCodeはSVGとしています！

```tsx title="React" showLineNumbers
"use client"

import { QRCodeSVG } from "qrcode.react"

export function QrCodeDownloadButton({ profileIdPromise, clientRoleType }: Props) {
  const url = "https://to-ko-s.com"

  return (
    <>
      <button>QRコードダウンロード</button>
      {/* display:noneで隠しています */}
      <div className="hidden">
        <QRCodeSVG value={url} size={512} level="H" />
      </div>
    </>
  )
}
```

QRCodeSVGに渡しているPropsは下記になります。

1. `value={url}`
   - QRコードに埋め込むデータ（URL）を指定します
2. `size={512}`
   - QRコードのサイズをピクセル単位で指定します。この場合、512×512ピクセルのQRコードが生成されます。
3. `level="H"`
   - QRコードのエラー訂正レベルを指定します。"H"はもっとも高いエラー訂正レベルで、QRコードの約30%が損傷しても読み取り可能になります！
     他のレベルには"L"（低）、"M"（中）、"Q"（四分位）があります。

またSVGとしている理由は変換の柔軟性を優先しているためです！

### QRCodeSVGの呼び出し後にボタンを押せるようにする

まずはDOMにアクセスするために`useRef`を使用します！
さらにDOMへのアクセスが可能になるまではダウンロードボタンを押せないように`useEffect` + `useState`を用いて管理します！
`useState`ではBooleanを扱いbutton要素のdisabled属性にBooleanの値を追記します。

```tsx title="React" showLineNumbers
"use client"

import { QRCodeSVG } from "qrcode.react"

export function QrCodeDownloadButton({ profileIdPromise, clientRoleType }: Props) {
  const [isReady, setIsReady] = useState(false)
  const qrRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (qrRef.current?.querySelector("svg")) {
      setIsReady(true)
    }
  }, [])

  const url = "https://to-ko-s.com"

  return (
    <>
      <button disabled={!isReady}>QRコードダウンロード</button>
      {/* display:noneで隠しています */}
      <div ref={qrRef} className="hidden">
        <QRCodeSVG value={url} size={512} level="H" />
      </div>
    </>
  )
}
```

これでQRコードのレンダリング後にダウンロードボタンを押せるようになりました！

### ダウンロード機能の実装

ここからダウンロード機能の実装に入ります！

流れは下記になります！

1. useRefでアクセスする
2. Canvas要素の作成
3. img要素を作成
4. 作成したimg要素に取得したSVGの情報を付与する
5. CanvasにSVG画像を描画させダウンロードする

ではコードの紹介です。

```tsx title="React" showLineNumbers
"use client"

import { QRCodeSVG } from "qrcode.react"

export function QrCodeDownloadButton({ profileIdPromise, clientRoleType }: Props) {
  const [isReady, setIsReady] = useState(false)
  const qrRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (qrRef.current?.querySelector("svg")) {
      setIsReady(true)
    }
  }, [])

  const url = "https://to-ko-s.com"

  const downloadQrCode = () => {
    // 1.useRefでアクセス
    const svg = qrRef.current?.querySelector("svg")
    if (!svg) return

    // 2.Canvas要素の作成 + Canvas要素のサイズ指定
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext("2d")
    if (!ctx) return
    // display:noneの要素ではclientWidth/clientHeightが0になるため、QRCodeSVGのsizeと同じ値を直接指定
    const size = 512
    const pixelRatio = window.devicePixelRatio || 1
    canvas.width = size * pixelRatio
    canvas.height = size * pixelRatio

    // 3.img要素を作成
    const img = new Image()

    // 4.作成したimg要素に取得したSVGの情報を付与する
    const svgData = new XMLSerializer().serializeToString(svg)
    img.src = `data:image/svg+xml;base64,${btoa(svgData)}`

    // 5.CanvasにSVG画像を描画させダウンロードする
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      //pngデータを指定、jpegにしたい場合はimage/jpegになる
      const pngUrl = canvas.toDataURL("image/png")
      const link = document.createElement("a")
      link.href = pngUrl
      link.download = "qr-code.png"
      link.click()
    }
  }

  return (
    <>
      <button onClick={downloadQrCode} disabled={!isReady}>
        QRコードダウンロード
      </button>
      {/* display:noneで隠しています */}
      <div ref={qrRef} className="hidden">
        <QRCodeSVG value={url} size={512} level="H" />
      </div>
    </>
  )
}
```

別途、手順4の解説

- `new XMLSerializer().serializeToString(svg)`について
  - 取得したSVGデータをXML文字列に変換しています。
  - `new XMLSerializer()`でインスタンスの作成、`.serializeToString(svg)`メソッドを呼び出し、SVG要素をXML形式の文字列に変換しています！

- `img.src = data:image/svg+xml;base64,${btoa(svgData)}`
  - データURL（data:スキーム）は、ファイルの内容を直接URLに埋め込む方法になります！
    通常のURLがリソースの「場所」を指定するのに対し、データURLはリソースの「内容」自体を含みます。
  - `btoa()`はJavaScriptの組み込み関数で、文字列をBase64形式にエンコードします。Base64エンコードは、バイナリデータやテキストデータを、ASCII文字のみを使用して表現するための方法になります！
  - `data:image/svg+xml;base64,${btoa(svgData)}`の処理
    - `btoa(svgData)`で、SVGのXML文字列をBase64エンコード
    - `data:image/svg+xml;base64,${エンコードされたデータ}`という形式のデータURLを作成
      - `data`
        - データURLであることを示すプロトコル識別
      - `image/svg+xml`
        - MIMEタイプ（コンテンツの種類がSVG画像であることを示す）
      - `base64`
        - エンコード方式がBase64であることを示す
      - `,`
        - ヘッダーとデータを区切る区切り文字
      - `${btoa(svgData)}`
        - Base64エンコードされたSVGデータ

一見何してんだ？となりますが、分解すれば理解できると思います！

## 最終的なコード

```tsx title="React" showLineNumbers
"use client"

import { QRCodeSVG } from "qrcode.react"

export function QrCodeDownloadButton({ profileIdPromise, clientRoleType }: Props) {
  // ~~~~ 省略（useRef, useState, useEffect）~~~~
  const url = "https://to-ko-s.com"

  const downloadQrCode = () => {
    // 1.useRefでアクセス
    const svg = qrRef.current?.querySelector("svg")
    if (!svg) return

    // 2.Canvas要素の作成 + Canvas要素のサイズ指定
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext("2d")
    if (!ctx) return
    // display:noneの要素ではclientWidth/clientHeightが0になるため、QRCodeSVGのsizeと同じ値を直接指定
    const size = 512
    const pixelRatio = window.devicePixelRatio || 1
    canvas.width = size * pixelRatio
    canvas.height = size * pixelRatio

    // 3.img要素を作成
    const img = new Image()

    // 4.作成したimg要素に取得したSVGの情報を付与する
    const svgData = new XMLSerializer().serializeToString(svg)
    img.src = `data:image/svg+xml;base64,${btoa(svgData)}`

    // 5.CanvasにSVG画像を描画させダウンロードする
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      //pngデータを指定、jpgにしたい場合はimage/jpgになる
      const pngUrl = canvas.toDataURL("image/png")
      const link = document.createElement("a")
      link.href = pngUrl
      //qr-code.pngとしてダウンロード
      link.download = "qr-code.png"
      link.click()
    }
  }

  return (
    <>
      <button onClick={downloadQrCode} disabled={!isReady}>
        QRコードダウンロード
      </button>
      {/* display:noneで隠しています */}
      <div ref={qrRef} className="hidden">
        <QRCodeSVG value={url} size={512} level="H" />
      </div>
    </>
  )
}
```

## さいごに

今回はReactでQRコードのダウンロードボタンを作成しました！
url部分をPropsで受け取れば汎用的なコンポーネントになるかと思います！
Blobデータを扱う際は、理解していないと何をしているかわからなくなるため、Blobデータとは何かを学ぶいいきっかけになりました！


---

## 【Rails】標準機能ではできないバリデーションをカスタムメソッドで解決！

- URL: https://blog.to-ko-s.com/articles/custom-method-validation
- 著者: 塩見直樹
- 公開日: 2025-03-03
- タグ: Rails

> Railsの標準バリデーションでは対応できない複雑な要件を、カスタムメソッドで実装する方法をユースケース別にコード例付きで解説。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回はRailsのバリデーションに関する記事になります。

バリデーションはアプリケーションの品質を保つ為の重要な要素です。
基本的な文字数制限等のバリデーションであればRailsの標準機能で対応できますが、それでは対応できないケースに出会うことがあります。
そのような場合にカスタムメソッドを活用し、要件を満たす方法を紹介します。

<ExternalLink url="https://railsguides.jp/active_record_validations.html" />

この記事では以下の内容について取り上げています。

- Railsの標準バリデーションの紹介
- カスタムメソッドの必要性
- ユースケースごとの実装例

### 対象読者

- Rails初学者の方

## Railsの標準バリデーションの紹介

### 空でないことを検証（presence）

属性の値が空でないことを確認します。

```ruby title="Ruby"
validates :title, presence: true
```

### 一意性の検証（uniqueness）

属性の値が一意であることを確認します。

```ruby title="Ruby"
validates :email, uniqueness: true
```

### フォーマットの検証（format）

属性の値が指定した正規表現と一致するか確認します。
今回`with`で指定している正規表現はメールアドレス用フォーマットの正規表現になります。

```ruby title="Ruby"
validates :email, format: { with: /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i }
```

### 数値であることを検証（numericality）

属性の値が数値のみか確認します。
`greater_than`は`numericality`のオプションで指定した数値より大きいかを確認しています。

```ruby title="Ruby"
validates :price, numericality: { greater_than: 0 }
```

### 値の長さを検証（length）

属性の値が文字列で指定された文字数かどうかを確認します。
`minimum`, `maximum`は`length`のオプションで最低値と最高値を指定しています。

```ruby title="Ruby"
validates :password, length: { minimum: 6, maximum: 20 }
```

他にもバリデーションとオプションが多数あるので気になる方は以下を参照してください！

<ExternalLink url="https://railsguides.jp/active_record_validations.html" />

## カスタムメソッドの必要性

Railsには上記のような便利なバリデーションが標準機能としてあります。
基本的なバリデーションは標準機能で事が済みますが、複雑な要件を満たすためには、独自のバリデーションが不可欠になってきます。
それらをユースケースとともに紹介していきます！

## ユースケースごとの実装例

### 複数のカラムを組み合わせたバリデーション

標準のバリデーションでは、2つ以上の属性の関係性を考慮できません。
なので、カスタムメソッドで実装していきます。
例：開始日と終了日を設定する場合に、「終了日が開始日よりも後でなければいけない」というバリデーションを追加したい。

```ruby title="Ruby" showLineNumbers
class Reservation < ApplicationRecord
  validate :end_date_after_start_date

  def end_date_after_start_date
    if end_date <= start_date
      errors.add(:end_date, "終了日は開始日より後の日付を選択してください")
    end
  end
end
```

`if end_date <= start_date`で、終了日が開始日より後かの判定をしています。
`errors.add`を使用して、終了日が開始日と同日かそれ以前の場合のエラーメッセージを設定しています。
同日かそれ以前だった場合に、「終了日は開始日より後の日付を選択してください」とエラーメッセージが表示されます。

### 他のモデルのデータと比較するバリデーション

標準のバリデーションでは、他のモデルのデータとの比較できません。
例：注文する場合に、「注文数が在庫数を超えていたら注文できない」というバリデーションを追加したい。

```ruby title="Ruby" showLineNumbers
class Order < ApplicationRecord
  validate :stock_must_sufficient

  def stock_must_sufficient
    if quantity > product.stock
      errors.add(:quantity, "注文数が在庫数を超えています。")
    end
  end
end
```

`if quantity > product.stock`で、注文数が在庫数を超えているかの判定をしています。
超えていた場合に、「注文数が在庫数を超えています」とエラーメッセージが表示されます。

### 他のレコードと比較が必要なバリデーション

標準のバリデーションでは、他のレコードの情報を参照できません。
例：レンタルスペースで、「各部屋は1つの時間帯に1つの予約しかできない」というバリデーションを追加したい。

```ruby title="Ruby" showLineNumbers
class Reservation < ApplicationRecord
  validate :no_time_overlap

  def no_time_overlap
    if Reservation.where(room_id: room_id)
                  .where.not(id: id)
                  .where("start_time < ? AND end_time > ?", end_time, start_time)
                  .exists?
      errors.add(:base, "この時間帯はすでに予約されています")
    end
  end
end
```

`.where(room_id: room_id)`で部屋の情報を取得し、`.where.not(id: id)`で自分自身の`id`を除外しています。予約を更新する場合、自分自身の`id`を考慮していないとエラーが発生するからです。
`.where("start_time < ? AND end_time > ?", end_time, start_time)`で他の予約との時間が被っていないかを確認しています。
最後に`.exists?`で条件に合うレコードが存在したら`true`を返し、「この時間帯はすでに予約されています」とエラーメッセージが表示されます。

## おわりに

今回はRailsのカスタムメソッドでのバリデーションについての紹介をしました。
大体のバリデーションは標準機能で実装できますが、複雑な要件などでは実装できない場合もあります。
そのような場合は、独自のカスタムメソッドを作成し、バリデーションを柔軟に実装していきましょう！


---

## 【初学者向け】Three.jsで3D空間に光源を追加する

- URL: https://blog.to-ko-s.com/articles/three-js-light
- 著者: 杉田侑祐
- 公開日: 2025-02-22
- タグ: JavaScript

> この記事ではThree.jsの3Dオブジェクトを表示するための光源Lightを解説しています。Three.jsやWebGLについて学ぶことができます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はThree.jsで前回表示した3Dオブジェクトに光源を追加していきたいと思います。
Three.jsを触ったことない方に向けて解説しますので、最後まで見ていただけると幸いです！

この記事では、以下の内容について詳しく解説します：

- Three.jsの光源について

前回の記事はこちら:

<InternalLink slug="init-three-js" />

<InternalLink slug="three-js-mesh" />

### 対象読者

- Three.jsを使用したことのない方
- JavaScriptを用いたアニメーションに興味のある方

### この記事で扱う内容、扱わない内容

この記事で扱う内容:

- 光源の解説
- 3Dオブジェクト(Geometry・Material・Mesh)の解説

この記事で扱わない内容:

- JavaScriptの基本的な使用方法

### 今回の成果物

今回は前回表示した3Dオブジェクトに対して様々な「光源」を追加していきます。
光源によって印象が大きく左右されます。
今回は様々な「光源」を紹介します。

### 前回までのコード

```javascript
let scene, camera, renderer

window.addEventListener("load", init)

function init() {
  // シーン
  scene = new THREE.Scene()

  // カメラ
  camera = new THREE.PerspectiveCamera(
    50, //視野角
    window.innerWidth / window.innerHeight, //アスペクト比
    0.1, //開始地点
    1000, //終了地点
  )

  //レンダラー
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  renderer.setPixelRatio(devicePixelRatio) //デバイスの解像度に最適化する
  renderer.setClearColor(0x000000, 1) //背景色を黒に設定（第1引数：色、第2引数：透明度）

  //ジオメトリ
  let ballGeometry = new THREE.SphereGeometry(100, 64, 32) //球体のジオメトリの設定

  //マテリアル
  let texture = new THREE.TextureLoader().load("./textures/Water.jpg") //画像の読み込み
  let ballMaterial = new THREE.MeshPhysicalMaterial({
    map: texture, // 画像の指定
    color: 0x66ffff, // 青色を追加
    metalness: 0.4, // 金属度を低く設定
    roughness: 0.5, // 粗さを中程度に設定
  })
}

function animate() {
  // フレーム単位でアニメーションを読み込む
  requestAnimationFrame(animate)
  //レンダリングの記述
  renderer.render(scene, camera)
}
```

## 光源の概要

光源を追加することで3Dオブジェクトを表示できるようになります。
Three.jsでは様々な光源の種類があり、印象が変わります。光源の概要を紹介していきます。

<Callout variant="memo">
  Three.jsでは光源の`Helper`関数があります。
  `Helper`関数を使うことにより光源の位置を可視化でき、より効率的に開発を進めることができます。
</Callout>

## 環境光源（AmbientLight）の概要

前章の最後に光源を追加しました。
追加した光源は`Scene`に対して全体を明るくする`AmbientLight`になります。
`AmbientLight`は方向性を持たない光源で、シーン全体を均一に照らします。
影を作らず、全てのオブジェクトに均一な明るさを与えてくれます！

<ExternalLink url="https://threejs.org/docs/#api/en/lights/AmbientLight" />

```javascript title="JavaScript" showLineNumbers
//環境光の追加
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8) //環境光源の呼び出し、第一引数:光源の色、第二引数:光の強さ
scene.add(ambientLight) //Sceneに追加
```

![AmbientLightで均一に照らされた3D球体の表示結果](/articles/937c9fac01875f36b2c4f43eed72ab91-1024x559.webp)

## 平行光源（DirectionalLight）の概要

太陽光のように、一方向から平行に光を照射します。
光源の位置よりも方向が重要になります!

<ExternalLink url="https://threejs.org/docs/#api/en/lights/DirectionalLight" />

```javascript title="JavaScript" showLineNumbers
//平行光源の追加
const directionalLight = new THREE.DirectionalLight(0xffffff, 3) //平行光源の呼び出し、第一引数:光源の色、第二引数:光の強さ
directionalLight.position.set(5, 10, 7.5) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸
scene.add(directionalLight) //Sceneに追加
```

![DirectionalLightで一方向から照らされた3D球体の表示結果](/articles/a57b0d7015f128dcc757012df9df04dd-1024x560.webp)

## 点光源（PointLight）の概要

点光源は空間内の1点から全方向に光を放射します。電球のように、光源からの距離に応じて光の強さが減衰します!

<ExternalLink url="https://threejs.org/docs/#api/en/lights/PointLight" />

```javascript title="JavaScript" showLineNumbers
const pointLight = new THREE.PointLight(0xffffff, 5, 1000, 1.0) //点光源の呼び出し、第一引数:光源の色、第二引数:光の強さ、第三引数:距離、第四引数:減衰率
pointLight.position.set(0, 0, 500) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸
scene.add(pointLight) //Sceneに追加
```

![PointLightで前方から照らされた3D球体の表示結果](/articles/4b335b59f7c28659edea1eed48588073-2-1024x560.webp)

## スポット光源（SpotLight）の概要

点から円錐状に光を照射する光源で、舞台照明のような効果を作り出せます。

<ExternalLink url="https://threejs.org/docs/#api/en/lights/SpotLight" />

```javascript title="JavaScript" showLineNumbers
const spotLight = new THREE.SpotLight( //スポット光源の呼び出し
  0xffffff, // 第一引数:光源の色、
  1, // 第二引数:光の強さ
  500, // 第三引数:最大距離
  Math.PI / 10, // 第四引数:角度
  0.5, // 第五引数:エッジのぼかし具合
  0, // 第六引数:減衰率
)
spotLight.position.set(100, 100, 300) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸
scene.add(spotLight) //Sceneに追加
```

![SpotLightで円錐状に照らされた3D球体の表示結果](/articles/97bb5f7bfa7c62b4b6525bb0364da842-1024x561.webp)

スポット光源についてはイメージしづらいと思うのでHelper関数で光源の状況を可視化してみたいと思います。

```javascript title="JavaScript" showLineNumbers
const spotLightHelper = new THREE.SpotLightHelper(spotLight) //スポット光源のHelper関数の呼び出し
scene.add(spotLightHelper) //Sceneに追加
```

![SpotLightのHelper関数で光源の円錐形を可視化した表示結果](/articles/32e8ce161341069b2cf4c2a1b4103dd1-1024x562.webp)

円錐で表示されているものが、`Helper`関数によって可視化された光源です。
点から円錐状に広がっていることがわかります！

## 半球光源（HemisphereLight）の概要

上方向と下方向で異なる色を指定でき、色の境界はグラデーションのようにできます！

<ExternalLink url="https://threejs.org/docs/#api/en/lights/HemisphereLight" />

```javascript title="JavaScript" showLineNumbers
const hemisphereLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 1) //半球光源の呼び出し、第一引数:上方向の光源の色、第二引数:下方向の光源の色、第三引数:光の強さ
hemisphereLight.position.set(0, 10, 0) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸
scene.add(hemisphereLight) //Sceneに追加
```

![HemisphereLightで上下異なる色に照らされた3D球体の表示結果](/articles/ad0aefd2ec6a3f7df712fbc9bf6aebf1-1024x556.webp)

## 矩形光源（RectAreaLight）の概要

矩形光源は平面の光源で、窓からの光や蛍光灯のような柔らかい光を表現できます！

<ExternalLink url="https://threejs.org/docs/#api/en/lights/RectAreaLight" />

```javascript title="JavaScript" showLineNumbers
const rectLight = new THREE.RectAreaLight( //矩形光源の呼び出し
  0xffffff, // 第一引数:光源の色
  2, // 第二引数:光の強さ
  100, // 第三引数:光源幅
  100, // 第四引数:光源高さ
)
rectLight.position.set(0, -100, 100) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸今回は下から照らしています
rectLight.rotation.x = Math.PI * 0.5 // 光源の角度
scene.add(rectLight) // 光源をシーンに追加
```

### 様々な光源を追加する

ここからは様々な光源を追加していきます。
演出したい内容によって使用する光源が変わります！
今回は下記を使用していきます。

- 環境光源（AmbientLight）
  - ベースとなる光源
- 平行光源（DirectionalLight）
  - メインの光源、太陽光のようなイメージ
- 半球光源（HemisphereLight）
  - 影の部分を柔らかく照らす
- 点光源（PointLight）
  - アクセント用

このように何種類かの光源を追加することにより見栄えが大きく左右されます！

```javascript title="JavaScript" showLineNumbers
// 環境光源
const ambientLight = new THREE.AmbientLight(0x404040, 0.5)
scene.add(ambientLight)

// 平行光源
const mainLight = new THREE.DirectionalLight(0xffffff, 1)
mainLight.position.set(5, 10, 7.5)
scene.add(mainLight)

// 半球光源
const hemisphereLight = new THREE.HemisphereLight(0x8888ff, 0x444422, 0.5)
scene.add(hemisphereLight)

// 点光源
const pointLight = new THREE.PointLight(0xffffff, 5, 2000, 0.5)
pointLight.position.set(200, 200, 200)
scene.add(pointLight)
```

![複数の光源を組み合わせて照らした3D球体の表示結果](/articles/6ebdf7a13b44e8c735b85056c1d38525-1024x564.webp)

### 点光源（PointLight）にアニメーションを加える

ここから点光源にアニメーションを追加していきます。
点光源が3Dオブジェクトを中心に周回するアニメーションを実装します。
光源の位置(Position)をフレームごとに更新する必要があるため、`animate()`に追記していきます。

```javascript title="JavaScript" showLineNumbers
let scene, camera, renderer, controls, pointLight //pointLightをグローバルに扱うようにする

function init() {
  //省略
  pointLight = new THREE.PointLight(0xffffff, 5, 2000, 0.5)
  //pointLight.position.set(200, 200, 200); positionを削除
  scene.add(pointLight)

  //Helper関数
  //const pointLightHelper = new THREE.PointLightHelper(pointLight, 20);
  //scene.add(pointLightHelper);

  //省略
}

function animate() {
  //ポイント光源の座標を動かす
  pointLight.position.set(
    200 * Math.sin(Date.now() / 1000),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 1000),
  )

  //省略
}
```

下記が完成状態になります！
わかりやすいようにHelper関数を追加しています。
斜め45度で点光源が周回していることがわかると思います。

<Video src="/articles/three-js-light.mp4" />

計算式の解説は下記になります。
（計算式を知りたい方は生成AIに投げてみてください！）

- 計算式について
  - Date.now() / 1000
    - 現在時刻をミリ秒単位で取得し、1000で割ることで秒単位に変換
    - 時間の経過とともに連続的に変化する値を生成
  - 座標の計算
    - X軸：200 \* Math.sin(時間)
    - Y軸：200 \* Math.sin(時間)
    - Z軸：200 \* Math.cos(時間)

- 解説
  - なぜ45度になるか
    - x = yとなるため、XY平面上では y = x という直線上を移動することになり45度になります！
  - 空間での軌道
    - XY平面での直線運動とZ軸方向の周期運動が組み合わさることによって滑らかで周期的なアニメーションが実現されます

## 最終的なコード

```javascript title="JavaScript" showLineNumbers
let scene, camera, renderer, pointLight

window.addEventListener("load", init)

function init() {
  // シーン
  scene = new THREE.Scene()

  // カメラ
  camera = new THREE.PerspectiveCamera(
    50, //視野角
    window.innerWidth / window.innerHeight, //アスペクト比
    0.1, //開始地点
    1000, //終了地点
  )
  //カメラの位置の変更
  camera.position.set(0, 0, +500)

  //レンダラー
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  renderer.setPixelRatio(devicePixelRatio) //デバイスの解像度に最適化する
  renderer.setClearColor(0x000000, 1) //背景色を黒に設定（第1引数：色、第2引数：透明度）

  //ジオメトリ
  let ballGeometry = new THREE.SphereGeometry(100, 64, 32) //球体のジオメトリの設定

  //マテリアル
  let texture = new THREE.TextureLoader().load("./textures/Water.jpg") //画像の読み込み
  let ballMaterial = new THREE.MeshPhysicalMaterial({
    map: texture, // 画像の指定
    color: 0x66ffff, // 青色を追加
    metalness: 0.4, // 金属度を低く設定
    roughness: 0.5, // 粗さを中程度に設定
  })

  //メッシュ = ジオメトリ + マテリアル
  let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial)
  //シーンに追加
  scene.add(ballMesh)

  // 環境光源
  const ambientLight = new THREE.AmbientLight(0x404040, 0.5)
  scene.add(ambientLight)

  // 平行光源
  const mainLight = new THREE.DirectionalLight(0xffffff, 1)
  mainLight.position.set(5, 10, 7.5)
  scene.add(mainLight)

  // 半球光源
  const hemisphereLight = new THREE.HemisphereLight(0x8888ff, 0x444422, 0.5)
  scene.add(hemisphereLight)

  // 点光源
  pointLight = new THREE.PointLight(0xffffff, 5, 2000, 0.5)
  pointLight.position.set(200, 200, 200)
  scene.add(pointLight)

  animate()
}

function animate() {
  //ポイント光源の座標を動かす
  pointLight.position.set(
    200 * Math.sin(Date.now() / 1000),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 1000),
  )

  // フレーム単位でアニメーションを読み込む
  requestAnimationFrame(animate)
  //レンダリングの記述
  renderer.render(scene, camera)
}
```

## さいごに

今回は光源について紹介しました！
光源で見栄えが変わるため、複数の選択肢が有るということを知っておくのはとても重要だと感じました！
また光源の追加・使用方法は簡単だったのではないでしょうか！
これで一通りのThree.jsの紹介は終わりになります！


---

## 【WordPress】管理画面へのアクセスをリダイレクトさせる設定方法

- URL: https://blog.to-ko-s.com/articles/wordpress-admin-redirect
- 著者: 成岡拓哉
- 公開日: 2025-02-16
- タグ: その他

> 【WordPress】管理画面へのアクセスをリダイレクトさせる設定方法を解説します。.htaccessを使った不正アクセス対策と特定IPの除外設定を紹介します。


## はじめに

株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はWordPressの管理画面へのアクセスを制限しリダイレクトを設定する方法について紹介します。
WordPressを運用していると、不正ログインや不正アクセスに悩むことがあると思います。特に`wp-admin`や`wp-login.php`への攻撃は多いため、適切な対策をしないとサイトの乗っ取りリスクが高まります。
そこで今回は、`.htaccess`を使って管理画面へのアクセスを制限する方法と特定のIPアドレスを除外する方法を紹介していきます。

### 対象読者

- `wp-admin`や`wp-login.php`への不正アクセスを防ぎたい方
- .htaccessを活用したアクセス制限・リダイレクト設定を学びたい方

### 前提

この記事では、レンタルサーバーのConoHa WINGを利用している前提で解説します。
他のサーバーでも基本的な設定は同じですが、一部設定方法が異なる場合がありますのでご注意ください。

## 設定方法

### 1. 管理画面へのアクセスをトップページへリダイレクトする

まず、`wp-admin`や`wp-login.php`へのアクセスをサイトのトップページへリダイレクトする方法を紹介します。

#### `.htaccess` に以下のコードを追加（WordPressのルートディレクトリに配置）

```apache title=".htaccess" showLineNumbers
<IfModule mod_rewrite.c>
  RewriteEngine On
  # wp-admin と wp-login.php へのアクセスをリダイレクト
  RewriteCond %{REQUEST_URI} ^(.*)?wp-login\.php(.*)$ [OR]
  RewriteCond %{REQUEST_URI} ^(.*)?wp-admin(.*)$
  RewriteRule .* https://sample.com/ [R=302,L]
</IfModule>
```

- `wp-login.php`と`wp-admin`へのアクセスをトップページ（`https://sample.com/`）にリダイレクト
- `R=302`は「一時的なリダイレクト」を意味します（永続的にリダイレクトする場合は`R=301`）

### 2. 指定したIPアドレスを除外する

サイトの運営者がWordPress管理画面にアクセスできるように、特定のIPアドレスを除外する設定をします。

#### .htaccess に以下のコードを追加

```apache title=".htaccess" showLineNumbers
<IfModule mod_rewrite.c>
  ...省略

  # 許可するIPアドレス
  RewriteCond %{REMOTE_ADDR} !^xxx.xxx.xxx.xxx$

  ...省略
</IfModule>
```

- `xxx.xxx.xxx.xxx`の部分を管理者のIPアドレスに変更してください。

- 複数のIPアドレスを許可する場合は`RewriteCond`の行を追加します。

上記の設定をすると、許可されたIPアドレスからのアクセスは管理画面にアクセスでき、それ以外のIPアドレスからのアクセスはトップページへリダイレクトされます。

### 3. その他の便利なリダイレクト方法

#### 許可されていないユーザーに403エラーを表示する

リダイレクトではなく、管理画面への不正アクセスを403 Forbidden（アクセス禁止）にする方法です。

```apache title=".htaccess" showLineNumbers
<IfModule mod_rewrite.c>
  ...省略

  RewriteRule .* - [R=403,L]
</IfModule>
```

#### 特定の国からのアクセスを制限する

国ごとにアクセス制限したい場合は、サーバーのGeoIPモジュールを利用して`.htaccess`に設定できます。

```apache title=".htaccess" showLineNumbers
SetEnvIf GEOIP_COUNTRY_CODE JP AllowCountry
Order Deny,Allow
Deny from all
Allow from env=AllowCountry
```

この設定では、日本（JP）からのアクセスのみ許可し、他の国からのアクセスを拒否します。

## さいごに

今回はWordPressの管理画面へのアクセスを制限しリダイレクトを設定する方法について紹介しました。
今回紹介した`.htaccess`の設定を活用することで、不正ログインや不正アクセスのリスクを大幅に軽減でき、WordPressのセキュリティを高めるのに有効です。
ぜひ参考にしてください。


---

## 【初学者向け】Three.jsで3Dオブジェクトを表示しよう！

- URL: https://blog.to-ko-s.com/articles/three-js-mesh
- 著者: 杉田侑祐
- 公開日: 2025-02-10
- タグ: JavaScript

> この記事ではThree.jsの3Dオブジェクトを表示するためのGeometry・Materialを解説しています。Three.jsやWebGLについて学ぶことが出来ます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はThree.jsで前回準備した表示環境に3Dオブジェクトを表示していきたいと思います。
Three.jsを触ったことない方に向けて解説しますので、最後まで見ていただけると幸いです！

この記事では、以下の内容について詳しく解説します：

1. 3Dオブジェクト(Geometry・Material・Mesh)の解説
2. 光源の追加とカメラの調整

前回の記事はこちら :

<InternalLink slug="init-three-js" />

### 対象読者

- Three.jsを使用したことのない方
- JavaScriptを用いたアニメーションに興味のある方

### この記事で扱う内容、扱わない内容

この記事で扱う内容:

- 光源の解説
- 3Dオブジェクト(Geometry・Material・Mesh)の解説

この記事で扱わない内容:

- JavaScriptの基本的な使用方法

### 今回の成果物

今回は天体をイメージした3Dオブジェクトの表示を目標とします。
以前の記事は3Dオブジェクトを表示するための「舞台」を準備しました。
その「舞台」に対して3Dオブジェクトを追加していく作業になります！

![Three.jsで表示した天体イメージの3D球体の完成図](/articles/005ad2258b9faba540b8f1e95139cb8e-1024x558.webp)

## 前回の振り返りと調整

前回最後に解説したコードから少し調整していきます。

<InternalLink slug="init-three-js" />

Three.jsで3Dシーンをスムーズにアニメーション化するために毎フレームごとにレンダリングさせる必要があります。
scene,camera,rendererをグローバルで宣言してから、`requestAnimationFrame()`メソッドを使用して再帰的に呼び出します。

また、rendererを調整します。
様々なモニターの解像度に最適に表示させるために`setPixelRatio()`メソッドを使用します。
`setPixelRatio()`メソッドは論理ピクセルに対する物理ピクセルの倍率を指定するメソッドになります。
フルHD(1920✕1080)だった場合は`setPixelRatio(1)` 、 4Kだった場合は`setPixelRatio(2)` となります。
今回は様々な解像度に対して最適に表示させたいため、引数には`window.devicePixelRatio`で取得した値を渡します。
さらに今回は背景を黒色にしたいため`setClearColor()`メソッドで背景色を指定します。
第一引数にカラー番号を指定します(今回は16進数)。第二引数に透明度になります。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame" />

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio" />

```javascript title="JavaScript" showLineNumbers
let scene, camera, renderer

window.addEventListener("load", init)

function init() {
  // シーン
  scene = new THREE.Scene()

  // カメラ
  camera = new THREE.PerspectiveCamera(
    50, //視野角
    window.innerWidth / window.innerHeight, //アスペクト比
    0.1, //開始地点
    1000, //終了地点
  )

  //レンダラー
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  renderer.setPixelRatio(devicePixelRatio) //デバイスの解像度に最適化する
  renderer.setClearColor(0x000000, 1) //背景色を黒に設定（第1引数：色、第2引数：透明度）
}

function animate() {
  // フレーム単位でアニメーションを読み込む
  requestAnimationFrame(animate)
  //レンダリングの記述
  renderer.render(scene, camera)
}
```

これで一旦準備完了です。

## 3Dオブジェクトの概要

ここから準備した「舞台」に対して3Dオブジェクトを追加します。
追加する前に重要な3つの概念を解説します。

Three.jsで3Dオブジェクトを作成する場合は、Geometry(ジオメトリ)・Material(マテリアル)を指定して作成出来ます。
Geometry = 形状
Material = 見た目
だと思ってください。
またこの2つを合わせたものが3Dオブジェクトになります。
この2つを合わせた3DオブジェクトをMesh(メッシュ)といいます。

## Geometry(ジオメトリ)の概要

Geometry = 形状と言いました。
「円」や「四角形」などGeometryで3Dオブジェクトの「形状」を決めます。
Three.jsでは様々なGeometryが用意されています。
例えばですが、四角形にBoxGeometry() メソッド 、円形だった場合はCircleGeometry() のようにある程度用意されています。

基本的なGeometry :

- BoxGeometry: 直方体/立方体を作成
- SphereGeometry: 球体を作成
- CylinderGeometry: 円柱を作成
- PlaneGeometry: 平面を作成
- CircleGeometry: 円形の平面を作成
- ConeGeometry: 円錐を作成
- TorusGeometry: ドーナツ形状を作成
- RingGeometry: 中空の円形を作成

気になる方は下記公式ドキュメントを参照してください。

<ExternalLink url="https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry" />

## Material(マテリアル)の概要

Material = 見た目と言いました。
3Dオブジェクトを「紙素材にしたい」や「金属素材にしたい」など3Dオブジェクトの見た目に関わることを決めます。
具体的には「色」「金属度」「鏡面度」「反射率」など細かく設定出来ます。
また読み込んだ画像素材を使用することも出来ます。

Materialメソッド一覧 :

- MeshBasicMaterial
  - もっともシンプルで軽量
  - ライティングの影響を受けない
  - 単色、ワイヤーフレーム、テクスチャマッピングが可能
- MeshStandardMaterial
  - roughness（粗さ）とmetalness（金属度）をサポート
  - 物理ベースレンダリング（PBR）対応
  - 現代的なゲームエンジンライクな表現が可能
- MeshPhysicalMaterial
  - MeshStandardMaterialの拡張版
  - clearcoat、transmission、sheenなどの高度な物理特性をサポート
  - フォトリアルな表現が可能
- MeshPhongMaterial
  - 光沢のある表面を表現
  - 鏡面反射（specular）のコントロールが可能
  - 比較的軽量で一般的な3D表現に適している
- MeshLambertMaterial
  - マットな表面を表現
  - 計算が軽量
  - 光沢のない物体の表現に適している
- MeshToonMaterial
  - セルシェーディング（アニメ調）の表現
  - 段階的な陰影表現が可能
- MeshNormalMaterial
  - 法線（normal）を色として表示
  - デバッグ用途によく使用される
- MeshDepthMaterial
  - カメラからの距離を白黒のグラデーションで表現
  - デプスマップの生成などに使用
- MeshMatcapMaterial
  - 事前計算された材質球の画像を使用
  - 軽量で高品質な表現が可能
- ShaderMaterial
  - 完全にカスタマイズ可能な表現
  - カスタムシェーダーを使用可能
- RawShaderMaterial
  - ShaderMaterialの派生
  - Three.jsの組み込みユニフォームやアトリビュートを含まない純粋なシェーダー
- LineBasicMaterial
  - 線を描画するための基本マテリアル
- LineDashedMaterial
  - 破線を描画するためのマテリアル
- PointsMaterial
  - パーティクル（点群）表示用のマテリアル
- SpriteMaterial
  - スプライト（常にカメラの方を向く平面）用のマテリアル
- ShadowMaterial
  - 影のみを表示するための特殊なマテリアル

## Mesh(メッシュ)の概要

形状(Geometry)と見た目(Material)をあわせたものになります。
Geometry + Material = Meshとなります。
準備した「舞台」にはMeshを表示することになります。

## Meshの作成

ここからは実際にコードを書いていきます。
今回の成果物は球体で少し金属感を出しています。

## Geometry(ジオメトリ)の作成

今回形状は球体です。
`SphereGeometry()` を使用します。

```javascript title="JavaScript" showLineNumbers
//ジオメトリ
let ballGeometry = new THREE.SphereGeometry(100, 64, 32) //球体のジオメトリの設定
```

`SphereGeometry()` 全てで7つ引数を渡すことが出来ます。今回は第三引数までしか使用しません。

引数について :

- 第一引数
  - radius（半径）
  - 球体の大きさ
  - デフォルト値: 1
- 第二引数
  - widthSegments（水平方向の分割数）
  - 球体の水平方向の分割数
  - 大きいほど滑らかになるが、処理が重くなる
  - デフォルト値: 32
- 第三引数
  - heightSegments（垂直方向の分割数）
  - 球体の垂直方向の分割数
  - 大きいほど滑らかになるが、処理が重くなる
  - デフォルト値: 16

他の引数が知りたい方は下記公式ドキュメントを参照してください。
デモも用意してあるため、触って調整してください。

<ExternalLink url="https://threejs.org/docs/index.html?q=geometry#api/en/geometries/SphereGeometry" />

## Material(マテリアル)の作成

ここからMaterialの作成を行います。
今回は金属感を出したいためMeshPhysicalMaterial() を使用します。
また、縞々模様には画像を使用したいと思います。

```javascript title="JavaScript" showLineNumbers
//マテリアル
let ballMaterial = new THREE.MeshPhysicalMaterial({
  color: 0x66ffff, // 青色を追加
  metalness: 0.4, // 金属度を低く設定
  roughness: 0.5, // 粗さを中程度に設定
})
```

引数にはオブジェクトで渡します。
今回は色を`color`で指定して、`metalness`で金属度を指定して、`roughness`で粗さを調整しています。
この他にもかなり細かく指定できます。
ここでは一覧表示も出来ない位なので、下記を参照してください。

<ExternalLink url="https://threejs.org/docs/index.html#api/en/materials/MeshPhysicalMaterial" />

さらに今回は画像を使用して模様を追加します。

```javascript title="JavaScript" showLineNumbers
//マテリアル
let texture = new THREE.TextureLoader().load("./textures/Water.jpg") //画像の読み込み
let ballMaterial = new THREE.MeshPhysicalMaterial({
  map: texture, // 画像の指定
  color: 0x66ffff, // 青色を追加
  metalness: 0.4, // 金属度を低く設定
  roughness: 0.5, // 粗さを中程度に設定
})
```

画像は下記よりダウンロードしてください。

[Water（ダウンロード）](/articles/Water.jpg)

## Mesh(メッシュ)の作成・sceneに追加

作成した、GeometryとMaterialを使用してMeshを作成します。

```javascript title="JavaScript" showLineNumbers
//メッシュ = ジオメトリ + マテリアル
let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial)

//シーンに追加
scene.add(ballMesh)
```

これで完成です。

下記が一旦の全体のコードです。

```javascript title="JavaScript" showLineNumbers
let scene, camera, renderer

window.addEventListener("load", init)

function init() {
  // シーン
  scene = new THREE.Scene()

  // カメラ
  camera = new THREE.PerspectiveCamera(
    50, //視野角
    window.innerWidth / window.innerHeight, //アスペクト比
    0.1, //開始地点
    1000, //終了地点
  )

  //レンダラー
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  renderer.setPixelRatio(devicePixelRatio) //デバイスの解像度に最適化する
  renderer.setClearColor(0x000000, 1) //背景色を黒に設定（第1引数：色、第2引数：透明度）

  //ジオメトリ
  let ballGeometry = new THREE.SphereGeometry(100, 64, 32) //球体のジオメトリの設定

  //マテリアル
  let texture = new THREE.TextureLoader().load("./textures/Water.jpg") //画像の読み込み
  let ballMaterial = new THREE.MeshPhysicalMaterial({
    map: texture, // 画像の指定
    color: 0x66ffff, // 青色を追加
    metalness: 0.4, // 金属度を低く設定
    roughness: 0.5, // 粗さを中程度に設定
  })

  //メッシュ = ジオメトリ + マテリアル
  let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial)

  //シーンに追加
  scene.add(ballMesh)

  animate()
}

function animate() {
  // フレーム単位でアニメーションを読み込む
  requestAnimationFrame(animate)
  //レンダリングの記述
  renderer.render(scene, camera)
}
```

## 光源の追加とカメラの調整

今ブラウザを見ても何も写っていないと思います。
なぜ作成した3Dオブジェクトが見えないかと言うと明かりが無いためです。
ここから表示するための「光源」を追加していきたいと思います。
光源もThree.jsでは重要な要素になります。
今回はとりあえず表示したいだけなので、「環境光」をinit関数に追加します。(次回は光源について深堀りします)

```javascript title="JavaScript" showLineNumbers
//環境光の追加
let ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
scene.add(ambientLight)
```

さらにカメラの位置を調整します。

```javascript title="JavaScript" showLineNumbers
//カメラの位置の変更
camera.position.set(0, 0, +500)
```

第一引数はX軸・第二引数はY軸・第三引数はZ軸になります。

## 最終的なコード

下記が今回の最終的なコードになります。

```javascript title="JavaScript" showLineNumbers
let scene, camera, renderer

window.addEventListener("load", init)

function init() {
  // シーン
  scene = new THREE.Scene()

  // カメラ
  camera = new THREE.PerspectiveCamera(
    50, //視野角
    window.innerWidth / window.innerHeight, //アスペクト比
    0.1, //開始地点
    1000, //終了地点
  )
  //カメラの位置の変更
  camera.position.set(0, 0, +500)

  //レンダラー
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  renderer.setPixelRatio(devicePixelRatio) //デバイスの解像度に最適化する
  renderer.setClearColor(0x000000, 1) //背景色を黒に設定（第1引数：色、第2引数：透明度）

  //ジオメトリ
  let ballGeometry = new THREE.SphereGeometry(100, 64, 32) //球体のジオメトリの設定

  //マテリアル
  let texture = new THREE.TextureLoader().load("./textures/Water.jpg") //画像の読み込み
  let ballMaterial = new THREE.MeshPhysicalMaterial({
    map: texture, // 画像の指定
    color: 0x66ffff, // 青色を追加
    metalness: 0.4, // 金属度を低く設定
    roughness: 0.5, // 粗さを中程度に設定
  })

  //メッシュ = ジオメトリ + マテリアル
  let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial)

  //シーンに追加
  scene.add(ballMesh)

  //環境光の追加
  let ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
  scene.add(ambientLight)

  animate()
}

function animate() {
  // フレーム単位でアニメーションを読み込む
  requestAnimationFrame(animate)
  //レンダリングの記述
  renderer.render(scene, camera)
}
```

## さいごに

今回はGeometry・Material・Meshの概要とMeshの表示まで行いました。
様々なGeometry・Materialが用意されています。
気になる方は公式ドキュメントを見てみてください。
また、次回は光源について深堀りしていきます。
次回の成果物予定は下記です。

<Video src="/articles/three-js-mesh.mp4" />


---

## 【初学者向け】Three.jsの概要とscene・camera・rendererについて

- URL: https://blog.to-ko-s.com/articles/init-three-js
- 著者: 杉田侑祐
- 公開日: 2025-02-03
- タグ: JavaScript

> この記事ではThree.jsの3Dオブジェクトを表示するための初期準備方法を説明しています。Three.jsやWebGLについて学ぶことが出来ます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はThree.jsの概要とscene・camera・rendererについて解説します。
Three.jsを触ったことない方に向けて解説しますので、最後まで見ていただけると幸いです！

この記事では、以下の内容について詳しく解説します：

- Three.jsの初期準備

### 対象読者

- Three.jsを使用したことのない方
- JavaScriptを用いたアニメーションに興味のある方

### この記事で扱う内容、扱わない内容

この記事で扱う内容:

- Three.jsの概要
- 3D空間に物体を表示する原理

この記事で扱わない内容:

- JavaScriptの基本的な使用方法

## Three.jsの概要

WebGLをベースにした3Dグラフィックスを作成するためのJavaScriptライブラリです！
WebGLは直接扱うと複雑ですが、Three.jsを使うことで比較的簡単に3Dコンテンツを作成できるようになります！

## WebGLとは？

WebGL（Web Graphics Library）は、Webブラウザ上で2Dおよび3DグラフィックスをレンダリングするためのローレベルなJavaScript APIです！
特徴は下記です。

- ブラウザ内で直接3Dグラフィックスを描画できる
- プラグインのインストールが不要
- HTML5の`<canvas>`要素上で動作する

## なぜThree.jsを使用するのか

1. 使いやすさ

- WebGLを直接扱うよりもはるかに簡単なAPIを提供してくれている
- JavaScriptの知識があれば、3Dグラフィックスの作成が可能
- 豊富なドキュメントとサンプルコードが利用可能

2. ライブラリがThree.jsしかない

上記の理由で3Dグラフィックを実装しようとすると現状Three.jsを使うことになると思います！

## 筆者が思うThree.jsの難しさ

簡単とは言ってもWebGLを扱うので、いつも書いているJavaScriptとは少々勝手が違います！
理由としては、普段僕らが使用しているJavaScriptはCPUに命令を出していますが、WebGLはGPUに命令を出します！

CPUの特徴

- 少量データを高速で計算させる

GPUの特徴

- 大量データを一気に計算させる

こんな違いがあります。
WebGLは座標計算など多くの計算を行うためGPUを主に使用します。
そんなことで今まで触れてこなかった概念等が度々出現します。

### CPUとGPUについて

簡単に言うと、CPUは「スーパーカー」。少人数しか乗れないけどすごく速い。
GPUは「バス」。速度はそこまでないけど、一度で多くの人数が運べる。
人数を処理量と考えてください。

また上記の他にZ軸を扱うこともあり2Dのアニメーションとは違い少々複雑な数学的な知識を必要とします。
逆に数学が得意だよって方は自由にアニメーションさせることができるなと感じます。

## 初期準備

今回はThree.jsを用いて3Dオブジェクトを表示する準備を解説します。
どのThree.jsを用いたプロジェクトでもほぼほぼ同じ記述になると思います。
ここからは3Dオブジェクトを表示させるための重要な概念を解説します。

## 3Dオブジェクトを表示する仕組み

Three.jsでは3Dオブジェクトを表示するための重要な概念が存在します。

- 【scene】シーン
  - 舞台のようなもの
- 【camera】カメラ
  - シーンを映す
- 【renderer】レンダラー
  - シーンとカメラをつなげる役割

想像しづらいと思うので図を作成しました。

![Three.jsのscene・camera・rendererの関係を示す概念図](/articles/Group-171-1024x733.webp)

3D空間にあるsceneをcameraが写しrendererで接続し表示するという流れになります。
この3つの重要な概念を必ず押さえるようにしましょう。
ここからはこの3つのscene・camera・rendererの準備を行います。

## Three.jsでscene・camera・rendererを準備する

では早速コードを記述してみたいと思います。

```javascript title="JavaScript" showLineNumbers
// シーン、カメラ、レンダラーの作成
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()

// レンダラーのサイズ設定
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
```

Threeクラスからインスタンスを作成していきます。
2行目でscene、3行目でcamera、4行目でrendererの作成をしています。
cameraの`new THREE.PerspectiveCamera`の引数は下記です。

- 【第一引数】カメラの垂直方向の視野角
  - 75度が一般的です。
- 【第二引数】カメラの視野のアスペクト比（幅/高さ）
  - 通常はcanvas要素のサイズに合わせる
- 【第三引数】カメラが描画を開始する最小距離
  - 一般的に0.1や1など小さい値を使用
- 【第四引数】カメラが描画する最大距離
  - この距離より遠いオブジェクトは描画されない

ここは表示したい3Dモデルによって変わってきます。3Dモデルによって調整しましょう。

イメージしづらい方は下記図を確認してみてください。

![PerspectiveCameraの視野角・アスペクト比・描画距離の関係図](/articles/Group-175-1024x803.webp)

では最後の7,8行目です。
ここでcanvas要素を生成しています。

- `new THREE.WebGLRenderer()`は内部で新しい`<canvas>`要素を作成
- この`<canvas>`要素は`renderer.domElement`としてアクセス可能
- `document.body.appendChild()`でその生成された`<canvas>`をDOMに追加

という記述になってます。

また、canvas要素を自動生成せず、既存のcanvas要素を指定することも可能です。下記はその例です。

```javascript title="JavaScript" showLineNumbers
// HTMLに既存のcanvas要素がある場合
const canvas = document.querySelector("#myCanvas")
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
})
```

これで準備が完了です。

ここからこの`scene`に対して3Dモデルの追加(ジオメトリ・メッシュ・マテリアル)と`scene`を明るくする光源を追加していきます。

## さいごに

今回はThree.jsの初の解説をしてみました。
Three.jsは知るべき概念が存在しているため、1つずつ押さえておく必要があります！
次回は3Dオブジェクトの追加と表示まで行ってみたいと思います！


---

## 【Shopify】ECサイトを簡単に多言語対応する方法

- URL: https://blog.to-ko-s.com/articles/shopify-ec-localization
- 著者: 成岡拓哉
- 公開日: 2025-01-19
- タグ: Shopify

> 【Shopify】ECサイトを簡単に多言語対応する方法を解説します。「Translate & Adapt」アプリを使った翻訳設定と言語セレクターの設置方法を紹介します。


## はじめに

株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はShopifyを使って構築したECサイトを多言語対応にする方法を紹介します。
Shopifyが提供している「Translate & Adapt」というアプリを使って多言語対応を簡単に実現する方法を解説します。

ECサイトを多言語対応することは海外の顧客をターゲットにするためにとても重要です。この記事を読めばあなたのECサイトがさまざまな言語に対応できます。

### 対象読者

- Shopifyを構築したECサイトを運営している方
- これからShopifyでECサイトを構築しようと考えている方

### 使用テーマ

Shopifyのテーマは`Dawn`を使用します。
別のテーマを使用する場合は細かい設定が異なることがあるのでご注意ください。

## 設定方法

### 1.Shopifyテーマの言語の追加

まずはShopifyのテーマを多言語対応にするための言語を追加していきます。

#### 言語の追加手順

1. Shopify管理画面「設定」>「言語」を選択

2. 任意の言語を追加

3. 追加した言語を公開

![Shopify管理画面の言語設定](/articles/ScreenShot-2025-01-20-3.42.26-1024x676.jpg)

![言語の追加画面](/articles/ScreenShot-2025-01-20-3.42.40-1024x681.jpg)

![追加した言語の公開](/articles/ScreenShot-2025-01-20-3.42.55-1024x671.jpg)

### 2.Translate & Adaptアプリのインストール

次に、Shopifyのアプリ「Translate & Adapt」をインストールします。
「Translate & Adapt」は追加した言語の翻訳文を作成するためのアプリで、商品のタイトル、説明文、各ページのタイトルやコンテンツなど、ECサイト内のさまざまなコンテンツを簡単に翻訳できます。

#### インストール手順

1. Shopify管理画面から「アプリ」>「Shopify App Store」を開き、「Translate & Adapt」を検索

2. アプリのページに移動しアプリをインストール

### 3.翻訳の追加方法

アプリのインストールが完了したら翻訳文の追加をしていきます。

#### Translate & Adapt の項目一覧

| 項目名                       | 翻訳できる内容                                                                                                        |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| コレクション                 | コレクションのタイトル、説明文                                                                                        |
| 商品                         | 商品のタイトル、説明文、URLハンドル、商品タイプ                                                                       |
| ブログ記事                   | ブログ記事のタイトル、コンテンツ、抜粋文、URLハンドル                                                                 |
| ブログタイトル               | ブログのタイトル、URLハンドル                                                                                         |
| Cookieバナー                 | プライバシーポリシーリンク、タイトル、本文、設定管理ボタン、承諾ボタン、拒否ボタン、プライバシーポリシーURLのハンドル |
| 絞り込み                     | 各絞り込みのLabel部分                                                                                                 |
| メタオブジェクト             | メタオブジェクトのLabel部分                                                                                           |
| ページ                       | 各ページのタイトル、コンテンツ、URLハンドル、メタタイトル、メタディスクリプション                                     |
| ポリシー                     | 各ページのコンテンツ                                                                                                  |
| ストアのメタデータ           | トップページのメタタイトル、メタディスクリプション                                                                    |
| メニュー                     | 各メニューのタイトル、メニュー項目                                                                                    |
| 埋め込みアプリ               | アプリによる                                                                                                          |
| デフォルトのテーマコンテンツ | テーマでデフォルトで設定されている項目                                                                                |
| セクショングループ           | ヘッダーグループやフッターグループの内容                                                                              |
| 静的セクション               | テーマ内の静的なセクション                                                                                            |
| テンプレート                 | 各ページのテンプレート内の動的セクション                                                                              |
| テーマ設定                   | テーマ内のロゴやSNSリンク                                                                                             |
| 通知                         | 商品の注文や購入、返品の際の通知                                                                                      |
| 配送と配達                   | 配送方法の名称、明細表                                                                                                |

今回は「私たちについて」ページの翻訳文を設定してみます。

#### 翻訳文設定手順

1. Translate & Adaptのアプリを開く

2. 翻訳文を追加したい項目を選択(今回はページ)

3. 画面中央上部から翻訳文を作成する言語を選択

4. 翻訳文を追加したいページを選択(私たちについて)

5. 左側にデフォルトの言語、右側に翻訳したい言語が表示されるので、右側に翻訳文を入力(2言語までAIによる自動翻訳が可能)

![Translate & Adaptアプリの画面](/articles/ScreenShot-2025-01-20-3.50.15-1024x676.jpg)

![翻訳するページの選択](/articles/ScreenShot-2025-01-20-3.50.31-1024x675.jpg)

![翻訳文の入力画面](/articles/ScreenShot-2025-01-20-3.50.44-1024x679.jpg)

### 4.言語セレクターの設置

#### セレクター表示手順

1. Shopify管理画面「オンラインストア」>「テーマ」>「カスタマイズ」を選択

2. ヘッダーセクションから「言語セレクターを表示」を有効化

<Callout>
一部のテーマでは「言語セレクター」の表示設定がデフォルトで有効になっていない場合があり、その場合テーマのコードを編集する必要があります。
</Callout>

## マーケットについて

今回はECサイト内で複数の言語を表示するための多言語対応について紹介しましたが、特定の国や地域向けに通貨、価格設定、税率、配送設定などを実施するためのマーケット機能もShopifyには存在します。そちらの設定方法も別の記事で紹介します。

## 終わりに

今回はShopifyを使って構築したECサイトを多言語対応にする方法を紹介しました。
この記事を参考にShopifyが提供している「Shopify Translate & Adapt」というアプリを使って多言語対応をしてみてください。


---

## 【CSS JS】季節に合わせたページデザイン：お正月

- URL: https://blog.to-ko-s.com/articles/css-newyear
- 著者: 寺田拓真
- 公開日: 2024-12-22
- タグ: HTML, CSS

> CSSとHTMLだけでお正月らしいページデザインを作る方法を紹介。鏡餅・門松・富士山などの装飾パーツや紅白ストライプ背景を、コード付きで簡単に再現できます。


## はじめに

みなさん、こんにちは！
12月も下旬、年末ムードがより濃くなってきました。

前回クリスマス用のページ作成パーツをCSSメインで作成する方法を紹介しました。

クリスマスがやって来るということは、お正月も合わせてやって来ます。
ということで、今回はお正月用のページ作成パーツをCSSメインで作成する方法を紹介します！

前回のクリスマス用のパーツに関する記事は以下を参照ください！

<InternalLink slug="christmas-css" />

## お正月用のデザインパーツ・背景

### 鏡餅

お正月といえばで連想するトップの1つは鏡餅ではないでしょうか？
HTMLとCSSのみでも立体的で本格的な鏡餅を作成できるので、ぜひお試しください！
以下にコードを示します。

![CSSで作成した鏡餅（台座・餅・みかん・葉の構成）](/articles/image-3-4.webp)

```html title="HTML" showLineNumbers
<div class="kagami-mochi">
  <!-- 鏡餅の台座 -->
  <div class="base"></div>
  <!-- 鏡餅 下段 -->
  <div class="mochi mochi-bottom"></div>
  <!-- 鏡餅 中段 -->
  <div class="mochi mochi-middle"></div>
  <!-- 鏡餅 みかん -->
  <div class="mikan">
    <div class="leaf"></div>
  </div>
</div>
```

```css title="CSS" showLineNumbers
/* 鏡餅全体 */
.kagami-mochi {
  position: relative;
  width: 200px;
}

/* 鏡餅の台座 */
.base {
  width: 220px;
  height: 20px;
  background-color: #8b4513;
  border-radius: 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* 鏡餅の各段 */
.mochi {
  position: absolute;
  background-color: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.mochi-bottom {
  width: 160px;
  height: 90px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.mochi-middle {
  width: 120px;
  height: 70px;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
}

/* 鏡餅のミカン */
.mikan {
  width: 50px;
  height: 50px;
  background-color: #ff8c00;
  border-radius: 50%;
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* ミカンの葉 */
.leaf {
  width: 30px;
  height: 15px;
  background-color: #228b22;
  border-radius: 10px 50px 50px 10px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);
}
```

1. **鏡餅の構造**
   下段と中段の餅を2つの白い円形（楕円形）で表現しています。
   `.mochi-bottom`（下段）と`.mochi-middle`（中段）にそれぞれ異なるサイズを設定して階層感を出しています。

2. **ミカン**
   ミカン部分は`.mikan`クラスを使用してオレンジ色の円形で表現。
   葉っぱは`.leaf`クラスで緑色の半楕円形を作成し、ミカンの上に配置しています。

3. **台座**
   `.base`を使用して茶色の長方形に角を丸めた形状で台座を再現。

4. **スタイリング**
   各要素に`box-shadow`を追加して立体感を出しています。

### 門松

鏡餅と共にお正月の代名詞ともいえる門松も作成します。

![CSSで作成した門松（竹・松・扇子・花・台座の構成）](/articles/image-5-3.webp)

```html title="HTML" showLineNumbers
<div class="kadomatsu">
  <!-- 竹 -->
  <div class="bamboo bamboo-left">
    <div class="cut"></div>
  </div>
  <div class="bamboo bamboo-center">
    <div class="cut"></div>
  </div>
  <div class="bamboo bamboo-right">
    <div class="cut"></div>
  </div>
  <!-- 松 -->
  <div class="pine">
    <div class="pine-branch"></div>
    <div class="pine-branch"></div>
    <div class="pine-branch"></div>
  </div>
  <!-- 装飾 -->
  <div class="decoration">
    <div class="fan"></div>
    <div class="flower"></div>
  </div>
  <!-- 台座 -->
  <div class="base"></div>
</div>
```

```css title="CSS" showLineNumbers
/* 門松全体 */
.kadomatsu {
  position: relative;
  width: 200px;
  height: 400px;
}

/* 竹 */
.bamboo {
  position: absolute;
  width: 40px;
  height: 200px;
  background-color: #228b22;
  border-radius: 20px;
  overflow: hidden;
}

.bamboo-left {
  left: 10px;
  bottom: 80px;
  height: 140px;
}

.bamboo-center {
  left: 80px;
  bottom: 80px;
  height: 180px;
}

.bamboo-right {
  left: 150px;
  bottom: 80px;
  height: 120px;
}

/* 竹の切り口 */
.cut {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #e0e0a8;
  clip-path: ellipse(50% 30% at 50% 0%);
}

/* 松 */
.pine {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pine-branch {
  width: 150px;
  height: 20px;
  background-color: #006400;
  border-radius: 10px;
}

/* 台座 */
.base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #8b4513;
  border-radius: 10px 10px 0 0;
}

/* 装飾（扇子） */
.decoration {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fan {
  width: 80px;
  height: 40px;
  background: linear-gradient(90deg, #ffcc00, #ff9900, #ffcc00);
  border-radius: 0 0 50% 50%;
  transform: rotate(180deg);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 装飾（花） */
.flower {
  width: 30px;
  height: 30px;
  background-color: #ff0000;
  border-radius: 50%;
  position: relative;
}

.flower::before,
.flower::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  border-radius: 50%;
}

.flower::before {
  top: -10px;
  left: 5px;
}

.flower::after {
  top: 5px;
  left: -10px;
}
```

1. **竹の再現**:
   - 竹は3本用意し、高さを異なるようにして配置。
   - `clip-path`を使用して切り口の丸みを表現しました。

2. **松の葉**:
   - 松の葉は複数の緑色の長方形を配置して表現しました。

3. **装飾（扇子と花）**:
   - 扇子は半円形をグラデーションで表現。
   - 花は赤い円形とその周囲に小さな円形を配置して再現。

4. **台座**:
   - 台座は茶色の長方形で作成し、角を丸めて安定感を出しました。

5. **全体のレイアウト**:
   - 各要素を`absolute`で配置し、門松全体のバランスを調整。

### 富士山

初日の出でもおなじみの富士山も作りましょう。

![CSSのborderで三角形を使って表現した雪をかぶった富士山](/articles/image-6-2.webp)

```html title="HTML" showLineNumbers
<div class="mount-fuji">
  <!-- 富士山本体 -->
  <div class="mountain"></div>
  <!-- 雪の部分 -->
  <div class="snow"></div>
</div>
```

```css title="CSS" showLineNumbers
/* 富士山全体 */
.mount-fuji {
  position: relative;
  width: 200px;
  height: 200px;
}

/* 富士山の本体 */
.mountain {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid #2e8b57; /* 山の緑色 */
}

/* 雪の部分 */
.snow {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 50px solid #ffffff;
  clip-path: polygon(0 100%, 25% 50%, 50% 100%, 75% 50%, 100% 100%);
}
```

1. **富士山本体**
   `.mountain`は`border-left`、`border-right`を透明にし、`border-bottom`に色を設定することで三角形を表現しています。

2. **雪の部分**
   `.snow`は三角形を作成し、`clip-path`を使ってギザギザした雪の形を作成しています。
   雪の形状を細かく変更する場合は、`clip-path: polygon`の数値を調整してください。

富士山の上部に潜らせる形でオレンジ色の円形を差し込み、富士山にかかる太陽を表現しても良いかと思います。

### 紅白の背景

背景に紅白の垂れ幕をイメージしたストライプを作成しましょう。
こちらはコード量も少なく簡単に再現できます。

![repeating-linear-gradientで作成した紅白ストライプの背景](/articles/image-8-1024x640.webp)

```html title="HTML" showLineNumbers
<div class="red-white-background"></div>
```

```css title="CSS" showLineNumbers
/* 紅白背景 */
.red-white-background {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #ff0000 0%, #ff0000 10%, #ffffff 10%, #ffffff 20%);
}
```

1. **背景のデザイン**
   `repeating-linear-gradient`を使用して、紅白のストライプを作成しています。
   `90deg`は横方向のストライプを指定しています。
   `#ff0000`が赤、`#ffffff`が白を表します。
   `0%`から`10%`までが赤、`10%`から`20%`までが白、これを繰り返して背景全体を埋めます。

2. **ストライプの幅を調整**
   `10%`や`20%`を変更することで、ストライプの幅を調整できます。
   例: `#ff0000 0%, #ff0000 15%, #ffffff 15%, #ffffff 30%`とすると、幅が広がります。

## おわりに

いかがでしたでしょうか。
お正月のパーツもCSSのみで簡単に作成できます。

また、色使いとしては赤色・金色・白色を組み合わせることでお正月らしさを表現できます。
赤色に関してはシンプルな赤色の他に朱色や紅色など、よりお正月らしさをイメージできる色があるので、そちらを使用するのもおすすめです！

![お正月らしさを演出する赤色・朱色・紅色のカラーパレット](/articles/image-4-1024x455.webp)

金色は例として下記の色にグラデーションを付けて高級感を出すのもおすすめです。

![お正月デザインに使える金色系のカラーパレット](/articles/image-7-1.webp)

CSSでのグラデーションのかけ方やその他、高級感のあるカラーなどは以下の記事でも紹介していますので、
気になる方はぜひご参照ください！

<InternalLink slug="css-elegant-gradation" />

どれも簡単に再現できるので、ぜひお試しください！


---

## 【CSS JS】季節に合わせたページデザイン：クリスマス

- URL: https://blog.to-ko-s.com/articles/christmas-css
- 著者: 寺田拓真
- 公開日: 2024-12-04
- タグ: HTML, CSS, JavaScript

> クリスマス向けのページデザインをHTML・CSS・JavaScriptで再現！雪が降る背景やイルミネーション、ツリー、雪だるま、プレゼントボックスなど季節感を演出できるパーツを紹介します。


## はじめに

みなさん、こんにちは！
今年も残すは12月、最近は寒くなってきて気づけば道に落ち葉が敷かれ始めてきましたね！

この時期に企業サイトや個人ブログを見ているとクリスマス用に少しデザインが変わっているサイトを見かけることが多いです。
そこで今回は、クリスマス用のデザインに使えるパーツや背景などをHTMLとCSSで再現しようと思います！

### 季節に合わせてデザインを変更するメリット

デザインを変更するのは運営側としては面倒ですが、以下のようなメリットがあります。

#### 季節感で訪問者の興味を引きつける

季節感を反映したデザインはユーザーに親しみやすさを感じさせ、感情的なつながりを強化します。
例えば春には桜や新緑、夏には海や青空、秋には紅葉や焼き芋、冬には雪やクリスマスのモチーフを使用します。

#### ブランドイメージの強化

次に、季節ごとにデザインを変更することでブランドが「流行に敏感」または「ユーザー志向」である印象を与えます。
アパレル業界や飲食業界は特にこの要素が必要とされます。

#### 販促やマーケティング効果の向上

上記のブランドイメージと関連して、季節に関連した商品やサービスのプロモーションが効果的になります。

- 冬：クリスマスセールやお正月キャンペーン。
- 春：新生活応援フェアや桜にちなんだ商品の特集。
- 夏：サマーバーゲンやビーチグッズのプロモーション。

季節限定感を演出することで、ユーザーに「今しか買えない」という印象を与えられます。

#### SEOやコンテンツ戦略のサポート

季節に関連したキーワードをデザインやコンテンツに取り入れることで、検索エンジンからの流入が増加します。
例として、「クリスマスギフト特集」や「夏のおすすめ商品」などのテーマに合わせたデザイン変更があります。

## クリスマス用のデザインパーツ・背景

### 背景に雪を降らせる

クリスマスと言えば雪ですよね！
背景に雪を降らせるコードを紹介します。
完成形は以下のようになります。

<Video src="/articles/christmas1.mp4" />

コードは以下になります。

```html title="HTML" showLineNumbers
<body>
  <div class="snow-container"></div>
  <script src="script.js"></script>
</body>
```

```css title="CSS" showLineNumbers
body {
  margin: 0;
  overflow: hidden; /* スクロールを防ぐ */
  background-color: black; /* 背景を黒に設定 */
}

.snow-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.snowflake {
  position: absolute;
  top: -10px; /* 画面上部から降り始める */
  color: white; /* 雪の色 */
  font-size: 10px; /* 雪のサイズ */
  opacity: 0.8; /* 少し透明感を追加 */
  pointer-events: none; /* 雪がクリックイベントを妨げない */
  animation: fall linear infinite;
}

/* 雪の落下アニメーション */
@keyframes fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) translateX(50px) rotate(360deg);
  }
}
```

```javascript title="JavaScript" showLineNumbers
const snowContainer = document.querySelector(".snow-container")

function createSnowflake() {
  const snowflake = document.createElement("div")
  snowflake.classList.add("snowflake")
  snowflake.textContent = "❄" // 雪の結晶の形

  // ランダムな初期位置とサイズを設定
  const size = Math.random() * 10 + 10 // 雪のサイズをランダムに (10px - 20px)
  snowflake.style.left = Math.random() * 100 + "vw" // 横方向のランダム位置
  snowflake.style.fontSize = `${size}px` // 雪のサイズを適用
  snowflake.style.animationDuration = Math.random() * 5 + 5 + "s" // 落下速度をランダムに
  snowflake.style.animationDelay = Math.random() * 5 + "s" // 落下開始をランダムに

  snowContainer.appendChild(snowflake)

  // アニメーション終了後に要素を削除
  snowflake.addEventListener("animationend", () => {
    snowflake.remove()
  })
}

// 定期的に雪の結晶を生成
setInterval(createSnowflake, 100)
```

### イルミネーションのような背景

クリスマスといえばイルミネーションもあると思います！
少し長くなりますが、CSSのみで再現できるのでぜひお試しください！

<Video src="/articles/christmas2.mp4" />

```html title="HTML" showLineNumbers
<div class="wrapper">
  <div class="colorizer1"></div>
  <div class="colorizer2"></div>
  <div class="colorizer3"></div>
  <div class="colorizer4"></div>
  <div class="circles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="title">メリークリスマス！！サンタが街にやってくる</div>
</div>
```

```css title="CSS" showLineNumbers
body {
  background: linear-gradient(90deg, #a82127 20%, #571d21 80%);
  background: -moz-linear-gradient(90deg, #a82127 20%, #571d21 80%);
  background: -webkit-linear-gradient(90deg, #a82127 20%, #571d21 80%);
  background: -o-linear-gradient(90deg, #a82127 20%, #571d21 80%);
  background-attachment: fixed;
}

.title {
  text-align: center;
  margin-top: 10%;
  color: #fff;
  font-size: 50px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -10;
}

.circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(5px);
}

.circle:nth-child(1) {
  background: #4edc2d;
  box-shadow: 0 0 8px 7px #4edc2d;
  bottom: 8%;
  left: -2%;
  width: 153px;
  height: 153px;
  opacity: 0.16;
  -webkit-animation: flash-3 5s infinite linear;
  animation: flash-3 5s infinite linear;
}

.circle:nth-child(2) {
  background: #e95744;
  box-shadow: 0 0 5px 4px #e95744;
  top: 10%;
  left: 0%;
  width: 110px;
  height: 110px;
  opacity: 0.4;
  -webkit-animation: flash-3 5s infinite linear;
  animation: flash-3 5s infinite linear;
}

.circle:nth-child(3) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 32%;
  left: 28%;
  width: 150px;
  height: 150px;
  opacity: 0.1;
  -webkit-animation: flash-3 8s infinite linear;
  animation: flash-3 8s infinite linear;
}

.circle:nth-child(4) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: -8%;
  left: 15%;
  width: 165px;
  height: 165px;
  opacity: 0.1;
  -webkit-animation: flash-3 4s infinite linear;
  animation: flash-3 4s infinite linear;
}

@-webkit-keyframes flash-3 {
  0% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.6;
    filter: blur(10px);
  }

  60% {
    opacity: 0.2;
    filter: blur(50px);
  }

  90% {
    opacity: 0.5;
    filter: blur(20px);
  }
  100% {
    opacity: 0.5;
    filter: blur(10px);
  }
}

@keyframes flash-3 {
  0% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.6;
    filter: blur(10px);
  }

  60% {
    opacity: 0.2;
    filter: blur(50px);
  }

  90% {
    opacity: 0.5;
    filter: blur(20px);
  }
  100% {
    opacity: 0.5;
    filter: blur(10px);
  }
}
```

### クリスマスツリー

ツリーもCSSのみで再現できます！
三角形を積み重ねるシンプルなものですが、アニメーションで星を光らせています。
簡単に作成できるのでお試しください！

![CSSで作成したクリスマスツリーと星のアニメーション](/articles/ScreenShot-2024-12-04-23.50.31.webp)

```html title="HTML" showLineNumbers
<div class="tree">
  <div class="star">★</div>
  <div class="layer layer-1"></div>
  <div class="layer layer-2"></div>
  <div class="layer layer-3"></div>
  <div class="trunk"></div>
  <div class="lights">
    <span class="light red"></span>
    <span class="light yellow"></span>
    <span class="light green"></span>
    <span class="light blue"></span>
  </div>
</div>
```

```css title="CSS" showLineNumbers
/* ツリー全体 */
.tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 星 */
.star {
  font-size: 50px;
  color: gold;
  margin-bottom: -10px;
  animation: twinkle 1.5s infinite alternate;
}

/* ツリーの各層 */
.layer {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #2ecc71 transparent;
  position: relative;
}

/* 層ごとの大きさ */
.layer-1 {
  border-width: 0 60px 60px 60px;
}

.layer-2 {
  border-width: 0 80px 80px 80px;
  margin-top: -10px;
}

.layer-3 {
  border-width: 0 100px 100px 100px;
  margin-top: -10px;
}

/* 幹 */
.trunk {
  width: 30px;
  height: 50px;
  background-color: #734e30;
  margin-top: -10px;
}

/* ライト */
.lights {
  position: absolute;
  top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 200px;
  height: 200px;
  pointer-events: none;
}

.light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 5px;
  animation: blink 2s infinite;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

/* アニメーション */
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
```

### 雪だるま

三段に積み重ねた雪だるまもCSSのみで作成できます！

![CSSで作成した三段の雪だるまと枝の腕](/articles/image-12.webp)

```html title="HTML" showLineNumbers
<div class="snowman">
  <div class="head">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
  <div class="body">
    <div class="arm left"></div>
    <div class="arm right"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
  </div>
  <div class="base"></div>
</div>
```

```css title="CSS" showLineNumbers
/* 雪だるま全体 */
.snowman {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 頭 */
.head {
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: -10px;
}

/* 目 */
.eye {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 30px;
}

.eye.left {
  left: 30px;
}

.eye.right {
  right: 30px;
}

/* 鼻 */
.nose {
  width: 15px;
  height: 15px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* 口 */
.mouth {
  width: 40px;
  height: 10px;
  border: 2px solid black;
  border-radius: 50%;
  border-top: none;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}

/* 体 */
.body {
  width: 140px;
  height: 140px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 胴体のボタン */
.button {
  width: 15px;
  height: 15px;
  background-color: black;
  border-radius: 50%;
  margin: 5px 0;
}

/* 基本 */
.base {
  width: 180px;
  height: 180px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 手（枝） */
.arm {
  width: 80px;
  height: 5px;
  background-color: brown;
  position: absolute;
  top: 50%;
  transform-origin: center;
}

.arm.left {
  left: -85px;
  transform: rotate(30deg);
}

.arm.right {
  right: -85px;
  transform: rotate(-30deg);
}
```

二段にしたり、木の枝で腕を作ったり、マフラーを付けたりするのも楽しそうですね！

### プレゼントボックス

最後はプレゼントボックスです！

![CSSで作成した赤いプレゼントボックスと金色のリボン](/articles/image-1-7.webp)

```html title="HTML" showLineNumbers
<div class="gift">
  <div class="box">
    <div class="ribbon-horizontal"></div>
    <div class="ribbon-vertical"></div>
  </div>
  <div class="bow">
    <div class="loop left"></div>
    <div class="loop right"></div>
    <div class="tail left"></div>
    <div class="tail right"></div>
  </div>
</div>
```

```css title="CSS" showLineNumbers
/* プレゼント全体 */
.gift {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ボックス本体 */
.box {
  width: 150px;
  height: 150px;
  background-color: #e74c3c; /* 赤色でプレゼント感を演出 */
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 横リボン */
.ribbon-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #f1c40f; /* ゴールドカラーのリボン */
  transform: translateY(-50%);
}

/* 縦リボン */
.ribbon-vertical {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 100%;
  background-color: #f1c40f;
  transform: translateX(-50%);
}

/* リボンのリボン部分 */
.bow {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 左右のループ */
.loop {
  width: 40px;
  height: 20px;
  background-color: #f1c40f;
  border-radius: 10px;
  position: absolute;
}

.loop.left {
  transform: rotate(-45deg);
  left: -25px;
}

.loop.right {
  transform: rotate(45deg);
  right: -25px;
}

/* リボンの垂れ下がる部分 */
.tail {
  width: 10px;
  height: 30px;
  background-color: #f1c40f;
  position: absolute;
  bottom: -20px;
}

.tail.left {
  transform: rotate(45deg);
  left: -10px;
}

.tail.right {
  transform: rotate(-45deg);
  right: -10px;
}
```

色やサイズを変えて量産もできますね！

## おわりに

いかがでしたでしょうか？
簡易なコードで上記のようにクリスマス感を演出できます。

今回はパーツや背景について紹介しましたが、フォントや色使いでも演出できます。
例えばタイトルにはScript系フォント（華やかで手書き風）を使用します。
また、色使いは赤・緑・白・黄色をメインに使用しましょう。
カラーコードの組み合わせ例を以下に紹介します。
#B22222, #216D5E, #AD9065

![クリスマスデザイン向けの赤・緑・ゴールドの配色例](/articles/image-2-5.webp)

他にもシルバーやブルー、ワインレッドを使用することで高級感あるクリスマスを演出することも可能です。

季節に合わせたデザインの中でも、クリスマスは特に盛り上がるテーマであり、デザインに一工夫加えるだけでサイトの魅力が格段に上がります。自社サイトに合ったクリスマスデザインを取り入れて、訪問者に季節感を楽しんでもらいましょう！


---

## 【Next.js 15】ESLintのFlat Configの設定方法

- URL: https://blog.to-ko-s.com/articles/next-js-flat-config
- 著者: 西原月熙
- 公開日: 2024-11-30
- タグ: TypeScript, React, Next.js

> Next.js 15でのESLint Flat Config対応方法を解説。FlatCompatによる旧プラグインの移行、typescript-eslintやTailwind CSS等の各プラグイン設定、eslint.config.mjsの具体的な記述例を紹介します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
Next.jsのバージョン15の内容の中に、「ESLint 9 Support」という内容がありましたね。
これにより、Next.jsでのFlat Configへの対応が可能となりました！

<ExternalLink url="https://nextjs.org/blog/next-15#eslint-9-support" />

今回の記事では、ESLintのFlat Configの対応方法を記述します！

## 対象読者

- Next.jsとESLintを使用している方
- Flat Configに対応したい方

今回はFlat Configの細かい説明は省かせていただきます🙏
超簡単に言うと、「**ESLintの新しい設定方法**」です！
ESLintのバージョン9からはデフォルトの設定方法となっており、バージョン10からは既存の設定方法は**廃止**となる予定なので、今後もESLintを使っていきたい人は必須で対応する必要があります🥺

## 対応方法

### 既存の設定ファイルの削除

まず、既存の設定ファイルである`.eslintrc.js`を削除しました！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  僕はyamlの形式が好きだったので、`.eslintrc.yml`ファイルを使っていました！
</SpeechBubble>

### 周辺ライブラリのアップデート

次に、ESLint関連のパッケージをまとめてアップデートしました！
対応リポジトリに入れていたパッケージは下記になっています。

- `@typescript-eslint/eslint-plugin`
- `@typescript-eslint/parser`
- `eslint`
- `eslint-config-next`
- `eslint-config-prettier`
- `eslint-plugin-import`
- `eslint-plugin-react`
- `eslint-plugin-react-hooks`
- `eslint-plugin-tailwindcss`
- `eslint-plugin-unused-imports`

けっこうありました😳
それぞれがどういうルールか気になった方はぜひ調べて見てください！

### `typescript-eslint`系の追加ライブラリのインストール

次に、一番大きそうな`typescript-eslint`の対応します！
[公式ドキュメント](https://typescript-eslint.io/getting-started)を見たところ、何やら追加でライブラリが必要そうな雰囲気を感じたので、インストールしておきます！

```bash title="ターミナル"
npm install --save-dev @eslint/js typescript-eslint
```

これで準備OKです！

### eslint.config.mjsの設定

いよいよ新しいファイルである`eslint.config.mjs`の設定をしていきます!

早速、ファイルの中身を示します！

```javascript title="eslint.config.mjs" showLineNumbers
import path from "node:path"
import { fileURLToPath } from "node:url"
import { FlatCompat } from "@eslint/eslintrc"
import eslint from "@eslint/js"
import tseslint from "typescript-eslint"
import tailwind from "eslint-plugin-tailwindcss"
import importPlugin from "eslint-plugin-import"
import unusedImports from "eslint-plugin-unused-imports"
import eslintConfigPrettier from "eslint-config-prettier"

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({ baseDirectory: __dirname })

export default tseslint.config(
  {
    // グローバルで読み込むファイルの拡張子
    files: ["*.js", "*.jsx", "*.ts", "*.tsx"],
  },
  {
    // グローバルで無視するファイル
    ignores: ["**/.next/**/*", "*.config.*"],
  },
  eslint.configs.recommended,
  tseslint.configs.strictTypeChecked,
  tseslint.configs.stylisticTypeChecked,
  ...compat.extends("next/core-web-vitals"),
  ...tailwind.configs["flat/recommended"],
  {
    // tailwindcssに関する設定
    settings: {
      tailwindcss: {
        whitelist: ["hidden-scrollbar", "-webkit-scrollbar"],
      },
    },
  },
  {
    // @typescript-eslintに関する設定
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: true,
        tsconfigRootDir: __dirname,
      },
    },
    rules: {
      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
      "@typescript-eslint/no-unsafe-assignment": "off",
      "@typescript-eslint/no-misused-promises": "off",
    },
  },
  {
    // eslint-plugin-importに関する設定
    plugins: {
      import: importPlugin,
    },
    rules: {
      "import/order": [
        "error",
        {
          groups: ["builtin", "external", "internal"],
          alphabetize: { order: "asc", caseInsensitive: true },
        },
      ],
      "import/newline-after-import": "error",
      "import/no-duplicates": "error",
    },
  },
  {
    // eslint-plugin-unused-importsに関する設定
    plugins: {
      "unused-imports": unusedImports,
    },
    rules: {
      "unused-imports/no-unused-imports": "error",
    },
  },
  {
    // その他設定
    files: ["src/**/*.{js,jsx,ts,tsx}"],
    linterOptions: {
      reportUnusedDisableDirectives: "error",
    },
    languageOptions: {
      globals: {
        React: "readonly",
      },
    },
    rules: {
      "react/jsx-boolean-value": "error", // JSXの中でのbooleanの使用
      "react/jsx-curly-brace-presence": "error", // JSXの中での余分な{}の使用
    },
  },
  // prettierとの競合を防ぐためにeslint-config-prettierを読み込む
  eslintConfigPrettier,
)
```

基本的に[公式ドキュメント](https://eslint.org/docs/latest/use/configure/configuration-files)を参考にしながら進めていきました！
上記から重要そうな部分を説明します！

#### FlatCompatによる旧設定のマイグレーション

まずは`export`の行の上にある部分です！

```javascript title="eslint.config.mjs(抜粋)"
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({ baseDirectory: __dirname })
```

ここでは、まだFlat Configに対応していないプラグインのための設定になります！
ESLintのプラグインをそれぞれについて、まだFlat Configに対応できていないものがあります！
(今回で言うと、`next/core-web-vitals`)
そのプラグインに対して、`FlatCompat`というものを使うとFlat Config対応できるようになります✨
上記の記述をした上で、`...compat.extends("next/core-web-vitals")`と記載すれば、ちゃんとルールが効いてくれるようになります💪
詳しくは、[公式ドキュメント](https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config)を確認してみてください。

#### `typescript-eslint`

次に、`@typescript-eslint`に関するカスタム設定の部分です！

```javascript title="eslint.config.mjs(抜粋)"
  {
    // @typescript-eslintに関する設定
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: true,
        tsconfigRootDir: __dirname,
      },
    },
    rules: {
      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
      "@typescript-eslint/no-unsafe-assignment": "off",
      "@typescript-eslint/no-misused-promises": "off",
    },
  },
```

`languageOptions`として上記のような記述を行わないとESLintの実行時にエラーになります🥲
こちらも詳しくは公式ドキュメントを見ていただきたいです🙏

<ExternalLink url="https://typescript-eslint.io/getting-started/typed-linting/" />

#### その他のプラグイン

その他のプラグインに関しては、それぞれの公式ドキュメントを見ながら設定を行いました！

例えば`eslint-plugin-tailwindcss`は、ドキュメントの[このあたり](https://github.com/francoismassart/eslint-plugin-tailwindcss?tab=readme-ov-file#eslintconfigjs)を参考にして、`...tailwind.configs["flat/recommended"]`とするだけでした✨
プラスアルファで、カスタムしたclassNameを無視するための追加設定を入れました。

```javascript title="eslint.config.mjs(抜粋)"
  ...tailwind.configs["flat/recommended"],
  {
    // tailwindcssに関する設定
    settings: {
      tailwindcss: {
        whitelist: ["hidden-scrollbar", "-webkit-scrollbar"],
      },
    },
  },
```

他の設定も同じような手順で設定を行っていき、無事動作することを確認できました💪

ちなみに、実行コマンドは以降前と同じ`next lint`です！

## おわりに

今回は、Next.jsでのFlat Config対応方法を説明しました！
パッとできるかなーと思ってたら、想像より時間がかかって手こずりました🤮

この記事でそういった方の手助けになれると嬉しいです✨

[X](https://x.com/west_tsukiya)をやっているので、良かったらフォローも宜しくお願いします🙏


---

## 【Rails】where.associatedで関連付けられているレコードを簡単に取得する方法

- URL: https://blog.to-ko-s.com/articles/where-associated
- 著者: 塩見直樹
- 公開日: 2024-11-25
- タグ: Rails

> Railsのwhere.associatedを使って関連付けられたレコードを絞り込む方法を初学者向けにわかりやすく解説します。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
以前、`where.missing`について詳しく解説したブログを書きました。
簡単に説明すると、`where.missing`は関連付けられたデータが存在しないレコードのみを取得するメソッドです。

<InternalLink slug="where-missing" />

今回は`where.missing`とは逆で、関連付けられたデータが存在するレコードのみを取得するメソッド`where.associated`について解説していきます！

この記事では以下の内容について取り上げています。

- `where.associated`の概要
- `where.associated`の基本的な使用方法
- SQLについて

### 対象読者

- Rails初学者の方
- Railsで開発を行っている方

## where.associatedの概要

`where.associated`は、Rails7.1で導入されたクエリメソッドです。
クエリメソッドとは、データベースからデータを検索、操作するためのメソッドです。
`where.associated`メソッドは関連付けられたデータが存在するレコードを絞り込み取得します！

例えば`User`(ユーザー)モデルと`Post`(投稿)モデルが以下のように1対多で関連付けられているとします。

```ruby title="app/models/user.rb" showLineNumbers
class User < ApplicationRecord
  has_many :posts
end
```

```ruby title="app/models/post.rb" showLineNumbers
class Post < ApplicationRecord
  belongs_to :user
end
```

このような場合、ユーザーは複数の投稿を持つこともできますし、持たない場合もあります。
このとき`where.associated`を使用することで投稿を持つユーザーのみを全て取得することが出来ます！

## where.associatedの基本的な使用方法

基本的な使用方法として「投稿をもつユーザー」を取得する方法は以下のようになります。

```ruby title="Ruby"
User.where.associated(:posts)
```

この記述で投稿を持つ全てのユーザーのレコードを取得できます。

ユーザーが投稿の他に、コメント(`Comment`)モデルと1対多で関連付いているとします。
投稿とコメントを持つユーザーを取得したいときも、以下のように簡単に記述することが出来ます。

```ruby title="Ruby"
User.where.associated(:posts, :comments)
```

## SQLについて

`where.associated`は、内部的に`INNER JOIN`を用いたSQLを生成します。

```ruby title="Ruby"
User.where.associated(:posts)
```

上記のように記述した場合、生成されるSQLは以下のようになります。

```sql title="SQL"
SELECT "users".*
FROM "users"
INNER JOIN "posts" ON "posts"."user_id" = "users"."id"
```

`INNER JOIN "posts"`で`users`テーブルと`posts`テーブルを結合します。
`INNER JOIN`は、結合条件に一致するデータのみを結果として返します。この場合、`users`テーブルと`posts`テーブルを結合し、`ON "posts"."user_id" = "users"."id"`の条件に一致するレコードだけが対象になります。
そのため、投稿をもつユーザーのみを取得できるのです！

## さいごに

今回は、Railsの`where.associated`クエリメソッドについての解説をしました。
このメソッドを使用することで、関連付けられたデータの絞り込みが簡単に記述でき可読性があがります。
また以前紹介した`where.missing`メソッドと使い分けることで、関連データの有無による絞り込みが簡単に行えます。
ぜひ開発する際に`where.associated`を使用してみてください！


---

## 【CSS】min(),max(),clamp()を使用したブレークポイントに依存しないレイアウト

- URL: https://blog.to-ko-s.com/articles/layout-no-breakpoint
- 著者: 寺田拓真
- 公開日: 2024-11-17
- タグ: HTML, CSS

> CSSのmin()、max()、clamp()を使ってブレークポイントに依存しない柔軟なレイアウトを実現する方法を解説。カード幅やサイドバー、フォントサイズなどの実践的な使用例も紹介します。


## はじめに

みなさん、こんにちは！
最近コーディングを行っている際に`min()`を使用した所、かなり便利だったので使い方など紹介させていただければと思います！

使おうと思ったきっかけは下記のレイアウトに関する問題が発生したことでした。

- `flexbox`使用時に画面幅によって要素がはみだしたり、変に折り返されたり微妙なレイアウトになる
- ブレークポイントごとに折り返しの設定をするが、ブレークポイント付近でやはり微妙なレイアウトになる

上記の問題の解決の糸口になったのが`min()`関数です。
まだ使用したことがない方は、ぜひ使用してみてください。
同じような使い方の関数で`max()`と`clamp()`もあるので、そちらも紹介させていただきます。

### 対象読者

- `flexbox`をよく使用される方
- CSS初学者の方

## 関数の説明と基本的な使い方

### `min()`

そもそも`min()`はどのようなものか紹介します。

`min()`は`()`内に2つの値を設定し、小さい方の値が表示されます。
具体的な記述が以下になります。

```css
.sample {
  width: min(20%, 100px);
}
```

上記の記述をした場合、親要素の幅が500px以上の時に100pxが選ばれます。
親要素が400pxの場合は、`width`が`400 × 20% = 80px`となるので20%側が選ばれます。

### `max()`

同様に`max()`も紹介します。
`max()`は`min()`の逆で2つの値を設定した際に大きいほうが表示されます。

```css
.sample {
  width: max(20%, 100px);
}
```

上記の記述をした場合、親要素の幅が500px以上の時に20%が選ばれます。
親要素が400pxの場合は、`width`が`400 × 20% = 80px`となるので100px側が選ばれます。

### `clamp()`

`clamp()`は上記2つとは異なり、3つの値を設定します。
具体的にはカンマ区切りで`(最小値 , 推奨値 , 最大値)`の3つを指定し、その中の値から条件に合うものが表示されます。

```css
.sample {
  width: clamp(300px, 50%, 600px);
}
```

上記の記述をした場合、300pxが最小値、50%が推奨値、最大値が600pxとなります。

例えば親要素が1000pxの場合、50%=500pxの推奨値が適用されます。
1500pxの場合は推奨値が750pxとなり最大値を超えてしまうため、最大値の600pxが適用されます。
500pxの場合は推奨値が250pxとなり最小値未満となるため、最小値の300pxが適用されます。

イメージとしては、1行で`min-width`と`max-width`を設定できるようなプロパティです。

## 実践的な使い方

基本的な関数の使い方を紹介したところで、ここからは実際にレイアウト等での使用法をご紹介します！

### カード幅の調整に`min()`を使う

カードの幅を`min()`にて指定することで、ユーザーが画面幅を縮小してもレイアウトが崩れません。

```css
.card {
  width: min(300px, 50%);
}
```

### サイドバーに`max()`を使う

サイドバーに`max()`を使用することで、必要以上に小さくならず、可読性が確保されます。

```css
.sidebar {
  width: max(200px, 20%);
}
```

### フォントサイズの調整に`clamp()`を使う

フォントサイズを`clamp()`で設定することで、デバイスに合わせてフォントがバランス良く調整されます。
ブレークポイントに依存せずちょうどいいサイズで表示されるため、個人的によく使います！

```css
h1 {
  font-size: clamp(1rem, 5vw, 3rem);
}
```

### コンテナ幅の調整に`min()`と`max()`を使う

コンテナ幅を`min()`と`max()`を合わせて指定することにより、画面幅に合わせて自動調整されます。

```css
.container {
  width: min(max(300px, 30%), 90%);
}
```

どのように表示されるかケースごとに紹介します。

#### ケース 1: 画面幅が 800px の場合

- **30%** = 240px → `max(300px, 240px)` = **300px**
- `min(300px, 90%)` = **300px**

結果: 幅は `300px`

#### ケース 2: 画面幅が 1200px の場合

- **30%** = 360px → `max(300px, 360px)` = **360px**
- `min(360px, 90%)` = **360px**

結果: 幅は `360px`

#### ケース 3: 画面幅が 2000px の場合

- **30%** = 600px → `max(300px, 600px)` = **600px**
- `min(600px, 90%)` → `min(600px, 1800px)` = **600px**

結果: 幅は `600px`

## おわりに

いかがでしたでしょうか。
今まで`min-width`等で指定していた要素の幅も紹介した`min()`等を使用することで柔軟な幅の指定が可能になります。
あらためてそれぞれの特徴をまとめます。

- `min()`：`()`内に2つの値を設定し、画面幅によって小さい値が適用される。
- `max()`：`()`内に2つの値を設定し、画面幅によって大きい値が適用される。
- `clamp()`：`()`内に左から最小値・推奨値・最大値を設定する。推奨値が最小値〜最大値の範囲内なら推奨値、範囲外なら最小値または最大値が適用される。

また、`min()`等を上手く活用することでブレークポイントを細かく設定せずとも要素幅が良い感じに自動調整されるので、
積極的な活用をおすすめします！

ぜひ色々な要素に使用してみてください！


---

## 【Next.js】Next.jsのバージョン15へのアップデート方法

- URL: https://blog.to-ko-s.com/articles/nextjs-15
- 著者: 西原月熙
- 公開日: 2024-11-09
- タグ: React, Next.js

> Next.js 14から15へのアップデート手順を解説。codemodによる自動書き換え、paramsの非同期化への対応、React 19への移行など、実際のCLI操作の流れに沿って説明します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
先日(2024年10月末頃)、Next.jsのバージョン15がリリースされましたね！

本記事ではNext.jsのバージョン14から15のアップデート方法を記載し、気をつけるポイント等もまとめていきます💪

## アップデート方法

### codemodの実行

早速アップデートを行っていきます！
と言いましたが、実は下記コマンド1つでアップデート作業はほとんど完了してしまいます✨

```bash title="ターミナル"
npx @next/codemod@15.0.3 upgrade latest
```

上記コマンドを実行することで、Next.jsのバージョン「15.0.3」にアップデートするために必要な変更を対話形式で進めていきます！

![codemodのインストール確認を求めるCLIの画面](/articles/image-1024x179.webp)

まずは`codemod`を(一時的に)インストールして良いかを聞かれているので、「`y`」で進めます！

### Turbopackの使用

![Turbopackの使用に関するWarningが表示されたCLIの画面](/articles/image-1-1024x140.webp)

現在のReact及びNext.jsのバージョンが表示された上で、何やらWarningが出ていますね、、!
こちらに関しては、僕が`package.json`内`scripts`の`dev`のコマンドをを`next -p 8000`に変更しているために起きていそうです！
一旦このままのコマンドで行きたいので何も入力せずにEnterで進めます。

実際には、Next.js 15からは開発環境でのTurbopackの使用が安定版となったため、そちらのコマンドを入れることを促すような対話になっていそうですね！
Turbopackを使用したい方は`next dev --turbo`というコマンドに変更してしまいましょう！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  僕がコマンドを`next -p 8000`にしている理由は、`localhost`で確認するポートを8000番に変更したいからです！
</SpeechBubble>

### ソースコードの自動書き換え

![ソースコード自動書き換え対象の選択画面](/articles/image-2-1024x203.webp)

次に、自動でソースコードを書き換えてる対象を選択します！
何やら3種類有りそうですね！

**1つ目**は、バージョン14では試験的な機能であったAPI Routeのedge設定「`experimental-edge`」を「`edge`」に変更するかどうからしいです！
自分は記述をしていないのでどちらでも良かったのですが、チェックは入れたままにします！

**2つ目**は、`page.tsx`が`props`として受け取るRequest APIsが非同期になったので、それの自動書き換えを行ってくれるかどうかですね！
こちらはほとんどの人が関係あると思うので少し解説します。

バージョン14までは、下記コードのように`page.tsx`が`props`として受け取るパスパラメータやクエリパラメータはそのまま使うことができていました！

```tsx title="以前のpage.tsx" showLineNumbers
export default async function UserDetailPage({ params }: { params: { id: string } }) {
  const { id } = params

  return <h1>ユーザーのIDは{id}です！</h1>
}
```

ですが、バージョン15では上記が非同期となるので下記のように書き換える必要があります！

```tsx title="バージョン15でのpage.tsx" showLineNumbers
export default async function UserDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params

  return <h1>ユーザーののIDは{id}です！</h1>
}
```

CLIの話に戻ると、これにチェックを入れることで恐らく自動でソースコード内を書き換えてくれそうですね!!

**3つ目**は、`NextRequest`の`geo`と`ip`という変数を使っている場合に`"@vercel/functions"`というパッケージを入れてくれるような内容です。
こちらも自分には関係無さそうですが、チェックは入れたままにします！

上記設定でエンターを押して進めます！

### React19のcodemod

![React 19へのアップグレードに関するcodemod実行の確認画面](/articles/359b38573ea07fac12c32e91149a2232-1024x186.jpg)

次は、React19へのアップグレードに対する自動書き換えを行うかどうかの対話っぽそうですね！

Next.js15は、React19を内部的に使用することになるので、合わせて行いたいところです。
なので、「`Y`」を選択して進めましょう！

![React 19の型定義アップグレードの確認画面](/articles/image-3-1024x169.webp)

合わせて、React19の型周りについてもアップグレードするかどうかを聞かれるので、ここも「`Y`」でいきます！

### Vercelへのデプロイ、codemodのインストール

上記の入力が完了したら、諸々の書き換えを行ってくれます！

![Vercelへのデプロイ確認を求めるCLIの画面](/articles/image-4-1024x416.webp)

最後に、Vercelにデプロイするかどうかを聞かれるので、行いたい方は「`Y`」を入力してください。

![codemod自体のインストール確認画面](/articles/image-5-1024x519.webp)

また、codemod自身をinstallするかどうかを尋ねられます。
オススメっぽそうなので「`y`」で進めます！

以上でCLI上の操作が完了します✨

### 確認

動作完了後に差分を確認したところ、page.tsx系は結構変更が入っていました。
例えば、下記の様な感じになっていました！

![paramsの型にPromiseが追加されたコード差分](/articles/image-6-1024x623.webp)

`params`の型に`Promise`が追加され、10行目にて`await`を使って取り出していますね！
これを自動でやってくれるのは嬉しいです😊

僕が確認したプロジェクトでは、上記に関する変更がほとんどでした！
プロジェクトによっては、アップデートに関する工数をかなり削減できるのではないでしょうか🎉

## おわりに

今回は下記記事に書いてある内容を参考にアップデート作業を行いました。
アップデート内容等の詳細が気になる方はぜひ読んでみてください！

<ExternalLink url="https://nextjs.org/blog/next-15" />


---

## 【Ruby】digメソッドを使用して、ネストされた配列とハッシュの値を安全に取り出す方法

- URL: https://blog.to-ko-s.com/articles/dig
- 著者: 塩見直樹
- 公開日: 2024-11-03
- タグ: Rails

> Rubyのdigメソッドでネストされた配列・ハッシュから安全に値を取得する方法を解説。冗長なnilチェックを省略し可読性を向上。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回はRubyの`dig`メソッドについて解説をしていきます。

この記事では以下の内容について取り上げています。

- `dig`メソッドの概要
- `dig`メソッドの基本的な使用方法
- `map`、`compact`メソッドと組み合わせた使用方法
- `filter_map`メソッドの使用方法

### 対象読者

- Ruby初学者の方
- ネストされた配列やハッシュで冗長な`nil`チェックを減らしたいと思ってる方

## digメソッドの概要

`dig`メソッドはネストされた配列やハッシュの値を安全に取得できます。
安全に取得とは、本来存在しない要素にアクセスをするとエラーが発生します。
`dig`メソッドを使用した場合、存在しない要素にアクセスしてもエラーが発生せず、`nil`が返されます。
複雑なデータ構造を扱う際に、冗長な`nil`チェックを記述しないでスッキリとしたコードを記述することが出来ます。

以前開発をしていた時、とあるAPIの情報を扱っていました。
その際に取得するデータが複雑にネストされたデータ構造をしていて、下記のような冗長な`nil`チェックを記述していました。

```ruby title="Ruby"
data = {
  user: {
    profile: {
      address: {
        city: 'Tokyo'
      }
    }
  }
}

# 冗長なnilチェック
if data[:user] && data[:user][:profile] && data[:user][:profile][:address]
  city = data[:user][:profile][:address][:city]
else
  city = nil
end
```

上記のような冗長なコードは可読性が良くありません。
`dig`メソッドを使用したら冗長な`nil`チェックを記述する必要はなく、下記のようにスッキリとしたコードを記述できます！

```ruby title="Ruby"
city = data.dig(:user, :profile, :address, :city)
```

## 基本的な使用方法

基本的な構文は下記のようになります。

#### ハッシュの基本構文

```ruby title="Ruby"
data.dig(:key1, :key2, :key3, ...)
```

#### 配列の基本構文

```ruby title="Ruby"
data.dig(index1, index2, index3, ...)
```

`dig`メソッドは与えられたキーやインデックスを順番にたどり、キーやインデックス存在しない場合や途中で`nil`に遭遇した場合は`nil`を返します。

### 基本的な使用例

#### ハッシュの場合

```ruby title="Ruby"
data = {
  user: {
    profile: {
      name: 'Taro',
      address: {
        city: 'Tokyo'
      }
    }
  }
}

name = data.dig(:user, :profile, :name)
puts name # => 'Taro'

city = data.dig(:user, :profile, :address, :city)
puts city # => 'Tokyo'

# 存在しないキーにアクセスしようとした場合nilが返る
postal_code = data.dig(:user, :profile, :address, :postal_code)
puts postal_code # => nil
```

#### 配列の場合

```ruby title="Ruby"
animals = [['dog', 'cat',['horse', 'bird']]]

animal1 = animals.dig(0, 0)
puts animal1 # => 'dog'

animal2 = animals.dig(0, 2, 1)
puts animal2 # => 'bird'

# 存在しないインデックスにアクセスしようとした場合nilが返る
animal3 = animals.dig(0, 3)
puts animal3 # => nil
```

#### ハッシュと配列が混在したデータ構造の場合

```ruby title="Ruby"
data = {
  users: [
    { name: 'Naoki', details: { age: 30 } },
    { name: 'Kenta', details: { age: 25 } }
  ]
}

# Naokiの年齢を取得
age1 = data.dig(:users, 0, :details, :age)
puts age1 # => 30

# 存在しないデータへのアクセス
age2 = data.dig(:users, 2, :details, :age)
puts age2 # => nil
```

## map、compactメソッドと組み合わせた使用方法

`dig`メソッドと`map`、`compact`メソッドを一緒に使用した応用を紹介します。
実用的だと思うのでぜひ参考にしてみてください！

```ruby title="Ruby"
users = [
  { id: 1, profile: { name: 'Naoki', age: 30 } },
  { id: 2, profile: { name: 'Kenta' } },
  { id: 3, profile: { age: 20 } },
  { id: 4, profile: nil }
]

names = users.map do |user|
  user.dig(:profile, :name)
end.compact
puts names.inspect # => ['Naoki', 'Kenta']
```

`map`メソッドは、配列の各要素に対して処理を行い、その結果を新たな配列として返します。
`compact`メソッドは配列内の`nil`の要素を取り除きます。
上記の2つを`dig`メソッドと組み合わせることで、`users`配列の中で存在する`name`とnilが`names`配列に格納されます。
そして`nil`の要素は`compact`によって取り除かれるので結果として、存在する`name`のみが`names`配列に格納されることになります。

このように他のメソッドと組み合わせて使用することで、スッキリとした可読性の良いコードを記述することが出来ます！

<SpeechBubble icon="/authors/shiomi-naoki.jpg" name="ナオキ">
  `map`、`compact`と組み合わせた使い方を紹介しましたが、実は同じ処理をもっと簡潔に記述できるメソッドがあります！
</SpeechBubble>

## filter_mapメソッドの使用方法

上記で紹介した`map`、`compact`メソッドを組み合わせた処理を`filter_map`メソッドのみで実現できます！
使用例は下記のコードになります。

```ruby title="Ruby"
users = [
  { id: 1, profile: { name: 'Naoki', age: 30 } },
  { id: 2, profile: { name: 'Kenta' } },
  { id: 3, profile: { age: 20 } },
  { id: 4, profile: nil }
]

names = users.filter_map do |user|
  user.dig(:profile, :name)
end
puts names.inspect # => ['Naoki', 'Kenta']
```

`users`に対して`filter_map`メソッドを使用することで、ブロック内の評価が真(`true`)であるものだけを返します。
`nil`は`false`として扱われるので取り除かれます。
上記のように記述することでより簡潔に可読性の良いコードを記述することが出来ます！

## さいごに

今回はRubyの`dig`メソッドについて解説しました。
開発を行う中で、複雑にネストされたデータを扱うときも少なからずあるとおもいます。
そんなとき`dig`メソッドを知っているとコードをより簡潔に記述でき、可読性を良くできます。
なのでネストされたデータを扱う時は積極的に使用してみてください！


---

## 【Rails】where.missingを使用して手軽に関連先のないレコードを取得する方法

- URL: https://blog.to-ko-s.com/articles/where-missing
- 著者: 塩見直樹
- 公開日: 2024-10-28
- タグ: Rails

> left_joinsとwhereの組み合わせをシンプルに書けるwhere.missingの使い方を初学者向けにわかりやすく解説。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回はRailsの`where.missing`を使用して関連先のないレコードを取得する方法を解説します！

この記事では以下の内容について取り上げています

- `where.missing`の概要
- `where.missing`の基本的な使用方法
- SQLクエリについて

### 対象読者

- Rails初学者の方
- Railsで開発を行っている方

## where.missingの概要

`where.missing`はRails 6.1で追加されたActiveRecordメソッドです。
関連先がないレコードを手軽に取得できます！

例えば、投稿モデル(Post)とコメントモデル(Comment)が一体多の関係である場合、
Postに関連するCommentが存在しない投稿(コメントの存在しない投稿)を取得できます。
開発をしていると条件分岐等で、関連先がないレコードを取得したいときは結構あると思います。
そのようなときに`where.missing`を知っていると、簡潔にコードを書くことができます！
今回は説明を省きますが、`where.associated`という`where.missing`と逆の意味である、関連先が存在するレコードのみを取得できるメソッドもあります！

## where.missingの基本的な使用方法

### 基本的な使用方法

基本的な使用方法として「コメントのない投稿」を取得する方法を紹介します。

```ruby title="Ruby"
Post.where.missing(:comments)
```

これだけの記述でコメントのない投稿を取得できちゃいます！
`where.missing`がでる前は下記のように`left_joins`と`where`を組み合わせて取得していました。

```ruby title="Ruby"
Post.left_joins(:comments).where(comments: { id: nil })
```

上記の2つのコードを比べてみると`left_joins`と`where`を使用している方は、冗長なコードになってしまっています。
`where.missing`を知っているだけでこのように簡潔にコードを書くことができます！

### 複数の関連先がないレコード取得

例えば「コメント(comment)もいいね(like)もない投稿」を取得する場合に、下記のコードのように複数の`where.missing`を組み合わせて取得できます！

```ruby title="Ruby"
Post.where.missing(:comments).where.missing(:likes)
```

上記のコードを`where.missing`を使用しないと下記のようになります。

```ruby title="Ruby"
Post.left_joins(:comments).left_joins(:likes).where(comments: { id: nil }, likes: { id: nil })
```

こうやって見比べるとコードがスッキリとしているのが一目瞭然ですね！

## SQLクエリについて

### SQLクエリの詳細

`where.missing`が生成するSQLは`LEFT OUTER JOIN`を使用して、関連先のデータがNULLの行を取得します。
これにより関連先のないデータを取得できています！

例として`Post.where.missing(:comments)`が生成するSQLクエリは下記のようになります。

```sql title="SQL"
SELECT "posts".* FROM "posts"
LEFT OUTER JOIN "comments" ON "comments"."post_id" = "posts"."id"
WHERE "comments"."id" IS NULL
```

実は`where.missing`を使用しても、`left_joins`と`where`を組み合わせたものを使用しても同じSQLが生成されます！

## さいごに

今回はRailsの`where.missing`について解説しました。
開発を方は、関連先のないレコードを取得する場面があるかと思います。
そんなとき`where.missing`を知っていると、コードを簡潔に書くこともでき可読性も上げることができます。
なのでそのような場面に出会したら積極的に使っていきたいですね！


---

## 【Next.js14】マルチステージビルド・standaloneモードでDockerイメージサイズを削減する方法【コピペでOK】

- URL: https://blog.to-ko-s.com/articles/nextjs-standalone
- 著者: 西原月熙
- 公開日: 2024-10-20
- タグ: React, Next.js, Docker

> Next.js 14のDockerイメージサイズを、マルチステージビルドとstandaloneモードを組み合わせて1.35GBから239MBまで削減する方法を、コピペで使えるDockerfileとともに解説します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
Next.jsをVercel以外でデプロイする際、コンテナ系のサービス(ex. ECS)を用いることがぼちぼちあるかと思います。
その際に、どうやってイメージサイズを圧縮するかは少し考えたりしますよね？
今回「マルチステージビルド」「standalone(スタンドアロン)モード」の2つの方法を用いてNext.jsのイメージサイズを圧縮する方法を記述します💪
なるべく分かりやすく、最終的にはコピペで動くように説明しますので、ぜひ最後まで読んでください！

## 対象読者・前提

- Next.jsの基礎的な知識がある人
- Docker・docker-composeの基礎的な知識がある人

## マルチステージビルドとは？

マルチステージビルドに関してはご存知の方も多いかとは思いますが、簡単に説明だけします！
結論から言うと「最終的なビルドイメージのサイズを減らすための仕組み」です。
、、、これだけだと分からないと思うので、もう少し解説します😇

通常アプリケーションを作る過程では、コンパイルや依存パッケージ・ライブラリのインストールなど、ビルドに必要なファイルがたくさん作られます。しかし、実際に動かす際にはこれらのファイルは不要ですよね。
例えば、昔の`Dockerfile`だと`hoge`というミドルウェアをインストールした後、その`hoge`に対する`tmp`ファイルや`cache`ファイルを`rm`で削除する記述が見られると思います。

```dockerfile title="Dockerfileのあまり良くない例"
# ...

RUN apt-get update -qq \
  && apt-get install -y --no-install-recommends \
    curl \
    git \
    libmariadb-dev \
    build-essential \
  && apt-get clean \
  && rm -rf /var/cache/apt/archives/* \
  && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* \
  && truncate -s 0 /var/log/*log

# ...
```

ですが、マルチステージビルドを使うことで不要な記述を削除し、アプリケーションの実行に本当に必要なパッケージ・ファイルのみでビルドをできます！
具体例は下記します😎

## standalone(スタンドアロン)モードとは？

こちらについてはNext.js固有の設定方法なので、もしかしたら知らない方も居るかもしれないです。
standaloneモードについてひとことで言うと「本番デプロイに必要なファイルのみをコピーした`standalone/`フォルダを自動的に作成する」機能です！
つまり、Dockerイメージ内にこの`standalone/`配下のディレクトリのみを入れるようにすれば、イメージサイズをかなり圧縮できそうな気がしますね✨
こちらも具体例は今から説明していきます！

詳細が気になる方は下記公式サイトをご確認ください。

<ExternalLink url="https://nextjs.org/docs/pages/api-reference/next-config-js/output" />

## マルチステージビルドを使ったイメージの改善

早速、まずはマルチステージビルドを使うとどの程度イメージサイズが変わるかを確認してみます！
そのために、Next.jsのプロジェクトを`create-next-app`で作成し、イメージを作ってみます！

```bash title="ターミナル"
$ npx create-next-app@latest docker-project --ts --eslint
```

上記コマンドで`docker-project`というプロジェクトを作成します!
Tailwind CSSは入れておきます！

できあがったプロジェクトに対して、`Dockerfile`と`compose.yml`を作成して起動してみます！

```yaml title="compose.yml" showLineNumbers
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-project
    ports:
      - 3000:3000
```

`compose.yml`についてはただの起動用です！

そして、比較用となる`Dockerfile`を上記にしてみます！
(今回はNode.jsのバージョンは20系にしています)

```dockerfile title="Dockerfile" showLineNumbers
FROM node:20.13-slim

WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "run", "start"]
```

この時点では、マルチステージビルドもstandaloneモードも使用していないです。
`$ docker compose up`で立ち上がればOKです。

![Next.jsのDockerイメージサイズが1.35GBと表示されている画面](/articles/image-1024x642.webp)

この時、イメージサイズは**1.35GB**でした。結構大きめですね。。
ここから、マルチステージビルド化を行います！

早速、マルチステージビルド化したDockerfileを下記します。

```dockerfile title="Dockerfile" showLineNumbers
FROM node:20.13-slim AS base

# ビルドステージ
FROM base AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# 実行ステージ
FROM base AS runner
WORKDIR /app
COPY --from=builder /app/package.json /app/package-lock.json ./
RUN npm install

COPY --from=builder /app/.next ./.next
# public/配下に画像等を配置する場合はコメントアウトを外す
# COPY --from=builder /app/public ./public

CMD ["npm", "run", "start"]
```

結論から言うと、上記記述に変更することでイメージサイズが**812MB**になりました✨
比較用と比べると4割位削減できていますね！

それでは簡単に説明します。
まずは1行目部分です。

```dockerfile
FROM node:20.13-slim AS base
```

これで、`node:20.13-slim`というベースイメージに`base`というエイリアスをつけました。
これにより、もしバージョンを変更したい場合は1行目のみを変更するだけでよくなります。

次にビルドフェーズです。

```dockerfile
# ビルドステージ
FROM base AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
```

ここでは、単純に`npm install`をしてから`npm run build`をしているだけです。
この`builder`と名付けたイメージは、最終成果物には含まれないのが特徴です！

最後に実行フェーズです。

```dockerfile
# 実行ステージ
FROM base AS runner
WORKDIR /app
COPY --from=builder /app/package.json /app/package-lock.json ./
RUN npm install

COPY --from=builder /app/.next ./.next
# public/配下に画像等を配置する場合はコメントアウトを外す
# COPY --from=builder /app/public ./public

CMD ["npm", "run", "start"]
```

この部分での記載が実際のイメージに含まれるようになります。

特徴的なのは、`--from=builder`の部分ですね！
この記述がある部分での`COPY`は、前段の`builder`内のディレクトリを参照することになります。
つまり、`COPY --from=builder /app/.next ./.next`は「`builder`イメージ内の`/app/.next`ディレクトリを`runner`イメージ内の`./.next`にコピーして」という命令になります！

何が嬉しいかというと、`runner`イメージでは`npm run build`をせずとも必要なファイル群をコピーすることで`npm run start`を実行できるということです✨
これで、`npm run build`時に生成される、実行時には不要なファイル群を取り除くことができ、結果としてイメージサイズの削減になっているのです！

さて、この時点でもまあまあイメージサイズを削減できているのですが、ここからさらに削減していきます🔥🔥

## standalone(スタンドアロン)モードを使ったイメージの改善

ここからstandaloneモードに仕上げていくのですが、1点だけ`next.config.(m)js`の修正が必要です！

```javascript title="next.config.mjs" showLineNumbers
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
}

export default nextConfig
```

上記のように`output: "standalone"`とするだけで準備OKです！

こちらも、早速ですがDockerfile全体を記載します！

```dockerfile title="Dockerfile" showLineNumbers
FROM node:20.13-slim AS base

# ビルドステージ
FROM base AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# 実行ステージ
FROM base AS runner
WORKDIR /app
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/.next/standalone ./
# public/配下に画像等を配置する場合はコメントアウトを外す
# COPY --from=builder /app/public ./public

ENV HOSTNAME "0.0.0.0"
ENV PORT 3000
EXPOSE 3000

CMD ["node", "server.js"]
```

変更点は実行フェーズ以下です。

まず、COPYの対象が変わりました！
必須となるのが`.next/static`と`.next/standalone`です。
`static`の方はそのまま同じパスにコピーするのですが、`standalone`の方はカレントディレクトリ直下にコピーします！

次に、ホスト名とポートを設定します。
環境変数名`HOSTNAME`と`PORT`にそれぞれ設定したい値を入れるだけでOKです💪

最後に、サーバー起動コマンドの実行です。
ここは`$ node server.js`というコマンドを実行してあげましょう！
以上でlocalhost:3000で問題無くアクセスできるはずです。

そして、作成されたイメージサイズはなんと**239MB**です!!
マルチステージビルドのみと比べても7割以上削減できています✨

## おわりに

今回は、Next.jsに対してマルチステージビルドとstandaloneモードを使って`Docker`のイメージサイズを削減する方法を説明しました！
イメージサイズを削減することで、CI/CDの時間も短縮されたりして良いことしか無いはずなので積極的に使っていきたいですね💪
逆に、こうしたらもっと削減できる等の方法を知っている方が居ましたらご教示いただきたいです🙏

尚、今回の`Dockerfile`はバインドマウント等を行っていないので、開発時にはバインドマウントを`compose.yml`内に記述して別の`Dockerfile`を用意した方が良いかもしれないです。


---

## 【Rails】ActionMailerを使用してメール送信ができる！letter_opener_webをセットでデバッグを簡易的に！

- URL: https://blog.to-ko-s.com/articles/rails-action-mailer-letter-opener
- 著者: 塩見直樹
- 公開日: 2024-10-13
- タグ: Rails

> RailsのActionMailerでメール送信機能を実装し、letter_opener_webで開発環境でのデバッグを効率化する方法を解説。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回は、RailsのActionMailerを使用したメール処理とletter_opener_webを使用したデバッグ方法を解説します。

この記事では以下の内容について取り上げています。

- ActionMailerの説明と基本的な使い方
- letter_opener_webを使用したメール送信のデバッグ方法

### 対象読者

- Rails初学者の方
- 開発でメール送信機能を実装する方

## ActionMailerの説明と基本的な使い方

### 説明

ActionMailerは、Railsに標準で組み込まれているメール送信を行うためのライブラリです。
例えば、ユーザー登録後の確認やパスワードリセット通知等で必要になるメール送信機能を簡単に実装できます。

### 基本的な使い方

**Mailerクラス作成**

まず、ActionMailerで使うMailerクラスを作成します。
以下のコマンドで新しいMailerを作成できます。
※ UserMailerは任意のクラス名です。ユーザー関連のメールを送信したいためUserMailerにしています。

```bash title="ターミナル"
rails generate mailer UserMailer
```

上記のコマンドを実行したら以下が作成されます。

- `app/mailers/user_mailer.rb` → メール送信用のクラス
- `app/views/user_mailer` → 対応するメールテンプレート用ディレクトリ

**UserMailerクラスの実装**

`app/mailers/user_mailer.rb`ファイルのUserMailerクラスにユーザー登録時に送信する完了メールの実装をします。

```ruby title="Ruby" showLineNumbers
class UserMailer < ApplicationMailer
  # ユーザー登録完了メールのメソッド
  def registration_completed_mail(user)
    @user = user

    mail(
      to: @user.email,
      subject: "ユーザー登録完了"
    )
  end
end
```

上記の`registration_completed_mail`では引数でuserの情報を受け取っています。
`mail`内の`to`には宛先を入れ、`subject`には件名を入れます。

**メール本文の作成**

メールの本文を作成するため`app/views/user_mailer`ディレクトリ配下に、以下のHTML形式、テキスト形式の2つのファイルを作成します。

- `app/views/user_mailer/registration_completed_mail.html.erb` → HTML形式
- `app/views/user_mailer/registration_completed_mail.text.erb` → テキスト形式

なぜ2つのファイルを作成するのかは、受信者のメールを見る環境が違う場合があるからです。

HTML形式は、画像やデザインが使用でき見た目的にも良いメールを作成できます。
多くの人が使っているメールアプリ(Gmail等)では、このHTML形式で表示されます。

テキスト形式は、HTMLが使用できないメールアプリやシンプルな表示が好まれる場合に使用されます。
例えば古いデバイスや、HTMLメールをブロックしている設定のメールアプリではテキスト形式しか見ることができません。

なので、どちらの形式も用意しておくことで受信者のメールを見る環境が違っていても対応できます。

```erb title="HTML" showLineNumbers
<h1>ユーザー登録完了のお知らせ</h1>
<p><%= @user.name %>様の登録が完了しました。</p>
```

```erb title="Text" showLineNumbers
ユーザー登録完了のお知らせ
<%= @user.name %>様の登録が完了しました。
```

**メールの送信**

コントローラーからメールの送信を行います！
今回はユーザー登録時にメールを送信したいので、ユーザーが`@user.save`によって登録された後にメール送信のコードを記述します。

```ruby title="Ruby" showLineNumbers
class UsersController < ApplicationController
  def create
    @user = User.new(user_params)
    if @user.save
      # ユーザー登録後に登録完了メールを送信
      UserMailer.registration_completed_mail(@user).deliver_now
      redirect_to @user
    else
      render :new
    end
  end
end
```

`deliver_now`はRailsのActionMailerでメールを即時に同期的に送信するためのメソッドです。

上記のようにコントローラーに記述することでメールの送信が実行できます。
ただ開発環境でメールの送信を確認するにはSMTPサーバーを設定するなどをしなければいけません。
そんなときに簡単にメール送信の確認ができるライブラリがあります。
それが`letter_opener_web`です。

## letter_openerとletter_opener_webを使用したメール送信のデバッグ方法

### letter_openerとletter_opener_webの説明

`letter_opener`は、Railsアプリケーションでのメール送信のデバッグに便利なGemです
通常、開発環境ではSMTPサーバーを通してメール送信を行いますが、誤送信のリスクやSMTPの設定の手間がかかったりします。
それに比べ`letter_opener`を使用することでメールの内容をブラウザ上で簡単に確認できます。

`letter_opener_web`は、これまでに送信されたメールの履歴を一覧管理できるライブラリです。
`letter_opener`と組み合わせることで、これまでに送信されたメールの履歴をブラウザ上で確認できるようになります。
通常の`letter_opener`では、メール送信後にブラウザに表示されます。なので`letter_opener`だけではメール履歴の管理ができません。単発のみのメール送信であればこちらでも大丈夫です。
それに対して`letter_opener_web`を使用したら、ブラウザで履歴として一覧表示させることができるので、過去に送信したメールを一覧で確認できます。

### 使い方とメール送信のデバッグ方法

**Gemのインストール**

まずはGemfileに以下のコードを追加します。

```ruby title="Ruby"
gem 'letter_opener_web', group: :development
```

その後、ターミナルにて以下のコマンドでインストールします。

```bash title="ターミナル"
bundle install
```

**ルーティングの設定**

開発環境のみで`letter_opener`を使用したいので、開発環境に限定してメール履歴管理のエンドポイントを作成します。`config_routes.rb`に以下の設定を追加します。

```ruby title="Ruby" showLineNumbers
if Rails.env.development?
  mount LetterOpenerWeb::Engine, at: "/letter_opener"
end
```

上記のコードにより、開発環境で[`http://localhost:3000/letter_opener`](http://localhost:3000/letter_opener)にアクセスすることで、メールの履歴を確認できるようになります！

**ActionMailerの設定**

`config/environments/development.rb`に以下を追加します。

```ruby title="Ruby" showLineNumbers
config.action_mailer.delivery_method = :letter_opener_web
config.action_mailer.perform_deliveries = true
```

上記により、メール送信が`letter_opener_web`を通って行われ、ブラウザ上の履歴ページで確認できるようになります。
実際にブラウザ上では以下の画像のように表示されます。
これによりメールの内容があっているのか等の確認をできます！

![letter_opener_webでメール送信履歴を確認できるブラウザ画面](/articles/CleanShot-2024-10-14-at-02.36.10-1024x215.jpeg)

## さいごに

Railsの`ActionMailer`と`letter_opener_web`を活用することで、開発環境でのメール送信がとても簡単になります。
Railsのメール機能を最大限に活用して、便利なアプリケーションを開発してみてください！


---

## Railsでのtransactionと例外処理：raiseの使い方を解説

- URL: https://blog.to-ko-s.com/articles/rails-transaction-raise
- 著者: 塩見直樹
- 公開日: 2024-10-06
- タグ: Rails

> Railsのtransactionとraiseを使った例外処理の基本を解説。データの整合性を保つためのロールバック処理も紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのナオキです！
今回は、Railsの`transaction`と`raise`を使った例外処理について解説します。

この記事では、以下の内容について取り上げています。

- `transaction`メソッドの説明と基本的な使い方
- `raise`メソッドの説明と基本的な使い方
- `transaction`と`raise`を組み合わせた使い方

### 対象読者

- Rails初学者の方
- `transaction`内で例外処理を行いたい方

## transactionメソッドの説明と基本的な使い方

### 説明

`transaction`メソッドとは、複数のSQL文を1つのまとまった処理として扱い、全てのSQL文が正常に実行された場合にのみデータベースの変更が反映されるメソッドです。
途中でエラーや例外が発生した場合はそれまでに行われた処理が全て取り消され、データベースの状態が元に戻るためデータの不整合を防ぐことができます！

例えば、銀行の送金処理を考えてみましょう。
A銀行からB銀行に送金処理を行いたい場合、A銀行からの引き落としとB銀行への入金がセットで行われなければなりません。もしA銀行からの引き落としが完了したあとにB銀行への入金する過程でエラーが発生してしまったらデータの不整合が起こってしまいます。
`transaction`メソッドを使用すれば、これらの処理が全て正常に行われる(コミット)か、どちらも行われない(ロールバック)かになります。

### 基本的な使い方

例えば、UserモデルとShopモデルがあるとします。
`transaction`メソッドはActiveRecordのクラスメソッドです。つまり`User`や`Shop`などのActiveRecodeモデル自体や`ActiveRecord::Base`を通して使用できます。
`ActiveRecord::Base`を使用し2つのモデルを同時に更新をする必要がある場合下記のように記述します。

```ruby title="Ruby" showLineNumbers
ActiveRecord::Base.transaction do
  # transaction内での複数の処理
  user.save!
  shop.save!
end
```

上記のコードでは、`user.save!`と`shop.save!`の2つのデータベースの更新を1つの`transaction`の中で行っています。
`transaction`内の全ての処理が問題なく実行されればデータベースの更新が完了します。

`user.save!`と`shop.save!`のどちらかの処理で何かしらの問題が発生したら、`save!`が例外を発生させます。
なのでどちらのモデルも更新されることはないです。

`save!`の`!`をつけない場合は、例外が発生しないので処理は実行されます。

## raiseメソッドの説明と基本的な使い方

### 説明

`raise`メソッドとは、処理の中で意図的に例外を発生させることのできるメソッドです。
通常、プログラムの実行中に予期せぬ例外が発生すると、その時点で処理が止まり、Rubyがエラーメッセージを表示して何が問題だったのかを教えてくれます。

一方で、`raise`を使用するとプログラム自体に問題がなくても、実行中に意図的に例外を発生されることができます。
これにより、異常な状態を検知し、適切なエラーハンドリングやデバッグを行いやすくなります！

`raise`メソッドはデフォルトでは`RuntimeError`を発生させます。
下記のようにメソッドの第一引数に例外クラス、第二引数に文字列を渡すと`RuntimeError`以外の例外を発生させることができ、第二引数の文字列がエラーメッセージになります。
引数に文字列だけ渡すと`RuntimeError`になります！

```ruby title="Ruby"
raise ArgumentError, "無効な値です。"
```

### 基本的な使い方

```ruby title="Ruby" showLineNumbers
def hoge(age)
  raise "年齢をマイナス値にすることはできません" if age < 0
  puts "彼は#{age}歳です。"
end

hoge(-5)
```

上記は年齢がマイナス値の場合に`raise`で`RuntimeError`を発生させエラーメッセージで「年齢をマイナス値にすることはできません」と表示させます。

```ruby title="Ruby" showLineNumbers
def foo(a, b)
  raise ArgumentError, "0による除算はできません。" if b == 0
  a / b
end

foo(9, 0)
```

上記はfooの第二引数が0の場合に`raise`で`ArgumentError`を発生させエラーメッセージで「0による除算はできません。」と表示させています。

## transactionとraiseを組み合わせた使い方

`transaction`内で例外が発生する場合だけでなく、プログラム上で特定の条件が満たされなかった場合に意図的に例外を発生させたい場合もあります。
ここで`raise`メソッドを使用します。`raise`を使用することで、意図的に例外を発生させて`transaction`を途中で停止しロールバックを行えます。

`raise`の第一引数に入れられる例外クラスに`ActiveRecord::Rollback`があります。
`ActiveRecord::Rollback`は`transaction`を途中で中止し、行った更新を元に戻す(ロールバック)ために使用される特別な例外クラスです。
通常の`raise`による例外(`RuntimeError`)などはプログラム全体を停止させますが、`ActiveRecord::Rollback`は特別で、`transaction`のロールバックだけを行います。なので`transaction`が中断されてもプログラム全体は停止せず残りの処理を行うことができます。

```ruby title="Ruby" showLineNumbers
ActiveRecord::Base.transaction do
  user.save!
  if shop.invalid?
    raise ActiveRecord::Rollback, "店舗情報が無効です"
  end
  shop.save!
end
```

上記は、`user`と`shop`を同時に更新しようとしているコードで、
`invalid?`メソッドを使用して`shop`のバリデーションを通過したか、してないかを確認しています。
もしバリデーションを通過できなかったらロールバックされます。
これにより整合性が保たれます！

## さいごに

Railsでのtransactionとraiseを使用した例外処理は、データの整合性を守るために非常に重要です。
適切にtransactionを使用することで例外発生時にデータのロールバックが保証されるので不整合な状態になりません。
また、raiseを使用したエラーハンドリングを組み合わせることで、例外の原因をいち早く特定でき問題を回避することが可能になります。
ぜひ使用してみてください。


---

## 目に留まるファーストビュー！グラデーションを活用したデザインとCSS解説

- URL: https://blog.to-ko-s.com/articles/fv-design-gradation
- 著者: 寺田拓真
- 公開日: 2024-09-29
- タグ: HTML, CSS, デザイン

> ファーストビュー制作時にグラデーションを使用することのメリットを紹介しています。


## はじめに

### この記事の概要

みなさん、こんにちは！
Webサイト制作において以下のような悩みはありませんか？

- ユーザーの興味を引けるようなファーストビューを作ることができない
- インパクトのあるファーストビューを作りたいが、容易に実装したい

ファーストビューは訪問者が最初に目にする部分であり、印象を左右する大切な要素です。
ユーザーの関心を引きつけ、サイトへの滞在時間を延ばすためにはデザインに工夫が必要ですが、あまり複雑なデザインにしてしまうと実装が難しくなってしまいます。

そんな時におすすめなのが、グラデーションを使用したファーストビューです！
単色ではなく複数の色をスムーズに変化させることで奥行き感や動きを演出でき、ユーザーの目を引くことができます。
また、グラデーションであれば背景や文字などへの実装も容易で工数がかかりません。

今回はファーストビューにグラデーションを使用したデザイン事例を数点紹介し、合わせてHTML・CSSのコードも紹介させていただきます！

### 対象読者

- CSS初学者の方
- ファーストビュー制作にお悩みの方

## デザイン事例およびコード紹介

### 背景をグラデーションにする

背景をグラデーションにするだけでも奥行き感や視覚的な広がりを持たせることができ、モダンな雰囲気を醸し出すことができます。
また、カラフルで印象的な背景を作ることで、ユーザーにインパクトを与えることができます。
画像をあえてサイドに寄せるところもポイントです。

![青系グラデーション背景にキャッチコピーと画像を配置したファーストビュー](/articles/image-1024x664.webp)

```html title="HTML" showLineNumbers
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ファーストビュー</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <div class="logo">LOGO</div>
      <nav class="menu">
        <ul>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ul>
      </nav>
    </header>

    <div class="first-view">
      <div class="copy">
        <h1>Innovating the Future</h1>
      </div>
      <div class="image-container">
        <img src="image.jpg" alt="Main Image" />
      </div>
    </div>
  </body>
</html>
```

```css title="CSS" showLineNumbers
.logo {
  font-size: 24px;
  font-weight: bold;
}

.menu ul {
  list-style: none;
  display: flex;
}

.menu ul li {
  margin-left: 20px;
}

.menu ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}

.first-view {
  position: relative;
  height: calc(100vh - 70px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to right, #89d4fe, #4491fc);
}

.copy {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
}

.copy h1 {
  font-size: 48px;
  color: white;
}

.image-container {
  position: relative;
  height: 100%;
  width: 70%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.image-container img {
  height: 70%;
  width: auto;
}
```

### ボタン・パネルをグラデーションにする

ボタンやパネルにグラデーションを使うことで、インタラクティブな要素に視覚的なアクセントを加え、ユーザーのクリックを促します。
ファーストビュー以外のセクションにも同色のボタン等を使用することでサイトに統一感が出ます。

![グラデーションを適用したボタンとパネルを使ったファーストビュー](/articles/image-2-4.webp)

```html title="HTML" showLineNumbers
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ファーストビュー</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <div class="container">
        <div class="logo">LOGO</div>
        <div class="contact-button">
          <a href="#">お問い合わせ</a>
        </div>
      </div>
    </header>

    <div class="first-view">
      <div class="copy">
        <h1>Innovating the Future</h1>
      </div>
      <div class="image-container">
        <img src="image.jpg" alt="Main Image" />
      </div>
    </div>
  </body>
</html>
```

```css title="CSS" showLineNumbers
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  background-color: white;
  width: 90%;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.contact-button {
  width: 240px;
  background: linear-gradient(to right, #89d4fe, #4491fc);
  text-align: center;
  border-radius: 5px;
}

.contact-button a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 0;
  display: block;
}

.first-view {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container {
  width: 85%;
  position: relative;
}

.image-container img {
  width: 100%;
  height: auto;
}

.copy {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px 20px;
  border-radius: 5px;
}

.copy h1 {
  font-size: 36px;
  color: black;
}
```

### あしらいにグラデーションをつける

細い線やボーダー、枠線にグラデーションを使用することで、デザインに微妙な動きやアクセントを加え、シンプルな要素を際立たせます。
小さな要素にもグラデーションを適用することで、全体のデザインがより統一感を持ち、洗練された印象になります。

![グラデーションの三角形やサイドバーをあしらいに使ったファーストビュー](/articles/image-3-3.webp)

```html title="HTML" showLineNumbers
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ファーストビュー</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <aside class="sidebar"></aside>
    <div class="first-view">
      <div class="triangle gradient-fill"></div>
      <div class="triangle grey-fill"></div>
      <div class="triangle gradient-fill"></div>
      <div class="triangle grey-fill"></div>

      <div class="image-container">
        <img src="image.jpg" alt="Main Image" />
      </div>
    </div>
  </body>
</html>
```

```css title="CSS" showLineNumbers
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
}

.sidebar {
  background-color: #89d4fe;
  width: 40px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

.first-view {
  width: calc(100% - 40px);
  height: 100vh;
  position: relative;
  margin-left: 40px;
}

.image-container {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  width: 60%;
}

.image-container img {
  width: 100%;
  height: auto;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid;
}

.gradient-fill {
  background: linear-gradient(to right, #89d4fe, #4491fc);
  border-bottom-color: transparent;
  opacity: 0.8;
}

.grey-fill {
  border-bottom-color: grey;
  opacity: 0;
}
```

## さいごに

いかがでしたでしょうか？

グラデーションを意識するだけで単調なデザインから脱出でき、シンプルながらも視覚的に強いインパクトをユーザーに与えられることがお分かりいただけたかと思います。
また、コード自体も複雑なものはないため、容易に実装ができます。
もちろん、ファーストビューだけでなく強調したいセクションに使用していただくことで、ユーザーの興味を引き付けることも可能です。

ぜひ、ご自身の制作時にもお試しください！


---

## 【Zod】union/discriminatedUnionとrefine/superRefineの使い分け

- URL: https://blog.to-ko-s.com/articles/zod-dynamic-schema
- 著者: 杉田侑祐
- 公開日: 2024-09-22
- タグ: React

> この記事ではZodのunionとdiscriminatedUnionの使いわけとrefineとsuperRefineの使い分けの例をあげて解説しています。適切に使い分けができるようになります。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回は動的フォーム実装の際に使用するであろう`union`/`discriminatedUnion`と`refine`/`superRefine`の各々の使い分けの判断をまとめてみました！

この記事では、以下の内容について詳しく解説します：

1. `union`/`discriminatedUnion`と`refine`/`superRefine`の基本概念
2. それぞれの手法が適している具体的なユースケース

Zodを使ったことがある方はもちろん、これから使ってみようと考えている方にとっても、この記事が動的フォーム実装の指針となれば幸いです。
ぜひ最後までお付き合いください！

### 対象読者

- フロントエンドエンジニアの方
- Zodを使い始めたばかりの方

### この記事で扱う内容、扱わない内容

この記事で扱う内容

- `union`/`discriminated union`の使い分けの基準
- `refine`/`superRefine`の使い分けの基準

この記事で扱わない内容

- Zodの基本的な使用方法
- React Hook Formの基本的な使用方法

## union/discriminatedUnionとrefine/superRefineの使い分け

Zodを使用して動的フォームのバリデーションを行う際、`union`/`discriminatedUnion`と`refine`/`superRefine`は有用です。
まずは`union`/`discriminatedUnion`と`refine`/`superRefine`の各々の使い分けを解説します。

また、TypeScriptの`discriminated union`型を知っているとスムーズに理解できると思いますので、わからない方は下記を先に読んでもらえると良いかと思います！

<ExternalLink url="https://typescriptbook.jp/reference/values-types-variables/discriminated-union" />

### union/discriminatedUnionの使い分け

`union`は、一言で言うと複数の異なるスキーマを1つのスキーマにまとめてくれる機能です。

基本的な構文は下記です。

```typescript title="TypeScript" showLineNumbers
const stringOrNumberSchema = z.union([z.string(), z.number()])
```

上記は`string`または`number`を許容するスキーマの例です。
このように複数のスキーマを1つのスキーマにまとめてくれます。

では少し複雑にしてみましょう。
これは、`userType`の値によって動的にスキーマを変更する例です。

```typescript title="TypeScript" showLineNumbers
const baseUserSchema = z.object({
  isActive: z.boolean(),
})

const studentSchema = baseUserSchema.extend({
  userType: z.literal("student"),
  studentId: z.string(),
  grade: z.number(),
})

const teacherSchema = baseUserSchema.extend({
  userType: z.literal("teacher"),
  teacherId: z.string(),
  subject: z.string(),
})

const userSchema = z.union([studentSchema, teacherSchema])

type User = z.infer<typeof userSchema>
```

`userType`との関係性は下記になります。

| userTypeの値 | isActive | studentId | teacherId | grade | subject |
| ------------ | -------- | --------- | --------- | ----- | ------- |
| student      | ◯        | ◯         | ✕         | ◯     | ✕       |
| teacher      | ◯        | ✕         | ◯         | ✕     | ◯       |

これにより`userType`の値が`"student"`か`"teacher"`かによって動的にスキーマを変えることができます。

ですが上記例のように判別対象(上記であれば`userType`の値)がはっきりしている場合は`discriminatedUnion`を使用しましょう！
下記は上記で定義したスキーマを`discriminatedUnion`で記述したものです。

```typescript title="TypeScript" showLineNumbers
import { z } from "zod"

const userSchema = z.discriminatedUnion("userType", [
  z.object({
    userType: z.literal("student"),
    isActive: z.boolean(),
    studentId: z.string(),
    grade: z.number(),
  }),
  z.object({
    userType: z.literal("teacher"),
    isActive: z.boolean(),
    teacherId: z.string(),
    subject: z.string(),
  }),
])

type User = z.infer<typeof userSchema>
```

第一引数に判定対象を指定し、第二引数では判定対象の値ごとのスキーマを配列形式で記述していきます！

上記2つの例のようなスキーマを動的に変更する場合はなるべく`discriminatedUnion`を使用しましょう！
`union`の代わりに`discriminatedUnion`を使用するメリットは下記になります。

**型の安全性**

`discriminatedUnion`は、`userType`フィールドが必ず存在し、指定された値のいずれかであることを保証してくれます。
`union`ではこの保証はありません。

**パフォーマンス**

`discriminatedUnion`は、提供されたオブジェクトが各スキーマと一致するかどうかをチェックする際に、`userType`フィールドを使用して早期に絞り込みを行うため、パフォーマンスが良いとされています。

**エラーメッセージの最適化**

`union`に比べ`discriminatedUnion`を使用した場合、エラーメッセージが最適化され、エラー特定が容易になります。
実例を見たい方は下記を参照してください。

<ExternalLink url="https://zenn.dev/terrierscript/books/2023-01-typed-zod/viewer/2-4-or-union#discriminatedunion" />

**コードの見通しの向上**

`union`に比べコードの見通しが向上します。
下記は`union`で記述した例です。

判定対象が記述されないため、コードの見通しが悪くなります。

```typescript title="TypeScript" showLineNumbers
// unionの例
const baseUserSchema = z.object({
  isActive: z.boolean(),
})

const userUnionSchema = z.union([
  baseUserSchema.extend({
    userType: z.literal("student"),
    studentId: z.string(),
    grade: z.number().min(1).max(12),
    major: z.string().optional(),
    gpa: z.number().min(0).max(4).optional(),
  }),
  baseUserSchema.extend({
    userType: z.literal("teacher"),
    teacherId: z.string(),
    subjects: z.array(z.string()).nonempty(),
    yearsOfExperience: z.number().nonnegative(),
    certifications: z.array(z.string()).optional(),
  }),
  baseUserSchema.extend({
    userType: z.literal("admin"),
    adminId: z.string(),
    department: z.string(),
    accessLevel: z.enum(["low", "medium", "high"]),
    canEditUsers: z.boolean(),
  }),
])
```

`discriminatedUnion`に変えた例です。
第一引数で判定対象を明記するので、コードの見通しが良いです。

```typescript title="TypeScript" showLineNumbers
// discriminatedUnionの例
const baseUserSchema = z.object({
  isActive: z.boolean(),
})

const userDiscriminatedUnionSchema = z.discriminatedUnion("userType", [
  baseUserSchema.extend({
    userType: z.literal("student"),
    studentId: z.string(),
    grade: z.number().min(1).max(12),
    major: z.string().optional(),
    gpa: z.number().min(0).max(4).optional(),
  }),
  baseUserSchema.extend({
    userType: z.literal("teacher"),
    teacherId: z.string(),
    subjects: z.array(z.string()).nonempty(),
    yearsOfExperience: z.number().nonnegative(),
    certifications: z.array(z.string()).optional(),
  }),
  baseUserSchema.extend({
    userType: z.literal("admin"),
    adminId: z.string(),
    department: z.string(),
    accessLevel: z.enum(["low", "medium", "high"]),
    canEditUsers: z.boolean(),
  }),
])
```

### refine/superRefineの使い分け

`refine`/`superRefine`は、一言で言うとスキーマに対してバリデーションロジックを追加できる機能です。

基本的な構文は下記です。

```typescript title="TypeScript" showLineNumbers
import { z } from "zod"

const evenNumberSchema = z.number().refine((n) => n % 2 === 0, {
  message: "数値は偶数でなければなりません",
})
type EvenNumber = z.infer<typeof evenNumberSchema>
```

上記のように`number`型で偶数でないといけない時などにバリデーションロジックを追加できます。
また`refine`をチェーンすることも可能です。

```typescript title="TypeScript" showLineNumbers
import { z } from "zod"

const evenNumberSchema = z
  .number()
  .refine((n) => n % 2 === 0, {
    message: "数値は偶数でなければなりません",
  })
  .refine((n) => n > 10, {
    message: "数値は10より大きくなければなりません",
  })
type EvenNumber = z.infer<typeof evenNumberSchema>
```

Parse時に`refine`で記述したカスタムバリデーションの判定が実行されます。

また値同士が依存している場合のバリデーションロジックを記述する際に適しています。
下記はパスワードと確認用のパスワードが一致しているかのバリデーションロジックの例です。

```typescript title="TypeScript" showLineNumbers
import { z } from "zod"

const passwordSchema = z
  .object({
    password: z.string(),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "パスワードと確認用パスワードが一致しません",
    path: ["confirmPassword"],
  })

type PasswordInput = z.infer<typeof passwordSchema>
```

このように2つの値が依存関係にある場合にとても有用です。
`refine`の第二引数にはエラーメッセージを記述できます。
上記例では、エラーメッセージを「パスワードと確認用パスワードが一致しません」でエラーフィールドを「confirmPassword」にしています。

さらに複雑なバリデーションロジックを実装したい場合に`superRefine`は有用になります。
具体的には依存する値が複数の場合や複雑なバリデーションロジックを追加する場合です。

下記はユーザー登録フォームのスキーマです。

```typescript title="TypeScript" showLineNumbers
import { z } from "zod"

const USER_ROLES = ["user", "admin", "superadmin"] as const

const formSchema = z.object({
  name: z.string().min(3).max(20), // 名前
  email: z.string().email(), // メールアドレス
  age: z.number().int().positive(), // 年齢
  role: z.enum(USER_ROLES), // 役割
  password: z.string().min(8), // パスワード
  confirmPassword: z.string(), // 確認用パスワード
  agreeToTerms: z.boolean(), // 利用規約に同意
})
```

ここから条件を追加します。

条件は下記です。

- パスワードと確認用パスワードの一致判定
  - `password`と`confirmPassword`が一致しているか
- 年齢と役割の関連判定
  - `role`が`admin`の場合は`age`が25歳以上である必要がある
- スーパー管理者の登録条件判定
  - `superadmin`は30歳以上である必要がある
  - `email`の@以降が`company.com`になっているか
- 利用規約の同意判定
  - `agreeToTerms`に値があるか
- パスワードのバリデーション判定
  - 指定のフォーマットに沿っているか

では先ほど定義したスキーマにバリデーションロジックを追加します。

```typescript title="TypeScript" showLineNumbers
import { z } from "zod"

const USER_ROLES = ["user", "admin", "superadmin"] as const

const formSchema = z
  .object({
    name: z.string().min(3).max(20), // 名前
    email: z.string().email(), // メールアドレス
    age: z.number().int().positive(), // 年齢
    role: z.enum(USER_ROLES), // 役割
    password: z.string().min(8), // パスワード
    confirmPassword: z.string(), // 確認用パスワード
    agreeToTerms: z.boolean(), // 利用規約に同意
  })
  .superRefine((data, ctx) => {
    // パスワードと確認用パスワードの一致判定
    if (data.password !== data.confirmPassword) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "パスワードと確認用パスワードが一致しません",
        path: ["confirmPassword"],
      })
    }

    // 年齢と役割の関連判定
    if (data.role === "admin" && data.age < 25) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "管理者は25歳以上である必要があります",
        path: ["age"],
      })
    }

    // スーパー管理者の登録条件判定
    if (data.role === "superadmin") {
      if (data.age < 30) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          message: "スーパー管理者は30歳以上である必要があります",
          path: ["age"],
        })
      }
      if (!data.email.endsWith("@company.com")) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          message: "スーパー管理者は会社のメールアドレスを使用する必要があります",
          path: ["email"],
        })
      }
    }

    // 利用規約同意のチェック
    if (!data.agreeToTerms) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "利用規約に同意する必要があります",
        path: ["agreeToTerms"],
      })
    }

    // パスワードのバリデーション判定
    const passwordStrengthRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
    if (!passwordStrengthRegex.test(data.password)) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "パスワードは少なくとも1つの大文字、小文字、数字、特殊文字を含む必要があります",
        path: ["password"],
      })
    }
  })

type Form = z.infer<typeof formSchema>
```

細かいバリデーションロジックの解説はしませんが、複数の値が依存関係にある場合や値の結果によってバリデーションを変更したい場合に`superRefine`が適しています。
`refine`でできないことやコードが複雑になる場合は`superRefine`を使用しましょう！

## さいごに

今回はZodの`union`/`discriminatedUnion`と`refine`/`superRefine`の各々の使い分けに関して解説いたしました！
いつ使えばいいのかなかなか分かりづらいところだと思うので解説してみました！
Zodでも使用頻度が高いと思いますので適切に使い分けられるようになりたいところですね。


---

## 【CSS】CSSのみで作るループスライダー　縦方向に動かす方法も紹介

- URL: https://blog.to-ko-s.com/articles/css-only-loop-slider
- 著者: 寺田拓真
- 公開日: 2024-09-16
- タグ: HTML, CSS

> JavaScript不要でCSSだけで作れるループスライダーの実装方法を解説。@keyframesとtransformを使い、横スクロールだけでなく縦方向に動くスライダーの作り方やホバー停止の応用も紹介します。


## はじめに

### この記事の概要

こんにちは！
今回は、JavaScriptを使用せずにCSSのみで作成できるループスライダーの作り方を紹介します。
CSSのみでコードもシンプルなため、コーディング初心者の方にもおすすめです。
また、TOP画面で画像をギャラリー表示させたいときやアクセントを加えたいときにも簡単に使えます。

横に動くものだけでなく、縦に動くスライダーのセクション作成方法も紹介します。

### 対象読者

- CSS初学者の方
- 画面に動きを簡単につけたい方

### ループスライダーとは？

そもそもループスライダーとはどういうアニメーションかと言うと、スライドが最後まで行っても途切れず、最初のスライドに戻りループするアニメーションです。
具体的には下記の動画のような動きを示します。

<Video src="/articles/css-only-loop-slider1.mp4" />

このようなスライダーはJavaScriptを使用する作成方法もありますが、CSSのみで作成することで以下のようなメリットがあります。

- ファイルが軽量になる
- コードのメンテナンスが容易
- アニメーションのカスタマイズが柔軟

上記の理由から初心者の方にもおすすめです。

### ループスライダーの実装方法

では早速、具体的な実装方法を紹介します。
今回使用する技術は、`@keyframes`を使ったアニメーションと、`transform`を利用したスライドの移動です。

```html title="HTML" showLineNumbers
<div class="slider">
  <div class="slides">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>
```

```css title="CSS" showLineNumbers
.slider {
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  animation: slide 10s linear infinite;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300%);
  }
}
```

CSSの`@keyframes`を使用し、スライドが横に動くアニメーションを設定しています。`transform: translateX`でスライドの位置を移動し、`infinite`でループを実現します。

基本のコードは以上です。
HTMLのslide1,2,3の箇所に画像を設置することで、画像がループするスライダーを作成可能です。

### 応用

CSSのみでループスライダーを作る基本がわかったところで、さらにカスタマイズする方法を紹介します。
ループスライダーをホバー時にアニメーションを停止させる方法です。

```css title="CSS" showLineNumbers
.slides:hover {
  animation-play-state: paused;
}
```

この行を追加することで、スライダーをホバー時に停止させることができます。

次は縦方向に動くスライダーです。
今回はTOP画面を意識して、以下のようなセクションを作成しましょう。

<Video src="/articles/css-only-loop-slider2.mp4" />

```html title="HTML" showLineNumbers
<div class="c-top-concept">
  <div class="c-top-concept__gallery-area">
    <div class="c-gallery-slider">
      <div class="c-gallery-slider__wrap">
        <ul class="c-gallery-slider__list">
          <li class="c-gallery-slider__item"><img src="yukata.jpg" /></li>
          <li class="c-gallery-slider__item"><img src="yukata.jpg" /></li>
        </ul>
        <ul class="c-gallery-slider__list-2">
          <li class="c-gallery-slider__item"><img src="yukata.jpg" /></li>
          <li class="c-gallery-slider__item"><img src="yukata.jpg" /></li>
        </ul>
      </div>
    </div>
    <div class="c-top-concept__container">
      <div class="c-top-heading">
        <p class="c-top-heading__sub-text">コンセプト</p>
        <p class="c-top-heading__text">Concept</p>
      </div>
      <div class="c-top-concept__text-area">
        <p class="c-top-concept__heading">CSSのみでループスライダー</p>
        <p class="c-top-concept__text">
          テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
          テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
          テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
        </p>
      </div>
    </div>
  </div>
</div>
```

```css title="CSS" showLineNumbers
.c-top-concept {
  width: 100%;
  position: relative;
  .c-top-concept__gallery-area {
    display: flex;
    justify-content: space-between;
    position: absolute;
    inset: 0;
    height: 100%;
    overflow: hidden;
  }
  .c-top-concept__container {
    position: relative;
    width: 100%;
    padding: 40px 0;
    .c-top-concept__text-area {
      max-width: 520px;
      width: 100%;
      margin: 40px auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
      .c-top-concept__heading {
        font-size: 20px;
        text-align: center;
      }
      .c-top-concept__text {
        font-size: 16px;
        line-height: 1.6;
      }
    }
  }
}
```

```scss title="SCSS" showLineNumbers
.c-gallery-slider {
  margin-bottom: 40px;
}
.c-gallery-slider__wrap {
  display: flex;
  overflow: hidden;
  gap: 20px;
  &.--vertical {
    flex-direction: column;
  }
}
.c-gallery-slider__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 20px;
  &.--vertical {
    flex-direction: column;
  }
}
.c-gallery-slider__list {
  animation: slide 60s infinite linear 0.2s both;
}
.c-gallery-slider__list-2 {
  animation: slide-reverse 60s infinite linear 0.2s both;
}

.c-gallery-slider__item {
  width: calc(100vw / 4);
  &.--small {
    width: calc(100vw / 5);
  }
}
.c-gallery-slider__item > img {
  width: 100%;
  border-radius: 16px;
}

@keyframes slide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes slide-reverse {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
```

今回のポイントは左右でそれぞれスライダーを設置することです。
使用するアニメーションが異なるため、必ず独自の命名をしましょう。

スライダーを縦方向に動かす際は`translateY`を使用します。これだけなので非常に簡単です。
左右逆方向にスライダーを動かすには`@keyframes`の0%時と100%時の位置を入れ替えるだけです。
また、`display: flex`および`justify-content:space-between`と`position: absolute`にてスライダーの場所を固定します。

あとはテキストエリアを中央に配置することで、セクションの完成です。

## おわりに

今回はCSSのみでループスライダーを作成しました。
CSSのみでもパフォーマンスの良いスライダーを実現可能です。
今回紹介した例はどれもシンプルな構成なので、ぜひ作成中のページ等に使用してみてください。


---

## 【JavaScript】Dateオブジェクトとタイムゾーンと規格について

- URL: https://blog.to-ko-s.com/articles/javascript-date
- 著者: 杉田侑祐
- 公開日: 2024-09-08
- タグ: JavaScript

> この記事ではJavaScriptでDateを扱う際の注意点と扱い方の基礎が学べます。今現在時刻の呼び出しや計算方法も付随して学べます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はJavaScriptで時間(Date)を扱う際の基礎について紹介します。

Dateを扱う際、何かしらのライブラリを使用すると思います。
ライブラリを使用する前にDateの概要を知ることにより、ライブラリの恩恵を理解できると思います！

またDateの概要を知ることにより、受けとったDateを適切に扱えるようになります。

### 対象読者

- フロントエンドエンジニアの方
- 初学者向け

### この記事で扱う内容、扱わない内容

この記事で扱う内容

- Dateオブジェクトについて
- Dateの国際規格や表示について

この記事で扱わない内容

- Dateを扱うライブラリについて

## Dateオブジェクトの基礎

### 値の取得と設定

まずは基礎であるDateオブジェクトのおさらいを行いましょう。

```javascript title="JavaScript" showLineNumbers
// 現在の日時でDateオブジェクトを作成
const now = new Date()
// Sun Sep 08 2024 20:14:46 GMT+0900 (日本標準時)
```

Dateオブジェクトから新しいインスタンスを生成することにより現在の日時が取得できます。

Dateオブジェクトには様々なメソッドが存在しております。
主要メソッドを紹介します。
下記は`get`メソッドです。

```javascript title="JavaScript" showLineNumbers
// 現在の日時でDateオブジェクトを作成
const date = new Date()
// Sun Sep 08 2024 20:14:46 GMT+0900 (日本標準時)

console.log(date.getFullYear()) // 2024
console.log(date.getMonth()) // 8 (9月)月を取得（0-11の値）
console.log(date.getDate()) // 8
console.log(date.getDay()) // 0 (日曜日)（0-6の値）
console.log(date.getHours()) // 12
console.log(date.getMinutes()) // 34
console.log(date.getSeconds()) // 56
console.log(date.getTime()) // 1725822896000 (Unix時間の開始時点からのミリ秒数)
```

`.get〇〇`とすることにより指定した値を取得できます。
`.getTime()`で取得できるUnix時間については後程説明します。

<Callout variant="memo">
**.getMonth()と.getDay()について**

`.getMonth()`で取得する値は0〜11の値になっています。
0が1月になっており、11が12月になることに気を付けてください。

`.getDay()`で取得する値は0〜6の値になっています。
0が日曜日になっており、6が土曜日になることに気を付けてください。

</Callout>

下記は取得したDateをフォーマットした例です。

```javascript title="JavaScript" showLineNumbers
const date = new Date()
const year = date.getFullYear()
const month = String(date.getMonth() + 1)
const day = String(date.getDate())

console.log(`${year}/${month}/${day}`)
// 2024/9/8
```

このようにフォーマットする際などに使用します。
またよく行う例として文字列メソッドの`.padStart()`を使用して月と日を2桁表記にします。

```javascript title="JavaScript" showLineNumbers
.padStart(桁数, 先頭につける文字列)

例 : "5".padStart(2, "0")
// 05
```

月の「9」を「09」に、日の「8」を「08」にフォーマットします。

```javascript title="JavaScript" showLineNumbers
const date = new Date()
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, "0")
const day = String(date.getDate()).padStart(2, "0")

console.log(`${year}/${month}/${day}`)
// 2024/09/08
```

値を設定したい場合はsetメソッドを使用します。
`set〇〇`で値の設定が可能になります。

```javascript title="JavaScript" showLineNumbers
const date = new Date()

date.setFullYear(2025)
date.setMonth(0) // 1月に設定
date.setDate(15)
date.setHours(15)
date.setMinutes(30)
date.setSeconds(45)

console.log(date)
// Wed Jan 15 2025 15:30:45 GMT+0900 (日本標準時)
```

### Dateの加算・減算・差分・比較

取得したDateオブジェクトに対して`get`メソッド、`set`メソッドを使用することで計算できます。
まずは加算の例です。

```javascript title="JavaScript" showLineNumbers
const date = new Date()
// Sun Sep 8 2024 20:59:07 GMT+0900 (日本標準時)

// 7日後
date.setDate(date.getDate() + 7)
console.log(date)
// Sun Sep 15 2024 20:59:07 GMT+0900 (日本標準時)
```

このように`get`メソッドで取得した値に加算し、`set`メソッドで設定しています。

減算も同様です。

```javascript title="JavaScript" showLineNumbers
const date = new Date()
// Sun Sep 8 2024 20:59:07 GMT+0900 (日本標準時)

// 7日前
date.setDate(date.getDate() - 7)
console.log(date)
// Sun Sep 01 2024 20:59:07 GMT+0900 (日本標準時)
```

次は日数の差分を出す計算です。
このようにDate同士で計算させることも可能です。

```javascript title="JavaScript" showLineNumbers
const date1 = new Date("2024-09-01")
// Sun Sep 01 2024 09:00:00 GMT+0900 (日本標準時)
const date2 = new Date("2024-09-15")
//Sun Sep 15 2024 09:00:00 GMT+0900 (日本標準時)

const diffTime = Math.abs(date2 - date1)
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

console.log(diffDays)
// 14
```

このようにミリ秒で扱って計算させることで差分を出すことが可能です。

また比較して真偽値を返すことも可能です。

```javascript title="JavaScript" showLineNumbers
const date1 = new Date("2024-09-01")
// Sun Sep 01 2024 09:00:00 GMT+0900 (日本標準時)
const date2 = new Date("2024-09-15")
//Sun Sep 15 2024 09:00:00 GMT+0900 (日本標準時)

console.log(date1 < date2) // true
console.log(date1 > date2) // false
console.log(date1.getTime() === date2.getTime()) // false
```

## タイムゾーンについて

ここからはDateを扱う際に皆さん悩むであろうタイムゾーンと規格の概要の紹介です。
タイムゾーンとは同じ標準時を用いる地域全体を指します。

タイムゾーンは世界で主要な24のタイムゾーンが存在しています。
日本は日本標準時のタイムゾーンのためあまり意識することはないと思います。

標準時はそれぞれUTC(協定世界時)からの偏差で表されています。

少しマニアックな話になりますがUTCはCoordinated Universal Timeの略称になっています。
UTCはグリニッジ子午線（経度0度の本初子午線）上の時刻を基準としています。
下記はUTC表記の例です。

```javascript title="JavaScript" showLineNumbers
const dateUTC = new Date()
console.log(dateUTC)
// Sun Sep 01 2024 00:00:00 GMT
```

また日本標準時をJSTといいます。
JSTはJapan Standard Timeの略称です。
JSTはUTC偏差+9:00になっています。

下記はJST表記の例です。

```javascript title="JavaScript" showLineNumbers
const dateJST = new Date()
console.log(dateJST)
// Sun Sep 01 2024 09:00:00 GMT+0900 (日本標準時)
```

GMT+0900に注目してください。
GMTはGreenwich Mean Timeの略称です。
和訳するとグリニッジ標準時になります。

グリニッジ標準時はグリニッジ子午線の標準時を指します。
つまりGMT=UTCとなっており偏差+9時間ということでJSTを表現しています。

先ほどDateオブジェクトのインスタンスを生成(`new Date()`)した際に取得できるDateの標準時は日本標準時に変換されています。
正確にはデバイスの設定で設定してあるタイムゾーンに自動で変換されます。

主要都市とJSTの偏差は下記です。

- ニューヨーク（EST）: JST-14時間
- ロンドン（GMT/BST）: JST-9時間（冬）/ JST-8時間（夏）
- シドニー（AEST）: JST-1時間

<Callout variant="memo">国際的なアプリケーションだとDBなどはUTCで扱うことが多くなるため注意が必要です。</Callout>

## 規格について

ここからはDateの規格について紹介します。

Dateを表示するにあたり様々な規格があります。
主要な規格を紹介します。

### ISO 8601

ISO 8601は、日付と時刻の表記に関する国際規格です。

特徴

- 年月日の順序: YYYY-MM-DD
- 時刻表記: HH:mm:ss
- 日付と時刻の結合: YYYY-MM-DDTHH:mm:ss
- タイムゾーン表記: Z（UTC）または±hh:mm（オフセット）

下記はUTCとJSTの表示例です。
表記の最後にZとついていた場合UTC時間を表しています。

- 2024-09-08T12:34:56Z（UTC時間）
- 2024-09-08T21:34:56+09:00（JST時間）

### UNIX時間（エポック秒）

UNIX時間は、1970年1月1日00:00:00 UTCからの経過秒数で時刻を表現します。

特徴

- 単一の数値で日時を表現
- タイムゾーン情報を含まない（常にUTC基準）
- 2038年問題（32ビット符号付き整数の上限）に注意

例

- 1725753600（2024-09-08T00:00:00Z）

先ほど紹介したDateオブジェクトの`.getTime()`メソッドはUNIX時間を取得できます。

### RFC 2822

電子メールのタイムスタンプ形式として広く使用されています。

特徴

- 人間が読みやすい形式
- 曜日、日、月、年、時刻、タイムゾーンの順

例

- Sun, 08 Sep 2024 12:34:56 +0000

`new Date()`でインスタンスを生成した際の規格とは違うので注意してください。

### JavaScriptの規格について

JavaScriptのDateオブジェクトは上記で紹介した規格ではなくECMAScriptが定めた形式になっており注意が必要です。

例

- Wed Sep 08 2024 21:34:56 GMT+0900 (日本標準時)

構成要素

- 曜日: 3文字の省略形（Wed）
- 月: 3文字の省略形（Sep）
- 日: 1-2桁の数字（08）
- 年: 4桁の数字（2024）
- 時間: 24時間形式（21:34:56）
- タイムゾーンオフセット: GMTからの差（GMT+0900）
- タイムゾーン名: 括弧内に表示（日本標準時）

## タイムゾーンの変換と規格の変換

ここからはDateオブジェクトのよく使用する規格やタイムゾーンの変換の例を紹介します。

```javascript title="JavaScript" showLineNumbers
const date = new Date()
// Sun Sep 08 2024 22:21:45 GMT+0900 (日本標準時)

// UTC時間に変換
console.log(date.toUTCString())
// Sun, 08 Sep 2024 13:21:45 GMT

// ISO 8601に変換
console.log(date.toISOString())
// 2024-09-08T13:21:45.012Z

// ローカル時間に変換
console.log(date.toLocaleString())
// 2024/9/8 22:21:45

// ローカル時間の日付部分のみを取得
console.log(date.toLocaleDateString())
// 2024/9/8

// ローカル時間の時間部分のみを取得
console.log(date.toLocaleTimeString())
// 22:21:45

// 特定のタイムゾーンに変換
console.log(date.toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" }))
// 2024/9/8 22:21:45
```

このように様々な規格やタイムゾーンに変換することが可能です。

UNIX時間を扱う際の例です。

```javascript title="JavaScript" showLineNumbers
const date = new Date()

// DateからUNIX時間に変換
const dateTimeToUnixTime = Math.floor(date.getTime() / 1000)
console.log(dateTimeToUnixTime)
// 1725802329

// UNIX時間からDateに変換
const unixTimeToDate = new Date(dateTimeToUnixTime * 1000)
console.log(unixTimeToDate)
// Sun Sep 08 2024 22:32:09 GMT+0900 (日本標準時)
```

## さいごに

今回はDateオブジェクトとタイムゾーンや規格について紹介しました。
やはりDateを扱う場合はライブラリに任せたほうが考慮事項が少なく安全だと思いました！
今現在TemporalというDateを扱う標準化ライブラリの話も進んでいる(2024年9月現在)みたいなのでいつかはライブラリを使用しなくてもDateを扱えるようになるかもしれません。
興味ある方は下記を参照してみてください！

<ExternalLink url="https://tc39.es/proposal-temporal/docs/ja/" />


---

## 【JavaScript】console.〇〇を使って効率よくデバッグしよう！

- URL: https://blog.to-ko-s.com/articles/console-object
- 著者: 杉田侑祐
- 公開日: 2024-08-26
- タグ: JavaScript

> この記事では、JavaScriptのconsoleオブジェクトを用いたデバッグの例を紹介しています。この記事を読むことで効率よくデバッグを行えるようになります。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はJavaScriptの効率の良いデバッグ方法を紹介します。

皆さんデバッグするとき`console.log`を使用すると思います。
`console`オブジェクトはもちろん`log`以外にも存在します。

問題に対して適切な`console`のメソッドを使用し効率よくデバッグできるようになりましょう！
普段`.log`しか使用してないって方は最後まで読んでいただけると幸いです！

### 対象読者

- フロントエンドエンジニアの方
- 初学者向け

## consoleオブジェクトの概要

普段皆さんが何気に使用しているだろう`console.log`ですが`console`オブジェクトには`log`以外にも様々なメソッドが存在しています。
例えば`error`メソッドではコンソール上で赤く表示してくれます。

```javascript title="JavaScript" showLineNumbers
console.error("エラーが発生しました")
```

![console.errorで赤く表示されたエラーメッセージの出力結果](/articles/042e34b4593b7ac809ae738246f861c8.webp)

なにかしらのエラーが発生した際は`error`メソッドを使用してエラーだとわかるように表示してくれます。
`console`オブジェクトにはデータの形式で適切なメソッドを使用することでデバッグが効率的に行えるようになっています。

### consoleオブジェクトのメソッド一覧

まずは`console`オブジェクトに存在するメソッドを紹介します！
メソッド以外にもプロパティ等がありますが今回は割愛します！

| メソッド名             | 用途概要                                                                                                                                                                                      |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `log`                  | 一般的なメッセージや変数の値をコンソールに出力します。もっともよく使われるメソッドです。                                                                                                      |
| `info`                 | 情報メッセージを出力します。見た目は`console.log()`と同じですが、情報の意味合いを持たせたメッセージ出力に使います。                                                                           |
| `warn`                 | 警告メッセージを出力します。コンソールでは通常、黄色で表示されます                                                                                                                            |
| `error`                | エラーメッセージを出力します。通常は赤色で表示され、エラーが発生したことを示します。                                                                                                          |
| `table`                | 配列やオブジェクトを表形式で出力します。特に複雑なデータ構造を視覚的に分かりやすく表示するのに便利です。                                                                                      |
| `group`/`groupEnd`     | ログメッセージをグループ化し、ネストさせることができます。グループ化されたメッセージは、折りたたみ可能です。`console.group()`でグループを開始し、`console.groupEnd()`でグループを終了します。 |
| `groupCollapsed`       | `console.group()`と同様にグループを作成しますが、最初は折りたたまれた状態で表示されます。                                                                                                     |
| `time`/`timeEnd`       | タイマーを開始し、コードの実行時間を測定します。`console.time()`でタイマーを開始し、`console.timeEnd()`でタイマーを終了して時間を出力します。タイマーにはラベルを付けることができます。       |
| `assert`               | 条件が`false`の場合にのみメッセージを出力します。デバッグ中に特定の条件を確認するのに役立ちます。                                                                                             |
| `count`/`countReset`   | 何回呼ばれたかをカウントして出力します。`console.countReset()`でカウントをリセットできます。                                                                                                  |
| `trace`                | スタックトレースを出力します。現在のコードの呼び出し元を確認したいときに便利です。                                                                                                            |
| `clear`                | コンソールの内容をすべてクリアします。                                                                                                                                                        |
| `dir`                  | 指定されたJavaScriptオブジェクトのインタラクティブなリスト（プロパティやメソッド）を表示します。                                                                                              |
| `debug`                | デバッグメッセージを出力します。`console.log()`と同じように使えますが、通常は開発者ツールで「デバッグ」レベルのメッセージとして扱われます。                                                   |
| `profile`/`profileEnd` | プロファイルを開始し、`console.profileEnd()`で終了します。コードのパフォーマンス分析に使用されます（ブラウザによってはサポートされていない場合があります）。                                  |

15メソッドもあるんです！
ですが、実際このメソッドいつ使うんだよっていうメソッドもあります！

今回は実用性のあるメソッドをコード例とともに紹介します！

## 実例

今回コンソールの出力はGoogle ChromeのDeveloperToolを使用しています！

### tableメソッド

配列やオブジェクトを表形式で出力してくれます。

取得したデータ(配列やオブジェクト)等を表形式でconsoleに表示してくれます。

```javascript title="JavaScript" showLineNumbers
const hoge = [
  { id: 1, name: "tanaka" },
  { id: 2, name: "satou" },
  { id: 3, name: "hayashi" },
]
console.table(hoge)
```

console画面

![console.tableで配列データが表形式で出力された結果](/articles/267787bec7d09a24745d01e480511097.webp)

コンソールの画像を見ていただけるように表形式で表示してくれます。
取得したデータなどを確認する際は`log`メソッドは使用せずに`table`メソッドを使用しましょう！

### countメソッド

何回呼ばれたかをカウントして出力します。
個人的にはパフォーマンス改善の際、無駄に呼び出してないかなどのデバッグの際に使用しています。

サンプルコードはReactのコードになります。

```tsx title="React" showLineNumbers
import { useState } from "react"

export function MyComponent() {
  console.count("レンダリング回数")

  const [count, setCount] = useState(0)

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}
```

console画面

![console.countでレンダリング回数がカウント表示された結果](/articles/149c7079b724611330264c4ae3766b3c.webp)

このようにレンダリング回数などを可視化できます！
無駄なレンダリングの調査する際などは積極的に使いましょう！

### time/timeEndメソッド

タイマーを開始し、コードの実行時間を測定します。

今回はループ処理の処理時間を可視化してみます。

<Callout variant="warning">引数で渡す文字列は`time`/`timeEnd`で同一でないといけません</Callout>

```javascript title="JavaScript" showLineNumbers
function delayedFunction() {
  console.time("time")

  // ここに計測したい処理を追加します
  for (let i = 0; i < 1000000; i++) {
    // 重い処理をシミュレートするためのループ
  }

  console.timeEnd("time")
}
```

コンソール画面

![console.time/timeEndでループ処理の実行時間が表示された結果](/articles/6c408c799bd5cd168482fa06b0694f53.webp)

パフォーマンス改善の際など、悪影響を及ぼしている箇所などに使用することで処理時間を可視化できます！

### traceメソッド

現在のコードの呼び出し元を確認したいときに使用します。
関数等がどこから呼ばれたかを確認できます。

```javascript title="JavaScript" showLineNumbers
function first() {
  second()
}

function second() {
  third()
}

function third() {
  console.trace("Trace point")
}

first()
```

コンソール画面(@以降は本来ファイル名が書かれています。)

![console.traceで関数の呼び出し元がスタックトレースで表示された結果](/articles/8f1101cd7f5028cff1a3ee895f7aa005.webp)

コードが複雑になった際などに使用すると呼び出し元の特定が捗ると思います！

## さいごに

今回はJavaScriptの`console`オブジェクトを紹介しました。
発生した問題に適切なメソッドを使えるようになるとデバッグするスピードが早くなると思います！
今回例として挙げたもの以外にも気になるメソッドがあれば使用してみてください！


---

## ContactForm7で作成したお問い合わせフォームのスパム対策

- URL: https://blog.to-ko-s.com/articles/wordpress-anti-spam-cloudflare-turnstile
- 著者: 成岡拓哉
- 公開日: 2024-08-14
- タグ: WordPress

> ContactForm7のスパム対策を行いたい方に向けて、Cloudflare Turnstile というサービスを使用したスパム対策の方法をご紹介します。 Google reCAPTCHAとは異なりリクエスト数が無制限なので便利です。是非使ってみてください。


## はじめに

株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はWordPressのプラグインContactForm7で作成したお問い合わせフォームのスパム対策の方法をご紹介します。

今回ご紹介するのは一般的に普及しているGoogle reCAPTCHAを用いる方法ではなくCloudflare Turnstileというツールを使用する方法です。Cloudflare TurnstileはGoogle reCAPTCHAのデメリットを補ってくれるサービスになりますのでぜひおすすめです。

### 対象読者

- お問い合わせフォームの迷惑メールに困っている方
- Google reCAPTCHAからの移行を考えている方

## Google reCAPTCHAについて

Google reCAPTCHAは、Googleが提供しているウェブサイトをスパムや悪意のある攻撃から守るためのセキュリティ対策ツールでお問い合わせフォームやログインフォームなどで使用されます。 もちろんWordPressでも問題なく使用でき、プラグインのContact Form 7で作成したお問い合わせフォームにも使用できます。

ただ2024年4月から無料で利用できる月間リクエスト数が大幅に縮小してしまい、毎月1万リクエストまでとなってしまいました。そのためある程度の大きい規模のサイトだとリクエスト数が足りない恐れがあります。

reCAPTCHAの導入については別の記事を参考にしてください。

<InternalLink slug="wordpress-anti-spam-recaptcha" />

## Cloudflare Turnstileについて

そこで今回ご紹介するのがCloudflareが提供しているCloudflare Turnstileというツールです。
Cloudflare TurnstileはGoogle reCAPTCHAと基本的な機能は一緒ですが、Google reCAPTCHAよりも読み込み速度が早くなんと言ってもリクエスト数が無制限です。設定もGoogle reCAPTCHAと同じくらい簡単なのでほとんどの場合でGoogle reCAPTCHAよりも使いやすいツールだと思います。

## Cloudflare Turnstileの導入

それではCloudflare Turnstileの導入をしていきます。

### Cloudflare Turnstileの登録

<ExternalLink url="https://www.cloudflare.com/ja-jp/application-services/products/turnstile/" />

上記サイトからアカウントがあればログイン、なければアカウント登録をします。

### サイトを追加

Cloudflare Turnstileの管理画面からサイトを追加します

![Cloudflare Turnstileの管理画面](/articles/wordpress-anti-spam-cloudflare-turnstile-add-1024x526.jpg)

Cloudflare Turnstileを導入したいサイト名とドメインを入力し保存します。

![サイト名とドメインの入力画面](/articles/wordpress-anti-spam-cloudflare-turnstile-site-add-827x1024.jpg)

### サイトキーとシークレットキーの取得

サイトを追加すると、サイトキーとシークレットキーが表示されるのでそれをコピーしておきます。これは後ほどWordPressのプラグインの設定で使用します。

![サイトキーとシークレットキーの表示](/articles/wordpress-anti-spam-cloudflare-turnstile-cloudflare-turnstile-key-1024x512.jpg)

## WordPressのプラグインの導入と設定

Cloudflare Turnstileのサイト設定が完了したら、WordPressのプラグインの導入と設定していきます。

### プラグインの導入

「Simple Cloudflare Turnstile」で検索しプラグインをインストールします。

![Simple Cloudflare Turnstileプラグインのインストール](/articles/wordpress-anti-spam-cloudflare-turnstile-plugin-add-1024x724.jpg)

### Cloudflare TurnstileのAPIキーの入力

先ほどCloudflare Turnstileのサイトでコピーしたサイトキーとシークレットキーを入力します。

![APIキーの入力画面](/articles/wordpress-anti-spam-cloudflare-turnstile-plugin-api-1024x385.jpg)

### Cloudflare Turnstile を有効化したいフォームを選択する

Cloudflare Turnstileを有効化したいフォームを選択します。
今回はContact Form 7で作成したお問い合わせフォームで有効化したいのでContact Form 7のところにチェックを入れます。

![Turnstileを有効化するフォームの選択](/articles/wordpress-anti-spam-cloudflare-turnstile-form-setting-1024x971.jpg)

### APIテスト

設定が完了すると接続テストのアナウンスが表示されるので応答テストをクリックします。
テストが完了するとWordPressのサイト内でCloudflare Turnstileが使えるようになります。

![接続テストの画面](/articles/wordpress-anti-spam-cloudflare-turnstile-connect-1024x513.jpg)

### ContactForm7のフォームにショートコードを追加する

ContactForm7のフォーム編集から下記ショートコードを任意の場所に追加します。

`[cf7-simple-turnstile]`

![ContactForm7へのショートコード追加](/articles/wordpress-anti-spam-cloudflare-turnstile-cf7-insert-1024x723.jpg)

これでお問い合わせフォームにCloudflare Turnstileが追加できました。

![Cloudflare Turnstileが追加されたお問い合わせフォーム](/articles/wordpress-anti-spam-cloudflare-turnstile-preview-1024x694.jpg)

## さいごに

今回はWordPressのプラグインContactForm7で作成したお問い合わせフォームにおけるスパム対策の方法をご紹介しました。
Cloudflare Turnstileというサービスを使用したスパム対策の方法で、リクエスト数が無制限なので便利です。是非使ってみてください。


---

## 【handlebars】HTMLの共通部分をパーシャル化して管理する方法

- URL: https://blog.to-ko-s.com/articles/html-partial-handlebars
- 著者: 成岡拓哉
- 公開日: 2024-08-10
- タグ: HTML, CSS, JavaScript

> HTMLのヘッダーやフッターなどの共通部分をパーシャル化する方法を解説します。vite-plugin-handlebarsを使った効率的なHTML管理方法を紹介します。


## はじめに

株式会社TOKOSのタクヤです！
今回はヘッダーやフッターなどの共通部分をパーシャル化する方法を解説します！
`handlebars`というライブラリを用いた簡単な方法ですのでぜひ試してみてください！

### 対象読者

- HTMLコーダー
- ヘッダーやフッターのHTMLを効率よく管理したい方

## 前提

`Vite`と`TypeScript`の環境を使用しています。
バージョンは以下のとおりです。

| Node                   | 20.11.1 |
| ---------------------- | ------- |
| Vite                   | 5.2.0   |
| TypeScript             | 5.2.2   |
| vite-plugin-handlebars | 2.0.0   |

## 導入

### プラグインの導入

ライブラリの導入を行います。
今回使うライブラリは`vite-plugin-handlebars`です。
以下コマンドでインストールしてください。

```bash title="ターミナル" showLineNumbers
$ yarn add -D vite-plugin-handlebars
```

### ディレクトリ構造

ここでプロジェクト全体のファイル構成を確認します。

```text title="ディレクトリ構造" showLineNumbers
├── node_modules
├── public
├── src
│   ├── company
│   │   └── index.html
│   ├── css
│   ├── js
│   │   ├── data.ts
│   │   └── main.ts
│   ├── partials
│   │   ├── footer.hbs
│   │   └── header.hbs
│   └── index.html
├── package.json
└── vite.config.js
```

`src/partials`の中にヘッダーやフッターなどの共通パーツを入れます。
拡張子は`.hbs`です。
`src/js`の中にプロジェクト全体で使用するサイト名やページ単位で使用するタイトルを記載した`data.ts`と、JavaScriptのエントリーポイントとなる`main.ts`があります。
`src`直下にある`index.html`はトップページ、`src/company`の直下にある`index.html`は会社概要ページのファイルです。

## 各ファイルの設定

ライブラリの導入が完了したら、各ファイルの設定を行っていきます。

### vite.config.jsの設定

`vite-plugin-handlebars`を使うために`vite.config.js`の設定をしていきます。

```javascript title="vite.config.js" showLineNumbers
import { resolve } from "path"
import { defineConfig } from "vite"
import handlebars from "vite-plugin-handlebars"
import { pageData, siteData } from "./src/js/data"

export default defineConfig({
  // 省略
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, "src/partials"),
      context: (pagePath) => {
        return {
          siteTitle: siteData.title,
          page: pageData[pagePath],
        }
      },
    }),
  ],
})
```

`partialDirectory`の値に共通パーツが入っている`src/partials`を指定します。
`context`の値には各ページで使用するための情報を返す関数を設定しています。
関数内の`siteTitle`と`page`は`.html`や`.hbs`で使用できます。

### data.tsの設定

```typescript title="src/js/data.ts" showLineNumbers
export const siteData = {
  title: "株式会社TOKOS",
}

export const pageData = {
  "/index.html": {
    title: siteData.title,
  },
  "/company/index.html": {
    title: `会社概要 | ${siteData.title}`,
  },
}
```

サイト、トップページ、会社概要ページのタイトルを定義しています。

## 共通パーツの作成

共通パーツの作成をしていきます。
`header.hbs`と`footer.hbs`を作成していきます。

### header.hbsの作成

全ページ共通の`head`タグと`body`タグの開始、およびヘッダーナビゲーションを共通化しています。
`</body>`と`</html>`の閉じタグは`footer.hbs`で記述するため、ここでは含めません。

```html title="src/partials/header.hbs" showLineNumbers
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{page.title}}</title>
  </head>
  <body>
    <header>
      <ul class="global-menu">
        <li>
          <a href="/">トップ</a>
        </li>
        <li>
          <a href="/company/">会社概要</a>
        </li>
        <li>
          <a href="/service/">サービス</a>
        </li>
        <li>
          <a href="/contact/">お問い合わせ</a>
        </li>
      </ul>
    </header>
  </body>
</html>
```

`title`タグには`{{ page.title }}`でページにおけるタイトルを表示しています。

### footer.hbsの作成

```html title="src/partials/footer.hbs" showLineNumbers
    <footer>
      <ul class="global-menu">
        <li>
          <a href="/">トップ</a>
        </li>
        <li>
          <a href="/company/">会社概要</a>
        </li>
        <li>
          <a href="/service/">サービス</a>
        </li>
        <li>
          <a href="/contact/">お問い合わせ</a>
        </li>
      </ul>
    </footer>
    <script type="module" src="/js/main.ts"></script>
  </body>
</html>
```

フッターとJavaScriptの読み込み、および`</body>`と`</html>`の閉じタグを記述しています。

## 共通化パーツの表示

最後に共通化したパーツを表示していきます。

### HTMLファイル

```html title="src/index.html" showLineNumbers
{{> header }}
<h1>{{page.title}}のトップページ</h1>
{{> footer}}
```

`{{> header}}`と`{{> footer}}`で共通化してあるヘッダーとフッターを読み込んでいます。
共通化したパーツの表示は`{{> [ファイル名]}}`のような形になります。
これで共通化したパーツの表示ができました。

## 終わりに

今回はHTMLの共通部分をパーツ化する方法を説明しました。
ぜひ`handlebars`を使って共通化パーツを作り、HTMLの管理を効率化してみてください。


---

## 【React】ReactHookFormのuseFieldArrayで可変フォームの実装

- URL: https://blog.to-ko-s.com/articles/react-hook-form-usefieldarray
- 著者: 杉田侑祐
- 公開日: 2024-07-29
- タグ: React

> この記事ではReactライブラリのReactHookFormを紹介しました。可変フォームを例にuseFieldArrayを使用し実装しています。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
本日はReactHookFormで実装する可変フォームの紹介をします。

可変フォームでもReactHookFormを使用すればお手軽に実装できてしまいます！
ReactHookFormを使用したことがない方は下記を一度参照することをおすすめします！

<ExternalLink url="https://react-hook-form.com/" />

### 対象読者

- フロントエンドエンジニアの方
- ReactHookFormを使用している方

## 開発環境

今回はスタイリングはTailwind CSSを使用しています。
今回Tailwind CSSの使用方法は省きます。

- `react-hook-form`: "^7.51.5",
- `react`: "^18",
- `tailwindcss`: "^3.4.1",
- `typescript`: "^5"

## 実装完了予定

今回は入力欄が増減するフォームを作成していきたいと思います。
今回の完成予定は下記になります。

<Video src="/articles/react-hook-form-usefieldarray.mp4" />

このように可変するフォームを作成していこうと思います。
早速コードの紹介です。

## useFormの使用

```tsx title="React" showLineNumbers
export default function ExamplePage() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: {
      name: { firstName: "", lastName: "" },
    },
  })

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <ul className="flex flex-col gap-2">
        <li className="flex gap-2">
          <input {...register("name.firstName")} className="border border-black" />
          <input {...register("name.lastName")} className="border border-black" />
        </li>
      </ul>
      <button type="submit" className="mt-2 w-[300px] bg-blue-500 p-2 text-white">
        送信
      </button>
    </form>
  )
}
```

まずは`useForm`を使用していつも通りフォームを実装してください。
今回最終的に取得したいバリューは`name:\[{firstName:string,lastName:string}\]`ですが一旦通常の単一フォームで実装しています。
名字と名前の入力するフォームを想定しています。
`defaultValues`は空文字にしています。

## 可変フォームの実装

React Hook Formで可変フォームを実現するには`useFieldArray`を使用しなければなりません。
最終的に取得したい値が配列で、要素数を可変させたい場合に使用します！

<Callout variant="warning">
  初期状態でフォームを表示させたい場合、`defaultValues`で初期値を指定してください。
  今回は初期状態で表示させたいため`defaultValues`で指定しています。
</Callout>

```tsx title="React" showLineNumbers
export default function ExamplePage() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: {
      name: [{ firstName: "", lastName: "" }],
    },
  })
  const { fields, append, remove } = useFieldArray({
    control,
    name: "name",
  })

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <button
        className="mb-3 w-[300px] bg-green-500 p-2 text-white"
        type="button"
        onClick={() => append({ firstName: "", lastName: "" })}
      >
        追加する
      </button>
      <ul className="flex flex-col gap-2">
        {fields.map((item, index) => (
          <li key={item.id} className="flex gap-2">
            <input {...register(`name.${index}.firstName`)} className="border  border-black" />
            <input {...register(`name.${index}.lastName`)} className="border border-black" />
            <button className="bg-red-500 p-2 text-white" type="button" onClick={() => remove(index)}>
              削除する
            </button>
          </li>
        ))}
      </ul>
      <button type="submit" className="mt-2 w-[300px] bg-blue-500 p-2 text-white">
        送信
      </button>
    </form>
  )
}
```

`useFieldArray`を呼びだします。
引数には`control`と`name`を渡します。
`control`は`useForm`から取得したものを渡す必要があり、`name`は必須になっています。
今回は`defaultValues`で初期状態を指定しているため、`control`を渡しています。

その他詳細が知りたい方は下記を参照してください。

<ExternalLink url="https://react-hook-form.com/docs/usefieldarray" />

今回この`useFieldArray`の`fields`が重要になってきます。
可変させたいフォームをfieldsで繰り返し処理(`map`)することにより、可変フォーム化できます。
`map`処理の第二引数の`index`を`register`のname属性に渡し、一意なnameにすることにより可変フォーム化するということです。

<Callout variant="warning">fieldsでmapしている要素のkeyは`field.id`にしてください。</Callout>

また`useFieldArray`にはメソッドが用意されております。
追加する(append)や削除(remove)など、これらを使用することで配列内の要素を増減できます。

`append`や`remove`の他にも配列内の要素を扱うためのメソッドが用意されております。

| append  | フィールドの最後(配列の最後)に指定したデータを追加してフォーカスします。                   |
| ------- | ------------------------------------------------------------------------------------------ |
| remove  | 特定の位置(index)にある入力を削除します。                                                  |
| prepend | フィールドの先頭(配列の最初)に指定したデータを追加してフォーカスします。                   |
| insert  | 特定の位置(index)に指定したデータを追加してフォーカスします。                              |
| swap    | 位置の入れ替え                                                                             |
| move    | 指定した位置に移動                                                                         |
| update  | 特定の位置で入力を更新すると、更新されたフィールドはマウント解除され、再マウントされます。 |
| replace | 配列の値全体を置き換え                                                                     |

このように実装条件により、様々なメソッドを選択できます。

通常の可変フォームですと、`append`と`remove`を使用すれば問題ないかと思います！

## さいごに

今回はReactHookFormで可変フォームを作成してみました。
やはりReactHookFormは様々なHookが用意されており、とても助かるなという印象です。

可変フォームなど少々複雑でも簡単に実装できてしまい大変助かります！


---

## 【TypeScript】react-hook-form + zodでbooleanなラジオボタンを実装する方法

- URL: https://blog.to-ko-s.com/articles/typescript-react-hook-form-zod-radio-button
- 著者: 西原月熙
- 公開日: 2024-07-21
- タグ: React, TypeScript

> react-hook-formとzodを使ったフォームで、ラジオボタンの値をbooleanとして扱う方法を解説。z.enumとtransformの組み合わせや、z.input/z.outputによる型安全な実装手順を紹介します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、React(Next.js)でフォームを作る際にほぼ必須の`react-hook-form`と、そのバリデーションを良い感じにカスタムできる`zod`のややニッチ?な説明をします!

具体的には、ラジオボタンの値を`boolean`として上手く扱う方法です！
今までラジオボタンを使う時に上手く値や型を処理できていなかった人は最後まで見てください💪

## 対象読者・前提

- TypeScript + `react-hook-form` + `zod`を使ったことがある人
- ラジオボタンの実装方法に困っていた方

今回は「TypeScript + `react-hook-form` + `zod`」の大枠の実装方法の説明は省略しています🙏
また、本記事で述べているラジオボタンは`<input type="radio" />`のようなコードで表現するものとなっています。

## ラジオボタンの問題点

ラジオボタンを実装する時に問題となるのが、選択時の`value`を`string`でしか扱えないことです🥲

```html
<input type="radio" name="isAdmin" value="true" />
<label>管理者にする</label>

<input type="radio" name="isAdmin" value="false" />
<label>管理者にしない</label>
```

上記のように`boolean`な値を持つラジオボタンを作ろうとしても、`value="true"`や`value="false"`で取得できるのは文字列の`"true"`, `"false"`になってしまうので本当に欲しい`boolean`を取得できないです🫠

### 「TypeScript + `react-hook-form` + `zod` 」で問題の再現

上記の問題を「TypeScript + `react-hook-form` + `zod`」で表現すると、

```tsx showLineNumbers {4}
// スキーマの定義
const schema = z.object({
  // ここではbooleanとして定義している
  isAdmin: z.boolean({
    invalid_type_error: "booleanで入力してください！！",
  }),
})
// スキーマから型の生成
type Schema = z.infer<typeof schema>

// コンポーネント部分
export function ZodForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Schema>({
    resolver: zodResolver(schema),
  })

  // 送信ボタン押下後の処理
  const onSubmit = (params: Schema) => {
    console.log(params)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <div className="flex gap-x-2">
          {/* ラジオボタン */}
          <input {...register("isAdmin")} type="radio" id="true" value="true" name="isAdmin" />
          <label htmlFor="true">管理者にする</label>
        </div>
        <div className="flex gap-x-2">
          <input {...register("isAdmin")} type="radio" id="false" value="false" name="isAdmin" />
          <label htmlFor="false">管理者にしない</label>
        </div>
        {errors.isAdmin && <p>{errors.isAdmin.message}</p>}
      </div>
      <button type="submit">送信</button>
    </form>
  )
}
```

![管理者にする・しないを選ぶラジオボタンと送信ボタンのフォームUI](/articles/cf81e3efce1cc6fc89f3abe5f56984d5-1024x760.jpg)

↑ 実際のUI

上記コードの4行目で`isAdmin: z.boolean`としていますが、先程述べた通りラジオボタンは`string`しか扱えないのでバリデーションエラーに引っかかってしまいます。

![ラジオボタンを選択してもz.booleanのバリデーションエラーが表示される状態](/articles/d6e258b8b41f0159b63b8e9c879a8292-1024x578.jpg)

↑ チェックを入れているのにバリデーションエラーに引っかかる

## ラジオボタンで上手くbooleanを扱う

### スキーマ変更による修正

なので、仕方なしに上記コードのzodのスキーマは以下のように修正します

```typescript
// スキーマの定義
const schema = z.object({
  // enumに変更
  isAdmin: z.enum(["true", "false"]),
})
// スキーマから型の生成
type Schema = z.infer<typeof schema>

// 以下略
```

`z.enum(["true", "false"])`は「文字列の`"true"`か`"false"`のみ許容」というバリデーションです。
この記述にすることで、「チェックをしてもバリデーションエラーになる」問題は解消しました！
しかし、本来扱いたいのは真の`boolean`なので、「文字列の`"true"`か`"false"`」を上手く`boolean`に変更したいです🤔

### transformによる修正

ここで、zodの`transform`という関数を使います！
`transform`を使うことで、バリデーション後に任意の値に変換できます✨
`transform`バージョンを記述します。

```typescript
// スキーマの定義
const schema = z.object({
  // ここではbooleanとして定義している
  isAdmin: z.enum(["true", "false"]).transform((val: "true" | "false") => val === "true"),
})
// スキーマから型の生成
type Schema = z.infer<typeof schema>

// 以下略
```

`transform((val: "true" | "false") => val === "true")`で、元々の値`val`が`"true"`かどうかの比較した結果を`return`しています。
こうすることで、実際の`boolean`に変換できました✨

しかし、機能的には問題無いですが型定義部分がやや微妙になっています。
`type Schema = z.infer<typeof schema>;`で生成される型は`{ isAdmin: boolean }`となります。
一見問題無さそうなのですが、例えばdefaultValuesで初期値を設定しようとするとエラーになってしまいます。

![defaultValuesにstringの"false"を設定した際にboolean型との型エラーが発生](/articles/image-10.webp)

↑ フォームを入力中の値は文字列の`"true"` or `"false"`なので初期値に`"false"`を設定しようとしているが、型エラーとなっている

この型エラーに対する問題を解消していきます！

### 型定義にinput, outputを使用

具体的には、まずzodのスキーマから型を生成する時に、`infer`の代わりに`input`と`output`というメソッドを使います。

```typescript title="スキーマ部分" showLineNumbers {6,7}
// スキーマの定義
const schema = z.object({
  isAdmin: z.enum(["true", "false"]).transform((val: "true" | "false") => val === "true"),
})
// スキーマから型の生成
type InputSchema = z.input<typeof schema>
type OutputSchema = z.output<typeof schema>

// 以下略
```

`input`は`transform`**前**の値の型を、`output`は`transform`**後**の値の型を生成できます！
中身を見ると、`InputSchema` → `{ isAdmin: "true" | "false" }`、`OutputSchema` → `{ isAdmin: boolean }`となっています。

そして、できた型をuseForm部分に適用し直します！

```typescript
export function ZodForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<InputSchema, unknown, OutputSchema>({
    resolver: zodResolver(schema),
    defaultValues: {
      isAdmin: "false",
    },
  })
  // 以下略
}
```

`useForm<InputSchema, unknown, OutputSchema>`とすることで、フォームの中の値を扱う時はInputSchemaを、バリデーション後には`OutputSchema`を使うことができます✨

よって、先程出ていた`defaultValues`部分のエラーも出なくなり、`onSubmit`の引数も`boolean`として`isAdmin`の値が取得できるようになりました💪

## おわりに

今回は「TypeScript + `react-hook-form` + `zod`」でよく有りそうかつ問題になりそうなラジオボタンを題材にしてみました！
需要があれば他のinputやもっと複雑なUI・仕様のフォームの解説もしようと思います😎


---

## 【WordPress】画像に設定した代替テキストをalt属性に挿入する方法

- URL: https://blog.to-ko-s.com/articles/wordpress-thumbnail-alt-insert
- 著者: 成岡拓哉
- 公開日: 2024-07-14
- タグ: WordPress

> WordPressでオリジナルテーマを作成したい人に向けて、WordPressの固定ページや投稿のアイキャッチに設定した代替テキストを画像のalt属性に挿入する方法を紹介します。是非参考にしてみてください。


## はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はWordPressの固定ページや投稿のアイキャッチに設定した代替テキストを画像のalt属性に挿入する方法を説明します。

設定した代替テキストがaltに自動で挿入できるのでとても便利です。
ぜひ参考にしていただけたらと思います。

### 対象読者

- WordPressでオリジナルテーマを作成している人
- WordPressで設定した画像の代替テキストをalt属性に挿入したい人

## 実装

下記の流れで実装していきます。

- 投稿を作成
- 投稿に代替テキスト付きのアイキャッチ画像を設定
- 投稿一覧ページに一覧表示
- 代替テキストを画像のalt属性に挿入

なおアイキャッチが設定されていない投稿に関しては、別途設定するデフォルト画像を表示するようにします。

### アイキャッチ画像の設定

アイキャッチ画像を管理画面から設定します。
画像には代替テキストを設定します。

![WordPressのアイキャッチ画像設定画面](/articles/ScreenShot-2024-07-15-1.51.48-1024x665.webp)

![画像の代替テキスト設定画面](/articles/ScreenShot-2024-07-15-1.51.35-1024x664.webp)

### デフォルト画像の設定

アイキャッチ画像がなかった際のデフォルト画像を設定します。
テーマによってはそういった機能が備わっているものがあるかと思いますが、今回はオリジナルテーマなのでありません。
サイト全体のデフォルト画像を設定する機能を作っていきます。

デフォルト画像を設定する機能はテーマカスタマイザーというものを使用します。
詳細な説明は省くので下記参考サイトを参考にしてください。

<ExternalLink url="https://webst8.com/blog/wordpress-customizer/" />

### アイキャッチ画像とデフォルト画像の表示

アイキャッチ画像とデフォルト画像を表示していきます。
アイキャッチ画像があればアイキャッチ画像をそのまま表示し、なければデフォルト画像を表示するようにします。

`the_post_thumbnail_url('post-thumbnail')`でアイキャッチ画像を表示しています。
`get_theme_mod( 'default_img' )`でテーマカスタマイザーで設定したデフォルト画像を表示します。
テーマカスタマイザーの設定によって引数の値は変わります。

```php title="PHP" showLineNumbers
<?php if(has_post_thumbnail()): ?>
  <img src="<?php the_post_thumbnail_url('post-thumbnail'); ?>">
<?php else: ?>
  <img src="<?php echo get_theme_mod( 'default_img' ); ?>">
<?php endif; ?>
```

### alt属性に代替テキストの挿入

画像のalt属性に代替テキストを挿入していきます。

`get_post_thumbnail_id( get_the_ID() )`でアイキャッチ画像のIDを取得しています。
`get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true)`でアイキャッチ画像の代替テキストを取得しています。
代替テキストがなければ投稿のタイトルを取得するようにしています。

```php title="PHP" showLineNumbers
<?php
  if(has_post_thumbnail()):
    // アイキャッチ画像のIDを取得
    $thumbnail_id = get_post_thumbnail_id( get_the_ID() );
    // アイキャッチ代替テキストを取得
    $alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true) != '' ? get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true) : get_the_title();
?>
  <img src="<?php the_post_thumbnail_url('post-thumbnail'); ?>" alt="<?php echo $alt; ?>">
<?php else: ?>
  <img src="<?php echo get_theme_mod( 'default_img' ); ?>" alt="<?php the_title(); ?>">
<?php endif; ?>
```

## さいごに

今回はWordPressの固定ページや投稿のアイキャッチに設定した代替テキストを画像の`alt`属性に挿入する方法を説明しました。
一度実装してしまえば使い回しができるのでとても便利です。
ぜひ参考にしてみてください。


---

## 【WordPress】Instagramの最新投稿を埋め込む方法

- URL: https://blog.to-ko-s.com/articles/wordpress-instagram-post-feed-embed
- 著者: 成岡拓哉
- 公開日: 2024-07-07
- タグ: WordPress

> WordPressで作成したWebサイトにInstagramの最新投稿を表示したい人に向けて、「Smash Balloon Social Photo Feed」というプラグインの使用方法を解説しました。ぜひ参考にしてください。


## はじめに

株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はWordPressにInstagramの最新投稿を埋め込む方法を解説します。

Instagramは現代において重要なプロモーションツールとなっています。
自社のサービスやブランドのコンテンツをWebサイトに直接埋め込むことで、ユーザーにその魅力をより鮮明に伝えることができます。

本記事では、WordPressプラグイン「Smash Balloon Social Photo Feed」を使用して、簡単にInstagramの最新投稿をWebサイトに表示する方法を紹介します。
「Smash Balloon Social Photo Feed」というWordPressのプラグインを使用すれば簡単に実装できますので、ぜひ参考にしてください。

### 対象読者

- WebサイトにInstagramの最新投稿を表示させたい人
- プラグインで簡単に実装したい人

## プラグインの導入

### プラグインのインストール

「Smash Balloon Social Photo Feed」のプラグインをインストールします。
WordPressの管理画面から「Smash Balloon Social Photo Feed」と検索しプラグインをインストールしてください。
インストールが完了したら、「有効化」をクリックしてプラグインを有効にします。

<ExternalLink url="https://ja.wordpress.org/plugins/instagram-feed/" />

![Smash Balloon Social Photo Feedプラグインのインストール](/articles/Group-22-1024x717.jpg)

### プラグインのセットアップ

インストールと有効化が完了したら、WordPressの管理画面のサイドバーに「Instagram Feed」という項目が追加されるのでそちらをクリックしてプラグインの設定画面を開きます。

まずプラグインとInstagramアカウントを連携していきます。

#### セットアップウィザードの起動

![Instagram Feedの設定画面を開く](/articles/Group-23-1024x717.jpg)

#### 新規追加

![新規フィードの追加画面](/articles/Group-24-1024x717.jpg)

#### アカウントの種類の選択

Instagramが個人アカウントの場合は左側の「Basic」を、ビジネスアカウントの場合は「Business」を選択します。
今回は左側のBasicを選択して進めていきます。

![Instagramアカウントの種類選択](/articles/Group-26-1024x717.jpg)

#### プラグインとInstagramの連携

![プラグインとInstagramの連携画面](/articles/Group-25-1024x717.jpg)

#### プラグインとInstagramの連携の認証

![Instagram連携の認証画面](/articles/Group-27-1024x717.jpg)

#### セキュリティについての確認

![セキュリティについての確認画面](/articles/Group-28-1024x717.jpg)

これでプラグインとInstagramのアカウント連携ができたので、プラグインの設定を少ししていきます。

#### アカウントの選択

![アカウントの選択画面](/articles/Group-30-1024x717.jpg)

#### 機能の設定

![機能の設定画面](/articles/Group-29-893x1024.jpg)

#### おすすめオプション機能の設定

特に選択しなくても問題ないです。

![おすすめオプション機能の設定画面](/articles/Group-31-1024x717.jpg)

これにてプラグインのセットアップは完了です。

## プラグインの詳細設定

埋め込み表示の詳細設定をしていきます。

### フィードの作成

まずはInstagramのフィードの作成をしていきます。

#### 新規追加

![フィードの新規追加画面](/articles/Group-33-1024x717.jpg)

#### フィード形式の選択

最新の投稿を表示したい場合は「ユーザータイムライン」を選択。
他のフィード形式を使いたい場合は有料プランになります。

![フィード形式の選択画面](/articles/Group-32-1024x717.jpg)

#### フィードの作成

![フィードの作成画面](/articles/Group-35-1024x717.jpg)

#### カスタムプロフィールの設定

「いいえ、あとにします」で問題ないです。

![カスタムプロフィールの設定画面](/articles/Group-34-1024x717.jpg)

#### フィード作成完了

![フィード作成完了画面](/articles/Group-49-1024x717.jpg)

### 表示のカスタマイズ設定

#### フィードレイアウト設定

フィードの表示レイアウトを設定します。
ただレイアウトの種類で無料版で使えるのは「グリッド」のみです。

![フィードレイアウト設定画面](/articles/Group-38-1024x719.jpg)

#### カラースキーム設定

テーマから継承で問題ないです。

![カラースキーム設定画面](/articles/Group-40-1024x719.jpg)

#### ヘッダーの表示設定

スクリーンショットのオレンジ枠の部分がヘッダーです。

![ヘッダーの表示設定画面](/articles/header-1024x719.jpg)

#### もっと読み込むボタンの表示設定

スクリーンショットのオレンジ枠の部分がもっと読み込むボタンです。

![もっと読み込むボタンの表示設定画面](/articles/read-more-button-1024x719.jpg)

#### フォローボタンの表示設定

スクリーンショットのオレンジ枠の部分がフォローボタンです。

![フォローボタンの表示設定画面](/articles/follow-button-1024x719.jpg)

これにて設定が完了になります。

## ページに埋め込み

固定ページにショートコードを用いて埋め込みます。
「Instagram Feed」の管理画面からショートコードをコピーします。
これを固定ページに貼り付けます。

![ショートコードのコピー画面](/articles/Group-52-1024x870.jpg)

![固定ページへの埋め込み結果](/articles/Group-51-1024x870.jpg)

## さいごに

今回はWordPressにInstagramの最新投稿を埋め込む方法を解説しました。
ぜひこの記事を参考に、WordPressで作成したWebサイトにInstagramの最新投稿を表示させてみてください。


---

## 【JavaScript】resize・scrollイベントを使う際の注意点と改善策

- URL: https://blog.to-ko-s.com/articles/js-event
- 著者: 杉田侑祐
- 公開日: 2024-07-01
- タグ: JavaScript

> この記事ではJavaScriptのresizeイベントとscrollイベントを使う際の注意点と改善策を紹介しています。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
本日はJavaScriptのイベントリスナーの「resize」「scroll」を別のAPIやイベントハンドラーを使ってパフォーマンス改善をしていこうと思います！

resize・scrollイベントがわからない方は下記を参照してください。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/Window/resize_event" />

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/Document/scroll_event" />

### 対象読者

- JavaScriptを使用している方

## resizeイベントの改善策

まずはresizeイベントの問題点を考えてみます。

### resizeイベントの問題点

まずは下記コードを実行してどんなときに実行されるか見てみましょう。

```javascript title="JavaScript" showLineNumbers
const onResize = () => console.log("画面サイズが変わりました！")
window.addEventListener("resize", onResize)
```

<Video src="/articles/js-event-resize.mp4" />

上記コードを実行してコンソールを見ると、画面幅が変わるたびにコールバック関数である`onResize`関数が呼ばれているかと思います。
windowサイズが1pxでも変化するたびに呼ばれるため、パフォーマンスの観点では良いとは言えません！
今回は`onResize`関数の中身はコンソールでテキストを表示するだけですが、重い処理などの場合パフォーマンスに影響してしまいます！

### resizeイベントの改善

resizeイベントの問題点はwindowサイズが変わるたびに呼ばれて必要以上に呼ばれてしまうことでした！
では改善策として、時間で区切りを設けコールバック関数の呼ばれる回数を制御します。

今回は関数`throttle`を作成して`onResize`をラップします！

```javascript title="JavaScript" showLineNumbers
const onResize = () => console.log("画面サイズが変わりました！")

const throttle = (func, interval) => {
  let time = Date.now() - interval
  return () => {
    if (time + interval < Date.now()) {
      time = Date.now()
      func()
    }
  }
}

window.addEventListener("resize", throttle(onResize, 50))
```

この関数では２つの引数を受け取ります。

- 第一引数 : 実行したい関数(今回の場合は`onResize`関数)
- 第二引数 : 遅延をかけたい時間（ミリ秒）

まず変数timeは現在の秒数から引数で受け取った50ミリ秒を引きます。
そして条件分岐の`time + interval < Date.now()`で最後に関数が呼び出されてから指定した`interval`（今回の例では50ミリ秒）が経過しているかを確認しています。
この条件が`true`であれば、現在の時刻を`time`に更新し、第一引数で渡した関数（`func`）を実行します。

こうすることにより50ミリ秒に1回しか実行されないように制御できます。
頻繁な関数の呼び出しを防ぐことが可能になります！

## scrollイベントの改善策

まずはscrollイベントの問題点を考えてみます。

### scrollイベントの問題点

まずは下記コードを実行してどんなときに実行されるか見てみましょう。

```javascript title="JavaScript" showLineNumbers
const onScroll = () => console.log("スクロールしました！")
document.addEventListener("scroll", onScroll)
```

<Video src="/articles/js-event-scroll.mp4" />

皆さんの予想どおりかもしれませんが、スクロールされるたびに関数`onScroll`が呼び出されています。
resizeイベントと同様で頻繁にコールバック関数が呼び出されています。

### scrollイベントの改善

先ほどresizeイベントの改善の際に紹介したのと同様、頻繁に呼び出されるのを防ぐのであれば`throttle`関数で良いでしょう。
では、scrollイベントを使用する場合の実例を考えてみましょう！

実際scrollイベントを使用する際は「〇〇pxスクロールしたら何かする」のように使用すると思います。
ではscrollイベントを使用して400pxスクロールしたら四角を表示してみましょう！

```javascript title="JavaScript" showLineNumbers
const onScroll = () => {
  // スクロール位置の取得
  const scrollTop = window.scrollY || document.documentElement.scrollTop
  console.log("スクロールしてるよ")

  if (scrollTop >= 400) {
    document.getElementById("square").style.display = "block"
  } else {
    document.getElementById("square").style.display = "none"
  }
}

document.addEventListener("scroll", onScroll)
```

<Video src="/articles/js-event-scroll-2.mp4" />

上記コードのようにスクロールするたびにスクロール位置の取得と計算をさせ、条件分岐で実行したい内容を記述すると思います。
コンソールでも見れる通り、不必要にスクロール位置の取得と計算をさせるのはあまり望ましくありません。

「〇〇pxスクロールしたら何かする」の場合ではIntersectionObserverを使用しましょう！

<Callout variant="memo">
**`IntersectionObserver`とは**

特定の要素がビューポート内に入ったり出たりすることを効率的に監視するためのAPIです。これにより、スクロールイベントを使うよりもパフォーマンスが向上し、スクロール連動のアニメーションやLazy Load（遅延読み込み）などを実装するのに便利です。

</Callout>

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver" />

下記は基本的な使い方です。

```javascript title="JavaScript" showLineNumbers
// Intersection Observerのインスタンスを作成
const observer = new IntersectionObserver(
  (entries, observer) => {
    // entriesは監視対象の各要素の状態を表すIntersectionObserverEntryオブジェクトの配列
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 要素がビューポートに入ったときの処理
        console.log("要素が表示されました:", entry.target)
        entry.target.style.backgroundColor = "red"
      } else {
        // 要素がビューポートから出たときの処理
        entry.target.style.backgroundColor = "blue"
      }
    })
  },
  {
    // オプション設定（省略可能）
    root: null, // ビューポートを基準に監視
    rootMargin: "0px",
    threshold: 0.5, // 50%表示されたらコールバックを呼び出す
  },
)

// 監視したい要素を取得
const target = document.getElementById("square")

// その要素を監視
observer.observe(target)
```

`IntersectionObserver`のインスタンスは、監視したい要素がビューポートに入ったり出たりするたびに呼び出されるコールバック関数を受け取ります。

- entries : 監視対象の要素の状態を表す`IntersectionObserverEntry`オブジェクトの配列です。

- observer : 現在の`IntersectionObserver`インスタンスです。

第二引数にはオプション設定を渡すことができます!
これには3つの主要プロパティがあります。

root :

- 監視の基準となる要素を指定します。
- `null`の場合はビューポート（表示されている部分）が基準になります。

rootMargin :

- `root`の周りのマージンを指定します。CSSのマージンと同じ形式で指定します。
- 例: `0px 0px -50px 0px`

threshold :

- コールバックを呼び出すための閾値を指定します。要素がどれくらい表示されたかの割合（0.0から1.0）を指定します。
- 例: `0.5`は、要素が50%表示されたときにコールバックを呼び出します

また監視したい要素を`observe`メソッドで指定します！

```javascript title="JavaScript" showLineNumbers
const target = document.getElementById("square")
observer.observe(target)
```

これで、`target`要素がビューポートに入ったり出たりするたびに、コールバック関数が実行されるようになります！

では`IntersectionObserver`の基本的な使い方は以上とします。基本的にはスクロール時指定した要素が画面内に入ったら何か実行のような使い方になります。

ですが、今回の使用方法は画面上部から400pxスクロールしたら実行なので紹介した例から工夫しないといけません。`option`の指定が肝心になってきます！

```javascript title="JavaScript" showLineNumbers
// Intersection Observerのオプション設定
const option = {
  root: null, // ビューポートを基準に監視
  rootMargin: "-400px 0px 0px 0px", // ビューポートの上から400pxの位置で発火
  threshold: 1.0,
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      //400pxスクロールされたら実行
      document.getElementById("square").style.display = "block"
    } else {
      //400pxスクロールされていない場合に実行
      document.getElementById("square").style.display = "none"
    }
  })
}, option)

// 監視対象の指定
observer.observe(document.body)
```

`option`の`rootMargin`をマイナスにすることにより画面上部から400pxスクロールしたら実行という処理が可能になります！
このように`IntersectionObserver`を用いることで無駄に関数を呼び出すことなく同様の実装が可能になります！

## さいごに

今回はイベントリスナーのresizeイベントとscrollイベントを使用する際の改善案を紹介しました。
細かい積み重ねがよりよいUXにつながるので、パフォーマンスを意識した実装ができると良いですね！


---

## 【React】ヘッドレスUIのReactAriaの紹介

- URL: https://blog.to-ko-s.com/articles/react-aria-components
- 著者: 杉田侑祐
- 公開日: 2024-06-24
- タグ: React

> この記事ではReactライブラリのReactAriaの紹介とRadixUI,HeadlessUIとの比較を行い、ReactAriaの優れているところを紹介しました。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はAdobe社が提供している、ヘッドレスUIライブラリの「ReactAria」の紹介をします。
他のヘッドレスUIライブラリと比較も行ったので、技術選定する際の参考にしていただければと思います。

<ExternalLink url="https://react-spectrum.adobe.com/react-aria/index.html" />

### 対象読者

- Web開発を行っている方
- Reactを使用している方
- ヘッドレスUIライブラリを検討している方

## 各ヘッドレスUIライブラリの比較(2024年6月)

今回は下記ライブラリで比較します。

- React Aria
- Radix UI
- Headless UI

また、一般的なライブラリを選定する際の項目とUIライブラリを選定する際に必要であろう項目で比較します。
下記が項目になります。
今回比較ライブラリが全てTree Shakingを採用しているため、バンドルサイズでの比較は行いません。

- Weeklyダウンロード数
- 最終更新日
- Star数
- 用意されているコンポーネント数

### Weeklyダウンロード数

| React Aria | Radix UI(radix-ui/primitive) | HeadlessUI(`headlessui/react`) |
| ---------- | ---------------------------- | ------------------------------ |
| 490,434    | 6,684,262                    | 1,720,831                      |

圧倒的にRadixに軍配が上がります！

### 最終更新日

| React Aria | Radix UI(radix-ui/primitive) | HeadlessUI(`headlessui/react`) |
| ---------- | ---------------------------- | ------------------------------ |
| 1か月前    | 4日前                        | 2日前                          |

ここでは3つとも継続的にメンテされているという印象です！

### Star数

| React Aria | Radix UI(radix-ui/primitive) | HeadlessUI(`headlessui/react`) |
| ---------- | ---------------------------- | ------------------------------ |
| 12,083     | 14,764                       | 24,916                         |

ここではHeadlessUI/Reactに軍配が上がりますが、大差はありません！

### コンポーネント数

| React Aria | Radix UI(radix-ui/primitive) | HeadlessUI(`headlessui/react`) |
| ---------- | ---------------------------- | ------------------------------ |
| 44         | 37                           | 16                             |

ここではReactAriaに軍配が上がります！
Radixはコンポーネント以外にも、LayoutやUtilsやThemeなどがあり、他のライブラリより幅広い印象です！
ですが、コンポーネント数で見たらReactAria一択ではないでしょうか！
ModalやForm系の拡充はもちろん、`DropZone`や`DatePicker`など他のライブラリにはないコンポーネントも用意されています！
またカスタムHookもかなりの数用意されていますので、一度見てみることをおすすめします！

### ReactAriaの特徴

まずはなんといっても高レベルなアクセシビリティの配慮です。
さまざまなデバイスやプラットフォームで動作する高品質のインタラクションを実現できます。
ポインタイベントの配慮やキーボードとフォーカスの挙動を始め、支援技術のサポートまで配慮されています。
下記OSとブラウザでのテストも徹底されているみたいです！

- macOS、Windows、Android上のChrome
- macOSおよびWindows上のFirefox
- macOS、iOS、iPadOS上のSafari
- Windows上のEdge

もう1つはグローバルに使用されるアプリケーションにも対応できる所です！
様々なロケールに対応しています！
またRTL(Right To Left)にも対応しています。
下記は例になります。

```tsx title="React" showLineNumbers
import { useLocale } from "react-aria-components"

function YourApp() {
  let { locale, direction } = useLocale()

  return (
    <div lang={locale} dir={direction}>
      {/* your app here */}
    </div>
  )
}
```

ルートの要素では、ユーザーインターフェイスをどの言語と方向でレンダリングするかをブラウザが認識できるようにlang属性とdir属性にReactAriaのカスタムHookの`useLocale`を使用します。
これでロケール対応が可能になります！

ReactAriaを使用するだけで、アクセシビリティの配慮や要件次第ではグローバル使用を考慮したアプリケーションを作成できる土台となると感じます！

## ライブラリの使用例

今回はButtonコンポーネント作成例をお見せします！

開発環境は下記になっています

- `react` : 18
- `clsx` : 2.1.1
- `react-aria-components` : 1.2.1
- `tailwindcss-react-aria-components` : 1.1.3
- `tailwindcss` : 3.4.1
- `typescript` : 5

今回スタイリングはtailwindとclsxを使っています！

### コードの紹介

今回は汎用的なボタンコンポーネントを想定しています！
ReactAriaの`Button`コンポーネントを使用して作ります。
Propsとして色を受け取り、`ComponentsProps`でよりコンポーネントを抽象化しています！

```typescript title="TypeScript" showLineNumbers
import clsx from "clsx"
import { ComponentProps } from "react"
import { Button as AriaButton } from "react-aria-components"

const colorClasses = {
  red: "bg-[#FA0000]",
  blue: "bg-[#1D00FA]",
  green: "bg-[#00FA30]",
} as const
type Color = keyof typeof colorClasses

type Props = {
  color: Color
} & ComponentProps<typeof AriaButton>

export function Button({ color, ...rest }: Props) {
  const colorClass = colorClasses[color]

  return (
    <AriaButton
      {...rest}
      className={clsx(
        "rounded px-5 py-4 text-white",
        colorClass,
      )}
    />
  )
}
```

`import`名の衝突を避けるために`as`を使用し衝突を回避しています！
これだけでアクセシビリティに配慮したボタンを作成できます！
なんだかんだアクセシビリティ要件を満たすことは正直難しいし後回しになりがちなので、これだけで土台ができることはかなり開発者体験が良いです！

## さいごに

今回はReactAriaの紹介と汎用的なボタンコンポーネントを作成いたしました！
今回はButtonの紹介でしたが、他にも様々なコンポーネントが拡充されていますので、一度ドキュメントを見ていただければと思います！
以上となります。
ヘッドレスUIの選定のお助けになれば幸いです！


---

## React Ariaを使用したモーダル作成

- URL: https://blog.to-ko-s.com/articles/react-aria-modal
- 著者: 塩見直樹
- 公開日: 2024-06-16
- タグ: React

> ReactのライブラリであるReact Ariaを使用したモーダル作成を紹介しています。アクセシビリティ対応のモーダルが簡単に作成できます！


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回はReactのライブラリであるReactAriaを使用してモーダルの作成をしていきます。

## 対象読者

- React初学者の方
- React Ariaを使用して開発をされる方

## React Ariaとは

React AriaはAdobeが提供しているアクセシビリティに特化したヘッドレスUIライブラリです。

React Ariaは、スクリーンリーダーとキーボードナビゲーションのサポートで、視覚障害と運動障害の側面に対応しています。
ウェブサイトを作るとき、見た目や動作が良くても、アクセシビリティが考慮されていないと、多くのユーザーにとって使いにくいものになってしまいます。React Ariaを使うと、アクセシビリティに関する複雑な設定を簡単に行え、より多くの人にとって使いやすいウェブサイトを作ることができます。

※ アクセシビリティとは、利用者の障害などの有無や年齢や利用環境にかかわらず、あらゆる人々がウェブサイトで提供されている情報やサービスを利用できることです。

※ ヘッドレスUIとは、UI要素やインタラクションのロジック、状態、処理、APIを提供し、マークアップやスタイルを提供しないライブラリを指す言葉です。

※ スクリーンリーダーとは、視覚障害者や読み込みの遅いユーザーなど、視覚的な情報を認識できないユーザーがウェブサイトやアプリケーションを利用する際に使用する支援技術の一種です。

※ キーボードナビゲーションとは、キーボードを使ってウェブサイトやアプリケーションを操作することです。

React Ariaのアクセシビリティに関して詳しく知りたい方は、以下のリンクから公式ドキュメントを参照してください。

<ExternalLink url="https://react-spectrum.adobe.com/react-aria/accessibility.html" />

React Ariaにはアクセシビリティ対応のされたさまざまなコンポーネントがあります。
主なコンポーネントを以下で紹介します！

### React Ariaの主なコンポーネント

| コンポーネント  | 説明                                                                                                               |
| --------------- | ------------------------------------------------------------------------------------------------------------------ |
| Button          | マウス、タッチ、キーボードで操作できるボタンを作成をできます                                                       |
| FileTrigger     | ファイルシステムにアクセスができるボタンを作成できます                                                             |
| ToggleButton    | 2つの状態やモードを切り替えるトグルボタンを作成できます                                                            |
| GridList        | インタラクティブなアイテムのリストを表示し、 1つまたは複数の選択ができ、行ごとのアクションをサポートできます       |
| ListBox         | オプションのリストを表示し、1つまたは複数のオプションを選択できます                                                |
| Menu            | ユーザーが選択できるアクションやオプションのリストが表示できます                                                   |
| Table           | 行と列でデータを表示できます。オプションで行の選択や並び替えができます                                             |
| TagGroup        | ラベル、カテゴリー、その他のアイテムの選択が可能なリストです                                                       |
| Calendar        | カレンダーを表示し、1つの日付を選択することが出来ます                                                              |
| DateField       | キーボードを使って日付と時刻の値を入力し、編集することができます                                                   |
| DatePicker      | CalendarポップオーバーとDateFieldを組み合わせて、日付と時刻の値を入力または選択できます                            |
| DateRangePicker | 日付と時間の範囲を入力または選択できます                                                                           |
| TimeField       | キーボードを使って時間値を入力・編集できます                                                                       |
| DropZone        | 1つまたは複数のオブジェクトをドラッグ&ドロップできるエリアのことです                                               |
| Checkbox        | 1つまたは複数のアイテムを選択済みとしてマークすることができます                                                    |
| Form            | データをサーバーに送信するための入力グループのことです フィールドの検証エラーを提供するためのサポートもあります    |
| RadioGroup      | 相互に排他的なオプションのリストから1つの項目を選択することができます                                              |
| Switch          | 設定をオンまたはオフにすることができます                                                                           |
| TextField       | キーボードでテキストの値を入力ができます                                                                           |
| Breadcrumbs     | 現在のページや階層がわかるパンくずリストを表示できます                                                             |
| Dialog          | 現在の画面の上にダイアログを表示できます                                                                           |
| Modal           | 現在の画面の上にモーダルを表示できます                                                                             |
| Tooltip         | ホバーまたはフォーカス時に要素の説明を表示できます                                                                 |
| ComboBox        | テキスト入力とリストボックスを組み合わせたもので、クエリにマッチする項目を選択肢のリストから絞り込むことができます |

これらのコンポーネントを複数使用し組み合わせることで、多様な実装をできます！
詳しく知りたいと言う方は以下のリンクから公式ドキュメントを参照してください。

<ExternalLink url="https://react-spectrum.adobe.com/react-aria/components.html" />

## 実装

### 開発環境

今回cssはTailwind CSSを使用します。

- `react`: ^18,
- `react-aria-components`: ^1.2.1,
- `tailwindcss`: ^3.4.1,

### React Ariaの導入

npmやyarnを使用して`react-aria-components`をインストールできます。

```bash title="ターミナル"
npm install react-aria-components
```

または

```bash title="ターミナル"
yarn add react-aria-components
```

これでReact Ariaのインストールは完了です！
次にReact AriaのModalコンポーネントを使用して、モーダルを作成します。

### コード

上記で紹介したコンポーネントを以下のように組み合わせることで簡単にモーダルを作成することが出来ます。
ヘッドレスUIなのでプロダクトごとのデザインに合うスタイルを指定できます。(Tailwind CSSでスタイルをあてています。)

```jsx title="Example.jsx" showLineNumbers
import {
  Button,
  Calendar,
  CalendarCell,
  CalendarGrid,
  DateInput,
  DatePicker,
  DateSegment,
  Dialog,
  DialogTrigger,
  Group,
  Heading,
  Input,
  Label,
  ListBox,
  ListBoxItem,
  Modal,
  Popover,
  Select,
  SelectValue,
  TextField,
} from "react-aria-components"

export default function Example() {
  return (
    <div className="mt-10 flex justify-center">
      <DialogTrigger>
        <Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700">モーダルを開く</Button>
        <Modal className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <Dialog className="w-[600px] rounded-lg border border-gray-400 bg-white p-6 shadow-lg outline-none">
            {({ close }) => (
              <form>
                <Heading slot="title" className="mb-4 border-b-2 text-lg font-semibold">
                  モーダル
                </Heading>
                <div className="flex flex-col gap-6">
                  <TextField autoFocus>
                    <Label className="mb-1 block">タイトル</Label>
                    <Input className="w-full rounded border border-gray-300 p-2" />
                  </TextField>
                  <TextField autoFocus>
                    <Label className="mb-1 block">内容</Label>
                    <Input className="w-full rounded border border-gray-300 p-2" />
                  </TextField>
                  <Select className="flex flex-col">
                    <Label>選択肢</Label>
                    <Button className="flex w-fit gap-3 rounded-md border px-4 py-2">
                      <SelectValue />
                      <span aria-hidden="true" className="rounded-md border px-1">
                        ▼
                      </span>
                    </Button>
                    <Popover>
                      <ListBox className="flex flex-col gap-2 bg-gray-100 p-4">
                        <ListBoxItem>リンゴ</ListBoxItem>
                        <ListBoxItem>バナナ</ListBoxItem>
                        <ListBoxItem>パイナップル</ListBoxItem>
                        <ListBoxItem>ブドウ</ListBoxItem>
                      </ListBox>
                    </Popover>
                  </Select>
                  <DatePicker>
                    <Label>日付</Label>
                    <Group className="flex w-fit gap-3 rounded-md border px-4 py-2">
                      <DateInput className="flex gap-1">{(segment) => <DateSegment segment={segment} />}</DateInput>
                      <Button className="rounded-md border px-1">▼</Button>
                    </Group>
                    <Popover>
                      <Dialog>
                        <Calendar className="bg-gray-100 p-4">
                          <header className="flex w-[200px] justify-between gap-6">
                            <Button slot="previous">◀</Button>
                            <Heading />
                            <Button slot="next">▶</Button>
                          </header>
                          <CalendarGrid className="w-[200px]">{(date) => <CalendarCell date={date} />}</CalendarGrid>
                        </Calendar>
                      </Dialog>
                    </Popover>
                  </DatePicker>
                  <Button
                    onPress={close}
                    className="w-fit rounded-md border bg-blue-500 px-6 py-3 text-white hover:bg-blue-700"
                  >
                    送信
                  </Button>
                </div>
              </form>
            )}
          </Dialog>
        </Modal>
      </DialogTrigger>
    </div>
  )
}
```

### 作成したモーダル

<Video src="/articles/react-aria-modal.mp4" />

このようによく目にするようなモーダルを作成できました。
サンプル動画ではマウスを使わずキーボード操作のみでモーダルの開閉、操作をしています。
このようなアクセシビリティ対応がされたモーダルを簡単に作成できます！

## おわりに

今回はReactのライブラリであるReact Ariaを使用してモーダルの作成を行いました。
簡易的なモーダルを作成しましたが、用途によってはもっとたくさんの入力欄を設けたいときなどあると思います。React Ariaのアクセシビリティ対応の豊富なコンポーネントであれば大抵のことはできると思いますので、ぜひ使用してみてはいかがでしょうか！


---

## Prismaのユニーク制約に対するエラーハンドリング方法

- URL: https://blog.to-ko-s.com/articles/prisma-unique-handling
- 著者: 西原月熙
- 公開日: 2024-06-02
- タグ: JavaScript

> ユニーク制約があるDBのカラムの保存処理に対する、Prismaのエラーハンドリング方法を記述しています!


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回はややニッチ? な内容を記述します💪

「DB側で`users`テーブルの`email`カラムはユニーク値にしたい」といったパターンは割とあるあるなケースかと思います！
Prismaを使っている場合に、そのユニーク制約のエラーをキャッチ(ハンドリング)する方法です！

## 対象読者・前提

- Prismaを使用している方
- ユニーク制約のバリデーションを設けたい方

スキーマは下記の様なものを想定しています！

```prisma
model User {
  id            Int      @id @default(autoincrement())
  name          String
  email         String   @unique
  @@map("users")
}
```

スキーマに関して詳しい解説が欲しい方は以下の記事を参考にしてください💪

<InternalLink slug="prisma-schema" />

## エラーハンドリング方法

早速ですが、方法を書きます！

```tsx showLineNumbers
// ...

try {
  await prisma.user.create({
    // paramsにはフロントから来たそれぞれの値が入っている
    name: params.name,
    email: params.email,
  })
} catch (error) {
  // ユニーク制約のエラー処理
  if (error instanceof Prisma.PrismaClientKnownRequestError) {
    if (error.code === "P2002") {
      return {
        message: "このメールアドレスは既に使われています",
        ok: false,
      }
    }
  }
}
```

Prismaは、ユニーク制約等でのDB側の都合で`create`ができなかった場合も例外をthrowします！
そのエラーオブジェクトは基本的に`Prisma.PrismaClientKnownRequestError`となります。
なので、11行目でまず想定内のエラーかどうかを確認しています。

そして、`error.code`の値でどのようなエラーかが決まっています！
`"P2002"`は「ユニーク制約のエラー」とPrisma側が決めてくれています✨
よって、`error.code === "P2002"`で比較をして、`true`の場合はその旨を記載したバリデーションエラーメッセージを返してあげることで利用ユーザーに分かりやすくエラー内容を伝えることができます💪

## おわりに

`error.code`の値について、他にも色々あるので基本的にやりたいことはできるはずです！
値一覧については下記公式ドキュメントを参考にしてみてください✨

<ExternalLink url="https://www.prisma.io/docs/orm/reference/error-reference#error-codes" />


---

## 【WordPress】 WelcartでECサイト作成とカスタマイズ

- URL: https://blog.to-ko-s.com/articles/wordpress-welcart-customize
- 著者: 成岡拓哉
- 公開日: 2024-05-26
- タグ: WordPress

> 独自デザインのECサイトを構築したい人に向けて、WordPressのプラグインWelcartをカスタマイズする方法をご紹介します。 具体的にはWelcartの無料テーマであるwelcart_basicの子テーマをカスタマイズする方法です。是非参考にして簡単にECサイトを構築してみてください。


## はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！

今回はWordPressのプラグインのWelcartを利用したECサイト作成とカスタマイズ方法を解説します。
方法としてはWelcartが提供している無料テーマ「Welcart Basic」の子テーマを作成し、その子テーマをコードベースでカスタマイズしていくといった流れになります。
WordPressでECサイトを構築したい方にオススメの記事になっています。

### 対象読者

- WordPressでECサイト制作したい人
- Welcartで独自のデザインにカスタマイズしたい人

## プラグイン・テーマ導入

### プラグインの導入

まずWelcartのプラグインを導入します。
WordPressの管理画面から「Welcart e-Commerce」と検索しプラグインをインストールしてください。
※インストール後にテスト用の商品を1つ追加してみてください。

### 無料テーマのインストール

次にWelcartでECサイトを作成する際に、専用のテーマがあるのでそれを導入していきます。

専用テーマは無料のものと有料のものがあるのですが、今回は無料のWelcart Basicというものを利用します。
公式サイトよりダウンロードするのですが、新規会員登録をする必要がありますのでご注意ください。

<ExternalLink url="https://www.welcart.com/archives/4286.html" />

無料テーマのダウンロードが完了したら、WordPressの管理画面からテーマをアップロードします。

### 子テーマの作成

アップロードしたテーマ(Welcart Basic)をそのまま編集しても良いのですが、カスタマイズしていきたいので子テーマを作成して開発を進めていきます。

#### 子テーマのディレクトリの作成

テーマディレクトリ内`wp-content/themes`に子テーマのディレクトリを作成します。 分かりやすいようにディレクトリ名は`welcart_basic_child`にします。

#### style.css ファイルの作成

WordPressにテーマを認識させるために`style.css`を作成します。
`style.css`にはテーマの情報を記載します。基本コピペでOKです。
`Template`の部分だけ親テーマを指定する必要があるので注意してください。

```css title="style.css" showLineNumbers
/*
Theme Name: Welcart Basic Child
Theme URI: https://example.com/welcart_basic-child/
Template: welcart_basic
Version: 1.0
*/
```

#### functions.php ファイルの作成

`functions.php`にはテーマの機能を記載します。
親テーマのスタイルシートの読み込みとカスタマイズ用のスタイルシート(この後作成)の読み込みを行います。

```php title="functions.php" showLineNumbers
<?php
function welcart_basic_child_enqueue_styles() {
  $parent_dir = get_template_directory_uri();
  $child_dir = get_stylesheet_directory_uri();
  wp_enqueue_style( 'parent-style', $parent_dir . '/style.css', array(), '1.0.0' ); // 親テーマ全体のスタイルシート
  wp_enqueue_style( 'parent-cart-style', $parent_dir . '/usces_cart.css', array('parent-style', 'usces_default_css') ); // 商品詳細ページ・メンバーページ・カートページ・商品複合検索結果一覧ページのスタイルシート
  wp_enqueue_style( 'customize-style', $child_dir . '/customize.css', array(),'1.0.0' , 'all'); // カスタマイズのスタイルシート
}
add_action( 'wp_enqueue_scripts', 'welcart_basic_child_enqueue_styles', 9 );
```

#### カスタマイズ用のcustomize.cssの作成

子テーマディレクトリ内`wp-content/themes/welcart_basic_child`に`customize.css`を作成します。
ここにカスタマイズ用のCSSを記載していきます。

#### 子テーマの有効化

最低限の準備が整ったので最後に子テーマを有効化します。

## カスタマイズ

続いてカスタマイズをしていきます。
今回は商品詳細ページのレイアウトを変更し、CSSでデザインをカスタマイズしてみます。

### 商品詳細ページのテーマファイルのコピー

親テーマのWelcart Basicのテーマ内の`wc_item_single.php`を子テーマのディレクトリ内にコピーします。
ディレクトリ構造もそのままコピーする必要があるので、テーマ直下に`wc_templates`というディレクトリを作成し、その中に`wc_item_single.php`を作成します。

### wc_item_single.php の編集

商品詳細ページのテンプレートである`wc_item_single.php`をカスタマイズをしていきます。

```php title="wc_item_single.php" showLineNumbers
<?php get_header(); ?>
<main>
    <div class="l-container">
		<div class="c-product-detail">
			<div id="img-box" class="c-product-detail__img-group">
				<div class="c-product-detail__main-img-wrapper">
					<a href="<?php usces_the_itemImageURL( 0 ); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', null ); ?>>
						<?php usces_the_itemImage( 0, 335, 335, $post ); ?>
					</a>
				</div>
				<?php
					$image_ids = usces_get_itemSubImageNums();
					if ( ! empty( $image_ids ) ) :
				?>
					<div class="c-product-detail__sub-img-group">
						<?php foreach ( $image_ids as $image_id ) : ?>
							<a href="<?php usces_the_itemImageURL( $image_id ); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', null ); ?>>
								<?php usces_the_itemImage( $image_id, 135, 135, $post ); ?>
							</a>
						<?php endforeach; ?>
					</div>
				<?php endif; ?>
			</div>
			<div class="c-product-detail__content">
				<div class="c-product-detail__title-group">
					<h1 class="c-product-detail__title"><?php usces_the_itemName(); ?></h1>
				</div>
				<div class="c-product-detail__price-group">
					<div class="c-product-detail__price">
						<span class="c-product-detail__price-number">
							<?php usces_the_itemPrice_taxincluded(); ?>
						</span>
						<div class="c-product-detail__price-unit">
							<span class="c-product-detail__price-tax"><?php usces_guid_tax(); ?></span>
							<span class="c-product-detail__price-yen">円</span>
						</div>
					</div>
				</div>
				<div class="c-product-detail__form">
					<form action="<?php echo esc_url( USCES_CART_URL ); ?>" method="post" class="c-product-form">
						<?php do { ?>
							<div class="skuform c-product-form__inner">
								<?php do_action( 'usces_theme_item_single_before_options' ); ?>
								<!-- オプション -->
								<?php if ( usces_is_options() ) : ?>
									<div class="c-product-form__option-group">
										<?php while ( usces_have_options() ) : ?>
											<div class="c-product-form__option-inner">
												<div class="c-product-form__option-head"><?php usces_the_itemOptName(); ?></div>
												<div class="c-product-form__option-data"><?php usces_the_itemOption( usces_getItemOptName(), '' ); ?></div>
											</div>
										<?php endwhile; ?>
									</div>
								<?php endif; ?>
								<!-- 業務パック -->
								<?php if (usces_the_itemGpExp()): ?>
									<div class="c-product-form__gp-group">
										<?php usces_the_itemGpExp(); ?>
									</div>
								<?php endif; ?>
								<!-- 数量セレクターとカート追加ボタン -->
								<div class="c-product-detail__button-group">
									<div class="quantity c-product-detail__quantity">
										<span class="c-product-detail__quantity-prev-text">
											<?php esc_html_e( 'Quantity', 'usces' ); ?> <!-- 数量 -->
										</span>
										<span class="c-product-detail__quantity-input">
											<?php usces_the_itemQuant(); ?> <!-- input -->
										</span>
										<span class="unit c-product-detail__quantity-prev-next-text">
											<?php usces_the_itemSkuUnit(); ?><!-- 個 -->
										</span>
									</div>
									<div class="c-product-detail__button-wrapper">
										<?php if ( ! usces_have_zaiko() ) : ?>
											<span class="cart-button c-product-detail__button c-product-form-button --status-disabled">
												<?php usces_the_itemSkuButton( '在庫がありません' , 0 ); ?>
											</span>
										<?php else: ?>
											<span class="cart-button c-product-detail__button c-product-form-button">
												<?php usces_the_itemSkuButton( 'カートに入れる' , 0 ); ?>
											</span>
										<?php endif; ?>
									</div>
								</div>
								<!-- エラー文 -->
								<div class="error_message c-product-detail__error-message"><?php usces_singleitem_error_message( $post->ID, usces_the_itemSku( 'return' ) ); ?></div>
							</div><!-- .skuform -->
						<?php } while ( usces_have_skus() ); ?>
						<?php do_action( 'usces_action_single_item_inform' ); ?>
					</form>
					<?php do_action( 'usces_action_single_item_outform' ); ?>
				</div>
				<!-- 説明文 -->
				<div class="c-product-detail__description">
					<?php the_content(); ?>
				</div>
			</div>
		</div>
  </div>
</main>
<?php
get_footer();
```

CSSはテーマディレクトリに作成した`customize.css`に記載していきます。

```css title="customize.css" showLineNumbers
/* コンテナ幅 */
.l-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1080px;
  padding: 0 40px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .l-container {
    padding: 0 24px;
  }
}

/* レイアウトと細部のスタイリング */
.c-product-detail {
  align-items: flex-start;
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 767px) {
  .c-product-detail {
    flex-direction: column;
  }
}
.c-product-detail .c-product-detail__img-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 320px;
  position: sticky;
  top: 80px;
  flex: 1 0 40%;
}
@media screen and (max-width: 767px) {
  .c-product-detail .c-product-detail__img-group {
    position: relative;
    top: 0;
  }
}
.c-product-detail
  .c-product-detail__img-group
  .c-product-detail__main-img-wrapper {
  border: 1px solid #ecebeb;
  height: auto;
  object-fit: contain;
  width: 100%;
}
.c-product-detail
  .c-product-detail__img-group
  .c-product-detail__sub-img-group {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
.c-product-detail
  .c-product-detail__img-group
  .c-product-detail__sub-img-group
  a {
  border: 1px solid #ecebeb;
  display: block;
  width: 100%;
}
.c-product-detail
  .c-product-detail__img-group
  .c-product-detail__sub-img-group
  a
  img {
  height: auto;
  object-fit: contain;
  width: 100%;
}
.c-product-detail .c-product-detail__content {
  align-items: flex-start;
  display: flex;
  flex: 1 0 50%;
  flex-direction: column;
  gap: 32px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .c-product-detail .c-product-detail__content {
    gap: 24px;
  }
}
.c-product-detail .c-product-detail__content .c-product-detail__title-group {
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__title-group
  .c-product-detail__title {
  color: #262626;
  font-size: 32px;
}
@media screen and (max-width: 767px) {
  .c-product-detail
    .c-product-detail__content
    .c-product-detail__title-group
    .c-product-detail__title {
    font-size: 20px;
  }
}
.c-product-detail .c-product-detail__content .c-product-detail__price-group {
  align-items: center;
  display: flex;
  gap: 8px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price {
  display: flex;
  align-items: flex-end;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-number {
  color: #404040;
  font-size: 48px;
  line-height: 0.8;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-unit {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-unit
  .c-product-detail__price-tax {
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-unit
  .c-product-detail__price-tax
  em {
  font-style: normal;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-unit
  .c-product-detail__price-yen {
  font-size: 24px;
  line-height: 1;
  text-align: center;
}
.c-product-detail .c-product-detail__content .c-product-detail__form {
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group
  .c-product-form__option-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group
  .c-product-form__option-inner
  .c-product-form__option-head {
  color: #404040;
  flex: 1 0 25%;
  min-width: 100px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group
  .c-product-form__option-inner
  .c-product-form__option-data {
  flex: 1 0 70%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group
  .c-product-form__option-inner
  .c-product-form__option-data
  select {
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__gp-group {
  background-color: #fafafa;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  padding: 10px 20px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__gp-group
  dt,
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__gp-group
  dd {
  color: #404040;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__gp-group
  dd {
  margin-top: 10px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .c-product-detail
    .c-product-detail__content
    .c-product-detail__form
    .c-product-form__inner
    .c-product-detail__button-group {
    gap: 20px;
  }
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__quantity {
  align-items: center;
  color: #404040;
  display: flex;
  gap: 16px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__quantity
  .c-product-detail__quantity-prev-text {
  font-size: 16px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__quantity
  .c-product-detail__quantity-input {
  display: block;
  width: fit-content;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__quantity
  .c-product-detail__quantity-input
  input {
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  height: 60px;
  text-align: center;
  width: 120px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__button-wrapper {
  align-items: center;
  display: flex;
  flex-grow: 1;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__button-wrapper
  .c-product-detail__button {
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__button-wrapper
  .c-product-detail__button
  input {
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  div {
  padding: 20px 0;
}
.c-product-detail .c-product-detail__content .c-product-detail__description h2 {
  color: #404040;
  font-size: 16px;
  font-weight: 400;
}
.c-product-detail .c-product-detail__content .c-product-detail__description p {
  color: #646464;
  font-size: 16px;
  font-weight: 400;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  table {
  margin-top: 10px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  table
  tr
  th,
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  table
  tr
  td {
  border: 1px solid #d4d4d4;
  color: #646464;
  font-size: 16px;
  font-weight: 400;
  padding: 16px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  table
  tr
  th {
  min-width: 120px;
}

/* ボタン */
.c-product-form-button input[type="submit"] {
  background-color: #48b24b;
  border-radius: 100vh;
  color: #ffffff;
  display: block;
  font-size: 16px;
  padding: 16px 64px;
  text-align: center;
}
.c-product-form-button.--status-disabled {
  cursor: not-allowed;
}
.c-product-form-button.--status-disabled input[type="submit"] {
  background-color: #646464;
  font-size: 16px;
  pointer-events: none;
}
```

### Welcart独自の関数について

Welcartでは商品の価格や商品名を表示するための関数が用意されています。
数が多いので全ては紹介できないのですが、今回使ったものを一部ご紹介します。

```php title="Welcart関数一覧" showLineNumbers
usces_the_itemImageURL() // 商品のメイン画像のパスを表示
usces_get_itemSubImageNum() // 商品のサブ画像のidを配列で取得
usces_the_itemName() // 商品名を取得
usces_the_itemPrice_taxincluded() // 税込価格を表示
usces_guid_tax() // 税込か税抜かを表示
usces_the_itemOptName() // オプション名を表示
usces_the_itemOption() // オプションの値を表示
usces_the_itemGpExp() // 業務パックを表示
usces_the_itemQuant() // 数量セレクターを表示
usces_the_itemSkuUnit() // 商品の単位を表示
usces_the_itemSkuButton() // カートに追加するボタンを表示
```

## さいごに

今回はWordPressのプラグインのWelcartを利用したECサイト作成とカスタマイズ方法を解説しました。
Welcartの無料テーマであるwelcart_basicの子テーマをカスタマイズすることで、独自のデザインのECサイトを構築できます。
ぜひこの記事を参考に、WordPressでECサイトを簡単に構築をしてみてください！


---

## 【React】そのUseEffect, 本当にcleanup(クリーンアップ)できてますか？

- URL: https://blog.to-ko-s.com/articles/useeffect-cleanup
- 著者: 西原月熙
- 公開日: 2024-05-20
- タグ: React

> ReactのuseEffectを使う時に重要になるcleanup(クリーンアップ)について、簡単な説明とやってしまいそうなミスへの対策方法を記述しています!


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、Reactの`useEffect`を使う時に重要になるcleanup(クリーンアップ)について、簡単な説明とやってしまいそうなミスへの対策方法を書きます！
自分も1度ハマったので、誰かの参考になれば幸いです🙌

## 対象読者

- Reactのcleanupについて知りたい方
- 自分のcleanupが正しくできているか気になっている方

## cleanup(クリーンアップ)とは？

まずはざっくりとcleanupについて説明します！

cleanupとは簡単に言うと「`useEffect`の中で`return`する関数」のことです！
例えば下記コードのような形です

```tsx title="Component.tsx" showLineNumbers
import React, { useEffect } from "react"

function MyComponent() {
  useEffect(() => {
    // 副作用の処理（例：イベントリスナーの設定）
    const handleResize = () => {
      console.log("ウィンドウがリサイズされました！！")
    }
    window.addEventListener("resize", handleResize)

    // ここがクリーンアップ(関数)
    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

  return <div>ウィンドウがリサイズされるとconsole.logが出力されるよ</div>
}
```

上記のuseEffect内のreturnの部分です！
`useEffect`内で宣言したイベントリスナーを`return`内で`remove`しています。
これにより、この`MyComponent`というコンポーネントがアンマウントされる時に一緒にイベントリスナーも消してくれるという感じです✨

逆に言うと、このcleanupが無い場合は、このコンポーネントがマウントされる度に同じイベントリスナーがどんどん追加されていき、重くなったり意図しない挙動になったりします🥲

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  今回の例で言うと、1回のリサイズで`console.log`が何回も出てしまう感じだね!
</SpeechBubble>

なので、基本的には`useEffect`を使う時はcleanupをする必要があるかは常に検討すべきです！

以下の記事が参考になります、詳しく知りたい方は見てみてください。

<ExternalLink url="https://zenn.dev/uhyo/articles/useeffect-taught-by-extremist" />

## cleanup(クリーンアップ)ができていない実装

上記の例は、cleanupができている実装です！
上記のコードを再掲します。

```tsx title="Component.tsx" showLineNumbers
import React, { useEffect } from "react"

function MyComponent() {
  useEffect(() => {
    // 副作用の処理（例：イベントリスナーの設定）
    const handleResize = () => {
      console.log("ウィンドウがリサイズされました！！")
    }
    window.addEventListener("resize", handleResize)

    // ここがクリーンアップ(関数)
    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

  return <div>ウィンドウがリサイズされるとconsole.logが出力されるよ</div>
}
```

それでは、cleanupができていない実装例はこちらです!

```tsx title="Component.tsx" showLineNumbers
import React, { useEffect } from "react"

function MyComponent() {
  useEffect(() => {
    window.addEventListener("resize", () => {
      console.log("ウィンドウがリサイズされました！！")
    })

    // ここがクリーンアップ(関数)
    return () => {
      window.removeEventListener("resize", () => {
        console.log("ウィンドウがリサイズされました！！")
      })
    }
  }, [])

  return <div>ウィンドウがリサイズされるとconsole.logが出力されるよ</div>
}
```

`handleResize`として宣言していた部分を`addEventListener`と`removeEventListener`の第二引数内に直接アロー関数として全く同じものをそれぞれ記述した形になります。

一見同じ挙動になりそうですね🤔

### なぜできていないのか

これについては、関数は同じ記述をしたとしても、違うものとしてみなされるためです！
分かりやすい例をコードとして記載します!

```tsx title="Component.tsx" showLineNumbers
const foo = 1
const bar = 1
console.log(foo === bar) // => true が出力される✅

const hoge = () => {
  console.log("ウィンドウがリサイズされました！！")
}
const huga = () => {
  console.log("ウィンドウがリサイズされました！！")
}
console.log(hoge === huga) // => false が出力される⛔️
```

上記のような結果になるのです🧐

1や"文字列" のようなプリミティブな値は変数に格納しても等価演算子(==)でその値同士が同じであればtrueになります。
一方、関数やオブジェクト(ex. `{ name: "ツキヤ" }`) は全く同じ値を変数に格納しても、等価演算子で比較するとfalseになります！

これを説明するためには、JavaScriptのやや踏み込んだ理解が必要になるので割愛します🙏
詳しくは[こちら](https://amzn.to/3jYGsPe)の書籍等を参考にしてみてください。

`useEffect`の話に戻ると、`addEventListener`と`removeEventListener`のそれぞれで全く同じ関数を記述したとしても、先程の例から分かるように同じ関数としてみなされないです。
なので、全く違う関数を`removeEventListener`しようとしていることになり、うまく`removeEventListener`ができないのです!!

そこで、初回の例のようにuseEffect内であらかじめ変数に関数を格納しておき、その変数を`addEventListener`と`removeEventListener`のそれぞれの第二引数に渡すことで意図通りのcleanupとなります✨

## 終わりに

今回は、cleanupの簡単な説明と正しいcleanupの方法についての解説をしました！
Next.js等のフレームワークを上手くを使うためにも、React自体の機能をしっかり理解しておきたいですね😎


---

## 【GSAP/ScrollTrigger】ちょっとリッチなスクロールアニメーション

- URL: https://blog.to-ko-s.com/articles/gsap-scrolltrigger-rich
- 著者: 塩見直樹
- 公開日: 2024-05-12
- タグ: JavaScript

> GSAP/ScrollTriggerを使って、画像の拡大やclipPathを活用したリッチなスクロールアニメーションの実装方法を解説します。


## はじめに

### 記事の概要

こんにちは、株式会社TOKOSのナオキです。
今回はGreenSock社のGreenSock Animation Platform(GSAP)/ScrollTriggerを使い、ちょっとリッチなスクロールアニメーションを実装していきたいと思います。GSAPの基本的な使い方は下記の記事を参考にしてください。

<InternalLink slug="text-animation-from-gsap" />

### 対象読者

- WEB制作でスクロールアニメーション実装をしたい方

## 今回の完成予定

今回は以下のスクロールアニメーションをGSAP/ScrollTriggerを使用して実装してみたいと思います！

<Video src="/articles/gsap-scrolltrigger-rich.mp4" />

## 開発環境

- GSAP: 3.12.5

## 実装

### GSAP/ScrollTriggerの導入

今回はCDNで導入していきます。
以下のコードをbodyタグの最後に記述するだけです！

```html title="HTML" showLineNumbers
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
```

### HTML＆CSSの記述

```html title="HTML" showLineNumbers
<body>
  <div class="c-contents">
    <div class="c-contents__title-wrapper">
      <p class="c-contents__title">TOKOS.BLOG</p>
    </div>
    <div class="c-contents__section-title-wrapper">
      <section class="c-contents__section" id="section-title-1">
        <h2 class="c-contents__section-title">ABOUT</h2>
      </section>
      <section class="c-contents__section" id="section-title-2">
        <h2 class="c-contents__section-title">SERVICE</h2>
      </section>
      <section class="c-contents__section" id="section-title-3">
        <h2 class="c-contents__section-title">COMPANY</h2>
      </section>
      <section class="c-contents__section" id="section-title-4">
        <h2 class="c-contents__section-title">NEWS</h2>
      </section>
      <section class="c-contents__section" id="section-title-5">
        <h2 class="c-contents__section-title">CONTACT</h2>
      </section>
      <section class="c-contents__section" id="section-title-6">
        <h2 class="c-contents__section-title">END</h2>
      </section>
      <div class="separator"></div>
    </div>
    <div class="c-contents__images">
      <div class="c-contents__img" id="img-1">
        <img src="./img/img1.jpg" alt="" />
      </div>
      <div class="c-contents__img" id="img-2">
        <img src="./img/img2.jpg" alt="" />
      </div>
      <div class="c-contents__img" id="img-3">
        <img src="./img/img3.jpg" alt="" />
      </div>
      <div class="c-contents__img" id="img-4">
        <img src="./img/img4.jpg" alt="" />
      </div>
      <div class="c-contents__img" id="img-5">
        <img src="./img/img5.jpg" alt="" />
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
  <script src="js/script.js"></script>
</body>
```

```css title="CSS" showLineNumbers
body {
  background-color: #262626;
  color: #fff;
  font-family: "Shippori Mincho";
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.c-contents {
  width: 100%;
  height: 100%;
}

.c-contents__title-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.c-contents__title {
  font-size: 24px;
  font-weight: bold;
}

.c-contents__section {
  margin: 150vh 0;
}

.c-contents__section-title {
  font-size: 100px;
  font-weight: bold;
  text-align: center;
}

.c-contents__images {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 600px;
}

.c-contents__img {
  width: 100%;
  height: 100%;
  position: absolute;
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  overflow: hidden;
}

.separator {
  width: 100%;
  height: 200px;
}
```

これで全体のレイアウトは一旦オッケイです！
ここからGSAP/ScrollTriggerを使用してスクロールアニメーションを加えていきます。

### JS (GSAP/ScrollTrigger)の記述

```javascript title="JavaScript" showLineNumbers
function imageScale() {
  gsap.utils.toArray("section").forEach((section, index) => {
    const image = document.querySelector(`#img-${index + 1} img`)

    gsap.to(image, {
      scrollTrigger: {
        trigger: section,
        start: "top center",
        end: () => {
          const viewportHeight = window.innerHeight
          const sectionBottom = section.offsetTop + section.offsetHeight
          const additionalDistance = viewportHeight * 0.5
          const endValue = sectionBottom - viewportHeight + additionalDistance
          return `+=${endValue}`
        },
        scrub: 1,
      },
      scale: 2,
      ease: "none",
    })
  })
}
```

まずこの`imageScale`関数でスクロールに応じて画像を拡大するアニメーションを追加しています。
`gsap.utils.toArray("section")`で全てのsectionタグ要素を選択しています。
`forEach((section,index)=>{})`で選択されたsectionタグのそれぞれの要素とindexを取得しています。
`gsap.to(image,{}`これはGSAPの`to`メソッドを使用し、image要素に対するアニメーションを設定します。

ここでようやくScrollTriggerを使用します。
ScrollTriggerの`trigger`ではアニメーションを発火させるきっかけを指定します。今回は各sectionがスクロールされたときに、アニメーションが発火するようにします。
`start`はアニメーションが開始される条件を指定しています。今回は画像が見え始めてから徐々に画像を拡大したいのでこのように指定しています。
これによりスクロールしてsection要素が画面の中央に差し掛かったタイミングでアニメーションが開始されます。
`end`はアニメーションが終了する条件を指定しています。今回は画像が表示され見えなくなるときにアニメーションが終わるように設定しています。

`markers`というプロパティを使用すると以下のようにマーカーが表示され`start,end`のタイミングがわかり、実装の手助けになります！

![ScrollTriggerのmarkersプロパティでstartとendの位置が表示された画面](/articles/ScreenShot-2024-05-13-5.24.04-1-1024x620.webp)

`scale`で画像が拡大される量を示しています。今回は1=>2倍の大きさになるように設定しています。
`ease`はアニメーションの動きの加速度を設定でき、今回は`none`なので等速になります。

ScrollTriggerのプロパティーについて詳しく知りたいという方は以下のサイトがわかりやすく説明してくれているので参照してください！

<ExternalLink url="https://qiita.com/heeroo_ymsw/items/ae22e4cee8c6a08ff852" />

```javascript title="JavaScript" showLineNumbers
function imageShape(sectionId, imageId, endClipPath, start, end) {
  let section = document.querySelector(sectionId)
  let image = document.querySelector(imageId)

  ScrollTrigger.create({
    trigger: section,
    start: start,
    end: end,
    onEnter: () => {
      gsap.to(image, {
        scrollTrigger: {
          trigger: section,
          start: start,
          end: end,
          scrub: 0.125,
        },
        clipPath: endClipPath,
        ease: "none",
      })
    },
  })
}

const totalSections = 6

for (let i = 1; i <= totalSections; i++) {
  let currentSection = `#section-title-${i}`
  let prevImage = `#img-${i - 1}`
  let currentImage = `#img-${i}`

  imageShape(
    currentSection,
    prevImage,
    "polygon(0% 0%,100% 0%,100% 0%,0% 0%)",
    "top bottom",
    "center center",
  )

  if (i < totalSections) {
    imageShape(
      currentSection,
      currentImage,
      "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
      "center center",
      "bottom top",
    )
  }
}
```

この`imageShape`関数では画像の表示を変化させるためのアニメーションを追加しています。
先ほど使用していたプロパティの説明は割愛させてもらいます。

`clipPath`は要素の形状を指定するプロパティです。
以下のサイトがclipPathについてわかりやすく説明してくれているので詳しく知りたい方は参照してください！

<ExternalLink url="https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html" />

CSSにてデフォルトの`clipPath`を指定し、こちらで変化後の`clipPath`を指定することで、画像が下から徐々に表示され、下から徐々に消えていくように実装できます。

### JS全体コード

```javascript title="JavaScript" showLineNumbers
function imageScale() {
  gsap.utils.toArray("section").forEach((section, index) => {
    const image = document.querySelector(`#img-${index + 1} img`)

    gsap.to(image, {
      scrollTrigger: {
        trigger: section,
        start: "top center",
        end: () => {
          const viewportHeight = window.innerHeight
          const sectionBottom = section.offsetTop + section.offsetHeight
          const additionalDistance = viewportHeight * 0.5
          const endValue = sectionBottom - viewportHeight + additionalDistance
          return `+=${endValue}`
        },
        scrub: 1,
      },
      scale: 2,
      ease: "none",
    })
  })
}

imageScale()

function imageShape(sectionId, imageId, endClipPath, start, end) {
  let section = document.querySelector(sectionId)
  let image = document.querySelector(imageId)

  ScrollTrigger.create({
    trigger: section,
    start: start,
    end: end,
    onEnter: () => {
      gsap.to(image, {
        scrollTrigger: {
          trigger: section,
          start: start,
          end: end,
          scrub: 0.125,
        },
        clipPath: endClipPath,
        ease: "none",
      })
    },
  })
}

const totalSections = 6

for (let i = 1; i <= totalSections; i++) {
  let currentSection = `#section-title-${i}`
  let prevImage = `#img-${i - 1}`
  let currentImage = `#img-${i}`

  imageShape(
    currentSection,
    prevImage,
    "polygon(0% 0%,100% 0%,100% 0%,0% 0%)",
    "top bottom",
    "center center",
  )

  if (i < totalSections) {
    imageShape(
      currentSection,
      currentImage,
      "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
      "center center",
      "bottom top",
    )
  }
}
```

## さいごに

今回はGSAP/ScrollTriggerを使用して、ちょっとリッチなスクロールアニメーションを紹介しました。
GSAPを使用することでたくさんのアニメーション処理を行うことができるのでぜひ使用してみてください！


---

## 【WordPress】 人気順(閲覧数順)に投稿を並び替える方法

- URL: https://blog.to-ko-s.com/articles/wordpress-sort-by-popularity
- 著者: 成岡拓哉
- 公開日: 2024-04-28
- タグ: WordPress

> WordPressで作成したサイトで投稿一覧を人気順(閲覧数順)に並び替えたい人に向けて、その実装方法をご紹介します。是非あなたのWebサイトにも取り入れてみてください。


## はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！

今回はWordPressで作成したWebサイトの投稿一覧を人気順(閲覧数が多い順)で並び替える方法を説明します。
デフォルトの新着順ではなく人気順で投稿を並び替えたい方にオススメの記事になっています。

### 対象読者

- WordPressでWebサイト制作している人
- 投稿の一覧を人気順(閲覧数順)に並び替えたい人

## 実装方法

### プラグインの導入

まず閲覧数をカウントするためにプラグインを導入します。
プラグインはWP-PostViewsというものを使います。
執筆時点で有効インストール数が100,000以上なので信頼できるプラグインだと思います。

<ExternalLink url="https://ja.wordpress.org/plugins/wp-postviews/" />

プラグインをインストールすると管理画面の投稿一覧ページのカラムに表示数という項目が追加されます。
こちらの数値をもとに投稿の一覧を人気順に並び替えていきます。

### 投稿一覧の取得・表示と並び替えの実装

準備が整ったので、投稿一覧の取得・表示と並び替えの実装をしていきます。
投稿一覧の取得・表示と並び替えには`WP_Query`を使います。

`WP_Query`は、主に投稿を取得するためのクラスで、カスタマイズしたループを作成したり、特定の条件を持つ投稿を絞り込むことができます。

```php title="PHP" showLineNumbers
<ul>
  <?php
  $post_args = array(
    'post_type'  => 'post',
    'meta_query' => array(
      'relation' => 'AND',
      array(
        'key'     => 'views',
        'value'   => 0,
        'compare' => '>=',
        'type'    => 'NUMBER',
      ),
    ),
    'orderby' => 'meta_value_num',
    'order'   => 'DESC',
  );
  $post_query = new WP_Query( $post_args );
  if ( $post_query->have_posts() ):
    while ( $post_query->have_posts() ): $post_query->the_post(); ?>
      <a href="<?php the_permalink(); ?>">
        <span><?php echo get_the_date(); ?></span>
        <h2><?php the_title(); ?></h2>
      </a>
    <?php endwhile;
  endif;
  wp_reset_postdata(); ?>
</ul>
```

`WP_Query`のパラメーター(変数`$post_args`に代入した配列)について説明します。

| パラメーター名 | 説明文                                                                                                                                                                                                                                                            |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| post_type      | 取得する投稿タイプを指定します。                                                                                                                                                                                                                                  |
| meta_query     | 取得する投稿を絞り込むためのカスタムフィールドの値とその詳細を設定します。 今回は閲覧数が0以上の投稿全てという範囲にしています。 `'relation'`の部分は`'AND'`で問題ないですが、絞り込み条件が複数になった際に`'AND'`もしくは`'OR'`のどちらかを試してみてください。 |
| orderby        | 並び替えの方法を指定します。 使っているWP-PostViewsというプラグインの閲覧数は各投稿のカスタムフィールドに保存される仕組みになっています。そのカスタムフィールドの値で投稿を並び替えるため`'orderby'`の値には`'meta_value_num'`を指定します。                      |
| order          | 並び替えの順序(昇順,降順)を指定します。 `'DESC'`は降順で並び替えるという意味で、今回で言うと人気順(閲覧数の多い順)で表示すると言うことになります。昇順で並び替える場合は`'ASC'`と指定します。                                                                     |

`orderby`で設定できる値の種類や他のパラメーターについては、WordPress公式ドキュメントを参考にしてください。

<ExternalLink url="https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters" />

### おまけ(新着順との切り替え)

おまけとして新着順との切り替えをできるようにしてみたいと思います。

```php title="PHP" showLineNumbers
<nav>
  <a href="?order=date">新着順</a>
  <a href="?order=views">人気順</a>
</nav>

<ul>
  <?php
  $order = isset( $_GET['order'] ) ? $_GET['order'] : 'date';

  if ( $order === 'views' ) {
    $post_args = array(
      'post_type'  => 'post',
      'meta_query' => array(
        'relation' => 'AND',
        array(
          'key'     => 'views',
          'value'   => 0,
          'compare' => '>=',
          'type'    => 'NUMBER',
        ),
      ),
      'orderby' => 'meta_value_num',
      'order'   => 'DESC',
    );
  } else {
    $post_args = array(
      'post_type' => 'post',
      'orderby'   => 'date',
      'order'     => 'DESC',
    );
  }

  $post_query = new WP_Query( $post_args );
  if ( $post_query->have_posts() ):
    while ( $post_query->have_posts() ): $post_query->the_post(); ?>
      <a href="<?php the_permalink(); ?>">
        <span><?php echo get_the_date(); ?></span>
        <h2><?php the_title(); ?></h2>
      </a>
    <?php endwhile;
  endif;
  wp_reset_postdata(); ?>
</ul>
```

投稿一覧の上部に新着順と人気順というリンクを設置し、そのリンクにクエリパラメーター(`?order=date` / `?order=views`)を設定しています。
`$_GET['order']`でクエリパラメーターの値を取得・判別して、`WP_Query`内のパラメーターの`'orderby'`の値を動的に切り替えています。デフォルト(パラメーター未指定時)は新着順で表示されます。

これで投稿の並び替え方法を新着順と人気順で切り替えられるようになりました。

## さいごに

今回はWordPressで作成したWebサイトの投稿一覧を並び替える実装方法を説明しました。
人気順の並び替えは人気のあるコンテンツに素早くアクセスできるためUIとして優れているかと思います。
ぜひ使ってみてください。

実装については説明した方法以外にも、プラグインのみでできる方法や完全にプラグインを使わない方法もありますので気になる方は調べてみてください。


---

## 【Next.js】viewportを使って小さい画面幅のレスポンシブ対応をする方法

- URL: https://blog.to-ko-s.com/articles/viewport-responsive
- 著者: 西原月熙
- 公開日: 2024-04-20
- タグ: React, Next.js

> Next.jsのviewport metaタグを動的に制御し、410px以下の小さい画面幅でもレイアウト崩れを防ぐレスポンシブ対応の方法を解説します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、フロントエンドを実装する時に気をつける「レスポンシブ対応」について、特に小さい画面幅の際の効果的な対応方法を説明します✍️
どうしても小さい画面幅のレスポンシブ対応がしづらい場合はこの記事が役立つかもです✨

本記事はNext.jsで記述しますが、素のReactやRemix等他のReactフレームワークでも対応可能なはずなのでぜひ参考にしてみてください💪

## 対象読者・前提

- Next.js (React) で小さい画面幅の対応をしたい方
- viewportについて知りたい方

今回は、Next.jsのApp Routerを用いて、410px以下の画面幅を対応するものとします!

## 実装方針

実装方針としては、「**特定のpx以下の場合はviewportのwidthを固定にする**」というものです！
上記方針とそれに関わる知識の説明をサクッとします！

### viewportとは?

HTMLを記述したことがある人なら、`<head>`タグの中で1度は見かけたことがある

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

↑ この`name="viewport"`となってる`<meta>`タグを本記事ではviewportと呼んでいます！
これは、HTMLがデバイス上でどのように表示されるかをブラウザに指示するためのタグです！
このmetaタグがあることで、ウェブページは異なる画面サイズ(デバイス)に適応し、見やすくなります。

特に理解しておいてほしいのが、 `content="width=device-width`の部分です！
この設定は、ビューポートの幅（ページが表示される領域の幅）を、デバイスの画面幅に合わせるというものです。この設定により、ページはデバイスの画面幅に基づいて適切に縮尺され、ユーザーが画面をズームしなくても内容全体を見ることができるようになります✨

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  当たり前だけど、widthが390pxのiPhone 14で見たら390pxに、1440pxのMacBookで見たら1440pxになるということだね!
</SpeechBubble>
`initial-scale=1.0`は、ページにアクセスした時のズームの具合です！ これは100%(デフォルト)
であってほしいので、ほとんどのサイトで`1.0`が設定されているはずです。

## 実装方法

上記を理解した上で、改めて今回の方針である「**特定のpx以下の場合はviewportのwidthを固定にする**」という実装を行います！
と言っても簡単で、1つコンポーネントを作るだけです！
今回は適当なパスに`ControlViewport.tsx`というコンポーネントを作成します。

```tsx title="src/app/_components/ControlViewport.tsx" showLineNumbers
"use client"

import { useEffect } from "react"

export function ControlViewport(): null {
  useEffect(() => {
    if (typeof window === "undefined") return
    const resizeViewport = () => {
      const viewport = document.querySelector("meta[name=viewport]")
      if (!viewport) return
      viewport.setAttribute(
        "content",
        window.outerWidth > 410
          ? `width=device-width,initial-scale=1.0,maximum-scale=1.0`
          : `width=410,maximum-scale=1.0`,
      )
    }

    window.addEventListener("resize", resizeViewport)
    resizeViewport() // 初回のレンダリング時にも実行
    return () => window.removeEventListener("resize", resizeViewport)
  }, [])

  return null
}
```

上記コンポーネントは、 `return null`をしているので、UIには特に影響を与えません。

`useEffect`内で、 `document.querySelector("meta[name=viewport]")`を使ってmetaタグを取得した後に、 `window.outerWidth`という現在のブラウザの横幅を取得するメソッドを使って、

- 410pxより大きい： `width=device-width`
- 410px以下： `width=410`

上記分岐を行い、metaタグにセットし直しているだけです😎

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  アンマウント時のためのクリーンアップ関数も忘れずに！
</SpeechBubble>

このコンポーネントをlayout.tsxで呼び出します。

```tsx title="src/app/layout.tsx" showLineNumbers {6}
import { ControlViewport } from "@/app/_components/ControlViewport"

const RootLayout = ({ children }: { children: React.ReactNode }) => (
  <html lang="ja">
    <body>
      <ControlViewport />
      {children}
    </body>
  </html>
)
export default RootLayout
```

以上で、410px以下の画面幅の場合は等倍で縮尺するようになります!

<Video src="/articles/viewport-move.mp4" />

## 終わりに

今回は、小さい画面幅に対する簡単なレスポンシブ対応の方法を説明しました！
とは言え、一般的なスマホのサイズ(400px前後)位に対しては普通のレスポンシブ対応をすべきです。
今回の方法は、特に小さな画面幅に対しての実装面でのコストパフォーマンスを考慮に入れた上で実装を検討してみてください🙏


---

## React Virtuosoの4つのコンポーネント紹介

- URL: https://blog.to-ko-s.com/articles/react-virtuoso-components
- 著者: 塩見直樹
- 公開日: 2024-04-14
- タグ: React

> この記事では、React Virtuosoの4つのコンポーネントを使用して多様なリスト作成の紹介をしています。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
前回Reactのライブラリである「React Virtuoso」について紹介をしました。

<InternalLink slug="react-virtuoso" />

今回はその「React Virtuoso」のコンポーネントを使用した多様なリストの作成方法を紹介します。前回の記事でReact Virtuosoについての説明をしているのでこの記事では細かな説明は省かせてもらいます。
ぜひ参考にしてもらえると嬉しいです！

## 概要

「React Virtuoso」はReactライブラリで、沢山のDOM要素をもつリストやテーブルを仮想化して表示するためのライブラリです。画面の表示領域に入っている要素のみをレンダリングさせるのでパフォーマンス向上に適しています！
React Virtuosoには4つのコンポーネント(Virtuoso、Grouped Virtuoso、Table Virtuoso、Virtuoso Grid)があります。
それぞれを使用したリスト作成の紹介をします。

### 対象読者

- React初学者の方
- React Virtuosoを使用してパフォーマンス改善をしようとしている方

## 開発環境

- `react`: "18.2.0"
- `react-virtuoso`: "^4.7.4"
- `tailwindcss`: "^3.3.3"
- `typescript`: "^5.3.3"

今回はTailwindcssを使用しています！

## Virtuosoコンポーネント

React Virtuosoライブラリのコンポーネントで一番基本的なコンポーネントです。

### Virtuosoを使用したサンプルリスト

<Video src="/articles/react-virtuoso-components-1.mp4" />

#### コード

```tsx title="List.tsx" showLineNumbers
import { Virtuoso } from "react-virtuoso"

export default function List() {
  return (
    <Virtuoso
      style={{ height: 500, width: 400 }} /* リストの表示領域を指定 */
      totalCount={1000} /* リスト要素の総数を指定 */
      itemContent={(index) => (
        <div className="flex flex-col items-center justify-center border p-3">
          {/* 要素のスタイルを指定 */}
          <p>user {index}</p>
        </div>
      )}
    />
  )
}
```

表示させたい領域を`width`と`height`で指定しています。
`totalCount`では表示させたい要素の数を指定します。

## Grouped Virtuosoコンポーネント

グループ形式のデータを表示させるためのコンポーネントです。

### Grouped Virtuosoを使用したサンプルリスト

<Video src="/articles/react-virtuoso-components-2.mp4" />

#### コード

```tsx title="List.tsx" showLineNumbers
import React, { useMemo } from "react"
import { GroupedVirtuoso } from "react-virtuoso"

export default function List() {
  const groupCounts = useMemo(() => {
    return Array(1000).fill(10) /* グループの総数と1つのグループに含まれる要素を指定 */
  }, [])

  return (
    <GroupedVirtuoso
      style={{
        /* リストの表示領域を指定 */ height: 600,
        width: 400,
      }}
      groupCounts={groupCounts}
      groupContent={(index: number) => {
        /* 各グループのスタイルやコンテンツを指定 */
        return <div className="bg-gray-500 p-3 text-white">Group {index}</div>
      }}
      itemContent={(index: number, groupIndex: number /* 各要素のスタイルやコンテンツを指定 */) => (
        <div className="border p-3">
          {index} (group {groupIndex})
        </div>
      )}
    />
  )
}
```

`groupCounts`でグループの総数と1つのグループに含まれる要素数を指定しています。
`Array(1000)`でグループの総数を1000個に指定し、`fill(10)`で1つのグループに含まれる要素を10個に指定しています。
リストのヘッダー部分のスタイルを`groupContent`で指定しています。

## Table Virtuosoコンポーネント

テーブル形式のデータを表示させるためのコンポーネントです。

### Table Virtuosoを使用したサンプルリスト

<Video src="/articles/react-virtuoso-components-3.mp4" />

#### コード

```tsx title="List.tsx" showLineNumbers
import React, { useMemo } from "react"
import { TableVirtuoso } from "react-virtuoso"

type User = {
  /* User型を定義 */
  name: string
  age: number
  description: string
  gender: string
}

export default function List() {
  const users: User[] = useMemo(() => {
    return Array.from({ length: 1000 }, (_, index) => ({
      /* テーブルに表示する1000個のユーザーデータを作成 */
      name: `User ${index}`,
      age: 20,
      description: `Description for user ${index}`,
      gender: index % 2 === 0 ? "男性" : "女性" /* indexが偶数なら男性、奇数なら女性と表示させる */,
    }))
  }, [])

  return (
    <TableVirtuoso
      style={{ height: 590, width: 600 }} /* リストの表示領域を指定 */
      data={users} /* テーブルに表示されるデータを指定 */
      components={{
        Table: ({ style, ...props }) => (
          <table {...props} style={{ ...style, width: "100%" }} /> /* テーブル全体のスタイルを指定 */
        ),
      }}
      fixedHeaderContent={() => (
        /* 固定されたリストのヘッダーのスタイルを指定 */
        <tr>
          <th className="border bg-gray-500 p-3 text-white">Name</th>
          <th className="border bg-gray-500 p-3 text-white">Gender</th>
          <th className="border bg-gray-500 p-3 text-white">Age</th>
          <th className="border bg-gray-500 p-3 text-white">Description</th>
        </tr>
      )}
      itemContent={(_, user /* リスト要素のスタイルを指定 */) => (
        <>
          <td className="border p-3 text-center">{user.name}</td>
          <td className="border p-3 text-center">{user.gender}</td>
          <td className="border p-3 text-center">{user.age}</td>
          <td className="border p-3 text-center">{user.description}</td>
        </>
      )}
    />
  )
}
```

`data`でテーブルに表示させるデータを取得しています。
リストの上部に固定されるヘッダーのスタイルを`fixedHeaderContent`で指定し、リスト要素のスタイルを`itemContent`で指定します！

## Virtuoso Gridコンポーネント

グリッド形式のデータを表示するためのコンポーネントです。

### Virtuoso Gridを使用したサンプルリスト

<Video src="/articles/react-virtuoso-components-4.mp4" />

#### コード

```tsx title="List.tsx" showLineNumbers
import React from "react"
import { VirtuosoGrid } from "react-virtuoso"

export default function List() {
  return (
    <>
      <VirtuosoGrid
        style={{ height: 500, width: 600 }} /* リストの表示領域を指定 */
        listClassName="grid grid-cols-3 gap-3 border" /* リストの形式をグリッドに指定 */
        itemClassName="p-3 border text-center" /* リスト要素のスタイルを指定 */
        totalCount={1000} /* リスト要素の総数を指定 */
        itemContent={(index: number) => (
          <div>
            <p>user {index}</p>
          </div>
        )}
      />
    </>
  )
}
```

`listClassName`でリストの形式をグリッドに指定しています。
リスト要素のスタイルは`itemClassName`で指定しています！

## さいごに

今回はReact VirtuosoのコンポーネントであるVirtuoso, Grouped Virtuoso, Table Virtuoso, Virtuoso Gridそれぞれのリストの紹介をしました。
コードを見てもらえると分かる通りとてもシンプルで簡単に実装ができます！
ぜひリスト作成をするときに使ってみてください！


---

## 【CSS】デザインが寂しい時に使える、ちょっとした「あしらい」〜斜線〜

- URL: https://blog.to-ko-s.com/articles/slash-design
- 著者: 寺田拓真
- 公開日: 2024-04-07
- タグ: HTML, CSS

> CSSで斜線を使ったあしらいの実装方法を紹介。テキストの囲みや見出し装飾など、デザインが寂しいときに手軽に使える斜線パーツをコード付きで解説します。


## はじめに

### この記事の概要

みなさん、こんにちは！
サイトのデザインをしたり、コーディングをしたりする際に、
「なんかデザインが寂しいなぁ」と思う時はありませんか？

ただ、大きくデザインを変更するのは大変だと思うので、
そんな時に使える斜線の「あしらい」をいくつかご紹介したいと思います！

コーディングも手軽にできるものだと思うので、
ぜひ参考にしていただけると嬉しいです！

### 対象読者

- css初学者の方
- デザインの引き出しを増やしたい方

## 斜線を使う

### テキストを斜線で囲む

テキストを強調したい場合や、見出しを作成する際、
フォント自体を太く大きくしたり、色を変えたり、下線をつけたりが多いと思います。

こういった時に斜線を使うことで強調することも可能です。

![テキストを斜線で囲んだあしらいの表示例](/articles/ScreenShot-2024-04-07-11.55.37.webp)

参考のコードをお示しします。

```html title="HTML" showLineNumbers
<div class="container">
  <p class="small-text">Ashirai</p>
  <p class="normal-text">テキストを</p>
  <p class="normal-text">斜線で囲む</p>
</div>
```

```css title="CSS" showLineNumbers
.container {
  position: relative;
  text-align: center;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  width: 50%; /* テキストの幅に合わせて調整 */
  height: 1px; /* 斜線の太さ */
  background-color: #000; /* 斜線の色 */
  top: 0;
}

.container::before {
  left: 0;
  transform: translateY(-50%) rotate(45deg); /* 左上の斜線 */
}

.container::after {
  right: 0;
  transform: translateY(50%) rotate(-45deg); /* 右下の斜線 */
}

.normal-text {
  font-size: 24px;
}

.small-text {
  font-size: 16px;
}
```

斜線の長さや角度によって印象がかなり変わるので、
デザインのテイストやご自身の好みで調整してください。
斜線の位置は個人的に離れすぎないほうが良いかと思います。

### 「」に斜線を追加する

見出しで「」を使うことも多いかと思いますが、
この際に、「」に斜線を追加することで、違った印象を持たせることもできます。

![「」に斜線を追加したあしらいの表示例](/articles/ScreenShot-2024-04-07-12.13.29-1024x327.webp)

```html title="HTML" showLineNumbers
<div class="container">
  <div class="left-quote">「</div>
  <div class="text">テキストです</div>
  <div class="right-quote">」</div>
  <div class="slash left-slash"></div>
  <div class="slash right-slash"></div>
</div>
```

```css title="CSS" showLineNumbers
.container {
  display: inline-block;
  position: relative;
  font-size: 16px; /* テキストのフォントサイズに合わせる */
}

.left-quote,
.right-quote {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #000; /* 引用符の色 */
}

.left-quote {
  left: 0;
}

.right-quote {
  right: 0;
}

.text {
  display: inline-block;
  padding: 0 10px; /* テキストと引用符の間隔 */
}

.slash {
  position: absolute;
  top: 50%;
  width: calc(50% - 5px); /* 「」の幅の半分から5px引いた値 */
  height: 1px; /* 斜線の太さ */
  background-color: #000; /* 斜線の色 */
}

.left-slash {
  left: 0;
  transform-origin: right;
  transform: translateY(-50%) rotate(-45deg); /* 左側の斜線 */
}

.right-slash {
  right: 0;
  transform-origin: left;
  transform: translateY(-50%) rotate(45deg); /* 右側の斜線 */
}
```

「」に斜線を追加する場合のポイントですが、
「」の太さの半分、長さは1.5倍くらいで作成することで良い感じになるかと思います。
また、斜線の位置は「の線と線の繋ぎ目から離れすぎないように注意してください。

### 区切りとして斜線をつける

数行にわたるテキストやセクションごとの区切りとして、
斜線をつけることでデザインが単調にならずに済みます。

![セクション区切りとして斜線を使ったあしらいの表示例](/articles/ScreenShot-2024-04-07-12.25.08-1024x489.webp)

```html title="HTML" showLineNumbers
<section class="section-divider">
  <div class="section-content">
    <p>ここに数行のテキストや画像などのコンテンツが入ります。</p>

    <p>ここに数行のテキストや画像などのコンテンツが入ります。</p>
    <p>ここに数行のテキストや画像などのコンテンツが入ります。</p>
  </div>
</section>

<section>
  <div class="section-content">
    <p>次のセクションの内容がここに入ります。</p>
  </div>
</section>
```

```css title="CSS" showLineNumbers
.section-divider {
  position: relative;
  margin: 50px 0; /* セクション間の余白 */
}

.section-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 1px; /* 斜線の太さ */
  background-color: #000; /* 斜線の色 */
  transform-origin: left;
  transform: rotate(-2deg); /* 斜線の角度 */
}

.section-content {
  padding: 20px; /* セクション内の余白 */
}
```

個人的には、あまり長すぎると不自然に感じるので、短めのほうが良いかと思います。

### テキストを斜線で貫く

こちらは四角の中にいれたテキストを斜線で貫くことで、デザイン性を持たせます。

![四角の中のテキストを斜線で貫くあしらいの表示例](/articles/ScreenShot-2024-04-07-12.36.29-1024x950.webp)

```html title="HTML" showLineNumbers
<div class="container">
  <div class="text">斜線で貫く</div>
  <div class="line-top"></div>
  <div class="line-bottom"></div>
</div>
```

```css title="CSS" showLineNumbers
.container {
  position: relative;
  width: 200px; /* 四角形の幅 */
  height: 200px; /* 四角形の高さ */
  margin: 50px auto; /* 中央配置 */
  border: 2px solid #000; /* 四角形の枠線 */
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.line-top,
.line-bottom {
  position: absolute;
  width: 100%; /* 四角形の幅 */
  height: 1px; /* 斜線の太さ */
  background-color: #000; /* 斜線の色 */
}

.line-top {
  top: 0;
  transform-origin: left;
  transform: rotate(-45deg);
}

.line-bottom {
  bottom: 0;
  transform-origin: right;
  transform: rotate(45deg);
}
```

こちらのポイントですが、
斜線の太さは、四角の線の太さよりも細いほうが良いかと思います。
テキストも太いほうが斜線のさりげなさが演出されます。

### STEPで斜線を使う

使用上の流れや特徴を示す際に、STEP表記をすることも多いかと思います。
その際に、ただ「STEP 01」とするよりも斜線を使うことでデザイン性を高めます。

![STEP表記に斜線を使ったあしらいの表示例](/articles/ScreenShot-2024-04-07-12.47.12.webp)

```html title="HTML" showLineNumbers
<div class="container">
  <div class="step">STEP</div>
  <div class="line"></div>
  <div class="number">01</div>
  <p>ここにSTEP 01のコンテンツを追加します。</p>
</div>
```

```css title="CSS" showLineNumbers
.container {
  position: relative;
  width: 200px; /* コンテナの幅 */
  height: 200px; /* コンテナの高さ */
  border: 2px solid #000; /* 枠線の色 */
  text-align: center; /* テキストを中央に配置 */
}

.step {
  font-size: 10px; /* STEPのフォントサイズ */
}

.number {
  font-size: 40px; /* 数字のフォントサイズ */
}

.line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; /* 斜線の幅 */
  height: 2px; /* 斜線の高さ */
  background-color: #000; /* 斜線の色 */
  transform-origin: 0% 0%;
  transform: rotate(-45deg); /* 斜線を45度回転させる */
}
```

こちらは、STEPのフォントサイズを数字の1/4くらいにすることをお勧めします。

## おわりに

今回は斜線を使用したあしらいを紹介しました。
斜線といっても使い方次第で、テキストにデザイン性を持たせることができます！
今回紹介した方法以外にも、まだまだ使い方があると思うので、
みなさんもぜひ探してみてください！


---

## 【React】React Virtuosoライブラリの紹介とReact Windowライブラリとの比較

- URL: https://blog.to-ko-s.com/articles/react-virtuoso
- 著者: 塩見直樹
- 公開日: 2024-04-01
- タグ: React

> この記事ではReactのライブラリであるReact Virtuosoについての紹介と、ReactのライブラリであるReact Windowとの違いについて解説しています。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
前回Reactのライブラリである「React Window」についての紹介をしたことがあります。
個人的には「React Window」よりも「React Virtuoso」の方が使いやすいと思っているので今回は「React Virtuoso」について説明しようと思います！
React Windowと同様にDOM要素の多いリスト表示やグリッド表示を扱うときに役立つライブラリとなっています。
React Windowとの違いについても簡単に説明しています。ぜひ参考にしてください！

<InternalLink slug="react-window" />

## 対象読者

- Reactで大量データのリスト表示に課題を感じている方
- 仮想スクロールライブラリの選定で悩んでいる方

## React Virtuosoの概要(公式ドキュメント翻訳)

React Virtuosoは、仮想化レンダリングを使って大きなデータセットを表示するReactコンポーネントのセットです。Virtuosoコンポーネントは、可変サイズのアイテムやアイテムのサイズの変更を自動的に処理します。

`react-virtuoso`NPMパッケージには、フラットリスト (Virtuoso)、スティッキーヘッダー付きグループ化リスト (GroupedVirtuoso)、レスポンシブレイアウトのグリッド (VirtuosoGrid)、テーブル (TableVirtuoso) が含まれます。パッケージは使用していない不要なコードを削除できるので、参照しないコンポーネントによってバンドルが膨らむことはありません。

## React Virtuosoについて

ReactアプリケーションでたくさんのDOM要素を表示する際に表示パフォーマンスを改善するためのライブラリです。
通常多くの要素を一度に表示をしようとすると、表示されるまでに時間がかかってしまいますが、React Virtuosoを使用したらその問題が解決できます！

具体的にいうと、React Virtuosoは画面の表示領域に入っている要素のみをレンダリングします。これにより一度にレンダリングされる量が減り、パフォーマンス改善が見込めます！

React Windowと用途は同じです。違いについては後ほど説明します！

### React Virtuosoのコンポーネント(パッケージ)

React Virtuosoには以下のコンポーネントがあります。

- Virtuoso
- Grouped Virtuoso
- Table Virtuoso
- Virtuoso Grid

それぞれの用途を簡単に説明します！

| React Virtuosoのコンポーネント | 用途                                                       |
| ------------------------------ | ---------------------------------------------------------- |
| Virtuoso                       | リスト内の要素を表示するためのコンポーネント               |
| Grouped Virtuoso               | リスト内の要素をグループ化して表示するためのコンポーネント |
| Table Virtuoso                 | テーブル形式のデータを表示するためのコンポーネント         |
| Virtuoso Grid                  | グリッド形式のデータを表示するためのコンポーネント         |

開発の要件を分析し用途にあわせて使用するコンポーネントを選びましょう！

## React VirtuosoとReact Windowの比較(2024年3月段階)

### 実装面での違い

React WindowではDOM要素のサイズが固定か可変かで使用するコンポーネント(パッケージ)の使い分けをし、propsとして`itemSize`等を記述しなければいけませんでした。
それにくらべてReact Virtuosoは要素の高さを自動で可変対応してくれる機能が備わっているのでReact Windowよりも必要なProps少なく、より簡単に実装できます。

React Virtuosoには豊富なAPIがあるので、カスタマイズしやすいのも良い点です。

個人的に両方を実装してみた感想を述べますと、React Virtuosoのほうが記述量が少なく、シンプルなので使いやすいなと思いました。

### Weeklyダウンロード数

| React Virtuoso | React Window |
| -------------- | ------------ |
| 560,647        | 1,718,853    |

Weeklyダウンロード数はReact Windowのほうが多いです。
React Virtuosoは比較的新しいライブラリなのでダウンロード数が劣っています。

### Star数

| React Virtuoso | React Window |
| -------------- | ------------ |
| 4,760          | 15,199       |

Star数もダンロード数と同じようにReact Virtuosoの方が後発のライブラリなので劣っています。

### 最終更新日

| React Virtuoso | React Window |
| -------------- | ------------ |
| 1週間前        | 4ヶ月前      |

ライブラリ選定をする際に最終更新日を気にする方は多いと思います。
更新頻度が高いに越したことはないですね！

### パッケージサイズ

| React Virtuoso | React Window |
| -------------- | ------------ |
| 17.1KB         | 6.4KB        |

パッケージサイズはReact Windowの方が小さいです。
React Virtuosoの方が大きいですが、React Virtuosoの提供する機能を考慮すると適切なサイズだと思います！

### 公式ドキュメントの読みやすさ

公式ドキュメントの読みやすさでいうと、React Virtuosoの方が機能ごとに型の説明など詳細に書かれているので読みやすいです。
使用するライブラリを理解するうえで公式ドキュメントの読みやすさは、とても重要だとおもいます！
気になる方は以下の公式ドキュメントを参照してください！

<ExternalLink url="https://virtuoso.dev/" />

<ExternalLink url="https://react-window.vercel.app/#/examples/list/fixed-size" />

## 開発環境

- `react`: "18.2.0"
- `react-virtuoso`: "^4.7.4"
- `tailwindcss`: "^3.3.3"

## ライブラリの使用方法

まず以下のコードでReact Virtuosoをインストールします。
今回は`npm`を用いてインストールしています。

```bash title="ターミナル"
npm install react-virtuoso
```

次にリストのDOM要素を用意します。
今回は、要素の高さをindexの偶数、奇数で変えています。
高さが固定でも可変でも同じコンポーネントを使用できるのと、可変でもPropsを付け加える必要がないのがとても便利でReact Virtuosoが使いやすいポイントだと思います。
スタイリングはTailWindCssを使用しています。

```tsx title="List.tsx" showLineNumbers
<div className={`${index % 2 === 0 ? "h-[50px]" : "h-[100px]"} flex flex-col items-center justify-center border`}>
  <p>user: {index}</p>
  <p>age: 〇〇</p>
</div>
```

DOM要素が用意できたらVirtuosoコンポーネントを`react-virtuoso`からインポートし、要素の親に記述します。
要素はVirtuosoのPropsである`itemContent`の返り値として記述します。
今回は要素で`index`を表示させたいので`index`を渡しています！

```tsx title="List.tsx" showLineNumbers
import { Virtuoso } from "react-virtuoso"

export default function List() {
  return (
    <Virtuoso
      itemContent={(index) => (
        <div
          className={`${index % 2 === 0 ? "h-[50px]" : "h-[100px]"} flex flex-col items-center justify-center border`}
        >
          <p>user: {index}</p>
          <p>age: 〇〇</p>
        </div>
      )}
    />
  )
}
```

次にVirtuosoのPropsである`style`と`totalCount`を使用します。今回は`height: 400` `width: 250`を指定しています。
`style`は表示させたい領域を`height`と`width`を使用して指定します。
`totalCount`は要素の数を指定できます。今回は要素を1000個に指定しました。

```tsx title="List.tsx" showLineNumbers
import { Virtuoso } from "react-virtuoso"

export default function List() {
  return (
    <Virtuoso
      style={{ height: 400, width: 250 }}
      totalCount={1000}
      itemContent={(index) => (
        <div
          className={`${index % 2 === 0 ? "h-[50px]" : "h-[100px]"} flex flex-col items-center justify-center border`}
        >
          <p>user: {index}</p>
          <p>age: 〇〇</p>
        </div>
      )}
    />
  )
}
```

以上のコードで簡単なリストの作成ができました！

<Video src="/articles/react-virtuoso.mp4" />

## さいごに

今回はReact Virtuosoライブラリの紹介とReact Windowライブラリとの違いについて説明しました。
使用方法を見てもらえると、すごく簡単で扱いやすいライブラリだということが理解していただけたと思います！
開発をしていて一覧画面を作成する機会は多々あると思います。そのときにパフォーマンス改善として、React Virtuosoを使用してみてはどうでしょうか！


---

## 【React】React Windowの紹介とリストの作成方法

- URL: https://blog.to-ko-s.com/articles/react-window
- 著者: 塩見直樹
- 公開日: 2024-03-30
- タグ: React

> この記事ではReactライブラリのReact Windowの紹介とReact WindowのコンポーネントであるFixedSizeListを使用してリストを作成しました。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回はReactのライブラリである「React Window」について紹介します！
DOM要素の多いリスト表示やグリッド表示を扱うときに役立つと思うので、ぜひ参考にしてください！

## 対象読者

- WEB開発を行っている方

## React Windowについて

React WindowはReactアプリケーションでたくさんのDOM要素を表示する際に表示パフォーマンスを改善するためのライブラリです。
通常多くの要素を一度に表示をしようとすると、表示されるまでに時間がかかってしまいますが、React Windowを使用したらその問題が解決できます！

具体的にいうと、React Windowは画面の表示領域に入っている要素のみをレンダリングします。これにより一度にレンダリングされる量が減り、パフォーマンス改善が見込めます！

### React Windowのコンポーネント

React Windowには次の4つのコンポーネント(パッケージ)があります。

- FixedSizeList
- VariableSizeList
- FixedSizeGrid
- VariableSizeGrid

それぞれの用途を簡単に説明します！

| コンポーネント   | 用途                                                                                         |
| ---------------- | -------------------------------------------------------------------------------------------- |
| FixedSizeList    | リスト内の全ての要素が同じ高さ、幅をもつ場合に使用します。                                   |
| VariableSizeList | リスト内の要素が異なる高さ、幅をもつ場合に使用します。                                       |
| FixedSizeGrid    | グリッドレイアウトで、要素のサイズが一定であり、行数と列数が固定されている場合に使用します。 |
| VariableSizeGrid | グリッドレイアウトで、要素のサイズが可変であり、行数と列数が動的に変わる場合に使用します。   |

これらのコンポーネントを用途に合わせて適切に使用しましょう！

### プロパティ

それぞれのコンポーネントには豊富なPropsが存在します。
今回は実際にFixedSizeListを使用して簡単なリストを作成していきたいと思いますので、FixedSizeListで主に使われているPropsを紹介します！
(※)が付いているPropsは必須のPropsになります！

| FixedSizeListのProps | 型               | 用途                                                                                                                                                        |
| -------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ※ children           | component        | index porpによって指定された個々の要素のレンダリングを担当するReactコンポーネント。このコンポーネントは、（位置決めに使用される）style propも受け取ります。 |
| ※ height             | number \| string | リストの高さ 水平リストの場合は数値でも文字列でも大丈夫ですが、縦書きリストの場合は数値でなければなりません。                                               |
| ※ width              | number \| string | リストの幅 縦書きリストの場合は数値でも文字列でも大丈夫ですが、水平リストの場合は数値でなければなりません                                                   |
| ※ itemCount          | number           | リスト内の項目の総数                                                                                                                                        |
| ※ itemSize           | number           | ウィンドウ表示される方向の項目のサイズ 縦書きリストの場合は行の高さ。横長のリストでは列の幅です。                                                           |
| className            | string           | 一番外側の`<div>`要素に付けるCSSクラス                                                                                                                      |
| layout               | string           | リストのレイアウト/方向 使用可能な値は以下の2つです ・vertical (デフォルト) 上下スクロール ・horizontal 左右スクロール                                      |
| itemData             | any              | 要素に data propとして渡すデータ                                                                                                                            |
| style                | object           | 一番外側の`<div>`要素に付けるインラインスタイル (オプション)                                                                                                |

詳しく知りたい方は下記を参照してください！

<ExternalLink url="https://react-window.vercel.app/#/api/FixedSizeList" />

## 開発環境

- `react`: "18.2.0"
- `react-window`: "^1.8.10"
- `typescript`: "^5.3.3"
- `next`: "^14.1.0"
- `tailwindcss`: "^3.3.3"

今回はTailwindcssを使用しています。

## FixedSizeListを使用したリスト

### サンプルリスト

今回はFixedSizeListを使用してリストのサンプルを作成しました。

<Video src="/articles/react-window.mp4" />

### コード

```tsx title="List.tsx" showLineNumbers
import React from "react"
import { FixedSizeList } from "react-window"

export default function List() {
  // レンダリングする要素を定義しています
  const ListItem = ({
    index, // 要素のインデックス
    style, // 要素のスタイル
  }: {
    index: number
    style: React.CSSProperties
  }) => (
    <div
      style={style} // 要素のスタイルを適用
      className="flex items-center justify-center border" // 要素のスタイルを適用
    >
      Item {index} // 要素のインデックスを表示
    </div>
  )

  // FixedSizeListコンポーネントを使ってリストを作成
  return (
    <div>
      <FixedSizeList
        height={400} // リストの高さ
        width={300} // リストの幅
        itemCount={1000} // 要素の総数
        itemSize={50} // 要素の高さ
      >
        {ListItem}
      </FixedSizeList>
    </div>
  )
}
```

### コード説明

まずReact Windowの中からFixedSizeListをインポートします。
FixedSizeListコンポーネントでは、表示をさせたい領域を`height`と`width`でを指定します。
表示させたいコンポーネントの数を`ItemCount`で指定します、表示させたいコンポーネントのheightを`itemSize`で指定します。
そして`children`として表示させたいコンポーネントを指定します。
今回は`ListItem`を指定しています。
また`children`で指定したコンポーネントは`index`と`style`を受け取ることができます。

- index : インデックス番号
- style : itemSizeなどChildrenに対してのcssプロパティ

今回は受け取った`index`を表示させます。
`children`が受け取ったcssプロパティで補えない場合は別途スタイルを当てる必要があります。(今回の場合は`className`でTailwindを使用し指定しています。)

以上になります。
とても簡単にFixedSizeListを使用しリストの作成ができることがわかってもらえたと思います！

## さいごに

今回はReact Windowについての紹介と、実際にReact WindowのFixedSizeListコンポーネントを使って簡単なリストの作成をしました。
React Windowは4つのコンポーネントと豊富なプロパティをうまく使えばさまざまなニーズに対応できると思うので、パフォーマンス改善として色々試しながら使用してみてください。


---

## 【2024年版】カルーセルライブラリEmblaCarouselの紹介と他ライブラリとの比較

- URL: https://blog.to-ko-s.com/articles/embla-carousel
- 著者: 杉田侑祐
- 公開日: 2024-03-17
- タグ: JavaScript, React

> この記事ではJavaScriptライブラリのEmblaCarouselの紹介とReact Slick,Swiper,React Responsive Carouselとの比較を行い、EmblaCarouselの優れているところを紹介しました。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はJavaScriptカルーセルライブラリのEmblaCarouselの紹介と他のカルーセルライブラリとの比較を行っていきます。
今回はReactでの使用を想定しています。
筆者としてはカルーセルライブラリで今一番推しています。shadcn/uiやMantineUIなどモダンなUIライブラリにも採用されていることから現在最も勢いを感じております。

### 対象読者

- WEB制作/開発を行っている方

## EmblaCarouselの概要(公式ドキュメント翻訳)

Embla Carouselは、ライブラリに依存しない、依存関係のない軽量のカルーセルライブラリです。カルーセルの構築に関するもっとも困難な技術的課題を解決することを目的としており、残りはその高度な拡張性を利用するユーザー次第です。
柔軟性と拡張性を念頭に置いて設計されたAPI、必要に応じて機能を追加するプラグインシステム。
また、最新のすべてのブラウザで動作します。

## 各ライブラリの比較(2024年3月段階)

今回はライブラリを選定する際に重要視する項目ごとで比較を行っていきます。比較項目は下記のとおりです。

- Weeklyダウンロード数
- 最終更新日
- Star数
- バンドルサイズ

また今回比較用のライブラリは下記のとおりです。
選定条件はオープンソースかつTypeScriptサポートがあることとしています。

- Swiper
- React Slick
- React Responsive Carousel

### Weeklyダウンロード数

| EmblaCarousel | Swiper    | React Slick | React Responsive Carousel |
| ------------- | --------- | ----------- | ------------------------- |
| 359,658       | 2,157,588 | 1,087,293   | 394,142                   |

圧倒的にSwiperが一位なのは納得ですが、React SwiperがV10から非推奨になったりしていて個人的にはVanillaJSで使う分には良いと思うのですがReact環境では少し怖いかなという印象があります。また以前ReactSwiperを使ったことがあったのですが型の参照エラーで全く使いものにならなかった記憶があります。

### 最終更新日

| EmblaCarousel | Swiper  | React Slick | React Responsive Carousel |
| ------------- | ------- | ----------- | ------------------------- |
| 3週間前       | 3週間前 | 1ヶ月前     | 2年前                     |

この最終更新日を気にする方は多いのではないでしょうか。ReactResponsiveCarouselは最終更新日が2年前となっており、選定するにはかなり気になるところではないでしょうか。

### Star数

| EmblaCarousel | Swiper | React Slick | React Responsive Carousel |
| ------------- | ------ | ----------- | ------------------------- |
| 4.7k          | 38.3k  | 11k         | 2.6k                      |

ここでも流石のSwiperです。Weeklyダウンロード数での比率的にはReact SlickよりEmblaCarouselの方が高いです。

### バンドルサイズ(MINIFIED + GZIPPED)

| EmblaCarousel | Swiper | React Slick | React Responsive Carousel |
| ------------- | ------ | ----------- | ------------------------- |
| 7.2kB         | 19.4kB | 15.6kB      | 9kB                       |

上記3つの項目はどちらかというと開発者側への選定条件になるのですが、バンドルサイズはUXやSEOに関わってくるため筆者は一番重要視しています。
EmblaCarouselがReact Slickの2分の1、Swiperの約3分の1のバンドルサイズになっています。
この数字だけでも選定理由になるのではないでしょうか。

<ExternalLink url="https://bundlephobia.com/package/embla-carousel-react@8.0.0" />

### その他EmblaCarouselの良いところ

**公式ドキュメントが読みやすい**
かなり重要なことなのですが、公式ドキュメントがかなり整備されていてとても読みやすいです。またドキュメント内にジェネレータがあるため条件を入力するとコード例を生成してくれます。

**様々なJSライブラリにも対応**
React以外にもVue,Svelte,Solidにも対応していて、それぞれのJSライブラリに対して初期セットアップ方法、API,PlugInの使用例が記載してあります。

## 開発環境

- `embla-carousel`: 8.0.0,
- `embla-carousel-react`: 8.0.0,
- `react`: 18.2.0,

## ライブラリの使用方法

EmblaCarouselの使用法の説明に入ります。
最低限のライブラリのお作法が5つあるため説明します。

### Slide Container(親要素のCSSの指定方法)

まずは親要素(コンテナ要素)に対してFlexBoxとCSSGridを使用してレイアウトのセットアップを行います。

今回はFlexBoxで行います。

```html title="HTML" showLineNumbers
<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```

水平カルーセルの場合

```css title="CSS" showLineNumbers
.embla__container {
  display: flex;
}
```

垂直カルーセルの場合
垂直カルーセルの場合は高さの指定が必要になるので注意してください

```css title="CSS" showLineNumbers
.embla__container {
  display: flex;
  flex-direction: column;
  height: 200px;
}
```

Gridレイアウト使用例

```css title="CSS" showLineNumbers
.embla__container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
}
```

Gridレイアウトでの垂直カルーセルの場合
FlexBox同様に高さの指定が必要になります。

```css title="CSS" showLineNumbers
.embla__container {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 80%;
  height: 200px;
}
```

### Slide Sizes(スライドさせる対象のサイズ指定)

ここではスライドさせる対象に対してのサイズ指定の方法を説明します。

```html title="HTML" showLineNumbers
<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```

Flexプロパティを使い指定します

```css title="CSS" showLineNumbers
.embla__slide {
  flex: 0 0 50%; //Viewポートの50%
  min-width: 0;
}
```

PX等で指定することも可能です。

```css title="CSS" showLineNumbers
.embla__slide {
  flex: 0 0 200px;
  min-width: 0;
}
```

またスライドごとに指定することも可能です。

```css title="CSS" showLineNumbers
.embla__slide:nth-child(1) {
  flex: 0 0 30%;
  min-width: 0;
}
.embla__slide:nth-child(2) {
  flex: 0 0 60%;
  min-width: 0;
}
```

### Slide Gaps(スライド間のGap)

ここではスライド間のGapの指定方法を説明します。

```html title="HTML" showLineNumbers
<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```

片方向への指定

```css title="CSS" showLineNumbers
.embla__slide {
  margin-right: 20px;
}
```

両方向への指定

```css title="CSS" showLineNumbers
.embla__slide {
  margin-right: 20px;
  margin-left: 10px;
}
```

Gridレイアウトの場合

```css title="CSS" showLineNumbers
.embla__container {
  grid-column-gap: 20px;
}
```

スライドごとへの指定

```css title="CSS" showLineNumbers
.embla__slide:nth-child(1) {
  margin-right: 10px;
}
.embla__slide:nth-child(2) {
  margin-right: 20px;
  margin-left: 10px;
}
```

### Breakpoints(ブレークポイントの指定)

ここではブレークポイントの指定をしレスポンシブ対応します。

```html title="HTML" showLineNumbers
<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```

スライドサイズの変更方法

```css title="CSS" showLineNumbers
.embla__slide {
  flex: 0 0 100%;
}
@media (min-width: 768px) {
  .embla__slide {
    flex: 0 0 50%;
  }
}
```

Gapサイズの変更方法

```css title="CSS" showLineNumbers
.embla__slide {
  margin-right: 10px;
}
@media (min-width: 768px) {
  .embla__slide {
    margin-right: 20px;
  }
}
```

またOptionの変更も可能です。
Activeオプション変更の例

```javascript title="JavaScript" showLineNumbers
const options = {
  active: true,
  breakpoints: {
    "(min-width: 768px)": { active: false },
  },
}
```

Loopオプション変更の例
複数のViewブレークポイント指定の例

```javascript title="JavaScript" showLineNumbers
const options = {
  loop: false,
  breakpoints: {
    "(min-width: 768px)": { loop: true },
    "(min-width: 420px)": { loop: false },
  },
}
```

複数のオプションも変更可能です。

```javascript title="JavaScript" showLineNumbers
const options = {
  loop: false,
  breakpoints: {
    "(min-width: 420px)": { align: "start" },
    "(min-width: 768px)": { loop: true },
  },
}
```

### Previous & Next Buttons(戻る、次へボタン)

今回はReactでの例を説明します。

```javascript title="JavaScript" showLineNumbers
import React, { useCallback } from "react"
import useEmblaCarousel from "embla-carousel-react"

export const EmblaCarousel = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel()

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev()
  }, [emblaApi])

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext()
  }, [emblaApi])

  return (
    <div className="embla">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          <div className="embla__slide">Slide 1</div>
          <div className="embla__slide">Slide 2</div>
          <div className="embla__slide">Slide 3</div>
        </div>
      </div>
      {/* 戻るボタン */}
      <button className="embla__prev" onClick={scrollPrev}>
        Prev
      </button>
      {/* 次へボタン */}
      <button className="embla__next" onClick={scrollNext}>
        Next
      </button>
    </div>
  )
}
```

以上で基本的なEmblaCarouselの使い方になります。

## さいごに

以上でEmblaCarouselの紹介と基本的な使い方の説明を終わります。
他ライブラリより覚えることが少なく、CSSベースでサイズ変更等行えるので直感的に記述できるのではないでしょうか。
次回はReact環境でAPIやOptionを使ってカスタムしていきたいと思いますので少々お待ちいただけたらと思います！


---

## 【JavaScript】JavaScriptのみを使用してスクロール時に画像をふわっと表示させる方法

- URL: https://blog.to-ko-s.com/articles/intersection-observer-scroll
- 著者: 塩見直樹
- 公開日: 2024-03-10
- タグ: JavaScript

> この記事では、JavaScriptのみを使用して画像をふわっと表示させる、スクロール処理を紹介しています。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回はJavaScriptのみを使用して画像をふわっと表示させる方法を紹介します。ぜひ参考にしてください！

## 対象読者

- JavaScript初学者の方
- JavaScriptでスクロール処理を行いたい方

## スクロール処理に使用するもの

今回はJavaScriptの`IntersectionObserver`を使用してスクロール処理を実装したいと思います！
`IntersectionObserver`とはターゲット要素を監視し、その要素が特定の領域内に入ったり出たりするのを検知し、ターゲット要素と特定の領域が交差している時に関数を実行させることができます！
`scroll`イベントでも簡単に実装することは出来ますが、スクロールするたびにイベントが発火してしまうのでパフォーマンス的にあまり良くありません。それに比べて`IntersectionObserver`は非同期で実行されるのでパフォーマンスにも影響しにくいです。

## 見本とコード説明

### 見本

#### スクロールしたら画像をふわっと表示

<Video src="/articles/intersection-observer-scroll-1.mp4" />

Webサイトでよく見るスクロール処理です。
`HTML` `CSS` `JavaScript`は以下のようになります！

```html title="HTML" showLineNumbers
<body>
  <img id="image" src="image/dog.jpg" alt="dog" />
</body>
```

```css title="CSS" showLineNumbers
body {
  padding: 100vh 0;
  background-color: #d1e9ed;
}

#image {
  width: 600px;
  margin: 0 auto;
  opacity: 0;
  transition: 4s;
}
```

```javascript title="JavaScript" showLineNumbers
// ① ターゲット要素を取得
const image = document.getElementById("image")

// ③ オプション設定 ※デフォルトで良いなら記述しなくでも大丈夫です！
const options = {
  threshold: 0.5,
}

// ④ 要素が表示されたら実行
function showImage(entries) {
  if (entries[0].isIntersecting) {
    image.style.opacity = 1
  }
}

// ② IntersectionObserverを呼び出す
const observer = new IntersectionObserver(showImage, options)

// ⑤ 実行
observer.observe(image)
```

### コード説明

`HTML`で表示させたい画像を記述します。

`CSS`では、`body`でスクロール分の余白を取っています。
`image`で、`opacity: 0`を指定し画像を透明にしておき、`transition: 4s`を指定しふわっと表示されるようにします。

`JavaScript`では、まず①のイベントを発火させたい要素を`document.getElementById()`にて取得しています。
次に、②で`IntersectionObserver()`を呼び出します。第1引数に実行したい関数、第2引数にはオプションの設定を書いていきます。
③でオプションを記述しています。オプションプロパティは以下の3つがあります！

- `root`
  - 監視するベースとなる要素を指定できます。
  - 初期値はブラウザの`viewport`になります。
    ※`viewport`とは、表示領域のことです。今現在見ているページの範囲が`viewport`になります！

- `rootMargin`
  - 交差を感知するルートからの距離、こちらを利用してイベントを発生させる位置を調整できます。
  - 指定の仕方は、`margin`プロパティと同じで`("10px 20px 30px 0px")`のように記述します。
  - 初期値は`("0px 0px 0px 0px")`になります。
    ※ `0px`の場合`0`しか記述しないとエラーが出てしまうので、`0px`と記述するように注意してください！

- `threshold`
  - ターゲット要素が見えてから、どの位置でイベントを発火させるか調整できます。
  - 0 ~ 1や配列を指定できます。0はターゲットが見え初めた瞬間にイベントが発火し、1はターゲットがすべて見えてる状態でイベントが発火します。
  - 初期値は0になります。

オプションは初期値で良ければ何も記述しなくて大丈夫です！

④で要素が表示されたら実行したい関数を記述しています。
関数の第1引数には`IntersectionObserver`の`entry`オブジェクトを記述します。`entry`オブジェクトは`IntersectionObserver`と一緒に使えるもので、以下のプロパティがあります！

- `boundingClientRect`
  - ターゲット要素が画面上にどのように表示されているかの情報を返します。具体的にいうと、その要素が画面上でどの位置にあり、どれだけの幅と高さを持っているかを返します。

- `intersectionRatio`
  - ターゲット要素が現在どの程度見えているかを`0.0 ~ 1.0`の間の値で返します。

- `intersectionRect`
  - ターゲット要素が特定の領域に入っている部分の位置やサイズを返します。

- `isIntersecting`
  - ターゲット要素が特定の領域に入ったら`true`を返し、入っていなければ`false`を返します。

- `rootBounds`
  - ターゲット要素がどの領域に対して交差を判定しているかを返します。

- `target`
  - ターゲット要素を返します。

- `time`
  - ターゲット要素と特定の領域が交差状態になった時刻を返します。

今回は`isIntersecting`を使用しています！
今回の場合は要素がルートに入ったら透過を無くしたいので`image.style.opacity = 1`と記述しています。

⑤で`observer.observe(ターゲット要素)`と記述することでターゲット要素の監視が開始されます！

以上がコードの説明になります！

オプションプロパティ、`entry`オブジェクトについてもっと詳しく知りたい方は[こちらの公式ドキュメント](https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserverEntry)を参照してください！

## おまけ

少し工夫をしたら、このようなものも簡単に作れます！

<Video src="/articles/intersection-observer-scroll-2.mp4" />

```html title="HTML" showLineNumbers
<div id="box" class="box">
  <p class="text">スクロールしてね!</p>
</div>
```

```css title="CSS" showLineNumbers
body {
  padding: 100vh 0;
  background-color: #d1e9ed;
}

.box {
  padding: 200px 0;
  margin: 0 auto;
  position: relative;
}

.box::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background: #5df56f;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: translateX(-100%);
  animation-name: none;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  transform: translateX(-100%);
}
@keyframes box_slide {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.text {
  font-size: 3rem;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
}
```

```javascript title="JavaScript" showLineNumbers
const box = document.getElementById("box")
const sheets = document.styleSheets
const sheet = sheets[sheets.length - 1]

const options = {
  threshold: 1,
}

function showBox(entries) {
  if (entries[0].isIntersecting) {
    sheet.insertRule(".box::after { animation-name: box_slide }", sheet.cssRules.length)
  }
}

const observer = new IntersectionObserver(showBox, options)

observer.observe(box)
```

## さいごに

今回は`IntersectionObserver`を使って簡単にスクロール処理を実装する方法を紹介しました。
この他にも色々なことができるのでぜひ試してみてください！


---

## 【CSS】CSSのみでトグルボタンを作成

- URL: https://blog.to-ko-s.com/articles/css-toggle-button
- 著者: 寺田拓真
- 公開日: 2024-02-27
- タグ: HTML, CSS

> CSSだけで作れるトグルボタンを3種類紹介します。シンプル・縁あり・先の細いデザインをHTMLとCSSコード付きで解説。:has()を使った状態管理もわかりやすく解説します。


## はじめに

こんにちは、たくまです！

当ブログでCSSのみで作成するハンバーガーメニューについて紹介したことがります。

<InternalLink slug="css-hamburger-menu" />

今回は、CSSのみで作成するトグルボタンについてご紹介します！
どれも簡単なので、ぜひ使ってみてください。

### 対象読者

- CSS初学者の方
- js等は使用せずにCSSのみでトグルボタンを作成したい方

## 見本とコード

### シンプルなトグルボタン

<Video src="/articles/css-toggle-button1.mov" />

iOS等でよく見かけるシンプルなデザインのトグルボタンです。
HTMLとCSSは以下になります。

```html title="HTML" showLineNumbers
<label class="toggle-button">
  <input type="checkbox" />
</label>
```

```css title="CSS" showLineNumbers
.toggle-button {
  margin: 300px;
  display: inline-block;
  position: relative;
  width: 100px;
  height: 50px;
  border-radius: 50px;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color 0.4s;
}

.toggle-button:has(:checked) {
  background-color: #4bd865;
}

.toggle-button::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  background-color: #fff;
  content: "";
  transition: left 0.4s;
}

.toggle-button:has(:checked)::after {
  left: 50px;
}

.toggle-button input {
  display: none;
}
```

ポイントは疑似要素の`has`を用いて状態を保持している点です。
こちらを記述しないとボタンが動作しないため注意してください。

### 縁のあるトグルボタン

縁をつけたトグルボタンです。
こちらもよく見かけるデザインかと思います。

<Video src="/articles/css-toggle-button2.mov" />

HTMLとCSSは以下になります。

```html title="HTML" showLineNumbers
<label class="toggle-button">
  <input type="checkbox" />
</label>
```

```css title="CSS" showLineNumbers
.toggle-button {
  margin: 400px;
  display: inline-block;
  position: relative;
  width: 100px;
  height: 50px;
  border-radius: 50px;
  border: 3px solid #dddddd;
  box-sizing: content-box;
  cursor: pointer;
  transition: border-color 0.4s;
}

.toggle-button:has(:checked) {
  border-color: #4bd865;
}

.toggle-button::after {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #dddddd;
  content: "";
  transition: left 0.4s;
}

.toggle-button:has(:checked)::after {
  left: 50px;
  background-color: #4bd865;
}

.toggle-button input {
  display: none;
}
```

### 先の細いトグルボタン

<Video src="/articles/css-toggle-button3.mov" />

スイッチ部分の円が大きいタイプのトグルボタンです。
HTMLとCSSは以下になります。

```html title="HTML" showLineNumbers
<label class="toggle-button">
  <input type="checkbox" />
</label>
```

```css title="CSS" showLineNumbers
.toggle-button {
  margin: 300px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100px;
  height: 25px;
  margin-top: 12.5px;
  border-radius: 50px;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color 0.4s;
}

.toggle-button:has(:checked) {
  background-color: #4bd865;
}

.toggle-button::after {
  position: absolute;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  background: #fff;
  content: "";
  transition: left 0.4s;
}

.toggle-button:has(:checked)::after {
  left: 50px;
}

.toggle-button input {
  display: none;
}
```

## さいごに

今回はCSSのみで作るトグルボタンについて紹介しました。
チェックボックスやラジオボタンを作成するときと同様に、`input`要素を使用することで作成が可能です。
また、`has`を用いた状態保持がポイントになります。

どれもコピペしたらすぐに使うことができるので、ぜひお試しください！


---

## 【CSS】高級感のあるボタン

- URL: https://blog.to-ko-s.com/articles/rich-button
- 著者: 寺田拓真
- 公開日: 2024-02-27
- タグ: HTML, CSS

> CSSで作成する高級感のあるボタンの見本とコードを紹介しています。


## はじめに

### この記事の概要

こんにちは、たくまです！

以前、高級感のある色をCSSで表現する方法についてご紹介しました！

<InternalLink slug="css-elegant-gradation" />

今回は高級シリーズでボタンについてもご紹介したいと思います！

### 対象読者

- CSS初学者の方
- ボタンのデザインにお悩みの方

## 見本とコード

### 光沢のあるボタン

カーソルをボタンに置くとキラッと光るボタンです。

<Video src="/articles/rich-button-1.mp4" />

`HTML`と`CSS`は以下になります。

```html title="HTML"
<button class="c-button">
  <p class="c-button__text">Coming Soon</p>
</button>
```

```scss title="SCSS"
.c-button {
  overflow: hidden;
  position: relative;
  display: block;
  width: 600px;
  text-align: center;
  padding: 20px;
  margin: 40px auto 0;
  border: 1px solid;
  border-image: linear-gradient(to right, $gold-color, $light-gold, $gold-color) 1;
  &::before {
    content: "";
    display: block;
    width: 5rem;
    height: 300%;
    top: 50%;
    position: absolute;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    transform: translate(-500%, -50%) rotate(-45deg);
    transition: transform 0.6s ease-in-out;
  }
  &:hover::before {
    transform: translate(1000%, -50%) rotate(-45deg);
  }
  .c-button__text {
    font-size: 20px;
    color: $white-color;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
  }
}
```

2行目の`overflow: hidden;`を設定しないと光沢が飛び出してしまうので、注意してください。
個人的に光沢はできるだけ早めに移動するほうがしっくりきます。
ボタンの長さや幅に応じて、`transition`の秒数は適宜変更してください。

### ゆっくりとグラデーションが起きるボタン

ホバーすることでボタンにグラデーション色が塗られます。

<Video src="/articles/rich-button-2.mp4" />

`HTML`と`CSS`は以下になります。

```html title="HTML"
<button class="c-button in">ボタンです</button>
```

```css title="CSS"
.c-button {
  display: inline-block;
  border: 1px solid white;
  padding: 18px 80px 20px;
  text-transform: uppercase;
  color: white;
  text-decoration: none;

  font-weight: 500;
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  border-radius: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, Sana;

  transition: all 0.7s ease-out;

  margin: 5rem;
}

.in {
  background: linear-gradient(
    270deg,
    rgba(137, 247, 254, 0.8),
    rgba(102, 166, 255, 0.8),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0)
  );
  background-size: 300% 300%;
  background-position: 1% 50%;
}
.c-button:hover {
  color: white;
  border: 1px solid rgba(193, 164, 112, 0);
  background-position: 99% 50%;
}
```

`linear-gradient`にて色を指定しているので、お好きな色で様々なボタンを使用可能です。

### 枠線にグラデーションが起きるボタン

ホバーするとボタンの枠線にグラデーションが起きるボタンです。

<Video src="/articles/rich-button-3.mp4" />

`HTML`と`CSS`は以下になります。

```html title="HTML"
<button class="c-button"></button>
```

```css title="CSS"
.c-button {
  margin: 200px;
  width: 150px;
  height: 50px;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #7f5a83;
  background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
  background-size: 200% 100%;
  background-position: left;
  background-repeat: no-repeat;
  transition: 500ms;
}

.c-button::before {
  content: "ボタンです";
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 40px;
  background-color: #1b2845;
  background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
  transition: 500ms;
}

.c-button:hover {
  background-position: right;
}

.c-button:hover::before {
  color: rgba(255, 255, 255, 0.8);
}

.c-button:focus {
  outline: none;
}
```

こちらも`linear-gradient`にて色を指定しているので、お好きな色で様々なボタンを使用可能です。

### ガラス調のボタン

ガラスのように透過しているボタンです。
ホバーすると光沢が浮き出ます。

<Video src="/articles/rich-button-4.mp4" />

`HTML`と`CSS`は以下になります。

```html title="HTML"
<button class="c-button">ボタンです</button>
```

```css title="CSS"
.c-button {
  text-align: center;
  width: 150px;
  height: 50px;
  cursor: pointer;
  border: none;
  font-family: "Comfortaa", cursive;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  border-radius: 4px;
  box-shadow:
    inset 0px 3px 5px rgba(255, 255, 255, 0.5),
    0px 0px 10px rgba(0, 0, 0, 0.15);
  background: rgb(2, 0, 36);
  background: linear-gradient(
    45deg,
    rgba(2, 0, 36, 0) 5%,
    rgba(255, 255, 255, 0.5) 6%,
    rgba(255, 255, 255, 0) 9%,
    rgba(255, 255, 255, 0.5) 10%,
    rgba(255, 255, 255, 0) 17%,
    rgba(255, 255, 255, 0.5) 19%,
    rgba(255, 255, 255, 0) 21%
  );
  background-size: 150%;
  background-position: right;
  transition: 1s;
}

.c-button:hover {
  background-position: left;
  color: white;
  box-shadow:
    inset 0px 3px 5px rgba(255, 255, 255, 1),
    0px 0px 10px rgba(0, 0, 0, 0.25);
}

.c-button:focus {
  outline: none;
}
```

ホバー時の光沢は`box-shadow`にて表現しています。

## さいごに

今回は高級感のあるボタンを紹介しました！
ボタンのデザインはサイトのトンマナによって悩む要因にもなるかと思うので、
ぜひ今回紹介したボタンを試してみてください！


---

## 【Shopify】settingsのtype一覧と設定方法

- URL: https://blog.to-ko-s.com/articles/shopify-schema-settings-type
- 著者: 成岡拓哉
- 公開日: 2024-02-19
- タグ: Shopify

> Shopifyテーマで動的なSectionを作成するためのSchemaのsettings設定方法を解説します。checkbox、text、image_pickerなど主要なtype一覧も紹介します。


## はじめに

### この記事の概要

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はShopifyのテーマで動的なSectionを作成するために使われる、Schemaのsettingsの項目とその設定方法について紹介します！

Shopifyで独自のテーマやDawnなどの既存テーマをカスタマイズする際に独自のSectionファイルを作成してテーマを構築していく流れが一般的ですが、そのSectionファイルにSchemaを設定することでそのSectionを管理画面で動的に変更できます。
動的なSectionを作成することで管理画面のテーマカスタマイズからテキストの変更や画像の差し替えができるようになるため、テーマのカスタマイズ性が向上します。
是非参考にしてください！

### 対象読者

- Shopifyでテーマをカスタマイズしている方
- Shopifyで動的なセクションを作成したい方

## Schemaタグについて

`Schemaタグ`はテーマディレクトリ内のSectionファイル内に記述します。`Schemaタグ`を設置すると、そのSectionがShopifyの管理画面のテーマカスタマイズで編集が可能になります。 `Schemaタグ`内の`settings`をあれこれ設定することでSectionのテキストや画像を管理画面から動的に変更できるようになります。

```text title="ディレクトリ構造" showLineNumbers
├ assets
├ config
├ layout
├ locales
├ sections
│   └ new-section.liquid (sections内のファイルにSchemaを記述する)
└ presets
```

```liquid title="Schemaタグの例" showLineNumbers
{% schema %}
{
  "name": "新しいセクション",
  "settings": [],
  "presets": [
    {
      "name": "新しいセクション"
    }
  ]
}
{% endschema %}
```

- `name`: Sectionの名前
- `settings`: 設定項目を定義する配列
- `presets.name`: 管理画面のカスタマイズに表示される名前

<ExternalLink url="https://shopify.dev/docs/themes/architecture/sections/section-schema" />

## settingsの設定方法

`settings`の設置はとても簡単です。一例として`checkbox`を用いてSP画面の際に文字の表示切り替えができるようにしてみたいと思います。ちなみにこの`checkbox`が`settingsのtype`と言われるもので全部で30種類ほどあります。

```json title="settings例" showLineNumbers
"settings": [
  {
    "type": "checkbox",
    "id": "hide_in_sp",
    "label": "SP時に非表示にする",
    "default": true
  }
]
```

- `type`: 入力タイプ（`checkbox`、`text`、`select`など）
- `id`: このSectionファイル内で一意の識別子
- `label`: テーマカスタマイズに表示される文言
- `default`: デフォルト値

`Schemaタグ`内にこの部分を追記しました。
`checkbox`を使うので`"type": "checkbox"`にしています。

```liquid title="new-section.liquid" showLineNumbers
{%- style -%}
  .text-{{ section.id }} {
    padding: 40px 120px;
  }
  @media screen and (max-width: 767px) {
    .invisible-text-{{ section.id }} {
      display: none;
    }
  }
{%- endstyle -%}

<div class="text-{{ section.id }}">
  <p>通常のテキストです。</p>
  <p class="{% if section.settings.hide_in_sp %}invisible-text-{{ section.id }}{% endif %}">
    SP画面の際に表示されないテキストです。
  </p>
</div>

{% schema %}
{
  "name": "新しいセクション",
  "settings": [
    {
      "type": "checkbox",
      "id": "hide_in_sp",
      "label": "SP時に非表示にする",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "新しいセクション"
    }
  ]
}
{% endschema %}
```

今回の例では、SP画面の際のテキストの表示切り替えをしたいので、`checkbox`にチェックが入っている時（`true`の時）にCSSの`display: none;`が効くようにしています。
Section内でCSSのclass名を使用する際は、`[任意の文字]-{{ section.id }}`の形式で設定してください。

![テーマカスタマイズ画面でのcheckbox設定](/articles/shopify-schema-settings-type-ss-c-1024x814.webp)

![checkboxの設定によるSP画面での表示切り替え](/articles/shopify-schema-settings-type-ss-b-1024x814.webp)

## settingsのtype一覧

`Schemaタグ`内のsettingsにはチェックボックスやテキストなど様々な項目を設定できます。中には使用頻度の低いものもあるので今回は厳選したものを紹介します。
全種類知りたい方は公式ドキュメントを参照してください。

<ExternalLink url="https://shopify.dev/docs/themes/architecture/settings/input-settings" />

### checkbox

表示切り替えなどで使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "checkbox",
  "id": "hide_in_sp",
  "label": "SP時に非表示にする",
  "default": true
}
```

### number

商品やブログ投稿の表示件数の設定などで使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "number",
  "id": "products_per_page",
  "label": "商品表示件数",
  "default": 20
}
```

### radio

テキストの文字揃えの設定などで使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "radio",
  "id": "text_alignment",
  "label": "文字揃え",
  "options": [
    {
      "value": "left",
      "label": "左揃え"
    },
    {
      "value": "center",
      "label": "中央揃え"
    },
    {
      "value": "right",
      "label": "右揃え"
    }
  ],
  "default": "left"
}
```

### range

フォントサイズやpaddingのサイズ設定などで使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "range",
  "id": "font_size",
  "min": 12,
  "max": 24,
  "step": 1,
  "unit": "px",
  "label": "フォントサイズ",
  "default": 16
}
```

### select

複数の選択肢から1つを選ばせる場合に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "select",
  "id": "vertical_alignment",
  "label": "垂直方向の配置",
  "options": [
    {
      "value": "top",
      "label": "上揃え"
    },
    {
      "value": "middle",
      "label": "中央揃え"
    },
    {
      "value": "bottom",
      "label": "下揃え"
    }
  ],
  "default": "middle"
}
```

### text

テキストを設定する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "text",
  "id": "main_text",
  "label": "メインテキスト",
  "default": "デフォルトテキスト"
}
```

### textarea

長文のテキストを設定する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "textarea",
  "id": "long_sentence",
  "label": "長文テキスト",
  "default": "デフォルトテキスト"
}
```

### blog

ブログを選択する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "blog",
  "id": "blog",
  "label": "一覧表示する投稿"
}
```

### collection

商品のコレクションを表示する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "collection",
  "id": "collection",
  "label": "一覧表示するコレクション"
}
```

### color

背景色や文字色を設定する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "color",
  "id": "background_color",
  "label": "背景色",
  "default": "#000000"
}
```

### image_picker

画像を設定する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "image_picker",
  "id": "main_image",
  "label": "画像"
}
```

### video

動画を設定する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "video",
  "id": "main_video",
  "label": "動画"
}
```

### richtext

リッチテキストを設定する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "richtext",
  "id": "paragraph",
  "label": "テキスト"
}
```

### product

1つの商品を選択する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "product",
  "id": "product",
  "label": "商品"
}
```

### url

サイト内のページや外部サイトのリンクを設定する際に使用します。

```liquid title="new-section.liquid" showLineNumbers
{
  "type": "url",
  "id": "button_link",
  "label": "ボタンのリンク先"
}
```

## さいごに

今回はShopifyのテーマで動的なSectionを作成するために使われる、`Schema`の`settings`の項目とその設定方法について紹介しました。

おさらいをすると、テーマのSectionファイル内に`Schemaタグ`を設定しその中に`settings`を設定することで動的なセクションを作成できます。

その`settingsのtype`には30種類ほどあり、それを使い分けることで自由度の高い動的なセクションを作成できます。

今回紹介しきれなかった`settingsのtype`もたくさんあるので、興味のある方は調べてみてください！


---

## 【React】サーバーコンポーネントとは？クライアントコンポーネントとの違い！【初学者向け】

- URL: https://blog.to-ko-s.com/articles/react-server-components
- 著者: 塩見直樹
- 公開日: 2024-02-12
- タグ: React

> Reactのサーバーコンポーネントとクライアントコンポーネントの違いや使い分け方を初学者向けにわかりやすく解説します。


## はじめに

こんにちは、株式会社TOKOSのナオキです！
今回は、サーバーコンポーネントとはどういったコンポーネントなのか？クライアントコンポーネントの違いについて簡単に説明します！React初学者の方もいるかと思いますので、ぜひ参考にしてください🙌

## 対象読者

- React初学者の方
- サーバーコンポーネントとクライアントコンポーネントの違いについて理解していない方

## サーバーコンポーネントとは

サーバーコンポーネントとは、文字通りサーバーでコンポーネントの生成を行いそのコンポーネントデータをクライアントで取得、レンダリングする為のコンポーネントです。
Next.js 13.4がリリースされてから、AppRouterがstableになりました。
そのAppRouterのコンポーネントは、デフォルトでサーバーコンポーネントになっています。

サーバーコンポーネントは、以下のような特徴があります！

- ステートを持てないため、useStateやuseReducerは使えない
- 関数はシリアライズ出来ない為、クライアントコンポーネントに関数を渡すことが出来ない
- async / awaitを使用することができる
- サーバーコンポーネントは、クライアントコンポーネントを子コンポーネントに持つことができる
- JavaScriptバンドルサイズが削減され、パフォーマンスが高くなる

> **※バンドルとは**
> 複数のJavaScriptファイルや使用しているライブラリや依存関係も含めて1つのJavaScriptファイルにまとめることです。

<SpeechBubble icon="/authors/shiomi-naoki.jpg" name="ナオキ">
  サーバーコンポーネントを使用するメリットってなんだろう？
</SpeechBubble>

### サーバーコンポーネントを使用するメリット

**レンダリングの高速化**: サーバーコンポーネントは、サーバーサイドでコンポーネントをレンダリングするため、クライアントサイドでのJavaScriptの実行やDOM操作が発生しません。そのため、初期表示やパフォーマンスを改善できます！

**SEOの向上**: サーバーサイドでコンテンツが生成されるため、クローラーがページの内容をより正確に理解し、インデックス化できます。そのため、検索エンジンでのランキング向上などが期待できます！

**セキュリティの向上**: サーバーコンポーネントでは、環境変数を用いたコードをサーバーコンポーネント側で実行することで、クライアント側にセキュアな環境変数を漏洩させることが無くなります！

## サーバーコンポーネントとクライアントコンポーネントの違い

### 1\. レンダリング環境

サーバーコンポーネントは、サーバー上でレンダリングされ、クライアントにはHTMLが送られます!
クライアントコンポーネントは、サーバーでプリレンダリングされた後、クライアントでJavaScriptによってハイドレートされます!
レンダリングについて、詳しく知りたい方は、[こちらの公式ドキュメント](https://nextjs.org/docs/app/building-your-application/rendering)を参照ください！

### 2\. 使用目的

サーバーコンポーネントは、主にデータフェッチやバックエンドリソースへのアクセス、秘密情報の保持、クライアントへ送信するJavaScriptの量を削減するために使用されます!
クライアントコンポーネントは、インタラクティブな機能やイベントリスナー、状態管理、ブラウザ固有のAPIの使用に適しています!

## サーバーコンポーネントとクライアントコンポーネントの使い分け方

| **行いたい処理**                           | **サーバーコンポーネント** | **クライアントコンポーネント** |
| ------------------------------------------ | -------------------------- | ------------------------------ |
| データフェッチ                             | **◯**                      | △                              |
| バックエンドリソースへのアクセス           | ◯                          | ✕                              |
| 機密情報の保持                             | ◯                          | ✕                              |
| インタラクティブな機能やイベントリスナー   | ✕                          | ◯                              |
| ステート、エフェクト、カスタムフックの使用 | ✕                          | ◯                              |

#### データフェッチ

クライアントコンポーネントでもデータの取得は出来ますが、特別な理由がない限りサーバーコンポーネントでデータを取得するほうが良いです。サーバーコンポーネントを使用すると、データフェッチをデータソースに近いサーバーに移動できます。そのため、レンダリングに必要なデータのフェッチにかかる時間と、クライアントが行う必要があるリクエストの数が削減され、パフォーマンスが向上します！

#### バックエンドリソースへのアクセス

サーバーコンポーネントは、バックエンドリソースに直接アクセスできます。そのため、APIキーやデータベースへのアクセスなど、サーバー上で行うべき処理はサーバーコンポーネントで行ったほうが良いです！

#### 機密の保持

サーバーコンポーネントでは、トークンやAPIキーのような機密データやロジックをサーバー上に保持しつつ、クライアントにそれらを公開するリスクを回避することが出来ます！

#### インタラクティブな機能やイベントリスナー

イベントリスナーが必要なコンポーネントは、クライアントコンポーネントとして実装します。これにより、インタラクティブな機能が正しく動作し、ユーザーエクスペリエンスが向上します！

#### ステート、エフェクト、カスタムフックの使用

サーバーコンポーネントでは、ステートの保持をすることが出来ないためクライアントコンポーネントで使用することになります！

<SpeechBubble icon="/authors/shiomi-naoki.jpg" name="ナオキ">
  AppRouterは、デフォルトでサーバーコンポーネントになるって事だけど、どうしたらクライアントコンポーネントに変更できるの？
</SpeechBubble>

## AppRouterでサーバーコンポーネントをクライアントコンポーネントに変える方法

AppRouterでサーバーコンポーネントからクライアントコンポーネントに変えるには、以下のコードのようにモジュールの先頭に`"use client"`を記述することで変更できます！

```tsx title="app/components/Example.tsx" showLineNumbers
"use client"

import { FC, ReactNode, memo } from "react"

type Props = {
  children: ReactNode
}

export const Example: FC<Props> = memo((props) => {
  const { children } = props

  return <div>{children}</div>
})
```

## 終わりに

今回は、サーバーコンポーネントとクライアントコンポーネントについて簡単に説明させてもらいました！
この記事で少しでもサーバーコンポーネントを理解してもらえたら嬉しいです！


---

## 【React/GSAP】useGSAPで作るテキストアニメーション

- URL: https://blog.to-ko-s.com/articles/react-gsap
- 著者: 杉田侑祐
- 公開日: 2024-02-05
- タグ: JavaScript

> この記事ではJavaScriptライブラリのGSAPのReactパッケージ内のuseGSAPを用いてテキストアニメーションを作成してみました。 この記事を見ればReactを用いたテキストアニメーションの作り方が学べます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はReact/GSAPのuseGSAPを使用してテキストアニメーションを作ってみました。
また今回概要も調べてみたので、概要の説明もしていきます。

### 対象読者

- WEB制作を行っている方

### 今回の完成予定

今回は以前作ったテキストアニメーションをReact/GSAPで再現したいと思います。
以前作ったテキストアニメーションは下記の記事を参照してください！

<InternalLink slug="gsap-text-animation" />

## 開発環境

- `react`: 18.2.0,
- `gsap`: 3.12.5,

## 実装

### React/GSAPの導入

今回はyarnを使用します。

まずはGSAPのインストールをします。

```bash
$ yarn add gsap
```

次にReact/GSAPのパッケージのインストールです。

```bash
$ yarn add @gsap/react
```

### React/GSAPの概要

まずは基本的な構文からです。
例は下記になります。

```javascript title="JavaScript" showLineNumbers
import { useRef } from "react"
import gsap from "gsap"
import { useGSAP } from "@gsap/react"

const container = useRef()

useGSAP(
  () => {
    //ここにgsapの記述
    gsap.to(".box", { x: 360 })
  },
  { scope: container },
)
```

基本的にReact/GSAPでは`useGSAP`内に`gsap`構文で書いていきます。

今回のメインの`useGSAP`というフックですが、これが何をしているかというと、`useEffect`を踏襲したフックみたいです。
この`useEffect`ではクリーンアップ関数の記述が重要ですが、`useGSAP`には`gsap.context()`が内包されていて`gsap`で記述されている関数にはクリーンアップ関数の記述をせずにDOMの操作ができるみたいです。

<ExternalLink url="https://gsap.com/docs/v3/GSAP/gsap.context()" />

また`useGSAP`の第二引数には`configObject`というオブジェクトを入れることができます。

この`configObject`の概要を説明します。

| プロパティ名   | 型                             | 概要                                                                                                                                                                                                                                                                                                                                            |
| -------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dependencies   | Array/null デフォルト値: \[ \] | 内部のuseEffectに渡される依存配列                                                                                                                                                                                                                                                                                                               |
| scope          | React ref                      | useGSAP()フック内のすべてのGSAPセレクタテキストがそのコンテナの子孫にスコープされるように、configオブジェクトのスコープとしてコンテナを定義します。                                                                                                                                                                                             |
| revertOnUpdate | boolean デフォルト値: false    | 依存関係の配列を定義して依存関係が変更されても、GSAP 関連のオブジェクト（アニメーション、ScrollTriggers など）は元に戻りません。コンポーネントがアンマウントされ、フックが破棄されたときのみ、それらは元に戻ります。フックが再同期するたびに（依存関係が変更されるたびに）コンテキストを元に戻したい場合は、revertOnUpdate: true を設定します。 |

**scopeがめちゃくちゃ便利なので別途解説します。**

refをスコープとして渡すと、`useGSAP`フック内のGSAP関連コードで使われるすべてのセレクタテキストもそれに応じてスコープされます。つまり子孫に`useRef`でアクセスしなくてよくなります。

**1.スコープにRefを渡さない例**

```javascript title="JavaScript" showLineNumbers
const container = useRef()
const box1 = useRef()
const box2 = useRef()
const box3 = useRef()

useGSAP(() => {
  gsap.from([box1, box2, box3], { opacity: 0, stagger: 0.1 })
})

return (
  //各要素にuseRefを用いてアクセスする
  <div ref={container}>
    <div ref={box1} className="box"></div>
    <div ref={box2} className="box"></div>
    <div ref={box3} className="box"></div>
  </div>
)
```

**2.スコープにRefを渡す例**

```javascript title="JavaScript" showLineNumbers
const container = useRef()

useGSAP(
  () => {
    gsap.from(".box", { opacity: 0, stagger: 0.1 })
  },
  { scope: container },
) // 親のRefをスコープにわたす

return (
  <div ref={container}>
    //子孫はuseRefを用いなくてもよい
    <div className="box"></div>
    <div className="box"></div>
    <div className="box"></div>
  </div>
)
```

このように親要素のrefを渡すだけで子要素のrefにアクセスせずに済みます。

また`useGSAP`には参照し使用できる機能があります。

| プロパティ名 | 概要                                                                                                                                                                                                                                                                                   |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| context      | `gsap.context()`すべてのアニメーションを追跡するインスタンス。                                                                                                                                                                                                                         |
| contextSafe  | 関数の実行中に作成された GSAP 関連のオブジェクトは、Context が元に戻されたときに元に戻ります（クリーンアップ）。コンテキストセーフ関数内のセレクタテキストも Context のスコープを使用します。 contextSafe() は関数を受け取り、その関数の新しいコンテキストセーフバージョンを返します。 |

コンテキストセーフについて

`useGSAP`の内部の`gsap.context`に追加されている状態、クリーンアップされる状態という解釈。(違ったらすみません)

**コンテキストセーフでは無い例**

```javascript title="JavaScript" showLineNumbers
const container = useRef()

//下記はコンテキストセーフ
useGSAP(
  () => {
    gsap.to(".good", { x: 100 })
  },
  { scope: container },
)

//下記が悪い例、クリーンアップできていない
const onClickBad = () => {
  gsap.to(".bad", { y: 100 })
}

return (
  <div ref={container}>
    <div className="good"></div>
    <button onClick={onClickBad} className="bad"></button>
  </div>
)
```

コンテキストセーフさせるには`contextSafe()`で`wrap`しなければいけません。

`contextSafe()`の使用の仕方は2種類あります。

**1.デストラクチャリングを用いて関数を抽出する**

```javascript title="JavaScript" showLineNumbers
const container = useRef()

//デストラクチャリングを用いて関数を抽出する
const { contextSafe } = useGSAP({ scope: container })

//contextSafe()でwrap
const onClickGood = contextSafe(() => {
  gsap.to(".good", { rotation: 180 })
})

return (
  <div ref={container}>
    <button onClick={onClickGood} className="good"></button>
  </div>
)
```

**2.引数を使用**

```javascript title="JavaScript" showLineNumbers
const container = useRef()
const badRef = useRef()
const goodRef = useRef()

useGSAP(
  (context, contextSafe) => {
    gsap.to(goodRef.current, { x: 100 })

    //コンテキストセーフではない例
    badRef.current.addEventListener("click", () => {
      gsap.to(badRef.current, { y: 100 })
    })

    //第二引数のcontextSafe()でwrap
    const onClickGood = contextSafe(() => {
      gsap.to(goodRef.current, { rotation: 180 })
    })

    goodRef.current.addEventListener("click", onClickGood)

    //イベントリスナーのクリーンアップ関数
    return () => {
      goodRef.current.removeEventListener("click", onClickGood)
    }
  },
  { scope: container },
)
return (
  <div ref={container}>
    <button ref={badRef}></button>
    <button ref={goodRef}></button>
  </div>
)
```

以上が`contextSafe()`の使用方法です。

詳しく知りたい方は下記を参照してください。

<ExternalLink url="https://gsap.com/resources/React/" />

### テキストアニメーションの実装

今回は前回とは違いSplitTextは使用しません。

```javascript title="JSX" showLineNumbers
<div ref={textWrapper} className="text-wrapper">
  <span className="text">P</span>
  <span className="text">L</span>
  <span className="text">A</span>
  <span className="text">Y</span>
  <span className="text">T</span>
  <span className="text">O</span>
  <span className="text">E</span>
  <span className="text">N</span>
  <span className="text">J</span>
  <span className="text">O</span>
  <span className="text">Y</span>
</div>
```

```css title="CSS" showLineNumbers
.text-wrapper {
  color: #fff; /*お好きなフォントカラーを選んでください*/
  font-size: 80px; /*お好きなフォントサイズを選んでください*/
  font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1; /*line-heightなくしたほうがカッコ良くなります*/
}

.text {
  transform: translateY(100px);
  display: inline-block; /*インライン要素の為*/
  transition: 0.5s;
}
```

```javascript title="JavaScript(GSAP)" showLineNumbers
export const TextAnimation = () => {
  const textWrapper = useRef()

  useGSAP(
    () => {
      gsap.to(".text", {
        delay: 0.2,
        duration: 0.5,
        ease: "power2.out", //型がリテラル型なので注意
        stagger: 0.05,
        y: 0,
      })
    },
    //scopeで親を指定すると子孫はuseRefでアクセスせずそのまま操作できる
    { scope: textWrapper },
  )

  return (
    <div ref={textWrapper} className="text-wrapper">
      <span className="text">P</span>
      <span className="text">L</span>
      <span className="text">A</span>
      <span className="text">Y</span>
      <span className="text">T</span>
      <span className="text">O</span>
      <span className="text">E</span>
      <span className="text">N</span>
      <span className="text">J</span>
      <span className="text">O</span>
      <span className="text">Y</span>
    </div>
  )
}
```

これで完成になります。
第二引数の`scope`に親要素の`ref`を渡すだけでめちゃくちゃ簡単に書けます。

一応参考動画も載せておきます。

<Video src="/articles/react-gsap.mp4" />

使用しているメソッド等がわからない方は下記を参照してください。

<InternalLink slug="gsap-text-animation" />

## さいごに

今回はReact/GSAPを紹介しました。
この`useGSAP()`を用いた記述のほうが直感的で簡単に書けてとても良いと感じました。
私としてはReactライクな記述方法のほうが書きやすく感じました！
また関係ないのですが、公式ドキュメントが更新されていてめちゃくちゃ読みやすくなっていることに感動しました。
ライブラリを使用する際はドキュメントの読みやすさも重要だなとあらためて感じました。


---

## 【Swiper.js】WordPressで動的なサムネ付きカルーセルの作り方

- URL: https://blog.to-ko-s.com/articles/wordpress-swiper
- 著者: 杉田侑祐
- 公開日: 2024-01-29
- タグ: JavaScript

> この記事ではSwiper.jsを用いたカルーセルの作り方を解説しています。この記事を読めばカルーセルの作り方が学べます。 オリジナルのページネーションの作り方なども学べます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はWordPressでサムネイル付きの動的カルーセルを作ってみたいと思います。
また、オリジナルのページネーションの作り方など、細かい部分についても併せて解説していきたいと思います。

### 対象読者

- WEB制作を行っている方

## 今回の完成予定

今回はWordPressの投稿機能とSwiper.jsを用いて動的なカルーセルを作ってみたいと思います。

<Video src="/articles/wordpress-swiper.mp4" />

## 開発環境

- WordPress 6.4.2
- Advanced Custom Fields 6.2.4
- Swiper v11

今回はCDNで実装していきます。

<ExternalLink url="https://swiperjs.com/get-started" />

## 実装

### 実装の前に

今回はSwiperの基本的な使い方は省略します。
基本的な使い方がわからない方は下記を参照してください。

<ExternalLink url="https://swiperjs.com/swiper-api" />

またWordPressの投稿の入力欄拡張としてACF(Advanced Custom Fields)を使っていきます。
基本的な使い方がわからない方は下記を参照してください。

<ExternalLink url="https://www.advancedcustomfields.com/resources/" />

### 実装の流れ

今回の実装の手順は下記とします。

1. ACFで作成したフィールドを読み込んで動的化
2. Swiperを用いてカルーセルの実装
3. ページネーションとタイトルと日付の追加

このような手順で進めていきたいと思います！

### ACFでフォームの追加

ACFで投稿機能に対してフォームの追加をしていきます。
追加していくフォームは下記になります。

- 日付
- タイトル
- 画像データ

日付の設定は下記になります。

![ACFの日付フィールドの設定画面](/articles/19c158948dafb50df16def33e080da1f-1024x535.webp)

タイトルの設定は下記になります。

![ACFのタイトルフィールドの設定画面](/articles/96dc6d9691532745aa94ace9f3ebf745-1024x534.webp)

画像の設定は下記になります。

![ACFの画像フィールドの設定画面](/articles/8bd8f518901f059c7000128e9a688305-1024x581.webp)

これでフォームの追加設定は完了しました。
下記は設定後の投稿画面です。

![ACFフィールド設定後のWordPress投稿編集画面](/articles/9a2f6c050df97d91eaab7098538dfa88-1024x657.webp)

ここからHTMLとCSSを記述していきます。

### HTMLとCSS

HTMLとCSSを記述し、While文で繰り返し処理をしています。

```php title="HTML" showLineNumbers
<div class="c-gallery">
  <div class="c-gallery__content">
    <div class="c-gallery__left-section">
      <div class="c-gallery__parent">
        <div class="swiper parentSwiper">
          <!-- カルーセルのプレビュー側 -->
          <div class="swiper-wrapper">
            <!-- 投稿画像の繰り返し処理 -->
            <?php while ( have_posts() ) : the_post(); ?>
              <div class="swiper-slide">
                <div class="c-gallery__list">
                  <img src="<?php echo get_field("news-image"); ?>" alt="テスト画像" class="c-gallery__list-img">
                </div>
                <div class="c-gallery__text-area">
                  <div class="c-gallery__date"><?php echo get_field("date"); ?></div>
                  <div class="c-gallery__title"><?php echo get_field("title"); ?></div>
                </div>
              </div>
            <?php endwhile; ?>
          </div>
        </div>
      </div>
    </div>
    <!-- サムネのカルーセル -->
    <div class="c-gallery__thm">
      <div class="swiper childSwiper">
        <div class="swiper-wrapper">
          <!-- 投稿画像の繰り返し処理 -->
          <?php rewind_posts(); ?>
          <?php while ( have_posts() ) : the_post(); ?>
            <div class="swiper-slide --child">
              <div class="c-gallery__child">
                <img src="<?php echo get_field("news-image"); ?>" alt="サムネ画像" class="c-gallery__child-img">
              </div>
            </div>
          <?php endwhile; ?>
        </div>
      </div>
    </div>
  </div>
</div>
```

```css title="CSS" showLineNumbers
.c-gallery {
  padding: 80px 16px 100px 16px;
  background-color: #333;
}

.c-gallery__content {
  display: flex;
  max-width: 1120px;
  justify-content: space-evenly;
  width: 100%;
  margin-top: 68px;
  margin: 68px auto 0;
  flex-wrap: wrap;
}

.c-gallery__left-section {
  display: flex;
}

.c-gallery__list {
  max-width: 380px;
  min-width: 380px;
  max-height: 220px;
  min-height: 220px;
  opacity: 1 !important;
}

.u-opacity {
  opacity: 1 !important;
}

.c-gallery__list-img {
  max-width: 380px;
  min-width: 380px;
  max-height: 220px;
  min-height: 220px;
  object-fit: cover;
  opacity: 1 !important;
}

.c-gallery__child {
  max-width: 117px;
  max-height: 100px;
  min-height: 100px;
  max-width: 117px;
}

.c-gallery__child-img {
  object-fit: cover;
  max-width: 117px;
  max-height: 100px;
  min-height: 100px;
  max-width: 117px;
}

.c-gallery__thm {
  width: 100%;
  max-width: 640px;
  position: relative;
  margin-top: 100px;
}

.c-gallery__parent {
  max-width: 380px;
  position: relative;
}

.c-gallery__parent::before {
  content: "";
  max-width: 380px;
  width: 100%;
  height: 220px;
  border: #fff solid 1px;
  position: absolute;
  top: 8px;
  right: -8px;
}

.c-gallery__text {
  top: 10px;
  position: relative;
  color: #fff;
  z-index: 10;
}
```

<Callout variant="memo">
  **タイトルと日付の非表示**

下記コードが投稿データに対するタイトルと日付を表示する箇所ですが、Swiperの画像範囲の外にテキストを出そうとすると`overflow:hidden;`で消えてしまったのでCSSで非表示にしてJavaScriptで別の箇所で表示します。(※他にいいアイデアがありそうですがすみません)

</Callout>

```php title="HTML" showLineNumbers
<div class="c-gallery__text-area">
  <div class="c-gallery__date"><?php echo get_field("date"); ?></div>
  <div class="c-gallery__title"><?php echo get_field("title"); ?></div>
</div>
```

### Swiperの記述

ここからサムネ付きのカルーセルを作成していきます。

早速コードの紹介です。

```javascript title="JavaScript" showLineNumbers
const subCarousel = new Swiper(".childSwiper", {
  loop: true,
  slidesPerView: 5,
  freeMode: true,
  watchSlidesProgress: true,
  spaceBetween: 16,
})

const mainCarousel = new Swiper(".parentSwiper", {
  loop: true,
  spaceBetween: 10,
  thumbs: {
    swiper: subCarousel,
  },
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  effect: "fade",
})
```

今回loopをtrueにして繰り返し表示できるようにしてあります。
個別のパラメーターが知りたい方は下記を参照してください。

<ExternalLink url="https://swiperjs.com/swiper-api#parameters" />

カルーセルに関わるスタイリングも追加します。

```css title="CSS" showLineNumbers
/* すべてのスライドの基本スタイル */
.swiper-slide.--child {
  opacity: 0.5; /* 非アクティブなスライドは薄く表示 */
  transition: opacity 0.3s;
}

/* アクティブなスライドのスタイル */
.swiper-slide.--child.swiper-slide-thumb-active {
  opacity: 1; /* アクティブなスライドは通常の不透明度 */
}
```

これで一旦カルーセルは動いていると思います！

### ページネーションのカスタム

ここからページネーションのカスタムを行っていきたいと思います。
通常デフォルトのページネーションを使う場合は下記のようになると思います。

```javascript title="JavaScript" showLineNumbers
const swiper = new Swiper(".swiper", {
  pagination: {
    el: ".swiper-pagination",
    type: "bullets",
  },
})
```

こんな感じで青色で表示されると思います。

![Swiperデフォルトのページネーションが青色のドットで表示された状態](/articles/d6cda98c25b493b0806aa36ec1d063b6.webp)

これではスタイリングができないのでrenderBulletメソッドでオリジナルのページネーションを生成していきます。

```php title="HTML" showLineNumbers
<div class="c-gallery">
  <div class="c-gallery__content">
    <div class="c-gallery__left-section">
      <div class="c-gallery__parent">
        <div class="swiper parentSwiper">
          <!-- カルーセルのプレビュー側 -->
          <div class="swiper-wrapper">
            <!-- 投稿画像の繰り返し処理 -->
            <?php while ( have_posts() ) : the_post(); ?>
              <div class="swiper-slide">
                <div class="c-gallery__list">
                  <img src="<?php echo get_field("news-image"); ?>" alt="テスト画像" class="c-gallery__list-img">
                </div>
                <div class="c-gallery__text-area">
                  <div class="c-gallery__date"><?php echo get_field("date"); ?></div>
                  <div class="c-gallery__title"><?php echo get_field("title"); ?></div>
                </div>
              </div>
            <?php endwhile; ?>
          </div>
        </div>
      </div>
      <!-- オリジナルページネーション -->
      <div class="c-gallery__index">
        <div class="c-gallery__line"></div>
        <div id="swiperIndexDisplay"></div>
        <div id="customDots"></div>
      </div>
    </div>
    <!-- サムネのカルーセル -->
    <div class="c-gallery__thm">
      <div class="swiper childSwiper">
        <div class="swiper-wrapper">
          <!-- 投稿画像の繰り返し処理 -->
          <?php rewind_posts(); ?>
          <?php while ( have_posts() ) : the_post(); ?>
            <div class="swiper-slide --child">
              <div class="c-gallery__child">
                <img src="<?php echo get_field("news-image"); ?>" alt="サムネ画像" class="c-gallery__child-img">
              </div>
            </div>
          <?php endwhile; ?>
        </div>
      </div>
    </div>
  </div>
</div>
```

```javascript title="JavaScript" showLineNumbers
const subCarousel = new Swiper(".childSwiper", {
  loop: true,
  slidesPerView: 5,
  freeMode: true,
  watchSlidesProgress: true,
  spaceBetween: 16,
})

const mainCarousel = new Swiper(".parentSwiper", {
  loop: true,
  spaceBetween: 10,
  thumbs: {
    swiper: subCarousel,
  },
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  effect: "fade",
  // ページネーションのカスタム
  pagination: {
    el: "#customDots",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '"></span>'
    },
  },
})
```

これでDevツールで確認してみると、

![DevToolsでrenderBulletにより生成されたページネーション要素を確認](/articles/image-1-3.webp)

このようにクラス名`swiper-pagination-bullet`で生成されています。
さらにactiveなものにはクラス名`swiper-pagination-bullet-active`が付与されています。

ここからスタイリングしていきます。

```css title="CSS" showLineNumbers
/* オリジナルdots */
.c-gallery__index {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 24px;
}

.c-gallery__line {
  width: 1px;
  height: 56px;
  background-color: #fff;
  margin-bottom: 4px;
}

#customDots {
  text-align: center;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  max-height: 180px;
  flex-wrap: wrap;
}

#customDots .swiper-pagination-bullet {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.6);
}

#customDots .swiper-pagination-bullet-active {
  background-color: #fff;
  position: relative;
}

#customDots .swiper-pagination-bullet-active::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 100vh;
  top: -50%;
  left: -50%;
}
```

次にページネーションに表示しているindex番号です。

`onChange`するたびに切り替えたいのでparameterの`on`を使用します。

```javascript title="JavaScript" showLineNumbers
const subCarousel = new Swiper(".childSwiper", {
  loop: true,
  slidesPerView: 5,
  freeMode: true,
  watchSlidesProgress: true,
  spaceBetween: 16,
})

const mainCarousel = new Swiper(".parentSwiper", {
  loop: true,
  spaceBetween: 10,
  thumbs: {
    swiper: subCarousel,
  },
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  effect: "fade",
  // ページネーションのカスタム
  pagination: {
    el: "#customDots",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '"></span>'
    },
  },
  // インデックス番号の表示,初期時またはonChange時にindex番号を渡す
  on: {
    init: function () {
      onChangeFunc(this.realIndex)
    },
    slideChange: function () {
      onChangeFunc(this.realIndex)
    },
  },
})

// onchangeで動く関数
function onChangeFunc(index) {
  // インデックス番号の表示,10以上になる場合の条件分岐している
  if (index < 9) {
    document.getElementById("swiperIndexDisplay").textContent = `0${index + 1}`
  } else {
    document.getElementById("swiperIndexDisplay").textContent = `${index + 1}`
  }
}
```

上記では、カルーセル画像が変わるたび、すなわち`onChange`したときに`onChangeFunc`関数が動作するようにしています。

`onChange`時の挙動を追加する際は、parameterの`on`を使用し、`init`メソッドと`slideChange`メソッドを使用します。`init`は初期表示時に、`slideChange`はスライド変更時にそれぞれ呼ばれます。
また`onChangeFunc`の引数にはカルーセルのindex番号`realIndex`を渡しています。

<Callout variant="memo">
  **`onChangeFunc`関数の引数で渡している`realIndex`について**
  Swiperのアクティブ状態のindex番号を扱う場合、`activeIndex`が使用されると思うのですが、parameterの`loop`がtrueの場合、一周回ったあとのindex番号が`loop`を読み取れず挙動がおかしくなるため、parameterの`loop`がtrueの場合は`realIndex`が使われます。
</Callout>

あとはCSSを追加します。

```css title="CSS" showLineNumbers
/* index番号のスタイル */
#swiperIndexDisplay {
  color: #fff;
  font-size: 14px;
  margin-bottom: 14px;
}
```

### 投稿のタイトルと日付の表示

あとは非表示にしている投稿のタイトルと日付をJavaScriptで表示します。

```php title="HTML" showLineNumbers
<div class="c-gallery">
  <div class="c-gallery__content">
    <div class="c-gallery__left-section">
      <div class="c-gallery__parent">
        <div class="swiper parentSwiper">
          <!-- カルーセルのプレビュー側 -->
          <div class="swiper-wrapper">
            <!-- 投稿画像の繰り返し処理 -->
            <?php $index = 1; while ( have_posts() ) : the_post(); ?>
              <div class="swiper-slide">
                <div class="c-gallery__list">
                  <img src="<?php echo get_field("news-image"); ?>" alt="テスト画像" class="c-gallery__list-img">
                </div>
                <!-- Swiperの処理にわたすテキスト -->
                <div class="c-gallery__text-area">
                  <div id="disabledDate<?php echo $index; ?>" class="c-gallery__date"><?php echo get_field("date"); ?></div>
                  <div id="disabledTitle<?php echo $index; ?>" class="c-gallery__title"><?php echo get_field("title"); ?></div>
                </div>
              </div>
            <?php $index++; endwhile; ?>
          </div>
        </div>
        <!-- 文字の表示 -->
        <div class="c-gallery__detail">
          <p id="displayDate" class="c-gallery__detail-day"></p>
          <p id="displayTitle" class="c-gallery__detail-main"></p>
        </div>
      </div>
      <!-- オリジナルページネーション -->
      <div class="c-gallery__index">
        <div class="c-gallery__line"></div>
        <div id="swiperIndexDisplay"></div>
        <div id="customDots"></div>
      </div>
    </div>
    <!-- サムネのカルーセル -->
    <div class="c-gallery__thm">
      <div class="swiper childSwiper">
        <div class="swiper-wrapper">
          <!-- 投稿画像の繰り返し処理 -->
          <?php rewind_posts(); ?>
          <?php while ( have_posts() ) : the_post(); ?>
            <div class="swiper-slide --child">
              <div class="c-gallery__child">
                <img src="<?php echo get_field("news-image"); ?>" alt="サムネ画像" class="c-gallery__child-img">
              </div>
            </div>
          <?php endwhile; ?>
        </div>
      </div>
    </div>
  </div>
</div>
```

さらに`While`文で繰り返し処理している投稿データのタイトルと日付に対して、一意にDOMを取得できるようにするために、index番号を付与します。これで準備完了です。

ここからは先程作成した`onChangeFunc`関数に処理を追加します。

```javascript title="JavaScript" showLineNumbers
// onchangeで動く関数
function onChangeFunc(index) {
  // インデックス番号の表示,10以上になる場合の条件分岐している
  if (index < 9) {
    document.getElementById("swiperIndexDisplay").textContent = `0${index + 1}`
  } else {
    document.getElementById("swiperIndexDisplay").textContent = `${index + 1}`
  }

  // loop内の投稿データの日付(id=disabledDate+index)から表示箇所(id=displayDate)へ代入
  document.getElementById("displayDate").textContent = document.getElementById(`disabledDate${index + 1}`).textContent

  // loop内の投稿データのタイトル(id=disabledTitle+index)から表示箇所(id=displayTitle)へ代入
  document.getElementById("displayTitle").textContent = document.getElementById(`disabledTitle${index + 1}`).textContent
}
```

`getElementById`で一意となった日付とタイトルを取得してから表示したい箇所へ代入しています。

最後にCSSを追加します。

```css title="CSS" showLineNumbers
/* 画像の補足文字のスタイリング */
.c-gallery__detail {
  color: #fff;
  margin-top: 24px;
  font-size: 14px;
  display: flex;
  height: 42px;
}

.c-gallery__detail-main {
  margin-left: 24px;
}
```

これですべて完了です。

## 最終的なコード

```php title="HTML" showLineNumbers
<div class="c-gallery">
  <div class="c-gallery__content">
    <div class="c-gallery__left-section">
      <div class="c-gallery__parent">
        <div class="swiper parentSwiper">
          <!-- カルーセルのプレビュー側 -->
          <div class="swiper-wrapper">
            <!-- 投稿画像の繰り返し処理 -->
            <?php $index = 1; while ( have_posts() ) : the_post(); ?>
              <div class="swiper-slide">
                <div class="c-gallery__list">
                  <img src="<?php echo get_field("news-image"); ?>" alt="テスト画像" class="c-gallery__list-img">
                </div>
                <!-- Swiperの処理にわたすテキスト -->
                <div class="c-gallery__text-area">
                  <div id="disabledDate<?php echo $index; ?>" class="c-gallery__date"><?php echo get_field("date"); ?></div>
                  <div id="disabledTitle<?php echo $index; ?>" class="c-gallery__title"><?php echo get_field("title"); ?></div>
                </div>
              </div>
            <?php $index++; endwhile; ?>
          </div>
        </div>
        <!-- 文字の表示 -->
        <div class="c-gallery__detail">
          <p id="displayDate" class="c-gallery__detail-day"></p>
          <p id="displayTitle" class="c-gallery__detail-main"></p>
        </div>
      </div>
      <!-- オリジナルページネーション -->
      <div class="c-gallery__index">
        <div class="c-gallery__line"></div>
        <div id="swiperIndexDisplay"></div>
        <div id="customDots"></div>
      </div>
    </div>
    <!-- サムネのカルーセル -->
    <div class="c-gallery__thm">
      <div class="swiper childSwiper">
        <div class="swiper-wrapper">
          <!-- 投稿画像の繰り返し処理 -->
          <?php rewind_posts(); ?>
          <?php while ( have_posts() ) : the_post(); ?>
            <div class="swiper-slide --child">
              <div class="c-gallery__child">
                <img src="<?php echo get_field("news-image"); ?>" alt="サムネ画像" class="c-gallery__child-img">
              </div>
            </div>
          <?php endwhile; ?>
        </div>
      </div>
    </div>
  </div>
</div>
```

```css title="CSS" showLineNumbers
.c-gallery {
  padding: 80px 16px 100px 16px;
  background-color: #333;
}

.c-gallery__content {
  display: flex;
  max-width: 1120px;
  justify-content: space-evenly;
  width: 100%;
  margin-top: 68px;
  margin: 68px auto 0;
  flex-wrap: wrap;
}

.c-gallery__left-section {
  display: flex;
}

.c-gallery__list {
  max-width: 380px;
  min-width: 380px;
  max-height: 220px;
  min-height: 220px;
  opacity: 1 !important;
}

.u-opacity {
  opacity: 1 !important;
}

.c-gallery__list-img {
  max-width: 380px;
  min-width: 380px;
  max-height: 220px;
  min-height: 220px;
  object-fit: cover;
  opacity: 1 !important;
}

.c-gallery__child {
  max-width: 117px;
  max-height: 100px;
  min-height: 100px;
  max-width: 117px;
}

.c-gallery__child-img {
  object-fit: cover;
  max-width: 117px;
  max-height: 100px;
  min-height: 100px;
  max-width: 117px;
}

.c-gallery__thm {
  width: 100%;
  max-width: 640px;
  position: relative;
  margin-top: 100px;
}

.c-gallery__parent {
  max-width: 380px;
  position: relative;
}

.c-gallery__parent::before {
  content: "";
  max-width: 380px;
  width: 100%;
  height: 220px;
  border: #fff solid 1px;
  position: absolute;
  top: 8px;
  right: -8px;
}

.c-gallery__text {
  top: 10px;
  position: relative;
  color: #fff;
  z-index: 10;
}

.c-gallery__text-area {
  display: none;
}

/* オリジナルdots */
.c-gallery__index {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 24px;
}

.c-gallery__line {
  width: 1px;
  height: 56px;
  background-color: #fff;
  margin-bottom: 4px;
}

#customDots {
  text-align: center;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  max-height: 180px;
  flex-wrap: wrap;
}

#customDots .swiper-pagination-bullet {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.6);
}

#customDots .swiper-pagination-bullet-active {
  background-color: #fff;
  position: relative;
}

#customDots .swiper-pagination-bullet-active::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 100vh;
  top: -50%;
  left: -50%;
}

/* index番号のスタイル */
#swiperIndexDisplay {
  color: #fff;
  font-size: 14px;
  margin-bottom: 14px;
}

/* 画像の補足文字のスタイリング */
.c-gallery__detail {
  color: #fff;
  margin-top: 24px;
  font-size: 14px;
  display: flex;
  height: 42px;
}

.c-gallery__detail-main {
  margin-left: 24px;
}

/* すべてのスライドの基本スタイル */
.swiper-slide.--child {
  opacity: 0.5; /* 非アクティブなスライドは薄く表示 */
  transition: opacity 0.3s;
}

/* アクティブなスライドのスタイル */
.swiper-slide.--child.swiper-slide-thumb-active {
  opacity: 1; /* アクティブなスライドは通常の不透明度 */
}
```

```javascript title="JavaScript" showLineNumbers
const subCarousel = new Swiper(".childSwiper", {
  loop: true,
  slidesPerView: 5,
  freeMode: true,
  watchSlidesProgress: true,
  spaceBetween: 16,
})

const mainCarousel = new Swiper(".parentSwiper", {
  loop: true,
  spaceBetween: 10,
  thumbs: {
    swiper: subCarousel,
  },
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  effect: "fade",
  // ページネーションのカスタム
  pagination: {
    el: "#customDots",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '"></span>'
    },
  },
  // インデックス番号の表示,初期時またはonChange時にindex番号を渡す
  on: {
    init: function () {
      onChangeFunc(this.realIndex)
    },
    slideChange: function () {
      onChangeFunc(this.realIndex)
    },
  },
})

// onchangeで動く関数
function onChangeFunc(index) {
  // インデックス番号の表示,10以上になる場合の条件分岐している
  if (index < 9) {
    document.getElementById("swiperIndexDisplay").textContent = `0${index + 1}`
  } else {
    document.getElementById("swiperIndexDisplay").textContent = `${index + 1}`
  }

  // loop内の投稿データの日付(id=disabledDate+index)から表示箇所(id=displayDate)へ代入
  document.getElementById("displayDate").textContent = document.getElementById(`disabledDate${index + 1}`).textContent

  // loop内の投稿データのタイトル(id=disabledTitle+index)から表示箇所(id=displayTitle)へ代入
  document.getElementById("displayTitle").textContent = document.getElementById(`disabledTitle${index + 1}`).textContent
}
```

## さいごに

いかがだったでしょうか、Swiperは様々なParameterやMethodが用意されているので柔軟に実装できるかなと思います。
また、オリジナルのページネーションを作れるようになると見栄えも良くなり、差別化を図れそうです。
Swiperを使いこなしてオリジナルのカルーセルを作ってみてください！


---

## 【Next.js】Pages RouterからApp Routerへの移行手順

- URL: https://blog.to-ko-s.com/articles/nextjs-pages-router-to-app-router
- 著者: 西原月熙
- 公開日: 2024-01-19
- タグ: React, Next.js

> Next.jsにおける、Pages RouterからApp Routerへの移行手順を完結に記述しました。つまずきそうなポイントに関しては、特に丁寧に解説しています。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回はNext.jsの最新機能である「App Router」への「Pages Router」から移行する方法について簡単に説明します！
これからApp Routerに移行するという方もまだまだたくさん居るかと思いますので、ぜひ参考にしてください💪

## 対象読者

- Pages RouterからApp Routerに移行をしたい方
- App RouterのサーバーコンポーネントやLayoutについてある程度理解している方

<Callout>
この記事では、App Routerについての解説はあまり記載していません。

概要については [こちらの記事](https://zenn.dev/yamadadayo123/articles/6cb4f586de0183) が分かりやすいので、App Routerについて知りたい方は参考にしてみてください。

</Callout>

## App Router化について

### メリット

個人的なメリットは、layoutをはじめとした、命名規則等のルールに沿うだけで様々な恩恵を享受できることです！

Pages Routerの際は、レイアウトを出し分けるだけでも一苦労だったのが、App Routerの場合は`layout.tsx`を配置するだけで良くなります✨
また、Suspenseでロード中の画面を表示したい時も`loading.tsx`を配置するだけです✨

他にはもちろん、サーバーコンポーネントにすることで、最終的な転送量が減るといったものや、Server Actionを用いてサーバー側の関数をシームレスに記述できるといったメリットがあります！
書き出すとキリが無いので、詳しくは公式のドキュメントをご確認ください。

<ExternalLink url="https://nextjs.org/docs" />

### Pages Routerからの移行は簡単？

結論、そこまで難しくは無いです！
`pages/`と`app/`は共存できるので、ページ単位で逐次的に移行を進めることができます💪
そして、その手順の概要を今回説明します😎

## App Router化する前に

先に1つだけ確認・変更しておいた方が良いことがあります！
それは**スタイリングの方法**です！

Next.jsは、様々なスタイリングの方法があります！
(S)CSS Modules, styled jsx, styled-components, emotion, Tailwind CSS等から、UI系のChakra UI, MUI, Ant design, Mantine, Panda CSS, Kuma UIなどなど、かなり多岐に渡ります🙄
これらの中で、「サーバーコンポーネントに対応していない」ソリューションがあります😔
なので、もしそのソリューションを使っている場合は他のソリューションに変更する必要があります💦

「サーバーコンポーネントに対応」しているかをどのように調べるかは、"ゼロランタイム"かどうかを調べればOKです！
"ゼロランタイム" とは、超カンタンに説明するとスタイルをJS等で動的に変更させないことです。コンパイル時にスタイル(クラス)が確定している感じです！　(もちろん、 三項演算子等でclassを出し分けることはできます👍)
また、「〇〇 App Router」等でググれば出てくるはずです！

具体的には、Tailwind CSSやPanda CSS, vanilla-extract等はゼロランタイムなのでApp Routerでも使用できます💪
詳しくはぜひ調べて見てください！

## App Router化する手順

それでは早速移行手順について説明します！
今回はTypeScript・Tailwind CSS・Mantine・Recoilを使用しているので、JavaScriptや他のスタイリングソリューションを使っている方は適宜読み替えてください🙇‍♂️

### app/layout.tsx の作成

基本的には、`_app.tsx`と`_document.tsx`の内容をそのままゴソッと移植するだけになります！

```tsx title="src/pages/_document.tsx" showLineNumbers
import { ColorSchemeScript } from "@mantine/core"
import Document, { Html, Head, Main, NextScript } from "next/document"
export default class _Document extends Document {
  render() {
    return (
      <html lang="ja">
        <head>
          <ColorSchemeScript defaultColorScheme="auto" />
        </head>
        <body>
          <main />
          <NextScript />
        </body>
      </html>
    )
  }
}
```

```tsx title="src/app/_app.tsx" showLineNumbers
import "@/styles/globals.css"
import "@mantine/core/styles.css"
import "@mantine/dates/styles.css"

import { MantineProvider, createTheme } from "@mantine/core"
import { RecoilRoot } from "recoil"

const theme = createTheme({
  fontFamily: "Noto Sans JP",
  fontFamilyMonospace: "Noto Sans JP",
  headings: { fontFamily: "Noto Sans JP" },
})

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>サイトタイトル</title>
        <meta name="description" content="テストサイト" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <MantineProvider theme={theme}>
        <RecoilRoot>
          <Component {...pageProps} />
        </RecoilRoot>
      </MantineProvider>
    </>
  )
}
```

`_app.tsx`と`_document.tsx`が上記のような場合、

```tsx title="src/app/layout.tsx" showLineNumbers
import "@/styles/globals.css"
import "@mantine/core/styles.css"
import "@mantine/dates/styles.css"

import { MantineProvider, createTheme } from "@mantine/core"

const theme = createTheme({
  fontFamily: "Noto Sans JP",
  fontFamilyMonospace: "Noto Sans JP",
  headings: { fontFamily: "Noto Sans JP" },
})

export const metadata: Metadata = {
  title: "サイトタイトル",
  description: "テストサイト",
}

const RootLayout = ({ children }: { children: React.ReactNode }) => (
  <html lang="ja">
    <head>
      <ColorSchemeScript defaultColorScheme="auto" />
    </head>
    <body className={`${notoSansJp.className}`}>
      <MantineProvider theme={theme}>
        <RecoilProvider>{children}</RecoilProvider>
      </MantineProvider>
    </body>
  </html>
)
export default RootLayout
```

上記のように移植するだけです✨
`export const metadata`については、metaタグに関する書き方がこのような方法になったので変更しています！

ですが、グローバルステートのProviderとなるコンポーネントをそのまま移植するとエラーになってしまいます🧐 (今回で言う`<RecoilRoot>` )
なぜなら、状態管理ライブラリ系は基本的にクライアントコンポーネントでしか動作しないからです。
とは言え、じゃあ`layout.tsx`に`"use client"`をつけてしまうと、全てのコンポーネントがクライアントコンポーネントになってしまい、App Routerのメリットが低減されてしまいます。。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  親コンポーネントに`"use
  client"`が付いている場合、子コンポーネントはすべてクライアントコンポーネントになってしまうからだね！
</SpeechBubble>

そこで、「Composition」を使います！
ちょっと難しく言いましたが、要は`children`を使うだけです！
以下に`RecoilProvider`を記載します。

```tsx title="src/app/layout.tsx" showLineNumbers
"use client"

import { FC, ReactNode, memo } from "react"
import { RecoilRoot } from "recoil"

type Props = {
  children: ReactNode
}

export const RecoilProvider: FC<Props> = memo((props) => {
  const { children } = props

  return <RecoilRoot>{children}</RecoilRoot>
})
```

上記のコンポーネントを作った上で、先程の例のように呼び出してあげればエラーが出ずに表示されるかと思います！

基本的には、`"use client"`の記述があるコンポーネントから呼び出されるコンポーネントは**全て**クライアントコンポーネントになります。
ですがこのように、クライアントコンポーネントから`children`としてサーバーコンポーネントを渡すことで「クライアントコンポーネント > サーバーコンポーネント」という呼び出しが可能になるのです💪

### pages/ 配下のファイルを1ページ分移植する

大枠の設定は完了したので各ページの移行に移ります！

小さく変更をしていきたいので、まずは`"use client"`をページにつけてパスを`app/`配下にずらした上で、ファイル名をApp Routerのルールに則り`page.tsx`に変えます！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `localhost:3000/users`というURLを実現したい場合は、`/app/users/page.tsx`というファイルを作成すれば実装できるね！
</SpeechBubble>

`pages/`配下と`app/`配下でURLが競合しているとエラーになるので、`pages/`配下の同じファイルを削除後に`$ npm run dev`をし直すと上手くいくと思います！

その後、まだエラーが出る場合には局所的に変更を加えていきます！
大きな違いとしては、`useRouter`になるかと思います！
Pages Routerの`useRouter`は`next/router`からimportしていたのですが、App Routerの`useRouter`は`next/navigation`から呼び出す必要があります。
さらに、Pages Routerでできていた機能がApp Routerでは4つに別れました。下記で説明します！

#### useRouter

`const router = useRouter()`

これは一番想像がつくものです！
`router.push`や`router.refresh`はこのuseRouterから行います！

#### usePathname

`const pathname = usePathname()`

これは、現在のパスを取得したりする時に使います！
例えば、自分が今いるURLが`localhost:3000/users`の場合、`pathname`の中身は`"/users"`になります！

#### useParams

`const params = useParams()`

これは、URL内の動的な値を取得するのに使います！
例えば、自分が今いるURLが`localhost:3000/users/111`の場合、`params.id`とすることで`"111"`が取得できます！

#### useSearchParams

`const searchParams = useSearchParams()`

これは、クエリパラメータを取得するのに使います！
例えば、自分が今いるURLが`localhost:3000/users?page=1&limit=100`の場合、`searchParams.get("page")`とすることで`"1"`が取得できます！

`useRouter`についての説明はざっくり以上となります！
他にもこまごまと変える部分はありますが、大きく変わる箇所はこの`useRouter`になると思うので気をつけてみてください。

<Callout variant="info">
  getServerSidePropsや、getStaticPropsについては本記事では解説していません🙇‍♂️
  一旦クライアント側でのデータフェッチを許容するか、最初からサーバーコンポーネントでの運用をすることで移植は可能です。ぜひチャレンジしてみてください。
</Callout>

### `pages/`配下のページファイルをすべて移植

1ページ分の移行が完了したら、あとはそれに沿って他のページもガンガン移行するだけです！
ここは気合いを入れて頑張りましょう🤣

### `pages/`配下をすべて削除

全てのページの移植が完了したら、残りの`_app.tsx`や`_document.tsx`をはじめとした、残りのファイル群を削除します！
最終的に`/pages`というディレクトリを削除して、一旦の移行は完了になります！！

<Callout variant="info">
404や500ページ用のファイルについては、本記事では解説していません🙇‍♂️
気になる方は[公式](https://nextjs.org/docs/app/api-reference/file-conventions)のerror.jsやnot-found.jsのページを確認しなら移行をしてみてください。

</Callout>

### page.tsxをサーバーコンポーネントに変更する

ただ、このままでは`layout.tsx`の作成の際にもお話したとおり、`page.tsx`に`"use client"`が記述されていることで、配下の全てのコンポーネントがクライアントコンポーネントになってしまいます。
ここからは、「各`page.tsx`の`"use client"`の記述を外してブラウザでチェック → エラーが出たら対応」を根気強く行っていくことになるかと思います。
また、クライアントコンポーネントで作成する必要がある箇所(ex. `onClick`がある箇所) を別途で適宜コンポーネント作成して、サーバーコンポーネントの領域を広げるようにしていくと、よりパフォーマンスの向上等が見込めます✨

### さらにその先へ

ここまででもかなりイカしたApp Routerのアプリケーションになったかと思います！!
さらにUX等にこだわりたい方は、`loading.tsx`を各`page.tsx`と同じパスに配置してデータを`fetch`中の画面をリッチにしてみるのも良いかもしれません😎

また、API Routesを使用しているプロジェクトの場合は、思い切ってServer Actionに移行して記述量をグッと減らすようにするのも良いかもしれません。

本記事に記載したこと以外にもまだまだ改善の余地があるので、ぜひご自身で試行錯誤してみてください！
需要があれば、上記等の各変更の詳細な説明の記事も執筆します💪

## 終わりに

今回は、Pages RouterからApp Routerへの移行方法のざっくりとした進め方を説明しました！

最後にはなりますが、公式のマイグレーションガイドがかなり分かりやすく解説しているので、こちらもぜひチェックしてください🙏

<ExternalLink url="https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration" />


---

## 【CSS】和風のあしらい一覧

- URL: https://blog.to-ko-s.com/articles/css-japanese-ashirai
- 著者: 寺田拓真
- 公開日: 2023-12-23
- タグ: HTML, CSS

> 和風サイトに使えるCSSのあしらいをまとめました。線・二重丸・青海波・ひし形・梅の花など、コピペで使える装飾を紹介します


## はじめに

### この記事の概要

みなさん、こんにちは！
サイトのデザインやコーディングを行う上で、あしらいに悩むことはありませんか？

文字や余白、レイアウトなどである程度のデザインを作ることはできるけど、
それだけだと何か物足りない感がある、、

そんなときには、ちょっとしたあしらいが便利ですよね！
ただ、サイトの雰囲気にあったあしらいが分からない、、ということは多いかと思います！

そこで、今回は使えそうなあしらいを紹介します！
この記事では特に和風テイストに合ったものを紹介するので、
和風サイトや上品なサイトを制作される方はぜひ御覧ください！

### 対象読者

- CSS初学者の方
- あしらいにお悩みの方
- 和風テイストのサイトを制作されている方

## 線を使う

線を使ったあしらいは、容易にコーディングが可能でありながら、洗練された印象を与えるため重宝します。
見出しにも使えるし、線単体でも使うことができるので、ぜひお試しください。

### テキストの両端に線をつける

完成形はこちらです。

![テキストの両端に横線を配置した和風の見出しデザイン](/articles/ScreenShot-2023-12-23-11.58.15-1024x197.webp)

コードは以下になります。

```html title="HTML" showLineNumbers
<h2 class="heading">あしらい</h2>
```

```scss title="SCSS" showLineNumbers
.heading {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #000;
  &::before,
  &::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #000;
  }
  &::before {
    margin-right: 1rem;
  }
  &::after {
    margin-left: 1rem;
  }
}
```

ポイントは、`flex-grow: 1`と設定することで横線を幅いっぱいにまで広げることができます。
線を短くしたい場合は、`flex-grow: 0.2`など数字を小さくすることで可能です。

### テキストの右端（左端）に線をつける

完成形はこちらです。

![テキストの右端に横線を配置した和風の見出しデザイン](/articles/ScreenShot-2023-12-23-12.13.21.webp)

上記の両端に線をつける見出しと同じ要領で作っていきます。

コードは以下になります。

```html title="HTML" showLineNumbers
<h2 class="heading">あしらい</h2>
```

```scss title="SCSS" showLineNumbers
.heading {
  display: flex;
  align-items: center;
  &::after {
    border-top: 1px solid;
    content: "";
    flex-grow: 1;
    display: block;
    height: 1px;
    margin-left: 1rem;
  }
}
```

`margin-left`を`margin-right`に変えることで、左端に線をつけることも可能です。

## ◯を使う

◯はやわらかい雰囲気になりがちですが、少し工夫することで和風の雰囲気に合ったあしらいを作ることができます。

### 二重丸の中にテキストを入れる

完成形はこちらです。

![CSSで作成した二重丸の中にテキストを入れたあしらい](/articles/image-11.webp)

ポイントは内側の丸の幅を外側よりも太くすることです。

コードは以下になります。

```html title="HTML" showLineNumbers
<div class="c-double-circle">
  <p class="c-double-circle__text">あしらい</p>
</div>
```

```css title="CSS" showLineNumbers
.c-double-circle {
  width: 70px;
  height: 70px;
  position: relative;
  border: solid #000 1px;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 8px auto 0;
}

.c-double-circle::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: solid #000 1.5px;
  border-radius: 50%;
  box-sizing: border-box;
}

.c-double-circle__text {
  font-size: 12px;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
```

疑似要素で内側の丸を作っています。

## 青海波を使う

青海波（せいがいは）は名前は知らなくても見たことは多いかと思います。
見出しにワンポイントで付けるのもいいですし、ループさせて大胆に背景にするのもいいかもしれません。

![CSSのradial-gradientで描画した青海波（せいがいは）模様](/articles/image-2-3.webp)

```html title="HTML" showLineNumbers
<div class="seigaiha"></div>
```

```css title="CSS" showLineNumbers
.seigaiha {
  width: 300px;
  height: 300px;
  background-color: #c44e37;
  background-image:
    radial-gradient(
      circle at 100% 150%,
      #c44e37 24%,
      #fff 24%,
      #fff 28%,
      #c44e37 28%,
      #c44e37 36%,
      #fff 36%,
      #fff 40%,
      transparent 40%,
      transparent
    ),
    radial-gradient(
      circle at 0 150%,
      #c44e37 24%,
      #fff 24%,
      #fff 28%,
      #c44e37 28%,
      #c44e37 36%,
      #fff 36%,
      #fff 40%,
      transparent 40%,
      transparent
    ),
    radial-gradient(
      circle at 50% 100%,
      #fff 10%,
      #c44e37 10%,
      #c44e37 23%,
      #fff 23%,
      #fff 30%,
      #c44e37 30%,
      #c44e37 43%,
      #fff 43%,
      #fff 50%,
      #c44e37 50%,
      #c44e37 63%,
      #fff 63%,
      #fff 71%,
      transparent 71%,
      transparent
    ),
    radial-gradient(
      circle at 100% 50%,
      #fff 5%,
      #c44e37 5%,
      #c44e37 15%,
      #fff 15%,
      #fff 20%,
      #c44e37 20%,
      #c44e37 29%,
      #fff 29%,
      #fff 34%,
      #c44e37 34%,
      #c44e37 44%,
      #fff 44%,
      #fff 49%,
      transparent 49%,
      transparent
    ),
    radial-gradient(
      circle at 0 50%,
      #fff 5%,
      #c44e37 5%,
      #c44e37 15%,
      #fff 15%,
      #fff 20%,
      #c44e37 20%,
      #c44e37 29%,
      #fff 29%,
      #fff 34%,
      #c44e37 34%,
      #c44e37 44%,
      #fff 44%,
      #fff 49%,
      transparent 49%,
      transparent
    );
  background-size: 50px 25px;
}
```

## ひし形を使う

ひし形も見出しに使ったり、ループさせたりでき、かなり使用の幅のあるあしらいです。

![CSSのtransform: rotateで作成したひし形のあしらい](/articles/image-3-2.webp)

```html title="HTML" showLineNumbers
<div class="hishigata"></div>
```

```css title="CSS" showLineNumbers
.hishigata {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: "Noto Serif JP", serif !important;
  font-weight: bold;
  margin: 1em auto;
}
.hishigata:before {
  content: " ";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #ccc;
  transform: rotate(45deg);
  margin-bottom: 0.3em;
}
```

## 梅の花を使う

これぞ和風といったあしらいです。
見出しやワンポイントで使うことをおすすめします。

![CSSのradial-gradientで描画したピンク色の梅の花](/articles/image-4-2.webp)

```html title="HTML" showLineNumbers
<div class="ume"></div>
```

```css title="CSS" showLineNumbers
.ume {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image:
    radial-gradient(#e7556a 25%, transparent 0), radial-gradient(#e7556a 25%, transparent 0),
    radial-gradient(#e7556a 25%, transparent 0), radial-gradient(#e7556a 25%, transparent 0),
    radial-gradient(#e7556a 25%, transparent 0);
  background-position:
    50% 0,
    5% 40%,
    95% 40%,
    23% 95%,
    78% 95%;
  background-size: 30px 30px;
  background-repeat: no-repeat;
}
```

## 梅の花を使う 別パターン

和菓子でよく見かけるような梅の花もCSSで作成可能です。

![和菓子風の輪郭線で描かれた梅の花の別パターン](/articles/image-5-2.webp)

```html title="HTML" showLineNumbers
<div class="ume"></div>
```

```css title="CSS" showLineNumbers
.ume {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image:
    radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px)),
    radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px)),
    radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px)),
    radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px)),
    radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px));
  background-position:
    50% 0,
    5% 40%,
    95% 40%,
    23% 95%,
    78% 95%;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  margin-bottom: 5px;
}
```

## おわりに

今回は、和風のあしらいについて紹介しました！
コードはどれもコピペで実装できると思いますので、ぜひ和風のあしらいでお悩みの際はご使用ください。


---

## Prismaでのスキーマの様々な記述方法解説！

- URL: https://blog.to-ko-s.com/articles/prisma-schema
- 著者: 西原月熙
- 公開日: 2023-12-17
- タグ: JavaScript, React

> PrismaのSchema（スキーマ）ファイルの記述方法を解説。モデル定義、リレーション（1対1・1対多・多対多）、enum、マッピングなど、実践的な記述パターンを紹介します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回はJavaScriptでサーバーサイドのデータベース操作を行う際に使うPrismaというライブラリについて、特にschema(スキーマ)の記述について解説します！

### Prismaの概要

まずは、Prismaについて簡単に説明します！

PrismaはDB(データベース)の操作に必要な実装を1つのライブラリで全てできるような、かなりいい感じのJavaScriptのライブラリです！
具体的には、ざっくり「マイグレーション」「クエリビルダー」「GUIツール」の3つの機能を提供してくれます！

#### マイグレーション (Prisma Migrate)

データベースのスキーマ変更を管理するためのツールです！
マイグレーションファイルを使って、データベーススキーマの変更を追跡し、バージョン管理をすることが可能です。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  Railsで言うところの、マイグレーションファイル + `rails db:migrate`だね！
</SpeechBubble>

#### クエリビルダー (Prisma Client)

メインとなる機能で、直感的な記述方法でDBからデータを取得するものです！
(Railsで例えると`ActiveRecord`に相当します)

#### GUIツール (Prisma Studio)

データベースの内容を視覚的に閲覧し、編集できるGUIツールです。
データベースの管理(編集)やデバッグが簡単に可能となります！

### スキーマとは？

スキーマについても少し説明します！
簡単に言うと、「DBの構造を定義したファイル」です😎
このファイルを見ることで、人間はDBの内容を簡単に把握できるし、プログラミング言語側はDBに実際にデータ構造を設定できます✨

## 今回試すテーブル

それでは、今回定義するテーブル群を説明します！
今回は簡単な投稿サービスと定義します！
また、「型」に関してはMySQLという前提で説明します。

#### usersテーブル

| カラム名 | 型                  | 説明           |
| -------- | ------------------- | -------------- |
| id       | bigint              | 主キー         |
| name     | varchar             | ユーザー名     |
| email    | varchar             | メールアドレス |
| age      | integer, Allow NULL | 年齢           |

ユーザーのテーブル

#### postsテーブル

| カラム名 | 型      | 説明                          |
| -------- | ------- | ----------------------------- |
| id       | bigint  | 主キー                        |
| user_id  | bigint  | usersテーブルに対する外部キー |
| title    | varchar | 投稿タイトル                  |
| body     | text    | 投稿本文                      |

ユーザーの投稿テーブル

#### tagsテーブル

| カラム名 | 型      | 説明   |
| -------- | ------- | ------ |
| id       | bigint  | 主キー |
| name     | varchar | タグ名 |

投稿(posts)に対して付与できるタグのテーブル

#### posts_tagsテーブル

| カラム名 | 型     | 説明                          |
| -------- | ------ | ----------------------------- |
| id       | bigint | 主キー                        |
| post_id  | bigint | postsテーブルに対する外部キー |
| tag_id   | bigint | tagsテーブルに対する外部キー  |

postsテーブルとtagsテーブルは「多対多」であるため、その中間テーブル

上記の4つテーブルを定義したスキーマを定義していきます！！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  今回は「多対多」等の説明は省きます🙏
</SpeechBubble>

## schemaの記述

早速、定義ファイルを記述していきます！
まずは、下記コマンドを実行してください。 (必要なライブラリの`prisma`、`@prisma/client`はインストール済みという前提です🙏)

```bash title="ターミナル"
$ npx prisma init
```

これで、`./prisma/schema.prisma`というファイルができているはずです。

それでは、`schema.prisma`の内容を記載していきます！
(データベースサービスとの接続については割愛します🙇‍♂️)

```prisma title="schema.prisma" showLineNumbers
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

model User {
  id            Int      @id @default(autoincrement())
  name          String
  email         String   @unique
  age           Int?

  posts         Post[]

  @@map("users")
}

model Post {
  id            Int      @id @default(autoincrement())
  userId        Int      @map("user_id")
  title         String
  body          String   @db.Text

  user          User @relation(fields: [userId], references: [id], onDelete: Cascade)
  tags          Tag[]

  @@index([userId])
  @@map("posts")
}

model Tag {
  id            Int      @id @default(autoincrement())
  name          String

  posts         Post[]
}
```

上記の記述をすることで、先程のテーブル群を作成できます！！
それでは次章から解説します！

## 解説

### 全体の設定

```prisma title="schema.prisma (4-12行目)"
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}
```

この部分は、使用するRDBMS等に合わせて書き換えます！
今回自分は「PlanetScale」というサービスを使うので、このような記述にしました！

### usersテーブル

#### テーブルの定義

```prisma title="schema.prisma (13-23行目)"
model User {
  //...
}
```

このような記述で、各テーブルの宣言を行います！

#### `id`カラム

```prisma title="schema.prisma (15行目)"
  id            Int      @id @default(autoincrement())
```

基本は1つ目にカラム名、2つ目に型、3つ目の塊にその他設定を記載します！

ここでは、「idというカラム名で、Int型で、主キーで(オートインクリメントして)」という意味です！
この記述で、1から始まってオートインクリメントされる主キーの`id`カラムを登録できます！

#### `name`カラム

```prisma title="schema.prisma (16行目)"
  name          String
```

これはシンプルに`name`というVARCHAR型のカラムを定義という意味になります！

#### `email`カラム

```prisma title="schema.prisma (17行目)"
  email         String   @unique
```

こちらは、`name`カラムに`@unique`というものが追加されています。

`@unique`は、そのカラムの値を一意にするという意味になります！
メールアドレスは同じものは使ってほしく無いのでこのような制約が必要ですね👍

#### `age`カラム

```prisma title="schema.prisma (18行目)"
  age           Int?
```

こちらは、「integer型で、NULLも許可する」という意味です！
NULLを許可するなら`?`を追加するだけでOKです😎

#### 「postsテーブルを複数持つ」という宣言

```prisma title="schema.prisma (20行目)"
  posts         Post[]
```

これは、`posts`テーブルを多数持つという意味で、Prisma Clientの使用時に`users`と`posts`を上手く取得できるようにするための設定です！

#### 実テーブル名の変更

```prisma title="schema.prisma (22行目)"
  @@map("users")
```

このように記述することで、JavaScript側から扱う時は`User`、実DBのテーブル名は`users`にできます！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  テーブル名は基本的にスネークケースが良いので、`@@map`の記述はした方がいいかも！
</SpeechBubble>

#### postsテーブル

ここからはまだ説明していない部分について解説します！

#### 実カラム名の変更

```prisma title="schema.prisma (27行目)"
  userId        Int      @map("user_id")
```

このように記述することで、JavaScript側から扱う時は`userId`、実カラム名は`user_id`とできます！

#### `body`カラム

```prisma title="schema.prisma (29行目)"
  body          String   @db.Text
```

`@db.Text`と記述することで、VARCHARではなくTEXT型として登録できます！
(VARCHARは最大文字数が255文字なので、それ以上の文字数を扱いたい場合はこの設定をします)

#### リレーションの設定

```prisma title="schema.prisma (31行目)"
  user          User @relation(fields: [userId], references: [id], onDelete: Cascade)
```

`@relation`の記述をすることで、他のテーブルに対してのリレーションを設定できます！

`fields`: どのカラムを外部キーとするか

`references`: 親テーブルのどのカラムを見るか

`onDelete`: 親テーブルが削除された時にどのような挙動をさせるか
→ `Cascade`の場合、親のレコードが削除された場合は子のレコードも削除される

#### インデックスの設定

```prisma title="schema.prisma (34行目)"
  @@index([userId])
```

これで、`userId`カラムに対してインデックスを設定できます！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  インデックスについてよく分からない人は、一旦外部キーには上記のようにしてインデックスを設定するようにしておこう！
</SpeechBubble>

### tagsテーブル

tagsテーブルについては、今まで説明したものの組み合わせで記述可能なので、割愛します。

### posts_tagsテーブル

最後に、postsテーブルとtagsテーブルを多対多にするための中間テーブルを作成します！
...なのですが、実は中間テーブルは`model`のような定義をしなくても自動で作成されます！

```prisma
model Post {
  // ....
  tags          Tag[]
}

model Tag {
  // ....
  posts         Post[]
}
```

ポイントは上記の設定箇所です！
このように、お互いがお互いを複数持つように設定をすることで、Prisma側が自動で中間テーブルを設定してくれるのです✨

## コマンド

schemaファイルの記述が完了したら、

```bash title="ターミナル"
$ npx prisma db push
```

上記コマンドを打つことでDBへの反映が完了します！
DBのテーブルを確認すると、意図したテーブル群ができているはずです💪

## おわりに

今回は、Prismaの中でもschemaに焦点を当てて解説をしました！
この記事だけでは網羅できていないので、詳しくは公式サイトを参考にしてみてください🙏

<ExternalLink url="https://www.prisma.io/docs/orm/reference/prisma-schema-reference#mysql" />


---

## YouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む

- URL: https://blog.to-ko-s.com/articles/background-youtube-video
- 著者: 成岡拓哉
- 公開日: 2023-12-10
- タグ: HTML, CSS, JavaScript

> サイトのメインビジュアルにYoutubeの動画を埋め込みたい方に向けて、IFrame Player APIを用いて簡単に埋め込む方法をご紹介しています。


## はじめに

### この記事の概要

こんにちは！株式会社TOKOSのエンジニアのタクヤです！
今回はYouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む方法をご紹介します！

YouTubeにアップロードされている動画をWebサイトのメインビジュアルにする際に、そのままiframeで埋め込んでしまうと動画の再生ボタンやYouTubeチャンネルのアイコンなどが表示されてしまいます。
それだとWebサイトのメインビジュアルに使うには少し心許ないですね。

そんな時のためにWebサイトのメインビジュアルに良い感じにYouTubeの動画を埋め込む方法をご紹介します！
簡単なのでぜひ使ってみてください！

### 対象読者

- Webサイトに動画を埋め込みたい方
- WebサイトのメインビジュアルにYouTubeの動画を埋め込みたい方

## 実装方法

YouTubeのIFrame Player APIを使用してYouTubeの動画を埋め込みます。

### IFrame Player APIとは

IFrame Player APIは、YouTubeなどの動画プラットフォームが提供するAPIの一種です。具体的には、YouTubeの埋め込みプレーヤー（Embedded Player）を制御するためのAPIです。このAPIを使用することで、ウェブページ上にYouTubeの動画を埋め込み、再生、一時停止、音量調整などの操作を制御できます。

IFrame Player APIは、通常、JavaScriptを使用して実装されます。以下は、簡単な例です。この例では、YouTubeの埋め込みプレーヤーを作成し、ページ読み込み時に自動で再生を開始する方法を示しています。

```html title="HTML" showLineNumbers
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>YouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="c-mv">
      <div class="c-mv__container">
        <h1 class="c-mv__title">Compfire By The River</h1>
      </div>
      <div id="youtube" class="c-mv__video"></div>
      <div class="c-mv__mask"></div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
```

```css title="CSS" showLineNumbers
.c-mv {
  aspect-ratio: 16/9;
  height: auto;
  position: relative;
  width: 100%;
}

.c-mv__container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 40px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.c-mv__title {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.c-mv__video {
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: hidden;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

.c-mv__mask {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
  width: 100%;
  z-index: 2;
}
```

```javascript title="JavaScript" showLineNumbers
var tag = document.createElement("script")
tag.src = "https://www.youtube.com/iframe_api"
var firstScriptTag = document.getElementsByTagName("script")[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)

let player
function onYouTubeIframeAPIReady() {
  player = new YT.Player("youtube", {
    // youtubeの箇所はHTMLのid
    videoId: "Ftm2uv7-Ybw", // YouTubeの動画のID
    playerVars: {
      playsinline: 1, // インライン再生
      autoplay: 1, // 自動再生
      fs: 0, // 全画面表示ボタン
      rel: 0, // 関連動画
      controls: 0, // コントロール
      iv_load_policy: 3, // 注釈を非表示
    },
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange,
    },
  })
}

// ミュートで再生
function onPlayerReady(event) {
  event.target.mute()
  event.target.playVideo()
}

// 最後まで再生した後のループ再生
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    event.target.playVideo()
  }
}
```

### コード全体について解説

HTMLはシンプルです。

- テキスト要素
- YouTubeのiframeが入る要素
- YouTubeのiframeをマスクする要素

```html title="HTML" showLineNumbers
<div class="c-mv">
  <div class="c-mv__container">
    <!-- テキスト要素 -->
    <h1 class="c-mv__title">Compfire By The River</h1>
  </div>
  <!-- YouTubeのiframeが入る要素 -->
  <div id="youtube" class="c-mv__video"></div>
  <!-- YouTubeのiframeをマスクする要素 -->
  <div class="c-mv__mask"></div>
</div>
```

CSSは画面の横幅いっぱいに要素の大きさを設定し、YouTubeの動画に合わせてアスペクト比を設定しています。
また、YouTubeのiframeの上に来るマスク要素を用意することでiframeをユーザーが直接触れられないようにしています。

```css title="CSS" showLineNumbers
.c-mv {
  /* 省略 */
  aspect-ratio: 16/9; /* Youtubeの動画のアスペクト比 */
}

.c-mv__container {
  /* 省略 */
  z-index: 1; /* テキスト要素を真ん中の層に配置 */
}

.c-mv__video {
  /* 省略 */
  z-index: 0; /* 動画要素を下の層に配置 */
}

.c-mv__mask {
  /* 省略 */
  z-index: 2; /* マスク要素を上の層に配置 */
}
```

詳しいパラメータについては公式ドキュメントを参照してください。

<ExternalLink url="https://developers.google.com/youtube/iframe_api_reference?hl=ja" />

JavaScriptでは、IFrame Player APIのドキュメントをほとんどそのまま使用しています。
変えるところは、`HTMLのid`と`YouTubeの動画のID`くらいです。

ローディング画面などはお好みで付け加えてください！

```javascript title="JavaScript" showLineNumbers
function onYouTubeIframeAPIReady() {
  player = new YT.Player("youtube", {
    // youtubeの箇所はHTMLのid
    videoId: "Ftm2uv7-Ybw", // YouTubeの動画のID
    // 省略
  })
}
```

## さいごに

今回はYouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む方法を紹介しました！　Webサイトのメインビジュアル用に良い感じに埋め込めたかと思います！　ぜひご参考にしていただけたらと思います！


---

## Webで行う役物の文字詰め方法(font-feature-settings, YakuHanJP)

- URL: https://blog.to-ko-s.com/articles/punctuation-mark-kerning
- 著者: 成岡拓哉
- 公開日: 2023-12-03
- タグ: HTML, CSS, デザイン

> Webで行う役物の文字詰め方法(font-feature-settings, YakuHanJP)を解説します。CSSのfont-feature-settingsとWebフォントYakuHanJPを使った2つの方法を紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はWeb上での役物の文字詰めについて、CSSだけで完結する方法や特殊なWebフォントを使用する方法を紹介します！

<Callout>役物とは、文章を記述する際に使用する記号の総称です。 「」や、。（）などが挙げられます。</Callout>

Webサイトのタイトルやテキスト内で`「」`や`、。（）`などの役物を使う機会があるかと思いますが、それらの役物は字間が大きすぎてしまい見た目が悪くなってしまうことがあります。

例えば、テキストの先頭や文中に`「」`や`（）`などの役物を使用した際は全体が揃っていないような見え方になります。（特に左側）

![役物の文字詰め前の表示例](/articles/punctuation-mark-kerning-image-1-1024x222.jpg)

Webでは文字詰めできないからしょうがない、、、 と私も思っていましたが、役物に対してだけ文字詰めができる方法がありました！

今回ご紹介する2つの方法はどちらも簡単な方法です！
Webデザインの細部のクオリティを上げたいと思っているあなたにおすすめの内容ですので、ぜひ使ってみてください！

### 対象読者

- Webデザイナー
- HTML,CSSコーダー

## CSSプロパティ font-feature-settings

まず紹介するのがCSSのプロパティである`font-feature-settings`を使う方法です。

<Callout>
  `font-feature-settings`とは、CSSのプロパティで、`OpenType`フォントの拡張書体の特性を制御するプロパティです。
</Callout>

`font-feature-settings: "palt";`を指定することで、役物の文字詰めが可能です。
めちゃくちゃ簡単な方法ですが、若干詰まり過ぎてしまう印象を受けます。(誤差？)

```css title="CSS" showLineNumbers
.font-feature-settings {
  font-feature-settings: "palt";
}
```

![font-feature-settingsを使った文字詰めの結果](/articles/punctuation-mark-kerning-image-2-1024x334.jpg)

## Webフォント YakuHanJP

続いては`YakuHanJP`というWebフォントを使用する方法です。

<Callout>
  `YakuHanJP`とは特殊なWebフォントで、日本語における役物(「」や、。（）など)のみを文字詰めした状態で表示してくれるものです。
  `YakuHanJP`はサンセリフ体専用なので、セリフ体で使いたい場合は、`YakuHanMP`を使用してください。
  ※役物に対するフォントなので、文字に対するフォントは別で指定してあげる必要があります。
</Callout>

<ExternalLink url="https://github.com/qrac/yakuhanjp" />

実際に使うには`CDN`でWebフォントを読み込み、CSSでフォントを指定する必要があります。

```html title="HTML" showLineNumbers
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.min.css" />
```

```css title="CSS" showLineNumbers
.yakuhanjp {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}
```

![YakuHanJPを使った文字詰めの結果](/articles/punctuation-mark-kerning-image-3-1024x350.jpg)

## さいごに

今回はWeb上での役物の文字詰めについて紹介しました！
CSSだけで完結する方法や特殊なWebフォントを使用する方法があったかと思いますが、用途によって使い分けてみてください！


---

## CSSで高級感あるグラデーションを表現

- URL: https://blog.to-ko-s.com/articles/css-elegant-gradation
- 著者: 寺田拓真
- 公開日: 2023-11-19
- タグ: HTML, CSS

> CSSで高級感のあるグラデーションを表現する方法を解説。金色・銀色・紺色の配色例やlinear-gradientのコツ、受賞メダル風デザインの実装サンプルも紹介します。


## はじめに

### この記事の概要

こんにちは、たくまです！

みなさんはサイトを制作するうえで、高級感を表したいとはどのように表現していますか？

- フォントを上品にする
- 余白を多めに取る
- 文字サイズを小さめにする

上記のことを意識する方は多いと思います。
その中でも、色によって高級感を演出することは多いのではないでしょうか？

黒や紺色、ポイントとして金色や銀色を使用することが多いと思います。
ここで、下の画像を見てください。

![単色の金色とグラデーション付き金色の高級感の比較](/articles/ScreenShot-2023-11-19-12.24.24-1024x387.webp)

どちらが高級感があると感じますか？
おそらく、下の方が高級感という面では出ているかと思います。
上の画像は、メインカラーは同色ですが、グラデーションに白系の色を使用することで光沢を表現しています。

このように、グラデーションを使用することで同じ色でも高級感を演出できます。
今回はCSSを用いて上記の画像を表現する方法や、他の高級感ある色の例をご紹介します！

### 対象読者

- CSS初学者の方
- 高級感あるサイトを制作される方

## 高級感ある色と実装

### 金色

まずは冒頭で紹介した金色の色をご紹介します！

メインカラーは`#B39855`
グラデーションに使用する色は`#FFF9E6`です。
ポイントは、グラデーションに完全な白色(`#fff`)を使用するのではなく、メインカラー系統の白色を使用することです。

上記のグラデーションを用いてボーダーを実装する際は、下記のようにコードを書きます。

```html title="HTML" showLineNumbers
<div class="underline"></div>
```

```css title="CSS" showLineNumbers
.underline {
  background: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
  background-repeat: no-repeat;
  width: 100px;
  height: 1px;
}
```

これで、グラデーションのあるボーダーを実装できます。

実装する上でのポイントは、2行目のようにグラデーションに用いる色をメインカラーで挟むことです。
このように記述することにより、ボーダーの中心に向かってグラデーションがかかるようになります。
逆に外側へ向かってグラデーションをかけたい場合は、メインカラーをグラデーションカラーで挟むと表現できます。

### 銀色

ここからは各色のサンプルを示したいと思います。
ボーダーを作成する際のコードは基本的に同じなので、割愛させていただきます。

![銀色のグラデーションボーダーのサンプル](/articles/ScreenShot-2023-11-19-13.14.17-1024x172.webp)

銀色も高級感を演出する上で多く使用されるかと思います。
画像のような銀色を表現する際は、

メインカラー：`#BDC3C9`
グラデーションカラー：`#FFFFFF`

上記で実装できます。
銀色はメインカラーが元から白色に近しいため、グラデーションカラーは白色にします。

### 紺色

販売するサービスやコーポレートサイトに落ち着いた上品さを演出したい時に紺色は使用されるかと思います。

![紺色のグラデーションボーダーのサンプル](/articles/ScreenShot-2023-11-19-13.21.36-1024x189.webp)

上記画像は、下記の色で実装できます。

メインカラー：`#1D262E`
グラデーションカラー：`#063761`

メインカラーはできるだけ暗めの紺色を設定することで、グラデーションに深みが出ます。

## 受賞メダルをCSSで作成

ここからは、上記で紹介した色を使用して、よく見る受賞メダルを作っていきます！
作成例はこちらです。

![CSSで作成した金色と紺色の受賞メダル風デザイン](/articles/ScreenShot-2023-11-19-13.27.00.webp)

早速コードをお示しします。

```html title="HTML" showLineNumbers
<div class="c-medal">
  <div class="c-medal__circle">
    <div class="c-medal__star">
      <img src="<?php bloginfo('template_url'); ?>/images/star.png" class="c-medal__star-img" alt="星" />
    </div>
    <div class="c-medal__text-area">
      <p class="c-medal__description">国内利用実績</p>
      <p class="c-medal__text">No.1</p>
    </div>
  </div>
</div>
```

```scss title="SCSS" showLineNumbers
.c-medal {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d262e 0%, #183d5c 100%);
  position: relative;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);

  &::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: inherit;
    background: linear-gradient(to right, #b39855, #fff9e6, #b39855);
  }
  &::after {
    top: 8px;
    left: 8px;
    position: absolute;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background: linear-gradient(135deg, #1d262e 0%, #183d5c 100%);
    content: "";
    border-radius: inherit;
    z-index: 2;
  }
  .c-medal__circle {
    width: 156px;
    height: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: solid 1px #ffffff;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
  }
  .c-medal__star {
    max-width: 40px;
    width: 100%;
    margin-bottom: 8px;
    .c-medal__star-img {
      width: 100%;
    }
  }
  .c-medal__text-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  .c-medal__text {
    font-size: 48px;
    background: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
    background: -webkit-linear-gradient(0deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
  }
  .c-medal__description {
    font-size: 16px;
    color: #ffffff;
  }
}
```

※星は今回figmaで作成した画像を使用しています。

今回は、大きい金色の円の上に紺色の円を重ねることでメダルを表現しています。
読者の方には紺色の円に`border`で金色のグラデーションを付ければいいのでは？と思われる方もいるかと思います。
僕も最初はその方法で実装しようかと思ったのですが、、
`border`にグラデーションをかける際は、`border-image`というプロパティを使用します。
この`border-image`が厄介で、`border-radius`と併用ができません。
そのため、グラデーションをかけた円の上にサイズの小さい円を重ねることで表現するようにしています。

## さいごに

今回は、高級感ある色とそれらをCSSで実装する方法を紹介しました！

今回ご紹介した色以外にも黒色や茶色など上品さを演出できる色の組み合わせは多くあるかと思うので、
ぜひご自分でも探してみてください！

また、今回はグラデーションをかける角度を`90deg`で紹介していましたが、
`135deg`などにすることで斜めのグラデーションを表現できます。
最後に紹介したメダルは斜めのグラデーションを使用しています。
角度を変えることで、また違った印象になるので色々試してみてください！


---

## 【Rails】ActiveStorageでPDFサムネイルを生成する方法

- URL: https://blog.to-ko-s.com/articles/activestorage-pdf
- 著者: 西原月熙
- 公開日: 2023-11-12
- タグ: Rails

> Ruby on RailsのActiveStorageを使ってPDFサムネイルを簡単に生成する方法を解説します。初心者でも理解しやすい手順で紹介します。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
本記事では、ActiveStorageを使ってPDFファイルの1ページ目のプレビューを画像として表示する方法を紹介します💪
自分がWEBで探しても「コレ！」という記事が無かったので、誰かのお役に立てれば幸いです！

### ActiveStorageの概要

前提として、ActiveStorageについて簡単に説明します！

ActiveStorageは、Ruby on Railsのフレームワークで画像をはじめとしたファイルを取り扱う際に使用するgemです！
画像ファイルを扱う他のgemもありますが、今現在はデフォルトでRailsに組み込まれているのでほぼほぼ一強かと思っています😎

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `Gemfile`に記述すらされていないけどデフォルトで使えるね！
</SpeechBubble>

### PDFのサムネイルとは？

次に、PDFのサムネイルについてもサクッと解説します！

PDFサムネイルは、PDFファイルの内容を簡単にプレビューするための小さな画像です。
これにより、ユーザーはPDFファイルを開かずとも、その内容の概要を視覚的に把握できます。
ウェブアプリケーションにおいて、PDFサムネイルの表示は、ユーザー体験を大幅に向上させますね✨

## ActiveStorageの設定と準備

早速方法について解説します！
まずは、前準備です。

### 前提

今回は`$ rails g model Article title: string body: text`で生成したモデルに対してPDFを紐付けるようにします。

また、紐付け済みのPDFファイルのプレビューを生成するだけの解説に留めます🙇‍♂️
(ファイルをアップロードする方法の解説について、実装内容は画像と特に変わらないので他の記事に譲ります)

### 本環境

前提として、本記事を執筆する上での開発環境を紹介します！
今回はOS側にもパッケージを導入する必要があるのでDockerを使用しています🙏
なので、一旦ベースとなる`Dockerfile`を下記します。

```dockerfile title="Dockerfile" {3}
FROM ruby:3.2.2

RUN apt-get update -qq && apt-get install -y libmariadb-dev build-essential

WORKDIR /app
COPY Gemfile Gemfile
COPY Gemfile.lock Gemfile.lock
RUN bundle install
COPY . .

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0", "-p", "3000"]
```

実装をする上で変更をするのは3行目になります。
Dockerが分からない方は、3行目で自分のパソコンにパッケージをインストールしているということだけおさえておいてくれればOKです！

### RailsプロジェクトでのActiveStorageの設定方法

まずはActiveStorageをインストールします！
...と言ったのですが、先程も書いたように、特に意識せずともインストール自体は勝手に完了しているはずです✨
一応`config/application.rb`を確認して`require "active_storage/engine"`という記述があるかどうかだけ確認してください！

```ruby title="config/application.rb" {7}
require_relative "boot"

require "rails"
# Pick the frameworks you want:
require "active_model/railtie"
require "active_job/railtie"
require "active_record/railtie"
require "active_storage/engine" # コレが書いてあればOK!
require "action_controller/railtie"
require "action_mailer/railtie"
# 以下略 ...
```

次に、コマンドラインで下の2行のコマンドを打てばActiveStorageの準備は完了です！

```bash title="ターミナル"
$ rails active_storage:install
$ rails db:migrate
```

最後に、`Article`モデルに`pdf`という名前で1対1でファイルを紐付けられるようにします！

```ruby title="app/models/article.rb" {2}
class Article < ApplicationRecord
  has_one_attached :pdf
  # 以下略
end
```

これで準備完了です！
`@article.pdf`で`pdf`の情報を呼び出すことができるようになります✨

## PDFサムネイルの生成方法

### 必要なパッケージのインストール・準備

PDFサムネイルの生成には、追加のライブラリやツールが必要になります。
今回やりたいことは「PDFサムネイルの生成」なので、特定のファイルに対して処理を行うため、それ用のパッケージをOSに対してインストールします！

```dockerfile title="Dockerfile" {4}
FROM ruby:3.2.2

# 後ろの3つを新規に追加
RUN apt-get update -qq && apt-get install -y libmariadb-dev build-essential libvips42 mupdf mupdf-tools
# 以下略
```

上記をOSにインストールした上で、gemを追加します！

```ruby title="Gemfile" {2}
# ...
gem "image_processing"
gem "ruby-vips"
```

これでRuby(Rails)から直接これらのツールを利用できるようになります✨

最後に、 `config/application.rb`に追記します！

```ruby title="config/application.rb" {6}
module App
  class Application < Rails::Application
    # ...

    # 下記を追記
    config.active_storage.previewers << ActiveStorage::Previewer::MuPDFPreviewer
  end
end
```

これで下準備は完了です😋

### サムネイル画像の生成方法

あとは、html.erb側で表示するだけです！

```erb title="views/articles/show.html.erb" {2}
<% if @article.pdf.representable? %>
  <%= image_tag @article.pdf.preview(resize_to_limit: [210, 297]) %>
<% else %>
  <span>プレビューは表示できません</span>
<% end %>
```

`representable?`メソッドを使用してPDFファイルがプレビュー可能かどうかを確認します！
そして、`preview`メソッドでサムネイルを生成します。例えば上記のように`@article.pdf.preview(resize_to_limit: [210, 297])`は、横210px × 縦297pxのサイズにリサイズされたサムネイルを生成します！

### URLのみの生成方法

サムネイルの画像自体ではなく、そのURLのみを生成することも可能です。
その際には、追加で各環境ごとの設定が必要になります。今回は開発環境の`config/environments/development.rb`の例を下記します！

```ruby title="config/environments/development.rb" {10}
# ~~ 中略 ~~
  # ActiveStorageの設定
  config.active_storage.service = :local
  default_url_options[:host] = "localhost"
  default_url_options[:port] = 3000
# ~~ 中略 ~~
```

この設定をしておかないとエラーが出るので注意です🙏

上記準備をしたら、`url_for`メソッドを使用してURLを生成します。例えば、`url_for(@article.pdf.preview(resize_to_limit: [210, 297]))`で生成されたサムネイルのURLを返します。このURLをimgタグに埋め込むことで、ユーザーにサムネイルを表示できます✨

## おわりに

ActiveStorageを使用することで、RailsにPDFサムネイルを簡単にできました！
皆さんも機会があればぜひ参考にしてください✨

Railsのことを詳しく知りたい方は、[この本](https://amzn.to/3Pi6oTz)に分かりやすく書かれているので是非参考にしてみてください🙏


---

## 【コピペOK】WEB開発向け！やりすぎてないローディングアニメーション10選

- URL: https://blog.to-ko-s.com/articles/loading-animation
- 著者: 杉田侑祐
- 公開日: 2023-11-06
- タグ: HTML, CSS

> WEB開発で使えるローディングアニメーション10選をCSSのみで実装。スピンアニメーションやドットアニメーションなど、処理待ちやページ遷移時に使えるデザインをコピペで紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はローディングアニメーションを紹介したいと思います。
今回のローディングアニメーションはWEB制作で使うようなローディングアニメーションではなく、WEB開発向けのローディングアニメーションを紹介していきます。
処理待ちやページ遷移時に挟み込むようなローディングアニメーションを想定しています！

### 対象読者

- WEB開発を行っている方

## ローディングアニメーション

今回は全てCSSのみで実装しています。

### オーソドックスなスピンアニメーション

主張の少ない、いろんな場面で使えるスピンアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/zYeNGPz" height={300} defaultTab="html,result" preview />

### オーソドックスなスピンアニメーション2

ページ遷移時にピッタリなスピンアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/jOdyPQr" height={300} defaultTab="html,result" preview />

### オーソドックスなスピンアニメーション3

ボタンの中等に使えそうなスピンアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/NWodqoG" height={300} defaultTab="html,result" preview />

### 複雑な動きのスピンアニメーション

見ていてとても気持ちの良いアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/ExrZVxL" height={300} defaultTab="html,result" preview />

### バータイプのアニメーション

使いやすいバータイプのアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/GRzrJBL" height={300} defaultTab="html,result" preview />

### バータイプのアニメーション2

こちらも使いやすいバータイプのアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/ZEwLGgJ" height={300} defaultTab="html,result" preview />

### ドットのアニメーション

使いやすいドットアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/JjxEdzZ" height={300} defaultTab="html,result" preview />

### おしゃれなドットのアニメーション

使いやすい上におしゃれなドットアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/RwvKPmm" height={300} defaultTab="html,result" preview />

### 不規則なドットのアニメーション

使いやすい上に不規則なドットアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/KKJadPa" height={300} defaultTab="html,result" preview />

### だんだん大きくなるアニメーション

おしゃれで使いやすいアニメーションです

<CodePen url="https://codepen.io/tks-sugita/pen/WNPRQvG" height={300} defaultTab="html,result" preview />

## さいごに

今回はWEB開発向けのローディングアニメーションの紹介を行いました。
結局やりすぎないアニメーションが使いやすく良いなという印象です。
今回はやりすぎてない。オーソドックスなローディングアニメーションから、少し変わったアニメーションまでを紹介しました。
参考にしていただけると幸いです。


---

## 【React】MantineUIのv7.0.0での変更点

- URL: https://blog.to-ko-s.com/articles/mantine-v7-update
- 著者: 杉田侑祐
- 公開日: 2023-10-31
- タグ: React

> React UIライブラリMantineのv7.0.0での変更点を解説。Emotionへの依存廃止やcreateStyle・SX propsの削除などの破壊的変更、color schemeなどの新機能を紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回は先日アップデートされてv6系からv7系にメジャーアップデートされたMantineの気になった変更箇所をまとめましたので紹介します。

<ExternalLink url="https://mantine.dev/changelog/7-0-0/" />

### 対象読者

- Reactを用いたWEB制作、WEB開発を行っている方
- Tailwind CSSを使用しながらUIライブラリを使用したい方

## 破壊的変更

まずは破壊的変更からです。

- コンポーネントのオーバーライドの方法が大幅に変更になりました。
- Emotionに依存しなくなりました。
- `createStyle`関数は使用できなくなりました。
- `SX props`を使用できなくなりました。
- `styles props`はネストされたセレクターをサポートしなくなりました。

より軽量になるのはめちゃくちゃ嬉しいです。

<Callout variant="memo">
  Emotionに依存しなくなったのでNext.jsの`App Router`のサーバーコンポーネントで使用できるのかなと思っていたのですが、できないみたいです。 MantineのコンポーネントではデフォルトのpropsとスタイルAPI機能にReactコンテキストを使用している為(公式Discord参照)、今後もこの機能を削除する予定は無いみたいです。
</Callout>

## 新要素

### color scheme

`MantineProvider`に`color scheme`を設定できるようになりました。

```tsx title="Demo.tsx" showLineNumbers
import { MantineProvider, ColorSchemeScript } from "@mantine/core"

function Demo() {
  return (
    <>
      <ColorSchemeScript defaultColorScheme="auto" />
      <MantineProvider defaultColorScheme="auto">
        <App />
      </MantineProvider>
    </>
  )
}
```

### CSSモジュールとPostCSSのプリセット

CSSモジュールはスタイルを設定するために推奨ですが必須ではありません。
`postcss-preset-mantine`を使用することも推奨になりました。

<ExternalLink url="https://mantine.dev/styles/postcss-preset/" />

### ヘッドレスUI化

`@mantine/styles.css`をインポートしなければヘッドレスUIとしても使用できるようになりました。

### テーマ作成関数

`createTheme`関数を使うとすべてのテーマのプロパティに対してオーバーライドできるようになりました。

```tsx title="Demo.tsx" showLineNumbers
import { createTheme, MantineProvider } from "@mantine/core"

const theme = createTheme({
  fontFamily: "sans-serif",
  primaryColor: "orange",
})

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <App />
    </MantineProvider>
  )
}
```

### コンポーネントの機能拡張

`extend`でコンポーネントの拡張ができるようになりました。

下記は`TextInput`のデフォルトスタイルをオーバーライドしています。
独自のpropsとかも作成できるようになりました。

```tsx title="theme.ts" showLineNumbers
const theme = createTheme({
  components: {
    TextInput: TextInput.extend({
      styles: (theme, props) => ({
        input: {
          fontSize: props.size === "compact" ? theme.fontSizes.sm : undefined,
        },
      }),
      classNames: {
        root: classes.root,
        input: classes.input,
        label: classes.label,
      },

      defaultProps: {
        size: "compact",
      },
    }),
  },
})

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <App />
    </MantineProvider>
  )
}
```

### カラー指定の拡張

16進数、RGBA、HSLでカラーの指定が可能になりました。

```tsx title="Demo.tsx" showLineNumbers
function Demo() {
  return <Button color="#fff">ボタン</Button>
}
```

### Comboboxコンポーネント

`Autocomplete`、`Select`、`TagsInput`、`Multiselect`のベースとして使用される`Combobox`コンポーネントが追加されました。
以前の`Autocomplete`、`Select`、`Multiselect`で実装されていた機能のベースは共通で`Combobox`コンポーネントが受け持つようになるみたいです。
また公式が出しているDEMOページが素晴らしいので是非一度見てほしいです。

<ExternalLink url="https://mantine.dev/combobox/" />

### リセットCSSについて

リセットCSSの`normalize.css`がなくなりました。
代わりに最小限のリセットCSSに変更されました。

```css title="reset.css" showLineNumbers
html,
body {
  height: 100%;
}

body {
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
button,
textarea,
select {
  font: inherit;
}

button,
select {
  text-transform: none;
}
```

この変更で、Tailwind側のリセットCSSとの互換性がよくなるかなと期待したのですが、あまり良くありませんでした。
どうせならばTailwindのリセットCSSとして採用されている`modern-normalize.css`に合わせてくれれば個人的には嬉しかったです。
現状は`modern-normalize.css`がMantineに干渉するプロパティだけ削除して使用するのが良さそうです。

```css title="globals.css" showLineNumbers
@tailwind components;
@tailwind utilities;

/*
node_modules/tailwindcss/lib/css/preflight.css からコピペしている
Mantineと競合するスタイルのみを削除している
*/

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: theme("borderColor.DEFAULT", currentColor);
}

::before,
::after {
  --tw-content: "";
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: theme("fontFamily.sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  /* CSS変数を使っているためコメントアウト */
  /* font-feature-settings: theme(
    "fontFamily.sans[1].fontFeatureSettings",
    normal
  ); */
  /* font-variation-settings: theme(
    "fontFamily.sans[1].fontVariationSettings",
    normal
  ); */
}

body {
  margin: 0;
  line-height: inherit;
  color: #151515 !important;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: theme("fontFamily.mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* MantineのButtonの色が上手く当たらないためコメントアウト */
  /* background-color: transparent; */
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: theme("colors.gray.400", #9ca3af);
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}
```

現状はこれで運用しています。
また何か良い方法があればご教示いただけたら幸いです。

## さいごに

今回はメジャーアップデートされたMantineUIの変更箇所を紹介いたしました。
ここに紹介していないものもあるので一度公式ドキュメントを見ていただければと思います。
また公式ドキュメントの内容構成もアップデートされてコンポーネントの構成等も追記されていたりドキュメントの読みやすさも格段に上がったと思います！


---

## 【初学者向け】Reactで作るモーダルコンポーネント

- URL: https://blog.to-ko-s.com/articles/react-create-modal
- 著者: 杉田侑祐
- 公開日: 2023-10-31
- タグ: React

> この記事では初学者向けにReactでモーダルウィンドウの作り方を教えています。この記事を見ればモーダルウィンドウの作り方が学べます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回は初学者の方に向けて、Reactでモーダルを作っていきたいと思います。
少しアクセシビリティにも配慮したモーダルにしていますので最後まで見ていただけたら幸いです。

### 対象読者

- Reactを用いたWEB制作、WEB開発を行っている方

## 実装前に

### 開発環境

- React 18.0.28
- Next.js 13.2.3
- TypeScript 4.9.5
- Tailwind CSS 3.3.3

今回は`App`ディレクトリではなく`Pages`ディレクトリで行います。

### 今回の完成予定

今回の完成イメージは下記になります。

![Reactで作成するモーダルコンポーネントの完成イメージ](/articles/image-17-1024x559.webp)

要件は下記とします。

### コンポーネントに持たせる機能や見た目の要件

- 実行する関数を`props`として渡せる
- モーダルのタイトル(テキスト)と実行ボタンの見た目(カラー,テキスト)を`props`で変えることができる
- モーダル内のテキストは`props`として渡す
- スタッキングコンテキストに影響されない

### アクセシビリティの要件

- オーバーレイ箇所をクリックした際に閉じることができる
- モーダルを開いた際に背景を固定する
- `Escape`キーを押してモーダルを閉じることができる

## 実装

### 削除Modalコンポーネントの作成

モーダルコンポーネントの作成をします。
`props`としてモーダル表示/非表示を管理している`Boolean`のステート(`isOpen`)とモーダルを非表示にする関数(`closeModal`)とモーダル内のボタンを押した際に行う関数(`handleAction`)を`props`として受け取れるようにしています。
またその他にも下記のことを行っています。

- 【18行目〜43行目】`ReactDOM.createPortal`(18行目)を使用し、root配下(43行目)でレンダリングされるようにしています。
  これでスタッキングコンテキストに影響されなくなります。
- 【20,26,34行目】オーバレイ、モーダル内のバツアイコン、モーダル内のキャンセルボタンにClickイベントのコールバック関数としてモーダルを閉じる関数(`closeModal`)を渡しています。
- 【21行目】オーバーレイをクリックした際のイベントの伝達を止めています。
- 【37行目】Clickイベントのコールバック関数として実行される処理関数を渡しています。

```tsx title="Modal.tsx" showLineNumbers {6-10,18,20,21,26,34,37,43}
import { FC, ReactNode, memo, useEffect } from "react"
import { createPortal } from "react-dom"
import CloseIcon from "@/assets/CloseIcon.svg"
import { notoSansJp } from "@/components/layouts/DefaultLayout"

type Props = {
  closeModal: () => void
  handleAction: () => void
  isOpen: boolean
}

export const Modal: FC<Props> = memo((props) => {
  const { closeModal, handleAction, isOpen } = props

  // 早期リターン
  if (!isOpen) return null

  return createPortal(
    // オーバレイ
    <div className={`fixed inset-0 z-40 flex items-center justify-center bg-[rgb(0_0_0/0.6)]`} onClick={closeModal}>
      <div className="w-full max-w-[540px] rounded bg-white py-4" onClick={(e) => e.stopPropagation()}>
        <div className="flex w-full items-center justify-between border-b px-6 pb-4">
          <div className="gap-4">
            <p className="text-base sm:text-xl">〇〇の削除</p>
          </div>
          <button onClick={closeModal}>
            <CloseIcon width={24} height={24} className="fill-gray-500" />
          </button>
        </div>
        <div className="px-6 pt-8">
          <p>本当に削除しても良いですか？</p>
        </div>
        <div className="mt-8 flex justify-end gap-x-2 border-t px-4 pt-4">
          <button className="rounded border border-gray-500 px-4 py-2 text-gray-500" onClick={closeModal}>
            キャンセル
          </button>
          <button className={`rounded px-4 py-2 text-white`} onClick={handleAction}>
            削除
          </button>
        </div>
      </div>
    </div>,
    document.getElementById("__next")!,
  )
})
```

### index.tsxの実装

では呼び出す側の実装をしていきます。
`index.tsx`では下記のことを行います。

- モーダル表示/非表示を管理する`Boolean`のステートとそれを利用した、表示/非表示を行う関数の定義
- 実行ボタンを押した際に実行される関数の定義

```tsx title="index.tsx" showLineNumbers {6,9-11,14-16,19}
import { useState } from "react"
import { DeleteModal } from "@/components/Modal"

const ExamplePage = () => {
  // モーダル表示/非表示を管理するBooleanのステート
  const [isOpen, setIsOpen] = useState(false)

  // 非表示させる関数
  const closeModal = () => {
    setIsOpen(false)
  }

  // 表示させる関数
  const openModal = () => {
    setIsOpen(true)
  }

  // 実行ボタンを押した際に実行される処理
  const handleDelete = () => console.log("削除する処理")

  return (
    <>
      <div className="p-10">
        <button className="rounded bg-red-500 p-4 text-[#fff]" onClick={openModal}>
          削除する
        </button>
      </div>
      {isOpen && <DeleteModal closeModal={closeModal} isOpen={isOpen} handleAction={handleDelete} />}
    </>
  )
}

export default ExamplePage
```

モーダル開くボタンのClickイベントのコールバック関数に`openModal`関数を渡し、`true`に更新されたタイミングでモーダルを表示するようにしています。
また先程作成した`DeleteModal`コンポーネントに`props`として、モーダルを閉じる関数(`closeModal`)、実行ボタン(削除ボタン)が押された際に行う関数(`handleDelete`)、表示/非表示の状態によって変わる`Boolean`を渡しています。

### 削除Modalコンポーネントのリファクタリング

ここから、より使いまわしの効くコンポーネントにするため、リファクタリングしていきます。

- モーダルのタイトル(テキスト)と実行ボタンの見た目(カラー,テキスト)を`props`で変えることができる
- モーダル内のテキストは`props`として渡す

要件定義した上記2つを実現するためには、`Modal`コンポーネントから削除というドメインを持つ部分を切り離し、新たなコンポーネントを作成してそこに削除というドメインを持たせるべきです。

### 新たなコンポーネントへ切り出し

ドメインを持つ部分を`props`で渡すようにしています。
今回でいうとボタン内のテキスト、モーダルのタイトル部分、モーダル内のテキスト、ボタンの背景色の部分になります。

```tsx title="DeleteModal.tsx" showLineNumbers {14,15}
import { FC, memo } from "react"
import { Modal } from "@/components/Modal"

type Props = {
  closeModal: () => void
  handleAction: () => void
  isOpen: boolean
}

export const DeleteModal: FC<Props> = memo((props) => {
  const { closeModal, handleAction, isOpen } = props

  return (
    <Modal
      title="〇〇削除"
      closeModal={closeModal}
      isOpen={isOpen}
      handleAction={handleAction}
      buttonText="削除"
      buttonColor="red"
    >
      <p>本当に削除しても良いですか？</p>
    </Modal>
  )
})
```

### 先程作成したModalコンポーネントのリファクタリング

- ボタン内のテキスト、モーダルのタイトル部分、モーダル内のテキストを`props`で受け取るようにしました。
- 【7~13,17,29,49行目】ボタンの背景色を`string`の`enum`型(`ColorMap`型)で定義し、渡された`string`(`red`,`blue`,`green`,`yellow`)に対してオブジェクト(`colorClasses`)の参照(29行目)を行い変数に格納し背景色を変更できるようにしています。

```tsx title="Modal.tsx" showLineNumbers {7-13,16-19,26,29,38,44,50}
import { FC, ReactNode, memo, useEffect } from "react"
import { createPortal } from "react-dom"
import CloseIcon from "@/assets/CloseIcon.svg"
import { notoSansJp } from "@/components/layouts/DefaultLayout"

// ボタンの色をenum型として定義、今回は4色
type ColorMap = "blue" | "green" | "yellow" | "red"
const colorClasses: Record<ColorMap, string> = {
  blue: "bg-blue-500",
  green: "bg-green-500",
  red: "bg-red-500",
  yellow: "bg-yellow-500",
}

type Props = {
  title: string
  buttonColor: ColorMap
  buttonText: string
  children: ReactNode
  closeModal: () => void
  handleAction: () => void
  isOpen: boolean
}

export const Modal: FC<Props> = memo((props) => {
  const { title, buttonColor, buttonText, children, closeModal, handleAction, isOpen } = props

  // ボタンの色をenum型として受け取りオブジェクトへの参照を行っている
  const colorClass = colorClasses[buttonColor]

  if (!isOpen) return null

  return createPortal(
    <div
      className={`fixed inset-0 z-40 flex items-center justify-center bg-[rgb(0_0_0/0.6)] ${notoSansJp.className}`}
      onClick={closeModal}
    >
      <div className="w-full max-w-[540px] rounded bg-white py-4" onClick={(e) => e.stopPropagation()}>
        <div className="flex w-full items-center justify-between border-b px-6 pb-4">
          <div className="gap-4">
            <p className="text-base sm:text-xl">{title}</p>
          </div>
          <button onClick={closeModal}>
            <CloseIcon width={24} height={24} className="fill-gray-500" />
          </button>
        </div>
        <div className="px-6 pt-8">{children}</div>
        <div className="mt-8 flex justify-end gap-x-2 border-t px-4 pt-4">
          <button className="rounded border border-gray-500 px-4 py-2 text-gray-500" onClick={closeModal}>
            キャンセル
          </button>
          <button className={`rounded px-4 py-2 text-white ${colorClass}`} onClick={handleAction}>
            {buttonText}
          </button>
        </div>
      </div>
    </div>,
    document.getElementById("__next")!,
  )
})
```

これでコンポーネントに持たせる機能や見た目の要件と、オーバーレイクリック時にモーダルを閉じるアクセシビリティ要件を満たしました。

また`index.tsx`で呼び出しているコンポーネント名の変更も忘れず行います。

```tsx title="index.tsx" showLineNumbers {2,28}
import { useState } from "react"
import { DeleteModal } from "@/components/DeleteModal"

const ExamplePage = () => {
  // モーダル表示/非表示を管理するBooleanのステート
  const [isOpen, setIsOpen] = useState(false)

  // 非表示させる関数
  const closeModal = () => {
    setIsOpen(false)
  }

  // 表示させる関数
  const openModal = () => {
    setIsOpen(true)
  }

  // 実行ボタンを押した際に実行される処理
  const handleDelete = () => console.log("削除する処理")

  return (
    <>
      <div className="p-10">
        <button className="rounded bg-red-500 p-4 text-[#fff]" onClick={openModal}>
          モーダルを開く
        </button>
      </div>
      {isOpen && <DeleteModal closeModal={closeModal} isOpen={isOpen} handleAction={handleDelete} />}
    </>
  )
}

export default ExamplePage
```

ここから残りのアクセシビリティに関わる要件の実装に入っていきます。

### アクセシビリティ要件の実装

残りのアクセシビリティ要件を確認します。

- モーダルを開いた際に背景を固定する
- `Escape`キーを押してモーダルを閉じることができる

ここからはDOMを直接いじるので`useEffect`を使用します。

```tsx title="Modal.tsx" showLineNumbers {24-46}
import { FC, ReactNode, memo, useEffect } from "react"
import { createPortal } from "react-dom"
import CloseIcon from "@/assets/CloseIcon.svg"
import { notoSansJp } from "@/components/layouts/DefaultLayout"

// ~~~ 省略 ~~~

type Props = {
  title: string
  buttonColor: ColorMap
  buttonText: string
  children: ReactNode
  closeModal: () => void
  handleAction: () => void
  isOpen: boolean
}

export const Modal: FC<Props> = memo((props) => {
  const { title, buttonColor, buttonText, children, closeModal, handleAction, isOpen } = props

  // ~~~ 省略 ~~~

  // アクセシビリティに関する記述
  useEffect(() => {
    // エスケープキーが押されたときの処理
    const handleEscapePress = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        closeModal()
      }
    }

    if (isOpen) {
      // エスケープキーのイベントリスナーを追加
      window.addEventListener("keydown", handleEscapePress)
      // 背景固定の記述
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

    // クリーンアップ関数
    return () => {
      window.removeEventListener("keydown", handleEscapePress)
      document.body.style.overflow = "auto"
    }
  }, [isOpen, closeModal])

  if (!isOpen) return null

  return createPortal()
  // ~~~ 省略 ~~~
})
```

`if`文を使用し、モーダル表示時に以下の処理を行います。

- 【26~30行目】押されたキーが`Escape`だった場合にモーダルを閉じる関数を`handleEscapePress`として定義
- 【34行目】`keydown`イベントのコールバック関数として`handleEscapePress`関数を渡し`Escape`キーを押した際にモーダルを閉じる機能を実装
- 【36行目】背景固定として`body`タグに`overflow: hidden;`を付与する

またクリーンアップ関数を忘れないようにしましょう。

これでアクセシビリティ要件も満たすことができました。

### 全体のコード

```tsx title="index.tsx" showLineNumbers
import { useState } from "react"
import { DeleteModal } from "@/components/DeleteModal"

const ExamplePage = () => {
  const [isOpen, setIsOpen] = useState(false)

  const closeModal = () => {
    setIsOpen(false)
  }

  const openModal = () => {
    setIsOpen(true)
  }

  const handleDelete = () => console.log("削除する処理")

  return (
    <>
      <div className="p-10">
        <button className="rounded bg-red-500 p-4 text-[#fff]" onClick={openModal}>
          削除する
        </button>
      </div>
      {isOpen && <DeleteModal closeModal={closeModal} isOpen={isOpen} handleAction={handleDelete} />}
    </>
  )
}

export default ExamplePage
```

```tsx title="DeleteModal.tsx" showLineNumbers
import { FC, memo } from "react"
import { Modal } from "@/components/Modal"

type Props = {
  closeModal: () => void
  handleAction: () => void
  isOpen: boolean
}

export const DeleteModal: FC<Props> = memo((props) => {
  const { closeModal, handleAction, isOpen } = props

  return (
    <Modal
      title="〇〇削除"
      closeModal={closeModal}
      isOpen={isOpen}
      handleAction={handleAction}
      buttonText="削除"
      buttonColor="red"
    >
      <p>本当に削除しても良いですか？</p>
    </Modal>
  )
})
```

```tsx title="Modal.tsx" showLineNumbers
import { FC, ReactNode, memo, useEffect } from "react"
import { createPortal } from "react-dom"
import CloseIcon from "@/assets/CloseIcon.svg"
import { notoSansJp } from "@/components/layouts/DefaultLayout"

type ColorMap = "blue" | "green" | "yellow" | "red"
const colorClasses: Record<ColorMap, string> = {
  blue: "bg-blue-500",
  green: "bg-green-500",
  red: "bg-red-500",
  yellow: "bg-yellow-500",
}

type Props = {
  title: string
  buttonColor: ColorMap
  buttonText: string
  children: ReactNode
  closeModal: () => void
  handleAction: () => void
  isOpen: boolean
}

export const Modal: FC<Props> = memo((props) => {
  const { title, buttonColor, buttonText, children, closeModal, handleAction, isOpen } = props

  const colorClass = colorClasses[buttonColor]

  useEffect(() => {
    const handleEscapePress = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        closeModal()
      }
    }

    if (isOpen) {
      window.addEventListener("keydown", handleEscapePress)
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

    return () => {
      window.removeEventListener("keydown", handleEscapePress)
      document.body.style.overflow = "auto"
    }
  }, [isOpen, closeModal])

  if (!isOpen) return null

  return createPortal(
    <div
      className={`fixed inset-0 z-40 flex items-center justify-center bg-[rgb(0_0_0/0.6)] ${notoSansJp.className}`}
      onClick={closeModal}
    >
      <div className="w-full max-w-[540px] rounded bg-white py-4" onClick={(e) => e.stopPropagation()}>
        <div className="flex w-full items-center justify-between border-b px-6 pb-4">
          <div className="gap-4">
            <p className="text-base sm:text-xl">{title}</p>
          </div>
          <button onClick={closeModal}>
            <CloseIcon width={24} height={24} className="fill-gray-500" />
          </button>
        </div>
        <div className="px-6 pt-8">{children}</div>
        <div className="mt-8 flex justify-end gap-x-2 border-t px-4 pt-4">
          <button className="rounded border border-gray-500 px-4 py-2 text-gray-500" onClick={closeModal}>
            キャンセル
          </button>
          <button className={`rounded px-4 py-2 text-white ${colorClass}`} onClick={handleAction}>
            {buttonText}
          </button>
        </div>
      </div>
    </div>,
    document.getElementById("__next")!,
  )
})
```

## さいごに

今回Reactでモーダルコンポーネントを作成してみました。
モーダルは考慮することが多いので、ライブラリ等を使うことが多いかと思います。
モーダルだけのためにUIライブラリを使うのはどうだろうとなることも多いかと思います。
そういった方は一度自作してみるのも良いかもしれません。


---

## 【tailwind】gridレイアウト -カスタム方法も紹介-

- URL: https://blog.to-ko-s.com/articles/tailwind-grid-layout
- 著者: 寺田拓真
- 公開日: 2023-10-08
- タグ: HTML, CSS, Tailwind CSS

> Tailwind CSSでgridレイアウトを実装する方法を解説します。基本的なgrid-cols、col-span、row-spanの使い方から、列数・行数の拡張やサイズのカスタマイズ方法まで紹介します。


## はじめに

### この記事の概要

こんにちは、たくまです！
みなさんは`tailwind`で`grid`を使用したことはありますか？
通常のCSSで使用したことがある方は多いかと思いますが、実は`tailwind`でも`grid`が使用できるんです！
記述方法もシンプルで慣れてしまえば簡単に`grid`レイアウトを表現できるので、ぜひお試しください！

CSSでの`grid`レイアウトに関しては過去の記事で紹介しているので、下記をご参照ください。

<InternalLink slug="grid-layout" />

### 対象読者

- `tailwind`を勉強中の方
- `tailwind`で`grid`を使用したい方

## 基本的な使い方

### gridの使用

![grid-cols-1で1列に並んだグリッドレイアウトの表示例](/articles/image-9-1024x204.webp)

まずは上記のような`grid`レイアウトを表示する記述を紹介します。

```tsx title="JSX" showLineNumbers
<div className="grid grid-cols-1">
  <div className="bg-blue-100">1</div>
  <div className="bg-red-100">2</div>
  <div className="bg-orange-100">3</div>
  <div className="bg-amber-100">4</div>
  <div className="bg-yellow-100">5</div>
  <div className="bg-lime-100">6</div>
  <div className="bg-green-100">7</div>
  <div className="bg-emerald-100">8</div>
  <div className="bg-teal-100">9</div>
  <div className="bg-cyan-100">10</div>
  <div className="bg-sky-100">11</div>
  <div className="bg-white">12</div>
</div>
```

ポイントは、1行目に記述があるように`grid`と`grid-cols-1`クラスを使用することです。
`grid`で`grid`レイアウトの使用を宣言し、`grid-cols-1`で1列の`grid`レイアウトを表現しています。

`grid-cols-1`の数字を2〜12まで選択することで、列数を変更できます。
例えば上記の記述を`grid-cols-3`にした場合は、下記のように3列のレイアウトになります。

![grid-cols-3で3列に並んだグリッドレイアウトの表示例](/articles/image-10-1024x68.webp)

`grid-cols-12`にした場合は、12列のレイアウトになります。

![grid-cols-12で12列に並んだグリッドレイアウトの表示例](/articles/image-11-1024x20.webp)

### col-span-\[n\]の使用

列をまたぐ(例えば、1,2列目を合体させて1列にする)際は`col-span-[n]`を使用します。

```tsx title="JSX" showLineNumbers
<div className="grid grid-cols-3">
  <div className="bg-blue-100 col-span-2">1と2</div>
  <div className="bg-orange-100">3</div>
  <div className="bg-amber-100">4</div>
  <div className="bg-yellow-100">5</div>
  <div className="bg-lime-100">6</div>
  <div className="bg-green-100">7</div>
  <div className="bg-emerald-100">8</div>
  <div className="bg-teal-100">9</div>
  <div className="bg-cyan-100">10</div>
  <div className="bg-sky-100">11</div>
  <div className="bg-white">12</div>
</div>
```

![col-span-2で1列目と2列目を結合したグリッドレイアウトの表示例](/articles/image-12-1024x71.webp)

2行目で記述したように、`col-span-2`と記述することで、1列目と2列目が合わさって1つの列になりました。

<Callout variant="warning">1列目と2列目を合わせるので、元々あった2列目の記述は削除してください。</Callout>

### row-span-\[n\]の使用

行をまたぐ(例えば、1,2行目を結合させる)際は`row-span-[n]`を使用します。

```tsx title="JSX" showLineNumbers
<div className="grid grid-cols-3">
  <div className="bg-blue-100 col-span-2 row-span-2">1と2</div>
  <div className="bg-orange-100">3</div>
  <div className="bg-amber-100">4</div>
  <div className="bg-yellow-100">5</div>
  <div className="bg-lime-100">6</div>
  <div className="bg-green-100">7</div>
  <div className="bg-emerald-100">8</div>
  <div className="bg-teal-100">9</div>
  <div className="bg-cyan-100">10</div>
  <div className="bg-sky-100">11</div>
  <div className="bg-white">12</div>
</div>
```

2行目で記述したように、`row-span-2`と記述することで、1行目と2行目が結合されました。

![col-spanとrow-spanで列と行を結合したグリッドレイアウトの表示例](/articles/image-13-1024x86.webp)

基本的な使用方法は以上です。
上記で紹介した記述を適宜、それぞれの行や列に適用させることで好みのレイアウトを表現できます。

## カスタマイズ方法

### 記述できる行や列を増やす

ここからはカスタマイズ方法を紹介します。

`tailwind`の`grid`は、デフォルトで記述できる列は12列まで、行は6行までとなっています。
これを増やしたい場合は、`tailwind.config.js`ファイルに下記のように記述します。

```javascript title="tailwind.config.js" showLineNumbers
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        // 16列まで増やす
        16: "repeat(16, minmax(0, 1fr))",
      },
      gridTemplateRows: {
        // 8行まで増やす
        8: "repeat(8, minmax(0, 1fr))",
      },
    },
  },
}
```

列を増やす記述は4-6行目、行を増やす記述は8-10行目になります。
上記の例では、`grid-cols-16`など16列目まで、8行目までのレイアウトが可能になります。

また、上記では`tailwind.config.js`に記述しましたが、`grid`レイアウトごとに変更が可能です。

```tsx title="JSX" showLineNumbers
<div className="grid grid-cols-3 grid-rows-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]">
  <div className="bg-blue-100 col-span-2 row-span-2">1と2</div>
  <div className="bg-orange-100">3</div>
  <div className="bg-amber-100">4</div>
  <div className="bg-yellow-100">5</div>
  <div className="bg-lime-100">6</div>
  <div className="bg-green-100">7</div>
  <div className="bg-emerald-100">8</div>
  <div className="bg-teal-100">9</div>
  <div className="bg-cyan-100">10</div>
  <div className="bg-sky-100">11</div>
  <div className="bg-white">12</div>
</div>
```

上記では、`grid-rows-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]`と`1fr`を7つ記述することで、7行まで表現することが可能になります。

### 各列、各行の幅や高さを変更する

各行、各列の幅や高さを変更する際は、下記のように記述します。

```tsx title="JSX" showLineNumbers
<div className="grid grid-cols-[1fr_1fr_1fr_2fr] grid-rows-[1fr_1fr_1fr_2fr]">
  <div className="bg-blue-100 col-span-2 row-span-2">1と2</div>
  <div className="bg-orange-100">3</div>
  <div className="bg-amber-100">4</div>
  <div className="bg-yellow-100">5</div>
  <div className="bg-lime-100">6</div>
  <div className="bg-green-100">7</div>
  <div className="bg-emerald-100">8</div>
  <div className="bg-teal-100">9</div>
  <div className="bg-cyan-100">10</div>
  <div className="bg-sky-100">11</div>
  <div className="bg-white">12</div>
</div>
```

![4列目と4行目を2fr指定してサイズを変更したグリッドレイアウト](/articles/image-15-1024x87.webp)

1行目にあるように、4行目と4列目を`2fr`とすることで割合を2倍にしました。
それぞれ大きさが変わっているのがお分かりいただけるかと思います。

上記を用いることで、よりレイアウトの幅が広がります！

## 便利なサイト紹介

<ExternalLink url="https://www.tailwindgen.com/" />

上記のサイトは表現したい`grid`レイアウトをサイト上で選択したあとに、`tailwind`での記述を生成してくれるサイトです。
そのコードをコピーするだけで実際に描画できます。
かなり便利なので、ぜひ使ってみてください！

## さいごに

今回は`tailwind`での`grid`使用方法を紹介しました。
記述も少なく、慣れてしまえば最後に紹介したような複雑なレイアウトも容易に表現できるかと思います。
カスタマイズもできるので、ぜひお試しください！


---

## Rails7・Pagyでのページネーションの実装方法 ~ kaminariとの比較も

- URL: https://blog.to-ko-s.com/articles/pagy-pagination
- 著者: 西原月熙
- 公開日: 2023-09-24
- タグ: Rails

> Rails7でのPagyによる効率的なページネーションの実装方法を詳細に解説します。また、人気のページネーションライブラリであるkaminariとの比較を通じて、Pagyの性能と利便性についても紹介します。Rails開発者の方はもちろん、パフォーマンス向上を図りたい全てのWeb開発者におすすめのコンテンツです。


<Callout variant="warning">
  この記事は執筆時点(2023年9月)のPagy 6系を使用しています。
  現在はAPIやドキュメント構成が大きく変更されており、本文中のコードと記事内リンク先のドキュメントの内容が一致しない箇所があります。
  最新バージョンで実装する場合は下記の公式ドキュメントを参照してください。
</Callout>

<ExternalLink url="https://ddnexus.github.io/pagy/" />

## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
本記事では、WEBアプリケーションを作る際には必須と言って良い程の機能「ページネーション」について、実装するための現時点での最有力のgemのPagyについて説明します！
また、今までよく使われていたKaminariとの比較も書いているのでお楽しみに😎

### ページネーションとは何か

その前に、ページネーションとは何かについて・メリットを簡単に説明しておきます。
ページネーションとは、ウェブアプリケーションデータにおいて、データを分割して複数のページに分けて表示するテクニックのことを指します。多数のデータを効率よく扱うために重要かつ必須な手段です😎

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  UIとしては、ブログとかの記事一覧ページにある`[1]`,`[2]`,...`[最後]`みたいなやつだね！
</SpeechBubble>

メリットとしては複数あります！

1. **ユーザビリティの向上**
   ユーザーは一度に適切な量のデータだけを見ることができるので、情報過多になりにくいです！
   また、求めているデータを探しやすくもなりますね✨

2. **パフォーマンスの向上**
   一度にロードするデータ量が少なくなるため、ページの読み込み速度が向上し、サーバーへの負荷も軽減されます。これはユーザーにとっても開発者にとっても嬉しいですね😎

3. **SEO対策**
   1ページあたりのコンテンツ量が適切であれば、検索エンジンがページのコンテンツを正しくインデックスしやすくなります。
   また、よく見る無限ローディングと比べても1ページ単位でインデックスをしてくれるので比較するとSEOの観点で優秀です💪

そろそろページネーションを実装してきたくなったと思うので、本題に入っていきます!!

### 記事の目的と対象読者

- Railsでページネーションを実装したい方
- ページネーションのgemをKaminariかPagyのどちらにしようか悩んでいる方

## PagyとKaminariの比較

実装する前に、皆さんも気になってるKaminariとの比較をします！
両方とも実務で使った経験があるので、参考にしてみてください😎

### Kaminariについて

Kaminariとは、Railsにおいてページネーションを実装する上でもっとも有名なgemです！

<ExternalLink url="https://github.com/kaminari/kaminari" />

昔からあり、直感的に使えます✨
また、Googleで「`Rails ページネーション`」と調べると大体がKaminariについての記事になっています。
つまり特徴としては、認知度や検索ボリュームの大きさがあると思います！

{/* prettier-ignore */}
<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  検索結果のページ数が多い(= 検索して記事がいっぱい出てくる)と、自分が詰まった時に解決方法に簡単にたどり着ける可能性が上がるね！
  初学者はgemを選ぶ時の1つの基準にしてみても良いかも！
</SpeechBubble>

### Pagyについて

Kaminariに対し、Pagyは比較的最近リリースされたgemです(2018年~)。

<ExternalLink url="https://github.com/ddnexus/pagy" />

なので、記事の数等は少ないですがもちろんKaminariを意識して作られているので優位な点はかなりあります！
それらを今から紹介していきます💪

### PagyとKaminariの比較

#### パフォーマンス（メモリ使用量・スピード等）

PagyはKaminariよりも少ないメモリの使用量に関わらず、高速に動作します。Kaminariは多機能であるがゆえ、若干メモリ使用量が多くなることがあります。具体的には、KaminariはPagyの約36倍のメモリを使用するそうです😨

また、スピードに関してもPagyに軍配が上がります！
具体的には約40倍Pagyの方が早いです✨✨

#### 使用感

使用感に関しては、僕の体感ベースではあまり変わりません。基本的な使い方をする分には、どちらか片方にしかできない機能というのは特に無いです。

#### パッケージのアップデートサイクル

見落としがちですが、ここを特に気にするべきです！！
Pagyが現時点での最新のリリース日が2023年4月です。
これに比べ、Kaminariは2021年12月です。
Kaminariは良い意味で成熟してるがゆえか、直近のリリースからかなり時間が空いています...。2021年だと、Rails7がリリースされてから1回もリリースされてないことになるので、Turboあたりとの不具合が起こる可能性があるかもしれません💦

### ページネーションにどちらを使うべきか

上記の比較内容を見れば一目瞭然なのですが、僕はPagyを強く推します！！
ただ、今後の開発等によってはKaminari、またはさらに新しいgemのほうがより適している可能性もあるのでその時々で調べてみてください！

## Rails7におけるPagyの実装方法

ここからは、Pagyの使い方を説明していきます！
基本的には公式をなぞる形で説明しますので、より詳細が気になる人はぜひ公式を確認してみてください。

<ExternalLink url="https://ddnexus.github.io/pagy/guides/quick-start/" />

下準備として、`$ rails g scaffold todo title:string body:text`で最低限のTODOリストの状態を作った上で、`seed`でTODOのレコードを100個作ったものを用意しました！

![ページネーション未実装でTODOが100件表示されている一覧画面](/articles/image-1024x874.webp)

今は1ページで100個のTODOが並んでいるので、これをPagyでページネーション化していきます

### インストール・初期設定

まずはとりあえず`Gemfile`への追記 + `$ bundle install`ですね！

```ruby title="Gemfile" {2}
# ...
gem 'pagy'
```

次に下記リンクから`pagy.rb`をダウンロードし、 `config/initializers`に配置します！
<ExternalLink url="https://ddnexus.github.io/pagy/toolbox/configuration/initializer/" />

次に、 `app/controllers/application_controller.rb`に追記します。

```ruby title="app/controllers/application_controller.rb" {2}
class ApplicationController < ActionController::Base
  include Pagy::Backend
end
```

最後に、`helpers/application_helper.rb`に追記します。

```ruby title="helpers/application_helper.rb" {2}
class ApplicationController < ActionController::Base
  include Pagy::Backend
end
```

これで準備完了です💪

### ページネーションの設定手順

ここからは実際にページネーションをあてていきます！
まずは、コントローラー側のTodo.allとなっている部分を書き換えます！

```ruby title="app/controllers/todos_controller.rb" {4,5}
class TodosController < ApplicationController
  # ...
  def index
    # @todos = Todo.all ここを下記に書き換え
    @pagy, @todos = pagy(Todo.all, items: 10)
  end
end
```

これで、ページにアクセスすると表示件数が`items`で設定した10件になっているはずです！

そして、index.html.erbに下記を追記すると、、

```erb title="views/todos/index.html.erb" {2}
<%# 色々な処理... %>
<%== pagy_nav(@pagy) %>
```

![Pagyによるページネーションが表示されたTODO一覧画面](/articles/image-1-1024x544.webp)

ページネーションが出ています！！
数字をクリックして、他のページに飛べるようになりました✨

`<%== pagy_nav(@pagy, link_extra: 'class="border bg-white p-1 rounded"') %>`のように記述することで、任意のclassやidも付与できます💪

## おわりに

今回はPagyの概要から簡単な使い方までを説明しました！
特に難しい設定は無しでページネーションを設定できましたね😎

個人的には、今ページネーションをRailsで実装するならPagyを選びます！
皆さんの参考になれば幸いです🙏


---

## display: contents;を使用したフッターレイアウト

- URL: https://blog.to-ko-s.com/articles/display-contents-footer
- 著者: 寺田拓真
- 公開日: 2023-09-13
- タグ: HTML, CSS

> CSSのdisplay: contents;を活用して、PCとスマホで異なるフッターレイアウトを実装する方法を解説。3カラム構成のフッターをレスポンシブ対応させ、要素を柔軟に並び替える実装例を紹介します


## はじめに

### この記事の概要

こんにちは、たくまです！

みなさんサイトを制作する際、以下のようなレイアウトのフッターを作ることはありませんか？

![PC画面での3カラム構成のフッターレイアウト](/articles/ScreenShot-2023-09-14-0.00.01-1024x266.webp)

画像のような3カラム以上の構成の場合、PC画面では横並びにできますが、SP画面などではそのまま横並びにすることは難しいと思います。
例えばこのようなSP画面では以下のようなレイアウトにする場合、どのように実装するでしょうか。

![SP画面でナビとSNSリンクを横並びにしたフッターレイアウト](/articles/ScreenShot-2023-09-14-0.05.01.webp)

方法は様々あると思いますが、今回は「`display: contents;`」を活用して実装します。

`display: contents;`を使用した要素の並び替えについては、以前にも記事で解説していますので、そちらもご覧ください。

<InternalLink slug="css-display-contents" />

### 対象読者

- HTMLやCSSを勉強中の方
- フッターのレイアウトでお悩みの方
- CSSの引き出しを増やしたい方

## display: contents;について

以前も記事で紹介しましたが、あらためて`display: contents;`についてご紹介します。

`display: contents;`は、親要素内の子要素を親要素自体のコンテキストなしで直接表示し、親要素を無視できます。これにより柔軟なレイアウトを構築し、コンテンツの配置を容易に調整できます。

`display: contents;`を使用する利点は大きく以下の3つがあります。

- **コンテナーの非表示**:
  親要素を非表示にすることなく、その内部のコンテンツを表示できます。これは、タブ切り替えやアコーディオンメニューなど、ユーザーインタラクションを改善するために便利です。
- **シンプルなHTML構造**:
  HTMLのセマンティクスを維持しつつ、よりシンプルな構造でコードを管理できます。これは、アクセシビリティとメンテナンス性を向上させます。
- **フレキシブルなレイアウト**:
  レイアウトの要素を独立して操作でき、レスポンシブデザインに適した柔軟な配置が可能です

個人的には3つ目のフレキシブルなレイアウトで使用することが多いです。
PC画面とSP画面でレイアウトが異なる際に、大掛かりなCSSの変更を行わなくて済むので重宝しています。

## 実装

それでは冒頭のフッターレイアウトを実装してきましょう！

冒頭のPC画面のHTMLとCSSは以下のようになっています。

```html title="HTML" showLineNumbers {5-15}
<div class="c-footer">
  <div class="c-footer__top">
    <div class="c-footer__left-area">ロゴや企業情報など</div>
    <div class="c-footer__navi-area">
      <ul class="c-footer__navi">
        <li>会社概要</li>
        <li>事業案内</li>
        <li>ラインナップ</li>
      </ul>
      <ul class="c-footer__navi">
        <li>買取査定</li>
        <li>お問合せ</li>
      </ul>
    </div>
    <div class="c-footer__right-area">SNSのリンクなど</div>
  </div>
  <div class="c-footer__bottom">
    <p class="c-footer__copy">Copyright Inc.</p>
  </div>
</div>
```

```scss title="SCSS" showLineNumbers
.c-footer {
  width: 100%;
  .c-footer__top {
    padding: 60px 40px 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    @media screen and (max-width: 500px) {
      flex-direction: column;
      gap: 40px 0;
    }
    .c-footer__left-area {
      display: flex;
      flex-direction: column;
      gap: 20px 0;
      align-items: center;
    }
    .c-footer__navi-area {
      display: flex;
      gap: 0 80px;
      .c-footer__navi {
        display: flex;
        flex-direction: column;
        gap: 12px 0;
      }
    }
    .c-footer__right-area {
      display: flex;
      flex-direction: column;
      gap: 20px 0;
      align-items: center;
    }
    .c-footer__text {
      font-size: 20px;
      font-weight: bold;
      @include mq("tab") {
        font-size: 16px;
      }
    }
    .c-footer__border {
      display: none;
    }
  }
  .c-footer__bottom {
    background-color: $main-color;
    width: 100%;
    text-align: center;
    padding: 24px 0;
    .c-footer__copy {
      color: $white-color;
      font-size: 14px;
    }
  }
}
```

今回のポイントはPC画面で表示されている3カラムをそれぞれ`left-area`や`navi-area`,`right-area`のようにブロックに分けている点です。こうすることで、SP画面でのレイアウトがやりやすくなります。
また、`500px`以下では、3カラムが1カラムになるようになっています。

ここからSP画面のレイアウトを実現するために、`display: contents;`を使用します。
まず、上記のHTMLでハイライトされている5〜15行目、つまり`navi-area`から`right-area`までを`c-footer__sp-bottom`というクラスを付与したdivタグで囲います。

```html title="HTML" showLineNumbers
<div class="c-footer">
  <div class="c-footer__top">
    <div class="c-footer__left-area">ロゴや企業情報など</div>
    <div class="c-footer__sp-bottom">
      <div class="c-footer__navi-area">
        <ul class="c-footer__navi">
          <li>会社概要</li>
          <li>事業案内</li>
          <li>ラインナップ</li>
        </ul>
        <ul class="c-footer__navi">
          <li>買取査定</li>
          <li>お問合せ</li>
        </ul>
      </div>
      <div class="c-footer__right-area">SNSのリンクなど</div>
    </div>
  </div>
  <div class="c-footer__bottom">
    <p class="c-footer__copy">Copyright Inc.</p>
  </div>
</div>
```

次に、`c-footer__sp-bottom`にCSSを当てます。

```scss title="SCSS" showLineNumbers
.c-footer__sp-bottom {
  display: contents;
  @media screen and (max-width: 500px) {
    display: flex;
    gap: 0 40px;
  }
}
```

ここで、`display: contents;`をあてます。
上記のようにすることで、`500px`より大きい画面では`display: contents;`により親要素が透過し、`500px`以下では`display: flex;`に切り替わることで`navi-area`と`right-area`がまとめられます。
さらに`display: flex;`により2つのブロックが横並びになります。

以上の記述で、PC画面とSP画面でレイアウトを切り替えることが出来ます。

## さいごに

`display: contents;`を使用したフッターのレイアウトいかがでしたでしょうか。
分けたい要素をラップして、`display: contents;`を適用させるだけなので、簡単にPC画面とSP画面で異なったレイアウトを実現できます。

みなさんも`display: contents;`を活用して、素晴らしいウェブデザインプロジェクトに挑戦しましょう。成功とクリエイティビティあふれるデザインを手に入れるために、そしてウェブの未来を創造するために、今日から始めましょう。


---

## 【React】MantineUIで作るハンバーガーメニュー

- URL: https://blog.to-ko-s.com/articles/react-mantine-hamburgermenu
- 著者: 杉田侑祐
- 公開日: 2023-09-11
- タグ: React, Tailwind CSS

> この記事ではReact専用のUIライブラリのMantineとTailwind CSSをあわせた使い方がわかり、ハンバーガーメニューの作り方が学べます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はTailwind CSSを用いてUIライブラリMantineを使いハンバーガーメニューを作成する方法を説明していきたいと思います。
Mantineについてわからない方は下記を参考にしてください！

<InternalLink slug="react-mantine-ui" />

### 対象読者

- Reactを用いたWEB制作、WEB開発を行っている方
- Tailwind CSSを使用しながらUIライブラリを使用したい方

### 開発環境

- `react`: 18.2.0
- `next.js`: 13.2.3
- `typescript`: 4.9.5
- `@mantine/core`: 6.0.13
- `@mantine/hooks`: 6.0.13

<Callout variant="warning">
  この記事はMantine v6系を対象としています。
  現在はv9系がリリースされており、v7以降でAPIが大幅に変更されているため、最新版を使用する場合は公式ドキュメントを参照してください。
</Callout>

下記のリンク先でフレームワークを選択してください。
今回はNext.jsで行っていきたいと思います！

<ExternalLink url="https://v6.mantine.dev/pages/getting-started/" />

### 完成予定

今回の完成予定は下記になります。

<Video src="/articles/react-mantine-hamburgermenu.mp4" />

### ハンバーガーメニューの実装

まずはメニューボタンから作成します。
メニューボタンですが、MantineUIから`Burger`コンポーネントを使用します。

<ExternalLink url="https://v6.mantine.dev/core/burger/" />

```tsx title="ExamplePage.tsx" showLineNumbers {1,8}
import { Burger } from "@mantine/core"

const ExamplePage: NextPageWithLayout = () => (
  <header className="fixed z-20 flex w-full gap-y-2 bg-blue-500 p-4 text-white shadow">
    <div className="flex w-full max-w-[1366px] justify-between">
      <div className="flex w-full justify-between">
        <div>
          <Burger opened={false} color="#fff" />
        </div>
        <p className="flex w-full items-center justify-center text-xl font-bold">TOKOS.inc</p>
      </div>
    </div>
  </header>
)
```

`props`の`color`で色の指定をしています。
まだ状態管理をしていないので、現状は動かないと思います。
ではここから状態管理を追加して、メニューを押した際のアニメーションを追加していきたいと思います。

```tsx title="ExamplePage.tsx" showLineNumbers {8}
import { Burger } from "@mantine/core"

const ExamplePage: NextPageWithLayout = () => (
  <header className="fixed z-20 flex w-full gap-y-2 bg-blue-500 p-4 text-white shadow">
    <div className="flex w-full justify-between">
      <div className="flex w-full justify-between">
        <div>
          <Burger opened={true} color="#fff" />
        </div>
        <p className="flex w-full items-center justify-center text-xl font-bold">TOKOS.inc</p>
      </div>
    </div>
  </header>
)
```

`props`の`opened`を`true`に変えるとバツになると思います。
この`props`の`opened`が表示状態の管理をしていることがわかったと思います。
ではこのメニューを押した際に`opened`の真偽値を切り替えていきたいので、`props`の`onClick`で押した際の動作を追記していきます。

また、今回は複数のコンポーネントの状態管理に`useDisclosure`というMantineのCustom Hooksを使用していきます。

<ExternalLink url="https://v6.mantine.dev/hooks/use-disclosure/" />

```tsx title="ExamplePage.tsx" showLineNumbers {2,11}
import { Burger } from "@mantine/core"
import { useDisclosure } from "@mantine/hooks"

const ExamplePage: NextPageWithLayout = () => {
  const [isHamburgerOpened, { toggle: hamburgerToggle }] = useDisclosure(false)
  return (
    <header className="fixed z-20 flex w-full gap-y-2 bg-blue-500 p-4 text-white shadow">
      <div className="flex w-full justify-between">
        <div className="flex w-full justify-between">
          <div>
            <Burger opened={isHamburgerOpened} onClick={hamburgerToggle} color="#fff" />
          </div>
          <p className="flex w-full items-center justify-center text-xl font-bold">TOKOS.inc</p>
        </div>
      </div>
    </header>
  )
}
```

`Burger`コンポーネントの`onClick`に`useDisclosure`の`toggle`関数（`hamburgerToggle`）を渡します。
また`opened`に、`toggle`関数によって切り替わった真偽値を渡すようにします。

CustomHooksの`useDisclosure`ですが、公式ドキュメントを見ると、真偽値の管理、`open`、`close`、`toggle`のハンドラーと`onOpen`と`onClose`のコールバックがあります。
今回はコールバック関数は使用しません。

```javascript title="useDisclosureの使い方" showLineNumbers
// 公式のハンドラーの説明より
import { useDisclosure } from "@mantine/hooks"

function Demo() {
  const [opened, handlers] = useDisclosure(false)

  // openedをtrueに
  handlers.open()

  // openedをfalseに
  handlers.close()

  // openedの真偽値を反転
  handlers.toggle()
}
```

今回は、押した時に`toggle`関数（`hamburgerToggle`）を使用して、真偽値の反転をしています。
初期値はメニューが閉じた状態にしたいので、`false`にしています。
これで、メニューボタンの実装は完了です。

次にMantineUIの`Drawer`コンポーネントを使用して、メニューの実装をします。

<Callout variant="warning">
  以下のコードでは`onClose`を省略していますが、`Drawer`の`onClose`は必須propsのためTypeScriptエラーが発生します。
  この後のステップで`onClose`を追加しますので、まずは構造を理解することに集中してください。
</Callout>

```tsx title="ExamplePage.tsx" showLineNumbers {12-25}
import { Burger, Drawer } from "@mantine/core"
import { useDisclosure } from "@mantine/hooks"

const ExamplePage: NextPageWithLayout = () => {
  const [isHamburgerOpened, { toggle: hamburgerToggle }] = useDisclosure(false)
  return (
    <header className="fixed z-20 flex w-full gap-y-2 bg-blue-500 p-4 text-white shadow">
      <div className="flex w-full justify-between">
        <div className="flex w-full justify-between">
          <div>
            <Burger opened={isHamburgerOpened} onClick={hamburgerToggle} color="#fff" />
            <Drawer
              opened={isHamburgerOpened}
              zIndex={0}
              withCloseButton={false}
              classNames={{
                body: "p-0",
                inner: "w-[380px]",
              }}
            >
              <div className="px-4 pt-[78px] font-bold">
                <p className="mb-4">マイページ</p>
                <p className="mb-4">ログアウト</p>
                <p>ホーム</p>
              </div>
            </Drawer>
          </div>
          <p className="flex w-full items-center justify-center text-xl font-bold">TOKOS.inc</p>
        </div>
      </div>
    </header>
  )
}
```

まずは`Drawer`コンポーネントを`@mantine/core`から呼び出します。
ヘッダーより下にしたいので、`props`の`zIndex`を`0`にします。
今回メニューの開閉は`Burger`ボタンで行うので、`props`の`withCloseButton`は`false`にします（デフォルトが`true`）。
`props`の`classNames`でデフォルトのpaddingを消し、メニューの幅を指定しています。

<Callout>
  コンポーネントのデフォルトのCSSを全て無くしたい場合は、`props`で`unstyled`を渡すとデフォルトのCSSはなくなります。
</Callout>

ここから、開く処理と閉じる処理を追記します。

```tsx title="ExamplePage.tsx" showLineNumbers {5,12-27}
import { Burger, Drawer } from "@mantine/core"
import { useDisclosure } from "@mantine/hooks"

const ExamplePage: NextPageWithLayout = () => {
  const [isHamburgerOpened, { close: hamburgerClose, toggle: hamburgerToggle }] = useDisclosure(false)
  return (
    <header className="fixed z-20 flex w-full gap-y-2 bg-blue-500 p-4 text-white shadow">
      <div className="flex w-full justify-between">
        <div className="flex w-full justify-between">
          <div>
            <Burger opened={isHamburgerOpened} onClick={hamburgerToggle} color="#fff" />
            <Drawer
              opened={isHamburgerOpened}
              onClose={hamburgerClose}
              zIndex={0}
              withCloseButton={false}
              classNames={{
                body: "p-0",
                inner: "w-[380px]",
              }}
            >
              <div className="px-4 pt-[78px] font-bold">
                <p className="mb-4">マイページ</p>
                <p className="mb-4">ログアウト</p>
                <p>ホーム</p>
              </div>
            </Drawer>
          </div>
          <p className="flex w-full items-center justify-center text-xl font-bold">TOKOS.inc</p>
        </div>
      </div>
    </header>
  )
}
```

`useDisclosure`に`close`ハンドラーを追記し、`opened`で管理されている真偽値を渡します。
`Drawer`が閉じる際に発火する関数として`useDisclosure`の`close`ハンドラーを渡します。
そうすることにより、メニューが開く際に`isHamburgerOpened`が`true`、メニューが閉じた際に`isHamburgerOpened`が`false`になるという切り替えが可能になります。

## さいごに

今回はMantineの`Burger`コンポーネントと`Drawer`コンポーネント、そしてCustomHooksの`useDisclosure`を使用しました。
やはりかなり簡単に実装できるかなと思いました。
スクラッチで書こうとすると、overlayの箇所の動作や細かいアニメーションを考えるとかなり大変なので、こういう実装はUIライブラリに頼るのも手なのかなと感じます。


---

## ページ内リンクがズレるときの対処法

- URL: https://blog.to-ko-s.com/articles/anchor-link
- 著者: 寺田拓真
- 公開日: 2023-09-03
- タグ: HTML, CSS

> ページ内リンク（アンカーリンク）がずれる原因は固定ヘッダーにある場合が多いです。本記事ではid属性を使った設置方法から、CSSでズレを解消する対処法まで分かりやすく解説します。


## はじめに

### この記事の概要

こんにちは、たくまです！
みなさんはページ内リンクを設置したことはありますか？
このブログの目次にも使用されていますが、ページ内リンクを設置することで、読者が読みたい箇所まで一気にスクロールでき、 **知りたい情報にいちはやくたどり着きやすくなります。** そのため、ユーザビリティの向上につながります。

しかし、ある条件下においてはページ内リンクがうまく設定できない場合があります。

この記事では、ページ内リンクの実装方法や不具合が生じた際の対処法について紹介しますので、ぜひ参考にしてみてください！

### 対象読者

- HTMLやCSSを勉強中の方
- ページ内リンクを設置したい方
- ページ内リンクがズレてしまう方

## ページ内リンクについて

ページ内リンクは、「アンカーリンク」とも呼ばれており、ページ内の好きな場所までクリックすることでスクロールして遷移できるものです。
当ブログのように、目次のような形式で使用されることが多いです。見出しにページ内リンクを設定し、詳細が書かれている該当箇所へ遷移する形式でよく使用されています。

ページ内リンクをうまく設置することで、**読者が知りたい情報に即座にたどり着くことができるようになります。**
例えば当記事の目次で、「ページ内リンクについて」をクリックすると、このセクションにスクロールされます。

このようにページ内リンクは、素早く・正確に知りたい情報を取得できるので、読者の利便性につながるのです。

## ページ内リンクの設置方法

ページ内リンクの設置方法は主に3つあります。

- id属性を使用する
- name属性を使用する
- WordPressでプラグインを使用する

順に紹介していきます。

### id属性を使用する

この方法がもっとも手軽で推奨される方法になります。
理由として、id属性を使用した方法は、divタグ・h1タグ・aタグなど様々なタグで使用できるためです。

設置方法についてご紹介します。
まず、リンクで遷移先に設定したいタイトルにid属性を指定します。idを「link」とした場合は以下のようになります。

```html title="HTML" showLineNumbers
<h1 id="link">リンク</h1>
```

そして、リンク先へ遷移する際にタグは、aタグを使用して以下のように記述します。

```html title="HTML" showLineNumbers
<a href="#link">リンクへとばす</a>
```

ポイントは、id名の前に#をつけることです。#をつけ忘れると遷移しないので、注意しましょう。

### name属性を使用する

2つ目の方法はname属性を使用する方法です。
こちらは基本的にid属性を使用した場合と同じように実装できますが、遷移先もaタグを使用しないといけない点に注意してください。

遷移先のタグは以下のように記述します。

```html title="HTML" showLineNumbers
<a name="link">リンク</a>
```

遷移元のタグはid属性の記述方法と同じです。

```html title="HTML" showLineNumbers
<a href="#link">リンクへとばす</a>
```

### WordPressでプラグインを使用する

WordPressを使用してサイトを制作している場合は、プラグインを使用することも有効です。

代表的なプラグインは「Advanced Editor Tools」です。
使用方法については下記のサイトが参考になります。

<ExternalLink url="https://blogger-no-mori.com/wordpress-page-links/#i" />

リンク先やリンク元のページ内リンクを入れたい箇所にカーソルを合わせて、idを設定するだけで、テキスト編集せずにページ内リンクを簡単に設定できます。
その他にも便利な機能が多いので、ぜひ調べてご使用ください。

## ページ内リンクがずれる際の原因と対処法

ここからは、ページ内リンクがずれる際の原因と対処法についてご紹介します。

### 原因

まず、原因ですが固定ヘッダーによるものが多いです。
固定ヘッダーは、ヘッダー位置をposition: fixedによって画面上部に固定しています。

```css showLineNumbers title="CSS"
.header {
  position: fixed;
  width: 100%;
  height: 100px;
}
```

position: fixedによってヘッダーを固定することで、ヘッダーが浮いた状態になり、遷移先のタイトルなどの要素の上に固定ヘッダーが重なって表示されてしまうため、表示がずれているように見えてしまいます。

### 対処法

今回はCSSで簡単に対処できる方法をご紹介します。
CSSで対処する場合は、遷移先の要素にヘッダーの高さ分のpaddingとmarginを設定することで、ズレを解消できます。

先述したヘッダーと遷移先・遷移元のタグを使用して説明します。

id="link"と設定したタグにanchorというclassを付与しておきます。

```html title="HTML" showLineNumbers
<h1 id="link" class="anchor">リンク</h1>
```

そして、anchorクラスにheaderクラスのheight: 100px;をpadding-topとmargin-topで相殺します。

```css title="CSS" showLineNumbers
.header {
  position: fixed;
  width: 100%;
  height: 100px;
}

.anchor {
  padding-top: 100px;
  margin-top: -100px;
}
```

100pxはヘッダーの高さによって変更してください。

上記のように設定することで、ページ内リンクがずれることを防ぐことが出来ます。

### ページ内リンクが複数ある場合の対処法

同一ページ内にページ内リンクが複数ある場合、上記の対処法を行うとページ内リンク関係なくズレが生じてしまいます。
その際の対処法を紹介します。

ページ内でズレが生じた際は、遷移先の各要素にそれぞれ高さを明示的に与えることによって解消します。
ここでいう高さはheaderの高さではなく、遷移先の要素の高さなので注意してください。
各要素の高さはデザインなどで確認して、正確な高さを付与しましょう。

```css title="CSS" showLineNumbers
.header {
  position: fixed;
  width: 100%;
  height: 100px;
}

.anchor-1 {
  padding-top: 100px;
  margin-top: -100px;
  height: 120px;
}

.anchor-2 {
  padding-top: 100px;
  margin-top: -100px;
  height: 160px;
}

.anchor-3 {
  padding-top: 100px;
  margin-top: -100px;
  height: 180px;
}
```

上記のように設定しましょう。
これで、ページ内でのズレも解消することが出来ます。

## おわりに

今回はページ内リンクについて、設置方法と遷移時にズレる原因・対処法について紹介しました。
設置に関しては、最初に紹介したid属性が手軽で様々なタグに使用もできるので、個人的にはおすすめです。

ページ内リンクは使用する頻度も高いと思うので、ぜひ参考にしてください！


---

## 【React】tailwindcssとMantineUIで作るDatePickerコンポーネント~日本語対応~

- URL: https://blog.to-ko-s.com/articles/react-mantine-datepicker
- 著者: 杉田侑祐
- 公開日: 2023-08-28
- タグ: React, Tailwind CSS

> この記事ではReact専用のUIライブラリのMantineとtailwindcssをあわせた使い方がわかり、DatePickerコンポーネントの作成手順をまとめています。


## はじめに

<Callout variant="warning">
  この記事はMantine v6を使用しています。
  現在はMantine v9がリリースされており、v7以降でAPIが大きく変更されています（本記事で使用している`icon`は`leftSection`にリネームされています）。
  最新版を使用する場合は公式ドキュメントを参照してください。
</Callout>

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回は`Tailwind CSS`を用いてUIライブラリ`Mantine`を使い`DatePicker`コンポーネントを作成する方法を説明していきたいと思います。
`Mantine`についてわからない方は下記を参考にしてください！

<InternalLink slug="react-mantine-ui" />

### 対象読者

- Reactを用いたWEB制作、WEB開発を行っている方
- `Tailwind CSS`を使用しながらUIライブラリを使用したい方

### 開発環境

開発環境は下記になります。

- `react`: 18.2.0
- `next.js`: 13.2.3
- `typescript`: 4.9.5
- `@mantine/core`: 6.0.13
- `@mantine/hooks`: 6.0.13
- `@mantine/dates`: 6.0.13
- `dayjs`: 1.11.8

下記参照内でフレームワークを選択してください。
今回はNext.jsで行っていきたいと思います！
また使用したいパッケージを選択してインストールしてください。
今回は`mantine/core`ではなく`mantine/dates`のコンポーネントを使用しますが、`@mantine/dates`は`@mantine/core`と`@mantine/hooks`に依存しているため、併せてインストールしてください！
また`@mantine/dates`は`dayjs`にも依存しているので、こちらも併せてインストールしてください！

<ExternalLink url="https://v6.mantine.dev/pages/getting-started/" />

### 完成予定

今回の完成予定は下記になります。

<Video src="/articles/react-mantine-datepicker.mp4" />

### DatePickerの実装

いつも通り公式ドキュメントを参照して、一番近しい箇所をコピペしていきたいと思います。

<ExternalLink url="https://v6.mantine.dev/dates/date-picker-input/" />

今回は公式ドキュメントのUsage内をコピーしていきます。
不必要な箇所は削除しておきます。
width関係は別途CSSを当てていくので削除しておきます。

```tsx title="ExamplePage.tsx" showLineNumbers
import { useState } from "react"
import { DatePickerInput } from "@mantine/dates"

const ExamplePage: NextPageWithLayout = () => {
  const [value, setValue] = useState<Date | null>(null)
  return <DatePickerInput placeholder="Pick date" value={value} onChange={setValue} />
}
```

これがベースとなります。

上記よりCSSを当てていきます。
また今回はアイコンも使用するので、アイコンもインポートしておきます。
CSSは適当なので、お好きなようにしてください！

```tsx title="ExamplePage.tsx" showLineNumbers {3,9,11-18}
import { useState } from "react"
import { DatePickerInput } from "@mantine/dates"
import CalendarIcon from "@/assets/CalendarIcon.svg"

const ExamplePage: NextPageWithLayout = () => {
  const [value, setValue] = useState<Date | null>(null)
  return (
    <DatePickerInput
      placeholder="日付を選択"
      value={value}
      onChange={setValue}
      icon={<CalendarIcon width={24} height={24} />}
      classNames={{
        icon: "fill-gray-500",
        input: "border-1 border-gray-200",
        placeholder: "text-gray-200",
        root: "max-w-[294px] bg-white rounded min-w-[120px]",
      }}
    />
  )
}
```

これで基本的な機能は完成していると思います。
ここからはその他必要な機能等を追加していきます。

まずは、入力完了後の入力欄のクリアボタンです。
公式のページ上部タブメニューのComponent propsを確認して追加します。

クリアボタンは`clearable: boolean`でデフォルトは`false`となっているので、`true`にしてあげれば良さそうです。

```tsx title="ExamplePage.tsx" showLineNumbers {19}
import { useState } from "react"
import { DatePickerInput } from "@mantine/dates"
import CalendarIcon from "@/assets/CalendarIcon.svg"

const ExamplePage: NextPageWithLayout = () => {
  const [value, setValue] = useState<Date | null>(null)
  return (
    <DatePickerInput
      placeholder="日付を選択"
      value={value}
      onChange={setValue}
      icon={<CalendarIcon width={24} height={24} />}
      classNames={{
        icon: "fill-gray-500",
        input: "border-1 border-gray-200",
        placeholder: "text-gray-200",
        root: "max-w-[294px] bg-white rounded min-w-[120px]",
      }}
      clearable
    />
  )
}
```

これで入力欄のクリアボタンは完了です。

次は現在英語表記なのを日本語表記に変更したいと思います。

<Callout variant="warning">
  開発環境の説明で触れたように、ここから`dayjs`を使っていくので、まだインストールしてない方はインストールしてください。
</Callout>

ここからカレンダーの表記設定を行っていきます。
日本語設定などのカレンダーの表記設定は`@mantine/dates`内の`DatesProvider`コンポーネントで行っていきます。

```tsx title="ExamplePage.tsx" showLineNumbers {4,9,23}
import { useState } from "react"
import { DatePickerInput, DatesProvider } from "@mantine/dates"
import CalendarIcon from "@/assets/CalendarIcon.svg"
import "dayjs/locale/ja"

const ExamplePage: NextPageWithLayout = () => {
  const [value, setValue] = useState<Date | null>(null)
  return (
    <DatesProvider settings={{ firstDayOfWeek: 0, locale: "ja" }}>
      <DatePickerInput
        placeholder="日付を選択"
        value={value}
        onChange={setValue}
        icon={<CalendarIcon width={24} height={24} />}
        classNames={{
          icon: "fill-gray-500",
          input: "border-1 border-gray-200",
          placeholder: "text-gray-200",
          root: "max-w-[294px] bg-white rounded min-w-[120px]",
        }}
        clearable
      />
    </DatesProvider>
  )
}
```

`DatesProvider`コンポーネントをインポートし囲ってあげれば完了です。
`DatesProvider`コンポーネントのPropsで`settings`にオブジェクトで変更したい内容を渡していきます。

まずは`firstDayOfWeek`ですが、カレンダーの一番左に来る曜日を指定できます。
0~6のnumberを渡すことができ、デフォルトは1で月曜になっています。
今回は日曜スタートにしたいので、0を渡してます。

次に日本語変換ですが、`locale`に`dayjs`から対応する`locale`モジュールを渡す必要があります。
デフォルトは`"en"`です。
今回は日本語にしたいので、`dayjs`の`locale`から`ja`をインポートしそれを渡しています。

これで設定完了になります。

### おまけ機能

ここからは、よく使用する機能の紹介をします。
日付選択時に今日より前の日付を選択できないようにする(特定の日付以前を制限する)機能を紹介します。
公式のComponent propsを確認してPropsを追加していきます。
使用するPropsは`minDate: Date`を使用します。
また今日の日付を渡せば良いので、`new Date()`を使い今日の日付を渡せば完了です。

```tsx title="ExamplePage.tsx" showLineNumbers {21}
import { useState } from "react"
import { DatePickerInput, DatesProvider } from "@mantine/dates"
import CalendarIcon from "@/assets/CalendarIcon.svg"
import "dayjs/locale/ja"

const ExamplePage: NextPageWithLayout = () => {
  const [value, setValue] = useState<Date | null>(null)
  return (
    <DatesProvider settings={{ firstDayOfWeek: 0, locale: "ja" }}>
      <DatePickerInput
        placeholder="日付を選択"
        value={value}
        onChange={setValue}
        icon={<CalendarIcon width={24} height={24} />}
        classNames={{
          icon: "fill-gray-500",
          input: "border-1 border-gray-200",
          placeholder: "text-gray-200",
          root: "max-w-[294px] bg-white rounded min-w-[120px]",
        }}
        minDate={new Date()}
        clearable
      />
    </DatesProvider>
  )
}
```

## さいごに

今回は`Mantine`の`core`パッケージではなく`dates`パッケージを使用しての実装をしてみました。
やはり公式ドキュメントが素晴らしくわかりやすく簡単に実装していくことができると感じました。
他のコンポーネントやhooksも良いものがあればまた紹介します！


---

## 【Tailwind CSS】truncateとline-clampで文字を省略する

- URL: https://blog.to-ko-s.com/articles/tailwind-css-truncate-line-clamp
- 著者: 寺田拓真
- 公開日: 2023-07-23
- タグ: HTML, CSS, Tailwind CSS

> Tailwindのtruncateとline-clampを用いてオーバーした文字を省略する方法を書きました。Tailwindのtruncateとline-clampを利用したい人は必見です。


## はじめに

こんにちは、株式会社TOKOSのたくまです！
今回はTailwindの`truncate`と`line-clamp`を用いてはみ出したテキストを省略する方法を説明していきます。
コーディングをしていくうえで長いタイトル、冗長なパラグラフ、詳細な説明文などを省略して表示したいことがあると思います。
そのような場面でTailwindの`truncate`と`line-clamp`クラスを使うことで簡単に文字を省略できます。
この記事では`truncate`と`line-clamp`の使い方と注意点、それぞれのクラスの違いについて説明していきます！

### 対象読者

- Tailwind CSSを使ったテキストの省略方法を知りたい方
- Tailwind CSSの`truncate`と`line-clamp`プロパティの使い方を知りたい方
- Tailwind CSSを使ったWEB開発を行っている方

## `truncate`

### `truncate`の使用方法

```html title="HTML" showLineNumbers
<div class="w-[200px]">
  <p class="truncate">200pxまで文字を表示させます</p>
</div>

<p class="w-[200px] truncate">200pxまで文字を表示させます</p>

<div>
  <p class="truncate">親要素の幅を指定していない場合省略しません</p>
</div>
```

![truncateで200px幅に省略されたテキストの表示結果](/articles/image-2-1024x85.webp)

上記のように`truncate`を使いたい場合、対象となる文字を囲んでいるタグに対して`truncate`を当てます。

### `truncate`を使用する際の注意点

`truncate`を使用する場合の注意点は3つあります。

1つ目は**親要素または自分自身に幅を指定する必要がある**ことです。
当たり前のことですが幅を指定しなかった場合、横に広がり続けてしまいます。

2つ目は**一行の場合にしか文字を省略できない**ことです。
これは、`truncate`ユーティリティが`white-space: nowrap;`を使用するためです。
複数行の文字の末尾を省略したい場合は、この後に説明する`line-clamp`を使用してください。

3つ目は**子要素に対して一括で`truncate`を当てることができない**ことです。
開発をしていると子要素に対して一括で`truncate`を当てたい時が出てくると思います。

しかし、実際に当ててみようとすると以下のようになってしまいます。

```html title="HTML" showLineNumbers
<div class="w-[200px]">
  <p class="truncate">200pxまで文字を表示させます</p>
  <p class="truncate">200pxまで文字を表示させます</p>
</div>

<div class="w-[200px] truncate">
  <p>200pxまで文字を表示させます</p>
  <p>200pxまで文字を表示させます</p>
</div>

<div class="w-[200px]">
  <div class="truncate">
    <p>200pxまで文字を表示させます</p>
    <p>200pxまで文字を表示させます</p>
  </div>
</div>
```

![親要素にtruncateを指定した場合の子要素への影響の表示結果](/articles/image-4-1024x164.webp)

親要素の`width`指定の方が優先されてしまいます。
子要素に対して一括で`truncate`を当てることはできず、一つひとつ`truncate`を当てていく必要があるようですね。

## `line-clamp`

### `line-clamp`の使用方法

```html title="HTML" showLineNumbers
<div class="w-[200px]">
  <p class="line-clamp-1">200pxまで文字を表示させます</p>
</div>

<p class="w-[200px] line-clamp-1">200pxまで文字を表示させます</p>

<div>
  <p class="line-clamp-1">親要素の幅を指定していない場合省略しません</p>
</div>
```

![line-clamp-1で200px幅に省略されたテキストの表示結果](/articles/image-2-1024x85.webp)

上記のように`truncate`を使う場合と同様に対象となる文字を囲んでいるタグに対して`line-clamp-1`を当てます。
`truncate`と同様に親要素または自身の`width`を指定していない場合、省略されません。

### `line-clamp`が優れている点

`line-clamp`が`truncate`より優れている点は**複数行にわたるテキストの省略ができる**点です。
`truncate`では一行の場合しか省略できないですが、`line-clamp`では指定した行数まで折り返してから省略することが可能です。

```html title="HTML" showLineNumbers
<div class="w-[200px]">
  <p class="line-clamp-1">1行目で折り返し1行目で折り返し1行目で折り返し1行目で折り返し</p>

  <p class="line-clamp-2">2行目で折り返し2行目で折り返し2行目で折り返し2行目で折り返し</p>

  <p class="line-clamp-3">
    3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し
  </p>

  <p class="line-clamp-4">
    4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し
  </p>
</div>
```

![line-clamp-1から4まで各行数で省略されたテキストの比較](/articles/image-5-1024x309.webp)

`line-clamp`の後に指定する数字の行数で省略してくれます。
しかし`line-clamp`も`truncate`と同様に子要素に一括で省略を当てることができないので、こちらも一つひとつ当てていく必要があります。

## おわりに

今回の記事ではTailwindの`truncate`と`line-clamp`を用いてはみ出したテキストを省略する方法を説明しました。
個人的には`truncate`は`line-clamp-1`に置き換えて`line-clamp`で統一してもいいのかなと思っています。
`truncate`も`line-clamp`も親要素または自分自身の`width`を指定しないと省略できないので、`width`の指定を忘れないようにしてください！


---

## 【React】tailwindcssで作るMantineUIのMultiSelectコンポーネント

- URL: https://blog.to-ko-s.com/articles/react-mantine-ui
- 著者: 杉田侑祐
- 公開日: 2023-07-17
- タグ: React, Tailwind CSS

> この記事ではReact専用のUIライブラリのMantineとTailwind CSSをあわせた使い方がわかります。


## はじめに

<Callout variant="warning">
  この記事はMantine v6系を対象としています。
  現在はv9系がリリースされており、v7で`withGlobalStyles`/`withNormalizeCSS`などのAPIが廃止されるなど大きく変更されています。
  最新バージョンを使用する場合は公式ドキュメントを参照してください。
</Callout>

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回は`Tailwind CSS`を用いてUIライブラリ`Mantine`を使い`MultiSelect`コンポーネントを作成する方法を説明していきたいと思います。

<ExternalLink url="https://v6.mantine.dev/" />

### 対象読者

- Reactを用いたWEB制作、WEB開発を行っている方
- `Tailwind CSS`を使用しながらUIライブラリを使用したい方

### MantineUIについて

UIライブラリといえば思いつくのが、`Material-UI`、`BootStrap`、`AntDesign`、`Chakra UI`辺りだと思います。
UIライブラリを用いることで、スピーディーなフロントエンド開発、インタラクティブなUIを実現させることが容易になります。
多くのフロントエンド開発で何かしらのUIライブラリを用いているのではないでしょうか？

UIライブラリのメリットは先程挙げた事になりますが、デメリットももちろんあります。
思いつくデメリットとしては、スタイルの変更が容易ではないことやUIライブラリの制約が強いことではないでしょうか？
場合によっては、`Tailwind CSS`と親和性が低いというところもあると思います。

だったらヘッドレスUIを使えばとなると思いますが、ヘッドレスUIの代表的ライブラリの`HeadlessUI`や`Radix`ではUIの種類が少ないというのもあるのではないでしょうか。

そこで紹介したいのが`Mantine`です。

### Mantineの強み

皆さん`Mantine`は知っていますか？
聞いたこともない人も多いと思うので軽く説明したいと思います！

`Mantine`はReact専用のUIライブラリになります。

私が思う`Mantine`の強みを5つあげたいと思います。

- 豊富なコンポーネントと便利なHooksが用意されている
- `Next.js`はもちろんモダンなフレームワークをサポート
- `TypeScript`ベース
- `Tailwind CSS`を用いてスタイルの上書き可能、ヘッドレスUIのような使用方法が可能
- 公式ドキュメントの可読性の良さ

上記5つの中でもスタイルの上書きできることが、かなり良いなと感じます。

## 開発環境

開発環境は下記になります。

- `react`: 18.2.0
- `next.js`: 13.2.3
- `typescript`: 4.9.5
- `@mantine/core`: 6.0.13

下記参照内でフレームワークを選択してください。
今回は`Next.js`で行っていきたいと思います！
また使用したいパッケージを選択してインストールしてください。
今回は`mantine/core`内にあるコンポーネントを使用するので、`@mantine/core`をインストールしています。

<ExternalLink url="https://v6.mantine.dev/pages/getting-started/" />

## Tailwind CSSとの整合性をあわせる

### 問題点

`Tailwind CSS`×`Mantine`の場合問題となることが2点あります。

- ブレークポイントの整合性
- リセットCSSの整合性

この上記2つを解消しないとスタイルの崩れや、意図しない挙動になってしまいます。

### ブレークポイントの統一

前提として`Tailwind CSS`と`Mantine`でお互いにブレークポイントを持ってます。

下記は`Tailwind CSS`のブレークポイント(初期値)です。

- sm : 640px
- md : 768px
- lg : 1024px
- xl : 1280px
- 2xl : 1536px

次は`Mantine`のブレークポイントです。
(公式では1em=16pxでem表記になってます)

- xs : 576px
- sm : 768px
- md : 992px
- lg : 1200px
- xl : 1408px

上記でも分かる通り、名称と値がそれぞれ違います。
意図しない挙動を避けるために、これを統一する必要があります。
特に問題がなければ`Mantine`側に合わせるのがbetterだと思います。

```javascript title="tailwind.config.js" showLineNumbers
module.exports = {
  theme: {
    extend: {
      // Mantineのbreak-pointに合わせています
      screens: {
        lg: "1200px",
        md: "992px",
        sm: "768px",
        xl: "1408px",
        xs: "576px",
      },
    },
  },
}
```

<Callout variant="warning">
  上記はTailwind CSS v3系の記法です。 
  v4系では設定方法が変わっているので、後述の「TailwindCSSv4を使う場合」を参照してください。
</Callout>

これでブレークポイントの問題は解消です。

### リセットCSSの統合

次にリセットCSSの競合解消です。
様々な解消方法はあると思いますが、個人的には、`Mantine`側のリセットCSSを削除する方法が一番良いかなと感じております。
`Mantine`側のリセットCSSを採用したところ、破壊的なスタイルが多かったためです。
逆に`Tailwind CSS`側のリセットCSSを採用した場合わかる範囲で問題となった箇所は`Button`関係のコンポーネントを使用する際に背景が消える点です。
リセットCSSで背景が消えてもCSSでスタイルを上書きができるので、問題がないと思っています!
また`Mantine`の`Button`コンポーネントを使うよりボタンに関しては自作コンポーネントを使うほうが多いかなと思っています！

<Callout variant="warning">
  すべてのコンポーネントに対して試したわけでは無いので、ご了承ください。
  他に良い方法があればご教示いただけると幸いです。
</Callout>

では`Mantine`のリセットCSSの削除方法ですが、`pages/_app.tsx`の`MantineProvider`内の記述を削除すれば良いです。

```tsx title="pages/_app.tsx" showLineNumbers {17-18}
import { AppProps } from "next/app"
import Head from "next/head"
import { MantineProvider } from "@mantine/core"

export default function App(props: AppProps) {
  const { Component, pageProps } = props

  return (
    <>
      <Head>
        <title>Page title</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>

      <MantineProvider
        withGlobalStyles // [!code --]
        withNormalizeCSS // [!code --]
        theme={{
          /** Put your mantine theme override here */
          colorScheme: "light",
        }}
      >
        <Component {...pageProps} />
      </MantineProvider>
    </>
  )
}
```

ハイライトされている2行を削除します。
今回は`GlobalStyles`も不要なので削除しています。

これで準備完了です。

## コンポーネントの作成例

今回は例として`Mantine`のCoreパッケージの中から`MultiSelect`を使ってみたいと思います。

### 完成予定

今回の完成予定は下記になります。

<Video src="/articles/react-mantine-ui.mp4" />

### MultiSelectの実装

まずは公式ドキュメント内のサイドバーのMANTINE COREのinputs内の`MultiSelect`を押してください。

<ExternalLink url="https://v6.mantine.dev/core/multi-select/" />

ドキュメント内から要件によって近しいものを選択しコピペすればOKになります。
今回は機能的要件はあまり求めていないので一番上にある「A bare minimum example」の必要な箇所をコピペします。

```tsx title="公式ドキュメントのサンプル" showLineNumbers
import { MultiSelect } from "@mantine/core"

const data = [
  { value: "react", label: "React" },
  { value: "ng", label: "Angular" },
  { value: "svelte", label: "Svelte" },
  { value: "vue", label: "Vue" },
  { value: "riot", label: "Riot" },
  { value: "next", label: "Next.js" },
  { value: "blitz", label: "Blitz.js" },
]

const ExamplePage: NextPageWithLayout = () => {
  return <MultiSelect data={data} label="Your favorite frameworks/libraries" placeholder="Pick all that you like" />
}
```

ここから今回の完成に向け必要な箇所、不必要な箇所を修正します。

```tsx title="ExamplePage.tsx" showLineNumbers
import { MultiSelect } from "@mantine/core"

const data = [
  { label: "ユーザー1", value: "userId1" },
  { label: "ユーザー2", value: "userId2" },
  { label: "ユーザー3", value: "userId3" },
  { label: "ユーザー4", value: "userId4" },
  { label: "ユーザー5", value: "userId5" },
  { label: "ユーザー6", value: "userId6" },
  { label: "ユーザー7", value: "userId7" },
]

const ExamplePage: NextPageWithLayout = () => {
  return <MultiSelect data={data} placeholder="ユーザーを選択してください" />
}
```

これでドキュメントのように表示できていると思います。
現状と完成予定と比べると下記と相違があります。

- 全体のスタイリング+(左のユーザーアイコン)
- 閉じる開くに連動する矢印アイコン
- 選択肢がなくなった場合の文字の「選択肢がありません」の表示

はじめにスタイルの調整から行います。

コンポーネントに対し`Props`で`size`等の`Props`を渡すことも可能ですが、細かく調整したい場合はコンポーネント内の要素に個別プロパティを当てることも可能です。
その場合はドキュメント内タブメニューの「Styles API」で確認します。

ドキュメントに書いてある通り、関わってくる箇所(Name)としては`root`、`input`、`value`、`values`辺りでしょうか！
かなりドキュメントも読みやすいのではないでしょうか！

確認後`Tailwind CSS`でスタイリングしていきます。
`classNames`で複数形なので注意してください！

```tsx title="ExamplePage.tsx" showLineNumbers {17-18,22-27}
import { MultiSelect } from "@mantine/core"
import { OutLinePersonIcon } from "@/components/icons" // 自作アイコンコンポーネント

const data = [
  { label: "ユーザー1", value: "userId1" },
  { label: "ユーザー2", value: "userId2" },
  { label: "ユーザー3", value: "userId3" },
  { label: "ユーザー4", value: "userId4" },
  { label: "ユーザー5", value: "userId5" },
  { label: "ユーザー6", value: "userId6" },
  { label: "ユーザー7", value: "userId7" },
]

const ExamplePage: NextPageWithLayout = () => {
  return (
    <div className="max-w-[480px] flex border border-gray-200 shadow rounded-full py-3 px-6">
      {/* ユーザーアイコンの追加 */}
      <OutLinePersonIcon width={32} height={32} className="fill-blue-500" />
      <MultiSelect
        data={data}
        placeholder="ユーザーを選択してください"
        //下記でスタイリング、classNamesなので注意
        classNames={{
          input: "border-0",
          root: "w-full",
          value: "h-8 bg-tint-blue-200",
          values: "overflow-y-scroll h-8",
        }}
      />
    </div>
  )
}
```

上記のように要素に対し個別でスタイルを与えることができます。
どこがどこだかわからない場合はDevツールで確認するのも良いと思います！

![DevToolsでMantine MultiSelectのスタイル構造を確認している様子](/articles/fe1eacea25b5a1c843607d3c2f4124ed.webp)

必要な機能はドキュメント内タブメニューの「Component props」で確認します。

閉じる開くに連動する矢印アイコンは`rightSection`でアイコンを追加し、選択欄が開くとき発火するコールバック関数`onDropdownOpen`、選択欄が閉じるとき発火するコールバック関数`onDropdownClose`を使って矢印の制御をしていきます。

選択欄が開いている状態と閉じている状態を`boolean`で状態管理したいので、`useState`で定義していきます。
三項演算子を用いてアイコンが回転するスタイルを追記していきます。

なお、`OutLinePersonIcon`と`ChevronBottomIcon`は自作のアイコンコンポーネントです。
`react-icons`や`@heroicons/react`などのアイコンライブラリで代用可能です。

```tsx title="ExamplePage.tsx" showLineNumbers {16,30-37}
import { MultiSelect } from "@mantine/core"
import { useState } from "react"
import { OutLinePersonIcon, ChevronBottomIcon } from "@/components/icons" // 自作アイコンコンポーネント

const data = [
  { label: "ユーザー1", value: "userId1" },
  { label: "ユーザー2", value: "userId2" },
  { label: "ユーザー3", value: "userId3" },
  { label: "ユーザー4", value: "userId4" },
  { label: "ユーザー5", value: "userId5" },
  { label: "ユーザー6", value: "userId6" },
  { label: "ユーザー7", value: "userId7" },
]

const ExamplePage: NextPageWithLayout = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <div className="max-w-[480px] flex border border-gray-200 shadow rounded-full py-3 px-6">
      {/* ユーザーアイコンの追加 */}
      <OutLinePersonIcon width={32} height={32} className="fill-blue-500" />
      <MultiSelect
        data={data}
        placeholder="ユーザーを選択してください"
        //下記でスタイリング、classNamesなので注意
        classNames={{
          input: "border-0",
          root: "w-full",
          value: "h-8 bg-tint-blue-200",
          values: "overflow-y-scroll h-8",
          //アイコンの記述
          rightSection: `pointer-events-none fill-gray-500 ${isOpen ? "rotate-180 transition duration-200" : "rotate-0 transition duration-200"}`,
        }}
        rightSection={<ChevronBottomIcon width={24} height={24} fill="#636B7E" />}
        onDropdownOpen={() => setIsOpen((prev) => !prev)}
        onDropdownClose={() => setIsOpen((prev) => !prev)}
        //選択肢が無いときの記述
        nothingFound="選択肢がありません"
      />
    </div>
  )
}
```

これで完成になります。
他にも必要な`props`を選択し自分でカスタムしてみてください！

## Tailwind CSS v4を使う場合

本文はTailwind CSS v3系を前提にしていますが、v4系では設定方法が変わっています。
v4系では`tailwind.config.js`が自動検出されなくなり、CSSファイル内の`@theme`で指定するCSSベースの設定が推奨されています。
従来のJavaScript設定を使う場合は、CSS側で`@config`を宣言すれば後方互換で引き続き利用可能です。
なお`@config`に渡すのはCSSファイルから設定ファイルへの相対パスです。
`app/globals.css`からプロジェクトルートの設定ファイルを読む場合は`@config "../tailwind.config.js";`のようになるため、配置に応じて調整してください。

先述のブレークポイントの統一をv4系で行う場合は下記のようになります。

```css title="globals.css" showLineNumbers
@import "tailwindcss";

@theme {
  --breakpoint-xs: 36rem; /* 576px */
  --breakpoint-sm: 48rem; /* 768px */
  --breakpoint-md: 62rem; /* 992px */
  --breakpoint-lg: 75rem; /* 1200px */
  --breakpoint-xl: 88rem; /* 1408px */
}
```

上記の`rem`換算は`1rem = 16px`を前提にしています。

<ExternalLink url="https://tailwindcss.com/docs/upgrade-guide" />

## さいごに

今回はReact専用のUIライブラリの`Mantine`を紹介しました。
他のライブラリと比べかなり自由度が高いと感じました！
また`Tailwind CSS`を使ってスタイリングできるのは他に無いところではないでしょうか！
今回は`MultiSelect`を使用しましたが、他にも便利なコンポーネントやHooksが用意されているので、みなさんもぜひ使ってみてください！


---

## 【CSS】点線の引き方3選 間隔や長さを調節する方法も紹介

- URL: https://blog.to-ko-s.com/articles/css-dot-border
- 著者: 寺田拓真
- 公開日: 2023-07-09
- タグ: HTML, CSS

> cssで点線を引く方法について3つ解説しました。 用途に合わせて最適な方法を選択できるように紹介しています。


## はじめに

### この記事の概要

こんにちは、たくまです！
みなさんはテキストなどの下に点線を引く際、どのようなCSSをあてていますか？
もっとも簡単な方法として、`border: dotted(dashed)`が思い浮かぶかと思います。
こちらは1行の記載で点線を描画できるから便利ですよね！
ただ、点線を引くにあたって下記のような悩みに直面したことはありませんか？

- 点線の間隔を自由に決めたい
- 点線の長さを自由に決めたい
- 点線の引く場所を自由に決めたい

上記は`border: dotted(dashed)` でもある程度は頑張れますが、柔軟性が乏しいため、今回は他の方法もご紹介したいと思います！

### 対象読者

- HTMLやCSSを勉強中の方
- CSSを用いて点線を引きたい方

## 点線を引く

### `border: dotted(dashed)`の使用

まずは冒頭でも記述した`border`を使用した点線の引き方を紹介します！

HTMLは下記のものを使用します。

```html title="HTML" showLineNumbers
<div class="dotted-line">点線を引くよ</div>
```

CSSは下記のように記述します。

```css title="CSS" showLineNumbers
.dotted-line {
  border: 3px dotted black;
}
```

この記述で表示されるのがこちらです。

![border: dottedで横幅いっぱいに表示された点線](/articles/ScreenShot-2023-07-09-10.10.18-1024x70.webp)

点線が横幅いっぱいまで伸びているので、CSSに`width: fit-content`;を追記しましょう。

```css title="CSS" showLineNumbers
.dotted-line {
  border: 3px dotted black;
  width: fit-content;
}
```

![width: fit-contentを追加してテキスト幅に収まった点線](/articles/ScreenShot-2023-07-09-10.13.36.webp)

これがもっともオーソドックスな点線の引き方です！
みなさんもこの方法で点線を引くことは多いかと思います。
ちなみに、`dotted`を`dashed`にすることで破線にすることも可能です。

![border: dashedで表示された破線の表示例](/articles/ScreenShot-2023-07-09-10.20.29.webp)

この方法は手軽に点線を引けることが魅力ですが、点線の長さや間隔を変える際には不便です。
`border: 3px`の部分の数字を大きくすることで長さを変更することもできますが、長さのみではなく高さも変わってしまうため、全体的に不恰好になります。
試しに`3px`を`10px`に変更してみましょう。

```css title="CSS" showLineNumbers
.dotted-line {
  border: 10px dashed black;
  width: fit-content;
}
```

![border: 10pxに変更して点の大きさと高さが不恰好になった例](/articles/ScreenShot-2023-07-09-10.24.14.webp)

このようになってしまいます。
長さや間隔のみを変更したい場合は、次から紹介する方法がおすすめです！

### backgroundプロパティを使用する

backgroundプロパティを使用することで柔軟なカスタマイズが可能です。
CSSを以下のように記述します。

```css title="CSS" showLineNumbers
.dotted-line {
  width: fit-content;
  background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 2px, transparent 2px, transparent 5px);
  background-size: 5px 2px;
  background-position: bottom;
  background-repeat: repeat-x;
}
```

上記の記述で以下のような点線が表示されます。

![backgroundプロパティで描画した細かい点線の表示例](/articles/ScreenShot-2023-07-09-10.36.43.webp)

コードを解説します。
まず、2行目ですが

- `to right`でグラデーションの開始位置を指定する
- `rgb(0, 0, 0), rgb(0, 0, 0) 2px`で最初の0pxから2pxの位置まで色を指定する(点線の長さを指定している)
- `transparent 2px`, `transparent 5px`は、2pxから5pxの位置は`transparent`で透明にする

次に3行目の`background-size`で、点線の間隔と高さを指定しています。
そして4行目の`background-position`で、点線の位置を決定しています。
最後に5行目の`background-repeat`で、点線を繰り返し表示させるように指定しています。こちらを`repeat-y`にすることで、縦線にできます。

点線の長さを`6px`、間隔を`10px`にしたコードが以下の通りです。

```css title="CSS" showLineNumbers
.dotted-line {
  width: fit-content;
  background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 6px, transparent 6px, transparent 16px);
  background-size: 16px 2px;
  background-position: bottom;
  background-repeat: repeat-x;
}
```

![点線の長さ6px・間隔10pxにカスタマイズした表示例](/articles/ScreenShot-2023-07-09-10.51.51.webp)

記述することが多いので難しく感じるかもしれませんが、まずは上記のコードをコピペして検証ツールなどで数値などをいじってみると分かりやすいと思います！
個人的にはこの方法も慣れたら簡単なのでオススメです！

### 擬似要素を使用する

最後に擬似要素を使用して点線を引く方法をご紹介します！
こちらは引く位置も柔軟に指定できます。

CSSを下記のように記述します。

```css title="CSS" showLineNumbers
.dotted-line {
  position: relative;
}

.dotted-line::after {
  border-bottom: 3px dotted #000;
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  transform: translateX(-50%);
  width: 100px;
}
```

![擬似要素で指定した幅100pxの点線をテキスト下に表示した例](/articles/ScreenShot-2023-07-09-11.02.10.webp)

擬似要素は使い慣れている方も多いかと思いますので、詳しい説明は省きますが、
`width`で点線全体の長さ、`bottom`で点線の位置を指定しています。
`bottom`の数値を変更することで、点線の位置を自由に変更できます。

![bottomの値を変更して点線の位置を調整した表示例](/articles/ScreenShot-2023-07-09-11.05.51.webp)

擬似要素はデザインを忠実に再現する際に使用することが多いかと思います。

## さいごに

今回はCSSで点線を引く方法を3つ紹介しました。
長さや間隔を調整したい場合は2つ目の方法を、位置を調整したい場合は3つ目の方法がおすすめです！
2つ目と3つ目の方法を組み合わせることで、より自分好みにカスタマイズすることも可能ですので、
ぜひお試しください！


---

## 【Rails】定数とは？ 定数を扱うgemの紹介まで【初学者向け】

- URL: https://blog.to-ko-s.com/articles/rails-constant
- 著者: 西原月熙
- 公開日: 2023-07-02
- タグ: Rails

> Railsの初学者向けに、定数の役割と使い方をわかりやすく解説します。さらに定数を効率的に管理できるgemの紹介も含めています。Railsを学び始めた方、定数管理について理解を深めたい方必見の内容です。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、経験者にとっては当たり前ですが、初学者は最初は戸惑う「定数」について解説します！
また、Railsで定数を扱う際のgem「config」の解説もします😎

## 定数って何？

### 定数とは？

「定数」とは読んで字のごとく、変わらない(定まった)数(値)のことです！
例えば、「円周率」は約3.14159という数値で、これは変わることがありません。このような値のことです😎

### 定数の使い方

このような値を実際のコードで書くと以下のような感じになります！

```ruby title="定数の使い方"
PI = 3.14159
# 半径10の円の円周
puts 2 * 10 * PI
```

ポイントしては、全て大文字にすることです。また、変数名を複数単語で表すならそれぞれの単語の間をアンダースコアでつなげます！　(ex: CIRCLE_NAME)

変数として用意しておく理由は、他の箇所で使い回せるからですね。
例えば上記のPIは、他の色々な箇所で使いそうですよね。なのであらかじめ変数にしておいて使い回せるようにします。

ただ、Railsで同じ定数を色々なファイルで扱うには少々工夫が要ります🙄
そこで、以下で解説する「config」を使っていきます！

## gem「config」の使い方

それでは、configの使い方を解説していきます！
まずはGemfileです！

```ruby title="Gemfile"
gem "config"
```

からの `$ bundle install`でインストール完了です💪

次に、設定ファイルを `$ rails g config:install`コマンドで生成します！
これで、`config/settings.yml`, `config/settings/development.yml`, `config/settings/test.yml`, `config/settings/production.yml`の4ファイルができているはずです😎
一旦`config/settings.yml`のみにフォーカスします！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  他の3ファイルはRailsの環境ごとに上書きするための定数です！
</SpeechBubble>

それではいよいよ定数を記述していきます！

```yaml title="config/settings.yml"
math:
  pi: 3.14159
```

この記述で準備OKです！
`.yml`なので、YAMLファイルの書き方に合わせてください。書き方は下記サイトを参考にしてみてください！

<ExternalLink url="https://qiita.com/supercell1023koeda/items/6b1fd399b1957077651a" />

あとは使いたい箇所、例えばcontrollerに下記のように書くことで定数を呼び出すことができます💪

```ruby title="app/controllers/hoge_controller.rb" showLineNumbers {5}
class HogeController < ApplicationController
# ...
  # 受け取ったパラメータに円周率をかける
  def calc
    @answer = params[:radius].to_i * Settings.math.pi
  end
# ...
end
```

`Settings.math.pi`のように、 `Settings`からはじめて、あとは`settings.yml`ファイルのネストの順にドットつなぎにするだけです！

先程は、定数は大文字とアンダースコアで書いて欲しいと言ったのですが、このgemを使う時は慣例的に全て小文字でOKです！

このように定数を1つのファイルで宣言することで、定数一覧を見たい時はそのファイルを確認するだけで良くなり、管理がラクになります✨
また、定数の変更が合った時も1箇所を修正するだけで良くなるので、変更にも強くなりますね😎

## 終わりに

今回は、定数の簡単な説明と、Railsでよく使うgemの紹介をしました。
個人的にはこの「config」はアプリケーションを使う上でほぼ必須だと思っているので、ぜひ取り入れてみてください！

<ExternalLink url="https://github.com/rubyconfig/config" />


---

## 【GSAP】初学者向け！Timelineで作るオープニングアニメーション

- URL: https://blog.to-ko-s.com/articles/gsap-timeline-opening
- 著者: 杉田侑祐
- 公開日: 2023-06-26
- タグ: JavaScript

> GSAPのTimelineを使ったオープニングアニメーションの実装方法を初学者向けに解説。HTML・CSSの構成からJavaScriptでの連続アニメーションの実装手順まで紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform（GSAP）を使い、オープニングアニメーションを実装していきたいと思います。
GSAPの基本的な使い方は下記の記事を参考にしてください！

<InternalLink slug="text-animation-from-gsap" />

### 対象読者

- Web制作でアニメーションの実装をしたい方

## 今回の完成予定

今回はGSAPを用いてオープニングアニメーションを実装してみたいと思います！
GSAPの`Timeline`を使って実装していきます。
今回はHTML&CSSからJavaScriptまで手順を分け解説していきたいと思います。

<Video src="/articles/gsap-timeline-opening.mp4" />

## 環境

動作確認環境はChromeバージョン113です。
今回はリセットCSSを使用しています。
`normalize.css`です。
環境によっては多少スタイルが崩れる可能性があるので注意してください。

## コードの紹介

### HTML＆CSSの記述

```html title="HTML" showLineNumbers
<body>
 <header class="c-header">
  <div class="c-header__content">
   <p class="c-header__logo">TOKOS.inc</p>
   <div class="c-header__list">
    <a href="/" class="c-header__text --home">HOME</a></p>
    <a href="/" class="c-header__text --about">ABOUT US</a>
    <a href="/" class="c-header__text --service">SERVICE</a>
    <a href="/" class="c-header__text --company">COMPANY</a>
    <a href="/" class="c-header__text --contact">CONTACT</a>
   </div>
  </div>
 </header>
 <main class="l-fv">
  <div class="c-fv__bg"></div>
  <div class="c-fv">
   <div class="c-fv__title">
    <p class="c-fv__text">CREATE</p>
    <p class="c-fv__text">PLAY</p>
    <p class="c-fv__text">ENJOY</p>
   </div>
   <div class="c-vertical">
    <p class="c-vertical__text js-line-text">Scroll Down</p>
    <div class="c-vertical__line js-line"></div>
   </div>
   <div class="c-horizontal">
    <p class="c-horizontal__text js-line-text">SINCE 2020 01 23 </p>
    <div class="c-horizontal__line js-line"></div>
     <p class="c-horizontal__text js-line-text">TODAY</p>
    </div>
    </div>
  </main>
</body>
```

```css title="全体のレイアウトを整えるCSS" showLineNumbers
/* ヘッダーのスタイリング */
.c-header {
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100vw;
}

.c-header__content {
  max-width: 1200px;
  margin: auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-header__logo {
  font-size: 24px;
  font-weight: 600;
}

.c-header__list {
  display: flex;
}

.c-header__text {
  padding: 4px;
  font-size: 20px;
  font-family: "Times New Roman", Times, serif;
  margin-left: 12px;
  color: #fff;
}

.c-header__text:first-of-type {
  margin-left: 0px;
}

/* ファーストビューのスタイリング */
.l-fv {
  height: 100vh;
  color: #fff;
  position: relative;
  background-image: url("./image/issen-gsap-demo.jpg");
}

.c-fv {
  max-width: 1200px;
  margin: auto;
}

.c-fv__title {
  font-size: 64px;
  font-weight: 600;
  font-family: "Times New Roman", Times, serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 縦線のアニメーション */
.c-vertical {
  position: absolute;
  bottom: 0;
}

.c-vertical__text {
  font-size: 14px;
  width: fit-content;
  writing-mode: vertical-rl;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  font-weight: 500px;
  font-family: "Times New Roman", Times, serif;
  opacity: 0;
}

.c-vertical__line {
  display: block;
  width: 1px;
  height: 100px;
  background-color: #fff;
  position: relative;
  left: 10px;
  animation: vertical-line 2.5s cubic-bezier(1, 0, 0, 1) infinite;
  opacity: 0;
}

@keyframes vertical-line {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* 横線のアニメーション */
.c-horizontal {
  display: flex;
  align-items: center;
}

.c-horizontal__text {
  gap: 0px 8px;
  font-size: 14px;
  z-index: 200;
  letter-spacing: 0.1em;
  font-weight: 500px;
  font-family: "Times New Roman", Times, serif;
  opacity: 0;
}

.c-horizontal__text:first-of-type {
  margin-right: 12px;
}

.c-horizontal__text:last-of-type {
  margin-left: 12px;
}

.c-horizontal {
  position: absolute;
  top: 140px;
}

.c-horizontal__line {
  display: block;
  width: 100px;
  height: 1px;
  background-color: #fff;
  z-index: 10;
  transform: rotateZ(90deg);
  animation: horizontal-line 2.5s cubic-bezier(1, 0, 0, 1) infinite;
  opacity: 0;
}

@keyframes horizontal-line {
  0% {
    transform: scale(0, 1);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 100% 0;
  }
  100% {
    transform: scale(0, 1);
    transform-origin: 100% 0;
  }
}

/* 背景画像のマスクアニメーション用のスタイル */
.c-fv__bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
}
```

これで全体のレイアウトは一旦OKです！
ここから`Timeline`でアニメーションをつなげる前のテキストアニメーションを作成していきたいと思います！

### テキストアニメーションの作成

今から紹介するテキストアニメーションは`SplitType`というGSAPとは別のライブラリも使用します。
`SplitType`を使うとテキストを分割してくれます。
yarn/npmまたはCDNお好きな方法で使用してください！

<ExternalLink url="https://www.npmjs.com/package/split-type" />

```bash title="yarn/npm" showLineNumbers
yarn add 'split-type'
```

```javascript title="JavaScript" showLineNumbers
import SplitType from "split-type"
```

```html title="CDN" showLineNumbers
<script src="https://unpkg.com/split-type"></script>
```

![SplitTypeを適用するロゴ・ヘッダーリンク・キャッチコピーの三箇所の構成図](/articles/Group-2-1024x563.webp)

インストールできたらアニメーションを施したい三箇所（ロゴ、ヘッダーリンク、キャッチコピー）に`SplitType`を使用したいと思います。

```javascript title="JavaScript" showLineNumbers
const fvText = new SplitType(".c-fv__text")
const headerText = new SplitType(".c-header__text")
const logo = new SplitType(".c-header__logo")
```

これで準備完了です。
まずはヘッダーリンクとキャッチコピーのテキストアニメーションから行っていきます。

まずはアニメーション用にCSSを追記します。

```css title="CSS" showLineNumbers
/* テキストアニメーションの記述 */
/* ヘッダー側 */
.c-header__text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1;
}

/* ヘッダー側 */
.c-fv__text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1;
  margin-top: 32px;
}

.c-fv__text:first-of-type {
  margin-top: 0px;
}

.c-fv__text .char {
  transform: translateY(100px);
  transition: transform 0.5s;
}

.c-header__text .char {
  transform: translateY(-100px);
  transition: transform 0.5s;
  /* 文字間の調整 */
  margin-left: 1px;
}
```

クラス名の`.char`は`SplitType`で分割後のクラス名になります。
気になる方はdevツールで見てみてください！

画面は今何も写っていないと思います。
これで、アニメーション前の準備は完了です。
ここからGSAPでアニメーションを施してきたいと思います。

```javascript title="JavaScript" showLineNumbers
/* ヘッダーリンクのアニメーション */
gsap.to(".c-header__text.--home .char", {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.1 /*テキスト間の遅延時間*/,
  duration: 0.5 /*アニメーションの時間*/,
  ease: Power2.easeInOut,
})
gsap.to(".c-header__text.--about .char", {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.1 /*テキスト間の遅延時間*/,
  duration: 0.5 /*アニメーションの時間*/,
  ease: Power2.easeInOut,
})
gsap.to(".c-header__text.--service .char", {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.1 /*テキスト間の遅延時間*/,
  duration: 0.5 /*アニメーションの時間*/,
  ease: Power2.easeInOut,
})
gsap.to(".c-header__text.--company .char", {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.1 /*テキスト間の遅延時間*/,
  duration: 0.5 /*アニメーションの時間*/,
  ease: Power2.easeInOut,
})
gsap.to(".c-header__text.--contact .char", {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.1 /*テキスト間の遅延時間*/,
  duration: 0.5 /*アニメーションの時間*/,
  ease: Power2.easeInOut,
})

/* キャッチコピーのアニメーション */
gsap.to(fvText.chars, {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  duration: 1 /*アニメーションの時間*/,
  ease: Power2.easeInOut,
})
```

これでヘッダーリンクとキャッチコピー部分のアニメーションは完了です。
ちなみに下記で細かく説明していますので合わせて見ていただければと思います。

<InternalLink slug="gsap-text-animation" />

次にロゴのテキストアニメーションです。

```javascript title="JavaScript" showLineNumbers
gsap.fromTo(
  logo.chars,
  {
    autoAlpha: 0 /*opacity+visibility:hidden;*/,
  },
  {
    autoAlpha: 1 /*opacity+visibility:inherit;*/,
    stagger: 0.05 /*テキスト間の遅延時間*/,
    duration: 1 /*アニメーションの時間*/,
    ease: Power2.easeInOut,
  },
)
```

テキストに`stagger`プロパティで一文字ずつ遅延をかけ、`opacity`でフェードインさせるシンプルなものになります。
これでテキストアニメーションの完了になります。

### Timelineでアニメーションをつなぐ

ここからアニメーションをつないでいきます。
アニメーションの順番は下記になります。

![Timelineで連結するアニメーションの実行順序を示した構成図](/articles/animation-image-1024x564.jpg)

`Timeline`を使用するにあたって、
3番のヘッダーリンクのテキストアニメーションを`Timeline`内に書くと見通しが悪くなります。
なので、あらかじめ関数の中に入れておきます。

```javascript title="JavaScript" showLineNumbers
const headerAnimation = () => {
  /* ヘッダーリンクのアニメーション */
  gsap.to(".c-header__text.--home .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
  gsap.to(".c-header__text.--about .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
  gsap.to(".c-header__text.--service .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
  gsap.to(".c-header__text.--company .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
  gsap.to(".c-header__text.--contact .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
}
```

これで準備は完了です。
あとは`Timeline`でつないでいきます！

```javascript title="JavaScript" showLineNumbers
const tl = gsap.timeline()
/*1.キャッチコピーのテキストアニメーション*/
tl.to(fvText.chars, {
  y: 0,
  stagger: 0.05,
  duration: 1,
  ease: Power2.easeInOut,
})
  /*2.ロゴのテキストアニメーション*/
  .fromTo(
    logo.chars,
    {
      autoAlpha: 0,
    },
    {
      autoAlpha: 1,
      stagger: 0.05,
      duration: 1,
      ease: Power2.easeInOut,
    },
  )
  /*3.ヘッダーのテキストリンクのテキストアニメーション*/
  .call(headerAnimation)
  /*4.テキストの表示*/
  .to(".js-line-text", {
    delay: 0.5,
    autoAlpha: 1,
    duration: 2,
    ease: Power2.easeOut,
  })
  /*5.ラインアニメーションの表示*/
  .to(".js-line", {
    autoAlpha: 1,
  })
  /*6.背景画像の表示*/
  .fromTo(
    ".c-fv__bg",
    {
      autoAlpha: 1,
    },
    {
      duration: 1,
      autoAlpha: 0.2,
      ease: Power2.easeOut,
    },
    ">-1" /*前のアニメーションが終わる1秒前にアニメーションの開始*/,
  )
```

上から、順番通りアニメーションをつないでいってます。
関数を呼び出すのは、`call()`メソッドを使用します。
第一引数にコールバック関数、第二引数にパラメータの配列（デフォルトは`null`）、第三引数にポジション（アニメーション開始時の時間の操作）になります。

<ExternalLink url="https://greensock.com/docs/v3/GSAP/Timeline/call()" />

各アニメーションのイージングや第三引数のポジションを変えると印象も変わってくると思います。

ポジションの指定方法例を下記にまとめてみました、参考にしていただければと思います。

- `+=3` Timelineが開始から3秒後に実行
- `-=3` Timelineが終了から3秒前に実行
- `<+3`（`<3`と同じ）前のアニメーション開始から3秒後に実行
- `>-3` 前のアニメーション終了3秒前に実行

上記以外にも様々な方法で指定できるので、気になる方は下記を参考にしてみてください。

<ExternalLink url="https://greensock.com/docs/v3/GSAP/Timeline" />

### 全体のコード

```html title="HTML" showLineNumbers
<body>
  <header class="c-header">
    <div class="c-header__content">
      <p class="c-header__logo">TOKOS.inc</p>
      <div class="c-header__list">
        <a href="/" class="c-header__text --home">HOME</a>
        <a href="/" class="c-header__text --about">ABOUT US</a>
        <a href="/" class="c-header__text --service">SERVICE</a>
        <a href="/" class="c-header__text --company">COMPANY</a>
        <a href="/" class="c-header__text --contact">CONTACT</a>
      </div>
    </div>
  </header>
  <main class="l-fv">
    <div class="c-fv__bg"></div>
    <div class="c-fv">
      <div class="c-fv__title">
        <p class="c-fv__text">CREATE</p>
        <p class="c-fv__text">PLAY</p>
        <p class="c-fv__text">ENJOY</p>
      </div>
      <div class="c-vertical">
        <p class="c-vertical__text js-line-text">Scroll Down</p>
        <div class="c-vertical__line js-line"></div>
      </div>
      <div class="c-horizontal">
        <p class="c-horizontal__text js-line-text">SINCE 2020 01 23</p>
        <div class="c-horizontal__line js-line"></div>
        <p class="c-horizontal__text js-line-text">TODAY</p>
      </div>
    </div>
  </main>
</body>
```

```css title="CSS" showLineNumbers
/* ヘッダーのスタイリング */
.c-header {
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100vw;
}

.c-header__content {
  max-width: 1200px;
  margin: auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-header__logo {
  font-size: 24px;
  font-weight: 600;
}

.c-header__list {
  display: flex;
}

.c-header__text {
  padding: 4px;
  font-size: 20px;
  font-family: "Times New Roman", Times, serif;
  margin-left: 12px;
  color: #fff;
}

.c-header__text:first-of-type {
  margin-left: 0px;
}

/* ファーストビューのスタイリング */
.l-fv {
  height: 100vh;
  color: #fff;
  position: relative;
  background-image: url("./image/issen-gsap-demo.jpg");
}

.c-fv {
  max-width: 1200px;
  margin: auto;
}

.c-fv__title {
  font-size: 64px;
  font-weight: 600;
  font-family: "Times New Roman", Times, serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 縦線のアニメーション */
.c-vertical {
  position: absolute;
  bottom: 0;
}

.c-vertical__text {
  font-size: 14px;
  width: fit-content;
  writing-mode: vertical-rl;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  font-weight: 500px;
  font-family: "Times New Roman", Times, serif;
  opacity: 0;
}

.c-vertical__line {
  display: block;
  width: 1px;
  height: 100px;
  background-color: #fff;
  position: relative;
  left: 10px;
  animation: vertical-line 2.5s cubic-bezier(1, 0, 0, 1) infinite;
  opacity: 0;
}

@keyframes vertical-line {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* 横線のアニメーション */
.c-horizontal {
  display: flex;
  align-items: center;
}

.c-horizontal__text {
  gap: 0px 8px;
  font-size: 14px;
  z-index: 200;
  letter-spacing: 0.1em;
  font-weight: 500px;
  font-family: "Times New Roman", Times, serif;
  opacity: 0;
}

.c-horizontal__text:first-of-type {
  margin-right: 12px;
}

.c-horizontal__text:last-of-type {
  margin-left: 12px;
}

.c-horizontal {
  position: absolute;
  top: 140px;
}

.c-horizontal__line {
  display: block;
  width: 100px;
  height: 1px;
  background-color: #fff;
  z-index: 10;
  transform: rotateZ(90deg);
  animation: horizontal-line 2.5s cubic-bezier(1, 0, 0, 1) infinite;
  opacity: 0;
}

@keyframes horizontal-line {
  0% {
    transform: scale(0, 1);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 100% 0;
  }
  100% {
    transform: scale(0, 1);
    transform-origin: 100% 0;
  }
}

/* テキストアニメーションの記述 */
/* ヘッダー側 */
.c-header__text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1;
}

/* ヘッダー側 */
.c-fv__text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1;
  margin-top: 32px;
}

.c-fv__text:first-of-type {
  margin-top: 0px;
}

.c-fv__text .char {
  transform: translateY(100px);
  transition: transform 0.5s;
}

.c-header__text .char {
  transform: translateY(-100px);
  transition: transform 0.5s;
  /* 文字間の調整 */
  margin-left: 1px;
}

/* 背景画像のマスクアニメーション用のスタイル */
.c-fv__bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
}
```

```javascript title="JavaScript" showLineNumbers
const fvText = new SplitType(".c-fv__text")
const headerText = new SplitType(".c-header__text")
const logo = new SplitType(".c-header__logo")

const headerAnimation = () => {
  /* ヘッダーリンクのアニメーション */
  gsap.to(".c-header__text.--home .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
  gsap.to(".c-header__text.--about .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
  gsap.to(".c-header__text.--service .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
  gsap.to(".c-header__text.--company .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
  gsap.to(".c-header__text.--contact .char", {
    y: 0,
    stagger: 0.1,
    duration: 0.5,
    ease: Power2.easeInOut,
  })
}

const tl = gsap.timeline()
/*1.キャッチコピーのテキストアニメーション*/
tl.to(fvText.chars, {
  y: 0,
  stagger: 0.05,
  duration: 1,
  ease: Power2.easeInOut,
})
  /*2.ロゴのテキストアニメーション*/
  .fromTo(
    logo.chars,
    {
      autoAlpha: 0,
    },
    {
      autoAlpha: 1,
      stagger: 0.05,
      duration: 1,
      ease: Power2.easeInOut,
    },
  )
  /*3.ヘッダーのテキストリンクのテキストアニメーション*/
  .call(headerAnimation)
  /*4.テキストの表示*/
  .to(".js-line-text", {
    delay: 0.5,
    autoAlpha: 1,
    duration: 2,
    ease: Power2.easeOut,
  })
  /*5.ラインアニメーションの表示*/
  .to(".js-line", {
    autoAlpha: 1,
  })
  /*6.背景画像の表示*/
  .fromTo(
    ".c-fv__bg",
    {
      autoAlpha: 1,
    },
    {
      duration: 1,
      autoAlpha: 0.2,
      ease: Power2.easeOut,
    },
    ">-1" /*前のアニメーションが終わる1秒前にアニメーションの開始*/,
  )
```

## さいごに

すこし説明が長くなりましたが、コード量に関してはかなり少ないと思います。
今回は紹介できなかったですが様々なメソッドのおかげで複雑なアニメーションも簡単に実装できると思います。
初学者の方でも簡単に実装できるのがGSAPの良いところだと思います！


---

## 【Rails7】RSpecとは？ 導入から使い方まで【初学者向け】

- URL: https://blog.to-ko-s.com/articles/rspec-introduction
- 著者: 西原月熙
- 公開日: 2023-06-17
- タグ: Ruby, Rails

> Rails 7でRSpecを使うための解説。RSpecとは何かから始まり、その導入方法と使い方までを初学者にも理解しやすい形で解説します。テスト駆動開発を学びたい方におすすめの内容です。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回はRubyのテストフレームワークであるRSpecについて、導入方法から簡単な使い方までを説明しようと思います！
初学者向けに詳細に解説するのでぜひ最後まで読んでください😎

### 対象読者

- Ruby(Rails)でテストを書いてみたい人
- RSpecの最新の導入方法を知りたい人

## RSpecとは

### テストとは

そもそも、「テストとは何？🤔 」という人のために超簡単にテストの説明をします。
テストとは、自分が書いたプログラムが意図した動作するかどうかを確認する手続きのことです！
例えば数学の問題集を解くとき、答えが合っているか確認しますよね。プログラムもその動作が予期した通りに行われているかを検証する必要があります。これを行うのが「テスト」です！

テストには種類が色々ありますが、まずはテストとはこういうものなんだということを抑えておいてください💪

### RSpecの概要

RSpecは、Ruby言語のテスト用のフレームワーク(gem)です!
他のテストフレームワークと同じく、プログラムの出力や状態を検証し、期待する結果が得られるかをチェックできます。
Railsとの親和性も高く、慣れればスムーズにテストを記述できるので、多くのRuby/Rails開発者が使っているgemです✨

### なぜRSpecを使うか

RSpecの特徴は記述の読みやすさです！
英語の文法に近い形でテストを記述できるため、テストコードがそのまま仕様書としての役割も果たせます💪
コードを読むだけで何をテストしているのかが明確にわかるという大きな利点となります。
日本語でも説明自体は書けるので、英語の弱い僕のような日本人でも直感的に読めるはずです!

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  とはいえ、RubyやRailsのいつもの書き方と若干違うので、書けるようになるまでは一定の練習が必要となります、、、
  ここは慣れるまでの辛抱ですので頑張りましょう🥹
</SpeechBubble>

### 競合gem

RSpec以外のテストフレームワークとしては、元々Rubyに組み込まれているMinitestというライブラリがあります。
Railsにももちろん標準でMinitestが含まれていますが、RSpecの方がより自然な記述や詳細な機能を持つので、RSpecを導入することが多いです💪

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  ググった時に出てくる記事の数もRSpecの方が多いので、迷ったらRSpecを選択しておけば間違いは無いです！
</SpeechBubble>

## 導入方法

それではいよいよRSpecと、それに関係するgem群のインストール・設定を行っていきます！
RSpec以外のgemは無くてもテスト自体はできますが、あったほうがより効率よくテストができるはずなので是非入れてみましょう💪

### RSpec

まずは何と言ってもRSpecです！

```ruby title="Gemfile" showLineNumbers {3}
# ...
group :development, :test do
  gem "rspec-rails"
end
# ...
```

上記の様にGemfileに追記をしてから `$ bundle install`を行ってください！
(Rails前提なので、`rspec-rails`というgemを入れるので注意！)

その後、`config/application.rb`にも追記します。

```ruby title="config/application.rb" showLineNumbers {11}
# ...
    config.generators do |g|
      g.test_framework :rspec
    end
# ...
```

これだけで準備完了です😎
これで `$ rails g controller` や `$ rails g model`をするタイミングで自動でRSpec用のファイルも作成されるようになるので、プロジェクトの最初に導入しておくと良いですね✨

### `factory_bot_rails`

次は、 `factory_bot_rails`というgemを導入します！
このgemを使うことで、モデル(DB)のデータを簡単に作成できるようになります！
例えば、`email`カラムを持つ`user`モデルがあったとして、この`email`のバリデーションをテストしたいと思います。
その際に、`email`カラムに関係無い`name`カラムが必須だったら適当に値を入れておいてほしいですよね？
こんな場合に`factory_bot_rails`を使えばサクッとデータを作れて検証できます💪

それでは導入していきます！
と言ってもGemfileに追記して、`$ bundle install`をするだけです！

```ruby title="Gemfile" showLineNumbers {3,4}
# ...
group :development, :test do
  gem "rspec-rails"
  gem "factory_bot_rails"
end
# ...
```

細かい使い方は後ほど説明します！

### `faker`

次は、 `faker`というgemを導入します！
こちらは、`factory_bot_rails`との合わせ技として使うgemになります。
先程`users`テーブルの`name`カラムに値を記述しておこうという話をしたのですが、`factory_bot_rails`だけだと毎回同じ値になります🤔
`"太郎"`だったらずっと`"太郎"`が入力されてしまうということですね😂
実際にアプリケーションが運用される際に`"太郎"`くんだけが`users`テーブルに登録されるというのは少々現実的では無いので、テストとしての精度もやや悪くなりそうですよね😵‍💫
そこで`faker`の出番です！
このgemを使うことで毎回ランダムな値を入れることができるので、実際のアプリケーションに即した形にできます✨

こちらも使い方は後ほど解説するので一旦Gemfileに追記して`$ bundle install`をしておいてください！

```ruby title="Gemfile" showLineNumbers {5}
# ...
group :development, :test do
  gem "rspec-rails"
  gem "factory_bot_rails"
  gem "faker"
end
# ...
```

### `rubocop-rspec`

最後に、`rubocop-rspec`というgemを紹介します！
こちらは、前提としてRuboCopというgemをインストールしている場合に追加で使うgemです。
RuboCopを導入していない方は下記記事を参考にしてインストール・導入をしてみてください💪

<InternalLink slug="rubocop-setting" />

一旦RuboCopが導入されている前提で進めさせていただきます🙏
RuboCopの設定をしない方は飛ばしてください。
まずは、いつものようにGemfileに追記します。

```ruby title="Gemfile" showLineNumbers {7}
# ...
group :development, :test do
  gem "rspec-rails"
  gem "factory_bot_rails"
  gem "faker"
  gem "rubocop", require: false
  gem "rubocop-rspec", require: false
end
# ...
```

次に`.rubocop.yml`に追記をします!

```yaml title=".rubocop.yml" showLineNumbers {4}
inherit_from: .rubocop_todo.yml

require:
  - rubocop-rspec
# ...
```

これだけで準備完了です！
あとはいつものように `$ bundle exec rubocop`を行うことで、RSpecに関するlintも行ってくれるようになります✨
RSpecとRuboCopの両方を使用している場合はぜひこのgemも追加してみてください😎

## テストの記述例 (モデルのバリデーションを例に)

ここからは実際にコードを少し書いてテストをしてみようと思います！
なるべく分かりやすく記述するつもりなので、頑張ってついてきてください😏

前提として、`name`, `email`カラムを持つ`users`テーブルに関して、バリデーションのテストを行おうと思います！
バリデーションは下記のものとします。

```ruby title="app/models/user.rb" showLineNumbers
class User < ApplicationRecord
  # nameカラムは「必須 + 20文字以内」
  validates :name,  presence: true, length: { maximum: 20 }
  # emailカラムは「必須 + ユニーク(一意) + メールアドレスにありがちなパターン」
  validates :email, presence: true, uniqueness: true, format: { with: /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i }
end
```

それではこのバリデーションが上手くはたらいているかどうかのテストを記述していきます！

### `factory_bot_rails`, `faker`の設定

まずは、`user`モデルのインスタンスを作れるように`factory`の設定をします!
`spec/factories/users.rb`が無い人はファイルをこの位置に作ってください!

```ruby title="spec/factories/users.rb" showLineNumbers
FactoryBot.define do
  factory :user do
    name { Faker::Name.name }
    sequence(:email) { |n| "user-#{n}@gmail.com" }
  end
end
```

順番に簡単に説明します!

#### 1,2行目

1行目は、これから`FactoryBot`の記述をするという宣言です。
2行目の`:user`という記述で、`users`テーブルのインスタンスを生成するという意味になります。

#### 3行目

`name`カラムの自動記述の設定です！
波括弧の中の値が`user.name`として使われます。今回は`faker`との合わせ技です！
`Faker::Name.name`とすることで、名前っぽいテキストがランダムでここに入ります✨
(ここに`"太郎"`と書いたらずっと`"太郎"`が入ります)

`faker`のランダムな生成テキストのジャンルを変えたい場合は以下ドキュメントを参考にしてみてください！

<ExternalLink url="https://github.com/faker-ruby/faker#generators" />

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `Faker::JapaneseMedia::OnePiece.character`としたら `"Monkey D. Luffy"` とか出るのは面白いです🤣
</SpeechBubble>

#### 4行目

`email`カラムの自動記述の設定です！
`sequence`という記述が出てきました。これは連続して`user`を生成するときに、値をインクリメント(1ずつ増加)しながら記述してくれるという優れものです✨
今回の場合は、1人目の`user`は `"user-1@gmail.com"` が、2人目の`user`には `"user-2@gmail.com"` が入ります。こうすることでユニーク制約を回避しながら`user`を何人も生成できるようになります💪

一旦これで`factory`の記述は以上です、それではテストを記述していきましょう！！

### RSpecの記述

`spec/models/user_spec.rb`に記述していくので、ファイルが無い人はディレクトリを含め作成してください！
それではまずは全体の記述をします！

```ruby title="spec/models/user_spec.rb" showLineNumbers
require "rails_helper"

# bundle exec rspec ./spec/models/user_spec.rb で実行
RSpec.describe User do
  context "バリデーション" do
    it "emailの正規表現が正しいこと" do
      user = build(:user, email: "info@to-ko-s.com")
      expect(user).to be_valid

      user.email = "info@to-ko-s"
      expect(user).to be_invalid

      user.email = "info.to-ko-s.com"
      expect(user).to be_invalid
    end
  end
end
```

#### 1行目

これはお作法なので、とりあえず記述しておきましょう！

#### 4行目

ここもお作法です、テスト対象となるモデルのクラスを書いておきましょう。

#### 5行目

`context` : どういう背景のテストなのかを記述します。ここではバリデーションという背景でテストを行うのでこのような記述をしています!

#### 6行目

`it` :「〇〇なこと」というような形でテストの内容を記述します！ 今回は文字通り「`email`の正規表現が正しいこと」をテストしたいのでこのように書いています!

#### 7行目

`build(:user, email: "info@to-ko-s.com")` : ここでやっと先程の`factory`を使った記述が出てきます！
`build(:user)` と書くことで `User.build(...)` と同じ意味で、`factory`を使って`build`することになります！
さらに、第二引数以降に上書きしたい値を[キー: バリュー] の形で指定もできます✨
今回は`email`のバリデーションをテストするので、`email`の値は色々な値に変更したいです。なので、このような書き方になっています！

7行目では、まずはバリデーションが正しく通ることを確認したいので、 `"info@to-ko-s.com"` という正常なメールアドレスを入れて`build`します！

#### 8行目

`expect(user).to be_valid`は`expect()` 部分と`be_valid`部分に分けて解説します!
`expect()` の引数には、テストしたい値を入れます！
`be_valid`は、`expect()` の引数にモデルのインスタンス変数が入っている場合、バリデーションが通るかどうかを試してくれます!

そこで、 `expect(user).to be_valid`とすることで、7行目で`build`した`user`のインスタンス変数がバリデーションを通るかどうかを試しているというわけです😎

#### 10,11行目

こちらでは7,8行目の逆で、バリデーションが通らないことを確かめています！
違う点として、`user.email`に通常のメールアドレスではあり得ないような `"info@to-ko-s"` を入れています！ (`@`マーク以降にドットが入らないのはメールアドレスとしておかしいです!)
プラスで、8行目は`be_valid`としていましたが、今回は`be_invalid`としています。こうすることでバリデーションが**通らない**ことをテストしている訳です💪

#### 13,14行目

こちらも基本的には10,11行目と同じことをしているので解説はしません！

### RSpecの実行

それではいよいよRSpecを実行してみましょう！

```bash title="ターミナル"
$ bundle exec rspec
```

上記コマンドでテストが実行されます！
結果としては画像のようになってればOKです✨

![RSpecのテスト実行結果が成功している画面](/articles/image-2-2.webp)

逆にテストが通っていないときは赤い文字でfailure(失敗)になるはずです！
試しに、7行目の `"info@to-ko-s.com"` を`"infoto-ko-s.com"`に変えて実行してみましょう

![RSpecのテスト実行結果が失敗している画面](/articles/image-3-1.webp)

こうなっていると何かがおかしいので、書き換えて成功の形にしてください💪

## おわりに

今回はRSpecの基本的な説明から導入方法、そして簡単なテストの記述までを解説しました。
これらの知識があれば、あなたもRuby/Railsでテストを始める足がかりになるはずです！
テストは品質の高いアプリケーションを作るための強力なツールなので、ぜひRSpecを用いた開発を体験してみてください！

Minitestについても知りたい方がいたら、[この本](https://amzn.to/3Pi6oTz)に分かりやすく書かれているので是非参考にしてみてください🙏

また、RSpecについて詳しく知りたい場合は以下オススメ記事を読んでみてください✨

<ExternalLink url="https://qiita.com/jnchito/items/42193d066bd61c740612" />


---

## スマホで100vhが画面高さいっぱいにならない時の対処法

- URL: https://blog.to-ko-s.com/articles/css-viewport-height
- 著者: 成岡拓哉
- 公開日: 2023-06-11
- タグ: HTML, CSS, JavaScript

> スマホで100vhが画面高さいっぱいにならない問題の原因と対処法を解説。dvhの使用方法とカスタムプロパティ+JavaScriptによる2つの実装方法を紹介します。


## はじめに

こんにちは！株式会社TOKOSのエンジニアのタクヤです！
今回は、スマホで`100vh`が画面高さいっぱいにならない時の対処法をご紹介します。

今回は下記2つの方法をご紹介します。

1. `dvh`を使う
2. カスタムプロパティ + JavaScriptを使う

プロジェクトに合わせて使い分けてください！

### 環境

動作確認環境はiOS Safariバージョン16.5です。
リセットCSSを使用しています。

<ExternalLink url="https://github.com/necolas/normalize.css/blob/master/normalize.css" />

環境によっては多少スタイルが崩れる可能性があるため、十分に注意が必要です。

## vh, dvhについて

### 画面高さいっぱいを100vhで実装した時の問題

画面の高さいっぱいのメインビジュアルなどの要素を作る時、`height: 100vh`を指定していませんか？
そうすると、PCでは問題ないのにスマホでは高さが合わず上手くいきません。

原因は、スマホだとツールバーやアドレスバーといった動的バーが存在するため、画面高さが常に一定ではないからです。

![スマホでの動的バーによる高さの問題](/articles/text-1016x1024.jpg)

### 100vhについて

画面高さいっぱいを実現する時、`height: 100vh`をよく使いますが、その`100vh`は画面いっぱいの高さではなく、厳密には動的バーが表示されていない時の高さです。

![100vhの高さの説明](/articles/text-2-1024x1009.jpg)

そのため、動的バーが表示されている時（ページを上方向にスクロールした時など）には画面高さいっぱいになっていないのです。

### その他のvhについて

私も最近まで知らなかったのですが、`vh`には他に似たようなモノが存在します。

- `svh`
  動的バーが表示されている状態の画面高さの1%
- `lvh`
  動的バーが表示されていない状態の画面高さの1%
- `dvh`
  動的バーの表示非表示を考慮した画面高さの1%
  簡単に言うと、`svh`と`lvh`を出し分けてくれるものです。

これら以外にもあるそうですが今回の説明は3つまでにします。
（画面横方向の`vw`も同じようにあります。）

`dvh`を使えば常に画面高さいっぱいを実現できそうです。

## 実装

### dvhで実装してみる

`dvh`を使用してスマホで画面高さいっぱいを実装する方法を、`vh`の場合と併せて説明します。

```html title="HTML" showLineNumbers
<div class="spacer"></div>
<!-- 100vhを指定する要素 -->
<div class="box --vh">
  <div class="item --top">90%</div>
  <div class="item --bottom">10%</div>
</div>
<div class="spacer"></div>
<!-- 100dvhを指定する要素 -->
<div class="box --dvh">
  <div class="item --top">90%</div>
  <div class="item --bottom">10%</div>
</div>
```

```css title="CSS" showLineNumbers
.box {
  color: #fff;
  font-size: 32px;
}

/* 100vhを指定する要素 */
.box.--vh {
  align-items: center;
  height: 100vh;
}

/* 100dvhを指定する要素 */
.box.--dvh {
  height: 100dvh;
}

.item {
  align-items: center;
  display: flex;
  justify-content: center;
}

.item.--top {
  background-color: #34d276;
  height: 90%;
}

.item.--bottom {
  background-color: #2cb5b9;
  height: 10%;
}

.spacer {
  background-color: #e4e4e4;
  height: 500px;
}
```

### 100vhの場合

`100vh`の場合、動的バーが表示されていると高さいっぱいになってくれていないことがわかります。

![100vhの場合の表示結果](/articles/vh-1024x947.jpg)

### 100dvhの場合

反対に、100dvhの場合だと動的バーが表示されていても高さいっぱいになってくれています。

![100dvhの場合の表示結果](/articles/dvh-1024x947.jpg)

dvhを使えば簡単に実装できましたね！
ですが、dvhにも大きな問題点があります。。。

### 対応しているブラウザが少ない

なんと`dvh`ですが、対応しているブラウザが全くもって少ないです。
iOS safariの場合16.4以降のみ対応のため、実用レベルになるまで少し時間がかかりそうです。

![dvhの対応ブラウザ](/articles/ScreenShot-2023-06-12-2.34.56-1024x554.webp)

### カスタムプロパティ + JavaScriptを使う

`dvh`はまだ実用レベルではないため、別の方法をご紹介します。
CSSのカスタムプロパティとJavascriptを使用する方法です。

```html title="index.html" showLineNumbers
<div class="spacer"></div>
<!-- カスタムプロパティ + JavaScript -->
<div id="custom" class="box --custom">
  <div class="item --top">90%</div>
  <div class="item --bottom">10%</div>
</div>
<div class="spacer"></div>
```

```css title="style.css" showLineNumbers
.box {
  color: #fff;
  font-size: 32px;
}

/* カスタムプロパティ + JavaScript */
.box.--custom {
  height: 100vh; /* フォールバック */
  height: calc(var(--custom, 1vh) * 100);
}

.item {
  align-items: center;
  display: flex;
  justify-content: center;
}

.item.--top {
  background-color: #34d276;
  height: 90%;
}

.item.--bottom {
  background-color: #2cb5b9;
  height: 10%;
}

.spacer {
  background-color: #e4e4e4;
  height: 500px;
}
```

```javascript title="app.js" showLineNumbers
const setCustomHeight = () => {
  const customVhElement = document.getElementById("custom") // 対象の要素を取得
  const customVh = window.innerHeight * 0.01 // 画面高さを取得
  customVhElement.style.setProperty("--custom", `${customVh}px`) // カスタムプロパティに値を入れる
}

// 画面にリサイズがあった時に処理を実行
window.addEventListener("resize", setCustomHeight)

// 処理の初期実行
setCustomHeight()
```

画面がリサイズされる度に関数を呼んでいます。
その関数は、画面高さを計算し、`--custom`というカスタムプロパティに対してその計算した値を入れてくれます。
これで、動的バーが表示されても要素の高さがそれに応じて変化してくれるため、画面高さいっぱいが実現できます。

ブラウザやデバイスの差異を気にする必要はありません。

![カスタムプロパティとJavaScriptを使った表示結果](/articles/custom-1024x947.jpg)

## さいごに

今回は、スマホで100vhが画面高さいっぱいにならない時の対処法について紹介しました。
①dvhを使う方法と、②カスタムプロパティ + JavaScriptを使うの2種類の方法をご紹介しました。
①は現時点では使えるブラウザが限られているため、②の方法を使うのが良いですね！

今回の内容にもあった、viewportや高さ関わるCSSについて詳しく記載されています！
ぜひ読んでみてください！

<ExternalLink url="https://www.amazon.co.jp/dp/429711173X" />


---

## 【GSAP】初学者向け！GSAPで作るハンバーガーメニュー

- URL: https://blog.to-ko-s.com/articles/gsap-hamburger-menu
- 著者: 杉田侑祐
- 公開日: 2023-06-05
- タグ: JavaScript

> 今回はGSAPを用いてハンバーガーメニューを実装しました。WEB制作をされている初学者の方へ向けた記事になっています。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform（GSAP）を使い、ハンバーガーメニューを実装していきたいと思います。
GSAPの基本的な使い方は下記の記事を参考にしてください！

<InternalLink slug="text-animation-from-gsap" />

### 対象読者

- Web制作でアニメーションの実装をしたい方

## 今回の完成予定

今回はGSAPを用いてハンバーガーメニューを実装してみたいと思います。
やはりGSAPを使うと動きのあるハンバーガーメニューを簡単に実装できるので、オススメです！
今回はHTML&CSSからJavaScriptまで手順を分け解説していきたいと思います。

<Video src="/articles/gsap-hamburger-menu.mp4" />

## 環境

動作確認環境はChromeバージョン113です。
今回はリセットCSSを使用しています。
`normalize.css`です。
環境によっては多少スタイルが崩れる可能性があるので注意してください。

## コードの紹介

### HTML＆CSSの記述

```html title="HTML" showLineNumbers
<body>
  <header class="nav">
    <div class="nav-bar">
      <h1 class="logo">TOKOS.inc</h1>
      <span class="open">MENU</span>
    </div>
  </header>
  <main class="menu">
    <span class="close">CLOSE</span>
    <div class="menu-container">
      <ul class="nav-list">
        <li class="nav-link"><a href="/">01.HOME</a></li>
        <li class="nav-link"><a href="/">02.SERVICE</a></li>
        <li class="nav-link"><a href="/">03.ABOUT</a></li>
      </ul>
    </div>
  </main>
</body>
```

```css title="CSS" showLineNumbers
body {
  font-family: "Times New Roman", Times, serif;
}

.nav {
  background-color: #333;
  padding: 24px 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  max-width: 1200px;
  margin: auto;
}

.logo {
  font-size: 24px;
  font-weight: 600;
}

.open {
  cursor: pointer;
}

.menu {
  background-color: #000;
  color: #fff;
  width: 100%;
  height: 100vh;
}

.close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 24px;
  cursor: pointer;
}

.menu-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 40px;
}

.nav-link {
  letter-spacing: 0.2rem;
}
```

ヘッダーと表示させたいメニューのスタイルはお好きなようにしてください！

下記のように表示されていればOKです！

![ヘッダーとメニューのHTML・CSSレイアウトが完成した状態のブラウザ表示](/articles/image-1024x562-1.webp)

ここからメニュー表示前の状態にしたいので下記プロパティを追加してメニューを画面外に待機させます！

```css title="CSS" showLineNumbers
.menu {
  background-color: #000;
  color: #fff;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100%;
}
```

今回は上から下へメニューを表示したいので`top: -100%;`で画面上部に待機させています！
これで表示させたいメニュー部分は画面外に消えたと思います。
ここからJavaScriptでアニメーションを追加していきたいと思います！

### Clickイベントの記述

ここからJavaScriptの記述に入ります。

まずは、今回クリックして表示、非表示を実現するために、ボタン部分の要素の取得をして、あらかじめ変数にしておきます。

```javascript title="JavaScript" showLineNumbers
const isMenuOpen = document.querySelector(".open")
const isMenuClose = document.querySelector(".close")
```

次にクリック時にイベントを発火させます。
まずはクリックしたときにコンソールで確認していきます！

```javascript title="JavaScript" showLineNumbers
isMenuOpen.addEventListener("click", () => {
  console.log("Openボタンをクリックしました！")
})
```

![Openボタンクリック時にconsole.logが出力されたDevToolsのコンソール](/articles/image-1-2.webp)

これで、クリックした際のイベントの発火を確認できました！
あとはGSAPでアニメーションを定義してクリックした際にアニメーションを発火させてやれば良さそうです！

### GSAPの導入

GSAPを利用するには、公式HPからダウンロードするか、CDNでも提供されているので公式ドキュメントを参照してください。
今回はCDNを利用していきたいと思います。

<ExternalLink url="https://greensock.com/" />

### GSAPでアニメーションの記述

ここからアニメーションの記述に入ります。
メニューを上から下に表示してから、テキストリンクを表示したいので、`Timeline`を使ってアニメーションを繋げていきたいと思います。

```javascript title="JavaScript" showLineNumbers
const tl = gsap.timeline()

tl.fromTo(
  //メニューを上から下へ表示
  ".menu",
  {
    autoAlpha: 0,
  },
  {
    autoAlpha: 1,
    duration: 1,
    top: 0,
    ease: Power2.easeInOut,
  },
).fromTo(
  //テキストリンクを表示
  ".nav-link",
  {
    autoAlpha: 0,
    y: 30,
  },
  {
    autoAlpha: 1,
    y: 0,
    stagger: 0.3, //同じ要素一つずつに0.3s遅延をかけてアニメーションを行う
  },
)
```

`Timeline`は上から下にアニメーションの処理を順に行っていきます。
最初にメニューを上から下へ表示するために`top: 0`を指定して、CSSで`top: -100%;`で隠している要素を0地点に戻しています。
上から下にメニューが表示されてから、テキストリンクアニメーションをスタートさせています。
また`ease`や`duration`はお好きに決めてください！
`ease`は下記を参考にしてください！

<InternalLink slug="gsap-textanimation-easing" />

これでアニメーションの記述はOKなのですが、`Timeline`の特性として、リロードのタイミングで発火してしまいます。
それを避けるために`Timeline`の`paused`オプションでアニメーションを停止状態にさせます。

```javascript title="JavaScript" showLineNumbers
const tl = gsap.timeline({ paused: true })
```

`Timeline`には様々なメソッドがあるので、興味のある方は下記を参考にしてください！

<ExternalLink url="https://greensock.com/docs/v3/GSAP/Timeline" />

あとは、先程準備したクリックイベントの記述に`Timeline`のアニメーションを動作させる記述を追記します。

`Timeline`の動作を発火させるには`play()`メソッドを、アニメーションを逆動作させるには`reverse()`メソッドを使用します！

```javascript title="JavaScript" showLineNumbers
isMenuOpen.addEventListener("click", () => {
  tl.play()
})

isMenuClose.addEventListener("click", () => {
  tl.reverse()
})
```

これで、「MENU」をクリックするとメニューを表示し、「CLOSE」をクリックするとメニューを非表示できたと思います。

最後にメニューを開く動作と閉じる動作のアニメーション時間を操作して完了です。
アニメーション時間は`timeScale()`メソッドを使用します。

```javascript title="JavaScript" showLineNumbers
isMenuOpen.addEventListener("click", () => {
  tl.play().timeScale(1)
})

isMenuClose.addEventListener("click", () => {
  tl.timeScale(3)
  tl.reverse()
})
```

`timeScale()`メソッドは引数の数字が、1＝通常速度（デフォルト）、0.5＝半速、2＝倍速など、アニメーションの時間スケールに使用される係数になります。
`対象.timeScale(係数)`とすることで、対象のアニメーション時間を操作できます。
これでメニューを表示させる時間と非表示させる時間を操作できました！

## 最終的なコード

```html title="HTML" showLineNumbers
<body>
  <header class="nav">
    <div class="nav-bar">
      <h1 class="logo">TOKOS.inc</h1>
      <span class="open">MENU</span>
    </div>
  </header>
  <main class="menu">
    <span class="close">CLOSE</span>
    <div class="menu-container">
      <ul class="nav-list">
        <li class="nav-link"><a href="/">01.HOME</a></li>
        <li class="nav-link"><a href="/">02.SERVICE</a></li>
        <li class="nav-link"><a href="/">03.ABOUT</a></li>
      </ul>
    </div>
  </main>
</body>
```

```css title="CSS" showLineNumbers
body {
  font-family: "Times New Roman", Times, serif;
}

.nav {
  background-color: #333;
  padding: 24px 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  max-width: 1200px;
  margin: auto;
}

.logo {
  font-size: 24px;
  font-weight: 600;
}

.open {
  cursor: pointer;
}

.menu {
  background-color: #000;
  color: #fff;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100%;
}

.close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 24px;
  cursor: pointer;
}

.menu-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 40px;
}

.nav-link {
  letter-spacing: 0.2rem;
}
```

```javascript title="JavaScript" showLineNumbers
const isMenuOpen = document.querySelector(".open")
const isMenuClose = document.querySelector(".close")

const tl = gsap.timeline({ paused: true })
tl.fromTo(
  ".menu",
  {
    autoAlpha: 0,
  },
  {
    autoAlpha: 1,
    duration: 1,
    top: 0,
    ease: Power2.easeInOut,
  },
).fromTo(
  ".nav-link",
  {
    autoAlpha: 0,
    y: 30,
  },
  {
    autoAlpha: 1,
    y: 0,
    stagger: 0.3,
  },
)

isMenuOpen.addEventListener("click", () => {
  tl.play().timeScale(1)
})

isMenuClose.addEventListener("click", () => {
  tl.timeScale(3)
  tl.reverse()
})
```

## さいごに

今回はGSAPを用いてハンバーガーメニューを実装しました。
豊富なメソッドでかなり楽に実装できました。
イージングやアニメーション時間で印象もかなり変わってくるので、状況に応じて変更していこうと思いました。


---

## 【CSSのみ】detailsで作ったアコーディオンにアニメーションをつける

- URL: https://blog.to-ko-s.com/articles/details-css-animation
- 著者: 寺田拓真
- 公開日: 2023-05-27
- タグ: HTML, CSS

> HTMLのdetailsタグで作成したアコーディオンを、CSSのみでアニメーション付きにカスタマイズする方法を解説。open属性を使った表示切り替えやフェードイン演出、プラス・マイナスアイコンの実装方法も紹介します。


## はじめに

### この記事の概要

前回の記事で、`details`の基本的な使い方とJavaScriptを使用したカスタマイズ方法を紹介しました。
`details`を使用することで、HTMLのみで簡単にアコーディオンを作成できるとお分かり頂けたかと思います。
ただ、前回も紹介しましたが、`details`で作成したアコーディオンをそのまま表示すると味気ないものになってしまうので、
CSSを用いて見た目をカスタマイズすることをおすすめします。
今回はその応用で、CSSのみを使用して簡単に見栄えを良くする方法をご紹介します！

前回の記事はこちらになります↓

<InternalLink slug="details-javascript-accordion" />

### 対象読者

- HTMLやCSSを使用したコーディングを勉強中の方
- detailsを使用してアコーディオンを実装したい方
- detailsで作成したアコーディオンの見栄えを良くしたい方

## 基本的なアコーディオンを作成する

### detailsの使用方法

前回の復習になりますが、`details`を使用したアコーディオンの作成方法をご紹介します。
`details`タグを使用してアコーディオンを作成する際は、以下のように記述します。

```html title="HTML" showLineNumbers
<details>
  <summary>タイトル</summary>
  <p>コンテンツ</p>
</details>
```

上記のように、`details`タグの配下に`summary`タグと表示したコンテンツを記述することで最低限のアコーディオンを作成できます。
ただ、これでは味気ないデザインのままですので、ここから見た目をカスタマイズしていきます！

## open属性を使用してアコーディオンの見た目をカスマイズする

### 完成形

今回の内容で最終的にできるアコーディオンの挙動は以下のようになります。

<Video src="/articles/details-css-animation.mp4" />

CSSのみでここまでの挙動ができるので、ぜひご参照にしてみてください！

### 開いた状態と閉じた状態で、summaryの内容を変更する

まずは、アコーディオンの開閉状態に合わせて、`summary`の表示を変えてみましょう！
動画で`[開きます]`と`[閉じます]`と変わっているところですね！

アコーディオンの開閉状態によって表示を変更するためには、CSSで`details`に`open`属性を付与し、それに応じて他の要素に適したプロパティをあてましょう。
`summary`の内容を変更するためには、HTMLとCSSに以下のように記述します。

```html title="HTML" showLineNumbers
<details class="c-accordion">
  <summary class="c-accordion__header">
    <p class="c-accordion__close-heading">開きます</p>
    <p class="c-accordion__open-heading">閉じます</p>
  </summary>
  <div class="c-accordion__content">
    <p class="c-accordion__text">アコーディオン内容</p>
  </div>
</details>
```

```scss title="SCSS" showLineNumbers
.c-accordion__open-heading {
  font-size: 24px;
  font-weight: bold;
  color: $black-color;
  line-height: 1.2;
  display: none;
}

.c-accordion__close-heading {
  font-size: 24px;
  font-weight: bold;
  color: $black-color;
  line-height: 1.2;
  display: block;
}

details[open] .c-accordion__close-heading {
  font-size: 24px;
  font-weight: bold;
  color: $black-color;
  line-height: 1.2;
  display: none;
}

details[open] .c-accordion__open-heading {
  font-size: 24px;
  font-weight: bold;
  color: $black-color;
  line-height: 1.2;
  display: block;
}
```

ポイントは、`summary`配下に開閉状態に合わせて表示したい内容を２種類用意することです。
そして、CSSにあるように、アコーディオンが開いているときは`c-accordion__open-heading`を表示し、閉じているときには`c-accordion__close-heading`を表示するように`display: block;`と`display: none;`で切り替えています。

### アコーディオンの内容をふわっと表示する

`details`で作成したデフォルトのアコーディオンでは、クリックと同時にパッと内容が表示されます。
これをCSSでふわっと表示させましょう！
こちらも`[open]`を使用していきます。

```html title="HTML" showLineNumbers
<details class="c-accordion">
  <summary class="c-accordion__header">
    <p class="c-accordion__close-heading">開きます</p>
    <p class="c-accordion__open-heading">閉じます</p>
  </summary>
  <div class="c-accordion__content">
    <p class="c-accordion__text">アコーディオン内容</p>
  </div>
</details>
```

```css title="CSS" showLineNumbers
details[open] .c-accordion__content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
```

HTMLの6行目に`c-accordion__content`というクラスをあてて、これにアニメーションをあてます。
イメージとしては、クリック直後に`c-accordion__content`の`opacity`を上げて、`10`px上から表示させるようなものになります。

### summaryの右端にプラスとマイナスを表示する

最後に、`summary`にアイコンを表示しましょう！
今回は、アコーディオンが閉じているときにプラスマーク、開いているときにマイナスマークを表示します。

```html title="HTML" showLineNumbers
<details class="c-accordion">
  <summary class="c-accordion__header">
    <p class="c-accordion__close-heading">開きます</p>
    <p class="c-accordion__open-heading">閉じます</p>
    <div class="c-accordion__plus"></div>
  </summary>
  <div class="c-accordion__content">
    <p class="c-accordion__text">アコーディオン内容</p>
  </div>
</details>
```

```scss title="SCSS" showLineNumbers
.c-accordion__plus {
  display: inline-block;
  vertical-align: middle;
  color: $black-color;
  line-height: 1;
  min-width: 24px;
  height: 2px;
  background-color: $black-color;
  position: relative;
  @include mq("sp") {
    min-width: 16px;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
    transition: 0.3s;
  }
}

details[open] .c-accordion__plus::before {
  transform: rotate(0deg);
}
```

まず、HTMLの`summary`内に`c-accordion__plus`というクラスの`div`タグを付け加えます。
あとは上記の記述のようにCSSをあてるとプラスマークを表示できます。
`details`の`[open ]`時、プラスマークを構成している`before`要素の角度を0にすることで、マイナスマークを表示しています。

以上で、先に示した動画のような挙動のアコーディオンを実装できます。

## さいごに

今回は`details`で作成したアコーディオンの見た目をCSSのみでカスタマイズする方法について紹介しました！
紹介したプラスマイナスの他に、三角形で開閉状態を示すことも今回の記述で可能なので、ぜひお試しください！
これくらいの挙動であれば、JavaScriptを使用せずに実装できるので、コーディング初心者の方でも気軽に実装できるかと思います。
この他にも、まだまだカスタマイズ方法はあるかと思うので、ご自身でも色々遊んでみると楽しいかと思います！


---

## 【HTML&JS】JSでdetailsのアコーディオンをカスタマイズする

- URL: https://blog.to-ko-s.com/articles/details-javascript-accordion
- 著者: 寺田拓真
- 公開日: 2023-05-20
- タグ: HTML, CSS, JavaScript

> HTMLのdetailsタグで作成したアコーディオンを、JavaScriptで自由にカスタマイズする方法を解説。矢印の非表示やopen属性の使い方、summaryをクリック制御して文章途中で開閉する実装例まで紹介します。


## はじめに

### この記事の概要

ウェブデザインにおいて、アコーディオンは情報の階層化やコンテンツの表示・非表示の切り替えに便利なツールです。
最近では、HTMLの`details`タグを使用することで簡単にアコーディオンを作成できるようになりました。ただ、`details`タグのみでは実装が難しいケースもあるかと思います。
この記事では、HTMLの`details`タグとJavaScriptを組み合わせて、カスタマイズ性の高いアコーディオンを作成する方法を紹介します。この手法を使えば、スタイルや動作のカスタマイズを容易に行うことができます。

### 対象読者

- HTMLやJavaScriptを使用したコーディングを勉強中の方
- detailsを使用してアコーディオンを実装したい方

## 基本的なアコーディオンを作成する

### detailsの使用方法

まずは、`details`タグの使用方法について紹介します。
`details`タグを使用してアコーディオンを作成する際は、以下のように記述します。

```html title="HTML" showLineNumbers
<details>
  <summary>タイトル</summary>
  <p>コンテンツ</p>
</details>
```

ポイントは、`details`タグの配下に`summary`タグを記述し、`summary`タグと同階層にアコーディオンとして開閉したい内容を記述することです。この記述順が異なると正常な挙動にならないため、注意してください。
実際にアコーディオンを開閉する際は、`summary`タグに記述した内容をクリックすることでアコーディオンの開閉を行います。
あとは、CSSなどで自分好みのスタイリングを行なっていきます。

### detailsで作成したアコーディオンのカスタマイズ

ここからは、`details`タグで作成したアコーディオンのカスタマイズ方法を紹介します。

#### デフォルトで表示される矢印を消す

`details`タグでアコーディオンを作成した際には、デフォルトで黒い矢印が表示されます。
デザインによっては、この矢印が邪魔になるため、非表示にする必要があります。
その際はCSSファイルに以下の記述を行います。

```css title="CSS" showLineNumbers
/* デフォルトの矢印を非表示にする */
summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  display: none;
}
```

このCSSコードを適用することで、矢印が非表示になり、アコーディオンの見た目が改善されます。

#### 最初からアコーディオンを開いた状態にする

アコーディオンの内容を最初から表示したい場合は、以下の記述を行います。

```html title="HTML" showLineNumbers
<details open>
  <summary>タイトル</summary>
  <p>コンテンツ</p>
</details>
```

上記のように、`details`タグにopenと記述することで、最初からアコーディオンの内容を表示することが可能です。

#### アコーディオンを開いた状態と閉じた状態でsummaryの内容を変える

アコーディオンが開いている状態と閉じている状態で、`summary`タグの内容を変えたい場合はHTMLとCSSに以下の記述を行います。

```html title="HTML" showLineNumbers
<details>
  <summary>
    <span class="open">開く</span>
    <span class="close">閉じる</span>
  </summary>
  <p>コンテンツ</p>
</details>
```

![アコーディオンの開閉状態でsummaryの表示が「開く」「閉じる」に切り替わる例](/articles/ScreenShot-2023-05-20-11.23.08-1024x315.webp)

HTMLでは、`summary`タグの中で表示したい内容を2種類用意します。
CSSでは、`details`のopenによって開いている状態と閉じている状態のスタイルをそれぞれ記述します。

### JavaScriptを使用したアコーディオンのカスタマイズ

ここからは、JavaScriptを使用したアコーディオンのカスタマイズ方法を紹介します。
`details`タグはアコーディオン作成する際に便利ですが、以下のように文章の途中でアコーディオンを実装したい場合は実装が難しいです。

![文章の途中にアコーディオンの開閉ボタンを配置したレイアウト例](/articles/ScreenShot-2023-05-20-11.38.30.webp)

JavaScriptのみでもアコーディオンを実装可能ですが、SEO対策的に`details`タグは残しつつアコーディオンを実装したい場合は以下のような記述を行います。

```html title="HTML" showLineNumbers
<p>横の[ボタン]で開閉を制御したい<span id="accordion">[ボタン]</span></p>
<details>
  <summary id="summary"></summary>
  <p>コンテンツ内容</p>
</details>
```

```javascript title="JavaScript" showLineNumbers
const accordion = document.getElementById("accordion")
const summary = document.getElementById("summary")

accordion.addEventListener("click", () => {
  summary.click()
})
```

コードの解説をします。

HTML側では、まず文章中にある開閉を制御したい内容を`span`タグで囲み、`id`を付与します。今回は[ボタン]にaccordionという`id`を付与しました。
また、`summary`タグにも`id`を付与します。今回は`summary`という`id`を付与しました。

続いてJavaScript側の記述です。
最初に先ほど`id`を付与した2つを変数に入れます。
続いて、accordionに`addEventListener`でクリックイベントを付与します。さらに`summary`にclick関数を付与することで、accordionがクリックされた際に、`summary`もクリックされるようにしました。
以上の記述で、文章途中でも`details`タグを使用したアコーディオンの作成が可能です。
実際の挙動は以下のようになります。

<Video src="/articles/details-javascript-accordion.mp4" />

## さいごに

`details`タグとJavaScriptを組み合わせることで、カスタマイズ性の高いアコーディオンを簡単に作成できます。この記事では、基本的な作成方法からスタイルや動作のカスタマイズ方法までを解説しました。

アコーディオンは情報を整理し、ユーザーに必要な情報を適切に提示するための重要な要素です。しかし、すべてのウェブサイトに適用できる汎用的なスタイルや動作はありません。そのため、自分のウェブサイトに合わせてアコーディオンをカスタマイズすることは非常に重要です。

この記事では、HTMLの`details`タグをベースにしたアコーディオンの作成方法を解説しましたが、さらに進んでカスタマイズしたい場合にはJavaScriptを活用することが有効です。JavaScriptを使用することで、クリックイベントやアニメーションを追加できます。これにより、ユーザビリティを向上させるだけでなく、見た目にも魅力的なアコーディオンを実現できます。

また、アコーディオンのスタイルや動作をさらに拡張する方法も紹介しました。例えば、アイコンの追加や位置のカスタマイズ、複数のセクションを同時に開くことができるアコーディオンの作成などがあります。さらに、既存のプラグインやライブラリを活用することもオプションです。

最後に、ウェブデザインにおいてアコーディオンは重要なツールであり、カスタマイズ性を高めることでユーザー体験を向上させることができます。ぜひこの記事を参考にして、自分のウェブサイトに最適なアコーディオンを作成してみてください。

以上が、カスタマイズ性の高いアコーディオンを作成する方法についてのブログ記事の内容です。ご参考ください。


---

## 【Tailwind CSS】Tailwindのblurでぼかしを実装する方法

- URL: https://blog.to-ko-s.com/articles/tailwind-blur
- 著者: 寺田拓真
- 公開日: 2023-05-14
- タグ: HTML, CSS, Tailwind CSS

> Tailwind CSSでBlur効果を適用する方法を解説します。Blur効果の基本的な適用方法から強度の調節、パフォーマンスへの影響まで学びましょう。 Tailwind CSSを活用して、ウェブデザインを次のレベルへと進めましょう。


## はじめに

こんにちは、株式会社TOKOSのたくまです！
今回はTailwind CSSで「ぼかし」を実装していきます。
ウェブデザインにおいて、視覚的なエフェクトはユーザーの体験を高め、情報をより効果的に伝える役割を果たします。
その中でもBlur効果は特定の要素に焦点を当てたり、背景をぼかして奥行きを出す際に利用されます。
本記事では基本的なBlur効果の適用方法から、強度の調節、さらにはパフォーマンスへの影響についてまで詳しく解説します。

### 対象読者

- Blur効果の使い方を学びたい人
- Tailwind CSSを使ったウェブデザインに興味がある人
- Tailwind CSSを使ってぼかしを実装したい人

## 使用方法

### 要素を囲んでいるタグに`class`を当てる

使用方法は簡単で、ぼかしたい要素を囲んでいるタグに`class`を当てるだけです。

```html title="HTML" showLineNumbers
<p>これはぼかされていないテキストです</p>
<p class="blur-sm">これはぼかされたテキストです</p>
```

![blur-smを適用したテキストとしていないテキストの比較](/articles/image-4-1024x201.webp)

もちろん`div`タグで囲んでまとめてぼかすこともできます。

```html title="HTML" showLineNumbers
<div class="blur-sm">
  <p>これはテキストです</p>
  <p>これもテキストです</p>
</div>
```

![divタグでまとめてblur-smを適用したテキストの表示例](/articles/image-5-1024x197.webp)

`div`タグで囲うことによって画像などにもぼかしを加えることができます。

### ぼかし具合を調整する

Tailwindの公式ドキュメントを見ると、どの`class`がどのぼかし具合か確認できます。

<ExternalLink url="https://tailwindcss.com/docs/blur" />

```html title="HTML" showLineNumbers
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-sm">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-md">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-lg">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-xl">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-2xl">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-3xl">これはぼかされたテキストです</p>
```

![blur-smからblur-3xlまで各ぼかし強度の比較](/articles/image-6-1024x344.webp)

`blur-sm`以外はもうほとんど何がぼかされているのかわからないですね。
Tailwindなのでもちろん値を直指定することもできます。
`blur-sm`が`4px`なので今回はその前後の値で実装してみます。

```html title="HTML" showLineNumbers
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[1px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[2px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[3px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-sm">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[5px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[6px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[7px]">これはぼかされたテキストです</p>
```

![blur値を1pxから7pxまで直指定した場合のぼかし具合の比較](/articles/image-7-1024x382.webp)

`1px`と`2px`ではギリギリ文字が視認できますね。
僕も`2px`くらいで用いることが多いです。

## 注意点

便利な`blur`ですが注意点があります。
適切に使われたBlur効果はユーザーの注意を引きつけ、情報を際立たせるための強力なツールになりますが、適用範囲や強度を誤ると逆に視覚的な混乱を招く可能性があります。

また、パフォーマンス面でも注意が必要です。
Blur効果はレンダリングに時間を必要とするため、大量に使いすぎるとウェブサイトのパフォーマンスに影響を与える可能性があります。

## さいごに

今回はTailwind CSSを使ったBlur効果の使い方を説明しました。
ぼかし効果はデザインに視覚的な奥行きを加え、特定の要素を強調するのに有効です。ただし、その適用には注意が必要で、適切なバランスとパフォーマンスを考慮することが重要です。


---

## 【Tailwind CSS】Tailwindでinput type=numberのspinボタンを消す方法

- URL: https://blog.to-ko-s.com/articles/tailwind-input-number
- 著者: 杉田侑祐
- 公開日: 2023-04-24
- タグ: HTML, CSS, Tailwind CSS

> tailwind cssでinput type=["number"]のspinボタンを削除する手順をまとめました。また、tailwindで疑似要素の使い方や擬似クラスの使い方も学べます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回は`Tailwind CSS`を用いた場合の`input type=number`の`spinボタン`を消す方法を紹介します。

### 対象読者

- Tailwindで`input type=number`の`spinボタン`を消したい方

## Tailwind CSSについて

`Tailwind CSS`は`utility class`を活用したCSSフレームワークです。

<ExternalLink url="https://tailwindcss.com/" />

## 完成イメージ

今回の完成イメージですが`input`タグの`type`を`number`にした時、入力欄横にある`spinボタン`を削除しようと思います。
`spinボタン`を削除して自作することが多いのではないでしょうか！

![input type=numberのspinボタンを削除する前後の比較](/articles/5541208801978cbe1d9ab668b4094c54-1024x329.webp)

## 環境

動作確認環境はChromeバージョン109です。
`Tailwind CSS`のバージョンは3.3.0です。
環境によっては多少スタイルが崩れる可能性があるので注意してください。

## CSSでの削除方法

まずはCSSで行う場合を考えてみたいと思います。
疑似要素を用いて、`spinボタン`を消してあげるためには、ブラウザのデフォルトスタイルを上書きしてあげる必要があります。

### Chrome、Safariの場合

```css title="CSS" showLineNumbers
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
```

### FireFox、IEの場合

```css title="CSS" showLineNumbers
input[type="number"] {
  -moz-appearance: textfield;
}
```

このように`ベンダープレフィックス`を用いて、`appearance`を当てなくてはなりません。
これをTailwindに置き換えていきたいと思います。

## 独自のユーティリティークラスを作成して指定する

公式のissueでは独自で`ユーティリティークラス`を作成してくださいと推奨しています。

<ExternalLink url="https://github.com/tailwindlabs/tailwindcss/issues/1101" />

エントリーポイントとなるCSSファイルで下記のように記述してください。

```css title="CSS" showLineNumbers
@layer base {
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield !important;
  }
}
```

これで完了になります。
`@layer`の使い方は下記を参照してください。

<ExternalLink url="https://tailwindcss.com/docs/functions-and-directives" />

## クラスとして適用させる場合

Tailwindでクラスとして適用するにあたって、問題点をあげてみましょう。

- 疑似要素、疑似クラスの使い方
- タグ(`input[type='number']`)に対して疑似要素の使い方

この2つが主な問題点でしょうか。

まずは、Tailwindでの`疑似要素`と`疑似クラス`は、CSS同様になります。
`疑似要素`の場合は、`::`
`疑似クラス`の場合は、`:`

<ExternalLink url="https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference" />

では次にタグに対して`疑似要素`の使い方です。
今回でいうと`input[type='number']`への`疑似要素`の使い方です。

Tailwindでは角括弧を用いると、任意のプロパティを当てることができます。
これを利用してFireFoxとIEに対して`appearance:textfield;`を当てていきます。

```html title="HTML" showLineNumbers
<input type="number" class="[appearance:textfield]" />
```

これでFireFoxとIEは完了です。
次にChrome、Safariに対しても指定します。

```html title="HTML" showLineNumbers
<input type="number" class="[appearance:textfield] [&::-webkit-outer-spin-button] [&::-webkit-inner-spin-button]" />
```

`&`はsassやscssのときと同じ使い方です。
これで`input[type='number']::-webkit-outer-spin-button`と`&::-webkit-inner-spin-button`に対してプロパティを当てることが可能になりました。
`appearance: none;`を当てれば完了になります。

```html title="HTML" showLineNumbers
<input
  type="number"
  class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>
```

これでChrome、Safariも完了です。

## さいごに

今回は`Tailwind CSS`を使用する際の`input type="number"`の`spinボタン`の削除方法を紹介しました。
クラスとして適用する場合は記述量が増えるので、コードの見通し的に使い方には注意が必要かなと感じました。


---

## 【CSS】便利な疑似要素:hasの使い方を紹介

- URL: https://blog.to-ko-s.com/articles/pseudo-element-has
- 著者: 寺田拓真
- 公開日: 2023-04-16
- タグ: HTML, CSS

> CSSの疑似クラス:hasの基本的な使い方を解説。特定の子孫要素を持つ親要素へのスタイル適用や、隣接セレクタとの組み合わせなど、実用的な使用例をコード付きで紹介します。


## はじめに

### この記事の概要

こんちには、株式会社TOKOSのたくまです！

CSSの疑似要素といえば、`::before`や`::after`をご存じの方は多いかと思いますが、`:has`という疑似クラスがあることをご存知でしょうか？`:has`は比較的新しい機能で使用方法をまだご存知でない方もいるかと思います。ただ、`:has`を使いこなせるとかなり便利なので、今回はCSSの疑似クラス`:has`の概念と使い方についてご紹介したいと思います！

### 対象読者

- CSSを勉強中の方
- 疑似要素や`::before`、`::after`の使い方は知っているが、`:has`の使い方は知らない方

今回は、基本的な疑似要素の使い方は割愛させていただきます。
疑似要素について知りたい方は以下の記事が参考になるかと思いますので、お読みください。

<ExternalLink url="https://b-risk.jp/blog/2022/03/pseudo_elements/" />

## `:has`とは？

`:has`は、ある要素の中に特定の要素が存在するかどうかをチェックし、その結果に基づいてスタイルを適用できます。具体的には以下のような構文で使用されます。

```css
:has(セレクタ) {
  /* スタイルの定義 */
}
```

`:has`を使うことで、**ネストされた要素の中にある特定の要素をターゲットにしてスタイルを適用できます**。
これだけでは使い方のイメージが沸かないかと思うので、実際の活用法についてご紹介していきます！

## `:has`の使用例

### 例1：指定した要素を持つ子孫要素にスタイルを適用する

`:has`を使用することで、**指定した要素を持つ子孫要素に対してスタイルを適用**できます。

例えば、以下のようなHTMLコードがあったとします。

```html
<body>
  <div>
    <h2>Title</h2>
    <p>Paragraph text</p>
  </div>
  <div>
    <h2>Title</h2>
    <span>Span text</span>
  </div>
</body>
```

この場合、`<p>`要素を持つ`<div>`要素にスタイルを適用するには、以下のようなCSSのコードを使用できます。

```css
div:has(p) {
  background-color: yellow;
}
```

この例では、`<div>`要素の中に`<p>`要素が含まれている場合に背景色を黄色に設定します。最初の`<div>`要素に対してはスタイルが適用されますが、2番目の`<div>`要素には適用されません。

### 指定した要素の特定の子孫要素にスタイルを適用する

`:has`を使用することで、**子孫要素の中にある特定の要素に対してスタイルを適用**することもできます。

例えば、以下のようなHTMLコードがあったとします。

```html
<h2>タイトル</h2>
<p>サンプルテキスト</p>

<h2>タイトル2</h2>
<h3>サブタイトル2</h3>
<p>サンプルテキスト2</p>
```

この場合、`<h2>`要素の直後に`<p>`要素を持つ`<h2>`要素にスタイルを適用するには、以下のようなCSSのコードを使用できます。

```css
h2:has(+ p) {
  color: red;
}
```

上記で示したように、`:has`を使用することでこれまでCSSを当てづらかった要素にも簡単にCSSを当てることができます。

`:has`は慣れるまで記述方法が複雑に見えますが、そんなときは一度、言語化することで理解しやすくなると思います！
例えば最初の例でいうと、「`<p>`要素を持つ`<div>`要素の背景色を変えたい」になります。
`:has`は()の中身の要素を目印に、その要素をもつ要素にスタイルをあてる疑似要素です。
なので、最初のコードを言語化すると、下記のようになります。

```css
div:has(p) {スタイルの記述}
/* p要素を持っているdiv要素にスタイルを当てる */
```

`:has`を使用する際は、まず実現したいことやスタイルをどのようにあてたいかを言語化してみましょう！
そして、`:has`の`()`の中の要素を目印に持っている(hasしている)要素にスタイルをあてるという考えで記述すると分かりやすいかと思います！

ちなみに、`:has`を使用することで下のようなレイアウトをCSSのみで実装することも可能です！

<Video src="/articles/pseudo-element-has.mov" />

こちらの実装方法は、次回以降の記事で紹介したいと思います！

## `:has`の対応ブラウザ

現在、`:has`は主要なブラウザ（Chrome、Firefox、Safari、Edge）すべてでサポートされています。
ブラウザの対応状況は以下で確認できます。

<ExternalLink url="https://caniuse.com/?search=has" />

## さいごに

今回は疑似要素の`:has`について紹介しました。`:has`は、CSSの新たな機能として、より複雑なDOM構造の中でのスタイリングを容易にするための便利な機能です。
ネストされた要素や子孫要素、複数の要素の組み合わせに基づいてスタイルを適用できます。
是非、この新機能を活用して、効率的なスタイリングを行ってみてください！


---

## 【WordPress】ConoHaWINGでのデプロイ手順とAll-in-One WP Migrationのインポート容量の上げ方

- URL: https://blog.to-ko-s.com/articles/conohawing-deploy
- 著者: 杉田侑祐
- 公開日: 2023-04-10
- タグ: WordPress

> WordPressをConoHaWINGでデプロイする手順をまとめました。また、All-in-One WP Migrationでインポートできるファイル容量の増設方法もわかります。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回は`WordPress`の`ConoHa WING`でのデプロイ手順をまとめてみました。

### 対象読者

- `ConoHa WING`でデプロイしたい方

## 1.会員登録

下記URLより登録作業を進めていきます。

<ExternalLink url="https://www.conoha.jp/wing/signup/" />

![ConoHa WING会員登録のメールアドレスとパスワード入力画面](/articles/Untitled-1024x506.webp)

メールアドレスとパスワードを記入して「次へ」を押してください。

## 2.プランの作成

次にサーバーのプランの選択をします。

![ConoHa WINGのプラン選択画面（上部）](/articles/Untitled-1-1024x374.webp)

![ConoHa WINGのプラン選択画面（下部・WordPress設定）](/articles/Untitled-2-1024x571.webp)

1. 今回は「`WINGパック`」を使用します。
2. 契約期間はお好きなものを選んでください。契約期間が長いほど月額の料金は、お安くなります。
3. プランの選択、通常のHP程度でしたら、ベーシックで問題ないと思います。
4. ここはなにもしなくて大丈夫です！
5. 「利用する」を選択してください。
6. 「新規インストール」を選択してください。
7. 新規ドメインの作成、お好きなものを選んでください。
8. サイト名を記入してください。（後から変更可）
9. `WordPress`のユーザー名とパスワードになります。
10. 登録内容を確認して「次へ」を押して完了です。

## 3.お客様情報の記入

次の画面に行ったら登録情報を記入していってください。

記入後に「SMS認証」か「電話認証」を選択し、本人確認を行ってください。

![SMS認証・電話認証による本人確認の画面](/articles/Untitled-3-1024x457.webp)

## 4.決済情報の登録

![クレジットカード情報の入力画面](/articles/Untitled-4-1024x457.webp)

![クーポン入力と申し込み確認の画面](/articles/Untitled-5-1024x568.webp)

1. クレジットカードの情報の記入
2. クーポンがあれば入力してください
3. 登録内容を確認して「お申し込み」を押して登録の完了です。

## 5.デプロイ

ここからデプロイ作業に入ります。

![ConoHa WINGのサイト管理画面で管理画面URLを確認する画面](/articles/image-9-1024x556.webp)

サイドバーの「サイト管理」>「サイト設定」を開きます。
「管理画面URL」をクリックして、作成したサイトの管理画面に移動します。

登録時に設定した「`WordPress`ユーザー名」と「`WordPress`パスワード」を記入して管理画面に入ります。

サイドバーの「プラグイン」より「`All-in-One WP Migration`」を入れます。

![All-in-One WP Migrationでファイルをエクスポートする画面](/articles/image-10-1024x503.webp)

テスト環境の「`All-in-One WP Migration`」で「ファイル」をエクスポートします。

![All-in-One WP Migrationでエクスポートしたファイルをインポートする画面](/articles/b06af3d707953f2fc532dc10abd77452-1024x561.webp)

エクスポートしたファイルを本番環境でインポートすれば完了です。

インポートする際、最大アップロードファイルサイズが32MBですので、テスト環境でエクスポートしたファイル容量がこれより大きい場合があると思います。

![最大アップロードファイルサイズが32MBと表示されている画面](/articles/image-11-1024x507.webp)

## 6.アップロード容量の増量

ここから無料で容量を上げる方法を紹介します。

`ConoHa WING`の管理画面に戻り「応用設定」の「`.htaccess`」に下記文字を記入して保存してください。

```ini title=".htaccess" showLineNumbers
post_max_size = 300M
upload_max_filesize = 300M
```

![ConoHa WINGの応用設定で.htaccessを編集する画面](/articles/image-13-1024x506.webp)

`WordPress`の管理画面を確認します。

![最大アップロードファイルサイズが300MBに増設された画面](/articles/image-14-1024x507.webp)

これで最大アップロードファイルサイズの容量が増設できます。
今回は300Mと記入したので300MBですが、任意の数字に変えれば容量を変更できます。

## さいごに

今回は`ConoHa WING`でのデプロイ方法をまとめてみました。


---

## カスタム投稿タイプをカテゴリー分類して投稿する方法

- URL: https://blog.to-ko-s.com/articles/custompost-category
- 著者: 寺田拓真
- 公開日: 2023-04-01
- タグ: WordPress

> WordPressでカスタム投稿タイプを作成し、ACF（Advanced Custom Fields）でカスタムフィールドを追加する方法を解説。CPT UIの設定からWP_Queryを使ったサブループ、the_field()での表示方法まで初心者向けに紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！

カスタム投稿を投稿する際、カテゴリーごとに分類したいなぁと思うことはありませんか？
例えば下記のような投稿です。

- 本の紹介をする際に小説・漫画・雑誌などに分ける
- 料理を投稿する際に中華・和食・イタリアンで分ける

以上のように分類することで、読者に分かりやすい記事を書くことが可能になるかと思います。
また、投稿側もそれぞれの投稿がグルーピングされることによって管理しやすくなるメリットがあります。
そこで今回はカスタム投稿を使用して簡単にカテゴリーを作成する方法をご紹介します！

### 対象読者

- WordPressでHPを作成されている方
- カテゴリー分類を付与したい方
- カスタム投稿について勉強されている方

前提として、カスタム投稿タイプとカスタムフィールドを使用して投稿を行っていきます。
なお、投稿を作成するにあたっては、`Custom Post Type UI`(以下、`CPT UI`)と`Advanced Custom Fields` (以下、`ACF`)を使用しております。
基本的な作成方法については前回作成した記事でご紹介しておりますので、下記の記事をご確認ください。

<InternalLink slug="customfield-cptui" />

## CPT UIとACFを組み合わせてカスタム投稿を作成する

### カスタム投稿タイプの作成

早速投稿から作成していきましょう！
今回は料理の投稿ブログを想定して作成していきます。

まずはCPT UIでカスタム投稿タイプを作成します。

![CPT UIでカスタム投稿タイプのスラッグと名前を設定する画面](/articles/image-1024x444.webp)

スラッグは端的で分かりやすくするため、今回はfoodとします。
管理画面のサイドバーに表示される名前は料理とします。
その他の設定項目は前回の記事を御覧ください。

これで「料理」というカスタム投稿タイプが作成されました。

![WordPress管理画面のサイドバーに「料理」が追加された状態](/articles/image-1-4.webp)

### カスタム投稿タイプにカスタムフィールドを組み合わせる

続いて作成したカスタム投稿タイプに`ACF`を組み合わせて投稿内容を編集しましょう。
タイトルと投稿日、投稿内容は下記の関数で取得可能なので、今回は料理の画像を投稿できるようにします。

```php title="PHP" showLineNumbers
・投稿のタイトルを取得する
<?php the_title(); ?>

・投稿日を取得する
<?php the_time('Y/m/d'); ?>

・投稿内容を取得する
<?php the_content(); ?>
```

まずは料理というカスタムフィールドを作成します。

![ACFで「料理」カスタムフィールドグループを作成した状態](/articles/image-2-1024x68.webp)

そして、先程作成した料理のカスタム投稿タイプに紐付けます。

![カスタムフィールドを料理のカスタム投稿タイプに紐付ける設定](/articles/image-3-1024x118.webp)

ここから、画像投稿するためにフィールドを作成します。
手順としては以下の通りです。

1. フィールドタイプで画像選択
2. フィールドラベルとフィールド名を入力
3. 戻り値の形式で画像URLを選択

この手順で設定すると画像のようになるかと思います。

![フィールドタイプを画像に設定し、戻り値を画像URLにしたACFフィールド設定](/articles/image-4-1024x497.webp)

あとは保存すれば設定は完了です。
これで投稿画面で画像を選択できるようになります。

投稿画面で画像のようなフィールドが表示されていれば大丈夫です。

![投稿画面に画像追加フィールドが表示されている状態](/articles/image-5-1.webp)

あとは、`[画像を追加]`からお好きな画像を選択して、投稿すれば完了です。
phpのコード上で表示をする際は下記のような記述をします。

```php title="PHP" showLineNumbers
<img src="<?php the_field('c-food'); ?>" class="c-food">
```

ここまでの内容で投稿が行えるようになりました。

## カテゴリー分類を作成する

### ACFの`[選択]`を使用してフィールドを作成する

ここからは、カテゴリー分類を作成する方法についてご紹介します。

今回は`ACF`のフィールドタイプ`[選択]`を使用する方法をご紹介します。

では作成していきましょう！
先程のカスタムフィールドで新たにフィールドを作成します。
その際に、フィールドタイプは`[選択]`にしてください。
そうすることでセレクトフォームが生成されます。

そしてカテゴリーとしての選択肢を作成します。
今回は中華・和風・イタリアンの３種類を作成しました。
フォームの中で改行をすることによって、自動で選択肢を生成してくれます。

![ACFの選択フィールドで中華・和風・イタリアンの選択肢を設定する画面](/articles/image-6-1024x778.webp)

設定はこれだけです！
実際の投稿画面を見てみましょう。

![投稿画面でカテゴリーのセレクトボックスが表示されている状態](/articles/image-7-1024x117.webp)

上記のように表示されていれば問題はありません。
実際の画面で表示する際は、これまでと同様に`<?php the_field(); ?>`を使用することで表示が可能です。
あとは適宜CSSを当てて、整えてみてください。
実際に私が作成した投稿は以下のようになります。

![カテゴリー分類を適用した料理投稿の表示例](/articles/image-8-1.webp)

以上が簡単にカテゴリー分類を作成する方法です。

## さいごに

今回はカスタム投稿にカテゴリー分類を付与する方法をご紹介しました。
今回紹介した方法ならカスタムフィールドに1つフィールドを追加するだけなので、簡単に作成することが可能です。
ぜひお試しください！


---

## 【コピペOK】CSSのみで行うオープニングアニメーション

- URL: https://blog.to-ko-s.com/articles/css-opening-animation
- 著者: 杉田侑祐
- 公開日: 2023-03-28
- タグ: HTML, CSS

> CSSのみでオープニングアニメーションを簡単に実装したい方に向けて実装方法を書きました。この記事ではCSSのみでオープニングアニメーションを作成する方法をわかりやすく解説しています。ぜひ使ってみてください！


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はCSSのみで行う、オープニングアニメーションを実装していきたいと思います！
コピペで使えるようにしていますので、最後まで見ていってください！

### 対象読者

- web制作でアニメーションの実装をしたい方

## 今回の完成予定

今回はCSSのみで行うオープニングアニメーションです。
少し複雑ですが、CSSのみでここまでできてしまうので、皆さんもぜひお試しください！

<Video src="/articles/css-opening-animation.mp4" />

## 環境

動作確認環境はChromeバージョン109です。
今回はリセットCSSを使用しています。
`normalize.css`です。

<ExternalLink url="https://necolas.github.io/normalize.css/" />

環境によっては多少スタイルが崩れる可能性があるので注意してください。

## コードの紹介

### HTML

```html title="HTML" showLineNumbers
<body>
  <div class="header">TOKOS</div>
  <div class="container">
    <div class="text-wrapper">
      <div class="text-1 text">Just Do It</div>
      <div class="text-2 text">Just Do It</div>
      <div class="text-3 text">Just Do It</div>
      <div class="text-4 text">Just Do It</div>
      <div class="text-5 text">Just Do It</div>
      <div class="text-6 text">Just Do It</div>
      <div class="text-7 text">Just Do It</div>
      <div class="text-8 text">Just Do It</div>
      <div class="text-9 text">Just Do It</div>
      <div class="text-10 text">Just Do It</div>
      <div class="text-11 text">Just Do It</div>
    </div>
  </div>
</body>
```

HTMLは、最後に表示したいテキストと最初出てくるテキストを分けて書いてください。

### CSS

CSSは手順ごとに説明していきます。

```css title="CSS" showLineNumbers
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}
```

まずは`html`タグと`body`タグに最低限のプロパティを当てていきます。

次に最後表示させたいテキストに対してスタイリングしていきます。

```css title="CSS" showLineNumbers
.header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100px;
  z-index: -1;
}
```

皆さん知っているとは思いますが、`position`を使った際に`top: 50%`、`left: 50%`にしてから、`transform: translate(-50%, -50%)`を指定すると上下左右の真ん中に要素を配置することができます。
また`z-index`を`-1`にすることで表示する重なりを一番下にしています。

![画面中央にTOKOSのテキストが表示された状態](/articles/image-1024x562.webp)

真ん中に最後表示させたいテキストが表示されていたらOKです。

次に最初表示させたいテキストです。

```css title="CSS" showLineNumbers
.container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.text-wrapper {
  color: #fff;
  position: absolute;
}

.text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 54px;
  line-height: 1.2;
}

.text-1,
.text-3,
.text-4,
.text-8,
.text-9,
.text-11 {
  color: #000;
  -webkit-text-stroke: 1px #fff;
}
```

ここはお好きにスタイリングしてください。

<Callout variant="warning">
  `-webkit-text-stroke`はベンダープレフィックス付きのプロパティで、標準化されていません。
  主要ブラウザでは動作しますが、将来的なサポートが保証されていない点に注意してください。
</Callout>

![こんな感じになってればOKです。ここはお好きにスタイリングしてください。](/articles/image-1-1024x559.webp)

ここからは`@keyframes`を用いてアニメーションの指定に入っていきます。

基本的にはテキストの表示・非表示を行って、各テキストに対して時間を少しずつずらして、連続するアニメーションを行っています。
まずは今回のアニメーションの`@keyframes`の基本的な動作からです。

```css title="CSS" showLineNumbers
@keyframes blink {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
```

このアニメーションをもとに各クラスに遅延時間を指定していきます。

```css title="CSS" showLineNumbers
.text-1 {
  animation:
    blink 0.8s linear 0.9s,
    blink 0.8s linear 2s;
  opacity: 0;
}

.text-2 {
  animation:
    blink 0.8s linear 0.8s,
    blink 0.8s linear 2.1s;
  opacity: 0;
}

.text-3 {
  animation:
    blink 0.8s linear 0.7s,
    blink 0.8s linear 2.2s;
  opacity: 0;
}

.text-4 {
  animation:
    blink 0.8s linear 0.6s,
    blink 0.8s linear 2.3s;
  opacity: 0;
}

.text-5 {
  animation:
    blink 0.8s linear 0.5s,
    blink 0.8s linear 2.4s;
  opacity: 0;
}

.text-6 {
  animation:
    blink 0.8s linear 0.4s,
    blink 0.8s linear 2.5s,
    slide-out 1s linear 3.2s;
  opacity: 0;
}

.text-7 {
  animation:
    blink 0.8s linear 0.5s,
    blink 0.8s linear 2.4s;
  opacity: 0;
}

.text-8 {
  animation:
    blink 0.8s linear 0.6s,
    blink 0.8s linear 2.3s;
  opacity: 0;
}

.text-9 {
  animation:
    blink 0.8s linear 0.7s,
    blink 0.8s linear 2.2s;
  opacity: 0;
}

.text-10 {
  animation:
    blink 0.8s linear 0.8s,
    blink 0.8s linear 2.1s;
  opacity: 0;
}

.text-11 {
  animation:
    blink 0.8s linear 0.9s,
    blink 0.8s linear 2s;
  opacity: 0;
}
```

こんな感じで真ん中の`.text-6`を中心に少しずつずらして指定していきます。
今省略記法で記入しています。
省略せずに書くとこんな感じになります。

```css title="CSS" showLineNumbers
.text-1 {
  animation-name: blink;
  animation-duration: 0.8s;
  animation-timing-function: linear;
  animation-delay: 0.9s;
  opacity: 0;
}
```

このアニメーション名`blink`を2つ書いています。
また少しずつずらしている箇所は`animation-delay`になっています。

これで流れて表示はできていると思います。
次に`.text-6`に指定しているアニメーション名`slide-out`です。
これが最後表示したり非表示にしたりを行っているアニメーションになります。

```css title="CSS" showLineNumbers
@keyframes slide-out {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  19% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  39% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  59% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  79% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
```

ここは何も考えずにコピペしてください。

最後に最初のテキストが流れて表示させた後の画面を切り替えるアニメーションになります。

まずはクラス名`.container`に`animation`プロパティを追加します。

```css title="CSS" showLineNumbers {8-9,12-21}
.container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  animation: slide-out-container 4s cubic-bezier(0.97, 0.01, 0.36, 0.99) 2.8s;
  animation-fill-mode: forwards;
}

@keyframes slide-out-container {
  0% {
    height: 100vh;
  }
  40% {
    height: 100vh;
  }
  100% {
    height: 0%;
  }
}
```

この中で、`animation-timing-function: cubic-bezier(0.97, 0.01, 0.36, 0.99)`が見慣れないと思いますが、イージングの調整を数値ベースで自分で調整できます。
ジェネレータもありますので使用してみてください。

<ExternalLink url="https://cubic-bezier.com/#.17,.67,.83,.67" />

これで実装完了です。
CSS部分少し長くなったのでまとめます。

```css title="CSS" showLineNumbers
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

.header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 100px;
  z-index: -1;
}

.container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  animation: slide-out-container 4s cubic-bezier(0.97, 0.01, 0.36, 0.99) 2.8s;
  animation-fill-mode: forwards;
}

.text-wrapper {
  color: #fff;
  position: absolute;
}

.text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 54px;
  line-height: 1.2;
}

.text-1,
.text-3,
.text-4,
.text-8,
.text-9,
.text-11 {
  color: #000;
  -webkit-text-stroke: 1px #fff;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.text-1 {
  animation:
    blink 0.8s linear 0.9s,
    blink 0.8s linear 2s;
  opacity: 0;
}

.text-2 {
  animation:
    blink 0.8s linear 0.8s,
    blink 0.8s linear 2.1s;
  opacity: 0;
}

.text-3 {
  animation:
    blink 0.8s linear 0.7s,
    blink 0.8s linear 2.2s;
  opacity: 0;
}

.text-4 {
  animation:
    blink 0.8s linear 0.6s,
    blink 0.8s linear 2.3s;
  opacity: 0;
}

.text-5 {
  animation:
    blink 0.8s linear 0.5s,
    blink 0.8s linear 2.4s;
  opacity: 0;
}

.text-6 {
  animation:
    blink 0.8s linear 0.4s,
    blink 0.8s linear 2.5s,
    slide-out 1s linear 3.2s;
  opacity: 0;
}

.text-7 {
  animation:
    blink 0.8s linear 0.5s,
    blink 0.8s linear 2.4s;
  opacity: 0;
}

.text-8 {
  animation:
    blink 0.8s linear 0.6s,
    blink 0.8s linear 2.3s;
  opacity: 0;
}

.text-9 {
  animation:
    blink 0.8s linear 0.7s,
    blink 0.8s linear 2.2s;
  opacity: 0;
}

.text-10 {
  animation:
    blink 0.8s linear 0.8s,
    blink 0.8s linear 2.1s;
  opacity: 0;
}

.text-11 {
  animation:
    blink 0.8s linear 0.9s,
    blink 0.8s linear 2s;
  opacity: 0;
}

@keyframes slide-out {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  19% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  39% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  59% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  79% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-out-container {
  0% {
    height: 100vh;
  }
  40% {
    height: 100vh;
  }
  100% {
    height: 0%;
  }
}
```

## さいごに

今回はCSSのみでオープニングアニメーションを行ってみました。
CSSでも少々複雑にアニメーションを行うことができます。
`delay`時間等少々考えることは多いですが慣れれば問題ないかと思います。
皆さんもコピペで使っていただけると幸いです。


---

## カスタム投稿タイプとカスタムフィールドを組み合わせて投稿する

- URL: https://blog.to-ko-s.com/articles/customfield-cptui
- 著者: 寺田拓真
- 公開日: 2023-03-19
- タグ: WordPress

> WordPressでカスタム投稿タイプを作成し、Advanced Custom Fields（ACF）でカスタムフィールドを追加する方法を解説。CPT UIを使った投稿タイプ作成から、PHPでthe_field()を用いて表示するまで初心者向けに紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！
皆さんはWordPressでコンテンツを投稿する際、どのようにして投稿していますか？

WordPressには「投稿」というページタイプが初めから用意されていて、こちらを用いてブログやHP等の投稿ページを作成していきます。
しかし、場合によっては「投稿」ではない投稿ページが必要になることがあります。

例としては、以下のものになります。

- お客様の声
- 作品紹介
- 買取実績例

上記の場合に、新しい投稿タイプ（カスタム投稿タイプ）を用意することで、投稿の管理や運用、カスタマイズがしやすくなります。
そこで、今回はプラグインを使用したカスタム投稿の管理方法について紹介していきます！

### 対象読者

- WordPressでサイト制作を勉強中の方
- 色々な種類の投稿をしたい方

## カスタム投稿の作成

### Custom Post Type UI（CPT UI）をインストールする

冒頭でも言ったように、今回はプラグインを使用してカスタム投稿を作成してきます。
そこで使用するプラグインが`Custom Post Type UI`です。(以下、`CPT UI`)

管理画面にアクセスして、プラグインから`CPT UI`を追加し、有効化してください！
下の画面のように、サイドバーに`CPT UI`が表示されていれば有効化できています。

![WordPress管理画面のサイドバーにCPT UIが表示された状態](/articles/ScreenShot-2023-03-18-15.39.19.webp)

### 投稿する

無事`CPT UI`を有効化できたら、早速カスタム投稿を作成していきましょう！
今回は作品というカスタム投稿を作成していきます。

サイドバーからカスタムフィールドに入ると下の画像のような画面に入りますので、「新規追加」をクリックします。

![カスタムフィールドの一覧画面で新規追加をクリックする](/articles/ScreenShot-2023-03-18-23.52.56-1-1024x159.webp)

すると次のような画面になります。

![CPT UIの投稿タイプスラッグとラベルの入力画面](/articles/ScreenShot-2023-03-18-23.58.55-1024x439.webp)

上から順に入力していきます。
投稿タイプスラッグは、URLとして表示されるものになります。
今回は作品を投稿していくので、「work」とします。
複数形のラベルと単数形のラベルは管理画面のサイドバーに表示される項目になります。
こちらは分かりやすいように日本語で「作品」とします。

また、設定の項目にあるアーカイブは下の画像のようにTrueに変更することをおすすめします。

![CPT UIの設定画面でアーカイブをTrueに変更する](/articles/ScreenShot-2023-03-19-0.03.54-1024x124.webp)

こちらの設定は、カスタム投稿の一覧ページを作成するか否かを設定します。
デフォルトはFalseになっていますが、そのままだと一覧ページは作成されません。
通常、投稿した作品などは一覧で閲覧する需要が生まれると思いますので、Trueに設定しましょう。
ここまで入力したら、「投稿タイプを追加」ボタンを押して完了です。
管理画面のサイドバーに画像のように表示されていれば上手く保存ができています。

![管理画面サイドバーに「作品」のカスタム投稿タイプが追加された状態](/articles/ScreenShot-2023-03-19-0.25.51.webp)

ここまでで、カスタム投稿を作成できました。
ただ、このままでは投稿内容が限られたものしか掲載できません。
そこで、もう1つ別のプラグイン「`Advanced Custom Fields`」をインストールしてカスタマイズ性を高めていきましょう！

## カスタム投稿にカスタムフィールドを組み合わせる

### Advanced Custom Fieldsをインストールする

`CPT UI`と同様に`Advanced Custom Fields`をインストールして有効化しましょう。
画像のように管理画面のサイドバーにカスタムフィールドが表示されていれば有効化できています。

![管理画面サイドバーにAdvanced Custom Fieldsが表示された状態](/articles/ScreenShot-2023-03-19-0.38.36-1024x210.webp)

### カスタムフィールドの作成

管理画面からカスタムフィールドをクリックすると画像のような画面になります。

![ACFのフィールドグループ作成画面でフィールドタイプやラベルを入力する](/articles/ScreenShot-2023-03-18-23.57.26-1024x588.webp)

まずは一番上の`Field Group Title`を入力しましょう。
これは表示の通りフィールドグループのタイトルになります。今回は作品と関連づけるので、Workとしました。
タイトルを記入したら、ここからフィールドのコンテンツを記入していきます。
上から順に解説していきます。

フィールドタイプは、どのような形式でコンテンツを表示するかを決めます。
もっとも多く使用するのはテキストかと思います。
今回はテキストのみを使用しますが、画像を表示させたい時はセレクトフォームから画像を選択することで、簡単に画像も投稿できます。

フィードラベルは、カスタムフィールドの管理画面の編集時に表示されるラベルです。
フィールドは何個も作成してカスタマイズすることもあるので、こちらも分かりやすい名前にしましょう。
今回の例でいうと、作品の年代を表示したい場合はフィールド名を年代としたり、作品のコンセプトを表示したい場合はフィールド名をコンセプトとします。

フィールド名は、そのカスタムフィールドをコード上で呼び出す際に必要な名前です。
それぞれユニークである必要があるため、私の場合はフィールドに付与するCSSのクラス名を付与することが多いです。

初期値は特に設定しなくても大丈夫です。

一通り記入ができたら、`Save Changes`をクリックして保存しましょう。

上記を踏まえて記入した例が下の画像になります。

![年代やコンセプトなどのフィールドを記入したACFの設定例](/articles/ScreenShot-2023-03-19-0.52.01-1024x587.webp)

フィールドを作成できたので、最後に先ほど作成したカスタム投稿ページに紐づけましょう！

### カスタム投稿とカスタムフィールドを紐づける

こちらの作業はカスタムフィールド側で行います。

先ほど作成したフィールドグループの画面の下の方に画像のような設定というフォームがあります。

![ACFのフィールドグループを投稿タイプに紐づける設定画面](/articles/ScreenShot-2023-03-19-0.55.32-1024x248.webp)

こちらを編集して紐づけていきます。
左側のセレクトフォームから投稿タイプを選択、右側のセレクトフォームから紐づけたいページを選択し、
先ほどと同様に`Save Changes`をクリックしたら紐付け完了です。

これでカスタム投稿とカスタムフィールドの紐付けが完了しました！
あとはカスタム投稿画面のコード上からカスタムフィールドで入力したコンテンツを呼び出せば、実際の画面にも表示されます。

## コード上で投稿内容を呼び出す

### サブループの使用

コード上でカスタム投稿およびカスタムフィールドを呼び出す際には、まずサブループを使用します。
サブループの他にメインループもあるのですが、今回は長くなるので割愛します。
詳しくは以下のサイトで解説されていますので、ご覧ください。

<ExternalLink url="https://haniwaman.com/loop/" />

サブループを使用する際のコードは次のとおりです。

```php title="PHP" showLineNumbers
<?php
$news_query = new WP_Query(
	array(
		'post_type'      => 'work',
		'posts_per_page' => 10,
	)
);
?>
<?php if ( $news_query->have_posts() ) : ?>
	<?php while ( $news_query->have_posts() ) : ?>
		<?php $news_query->the_post(); ?>
		<p>表示したい内容</p>
	<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
```

上記のコードを使用することで、TOPページや下層ページなど、どこでもカスタム投稿を表示することが可能です。
記述する上で注意していただきたいのは、4,5行目です。
4行目は、カスタム投稿を作成する際に設定したスラッグを記述してください。
5行目は1ページあたりに表示したい投稿数を記入してください。上記のコードでは10件までとなります。
その他はコピペで大丈夫です！
ここからは、12行目に表示した内容を記述していきます。

### the_field('')の使用

先ほどのコードの12行目に、カスタムフィールドで入力したテキストを表示していきます。
カスタムフィールドで入力した内容を表示するには、`the_field`('')を使用します。
('')の中にカスタムフィールドを作成する際に設定したフィールド名を入れます。(今回は`c-age`)
これを踏まえて記述したコードが下の画像になります。

```php title="PHP" showLineNumbers
<?php
$news_query = new WP_Query(
	array(
		'post_type'      => 'work',
		'posts_per_page' => 10,
	)
);
?>
<?php if ( $news_query->have_posts() ) : ?>
	<?php while ( $news_query->have_posts() ) : ?>
		<?php $news_query->the_post(); ?>
		<p class="c-age"><?php the_field('c-age');?></p>
	<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
```

これでカスタムフィールドに入力した内容を投稿ページで表示できました。
ちなみに、画像を表示したい場合も`the_field`('')をimgタグの中に挿入し、フィールド名を入れたら表示できます。

![the_fieldを使ってカスタムフィールドの画像を表示するコード例](/articles/ScreenShot-2023-03-19-10.41.21.webp)

## さいごに

今回はWordPressにて、カスタム投稿とカスタムフィールドを組み合わせて自由な投稿を行う方法を紹介しました！
最初は設定する項目など多く感じますが、慣れたら流れ作業で簡単に行えるようになります！

カスタムフィールドには今回紹介したテキストや画像の他にも、セレクトフォームやラジオボックスなど様々な種類のフォームが存在しています。好みや使用に合わせて選択することで、投稿ページをより自由にカスタマイズできます。
ぜひ、色々試してみてください！


---

## 【CSS】アンダーラインの引き方まとめ

- URL: https://blog.to-ko-s.com/articles/css-underline
- 著者: 寺田拓真
- 公開日: 2023-03-05
- タグ: HTML, CSS

> CSSでアンダーライン（下線）を引く方法を3つ紹介します。border-bottomだけでなく、backgroundや疑似要素を使ったおしゃれで柔軟な下線の実装方法も解説します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！
みなさんはコーディング中、文字にアンダーラインを引く際はどのように記述していますか？

おそらく`border-bottom`を使用する方が多いかと思います。
`border-bottom`を使用することで簡単にアンダーラインを引くことは出来ますが、
カスタマイズ性が乏しいため、場合によってはデザインに寄せることが難しいかもしれません、、
実際にアンダーラインを実装するにあたって以下のような悩みを抱えたことはありませんか？

<SpeechBubble name="たくま" icon="/articles/ScreenShot-2022-09-25-12.45.42.webp">
  複数行にまたがる下線を引きたいなぁ
</SpeechBubble>

<SpeechBubble name="たくま" icon="/articles/ScreenShot-2022-09-25-12.45.42.webp">
  2色に分かれた下線を引きたいなぁ
</SpeechBubble>

そこで今回は、`border-bottom`を使用する以外にもCSSでアンダーラインを引く方法についてご紹介します！

### 対象読者

- CSSを勉強中の初学者の方
- CSSでアンダーラインを引きたい方

## アンダーラインを引く方法3選

### ①`border-bottom`を使用する

まずは冒頭でもお話した`border-bottom`を使用する方法についてあらためてご紹介します！
今回は下のようなテキストにアンダーラインを引いていきます。

![アンダーラインを引く前の「ここに下線を引きます」テキスト](/articles/ScreenShot-2023-03-05-16.47.54.webp)

コードはこちらになります。

```html title="HTML" showLineNumbers
<div class="box">
  <p class="text">ここに下線を引きます</p>
</div>
```

```css title="CSS" showLineNumbers
.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}
```

早速アンダーラインを引いていきましょう！
上記の.textに`border-bottom`を追加します。

```css title="CSS" showLineNumbers
.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  border-bottom: solid 1px red;
}
```

すると、下のような線が引かれます。

![border-bottomで赤い実線の下線を引いた表示例](/articles/ScreenShot-2023-03-05-16.56.40.webp)

`border-bottom`を使用する際は、線の種類・太さ・色を指定することで下線のスタイルを変更できます。
今回は線の種類を`solid`、太さを`1px`、色を`red`にしました。
線の種類は`solid`の他に`dashed`(破線)、`dotted`(点線)など様々な種類があるので、必要に応じて使い分けてみてください！
`border-bottom`の詳しい仕様については以下のサイトが参考になります。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/CSS/border-bottom" />

1点注意していただきたいのは、`border-bottom`を使用する際、アンダーラインの長さは要素の`width`に依存するので、
テキストにのみアンダーラインを引きたい場合は`width: fit-content;`を指定するようにしてください。
実際に`width: fit-content;`を外すと下のようなアンダーラインになります。

![width: fit-contentを外して要素幅いっぱいに広がった下線](/articles/ScreenShot-2023-03-05-17.07.43.webp)

### ②backgroundを使用する

続いては`background`を使用する方法です！
`background`を使用することで、蛍光ペンのようなラインを引けたり、複数行にまたがる線を引くことが出来ます！

実際に記述していきます。

```css title="CSS" showLineNumbers
.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  background: linear-gradient(transparent 48%, red 90%);
}
```

上記の記述で次のような表示になります。

![backgroundのlinear-gradientで蛍光ペン風の赤い下線を引いた例](/articles/ScreenShot-2023-03-05-17.18.05.webp)

今回は赤い蛍光ペンをイメージしました！
`background`を使用する際は`transparent`の%で線の太さ、色の後の%でかすれ具合を調整しています。
記述は以上なので、`border-bottom`と同様に簡単に使用できるかと思います。
複数行にまたがる線を引きたい場合は、テキストを`span`タグで囲みます。

```html title="HTML" showLineNumbers
<div class="box">
  <span class="text">
    ここに下線を引きます
    <br />
    複数行にまたがります
  </span>
</div>
```

そして、テキストを真ん中に寄せるため、親要素である.boxに`text-align: center;`を指定します。

```css title="CSS" showLineNumbers
.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
  text-align: center;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  background: linear-gradient(transparent 48%, red 90%);
}
```

これで下のような線を引くことが出来ます。

![backgroundを使って複数行にまたがる蛍光ペン風の下線を引いた例](/articles/ScreenShot-2023-03-05-17.35.59.webp)

線の太さなどのスタイルは適宜、調整してみてください！

### ③疑似要素を使用する

最後は疑似要素を使用する方法です！
こちらが1番カスタマイズ性は高いと思います。

疑似要素を使用するための下準備として、.textに`position: relative;`を追記しましょう。

```css title="CSS" showLineNumbers
.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}
```

続いて.textに`after`を使用して疑似要素を追加していきます。
今回は2色のアンダーラインを作成します。

```css title="CSS" showLineNumbers
.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
  position: relative;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  border-bottom: solid 2px red;
}

.text::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px pink;
  bottom: -2px;
  width: 30%;
}
```

このように記述することで、下のようなピンクと赤の2色のアンダーラインが表示されます。

![疑似要素で作成したピンクと赤の2色アンダーライン](/articles/ScreenShot-2023-03-05-17.43.42.webp)

こちらのアンダーラインは手軽にできて、なおかつオシャレなのでおすすめです！
また、次のように記述することで角が丸くなった柔らかい印象のアンダーラインを作成することも出来ます。

```css title="CSS" showLineNumbers
.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
  position: relative;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}

.text::after {
  content: "";
  position: absolute;
  bottom: -4px;
  display: inline-block;
  width: 156px;
  height: 4px;
  left: 50%;
  transform: translateX(-50%);
  background-color: red;
  border-radius: 8px;
}
```

![疑似要素とborder-radiusで角を丸くした赤いアンダーライン](/articles/ScreenShot-2023-03-05-17.55.03.webp)

注意点としては、今回は`width`を指定しなくてはいけないので、長さが異なるテキストには同じclass名では使用できない点です。

## さいごに

今回はCSSでアンダーラインを引く方法について紹介しました！
シンプルなアンダーラインで良い時は`border-bottom`で十分かと思います！
デザインをカスタマイズしたい場合は、`background`や疑似要素を使用して自分好みの下線を引いていきましょう！


---

## 【css】display: contentsを使用した要素の並び替え

- URL: https://blog.to-ko-s.com/articles/css-display-contents
- 著者: 寺田拓真
- 公開日: 2023-02-26
- タグ: HTML, CSS

> CSSのdisplay: contentsを使って、PCとスマホで要素の並び順を入れ替える方法を解説。orderだけでは対応できないレイアウト変更の実装テクニックを紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！

皆さんは普段、コーディングをする中でこんな悩みを抱えたことはありませんか？

<SpeechBubble icon="/articles/ScreenShot-2022-09-25-12.45.42.webp" name="たくま">
  pc画面とスマホ画面で要素の順番が異なるときにorderで解決しようとしても上手くいかない、、
</SpeechBubble>

<SpeechBubble icon="/articles/ScreenShot-2022-09-25-12.45.42.webp" name="たくま">
  レイアウトが違う時の要素の並び替えの方法が分からない、、
</SpeechBubble>

下の図のようなレイアウトの際はorderのみを使用することで簡単に要素の順番を入れ替えることができます。

![orderで並び替え可能な単純なレイアウト変更の例](/articles/ScreenShot-2023-02-27-0.19.20-1024x666.webp)

次の場合はどうでしょうか？

![orderだけでは並び替えが難しいレイアウト変更の例](/articles/ScreenShot-2023-02-27-0.32.20-1024x667.webp)

この場合は`order`のみで順番を入れ替えるというのは難しいと思います。
そこで今回は、`display: contents`を使用した要素の入れ替え方法をご紹介していきます！

### 対象読者

- cssを勉強中の方
- pc画面とスマホ画面でレイアウトが異なる際の要素の並び替えで悩んでいる方

## 要素の並び順を入れ替える

### orderの仕様

まずは概要でお見せした単純な要素の並び替えについてご紹介します。

![PCでは横並び、スマホでは縦並びに順番を変える例](/articles/ScreenShot-2023-02-27-0.19.20-1024x666.webp)

このレイアウトにする際は`display: flex`と`flex-direction: column`と`order`を使用します。

```css title="CSS" showLineNumbers
@media screen and (max-width: 750px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .block1 {
    order: 3;
  }
  .block2 {
    order: 1;
  }
  .block3 {
    order: 2;
  }
}
```

上記のように記述することで、スマホ画面ではblock2とblock3の順番を入れ替えることができます。
`order`の初期値は0が設定され、数値の低い順に配置されます。
ちなみにマイナスの値も設定できるので、-1や-2も設定できます。
こちらの方法はご存じの方も多いかと思います。

さらに詳しく知りたい方は以下のサイトが参考になります。

<ExternalLink url="https://shu-naka-blog.com/css/order/" />

並び替えの際に抑えていただきたいポイントは、`order`は兄弟要素に作用するという点です。
これが後述する要素の並び替えを理解するに当たり、必要な知識となるので覚えておいてください！

### display: contentsの仕様

続いてレイアウトがpc画面とスマホ画面で異なる際の並び替えについて、ご紹介します。

![入れ子構造がありorderだけでは対応できないレイアウト例](/articles/ScreenShot-2023-02-27-0.32.20-1024x667.webp)

この場合、`order`のみを使用して並び替えることは難しいと思います。なぜかというと、上記のレイアウトにする場合はHTMLの構造はおそらく下記のようになるのではないでしょうか？

```html title="HTML" showLineNumbers
<div class="container">
  <div>
    <div class="block1">block1</div>
    <div class="block2">block2</div>
    <div class="block3">block3</div>
  </div>
  <div class="block4">block4</div>
</div>
```

これでは、.block1〜.block3と.block4が兄弟要素にならないため、`order`を使用した並び替えが出来ません。

`grid`を使用したり、`position: absolute`を使用することでも解決できるとは思いますが、もっと手軽で変更にも強い指定方法があります。
それが、`display: contents`です！

`display: contents`の具体的な使用方法は以下のサイトが分かりやすいです。

<ExternalLink url="https://pengi-n.co.jp/blog/css-display-contents/" />

今回は並び替えの際の使用方法に焦点をあてて紹介していきます！

上記の並び替えを実施する前に、下準備として.block1〜.block3をラップする箱にクラス名を付与する必要があります。
今回は.contentという名前にしました。
イメージとしては以下のようになります！

![.contentクラスを付与してdisplay: contentsで並び替える構造](/articles/ScreenShot-2023-02-27-0.40.35-1024x669.webp)

これで下準備は完了です！
.contentに`display: contents`を記述し、あとは`order`で並び順を指定するだけで上記の並び替えを実装できます！

`display: contents`と`order`を組み合わせて並び替える際の記述は以下のとおりです。

```css title="CSS" showLineNumbers
@media screen and (max-width: 750px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .content {
    display: contents;
  }
  .block1 {
    order: 1;
  }
  .block2 {
    order: 3;
  }
  .block3 {
    order: 4;
  }
  .block4 {
    order: 2;
  }
}
```

このように記述することで何が起こっているかというと、.contentという親要素の枠だけがスマホ画面で消えるようなイメージです。
.contentの枠が消えることにより、中にある.block1～.block3が、.block4の兄弟要素になります。
兄弟要素となることで、`order`を使用した並び替えが可能になります！

## おわりに

今回は`display: contents`を使用した要素の並び替えについて紹介しました！
これまでは`order`やHTMLの構造をこねくりまわして何とか対応していましたが、`display: contents`を使用することで正確かつスッキリとした記述で実装できます。
pc画面とスマホ画面でレイアウトが異なる際の並び替えにぜひ使用してみてください！


---

## 【CSSのみ】レスポンシブなハンバーガーメニューの作成方法

- URL: https://blog.to-ko-s.com/articles/css-hamburger-menu
- 著者: 成岡拓哉
- 公開日: 2023-02-19
- タグ: HTML, CSS

> ハンバーガーメニュー(ドロワーメニュー)を簡単に実装したい方に向けて実装方法を書きました。この記事ではCSSのみでハンバーガーメニューを作成する方法をわかりやすく解説してします。ぜひ使ってみてください！


## はじめに

### この記事の概要

株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回は、簡単にできるハンバーガーメニュー（ドロワーメニュー）の作り方について説明します。
JavaScriptやjQueryは使用せずCSSだけで完結するので初学者の方に特に見ていただきたい内容になっています。
また、レスポンシブにも対応してますのでコピペで使っていただいてもOKです。
レスポンシブと言っても`display`プロパティで表示の切り替えを行うことはせず完全に1つのHTMLで完結しています。

完成イメージは以下のとおりです。

<Video src="/articles/hamburger-complete.mp4" />

### 環境

動作確認環境はChromeバージョン109です。
今回はリセットCSSを使用しています。

<ExternalLink url="https://github.com/necolas/normalize.css/blob/master/normalize.css" />

環境によっては多少スタイルが崩れる可能性があるので注意してください。

### ハンバーガーメニューについて

知っている方も多いかと思いますが、ハンバーガーメニューとはナビゲーションメニューの一種です。
スマートフォンなどの画面の小さいデバイスで、画面内の情報をすっきりさせるために設置されることが多いです。

## ハンバーガーメニューをCSSだけで実装

### PCの実装（画面幅が十分に大きくハンバーガーメニューを表示しない）

それではハンバーガーメニューをCSSだけで実装していきます。
先にPCサイズの実装をしていきます。

```html title="HTML" showLineNumbers
<header class="c-header">
  <!-- 全体 -->
  <a href="#" class="c-header__logo">ロゴ</a>
  <!-- ロゴ 差し替えてください -->
  <ul class="c-header__list">
    <!-- メニュー -->
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">About</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Service</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Company</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Recruit</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Contact</a>
    </li>
  </ul>
</header>
```

```css title="CSS" showLineNumbers
.c-header {
  align-items: center;
  background-color: #eeeeee; /* カスタマイズしてください */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem; /* カスタマイズしてください */
  width: 100%;
}

.c-header__logo {
  color: #000; /* カスタマイズしてください */
  min-width: 80px; /* カスタマイズしてください */
  text-decoration: none;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
}

.c-header__list-link {
  color: #000; /* カスタマイズしてください */
  display: block;
  margin-right: 20px; /* カスタマイズしてください */
  text-decoration: none;
  padding: 10px 0; /* カスタマイズしてください */
}

.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}
```

PCの画面はこのようになります。

![PC画面でのヘッダー表示](/articles/hamburger-pc-1-1024x272.webp)

### レスポンシブの実装（ハンバーガーメニューを表示する）

ハンバーガーメニューを構成するHTMLとクラス、CSSを追記します。
PC版からの変更箇所を以下に示します。

```html title="HTML" showLineNumbers
<!-- ↓ c-hamburger-menu クラスを追加 -->
<header class="c-header c-hamburger-menu">
  <a href="#" class="c-header__logo">ロゴ</a>
  <!-- ↓ チェックボックスを追加（メニューの開閉状態を管理） -->
  <input type="checkbox" name="hamburger" id="hamburger" class="c-hamburger-menu__input" />
  <!-- ↓ 背景オーバーレイを追加（メニューを開いた時の背景） -->
  <label for="hamburger" class="c-hamburger-menu__bg"></label>
  <!-- ↓ c-hamburger-menu__list クラスを追加 -->
  <ul class="c-header__list c-hamburger-menu__list">
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">About</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Service</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Company</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Recruit</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Contact</a>
    </li>
  </ul>
  <!-- ↓ ハンバーガーボタンを追加（3本線のアイコン） -->
  <label for="hamburger" class="c-hamburger-menu__button">
    <span class="c-hamburger-menu__button-mark"></span>
    <span class="c-hamburger-menu__button-mark"></span>
    <span class="c-hamburger-menu__button-mark"></span>
  </label>
</header>
```

```css title="CSS" showLineNumbers
/* ↓ ハンバーガーメニュー全体の基準位置 */
.c-hamburger-menu {
  position: relative;
}

/* ↓ スマホ時のメニューリスト（左からスライドイン） */
@media screen and (max-width: 750px) {
  .c-hamburger-menu__list {
    background-color: #eeeeee; /* カスタマイズしてください */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%); /* 初期状態は画面外 */
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  /* ↓ チェック時にメニューを表示 */
  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

/* ↓ チェックボックスを非表示 */
.c-hamburger-menu__input {
  display: none;
}

/* ↓ メニューを開いた時の背景オーバーレイ */
.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* ↓ チェック時に背景を表示 */
#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

/* ↓ ハンバーガーボタン（PC時は非表示） */
.c-hamburger-menu__button {
  display: none;
}

/* ↓ スマホ時のハンバーガーボタン */
@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
  }
}

/* ↓ ハンバーガーボタンの3本線 */
.c-hamburger-menu__button-mark {
  background-color: #000; /* カスタマイズしてください */
  display: block;
  height: 1px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 20px; /* カスタマイズしてください */
}

/* ↓ チェック時に3本線を×マークに変形 */
@media screen and (max-width: 750px) {
  /* 1本目：右下に回転 */
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  /* 2本目：非表示 */
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  /* 3本目：右上に回転 */
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}
```

少し解説を入れると、、、
ハンバーガーメニューのボタンは`label`を使います。
`label`をクリックすると、`input type="checkbox"`の`checked`が切り替わります。
それを利用して、ハンバーガーメニューの開閉を実現していきます。
`input type="checkbox"`が`checked`になった時、ハンバーガーメニューを開きたいのでセレクターの一般兄弟結合子を使ってメニューの表示に変化を加えます。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator" />

スマートフォンの画面では、右上のハンバーガーボタンをクリックするとメニューがスライドして表示されます。

<Video src="/articles/hamburger-complete.mp4" />

### 全コード

全コード貼っておきます！
コピペで使えると思いますが、パディングや色などはカスタマイズしてください！

```html title="HTML" showLineNumbers
<header class="c-header c-hamburger-menu">
  <!-- 追記 クラスを追記 -->
  <a href="#" class="c-header__logo">ロゴ</a>
  <input
    type="checkbox"
    name="hamburger"
    id="hamburger"
    class="c-hamburger-menu__input"
  /><!-- 追記 idはlabelのforと同じにする -->
  <label for="hamburger" class="c-hamburger-menu__bg"></label
  ><!-- 追記 ハンバーガーメニューを開いた時の背景 -->
  <ul class="c-header__list c-hamburger-menu__list">
    <!-- 追記 クラスを追記 -->
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">About</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Service</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Company</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Recruit</a>
    </li>
    <li class="c-header__list-item">
      <a href="#" class="c-header__list-link">Contact</a>
    </li>
  </ul>
  <label for="hamburger" class="c-hamburger-menu__button"
    ><!-- 追記 ハンバーガーメニューのボタン -->
    <span class="c-hamburger-menu__button-mark"></span>
    <span class="c-hamburger-menu__button-mark"></span>
    <span class="c-hamburger-menu__button-mark"></span>
  </label>
</header>
```

```css title="CSS" showLineNumbers
.c-header {
  align-items: center;
  background-color: #eeeeee; /* カスタマイズしてください */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem; /* カスタマイズしてください */
  width: 100%;
}

.c-header__logo {
  color: #000; /* カスタマイズしてください */
  min-width: 80px; /* カスタマイズしてください */
  text-decoration: none;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
}

.c-header__list-link {
  color: #000; /* カスタマイズしてください */
  display: block;
  margin-right: 20px; /* カスタマイズしてください */
  text-decoration: none;
  padding: 10px 0; /* カスタマイズしてください */
}

.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}

.c-hamburger-menu {
  position: relative;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__list {
    background-color: #eeeeee; /* カスタマイズしてください */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
  }
}

.c-hamburger-menu__button-mark {
  background-color: #000; /* カスタマイズしてください */
  display: block;
  height: 1px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 20px; /* カスタマイズしてください */
}

@media screen and (max-width: 750px) {
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}
```

<Callout variant="warning">
  この実装はシンプルさを重視しています。
  アクセシビリティを強化する場合は、ハンバーガーボタンに`aria-label`属性を追加したり、checkboxの非表示方法を`position:
  absolute; opacity: 0;`に変更することを検討してください。
</Callout>

## さいごに

今回は、CSSだけで簡単にできるハンバーガーメニュー（ドロワーメニュー）の作り方について紹介しました！
JavaScriptやjQueryは使用せずCSSだけで作成できるのですごく簡単でしたよね！
コピペで使えるのでぜひ使ってみてください！
他にもJavaScriptやjQueryを使った方法もありますので調べてみてください！


---

## 【Rails7】Turbo Driveを有効化しながらBootstarpのモーダルを使うときの注意点

- URL: https://blog.to-ko-s.com/articles/turbo-bootstrap-caution
- 著者: 西原月熙
- 公開日: 2023-02-11
- タグ: Rails

> Rails7でTurbo DriveとBootstrapを併用する際に、ブラウザバックにおける問題の解決策を書きました。具体的には、モーダル画面からページ遷移後にブラウザバックした時、モーダル画面を閉じられないといった不具合の解消を記載しています。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回はRails7で、次の2つを同時に使った時に起きた問題とその対策方法を説明します！

- Turbo
- Bootstrap

Rails7になり、`rails new sample-app --css=bootstrap`のようなコマンドで簡単にBootstrapをインストールできるようになりましたよね😎
さらに、Turbo(Drive)も特に意識していなければ自動でインストールされて有効化されているはずです。
なので、このような問題にぶつかる方も多いと思いますので、ぜひ最後まで読んでみてください🙏

## Turbo Driveについて

まずは簡単にTurbo、特にTurbo Driveについての説明を簡単にさせていただきたきます！
こちらを理解することで、なぜこのような問題が起きてしまうのかが分かり、応用も効くと思います💪
もう知っているという人は読み飛ばしてください🙇‍♂️

{/* prettier-ignore */}
<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  今回はTurboの中でもTurbo Driveにのみ焦点を当てていますので、他の技術(Turbo Frames, Turbo Streams)については割愛します🙏
</SpeechBubble>

Turbo Driveは一言で言うと「画面遷移を高速にしてくれる機能」です！
aタグ等のリンク先を事前に読み込んでおいて、いざリンクが押された時に`<body>`タグの中のみを差し替えることにより、その他の読み込み等を省略することで高速化しています✨

![Turbo Driveによるページ遷移時にbodyタグのみを差し替える仕組みの図解](/articles/image-1-1024x455.webp)

今回注目する部分が、「ブラウザバックをした時」です！

Turbo Driveにより、遷移前のページの直前の画面(DOM)構成は保存されています。
ブラウザバックボタンを押した時も、リンクをクリックした時と同様に`<body>`タグの中を保存されていた画面構成に戻すことで高速に直前の画面に戻ることができます💪

![Turbo Driveのブラウザバック時にキャッシュされたDOMを復元する仕組みの図解](/articles/33c698d1a01f115068864d528eefe109-1024x448.webp)

## Turbo + Bootstrapの問題点

ここで、1つ問題が起きてしまいます。
それは、「**モーダル画面内から画面遷移した後、ブラウザバックをするとモーダル画面から移動できない**」ことです。
下記画像のような状態です！

![ブラウザバック後にモーダルが開いたまま閉じられない状態の図解](/articles/33c698d1a01f115068864d528eefe109-2-1024x431.webp)

本来ならモーダルが開いていない状態のページに戻ってほしいのですが、モーダルが開いた後の状態で、尚かつバツボタン等でモーダルを閉じることができない状態になってしまいます😱
なぜこのような問題が起きてしまうのかと言うと、先程説明した「ブラウザバックの際には保存(キャッシュ)していた画面構成をそのまま戻してしまう」からです。

## Turbo + Bootstrapの問題解消方法

こちらの問題に対する対策なのですが、実は簡単です！
`application.html.erb`に1行追記するだけです

```erb title="application.html.erb" showLineNumbers {11}
<!DOCTYPE html>
<html>
  <head>
    <title>TODOアプリ</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    <meta name="turbo-cache-control" content="no-cache">
  </head>

  <body>
    <%= yield %>
  </body>
```

11行目の部分です！
`name="turbo-cache-control"` の部分で、Turboのキャッシュにたいする設定という意味になります。
そして、`content="no-cache"` の部分でキャッシュをしないという設定になります！

このように記述することで、ブラウザバックをしたとしてももともとの状態(モーダルが開いていない状態)のページにちゃんと戻ってくれるようになります✨

ただ、この設定によりブラウザバックの際のページ表示までの体感時間がやや遅くなる可能性があります。
なぜならキャッシュをせずに毎回もともとのページを読み込むことになるからです。
しかし、Turbo Drive自体をオフにするよりは明らかに早いのでこちらの設定をすることをオススメします！

## 終わりに

今回の内容は「Turbo DriveをオンにしながらBootstrapのモーダル画面遷移からブラウザバックする方法」というややニッチなものだったかもしれません。
しかし、個人的には割と頻出のパターンだと思いますので覚えておいて損は無いと思います😎

また、Turboは以前Railsに組み込まれていたTurbolinksと違い、HTTPメソッドを書き換えたりする機能も組み込まれているので安易にオフにすると他の機能に影響が出てしまう可能性があります😨
なので、Rails7においてはTurboは基本オンにしながら、適切な付き合いを行うことが大事かと思います😎


---

## 【GSAP】コピペOK!GSAPカーテンテキストアニメーション

- URL: https://blog.to-ko-s.com/articles/curtain-text-animation-from-gsap
- 著者: 杉田侑祐
- 公開日: 2023-02-06
- タグ: JavaScript

> GSAPを使ってカーテンテキストアニメーションを実装する方法を解説します。scaleXとtransform-originを使い、白い背景が左から右に伸びてテキストが出現するアニメーションをTimelineメソッドで実現します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform（`GSAP`）を使い、カーテンテキストアニメーションを実装していきたいと思います。
`GSAP`の基本的な使い方は下記の記事を参考にしてください。

<InternalLink slug="text-animation-from-gsap" />

### 対象読者

- Web制作でアニメーションの実装をしたい方

## 今回の完成予定

今回は`GSAP`を用いてカーテンアニメーションを実装してみたいと思います。
`GSAP`を使うと簡単に実装できるので、ぜひお試しください。
今回はHTML&CSSから`GSAP`まで手順を分けて解説していきたいと思います。

<Video src="/articles/curtain-text-animation-from-gsap-1.mp4" />

## GSAPの導入

`GSAP`を利用するには、公式サイトからダウンロードするか、CDNでも提供されているので公式サイトを参照してください。
今回はCDNを利用していきたいと思います。

<ExternalLink url="https://greensock.com/" />

## コードの紹介

```html title="HTML" showLineNumbers
<body>
  <p class="text">
    <span class="text__word">Hello World</span>
    <span class="text__bg"></span>
  </p>
</body>
```

```css title="CSS" showLineNumbers
body {
  /*全体レイアウトのための記述*/
  min-height: 100vh;
  background-color: #333;
  color: #353535;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 40px;
  color: #fff;
  position: relative;
}

.text__bg {
  display: block;
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
}
```

今回のアニメーションを実現するためには`.text__bg`クラスが重要になります。
このオブジェクトを操作し実現することになります。
テキストに対し背景色白のオブジェクトが覆いかぶさっていると思います。
下記のようになっていれば大丈夫です。

![白い背景がテキストを覆い隠している初期状態のブラウザ表示](/articles/1854ff22b48d8b1a444bc3e17eb4eba1-1024x561.webp)

### アニメーションを意識したプロパティの追加

先程も少し説明しましたが、今回は`.text__bg`クラスが重要になります。
実現したいアニメーションをもう一度確認すると、`.text__bg`が左方向から右方向に伸びてから左に戻るときにテキストが出現するアニメーションになっていると思います。
それを踏まえ今回は`to()`メソッドを使用するのでアニメーション開始前の状態を追記します。

```css title="CSS" showLineNumbers
body {
  /*全体レイアウトのための記述*/
  min-height: 100vh;
  background-color: #333;
  color: #353535;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 40px;
  color: #fff;
  position: relative;
}

.text__bg {
  display: block;
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
  transform-origin: left;
  transform: scaleX(0);
}

.text__word {
  opacity: 0;
}
```

今回は`.text__bg`が右方向に伸びるのを`transform: scaleX`で実現しようと思います。
`transform: scaleX`だけでは伸びる方向が指定できないので、`transform-origin: left`で中心点を左にし左から右に伸びるように指定しています。
またテキストの`opacity`を0にして消しています。
この状態でブラウザを確認すると何も写っていないと思います。
ここから`to()`メソッドを使用して完成させていきたいと思います。

### GSAPの記述

今回のアニメーションさせる手順として3ステップあります。

1. 左から右に白色背景のオブジェクトを伸ばす
2. テキストの表示
3. 右から左に白色背景のオブジェクトを縮める

これを順に行っていきたいので、`Timeline`メソッドを使用して実装していきたいと思います。
まだ`Timeline`メソッドの使用方法がわからない方は下記を参照してください。

<InternalLink slug="timeline-text-animation-from-gsap" />

```javascript title="JavaScript" showLineNumbers
const tl = gsap.timeline({ delay: 1 })
const firstBg = document.querySelectorAll(".text__bg")
const word = document.querySelectorAll(".text__word")

tl.to(firstBg, {
  scaleX: 1,
  duration: 0.4,
  ease: Power2.easeOut,
})
  .to(
    word,
    {
      opacity: 1,
      duration: 0.1,
    },
    "-=0.1",
  )
  .to(firstBg, {
    scaleX: 0,
    duration: 0.4,
    ease: Power2.easeOut,
  })
```

`Timeline`メソッドを用いて1つずつのアニメーションを連結し、実現しています。
`scaleX`を1にしてからテキストの`opacity`を1にして表示し、最後また`scaleX`を0にして元に戻すようにしています。
`Timeline`メソッドで連続してアニメーションを行う際は`duration`で一つずつのアニメーション時間を調整することも重要です。
時間の制御がうまくできていないと見栄えがかなり悪くなります。
またアニメーションのイージングを設定することにより印象も変わってくると思います。
イージングを詳しく知りたい方は下記を参照してみてください。
これにて完成になります。

<InternalLink slug="gsap-textanimation-easing" />

## おまけ

右から左に伸ばしたいときは`transform-origin: right`にしてください。

```css title="CSS" showLineNumbers
body {
  /*全体レイアウトのための記述*/
  min-height: 100vh;
  background-color: #333;
  color: #353535;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 40px;
  color: #fff;
  position: relative;
}

.text__bg {
  display: block;
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
  transform-origin: right;
  transform: scaleX(0);
}

.text__word {
  opacity: 0;
}
```

<Video src="/articles/curtain-text-animation-from-gsap-2.mp4" />

## さいごに

今回は`GSAP`を用いてカーテンテキストアニメーションを実装しました。
アニメーションの使い勝手もよく、簡単に実装できるのでどんどん使っていこうと思いました。
イージングやアニメーション時間で印象もかなり変わってくるので、状況に応じて変更していこうと思いました。


---

## 【Rails7】Stimulusの命名規則について知ろう！

- URL: https://blog.to-ko-s.com/articles/stimulus-naming-convention
- 著者: 西原月熙
- 公開日: 2023-02-05
- タグ: Rails

> Rails7でJavascriptを扱う際のフレームワークであるStimulusについての命名規則についての解説をしました。パターン別にどのような命名をする必要があるのか説明しています。Stimulusについて勉強中の方は必見です。


## はじめに

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回はRails7でJavaScriptを扱う時にデファクトスタンダードとなっているStimulusについて、様々な命名規則について深ぼって解説します！
自分がStimulusを使う時につまずいたポイント等を盛り込んでいますので、お役に立てると幸いです😎

### Stimulusとは

その前にStimulusについて超簡単に説明します！
Stimulusとは、Rails(7)がデフォルトで組み込んでいるJavaScriptのフレームワークです。HTMLのdata属性等を使って簡単にアニメーション等を実装するためのモノです。JavaScriptにそこまで詳しくなくても実装できるのが利点です！

詳しい説明や導入方法等は別の記事に記載していますので、気になる方はこちらも読んでみてください🙏

<InternalLink slug="stimulus-introduce" />

## Stimulusの"命名規則"とは？

さて、早速Stimulusの命名規則について解説しようと思います！
本記事において、Stimulusにおける命名規則は以下のモノを決める時のルールとします！

- `controller`名(+ `import`名、ファイル名)
- `target`名
- メソッド名

大きくは上記3つ程に分類できます！
それぞれについて、実際に使用するまでにJavaScript側とHTML側の記述が必要になります！

[公式サイト](https://stimulus.hotwired.dev/)を基にしてRailsバージョンの解説をします！
(以下`hello_controller.js`として解説します)

### `controller`名(+ `import`名、ファイル名)

これは、`app/javascript/controllers`配下にある、`**_controller.js`ファイル名自体と、`app/javascript/controllers/index.js`で呼び出す`import`名です！

```javascript title="app/javascript/controllers/index.js" showLineNumbers {7,8}
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)
```

上記例のように、7,8行目あたりで定義するものですね！

HTML側では、以下のように指定します！

```html title="index.html.erb" showLineNumbers {1}
<div data-controller="hello">
  <input data-hello-target="name" type="text" />

  <button data-action="click->hello#greet">Greet</button>

  <span data-hello-target="output"> </span>
</div>
```

この記述でそもそものHTMLとJavaScriptの意思疎通ができるのでしたね！

### `target`名

これは、DOM操作をしたい対象について宣言するものですね！
JavaScript側の記載箇所は、`hello_controller.js`ファイル内に書く記述です。

```javascript title="hello_controller.js" showLineNumbers {5,8}
// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["name", "output"]

  greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}
```

5行目のように定義しておけば、document.getElementByIdで取得したようになり、8行目のように呼び出せます！

HTML側では、以下のように指定します！

```html title="index.html.erb" showLineNumbers {2,6}
<div data-controller="hello">
  <input data-hello-target="name" type="text" />

  <button data-action="click->hello#greet">Greet</button>

  <span data-hello-target="output"> </span>
</div>
```

### メソッド名

これは、実際に動作を行った時のロジック内容を記載するものですね！
JavaScript側の記載箇所は、

```javascript title="hello_controller.js" showLineNumbers {7-9}
// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["name", "output"]

  greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}
```

7 ~ 9行目の記述です！

HTML側では、

```html title="index.html.erb" showLineNumbers {2,6}
<div data-controller="hello">
  <input data-hello-target="name" type="text" />

  <button data-action="click->hello#greet">Greet</button>

  <span data-hello-target="output"> </span>
</div>
```

4行目のような形です！
それでは、これらをどのように命名する必要があるのか解説していきます！

## 各命名規則について

上記3種類の各命名規則については、ぶっちゃけ公式サイトを見たらほとんど分かるとは思うのですが、1つだけすぐに分からないことがあったので本記事ではその内容について触れていきます！

それは、「**複数単語**」の場合です！
公式サイトの例では、`hello_controller.js`となっており、`target`やメソッドも単語が1つで構成されているのでこのあたりが分からなかったです。
詳しくは、公式サイト内等を色々たどれば書いてあるのですが、本記事では抜粋して分かりやすくまとめます😎

### `controller`名(+ `import`名、ファイル名)

まずは`controller`名です！
`controller`についてはファイル名、`index.js`内の`import`名やHTMLと色々記述する箇所があるのですが、JavaScript側については簡単にルール通りに記述する方法があります！

それは`rails g stimulus`コマンドを使うことです！
例えば、`rails g stimulus hello`とターミナルに打つと、、

```javascript title="app/javascript/controllers/index.js" showLineNumbers {7,8}
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)
```

```javascript title="app/javascript/controllers/hello_controller.js" showLineNumbers
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="hello"
export default class extends Controller {
  connect() {}
}
```

上記のように、`index.js`に追記がされつつ、`hello_controller.js`ファイルが作成されます！
これにより、実質的に命名規則については特に意識しなくて良さそうですね！

とは言いつつ、気になるとは思いますので一応解説します！
ファイル名については、スネークケースで、`import`名については、パスカルケースです！

HTML側については、上記の`hello_controller.js`の3行目に書いてあるように、

```html title="index.html.erb" showLineNumbers {1}
<div data-controller="hello">
  <!-- 色々 -->
</div>
```

このように書けばOKです！

命名規則の一般用語について

{/* prettier-ignore */}
<Callout>
  - スネークケース：`foo_bar_hoge`のように、単語と単語の間をアンダースコアでつなげたもの
  - キャメルケース：`fooBarHoge`のように、最初の単語のイニシャルのみ小文字、後は大文字にしてそのままつなげたもの
  - パスカルケース：`FooBarHoge`のように、各単語のイニシャルを大文字にしてそのままつなげたもの
  - ケバブケース　：`foo-bar-hoge`のように、単語と単語の間をハイフンでつなげたもの
</Callout>

次に複数単語の`controller`を作る時の説明をします！
こちらについても簡単で、`rails g stimulus my_hello`とコマンドを打つだけです！(スネークケースでもパスカルケースでもOK)
同様に確認してみると、

```javascript title="app/javascript/controllers/index.js" showLineNumbers {10,11}
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)

import MyHelloController from "./my_hello_controller"
application.register("my-hello", MyHelloController)
```

```javascript title="app/javascript/controllers/my_hello_controller.js" showLineNumbers
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="my-hello"
export default class extends Controller {
  connect() {}
}
```

同じように、それぞれの命名規則のルールごとに自動生成されます！

気を付けて欲しいのが、HTML側での呼び出しです！
こちらは**ケバブケース**になっています！

```html title="index.html.erb" showLineNumbers {1}
<div data-controller="my-hello">
  <!-- 色々 -->
</div>
```

`my-hello`のように、ハイフンつなぎで書いてください！

以上で`controller`の解説を終わります！
基本的に自動生成されるので問題無かったのでは無いでしょうか？

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  僕は最初このようなコマンドがあることを知らなくて全部手動で作っていて大変でした😱
</SpeechBubble>

### `target`名

`target`に関して結論から、JavaScriptもHTMLもキャメルケースです！！
公式サイトの例の`target`名だけ複数単語に変更したバージョンが下記になります！

```javascript title="hello_controller.js" showLineNumbers {5,8}
// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["myName", "myOutput"]

  greet() {
    this.myOutputTarget.textContent = `Hello, ${this.myNameTarget.value}!`
  }
}
```

```html title="index.html.erb" showLineNumbers {2,4}
<div data-controller="hello">
  <input data-hello-target="myName" type="text" />
  <!-- 略 -->
  <span data-hello-target="myOutput"> </span>
</div>
```

HTML側では、`data-**-target="変数"`のように左辺は記述します！
`**`の部分には、`controller`名が入ります！
ここで気になるのが、controller名が複数単語の場合です🤔
この場合、`**`の部分は**ケバブケース**で記載してください！

```html title="index.html.erb" showLineNumbers {1}
<div data-controller="my-hello">
  <input data-my-hello-target="myName" type="text" />
  <!-- 略 -->
  <span data-my-hello-target="myOutput"> </span>
</div>
```

これで、`controller`名が複数単語かつ`target`が複数単語のパターンも問題無いですね✨

### メソッド名

最後にメソッドです。

```javascript title="hello_controller.js" showLineNumbers {7-9}
// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["myName", "myOutput"]

  myGreet() {
    this.myOutputTarget.textContent = `Hello, ${this.myNameTarget.value}!`
  }
}
```

まず、JavaScriptはキャメルケースです！

```html title="index.html.erb" showLineNumbers {4}
<div data-controller="hello">
  <input data-hello-target="myName" type="text" />

  <button data-action="click->hello#myGreet">Greet</button>

  <span data-hello-target="myOutput"> </span>
</div>
```

HTML側は、`data-action="アクション->コントローラー名#メソッド名"`のようになります！
アクションは、`click`以外にも、`mouseover`等様々なものが使えるので気になる人は下記リンクが参考になったので見てみてください

<ExternalLink url="https://qiita.com/whw3312/items/94a2bdf632ef77555579" />

メソッドの呼び出しについても、`controller`が複数単語の場合はHTML側で**ケバブケース**を指定してください！

```html title="index.html.erb" showLineNumbers {4}
<div data-controller="my-hello">
  <input data-my-hello-target="myName" type="text" />

  <button data-action="click->my-hello#myGreet">Greet</button>

  <span data-my-hello-target="myOutput"> </span>
</div>
```

HTML側では、`controller`は全て**ケバブケース**という覚え方で問題無いです💪

## 終わりに

ここまでを読んでいただければ分かるのですが、命名規則なんてものは知っているか知らないかだけですね！
僕はこれを調べるのにかなり時間をかけてしまったので、この記事を見て時短をしてくれる人がいれば嬉しい限りです✨

Stimulusについて[この本](https://amzn.to/3YuXqEF)にも解説が載っているので、よければ読んでみてください🥳


---

## 【ScrollTrigger】forEach文を使用した繰り返し処理とスクロール量に合わせたアニメーション

- URL: https://blog.to-ko-s.com/articles/scrolltrigger-foreach
- 著者: 杉田侑祐
- 公開日: 2023-01-23
- タグ: JavaScript

> GSAPのScrollTriggerを使ったスクロールアニメーションの実装方法を解説します。forEach文を使った繰り返し処理と、scrubオプションを使ったスクロール量に連動するアニメーションの実装を紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSエンジニアのスギタです！

今回は、GreenSock社が開発したGreenSock Animation Platform(GSAP)の`ScrollTrigger`を使いスクロールアニメーションを行ってみようと思います。
またGSAPでの繰り返し処理とスクロール量に合わせたアニメーションも合わせて実装していきたいと思います。
また基本的なGSAPの使い方や`ScrollTrigger`の使い方がわからないかたは下記の記事を参考にしてください！

<InternalLink slug="text-animation-from-gsap" />

<InternalLink slug="gsap-scrolltrigger-flow" />

### 対象読者

- Web制作でアニメーションの実装をしたい方

## 今回の完成予定

今回はテキストに対して、以前やったスクロールするとふわっと浮き出るアニメーションに加え、画像にはスクロール量に対して画像の位置が変わるアニメーションを行っていきます。

<Video src="/articles/scrolltrigger-foreach.mp4" />

## GSAPとScrollTriggerの導入

GSAPを利用するには、オフィシャルサイトからダウンロードするか、CDNでも提供されているので公式HPを参照してください。
今回はCDNを利用していきたいと思います。

<ExternalLink url="https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger#cdn" />

<Callout variant="warning">`ScrollTrigger`を使用する際、GSAPに依存しているため、GSAPと`ScrollTrigger`両方読み込まないといけません。</Callout>

## コードの紹介

では1つずつ分解して紹介していきます。

### レイアウトを整える

```html title="HTML" showLineNumbers
<body>
  <div class="fv"></div>
  <div class="layout">
    <div class="content">
      <div class="wrapper js-scroll">
        <img src="./img/image1.jpg" alt="山" class="image " />
      </div>
      <p class="text js-scroll-text">
        私も生涯人知れずその観察者というのの時を入ったん。現に当時に講演学はつるつるこうした附随なけれありでもをしてくれなかっをは注意したたて、そうとはついたないなです。徳義にぶらです方はまあ前にけっしてあるたです。おもに岡田さんで相当主義そう話が借りた亡骸この壇これか随行がというご話たたましだろから、同じ昔は私か珍個性をあるて、嘉納さんののを取消の私を単にお注意とならてそこ空腹にご観念をあるように同時におお話をするありたので、ただいまはたして記憶が当てべきでいですのに上げだっん。またするとお教授でもっのはそれだけ危険と云うないが、この徳義心へもなりだがという中腰をさておりまします。
      </p>
    </div>
    <div class="content">
      <p class="text js-scroll-text">
        私も生涯人知れずその観察者というのの時を入ったん。現に当時に講演学はつるつるこうした附随なけれありでもをしてくれなかっをは注意したたて、そうとはついたないなです。徳義にぶらです方はまあ前にけっしてあるたです。おもに岡田さんで相当主義そう話が借りた亡骸この壇これか随行がというご話たたましだろから、同じ昔は私か珍個性をあるて、嘉納さんののを取消の私を単にお注意とならてそこ空腹にご観念をあるように同時におお話をするありたので、ただいまはたして記憶が当てべきでいですのに上げだっん。またするとお教授でもっのはそれだけ危険と云うないが、この徳義心へもなりだがという中腰をさておりまします。
      </p>
      <div class="wrapper js-scroll">
        <img src="./img/image2.jpg" alt="山" class="image" />
      </div>
    </div>
    <div class="content">
      <div class="wrapper js-scroll">
        <img src="./img/image3.jpg" alt="山" class="image" />
      </div>
      <p class="text js-scroll-text">
        私も生涯人知れずその観察者というのの時を入ったん。現に当時に講演学はつるつるこうした附随なけれありでもをしてくれなかっをは注意したたて、そうとはついたないなです。徳義にぶらです方はまあ前にけっしてあるたです。おもに岡田さんで相当主義そう話が借りた亡骸この壇これか随行がというご話たたましだろから、同じ昔は私か珍個性をあるて、嘉納さんののを取消の私を単にお注意とならてそこ空腹にご観念をあるように同時におお話をするありたので、ただいまはたして記憶が当てべきでいですのに上げだっん。またするとお教授でもっのはそれだけ危険と云うないが、この徳義心へもなりだがという中腰をさておりまします。
      </p>
    </div>
  </div>
</body>
```

```css title="CSS" showLineNumbers
/* resetcssは省略 */
body {
  background-color: black;
}

.fv {
  width: 100vw;
  height: 100vh;
}

.layout {
  width: fit-content;
  margin: auto;
  padding: 200px 16px;
}

.content {
  display: flex;
  align-items: center;
  gap: 0px 40px;
  margin-top: 120px;
}

.wrapper {
  max-width: 600px;
}

.image {
  width: 100%;
  height: auto;
}

.text {
  max-width: 600px;
  color: #fff;
}
```

あまり説明することはありません。
お好きなフォントとレイアウトにしちゃってください！

### 前回の確認

ではまず以前紹介したような、スクロールの位置に対して、フワッと浮き出てくるアニメーションをテキストに実装していきたいと思います。
まずは前回のコード確認をします。

```javascript title="JavaScript" showLineNumbers
gsap.fromTo(
  ".hoge1",
  { y: 20, autoAlpha: 0 },
  {
    y: 0,
    autoAlpha: 1,
    scrollTrigger: {
      trigger: ".hoge", //triggerさせる要素をアニメーションが始まる直前の要素を指定していた
      start: "bottom top",
    },
  },
)
gsap.fromTo(
  ".hoge2",
  { y: 20, autoAlpha: 0 },
  {
    y: 0,
    autoAlpha: 1,
    scrollTrigger: {
      trigger: ".hoge1", //triggerさせる要素をアニメーションが始まる直前の要素を指定していた
      start: "bottom top",
    },
  },
)
```

前回は`ScrollTrigger`内の記述で`trigger`に直前の要素を指定していたと思います。
それでは、アニメーションをかけたい要素の数分の記述が必要になってしまいます。
細かく1つずつ指定できるのは良いかもしれませんが、やはり記述量が多くなってしまいます。
やはり同じアニメーションであれば、繰り返し処理などを使って処理するべきです。

### Utility Methodsの使用

では繰り返し処理をしようとした場合は要素を配列に格納する必要があります。
そのためにGSAPではいろいろなことができる`Utility Methods`という様々な便利なメソッドを用意してくれています。
興味のある方は下記を参照してみてください。

<ExternalLink url="https://greensock.com/docs/v3/GSAP/UtilityMethods" />

今回`Utility Methods`の中の`toArray()`メソッドを使用していきます。
このメソッドはセレクターを用いて要素を取得し、配列に格納してくれます。

例）`toArray(".class")` ==> `[element, element2]`
このように要素を指定し配列に格納していってくれます。
ではこのことを踏まえクラス名`.js-scroll-text`を配列に入れていきたいと思います。
`gsap.utils.toArray(".hoge");`で配列の生成ができます。

```javascript title="JavaScript" showLineNumbers
const texts = gsap.utils.toArray(".js-scroll-text")
```

これで`texts`という配列を生成できました。
ではこれに対して`forEach`文で繰り返し処理を行っていきたいと思います。

```javascript title="JavaScript" showLineNumbers
const texts = gsap.utils.toArray(".js-scroll-text")
texts.forEach((text) => {
  gsap.fromTo(
    text,
    {
      y: 40,
      autoAlpha: 0,
    },
    {
      y: 0,
      autoAlpha: 1,
      scrollTrigger: {
        trigger: text, //アニメーションが始まるトリガーとなる要素
        start: "top-=100px center", //アニメーションが始まる位置
      },
    },
  )
})
```

これでテキストに対しアニメーションの実装の完了です。
`ScrollTrigger`内の記述でトリガーとなる要素は、前回はアニメーションが始まる直前の要素にしていましたが、今回はアニメーションの対象の要素にしています。
そのほうが直前の要素名に依存せず、使いまわしがより柔軟にできると思います。
これでテキストに対するアニメーションは完了です。

### スクロール量に合わせたアニメーションの実装

それでは次にスクロール量に合わせたアニメーションの実装です。
では早速紹介していきます。

```javascript title="JavaScript" showLineNumbers
const images = gsap.utils.toArray(".js-scroll")
images.forEach((image) => {
  gsap.to(image, {
    y: -100,
    scrollTrigger: {
      trigger: image,
      start: "top center",
      end: "bottom center",
      scrub: 1,
    },
  })
})
```

今回も先程紹介した、繰り返し処理をもとに実装していきます。
今回は`to()`メソッドで指定しています。
`ScrollTrigger`内の記述でいつもと違う箇所があります。
`end: "bottom center"`と`scrub: 1`です。
これが、スクロール量に対しての記述になります。
分かりづらいと思いますので`markers: true`にして確認していきます。

```javascript title="JavaScript" showLineNumbers {10}
const images = gsap.utils.toArray(".js-scroll")
images.forEach((image) => {
  gsap.to(image, {
    y: -100,
    scrollTrigger: {
      trigger: image,
      start: "top center",
      end: "bottom center",
      scrub: 1,
      markers: true,
    },
  })
})
```

![ScrollTriggerのmarkers確認](/articles/49c118a44fee198be884d05f8118ef75-1024x562.webp)

`start`と`end`でアニメーションの開始地点と終了地点を指定し、それに対し`scrub`でスクロール量に対してアニメーションしてねという感じです。
`scrub`はスクロールに対しての遅延する秒数を指定します。
これでスクロールごとに1秒間アニメーションを実行させることができるようになります。

## さいごに

今回はスクロールアニメーションの繰り返し処理とスクロール量に対してのアニメーションの実装を行いました。
今回紹介した`Utility Methods`の`toArray()`メソッド以外にも使えそうなメソッドがありましたので、また別の機会に使用してみようと思います。
またスクロール量に対してのアニメーションも最近のモダンなHP等ではよく見かけるので、使用できるようになると表現の幅も広がるなと感じました。


---

## 【Rails7】Stimulus入門！ | 概要 ~ 使い方まで詳しく解説

- URL: https://blog.to-ko-s.com/articles/stimulus-introduce
- 著者: 西原月熙
- 公開日: 2023-01-14
- タグ: Rails

> Rails 7で標準となったStimulusの概要から実践的な使い方まで詳しく解説。Hotwireの構成要素としての位置づけ、導入方法、data属性を使ったDOM操作の書き方をサンプルコード付きで紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、RailsでJavaScriptを扱う際にはスタンダードとなりつつある**Stimulus**についての簡単な説明から、使い方まで解説します！
個人的には、少ないJavaScriptの記述量でアニメーションやDOM操作が可能となるのでかなりオススメの技術です😎
あまり知らなかった人も、この機会にサラッと学んでみましょう✨

### 対象読者

- Stimulusが何なのか知りたい人
- RailsでDOM操作を行いたい人

## Stimulusとは？

### Hotwireについて

Stimulusについて解説するために、まずは**Hotwire**という技術について説明します！
Hotwireをひとことで説明すると、「**JavaScriptをあんまり書かずに今どきのリッチなアプリケーションを作る**」技術です！

今どきのアプリケーションは、様々な動作やアニメーションを駆使してユーザーの使いやすさを上げようとしているものばかりですね💪
ユーザーにとってはどんどん便利になって嬉しいかと思いますが、開発者はそれに比例してどんどん仕事の量が増えてしまいます、、😢
更に、そういったフロントエンドの記述は基本的にJavaScriptで書きますが、RailsエンジニアはJavaScriptをそこまで得意としていない人もいます😨

そこで、Railsはより少ない(JavaScriptの)記述で今どきのアプリケーションを作りたいという方向に舵を切り、その結果としてHotwireという技術が出来上がりました🥳

Hotwireは大きくは「Turbo + Stimulus」という要素で構成されています。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  Turboについては今回は解説は省略します🙏
</SpeechBubble>

### Stimulusについて

Hotwireの概要を説明したので、いよいよStimulusの解説に移ります！
Stimulusの主な仕事については、いわゆるDOM操作をさせるものとなります！

- ボタンが押された時に色を変更
- ハンバーガーメニューの処理
- モーダル画面の表示

上記のように、URLの変更無しでの動作を簡単に記述できます😎
もちろんこれ以外にもJavaScriptで行いたい動作もできます！

Stimulusの実態としては、JavaScriptのライブラリです。なので、Rails以外でも使うことはもちろん可能です！
ですが、Railsで使う場合は`stimulus-rails`というgemがあります。これはStimulusを使いやすくするためのgemで、更に実装を助けてくれるので基本はRails上で使うことがオススメです！

### 他のJSライブラリとの違い

最近はフロントエンドはVue, Reactが使われる場合がほとんどかと思います。
これらのライブラリと比べたときのメリットは「記述が少ない」「環境構築が不要」ということかと思います！

「記述が少ない」ということについては先程からずっと書いていますよね！
こちらについては後ほど体感してもらいますのでお楽しみに😎

「環境構築が不要」ということについてもかなりメリットかと思います！
通常Vue(Nuxt.js)やReact(Next.js)をフロントエンドとして使用する場合はフロントエンドの環境構築やメンテナンスも必要になります。
このコストが結構大きいですが、Stimulusで実装する場合はかなり楽に導入ができます✨
こちらに関しても次の章で具体的に体感してもらいましょう😎

## 導入方法

### 導入方法

では早速Stimulusを導入します！

...と言いましたが、Rails7で`$ rails new`をする際に自動でインストールされているかと思います💪

```ruby title="Gemfile"
# ...
gem "stimulus-rails"
```

初期時点でちゃんと`stimulus-rails`が入っていました✨

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  JSの管理にWebpackを使っている場合は、`package.json`に`@hotwired/stimulus`が入っているよ！
</SpeechBubble>

後から導入したい場合は、上記の`stimulus-rails`(+`@hotwired/stimulus`)をインストールすることで導入可能です！

### ファイル構成

次に、Stimulusの記述するファイルの場所等について説明します！

起点となるファイルは、`app/javascript/application.js`です！

```javascript title="app/javascript/application.js" showLineNumbers
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
```

簡単に解説すると、必要なライブラリそのものと実際に自分で書くファイル群を集める`app/javascript/controllers`ディレクトリ内の`index.js`を読み込んでいます！
このファイルは基本的には自分では触らないかと思います！

続いて、読み込み先の`app/javascript/controllers/index.js`を確認します！

```javascript title="app/javascript/controllers/index.js" showLineNumbers
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)
```

5行目で、更に同じディレクトリ内の`application.js`を読み込んでいます。細かくは割愛しますが、`application.js`内の記述によってやっとStimulusを起動することになります✨

7,8行目の記述については、最初のサンプルファイルとなる`hello_controller.js`を読み込んでからStimulusの動作として登録しています。
この記述については、`rails generate stimulus 〇〇`コマンドを打ってファイルを作成する度に自動で追記されます！
なので、こちらのファイルも基本的には自分で追記**しません**！

## 使い方・記述方法

### Stimulusのファイル作成 ~ 実行

それでは、ここから実際にStimulusのファイルを作成して実際にブラウザで動作を確認するところまで行ってみます！
今回実装する機能は、Stimulusの公式サイトと同じ機能にします！
具体的には、`input`タグの中に文字を適当に書いてボタンを押したら、`Hello 〇〇`というテキストを`span`タグに生成するものです！
動作を確認したい方は下記リンクで見てみてください。

<ExternalLink url="https://stimulus.hotwired.dev/" />

それでは、必要なファイルを作成するために、ターミナルに下記コマンドを打ち込んでください！

```bash title="ターミナル"
rails generate stimulus issen
```

これで、次の2つが行われました。

- 「`app/javascript/controllers/index.js`への追記」
- 「`app/javascript/controllers/issen_controller.js`の作成」

順に確認してみます！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  "issen"という文字はファイル名に使われる自由な文字列だよ！ 実際に開発をする時は意味を持たせるような名前が良いね！
</SpeechBubble>

```javascript title="app/javascript/controllers/index.js" showLineNumbers {10,11}
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)

import IssenController from "./issen_controller"
application.register("issen", IssenController)
```

`index.js`には、`issen_controller.js`を読み込む処理が追加されています！

```javascript title="app/javascript/controllers/issen_controller.js" showLineNumbers
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="issen"
export default class extends Controller {
  connect() {}
}
```

`issen_controller.js`には、Stimulusの雛形となる記述があります！
このファイルを記述していくことで今回の機能を実装します！

### JavaScriptの記述

ここからは、`issen_controller.js`と適当な`index.html.erb`ファイルに追記をしていきます！

### `index.html.erb`

Stimulusの公式ページを適当なところにペーストしてみます！
(お好みでCSSをあててください)

```html title="index.html.erb" showLineNumbers
<!--HTML from anywhere-->
<div data-controller="hello">
  <input data-hello-target="name" type="text" />

  <button data-action="click->hello#greet">Greet</button>

  <span data-hello-target="output"> </span>
</div>
```

今回は、controllerファイルの名前が`issen`なので、`hello`となっている部分を全て`issen`にしてみます！

```html title="index.html.erb" showLineNumbers {3,5,7}
<!--HTML from anywhere-->
<div data-controller="issen">
  <input data-issen-target="name" type="text" />

  <button data-action="click->issen#greet">Greet</button>

  <span data-issen-target="output"> </span>
</div>
```

合計4箇所を変更しました！
2行目の`data-controller="issen"`部分で、このファイルのこの`<div>`タグ内で`issen_controller.js`を使いますという意味になります！
その他の部分は追って解説します！

### `issen_controller.js`

まずは、ちゃんとこの`issen_controller.js`が`index.html.erb`に読み込まれているかを確認します！
次のように追記してください

```javascript title="app/javascript/controllers/issen_controller.js" showLineNumbers
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="issen"
export default class extends Controller {
  connect() {
    console.log("Hello, I'm issen_controller.js!!!")
  }
}
```

connect()メソッド内の記述は、このcontrollerが読み込まれた際に実行されます！
そこで`console.log`メソッドを仕込んで実際にブラウザのConsoleに`Hello, I'm issen_controller.js!!!`と表示されるか確認します。

`index.html.erb`のページをリロードしてみると、

![ブラウザのConsoleにissen_controller.jsの読み込みが表示された画面](/articles/image-1024x440.webp)

ちゃんと表示されました！
これで上手く動いてくれることが確認できました💪

続いて、機能実装のための記述を追加していきます。
この記述についても、Stimulusの公式ページの内容をベースに追記します！

```javascript title="app/javascript/controllers/issen_controller.js" showLineNumbers {5,11-13}
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="issen"
export default class extends Controller {
  static targets = ["name", "output"]

  connect() {
    console.log("Hello, I'm issen_controller.js!!!")
  }

  greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}
```

これで準備完了です！
ブラウザで実際に触ってみましょう！

![Stimulusでinputに入力した名前がHello表示される動作確認の画面](/articles/image-1-1024x536.webp)

無事同じ動作をしてくれました✨✨

### 解説

それでは、なぜこのような動作をするのかの解説をします！
大事なのは、「要素の取得」「動作の発火」です！

### 要素の取得

data属性の記述によって、StimulusはHTMLの`input`タグや`span`タグを取得しています！
今回の場合、`input`タグは`data-issen-target="name"`、`span`タグは`data-issen-target="output"`とかかれていますよね。
この記述で`issen_controller.js`の`name`,`output`という変数に格納されるということです！
`issen_controller.js`側に`static targets = ["name", "output"]`という記述をする必要もありますので忘れずに書きましょう！

これで要素をJS側で`this.outputTarget`、`this.nameTarget`というような形で使用できます！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  変数名によって書き換える場所がやや分かりづらいので注意してください！
  `data-○○-target="××"`の時、`○○_controller.js`の`this.××Target`になります！
</SpeechBubble>

### 動作の発火

`span`タグの中身を書き換えるロジックが`greet()`メソッドになります！

```javascript title="app/javascript/controllers/issen_controller.js" showLineNumbers {3}
// 略
  greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}
```

このメソッドは「`span`タグの中身のテキストを`Hello + input`タグの中身の文字列に変更します」という内容なりますね！

ではボタンを押した時にどうやってこの`greet()`メソッドを発火させているかというと、HTML側の`button`タグ内の`data-action="click->issen#greet"`という記述です！
この記述で、「この要素をクリックした時に、`issen_controller.js`の`greet()`メソッドを実行してください」という内容になります！

{/* prettier-ignore */}
<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  click部分はeventになります！
  なので`focus`や`mouseover`等も使えるよ！
</SpeechBubble>

## 終わりに

今回はStimulusの概要の説明から、簡単な使い方まで説明しました！
実際のJavaScriptの記述は数行でしたが、ちゃんとDOM操作ができましたね、すごい✨

現状はまだまだ参考になる記事があまりないかと思いますが、少し勉強するだけでリッチなUIを作ることができるので頑張ってキャッチアップしましょう！
Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇‍♂️

次回は細かい命名規則等に触れながら解説予定ですのでお楽しみに😎

<InternalLink slug="stimulus-naming-convention" />


---

## 【GitHub】やりがちなミスの対処法(commit編)

- URL: https://blog.to-ko-s.com/articles/github-commit-fix
- 著者: 寺田拓真
- 公開日: 2022-12-25
- タグ: その他

> Gitのコミット時にやりがちなミスとその対処法について解説しています。コミットメッセージの修正やコミットの取り消し方法を、初学者向けにわかりやすく紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！

Webアプリ作成時にはGitの利用は必須ですが、たまに以下のようなミスをしてしまうことはありませんか？

- `commit`メッセージを打ち間違えた！
- 間違えた内容を`commit`してしまった！

特にプログラミングを学び始めて間もない方は上記のミスをしがちだと思います。
実際に私もよくミスして慌てていました、、

間違えた`commit`をしてしまった場合でも、対処法を知っていれば慌てることはありません。
そこで今回は、Gitの操作で初学者の方がやりがちなミスの対処法(`commit`編)を紹介します！

### 対象読者

- Gitを使用してWebアプリを作成している方
- Gitで`commit`操作を間違えて対処法を探している方

基本的なGitでの操作は以下のサイトが参考になります。

<ExternalLink url="https://tech-blog.rakus.co.jp/entry/20200529/git" />

## Gitでのミスと対処法

### commitメッセージを打ち間違えた

`commit`メッセージを打っている途中で`enter`を押してしまったり、誤変換したまま`commit`してしまった場合に使える対処法です！

#### `git commit --amend`

<Callout variant="warning">`amend`の前のハイフンは2つなので注意してください。</Callout>

![git commit --amendを実行してvimが起動した画面](/articles/ScreenShot-2022-12-26-0.54.35-1024x472.webp)

`commit`メッセージを打ち間違えた場合は上記のコマンドを使用しましょう。
このコマンドを使用すると下の画像のような画面になります。

1番上に表示されているのが`commit`メッセージになります。
今回はこれを修正していきましょう。
手順は以下のようになります。

1. `i`を押して挿入モードにする
2. メッセージを修正する
3. `esc`を押してモードを戻す
4. `:wq`で内容を保存する

詳しく説明していきます。
まず、先程の画面は`vim`になるので、通常と操作方法が異なります。
上記の画面のままでは、メッセージの編集ができないので、キーボードで`i`を押して挿入モードにする必要があります。
なお、`vim`の基本的な操作方法は以下のサイトが参考になります。

<ExternalLink url="https://kekaku.addisteria.com/wp/20190129143137#toc9" />

`i`を押した際の画面は以下のようになります。

![vimで挿入モードに切り替えてINSERTが表示された画面](/articles/ScreenShot-2022-12-26-1.08.31-1024x538.webp)

画像の下部のように`-- INSERT --`と表示されていれば挿入モードになっています。
これでメッセージの編集が可能です。
メッセージを修正したらキーボードで`esc`を押して、モードを戻しましょう。
その後、`:wq`で内容を保存して`vim`を終了します。
修正後は内容が反映されていることを`git log`コマンドで確認しましょう。

![git logでcommitメッセージの修正が反映されたことを確認](/articles/ScreenShot-2022-12-26-1.15.57.webp)

### commit内容を間違えた

`commit`内容を間違えた場合は以下の2つの方法で対処することが可能です。

- `git reset --soft HEAD^`
- `git revert <commitのID>`

<Callout variant="warning">`soft`の前のハイフンは2つなので注意してください。</Callout>

まず1つ目が`git reset --soft HEAD^`です。
こちらは直前の`commit`を取り消すことが可能です。

先程の例で使用してみます。
まず、`git reset --soft HEAD^`を使用する前のlogがこちらです。

![git reset実行前のcommit履歴をgit logで確認した画面](/articles/ScreenShot-2022-12-26-1.27.06.webp)

ここから`git reset --soft HEAD^`を使用すると以下のように一番上の`commit`が取り消されます。

![git reset --soft HEAD^で直前のcommitが取り消された履歴](/articles/ScreenShot-2022-12-26-1.30.25.webp)

これで、間違えた内容の`commit`を取り消すことが出来ました。

もう1つの方法が`git revert`の使用です。
こちらは特定の`commit`を打ち消すことが可能です。

打ち消すというイメージを具体的に説明します。
例えば以下のようにA〜Cまでの`commit`履歴があるとして、Bの内容を打ち消したいとします。

```text title="commitの打ち消しイメージ" showLineNumbers
A--B--C
```

その場合は、`git revert B`と打ちます。
そうすることで、`commit`履歴は以下のようになります。

```text title="revert後のcommit履歴" showLineNumbers
A--B--C--B'
```

上記の`B'`というのは、Bの内容を削除する内容の`commit`になります。
このようにすることで、実質Bの内容を取り消すことが出来ます。

実際の例で使用してみます。
各`commit`には画像のようにそれぞれIDが割り振られています。

![git logで各commitに割り振られたIDを確認する画面](/articles/ScreenShot-2022-12-26-1.49.32.webp)

`git revert`を使用する際は、このIDを指定することで特定の`commit`を打ち消すことが出来ます。
ターミナルで`git revert`を使用すると`vim`が立ち上がります。

![git revert実行後にvimでcommitメッセージを編集する画面](/articles/ScreenShot-2022-12-26-1.53.02-1024x517.webp)

一番上のメッセージが`git revert`後に作成した`commit`に付与される`commit`メッセージです。
必要に応じて編集してください。
編集後は先程と同様に内容を保存しましょう。
保存後、logを確認すると以下のようになります。

![git revert後に打ち消しcommitが追加された履歴](/articles/ScreenShot-2022-12-26-1.56.03.webp)

間違った`commit`は残されたまま、その内容を打ち消す`commit`が作成されていることが分かります。
これで一連の流れは完了です。

紹介した2つの方法の使い分けですが、直前の内容を取り消すだけであれば`git reset --soft HEAD^`の方が必要な操作も少なくて分かりやすいかと思います。

## さいごに

今回はGitでやりがちなミスの対処法(`commit`編)を紹介しました！
ミスしてしまった際は焦りますが、修正方法は意外と簡単ですぐに対応できるかと思います。
今後は`push`編なども紹介できればと思っていますので、ご期待ください！


---

## 【Rails】RuboCopの導入 ~ おすすめルールの設定方法

- URL: https://blog.to-ko-s.com/articles/rubocop-setting
- 著者: 西原月熙
- 公開日: 2022-12-18
- タグ: Ruby, Rails

> RuboCopの導入方法からおすすめの設定ファイルまで詳しく解説。rubocop-rails・rubocop-performanceの設定や、チーム開発で使いやすい緩めのルール設定例をコピペで使える形式で紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回はRuby(on Rails)のチーム開発では**必須**と言っても良いほどのgem「RuboCop」について、簡単な説明から導入方法 ~ 個人的なおすすめの設定を解説しようと思います😎
特に設定ファイルについては、自分なりに試行錯誤してかなりいい感じに仕上がっているのでぜひ参考にしてください🙏

### 対象読者

- 自分のコードをよりキレイにしたい方
- Ruby, Railsのチーム開発でコーディングのルールを決めたい方
- RuboCopの程良い設定を参考にしたい方

## RuboCopとは

まずざっくりとRuboCop自体の解説をします！
RuboCopとは、自分(チームメンバー)が書いたコードを1コマンドで解析してくれて、良くない点やもっと良い書き方を指摘してくれるgemです！
さらに、修正してくれる部分は自動で修正までしてくれる優れモノです💪

例えば、

```ruby title="修正前"
if @user.present?
  return user.name
end
```

↑ このような記述に対して、

```ruby title="修正後"
return user.name if @user.present?
```

↑ このように後置ifに自動で直してくれます！

後置ifだけでは無く、自分が知らなかったような記述方法も教えてくれるのでRuby力アップの参考にもなります✨
また、どれくらいの縛りのルールにするかも設定ファイルで細かくカスタマイズできます！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  例えばだけど、変数名の最大文字数や1行あたりの最大文字数みたいなルールもあるよ！
  デフォルトのルールだとこういうのがけっこう縛りがキツい時があるから自分でいい感じに緩めたいね！
</SpeechBubble>

## 導入方法

### インストール

早速インストールしてみます！

```ruby title="Gemfile" showLineNumbers {4-6}
# 中略
group :development do
  # 中略
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
end
```

上記の3つのgemをインストールします！
`rubocop`がRuboCopの本体で、他の2つは追加のルールを設定するために入れます！
特に、`rubocop-rails`はRailsに対する色々な設定を追加できるのでぜひ入れましょう💪

また、RuboCopは開発環境でしか使わないので`development`のグループに、毎回requireする必要が無いので`require: false`をつけておきます！

```bash title="ターミナル"
$ bundle install
```

忘れずに`bundle install`をしておきましょう🥳

### 初期設定

次に、下記コマンドで初期設定を行います。

```bash title="ターミナル"
$ bundle exec rubocop --auto-gen-config
```

このコマンドで

- `.rubocop.yml`
- `.rubocop_todo.yml`

の2ファイルが作成されるかと思います！
それぞれのファイルの説明は後で行います！

一旦これでRuboCopを使う準備は完了で、あとは行いたいタイミングで`$ bundle exec rubocop`を打つだけです。

問題無ければ、下記画像のように「`no offenses`」と緑の文字で表示されます！

![34 files inspected, no offenses detected と緑で表示された RuboCop の実行結果](/articles/image-9.webp)

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  「34 files inspected」となっているのは、RuboCopが34ファイルをチェックしているということだね！
</SpeechBubble>

問題がある場合は下記画像のようになります

![3 offenses detected, 3 offenses autocorrectable と表示された RuboCop の実行結果](/articles/image-1-1024x352.webp)

「`3 offenses detected, 3 offenses autocorrectable`」となっています😱

赤字の方が、実際にどれだけのルールエラーが起きているかを表しています！
「`3 offenses detected`」となっているので、3つのルール違反が検出されたということですね！

実際のルール違反の内容は上にかいてあるものとなります！
今回は「`Style/GuardClause`」「`Style/IfUnlessModifier`」「`Style/RedundantCondition`」の3つです！
ルールの内容はかなり多くて全部解説はできないので、下記リンクを参考にしてください🙇‍♂️

<ExternalLink url="https://www.rubydoc.info/gems/rubocop/RuboCop/" />

また、黄色の文字で書かれている方が、RuboCopが自動で修正してくれるルール違反の数です！
「`3 offenses`」となっていて、赤字のoffenses数と同じなので全て自動で修正してくれることになります✨
下記コマンドを打つことで自動修正をしてくれます！

```bash title="ターミナル"
$ bundle exec rubocop -a
```

実際に打ってみると、下記画像のような結果が出ました！

![rubocop -a で 7 offenses detected, 7 offenses corrected と表示された自動修正の結果](/articles/image-2-1024x537.webp)

色々書いてありますが、最後の「`7 offenses detected, 7 offenses corrected`」ですべて修正されたことが分かります！
数字が3から7に増えているのは、修正途中でまた他のルール違反が出てしまい、それをさらに修正したからなのであまり気にしなくて大丈夫です💪

最後にもう1度`$ bundle exec rubocop`で確認してみると、

![自動修正のあとに再実行し、no offenses detected と表示された RuboCop の実行結果](/articles/image-3-1024x152.webp)

無事緑のみになりました！！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  緑のドットの数がルールに沿ったファイルの数だね！
</SpeechBubble>

### `.rubocop.yml`

ここからは、作成されたファイルの説明をします！

`.rubocop.yml`は、ルールの設定自体を細かく設定できるファイルです！
初期の状態は下のように1行だけかと思います

```yaml title=".rubocop.yml"
inherit_from: .rubocop_todo.yml
```

これは、「`.rubocop_todo.yml`に書いてある内容はルール違反してても無視してください」という意味になります！

他にも色々カスタマイズできます！
後でおすすめルールを解説しますのでお待ちください🙏

### `.rubocop_todo.yml`

このファイルは、先程も少し解説したのですが、「ルール違反を無視したい内容を書き込む」ファイルになります！
先程「`$ bundle exec rubocop --auto-gen-config`」コマンドを打っていただきましたが、このコマンドの内容は

**「現在ルール違反を起こしているファイル、違反内容をすべて`.rubocop_todo.yml`に書き込みなさい」**

という意味のコマンドです！
なので、RuboCopを導入する際はこのコマンドを打ち込んで一旦エラーが無い状態にします。その上で少しづづ`.rubocop_todo.yml`の内容を削除して最終的に空のファイルにすることを目指します😎

または、どうしてもRuboCopのルールに逆らいたい時もあるかと思いますので、その場合にも役立ちます！

## おすすめルール

ここからは、`.rubocop.yml`の僕のおすすめルールを解説します！
僕の独断と偏見で、やや緩めのルールになっていますのでお好みでカスタマイズしてみてください！

まずはファイル全体を載せます！

```ruby title=".rubocop.yml" showLineNumbers
inherit_from: .rubocop_todo.yml

require:
  - rubocop-performance
  - rubocop-rails

AllCops:
  SuggestExtensions: false
  # 最新のルールを適用する
  NewCops: enable
  # 何のルールに引っかかったか表示する
  DisplayCopNames: true
  # rubocop対象外(リポジトリ毎で調節)
  Exclude:
    - "Gemfile"
    - "bin/**/*"
    - "db/**/*"
    - "log/**/*"
    - "tmp/**/*"
    - "vendor/**/*"
    - "lib/tasks/auto_annotate_models.rake"
    - "config/environments/*"
    - "config/puma.rb"

### ルールのカスタマイズ

# 設定が厳しいので一旦全てfalseにする
Metrics:
  Enabled: false

# 一行あたりの文字数
Layout/LineLength:
  Enabled: false

# メソッドの改行ルール
Layout/MultilineMethodCallIndentation:
  EnforcedStyle: indented

# 日本語にコメントを許可
Style/AsciiComments:
  Enabled: false

# クラスにコメントを残さなくても良い
Style/Documentation:
  Enabled: false

# コントローラ等のモジュールをネストしての宣言
Style/ClassAndModuleChildren:
  Enabled: false

# 文字列のfreeze（Ruby3からは自動でfreezeされるので要らない）
Style/FrozenStringLiteralComment:
  Enabled: false

# ガード節の提案（難しいので一旦false）
Style/GuardClause:
  Enabled: false

# 文字列のダブルクォートチェック
Style/StringLiterals:
  Enabled: false

# シンボルによる配列の%記法のチェック
Style/SymbolArray:
  Enabled: false
  # EnforcedStyle: brackets

# 文字列による配列の%記法のチェック
Style/WordArray:
  Enabled: false

# 変数名に数字を許可
Naming/VariableNumber:
  Enabled: false

# = と == の指摘
Lint/AssignmentInCondition:
  Enabled: false

# メソッド名等の命名の指摘
Naming/PredicateName:
  Enabled: false

# 未i18nのチェック（バリデーションエラーメッセージをi18nに登録するのはやや冗長？なためfalse）
Rails/I18nLocaleTexts:
  Enabled: false

# before_actionの際の未定義メソッドのチェック（deviseとの兼ね合いで一旦false）
Rails/LexicallyScopedActionFilter:
  Enabled: false
```

基本的にはルールを緩くする方向の設定をしています！
重要な部分だけ解説していきます！

### require:

```yaml title=".rubocop.yml(抜粋)"
require:
  - rubocop-performance
  - rubocop-rails
```

この部分に「`rubocop-performance`」「`rubocop-rails`」と記述することで、追加でinstallしたgemのルールを適用できます！
Railsを使っている場合はこの2つは入れておいて損は無いでしょう💪

### AllCops:

```yaml title=".rubocop.yml(抜粋)"
AllCops:
  # 結果のsuggest部分を非表示にする
  SuggestExtensions: false
  # 最新のルールを適用する
  NewCops: enable
  # 何のルールに引っかかったか表示する
  DisplayCopNames: true
  # rubocopの対象外ファイル
  Exclude:
    - "Gemfile"
    - "bin/**/*"
    - "db/**/*"
    - "log/**/*"
    - "tmp/**/*"
    - "vendor/**/*"
    - "lib/tasks/auto_annotate_models.rake"
    - "config/environments/*"
    - "config/puma.rb"
```

これは、全てのルール検出への全体的な設定です！
上の「`SuggestExtensions: false`」「`NewCops: enable`」「`DisplayCopNames: true`」はコメント通りの説明です、設定しておきましょう！

`Exclude:`はRuboCopの検出対象から外すファイルを設定するものです！
自分は、`config/`配下はRailsがデフォルトで生成したままの記述で問題無いと考えているので、RuboCopの対象から外しました！
その他の対象外ファイルは、明らかに必要無い部分なので設定しておきましょう！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `tmp/`配下とかは明らかに見る必要が無いので、対象外にしてしまってRuboCopの処理を早くしたいね！
</SpeechBubble>

### その他

25行目以降に書いてあるものは細かいルールを緩くしているものです！
簡単にコメントで書かれているので読みながらカスタマイズしてみてください！

繰り返しになりますが、今回のルールはかなり緩めにしてあります！
RuboCopやRubyの書き方に慣れてきたら厳し目のルールにしてみるのも良いかもしれません。

## おわりに

今回はRuboCopの説明から、ルール設定についてまで説明しました！
RuboCopを含む、Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇‍♂️

また、今回は素のRubyファイルに対する静的解析のツールとしてRuboCopを紹介しました。
ですが、実はhtml.erbファイルにもルールを敷くgemがあったりします！
こちらも今後記事にする予定ですので、お楽しみに😎


---

## 【Rails】使いやすい日付の表示方法5選

- URL: https://blog.to-ko-s.com/articles/rails-date
- 著者: 寺田拓真
- 公開日: 2022-12-12
- タグ: Rails

> Railsで使いやすい日付の操作・表示方法を5つ紹介。月初〜月末のデータ取得、特定日時以前の抽出、過去日付の入力制限、特定曜日の取得、strftimeによるフォーマット変換を解説します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！

Railsアプリ作成時に下記のような日付を指定してデータを取得したり、表示させたいと思うことはありませんか？

- 月初から月末にかけてのデータが欲しい。
- 過去の日付を入力させないようにする。
- 特定の曜日の日付を知りたい。
- ...etc

今回は上記の例の他にも使いやすい日付表示方法についてまとめました！

### 対象読者

- Rails初学者の方
- Railsにおける日付表示方法を知りたい方

日時を扱う基本的なクラスなどにてついては、以下の記事が参考になります。

<ExternalLink url="https://qiita.com/manbolila/items/8ded79359c450dd30e06" />

## 日付表示方法

### 月初から月末にかけてのデータを表示

月初から月末にかけてのデータを表示する方法です！
まず、月初と月末をそれぞれ表示するには`beginning_of_month`と`end_of_month`を使用します。
また、現在時刻を表示するために`Time.zone.now`を使用します。

```ruby
@beginning_of_month = Time.zone.now.beginning_of_month
@end_of_month = Time.zone.now.end_of_month
```

![beginning_of_monthで月初の日時を取得した実行結果](/articles/ScreenShot-2022-12-12-8.30.04.webp)

![end_of_monthで月末の日時を取得した実行結果](/articles/ScreenShot-2022-12-12-8.30.32.webp)

これで、今月の月初と月末の日にちをそれぞれ取得できました。
ここから月初から月末にかけてのデータを表示するように記述します。
Rubyの記法で範囲を示すには`..`を使用します。なので、月初と月末を`..`で繋げることで月初から月末にかけてのデータを取得できます。

```ruby
@beginning_of_month = Time.zone.now.beginning_of_month
@end_of_month = Time.zone.now.end_of_month
@beginning_end_month = @beginning_of_month..@end_of_month
```

![月初から月末までの範囲オブジェクトの実行結果](/articles/ScreenShot-2022-12-12-8.31.03-1024x48.webp)

しっかり12月1日から12月31日までの範囲を取得することが出来ました！
あとは下記のように絞り込みたいモデルに`where`などを付けることで、この範囲でのデータ抽出が可能になります。

```ruby
User.where(created_at: @beginning_of_month..@end_of_month)
```

### 特定の日時より前のデータをすべて取得する

ある日時より前に作成したデータをすべて取得したい場合の記述方法です！
この場合は、`Model.where("created_at <= ?", 日付)`のように記述します。
例えば、月末より前のデータを表示したい場合は下記のように記述します。

```ruby
@end_of_month = Time.zone.now.end_of_month
Model.where("created_at <= ?", @end_of_month)
```

![月末以前に作成されたUserデータの取得結果](/articles/ScreenShot-2022-12-12-9.05.00-1024x140.webp)

上記の例は`User`モデルで表示しました。
今月末より前に作成されたデータがすべて取得されます。

### 過去の日付を入力させないようにする

`date_field`などを使用して日付を入力するフォームで、過去の日付を入力させないようにする際の指定方法です！
この場合は`min: Time.zone.now`を使用します。

```erb
<%= f.date_field :start_date, min: Time.zone.now, class: "h-12 rounded-[3px] text-[#333333] font-bold invalid:text-line-200" %>
```

上記のように記述することで、今日(2022年12月11日)より過去の日付を入力できないように制限しています。

![過去の日付が選択不可になった日付入力フォーム](/articles/ScreenShot-2022-12-11-12.56.13.webp)

なお、`min: Time.zone.now`の部分ですが、明日以降の日付を入力させたい場合などは`min: Time.zone.tomorrow`と記述することで指定したい範囲を変更することが可能です。

### 先週・来週の特定の曜日の日付を表示する

先週の金曜日や来週の日曜日など、特定の曜日の日付を表示する際の方法です！
まず、先週の特定の曜日の日付を取得するには`prev_week(:曜日)`を使用します。
`(:曜日)`部分に表示したい曜日を指定します。

```ruby
Time.zone.today.prev_week(:sunday)
```

![prev_weekで先週の日曜日の日付を取得した実行結果](/articles/ScreenShot-2022-12-12-8.40.27.webp)

次に来週の曜日の日付を表示するには、`next_week(:曜日)`を使用します。

```ruby
Time.zone.today.next_week(:sunday)
```

![next_weekで来週の日曜日の日付を取得した実行結果](/articles/ScreenShot-2022-12-12-8.44.55.webp)

### フォーマットを変換する

`2022,12,11`のように入力した日付を`2022-12-11`のように変換するには、`strftime`を使用します。

```ruby
Time.new(2022,12,11).strftime("%Y-%m-%d")
```

![strftimeで日付フォーマットを変換した実行結果](/articles/ScreenShot-2022-12-12-8.57.22.webp)

今回はハイフンで区切りましたが、スラッシュで区切るなど、自分の表示させたいように変更することが可能です。

## おわりに

今回はRailsにおける日付指定・操作5選を紹介しました！
バリエーション豊富で、なおかつ記述も簡単なものが多いので使いやすいなと感じました。
フォーマットの変換は実際に使用する機会も多いと思います。
この他にもまだまだあるので、気になった方はぜひ調べてみてください！


---

## 【GSAP】テキストアニメーションにイージング全種類で比較してみた!

- URL: https://blog.to-ko-s.com/articles/gsap-textanimation-easing
- 著者: 杉田侑祐
- 公開日: 2022-12-07
- タグ: JavaScript

> GSAPのイージング全15種類をテキストアニメーションで比較検証。Power0〜4、Back、Elastic、Bounceなど各イージングの動きの違いをCodePenデモで確認できます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！

今回はGreenSock社の`GreenSock Animation Platform(GSAP)`を使い、前回記事で作成したテキストアニメーションを元に各種イージングの比較をしていきたいと思います。
今回のベースとなるテキストアニメーションの実装方法を見たい方は下記を参照してください。

<InternalLink slug="gsap-text-animation" />

### 対象読者

- Web制作でアニメーションの実装をしたい方

## GSAPのイージングの概要

<Callout>
  この記事は執筆当時のv2系の記法（`Power1.easeOut`）をベースにしており、以降の見出しやコードもv2の名称で統一しています。
  v3でも旧記法は後方互換で動作しますが、公式は小文字の文字列記法（`"power1.out"`）を推奨しているため、v3の記法は下記の対応表を参照してください。
</Callout>

GSAPのイージングの指定は`ease`プロパティを使用します。

```javascript title="JavaScript" showLineNumbers
// 本記事のベースとなるv2の記法
gsap.to("#text", { ease: Power1.easeOut })

// v3で推奨される文字列記法
gsap.to("#text", { ease: "power1.out" })
```

イージングの種類も豊富に存在します。（15種類）
このうち14種類はv3では文字列で指定します。
括弧内がv3の文字列記法です。

- `Power0`（`"none"`）
- `Power1`（`"power1"`）
- `Power2`（`"power2"`）
- `Power3`（`"power3"`）
- `Power4`（`"power4"`）
- `Back`（`"back"`）
- `Elastic`（`"elastic"`）
- `Bounce`（`"bounce"`）
- `Rough`（`"rough"`）
- `SlowMo`（`"slow"(0.7, 0.7, false)`）
- `Stepped`（`"steps(12)"`：分割数の指定が必須）
- `Circ`（`"circ"`）
- `Expo`（`"expo"`）
- `Sine`（`"sine"`）

残る1種類の`Custom`は自作イージングで、上の14種類とは扱いが異なります。
`ease: "Custom"`のような文字列指定はできず、`CustomEase`プラグインで`CustomEase.create("myEase", "M0,0 C0.2,0 0.3,1 1,1")`のように名前を付けて登録し、その名前を`ease`に渡して使います。

またv3では、この15種類とは別に`ExpoScaleEase`（`"expoScale"`）という補助的なイージングも用意されています。
これは`scale`の変化を見た目上一定の速度に見せるためのもので、`ease: "expoScale(0.5, 7, power1)"`のように開始・終了のスケール値を渡して使うため、他のイージングとは指定方法が異なります。
`ExpoScaleEase`は`RoughEase`・`SlowMo`と同じく`EasePack`に含まれるプラグインなので、利用するには`EasePack`の読み込みが必要です。詳しくは公式ドキュメントを参照してください。

<ExternalLink url="https://gsap.com/docs/v3/Eases/ExpoScaleEase/" />

各イージングには加速・減速の方向を3種類指定できます。
v2では`Power1.easeOut`のようにイージング名のプロパティとしてアクセスしますが、v3では`"power1.out"`のようにイージング名に`.in`/`.out`/`.inOut`をドットでつなげて指定します。(※指定できないイージングもあります。)

- `easeIn`（v3: `"power1.in"`）：最初が最低速で、加速する
- `easeOut`（v3: `"power1.out"`）：最初が最高速で、減速する
- `easeInOut`（v3: `"power1.inOut"`）：はじめはゆっくりで加速し、最後は減速する

v3では`.out`がデフォルトのため、上のイージング一覧の`Sine`であれば`"sine.out"`を`"sine"`と省略して書くことも可能です。

またイージング名`Back`と`Elastic`はイージングの強度も指定可能です。
`()`で囲み指定することが可能です。

```javascript title="JavaScript" showLineNumbers
// v3の記法
gsap.to("#text", { ease: "elastic.out(1, 0.3)" })

// v2の記法（v3でも動作します）
gsap.to("#text", { ease: Elastic.easeOut.config(1, 0.3) })
```

イージングの選択は公式からすることが出来ます。

<ExternalLink url="https://gsap.com/docs/v3/Eases/" />

下記画像の様に自分で選び選択することが出来ます。

![GSAPイージングビジュアライザー](/articles/64b5a86c04347b08864b764e8dda172e.webp)

## テキストアニメーションイージング比較用のコードの紹介

今回使用するテキストアニメーションは前回記事で紹介したテキストアニメーションを使用します。
前回記事は下記になります。

<InternalLink slug="gsap-text-animation" />

<Callout variant="warning">一部今回の記事用でコードを変えているところがありますので注意してください。</Callout>

```html title="HTML" showLineNumbers
<header>
  <div class="ease-name">
    <span>easeIn</span>
    <h1 id="ease-in">PLAY TO ENJOY</h1>
  </div>
  <div class="ease-name">
    <span>easeInOut</span>
    <h1 id="ease-in-out">PLAY TO ENJOY</h1>
  </div>
  <div class="ease-name">
    <span>easeOut</span>
    <h1 id="ease-out">PLAY TO ENJOY</h1>
  </div>
</header>
```

```css title="CSS" showLineNumbers
header {
  /*下記はレイアウトを整えるものです*/
  display: grid;
  place-content: center;
  height: 100vh;
  background-color: #333;
}

h1 {
  color: #fff; /*お好きなフォントカラーを選んでください*/
  font-size: 20px; /*お好きなフォントサイズを選んでください*/
  font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1; /*line-heightなくしたほうがカッコ良くなります*/
}

.char {
  transform: translateY(100px);
  transition: transform 0.5s;
  /* transform: translateY(-100px); テキストを上から出したい時*/
}

#ease-in,
#ease-in-out {
  margin-bottom: 20px;
}

div span {
  color: #fff;
  font-size: 16px;
}
```

加減速の三種類とイージングの種類で比較していこうと思っているので、比較用に3つ用意しました。

```javascript title="JavaScript" showLineNumbers
const easeIn = new SplitType("#ease-in") /*テキストの分割*/
const easeInChar = document.querySelectorAll("#ease-in .char") /*#ease-inの.charの取得*/
const easeInOut = new SplitType("#ease-in-out") /*テキストの分割*/
const easeInOutChar = document.querySelectorAll("#ease-in-out .char") /*#ease-in-outの.charの取得*/
const easeOut = new SplitType("#ease-out") /*テキストの分割*/
const easeOutChar = document.querySelectorAll("#ease-out .char") /*#ease-outの.charの取得*/

gsap.to(easeInChar, {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
  duration: 1 /*アニメーションの時間*/,
})

gsap.to(easeInOutChar, {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
  duration: 1 /*アニメーションの時間*/,
})

gsap.to(easeOutChar, {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
  duration: 1 /*アニメーションの時間*/,
})
```

今回は`SplitType`を用いてテキストの分割を行っています。
分割した際に個別に別のプロパティを与えたいので`querySelectorAll`で個別に分割した際に生成される`class="char"`を取得しております。
下記の様に取得可能です。

```javascript title="JavaScript" showLineNumbers
const char = document.querySelectorAll("#hoge .char") /*#hogeの.charの取得*/
```

またその親クラスの`class="word"`も取得可能です。

```javascript title="JavaScript" showLineNumbers
const word = document.querySelectorAll("#hoge .word") /*#hogeの.wordの取得*/
```

行いたいアニメーションによって使い分けましょう！

ここから`ease`プロパティを追加して各種見ていきたいと思います。

## GSAP各種イージング比較

ここから各種類比較していきたいと思います。

### 指定なし

何も指定していない状態です。

<CodePen url="https://codepen.io/tks-sugita/pen/NWzEbdP" height={300} defaultTab="html,result" preview />

### Power0

`Power0`は加減速の指定は出来ません。

<CodePen url="https://codepen.io/tks-sugita/pen/JjZebZB" height={300} defaultTab="html,result" preview />

### Power1

<CodePen url="https://codepen.io/tks-sugita/pen/zYaMoJW" height={300} defaultTab="html,result" preview />

### Power2

<CodePen url="https://codepen.io/tks-sugita/pen/YzvRpJM" height={300} defaultTab="html,result" preview />

### Power3

<CodePen url="https://codepen.io/tks-sugita/pen/dyKQOQr" height={300} defaultTab="html,result" preview />

### Power4

<CodePen url="https://codepen.io/tks-sugita/pen/qBKQqLQ" height={300} defaultTab="html,result" preview />

### Back

<CodePen url="https://codepen.io/tks-sugita/pen/OJEabqy" height={300} defaultTab="html,result" preview />

### Elastic

<CodePen url="https://codepen.io/tks-sugita/pen/GRGwNLg" height={300} defaultTab="html,result" preview />

### Bounce

<CodePen url="https://codepen.io/tks-sugita/pen/WNyYoBR" height={300} defaultTab="html,result" preview />

### Rough

`Rough`は少し特殊でギザギザの効果を得ることが出来ます。
オプションが6種類あり選ぶことが出来ます。
詳しくは公式を参照してください。

<ExternalLink url="https://gsap.com/docs/v3/Eases/RoughEase/" />

<CodePen url="https://codepen.io/tks-sugita/pen/poKQNXr" height={300} defaultTab="html,result" preview />

<Callout variant="warning">`EasePack`というプラグインが無いと動作しないので注意してください。</Callout>

### SlowMo

InとOutの移行をスムーズにしたものです。
第一引数に、変化の割合、第二引数にイージングの強さ、第三引数に`yoyo`の有無になります。
詳しくは公式を参照してください。

<ExternalLink url="https://gsap.com/docs/v3/Eases/SlowMo/" />

<CodePen url="https://codepen.io/tks-sugita/pen/dyKQNJo" height={300} defaultTab="html,result" preview />

<Callout variant="warning">`EasePack`というプラグインが無いと動作しないので注意してください。</Callout>

### Stepped

通常は開始値と終了値の間で滑らかで段階的な移行を行いますが、`SteppedEase`は、移行にステップ数を定義することが可能になります。

<CodePen url="https://codepen.io/tks-sugita/pen/yLEQgdG" height={300} defaultTab="html,result" preview />

### Circ

<CodePen url="https://codepen.io/tks-sugita/pen/XWYypvv" height={300} defaultTab="html,result" preview />

### Expo

<CodePen url="https://codepen.io/tks-sugita/pen/eYKQvOa" height={300} defaultTab="html,result" preview />

### Sine

<CodePen url="https://codepen.io/tks-sugita/pen/GRGwWRv" height={300} defaultTab="html,result" preview />

### 自作（Custom）

公式ドキュメントより自作することが可能です。
下記のようにグラフィカルに作成することが出来ます。

![CustomEase作成画面](/articles/c35b685937ac04bc23bd2d8a7f70840a-906x1024.webp)

<CodePen url="https://codepen.io/tks-sugita/pen/wvXQJBj" height={300} defaultTab="html,result" preview />

<Callout variant="warning">
  `CustomEase`というプラグインが無いと動作しないので注意してください。
  なお、GSAP3.13以降は`CustomEase`を含むすべてのプラグインが商用利用も含めて無料で使えるようになっています。
</Callout>

## さいごに

今回は各種イージングを比較できるように全て試してみました。
初めて使うイージングもありこんな事もできるのかとためになりました。
種類が多くかなり表現の自由ができるなと感じました。
個人的には`Power1`〜`4`が無難で使いやすいなと感じました。
皆さんも一度色々試して見てほしいです！


---

## 【GSAP】コピペでOK!!GSAPテキストアニメーションの実装

- URL: https://blog.to-ko-s.com/articles/gsap-text-animation
- 著者: 杉田侑祐
- 公開日: 2022-11-30
- タグ: JavaScript

> GSAPとSplitTypeを使って、一文字ずつ遅れて表示されるテキストアニメーションを実装する方法を解説します。コピペで使える実践的なサンプルコード付き。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform(GSAP)を使い、テキストアニメーションを実装していきたいと思います。
GSAPの基本的な使い方は下記の記事を参考にしてください！

<InternalLink slug="text-animation-from-gsap" />

### 対象読者

- Web制作でアニメーションの実装をしたい方

## 今回の完成予定

今回作成するテキストアニメーションは汎用性の高いテキストアニメーションをイメージし作成しました。
コーポレートサイトや少しクリエイティブよりなサイト等でも使用できるのかなーと思っております。
実装自体もかなり簡単になるので是非参考にしてみてください。
また今回テキストアニメーションをするのに便利なライブラリも使用しますので是非参考にしてください！
今回はHTML&CSSからGSAPまで手順を分け解説していきたいと思います。

<Video src="/articles/gsap-text-animation-1.mp4" />

## GSAPの導入

GSAPを利用するには、公式からダウンロードするか、CDNでも提供されているので公式HPを参照してください。
今回はCDNを利用していきたいと思います。

<ExternalLink url="https://greensock.com/" />

## コードの紹介

では1つずつ分解して説明していきます。

### レイアウトを整える

```html title="HTML" showLineNumbers
<header>
  <h1 id="text">PLAY TO ENJOY</h1>
</header>
```

```css title="CSS" showLineNumbers
/*  reset.cssは省略  */
header {
  /*下記はレイアウトを整えるものです*/
  display: grid;
  place-content: center;
  height: 100vh;
  background-color: #333;
}

h1 {
  color: #fff; /*お好きなフォントカラーを選んでください*/
  font-size: 80px; /*お好きなフォントサイズを選んでください*/
  font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
}
```

あまり説明することはありません。
お好きなフォントとレイアウトにしちゃってください！

### SplitTypeの導入

今回JSライブラリの`SplitType`を使用したいと思います。
一文字ずつずれるテキストアニメーションを実装する際、テキストのズレを表現するのにHTMLをこのように書きませんか？

```html title="HTML" showLineNumbers
<h1 id="text">
  <span>P</span>
  <span>L</span>
  <span>A</span>
  <span>Y</span>
  <span>T</span>
  <span>O</span>
  <span>E</span>
  <span>N</span>
  <span>J</span>
  <span>O</span>
  <span>Y</span>
</h1>
```

テキストが長い時やアニメーションさせる量が多い時などめんどくさいですよね、またコードの見通しも悪くなります。

そこで使用するのが`SplitType`です！

<ExternalLink url="https://www.npmjs.com/package/split-type" />

`SplitType`説明文和訳(一部抜粋)

> SplitTypeは、行、単語、および文字を個別にアニメーション化できるように、HTMLテキストを要素に分割する小さなJavaScriptライブラリです。
> これはGSAPの`SplitText`プラグインに触発されたもので、任意のアニメーションライブラリで使用できます。

言葉で説明しても分かりづらいと思いますので実際にやっていきたいと思います。
CDNで読み込んでいきたいと思います。

```html title="HTML" showLineNumbers
<script src="https://unpkg.com/split-type"></script>
```

読み込み終わったら、テキストを分割していきたいと思います。
コードの書き方は下記になります。

```javascript title="JavaScript" showLineNumbers
const text = new SplitType("#hoge")
// または
const text = SplitType.create("#hoge")
```

今回は定数`text`として`id="text"`を分割しています。

```javascript title="JavaScript" showLineNumbers
const text = new SplitType("#text")
```

これでテキストが分割されていると思いますので確認してみましょう！

![SplitTypeでテキストが一文字ずつspan要素に分割されたDevToolsの表示](/articles/7ac5bbeb1adb3371ece84b3fb7db9d12-1024x856.webp)

このように指定した要素がインラインブロック要素になって分割されていることがわかると思います！

### アニメーション用のCSSの追記

今回はテキストが下から上に一文字ずつ遅れて出現するのでテキストを表示させる場所より下に移動させます。

```css title="CSS" showLineNumbers
.char {
  transform: translateY(100px);
}
```

これで真ん中より100px下にスタンバイ完了です。
さらに下にあるときは表示を隠しておきたいので、`clip-path`でマスクしておきます。
またお好みですが個人的には`line-height`をなくしたほうがかっこよいなと感じます。

```css title="CSS" showLineNumbers
h1 {
  color: #fff; /*お好きなフォントカラーを選んでください*/
  font-size: 80px; /*お好きなフォントサイズを選んでください*/
  font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1; /*line-heightなくしたほうがカッコ良くなります*/
}
```

ブラウザを見てみると何も映っていないと思います。

![clip-pathとtranslateYでテキストが非表示になったアニメーション待機状態](/articles/1a816ee7a99c114cecbfa4a0d6a89378-1024x626.webp)

これでアニメーションの開始前スタンバイ状態の完了です！

### GSAPを使用する

いよいよここからGSAPの登場です。
今回CSS側でアニメーションのスタンバイ状態を作っているので、`gsap.to`メソッドを使用しようと思います。

```javascript title="JavaScript" showLineNumbers
gsap.to(".char", {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
  duration: 0.5 /*アニメーションの時間*/,
  ease: "power2.out" /*イージングの設定*/,
})
```

`gsap.to`メソッドを使用しているので、Y軸の完了位置を指定しています。
この場合CSS側で指定した`transform: translateY(100px);`から`transform: translateY(0px);`にするような指定になります。
`stagger`は同じクラスに対し連続で動かすことができる機能になります。
詳しくは下記を参照してください。

<ExternalLink url="https://gsap.com/resources/getting-started/Staggers/" />

またいつも通りですが、イージングはお好きに選んでください！
イージングの指定方法は下記を参照してください！

<ExternalLink url="https://gsap.com/docs/v3/Eases/" />

### おまけ

テキストを上から下に出したい場合はY軸をマイナスにしてください！

```css title="CSS" showLineNumbers
.char {
  transform: translateY(-100px);
}
```

そうすると上から出すことが出来ます。

<Video src="/articles/gsap-text-animation-2.mp4" />

### コードのまとめ

```html title="HTML" showLineNumbers
<header>
  <h1 id="text">PLAY TO ENJOY</h1>
</header>
```

```css title="CSS" showLineNumbers
/*  reset.cssは省略  */
header {
  /*下記はレイアウトを整えるものです*/
  display: grid;
  place-content: center;
  height: 100vh;
  background-color: #333;
}

h1 {
  color: #fff; /*お好きなフォントカラーを選んでください*/
  font-size: 80px; /*お好きなフォントサイズを選んでください*/
  font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1; /*line-heightなくしたほうがカッコ良くなります*/
}

.char {
  transform: translateY(100px);
  /* transform: translateY(-100px); テキストを上から出したい時*/
}
```

```javascript title="JavaScript" showLineNumbers
const text = new SplitType("#text") /*テキストの分割*/

gsap.to(".char", {
  y: 0 /*テキストのY軸の操作*/,
  stagger: 0.05 /*テキスト間の遅延時間*/,
  delay: 0.2 /*アニメーションのスタートまでの遅延時間*/,
  duration: 0.5 /*アニメーションの時間*/,
  ease: "power2.out" /*イージングの設定*/,
})
```

## さいごに

今回は汎用性の高いテキストアニメーションを紹介しました。
`SplitType`を紹介しましたがGSAPと親和性が高いだけあってかなり使いやすいのではないでしょうか？
やはりGSAPはとても簡単にアニメーションの実装ができるなと感じました！


---

## 【Rails・tailwindcss】flashメッセージにanimationを付与する方法

- URL: https://blog.to-ko-s.com/articles/tailwindcss-animation
- 著者: 寺田拓真
- 公開日: 2022-11-22
- タグ: HTML, CSS, Rails, Tailwind CSS

> railsとtailwindを組み合わせてフラッシュメッセージにアニメーションを付与して表示する方法について解説しています。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！

ログイン時や何らかのデータを更新した後に`flash`メッセージを表示させる方も多いかと思います。
その際に`animation`を付与してより目立たせたいと思うことはありませんか？
今回はフェードインする`flash`メッセージを例に、Tailwind CSSを使用して`flash`メッセージに`animation`を付与する方法を紹介します！
また、今回はRuby on Railsを使用して実装しています。

今回作成する`flash`メッセージは下のものになります。

![flashメッセージがフェードインしてフェードアウトする動作デモ](/articles/tailwind-animation-7.gif)

基本的な`flash`メッセージの作成方法については以下のサイトが参考になるかと思います。

<ExternalLink url="https://pikawaka.com/rails/flash" />

また、今回はCSSの`keyframes`を使用して`animation`を付与していきます。
`keyframes`の使用方法については以下のサイトをご覧ください。

<ExternalLink url="https://zero-plus.io/media/css-animation-keyframes/" />

### 対象読者

- Tailwind CSSを勉強中の方
- `flash`メッセージに`animation`を付与したい方

## animationを付与するための準備

### keyframesを記述する

`flash`メッセージに`animation`を付与するために、`tailwind.config.js`に必要な記述をして`animation`を作成します。
まずは`theme`内の`extend`に`keyframes`を記述していきましょう！
今回は以下のように記述します。

```javascript title="tailwind.config.js" showLineNumbers
theme: {
    extend: {
      keyframes: {
        flashFade: {
          "0%": { transform: "translateX(180px)", opacity: 0 },
          "20%": { transform: "translateX(0)", opacity: 1 },
          "80%": { transform: "translateX(0)", opacity: 1 },
          "100%": { transform: "translateX(180px)", opacity: 0 },
        },
      },
    },
  }
```

詳しく解説していきます。

4行目の`flashFade`がアニメーションの名前になります。
どのような動きをするのか分かりやすい命名にすることをオススメします。
5行目から8行目が実際にどのような動きをするのか指定しています。
今回は画面の端から`flash`メッセージが横方向に180pxフェードインして、その後、画面端へフェードアウトする動きを指定しています。
また、0%と100%は`animation`開始時と終了時のスタイルを、20%と80%はその間のスタイルを指定しています。
このように指定することで、なめらかなフェードインとフェードアウトを表現することができます。

### animationを記述する

続いて、`keyframes`のすぐ下に`animation`を記述していきましょう！
以下のように記述します。

```javascript title="tailwind.config.js" showLineNumbers
theme: {
    extend: {
      keyframes: {
        flashFade: {
          "0%": { transform: "translateX(180px)", opacity: 0 },
          "20%": { transform: "translateX(0)", opacity: 1 },
          "80%": { transform: "translateX(0)", opacity: 1 },
          "100%": { transform: "translateX(180px)", opacity: 0 },
        },
      },
      animation: {
        flash: "flashFade 7.0s forwards",
      },
    },
  }
```

こちらも解説していきます。
12行目をご覧ください。
`flash`ですが、このように記述することで`animate-flash`という`class`名を使用することが可能になります。
この`class`名を付与することで、`keyframes`で指定した動きを行ってくれます。

`flash`プロパティの中の記述について解説していきます。
最初の`flashFade`は`keyframes`で作成した`animation`の名前です。
次の`7.0s`ですが、これは作成した`animation`を何秒かけて実行するかの記述です。
上記の例では7秒かけてアニメーションを実行することになります。
最後に`forwards`ですが、`animation`終了時にその状態のスタイルを適用する記述です。
上記の例では`keyframes`内の100%の記述、つまり画面外に移動し透明になった状態が適用されることになります。
`forwards`以外にも0%時点のスタイルを適用する`backwards`などがあります。
これらの指定方法については以下のサイトを参考にしてみてください。

<ExternalLink url="https://shu-naka-blog.com/css/animation-fill-mode/" />

## animationをHTMLタグに付与する

### 作成したclass名の付与

ここからは`flash`メッセージへ`animation`を付与していきましょう！
今回は`flash`メッセージを表示するにあたって`_flash.html.erb`という部分テンプレートファイルを作成し、スタイルをあてています。

```erb title="_flash.html.erb" showLineNumbers
<% flash.each do |key, value| %>
  <% case key %>
  <% when "notice" %>
    <div class="animate-flash fixed top-24 translate-x-1/2 right-6 sm:translate-x-0 z-30 w-fit max-w-[90%] sm:max-w-1/2 py-4 px-6 flex justify-center items-center bg-white shadow-lg border border-line-100 rounded-[3px]">
      <p class="text-base font-bold text-dark-blue-200 !leading-none"><%= value %></p>
    </div>
  <% when "alert" %>
    <div class="animate-flash fixed top-24 translate-x-1/2 right-6 sm:translate-x-0 z-30 w-fit max-w-[90%] sm:max-w-1/2 py-4 px-6 flex justify-center items-center bg-white shadow-lg border border-line-100 rounded-[3px]">
      <p class="text-base font-bold text-secondary-200"><%= value %></p>
    </div>
  <% else %>
    <p class="alert alert-<%= key %>"><%= value %></p>
  <% end %>
<% end %>
```

4行目や8行目の`div`タグ内に`animate-flash`と記述することで、先ほど作成した`animation`を付与しています。

あとは`controller`側でメッセージを呼び出せば`animation`が付与された`flash`メッセージを表示することが可能になります。
以上が`flash`メッセージに`animation`を付与するための手順です！

## Tailanimistaの紹介

ここまで`animation`を自作する方法を紹介しましたが、Tailwind CSS用の`animation`コードを自動生成してくれる便利なサイトがあります。
それがTailanimistaです。
こちらのサイトでは、カスタマイズ可能な様々なアニメーションが用意されています。

<ExternalLink url="https://tail-animista.vercel.app/play/text/tracking-in/tracking-in-expand" />

![Tailanimistaのアニメーション選択画面](/articles/ScreenShot-2022-11-20-14.21.19-1024x582.webp)

サイトにアクセスすると上記のような画面になるので、ここから好みの`animation`を見つけましょう。
好みの`animation`を選択した状態で右上の`</>`をクリックすると`keyframes`と`animation`のコードを表示してくれます。

![Tailanimistaでkeyframesとanimationコードを表示した画面](/articles/ScreenShot-2022-11-20-14.25.16-1024x588.webp)

あとは上で紹介したように、`tailwind.config.js`にコードを記述して、`animate-XXX`のような`class`名を対象の要素に付与することで、`animation`を適用できます。

## さいごに

今回はTailwind CSSを使用して`flash`メッセージに`animation`を付与する方法を紹介しました。
あらためて手順を紹介します！

1. `tailwind.config.js`に`keyframes`を記述
2. `keyframes`と同階層に`animation`を記述
3. 作成した`animation`を`animate-XXX`という`class`名で対象の要素に付与

これで簡単に`animation`を付与することができます。
今回はフェードインを例として作成しましたが、記述次第で他にも様々な表現ができるので、ぜひお試しください！


---

## 【Rails7】個人的によく使うGemのまとめ【11選】

- URL: https://blog.to-ko-s.com/articles/recomended-gems
- 著者: 西原月熙
- 公開日: 2022-11-13
- タグ: Rails

> Rails開発でよく使うおすすめGemを11個厳選して紹介。kaminari・activestorageなどのメイン機能系、rubocop・dotenv-railsなどの開発効率化系、bullet・better_errorsなどのデバッグ系に分類して、競合Gemとの比較や選び方のポイントも解説します。


## はじめに

### この記事の概要

こんにちは、Rubyをメインで書いている株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、僕がよく使うgemを「メイン機能」「開発が便利になる」「デバッグ」の3種類に分けて紹介しようと思います！
競合のgemがある場合は比較ポイントも盛り込むので、gem選びの参考にしていただけると幸いです💪

### gem選びのポイント

簡単にではありますが、僕がgemを選ぶ際に確認するポイントを解説します！
ざっくり、下記の3つです！

1. ダウンロード数
2. 開発が最近されているか
3. gemに関する検索をした際の検索ボリューム

#### ダウンロード数、開発が最近されているか

①, ②のダウンロード数、開発が最近されているかどうかはRubyGemsというサイトで調べることができます！

<ExternalLink url="https://rubygems.org/" />

RubyGems内で、調べたいgemを検索窓に打ち込んで、詳細ページを確認できます！
注目していただきたいポイントは下の2つです！(キャプチャ画像は`devise`です)

![RubyGemsのdevise詳細ページでバージョン履歴と累計ダウンロード数を確認する画面](/articles/image-1-1024x507.webp)

[https://rubygems.org/gems/devise](https://rubygems.org/gems/devise)

「バージョン履歴」を見ることで、開発が活発かどうかや最近更新をしているかが分かります！
最後のバージョン更新が1年以内だと現在も更新していることが分かるので良さそうですね⭐️
`devise`の場合、最後のバージョン更新が2021年12月16日なので、やや更新頻度が悪い可能性がありますね🤔

また、「累計ダウンロード数」を見ることで、他の開発者がどれくらい使用しているかが分かります！
ここが多ければ多いほど一定の信頼感があることになりますね😎
`devise`の場合、141,569,295と圧巻です、、

#### gemに関する検索をした際の検索ボリューム

最後に③の説明です！
これは、google検索で「gem `[gem名]`」と検索した際に検索結果が何ページあるかということです！

![Google検索で「gem devise」と検索した際の検索結果件数](/articles/image-2-1024x317.webp)

`devise`の例

ここの検索結果が多いと、開発で詰まった時に参考にできる記事数が多くなることになるし、そのgemに関わるコミュニティが活発ということになるので参考にしてみても良いと思います！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  当たり前ですが、欲しい機能要件を満たせるかどうか等はもちろん先に調べておきましょう！
</SpeechBubble>

それでは紹介の方に移ります！！
(各gemのGitHubのリンクも入れています)

## メイン機能系gem

「メイン機能系gem」とは、ログイン機能やページネーション機能といった、アプリの使用ユーザーに対しての機能を提供してくれるgemと定義しておきます！

### `kaminari`

GitHub: [https://github.com/kaminari/kaminari](https://github.com/kaminari/kaminari)

言わずと知れたページネーション機能実装のためのgemです！
ページネーションが無いサービスはあまり見かけないので、良くお世話になるかとおもいます🙏
ダウンロード数や検索ボリュームも申し分無いので機能開発のための調査も簡単です！
ISSENブログ内でも`kaminari`に関する記事を執筆しています、よければ参考にしてください🙇‍♂️

<InternalLink slug="kaminari-pagination-design" />

#### 懸念点・競合gem

ただ実は、`pagy`という競合gemがあります。

<ExternalLink url="https://github.com/ddnexus/pagy" />

GitHubページ内にも書いてあるのですが、「実行速度」「メモリ使用量」「オブジェクト作成数」全てにおいて**30倍以上**`kaminari`より優秀というgemになっています✨

今回なぜ`kaminari`を推したかと言うと、僕が使い慣れているというだけの理由です。。。
正確には、`pagy`を1度も使ったことがないです💦
なので、実際の使用感が分からなかったため一旦ここでの紹介にとどめておきます🙏
次ページネーションを新規で実装する場合は`pagy`を使ってみて使用感の感想を記事にしようかと思いますのでお待ちください🙇‍♂️

### `acts_as_list`

GitHub: [https://github.com/brendon/acts_as_list](https://github.com/brendon/acts_as_list)

並び順を変えることができるgemです！
並び順とは、例えば`users.all`を取得したときにデフォルトは作成順に並ぶはずです。
これを画面側で任意の順番に並べ替えて取得できる機能です！
並び替えを任意にしたいという要望はそれなりに出ると思うので、その際はこのgemを検討してみてもいいかも知れません！

#### 懸念点

内部的には、並び替えたいテーブルに`position`カラムを追加することで実現しています。
逆に言うと、`position`カラムを必ず追加する必要があるので、名前の競合等に注意を払う必要があるかもしれません

### `activestorage`

GitHub: [https://github.com/rails/activestorage](https://github.com/rails/activestorage)

画像を扱えるようになる、Railsにデフォルトで導入されているgemです
使用する時はRails `active_storage:install`コマンドを打ち、リレーションを追加するだけなので簡単ですね！

#### 競合

Rails5まではデフォルトで導入されておらず、それまでは`carrierwave`というgemがよく使用されていました

<ExternalLink url="https://github.com/carrierwaveuploader/carrierwave" />

こちらのgemもかなり人気があり、画像を扱う上でどちらを使用するかは悩ましいです🧐
僕の決め手としては「Railsにデフォルトで導入されている」ということです。
デフォルトということは、サポート体制も万全なハズですし、メンテナンスが急に止まると言った心配もかなり少なくなるはずなので、今回`activestorage`をオススメしました！

#### 懸念点

そんな`activestorage`ですが、1つ懸念点があります。
それはバリデーションエラーの際に画像の情報を保持できないという点です。
これに対応させるような追加のgemも出ているようなので(自分は使用したことがありません)、そこまで問題ではないかと思いますが、できればデフォルトで対応してほしいと感じました、、

### `meta-tags`

GitHub: [https://github.com/kpumuk/meta-tags](https://github.com/kpumuk/meta-tags)

toC向けのWEBアプリの開発の際に忘れがちなmetaタグ系の設定をページ毎に、簡単に行えるようにしてくれるgemです！
metaタグを設定しておかないとSEO的に良くないので、googleの検索結果に露出させたい場合はマストで使用するgemかと思います✨
OGPの設定もできるので、twitter等でシェアされやすくすることもできます😎

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  OGPとは、リンクを貼った時に画像等も載せ込めるような仕組みのことだね！(下記画像はtwitter)
  ![twitterのOGP](/articles/image-3-1024x880.webp)
</SpeechBubble>

## 開発が便利になる系gem

「開発が便利になる系gem」とは、開発者体験(DX)を上げるgemと定義しておきます！
読んで字の如くですが、開発がより便利になり生産性が上がるようなgemをここで紹介します！

### `dotenv-rails`

GitHub: [https://github.com/bkeepers/dotenv](https://github.com/bkeepers/dotenv)

環境変数を管理してくれるgemです！
環境変数を簡単に説明すると、開発する際と本番環境で変えたい値で、セキュリティの観点からGitHub等にアップロードさせたくないような値のことです！
`dotenv-rails`では、これらの値を`.env`ファイル内に書いた上で`ENV["hogehoge"]`のような形式で簡単に呼び出せるようにしてくれます✨
僕はどんなプロジェクトでも基本入れているほぼ必須のgemですね💪

### `config`

GitHub: [https://github.com/rubyconfig/config](https://github.com/rubyconfig/config)

先程の`dotenv-rails`とは逆に、定数を管理してくれるgemです
ここで言う定数とは、例えば管理者のメールアドレスやドメイン名など複数の場所で使われ、ひとまとめに管理しておきたいようなもののことを指します！
ひとまとめにしておけば、もしメールアドレスが変更になったときでも1箇所の修正だけで済むので便利ですね💪
また、開発環境と本番環境で別々の値を設定することもできるのでこれもかなり便利です

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  例えば、開発環境では送信用メールアドレスは`development@example.com`を使いたいが、本番環境では`production@example.com`を使いたいといった出し分けが簡単にできるようになります！
</SpeechBubble>

### `rubocop`

GitHub: [https://github.com/rubocop/rubocop](https://github.com/rubocop/rubocop)

コードを解析した上で良くない点を指摘してくれるgemです！
バグの混入を防いだり、読みやすいコードに直せたりします。
チーム開発する際にもコードの書き方をある程度統一できるという点も良いですね✨
このgemもマストで入れます😎

具体的なインストール ~ 使用手順については別途記事を執筆しました、是非読んで見てください🙏

<InternalLink slug="rubocop-setting" />

### `annotate`

GitHub: [https://github.com/ctran/annotate_models](https://github.com/ctran/annotate_models)

モデルファイルに自動でテーブルの説明をコメントで入れてくれるgemです！
下記のような感じです

```ruby showLineNumbers {1-11}
# == Schema Information
#
# Table name: users
#
#  id                     :string(30)       not null, primary key
#  name                   :string(255)      not null
#  birthday               :date
#  tel_number             :string(255)
#  email                  :string(255)
#  gender                 :integer
#
class User < ApplicationRecord
  # ....
end
```

これがあるとモデルファイルを見るだけでテーブルのカラム情報が分かるので、かなりスムーズに開発が進むかと思います！
ただ要らない人は要らないと思うので、使ってみて必要か確認してみてください🙏

## デバッグ系gem

「デバッグ系gem」とは、バグを解消しやすくしたり、問題の発見をしやすくするgemと定義しておきます！

### `letter_openner_web`

GitHub: [https://github.com/fgrehm/letter_opener_web](https://github.com/fgrehm/letter_opener_web)

メール受信を下記のようにブラウザで確認できるgemです！

![letter_opener_webでメール受信をブラウザ上で確認している画面](/articles/image-4-1024x703.webp)

このgemを使うことでいちいち本当のメールアドレスを入力しての受信確認等をする手間がなくなります✨
メールの送信がある場合にはマストで入れるgemですね

`config/development.rb`に`config.action_mailer.delivery_method = :letter_opener_web`を追記するだけなので導入も簡単です😎

#### 注意点

`letter_opener`というgemもありますが、こちらは入れなくて問題無いので導入する時に間違えないようにしてください！
僕的には`letter_opener`の上位互換が`letter_opener_web`という認識です。

### `better_errors` (`binding_of_caller`)

GitHub: [https://github.com/BetterErrors/better_errors](https://github.com/BetterErrors/better_errors)

もともとのエラー画面を見やすくしてくれるgemです！

![better_errorsによる見やすいエラー画面の表示例](/articles/image-5-1024x568.webp)

エラーが出た状態で変数の中身の確認もできるのでかなり便利です✨

![better_errorsでエラー発生時に変数の中身を確認している画面](/articles/image-6-1024x493.webp)

#### 注意点

ドキュメントにももちろんかいてありますが、導入時には`binding_of_caller`というgemも一緒に入れる必要があるので注意してください！

また、Dockerで開発している場合は追加の設定が必要になります

```ruby showLineNumbers {7}
require "active_support/core_ext/integer/time"

Rails.application.configure do
  # 中略
  # ~~~
  # better_errorsのdocker用の設定（下記を追加）
  BetterErrors::Middleware.allow_ip! "0.0.0.0/0"
end
```

上記のように設定をすれば使えるかと思いますので参考にしてください🙏

### `bullet`

GitHub: [https://github.com/flyerhzm/bullet](https://github.com/flyerhzm/bullet)

N+1問題を発見しやすくしてくれるgemです！
N+1問題の説明に関しては、分かりやすい記事がありましたのでそちらを確認してみてください🙇‍♂️

<ExternalLink url="https://pikawaka.com/rails/includes" />

ブラウザの`window.alert`や、ログに出力など様々な方法でN+1問題を知らせてくれます！

#### 注意点

やや精度が荒いのか、完全にN+1問題を検出してくれる訳ではなさそうです、、
また、実際にデータが入っていないと検出されないのでそこも少し不便ですね、、

{/* prettier-ignore */}
<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `@user.all`が0件の時　　：検出されない
  `@user.all`が1件以上の時：N+1があれば検出される みたいな感じです！
</SpeechBubble>

ただ、無いよりは良いと思いますのでよくN+1問題を忘れてしまう人は導入してみましょう！

## 終わりに

今回はよく使うgemを紹介しました！
聞いたことが無いgemを知れて、読者さんの頭の中に新しい選択肢を作るということを目的にしているので、詳しい解説は別のサイトにお任せします🙇‍♂️
もし需要がありそうなら個別の解説もします！
Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください！


---

## 【GSAP】Timelineを使ったオープニングアニメーション

- URL: https://blog.to-ko-s.com/articles/timeline-animation-from-gsap
- 著者: 杉田侑祐
- 公開日: 2022-11-08
- タグ: JavaScript

> GSAPのTimelineを使って、ファーストビュー向けのオープニングアニメーションを実装する方法を解説します。複数のアニメーションを連続して実行し、インパクトのある演出を作成できます。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform(GSAP)の`Timeline`を使って今風なオープニングアニメーションを作成しようと思います。
GSAPの基本的な使い方は下記の記事を参考にしてください。

<InternalLink slug="timeline-text-animation-from-gsap" />

### 対象読者

- Web制作でアニメーションの実装をしたい方

## 今回の完成予定

今回はファーストビューで行うオープニングアニメーションを意識して作りました。
1つずつのアニメーションがつながって、一つのアニメーションになります。
実装自体もかなり簡単になるので是非参考にしてみてください。

<Video src="/articles/timeline-animation-from-gsap.mp4" />

## GSAPの導入

GSAPを利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。
今回はCDNを利用していきたいと思います。
CDNは公式を参照してください。

<ExternalLink url="https://greensock.com/" />

## コードの紹介

コードの紹介になります。

```html title="HTML" showLineNumbers
<body>
  <header>
    <nav>
      <h3 id="logo">TOKOS</h3>
    </nav>
  </header>
  <section>
    <div class="fv">
      <img src="./image/mountain.jpg" class="menu" alt="山" />
      <h1 class="title">CREATE PLAY ENJOY</h1>
    </div>
  </section>
  <div class="bg--left"></div>
  <div class="bg--right"></div>
</body>
```

```css title="CSS" showLineNumbers
/*  reset.cssは省略  */

header nav {
  height: 100px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo {
  font-size: 32px;
  font-weight: 800;
}

section {
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fv {
  height: 60%;
  width: 100%;
  position: relative;
}

.fv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv h1 {
  position: absolute;
  left: 10%;
  top: 60%;
  font-size: 32px;
  color: #fff;
  font-weight: 700;
}

.bg--left {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #333;
  z-index: -1;
  width: 50%;
  height: 100%;
}

.bg--right {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #333;
  z-index: -1;
  width: 50%;
  height: 100%;
}
```

HTML&CSSは特に言うことはありません。
強いて言うなら、行いたいアニメーションを意識しながら書いていくことです。
アニメーションの中で背景を画面外から画面内に動いてくるアニメーションがあるので、class名`bg--left`と`bg--right`という要素を作成しております。

```javascript title="JavaScript" showLineNumbers
const fv = document.querySelector(".fv") //.fvの取得
const bgLeft = document.querySelector(".bg--left") //.bgの取得
const bgRight = document.querySelector(".bg--right") //.bgの取得
const logo = document.querySelector("#logo") //#logoの取得
const menu = document.querySelector(".menu") //.menuの取得
const title = document.querySelector(".title") //.titleの取得
```

JavaScriptですが、`querySelector`であらかじめ要素を取得しておきます。

```javascript title="JavaScript" showLineNumbers
const tl = gsap.timeline()
```

また`gsap.timeline()`を変数`tl`に格納して使用しています。

```javascript title="JavaScript" showLineNumbers
//ここからtimelineの記述
tl.fromTo(
  //画像の高さ0%から80%に変える
  fv, //変数fvに対して
  {
    height: "0%",
  },
  {
    height: "80%",
    duration: 1, //アニメーション時間
    ease: "power3.inOut", //イージングの指定
  },
)
  .fromTo(
    //画像の横幅を100%から80%に変える
    fv,
    {
      width: "100%",
    },
    {
      width: "80%",
      duration: 1, //アニメーション時間
      ease: "power3.in", //イージングの指定
    },
  )
  .fromTo(
    //左半分の背景を上から下へスライド
    bgLeft,
    {
      y: "-100%",
    },
    {
      y: "0%",
      duration: 1.5, //アニメーション時間
      ease: "power2.inOut", //イージングの指定
    },
    "-=1", //前のアニメーションが終わる時に対して1s早く始める
  )
  .fromTo(
    //右半分の背景を下から上へスライド
    bgRight,
    {
      y: "100%",
    },
    {
      y: "0%",
      duration: 1.5, //アニメーション時間
      ease: "power2.inOut", //イージングの指定
    },
    "-=1.5", //前のアニメーションが終わる時に対して1.5s早く始める
  )
  .fromTo(
    //ロゴを右から左へ出現
    logo,
    {
      opacity: 0,
      x: 30,
    },
    {
      opacity: 1,
      x: 0,
      duration: 0.5, //アニメーション時間
    },
    "-=0.5", //前のアニメーションが終わる時に対して0.5s早く始める
  )
  .fromTo(
    //テキストを左から右へ出現
    title,
    {
      opacity: 0,
      x: -30,
    },
    {
      opacity: 1,
      x: 0,
      duration: 0.5, //アニメーション時間
    },
    "-=0.5", //前のアニメーションが終わる時に対して0.5s早く始める
  )
```

ここから`timeline`の記述に入ります。
`timeline`での記述は上から処理されていきますので、上から、画像の縦幅を大きくする => 画像の幅を小さくする => 背景を上から下に動かすのと背景を下から上に動かす => ロゴとテキストの出現のような順番になります。

また`fromTo`メソッドを使用しているため`fromTo(対象とするclass等, {初期状態の指定}, {アニメーションの完了状態})`となるように指定していきます。
`{アニメーションの完了状態}`に対し、アニメーションの時間やイージングを指定していく形になります。
イージングに関しては下記参照してください。

<ExternalLink url="https://greensock.com/docs/v3/Eases" />

また、流れるような連続するアニメーションを行う際は、イージングを変えるだけで印象もかなり変わってきます。
公式ドキュメントより直感的にイージングを選択できることもGSAPの良いところだと思います。
「Eases」の中から好きに選びコピーするだけで変えることが出来ます。
（下記画像参照）
また「custom」で自分で作成することも可能です。

<Callout variant="warning">
  イージングの種類によっては、`CustomEase`というプラグインが無いと動作しないので注意してください。
</Callout>

![GSAPのEases選択画面でイージングの種類を直感的に選べるUI](/articles/64b5a86c04347b08864b764e8dda172e.webp)

また前のアニメーションが終わる前にアニメーションを開始したい場合は`fromTo(対象とするclass等, {初期状態の指定}, {アニメーションの完了状態}, "時間の指定")`のようにすると指定した時間分前のアニメーションが終わる前にアニメーションをスタートすることが可能になります。

## 最後に

やはりGSAPの`timeline`を使えるようになるとアニメーションの幅が広がるなと感じました。
連続するアニメーションの中に時間の指定をするだけでアニメーションが複雑に交差していくのでインパクトを与えられるような気がします。
かなり簡単に複雑なアニメーションが実装可能になるのでGSAPはかなり重宝しています。


---

## 【AdobeXD】XD でテキストアニメーションを実装する方法

- URL: https://blog.to-ko-s.com/articles/adobexd-textanimation
- 著者: 杉田侑祐
- 公開日: 2022-11-01
- タグ: デザイン

> Adobe After EffectsでテキストアニメーションをJSON(Lottie)形式で書き出し、AdobeXDに貼り付ける方法を紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSの杉田です！
今回は`AdobeXD`でテキストアニメーションを実装する方法について紹介します。

クライアント様にデザインの提案をする際に、アニメーションの提案をどうしようかと考えていました。
2022年のAdobeMAXで株式会社ICS様が紹介されていた方法がとても参考になりましたので紹介します。

<ExternalLink url="https://ics.media/" />

内容としては`Adobe After Effects`でテキストアニメーションを作成し、`JSON`（`Lottie`）で書き出して`XD`に貼り付けるような流れになります。
とても簡単でしたので是非参考にしていただければと思います。
また`Lottie`については下記を参照してください。

<ExternalLink url="https://photoshopvip.net/121220" />

### 対象読者

- `AdobeXD`にテキストアニメーションを実装したい方

## 今回の完成予定

今回の完成予定はファーストビューでの使用想定のテキストアニメーションになります。

<Video src="/articles/adobexd-textanimation.mp4" />

## アニメーションの実装

まずは、オブジェクトを作成していきます。
`XD`か`Illustrator`で表示させたいテキストを作成します。
今回は`XD`で行います。

![XDでアニメーション用のテキストオブジェクトを作成した状態](/articles/69ea5df3b68cca0f2dcdb57cd2fc85a8.webp)

次にオブジェクトを`After Effects`に書き出していきます。
オブジェクトを選択した状態で「ファイル」から「書き出し」の中の「After Effects」を選択（`option + command + f`）

![XDのファイルメニューからAfter Effectsへ書き出しを選択する画面](/articles/6f6c99f356bd0b0a8a943e4e5a809709.webp)

そうしたら`After Effects`に移動します。
今からは`After Effects`の作業に入ります。
好きなようにアニメーションを施して書き出せば良いです。
ですが、今回は`After Effects`のデフォルトのプリセットを使用したいと思います。

{/* prettier-ignore */}
<Callout variant="warning">プリセットの選択は`Adobe Bridge`経由で選択画面に入りますので、`Adobe Bridge`を入れていない方はダウンロードしてください。</Callout>

画面内のオブジェクトをドラッグして選択した状態で「アニメーション」の「アニメーションのプリセットを参照」を選択

![After Effectsのアニメーションメニューからプリセットを参照する画面](/articles/a0789076ea1ec7a2191f0cce49c4da48.webp)

そうすると`Adobe Bridge`経由で選択画面に行けると思います。
そうしたら、フォルダの「Text」を選択

![Adobe Bridgeでプリセットの「Text」フォルダを選択する画面](/articles/3fef1e2e0208e6f258ddd42c19a702a5.webp)

フォルダを開いて、フォルダの「Animate In」を選択

![Adobe Bridgeで「Animate In」フォルダを選択する画面](/articles/459d66f610e4c0838582bdceff0b36c6.webp)

この中から好きなアニメーションを選択できます。
今回は「フェードアップ(単語)」を選択します。
フェードインのアニメーションですが、スペースごとに区切りで遅延がかかり表示してくれます。
また`Adobe Bridge`の画面右でプレビューも見られるのでとても選びやすいかと思います。

![Adobe Bridgeで「フェードアップ(単語)」をプレビュー付きで選択する画面](/articles/c64ce964cfaa87090e0ac37d6763f03c-1024x676.webp)

選択するとオブジェクトにアニメーションがかかっているかと思います。
ここからイージングや他の動きをつけても良いと思います。
ここから`JSON`で書き出していきたいと思います。

<Callout variant="warning">
ここから`JSON`（`Lottie`）で書き出すのですが、別途プラグイン（無料）が必要になります。
下記からダウンロードしてください。

<ExternalLink url="https://exchange.adobe.com/apps/cc/12557" />

</Callout>

「ウィンドウ」から「エクステンション」から「`Bodymovin`」を選択

![After EffectsのウィンドウメニューからBodymovinを選択する画面](/articles/a81636a5e81e062a158391a5c2081b01.webp)

書き出す`JSON`データの保存先の設定をします。
右の「・・・」を選択し保存先を選んで保存

![BodymovinでJSON書き出しの保存先を設定する画面](/articles/8627bb61cdbbe73bba92372439330207.webp)

保存先を選んだら選択した状態で「Render」を選択

![BodymovinでRenderボタンを押してJSON書き出しを実行する画面](/articles/aa5cbad807ec1ab55f2b4495512f8db6.webp)

下部ボタンが「Done」になったら完成です。
自動でアウトライン化して書き出してくれます。

<Callout variant="warning">
  この時エラーが出る場合は「環境設定」から「スクリプトとエクスプレッション」を選択し、アプリケーションのスクリプト内の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れると解消されるかと思います。
</Callout>

書き出しが出来たら、`XD`に貼り付けると表示されていないように見えますが、プレビューを見るとアニメーションがかかっているかと思います。

## さいごに

クライアント様にアニメーションの提案や、デザイナーとエンジニア間の認識の齟齬をなくすためにも、デザイン段階からアニメーションの実装ができるのは良いのかなと思います。
デフォルトでも多く選択できるのも良い点かなと思います。


---

## 【Rails】enumを使用したselectボックスの作成（ransackで使用する際の注意点も）

- URL: https://blog.to-ko-s.com/articles/enum-select-box
- 著者: 寺田拓真
- 公開日: 2022-10-24
- タグ: Rails

> Railsのenumを使ってselectボックスを作成する方法を解説します。enum_helpによる日本語表示（I18n対応）や、ransackで検索条件として使う際にvalueを数値にする注意点、slice/exceptで選択肢を絞る方法も紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！
今回は`enum`を使用して`select`ボックスを作成する方法について紹介します

`enum`とは、数値のカラムに対してプログラム上で扱える別名を与えるものです。
数値に対して名前を与えることで可読性が上がります。
また、定義されている以外の値を保存できないようにしてくれます。
この他にもレコードを扱うのに便利な機能が多く、大変便利なメソッドです！

基本的な`enum`の使い方や実装方法については、以下のサイトが参考になると思います。

<ExternalLink url="https://pikawaka.com/rails/enum" />

この`enum`は`select`ボックスを作成する際にも便利なので、これから紹介する方法をぜひお試しください！

例として、今回は下にあるような利用プランに関する`select`ボックスを作成していきます。

![利用プランの選択肢が並んだセレクトボックスの完成形](/articles/ScreenShot-2022-10-24-11.33.30.webp)

### 対象読者

- `enum`を勉強中の初学者の方
- `enum`を使ってセレクトボックスを作成したい方

## selectボックス作成方法

### enumを設定する

まずは`select`ボックスで使用する`enum`を設定します。
今回はユーザーの利用プランに関するカラム(`plan`)を持った`User`モデルに以下のような記述をします。

```ruby title="Ruby" showLineNumbers
# 0: 無料プラン, 1: スタンダードプラン, 2: プレミアムプラン
enum plan: { free: 0, standard: 1, premium: 2 }
```

これで`enum`が定義できました。

### enum_helpの導入・ja.ymlに翻訳情報を記載

選択肢は日本語で表示させたいので、その下準備として`enum_help`という`gem`を導入します。
`enum_help`とは`enum`で定義した値をI18n化させることができる`gem`です！

<SpeechBubble name="たくま" icon="/articles/ScreenShot-2022-09-25-12.45.42.webp">
  I18nは **Internationalization（国際化）** の略だね！ "I"と"n"の間に18文字あるから、こう略されているよ😎
</SpeechBubble>

`enum_help`について、下の記事に詳しい使用方法が記載されているので参照ください。

<ExternalLink url="https://qiita.com/k_morimori/items/353f69e31b42e85b9c29" />

追加方法は`Gemfile`に下記のように追記して、`bundle install`を行えばOKです！

```ruby title="Ruby" showLineNumbers
gem 'enum_help'
```

続いて、`ja.yml`に翻訳情報を記述していきます。

![ja.ymlにenumの翻訳情報を記述した内容](/articles/ScreenShot-2022-10-24-12.04.26.webp)

これで下準備を完了です！
呼び出し方については後述します。

### selectボックスを表示する

`enum`を設定したので、それを基に`view`側で`select`ボックスを作成しましょう！
今回は`form_with`を使用して作成します。
プルダウン形式のフォームは通常、下記のように`f.select`を用います。

```erb title="ERB" showLineNumbers
<%= f.select カラム名, {'選択肢': DBに保存する値}, {オプション}, {classなどの要素} %>
```

これに倣って、`enum`を用いた`select`ボックスを作成すると下記のようになります。
（`Tailwind CSS`でスタイルをあてています。）

```erb title="ERB" showLineNumbers
<%= f.select :plan, User.plans.keys.map { |k| [t("enum.user.plan.#{k}"), k] }, { include_blank: "指定なし" }, class: "mb-3 sm:mb-0 mr-9 border border-line-200 rounded-[3px] rounded-[3px] py-3 pl-6 w-52 h-12 font-bold" %>
```

記述を詳しく説明します。
`plan`はカラム名になります。
その次の`User.plans`で利用プランの`enum`をハッシュの形で取得しています。
この時、モデルに対してカラムは複数形であることに注意してください。

![User.plansでenumのハッシュを取得した結果のコンソール出力](/articles/ScreenShot-2022-10-24-11.57.35.webp)

続く`keys`で取得したハッシュのキーを配列の形で取得しています。

![keysメソッドでenumのキーを配列として取得した結果のコンソール出力](/articles/ScreenShot-2022-10-24-11.58.00.webp)

その後の`map`メソッドで新たに配列を生成しています。
`t("enum.user.plan.#{k}")`の部分ですが、これは`ja.yml`の表記の通りに翻訳するというメソッドです。`t`の後の()内でどの階層にあるものかということを明記しています。
このように記述することで、先ほど`ja.yml`に記述した日本語の文字列を選択肢に表示させることができます。

これで、`enum`を使用した`select`ボックスを作成できました！

![enumで作成した日本語表示のセレクトボックスの完成形](/articles/ScreenShot-2022-10-24-11.33.30.webp)

## ransackでselectボックスを使用する

### view側の記述を変更する

ここからは、`ransack`を用いて検索する際に`select`ボックスを使用する方法について紹介します。
`ransack`の基本的な使用方法については、以下のサイトをご覧ください。

<ExternalLink url="https://pikawaka.com/rails/ransack" />

`ransack`で検索条件を設定する際に`enum`型のカラムを設定し、`select`を用いて検索することも可能です。
ただ、これまで紹介した方法で作成した`select`ボックスを使用して検索はできないので注意が必要です。

理由は、`enum`により実際にDBに保存されているのは対応づけられた`integer`(数値)であり、
`ransack`はその値に基づいて検索をかけているからです。

これまでに作成した`select`ボックスを検索条件に設定した際のHTML構造の画像をご覧ください。(chromeの検証ツールにて確認しています)

![valueが文字列になっているセレクトボックスのHTML構造（検証ツール）](/articles/ScreenShot-2022-10-22-20.55.33.webp)

`value`の値が`enum`で設定した名前(文字列)になっていることがお分かり頂けると思います。
この状態では、うまく検索できません。
`value`の値に元の`integer`(数値)を渡してあげる必要があります。

そのためには、下記のように`view`の記述を変更します。

#### 変更前

```erb title="ERB" showLineNumbers
<%= f.select :plan_eq, User.plans.keys.map { |k| [t("enum.user.plan.#{k}"), k] }, { include_blank: "プラン" }, { class: "text-[#9A7E7E] form-select min-w-[120px] ml-4 rounded-[3px] border border-[#9A7E7E]" } %>
```

#### 変更後

```erb title="ERB" showLineNumbers
<%= f.select :plan_eq, User.plans.keys.map.with_index { |k, i| [t("enum.user.plan.#{k}"), i] }, { include_blank: "プラン" }, { class: "text-[#9A7E7E] form-select min-w-[120px] ml-4 rounded-[3px] border border-[#9A7E7E]" } %>
```

ポイントは、`map`メソッドの後ろに`with_index`をくっつけ、第二引数で要素の添字を変数iとして取得していることです。
このように記述することで、変数`i` (数値)が`value`に渡され、無事に検索できるようになります。

![valueが数値に修正されたセレクトボックスのHTML構造（検証ツール）](/articles/ScreenShot-2022-10-22-21.07.22.webp)

## その他

### 選択肢に特定の値だけを表示する

例えば、`enum`の特定の値だけを表示させたい時には、
`slice`を使用することで実現できます！

#### slice

`slice`を使用することで、引数に設定した値だけを取得できます。
`slice(:standard, :premium)`とすることで、利用プランをスタンダードプランとプレミアムプランのみ表示しています。

```erb title="ERB" showLineNumbers
  <%= f.select :plan, User.plans.slice(:standard, :premium).keys.map { |k| [t("enum.user.plan.#{k}"), k] }, { include_blank: "指定なし" }, class: "mb-3 sm:mb-0 mr-9 border border-line-200 rounded-[3px] rounded-[3px] py-3 pl-6 w-52 h-12 font-bold" %>
```

![sliceで絞り込んだスタンダードとプレミアムのみのセレクトボックス](/articles/ScreenShot-2022-10-24-11.40.49.webp)

### 選択肢の特定の値を除外する

同じように特定の値を除外したい場合は、
`except`を使用することで実現できます！

#### except

`except`を使用することで、引数に設定した値以外を取得できます。
`except(:premium)`とすることで、利用プランを無料プランとスタンダードプランのみ表示しています。

```erb title="ERB" showLineNumbers
  <%= f.select :plan, User.plans.except(:premium).keys.map { |k| [t("enum.user.plan.#{k}"), k] }, { include_blank: "指定なし" }, class: "mb-3 sm:mb-0 mr-9 border border-line-200 rounded-[3px] rounded-[3px] py-3 pl-6 w-52 h-12 font-bold" %>
```

![exceptでプレミアムを除外した無料とスタンダードのみのセレクトボックス](/articles/ScreenShot-2022-10-24-11.43.50.webp)

どちらも指定する値によっては、同じ選択肢を作成することも可能です。
ケースによって使い分けてみてください！

## おわりに

今回は`enum`を使用した`select`ボックスの作成方法を紹介しました。
紹介した方法を用いることで、コードがすっきりして可読性も上がるのでおすすめです！
`enum`には他にも便利な機能が多くあるので、これからも勉強していこうと思います😎


---

## 【Rails】kaminariのページネーションのデザインをviewごとに変更する

- URL: https://blog.to-ko-s.com/articles/kaminari-pagination-design
- 著者: 寺田拓真
- 公開日: 2022-10-17
- タグ: Rails

> Railsのkaminariでページネーションのデザインをviewごとに切り替える方法を解説。themeディレクトリの作成から各テンプレートファイルの編集手順までを紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！
今回はviewごとにkaminariを使用したページネーションのデザインを変更する方法について紹介します!

ページネーション実装時にkaminariを使用されている方も多いかと思います。
kaminariを使用することで簡単にページネーションを実装することは出来ますが、
例えば管理者側の画面とユーザー側の画面でデザインを変更したいと思うことはありませんか？
そんな時は、これから紹介する方法で簡単にデザインを変更することが出来ます！

基本的なページネーションの使い方や実装方法については、以下のサイトが参考になると思います。

<ExternalLink url="https://pikawaka.com/rails/kaminari" />

### 対象読者

- kaminariを使用してページネーションを実装している方
- ページネーションのデザインを変更したい方

## ページネーションのデザインを変更する

### themeごとにディレクトリを作成する

kaminariは下記の`theme: 'user'`のようにthemeを指定することでデザインを切り替えることが出来ます。

```erb showLineNumbers {2}
<div class="flex justify-end">
  <%= paginate @model, theme: 'user' %>
</div>
```

themeを使用するために、まずはkaminariディレクトリ内に使用したいthemeのディレクトリを画像のように作成しましょう！

![kaminariディレクトリ内にthemeごとのディレクトリを作成した構成](/articles/ScreenShot-2022-10-16-14.48.15.webp)

### theme内のファイルを編集する

themeのディレクトリを作成したら、その中にある各ファイルを表示させたいデザインになるように編集していきましょう！

編集する各ファイルについて、それぞれ説明していきます。
(今回表示している例ではTailwind CSSを使用してスタイルをあてています。)

#### `_page.html.erb`

ページネーションの番号を表示するファイルです。

`if`文で現在表示されているページ番号とそれ以外のページ番号が分かれています。別々のスタイルをあてることで、今はどのページを表示しているのか分かりやすくなります。

```erb title="_page.html.erb" showLineNumbers
<% if page.current? %>
  <li class="page current">
    <%= link_to_if page.current?, page, url, {remote: remote, rel: page.rel, class: "block py-[9px] w-8 h-8 border text-xs text-red-500 font-bold text-center !leading-none" } %>
  </li>
<% else %>
  <li class="page">
    <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel, class: "block py-[9px] w-8 h-8 bg-white border text-xs text-red-500 font-bold text-center !leading-none" } %>
  </li>
<% end %>
```

#### `_next_page.html.erb`

次のページへ移行する右矢印などを表示するファイルです。

```erb title="_next_page.html.erb" showLineNumbers
<li class="next">
  <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote, class: "block py-[8px] w-8 h-8 bg-white border text-xs text-console font-bold text-center !leading-none rounded-r-[3px]" %>
</li>
```

#### `_prev_page.html.erb`

前のページへ移行する左矢印などを表示するファイルです。

```erb title="_prev_page.html.erb" showLineNumbers
<li class="prev">
  <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote, class: "block py-[8px] w-8 h-8 bg-white border text-xs text-console font-bold text-center !leading-none rounded-l-[3px]" %>
</li>
```

#### `_paginator.html.erb`

各番号や矢印との間隔を調整するファイルです。

3行目のgap-x-1で間隔を指定しています。

```erb title="_paginator.html.erb" showLineNumbers {3}
<%= paginator.render do -%>
  <nav class="pagination" role="navigation" aria-label="pager">
    <ul class="flex gap-x-1">
      <%= prev_page_tag unless current_page.first? %>
      <% each_page do |page| -%>
        <% if page.display_tag? -%>
          <%= page_tag page %>
        <% elsif !page.was_truncated? -%>
          <%= gap_tag %>
        <% end -%>
      <% end -%>
      <% unless current_page.out_of_range? %>
        <%= next_page_tag unless current_page.last? %>
      <% end %>
    </ul>
  </nav>
<% end -%>
```

#### `_gap.html.erb`

ページ番号とページ番号の間の...を表示するファイルです。

```erb title="_gap.html.erb" showLineNumbers
<span class="page gap w-8 h-8 bg-white border text-center text-red-500"><%= t('views.pagination.truncate').html_safe %></span>
```

最終的に表示されるページネーションがこちらです。

![カスタマイズ後のページネーションの表示例1](/articles/ScreenShot-2022-10-16-14.29.28.webp)

![カスタマイズ後のページネーションの表示例2](/articles/ScreenShot-2022-10-16-14.31.43.webp)

他にもデザインを作成したい場合は、同様の手順で作成してもらえればOKです！
表示する際は上記したように必ず`theme`を指定することに注意してください。

## おわりに

今回は、viewごとにkaminariを使用したページネーションのデザインを変更する方法について紹介しました！
themeごとにファイルを編集して、表示の際にthemeを指定するだけなので非常に簡単だと思います。
ページごとのデザインに統一性を持たせるため、ぜひ活用してみてください！


---

## Javascript 言語判別 ブラウザの言語を自動判別して表示を自動切り替えする方法

- URL: https://blog.to-ko-s.com/articles/javascript-navigator-language
- 著者: 成岡拓哉
- 公開日: 2022-10-11
- タグ: JavaScript

> JavaScriptでブラウザの言語を判別する方法を解説します。navigator.languageプロパティを使って表示内容を切り替える実装方法を紹介します。


## はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
普段はWeb制作のデザインや実装をしています。
今回は、JavaScriptでブラウザの言語判別をする方法について説明していきます。

### 概要

ユーザーの使用言語によってページの内容を自動で切り替えたいときがあるかと思います。
JavaScriptにはブラウザの言語判別が簡単にできるプロパティが用意されています。
それは、`navigator.language`というプロパティです。
実際のユースケースも踏まえて後ほど詳しく説明していきます。

### 対象者

- 使用言語によって表示内容を切り替えたい方
- JavaScriptで言語判別する方法を知りたい方

## navigator.language プロパティ

結論、JavaScriptでユーザーのブラウザ上での使用言語を判別するには、`navigator`の`language`というプロパティを用いることで実現が可能です。
`navigator`とは、JavaScriptのプロパティのひとつで、ウェブブラウザのあらゆる情報を持ったプロパティです。
今回はその中でも、`language`というプロパティを使用することでウェブブラウザの使用言語を取得します。

`navigator`の`language`プロパティの詳しい仕様は、こちらを参考にしてください。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/Navigator/language" />

見ていただくとわかるかと思いますが、特に難しいことはありません。
ブラウザの使用言語が文字列として返されるといったプロパティです。

## 実装

今回は、ブラウザの言語判別をしその結果によってページの内容を切り替えるケースを想定し実装していきます。
とは言っても、今回は文字を変えるだけです。
使用言語が日本語の場合は「ja」、それ以外の場合は「En」と表示するようにします。

実際に多言語化したウェブサイトやアプリケーションを作るには、専用のライブラリでの実装が必要になってくる場合が多いです。

```html title="HTML" showLineNumbers
<p>使用言語は<span id="browser-language"></span>です</p>
<script src="./main.js"></script>
```

```javascript title="main.js" showLineNumbers
const browserLang = (window.navigator.languages && window.navigator.languages[0]) || window.navigator.language
document.getElementById("browser-language").textContent = browserLang?.startsWith("ja") ? "ja" : "En"
```

`navigator.language`は環境によって「ja」ではなく「ja-JP」を返す場合があるため、`startsWith()`を使用して判定しています。

上記のコードを実行すると、以下のように表示されます。

![言語切替の画像](/articles/d5553cfff5cc7a0fc1cca616841615dd-1024x768.webp)

`navigator.languages`はユーザーが設定した優先言語のリストを配列で返します。
`navigator.language`はブラウザのUI言語を返すため、`navigator.languages[0]`を優先的に参照することで、ユーザーの希望言語をより正確に取得できます。

参考にした記事を貼っておきます。

<ExternalLink url="https://qiita.com/shogo82148/items/548a6c9904eb19269f8c" />

## おわりに

JavaScriptで言語判別する方法について説明しました。
`navigator`の`language`プロパティを使えば簡単にウェブブラウザの使用言語が取得できるので、ぜひお試しください！

また、`navigator`プロパティには、`language`の他にも様々なプロパティがあります。
例えば、`userAgent`プロパティは、ウェブブラウザのChromeやFirefoxなどのユーザーエージェントに関してのプロパティです。
他にも面白いプロパティがあるので、調べてみてください！


---

## Docker + Rails7 + Webpack な開発環境の構築方法【コピペでOK】

- URL: https://blog.to-ko-s.com/articles/webpack-docker-setup
- 著者: 西原月熙
- 公開日: 2022-10-02
- タグ: Ruby, Rails, Docker

> Docker + Rails 7 + Webpack の開発環境をコピペで構築する方法を解説。Rails 6と7のJavaScriptバンドラーの違いや、importmap・esbuild・Webpack の選択肢についても説明します。


## はじめに

### この記事の概要

こんにちは、Rubyをメインで書いている株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回はRails7の開発環境をDockerで構築する方法を説明します！
Rails6バージョンは過去に書いていますので、ご参考ください😎

<InternalLink slug="rails-environment-from-docker" />

Rails6と7の大きな違いとして、組み込まれるJavaScriptのバンドラーがあります。
この違いも簡単に説明するので、分からない方はぜひ最後まで読んでみてください💪

### 対象読者

- Rails7 + Dockerの環境を構築したい方
- 開発環境を構築する上でのRails7と6の違いを知りたい方

### 今回作成する環境

| 技術等  | バージョン |
| ------- | ---------- |
| Ruby    | 3.1.2      |
| Rails   | 7.0.3      |
| Webpack | 5.73.0     |

## Rails6と7の違い

まずは6系と7系の違いを説明します！
と言っても、今回は開発環境の構築方法なので、環境構築に関わる部分だけの説明に留めておきます。
全体的な違いが知りたい方は、下記記事を参考にしてください🙏

<ExternalLink url="https://qiita.com/ryohashimoto/items/f5382478c78f296d8291" />
<ExternalLink url="https://qiita.com/jnchito/items/5c41a7031404c313da1f" />

## JavaScript

デフォルトでインストールされるJavaScriptのライブラリの違いが1番大きいです！
Rails6の時はWebpackerという、Webpackのラッパーがインストールされていました。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  Webpackがよく分かっていなくても、JSの処理を良い感じにまとめてくれるようなものだね！
</SpeechBubble>
Rails7は、このJSのまとめ役のようなものが`rails new`の際に4種類から選べるようになりました！
具体的には、importmap・esbuild・Rollup・Webpackの4つです！
つまり、Webpackerはその中に入っておらず、Rails6と同じように開発・デプロイをしようと思ったらWebpackを選択する必要があります😨
それぞれの説明は今回割愛しますが、大事なことは**何も選択しなかった場合のデフォルトはimportmapになってしまう**ということです🙄
Rails6までと同じような感じで使うためには、Webpackを選択することが必要です！

## CSS

CSSに関しても同様で、`rails new`する際に任意のライブラリを選択できます。
具体的には、

- Tailwind CSS
- Bootstrap
- bulma
- postcss
- sass

です！
Rails6ではデフォルトでsassが入っていたかと思いますが、Rails7では何も入っていなさそうですね🤔

## 構築方法

それでは早速構築方法の説明をしていきます！
前提として、MacOS + Docker for Desktopを使っていきますので、Windowsの方は適宜読み替えをしてください。
またRails6と違う部分を重点的に書きますので、まずは下記のRails6バージョンの記事を読んでいただけると理解がスムーズになると思います！

<InternalLink slug="rails-environment-from-docker" />

### ファイルの作成・記述

```bash title="ターミナル"
$ touch Dockerfile docker-compose.yml entrypoint.sh Gemfile Gemfile.lock my.cnf
```

上記コマンドを打つことで必要なディレクトリとファイルが全て作成されます！

## docker-compose.yml

```yaml title="docker-compose.yml" {5}
version: "3"
services:
  app:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && ./bin/dev"
    # Rails6の場合： command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp:delegated
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - ./tmp/db:/var/lib/mysql:delegated
      - ./my.cnf:/etc/mysql/conf.d/my.cnf
    cap_add:
      - SYS_NICE
```

Rails6との違いとしては、5行目の`bundle exec rails s -p 3000 -b '0.0.0.0'`が`./bin/dev`になっているところです！
これは、Rails7でのサーバーの立ち上げコマンドが`bin/dev`になったことによる変更です！

{/* prettier-ignore */}
<Callout>
  `bin/dev`コマンドで、リロードによるJSやCSSの自動コンパイルがされるようになります
</Callout>

## その他ファイル

他はRails6とバージョンくらいしか違いが無いのでまとめて載せておきます！
(ファイル名はコードボックスの右上に書いてあります)

```dockerfile title="Dockerfile"
FROM ruby:3.1.2
ENV TZ Asia/Tokyo

RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
    && apt-get update -qq \
    && apt-get install -y nodejs \
    && npm install -g yarn

WORKDIR /myapp
RUN gem install bundler
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]
```

```bash title="entrypoint.sh"
#!/bin/bash
set -e

rm -f /myapp/tmp/pids/server.pid

exec "$@"
```

```ruby title="Gemfile"
source 'https://rubygems.org'
gem 'rails', '~>7.0.3'
```

```ini title="my.cnf"
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_general_ci
default-authentication-plugin=mysql_native_password

[client]
default-character-set=utf8mb4
```

`Gemfile.lock`は相変わらず空です！

### コマンド

それでは`rails new`のコマンドを打ち込みます！

```bash title="ターミナル"
$ docker-compose run --no-deps app rails new . --force --database=mysql --javascript=webpack --skip-test
$ docker-compose build
```

この`--javascript=webpack`の記述でJavaScriptのバンドラーはWebpackになります！

またTailwind CSSを使いたいときはコマンドに追加で`--css=tailwind`、Bootstrapを使いたいときは`--css=bootstrap`を追記するだけです🥳
あとは、`config/database.yml`のデータベースの設定をRails6と同様に記述した上で`$ docker-compose up`コマンドでRails7の画面が確認できるハズです！
![rails7のnew画面](/articles/rails7-new-1024x476.webp)

## 終わりに

Rails7でWebpackを使うのであれば、Rails6とほぼ変わりなく環境構築ができそうですね！
Rails7では他にもTurboやStimulusというフロントエンド側の大幅アップデートがあり、そちらも記事に書いていく予定ですのでお楽しみに😎
Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇‍♂️


---

## 【Tailwind CSS】疑似要素 ::before(::after)を使ってみよう！

- URL: https://blog.to-ko-s.com/articles/tailwind-before-after
- 著者: 寺田拓真
- 公開日: 2022-09-26
- タグ: HTML, CSS, Tailwind CSS

> Tailwind CSSで疑似要素::beforeと::afterを使う方法を紹介します。テキスト表示や打消し線の実装例を交えて、基本的な記述方法を解説します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのたくまです！
皆さんはCSSで疑似要素の`::before`と`::after`を使用したことはありますか？
疑似要素とは、HTMLに追加をせずに指定した要素の特定の位置・部分にスタイルを付与できるものです。
疑似要素の中でも、先述した`::before`と`::after`は有名だと思います。
通常の使用方法については、下記のサイトが分かりやすいかと思います。

<ExternalLink url="https://saruwakakun.com/html-css/basic/before-after" />

ただ、Tailwind CSSで使用する際は通常のCSSと記述方法が異なります。
そこで、今回はTailwind CSSでの`::before`と`::after`の使用方法を紹介します！

### 対象読者

- Tailwind CSSを勉強中の初学者の方
- `::before`(`::after`)の使い方が分からない方

## Tailwind CSSで`::before`と`::after`を使ってみる

### `::before`と`::after`を使用して文字を表示する

早速、Tailwind CSSで`::before`と`::after`を使ってみましょう！
最初は「こんにちは」というテキスト周りに「おはよう」と「こんばんは」のテキストを表示させてみようと思います。
記述方法は下記の通りになります。

```html title="HTML" showLineNumbers
<body>
  <div
    class="
  w-96 h-48 bg-dark-blue-200 text-center
  before:content-['おはよう'] before:text-sky-300 before:text-3xl
  after:content-['こんばんは'] after:text-amber-300 after:text-3xl
  "
  >
    <h1 class="text-white">こんにちは</h1>
  </div>
</body>
```

このように記述することで、Tailwind CSSで`::before`と`::after`を適用させることができます。
実際の画面がこちらです。
![before・afterで「おはよう」「こんばんは」を表示した実行結果](/articles/ScreenShot-2022-09-26-11.08.53.webp)

検証ツール(Chromeのデベロッパーツール)で確認してみても、しっかりと適用されていることが分かります。
![検証ツールでbefore・after疑似要素が適用されていることを確認](/articles/ScreenShot-2022-09-26-9.27.11.webp)

ポイントとして、`::before`(`::after`)を適用させたい要素には、`before:text-3xl`のように、`before:`(`after:`)とクラス名をくっつけて記述することです。
ちなみに、`before:`(`after:`)の前に`hover:`をくっつけることで、ホバーアクションさせることも可能です。
![ホバー時にbefore・afterの疑似要素が変化するアニメーション](/articles/tailwind-befor.gif)

### `::before`と`::after`を使用して打消し線を表示する

次に、`::before`と`::after`を使用して、二重の打消し線を表示させたいと思います！
Tailwind CSSにはもともと`line-through`という打消し線のクラスが存在します。
`line-through`に加えて`decoration-double`や`decoration-red-600`といったクラスを付与することで二重の打消し線を表示させることができます。

実際に表示させた例がこちらです。
![line-throughとdecoration-doubleで表示した二重打消し線の例](/articles/ScreenShot-2022-09-26-10.02.28.webp)

<SpeechBubble icon="/articles/ScreenShot-2022-09-25-12.45.42.webp" name="たくま">
  線と線の間が窮屈に感じる。。。
</SpeechBubble>

これでも打消し線として良いとは思うのですが、もう少し線と線の幅を拡大させたい場合などは`::before`と`::after`を使用すると便利です!

`::before`と`::after`を使用する場合は、先程の`line-through`などは使用しません。

```html title="HTML" showLineNumbers
<body>
  <div
    class="
  w-fit text-4xl relative
  before:absolute before:left-0 before:top-7 before:w-full before:h-[2px] before:bg-red-600
  after:absolute after:left-0 after:top-4 after:w-full after:h-[2px] after:bg-red-600
  "
  >
    <h1>こんにちは</h1>
  </div>
</body>
```

少し長くなりますが、記述するとこのようになります。
こちらは`relative`と`absolute`で線の位置を絶対指定することで、好みの位置に配置しています。
線の太さも`height`で指定しています。

画面上で表示させた例がこちらです！
![before・afterを使い線の間隔を広げた二重打消し線の表示例](/articles/ScreenShot-2022-09-26-10.23.44.webp)

<SpeechBubble icon="/articles/ScreenShot-2022-09-25-12.45.42.webp" name="たくま">
  さっきよりも打消し線っぽくなった！
</SpeechBubble>

このように`::before`と`::after`を使用することで、自分好みにカスタマイズすることができます！

## 終わりに

今回はTailwind CSSでの`::before`と`::after`の使用方法を紹介しました！
上記のような打消し線を表示させる際には、かなり使いやすいと思います。
難点としては、Tailwind CSSの性質上、凝ったものを作成すると記述が長くなってしまうことでしょうか。
その際は改行などを駆使して、コードを見やすくすると良いと思います。
アレンジの幅はまだまだ無限にあると思うので、ぜひ皆さんもお試しください！


---

## 【ScrollTrigger】スクロールするとふわっと浮き出るスクロールアニメーション

- URL: https://blog.to-ko-s.com/articles/gsap-scrolltrigger-flow
- 著者: 杉田侑祐
- 公開日: 2022-09-21
- タグ: HTML, CSS, JavaScript

> GSAPのScrollTriggerを使って、スクロールすると要素がふわっと浮き出るアニメーションを実装する方法を解説します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSエンジニアのスギタです！
今回は、GreenSock社が開発したGreenSock Animation Platform(GSAP)の`ScrollTrigger`を使いスクロールアニメーションを行ってみようと思います。
スクロールするとふわっと浮き出てくるアニメーションの実装を行っていきたいと思います。

<Callout variant="warning">GSAPの基本知識が必要なため、もしわからない方はGSAPの記事を先に読んでください</Callout>

前回の記事

<InternalLink slug="text-animation-from-gsap" />

### 対象読者

- WEBページにスクロールアニメーションを実装させたい方

### 使用方法

GSAPを利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。
今回はCDNを利用していきたいと思います。
`ScrollTrigger`を使用する際、GSAPに依存しているため、GSAPと`ScrollTrigger`両方読み込まないといけません。

オフィシャルサイト

<ExternalLink url="https://greensock.com/" />

CDNを利用する場合は下記のようになります。

```html title="HTML" showLineNumbers
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>
```

<Callout variant="warning">
  GreenSock社は独自のライセンスを採用しているためご使用の際は公式ページに載っているライセンス規約を守り、ご使用してください🙇‍♂️
</Callout>

## ScrollTriggerの実装

### 完成アニメーション

スクロールするとふわっと要素が出てくるような感じになります。
今回の完成は下記になります。

<Video src="/articles/gsap-scrolltrigger-flow.mp4" />

### HTML/CSS

まずはHTML/CSSの紹介です。
今回は適当にHTML/CSSを書いてますが、コンポーネントだと思って見てください。

```html title="HTML" showLineNumbers
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
```

```css title="CSS" showLineNumbers
body {
  background-color: black;
  min-height: 100vh;
}

.top {
  width: 50%;
  height: 250px;
  background-color: red;
  margin: 500px auto 500px;
}

.middle {
  width: 50%;
  height: 250px;
  background-color: blue;
  margin: 500px auto 500px;
}

.bottom {
  width: 50%;
  height: 250px;
  background-color: green;
  margin: 500px auto 500px;
}
```

今回は`fromTo`メソッドでアニメーションの指定をしていくので、初期状態はサイズと位置のみ指定しています!

では次に`ScrollTrigger`になります。

```javascript title="JavaScript" showLineNumbers
gsap.fromTo(
  ".middle", //アニメーションしたい要素
  {
    //アニメーション前の記入
    y: 20, //アニメーション開始前の位置
    autoAlpha: 0, //アニメーション開始前の状態
  },
  {
    //アニメーション後の記入
    y: 0, //アニメーション後の位置
    autoAlpha: 1, //アニメーション後の状態
    scrollTrigger: {
      trigger: ".top", //アニメーションが始まるトリガーとなる要素
      start: "bottom top", //アニメーションが始まる位置を指定
    },
  },
)

gsap.fromTo(
  ".bottom", //アニメーションしたい要素
  {
    //アニメーション前の記入
    y: 20, //アニメーション開始前の位置
    autoAlpha: 0, //アニメーション開始前の状態
  },
  {
    //アニメーション後の記入
    y: 0, //アニメーション後の位置
    autoAlpha: 1, //アニメーション後の状態
    scrollTrigger: {
      trigger: ".middle", //アニメーションが始まるトリガーとなる要素
      start: "bottom top", //アニメーションが始まる位置を指定
    },
  },
)
```

コードの解説に入ります。
基本的には普通のGSAPの`fromTo`メソッドを使用して要素の位置と状態を指定して、`ScrollTrigger`でアニメーションの開始を指定しているような形になります。
`trigger`でアニメーションが始まるトリガーとなる要素を指定し、`start`でアニメーションが始まる位置を指定しています。

`start`ですが、トリガーとなる要素のどの部分がブラウザのどの部分にきたらアニメーションを開始するという指定の仕方になります。
例えば2つ目のアニメーションの場合、`trigger`に指定した`class="middle"`の一番下の部分がブラウザの一番上に(ブラウザから見えなくなるとき)来たときにアニメーションを開始するという意味になります。
`top` `center` `bottom`で指定可能(%でも可能)になります。

また`scrollTrigger:{}`内に`markers: true`と記入するとマーカーを表示できアニメーションが開始する位置を確認できるので調整したいときにおすすめです。

```javascript title="JavaScript" showLineNumbers
scrollTrigger: {
  trigger: ".middle", //アニメーションが始まるトリガーとなる要素
  start: "bottom top", //アニメーションが始まる位置を指定
  markers: true, //マーカーの表示
},
```

マーカー表示後の画面

<Video src="/articles/gsap-scrolltrigger-flow-2.mp4" />

## 終わりに

今回は簡単ではありますが、`ScrollTrigger`を使いスクロールアニメーションを実装してみました。
GSAPと同じ会社が開発したこともあり、応用がききやすくまた簡単に実装ができるため重宝しております。
また、`ScrollTrigger`の繰り返し処理をする方法の記事も書きましたので、合わせて読んでいただけると幸いです！

<InternalLink slug="scrolltrigger-foreach" />


---

## 【Rails】マイグレーションファイルで外部キー、インデックスを設定する方法

- URL: https://blog.to-ko-s.com/articles/rails-migration
- 著者: 西原月熙
- 公開日: 2022-09-11
- タグ: Rails

> Railsのマイグレーションファイルで外部キー制約・インデックス・ユニーク制約を設定する方法を解説。references での基本設定から、on_delete/on_update オプション、複合ユニーク制約まで、実践的なコード例付きで紹介します。


## はじめに

### この記事の概要

こんにちは、Rubyをメインで書いている株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、マイグレーションファイル内で外部キー制約やインデックスの設定をする方法を説明します！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `$ rails g model User`や`$ rails g migration`で作成される`20220711134216_create_users.rb`のようなファイルのことだね！
</SpeechBubble>

## 外部キー制約とは？

![外部キー制約の具体例](/articles/90cbbcbf25488c48776d58534b80bc72-1024x403.webp)

外部キー制約とは、外部キーに対して親テーブルのIDとして存在するものしか指定できないようにする制約のことです。
`users`テーブルと`tweets`テーブルが1対多の関係だとすると、下記画像のような関係になります！

外部キー制約を指定することで、データの整合性をより正確にできます😎

## インデックスとは？

超簡単に説明すると、カラムに指定すると、データを取得する時に早くなるものです！
また、ユニーク（一意）制約をかけることも可能です！
ここで詳しく説明するとかなり長くなってしまうので、詳しく知りたい方はググってみてください🙇‍♂️

### 対象読者

- マイグレーションファイルに外部キー制約を指定したい方
- マイグレーションファイルにインデックス・ユニーク制約を指定したい方

## 外部キー系

### references

よく使用される`references`には、下記のように`foreign_key: true`を入れるだけで完了です！

```ruby title="tweetsテーブルのマイグレーションファイル"
class CreateTweets < ActiveRecord::Migration[7.0]
  def change
    create_table :tweets do |t|
      t.references :user, null: false, foreign_key: true
      t.string :body, null: false

      t.timestamps
    end
  end
end
```

今まで入れてなかった人は、とりあえず書いておいた方が無難です！

{/* prettier-ignore */}
<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `foreign_key: true`が無くても、モデルファイル(`user.rb`)で`has many tweets`とすればリレーション自体は可能だけど、意図しない値の混入を防ぐためにも設定しておこう！
</SpeechBubble>

また、外部キー制約を詳細にカスタマイズすることもできます！

```ruby title="tweetsテーブルのマイグレーションファイル" {4}
class CreateTweets < ActiveRecord::Migration[7.0]
  def change
    create_table :tweets do |t|
      t.references :user, null: false, foreign_key: { on_update: :cascade, on_delete: :cascade }
      t.string :body, null: false

      t.timestamps
    end
  end
end
```

`on_update`は、親のID（この場合は`user.id`）が変更された場合にどうするかの挙動を決めています。
`:cascade`は、親の変更に合わせるという意味です！他にも `:nullify`（NULLを設定）や `:restrict`（親の変更を禁止）などがあります。
`on_delete`も同様に、親のIDが削除された際の挙動の設定です！

### 後から設定する場合

テーブル作成の際に忘れてしまった場合や、後で制約を変更したい場合は下記のように記述すればOKです！

```ruby title="tweetsテーブルのマイグレーションファイル" {3}
class AddForeignKeyTweets < ActiveRecord::Migration[7.0]
  def change
    add_foreign_key :tweets, :users, column: :user_id, on_update: :cascade, on_delete: :cascade
  end
end
```

逆に削除したい場合は下記のような記述です！

```ruby title="tweetsテーブルのマイグレーションファイル" {3}
class RemoveIndexTweets < ActiveRecord::Migration[7.0]
  def change
    remove_foreign_key :tweets, :users, column: :user_id
  end
end
```

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `add_foreign_key`か`remove_foreign_key`の違いだね！
</SpeechBubble>

## インデックス系

### 基本形

インデックスに関しては、つけたいカラムに対して`index: true`と記述するだけです！

```ruby title="tweetsテーブルのマイグレーションファイル" {5}
class CreateTweets < ActiveRecord::Migration[7.0]
  def change
    create_table :tweets do |t|
      t.references :user, null: false, foreign_key: true
      t.string :body, null: false, index: true

      t.timestamps
    end
  end
end
```

`references`の場合は、自動でインデックスが付いているので特になにもしなくてOKです！

### ユニーク制約

ここからはユニーク制約です！
テーブル設計の際に、`has_one`(1対1)の実装をする時があると思います。
この際に同じ親IDをもつレコードは要らないのでユニーク制約を下記のように設定します！

```ruby title="user_informationsテーブルのマイグレーションファイル" {4}
class CreateUserInformations < ActiveRecord::Migration[7.0]
  def change
    create_table :user_informations do |t|
      t.references :user, null: false, foreign_key: true, index: { unique: true }
      t.string :body, null: false

      t.timestamps
    end
  end
end
```

`index: { unique: true }`の部分ですね！
こうするだけでユニーク制約がかかります！

### 複合ユニーク制約

お次は複数のカラムに対するユニーク制約です！
例えば、お気に入り機能を実装する際に「同じユーザーが1つの投稿に2回以上お気に入りをさせない」場合に必要かと思います！

```ruby title="favoritesテーブルのマイグレーションファイル" {9}
class CreateFavorites < ActiveRecord::Migration[7.0]
  def change
    create_table :favorites do |t|
      t.references :user, null: false, foreign_key: true
      t.references :tweet, null: false, foreign_key: true

      t.timestamps
    end
    add_index :favorites, [:user_id, :tweet_id], unique: true
  end
end
```

9行目のような記述をすることで、複合ユニーク制約の実装ができます！
2つのカラムにまたがる設定のため、別途設定のための文書を記述してあげる必要があります！

### 後から設定する場合

こちらも外部キー制約と同じく下記の様な形になります！
削除もまとめて書いちゃいます！

```ruby title="favoritesテーブルのマイグレーションファイル" {3,7}
class AddIndexTweets < ActiveRecord::Migration[7.0]
  def up
    add_index :favorites, [:user_id, :tweet_id], unique: true
  end

  def down
    remove_index :favorites, [:user_id, :tweet_id], unique: true
  end
end
```

## 終わりに

今回はモデルファイルでは無く、DB側での制約を紹介しました！
ユニーク制約の場合、アプリケーション側(モデルファイル)で同様のバリデーションをかけないとエラーになってしまいますので注意してください（ex: `validates :column_name, uniqueness: true`）
アプリケーション側でちゃんとvalidationをかけることも大事ですが、DB側でも今回のような制約を加えることでより堅牢なサービスを目指しましょう😆
Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んでみてください🙇‍♂️


---

## 【CSS】display:gridを使って爆速でレスポンシブ対応させよう!

- URL: https://blog.to-ko-s.com/articles/grid-layout
- 著者: 杉田侑祐
- 公開日: 2022-09-04
- タグ: HTML, CSS

> CSSのdisplay:gridを使ったレスポンシブ対応の方法を解説します。grid-template-areasを活用した直感的なレイアウト指定と、便利なGridジェネレーターも紹介します。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はCSSの`display: grid`を使いレスポンシブ対応させてみようと思います。
IEのサポート対応が終了したので、これからはGrid Layoutメインでレスポンシブ対応させても良いのかなと感じました。

### 対象読者

- CSS/HTMLでGrid Layoutを使ってレスポンシブ対応させたい方

## Grid Layoutを使ってみよう

### 完成後の画面

今回作っていく画面はこんな感じです。

<Video src="/articles/grid-layout.mp4" />

複雑なレイアウトなどのときにかなり早く実装できるのでFlexboxを使用するのも良いですが、Gridも一度使ってみてもいいと思います。
少しハードルが高いなと感じると思いますが、使ってみるとかなり楽だなと感じました。

### Grid Layoutを使おう

Grid LayoutはFlexboxと違い2次元での指定方法になります。
概要の詳しい説明は下記になります。

<ExternalLink url="https://qiita.com/kura07/items/e633b35e33e43240d363" />

コードの紹介になります。

```html title="HTML" showLineNumbers
<div class="grid-container">
  <div class="grid-area1"><p>grid1</p></div>
  <div class="grid-area2"><p>grid2</p></div>
  <div class="grid-area3"><p>grid3</p></div>
  <div class="grid-area4"><p>grid4</p></div>
  <div class="grid-area5"><p>grid5</p></div>
</div>
```

```css title="CSS" showLineNumbers
p {
  color: white;
  font-size: 80px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px 8px;
  grid-template-areas:
    "grid1 grid1 grid2"
    "grid3 grid4 grid4"
    "grid3 grid5 grid5";
  min-height: 100vh;
}

.grid-area1 {
  grid-area: grid1;
  background: red;
}
.grid-area2 {
  grid-area: grid2;
  background-color: green;
}
.grid-area3 {
  grid-area: grid3;
  background-color: black;
}
.grid-area4 {
  grid-area: grid4;
  background-color: blue;
}
.grid-area5 {
  grid-area: grid5;
  background-color: blueviolet;
}
```

コードの解説ですが、親クラスの`.grid-container`にエリアの指定をしていきます。
まずは親クラスに`display: grid`を指定し、その次に列と行の指定です。

- 列: `grid-template-columns`
- 行: `grid-template-rows`

`fr`は等分という指定方法になります。
1つのエリアは等分にしてねということになります。
`px`などで指定することも可能です。
`gap`でエリアとエリアの隙間を指定します。
`grid-template-areas`でエリアの箇所の指定です。
ここで行いたいレイアウトを上から決めていくことができます。

上記からレスポンシブ対応させようとするとどうなるかというと、`grid-template-areas`内を変えるだけでできます。

```css title="CSS" showLineNumbers
@media screen and (max-width: 500px) {
  .grid-container {
    grid-template-areas:
      "grid1 grid1 grid1"
      "grid2 grid2 grid2"
      "grid3 grid3 grid3"
      "grid4 grid4 grid4"
      "grid5 grid5 grid5";
  }
}
```

上記のように`grid-template-areas`内をレスポンシブ後のようにエリア指定してしまえば簡単に対応できます。
またなかなかレイアウトを考えながらプロパティを当てていくのは時間がかかるので、私はGridジェネレーターのようなものを使い実装しています。

<ExternalLink url="https://grid.layoutit.com/" />

![Gridジェネレーターでエリアをドラッグしてレイアウトを作成する画面](/articles/8351bc0f488d0a1c64174022a142dd46.webp)

エリア内でドラッグして自分で好きなようにレイアウトを指定してエリア名を決め、右のHTMLとCSSをコピペするだけで実装完了です。

## さいごに

今回はCSSの`Grid Layout`を使いレイアウトのレスポンシブ対応を行ってみました。
`Grid Layout`を使う前はハードルが高いなと感じていましたが、ジェネレーター等を使えば手軽に使えるなと感じました。
また複雑なレイアウトを可能にするので、実装の幅も広がるなーと感じました。


---

## 【Rails・Tailwind】file_field使用時にボタンのデザインを変えてみよう！

- URL: https://blog.to-ko-s.com/articles/rails-file-field-design
- 著者: 寺田拓真
- 公開日: 2022-08-13
- タグ: Rails, Tailwind CSS

> Railsのファイル選択ボタンのデザインをtailwindcssを使用して変更する方法を解説しています。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOS新入りのたくまです！
今回は、`Rails`で`file_field`を使用する際、ファイル選択ボタンのデザインを変更する方法を紹介します。

`Rails`で画像ファイルを選択する際に`file_field`を使用される方も多いと思います。
ただ、下記の画像のようなデフォルトのデザインをそのまま使うのは味気ないので、
「サイトに合わせたデザインにしたい！」と思うことはありませんか？
![デフォルトのファイル選択ボタン](/articles/rails-file-select-.webp)
そんな時は、これから紹介する方法で思い通りのデザインに仕上げることが可能です！

### 対象読者

- `Rails`で`file_field`使用の際にファイル選択ボタンのデザインを変更したい方
- `Tailwind`を勉強中の方

## デザインを変更する

それでは早速、デザインを変更したいと思います！
今回は`Tailwind`を使用してデザインを変更していきます。

### デフォルトデザインの記述

クラスなど特に指定しないままの記述です。

```erb title="sample.erb" showLineNumbers
<%= f.file_field :"#" %>
```

### デザイン変更の記述

上記の記述に次の操作を行いましょう！

1. `file_field`タグを`label`タグで囲む
2. `file_field`タグと`label`タグの間に表示したい文字や画像を挿入する
3. `file_field`タグの`class`は`hidden`にして`label`タグの`class`にデザインを指定する

実際に記述するとこのようになります！

```erb title="sample.erb" showLineNumbers
<label class="mt-2 sm:mt-0 py-2 w-[212px] sm:w-[164px] h-8 border border-primary-300 bg-white text-primary-300 rounded-[3px] text-xs flex justify-center items-center">
  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="13"><path data-name="パス 204" d="M16.5 11.167a1.4 1.4 0 0 1-1.455 1.333H1.955A1.4 1.4 0 0 1 .5 11.167V3.833A1.4 1.4 0 0 1 1.955 2.5h2.909l1.455-2h4.364l1.455 2h2.909s1.453.6 1.453 1.333Z" fill="current" stroke="#0087e6" stroke-linecap="round" stroke-linejoin="round"/><path data-name="パス 205" d="M12.426 6.915a3.926 3.926 0 0 1-7.852 0 4.007 4.007 0 0 1 3.393-3.89 2.844 2.844 0 0 1 .533-.036 3.926 3.926 0 0 1 3.926 3.926Z" fill="current" stroke="#0087e6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span class="ml-5">画像を選択する</span>
  <%= f.file_field :"#", class: "hidden" %>
</label>
```

### 記述変更後のデザイン

上記の記述で表示されるファイル選択ボタンがこちらです！
![Tailwindでデザインを変更したカメラアイコン付きファイル選択ボタン](/articles/css-file-select-design.webp)
無事、デザインが変更されました！
今回はカメラのアイコン画像を挿入したデザインに変更してみました。

ここをクリックすることで、問題なくファイルを選択することが出来ます。
![カスタムデザインのボタンをクリックしてファイルを選択する動作](/articles/select-move.gif)

ポイントは`erb`タグの`class`を`hidden`とすることで、デフォルトのデザインを消すことができます。
その後は`label`タグに`class`を指定して、自分の思い通りのデザインになるよう記述していきましょう！

## 終わりに

今回は`Rails`で`file_field`を使用する際に、ファイル選択ボタンのデザインを変更する方法を紹介しました。
上記の方法でサイトに合わせたデザインで作成することが可能になるので、ぜひお試しください！
また、`Rails`に関してもっと知識を深めたいという方は以下の書籍がおすすめです。
実務にも役立つ情報が多くあり、Rails初学者の方の手助けになってくれる一冊です。
<ExternalLink url="https://amzn.to/3YuXqEF" />


---

## 【CSS】CSSテキストアニメーション!! keyframesでテキストをフェードインさせる方法

- URL: https://blog.to-ko-s.com/articles/keyframes-text-fade-in
- 著者: 杉田侑祐
- 公開日: 2022-05-16
- タグ: HTML, CSS

> CSSのkeyframesを使ってテキストをフェードインさせるアニメーションの実装方法を解説します。ヒーローセクションなどで活用できるテクニックです。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSエンジニアのスギタです！
今回はCSSの`@keyframes`を使いテキストのフェードインアニメーションを行っていきたいと思います。
ヒーローセクション等で使えるので是非参考にしてください。

### 対象読者

- CSS/HTML等でアニメーションを実装させたい方

## フェードインアニメーション

### 完成アニメーション

今回行っていくアニメーションは下記のようになります。
テキストが徐々に浮かび上がってくるようなアニメーションになります。

<Video src="/articles/keyflames-text-fade-in.mp4" />

### コードの紹介

```html title="HTML" showLineNumbers
<body>
  <p class="text">CREATE</p>
  <p class="text">PLAY</p>
  <p class="text">ENJOY</p>
  <p class="title">
    <span>T</span><span>O</span><span>K</span><span>O</span><span>S</span><span>.</span><span>i</span><span>n</span
    ><span>c</span>
  </p>
</body>
```

```css title="CSS" showLineNumbers
.title span {
  /*各テキストにanimationを設定*/
  color: transparent; /*テキストを透明にしてtext-shadowだけ表示する*/
  animation-name: blur-title;
  animation-duration: 8s;
  animation-fill-mode: forwards;
}

/*一文字ずつ遅延させる*/
span:nth-child(1) {
  animation-delay: 0.15s;
}
span:nth-child(2) {
  animation-delay: 0.3s;
}
span:nth-child(3) {
  animation-delay: 0.45s;
}
span:nth-child(4) {
  animation-delay: 0.6s;
}
span:nth-child(5) {
  animation-delay: 0.75s;
}
span:nth-child(6) {
  animation-delay: 0.9s;
}
span:nth-child(7) {
  animation-delay: 1.05s;
}
span:nth-child(8) {
  animation-delay: 1.2s;
}
span:nth-child(9) {
  animation-delay: 1.35s;
}

/* フェードインの設定 */
@keyframes blur-title {
  0% {
    text-shadow: 0 0 100px #ffffff;
    opacity: 0;
  }
  5% {
    text-shadow: 0 0 90px #ffffff;
  }
  15% {
    opacity: 1;
  }
  20% {
    text-shadow: 0 0 0px #ffffff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0px #ffffff;
  }
}

.text {
  /*各テキストにanimationを設定*/
  color: transparent; /*テキストを透明にしてtext-shadowだけ表示する*/
  animation-name: blur-text;
  animation-duration: 8s;
  animation-fill-mode: forwards;
}

/* フェードインの設定 */
@keyframes blur-text {
  0% {
    text-shadow: 0 0 100px #ffffff;
    opacity: 0;
  }
  5% {
    text-shadow: 0 0 90px #ffffff;
  }
  10% {
    opacity: 1;
  }
  30% {
    text-shadow: 0 0 0px #ffffff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0px #ffffff;
  }
}
```

上記のようになります。

解説するとフェードイン設定部分で`text-shadow`でぼやけさせながら`opacity`で表示させ、`text-shadow`をなくしテキストをくっきりさせるようなアニメーションになります。
フェードインの設定内のタイミング指定の％の数値をいじればタイミングをずらすことができるようになります。
また、`animation-fill-mode: forwards;`でアニメーションの開始時と終了時の状態を指定しています。

## 終わりに

今回はCSSの`@keyframes`を使いフェードインアニメーションを行ってみました。
`@keyframes`では自由度がそれなりに高いのでちょっとしたアニメーションであれば`@keyframes`で充分だと思いました。
ヒーローセクション等で目立たせたい箇所に行うだけで印象が変わるなと感じました。
是非参考にしていただけたら幸いです！！


---

## 【初学者向け】GSAP Timelineを使ってみた!!!

- URL: https://blog.to-ko-s.com/articles/timeline-text-animation-from-gsap
- 著者: 杉田侑祐
- 公開日: 2022-05-16
- タグ: JavaScript

> GSAPのTimelineを使用して、複数のアニメーションを連続実行する方法を解説します。delayを使わずにアニメーションを連結できる便利な機能です。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSエンジニアのスギタです！
今回は前回に引き続きGreenSock社が開発したGreenSock Animation Platform(GSAP)を使い、前回作成したテキストアニメーションに`Timeline`を使ってアニメーションの連結をしてみたいと思います。

前回の記事

<InternalLink slug="text-animation-from-gsap" />

<Callout variant="warning">
  前回作成したものを応用するので、前回の記事をご覧になっていない方はご覧いただけると幸いです🙇‍♂️
</Callout>

### 対象読者

- CSS/HTML等にアニメーションを実装したい方

## GSAPで連続するアニメーション

### 前回の課題

まずは前回のコードの確認です。

```html title="HTML" showLineNumbers
<div class="background-color">
  <div class="text-area">
    <h1 class="text">CREATE PLAY ENJOY</h1>
    <p class="text">作って、遊んで、楽しむ</p>
    <h1 class="title">
      <span>T</span>
      <span>O</span>
      <span>K</span>
      <span>O</span>
      <span>S</span>
      <span>&nbsp</span>
      <span>i</span>
      <span>n</span>
      <span>c</span>
      <span>.</span>
    </h1>
  </div>
</div>
```

```css title="CSS" showLineNumbers
html,
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.text-area {
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 50px;
  margin: 0;
  text-align: center;
  letter-spacing: 1px;
}

p {
  font-size: 16px;
  margin: 0;
  text-align: center;
}

.background-color {
  width: 100%;
  height: 100vh;
  background-color: black;
  opacity: 0;
  position: relative;
}

.text {
  opacity: 0;
  transform: translateY(20px);
  color: #ffffff;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title span {
  opacity: 0;
  color: #ffffff;
}
```

```javascript title="JavaScript" showLineNumbers
//1秒かけ黒色背景を表示
gsap.to(".background-color", {
  duration: 1, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
})

//.textを1秒かけ出現させ1秒かけ逆再生させ初期状態に戻す
gsap.to(".text", {
  delay: 1, //アニメーションの初期遅延（アニメーションが開始されるまでの指定）
  duration: 1, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
  y: "0px", //cssでY軸20pxから完了時0pxへの指定
  yoyo: true, //trueにすることで上記で指定したY軸の動きの逆再生
  repeat: 1, //yoyoのリピート回数
  //時差の設定
  stagger: {
    each: 0.5, //ディレイ時間
  },
})

//初期遅延3.5秒かけてから.titleを表示
gsap.to(".title span", {
  delay: 3.5, //アニメーションの初期遅延（アニメーションが開始されるまでの指定）
  duration: 1.5, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
  //時差の設定
  stagger: {
    each: 0.2, //ディレイ時間
    from: "start", //出現方法の指定
  },
})
```

前回`gsap.to`メソッドを使いアニメーションを実装させました。
背景のアニメーションが終わってから、テキストアニメーションを行うというものでした。
`delay`プロパティーを使い1つ1つのアニメーションに初期遅延を入れアニメーションを実装しました。

ですが上記の`delay`を設けアニメーションを個別で動かそうとすると、最初に行われる背景のアニメーションの`duration`が仮に10秒になってしまったら、設定している`delay`の秒数が合わなくなりアニメーションが崩れてしまいます。

連続するアニメーションの場合は個別のアニメーションを使うのは好ましくありません。
`Timeline`を使うのが好ましいです。

### Timeline

上記でも説明した通りアニメーション1つ1つに`delay`時間を設けアニメーションを連続させるのは管理が難しくなります。

`Timeline`を使えば連続したアニメーションを行うことが可能です。
`Timeline`を使った書き方は下記になります。

```javascript title="JavaScript" showLineNumbers
// Timeline使用時

//1.5秒かけ黒色背景を表示
const tl = gsap.timeline()

tl.to(".background-color", {
  duration: 1.5, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
})
  //.textを1.5秒かけ出現させ1.5秒かけ逆再生させ初期状態に戻す
  .to(".text", {
    duration: 1.5, //アニメーションの時間の設定
    opacity: 1, //表示状態の指定
    y: "0px", //cssでY軸20pxから完了時0pxへの指定
    yoyo: true, //trueにすることで上記で指定したY軸の動きの逆再生
    repeat: 1, //yoyoのリピート回数
    //同じclass名の要素に対するスタガー（ずらし）設定
    stagger: {
      each: 0.5, //ディレイ時間
    },
  })
  //1.5秒かけtitleを表示
  .to(".title span", {
    duration: 1.5, //アニメーションの時間の設定
    opacity: 1, //表示状態の指定
    //同じclass名の要素に対するスタガー（ずらし）設定
    stagger: {
      each: 0.2, //ディレイ時間
      from: "start", //出現方法の指定
    },
  })
```

このようになります。
`Timeline`を使用すると上の処理が終わると次の処理が開始されるようになります。
`delay`を設定せずに連続するアニメーションを行うことが可能になります。

また`Timeline`を使用していても処理させる時間やラベルを指定することが可能になり、より複雑な処理が可能となります。
気になる方は下記を参照してみてください。

オフィシャルサイト

<ExternalLink url="https://greensock.com/docs/v3/GSAP/Timeline" />

## さいごに

今回は簡単ではありますが、`Timeline`を使い連続したアニメーションを行ってみました。
シンプルな記述で複雑なアニメーションが実装できると感じました。
公式にも載っている通りかなり直感的だと思いました。


---

## WebP！srcset！picture！Retina対応！HTMLで画像を最適化して表示する

- URL: https://blog.to-ko-s.com/articles/html-img
- 著者: 成岡拓哉
- 公開日: 2022-03-28
- タグ: HTML, CSS

> HTMLで画像を最適化して表示する方法を解説。WebPフォーマットの活用、srcset属性によるレスポンシブイメージ、pictureタグでのRetina対応など、画像の最適化テクニックを紹介します。


こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです

普段はチームメンバーと協力しながら、Web制作のデザインからコーディング業務をおこなっています。
その中でいつも思うのですが、ウェブサイトにおける画像はとても重要な役割を担っていますよね。
サイトのファーストビューだったり投稿のサムネイルだったり、はたまた文章での説明の補助的な役割にイラストや写真を使うかと思います。
インパクトのあるデザインや分かりやすいコンテンツ作りには画像は欠かせませんね。

そんな画像ですが、取り扱いには注意が必要です。
例えば、大きいサイズの画像や多量の画像を使用するとデータ量が多くなりサイトの表示速度が遅くなることに繋がります。
表示速度が遅いと、ユーザビリティが悪くなり制作したサイトのコンテンツがユーザーに十分に伝わらない可能性があります。
そのため、次世代の画像形式の`WebP`やApple製品のRetinaディスプレイに対応するために`srcset`を用いるなどして、画像の最適化は必須になってきます。

画像の最適化に関しては、

- 画像の軽量化
- 適切なフォーマット
- レスポンシブイメージ
- 画像の遅延読み込み・不要な画像は読み込まない

などがあげられます。

今回はその中でもHTMLに関する部分について抜粋して紹介したいと思います。
HTMLで表示する画像のデータサイズやフォーマットを最適化していきます。

## imgタグ(一般的)

まずは一般的なの`img`タグを用いる方法です。

```html title="HTML" showLineNumbers
<img src="building01-800w.jpg" alt="建物" />
```

この記述だと、どんな時でも同じサイズの画像が表示されます。
パソコンでもタブレットでもスマートフォンでも同じ画像なので、大きいサイズの画像を用意しないといけません。
場合によっては横幅1920pxを超える大きさの画像を用意して、それをスマートフォンでも表示するとなると、かなり無駄なのがわかるかと思います。

最適化するには、圧縮した画像を使用するしか手はありません。
効果はいまひとつ、です。

## 画面サイズによって表示する画像を変更する（sizes属性、srcset属性）

ブラウザの画面幅によってサイズが違う画像を出し分けしたいのであれば、`img`タグの`srcset`属性と`sizes`属性を使用すればOKです。

```html title="HTML" showLineNumbers
<img
  srcset="building01-400w.jpg 400w, building01-600w.jpg 600w, building01-800w.jpg 800w"
  sizes="(max-width: 400px) 400px, (max-width: 600px) 600px, 800px"
  src="building01-800w.jpg"
  alt="建物"
/>
```

### sizes属性

`sizes`属性は、表示する画像のサイズを指定できます。
上記の参考コードのように、ビューポートを用いて指定することが一般的です。

参考コードを解説すると、

- 画面サイズが400px以下のときは400pxで表示
- 画面サイズが401px以上600px以下のときは600pxで表示
- 画面サイズがそれ以外の場合は800pxで表示

といった感じです。

### srcset属性

`srcset`属性は、表示する画像の種類を指定できます。
上記の参考コードのように、画像のパス名と横幅の大きさを指定します。
横幅の大きさの単位は`px`ではなく`x`か`w`です。
`w`は`px`を表し、`x`はピクセルの密度を表します。（Retinaディスプレイ関係）

参考コードを解説すると、

- `building01-400w.jpg`という画像を400pxで表示
- `building01-600w.jpg`という画像を600pxで表示
- `building01-800w.jpg`という画像を800pxで表示

といった感じです。

これで画面幅によって適切な画像を出し分けできるようになり、大きい画像を使い回す無駄がなくなりました。

## Retinaディスプレイに対応する（srcset属性）

次に先程と同様に`img`タグの`srcset`属性を使用してRetinaディスプレイに対応してみます。

`srcset`属性を使えば、MacやiPhoneのRetinaディスプレイにも対応した高画質も画像を表示できます。
また逆に、Retinaディスプレイじゃないときに小さいサイズの画像を表示できるようになります。

```html title="HTML" showLineNumbers
<img src="building02-800w.jpg" srcset="building02-800w@2x.jpg 2x" alt="建物" />
```

参考コードを解説すると、`building02-800w@2x.jpg`という画像を`2x`の密度で表示といった感じです。

これでRetinaディスプレイに対応できました。

## pictureタグ（アートディレクション）

`picture`タグを使用すれば、異なる画像の出し入れも可能になります。
`sizes`属性や`srcset`属性は1つの`img`タグ内で設定していましたが、`picture`タグはよりわかりやすく記述できます。

```html title="HTML" showLineNumbers
<picture>
  <source media="(max-width: 400px)" srcset="building01-400w.jpg" />
  <source media="(max-width: 600px)" srcset="building02-600w.jpg" />
  <source media="(min-width: 601px)" srcset="building01-800w.jpg" />
  <img src="building01-800w.jpg" alt="建物" />
</picture>
```

パソコンとスマートフォンで表示させる画像を変えるには、メディアクエリでディスプレイサイズを指定しその範囲で`display: none;`をして切り替えることもできるかと思います。
ですがそれだと、不要な画像を読み込んでからdisplay: none; しているので、無駄な読み込みが発生します。
良くないです。

画像の切り替えには`picture`タグを使いましょう。

## pictureタグ（アートディレクション+Retina対応）

`picture`タグを使って、アートディレクションしつつRetina対応した例です。

```html title="HTML" showLineNumbers
<picture>
  <source media="(max-width: 400px)" srcset="building01-400w.jpg 1x, building01-400w@2x.jpg 2x" />
  <source media="(max-width: 600px)" srcset="building02-600w.jpg 1x, building02-600w@2x.jpg 2x" />
  <source media="(min-width: 601px)" srcset="building01-800w.jpg 1x, building01-800w@2x.jpg 2x" />
  <img class="test-class" src="building01-800w.jpg" alt="建物" />
</picture>
```

ちなみに、`picture`タグに`class`属性を付与したい場合は、`img`タグの中に書きます。

## pictureタグでWebPを使う

最後に`picture`タグを使って、`WebP`という形式の画像を表示させてみましょう！
`WebP`とは、あのGoogleが開発した画像形式で、jpegやpngなどの画像形式よりも軽量でより優れた次世代の画像形式です。
SEOの審査項目にもあるくらい、画像軽量化させることの意義は大きいということです。

```html title="HTML" showLineNumbers
<picture>
  <source type="image/webp" media="(max-width: 400px)" srcset="building01-400w.webp 1x, building01-400w@2x.webp 2x" />
  <source type="image/webp" media="(max-width: 600px)" srcset="building02-600w.webp 1x, building02-600w@2x.webp 2x" />
  <source type="image/webp" media="(min-width: 601px)" srcset="building01-800w.webp 1x, building01-800w@2x.webp 2x" />
  <img src="building01-800w.jpg" alt="建物" />
</picture>
```

`source`タグに`type`属性を追加するだけなので簡単ですね。
`WebP`を使えば、画像ファイルサイズをかなり軽量化できます。

## まとめ

今回は、HTMLで画像を最適化して表示する方法について解説してきました！
`img`タグ内の`srcset`属性や、`sizes`属性、また`WebP`といった次世代の画像形式などご紹介いたしました。
その方法の中からその都度方法を変えて画像の最適化してみてください！

初級からより踏み込んだHTMLの学習は以下の書籍がおすすめです。
ぜひ御覧ください。

<ExternalLink url="https://amzn.to/3WNx0wF" />


---

## 【Javascript】Javascriptでゆっくりな自動スクロールを実装！

- URL: https://blog.to-ko-s.com/articles/js-smooth-scroll
- 著者: 成岡拓哉
- 公開日: 2022-03-20
- タグ: JavaScript

> JavaScriptでスムーススクロールを実装する方法を解説します。jQueryを使わないバニラJavaScriptでの実装方法を紹介します。


## はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回のテーマは「JavaScriptでゆっくりな自動スクロールを実装！」です。
jQueryを使わないバニラJavaScriptで実装する方法を説明します。

### 対象となる方

- HTMLやCSS、JavaScriptを勉強中の方
- サイトをよりリッチにしたいという方
- ゆっくり動く自動スクロールを実装したい方

## JavaScriptの自動スクロールについて

![CSSスムーススクロールのブラウザ対応状況](/articles/js-scroll-auto.webp)

CSSのスムーススクロールも、最近のアップデートでSafariでも使えるようになりましたが、まだまだ対応していないブラウザやバージョンが多いので、JavaScriptのスムーススクロールを覚えておくと良いと思います！

## コーディング

さっそく実装に移っていきます！

```html title="HTML" showLineNumbers
<ul class="c-menu">
  <li class="c-menu__item">
    <a class="c-menu__link" href="#link01">link01</a>
  </li>
  <li class="c-menu__item">
    <a class="c-menu__link" href="#link02">link02</a>
  </li>
  <li class="c-menu__item">
    <a class="c-menu__link" href="#link03">link03</a>
  </li>
</ul>
<div class="c-space"></div>
<div id="link01" class="c-content">link01のコンテンツ</div>
<div id="link02" class="c-content">link02のコンテンツ</div>
<div id="link03" class="c-content">link03のコンテンツ</div>
<div class="c-space"></div>
```

```css title="CSS" showLineNumbers
.c-menu {
  display: flex;
}

.c-menu__item {
  list-style: none;
}

.c-menu__link {
  border: 1px solid #dddddd;
  color: #333333;
  padding: 10px 40px;
  text-decoration: none;
}

.c-space {
  height: 100vh;
}

.c-content {
  align-items: center;
  border-top: 1px solid #dddddd;
  display: flex;
  height: 200px;
  justify-content: center;
}
```

HTMLとCSSは簡単に、こんな感じです。
ページ上部にメニューボタンと、真ん中に余白、下の方にコンテンツを3つ並べました。

いよいよJavaScriptです。
全コードはこんな感じです。

```javascript title="main.js" showLineNumbers
const scrollLinks = document.querySelectorAll('a[href^="#"]')
scrollLinks.forEach((scrollLink) => {
  scrollLink.addEventListener("click", (e) => {
    e.preventDefault()
    const hrefLink = scrollLink.getAttribute("href")
    const targetContent = document.getElementById(hrefLink.replace("#", ""))
    const rectTop = targetContent.getBoundingClientRect().top
    const positionY = window.scrollY
    const target = rectTop + positionY
    window.scrollTo({
      top: target,
      behavior: "smooth",
    })
  })
})
```

まずはじめに、`querySelectorAll`メソッドで該当の要素をまとめて引っ張ってきます。
今回は、クリックするボタンの要素を持ってきます。

```javascript title="main.js" showLineNumbers
const scrollLinks = document.querySelectorAll('a[href^="#"]')
```

その要素1つ1つに対して処理をするように、`forEach`メソッドを使います。
引数に`scrollLink`を渡し、関数の中でもその要素の情報（`scrollLinks`の情報）が使えるようにします。

```javascript title="main.js" showLineNumbers
scrollLinks.forEach((scrollLink) => {})
```

そうしたら、クリックイベントを発生させます。
その際に、イベントのデフォルトの動作を無くしてあげる必要があります。

```javascript title="main.js" showLineNumbers
e.preventDefault()
```

ていうやつです。
今回は、ボタンを押すと勝手にリンク先まで移動してしまうデフォルトの動作を無くします。
最初のうちは書くのを忘れがちなので、しっかりチェックしておきましょう。

次に、引っ張ってきた要素の情報を成形していきます。
必要なのは、遷移先のリンクと遷移先の位置なのでこんな感じです。

```javascript title="main.js" showLineNumbers
const hrefLink = scrollLink.getAttribute("href")
const targetContent = document.getElementById(hrefLink.replace("#", ""))
const rectTop = targetContent.getBoundingClientRect().top
const positionY = window.scrollY
const target = rectTop + positionY
```

`getAttribute`メソッドで`href`属性の情報を取り、その情報から`#`を抜くために`replace`メソッドを使用します。

必要な情報はすべて揃いました。
いよいよ、ゆっくり自動でスクロールする、スムーススクロールの処理です。

```javascript title="main.js" showLineNumbers
window.scrollTo({
  top: target,
  behavior: "smooth",
})
```

`window`オブジェクトに対して、`scrollTo`メソッドを使用します。
プロパティに`behavior: "smooth"`を指定することでゆっくり自動でスクロールするという仕組みです。
`behavior: "auto"`にするとデフォルトの動作をします。
（瞬間移動のやつ）

これで完了です。

## まとめ

今回は、JavaScriptでゆっくりな自動スクロールを実装！について解説してきました。
これがあるだけでユーザーの体験が高まりリッチなサイトになるのでおすすめです！

Web制作におけるJavaScriptの基礎固め学習には以下の書籍がおすすめです。
是非ご覧になってJavaScriptの知識を深めていきましょう。

<ExternalLink url="https://amzn.to/3jYGsPe" />


---

## 【初学者向け】GSAPでテキストアニメーションをやってみた！！

- URL: https://blog.to-ko-s.com/articles/text-animation-from-gsap
- 著者: 杉田侑祐
- 公開日: 2022-03-20
- タグ: JavaScript

> この記事では、GreenSock社が開発したGreenSock Animation Platform(GSAP)を使いテキストアニメーションを学ぶことができます。 基本的な使い方から学び、実際にテキストアニメーションを実装する方法を紹介しています。


## はじめに

### この記事の概要

こんにちは、株式会社TOKOSエンジニアのスギタです！ 今回は、GreenSock社が開発したGreenSock Animation Platform(GSAP)を使いテキストアニメーションを行ってみようと思います。
アニメーションはハードル高いなーと感じていた自分ですが、公式HPに「コードを使用したアニメーションは、最初は威圧的に見えるかもしれませんが、心配しないでください。私たちのプラットフォームは、シンプルで直感的になるように設計されています。(和訳)」とあるように手軽に実装できたので、 紹介したいと思います🥺

### 対象読者

- CSS/HTML等にアニメーション実装させたい方

## GSAPの使用方法

### 使用方法

GSAPを利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。 今回はCDNを利用していきたいと思います。

オフィシャルサイト

<ExternalLink url="https://greensock.com/" />
CDNを利用する場合は下記のようになります。

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
```

<Callout variant="warning">
  GreenSock社は独自のライセンスを採用しているためご使用の際は公式ページに載っているライセンス規約を守り、ご使用してください🙇‍♂️
</Callout>

## 実装GSAPの実装

### 完成アニメーション

今回のアニメーションとしては、まず初めに白色の背景から黒色の背景になり「CREATE PLAY ENJOY」と「作って、遊んで、楽しむ」が下方向からフワッと浮き出てき、 下方向に消え、消えてから「TOKOS inc.」が左方向から徐々に出てくるというものです。
今回の完成アニメーションは下記になります。

<Video src="/articles/gsap-text-animation.mp4" />

### HTML/CSS

まずはHTML/CSSの紹介です。

```html title="HTML" showLineNumbers
<div class="background-color">
  <div class="text-area">
    <h1 class="text">CREATE PLAY ENJOY</h1>
    <p class="text">作って、遊んで、楽しむ</p>
    <h1 class="title">
      <span>T</span>
      <span>O</span>
      <span>K</span>
      <span>O</span>
      <span>S</span>
      <span>&nbsp</span>
      <span>i</span>
      <span>n</span>
      <span>c</span>
      <span>.</span>
    </h1>
  </div>
</div>
```

```css title="CSS" showLineNumbers
html,
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.text-area {
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 50px;
  margin: 0;
  text-align: center;
  letter-spacing: 1px;
}

p {
  font-size: 16px;
  margin: 0;
  text-align: center;
}

.background-color {
  width: 100%;
  height: 100vh;
  background-color: black;
  opacity: 0;
  position: relative;
}

.text {
  opacity: 0;
  transform: translateY(20px);
  color: #ffffff;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title span {
  opacity: 0;
  color: #ffffff;
}
```

画面で表示させると、何も写りません。というのも今回GSAPのTweenメソッドでも、gsap.to()というTweenメソッドを使っていくからです。

### GSAPの実装

上記で少し触れたGSAPのTweenメソッドですが、全部で４種類あります。 軽くですが紹介したいと思います。

- `gsap.to()`・・・ゴールの状態を指定します(現在の状態からのアニメーション)
- `gsap.from()`・・・スタートの状態を指定します(現在の状態に戻るアニメーション)
- `gsap.fromTo()`・・・fromとtoをあわせた指定方法（初期状態から完成状態へのアニメーション)
- `gsap.set()`・・・状態指定（cssを使わずgsap内で指定する）

今回使用するのはメソッドはgsap.toですので、上記で映らなかった初期状態からgsapを使い完了状態へアニメーションをさせるという事になります。 ではGSAPの紹介に入ります。

```javascript title="JavaScript" showLineNumbers
//1.5秒かけ黒色背景を表示
gsap.to(".background-color", {
  duration: 1, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
})

//.textを1秒かけ出現させ1.5秒かけ逆再生させ初期状態に戻す
gsap.to(".text", {
  delay: 1, //アニメーションの初期遅延（アニメーションが開始されるまでの指定）
  duration: 1, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
  y: "0px", //cssでY軸-20pxから完了時0pxへの指定
  yoyo: true, //trueにすることで上記で指定したY軸の動きの逆再生
  repeat: 1, //yoyoのリピート回数
  //時差の設定
  stagger: {
    each: 0.5, //ディレイ時間
  },
})

//初期遅延3.5秒かけてから.titleを表示
gsap.to(".title span", {
  delay: 3.5, //アニメーションの初期遅延（アニメーションが開始されるまでの指定）
  duration: 1.5, //アニメーションの時間の設定
  opacity: 1, //表示状態の指定
  //時差の設定
  stagger: {
    each: 0.2, //ディレイ時間
    from: "start", //出現方法の指定
  },
})
```

上記でもわかる通りすべて完了状態への指定の仕方になります。
これでアニメーション実装完了です！！
Tweenのオプション等はわかりやすく説明されているので、下記を参照してください！！

<ExternalLink url="https://qiita.com/takeshisakuma/items/97a7f702ec3c4f656525" />

## 終わりに

今回は簡単ではありますが、GSAPを使いテキストアニメーションを実装してみました。 でも1つ疑問が、もし背景の出現指定のdurationの時間が10秒になった場合、.titleのdelayが3.5秒なのでアニメーションが崩れてしまうような、、、 次回「GSAP Timelineを使ってみた！！！」

次回の記事

<InternalLink slug="timeline-text-animation-from-gsap" />


---

## 【Rails】定期実行をしてみよう！（whenever, cron）

- URL: https://blog.to-ko-s.com/articles/rails-periodic-execution
- 著者: 西原月熙
- 公開日: 2022-03-06
- タグ: Rails

> Railsで定期実行を実装する方法を2パターン解説。wheneverを使う方法と、cronを直接操作する方法をそれぞれサンプルコード付きで紹介します。


## はじめに

### この記事の概要

こんにちは、Rubyをメインで書いている株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、Railsで定期実行をする方法を2つ紹介しようと思います。
定期実行とは、読んで字のごとくプログラムを定期的に自動で実行することです。

定期実行ができるようになると、次のようなことが実現できます。

- 期間限定のアイテムを30日後に自動削除
- 月の初めにユーザーへメールを一斉送信

なくてはならない機能からできたら嬉しいことまで、様々なことができるようになります！
この記事を定期実行のとっかかりにしていただければ何よりです🥺
なお今回は、定期実行の実装方法を2パターン説明します！

### 対象読者

- 定期実行をしたことがない初学者

### 筆者の環境

| 技術等   | バージョン               |
| -------- | ------------------------ |
| 実行環境 | Ubuntu(dockerのコンテナ) |
| Ruby     | 2.7.4                    |
| Rails    | 6.1.4                    |

## 実装方法

### wheneverを使用した場合

まずはネットで検索した際に良く出てくる**whenever**というgemを使用した定期実行の方法を説明します。

とりあえず、前提として定期実行したい処理をrakeタスクとして作成しておきます。
rakeタスクについては、前回の記事で説明したので詳しくはそちらを読んでください🙇

<InternalLink slug="rake-task-summary" />

次に、**whenever**をインストールします。

```ruby title="Gemfile"
# 中略
gem "whenever"
```

```bash title="ターミナル"
$ bundle install
```

いつもの手順でgemをインストールしましょう！

そして、次のコマンドを実行します。

```bash title="ターミナル"
$ bundle exec wheneverize .
```

上記コマンドを実行すると、`config/schedule.rb`が作成されます。
この中に、定期実行したい処理や間隔を追記していきます。

```ruby title="config/schedule.rb"
every 1.minutes do
  rake "sample_task:taro_create"
end
```

今回は、「1分おきに`name: taro`の`User`が`create`してください」という命令になります。
(これは実際のアプリだとすると全く意味が無い定期実行なので、適宜コードを記述してください😨)

最後にターミナルでこのファイルの設定を読み込ませます。

```bash title="ターミナル"
$ bundle exec whenever --update-crontab
```

これで定期実行の設定が完了しました🥳
あとは処理が行われているか確認してみてください！

また、定期実行を取り消したいときは、次のコマンドを実行します。

```bash title="ターミナル"
$ bundle exec whenever --clear-crontab
```

これで定期実行を停止できます。

以上が**whenever**を用いた定期実行の説明でした！
環境変数やログファイル等の調整は、公式のGitHubに載っているので細かく制御したい人は見てみてください🙇

<ExternalLink url="https://github.com/javan/whenever" />

### cronを使用した場合

次に**cron**という、linuxにもともと入っている機能を使って定期実行を実装します。
先程の**whenever**も実際のところ、内部的に**cron**を使用して実装をしています。
なので、それならgemを使わずに直接**cron**を操作しちゃっても問題無いということですね😎
なんなら、依存するgemを減らせるのでサーバーをある程度触れる人はこちらの実装の方が良いと思います💪

{/* prettier-ignore */}
<Callout>
  **whenever**で実装すると、ファイル内に記述した内容がドキュメントとしての役割を果たし、チーム開発の際の生産性向上につながる可能性があります。
</Callout>

```bash title="ターミナル"
$ crontab -e
```

上記コマンドを打つと、ターミナル上でコードエディタが立ち上がります。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="tsukiya">
  コードエディタはデフォルトだとVimが立ち上がるので、Vimの操作方法が分からない人は調べてみてね！
</SpeechBubble>

下記のように編集してください。

```cron title="crontab"
0 * * * * cd /プロジェクトの絶対パス && rake sample_task:taro_create
```

`0 * * * *`の部分で定期実行する間隔を決めています。
今回の場合だと、毎時0分に実行という命令になります。(1時間おき)
細かい設定方法を知りたい方は、下記サイトが参考になります。

<ExternalLink url="https://memo.morelents.com/crontab-setting/" />

間隔を決めた後に、打ちたいコマンドを記述するだけで設定完了になります。
エディタをセーブしたタイミングで勝手にサーバーが読み込んでくれるので、特に行う作業はありません。

要らなくなった際は、再度`$ crontab -e`でエディタを立ち上げ、該当する行を削除してください！

以上が**cron**を用いた定期実行の説明でした！
こっちも結構簡単ですね！
僕は基本的にこちらの方法で実装しています😎

{/* prettier-ignore */}
<Callout variant="warning">
  今回の前提のOSはLinuxになっています。MacやWindowsの場合はcronのインストールからはじめる必要があるかもしれないので、ご注意ください🙇
</Callout>

## 終わりに

今回は、定期実行の行い方を2パターン説明しました。
どちらもメリットデメリットはありますので、自身の要望と検討した上で適切な方を使用できると良いですね！

Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので、興味がある方はぜひ読んでみてください🙇


---

## 【Rails】rakeタスクとは？ 概要から使い方までを解説！

- URL: https://blog.to-ko-s.com/articles/rake-task-summary
- 著者: 西原月熙
- 公開日: 2022-02-27
- タグ: Rails

> Railsのrakeタスクについて初心者向けに解説。rakeタスクの概要から、ファイル作成・処理の記述・実行方法まで、サンプルコード付きで紹介します。


## はじめに

### この記事の概要

こんにちは、Rubyをメインで書いている株式会社TOKOSの[ツキヤ](https://x.com/west_tsukiya)です！
今回は、初学者の方だとあまり聞き馴染みの無いrakeタスクについて説明します！
最後まで読んだら、

- モデルを作成
- 特定のレコードを削除
- メールの一斉送信

などなどを、ターミナル上の**1コマンド**で実行できる方法が分かります😎

### 対象読者

- rakeタスクについての概要を知りたい人
- 1コマンドで特定の処理を行いたい人

### 筆者の環境

| 技術等       | バージョン  |
| ------------ | ----------- |
| 使用パソコン | MacBook Pro |
| Ruby         | 2.7.4       |
| Rails        | 6.1.4       |

## rakeタスクとは？

簡単に説明すると、自分で設定したタスクをコマンドラインで実行できるものです。
では、タスクとは？？🙄

タスクとは、自分が行いたい動作(モデルのCRUDなど)の一連のまとまりです！
このrakeタスクを使いこなすことで、ブラウザの画面以外から簡単に処理を行うことができたり、定期実行もサクッとできるようになります💪

## rakeタスクの作成

では早速、超簡単なrakeタスクを作りながら説明していきます！

今回は、`User`モデルに新しくユーザー（カラムは`name`のみ）を登録する処理を作ってみます。

### ファイルの作成

```bash title="ターミナル"
$ rails g task SampleTask
```

まずは上記コマンドを打つことで、`./lib/tasks/`配下に`sample_task.rake`ファイルが作成されます！

{/* prettier-ignore */}
<Callout>
  今回は`SampleTask`としましたが、コマンドライン上で`$ rails g task`
  の後に自由に名前をつけることができます！
  その際に各単語の最初の文字を大文字（パスカルケース）にして、コマンドを実行しましょう！
</Callout>

### 処理の記述

次に、`sample_task.rb`ファイルを記述していきます！

```ruby
namespace :sample_task do
  desc "taro君を生成する"
  task taro_create: :environment do
    User.create(name: 'taro')
  end
end
```

・2行目
`desc`の後に、自由にこのタスクの説明文を記述します！
今回は、`name`が`taro`という文字の`User`を作成するので、`"taro君を生成する"`としました。 {/* prettier-ignore */}

・3行目
ここで、タスクの実行時の名前をつけます。 {/* prettier-ignore */}
そして、`:environment`と記述することで実際のRailsの環境（モデルへのアクセスなど）で実行できます！

・4行目
ここで実際に行いたい処理を記述しています！
今回は1行と簡単ですが、`if`文や`for`文を使って処理をゴリゴリかいちゃって大丈夫です💪

以上で実行のための準備は完了です、簡単ですね🥳

## rakeタスクの実行

それではいよいよ作成したタスクを実行します。
まずは、タスクがちゃんと作成されているか確認してみます！

```bash title="ターミナル"
$ rake -vT
```

上記コマンドを打つと、デフォルトも含めたタスクの一覧がいっぱいターミナルに表示されます。
出力結果の中に`sample_task`があれば、問題無く作成されていることになります💪

{/* prettier-ignore */}
<Callout>
  出力結果が多くて確認するのが面倒な方は、`$ rake -vT | grep sample`のように、`|`（パイプ）で`grep`コマンドをつなぐと、出力結果を絞り込んでくれるのでオススメです😎
</Callout>

それではrakeタスクを、下記コマンドで実行しましょう

```bash title="ターミナル"
$ rake sample_task:taro_create
```

エラーが出力されていなかったら、成功しているはずです！
`$ rails c`やDBにアクセスして、`taro`というユーザーが作成されているか確認してみてください。

以上がrakeタスクの作成 ~ 実行までの一連の流れとなります、お疲れ様でした🥳

## 終わりに

今回は、rakeタスクの簡単な概要と作成・実行方法について説明しました！
今回の説明を参考にして、自分なりのrakeタスクをバンバン作っちゃってください😎
要望がありそうでしたら、このrakeタスクを定期実行する方法についての記事を書こうと思いますので乞うご期待！！

また、更に使い勝手が良い`runner`についても後々記事にしようと思います！
Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んでみてください🙇‍♂️


---

## JavascriptでHTMLのdata属性を取得して、活用してみた。

- URL: https://blog.to-ko-s.com/articles/html-data-property
- 著者: 成岡拓哉
- 公開日: 2022-02-13
- タグ: HTML, CSS, JavaScript

> JavaScriptでHTMLのdata属性を取得・活用する方法を解説します。スクロールアニメーションの実装例を使ってdata属性の活用方法を紹介します。


## はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです!
今回のテーマはJavaScriptでHTMLの`data属性`を取得して、活用する方法です。

`data属性`はCSSやJavaScriptから直接取得や参照できるため、CSSとJavaScriptを簡単に連動させることができたり、DOM操作の幅がより広がります。
具体例として、「スクロールすると要素がふわっと下から順番に出てくるアニメーション」を実装しながら簡単に解説していきます。

<Video src="/articles/html-property-data.mp4" />

### 対象となる方

- HTMLやCSS、JavaScriptを勉強中の方
- Web制作でコーディングをしている方
- JavaScriptでHTMLの`data属性`を取得してみたい方

## data属性とは

`data属性`とは、正式にはカスタムデータ属性といい、HTMLの要素に任意の名前をつけたデータを持たせることができるものです。
冒頭でもお話したように、CSSやJavaScriptからこのデータを取得したり参照できます。

書き方は`data-*`といった形で、必ず`data-`から始まります。
`data-en`や`data-name`、`data-number`のような感じです。

```html title="HTML" showLineNumbers
<div class="c-box" data-number="1" data-time="500"></div>
```

詳しくはMDNの公式ドキュメントをご覧ください。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/dataset" />

## 実装

それでは実装に移っていきます。
具体例のスクロールすると要素がふわっと下から順番に出てくるアニメーションを実装するなかで、`data属性`を使っていきます。

```html title="HTML" showLineNumbers
<p class="c-description">↓下にスクロールしてください↓</p>
<div class="l-container">
  <div class="c-box" data-number="1" data-time="500"></div>
  <div class="c-box" data-number="2" data-time="700"></div>
  <div class="c-box" data-number="3" data-time="900"></div>
</div>
```

HTMLはこんな感じです。
３つ並んでるdivを作成し、クラス名と`data属性`を与えます。
CSSでテキストを指定するための`data-number`、アニメーションに関する時間を指定するためにJavaScriptで取得したいので`data-time`をそれぞれ指定します。

```css title="CSS" showLineNumbers
.l-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 200px;
}

.c-box {
  align-items: center;
  aspect-ratio: 1 / 1;
  background-color: #4eb99d;
  display: flex;
  justify-content: center;
  margin: 5px;
  min-width: 300px;
  opacity: 0;
  position: relative;
  transform: translateY(100px);
}

.c-box::before {
  content: attr(data-number);
  font-size: 40px;
  color: #fafafa;
}

.c-box.--active {
  opacity: 1;
  transform: translateY(0);
  transition: 1s;
}

.c-description {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin-bottom: 200px;
  width: 100vw;
}
```

HTMLの`data属性`の`data-number`で設定した値を、CSSの疑似要素（`::before`）の`content`にアクセスしています。

書き方は、`attr(data-number)`で、「そのCSSセレクタがあたっている要素の`data-number`属性を参照する」といった具合です。
これでそれぞれの要素の上に、`data-number`で指定した数字が表示されるようになります。

```javascript title="JavaScript" showLineNumbers
window.addEventListener("scroll", () => {
  document.querySelectorAll(".c-box").forEach((e) => {
    const rect = e.getBoundingClientRect()
    const winHeight = window.innerHeight
    // 要素がビューポート内に入ったら発火
    if (rect.top <= winHeight && rect.bottom >= 0) {
      window.setTimeout(() => {
        e.classList.add("--active")
      }, Number(e.dataset.time))
    }
  })
})
```

JavaScriptでは、まず`.c-box`クラスを持つ要素をすべて取得します。
そして、`getBoundingClientRect()`を使って要素が画面内に現れたかを判定し、`--active`クラスを付与してアニメーションするようにしています。

その際に、HTMLで指定した`data-time`という`data属性`の数値をJavaScriptで取得して、アニメーションの開始時間に差が生まれるようにしています。
書き方は、`[オブジェクト].dataset.time`です。

これで想定通りのスクロールアニメーションが実装できました。

## まとめ

今回は、JavaScriptでHTMLの`data属性`を取得して、活用する方法について参考例を用いて解説してきました！
`data属性`をJavaScriptで取得して活用するのはとても簡単です。
使えるようになればコーディングの幅が広がるのでぜひ使ってみてください。

Web制作におけるJavaScriptの基礎固め学習にはこちらの書籍がおすすめです。
是非ご覧になってJavaScriptの知識を深めていきましょう。

<ExternalLink url="https://amzn.to/3jYGsPe" />


---

## 【javascript】簡単に初回アクセス時に処理を実行をさせよう！

- URL: https://blog.to-ko-s.com/articles/js-first-access
- 著者: 成岡拓哉
- 公開日: 2022-01-30
- タグ: JavaScript

> JavaScriptで初回アクセス時にのみ特定の処理を実行させる方法を解説します。jQueryのCookieとsessionStorageを使った2つの方法を紹介します。


## はじめに

### この記事の概要

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はJavaScriptで**初回アクセス時にのみ特定の処理を実行させる方法**をご紹介します。
今回紹介する方法は、`jQuery`を使用する方法とJavaScriptで`sessionStorage`を利用する方法の2つです。

今回はよくありそうな、「初回アクセス時のみポップアップを表示させる」を例に説明します！

### 対象となる方

- JavaScriptを勉強中の方
- Web制作でコーディングをしている方
- 初回アクセス時にのみ特定の処理を実行させる方法を知りたい方
- ポップアップを初回アクセス時のみ表示させたい方

## jQueryを使用する方法

最初に、`jQuery`を使用して初回アクセス時のみポップアップを表示させる方法をご紹介します。
`jQuery`はJavaScriptのライブラリで、簡単な記述方法や使いやすさから多くのWebサイトで使用されています。

今回は、`jQuery`と派生ライブラリの`jquery.cookie.js`を使用します。

<ExternalLink url="https://jquery.com/" />

<Callout variant="warning">
  この方法は`jQuery`を使用するため、既存のレガシープロジェクトのメンテナンス向けです。
  新規プロジェクトでは、後述する`sessionStorage`を使用した方法を推奨します。
</Callout>

<Callout variant="warning">
  `jquery.cookie.js`は長期間メンテナンスされていないライブラリです。
  新規プロジェクトでは`sessionStorage`や`localStorage`、または`js-cookie`などの代替ライブラリの使用を検討してください。
</Callout>

### jQueryとjquery.cookie.jsの読み込み

まず何よりも先にライブラリを読み込まなくてはなりません。
どちらもCDNがありますのでそれを読み込みます。

```html title="HTML" showLineNumbers
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
```

### 実装

CDNを読み込んだので、処理を実行させるためのコードを書いていきます。

#### HTML

```html title="HTML" showLineNumbers
<div class="c-modal l-modal">
  <div class="c-modal__text">
    <p class="">初回アクセス時のみ表示されます。<br />（OKを押してリロードすると表示されません）</p>
  </div>
  <div class="c-modal__btn">
    <button class="c-btn">OK</button>
  </div>
</div>
```

#### CSS

```css title="CSS" showLineNumbers
.c-modal {
  background-color: #eeeeee;
  border-radius: 4px;
}

.c-modal__text {
  padding: 40px 20px;
  text-align: center;
}

.c-modal__btn {
  background-color: #cfcfcf;
  border-radius: 0 0 4px 4px;
  padding: 12px 40px;
}

.c-btn {
  background-color: #e45f2a;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  display: block;
  margin: auto;
  padding: 12px 40px;
}

.l-modal {
  left: 50%;
  margin: auto;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}
```

#### jQuery

```javascript title="JavaScript" showLineNumbers
$(function () {
  $.cookie("btnFlg") === "on" ? $(".l-modal").hide() : $(".l-modal").show()
  $(".c-modal__btn button").click(function () {
    $(".l-modal").fadeOut()
    $.cookie("btnFlg", "on", { expires: 30, path: "/" }) // Cookieを30日間保持
  })
})
```

こんな感じに表示されます↓↓↓

![初回アクセス時のポップアップ表示](/articles/ScreenShot-2022-01-30-23.53.39.webp)

OKボタンを押してリロードすると表示されません。
chromeのデベロッパーツールのアプリケーション > ストレージ > Cookieを確認してください。
`btnFlg`というキーに`on`というバリューがあるかどうかで初回アクセスかどうかを判別しています。
これで簡単に初回アクセス時のみ処理を実行をさせることができました。

## sessionStorageを使用する方法

次に、`sessionStorage`を使用して初回アクセス時のみポップアップを表示させる方法をご紹介します。

`sessionStorage`は、Webページのセッションが続いている間データを保存しておけるものです。
`localStorage`に保存されたデータには期限がないのに対して、`sessionStorage`に保存されたデータはページのセッションが終了するときに消去されます。
`sessionStorage`を使うと、ページを閉じてもそのブラウザウィンドウもしくはタブを閉じない限り情報を保持し続けることができます。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage" />

### 実装

今回はライブラリは使わず生のJavaScriptを使うのでCDNの読み込みは必要ありません。
そのままHTMLとJavaScriptのコードを書いていきます。
（CSSは先程使用したものをそのまま使います。）

#### HTML

```html title="HTML" showLineNumbers
<div id="modal" class="c-modal l-modal" style="display: none">
  <div class="c-modal__text">
    <p class="">初回アクセス時のみ表示されます。<br />（OKを押してリロードすると表示されません）</p>
  </div>

  <div class="c-modal__btn">
    <button id="btn" class="c-btn">OK</button>
  </div>
</div>
```

#### JavaScript

```javascript title="JavaScript" showLineNumbers
const sessionKey = "accessed"
const sessionValue = true

// sessionStorageにsessionKeyというデータの有無を判別
if (!sessionStorage.getItem(sessionKey)) {
  // 初回アクセス時の処理
  document.getElementById("modal").style.display = "block"
  document.querySelector(".c-btn").addEventListener("click", () => {
    document.getElementById("modal").style.display = "none"
    // sessionStorageにデータを追加
    sessionStorage.setItem(sessionKey, sessionValue)
  })
} else {
  // ここに通常アクセス時の処理
  console.log("アクセス済み")
}
```

OKボタンを押してリロードすると表示されません。

chromeのデベロッパーツールのアプリケーション ＞ ストレージ ＞ セッションストレージを確認してください。
`sessionStorage`の`accessed`というキーが`true`かどうかで初回アクセスかどうかを判別しています。
ポップアップのOKボタンを押したときに、`sessionStorage`にデータを追加しています。

これでJavaScriptで初回アクセス時のみ処理を実行をさせることができました。

## まとめ

今回は「JavaScriptで初回アクセス時にのみ特定の処理を実行させる方法」を具体例を交えて解説してきました。
どちらの方法も、特定のデータを参照して初回アクセスかどうかを判別しています。
使えるようになるとコーディングの幅も広がるのでおすすめです！

Web制作におけるJavaScriptの基礎固め学習にはこちらの書籍がおすすめです。
ぜひご覧になってJavaScriptの知識を深めていきましょう！

<ExternalLink url="https://amzn.to/3jYGsPe" />


---

## 【javascript】可変変数で動的に変数を作成してみた！

- URL: https://blog.to-ko-s.com/articles/js-variable-variables
- 著者: 成岡拓哉
- 公開日: 2022-01-23
- タグ: JavaScript

> JavaScriptで動的に変数を作成する方法を解説します。配列やオブジェクトを使った方法とeval関数を使った方法を紹介します。


## はじめに

### この記事の概要

こんにちは。エンジニア（コーディング）のタクヤです。
今回のテーマはJavaScriptで可変変数で動的に変数を作成してみた！です。

### 対象となる方

- JavaScriptを勉強中の方
- Web制作でコーディングをしている方
- JavaScriptで可変変数で動的に変数を作成してみたい方

## 可変変数とは

可変変数とは、文字列などの変数の値に対してさらに変数を入れ込んだものです。

変数を変数で作る感じで変数を動的に作成することが可能です。

## 例(PixiJS)

`PixiJS`というJavaScriptのライブラリを使い、ひとつの画像から複数のオブジェクトを作成することを想定します。

```javascript title="JavaScript" showLineNumbers
let sampleTexture = new PIXI.Texture.from("./img/sample.png") // このオブジェクトをもとにいろんなオブジェクトを作りたい
let sampleSprite01 = new PIXI.Sprite(sampleTexture)
let sampleSprite02 = new PIXI.Sprite(sampleTexture)
let sampleSprite03 = new PIXI.Sprite(sampleTexture)
let sampleSprite04 = new PIXI.Sprite(sampleTexture)
let sampleSprite05 = new PIXI.Sprite(sampleTexture)
```

ひとつひとつ作っていく、これはやばいですね....。

### とりあえずfor文で回してみる

とりあえずforで回してみたいと思います。

```javascript title="JavaScript" showLineNumbers
let sampleTexture = new PIXI.Texture.from("./img/sample.png");
for ( let i = 1; i < 10; i++ ) {
  let "sampleSprite0" + i  = new PIXI.Sprite(sampleTexture);
}
// こんなの書き方できないよね.....
```

こんな書き方はできないので、変数を動的に変えていく必要があります。

## 可変変数を使う

### evalを使用する

```javascript title="JavaScript" showLineNumbers
let sampleTexture = new PIXI.Texture.from("./img/sample.png")
for (var i = 1; i < 10; i++) {
  eval("var sampleSprite0" + i + "= new PIXI.Sprite(sampleTexture);app.stage.addChild(sampleSprite0" + i + ");")
}
```

`eval()`という関数を使用すれば、この様な形で動的に変数を作成できます。
`eval()`は、文字列として表されたJavaScriptコードを式として評価する関数です。

とても便利ですが、スコープの関係で`var`しか使えない、セキュリティ的な脆弱性があるという問題があり、非推奨とされています。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval" />

### 配列を使用する（推奨）

連番で管理する場合は、配列を使うのが最も一般的で適切な方法です。

```javascript title="JavaScript" showLineNumbers
let sampleTexture = new PIXI.Texture.from("./img/sample.png")
let sampleSprites = [] // 空の配列を用意
for (let i = 0; i < 9; i++) {
  sampleSprites[i] = new PIXI.Sprite(sampleTexture)
  app.stage.addChild(sampleSprites[i])
}
```

配列を使うと`length`プロパティや`forEach`、`map`などのメソッドが使えるため、後からの操作がしやすくなります。

```javascript title="JavaScript" showLineNumbers
// 全てのスプライトに対して処理を行う例
sampleSprites.forEach((sprite) => {
  sprite.visible = false
})
```

### オブジェクトを使用する

意味のあるキー名で管理したい場合は、オブジェクトを使って動的にプロパティを追加できます。

```javascript title="JavaScript" showLineNumbers
let sampleTexture = new PIXI.Texture.from("./img/sample.png")
let sampleSprite = {} // 空のオブジェクトを用意
for (let i = 1; i < 10; i++) {
  sampleSprite[`sprite${i}`] = new PIXI.Sprite(sampleTexture)
  app.stage.addChild(sampleSprite[`sprite${i}`])
}
```

オブジェクトのブラケット記法（`[]`）を使うことで、動的にキーを指定してプロパティにアクセスできます。

<Callout>連番でアクセスする場合は配列、意味のあるキー名で管理する場合はオブジェクトを使い分けましょう。</Callout>

## さいごに

「JavaScriptで可変変数で動的に変数を作成してみた！」を解説してきました。
変数を動的に作成したい場合があるときは、この可変変数を使用する方法を試しても良いかもしれません。

Web制作におけるJavaScriptの基礎固め学習には以下の書籍がおすすめです。
是非ご覧になってJavaScriptの知識を深めていきましょう。

<ExternalLink url="https://amzn.to/3jYGsPe" />


---

## 【CSS】詳細度を知ろう！スタイルの優先度について簡単にまとめてみた！

- URL: https://blog.to-ko-s.com/articles/css-specificity
- 著者: 成岡拓哉
- 公開日: 2022-01-05
- タグ: HTML, CSS

> 詳細度（specificity）とは、ブラウザでどのCSSのスタイルが適用されるか決定する際に用いられる優先度のようなものです。 この優先度（詳細度）は、様々な組み合わせのCSSセレクタで構成される一致規則に基づいています。


## はじめに

### この記事の概要

コーディングしてる際に、ちゃんとプロパティを書いてるのにスタイルが反映されなくて、時間を無駄に費やしてしまうことってありますよね。
今回はその原因の1つである、**詳細度（specificity）** についてまとめました。
この詳細度は、初心者の方にとっては少し複雑で難しい部分にはなりますが、うまく使いこなせるようになれば、CSSについてはある程度マスターできるのでしっかり覚えておきましょう。

### 対象となる方

- CSSを勉強中の方
- Web制作でコーディングをしている方

## 詳細度とは

**詳細度（specificity）**とは、ブラウザでどのCSSのスタイルが適用されるか決定する際に用いられる**優先度**のようなものです。
この優先度（詳細度）は、様々な組み合わせのCSSセレクタで構成される一致規則に基づいています。

<ExternalLink url="https://developer.mozilla.org/ja/docs/Web/CSS/Specificity" />

### ポイントについて

詳細度つまり**スタイルの優先度**を決めるにあたって基準となるのが、**セレクタ**のポイントです。

**セレクタ**とは、CSSのスタイルをどのHTML要素に適用させるかを指定するのに用いられるもので、要素タグや`class`名や`id`名などが挙げられます。

詳細度にかかわるセレクタの単体のポイントについては以下の通りです。
ポイントが高いほど優先度が高くなります。

| セレクタ名                                                           | 詳細度のポイント |
| -------------------------------------------------------------------- | ---------------- |
| **【階層１】idセレクタ**                                             | 100              |
| **【階層２】クラスセレクタ、属性セレクタ、擬似クラス**               | 10               |
| **【階層３】タイプセレクター（要素）、擬似要素**                     | 1                |
| **【階層４】ユニバーサルセレクタ(\*)、コンビネータ、否定擬似クラス** | 0                |

### 計算方法

計算方法はセレクタのポイントの単純な**足し算**です。
その合計値が大きければ大きいほど、**優先度**が高くなります。
**ポイントを多くとったほうが勝ち**です。

ですが1つ罠があります。
それは、**階層が下のセレクタがどれだけ集まってポイントを稼いでも上の階層のセレクタには勝てない**ということです。

【階層２】のクラスセレクタが11個集まって110ポイント、【階層１】のidセレクタが１つ100ポイントだったとします。
ポイントの高低で評価すると、

**クラスセレクタ110ポイント ＞ idセレクタ100ポイント**

ですが、前述した、**階層が下のセレクタがどれだけ集まってポイントを稼いでも上の階層のセレクタには勝てない**規則により

**idセレクタ100ポイント ＞ クラスセレクタ110ポイント**

という優先度になります。

0からコーディングする際は問題にはなることは少ないですが、既存サイトのデバッグやWordPressのテーマをコーディングする際は問題になることもあるので、頭の片隅に入れておくと良いと思います。

###  例

下記のようなHTMLとスタイルシートがあったとします。

```html title="index.html" showLineNumbers
<div class="blue red">この要素の背景色は？</div>
```

```css title="style.css" showLineNumbers
div {
  height: 200px;
  width: 200px;
  background-color: black;
}

div.blue {
  background-color: blue;
}

.red {
  background-color: red;
}
```

この場合、

①`div`セレクタ
タイプセレクタ１つなので、**1点**

②`.red`セレクタ
クラスセレクタ１つなので、**10点**

③`div.blue`セレクタ
タイプセレクタ１つ + クラスセレクタ１つなので、**11点**

のようなポイントになります。

ブラウザで確認してみると

![CSSの詳細度による優先順位の表示結果](/articles/css-specificity-01-300x149.webp)

CSSの詳細度が同じであれば後に書いたプロパティが優先されますが、この場合上に書かれたセレクタの方が（11ポイント）詳細度が高いですし、階層も上位なのでそちらのCSSのスタイルが適用されます。

## セレクタの詳細度とは別の優先度

これまで説明したセレクタの詳細度とは別の優先度があります。
これらはCSSのスタイルを適用させる強制力が強く、セレクタの詳細度のようなポイント制ではないのが特徴です。

### インラインスタイル

インラインスタイルはセレクタの詳細度とは別の仕様で、スタイルシートのスタイルを上書きします。
そのため優先度が高いです。

スタイルシートに同じ要素に対してのスタイルが書かれていたとしてもすべてが無効になり、こちらが適用されます（`!important`は除く）。

### !important

こちらもセレクタの詳細度とは別の仕様で、他のプロパティを強制的に上書きするので、優先度がもっとも高いです。
ポイント制ではないのですが、ポイントで表すとしたら1000ポイントといったところです。
なので同じプロパティに`!important`が記載された場合は、そのセレクタの詳細度が適用されます。

`!important`を使用すると、後から別の場所でスタイルを上書きしたいときに、さらに`!important`を追加しなければならなくなり、コードの保守性が低下します。
また、どのスタイルが適用されているか把握しづらくなるため、使用は控えましょう。

## まとめ

「CSSの詳細度」を解説してきました。
うまく使いこなせるようになれば、CSSについてはある程度マスターできるのでしっかり覚えておきましょう。

CSSの基礎固め学習には以下の書籍がおすすめです。
是非ご覧になってCSSの知識を深めていきましょう。

<ExternalLink url="https://amzn.to/3WXwnAA" />


---

## 【Rails6】Railsでの外部APIのGET方法

- URL: https://blog.to-ko-s.com/articles/rails-api-get
- 著者: 西原月熙
- 公開日: 2022-01-04
- タグ: Rails

> Rails 6で外部APIにGETリクエストを送る方法を解説。httpclientを使ったHTTP通信からJSON.parseでのレスポンス処理まで、サンプルコード付きで紹介します。


## はじめに

Railsで開発していて、外部サービスとAPIを使って連携したい時ってありませんか？
今回はそんなお悩みを解決しようと思います！

### この記事の概要

外部APIのGETメソッドを叩く方法を簡単に説明します！
ちなみに「叩く」とは、URLにアクセスすることを指します。

<Callout variant="warning">
  RailsのプロジェクトをAPIサーバーとして動かす方法ではなく、外部のAPIを叩く方法を説明します
</Callout>

### 対象読者

- Railsでの外部APIの叩き方を知らない人

### 筆者の環境

| 技術等       | バージョン     |
| ------------ | -------------- |
| 使用パソコン | MacBook Pro    |
| OS           | macOS Monterey |
| Ruby         | 2.7.4          |

## 実装

### JSONPlaceholderについて

今回は、APIのGETをするテスト用のサービスに、**JSONPlaceholder**というサイトを使用します！

<ExternalLink url="https://jsonplaceholder.typicode.com/" />

このサイトはテスト用のエンドポイントを提供してくれているサービスです。
試しに、[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)を開いてみてください。
仮のユーザーの一覧が出てきたかと思います。
今回はこのURLを対象として情報を取得していきます！ {/* prettier-ignore */}

### httpclientの導入

今回はhttpclientというgemを使用します。

```ruby title="Gemfile"
# 略
gem 'httpclient'
```

```bash title="ターミナル"
$ bundle install
```

で、インストールします。

### コードの記述

それでは、実際に記述をします。
今回は、`users`コントローラーの`index`メソッドの中で使用するものとします。

{/* prettier-ignore */}
<Callout variant="warning">
  実際にはJSONを叩く用のメソッドをコントローラやモデルに記述して適切な加工等をします
  （`index`メソッドにそのまま記述する場合は少ないかと思います）
</Callout>

```ruby title="app/controllers/users_controller.rb"
class UsersController < ApplicationController
  require 'httpclient'

  def index
    client    = HTTPClient.new
    url       = "https://jsonplaceholder.typicode.com/users"
    response  = client.get(url)
    res_json  = JSON.parse(response.body)
  end

  # 以下略
end
```

順番に解説します！

```ruby
  require 'httpclient'
```

この`require`でgemの`httpclient`が使えるようになるので必ず記述してください！

```ruby
    client    = HTTPClient.new
```

この行では`client`という変数に`HTTPClient`のインスタンスを格納しています。

```ruby
    url       = "https://jsonplaceholder.typicode.com/users"
    response  = client.get(url)
```

ここで、`url`に格納したURLに`httpclient`が用意してある`get`メソッドを使って外部からHTTPのGETメソッドを走らせています！
その結果を`response`という変数に格納しています。

```ruby
    res_json  = JSON.parse(response.body)
```

取得した情報はそのままだと文字列(`String`)になってしまい、扱いづらいです。
そこで、`JSON.parse`メソッドを使ってRubyのオブジェクト(`Array`や`Hash`)に変換しています。

以上で、変数`res_json`内に[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)に表示されている文字が連想配列として格納されました。
このデータを画面そのまま表示させたかったら、`@`マークでインスタンス変数にしてあげてください。
DBに保存したかったら、`each`文で格納させてあげても良いですね。

## 終わりに

繰り返しになりますが、今回はGETメソッドを叩く方法のみを載せました。
実際の業務では、このデータを加工したりする必要があると思います。
また、取得できなかった場合の例外処理も必要になります。
まずは取得のみからはじめて挙動を確認してみてください😎

Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇‍♂️


---

## 【Rails6】Dockerを用いたRails6の開発環境構築【コピペでOK】

- URL: https://blog.to-ko-s.com/articles/rails-environment-from-docker
- 著者: 西原月熙
- 公開日: 2022-01-03
- タグ: Rails, Docker

> DockerでRails 6の開発環境を構築する方法をコピペで実装できるように解説。Dockerfile、docker-compose.yml、MySQLの設定から、よく使うDockerコマンドまで紹介します。


## はじめに

### この記事の概要

皆さん、Railsの開発環境はどのようにしていますか？
もちろん、ホストに直接RubyやRailsをインストールしてませんよね？🥺
ホストにインストールしてしまうと、下記のようなデメリットが考えられます

- 本番環境へのデプロイが大変
- チーム開発の際に環境構築でつまづく
- 違うプロジェクトを行き来する際にRubyのバージョンを毎回変えなければならない

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  他には、今どきの開発者はDockerを使っているところが多いというのも大きいですね！
</SpeechBubble>

そこで、今回はDockerを使ってRails6でいつもの画面が表示されるところまでを説明します！
なるべくコピペだけで動くようにコード等も載せますのでぜひ最後までお付き合いください🙏
（今回は**MacBook**での説明となります）

### 対象読者

- DockerでRails6の開発環境を作成したい人
- Dockerについてあまり理解していない初学者

### 筆者の環境

| 技術等       | バージョン               |
| ------------ | ------------------------ |
| 使用パソコン | MacBook Pro (CPU: Intel) |
| OS           | macOS Monterey           |
| Ruby         | 2.7.4                    |

## Dockerの準備

この章ではDockerの簡単な概要とインストール方法を説明します。
ある程度理解している人は次の章までスキップしてください🙇‍♂️

### なんでDockerなの？

概要でもお話しした理由から、MacBookに直接RubyやRailsを入れるのはナンセンスです。
そこで、よく使用されていたのがVMwareやVirtualBoxをはじめとした仮想環境でした。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  これらの技術をかなり簡単に説明すると、パソコンの中にさらに独立したパソコンを作る技術です！
</SpeechBubble>

![パソコンの仮想環境](/articles/virtual.jpg)

この技術を使うことで色々な環境を簡単に行き来できます。
ただ、この仮想環境の技術でも解消されていない問題がありました。

- 仮想環境自体がかなりデータ量が大きい
- チーム開発の際に手作業で全て導入する必要がある

上記問題を解消したのがDockerです🥳

Dockerは仮想環境の代わりにかなり軽量な「コンテナ」を使用することで、必要なデータ量を大幅に削減しました。
また、コンテナ等の作成のためにファイルを用意する必要があります。
一見すると面倒そうですが、逆にこれが環境の手順書や説明書のような役割を果たすので、チーム内での開発環境の共有も劇的にラクになりました💪
さらに、コマンドを少し叩くだけで本番環境へのデプロイ(リリース)も完了してしまいます！

なので、今後は仮想環境の代わりにどんどん普及していくことが予想されます。この記事をキッカケにDockerをぜひ使ってみましょう！！

### Dockerのインストール

まずはDockerのインストールをしましょう！
下記のリンクをクリックして「Docker Desktop」の項目にて、自分のパソコンに適したファイルをインストールしてください！

<ExternalLink url="https://www.docker.com/get-started" />

![Docker Desktopのダウンロードページ](/articles/screenshot-2021_12_24.jpg)

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  僕はIntelのMacBookなので上のスクリーンショットのような状態でダウンロードしました！
</SpeechBubble>
あとはダウンロードしたファイルを開いて、画面の指示に従ってアプリケーションとしてインストールしてください。
以上でインストール自体は終了です！

### 動作確認

次に、ちゃんと使用できるかの確認をしてみましょう！

まず、インストールしたDockerを起動させてください。
クリックしたら起動までに時間が少しかかります。
メニューバーのクジラの動きが止まったら準備が完了です😎
![メニューバーに表示されたDockerのクジラアイコン](/articles/screenshot-2021_12_27.jpg)

次に、画面に下の画像のようなDockerのウィンドウが表示されていると思います。
![Docker Desktopの初回起動時のウィンドウ](/articles/screenshot-docker.jpg)
この中に書いてあるコマンドをターミナルで打ってみましょう！（下にコマンドを書いているのでこちらからコピペしてもらっても大丈夫です）

```bash title="ターミナル"
$ docker run -d -p 80:80 docker/getting-started
```

![docker runコマンド実行時のターミナル出力](/articles/screenshot-teminal.jpg)

すると、ターミナルでは下の画像のようになにやら色々ダウンロードして終了しました🙄

この状態で、`localhost:80`とブラウザのURL欄に打ち込んで見てください！
エラー無くDockerのチュートリアルページが表示されたら成功です😎

![ブラウザに表示されたDockerチュートリアルページ](/articles/screenshot-docker_tutorial.jpg)

<Callout>URLはリダイレクトされて`localhost/tutorial`になっています</Callout>

これでDockerの確認が終了です！

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  もしローカルの`80`番ポートを使ってると起動の際にエラーが起きるので、他の`80`番ポートを使用しているアプリを停止させてから実行しましょう！
</SpeechBubble>

また、最後にコンテナを停止、削除までしておきましょう💪

```bash
$ docker container stop brave_knuth
$ docker container rm brave_knuth
```

上記2行のコマンドで先程立ち上げたコンテナが停止、削除されました（URL `localhost/tutorial`が見れなくなっていることを確認してみてください）

## 実装

{/* prettier-ignore */}
<Callout variant="warning">
  今回は起動を目標にしておりますので、ファイルを1行ごとに細かく説明していません。
  一旦の雰囲気を掴んでもらうためですので、必要に応じて各ファイルの内容をご自身で調べてみてください🙇‍♂️
</Callout>

### 初期ファイル、コマンド

それでは、いよいよファイルを作りながら環境を作成していきます！
まずはディレクトリとファイルの雛形をサクッと作ります！

```bash title="ターミナル"
$ mkdir issen
$ cd ./issen
```

今回は`issen`というディレクトリ内で作業をするので、ディレクトリを作成及び移動をしておきます
次に必要なファイルを空の状態で作ります！

```bash title="ターミナル"
$ touch Dockerfile
$ touch docker-compose.yml
$ touch entrypoint.sh
$ touch Gemfile
$ touch Gemfile.lock
$ touch my.cnf
```

これで`issen`ディレクトリ配下に6つのファイルが作成されました！

次に、これらのファイルの中身をどんどん書き込みます！

### Dockerfile

```dockerfile title="Dockerfile"
FROM ruby:2.7.4
ENV TZ Asia/Tokyo

RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
    && apt-get update -qq \
    && apt-get install -y nodejs \
    && npm install -g yarn

WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]
```

ざっくり説明すると、1行目の`FROM Ruby:2.7.4`でベースとなるイメージを設定します。
今回はRubyのバージョン`2.7.4`があらかじめ入っているものにしました

そして、2行目以降でそのベースイメージを加工していきます！
4行目では、一括でRails6を動かすために必要なyarnに関するパッケージ群をインストールしています。
9行目以降では先程の作成したファイルをイメージ内に適宜コピーして形成していきます。

{/* prettier-ignore */}
<Callout variant="warning">
  ある程度理解している方のために補足をしておきますと、今回のイメージはやや冗長でイメージサイズも重めです。ですが、今回は簡単化のためにこのようなファイル内容にしています
</Callout>

### docker-compose.yml

```yaml title="docker-compose.yml" showLineNumbers {3,15}
version: "3"
services:
  app:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp:delegated
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - ./tmp/db:/var/lib/mysql:delegated
      - ./my.cnf:/etc/mysql/conf.d/my.cnf
    cap_add:
      - SYS_NICE
```

ここでは、先程のDockerfileとMySQLを同時に起動させるような記述をしています！
3行目の`app`と15行目の`db`という2つのコンテナが立ち上がることになります。
また、18行目の`MYSQL_ROOT_PASSWORD`は、MySQLのrootユーザーのパスワードになりますので、適宜修正してもらっても構いません。

### entrypoint.sh

```bash title="entrypoint.sh"
#!/bin/bash
set -e

rm -f /myapp/tmp/pids/server.pid

exec "$@"
```

これはシェルスクリプトと言って、ターミナルのコマンドをまとめて実行するようなバッチファイルです。
注意してほしいのが、1行目です。これは**コメントアウトではない**のでしっかり記述してください！！

### Gemfile

```ruby title="Gemfile"
source 'https://rubygems.org'
gem 'rails', '~>6.1.4'
```

Gemfileには一旦Railsのみの記述をしておきます。

### Gemfile.lock

Gemfile.lockは用意するのみで何も書きません！

### my.cnf

```ini title="my.cnf"
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_general_ci
default-authentication-plugin=mysql_native_password
[client]
default-character-set=utf8mb4
```

このファイルはMySQLの設定のためのファイルです。
今回は文字化け対策等最低限の設定をしています。

ここからはいよいよDockerのコマンドを打ち込んでいきます。
カレントディレクトリが`issen`であることを確認して下記コマンドを実行してください！
かなり長いコマンドで、完了までに時間もかかりますが様子を見てあげてください😎

```bash title="ターミナル"
$ docker-compose run --no-deps app rails new . --force --database=mysql --skip-test --skip-spring
```

いつも、`rails new`でプロジェクトを作成することで色々なファイルがカレントディレクトリにできると思います。
上記コマンドでその作業を行っています。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `--skip`系は自分のプロジェクトに応じてアレンジしてください！
</SpeechBubble>

<Callout title="追記（2022/12/30）">
  Rails7からは`spring`がデフォルトでインストールされなくなったので、`--skip-spring`オプションは不要になりました。
</Callout>

ここまで行うと、`Gemfile`や`Gemfile.lock`に記述が追加され、ディレクトリやファイルもいつものRailsのものが作成されているかと思います🥳
あともう少しだけ設定を行って完了です、頑張ってついてきてください！

### ファイル追記、追加コマンド

出来上がった`config`ディレクトリ内の`database.yml`を修正します！

```ruby title="config/database.yml" showLineNumbers {8,9}
# 中略

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db

# 以下略
```

8行目のパスワード部分は、`docker-compose.yml`内の`MYSQL_ROOT_PASSWORD`で指定したものに、
9行目はホスト名を`db`に変更してください！

{/* prettier-ignore */}
<Callout>
  9行目のこの`db`という名称は、`docker-compose.yml`の15行目で指定したコンテナ名です
</Callout>

これで`app`と`db`の接続が完了しましたので、データベースを作成します！

```bash title="ターミナル"
$ docker-compose run app rails db:create
```

最後に、サーバーを立ち上げます！

```bash title="ターミナル"
$ docker-compose up
```

![Railsの初期画面](/articles/rails-new.jpg)

このコマンドで、いつもの`$ rails s`のようなコンソールになると思います。
ブラウザで`localhost:3000`と打っていつもの下記画像のような画面が表示されたら成功です。お疲れ様でした🎉

## よく使うコマンド

ここまでで開発環境を立ち上げることは可能となりましたが、実際に開発する際にどうすればいいか分からないと思います🙄
なのでここからは、開発時に僕がよく使うコマンド等を紹介します！

### 開発を始める時

```bash title="ターミナル"
$ docker-compose up
```

このコマンドは`$ rails s`のように使います。
また、止めたい時は`Ctrl + C`のコマンドで止まります。

### 開発を終わる時

```bash title="ターミナル"
$ docker-compose down
```

ctrl + cをしてから、上記コマンドを打つことで立ち上がっているコマンドが削除されます。
現在のコンテナ状況を知りたい時は、

```bash title="ターミナル"
$ docker container ls
```

で、確認できます。何も表示されていないときはコンテナが何も立ち上がっていないことになります。

作業を再度開始したいときは先程と同様に

```bash title="ターミナル"
$ docker-compose up
```

でOKです😎

### gemを追加した時

gemを追加したときだけ注意が必要です。
一度`$ docker-compose down`でコンテナを削除してもらってから、

```bash title="ターミナル"
$ docker-compose build
```

で、再度イメージを作成してもらう必要があります。
これは、作成したイメージ内には新しく追加したgemが存在していないからです。

## 終わりに

今回は、ざっくりとDockerでRails6の開発環境を作成しました。
Dockerの公式サイトでもRailsの開発環境作成手順は載っているのですが、バージョンが5ですので、注意してください！
Dockerの説明自体はほとんどしていないので、要望がありそうでしたらまた記事にしようと思います🙇‍♂️
Docker + Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇‍♂️

かなり省略したので、もし分からないことがあったら下のプロフィールのX(Twitter)のリンクからDM等していただければ喜んでお答えします！


---

## 【CSS】CSSが効かない・反映されないときの対処法まとめ

- URL: https://blog.to-ko-s.com/articles/css-check
- 著者: 成岡拓哉
- 公開日: 2021-12-19
- タグ: HTML, CSS

> CSSが効かない・反映されないときの原因と対処法をまとめました。キャッシュ、詳細度、クラス名の間違いなどよくある問題を解説します。


## はじめに

### この記事の概要

こんにちは。株式会社TOKOSのエンジニアのタクヤです。

サイトを作成してるときに、CSSが効いていない・うまく反映されないことってよくありますよね。

CSSはブラウザで確認してもエラーが出ないので、原因の特定が難しく、特に初心者の方はそこで躓いて多くの時間を費やしてしまうことがあると思います。

そんなときのために、CSSが効かない・反映されないときのチェック方法と解決策をまとめました。

### 対象となる方

- CSSを勉強中の方
- Web制作でコーディングをしている方

## デベロッパーツール

CSSが効いていない・うまく反映されていないというときは、ブラウザでHTMLやCSSをチェックする必要があります。 その際絶対と言ってよいほど使うのが、デベロッパーツール(検証機能)です。

### デベロッパーツールとは

ブラウザに表示されたページのHTMLやCSS等のコードを細かくチェックできるものです。 各ブラウザに標準で搭載しており、HTMLの構造やCSSのふるまいをチェックできるだけでなく、テキストを変えてみたり、CSSを当ててみたりとコーディングする際には欠かせないものとなっています！

今回はChromeのデベロッパーツールを使用します。

### デベロッパーツールの使い方

デベロッパーツールは、ブラウザ上で「fn + F12」で起動できます。Windowsの方は「F12」です。 他にもいくつかショートカットがあるみたいなので調べてみてください。

起動したら、チェックしたい問題のありそうなHTML要素を選択します。

![デベロッパーツールでHTML要素を選択](/articles/css-check-amazon-01.webp)

すると選択したHTML要素に当たっているCSSをチェックできます。

![デベロッパーツールでCSSをチェック](/articles/css-check-amazon-02.webp)

CSSが効かない・反映されないときに限らず様々な場面でこのデベロッパーツールは使用するので、使い方は覚えておきましょう！

## CSSが反映されない原因と解決策

CSSが効いてない・うまく反映されていないときの対処法を紹介していきます！　上から順番に1つずつ原因を潰していきましょう！

### キャッシュが残っている

デベロッパーツールの説明をしましたが、まずはキャッシュをチェックしてみましょう。

キャッシュとは、ブラウザのデータを一時的に保存したもので、表示スピードを上げるなど閲覧する際にとても便利な機能です。 そんな便利機能のキャッシュですが、ブラウザをリロードしても保存された古い内容が表示されるケースがあります。

そんなときはスーパーリロードをするといいです。 方法は、「Command + Shift + R」です。（Windowsは「Ctrl + Shift + R」）

スーパーリロードすることで、キャッシュを削除してブラウザを更新しましょう。 キャッシュを更新するだけでCSSが反映されることもあるので、まずはこれを試してください。

### 優先順位が低い

反映させたいCSSがブラウザデフォルトのCSSやそれまでに記載したCSSに優先度で負けているパターンがあります。 優先度によって当てたいCSSが別のCSSに負けているのでCSSの指定方法を変える必要があります。

優先順位を上げるには、セレクタをより詳しく指定する必要があります。 詳細度を強くするということです。

詳細度は下記のようになっており、基本的にそれぞれの足し算の合計値によって決まります。 詳細度の値が大きいほど優先度が高いということです。

| セレクタ名                       | 詳細度 |
| -------------------------------- | ------ |
| **要素セレクタ,疑似要素...**     | 1      |
| **クラスセレクター（クラス名）** | 10     |
| **idセレクタ(id名)**             | 100    |

CSSのプロパティに当てる`!important`はこれらを無視して最優先されますので、それにも注意です。

セレクタの優先順位についてより詳しくまとめています！　こちらもチェックしてみてください！

<InternalLink slug="css-specificity" />

### クラス名、id名がおかしい

HTMLに記載したクラス名やid名をスタイルシートに誤って記載してしまうことがあります。 デベロッパーツールでチェックするとCSSの箇所にスタイルがあたっていません。

コーディングをしていると誰しもが、コピペミスや記載ミスがあるのでそこを疑ってみましょう。

プロパティに対して`!important`を指定することで、そもそもCSSがあたっているか確認するのもおすすめです。

### スタイルシートのあとの行で上書きしている

CSSの記述量が多くなると、同じクラスやidに関するCSSが重複してしまうことがあります。 CSSは上から順番に読み込まれるため、スタイルシート内で後で（下で）書いているものの方が優先して反映されます。

デベロッパーツールで該当のCSSを確認し、打ち消し線が引かれているプロパティがあれば上書きされている可能性があります。重複しているCSSを削除するか、記述順を見直しましょう。

### `!important`が効いている

CSSのプロパティに対して`!important`を指定していると、あらゆる優先度を無視してそのスタイルが最優先されます。 そのため、基本的に`!important`は使わないようにするのがいいです。 記載したCSSに`!important`と記載されていないか確認してみてください。

### セミコロンや波括弧が抜けている

CSSを記述するときに、`{}`、`:`、`;`を使用しますが、その使用方法の間違いや過不足があるとうまく反映されません。こちらも念の為チェックするのがいいです。

### スタイルシートが読み込まれていない

そもそもスタイルシートがHTMLに読み込まれていないパターンがあります。 スタイルシートを読み込んでいないとCSSが反映されないので、そちらも念のため確認しましょう。

こちらもプロパティに対して`!important`を指定し、反映されなければ、CSSファイル自体が読み込まれていない可能性があります。

## まとめ

コーディングあるあるの「CSSが効かない・反映されないときの対処法」を解説してきました。 もしCSSが反映されなくても、必ずどこかしらに原因があるので、焦らずにひとつひとつ原因を潰していきましょう。


---

## 【Rails6】CSV出力の方法【最新版】

- URL: https://blog.to-ko-s.com/articles/output-csv
- 著者: 西原月熙
- 公開日: 2021-12-18
- タグ: Rails

> Rails 6でCSVファイルを出力する方法を解説。CSV.generateとsend_dataを使った実装から、モデルにロジックを切り出してコントローラを薄くする方法まで紹介します。


## はじめに

### この記事の概要

Railsで開発をしていて、CSV出力が必要な時が数多くあると思います。
そこで今回は今現在私が実際に使っているCSV出力の方法を説明します！
「Rails csv出力」と調べても色々実装方法が出てしまって悩んでいる人は参考にしてください😎

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  僕が実際に使っている方法ですので、ぜひ最後まで見ていってください！
</SpeechBubble>

### 対象読者

- Rails6でのCSV出力方法が分からない人

### 筆者の環境

| 技術     | バージョン           |
| -------- | -------------------- |
| 実行環境 | Docker (ubuntu20.04) |
| Ruby     | 2.7.4                |
| Rails    | 6.1.4                |

## 実装

### CSV機能のインストール

まずは下ごしらえとして、`config/application.rb`に追記をします！

```ruby title="config/application.rb" showLineNumbers {14}
require "rails"
# Pick the frameworks you want:
require "active_model/railtie"
require "active_job/railtie"
require "active_record/railtie"
require "active_storage/engine"
require "action_controller/railtie"
require "action_mailer/railtie"
require "action_mailbox/engine"
require "action_text/engine"
require "action_view/railtie"
require "sprockets/railtie"

require 'csv'

# -- 以下略 --
```

14行目の`require 'csv'`を追加するだけでCSVに関する準備は完了です！
（13行目までは人それぞれ違うと思います）

{/* prettier-ignore */}
<Callout variant="warning">
  他の記事で色々`require`をしているものを見かけますが、Rails6でCSVを扱いたい場合はこの1行の記述のみでOKです！
  またはCSVの記述を使用するファイルそのものにrequireを記述するのでも問題無いです！
</Callout>

### コントローラでの実装

今回は一例として`user`モデルの名前とメールアドレスをCSV出力してみましょう💪
今回は簡単化のために`index`, `show`等をはじめとしたCRUD以外に`csv_output`というメソッドを用意してあげます。

```ruby title="app/controllers/users_controller.rb" showLineNumbers
# 中略 ~~~

def csv_output
  @users = User.all
  csv_data = CSV.generate do |csv|
    csv << ["ユーザー名", "メールアドレス"]
    @users.each do |user|
      csv << [user.name, user.email]
    end
  end
  send_data(csv_data, filename: "ユーザー一覧.csv")
  redirect_back(fallback_location: root_path)
end

# 以下略 ~~~
```

１つのブロックごとに順番に説明していきます。

### データの取得

```ruby
@users = User.all
```

まずはいつも行っているように`@users`に全部格納します。
この`@users`に格納したレコードを出力します。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  この時に`@user = User.where(name: "田中")`のように絞り込みしてあげれば、その結果のみでCSV出力することが可能です😎
</SpeechBubble>

### CSV形式への変換

```ruby
csv_data = CSV.generate do |csv|
  csv << ["ユーザー名", "メールアドレス"]
  @users.each do |user|
    csv << [user.name, user.email]
  end
end
```

このブロックで実際に`csv_data`にcsvにしたい配列を代入していきます。
`CSV.generate do |csv|`でCSVの機能を使うことになります。

{/* prettier-ignore */}
<Callout variant="warning">
  このCSVの機能は先程の`config/application.rb`の追記をしておかないと機能しません！
</Callout>

`<<`という記号はcsvに右辺の配列を追加することになります！
ですので、6行目が終わった時点ではcsvの中身は`["ユーザー名", "メールアドレス"]`というただの1次元配列ですね。
次に、7~9行目でeach文を回すことで全てのユーザーの名前とメールアドレスをcsvに格納していくことになります。
つまり、`[["ユーザー名", "メールアドレス"], ["田中太郎", "tanaka@example.com"], ["佐藤二朗", "satou@example.com"], ["山田ツキヤ", "yamada@example.com"]]`のように追加されていきます！
最後の`end`が終わったタイミングでcsvの中身が`csv_data`に代入されます！

### ファイルのダウンロード

```ruby
send_data(csv_data, filename: "ユーザー一覧.csv")
```

これで作成した`csv_data`を実際に出力して手元のパソコンにダウンロードします。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  `filename:`には好きな名前を代入可能です！
</SpeechBubble>

### リダイレクト処理

```ruby
redirect_back(fallback_location: root_path)
```

これで元々のパスに戻してあげます。（`index`からこの関数にとんできたら、トップページに戻ります）

以上でCSV出力は完了です、お疲れ様でした🥳

### 補足

実際には、コントローラは薄くしたほうが良いので、これらの記述は全てモデルに寄せてあげた方が中級者っぽくなります😎
具体的には、

```ruby
# 中略 ~~~

def csv_output
  @users = User.all
  send_data(User.csv_output(@users), filename: "ユーザー一覧.csv")
  redirect_back(fallback_location: root_path)
end

# 以下略 ~~~
```

```ruby
class User < ApplicationRecord
# 中略

def self.csv_output(users)
  CSV.generate do |csv|
    csv << ["ユーザー名", "メールアドレス"]
    users.each do |user|
      csv << [user.name, user.email]
    end
  end
end

# 中略
end
```

上記のようにクラスメソッドとして`user.rb`にメソッドを用意してあげればコントローラがスッキリしますね💪
慣れてきた人はこちらの記述にして中級者に近づきましょう🔥

## 終わりに

今回はCSVの出力方法と、補足として薄くしたコントローラーの作成方法を一例として説明しました！
Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇‍♂️
これを参考にして皆さんも良いRailsライフを送ってください！！


---

## 【CSS】要素を親要素いっぱいに広げる方法！aタグで作成したボタンを用いて解説！

- URL: https://blog.to-ko-s.com/articles/css-element
- 著者: 成岡拓哉
- 公開日: 2021-12-12
- タグ: HTML, CSS

> CSSで要素をその親要素いっぱいに広げる方法をaタグで作成したボタンを用いて解説します。 方法は2つあり、1つはaタグに `display:block` を指定する。もう1つ`position`プロパティを使用する方法です。初心者の方はぜひ使ってみてください。


## はじめに

### この記事の概要

株式会社TOKOSのフロントエンドエンジニアのタクヤです！

今回は『要素をその親要素いっぱいに広げる方法』をご紹介したいと思います！　初心者の方にもわかりやすいようにaタグで作成したボタンを用いて解説します！

### 対象となる方

- CSSを勉強中の方
- Web制作でコーディングをしている方
- 要素をその親要素いっぱいに表示する方法を知りたい方

## 結論

要素をその親要素いっぱいに表示する方法は下記2パターンです。

- **aタグに display: block** を指定する方法
- **positionプロパティ**を使用する方法

要素を親要素いっぱいにする系は、初学者の方が必ずと言っていいほどぶち当たる壁ですが、とても簡単なのでぜひ覚えていってください！　それでは順番に解説していきます！

## コーディング

aタグの親要素としてpタグを設けました。 親要素のpタグにaタグの大きさを合わせていきたいと思います。

まず、特に何も指定していないとこうなります。 pタグとaタグそれぞれに色をつけたのでわかるかと思いますが、aタグは親要素であるpタグいっぱいの大きさになっていません。これはaタグのdisplayプロパティがデフォルトでinline（インライン要素）であるからです。

<CodePen url="https://codepen.io/naru-takuya/pen/eYGBEwQ" height={300} defaultTab="html,result" />

### aタグにdisplay: blockを指定する方法

子要素であるaタグに対して`display: block`を指定することで、インライン要素からブロック要素へと変わります。

前述した通り、aタグのdisplayプロパティはデフォルトだとinlineです。インライン要素は横幅や縦幅の指定ができないため、親要素いっぱいに広がりません。

aタグに`display: block`を指定してブロック要素にすると、デフォルトで親要素の幅いっぱいに広がるようになります。

<CodePen url="https://codepen.io/naru-takuya/pen/YzrprPq" height={300} defaultTab="html,result" />

これで子要素が親要素いっぱいに広がりました。 今回はボタンなので、文字が中央にあったほうがいいのでスタイルを調整します。

<CodePen url="https://codepen.io/naru-takuya/pen/ZEXBXYm" height={300} defaultTab="html,result" />

### positionプロパティを使用する方法

display: blockを指定する方法の他にpositionプロパティを使用する方法があります。

親要素であるpタグに対して、「position: relative;」を指定し、 子要素であるaタグに対して、「position: absolute;」を指定することで、親要素を基準に子要素を配置できます。

<CodePen url="https://codepen.io/naru-takuya/pen/bGoBopa" height={300} defaultTab="html,result" />

要素が親要素いっぱいに広がりましたね。 文字が中央にあったほうがいいので、スタイルを調整します。

<CodePen url="https://codepen.io/naru-takuya/pen/XWeNeKw" height={300} defaultTab="html,result" />

## 終わりに

今回は「要素を親要素いっぱいに広げる方法」というテーマでお送りしてきました！
もう一度おさらいですが、「要素を親要素いっぱいに広げる方法」は

- **aタグに display: block** を指定する方法
- **positionプロパティ**を使用する方法

の2つです。
Web制作でコーディングをしている方やCSSを勉強中の方のお役に立てたら嬉しいです！
CSSの基礎固め学習には[こちら](https://amzn.to/3WXwnAA)の書籍がおすすめです。 ぜひご覧になってCSSの知識を深めていきましょう。


---

## 【Rails】bootstrap5の導入方法【コピペでOK】

- URL: https://blog.to-ko-s.com/articles/install-bootstrap5
- 著者: 西原月熙
- 公開日: 2021-12-09
- タグ: Rails

> Rails 6でBootstrap 5を導入する方法をコピペで実装できるように解説。yarnでのインストールからWebpackerの設定、動作確認まで手順を紹介します。


## はじめに

### この記事の概要

皆さん、bootstrap使っていますか？
2020年、ついに脱jQueryを果たしたバージョン5が出ました。
bootstrapは使いたいけど、jQueryは使いたくないという人にはよだれが出るほど嬉しいですね。

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  僕がまさにその一人でした！！
</SpeechBubble>

さて、今回の記事では、そんなbootstrap5をRailsの環境での導入を説明していきます！
コピペで導入できるようにしますので、期待していてください😎
実装についてもバージョン4との違いがありますので、気になる人はぜひ最後まで読んでください🙏
(今回はbootstrap自体の説明はあまりしません🙇‍♂️)

### 対象読者

- RailsでCSSのコーディングを簡単にしたい人
- 最新のbootstrapを使いたい人

### 筆者の環境

| 技術              | バージョン           |
| ----------------- | -------------------- |
| 実行環境          | Docker (ubuntu20.04) |
| Ruby              | 2.7.4                |
| Rails             | 6.1.4                |
| 導入するbootstrap | 5.1.1                |

{/* prettier-ignore */}
<Callout variant="danger" title="追記（2022/12/30）">
  Rails6でWebpackerを使用した前提になっています。
  Webpacker以外を使用する場合は`stylesheet_pack_tag`等を読み替えてもらう必要があります🙇‍♂️
  Rails7の場合はnewするタイミングでcssを指定できるのでものすごく簡単になっています。
</Callout>

## 実装

### 前提

前提として、今回は`yarn`コマンドを使って`bootstrap`のパッケージをインストールします。
Rails6の方は基本的に問題無いと思いますが、古いバージョンの方はバージョンを上げるか適宜読み替えてください。

### bootstrap5のインストール

早速bootstrap5をインストールします。
ターミナルでプロジェクト配下移動して、下記コマンドを打ち込んでください

```bash
$ yarn add bootstrap
```

これだけでプロジェクト内にbootstrapの最新版がインストールされます🎉
バージョンを指定したい場合は下記の様にしてください

```bash
$ yarn add bootstrap@5.1.1
```

{/* prettier-ignore */}
<Callout variant="warning">
  他のサイトで`$ yarn add bootstrap@next`のように紹介しているものがありますが、バージョン5がプレスリリースのタイミングだったためこの記述でインストールしていると想定されます。
  現在は安定版としてバージョン5がリリースされていますので、この記述はしないでください。
</Callout>

さらに、アニメーション周りで必要なライブラリの`popperjs`もインストールします

```bash
$ yarn add @popperjs/core
```

<SpeechBubble icon="/authors/nishihara-tsukiya.jpg" name="ツキヤ">
  筆者の`@popperjs/core`のバージョンは2.10.1でした🛠
</SpeechBubble>

これでインストール周りは完了です！

### ファイルの書き換え

次にファイルの追記、書き換えを行います！
まずは`app/views/layouts/application.html.erb`の`<head>`タグ内に追記をします💪

```erb title="app/views/layouts/application.html.erb" showLineNumbers {11}
<!DOCTYPE html>
<html>
  <head>
    <title>サイトタイトル</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="description" content="metaディスクリプション文章。">
    <%= favicon_pack_tag "favicon.png" %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= render partial: "layouts/flash" %>
    <%= yield %>
  </body>
</html>
```

11行目の部分の`stylesheet_pack_tag`という行を書いてください！
(`stylesheet_link_tag`となっていたら書き換えてください)

次に、WebpackerでのCSSの読み込みのためのディレクトリとファイル(エントリーポイント)を作成します

```bash title="ターミナル"
$ mkdir ./app/javascript/stylesheets
$ touch ./app/javascript/stylesheets/application.scss
```

そして、この作成した`application.scss`ファイル内に1行だけ記述をします。

```css title="app/javascript/stylesheets/application.scss" showLineNumbers
@import "~bootstrap/scss/bootstrap.scss";
```

最後に、作成したこの`application.scss`を読み込ませる記述を追記します。

```javascript title="app/javascript/packs/application.js" showLineNumbers {6,7}
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"

// 中略

import "bootstrap"
import "../stylesheets/application.scss"
```

最後の2行によって`bootstrap`が読み込まれます！！
これで導入の手順が全て完了です、お疲れ様でした🥳

ただ、本当にインストールされているか少し不安ですよね？
導入できているかを1回確認してみましょう

```erb title="app/views/layouts/application.html.erb" showLineNumbers {6}
<!DOCTYPE html>
<html>
  <head>
    <title>サイトタイトル</title>
  </head>
  <body class="bg-dark">
    <%= render partial: "layouts/flash" %>
    <%= yield %>
  </body>
</html>
```

この`bg-dark`というクラスは背景色を真っ黒にするようなスタイリングです！
これで背景色が真っ黒になっていたら確認もOKです💪

### 簡単な使い方

さて、導入はこれにて完了です。
あとは、僕が実際にコーディングの際に使っているサイト達を紹介します。
bootstrapのコーディングをする際にはブラウザのタブを開いておくとかなりはかどります！！

まずは、なんと言っても公式サイトです！

<ExternalLink url="https://getbootstrap.com/docs/5.1/getting-started/introduction/" />
このサイトの左上の検索ボックスから(英単語で)良い感じに調べたらソースコードとプレビューを確認できます！
慣れるまでは少し使いづらいかもしれませんが、ハマったらコレ無しではコーディングできません😎

英語が全然できないよー😭って人は下記サイトもオススメです

<ExternalLink url="https://bootstrap-cheatsheet.themeselection.com/" />
このサイトはボタンを押すだけでプレビューとソースコードが簡単に確認できます！
まずはこちらでどんな種類のコンポーネントがあるか確認して、詳しく調べたかったら公式サイトを確認すると良いですね🔥

### バージョン4との違い

補足となりますが、僕がbootstrap5をつかっていて、バージョン4との違いで驚いたところを補足しておきます。
なんと言っても、spacingの`right`, `left`が`start`, `end`に変更されていた点です。
いつものように`mr-2`とか`pl-3`等のクラスでmarginやpaddingを指定しても効かなくてかなり焦りました。
公式サイトを確認したところ、これらは置き換えられていて、`ms-2`とか`pe-3`のようになっていました。
詳しくは下記ページを参照してください:

<ExternalLink url="https://getbootstrap.com/docs/5.0/migration/" />

他のクラス名も変更されたものがありますが、非推奨となっているだけでまだ使えるものが多いです。
ただ、非推奨となっているものは今後使えなくなる可能性があるので、使用を控えたほうが良いですね😱

## 終わりに

今回はRails6におけるbootstrap5の導入について説明しました！
bootstrapはオリジナル感が出ないというデメリットもありますが、カスタマイズ次第では十分特徴のある見た目も作れます。
また、業務システムや管理画面を始めとしたシステム開発とは相性がかなり良いと思っています！
僕は学習コストに対するパフォーマンスは十分すぎるほど感じています🤤
これからも使っていくので、ぜひ皆さんもbootstrapを宜しくお願いします💪

Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇‍♂️


---

## 【初学者向け】Sprocketsの解説！Webpackerとの比較も

- URL: https://blog.to-ko-s.com/articles/sprockets-overview
- 著者: 西原月熙
- 公開日: 2021-12-05
- タグ: Rails

> RailsのアセットパイプラインSprocketsの仕組みと役割を初学者向けに解説。Webpackerとの違いや使い分け、Rails6以降での推奨についても説明します。


## はじめに

### この記事の概要

Railsで開発をしていて、もちろんCSSを使いたいときってありますよね？
また、JavaScriptで簡単なアニメーションであったり、imgタグで画像を載せたい時も頻繁にあると思います。

この記事は、そんな時に使うSprocketsという技術についての概要を説明します。
また、似たような使い方をするWebpackerとの関係も話すので、どちらを使うか悩んでいる人も必見です！

### 対象読者

- Railsの初学者
- Sprocketsについてあまり理解していない人
- Webpackerとの関係についてあまり理解していない人

## Sprocketsとは

### Sprocketsについて

簡単に説明すると、CSS拡張言語のSCSS(拡張子が.scssで始めるファイル)をひとまとめにして、cssファイルに変換するものです。
それだけではなく、JavaScriptや画像ファイルも圧縮してくれたりと、フロント部分のコーディングに関する色々な機能を行ってくれる優れものです！
つまり、Railsでの開発の際にCSSやJavaScriptを使う際に無意識に使っているものですね😎

### 使い方

、、、なんですが、使い方に関する記事はネット上にかなり転がっていますので、僕が厳選して役に立ったものを張っておきます！
Sprocketsを使ってCSSを扱いたい際は以下の記事を参考にしてみてください！

<ExternalLink url="https://qiita.com/Ryunosuke38/items/a8daf1278ef5ddd20785" />
<ExternalLink url="https://qiita.com/na-tsune/items/d9fb5609511425c76138" />

## Sprocketsは使わない方が良い？

ここからが、僕が今回話したかったことです。
ネットで検索していると、「sprockets削除」「sprockets外す」のような不審なワードが検索候補に出てくるかと思います🙄
それに対する僕の意見を述べさせてもらいますので、参考にしながら今後使っていくかを考えて貰えれば嬉しいです🙏

### Rails6の現状

現在（執筆時点：2021/12/5）のRailsのメジャーバージョン(最初の数字)は"6"です。
Rails6の場合、デフォルトでSprocketsとは別にWebpackerというものもインストールされています。
このWebpackerなんですが、基本的にSprocketsと同じことができてしまいます。
Railsの開発者さん、なぜそんな似たような機能を入れてしまったのですか、、と思ったのですが、やはり後発のWebpackerの方が色々機能として優れています💪

- JavaScriptのライブラリ（例：bootstrap, jQuery）の使用
- デフォルトでのモダンなJSライブラリ（例：React, Vue）への対応
- カスタマイズによるシンタックス、Lint機能

上記は一例ですが、Webpackerの元になっているWebpackへの理解があれば、開発の際に自分でカスタマイズして何でもできちゃいます🥳

{/* prettier-ignore */}
<Callout variant="danger" title="追記（2022/12/30）">
  僕の予想は大外れで、逆にWebpackerがデフォルトのインストールから外れて非推奨になってしまいました。
  Railsの製作者としては、CSS等はSprocketsで管理する方をオススメしているそうなので、現在は僕もSprocketsを使用しています。
</Callout>

### 結論

つまり、Railsの開発者的には、現在SprocketsよりもWebpackerを推奨しています。
現在は両方使えるのですが、今後のバージョンアップ次第によってはSprocketsが使えなくなる可能性もあるかもしれないので、Webpackerを使えるようになっておきましょう😎

今回だけの話では無いのですが、エンジニアたるものキャッチアップをこまめに行なって新しいものを使いこなせると良いですね！

## 終わりに

Sprocketsの概要と、今後はWebpackerを使った方が良いというお話をさせていただきました！
Railsの勉強をしたい方は[この本](https://amzn.to/3YuXqEF)が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇‍♂️

{/* prettier-ignore */}
<Callout variant="danger" title="（2022/12/30 追記を受けて）">
  Rails 7以降ではWebpackerは非推奨となり、CSS等はSprocketsで管理することが推奨されています。
  Rails 6 を使っている場合はどちらでも問題ありませんが、これから新規プロジェクトを始める場合は Sprockets を使うことをおすすめします。
</Callout>