GCPの請求を見たときに Artifact Registry というサービス名で毎日20円ほど請求が来ていて、月に数百円程度払っていました。いまさらながらにおかしいぞと思い確認すると、Cloud BuildでCloud Run にデプロイしたときに作られるコンテナイメージがArtifact Registry上にかなり溜まっていました。

このArtifact Registry上のイメージたちは自分で設定しないと自動で削除してくれないので、管理画面上からの設定方法を紹介します。

この記事の対象読者
- Artifact Registry というサービス名で毎日請求が来ていて地味に負担になってる人
- Artifact Registry に溜まっているイメージを定期的に削除したい人
- クリーンアップポリシーで定期削除の設定をしたがうまく削除されない人

以前は[gcr-cleaner](https://github.com/GoogleCloudPlatform/gcr-cleaner)を使ってcloudbuild.yamlなどに設定を追加して削除する方法が主流でしたが、現在は Artifact Registry 自体にクリーンアップ ポリシー機能があるようなのでそちらを使います。
Artifact Registry のクリーンアップ ポリシーは2024年3月時点でプレビュー版のようですが、gcr-cleaner のReadmeには以下のように書いてあり、今後はこちらを使う方がよさそうな感じがします。

> Caution
> 
> The functionality provied by this tool is now built directly into Artifact Registry! We are no longer accepting bug reports or feature requests.


> 注意
> 
> このツールによって提供される機能は、現在Artifact Registryに直接組み込まれています！バグレポートや機能リクエストは受け付けておりません。

[gcr-cleaner](https://github.com/GoogleCloudPlatform/gcr-cleaner)


# 注意点

初めに注意点ですが、設定をしてもすぐに削除されないです。ポリシーの適用スケジュールとしてドキュメントに以下のように書いてあり、設定してすぐには実行されないので待ちましょう。

> Artifact Registry では、定期的に実行されるバックグラウンド ジョブを使用して、クリーンアップ ポリシーに一致するアーティファクトを削除、保持します。変更は約 1 日以内に有効になります。
> 
> [公式ドキュメント](https://cloud.google.com/artifact-registry/docs/repositories/cleanup-policy)



# 手順

今回は最新のイメージ2つだけを残し、それより古いものは定期的に削除されるように設定します。間違って必要なイメージを削除するとCloud Runにデプロイしてるサービスに影響するので注意してやってください。僕は安くしたくて2つにしましたが、自身の使い方に合わせて多少余裕を持たせておくといいです。

GCPの管理画面を開いて`Artifact Registry` -> `リポジトリ` -> `リポジトリ名（今回は cloud-run-source-deploy ）` -> `リポジトリの編集` -> `イメージ名` と進みます。そうすると上にリポジトリの編集ボタンがあるので押します。



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/6qJahZTALX6o7STRAm1w/origin.webp)

クリーンアップ ポリシーの項目で`アーティファクトを削除`が選択されてることを確認します（ドライランしたい場合の説明は省きます）。



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/Q8p7yGRot2CXNGQcg4hl/origin.webp)

クリーンアップ ポリシーを追加をクリックして、以下の2つのポリシーを追加します。

1つ目は最新2つのイメージを保持する設定です。



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/V0ShnTsMbjmLQMvaJgdE/origin.webp)

2つ目は（保持する設定をしたのも以外の）すべてのイメージを削除する設定です。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/FAllTk87iobWVa6NRYKI/origin.webp)

保持する設定だけでは削除されないことが追加の注意点です。

しばらくしてイメージ一覧を確認すると、自動的に削除されてるのが確認できます。
参考までに僕の場合は設定してから1時間くらいで削除されたと思います。


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/HLZK6NvJpAJuYInLJtcR/origin.webp)



# 参考

クリーンアップ ポリシーの公式ドキュメントはこちら

https://cloud.google.com/artifact-registry/docs/repositories/cleanup-policy

クリーンアップポリシーの管理をjsonに書いてコマンドで適用する方法はこちら

https://zenn.dev/grainrigi/articles/a44e774a421d66

