OmniAICreator/Qiita-1.07M huggingface dataset:
Singleton作成時の注意点

- 複数のクライアントが1つの同じオブジェクト インスタンスを共有するため、無状態（stateless）に設計する必要がある。
- 特定のクライアントに依存するフィールドがあってはならない。
- なるべく読むことだけが可能でなければならない。 **値を修正してはいけない。**
- フィールド**の代わりにJavaで共有されない、ローカル変数、パラメータ、Thread Localなどを使用しなければならない。**

<問題点>
例えば、以下のように状態を維持するフィールドを作ってしまうと、
stateful Service 1 で100、stateful Service 2 で200を注文しましたが、statefulService1が200を注文したと出てくる。
```java
package hello.hellospring.singletone;

public class StatefulService {

    // 状態を保つフィールド
    private int price;

    public void order(String name, int price){
        this.price = price;
    }

    public int getPrice() {
        return price;
    }
}
```
```java
package hello.hellospring;

public class SingleToneTest {
    static class TestConfig{
        @Bean
        public StatefulService statefulService() {
            return new StatefulService();
        }
    }

    @Test
    void stateFulTest(){
        ApplicationContext ac = new AnnotationConfigApplicationContext(TestConfig.class);
        StatefulService statefulService1 = ac.getBean(StatefulService.class);
        StatefulService statefulService2 = ac.getBean(StatefulService.class);

        // ThreadA : Aユーザー 100 注文
        statefulService1.order("userA",100);
        // ThreadA : Bユーザー 200 注文
        statefulService2.order("userB", 200);

        System.out.println(statefulService1.getPrice());
        // 100ではなく200が出力される。
        // stateful Service 1、stateful Service 2 が同じインスタンスを使用し、
        // priceがstatefulになっているからだ。
        // このような場合が発生しないように、無状態（stateless）に設計しなければならない。
    }
}
```

<解決策>

this.price=priceを使わず、すぐにreturn priceするように変えなければならない。
```java
package hello.hellospring.singletone;

public class StatefulService {

    public int order(String name, int price){
        return price;
    }
}
```
```java
package hello.hellospring;

public class SingleToneTest {
    static class TestConfig{
        @Bean
        public StatefulService statefulService() {
            return new StatefulService();
        }
    }

    @Test
    void stateFulTest(){
        ApplicationContext ac = new AnnotationConfigApplicationContext(TestConfig.class);
        StatefulService statefulService1 = ac.getBean(StatefulService.class);
        StatefulService statefulService2 = ac.getBean(StatefulService.class);

        int userAPrice = statefulService1.order("userA",100);
        int userBPrice = statefulService2.order("userB", 200);

        System.out.println(userAPrice);
        // 100
        System.out.println(userBPrice);
        // 200
    }
}
```
Open Libertyで管理するDataSourceをSpring BootからJNDI参照する

Open Libertyで作成・管理されているDataSourceをSpring BootからJNDIで参照してデータベース操作に利用する方法を解説します。


## 本記事で使用するコンポーネント

|コンポーネント名|バージョン|
|:--|:--|
|JDK|OpenJDK 17.0.8 (IBM Semeru Runtime Open Edition)|
|Open Liberty|23.0.0.10|
|Spring Boot|3.1.5|

```bash
$ java -version
openjdk version "17.0.8" 2023-07-18
IBM Semeru Runtime Open Edition 17.0.8.0 (build 17.0.8+7)
Eclipse OpenJ9 VM 17.0.8.0 (build openj9-0.40.0, JRE 17 Mac OS X amd64-64-Bit Compressed References 20230718_503 (JIT enabled, AOT enabled)
OpenJ9   - d12d10c9e
OMR      - e80bff83b
JCL      - 77b0f754805 based on jdk-17.0.8+7)
```

## Open Libertyの設定

`server.xml` に以下のフィーチャーを宣言します。

* `jdbc-4.3` ... DataSourceの作成・管理に必要なフィーチャー
* `jndi-1.0` ... Open Libertyで管理されたインスタンスをJNDIで参照するためのフィーチャー

また、DataSourceはSpring BootからDataSourceを参照する際に指定するJNDI名を含めて `<dataSource jndiName="{JNDI名}" ... />` と定義します。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<server description="Spring Boot WebApp on Open Liberty">
    <!-- Features -->
    <featureManager>
        <feature>servlet-6.0</feature>
        <feature>jdbc-4.3</feature>
        <feature>jndi-1.0</feature>
    </featureManager>

    <!-- ...中略... -->

    <!-- JDBC Driver -->
    <library id="jdbcLib">
        <fileset dir="jdbc" includes="*.jar"/>
    </library>

    <!-- DataSource -->
    <dataSource jndiName="jdbc/defaultDS" type="javax.sql.DataSource">
        <jdbcDriver libraryRef="jdbcLib"/>
        <properties.postgresql serverName="localhost" portNumber="5432"
                    databaseName="sampledb"
                    user="sampleuser" password="*****"/>
    </dataSource>
</server>

