OmniAICreator/Qiita-1.07M huggingface dataset:
github + CircleCi + s3でCI/CDの構築


ポートフォリオ作成の過程でgithubに各ブランチでプッシュした場合はJestを走らせて、mainブランチにプルリクした場合のみs3のwebホスティングしているバケットにデプロイするようなCI/CDを構築したかった。
その過程でcicle ciのconfig.ymlについて理解をする必要があったので載せておく。

こんな構成
![名称未設定ファイル.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409259/2d882d17-adc6-c58b-32fa-8a20d5c17721.png)



## とりあえず、結論

```yml
version: 2.1

orbs:
  aws-s3: circleci/aws-s3@3.0.0

executors:
  default:
    docker:
      - image: cimg/node:14.15.0
      - image: cimg/python:3.10

commands:
  npm_install:
    steps:
      - restore_cache:
          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: install npm
          command: npm install
      - save_cache:
          key: dependency-cache-{{ checksum "package.json" }}
          paths:
            - node_modules

jobs:
  test_frontend:
    executor: default
    steps:
      - checkout
      - npm_install
      - run:
          npm test

  build_deploy:
    executor: default
    steps:
      - checkout
      - npm_install
      - run:
          npm run build
      - run:
          ls -la
      - aws-s3/sync:
          arguments: |
            --delete --exact-timestamps
          from: ./build
          to: s3://{{s3のバケット名}}

workflows:
  version: 2
  continuous_integration&continuous_deploy:
    jobs:
      - test_frontend
      - build_deploy:
          requires:
            - test_frontend
          filters:
            branches:
              only: main

```

上から解説していく

## version

circle ciのconfigバージョン。

## orbs

ジョブ、 コマンド、 Executor などの、共有可能な設定要素をパッケージ化したもので、本来、特定のビルドやコマンドなどを記載しなくてはいけないところを、circle ciのほうでパッケージ化してくれてるので冗長になってしまう部分を簡素に書くことができる。
今回はs3 syncを使うために `aws-s3: circleci/aws-s3@2.0.0` を設定。

## executors

CircleCI で実行するテストやデプロイを動かすための環境を共通化して使うためのもの、今回でいえば、ソースはReactで構築していたので npmまわりのインストールやビルドにNode.jsが必要なのでそれのDockerイメージと、aws cliのためにPythonイメージを設定している。

## commands

これは使いまわしたいコマンドを共通化するときに使えるもの、今回でいえばJestのテスト実行とデプロイ前のビルドに同じnpmコマンドを使うため共通化した。

### command

実行するコマンド。

### restore_cache

キャッシュを活用することでビルド時間を短縮するが、package.jsonが更新されている場合はモジュールの再インストールが必要なので、checksumでpackage.jsonの中身をチェックして、変化があれば `npm install` を実行して、なければ次の処理をスキップするようにしている。

### save_cache

キャッシュすることでビルド時間を短縮する。
今回でいえば、node_modulesをキャッシュすることでビルド時間を短縮している。

## jobs

wolkflowで実行する単位。

### executor

executorsで設定したものを使う。

### steps

実行するコマンド。commandsで設定したものを呼び出すこともできる。

#### checkout

githubとcircleciが連携していることが前提になるが、対象のリポジトリのブランチからソースをチェックアウトする

#### aws-s3/sync

awsのs3でデプロイするためのsyncコマンド周りのオプションと実行。
最新の3.1.1で `--delete --exact-timestamps` をオプション指定するとうまくいかなかったので3.0.0にしている。

詳しくは

https://circleci.com/developer/ja/orbs/orb/circleci/aws-s3?version=3.0.0

fromは同期元のファイルの場所、toは同期先のs3バケットを指定する。

ただし、circle ciのプロジェクトでAWSの各環境変数を設定しておく必要がある。
IAMユーザーを作成して、アクセスキーとシークレットアクセスキーを作成する必要がある。

![Web 1920 – 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409259/20850bbf-d931-b1db-598b-15cfc029a04e.png)


## workflows

jobの実行管理をする。

### requires

基本的にjobは並列実行されるが、requiresにjobを指定することで指定したjobが完了してから実行することができる。
今回でいえば、test_frontendでテストが実行されてpassとなった場合のみ、ビルドしたかったので設定。

### branches

jobを実行するブランチを指定できる。
ビルドとデプロイに関しては、mainブランチでのみ実行したかったので指定。


# 一言

CircleCiすごいし、便利っす。
【自作アプリ　第三期】

今回も前回の　【自作アプリ　第二期】　に引き続き画面のキャプチャを元に実装機能の解説をしていこうと思います。加えてこれからの方針も説明できればと思います。

#### 集計画面
【収支管理画面からの遷移を踏まえて説明】
![収支確認画面➀　第三期.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918178/29186660-ce08-6ac5-1d5a-ba2d0691cf8d.png)

![収支確認画面➁　第三期.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918178/70a47f92-6e74-667a-8ae1-117e7610bcef.png)
↑「ボタン」列の「集計」ボタンを押下する

##### ➀不動産の「集計」ボタンを押下した場合
![集計画面「不動産」　第三期.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918178/1b4ad167-c73e-8cd1-b222-ad3efaca24ba.png)
↑「不動産」のデータのみが集計される。勿論、他ユーザーの情報を引っ張ってくることはない

##### ➁銀行の「集計」ボタンを押下した場合
![集計画面「銀行」　第三期.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918178/646886ff-f254-4c90-04e3-6f4b55c73ce5.png)
↑「銀行」のデータのみが集計される。
・sessionにて飛んでいるユーザーID(user_id)をsession.getで取得
・株式投資の対象の会社名（company）をhiddenで取得

使用テーブル &カラム
--investテーブルcompanyカラム
--investテーブルuser_idカラム

```java
HttpSession session = request.getSession();
int user_id = (int) session.getAttribute("user_id");
```


#### これからの方針
集計画面にて取得されたデータをさらに集計テーブルとしてデータを持っておく為に


```sql
--TOTALテーブル
CREATE TABLE INVEST(
ID INT PRIMARY KEY AUTO_INCREMENT,
USER_ID INT NOT NULL,
COMPANY VARCHAR(100) NOT NULL,
TOTAL_SUM INT NOT NULL,
MEMO VARCHAR(100),
TOTAL_DATE DATE
);
```

メモ
SELECT SUM(INVEST_SUM) FROM INVEST WHERE USER_ID = ? AND COMPANY = ?;
↑SERVICEクラスで値を持っておいて再度INSERT DAOに持っていく？？
INSERT (USER_ID, COMPANY, TOTAL_SUM, MEMO, TOTAL_DATE)INTO VALUES(‘’,’’,’’);

SELECT * FROM TOTAL WHERE USER_ID = ? AND COMPANY = ?
↑TOTALbeanを作っておく
⇨jspに出力


【引き続き】
☆自作アプリ作成も終盤に差し掛かってきたのであと少し頑張ろうと思います。
Gitのfetch, merge, pullって何やってるの？

今までなんとなく、**fetchしてmergeするのを一気にやってくれるのがpull**という理解で、詳しく調べたことがありませんでした。
改めて調べてみたのでまとめます。

# 前提知識
`fetch, merge, pull`を理解する上で欠かせないのが以下の言葉です。
- **リモートリポジトリ**: GitHubなどリモート上に存在するリポジトリ
- **ローカルリポジトリ**: PC上に存在するリポジトリ
    - **リモート追跡ブランチ**: `origin/main`など、リモートリポジトリを追跡するブランチ
    - ローカルブランチ: `main`など、ローカル上で実際に扱うブランチ

図にすると以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408546/9a09e077-51ca-22cd-8acf-32bae43e4ebd.png)

すこしわかりにくいのが**リモート追跡ブランチ**ですね。
これは**リモートブランチの状態をとりあえずローカルに持ってきている場所**というような理解であっていると思います。
ここで大事なのは、リモート追跡ブランチはあくまで**ローカルにあるブランチ**であることです。

# fetch
`fetch`とは、リモートリポジトリのブランチの状態を**リモート追跡ブランチ**に反映させる操作です。
リモートの最新の状態をローカルでも見れるようにするイメージです。
Gitはリモートリポジトリとリアルタイムで同期するわけではないので、最新の状態を見るためには**毎回`git fetch`をする必要**があります。

`fetch`をしただけではローカルブランチ(`main`など)の状態は何も変わりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408546/e2f968fc-3451-5dc5-44c3-a4046dde0816.png)


# merge
`merge`は異なるブランチの変更を自分のブランチに取り込む操作で、Pull requestを作ってマージする、あれと同じです。
リモート追跡ブランチとの関係に限って説明すると、**リモート追跡ブランチをローカルブランチに取り込む**操作です。

取り込み方で以下の2つの方法があります。
- `fast-forward`
- `non-fast-forward`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408546/cb6a7d12-7905-e8cf-a2d8-6eae17898812.png)