[gcr-cleaner](https://github.com/GoogleCloudPlatform/gcr-cleaner)を使ってcloudbuild.yamlなどに設定を追加して削除する方法はこちら

https://zenn.dev/catnose99/scraps/0d18ca2fe55241

GCP で Artifact Registry の請求が毎日来ていて高いなら古いコンテナイメージが残っているせいかもしれない

Firebase functionsを含めたサーバーサイドでFirestoreを操作する際、[Firebase Admin SDK](https://github.com/firebase/firebase-admin-node)を使用します。しかし、API Referenceはありますがドキュメントは見当たりませんし、クライアントサイドからデータを操作するときに用いる[Firebase Javascript SDK](https://github.com/firebase/firebase-js-sdk)に比べて情報が少なかったので、一通りの操作方法をまとめます。

追記: 公式ドキュメントのサンプルコードを`Node.js`に切り替えると、Firebase Admin SDKを使ったコードが見れました（気づかなかった）。せっかく書いたので公開しますが、公式ドキュメントにもコードのサンプルがありました。

https://firebase.google.com/docs/firestore

# 前提

Firebase Admin SDKはセキュリティルールを無視しますので注意しましょう。

クライエント側のSDK(Firebase Javascript SDK)と同じような制約があります。それについて基本的に説明しないので[クライエント側のドキュメント](https://firebase.google.com/docs/firestore)を読んでください。

articlesコレクションがあるとします。
fieldはこんな感じです。

```
{
  title: string
  userUid: string
  body: string
  public: boolean
  createdAt: timestamp
  updatedAt: timestamp
}
```

保存されてるデータは以下のようなものとします。

```bash
[
  {
    public: true,
    title: '1',
    body: '1',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412862, _nanoseconds: 740000000 },
    updatedAt: Timestamp { _seconds: 1710412862, _nanoseconds: 740000000 }
  },
  {
    public: false,
    title: '2',
    body: '2',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412871, _nanoseconds: 89000000 },
    updatedAt: Timestamp { _seconds: 1710412871, _nanoseconds: 89000000 }
  },
  {
    public: true,
    title: '3',
    body: '3',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 },
    updatedAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 }
  },
  {
    public: true,
    title: "another user's 1",
    createdAt: Timestamp { _seconds: 1710416766, _nanoseconds: 516000000 },
    body: "another user's 1",
    updatedAt: Timestamp { _seconds: 1710416784, _nanoseconds: 973000000 },
    userUid: 'ADedsD44tdFGrfgerGFErgergRRR'
  }
]
```

# データの読み取り


## 1つのドキュメントの取得

単に`doc`メソッドでuidを指定して取得できます。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const docRef = adminDb
  .collection("articles")
  .doc("R9szMVG0vsfd7iUx08Wq")
const docSnap = await docRef.get()

console.log(docSnap.data())
```

```bash:output
{
  public: true,
  title: '3',
  body: '3',
  userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
  createdAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 },
  updatedAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 }
}
```

## 複数のドキュメントの取得

`where()`フィルタを省略してすべて取得することもできます。
`where()`フィルタについては後でもう少し詳しく説明します。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const queryRef = adminDb
  .collection("articles")
  .where("public", "==", true)
const querySnap = await queryRef.get()

console.log(querySnap.docs.map((doc) => doc.data()))
```

```bash:output
[
  {
    public: true,
    title: '3',
    body: '3',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 },
    updatedAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 }
  },
  {
    public: true,
    title: '1',
    body: '1',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412862, _nanoseconds: 740000000 },
    updatedAt: Timestamp { _seconds: 1710412862, _nanoseconds: 740000000 }
  },
  {
    public: true,
    title: "another user's 1",
    createdAt: Timestamp { _seconds: 1710416766, _nanoseconds: 516000000 },
    body: "another user's 1",
    updatedAt: Timestamp { _seconds: 1710416784, _nanoseconds: 973000000 },
    userUid: 'ADedsD44tdFGrfgerGFErgergRRR'
  }
]
```

## 単純なクエリで複数のドキュメントの取得

`where()` メソッドはクライアント用のSDKと同じ比較演算子が使えます。

- `<`: より小さい
- `<=`:  以下
- `==` 等しい
- `>` より大きい
- `>=` 以上
- `!=` 等しくない
- `array-contains`
- `array-contains-any`
- `in`
- `not-in`

`!=`クエリ句を使う際は多くのドキュメントが一致することが多いので、`limit`を使うように[クライエントのドキュメント](https://firebase.google.com/docs/firestore/query-data/queries)に書いてあります。というか`!=`クエリ句を使わない場合も`limit`使いましょう。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const queryRef = adminDb
  .collection("articles")
  .where("public", "==", true)
  .limit(1)
const querySnap = await queryRef.get()

console.log(querySnap.docs.map((doc) => doc.data()))
```

```bash:output
[
  {
    public: true,
    title: '3',
    body: '3',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 },
    updatedAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 }
  }
]
```

## 複合(AND)クエリで複数のドキュメントの取得

`admin.firestore.Filter`に`and()`メソッドがあります。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const queryRef = adminDb
  .collection("articles")
  .where(
    admin.firestore.Filter.and(
      admin.firestore.Filter.where("public", "==", true),
      admin.firestore.Filter.where(
        "userUid",
        "==",
        "EVyT9uSk92ddwPeBMjElL5Qx6PCK"
      )
    )
  )
  .limit(5)
const querySnap = await queryRef.get()

console.log(querySnap.docs.map((doc) => doc.data()))
```

```bash:output
[
  {
    public: true,
    title: '3',
    body: '3',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 },
    updatedAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 }
  },
  {
    public: true,
    title: '1',
    body: '1',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412862, _nanoseconds: 740000000 },
    updatedAt: Timestamp { _seconds: 1710412862, _nanoseconds: 740000000 }
  }
]
```

## 複合(OR)クエリで複数のドキュメントの取得

`admin.firestore.Filter`に`or()`メソッドがあります。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const queryRef = adminDb
  .collection("articles")
  .where(
    admin.firestore.Filter.or(
      admin.firestore.Filter.where("title", "==", "1"),
      admin.firestore.Filter.where("title", "==", "2")
    )
  )
  .limit(5)
const querySnap = await queryRef.get()

console.log(querySnap.docs.map((doc) => doc.data()))
```

```bash:output
[
  {
    public: true,
    title: '1',
    body: '1',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412862, _nanoseconds: 740000000 },
    updatedAt: Timestamp { _seconds: 1710412862, _nanoseconds: 740000000 }
  },
  {
    public: false,
    title: '2',
    body: '2',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412871, _nanoseconds: 89000000 },
    updatedAt: Timestamp { _seconds: 1710412871, _nanoseconds: 89000000 }
  }
]
```

## データを並べ替えたり制限する

`orderBy()`や`limit()`もクライエントと同じように使えます。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const queryRef = adminDb
  .collection("articles")
  .orderBy("createdAt", "desc")
  .limit(2)
const querySnap = await queryRef.get()

console.log(querySnap.docs.map((doc) => doc.data()))
```

```bash:output
[
  {
    public: true,
    title: "another user's 1",
    createdAt: Timestamp { _seconds: 1710416766, _nanoseconds: 516000000 },
    body: "another user's 1",
    updatedAt: Timestamp { _seconds: 1710416784, _nanoseconds: 973000000 },
    userUid: 'ADedsD44tdFGrfgerGFErgergRRR'
  },
  {
    public: true,
    title: '3',
    body: '3',
    userUid: 'EVyT9uSk92ddwPeBMjElL5Qx6PCK',
    createdAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 },
    updatedAt: Timestamp { _seconds: 1710412878, _nanoseconds: 245000000 }
  }
]
```

# 集計クエリでデータを要約する

