ツイートのいいね数やコメント数、YouTubeの投稿日時、Amazonなどネットショップのレビュー数、通貨ごとの適切な価格表示など、UX（ユーザーエクスペリエンス）の向上やコンテンツや商品の競争力を高めるためには、これらの数字をユーザーが一目で理解できるようにすることが一つのポイントになります。

また、数字が非常に長い場合は、簡潔に表示する方が読みやすいです。さらに、ユーザーの使用言語や文化に合わせて、数字を適切に表示することが良いでしょう。

上のように数字、日付、価格を簡潔に表示するために、外部ライブラリを使用せずに、JavaScript標準仕様にあるIntl APIを使用するとより簡便に実装できます。

### Intl API
**Intl** APIはinternationalization（国際化）APIの略で、下記はMDNからの引用です。

> **`Intl`** オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 **`Intl`** オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します。
> 

また、internationalizationは始めのiから終わりのnまでの間に18文字入っていることで**i18n**と呼ばれています。

ほとんどの最新のブラウザでサポートされているため、互換性を心配せずに使用できます。

では、いくつかの使い方を紹介します。

## 数字を簡潔に表示
`Intl.NumberFormat`を使用します。
viewsに閲覧数を表す数字を入れています。このように大きな数字をそのまま表示すると読みにくくなります。
最初の引数には言語を指定するだけで良いので、日本語の場合は`ja-JP`を指定します。
```
const views = 9741275;
const formatter = new Intl.NumberFormat('ja-JP');

console.log(formatter.format(views));  // 9,741,234
```
より簡潔に表示するには、2番目の引数にさまざまなオプションを指定できます。オプションの中で`notation: 'compact'`を指定するとコンパクトになります。
```
const views = 9741275;
const formatter = new Intl.NumberFormat('ja-JP', {
    notation: 'compact'
});

console.log(formatter.format(views));  // 974万
```
さらに、1番目の引数に言語ブラウザのAPIでサポートされている`navigator.language`を指定すると、ユーザーがブラウザで設定した言語を自動的に取得でき、ユーザーが指定した言語に応じて数字を表示できます。
```
const views = 9741234;
const formatter = new Intl.NumberFormat(navigator.language, {
  notation: 'compact'
});

console.log(formatter.format(views));  // 974万
```
## 価格を通貨に合わせて簡潔に表示
同様に`Intl.NumberFormat`を使用します。
1番目の引数には同じく言語を、2番目の引数のオプションで`style: 'currency'`に設定し、currencyオプションで通貨`currency: 'JPY'`を指定します。
```
const price = 1000000;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency', 
  currency: 'JPY'
});

console.log(formatter.format(price)); // ￥1,000,000
```
ここでも"compact"オプションを使用してコンパクトにすることができます。compactオプションは価格よりはいいねの数など大体の数を表す時にいいかもしれません
```
const price = 1000000;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency', 
  currency: 'JPY',
  notation: 'compact'
});

console.log(formatter.format(price)); // ￥100万
```
## 相対時間をスマートに表示
商品や記事がいつ公開されたか、何日前、何時間前に投稿されたかを表す必要もあります。相対時間をスマートに表示するためには`Intl.RelativeTimeFormat`を使用します。
`format`の1番目の引数は数字で、2番目には日付か時間か月かなどを指定します。
```
const formatter = new Intl.RelativeTimeFormat('ja-JP');

console.log(formatter.format(1, 'day')); // 1 日後
```
オプションに`numeric: 'auto'`にすると言葉を変えてくれます。
```
const formatter = new Intl.RelativeTimeFormat('ja-JP', {
  numeric: 'auto'
});

console.log(formatter.format(1, 'day')); // 明日
```
入社して何日経ったかを示したい場合、今日を基準にして、入社日の日付を指定し、現在までの日数を計算し、フォーマッタを使用すると、"〜日前”と表示されます。
```
const today = new Date();
const startDate = new Date(2021, 4, 17); // 2021年5月17日　monthは0から始まるため5→4
const daysPassed = Math.ceil((startDate - today) / (1000 * 60 * 60 * 24));
const yearsPassed = Math.ceil((startDate - today) / (1000 * 60 * 60 * 24　* 365));
const formatter = new Intl.RelativeTimeFormat('ja-JP', {
  numeric: 'auto'
});

console.log(formatter.format(daysPassed, 'day')); // 857 日前
console.log(formatter.format(yearsPassed, 'year')); // 2 年前
```
ただし、2番目の引数は日か時間かのどちらか1つだけを指定できます。

この問題を補完できるライブラリ`timeago.js`がありますが、時間がどれだけ経過したかに応じて日か時間かを自動的に表示されるので、相対的な時間のみが必要な場合に便利かと思います。

## 日付と時間を正確に表示
時間を表示するときには、コンパクトにしてより読みやすい場合もありますが、正確な日付を表示する必要があるときもあります。その場合は`Intl.DateTimeFormat`または`toLocalDateString`を使用します。
```
const today = new Date(); // 作成日基準の今日

console.log(today.toString()); // Thu Sep 21 2023 12:05:01 GMT+0900 (日本標準時)
console.log(new Intl.DateTimeFormat('ja-JP').format(today)); // 2023/9/21
```
これをさらに簡略化した方法もあります。
```
const today = new Date();

console.log(
  today.toLocaleDateString('ja-JP', {
    minute: 'numeric',
    hour: 'numeric',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    weekday: 'short'
  })
); // 2023年9月21日(木) 12:18
```
日付にtoLocaleDateStringを使用するだけで、内部的にはIntl APIを使用するため、より簡単にフォーマットを使用できます。言語を指定するだけでその言語に合わせたフォーマットが表示されます。さらに、さまざまなオプションを指定することもできるので、より簡単にまたはより詳しく表示できます。

### まとめ

IntlはJavaScriptの標準仕様であるので、定期的に更新され常に最新の国際化に向けた実装が可能です。また、外部ライブラリに依存せずに使用できることも良い点です。もちろん一つの言語だけを対応するサイトでも使用でき、その言語に合わせたフォーマットにしてくれるので別途用意しなくて済みます。

日々の開発においても活用していきたいと思います。


#### 参考
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl
- https://cercopes-z.com/JavaScript/Object-Intl-js.html


【JavaScriptのIntl】数字や日付、価格の表示をスマートに

## はじめに

本記事では、これから TDD の導入を考えている方や、TDD を導入している案件に携わる方に向けて、私が実際に TDD をやってみて感じたメリット・デメリットをまとめたいと思います。

## テストの重要性

テストは、ソフトウェアの品質向上や開発効率化に欠かせないものになってきています。テストを効果的に活用することで、ソフトウェアの品質や信頼性を向上させ、開発コストを削減することができます。

## TDD(テスト駆動開発)とは

