<p>phpの作業で数値の正規表現をチェックする時にいつも検索してコピーして使っていました。</p>
<p>しかし、自分で自由に修正したい場合は、正規表現書き方や人が書いてあるものを理解していないと困る。</p>
<p>今日はいつも面倒見てくれているエンジニアが説明してくれたので、理解できるようになりました。</p>
<p>理解しておくと効率がいいですね（^_^）</p>
<p>少しだけですが、今日覚えたことを書きたいと思います。</p>
<table>
<tbody>
<tr>
<td>&#8211;</td>
<td>範囲</td>
</tr>
<tr>
<td>^</td>
<td>文字列の先頭</td>
</tr>
<tr>
<td>$</td>
<td>文字列の末尾</td>
</tr>
<tr>
<td>a-z </td>
<td>小文字の半角英文字</td>
</tr>
<tr>
<td>A-Z</td>
<td>大文字の半角英文字</td>
</tr>
<tr>
<td>0-9</td>
<td>数字</td>
</tr>
<tr>
<td>^0-9</td>
<td>数字以外</td>
</tr>
<tr>
<td>*</td>
<td>0回以上の連続する文字</td>
</tr>
<tr>
<td>+</td>
<td>1回以上の連続する文字</td>
</tr>
<tr>
<td>? </td>
<td>0または1回だけの文字</td>
</tr>
<tr>
<td>{n}?</td>
<td>n回の連続する文字</td>
</tr>
<tr>
<td>{n,}?</td>
<td>n回以上の連続する文字</td>
</tr>
<tr>
<td>{n, m}?</td>
<td>n回以上、m回以下の連続する文字</td>
</tr>
</tbody>
</table>


PHP正規表現

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>


small_eyecatch.png

thumbnail_eyecatch.png

eyecatch.png

Looker Studio の使い方

## はじめに

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入門 ― 基本の使い方と環境構築

## はじめに
最近のソフトウェア開発では、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コーディングエージェントを体験してみてはいかがでしょうか。

large_Gemini_Generated_Image_tibdtetibdtetibd.jpeg

medium_Gemini_Generated_Image_tibdtetibdtetibd.jpeg

small_Gemini_Generated_Image_tibdtetibdtetibd.jpeg

thumbnail_Gemini_Generated_Image_tibdtetibdtetibd.jpeg

Gemini_Generated_Image_tibdtetibdtetibd.jpeg

Julesで体験！AIコーディングエージェントの可能性

## はじめに
ChatGPTなどのAPIを使うことで、これまで難しかった書類から必要な情報をピックアップする処理や、多言語への変換などがとても容易に行えるようになりました。
しかしながら、その処理はある程度の曖昧さを含まざるを得ないため、1回だけで最適な答えを出すこと難しいケースは多々あります。
そこで今回は、再帰的にChatGPTのAPIへ指示を出すことで、答えを洗練させられるかどうか、検証してみました。

## OpenAIチャットAPIでアイディアを再帰的に洗練させる

OpenAIのチャットAPIとTypeScriptを使い、アイディアを段階的に洗練させるプログラムを紹介します。  

### 作ってみたプログラム

```typescript
import dotenv from "dotenv";
import OpenAI from "openai";
import { zodResponseFormat } from "openai/helpers/zod";
import { z } from "zod";

dotenv.config({ path: `${__dirname}/.env` });

// APIの返答の形式を安定化させるため、Zodを使ってフォーマット指定を行います
const responseFormat = z.object({
  idea: z.string()
});

const main = async () => {
  // OpenAIの初期設定
  const client = new OpenAI({
    organization: process.env.CHAT_GPT_ORGANIZATION_ID,
    project: process.env.CHAT_GPT_PROJECT_ID,
    apiKey: process.env.CHAT_GPT_API_KEY
  });

  const MAX_COUNT = 5; // 再帰処理で呼び出す回数制限

  const getIdeas = async (
    question: string,
    ideas: string[],
    count: number = 1
  ) => {
    // 最初の指示
    let content = `## 指示
次に挙げる議題について、アイディアを出してください
「${question}」

## 制限事項
- 200文字程度で出してください`;

    // 再帰的に呼び出された時の指示
    if (count > 1) {
      content = `## 指示
次に挙げるアイディアを類推を使って洗練させてください
課題: ${question}
アイディア：「${ideas[ideas.length - 1]}」

