OmniAICreator/Qiita-1.07M huggingface dataset:
[Flutter その１] Flutterの基礎

# はじめに
私自身、Flutterの開発を行っているので、ここで一つアウトプットとしてFlutterについてまとめていきたいと思います。基本は基礎をまとめ、これ以降にも続々とつづけて記載をしていきたいと思います。(時間があれば、、、、)

# 1\.Flutterとは
Flutterは、Googleが開発したオープンソースのUIフレームワークで、一つのコードベースで、iOS、Android、Web、デスクトップを開発できます。__Dart__ というプログラミング言語を使用して、モバイル、Web、デスクトップ向けの高性能なネイティブアプリを作成します。

# 2\.Flutterの主な特徴
* __クロスプラットフォーム開発__ ：1つのコードでiOSやAndoroidなど、複数のプラットフォーム向けのアプリを開発できる。
* __高速な開発サイクル__ : 「ホットリロード」という機能により、コードを修正すると即座にアプリに反映されるため、開発速度が向上します。
* __豊富なウィジェット__ : Flutterはウィジェットベースで、カスタマイズ可能なUIを簡単に作成できる。デフォルトで多くのウィジェットが提供されていますが、独自のウィジェットも作成可能です。
* __ネイティブパフォーマンス__ : Flutterアプリは、ネイティブのようなパフォーマンスを提供します。

# 3. Flutterの基本構造
Flutterアプリは、ウィジェットで構成されており、全てのUI要素がウィジェットとして表現されます。大きく分けて「__ステートレスウィジェット__ 」と「__ステートフルウィジェット__ 」があります。

* __StatelessWidget__ : 状態を持たないウィジェット。固定のデータを表示するために使用されます。
* __StatefulWidget__ : 状態を持つウィジェット。ユーザーの操作に応じて、表示を変更する場合に使用されます。

# 4. ウィジェットの例
Flutterでは、UIの各要素がウィジェットで表現されます。基本的なウィジェットとして以下のものがあります。

* __Text__　: テキストを表示するウィジェット。
* __Column__　: 子ウィジェットを縦に並べるコンテナ。
* __Row__ : 子ウィジェットを横に並べるコンテナ。
* __Container__ : レイアウトのためのウィジェット。サイズやパディングを調整したり、装飾を加えられます。
* __Scaffold__ : 画面の基本的なレイアウトを構成するウィジェットで、アプリの主要な画面を作成する際に使います。AppBarやBottomNavigationBarなども含めることができます。

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

```

# 5. 状態管理
Flutterアプリでは、ユーザーの操作に応じてUIが動的に変化します。そのため、状態管理が重要です。Flutterにはいくつかの状態管理方法があります。

* __setState__ : 簡単なアプリで状態を更新するための方法。setStateを使って状態を変更すると、UIが再描画されます。
* __Provider__ : より大規模なアプリで使用される状態管理パターン。InheritedWidgetを基にしたもので、アプリ全体にデータや状態を供給します。
* __Riverpod__ : Providerの拡張バージョンで、テストや依存関係注入がしやすくなっています。

# 6. Flutterでのレイアウトの仕組み
Flutterでは、ウィジェットを組み合わせてレイアウトを作成します。以下は一般的なレイアウトのウィジェットです。

* __Container__　: サイズや装飾、パディングを設定できる汎用的なレイアウトコンテナ。
* __Column__　: 縦方向にウィジェットを並べる。
* __Row__　: 横方向にウィジェットを並べる。
* __Stack__　: ウィジェットを重ねて表示する。

```dart
Column(
  children: [
    Text('Title'),
    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      color: Colors.blue,
      child: Text('This is a container'),
    ),
  ],
)
```

# 7. Flutterのナビゲーション
複数の画面を持つアプリでは、画面間の遷移（ナビゲーション）が必要です。Flutterでは、Navigatorウィジェットを使って、画面遷移を行います。

```dart
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);


```

* __Navigator.pop()__ : 現在の画面を閉じて、前の画面に戻ります。

# 8. まとめ
Flutterは、シンプルで強力なクロスプラットフォーム開発を提供するツールです。状態管理、ウィジェットの使い方、レイアウト、ナビゲーションといった基本概念を理解することで、効率的なアプリ開発が可能になります。
素数を判定するのを作ってみよう！(番外編)

```js
function Is_prime(a){
    let prime_is = true;
    if(a == 1){
        prime_is = false;
    }else{
        for(let i = 2; i <= a - 1; i++){
            if(a % i == 0){
                prime_is = false;
            }
        }
    }
    return prime_is;
}
```
というプログラムを前回は書きました。

# 条件を変える
これをこうじゃ！
```js
function Is_prime(a){
    let prime_is = true;
    if(a == 1){
        prime_is = false;
    }else{
        for(let i = 2; i < a; i++){ /*変わったのはここ*/
            if(a % i == 0){
                prime_is = false;
            }
        }
    }
    return prime_is;
}
```
i <= a - 1
はaより小さいことなので
i < aと書けます！

# 平方根
```js
function Is_prime(a){
    let prime_is = true;
    if(a == 1){
        prime_is = false;
    }else{
        for(let i = 2; i < Math.sqrt(a) + 1; i++){ /*変わったのはここ*/
            if(a % i == 0){
                prime_is = false;
            }
        }
    }
    return prime_is;
}
```

平方根を使うことで処理を高速化しました！

# 即リターン
```js
function Is_prime(a){
    if(a == 1){
        return false;
    }else{
        for(let i = 2; i < Math.sqrt(a) + 1; i++){
            if(a % i == 0){
                return false;
            }
        }
    }
    return true;
}
```
これでより高速化できました！
pytorch_geometric のデータをnetworkxで可視化する

## はじめに
pytorch_geometric のデータ形式がなんとも見にくいのでうまく可視化する方法を調査した備忘録です．

## 環境
* python 3.12
* torch 2.4.1
* torch_geometric 2.6.1
* networkx 3.2.1

## pytorch_geometric のデータ形式
pytorch_geometric のデータ形式は エッジの始点及び終点で表される配列`edge_index` とノード上の信号を表す配列 `x` からなります．

```Python
import torch
from torch_geometric.data import Data

edge_index = torch.tensor([[0, 1, 1, 2],
                           [1, 0, 2, 1]], dtype=torch.long)
x = torch.tensor([[-1], [0], [1]], dtype=torch.float)

data = Data(x=x, edge_index=edge_index)
```
このグラフを可視化すると下図のような感じになります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642842/6d4de6f2-af41-f838-66f8-30c6abd1b6db.png)

## networkx によるグラフの可視化
pytorch_geometric の `Data` オブジェクトを networkx の `Graph` オブジェクトに変換する関数があるので，それを使います．
```Python
from torch_geometric.utils import to_networkx

g = to_networkx(data)
# 可視化
nx.draw(G=g, with_labels=True)
```
`nx.draw()` により，先ほど示したグラフの図が表示されます(再掲)．

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642842/6d4de6f2-af41-f838-66f8-30c6abd1b6db.png)


`from_networkx()` により，pytorch_geometric の `Data` オブジェクトに戻すことができますが，グラフ信号は失われます．

```Python
from torch_geometric.utils import from_networkx

