OmniAICreator/Qiita-1.07M huggingface dataset:
脱SFDCプロジェクト

こんにちは。

テックリードのTerukiです。

以前投稿した[脱PHPプロジェクトが完了しました](https://qiita.com/omt_teruki/items/eb0d953198120a2dc7c2)という記事でSFDCの脱却するという話を書きました。

https://qiita.com/omt_teruki/items/eb0d953198120a2dc7c2

現在絶賛移行作業中なのでその話を共有できたらなと。


# なぜ移行しようとしているのか

Oh my teethでは顧客管理としてSalesforceと自社のデータベースを併用しています。

24時間365日稼働するシステムにSalesforceを併用する上では下記のような課題感があります。

- 可用性
- レスポンスタイム
- 開発効率

## 可用性

脱PHPプロジェクトの記事でも触れていますが、Salesforceは結構可用性が厳しいです。
11月の大規模障害は大変でしたが、その後もちょこちょこと503がAPIから返ってきます。

今月も11日に数十分程度エラーが発生していました。

https://status.salesforce.com/incidents/13869

幸い実装していた指数バックオフによるHTTPリクエストのリトライにより業務影響はギリギリ発生しませんでしたが、通知チャンネルに警告が大量に出てきていたのでその対応が大変でした。。

## レスポンスタイム

SalesforceはSOQLという独自SQLを使ってデータを取得してきますが、これはHTTPリクエストで行われるので直接データベースにTCP接続するのとではレスポンスタイムが不利です。

また、アクセストークンは定期的にリフレッシュする必要があるためトークンが失効したら新しいトークンを取得しにいかないといけません。

この処理はだいたい1秒程度かかるのでこのタイミングでは少々待たされます。


## 開発効率

当たり前ですが、自社のデータベースのSQLとJOINできるわけはないので一旦自社データベースで取得してきたレコードに対してSalesforceのデータを後付けしていくようなコードを書いています。

これだけで結構厳しいのですが、SalesforceへのアクセスはSOQLというSQLライクな言語で記述するのでこれもなかなかです。

SOQLもSQLインジェクションされないようなコーディングが必要ですし、文字列なのでコンパイル時にTypoに気づくこともできません:sob:

# 移行方針

上記問題を解決するために、Salesforceで管理していたデータをすべて自社データベースに移行することにしました。

とはいえ0、100の切り替え作業はリスクが大きすぎるので、下記の流れで移行を行っています。

1. SFDCにあるオブジェクトと同じスキーマのテーブルを自社データベースに作成
1. 自社データベースにデータ移行
1. SFDCオブジェクトを更新する処理すべてに自社データベースも更新するように処理追加
1. SFDCオブジェクトを参照する処理をすべて自社データベースを見るように変更
1. SFDCオブジェクト更新処理を削除

これで比較的安全に移行作業を行うことができます。

記事執筆時点で7割程度の移行進捗ですが、残りもこの流れで対応予定です。

# その他のSFDC要素

SalesforceはリッチなUIやレポート出力が非常に便利です。

ここに触れずに記事を終えるわけにはいきません。
便利ゆえにこれらを移行するのは非常に大変です。

私達はチームの技術力に物を言わせてSalesforceのUIでできることをReactで自前実装しました。

レポート出力については可能なものはLooker Studio化しています。

各部共通化されたコンポーネントをひたすら使いまわして綺麗なUIを作成しています。

社内向けなのでスクリーンショットなどは載せられないですが、最後はパワープレイです:muscle:


# おわりに

なんだかSalesforceネガキャン記事になってしまっている感はありますが、そもそもCRMとしての便利機能がたくさんあり、それ故に多数の企業で採用されていると思います。

そんな中、脱SFDCという大規模な開発を伴う意思決定を出来るのは、SFDCでできる機能のすべてを自前開発できるTechチームがあるからに他なりません。

私達Techチームとしては可用性という絶対に譲れない部分があるため脱SFDCを進めていますが、創業から今まで5年近く共にしてきました。
これまで頑張ってくれたことに感謝しつつ、今後は自前で頑張っていこうと思います。

あと残り少ないですが、Salesforceさんよろしくお願いします:pray:

# Oh my teethについて
[Oh my teeth](https://www.oh-my-teeth.com/?tags=qiita)では未来の歯科体験を創るために日々活動しています。

Techチームではより良いユーザー体験を提供するべく、Webフロントエンドからバックエンド、スマホアプリに機械学習モデルなど、さまざまなプロダクトを開発しています。

一緒に未来の歯科体験を創りませんか？興味がある方は是非こちらを確認してください。

https://oh.careers/

カジュアル面談も可能なので気軽に応募してみてください！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/0138b492-e02b-852e-61fa-fc065b53d285.png" width="450" />
JasperReportで簡単なPDFを作成してみた（1/3）

# はじめに
帳票作成のために **JasperReports** を利用する機会があったため、その環境構築から簡単なPDFの作成までの手順を記録しておこうと思います。  
本記事では、 **Jaspersoft Studio** を用いたレポートデザインの作成、および **Java** を使ったPDF生成までの基本的な流れを記載します。  

**JasperReportsを利用したPDF作成の導入的な内容**となっておりますので、JasperReportsに初めて触れる方にとって、基本的な流れをつかむ手助けになれば幸いです。

また、JasperReports関連のツールについても簡単に紹介しておきます。  
- **Jaspersoft Studio**
    - Jaspersoft Studioは、帳票デザインをGUIで作成できるツールです。さまざまなデータソースに対応しており、作成したフォーマット（.jrxml）は再利用やカスタマイズが容易です。
    - 本記事では、Jaspersoft Studioを利用してレポートフォーマットを作成します。
- **JasperReports Library**
    - JasperReports Libraryは、完全にJavaで実装されたレポートエンジンです。このライブラリは Java のコードから直接利用できるため、アプリケーションに組み込んでレポート出力機能を簡単に追加できます。
    - 本記事では、Jaspersoft Studioで作成したレポートフォーマット（.jrxml）にデータを埋め込み、PDFとして出力するために利用します。

参照：https://community.jaspersoft.com/download-jaspersoft/community-edition/

※調査の中でiReportを利用した方法も見つけましたが、現在はJaspersoft Studioの利用が推奨されているようです。
> As of version 5.5.0, Jaspersoft Studio will be the official design client for JasperReports. iReport will remain as a supported product in maintenance-only mode until December 31, 2015, meaning we will continue to fix critical defects in upcoming releases but no new features will be added to the iReport client. Continue to maintain your existing reports with the new Jaspersoft Studio!
https://community.jaspersoft.com/knowledgebase/getting-started/getting-started-ireport-designer/

# 目次
1. [**環境準備**](#1-環境準備) ※本記事  
    * [Jaspersoft Studioのインストール](#jaspersoft-studioのインストール)
    * [IntelliJ IDEA Communityのインストール](#intellij-idea-communityのインストール)
2. PDFフォーマット作成（Jaspersoft Studio）※次回
3. PDF生成（Java）※次々回

# 1. 環境準備
### 実行環境
* **Windows11**
### Jaspersoft Studioのインストール
**1. [Jaspersoft Communityの登録](https://community.jaspersoft.com/register/)を行う。**<br>
**2.  [ダウンロードページ](https://community.jaspersoft.com/download-jaspersoft/community-edition/jaspersoft-studio_windows_7.x)からJaspersoft Studio community editionをダウンロードする。**<br>※Windows版で実施。2025/3/10時点でバージョンは7.0.1<br>
**3. zipファイルがダウンロードされるので解凍する。**<br>
**4. 解凍したフォルダ内に『**Jaspersoft Studio.exe**』というファイルがあるので、ダブルクリックしてJaspersoft Studioを起動する。**<br>
**5. **1**で登録したメールアドレスとパスワードでログインする。**
<img width=75% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4030605/6c44a5f0-c388-4f34-a261-79f9d4dc6660.png"><br>

**6. 正常にログイン完了すると、以下のような初期画面となります。**
<img width=90% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4030605/5e219e31-340e-456b-8bfa-604a9fea16f6.png">

### IntelliJ IDEA Communityのインストール
以下を参考にインストール
[【2024年版】IntelliJ IDEAのインストール方法（Windows & Mac対応）](https://codeforfun.jp/how-to-install-intellij-idea/)


## 参考文献
1. [【2024年版】IntelliJ IDEAのインストール方法（Windows & Mac対応）](https://codeforfun.jp/how-to-install-intellij-idea/)
1. [【JasperReports】Jaspersoft Studioのインストール](https://qiita.com/tthnd/items/6b6d253edfe13e4f0a28)
1. [Jaspersoft Community](https://community.jaspersoft.com/)
1. [Jaspersoft community edition](https://community.jaspersoft.com/download-jaspersoft/community-edition/)
期待値と自己情報量から理解する交差エントロピーとKLダイバージェンス

KLダイバージェンスについて勉強したので、それの備忘メモ。

# 前提

- 2つの前提がある。この2つを前提に交差エントロピーが定義される。
    - 前提①：期待値の計算方法の定義
    - 前提②：自己情報量の定義

## 前提①：期待値の計算方法の定義

- 確率密度関数を $p(x)$ とする。
- まずは簡単なところからいくと、平均の期待値は、

$$
E[x] = \int p(x) \times xdx
$$

- 分散の期待値は、

$$
V[x] = \int p(x) \times (x-\mu)^2dx
$$

- 一般化すると、「**確率密度関数 $p(x)$ の影響下において、ある関数 $f(x)$ の期待値は以下のように計算できる**」ということ。

$$
E[f(x)] = \int p(x) \times f(x) dx
$$

- そして、KLダイバージェンスを理解するに当たって重要なのだが、この定義に従うと次のことができる。
- それは2つの関数の期待値の差分の計算である。
- いま、以下の3つの関数があったとする。
    - 確率密度関数： $p(x)$
    - 関数1： $f(x)$
    - 関数2： $g(x)$
- $f(x)$ と $g(x)$の期待値の差分を計算しようとしたら、以下のように計算できる。

```math
\begin{aligned}
"g(x)とf(x)の期待値の差分" 
&= \int p(x) \times g(x) dx - \int p(x) \times f(x) dx \\
&= \int p(x) \times \{ g(x)  -  f(x) \} dx
\end{aligned}
```

後述するKLダイバージェンスの結論を先に言えば、 $g(x) = -log(q(x))$、 $f(x) = -log(p(x))$ とすることで、KLダイバージェンスの式となる。 

## 前提②：自己情報量

- 情報量の定義としては、驚きの大きさであったり、分散の大きさ（予測しづらさ）、乱雑さなどがあるが、これを定量化するための定義式が、以下である。
    - ある確率密度関数 $p(x)$ の自己情報量は、
    
    $$
    自己情報量 = -log(p(x))
    $$
    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687015/8ea5a466-64ab-4fa3-9c5b-b9178e3b89f6.png)

    
    - 確率密度関数 $p(x)$ はあくまでも確率密度関数であり、確率そのものではないため、 $0<= p(x)$ である。1以下という制限はない。
    - 関数形からわかるように、 p(x) が小さいなるほど、 $-log(p(x))$ は大きい。p(x) が大きいなるほど、 $-log(p(x))$ は小さい。
    - こうすることで、以下の定義に従う指標ができあがった。
        - 高確率で起きる事象は情報量が少ない。⇒ 驚きが小さい
        - 低確率で起きる事象は情報量が多い。 ⇒ 驚きが大きい
    - これを自己情報量、と定義している。

# エントロピーの定義とKLダイバージェンス

## エントロピーの定義

- 上記の前提①②を組み合わせて、ある確率 $p(x)$ の情報量の期待値を計算することができる。
    - $f(x) = -log(p(x))$ と置けば、
    - 期待値の定義式（前提①）を使って、 $p(x)$ の情報量の期待値は、
    
    ```math
    \begin{aligned}
    p(x)の情報量の期待値
    &= \int p(x) \times f(x) dx \\
    &= \int p(x) \times \{-log(p(x))\} dx
    
    \end{aligned}
    
    ```
    
    - これが、エントロピーである。

## KLダイバージェンス

- KLダイバージェンスが開発されたモチベーションは、『ある確率 $p(x)$ を別の確率（ $q(x)$）で置き換えたい！でも近似したときに、元の確率分布 $p(x)$ からどれくらい情報が無くなってしまうのか、定量化できないか？』というところから始まった。
    - ある確率を別の確率で近似したい！となるシチュエーションがそもそもどういう時なのか？という疑問があるかもしれない。
    - 実際にある。例えば、ベイズ推論で事後確率分布を直接求めることが難しいので、変分推論（変分近似）と呼ばれる方法で確率密度を計算しやすい分布で近似することはよく行われている。
- 上記のモチベーションを考えると、以下の①②を考えれば良さそうだとなる。
    - ①元の $p(x)$ の影響下で、
    - ② $p(x)$ と $q(x)$ のそれぞれの情報量がどれくらい失われるか？
- ①②の結論の前に、 $p(x)$ の影響下で $p(x)$の情報量、 $q(x)$ の情報量がそれぞれどのように定義されるかを考えてみると、
    - $p(x)の情報量 = -log(p(x))$ である。これが $p(x)$ の影響下で、という条件がつけば、 $p(x)の情報量"の期待値" = \int p(x) \times \{-log(p(x)) \} dx$
    - 同様に、$q(x)の情報量 = -log(q(x))$ である。これが $p(x)$ の影響下で、という条件がつけば、 $q(x)の情報量"の期待値" = \int p(x) \times \{-log(q(x)) \} dx$
- と定義される。
- したがって、これらの情報量（の期待値）の欠損を考えると、以下のように定義できる。

```math
\begin{aligned}
"q(x)とp(x)の情報量の期待値の差分" 
&= \int p(x) \times \{-log(q(x))\} dx - \int p(x) \times \{-log(p(x))\} dx \\
&= \int p(x) \times \{ \{-log(q(x))\}  -  \{-log(p(x))\} \} dx \\
&= \int p(x) \times \{ \{-log(q(x))\}  +  \{log(p(x))\} \} dx \\
&= \int p(x) \times log \frac{p(x)}{q(x)} dx
\end{aligned}
```

- これがまさにKLダイバージェンスの定義である。
【PL入門】損益計算書の読み方 - エンジニアでもわかる収益と利益の仕組み

【PL入門】損益計算書の読み方を備忘録的にエンジニアでも理解できるようまとめてみました。収益・費用・利益の関係や各利益指標を図解化。自分の復習用だったものですが、プロジェクトのコスト構造や会社の財務状況に興味ある方の参考になれば幸いです。🙏

## 1. 損益計算書(PL)とは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/06762f59-bbe4-4804-8572-9a33cdb7c8ee.png)

- 企業がある一定期間にどのくらいの収益(売上)があり、どれだけの費用(コスト)を使い、その結果どの程度の利益が残ったかを示す財務諸表。
- 会計期間は通常1年単位（例：1月〜12月、4月〜翌3月など）。
- 事業活動の成果を数字で可視化し、売上に対して費用がどのくらいかかっているのか、何が原因で利益が増減しているのかを把握できる。

## 2. PLの基本構造

![pl-basic-structure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/e01f428d-ff18-4a52-bbbe-84010afa6808.png)

PLは大きく「収益」「費用」「利益」に分解され、主な項目は以下の通り：

1. **売上高(Revenue)**
   - 主たる事業で得られる収益
   - ソフトウェア販売ならライセンス収入、SaaSなら月額利用料など

2. **売上原価(Cost of Sales)**
   - 製品やサービスを提供するために直接必要となる費用
   - 開発者の人件費、サーバー費用、外注費など

3. **販売費及び一般管理費(販管費, SG&A)**
   - 営業活動に関わる費用や会社運営に関わる費用
   - エンジニア以外の人件費、オフィス費用、広告費など

4. **営業外収益・営業外費用(Non-operating Income/Expenses)**
   - 本業以外で発生する利息、配当、支払利息など

5. **特別損益(Extraordinary Gains/Losses)**
   - 災害損失や固定資産売却益など、通常の事業活動とは異なる取引による損益

6. **法人税等(Income Taxes)**
   - 法人税や住民税、事業税など

## 3. 利益の種類と違い

![profit-types.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/0521b4ac-6997-4eb3-882a-e2c9a8c43ab7.png)

1. **売上総利益(粗利益, Gross Profit)**
   - 計算式：売上高 - 売上原価
   - モノの売買やサービス提供による直接コストを差し引いた利益

2. **営業利益(Operating Income)**
   - 計算式：売上総利益 - 販売費及び一般管理費
   - 本業で稼いだ利益（会社の主たる事業活動による利益）

3. **経常利益(Ordinary Income)**
   - 計算式：営業利益 + 営業外収益 - 営業外費用
   - 会社全体の平常時の収益力を示す

4. **当期純利益(Net Income)**
   - 計算式：経常利益 + 特別損益 - 法人税等
   - 最終的に残った利益（企業が最終的にどの程度稼いだか）

## 4. 減価償却費とその影響
- **減価償却費**：固定資産の取得費用を法定耐用年数にわたって分割計上する費用
- キャッシュの支出はすでに終わっていても、PL上は複数年にわたって費用化される。
- 開発費の資産計上によって、見かけの利益が変動する可能性がある。

## 5. PLから読み取れる組織の収益性指標

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/54eb4f3e-8344-4dd8-9dc0-636368d7d9cb.png)

1. **売上高成長率**
   - 前期比や前年同期比でどれくらい売上が伸びているか
   - 新規プロダクトの伸びを測る指標

2. **売上総利益率(Gross Profit Margin)**
   - 売上総利益 ÷ 売上高
   - 原価やコスト構造が適正かを示す

3. **営業利益率(Operating Margin)**
   - 営業利益 ÷ 売上高
   - 本業の収益性を測る

4. **経常利益率(Ordinary Income Margin)**
   - 経常利益 ÷ 売上高
   - 借入金の利息負担など金融活動含めた収益性を示す

5. **当期純利益率(Net Profit Margin)**
   - 当期純利益 ÷ 売上高
   - 企業が最終的にどの程度稼いだかを示す

## 6. まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/846e77a4-25c8-48c5-bc34-591c2dafb7b1.png)
- PLは「収益 - 費用 = 利益」で構造を理解する。
- 【粗利益】→【営業利益】→【経常利益】→【当期純利益】のステップを把握する。
- 減価償却費で見かけの利益が変わるため、キャッシュアウトとのズレに注意。
- PLから売上高成長率や利益率を算出することで、組織や事業の収益性を定量的に把握できる。

エンジニアとして、開発コストやサーバー費用がどの費用に該当するか、どのくらい利益に影響しているかを理解しておくと、より効果的なプロジェクトの見積やコスト管理ができるようになります。
zfs で作ったけど名前変更したい時の手順

そこらに転がっちょる man の抜粋
所謂、忘備録じゃな
例：
pool 名 → zroot
src_14.2 を作成し、src_13.5 へマウントポイントと共に変更するのが目的
***
# zroot に /usr/src_14.2 を作ってみる
```shell:mountpoint も指定して作成
zfs create -omountpoint=/usr/src_14.2 zroot/usr/src_14.2
```
***
# ファイルシステム名を変更
```shell:zroot/usr/src_14.2 → zroot/usr/src_13.5
zfs rename zroot/usr/src_14.2 zroot/usr/src_13.5
```
***
# マウントポイントの変更
```shell:/usr/src_13.5 → /usr/src_13.5
zfs set mountpoint=/usr/src_13.5 zroot/usr/src_13.5
```
zfs のお勉強と、チョイチョイ間違ってしまうので、書き留めておくw
【Mac】TUIでGitHubのIssueやPRを検索する方法

`gh-dash`を使用するとターミナル上でGitHubのIssueやPRを表示できます。

https://github.com/dlvhdr/gh-dash

## インストール

`gh`コマンドをインストール

```terminal
brew install gh
```

`gh-dash`をインストール

```terminal
gh extension install dlvhdr/gh-dash
```

## 使い方

以下のコマンドを使用するとIssueやPRの検索画面が表示されます。

```terminal 
gh dash
```

![screen-shot-76.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/77e52c14-cae4-44ab-9dbe-32973fb9680d.png)
【VSCode】コードの差分を比較する

# 記事概要
VSCodeでコードの差分を比較する方法について、まとめる。

# VSCodeとは
- 正式名称は、Visual Studio Code
- 無料で利用できるテキストエディタ

# 前提
- VSCodeはインストール済みである

# 手順
1. 見本のコードをコピーする
1. 自分のコードがあるファイルをVSCodeで開く
1. `command + shift + P`でコマンドパレットを開く
1. `>`に続けて`Compare Active File With Clipboard`を入力して選択する
1. 差分がハイライトで表示される

# 備考
- VSCodeのインストールは、[こちらの記事](https://qiita.com/likapantrip/items/16cce74e3160a2acf560)を参照する
Chakra UI V2のスタイリングが効かない件【ChakraProvider】

## 問題
Chakra UI V2をインストールし、Spinnerコンポーネントを使用した際に、ブラウザに表示されているSpinnerコンポーネントにスタイリングが効いていない

## 解決方法
### 公式ドキュメント

https://v2.chakra-ui.com/getting-started

公式ドキュメントを見たらルートファイルにChakraProviderコンポーネントで囲むように記載がありました。

この作業をせずに、単純にChakra UIのコンポーネントを使用したいファイル内でインポートするだけではスタイリングが当たらないようです。

``` react
import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
  // ChakraProviderコンポーネントで囲む
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}
```



## まとめ
答えは公式ドキュメントの冒頭に記載されていました。
まずは落ち着いて、公式ドキュメントを読むのが近道ですね。
高品質なボイスクローンZonosをWindowsで動かすメモ


高品質なボイスクローンのZonosをWindowsで動かそうと思ったら苦労したのでメモ。

https://github.com/Zyphra/Zonos

日本語も対応しており、かなり高品質な音声合成を体験できました。

# 環境
- Windows11
- GPU無し
- [uvインストール](https://github.com/astral-sh/uv)済み

# うまくいった方法
1. `uv sync`
1. [espeak-ng](https://github.com/espeak-ng/espeak-ng/releases)のインストール
    - `espeak-ng.msi`をダウンロード&インストール
    - デフォルトで`C:\Program Files\eSpeak NG`にインストールされた
1. ソースコードの修正
    - `./gradio_interface.py` の最初に追加
        ```python
        import os
        os.environ["PHONEMIZER_ESPEAK_LIBRARY"]=r"C:\Program Files\eSpeak NG\libespeak-ng.dll"
        import torch._dynamo
        torch._dynamo.config.suppress_errors = True
        ```
        - 最初の2行は、[ここ](https://bootphon.github.io/phonemizer/install.html)に書いてあった`RuntimeError: espeak not installed on your system`の対応策
        - 次の2行は、実行時`You can suppress this exception and fall back to eager by setting:`によって表示された対応策
            - なお真面目に`RuntimeError: Compiler: cl is not found.`に対応しても、次には`UnicodeDecodeError: 'utf-8' codec can't decode byte 0x8d in position 214: invalid start byte`のエラー（shift-jisとutf-8の文字コード問題）が出てきて面倒なので、この策に落ち着いた
    - `.venv/Lib/site-packages/phonemizer/backend/espeak/wrapper.py`のset_voice関数内240行目付近を修正する
        ```python
        for voice in self.available_voices():
            if (voice.language not in available) or (voice.language=="ja"):
                available[voice.language] = voice.identifier
        ```
        - [ここ](https://github.com/open-mmlab/Amphion/issues/323)に書いてあった`RuntimeError: failed to load voice "ja"`の対応策
1. `uv run gradio_interface.py`
1. http://localhost:7860/ へのアクセス
    - 表示される`http://0.0.0.0:7860`はアクセスできないのでlocalhostを使う
1. WebUIの`Text to Synthesize`に合成したい日本語のスクリプトを記入し、`Language Code`を"ja"にして`Generate Audio`を押す
    - 1,2分かかって、デフォルト声で合成された音声が再生される
    - `Optional Speaker Audio (for cloning)`に合成したい人の声サンプルをmp3等でいれるとその人の声で合成ができる


# だめだった方法
- espeak-ngインストール後、環境変数のPATHに追加しても認識しない
- [Windows用forkレポジトリ](https://github.com/sdbds/Zonos-for-windows)のpowershell用スクリプト
- 公式に記載されているDockerの方法
大学3年生が6・7月のインターンを本気で探す！

こんにちは！情報系大学2年生（4月から3年生）のsoramameenと申します。6～7月の2ヶ月間、大学のプログラムで空いた期間を利用して、***東京***でフルタイムのインターンを探しています。通常のサマーインターン（8～9月）より早く実務経験を積みたいと思い、この記事を書きました。ぜひ最後まで読んでいただければ嬉しいです！

## 私のスキルと成果物
### 大学の授業
- 基本的なデータ構造とアルゴリズム
- アセンブラ
- コンピュータアーキテクチャ
- C言語
- 大学基礎レベルの数学

### 独学で身に着けたスキル
- HTML，CSS，JavaScript
- React，***Next.js***
- Python
- ***DeepLearning***の基礎
    - ゼロから作るdeeplerning
    - Pytorchの参考書
- ***Git***の基本操作(pull request)
- アルゴリズムの応用　(動的計画法や貪欲法)

### 作ったもの
- ***参考書紹介サイト***
    - 初めてインターネット上に公開したサイトです
    - 独自ドメインを取得
    - Amazonアフェリエイト(収益は0です😿)
    - url： https://www.unistudyguide.com/
    - Github:https://github.com/soramameen/unistudyguide
- ***ポートフォリオサイト***
    - Next.jsで制作物を紹介
    - URL：https://portfolio-virid-nine-95.vercel.app / Github：https://github.com/soramameen/portfolio
- ***IT Newsクイズサイト***　イチオシ！
    - newsAPIとGroq(生成AI)APIを利用して世界中のリアルタイムなITニュースをクイズとしてキャッチアップできる
    →外部APIや生成AIを使ったコンテンツ作成に生かせます
    - Github：https://github.com/soramameen/it-quiz-app

- ***リアルタイムチャットアプリ***
    - GolangとWebsocketでLINE風トークアプリを制作
    - Github：https://github.com/soramameen/real-time-app

## 私の挑戦と行動力
- 未経験からハッカソン参加でWeb開発に目覚める
- Next.jsを学び、4つのアプリを制作
- サマーインターン10社に応募しつつ、LeetCodeでコーディング力強化中
- 富士山登頂、東南アジア旅行、大学共同研究（異常検知システム）にも挑戦
## インターンで実現したいこと
***6~7月***の間、***フルタイム***で働けます！
Web開発を中心にして企業に貢献したいです。
もしWeb以外でも、新しい技術を学びながら成果を出します。***交通費なし***でもOK、場合によっては8～9月まで延長も可能です。
## 最後に企業様へ
6月～7月の中途半端な時期のインターンを探すのは、難しいですが、熱意と実行力には自信があります。もし、***「こんな学生を育てたい」「短期でも活躍してほしい」と思ってくださる企業様***がいたらこの記事のコメントやDM、X(@soramameen04)にご連絡ください！
最後までお読みいただき、ありがとうございました！
whisperとChatgptで文字起こしを自動化

<h2>whisperとMecabで文字起こしをする</h2>
<b>環境</b><br>
Os：Windows11 <br>
エディタ：Visual Studio Code <br>
言語：Python3　<br>
文字起こし：whisper OpenAI

<h2>各種ダウンロード</h2>
音声処理のため、ffmpegをダウンロードします。<br>
ffmpeg　https://www.ffmpeg.org/download.html<br>
ffmpegはシステム環境変数（Path）に新規登録しました。<br>
次に、各ライブラリのインストールです。

    pip install openai-whisper
    pip install ffmpeg

<h2>仮想環境のセットアップ</h2>
仮想環境をセットアップします。

    #仮想環境の作成
    python -m venv venv
    
Shift+Ctr+Pでコマンドパレットを開き、Python:Select Interpreterで、
Python3.XX ('.venv':'venv' .\venv\Scripts\python.exeを選択します。

次に仮想環境を有効化します。terminalを開いてコマンドを打ち込みます。

    #有効化
    .\\venv\\Scripts\\activate
    #無効化(使用後は無効化します）
    deactivate

whisperのテストを行います。

    test.py
    import whisper
    # Whisperのテスト
    model = whisper.load_model("large")
    print("Whisperのlargeモデルのロード成功")
      
エラーが出なければ、インストール成功です。


<h2>whisperで文字起こし</h2>
Whisperで文字起こしを行います。
コードはChatgptに出力してもらいました。

    import whisper
    import os
    # Whisperモデルのロード
    model = whisper.load_model("large")     
    # 音声ファイルのパス
    audio_file = ".\\venv\\audio.mp4"       
    # 文字起こしを実行
    result = model.transcribe(audio_file)
    # テキストを保存
    with open("result.txt", "w", encoding="utf-8") as f:
        f.write(result)

largeモデルを選択したのでもう少し時間がかかると想定していましたが、
約2時間ほどの録音が3時間で文字起こしできました。

資料(テキスト)をMecabで形態素分析して取り込んで、
文字起こししたテキストを修正するプログラムができないかなと考えています。

<h2>参考文献</h2>
https://github.com/openai/whisper/discussions/696
コードを1行も書かずにアプリをApp Storeにリリースした話 - Claude 3.7 Sonnetプロンプト実践集


## はじめに

「国名当てクイズ」アプリをFlutterの知識ゼロの状態からClaude 3.7 Sonnetだけを頼りに開発し、App Storeにリリースした経験を共有します。特に効果的だったプロンプトパターンに焦点を当てています。

[リリースしたアプリはこちらから飛べます](https://apps.apple.com/jp/app/%E5%9B%BD%E5%90%8D%E5%BD%93%E3%81%A6%E3%82%AF%E3%82%A4%E3%82%BA/id6742096703)

## 使用したツール
Claude 3.7 Sonnetのみです。

## 効果的だったプロンプト集

### 1. 環境構築プロンプト

```
Flutterの開発環境を一から構築する方法を、プログラミング初心者でもわかるように説明してください。
MacOSを使用しています。以下の点を含めてください：
1. 必要なソフトウェアのインストール手順
2. 初期プロジェクトの作成方法
3. エミュレーターのセットアップ
4. 実機でのテスト方法
```

このプロンプトにより、Flutterの知識がなくても環境構築が可能になりました。

### 2. アプリ概要設計プロンプト

```
私はFlutterについて何も知りません。以下の機能を持つ国名当てクイズアプリを作りたいです：
1. 国旗画像を表示する
2. 4つの選択肢から正しい国名を選ぶ
3. 正解なら1に戻り不正解なら終了

この要件を満たすアプリのファイル構成と、各ファイルの役割を説明してください。
```

### 3. UI実装プロンプト

```
国名当てクイズアプリの「クイズ画面」を実装したいです。この画面には：
- 上部に国旗画像
- 中央に4つの選択肢ボタン

私はFlutterの知識がないので、importから始まる完全なコードを生成してください。
コード内にはコメントを入れて、各部分の役割を初心者にもわかるように説明してください。
```

### 4. エラー対応プロンプト

```
以下のFlutterエラーが発生しました。Flutterについて知識がないため解決できません。

【エラー内容】
(エラーメッセージ貼り付け)

【発生状況】
(エラーが発生した状況を記述)

【関連コード】
(コードを貼り付け)

このエラーを初心者にもわかるように説明し、修正方法を提示してください。
```

### 5. App Store申請準備プロンプト

```
Flutterで開発したアプリをApp Storeに申請するための準備を教えてください。
私はiOSアプリのリリース経験がありません。以下の点を含めて説明してください：
1. 必要なアカウントと登録方法
2. アプリのアイコンとスクリーンショットの要件
3. 申請に必要な情報と記入例
4. 審査通過のためのチェックポイント
```

## まとめ
Flutterの知識がなくても、Claude 3.7 Sonnetへの適切なプロンプトにより、実用的なアプリを開発しリリースすることができました。アイデアがあれば、プログラミングスキルがなくても形にできるという凄い時代が来ていると感じます。
気づいたら Aero Glass が切れてた

何が嫌いってタイトルバー（からメニューとタブバーとウィンドウ外周まで）が透けないところです Windows10、あの「のっぺり」感が。

先般、Windows7 で「何か気持ち悪いなあ」思ったらタイトルバーが「のっぺり」になってまして、…

「どぉぅわぁ気持ち悪い気持ち悪い何じゃこりゃ何とかしてくれぇ」

と。 ww
<br>

で、検索キーワードが難しくて違う用件のばかり出てくる中、ようやく

『 Desktop Window Manager Session Manager サービスを停止させたところ、Areo が無効になりました。開始したところ、有効となったので、このサービスが停止していることが原因みたいですね。』

というのを見つけサービスのアイコンを叩き当該項目を …
<br>
いや「自動」で「開始」になっているんだが。

まあ、止めてみよう。 で、再開してみよう …
<br>

bingo ！

やれやれだぜ。
リバースプロキシとフォワードプロキシの違いについて

# プロキシサーバーとは

プロキシサーバーとは、高速なアクセスや安全な通信を確立するための中継サーバのこと。
プロキシサーバーは、インターネットへのアクセスまたはインターネットからのアクセスを代理で行う。

:::note info 
プロキシ（英語: proxy）
代理を意味する。つまり、プロキシサーバーとは「代理サーバー」という意味。
:::

## フォワードプロキシ

クライアントの代わりにサーバーへリクエストを送信するプロキシサーバー。

![フォワード.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100170/381d6564-94c1-4608-8508-25e5446e755d.png)


### 主な目的

#### 1. データの取得を高速化

- データをキャッシュすることで、取得時間を短縮する。

#### 2. セキュリティの向上

- 許可されていない不正サイトへのアクセスをブロックする。

#### 3. アクセス履歴の管理

- アクセス元を一元管理し、誰がどのサイトにアクセスしたかの情報を記録できる。

#### 4. アクセス制限の緩和

- CORS非対応のAPIにブラウザからアクセスする際、代理でアクセスすることでリクエストを可能にする。

# リバースプロキシ

クライアントからのリクエストを受け取り、適切なサーバーに転送するプロキシサーバー。

![リバース.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100170/c4ebe1bb-cca0-4e2f-87e1-1d2e308bbf36.png)

## 主な目的

#### 1. 負荷軽減

- データをキャッシュすることで、Webサーバーの負荷を軽減する。
- HTTPSの複合化をリバースプロキシで行い、Webサーバーの負担を減らす。

#### 2. 負荷分散

- リクエストを複数のサーバーに振り分け、アクセス集中を防ぐ。

#### 3. セキュリティの向上

- クライアントから直接サーバーにアクセスさせないことで、不正な攻撃を防ぐ。

# 纏め

**フォワードプロキシ** と **リバースプロキシ** は、それぞれ役割が異なる。

- **フォワードプロキシ** は、クライアント（ユーザー）の代わりにインターネットへアクセスする。
    - 主に キャッシュによる高速化・セキュリティ向上・アクセス管理 を目的とする。
- **リバースプロキシ** は、クライアントからのリクエストを受け取り、適切なサーバーに転送する。
    - 負荷軽減・負荷分散・セキュリティ向上 に貢献する。

同じ「プロキシサーバー」でも、配置や役割によって全く異なる機能を持つことがわかりました！
Viteについて-テストコード学習１本目　

このブログ記事は、テストフレームワークを学ぶ過程で執筆した記事の第一回です。
# 概要
Viteの基本やglobインポート機能、開発及びSSRサポート機能について記載しています。

# Viteについて
ViteはJavaScript プロジェクト向けの、**高速**で**設定不要**なビルドツールですが、glob importsやSSRの基本機能や多くのプラグインが存在するなど、素晴らしいエコシステムを形成しています。

# glob インポートとは

glob インポートは、 `import.meta.glob()` 関数を使用して複数のファイルを一度に動的にインポートできる機能です。

```javascript
// 例: components ディレクトリ内の全ての .vue ファイルをインポート
const components = import.meta.glob('./components/*.vue')

//例として以下のオブジェクトがインポートされます。
// {
//   './components/Button.vue': () => import('./components/Button.vue'),
//   './components/Card.vue': () => import('./components/Card.vue'),
//   './components/Modal.vue': () => import('./components/Modal.vue')
// }

// 使用例
for (const path in components) {
  components[path]().then((module) => {
    // モジュールごとの処理
    console.log(path, module)
  })
}
```
https://ja.vite.dev/guide/features#glob-%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9B%E3%82%9A%E3%83%BC%E3%83%88

# Viteにおける開発時全般やSSRをサポートする機能
1. **ホットモジュールリプレイスメント(HMR)**:開発中にアプリケーションの実行状態を維持したまま、変更されたモジュールだけを動的に置き換える
2. **マニフェスト**：ソースコード内の各モジュールとそれに対応するビルド後のアセットの関係を記載したファイルを作成する機能。作成されたマニフェストを基に、 <link rel="preload" ...> タグが動的に作られ効率的にクライアントに事前読み込みさせます。
3. **ネイティブのES Modules**:webpackのバンドルとは違い、最新のブラウザが標準でサポートする ES Modulesを利用しているので、ビルドの時間が高速。
4. 低レベルのプリミティブを提供し、その上にVue、React、Svelteなど各フレームワーク固有のSSRロジックを構築できる
5. **SSR専用のAPI**：Viteは、サーバーとクライアントのコードを区別するのに役立つAPIを提供します

参考記事:https://vitest.dev/guide/why.html

・npm trendにおけるgulp,vite,webpackの比較
![npmtrend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1893698/788d4f6a-8f7f-4973-9159-7b22a44499fd.png)
3-React案例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/40ecfc18-eb3e-49de-b0f5-eb939cd2368f.png)
## 一：列表渲染:map方法
只要数据会影响到视图的变化，都应该用useState去做维护
通过useState传过来假数据，做渲染
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/359341da-a747-48ad-8759-ef00a7fdb212.png)
```java
// 渲染评论列表
// 1.使用useState维护评论列表list
const[commentList,setCommentList]=useState(list)
// 2.遍历渲染评论项
{commentList.map(item=> (
   <div key={item.rpid}>评论项</div>
))}
// 3.修饰细节 头像 用户名 评论内容 评论时间 评论数量
{item.user.avatar}
{item.user.uname}
{item.content}
{item.ctime}
{item.like}
```
## 二：删除功能实现
1.条件渲染：是否是自己的评论
2.通过id去做匹配，过滤
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/23f8aa44-b993-4038-86ee-6861d3e0ad94.png)
怎样确定是自己的评论：user中有一个uid 代表当前用户的Id
评论列表中每一项有一个user uid，两个uid一致则认为是自己的评论
filter函数返回一个新数组，不更改老数组
filter:类似于一个漏斗，满足条件的留下，不满足条件的漏下去
比如：一共有五条评论，id分别为12345，用户id和评论区id都为3，那么就把3漏下去，把1245作为一个新的数组返回
```java
// 条件：user.id=== item.user.id
// 删除功能
const handleDel = (id)=>{
  console.log(id)
  // 对commentList做过滤处理
  setCommentList(commentList.filter(item=> item.rpid !== id ))
}
{user.uid=== item.user.uid && 
  <span className="delete-btn" onClick={()=> handleDel(item.rpid)}>
  删除
  </span>}
```
条件控制删除按钮的显示，用户的id和评论项的id去做匹配，匹配上就显示
删除功能是通用的功能：拿到当前项id,以id作为条件去做过滤
## 三：tab切换功能实现
tab切换类功能点击高亮实现通用功能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/b690151a-d9d7-4321-b089-cb65ffe9fe2d.png)
```java
// tab切换功能
// 1.点击谁就把谁的type记录下来
// 2.通过记录的type和每一项遍历时的type做匹配，控制激活类名的显示
const [type,setType] = useState("hot")
const handleTabChange =(type) =>{
  console.log(type)
  setType(type)
}
const tabs = [
    {type:"hot",text:"最热"},
    {type:"time",text:"最新"},
]
// 高亮类名 active
{tabs.map(item=> 
    <span 
       key={item.type} 
       onClick={()=>handleTabChange(item.type)} 
       className={"nav-item ${type === item.type && "active"}"}>
       {item.text}
    </span>)}
```
## 四：排序实现
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/b4020cbb-cf09-4160-b157-5808541a7840.png)
lodash：封装好了很多个工具方法的函数库 
order by:快速给数据做排序 生成一份全新的数据，不会更改老数据
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/0d9e5222-3cd5-43cb-9d04-ab57782cf20c.png)
安装lodash命令
```java
npm i --save lodash
```
```java
// 导入lodash
import _ from "lodash"
const [type,setType] = useState("hot")
const handleTabChange =(type) =>{
  console.log(type)
  setType(type)
  // 初始值
  const[commentList,setCommentList]=useState(_.orderBy(list,"like","desc"))
  // 基于列表的排序
  if(type === "hot"){
   // 根据点赞数排序
   setCommentList(_.orderBy(commentList,"like","desc"))
  }else{
   // 根据创建时间排序
   setCommentList(_.orderBy(commentList,"ctime","desc"))
  }
}
```
## 五：classnames优化类名控制
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/46e4beab-d966-47e3-a24e-d54991df2fb8.png)
安装方式
```java
npm install classnames
```
```java
import classNames from "classnames"
 className={classNames("nav-item",{active:type === item.type})}
```
postgresql の 通貨(money) 型について

## 通貨型の取り扱い
* 業務で四則演算を通貨に関する項目で行う際には、切り捨て、繰り上げの問題をどうするかとなります。
消費税計算が投入された際に結構問題になったのは老人たちの記憶にもしっかりあるでしょう。
* 秤量単位で扱われる商品では、小数点以下の単価設定されるケースが多いのでRDBMで通貨型がある場合、
他のDB実装との整合性を考えずに導入すると問題になることがあります。

## 歴史っぽいもの 
* MYSQL系,sqlite,firebird, などの軽量実装を旨とするRDBMでは、通貨型を実装していません。電子取引の長い慣行を保持しているホスト系システム＝COBOLから移行を念頭にしたDB/2,Oracle,Microsoft-SQLserver(旧くはSybase(→2010年にSAPが買収) Ver6.5以降)などは、予め定義された型として実装することになったと思われます。（推測） 
* ここではpostgresqlで通貨型を選択した場合、出てくる問題について書きます。

## 名称 ＝ money 型
* CURRENCY　"型" は VBAなどの 言語の型名で混乱します。VBAと密接な関係の JetDB のファイルを mdbtools/mdb-schema で処理すると "Currency" と刻まれていることが確認できます。
* 一方で Microsoft sqlserver では　"money"型　と呼ばれています。双方、開発出自が異なることがよく分かります。

## 精度について
https://www.postgresql.jp/document/16/html/datatype-money.html

> money型は貨幣金額を固定精度の小数点で格納します。

「浮動小数点で扱うのは現金だけに厳禁」など🤓というか、後述の割り算問題があります。

>  小数点精度はデータベースのlc_monetary設定で決定されます。

## ロケールの件
* 通貨型にはロケール設定があります。
lc_monetary 設定は、DBにデフォルトでは"" です。
通常は "$" になってしまいます。
```
sample =# select 10::money;
 money  
--------
 $10.00
(1 行)

sample = # set lc_monetary to "ja_JP.UTF-8";
SET
# select 10::money;
 money 
-------
  ￥10
(1 行)

```
* set コマンドを用いて設定することができるのですが、データ入力時に lc_monetary が "" または "C"、その他の言語で設定されていた場合、set されたロケールでの表現における小数点の扱いが変更されてしまいます。 具体的に言うと "7.00 円（円.銭単位）"で設定された単価を　700円にしてしまうなどの現象が見られるので money 型を扱う際は、DBの初期設定時には注意が必要です。

* 他のDBからのデータ移行する前に 先程の　lc_monetary を設定しておけば問題回避されます。

## 商を求める＝割り算で特定数値型にキャストされる

* 数学演算子については以下のようになっています。

```
sample =# SELECT 
  o.oprname, t1.typname AS lefttype, t2.typname AS righttype 
FROM pg_operator o, pg_type t1, pg_type t2 
WHERE t1.typname = 'money' AND (t1.oid = o.oprleft AND t2.oid = o.oprright);

 oprname | lefttype | righttype 
---------+----------+-----------
 *       | money    | float4
 /       | money    | float4
 =       | money    | money
 <>      | money    | money
 <       | money    | money
 >       | money    | money
 <=      | money    | money
 >=      | money    | money
 +       | money    | money
 -       | money    | money
 *       | money    | float8
 /       | money    | float8
 *       | money    | int8
 /       | money    | int8
 *       | money    | int4
 /       | money    | int4
 *       | money    | int2
 /       | money    | int2
 /       | money    | money
(19 行)

```
## 所感
* なにも考えずに設定したDBで、＄単位で表示されてしまっていた場合など、他のDBから移行時に　money 型設定に変更するのは注意が必要です。Currencyなどと設定されているとしても、32bit整数型かつ100倍(＝銭単位の扱いに備えて）で格納して、四捨五入の処理を別途行うなどの配慮があれば、money型を使う必要ないかもしれません。
* postgresql の　money型は、１円未満を取り扱わない銀行口座の預金残高などでは問題がないのですが、商業会計での「銭単位までの単価」を扱うことができない実装になっています。内部処理で補助通貨単位までは扱っているかもしれませんが、ざっと見た限りでは切り捨てられているように思われます。　少なくとも秤量バラ売りがある業界で日本円での単価などには使えない仕様になっています。
Spring Bootのstatic/に Reactをビルドしたモジュールを配置し、ビルドまでを1つのコンテナで実行する

## はじめに
これまでの記事で、以下を行いました。
- Reactをフロントエンドに、SpringBootをバックエンドにした構成でjarファイルを構築する
- SpringBootをコンテナ環境でビルドする
- Reactをコンテナ環境でビルドする

https://qiita.com/y-hys/items/f30515cbf15422058d42
https://qiita.com/y-hys/items/972289c5d14e5b667fd0
https://qiita.com/y-hys/items/f4c1b3e8814fd2adc371

今回は合わせ技です。以下を一つのコンテナで行います。

1. Reactをビルド
1. 成果物をSpringBootのstaticに配置
1. SpringBootをビルド

## dockerfileの作成

```terminal
<project-root>
├── backend
└── frontend
```

上記構成になっているので
`<project-root/dockerfile>`を作成
マルチステージの構成にします。
1. NodeコンテナでReactをビルド
1. JDKコンテナに1でビルドしたモジュールを配置した状態でSpringBootをビルド
1. JREコンテナに2でビルドしたモジュールを配置

```dockerfile:dockerfile
# Node.jsのコンテナ
FROM node:18-alpine AS frontend
WORKDIR /app
COPY frontend/package.json frontend/package-lock.json ./
RUN npm install
COPY frontend ./
RUN npm run build

# 2. # JDKのコンテナ
FROM eclipse-temurin:21-jdk-alpine AS backend
WORKDIR /app
COPY backend ./
COPY --from=frontend /app/dist ./src/main/resources/static
RUN ./gradlew build

# 3. 軽量化のためJREのコンテナ
FROM eclipse-temurin:21-jre
WORKDIR /app
COPY --from=backend /app/build/libs/backend-0.0.1-SNAPSHOT.jar ./backend-0.0.1-SNAPSHOT.jar
CMD ["java", "-jar", "backend-0.0.1-SNAPSHOT.jar"]
```

## dockerignoreの作成

```:dockerignore
frontend/dist/
frontend/node_modules/
backend/build
backend/.gradle
backend/bin
backend/*.iml
```

## 動作確認

```terminal
docker build -t myapp .
docker run -p 8080:8080 myapp
```

`http://localhost:8080`にアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779836/1dbe53df-4778-4910-867a-7e19b39a334f.png)


## おわりに
ここまでの記事で、
- Reactプロジェクトの作成
- SpringBootアプリの作成
- 上記の統合とビルド
- 各プロジェクトをコンテナ環境でビルド
- 統合した状態でコンテナ環境でビルド

と今まであまり触ってこなかったコンテナ技術を利用しました。
今後の展望は、CI/CDのパイプラインに乗せること。Kubernetesの理解。とインフラ周りの知見を蓄えていきたいです。
React NativeのScrollView長短所とコード

皆さん、こんにちは。

今日は「React NativeのScrollView長短所」についてご紹介します。

React Native の`ScrollView`は、単純なスクロール可能領域を作成するのに便利ですが、同時に大量データを扱う場合には注意すべき点があります。

ScrollViewは、全ての子要素を一度にレンダリングする単純なスクロールコンテナです。子要素は事前に全て用意されている必要があり、親コンポーネントがマウントされた時点で全てメモリに読み込まれます。

今回はScrollView の長所と短所をまとめて解説します。

# 長所

- 実装がシンプル
<ScrollView> でコンテンツを包むだけで簡単にスクロール機能を実装できます。

- 柔軟なレイアウト
縦スクロールや横スクロール（horizontal={true}）を簡単に切り替えられます。
フォームなど、コンテンツ量が比較的少なく縦方向に長い画面を作りたいときに有用です。

- すべての要素が常に描画されるので扱いやすい
遅延描画や要素の入れ替えといった考慮がいらないため、小～中規模のコンテンツでは管理が楽です。

- 追加ライブラリ不要
React Native 標準のコンポーネントなので、インストールや設定の手間がありません。

# 短所

- パフォーマンスの低下（大量要素のレンダリング）
ScrollView は、画面に見えていない要素も含めて全てを一度にレンダリングします。アイテムが多い場合、描画・メモリの負荷が大きくなり、アプリが重くなります。

- メモリ使用量の増大
特に画像など容量の大きい要素を多数含む場合、必要以上にメモリを消費する可能性があります。

- 大量のリスト表示には不向き
大量のアイテムを表示する場合は、要素の仮想化（VirtualizedList）を行う FlatList や SectionList を使う方がパフォーマンスが向上します。

- スクロール位置の制御が複雑になる場合がある
画面の特定位置へのスクロールや、動的に要素が増減する場合に、手動で scrollTo() や scrollToEnd() を呼び出すなど制御が必要になることがあります。


## コード例

```
import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.contentContainer}>
        {/* スクロール可能なコンテンツ */}
        {[...Array(30)].map((_, index) => (
          <Text style={styles.item} key={index}>
            Item {index + 1}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  contentContainer: {
    padding: 20,
  },
  item: {
    fontSize: 16,
    marginVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});
```

この例では 30 個の項目を単純にスクロール表示しています。アイテム数が増えるとメモリとパフォーマンスに影響が出るため、必要に応じて FlatList への切り替えを検討しましょう。

# まとめ

- ScrollView
    - 長所: 実装が簡単で、シンプルにスクロールコンテンツを表示できる。
    - 短所: 全要素を一度にレンダリングするため、大量のデータには不向きでパフォーマンスやメモリ消費に影響が出る。

- 大量のアイテムやリスト表示をする場合
FlatList や SectionList を使用して、必要な要素だけをレンダリングする “仮想化” を利用することが一般的です。

もし画面に表示する要素が 100 件以下程度であれば ScrollView でも問題ないケースが多いですが、さらに多い場合は FlatList などを検討するとよいでしょう。

参考
https://zenn.dev/woodstock_tech/articles/14011577c33f90

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
AtCoder Beginner Contest 073B - Theaterメモ

## 問題
AtCoder Beginner Contest 073

https://atcoder.jp/contests/abc073/tasks/abc073_b

## 考察
入力をfor文を用いて行う。その後、for文を使って最終的に表示する数字をつくる。この際どのくらいの席数一組の団体が座ったかは`l`席から`r`席まで座ったとすると、$l-r+1$で出せる

## ACコード
```py
n=int(input())
l=[]
r=[]
for i in range(n):
    a,b=map(int,input().split())
    l.append(a)
    r.append(b)
ans = 0
for i in range(n):
    ans += r[i] - l[i] + 1
print(ans)
```
[Github] 草 (Contributions) が生えていなかった


## In a nutshell
GitHubのContributions（草）が反映されない問題に遭遇．
原因はローカルのGitとGitHubの登録メールアドレスの不一致だった．
解決策として，Gitの設定を確認し，メールアドレスを修正した．


## Githubの草(Contributions)とは？


Contributionsは，そのままに，貢献，を意味する．このContributionの数が活動量として，**草**と表現されている．
これはOverviewのセクションから確認できる．日付 と contributions の数が緑のタイルで表示される．

![t_picture_github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3830184/1a017d52-5fcc-4da7-b9f1-edaa3b1908b0.png)



## 生じた問題 (草が生えていない)

上記の画像の様にContributionsは表示がされており時々見ていた．ほぼ毎日複数のpushをしているにも関わらず色が付いていない為，何となく疑問には感じていたが，正直どうでもいいので気にもしていなかった．


## 原因と解決方法
#### 今回の原因
ローカルのGitとGithubに登録されている**メールアドレス**が異なっていた．

#### 解決方法

以下のコマンドをGit bashで実行して，**ローカル**のユーザーネームとメールアドレスを確認する．これが，**Github**に登録されているものと一致している事を確認する．

```bash
git config --global user.name  
git config --global user.email  

# 以下でもok
git config --list | grep user
```

異なっていた場合には，以下のコマンドで登録や修正を行う．
```bash
git config --global user.name "WRITE_NAME"    
git config --global user.email "WRITE_EMAIL"     
```

#### 他に考えられる事

 - プライベートレポジトリに関する活動は，Private contributions にチェックを入れないと反映されない事がある．
 - フォークしたリポジトリの commit は反映されない．
 - branch が正しくない．
 - ローカルの時刻がずれている為，commitが適切に処理されていない．


## 問題の発見が遅れた理由

一切の草が生えていなければ，明らかにおかしいと理解ができた．Contributions が適切に反映されていない -> 設定ミスがあり，後々問題を引き起こす可能性があると気づけた．
しかし，PCの Git では異なるメールアドレスを設定していたため草が生えなかったが，スマホアプリでは正しいアカウントでログインしていた為，アプリ経由のIssue作成では草が生えた．その為に，この問題に気づきにくかった．




## Summary
 - Contributionsが反映されていなかった原因はメールアドレスの不一致
 - 他の可能性としては，プライベートレポジトリの設定や，フォーク，ブランチの問題が考えられる
 - スマホからGithubのアプリを利用していた為に，問題に気が付くのが遅れた
BNO055メモ

# BNO055メモ

https://www.bosch-sensortec.com/products/smart-sensor-systems/bno055/

BOSCH社のIMU(慣性計測ユニット)。比較的安価。
3軸加速度計(14bit)、3軸ジャイロスコープ(16ビット)、3軸地磁気センサとマイクロコントローラ搭載で、各種センサの値から計算したデータを、様々なモードで出力が可能。

### データシート
https://www.bosch-sensortec.com/media/boschsensortec/downloads/datasheets/bst-bno055-ds000.pdf

### パワーモード
ノーマル、ローパワー、サスペンドモードがある。デフォルトはノーマルモード。
一定期間（デフォルトで５秒）データに変化がないとローパワーモードに移行する。
ローパワーモードでは加速度のみを監視し、加速度に変化があるとノーマルモードに移行する。

### 動作モード
| 動作モード | Accel | Mag | Gyro | フュージョン(相対) | フュージョン(絶対) |
|:-:|:-:|:-:|:-:|:-:|:-:|
| ACCONLY | ✓ | |
| MAGONLY | | ✓ | |
| GYROONLY | | | ✓ | |
| ACCMAG | ✓| ✓|  | |
| ACCGYRO | ✓| | ✓|  |
| MAGGYRO | | ✓| ✓|  | |
| AMG | ✓| ✓| ✓|  | |
| IMU | ✓| |  ✓| ✓|  | |
| COMPASS |✓|✓||| ✓|
| M4G |✓|✓||✓||
| NDOF_FMC_OFF|✓|✓|✓||✓|
| NDOF|✓|✓|✓|✓||

### フュージョンモード
フュージョンモードは、各センサーから空間内でのデバイスの向きを計算、推測する。
相対的な向きと絶対的な向きの２つがあり、絶対的な向きは磁北方向を基準とする。
相対的な向きでは、センサーの初期配置を基準とする。
フュージョンモードでは、センサーのヘディングをクォータニオンデータまたはオイラー角（ロール、ピッチ、ヨー角）で返す。
加速度センサは、重力と装置自体の動きに反応するが、フュージョンモードでは、2つの加速度源を計算で分離し、それぞれを別のベクトルとして出力する。

### NDOFモード
9自由度のフュージョンモードで、加速度計、ジャイロスコープ、磁力計からの総合的に計算された絶対的な向きデータが出力される。
このモード中では磁力計のキャリブレーションが行われる。
消費電流は、NDOF_FMC_OFFフュージョンモードと比較してわずかに高い。
出力は100Hz

### 出力値の単位選択
| データ種 | 単位 |
|:-:|:-:|
|加速度、重力|$m/s^2$ , mg|
|磁力|Micro Tesla|
|角速度|Dps,Rps|
|オイラー角|Degrees,Rasians|
|クオータニオン||
|温度|℃,℉|

## 出力データ
### Acceleration
非フュージョンモード：各軸X/Y/Zの未補正の加速度データ
フュージョンモード：各軸ごとにオフセット補正された加速度データ

### Magnetic Field Strength
非フュージョンモード：各軸X/Y/Zの未補正の磁場強度データ
フュージョンモード：各軸ごとにオフセット補正された磁場強度データ

### Angular Velocity
非フュージョンモードでは、各軸X/Y/Zの未補正の角速度（ヨーレート）データ
フュージョンモードでは、各軸ごとにオフセット補正された角速度（ヨーレート）データ

### Orientation (オイラー角/クオータニオン)
フュージョンモードのみ、各DOFヘディング/ロール/ピッチについて、オフセットおよび傾斜補正された向きデータをオイラー角、またはクオータニオン形式で出力

### Linear Acceleration 
フュージョン動作モードでのみ、補正、重力加速度の影響を取り除いた各軸x/y/zの線形加速度データを出力します。

### Gravity Vector
フュージョン動作モードでのみ、各軸x/y/zの重力ベクトルデータを出力

### Temperature
温度データを出力

## キャリブレーション
センサーフュージョンソフトウェアは、オフセットを除去するために3つのセンサー（加速度計、ジャイロスコープ、磁力計）すべてのキャリブレーションアルゴリズムをバックグラウンドで実行しますが、この自動キャリブレーションを実行するためには、いくつかの予備的な手順を確保する必要があります。

加速度計とジャイロスコープは外部からの擾乱の影響を受けにくいため、オフセットは無視できます。一方、磁力計は外部磁場の影響を受けやすいため、適切なヘディング精度を確保するには、以下に説明するキャリブレーション手順を実行する必要があります。

選択されたセンサーに応じて、デバイスの適切なキャリブレーションのために、すべての「パワーオンリセット」後に次の簡単な手順を実行する必要があります。

### 加速度計のキャリブレーション
デバイスを数秒間、6つの異なる安定した位置に置く。
位置の変更はゆっくりと動かすようにする。
6つの安定した位置は任意の方向でよいが、装置が少なくとも1回はX,Y,Z軸に垂直になるようにする。
CALIB_STATレジスタで、加速度計のキャリブレーション状態を確認できる。

### ジャイロスコープのキャリブレーション
デバイスを数秒間、単一の安定した位置に置く。
CALIB_STATレジスタで、ジャイロスコープのキャリブレーション状態を確認できる。

### 磁力計のキャリブレーション
磁力計はHard-iron歪みとSoft-iron歪みの両方の影響を受けるが、多くの場合、Hard-ironの影響が原因。
装置全体をランダムな動き（たとえば、空中に数字の「8」を書くなど）をいくつか行うことでHard-ironに対するキャリブレーションを行う。
CALIB_STATレジスタによりキャリブレーション状態を確認できる。
IT・その他 用語集（随時更新）（メモ）


未経験ITエンジニア(目指し中)が、知った用語をメモとして残しています。

間違いや、知っておいたほうがいい用語があれば、コメントいただけると幸いです。

## API（アプリケーション・プログラミング・インターフェース）
異なるソフトウェアアプリケーションやシステム間でデータや機能をやり取りするためのインターフェース。

- Weather API →天気予報や気象データを取得など
- Google Maps API →地図の取得や位置情報の取得など
## フレームワーク
ソフトウェア開発の際に基盤となる構造やライブラリを提供するツール

- Flutter →Dart
- Swift →UIKitやSwiftUI
など
## フロントエンド
ユーザーが直接触れる部分(UI)の開発を担当
## バックエンド
サーバー側で動作するロジックやデータ処理を担当
## SDK(Software Devalopment Kit)
ソフトウェアを開発するためのツールキット
- IOS SDK(Apple)
- Android SDK(Google)
- Firebase SDK(Google)
など
## MVVM
Model（モデル）View（ビュー）ViewModel（ビューモデル）の３つに分けることで、可読性や保守性を向上させる。swiftUIやFlutterなどのフレームワークで使われる
## @ mian （エントリーポイント）
プログラムの開始点であり、実行される際に最初に呼び出される。[参考](https://qiita.com/coret/items/908f726676a94fcf4e76)
## アーキテクチャ
システムやソフトウェアの構造や設計のこと。
## CI
開発者が書いたコードを頻繁に統合する手法。
自動化されたテストやビルドを実行してバグを早期に発見する。
## CD
CIで統合したコードを本番環境にリリースする手法。
## UI
ユーザーが直接操作する画面や要素のこと。
見た目のデザインや操作性を設計することが重要。
## UX
ユーザーがアプリを使う際の満足感や体験全般を指す。
## MVC
Mondel（モデル）View（ビュー）Controller（コントローラー）の３つの要素を分担して構築する設計パターン
## MVP
Model（モデル）View（ビュー）Presenter（プレゼンター）の３つの要素に分担して構築する設計パターン
## 受託開発
企業やクライアントから依頼を受け、特定のシステムやアプリケーションを開発する形態。
## 自社内開発
自社が提供するサービスや製品を自社内で開発する形態。他社からの依頼ではなく、自社の製品やサービス改善、運営のための開発を行う。
## SES（システムエンジニアリングサービス）
企業にエンジニアを派遣し、クライアント先でシステム開発や運用を支援するサービス。労働力を提供する形態で、エンジニアはクライアントのプロジェクトに参加する。
## SE（システムエンジニア）
システム開発全般に携わる職種。要件定義、設計、開発、テスト、運用保守まで幅広い業務を担当することが多い。
## SIer（システムインテグレーター）
クライアントのニーズに応じて、システム全体の設計・構築を行う企業。ハードウェアやソフトウェアを組み合わせて提供することが多い。
## 派遣
エンジニアが派遣会社に所属し、クライアント先で業務を行う形態。SESに似ているが、派遣法に基づき、派遣先の指揮命令下で業務を行う点が特徴。
## データベース
データの集まりのこと。
データベースは、データを効率的に保存・管理・検索するための仕組みやシステムのことを指します。単なるデータの集合ではなく、構造化されていて、必要に応じて迅速にデータを取得・操作できるよう設計されています。
[参考](https://qiita.com/y_tt_y/items/605b5310ffead70a62b5)
## SEとPGの違い
SE・・・システムの設計とクライアントとのやり取りを担当する役職
PG・・・SEが作成したシステムの設計書通りに、詳細設計を行いプログラミングする役職
[参考](https://www.geekly.co.jp/column/cat-position/1903_083/#SEPG)
## 本番環境
システムが実際に稼働し、エンドユーザーが利用できる環境
## エンドユーザー
最終的に製品やサービスを利用する人や組織
## 仮想環境
1台のコンピュータの中に別のコンピュータやシステムをソフトウェアで作り出し、実際の機器を使わずにその動作を試せる仕組み
## プラットフォーム
OS：パソコンやスマートフォンなどのデバイスを動作させるための基本ソフトウェア
代表的なOSは、Windows、macOS、Linux、Android、iOSなど
[参考](https://biz.kddi.com/content/column/smartwork/what-is-platform/)
## クロスプラットフォーム
1つのコードベースや技術を使用して、複数のプラットフォーム（オペレーティングシステムやデバイス）で動作するアプリケーションやサービスを開発
[参考](https://qiita.com/nskydiving/items/c13c949cc17c6f980a67)
【応用情報技術者試験】マネジメント系

# マネジメント系

## サービスマネジメント

###　サービスの運用
- フルバックアップ
  - 毎回データのバックアップを行う方式。
  - データの復旧時間は短くなるがバックアップに要する時間は長い
- 差分バックアップ
  - 定期的にフルバックアップを行い、つぎのフルバックアップまでの期間は以降にあったっ差分のみを記録していく
  - フルバックアップの適用→差分バックアップの適用で作業時間はかかる

### サービスマネジメントプロセス
- サービスマネジメントシステム要求事項
    - パフォーマンスの監視の顧客レビューはあらかじめ定められた間隔でサービスレベル標準に照らしたパフォーマンス、SLAの作業負荷限度と比較した実績、達成度、課題を行う
        - SLA（Service Level Agreement）
            - サービス提供者と顧客との間で交わされる契約書であり、サービスの品質や性能、対応時間、可用性などの基準を明確に定めた文書です。サービスマネジメントにおける要求事項として、SLAは以下のような役割を果たします。

## システム監査
### システム監査
- システム監査基準における予備調査
    - 監査実施前の初期段階で行われる調査活動
        1. 監査対象の全体像の把握
            - 組織・システムの概要把握
                - 監査対象となる組織の業務内容、ITシステムの構成、運用状況など、基本的な情報を収集して全体像を理解します
        2. リスクの特定と評価
            - 潜在的なリスクの洗い出し
                - システムに関連するセキュリティリスクや運用上の問題、内部統制上の課題など、リスク要因を初期段階で特定し、その重要度や影響度を評価します。
        3. 内部統制の初期評価
            - 統制環境の確認
                - システム運用における内部統制の仕組みや実施状況を初歩的に検証し、監査の重点領域を見極めるための情報を収集します。
        4. 監査計画の策定
            - 詳細監査への準備
                - 予備調査の結果を踏まえ、監査の目的、範囲、方法論、スケジュールなど、具体的な監査計画（Audit Plan）を策定します。これにより、監査実施時のリスクを低減し、効率的な監査を実現する基盤が整えられます。


### 内部統制
- 経営者
  - 内部統制の整備及び運用について最終的な責任をゆうする
  - 組織すべての活動に最終的な責任をもつ
- 株主
  - 引き受けた株式についての対価をか一社に拠出する（経営に関与しない）
- 取締役会
  - 内部統制の整備および運用に係る基本方針を決定する
- 監査役
  - 取締役、執行役の職務の執行に対する監査の一環として独立した立場から、内部統制の整備及び運用状況を監視、検証する役割と責任をもつ
- 内部監査人
  - 内部統制の目的をより効果t系に達成するため内部統制の基本的っ要素の1つであるモニタリングの一環として、内部統制の整備及び運用状況を検討、評価し必要に応じて改善を促す

## プロジェクトマネジメント

### プロジェクトのスコープ
- プロジェクト・スコープ記述書
  - いかの４つを記載する
    - プロダクト・スコープ定義書
    - 成果物
    - 受け入れ基準
    - プロジェクトからの除外事項

### プロジェクトのリスク

- デルファイ法
  - 複数の専門家から個別に意見の収集を行い、得られえた意見の集約をフィードバックすることを繰り返し、最終的に意見を収束していく手法
  - 以下の手順で行う
    1. 複数の専門家を回答者として選定し、個別に質問を行う
    2. 質問に対する回答結果をフィードバックし再度質問を行う
    3. 回答結果を統計的に処理し、確率分布とともに回答結果を示す
Firestoreにデータを一括登録したい。（応用編）

[Firestoreにデータを一括登録したい。](https://qiita.com/fujiwarawataru/items/7898ce6f9283d1596cc7)の続き。
なんでドキュメント追加はこんなにめんどいんや...
コレクションの中のドキュメントは同じ型でコピペ追加、編集させてほしい(ToT)

## 異なるデータ構造に対応する

異なるデータ構造や複数のコレクションにデータを登録する場合は、スクリプトを拡張することができます。

```javascript
// 複数コレクションに異なるデータを登録する例
async function uploadMultipleCollections() {
  // 製品データのバッチ処理
  const productBatch = db.batch();
  sampleProducts.forEach(product => {
    const docRef = db.collection('products').doc(product.id);
    const { id, ...data } = product;
    productBatch.set(docRef, data);
  });
  
  // ユーザーデータのバッチ処理
  const userBatch = db.batch();
  sampleUsers.forEach(user => {
    const docRef = db.collection('users').doc(user.id);
    const { id, ...data } = user;
    userBatch.set(docRef, data);
  });
  
  try {
    // 両方のバッチをコミット
    await Promise.all([productBatch.commit(), userBatch.commit()]);
    console.log('複数コレクションへのデータ登録が完了しました');
  } catch (error) {
    console.error('データ登録中にエラーが発生しました:', error);
  }
}
```

## データを更新または追加（アップサート）する場合

既存のドキュメントを更新し、存在しない場合は新規作成したい場合は、`set`メソッドに`{merge: true}`オプションを追加します。

```javascript
batch.set(docRef, data, { merge: true });
```

このオプションを使用すると、既存のドキュメントの他のフィールドを維持したまま特定のフィールドのみを更新できます。

## CSVファイルからデータを読み込む例

実際のプロジェクトでは、スプレッドシートなどで値を管理して、それを反映させたいってことは多くないですか？
そんなときはCSVファイルからデータを読み込んでみましょう。

まず、CSVパーサーをインストールします：

```bash
npm install csv-parser fs
```

CSVファイルからデータを読み込むスクリプト：

```javascript
const fs = require('fs');
const csv = require('csv-parser');
const admin = require('firebase-admin');

// Admin SDKの初期化（前述と同じ）

// CSVファイルからデータを読み込む関数
function loadDataFromCSV(filePath) {
  return new Promise((resolve, reject) => {
    const results = [];
    
    fs.createReadStream(filePath)
      .pipe(csv())
      .on('data', (data) => results.push(data))
      .on('end', () => resolve(results))
      .on('error', (error) => reject(error));
  });
}

// メイン処理
async function main() {
  try {
    // CSVからデータを読み込む
    const data = await loadDataFromCSV('./data.csv');
    
    // バッチ処理でFirestoreに登録
    const batch = db.batch();
    data.forEach((item, index) => {
      // idがない場合はインデックスを使用
      const id = item.id || `doc-${index}`;
      const docRef = db.collection('items').doc(id);
      batch.set(docRef, item);
    });
    
    await batch.commit();
    console.log(`${data.length}件のデータを登録しました`);
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

main();
```

## パフォーマンスと制限事項

Firestoreのバッチ処理を使用する際の注意点：

1. **バッチサイズの制限**: 1つのバッチで最大500のドキュメント操作が可能です。それ以上のデータを処理する場合は、複数のバッチに分割する必要があるみたいです。

2. **コスト**: 書き込み操作はFirestoreの課金対象です。大量のデータを登録する前に、コストを確認しましょう！

3. **レート制限**: 短時間に大量の書き込みを行うと、レート制限に達する可能性があります。その場合は、書き込み速度を調整したり、エラーハンドリングを実装したりする必要があります。
連載 [第1回] :なぜ日本企業はベトナムオフショア開発で苦戦するのか？

連載 :ベトナムオフショア開発の成功術：正しく理解して成功へ！
# なぜ日本企業はベトナムオフショア開発で苦戦するのか？

## はじめに  
日本の外注開発といえば、ベトナムは最大のオフショア開発ハブの一つです。
低コストでの高品質なソフトウェア開発を期待して多くの日本企業がベトナムの開発チームと半渡な関係を構築しています。

しかし、実際にプロジェクトを始めてみると、それほど簡単ではないと感じる企業も少なくありません。
この記事では、日本企業がベトナムオフショア開発で苦戦する主要な原因を挙げ、その解決策を提示します。

---

## 苦戦の原因とは？  
### **1. 文化と会社システムの違い**  
ベトナムと日本の会社文化は大きく違います。  
日本の「社会主義」とベトナムの「個人主義」といった傾向は、コミュニケーションスタイルに大きな差を生みます。  
日本企業が常に持つ「流動性の低い組織」と「安定を優先する傾向」は、ベトナムの高い流動性を優先する会社システムとは対照的です。  

### **2. コミュニケーションの困難**  
言語的な問題だけでなく、日本とベトナムの互いの対応スタイルの違いが大きな障害になります。  
日本の「接し方を大切にする文化」に対して、ベトナムの技術者は「常に動いているプロセスを優先する」傾向があります。  
このため、日本企業の細かい要求が溜まると、ベトナム側は不満に感じることが多くなります。  

### **3. 開発プロセスのマネジメントの違い**  
日本の企業は「詳細なスペックを先に決めて開発を進める」傾向が強いのに対し、ベトナムの開発スタイルは「アジャイルプロセスで実装を続ける」ことを優先します。  
この違いが、期待値のズレにつながりやすく、プロジェクトが中止する原因となることも多いです。  

---

## おわりに  
ベトナムオフショア開発で成功するためには、これらの違いを正しく理解し、それに適当したマネジメントを実行することが重要です。

次回の記事では「[ベトナムとのオフショア開発のギャップを埋める：コミュニケーションの関閉](https://qiita.com/BNR-Isamu/items/24083453f01274fbbce1)」について詳しく解説します。
新米データサイエンティストの日常（架空）｜pseudo編

# はじめに
今回は、「新米データサイエンティストの日常」シリーズの第９弾になります。新米データサイエンティストが躓きがちなテーマについて、先輩データサイエンティストと会話しているシーンをChatGPTに生成してもらいました。

第８弾はこちら↓

https://qiita.com/UKI_datascience/items/dd2f8dccda55dc5098f3

---

# 登場人物（架空）
- 佐藤（新米データサイエンティスト・入社1年目）
- 田中（先輩データサイエンティスト・入社5年目）

---

**佐藤:**  
田中先輩、ちょっとよろしいでしょうか？  

**田中:**  
おっ、佐藤くん、どうした？  

**佐藤:**  
クライアントから提供されたデータを確認していたんですが、「pseudo」というカラムがあって、これが何を意味しているのか分からなくて…。データの中身を見ても、規則性があるようなないような感じで、判断がつかないんです。  

**田中:**  
「pseudo」か…なるほど。中身はどんな感じ？  

**佐藤:**  
ざっと見た感じ、文字列と数字が混ざっていて、例えば「abc123」とか「x9y8z7」みたいな値が入ってます。データのユニーク数をカウントしたら、ほぼすべてが異なる値みたいで…。  

**田中:**  
なるほどな。まず、「pseudo」っていう単語自体の意味は分かる？  

**佐藤:**  
ええと、「偽の」とか「疑似の」みたいな意味ですよね？  

**田中:**  
そうそう。だから「pseudo」がカラム名についてると、疑似的な何かを表している可能性が高い。例えば、疑似IDとか疑似コードみたいな。  

**佐藤:**  
疑似IDですか？  

**田中:**  
そう。クライアントがデータを匿名化するために、実際のIDの代わりにランダムな文字列を使うことがよくあるんだ。例えば、ユーザーIDや取引IDをそのまま渡すのが難しい場合、擬似的な識別子を作ってデータを共有することがある。  

**佐藤:**  
なるほど、だからユニークな値が多かったんですね！確かに、もし実際のIDだったら、個人情報とかに関わる可能性があるから、クライアント側で変換しているのかもしれませんね。  

**田中:**  
その可能性は高いな。ただ、確実なことはクライアントに確認しないと分からない。データの仕様書には何か書かれてなかった？  

**佐藤:**  
一応、データのカラム一覧はもらったんですが、「pseudo」は「擬似識別子」って書かれていただけで、詳しい説明はありませんでした。  

**田中:**  
じゃあ、クライアントに「このpseudoカラムは何の識別子で、どういうルールで生成されたものですか？」って確認してみよう。もし、特定のIDをマスキングしたものなら、それが何のIDなのか分かれば分析の仕方も変わるからね。  

**佐藤:**  
確かに！ただのランダムな値なのか、それとも特定の法則で置き換えられているのかが分からないと、データの扱い方を間違えるかもしれないですね。  

**田中:**  
その通り。特にデータ分析では、カラムの意味を正しく理解することが重要だから、分からないものは必ず確認するクセをつけよう。  

**佐藤:**  
はい！じゃあ、クライアントに問い合わせてみます。ありがとうございます！  

**田中:**  
おう、頼んだぞ！
Next.js と React でコンポーネント思考を追求するとどうなるのか？

現代のフロントエンド開発において、コンポーネント思考は欠かせないアプローチです。Next.js と React を活用し、コンポーネント単位で設計・実装することで得られるメリットや、注意すべき点の話です。

## 1. コンポーネント思考とは？

コンポーネント思考とは、アプリケーションを小さく再利用可能な部品（コンポーネント）に分割し、それぞれが独立して機能するように設計する考え方です。これにより、UI の構築、保守、拡張がより直感的かつ効率的になります。

#### 再利用性
同じコンポーネントを複数の場所で利用でき、重複コードを削減します。

#### 分離と独立
各コンポーネントが明確な役割を持つため、変更が他の部分に影響しにくくなります。

#### テスト容易性
小さな単位でテストを実施できるため、品質向上に寄与します。

## 2. Next.js と React におけるコンポーネント設計

Next.js と React は、コンポーネント思考を推進するために設計されたフレームワーク／ライブラリです。Next.js はページベースのルーティングやサーバーサイドレンダリング（SSR）、静的サイト生成（SSG）など、さまざまな機能を提供し、React のコンポーネントモデルとシームレスに統合されています。

### Next.js の特徴とコンポーネントの関係
#### ファイルベースのルーティング
ページがコンポーネントとして管理されるため、ルートごとに独立した UI を実装できます。

#### データフェッチの柔軟性
getStaticProps や getServerSideProps といった仕組みで、各コンポーネントが必要なデータを柔軟に取得でき、描画タイミングを最適化します。

### React のコンポーネントモデル
#### 宣言的 UI
JSX により、どのような状態でどのような UI を描画するかが明確に記述でき、コンポーネント単位で状態管理やライフサイクルを扱う設計が可能です。

#### Hooks の活用
状態や副作用の管理をカプセル化できるため、コンポーネント同士の依存関係が明確になり、ロジックの再利用が促進されます。

## 3. コンポーネント思考を追求するメリット

Next.js と React でコンポーネント思考を徹底することで、以下のような効果が期待できます。

### 保守性と拡張性の向上
#### 変更の影響範囲が限定的
各コンポーネントが独立しているため、特定の UI 部分の変更が他に波及しにくく、リファクタリングが容易になります。

#### スケーラブルな開発
プロジェクトが大規模になっても、明確なコンポーネント構造があれば、チーム全体での開発や機能追加がスムーズに進みます。

### 再利用と共通化
#### コンポーネントの再利用
汎用性の高いコンポーネントを作成することで、同じ機能や UI 要素を複数のページやプロジェクトで使い回すことができます。

#### デザインシステムの構築
一貫性のあるコンポーネントライブラリやデザインシステムを整備すれば、ブランドやユーザー体験の統一感が向上します。

### 開発効率の向上
#### テストの容易さ
単一責任のコンポーネントはテスト対象が明確になり、ユニットテストや統合テストが実施しやすくなります。

#### 迅速なフィードバック
コンポーネント単位での開発・デバッグにより、変更の効果をすぐに確認でき、開発サイクルの短縮につながります。

## 4. 追求する上での注意点と課題

コンポーネント思考を極限まで追求する際には、いくつかの課題や注意点も存在します。

### 過度な抽象化による複雑性
#### 抽象化の行き過ぎ
コンポーネントを細分化しすぎると、逆にコードベースが分散しすぎて理解しにくくなる可能性があります。適切な粒度での設計が求められます。

### 状態管理の複雑化
#### 複数コンポーネント間の状態共有
コンポーネントが小さいと、必要な状態をどのコンポーネントが管理するかの判断が難しくなることがあります。Context API や Redux、Recoil など、状態管理のためのパターンの選定が重要です。

### パフォーマンスの最適化
#### レンダリングの最適化
コンポーネント間の再レンダリングを最小限に抑えるために、React.memo や useCallback、useMemo などを適切に利用する必要があります。特に大規模なアプリケーションではパフォーマンスへの影響を常に考慮することが重要です。

## 5. まとめ

Next.js と React でコンポーネント思考を追求すると、保守性・拡張性・再利用性に優れたコードベースが実現され、プロジェクトのスケーラビリティや開発効率が大幅に向上します。
しかし、抽象化の度合いや状態管理、パフォーマンスの最適化など、バランスを取るべき点も多く存在します。最終的には、プロジェクトの規模やチームの開発体制に合わせた最適な設計戦略を採用することが、成功の鍵となるでしょう。

Next.js と React のコンポーネント思考を深く追求することは、現代のウェブ開発における強力な武器となり、ユーザー体験や開発効率を劇的に向上させる可能性を秘めています。