OmniAICreator/Qiita-1.07M huggingface dataset:
ルートアカウントしかできないこと

ルートアカウントしかできないこと

・AWS アカウントのルートユーザー (コンソール) の仮想 MFA デバイスを有効にします
・AWS アカウント のルートユーザー (コンソール) 用にハードウェア TOTP トークンを有効にします
・AWS アカウント ルートユーザーの FIDO セキュリティキーを有効にする (コンソール)
・AWS アカウントのルートユーザー のパスワードを変更する
・紛失または忘れたルートユーザーのパスワードのリセット
・ルートユーザーのアクセスキーの作成
・ルートユーザーのアクセスキーの削除


・AWS アカウントのルートユーザー (コンソール) の仮想 MFA デバイスを有効にします
多要素認証のことで、推奨事項となる
主にアプリケーションをデバイスにインストールし使用するタイプで、例えばデバイス等にGoogle Authenticatorインストールするタイプ
ランダムに6 桁の認証コードを生成され、ログインする際に6桁の認証コードを入力し、ログインする

・AWS アカウント のルートユーザー (コンソール) 用にハードウェア TOTP トークンを有効にします
デバイスを購入するタイプ
仮想MFA同様に認証コードが生成される

・AWS アカウント ルートユーザーの FIDO セキュリティキーを有効にする (コンソール)
デバイスで、PCのUSBポートに接続し使用する

以下は、別途変更手順を作成する
・AWS アカウントのルートユーザー のパスワードを変更する
・紛失または忘れたルートユーザーのパスワードのリセット
・ルートユーザーのアクセスキーの作成
・ルートユーザーのアクセスキーの削除

備考
過去と比べていろいろ変わってますね
知らなかった
なぜGo言語のマスコットはGopherなのか

---
なぜ<font color="orange">Go</font>言語のマスコットはGopherなのか
---

**ネズミ**

青いネズミって

青い猫のドラえもんとなんか対比されてそうですよね。

Gopher君にも悲しい過去があるのかも......。