data = from_networkx(g)
print(data.edge_index)
# >>> tensor([[0, 1, 1, 2],
#            [1, 0, 2, 1]])
print(data.x)
# >>> None
```

他にも networkit, trimesh, cugraph, dgl, rdmol といったライブラリとの相互変換もできるようです．
詳しくは公式ドキュメントをご参照ください．
`torch_geometric.utils` の下の方にいろいろ載ってます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642842/3ceca2fb-e0c4-80a1-b04f-b0571b5be0ae.png)


## 参考文献
* to_networkx() : https://pytorch-geometric.readthedocs.io/en/latest/modules/utils.html#torch_geometric.utils.to_networkx
* from_networkx() : https://pytorch-geometric.readthedocs.io/en/latest/modules/utils.html#torch_geometric.utils.from_networkx
～未経験・知識ナシからセキュリティエンジニアになる人！～『{Level2}ペースにゆとりのある講座で基礎知識学んで15日目』

こんばんは！Itoshinです。
Qiita投稿2日目、まずは習慣化するために投稿ペースは崩さず3週間は続けようと思います。

いざ書くとなると、どう書いてよいやら...なのですが、
軽く今日受けた講座の復習に触れて、
+ 『今後の目標（半年以内）』
+ 『何ができるようになりたいか』
+ 『今の環境を最大限に活用するなら何をしておくべきか』

をまとめていこうと思います。

ではまず、
# 今日の講座で新たに学んだこと
まず最初にITについて完全無知のド素人な私が受けている講座は
『コンピュータの基礎理論や用語、ネットワーク、DB等のITの基礎知識』
から始め、最終的には
+ 『Windows/Linuxサーバの管理、要塞化』
を操作習得し...、

+ 『セキュリティインフラ構築』
+ 『暗号・認証技術の理解』
+ 『クラッキングの攻撃手法から学ぶ対策理解』
+ 『ログ解析』『フォレンジック』
などを演習を通して学んでいくカリキュラムであり、最終的には現場に近いレベルで活躍できるようにしていきます。

こうしてカリキュラム表を見ながら、書いているだけでも概要を見て
（知らない用語がたくさんダー！どういう意味で、何に使われるんだろう？）と、調べたり、講座の中で説明される日を少しワクワクしています。＾＾

さて、今日講座で学んだことは

+ 暗号資産の概要
+ ブロックチェーン技術、ブロック（ヘッダ）の構造、偽造防止の仕組み
+ CDNとその仕組み、メリットデメリット
+ ダークウェブの概要、歴史、存在意義
+ 無線通信技術（WLAN、IEEE802.11委員会、モバイルルーター）とその脅威とセキュリティ
でした！

うーん、ここまで書くのに1時間...。眠いので今日はこの辺にして続きは明日書きます！おやすみなさい。


:::note warn
【今日の課題】
+ 1時間で1記事の大枠は完成させたい
+ 1日分の講義内容や勉強内容を投稿するのは今後かなり厳しくなる可能性あり
+ 引用を活用して分かりやすさと制作速度を確保
:::

:::note info
【今日できたこと】
+ CCNA問題を解くためにPing-tを活用（スマホでもできる手軽さが良い）
+ 講座内でのグループワーク進行、アウトプットが上手くできた
+ ランニングで血行良くし、腰痛予防！
:::
ECS Web ApplicationハンズオンをAWS CDKを使って実施 1 〜EC2へのデプロイ

AWS workshop studioのECS Web Applicationハンズオンを題材に、AWS CDKに入門してみています。

https://catalog.workshops.aws/ecs-web-application-handson/ja-JP

## 背景

普段の業務では、アプリケーションの運用にEKSを使っています。

最近新規事業の立ち上げを行なっており、プロトタイプをデモするための環境としてECSを使い始めてみました。

今は手運用に頼ってしまっており、完全にリソース管理が属人化してしまっているのが課題です。
そこでAWS CDKを使ってリソース管理を行えるようにしていくため、CDKに入門してみました。

AWS CDK Patternsは使わずに実施しています。

https://cdkpatterns.com/

今回は、3.5 EC2へのデプロイ までを実施しました。

## 環境

- Macbook Air (CPUはM3)
これがなぜ書く必要があるのかは後述

- Typescript

## EC2のデプロイまで

まずは「3.5. EC2 へのデプロイ」までが動くようになったのがこちら。（ちょっとまだ直すべき点はあり）

https://github.com/k5trismegistus/ecs-web-application-handson-with-cdk/blob/3_5_deploy_to_ec2/cdk/lib/cdk-vpc-stack.ts

以下のリソースが作成されます。

- VPC
- パブリックサブネット x2
- EC2　オートスケーリンググループ
- ECSクラスタ
- ECSタスク定義
- ALBでロードバランシングされるECSサービス

## 学び

### サブネットはVPCと一緒に作る

VPCの作成時にオプション指定でサブネットを作っています。
[PublicSubnet](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_ec2.PublicSubnet.html)というのもありますが、これを使ってもいわゆる「パブリックサブネット」にはなりません。結局はigwの定義を自分で書き、ルートテーブルも自分で設定する必要があるようです。

### Constructは暗黙的なリソースの作成がある

CDKは、全てのリソースを自分で明示的に書くのではなく一部のリソースを自動作成に任せるのが「CDKらしい」書き方らしいです。

例えば「サブネットはVPCと一緒に作る」のところにあるように、 `new ec2.Vpc(...)` のオプションを適宜与えると、VPCと同時にサブネットが作成されます。

VPCとサブネットはわかりやすいですが、セキュリティグループ周りはかなり暗黙的な部分が多そうです。

`new ecs.EC2Service(...)` はデフォルトでは自動でセキュリティグループを作成します。このセキュリティグループはALBにアタッチされるセキュリティグループからのインバウンドアクセスが許可された状態になります。

このインバウンドルールの自動設定に至ってはドキュメントを見ても、どこで実施されているのか明示的な答えが見つからず。
ALBとECSサービス両方に触れる記述はここくらいですが、ここで自動でセキュリティグループのインバウンドルールが追記されるのでしょうか。

```
const targetGroup = new elb.ApplicationTargetGroup(this, "MyTargetGroup", {
  vpc,
  port: 5000,
  protocol: elb.ApplicationProtocol.HTTP,
  targets: [ecsService],
});
```
 
### インスタンスのCPUアーキテクチャに注意

最初はEC2のインスタンスタイプにt3.smallを選んでしまっていました。

途中コンテナが立ち上がらないしログも出ない〜と詰まってしまいふと気づいたのがCPUアーキテクチャの違い。

Apple Silicon のMacでビルドしたDockerイメージなので、ARM用のイメージになっていたんですね。ということでt4g.smallに変えてみたらコンテナが立ち上がりました。



## 今後の改善

現状では、一つのスタックの中にECRリポジトリの作成と、そのリポジトリのイメージを使ったECSタスクの開始が書かれてます。
なので、ECSタスクは空のECRリポジトリからイメージを取ってくるのに失敗してタスクを開始できず、cdk deployが完了しません。

ECRリポジトリの作成とECSタスク定義は少なくともスタックを分ける必要があります。

また記述量が増えていくにつれてファイルも肥大化してきてしまっているので、モジュール分割も必要になってきます。

ハンズオンに沿ってFargateでのデプロイ等も進めていく予定ですが、同時にリファクタリングも行なってみようと思います。
webページ作成：背景画像が画面全体に表示されなかった時の解決方法

練習課題でwebページを作成して今す。
問題が起きたのは背景画像を設定した後のことでした。

HTMLもCSSも記述の入力ミスは直したし、うまく表示されるはずだーと思っていたら、
タイトルの通り、背景画面が途中で切れてしまって画面の下のほうに白い余白ができていました。

CSSでbackground-size: 100% 100%;に設定していましたが、これだけではだめだったようで、
height: 100%;となっているところを、height: 120%;にしたら無事に画面全体に表示されました！
画像の大きさの調整はheightですればいいみたい。

もし横に白い余白がうまれてしまったらwidthで調整すればいいのかな？
次に同じような余白ができてしまったら試してみたいと思います！

HTMLとCSSのつくりも改めて勉強しないとなぁ。
C言語のコードを解析 ~ ソースツリーの作り方

C言語のソースコードを解析するプログラムを作成します。
私は日々の業務を自動化したいと企む組み込みエンジニアです。:smiling_imp:

## 完成コード
<details><summary>ここを開くと完成形のpythonコードが表示されます。</summary>

```python:main.py
import glob

import search.func as searchfunc

class FuncNode:
    def __init__(self, name):
        self.name = name
        self.children = []

    def add_child(self, child_node):
        self.children.append(child_node)


def main():
	# 対象のファイルリストを作成.
	filelist = glob.glob("**/*.c", recursive=True)
	codetree = make_code_tree(filelist, "main")

	codetree_text = []
	print_code_tree(codetree, codetree_text)
	with open("OUTPUT_TREE.txt", "w") as file_obj:
		file_obj.writelines(codetree_text)
	
	
def make_code_tree(prj_filelist:list, root_funcname:str)->FuncNode:
	current_node = None
	for target_file in prj_filelist:
		with open(target_file, "r", encoding="utf-8", errors="ignore") as file_obj:
			codedata = file_obj.read()
			functext = searchfunc.gettext(codedata, root_funcname)
			if functext:
				current_node = FuncNode(root_funcname)
				call_funcs = searchfunc.find_call_funcs(functext)
				for called_func in call_funcs:
					child_node = make_code_tree(prj_filelist, called_func)

					if child_node:
						current_node.add_child(child_node)
				break

	return current_node
		 
def print_code_tree(codetree:FuncNode, output_list:list = None, callstack:str = ""):
	
	if callstack != "":
		callstack += "->"
	callstack += codetree.name

	for child in codetree.children:
		print_code_tree(child, output_list, callstack)
		
	print(callstack)
	if output_list != None:
		output_list.append(callstack + "\n")

if __name__ == "__main__":
	main()

```

```python:func.py
import regex
import re

def gettext(text:str, funcname:str)->str:
	ret = None

	pattern = r"(?:(?:auto|register|static|extern)\s+)?(?:(?:const|volatile|restrict|signed|unsigned|short|long)\s+)*\w+\s+" + funcname + r"\s*\([^()]*\)\s*(\{([^{}]|(?1))*\})"
	match  = regex.search(pattern, text, regex.DOTALL)
	if match:
		ret = match.group()
	return ret
	