## fast-forwardマージ
リモート追跡ブランチの状態をローカルブランチに取り込む場合、通常は`fast-forward`(マージコミットを作成しない)でマージします。
図示するとこのような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408546/68379c93-d9e7-d6d0-c257-5c5bbffab6b5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408546/37f5fbe9-f559-6801-17a8-0d9fbc5c7aec.png)

`origin/main`の方が`a`と`b`というコミット分、ローカルの`main`よりも進んでいるとき、`fast-forward`マージでは`main`に`a`と`b`のコミットを取り込みます。
ここで**マージコミットは作らない**ので、`main`ブランチは単に`a`と`b`のコミットを積み上げたようになります。

## non-fast-forwardマージ
`main`ブランチは基本的にローカルで変更を加えることがないと思うので、`fast-forward`でマージできます。

しかし`feature`ブランチなどの作業ブランチで、複数人で一つのブランチを共有して開発などしている場合、`origin/feature/hoge`と`feature/hoge`で異なる履歴(コミット)が積み上がってしまうことがあると思います。
この場合、コンフリクトが発生しなくとも、`fast-forward`でマージすることはできません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408546/e17a72c9-b296-ed6d-2d67-8c22e819d806.png)


そこで**マージコミット**を作ってマージすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408546/640819f9-6d24-574c-45be-bcdc0d7aa5b0.png)

このように、**マージコミット**を作ってマージするのが`non-fast-forward`マージです。

# pull
`pull`は冒頭で言ったように`fetch + merge`です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408546/26324024-15d2-6c4b-4dc4-a2a7825d6e71.png)

もう少し詳しく見ると、`merge`の方法でいくつか挙動が異なります。
- 通常(特に何も設定していない場合)
    - `fast-forward`マージを試す
    - できなければ`non-fast-forward`マージをする
- `--ff-only`オプションを付けた場合
    - `fast-forward`マージを試す
    - できなければマージしないでエラー
- `--no-ff`オプションを付けた場合
    - `non-fast-forward`マージでマージする


# おわりに
改めてGitでよく使う`fetch, merge, pull`についてまとめました。

私はGit初心者だった頃、`git pull`したときにマージコンフリクトが発生してマージしようとし始めたら`pull`するのをやめて`reset --hard`で強制移動するなどしていたのですが、今回調べてみて、`--ff-only`オプションを付けていれば良かったんだなと学びがありました。(今はそもそも`pull`をほとんど使わないのですが…)

特に`merge`部分の違いについて理解できていると、`pull`したときの挙動で焦らないで済むと思います。
VercelにFirebaseのサービスアカウントJsonファイルをアップロードできない問題対応

# はじめに

NuxtやNextJsでFirebase Adminを利用したアプリを作成し、Vercel上で実行しようとした。

ところがVercelにはファイルをアップロードする手段がない、一般的なFirebaseの認証方法である、サービスアカウントのJsonファイル利用した認証が利用できなかった。

漏洩リスクなどを考慮したところ、こちらのサイトの暗号化して環境変数に設定するの手順が良さそうだったので、こちらの方法の実装パターンを試してみた。

https://zenn.dev/terrierscript/scraps/241451e4595c1d

# 実装

## 1. サービスアカウントJsonの暗号化


はじめにFirebaseコンソール画面の「プロジェクトの設定>サービスアカウント>新しい秘密鍵の生成」より、秘密鍵を生成する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/5dff4ceb-a625-de60-cbcd-162c97f23ed6.png)

暗号化には`openssl`コマンドを利用する。先ほどダウンロードしたJsonファイルの名称を`service-account-key.json`として、暗号化を下記のコマンドで実施する。

```bash
$ openssl enc -aes-256-cbc -a -in service-account-key.json -out encrypted.txt -k passphrase -p

salt=xxxxxxxxxxxxxxxx
key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
iv=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

その後、出力された key と iv、 `encrypted.txt`の内容を、それぞれ .env に設定、またはVercelに環境変数として設定する。

```bash:.env
DECRYPT_KEY=${keyの値}
DECRYPT_IV=${ivの値}
ENCRYPTED_KEY=${encrypted.txtの中身}
```

## 2. 復号処理

`openssl`コマンドで暗号化した各種情報を利用し、サービスアカウントキーを復号化する処理を作成する。

```ts:decrypt.ts
import * as crypto from "crypto";
import * as fs from "fs";

/**
 * 暗号化キーを複合化する処理
 */
export function decryptGCPServiceAccount() {
  const algorithm = "aes-256-cbc";
  // 環境変数から読み込む
  const key = process.env.DECRYPT_KEY!;
  const iv = process.env.DECRYPT_IV!;
  const source = process.env.ENCRYPTED_KEY!;

  const decipher = crypto.createDecipheriv(
    algorithm,
    Buffer.from(key, "hex"),
    Buffer.from(iv, "hex")
  );
  const data = Buffer.from(source, "base64").slice(16);
  const start = decipher.update(data);
  const final = decipher.final();
  const result = Buffer.concat([start, final]).toString("utf8");

  // 複合化されたサービスアカウントのJson
  return JSON.parse(result);
}
```

## 3. Firebase Adminの認証処理

2で実装した復号化処理を用いて`firebase-admin`の認証を行う。

Fire StoreとFire Storageを利用する場合の例を下記に示す。

```typescript:firebase.ts
import { initializeApp, cert } from "firebase-admin/app";
import { getFirestore } from "firebase-admin/firestore";
import { getStorage } from "firebase-admin/storage";
import { decryptGCPServiceAccount } from "./decrypt";

// ServiceAccountKeyを複合化する
const serviceAccountJson = decryptGCPServiceAccount();

const app = initializeApp({
  // 文字列をJson形式に変換し初期化する。
  credential: cert(serviceAccountJson),
  // FireStorageのバケット名
  storageBucket: "${FIRE_STORAGE_BUCKET_NAME}",
});

// FireStoreとFriestoreStoregeのバケットを取得する。
export const firestore = getFirestore(app);
export const bucket = getStorage(app).bucket();
```

# 参考

- メールアドレスとパスワード認証は、現在のバージョンでは利用できない様子

https://stackoverflow.com/questions/64073209/how-do-i-add-google-application-credentials-secret-to-vercel-deployment

- 最新の記事からもJsonの値をそのまま環境変数に設定する方法しかなさそう。

https://stackoverflow.com/questions/75550207/how-to-add-google-application-credential-to-vision-when-hosted-outside-of-gcp

- 暗号化した値を貼り付けるこちらのパターンを採用

https://zenn.dev/terrierscript/scraps/241451e4595c1d
JavaでWord文書を画像に変換

Word文書を画像に変換すると、Word文書の書式やレイアウトが保持されるため、さまざまなデバイスで表示でき、文書の体裁も変わりません。 これにより、Word文書の閲覧や共有が容易になるほか、ポスターの作成、販促資料の作成、スライドショーの作成など、より多くのシーンで文書を活用できるようになります。 また、Word文書を画像に変換すると編集が困難になるため、文書の内容をある程度保護することもできます。 今回は、無料の[Free Spire.Doc for Java](https://jp.e-iceblue.com/introduce/free-spire-doc-for-java.html)を使って、**Word文書の各ページを画像に変換**する方法を紹介します。

- **[Word文書をPNG画像に変換する](#word文書をpng画像に変換する)**

### 【依存関係の追加】
この記事の方法は、無料のWord文書処理Java API Free Spire.Doc for Javaが必要です。このAPIは、[公式サイト](https://jp.e-iceblue.com/download/free-spire-doc-for-java.html)からダウンロードするか、Mavenでプロジェクトに導入することができます。Mavenのコードは以下の通りです。
```xml
<repositories>
    <repository>
        <id>com.e-iceblue</id>
        <name>e-iceblue</name>
        <url>https://repo.e-iceblue.com/nexus/content/groups/public/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.doc.free</artifactId>
        <version>5.2.0</version>
    </dependency>
