## はじめに
[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)

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


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

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)


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)

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>


1__nN4aj7uohV4v8bnqJCw3g.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>

sql-1024x352.jpeg

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

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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: Arikawa

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