前回css3のアニメーションの記事を書きましたが、
<a href="/designer/css3%e3%81%aeanimation%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%82%89%e4%ba%88%e6%83%b3%e4%bb%a5%e4%b8%8a%e3%81%ab%e7%b0%a1%e5%8d%98%e3%81%a0%e3%81%a3%e3%81%9f%ef%bc%81.html">css3のanimationを使ってみたら予想以上に簡単だった！ | スターフィールド株式会社</a>
タイトルのようなwebサービスがあるようです。
その名も、<a href="http://bouncejs.com/" target="_blank">Bounce.js</a>
四角いボックスのアニメーションを、
様々な項目から設定でき、css3でエクスポートできます。
エクスポートのソースかなり長いですね笑
&nbsp;
アニメーションのパターンも用意されています。
<a href="http://bouncejs.com/" target="_blank" class="link">Bounce.js</a>
&nbsp;

css3アニメーションをwebブラウザ上で作成できるサービス

## はじめに

Sass を使っていると、次のような警告が表示されることがあります。

```
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
```

これはエラーではありませんが、将来的に使えなくなる機能であることを知らせる警告です。
Sass の公式コンパイラである Dart Sass では、@import が非推奨となり、3.0.0 で削除される予定です。
この記事では、なぜ @import が廃止されるのか、そしてどのように対応すればよいのかをわかりやすく解説します。

## なぜ @import は廃止されるのか？

**1. グローバルスコープの問題**

```scss
@import "variables";
```

このように書くと、読み込んだファイル内の変数や mixin がすべてグローバルに展開されます。

その結果、

- 名前の衝突が起こりやすい
- プロジェクトが大きくなると管理が難しい

といった問題が発生します。

**2. 重複読み込みの可能性**

同じファイルを複数回 @import すると、CSS が重複して出力される場合があります。
意図しないスタイルの増加につながることもあります。

**3. モジュール設計に適していない**

現在の開発では、ファイルごとに役割を分ける「モジュール設計」が一般的です。
しかし @import には名前空間の仕組みがなく、この考え方に合っていません。

## これからは @use / @forward を使う

新しい書き方は @use です。

```scss
@use "variables";

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

@use を使うと、自動的に名前空間が付与されます。
そのため、どのファイルの変数なのかが明確になります。

### 名前空間のカスタマイズ

実務では、名前空間を短くしたり、省略したりすることがよくあります。

**1. as でカスタマイズ**

```scss
@use "variables" as vars;

body {
  color: vars.$primary-color; // 短縮できる
}
```

**2. as * でグローバル展開**

```scss
@use "variables" as *;

body {
  color: $primary-color; // 名前空間なしで使える
}
```

`as *` を使うと、名前空間なしで変数を使えますが、
名前の衝突リスクがあるため、慎重に使う必要があります。

## @forward とは？

```scss
@forward "variables";
```

@forward は、他のファイルにまとめて公開したいときに使います。
共通スタイルやライブラリ構成で便利です。

### @use と @forward の違い

- **@use** は、そのファイル内で使うために読み込む
- **@forward** は、他のファイルに再公開するために読み込む

### 具体的な利用例

例えば、複数の設定ファイルをまとめる `_index.scss` を作る場合：

**ファイル構成**

```
styles/
  ├── _variables.scss
  ├── _mixins.scss
  ├── _functions.scss
  └── _index.scss
main.scss
```

**各ファイルの内容**

```scss
// styles/_variables.scss
$primary-color: #3498db;
$font-size: 16px;
```

```scss
// styles/_mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

```scss
// styles/_functions.scss
@function double($value) {
  @return $value * 2;
}
```

**@forward でまとめる**

```scss
// styles/_index.scss
@forward "variables";
@forward "mixins";
@forward "functions";
```

**メインファイルで使う**

```scss
// main.scss
@use "styles"; // _index.scss を読み込む

body {
  color: styles.$primary-color; // variables の内容にアクセス
  font-size: styles.double(8px); // functions の内容にアクセス
  
  .container {
    @include styles.flex-center; // mixins の内容にアクセス
  }
}
```