```

## Spring Bootの設定

Open Libertyの `server.xml` で定義したJNDI名をSpring Bootの `spring.datasource.jndi-name` プロパティに指定します。

```properties
spring.datasource.jndi-name=jdbc/defaultDS
```

:::note warn
Open Libertyでは `server.xml` で定義した `jndiName` のとおり指定してください。
プレフィックス付きのJNDI名 (`java:...`) や、名前空間を含めたJNDI名 (`java:comp/env/...`) を指定するとエラーが発生する場合があります。
:::


## 参考リンク

* [Spring Boot データ - JNDIデータソースへの接続](https://spring.pleiades.io/spring-boot/docs/current/reference/html/data.html#data.sql.datasource.jndi)
* [Spring Boot アプリケーションプロパティ設定一覧 - データプロパティ](https://spring.pleiades.io/spring-boot/docs/current/reference/html/application-properties.html#application-properties.data.spring.datasource.jndi-name)

---

以上。
【備忘録 #2】Git 基本コマンド

## 概要

以下の書籍でGit,GitHubについて学びました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/5b4f3d0d-96b4-9374-bfdc-a10459557415.png)

[いちばんやさしいGit&GitHubの教本 第2版 人気講師が教えるバージョン管理&共有入門 (「いちばんやさしい教本」シリーズ) ](https://www.amazon.co.jp/gp/product/4295013617/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1)

## ファイルの3フェーズ
* ワークツリー
* ステージングエリア
* Gitディレクトリ

## コマンド
### ■diff
ワークツリーとステージングエリアとのソースコードの差分確認
```shell
git diff
```

ステージングエリアとGitディレクトリとのソースコードの差分確認
```shell
git diff -chached
```

ブランチ同士の差分確認
```shell
git diff master
```

### ■status
現在のワークツリー、ステージングエリア、Gitディレクトリの状態が一目で分かる。
例：修正されたがステージングエリアに上がっていないファイル等。
```shell
git status
```


### ■checkout
ワークツリー内にあるファイル/フォルダを、
現在のステージングエリアの状態に戻す。
```shell
git checkout -- index.html
```

使用ブランチの変更
```shell
git checkout test-branch
```

`-b`を付けるとブランチ新規作成・ブランチ切り替えの両方行う。
```shell
git checkout -b test-branch
```

### ■reset
ステージングエリア内にあるファイルを
最後にコミットした状態に戻す。
```shell
git reset HEAD index.html
```

### ■rm
ワークツリー内のファイルを削除する。
```shell
git rm index.html
```

### ■log
コミット履歴を確認できる。
引数`-p`を記述することで、各ファイルの差分も確認できる。
```shell
git log
```

### ■clone
GitHub上にあるリポジトリをローカルにダウンロードする。
```
git clone <URL>
```

### ■branch
ブランチ`test-branch`を作成する。
```shell
git branch test-branch
```

また、以下コマンドで作成済みのブランチ一覧が表示される。
```shell
git branch
```

### ■pull
作業中のローカルリポジトリのブランチで、
ワークツリー+ローカルリポジトリ（ステージングエリア+ローカルリポジトリ）を
リモートリポジトリの指定したブランチと同じにする。
```shell
git pull origin master
```

### ■fetch
ローカルリポジトリのブランチを、
リモートリポジトリのリモート追跡ブランチにコピーする。
```shell
git fetch origin
```

### ■merge
ローカル上で、現在の作業ブランチに
ブランチ`master`をマージさせる。
```shell
git merge master
```



## .gitignore
以下のように、Git管理を行わないファイル名を記述することで、
そのファイルは管理されなくなる。
```
sample.txt
```
エクセルで図形の塗りつぶしと枠線の初期値を設定

# 概要

エクセルで図形を配置すると下記のような塗りつぶしと枠線になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/4965c575-a3ce-7fcd-0a6c-e177d0857f38.png)

塗りつぶしは白で枠線は黒にしたい時、図形を配置するたびに塗りつぶしと枠線を設定するのが面倒。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/d77f2dfb-9291-f158-c3f8-82f068938c88.png)

塗りつぶしと枠線の初期値を設定したい。

# やり方（開いているブックに対する初期値設定）

塗りつぶしと枠線を設定したあとの図形上で右クリック → 『規定の図形に設定』。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/91a9a302-3bfa-be3c-931d-ff4f8c402091.png)

矢印以外の△や〇などを配置しても、塗りつぶしと枠線が適用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/451cc957-dd06-c4b4-901e-2aa87bdd179b.png)

折れ線矢印などの塗りつぶしが無い図形に対しては『既定の線に設定』をやる必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b0b952e6-6261-5f81-0c0d-9b2f4e1262cc.png)

これは **設定をしたブック（ファイル）でのみ有効** な設定となります。
別のブック（ファイル）には適用されません。

# やり方（独自テンプレートに対する初期値設定）

独自テンプレートについては下記参照。

https://qiita.com/waokitsune/items/da2e3c81c552001d51a2

テンプレートファイルの『Book.xltx』に対して、前述のような『規定の図形に設定』『既定の線に設定』の設定をやればOKです。

# 参考サイトさん

http://office-qa.com/Excel/ex150.htm

# バージョン

Microsoft Windows [Version 10.0.19045.3636]
Microsoft Excel for Microsoft 365 MSO (バージョン 2310 ビルド 16.0.16924.20054) 32 ビット
【ChatGPT＋DALL-E3】で黒猫を生成。


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

　今回は、ちょっとChatGPT＋DALL-E3に触れる機会を得ましたので、ちょっと遊んでみましたw

:::note info
本記事はChatGPT＋DALL-E3を
アプリ上で、使用しています。
あしからず。
:::

　さっそく、使ってみます。

　まぁ、音声のやり取りも
　　やったんですけどね、途中で
　　　何をやり取りしたらいいのか、
　　　　悩んでしまったんです。
　　　　　だから、音声はまた今度。

　ということで、
　　今回は、画像生成AIである
　　　DALL-E3を使います。

　すでに、DALL-E3の入った
　　ImageCreatorは、使っています
　　　ので、画質を云々する
　　　　つもりはありませんよ。
***
　ともかく、
　　はじめましょう。

***
***User***
黒猫の座っている画像をお願いします。

***ChatGPT***
![Screenshot_20231104-110530~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/eb43cd66-da68-4369-b0a2-8109cf0f33d9.png)

***User***
左側の子を短毛種にしてください。

***ChatGPT***
![Screenshot_20231104-110539~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/d5021d5b-3b97-98aa-a571-249862a3b469.png)

***User***
尻尾を上げて、S字にしたところをお願いします。

***ChatGPT***
![Screenshot_20231104-110548~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/7c1632b5-b8f0-ad2f-be83-078250a30f52.png)

***User***
白い吹き出しを猫の右上に出し て、"nya!!" と書いてください。

***ChatGPT***
![Screenshot_20231104-110557~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/ff0d4531-53f3-c666-cf20-998f9f7f6325.png)
***
　途中、
　　S字と言ったのに、
　　　渦巻きになったけど、
　　　　最終的に、きれいに
　　　　　なったので、良し！

　こんな簡単に
　　描けるというのは、
　　　ありがたいですね。

　画家や写真家、
　　ほかの映像関係者が
　　　戦々恐々とするのも
　　　　うなずけます。

　今回は、ここまで。
TypeScriptのシグネチャおさらい

## 背景
最近TypeScriptを扱っているがなんとなく使っていることが多く、もっと理解した上で仕事に活かしたかったため、改めて自分なりに学習しまとめてみました。

## シグネチャ
メソッド名、パラメータの型、戻り値の型などで構成された組み合わせのこと。

## インデックスシグネチャ
```typescript
[key: T]: U
```
上記の構文のことをインデックスシグネチャという。この構文はオブジェクトがより多くのキーを含む可能性があることをTypeScriptに伝えており、読み方は「このオブジェクトについては、型Tの全てのキーは、型Uの値を持たなければならない」。

- 型Tの部分はnumberかstringしか使用できない。
- keyの部分は任意の言葉が使用できる。

使用例
```typescript
const onigiri: {
  [okazu: string]: number
} = {
  'okaka': 2,
  'tsuna': 5
}
```

## 呼び出しシグネチャ
- 関数そのものの型のこと。
- アロー関数と似ている。
- 関数を引数として渡す場合や、関数を別の関数から返す場合の片付けに使用する。
```typescript
(a: number, b: number) => number
```
使用例
```typescript
type Log = (message: string, userId: string) => void

const log: Log = (message, userId) => {
  console.log(userId, message)
}
```

## オーバーロード
オーバーロードとは、**メソッド名と戻り値の型が同じで、引数の型や数、並び順が違うメソッドを2つ以上定義**すること。複数の呼び出しシグネチャを持つ関数。

使用例
```typescript
type Origiri = {
  (kome: string, gu: string, nori: boolean): void
  (kome: string, gu: string): void
}
```

## ジェネリック型（総称型）
複数の場所で型レベルの制約を強制するために使用される。
あらゆる型で同じコードを使うときに使用するため、型の安全性とコードの共通化が両立できる。

使用例
```typescript
type Onigiri = {
  <T>(array: T[]): T
}

let onigiri: Onigiri = (array) => {
  return array[0]
}

onigiri<string>(['okaka', 'tsuna', 'ume']);
```

TypeScriptがどのようにバインド（型の紐付け）を行うのかを下記に示す。
1. TypeScriptはarrayが何らかの型の配列であると理解する。
2. onigiri関数の実行時にTypeScriptが渡した型から判断する。
3. 配列['okaka', 'tsuna', 'ume']からシグネチャに現れるTは全てstringに違いないと判断する。
Next.jsでブログ作ってみた（WordPressから移行）


WordPressからの移行と新たなブログ作成についての体験をシェアしたいと思います。私はこれまではWordPressを使用していましたが、今回、[Next.jsを使ってブログを再構築](https://devtheworld.jp/?trk=qt-aa)することにしました。そのプロセスや新しいブログの特徴についてお話ししたいと思います。

## Next.jsでブログを作りました
これまでのWordPressからの切り替えは、新しい可能性を探る冒険の始まりでした。Next.jsはブログを作成するために最適なツールで、ライブリロード、MDX（MarkdownとJSXの統合）、そして素晴らしいSEO対策の機能を提供しています。これにより、ブログの更新が簡単になり、ユーザーエクスペリエンスが大きく向上しました。

![ShareX-231104T112919-ZWRMG5U1~chrome-Dev_The_World_-_Google_Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3604493/1ea48a57-9e13-70a8-c422-19d43e70cb24.png)


以前はWordPressを使用していたため、更新が億劫な感じがありました。しかし、Next.jsを使用することで、これが大きく改善したように感じます。

## SEO対策
SEO対策はブログ運営の重要な要素です。Next.jsはページスピードの向上やクローラビリティを高めるための様々な機能を提供しています。これにより、Googleや他の検索エンジンが適切な評価をしてくれ、アクセスが向上することを期待できます。

## ユーザーエクスペリエンス
ユーザーエクスペリエンス（UX）はブログの成功において不可欠です。Next.jsを使用することで、シンプルで使いやすいユーザーインターフェースを提供できます。

また、新しいブログでは[リンク一覧ページでAI生成した画像を活用](https://devtheworld.jp/links?trk=qt-aa)し、Linuxベースのキャラクターのイラスト画像を利用しています。

![ShareX-231104T112846-lYlYOsAA~chrome-Links_-_Google_Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3604493/188ca95b-c5f9-6097-2d3e-915eb48d9427.png)


Linuxが好きなので、Linuxを題材にしたキャラクターのイラスト画像を簡単に作成できるのは素晴らしいことです。

## おわりに
Next.jsを使用して新しいブログを作成するプロセスは楽しく、多くの新しい機能と機会を提供してくれました。WordPressからの移行は正しい選択だったと思います。Googleや他の検索エンジンがこの新しいサイトを適切に評価し、アクセスが向上してくれることを期待しています。

これからも新しいコンテンツを提供しながら、読者さま方に価値ある情報を提供し続けたい所存です。

以上です。ありがとうございました。

（参考）

- [Next.jsプロジェクトに追加したい設定11個 #Node.js - Qiita](https://qiita.com/tksst/items/bf62d50b25af69505e8e)
- [Next.js初心者の体験記 〜App ディレクトリ編〜 #React - Qiita](https://qiita.com/yu-Matsu/items/4ebd28d5ecf2fd8acf98)
- [【初学者歓迎🔰】Next.jsでつくるショッピングサイト🛒 #React - Qiita](https://qiita.com/hato_code/items/5f04e87398402ff78077)
- [【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 #TypeScript - Qiita](https://qiita.com/mamimami0709/items/7ce5e26afea1fded0747)
- [Next.jsを使うべき5つの理由 + 実装Tips #JavaScript - Qiita](https://qiita.com/Yuki_Oshima/items/5c0dfd8f7af8fb76af8f)
Golang ブラウザ操作を自動化する

# はじめに
golangとgolangのpackage  [agouti](https://pkg.go.dev/github.com/sclevine/agouti#section-documentation)を用いて Chrome のブラウザ操作を自動化する方法を記載する。

# 実装
1. 任意のプロジェクトに agoutiをインストール

```
go get github.com/sclevine/agouti
```


2\.Chrome用ドライバー [chromeDriver](https://sites.google.com/chromium.org/driver/downloads) をインストールしてPATHを設定

chromeDriverはプロジェクト直下に配置、PATHを通した。
PATHを通すのは以下の記事を参考

https://teratail.com/questions/83zeb3i3j6lfni

https://taidanahibi.com/unix/unix-path/#index_id2

3\.コードを実行

```