def find_call_funcs(text:str)->str:
	# 関数の処理のみ抽出(関数名など"{"の前は削除してから検索を行う)
	index = text.find("{")
	if index != -1:
		funcproc_text = text[index:]
	else:
		funcproc_text = text

	return re.findall("\w+\s*(?=\([^()]*\))", funcproc_text, re.DOTALL)
```
</details>

## 解説
### プログラムの流れ
ソースツリー作成プログラムの大まかな流れです。
```mermaid
graph TD;
    Step1[globでファイルリストを作成];
    Step2[ファイルリストからソースツリーを作成];
    Step3[ソースツリーを出力];
    Step1
    -->Step2
    -->Step3;
```

ファイルリストからソースツリーを作成する処理は関数の再帰呼び出しによって実現します。ファイルリストから`main`関数を探します。このとき正規表現により検索を行い、関数名から処理内容まですべて抽出します。
```mermaid
graph TD;
    Start(引数1:ファイルリスト, 引数2:検索対象の関数名);
    Step1[ファイルリストから要素を1つ取得してそのファイルを開く];
    Step2[正規表現を利用して検索対象の関数とマッチする文字列を取得];
    Node1[引数の関数名でノードを作成]
    Step3[関数内の関数コールリストを作成];
    Step4{関数コールリストの要素をすべて取得した};
    Step5[関数コールリストの要素を1つ取得する];
    Step6[取得した関数名を引数として、本関数を再帰呼び出しする];
    Node2[戻り値のノードをカレントノードの子として加える];
    End(カレントノードを返却)

    Start
    -->Step1
    -->Step2
    -->Node1
    -->Step3
    -->Step4;

    Step4 -- No --> Step5;
    Step4 -- Yes --> End;
    
    Step5
    -->Step6
    -->Node2
    -->Step4