[公式ドキュメント](https://firebase.google.com/docs/firestore/query-data/aggregation-queries?hl=ja#node.js)

`count()`, `sum()`, `average()`も使えます。
ここでは`count()`の紹介だけにしておきます。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const queryRef = adminDb
  .collection("articles")
  .where("public", "==", true)
const snap = await queryRef.count().get()

console.log(snap.data().count)
```

```bash:output
3
```


# データの追加、更新、削除

## ドキュメントを設定する

`set()`を使うと追加または上書きできます。
タイムスタンプに現時刻を設定するには`admin.firestore.FieldValue.serverTimestamp()`を使用します。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const data = {
  public: true,
  title: "Add",
  body: "Add",
  userUid: "ADDUSERUID",
  createdAt: admin.firestore.FieldValue.serverTimestamp(),
  updatedAt: admin.firestore.FieldValue.serverTimestamp(),
}
adminDb.collection("articles").doc("ADDUID").set(data)
```

## ドキュメントを追加する

`uid`を指定したい場合は`set()`を使いますが、自動的に生成したい場合は`add()`を使います。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

const data = {
  public: true,
  title: "Add",
  body: "Add",
  userUid: "ADDUSERUID",
  createdAt: admin.firestore.FieldValue.serverTimestamp(),
  updatedAt: admin.firestore.FieldValue.serverTimestamp(),
}
adminDb.collection("articles").add(data)
```

## ドキュメントを更新する

一部のフィールドを更新するには`update()`メソッドを使います。`set()`メソッドを使って`merge`オプションを使うこともできますが、`update()`メソッドを使う方がいいと思います。理由はFirebase Admin SDKはセキュリティルールを無視するので、マージオプションを付け忘れると一部のフィールドを消してしまうかもしれないからです（クライエント側のSDKだとセキュリティルールのおかげでエラーになることも多い）。

```ts
import * as admin from "firebase-admin"

const adminDb = admin.firestore()

adminDb
  .collection("articles")
  .doc("ADDUID")
  .update({ title: "Update" })
```

Firebase Admin SDK v11 を用いた Firestore のデータ操作方法

# はじめに

この記事ではエンジニアとしてMUIを使ってきた中で溜まってきた知見を共有することにあります。MUIのドキュメントに書いてあることは省略することが多いですので、そちらも目を通してください。

コンポーネントの便利な使い方や実装例を紹介していきます。

https://mui.com/material-ui/getting-started/

# layoutのコンポーネント紹介

Layoutに関するコンポーネントを軽く紹介します。

## Box

https://mui.com/material-ui/react-box/

Boxコンポーネントはデフォルトで`<div>`としてレンダリングされます。ではなぜ`<div>`ではなく`<Box>`を使うのかというと、他のMUIコンポーネントと同じようなpropsを使えるからです。

公式ドキュメントにあるサンプルコードを見てみるとよくわかると思います。

```
import * as React from 'react';
import Box from '@mui/material/Box';

export default function BoxSystemProps() {
  return (
    <Box
      height={200}
      width={200}
      my={4}
      display="flex"
      alignItems="center"
      gap={4}
      p={2}
      sx={{ border: '2px solid grey' }}
    >
      This Box uses MUI System props for quick customization.
    </Box>
  );
}
```

component引数を使って`<div>`以外がレンダリングされるように指定できます。

## Container

https://mui.com/material-ui/react-container/

Containerコンポーネントは子要素の横幅を制限して中央に配置します。基本的にページの外側に配置して、メインコンテンツやサイドバーを囲みます。1ページに複数回使うことはほぼないと思います。

## GridとStack

https://mui.com/material-ui/react-grid/

https://mui.com/material-ui/react-stack/

Gridコンポーネントは横幅を12で分割し、各要素を指定の割合で表示できます。

Stackコンポーネントは単に横や縦に要素を並べるときに使います。

使い分けとして、例えばメインコンテンツとサイドバーの配置などはGridをよく使います。画面幅が小さくなったときにメインコンテンツも再度バーも同じ割合で小さくなります。
固定サイズのボタンやアイコンを横に並べたりするときはStackが便利です。

# 2カラムの例

## 要件

よくある2カラムのレイアウトを作ってみます。
header, main content, side bar, footerの要素があり、side barの下側の要素はスクロールに追従するとします。

## 動作例

[サンプルページ](https://yosipy.github.io/mui5_example/layout/two_column)


スクロール前（PC）
![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/deeQUMbvqAhpKUMYipUm/origin.webp)


スクロール後（PC）
![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/UOGpG9b7HcppZChPMk5j/origin.webp)

また、画面横幅が小さいときはサイドバーをメインコンテンツの下に配置します。

スクロール前（Mobile）



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/Mz7Qw2Lyhik9ZyMNoHBb/origin.webp)



スクロール後（Mobile）


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/SXx63WPoSurrtcISZjqZ/origin.webp)

## ソースコード

https://github.com/yosipy/mui5_example/blob/main/src/pages/layout/TwoColumnPage/TwoColumnPage.tsx

```tsx:src/pages/layout/TwoColumnPage/TwoColumnPage.tsx
import { Box, Button, Container, Grid, Stack } from "@mui/material"
import { FC } from "react"

export const TwoColumnPage: FC = () => {
  return (
    <Container maxWidth="md">
      <Grid
        container
        alignItems="flex-start"
        spacing={4}
        sx={{ display: "flex", alignItems: "stretch" }}
      >
        {/* header */}
        <Grid item xs={12}>
          <Box
            width="100%"
            height="100px"
            sx={{ backgroundColor: "darkblue", fontSize: "2.5rem" }}
          >
            header
          </Box>
        </Grid>

        {/* main content */}
        <Grid item xs={12} md={8}>
          <Box width="100%" height="800px" sx={{ backgroundColor: "darkblue" }}>
            <Box sx={{ fontSize: "2.5rem" }}>main content</Box>
            <Stack direction={"row"} spacing={1} useFlexGap flexWrap="wrap">
              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
                <Button variant="contained">Button{i}</Button>
              ))}
            </Stack>
          </Box>
        </Grid>

        {/* side bar */}
        <Grid item xs={12} md={4}>
          <Box
            width="100%"
            height="200px"
            sx={{ backgroundColor: "darkblue", fontSize: "2.5rem" }}
          >
            {"side bar(upper)"}
          </Box>
          <Box
            sx={{
              position: "sticky",
              top: 40,
              mt: 4,
              backgroundColor: "darkblue",
              fontSize: "2.5rem",
            }}
          >
            {"side bar(bottom)"}
          </Box>
        </Grid>

        {/* footer */}
        <Grid item xs={12}>
          <Box
            width="100%"
            height="100px"
            sx={{ backgroundColor: "darkblue", fontSize: "2.5rem" }}
          >
            footer
          </Box>
        </Grid>
      </Grid>
    </Container>
  )
}