**目次**
- [1. Gopherの起源](#1-gopherの起源)
- [2. ミネソタ大学とGopher](#2-ミネソタ大学とgopher)
- [3. おわりに](#3-おわりに)

## 1. Gopherの起源

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493200/4b4800bd-18cc-a03b-cf51-66743bef5073.png)
 designed by [Renée French](http://reneefrench.blogspot.jp/).



<font color="low blue">**はじめに**</font>

　Go言語（通称Go）は、Googleによって開発されたプログラミング言語です。

　そのマスコットとして選ばれたのが、上の画像にもあるように、青いネズミ、通称「Gopher」です。
 
　ふと、なぜこのネズミが選ばれたのか気になり、調べてみたので、今回はそれについて書いていきたいと思います。

<font color="low blue">**Gopher君の情報**</font>

　Gopher君は、実際にはホリネズミ（gopher）という種類の動物をモデルにしています。

　しかし、Go言語のマスコットとしてのGopherは、単なる動物以上の意味を持っています。

　このキャラクターの背後には、プログラミング言語の設計哲学や、開発者コミュニティの文化が反映されているのです。



<font color="low blue">**Renée FrenchとGopherの誕生**</font>

　Gopherのデザインは、アーティストでありイラストレーターのRenée Frenchによって生み出されました。
 
　Frenchは、独特の描写スタイルと豊かな想像力で知られるアーティストで、幻想的な作品が多いです。

　約15年前、Goプロジェクトが始まるずっと前に、Gopherは最初にニュージャージー州のWFMUラジオ局のプロモーションのために登場しました。

　Renée Frenchは、年次募金活動のTシャツデザインを依頼され、そこからGopherが誕生しました。

　その後、Gopherはベル研究所で、Bob Flandrenaのメールシステムのアバターとして登場しました。

　Renée Frenchの描いた他のキャラクターも、Ken、Rob Pike (r)、Russ Cox (rsc) など、ベル研究所のスタッフのアバターとして採用されました。


　その後、Goプロジェクトが始まった時、ロゴの必要が生じました。

　Renée Frenchが描くことをボランティアで申し出てくれ、その結果、最初のGo TシャツとGoogle Codeサイトに彼女のデザインが採用されました。

　2009年のオープンソースローンチに向けて、Renée FrenchはWFMUのGopherをマスコットとして適応することを提案し、そうしてGo Gopherが誕生しました。


>参考
[The Go Gopher](https://go.dev/blog/gopher)


## 2. ミネソタ大学とGopher

　これは、関係あるかな？と思って調べた結果あんまり関係なかったけど、せっかく調べたし共有したい、といった雑学です。

　アメリカにはミネソタ州という州があるのですが、これには「Gopher State」というニックネームもあるのです。

 話は1857年にさかのぼります。

　その年、$5 million Railroad Loanを風刺した政治風刺カートゥーンが公開され、その中でゴーファーが鉄道バロンとして描かれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493200/025d5b7f-ca2a-6ac4-0660-348c28d88497.png)

　この風刺画は、ミネソタ州とゴーファーのイメージを強固なものにしました。

　時を経て、このイメージはミネソタ大学のスポーツチーム、特にそのマスコット「Goldy Gopher」の選定に影響を与えることとなりました。
 
>参考
[Goldy Gopher](https://en.wikipedia.org/wiki/Goldy_Gopher)

## 3. おわりに

　今回にあたりGoについて(主にGopherについて)色々歴史など調べてみました。

　大変興味深いものが多く、私の知的好奇心を満たしてくれました。

　最後に印象に残った言葉を一つ。
 
Goの父と呼ばれるロブ・パイク氏の一言

<font color="blue">_UNIXはただ死んだだけでなく、本当にひどい臭いを放ち始めている_</font>

 さすがだなと思いました。
p5play の 2つのスプライトのグループ間で「Collisions and Overlaps」の仕組みを扱う

以下の記事にも書いた、p5.js のライブラリ「p5play」の話です。

●p5.js のライブラリ「p5play」について基本的な情報をピックアップして記載してみる - Qiita
　https://qiita.com/youtoy/items/5233d40dc24f214c6cf3

今回は、以下の試作に使った内容について書いていきます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/RheJFa7t6mA?si=Ys434u7HxBcaSEPb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

上記の内容は、「2つのグループ化された矩形」があり、「矩形のグループはマウスカーソルの動きに合わせて移動する」というもので、なおかつ、「矩形と円のスプライトが重なった場合、矩形の色が重なった円と同じ色に変化する」というものです。

## 今回の内容
今回の内容は、スプライト同士の衝突判定などを扱う「Collisions and Overlaps」の話で、それをグループ間で扱う話です。

その元になったサンプルは、公式ページに掲載されています。公式サンプルでは、スプライト 1つとグループとの間で overlaps を用いた処理が行われています。

●p5play : Group ＞ Collisions and Overlaps
　https://p5play.org/learn/group.html?page=2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/62f61146-e298-0d81-ffae-33ba81aa2785.png)

公式サンプルは 1つのスプライトとスプライトのグループとの間での話ですが、自分が試したものは、両方ともスプライトのグループになります。

そのようなことができることは、公式ページの説明では書いてあります。
以下が英語の説明文ですが、内容としては「Collisions and Overlaps」は 2つのスプライト間で使うだけでなく、スプライトとグループ・グループとグループでも使えるという記載です。

Collision and overlap functions aren't just for detecting events between two sprites. You can also check for collisions and overlaps between sprites and groups or between groups.

それを、公式プログラムに手を加える形で試してみます。

## プログラムの内容
冒頭に動画で掲載していた、今回のお試しに使ったプログラムは、以下のとおりです。

```javascript
let players, gems;

function setup() {
  new Canvas(560, 456);
  noStroke();

  gems = new Group();
  gems.diameter = 10;
  gems.x = () => random(0, canvas.w);
  gems.y = () => random(0, canvas.h);
  gems.amount = 80;

  players = new Group();
  players.y = () => canvas.h / 2;
  players.amount = 2;

  players[0].x = 0 + 40;
  players[1].x = 0 + 120;

  players.overlaps(gems, test);
}

function test(player, gem) {
  player.color = gem.color;
  gem.remove();
}

function draw() {
  background(240, 255 * 0.7);
  players.moveTowards(mouse);
}
```

gems のほうは、公式サンプルと同じです。
player のほうを、players として 2つのスプライトのグループにしています。

そのグループを使った処理は以下となっています。

- マウス操作で動く players は、グループ全体が同じ動きをする（2つのスプライトで個別に動くことはない）
- overlaps はグループ間で適用
- overlaps に紐付いた test の処理では、gems と player の中の、重なりが生じたスプライト同士で処理が行われる（2つあるうち gem と重なったほうの player の色が、重なった gem の色に変化する）

公式のサンプルでは、「スプライト同士が重なった場合、gem が消える」という動作でしたが、その部分はさらに「player の色が変わる」という要素を加えてみました。

そして、グループ間で overlaps を使う部分の話を説明します。
基本的に、overlaps に紐付けた test の中の処理は、グループ間での処理とする場合も、公式サンプル通りで（1つのスプライトとグループの間での処理を行うのと同じような形で）、両グループのスプライト 1つずつを示す変数（上記では player と gem）を用意して、それを扱えばうまくいきました。

overlaps で扱う元が、単体のスプライトなのかスプライトのグループなのかに関係なく、同じように扱えるのは、今回の事例ではとても楽でした。

さらに、3つ以上のグループで「Collisions and Overlaps」を使ってみるのも面白そうかと思いました。
RDS for OracleでCPUを使っているプロセスを特定してkillする方法

# はじめに
データベースではクライアントから投げられたクエリがぶん回ってリソースを消費してしまう、という事がたまにあります。このような時、通常はOSへログインしてtop等からCPUリソースを消費しているプロセスを特定し、そのプロセスをkillするような対応を取ります。

RDSではOSへのログインができないため、そのような場合にどのプロセスがCPUリソースを消費しているか、特定がし辛いというものが以前はありました。
しかしながら、現在では [拡張モニタリング](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/USER_Monitoring.OS.html) を利用することでOSのリソース使用状況を確認することができます。

今回は RDS for Oracle を利用して、クライアントからのクエリがぶん回っているときに該当のセッションを切断する一連の流れを示します。

# 拡張モニタリング
拡張モニタリングはRDSのOSリソースを確認できるツールになります。
拡張モニタリングはRDSの設定で「拡張モニタリングの有効化」を行うことで利用することができます。

![01-enhanced-monitor-ON.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2313926/8debc27f-800b-375f-2a85-96cbb644c136.png)

OSリソースなどの他、プロセスリストも表示することができ、プロセスリストではCPU利用率などでソートすることが可能です。
どのようなメトリクスが監視可能かは、[拡張モニタリングの OS メトリクス](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/USER_Monitoring-Available-OS-Metrics.html) に記載されています。DBエンジンによって一部違いがあったりしますので、確認ください。

# 拡張モニタリングでのプロセス確認

RDS for Oracleの[Monitoring] (モニタリング) セクションを表示すると、右側にメトリクスのカテゴリを表示するボタンがありますので、そちらから「OSプロセスリスト」を選択します。

![02-enhanced-monitor-00.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2313926/fdd9401f-e540-2264-f5f9-bc1062d0e405.png)

OSプロセスリストは以下のように表示されます。特にCPUは利用されていないことがわかります。

![02-process-list-01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2313926/500c8fdf-b22e-e442-4593-ffe950aa1d89.png)

この状態の時に、裏からSQLをぶん回して負荷をかけると、以下のような状態になりました。
**oracleTESTDB01[7774]** というプロセスがCPUを25%（4VCPUなので1CPU占有）していることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2313926/90873219-1fb6-fdbe-f0a4-cc60f8cb8b8a.png)

該当のプロセスの状態を確認すると、以下のような状況でした。
(v$process の SPID が 7774 であるセッションを確認)
```SQL:セッション情報確認
SQL> select sid, s.serial#, pid, spid, s.username, osuser, s.program
2  from v$process p, v$session s
3  where p.addr=s.paddr
4  and p.spid=7774;

       SID    SERIAL#        PID SPID                     USERNAME   OSUSER     PROGRAM
---------- ---------- ---------- ------------------------ ---------- ---------- --------------------------------------------------
       635       6403         45 7774                     ADMIN      ec2-user   sqlplus@ip-xxx-xxx-xxx-xxx.ap-northeast-1.compute.i
```

該当のプロセス（のセッション）を、SIDとSERIAL#を指定して強制切断します。
```SQL:kill session
SQL> exec rdsadmin.rdsadmin_util.kill(635,6403);

PL/SQL procedure successfully completed.

SQL> /

no rows selected
```

ふたたびOSプロセスリストをみると、CPUを利用していたプロセスはいなくなっていることが確認できます。

![02-process-list-03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2313926/bca0c894-815b-135d-4616-71f73c961a79.png)


# まとめ

RDSではOSにログインできませんが、今回紹介した拡張モニタリングをはじめ色々なメトリクスが用意されているので、何か起きているときの現象を把握することは比較的DB on IaaSと比べても難しくはないと考えています。DBのメトリクスだけだと辛いときは、拡張モニタリングも確認してみましょう！

ちなみに切断された側のセッションは以下のようになってました。
```SQL:切断されたセッション
ERROR:
ORA-01012: not logged on
Process ID: 7774
Session ID: 635 Serial number: 6403


begin
*
ERROR at line 1:
ORA-00028: your session has been killed
```

実はこんなことしなくても、Performance Insightsを利用するともう少し簡単に特定が可能ですので、次回はそちらを紹介します。
指数型分布族

**指数型分布族**とはクラメール・ラオの不等式の等号が成り立つ時の微分方程式の解となる関数を確率密度関数とする確率分布のことである。

単一の実数パラメータ$\theta$に基づく指数型分布族の確率密度関数は以下の形で表すことができる。

$$f(x;\theta)=h(x) ~\rm{exp}[\theta~ T(x) -c(\theta)] $$

$T(x)$は十分統計量となっている。

初学者向けの統計学の本では出て来ないことが多いが、以下の様に極めて重要な概念である。

- 一般化線形モデル(GLM)の定義に使われる。

- 一様最強力不偏検定(Uniformly Most Powerful Unbiased (UMPU) Test)が存在する。

- 共役事前分布を持つ。

また、統計多様体 $\cal{S}$はそれ自身が指数型分布族であり、その部分多様体$M$が$\nabla^{(e)}$-自己平行部分多様体であるための必要十分条件は、$M$が指数型分布族であることである。

情報幾何学では、指数型分布族と双対的な役割を果たす**混合型分布族**という概念も登場する。
[UnrealEngine5]VR環境でLumenとNaniteを有効にする

# 概要
UnrealEngine5のテンプレートプロジェクト「バーチャルリアリティ」で発光するマテリアルを作成した時、うまく発光させることができずつまずいた時の事を記事にまとめます。
（VR環境でのLumen / Naniteは現在正式には対応されてない？ぽいので正式採用されたらこの方法は必要無くなるかもしれません。参考程度でお願いします）

![スクリーンショット 2024-02-19 180828.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/64adb94c-c2aa-98e7-aaad-a651350a5cc8.png)


# 本文
2024年2月現在、LumenとNaniteはforward shadingでは機能しないようです。
編集 > プロジェクト設定 > エンジン - レンダリングを開いて、フォワードシェーディングをOFFにするとVR環境でもLumenとNaniteが使えるようになります。
![スクリーンショット 2024-02-19 160527.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/5e73d269-6d0e-375f-b45e-a6167ce7b124.png)

# おまけ
Lumenが正常に動いた時の設定例を添付します。上手くいかない時は参考にしてみてください！（必須の設定ではありません）
![スクリーンショット 2024-02-19 160618.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/c491155b-8de0-9940-52b5-db0e78d13efd.png)

![スクリーンショット 2024-02-19 160908.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/d8baa211-d5c9-fe02-4a37-d5d9a75b57f2.png)

:::note info
「インスタンス化ステレオ」をONにするとHMDの左右の画像について片方の画像をもう片方に使い回す事で処理負荷を大きく減らすことができるようです。正確な描写を犠牲にするので納得できない時はOFFにします。
:::

![スクリーンショット 2024-02-19 161314.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/58781cd5-d32d-b6bb-e6bc-d029ba134617.png)

:::note info
「レイトレースによるシャドウ」をONにするとLumen使用時、細かい凸凹の影が正常に描写されないことがあるようです。
:::

![スクリーンショット 2024-02-19 174139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/6c9fa14a-6f4a-ecd4-133e-bd59bc0c5ed4.png)

:::note info
MSAAサンプルカウントも適宜調整します。
:::

# 参考リンク
[Definitive Guide to Lumen & Nanite Usually Working Pretty Good for VR in Unreal Engine 5.1](https://www.youtube.com/watch?v=L8t_pOjYVz4)

[Unreal Engine 5.3 VR with Lumen : Optimizing and Troubleshooting](https://www.youtube.com/watch?v=lKFviaw7Zi0)

[UE5の最新グラフィクスを使いこなすための4個の勘所【CEDEC+KYUSHU 2023】](https://www.docswell.com/s/EpicGamesJapan/58GDN9-2023-12-11-035814)
【Xcode】Xcodesで新しいバージョンのXcodeをインストールしたらxedが使えなくなった

# はじめに
おそらく割と使われているであろうXcodes関連で困ったことがあったので記録しておきます。

# 何が起きたのか
私はいつもコマンドでXcodeを開いてるのですが、Xcodesで新しいXcodeをインストールしたら、コマンドが使えなくなりました。

ちなみにXcodeを開くコマンドはこれです。

```
xed .
```

# エラー
```
xcode-select: error: tool 'xed' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
```

# 解決方法
`Xcode-15.2.0.app`はアプリ名です。
XcodesでXcodeをインストールすると`Xcode-バージョン.app`のようになるので、私はこのようになっています。
AppStoreなどからインストールしている方は`Xcode.app`なはずです。
```
sudo xcode-select -s /Applications/Xcode-15.2.0.app/Contents/Developer
```

# おわり
Xcodesを使ってる人は結構多いと思ってるんですけど、実際どうなんですかね？

# Xcodesのリンク置いとく
https://github.com/XcodesOrg/xcodes
【React】非同期処理が終わるまで処理中の表示を出すカスタムフック

## 序
ここ１ヶ月ぐらい、[Electron](https://www.electronjs.org/ja/docs/latest)を使って自分用のMarkdownエディタを作っているのですが、ファイルシステム関連などの非同期処理中に画面操作を制限したい場面が結構出てきたので、カスタムフックにしてみました。

- 既存のHook集に似たようなのがあるかも（未調査）ですが、自分でやってみるのもいいかなと…
- この記事ではスタイリングに[TailwindCSS](https://tailwindcss.com/)を使っているので、他のライブラリと使う場合はうまいことやってください

### `useWaitProcessing`フック

```tsx
import { useState, useEffect } from 'react';

export default function useWaitProcessing() {
  const [promise, setPromise] = useState<Promise<unknown> | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    if (promise === null) {
      setIsOpen(false);
      return;
    }
    //結果はどうあれ、Promiseが終わったら非表示にする
    promise.finally(() => setIsOpen(false));
  }, [promise]);

  // Promiseの処理中に表示するコンポーネント
  const WaitingScreen = () => (
    <div
      className={`fixed inset-0 z-[2147483637] flex items-center justify-center bg-slate-800/80 ${
        isOpen ? 'block' : 'hidden'
      }`}
    >
      <div className="size-10 animate-spin rounded-full border-b-4 border-l-4  border-slate-200" />
    </div>
  );

  return {
    // Promiseを受け取ったら表示して終わるのを待つ
    waitProcessing: (promise: Promise<unknown>) => {
      setIsOpen(true);
      setPromise(promise);
    },
    WaitingScreen,
  };
}
```

### 使う側の例

- 以下の例では、`Do something`ボタンを押すと、2秒かかる処理が発火するようになっています
- `heavyProcess`が終わるまで処理中を示す表示になり、ボタンは押せなくなります

```tsx
import useWaitProcessing from './hooks/useWaitProcessing';

export const App = () => {
  const { waitProcessing, WaitingScreen } = useWaitProcessing();

  const handleClick = (event: React.MouseEvent) => {
    // 非同期処理(2秒待つ)
    const heavyProcess = new Promise((resolve, reject) =>
      setTimeout(resolve, 2000)
    );
    // waitProcessingにPromiseを渡すと、終わるまで処理待ち画面になる
    waitProcessing(heavyProcess);
  };

  return (
    <div className="p-4">
      {/* WaitingScreenコンポーネントは適当なところに差しておく */}
      <WaitingScreen />
      <h1 className="font-bold">Hello!</h1>
      <button
        className="rounded-xl bg-slate-200 p-2 m-2 border border-slate-400 shadow-xl"
        onClick={handleClick}
      >
        Do something
      </button>
      <button
        className="rounded-xl bg-slate-200 p-2 m-2 border border-slate-400 shadow-xl"
        onClick={() => alert('Hello!')}
      >
        Show Message
      </button>
    </div>
  );
};
```
### Stackblitzで動かしてみる

https://stackblitz.com/edit/stackblitz-starters-pmbvyi?file=src%2Fhooks%2FuseWaitProcessing.tsx

## 終わりに
Electronのメインプロセスで実行される処理の待ち用に実装したので、Promiseを渡すだけのお手軽実装にしました。あんまり融通は効きませんが、これで十分なシーンは結構あると思います。
- 単にスピナーを出すだけなので、あまりにも長い処理には向かなそう。せいぜい2〜3秒の処理とかでしょうか
- UIのレンダリングにかかわるデータ取得の待ちには向かなそうです。データ出力とか更新処理とか、そういうシーンで使うのが良さそう
- これを使って、Electronのメインプロセスからレンダラープロセスを止める話も別で書きます
クリーンアーキテクチャ個人的まとめ（序文・Ⅰ部）

## クリーンアーキテクチャ序文・Ⅰ部
序文から読み取れるざっくりしたこの本の内容
1. 本全体の構造
    イントロ（Ⅰ部）
    　　　↓
    プログラムについてのお話（Ⅱ～Ⅵ部、部が進むにつれて規模が大きくなる）
    　　　↓
    アーキテクチャに至るまで（Ⅶ部）

2. 本のテーマ
    普遍的ソフトウェアアーキテクチャのルールについて

3. 著者の課題感
    アーキテクチャの基本的なルールが守れていない、気付いていないひとのための本

4. この本の目的
    自分のアーキテクチャをきれいにするため
    アーキテクチャの良し悪しを議論できるようにする理論を身につけるため
ReactNativeの個人的メリットデメリット

# はじめに

今年に入ってからふとネイティブアプリの開発がしたいなーと思いたち、
技術選定をゆるゆるしてみた結果
[React-Native](https://reactnative.dev/)
で開発してみることにしました。
開発する中で、正直メリットデメリットが大きくあるなあと思い、
個人的にまとめておきたかったので、この記事を書いてみました。

# メリット
## その1: Webエンジニア(Reactでのフロント開発経験あり)が開発する場合学習コストが少ない気がする
元々ネイティブアプリの開発経験がある方はそうでもないと思うのですが、
0ベースでFlutterやSwiftなどを勉強するのって結構ハードルが高い....

その点、React-Nativeは、Reactまたはjavascriptの開発経験がある人からすると
ハードルが一気に下がる気がしました。

あくまで私個人でですが、
学習時間はほぼ0の状態で開発をスタートしても問題ないレベルで開発が進められました。

## その2: クロスプラットフォームでいろんな端末に対応しやすい
React-Nativeで開発すると、
iOS, Android, Web, Windows, Macとさまざまな端末に対応することができます。

今回個人開発でReact-Nativeの開発を行ったのですが、
近々AndroidからiOSに機種変更しようか悩んでたこともあり、
機種変したら別言語で開発もう一回は流石に...って思ってたので、いいなあと思いました。

実際の現場でも
「今はiOSだけだけどゆくゆくは〜」
みたいな要件があるとしたら使ってみるのもありな気がする。

## その3: UIライブラリを入れなくてもいけてるUIのアプリが作れる
React-Nativeの公式ドキュメントを見ていただければわかるのですが、
別でUIライブラリを入れなくても、
ある程度シンプルでいけてるものが作れるようになってます。

あくまで個人開発で自分しか使わないものなんだとしたら
正直事足りるレベルかなと思いました。
（実際の現場ではちょっとシンプルすぎるので検討は必要かもしれません...）

# デメリット
## その1: React-Native独自のコードで記述する必要がある
React-NativeはシンプルにHTML, CSS, Javascriptのコードが書けません。

一部Javascriptの関数などは使うことができますが、
HTML, CSSは独自のタグや記述方法があるので、
ちょっと慣れるまでは大変かもしれないです。

ただ、この辺も公式ドキュメントでわかりやすくまとまってるので、
調べながらやれば全然大丈夫ではあります。

## その2: 導入できるライブラリが少ない
ReactはサポートしてるけどReact-Nativeはサポートしてない
みたいなライブラリが結構多いです。

今回私は、メモアプリを開発していたのですが
monaco-editerが使いたかったのですが、はreact-nativeが対応しているライブラリが、
最終アップデートが何年も前で、インストールしてみたら使えない...みたいな感じでした。
（もし、最新のバージョンで使えるライブラリご存知の方いたら教えてほしいです）

また、デメリットその1にも関係するのですが、
シンプルなHTML,CSS,Javascriptで記述されているライブラリは
入れることができないので結構狭き門な感じでしたね。

比較的新しいフレームワークだと思うので、
これから増えてくれたらこの辺は解決するかもしれません。

## その3: 参考記事が少ない
比較的新しいフレームワークということもあり、
エラーなどの対処方法がまとまっている日本語の記事が結構少ないです。

なので、英語のドキュメントが読み慣れてない人や、
自力でエラー文が読めない&解決できないとかだと結構厳しいかもしれないです。
（私は結構苦しみながらこの辺は開発してました...。）

# まとめ

今回はReact-Nativeで開発をしてみて
個人的にまとめておきたいメリットデメリットをまとめてみました。

あくまで個人の意見ですし、ここまでいろんなことを書きましたが、
私はReact-Nativeの開発すごく好きでした。

シンプルなアプリを作る分には正直全然あり！
むしろ積極的に開発したいなーと思うくらいには面白かった...

元々ネイティブアプリはハードルがなんとなく高くて開発してきませんでしたが、
これを機会に、他のネイティブアプリの開発を
もっと勉強してみて比較してみるのも楽しいなあと思いました。
テストコードの基本

# テストコードとは
自分の書いたコードが正しく動作するか検証するコードのこと。
## テストコードを書く目的
* バグを発見すること
* コードの品質を保証すること
* コードの品質を改善すること
# テストの種類
### 単体テスト
アプリケーション全体の中から 1 つの部分 (通常は単一のクラスや関数) だけを完全に取り出して実行するテスト。
### 結合テスト
アプリケーションの各部分が全体としてどのように連携するかをテストすること。
### E2E (エンドツーエンド) テスト
アプリケーションが期待どおりに動作し、ユーザーのタスクやプロセスの種類を問わずデータフローが適切に機能することを確認するテスト。

具体的には、ユーザーの視点に立って、アプリを利用したときに想定されるシナリオをシミュレートすること。
# おわりに
テストの基本の上澄みの上澄みをまとめました。時間に余裕ができたら具体的なコードなどを追記する予定です。
アプリ開発完全未経美少女エンジニアが最強のToDoアプリを怒りに任せて自作するまでの話#4(2/13~2/19)

### 自己紹介

🌻著者プロフィール🌻
名前：おじょち(25歳)
技術領域：ねっとわーく(よわ)、さーば(よわよわ)、ことりん(げきよわ)
趣味：おさんぽ、くりーむそーだ
X：@ojochi_510510

# 🌻前回までのあらすじ🌻

🌵前回記事🌵：https://qiita.com/OJOCHI/items/c0e9f9c4928802a25556

- Udemyで勉強しているにもかかわらず全く身につかないので、わからないところを頑張って言語化すると決意。。。😢
- 初めてのじゃんけんアプリお披露目💮

# 🌻最近のおじょち🌻

相変わらずUdemyで英語のkotlinコースを黙々とやっています。おじょちです🤗

**😡全然TODOアプリに近づけない（#^ω^）😡**

最近は、UIをガチャガチャ作り出したり、入力したデータをどうやって保存するか、、、
みたいなこともやり始めました。が。
まだまだTODOアプリの道は遠そうです。。。。😢

と、いうわけで、この期間私がやっていたことのご紹介です！

---

- kotlin基本の書き方の学習
    - List
- お買い物リストアプリを作成して、UIと一時的なデータ保存の実装！！
(これめっちゃ大変だった。。。)

---

こんな感じです！💮

ここからは、それぞれを紹介していきます！！

# 🌻kotlin基本の書き方～List編～🌻

## Listってなに？？

- 特定のデータをずらーーーーーーーーっと保存しとくやつ！！
- その中にデータを入れたり取り出したりして使うよ！
- 1つ1つのデータをバラバラに保存するのは大変だし、扱いがめんどくさいから、1つの箱にまとめちゃおう！！！っていうやつです！！

それで、リストには2パターンの作成方法があるらしい！！

**中身を更新可能なミュータブルリスト**

```kotlin
fun main() {
    //中身を変更できる
    val shoppingList = mutableListOf("A","B","C","D")

    shoppingList.add("E")
    shoppingList.remove("C")
    shoppingList.add("F")

    println(shoppingList)

}
```

**中身を更新させないイミュータブルリスト**

```kotlin
fun main() {
    //一度決めたら中身を変更できない
    val shoppingList = listOf("ram","rom")

    shoppingList.add("E")
    shoppingList.remove("C")
    shoppingList.add("F")

    println(shoppingList)

}
```

---

いや、これだけなんです。。。時間が。。。なかったんです。。。😢
来週はもっとわかりやすいものを、、、、持ってきますから、、、、、
※間違ってたり、もっといい解釈があったら積極的にコメントください！！！※

---

# 🌻お買い物リストアプリ🌻



コードはとーーーーーっても長くなってしまったので、画面だけ！

### メイン画面！
![Screenshot_2024-02-19-20-41-26-07_5c004e8f1de8510231a5b7e551383ff6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1566153/b1d5d44b-d4cf-0f22-6fe1-c9d605af4214.jpeg)



### 買いたいもの追加画面！
![Screenshot_2024-02-19-20-41-41-96_5c004e8f1de8510231a5b7e551383ff6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1566153/c0001664-3794-4a8d-8059-477c46664957.jpeg)



### 追加後の画面！
![Screenshot_2024-02-19-20-41-45-69_5c004e8f1de8510231a5b7e551383ff6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1566153/2d987c8c-4175-5cf3-2355-0f6110b03152.jpeg)



---

どうでしょうか！！
なんかもうTODOアプリとしても行ける気がしてこなくもないような？？？

# さいごに

ここまでご覧いただきありがとうございました！🤗

来週はボタンの実装などを紐解いていく予定なのでお楽しみに！！

次回：🌻02/27更新🌻
→　2/20~2/26までの進捗を書きます！
Temperature MCP9701 の関数化(浮動小数点)(STM32C011J4M7)(リッチプログラミング)


x MCP9701-E/TO 販売コード 103199

x 過去ログを見ょ!!

目的
温度センサーMCP9701のテスト

いろいろ
リッチ、リッチじゃん((中央線の)中野や湘南海岸の方言)


結果


![o_cop966.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e0825b12-7c95-329e-18f2-17efc7337165.jpeg)


![o_cop967.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e6dcf371-86bb-3102-95be-cb50cc5ec852.jpeg)





プログラム

```c++



//SER_Temperature_MCP9701_C011_1


//インクルド
#include <Arduino.h>
#include "Temperature_MCP9701.h"


//初期化処理
void setup()
{

  delay(3000); //not delete (消しちゃダメだよ!!)

  //シリアルの初期化
  Serial.setTx(PA8);
  Serial.setHalfDuplex();
  Serial.begin(9600);

} //setup


//メインループ
void loop()
{

  //センサーの値を読み込む
  analogReadResolution(12); // ADC 12bit mode
  int Sensor = analogRead(PA12); // センサーの読み取り値

  //温度の表示
  float Voltage = Sensor * ( 3.3 / 4096.0 );
  float Temperature = Temperature_MCP9701(Voltage);
  Serial.println(Temperature);

  //1秒の待ち
  delay(1000);

} //loop



```

Temperature_MCP9701.h


```c++


// Temperature_MCP9701.h 
//
// ex 3.3V analogReadResolution(12);
//         float Sensor = analogRead(A2);
//         float Voltage = Sensor * ( 3.3 / 4096.0 );
//         float Temperature = Temperature_MCP9701(Voltage);
//
float Temperature_MCP9701(float Voltage){

  return((Voltage - 0.4) * (1.0 / 0.0195));

}//Temperature_MCP9701



```
Azure OpenAI が ISMAP に登録されたゾ！！

こんにちは、アーキテクトのやまぱんです。
補足コメントや質問、<font color="red">いいね、拡散</font>、是非お願いします🥺！
間違ってたら<font color="red">優しく</font>教えてください！

今回はタイトル通り、Azure OpenAI が　ISMAP に登録されたことの記事です。

## そもそも　ISMAP とは
+ 公式の定義
公式の定義は以下です
> 政府情報システムのためのセキュリティ評価制度 (Information system Security Management and Assessment Program: 通称、ISMAP (イスマップ)) は、政府が求めるセキュリティ要求を満たしているクラウドサービスを予め評価・登録することにより、政府のクラウドサービス調達におけるセキュリティ水準の確保を図り、もってクラウドサービスの円滑な導入に資することを目的とした制度です。
出典 : [ISMAP概要](https://www.ismap.go.jp/csm?id=kb_article_view&sysparm_article=KB0010005)

+ 民間企業が期待できるメリット
・利用者側の情報システム担当者のサービス選定負荷軽減:
ISMAPを活用することで、情報システム担当者はセキュリティ基準を満たすクラウドサービスをリストから選ぶことができ、選定プロセスが効率化されます。
・クラウドサービス提供側はセキュリティ面での懸念を払拭できる:
ISMAPに登録されたクラウドサービスは、政府からの信頼性を得やすくなり、認知と評価が高まります。
・クラウドサービス提供側はビジネスチャンスの拡大につなげられる:
ISMAPはクラウドサービスの選定基準になるため、登録されたサービスはビジネスチャンスが拡大する可能性があります。

なので ISMAP に載ることは、Azure OpenAI ,そして Azure のビジネスチャンスの拡大に寄与すると考えられます。

## 確認する
+ ここで　”Azure” と検索して
https://www.ismap.go.jp/csm?id=cloud_service_list

下記のをクリック
> 登録番号	C21-0012-2
> クラウドサービスの名称	Microsoft Azure, Dynamics 365, and Other Online Services

+ そのリンク先にある下記をクリック
https://www.ismap.go.jp/csm?id=cloud_service_list_detail&sys_id=aca3e34e938c8e100072f4fe3bba10ba
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/cb1441b5-9eb6-f843-86b2-845385cabdd4.png)

+ 言明の対象範囲	[Microsoft Azure, Dynamics 365, and Other Online Services_言明対象範囲.pdf](https://www.ismap.go.jp/sys_attachment.do?sys_id=87eff83e935cce500072f4fe3bba10d7) をクリック

そしたら、下記の通り 登録されていることが分かります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982508/6b60ed57-a6f3-944d-ea54-8875aada8f90.png)


以上です。
自分のためだけのWEB入門　〜DNSって知ってるか〜

# ドメインとは

`URL`

のことを指している

URLとは、言葉の使い方が異なる。

**http://honyarara.com**

これは、URLともいうし、ドメインとも言う

で、

"URLをクリックする"というが、"ドメインをクリック"するとは、あまり言わない。

"ドメインを変更する"というが、"URLを変更する"とも言うね。

ドメインは、名前空間に関する話で出てくる。

ドメインを変えたい＝URLの一部を変えたい
と言うこと


# DNS とは

`DNS＝名前解決`

名前解決：ドメイン名すなわちURLから、IPアドレスを算出すること

DNSサーバーが、ドメイン名とIPアドレスの紐つけ表をデータベースに格納しているので、
[そちら](https://ja.wikipedia.org/wiki/DNS%E3%82%B5%E3%83%BC%E3%83%90)にアクセスすると、名前解決できる



# ドメイン名とIPアドレスの対応について

https://www.cman.jp/network/support/ip.html

このサイトから、whois検索が可能

名前解決ができる
MVP開発

MVP開発は、製品の核となる機能を備えた最小限のバージョンを迅速に市場に投入し、初期フィードバックを得る戦略です。このアプローチは、スタートアップや新規事業に特に有効で、市場ニーズの探索とリスクの最小化を目指します。JIITAKでは、MVP開発を通じて、アイデア検証からプロトタイピング、ユーザーテストまでのサポートを提供します。技術面では、React.js、Vue.js、Node.js、Laravelなどを駆使し、効率的に開発を進めます。eコマース、サブスクリプションサービス、ソーシャルメディアアプリなど、様々なプロジェクトで成功を収めています。JIITAKは、市場ニーズに応える製品開発において、クライアントの信頼できるパートナーです。
https://www.jiitak.jp/services/mvp-development
macのUSキーボードのcaps lockとcontrolキーをOSの標準機能で入れ替える

2003年2月のiBook購入時からUSキーボードを使い続けている。MacのUSキーボードはcaps lockがAキーの左側にあり、controlキーが左optionキーの左側にあり、Emacsなどでcontolキーを使用する場合に使いづらい位置にある。

この配列を変更するためにキーボードユーティリティアプリケーションのKarabiner-Elementsを使用して変更していた。

macOS Sonoma以前は確認していないがmacOS Sonomaではシステム設定でcaps lockとcontrolキーを入れ替えられる機能があることに気付いたのでその設定手順を以下に示す。

# 設定手順

1. `システム設定`を開く
1. 左側のサイドバーをスクロールして``キーボード``を選択する。
1. 右側に表示される``キーボードショートカット``ボタンを押す。
1. 表示されたウィンドウのサイドバー一番下の``修飾キー``を選択する。
1. 設定したいキーボードを選択する。
1. 右側の`Caps Lockキー`に`Control`を割り当てる
1. `Control`に`Caps Lock`を割り当てる。
1. 右下の`完了`ボタンを押す。

![キーボード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72921/1a3309dc-a22d-f1b4-d198-154b62e893e2.png)
![内蔵キーボード用.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72921/c6bbd776-b626-483c-9c3a-bd2263e809d7.png)

Karabiner-Elementsを併用する場合はKarabinerの仮想キーボードに対しても同様の設定をしておく必要がある。

![空白_Skitch_キャンバス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72921/990ad96f-5c9c-99ac-cc43-445fffb98a0d.png)
wsl上でpyenvを用いた環境構築

# ライブラリ
```
sudo apt update
sudo apt upgrade -y
```



↓pyenvの依存ライブラリ

```
sudo apt install libffi-dev zlib1g zlib1g-dev libsqlite3-dev make gcc

sudo apt install build-essential libssl-dev zlib1g-dev libbz2-dev libreadline-dev libsqlite3-dev curl libncursesw5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev
```


# pyenv

https://github.com/pyenv/pyenv?tab=readme-ov-file#basic-github-checkout

```
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(pyenv init -)"' >> ~/.bashrc
```

```
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.profile
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.profile
echo 'eval "$(pyenv init -)"' >> ~/.profile
```

```
pyenv install 3.*.*
```


# talib

```
wget ******tar
tar -zxvf ta-lib-0.4.0-src.tar.gz
cd ta-lib
./configure --prefix=/usr
sudo make
sudo make install
pip install TA-Lib
```

# py_dev
```
sudo apt install python3-dev
```

# psycopg
```
sudo apt install libpq-dev   
pip install psycopg2
```
Amazon API Gateway vs MuleSoft

2024年1月時点のAmazon API GatewayとMuleSoftの比較になります。

## Amazon API Gatewayとは
Amazon API Gatewayとは、さまざまな規模に応じた「Web API」の作成や公開、管理を簡単に行えるサービスになります。
フルマネージドなのでインフラの管理が一切不要で、開発者はサービスの開発だけに集中できます。
WAF、Lambda、Cognito、IAMなどのサービスと連携が可能です。
HTTP、REST、WebSocket APIが作成可能です。
## MuleSoftとは
MuleSoftは、企業がアプリケーションやデータを統合するための統合プラットフォームです。
APIの作成、データの接続、ビジネスプロセスの自動化など、さまざまな統合タスクを効率的に実行するためのツールや機能を提供しています。
MuleSoftはAPIの構築において、アプリケーションを3 層に分割するアーキテクチャを提唱しています。
この3層アーキテクチャは、クライアントの差異を吸収するExperience層、データ加工を行うProcess層、データソースからデータを取得するSystem層の3つの層から構成されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694674/d04d27f3-4ebb-6965-8eab-9c266f663ac6.png)


このようにアーキテクチャを適切に構築することで、API の再利用を促進し、アジリティの高い開発が可能になります。
MuleSoft はローコード開発をサポートしており、Eclipse ベースのIDE からドラッグアンドドロップの操作を繰り返すことで、簡単にAPI の機能やビジネスロジックを組み立てることができます。
これにより、開発者はコーディングにかかる時間や労力を削減し、迅速にAPIの開発が可能となります。
AWSとはVPCピアリングやTransit Gatewayを介して接続が可能です。

## Amazon API Gateway vs MuleSoft
|製品  |メリット  |デメリット  |
|---|---|---|
|Amazon API Gateway|費用が安い<br>ネット上に情報が多い<br>HTTP、REST、WebSocket APIの簡単な作成とデプロイが可能<br>AWSサービスとの親和性が高い<br>使用量ベースの課金<br>簡単に始められる<br>フルマネージドなので、負荷分散やスケーリングが不要|オンプレでは使えない<br>ローカル上で開発やテストができない<br>MuleSoftに比べると機能が少ない|
|MuleSoft  |他のSalesforce製品との親和性が高い<br>APIの再利用がしやすい<br>APIのユニットテストができる<br>API開発専用のIDEが存在する（Anypoint Platform）ためローカル上で開発やテストが可能<br>管理用ページのUIが綺麗で使いやすい<br>リアルタイムダッシュボードやアナリティクスなど機能が豊富<br>様々なサービスと接続可能(200以上のコネクタをサポート)<br>クラウドでもオンプレでも使用可能|費用が高い（料金は非公開のため公式サイトから直接問い合わせて欲しいのですが結構高いです）<br>学習(RAMLやDataWeaveなど)<br>コストが高い<br>ネット上に情報が少ない<br>サポートが英語のみ<br>デプロイ時にワーカ数やコア数を指定るす必要がある|
## 最後に
APIの本数が少ない場合や費用を抑えたい場合は、API Gatewayを使用するのが適しています。
一方で、大規模開発や複雑な統合が必要なプロジェクトには、MuleSoftを利用することで大きな恩恵を受けることができます。
クリーンアーキテクチャ個人的まとめ（Ⅱ部）

## クリーンアーキテクチャⅡ部
### 個人的概要

- プログラムの考え方、歴史的背景が抑えられている
- 特に5章のオブジェクト指向プログラミングではクリーンアーキテクチャで意識して触れられている
- プログラムの依存関係についての基礎的な概念について述べられている
- プログラムをIOデバイス非依存にするべき考え方は、対象は変われどクリーンアーキテクチャでは一貫して言及されているポイント
- インターフェースを用いて依存関係を逆転できること（超重要）


### ポイント
#### オブジェクト指向
1. カプセル化
そのプログラム（関数など）の使い方だけを知っていれば、十分扱えるように一連の処理をまとめること。
メリットはロジックに対して不正な操作から保護することや、複雑な処理を表面上見えなくすることでプログラムを利用しやすくするなどがある。

2. 継承
スコープ内の変数と関数のグループを再度宣言したもの。
イメージとしては、交換可能なパーツたちをつくるための規格をまとめるもの。

3. ポリモーフィズム
ある1つの関数（メソッド）の呼び出しに対し、オブジェクト毎に異なる動作をすること。
同じ鳴く処理でも動物がことなれば、鳴くという事実は同じだが鳴き声が変わるのと同じ。


#### 依存関係の逆転

基本的な依存関係は以下の順番で依存する（システム→制御→ソースコード）。
- ソースコードの依存関係は、制御の流れに従っている
- 制御の流れはシステムの振る舞いによって決まり、ソースコードの依存関係は制御の流れによってきまる

しかし、ポリモーフィズムを利用することでソースコードの依存関係は(たとえどこにあっても逆転できる)こととなり、ソフトウェアアーキテクトに大きな影響を与えた。
このことにより、システムの依存関係を並び替えるだけで、他の方法を使わなくてもデータベースとユーザーインターフェース(UI)をビジネスルールに依存させることができる

![image-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682846/9e7fb983-13d6-3147-93a8-8a7bb7b19489.png)
Azure Cosmos DB

# Azure Cosmos DBとは
Azure Cosmos DBとはAzureに搭載されているマルチモーダルデータベースです。Azure Cosmos DBで6タイプのDBを構築することができます。

- NoSQL
- MonGoDB用
- PostgreSQL用
- Apache Cassanda
- Table用
- Apache Gremlin

## NoSQL
 データをドキュメント形式で格納し、SQL構文による項目のクエリが可能な、Azure Cosmos DBのネイティブAPIです。
 柔軟なスキーマが必要な場合や、ドキュメントベースのデータモデルを使用するアプリケーションに適しています。

## MongoDB
 MongoDBのワイヤプロトコルに互換性があるAPIで、BSON形式でデータをドキュメント構造に格納します。
 既存のMongoDBアプリケーションがあり、Azure Cosmos DBへの移行を容易にしたい場合や、MongoDBエコシステムを利用したい場合に適しています。

## PostgreSQL用
 PostgreSQLを使用したアプリケーションで、スケールアウトや分散処理が必要な場合に適しています。

## Azure Cosmos DB for Apache Cassandra
Apache Cassandraの列指向スキーマと互換性のあるAPIで、分散型NoSQLデータベースの特性を提供します。大量のデータを扱い、高度な分散処理が必要なアプリケーションでCassandraを使用している場合に適しています。

## Azure Cosmos DB for Apache Gremlin
グラフデータベース用のAPIで、データをエッジと頂点として格納し、グラフクエリをサポートします。
複雑な関係性を持つデータを扱うアプリケーションや、グラフデータモデルが適している場合に使用します。

## Azure Cosmos DB for Table
キー/値形式でデータを格納するAPIで、Azure Table Storageの制限を克服します。
シンプルなキー/値データストアが必要な場合や、OLTP(オンライントランザクション処理)シナリオに適しています。

# DBの階層構造
- DBアカウント
- DB
- コンテナ
- 各項目（コレクション、テーブル、グラフ）
- ドキュメント、ノード、行

のような階層構造で管理しています。

# まとめ
適切なDBタイプを使用することが重要です。
WordPressのローカル環境構築のやり方

# はじめに
ブログやWebサイトを作成したことがある人にとってはWordPressを使ったことがある人や聞いたことがあると思います。WordPressは誰でも簡単にブログやWebサイトを作成できるということで有名でCMSを利用しているWebサイトの63%以上がWordPressで作られているそうです。  
そんなWordPressを使って私も何か作ってみたいと思い、ローカル環境の構築について記事を残したいと思います。

# ローカル環境構築のツール
ローカル環境の構築といえば、Docker、XAMPP、MAMPが主流ではありますが、WordPressを使う上では「Local」を使用するのが便利です。  
WordPressに特化されているツールで、WindowsとmacOSでも使えます。

# Localのダウンロード
まずは、Localをダウンロードします。  
[Local公式サイト](https://localwp.com/) に移動し、画面右上にある「DOWNLOAD」を押下します。プラットフォームや名前、メールアドレス、電話番号を入力し、最後に「GET IT NOW!」を押せば自動的にダウンロードが開始されます。  
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FiH55FcILaseg0xAu?alt=media&token=66386b0b-349c-47aa-be21-58ab0c4d186c)

「local-8.2.1-windows.exe」というファイルがインストールされれば、これをダブルクリックしセットアップにて、インストール先などの設定後にスタートさせればパソコンにLocalをインストールさせることができます。

# WordPressをインストール
Localを使って、実際にローカル環境にWordPressを構築します。
Localを起動させたら「Create anew site」を押下します。  
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2Fo88aI2tmJYvHJzi3?alt=media&token=537bc90c-3f6e-4e1f-a606-8add0c3019a9)

新しく作成するかテンプレートから作成するかの選択しが表示されます。今回はLocalでの環境構築は初めてなので「Create a new site」を選択します。  
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FixKnZVfvWSVUBiNu?alt=media&token=b8a1dff4-13c5-4aeb-ab54-0ba464b2f7f4)

次にサイト名を決めます。
サイト名を決めるとドメインやパスは自動で設定されます。  
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2Fdbo2XYn5bgG7rp8j?alt=media&token=c526c825-e1e1-4845-ba1a-3100910b024c)

サイト名の次はPHPやサーバー、データベースの設定を行います。基本的にはそのままの設定で良いので「Preferred」を選択します。任意のバージョンを使いたい場合は「Custom」を選択して指定することも可能です。
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FPI0TIhN6g1QXfhk6?alt=media&token=d33b838a-10f7-4dd7-8225-8afd5461326d)

最後にWordPressのダッシュボードにログインするためのユーザ―名やパスワードを入力します。WordPressのメールアドレスも設定できますがデフォルトで問題ないです。  
また、オプションとしてマルチサイトにする設定も可能です。
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2F3uqfNHBimI5EvwxC?alt=media&token=8a648608-82ce-4e76-9042-ea69621b124c)

これでローカル環境へのWordPress構築は完了です。  
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2F4dXL95jMVi9LVo3f?alt=media&token=4770750a-d9cb-4e59-8d99-54aa6b8a5e9f)

# 管理画面とサイトを表示してみる
WordPressの構築が終われば実際に管理画面やサイトを表示することができます。  
管理画面はLocalの「WP Admin」を選択することで表示ができます。ログインが必要になりますので、事前に設定したユーザー名とパスワードを入力してログインすることになります。    
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FUoQN0P8Kcrm5pDys?alt=media&token=50732aca-4be1-49b2-9ee4-5db17aef11f0)

サイトはLocal「Open site」を選択することで表示ができます。  
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FR0k7sKvt7KKwWcdj?alt=media&token=61fe7f46-eb8a-4d73-bfd1-2f83ac9121ab)

# 最後に
今回はWordPressをローカル環境に構築することを解説しました。  
WordPressをローカル環境に構築することはとても簡単で初心者でもハードルは高くないと感じました。
一度ローカルに環境を構築してしまえば実際にWordPressを触って試せることの幅が大きく広がると思います。
Next.jsでTailwindCSSを使用する

# はじめに
前回の続きです。

前回の記事

https://qiita.com/keitaMax/items/f6c26c649379f6e68301

前回作成したカウントアップのアプリをもとに開発していこうと思います。
今回は以下を目標としたいと思います。

1. Tailwind CSSで色を付ける
2. VSCodeでファイル保存したときに自動整形できるようにする

# 1. Tailwind CSSで色を付ける
Tailwind CSSをNext.jsにインストールしなければいけませんが、前回Next.jsをインストールしたときに、Tailwind CSSの欄をYESにしていたのですでにインストールされています。

もしインストールされていない方はTailwind CSSの公式サイトを見ながらやってください。
[Install Tailwind CSS with Next.js（公式サイト）](https://tailwindcss.com/docs/guides/nextjs)

そのためすぐにTailwind CSSを使えると思ったのですが、前回appRoutingをtrueに設定していたせいで、pageRouteingを使用した今回のアプリでは1手間ないとTailwind CSSを使用できなかったので簡単に手順を残しておきます。

#### Tailwind CSSを使えるようにする（できてる人は飛ばしてください）
まず、srcフォルダ配下にstylesフォルダを作成します。
そして、stylesフォルダの中にglobals.cssファイルを作成します。
```css:globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
そして、pagesフォルダの直下に_app.tsxファイルを作成して、globals.cssファイルを読み込むようにします。
```tsx:_app.tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

```
これでnpm run dev を実行しなおすとTailwind CSSが使用できるようになります。


#### Tailwind CSSを使ってみる

前回作成したカウントアップアプリのボタンの背景色を赤にしたいと思います。

`src\views\CountView\index.ts`を以下のように修正します。

```tsx:index.ts
import React from "react";
import { useCountView } from "./hooks";

export const CountView = React.memo(() => {
  const { count, addCount } = useCountView();
  return (
    <div>
      <p>{count}</p>
      <button className="bg-red-500" onClick={addCount}>
        カウントアップ
      </button>
    </div>
  );
});
CountView.displayName = "CountView";
```
これで`http://localhost:3000/count`を開いてみるとボタンの色が赤くなっていると思います。
![スクリーンショット 2024-02-18 100855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/b33fd37a-19db-86f8-a1e9-18aeaa72e7bc.png)

これでTailwind CSSが使用できる状態になりました。


# 2. VSCodeでファイル保存したときに自動整形できるようにする

Tailwind CSSの公式が推奨しているように、自動でクラスの順序を入れ替えられるようにしたいと思います。

まずは下記コマンドで各種プラグインをインストールします。
```
npm install -D prettier eslint-config-prettier eslint-plugin-tailwindcss
```
.eslintrc.jsonファイルも以下のように編集します。
```.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "root": true
}

```
これでVSCodeを立ち上げなおすと、自動でTailwind CSSのClassNameの順番が入れ替わるようになります。

以下のbeforeの状態でファイルを保存するとafterの状態になります。

```react:before
  <button className="bg-red-500 hover:bg-red-200 px-2 py-4" onClick={addCount}>
    カウントアップ
  </button>
```
```react:after
  <button className="bg-red-500 px-2 py-4 hover:bg-red-200" onClick={addCount}>
    カウントアップ
  </button>
```

# おわりに
今後、GitHub上に上げたときにESLintを動かしてwarningが出ていないかのチェックなどをできるようにしていきたいと思います。

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

# 参考文献
https://www.npmjs.com/package/eslint-plugin-tailwindcss

# 次の記事

https://qiita.com/keitaMax/items/ca9692a20d9227f7e3a6
【Reactチュートリアル：三目ならべ】has already been declared の原因と解決方法

## has already been declared.の原因と解決

### 起きたこと
Reactチュートリアルで三目ならべの「もう一度Stateをリフトアップ」の項目をやっていた時に、以下のようなエラーが出た。

![スクリーンショット 2024-02-19 19.36.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3692854/3316c6ad-891d-c8a9-0b2a-ca6b535c32cf.png)

>Cannot assign to read only property 'message' of object 'SyntaxError: /src/App.js: Identifier 'xIsNext' has already been declared.

### 原因
エラー内容的には、「変数がすでに宣言されてます」が原因。

### 解決方法
xIsNextという変数が２回定義されていた。
一方を削除したら解消された。
Hexabase Flutter SDKの使い方（コメントの作成と保存、削除）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業向けのBaaS（Backend as a Service）を提供しています。認証やデータストア、ファイルストレージ、リアルタイム通知などの機能があり、企業向けのシステム開発に必要な機能をまるっと提供しています。

APIはREST APIとGraphQLを提供しています。そのAPIをラップしたSDKも開発を進めています。SDKは現在、TypeScriptとDart向けに開発しています。Dart向けのSDKは、もちろんFlutterでも利用できます。

この記事ではFlutter SDKについてインストールと、データストアのアイテムに対するコメントのCRUD操作について解説します。

## パッケージとソースコード

パッケージはpub.devで公開しています。

[hexabase | Flutter Package](https://pub.dev/packages/hexabase)

ソースコードはGitHubにて公開しています。ライセンスはMIT Licenseです。

[hexabase/hexabase-dart: Hexabase SDK for Dart & Flutter](https://github.com/hexabase/hexabase-dart)

## インストール

インストールは `dart pub get` で行えます。

```
dart pub get hexabase
```

## インポート

SDKをインポートします。

```dart
import 'package:hexabase/hexabase.dart';
```

## 初期化

まずインスタンスを作成します。

```dart
var client = Hexabase();
```

別なファイルで再度インポートした場合には、以下でインスタンスを取得してください。

```dart
var client = Hexabase.instance;
```

## アイテムの作成

データストア（クラウドデータベース）の行相当のデータがアイテムです。以下のようにして、新しいアイテムを作成します。

```dart
await client.setWorkspace('YOUR_WORKSPACE_ID');
var project = await client.currentWorkspace.project(id: 'YOUR_PROJECT_ID');
var datastore = await project.datastore(id: 'YOUR_DATABASE_ID');
// アイテムを作成
var item = await datastore.item();
// 保存しておく
await item.save();
```

## コメントの作成

新しいコメントは、 `item.history()` で作成します。 `set` で値（コメント本文）を設定し、 `save` で保存します。

```dart
var history = item.history();
history.set('comment', 'test');
await history.save();
```

## コメントの取得

コメントを取得する際には、 `item.histories()` を使います。 `item.save()` の時点で1つ目のコメントが保存されているので、以下の場合返ってくるのは2つのコメントです。

```dart
var histories = await item.histories();
expect(histories.length, 2);
```

## コメントの更新

コメントの更新は保存と同じで、 `save` メソッドを使います。

```dart
history.set('comment', 'test 2');
await history.save();
```

## コメントの削除

コメントの削除は、 `delete` メソッドを使います。

```dart
await history.delete();
```

## まとめ

コメントはアイテムに紐付いて保存されており、その結果をSignalR使って受け取ることができます。リアルタイム通知やコラボレーション機能を使うのに利用できますので、ぜひ活用してください。

HexabaseのFlutter SDKを使って、堅牢なWebアプリケーションを開発してください。

[hexabase \| Dart package](https://pub.dev/packages/hexabase)
FreeCADによるトポロジ最適化をやってみた

# はじめに
CAD/CAEの分野でトポロジ最適化という言葉をよく聞きます。以下の龍野さまの資料を拝見して、フリーのCAD「FreeCAD」でトポロジ最適化が行えることを知り、今回はそれを試しました。

https://speakerdeck.com/juntatsuno/freecadniyorutoporozizui-shi-hua

# 手順
上記資料の手順に沿って行いました。
1. ブラウザで
https://github.com/calculix/beso
のサイトを表示させます。緑色の「Code」をクリックして[DownLoad ZIP]を実行します。これにより、このサイトに表示されているファイルがzipファイルで一括ダウンロードされます。

2. zipファイル展開して、FreeCADの「Macro」フォルダに全て格納します（不要なファイルもありますが…）。私の環境では「Macro」フォルダは下図の場所にありました。![BesoファイルはMacroフォルダに全て格納.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/0c8e7302-b2d9-f0db-41bd-199c1ae1d557.jpeg)

3.FreeCADでモデルを作成します。
幅20mm、厚さ30mm、長さ200mmの直方体について両端を支持し、底面全体に下向き荷重1000Nを加わる場合について解析します。モデルは長さ1/2（100mm）としたものを作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/7c4ac473-848e-91df-f9a3-b77a73e40c74.png)

4.作成したモデルで解析します。
①メッシュの作成条件
計算精度は求めないため二次精度のチェックは外しています。
材料はSteel-1C45（炭素鋼S45C相当材）としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/f0e14629-99b5-9721-ac8f-0644134d482a.png)

②境界条件の設定
境界条件は以下のように設定しました。
- 左端面を長さ方向の対称面とするため、その面のx方向の変位を0とする
- 右端面の下エッジを支点とするため、その位置のz方向の変位を0とする
- 底面全体に下向きに荷重500Nを加える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/c373de8c-2917-f12b-c976-4814654479c3.png)

③解析
作業ディレクトリは、分かりやすい場所に指定しておくと、トポロジ最適化をするとき作業しやすくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/8be60fe9-502b-dcdd-bd53-61518d9a0e2d.png)

④解析が終了したら、上記の作業ディレクトリに以下のようなファイルが作成されていることを確認します。このうち、拡張子inpファイルをトポロジ最適化に使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/f3fccf95-9a7f-6aa7-aa07-eaa2a91e0d79.png)

