OmniAICreator/Qiita-1.07M huggingface dataset:
【SwiftUI】NavigationStackによるリスト一覧表示



## まえがき
この記事はSwift独学者による備忘録です。
万が一誤った記載がある場合は、コメントでご指摘いただけると幸いですm(_ _)m

## 確認環境
XCode Version 15.4
MacOS Sonoma 14.4.1

## Swiftでのリスト表示
コーディングの練習中に基本的なリストが作成できたので、備忘録として残します。

Identifiableというプロトコルを用いてリストに一意のID(UUID)を持たせ、Listを表示しています。
destination:でリストを押したときの遷移先Viewを指定しています。

遷移先ViewではVStackを使用して要素を縦並びに表示させています。

## コード例

うちの歴代猫ちゃんたちをリストにしてみました。

```Swift:ファイル名.swift
import SwiftUI

struct Cat: Identifiable {
    var id = UUID()
    var name: String
    var age: Int
    var personality: String
}

struct ContentView: View {
    
    let cats: [Cat] = [
        Cat(name: "たろう", age: 24, personality: "おっとりさん"),
        Cat(name: "こむぎ", age: 13, personality: "かわいいメンヘラ"),
        Cat(name: "ひなり", age: 14, personality: "母性爆発"),
        Cat(name: "ぐり", age: 10, personality: "食いしん坊甘えん坊"),
        Cat(name: "つぶ", age: 13, personality: "健気な美少女"),
        Cat(name: "うに", age: 7, personality: "ツンデレ末っ子")
    ]
    
    var body: some View {
        NavigationStack {
            List(cats) { cat in
                NavigationLink(cat.name, destination: DetailView(cat: cat))
            }
            .navigationTitle("うちの猫たち🐈")
        }
    }
}

struct DetailView: View {
    var cat: Cat

    var body: some View {
        VStack(alignment: .leading) {
            Text("名前: \(cat.name)")
                .font(.title)
                .fontWeight(.bold)
            Text("年齢: \(cat.age)歳")
                .font(.title)
            Text("性格: \(cat.personality)")
                .font(.title)
        }
        .navigationTitle(cat.name)
    }
}
```

| リスト一覧 |
| ---- |
| <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805527/ab4dfbc3-201b-0885-0ba9-214a9e526be2.png"> |

| たろう | こむぎ | ひなり |
| ---- | ---- | ---- |
| <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805527/86272b00-f161-a2c4-9868-f832ae61c336.png"> | <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805527/ec45a692-753e-da59-c406-e185bba4e6fa.png"> | <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805527/178fed9f-0191-50f2-bdb6-c6ed58b117bd.png"> |
| ぐり | つぶ | うに |
| <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805527/5614a24f-6b0d-de85-7608-52a0b124dc18.png"> | <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805527/21c2985a-9462-d645-f79d-1d84bc12d945.png"> | <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805527/d6820820-44b1-3528-b39e-b131691a175a.png"> |

## あとがき
今回はコードの備忘録のみですが、捕捉事項があれば随時更新していきます。
ROS2　QoSファイルとは

# 動機
Ubuntu22.04でROS2 Humbleの勉強中に
「TypeError: Node.create_publisher() missing 1 required positional argument: 'qos_profile'
」と言われ，解決に手間取ったから．