func main() {
	driver := agouti.ChromeDriver(agouti.Browser("chrome"))
	if err := driver.Start(); err != nil {
		log.Fatalf("Failed to start driver:%v", err)
	}
	defer driver.Stop()

	page, err := driver.NewPage()
	if err != nil {
		log.Fatalf("Failed to open page:%v", err)
	}

	if err := page.Navigate("開たいサイトのurl"); err != nil {
		log.Fatalf("Failed to navigate:%v", err)
	}

}

 ```

初回だと、「Chromedriverを開こうとしたら、chromedriverは開発元を検証できないため開けません」と表示される。
システム設定を開き、許可するを押下すると使用できるようになる。

https://qiita.com/pontarou194/items/805fba00a2ecabcf0941


## 注意点
画面がsleepモードだとChromedriverがうまく起動しないので、画面onかつロックがかかっていない状況でChromedriverを実行すること。

Chromeがアップデートしたら。Chromedriverもアップデートする必要がある。
以下からダウンロードする。

https://googlechromelabs.github.io/chrome-for-testing/#stable



# 参考
https://sites.google.com/chromium.org/driver/downloads
https://note.com/shift_tech/n/nbf70b1953eec
アプリ作成メモ

Node.jsダウンロード
https://nodejs.org/en
```bat
インストール
npm install -g @vue/cli
プロジェクト作成
vue create my_app
プロジェクト実行
cd my_app
npm run serve
```
BootstrapをVue.jsプロジェクトに統合
```bat
npm install bootstrap
```
HTMLとJavaScriptのファイルは通常、Vue.jsプロジェクト内の `src` フォルダに作成します。以下に一般的な構造を示します。

```plaintext
my-vue-app/
|-- src/
|   |-- assets/
|   |-- components/
|   |   |-- MyComponent.vue
|   |-- views/
|   |   |-- Home.vue
|   |-- App.vue
|   |-- main.js
|-- public/
|-- node_modules/
|-- package.json
|-- ...
```

- **`src/` フォルダ:** プロジェクトのソースコードがここに格納されます。VueコンポーネントやVueインスタンスの定義、そしてJavaScriptのロジックが含まれます。
- **`src/components/` フォルダ:** Vueコンポーネントを格納するためのフォルダです。
- **`src/views/` フォルダ:** アプリケーションの各ビュー（画面）に対応するVueコンポーネントを格納するためのフォルダです。
- **`src/assets/` フォルダ:** 画像、スタイルシートなどの静的ファイルを格納するためのフォルダです。
- **`src/App.vue` ファイル:** アプリケーション全体のメインのVueコンポーネントです。
- **`src/main.js` ファイル:** アプリケーションのエントリーポイントであり、Vueの初期化とルートコンポーネントの設定が行われます。

HTMLファイルは通常、Vueアプリケーションが動作するエントリーポイントである `public/index.html` ファイルに配置されます。このファイル内でVueアプリケーションがマウントされる要素が定義されています。




```html
<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Vue App</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
```

Vue.jsはこの`<div id="app"></div>` 内にアプリケーションをマウントします。 JavaScriptのロジックは主に `src/` 内のファイルに記述されます。


以下の手順でVue.jsアプリケーションを構築していくことができます。

1. **新しいコンポーネントの作成:**
   - `src/components/` フォルダに新しい`MyComponent.vue` コンポーネントを作成。この中で、アプリケーションの機能やUI部分を定義します。

2. **新しいビューの作成:**
   - `src/views/` フォルダに新しいビューを作成。これはアプリケーション内で表示される特定の画面を表します。例えば、`Home.vue` という名前のビューを作成して、そこに先ほど作成したコンポーネントを組み込んでみましょう。

3. **ルーティングの設定:**
   - アプリケーション内の異なるビューに切り替えるために、Vue Routerを使用してルーティングを設定します。`src/router/index.js` ファイルを編集して、新しいビューに対応するルートを追加します。

4. **ナビゲーションの追加:**
   - アプリケーション内を移動するためのナビゲーションメニューやリンクを作成します。これはVue Routerを使用して作成したルートに基づいています。通常、これは `src/App.vue` 内で行われます。

5. **スタイルの追加:**
   - `src/assets/` フォルダにCSSファイルを追加して、アプリケーション全体のスタイルを設定します。また、各コンポーネントやビューに対して独自のスタイルを追加することもできます。

6. **APIとの通信の設定:**
   - バックエンドとのデータのやり取りが必要な場合は、Vue.jsの`axios`などのHTTPクライアントを使用してAPIと通信する方法を設定します。

7. **テストとデバッグ:**
   - 開発中にテストやデバッグを積極的に行う。Vue Developer Toolsやブラウザのデベロッパーツールを使用して、アプリケーションの状態やエラーを確認します。

8. **デプロイの検討:**
   - アプリケーションが完成したら、デプロイ方法を検討。Netlify、Vercel、Firebase Hostingなどのプラットフォームが便利です。





pythonダウンロード
https://www.python.org/downloads/
```bat
djangoインストール
pip install django

djangoプロジェクト作成
django-admin startproject　myapp