</dependencies>
```

## Word文書をPNG画像に変換する
Free Spire.Doc for Javaの **Document.saveToImages()** メソッドを使用すると、Word文書をビットマップに変換し、**PNG**ファイルとして保存できます。また、このメソッドは文書を**BMP**、**EMF**、**JPEG**、**GIF**画像に変換するためにも使用できます。PNGファイルとして保存を他の画像ファイルとして保存に変更するだけです。詳しい手順は以下の通りです。
- **Document** クラスのオブジェクトを作成します。
- **Document.loadFromFile()** メソッドでWord文書を読み込みます。
- **Document.saveToImages()** メソッドで文書をBufferedImage画像に変換します。
- 画像コレクションをループして特定の画像を取得し ます。
- 異なる色空間で画像を書き直します。
- **BufferedImage**をPNGファイルに書き出します。

**フルコードです：**
**Java**
```java
import com.spire.doc.Document;
import com.spire.doc.documents.ImageType;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class convertWordToImage {
    public static void main(String[] args) throws IOException {
        //Documentクラスのオブジェクトを作成する
        Document doc = new Document();

        //Word文書を読み込む
        doc.loadFromFile("サンプル.docx");

        //文書をBufferedImage画像として保存する
        BufferedImage[] images = doc.saveToImages(ImageType.Bitmap);

        //BufferedImage画像をPNGファイルとして保存する
        for (int i = 0; i < images.length; i++) {
            //異なる色空間で画像を書き直す
            BufferedImage newImage = new BufferedImage(images[i].getWidth(), images[i].getHeight(), BufferedImage.TYPE_INT_RGB);
            newImage.getGraphics().drawImage(images[i], 0, 0, null);

            //画像をPNGファイルとして保存する
            File file = new File("Output/Images/" + String.format("Image-%d.png", i+1));
            ImageIO.write(newImage, "PNG", file);
        }

        doc.dispose();
    }
}
```

**変換結果**
![Word文書をPNG画像に変換する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/095a05f2-fa1b-a672-7bef-1e35952f8981.png)

> **この記事では、Free Spire.Doc for Javaを使ってWord文書をPNG画像に変換する方法を紹介します。Free Spire.Doc for Java の他のチュートリアルをご覧になりたい場合は、[Spire.Doc for Javaのチュートリアル](https://jp.e-iceblue.com/tutorials/java/spire-doc-java/doc-java-program-guide-content.html)をご覧ください。また、[Spire.Docフォーラム](https://www.e-iceblue.com/forum/spire-doc-f6.html)でこのクラスライブラリについて議論することもできます。**
【若手育成に関わる方へ】エンジニアに対するメンタリングについて

# この記事について
私がエンジニアとして働く中で、後輩エンジニアと一緒にプログラムを書いたり、1on1をしたりする場面が多くありました。
その中で実践して感じたことについて紹介します。

## 想定読者
・最近、後輩やエンジニア歴の浅いメンバーと開発することが多い
・1on1のメンターを担当しているが、どうコミュニケーションを取ったらいいか分からない

## なぜ書こうと思ったか？
・一般社員（マネージャー以外）が育成のノウハウやスキルを学ぶ場が少ない。
が、実際にはほとんどの社員が何らかの形で誰かの育成に関わっている。
**→マネージャーでなくても、育成のノウハウやスキルを身につける必要がある。**

# （前提）3つのコミュニケーション技術
**ティーチング**
→相手の知らないことや足りないことを教える

**コーチング**
→相手に質問をし、気づきを与え、導く
（答えは相手が自分で出す）

**フィードバック**
→相手が気づいていない客観的な事実を伝える
（結構厳しめの指摘）

# コーチングとメンタリング
## コーチングとは
・質問や問いかけにより、相手が自分自身で答えを出す。
・相手の答えの良し悪しを評価しない（正解は1つとは限らない）

## メンタリング
・（コーチング的な進め方で）自分の思考を一時的に貸しながら、相手の問題解決を手助けする。
自転車の補助輪のような存在で、問題解決を補助する。

・正解が1つはっきり決まっていることもある。

### 例えば
![Action_Controller__Exception_caught.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966032/f4b846a8-56d5-ae5d-e10a-013046a8b846.png)
上記のようなエラー画面が出て困っているメンティーに対して

**ティーチング的な声かけ**
「departmenというメソッドが未定義だからエラーになってます。タイポですね。」
（答えを直接教えてしまっている。）

**メンタリング的な声かけ**
「どんなエラーメッセージが出ていますか？」
「エラーの原因は何が考えられそうですか？」
（問題を解決するためのプロセスや考え方を伝える。問いかけによって解決できる方向に促す。）

### なぜメンタリングが大事なの？
#### 「他者説得」ではなく「自己説得」が成長につながる
**他者説得**
他者から教えてもらって理解する。

（特徴）
・他人が答えを伝える
・体感を伴わない
・理解できたかを他人が確認できない

**自己説得**
自ら今まで分からなかったことを理解する。

（特徴）
・他人が質問で促す
・体感をともなう
・行動の変化が発生しやすい（理解できたかが他人が確認しやすい）

#### 自立型人材を育てるため

| 人材タイプ | 特徴|
| -------- | -------- |
| 依存型人材     | ・問題を与えられてから考える<br> ・問題と解決策を渡されてから動ける     |
| 自立型人材 | ・自ら問題を発見し解決することができる<br> ・問題について、自分事として捉えている |

（引用: [「エンジニアリング組織論への招待～不確実性に向き合う思考と組織のリファクタリング」](https://gihyo.jp/book/2018/978-4-7741-9605-3)）

# 実際の感想
## メンタリングは時間がかかる
→まとまった時間をあらかじめ確保するのが大事。
→今すぐ時間が確保できない時は、「18時からカレンダーに予定を入れて、そこでちゃんとみましょうか？」のように時間の枠を確保する。

## 状況、事柄によってティーチングの方が向いていることもある
例えば
・メンティーが対象の事柄についての知識が少なく、自力での問題解決が難しい場合。
・時間がなく、すぐに問題解決を進める必要がある場合。
→状況によって使い分ける必要がある。

## 新卒社員に対しては、ティーチングの割合が多くなってもいい
コーチングやメンタリングは、メンティーが自力で問題解決できるように、思考の補助をしたり、障害になっている認知の歪みを取り除いたりする手法。
（本来であればメンティーが1人で解決できるくらいの知識やスキル、問題解決の経験を持っているという前提がある。）

→新卒社員の場合、前提になる知識、スキル、問題解決の経験がないこともあるので、ティーチングで導くことが多くなっても良い。
「こういう場面では、こうした方がいいよ」とはっきり教える方が、安心感もあっていいと思う。

### 新卒の方に聞いた意見
概念や全体像が全く分かっていない事柄は、ティーチングで教えてもらえる方がいい。
前提が分かっていない状態でメンタリングをされると、逆に前提について質問しづらくなる。

## メンタリングで相手を「試している」みたいになる問題について
メンティーが「この人は本当は答えを分かっているのに、自分を試そうとしてすぐ教えてくれないのか」みたいに思われてしまう問題。

＜考えられる解決策＞
・確認するような問いかけの仕方をする（例「◯◯ってどうなってるんでしたっけ？」）
・「問題解決のプロセスを身につけてほしい」とはっきりと日頃から伝える

### 新卒の方に聞いた意見
メンタリングされる側も、メンタリングされていることが分かっていることが多いと思う。
そこは割り切ってやれると思う。（人によると思うけど）

## 多少は誘導尋問っぽくなってもOK
※これはかなり個人的な意見です。
（コーチングにおいては誘導尋問は基本NGですが、）技術的なことを伝えるメンタリングであれば、多少は誘導尋問っぽくなってもいいと思います。


# 参考書籍
**①エンジニアリング組織論への招待～不確実性に向き合う思考と組織のリファクタリング**
この記事は主にこの本の内容をベースにしています。
https://gihyo.jp/book/2018/978-4-7741-9605-3

著者の方のこのQiita記事もおすすめ。
「新入社員が来てメンターになれって言われたけど、どうすればいいのかという対話テクニック」
https://qiita.com/hirokidaichi/items/2e8e731acfd7b6c7e02f

**②ヤフーの１on１**
コーチングや1on1の入門書。
https://www.diamond.co.jp/book/9784478069783.html


**③急成長を導くマネージャーの型～地位・権力が通用しない時代の“イーブン”なマネジメント**
3つのコミュニケーション技術（ティーチング、コーチング、フィードバック）について詳しく解説されています。
https://gihyo.jp/book/2021/978-4-297-12385-7

# エンジニア/デザイナー大募集のお知らせ
株式会社Relicでは、エンジニア・デザイナーを積極的に採用中です。
北海道から沖縄まで地方拠点が10以上ありますので、U・Iターンも大歓迎です！🙌
少しでもご興味がある方は、Relic採用サイトからエントリーください！
https://relic.co.jp/recruit/#categories
CSSの種類について

CSSって便利ですよね！
特にflexが便利で「え…？私のCSS、flex多すぎ…？」って心配になるくらい使ってしまいます。
ただ、サイ大きくなったりデザインが複雑になるほどファイルも重く、
コードを探すのも難解になりますよね。

そんなCSSの利便性を上げるべく、現在はsassやscssなどが使われることも多いです。
「よし、さっそく使ってみよう！」と思ってエディタツールを開いても、sass、scss、CSS、はたまたlessなんて言うのもあり、どれ使ったらいいかわからないと思います。
まず、それぞれの違いを知っていきましょう。


まずCSSについて
-----------------
web上のデザイン・アニメーションを設定する際、なくてはならないものですね。
テキストのサイズ、レイアウトの構築、サイト内のカラーなど、webサイトの「装飾」をメインに担当してくれます。基本的な書き方は以下の通りです。
```
セレクタ{
　プロパティ:値;
}
```

__セレクタ__ …CSSで指定する対象で、htmlタグ、class名、id名で指定を行います。
__プロパティ__ …CSSに関するスタイルの種類を決める部分です。
__値__ …プロパティを調整する部分です。

```:css記述例
h1{
　font-size:30px;
}
// 「h1」タグのテキストのテキストのサイズを30pxに設定する。