# QoSファイルとは
[QoSプロファイルの実践と課題](https://www.youtalk.jp/2019/12/13/qos-profile.html)
上記で言われている通り，ROS2は通信品質を制御するためのオプション（QoSポリシー）を持っているらしい．
そのためpublishとsubscribeの時はqosプロファイルが必要となる．qosプロファイルはdepth等を指定する．（以下の例なら10）
depthはすぐに通信できなかった時、キューに溜めておける数だそう．多いほど通信が安定する？
```
self.pub = self.create_publisher(String, "chatter",10)
```
```
self.create_subscription(String, "chatter", self.callback,10)
```
# QoSファイルの種類
[ROS2における独自QoSプロファイルの設定方法](https://qiita.com/sarubito/items/d9c6bccf974d0a78bfe5)の「ROS2で用意されているQoSプロファイル一覧」を参考にする．
使い方の例（Laser_scan）
```
from rclpy.qos import qos_profile_sensor_data
．．．

self.subscription = node.create_subscription(
            LaserScan,
            'scan',
            self.subscription_callback,
            qos_profile=qos_profile_sensor_data)
self.subscription  # prevent unused variable warning
```
IPv6アドレスからプレフィックス長とIPv6アドレス部分を分けて２進数にする方法

```java:Main.java
import java.net.InetAddress;
import java.net.UnknownHostException;

public class Main  {
    public static void main(String[] args) throws Exception {
        String ipv6WithCIDR = "2001:1111:2222:abcd::/64"; // 任意のIPv6アドレス

        // プレフィックスを分離
        String[] parts = ipv6WithCIDR.split("/");
        String ipv6Address = parts[0]; // IPv6アドレス部分
        int prefixLength = Integer.parseInt(parts[1]); // プレフィックス長

        try {
            InetAddress inetAddress = InetAddress.getByName(ipv6Address);
            byte[] ipBytes = inetAddress.getAddress();

            StringBuilder binaryString = new StringBuilder();
            for (byte b : ipBytes) {
                // 各バイトを2進数に変換して、ゼロパディングを行う
                String binary = String.format("%8s", Integer.toBinaryString(b & 0xFF)).replace(' ', '0');
                binaryString.append(binary).append(" "); // スペースで区切る
            }

            // プレフィックス部分を2進数で表示
            StringBuilder prefixBinary = new StringBuilder();
            for (int i = 0; i < 8; i++) {
                if (i < prefixLength / 16) {
                    // 完全な16ビットを追加
                    prefixBinary.append(binaryString.substring(i * 9, (i + 1) * 9 - 1)); // 9文字目はスペースを除く
                } else if (i == prefixLength / 16) {
                    // 部分的な16ビットを追加
                    String partialBinary = binaryString.substring(i * 9, (i + 1) * 9 - 1);
                    prefixBinary.append(partialBinary.substring(0, prefixLength % 16));
                }
            }

            System.out.println("IPv6アドレス: " + ipv6WithCIDR);
            System.out.println("全体の2進数表示: " + binaryString.toString().trim());
            System.out.println("プレフィックスの2進数表示: " + prefixBinary.toString().trim());
        } catch (UnknownHostException e) {
            System.out.println("無効なIPv6アドレス: " + ipv6Address);
        }
    }
}

```
クソコードを読む上でのコールスタックの重要性

## はじめに
プログラミングをしていると、どうしても「クソコード」に出会うことがあります。メンテナンス性が低く、可読性が悪いコードを静的に読んで理解しようとすると、多くのエンジニアが頭を抱えます。そんなときに役立つのが「コールスタック」です。これをうまく活用すれば、クソコードのバグや問題箇所を効率的に見つけ出し、解決に導くことができます。

この記事では、コールスタックの基本的な説明と、それがクソコードの理解にどのように役立つかを解説します。

## コールスタックとは
コールスタックは、プログラムが実行される中で関数やメソッドの呼び出し順序を管理するメモリ領域です。各関数が呼び出されるたびに、その関数の情報がスタックに積まれ、関数の処理が完了するとスタックから取り除かれます。

特に深いネストや大規模なコード、難読化されたコードでは、コールスタックを正しく理解することが非常に重要です。コードの流れが追いづらいクソコードでは、コールスタックを確認することで、どの関数がどの順序で実行されているかを把握しやすくなります。

## コールスタックを使ったデバッグの具体例
ここでは、Javaのコードにブレークポイントを設定して、コールスタックを利用したデバッグの例を紹介します。以下のコードには、コンストラクタ、Setter、Getterが含まれています。

```java
public class User {
    private String name;

    public User(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public static void main(String[] args) {
        User user = new User("Alice");
        user.setName("Bob");
        System.out.println(user.getName());
    }
}
```

### ブレークポイントの設定とコールスタックの確認
このコードのデバッグ時に、以下のメソッドにブレークポイントを設置します。

1. **コンストラクタ (`User(String name)`)**
2. **Setter (`setName`)**
3. **Getter (`getName`)**

ブレークポイントが設置された状態でプログラムを実行すると、各メソッドが呼び出されたときにプログラムが停止し、IDE（例えば、IntelliJやEclipse）のデバッガからコールスタックを確認することができます。

### コールスタックの追跡例
例えば、`setName`メソッドでプログラムが停止したとき、コールスタックには以下のような情報が表示されるでしょう。

```
at User.setName(User.java:14)
at User.main(User.java:21)
```

ここから、`main`メソッドが`setName`を呼び出したことがわかります。このようにコールスタックを確認することで、どのメソッドがどの順序で呼び出されているのかが明確になります。クソコードの場合、これを繰り返し追跡することで、バグの原因や実行フローの問題を特定することができます。

## なぜコールスタックが重要なのか
クソコードを読むとき、コード全体を理解するのは非常に困難です。特に、SetterやGetter、コンストラクタなどが複数の場所で使用され、実行フローが複雑な場合、その呼び出し順序を追うのは大変です。ここでコールスタックが重要な役割を果たします。特にトランザクションスクリプトや肥大化したクラス、さらにデータベースのエンティティクラスがそのままレスポンスに使用されている場合など、実行フローが混乱しやすくなります。

- **メソッド呼び出しの順序確認**: 複雑なクソコードでは、メソッドがどの順序で呼び出されているかが分かりづらいですが、コールスタックを確認することで正確な順序を把握できます。
- **原因の特定**: コールスタックから、どのメソッドがエラーの原因か、どのメソッドで状態が期待と異なるようになったかを特定できます。特にSetterで期待と異なる値が設定された箇所を特定することができます。
- **コンストラクタやSetter/Getterの追跡**: 複数のクラスやインスタンスが絡み合う場合、初期化や値のセット、取得がどのタイミングで行われているのかを追跡することが、コールスタックを利用すれば可能です。

## クソコードにおけるコールスタックの応用
クソコードは一般的に以下のような問題を抱えています。

1. **深いネストや再帰**: メソッドが複雑に呼び出される場合、実行の流れが見えにくい。
2. **不適切な命名**: メソッド名や変数名がわかりにくい場合、呼び出し順序を確認するのが難しい。
3. **複雑なロジック**: いくつもの関数やメソッドが呼び出されるため、エラーの原因が隠れがち。

このような状況では、コールスタックを確認することで、どこで問題が発生しているのかを特定しやすくなります。特に、クラスのコンストラクタやSetter/Getterメソッドが絡む場合、各オブジェクトがどのように初期化され、どのタイミングで値が設定・取得されているのかを追跡することが重要です。

## まとめ
コールスタックは、クソコードを理解し、問題を迅速に特定するための強力なツールです。特にSetterやGetter、コンストラクタの呼び出し順序を追うことで、コードの実行フローを把握し、エラーやバグの原因を見つけやすくなります。デバッガを使用してコールスタックを追跡することで、効率的にクソコードを読み解き、改善に取り組むことができるでしょう。

エンジニアとして、コールスタックの力を最大限に活用し、クソコードに対処していきましょう。
DRY原則ってなんだ？？？　ChatGPT先生に聞いてみた

開発業務（？）に携わっているなかで、「DRY原則って結局なんだ？」といった疑問を持ち始めたので、ChatGPT先生を交えながら考えてみようと思います...

# DRY原則って
ググってみたところ、`ソフトウェアの構成や構築手法についての原則の一つで、同じ意味や機能を持つ情報を複数の場所に重複して置くことをなるべく避けるべきとする考え方`らしい...

「車輪の再開発は控えようね」といったニュアンスなんだろうが、いまいちピンとこないので、ChatGPT先生に聞いてみようと思います...

# ChatGPT先生に「DRY原則」を聞いてみた
今はやりのChatGPT先生に「DRY原則に沿った開発方法」について聞いてみたいと思います。

### インプット（プロンプト）
```
私は新人WEB開発エンジニアで、あなたはベテランWeb開発エンジニアです。
先輩エンジニアから「DRY原則に沿った開発を行うように」といった依頼を受けたのですが、
いまいちよくわかっていないです。

新人でもわかるように「DRY原則に沿った開発方法とポイント」を教えてもらいたいです。
```

### アウトプット（回答）
```
DRY原則（Don't Repeat Yourself: 繰り返しを避ける原則）は、コードの中で同じロジックやデータを何度も書くことを避け、重複を減らすという考え方です。これにより、メンテナンス性や拡張性が向上し、エラーが発生しにくくなります。

DRY原則に沿った開発方法とポイント
コードの重複を避ける
同じ処理を複数の場所で繰り返して書くのではなく、共通する部分をまとめて1つの関数やクラスにします。これにより、変更が必要な場合でも、1箇所を修正するだけで済みます。

テンプレートを活用する
Web開発では、HTMLやメールのコンテンツなどで同じパターンが繰り返されることがあります。こういった場合は、テンプレートエンジン（例えば、Jinja2やEJSなど）を使って共通部分を一箇所にまとめます。

関数やモジュール化
大きなプログラムを、小さな再利用可能な部品に分割します。これにより、同じコードを何度も書かずに、必要に応じて再利用できます。

定数や設定ファイルを使う
数値や文字列などのハードコーディングを避け、定数や設定ファイルにまとめることで、変更が必要な場合に一箇所を修正するだけで済むようにします。

DRY原則を守るメリット
メンテナンスが楽：コードの一部を変更するだけで全体に反映されるため、修正が簡単。
バグが減る：同じ処理を1箇所にまとめることで、同じバグが複数箇所に散らばるのを防げる。
再利用性が高まる：一度書いたコードや関数を何度でも使えるため、開発速度が向上する。
このように、DRY原則に従うことで、コードの品質が高まり、後々のメンテナンスや拡張がしやすくなります。
```

作りこんでいないプロンプトでも、「まぁまぁいい感じの回答を出してくれるなぁ～」といった印象を持ちました。

# さいごに
ChatGPTを使えば、「もやっとしている知識をある程度整理するのに役立つのかなぁ」問言った印象を持ちました。禅問答のように、繰り返し、プロンプトを修正しながら、ChatGPTの回答精度を上げていくと、「自身の知識としても落とし込んでいけるのかなぁと思いました。今後も、新たな気づきや学びがあれば、定期的に発信していければなぁと思っています…
Pythonのprint文を使ってためしてみた。(10/30)

今回はPythonの基本中の基、print文について30通りの使い方を紹介します。
初心者の方でも理解しやすいようシンプルに紹介します。
また、金融、IT企業、スタートアップに興味をもつきっかけとして
関連する用語を使用しています。

## この記事から得られること
* print文の使い方になれることができる。
* プログラム開発中の変数等の中身を確認できることが理解できる。
* print文の使い方のアイディアのストックが増える。

## なぜこの記事を書こうと思ったのか。
その理由は、プログラムの開発中に意外にも役立っていたので、
シェアしたいと思ったから。
また、使える種類が増えると、変数、リストの値など、確認しやすいと思ったから。


### 1. 基本の文字列出力
```python:python_1.py
print("Fintech is the future")

```
実行結果：
```
Fintech is the future
```
直接ダブルクォーテーション(`""`)の中に文字列を入れるパターン。
シングルクォーテーション(`''`)でも可能です。


### 2\. 複数の文字列を連結
```python:python_2.py
print("Blockchain" + " " + "technology")
```
文字列 　+ `" "`(半角空白) + 文字列 の形

実行結果：
```
Blockchain technology
```


### 3. カンマで区切って複数の要素を出力
```python:python_3.py
print("Stocks", "Bonds", "Commodities")
```
各要素が空白区切りで表示されます。

実行結果：
```
Stocks Bonds Commodities
```


### 4. フォーマット文字列（f-string）の使用
```python:python_4.py
company = "TechStartup"
print(f"{company} is disrupting the industry")
```
`{company}`の部分が変数`company`に格納されている`TechStartup`に置き換えられて表示されます。
実行結果：
```
TechStartup is disrupting the industry
```


### 5. 改行を含む文字列
```python:python_5.py
print("IPO\nM&A\nVenture Capital")
```
`\n`が改行記号です。

実行結果：
```
IPO
M&A
Venture Capital
```

### 6. エスケープ文字を使用
```python:python_6.py
print("\"Unicorn\" status achieved")
```
プログラムの文法としての動作ではなく、文字列に使われる`"`として動作します。
実行結果：
```
"Unicorn" status achieved
```


### 7. リストの内容を出力
```python:python_7.py
investments = ["Angel", "Seed", "Series A"]
print(investments)
```
リスト内の要素が表示されます。
実行結果：
```
['Angel', 'Seed', 'Series A']
```
ほしい要素を取得したい場合、要素番号を指定します。
 0番目の要素を取得したい場合
```python:python_7_1.py
investments = ["Angel", "Seed", "Series A"]
print(investments[0])
```
0番目の要素の「Angel」が表示されます。

実行結果：
```
Angel
```


### 8. タプルの内容を出力
```python:python_8.py
quarterly_results = ("Revenue growth", "Profit margin", "User acquisition")
print(quarterly_results)
```
実行結果：
```
('Revenue growth', 'Profit margin', 'User acquisition')
```
タプルはそのままだと、要素の変更ができません。
しかし、リスト型に変更が可能です。
```python:python_8_1.py
quarterly_results = ("Revenue growth", "Profit margin", "User acquisition")
a, b, c = quarterly_results
quarterly_results_list = [a, b, c]
print(quarterly_results_list)
```

実行結果：
```
['Revenue growth', 'Profit margin', 'User acquisition']
```


### 9. 区切り文字を指定して出力
```python:result_9.py
print("AI", "ML", "Deep Learning", sep=" | ")
```
3\.で空白区切りで表示されていたのが、`sep=""`の`""`の間に指定された文字列に置き換わります。
実行結果：
```
AI | ML | Deep Learning
```
10\. 末尾の文字を指定して出力
```python:result_10.py
print("Funding round", end=": ")
print("Series B")
```
実行結果：
```
Funding round: Series B
```

続きは次回の記事になります。
ここまで、何か学びがあれば、今すぐ使ってみてください。
M5NanoC6、Grove- I2C ADCで遊ぶ(ADC121C021)



参考




![o_coq422.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/cc7cce2b-1b51-5b45-e4b2-638d71c64325.jpeg)


https://qiita.com/caa45040/items/87439565c1b58fd0a6d3


結果


![o_coq474.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/214e7482-ffa0-bd49-6dc9-b764d197f786.jpeg)


![o_coq475.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/680dbab5-ee26-e4b8-2fc2-be811bdf1a1a.jpeg)




![o_coq437.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/3caa352d-5cd1-f5ef-4012-b6321f08e53d.jpeg)


プログラム
(M5Stamp S3と全く同じ)


```c++

//Grove_ADC_test1_S3_1


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


//I2Cのアドレス
#define Addr 0x50


//初期化
void setup() {

  //I2Cとシリアルポートの初期化
  Wire.begin();
  Serial.begin(9600);
  delay(1);

  //初期化(高速変換)
  //Wire.beginTransmission(Addr);
  //Wire.write(0x02);//CONFIG
  //Wire.write(0x20);
  //Wire.endTransmission();
  //delay(2);

}//setup


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

  //内部アドレスの設定
  Wire.beginTransmission(Addr);
  Wire.write(0x00);
  Wire.endTransmission();
  delay(2);

  //データの読み込み
  Wire.requestFrom(Addr, 2);
  delay(1);
  int h, l;
  if (Wire.available() == 2) {
    h = Wire.read();
    l = Wire.read();
  }//endif

  //値の表示
  int adc1 = ((h & 0x0F) << 8) + l;
  int vo = (adc1 * 6000) >> 12; // (adc1*(3/4096))*2
  Serial.print(adc1);
  Serial.print("count");
  Serial.print('\t');
  Serial.print(vo);
  Serial.print("mV");
  Serial.println();
  delay(50);

}//loop


```
基本情報技術者に向けて　Part.3

# NIC(Network Interface Card)
コンピュータをネットワークに接続するための拡張カードのこと
**Lanボード**とも呼ばれる
NICをはじめとするネットワーク機器には、製造段階で**MACアドレス**という番号が割り振られる
これはIEEEによって管理されている製造メーカ―番号と自社製品に割り振る製造番号との組み合わせでできており、世界中で重複しない一意の番号となる

# OSI基本参照モデルとLAN装置
## リピータ
物理層（１層）の中継機能を提供する装置
ケーブルを流れる電気信号を増幅してLANの総延長距離を延ばす
論理的に一本のケーブルでつながっている範囲を**セグメント**という

## ブリッジ
データリンク層（２層）の中継機能を提供する装置
セグメント間の中継役として流れてきたパケットのMACアドレス情報を確認し必要であれば他方のセグメントへとパケットを流す

## ハブ
LANケーブルの接続口を複数持つ集線装置のこと
ハブは内部的にリピータを複数束ねたものである**リピータハブ**と、ブリッジを複数束ねたものである**スイッチングハブ**の二種類がある

## ルータ
ネットワーク層（３層）の中継機能を提供する装置
異なるネットワーク（LAN）同士の中継役として、流れてきたパケットのIPアドレス情報を確認したのちに、最適な経路へとパケットを転送する

ブリッジはMACアドレスが確認できる範囲でのみ有効だが、ルータなら外のネットワークあてにパケットを中継できる
パケットに書かれた宛先IPアドレスを確認し、自身が持つ**経路表（ルーティングテーブル）**とをつき合わせて、最適な**経路選択（ルーティング）**を行う

## ゲートウェイ
トランスポート層（４層）以上が異なるネットワーク間で、プロトコル変換による中継機能を提供する装置
ネットワーク双方で使っているプロトコルの際をこの装置が返還吸収することでお互いの接続を可能とする

# SDN（Software-Defined Network）
パケット転送処理に必要な設定変更を行う時に、個々の危機に対して個別に制御する
この制御を、ソフトウェア化して分離させることにより受難なネットワーク構成を可能とする技術の総称を**SDN**という

# OpenFlow
従来のネットワーク機器とは異なり、経路制御の機能部分とデータ転送の機能部分を分離させることによって管理者が経路制御を柔軟に設計実装して必要な機能を実現出来る
Singletonの仕組みについて

# 目次
[目的](#目的)
[Singletonの実装](#singletonの実装)
[Singletonの仕組み](#singletonの仕組み)
[まとめ](#まとめ)
[参考](#参考)

# 目的
自分自身の備忘録のためSingletonというデザインパターンについて記録しておく


# Singletonとは
Singletonとは、1つのクラスに対して1つのインスタンスしかされないことを保証するデザインパターンのこと

# Singletonの実装

```Singleton.cs
class Singleton
{
    // static(静的)なインスタンスを自身のクラス内で変数として持つ(static変数なのでインスタンス生成に関係なく作られる)    
    // またprivateを使用して外部からアクセスできないようにする
    private static Singleton Instance = new Singleton();

    // コンストラクタをprivateにし外部からアクセスできないようにする
    private Singleton()
    {
         // コンストラクタ
    }

    // このクラスのインスタンスを取得するためのstaticメソッド(staticメソッドはインスタンスの状態に依存せず利用できるメソッド。インスタンスが生成されてなくても利用可能)
    public static Singleton GetInstance()
    {
        return Instance;
    }
    
}
```

# Singletonの仕組み
- クラス自身でインスタンスをstatic変数で保持
    - static変数にすることでどのクラスのインスタンスに限らず共通の変数になる
        - static変数は最初にアクセスしたタイミングで生成される
    - また、privateにすることで外部からアクセスできないようにする
- コンストラクタをprivateにする
    - privateにすることで外部からインスタンスできないようにする
    - この時点でクラス内にある先ほどの**static変数(Instance)のみがインスタンスを保持できる**
- 外部からインスタンスを取得できるようにするためのstaticメソッド(GetInstance())を設ける

# まとめ
重要なのは3点
- クラス自身でprivate static インスタンスを保持
- コンストラクタをprivateに
- 外部からアクセス、インスタンスを取得できるようにする

# 参考
[Singletonの仕組み](https://camp.trainocate.co.jp/magazine/spring-started-guide-singleton/)
[static変数、staticメソッドとは](https://qiita.com/emily-08/items/567599e2adb24a77064b)
【Bash】コマンドで隠しファイルも含めてファイルの移動やコピーをする方法

## はじめに
ファイルの移動やコピーを目的として `mv` や `cp` を使用する際に `mv -v ./example/* ./sample` のように実行しても隠しファイルは対象になりません。

```terminal
% tree -a .
.
├── example
│   ├── .example.text
│   └── example.text
└── sample
$ mv -v ./example/* ./sample
./example/example.text -> ./sample/example.text
```

## 隠しファイルも含める方法

`shopt` コマンドを使用して以下のように実行することで隠しファイルも含めることができます。

```shell:test.sh
shopt -s dotglob
mv -v ./example/* ./sample
```

```terminal:ターミナル
$ bash test.sh
./example/.example.text -> ./sample/.example.text
./example/example.text -> ./sample/example.text
```

https://ss64.com/bash/shopt.html

また、正規表現を使用して以下のように記述しても隠しファイルを対象にできます。

```terminal:ターミナル
$ mv -v ./example/* ./example/.[^\.]* ./sample
./example/example.text -> ./sample/example.text
./example/.example.text -> ./sample/.example.text
```

なお、`cp` の場合にも上記の方法で隠しファイルを含めることができます。
【React】１回のクリックイベントで２つの関数を実行したいです！

## はじめに

Reactの学習中に、次のような場面に遭遇しました。

<font color="Red">***1回のクリックイベントで2つの関数を実行したい!!!***</font>

やりたいこと自体は難しいわけではないけど、具体的にどう実装すればいいか分からなかったので、この記事でその解決方法を共有します。
## 結論
以下のように記述することで、1回のクリックで2つの関数を実行できます。
```React:
onClick={() => { closePopup(); ChangeTime(); }}
```

この方法で、無事に2つの関数をワンクリックで実行できました。
## 調べる前に試した記述方法

おまけ的な感じで調べる前に自分なりに試してみた記述方法も紹介します。

```React:
onClick={closePopup() , ChangeTime()}
```

うん……。
とても安直なアプローチですね。とりあえず、実行したい関数を2つ並べてみましたが、もちろんエラーになりました。

ただ、このように調べる前に試してみるチャレンジ精神も大切だと思います！
MacBook Air 最低構成でも快適に開発できるtips三選

**アプリ開発って高いスペックを要求される場合がありますよね。**
<br>

iOSアプリの開発を行なっているイッセーです。

現在、最低構成のMacBook Airでアプリ開発をしています。スペックは以下の通りです。

・チップ：**M1**, **8コアCPU**
・メモリ：**8GB**
・ストレージ：**256GB**

正直ハイスペックのMacに買い替えたいのですが、そう簡単にはいきませんよね...

でも、少ないリソースでも効率的に開発できる方法を工夫すれば、十分に快適な環境を作れます。

てことで、如何にして低いスペックのMacでも快適に開発ができるか日々研究している私が、実践しているtipsを三つ紹介します。



## 使わないアプリは終了する
![スクリーンショット 2024-09-22 10.09.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572387/d36bbc70-0df8-2b39-902b-5f367f369c9c.png)

まずは**メモリ対策**です。

8GBのメモリだと、アプリを多く起動しているとどうしてもパフォーマンスに影響が出てしまいます。そのため、使用していないアプリはなるべく終了するようにしています。

### 起動中のアプリを一目で確認する設定

![スクリーンショット 2024-09-22 10.05.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572387/b9095031-9edc-bc25-5ea8-89a4002464a9.png)

なるべく使用していないアプリを終了するために、**Dockに起動中のアプリに印（ドット）を表示**する設定にしています。

この設定により、どのアプリが起動しているかすぐに確認することができます。

設定方法は以下の通りです。

**「設定」→「デスクトップとDock」→「起動済みのアプリケーションにインジケータを表示」をオン**。

にするだけです。


![スクリーンショット 2023-12-12 1.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572387/b43a1873-a0d8-cfcd-0e89-250cdff22235.png)


このように、不要なアプリをすぐに見つけて終了することで、限られたメモリでも快適に作業できます。



## ブラウザのタブを開きすぎない
次も**メモリ対策**についてです。

その対策として、ブラウザのタブ管理が挙げられます。たくさんのタブを開いていると、メモリを圧迫してMacの動作が遅くなることがあります。さらにはクラッシュしてしまうことも。

そこで、タブ管理を工夫するための2つの方法をご紹介します。

### Chrome拡張機能「XTab」を使う
https://chromewebstore.google.com/detail/xtab/amddgdnlkmohapieeekfknakgdnpbleb

Chromeを使っている方には、「**XTab**」という拡張機能をおすすめします。

![スクリーンショット 2024-09-22 10.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572387/71a9a3e6-234e-d76c-a11e-7f6e96f010f0.png)

この拡張機能を使うと、**ブラウザ内のタブ数をあらかじめ指定した上限までに制限**できます。

設定した上限を超えると、新しいタブを開けないようにしてくれるため、無駄にタブを開きすぎてメモリを浪費することがなくなります。


### Arcブラウザを使う

最近話題の「**Arc**」というブラウザもおすすめです。
Arcブラウザを使うとタブ管理には全く気を使わなくなります。


以前はChromeをメインブラウザで使用していましたが、現在はArcをメインブラウザにしています。

https://arc.net/

なぜなら、Arcには**一定時間が経過すると自動でタブを閉じる機能**が標準で搭載されています。


![スクリーンショット 2024-09-28 11.51.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572387/4c45270c-c4de-62a3-73ec-4c64d91a3f70.png)

私は12時間後に自動でタブが消えるように設定しています。この設定だと、前日に開いていたタブが次の日には自動で整理されるので、スッキリした状態で作業を始められます。

Arcについて詳しく知りたい方は、こちらの記事が参考になります。

https://qiita.com/ruitomo/items/cc444c6e4393568ee5b2


## ストレージ内のデバイスサポートファイルを削除する
![スクリーンショット 2024-09-22 10.02.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572387/e9a67bfa-2f03-db3b-20c7-b9583d81d92b.png)

最後は**ストレージ管理**です。

一般的に、不要なファイルやアプリを削除するのはよく知られた方法ですが、私が特に効果を感じているのは、**iOSデバイスサポートファイルの削除**です。

これらのファイルは、Xcodeでシミュレーターを使った際に生成され、iOSがアップデートされるたびに新しいファイルが追加されます。しかし、古いバージョンのファイルは使わなくなるので、削除することでストレージを節約できます。

削除方法は以下の通りです。

**「システム設定」→「一般」→「ストレージ」→「デベロッパ」から不要なバージョンのファイル**を削除。

これでストレージの空き容量を増やすことができ、Macのパフォーマンス向上にもつながります。

## 最後に
ここまで、低いスペックのMacでも快適に開発できるtipsを紹介してきました。

共通して言えることは、**塵も積もれば山になる**です。

小さな工夫を積み重ねることで、リソースが限られた環境でも十分に快適に作業できるようになります。

ぜひ、実践してみてください！
パスワードハッシュ化で安全に！　Bcryptで暗号化しよう

## Bcryptって何者？

Bcryptは、1999年に開発されたパスワードハッシュ関数です。つまり、パスワードを安全に保存するためのツールです。
Bcryptは、「暗号学的ソルト」と「コストファクター」という2つの秘密兵器を持っています。

### 1. 暗号学的ソルト
ソルトって聞くと、お料理の塩を思い浮かべるかもしれません。でも、ここでいうソルトは、パスワードに加える「スパイス」のようなものです。同じパスワードでも、ソルトを加えることで全く違うハッシュ値になります。

```ts
import * as bcrypt from 'bcrypt';

const password = 'myPassword123';
const salt1 = bcrypt.genSaltSync(10);
const salt2 = bcrypt.genSaltSync(10);

const hash1 = bcrypt.hashSync(password, salt1);
const hash2 = bcrypt.hashSync(password, salt2);

console.log(hash1); // $2b$10$X8eP1IeIdF0FfYd5.YW6H.wzT1tZKV0rTedXvNIaSgHJ3ImB2Zmou
console.log(hash2); // $2b$10$7kMjfuK9Ij.UmQOsjxhG6OI7kcSYDlVoqeLx2Y5Eo9tNvSO2Pnr2W
```

この例では、同じパスワードに対して異なるソルトを使用することで異なるハッシュ値が生成されています！

### 2. コストファクター
コストファクターは、簡単に言うとハッシュ化の難易度を調整する機能です。　ハッシュ化の計算回数を決定し、値が高いほど、ハッシュ化に時間がかかります。

```ts
import * as bcrypt from 'bcrypt';

const password = 'myPassword123';

console.time('Cost factor 10');
bcrypt.hashSync(password, 10);
console.timeEnd('Cost factor 10');

console.time('Cost factor 12');
bcrypt.hashSync(password, 12);
console.timeEnd('Cost factor 12');

// 出力例：
// Cost factor 10: 65.723ms
// Cost factor 12: 254.556ms
```
この例では、コストファクターを10から12に上げることで、ハッシュ化にかかる時間が約4倍になっています。

## Bcryptの特徴

1. **遅い！でも、それがいい！**
   - Bcryptは意図的に計算に時間がかかるように設計されています。一般ユーザーにはほとんど影響がありませんが、総当たり攻撃を試みる攻撃者にとっては大きな障害になります。

2. **未来への適応力**
   - コストファクターのおかげで、将来のハードウェアの進化にも対応できます。

3. **ソルトの自動生成**
   - 開発者が忘れてしまっても、Bcryptが自動でソルトを生成します。親切設計ですね！

## Bcryptの使い方

様々なプログラミング言語でBcryptを使用できます。ここでは、TypeScriptでの例を見てみましょう。

```ts
import * as bcrypt from "bcryptjs";

// パスワードのハッシュ化
export const hashPassword = async (password: string): Promise<string> => {
  const saltRounds = 10; // ソルトのラウンド数を指定
  return bcrypt.hash(password, saltRounds);
};

// パスワードの検証
export const comparePassword = async (
  password: string,
  hash: string
): Promise<boolean> => {
  return bcrypt.compare(password, hash);
};

// 使用例
const password = 'mySecurePassword123';
const hashedPassword = hashPassword(password);

console.log('Hashed password:', hashedPassword);
console.log('Verification (correct password):', comparePassword(password, hashedPassword));
console.log('Verification (incorrect password):', comparePassword('wrongPassword', hashedPassword));

// 出力例：
// Hashed password: $2b$10$X8eP1IeIdF0FfYd5.YW6H.wfT1tZKV0rTedXvNIcYgHJ3ImB2Zmou
// Verification (correct password): true
// Verification (incorrect password): false

```

## まとめ

Bcryptは、パスワードのセキュリティを強化する強力なツールです。ソルトとコストファクターという2つの秘密兵器で、攻撃者を悩ませます。でも使い方は簡単！あなたのアプリケーションにBcryptを導入して、ユーザーのパスワードを守りましょう。

（注意：Bcryptを使っても、「password123」のような弱いパスワードは相変わらず危険です。ユーザーには強力なパスワードの使用を促しましょう！）
ExcelファイルをWebAPIにPOSTする

# はじめに
Excelに入力した内容をリアルタイムでWebアプリに反映させたかったので、Excelファイルにマクロを仕込んでサーバにPOST⇒DBを更新してみました。
サーバ側はC#で実装しました。
また、サーバ側のExcel操作はOpenXmlを使用しました。

# サンプルコード

Excel側で「Excel_Post()」を実行すれば、自身が「http\://hoge.com/sample/excel_post/」にPOSTされる。

#### Excel側
```vb:vba
Sub Excel_Post()
    
    Dim fileName As String
    Dim retCd As Integer
    Dim fso As Object
    Dim objHTTP As Object
    Dim objStream As Object

On Error GoTo ErrorHandler
    
    '-----自身をPOST出来ない為、別名で保存する-----
    Set fso = CreateObject("Scripting.FileSystemObject")

    'Tempファイル名を生成
    fileName = fso.GetSpecialFolder(2) & "\" & fso.GetBaseName(fso.GetTempName) & ".xlsx"

    '保存時のダイアログを表示しなくする
    Application.ScreenUpdating = False
    Application.DisplayAlerts = False

    '新規ブックにシートをコピーして保存⇒閉じる
    ThisWorkbook.Worksheets().Copy
    ActiveWorkbook.SaveAs fileName
    ActiveWorkbook.Close

    'ダイアログ非表示の設定を戻す
    Application.DisplayAlerts = True
    Application.ScreenUpdating = True
    '-----

    '-----Streamに変換する-----
    Set objStream = CreateObject("ADODB.Stream")
    objStream.Type = 1
    objStream.Open
    objStream.LoadFromFile fileName
    '-----

    '-----WebAPIにPOSTする-----
    Set objHTTP = CreateObject("msxml2.xmlhttp")
    objHTTP.Open "POST", "http://hoge.com/sample/excel_post/", False
    objHTTP.setRequestHeader "Content-Length", objStream.Size
    objHTTP.send objStream.Read(objStream.Size)
    '-----

    '送信したらStreamを閉じる＆Tempファイルを削除する
    objStream.Close
    fso.DeleteFile fileName, True
    
    'readyStateが4で読み込み完了⇒先の処理に進む
    Do While objHTTP.readyState < 4
        DoEvents
    Loop
    
    retCd = objHTTP.Status

    If retCd = 200 Then
        '戻り値を使った処理
        'objHTTP.responseTextでレスポンスが取得できる
    Else
        Call MsgBox("error:" & retCd)
    End If

    GoTo Finally
    
ErrorHandler:
    Call MsgBox("error:" & Err.Description)
    Resume Finally
    
Finally:
    Set objHTTP = Nothing
    Set objStream = Nothing
    Set fso = Nothing
    
End Sub
```
#### サーバー側
```c#:C#
using OfficeOpenXml;

byte[] ret;
using (ExcelPackage package = new ExcelPackage(Request.InputStream))
{
    ret = package.GetAsByteArray();
}
```

## 補足
自身を読み込もうとすると「objStream.LoadFromFile fileName」で「3002:ファイルを開けませんでした。」になる。
その対策として、Tempファイルを作成している。
#### 一時ファイルの保存先
fso.GetSpecialFolder(0)　⇒　C:\Windows
fso.GetSpecialFolder(1)　⇒　C:\Windows\System32
fso.GetSpecialFolder(2)　⇒　C:\Users\xxxx\AppData\Local\Temp
となる。

#### ランダムなファイル名を取得
fso.GetTempName　⇒　ランダムなファイル名（例「rad7704F.tmp」）

#### ファイル拡張子を除去
fso.GetBaseName([ファイル名])　⇒ ファイル名（拡張子あり）を引数に、ファイル名（拡張子なし）を返却
Node.jsって何？どうやって使うの？

# Node.jsについて調べてみた
今回、アプリケーション開発にあたりNode.jsを使用することになったので
Node.jsについて調べてみました。

## Node.jsとは

Node.jsとはJavascriptの実行環境です。
Webアプリケーションのバックエンドを制御するため、
HTTPリクエストを処理することが主な仕事のひとつです。

## 使い方について
**1.Node.jsをインストール**

まず、以下のリンクからNode.jsをインストールします。

https://nodejs.org/en

**2.プロジェクトの初期化**

今回はappディレクトリを作成し、移動します。
```
$mkdir app
$cd app
```

その後、以下のコマンドを実行します。
```
$ npm init
```
このコマンド実行後、package.jsonというファイルが作成されます。

**3.アプリケーションファイルの作成**

javascriptを使用し、app.jsという名前のアプリケーションファイルを用意します。

**4.アプリケーション実行**

以下のコマンドを実行します。
```
$node app.js
```

すると、app.jsが実行されます。

以上がNode.jsをインストールし、実行するまでの流れです。

## package.jsonって何?

Node.jsを使用するための設定ファイルみたいなもので、
パッケージ管理などの機能を果たしています。
どんな環境においてもpackage.jsonを 読み込むことで 
同じパッケージをインストールできます。

jsファイルの中でrequire関数を使用すると、package.jsonを簡単に読み込めます。

```
// app.jsに下記を記述
const packageJson = require('./package.json');
console.log(packageJson.name); // プロジェクト名を表示
console.log(packageJson.version); // バージョンを表示
```

## 感想
Node.js、簡単でめっちゃ便利！！
新卒6ヶ月のエンジニアがbashについて学んだ件

# 自己紹介
久しぶりの記事投稿となってしまいました。研修が終了し、配属された現場に毎日出社しながらJava Silverの勉強をしていたらQiitaの投稿が疎かになってしまいました。今後は現場で学んだ内容をQiitaに投稿していきます。
前置きは終わりにして自己紹介します。文系未経験からIT業界に飛び込みました！現在はある金融系の案件に毎日出社しながら揉まれています！

# bashとは
案件でbashという単語が出てきて調べたのでまとめます！
ちなみに初めて聞いた時自分は「bashって何？shellとどう違うの？」と思いました。

結論から言うとbashはshellの一部です！shellというコマンドの中にbashが含まれているイメージです。自分はそう理解しました。
bashは「Bourne Again Shell」を略したコマンド言語です。LinuxやUnix系のOSで普及しています。実際に書いてみると
まずファイルを作成します。
```
$ vi sample.sh
```
中身を作成します。
```
#!/bin/bash

echo"Hello,World"

exit 0
```
```
$ bash sample.sh
```
上記のコマンドで作成したファイルを出力すると
```
Hello,World
```
このように出力されます。
拡張子は「.sh」であり、シェルスクリプトの1つなんだなと理解する事ができました。
ちなみにシェルスクリプトの実行方法は他にも以下のものがあります。
```
$ sh sample.sh
```
```
$ ./sample.sh
```

# まとめ
やっぱり調べて記事にするというのは深い理解につながります。
これからも学んだことを記事に投稿していきます！
【SQL】DDLを確認するコマンド

## 概要
・既にあるテーブルを作成した際のコマンドを確認したいとき
・DDLの外部キー制約などみたいとき

## コマンド
```sql
SHOW CREATE TABLE テーブル名;
```

## 結果
```sql
CREATE TABLE テーブル名 (
  id int(10) unsigned NOT NULL AUTO_INCREMENT,
  hoge_id int(10) unsigned NOT NULL,
  hoge text,
  created datetime DEFAULT NULL,
  updated timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (id),
  UNIQUE (hoge_id, hoge)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='ここにはコメントが表示されます。';

```
リンクボタンを押したとき、別窓が開く仕様の場合、RSpecはどちらの窓を判定するのか？

## 初めに

疑問に思ったことや上手くいかなかったことのアウトプットをしています。
自分なりの理解でアウトプットしていきます。初学者なので誤りもあると思います。
その際はご指摘いただけると幸いです。

## 疑問

例えば以下のようなビューのコードがあったとします。

```
<p>
  <%= link_to 'Example', example_tasks_path(@exmample), target:'_blank', rel: 'noopener' %>
</p>

```

これはリンクボタンを押したとき、別窓が開くコードです。
このビューにまずvisitしてからclick_linkで'Example'を押した場合、
RSpecが判定するのはどちらの窓になるのでしょうか。

## 調べた結果
デフォルトではリンクを押したビューを操作します。リンクで開いた窓を判定しようとしたらエラーがでます。

## リンク先を操作するには
Capybaraにはウインドウを操作するメソッドがあるので、windowメソッドを使って切り替えます。

例えばこうです
```
within_window(windows.last) do
```
つくりながら学ぶ! PyTorchによる発展ディープラーニング 3 


https://zenn.dev/andoando/scraps/b762277a86d03e


https://pytorch.org/tutorials/recipes/recipes/amp_recipe.html

これで10倍くらい速くなる。

amp使用

```
Epoch 1/30
-------------
（train）
  0%|                              | 0/183 [00:00<?, ?it/s]
  1%|▌                             | 1/183 [00:11<35:40, 11.76s/it]
  1%|█▏                           | 2/183 [00:28<43:49, 14.53s/it]
  2%|█▊                           | 3/183 [00:40<40:10, 13.39s/it]
  2%|██▍                          | 4/183 [00:57<44:30, 14.92s/it]
  3%|███                           | 5/183 [01:09<41:12, 13.89s/it]
```

amp不使用

```
Epoch 1/30
-------------
（train）
  0%|                              | 0/183 [00:00<?, ?it/s]
  1%|▌                             | 1/183 [26:14<79:35:55, 1574.48s/it]
  1%|█▏                           | 2/183 [27:10<34:15:08, 681.26s/it]
  2%|█▊                           | 3/183 [28:02<19:41:12, 393.74s/it]
  2%|██▎                          | 4/183 [28:54<12:52:23, 258.90s/it]
  3%|██▉                          | 5/183 [29:46<9:07:06, 184.42s/it]
  3%|███▌                          | 6/183 [30:38<6:51:09, 139.38s/it]
```

評価方法をしっかり学ぶ必要があるが、結果を見れば、まあまあうまく学習できていそう。

amp使用
![anno_class_img_withAmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891204/404688c9-a69d-b4b8-1082-47b5254f7115.png)

![output_withAmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891204/e8d3ffd7-58e1-de25-35fa-78bd388b773a.png)

amp不使用

![anno_class_img_withoutAmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891204/279117a9-d72f-8314-2044-a0640ac4eda1.png)

![output_withoutAmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3891204/5f41e978-99ce-d599-182c-bf01cdc97a6e.png)
つくりながら学ぶ! PyTorchによる発展ディープラーニング 2

# エラー

home/pytorch_advanced/2_objectdetection/2-2-3_Dataset_DataLoader.ipynb

```
ImportError: libGL.so.1: cannot open shared object file: No such file or directory
```
パッケージ不足のエラー。

https://stackoverflow.com/questions/55313610/importerror-libgl-so-1-cannot-open-shared-object-file-no-such-file-or-directo


```
numpy.random.mtrand.RandomState.choice()

ValueError: setting an array element with a sequence.
```

下記の対処法でうまくいった。

https://github.com/googlecolab/colabtools/issues/3497
つくりながら学ぶ! PyTorchによる発展ディープラーニング　2-8


2-8_SSD_inference.ipynb

推論時に、runtimeErrorが発生する。pytorchのバージョンを下げれば動くらしいが、修正を試みる。

https://github.com/YutaroOgawa/pytorch_advanced/issues/74\

下記の対策で。警告がたくさんでるが、とりあえず動く状態にはなる。

https://zenn.dev/nnabeyang/scraps/5800e9387debc2

pytorchのバージョンは2.4.1+cu124。

```
/home/pytorch_advanced/2_objectdetection/utils/ssd_model.py:590: UserWarning: An output with one or more elements was resized since it had shape [19], which does not match the required output shape [15]. This behavior is deprecated, and in a future PyTorch release outputs will not be resized unless they have zero elements. You can explicitly reuse an out tensor t by resizing it, inplace, to zero elements with t.resize_(0). (Triggered internally at ../aten/src/ATen/native/Resize.cpp:28.)
  torch.index_select(x1, 0, idx, out=tmp_x1)
  ```
つくりながら学ぶ! PyTorchによる発展ディープラーニング　環境構築

# 概要

リンクの書籍でディープラーニングを学習するために、まずは環境構築から行った。書籍では、AWSを使用しているが、x2.largeを使用するための申請が通らなかったのと、無料で使えるt2.microはGPUがなく使用できなかった。自宅PCにGPUが搭載されているので、勉強がてら環境構築から実施した。

https://www.amazon.co.jp/%E3%81%A4%E3%81%8F%E3%82%8A%E3%81%AA%E3%81%8C%E3%82%89%E5%AD%A6%E3%81%B6-PyTorch%E3%81%AB%E3%82%88%E3%82%8B%E7%99%BA%E5%B1%95%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0-%E5%B0%8F%E5%B7%9D%E9%9B%84%E5%A4%AA%E9%83%8E/dp/4839970254

# PC環境
OS:WIndows11
GPU:NVIDIA GeForce GTX 1650→CUDA verson：12.5

# 概要
環境はdockerを使用して構成した。書籍の形式になるべく合わせるためにJupyter labを使用したい。dockerについては勉強したい下記が分かりやすそう。

https://www.amazon.co.jp/dp/4839972745/ref=emc_bcc_2_i

書籍ではjupyter notebookだが、jupyter labが後継らしいのでそちらを使う。

## dockerインストール

公式を見る。

https://docs.docker.jp/docker-for-windows/install.html

私の環境では、再起動後にdockerを起動しようとしたところ、何も起きない状態に陥ってしまった。下記の記事を参考に、強制アンインストールして、再インストールしたところ、復活した。

https://qiita.com/comefigo/items/957a5d555e9305add353

## docker環境構築

色々方法があるが、nvidia/cudaのイメージを使って、必要なパッケージを追加していく方針が楽そうだったのでそうした。結局、docker desktopがインストールされるが、オプションを指定しにくそうなので、wslのubuntuからコマンドラインで実現する。


nvidia-conainer-kitのインストールと動作確認まで下記を参考にした。

https://zenn.dev/takeguchi/articles/361e12a5321095

ここから必要なパッケージののインストールを進める。

```sh:docker.sh
docker run -it nvidia/cuda:12.5.0-runtime-ubuntu20.04
```

コンソールが立ち上がる。pytorchのインストールは下記を参考にする。

https://pytorch.org/get-started/locally/

jupyterlab、wget、git、python3-pip、sudo、wget、git、vimをapt-getでインストールする。

念のため、ここまでの変更を保存しておきたいので、docker commitしてイメージを作成する。今後doker hubにイメージをpushする予定のある方は、イメージの名称に注意する。user_name/image_name:tagでないと、pushできない。

https://docs.docker.jp/engine/reference/commandline/commit.html

https://qiita.com/shundayo/items/4ae35930fe9f85f535b0

これで、先ほど追加したパッケージがインストールされたdockerイメージができる。

## jupyterlabの起動

jupyterlabを起動するには、dockerを起動するときにポートを指定しないといけない。

```sh:docker_run_port.sh
 docker run --rm -it --gpus all -p 8888:8888 -v /your_local_folder:/your_docker_folder user_name/image_name:tag
 ```

 ちなみに、-v /your_local_folder:/your_docker_folderの部分でローカルフォルダーをdockerからアクセスできるようになるので、便利だ。ubuntu上でパスを確認して絶対パスを指定する。例えば、/mnt/cにcドライブがマウントされている。

dockerが起動したら、下記を実行する。

```sh:jupyterlab.sh
jupyter-lab --no-browser --port=8888 --ip=0.0.0.0 --allow-root --NotebookApp.token=
```

このあと、
http://127.0.0.1:8888/lab
にブラウザからアクセスすると、jupyterlabが開く。下記も参考。

https://www.docker.com/ja-jp/blog/supercharging-ai-ml-development-with-jupyterlab-and-docker/

これにて環境構築が完了したので、進めていく。
つくりながら学ぶ! PyTorchによる発展ディープラーニング　1-1

## 1-1

動かないコードがあり修正が必要なので、筆者のリポジトリからフォークして修正しながら進めていく。

フォーク元

https://github.com/YutaroOgawa/pytorch_advanced.git

フォーク先

https://github.com/myano000/pytorch_advanced.git


動かない部分は、下記の記事を参考にして修正した。

https://qiita.com/reirev2913/items/2c70850d2a671e44d9a6

それ以外は問題なく動いた。
何もしてないのにrustcとcargoのPATHが通っていた話

## これは何?

rustの環境構築していたら.zshrcや.bashrcの設定なしに`$HOME/.cargo/bin/cargo`や`$HOME/.cargo/bin/rustc`のPATHが通っていて気持ち悪かったので調査しました。

---

## 結論

`rustup`使用時に`~/.profile`に以下の設定が入ることがわかりました。

1. rustup install時に1を選択する

    ```shell
    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
    1) Proceed with standard installation (default - just press enter)
    2) Customize installation
    3) Cancel installation
    ```
2. `~/.profile`に以下が自動的に記載される。
    
    ```shell
    . "$HOME/.cargo/env"
    ```
3. `~/.profile`はシェルにログイン時に読み込まれる
4.  `~/.cargo/env`がPATHを通している。

    ```shell
    #!/bin/sh
    # rustup shell setup
    # affix colons on either side of $PATH to simplify matching
    case ":${PATH}:" in
        *:"$HOME/.cargo/bin":*)
            ;;
        *)
            # Prepending path in case a system-installed rustc needs to be overridden
            export PATH="$HOME/.cargo/bin:$PATH"
            ;;
    esac
    ```
Binance Smart Chain の未来展望と課題

![binance smart chain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2944615/90b2dfae-9756-e640-1054-57f9d97a9d75.png)


# Binance Smart Chain の未来展望と課題
----------------------
### 01 はじめに
----------------------
2020年にローンチされて以来、**Binance Smart Chain (BSC)** は、特に分散型金融（DeFi）と非代替性トークン（NFT）の分野で、世界をリードするブロックチェーンプラットフォームの一つとして急速に成長しました。低コスト、高いスループット、Ethereum Virtual Machine（EVM）との互換性を特徴とするBSCは、多くの開発者とユーザーを引き付けています。しかし、ブロックチェーン業界の急速な進化に伴い、BSCも一連の課題に直面しています。本稿では、BSCの将来の発展方向、潜在的な技術的ブレークスルー、およびブロックチェーン業界における課題について検討します。
### 02 ブロックチェーン業界におけるBSCの地位
----------------------
Binance Smart Chain は、高パフォーマンスと低料金を主要な強みとするブロックチェーンプラットフォームとして、分散型アプリケーション（DApps）やDeFiエコシステムで重要な地位を占めています。Ethereumと比較して、BSCは**Proof of Staked Authority (PoSA)** コンセンサスメカニズムを通じて、Ethereumよりも低い取引コストと高速な取引速度を実現しています。また、BSCが提供するEVM互換性により、開発者はEthereum上のDAppをBSCに容易に移行でき、そのエコシステムが迅速に拡大しています。
2024年時点で、BSC上には**PancakeSwap**、**Venus**、**BakerySwap** など、いくつかの主要なDeFiおよびNFTプロジェクトが構築されています。これらのプロジェクトは、BSCのエコシステムの成長を促進するだけでなく、ユーザーに対して分散型取引、借入・貸付、流動性マイニング、NFTの作成など多様なサービスを提供しています。
### 03 BSC エコシステムのイノベーションと拡張
----------------------
Binance Smart Chain が短期間で達成した成功は、技術的な強みだけでなく、エコシステムの拡張能力にも依存しています。今後、BSC のエコシステムの拡張は以下の分野に重点を置くと予想されます：
1. **分散型金融（DeFi）エコシステムのさらなる拡大**
   
   DeFi エコシステムは BSC の中核をなす要素です。将来的には、より多くのプロジェクトやイノベーションが BSC エコシステムに参入し、分散型借貸、デリバティブ取引、流動性マイニングといった金融ツールがさらに発展するでしょう。
2. **NFT の発展と応用**
   
   NFT は、デジタルアート、ゲーム、仮想資産の分野で急速に普及しています。BSC の低取引コストと高速な取引処理速度は、NFT プロジェクトが成功するための理想的な基盤を提供します。
3. **クロスチェーン相互運用性の強化**
   
   複数のブロックチェーン間での資産移動と相互運用性が重要なテーマとなっています。BSC は、Binance Bridge を通じて他のブロックチェーンとの連携を深め、クロスチェーンの取引を容易にすることを目指しています。
### 04 BSC の技術的課題
----------------------
BSC の発展には多くのメリットがありますが、技術的な課題も存在します。特に、ネットワークのスケーラビリティやセキュリティの強化が必要です。将来的には、以下の技術的な挑戦に取り組むことが求められます：
1. **スケーラビリティの向上**
   
   BSC のトランザクション量が増加するにつれて、ネットワークのスケーラビリティ問題が浮上しています。新しいスケーリングソリューションやレイヤー2技術の導入が検討されています。
2. **セキュリティの強化**
   
   DeFi プロジェクトの急速な成長に伴い、スマートコントラクトやネットワーク全体のセキュリティリスクが増大しています。セキュリティ監査や脆弱性対策の強化が必須となっています。
### 05 結論
----------------------
Binance Smart Chain は、DeFi および NFT 分野で重要な役割を果たしており、その技術的な強みと低コストが多くの開発者やユーザーに支持されています。しかし、今後の発展には技術的な課題もあり、特にスケーラビリティとセキュリティの強化が必要です。これらの課題に取り組むことで、BSC はさらなる成長を遂げ、ブロックチェーン業界での影響力を高めることができるでしょう。
Binance Smart Chain のセキュリティと脆弱性対策

![binance smart chain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2944615/1daccf16-ffaa-105b-c430-0b936dc85da8.png)


# Binance Smart Chain のセキュリティと脆弱性対策
------------------------
### 01 はじめに
------------------------
分散型金融（**DeFi**）およびブロックチェーンアプリケーションの急速な発展に伴い、セキュリティ問題がますます重要になっています。**Binance Smart Chain (BSC)** エコシステムが拡大するにつれて、ネットワーク内の資産とプロジェクトの価値も大幅に増加し、攻撃者の標的となっています。BSC のセキュリティと脆弱性対策は、ユーザーの資産の安全性に関わるだけでなく、エコシステム全体の健全な発展にも直結しています。本稿では、BSC の一般的なセキュリティリスク、スマートコントラクトへの攻撃手法、セキュリティ対策、および BSC のセキュリティ監査におけるベストプラクティスについて詳しく解説します。
### 02 一般的なスマートコントラクト攻撃の種類
------------------------
スマートコントラクトは分散型アプリケーションの中心的な役割を担っていますが、コードに脆弱性がある場合、攻撃者に悪用され、資産の損失を招く可能性があります。以下は、一般的な攻撃の種類です。
#### 1. リエントランシー攻撃（Reentrancy Attack）
リエントランシー攻撃は、コントラクト内の特定の関数を繰り返し呼び出し、コントラクトの状態が更新される前に資金を何度も引き出す攻撃手法です。
**例：**  
有名な DAO 攻撃事件では、攻撃者がリエントランシーの脆弱性を悪用し、数千万ドル相当の資産を奪いました。
**対策：**  
リエントランシー攻撃を防ぐため、関数の実行順序を工夫し、コントラクトの状態を更新してから外部呼び出しを行うべきです。また、`ReentrancyGuard` ライブラリの利用も推奨されます。
modifier nonReentrant() {
    require(!locked, "Reentrant call");
    locked = true;
    _;
    locked = false;
}
#### 2. 整数オーバーフロー/アンダーフロー（Integer Overflow/Underflow）
整数オーバーフローやアンダーフローは、数値が限界を超えたときに発生します。スマートコントラクトが適切に数値の境界条件を管理していない場合、攻撃者がこれを利用して資産を操作できます。
**対策：**  
`SafeMath` などのライブラリを利用して、数値の操作におけるオーバーフローやアンダーフローを防止できます。
using SafeMath for uint256;
#### 3. フロントランニング（Front Running）
フロントランニングは、取引が公開されてからブロックに追加されるまでの間に、攻撃者が取引を先回りして操作する手法です。
**対策：**  
タイムスタンプ依存の取引を避け、`commit-reveal` メカニズムを使用することで、この種の攻撃を軽減できます。
### 03 BSC のセキュリティ対策
------------------------
BSC のプロジェクトは、スマートコントラクトのセキュリティを強化するために、以下の手法を実施するべきです。
1. **コードレビュー**  
   開発チームによる徹底的なコードレビューを行うことで、脆弱性の早期発見が可能です。
2. **セキュリティ監査**  
   専門のセキュリティ監査機関による監査は、スマートコントラクトの安全性を高め、潜在的なリスクを軽減する重要なステップです。
3. **自動化ツール**  
   `Mythril` や `Slither` などの自動化されたセキュリティツールを使用して、スマートコントラクトのコードを分析し、セキュリティリスクを検出します。
### 04 BSC セキュリティ監査のベストプラクティス
------------------------
BSC のセキュリティ監査には、以下のベストプラクティスを採用すべきです。
1. **第三者監査**  
   外部の専門機関による第三者監査を依頼し、プロジェクトの安全性を保証します。
2. **テストネットの活用**  
   本番環境にデプロイする前に、テストネットで徹底的にテストを行い、コードが正常に動作することを確認します。
3. **バグバウンティプログラム**  
   コミュニティメンバーやホワイトハッカーを対象としたバグバウンティプログラムを設け、潜在的な脆弱性を報告するインセンティブを提供します。
### 05 結論
------------------------
Binance Smart Chain でのセキュリティは、分散型金融やスマートコントラクトの成功に不可欠です。リエントランシー攻撃やフロントランニングなどの脆弱性を防ぐために、開発者はセキュリティ対策を徹底し、コードレビュー、セキュリティ監査、自動化ツールを駆使して安全性を確保する必要があります。また、第三者監査やバグバウンティプログラムを活用することで、BSC エコシステム全体の安全性が向上し、ユーザー資産の保護が強化されます。
GitHub

今回はGitHubについて記事にしたいと思います。

今回は流れについて記事にしていと思います。
手で動かすことで一番身につくと思います。

Gitコマンドの基本例
では、Gitの基本的なコマンドを例と一緒に見ていきましょう。

1. リポジトリを作成する：
何をするの？

新しいGitリポジトリ（プロジェクトの保存場所）を作成します。
使い方の例

```bash
git init
```
例え
新しいノートを用意する：新しいプロジェクトを始めるときに、新しいノートを開くようなものです。


2. ファイルの変更をステージングする
```bash
git add
```
何をするの？

変更したファイルを次のコミットに追加するためにステージします。
使い方の例
```bash
git add ファイル名
```
例
```bash
git add greeting.py
```
例え
提出物をまとめる：宿題を提出するときに、必要なプリントをまとめる感じです。


3. 変更を記録する：git commit
何をするの？

ステージされた変更をリポジトリに記録します。
使い方の例
```bash
git commit -m "コミットメッセージ"
```
例
```bash
git commit -m "挨拶プログラムを追加"
```
例え

日記を書く：今日やったことを日記に書いて記録するようなものです。
4. 状態を確認する：git status
何をするの？

リポジトリの現在の状態を確認します。どのファイルが変更されているか、ステージされているかがわかります。
使い方の例
```bash
git status
```
例え
持ち物を確認する：出かける前に、持ち物がちゃんと揃っているか確認する感じです。

5. 変更履歴を見る：git log
何をするの？

リポジトリの変更履歴（コミットの履歴）を表示します。
使い方の例
```bash
git log
```
例え
アルバムを見る：過去の写真を見て思い出を振り返るようなものです。

6. リモートリポジトリを追加する：git remote add origin
何をするの？

自分のリポジトリとGitHub上のリポジトリをつなげます。
使い方の例
```bash
git remote add origin リポジトリのURL
```
```bash
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
```
例え

郵便局の住所を登録する：手紙を出すときに、送る相手の住所を登録するようなものです。
7. 変更をリモートに送る：git push
何をするの？

ローカルの変更をGitHubなどのリモートリポジトリに送ります。
使い方の例
```bash
git push -u origin main
```
手紙を送る：準備した手紙をポストに入れて相手に送る感じです。

8. リモートの変更を取り込む：git pull
何をするの？

リモートリポジトリから最新の変更を自分の環境に取り込みます。
使い方の例
```bash
git pull origin main
```
例え
新しい連絡事項を確認する：クラスの連絡掲示板を見て、新しいお知らせをチェックする感じです。

9. リポジトリをコピーする：git clone
何をするの？
リモートリポジトリを自分のパソコンにコピーします。
使い方の例
```bash
git clone リポジトリのURL
```
例
```bash
コードをコピーする
git clone https://github.com/ユーザー名/リポジトリ名.git
```

友達のノートをコピーする：友達のノートをコピーして、自分でも勉強できるようにする感じです。
実際の流れを例で見てみよう
シナリオ：挨拶プログラムを作ってGitHubにアップロードする


プロジェクトフォルダを作成する
```bash
mkdir greeting-project
cd greeting-project
```
Gitリポジトリを初期化する
```bash
git init
```
プログラムを作成する
```python
# greeting.py
name = input("あなたの名前は何ですか？：")
print(f"こんにちは、{name}さん！")
```
ファイルをステージングする
```bash
git add greeting.py
```
変更をコミットする

```bash
git commit -m "挨拶プログラムを作成"
GitHubにリポジトリを作成し、リモートリポジトリを追加する
```
```bash
git remote add origin https://github.com/ユーザー名/greeting-project.git
```


変更をリモートリポジトリにプッシュする
```bash
git push -u origin main
```
まとめ
Gitコマンドは、プログラムやファイルの変更を管理するための道具です。
基本的なコマンドを使うことで、作業の履歴を記録し、安心して開発を進めることができます。
GitとGitHubを組み合わせることで、他の人と協力してプロジェクトを進めることができます。
補足：よく使うその他のコマンド
```bash
ブランチを作成する：git branchとgit checkout
```
何をするの？

新しい作業の流れ（ブランチ）を作成し、切り替えます。
使い方の例

```bash
git branch ブランチ名
git checkout ブランチ名
```
例
```bash
git branch feature/add-greeting
git checkout feature/add-greeting
```
例え

新しいページで作業する：ノートの別のページでアイデアを書き始める感じです。
ブランチを統合する：git merge
何をするの？

他のブランチでの変更を現在のブランチに統合します。
使い方の例

```bash
git merge ブランチ名
```
例
```bash
git merge feature/add-greeting
```

別々に書いたアイデアを一つにまとめる：みんなで書いた部分を合わせて一つの作品にする感じです。

今回は記事にしましたが、実際に手を動かして身につけるのが一番いいと思います！
【DAY22】OGPの設定

## はじめに
先日、作成したWebアプリケーションをデプロイしました。URLをラインで共有したところ、普段サイトのURLを共有した時と比べて以下の2点が気になりました。
* 説明文が崩れている点
* 画像がない点

こららについて調べたところ、OGPというものが関わっているようです。OGPについて調べて編集した内容をここに記します。
因みにデプロイしたアプリはこちらです。
https://tutorconnect-11e9659f9c5d.herokuapp.com/

## OGPとは
OGP（Open Graph Protocol）とは、WebページのURLがSNSに投稿されたとき「タイトル」「画像」「説明文」などの補足情報を表示するための仕組みです。OGPを設定することにより、そのWebページの魅力をSNSで伝えやすくなります。OGPは、HTMLのheadタグ内にmetaタグで記述します。
OGPタグをいくつかまとめます。
* og:title
ページのタイトルを記述
* og:type
ページの種類を記述（website OR article）
* og:url
ページのURLを記述
* og:image
画像のURLを記述
* og:description
ページの説明文を記述

## 現在のSNS投稿時の表示
LINEではこんな感じです。
![スクリーンショット 2024-09-30 11.39.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818045/828ad941-1583-889a-5581-13b45e46ee44.png)

## OGPを記述
```html
<meta property="og:title" content="TutorConnect">
<meta property="og:type" content="website">
<meta propetry="og:url" content="https://tutorconnect-11e9659f9c5d.herokuapp.com/">
<meta property="og:image" content="https://tutorconnect-11e9659f9c5d.herokuapp.com/icon-orange.png">
<meta property="og:description" content="家庭教師として働く大学生のためのQ&Aプラットフォーム。家庭教師が抱える不安や悩み、日常の課題を共有し、解決策やアドバイスを得ることができる場を提供します。">
```
## OGP記述後のSNS投稿時の表示
画像が加わり、サイトの説明文も整いました。
![スクリーンショット 2024-09-30 12.09.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818045/0e0c9efb-89a1-ab25-7d3d-9c2d980eda7c.png)

## メタディスクリプション
ついでに、検索時に表示される説明文も記述します。
```html
<meta name="description" content="家庭教師として働く大学生のためのQ&Aプラットフォーム。家庭教師が抱える不安や悩み、日常の課題を共有し、解決策やアドバイスを得ることができる場を提供します。">
```
母校完全再現のメタバース作る　Part. 1

## React Three Fiberについて

## はじめに
WebGLを使ったWebフロントエンドを開発する機会があったので、自分の備忘録として書く。

## React Three Fiberとは

ReactにThree.jsを埋め込むためのライブラリ。

Three.jsの3DオブジェクトをReactを使うことで、JSX感覚で配置することができる。

## 使ってみる
\
Reactアプリケーションを作る
```
npx create-react-app my-react-three-app
```

React Three Fiberをnpmインストール
```
npm install three @react-three/fiber
```
\
とりあえず、回転する立方体を作ってみる。

```tsx SpinningCube.tsx
import React, { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Box } from '@react-three/drei';

function SpinningCube() {
  const cubeRef = useRef();

  // 回転を毎フレーム更新する
  useFrame(() => {
    if (cubeRef.current) {
      cubeRef.current.rotation.x += 0.01;
      cubeRef.current.rotation.y += 0.01;
    }
  });

  return (
    <Box ref={cubeRef} args={[1, 1, 1]} position={[0, 0, 0]}>
      <meshStandardMaterial color="orange" />
    </Box>
  );
}

function App() {
  return (
    <Canvas>
      {/* 照明を追加 */}
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      
      {/* 立方体を表示 */}
      <SpinningCube />
    </Canvas>
  );
}

export default App;
```

JSXに、3Dオブジェクトを配置できるので、とても便利。

特に、Reactのコンポーネントを活用することができるので、拡張性が高いものを作ることができる。


このコードがしていることは以下

Reactの機能の一つであるuseRefフックを使って、Three.jsの3Dオブジェクトへの参照を保持しておき、

::: note 
もし、useStateを使って、参照を保持すると、
Three.jsのフレームごとに、Reactがレンダリングを行うので、重くなる。
:::

そのプロパティーの一つである`rotation`の中にある`Vector3`を変更するコードを、

React Three Fiberの毎フレームに実行してくれるフックを使って、実行すると、立方体がくるくる回る。

::: note
`useRef`は特定のDOM要素やオブジェクトの参照を保持するためのReactフックで、レンダリング間でその値が変わらない。
一方、`useFrame`はアニメーションループを実現するために、フレームごとに自動で呼び出されるフック。
:::
Three.jsだと、rendererを追加したりと、コードがわかりづらくなる。
React Three Fiberはとても便利であることがわかる。

## 視点操作の設定

カメラのプリセットなどもCanvasのchildrenのなかに書き加えるだけで、
視点操作の設定もできる。

``` tsx SpinningCube.tsx
import { OrbitControls } from '@react-three/drei';

function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <SpinningBox />
      {/* カメラをドラッグで動かすためのコントロール */}
      <OrbitControls />
    </Canvas>
  );
}
```
こんな感じ。

`OrbitControls`を使うことで、ユーザーはマウスを使ってシーン内のカメラを回転、ズーム、移動させることができる。


## 終わり

僕は、メタバースのモデルを作るときに、再利用を徹底しようと考えているので、

ドアの取手　→　ドア　→　教室　→　フロア　→　校舎
というように、
細かいモデルのコンポーネントをたくさん作って、それらを組み合わせて作っていくという予定だ。


オブジェクトをファイルごとに分けることができるのは、とても便利だと思う。
オブジェクトを再利用しやすくなり、保守性が向上する。