## 制限事項
- 200文字程度で出してください`;
    }

    // チャットAPIの実行
    const chatCompletion = await client.chat.completions.create({
      model: "gpt-4o-mini",
      response_format: zodResponseFormat(responseFormat, "idea"),
      messages: [
        {
          role: "user",
          content
        }
      ]
    });

    // APIのレスポンスをパースして、情報を取得
    const responseMessage =
      JSON.parse(chatCompletion?.choices?.[0]?.message?.content ?? "{}")
        ?.idea ?? "";

    // 過去データに追加
    ideas.push(responseMessage);

    // 再帰的に呼び出す
    if (count < MAX_COUNT) {
      return getIdeas(question, ideas, count + 1);
    }

    return {
      question,
      ideas
    };
  };

  // 関数の実行
  const result = await getIdeas(
    "アジア向け越境ECを国内メーカーの販売担当者へ広告する場合の効果的なバナーデザイン",
    []
  );

  console.log(result);
};

main()
  .then(() => {
    console.log("Done");
  })
  .catch((error) => {
    console.error("Error:", error);
  });
```

#### プログラムの解説

- `.env`ファイルに定義されたAPIキーなどの環境変数を`dotenv`で読み込みます。
- Zodを使い、APIレスポンスの形式（idea: string）を指定することで、レスポンスの型を保証し、安定性を高めます。
- `getIdeas`関数は、指定回数（MAX_COUNT）まで再帰的にChatGPT APIへリクエストを送り、毎回新しいアイディアを生成・洗練します。
- 1回目は議題からアイディアを生成し、2回目以降は直前のアイディアをさらに洗練するよう指示します。
- すべてのアイディアは配列に蓄積され、最終的にまとめて出力されます。

### 実行結果例

#### 1回目
```md
1. クリーンでモダンなデザインを使用し、アジア市場を象徴する色彩（赤、金など）を取り入れる。
2. 商品写真を大きく配置し、目立たせることで視覚的インパクトを強調。
3. アジア顧客のニーズを反映したメッセージ（例：トレンド性や伝統的価値）を強調。
4. 言語はターゲット地域に応じたローカリゼーションを施し、親しみやすさを演出。
5. "越境ECで新市場開拓！"などのキャッチコピーで興味を引く。
```

#### 3回目
```md
アジア向け越境ECのバナーデザインには、
1. アジア特有の色（赤、金）を取り入れたクリーンでモダンなデザインが効果的。
2. 大きな商品写真でインパクトを与え、
3. トレンドと伝統を融合させたメッセージで興味を引く。
4. 各地域の言語で親しみやすさを演出し、
5. "新市場開拓のチャンス！"などの魅力的なキャッチコピーを加えることで、販売担当者の関心を高める。
```

#### 5回目
```md
「アジア向け越境ECのバナーデザインでは、
1. アジアの文化に根ざした明るい色合い（特に赤や金）を使用し、パッと目を引くデザインに。
2. 商品の魅力を伝えるために、大きな商品画像を配する。
3. トレンドと伝統を融合したキャッチコピーで感情に訴えかけ、
4. 地域ごとの言語で表記して親しみを感じさせる。
5. 更に、「新市場開拓は今がチャンス！」というポジティブなフレーズで顧客の関心を引く。
```

### 感想
結果を見てみると、アイディアそのものが洗練されているというより、文章として洗練されていっているという感じでした。
「洗練させる」ということが、人間にとっても解釈が難しいように、そもそも曖昧な指示なのが原因かもしれませんね。
また、ただ繰り返せばいいというわけではなさそうです。
ただし、情報を絞り込んでいくなど、プロンプトや利用目的を工夫すれば、この方法も有効に活用できる可能性があります。

### 注意
- 実案件でAPIを再帰的に利用する場合、API利用コストの増大や、レスポンスの質が頭打ちになる可能性についても、さらなる検証が必要です。

### 参考サイト
- <a href="https://platform.openai.com/docs/overview" target="_blank" rel="noopener noreferrer">Overview - OpenAI API</a>

large_eycatch.png

medium_eycatch.png

small_eycatch.png

thumbnail_eycatch.png

eycatch.png

OpenAIのチャットAPIを再帰的に呼び出す方法を検証してみた

## はじめに

GitHub Actions を利用する際、似たような処理を何度も記述していませんか？ ワークフローが複雑になるにつれて、メンテナンスコストが増大し、変更への対応も煩雑になりがちです。  
この記事では、GitHub Actions の処理を共通化することで、これらの問題を解決するための手法を、具体的な例を交えながら解説します。

## 再利用可能なワークフローによる共通化

まずは、<a href="https://docs.github.com/ja/actions/sharing-automations/reusing-workflows" target="_blank" rel="noopener noreferrer">ワークフローの再利用</a>を活用した共通化の方法を説明します。

