## 目次

1. [はじめに](#はじめに)
2. [Claude Coworkとは何か](#claude-coworkとは何か)
3. [使い始めるための準備](#使い始めるための準備)
4. [セットアップ手順](#セットアップ手順)
5. [コネクタ：Webサービスと安全に連携する](#コネクタwebサービスと安全に連携する)
6. [基本タスク：ファイル・PDF・画像を処理する](#基本タスクファイルpdf画像を処理する)
7. [Dispatch：スマホからPCに仕事を投げる](#dispatchスマホからpcに仕事を投げる)
8. [Scheduled：定期タスクの自動実行](#scheduled定期タスクの自動実行)
9. [まとめ：Coworkで変わる仕事のスタイル](#まとめcoworkで変わる仕事のスタイル)

---

## はじめに

ChatGPTやClaudeのチャットを使っていて、こんなふうに感じたことはありませんか？

- 「毎回同じ作業を頼むのが面倒くさい」
- 「外出中でも、家のPCに作業を任せておけたらいいのに」
- 「ファイルをいちいちアップロードするのがストレス」

その悩みを、**Claude Cowork**が解決します。

Coworkは、Anthropicが発表した**デスクトップAIエージェント**です。チャットで指示を出すだけでClaudeが自律的にファイルを整理したり、ドキュメントを作成したり、Webを調べたりします。「AIとの対話」から「AIに仕事を任せる」へ。そんな新しい使い方を可能にしたのがCoworkです。

---

## 📌 Claude Coworkとは何か

Claude Coworkは、ひと言で言えば**「自分のPCで働くAIアシスタント」**です。

**ChatタブとCoworkの違い：**

```
Chat（ブラウザ・チャットタブ）：「このドキュメントを要約して」→ コピー&ペーストが必要
Cowork（デスクトップ版）：「Downloadsフォルダの請求書PDFをすべてExcelにまとめて」→ 自動でやってくれる
```

CoworkはデスクトップアプリとしてあなたのPCに常駐し、ファイルやアプリに直接アクセスできます。ブラウザやコネクタを通じて、ファイル操作・Web検索・外部サービスへのアクセスを自律的に行います。まるで隣で働く同僚のような存在です。

### Coworkでできること（主な機能）

| カテゴリ | できること |
|---------|-----------|
| **ファイル操作** | フォルダ整理、ファイル名の一括変更、PDF・Excelの処理 |
| **ドキュメント作成** | Wordレポート、Excelシート、スライドの自動生成 |
| **情報収集** | Web検索、調査まとめ、比較レポートの作成 |
| **アプリ操作** | ブラウザ操作、フォーム入力 |
| **スケジュール実行** | 毎朝のメール確認、週次レポートの自動作成 |
| **Dispatch** | スマホからPCのClaudeにタスクを遠隔指示 |

---

## 🚀 使い始めるための準備

### 必要なもの

- **PC**：macOS（Apple Silicon / Intel）または Windows（x64 / arm64）にインストールされたClaude Desktop最新版
- **プラン**：Claude ProまたはMax以上
- **スマホ**：Dispatchを使う場合はClaudeモバイルアプリ（iOS/Android）最新版
- **インターネット接続**：両方のデバイスで常時接続が必要
- **Claude in Chrome（推奨）**：特定のWebページを操作・閲覧するタスクには、ChromeブラウザへのClaude in Chrome拡張機能のインストールが必要です。基本的なWeb検索はCowork単独でも可能ですが、サイトへのログインやページ内容の読み取りなどにはこの拡張機能が必要になります。すべての有料プランで利用可能。

⚠️ **注意**：無料プランではCoworkは使えません。Coworkタブが表示されない場合は  **claude.com/download** からアプリを最新版に更新してください。

📎 公式要件：[Claude Coworkを始める（公式ヘルプ）](https://support.claude.com/ja/articles/13345190-claude-cowork%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B)

---

## 🛠️ セットアップ手順

### ステップ1：Claude Desktopをインストールする

1. **claude.com/download** にアクセス
2. お使いのOS（macOSまたはWindows）に合ったバージョンをダウンロード
3. インストーラーを実行してアプリを起動
4. Claudeアカウントでサインイン

### ステップ2：Coworkタブを確認する

アプリ上部に **Chat ／ Cowork ／ Code** の3つのタブが表示されます。

![img_01.png](https://cont.sterfield.co.jp/uploads/img_01_6a1dd8e915.png)

Coworkタブが表示されていない場合は、アプリを最新版に更新してみてください。

### ステップ3：初めてのタスクを試してみる

準備が完了したら、まずは簡単なタスクから試しましょう。

```
「Downloadsフォルダ内のPDFファイルを『PDFs』というフォルダに移動して、
画像ファイルは『Images』フォルダにまとめてください」
```

Claudeが計画を提示し、実行ログを表示しながら作業を進めます。

**【実際の画面】**
![img_02.png](https://cont.sterfield.co.jp/uploads/img_02_4b33633040.png)

---

## 🔌 コネクタ：Webサービスと安全に連携する

**コネクタ（Connector）** とは、GmailやGoogle DriveなどのWebサービスにCoworkがAPI経由で直接アクセスするための連携機能です。画面を操作する必要がないため、速くて安定しています。

### コネクタとComputer Useの使い分け

| | コネクタ | Computer Use |
|---|---|---|
| **使う場面** | Gmail・Google Drive・Slackなどのクラウドサービス | コネクタがないアプリ・社内システムなど |
| **仕組み** | API経由で直接連携（高速・安定） | 画面を見てクリック・入力（UI操作） |
| **設定** | 「Customize」→「コネクタ」タブからサービスを選んで連携 | Computer Useを別途有効化 |

**基本の考え方**：対応コネクタがあるサービスはコネクタを使い、それ以外にはComputer Useを使います。

### コネクタの設定方法

1. Claude Desktopの左サイドバーにある「Customize」をクリックする

![img_03.png](https://cont.sterfield.co.jp/uploads/img_03_57fbc9b61b.png)

2. 「コネクタ」タブから使いたいサービス（例：Gmail）を選び、「+」ボタンを押して連携する

![img_04.png](https://cont.sterfield.co.jp/uploads/img_04_1cddca7c14.png)

3. 連携後はすべてのセッションで自動的に使えるようになります

**対応サービス例**：Gmail・Google Drive・Google Calendar・Slack・GitHubなど

📎 [コネクタを使ってClaudeの機能を拡張する（公式ヘルプ）](https://support.claude.com/ja/articles/11176164-use-connectors-to-extend-claude-s-capabilities)

---

## 📋 基本タスク：ファイル・PDF・画像を処理する

Coworkのチャットに指示するだけで、ファイル操作からドキュメント作成まで幅広く対応します。PC内のファイルを直接指定できるため、いちいちアップロードする手間がありません。

### 活用例

**資料整理の自動化：**

```
「Downloadsフォルダにある請求書PDFを全部確認して、
クライアント名・金額・日付をExcelシートにまとめてください」
```

経費精算や請求書管理が、手動入力なしで完了します。

**PDFや画像の読み取り：**

```
「この契約書PDFの重要なポイントを箇条書きでまとめてください」
「この名刺の画像から名前・会社・連絡先を読み取ってリストにして」
```

PDFの要約・画像内テキストの抽出・表の変換など、幅広い形式に対応しています。

**情報収集＆レポート作成：**

```
「〇〇業界の最新ニュースをWebで調べて、
ポイントをまとめたWordファイルを作成してください」
```

情報収集から資料作成まで、一気通貫で対応します。

---

## 📱 Dispatch：スマホからPCに仕事を投げる

Coworkの中でも特に便利なのが「**Dispatch**（ディスパッチ）」です。

### Dispatchとは？

**外出先のスマホから、自宅・オフィスのPCのClaudeに指示を送れる機能**です。スマホとPCがそれぞれインターネットに接続されていれば使えます。

たとえば通勤電車の中でスマホから「〇〇業界の最新トレンドをWebでリサーチして、Wordファイルにまとめて保存しておいて」と指示するだけで、デスクトップのClaudeが自律的に作業を進めます。会社に着いたときには資料がすでに完成している、そんな使い方ができます。

スマホとデスクトップをまたいで**1つの継続的な会話スレッド**が維持されるので、前の会話の内容を引き継いだまま続きから作業できます。

### Dispatchのセットアップ手順

**PC側（Claude Desktop）:**

1. Coworkタブを開き、左サイドバーの「Dispatch」をクリック
2. 「始める」ボタンをクリック
3. ファイルアクセス許可を有効にし、「スリープしない」設定をオンにする

![img_05.png](https://cont.sterfield.co.jp/uploads/img_05_228a7dd8eb.png)

**スマホ側（Claudeモバイルアプリ）:**

1. Claudeアプリを開き、サイドバーの「Dispatch」をタップ
2. PCと同じClaudeアカウントにログインしていれば接続完了

 📖 **参考**：
- [Dispatch in Claude Cowork（公式・英語）](https://claude.com/resources/tutorials/dispatch-in-claude-cowork)
- [Claude Cowork Dispatch のセットアップガイド──QR ペアリング廃止後の最新フロー（Zenn・日本語）](https://zenn.dev/and_dot/articles/e42520784892a2)

設定完了！以降はスマホからメッセージを送るだけで、PCのCoworkが自動でタスクを実行します。

⚠️ **スリープに注意**：ここで言う「スリープ」はPCが省電力モードに入った状態のことで、**画面をオフにするだけであれば問題ありません**。ただし**ノートPCの蓋を閉じるとスリープ扱いになる**ため注意が必要です。タスク実行中にスリープするかアプリを閉じると即停止します。

---

## 🕐 Scheduled：定期タスクの自動実行

### Scheduledとは？

「毎朝〇〇をやって」「毎週月曜に〇〇をまとめて」という定期タスクを自動化する機能です。一度設定すれば、あとはClaudeが繰り返し実行します。

### 使い方

Coworkのチャットに日本語で指示するだけで設定できます：

```
「毎朝9時にGmailを確認して、未読の重要メールを
箇条書きでまとめてデスクトップに保存しておいて」
```

設定後は左サイドバーの「**Scheduled**」から確認・編集・一時停止・削除が可能です。

![img_06.png](https://cont.sterfield.co.jp/uploads/img_06_071d455a16.png)

### 実行条件

⚠️ **PCが起動していてClaude Desktopアプリが開いている**間のみ実行されます。スリープ中やアプリが閉じている場合はスキップされますが、**PCが起動してアプリが再度開かれると、スキップされたタスクが自動的に実行されます**。スキップされた実行はタスク履歴と通知で確認できます。

### 活用例

| やりたいこと | 指示の例 |
|------------|---------|
| 毎朝のメール確認 | 「毎朝9時にGmailの未読をまとめてデスクトップに保存して」 |
| 週次レポート | 「毎週月曜の朝にプロジェクトの進捗をまとめて」 |
| 日次情報収集 | 「毎朝〇〇業界のニュースを調べてWordにまとめて」 |

💡 GmailなどはCoworkの **コネクタ（Connector）** で連携するとスムーズです（Computer Use不要）。

📎 [Coworkで定期的なタスクをスケジュール設定する（公式ヘルプ）](https://support.claude.com/ja/articles/13854387-claude-cowork%E3%81%A7%E5%AE%9A%E6%9C%9F%E7%9A%84%E3%81%AA%E3%82%BF%E3%82%B9%E3%82%AF%E3%82%92%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)

---

## 🌟 まとめ：Coworkで変わる仕事のスタイル

Claude Coworkは、AIとの関係を「質問する道具」から「仕事を任せる同僚」へと変える画期的なツールです。

**こんな人に特におすすめです：**

- 繰り返し作業が多く、自動化したいと感じている人
- ファイル整理やレポート作成に時間を取られている人
- 移動中や隙間時間にも仕事を進めたい人
- テクニカルな知識なしにAIをもっと活用したい人

まずは簡単なファイル整理から試してみて、徐々に活用範囲を広げていくのがおすすめです。

---

## 参考リンク

- [Claude ダウンロードページ](https://claude.com/download)
- [Claude Coworkを始める（公式ヘルプ）](https://support.claude.com/ja/articles/13345190-claude-cowork%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B)
- [Coworkのどこからでもタスクを割り当てる（公式ヘルプ）](https://support.claude.com/ja/articles/13947068)
- [コネクタを使ってClaudeの機能を拡張する（公式ヘルプ）](https://support.claude.com/ja/articles/11176164-use-connectors-to-extend-claude-s-capabilities)
- [コンピュータ使用をCoworkで有効にする（公式ヘルプ）](https://support.claude.com/en/articles/14128542)
- [Coworkで定期的なタスクをスケジュール設定する（公式ヘルプ）](https://support.claude.com/ja/articles/13854387-claude-cowork%E3%81%A7%E5%AE%9A%E6%9C%9F%E7%9A%84%E3%81%AA%E3%82%BF%E3%82%B9%E3%82%AF%E3%82%92%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)

---

*最終更新：2026年5月 ／ 情報はリサーチプレビュー段階のものを含みます。最新情報はAnthropicの公式サイトをご確認ください。*


large_eyecatch.png

medium_eyecatch.png

small_eyecatch.png

thumbnail_eyecatch.png

eyecatch.png

Claude Coworkとは？初心者でもわかる完全ガイド【2026年版】

## 目次
1. <a href="#section1">Claudeとは</a>
2. <a href="#section2">有料版の使用制限と効率的な使い方</a>
3. <a href="#section3">Claudeの3つの使い方とその違い</a>
4. <a href="#section4">質問の仕方のコツ</a>
5. <a href="#section5">セッション管理</a>
6. <a href="#section6">Gitとの連携</a>
7. <a href="#section7">初心者が気をつけること</a>

---
<a id="section1"></a>
## 1. Claudeとは

### 1.1 Claudeの基本

**Claude**は、米国Anthropic社が開発した高性能AIアシスタントです。

**開発元:** Anthropic社（OpenAIの元メンバーが創業）  
**初公開:** 2023年3月  
**最新モデル:** Claude Opus 4.5, Claude Sonnet 4.5, Claude Haiku 4.5

### 1.2 なぜ開発者にClaudeなのか？

| 特徴 | 説明 |
|------|------|
| **高精度なコード生成** | Python, JavaScript, PHP, Java, C++など多言語対応 |
| **日本語対応** | 日本語コメントやドキュメント生成が得意 |
| **コードレビュー** | セキュリティやパフォーマンスの指摘が優秀 |

---
<a id="section2"></a>
## 2. 有料版の使用制限と効率的な使い方

### 2.1 ⚠️ 重要: 有料版 = 無制限ではない

多くの方が誤解していますが、**Claude Pro/Maxプランでも使用回数に制限があります。**

```
❌ 誤解: 「有料版なら使い放題！」
✅ 正解: 「有料版でも5時間ごとに制限がある」
```

### 2.2 使用制限の詳細

#### リセットサイクルと目安

| プラン | リセット周期 | 目安の使用回数 |
|--------|--------------|---------------|
| Free | 5時間ごと | 10〜20回程度 |
| Pro | 5時間ごと | 50〜100回程度（Freeの約5倍） |
| Max 5x | 5時間ごと | 250〜500回程度（Proの5倍） |
| Max 20x | 5時間ごと | 1000〜2000回程度（Proの20倍） |

※実際の使用回数は、メッセージの長さや複雑さによって変動します。

#### 制限に達するとどうなる？

制限に達すると、以下のメッセージが表示されます：

```
⚠️ You've reached your usage limit for Claude Sonnet.
Your limit will reset in 6 hours and 23 minutes.
```

**対処法:**
- 制限がリセットされるまで待つ
- 軽量モデル（Haiku）に切り替える
- 上位プランへのアップグレードを検討

### 2.3 使用回数に影響する要因

**メッセージの長さ** - 短いメッセージ（「バグを修正して」）は少ないカウント、長いメッセージは多いカウント

**会話の長さ（履歴）** - Claudeは毎回、全履歴を読み込むため、メッセージ数が増えるほど使用回数が増加

**複数ファイルの添付** - テキストのみ < PDF複数 + 画像2枚など

**使用モデル** - Haiku < Sonnet < Opus の順で使用回数が増加

| モデル | 使用回数への影響 | 性能 | 推奨用途 |
|--------|-----------------|------|----------|
| Claude Haiku 4.5 | 小（1x） | 軽量・高速 | 簡単なタスク |
| Claude Sonnet 4.5 | 標準（2〜3x） | バランス型 | 通常の開発作業 |
| Claude Opus 4 | 大（5x） | 最高性能 | 複雑なタスク |

### 2.4 制限を効率的に使うコツ

**✅ 推奨する使い方**

新しいチャットを頻繁に作成（30分〜1時間、20〜30メッセージごと）、必要最小限の情報のみ提供、軽量モデル（Haiku）を活用、複数の質問をまとめる。

**まとめて質問の例:**
```
❌ 1つずつ質問（3回のやり取り）
「この関数の名前は？」→「引数は？」→「戻り値は？」

✅ まとめて質問（1回のやり取り）
「この関数について: 1. 関数名 2. 引数 3. 戻り値」
```

**❌ 避けるべき使い方**
- 1つのチャットを延々と続ける
- 不要なファイルを大量にアップロード
- Opusモデルを簡単なタスクで多用

---
<a id="section3"></a>
## 3. Claudeの3つの使い方とその違い

Claudeには、用途に応じて3つの使い方があります。

### 3.1 Claude.ai（Webブラウザ版）

**アクセス:** https://claude.ai | **環境:** Webブラウザ | **推奨:** 初心者向け

✅ **メリット:** インストール不要、ファイルアップロード対応、Artifacts機能でコードをプレビュー、自動保存

❌ **デメリット:** プロジェクト全体の解析には不向き、ファイルの自動編集はできない

**向いている作業:** コードレビュー、ドキュメント作成、バグ修正、API仕様確認、テストコード生成

### 3.2 Claude Code（コマンドライン版）

**環境:** ターミナル（Mac / Linux / Windows）| **対応OS:** Mac ✅、Linux ✅、Windows ✅（WSL経由）

**インストール:**

公式のインストール方法は以下を参照してください：
- 公式ドキュメント: https://docs.anthropic.com/claude/docs/claude-code

インストール後のログイン:
```bash
claude login
```

✅ **メリット:** プロジェクト全体を解析可能、複数ファイルの自動編集、ファイル操作、Git連携が便利

❌ **デメリット:** ターミナル操作の知識が必要、ビジュアルプレビューがない

### 3.3 VS Code拡張機能

**環境:** Visual Studio Code | **対応OS:** Windows / Mac / Linux

✅ **メリット:** エディタ内で直接操作、プロジェクト全体の解析、Claude Codeと同等の機能

❌ **デメリット:** 初回セットアップが必要

### 3.4 3つのツール比較

| 項目 | Claude.ai | Claude Code | VS Code拡張 |
|:---|:---:|:---:|:---:|
| **初心者向け** | ✅ 最も簡単 | △ やや難しい | △ 中程度 |
| **複数ファイル自動編集** | ❌ 手動のみ | ✅ 完全対応 | △ 部分的 |
| **プロジェクト全体解析** | △ 手動確認必要 | ✅ 完全対応 | △ 部分的 |
| **セットアップ** | ✅ 不要 | △ インストール必要 | △ APIキー設定必要 |

---
<a id="section4"></a>
## 4. 質問の仕方のコツ

### 4.1 効果的な質問の4つの原則

**原則1: 具体的に**
```
❌ 「ログイン機能を作って」
✅ 「Symfony 6.3でJWT認証を使ったログイン機能を作ってください
   - メールアドレス・パスワード認証、トークン有効期限24時間」
```

**原則2: コンテキストを提供**
```
❌ 「エラーが出ます」
✅ 「[エラーメッセージ] が出ています。[発生状況] です」
```

**原則3: 期待する出力を明示**
```
❌ 「この関数を説明して」
✅ 「この関数について: 1. 目的 2. 引数 3. 戻り値 4. 使用例」
```

**原則4: 制約を明示**
```
❌ 「データベース設計を提案して」
✅ 「MySQL 8.0、想定データ量100万件、多言語対応(日本語・英語・中国語)で」
```

---
<a id="section5"></a>
## 5. セッション管理

Claudeは毎回、会話の全履歴を読み込むため、メッセージ数が増えるとレスポンスが遅くなります。

**新規チャット作成のタイミング:**
- 30分〜1時間経過した
- 20〜30回のやり取りをした
- 話題が変わった

**Claude Codeのコマンド:**

| コマンド | 用途 |
|--------|------|
| `/compact` | 履歴を圧縮。同じプロジェクト内で継続する時 |
| `/clear` | 履歴を完全削除。別プロジェクトに移る時 |

---
<a id="section6"></a>
## 6. Gitとの連携

Claudeを使うと、Git関連の作業が効率的になります。以下は、各作業がどのツールで実行でき、難易度がどのくらいかを示した表です。

| 作業内容 | Claude.ai | Claude Code | 難易度 | 説明 |
|---------|-----------|------------|--------|------|
| **コミットメッセージ生成** | ✅ 可能 | ✅ 可能 | 易しい | diffやコード変更を貼り付けて実行 |
| **git diff の解析** | ✅ 可能 | ✅ 可能 | 易しい | 変更内容を確認・説明してもらう |
| **コードレビュー** | ✅ 可能 | ✅ 可能 | 易しい | 該当コードを貼り付けて指摘を受ける |
| **コンフリクト解決** | ⚠️ 手動確認が必要 | ✅ 自動編集対応 | 中程度 | Claude Codeなら効率的 |
| **PR説明文生成** | ✅ 可能 | ✅ 可能 | 易しい | 内容を説明してもらう |
| **リファクタリング** | ⚠️ 手動編集が必要 | ✅ 複数ファイル自動編集 | 中程度 | Claude Codeなら効率的 |

### 6.1 Claude Codeで便利な使い方

Claude Codeを使う際、シェルエイリアスを設定すると、よく使うコマンドが短縮できます。

**~/.zshrc または ~/.bashrc に追加:**

```bash
# クイックレビュー
alias ccr='claude "このコードをレビューして、改善点を指摘してください"'

# バグ修正
alias ccf='claude "このコードのバグを見つけて、修正してください"'

# テスト生成
alias cct='claude "このコードのユニットテストを生成してください"'

# コミットメッセージ生成
alias ccm='git diff --cached | claude "上記の変更に対して、わかりやすいコミットメッセージを1行で生成してください"'
```

**使い方の例:**

```bash
# コードをレビュー
ccr app/services/UserService.php

# バグを修正
ccf app/controllers/AuthController.php

# テストを自動生成
cct tests/UserServiceTest.php
```

---
<a id="section7"></a>
## 7. 初心者が気をつけること

### 7.1 よくある失敗パターン

| パターン | 対策 |
|---------|------|
| 情報詰め込みすぎ | 必要な部分だけを厳選 |
| チャットの長期使用 | 30分〜1時間で新規作成 |
| 生成コードの無検証使用 | 必ずコードレビュー |
| 機密情報の入力 | 環境変数使用、ダミーデータで質問 |

### 7.2 コストを抑えるコツ

1. 軽量モデル（Haiku）の活用
2. 複数の質問をまとめる
3. 20〜30メッセージごとに新規チャット作成
4. 該当部分のみを抜粋（ファイル全体不要）

**重要:** Claudeはあくまでツール。生成されたコードは必ずレビューし、最終判断は開発者であるあなたが行ってください。

**更新情報:** このブログは2025年12月時点での情報です。仕様変更の可能性があるため、最新情報は公式ドキュメントで確認してください。

| 項目 | URL |
|------|-----|
| プラン・制限 | https://support.anthropic.com/ja/ |
| API | https://docs.anthropic.com |
| Claude Code | https://docs.anthropic.com/claude/docs/claude-code |
---

## 参考リンク

- [Claude公式サイト](https://claude.ai)
- [Claude API ドキュメント](https://docs.anthropic.com)

large_claude-eyecatch.jpg

medium_claude-eyecatch.jpg

small_claude-eyecatch.jpg

thumbnail_claude-eyecatch.jpg

claude-eyecatch.jpg

Claude有料版を初めて使う開発者向けガイド

## はじめに

Node.jsは、Web開発や自動化スクリプト、APIサーバー構築など、幅広い分野で利用されているJavaScript実行環境です。<br>
本記事では、これからNode.jsを学ぶ方に向けて、基本的な使い方と環境構築の手順を解説します。

## 1. Node.jsとは？

* JavaScriptをサーバーサイドで実行できる環境
* Google ChromeのV8エンジンをベースに開発
* 非同期処理（イベント駆動型）に強く、高速な動作が可能
* Webアプリ、APIサーバー、CLIツール、IoT開発など幅広く利用されている

**フロントエンド開発者が、そのままJavaScriptを活かしてサーバーサイド開発できるのが最大のメリットです。**

**特徴：**
- **非同期処理が得意**（高速なI/O）
- **npm** という豊富なパッケージ管理システム
- クロスプラットフォーム対応（Windows / macOS / Linux）

## 2. Node.jsのインストール

Node.js をインストールする前に、まず nvm を使うかどうか を決めましょう。

### 2.1 先に考える：nvmを使うかどうか

* nvm を使う場合<br>
先に nvm をインストールしてから、nvm 経由で Node.js を入れる

* nvm を使わない場合<br>
公式サイトから直接 Node.js をインストール

**これにより、複数バージョンを切り替えたい場合も迷わず手順を進められます。**

### 2.2 公式サイトからダウンロード（nvm を使わない場合）
1. [Node.js公式サイト](https://nodejs.org/) にアクセス
2. **LTS（安定版）** を選んでダウンロード
3. インストーラーの指示に従ってインストール

#### 2.2.1 バージョン確認
インストール後、ターミナルで以下を実行してバージョンを確認します。

```
node -v   # Node.js のバージョンを確認
npm -v    # パッケージ管理ツール npm のバージョンを確認
```
👉 正しくバージョンが表示されればインストール成功です。

### 2.3 Node Version Manager (nvm)を使う方法

プロジェクトごとに異なる Node.js バージョンを使い分けたい場合に便利なのが nvm（Node Version Manager）です。<br>
nvm を使えば、複数バージョンを簡単に切り替えることができます。

#### 2.3.1 nvm の使い方（macOS / Linux の例）

```
# nvm のインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Node.js LTS をインストール
nvm install --lts

# バージョン確認
node -v
npm -v
```
Windows の場合は [nvm-windows](https://github.com/coreybutler/nvm-windows/releases)を利用します。

## 3. 最初のプログラムを作ってみよう

1. 任意のフォルダを作成
2. app.js を作成して以下を記述

```js
console.log("Hello, Node.js!");
```
そのフォルダで、次のコマンドを実行します。

```
node app.js
```
👉 ターミナルに Hello, Node.js! と表示されれば成功です。

## まとめ

本記事では、Node.jsの基本と環境構築について解説しました。

* Node.jsは JavaScriptをサーバーサイドで実行できる環境
* 初心者はまず 公式サイトからLTS版をインストール すればOK
* 実務や学習を進めるときは nvm を使うと便利
* node app.js を実行して「Hello, Node.js!」が表示されればスタート成功

次回は、npm の使い方と簡単なサーバー構築について解説します。


Node.js入門 ― 基本の使い方と環境構築

## はじめに

GitHub Copilot Chat は、VS Code 内でチャット形式でコードに関する質問やエラー修正、最適化の提案を依頼できる強力なツールです。本記事では、Copilot Chat の活用方法を紹介し、コーディング効率を大幅に向上させるための具体的な手順やコマンドを解説します。

## Copilot Chat のメリット

- **リアルタイムサポート**：コードに関する疑問をその場で解決でき、作業効率が向上します。
- **コード生成と最適化**：テストコードの作成や重複コードの排除を自動化し、コードの質を改善します。
- **エラー修正**：エラー箇所を素早く指摘し、具体的な修正案を提示してくれるため、デバッグ作業がスムーズに進みます。
- **ドキュメント生成**：JSDoc コメントを自動生成し、コードの可読性と保守性を高めます。

これらの機能を活用することで、コーディングの効率が大幅に向上します。次のセクションでは、GitHub Copilot Chatのセットアップ手順について説明します。

## セットアップ手順

1. **VS Codeのインストール**
   - [公式サイト](https://code.visualstudio.com/download)から最新のVS Codeをダウンロードし、インストールします。

2. **GitHub Copilotのインストール**
   - VS Codeを開き、拡張機能ビューを開きます。
   - 検索バーに「GitHub Copilot」と入力し、拡張機能をインストールします。

3. **GitHubアカウントのリンク**
   - GitHub Copilotを使用するには、GitHubアカウントが必要です。アカウントを作成し、VS Codeにログインします。

これで準備完了です。

![copilot_img_01.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_01_0ee6bdf5c3.jpg)

## Copilot Chat の便利なスラッシュコマンド

以下に、特に役立つ Copilot Chat のスラッシュコマンドを5つ紹介します。

### 1. /explain: コードを解説
1. 解説したいコードを選択。
2. Ctrl + / で Copilot Chat を開き、/explain と入力。

```css
.example {
  width: 100px;
  height: 100px;
  background-color: blue;
}
```
Copilot Chatで /explain と送信すると、選択したコードの解説をCopilotが提供してくれます。コードの意図や動作を理解するのに役立ちます。

![copilot_img_02.png](https://cont.sterfield.co.jp/uploads/copilot_img_02_92bd6d0f25.png)

### 2. /tests: テストコード生成
1. テストを書きたい関数を選択。
2. Copilot Chat を開き、/tests と指示。

```javascript
export function add(a, b) {
  return a + b;
}
```
![copilot_img_03.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_03_e615f7b1ca.jpg)
Copilot Chatで /tests と送信すると、次のようにテストコードが生成してくれます。
```javascript
// add.test.js
import { add } from './add';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});
```

![copilot_img_09.png](https://cont.sterfield.co.jp/uploads/copilot_img_09_49fadbe438.png)
Copilot Chatで jest.config.js を作成してください と送信すると、次のようにテストコードが生成してくれます。

```javascript
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
};
```

Jest を使うなら、次の手順を実行します。

```bash
npm install --save-dev jest ts-jest @types/jest
```

`package.json` にスクリプトを追加：
```json
{
  "scripts": {
    "test": "jest"
  }
}
```

テスト実行：
```bash
npm test
```

結果：
![copilot_img_04.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_04_e905eee6a0.jpg)

### 3. /fix: エラー修正
1. エラーがあるコードを選択。
2. Copilot Chat を開き、/fix と入力。

```css
/* 修正前：セミコロン抜けやプロパティのミス */
.example {
  width: 100px
  height: 100px;
  background-colour: blue;
}
```
![copilot_img_05.png](https://cont.sterfield.co.jp/uploads/copilot_img_05_61595bd033.png)

Copilot Chatで /fix と送信すると、次のようにセミコロンの抜けやプロパティのミスなどを自動で修正してくれます。

```css
/* 修正後 */
.example {
  width: 100px;
  height: 100px;
  background-color: blue;
}
```

### 4./optimize: コードの最適化
1. 改善したいコードを選択。
2. Copilot Chat を開き、/optimize と送信。

```css
/* 最適化前：冗長なプロパティ */
button {
  display: block;
  display: flex;
  color: black;
  color: #000000;
  padding: 10px;
  padding-left: 10px;
}
```
![copilot_img_06.png](https://cont.sterfield.co.jp/uploads/copilot_img_06_03aa376538.png)

Copilot Chatで /optimize と送信すると、次のように重複プロパティを削除し、無駄を減らします。

```css
/* 最適化後：無駄を削減 */
.button {
  display: flex;
  color: #000;
  padding: 10px;
}
```

### 5./doc: ドキュメントコメント生成

1. ドキュメントが必要な関数を選択。
2. Copilot Chat で、/doc と送信。

```javascript
function add(a, b) {
  return a + b;
}
```
![copilot_img_07.png](https://cont.sterfield.co.jp/uploads/copilot_img_07_5664e6cbc8.png)

Copilot Chatで /doc と送信すると、次のように読み手に優しいコメントを付けてくれる便利な機能です。
```javascript
/**
 * Adds two numbers together.
 *
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @returns {number} The sum of the two numbers.
 */
function add(a, b) {
  return a + b;
}
```

## まとめ
GitHub Copilot Chat は、開発者のコーディング体験を大きく向上させる強力なツールです。本記事で紹介したスラッシュコマンドを活用することで、コードの理解、エラー修正、最適化、テスト作成、ドキュメント生成といった作業を効率よく進められます。特に、/explain でコードの意図を確認したり、/fix でエラーを素早く修正したりと、日々の開発をサポートしてくれる便利な機能が満載です。

今回紹介したもの以外にも、Copilot Chat には便利なコマンドがたくさんあります。ぜひ Copilot Chat を使いこなして、より快適で生産的な開発環境を手に入れてください！

## 参考サイト
[https://qiita.com/kohashi/items/05bc01cbb3a74fdc7227](https://qiita.com/kohashi/items/05bc01cbb3a74fdc7227)



GitHub Copilot Chat を活用して効率的にコーディングする方法

## はじめに

Gulpは、フロントエンド開発の作業を効率化するための自動化ツールです。ファイルを一つひとつ手作業で処理する代わりに、Gulpを使えば、様々なタスクを自動で実行できるため、時間を大幅に節約できます。さらに、CSSを効率よく管理するためにSassという拡張機能を導入することで、コードの見やすさが向上し、メンテナンスもしやすくなります。

この記事では、Gulpの基本的な導入方法から、Sassを使った開発の進め方までを解説します。

## 1. Gulpとは？

Gulpは、開発作業を自動化するための「タスクランナー」です。
手動で行うと時間がかかる以下のような処理を、簡単なコマンドで自動実行できるのが特徴です。

* Sass/LESSファイルのCSSへの自動変換
* JavaScriptやCSSの圧縮・結合
* ファイルの変更監視
* ローカルサーバーの起動やブラウザの自動リロード
* 画像の最適化 など
  
Gulpを使えば、作業の効率が上がり、開発時間を短縮できます。

## 2. 環境準備
### 2.1 事前準備

まず、Gulpを使用するために、Node.js をインストールします。

* Node.js（[公式サイト](https://nodejs.org/en)からインストール）
  
インストール後、以下のコマンドでバージョンが確認できます。

```
node -v
```

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

### 2.2 プロジェクトの初期化

プロジェクトのディレクトリで以下のコマンドを実行し、package.json を自動生成します。
```
npm init -y
```
これで、プロジェクトディレクトリに package.json が作成されます。

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

## 3. Gulpのインストール
プロジェクトのローカルにGulpをインストールします。
```
npm install gulp --save-dev
```
これで　node_modules フォルダと package-lock.json が作成され、package.json の "devDependencies" に Gulp が追加されます。

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

## 4. Gulpfileの作成
次に、プロジェクトのルートディレクトリに gulpfile.js を作成し、基本的なタスクを設定します。
```
const gulp = require('gulp');

gulp.task('default', function() {
  console.log('Gulp is running!');
});
```

## 5. Sassの導入
以下のコマンドで、Sassをコンパイルするための gulp-sass と sass をインストールします。
```
npm install --save-dev gulp-sass sass
```

## 6. Sassコンパイルタスクの設定
以下のコードを gulpfile.js に追加し、SassファイルをCSSに変換するタスクを追加します。
```
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('dev_src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass'));
```

## 7. ディレクトリ構造（例）
```
my-project/
│
├── dev_src/                 ← ソースファイルを格納するフォルダ
│   ├── files/               ← 静的ファイルやアセットを格納
│   │   └── assets/          ← 画像やフォントなどのリソース
│   │       └── images/      ← 画像ファイル
│   ├── pug/                 ← Pugテンプレートファイルを格納
│   │   └── index.pug        ← メインのPugファイル
│   └── scss/                ← Sassファイルを格納
│       └── style.scss       ← メインのSassファイル
├── gulpfile.js              ← Gulpのタスク設定ファイル
├── package.json             ← プロジェクトの設定情報
└── package-lock.json        ← インストールしたパッケージの依存関係
```

## 8. Sassファイルの作成
dev_src/scss/style.scss に以下のコードを追加します:
```
$primary-color: #333;

body {
  color: $primary-color;
}
```

## 9. 動作確認
以下のコマンドを実行して、Gulpを起動します。
```
 npx gulp
```

## 10.　CSS 内容の確認

Gulpを実行した後、dist/フォルダにはコンパイルされたHTMLやCSSファイルが生成されます。具体的には、以下のようなファイルが出力されます。
```
my-project/
│
├── dist/               ← コンパイルされたHTMLやCSSが出力される
│   ├── index.html      ← Pugから生成されたHTMLファイル
│   └── style.css       ← Sassから生成されたCSSファイル
├── dev_src/
│   ├── files/
│   │   └── assets/
│   │       └── images/
│   ├── pug/
│   │   └── index.pug
│   └── scss/
│       └── style.scss
├── gulpfile.js
├── package.json
└── package-lock.json
```
特に、dist/style.cssの中身が以下のようになっていれば、Sassから正常にコンパイルされていることが確認できます。
```
body {
  color: #333;
}
```

## 11. まとめ

これで、Gulpを使ったプロジェクトのセットアップとSassファイルのコンパイルの手順が完了しました。Gulpを使うことで、Sassのコンパイルやファイルの変更を自動で監視できるようになり、開発の効率が上がります。

**他にもできること**

Gulpを使用すると、以下のような他のタスクも簡単に自動化できます。

* JavaScriptの圧縮と結合

  gulp-uglify や gulp-concat を使って、JavaScriptファイルを圧縮し、一つにまとめることで、読み込み時間を短縮できます。

* CSSの圧縮

  gulp-clean-css を利用して、生成されたCSSファイルを圧縮し、ファイルサイズを小さくできます。

* 画像の最適化

  gulp-imagemin を使用して、画像ファイルのサイズを削減し、ページの読み込み速度を向上させることが可能です。

これらの機能を活用することで、さらに開発がスムーズになります。Gulpには他にも多くの便利な機能がありますので、自分のプロジェクトに合ったタスクを見つけて、効率的なフロントエンド開発を進めてみてください。

## 参考
* https://ics.media/entry/3290/
* https://stand-4u.com/css/sass/setup_gulpsass.html

Gulpを使ったプロジェクトの基本設定とSass導入手順

## はじめに

この記事では、SassのMixinを使って、CSSのプロパティに値を適切な単位で自動的に適用する方法を説明します。SassはCSSの拡張言語であり、Mixinは再利用可能なスタイルのブロックを定義する機能です。Mixinを使用すると、同じスタイルを複数の場所で使い回すことができます。

具体的には、ビューポートの幅に応じて値を調整するためのVW単位や、親要素やコンテキストの幅に応じて値を計算するためのパーセンテージ単位を自動的に適用します。これにより、レスポンシブデザインを実現し、異なるデバイスや画面サイズに対応したスタイルを簡単に作成できます。

SassのMixinを使用して、VW単位やパーセンテージ単位を自動的に計算する方法を詳しく解説します。この方法を理解し、実際のプロジェクトで活用することで、効率的で柔軟なスタイルシートの作成が可能になります。

以下の項目を含めて、SassのMixinの活用方法を説明します。

1. Sassとは何か？
2. Mixinとは何か？
3. 単位の値を自動的に計算する方法

## 1. Sassとは何か？

Sass（Syntactically Awesome Stylesheets）は、CSSの記述をより効率的にするための拡張言語です。基本的には、普通のCSSと同じようにスタイルを記述しますが、いくつかの追加機能を提供しています。例えば、変数やネスト、Mixinなどの機能があります。これらの機能を使うことで、スタイルシートの記述が簡潔になり、保守性が向上します。つまり、SassはCSSの書き方をより便利にするためのツールです。

## 2. Mixinとは何か？

Mixin（ミキシン）は、Sassで再利用可能なスタイルの塊を定義する方法です。基本的には、CSSのスタイルルールをまとめたコードブロックです。これを定義しておくと、同じスタイルを複数の場所で使い回すことができます。Mixinは、プロパティと値の組み合わせをパラメータとして受け取り、それをCSSに変換します。つまり、同じスタイルを何度も書く必要がなくなり、コードの再利用性と保守性を高めることができます。

## 3. 単位の値を自動的に計算する方法

単位の値の自動計算とは、SassのMixinを使って、指定された値に適切な単位を自動的に付与することです。例えば、ビューポートの幅に対して相対的な値であるVW（viewport width）単位や、親要素やコンテキストに対する割合で指定するパーセンテージ単位などがあります。これらの単位を自動的に計算してCSSに適用することで、レスポンシブデザインや柔軟なスタイル設計を実現できます。

単位の値を自動的に計算する方法を使うと、以下のような利点があります。

**1. 画面サイズに合わせて自動調整:** 画面の大きさに応じて、文字や要素の大きさを自動的に調整できます。

**2. 手間を省く:** 値を手動で調整する必要がなくなり、開発時間を短縮できます。

**3. 一貫性を保つ:** 同じ値が異なる場所で常に同じように表示され、一貫性のあるデザインを保つことができます。

**4. レスポンシブデザイン:** 異なるデバイスや画面サイズに対応しやすくなり、ユーザーに最適な表示を提供できます。

### 3.1. VW単位の自動計算

VW単位の自動計算は、ビューポート（ウェブページを表示する画面領域）の幅に対する割合で値を指定する方法です。これは、画面の幅に応じて要素のサイズやフォントサイズを自動的に調整することを意味します。Sassのmixinを使えば、このVW単位を活用した自動計算を簡単に実現できます。つまり、画面の大きさに合わせて要素の大きさや文字サイズが自動的に変化するように設定できるということです。

**_get_vw**という関数と**fz-vw**というMixinが用意されています。これらの機能を使うことで、vwを簡単に設定できます。

**コード例(SCSS)**

```
//pxをvwに変換するfunction
@function _get_vw($size, $viewport: 640) {
  $rate: calc(100 / $viewport);
  @return $rate * $size * 1vw;
}

//フォント用のMixin
@mixin fz-vw($font_size: 10, $viewsize: 640) {
  font-size: $font_size * 1px;
  font-size: _get_vw($font_size, $viewsize);
}

width: _get_vw(117,640);
padding: _get_vw(15,640) 0;
@include fz-vw(29,640);

```

**実行結果(CSS)**

```
width: 18.28125vw;
padding: 2.34375vw 0;
font-size: 4.53125vw;

```

上記のにコードの詳細な説明を示します。

#### 関数 _get_vw ####

**引数:** <br>
```$size```: 変換対象のピクセル値<br>
```$viewport```: 参照するビューポート幅（デフォルト: 640px）

**戻り値:** <br>
ピクセル値をvwに変換した値

**Mixin fz-vw**

**引数:** <br>
```$font_size```: 設定するフォントサイズ（ピクセル値）<br>
```$viewsize```: 参照するビューポート幅（デフォルト: 640px）<br>
```width: _get_vw(117,640);```:要素の幅を117pxをvwに変換した値に設定します。<br>
```padding: _get_vw(15,640) 0;```:要素のパディングを左右に15pxをvwに変換した値、上下に0を設定します。<br>
```@include fz-vw(29,640);```:要素のフォントサイズを29pxをvwに変換した値に設定します。

**戻り値:** <br>
ビューポート幅に応じて要素のサイズやフォントサイズが自動的に調整されます。


### 3.2. パーセンテージ値の自動計算

パーセンテージ値は、親要素やコンテキストの幅に対する割合で値を指定するための単位です。SassのMixinを使って、特定のピクセル値を親要素やコンテキストの幅に基づいて自動的にパーセンテージ値に変換する方法を説明します。

**コード例(SCSS)**

```
//pxを%に変換するfunction
@function sw($size, $basewidth: 1180) {
  $rate: calc(100 / $basewidth);
  @return $rate * $size * 1%;
}

padding-top: sw(20,640);
width: sw(47,560);
```

**実行結果(CSS)**

```
padding-top: 3.125%;
width: 8.4%;
```

上記のにコードの詳細な説明を示します。

#### 関数 sw ####

**引数:** <br>
```$size```: 変換したいピクセル値<br>
```$basewidth```: 基準となるウィンドウ幅（デフォルトは1180px）

**処理:** <br>
```$rate = calc(100 / $basewidth);```
ウィンドウ幅に対する1pxあたりの割合を計算します。<br>
```@return $rate * $size * 1%;```:ピクセル値を割合に変換し、% を付加します。

**戻り値:** <br>
ピクセル値をウィンドウ幅に対する割合に変換した値（%）

**補足** <br>
```$basewidth``` は、関数内でデフォルト値として1180pxが設定されていますが、必要に応じて変更できます。vw単位以外にも、em単位やrem単位など、様々な単位を使ってレスポンシブデザインを実現できます。
今回の例では、ウィンドウ幅に対する割合を計算するために calc() 関数を使用していますが、Sassのバージョンによっては div() 関数でも同様の処理を行うことができます。


## まとめ

今回紹介した方法を使えば、簡単にレスポンシブなWebデザインを作成できます。ビューポートの幅に対する割合で値を指定するVW単位や、親要素やコンテキストの幅に対する割合で値を指定するパーセンテージ単位を活用することで、画面サイズに応じて自動的にスタイルを調整できます。実際にプロジェクトに適用してみて、どのように効果が現れるか試してみてください。


## 参考

https://qiita.com/katsunory/items/3bede89cee8e2ded8426

SassのMixinを使って、単位、幅の値を自動的に計算

## はじめに

2023 年には、CSS にいくつかの新しい機能が追加されましたので　このブログでは、2023年の新しいCSSの機能について紹介したいと思います。

最新のCSS技術や仕様は、ウェブページが早く読み込まれ、表示される速さや効率を良くすることを目指しています。

新しいCSSの機能やツールは、開発者がコードをより効果的に書き、管理するのに役立ちます。

Web 開発者は、より個性的で魅力的な Web ページを作成できるようになります。
すべてのブラウザでサポートされているわけではありません。ただし、ほとんどの主要なブラウザでは、これらの機能がサポートされています。

今回以下の新しい　CSS について説明します。

1. inset
2. Accent-color
3. Gap Property for Flexbox
4. -webkit-line-clamp
5. Small Viewport Units(svh)
6. Transform Properties

## 1. inset

CSS insetは、要素をその親要素の端に対して配置するためのプロパティです。通常の配置ではなく、要素が親要素からはみ出るようなデザインを作成する際に便利です。

**前**
```
element {
  top: 80%;
  right: auto;
  bottom: auto;
  left: 50%;
}
```
このコードはtop、right、bottom、left の各プロパティを個別に指定しています。

**現時**
```
element {
  inset: 80% auto auto 50%;
}
```
現時は inset プロパティを 使て　1 行で指定できるようになりました。

**Browser Support**

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


## 2. accent-color

accent-colorプロパティとは、ラウザが提供するデフォルトのフォーム要素（チェックボックスとラジオボタンとか）の背景色を変更することができるものです。ただし、このプロパティを使用すると、フォームの見た目はブラウザによって統一的に管理されるため、その点に注意が必要です。accent-colorは、2023年からすべてのブラウザにサポートされました。


**html**
```
<input type="checkbox" class="custom" checked />Checkbox
```

**css**
```
.custom{
  accent-color: yellow;
}
```

***Result***

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

**Browser Support**

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


## 3. Gap Property for Flexbox

Gap プロパティは、flexbox レイアウトで各アイテムの余白を指定するプロパティです。
余白を指定すると　margin も使う人が多いですが、gap と　margin の違いがあります。

**Gap**
* flexbox レイアウトでのみ使用できます。
* 単一の値または 2 つの値で指定できます。
  ```
  gap: 10px;/* 行と列の両方に同じギャップ */
  gap: 10px 20px;/* 行に10px、列に20pxの異なるギャップ */
  ```
* 余白を指定すると、最初と最後の要素余白も範囲されません。
  :not()や:nth-childなどの擬似クラスを使用する必要がなく、CSSのコードがシンプルになります。

**Margin**
* 任意のレイアウトで使用できます。
* 単一の値、2 つの値、または 4 つの値で指定できます。
  ```
  margin: 10px;/* すべての辺に同じマージン */
  margin: 10px 20px;/* 上下には10pxのマージン、左右には20pxのマージン */
  margin: 10px 20px 15px 5px;/* 上、右、下、左それぞれ異なるマージン */
  ```
* 余白を指定すると、最初と最後の余白も範囲されます。

**html**
```
<div class="flexbox">
  <div class="flex-item">div1</div>
  <div class="flex-item">div2</div>
  <div class="flex-item">div3</div>
  <div class="flex-item">div4</div>
  <div class="flex-item">div5</div>
  <div class="flex-item">div6</div>
  <div class="flex-item">div7</div>
  <div class="flex-item">div8</div>
  <div class="flex-item">div9</div>
</div>
```

**css**
```
.flexbox {
  display: flex;
  gap: 10px;
  width: 500px;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-item{
  background: yellow;
  width: 30%;
  color: #000;
  padding: 10px 0;
  text-align: center;
}
```

**Result**

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

**Browser Support**

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

## 4. -webkit-line-clamp

-webkit-line-clamp は、CSS の属性で、テキストの表示行数を決める機能です。この機能を使うと、テキストの折り返しを管理して、簡潔で読みやすいテキストブロックを作成することができます。

**html**
```
<p class="truncate-text">
    This is a long piece of text that will be truncated after three lines using the -webkit-line-clamp property. This is a long piece of text that will be truncated after three lines using the -webkit-line-clamp property.
</p>
```

**css**
```
.truncate-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; 
  width: 200px;
}
```

**Result**

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

**Browser Support**

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


## 5. Small Viewport Units(svh)

Small Viewport Units (svh)は、ユーザーに表示される最小のビューポートの高さを表す単位です。最小のビューポートの高さは、ユーザーエージェントによってすべてのインターフェース要素が除外されます。
要素の高さを簡単に調整できます。アドレスバーが含まれるため、要素の実際の高さが異なることもあります。

**html**
```
<div id="container">
  <label>Top Full Height Example(svh)</label>
  <p>Bottom Full Height Example(svh)</p>   
</div>
```

**css**
```
#container {
  background-color: green;
  height: 100svh; 
  position: relative;
}
p{
  position: absolute;
  bottom: 0;
}
label{
  position: absolute;
  top: 0;
}
```
上記の　コード によると　divの高さを 100svh としているので　モバイルの場合アドレスバーの上に表示するようになりました。

div　の　高さを 100vh とすると　下のテキスト(Bottom Full Height Example(svh))が見えなくなります。

**Result**

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

**Browser Support**

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


## 6. Transform Properties

CSS の transform プロパティは、要素の位置、回転、スケール、傾きなどを変更するために使用されます。

**前**
```
.target {
  transform: translateX(50%);
  transform: rotate(50deg);
  transform: scale(1.5);
}
```
このコードは、3 行にわたって、translateX()、rotate()、scale() の各関数を指定しています。

**現時**
```
.target {
  transform: translateX(50%) rotate(50deg) scale(1.5);
}
```
このコードは、1 行だけで、translateX()、rotate()、scale() の各関数を指定出来るようになりました。

**Browser Support**

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


## まとめ

将来、新しいCSSの機能がますます広くサポートされることで、開発者は安定してこれらの機能を活用できるようになります。
新しい機能を使うと、開発者はもっと効率的に作業できて、コードを書くことがスムーズになるでしょう。

日々のプロジェクト開発において、新しいCSSを取り入れて活かしていきたいです。

ただし、新しいCSS機能を利用する前に、ご希望の機能がブラウザでサポートされているか確認するために、このリンク（https://caniuse.com/ ）から確認してください。

## 参考

* https://www.w3.org/Style/CSS/all-properties.en.html
* https://developer.mozilla.org/ja/docs/Web/CSS


Blogブログ

Articles

Contact Us