.main_contents{
　width:100%;
}
// 「main_contents」というclass名をもつ要素のwidth（幅）を100%に設定する。

.main_contents p{
  color:#ffffff
}
//「main_contents」の中にある「p」タグの色を「#ffffff」に設定する。
```
CSSはこれから説明する言語のベースになる存在ですので、初心者はここから始めるといいと思います。

sass・scssについて
-----------------
次にsassとscss。名前はよく似ていますが、これらは「 __Sass__ 」の記述方法のことを指しています。「 __Sass__ 」とは、 __CSSの拡張言語で、書きやすく、見やすくしたスタイルシート__ のことです。

例えば入れ子構造で例えるとそれぞれこのようにな書き方になります。
```:cssの入れ子
.main_contents {
　width:100%;
}
.main_contents p {
　font-size:16px;
  line-height: 1.75
}
.main_contents p span {
　font-size:14px;
  color:#ffffff;
  background-color:red;
}
```
```:scssの入れ子
.main_contents {
　width:100%;
  p {
　　font-size:16px;
　　line-height: 1.75;
    span {
    　font-size:14px;
      color:#ffffff;
      background-color:red;
    }
  }
}
```
```:sassの入れ子
.main_contents
  width:100%
  p
　　font-size:16px
　　line-height: 1.75
   span
    　font-size:14px
      color:#ffffff
      background-color:red
```
上記3つは「.main_contents」とその中の要素に対してcssが指定されています。
見比べてもらうと、記述量はcss > scss > sass となっていると思います。

:::note info
__sass / scssとは？__ 
__sass__ …ファイル拡張子は「.sass」で、セミコロンや波かっこを使用しないため、コード簡略化に特化している。
__scss__ …ファイル拡張子は「.scss」で、CSSの記述方式に近いままコード簡略化ができる。
:::
そのほかにもSassであればオリジナルの関数を作成したり、ミックスインという機能を使うことも可能です。

sass・scssを覚える利点
-----------------
cssがあるんだったら、何個も言語覚える必要性ないのでは？と思うかもしれませんが、拡張言語といわれるようにSassにはCSSではできないことがあります。
##### 記述量の減少
上記のコードを再度見てもらうとわかる通り、cssの場合は子要素にcssを反映したい場合、同じセレクタを何度も書く必要があります。でもSassの場合は一つのセレクタの中に入れ子構造を作っていけるので何度も同じ記述をしなくて済みます。（変数の書き方もCSSの時より記述量が減ります）

##### 作業効率の上昇
上記のネスト構造の記述につながりますが、コーディングスピード向上や記述ミス回避につながります。何度も同じ記述を書くのって~~めんどう~~修正時に手間が増えますからね。

##### ミックスインの利用
ミックスインとは、定義したCSSのスタイルを別のところでも使えるようにする機能です。
サイト内のデザイン統一において重要な機能です。ページや機能に合わせてボタンの大きさや色を変えることもあるので、微妙な差を設定しやすいです。

Lessについて
-----------------
あまり主流ではないかもしれませんが、実はLessというものも存在します。
こちらもSass同様にCSSの拡張言語で、拡張子は「.less」となります。
実はSassでできる入れ子やミックスインもLessで可能で、大きな違いとしては
__Sass__ …Rubyがベースとなっている
__Less__ …JavaScriptがベースとなっている（less.jsというものが必要です）


まとめ
-----------------
:::note info 

__sass__ …ファイル拡張子は「.sass」で、Rubyベースで動く。セミコロンや波かっこを使用しないため、コード簡略化に特化している。
__scss__ …ファイル拡張子は「.scss」で、Rubyベースで動く。CSSの記述方式に近いままコード簡略化ができる。
__less__ …ファイル拡張子は「.less」で、JavaScriptベースで動く。Sassで扱えるものは大体こちらでも使用可能。
:::

>参考:
>https://udemy.benesse.co.jp/design/web-design/sass.html
>https://shanabrian.com/web/sass/4arithmetic-operations.php
エンジニア歴2年目が「ソフトウェアアーキテクチャの基礎」に手を出した結果

## 本を手に取る前の私

なんかアプリケーション全体の設計とか決めれたらカッコいいな〜なんかないかな〜〜

「おっ！！何じゃこの本は！！(本を手に取る)」

**ソフトウェアアーキテクチャの基礎** :bird: 

「基礎ってことはわかりやすく書いてくれとんのか？ (表紙を見ながら)」

「お！！しかも体系的アプローチ！ざっくりアーキテクチャとは？的な解説してくれとんのかな？設計とか考えるのにめっちゃ良さそう！！(ワクワク)」

## 本を読んでるときの私

「お〜なるほど、トレードオフね。ほうほう」

「カタ..?なぜにカタカナ？？」

「おほ〜ん、トポロジー...?メディエーター...?」

「おぉ...なんか突然交渉の話ししだしたぞ...???」

「読み終わった........(そっと本を閉じる)」


## 読み終わった直後の素直な感想

「この本の言いたかったことの5%くらいしか理解できてない気がする。。ホンマにこれがアーキテクチャの基礎なんか。。。？」

周りの人はどんな理解度やろ〜と思って色んな人のブログを漁ってみると、こんなことを言っているブログを見つけました。

> 本書はどういった層に書かれているか、これはずばり 2010 年代を乗り越えてきた経験者に向けてです。

https://zenn.dev/okunokentaro/articles/01g08xzr246r7p8336m57amkpn#%E8%AA%B0%E3%81%8C%E8%AA%AD%E3%82%80%E3%81%A8%E3%82%88%E3%81%84%E6%9C%AC%E3%81%8B

私その頃中学生や。。。そりゃ理解できんわな。。。

完全理解を諦め本を投げ捨てようと思いましたが、せめて自分と同じようなバックグラウンドの人が同じ轍を踏まないように、また踏んだとしても何かしら得られるように（あとちょっとだけ自分のアウトプットの練習も兼ねて）、書きなぐっていこうと思います。


## そもそも本書に対する認識の違い
***読む前の本書への認識***
アーキテクチャのことに全く知識がない状態で読むような「初心者向け」の本

***読んだ後の本書への認識***
アーキテクトになる際に知っておいた方が良い知識が書かれた本

補足すると、
この本はソフトウェアアーキテクチャの基礎的なことについて書かれている(多分）のですが、アーキテクチャに関する全く知識がない状態で読むような「初心者向け」の本ではないと思いました。まあよくよく考えてみれば、そもそも基礎知識が不足しているのに、基礎的な技術の組み合わせであるアーキテクチャについて理解することは難しいのはあたりまえですよね。本書を手に取る前の自分に一つアドバイスするなら「この本は『アーキテクチャの基礎』の本であって、『アーキテクチャの基礎の基礎』の本ではないぞ！！」と伝えたいです。


## 唯一内容が理解できた章

そんな私にも少しだけ理解できた章がありますので、それを紹介して本記事を終わりたいと思います。

「13章 サービスベースアーキテクチャ」

***ざっくり解説***
・ 機能ごとにサービスを分割し個別デプロイされているアーキテクチャ
・ 機能ごとに開発を進めることができる
・ UIやDBは機能ごとに分割しても良いし、しなくても良いという柔軟性を持っている
・ マイクロサービスアーキテクチャとモノリシックアーキテクチャのちょうど間くらいの分散具合

イメージ図
![サービスベース.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287884/c3e94645-2c49-8b2e-bcee-72bf8a5d6b48.jpeg)


***なぜこの章だけ理解できたか***
* アーキテクチャの名称からおおよそどのようなアーキテクチャか想像がついた
* 近いアーキテクチャスタイルでの開発経験があったから
* DBやUIを分割する際の例がわかりやすかったから
* 極端なアーキテクチャ特性のものが紹介されている中で、このアーキテクチャだけのバランスが抜群に取れていて、個人的に「ええなぁ〜」と思ったから。

上記の中でもアーキテクチャの想像がついていたことが、理解できた要因として一番大きかったと思います。
本章でも相変わらず難しい単語や前提となる知識不足があったのですが、この章だけは仮説を持って読み進めることができたため、受け身ではなく仮説の検証という姿勢で読み進められました。

どんな本にも言えるとは思いますが、特に本書では「各章ごとに仮説を立ててから読み進める」ことをオススメします。私のような経験が浅めのソフトウェアエンジニアでも本書を楽しく読めるかもしれません。


## まとめ
・ 本書はアーキテクチャに関する基礎知識がない初心者向けの本ではありませんでした。
・ もし私と同じような歴の方が読むのであれば、各章ごとに仮説を立てれば楽しく本書を読み進められるかも知れません

ここまで読んでいただきありがとうございました！
Laravelマイグレーション(新規作成、カラム追加..ect)

laravelでテーブルを作る手順をメモ


## マイグレートファイル作成
まずは、マイグレートファイルを作成。下記のコマンドで作成する。

```
php artisan make:migration (マイグレートファイル名)
```

例えば、animalsというテーブルを作るとしたら
```
php artisan make:migration create_animals_table
```
といった感じになる。
ポイントとして後にマイグレートファイルが増えることを考慮し、
何をするファイルなのかがファイル名で分かるようにするといい。

## マイグレートファイルの編集
マイグレートファイルがdatabase>migrations中に
XXXX_XX_XX_XXXXXX_create_animals_table.phpという形式の名前で作成されている。
(XXXXのところは日付になっている。)

中身を編集し、カラムを追加する。
```php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('animals', function (Blueprint $table) {
            $table->id();
            $table->string('name');//ここに追加
            $table->string('country');//ここに追加
            $table->integer('size');//ここに追加
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('animals');
    }
};