**on** キーワードで、ワークフローを直接トリガーするイベントの代わりに **workflow_call** イベントを指定すると、別のワークフローからそのワークフローを呼び出すことができます。

**例: .github/workflows/deploy.yml**

```yaml
name: Deploy to Production

on:
  workflow_call: # ワークフローを再利用可能にするイベント
    inputs: # 呼び出し元のワークフローからパラメータを受け取る
      environment:
        required: true
        type: string
      target_host:
        required: true
        type: string

    secrets: # シークレットを受け渡す場合は明示的に指定する必要がある
      SSH_PRIVATE_KEY:
        required: true

    outputs: # 処理結果を呼び出し元のワークフローに返す
      deployment_status:
        description: "The status of the deployment job"
        value: ${{ jobs.deploy.outputs.status }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    outputs:
      status: ${{ job.status }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Set up SSH
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.SSH_PRIVATE_KEY }}" | tr -d '\r' > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan -H ${{ inputs.target_host }} >> ~/.ssh/known_hosts
      - name: Deploy to server
        run: rsync -avz -e "ssh -i ~/.ssh/id_rsa" ./ ${{ inputs.environment }}@${{ inputs.target_host }}:/var/www/html
```

上記のワークフローを呼び出すには、以下のように記述します。  
**jobs** セクションで新しいジョブを定義し、そのジョブ内で **uses** キーワードを使って、再利用可能なワークフローのパスを指定します。

**例: .github/workflows/deploy.yml**

```yaml
name: Deploy Application

on:
  push:
    branches: [main]

jobs:
  deploy-staging:
    uses: ./.github/workflows/deploy.yml # 共通化したワークフローのパス
    with: # 呼び出し元の inputs で定義した値を渡す
      environment: "staging"
      target_host: "staging.example.com"
    secrets: # 呼び出し元の secrets で定義した値を渡す
      SSH_PRIVATE_KEY: ${{ secrets.STAGING_SERVER_SSH_KEY }}

  deploy-production:
    uses: ./.github/workflows/deploy.yml
    with:
      environment: "production"
      target_host: "prod.example.com"
    secrets:
      SSH_PRIVATE_KEY: ${{ secrets.PRODUCTION_SERVER_SSH_KEY }}

  post-deployment-check:
    needs: [deploy-staging, deploy-production]
    runs-on: ubuntu-latest
    steps:
      - name: Check deployment status
        # 呼び出し元の outputs で定義した値を受け取る
        run: |
          echo "Staging deployment status: ${{ jobs.deploy-staging.outputs.deployment_status }}"
          echo "Production deployment status: ${{ jobs.deploy-production.outputs.deployment_status }}"
```

## Composite Action による共通化

次に、<a href="https://docs.github.com/ja/actions/sharing-automations/creating-actions/creating-a-composite-action" target="_blank" rel="noopener noreferrer">Composite Action</a> を活用した共通化の方法を説明します。

Composite Action は、通常のワークフローとは異なり、フォルダ階層は自由ですが、ファイル名は **action.yml** にする必要があります。 <a href="https://www.google.com/search?q=https://docs.github.com/ja/actions/sharing-automations/creating-actions/creating-a-composite-action%23creating-a-composite-action-within-the-same-repository" target="_blank" rel="noopener noreferrer">GitHub Docs</a> では、**.github/actions/{任意の名前}/action.yml** というフォルダ構成で作成することが推奨されています。

また、現時点では secrets の受け渡しはできません。 <a href="https://www.google.com/search?q=https://github.com/actions/runner/blob/main/docs/adrs/0549-composite-run-steps.md%23secrets" target="_blank" rel="noopener noreferrer">今後サポートされる予定</a> のようです。

**例: .github/actions/test/action.yml**

```yaml
name: "Node.js Test"
description: "Test implemented in node.js"
inputs: # 呼び出し元のワークフローからパラメータを受け取る
  working-directory:
    description: "Path to the working directory"
    required: true

outputs: # 処理結果を呼び出し元のワークフローに返す
  test_report_path:
    description: "Path to the test report file (if generated)"
    value: ${{ steps.report.outputs.test_report_path }}

runs:
  using: "composite" # Composite Action であることを宣言
  steps:
    - name: Checkout code
      uses: actions/checkout@v4

    - name: Set up Node.js ${{ inputs.node_version }}
      uses: actions/setup-node@v4
      with:
        node-version: 22.X

    - name: Install dependencies
      run: npm install
      shell: bash # コマンド実行には shell を明示的に指定する
      working-directory: ${{ inputs.working-directory }}

    - name: Run tests
      run: npm run test --report_output=./test-results.xml
      shell: bash
      working-directory: ${{ inputs.working-directory }}

    - name: Set test report output
      id: report
      run: echo "test_report_path=$(pwd)/test-results.xml" >> "$GITHUB_OUTPUT"
      shell: bash
      working-directory: ${{ inputs.working-directory }}
```