ディレクトリを移動後にサーバを起動
cd myapp
python manage.py runserver
127.0.0.1:8000にアクセスして起動を確認
Ctrl+cで終了
```
【勉強用】Gitのコマンドを実際に動かしてみた（⑤リモートリポジトリ編）

# はじめに

今回はGitのコマンドを実際に動かして、バージョンの確認や変更について理解を深めたいと思います。参考図書はこちらの[**動かして学ぶ！Git入門**](https://www.shoeisha.co.jp/book/detail/9784798170855)を使用しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3523467/927467bd-3ee8-bff3-c016-81d24c7d4cb0.png)

# コマンド

### 30. git remote add　リモート名　リポジトリ名
このコマンドは、リモートリポジトリとやり取りするときに使用するコマンドです。
```Git:Git Bash
$git remote add origin https://github.com/ユーザ名/リポジトリ名
```
`origin`はリモートリポジトリにリモート付与した仮の名前であり、自由に決定できます。

リモートが正しく登録されたかは**git romote -v**で確認できます。
```Git:Git Bash
$git remote -v
origin https://github.com/ユーザ名/リポジトリ名 (fetch)
origin https://github.com/ユーザ名/リポジトリ名 (push)
```

### 31. git push
このコマンドはリモートリポジトリにデータを送る際に使用するコマンドです。
```Git:Git Bash
git push リモート ブランチ名
```

### 32. リモート追跡ブランチの扱い
**リモート追跡ブランチ**は**リモートブランチの位置を記憶する特殊なローカルブランチです**。ローカルリポジトリから、リモートリポジトリにプッシュするとブランチが作成されます。それと同時に、ローカルリポジトリの同じ場所に`origin/ブランチ名`のようにリモート追跡ブランチが作成されます。これはリモートリポジトリにプッシュするたびに位置が更新されます。

リモート追跡ブランチの一覧を見るには**git branch -r**を使用します。
```Git:Git Bash
$git branch -r
origin/main
```
コミットの情報も表示したい際には、`-v`オプションも追加します。
```Git:Git Bash
$git branch -r　-v
origin/main ac512ae first commit
```

ローカルとリモートとの差を確認したい場合は**git diff リモート追跡ブランチ名　ブランチ名**で確認できます。
```Git:Git Bash
git diff origin/main main
```
ここで注意したいのが、リモートリポジトリを参照しているわけではなく、あくまでローカルリポジトリにあるコミットを参照しているということです。

### 33. git clone
このコマンドは他人のリポジトリや、空ではない既に作成されたリモートリポジトリをローカルリポジトリにコピーしたい際に使用するコマンドです。

```Git:Git Bash
$git clone リモートリポジトリのURL
```
また、クローンを行うとリモートリポジトリは`origin`という名前のリモートとしてローカルリポジトリから自動的に参照できるようになります。すなわち、`git remote add origin ~`を自動的に実行してくれます。

### 34. git fetch
プロジェクト開発において、他のメンバーがローカルリポジトリを更新し、自分のローカルリポジトリとは異なる状態になることは頻繁にあります。そのため、ローカルリポジトリの内容をリモートリポジトリにプッシュする処理を**git fetch**で行っています。
```Git:Git Bash
$git fetch origin main
```

ここで注意したいのが、ローカルのmainの位置は変更されず、リモート追跡ブランチ`origin/main`のみが変更されます。

### 35. リモートの変更を反映
上記の`34. git fetch`で行った**git fetch**でリモートの変更をローカルに継ぎ足ししました。次に行うのはその変更をマージすることです。

```Git:Git Bash
git checkout main
git merge --ff--only origin/main
```
`--ff--only`オプションを追加することで早送りマージのみを指定できます。これにより、ほかのリモート追跡ブランチとのマージをある程度避けることができます。

### 36. git pull
`34.`と`35.`でリモートの変更をローカルに反映するには、フェッチをしてから早送りマージをするという手順を行っていました。これを**一度に行ってくれる**コマンドが**git pull**です。
```Git:Git Bash
$git checkout main
$git pull origin main
```

# まとめ

今回の記事では、リモートリポジトリの扱いについてを中心に学習しました。次回は履歴の操作について学習したいと思います。

[**前回：【勉強用】Gitのコマンドを実際に動かしてみた（④タグ編）**](https://qiita.com/Yuhei0531/items/889360339bf6d16b46c0)
[**次回：【勉強用】Gitのコマンドを実際に動かしてみた（⑥履歴の操作編）**](https://qiita.com/Yuhei0531/items/e0b5e926a588b6c99671)

# 参考文献
[動かして学ぶ！Git入門](https://www.shoeisha.co.jp/book/detail/9784798170855)
めぐる式二分探索の使い方メモ

# 前提
基本的に競プロ（競技プログラミング）の文脈です。また、Kotlinで取り組んでいるのでKotlin固有の話も含まれるかもしれません。

# めぐる式二分探索とは

こちらで紹介されている二分探索の実装テンプレートのことです。

https://twitter.com/meguru_comp/status/697008509376835584

このコードはたぶんC#で書かれていますが、Kotlinで書くとこんな感じになります。（他のを参考にしたので細かい部分は違います）

```kotlin
fun binarySearch(minNg: Int, maxOk: Int, isOk: (Int) -> Boolean): Int {
    var ng = minNg
    var ok = maxOk

    while(abs(ok - ng) > 1) {
        val mid = (ok + ng) / 2
        if(isOk(mid)) {
            ok = mid
        } else {
            ng = mid
        }
    }
    return ok
}
```

## めぐる式二分探索の使い方

たとえば以下のような数列があるとして

```kotlin
val list = listOf(1, 2, 3, 5, 5, 5, 7, 8, 9, 10)
```

その中から8が何番目にあるか知りたいとしたら、以下のように書きます。

```kotlin
val index = binarySearch(-1, list.size) { list[it] >= 8 }
println(index)
```

```結果
7
```

第1引数の `minNg` は探索の開始位置（含まない）、第2引数の `maxOk` は探索の終了位置（含まない）を指定します。
第3引数の関数は、探索したい値以上だったらtrueとなるようにします。二分探索を実行するにはある位置について比較結果がtrueならそれ以上は全部true、それより小さければ全部falseというような単調性が必要で、この `isOk` はその判定のために使うので、 `list[it] == 8` のような条件にはしないということですね。

流れを追っていくとわかりますが、 `isOk` 以上となった要素は探索対象から除外して、`ng` となったほうの範囲に対して探索を続行します。 `isOk` がtrueの値を見つけたらただちに結果を返すのではなく、`isOk` がtrueとなる要素が `ng` の範囲にまだあるかどうかを調べるわけです。
この動きにより、探索対象の中で `isOk` を満たす値のうち最も左側の値が返ります。これはC++でいう `lower_bound` と同じ動きになります。

たとえば先程の数列には5が複数ありますが

```kotlin
val list = listOf(1, 2, 3, 5, 5, 5, 7, 8, 9, 10)
```

その中から5が何番目にあるかを指定してみますと

```kotlin
val index = binarySearch(-1, list.size) { list[it] >= 5 }
println(index)
```

このような実行結果となります。たしかに最も左側の値が返っています。

```結果
3
```

また、C++の `lower_bound` の対になる関数として `upper_bound` があります。対象の値より大きい値のうち最も左側にあるものを返すものですが、これは単純に対象の値 + 1で `lower_bound` すれば求められます。
なので5に対して `upper_bound` 相当の探索をしたい場合は

```kotlin
val list = listOf(1, 2, 3, 5, 5, 5, 7, 8, 9, 10)
```

このように指定すればいいです。

```kotlin
val index = binarySearch(-1, list.size) { list[it] >= 6 }
println(index)
```

```結果
6
```

つまり、めぐる式二分探索を使えば `lower_bound` も `upper_bound` もいけます。

# KotlinのbinarySearchとの比較
そもそもめぐる式二分探索に興味を持ったのは、Kotlinの二分探索ライブラリではカバーできない範囲をカバーできるからということになります。
Kotlinの配列やListなどの各コレクション型には `binarySearch` メソッドを持っており、これを使えば二分探索ができます。

探索したい要素を直接指定し、それが存在する場合はその位置、存在しない場合は負の値が返るという仕様です。存在しない場合の負の値に1を足して符号を反転すると、探索対象が仮に存在していたらこの位置だったはず、という値になります。簡易的な `lower_bound` として使えます。
使い方がわかりやすいので便利なのですが、要素が複数ある場合はそのうちどれが返るかわからないという問題があります。`lower_bound` として使えるのは要素の重複がないことがわかっている場合のみです。
重複要素がある場合でも `lower_bound` や `upper_bound` を使いたいなあと思って自作しようかと思ったのですが、めぐる式二分探索があればどちらもいけるとわかって嬉しい、というのがこの記事でした。

なお `binarySearch` メソッドを使うことがなくなるかというともちろんそんなことはありません。競プロで使うことを想定すると、めぐる式二分探索の実装はいちいちコードをコピペしないと使えないので、 `binarySearch` メソッドで事足りるものは `binarySearch` メソッドを使います。
また、上記のめぐる式二分探索だと値がない場合は負の数が返るという動きはしません。（値がない場合は、仮にあった場合はこの位置のはずという正の値が返る）
なので単純に存在有無を確認したい場合などは `binarySearch` メソッドを使ったほうが便利です。うまく使い分けていきたいですね。
CodeIQ:「カウント・スリー」問題の解答

Kawazoe(@riverplus)さんのCodeIQの問題の解答です。
kawazoeさんの問題は、難しいけれど考えれば高度な技法を知らなくても解けそうと
感じ、探し出して解いてきましたので（ほぼ解いた順で）投稿しようと思います。
問題はこちらからご覧になれます。解答もあります。
->https://sw-logic.com/Portfolio/Programing/CodeIQ/3397.php
テストケースはこちらのお世話になりました
->https://noriok.hatenablog.com/entry/2017/10/01/232517
こちらにも情報があります。
->https://togetter.com/li/1156324

この問題は、プログラミング問題に興味を持つ前に偶々ネット上のどこかで見つけ、
面白そうなので解いてみました。最近kawazoeさんの問題と知りました。
問題を解いた時点ではテストケースもみあたりませんでしたので、
ある数に3がいくつ含まれているかのほうが簡単ですので、
たまたま思いついた二分探索に該当する方法を使って答えを担保し、
種々の数で答え合わせをしながら直接3の数から数字を求める解法を考えました。

①k*10^i~(k+1)*10^i-1までの最上位のkの数n2(i)=10^i
②0~10^i-1のkの数n1(i)=n1(i-1)\*10+n2(i-1)=i\*10^(i-1) (n1(1)=1)
③値がkの上位桁の数をmとすると、例えばkkbcの場合,
　kk00からkkbcまでの間のkの数は0からbcまでのkの数+m(=2)*bc個
等を用いて上の位からその位のkの数を求め、それをxから引き、
下の位に移ることをxが0になるまで繰り返して答えを求めます。
先頭の数字がkより小、k、kより大で分類します。

```Julia
#julia ver 1.41,1.53,1.73

function f(x,r)
    ans = g(x,3)
    s= ans == r ? "ok " : "no "
    println(s,ans)
end