```

## マイグレート実行

下記のコマンドでマイグレート実行します。

```
php artisan migrate
```

これで、テーブルの作成が完了です。


## おまけ


https://qiita.com/free-coder/items/0fc5935cc30837e9742f
<Next.js>jest launch.json error: basedir=$(dirname 

# version
- Next.js@13
- jest@29
- pnpm@8.6

# 背景
Next.jsで作っているアプリでテストが書きたく jest を入れました。
vscodeを使っていたので、ついでにdebug設定も入れとくかとlaunch.jsonを書いた時に遭遇したエラー。

# 内容
jest単体は問題なく走っている状態。
jest公式からコピペ

```json:launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/.bin/jest",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}
```

https://jestjs.io/ja/docs/troubleshooting


# エラー
動かないぇ

```bash
node_modules/.bin/jest:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47
```

# 解決
どうやら pnpm を使っていたためのエラー。
nodejs script を要求しているが、.bin/jest が shell sceiptのためうまく動かないよう。

runtimeArgs の path をjest.jsのパスに変えるといけた
```json:launch.json
- "${workspaceRoot}/node_modules/.bin/jest",
+ "${workspaceRoot}/node_modules/jest/bin/jest.js",
 
```

https://dev.to/elpddev/debug-jest-spec-in-vscode-error-missing-after-argument-list-1p3b
ssh接続を簡単にする

# ssh鍵認証
## 準備
まだmacに.ssh/id_rsa.pubの鍵がない場合はmacで下記のコマンドを実行し生成します
```
mac:~ $ ssh-keygen -t rsa -b 4096
```

## 鍵認証で入れるようにmac側の公開鍵をラズパイに設定します。
```
mac:~ $ ssh-copy-id -i .ssh/id_rsa.pub pi@raspberrypi.local
/usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: ".ssh/id_rsa.pub"
/usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
pi@raspberrypi.local's password: 

Number of key(s) added:        1

Now try logging into the machine, with:   "ssh 'pi@raspberrypi.local'"
and check to make sure that only the key(s) you wanted were added.
```

## 確認
```
mac:~ $ ssh pi@raspberrypi.local
Linux raspberrypi 6.1.21-v8+ #1642 SMP PREEMPT Mon Apr  3 17:24:16 BST 2023 aarch64

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Mon Jul 17 16:02:31 2023 from 240b:11:bc00:7d00:3c19:1e17:4098:36d5
pi@raspberrypi:~ $ 
```
パスワードを入力することなく、入れるようになった。


# ニックネームでログインできるようにする

## 設定ファイルの作成
macの~/.ssh/configに下記の内容で設定する。追記またはファイルを新規作成する。
```
Host raspi 
HostName raspberrypi.local 
port 22
User pi 
IdentityFile ~/.ssh/id_rsa
```

## ニックネームでログイン
```
mac:~ $ ssh raspi
Linux raspberrypi 6.1.21-v8+ #1642 SMP PREEMPT Mon Apr  3 17:24:16 BST 2023 aarch64

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Mon Jul 17 16:09:13 2023 from 240b:11:bc00:7d00:3c19:1e17:4098:36d5
pi@raspberrypi:~ $ 
```
Javaの基礎知識について確認してみた

# 概要
Javaの基礎知識について確認してみました。以下のページを参考にしました。

Javaの基礎知識

https://www.javadrive.jp/start/const/

クラス、メソッド、フィールドとは

https://www.javadrive.jp/start/const/index2.html

mainメソッドとは

https://www.javadrive.jp/start/const/index3.html

文の記述と空白や改行の扱い

https://www.javadrive.jp/start/const/index4.html

コメントを記述する

https://www.javadrive.jp/start/const/index6.html

Javaの予約語

https://www.javadrive.jp/start/const/index7.html

System.out.printlnとは

https://www.javadrive.jp/start/const/index8.html

import文の使い方

https://www.javadrive.jp/start/const/index9.html

# 
コメントの記述について実際に書いて動かしてみました。

```JSample6_1.java
/**
 * JSample6_1
 *
 * 2023.07.17
 */
class JSample6_1{
  public static void main(String[] args){
    int sum = 0;

    // 10回繰り返す
    for (int i = 1; i <= 10; i++){
      sum = sum + i;  // 数値を順に加算する
    }

    /*
     集計した結果を画面に出力する
     */
    System.out.println(sum);
  }
}
```
以下のようにコマンドを実行しました。
```
$ javac JSample6_1.java 
$ java JSample6_1 
55
```

# まとめ
なにかの役に立てばと。
【論文読み】株式掲示板と新聞記事データを用いたVI指数予測

## はじめに
こんにちは。論文を読んだ結果の紹介記事です。  
今回紹介するのは、「株式掲示板と新聞記事データを用いたVI指数予測」という論文です。  

- タイトル： 【論文読み】株式掲示板と新聞記事データを用いたVI指数予測
- 出典： 細川 蓮, et al.; 人工知能学会 2022    
- URL： https://www.jstage.jst.go.jp/article/pjsai/JSAI2022/0/JSAI2022_1A5GS201/_pdf/-char/ja


## 概要
株式掲示板によるソーシャルメディアの投稿内容と新聞メディアの記事内容を用いたVI指数の上昇を予測するモデルの提案を行う。  


## 特徴
- 新聞データにLDAを適用し、金融時系列データを加え、機械学習でVI指標の予測を行う  
- Yahoo!ファイナンス掲示板（ソーシャルメディア）にSCDVやSWEMを適用し、オートエンコーダで次元削減、金融時系列データを加え、機械学習でVI指標の予測を行う  
- Precision, Recall, F1にて評価  
- ソーシャルメディアを用いた手法の法がVI上昇を予測する上で有効となった  


## 想定される適用例
- 株価変動の予測  


## 参考
- [株式掲示板と新聞記事データを用いたVI指数予測](https://www.jstage.jst.go.jp/article/pjsai/JSAI2022/0/JSAI2022_1A5GS201/_pdf/-char/ja)
【React × tailwind】ダーク（ナイト）モードの実装

# はじめに
今回はReactとtailwindの組み合わせでのダークモードの実装を紹介したいと思います。
対象者としては、Reactとtailwindの組み合わせで何かを実装した経験がある方をメインにしています。
ですのでReactでの開発の始め方やtailwindの導入方法などは記述しませんのでご了承ください🙇
開発環境としては下記になります。

- node v16.15.0
- taiwind v3.3.2


## 実装方法
早速実装方法について書きます！
まず下記コード部分を追記してください！
```js:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: "class", //←ここを追加する！
  theme: {
    extend: {},
  },
  plugins: [],
};
```

以上です、、、、、！！！！！
すごく簡単ですよね。私も難しいのかと思って調べていましたが簡単にできびっくりしました。
tailwindのバージョンによってはこのダークモードの実装方法ではできませんのでご自身のバージョンご確認ください。
上記記述した上で下記の記述のようにdarkクラスを付与するという記述をします。
```
document.documentElement.classList.add("dark");
```
この記述をuseEffectなどの中に入れ込み下記のようにします。
```jsx:DarkMode.jsx
  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [isDarkMode]);

  return { isDarkMode, toggle };
};