テスト駆動開発（Test-Driven Development、TDD）は、ソフトウェア開発の手法の一つで、テストの作成から始めて、その後にコードを実装するというサイクルを繰り返すことで、品質の高いソフトウェアを開発する手法です。
手動テストするのではなく、[Jest](https://jestjs.io/ja/)や[JUnit](https://junit.org/junit5/)などのテストフレームワークを使用します。

一般的な開発では、下図のように設計とテスト作成は分けて行うと思います。

 ![image](/uploads/20230908_2_b6073f3e4b.png) 

TDD では、最初にテストを作成します。
テスト作成 ≒ 設計のようなイメージです。

 ![image](/uploads/20230908_3_11d5709f45.png) 

## TDD の基本サイクル

TDD は「レッド」「グリーン」「リファクタリング」と呼ばれる工程で進められます。各工程で何をするのか、説明していきます。

### レッド

要件から、実装する機能のテストを作成します。この段階では実装をしていないので、テストはすべて失敗します。
テストツールを使っているときにテストが失敗すると赤色でエラー表示されるため、この工程はレッドと呼ばれます。

### グリーン　

レッドで作成したテストをもとに、実装を行います。
ここで重要なのは、完璧なコードを書くことではなく、先に設定したテスト条件を全てクリアさせるだけの「最小限」のコードを書くということです。
テストツールを使っているときにテストが通ると緑色でエラー表示されるため、この工程はグリーンと呼ばれます。

### リファクタリング

すべてのテストが通るようになったら、リファクタリングを行ってコードの可読性を高めます。
この工程は後回しになりがちですが、プログラムの規模が大きくなると大変になってしまうので、こまめにリファクタリングすることをお勧めします。

## TDD のメリット

TDD を実施すると、以下のようなメリットがあります。

### 安心して実装ができる

テスト条件を全てクリアさせるように実装することで、実装漏れやバグの発生を抑制できます。
また、何を実装すれば良いのかはテストを見ればすぐにわかるので、工数の削減が期待できます。

### 品質向上

テストが既にあることで、開発者がコードを変更する際にも、影響を受ける他の部分に対して問題がないかを確認できます。また、テストが十分にカバレッジされている場合、バグやエラーを早期に発見できるため、ソフトウェアの信頼性が向上します。

### ドキュメントとしての役割

テストコードはソフトウェアの仕様や振る舞いを示すドキュメントとして機能します。ソフトウェアの動作がテストによって明確になり、コードの理解が容易になります。
テストコードはソフトウェアの変更に伴って、常に最新の状態に保つ必要があります。そのため、テストコードはソフトウェアのバージョン管理システムに登録し、管理することが一般的です。

### リファクタリングのサポート

リファクタリングを行う前に、テストケースを実行して、リファクタリング後にもテストが通ることを確認することで、ソフトウェアの外部的な振る舞いを保てていることになるため、安全にリファクタリングを行うことができます。
また、リファクタリングで起きがちなデグレ(デグレード)やバグの発生を防止できます。

## TDD のデメリット

TDD は、ソフトウェアの品質向上や開発効率化に効果的な手法ですが、導入にはいくつかの課題があります。

### テストを作るのに時間(工数)がかかる

TDD は、テストコードを先に作成する必要があるため、開発プロセス全体において時間がかかることがあります。
ただし、長期的にはバグの減少や品質向上が見込めることから、開発全体で考えると時間の節約と考えることもできます。

### 熟練度と学習コスト

TDD は、初めて取り組む開発者にとっては学習コストがかかる場合があります。
効果的なテストを作成するためには、適切なテストケースを選択し、適切なカバレッジを持つことが必要です。
しかし、開発の初期段階に完璧なテストコードを書くのは難しいので、今思い浮かぶ機能の中でテストを作成し、仕様変更などのタイミングでより細かいテストを増やしていく方針で進めていました。

### テストの保守

ソフトウェアの変更に伴い、テストコードも頻繁に更新する必要があるため、テストの保守に工数がかかることがあります。
TDD を導入する際にはその負担をチームに理解してもらう必要があります。

## 課題の解決策

TDD の課題を解決するためには、以下のような対策が考えられます。

### テストコードの自動生成ツールを活用する

テストコードの自動生成ツールとは、ソフトウェアの設計や仕様を元に、テストコードを自動的に生成してくれるツールです。
例えば、テストフレームワークに[Jest](https://jestjs.io/ja/)を使用しているのであれば、[jest-test-gen](https://github.com/egm0121/jest-test-gen)などがあります。
テストコードの自動生成ツールを活用することで、テストコードの作成にかかる時間を短縮することができます。

### テストケースの標準化を図る

テストケースの標準化とは、テストケースの作成や評価に使用するルールや手法を定義することです。
テストケースの標準化をすることで、開発者の経験やスキルに依存することなくテストコードを作成できるため、テストコードの作成や保守の効率化を図ることができます。

### チームでのテスト文化を醸成する

チームでのテスト文化を醸成することで、テストの重要性や必要性を理解してもらい、テストへの協力を得やすくなります。

## まとめ

私は気になるところがあるとすぐにリファクタリングしたくなっちゃう性格なので、TDD にはとても助けられています。
TDD は、一見面倒な手法に思われるかもしれませんが、バグの早期発見や仕様の理解、コードの品質向上など、多くのメリットがあります。
メリットとデメリットを理解した上で、適切に活用していきましょう！

## 参考リンク

- [テスト駆動開発（TDD）とは？基本サイクルと運用時の注意点を解説！【ソフトウェア開発・テスト用語 】| Qbook](https://www.qbook.jp/column/713.html)
- [テスト駆動開発（TDD）入門](https://products.sint.co.jp/ober/blog/tdd)
- [テスト駆動開発（TDD）とは？目的やメリット・デメリット、やり方を解説 ｜ソフトウェアテストの SHIFT](https://service.shiftinc.jp/column/4654/)

medium_20230908_1.jpg

small_20230908_1.jpg

thumbnail_20230908_1.jpg

20230908_1.jpg

TDD(テスト駆動開発)について

Shopeeの商品情報は非常に複雑で、そのため出力できるCSVデータも複雑であり正直わかりやすい状態ではありません。
なので出力できるファイルとその中身についてまとめます。

出力できるファイルは以下の5つです。

mass_update_basic_info
mass_update_sales_info
mass_republish_items
mass_update_shipping_info
mass_update_media_info

それぞれの内容と項目は以下のとおりです。

### mass_update_basic_info
Product ID: Shopeeの商品IDです
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
Product Name: 商品名
Product Description: 商品說明
Fail Reason: 基本的に空欄

### mass_update_sales_info
Product ID: Shopeeの商品IDです
Product Name: 商品名
Variation ID: バリエーションIDです。バリエーションの有無に関わらず値が入ります        
Variation Name: バリエーション名です。バリエーションが2つある場合はセル内にカンマ区切りで2つ入ります     
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
SKU	Price: バリエーションごとの価格です    
Stock; バリエーションごとの在庫です    
Fail Reason: 基本的に空欄

### mass_republish_items
Product ID: Shopeeの商品IDです
Product Name: 商品名
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
Sales: 過去の販売件数
Stock: バリエーションごとの在庫    
Action: ステータスをDelist または Publish
Fail Reason: 基本的に空欄

### mass_update_shipping_info
Product ID: Shopeeの商品IDです
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
Product Name: 商品名
Product Weight/kg: 重さ
Length: 長さ
Width: 横幅
Height: 高さ
Shipping Toggle: 配送切替onまたはoffを指定
I will cover shipping fee: 送料無料onまたはoffを指定
Shipping fee: 配送料
Fail Reason: 基本的に空欄

### mass_update_media_info
Product ID: Shopeeの商品IDです
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
Product Name: 商品名
Category: カテゴリのIDと構造。例: 100893 - Beauty/Skincare/Facial Moisturize
Cover image: カバー画像のURL
Item Image 1〜8: 画像1〜8のURL
Size Chart: サイズチャート画像のURL
Variation Name1: バリエーション1の名前    
Option 1 Name〜Option 30 Name: オプション1〜30の名前
Option 1 Image〜Option 30 Image: オプション1〜30の画像URL
Fail Reason: 基本的に空欄


一括での引っ越し作業などの際参照いただければ幸いです。

Shopeeで出力できる商品CSVの種類と内容

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

## はじめに
みなさんは開発に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

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

## React初体験

今月にスターフィールド のWebサイトが新しくリニューアルされました。この開発に伴い始めてReact環境で開発を体験しました。
ReactはJavaScriptのライブラリの一種と聞いてはいましたが、Webデザイナーとして経験してきたJavaSciptの開発とは全く別物のように感じました。

このブログでは、React環境での開発体験を詳しくまとめて、初心者がReactに挑戦する際に直面するであろう注意点、気づいたポイントについてまとめます。


## そもそもReact とは？

ReactはJavaScriptライブラリであり、主にユーザーインターフェースを構築するのに向いています。近年、Webサイトを構築する上でheader、footerなど
共通部分をモジュール化し、それを読み込ませてページを作ります。
Reactはこのモジュール化の考え方が色濃く表れてる言語という印象を受けました。また、そのため今までの開発環境と大きく変わりました。

例えば、jQuery環境で開発する場合、一般的には<head>タグ内にjQueryファイルを読み込むコードを記載するでしょう。そして、topページ内ではメインビジュアルをslickスライダーなどのモジュールを読み込み動きを設定し、CSSで装飾をする。などの流れで動きのあるリッチコンテンツを作ります。

しかし、Webサイト全体を見た場合、例えばプライバシーポリシーページなど、ただテキストを配置するだけで、特別な仕掛けもないページも存在します。このとき、不要なページにもjQueryファイルを読み込ませてしまい、サーバーには余計な負荷を書けることになります。

一方、Reactの場合、例えばメインビジュアルのスライダーは<slider>などの名前でモジュール化します。そして、このモジュール専用のHTMLとCSSを作成してまずこの部分だけ完成させます。その後、必要なページの必要な箇所でこの<slider>を読み込みWebページを作成します。
各ページ毎に読み込むページが必要最低限で済むのでデータ通信の容量を軽くできます。

一見すると、WordPressでもよく使われる「include」により、各パーツを指定してページを構成する方法と似ていますが、大きく違うのはWordPressは呼び出すデータはHTMLだけになります。そのため呼び出したページのCSSで、読み込んだHTMLに改めてスタイルを適用させる必要があります。  
しかし、Reactの場合はCSSも適用された完成形の形でモジュールが呼び出されるため、改めてスタイルを適用させるを必要もありません。

例えるなら、ブロック工法（機械や建物の製造時に、いくつかの要素を分けて同時に製造し、最後に繋ぎ合わせて完成させる工法）に近い考え方でページを作ります。


## 実際の記述について

開発を体験してみて、記述の仕方が独特と感じました。実際に特徴的だと思った点を主にまとめてみました。

・各ページ、モジュールを「.tsx」ファイルで作る。

先ずは各ページのモジュールを作ります。

```
import Head from 'next/head';
import styles from '@/styles/career.module.scss';


function 関数() {
  return (
       実際のHTML
  );
}

```


という形で記述します。

また、HTMLの記述も全てのタグを「 /(スラッシュ)」を記述して閉じなくてはいけません。大概のタグは/(スラッシュ)で閉じるので当たり前ですが、<br>や<img>タグにもそのルールが適用されて、まるでXHTMLのような記述をする必要があります。

またCSSも

```
<div className={styles.textArea}>

```

などのような形で指定していきます。


少しでもミスがあるとエラーが出てしまい、表示が崩れてしまうレベルではなく、ページその物が閲覧できない状態となり戸惑いました。


## 外部ライブラリーやプライグインを使う場合

トップ画面などで、複数枚の画像をスライダーで見せるホームページはよくあります。jQuery環境下ではこのようなコンテンツを作る際は、主に、slickスライダーなど、有名なプラグインを使うケースが多いです。Reactでもこのようなプラグインを使うことができます。

slickスライダーを例に、React で プラグインを使う場合は以下のようにします。

先ず、

```
$ npm install react-slick

（yarn を使っている場合は yarn add react-slick ）

```

とコードを導入して、プロジェクトに　silick スライダーをインストールします。

そして、.tsvファイルにCSSと同様に

```
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

```

と記述します。
これで　sickスライダーが使える環境が整います。

後は他のモジュールと同様に作成していきます。
例えば、


```

function slickContents() {
  const settings = {
    dots: true,
    autoplay: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  }
  
  return (
    <ul>
      <Slider {...settings}>
        <li><img src={img1} alt='img1' /></li>
        <li><img src={img2} alt='img2' /></li>
        <li><img src={img3} alt='img3' /></li>
      </Slider>
    </ul>
  );
}

```

などのように記述します。

```
  const settings = {
  }

```


こちらの箇所でslickスライダーの設定をします。
jQueryでは外部ファイルのjsファイルに記述して設定するケースが多いですが、記述する位置が違うだけで設定の方法は概ね同じです。

スライダーの動きを設定したあと　

```
  return (　)

```


で実際のHTMLを書き、モジュールを作成します。

そして、実際にスライダーを掲載したい位置に

```

<slickContents/>

```


と記載する事でスライダーが設置されます。

reactは全般的にこのような流れで開発を進めていきます。



## プラグインを使わないコードについて

jQuery環境で開発をする際、プラグインを使わず自分で簡単なコードを記述してコンテンツを作る場合があります。
例えば、クリックしたらclss 「on」 を追加し、CSSで実際にその変化を作るということはよくありました。

同じ事をReact環境下でも行いました。

今回実際にアコーディオン形式でクリックしたら配下のコンテンツの表示、非表示が切り替える動きを作りました。

li="dropListItem" をクリックしたら　これにon を追加したり、削除する。という動きを作りました。
そして、CSSで　li="dropListItem on"　の時は配下の hideArea が表示されるという仕掛けを作成しました。


実際には以下のように記述しました。

```
import React, {useState} from 'react';


function DropListItem ({title , text}) {
  const [isOn, setIsOn] = useState(false);
  const handleClick = () => {
    setIsOn(!isOn);
  };

  return (
    <li className={`dropListItem ${isOn ? 'on' : ''}`} onClick={handleClick}>
      <div className={styles.showArea}>
        <p>{title}</p>
      </div>

      <div className={styles.hideArea}>
        <p>{text}</p>
      </div>
    </li>
  )
}

```

先ずはReqctの「useState」という関数を使うので先に、

```
import React, {useState} from 'react';

```
と記述します。

そして、

```
function DropListItem  ({title , text})

```
と従来の流れ通りにモジュールのタイトルを設定します。

```
{title , text}

```
の部分は最後に解説します。


今回はHTMLに　on  と off　の二段階の変化があります。このように変化するとき
useStateを使います。

```
const [isOn, setIsOn] = useState(false);

```

と、記述したのは「isON」という状態になるときと、「setIsOn」という状態になるときがある。
そして、

```
useState(false);

```

と書くことで書記状態は useState で指定する変化がない状態という意味合いになります。

```
  const handleClick = () => {
    setIsOn(!isOn);
  };

```


この関数は hadleClick という関数が呼び出される度に、「setIsOn」と「isOn」　という状態が切り替わるという意味になります。

そして、実際にHTMLを記載する際に

```
<li className={`dropListItem ${isOn ? 'on' : ''}`} onClick={handleClick}>

```


と記載しました。
解説すると、先ず、

```

className={ dropListItem } 

```


と記載し、liに「dropListItem」　というclass名を付けます。

```

${isOn ? 'on' : ''}

```


この部分の意味は　isOnの状態では、class「on」を追加、そうでないときは空白を入れる、つまり何も入れない状態にする。という意味になります。

```

onClick={handleClick}

```

はクリックした際に 「handleClick」を呼ぶという状態になります。

事前に、「handleClick」は「isOn」と「setIsOn」を切り替えるように設定しているのでクリックする度に on が挿入した状態とされない状態に切り替わるようになります。

これで、動作については完成しました。後は、実際にを配置したい場所に

```

<DropListItem />

```


と記述することで配置できます。

しかし、この<DropListItem />は配下のテキストを変えて複数配置するコンテンツです。そのため、実際に変えるテキスト部分は関数にして、各<DropListItem />ごとにテキストを変えられようにしました。

そのため、先ず、

```

function DropListItem  ({title , text})

```

と記載し、

実際にテキストを変えるHTMLには


```
    <li className={`dropListItem ${isOn ? 'on' : ''}`} onClick={handleClick}>
      <div className={styles.showArea}>
        <p>{title}</p>
      </div>

      <div className={styles.hideArea}>
        <p>{text}</p>
      </div>
    </li>

```
と記載しました。

最終的には以下のように記述します。

```

<ul>タイトル1の詳細情報を記載ます。
  <DropListItem title="タイトル1" text="タイトル1の詳細情報を記載します。"/>
  <DropListItem title="タイトル2" text="タイトル2の詳細情報を記載します。"/>
  <DropListItem title="タイトル3" text="タイトル3の詳細情報を記載します。"/>
  <DropListItem title="タイトル4" text="タイトル4の詳細情報を記載します。"/> 
</ul>

```

このような流れでアコーディオン形式のコンテンツの作成ができました。


6　まとめ

Reactは今までのHTMLとCSS、それにjQueryによる開発に慣れている人から見たら全く違う物のように感じます。そのため戸惑う部分が多くあります。
しかし、モジュール単位で開発をするという性質上、複数人での開発に適していると感じました。

せっかく会社に属して仲間と共に開発の仕事をしているので、積極的に覚えてより良い物を作りたいと思いました。








large_react.jpg

medium_react.jpg

small_react.jpg

thumbnail_react.jpg

react.jpg

 初めてReactで開発して感じたことのレポート

最近、WordPress以外のCMSへの移行の需要も広がりつつあるというお話を聞きます。  
CMSとして80%の圧倒的なシェアを持つWordPressですが、  
シェアの大きさゆえに攻撃の対象にもなりやすく、  
実際、攻撃を受けてセキュリティの被害に遭うことも少なくありません。  
また、多くの機能を実装できるため、実装次第で重くなりやすい特徴もあります。  
そういったこともあり、WordPressを使わないCMSへの移行を望む企業さんも増えているようです。  
   
その移行先として注目されているのが、ヘッドレスCMSと呼ばれる種類のCMSです。  
WordPressでは、コンテンツの管理とサイトのレンダリングを両方行います。   
一方、ヘッドレスCMSでは、コンテンツの管理のみを行い、サイトのレンダリングやジェネレートなどは別のサービスを利用して行います。  
そのため、サイトからコンテンツへの攻撃がされにくくなります。  
また、コンテンツの数が多くなってもサイトのレンダリングに直接影響しないため、表示速度を上げやすいメリットもあります。  
   
この記事でご紹介する「Strapi」は、Node.jsのヘッドレスCMSとしては人気があります。  
ヘッドレスCMSは多くのサービスが提供されていて、CMS選びに迷いますが、  
ホスティングサービスを利用しなければ無料で利用でき、  
Nodejsの環境があればローカルで始められるので、開発のハードルが低いのが大きな理由でしょうか。  
  
Strapiはコンテントタイプ（WordPressでいう投稿タイプやタクソノミー）フィールドを自由に構成でき、  
ユーザのロールなども管理でき、APIもRestAPIとGraphQLから選ぶことができるので、  
高い拡張性が特徴です。  
  
この記事では、Strapiでサイトを構築する１つの方法として、  
OSをUbuntu、WebサーバをNginx、サイトのジェネレートをNext.js、そしてCMSをStrapiで開発を始める方法を共有します。  
ここでは動作するまでのインストールに重点を置き、コンテンツの作成などは省略します。  
  
## 目次
1. <a href="#section1">UbuntuでNginxによるサーバを設定する</a>
2. <a href="#section2">Node.jsでNext.jsとStrapiの環境を準備</a>
3. <a href="#section3">Next.jsとStrapiでデータを連携する</a>

# UbuntuでNginxによるサーバを設定する
<a id="section1"></a>
## Nginxのインストール
参考にさせていただいたサイト: <a target="_blank" rel="noopener noreferrer" href="https://vpslife.server-memo.net/ubuntuserver2204_nginx_install/">【Ubuntu Server 22.04】Nginx公式サイトのリポジトリを使用してインストール  |  VPS Life</a>  
↑詳細はこちらのサイトが詳しいです。  
この記事ではざっくりと流れだけ触れていきます。 
  
### パッケージのインストール
```bash
$ sudo apt update
$ sudo apt install curl gnupg2 ca-certificates lsb-release ubuntu-keyring
```
  
### 署名鍵のインポートと確認
```bash
$ curl https://nginx.org/keys/nginx_signing.key | gpg --dearmor \
 | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null
$ gpg --dry-run --quiet --no-keyring --import --import-options import-show /usr/share/keyrings/nginx-archive-keyring.gpg
```
  
正しくインポートされると以下が表示されます
```bash
pub   rsa2048 2011-08-19 [SC] [expires: 2024-06-14]
      573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62
uid                      nginx signing key 
```

### リポジトリの追加とインストール
```bash
$ echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] \
http://nginx.org/packages/mainline/ubuntu `lsb_release -cs` nginx" \
 | sudo tee /etc/apt/sources.list.d/nginx.list
$ sudo apt update
$ sudo apt install nginx
```
### インストールの確認
nginxのインストールに成功すると、以下のコマンドでバージョンを確認できます。
```bash
$ nginx -v
```

## ufwによるファイアウォール設定とNginxでサーバの設定
### ufw によるファイアウォール設定
そのままサーバを開設すると、セキュリティ的に良くないので、ufwを使って開放するポートを制限します。  
参考にさせていただいたサイト: <a target="_blank" rel="noopener noreferrer" href="https://mynotebook.h2np.net/post/1519">ufwの最小限設定について – とりあえずノートがわりに書いてます</a>  
  
**ufwを設定するときは、いきなり実行するとSSH接続ができなくなってしまうので、  
まずは、```ufw status``` を実行して、```Status: inactive``` であることを確認します。**

確認できたら、以下のコマンドを 1つずつ実行して、許可するポートを制限します。
```bash
$ ufw allow 22
$ ufw allow http
$ ufw allow https
$ ufw allow domain
```

そしてufwを有効化。
```bash
ufw enable
```

最後に ```ufw status``` を実行して、目的のポートが開放されていることを確認します。
```bash
$ ufw status
 Status: active

To Action From
 -- ------ ----
 22 ALLOW Anywhere
 53 ALLOW Anywhere
 22 (v6) ALLOW Anywhere (v6)
 53 (v6) ALLOW Anywhere (v6)
``` 

利用するVPSなどによっては、VPSのコントロールパネルなどで、  
別途、ポートの開放が必要です。

### Nginxでサーバの設定
ここでご紹介する方法では、Next.jsでジェネレートしたファイルを静的にNginxでサーブし、  
それとは別にStrapiでCMSをサーブします。

そのため、静的にサーブするドメインとCMSをサーブするドメインを別々に割り当てます。

#### Nginxで静的なサーブ
/etc/nginx/nginx.conf を設定して
```nginx
server {
    server_name  <サイト用のドメイン名>;

    location / {
        root   /var/www/<Next.jsのディレクトリ>/out;

        index  index.html index.htm;
    }

    error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}
```

#### Strapi用の設定
/etc/nginx/conf.d/default.conf のhttpの設定で以下を設定
```nginx
http {
    ︙
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}
```

/etc/nginx/sites-enabled/<Strapi用のドメイン名>
```nginx
server {

    listen 80;
    server_name <Strapi用のドメイン名>;

    # Proxy Config
    location / {
        proxy_pass http://127.0.0.1:1337;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
        add_header  X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";
    }
}
```
あとは、```sudo nginx -t```でNginxの設定に問題がないことを確認し、```sudo systemctl start nginx```でNginxを起動すれば、  
Nginxの設定は完了です。

さらにUbuntu上でLet's EncryptによりSSLを設定する場合は、  
↓こちらの記事の方法がとても参考になります（Nginxの設定から更新まで自動！）。  
<a target="_blank" rel="noopener noreferrer" href="https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04-ja">Ubuntu 20.04でLet’s Encryptを使用してNginxを保護する方法  | DigitalOcean</a>


## Node.jsでNext.jsとStrapiの環境を準備
<a id="section2"></a>
Strapi公式のガイド: https://docs.strapi.io/dev-docs/integrations/next-js  
### Next.jsのインストール
```bash
$ npx create-next-app@latest
```
でNext.jsをインストールします。

### Strapiのインストール
ここでは、Next.jsをインストールした場所にstrapiをインストールしてみます。
StrapiをNext.jsと別の場所に置く場合などは、同じ場所にインストールしない方が良いでしょう。
```bash
$ cd <Next.jsをインストールしたディレクトリ>
$ yarn create strapi-app my-project --quickstart
```
でStrapiをインストールします。  
このとき、利用するDBをSQLite、MySQL、MariaDB、PostgreSQLから選択できます。  
SQLite以外を利用する場合は、別でMySQLなどインストール・きどうしておく必要があります。  
ここではMySQLを使った方法をご紹介します。  

### MySQLのインストール
参考にさせていただいたサイト: [Ubuntu 20.04にMySQLをインストールする方法  | DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04-ja)
#### インストール
```bash
$ sudo apt update
$ sudo apt install mysql-server
```
#### 設定
##### パスワード
```bash
$ sudo mysql_secure_installation
```
ここでいくつか質問されるので、   
```Please enter 0 = LOW, 1 = MEDIUM and 2 = STRONG:```では 2、   
```Re-enter new password:```では新たなパスワード、   
```Do you wish to continue with the password provided?(Press y|Y for Yes, any other key for No) : ```で Y   
として、パスワードを設定します。

##### ユーザ追加と権限の付与
```bash
$ mysql -u root -p
```
```mysql
CREATE USER 'ユーザ名'@'localhost' IDENTIFIED BY 'ユーザ名';
GRANT ALL PRIVILEGES ON * . * TO 'ユーザ名'@'localhost';
FLUSH PRIVILEGES;
```
##### Strapi用DBの作成
```mysql
exit
```
```bash
mysql -u ユーザ名 -p
```
```mysql
CREATE DATABASE strapi;
```
これでMySQLの準備は完了。  
Strapiのディレクトリに既にある.env、なければ新規に.envという名前のファイルを作り、以下のように記述  
.env  
```
︙
DATABASE_CLIENT=mysql2
DATABASE_HOST=127.0.0.1
DATABASE_PORT=3306
DATABASE_NAME=strapi
DATABASE_USERNAME=ユーザ名
DATABASE_PASSWORD=パスワード
DATABASE_SSL=false
```
続いて、./config/database.jsというファイルを開き、以下のように設定します。
```javascript
module.exports = ({ env }) => ({
  connection: {
    client: 'mysql',
    connection: {
      host: env('DATABASE_HOST', '127.0.0.1'),
      port: env.int('DATABASE_PORT', 3306),
      database: env('DATABASE_NAME', 'strapi'),
      user: env('DATABASE_USERNAME', 'strapi'),
      password: env('DATABASE_PASSWORD', 'strapi'),
      ssl: {
        rejectUnauthorized: env.bool('DATABASE_SSL_SELF', false), // For self-signed certificates
      },
    },
    debug: false,
  },
});
```

Strapiのディレクトリで以下コマンドを実行すると、Strapiが立ち上がり、表示されたURLにアクセスすると、ユーザ登録画面が表示されます。
```
yarn develop
```

## Next.jsとStrapiでデータを連携する
<a id="section3"></a>
### SSGでNext.jsからStrapiのAPIを呼び出す
※Strapiでrestaurantというコンテンツタイプを作った場合を例にしています（フィールドはtitleとslugを設定）。

SSGでNext.jsからAPIを呼び出す場合、pages/ のファイルで、```getStaticProps()```を使うことで、
ページをジェネレートする前にAPIを呼び出して、静的にHTMLを出力できます。
```typescript
import axios from 'axios'

function Page ({ posts, pagination, error } {
  return (
    <section>
      <h1>ページサンプル</h1>
      <ul>
        posts.map(post => (
          <li key={post.id}>{post?.attribute?.title}</li>
        ))
      </ul>
    </section>
  )
}

export async function getStaticProps () {
  try {
    const res = await axios.get('http://localhost:1337/api/restaurants');

    return {
      props: {
        posts: res?.data,
        pagination: {
          ...res?.meta?.pagination
        }
      }
    }
  } catch (error) {
    return { error }
  }
}

export default Page
```

#### ダイナミックルーティングでSSGする
pages/restaurants/[slug]/index.tsx のようにダイナミックルーティングでslugごとのページを生成したい場合、  
```getStaticPaths```を使います。  

```typescript
import axios from 'axios';

function Page ({ post } {
  return (
    <section>
      <h1>{post?.attribute?.title}</h1>
      ︙
    </section>
  )
}

export async function getStaticPaths () {
  let paths: (string | {
    params: ParsedUrlQuery;
    locale?: string | undefined;
  })[] = []
  const res = await axios.get(`http://localhost:1337/api/restaurants?pagination[pageSize]=10000&populate=slug`)
  if (res?.data?.length > 0) {
    paths = res?.data?.map(post => ({
      params: {
        slug: post?.attributes?.slug ?? null
      }
    }))
  }
  return { paths, fallback: false }
}

export async function getStaticProps ({ params }) {
  const res = await axios.get(`http://localhost:1337/api/restaurants?filters\[slug\][$eq]=${ params?.slug }`);

  return {
    props: {
      post: res?.data?.length > 0 ? res?.data[0] : undefined,
    }
  }
}

export default Page
```

# 対応してみた感想
WordPressに比べると、事前の準備も多く必要で、慣れるまでは大変かもしれません。  
SSGの場合、記事が多ければ多いほどビルドまでに時間がかかる問題もあります。  
ただ、基本的には1つの言語でバックエンドからフロントエンドまで調整することが可能で、  
SSGが故にクライアント側の表示は高速で、ビルドするとき以外はサーバの負担も軽くすみます。  
  
Strapiはコンテンツも自由に設定でき、実際に拡張性は高いと感じました。  
また、無料で試せるので、ヘッドレスCMSの練習としてもいいと思いました。

### 2023.8.28 追記
数百ページを超えるようなサイトでは、記事を更新するたびに全ページをbuildするSSGは向きません。  
その場合、Next.jsではISR(Incremental Static Regenerate)という仕組みが用意されていて、設定を工夫することで大量のページを含むサイトにも対応できるので、そちらの利用のご検討をおすすめします。

medium_ubuntu-nginx-nextjs-strapi.jpg

small_ubuntu-nginx-nextjs-strapi.jpg

thumbnail_ubuntu-nginx-nextjs-strapi.jpg

ubuntu-nginx-nextjs-strapi.jpg

Ubuntu✖️Nginx✖️Next.js(SSG)✖️StrapiでWEBサイトの環境を作る


<h2>はじめに</h2>



<p>この記事は、クラウド上でアのプリケーションに興味の人や Google Cloud のサービスを使用して自動化されたタスクのスケジューリングと実行を行いたいと考えている人のために、Google Cloud のサービスである Cloud Run と Cloud Scheduler の連携方法と Google Cloud サービス間の認証について解説します。</p>



<h2>1. Cloud Run と Cloud Scheduler の概要</h2>



<h3>Cloud Run</h3>



<p>Cloud Run は、開発者のウェブアプリケーションやサービスを手軽にオンラインに持っていくための Google Cloud のサービスです。</p>



<ul>
<li>手間がかからない: 開発者はアプリケーションに集中でき、面倒なインフラストラクチャの管理は Google に任せられます。これにより、時間を省け、本当に重要な開発作業に集中できます。</li>
<li>低コスト: Cloud Run は、サービスにトラフィックがあるときだけ課金されます。つまり、アプリケーションが使われていないときはお金をかけずに済むので、コストを抑えられます。</li>
<li>自動スケールアップ: アプリケーションに多くのユーザーがアクセスようになっても、Cloud Run は自動でスケールアップして対応します。これにより、あなたはサービスの拡大を気にせずに済みます。</li>
<li>色々なプログラミング言語に対応: Cloud Run はコンテナを使うため、あなたが好きなプログラミング言語を自由に使うことができます。これにより、あなたは柔軟にアプリケーションを開発することができます。</li>
</ul>



<h3>Cloud Scheduler</h3>



<p>Cloud Scheduler は、定期的なジョブのスケジューリングと実するためのサービスです。cron のような構文を使用してジョブのスケジュールを設定し、指定した時間にジョブをトリガーできます。Cloud Scheduler は、HTTP リクエストや Pub/Sub メッセージの送信など、さまざまなアクションをトリガーできます。</p>



<ul>
<li>高い信頼性: ジョブの実行が保証され、高い耐障害性を持っています。スケジュールされたジョブの実行を保証します。</li>
<li>柔軟性: HTTP、Pub/Sub、App Engine など、さまざまなターゲットに対してジョブを実行できます。</li>
<li>簡単な管理: ウェブベースのコンソールやコマンドラインを使用してジョブを簡単に管理できます。</li>
</ul>



<h2>2. Google Cloud</h2>



<p>サービス間の認証方法</p>



<p>Google Cloud のサービス間で情報をやり取りする際には、認証が必要です。サービスアカウントを使用して認証情報を設定することで、異なるサービス間で安全な通信を確立できます。</p>



<p>⚠️ 注意: テストやデモ目的ではサービスアカウントのキーを直接使用することは問題ありませんが、本番環境では使用しないでください。サービスアカウントキーはシークレットな情報であり、適切に管理する必要があります。適切な管理が行われない場合、セキュリティリスクが高まり、不正アクセスを許す可能性があります。使用する前に、サービスアカウントキーの管理に関するベストプラクティスを理解してください。(<a href="https://cloud.google.com/iam/docs/best-practices-for-managing-service-account-keys?hl=ja">https://cloud.google.com/iam/docs/best-practices-for-managing-service-account-keys?hl=ja</a>)</p>



<h2>3. Cloud Run と Cloud Scheduler の連携方法</h2>



<h3>サービスアカウントの作成と認証</h3>



<ol>
<li>Cloud Scheduler と Cloud Run の間で認証情報をやり取りするために、Google Cloud のサービスアカウントを作成します。</li>
<li>サービスアカウントに Cloud Run Invoker の役割を付与し、Cloud Scheduler から Cloud Run サービスを呼び出す権限を与えます。</li>
</ol>



<h3>Cloud Run のセットアップ</h3>



<ol>
<li>Google Cloud コンソールにログインし、「Cloud Run」を開きます。</li>
<li>「サービスを作成」をクリックし、サービス名、リージョン、認証方法を設定します。</li>
<li>必要なアプリケーションのイメージをコンテナイメージとしてアップロードします。</li>
<li>必要に応じて、環境変数やメモリ制限などのコンテナの詳細設定をします。</li>
<li>全ての設定が完了したら、「デプロイ」をクリックしてサービスをデプロイします。</li>
<li>デプロイ後に表示される Cloud Run のエンドポイント URL をコピー・保存します。これは外部からサービスにアクセスするための URL です。</li>
</ol>



<h3>Cloud Scheduler のセットアップ</h3>



<ol>
<li>Cloud Scheduler コンソールにアクセスし、「ジョブの作成」ボタンをクリックします。</li>
<li>ジョブの設定を行い、トリガーとなるスケジュールを設定します。例えば、毎日午前 9 時にジョブを実行する場合は <code>0 9 * * *</code> という cron 構文を使用します。</li>
<li>Cloud Run サービスの URL を指定し、ジョブが実行されるときに HTTP リクエストがその URL に送信されるように設定します。</li>
<li>[Auth ヘッダー] リストでトークンタイプを選択します。通常は OIDC を使用しますが、<code>\*.googleapis.com</code> ホストの Google API は例外で OAuth（アクセス）トークンが使用されます。</li>
<li>[サービス アカウント] でクライアント サービス アカウントのメールアドレスを指定します。</li>
</ol>



<h2>まとめ</h2>



<p>以上で、Cloud Run と Cloud Scheduler の連携および認証設定が完了しました。これにより、Cloud Scheduler が定期的に Cloud Run のサービスを自動的にトリガーできます。</p>


Google Cloud サービス間の連携：Cloud Run と Cloud Scheduler

【Git初心者向け】ソースツリーを利用したGit操作について

Terraform の適切なディレクトリ構造について考える

Webデザイナーでも最低限覚えるべきJavaScpitと学習してみて思ったこと

画像生成AIについて、実際に使ってみてどんな事ができるか試してみました。

<p>最近のシステム開発ではGitを使うことが一般的になってきました。<br />
実際、スターフィールドでもほぼすべての案件でGitを活用しています。</p>
<p>しかし、Gitは覚えることが多く仕組みも複雑なため、これからGitを使い始める人にとっては高いハードルになっているでしょう。<br />
私も初めてGitを使った時は何がなんだかさっぱりわかりませんでした。</p>
<p>この記事では</p>
<ul>
<li>これからGitを使い始めるけど、用語とか仕組みが全然わからない！</li>
<li>名前はなんとなく聞いたことあるけど、どんなものなのかわからない！</li>
</ul>
<p>という人向けに、基本的な用語や仕組みを重点的に説明します。</p>
<h2>そもそもGitとはどういうものなのか？</h2>
<p>Gitは、ざっくり言うとファイルを「いつ・誰が・どこを・どのように」編集したかを管理するツールです。</p>
<p>ファイルの変更履歴を管理するツールは昔から多数存在しますが、Gitはそのツールの中でも分散型バージョン管理システムという分類にあたります。<br />
分散型バージョン管理システムの特徴は、各自のPCにファイルを持ち、自分の好きなタイミングで編集内容を同期(プッシュやプル)できることです。<br />
同期さえしなければ、どんなにファイルを編集したり削除しても別の作業者に影響しないというメリットがあります。<br />
そのため、Gitは複数人で開発をする際に多く利用されています。</p>
<p>また、集中型バージョン管理システムというものも存在し、CVS・Subversionなどがこれに該当します。<br />
これらは編集が完了したらすぐに作業者全員に共有されるので、誤った変更内容を登録すると作業者全員に影響を与えてしまいます。</p>
<h2>GitとGitHubの違い</h2>
<p>Gitを使う際に、GitHubもセットで登場してくることが多いので混同する方もいると思いますが、GitとGitHubは同じものではありません！<br />
上記で述べたように、Gitは分散型バージョン管理システムというツールです。<br />
一方でGitHubはGitの仕組みを利用した、開発支援をしてくれるwebサービスです。<br />
Gitは「システム」でGitHubは「サービス」のような関係にあたります。<br />
「メール」というシステムにおける「Gmail」というサービス、「動画」というシステムにおける「YouTube」というサービス、といったような関係と同じものです。</p>
<h2>Gitの仕組み</h2>
<p>Gitは以下のような構造でファイルの変更履歴を管理しています。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11600" src="/uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87-300x225.png" alt="" width="600" height="450" srcset="/uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87-300x225.png 300w, /uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87-768x576.png 768w, /uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87-600x450.png 600w, /uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87.png 960w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>用語と仕組みを説明していきます。</p>
<h3>リポジトリ（repository）</h3>
<p>ファイルやディレクトリを保存している場所のことです。<br />
変更履歴もリポジトリに保存しています。<br />
リポジトリには以下の2種類があります。</p>
<h4>リモートリポジトリ（remote repository）</h4>
<p>主にサーバー上にあるリポジトリで、作業者全員の編集内容を共有するためのリポジトリです。<br />
各PCで行った編集内容を取りまとめしているリポジトリです。<br />
GitHubなどのサービスを利用することで、誰でも簡単にリモートリポジトリを作成できます。</p>
<h4>ローカルリポジトリ（local repository）</h4>
<p>自分のPC上にあるリポジトリです。<br />
作業者はこのリポジトリに対して編集します。</p>
<h3>クローン（clone）</h3>
<p>一言で言うと「ダウンロード」に近い機能です。<br />
リモートリポジトリから、自分のPCにローカルリポジトリを作成します。<br />
ほとんどの場合、Gitで最初に行う作業となります。</p>
<h3>プル（pull）</h3>
<p>リモートリポジトリにある最新の変更内容をローカルリポジトリに反映する機能です。<br />
クローンと少し似ている機能ですが、クローンはリモートリポジトリの内容をすべてダウンロードするのに対し、プルはローカルリポジトリに反映されていない最新の変更内容のみをダウンロードします。</p>
<h3>フェッチ（fetch）</h3>
<p>リモートリポジトリにある最新の変更履歴をローカルリポジトリに反映する機能です。<br />
プルと少し似ている機能ですが、プルは変更内容も反映するのに対し、フェッチは変更履歴のみを反映します。</p>
<h3>プッシュ（push）</h3>
<p>一言で言うと「アップロード」に近い機能です。<br />
ローカルリポジトリの変更内容をリモートリポジトリに反映します。<br />
プッシュを行うことで、自分の変更内容をリモートリポジトリに反映し、別の作業者がプルすることで自分の変更を別の作業者に反映できます。</p>
<h2>コミット（commit）</h2>
<p>ゲームで例えると「セーブ」のような機能です。<br />
コミットを実行することで、ファイルの変更履歴をローカルリポジトリに記録できます。<br />
また、コミットメッセージを記入すれば、このコミットでどのような変更をしたかなどを記録できます。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11601" src="/uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619-300x123.png" alt="" width="600" height="246" srcset="/uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619-300x123.png 300w, /uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619-768x315.png 768w, /uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619-600x246.png 600w, /uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619.png 957w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>コミットを行わないと編集した内容がローカルリポジトリに適用されず残り続けてしまうので、編集が完了したら忘れずにコミットしましょう！</p>
<p>&nbsp;</p>
<p>さらに、コミットする前段階に「ワークツリー」と「インデックス」というものがあります。<br />
コミットするためには、以下のような段階を踏む必要があります。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11602" src="/uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5-300x111.png" alt="" width="600" height="222" srcset="/uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5-300x111.png 300w, /uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5-768x283.png 768w, /uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5-600x221.png 600w, /uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5.png 950w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<h3>ワークツリー</h3>
<p>現在編集中の内容を仮置きしている場所です。<br />
ワークツリー内にある変更内容はコミットされないので、コミットしたい変更内容をインデックスに登録(add)する必要があります。</p>
<h3>インデックス</h3>
<p>コミットする変更内容を仮置きしている場所です。</p>
<p>&nbsp;</p>
<p>なぜこのような機能があるかというと</p>
<ul>
<li>この変更、まだ途中だから今はコミットしたくない</li>
<li>この変更は複数のコミットに分けたい</li>
</ul>
<p>という時に、変更した一部分だけコミットできるようにするためです。<br />
使い慣れるととても便利な機能なので、ワークツリーとインデックスを積極的に活用していきましょう！</p>
<h2>ブランチ（branch）</h2>
<p>感覚的な例えになってしまいますが、「パラレルワールド」のようなことを実現できます。<br />
以下のように、ファイルの変更内容を分岐させて記録できます。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11603" src="/uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-300x120.png" alt="" width="600" height="240" srcset="/uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-300x120.png 300w, /uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-1024x410.png 1024w, /uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-768x308.png 768w, /uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-600x240.png 600w, /uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d.png 1028w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>なぜこのような機能があるかというと、複数人で開発する際にありがちな</p>
<ul>
<li>別の人が変更した内容のせいで自分の修正した箇所が動かなくなった・・・</li>
<li>同じファイルを複数人で編集したせいで、変更内容が消えた・・・</li>
</ul>
<p>という問題を防ぐためにあります。</p>
<p>&nbsp;</p>
<p>ブランチを作成することによって、別のブランチでコミットした内容に影響されず開発を進めることができ、作業の効率化を図ることができます。</p>
<p>また、自分のブランチでコミットした内容は別のブランチでは影響がないため、自分のコミットした内容に不具合があっても別の作業者に迷惑をかける心配もありません。</p>
<p>スターフィールドでは、機能の追加や不具合の修正などの作業単位でブランチを分けることが多いです。</p>
<p>複数人で開発する際は積極的にブランチを利用することをお勧めします！</p>
<h3>マージ（merge）</h3>
<p>2つのブランチでコミットした変更内容を統合させる機能です。<br />
以下のように、機能追加のため切り分けたブランチで作業が完了し、メインのブランチに変更内容を適用する際にこの機能を利用します。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11604" src="/uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-300x85.png" alt="" width="600" height="170" srcset="/uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-300x85.png 300w, /uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-1024x291.png 1024w, /uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-768x218.png 768w, /uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-600x171.png 600w, /uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808.png 1027w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<h3>コンフリクト（conflict）</h3>
<p>同じファイルの同じ箇所を変更したブランチをマージする際に起きる現象です。</p>
<p>コンフリクトを解消しないと、マージできません。</p>
<p>コンフリクトが多発すると作業効率が落ちてしまうので、できるだけコンフリクトを起こさないようにしましょう！</p>
<p>できるだけ他の作業者が変更している、または変更しそうなファイルはいじらないようにすればコンフリクトは抑えられます。</p>
<h2>その他Gitの便利機能</h2>
<p>私がよく使っているGitの機能を紹介します。</p>
<h3>リバート（revert）</h3>
<p>特定のコミットで変更した内容を打ち消すコミットを作成します。</p>
<p>この機能を使うことによって、特定のコミットの変更を無かったことにできます。</p>
<h3>アメンド（amend）</h3>
<p>1つ前のコミット内容とコミットメッセージを修正する機能です。</p>
<p>コミットし忘れたファイルがあったり、コミットメッセージに誤字があった時に修正できます。</p>
<p>プッシュ済みのコミットや2つ以降前のコミットには使えないので注意が必要です。</p>
<h3>スタッシュ（stash）</h3>
<p>コミットしていない変更内容を「一時退避」する機能です。</p>
<p>今の作業を中断して別の作業をする時などに、今の変更内容はとっておきたいけど一旦無かったことにしたい時に便利です。</p>
<h2>まとめ</h2>
<p>この記事では、Gitを活用するために必要な用語と仕組みを紹介しました。</p>
<p>Gitはプログラム開発などを行うエンジニアにとっては必須のスキルになりつつあるので、ぜひ身につけておきましょう！</p>
<h2>参考にさせていただいたサイト</h2>
<p><a href="https://tcd-theme.com/2019/12/what-is-Git.html">https://tcd-theme.com/2019/12/what-is-Git.html</a></p>
<p><a href="https://www.i3design.jp/in-pocket/3111#GitHub%E3%81%A8%E3%81%AF%EF%BC%9F">https://www.i3design.jp/in-pocket/3111#GitHub%E3%81%A8%E3%81%AF%EF%BC%9F</a></p>
<p>&nbsp;</p>


Gitとは何か？

CSS Selectors Level 4 は2023.01月時点でどこまで利用できるのか？

【JavaScript】配列・オブジェクトの参照渡し&amp;コピーをクイズで理解する【React】

<p>Webサイトのレイアウト方法にグリッドレイアウト（display:grid）という方法があります。以前この方法について記事を書きました。</p>
<p>簡単に言うと、画面上に透明のマス目を作り、各コンテンツに座標を指定して配置するという方法です。<br />
グリッドレイアウトより以前に普及していたフレックスボックス（display:flex）と比べると、複雑なレイアウトを作ることができるという利点があります。</p>
<p>以前このやり方を調べて記事にしましたが、その後、この方法が有効に機能する案件がありました。</p>
<h2>この記事で伝えたいこと</h2>
<p>グリッドレイアウトは複雑なレイアウトを作れるというメリットがありますが、実は使う機会は少ないです。何故なら、近年はスマホでホームページを見る人が殆どです。</p>
<p>スマホの画面で見やすいホームページを意識すると、コンテンツはスマホの画面いっぱいに広がり、縦一列に並ぶ物が多くなります。</p>
<p>そのため、大半の制作案件は</p>
<p><strong>・パソコン版ではイメージ画像とテキストを横に並べる。<br />
・スマホ版は縦に一列に変更する。</strong></p>
<p>という単調な物が多く、わざわざグリッドレイアウトを使う必要がないケースが多いです。</p>
<p>しかし、その中でグリッドレイアウトを使用することでレスポンシブWEBデザインで作成するのに最適な機会がありましたので記事にしました。</p>
<h2>実際に担当した案件</h2>
<p>私が担当した案件でホームページのリニューアルするプロジェクトがあり、そのWebサイトのコーディングを担当しました。その際、デザイナーさんよりいただいたデザインは、ヘッダー部分は図1のようにコンテンツが配置されていました。</p>
<p>図1<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_1.png" alt="" width="640" height="" /></p>
<p>ヘッダーのコンテンツがかなりあり、スペースが狭いデザインです。そこで、作成方法として図2のように</p>
<p>図2<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_2.png" alt="" width="640" height="" /></p>
<p><strong>・AとBという枠を作って、ロゴとコンテンツを左右に分ける。<br />
・次にB枠の中でB-a、B-bという上下の枠に分ける。<br />
・上段のB-aの中で更に、No1、No2、No3のコンテンツに分けて配置する。</strong></p>
<p>という予定を立てました。</p>
<p>しかし、スマホ版のデザインを見て、この予定は崩れてしまいました。</p>
<p>スマホ版のデザインはヘッダーの左側にロゴ、右側にはよくある３本線のメニューアイコンが配置され、メニューアイコンを押すと、Bの部分が画面いっぱいに広がり、図3のようにレイアウトする指示がありました。</p>
<p>図3<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_3.png" alt="" width="640" height="" /></p>
<p>コンテンツの並び順はNo1、B-b、No2、No3の並びになります。</p>
<p>WEBページは原則として、HTMLを記述した順番通りに表示されます。フレックスボックスでその順番の制御ができますが、並び替えできるのは各々の枠の中の並び順だけです。<br />
つまり、<br />
<strong><br />
・B-aとB-bの順番を逆にする。<br />
・B-a内でNo1～No3の順番を変える。<br />
・B-b内でメニューの順番を変える。</strong></p>
<p>などの変化しかできません。</p>
<p>もし、フレックスボックスでこのデザインを作成するには、パソコン版とスマホ版のそれぞれのヘッダーコンテンツを作り、パソコンではスマホのコンテンツを、スマホではパソコンのコンテンツを非表示にする。</p>
<p>という方法で作成します。</p>
<p>しかし、後の更新など運用の手間を考えるとパソコンとスマホで共通のコンテンツを使った方がいいです。この解決策としてグリッドレイアウトが役立ちました。</p>
<h2>具体的な方法</h2>
<p>先ず図4のように</p>
<p>図4<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_4.png" alt="" width="640" height="" /></p>
<p><strong><br />
・B枠を4列2行のグリッドレイアウトの枠にする<br />
・B-a、B-bという区切りを辞めて、B-bもB枠直下のコンテンツ変更する。<br />
・1行目は、「空白のマス、No1、No2、No3」の順番にして配置<br />
・2行目は横4マスを連結した大きいマスにして、ここにB-bを配置します。</strong></p>
<p>これでパソコン版のレイアウトが完成しました。</p>
<p>空白のマスを設けたのは、スペースの余裕が無く、画面幅が縮みノートパソコンサイズの画面でメニューとロゴがぶつかってしまうので、図5のようにロゴを配置するためです。</p>
<p>図5<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_ex.png" alt="" width="640" height="" /></p>
<p>スマホ用の切り替え点の他にノートパソコン用の切り替え点を作り、AとBが重なる設定にしました。</p>
<p>そして、更に画面幅を縮めてスマホ画面になった際、Bのグリッドレイアウトを1列4行のグリッドレイアウトに変更し、各コンテンツを再配置することで図3のような形にすることができます。</p>
<p>しかし、B-bのメニューはカーソルを乗せたり、タップすると更にサブメニューが表示される仕組みになっています。つまり、コンテンツの縦幅はユーザーの行動によって変わる構造をしています。</p>
<p>グリッドレイアウトのマスの幅は、中のコンテンツの幅を自動で計算して、全マスに均等で余白を割り当てたり、コンテンツを中央配置させたりします。そのため幅が変わると全体のデザインが崩れてしまいます。</p>
<p>パソコン版は横並びのため、サブメニューが表示された場合、下のコンテンツと重ね高さが変わらない設定にしても問題ありませんが、スマホ版ではこのようなことはできません。</p>
<p>そこで、図6のようにフレックスボックスでレイアウトしました。</p>
<p>図6<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_5.png" alt="" width="640" height="" /></p>
<p>当初の予定と違い、全てのコンテンツがBの直下の枠内にあり、その中での順番を並び替えは自在にできます。また、フレックスボックスの場合、サブメニューが表示されても該当の箇所より下のコンテンツが押し出されるだけで関係ない箇所の幅に影響がありません。</p>
<p>この両方の手法を使うことで、共通のヘッダーコンテンツを使いそしてデザイン通りのヘッダーが作れました。</p>
<h2>まとめ</h2>
<p>グリッドレイアウトとフレックスボックスを併用することで、表現できるレイアウトの幅が広がりました。<br />
グリッドレイアウトは使う機会が少ないかもしれませんが、それぞれ違う性質があり開発者としては両方知っておく必要があると強く感じました。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2023/09/22

2023/09/08

2023/08/25

2023/08/25

2023/07/28

2023/07/21

2023/06/24

2023/06/09

2023/05/27

2023/05/12

2023/03/16

2023/03/03

2023/02/17

2023/02/03

2023/01/20

2022/12/10

2022/11/11

2022/11/11