function g(x,k)
   n = Int(floor(log10(x)+1))
   sum = m =  n1 = n2 = 0
   for i in n:-1:0
      n1 = i==0 ? 0 : i*10^(i-1)  #0~10^i-1のkの数
      n2 = 10^i            #k*10^i~(k+1)*10^i-1の最上位のkの数
      y=n1+n2*m            #上位にkがm個あるときの0~10^n-1までのkの数
      if x-1>=y
         if x <= y*k　　　　　#最上位がk未満
            d = div(x-1,y)　　　#最上位はd
            x = x-d*y　　　　　　　#d*10^iまでのkの数を引く
         elseif x <= n2+y*(k+1)　　#最上位がk
            d = k
            x = x-d*y　　　　　　　#最上位を除くd*10^iまでのkの数を引く　
            m = m+1              #値がkとなる桁の数
         else
            d = div(x-n2-1,y)　　　#最上位はd
            x = x-n2-d*y　　　　　　#最上位も含めd*10^iまでのkの数を引く
         end
         sum += n2*d　　　　　　　#d*10^iをたす　　
     end
   end
   return sum
end

f(5,31)
f(61,300)
f(231,636)
f(45609,88534)
f(1122334455,1273953249)
f(991357924680,811439945899)
```
Prologも同様です。
```Prolog
%Swi-Prolog v 7.4.2,7.6.4
%:-initialization(start3).  %ideone
%strat3.

gn3(_,X,N3,_,M,V,R):-   % Xが小さければ下の桁へ
    X-1<N3,!,R=[X,M,V].
gn3(K,X,N3,N2,M,V,R):-　　%最上位がk未満
    X =< N3*K,!,D is (X-1) div N3,X1 is X-D*N3,V1 is V+N2*D,R=[X1,M,V1].
gn3(K,X,N3,N2,M,V,R):-　　%最上位がk
    X =< N2+N3*(K+1),!,X1 is X - N3*K,V1 is V+N2*K,M1 is M+1,R=[X1,M1,V1].
gn3(_,X,N3,N2,M,V,R):-
    D is (X-N2-1) div N3,X1 is X-N2-N3*D,V1 is V+N2*D,R=[X1,M,V1].

fn3(_,_,-1,_,V,V):-!.
fn3(K,X,I,M,V,R):-　　%ループの部分を担当
    (I=:=0->N1=0;N1 is I*10^(I-1)),N2  is 10^I,N3 is N1+N2*M,
    gn3(K,X,N3,N2,M,V,[X1,M1,V1]),I1 is I-1,fn3(K,X1,I1,M1,V1,R).

solve3(X,C):-log10(X,X1),N is floor(X1+1),
    (fn3(3,X,N,0,0,R)->(R=:=C->Str=" ok  ";Str=" no  ");
    write(fail)),write(" "),write(Str),writeln(R),!.

start3:-f3(A,B),solve3(A,B),fail.
start3.

f3(5,31).
f3(61,300).
f3(231,636).
f3(45609,88534).
f3(1122334455,1273953249).
f3(991357924680,811439945899).
```
JSX備忘録②

## はじめに
JSXの備忘録です。
初心者です。
間違えてる部分多々あると思います。
よろしければツッコミいただけると助かります🙇

# 学習内容
## JSXの基礎文法①
* import React from 'react';が冒頭に必要。
* returnの中がHTMLと同じ
```jsx:sample.js
const BlueButton = () => {
    return (
        <button class name={'btn-blue'}>
            Click!
        </button>
    )
}
```
## JSXの基礎文法②
* キャメルケースで記述する（JavaScriptは-は使えないから文字と文字の間は次の文を大文字にする）
* {}内は JavaScriptの世界にできる。変数を扱える。
* 閉じタグが必要→一つのタグで完結する時に必要


### JSXの注意点
* JSXは必ず階層構造→並列にできない→一つの時には必要ない→2つ以上あるときのみ。
* React.Fragmentで階層を作れる→<React.Fragment></React.Fragment>

```js:sample.js
return(
    <React.Fragment>
        <p>A</p>
        <p>B</p>
    </React.Fragment>
)
```

```js:sample.js
return(
    <>
        <p>A</p>
        <p>B</p>
    </>
)
```

この二つは同じ結果となる（変換してる）→等意構文


## 押さえておくべき点
* JavaScriptの記述方法を使う
* {}内は JavaScriptの世界にできる
* JSXは階層構造になっている

## わからない言葉
### キャメルケース
className文字の間にハイフンなどを入れず大文字で記載するなど、JavaScriptの記述方法。

## 参考にしたサイト
[とらぜみさんのYouTube]（https://m.youtube.com/watch?v=gLbTluYSb_U&list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k&index=2&pp=iAQB）
[JSX公式ドキュメント](https://ja.reactjs.org/docs/introduci...)
Python unittest.mockのpatchでランダムな処理をテストする方法

# 概要

以下のようにランダムな処理を含む関数やメソッドを単体テストしたいときに、unittest.mockのpatchが使えます。

```Python
import random

def roulette(call_number: int) -> int:
    """
    1～10までの数字が書かれたルーレットで、数字を当てるゲームを表した関数
    """
    if random.randint(1, 10) == call_number:
        return 1000
    else:
        return 0
```

# 環境

- Python3.11

# unittest.mockを使わない場合の課題

概要に記載したコードを例に進めます。

すなおに処理を書くと次のようになります。ただ、`roulette()`内で`random.randint()`を使っているため、`roulette()`の引数として渡している数字と、`random.randint()`で返される数字が同じになるか不確実です。

```Python
import unittest
import roulette

class TestRoulette(unittest.TestCase):
    def test_equal_call_number(self):
        self.assertEqual(roulette(5), 1000)  # 5 == random.randint(1, 10)は不確実

    def test_not_equal_call_number(self):
        self.assertEqual(roulette(5), 0)  # 5 != random.randint(1, 10)は不確実
```

# unittest.mockのpatchを使う

unittest.mockのpatchはこのような場合に使えます。

```Python
import unittest
import roulette


class TestRoulette(unittest.TestCase):
    @patch("random.randint")
    def test_equal_call_number(self, mock_randint):
        mock_randint.return_value = 5
        self.assertEqual(roulette(5), 1000)  # 5 == random.randint(1, 10)は確実

    @patch("random.randint")
    def test_not_equal_call_number(self, mock_randint):
        mock_randint.return_value = 1
        self.assertEqual(roulette(5), 0)  # 5 != random.randint(1, 10)は確実
```

`@patch("random.randint")`とすると、`random.randint`のモック用インスタンスが返されます。これは`mock_randint`引数に代入されます（引数名は自由）。

その後、モック用インスタンスのインスタンス変数`return_value`へ戻り値にしたい値を入れます。
この戻り値は`random.randint`の戻り値となります。
そのため`mock_randint.return_value = 5`とすれば`random.randint(1, 10)`は必ず`5`を返します。

このようにすることで、ランダムな処理を含んでいる場合でも単体テストを行えます。


# 参考

[How can I test functions, which use random?](https://stackoverflow.com/questions/49886063/how-can-i-test-functions-which-use-random)
ランダムな処理を含む単体テストの例

[patch](https://docs.python.org/ja/3/library/unittest.mock.html#unittest.mock.patch)
Python公式ドキュメントunittest.mockのpatch

[Pythonのデコレータを理解するまで](https://zenn.dev/ryo_kawamata/articles/learn_decorator_in_python)
デコレーターに関する詳しい説明
colcon buildでエラー（Could not find ROS middleware implementation 'rmw_cyclonedds_cpp'.）

colcon buildでエラー（Could not find ROS middleware implementation 'rmw_cyclonedds_cpp'.）

```
--- stderr: autoware_utils                                                                                        
CMake Error at /opt/ros/humble/share/rmw_implementation_cmake/cmake/get_default_rmw_implementation.cmake:60 (message):
  Could not find ROS middleware implementation 'rmw_cyclonedds_cpp'.  Choose
  one of the following: rmw_fastrtps_cpp
Call Stack (most recent call first):
  /opt/ros/humble/share/rmw_implementation/cmake/rmw_implementation-extras.cmake:19 (get_default_rmw_implementation)
  /opt/ros/humble/share/rmw_implementation/cmake/rmw_implementationConfig.cmake:41 (include)
  /opt/ros/humble/share/rcl/cmake/ament_cmake_export_dependencies-extras.cmake:21 (find_package)
  /opt/ros/humble/share/rcl/cmake/rclConfig.cmake:41 (include)
  /opt/ros/humble/share/libstatistics_collector/cmake/ament_cmake_export_dependencies-extras.cmake:21 (find_package)
  /opt/ros/humble/share/libstatistics_collector/cmake/libstatistics_collectorConfig.cmake:41 (include)
  /opt/ros/humble/share/rclcpp/cmake/ament_cmake_export_dependencies-extras.cmake:21 (find_package)
  /opt/ros/humble/share/rclcpp/cmake/rclcppConfig.cmake:41 (include)
  /opt/ros/humble/share/ament_cmake_auto/cmake/ament_auto_find_build_dependencies.cmake:67 (find_package)