5.トポロジ最適化を行います。
①まず、マクロファイルを開きます。メニューの「マクロ(M)」－マクロで「ユーザーマクロの場所：」に手順2で設定したフォルダを指定します。これにより、ファイル一覧が表示されるので、beso_fc_gui.pyを選択して「実行」をクリックします。

![マクロファイルの選択.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/cabca12a-f730-8c60-ff66-ed6a9ea6bcb5.jpeg)

②Select analysis fileで手順4の解析で設定した作業ディレクトリ内のinpファイルを指定します。ここではその他の設定として、Mass goal ratioを0.2としています。モデルの質量が初期状態の20％（つまり80％減）になったら終了という設定です。設定が終わったら、Generate conf. file and run optimizationをクリックしてトポロジ最適化を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/b87b65b5-ff20-ad50-5e41-22a8276bcd23.png)

③結果です（実行中にも途中経過がグラフ表示されます）。
![Mass.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/71581134-9379-0dbe-84f9-54b7951e23a4.png)
![energy_density_mean.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/42322356-e2bc-1397-3b7c-d99a72ebdcda.png)

④形状の変化です（1回の計算ごとに作成されるfile020_state1.inpなどをFreeCADに読み込ませたものです）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/9a1a0e69-f30d-3601-a75a-7ab60d236bc0.png)

