## はじめに
最近のソフトウェア開発では、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 呼び出しを含むコードのユニットテストは、レスポンスが一定でないため難しいと思われがちですが、いくつかのポイントを押さえることで実装可能です。本記事では、Jest を用いた ChatGPT API のユニットテスト実装方法について、実例を交えながら解説します。

## 対象読者

- ChatGPT API を利用する開発者
- Jest を用いたユニットテストの経験者
- API 連携を含むコードのテストに課題を感じている方

## 前提知識

- JavaScript の基本的な知識
- Jest を用いたユニットテストの経験
- ChatGPT API の利用経験

## 実装例

ChatGPT API を利用したコードのテスト実装例として、2 つの入力を比較して大きい方を返す関数 `greaterOf` のテストコードを作成します。

**テスト対象のコード (greaterOf.js)**

```javascript
import OpenAI from "openai";

/**
 * OpenAIのAPIを使用して2つの入力を比較し、大きい方を返します。
 */
const greaterOf = async (
  openai: OpenAI,
  a: string,
  b: string
): Promise<string> => {
  const chatCompletion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    response_format: { type: "text" },
    messages: [
      {
        role: "system",
        content: `1件目の入力と2件目の入力を比較して大きい方の入力をそのまま返してください。`,
      },
      {
        role: "user",
        content: a,
      },
      {
        role: "user",
        content: b,
      },
    ],
  });

  return chatCompletion?.choices?.[0]?.message?.content?.trim() ?? "";
};

export default greaterOf;
```

**テストコード (greaterOf.test.js)**

```javascript
import OpenAI from "openai";
import greaterOf from "./greaterOf";

const runTests = process.env.CHAT_GPT_TEST;

(runTests ? describe : describe.skip)("greaterOf", () => {
  const openai = new OpenAI({
    organization: "********", // API接続情報を外部から注入
    project: "********", // API接続情報を外部から注入
    apiKey: "********", // API接続情報を外部から注入
  });

  test.each`
    a                     | b                         | expected
    ${"木星"}             | ${"土星"}                 | ${"木星"}
    ${"北海道"}           | ${"スコットランド"}       | ${"スコットランド"}
    ${"セーム・シュルト"} | ${"シャキール・オニール"} | ${"シャキール・オニール"}
  `("greaterOf($a, $b) should return $expected", async ({ a, b, expected }) => {
    for (let i = 0; i < 3; i++) {
      const result = await greaterOf(openai, a, b);
      expect(result).toBe(expected); // 結果を検証
    }
  });
});
```

## 実装のポイント解説

- **テスト対象の関数は同じ入力に対して同じ出力を返すように設計する:** 出力が一定にならない関数の動作はテストケースで確認するのが難しいです。
- **API 接続情報の外部注入:** テストコードでは、API キーなどの接続情報を環境変数から取得しています。これにより、本番環境とテスト環境で異なる設定を使用できます。
  - **対応箇所:** テストコードの `const openai = new OpenAI({ ... });`
- **テストデータの準備:** `test.each`を用いて、複数のテストケースを簡潔に記述しています。各テストケースでは、入力値 `a`、`b` と期待される出力値 `expected` を定義しています。
  - **対応箇所:** テストコードの `test.each`
- **繰り返し実行:** 各テストケースを 3 回繰り返して実行しています。ChatGPT API のレスポンスは変動する可能性があるため、複数回実行することで結果の安定性を確認しています。
  - **対応箇所:** テストコードの `for (let i = 0; i < 3; i++) { ... }`
- **テストのスキップ:** 環境変数 `CHAT_GPT_TEST` が設定されている場合のみテストが実行されるようにしています。これにより、CI 環境などで API キーを保護し、テスト実行時間を短縮できます。
  - **対応箇所:** テストコードの `(runTests ? describe : describe.skip)("greaterOf", () => { ... });`

## まとめ

本記事では、Jest を用いた ChatGPT API のユニットテスト実装方法について解説しました。API 接続情報の外部注入、テストデータの準備、繰り返し実行、テストのスキップなどのポイントを押さえることで、ChatGPT API を含むコードのテストを効果的に行うことができます。

ユニットテストはコードの品質向上に不可欠です。ChatGPT API を利用したアプリケーション開発においても、ユニットテストを積極的に導入し、より信頼性の高いソフトウェア開発を目指しましょう。

small_OpenAI-black-monoblossom.png

thumbnail_OpenAI-black-monoblossom.png

OpenAI-black-monoblossom.png

Jest で実装する ChatGPT API のユニットテスト

## はじめに
サイトの監視アラート通知をメールで受け取ると埋もれがちなので、普段使っているチャットツールで受け取りたいということがあります。