```


MUI v5 でページの骨格デザインを作成する (Layoutコンポーネント)

# はじめに

[create-react-appが最後にリリースされたのも2022年](https://github.com/facebook/create-react-app/releases)で、公式ドキュメントからも削除されました。基本的にNext.js等のフレームワークを推奨しているようですが、もっと手軽に動かしたいときも結構あります。そこでVite + Reactの環境を作ります。

基本的に[公式ガイド](https://ja.vitejs.dev/guide/)に沿って進めていくので、公式ガイドの方も見ることをお勧めします。

作成したリポジトリです。

https://github.com/yosipy/mui5_example

nodeのバージョンは 20.11.0 を使いました。
nodeのインストールにanyenvを使いましたが、この辺りはnodeが動く開発環境があれば何でもいいです。

```bash
$ nodenv local 20.11.0
$ nodenv -v
nodenv 1.4.1+79.15375bb
$ node -v
v20.11.0
$ npm -v
10.2.4
```

また、今回使用しているpackagesのバージョン一覧です。

```json:package.json
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3"
  },
  "devDependencies": {
    "@testing-library/react": "^14.2.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/node": "^20.11.26",
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "jsdom": "^24.0.0",
    "typescript": "^5.2.2",
    "vite": "^5.1.6",
    "vitest": "^1.3.1"
  }
```

# ViteとReactの環境構築

テンプレートを用いてプロジェクトを作成します。今回は`react-ts`を使いましたが、他にもいろいろ準備されています。
npm 7以上のときは以下のように4つのハイフンが必要なみたいです。

```bash
$ npm create vite@latest vite-project -- --template react-ts
```

npm installして、`npm run dev`で開発用のサーバーを起動します。

```bash
$ cd vite-project
$ npm i
$ npm run dev

> vite-project@0.0.0 dev
> vite


  VITE v5.1.6  ready in 96 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
```

`http://localhost:5173/`にアクセスするとページが確認できます。(`http://localhost:3000/`かもしれないです )

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/IuX7XJ1JGlBA1MWdqrkE/origin.webp)

# prettier コードフォーマッターの設定

保存時に自動フォーマットしたいのでPrettierを導入します。

https://prettier.io

コマンドでフォーマットしたい人はドキュメントに従って導入してください。

僕はVSCodeで保存時に自動フォーマットするので、拡張を入れます。


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/4dOALoRJ4GeY7kCOe8Ux/origin.webp)

拡張を入れたらファイル保存時にフォーマットされるようにVSCodeの設定を変更します。

`設定アイコン` -> `Settings`を選択します。



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/5UYY980QCuj2E68ZlG6N/origin.webp)

`defaultformatter`で検索し、Default FormatterをPrettierにします。



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/pefCOxyH3g5eWTMKVJDE/origin.webp)



`format on save`で検索し、`Format On Save`にチェックを入れます。


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/gRWOq9tYu4Km9sJBqYeZ/origin.webp)

最後に`.prettierrc.json`を追加します。お好みで設定してください。

```json:.prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false
}

```


# import 時のパスエイリアス

以下のように設定を追加することで

```di:tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
```

```ts:vite.config.ts
export default defineConfig({
  resolve: {
    alias: [{ find: "@/", replacement: `${__dirname}/src/` }],
  },
```

以下のようなExampleコンポーネントを追加したときに、`App.tsx`中で`import { Example } from "@/components/Example"`と書けるようになります。
```
src
├── App.tsx
├── components
│   └── Example.tsx
```

`Cannot find name '__dirname'.ts(2304)`というワーニングが出るので`@types/node`をインストールします。

```bash
npm i -D @types/node
```