```

以下で解決した様子

```
sudo apt install ros-humble-rmw-cyclonedds-cpp -y
```

# 参考
https://github.com/ros2/rmw_cyclonedds
https://docs.ros.org/en/eloquent/Installation/DDS-Implementations/Working-with-Eclipse-CycloneDDS.html
https://answers.ros.org/question/412448/micro-ros-could-not-find-ros-middleware-implementation-rmw_cyclonedds_cpp/
Arduinoのコンパイルの高速化

最近ArduinoIDEのコンパイル時間がめちゃくちゃかかる。。。
下手したら2分以上かかってる。
はっきりいって困る。
はっきり言わなくても困るが。。。

ということで今回はArduinoIDEのコンパイル高速化を行ったのでその手順を記載。

## まずはArduinoIDEの設定


1、C:\Users\ユーザー名\AppData\Local\Tempフォルダに「arduino_build」フォルダを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/58c91b99-7c74-e9ba-df69-d113bc95779c.png)

2、ArduinoIDEの環境設定をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/f1a05378-9eb8-1f59-c9d9-0234c61faf5b.png)

3、ウィンドウ下にある「C:\Users\ユーザー名\AppData\Local\Arduino15\preferences.txt」をクリック。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/0bc200b9-5320-85e0-b161-b20ad7f210ca.png)

## コンパイルソフトのダウンロード
1、以下のURLから環境にあったファイルをダウンロード
（私の場合はWindows x86_64 binary release）
https://ccache.dev/download.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/f5c68424-d717-a706-f521-8d51c46ef67e.png)

2、解凍後「ccache.exe」ファイルをC:\Program Files (x86)\Arduinoフォルダ内に移動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/3eea9f9c-1c84-4871-8523-7ae01822a332.png)

## パスの設定
1、システムのプロパティを開き、環境変数をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/3e5c21ca-afad-664c-3808-6ed7e1394351.png)

2、ユーザー環境変数の「Path」を選択し、編集ボタンをクリック。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/e890ded5-89dc-f42a-b6db-45fd97f15c92.png)

3、新規で「C:\Program Files (x86)\Arduino」を追加。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/b46180b8-ed76-91d3-93a4-944c3d3e3fff.png)

## ArduinoIDEのビルド変更
1、C:\Users\ユーザー名\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.11の
フォルダを開いて、platform.txtを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/858ac232-8eaa-d63f-4744-64419780ba69.png)

2、Compile c filesとCompile c++ filesに「ccache 」を追記する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/cbcdfa9e-55bc-5bc4-71c9-ab1faf610139.png)

これで私は、コンパイル時間が半分以上早くなりました。

よかった。
JSX備忘録①

## はじめに
JSXの備忘録です。
初心者です。
間違えてる部分多々あると思います。
よろしければツッコミいただけると助かります🙇

## 学習内容
### JSXとは
* JavaScriptの拡張言語
* HTMLとJavaScriptを掛け合わせて使うことができる
* JavaScriptの中でHTMLを動かせるイメージ
* return(この中身がJSX)



```jsx:sample.js
const BlueButton = () => {
    return (
        <button class name={'btn-blue'}>
            Click!
        </button>
    )
}
```


### なぜJSXを使うのか？
* JavaScriptはReact.createElement()この構文を毎回使ってHTMLに出力→JSXを使うことでReact.createElement()を書かなくて良くなる。
* みやすい

```js:sample.js
React.createElement(
    'button',
    {class name: 'btn-blue'},
    'Click!'
)
```

```jsx:sample.js
return (
    <button class name={'btn-blue'}>
        Click!
    </button>
)
```

この二つは同じ結果となる（変換してる）→糖衣構文


### JSXはなにをしてるのか？
* React.createElementの式に変換してる。


## 押さえておくべき点
* JSXは JavaScriptとHTMLを掛け合わせたもの。
* めんどくさい構文を飛ばして記述できる。

## 用語
### HTMLライク
HTMLとは別の言語でHTML似た記述、記法をしてるもの。


## 参考にしたサイト①
[とらぜみさんのYouTube]（https://m.youtube.com/watch?v=gLbTluYSb_U&list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k&index=2&pp=iAQB）

## 参考にしたサイト②
[JSX公式ドキュメント](https://ja.reactjs.org/docs/introduci...)
UDPコンソール

mruby on YABMなターゲットでシリアルを接続しないで利用する場合UDPでメッセージを投げるのが便利です。

```ruby
begin

dist = "192.168.0.2"
port = 8080
str = "Hello"

yabm = YABM.new

yabm.netstartdhcp

yabm.udpinit

loop do
  yabm.msleep 10_000
  yabm.udpsend(dist, port, str, str.size)
end

rescue => e
  yabm.udpsend(dist, port, e.to_s, e.to_s.size)
end
```

192.168.0.2のFreeBSDやLinuxのホストで以下のようにするとメッセージが受信できます。

```
% nc -l -u 8080
HelloHelloHelloHelloHelloHelloHelloHelloHelloHello
```

蟹さんは電源投入時にリセットボタンでflashの書きこみモードにできるので、シリアルをつながなくても、使えます。

Planexの小さい蟹さんで試したところ、送信が止まってしまいます。なんでかな？DKM(だって蟹だもん)
エクセル起動時のスタート画面を無効化

# 概要

エクセル起動時に下記画面が表示されないようにしたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/f4ebd748-0de1-adf1-d4c6-2479072955b3.png)

毎度毎度『空白のブック』をクリックするのが手間。
エクセル起動したら空白のブックが即開く形でよい。

# やり方

『ファイル』。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/96d5c201-81e0-40b0-fe56-8380b36e4818.png)

『オプション』。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/e4ba6773-08f2-c014-01c4-ba1ae26289b1.png)

『全般』。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/69128121-77c9-c78d-7dfd-a1f1ac0f7b1b.png)

『このアプリケーションの起動時にスタート画面を表示する』をオフに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/70a9e19a-a742-579f-f336-c1a8772355b8.png)

# 参考サイトさん

https://support.microsoft.com/ja-jp/office/excel-%E8%B5%B7%E5%8B%95%E6%99%82%E3%81%AB%E7%89%B9%E5%AE%9A%E3%81%AE%E3%83%96%E3%83%83%E3%82%AF%E3%81%BE%E3%81%9F%E3%81%AF%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E9%96%8B%E3%81%8F-be9cddc1-a148-4cbf-8f3b-779df08957a3

# バージョン

Microsoft Windows [Version 10.0.19045.3636]
Microsoft Excel for Microsoft 365 MSO (バージョン 2310 ビルド 16.0.16924.20054) 32 ビット
Debian11にDocker Engineをインストールする

# パッケージを更新する
```
sudo apt-get update
```

# 必要なパッケージやツールをインストールする
以下のパッケージやツールをインストールします。
|名前|説明|
|:-:|---|
|ca-certificates|証明書関連のパッケージ|
|curl|HTTPなどでファイルをダウンロードするツール|
|gnpupg|デジタル認証を行うためのツール|
```
sudo apt-get install ca-certificates curl gnupg
```

# PGPキーを保存するディレクトリを作成する
```
sudo install -m 0755 -d /etc/apt/keyrings
```

# PGPキーを登録する
```
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
```

# リポジトリに追加する
```
echo \
  "deb [arch="$(dpkg --print-architecture)" signedby=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

# リポジトリを更新する
```
sudo apt-get update
```

