OmniAICreator/Qiita-1.07M huggingface dataset:
Fritzing 部品作成について覚書

Fritzing 日本語の記事少なめな感じがする。
KiCADやFusion360よりFritzingはとっつきやすいと思う。
価格も良心的（手違いでライセンスを2つ買ってしまったけどまったく気にならない）
PCBのUI使用感は無償のベータ版の方が良かった気がする。

注意：
* 本記事執筆者はPCB製造のためにFritzingを使っています
* SPICEシミュレーションやブレッドボード表示などはほとんど使いませんし、もっぱら無視しています

## Fritzing上の部品を *.fzpz として取り出す手順
下敷きとして既存部品の中身を見たいわけです。
* パーツ一覧で対称を右クリックから「パーツ編集」に移る
* パーツエディタ上で、「ファイル」メニュー　->　「新規パーツで保存」
  --> 任意のフォルダにFZPZ形式（要するにZIP形式）で出力される。これを解凍すればよろし

↓　CORE に含まれるダイオードをFZPZ出力し解凍するとこんな。
![Rectifier Diode 2024_08_24 19_20_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469875/2ac5c590-c72f-186d-c046-cf58cec20dcc.png)

## FZPZファイル
↓　中身はこんな
![part.prefix0000_6cb0862a1ce5411cb83d4b45be19e89b_1.fzp - Rectifier Diode - Visual Studio Code 2024_08_24 19_26_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469875/15de0efa-3981-d900-79d7-0255e6595c6f.png)

このうち「tags、properties、description、spice、」
は無くてもよいものです。

### 重要なのは views と connectors
#### views
viewsは参照ファイル名リストです。
icon breadboard schematic pcb の4つを参照しますが　使わないものについては省略してよい。
PCBが目的であればbreadboard と schematic は省略してよい。
icon は、さすがに無いと不便ですが、**pcbと同じsvgファイルを別名でicon用にしても良い**。
* （注：breadboardのみ実際に省略したことがある。他は試してない。）
* 省略するには、```<!--breadboardview>  </breadboardview-->```
のようにコメントアウトするか、または丸ごと消せばよい。

#### connectors
ひとつの接続点について次のような記述

```
  <connector id="connector0" name="cathode" type="male">
   <description>Cathode Pin</description>
   <views>
    <breadboardView>
     <p layer="breadboard" legId="connector0leg" svgId="connector0pin"/>
    </breadboardView>
    <schematicView>
     <p layer="schematic" svgId="connector0pin" terminalId="connector0terminal"/>
    </schematicView>
    <pcbView>
     <p layer="copper0" svgId="connector0pin"/>
     <p layer="copper1" svgId="connector0pin"/>
    </pcbView>
   </views>
  </connector>
```
これが接点名称と番号だけ変えて接点の数だけ並ぶ

ここの pcb の copper1、copper0 の記述は　一方を省略すると
上面のみ/下面のみ　でしか接続できない接点となる模様。

## icon
パーツリスト上で表示されるサムネイル
写真とか加工して作るんですかね
このファイルは接続情報を含まないためSVG画像ならなんでもよい
**pcbのSVGを転用しても良い**

## shematic
回路図に表示される
割と単純な図形で済むのでついでに描いてもよいかも
シミュレーションのためにはSPICEの記述が必要

## breadboard
描くのが厄介なことが多い気　がする
PCB目的なら省略

## pcb
### copper1,copper0
* 銅は2層　copper0（底面） と copper1（上面）
* copper0 と　copper1　は入れ子にできる
※入れ子にした場合、子の側に記述した要素はもう一方にも書いたものとして扱われるから記述省略できる。
（注：規則についてはうろ覚え注意）
* 銅色の 開いたサークルは原則それだけでビアになる（片面だけに記述したときは違うかも？）
→　ビアにはドリル穴は描かない（やや変則的）
* 銅以外の色（あるいは黒）の 閉じたサークルはドリル穴
* ●以外の四角とかの穴は開けられない　筈　原則ドリルだしね
### silkscreen
* 現状シルクスクリーンは表のみ（？） ←　個人的にこれがとても残念

## 変更の反映
ビン内のFZPやSVGを入れ替えることがある。
そこでコネクタの数が変わったときとかに、
Fritzingの再起動が複数回必要な時がある模様。
Fritzingのバグ/仕様？手違い？気のせいか？

# 銅フィルについてメモ
かなりトリッキーだけど
一見した印象よりも結構融通が利く
* 銅フィルとグランドフィルに分かれている
    * シードを選択できるのが‘グランドフィル’
    * ‘銅フィル’は銅の無い部分を埋めるのみ
* シードの選択
    * 右クリック「グランドフィルシードを選択」から進む（‘‘グランドフィルシードとして選択’’の意味かと）
    * ところがトレース（配線）を右クリックしてもシード関連の選択肢が出ないような。謎
    * ビアを置くと選択しやすい（？）

* クリアランスは「ルーティング」メニュー-->>「グランドフィル」-->>「グランドフィルキープアウト云々」で変更できる。ゼロにすれば原理上は間を埋めて接続できるが、微かに隙間が空くときも。

* 銅フィルはトレースをぶっとくすることでも代替できる（最大999mil ==> 1約25mm ）
* メニューから銅フィルのみ消せる。消されたくない部分はロックしとけばよろし。
* フィリングの対象は表示編集状態の、両層、上層、下層のそれぞれに従う。
ASWebAuthenticationSession の実装でハマったこと

## 概要
ざっと2年前、ASWebAuthenticationSessionでSSOを実装した際にハマったことを記載する
故にこの記事では実装についての説明はしない
他にいい記事がたくさんあるのでそちらを参考にしてほしい
私のハマりが誰かのハマり解消に貢献できることを祈りQiitaの海に本記事を投稿する

#### ASWebAuthenticationSessionとは？
Appleが提供するSSOフレームワーク
SafariとCookie情報を共有し認証情報を使い回すことでSSOが可能となる