```
【PowerAutomate】ゲストユーザーを作成する方法

## ゲストユーザーを作成する方法はある？
実在はしますが多少複雑です。
難易度は高ですが、手順を踏めば実装できました。

## 作成方法
以下のサイトで説明されています。
https://onlinemgblog.wordpress.com/2021/03/17/invite-external-guest-to-teams-using-graph-api-and-power-automate/

## 実装方法概要
簡単に言うと、HTTPアクションを使ってTeamsにゲストユーザーを招待します。

招待されること
↓
つまり、そのテナントにゲストユーザーとして参加することになる
↓
ゲストアカウントが作られるということ！

システムの穴を通すようなことですが、ライセンス違反ということではありません。



## 引っ掛かりポイント
HTTPでクライアントシークレットIDなるものを使用します。
これはEntra ID*から取得する接続です。
*Entra ID（旧Azure Active Directory）

このあたりが慣れていない人だと少し複雑かなと思いますがURLのサイトは丁寧に説明されているので、ぜひ解読してみましょう
人生初の転職をして変化したこと

# 近況

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/d5fff5ee-dc56-2900-7d44-f07f78dc5b55.png)


つい先月、人生初の転職をしました。
転職をする前と後での環境や心境の変化、転職に対するとらえ方の変化などをここに書いていこうと思います。
まだ転職をしたことない、転職に迷っているIT戦士のもとに届け！！！

:::note warn

**この記事では、前職に対する不満などは一切書かないです。**
:::

# 転職のきっかけ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/08261032-dbe3-d6dd-a322-566e8f58a9a2.png)


前職では、役職が上がったりいろいろな手当を受けることでお給料の上昇はある程度見込めましたが、手っ取りばやくお給料を上げたかった。
これが最も大きな理由です。
普段から節約・投資をして、資産形成を頑張っている(つもり)の僕にとって、
**"将来的にお給料が上がる"** ではなく、**"いま欲しい"** という思いが強かったです。

# 転職活動について

転職活動にはビズリーチを使いました。
基本的にスカウト待ちで、条件が合えば面接といった形でした。
使いやすいです。おすすめです。

面接では、IT業界で転職するのであれば、条件面や得意な技術に関しては正直に話す方がよいなと思いました。ある程度の準備は必要ですが。

# 転職に対する期待

大きく分けて、以下の4点が転職して叶えたいことでした。優先度は上に行くほど高いです。

#### ・お給料UP

#### ・リモート・フレックス勤務が可能

#### ・残業時間DOWN

#### ・業務内容・業界の変化


リモート勤務やフレックスはプライベートを充実させるのに、ほぼ必須かなと思い、かなり優先度が高かったです。

残業時間Downというのは、**「特定の人だけに業務が集中する」** という状況がない企業がいいなと思って書いています。

業務内容の変化はSIer以外の企業も気になるなあという程度でした。


# 心境の変化

お給料を多くもらえるようになり、「お金もらっているし頑張ろう！」といった気持ちを持つようになりました。やはりお金は正義・・・

また、もともと興味のあった医療業界といったこともあり、社会貢献の気持ちをもって働くことができています。自分でも驚いています。

条件面では、"みなし残業"がついていましたが、これもすんなりと受け入れることができました。

25時間分の"みなし残業"がありますが、9月は18時間ほど残業しました。
転職前は、「みなし残業があるところはブラック！！！」くらいに思っていました。
今のところ、ほかのメンバーや他部署を見る限りとてもホワイトで、安心しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/55d6419f-9633-ca40-fd58-a480a76f2f01.png)


# 環境の変化

自分より年下の後輩がいなくなりました。全社的にも最年少になってしまいました。
今のところ新卒をとっていないらしく、業務時間の100%を自分のタスクをこなせるので、快適に仕事を進めることができています。
そのうち、別部署や後輩指導とかをするようになるのかな?

勤務は基本的にリモートで、飲み会や全社の集会があれば出張で東京に行きます。
前職でリモート勤務でのコミュニケーションの取り方や姿勢を学べてよかったです。

全然関係ないですが、社給PCのスペックが高すぎて感動しています。
CPU:Core i7の13世代、Memory:32GB、Disk：SSD 1TB
やばいです。Hyper-Vで仮想マシンを2台起動していてもサクサクです。

# 転職へのとらえ方の変化

IT業界で転職する際、懸念していたのは **「いま触れていて楽しい技術と全然関係ない業務をすることになったらどうしよう・・・」** でした。
不安を払拭するためにも、面接やカジュアル面談、内定後の面談でしっかり確認しておいた方がいいと思います。

僕の場合は、聞いていた通りの業務内容でホッとしています。
AWSメインで様々な構築・立案・改善提案などをしていくので、張り切って頑張ります！
この一か月でも、触ったことのなかったAWSサービスに触れて、楽しい毎日です。
(CFn、CodePipeline、FSx、AppStreamなどなど...)
もともとオンプレも前職でしていたので、スポットでオンプレ対応もするみたいです。

# 転職して思ったこといろいろ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494465/14ce77d3-1565-e959-9d98-7a1d32f108ba.png)


転職して芽生えた意識ですが、あくまで「自分のために働く」という意識が強くなりました。
会社に依存するのではなく、どの会社に行っても活躍できる技術力やコミュニケーション能力を身に着け、自分が望む業務体系や業界を選べるようにすることが肝要だと思います。

つまり、 **若いうちから会社の制度や環境を利用して勉強して、ツヨツヨのIT戦士になることが最優先**ということです。

これは自分自身にも言っていますが、資格を取りまくって経験を積みまくるのが、自分の生活を豊かにする近道です。

頑張ります！！！

# さいごに
人生で数回する?かもしれない転職について書いてみました。
今回の転職は僕にとっていいものでした。(いまのところは・・・)
そして技術力とコミュニケーション能力があればIT業界での転職はそれほど難しくないと思いました。
これからも日々頑張って技術力を高め、たまに記事を書きに来ます！
それではまたどこかで。
クリーンアーキテクチャを読んで理解した内容をアウトプットする１

## なぜやるのか

サービスを開発する上で
どのようなことを意識することが大事かを学び
業務で活かしたいです

## 第I部 イントロダクション

>システム開発について
- 「一度だけ動かす」
    - それほど難しいことではない
    - 綺麗でない
- 「正しくする」← こちらを目指したい
    - 難しい
    - 綺麗になる
    - 人材が僅かで済む
    - 保守が楽になる

>優れたソフトウェア設計の目的
```
求められるシステムを構築・保守するために必要な人材を最小限に抑えること
```

>ウサギとカメ

- 後でコード綺麗にすればいいから早くリリースしよう！ 🐇 ❌
  - 長期的, 短期的に見ても開発が遅くなる
  - 自信過剰な思考を止めることが大事


>ソフトウェアの価値

- 「ソフト」→ 簡単に変更できる → 形状ではなくスコープ
    - 形状にとらわれる... ❌
        - データを取得する際に、MySQLにしか対応できないコードになっているとか？

>重要度と緊急度のマトリックス

「サービスの動作を変えてほしい && コードの設計に不具合はない」
↑こちらの優先度の方が高いと間違うことが多いが
「サービスの動作は変えなくていい && コードの設計に不具合がある」
↑実際にはこっちの方が大事、エンジニアは強く主張する必要がある。(非エンジニアは、コードの設計を評価できないので)

## まとめ

イントロダクションの内容を意識するだけでも
普段の自分の開発に対しての向き合い方を見直せると思いました。
少しずつ、読み進めればと思います。

## 本

https://www.amazon.co.jp/Clean-Architecture-%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E6%A7%8B%E9%80%A0%E3%81%A8%E8%A8%AD%E8%A8%88-Robert-C-Martin/dp/4048930656
【ざっくりまとめ】AWS 中国ゲートウェイについて簡単にまとめてみた

:::note info
AWS公式ホームページなどをもとに調べた情報となります。
また、AWS 中国ゲートウェイを利用するには中国当局への届け出など特殊対応が必要とのことです。

※現時点で企業向けのみにアカウントを提供しているので、個人利用は不可とのことでした。
:::

# まえおき

AWSに関する技術トピックをキャッチアップするために公式サイトを覗いていると、**中国ゲートウェイ**に関するトピックが目に入ったので、自身の備忘のために簡単にまとめました。

**中国ゲートウェイ**について少しでも興味関心のある方に役立てていただければ幸いです。

## 中国ゲートウェイとは？
すごくざっくり言えば、「中国に現地法人がある企業向けのAWSアカウントサービス」とのことです。概要については、AWS公式ホームページに概要動画が掲載されているのでご確認ください。

※動画は中国語のためわかりづらいですが、パワポ資料が投影されているためなんとなくイメージはつくかと思います。

## なんで中国用に分かれているのか

AWSサイト以外でもググってみましたが、「中国独自のIT基準にのっとったため」が回答らしいです。ただ、具体的に「どのような基準が中国に存在するのか？」「各サービスの違いはどうなのか」については、どのサイトも深堀して記載されていないようなので、何とも言えないといった印象ですね。

## 注意ポイントなど

中国用アカウントを作成するために「中国に現地法人があること」が条件となっているようなので、個人アカウントで作成することは不可能なので、公式ドキュメントなどの机上レベルになりますが、「中国国内のアベイラビリティゾーンの運営企業の違い」や「中国以外の他拠点のアベイラビリティゾーンとは物理的に隔離されている」が注意ポイントとして挙げられているようですね。

（静的Webサーバのいつもの（**S3＋CloudFront**）も勝手が違うのかなぁといった印象ですね......）

## さいごに

AWS中国ゲートウェイに関して取り上げているサイトがあまり多くないため、いざリサーチすると情報源が少ないかもしれませんが、本ブログを参考にしていただければ幸いです。

（AWS認定試験で中国ゲートウェイが取り上げられるのかわからないですが......）
私の備忘にもなったので良かったと思っています。

## 参考サイト
[AWS 中国ゲートウェイ](https://aws.amazon.com/jp/china-gateway/?nc2=h_ql_le_int_cng)
[AWS中国リージョンとAWSアジアパシフィック（東京・大阪）リージョンの接続方法 ～中国でAWS利用時のポイントも紹介～](https://www.cloudsolution.tokai-com.co.jp/white-paper/2021/1221-278.html)
[【知っておきたい】中国でAWSを使う時、注意すべき３つのポイント](https://www.tis.jp/special/platform_knowledge/cloud05/)
WSLにおけるCUDAのインストール

# この記事について
WSL環境下で、CUDAをインストールする方法(備忘録)

# 環境
Windows11
WSL2 Ubuntu

# NVIDIAのページに書いてあるコマンドを実行
WSLはCUIなのでインストーラーを使えない。コマンドを使用してインストールする。
```shell:sh
$ wget https://developer.download.nvidia.com/compute/cuda/repos/wsl-ubuntu/x86_64/cuda-wsl-ubuntu.pin
sudo mv cuda-wsl-ubuntu.pin /etc/apt/preferences.d/cuda-repository-pin-600
$ wget https://developer.download.nvidia.com/compute/cuda/12.6.2/local_installers/cuda-repo-wsl-ubuntu-12-6-local_12.6.2-1_amd64.deb
$ sudo dpkg -i cuda-repo-wsl-ubuntu-12-6-local_12.6.2-1_amd64.deb
$ sudo cp /var/cuda-repo-wsl-ubuntu-12-6-local/cuda-*-keyring.gpg /usr/share/keyrings/
$ sudo apt-get update
$ sudo apt-get -y install cuda-toolkit-12-6
```
tarコマンド備忘録

tarコマンドでよく使用するオプションと使用事例を備忘録としてまとめます。

### 操作

| オプション | 別名 | 概要 |
| --------- | -------------------- | ---- | 
| -c | --create | アーカイブを作成する |
| -x | --extract | アーカイブを展開する |
| -t | --list | 一覧表示する |

### 圧縮

| オプション | 別名 | 概要 |
| --------- | -------------------- | ---- | 
| -z | --gzip |	gzip形式 |
| -j | --bzip2 | bzip2形式 |
| -J | --xz	| xz形式 |

### その他

| オプション | 別名 | 概要 |
| --------- | -------------------- | ---- | 
| -f | --file |	アーカイブファイル名を指定する |
| -v | --verbose |	処理したファイルの一覧を表示する |
| -p | 	--preserve-permissions |	パーミッションを維持する |


## 使用事例

### gzipで圧縮
```
tar -cvzfp XXX.tar.gz フォルダ名
```

### 解凍
```
tar -xvzfp XXX.tar.gz
```


### 参考

- https://atmarkit.itmedia.co.jp/ait/articles/1608/15/news015.html
ネットワークの構築の流れ

ネットワーク構築のフェーズ
---
**Ⅰ　要件定義**
>提案依頼書（RFP）をもとに顧客の要件をヒアリングし、要件の明確化・詳細化を行うフェーズ

  - [ ] 要件定義書
---

**Ⅱ　基本設計**
>物理・論理・セキュリティ・負荷分散・可用性・管理におけるルール決めを行うフェーズ
  - [ ] 基本設計書
---
**Ⅲ　詳細設計**
>基本設計の情報をもとに、個別機器の設定値まで落とし込むフェーズ
  - [ ] 詳細設計書
  - [ ] パラメータシート
---
**Ⅳ　構築**
>詳細設計のフェーズをもとに、個別機器に設定を行うフェーズ
  - [ ] 作業手順書
  - [ ] 作業チェックシート
---
**Ⅴ　試験**
>構築した環境の試験を行うフェーズ
  - [ ] 試験計画書
  - [ ] 試験仕様書
  - [ ] 試験結果報告書
  ---
**Ⅵ　運用**
>構築したシステムを運用するフェーズ
  - [ ] 運用手順書
---
参考
https://www.amazon.co.jp/%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9-%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E6%8A%80%E8%A1%93-%E8%A8%AD%E8%A8%88%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E3%81%BF%E3%82%84%E3%81%9F%E3%81%B2%E3%82%8D%E3%81%97/dp/4797396806
RDFとプロパティグラフ：ナレッジグラフ実装の適切なアプローチの選び方

> 注意: この記事は、Neo4jのブログ記事「RDF vs. Property Graphs: Choosing the Right Approach for Implementing a Knowledge Graph」を元に、機械翻訳を利用して作成した備忘録的な内容です。正確性を確保するため、原文と照らし合わせてチェックすることをお勧めします。

https://neo4j.com/blog/rdf-vs-property-graphs-knowledge-graphs/?utm_source=Twitter&utm_medium=OrganicSocial&utm_campaign=---&utm_ID=&utm_term=&utm_content=-Blog--&utm_creative_format=&utm_marketing_tactic=&utm_parent_camp=&utm_partner=&utm_persona=

こんにちは！今回は、ナレッジグラフの実装方法として注目されている「RDF」と「プロパティグラフ」について比較し、それぞれの特徴や適用場面を解説します。

## ナレッジグラフとは？

まず、ナレッジグラフの基本を押さえておきましょう。ナレッジグラフは、連結されたデータを保存、整理、理解するための意味豊かなデータモデルです。主に以下の3要素で構成されます：

1. エンティティ：組織やドメイン領域のデータを表現
2. リレーションシップ：エンティティ間の相互作用や関係を示す
3. 組織化原則：ビジネスに関連する中核概念のメタ情報を捕捉

これらの要素が組み合わさることで、自己記述的なデータモデルが作成され、データの忠実性と再利用性が向上します。

## RDFとは？

RDF（Resource Description Framework）は、Web上でのデータ交換のためのW3C標準です。主な特徴は以下の通りです：

- トリプル（主語-述語-目的語）という基本単位でデータを表現
- URIを使用してリソースを識別
- SPARQL言語を使用してクエリを実行
- オントロジーを活用して推論が可能

## プロパティグラフとは？

プロパティグラフは、ノード、リレーションシップ、プロパティを使用して情報を整理します。主な特徴は以下の通りです：

- ノードにラベルとプロパティを付与可能
- リレーションシップは方向性を持ち、プロパティを付与可能
- Cypherなどの宣言的言語を使用してパターンマッチングが可能
- 多対多関係や同じタイプの複数のリレーションシップを柔軟に表現可能

## RDFとプロパティグラフの比較

| 特徴 | プロパティグラフ | RDF |
|------|:----------------:|:---:|
| ネイティブグラフとして保存 | ◯ | × |
| 効率的で摩擦の少いモデリング | ◯ | × |
| 簡単な開始と段階的な変更 | ◯ | × |
| エンティティ・リレーションシップのプロパティ効率的なクエリ | ◯ | × |
| クエリ言語 | Cypher/GQL | SPARQL |
| 速度/パフォーマンス | ◯ | △ |
| データサイエンスでの分析と強化 | ◯ | × |
| トランザクションデータのネイティブ保存 | ◯ | × |
| セマンティックデータのネイティブ保存 | ◯ | ◯ |
| 既存のオントロジーの活用 | ◯ | ◯ |

## どちらを選ぶべき？

状況に応じて選択が異なりますが、多くの場合、プロパティグラフモデルがその簡潔さと俊敏性から選ばれています。プロパティグラフは以下の利点があります：

1. シンプルで使いやすい
2. ノードとリレーションシップの両方に詳細なデータを格納可能
3. 相互運用性が高い（RDFの消費と生成が可能）
4. ISO GQLによる標準化

一方、RDFは以下のような課題があります：

1. スキル習得に時間とコストがかかる
2. リソースを多く必要とする
3. ビジネスの現実との乖離が生じやすい

## まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/bbdff54d-98f5-c97b-aea5-a620977c0c2d.png)

プロパティグラフは、その柔軟性と拡張性から、多くの場合でナレッジグラフの実装に適しています。ただし、RDFの世界で培われた組織化原則（タクソノミー、オントロジーなど）は、必要に応じてプロパティグラフに取り入れることができます。

状況に応じて適切なアプローチを選択し、効果的なナレッジグラフを構築しましょう
Reactでapiのデータを取得してHTML要素として表示したい

## 概要
よくあるタスクであるReactでapiのデータを取得してHTML要素として表示したいと思ったのでやってみました。

## コード内容
```javascript:基礎的なコード
import { useEffect, useState } from "react";