ちなみにテストで動作させるために別設定が必要なので、テストの項目で後述します。この辺の設定が面倒であれば[vite-tsconfig-paths](https://github.com/aleclarson/vite-tsconfig-paths)を使うのもよさそうです。

# テスト

## Vitest と React Testing Library の導入

今回は[Vitest](https://vitest.dev/guide/)を使用します。Jestでもいいですが、Vitestは簡潔な設定で動作し非常に気に入ってます。
Reactのテストを書くために
[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)も導入します。[jsdom](https://github.com/jsdom/jsdom)はコンポーネントのテスト時に必要なので入れています。

```bash
npm install -D vitest @testing-library/react @testing-library/user-event jsdom
```

次に`package.json`に設定を追加して`npm run test`のコマンドでテストを実行できるようにします。

```diff:package.json
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "test": "vitest",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
```

## fireEvent と userEvent

コンポーネント内のボタンをクリックするなどのイベントのテストを行う際に使用できるメソッドに`fireEvent`と`userEvent`があります。基本的に`userEvent`を使用しておけばいいです。

`fireEvent`はDOMイベントを発行(dispatch)する低レベルなイベントトリガー関数で、`userEvent`はより高レベルなシミュレーションを提供し実際のユーザーの操作をより正確に再現します。

## 実際にテストを書く

まずはテストに必要な設定を追記します。
`vitest.config.ts`に書いている内容は`vite.config.ts`に書くこともできますが、テスト用の設定は別ファイルに分けた方がきれいに見えると思い僕は分けています。

```ts:vitest.config.ts
import * as path from "path"
import { defineConfig } from "vitest/config"

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
```

```diff:tsconfig.json
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+
+    /* For Vitest*/
+    "types": ["vitest/globals"]
   },
   "include": ["src"],
```

` globals: true`と`"types": ["vitest/globals"]`を追記したことで、各テストファイル内で明示的にImportしなくても`describe`や`test`関数が使えるようになります（Jestのように）。

テスト中でもパスエイリアスを動作させるために`alias: { "@": path.resolve(__dirname, "./src") }`で設定しています。

まずは単純な関数のテストを書いてみます。`src/helpers/example.ts`と`src/helpers/example.test.ts`を追加します。

```ts:src/helpers/example.ts
export const example = () => {
  return "example"
}

```

```ts:src/helpers/example.test.ts
import { example } from "./example"

describe("example", () => {
  test("文字列を返す", () => {
    expect(example()).toEqual("example")
  })
})

```

次にコンポーネントのテストを書いてみます。`src/App.test.tsx`を追加します。
今回は試しにコンポーネントレンダリング時に任意の文字列が表示されているかのテストと、ボタンを押したときにcountの文字が増えるかどうかのテストをしています。

```tsx:src/App.test.tsx
import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import App from "./App"

describe("App", () => {
  test("renders App component", () => {
    render(<App />)

    screen.getByText("Click on the Vite and React logos to learn more")
  })

  test("change count", async () => {
    const user = userEvent.setup()

    render(<App />)

    await user.click(screen.getByRole("button", { name: /count is 0/i }))
    screen.getByText("count is 1")
  })
})

```

テスト実行します（ちなみにテストファイルを保存したりすると自動でテストが再実行されてすごく便利です）。

```bash
$ npm run test

> vite-project@0.0.0 test
> vitest


 DEV  v1.3.1 /home/user_name/projects/github.com/yosipy/mui5_example

 ✓ src/helpers/example.test.ts (1)
 ✓ src/App.test.tsx (2)

 Test Files  2 passed (2)
      Tests  3 passed (3)
   Start at  19:23:03
   Duration  751ms (transform 166ms, setup 0ms, collect 214ms, tests 45ms, environment 313ms, prepare 251ms)


 PASS  Waiting for file changes...
       press h to show help, press q to quit
```

# React Router でのページルーティング

トップページしかないので、他のページを表示できるようにします。

## React Router のインストール

[React Router](https://github.com/remix-run/react-router)をインストールします。

```bash
npm i react-router-dom
```

## 導入

以下のように書くだけです。`createBrowserRouter`の中にルーティングを追加していくことができます。

```tsx:src/main.tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { createBrowserRouter, RouterProvider } from "react-router-dom"
import "./index.css"

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
])

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

```

## 例

最初に使っていたAppコンポーネントを表示してみます。

```tsx:src/main.tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { createBrowserRouter, RouterProvider } from "react-router-dom"
import "./index.css"
import App from "./App"

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
  {
    path: "/app",
    element: <App />,
  },
])

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)
```

`http://localhost:5173/app` で表示できます。

# CI

Github Actionsを使ってPush時に自動的にテストが実行されるようにします。

```yml:.github/workflows/ci.yml
name: CI

on:
  push:

jobs:
  frontend-test:
    name: Frontend test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: npm ci
        run: npm ci
      - name: Lint
        run: npm run lint
      - name: Run test
        run: npm run test

```

いい感じです。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/2juQfawRSJ4gIbBqOMNV/origin.webp)

ここではやっていませんが npm installした結果を`actions/cache`を用いてキャッシュしておくといいです。
また、テストが落ちたときはmainブランチにマージできないようにルールを設定しておくといいです（ちなみにパブリックリポジトリは無料でブランチ保護ルールを設定できますが、プライベートリポジトリは無料ではできません）。

Vite で React の SPA サイトを作成する

Firebase Local Emulator を使用していると、エミュレータを使用していることを知らせる`Running in emulator mode. Do not use with production credentials.`という一文が表示されます。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/y9EzNgbnDRjv5YXlo6I6/origin.webp)

開発していると非常に邪魔になります。特にページ下部にボタンなどの要素があるサイトでは、動作確認が困難になります。

しかし、エミュレーターを使用していることが一目でわかりますし、これ自体は非常に有用で消したくはありません。そんなわけで、僕がやっている対策を紹介します。

開発者ツールで確認すると以下のようなHTMLタグになっていますので、`firebase-emulator-warning`クラスに対してレイアウトを修正すればよいです。

```html
<p
  class="firebase-emulator-warning"
  style="position: fixed; width: 100%; background-color: rgb(255, 255, 255); border: 0.1em solid rgb(0, 0, 0); color: rgb(181, 0, 0); bottom: 0px; left: 0px; margin: 0px; z-index: 10000; text-align: center;"
>
  Running in emulator mode. Do not use with production credentials.
</p>
```

# 半透明にして小さくする

## ソースコード

最初にコード全体です。
Next.jsであれば`src/styles/globals.css`に追記してください。

```css
.firebase-emulator-warning {
  opacity: 0.4;
  pointer-events: none;
  font-size: 0.5rem;
}
```

## 結果

このような表示になります。
白い部分にかぶっているボタンも問題なくクリックできます。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/qasuQgQ3d2OkuP68ztYl/origin.webp)


## 解説

`opacity`は不透明度を指定しています。
0が透明で1が不透明です。今回は0.4にしています。

https://developer.mozilla.org/ja/docs/Web/CSS/opacity

`pointer-events: none`で対象の要素自体を、ポインターイベントの対象外にしています。これによって、対象の要素の下にあるボタンなどをクリックできるようになります。便利。

https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

`font-size: 0.5rem`については特に解説することはないですが、文字のサイズを半分にしています。

Firebase Local Emulator の"Running in emulator mode."を小さくして透過する

nohに目次機能を追加したので、その時の実装を紹介します。

# 作りたい目次の要件

- react-markdownを使用
- 記事本文中に目次を挿入しない。記事本文とは別に目次を表示する。
- h1とh2のように入れ子になってる要素は、目次においても入れ子にする

以下の画像のような目次機能を最終的に作成します。

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/nXnwbmvl7qOFHguPWaT1/origin.webp)