上記の Composite Action を実行するには、以下のように記述します。

**例: .github/workflows/test.yml**

```yaml
name: Test Application

on:
  push:
    branches: [main]

jobs:
  test-app1:
    runs-on: ubuntu-latest
    steps:
      - name: Test
        id: test
        uses: ./.github/actions/test # 実行する Composite Action のディレクトリ
        with:
          working-directory: "./app1" # 呼び出し元の inputs で定義した値を渡す

      - name: Output test results
        # 呼び出し元の outputs で定義した値を受け取る
        run: cat ${{ steps.test.outputs.test_report_path }}

  test-app2:
    runs-on: ubuntu-latest
    steps:
      - name: Test
        id: test
        uses: ./.github/actions/test
        with:
          working-directory: "./app2"

      - name: Output test results
        run: cat ${{ steps.test.outputs.test_report_path }}
```

## どちらの方法を選ぶべきか

再利用可能なワークフローは、ワークフロー全体を共通化する仕組みです。 GitHub Actions は job 単位で別々のコンテナで実行されるため、共通処理内で変更した内容 (生成したファイルやインストールしたパッケージなど) は、後続の処理に引き継ぐことができません。

一方、Composite Action は step 単位で共通化するため、共通処理内で変更した内容は後続の処理に引き継がれます。 また、再利用可能なワークフローは実行のたびに新しいコンテナを立ち上げる必要があるため、単純で実行回数の多い処理の場合は Composite Action を利用することで、処理時間の短縮と料金の節約につながります。

以上の点を考慮すると、以下のように使い分けるのが適切です。

**再利用可能なワークフロー**

- 共通処理内で変更した内容を後続の処理に引き継ぐ必要がない場合（例: ビルド、デプロイ処理、セキュリティスキャンなど）
- 環境を変えて (Node.js のバージョンなど) 共通処理を実行する場合

**Composite Action**

- 共通処理内で変更した内容を後続の処理に引き継ぐ必要がある場合（例: 依存関係のインストール、環境設定、複数のコマンド実行など）
- 単純または実行回数の多い処理（例: テスト結果やデプロイ結果の出力、チャット通知など）

## まとめ

この記事では、GitHub Actions におけるワークフローの共通化手法として、再利用可能なワークフローと Composite Action の 2 つを紹介しました。

どちらの手法を選択するかは、共通化したい処理の粒度や、処理内で変更した内容を後続の処理で利用する必要があるかどうかなどを考慮して判断する必要があります。 これらの手法を適切に活用することで、ワークフローのメンテナンス性を向上させ、開発効率を高めていきましょう！

## 参考サイト

- <a href="https://docs.github.com/ja/actions/sharing-automations/reusing-workflows" target="_blank" rel="noopener noreferrer">https://docs.github.com/ja/actions/sharing-automations/reusing-workflows</a>
- <a href="https://docs.github.com/ja/actions/sharing-automations/creating-actions/creating-a-composite-action" target="_blank" rel="noopener noreferrer">https://docs.github.com/ja/actions/sharing-automations/creating-actions/creating-a-composite-action</a>
- <a href="https://zenn.dev/moaikids/articles/32363c5386978e" target="_blank" rel="noopener noreferrer">https://zenn.dev/moaikids/articles/32363c5386978e</a>
- <a href="https://zenn.dev/kinjosan/articles/bd82e07aa69080" target="_blank" rel="noopener noreferrer">https://zenn.dev/kinjosan/articles/bd82e07aa69080</a>

small_github.png

thumbnail_github.png

github.png

GitHub Actions 共通化手法

## はじめに

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 を活用して効率的にコーディングする方法

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

PHP正規表現

合わせて読みたい

2025/06/20

2025/05/22

2025/05/16

2025/03/21

2025/10/02

2025/09/05

2025/08/22

2025/06/20

2025/05/22

2025/05/16

2025/03/21

2025/10/02

2025/09/05

2025/08/22

2025/06/20

2025/05/22

2025/05/16

2025/03/21

–	範囲
^	文字列の先頭
$	文字列の末尾
a-z	小文字の半角英文字
A-Z	大文字の半角英文字
0-9	数字
^0-9	数字以外
*	0回以上の連続する文字
+	1回以上の連続する文字
?	0または1回だけの文字
{n}?	n回の連続する文字
{n,}?	n回以上の連続する文字
{n, m}?	n回以上、m回以下の連続する文字