# 終わりに
- FreeCADをお使いの方はぜひ試してほしいと思います。
- ダウンロードしたマクロファイルは、Macro以外の場所では動作しませんでした。
【Ruby】each_slice(n)メソッドの流れ

## each_slice(n)メソッドとは。
> n 要素ずつブロックに渡して繰り返します。
要素数が n で割り切れないときは、最後の回だけ要素数が減ります。
ブロックを省略した場合は n 要素ずつ繰り返す Enumerator を返します。
https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/each_slice.html

## 練習

- 標準入力
```
1 2 3 4 5 6 7 8 9
```

- each_sliceメソッド処理
```ruby
nums = gets.chomp.split(' ') 
# nums = ['1', '2', '3', '4', '5', '6', '7', '8', '9']

nums.each_slice(3) do |group| 
  # each_slice(3)により配列を3要素ごとに分割。['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9']
  puts group.join(' ')
  # 配列要素を半角スペースを入れて結合。"1 2 3", "4 5 6", "7 8 9"
  end
```
- 出力結果
```
1 2 3
4 5 6
7 8 9
```
Azure Blob ストレージのさわり

## Azure Blobストレージの階層構造
Azureストレージは、「ストレージアカウント」「ストレージコンテナ」「Blob」の三層構造になっている。

**ストレージアカウント**
``` 
http://mystorageaccount.blob.core.windows.net
```
**ストレージコンテナ**
```
https://myaccount.blob.core.windows.net/mycontainer
```
**Blob**
```
https://myaccount.blob.core.windows.net/mycontainer/myblob
```