```
今回私はisDarkModeをstateで管理するようにして関数作成しました。
そして下記のtoggleボタンにonClick属性を付与してそれをフックに関数呼び出すようにしています。
```jsx:ToggleButton.jsx
    <div className="flex items-center">
      <span className="mr-3 text-sm font-medium text-yellow-300 dark:text-white">
        <MdLightMode />
      </span>
      <label className="relative inline-flex items-center cursor-pointer">
        <input
          type="checkbox"
          className="sr-only peer"
          onClick={() => toggle()}
        />
        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-sky-300 dark:peer-focus:ring-sky-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-sky-600"></div>
        <span className="ml-3 text-sm font-medium text-gray-900 dark:text-yellow-300">
          <MdDarkMode />
        </span>
      </label>
    </div>

```

一部抜粋になりますが、上記toggleボタンの記述です。
下記のデザイン使用させてもらい作成しています。MdLightModeなどのコンポーネントはreact iconを使用しています。
[toggleボタン参考リンク](https://flowbite.com/docs/forms/toggle/)

ここまでできたらあとは、ダークモードの時に色を変化させたい部分のクラスにdark：と記述してからスタイルを当てていくとdarkクラスが付与されている時は指定したデザインにすることができます！

# おわりに
急ぎで実装したのであまり深掘りできていないので、後日詳しく調べようかと思います。
最後までみていただきありがとうございました！
【React Unity】 useGlobalでC#とType Script間の値をやり取りする

# React Unityとは
Unity上のUIをReactで構築できるフレームワークです。
TypeScriptやHTMLで使用できます。
https://github.com/ReactUnity/core


しかし、公式のドキュメントには肝心のC#とTS間での値のやり取りが乗っていません。
https://reactunity.github.io/
そのため、メモ程度にここに書き残しておこうと思います。

# 環境

- Node 16.17.0
- Unity 2019.4.31f1
- TextMeshPro 2.1.6

環境構築等はGitHubや下記の記事を参考にしました
https://qiita.com/y-yoshinari/items/0666a391a496879b66bf

# useGlobalをつかう 
今回はUIからオブジェクトの回転する速度を変更できるようにします。
以下へ今回のサンプルを置いています。
https://github.com/IwamotoKakeru/unity-rotating-canvas/tree/sample-useGlobal



まずはUnityエディターからReactCanvasを選択します。 
![スクリーンショット 2023-07-16 1.42.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1538049/b6f1fbbb-62d3-79c1-b9b2-726cda3c20d8.png)

ReactCanvasのGlobalsのEntriesのSizeを1にして、適当な名前を入力します(この場合はBoard)。 そしてTSとやり取りしたいC#スクリプトがアタッチされているオブジェクトを選択します。
C#のスクリプトではやり取りしたい値、関数等をpublicにしておくだけでいいはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1538049/128530a1-3c04-b149-e3a6-2b3e691ef743.png)

最後にTS側のコードを以下のようにすれば値をUIに表示できます。
GetComponent関数の引数にはオブジェクトにアタッチされているスクリプト名を渡します。
今回の場合はBoardオブジェクトにアタッチされている"BoardMovement"です。

```ts 
import { render, useGlobals } from "@reactunity/renderer";

function App() {
    // useGlobalの設定
    const globals = useGlobals();
    const board = globals.Board.GetComponent("BoardMovement");

    return (
        <div>
            <text>{rotationSpeed}</text>
        <div/>
    );
    
    render(<App />);

}
```

値をUI側から変更したい場合には以下のようにするとできます。 
```ts 
import { useState } from "react";
import { render, useGlobals } from "@reactunity/renderer";

function App() {
  // useGlobalの設定
  const globals = useGlobals();
  const boardMovement = globals.Board.GetComponent("BoardMovement");

  // 回転速度用stateの宣言
  const [rotationSpeed, SetRotationSpeed] = useState(
    boardMovement.RotationSpeed
  );

  // UIでの変更を反映させる関数
  const handleRotationSpeed = (speedValue) => {
    // Stateへ反映
    SetRotationSpeed(speedValue);

    // C#側に反映
    boardMovement.RotationSpeed = speedValue;
  };

  return (
    <scroll>
      <text>{rotationSpeed}</text>
      <button
        onClick={() => handleRotationSpeed(rotationSpeed + 10)}
      >
        plus
      </button>
      <button
        onClick={() => handleRotationSpeed(rotationSpeed - 10)}
      >
        minus
      </button>
      <button onClick={() => handleRotationSpeed(0.0)}>
        reset
      </button>
    </scroll>
  );
}

render(<App />);
```



# 参考 
DiscordのReact Unity公式サーバーの会話履歴

https://discord.com/channels/884829138991603792/884829138991603795/927643678518947900
C言語で文字列の二次元配列の定義する方法。

# 参考にした問題
https://paiza.jp/works/mondai/array_primer/array_primer__string_output_step1

# 学んだこと
・文字列の二次元配列の定義する方法。
・文字列が何種類あるか判定する方法。

# 書いたコード
```C
#include <stdio.h>
int	main(void)
{
	char str[4][6] = {
	    "Hello",
        "paiza",
        "1234",
        "pa13"
	};
    
    int count = 0;
    count =  sizeof(str) / sizeof(str[0]);
    printf("%d",count);
	return (0);
}

```
Cプログラムで静的と動的ライブラリを作る&Makefileコピペ用

## 静的ライブラリと動的ライブラリの違い
```
静的ライブラリ:コンパイル時に実行可能ファイルに結合されるライブラリです。
動的ライブラリ:実行可能ファイルとは別のファイルとして存在し、実行時にリンクされます。
```
以上の違いがあります。
それぞれの利点として
静的ライブラリの利点は、実行時に追加のライブラリファイルが必要なくなります。これは実行可能ファイルに静的ライブラリのコードとデータが含まれているからです。
動的ライブラリの利点は実行ファイルのサイズが小さくなり、メモリの使用効率が向上します。これは複数。の実行可能ファイルが同じライブラリを共有できるからです。

## 動的ライブラリ

```Makefile:動的ライブラリ
CC = gcc
CFLAGS = -Wall -Werror -fpic

libmylib.so: mylib.o
	$(CC) -shared -o $@ $<

mylib.o: mylib.c
	$(CC) $(CFLAGS) -c -o $@ $<

```
`$@` : ターゲットファイル
`$<` : 依存関係の最初のファイル

このように書けます。この動的ライブラリを使うときは
`$ gcc -o myprogram myprogram.c -L/path/to/library -lmylib`


## 静的ライブラリ

```
CC = gcc
CFLAGS = -Wall -Werror -fpic

libmylib.a: mylib.o
    ar rcs $@ $<
	$(CC) -shared -o $@ $<

mylib.o: mylib.c
	$(CC) $(CFLAGS) -c -o $@ $<
```
この動的ライブラリを使うときは
`gcc -o myprogram  myprogram.c  -L. -lmylib`
これで作成できます
PSTファイルから添付ファイルを抽出するにはどうすればよいですか?

このブログでは、PST ファイルから添付ファイルを抽出する最良の方法について説明します。 抽出プロセスを実行するにはさまざまな方法があります。その 1 つは、自動化された<a href="https://xtraxtor.com/attachment-extractor/">Attachment Extractor</a>フトウェアを使用すること。

即時の解決策:<a href="https://xtraxtor.com/attachment-extractor/pst.html"> Xtraxtor PST Attachment Extractor</a> ソフトウェアを試し、無制限の抽出プロセスを実行します。 <a href="https://xtraxtor.com/attachment-extractor/pst.html">extract attachments from MBOX</a>, OST および他のファイル形式。

<h2>PSTファイルから添付ファイルを抽出するにはどうすればよいですか?</h2>

PST ファイル (Microsoft Outlook Personal Storage File) から添付ファイルを抽出するには、要件と技術的専門知識に応じてさまざまな方法を使用できます。 以下にいくつかのオプションがあります。

<b>1. Microsoft Outlook を使用した手動方法:</b>

システムで Microsoft Outlook を開きます。
[ファイル] タブに移動し、[開いてエクスポート] または [Outlook データ ファイルを開く] を選択します (正確な表現は Outlook のバージョンによって異なる場合があります)。
添付ファイルを抽出する PST ファイルを参照して選択します。
PST ファイルが Outlook に追加されると、電子メールや添付ファイルなどのコンテンツにアクセスできるようになります。
電子メールをダブルクリックして開きます。
抽出したい添付ファイルを右クリックし、「名前を付けて保存」または「すべての添付ファイルを保存」を選択して、希望の場所に保存します。

<b>2. サードパーティの PST ビューア/抽出ツールの使用:</b>

PST ファイルの抽出に特化したサードパーティ ツールがオンラインでいくつか入手可能です。 これらのツールは、添付ファイルを抽出するための高度な機能とユーザーフレンドリーなインターフェイスを提供します。
信頼できる評判の高い PST ビューア/抽出ツールを調査して選択します。
選択したツールをダウンロードしてシステムにインストールします。
ツールを起動し、添付ファイルを抽出する PST ファイルを開きます。
ツールのインターフェイスを使用して電子メール内を移動し、目的の保存場所を指定して添付ファイルを抽出します。
Outlook オブジェクト モデル (VBA、C# など) をプログラムで使用する場合:

<b>3. プログラミングに慣れている場合は、Outlook オブジェクト モデルを使用して添付ファイルをプログラムで抽出できます。</b>

Outlook 内で VBA (Visual Basic for Applications) などの言語を使用したり、Outlook Interop ライブラリを使用して C# などのより高度な言語を使用したりできます。
コードを通じて、PST ファイルにアクセスし、電子メールを繰り返し処理し、要件に基づいて添付ファイルを目的の場所に保存できます。
この方法では、より柔軟でカスタマイズのオプションが提供されますが、プログラミングのスキルが必要です。
何らかの方法を試す前に、PST ファイルから添付ファイルを抽出することは、適用される法律や規制に従って行われ、データにアクセスするために必要な権利と許可があることを確認する必要があることに注意することが重要です。
JetpackCompose+HorizontalPager+Indicator

# HorizontalPagerにIndicatorをつける

[前回](https://qiita.com/jozuko_dev/items/d025391e37351708a964)、HorizontalPagerを配置しました。これに、インジケーターをつけていきます。

完成イメージはこちらです。
![indicator_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/fc57bc90-8a89-9a91-8dc3-eb10335f736a.gif)

## データ構造
前回と同じですが、天気予報は、以下のデータ構造をしています。
```text
Forecast（天気予報）
    └ List<AreaOverview>(地域データ一覧)
        ├ name(地域名)
        ├ code(地域コード)
        └ overviews(今日と明日とあれば明後日の天気予報)
            ├ weatherCode(天気コード)
            ├ weather(天気の説明)
            └ wind(風の説明)