**@forward を使わない場合との比較**

```scss
// @forward を使わない場合
@use "styles/variables";
@use "styles/mixins";
@use "styles/functions";

body {
  color: variables.$primary-color;
  font-size: functions.double(8px);
  
  .container {
    @include mixins.flex-center;
  }
}
```

@forward を使えば、複数のファイルを 1 つにまとめて公開でき、
インポート文を減らしてコードをシンプルに保てます。

## 既存プロジェクトの対応方法

**1. @import を @use / @forward に変更**

自分のファイルで使う場合は `@use` を使います：

```scss
@import "variables";
```

⬇

```scss
@use "variables";
```

他のファイルに再公開する場合は `@forward` を使います：

```scss
// _index.scss
@import "variables";
@import "mixins";
```

⬇

```scss
// _index.scss
@forward "variables";
@forward "mixins";
```

**2. 変数の書き方を修正**

```scss
color: $primary-color;
```

⬇

```scss
color: variables.$primary-color;
```

このように、ファイル名を付けて参照します。

## まとめ

@import がなくなるのは、ただのルール変更ではありません。
Sass が「モジュール」という考え方にしっかり変わるための、大事なステップです。

@use / @forward を使うことで、

- コードを直しやすくなる
- 同じコードを何回も読みこまなくてよくなる
- 変数やファイルの使う場所がはっきりする

という良い点があります。

これからの Sass を、もっと安全でわかりやすく使うために、@use / @forward を使うことをおすすめします。

large_eyecatch.jpg

medium_eyecatch.jpg

small_eyecatch.jpg

thumbnail_eyecatch.jpg

eyecatch.jpg

Sass の @import は廃止へ — Dart Sass 3.0.0 に向けた対応方法

## はじめに

Anthropicが提供するCLIベースのAIコーディングエージェント「Claude Code」を使った開発ワークフローをご紹介します。

Claude Codeの特徴は、ターミナル上で動作し、GitHubのISSUEやPRと直接連携できる点です。これにより、ISSUEを起点とした開発フローを非常にスムーズに進めることができます。

## Claude Codeとは