function FetchSample() {
  const [data, setData] = useState(undefined);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((json) => {
        setData(json);
      })
      .catch(() => alert("error"));
  }, []);

  return (
    <>
      {data === undefined
        ? ""
        : data.map((da) => <div key={da.id}>{`${da.id} ${da.title}`}</div>)}
    </>
  );
}

export default FetchSample;
```
`useEffect` を使ってfetchし、`setData` でdataに取得したものを入れます。
少し工夫したのは、dataが取得できるまでHTML側に何も表示しないようにするところでしょうか。
例えばliをmapでループさせる時、データが取得できるまで空のulタグが出てしまうとか、そういう状況がありそうだなとおもい気持ち悪いので、データが取得できてから必要なものを出力するようにしました。

## おわりに
ほんとに基礎的なコードを記載しましたが、おそらくこの記載方法は、今はほとんどしないのかなと思います。
AIに聞いたらloadingやerror状態をreturn文を分けたりしてたり、[こちらの動画](https://www.youtube.com/watch?v=-yIsQPp31L0)では、`AbortController()`というのを使って連続したデータ取得が起こった時のケアをしたりしていました。
あとは`useSWR`とかも使ってみたいです。

よくある基礎的なものほど、いろいろやり方があり、ベストプラクティスが見つけにくいなと思いました。
ぷよぷよsteam版の画面を取得する

![スクリーンショット 2024-10-09 22.05.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900427/8ce41d48-9b49-f992-e0a7-e85bd2cf3976.png)




steam版のぷよぷよeスポーツは有料です。

https://store.steampowered.com/app/971620/_e/?l=japanese



画像の取り扱いについては以下のサイトを参照してください。

https://puyo.sega.jp/PuyoPuyo_eSports/agreement/index.html

©︎SEGA


## library
keyboard, pyautogui, pygetwindow　の３つをpipインストールする。


```python
import keyboard as kb
import pyautogui as ag
import pygetwindow as gw
from PIL import Image
```

pyGetWindow.getActiveWindowでアクティブウインドウを取得して、pyautogui.screenshotで画面情報を取得します。


```python
while True:
    if kb.is_pressed('q'):  # 'q'キーが押された場合
        window = gw.getActiveWindow()
        x,y=window.topleft
        w,h=window.size
        im1 = ag.screenshot(region=(x,y,w,h))
        break

im1
```




    

![output_4_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900427/5f67d380-4cb0-eef3-4ead-a68359a11c62.png)
    




```python
print(w,h)
```

    978 587


## save


```python
im1.save("test.jpg")
```

## open


```python
im1= Image.open("test.jpg")
im1
```




    

    
![output_9_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900427/a8a541a6-91b0-9fa0-a064-a6fd6ec039dd.png)

***


![puyopuyo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900427/1fdf8221-96c5-fcfa-3a52-383422a6fdc3.gif)
　ぷよぷよプログラミングAI学習システムは、中高生の自己調整学習に向けて開発されました。
　どうやって、Chromebookで、１０分で、素敵な人工知能を作れるのでしょうか？
　秘密は、３つ。
　１　jupyter liteで、webクライアントがpythonコードを実行
　２　超軽量な機械学習フレームワークdezeroを採用
　３　ぷよぷよのstageとactionがコンパクト

### Github&X

https://github.com/Lunanaedu/jupyterlite-puyopuyo

https://github.com/Lunanaedu/puyopuyo-kai

https://x.com/educationai_ai

### ぷよぷよプログラミングAI学習用まとめ

https://qiita.com/educational-ai/items/50c0fa689c01794d145e
実務向け：障害対応時に使えるLinuxコマンド5選と冷静に対応するための心構え

## はじめに
サーバーやシステム管理の現場では、日々の運用管理やトラブルシューティングが重要です。

特に、障害発生時には迅速に対応するために、必要なLinuxのコマンドを把握しておくことが求められます。

この記事では、実務でよく使用されるLinuxのコマンドを5つ紹介し、それぞれの特徴と使い方について説明します。

## 障害対応でよく使うコマンド
障害対応の現場で役立つ、基本的かつ頻繁に使用するコマンドを紹介します。

### 1. grep - テキスト検索

特定の文字列をファイルやコマンドの出力から検索するのに使います。ログファイルの中からエラーを見つけ出すときに便利です。

```bash
grep "error" /var/log/syslog
```

指定したファイル内の「error」という文字列を含む行を検索します。

### 2. ps - プロセスの確認

現在実行中のプロセスを一覧表示したり、特定のプロセスを探したりします。サービスやアプリケーションの動作確認に使います。

```bash
ps aux | grep httpd
```

httpdに関連するプロセスを検索し、実行中のApache HTTPサーバーの情報を取得します。

### 3. top / htop - リアルタイムのプロセス監視

CPUやメモリの使用状況を含む、システム全体のリソース使用状況をリアルタイムで確認できます。負荷が高いプロセスを特定する際に有用です。

```bash
top
```

htopはより視覚的に表示され、使いやすいため、インストールして使うこともあります（sudo apt-get install htopなど）。

### 4. df - ディスク使用量の確認

マウントされたファイルシステムのディスク使用状況を表示します。ディスクの空き容量不足を確認する際に利用します。

```bash
df -h
```

-hオプションで人間に読みやすい形式（GBやMBなど）でディスクの空き容量を確認できます。

### 5. systemctl - サービスの管理

システム上で動作しているサービスの起動・停止・再起動などを管理します。サービスの再起動や状態確認など、運用管理で頻繁に使います。

```bash
systemctl status nginx
systemctl start nginx
systemctl restart nginx
```

nginxサービスの状態を確認、開始、再起動するコマンドです。

## おわりに

これらのコマンドは、障害対応や日常的なサーバー運用で欠かせない基本的なものです。

迅速かつ正確な対応を行うために、これらのコマンドを使いこなすことが求められます。

システムの状況をすばやく把握するために役立つので、私も、定期的に使い方やこれらのコマンドについては復習しています。

## おまけ

障害対応をするときには、技術的な知識だけでなく、冷静に対応することもとても大事です。

**焦ったり、パニックになってしまうと、正しい判断ができなくなり、対応が遅れてしまうこと**があります。

まずは深呼吸をして、今起きている状況をしっかりと整理してみましょう。「**何が問題なのか？**」を確認してから、次に何をすればいいか考えるようにします。

https://qiita.com/gengen0719/items/b8b628dce0522c78f0d6

落ち着いて対応することで、問題を早く解決できることが多いです！

## おすすめ記事

https://qiita.com/yoshi_iwa/items/f086f9fd9ff3ecd692d7

https://qiita.com/kenchan1193/items/f725f2a06553384b1cf5
SQL SELECTコマンドの基礎と応用: データ検索

## はじめに
業務でデータベース（DB）の確認を行う際、特に使用頻度が高いのがSELECT文になります。ここでは、SELECT文の基本的な使い方をメモとしてまとめていきます。


## 書き方(役割)
```
   SELECT name  -- どのカラムのデータを取得するのか？
   FROM purchases;  -- どのテーブルから取得するのか？
   WHERE condition;  -- どの条件に基づいてデータを取得するのか？