このような構造になっている

## Blobの中の階層構造
- hot層
- cool層
- cold層
- archive層

Blobには大量の非構造化データを格納する。データへのアクセス頻度に応じて、層が分かれる。hot層は高頻度で冷たくなるほど低頻度です。データのアクセス頻度に応じて最適化されます。

## ライフサイクルポリシー
ライフサイクルポリシーは、データへのどの層にどのタイミングで移動するのかを定義したものです。
```
{
  "rules": [
    {
      "name": "ruleFoo",
      "enabled": true,
      "type": "Lifecycle",
      "definition": {
        "filters": {
          "blobTypes": [ "blockBlob" ],
          "prefixMatch": [ "container1/foo" ]
        },
        "actions": {
          "baseBlob": {
            "tierToCool": { "daysAfterModificationGreaterThan": 30 },
            "tierToArchive": { "daysAfterModificationGreaterThan": 90 },
            "delete": { "daysAfterModificationGreaterThan": 2555 }
          },
          "snapshot": {
            "delete": { "daysAfterCreationGreaterThan": 90 }
          }
        }
      }
    }
  ]
}
```

## Blobデータのリハイドレード
アーカイブ層にあるデータはオフラインなので、アクセスして読み書きすることができません。アーカイブ層のデータをオンライン層にコピーして使用する必要があります。この作業をリハイドレードといいます。
1~10までの足す引く掛け算の結果をランダムに読み上げていくPGM