``` 
地域データ一覧をHorizontalPagerに表示し、インジケーターには、地域名を表示しようと思います。

```kotlin:ForecastScreen.kt
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ForecastPager(forecast: Forecast) {
    val pagerState = rememberPagerState()
    val pageCount = forecast.areaOverviews.count()

    HorizontalPager(
        pageCount = pageCount,
        state = pagerState,
    ) { page ->
        val areaOverview = forecast.areaOverviews[page]
        LazyColumn {
            items(items = areaOverview.overviews) { forecastOverview ->
                ForecastOverviewBox(forecastOverview)
            }
        }
    }
}
```
ForecastOverviewBoxは、「overviews(今日と明日とあれば明後日の天気予報)」の部分の表示Composeです。
ここにインジケーターをつけます。
```diff_kotlin:ForecastScreen.kt
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ForecastPager(forecast: Forecast) {
+    val coroutineScope = rememberCoroutineScope()
    val pagerState = rememberPagerState()
    val pageCount = forecast.areaOverviews.count()

+    LazyRow(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.Center,
+    ) {
+        items(pageCount) { page ->
+            val buttonColors = if (pagerState.currentPage == page) {
+                ButtonDefaults.filledTonalButtonColors()
+            } else {
+                ButtonDefaults.outlinedButtonColors()
+            }
+
+            Button(
+                modifier = Modifier.padding(4.dp),
+                border = BorderStroke(1.dp, MaterialTheme.colorScheme.primary),
+                colors = buttonColors,
+                shape = RoundedCornerShape(percent = 10),
+                onClick = {
+                    if (pagerState.currentPage != page) {
+                        coroutineScope.launch {
+                            pagerState.animateScrollToPage(page)
+                        }
+                    }
+                },
+            ) {
+                Text(forecast.areaOverviews[page].areaName)
+            }
+        }
+    }

    HorizontalPager(
        pageCount = pageCount,
        state = pagerState,
    ) { page ->
}
```
表示中ページかの判定は「if (pagerState.currentPage == page)」の部分です。
これがtrueの場合は塗りつぶしで、falseの場合は枠のみにしています。

ボタンをタップした際にページを切り替えている部分は、「pagerState.animateScrollToPage(page)」です。
scrollToPageだと、アニメーションなしで切り替わります。

## 参考
こちらを参考にしました。
https://github.com/android/snippets/blob/42a9747279e5dab074bdf24f60eb69c15886fe88/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt#L366-L398
Error: Unknown builtin plugin "cleanupIDs" specified. の対処（Astro.js） - 一言メモ

**原因は不明のままです**
日本語の解決策が見当たらなかったため、備忘的に残します。

# 対処方法

svgo バージョン 2.8.0 を追加します
```
npm install svgo@2.8.0
``` 

# 背景

Astro.jsのテンプレートである、cmd_theme(https://github.com/onadrog/cmd_theme) をインストールしたが、ビルド時に下記エラーが発生。

```
error   [astro-icon] Unable to load icon "rss"!
Error: Unknown builtin plugin "cleanupIDs" specified.
```

調べたところ、他のテンプレートで同様の事象が発生していることがわかった。
https://github.com/onwidget/astrowind/discussions/78
ここの解決策である下記を実行したところ、コンパイルに成功した。
https://github.com/natemoo-re/astro-icon/issues/72#issuecomment-1369597045
Goのテストコードを書く時パッケージ名に_testをつけるべきか？

Goでテストを書きたい時にテストコードには`_test`のsuffixをつける時と

同一パッケージでテストコードを書いている例があります。

どちらが正しい書き方なのか調べてみました。

## _testをつけている例

stringsパッケージでは`_test`のsuffixをつけてテストコードを書いています。
https://go.dev/src/strings/search_test.go

``` go
// Copyright 2012 The Go Authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

package strings_test
```

## _testをつけていない例
bzip2パッケージでは`_test`をつけずにテストコードを書いています。

https://go.dev/src/compress/bzip2/bzip2_test.go

``` go

// Copyright 2011 The Go Authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

package bzip2
```

## _testをつけるのとつけないので何が違うのか？

`_test`がついていると別のパッケージとして認識されてしまいprivateな関数の
テストを行うことができません。




例：
```sample.go
package sample
func add(a int, b int)int {
    return a+b
}
```

```sample_test.go
package sample_test

import "testing"

func Test_add(t *testing.T) {
	type args struct {
		a int
		b int
	}
	tests := []struct {
		name string
		args args
		want int
	}{
		// TODO: Add test cases.
	}
	for _, tt := range tests {
		t.Run(tt.name, func(t *testing.T) {
            // addはpackage内変数なのでsample_test.goから呼び出すことができない
			if got := add(tt.args.a, tt.args.b); got != tt.want {
				t.Errorf("add() = %v, want %v", got, tt.want)
			}
		})
	}
}
```



## 使い分けはどうすべきなのか

goでテストコードを書くときは`_test`をつけるべきなのでしょうか？

それともつけずに同一パッケージ内で行うべきなのでしょうか？

Stack Overflowに似た質問がありました。

https://stackoverflow.com/questions/19998250/proper-package-naming-for-testing-with-the-go-language

> The fundamental difference between the three strategies you've listed is whether or not the test code is in the same package as the code under test. The decision to use package myfunc or package myfunc_test ?in the test file depends on whether you want to perform white-box or ?black-box testing.
There's nothing wrong with using both methods in a project. For instance, you could have myfunc_whitebox_test.go and myfunx_blackbox_test.go.

すなわち
テストファイルでのパッケージの選択は、ホワイトボックステストかブラックボックステストを行いたいかどうかによって異なり、
プロジェクトで両方の方法を使用することは問題ないとのことでした。

### 用語説明

#### ホワイトボックステスト

>ホワイトボックステストは、すべてのプログラムが意図したとおりに動作しているかを確認するためのテストです。プログラムの構造やエンジニアが作成したロジック、制御の流れなどが正常かどうかを検証するため、「作り手側のテスト」といわれています。

出典：https://hnavi.co.jp/knowledge/blog/white-box-test/

#### ブラックボックステスト

>ブラックボックステストは、システム自体の仕様を満たしているかどうかを確認する機能のテストです。画面表示などユーザーインタフェースの不具合やレイアウト崩れなど、正しい出力ができているかを確認するため、「ユーザー側のテスト」といわれています。

出典：https://hnavi.co.jp/knowledge/blog/white-box-test/


プロジェクト全体でテストコードは`_test`をつけるようにするつけないようにするという
ルール決めを行うのではなくホワイトボックステスト （private関数も含めてpackage内の関数全ての挙動を確認したい時）
かブラックボックステスト（packageを外部から呼び出すことを想定してexport
している関数に関しての挙動を確認したい時）どちらをテストしたいかによって
`_test`をつける、つけないは判断すべきだということでした。
SF SymbolsでButtonを作ろう！

# はじめに
#### おしゃれなデザインのButtonのアプリにしたい！
と思い、SF Symbolsを用いてButtonの作成方法を調べてみました。
シンボルの大きさを変更したいとなると、Figmaを用いる必要がありました！
## 1.SF Symbolsアプリをダウンロードする！
https://developer.apple.com/design/resources/
## 2.Figmaをダウンロードする!
https://www.figma.com/ja/downloads/
#### ※私のつまずき！
Figmaをブラウザー上で使おうとすると、3のSF Proフォントをダウンロードしても、フォントが選択できるようにならなかった...アプリをダウンロードしましょう！
## 3.SF Proフォントをダウンロードする!
https://developer.apple.com/fonts/

Figma上でSF Symbolsを表示させるにはこのフォントをダウンロードする必要がありました！
## 4.SF Symbolsのアプリ上からButtonにしたいイメージをコピーする！
![644e418f8443f3a1d7bac6636bedd8b7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/f80cfbaa-ab87-1243-70b4-46d3a3edae67.png)
使いたいシンボルをクリックして選択状態にし、⌘＋Cでコピーする！
## 5.Figmaにコピペする！
![ee2d5d2958869d96ca296f1334c128ce.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/a71a1910-a370-69de-5c4e-7c9e38f16cf8.png)
① コピペしても上手く表示されないので、TextをSF Proに変更する！
② 大きさをRegularのところで変える！
③ Fillの下のところでシンボルの色を変更！
④ デザインが完成したらExportを押し、ダウンロード完了！
## 5.Xcodeで使ってみよう！
① Assets.xcassetsに名前をつけてImageSetする！
![2903738a87ce58d5c14ef14043ccb38d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/60cfa7cc-4790-8ea3-3e96-d842cbcebc7b.png)
② ButtonをStoryboardにおく!Imageにさっきの名前を入力して追加！
![fcb3102d53a20d0ecb58ef930d800196.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/223d20e7-874a-4963-a618-940a1bcd2212.png)
#### 作りたかったおしゃれなButtonができました:grin:
## 　この記事の参考文献
https://spinners.work/posts/kudakurage-sf-symbols-20191025/#%E3%82%B7%E3%83%B3%E3%83%9C%E3%83%AB%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E3%81%AE%E3%81%AF%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E3%81%A8%E3%81%8D
2023年：HTMLの仕様の変遷に思うこと（ポエム）

# １．HTML Living Standard という標準仕様

こちらの記事を読んで、改めてHTMLの標準仕様についてキャッチアップしました。
ある程度Webアプリが作れると、このあたりの動きに直接影響はしないけど、知っておくべき仕様については、おざなりにすることが多いです。

こちらの記事を読んで、なるほどと思いました。

https://qiita.com/tanimoto-hikari/items/ef1c3bdca2ab570c96b3

現在は、W3Cの策定した仕様ではなく、「WHATWG（Web Hypertext Application Technology Working Group）」という、Apple、Mozilla、Opera、、Microsoftも加わっている団体が作っていると考えて良さそうですね。


https://launchcart.jp/blog/html5%E3%81%8Cw3c%E3%81%8B%E3%82%89whatwg%E3%81%8C%E7%AD%96%E5%AE%9A%E3%81%99%E3%82%8Bliving-standard%E3%81%AB%E6%A8%99%E6%BA%96%E4%BB%95%E6%A7%98%E3%81%8C%E6%9B%BF%E3%82%8F%E3%81%A3%E3%81%A62/

# ２．HTML5、W3Cの仕様と違うのか？（=> ほとんど同じという指摘あり）

以下の記事に記載がありますが、ほとんど同じ仕様で、タグや属性が一部違うだけのようです。

https://seolaboratory.jp/49735/

とりあえず、ほとんど一緒だけど、今は、HTML Living Standardが標準だと考えてもいいのかなと考えています。
いや、ここが大きく違うんだよ！という指摘があれば、コメントで頂きたいです。



# ３．HTMLの仕様の変遷

HTML Living Standardは、HTML5と大きく変わらないと個人的には感じています。そして、W3Cが策定したHTML5とHTML Living Standardは、断絶するものではなく、純粋にこれまでの変遷の帰結だと考えています。その前提で、HTML Living Standardまでの仕様の変遷についての感想を書きます。

## （１）１つのコンテキストの情報を構造化するのがスタート

HTMLは、元々、論文をマークアップして、その構造を定義するために作られたと理解しています。
目録にするために、文書のパーツを特定化することや、読みやすさに寄与したと思います。

https://ec-orange.jp/ec-media/?p=12988


## （２）インターネット上での検索最適化

それがインターネットでは、情報提供手段として使われるようになり、より"検索"の利便性向上になるように仕様が補完されてきた。

新しいタグに、searchがあるが、これは上記を強く意識したものだと思う。


## （３）論文とは異なるレイアウト

そして、論文とは違う、レイアウトがWebサイトでは採用されるようになる。例えば、ヘッダやフッタ、左メニューなどは論文にはないレイアウト。フッタは論文でも、注釈としてあるにはありますが。

このレイアウトの変化に対応したタグとしては、menu、header、footerなどに該当すると思います。

## （４）アプリのための、静的な構造だけでない動的な構造を定義する仕様

さらに、単なる文書を提供するにとどまらず、アプリのUIを定義するようになりました。
それは、当初、文書の構造化の為に作られたところからは大いなる飛躍にも思います。
formタグもとより、属性などをみても、HTML5やHTML Living Standardは、どちらかというとアプリを意識したものは多いと思います。

data、draggableなどの属性を挙げることができると思います。

こうした、HTMLは使われる場所が広がることに応じて、より細分化し、仕様が追加されている。

タグを上手く使うことで、マークアップだけでなく、JavaScript やTypeScriptでのコーディングのセマンティックをより向上させることができる。


# ３．コーダー（AI含む）にとって判別しやすいセマンティック・マークアップ

初期のころから、単なる言葉に対して、文書や人との関わりのなかでの関係性や役割を定義してきたマークアップ。

単なる論文からWebアプリへと利用が変遷していくことで、セマンティックの細分化に対応してきたのが、HTML仕様の変遷だと思います。

セマンティックを意識することは、Webプログラマーにあっては、「可読性」を高めるうえでもとても大切なことだと個人的には感じます。

極論、divタグであらゆるものを定義してもブラウザ上ではそれなりに動きます。でも、コーディングする上で、一つ一つの単語や単語のまとまりがどのような役割をしているのかを認識することは、今後以下のような点でメリットがあるのではと感じています。

それは、AIによる情報の解釈です。AIからすれば、文脈をみて判断することができるのでわざわざマークアップをする必要はないかもしれません。ただ、WebサイトやWebアプリは、「文章」だけで構成されるわけではなく、「Webサイト・Webアプリ」というコンテキスト・レイアウトに依拠した構造を持っています。
それを明確に判別できるのが、マークアップではないかと思います。

セマンティックマークアップは、「コードレベル」で意味を把握していくAIやプログラマーにとっては、作業効率化のために必要なのではと、「漠然と」感じます。

特に、明確な情報提供の記事ではないですが、個人的な感想となります。


https://developer.mozilla.org/ja/docs/Glossary/Semantics
MVCを擬人化してみた

# ルーティング、コントローラー、モデル、マイグレーション、ビューの擬人化
## | 思考整理 |
新しいアプリケーションの構造を考える際、どことどこにコントローラーが必要なんだ？
必要なモデルは？と混乱したため、擬人化してみた。

## | 場面設定 | 市役所（アプリケーション）
#### ルーティング：総合受付
役割：リクエストに対応する最適な窓口を案内する
説明：ルーティングは、今日はいかがなさいましたか？とそれぞれのリクエストに対応する最適なコントローラーの窓口（アクション）を案内します。総合受付のような役割を果たしています。
総合受付なので、市役所（アプリケーション）には１つだけで十分です。
#### コントローラー：窓口受付
役割：リクエストに対応する最適な処理を案内する
説明：コントローラーは、受け取ったリクエストに基づいて適切な処理を行います。今日はいかがなさいましたか？とリクエストに応じた書類（ビュー）を渡します。
new/create:住民登録届 edit/update:住所変更届 destroy:転居届 show:住民票の写し発行　など
内容ごとにやることがことなるので、取り扱う内容ごとに複数必要です。
※同じnew/createでも住民登録と保育所利用者登録は違う窓口（コントローラー）
#### ビュー：申込用紙、案内チラシ
説明：ビューは、市民が見る情報そのものです。申込用紙（form）に記入したり、情報を閲覧できるようにします。
#### モデル：窓口の人
役割：記入内容のチェックを行う
説明：モデルは申込用紙の記入内容のチェック（バリデーション）を行います。
扱うデータベースごとに必要なので、市役所（アプリケーション）内の各窓口に専属の人がいます。
#### マイグレーション：書類やデータ管理の人
説明：マイグレーションは窓口の先輩（モデル）に言われたとおりに適切な場所にデータをファイリングしたり、データベースにデータを入れたりします。
データベースごとに専属の係が必要です。住民登録（user）の係が投書（comment）の管理はしません。縦割りです。 

読んでいただいてありがとうございました。