[Claude Code](https://docs.anthropic.com/ja/docs/claude-code/overview)は、Anthropicが提供するCLIベースのAIコーディングエージェントです。ターミナルから自然言語で指示を出すだけで、コードの生成・修正からGit操作まで一連の開発作業を自律的に進めてくれます。

Claude Codeの基本的な使い方やインストール方法については、[前回の記事「Claude有料版を初めて使う開発者向けガイド」](/blog/blog-32/)で詳しく解説していますので、そちらをご覧ください。

本記事では、Claude Codeの中でも特に強力なGitHub連携機能を活用した「ISSUE駆動開発」のワークフローに焦点を当てて紹介します。

## ISSUE駆動開発とは

ISSUE駆動開発は、ISSUEを起点として開発を進める手法です。GitHubやGitLabなど、ISSUEトラッカーを持つサービスで実践できます。すべての作業がISSUEに紐づくため、以下のようなメリットがあります。

- トレーサビリティ: なぜその変更が行われたかが明確
- チーム連携: 作業状況の可視化と共有が容易
- 品質管理: レビューとテストのプロセスが明確

## Claude CodeによるISSUE駆動開発ワークフロー

Claude Codeを使うと、ISSUE駆動開発が驚くほどスムーズになります。以下に実際のワークフローを紹介します。

Claude CodeはCLAUDE.mdという設定ファイルでカスタマイズできます。今回のワークフローでは、CLAUDE.mdという設定ファイルに「ISSUEのURLが提供された場合はghコマンドで内容を確認する」といった指示を記述しておく必要があります。

### 1. ISSUEの確認と計画立案

```
> #123のISSUEに対応してください
```

このように指示すると、Claude Codeは以下を自動で行います。

1. `gh issue view 123` でISSUEの内容を取得
2. 要件を分析し、TODOリストを作成
3. 仕様や設計に不足があれば指摘し、見直しを促す
4. 作業計画を提示して確認を求める

ここで重要なのは、AIとの議論を通じて明確になった仕様や設計をISSUE側に反映させることです。これにより、ISSUEが単なるタスク管理ではなく、ISSUEが開発の意図や設計の背景を記録した、生きた仕様書として機能するようになります。

### 2. ブランチ作成と実装

計画が承認されると、Claude Codeは以下のワークフローを実行します。

1. フィーチャーブランチを作成（例: dev/123_add-user-validation）
2. 必要なファイルを特定し、コードを実装
3. 動作確認やテストを実行
4. 問題があれば修正を繰り返す

### 3. PRの作成とレビュー依頼

実装が完了すると、Claude Codeは変更内容をまとめたPRを自動作成します。

```
> PRを作成してください
```

PRには以下が自動で含まれます。

- 変更内容のサマリー
- テスト計画
- 関連するISSUEへのリンク

## やってみた所感

実際に3ヶ月間、このワークフローで開発を続けてきました。その中で得られた気づきを共有します。

### 既存プロジェクトへの導入のしやすさ

最も大きなメリットは、今まで使っていたGitHub ISSUEをそのまま活用できる点です。新しいツールやフローを導入する際、既存の運用を変える必要があると導入コストが跳ね上がりますが、Claude CodeはGitHubのISSUEを直接読み込んで内容を理解するため、既存のプロジェクト管理をそのまま維持できます。

この3ヶ月間、ほぼ全ての実装作業をClaude Codeに任せることができています。ISSUEを起点にした開発フローが確立されていれば、導入は驚くほどスムーズです。

### AIを信じて任せることの重要性

運用を続ける中で気づいたのは、細かくやり方を指示しすぎない方がAIの能力を発揮してくれるということです。

最初は「このファイルを開いて」「この関数を修正して」と細かく指示を出していましたが、それではAIの自律性を活かせません。「#123のISSUEに対応して」とだけ伝え、計画立案から任せる方が、結果的に質の高いアウトプットが得られます。人間が想定していなかったより良いアプローチを提案してくれることも少なくありません。

### 伴走スタイルがベストプラクティス

一方で完全に自律させるのではなく、あくまでも「伴走」というスタンスを維持することをおすすめします。

AIに複数のタスクを並列で任せたり、完全に放置して自律的に進めさせることも技術的には可能です。しかし、そうすると人間側のレビュー工数が一気に増え、かえって非効率になります。1つのタスクをAIと一緒に進め、要所要所で確認しながら進める「伴走スタイル」が、現時点ではベストプラクティスだと感じています。

「人間がISSUEを作成し、AIが実装する」という一方通行の役割分担ではなく、ISSUEを軸に人間とAIが協働しながら開発を進める。これがClaude Codeを活用したISSUE駆動開発の醍醐味だと感じています。

## まとめ

Claude Codeを使ったISSUE駆動開発は、開発ワークフローを大きく効率化する可能性を秘めています。特に、ISSUEの確認からPR作成までの一連の流れをAIがサポートしてくれることで、開発者はより本質的な設計や問題解決に集中できます。

設定ファイルを活用すれば、チームのコーディング規約やワークフローをClaude Codeに教え込むことも可能です。これにより、チーム全体で一貫した開発スタイルを維持しながら、AIの力を借りることができます。

AIコーディングエージェントはまだ発展途上ですが、開発者の強力なパートナーとなる未来は確実に近づいています。皆さんもぜひ、Claude Codeを使ったISSUE駆動開発を体験してみてください。

large_eyecatch.png

medium_eyecatch.png

small_eyecatch.png

thumbnail_eyecatch.png

eyecatch.png

Claude Codeで始めるISSUE駆動開発

## 目次
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有料版を初めて使う開発者向けガイド

large_eycatch-gemini-vs-cloud.png

medium_eycatch-gemini-vs-cloud.png

small_eycatch-gemini-vs-cloud.png

thumbnail_eycatch-gemini-vs-cloud.png

eycatch-gemini-vs-cloud.png

画像処理系AIの Gemini 2.5 Flash Image と Cloud Vision API を比べてみる（Next.jsの実装例付き）

## はじめに

データを分析する際、数値をそのまま眺めるだけでなく、グラフなどで可視化して視覚的に分かりやすくすることが重要です。
そんな時に活用できるのが、Google が提供する無料の BI ツール<a href="https://lookerstudio.google.com" target="_blank" rel="noopener noreferrer">Looker Studio</a>です。

今回は Looker Studio の基本的な使い方から、少し応用的な機能までを紹介します。

## Looker Studio とは？

Looker Studio（ルッカースタジオ）とは、Google が提供する無料の BI（ビジネスインテリジェンス）ツールです。

点在する様々なデータを一つに集約し、グラフや表、地図などを用いて視覚的に分かりやすいダッシュボードやレポートを自動で作成できます。

プログラミングなどの専門知識は不要で、直感的なマウス操作（ドラッグ＆ドロップ）で誰でも簡単に見やすいレポートを作成できるのが大きな特長です。

以前は「Google データポータル」という名称で知られていましたが、2022 年 10 月に Google のデータ分析プラットフォーム「Looker」ファミリーに統合され、現在の名称に変更されました。

## Looker Studio でできること

### 様々なデータソースへの接続

Google アナリティクス（GA4）や Google 広告、Google スプレッドシートはもちろん、YouTube アナリティクス、BigQuery（Google Cloud のデータウェアハウス）など、様々な Google サービスに接続できます。さらに、CSV ファイルのアップロードや、外部のデータベース（MySQL など）にも対応しており、社内外に散らばるデータを一元的に管理できます。

### データの可視化（ビジュアライゼーション）

棒グラフ、折れ線グラフ、円グラフ、地図、スコアカード、ピボットテーブルなど、多彩なグラフを作成できます。また、色やフォント、レイアウトを自由に変更し、ブランドイメージに合ったレポートを作成可能です。

### インタラクティブなレポート作成

静的なグラフを並べるだけでなく、閲覧者が期間を指定したり、特定の項目で絞り込み（フィルタ）をかけたりできる「動的なレポート」を作成できます。これにより、レポートの閲覧者は自身でデータを深掘りし、必要な情報を得ることができます。

### レポートの共有と共同編集

作成したレポートは、URL を共有するだけで、チームや顧客と簡単に共有できます。閲覧のみ、編集可能といった権限設定も柔軟に行えるため、安全なデータ共有が可能です。また、Google ドキュメントのように、複数人で同時にレポートを編集することもできます。

### レポート作成の自動化

一度レポートを作成すれば、元のデータソースが更新されると、Looker Studio のレポートも自動的に最新の状態に更新されます。これにより、「毎週」「毎月」といった定期的なレポート作成の手間から解放されます。

## Looker Studio の使い方（基本）

### データ追加

今回はサンプルとして、<a href="https://www.data.jma.go.jp/risk/obsdl/" target="_blank" rel="noopener noreferrer">気象庁のサイト</a>からダウンロードした、以下のような気象データを使用します。

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

Looker Studio にデータを追加するには、ヘッダーメニューの「データを追加」ボタンをクリックします。

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

次に、接続したいデータソースのコネクタ（今回は Google スプレッドシート）を選択し、必要な設定を行って「追加」ボタンをクリックすると、データがレポートに追加されます。

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

スプレッドシートを選択した場合は、以下のように対象のシートやオプションを設定できます。

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

### グラフ追加

上部のツールバーから「グラフを追加」をクリックし、表示されるリストから追加したいグラフの種類を選択します。そして、レポートのキャンバス上の任意の場所をクリックするとグラフが配置されます。グラフの種類は後からでも変更可能です。

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

### ディメンションと指標

Looker Studio では、主に「ディメンション」と「指標」を使ってグラフを作成します。

- **ディメンション**: データをどのような切り口で見るかを定義する項目です（例：日付、商品カテゴリ、地域など）。グラフでは主に軸として使われます。
- **指標**: 集計・計算される具体的な数値データのことです（例：売上、ユーザー数、気温など）。グラフでは主に値として使われます。

例えば、折れ線グラフでディメンションを「年月日」、指標を「平均気温(℃)」に設定すると、以下のような時系列グラフが作成されます。

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

### コントロール

コントロールは、閲覧者がレポートの表示内容を動的に変更できるようにする機能です。例えば、表示するデータの期間を任意に変更したり、特定の流入経路だけのデータを表示するなど、インタラクティブな操作が可能になります。

コントロールは、上部ツールバーの「コントロールを追加」から追加できます。

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

先ほど作成したグラフに「期間設定」のコントロールを追加すると、以下のように閲覧者が表示期間を自由に変更できるようになります。

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

### レポートの共有

画面右上の「共有」ボタンから、作成したレポートを他のユーザーと共有できます。共有する際には、「閲覧者」「編集者」といった権限をユーザーごとに設定できます。

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

## Looker Studio の使い方（応用）

### スタイル調整

各グラフや表を選択した際に表示される「スタイル」タブから、タイトル、フォント、色、凡例の表示などを細かく調整できます。レポート全体のデザインを統一したり、ブランドイメージに合わせたりすることが可能です。

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

### データ統合

データ統合は、複数のデータソースを 1 つのデータソースにまとめることができる機能です。これは、SQL の JOIN のように、異なるデータソースを共通のキー（結合キー）で紐づける機能です。

今回は例として、<a href="https://www.data.jma.go.jp/risk/obsdl/" target="_blank" rel="noopener noreferrer">気象庁のサイト</a>から追加でダウンロードした、別の気象データを使用して説明します。

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

メニューの「リソース」→「統合を管理」から統合の管理画面に移動し、「統合を追加」をクリックします。

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

結合するテーブルを選択し、それぞれのテーブルから使用するディメンションと指標を設定します。

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

次に「結合を設定」から、結合方法（内部、左外部など）や結合条件（キーとなるフィールド）を設定します。

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

統合して作成された新しいデータソースをグラフのデータソースとして選択することで、複数のデータソースをまたいだグラフが作成できます。

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

### 計算フィールド

計算フィールドは、既存の項目をもとに、演算子、関数、正規表現などを使って、独自のディメンションや指標を定義できる機能です。

ここでは例として、日ごとの寒暖差（最高気温 - 最低気温）を算出する計算フィールドを作成します。

メニューの「リソース」→「追加済みのデータソースの管理」からデータソースの管理画面に移動し、計算フィールドを追加したいデータソースの「編集」をクリックします。

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

次に「フィールドを追加」→「計算フィールドを追加」をクリックします。

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

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


フィールド名と計算式を入力します。計算式には、四則演算や CASE 文、さらには様々な<a href="https://cloud.google.com/looker/docs/studio/function-list" target="_blank" rel="noopener noreferrer">関数</a>を使用できます。

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

作成した計算フィールドは、通常のフィールドと同様に、グラフのディメンションや指標として利用できます。

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

## まとめ

今回は、Google が提供する無料の BI ツール「Looker Studio」について、基本的な使い方から応用的な機能までを紹介しました。
Looker Studio を活用することで、プログラミングの知識がなくても、様々なデータを可視化し、示唆に富んだインタラクティブなレポートを簡単に作成できます。

主なポイントは以下の通りです。

- **多様なデータソース接続**: Google 系のサービスはもちろん、CSV や外部 DB など、様々なデータに接続可能。
- **直感的な操作**: ドラッグ＆ドロップでグラフや表を自由に配置し、レポートを作成。
- **動的なレポート**: フィルタや期間設定などのコントロールを追加し、インタラクティブな分析を実現。
- **高度な機能**: データ統合や計算フィールドにより、より深いデータ分析が可能。
- **簡単な共有と自動更新**: 作成したレポートは URL で簡単に共有でき、データは自動で最新の状態に保たれる。

本記事が、Looker Studio を使い始めるきっかけとなれば幸いです。

## 参考

- <a href="https://www.dsk-cloud.com/blog/gc/what-is-google-looker-studio" target="_blank" rel="noopener noreferrer">https://www.dsk-cloud.com/blog/gc/what-is-google-looker-studio</a>
- <a href="https://www.dsk-cloud.com/blog/gc/basic-usage-of-looker-studio" target="_blank" rel="noopener noreferrer">https://www.dsk-cloud.com/blog/gc/basic-usage-of-looker-studio</a>
- <a href="https://inhouse-plus.jp/reporting/google-dataportal-guide/" target="_blank" rel="noopener noreferrer">https://inhouse-plus.jp/reporting/google-dataportal-guide/</a>
- <a href="https://inhouse-plus.jp/reporting/looker-studio-add-components/" target="_blank" rel="noopener noreferrer">https://inhouse-plus.jp/reporting/looker-studio-add-components/</a>
- <a href="https://inhouse-plus.jp/reporting/calculated-field/" target="_blank" rel="noopener noreferrer">https://inhouse-plus.jp/reporting/calculated-field/</a>
- <a href="https://www.plan-b.co.jp/blog/seo/31762/" target="_blank" rel="noopener noreferrer">https://www.plan-b.co.jp/blog/seo/31762/</a>
- <a href="https://cloud.google.com/looker/docs/studio/add-data-to-a-report" target="_blank" rel="noopener noreferrer">https://cloud.google.com/looker/docs/studio/add-data-to-a-report</a>
- <a href="https://www.uncovertruth.co.jp/dx-accelerator/blog/articles/looker_studio/003/" target="_blank" rel="noopener noreferrer">https://www.uncovertruth.co.jp/dx-accelerator/blog/articles/looker_studio/003/</a>
- <a href="https://note.com/tscloud_jp/n/n357732008126" target="_blank" rel="noopener noreferrer">https://note.com/tscloud_jp/n/n357732008126</a>
- <a href="https://it-pocket.com/lookerstudio/797/" target="_blank" rel="noopener noreferrer">https://it-pocket.com/lookerstudio/797/</a>
- <a href="https://www.principle-c.com/column/lookerstudio/looker-studio-data-blending-techniques/" target="_blank" rel="noopener noreferrer">https://www.principle-c.com/column/lookerstudio/looker-studio-data-blending-techniques/</a>

Looker Studio の使い方

## はじめに

Node.jsは、Web開発や自動化スクリプト、APIサーバー構築など、幅広い分野で利用されているJavaScript実行環境です。 
本記事では、これから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 を使う場合 
先に nvm をインストールしてから、nvm 経由で Node.js を入れる

* nvm を使わない場合 
公式サイトから直接 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）です。 
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入門 ― 基本の使い方と環境構築

## はじめに
最近のソフトウェア開発では、AIの活用が急速に進み、すっかり当たり前のものとなりました。コードの自動補完やエラーチェックを行うAIコーディング支援ツールはすでに多くの開発者に利用されていますが、さらに一歩進んだ「AIコーディングエージェント」という概念をご存知でしょうか？ まるで開発チームの一員のように自律的にタスクをこなすAIの登場は、私たちの開発スタイルを大きく変えるでしょう。

### AIコーディング支援とAIコーディングエージェントの違い
AIコーディング支援は、開発者がコードを書く際の補助を目的としています。例えば、入力中のコードの自動補完、構文チェック、簡単なリファクタリングの提案などがこれにあたります。IDE（統合開発環境）に組み込まれているCopilotのようなツールがこれにあたります。これらは開発者の作業を「支援」するものであり、最終的な判断や実装は開発者自身が行います。

一方、AIコーディングエージェントは、より自律的に開発タスクを実行する能力を持つツールです。単にコードを提案するだけでなく、要件を理解し、開発計画を立て、実際にコードを生成・修正し、テストまで実行できます。与えられたタスクに対して一連のプロセスを自律的に進めていくのが特徴です。

### Julesの簡単な紹介と始め方

今回体験したのは、そんなAIコーディングエージェントの一つである「[Jules](https://jules.google/)」です。Julesは、開発者が自然言語で与えた指示に基づき、コードの生成、テスト、デバッグ、リファクタリングといった一連のソフトウェア開発タスクを自動化するツールです。まるで優秀なペアプログラミングパートナーがいるかのように、開発者はより本質的な問題解決に集中できるようになるでしょう。

Julesの詳しい始め方については、以下の参考リンクをご確認ください。GitHubリポジトリにJulesのGitHub Appをインストールし、Write権限を付与すれば、すぐにタスクを依頼できます。

#### 参考リンク
- https://jules.google/docs/
- [Note記事: AIコーディングエージェントの導入](https://note.com/tandago/n/n2363371f46b8)
- https://qiita.com/syukan3/items/2c8989a59d7800b1c896#4-%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%865-%E5%88%86%E3%81%A7%E5%AE%8C%E4%BA%86

### 実際にやってみた例の紹介

今回は、「Dependabotの指摘に対応するため、Honoのバージョンアップを実施してください。」と日本語で依頼してみました。

![planning](https://cont.sterfield.co.jp/uploads/planning_03e7631bf6.jpg)

Julesはまず、与えられたタスクを詳細に分解し、実装の手順をプランニングしました。

---

![complete](https://cont.sterfield.co.jp/uploads/complete_f0fb0989f6.jpg)

プランニング結果を承認すると、Julesは実際にコードの修正を開始しました。注目すべきは、具体的な指示を与えていないにもかかわらず、Julesが自律的に動作確認の方法（npm run devによるローカル実行）を特定し、実行した点です。これは、単にコードを生成するだけでなく、開発プロセス全体を理解しているJulesの能力を強く示すものです。

上記の画像は、すべての作業が完了し、Julesが変更内容を「dependabot/npm/hono-4.7.11」というブランチにプッシュした後の状態です。

### やってみた所感

Julesを体験してみて、まず感じたのはその自律性の高さです。従来のAIコーディング支援ツールでは、開発者が積極的に指示を出し続ける必要がありましたが、Julesは一度タスクを与えれば、まるでジュニアエンジニアがタスクを進めるかのように自律的に動きます。これにより、開発者はより複雑な問題解決やアーキテクチャ設計などに集中できる時間が格段に増えると感じました。

一方で、まだ完璧ではない点もいくつかありました。例えば、レスポンスに時間がかかる場合がある点や、日本語入力時の細かなUI挙動に改善の余地がある点など、少しストレスを感じる場面もありました。しかし、これらは現在ベータ版として提供されているため、今後の改善に期待しています。

### まとめ

AIコーディングエージェント「Jules」を体験してみて、その将来性を強く感じました。まだ発展途上ではありますが、今後AIコーディングエージェントがさらに進化することで、ソフトウェア開発のあり方は大きく変わっていくでしょう。単純作業はAIに任せ、人間はより創造的で戦略的な業務に集中する、そんな未来がすぐそこまで来ているのかもしれません。

皆さんもぜひ一度、JulesのようなAIコーディングエージェントを体験してみてはいかがでしょうか。

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

css3アニメーションをwebブラウザ上で作成できるサービス

合わせて読みたい

2025/10/02

2025/09/05

2025/08/22

2025/06/20

2026/02/19

2025/12/26

2025/12/12

2025/10/02

2025/09/05

2025/08/22

2025/06/20

2026/02/19

2025/12/26

2025/12/12

2025/10/02