# Dokcerをインストールする
```
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

# Doker Engineを起動する
```
sudo systemctl enable docker
```

以上です。

# 参考
https://docs.docker.com/engine/install/debian/
ITSM運用よく受ける問い合わせ

最近入ってる案件では新規開発と運用ヘルプデスクをやっております。新規開発に関しては制約上書けることはあまりないので、今回はヘルプデスクで受ける問い合わせをリストアップしました。
これらをまとめてFAQとしてKnowledgeにおいておくと運用工数削減になるかもしれません。

1.ログインできません
2.（Knowledge）記事が見れません
3.（社内手続）手順を教えて下さい
4.レポートでの使い方教えて下さい
5.ダッシュボードの使い方教えて下さい
6.フォーム上（多くはステータス）の定義を教えて下さい
7.レポートでxxxを出したいです
8.ポータルのxxx（ウォッチリストとか）が使いにくいです
9.外部連携したいため、データ下さい
10.通知多すぎ、少なすぎどうにかして
11.レポートの適切なフィルター条件を知りたい（時間計測目的）

開発者目線とヘルプデスク目線では色々と違うなぁと視点（ログイン、ナレッジ、レポート、ダッシュボード）が違うところの知識の深まりはあるのかなと思います。ここらへんを踏まえたFAQ作成をすると問い合わせ削減に直結するのではないでしょうか。
デプロイ方法について

# はじめに
プロジェクトをGitHubにpushして、デプロイ先のさくらサーバにログインして GitHub上のプロジェクトを clone(or pull)することでデプロイができるようにしていく。

# デプロイサーバー設定
「さくらのレンタルサーバ」サービスサイト（http://www.sakura.ne.jp）にアクセスする。
＝＞お申込み＝＞さくらのレンタルサーバ スタンダード
＝＞希望の初期ドメインの入力＊支払方法は銀行振込を選択（自動課金防止）
＝＞登録後コントロールパネルで以下のことを確認
・スクリプト設定 → 言語バージョン設定 → PHP を 8 に変更
・web サイト/データ → データベース → 新規作成
・DB 作成
・ドメイン/SSL → 設定 →HTTPS 転送（チェックを入れる）→ 保存

# AWSのクラウド環境でのSSHkeyの設定
```
$ cd ~
$ ls -a
$ mkdir .ssh　（`.ssh` フォルダが存在しない場合は、作成）
$ cd .ssh
```
SSH 鍵ファイル作成
（ファイル名は既定のまま、パスワードは空欄でEnter）
```
$ ssh-keygen
$ cat id_rsa.pub
```
その後、GitHubで、「設定」「SSH keys」「Add SSH key」で入力画面へ。公開鍵はどのPCで発行したものか判別できるようにしておくべし。
```
$ cd ~
$ cd environment/~
$ git config --global user.name "YOUR_GITHUB_ACCOUNT_NAME"
$ git config --global user.email "YOUR_GITHUB_EMAIL"
$ git config --global init.defaultBranch main
```
GitHub 上に新規リポジトリを作成後（SSHのURLを控える）
```
$ git init
$ git add .
$ git commit -m "init"
　（ リポジトリの URL （SSH）を設定してpushする．）
$ git remote add origin YOUR_REPOSITORY_URL
$ git push origin main
```

# ターミナルでさくらサーバーにログイン
```
$ ssh アカウント@サーバ名
```
サーバパスワードを入力

### 初期のシェルを変更しておく。

```
% chsh -s /usr/local/bin/bash
Password:
chsh: user information updated
（完了後ログアウト）
% exit
```
＊ターミナルが＄になっていることをチェックしておく。

# デプロイサーバーとgithubのSSH通信の設定
githubの情報をデプロイサーバーに反映できるようにする。
#### サーバーでSSHkeyの発行
```
$ cd ~/.ssh
$ ssh-keygen
$ cat id_rsa.pub
gihhubにSSH keyを登録
```
# githubのコードをデプロイ先に反映
#### サーバーでcomposer 用ディレクトリの作成とダウンロード
##### パスを通す(viに注意　）
下記コマンド実行
```
export PATH=$PATH:~/bin
```
.bash_profileを開き，設定ファイル編集
```
$ vi ~/.bash_profile
```
.bash_profileに以下を追記
```
export PATH=$PATH:~/bin
```

https://qiita.com/sgash708/items/65236bf7885a8f3bc28e

## サーバーで　Laravel の準備
laravelのインストーラーを入れる。
```
$ cd ~
$ composer global require 'laravel/installer'
```

#  github上のコードをデプロイ！！！！！
```
$ git clone YOUR_REPOSITORY_URL project
$ cd project
$ composer update
$ composer install
```
#### DBの設定
```
$ cp .env.example .env
$ vi .env
```
env.の書き換えをする。
（viにご注意！！ここで時間を溶かされました。）
```
DB_CONNECTION=mysql
DB_HOST=データベースサーバー（例　mysql57.hoge.sakura.ne.jp ）
DB_PORT=3306
DB_DATABASE=データベース名
DB_USERNAME=ユーザ名
DB_PASSWORD=DB作成時に決めたパスワード
```
設定ができたら、マイグレーションを実行して、DBの設定を反映
```
$ php artisan migrate
$ php artisan key:generate
```

最後のJSやCSSが動くように、コマンドを打つ。
```
$ npm run build
```

ビルドファイルを GitHub に push できるよう 
.gitignore を編集（/public/build 部分をコメントアウト）
```
# /public/build
```

このコマンドは、何度も利用する。
pullをして反映ができていたら成功
```
$ cd ~/project
$ git pull origin main
```
mainの部分は、他のブランチ（developなど）でも対応可能
試してみると良い。

# まとめ
 作業の手順が多いので、覚えておくことは難しいが、作業で何をしているのかを理解しておくことが重要だと思う。別のサーバーを利用したり、サーバーを構築したりなど他の手段も試していきたい。
Pythonで「スライスを使って文字列の指定範囲の部分文字列を取得する」の動作を確認してみた

# 概要

Pythonで「スライスを使って文字列の指定範囲の部分文字列を取得する」の動作を確認してみました。以下のページを参考にしました。

https://www.javadrive.jp/python/string/index11.html

# 実装

以下のファイルを作成しました。
```sample.py
str = "Flower"
print(str[1:4])
print(str[2:6])
print("Flower"[:3])
print("Flower"[4:])
print("Flower"[:])
print("京都府京都市左京区吉田本町"[1:12])
print("京都府京都市左京区吉田本町"[1:12:2])
str = "京都府京都市左京区吉田本町"
print(str[1:12])
print(str[1:12:2])
print(str[1:12:3])
```

以下のコマンドを実行しました。
```
$ python3 sample.py
low
ower
Flo
er
Flower
都府京都市左京区吉田本
都京市京吉本
都府京都市左京区吉田本
都京市京吉本
都都京田
```

# まとめ

何かの役に立てばと。
【勉強用】Gitのコマンドを実際に動かしてみた（④タグ編）

# はじめに

今回はGitのコマンドを実際に動かして、バージョンの確認や変更について理解を深めたいと思います。参考図書はこちらの[**動かして学ぶ！Git入門**](https://www.shoeisha.co.jp/book/detail/9784798170855)を使用しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3523467/927467bd-3ee8-bff3-c016-81d24c7d4cb0.png)

# コマンド

### 28. git tag
このコマンドはコミットに対して軽量タグを付与する際に使用するコマンドです。具体的には以下の種類があります。

>**git tag**：タグの一覧を確認する
>**git tag タグ名**：HEADに指定のタグ名を付与する
>**git tag コミット名　タグ名**指定のコミットに、指定のタグ名を付与する

それでは、`main`ブランチのHEADに`v1.0`というタグ名を付与してみましょう。
```Git:Git Bash
$ git show
commit b79fc143954f94225a3527c3e9fa72d31efa8496 (HEAD -> main, tag: v1.0) #タグ名が確認できる
Merge: 8ba08a1 1ca01f9
Author: HANAKO <hanako@sample.com>
Date:   Sat Nov 4 07:07:50 2023 +0900

    resolve conflict

diff --cc hello.txt
index e75d1e7,598d37b..3395ded
--- a/hello.txt
+++ b/hello.txt
@@@ -1,4 -1,4 +1,5 @@@
  hello!
  Hello, everyone!
  Have a nice day !
- Yeah !
 -Hoo !
++Yeah !
++

```
無事にタグ名を付与できましたね。

### 29. git tag -d タグ
このコマンドはタグを削除する際に使用するコマンドです。

それでは`hello.txt`に新たに`Very Nice !`という文章を追加し、コミットを行います。そのコミットに対して`v2.0`というタグ名を付与します。そのタグを削除してみましょう。

```Git:Git Bash
#hello.txtにVery Nice！という文章を追加
$ git add hello.txt
$ git commit -m "commit Very Nice !"
[main 36c7012] commit Very Nice !
 1 file changed, 1 insertion(+)

$ git show
commit 36c7012f78f1b1f8fd038a2a313ee188ba7c5206 (HEAD -> main, tag: v2.0)　#タグ名を確認
Author: HANAKO <hanako@sample.com>
Date:   Sat Nov 4 09:08:18 2023 +0900

    commit Very Nice !

diff --git a/hello.txt b/hello.txt
index 3395ded..2ed56f5 100644
--- a/hello.txt
+++ b/hello.txt
@@ -2,4 +2,5 @@ hello!
 Hello, everyone!
 Have a nice day !
 Yeah !
+Very Nice !

$ git tag -d v2.0
Deleted tag 'v2.0' (was 36c7012)

$ git show
commit 36c7012f78f1b1f8fd038a2a313ee188ba7c5206 (HEAD -> main)　#タグが無くなっていることを確認
Author: HANAKO <hanako@sample.com>
Date:   Sat Nov 4 09:08:18 2023 +0900

    commit Very Nice !

diff --git a/hello.txt b/hello.txt
index 3395ded..2ed56f5 100644
--- a/hello.txt
+++ b/hello.txt
@@ -2,4 +2,5 @@ hello!
 Hello, everyone!
 Have a nice day !
 Yeah !