今回は、[さくらクラウドのシンプル監視](https://cloud.sakura.ad.jp/products/simple-monitor/)のアラート通知をGoogle Chatで受け取る方法を紹介します。

シンプル監視はSlackのみを公式にサポートしています。弊社ではGoogle Chatをメインで利用しているため、SendGridとGoogle Apps Scriptを活用し、Google Chatにアラート通知を送信する仕組みを構築しました。この方法であれば、追加費用をかけずに、柔軟なカスタマイズが可能です。

以下、具体的な設定方法を解説します。

## 概要 
![Overview](https://cont.sterfield.co.jp/uploads/overview_f0a47bc2aa.png) 

図のとおりシンプル監視からのメール通知をSendGridで受信して、そこからGoogle App Sriptを経由してGoogle Chatに書き込む仕組みです。

### ポイント
- シンプル監視のWebhook通知は、ZapierやIFTTT経由でGoogle Chatに通知できますが、2024年12月現在は有料プランが必要なため、今回は無料のメール通知を利用します。
- SendGridのInbound Email Parse Webhook自体は無料で利用可能ですが、SendGrid自体のアカウント開設には審査が必要となっています。また、Inbound Email Parse Webhookを利用するためには、SendGrid上でドメイン認証を行ったドメインのメールアドレスのみ設定可能です。詳細は[SendGridのヘルプ](https://sendgrid.kke.co.jp/docs/User_Manual_JP/Settings/parse.html)を参照してください。
- Google Chatで外部からWebhookを受け取る機能は無料版では使えません。有料のGoogle Workspaceを契約している必要があります。

## Google ChatのWebhook設定
スペースの設定画面でアプリと統合メニューを開いた画面で下の方にあるWebhookを追加からWebhookを追加してリンクをコピーしておきます。

![Google Chat](https://cont.sterfield.co.jp/uploads/google_chat_29b557565c.png) 

## Google App Scriptの設定
コピーしたリンクを使って下記のスクリプトを作成して外部から起動できるようにデプロイしてください。シンプル監視から送られるメールのエンコードはISO-2022-JP(いわゆるJISコード)のため、文字コード変換が必要です。

```js
function doPost(e) {
  const { text } = e.parameter;

  // Google ChatのWebhook URL (事前にコピーしたURLを貼り付ける)
  const webhookurl = 'https://chat.googleapis.com/v1/spaces/**********/messages?key=**********';

  // JISコードで送信されてくるメールデータを、Google Chatで扱えるUTF-8に変換します。
  const data = {
    'text': Utilities.newBlob(text).getDataAsString("JIS")
  };

  const options = {
    'method': 'post',
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    'payload': JSON.stringify(data)
  };
  UrlFetchApp.fetch(webhookurl, options);
}
```

デプロイが完了したらウェブアプリのURLをコピーしおきます。

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

## SendGridの設定
SendGridにログインして、Setting > Inbound Parseを開いてAdd & Hostボタンを押して、下記の設定値を入力してWebhook設定を追加します。

Receiving Domain:

シンプル監視からのメール通知を受け取るためのメールのドメイン

Destination URL:

前項でコピーしておいたウェブアプリのURL

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

## シンプル監視の設定
さくらのクラウドの設定画面でオプション > メールアドレスを開いて、前項で設定したドメインのメールアドレスでアラートの通知を受け取るように設定します。

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

アラートの通知設定はデフォルトのまま（通知方法：メール、メールタイプ：テキスト）にしておきます。

## アラート通知の例
シンプル監視でアラートが発生した際にGoogle Chatに下記の通知が表示されたら設定成功です。

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

## まとめ
以前はIFTTTの有料プランを利用して通知の自動化を行っていましたが、今回構築した新しい仕組みによって、運用コストの削減が実現できました。

今後は、Google App Scriptのコードをカスタマイズしてサイトごとに通知先スペースをわけて複数サイトのアラート通知をうまく受け取れる仕組みの構築を進めてもっと活用していこうと思います。皆様も是非参考にしてみてください。

## 参考リンク
- [お知らせをWebhookでGoogle Chatに通知してみよう &ndash; Shopらんサポートサイト](https://shoprun.support-dreamarts.com/hc/ja/articles/17847405156377-%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%82%92Webhook%E3%81%A7Google-Chat%E3%81%AB%E9%80%9A%E7%9F%A5%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)
- [ISO-2022-JP（7bit JIS）のeml形式データをApps Scriptで解読する #JavaScript - Qiita](https://qiita.com/takatama/items/696557f4eb51d4e50b8f)

medium_3-4-2line-rgb-blackback-solidcolor.png

small_3-4-2line-rgb-blackback-solidcolor.png

thumbnail_3-4-2line-rgb-blackback-solidcolor.png

3-4-2line-rgb-blackback-solidcolor.png

さくらのシンプル監視のアラートをGoogle Chatで受け取る方法

## はじめに
[Cloudflare Workers](https://www.cloudflare.com/ja-jp/)の実践的なサンプルコードを事例を交えて紹介します。

すでにCloudflareを利用していてCloudflare Workersのことは知っているが、使い所が分からず手が出せてない方の参考となれば幸いです。

以下で紹介するコードはWebフレームワークの [Hono](https://hono.dev/) を使って実装しています。Cloudflare Workersにいち早く対応し、シンプルかつ型システムを活用した堅牢なコードが書けるのでおすすめです。

## サンプル1: オブジェクトストレージにデプロイしたHTMLにBASIC認証をかける

問題：
AWSやGoogle Cloudのようなクラウド事業者が提供しているオブジェクトストレージでWebサイトを構築しているが、そのサイトにBASIC認証をかけたい。

解決方法：WebサイトのネームサーバーをCloudflareに移行した上で、下記のWorkersを作成します。Workersの[ルート設定](https://developers.cloudflare.com/workers/configuration/routing/#matching-behavior)を行い、Workers→オブジェクトストレージの流れでリクエストが処理されるように設定します。

```
import { Hono } from "hono";
import { basicAuth } from "hono/basic-auth";

const app = new Hono<{ Bindings: CloudflareBindings }>();

app.all("*", basicAuth({ username: "username", password: "password" }), (c) => {
  return fetch(c.req.url);
});

export default app;
```

## サンプル2: ルールにそってURLを書き換えてリダイレクトする
問題：複数のサブドメインにわかれているシステムを運用しているが、外部のシステムと連携するにあたって、連携先のドメインが1つしか登録できない。

解決方法：下記のWorkersを作成して[カスタムドメイン設定](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/)を行い、そのドメインを外部連携先として利用します。このサンプルコードでは、URLを加工してリダイレクトしていますが、マッピング表をコード上に持つようにしたり、外部に保存したマッピングを参照してリダイレクトすることも可能です。

```
import { Hono } from 'hono';

const app = new Hono();
const domain = "example.com";

app.get('/:subdomain/', (c) => {
	const { subdomain } = c.req.param();
	const url = `https://${subdomain}.${domain}/`;
	return c.redirect(url);
});

export default app;
```

使用例：
```
https://redirect.example.com/aaa/ => https://aaa.example.com/
https://redirect.example.com/bbb/ => https://bbb.example.com/
```

## サンプル3: APIとして使える簡易的なKVS
問題：一時的なデータの保存場所としてMemcachedやRedisのようなKVSが必要になったが、サーバーを立ち上げたりクラウド上のサービスを使うとなると費用がかかるので、お金がかからない方法で検証までは行いたい。

解決方法：Cloudflare Workersに付随するサービスであるCloudflare Workers KV(以下KV)を使ってデータの保存と読み取りを行うWorkersを作成します。事前にKVの[名前空間の作成](https://developers.cloudflare.com/queues/tutorials/web-crawler-with-browser-rendering#2-create-kv-namespace)を行います。その後、下記のコードのWorkersを作成してデプロイします。

```
import { Hono } from "hono";

export interface Bindings {
  kvs: KVNamespace;
}

const app = new Hono<{ Bindings: Bindings }>();

app.post("/set/:key", async (c) => {
  const key = c.req.param("key");
  const obj = await c.req.json();

  await c.env.kvs.put(key, JSON.stringify(obj));

  return c.json({});
});

app.get("/get/:key", async (c) => {
  const key = c.req.param("key");
  return c.json(JSON.parse((await c.env.kvs.get(key)) || "{}"));
});

export default app;
```

使用例：
```
$ curl -X POST -H "Content-Type: application/json" -d '{"Name":"aaaa", "Age":"100"}' https://kvs-sample.****.workers.dev/set/123
{}

$ curl https://kvs-sample.****.workers.dev/get/123
{"Name":"aaaa","Age":"100"}
```

## まとめ
今回紹介したサンプルはすべて無料プランのCloudflareアカウントでも利用可能です。是非気軽に試してみてください。

## 参考リンク
- [Cloudflare Workersで手っ取り早くBasic認証を設定する](https://qiita.com/AnaKutsu/items/1c8bd0eb938edd3c0e0a)

large_CF_logo_stacked_blktype.jpg

medium_CF_logo_stacked_blktype.jpg

small_CF_logo_stacked_blktype.jpg

thumbnail_CF_logo_stacked_blktype.jpg

CF_logo_stacked_blktype.jpg

Cloudflare Workersの実践的サンプルの紹介

## はじめに

Looker Studio は、様々なデータソースからデータを収集し、使いやすいダッシュボードを作成できるツールです。今回は、Looker Studio で Jest で出力されたテストカバレッジを可視化する方法を紹介します。本記事は、 Jest を用いてテストコードを作成し、カバレッジレポートの生成経験をお持ちの方向けです。

## Jest のカバレッジレポートを CSV 形式に変換する

jest コマンドを使用して、テストを実行しカバレッジレポートを生成します。

```
$ npx jest --coverage --coverageReporters=json-summary --collectCoverageFrom="src/**/*.js"
 PASS  src/sum.test.js
  ✓ adds 1 + 2 to equal 3 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.653 s
Ran all test suites.

$ npx -y jest-coverage-to-csv coverage/coverage-summary.json
Conversion to CSV success!
```

- jest コマンドに `--collectCoverageFrom="src/**/*.js"` オプションをつけてテストコードが存在しないソースコードもカバレッジに含まれるようにします。このようにすることでソースコード全体のカバレッジが確認できるようになります
- BigQueryに取り込むためにCSV形式のデータが必要です。 jest のカバレッジレポートの出力形式はいくつかありますが、CSV形式はサポートされていません。そのため、jest コマンドに `--coverageReporters=json-summary` をつけて一旦json形式で出力後、 [jest-coverage-to-csv](https://www.npmjs.com/package/jest-coverage-to-csv) を使ってCSV形式に変換します

生成された coverage/coverage-summary.csv ファイルは、後で使用するために保存しておきます。

今回は日毎のカバレッジの推移を確認したいので下記の内容の2日分のファイルを日付付きのファイル名にリネームして保存したとして進めます。

```
coverage/coverage-summary_2024-06-12.csv
coverage/coverage-summary_2024-06-13.csv
```

### 6/12時点のテストカバレッジ
```
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |      50 |      100 |      50 |      50 |                   
 sub.js   |       0 |      100 |       0 |       0 | 2-4               
 sum.js   |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.362 s, estimated 1 s
```

### 6/13時点のテストカバレッジ
```
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 sub.js   |     100 |      100 |     100 |     100 |                   
 sum.js   |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.633 s, estimated 1 s
```

## CSVファイルをBigQueryに取り込む

gcloud CLI に含まれている BigQuery 用のコマンドラインツールである bq コマンドを使用して、先ほど保存した CSV ファイルを BigQuery のテーブルとして取り込みます。

```
$ bq load --source_format CSV --skip_leading_rows 1 --replace=true coverage_sample.report_2024-06-12 ./coverage/coverage-summary_2024-06-12.csv filename:STRING,statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING
Upload complete.
Waiting on bqjob_rc3c57bf6bd57867_000001900f7f57cc_1 ... (0s) Current status: DONE   

$ bq load --source_format CSV --skip_leading_rows 1 --replace=true coverage_sample.report_2024-06-13 ./coverage/coverage-summary_2024-06-13.csv filename:STRING,statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING
Upload complete.
Waiting on bqjob_r7ca5c1fd8e62ebaf_000001900f7f98e3_1 ... (0s) Current status: DONE
```

- あらかじめ gcloud コマンドで BigQuery にデータを書き込める権限があるアカウントでログインしている必要があります
- 取り込み先のデータセット、今回の例では `coverage_sample.report_2024-06-12` の.より前の部分は、あらかじめ作成しておく必要があります
- CSVのヘッダーのカラム名にスペースが含まれているため、スキーマの自動認識機能は使用せず、bq コマンドのオプションとして指定します(`statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING`)

処理が完了してDONEと表示されたら、BigQuery コンソールでテーブルが確認できます。

## BigQuery コンソール上でワイルドカードテーブルを使った View を作成する
BigQuery のコンソールにアクセスすると先程取り込んだ2つのテーブルにテストカバレッジ情報が取り込まれていることが確認できます。

![2つのテーブルの内容](https://cont.sterfield.co.jp/uploads/bigquery_query_5816821a21.png)

下記の SQL をコンソール上で実行して2つのテーブルをまとめた View を作成します。

```
CREATE VIEW
  `coverage_sample.view_report` AS (
  SELECT
    _TABLE_SUFFIX AS date,
    *
  FROM
    `coverage_sample.report_*`)
```

- From 句に*を指定するワイルドカードテーブル機能を使うことで複数のテーブルを1つの View にまとめられます
- このままだとどの日付のデータなのかが区別つかなくなるので、_TABLE_SUFFIX 疑似列を使ったカラムを追加します。_TABLE_SUFFIX にはワイルドカードにマッチした文字列、ここでは`2024-06-12`と`2024-06-13`が入ります。このように設定しておくことで後日、`2024-06-14`のデータが追加されても自動で View に追記することができます

![Viewの内容](https://cont.sterfield.co.jp/uploads/bigquery_view_19da905daa.png) 

## Looker Studio でグラフや表を作成する

https://lookerstudio.google.com/reporting
にアクセスして新しいレポートを作成します。

データに接続タブで BigQuery を選択して先程のデータセットの View を選択します。

![データの追加](https://cont.sterfield.co.jp/uploads/looker_studio_add_data_d89a3303a4.png) 

空のダッシュボードが作成されるので、右側のグラフ→設定タブで

```
ディメンション：date
指標：statements_ratio
並べ替え：dateで昇順
フィルター：All Files
```

と選択すると、日毎のステートメントカバレッジの%の表が作成されます。
次に表をコピーしてグラフを作成します。選択した状態で右側のグラフのプルダウンで表やグラフの種類の変更ができます。今回は折れ線グラフを選択してみます。

下記のような表とグラフでテストカバレッジの日毎の推移を確認できるダッシュボードが作成できました。

![ダッシュボード](https://cont.sterfield.co.jp/uploads/dashbord_20d6eb363f.png) 

## まとめ

Jest のカバレッジレポートを集計可能な形式に変換するところが苦労しましたが、 BigQuery に取り込むことができれば表やグラフで可視化することが簡単にできることがわかりました。

今回の記事では説明できませんでしたが、カバレッジレポートを取得して BigQuery に取り込むところまでを GitHub Actions で実行するようにすれば、自動で新しい日毎のデータが取り込めるようになります。常に最新のカバレッジを確認できる状態を維持することで、チームメンバーのテストコードを書く意識が高まると思います。

みなさまのプロジェクトでも是非活用してみてください。

## 参考リンク

- https://tech.tabechoku.com/?page=1657164600
- https://www.npmjs.com/package/jest-coverage-to-csv
- https://cloud.google.com/bigquery/docs/querying-wildcard-tables?hl=ja
- https://cloud.google.com/bigquery/docs/bi-engine-looker-studio?hl=ja


medium_Looker-Studio-Logo-1-894x400.webp

small_Looker-Studio-Logo-1-894x400.webp

thumbnail_Looker-Studio-Logo-1-894x400.webp

Looker-Studio-Logo-1-894x400.webp

Looker Studioでテストカバレッジを可視化する

## はじめに

Google Cloud の [Cloud Run](https://cloud.google.com/run?hl=ja) を使ってインターネット上に公開せず内部からのアクセスのみを受け付けるサービスを構築する場合、いくつかの方法がありますが認証オプションを「認証が必要」にしてデプロイする方法がもっとも簡単です。

 ![cloud-run-deploy](https://cont.sterfield.co.jp/uploads/cloud_run_deploy_0b4c2235ac.png) 


この方法でデプロイした Cloud Run サービスの URL にブラウザでアクセスするとリクエストに認証情報が含まれてないため

```
Error: Forbidden
Your client does not have permission to get URL / from this server.
```

というエラーが表示されます。このエラーを回避して、アクセスする方法のうち代表的な3パターンを紹介します。

## 前提

Node.js で書かれたアプリケーションがデプロイされた次の 2 つの Cloud Run サービスがデプロイされている環境があるとします。

- 「Front」はインターネット上から直接アクセスされることを想定しているため、認証オプション「未認証のアクセスを許可」を設定してデプロイされている
- 「Internal」は「Front」から内部でアクセスされるもので外部からのアクセスを拒否したいため、認証オプション「認証が必要」を設定してデプロイされている

![cloud-run-diagram](https://cont.sterfield.co.jp/uploads/cloud_run_diagram_a0a3472409.png) 

## ① 他の Cloud Run サービスからアクセスする方法

「Front」 → 「Internal」

同じプロジェクトでデプロイされた Cloud Run 同士でアクセスする場合、[Google Auth Library](https://github.com/googleapis/google-auth-library-nodejs)を使うことで認証に必要なトークンを含んだ HTTP ヘッダーが取得できます。

「Front」の Cloud Run サービスをデプロイしたサービスアカウントに`Cloud Run 起動元` (`roles/run.invoker`) ロールが付与されている場合、下記のようなコードでアクセスが可能になります。

```
import { GoogleAuth } from "google-auth-library";

・・・

const auth = new GoogleAuth();
const client = await auth.getIdTokenClient(`${「Internal」のURL}`);
const headers = await client.getRequestHeaders();

// headersの中に Authorization: Bearer ${トークン} が設定されている
await fetch(`${「Internal」のURL}`, { headers });
```

## ②Cloud Run 以外のサービスからアクセスする方法

Cloud Scheduler → 「Internal」

[Cloud Scheduler](https://cloud.google.com/scheduler?hl=ja)から「Internal」にアクセスする場合は、HTTP ターゲットを作成する際、Auth ヘッダーを「OIDC トークンを追加」に設定してサービスアカウントに`Cloud Run 起動元` (`roles/run.invoker`) ロールが付与されているものを設定すると、自動でトークンを付与した HTTP アクセスを行ってくれます。

 ![cloud-scheduler](https://cont.sterfield.co.jp/uploads/cloud_scheduler_74457eda15.png) 

[Cloud Pub/Sub](https://cloud.google.com/pubsub?hl=ja)などでも同じように OIDC 認証を設定することでアクセス可能になります。

## ③ ローカルからアクセスする方法

開発者のローカル PC のコンソール → 「Internal」

gcloud CLI を使うことで開発用の汎用 ID トークンを生成することができます。`Cloud Run 起動元` (`roles/run.invoker`) ロールが付与されているユーザーでログインして、[`gcloud auth print-identity-token`](https://cloud.google.com/sdk/gcloud/reference/auth/print-identity-token)を実行するとログインユーザーのトークンが取得できます。

curl コマンドと組み合わせて下記の様に実行することでアクセスが成功します。

```
curl -H "Authorization: Bearer $(gcloud auth print-identity-token)" ${「Internal」のURL}
```

## まとめ

今回紹介した内容はすべて Google Cloud の公式ドキュメントに記載されているものですが、複数のページにまたがって解説されており、個人的に探すのが大変だったのでブログにまとめました。同じような苦労をされている方のお役に立てれば幸いです。

## 参考リンク

- https://cloud.google.com/run/docs/tutorials/secure-services?hl=ja
- https://zenn.dev/steelydylan/scraps/60f3536dd0c9b4
- https://cloud.google.com/scheduler/docs/http-target-auth?hl=ja
- https://cloud.google.com/run/docs/authenticating/developers?hl=ja#curl

small_cloud_run.png

thumbnail_cloud_run.png

cloud_run.png

認証が必要な Cloud Run サービスにアクセスする方法まとめ

## はじめに
先日、東京ビッグサイトで開催されたGoogle Cloud Next Tokyo '23のDay2に参加してきました。

 ![](/uploads/PXL_20231116_001744341_2_90d59a9df4.jpg) 

全体としては生成AIに関するトピックが盛り上がってましたが、セキュリティに関するセッションもいくつかあり、その中で私は下記のセッションに参加して話を聞いてきました。

- [セルフで行う Google Cloud 環境のセキュリティ チェックの方法](https://cloudonair.withgoogle.com/events/next-tokyo?talk=d2-di-04)
- [Google Cloud のセキュリティ機能、基本のキ｜Security Command Center で実現するリスク管理](https://cloudonair.withgoogle.com/events/next-tokyo?talk=d2-sec-02)

どちらのセッションでもSecurity Command Centerを使うことでGoogle Cloudを安全に運用できるという内容でした。
こちらをもとに本記事では、Google Cloudを利用しているがSecurity Command Centerは使ったことがない人向けに、Security Command Centerを使い始めるための設定方法と簡単な使い方の解説します。

## Security Command Centerとは
Security Command CenterはGoogle Cloud上の脆弱性や脅威となりうる設定を検知してくれるサービスです。

有効化しておくと自動で利用しているサービス、リソースを認識して、それらを対象に設定内容をスキャンしてくれるため運用に負荷がかからないのが特長です。また有償版のプレミアムティアーのみの機能となりますが、ISO 27001やPCI DSSのような業界標準への遵守状況も確認できるなどスキャン以外にも様々な機能があります。

今回は無償版のスタンダードティアーでも利用可能なSecurity Health Analytics機能を使って、Google Cloudの設定ミスの診断を試してみました。

## 実際に適用してみた結果
ありがちなユースケースとして、組織の管理権限はもってないが開発環境のプロジェクトだけ変更権限だけを持つユーザーが、Security Command Centerを使ってプロジェクトの脆弱性を診断してみるというシナリオでやってみました。

1. Security Command Centerの有効化
  - まず最初にコンソールでプロジェクトを選択した状態でSecurity Command Centerを開いて有効化を行います。スタンダードとプレミアムの2つのティアーを選択する画面になるので、無償版であるスタンダードを選んで次へを押します。すると、どの機能を有効化するか設定するダイアログが表示されます。すべてデフォルト値のままで進めます。

     ![](/uploads/249ce2bfaa98636550da620a_d3f7f1273a.png) 
      (引用：https://zenn.dev/cloud_ace/articles/scc_standard#security-command-center(%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%80%E3%83%BC%E3%83%89)%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B)

  - 詳細な手順は公式ドキュメントで解説されているのでそちらを参照してください。
  https://cloud.google.com/security-command-center/docs/activate-scc-for-a-project?hl=ja#project-activation-scc-inactive-in-org

2. 診断結果の確認
  - 設定が完了すると自動で脆弱性のスキャンが行われますが、初回のスキャンは少し時間がかかります。今回の例だと24時間ほど待つ必要がありました。
  - 完了するとダッシュボードにスキャン結果が表示されます。脆弱性ページで脆弱性の種類、件数などが確認できます。

     ![](/uploads/scc_1_762224c8e4.png) 
    

3. 脆弱性の対応
  - ここではデフォルトのまま使っていると必ず検出されるOpen RDP portを対象として、実際に対応する場合の流れを解説します。

  - 詳細を開くと脆弱性の詳細や、対象のリソースの情報が確認できます。更に次のステップのところに対応方法が示されます。
    ![](/uploads/scc_2_0a09b3e035.png) 

  - それに従って、ファイアウォール ルールのdefault-allow-rdpの設定を変更します。IPの範囲が0.0.0.0/0がまずいとのことなので削除して35.235.240.0/20を設定します。
     ![](/uploads/scc_3_4f9c670868.png) 

  - なお、ルール自体を無効にしてしまえばIP範囲は変更しなくてよさそうに思えますが、この対応ではだめでした。脆弱性の判断基準としてルールが無効かどうかは関係ないようです。現時点で実害があるかどうかではなく、潜在的な脆弱性として指摘しておくポリシーなのかもしれません。

4. 対応結果の確認
  - 初回スキャンと同様に対応後の確認も特に操作は不要で、自動で再チェックが行われて脆弱性ページの件数が1=>0になります。初回スキャン時と異なり、設定変更後の再スキャンはほぼ即時反映のようで数分後には対応済みになりました。
  - 対応済みの脆弱性を確認したい場合、脆弱性ページ上からは見られなくなってしまいますが、検出結果ページのクエリ編集画面で下記のとおりクエリを変更すると確認可能になります。
    ```
    変更前）
    state="ACTIVE" AND NOT mute="MUTED"

    変更後）
    state="INACTIVE" AND NOT mute="MUTED"
    ```
     ![](/uploads/scc_4_19e81badad.png) 

## まとめ
- Security Command Centerは有効化するだけで特に設定も不要かつ無料で始められるので、使ってみることをおすすめします。
- 検出された脆弱性ごとの対応方法まで案内されるので非常に親切だが、今すぐ対応すべき問題かどうかは利用者自身が判断する必要があります。そのため、まったく知識がない状態で運用することは難しそうです。これについてはGoogle側でも課題と考えているようで、Duet AIによる支援機能が現在開発中とのことです。
- 組織単位でSecurity Command Centerの有効化を行うことで、アカウントの設定不備のようなプロジェクトをまたがった設定内容もスキャン対象となるため、より効果的な運用ができそうです。今回の検証結果をもとに、全社的にSecurity Command Centerを利用する方針を検討していきます。

## 参考リンク
- [Security Command Center](https://cloud.google.com/security-command-center?hl=ja)
- [Security Command Center でお手軽セキュリティ診断](https://zenn.dev/cloud_ace/articles/scc_standard)
- [[Google Cloud] SCC -Security Health Analytics-を試す](https://qiita.com/khoshina/items/f6ccea548e9ed39cdea8)


small_security-command-center.440x512.png

thumbnail_security-command-center.440x512.png

security-command-center.440x512.png

Security Command Centerを使ってGoogle Cloudの設定内容を診断してみよう

# 軽量でセキュアなコンテナイメージを使ってみよう

## はじめに
みなさんは開発にDockerコンテナを使っていますか？ここでいうコンテナとはDockerやDocker互換のコンテナエンジンで動作させられるものを指します。
当社でもDockerコンテナを積極的に利用して開発環境から本番までシームレスな開発、運用ができるよう導入を進めています。

さてそんなDockerコンテナですが、コンテナイメージを管理するためのDockerfileは適切に管理できているでしょうか。
ファイルシステムが差分構成になっていることなどDocker特有の仕組みがあり、ネット上にあるサンプルをそのまま使っているだけで自分たちで中身を書くところまではできてない人が多いのではと想像します。

本記事ではそのような状態から一歩レベルアップするため、Distrolessというベースイメージを使うようDockerfileを書き換えるやり方とその結果どういうことが得られるかを解説していきます。

## Distrolessとは
そもそもDistrolessとはどういうもので、どういう利点があるのでしょうか？
開発元でGoogleのAIであるBardに聞いてみた内容を引用します。

> 引用：Bard（Google AI）

> 質問
> distrolessを使う利点はなんですか？
> 
> 回答
> Distroless は、Google によって開発された、Linux オペレーティングシステムを最小化した Docker コンテナイメージです。Distroless は、アプリケーションを実行するために必要な最小限のファイルとライブラリのみを含むため、軽量でセキュリティに優れています。
> 
> Distroless を使用する主な利点は次のとおりです。
> 
> - 軽量：Distroless は、従来の Linux ベースの Docker コンテナイメージよりも軽量です。これは、Distroless がアプリケーションを実行するために必要な最小限のファイルとライブラリのみを含むためです。
> - セキュリティに優れている：Distroless は、セキュリティに優れています。これは、Distroless がアプリケーションを実行するために必要な最小限のファイルとライブラリのみを含むため、攻撃対象領域が狭いためです。
> - スケーラブル：Distroless はスケーラブルです。これは、Distroless が軽量であるため、多くのコンテナを実行してもシステムに負荷がかかりにくいためです。
> 
> Distroless は、軽量でセキュリティに優れた Docker コンテナイメージを必要とするアプリケーションに最適です。たとえば、Web サーバ、データベースサーバー、アプリケーションサーバなどです。

「軽量でかつセキュリティに優れている」というところに着目してDistrolessを使って進めていきます。

## プログラム
実際の運用イメージにあわせるため、下記のようなExpressを使ったNode.jsアプリを動作させるコンテナを作るDockerfileを対象にします。

- app/app.ts
  ```
  import express from "express";

  const app = express();
  const port = 3000;

  app.get("/", (_req, res) => {
    res.send("Hello World!");
  });

  app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
  });
  ```
- package.json
  ```
  {
    "dependencies": {
      "express": "^4.18.2",
      "typescript": "^5.1.6"
    },
    "devDependencies": {
      "@types/express": "^4.17.17"
    },
    "scripts": {
      "build": "tsc"
    }
  }
  ```
- tsconfig.json
  ```
  {
    "compilerOptions": {
      "target": "es2016",
      "module": "commonjs",
      "outDir": "./dist",
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

      /* Type Checking */
      "strict": true /* Enable all strict type-checking options. */,
      // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
      // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
      // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
      // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
      // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
      // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
      // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
      // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
      // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
      // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
      // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
      // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
      // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
      // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
      // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
      // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
      // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
      // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

      /* Completeness */
      // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
      "skipLibCheck": true /* Skip type checking all .d.ts files. */
    },
    "include": ["./src/**/*"]
  }
  ```

### Dockerfile(変更前)
```
FROM node:18-slim
WORKDIR /app
COPY . .
RUN npm install && npm run build

CMD [ "node", "./dist/app.js" ]
```
変更前のDockerfileは上記の通りで、公式で提供されているNode.jsのイメージをそのまま使うだけのDockerfileになります。

### Dockerfile(変更後)
```
FROM node:18-slim as builder
WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM gcr.io/distroless/nodejs:18
ENV NODE_ENV production
WORKDIR /app
COPY --from=builder --chown=nonroot:nonroot /app/dist/app.js ./dist/app.js
COPY --from=builder --chown=nonroot:nonroot /app/node_modules ./node_modules
USER nonroot
CMD [ "./dist/app.js" ]
```
Distrolessを使うように書き換えたものがこちらになります。その中でも特に2点について下記で解説します。

### 変更内容のポイント
1. マルチステージビルド

    Distrolessには実行に必要な最低限のパッケージしか含まれていないため、npmコマンドどころかshell環境自体が存在しません。
    そのため、Dockerのマルチステージビルド機能を利用します。詳細な仕組みの説明は割愛しますが、Dockerfileの前半部分(1行目〜4行目)で
    標準Node.jsイメージを使ってアプリケーションをビルド(ライブラリのインストールとTypescriptのコンパイル)、
    後半部分(6行目〜12行目)でdistrolessに前半でビルドしたファイルのコピーするという2段階構成にします。
    このように変更することでnpmコマンドや、ソースファイルのようなアプリケーション実行に必要がないファイルをイメージファイルに含めないことを実現します。

2. 非root化

    Distrolessとは直接関係ないですが、Docker公式にもベストプラクティスとして書かれている非root化も一緒に行ってます。
    Distrolessイメージではrootユーザー以外にnonrootというユーザーが存在しているため、ファイルのコピー時とCMD実行前にnonrootを指定することでroot権限を持たないユーザーでプログラムを実行できるようになります。

### イメージのサイズの比較
まずはビルドしたイメージのサイズを比較してみます。

- 変更前→express-slim
- 変更後→express-distroless

となります。

```
➜ docker image ls
REPOSITORY           TAG       IMAGE ID       CREATED        SIZE
express-slim         latest    afe678706d58   37 hours ago   312MB
express-distroless   latest    6a1421f17b86   37 hours ago   207MB
```

3割程度小さくなっていることがわかります。
サイズが小さくなることでビルド後のイメージを保存する先のストレージ容量の節約や、デプロイ時間の短縮が期待できます。

### 脆弱性の数の比較
次に[Trivy](https://trivy.dev/)というコンテナイメージの脆弱性スキャナーをつかって検出される脆弱性の個数を比較してみます。

```
➜ trivy image express-slim
(省略)
Total: 51 (UNKNOWN: 0, LOW: 50, MEDIUM: 0, HIGH: 1, CRITICAL: 0)
(省略)

➜ trivy image express-distroless
(省略)
Total: 23 (UNKNOWN: 0, LOW: 11, MEDIUM: 8, HIGH: 4, CRITICAL: 0)
(省略)
```

今回は細かい内容までは追わずに単純な個数で比較しますが、脆弱性の数が半分以下になっていることがわかります
（HIGHが多いのが気になりますが・・）

## その他TIPSなど
### 開発中はSSHできないと不便
:debugタグをつけたイメージを利用することで一般的なコンテナイメージと同様にdocker runコマンドでsshログインが可能になります。

```
FROM gcr.io/distroless/nodejs:18
↓
FROM gcr.io/distroless/nodejs:18:debug
```

### 軽量なコンテナイメージとしてはAlpineのほうが有名なのになぜDistrolessを採用しているのか
Alpineは軽量にするため特殊構成をとっているディストリビューションであり、標準Cライブラリに一般的なglibcではなくmuslを採用しています。
Node.jsではmuslを採用しているプラットフォームで動作させる場合のサポートレベルはExperimentalとなっています(2023年8月現在)。
この点から、実運用時の安定性のことを考えて一般的なディストリビューションであるDebianベース(=標準Cライブラリがglibc)のDistrolessを使いました。

## まとめ
今回はNode.jsのアプリケーションを動かすコンテナをDistrolessを使って構築してみましたが、変更自体も簡単で、記事内で解説したとおり軽量かつセキュアなコンテナにするという目的が達成できそうです。

その要因として、Node.jsインストール済みのイメージがDistrolessで提供されていることが大きかったのですが、たとえばPHPのように標準で提供されてないアプリケーションのコンテナイメージを構築する場合、自前でミドルウェアを追加する作業が必要になり、軽量かつセキュアというメリットがあまり活かせないことになりそうです。

用途に応じた使い分けが必要だと感じました。

## 参考リンク
- [Distroless](https://github.com/GoogleContainerTools/distroless)
- [Best practices for writing Dockerfiles](https://docs.docker.com/develop/develop-images/dockerfile_best-practices/)
- [DockerでNode.jsを動かすときのベストプラクティス](https://blog.shinonome.io/nodejs-docker/)
- [Node.js Docker baseイメージには alpine < distroless < ubuntu+slim 構成がよさそう](https://zenn.dev/jrsyo/articles/e42de409e62f5d)

large_20230825_1.png

medium_20230825_1.png

small_20230825_1.png

thumbnail_20230825_1.png

20230825_1.png

軽量でセキュアなコンテナイメージを使ってみよう

非同期システムでESLint の for..of 警告に従いたくなかった話

<p>先日改訂版が発売された</p>
<p><a href="https://www.lambdanote.com/collections/frontpage/products/carta">事業をエンジニアリングする技術者たち ― フルサイクル開発者がつくるCARTAの現場</a></p>
<p><a href="/uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x.webp"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17940" src="/uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x-211x300.webp" alt="" width="211" height="300" srcset="/uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x-211x300.webp 211w, /uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x-228x324.webp 228w, /uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x.webp 530w" sizes="(max-width: 211px) 100vw, 211px" /></a></p>
<p>という書籍がTL上で話題になっていました。副題にある「フルサイクル開発者」という聞き慣れない用語が個人的に気になったので、今回はそちらについて調べてみました。</p>
<h2>フルサイクル開発者とは</h2>
<p>設計、実装、テストといういわゆる開発作業だけでなく、デプロイ、運用やサポートまで含めた一連のすべてを担う開発者（チーム）のことで、もともとはサブスクリプション制の動画ストリーミングサービスの最大手であるNetflix社のブログで提唱された概念です。</p>
<p><img decoding="async" loading="lazy" class="wp-image-17932 size-medium" src="/uploads-archive/2022/09/1__nN4aj7uohV4v8bnqJCw3g-300x262.png" alt="" width="300" height="262" srcset="/uploads-archive/2022/09/1__nN4aj7uohV4v8bnqJCw3g-300x262.png 300w, /uploads-archive/2022/09/1__nN4aj7uohV4v8bnqJCw3g-228x199.png 228w, /uploads-archive/2022/09/1__nN4aj7uohV4v8bnqJCw3g.png 559w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>https://netflixtechblog.com/full-cycle-developers-at-netflix-a08c31f83249 から引用</p>
<p>特定の作業だけを専門とする複数部門をまたがずに完了するので、より早くプロダクトや機能をリリースできるようになります。DevOpsの原則をもっとつきつめたものというイメージでしょうか。</p>
<p>よいことばかりではなく、責任範囲が増えることにより業務量が増えがちなことや、特定分野を極めたい人にとって興味外のことまでやらないといけなくなることが課題となりそうです。</p>
<p>そういった課題の解消のため、一つのチームが見るべき責任範囲を狭められるようマイクロサービス化を進めるなどを行っている企業もあるようです。既存の組織に適用する場合はこういったこと含め、いろいろ考えるべきことがありそうです。</p>
<h2>まとめ</h2>
<p>数人で始めたときは（自然とフルサイクル開発になっていて）すごいスピードで成長していたのに、その後、人が増えてチームわけをしていくと、どんどんスピード感がなくなっていき、「昔はよかった・・」って言ってるようなケースを過去にいろんな組織で見てるのですが、それに対する一つの解決方法になるんじゃないかと感じました。</p>
<p>個人的にも自分の目指す方向性とマッチしているように思えたので、もし、「今後どういうエンジニアになりたい？」って質問されたら「フルサイクルエンジニア」※と言おうと思います。そんな機会あるかわからないですが・・</p>
<p>※原文はFull Cycle Developerなのでカタカナだとフルサイクルデベロッパーが適当だと思いますが、日本語訳としてはフルサイクルエンジニアとするのが多数派のようです。</p>
<h3>参考リンク</h3>
<p><a href="https://www.lambdanote.com/collections/carta/products/carta">https://www.lambdanote.com/collections/carta/products/carta</a><br />
<a href="https://netflixtechblog.com/full-cycle-developers-at-netflix-a08c31f83249">https://netflixtechblog.com/full-cycle-developers-at-netflix-a08c31f83249</a><br />
<a href="https://techblog.cartaholdings.co.jp/entry/2019/02/04/171325">https://techblog.cartaholdings.co.jp/entry/2019/02/04/171325</a></p>


small_1__nN4aj7uohV4v8bnqJCw3g.png

thumbnail_1__nN4aj7uohV4v8bnqJCw3g.png

1__nN4aj7uohV4v8bnqJCw3g.png

フルサイクル開発者とは

small_ES6-01.png

thumbnail_ES6-01.png

ES6-01.png

JavaScriptの分割代入構文を使いこなそう

<h2>先にまとめ</h2>
<ul>
<li>画像でネタバレしてますが、SQLでもJSON扱えます。</li>
<li>数十年使われて技術的に枯れてると思われてるSQLでもいろいろと進化してるので、普段使ってるものも改めて見直してみるといろいろ発見があるかも？</li>
</ul>
<h2>本題</h2>
<p>Webエンジニア歴〇〇年のあなたはある日上司から、APIから取得したユーザー情報を保存できるDBの設計を依頼されました。<br />
ユーザーには連番のID、名前、そしていろいろな情報が入ったJSONの3つの要素があるそうです。ということで、さっそく次のようなテーブルを作成して、テストデータを登録しました。</p>

		<div id="crayon-64954036ef46d382337068" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
sqlite&gt; CREATE TABLE user(
...&gt; id INT NOT NULL PRIMARY KEY,
...&gt; name TEXT,
...&gt; details JSON
...&gt; );
sqlite&gt; INSERT INTO user VALUES(1, 'Alice', '{ "age": 20, "tel": "0120-xxxxx-yyyy" }');
sqlite&gt; INSERT INTO user VALUES(2, 'Bob', '{ "age": 30, "tel": "0120-xxxxx-zzzzz" }');
sqlite&gt; SELECT * FROM user;
1|Alice|{ "age": 20, "tel": "0120-xxxxx-yyyy" }
2|Bob|{ "age": 30, "tel": "0120-xxxxx-zzzzz" }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ef46d382337068-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-2">2</div><div class="crayon-num" data-line="crayon-64954036ef46d382337068-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-4">4</div><div class="crayon-num" data-line="crayon-64954036ef46d382337068-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-6">6</div><div class="crayon-num" data-line="crayon-64954036ef46d382337068-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-8">8</div><div class="crayon-num" data-line="crayon-64954036ef46d382337068-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ef46d382337068-1"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">CREATE </span><span class="crayon-e">TABLE </span><span class="crayon-e">user</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-2"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">id </span><span class="crayon-t">INT</span><span class="crayon-h"> </span><span class="crayon-st">NOT</span><span class="crayon-h"> </span><span class="crayon-t">NULL</span><span class="crayon-h"> </span><span class="crayon-e">PRIMARY </span><span class="crayon-i">KEY</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64954036ef46d382337068-3"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">name </span><span class="crayon-i">TEXT</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-4"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">details </span><span class="crayon-i">JSON</span></div><div class="crayon-line" id="crayon-64954036ef46d382337068-5"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-6"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">INSERT </span><span class="crayon-e">INTO </span><span class="crayon-e">user </span><span class="crayon-e">VALUES</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'Alice'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'{ "age": 20, "tel": "0120-xxxxx-yyyy" }'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954036ef46d382337068-7"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">INSERT </span><span class="crayon-e">INTO </span><span class="crayon-e">user </span><span class="crayon-e">VALUES</span><span class="crayon-sy">(</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'Bob'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'{ "age": 30, "tel": "0120-xxxxx-zzzzz" }'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-8"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-i">user</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954036ef46d382337068-9"><span class="crayon-cn">1</span><span class="crayon-sy">|</span><span class="crayon-i">Alice</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-yyyy"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-10"><span class="crayon-cn">2</span><span class="crayon-sy">|</span><span class="crayon-i">Bob</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">30</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-zzzzz"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>テストデータを上司に見せたところ、ユーザーの中で20歳の人だけを抽出したいと言われました。早速LIKE文を使ったSQLを書いてみますが、20歳ではないBobのデータの電話番号にも20が含まれているため、うまく絞り込めません。さて困ったぞ・・</p>

		<div id="crayon-64954036ef472812425792" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
sqlite&gt; SELECT * FROM user WHERE details LIKE '%20%';
1|Alice|{ "age": 20, "tel": "0120-xxxxx-yyyy" }
2|Bob|{ "age": 30, "tel": "0120-xxxxx-zzzzz" }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ef472812425792-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef472812425792-2">2</div><div class="crayon-num" data-line="crayon-64954036ef472812425792-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ef472812425792-1"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">user </span><span class="crayon-e">WHERE </span><span class="crayon-e">details </span><span class="crayon-i">LIKE</span><span class="crayon-h"> </span><span class="crayon-s">'%20%'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef472812425792-2"><span class="crayon-cn">1</span><span class="crayon-sy">|</span><span class="crayon-i">Alice</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-yyyy"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954036ef472812425792-3"><span class="crayon-cn">2</span><span class="crayon-sy">|</span><span class="crayon-i">Bob</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">30</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-zzzzz"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>こんなときはJSON関数を使いましょう。今回のケースだとJSON_EXTRACT関数が使えます。この関数はJSONから必要なフィールドだけを取り出せます。これを使って年齢のフィールドの値だけを取り出せば後は簡単です。</p>

		<div id="crayon-64954036ef474790071815" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
sqlite&gt; SELECT * FROM user WHERE JSON_EXTRACT(details, '$.age') = 20;
1|Alice|{ "age": 20, "tel": "0120-xxxxx-yyyy" }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ef474790071815-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef474790071815-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ef474790071815-1"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">user </span><span class="crayon-e">WHERE </span><span class="crayon-e">JSON_EXTRACT</span><span class="crayon-sy">(</span><span class="crayon-i">details</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'$.age'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef474790071815-2"><span class="crayon-cn">1</span><span class="crayon-sy">|</span><span class="crayon-i">Alice</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-yyyy"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>うまくいきました！めでたしめでたし。</p>
<h2>あとがき</h2>
<p>今回の例はSQLiteを使って作成しました。MySQL(5.7以降)でも同じ関数が使えるようです。その他のDBでは別の関数名で同等の機能が提供されていたりするため、各自でマニュアル等を確認いただければと思います。</p>
<p>参考情報：</p>
<p><a href="https://www.json.org/json-en.html">https://www.json.org/json-en.html</a><br />
<a href="https://www.sqlite.org/json1.html#jex">https://www.sqlite.org/json1.html#jex</a><br />
<a href="https://dev.mysql.com/doc/refman/8.0/ja/json-search-functions.html">https://dev.mysql.com/doc/refman/8.0/ja/json-search-functions.html</a></p>

large_sql-1024x352.jpeg

medium_sql-1024x352.jpeg

small_sql-1024x352.jpeg

thumbnail_sql-1024x352.jpeg

sql-1024x352.jpeg

JSONを取り扱うならNoSQL使うかしかないのか

small_unnamed.png

thumbnail_unnamed.png

unnamed.png

Firebase CLIなしでFirestoreをローカル環境のテストで利用する

<h2>はじめに</h2>
<div>
<div>無料でコンピューターサイエンスを学習をする方法として</div>
<div>アメリカのハーバード大学のコンピュータサイエンスの授業がオンラインで見れるサイト</div>
<p>&nbsp;</p>
<div>CS50 for Japanese</div>
<div><a href="https://cs50.jp/">https://cs50.jp/</a></div>
<p>&nbsp;</p>
<div>を紹介いたします。</div>
<p>&nbsp;</p>
<div>本題に入る前に少し自分のことを説明すると今はエンジニアとして働いていますが</div>
<div>学生時代はコンピューターサイエンスについては基礎をすこし学んだだけで</div>
<div>しっかり勉強する機会がないまま就職してしまい、いつかちゃんと学び直したいなという気持ちを</div>
<div>持ちながらもお金や時間の問題もあり何もできてないという状態でした。</div>
<p>&nbsp;</p>
<div>そこで見つけたのが CS50 for Japanese でした。</div>
<div>動画自体は以前から Youtube 上でアップロードされていたようなのですが</div>
<div>去年（2021年）、日本語サイト公開と動画に日本語字幕が追加されました。</div>
</div>
<p>&nbsp;</p>
<h2>Week0を見た感想</h2>
<blockquote class="wp-embedded-content" data-secret="pftyqThR9u"><p><a href="https://cs50.jp/x/2021/week0/">Week0</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="&#8220;Week0&#8221; &#8212; CS50 for Japanese: コンピュータサイエンスの入門" src="https://cs50.jp/x/2021/week0/embed/#?secret=MV4bmNynYR#?secret=pftyqThR9u" data-secret="pftyqThR9u" width="500" height="282" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<div>上記のリンク先の埋め込み動画で、字幕をONにして言語を日本語にすると日本語字幕付きで見れます。</div>
<div></div>
<div></div>
<div>Week0は未経験者が最初に受ける講義のため、</div>
<div>まず</div>
<div>・コンピュータってなんだろう</div>
<div>・プログラミングって何をしてるんだろう</div>
<div>という話から始まり、</div>
<div>・ビジュアルプログラミング言語のScratchでプログラムを書いてみる</div>
<div>という流れで講義が進みます。</div>
<p>&nbsp;</p>
<div>私のように改めて復習したいって人にも良いし、</div>
<div>今まで触れてこなかったけどちょっと興味があるって人にも良いと思います。</div>
<div></div>
<div>私個人としては、コンピュータやプログラムのことを非エンジニアにも理解できる言葉で説明するやり方が参考になりました。</div>
<div>仕事柄、エンジニア同士だけじゃなく、エンジニアじゃない人に自分のやってることを説明する機会も多いのでそういう機会に活かせそうです。</div>
<p>&nbsp;</p>
<h2>まとめ</h2>
<div>Week1以降ではC言語やPythonを使った講義があるそうなので、もう少し歯応えのある内容のようです。</div>
<div>このシリーズ（〜Week10）を全部見終わることを今年の目標のにして頑張っていこうと思います。</div>
<h2>参考リンク</h2>
<ul>
<li><a href="https://prtimes.jp/main/html/rd/p/000000017.000049664.html">https://prtimes.jp/main/html/rd/p/000000017.000049664.html</a></li>
<li><a href="https://cs50.jp/">https://cs50.jp/</a></li>
</ul>


medium_hsph-logomock-s-1024x768-1-768x576.jpeg

small_hsph-logomock-s-1024x768-1-768x576.jpeg

thumbnail_hsph-logomock-s-1024x768-1-768x576.jpeg

hsph-logomock-s-1024x768-1-768x576.jpeg

無料でコンピューターサイエンスが学べるCS50について

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: Arikawa

2025/06/20

2025/02/21

2024/12/20

2024/09/13

2024/06/13

2024/03/15

2023/11/24

2023/08/25

2022/11/11

2022/09/09

2022/08/06

2022/06/25

2022/04/23

2022/04/02