公式ドキュメントは[こちら](https://developer.apple.com/jp/documentation/authenticationservices/authenticating_a_user_through_a_web_service/)

#### 当時ハマったこと
ということで本題

-  ***ASWebAuthenticationSessionのCookieの扱いに注意!!***
永続Cookieのみ対象！
非永続CookieはSafariと共有しないので注意が必要
必ずログインサイトで「次回から自動的にログインする」等にチェックを入れてログインすること

- ***シミュレータではSafariとCookieを共有しない！！***
シミュレータでは永続Cookieであれ共有しない！
動作確認する際はipaを作成するか、実機でビルドすること

~~この事実に気づくのに1ヶ月程度時間かかった、、、~~

以上
【備忘録】protocコマンドを実行するときのpbファイルの出力先の指定

以下のフォルダ構成でprotoフォルダで以下のコマンドを実行します。
root/
　├ proto/
　└ pb/
```
protoc --go_out=. --go_opt=paths=source_relative --go-grpc_out=. --go-grpc_opt=paths=source_relative user.proto
```
そうすると、protoフォルダにuser.pbファイルが出力されてしまいます。user.pbをpbフォルダに出力するには以下のコマンドを実行する必要があります。

```
protoc --go_out=../pb --go_opt=paths=source_relative --go-grpc_out=../pb --go-grpc_opt=paths=source_relative user.proto
```
agoraとNext.jsで音声と映像を同時双方向通信する機能を実装する


## agoraで作成できるもの

zoomのようなオンラインミーティングアプリやポコチャのようなライブ配信アプリを作成できます。（**開発中は月10,000分まで無料で使えます**）

## 本記事で作成するもの

zoomに近いです。特定のルームに入ることでそのルームにいる人とコミュニケーションが取れるアプリです。
GitHubはこちら→https://github.com/kaitokosuge/nextjs-agorasdk-sample


## Next.jsの準備
Next.jsの準備をします。現在の安定版はバージョン13のため、13をインストールします。
```ターミナル実行コマンド
npx create-next-app@13 videoapp && cd videoapp && npm i next@13
```
以下を実行することでサーバーを起動し、Next.jsのいつものページが表示されていたら完了です。
```ターミナル実行コマンド
npm run dev
```
## agora sdkの準備

```ターミナルで実行
npm i agora-react-uikit
```
以下の公式ページにセットアップ内容があるため、これに従います。
https://jp.vcube.com/sdk/trial

Next.jsでの実装の際に必要なのは下記画像の「App ID」になるため安全な場所で保管しておきましょう。
![スクリーンショット 2024-08-24 17.30.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/4cb03ada-8ca3-84c7-f4cf-de5437e121f4.png)



## トップページ実装
![スクリーンショット 2024-08-24 18.47.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/fa384e89-eb07-5efa-23aa-5ff3410b1683.png)

部屋の選択が可能です。
```page.tsx
import Link from "next/link";

export default function Home() {
	//ダミーid配列で部屋の種類を管理します。
	const roomIds = [1, 2, 3, 4, 5];
	return (
		<main className="p-10">
			<p className="font-bold">部屋を選択してください</p>
			{roomIds.map((id: number) => (
				<div key={id} className="mt-10">
					<Link href={`/room/${id}`}>部屋{id}</Link>
				</div>
			))}
		</main>
	);
}

```

## ミーティング部屋ページの実装

オンラインミーティングが可能です。
roomフォルダに[id]フォルダを作成し、その中にpage.tsxを作成します。
```page.tsx
"use client";
import React, { useState } from "react";
import AgoraUIKit, { layout } from "agora-react-uikit";
import { useParams } from "next/navigation";

export default function Video() {
	const params = useParams();
	const roomId = params.id;
	const [videoCall, setVideoCall] = useState(true);
	const rtcProps = {
		appId: appidを入れてください。,
		channel: `${roomId}`,
		token: null,
		layout: layout.grid,
	};
	const callbacks = {
		EndCall: () => setVideoCall(false),
	};
	return (
		<div>
			<div>
				<h1>room {roomId}</h1>
			</div>
			{videoCall ? (
				<div style={{ display: "flex", width: "100vw", height: "100vh" }}>
					<AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
				</div>
			) : (
				<h3 onClick={() => setVideoCall(true)}>Start Call</h3>
			)}
		</div>
	);
}

```

参考資料になります。
https://github.com/AgoraIO-Community/VideoUIKit-Web-React
以上です。
生成AIことはじめ（1）

## はじめに

最近、Microsoft CopilotやGitHub Copilotなどの生成AIを仕事で使う機会も増え、生成AIがかなり身近なテクノロジーだなと感じて、エンジニアとしてキャッチアップが必要だなと考え自己学習の一環として記事をまとめていこうと思いました。まずは基礎的なところから整理できればと。

## 生成AIとは

その名前の通り、「さまざまなコンテンツを生成できるAI」の総称です。生成AIは深層学習を用いて実現されている技術になります。生成AIには、テキストを生成するものや画像を生成するもの、動画を生成するものなど複数のものが存在します。

## 基盤モデル

膨大なデータで事前トレーニングされた汎用的なモデルを基盤モデルと呼びます。有名どころで言うとOpenAI社のChatGPTで利用されている基盤モデル「GPT」や、Anthropic社のClaude、Google社のGeminiなどが挙げられます。また、基盤モデルはファインチューニングなどの手法を用いて独自データを追加学習させることで、より専門に特化させたモデルを作成することができます。

![フローチャート (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3869312/d8a23480-3bbb-b7ea-ebbb-c1d7e38e3607.jpeg)



## 生成AIの利用手段

ChatGPTやClaude by Anthropicなど、基盤モデルを開発している各社からアプリケーションとして提供されているのでこれを用いて生成AIを利用することができます。

もう一つの利用手段として、AWS/Azure/GCPなど各クラウドサービス経由での利用方法もあリます。主にオリジナルの生成AIシステムの開発を行う際に使用され、AWS/Azure/GCPの基盤モデルを提供する生成AIサービスとシステム開発に必要な他サービス組み合わせることで開発できるのが特徴になるます。

具体的なものを挙げると以下は、AWSの公式で紹介されている生成AIを活用したソリューションになり、AWSの生成AIサービス「Amazon Bedrock」 で提供される基盤モデルのうち、日本語にも対応した Anthropic 社の Claude を利用し開発するコンタクトセンター業務を支援するサンプルソリューシで、お客様とエージェントの通話に合わせた回答生成、通話内容の自動要約等に活用できるものです。

![スクリーンショット 2024-08-24 18.16.05（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3869312/8ffc505b-f5b7-886e-4b42-bced0809db93.png)
https://aws.amazon.com/jp/blogs/news/amazon-bedrock-live-call-analytics-with-agent-assist-anthropic-claud2/

## 最後に
次回は実際に手を動かし、生成AIシステム開発におけるフレームワークについて深掘りしていきたいと思います。
【技術書紹介】ひと目でわかるAzure　基本から学ぶサーバー＆ネットワーク構築　第4版

## 書籍情報
書籍名：ひと目でわかるAzure　基本から学ぶサーバー＆ネットワーク構築　第4版
著者名：横山 哲也

https://bookplus.nikkei.com/atcl/catalog/22/11/30/00527/


## 本書を選んだ背景
以前からAWSなどのクラウドサービスの学習は続けていましたが、この度業務でAzureを扱うこととなり、改めて体系的にAzureのサービスについて学ぼうと考えたため。

## 本書について
初版の発行は2015年で、それ以来執筆時点での最新情報を反映しながら改版を重ねて発行を続けてきた人気書籍とのこと。
特徴としては、仮想マシン・仮想ネットワークを中心に、設定および構築手順を豊富な画面キャプチャで紹介されています。

### 第1章 Azureの概要

- クラウドコンピューティング
- Azureとは
- Azureのアカウント作成

### 第2章 仮想マシンを作ってみよう

- 仮想マシンの作成および管理
- ネットワークセキュリティグループを作るには
- 仮想ネットワークを作るには

### 第3章 仮想マシンイメージを作ってみよう

- 仮想マシンイメージを作るには
- 仮想マシンイメージから仮想マシンを作るには
- ARMテンプレートからリソースを作成するには

### 第4章 仮想マシンを冗長化しよう

- スケールアップとスケールアウト
- 仮想マシンを冗長化するには
- 共有データ構成、データディスク追加
- 専用ホスト

### 第５章 仮想ネットワークを構成しよう

- 仮想ネットワークを作成するには
- 任意のIPアドレスを設定するには
- 独自のDNSサーバを参照させるには
- VPNゲートウェイ
- ポイント対サイト接続
- VNET間接続
- VNETピアリング

### 第6章 Azureにバックアップしよう

- Recovery Serviceコンテナー
- MARSバックアップ
- Azure VMバックアップ

### 第7章 まとめ：Webアプリケーションサーバーを構築しよう

- 基本設計を行う
- 仮想ネットワークを構成する
- 仮想マシンイメージを展開する
- 仮想マシンを展開する
- バックアップ計画を立てる

## 本書の感想

- ビジュアルリファレンスというコンセプトのとおり、画面がとても豊富。書籍内の指示に従いハンズオンを行えば、特に躓くことなく設定ができます。ただクラウドサービスの操作画面は変化が早いため、その点については柔軟に対応しないといけないところがあります。
- 仮想マシンおよび仮想ネットワークの設定を中心に解説されているため、その他のサービスについては割愛されているところが多くあります。基本としては充分かもしれませんが、実務での使用であったり、Microsoft認定資格の受験には他の書籍やサービスで補う必要があるかと思います。
40代からのプログラミング

はじめまして:grinning:
仁花（ひとか）:cherry_blossom:と申します。
神奈川在住です。

今までプログラミングの経験はありません。
経歴としては営業、研究室補助員、等です。

そんな40代がIT業界に転職しようと決断しました。
ほぼほぼ異業種、未経験での転職になります。

なので9月からしばらくプログラミングの学校に通うことにしました。

学校開始前に予習としてJavaやネットワークのテキスト購入しました。っていうくらい初心者なのですが…:droplet:

ちなみに購入したJavaのテキストは「スッキリわかるJava入門」です:point_up:

学校は9月から、まもなく始まります！

きっと最初は「こいつ何言ってんだ？」くらいの疑問点満載の記事しか書けないと思うけど、自分の記録のためにも記事を書いていくことにしました。

最初はC言語から始まります！
緊張もありますが、いまは楽しみの方がまだ大きいです。

挫折しないよう最後まで授業についていけるよう頑張ります:smiley:
【ChatGPT＋Code Interpreter】で使えるライブラリ一覧。


　どうも、カーブミラーです。

　今回は、使えるライブラリ一覧を上げます。

:::note info
本記事は、ChatGPT（有料版）
で行なっております。画像は
ありません。あしからず。
:::

　まずは、ニュース。

　AnthropicのClaudeですが
　　LaTeXの描画が
　　　できるようになりました。

　LaTeXは
　　数式などの特殊な表記を
　　　記述する形式です。

　ChatGPTのWeb版では
　　表示できていました。
　　　アプリ版ではダメです。

　根本が一緒なので
　　できるものと思っていました😅

[Anthropic公式ポスト](https://x.com/AnthropicAI/status/1826667671364272301?t=mPe4SlxxcLrfpRlbeiMuwA&s=19)
***
　さて、本題です。

　OpenCVについては
　　Code Interpreterで
　　　できることが
　　　　限定されるため、
　　　　　次に行きます😅

　とはいえ
　　何をしようか
　　　悩んでしまいます。

　そこで
　　今回は、使えるライブラリの
　　　一覧を尋ねてみました。

***
***ChatGPT***
ChatGPT + CodeInterpreterで利用可能なライブラリは以下のように整理できます（具体的なバージョンやライブラリの利用可否は状況によって変わることがあります）：

### **データ解析**
- **Pandas**：データ操作と解析
- **NumPy**：数値計算
- **Vaex**：大規模データの解析
- **Dask**：並列計算
- **Polars**：高速データフレーム操作

### **機械学習**
- **scikit-learn**：一般的な機械学習アルゴリズム
- **TensorFlow**：深層学習フレームワーク
- **PyTorch**：深層学習フレームワーク
- **XGBoost**：勾配ブースティング
- **LightGBM**：勾配ブースティング
- **CatBoost**：勾配ブースティング
- **Optuna**：ハイパーパラメータ最適化
- **Fastai**：高レベルな機械学習ライブラリ
- **TPOT**：自動機械学習（AutoML）
- **Shap**：モデル解釈

### **数値計算**
- **NumPy**：数値計算
- **SciPy**：科学計算
- **JAX**：自動微分と数値計算
- **CuPy**：GPU加速数値計算

### **科学計算**
- **SciPy**：科学計算
- **SymPy**：シンボリック数学
- **Astropy**：天文学向けライブラリ
- **QuantLib**：金融工学

### **テキスト処理**
- **NLTK**：自然言語処理
- **spaCy**：自然言語処理
- **TextBlob**：テキスト処理
- **Gensim**：トピックモデル
- **Hugging Face Transformers**：トランスフォーマーモデル

### **画像処理**
- **Pillow (PIL)**：画像操作
- **OpenCV**：コンピュータビジョン
- **scikit-image**：画像処理

### **統計解析**
- **Statsmodels**：統計モデル
- **PyMC3**：ベイズ推定
- **Pingouin**：統計解析

### **時間系列解析**
- **Pandas**：時間系列データの操作
- **Statsmodels**：時間系列解析
- **Prophet**：Facebookの予測ツール
- **Darts**：時間系列予測

これらのライブラリは、ChatGPT + CodeInterpreterで利用可能な一般的なライブラリですが、利用できるライブラリは実際の環境や設定によって異なる場合があります。
***

　う〜ん
　　データ解析
　　機械学習
　　数値計算
　　科学計算
　　統計解析
　　時間系列解析
　　　は興味がないんですよねぇ😅

　使い道も
　　知識がないので
　　　宝の持ち腐れですし。

　テキスト処理と画像処理は
　　自分でも使える気がします。
　　　というか、画像関連は
　　　　使うでしょうし😸

　ちなみに
　　一覧にはありませんけど、
　　　MoviePyも何度か使ってきて
　　　　これからも使いそうです。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
【Flutter】Releaseモードでiosをビルドする

## はじめに
iOSで実機ビルドしたが、ケーブルを外すと途端に動かなくなりました💦💦
原因を見てみると、デバッグモードでビルドされていたためにケーブルを外すと動かなくなったようです。そのため、今回はRelaseモードでビルドする方法を紹介します。

## やりかた

1.	Xcodeの「Product」メニューを確認：
  「Product」→「Scheme」→「Edit Scheme…」をクリックします。
  
2.	Edit Schemeウィンドウで確認：
	左側のリストから「Run」を選択し、右側の「Build Configuration」が「Release」になっているか確認します。
	デフォルトでは「Debug」になっていることが多いので、「Release」に変更してください。

 	![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/7421c897-96fb-16fc-aebb-ac95cb2fbc75.png)

3.	ビルドを実行

## 参考
https://qiita.com/koji0705/items/555c27c472bee3cfc318
GASでコメントを取得

Googleスプレッドシート、ドキュメント、スライド等に追記された**コメント・返信コメント**は、DriveAPIを使うと取得出来ます。
「GASでコメントの取得方法」を検索すると、v2での取得方法が良くヒットしますが、ここではv3の方法になります。

v2とv3でリクエストのパラメータやレスポンス内容に差異がありますが、個人的には最終更新日を指定してリクエストができるv3の方がお勧めです。

https://developers.google.com/drive/api/reference/rest/v3/comments/list?hl=ja

# 準備
Google Apps Scriptで「サービス」を追加します。
「DriveAPI ドキュメント」　＞　バージョン「v3」を選択

<img width="300" alt="スクリーンショット1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209706/6a9fbb6b-1f01-01b3-f2b5-7051cde448cc.png">

# コード
**fileId**は、取得したいファイルIDに書き換えてください。
**n_day**は、n日前までのコメントを取得します。

```javascript:コード.gs
function myFunction() {
  // ファイルID
  const fileId = '************************';
  // コメントの最終更新日を指定（7日前）
  const n_day = 7;
  // RFC3339形式
  const dt = Utilities.formatDate(new Date(Date.now() - (n_day * 24 * 60 * 60 * 1000)), 'JST', "yyyy-MM-dd'T'00:00:00XXX");

  let pageToken = '';

  do {
    let result = Drive.Comments.list(fileId, {'fields':'*', 'pageToken':pageToken, 'pageSize':10, 'startModifiedTime':dt});

    for (i = 0; i < result['comments'].length; i++){
      // コメント
      let comment = result['comments'][i];
      console.log(comment);

      // 返信コメント
      for (j = 0; j < comment['replies'].length; j++){
        console.warn(comment['replies'][j]);
      }
    }

    pageToken = result.nextPageToken;
  } while (pageToken); 
}
```

# ポイント
リクエストする際のパラメータに**fields**を追加する必要があります。
「*」とすると全ての項目を取得出来るので、通常はこれで十分です。
```
Drive.Comments.list(fileId, {'fields':'*' ...
```
指定した項目だけに制限したい場合は以下の様に項目名を指定します。
例）ページトークン、コメントID、コメント本文
```
Drive.Comments.list(fileId, {'fields':'nextPageToken,comments(id,content)' ...
```
教師有学習の回帰曲線に関する応用について

# 下記曲線の応用について
未知データにおける予測と実測値の誤差は
 ・バリアランス
　・バイアス
　・ノイズ
に分解可能である。

機械学習には「**過学習**」という現象があるが、これは上記の**バリアランス**によるものである。
バリアランス：予測結果の分散のこと。

過学習の減少を回避する為に、回帰分析の中で二つご紹介する。
### リッジ回帰
リッジ回帰は「回帰曲線」の係数をできる限り小さくするというコンセプトのもと成り立っている回帰モデルである。

実際に、**sklearn.linear_model**からモジュールをインプットして使用する際は下記のように使用する。

```python:test.sh
from sklearn.linear_model import Ridge # モジュールインポート
# モデルの作成
ridgeModel = Ridge(alpha = 10)
ridgeModel.fit(x_train, y_train) # 学習
print(ridgeModel.score(x_train, y_train))
print(ridgeModel.score(x_test, y_test))
```


### ラッソ回帰
リッジ回帰とは別にラッソ回帰という回帰モデルがある。このモデルは、回帰曲線の**係数の絶対値の合計**が最小化するようにするモデルである。

実際のコードサンプルは下記の通り。
```python:test2.sh
from sklearn.linear_model import Lasso

x_train, x_test, y_train, y_test = train_test_split(pf_x,
    sc_t, test_size = 0.3, random_state = 0)

# ラッソ回帰のモデル作成（alphaは正則化項につく定数）
model = Lasso(alpha = 0.1)
model.fit(x_train, y_train)

print(model.score(x_train, y_train)) # 訓練データの決定係数
print(model.score(x_test, y_test)) # テストデータの決定係数
```
Flutter環境構築手順書(Mac)

## Flutter SDK インストール

- flutterファイルをダウンロード
    - https://docs.flutter.dev/get-started/install/macos/mobile-ios

- 通常ダウンロードフォルダにダウンロードされているはずなので、developmentフォルダに解凍する
    
    ```bash
    $ unzip ~/Downloads/flutter_macos_arm64_3.24.1-stable.zip \
           -d ~/development/
    ```

    
- PATHを通す
    ```bash
    $ vim ~/.zshrc
    
    // 以下を.zshrcに追加
    export PATH=$HOME/development/flutter/bin:$PATH
    
    $ which flutter
    /Users/ユーザ名/development/flutter/bin/flutter
    
    $ which dart
    /Users/ユーザ名/development/flutter/bin/dart
    
    $ flutter --version
    Flutter 3.24.1 • channel stable • https://github.com/flutter/flutter.git
    Framework • revision 5874a72aa4 (3 days ago) • 2024-08-20 16:46:00 -0500
    Engine • revision c9b9d5780d
    Tools • Dart 3.5.1 • DevTools 2.37.2
    
    // これでOK
    ```
    

## fvmインストール

```bash
$ brew tap leoafarias/fvm
$ brew install fvm
```

<aside>
💡 .tool-versionsにrubyのバージョンを指定していないと動かない場合があるよ！

</aside>

```bash
$ vim ~/.tool-versions

// 以下の記述をファイル内に追加
ruby 3.1.5
```

## Xcodeをインストール

- App Storeからインストールしてね
- インストールしたら…

```bash
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
// agreeって入力してね
```

- エミュレータをインストールする
    - Xcodeを開き、「Xcode」→「Settings」→「Platforms」タブに移動する
    - iOSをget
        
        ![スクリーンショット 2024-08-24 16.58.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677689/78c25865-2dd8-6d60-9256-547617736c9c.png)

        

## うまく行ったか確認する

```bash
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.1, on macOS 14.6.1 23G93 darwin-arm64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/to/macos-android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.92.0)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 2 categories.
```

👍

## 実際にシミュレートしてみる

- サンプルプロジェクトの作成

```bash
$ mkdir sample
$ cd sample
$ fvm flutter create . --project-name sample --platforms android,ios --org com.sample
```

- シミュレータの起動

```bash
$ open -a Simulator
```

![スクリーンショット 2024-08-24 17.43.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677689/adb8715e-81ea-dc03-cda1-1814ed4ebd97.png)

- プロジェクトの起動

```bash
$ flutter run
```
![スクリーンショット 2024-08-24 17.44.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677689/1307cd1c-3799-1358-7c6f-4214e667d63e.png)



右下の「+」ボタン押してカウントアップできたらOK!!!
[Rust] Vec<T> (ベクタ) のメソッドまとめ

ベクタは、動的にサイズを変更できる配列。Vec<T>でよく使用される重要なメソッドをまとめる。

## 1. `push` と `pop`
### `push`
ベクタの末尾に要素を追加する。
```rust
let mut vec = Vec::new();
vec.push(1);
vec.push(2);
```
### `pop`
ベクタの末尾から要素を取り出し、削除します。空の場合はNoneを返す。
```rust
let mut vec = vec![1, 2, 3];
if let Some(value) = vec.pop() {
    println!("Popped value: {}", value);
}
```

## 2. `insert` と `remove`
### `insert`
指定したインデックスに要素を挿入する。
```rust
let mut vec = vec![1, 2, 4];
vec.insert(2, 3); // [1, 2, 3, 4]
```
### `remove`
指定したインデックスの要素を削除し、その要素を返す。
```rust
let mut vec = vec![1, 2, 3, 4];
let value = vec.remove(2); // [1, 2, 4]
println!("Removed value: {}", value);
```

## 3. `len` と `is_empty`
### `len`
ベクタに含まれる要素の数を返す。
```rust
let vec = vec![1, 2, 3];
println!("Length of vec: {}", vec.len());
```
### `is_empty`
ベクタが空であるかどうかをチェックする。
```rust
let vec: Vec<i32> = Vec::new();
if vec.is_empty() {
    println!("vec is empty");
}
```

## 4. `clear`
ベクタのすべての要素を削除する。
```rust
let mut vec = vec![1, 2, 3];
vec.clear();
```

## 5. `contains`
ベクタに指定した要素が含まれているかどうかをチェックする。
```rust
let vec = vec![1, 2, 3];
if vec.contains(&2) {
    println!("vec contains 2");
}
```

## 6. `iter` と `iter_mut`
### `iter`
ベクタのイミュータブルなイテレータを返す。
```rust
let vec = vec![1, 2, 3];
for value in vec.iter() {
    println!("{}", value);
}
```
### `iter_mut`
ベクタのミュータブルなイテレータを返し、要素を変更する。
```rust
let mut vec = vec![1, 2, 3];
for value in vec.iter_mut() {
    *value += 1;
}
```

## 7. `sort` と `reverse`
### `sort`
ベクタの要素をソートする。
```rust
let mut vec = vec![3, 1, 2];
vec.sort();
```
### `reverse`
ベクタの要素を逆順にする。
```rust
let mut vec = vec![1, 2, 3];
vec.reverse();
```

## 8. `retain`
指定された条件に合致する要素だけをベクタに残す。
```rust
let mut vec = vec![1, 2, 3, 4, 5];
vec.retain(|&x| x % 2 == 0); // 偶数のみ残す
```

## 9. `extend`
他のイテレータやコレクションから要素を追加する。
```rust
let mut vec = vec![1, 2];
vec.extend(vec![3, 4]);
```

## 10. `split_at`
指定したインデックスでベクタを2つに分割する。
```rust
let vec = vec![1, 2, 3, 4, 5];
let (left, right) = vec.split_at(3);
println!("Left: {:?}", left); // [1, 2, 3]
println!("Right: {:?}", right); // [4, 5]
```
「【React+TypeScript】Netflixのクローンを作るチュートリアル」github pagesへのデプロイでつまづいた

github pagesへのデプロイで、ちょっとつまづいたので備忘録

環境:React,Typescriptをviteで構築。
Vscodeエディタ


## 参考元
[【React+TypeScript】Netflixのクローンを作るチュートリアル](https://zenn.dev/gunners6518/books/4c4672f32dd100)

[Vite+ReactのプロジェクトをGitHub Pagesにデプロイする](https://qiita.com/YuDachi/items/3307c0d3139037f67583)


### つまづいた点

```npm run build```

してもひたすらエラーメッセージ。
エラー内容は割愛。（根本が間違っていたので）

### 原因と解決

#### 原因
もともと「JS_practice」というフォルダ内で、勉強する項目ごとにフォルダ分けしていた。
↓こんな感じ

```
JS_practice
├ Netflix-clone_App
├ Memo_App
├ hogehoge_APP
```

で、github pagesにデプロイするには、それ専用のリポジトリを作らないといけない。（ローカルも）
githubで「Netflix-clone」というリポジトリを作成しローカルにクローン。

「よし！じゃあ”JS_practice/Netflix-clone_App”の中身をそのままローカルにぶち込めばいけるな」

これが間違い。これだと下記のようになる。
```
ローカルリポジトリ

Netflix-clone
├ Netflix-clone_Appの中身のファイルもろもろ
├ Netflix-clone_Appの中身のファイルもろもろ
├ Netflix-clone_Appの中身のファイルもろもろ
├ Netflix-clone_Appの中身のファイルもろもろ
.
.
.
```


この状態で
```npm run build```
するとエラーが出たのである。

### 解決

親フォルダを作成したらいけた:v_tone1:

```
ローカルリポジトリ


Netflix-clone
├Netflix-clone(親フォルダ　名前はなんでもOK?)
 ├ Netflix-clone_Appの中身のファイルもろもろ
 ├ Netflix-clone_Appの中身のファイルもろもろ
 ├ Netflix-clone_Appの中身のファイルもろもろ
 ├ Netflix-clone_Appの中身のファイルもろもろ
.
.
.
```

無事デプロイできました
```
npm run build
npm run deploy
```


### まとめ
まあおそらく、tsconfig.jsonあたりのなにかの参照パスの関係だと思う。
もっと精進しないといけないなと思いました。まる:kissing_smiling_eyes:
AtCoder Beginner Contest 367 - ABC367振り返り(PythonでA問題〜D問題まで) 

## [AtCoder Beginner Contest 367 - AtCoder](https://atcoder.jp/contests/abc367)

リアルタイム参加ができなかったので、翌日にバーチャル参加しました。ABC問題まで 3問正解でした。

もしもレーティング参加していたら 710パフォくらいなので、レーティングは微減でしょうか。D問題は Difficulty1037 なので今の実力的に難しいけど、できれば解きたかった...。

## [A - Shout Everyday](https://atcoder.jp/contests/abc367/tasks/abc367_a)

夜に起きて翌日に寝る人の場合わけが面倒だった。昼夜逆転は良くないですね...。
問題文中の「たこ焼きへの愛を叫ぶ」に何か元ネタがあるのかと思っていたが、特に無い模様。

``` python
A,B,C = map(int, input().split())
if B < C:
    if A >= C or B >= A:
        print("Yes")
    else:
        print("No")
else:
    if A >= C and B >= A:
        print("Yes")
    else:
        print("No")
```

## [B - Cut .0](https://atcoder.jp/contests/abc367/tasks/abc367_b)

小数点関連の問題。小数点をfloatとして処理すると誤差で失敗することが多いので、入力を文字列とみなして、末尾の 0 と . を削除する。

``` python
X = input()
X = X.rstrip("0")
X = X.rstrip(".")
print(X)
```

## [C - Enumerate Sequences](https://atcoder.jp/contests/abc367/tasks/abc367_c)

組み合わせの数が ５^8=390625 なので、全探索で解決できそう。
for文で８重ループを書くのは大変そう → 深さ優先探索でいけるのでは...ということでやってみたらいけた。

``` python
import sys
import copy
sys.setrecursionlimit(10 ** 8)

N, K = map(int, input().split())
R = list(map(int, input().split()))

# 深さ優先探索
current = []
visited = set()
answers = []

# digit桁目以降を探索
def dfs(digit):
    # もし最終桁であれば、Kで割り切れるか判定
    if len(current) == N:
        if sum(current) % K == 0:
            answers.append(copy.deepcopy(current)) # deepcopyしなくてもいいかも
        return

    # 次の桁を追加して、再探索
    max_r = R[digit-1]
    for i in range(1, max_r+1):
        current.append(i)
        dfs(digit+1)
        current.pop()

dfs(1)

for answer in answers: 
    print(*answer)
```


## [D - Pedometer](https://atcoder.jp/contests/abc367/tasks/abc367_d) (解説を読んで復習)

一時間くらい悩んでいたが、結局TLE止まりで解けず...。累積和を使用するというところまではわかったのだけど。

その後、公式YouTube解説([AtCoder Beginner Contest 367 - YouTube](https://www.youtube.com/watch?v=w0CgojRHMEo&t=4995s))を見て解答。
* 累積和のmodを求めておく
* 原点からの長さが dist の地点の数を count[dist] に記録しておく

という２点がポイントだったように思う。

``` python
N, M = map(int, input().split())
A = list(map(int, input().split()))

L = sum(A) # コース全体の長さ

# 累積和(modで求めておく)
dist_sums = [0] * (N + 1)
for i in range(N):
    dist_sums[i+1] = (dist_sums[i] + A[i]) % M

count = defaultdict(int)

# 2点の組み合わせ
answer = 0
for i in range(N):
    dist = dist_sums[i]     # 地点iの距離
    answer += count[dist]   # 地点0...i-1 までで距離がMの倍数のものの数

    # 地点iから 地点1..i-1の距離をカウント
    dist2 = (dist - L) % M
    answer += count[dist2]

    # 地点iの距離をカウント
    count[dist] += 1

print(answer)
```
【SQL server 2022】超入門 トランザクション分離レベルの第一歩！

## はじめに
今回はSQLserverにおけるトランザクション分離レベルの超入門ということで、以下のような人を想定して書いています。
- SQLはかけるが、トランザクション分離レベルというものは知らない
- トランザクション分離レベルというものがあることはわかるが、何となくで理解している
そのような方が、記事を読んで少しでも分離レベルに興味を持っていただけたらなと思います！

## トランザクション
前提としてクエリを使って行う一連の操作をトランザクションという単位で表します。
※UPDATEやDELETEなど意味を持ったクエリの塊をマイグレーションなどと呼んだりもします。
トランザクションを設定しなくてもクエリを実行できますが、一連の操作をCOMMIT(確定)・ROLLBACK(もとに戻す)のどちらかになることを保証するためにもトランザクションは張る必要があります。
そのトランザクションにもいくつか種類があり、それぞれにメリットデメリットがあるので、適切に使用する必要があります。

## 複数のトランザクションが同時に実行されることで発生する不整合
とても簡単に記載していますが、以下のような問題が発生するケースがあります。
- **Dirty Read**
 別トランザクションでまだコミットされていないデータを読んでしまう現象
 
 - **Fuzzy Read**
トランザクション内で同じデータを2回以上読み取った際にそれぞれが別の結果になってしまう現象

- **Phantom Read** 
トランザクション中に、別トランザクションによってデータを追加されたり削除されることによって処理結果に不整合が起こってしまう現象

## トランザクション分離レベル
大きく分けて以下のレベルが存在します
- READ UNCOMMITTED
- READ COMMITTED
- REPEATABLE READ
- SNAPSHOT
- SERIALIZABLE

## トランザクション分離レベルと不整合の関係
| トランザクション分離レベル | Dirty Read | Fuzzy Read | Phantom Read |
|:-:|:-:|:-:| :-: |
| READ UNCOMMITTED | 〇 | 〇 | 〇 |
| READ COMMITTED | × | 〇 | 〇 |
| REPEATABLE READ | × | × | 〇 |
| SERIALIZABLE | × | × | × |

〇が発生、×が発生しません。
SNAPSHOTに関しては、事前準備が必要なこと、temp_dbを使用するため使用領域がかなり多くなってしまうこと、更新系の処理ではむしろ速度が低下することなどから使うケースが少ないので割愛します。

## トランザクション分離レベルの設定方法&考え方

使い方は簡単で、このようにトランザクションを張っている状態で1行目のように記述します。
```:SQL
SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED
BEGIN TRAN

SELECT  *
  FROM  Sampl_Table
 WHERE  user_id = '0001'

ROLLBACK
-- COMMIT
```

(会社によるかもしれませんが)業務中に使用するトランザクション分離レベルは、READ UNCOMMITTEDかREAD COMMITTEDがほとんどです、それ以外はほとんど使用しないです。
今回は第一歩ということで、READ UNCOMMITTEDとREAD COMMITTEDを使い分けることができる状態になっていただけたいので、簡単な考え方を書いておきます。
- **READ UNCOMMITTED**
テーブルなどに一切のロックをかけない設定のため、複雑な条件のSELECTなどで大量のデータを参照して抽出する場合などに有効、データを一旦吐かせておく置くなどはテーブルにロックをかけてしまうと大変なことになるので、READ UNCOMMITTEDを使用する
- **READ COMMITTED**
ダーティーリードを防ぐ分離レベルであり、最低限のロックを獲得します、そのため上記以外のケース(登録・更新)刑の操作を行うときに有効です。

## 最後に
もっと厳密に考えるとまだまだ使い分けの基準は存在しますが、これから覚えていこうという方は一旦参照のみならREAD UNCOMMITTED、登録更新があればREAD COMMITTEDと覚えておくだけでもかなり違ってくるので、ぜひ意識してみてください！！

※参考文献
https://learn.microsoft.com/ja-jp/sql/t-sql/statements/set-transaction-isolation-level-transact-sql?view=sql-server-ver16
AWS VPC Peeringを使用して別のアカウントのEC2からRDSにプライベート接続

AWSでマルチアカウント戦略を採用する企業が増えており、それに伴い異なるアカウント間でのリソース接続が必要になるケースが増えています。特に、EC2インスタンスがあるアカウントから別のアカウントにあるRDS（リレーショナルデータベースサービス）インスタンスにプライベートにアクセスするシナリオはよく見られます。

今回には、[AWS VPC Peering](https://docs.aws.amazon.com/ja_jp/vpc/latest/peering/what-is-vpc-peering.html)を利用して、異なるAWSアカウント間でのEC2からRDSへのプライベート接続を設定する手順を詳しく説明します。
> VPC ピアリング接続は、プライベート IPv4 アドレスまたは IPv6 アドレスを使用して 2 つの VPC 間でトラフィックをルーティングすることを可能にするネットワーク接続です。どちらの VPC のインスタンスも、同じネットワーク内に存在しているかのように、相互に通信できます。VPC ピアリング接続は、お客様の VPC 間や、他の AWS アカウントの VPC との間に作成できます。VPC は複数の異なるリージョンに存在できます (これはリージョン間 VPC ピアリング接続とも呼ばれます)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155256/3bf2d91a-3079-f951-5c83-ed27234582ce.png)


### 前提条件

以下のものが必要です（例：アカウントAからアカウントBのリソースをへリクエスト）

- 異なる2つのAWSアカウント（アカウントAとアカウントBとします）。
- アカウントAには、EC2インスタンスが存在するVPCがあること。
- アカウントBには、RDSインスタンスが存在するVPCがあること。
- 両方のVPCが互いに異なるCIDRブロックを持つこと。
- 必要なAWS CLIまたはAWSマネジメントコンソールへのアクセス権。

### VPC Peeringの設定



#### VPC Peeringリクエストの作成 (アカウントAからアカウントBへ):

- AWSマネジメントコンソールで、アカウントAの[VPCダッシュボード](https://ap-northeast-1.console.aws.amazon.com/vpcconsole/home?region=ap-northeast-1#PeeringConnections:)に移動します。
- 「Peering Connections」を選択し、「Create Peering Connection」をクリックします。
リクエストの送信元をアカウントAのVPCに設定し、リクエストの送信先をアカウントBのVPCに設定します。
- 必要な情報（VPC ID、アカウントIDなど）を入力し、「Create Peering Connection」をクリックします。

例：

AのCIDR：10.10.0.0/16

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155256/5fdccfc5-a408-5f4e-e580-369dfd27bb70.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155256/2c70fa18-db57-2d00-0249-0b8eaa3d69a4.png)


#### VPC Peeringリクエストの承認 (アカウントBで):

- アカウントBのAWSマネジメントコンソールにログインし、VPCダッシュボードに移動します。
- 「Peering Connections」を選択し、受信したリクエストを選択します。
- リクエストを承認し、「Accept」をクリックします。

例：

BのCIDR：10.20.0.0/16

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155256/936dc308-059a-dda4-d342-4c24a8d8ed90.png)


### ルートテーブルの設定

#### アカウントAのVPCのルートテーブルにエントリを追加:

- 「Route Tables」を選択し、EC2インスタンスがあるサブネットに関連付けられたルートテーブルを編集します。
- RDSインスタンスが存在するアカウントBのVPC CIDRブロックへのルートを、作成したVPC Peering接続をターゲットとして追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155256/1acc123f-d79e-b041-b00e-521737b257d6.png)


#### アカウントBのVPCのルートテーブルにエントリを追加:

- 同様に、「Route Tables」を選択し、RDSインスタンスがあるサブネットに関連付けられたルートテーブルを編集します。
- EC2インスタンスが存在するアカウントAのVPC CIDRブロックへのルートを、VPC Peering接続をターゲットとして追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155256/a8cdef60-58d4-23c2-8121-e9235eef3a32.png)

### セキュリティグループの設定

- アカウントBのRDSインスタンスのセキュリティグループに、アカウントAのEC2インスタンスのプライベートIP(10.10.0.0/16 3306)からのインバウンドトラフィックを許可するルールを追加します。
- 同様に、EC2インスタンスのセキュリティグループで、RDSインスタンスへのアウトバウンドトラフィックを許可するルールを設定します。


### テストと検証

EC2インスタンスからRDSインスタンスに接続できるかテストします。正常に接続できれば、設定が正しく行われています。

```sh
mysql -h{rds host} -u{rds username} -p
```

正しく設定することで、安全かつ効率的なアーキテクチャを構築できます。
超AWS初学者向け パッチマネージャー解説

## はじめに

**AWS Systems Manager Patch Manager**は、サーバーのパッチ適用を自動化する機能です。これにより、これまで手作業で行っていたパッチ管理の負担を大幅に軽減できます。

### パッチ管理の課題

従来、サーバーのパッチ適用は、以下のような課題がありました。

* **サーバーごとに異なるOSの種類やバージョン、インストールされているソフトウェア、セキュリティ要件を考慮する必要がある。**
* **どのパッチが適用済みで、どのパッチを適用すべきか、情報収集に手間がかかる。**
* **定期的なパッチ適用を確実に実行する必要がある。**
* **緊急度の高い脆弱性への迅速な対応が必要な時。**
* **パッチ管理作業は人手に頼ると負荷が高い。**

### AWS Systems Manager Patch Managerの登場

**AWS Systems Manager Patch Manager**は、これらの課題を解決するために生まれた機能です。

**主な特徴**は以下です。

* **マネージドノードへのパッチ適用プロセスを自動化。**
* **適用すべきパッチの選別を自動化。**
* **定期的なスキャンとパッチ適用が可能。**
* **パッチのコンプライアンス状況を可視化できるダッシュボードを提供。**
* **複数のAWSアカウントやリージョンでのパッチ管理を統合的に管理可能。**

### AWS Systems Manager Patch Managerの仕組み

AWS Systems Manager Patch Managerは、以下の流れでパッチ適用を実行します。

1. **マネージドノード上で、SSMドキュメントと呼ばれる処理手順が実行される。**
2. **SSMドキュメントは、OS標準のコマンドやAPIを呼び出して、パッチのスキャンやインストールを行う。**
3. **パッチのスキャンやインストールは、OS上に設定されたデフォルトのパッチソースリポジトリ、または指定されたソースリポジトリからパッチを取得する。**
4. **どのパッチを適用するか、パッチベースラインというルールで定義する。**
5. **どのマネージドノードにどのパッチベースラインを適用するか、パッチグループやパッチポリシーで設定する。**
6. **パッチオペレーションの実行結果は、システムズマネージャーインベントリやコンプライアンスに記録される。**

### AWS Systems Manager Patch Managerの活用方法

AWS Systems Manager Patch Managerは、以下の4つのケースで活用できます。

1. **パッチポリシーを使用する。**
    * クイックセットアップからパッチマネージャーを選択して設定を行う。
    * 複数のAWSアカウントやリージョンに対して、一括で設定を適用できる。
2. **クイックセットアップのホスト管理オプションを使用する。**
    * EC2インスタンスの管理に必要な設定を簡単に適用できる。
    * パッチのスキャンのスケジュールを設定できる。
    * インストールのオペレーションは実行できない。
3. **SSMドキュメントの実行スケジュールを独自に設定する。**
    * システムズマネージャーメンテナンスウィンドウを使用する。
    * パッチポリシーが登場する前は、一般的な方法だった。
4. **オンデマンドでパッチオペレーションを実行する。**
    * マネージメントコンソールの「今すぐパッチ適用」ボタンから、即座に実行できる。

### AWS Systems Manager Patch Managerのメリット

AWS Systems Manager Patch Managerを活用することで、以下のようなメリットがあります。

* **サーバーのパッチ管理の自動化による人的負担の軽減。**
* **パッチ適用の効率化によるセキュリティ強化。**
* **パッチコンプライアンスの可視化によるセキュリティ対策の強化。**
* **マルチアカウントやマルチリージョン環境でのパッチ管理の統合化。**

### まとめ

AWS Systems Manager Patch Managerは、サーバーのパッチ管理を自動化する強力な機能です。これにより、これまで手作業で行っていたパッチ管理の負担を大幅に軽減し、セキュリティレベルの向上も期待できます。ぜひ、パッチマネージャーを活用して、サーバーのパッチ管理を効率化しましょう。

### 関係資料
[AWS Systems Manager Patch Manager【AWS Black Belt】](https://youtu.be/9xe3QDH5cyM?si=9b5Sco2C5Cm-1ZQS)
[AWS Systems Manager Patch Manager【AWS Black Belt】/PDF](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbHNoTndOZVJzcmNxYlBybHBsMGotWTZjZ1d4QXxBQ3Jtc0tsTUVLQ0Y0YkxpcjNndU1YdlRhY2xmRnN0dDRHaVlVZjl3MEN5WDVQNDJjNzFkRGhtT0VmaFFnclk1N1ppM1gxT0FTbGNyU1FEQXlLSEgwZ2lLdFJnbk9xbW9mQlpYcWZ2RnFKeE5EUmlEZlVJTFQwWQ&q=https%3A%2F%2Fpages.awscloud.com%2Frs%2F112-TZM-766%2Fimages%2FAWS-Black-Belt_2024_AWS-SystemsManager-PatchManager_0430_v1.pdf&v=9xe3QDH5cyM)
【React】公式ページの"Reactの流儀"を勉強

# はじめに
React公式ページの"Reactの流儀"を勉強したので備忘録を残します。
図解に挑戦してみました。きちんと図で表現するのは難しいですね。図にしてみると、文字だけで理解したような気になっていたものが炙り出されて色々な気づきがありました。

# UI をコンポーネントに分割する
1. モックアップのすべてのコンポーネントとサブコンポーネントを四角で囲んで、それぞれに名前を付けていく(**単一責任の原則**。１つのコンポーネントに一つの機能)
1. コンポーネントを階層構造に整理する
![Reactの流儀_図のみ-コンポーネントへの分解.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3845328/d26b16d4-a5bf-9c14-9d0d-7d71484b7257.jpeg)

# Reactで静的なバージョンを作成する
- コンポーネントを作成していく際に、他のコンポーネントを再利用しつつ**props**(親から子にデータを渡す手段。関数に渡す引数のようなもの) 経由でそれらにデータを渡すようにする
- Don't use "state" yet!  state はインタラクティビティ、つまり時間とともに変化するデータのためにあるもの
- 通常、シンプルな例ではトップダウンで作業する方が簡単であり、大規模なプロジェクトではボトムアップで進める方が簡単
![Reactの流儀_図のみ-静的なバージョンの作成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3845328/fe1abed5-841e-c2f9-d6ff-a3d2bc41b927.jpeg)

# UI の状態を最小限かつ完全に表現する方法を見つける
- UI をインタラクティブにするには、ユーザが背後にあるデータモデルを変更できるようにする必要がある。これにはstateというものを使用する
- state はコンポーネントのメモリのようなもの。コンポーネントが情報を追跡し、ユーザ操作に反応して変更できるようにする
- stateであるべきもの
    - 記憶する必要がある
    - 変化する
    - 最小限のセットである（**DRY**（Don’t Repeat Yourself））
- stateでないもの
    - 時間が経っても変わらないもの
    - 親から props 経由で渡されるもの
    - コンポーネント内にある既存の state や props に基づいて計算可能なもの
![Reactの流儀_図のみ-UIの状態を表現する.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3845328/4be12822-47ec-8b23-66fa-785180f08694.jpeg)

# stateを保持すべき場所を特定する
1. その state に基づき何かをレンダーする全てのコンポーネントを特定する
1. 階層内でそれら全ての上に位置する、最も近い共通の親コンポーネントを見つける
1. state をどこで保持すべきか決める
    - 多くの場合、共通の親に直接置くことができる
    - その共通の親のさらに上にあるコンポーネントに置くこともできる
    - 適切なコンポーネントが見つからない場合は、state を保持するためだけの新しいコンポーネントを作成し、共通の親コンポーネントの階層の上のどこかに追加する
1. 親コンポーネントは state として情報を保持し、その情報を子コンポーネントに props として渡す
![Reactの流儀_図のみ-state を保持すべき場所.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3845328/9f8862ca-25b1-411d-d7e6-fc3a4fb786b1.jpeg)

# 逆方向のデータフローを追加する
- ユーザがフォームの内容を変更するたびに、state がそれらの変更を反映して更新されるようにするには、逆方向へのデータの流れ（子から親へ）をサポートする必要がある
- stateを持つコンポーネントのみがstateの値をセットする関数を呼び出すことができる。よって、フォームを持つコンポーネントがstateを更新できるようにするには、これらの関数を渡す必要がある
- フォームを持つコンポーネントの中にイベントハンドラを追加し、それから渡された関数を呼び出すことで、stateを設定する
![Reactの流儀_図のみ-逆方向のデータフローを追加する.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3845328/9d1815ea-6aae-4adf-45de-05e7251fdddf.jpeg)

# 参考
https://ja.react.dev/learn/thinking-in-react
【Skip】SwiftでAndroidアプリも開発できちゃうゾ！

## はじめに
先日Skipのバージョン1.0がリリースされました。
SkipとはSwiftでAndroidアプリも作れちゃうよというやつですね。早速ちょっとだけ触ってみたので、サンプルアプリをビルドするまでを記事にしてみます。
SwiftでiOS、Android両方開発できるのはSwift出身の僕にとっては最高ですね。

#### 公式

https://skip.tools/

## 実際に動かしてみよう
### 1.Skipで開発する環境を整える
#### Skipのインストール

以下のコマンドでSkipをインストールしましょう
```
brew install skiptools/skip/skip
```

次に以下のコマンドでSkipが動くかどうかをチェックします

```
skip checkup
```

僕は以下のように```Java version```のところでエラーがでましたが、特に問題なくSkipを使って両OSのビルドができました。今後どこかで困るのかもしれません。

![スクリーンショット 2024-08-24 14.44.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/5b8e2719-3f84-b989-1f56-f1b42478d70a.png)

Java vesionも21.0.0未満だし、なぜエラーが出てるのかはよくわかっていません。
JAVA_HOMEにAndroid StudioのJavaを設定しているのがいけないのかな...


### 2.プロジェクトの作成
以下のコマンドでプロジェクトを作成します。
```bundle.id```、```project-name```、```AppName```の部分はそれぞれ自分の好きなものに変更してください。ただし、```project-name```と```AppName```は別の名前を使用しなくてはいけないようです。

```
skip init --open-xcode --appid=bundle.id project-name AppName
```

例)こんな感じ
```
skip init --open-xcode --appid=com.test.Sample sample-project SampleApp
```

プロジェクトの作成が完了すると自動でXcodeも立ち上がります。
ちなみにディレクトリはこんな感じに生成され、Xcodeプロジェクトは```Darwin```の中にいます。


![スクリーンショット 2024-08-24 16.34.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/e6dfaa91-e35c-14b6-f752-0a81c9b84547.png)

![スクリーンショット 2024-08-24 16.32.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/0495adfa-b19f-92c5-1ee5-0f57b61d17d9.png)


#### Bundle ID知らない人向け
Bundle IDとはアプリを一意に識別するもので、アプリリリースするときに使ったりする。くらいの認識でいいと思います。
だいたい、メールアドレスとかを逆にしたものにアプリの名前を繋げた形にしていることが多いと思います。例えばメールアドレスが```hogehoge@sample.com```だったら、Bundle IDは```com.hogehoge.AppName```みたいな感じ。


### 3.Androidのエミュレーターを立ち上げる

AndroidStudioを開いて、Virtual Device Managerを選択します
![スクリーンショット 2024-08-24 16.26.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/05539151-bc47-2489-6d64-75e7d9de7e91.png)


デバイスを選んで「▶️」を押して立ち上げます。
初めて開く人はデバイスがないかもしれないので、その場合は追加を行なってください。
![スクリーンショット 2024-08-24 16.26.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/b70289af-793a-1990-103b-16e5da90a1b4.png)


### 4.Xcodeでビルドする
あとはXcodeでもシミュレーターを選択してビルドしましょう。
ビルドが通ればAndroidとiOSの両方のアプリが立ち上がるはずです。

![スクリーンショット 2024-08-24 16.40.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/0844c4b8-5395-9e32-2d2b-ba752bf681b0.png)

ドキュメント

https://skip.tools/docs/gettingstarted/

## 料金
Skipはインストール後、14日の試用期間があり無料で使えます。

その後は、商用のアプリやclosed-source(社内用とか？Githubのプライベートリポジトリとかで管理するもの？)で使用する場合には```License Keys```が必要になります。

```License Key```もまずは30日間無料で使えるものが発行できます。それが終了すると、3つのプランから選んで加入して使用することができるようです。

個人で開発しているアプリかつ30K USD/year未満であれば無料プランが使えます。
僕は悲しいかな無料プランを使えてしまいます。(モット、ウレル、アプリ、ツクリタイ。)


ちなみに```License Keys```は以下のファイルに書き込むようです。
```
~/.skiptools/skipkey.env 
```

#### License Keysについて

https://skip.tools/docs/licensekeys/

#### 料金プランについて

https://skip.tools/pricing/


### おわりに
今回は両OSのUIもSwiftで作成されていますが、UIは別々で書くとか、既存のプロジェクトに組み込むとかその辺りもサポートされてるみたいです。まだ始めてみただけなのでSkipで開発してアプリリリースまでやってみるかなぁと思ってます。ではでは。
生成AIを活用したフロントエンドテストの自動化：品質保証の新たなアプローチ

フロントエンド開発において、テストは品質保証の重要な要素です。しかし、手動でのテスト作成やメンテナンスは労力がかかり、特に大規模なプロジェクトでは大きな負担となります。そこで注目されているのが、生成AIを活用したテストの自動化です。この記事では、生成AIを用いてフロントエンドテストを自動化する手法とそのメリットについてまとめます。

## 1. 生成AIとは？
生成AI（Generative AI）は、与えられたデータや指示に基づいて新たなデータやコンテンツを生成する技術です。プログラミングにおいては、コードやテストケースの自動生成が可能であり、これによって開発の効率を大幅に向上させることができます。

## 2. 生成AIがもたらすフロントエンドテストの変革
従来のフロントエンドテストは、開発者が手動でテストケースを作成し、定期的にメンテナンスを行う必要がありました。生成AIを活用することで、これらの作業が大幅に自動化され、以下のような利点が得られます。

### 2.1 テストケースの自動生成
生成AIは、既存のコードやUIの振る舞いを解析し、それに基づいてテストケースを自動生成します。例えば、ユーザーインタラクションをシミュレーションするテストケースや、コンポーネントのレンダリング結果を検証するテストが自動で作成されます。

### 2.2 テストのメンテナンスが容易に
UIの変更や新機能の追加に伴い、テストケースも変更が必要になりますが、生成AIを利用することで、これらのメンテナンス作業を自動化できます。AIが変更箇所を検知し、テストケースを自動で更新してくれるため、開発者の負担が軽減されます。

### 2.3 リグレッションテストの効率化
リグレッションテストは、既存の機能が新しい変更によって壊れていないかを確認するために重要です。生成AIを活用することで、過去のバージョンとの比較を自動で行い、必要なリグレッションテストを提案・実行することができます。

## 3. フロントエンドテストの自動化に役立つ生成AIツール
ここでは、フロントエンドテストの自動化に特化した生成AIツールをいくつか紹介します。

### 3.1 Testim
Testimは、生成AIを利用してテストケースを自動生成し、UIの変更に柔軟に対応するテスト自動化ツールです。ドラッグ＆ドロップのインターフェースを使ってテストを簡単に作成できるほか、AIがテストケースのメンテナンスを自動で行います。

### 3.2 Mabl
Mablは、生成AIを活用してブラウザベースのエンドツーエンドテストを自動化するツールです。ユーザーの操作を記録し、それに基づいてAIがテストケースを生成します。また、UIの変更に対応するための機械学習アルゴリズムも搭載されています。

### 3.3 Applitools
Applitoolsは、ビジュアルテストを自動化するツールで、生成AIを用いてUIの変更を検知し、視覚的な違いをチェックします。ReactやAngularなどのフレームワークと統合して使用することができ、視覚的なリグレッションテストに特化しています。

## 4. 生成AIによるフロントエンドテスト自動化の課題と対策
生成AIを活用したテスト自動化には多くの利点がありますが、導入に際していくつかの課題も存在します。

### 4.1 テストケースの品質管理
生成AIによって自動生成されたテストケースが、必ずしも最適なものであるとは限りません。AIが生成したテストケースをレビューし、必要に応じて修正することで、テストの品質を確保する必要があります。

### 4.2 過信によるリスク
AIに依存しすぎると、テストのカバレッジが不十分になったり、予期しないバグが見逃されたりするリスクがあります。AIを補助的なツールとして捉え、開発者自身がテストの全体像を把握することが重要です。

## 5. まとめ
生成AIを用いたフロントエンドテストの自動化は、開発の効率化と品質向上に大きく貢献します。自動生成されたテストケースを活用することで、開発者はより多くの時間を新機能の開発やUI/UXの改善に費やすことができるでしょう。一方で、AIの提案を適切に評価し、テストの品質を保つことが求められます。また、生成AIに頼り切るのではなく、最終確認は開発者自身で行いもし修正点があれば修正するというように補助的なツールとして活用することが必要となります。今後、生成AIの技術がさらに進化することで、フロントエンド開発の現場はますます革新されていくと思われます。
[メモ] Next.js で particles.js を動かす。

<a href="https://www.npmjs.com/package/react-particles-js" target="_blank">react-particles-js</a> は今廃止されているため、使用することはできません。

ですので、下記の通りに、代わりに <a href="https://vincentgarreau.com/particles.js/" target="_blank">particles.js</a> を直接使用する方法を示します。

<details>
    <summary>particles.js のデフォルト設定</summary>
    
```json
{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
```

</details>

```jsx
"use client";

import { useEffect } from "react";

export default function Page() {
    const particleSettings = {/* particles.js の設定 */};

    useEffect(() => {
        particlesJS("particles-js", particleSettings);
    }, []);

    return (
        <>
            <div id="particles-js"  style={{ height: "100vh", width: "100vw", position: "fixed" }}></div>

            {/* また別の CDN を用いても大丈夫です。 */}
            <script src="https://vincentgarreau.com/particles.js/assets/_build/js/lib/particles.js"></script>
        </>
    );
}
```
「docker compose up」すると出てきた `version is obsolete` という警告について

## はじめに
Docker を使用してMySQLの環境構築をしていたところ、```docker compose up```を叩くと`version is obsolete`という謎の警告が出てきました。



## 問題
docker-compose.ymlを作成し、コンテナを起動したところ、以下のような警告が出ました。
```terminal
$ docker compose up
WARN[0000]/Users/user/app/docker-compose.yml: `version` is obsolete
```
バージョンに問題があるのかなと思い、[Dockerのドキュメント](https://docs.docker.jp/compose/compose-file/index.html#compose-spec-compose-file)で原因を探ってみました。

>作業ディレクトリ内での、Compose ファイルのデフォルトのパスは compose.yaml （推奨）か compose.ymlです。
> Compose 実装は、下位互換性のために docker-compose.yaml と docker-compose.yml もサポート すべきです。
> 両方のファイルが存在する場合、 Compose 実装は標準である compose.yaml を優先 しなければいけません。


### 原因
- versionの値を見てComposeファイルの検証を行うべきではないとされており、`Compose V2`を使う限りにおいてはもはや不要な項目であった。
- Composeのバージョンが最新になったことによるものだった。
- `Compose V1`では、このversionの値を見てComposeファイルの検証が行われていた。


以上の３点から、バージョンが最新になったことで`version`プロパティが廃止されたためであり、`docker-compose.yml`ファイルの`version`を削除すれば良いことがわかりました。

### 解決方法
```compose.yaml
version: "3.9" # この行を削除すれば良い
services:
  db:
    container_name: MySQL
    build:
      context: .
      dockerfile: Docker/MySQL/Dockerfile
      ....
```

また、ファイル名を`docker-compose.yml`→ `compose.yaml`に変更も行い、無事動作しました。

### まとめ
今回の警告は Composeのバージョンが新しくなったことによるものでした。
Docker Compose V2によって新しく使えるようになったものもあります。
既存のdocker-compose.ymlをわざわざ修正するほどのコストをかけるべきでは無いかもしれませんが、新しく作る場合は[Compose Spec](https://github.com/compose-spec/compose-spec)に準拠した書き方にしていくのが良さそうです。
Railsで、パーシャルを使って、Webサイト・Webアプリの画面を作る



## 概要

パーシャルの意味合いはおそらく、Webサイトの画面の開発のDRYさを低減するのが目的だと感じた。

開発の効率を上げる、同じコードを繰り返す書くことを避ける

その機能を提供してくれるのが、Railsのパーシャルという機能だ。

機能というか、Railsのサービス的な？


## やり方

Railsのフレームワークを生成すると、たくさんのディレクトリが自動生成される。

その中に、appディレクトリがある。

そして、

appディレクトリの中に、viewsディレクトリがあり、

viewsディレクトリの中に、layoutsディレクトリがある。

Railsは、`render`メソッドが使えますが、

```
app/views/layouts
```

このディレクトリの中に、

```
__◯◯.html.erb
```

というファイルを作ります。

そして、

```
application.html.erb
```

の中に、

```
<%= render 'layouts/◯◯' %>
```

と記載すれば、

`__◯◯.html.erb`の中に、記載したコードが、`application.html.erb`に反映される。
【React】公式チュートリアル（三目並べ）の中で学んだことの備忘録

# コンポーネント
自作したコンポーネントは、大文字で始める
```react:例
function Box() {
}
<Box />
```

# props
コンポーネントに値を渡すことができる
```react:例
function Box ( { size } ) {
    return <p>size : {size}</p>;
}

{/*コンポーネントへの値の渡し方*/}
<Box size="10" />
```

# state
- 何らかの値を「記憶」するために、コンポーネントは**state**というものを使用する
- React は、**useState**という特別な関数を提供しており、コンポーネントからこれを呼び出すことで「記憶」を行わせることができる
```react:例
{/*useState関数でstateを得る。引数はstateの初期値。stateとそのset関数を配列で受け取る*/}
const [value, setValue] = useState(null);
```
- 各コンポーネントはそれぞれ独自のstateを保持している。それぞれのコンポーネントに格納されているstateは、他のものとは完全に独立している
- コンポーネントの set 関数を呼び出すと、React は自動的に内部にある子コンポーネントも更新する
- 複数の子コンポーネントからデータを収集、又は 子コンポーネント同士で通信したい場合、親コンポーネントに共有の state を宣言する
- 親コンポーネントがその state を子に prop 経由で渡すことで、子同士および親子間でコンポーネントが同期されるようになる

# Reactその他
## React DOM
Web ブラウザとやり取りするための React ライブラリ
## renderの無限ループ
- stateのset関数を含む関数をrenderの中で呼ぶと、再render時にまたその関数が呼ばれ、またrenderされるため以下無限ループとなる
- propsとして渡す際の解決策は、原因となる関数を関数に包んで渡すこと
```react:例
onFooClick={()=>handleClick(1)}
```
## 命名規則
Reactでは、イベントを表す props には **on**Something という名前を使い、それらのイベントを処理するハンドラ関数の定義には **handle**Something という名前を使うことが一般的
## Reactにおけるリストのkey
- リストを再レンダーするとき、React は各リスト項目の key を見て項目を見分け、リスト要素を追加、変更、並替または削除すべきかを判定する
- key はコンポーネントとその兄弟間で一意であれば十分
```react:例
<li key={foo}>bar</li>
```

# その他
## CSS
### 擬似要素
セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするもの。例｜`::after`。`:`が一つの場合は擬似クラス。
対象の要素に擬似的に要素を追加して装飾を適用することもできる（アイコンの追加など）
### 擬似クラス
- 特定の状態にある要素を選択するセレクタ。
- 例｜ある要素の最初の子要素、ポインターを当てた状態　など

## JavaScript | Array
### `Array.prototype.fill()`
例｜`Array(9).fill(null)`とすれば、値が全てnullである長さ9の配列を生成することができる 
### `Array.prototype.slice(start, end)`
- 配列のコピーメソッド。シャローコピーする
- startからendの直前までの配列を返す
- start省略時は0、end省略時はその配列のlengthの値となる
- よって `slice()` とすれば、配列まるまるコピーとなる
### スプレッド構文
- 配列の内容を展開する
`...arry` -> arry[0] arry[1] arry[2] arry[3] 
- 配列のコピー(浅いコピー)や要素の追加を簡単に行うことが可能
```js:例
const arry2 = [...arry];
const arry3 = [-1, ...arry, 4];
```
### `Array.prototype.map()`
- コールバック関数を配列のすべての要素に対して反復処理し、その結果からなる新しい配列を生成する
- コールバック関数の引数は次のとおり
    - element
配列内で現在処理中の要素
    - index
現在処理中の要素の配列内における添字
    - array
`map()`が呼び出された配列
p^4+14は素数なのか？

## そもそも
京都大学の2021年の入試問題に、次のようなものがある。
```math
pが素数ならばp^4+14は素数で無いことを示せ。
```

この問題は、次のように解答可能である。

1) $ p=3 $のとき
$ 3^4+14=95 $より、素数でない

2)$ p≡1,2 (mod3) $のとき
$ p^4≡1 (mod3) $であるから、$ p^4+14≡15≡0(mod3) $
以上より、$ p $が素数のとき、$ p^4+14 $は素数でない。

## ところで


**これ、pが素数じゃなくても成立するんじゃね？**

現に、1,4,6,8,9を代入してみたところ、全て合成数となるのである。
手計算しようかとも思ったが、面倒なので適当にコードを書いて確かめようと思った。
ごちゃごちゃしながら最終的にできた ~~クソ~~ コードがコチラ
```javascript
function myFunction() {
 let a;
 let arr = new Array();
 for(let i=2;i<100;i++){
    a = Math.pow(i,4) +14;
    for(let j=2; j<a; j++){
        if (a%j===0){
        break;
        }
        else if(j==Math.floor(Math.pow(a, 0.5))){
            arr.push(i);
            break;
        }
    }
 console.log(arr);
}
```
 これを実行したところ、出力は次のようになった。
 ```
 [ ]
 ```
 お！？やっぱり素数じゃなくてもいけるのか？と思い、a=1000としたところ、出力はこうなった。
 ```
 [ 165,
  195,
  255,
  405,
  435,
  465,
  555,
  885,
  975, ]
 ```
 、、、たくさんありました。

## ちなみに
$ p=165 $を代入すると、$ 165^4+14=741200639 $となり、これが素数となるようです。
[Risk Assessment] リスクアセスメント

# リスクアセスメント順序

|プロセス|詳細||
|:--|:--|:--|
|リスク特定|発見、認識||
|リスク分析|性質・特徴の理解||
|リスク評価|リスク分析の結果をリスク基準と比較し、対応の要否を判断||
|リスク対応|回避、提言、移転、保有||

# 参考リンク
- [R6S53_管理](https://www.ap-siken.com/kakomon/06_haru/q53.html)
- [R5A54_対応](https://www.ap-siken.com/kakomon/05_aki/q54.html)
Windowsが32ビットOSか64ビットOSかを知る方法

# はじめに
## ひとこと
このQiitaのような技術系の記事を読んでいると、「64ビットのWindowsで検証済み」などの記載があると思います。筆者も他の記事を執筆するにあたって当たり前のように書いていました。しかし、初心者だった頃はどういうものか分かっていなかったことを思い出し、そのような方に向けてを執筆することにしました。

## 注意
+ 記事の情報は **2024/08/24現在** のものです
+ コンピュータの初心者向けの記事であるため、正確さよりも **分かりやすさを重視して** 執筆しています

## 対象の環境
+ Windows11

# 本編
## そもそもWindowsの32ビットOSと64ビットOSとは

:::note
Windowsが32ビットOSか64ビットOSかを知る方法だけを知りたい方は飛ばしてください
:::

Windowsは32ビットOSと64ビットOSの2つに分かれています。

32ビットOSは一度に扱えるデータの量が有限ですが、64ビットOSは理論上、ほぼ無制限の量のデータを扱うことができます。
もう少し嚙み砕くと、このデータの量は「机の広さ」だと思ってください。
机が広ければ広いほど、より大きなものを置くことができたり、より多くの作業を同時にできたりします。
32ビットOSで扱えるデータの量を家にあるダイニングテーブルぐらいの広さとすると、64ビットOSで扱えるデータの量は富山県ほどの広さとなります。
それだけ大きな広さの机があっても使いきれないですが、広さは有限ですので、「ほぼ無制限の量のデータを扱うことができる」という表現になります

歴史的には、まず32ビットOSが開発されましたが、コンピュータが進化するにつれて32ビットOSでは性能が足りなくなり、64ビットOSが開発されました。
Windowsのバージョンでは、Windows10から64ビットOSが推奨されており、そして現在はWindows10の後継であるWindows11がサポートされているため、特にWindowsが搭載された個人のパソコンの多くは64ビットOSだと思います。

少し話が変わりますが、Windowsで動くアプリも同じように2つに分かれています。
ここでは、32ビットOSを基に開発されたアプリを32ビットアプリ、64ビットOSを基に開発されたアプリを64ビットアプリ、と呼びます。

32ビットアプリを64ビットOSで動かすことは簡単です。
ですが、64ビットアプリを32ビットOSで動かすときは注意が必要です。
32ビットOSで一度に扱えるデータの量よりも、多くの量のデータを扱う可能性があるからです。
そのため、アプリの中には、ビット数を切り替える機能があったり、ダウンロードやインストールするときに選べるようになっていたりしています。

32ビットOSのような古いシステムの上で、64ビットアプリのような新しいシステムを動かすことを **下位互換性** といい、それが正常に動けば「下位互換性がある」と表現します。
あるシステムだけでも次々と新しいバージョンが公開され、またそれらのシステムが複雑に絡み合っているコンピュータの世界では、 **下位互換性があるかないかをはっきりさせること** が大事になります。

下位互換性がないのに新しいシステムを古いシステムの上で動かすことは、パソコンが動かなくなったり、セキュリティが保たれずサイバー攻撃にあったり、などの重大な問題を引き起こす可能性があります。
そのため冒頭の「64ビットのWindowsで検証済み」の文言の場合は「そう多くはないと思うけど、もし32ビットのWindowsだったら、この通りにやると危険かもしれないよ」という、かなり大事な注意書きだったりします。

## Windowsが32ビットOSか64ビットOSかを知る方法
1. **Windowsキー + R** を押す
    **ファイル名を指定して実行** が開きます
2. 次のコマンドをコピーしてペーストし、エンターキーを押す
    **コマンドプロンプト** が開きます
    ```txt
    cmd
    ```
3. 次のコマンドをコピーしてペーストし、エンターキーを押す
    結果が表示されます
    ```txt
    wmic os get osarchitecture
    ```
# おわりに
## ひとこと
最後まで読んでいただきありがとうございます。
タイトルをテーマに執筆したはずでしたが...(笑)