<h3>1~10までの足す引く掛け算の結果をランダムに読み上げていくPGM</h3>
1~10までの足す引く掛け算の結果をランダムに読み上げていくPGMをpowershellで作成しました。

githubURL:https://github.com/NanjoMiyako2/TasuHikuKakeru/tree/main
<hr>

<h3>作成までの流れ</h3>
まず、powershellで足す引く掛け算の一連の結果を出力させ(TasHikuKakeruText.ps1)、
出力結果のファイルを元に、結果をランダムに読み上げるPGM(TasuHikuKekeruRandomYomiagehoge.ps1)を作成しました。
<hr>

<h3>PGM内容</h3>
TasuHikuKakeruText.ps1

```powershell
﻿$text1 = ""
$text2 = ""
$text3 = ""

for($i = 1; $i -lt 11; $i++){

    for($j=1; $j -lt 11; $j++){
        $text1 = [string]$i + "たす" + [string]$j + "は"
        #echo $text1
        $text2 = [string]($i+$j);
        #echo $text2

        $text3 = $text1 + "," + $text2
        echo $text3

        $text1 = [string]$i + "ひく" + [string]$j + "は"
        #echo $text1
        $text2 = [string]($i-$j);
        #echo $text2

        $text3 = $text1 + "," + $text2
        echo $text3

        $text1 = [string]$i + "かける" + [string]$j + "は"
        #echo $text1
        $text2 = [string]($i*$j);
        #echo $text2

        $text3 = $text1 + "," + $text2
        echo $text3

    }

}

#テキスト読み上げ用
Add-Type -AssemblyName System.Speech

#$ps_speak = New-Object System.Speech.Synthesis.SpeechSynthesizer
#$ps_speak.SelectVoice("Microsoft Haruka Desktop")
#$ps_speak.Speak("1たす8は")
#$ps_speak.Speak("-5")
```
TasuHikuKakeruRandomYomiagehoge.ps1
```powershell
﻿#テキスト読み上げ用
Add-Type -AssemblyName System.Speech

$ps_speak = New-Object System.Speech.Synthesis.SpeechSynthesizer
$ps_speak.SelectVoice("Microsoft Haruka Desktop")

#音声読み上げ用ファイルを読み込み
$arr = Get-Content "C:\hogehoge\hon-yomiage-text\tasu-hiku-kakeru-texts1.txt"
#echo $arr

#読み上げる回数
$speakCount = 30;

for($i=0; $i -lt $speakCount; $i++){

$idx = Get-Random -Maximum ($arr.Length-1) -Minimum 0
$txt1 = $arr[$idx].Split(",");

$ps_speak.Speak($txt1[0])

Start-Sleep -s 3

$ps_speak.speak($txt1[1])


}
```