```
＊SQLは大文字と小文字を区別しないため、小文字で記述しても問題ありません。


## セクション1: SELECTコマンドの基本

### ・ 基本構文：
```
 SELECT name, email FROM customers;
```
役割：特定のカラムを選択してデータを取得します。
意味：顧客テーブル(customers)から名前(name),メールアドレス(email)を取得

### ・ すべてのカラムを選択：
```
SELECT * FROM products;
```
役割：テーブル内のすべてのカラムを取得します。
意味：商品テーブルからすべてのカラムを取得する

### ・ WHERE句による条件指定:
```
 SELECT * FROM sales WHERE amount >= 1000;
```
役割：特定の条件に一致するデータを取得する
意味：売上テーブル(sales)から金額(amount)が1000以上のデータのすべてのカラムを取得する


#### WHERE句で利用できる代表的な演算子
##### 1.比較演算時
・　= : 等しい
```
SELECT * FROM products WHERE name = "チョコレート"
```
・　<> または != : 等しくない
```
SELECT * FROM products WHERE name <> "チョコレート"
```
・　< : より小さい
```
SELECT * FROM products WHERE price < 100;
```
・　> : より大きい
```
SELECT * FROM products WHERE price > 100;
```
・　<= : 以下
```
SELECT * FROM products WHERE price <= 100;
```
・　>= : 以上
```
SELECT * FROM products WHERE price >= 100;
```
##### 2.論理演算時
・　AND : 両方の条件が真(true)である場合
```
SELECT * FROM products WHERE name = "チョコレート" AND price >=100;
```
・　OR : いずれかの条件が真(true)である場合
```
SELECT * FROM products WHERE name = "チョコレート" OR price >=100;
```
・　NOT : 条件が偽(false)である場合
```
SELECT * FROM products WHERE NOT name = "チョコレート";
```
##### 3.その他の演算子
・　BETWEEN : 範囲内にあるかどうか
```
SELECT * FROM products WHERE price BETWEEN 500 AND 1000;
```
・　IN : リスト内にあるかどうか
```
SELECT * FROM products WHERE name IN('チョコレート', 'ポテトチップス', 'アイス');
```
・　LIKE: パターンに一致するかどうか（ワイルドカードを使用）
```
SELECT * FROM customers WHERE name LIKE 'A%';  -- Aで始まる
SELECT * FROM customers WHERE name LIKE '%son';  -- sonで終わる
SELECT * FROM customers WHERE name LIKE '%an%';  -- anを含む
```

## 最後に
見返した際にスッと入ってくるようにブラッシュアップしていきたいと思います。
エラー発生→解決

備忘録として、こんな事で悩んでたなーと将来見返すときの為に記述します。

エラーコード
ActiveModel::UnknownAttributeError in PrototypesController#create
unknown attribute 'prototype_id' for Prototype.

今までできていた新規投稿が出来なくなった。
createアクションの記述が間違い？

訂正前
def prototype_params
  params.require(:prototype).permit(:title, :catch_copy, :image, :concept).merge(user_id: current_user.id, prototype_id: params[:prototype_id])
end

訂正後
def prototype_params
  params.require(:prototype).permit(:title, :catch_copy, :image, :concept).merge(user_id: current_user.id)
end

そもそもprototypeにidは必要ないので削除したら保存できるようになりました。
（prototypeはデフォルトで設定されているのでわざわざ記述不要）
RustのGlobal変数について #3

# はじめに
Rustにも変数と定数が存在します。
- 変数
    - `関数内`のみ記載することができる。
- 定数
    - `グローバルスコープ`で記載する

# 使い方
```rust
// ここで宣言
const HOGE: &str = "hogehoge island";

pub fn main() {
    println!{"{}", HOGE} // hogehoge island
}
```

# 制約について
- 定数名は大文字で記載
- 定数の値はコンパイル時に決定される必要がある
- 型は明示的に記載する必要がある
- `const`で記載する

以上です。
最後まで読んでいただきありがとうございました。
Nerves Core MP135のLCDをコンソールにする方法

# LCDをコンソールにする

Core MP135には、LCDモニターが搭載されています。
画面の解像度が240x320なので狭いですが、モニターなど接続せずに利用できるので便利な用途もあるかもしれません。
方法を紹介します。

# 切り替え方法

通常通りNervesのプロジェクトを作成し、`mix deps.get`を実行します。

`deps/core_mp135`ディレクトリにある`fwup.conf`と`extlinux.conf`を`config`ディレクトリにコピーします。


```
$ cp deps/core_mp135/fwup.conf config
$ cp deps/core_mp135/extlinux.conf config
```

次の３か所を修正します。

```diff:config/fwup.conf
 }
 
 file-resource extlinux.conf {
-    host-path = "${NERVES_SYSTEM}/images/extlinux.conf"
+    host-path = "${NERVES_APP}/config/extlinux.conf"
 }
 

```

```diff:config/extlinux.conf
 label stm32mp135f-coremp135-buildroot
   kernel zImage
   devicetree stm32mp135f-coremp135.dtb
-  append root=/dev/mmcblk0p5 rootwait console=tty1 console=ttySTM0,115200n8 quiet
+  append root=/dev/mmcblk0p5 rootwait fbcon=map:10 console=tty1 console=ttySTM0,115200n8 quiet

```

```diff_elixir:config/config.exs
 # Customize non-Elixir parts of the firmware. See
 # https://hexdocs.pm/nerves/advanced-configuration.html for details.
 
-config :nerves, :firmware, rootfs_overlay: "rootfs_overlay"
+config :nerves, :firmware, rootfs_overlay: "rootfs_overlay", fwup_conf: "config/fwup.conf"
 
 # Set the SOURCE_DATE_EPOCH date for reproducible builds.
 # See https://reproducible-builds.org/docs/source-date-epoch/ for more information