# 調査

調べると目次を表示する実装を紹介するページはいくつも見つかります。


## react-markdownのcomponents引数で生成する方法

以下のリンクなどで紹介されてますが、検索して見つかるのはこれと同様の実装がほとんどでした。

https://www.newt.so/docs/tutorials/generate-anchor-links-using-react-markdown

react-markdownはcomponentsという引数でカスタマイズができるのですが、この機能を使ってheading要素(h1やh2などのこと)だけ表示するようにしています。

この方法の問題点は入れ子的なリストを表示するのが難しいことです。参考にしたサイトもh2だけを目次に表示しています。
したがって、この方法での実装は避けることにします。

## react-markdown公式リポジトリのissueにあった実装

[古いissue](https://github.com/remarkjs/react-markdown/issues/48)ですが[実装している人](https://gist.github.com/sobelk/16fe68ff5520b2d5e2b6d406e329e0de)がいます。
先ほどと同じように、react-markdownのcomponents引数でカスタマイズしています。入れ子に対応してそうに見えますが、かなりハックな実装になっているように感じます。
この方法も使わないことにします。

## remark-tocを使った実装

https://github.com/remarkjs/remark-toc/issues/37

マークダウンの文字列内に目次を追加してくれるプラグインのようです。
今回は記事の本文とは別の場所に目次を表示したいので、使いませんでした。

## markdown-tocを使った実装

[markdown-toc](https://github.com/jonschlinkert/markdown-toc)というpackageについても先ほどのissueにコメントされていました。

`マークダウンの文字列`から`目次だけを含むマークダウンの文字列`に変換してくれるようです。このpackageはかなりよさそうです。
メンテナンスも続いてますし、目次だけを含むマークダウン文字列を作成するアプローチは実装を簡単にしてくれます。

複雑な処理ではないので、今回はあえてmarkdown-tocを使わずに自作しようと思います（package見つける前に作っちゃった）。

# 実装

## 目次を表示

記事本文のマークダウン文字列をパースして、目次のマークダウン文字列にします。
`unified`や`remark-parse`は`react-markdown`に含まれてるので、インストールする必要はありません。

```ts
const parseTocMd = (body: string) => {
  const root = unified().use(remarkParse).parse(body)
  let tocMd = ""
  if (root.children) {
    root.children.map((node) => {
      if (
        node.type === "heading" &&
        node?.children[0] &&
        "value" in node?.children[0]
      ) {
        if (node.depth === 1) {
          tocMd += `- [${node?.children[0].value}](#${encodeURIComponent(
            node.children[0].value
          )})\n`
        } else if (node.depth === 2) {
          tocMd += `  - [${node?.children[0].value}](#${encodeURIComponent(
            node.children[0].value
          )})\n`
        }
      }
    })
  }

  return tocMd
}
```

すごく省略してますが、`root`にはマークダウンをパースした結果が入っています。

```json:console.log(root)
{
  "type": "root",
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "children": [
        {
          "type": "text",
          "value": "前提"
        }
      ]
    },
    {
      "type": "heading",
      "depth": 2,
      "children": [
        {
          "type": "text",
          "value": "Canvasサイズを指定する"
        }
      ]
    }

```

返り値はこんな感じになります。

```md:console.log(parseTocMd(props.body))
- [前提](#%E5%89%8D%E6%8F%90)
- [react-three-fiber を用いて表示する](#react-three-fiber%20%E3%82%92%E7%94%A8%E3%81%84%E3%81%A6%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)
  - [Canvasサイズを指定する](#Canvas%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)
  - [Vrmを表示する](#Vrm%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)
  - [補足：three-vrmを用いずにuseGLTFを用いる](#%E8%A3%9C%E8%B6%B3%EF%BC%9Athree-vrm%E3%82%92%E7%94%A8%E3%81%84%E3%81%9A%E3%81%ABuseGLTF%E3%82%92%E7%94%A8%E3%81%84%E3%82%8B)
- [react-three-fiber を使わずに Three.js ＋ React で表示する](#react-three-fiber%20%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%9A%E3%81%AB%20Three.js%20%EF%BC%8B%20React%20%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)
- [まとめ](#%E3%81%BE%E3%81%A8%E3%82%81)
- [追記 2022/10/03](#%E8%BF%BD%E8%A8%98%202022%2F10%2F03)
```

目次を表示するコンポーネント全体のコードを以下に示します。
`TocMarkdown`コンポーネントは記事本文のマークダウン文字列を引数に受け取り、目次を表示します。`ul`や`a`でレイアウトなどの調整を行っています。

```tsx:TocMarkdown.tsx
import { FC } from "react"
import ReactMarkdown from "react-markdown"
import { unified } from "unified"
import remarkParse from "remark-parse"
import { Link as MuiLink, Typography } from "@mui/material"

type Props = {
  body: string
}

const parseTocMd = (body: string) => {
  const root = unified().use(remarkParse).parse(body)
  let tocMd = ""
  if (root.children) {
    root.children.map((node) => {
      if (
        node.type === "heading" &&
        node?.children[0] &&
        "value" in node?.children[0]
      ) {
        if (node.depth === 1) {
          tocMd += `- [${node?.children[0].value}](#${encodeURIComponent(
            node.children[0].value
          )})\n`
        } else if (node.depth === 2) {
          tocMd += `  - [${node?.children[0].value}](#${encodeURIComponent(
            node.children[0].value
          )})\n`
        }
      }
    })
  }

  return tocMd
}

export const TocMarkdown: FC<Props> = (props) => {
  return (
    <div>
      <Typography sx={{ fontWeight: "bold" }}>目次</Typography>
      <ReactMarkdown
        components={{
          ul: ({ children }) => (
            <ul style={{ paddingLeft: "1.5rem" }}>{children}</ul>
          ),
          a: ({ href, children }) => {
            return <MuiLink href={href}>{children}</MuiLink>
          },
        }}
      >
        {parseTocMd(props.body)}
      </ReactMarkdown>
    </div>
  )
}

```