<hr>
学習歴1ヶ月でReactアプリ開発チャレンジ：DB作成～自動デプロイ・テスト実装まで

# はじめに
React学習歴1カ月のA.Kと申します。よろしくお願いします！
今回は、**この1カ月でやったことを技術ベースの内容でまとめていきます。**

簡単な自己紹介と学習開始時の状況はこちらの記事にまとめてます！

https://qiita.com/AK_React/items/41c015fb974cca7abbf6
# 1カ月でやったこと

**ちなみに「JavaScriptってなあに？」状態から始めたので、かなり駆け足です（笑）**

**１．学習記録アプリの作成**
**２．Viteで環境構築**
**３．supabaseでDB作成**
**４．Git上でPush時に自動デプロイ（パイプライン構築）**
**５．Jestとreact-testing-libraryでテスト作成**

# 
# １．学習記録アプリの作成
**React×JavaScript**で簡単なアプリを作成しました！
**自分史上初の成果物になります。。！**
Udemyの講座でインプットした基礎を生かして最低限の機能を実装しました。
なお、**この時点では環境構築は一切行っていません。ブラウザIDEを使用していました。**

アプリの内容に関しては過去記事に上げているので、今回は割愛します！

https://qiita.com/AK_React/items/785329572561afef58c8

# ２．Viteで環境構築
主な流れとしては下記です。