```

これでファームを作成すると、LCDにiexのコンソールが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/5a755f52-804b-f3cb-82fc-461a6fcb6c82.png)


Core MP135用のNerves

https://github.com/masahiro-999/core_mp135
【ネットワーク基礎 #1】物理層の装置の種類

## 物理層とは

物理層はハードウェアの領域である
主な役割として、ネットワーク通信のための物理的な接続と信号の伝送を担当する

### ・NIC
コンピュータやデバイスをネットワークに接続するためのハードウェアで、物理層のインターフェースを提供する

![20180224003700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908715/e0a8de98-4aa8-19c3-b1f4-4ba1d56e57aa.png)

### ・ケーブル
 データや電力を伝送するための物理的な媒体
 
・ツイストペアケーブル
・同軸ケーブル
・光ファイバーケーブル
・USBケーブル
・HDMIケーブル


### ・リピータ（リピータハブ）
信号を再生して強化し、距離を延ばすために使用される

<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908715/ffb93015-dc7f-7376-3d22-5cf11119276a.png">

### ・メディアコンバータ
異なる通信メディア間でデータを変換するためのデバイス
主に、ツイストペアケーブル（銅線）と光ファイバーケーブルなど、異なる物理層のメディアを接続するために使用される

<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908715/40c0579d-82c1-a9ff-2125-8bee36c28e96.png">


### ・アクセスポイント
厳密にはデータリンク層で動作する装置だが、物理層に直接関連する部分もある
物理層の機能として、以下が挙げられる

###### ・無線信号の送受信
電波を使用してデバイスと通信する

###### ・変調・復調
データを無線で伝える際に、デジタルデータを電波（アナログ信号）に変調し、逆に受信した信号をデジタルデータに復調する

<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908715/bf87c066-1239-cdc4-1614-38dcfe2cfc13.png">
Salesforceの開発者コンソールでリストビュー一覧を表示させよう

本橋孝昭です

今回はSalesforceの開発者コンソールでリストビュー一覧を表示させる方法をご紹介します

今回は仮に取引先のリストビュー一覧を表示させます

つまりこのようなリストビュ一覧を表示させ作成者や作成日も表示させます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/97747eb6-0a84-2b08-a2bf-633df2dc4098.png)


## ステップ1 歯車マークから開発者コンソールをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/6164ce6d-8434-a172-8062-715624de51c4.png)


## ステップ2 下のほうにある「Query Editor」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/4bcfcde8-3f46-949e-df4c-d46a9266bff7.png)

## ステップ3 入力する


今回は取引先のリストビュー一覧なので

SELECT Id,Name,CreatedBy.name,Createddate FROM ListView WHERE sobjecttype='Account'

と入力します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/88d14262-4b58-ef90-40a0-bec19f44bb60.png)

## ステップ4 左下にあるExrcute をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/53c4297f-2701-a4bd-95f9-3e8b09f307ed.png)

こうすれば、このように取引先のリストビュー一覧が表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/96e7ca92-68cc-8964-edba-1f2c54c95daa.png)




今回は例として取引先のリストビュー一覧を表示しましたが最後がAccountではなく他のオブジェクトAPI参照名の場合他のオブジェクトのリストビュー一覧も表示できます

SELECT Id,Name,CreatedBy.name,Createddate FROM ListView WHERE sobjecttype='Opportunity'

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/d05bd384-2346-2775-5f07-37d0c77b460f.png)


このリストビュー一覧機能を使い、誰がいつリストビューを作成したか調査が容易になります

ぜひみなさんも試してください。
css list-style-position list-style-image 編

# リストマーカーの表示位置を変更する方法
list-style-positionプロパティを使うことでリストマーカーをどの位置に表示するかを指定することができます。
指定方法は2つです
- outside リストマーカーをボックスの外側に表示
-  inside リストマーカーをボックスの内側に表示

今回作成したコードと見本画像です。わかりやすいようにliタグに背景色をつけています。一目でリストマーカを含むか判断できると思います

```indexx.html
<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>

        <ol class="decimal">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ul class="circle">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
        <ul class="square">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
 
    </body>

</html>

```

```style.css
.decimal{
    list-style-type: decimal;
}

.square{
    list-style-type: square;
    
}

.circle{
    list-style-type: circle;
}

ul{
    list-style-position: inside;
}

ol{
    list-style-position: outside;
}
li{
    background-color: aquamarine;
}
```


![スクリーンショット (1324).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/a694dc58-11fd-3b5e-5ed7-3c071d97cfb3.png)


# リストマーカーに画像を使う方法 list-style-imageプロパティ

list-style-imageプロパティを使うことでリストマーカーを好きな画像に変更することができます。
今回は表示が見切れてしまうためmargin-leftを使って余白を作りました

```index.html
<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>


        <ul class="circle">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
        <ul class="square">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
 
    </body>

</html>
```


```style.css
ul{
    margin-left: 10px;
    list-style-image: url("style.png");
}

```

自作の画像
![style.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/6dc84ca2-feb3-f877-7d1b-947921389c59.png)

![スクリーンショット (1325).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/dadca132-eb97-5d45-93aa-b2bdd4586673.png)


## リストマーカーをまとめて指定する list-styleプロパティ

list-styleプロパティを使うことでまとめて指定することができます。
リストマーカーに画像とマーカーの表示プロパティの両方を記述した場合画像を優先して表示します。![スクリーンショット (1326).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/5b6094c6-0e23-2b56-1d46-840fdadf92da.png)


```index.html

<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>


        <ul class="circle">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
        <ul class="square">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
 
    </body>

</html>

```

```style.css
ul{
    margin-left: 10px;
    list-style: url("style.png") square inside;
}

li{
    background-color: aqua;
}


```

実際の画像

![uploading...0]()
![uploading...0]()
css 余白の設定の仕方

# 余白の設定の仕方 
余白の設定には外側のmarginと内側のpaddingがあります。また、marginとpaddingの間の枠線のことをborderといい、余白を設定することができます。

## padding margin の使い方
余白の記述の仕方は複数あります
- margin
    - 個別に指定
        - margin-top 上
        - margin-bottom 下
        - margin-right 右
        - margin-left 左
    - プロパティのみで指定
        - margin: 20px; 4辺
        - margin: 20px 30px;上下 左右
        - margin 20px 15px 30px;上 左右 下
        - margin 20px 15px 30px 15px;上 右 左 下
- padding
    - 個別に指定

        - padding-top: 上
        - padding-bottom: 下
        - padding-right: 右
        - padding-left: 左
    - プロパティのみで指定

        - padding: 20px; 4辺すべて
        - padding: 20px 30px; 上下 左右 
        - padding: 20px 15px 30px; 上 左右 下 
        - padding: 20px 15px 30px 15px; 上 右 左 下

いかが今回作成したテストコードです。参考画像も添付しています。

``` index.html
<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>
        <div class="container">
            
            <h1 class="title">余白をこれから指定します</h1>

        </div>
        
    </body>

</html>
```

```style.css
.container{
    background-color: aqua;
    width: 800px;
    height: 500px;
    padding-top: 100px;
    margin: 150px 130px 100px; /* 上側に150px 左右に130px 下側に100px*/
   
}

.title{
    background-color: rgba(0, 217, 255, 0.692);
}



```



![011409E1-0043-4B1E-8598-098FE6EE5C9B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/ffd7c938-48b8-7390-6330-baa018fec6ef.png)

雑な記述ですが内側の余白と実際heightを合わせた600pxが要素の実際の高さになります。
css 幅と高さの指定 width height プロパティ

。# 幅と高さの指定

幅と高さの指定にはそれぞれ 幅widthプロパティ 高さheightプロパティを使用します。
インライン要素と呼ばれるには使うことができません。
aタグspanタグstrongタグimgタグ 

今回は大きさがわかりやすいように背景色を指定します。
数値を指定する方法とautoを指定する方法があります。
autoを使うことで関連するプロパティを基準に大きさを指定します。
リストにautoを設定したため、幅は親要素、高さはリストを基準に指定されました。


```index.html
<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>
        <div class="container">
            <h1 class="title">高さや幅の大きさをこれから指定します</h1>
                <p class="text">これはpタグの本文です</p>
                    <ul class="list">
                        <li>目次1</li>
                        <li>目次2</li>
                        <li>目次3</li>
                    </ul>

        </div>
        


    </body>

</html>
```

```style.css
.container{
    background-color: purple;
    width: 800px;
    height: 500px;

}

.title{
    background-color: blue;
    width: 800px;
    height: 100px;

}

.text{
    background-color: greenyellow;
    width: 1200px;
    height: 50px;

}

.list{
    background-color:#33ccbb ;
    width: auto;
    height:auto;

}