## 目次のリンクでスクロールするために見出しにidをつける

記事本文を表示するコンポーネントを編集します。目次を表示するコンポーネントではないので注意してください。

```tsx:ArticleBodyMarkdown.tsx
import { FC } from "react"

import ReactMarkdown from "react-markdown"
import remarkBreaks from "remark-breaks"
import remarkGfm from "remark-gfm"

import { HeadingProps } from "react-markdown/lib/ast-to-react"

type Props = {
  body: string
}

const getTitle = (props: HeadingProps) => {
  return props.node?.children[0] && "value" in props.node?.children[0]
    ? props.node?.children[0].value
    : ""
}

export const ArticleBodyMarkdown: FC<Props> = ({ body }) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkBreaks, remarkGfm]}
      components={{
        h1: (props) => {
          const title = getTitle(props)
          return <h1 id={title}>{title}</h1>
        },
        h2: (props) => {
          const title = getTitle(props)
          return <h2 id={title}>{title}</h2>
        },
      }}
    >
      {body}
    </ReactMarkdown>
  )
}

```

これで完成です。


# 余談

記事書きながらデプロイ作業始めたら、デプロイ終わるより先に記事を投稿しちゃった。



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/uZqglYiNF4NedwSJbl6O/origin.webp)



react-markdownで入れ子に対応した目次を簡単に表示する