WSL2をインストールして、Ubuntsuの環境を用意する
asdfのインストール（node.jsのバージョン管理用）
Node.jsのインストール
ViteでReact環境を作る

**個人で環境構築をすること自体が初めて**だったので、先輩エンジニアのサポートを受けつつ進めていきました。
公式ドキュメントにインストール方法なんかは全部書いてあるのですが、なんのこっちゃか全然わからず。。最終的にQiitaで先人方が書いてくださった記事をいくつか参照していました。**公式ドキュメントを読む力をつけていかなきゃな。。**

**ちなみに「asdfとは？viteとは？」みたいな説明は下記の記事で書いてます！**

https://qiita.com/AK_React/items/d0226dae52b652c201a5
# ３．supabaseでDB作成
**まず、Supabaseとは**
アプリケーションのバックエンドを構築するためのオープンソースのプラットフォームです。**煩雑な設定や手順を省略して、素早くデータベースを立ち上げることができます。**

https://supabase.com/

下記の動画を参考にしつつ設定を進めました。

https://www.youtube.com/watch?v=CZlZgRo0bZ4

**この段階では、環境変数の扱いで少し苦戦しました。**
というのは .envファイル（環境変数を設定・管理しているファイル）をGit上に公開してしまったんですね。ここにはsupabaseのプライベートキーも記載されているので、絶対に外部に知られてはいけない情報になります。
従って、.gitignoreファイルに.envファイルを追記して、Gitプッシュされないようにする必要がありました。
**「何でもかんでもGitにあげちゃダメなんだな」と学びました。。**
# ４．Git上でPush時に自動デプロイ（パイプライン構築）
**一番苦戦しました。。**

今回行うこととしては
**GitHub上のプロジェクトのソースコードからビルドされたアプリケーションが、Firebase Hostingなどの実際のサーバーにデプロイされる仕組みをつくること**です。

手順はこんな感じです。

ハンズオンを実施して全体の流れを理解

https://qiita.com/Teach/items/d2c4d7bec98228df1807

Firebaseでデプロイに必要な権限をもったサービスアカウントを作成

https://zenn.dev/jinwatanabe/articles/4026d373383739

Github ActionsでFirebase連携の設定を行う
パイプライン構築（Push時にデプロイされるように設定）

**私は「どの過程でどのファイルが参照されてデプロイされるのか」が理解できておらず、エラーの解消に時間がかかりました。**

具体的には、デプロイ時に「distディレクトリが存在しません。」と怒られていたのですが、**こいつの正体をしらなかったため、何が原因なのか特定ができませんでした。**

**ちなみに、「distディレクトリ」とは**
Git上でビルドスクリプトを実行したときに、**アプリケーションの成果物（コードやファイル）がまとめられる場所のこと**です。そして、この「distディレクトリ」内に生成されたファイルがFirebaseにアップロードされ、実際にアプリケーションがウェブ上で公開されます。

# ５．Jestとreact-testing-libraryでテスト作成

下記の手順で行いました。

jestとreact-testing-libraryをインストール
dotenvをインストール（.env ファイルを読み込み、そこに記述されたキー＆バリューのペアを process.env 経由で参照できるようになります。）
Jestの設定を行う
テスト作成

今回は以下の4点をテストしました。

・タイトルが表示される
・入力をしないで登録ボタンを押すとエラーが表示される
・入力フォームに学習内容と時間を入力して登録ボタンを押すと新たに記録が追加される
・削除ボタンを押すと学習記録が削除される

**苦労したのが、非同期処理のタイムラグを考慮しないとテストが上手くいかない、ということです。**
今回はデータ（学習時間・学習内容）の取得を行う際に、非同期関数を使っていました。
従って、**新しく追加されたデータや削除されたデータの反映にタイムラグが生じます。**
なので、waitFor関数を使って処理が終わるまでテストの実行を待ってあげる必要がありました。

# おわりに
以上の内容を1カ月で行いました！
**自分にとってはほとんどの工程が初めての経験で、常に手を動かしながら大量の知識を吸収したため、混乱することもありました（笑）**
それでも、**実践ベースで学習したほうが理解度は高まると思います。**
あと、**デプロイが成功した時の達成感はすごい**ので、少しづつ成功体験を積んでいけると感じました。
これからも、しっかりと休息をとりつつ学習を継続していきます！

# これからの学習予定
・学習記録アプリの使用言語をJavaScript→TypeScriptに移行
・UIライブラリを使用してデザインを整える
・テスト作成

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
気になる方はぜひHPからライン登録お願いします！
https://projisou.jp
【Mac】メモ GitHub CLIでプルリクエストの変更ファイル一覧を取得する

# はじめに
※この記事は自分のメモ用に作成しています。

業務で詳細設計書などの資料を作成する時、プルリクエストで変更したファイル一覧を取得したいことがあります。
そんな時におすすめなのがGitHub CLIです。
コマンド1つで追加変更したファイルを取得できます。

# GitHub CLIのインストール方法
インストール方法については以下を参考にしてください。

https://zenn.dev/krabben16/articles/setup-github-cli-for-mac

# プルリクエスト一覧を取得する
以下コマンドで取得できます。

```
gh pr diff #プルリクエストNo --name-only
```

以上で追加・変更したファイル一覧を取得できます。