+Very Nice !

```
無事にタグを削除できました。
# まとめ



今回の記事では、タグの操作を中心に学習しました。次回はリモートリポジトリの扱いについて学習したいと思います。

[**前回：【勉強用】Gitのコマンドを実際に動かしてみた（③ブランチ編）**](https://qiita.com/Yuhei0531/items/f6b3163a9115be5a6e27)
[**次回：【勉強用】Gitのコマンドを実際に動かしてみた（⑤リモートリポジトリ編）**](https://qiita.com/Yuhei0531/items/889360339bf6d16b46c0)

# 参考文献
[動かして学ぶ！Git入門](https://www.shoeisha.co.jp/book/detail/9784798170855)
DataDog Notebooks を活用して勉強する

# tl;dr

- [Datadog Advent Calendar 2023](https://qiita.com/advent-calendar/2023/datadog) の５日目です
- DataDog の勉強方法がわからないという話を聞いた
- Notebooks って意外と活用されてないっぽい
- 使い方の１つとしてこうやってまーす、でも紹介しておくか
- DataDog Notebooks はいいぞ

# DataDog Notebooks とは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/5537bec1-df82-696b-f325-d60a40af8d92.png)

- ドキュメント -> [ノートブック](https://docs.datadoghq.com/ja/notebooks/)
- 左メニューの下のほうにある
- DataDog のメトリクス等を参照するのに特化した、コードが書けない Jupyter Notebook だと思って大丈夫
- 縦に並べるしかない劣化版ダッシュボードと言い換えても同じ
    - ダッシュボードはサイネージ化できる（Notebookはサイネージには向いてない）
    - ダッシュボードで使えるウィジェット＞Notebookで使えるウィジェット
- とはいえメリットもたくさんある
    - 縦に並べて置くことで、時系列中の各メトリクスの値動きがわかりやすい（こともある）
    - テキストウィジェットがダッシュボードのものより遥かにいい
    - 見た目より順番が重要
    - スナップショットが設定できる
    - タイプが設定できる![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/0af9de44-ba3a-efac-a186-89fb9d114987.png)

# 使い方

- 前述したタイプのとおりの使い方ができる
- マークダウンで説明を記述することができて、ドキュメントとして使うとオンボーディング資料にすることすらできる
- 習うより慣れろって言うし、使ってみるのが早い

# 例とか案とか

## メトリクスを分離して表示

- 初学者におすすめ１
- DataDog のグラフ機能で何ができるかを知る（Metrics Explorerで同じことができるが残しておけない）
- メトリクスをタグ等で分けて別のグラフとして表示できるので分析等に役立つ
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/bd7ff68b-3d73-4b75-761a-b51dc1f9da9a.png)

## 同系統のメトリクスを並べる

- 初学者におすすめ２
- メトリクスの構造等を理解するのは運用監視の基本
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/10650469-8975-e238-a817-abfb1bd969e5.png)

## ウィジェットを並べる

- 初学者におすすめ３
- 見せ方を理解するために、単一のメトリクスについて異なるウィジェットで表示してみる
- 単純に楽しいｗ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/d78fa766-f339-2d5a-f5e1-3a64ec92a7ad.png)


## 〇〇を知るノート

- 中級者におすすめ
- AWS インテグレーション等で Lambda や API Gateway のメトリクスを取得している場合、関連のメトリクスが取得できているはずなので、前述の同系統メトリクスを並べるのと同じ要領で並べる
- ダッシュボードのテンプレートで手抜きするより勉強になる
- いったんメトリクスを並べた後で、variables を後付けして、全グラフに適用する、を覚えるとすげぇってなる（個人の感想です）
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/3f32492a-0243-fe14-ac1b-0cd3cd496a6e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/c5a915d7-ec93-0643-725e-478d1bbea2c6.png)

# まとめ

- terraform では直接管理できない（Providerにリソースがない）のは残念
- でもエクスポートはできるので、自分用の研究ノートブックを作っておくとよい
- Notebook をたくさん作って DataDog を遊び尽くしましょう！ｗ
Monitor Summary Widgets について

# tl;dr

- [DataDog Advent Calendar 2023](https://qiita.com/advent-calendar/2023/datadog)の3日目の記事です
- 難しいことは他の人がやってくれると思うので、せっかくのアドカレを初学者の人にも楽しんでもらいたく、簡単なことを書くことにしました
- 組織で DataDog を活用していて利用者が増えると、管理されていない監視リソースが増えます
- なので、いずれ整理が必要になると思います
- 個人的にこの整理を治安維持活動と名付けていて、通常時運用における改善活動の一環として、具体的な作業内容、方法の確立と知見の言語化をすすめています
- というわけで [Monitor Summary Widget](https://docs.datadoghq.com/dashboards/widgets/monitor_summary/) をダッシュボードに置いておきましょう

# Monitor Summary Widget とは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/29cb0764-a1f7-14fc-c5bb-9399a100466a.png)

- モニターの概要を表示するウィジェットです
- ダッシュボードではウィジェットリストの下のほうにあります
- ノートブックでは表示できません（SLO Summary は表示できるのにね）
- OK 以外のステータスのモニターを正していくことで治安維持に繋がります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/e7a86526-7c9f-e324-f4ce-4bb9009bae1a.png)

- Monitors ページのこの部分と一致するべきだと思うんだけど、トリガーの状態によって常に変化するので必ずしも一致、とはいかないらしい（サマリーだしね）
- じゃあ Monitors ページ見たほうがいいじゃん？って言われたらそれはそう（それはそれこれはこれ）


# 設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44420/6f42ce72-d8a1-e6d8-b271-f207ac163c16.png)

- 画像のように設定しておくと見やすいです


# 治安維持活動メモ

- OK 以外のステータスのモニターを確認して必要な措置をとる（通常の監視運用）
- 単一のインスタンスやリソースを確認しているようなモニターを改善する（高度な監視設計）
- モニターの優先度、閾値、通知先、担当者などを確認してコード化を推進する（IaC）
- 活用されていないモニターの削除は積極的に行う

# まとめ

- というわけで [Monitor Summary Widget](https://docs.datadoghq.com/dashboards/widgets/monitor_summary/) をダッシュボードに置いておきましょう
2023年の terraform-jp 振り返り

# tl;dr

- この記事は[terraform Advent Calendar 2023](https://qiita.com/advent-calendar/2023/terraform)の1日目です
- [terraform-jp](https://join.slack.com/t/terraform-jp/shared_invite/enQtNTM2NTYzNDY0OTkyLTcxOTYxNmZhZmU3ZGIzOWU3M2RiODkyZTRmZTc0MjEwNjQ1NjMyZDAwMTExODc3MzkxNjAwNmU5ZDY1MTg3YTA) は昨年に引き続きオンライン以外の活動ができませんでした
- 来年こそ（去年も一昨年も言った）、[2019年に書いた記事](https://qiita.com/raki/items/96691d45922dd25e1365)のやりたいことをやっていきたいと思います

# 活動報告

- 2023年のオフライン活動はありませんでした（フルリモートに慣れすぎてオフラインミーティングを開催する元気ががが）

# terraform では

- v1.4.0 は2023年3月にリリースされました
- v1.5.0 は2023年6月にリリースされました
- v1.6.0 は2023年8月にリリースされました（ライセンスの変更がありました）
- 執筆時点（2023年11月3日）での最新は v1.6.3 です（12月1日時点では v1.6.5）
- v1.7.0 は現在アルファ版です

# ライセンス変更と OpenTofu について

- terraform のライセンス変更については特に言及する予定はありません（既にたくさんの良記事があります）
- [OpenTofu](https://opentofu.org/) に関しては、話題として避けはしませんが積極的に関与する予定もありません
- terraform-jp は terraform の非公式なユーザグループの１つとして terraform を応援しています

# その他の HashiCorp 製品では

- [HCP](https://cloud.hashicorp.com/) は waypoint がベータのままですが、[新しいビジョンが提示](https://www.hashicorp.com/blog/a-new-vision-for-hcp-waypoint?product_intent=waypoint)されています
- [HashiCorp Cloud Engineer Certifications](https://www.hashicorp.com/certification) の terraform 試験は 003 になっています

# 来年は

- 来年こそオフラインミーティングを復活させたい
- 関連ツールやSaaSとも積極的に連携していきたい

# 最後に

[terraform-jp](https://join.slack.com/t/terraform-jp/shared_invite/enQtNTM2NTYzNDY0OTkyLTcxOTYxNmZhZmU3ZGIzOWU3M2RiODkyZTRmZTc0MjEwNjQ1NjMyZDAwMTExODc3MzkxNjAwNmU5ZDY1MTg3YTA) を参加している人たちみんなでもっと盛り上げていけるようにしたいと思います。
って毎年同じこと言ってるジャン。。。_no