AI-900を受験し、合格することが出来ました。
Microsoftの資格はAZ-900に続き、2つ目の資格です。
AZ-900の体験記はこちらにまとめています。
[AZ-900合格体験記](https://qiita.com/fsd-shuhashi/items/67cb1971cc1513f35ca9)
今回も、私の勉強方法をまとめておきたいと思います。
これからAI-900の勉強をされる方は活用してください。

# 1.試験概要
AI-900の試験概要は以下の通りになります。
(記事投稿時点のものになります。詳細は申込時に確認してください。)
【試験】AI-900:Microsoft Azure AIの基礎(Microsoft Azure AI Fundamentals)
【受験料】 税込13,750円
【試験時間】65分
【問題数】 35問前後
【合格点】 700点(1000点満点)
【受験場所】試験センターもしくは自宅

AZ-900とほとんど変わりませんが、AI周りの内容が出題されるのはもちろんのこと、試験時間もAZ-900より20分長いです。

# 2.勉強方法
私が資格に取得した教材は以下の通りになります。

1. [[覚書・カンペ]AI-900合格に必要な知識まとめ　※例題あり](https://pickerlab.net/2021/06/12/test-preparation-for-ai-900/)
1. [試験 AI-900: Microsoft Azure AIの基礎](https://learn.microsoft.com/ja-jp/credentials/certifications/exams/ai-900/)
1. [試験対策！Microsoft AI-900　模擬試験問題　※日本語対応](https://www.udemy.com/course/microsoft-ai-900-l/)
1. [AI-900 : Microsoft Azure AI Fundamentals 試験対策](https://info.microsoft.com/JA-AzureApp-WBNR-FY21-04Apr-07-MKTOFY21AI900PrepSessionOndemandWebinar-SRDEM70306_LP02OnDemandRegistration-ForminBody.html)
※登録が必要ですが、無料で見れます。
1. [Microsoft Azure Virtual Training Day: AIの基礎](https://www.microsoft.com/ja-jp/events/top/training-days)
※登録が必要ですが、無料で見れます。
それでは１つずつ見ていきます。

## [覚書・カンペ]AI-900合格に必要な知識まとめ　※例題あり
[[覚書・カンペ]AI-900合格に必要な知識まとめ　※例題あり](https://pickerlab.net/2021/06/12/test-preparation-for-ai-900/)
こちらはpicker.さんという方がAI-900についてざっくりまとめているサイトです。
AZ-900の時は最初にMS Learnから見て学習したのですが、あまり内容が理解できなかったので、今回はまず大枠だけでも理解することにしました。
ただ、こちらのサイトだけだと個人的には不十分だと思います。

AI-900は一般的な機械学習の内容も出題されるのですが、そういった内容はカットされています。
主にAzure独自で使う知識のまとめがメインのようです。

サイト内のリンクを辿れば一般的な機械学習のこともありますが、ここまで理解する必要はないです。
回帰、分類、クラスタリングの違いや特徴量やラベルの意味が分かれば、ある程度太刀打ちできるかなと思います。

## 試験 AI-900: Microsoft Azure AIの基礎
[試験 AI-900: Microsoft Azure AIの基礎](https://learn.microsoft.com/ja-jp/credentials/certifications/exams/ai-900/)
こちらはMicrosoftが提供している教材になります。演習などもあるので、時間がある方は実際に使用すると理解がより深まると思います。

1. [Microsoft Azure AI Fundamentals: 人工知能の概要](https://learn.microsoft.com/ja-jp/training/paths/get-started-with-artificial-intelligence-on-azure/)-1時間12分
1. [Microsoft Azure AI Fundamentals: 機械学習用のビジュアル ツールについて調べる](https://learn.microsoft.com/ja-jp/training/paths/get-started-with-artificial-intelligence-on-azure/)-5時間18分
1. [Microsoft Azure AI Fundamentals: Computer Vision について調べる](https://learn.microsoft.com/ja-jp/training/paths/explore-computer-vision-microsoft-azure/)-2時間59分
1. [Microsoft Azure AI Fundamentals: 自然言語処理について調べる](https://learn.microsoft.com/ja-jp/training/paths/explore-natural-language-processing/)-2時間42分
1. [Microsoft Azure AI Fundamentals: 意思決定支援について調べる](https://learn.microsoft.com/ja-jp/azure/ai-services/anomaly-detector/overview)-38分

なかなかボリューミーですが、演習の時間がそれなりに含まれているため、それをやらなければもう少し時間短縮できます。
個人的な感想なのですが、MS Learnが一番分かりにくいです（笑）
そのため、事前にざっくり理解しておくことは必要かなと思いました。

## [試験対策！Microsoft AI-900　模擬試験問題　※日本語対応
[試験対策！Microsoft AI-900　模擬試験問題　※日本語対応](https://www.udemy.com/course/microsoft-ai-900-l/)
こちらはUdemyの教材で2000円前後になります。セールの時に買えば少し安くなります。
この教材はアウトプット用の教材です。これで正答率が９割を超えるまで解いていきます。
解説がほとんどないので、これをお勧めできるかと言えば微妙なところですが、AI-900の日本語教材自体がかなり少なく、Udemyでは２つほどしかありませんでした。
英語でも大丈夫という方は英語版の教材を買う方が良いかもしれません。

## AI-900 : Microsoft Azure AI Fundamentals 試験対策
[AI-900 : Microsoft Azure AI Fundamentals 試験対策](https://info.microsoft.com/JA-AzureApp-WBNR-FY21-04Apr-07-MKTOFY21AI900PrepSessionOndemandWebinar-SRDEM70306_LP02OnDemandRegistration-ForminBody.html)
こちらはインプットにもアウトプットにも使える公式の教材です。
分野ごとに解説と例題があり、すべての解説が終わると章末問題として25問の出題と解説があります。
１時間30分くらいの動画ですので、大学の講義くらいの感覚で受けれます。

## Microsoft Azure Virtual Training Day: AIの基礎
[Microsoft Azure Virtual Training Day: AIの基礎](https://www.microsoft.com/ja-jp/events/top/training-days)
こちらも公式の教材です。
３時間程度の動画になりますが、AI-900の内容をざっくり学ぶことが出来ます。
しかし、バーチャルトレーニングは平日にしか受けることが出来ないため、社会人の方は受けるのが難しいかなと思います。
他の教材でも十分カバーできるため、無理して受ける必要はないと思います。
AZ-900の時はちょうどいいタイミングでバーチャルトレーニングがなかったので、私は受けませんでした。

# 3.勉強の流れ
私は次のように勉強すれば良いかと思います。

1. [覚書・カンペ]AI-900合格に必要な知識まとめ　※例題あり
1. AI-900 : Microsoft Azure AI Fundamentals 試験対策
1. 試験 AI-900: Microsoft Azure AIの基礎
1. 試験対策！Microsoft AI-900　模擬試験問題　※日本語対応
（おまけ：Microsoft Azure Virtual Training Day: AIの基礎）

バーチャルトレーニングは勉強している期間に運よく開催されていれば、受講する程度でいいと思います。
逆に開催されるタイミングから勉強するということもありだと思います。

AI-900は日本語教材が少ないため、ほとんどの方が似たような勉強方法になるのが、ネックです。

# 4.まとめ
私はこの勉強方法で916点の１発合格でした。
AI-900もAZ-900と同様、基礎的な問題が出題されますが、範囲がAZ-900より狭いため、学習しやすいのかなと思いました。
特にコンピュータービジョンや自然言語処理関係の辺りは身近に溢れているモノばかりなので、ここら辺の分野で確実に点を稼いでいくといいと思います。

何度も述べていますが、AI-900は日本語教材がかなり少ないので、対策方法が限られてきます。
私が調べてみたところ書籍は見つかりませんでした。(あれば、申し訳ないです。)
限られた教材で確実に知識をつけることが大切だと感じました。

次はDP-900の受験予定なので、合格したら記事にまとめたいと思います。
DP-900も日本語教材が少ないかもしれませんが、頑張ります。


AI-900合格体験記

無職になりました、yosiです。

NohはもともとAIが答えてくれるQ&Aサイトとして2023年の11月初旬にリリースしましたがぶっちゃけ使われておらず、僕はサービス自体をどういう方針で続けていくかスプラをしながら深く考えていました。
そして新しく技術ブログを書く機能を追加することに決め、流行遅れの感染症にかかったり、会社を退職したり、千葉に海を見に行ってマックスコーヒー飲んだりしながら約3か月ほどでリリースに至りました。


# Noh Blogの特徴

## ダークモードなデザイン

ダークモードで統一したデザインです。デザイナーさんがチームにいてもダークモードとライトモードの2パターン作るのは結構大変なので、割り切ってダークテーマだけにしています。エンジニアは黒い画面が大好きです。


## 記事投稿のエディターはNot WYSIWYG

記事を書く時のエディターはWYSIWYGエディター（ウィジウィグエディター）にしませんでした。経験上、WYSIWYGはすぐ壊れます。NotionやScrapboxみたいな高い完成度を保つのは非常に難しくて、特に日本語IMEとの相性が最悪といっていいでしょう。

そこでこのサービスではTextareaに入力する旧来の方式にしつつ、プレビュー機能などを充実させて執筆体験を高めていこうと思います。


## すべての画像はWebp

これも思い切った仕様にしたのですが、画像をアップロード時にすべてWebpに変換しています。世界中で動くブラウザのほとんどが対応しているので、JpegやPngを保険として残すことはしませんでした。

もちろん、Webp以外もアップロードでき、5mbまでのWebp, Jpeg, Png, Gifに対応しています。


## エディターとプレビューのスクロール同期

かなり頑張って作った機能です。エディターをスクロールすると対応するようにプレビューを自動スクロールします。逆も動作します。


# 今後実装予定の機能

リリースしたばかりなので、これからどんどん機能を追加していきます。実装予定の機能の一部を紹介します。


- 翻訳サポートの機能
- Undo/Redo機能
  - 現状画像を挿入したときなどに入力していたUndo/Redoできなくなってしまうのでそれを改善したいです。
- リストやコードブロックを挿入するボタン
  - Githubのコメントみたいなイメージです。
- 連載機能
  - 記事をまとめる機能
- いいね機能
- コメント機能


# まとめ

たくさんの人に使っていただけるように頑張って改善していきますので、よろしくお願いします。

`投稿する` -> `記事を投稿する`から投稿できます。



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/S7MIy7twqUtaDk8pJVAk/origin.webp)



Blogs

Questions