```

これが参考画像です。
containerを親要素としてその中に複数のタグを実装し視覚的にわかりやすくしました![スクリーンショット (1313).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/721857fb-bf66-ae37-995f-5673cadfee4a.png)
背景画像の表示位置を指定する方法 background-positionプロパティ

# background-positionプロパティの使い方
背景画像の表示位置を指定することができます。

## 表示の仕方
表示の仕方はキーワードと数値で指定することができます。何も指定しない場合左上がデフォルトの表示位置になります。

- キーワード
    - 横方向に
        - left
        - right
        - center
    -縦方向に
        - top
        - bottom 
        - center
- 数値
    - px
    - rem
    - %
    - 
## 実際に記述
今回は右下に表示する方法とpxを使って表示するcssを紹介します。

### キーワードで指定 右下に表示

background-position: right bottom; この記述で背景画像を右下に表示できるのですが何故か縦軸方向に center bottomを指定すると上側に移動する不具合が生じていました。
height: 100vh;この記述をbody要素に追加し表示領域を確保することで解決しました。
背景画像は通常、body 要素にコンテンツがある程度含まれているときに使用されますが、私の場合は body 内に要素がほとんどなく、表示領域が足りない状態でした

```style.css
body {
    background-image: url("img/img.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 100vh; /* 表示領域全体の高さを確保 */
    
    /*bodyに要素がないと表示領域が足りない場合がある*/
    
}
```


### 数値で指定 pxの使い方
左上 0,0座標を基準として、右側に200px移動（200px分の余白）下側に350px移動(350px分の余白)といったイメージです

```style.css
body {
    background-image: url("img/img.png");
    background-repeat: no-repeat;
    background-position: 200px 350px;
    height: 100vh; /* 表示領域全体の高さを確保 */
    
    /*bodyに要素がないと表示領域が足りない場合がある*/
    
}

```


### 数値で指定 %使い方

親要素の大きさを基準に2軸の指定をすることができます。
以下の３種類はキーワードで指定した表示と同じです
- left top 0% 0%
- center center 50% 50%
- right bottom 100% 100%

```style.css

body {
    background-image: url("img/img.png");
    background-repeat: no-repeat;
    background-position: 0% 0%;
    height: 100vh; /* 表示領域全体の高さを確保 */
    
    /*bodyに要素がないと表示領域が足りない場合がある*/
    
}
```

### 数値で指定 rem使い方

remはhtmlのフォントサイズを基準に表示位置を指定することができます。ブラウザのデフォルトの大きさは16pxです。今回はcssでフォントサイズを16pxに指定しました。
0rem 0remは左上に表示 1rem は16px移動。 2remは32px移動させることができます


```style.css
html{
    font-size: 16px; /*基準*/
}

body {
    background-image: url("img/img.png");
    background-repeat: no-repeat;
    background-position: 0rem 0rem;
    height: 100vh; /* 表示領域全体の高さを確保 */
    
    /*bodyに要素がないと表示領域が足りない場合がある*/
    
}

```
css 背景画像の設定の仕方

# background-repeatプロパティ
background-image:url();と記述することで背景画像を設定することができるのですが、繰り返し表示を特に指定しないと無限に繰り返しをします。
background-repeatプロパティを使うことで繰り返す方向を指定することができます。
指定方法は４種類です
- repeat
    - 特に指定せずに繰り返す
- repeat-x
    - 横方向に繰り返す
- repeat-y
    - 縦方向に繰り# background-repeatプロパティ
background-image:url();と記述することで背景画像を設定することができるのですが、繰り返し表示を特に指定しないと無限に繰り返しをします。
background-repeatプロパティを使うことで繰り返す方向を指定することができます。
指定方法は４種類です
- repeat
    - 特に指定せずに繰り返す
- repeat-x
    - 横方向に繰り返す
- repeat-y
    - 縦方向に繰り返す
- no-repeat
    - 繰り返しをしない

今回は１つだけテストコードを紹介します。使用した画像はタブレットで簡単に自作したものです。![背景画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/9992e0de-3049-857e-8f4b-9217fa09e810.png)

```index.html

<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>
    <body>

        <p>背景画像を表示します</p>

    </body>

</html>
```

```style.css

body{
    background-image: url("背景画像.png");
    background-repeat: repeat-x;
                           /*4種類の指定方法
                             repeat
                             repeat-x
                             repeat-y
                             no-repeat*/
}
```

# background-sizeプロパティで大きさを指定
大きさを指定する方法は２種類あります
- 数値で指定 px rem %を指定
- cover containでして
    - cover 表示領域を埋めるように表示 背景画像が大きい場合は見切れて表示する。
    - contain 画像の比率を保ち画像全部を表示する
    
今回はcssのみ紹介します

```style.css

body{
    background-image: url("背景画像.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
```

## height: 100vh;について説明
cssで要素の高さをビューポートの高さに基づいて設定するプロパティ。
vhはViewport Heightの略称 100vhはビューポートの高さの100% 常に画面の高さと同じになるという意味である。
20vhで検証した場合表示領域の20%を常に保っていた。
Swarm フレームワーク チュートリアル: 公式サンプルで学ぶAIエージェント開発

Swarmは、OpenAIが開発した実験的なマルチエージェントオーケストレーションフレームワークです。このチュートリアルでは、Swarmの公式サンプルを通じて、AIエージェントの開発と連携の基礎を段階的に学んでいきます。


## Swarm ～リポジトリの日本語化～

https://hamaruki.com/swarm-experimental-sample/

## チュートリアルの構成

Swarmフレームワークを効果的に学ぶために、以下の順序でサンプルに取り組むことをお勧めします。各ステップでは、新しい概念を導入しながら、前のステップで学んだ知識を活用していきます。

### Step 1: Basic 🔥

**[Basic サンプル](https://github.com/Sunwood-ai-labs/swarm-sample-box/tree/main/examples/basic)**

このサンプルは、Swarmの基礎を学ぶための最適な出発点です。
- Swarmの核となる機能を最小限の実装で紹介
- エージェントの作成、簡単な対話、関数呼び出しなどの基本操作を学習
- 各機能を個別に理解することで、Swarmの基本的な動作原理を把握

https://hamaruki.com/swarm-basic-folder/

### Step 2: Weather Agent 🔥🔥

**[Weather Agent サンプル](https://github.com/Sunwood-ai-labs/swarm-sample-box/tree/main/examples/weather_agent)**

基本を理解したら、単一のエージェントでより実践的な機能を実装してみましょう。
- 天気情報の取得という具体的なユースケースを通じて学習
- 単一のエージェントで複数の機能（天気情報取得、メール送信）を扱う方法を理解
- 基本的な関数呼び出しとエージェントの動作をより深く学習

https://hamaruki.com/swarm-weather-agent/

### Step 3: Triage Agent 🔥🔥

**[Triage Agent サンプル](https://github.com/Sunwood-ai-labs/swarm-sample-box/tree/main/examples/triage_agent)**

複数のエージェントを使用する最初のステップです。
- ユーザーリクエストを適切なエージェントに振り分ける仕組みを学習
- 複数のエージェント間の相互作用と連携の基本を理解
- より複雑なシステムの設計方法を学び始める

https://hamaruki.com/openaiswarm-triage-agent/

### Step 4: Personal Shopper 🔥🔥🔥

**[Personal Shopper サンプル](https://github.com/Sunwood-ai-labs/swarm-sample-box/tree/main/examples/personal_shopper)**

実際のアプリケーションに近い、より複雑なユースケースに挑戦します。
- ショッピングアシスタントという具体的なビジネスシナリオを通じて学習
- データベース操作やより高度な関数呼び出しを含む実装を理解
- 実際のアプリケーション開発により近い経験を積む
https://hamaruki.com/ai-personal-shopper/

### Step 5: Airline 🔥🔥🔥🔥

**[Airline サンプル](https://github.com/Sunwood-ai-labs/swarm-sample-box/tree/main/examples/airline)**

複数のエージェントが協調する複雑なシステムに取り組みます。
- 航空会社の顧客サービスという実践的なビジネスシナリオを模倣
- 複数のエージェントが協力して問題を解決する方法を学習
- より大規模で複雑なシステムの設計と実装を経験

https://hamaruki.com/airline-customer-service-automation-swarm/

### Step 6: Support Bot 🔥🔥🔥🔥🔥

**[Support Bot サンプル](https://github.com/Sunwood-ai-labs/swarm-sample-box/tree/main/examples/support_bot)**

外部システムとの連携を含む、より本格的なアプリケーションを構築します。
- Qdrantベクトルデータベースを使用した文書検索機能の実装を学習
- 実際のプロダクション環境により近い構成のシステムを理解
- 外部サービスとの連携方法や、より高度なデータ処理技術を習得

https://hamaruki.com/openai-swarm-support-bot-details/

## 学習の進め方

この順序で学習を進めることで、Swarmフレームワークの基本から応用まで、段階的に理解を深めることができます。各ステップで新しい概念や技術を導入しながら、前のステップで学んだ知識を活用していくことで、効果的に学習を進められます。

## 結論

Swarmフレームワークを使用したAIエージェント開発の基礎から応用までを、6つのステップを通じて学ぶことができます。各サンプルは、実際のビジネスシナリオを模倣しており、理論だけでなく実践的なスキルも身につけることができます。

始める準備はできましたか？それでは、Step 1のBasicサンプルから始めましょう！🚀
【React】React18からアンマウント後のstate警告が消えた話

# async/await内でのAPI呼び出し中にアンマウントが起きるとどうなるか
下記を参照。（認識間違いがあればご意見いただけると幸いです。）

https://github.com/reactwg/react-18/discussions/82

アンマウント後にsetState関数が動くと今までは下記の警告が出ていたとのこと。
存在しないStateは更新できない。
```
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
```

対処法としては、マウントを管理できる変数などを用意し、実行処理の分岐を作ることだった。
ただし、これは警告を抑制するだけで、実際の問題は解決していなかったとのことです。
```react
let isMountedRef = useRef(false)
useEffect(() => {
  isMountedRef.current = true
  return () => {
    isMountedRef.current = false
  }
}, [])

async function handleSubmit() {
  setPending(true)
  await post('/someapi')
  if (!isMountedRef.current) {
    setPending(false)
  }
}
```
引用：https://github.com/reactwg/react-18/discussions/82


現在は、isMountedのような変数は消しても警告は出ないとのこと
```react
async function handleSubmit() {
  setPending(true)
  await post('/someapi') // component might unmount while we're waiting
  setPending(false)
}
```
引用：https://github.com/reactwg/react-18/discussions/82