OmniAICreator/Qiita-1.07M huggingface dataset:
金額をカンマ区切りで表示したい

## やりたい事
javascriptで、金額を3桁のカンマ区切りで表示したい！！

## toLocaleString()を使う
toLocalesString()関数を使うことで簡単に実現できます。

`数値.toLocaleString(locales, options);`
　→　localesやoptionsは指定せずとも使用可能です。
　　　その場合、既定のロケールと既定のオプションの整形された文字列が返されます。


日本語、ドイツ語、ロシア語など[**ロケール**](https://kotobank.jp/word/%E3%83%AD%E3%82%B1%E3%83%BC%E3%83%AB-10071)の指定もでき、その数値を表す言語依存の文字列を返します。

```JavaScript
let price = 10000;
price.toLocaleString();

console.log('¥', price);
// >>> ¥10,000
```

#### 引数について
**locales**
localesを設定することで、指定したロケールに合わせた形に変換できます。
```javascript
let price = 10000;

// アラビア語表記で表示
console.log(number.toLocaleString('ar-EG'));
// >>> ١٢٣٤٥٦٫٧٨٩

// インド語表記で表示（インド語では、thousands/lakh/croreの区切りを用いるようです）
console.log(number.toLocaleString('en-IN'));
// >>> 1,23,456.789
```

**options**
optionsを設定することで、返ってくる値をカスタマイズすることができます。
```javascript
let price = 10000;

// ¥マークを付ける(styleにて「通貨」表示を指定、currencyにて通貨コードを指定）
console.log(price.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// >>> ¥10,000
```

#### ブラウザ互換性
![スクリーンショット 2023-05-05 5.39.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/ad471417-191b-90e4-894a-4cb3151191bf.png)
Edgeでは、実装時に注意しなければならないようですが、それ以外のブラウザではしっかりサポートされているようなので、toLocalesString()は安心して使えそうです！
[Mdn web docs - ブラウザ互換性](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)

## 参考
[Mdn web docs - Number.prototype.toLocaleString()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Browser_compatibility)
[Mdn web docs - Intl.NumberFormat() コンストラクター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
RubyでAtCoder ABC268(A, B, C)を解いてみた

# はじめに
Webエンジニアを目指して、RubyやRailsをいじってます。
今回は、RubyでAtCoder ABC268のA, B, Cを解きました。備忘録として解き方をまとめていきたいと思います。

# A - Five Integers
https://atcoder.jp/contests/abc268/tasks/abc268_a
```ruby:a-268.rb
puts gets.split.uniq.size
```
## 解説
uniqメソッドで重複を取り除いた後の大きさを出力すればOKです。

# B - Prefix?
https://atcoder.jp/contests/abc268/tasks/abc268_b
```ruby:b-268.rb
# 修正前
s = gets.chomp.chars
t = gets.chomp.chars

s.each_with_index do |factor, index|
  if factor != t[index]
    puts "No"
    exit
  end
end
puts "Yes"
```
```ruby:b-268.rb
# 修正後
s = gets.chomp
t = gets.chomp[0, s.size]
puts s == t ? "Yes" : "No"
```
```ruby:別解
s = gets.chomp
t = gets.chomp
puts t.start_with?(s) ? "Yes" : "No" 
```
## 解説
先頭から順にsとtが一致しているか調べていき、途中で一致しないものがあればNoを出力して終了、すべて一致していればYesを出力します。

# C - Chinese Restaurant
https://atcoder.jp/contests/abc268/tasks/abc268_c
```ruby:c-268.rb
n = gets.to_i
m = gets.split.map(&:to_i)

count = Array.new(n, 0)
n.times do |i|
  j = m[i] - i
  count[(j - 1) % n] += 1
  count[j % n] += 1
  count[(j + 1) % n] += 1
end
puts count.max
```
## 解説
（[公式解説](https://atcoder.jp/contests/abc268/editorial/4776)を参考にしました）

演算数を減らしてより高速にしています。

https://qiita.com/shoya15/items/50fd17e37d7c64f2b166
Run an alert when kintone value changes

## Alert on changes when editing a record.

![スaaaクリーンショット 2023-05-04 5.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3341719/41eca70c-4673-99fc-8901-e110132d7422.png)


```javascript
(function() {
  'use strict';

  // Data retention before editing
  let fruit_name;
   const RecordCheck = function(event) {
    fruit_name = event.record.fruit_name.value;
  }
  // Compare data on save
  const updateRecord = function(event) {
    if(fruit_name === event.record.fruit_name.value ) {
      console.log('No change in value')
    } else {
      // Execute when value changes
      alert('there was a change in values');
    }
 }

  const eventlist = [
    'app.record.edit.submit.success'
  ];
  kintone.events.on(eventlist, updateRecord);

  const eventlists = [
    'app.record.edit.show'
  ];
  kintone.events.on(eventlists, RecordCheck);
 
})();
```
If you modify the part that says "alert('there was a change in values');" there are many applications that could benefit from it.

For example, you can run your program only when the value of a field changes.
kintoneのレコードの保存の際に変更があれば処理を行う。

## レコードの編集時に変更があればアラートを出す。

![スクリーンショット 2023-05-04 4.54.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3341719/0621d875-99d8-f308-bf14-502cbaa37047.png)



```javascript:aaaa
(function() {
  'use strict';

  // 編集前のデータ保持
  let fruit_name;
   const RecordCheck = function(event) {
    fruit_name = event.record.fruit_name.value;
  }
  // 保存時のデータと比較
  const updateRecord = function(event) {
    if(fruit_name === event.record.fruit_name.value ) {
      console.log('値に変更はありません')
    } else {
      // 差異があれば実行
      alert('値の変更がありました');
    }
 }

  const eventlist = [
    'app.record.edit.submit.success'
  ];
  kintone.events.on(eventlist, updateRecord);

  const eventlists = [
    'app.record.edit.show'
  ];
  kintone.events.on(eventlists, RecordCheck);
 
})();
```
アラートを出している所のコードを書き換えれば、色々応用が効くと思います。

例えば、特定のフィールドの値に変更があった時のみにプログラムを動かすことができます。
VMware上のAndroid-x86で画面が真っ暗になった際の復帰方法

Android-x86は設定を変更していないと黒い画面になってしまい、画面クリックやキーボード操作がうんともすんとも言わなくなることがありますが

(↓こんな感じ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185453/4507ff9e-fd2e-ad6c-9caf-2fd03ca50569.png)

これは内部的にスリープに突入しているだけなので、ある部分を突くだけで簡単にスリープ復帰させることができます。
## Ctrl + Alt + Del が物理電源ボタンの代わりになる(っぽい)
VMware Workstation 17 Playerで言えば左上のボタンがそれです。ここをクリックするだけで元の画面に戻ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185453/b169a0f6-6723-6e71-c694-09cc89284e89.png)

ちなみにですが画面が表示されている状態でCtrl + Alt + Delすると、右側から終了オプションのメニューがでてくるのでこっから電源を切るを選択すれば正攻法でシャットダウンできます。他の再起動などの操作も同様にここからできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185453/287ffc07-da05-ddf3-469b-3605daa3a7a4.png)

~~スリープボタンはたまにバグることがあるっぽいので気を付けたほうがいいかも...~~
オレオレ Markdown ドキュメントライティング御作法

## 1. この記事について

今日のソフトウェアエンジニアは、さまざまな場面で Markdown 形式でドキュメントを記述する機会があると思う。Readme をはじめ、会議の議事録やちょっとした自分用メモにも Markdown で書くことがあるのではないだろうか。Markdown の良いところとしては、明示的に構造化した文章を作成できることや、フォーマットを効かせることができたり、(単なるテキストとして記述する場合は難しい)lint を効かせることができるなど、数えれば枚挙にいとまがない。
このような Markdown の利点を活かしつつ楽しいドキュメントライフを送るために、私が日頃注意していることをまとめたので、誰かのお役に立てれば幸いである。

## 2. 前提
- 普遍的な正解を示すものではなく、一定のルールに沿ってドキュメンティングすることで、表記の揺れをなくし、読み手に意図を伝えやすくする。
- 必ずしも筆者が実践できているとは限らないが、少なくともこうしたい、と考えている。
- まだまだ品不足だが、今後気がついた時に追記していく予定。

## 3. お品書き

### 3-1. 強調の使い分け(`ハイライト` / **太字** / 「カッコ」)

| 種類 | 使い分け |
|:-:|:-:|
| `ハイライト`  | 数値や文字列などの変数値。ユーザーが入力する(と想定される)項目や、コンピュータが出力する値で毎回異なるもの、記号など、パスなど客観的な値  |
| **太字**  | 上記以外で強調したい値、文言、操作など(主観的な視点)  |
| 「カッコ」  | 上記以外で強調したい値、文言、操作など(客観的な視点)。引用、参照など  |

ハイライトとそれ以外はよくどちらを使用すれば良いのか判断に困ることがあり、実際(Markdown ではないが) Slack などのコミュニケーションにおいても、**困ったらハイライトで強調する**という事象が見られること多いように感じる。上記ルールを踏襲するならば、以下の二つは適切ではない、なぜなら、強調部分が私の主観が入ったものだからである。

- ...Slack などのコミュニケーションにおいても、`困ったらハイライトで強調する`という事象が...
- ...Slack などのコミュニケーションにおいても、「困ったらハイライトで強調する」という事象が...


### 3-2. ヘッダー/リストの構成について
- h1 は一つのみ、h2 以下は複数存在する。
- ヘッダーには番号をふる。

```
## 1. h2ヘッダー1 です
### 1-1. h3ヘッダー1-1 です

## 2. h2ヘッダー2 です
### 2-1. h3ヘッダー2-1 です
- 2-1-1. リスト2-1-1 です
- 2-1-2. リスト2-1-2 です
### 2-2. h3ヘッダー2-2 です

## 3. h2ヘッダー3 です
```

「ヘッダーには番号をふる」 については、文章を構造的に理解しやすくなるという Markdown の恩恵を最大限活用するために、**番号振る方が圧倒的に読みやすくなる**。また、ヘッダーのみを抽出するとそれをそのまま目次として使用することも可能になるため一石二鳥である。

### 3-3. コードブロック

- シンタックスハイライトが効くようにする(Qiita ではコードブロック開始の「```」の直後にフォーマットを指定することが可能)
    - 例: TypeScript の場合


```user.ts
interface User {
  name: string;
  id: number;
}
```

- コマンドの場合 `$` をつけることのメリデメを考慮する。
    - メリット: ぱっと見ですぐにコマンドであることを認識しやすい。
    - デメリット: 完全なコピペを許容しない(`$`が含まれるためペースト後取り除く必要がある)

```sh
# $あり
$ npm install

# $なし
npm install
```

### 3-4. リンク

#### 3-4-1. リンクテキスト

リンクを貼る時は、`[タイトル](URL)` の形式で指定のテキストを記述できる。

>[Qiita の Markdown ページ](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF)

この場合、URL がわからないため、意図的に URL を見せたい場合[^1]は `[URL](URL)` の形式にすることで、生の URL 文字列をリンクテキストとして使用できる。(直接 URL を記述しないのは、Qiita の場合 リンクカードとして認識されるからである)

>[https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF "タイトル")

[^1]: 例えばリンク先に遷移する前に、ドメイン名をあらかじめ知りたいときなど

#### 3-4-2. リンクカード

Qiita では、適宜リンクカードを利用することで、参照記事を強調することができる。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d#%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%AB%E3%83%BC%E3%83%89


### 3-5. その他 Markdown に関わらず一般的な話題

#### 3-5-1. 文体について

- 完全に好みの問題であるが、「ですます」調より「である」調を推したい。単純に文章量が削減されるのと、キリッとした印象が好きだからである。しかし、一番大事なのは、TPO をわきまえた選択をするということであろう。例えば、ビジネス上のお客さんに見せるためのドキュメントなどでは、「ですます」調にしたほうが読み手に好感を持たせられるかもしれない。
- ヘッダーは体言止め、本文は完全な文体(「である」調)、とすることで**アクセントが出て文章にリズムが生まれる**。

#### 3-5-2. コロンの効果的使用

本来コロン(`:`)は英語などの文章において、「以下に例を挙げますよ」「以下に理由を挙げますよ」ということを伝える役割などがある。日本語の文章では正式に使用されるものではない? かもしれないが、いわゆる句読点(`、`や`。`)よりも意図が伝わりやすい場合は積極的に使用する。

- 私の好きな果物は3つです: すなわち、みかん、りんご、そしてブドウです。
- 私の好きな果物は3つです。すなわち、みかん、りんご、そしてブドウです。
- 私の好きな果物は3つです、すなわち、みかん、りんご、そしてブドウです。
TypeScriptでHelloWorldプログラムを実装してみた

# 概要
TypeScriptでHelloWorldプログラムを実装して動作を確認してみました。
以下のページを参考にしました。
https://udemy.benesse.co.jp/development/system/typescript.html

# 環境構築
今回はローカルにインストールして試してみました。tscを相対パスで実行できます。
```
$ npm install typescript
$ ./node_modules/typescript/bin/tsc -v
Version 5.0.4
```

# 初期化
JSONファイルを生成しました。
```
$ ./node_modules/typescript/bin/tsc --init

Created a new tsconfig.json with:                                               
                                                                             TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig
```

# ソースコード（sample.ts）の作成
ソースコードを作成しました。上記のページのソースコードを参考にしました。
```sample.ts
let message: string = "Hello World!"
console.log(message)
```
# プログラムを実行
実行しました。
```
$ node sample.js 
Hello World!
```
うまく動いているようです。

HTMLにも埋め込んで実行もできるようです。試してみました。

# ソースコード（sample2.ts）の作成
```sample2.ts
let message: string = "Hello World!"
/* document.body.innerHTML(message) */
document.body.innerHTML = message
```
コメントアウトしているコードはうまく動きませんでした。書き方が変わったのかな。
# HTMLを作成
```sample2.html
<!DOCTYPE html>
<html>
<head><title>htmlで表示する例</title></head>
             <body>
<script src="sample2.js"></script>
</body>
</html>
```
# ブラウザで実行
Chromeでsample2.htmlを開くと以下のように表示されました。
![Screenshot from 2023-05-04 03-21-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/92dd62af-882c-9461-3b53-5d7d0c9f458e.png)

うまく動きました。何かの役に立てばと。
GoogleスプレッドシートでJ-Quants APIを使ってみる

GoogleスプレッドシートでJ-Quants APIを使って企業情報を取得するデモです。

# J-Quants とは

日本取引所グループが提供している証券情報APIです。ユーザー登録することで企業情報をAPIで取得できるようになります。この手のAPIは手軽に使えるWebAPIが存在しないので、このようなサービスはとてもありがたいです。（探しきれてないだけかもしれない）

ただし、無料プランだと2週間前のデータからしか取得できません。リアルタイムの株価情報などを取得する場合は課金する必要があります。

# Googleスプレッドシートの独自関数

Googleスプレッドシートでは、紐づくGASに定義された関数を呼び出すことができます。今回はJ-Quants APIを作ってその関数を呼び出してみましょう。

## 紐づくGASの設定

スプレッドシートから「拡張機能」＞「Apps Script」を選択し、エディタを起動します。

![スクリーンショット 2023-05-04 2.10.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59468/21101f8c-e6ff-8efa-7c2a-2c0a6876230f.png)

「ライブラリ」に `1fQcntI2lJBbiqfz1IaXLNOuJ8Z3IUuD5xiTsqfBzdJZMdcCMSTPJrsoX` を追加します。

![スクリーンショット 2023-05-04 2.13.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59468/de35d7a4-af1c-94d0-090f-57d78f6350c8.png)

下記のコードを入力し、

```javascript
jquantsapi.setProperties(PropertiesService.getScriptProperties());

function jquants_company_name(code ,date) {
  return jquantsapi.listed_info(code, date).CompanyName;
}
```

スクリプトプロパティにJ-Quantsの認証情報を設定します。

| プロパティ | 値 | 
|:-|:-|
| `JQUANTSAPI_MAILADDRESS`| メールアドレス | 
| `JQUANTSAPI_PASSWORD` | パスワード | 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59468/741210b5-5851-bd85-4851-dfdb500adb84.png)

## 独自関数の呼び出し

Googleスプレッドシートに戻り、`=jquants_company_name(2789)`と入力します。

![スクリーンショット 2023-05-04 2.19.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59468/08204b18-1953-2112-847d-7c7aaf914da0.png)

すると、企業名が表示されます。

# 作ったライブラリについて

説明の途中で追加したライブラリはこちらで公開しています。（もうすでに誰かgasのライブラリ作ってたりするかな...?）

https://github.com/kijuky/gas-jquantsapi

## トークンについて

```plantuml
@startuml

gas -> gas: プロパティにIDトークンがない
gas -> gas: プロパティにリフレッシュトークンもない
gas -> "j-quants": リフレッシュトークンを取得
gas -> "j-quants": IDトークンを取得
gas -> "j-quants": IDトークンを使ってAPI呼び出し

@enduml
```

トークンはスクリプトプロパティに保存するようにしました。スクリプトプロパティに必要なトークンがなければ遡ってトークンを取得しに行きます。取得したトークンはスクリプトプロパティに保存するため、2回目以降の呼び出しはちょっと速くなります。ただし、トークンの期限が切れると、同様に遡ってトークンを取得しに行きます。

## スクリプトプロパティについて

スクリプトプロパティは、PropertiesServiceが呼び出されたプロジェクトに依存するようなので、jquantsapiにクライアントのPropertiesServiceインスタンスを設定してもらうようにします。これで他人の認証情報が共有されることを防ぎます。

```javascript
let properties_ = null;

function setProperties(properties) {
  properties_ = properties;
}

// ...以降は properties_ を使ってスクリプトプロパティを読み書きする。
```

```javascript
// 使う側は自身のプロジェクトのスクリプトプロパティを設定する

jquantsapi.setProperties(PropertiesService.getScriptProperties());
```

## 基準日について

フリープランでは12週間前の日付を設定しないとAPI呼び出しがエラーになります。そのため、基準日が省略された場合は現在時刻から12週間(84日)前の日付をデフォルト値として設定します。

```javascript
function listed_info(code, date = new Date(new Date().setDate(new Date().getDate() - 12 * 7))) {
  //...
}
```

# まとめ

J-Quants APIをGoogleスプレッドシートで使う方法を紹介しました。GASの関数がそのままGoogleスプレッドシートで使えるので、J-Quants API以外のAPIも繋げて色々な情報をGoogleスプレッドシートで一元管理すると面白いかもしれませんね。
react firebase

# firestoreからデータの取得

## 条件に合ったデータを取得
* ユーザー名とパスワードが一致したドキュメントを取得
```jsx
import { db, auth } from "../firebase.js";

function login(){
    db.collection('users')
      .where('name', '==', 'ユーザーネーム')
      .where('password', '==', 'パスワード')
      .get()
      .then((snapshot) => {
          const userData = snapshot.docs.map((doc) => doc.data());
      });
}

```
Chat GPTの実力を試す。Djangoで作るToDoアプリチュートリアル

こんにちは！今回はPythonのDjangoを使用して、ToDoアプリを制作する方法について解説していきます。このチュートリアルを通じて、Djangoの基本的な機能について学びながら、アプリを作成していきましょう。

# 目次
[1.プロジェクトの作成](#1-プロジェクトの作成)
[2.アプリの作成](#2-アプリの作成)
[3.モデルの作成](#3-モデルの作成)
[4.ビューの作成](#4-ビューの作成)
[5.テンプレートの作成](#5-テンプレートの作成)
[6.URLの設定](#6-URLの設定)
[7.アプリケーションの起動](#7-アプリケーションの起動)

本記事では、ToDoアプリの作成を通じて、Djangoの機能や仕組みについて詳しく解説していきます。また、Pythonの基礎的な知識がある程度必要となるため、予めご了承ください。

参考にしたアプリとは異なる、独自のToDoアプリを作成していきます。ぜひ、最後までご覧ください！

# 1. プロジェクトの作成
まずは、Djangoプロジェクトを作成しましょう。ターミナルで以下のコマンドを実行します。

```:Copy code
django-admin startproject myproject
```
myprojectはプロジェクトの名前です。好きな名前をつけてください。

プロジェクトが作成されたら、以下のコマンドでサーバーを起動してみましょう。

```bash:Copy code
cd myproject
python manage.py runserver
```

ブラウザで http://localhost:8000/ にアクセスし、以下のようなページが表示されたら、プロジェクトの作成は成功です。

Django Welcome Page
![スクリーンショット 2023-05-04 17.59.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2030574/a1e1a0fb-3a6e-c267-6114-c90cd27a19b2.png)


# 2. アプリの作成
次に、アプリを作成しましょう。以下のコマンドを実行します。

```:Copy code
python manage.py startapp todo
```
todoはアプリの名前です。この名前で作成してください。

# 3. モデルの作成
ToDoアプリには、ToDoリストに追加する項目が必要です。そのために、モデルを作成します。todo/models.py ファイルを以下のように編集します。

```python:python

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title
```
Task という名前のモデルを定義しました。title、description、completed という属性を持ちます。completed は、タスクが完了したかどうかを表す真偽値です。

# 4. ビューの作成
次に、ToDoリストを表示するためのビューを作成します。todo/views.py ファイルを以下のように編集します。

```python:Copy code
from django.shortcuts import render
from .models import Task

def index(request):
    tasks = Task.objects.all()
    return render(request, 'todo/index.html', {'tasks': tasks})
```
index という名前のビューを定義しました。Task.objects.all() で、全てのタスクを取得しています。そして、取得したタスクを todo/index.html というテンプレートに渡しています。

# 5. テンプレートの作成
次に、ToDoリストを表示するためのテンプレートを作成します。todo/templates/todo/index.html ファイルを以下のように編集します。

```html:Copy code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ToDo List</title>
  </head>
  <body>
    <h1>ToDo List</h1>
    <ul>
      {% for task in tasks %}
        <li>{{ task.title }}</li>
      {% endfor %}
    </ul>
  </body>
</html>
```
{{ task.title }} で、タスクのタイトルを表示しています。これで、ToDoリストを表示するためのビューとテンプレートができました。

# 6. URLの設定
最後に、ToDoリストを表示するためのURLを設定します。myproject/urls.py ファイルを以下のように編集します。

```python:Copy code
from django.urls import path
from todo.views import index

urlpatterns = [
    path('', index, name='index'),
]
```
path('') で、ルートにアクセスした時に index という名前のビューを呼び出すように設定しています。

# 7. アプリケーションの起動
以下のコマンドを実行して、アプリケーションを起動します。

```Copy code:Copy code
python manage.py runserver
```
ブラウザで http://localhost:8000/ にアクセスすると、ToDoリストが表示されます。

以上が、PythonのDjangoを扱い、ToDoリストアプリを制作する記事の基本的な内容となります。適切で目に留まりやすいタイトルとしては、「PythonのDjangoを使ってToDoリストアプリを制作しよう」といったものが考えられます。

ちなみに、こちらの記事はタイトルから内容、タグまですべてChat GPTで作られました。
違和感などありましたらコメントください。
【SwiftUI】@Publishedを@Publishedを使わずに表してみる

# はじめに
タイトルが頭痛が痛いみたいになってしまいました。ごめんなさい。語彙力がないんです...😭
`@Published`がどんな挙動をしてるのかイマイチ分かっていなかったので、調べてみました。

# 結論
```swift
@Published var age: Int
```
は、
```swift
var age: Int {
        willSet{
            objectWillChange.send()
        }
    }
```
と表せる

# `@Published`
よくある`@Published`の使い方としては、例えば以下のような`Person`クラスがあります。
`ObservableObject`に準拠したクラスを定義して、状態の変更があった際にViewに変更を通知させたい(Viewを更新したい)プロパティに`@Published`を付与します。

```swift
class Person: ObservableObject {
    var name: String
    @Published var age: Int
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
    func growOld() {
        age += 1
    }
}
```
View側では、作成したクラスのインスタンスに`@ObservedObject`を付与することで、プロパティの変更を監視し、更新された時にビューに表示されている値も更新することができます。
```swift
struct ContentView: View {
    @ObservedObject var bob = Person(name: "Bob", age: 20)
    var body: some View {
        VStack {
            Text("名前：" + bob.name)
            Text("年齢：" + String(bob.age))
            Button {
                bob.growOld()
            } label: {
                Text("歳を重ねる")
            }
        }
    }
}
```
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676792/b332458a-f263-b0e9-8af9-f0f9a2cd0660.gif">

# objectWillChange
```swift
class Person: ObservableObject {
    var name: String
    var age: Int {
        willSet{
            objectWillChange.send() // 変更を通知
        }
    }
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
    func growOld() {
        age += 1
    }
}
```

`objectWillChange`は、その名の通り観測可能オブジェクトが変更される前に呼び出され、変更が通知されるたびにサブスクライバ(観測可能な値の変更を通知するために使用されるオブジェクト)に値を送信するプロパティです。

...よく分かりませんよね。私もよく分かりません(泣)
要するに、Viewの更新を円滑に行うために、プロパティ(変数)の変更をViewに通知してくれるのが`objectWillChange`です(のはず)。
これを自動で行ってくれるのが、今まで使ってきた`@Published`になります。


ちなみに`objectWillChange`を使う(`@Published`で自動化しない)ことの利点として、変更を通知する条件を設定できるというものがあります。
```swift
class Person: ObservableObject {
    var name: String
    var age: Int {
        willSet{
            if age > 22 { // ageが22以下の時は変更を通知しない
                objectWillChange.send()
            }
        }
    }
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
    func growOld() {
        age += 1
    }
}
```
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676792/eea801ab-0baf-d5bb-ea22-998dcd8dd07f.gif">

# 終わりに
使いこなせれば`@Published`を使わない方が便利になるかもしれない...

参考：
[(at)PublishedがどのようにSwiftUIのViewを更新するのか](https://qiita.com/yimajo/items/8846207d2b7a17ace809)
[ObservableObject利用時のView更新タイミングを細かく制御する](https://qiita.com/chocoyama/items/a588c3569b8dd89cd223)
DNSってなんだ

# DNS(Domain Name System)とは

DNS とは、インターネット上のドメイン名と IP アドレスを対応付けるための仕組みです。
インターネットを介した通信は、通常 IP アドレスを用いて相互に通信を行います。しかし、web サイトにアクセスする際など、人間が直感的にわかりやすいドメイン名(例: google.com など)でアクセスしたい場合があります。そこで、DNS は、ドメイン名を IP アドレスに変換することで、ネットワーク上の機器が正しく通信を行えるようにしているのです。

以下に、DNS のしくみを実現するための主要な機能や構成要素について説明していきます。

## リゾルバ(Resolver)

DNS において、ドメイン名から IP アドレスを検索したり、IP アドレスからドメイン名を検索したりして名前解決を行うソフトウェア・プログラムです。リゾルバには、スタブリゾルバとフルサービスリゾルバの 2 つのタイプがあります。

### スタブリゾルバ

一般的な PC の OS 等に搭載されている機能です。キャッシュを持っていないため、自分で名前解決ができません。フルサービスリゾルバに名前解決の要求を出し、その結果を受け取ることで名前解決を行うリゾルバです。

### フルサービスリゾルバ(キャッシュサーバ)

スタブリゾルバからきた名前解決要求(DNS クエリ)に対して、キャッシュの内容から答えるか、分からなかった場合、後述する権威サーバ群に問い合わせを行います。

![リゾルバ](https://raw.githubusercontent.com/yziori/qiita-contents/main/image/dns.drawio.png)

## 権威 DNS サーバ(コンテンツサーバ、ゾーンサーバ)

DNS において、当該サーバが管理するゾーン(ドメイン)の情報を保持し、他のサーバに問い合わせなくても応答することができるサーバのことです。やたら色々な呼び方があります。

![権威DNSサーバ](https://raw.githubusercontent.com/yziori/qiita-contents/main/image/contents_server.drawio.png)

当該サーバが管理するドメインの情報を登録しておいて、リゾルバからの非再帰的な名前解決要求に対して自身が管理するドメイン内の名前解決にだけ応じます。

フルサービスリゾルバはスタブリゾルバからの名前解決要求に対して、キャッシュに情報がない場合でも、再帰的に必要な情報を取得して回答を返すという点で、権威 DNS サーバの働きとは対照的となっています。

## まとめ

今回では、DNS の構成要素の役割とおおまかな名前解決の流れをまとめました。DNS サーバに対する攻撃などセキュリティ関係の話も今後まとめてみたいと思います。

## 参考

[情報処理教科書 情報処理安全確保支援士 2023 年版](https://www.amazon.co.jp/%E6%83%85%E5%A0%B1%E5%87%A6%E7%90%86%E6%95%99%E7%A7%91%E6%9B%B8-%E6%83%85%E5%A0%B1%E5%87%A6%E7%90%86%E5%AE%89%E5%85%A8%E7%A2%BA%E4%BF%9D%E6%94%AF%E6%8F%B4%E5%A3%AB-2023%E5%B9%B4%E7%89%88-%E4%B8%8A%E5%8E%9F-%E5%AD%9D%E4%B9%8B-ebook/dp/B0BFGCCFFQ/ref=sr_1_1?keywords=%E5%AE%89%E5%85%A8%E7%A2%BA%E4%BF%9D%E6%94%AF%E6%8F%B4%E5%A3%AB+2023&qid=1683130759&sprefix=%E5%AE%89%E5%85%A8%E7%A2%BA%E4%BF%9D%2Caps%2C172&sr=8-1)<br>
[jprs 用語辞典](https://jprs.jp/glossary/index.php?ID=0145#:~:text=DNS%E3%81%AB%E3%81%8A%E3%81%84%E3%81%A6%E3%80%81%E3%81%82%E3%82%8B%E3%82%BE%E3%83%BC%E3%83%B3%E3%81%AE,%E6%83%85%E5%A0%B1%E3%81%AE%E3%81%BF%E3%82%92%E7%AD%94%E3%81%88%E3%81%BE%E3%81%99%E3%80%82)
Vimのカスタマイズ

## はじめに
最近Vimを使う機会が多いのですが、デフォルトのままだと少し使いづらく感じたので簡単にカスタマイズしてみました。
今回はその時の手順と設定した内容を紹介します。


## .vimrcとは
Vimの挙動や外観をカスタマイズするための設定やコマンドを記述するファイルです。
初期状態では存在しないので作成する必要があります。
起動時にホームディレクトリ直下の`.vimrc`が自動的に読み込まれるので、ホームディレクトリ直下に配置します。


## 設定手順
以下のコマンドで`.vimrc`を開きます。
`~`はホームディレクトリのことで、ホームディレクトリ直下の`.vimrc`を開くことを意味しています。
既にファイルが存在する場合は既存のファイルが開かれ、存在しない場合は編集内容を保存することでファイルが作成されます。
```bash
$ vim ~/.vimrc
```

`.vimrc`を開いたら実際に編集していきます。
起動時のノーマルモードから`i`キーでインサートモードに移行し、`set`コマンドと設定したいオプションを記述していきます。
設定の内容をコメントとして残しておくと後でわかりやすいです。
```vim
" コメント
set [オプション]
```

編集が終わったら下記の手順で保存終了します。
1. `Esc`キーでノーマルモードに移行
2. `:wq`を入力（`:`でコマンドラインモードに移行 → wqは保存してvimを終了するコマンド）
3. `Enter`キー押下


## 実際に設定した内容

:::note warn
カラースキームでmolokaiを指定するには別途作業が必要です。
:::

```vim
"カラースキーム
colorscheme molokai

"行番号表示
set number

"タイトル表示
set title

"カーソル行強調
set cursorline

"カーソル列強調
set cursorcolumn

"ステータスライン有効化
set laststatus=2

"文字コードを指定
set encoding=utf-8

"指定した文字コードで自動判別
set fileencodings=utf-8,shift-jis,euc-jp

"コマンドモードでも行末の1文字先までカーソル移動可能
set virtualedit=onemore

"次の行もインデント
set autoindent

"構文に基づいてインデントを自動調整
set smartindent

"タブ文字の幅を4スペースに設定
set tabstop=4

"インデントの幅を4スペースに設定
set shiftwidth=4

"タブ文字の代わりにスペースを挿入
set expandtab

"タブ文字の可視化
set list listchars=tab:\-\-\>,extends:»,precedes:«,trail:⋅
```



![スクリーンショット 2023-05-04 133045.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3340928/01bc2052-4f97-adfe-f6a3-6de0be8f71ad.png)
こんな風になりました。


## あとがき
もし上記の中で不要な設定や他に便利な設定がありましたら、ぜひ教えていただきたく存じます。
Docker on WSL2でawesome-composeのnginx-nodejs-redisを立ち上げる

## はじめに

[実践Node.js入門](https://gihyo.jp/book/2023/978-4-297-12956-9) を写経していたところ, Redisを立ち上げる必要が出てきました. 

本文中にRedisをDockerで立ち上げる方法は記載されていたのですが, [こちらの記事](https://qiita.com/rtake/items/ecea573dba741f25f766) で紹介した **awesome-compose** に Node.js と Redis の組み合わせがあったので, こちらを使って環境構築することにしました.

https://github.com/docker/awesome-compose

今回は, プロキシサーバに Nginx, バックエンドに Node.js, データベースに Redis を使ったアプリケーションの環境を構築します.
(ちなみに, Node.jsのライブラリExpressを使ったスタックもあるようです)

基本的にはREADME.mdの通りにやるだけなのですが, 例によって少々詰まってしまったので, 備忘録として残しておきます.


## 作業
### git clone & ディレクトリに入る
```
$ git clone https://github.com/docker/awesome-compose.git
$ cd awesome-compose/nginx-nodejs-redis/
```

### docker compose実行
```
$ sudo docker compose up -d
[+] Running 4/4
 ✔ Container nginx-nodejs-redis-redis-1  Running
 ✔ Container nginx-nodejs-redis-web2-1   Running
 ✔ Container nginx-nodejs-redis-web1-1   Running
 ✔ Container nginx-nodejs-redis-nginx-1  Started
```

### 接続確認
`docker compose` で確認
```
$ sudo docker compose ps
NAME                         IMAGE                     COMMAND                  SERVICE             CREATED             STATUS              PORTS
nginx-nodejs-redis-redis-1   redislabs/redismod        "redis-server --load…"   redis               3 hours ago         Up 13 seconds       0.0.0.0:6379->6379/tcp, :::6379->6379/tcp
nginx-nodejs-redis-web1-1    nginx-nodejs-redis-web1   "docker-entrypoint.s…"   web1                3 hours ago         Up 7 seconds        0.0.0.0:81->5000/tcp, :::81->5000/tcp
nginx-nodejs-redis-web2-1    nginx-nodejs-redis-web2   "docker-entrypoint.s…"   web2                3 hours ago         Up 6 seconds        0.0.0.0:82->5000/tcp, :::82->5000/tcp
```

READMEでは `localhost:80` にアクセスするといいよ, となっていましたが, 私の環境では `localhost:81` または `localhost:82` でした.

```
$ curl localhost:81 # web1: Number of visits is: 5
$ curl localhost:82 # web2: Number of visits is: 7
```

うまくいってますね。
Have a good awesome-compose life!
random.randint(a, b)備忘録



───────
```Python
import random  # 乱数を生成するモジュールをインポート

# ダイスロールの関数を定義
# roll_num個のmentai面ダイスを振って合計値を返す関数
def dice_roll(roll_num, mentai):
    total = 0  # 合計値を初期化
    for i in range(roll_num):  # roll_num回繰り返す
    	total += random.randint(1, mentai)	 # 1からmentaiまでの整数をランダムに選んで合計値に加える
	return total  # 合計値を返す

# 能力値をダイスロールして決定する
# 3D6
ABILITY01 = dice_roll(3, 6)	
ABILITY02 = dice_roll(3, 6)
ABILITY03 = dice_roll(3, 6)


# 能力値を画面に表示する
print(f"能力値01: {ABILITY01}")
print(f"能力値02: {ABILITY02}")
print(f"能力値03: {ABILITY03}")

```
───────

## 解説

random.randint(a, b)とすると、a以上b以下の整数をランダムに返します。
例えば、random.randint(1, 6)とすると、1から6までの整数（つまり、6面サイコロの目）をランダムに返します。

このコードでは、mentaiという変数にサイコロの面数を代入しています。つまり、random.randint(1, mentai)とすると、1からmentaiまでの整数（つまり、mentai面サイコロの目）をランダムに返すということになります。
Instagram Basic Display API の登録&使ってみようぞ

# 概要

- この記事は[developers.facebook.comのチュートリアル記事](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started)を一通り実施して`Instagram Basic Display API`が使えるようにする
- 実際にinstagramの画像を表示してみる

# まずはじめにチュートリアルから

基本的には[developers.facebook.comのチュートリアル記事](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started)通り進められると思います

なので、ここではひっかかった部分だけについて記載したいと思います

## 注意点・ひっかかったところ
- `必要なもの`
    - たまたま、僕は必要なものを全て所有していたので特に引っかかりませんでしたが、非エンジニアの方やこれからエンジニアを始める方は必要なものを用意する必要があります
    - Facebook・instagramのアカウント
        - 作成はWebやスマートフォンからも作成できます(というかアカウント持ってない人なんているのでしょうか、、)
    - 所有している公開ウェブサイト
        - 僕はgithubアカウントもherokuのアカウントどちらも持っていました
            - [github](https://github.com/)
            - [heroku](https://jp.heroku.com/)
    - Terminalなどのコマンドラインツール
        - Macだと以下コマンド
            ```
            brew install curl
            ```

- `ステップ4: テストユーザーを認証する`
    - {app-id}はInstagramアプリ
        - アプリIDではなく、参考画像のInstagramアプリID
    - {redirect-uri}
        - `必要なもの`の所有している公開ウェブサイト
        - `さらに有効なOAuthリダイレクトURI`に設定してあること
            - 設定してなければURLが同じでも成功しません、、
    - 参考画像
        ![スクリーンショット 2023-05-04 0.35.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701238/4814effd-e591-854d-1f79-0f71c23e446e.png)

上記2つになります

# 実際に使ってみた結果
- いろいろ隠したりするのが面倒だったので、割愛ですmm

# 最後に
チュートリアルを無事にクリアできると`Instagram Basic Display API`が使用できるようになります
いろいろ使ってみましょう！！
Docker on WSL2

日記
===

環境
---
- Host: WSL2 on Windows 11
- Guest Ubuntu 22.04

手順
---
```powershell:Power Shell
wsl --install -d Ubuntu
wsl
// login 
```
```bash:Bash
sudo bash
echo '[boot]' > /etc/wsl.conf
echo 'systemd=true' >> /etc/wsl.conf
```

```powershell:Power Shell
wsl --shutdown
wsl 
// login
```

```
sudo ps -ae | grep systemd
// 1 ?        00:00:01 systemd
// 2 ?        00:00:00 init-systemd(Ub
```

ユーザ権限
---
sudo gpasswd -a kyoya docker 
sudo chgrp docker /var/run/docker.sock
sudo systemctl restart docker
Pythonで株式の日次リターンの対数分布からリスクを測定する

　本稿ではpythonを使用して株式の日次リターンの対数分布を見ることで、株式投資のリスクを測定してみる。

　まず、pandasの拡張モジュールであるpandas_datareaderを事前にインストールしておく。

```python3
pip install pandas_datareader
```

　今回は例としてトヨタ自動車を見てみる。

```python3
# 使用するモジュールのインポート
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import os
import datetime as dt
import pandas_datareader.data as web
from scipy.stats import norm

# ticker入力 (今回はトヨタ自動車)
ticker_symbol="7203"
ticker_symbol_dr=ticker_symbol + ".JP"
 
# 期間の指定
start='2003-01-01'
end = dt.date.today()
 
# データ取得
toyota = web.DataReader(ticker_symbol_dr, data_source='stooq', start=start,end=end).sort_values("Date")

# 最初の5行を表示
toyota.head()
```
これを実行すると下図のように、2003年1月以降の株価のデータを得られる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3356009/99fe7a93-574c-6cdf-57ce-2f8fc3edb7a8.png)

```python3
# 日時の対数リターンをとり、"LogReturn"というコラムに格納する。
toyota['LogReturn'] = np.log(toyota['Close']).shift(-1) - np.log(toyota['Close'])

# 対数リターンの平均と標準偏差を計算
mu = toyota["LogReturn"].mean()
sigma = toyota["LogReturn"].std(ddof=1)

# 確率密度関数を計算
density = pd.DataFrame()
density["x"] = np.arange(toyota["LogReturn"].min()-0.01, toyota["LogReturn"].max()+0.01, 0.001)
density["pdf"] = norm.pdf(density["x"], mu, sigma)

# 結果をプロット
toyota["LogReturn"].hist(bins=50, figsize=(15, 8))
plt.plot(density["x"], density["pdf"], color="red")
plt.show()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3356009/36404f27-77b8-63cd-d505-953d033a4df0.png)

　FamaとFrenchは株式の収益率は正規分布よりも裾が厚くなると述べているが、トヨタの場合はだいぶ裾が薄い。仮説的に大企業であればあるほど、そしてバリュー株であればあるほど裾は薄くなる気がする。

　以下のコードではトヨタが1日で5%以上、10%以上下落する確率を計算する。
```python3
# 1日で5%以上下落する確率を計算
prob_return_5per = norm.cdf(-0.05, mu, sigma)*100
# 1日で10%以上下落する確率を計算
prob_return_10per = norm.cdf(-0.1, mu, sigma)*100
print(prob_return_5per, "%")
print(prob_return_10per, "%")
```

　これらを実行すると、それぞれ「0.2095516733415158 %」、「5.537040982959987e-07 %」を得られる。

　また、以下では1年間で40%以上、ないしは20%以上下落するリスクを計算する。ここでは1年間の東証が開いている日数を245日で計算した。
```python3
mu245 = 245*mu
sigma245 = (245**0.5) * sigma

# 245日で40%以上下落する確率
print(norm.cdf(-0.4, mu245, sigma245) * 100, "%")

# 245日で20%以上下落する確率
print(norm.cdf(-0.2, mu245, sigma245) * 100, "%")
```
　このコードを実行すると、それぞれ「4.777794106749807 %」、「17.40000427850144 %」が得られた。

　次にValue at Risk (VaR)を計算してみる。「XX％ Value at Risk」の概念は、ある投資について一定の期間かつ一定の信頼度(XX％)で予想される損失の最大額を測定するものである。これは「あらかじめ定義された信頼度において、ある時間軸で失われると予想される最大の金額」と定義される。例えば、95％ VaRは、潜在的な損失の分布の95パーセンタイルとなる。VaRは、投資のリスクを測定する方法であり、どれだけの損失を被る可能性があるか、その可能性はどの程度か、どのような時間軸で損失が発生するかという問いに答えるものである。

```python3
# 95% Value at Riskの計算
VaR = norm.ppf(0.05, mu, sigma)
```
　これを実行すると「-0.02862165919988984」が得られる。これは「1日で2.86%以上の損失を被る可能性は5%以下である」と解釈できる。
［メモ］Makefileとは

Makefileは、コンパイル、依存関係の管理、インストールなどのルールを記述しておくためのファイルであり、makeコマンドが読み込んで処理を行う。
Makefileには、ファイルの生成手順やプログラムを構成している同士の関係を記述する。

# Makefileの書き方
## Makefileの例
```
CC = gcc
CFLAGS = -Wall
LDFLAGS = -lwiringPi

TARGET = my_program
SRCS = $(wildcard *.c)
OBJS = $(SRCS:.c=.o)

all: $(TARGET)

$(TARGET): $(OBJS)
	$(CC) $(CFLAGS) -o $@ $^ $(LDFLAGS)

%.o: %.c
	$(CC) $(CFLAGS) -c $< -o $@

clean:
	rm -f $(OBJS) $(TARGET)
```
## 文法の説明
Makefileでは、以下のような特別な変数を使用することができる。
* CC: Cコンパイラのパスを指定する変数
* CFLAGS: コンパイルオプションを指定する変数
* LDFLAGS: リンクオプションを指定する変数
* TARGET:Makefile内で定義される変数。Makefileがビルドするターゲットの名前を示す。通常、Makefileは複数のターゲットを定義することができ、各ターゲットは独自のルールと依存関係を持ちます。TARGET は、Makefile内で定義されるターゲット名を表すために使用される変数です。
* LIBS: リンクするライブラリを指定する変数
* $@: ターゲット名を表す特別な変数
* $<: 依存関係の中で最初のファイル名を表す特別な変数
* $^: 依存関係に含まれるすべてのファイル名を表す特別な変数
* SUBDIRS:Makefileでサブディレクトリを指定するための変数。この変数に指定されたサブディレクトリに対して、Makefileが再帰的に実行する。
```
SUBDIRS = subdir1 subdir2 subdir3
```
* .PHONY: Makefileで実行するタスクを定義するための特別な目印。.PHONYで定義されたターゲットは、必ず実行されるようになります。たとえば、次のように書くことで、Makefile内で clean というターゲットを定義しています。
```
.PHONY: clean
clean:
    rm -f *.o myprogram
```
このようにすることで、make cleanと実行すると、常に"rm -f *.o myprogram"が実行される。.PHONYは、実ファイル名と同じ名前を持つターゲットについて、その名前のファイルがすでに存在している場合、そのファイルをターゲットとして実行しないようにするために使用されます。






Regenerate response


















/参考
https://linuc.org/study/knowledge/542/#:~:text=%E3%80%8CMakefil,%E5%87%A6%E7%90%86%E3%82%92%E8%A1%8C%E3%81%84%E3%81%BE%E3%81%99%E3%80%82
【VSCode】markdownの改行のホットキーを設定する


## はじめに

Markdownで改行をするには文末にスペースを2つ挿入する必要があります。  
VSCodeでMarkdownを編集する際に上記の作業を任意のホットキーで実行できるようにする方法について記載します。  

## 設定方法

コマンドパレットから`Preferences: Open Keyboard Shortcuts (JSON)`を実行します。

![E2BBAF50-DC49-40DF-87E2-1380D58E4C31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/b4fd9e74-20db-7b45-3547-70c60d9c1942.png)

すると`keybindings.json`が開きますので以下を追記します。  

```keybindings.json
  { 
    "key": "shift+enter",
    "command": "type",
    "args": { "text": "  \n" },
    "when": "editorTextFocus && editorLangId == 'markdown'"
  }
```

追記後にMarkdownファイルで`shift` + `Enter`を押下するとスペース2つが入力されたうえで改行されます。  

`shift` + `Enter`以外の組み合わせにしたい場合には`"key": "shift+enter",`を変更します。  

また上記の場合にはMarkdownのエディタにフォーカスがあるときのみ有効になります。
これを変更したい場合には`"when": "editorTextFocus && editorLangId == 'markdown'"`を
変更します。
開発者のためのチャットGPTプロンプトエンジニアリング講座が公開されていたので眺めてみた

## はじめに
[DeepLearning.AI](https://www.deeplearning.ai/)からPrompt Engineeringの講座「ChatGPT Prompt Engineering for Developers」が公開されました。なんとAndrew Ng氏(スタンフォード大学)とIsa Fulford氏(OpenAI)が講師。そして無料。

https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/

対象は初心者から上級者まで、計1時間ほどの動画で、実際に動かせる教材もセットになっており、教材の内容に目を通すだけでも参考になりました。サイト上では「期間限定無料」となっていたので、早めに覗いてみてください（2023/5/3時点）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25840/32affc17-1718-8597-1b9b-43e7eedbd8f3.png)

以下、各パートのキーワードとメモです。 **詳細はぜひぜひDeepLearning.AIの講座** をご覧ください！
※印の部分が個人的な感想で、それ以外はレッスン内容の抜粋です。

#### （追記）始める前に
@segavvy さんの記事。始め方や画面の説明、日本語で見るコツが書かれていて、講座のイメージがつかめます。

https://qiita.com/segavvy/items/51da71ef5f934f51fa4e


## Introduction
教材なしの動画のみ。
要約、推論、変換、拡張などの一般的なユースケースについて、プロンプトのベストプラクティスを紹介します。
LLMを使用したチャットボットの構築をガイドします。

## Guidelines
最初のレッスンではまず、プロンプトの2つの原則について、解説されています。
原則1：明確で具体的な指示を書く
原則2：モデルに "考える "時間を与える

#### 原則1：明確で具体的な指示を書く
戦術1：区切り文字を使って、入力の異なる部分を明確に示す
戦術2：構造化されたアウトプットを求める(JSON、HTMLのような)
戦術3：条件が満たされているかどうかをモデルに確認させる
戦術4："Few-Shot"のプロンプティング

#### 原則2：モデルに "考える "時間を与える。
戦術1：タスクを完了するために必要なステップを指定する
戦術2：結論を急ぐ前に、まずモデル自身が解決策を導き出すよう指示する

## Iterative
反復的なプロンプトの開発について紹介しています。
「アイディアを出す→プロンプトを実行する→結果を分析する」のサイクルが重要です。
マーケティングコピーを生成する過程を解説しながら、反復的なプロンプト開発を実演しています。
なぜ期待する出力が得られないのかを、分析することが大切。

## Summarizing
このレッスンでは、特定のトピックに焦点を当てたテキストの要約を行います。
ECサイトのレビューを対象に、様々な要約をしています。
- 単語/文/文字数制限で要約する
- 出荷・配送に関して要約する
- 価格と価値にこだわって要約する
- 配送に関する情報を抽出する
- 複数の製品レビューをまとめる

## Inferring
製品のレビューやニュース記事から感情やトピックを推測します。
- センチメント（肯定的／否定的）
- レビュアーは怒っているか
- レビューから製品名と会社名を抽出する
- 上の3つのタスクを同時に行う（センチメント推測、怒っているか、製品名と会社名の抽出）
- ニュース記事の5つのトピックを推測
- 指定した5トピックがニュース記事に含まれるか判断する

（※Watson NLU的なこともできちゃうのか～。どのくらいできちゃうのか、これは別途試してみないと）

## Transforming
翻訳、スペルチェック、文法チェック、トーン調整、フォーマット変換などのテキスト変換タスクに大規模言語モデルを使用する方法について説明します。

- 翻訳
ChatGPTは、多くの言語のソースを用いてトレーニングされています。このため、モデルには翻訳の能力が備わっています。この能力の使い方の例を紹介します。
 文章の言語を特定、英文をスペイン語・フランス語・海賊風英語に翻訳、オフィシャルな言い回しと仲間内での言い回し

- ユニバーサル翻訳機
多国籍の大手eコマース企業のIT担当者に集まってくるさまざまな問い合わせを、言語を特定して、英語と韓国語に翻訳。

- トーン変換
スラングからビジネスレターに翻訳。
（※「ジョーだ、このスタンドランプの仕様を調べてくれ」がどう変わるのかぜひ見ていただきたい）

- フォーマット変換
フォーマット間の変換を行います。プロンプトには入力形式と出力形式を記述する必要があります。
例ではJsonからHTMLのテーブル形式に変換しています。

- スペルチェック/文法チェック
よくある文法やスペルの問題と、LLMの回答を紹介しています。モデルに「校正」または「校正と修正」を指示する方法の例を示しています。

## Expanding
各顧客のレビューに合わせたカスタマー サービス メールを生成します。
長い顧客からのネガティブ（これもChatGPTが判断）なレビューに対して、指示に従って返信メールを生成します。
temperatureについての解説と、回答メール生成での活用を紹介しています。
temperatureは回答のランダム性を表しており、temperature=0の時は同じ入力なら同じ回答を出力。数値が大きくなるほど同じ入力に対して異なる結果が出力されます。

## Chatbot
チャット形式を利用して、特定のタスクや行動に合わせてパーソナライズまたは特化されたチャットボットとの会話を拡張する方法を探ります。
ChatCompletion APIにどのようなmessageを送ればよいのか、仕組みと合わせて解説しています。
ユースケースはピザレストランのオーダー受付ボット。
（※そういえばかつてWatson Assistantのサンプルもビザの注文受付だった。アメリカでは鉄板ユースケースなのか）

## まとめ
「for Developers」とある通り、アプリケーション開発のための迅速なエンジニアリングのベストプラクティスを学ぶということで、これからSemantic Kernelでツール開発に取り掛かろうとしていた私にはうってつけのコンテンツでした。

https://devblogs.microsoft.com/semantic-kernel/hello-world/

安定したフォーマットで回答を得るコツやイテレーティブなプロンプトの開発について学べました。
LLMを使ったアプリケーション開発を考えているエンジニアの方は、一度見ておいて損はない気がします。
すぐに動かせるPythonコード付きで、至れり尽くせりでした。ありがとうございます！
thymeleaf:フラグメント

# フラグメント
HTML要素を部品化して使い回す方法
## 背景
* Webアプリケーションでは、ページ横断で共通の部品であることがほとんど
* コードに重複があるとメンテナンスが難しい
* フラグメントを使うとメンテナンスしやすいコードがかける

### 使用法
1. フラグメントの定義
th:fragment
2. フラグメントのインクルード
th:insert　フラグメントの挿入
th:replace　フラグメントの置換
参考サイト：thymeleaf公式
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%95%E3%83%A9%E3%82%B0%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%89

### 使用例
1. フラグメントを利用した共通HTMLを用意する。
今回は、resources/fragmentsにlayout.htmlを用意。
~~~ layout.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" th:fragment="layout(title,content)">
<head>
    <meta charset="UTF-8">
    <title th:replace="${title}">(dafault)</title>
</head>
<body>
<div th:insert="${content}"></div>
</body>
</html>
~~~
th:fragment="layout(title,content)"
にて、layoutを元に各HTMLで動的にtitle,contentを指定できるようにする。
反映（インクルード）箇所は、th:replace="${title}"、th:insert="${content}"で表記。

2.　実HTMLにて、フラグメントを使用し１で定義したtitle、contentを指定する。
~~~ index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout(~{::title}, ~{::body})}">
<head>
    <title>トップページ　課題管理アプリケーション</title>
</head>
<body>
    <h1 class="mt-3">課題管理アプリケーション</h1>
    <ul>
        <li>
            <a href="./issues/list.html" th:href="@{/issues}">課題一覧</a>
        </li>
    </ul>
</body>
</html>
~~~
th:replace="~{fragments/layout :: layout(~{::title}, ~{::body})}"
宣言により、fragments/layout(.html)で作成したフラグメント定義が、index.html内のtitleタグ・bodyタグの内容に置き換えられて使用される。
VSCodeでXSLTの編集環境を整える

# VSCodeに著名な拡張をインストール
[XSLT/XPath for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=deltaxml.xslt-xpath)
よくわからないけど、SaxonのJavaScript実装であるSaxonJSを搭載したことで、Javaランタイム無しでも動くようになったっぽいらしい？
ただ、Node.jsのランタイムは必要なので、導入していないと作業途中で「npxが無いよ」的なメッセージが出る。その場合はしれっとインストールすればOK

# VSCodeからSaxonJSを駆動する設定ファイルを作る 
[機能拡張のドキュメント](https://deltaxml.github.io/vscode-xslt-xpath/run-xslt.html)に書いてあるとおりなんだけども…。
初めてXSLTを適用するプロジェクトで`⇧⌘B`を入力すると、`No build task to run found. Configure Build Task...`というのが出てくるので、`Enter`を押して、出てくる２択から`xlt-js: Saxon-JS Transform`を選ぶ。 
そうすると`./.vscode/tasks.json`ファイルが出来る。 
機能拡張のver1.5.11現在、こうして自動生成される`tasks.json`は、デフォルトの被適用XMLファイルについての設定が`xmlSource:"${file}"`になっているけど、個人的には都度選びたい（どうせ前回の設定どおりでポンポンと実行できる）ので、`xmlSource:"${command:xslt-xpath.pickXmlSourceFile}"`に書き換えておく。 

# VSCode上でXSLTを駆動させる 
`⇧⌘B`を入力すると、XSLTファイルを選んだり被適用XMLファイルを選んだり出力先ファイルを選んだりの流れになる。 
一度選んでしまえば、同じ設定なら`⇧⌘B`→`Enter`x3でサクッと。 
出力先ファイルもVSCode上に表示しておけば、サクッと更新される。便利。
Rubyメソッドの定義について

# はじめに

#### <font color="red">※以下の内容には誤りが含まれる可能性があります</font>


# メソッドとは何か


何らかの処理をひとまとめにして名前を付けたものです。


似たような言葉で関数というものがありますが、概念が違います。


Rubyではすべてがオブジェクトなので、厳密にはメソッドも含まれています。


オブジェクトは、データとそのデータに関する処理(メソッド)のまとまりです。


オブジェクト指向言語ではデータに関連する処理のことを関数ではなく、オブジェクト内のデータを操作するという意味合いが含まれた「メソッド」と呼びます。


# メソッドの定義


irbを起動して以下を入力してください。
```
def introduce
    puts "メソッドの定義をしています"
    puts "試してみてください。"
end
```

1行入力したら「Enterキー」か「returnキー」を押し、


最後にendを入力して「Enterキー」か「returnキー」を押すと「introduceメソッド」を


定義したという=>:introduceが表示されます。


# まとめ


・　メソッドをつくることをメソッドを定義するという


・メソッドの定義はキーワードのdefを使う


・キーワードのendまでの間に実行したい処理を指定する
【Ruby】irbでLinuxコマンドを使う方法

irb の実行中に exit せずに Linux 上のファイル操作をしたい時があったので方法を調べました。

## irbとは
irbは「interactive ruby」の略で、標準入力から読み込んだRuby式を対話的に実行するためのツールです。
作者はRubyの名付け親でもある[石塚さん](https://magazine.rubyist.net/articles/0021/0021-Hotlinks.html)。

## Linux コマンドの実行方法
Kernelモジュールの [systemメソッド](https://docs.ruby-lang.org/ja/latest/class/Kernel.html#M_SYSTEM) を使用します。
```irb
$ irb
> system "Linuxコマンド"
```
## 使用例
```irb
# irbの開始
$ irb

# ファイルの作成
> system "touch hello.rb"
=> true

# ファイルの確認
> system "ls"
hello.rb
=> true

# ファイルの編集
> system "vi hello.rb"
=> true

# ファイルの中身を確認
> system "cat hello.rb"
def hello
  puts "Hello World"
end
=> true

# ファイルの読み込み
> load "hello.rb"
=> true

# メソッドの実行
> hello
Hello World
=> nil
```

## 参考
https://docs.ruby-lang.org/ja/latest/class/Kernel.html#M_SYSTEM

https://github.com/ruby/irb

https://magazine.rubyist.net/articles/0021/0021-Hotlinks.html
【初心者向け】LANとWANについて【学習まとめ】

# はじめに
私事ですが、先日引っ越しをしました。

引っ越しに伴いインターネットの開通工事を行った際に、IT未経験の同居人から
Wi-Fiルーターの「LAN」ポートと「WAN」ポートの違いについて聞かれました。

IT業界2年目に突入した自分にとっても、いい学習の機会だったので、
LANとWANの基礎的な部分について、改めて学習したことをまとめてみました。


# LANとWANについて
[**LAN**]
Local Area Networkの略。
社内や家庭内など、“閉じられた環境”のネットワーク。

[**WAN**]
Wide Area Networkの略。
LANとLANを繋いだワイドなネットワークであり、インターネットもWANのひとつ。

.

我が家では「壁のモジュラージャック⇔モデム⇔ルーター」と接続されています。
モデムは、パソコンが理解できるデジタル信号と電話回線などのアナログ信号とを相互に交換するための装置です。

ルーターにはLANポートとWANポートがありますが、
モデム⇔ルーター間のLANケーブルを挿入するのは「WAN」ポートということになります。

図で表すと以下となります。

![syusei_000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3319937/a9a34c3d-6b0b-ea10-60f2-4c6a029a1f3d.jpeg)


LANポートは、PC等とルーターをLANケーブルで繋いで使用します。
ただ、最近は無線LANを利用することが多いと思いますし、実際に我が家でも無線で利用しています。

# ルーターについて
[**ルーター**]
2つ以上の異なるネットワーク間で、データを中継する通信機器。
2つの異なるネットワーク間とは、LAN間だけでなく、WAN間も中継可能。

つまり、以下のようなデータ転送も可能ということになります。

![WS_000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3319937/62edae3c-265c-63b1-46e5-4b1e6464c9b6.jpeg)


次回は、上記の図を描きながら
「ハブ」「スイッチ」「ルーター」などがごっちゃになりそうだったため、
そのあたりを勉強してまとめたいと思います。
インタフェースのメソッドが全部実装されていなくても、実行できる（そのメソッドを呼ばない限りはエラーにならない）

Java では、インタフェースのメソッドをクラスが実装していないとコンパイルエラーになります。
でも、 **実行時には未実装のメソッドを呼び出そうとしない限りはエラーになりません。**

# 実験

最初にエラーにならないように実装して、あとからインタフェースにメソッドを追加します。

まず、`X` というインタフェースを用意します。

```java
public interface X {
    void foo();
}
```

次に、これを実装した `XImpl` というクラスを用意します。

```java
public class XImpl implements X {
    @Override
    public void foo() {
        System.out.println("foo");
    }
}
```

最後に、これを実行する `Main` クラスを用意します。

```java
public class Main {
    public static void main(String... args) {
        System.out.println("main");
        call(new XImpl());
    }

    private static void call(X x) {
        x.foo();
    }
}
```

これを、コンパイルして実行します。
```
$ javac X.java XImpl.java Main.java
$ java Main
main
foo
```

問題なく実行できます。

ここで `X` インタフェースに `bar` メソッドを追加してコンパイルします。

```java
public interface X {
    void foo();
    void bar();    // 追加
}
```

```
$ javac X.java
```

このとき、`XImpl` クラスには `X` インタフェースの `bar` メソッドが実装されていない状態です。
**でも、実行してもエラーにはなりません。**

```
$ java Main
main
foo
```

# 実装されていないメソッドを実行しようとすると？

今度は、`Main` クラスを書き換えて、実装されていない `bar` メソッドを呼び出してみます。

```java
public class Main {
    public static void main(String... args) {
        System.out.println("main");
        call(new XImpl());
    }

    private static void call(X x) {
        x.bar();    // foo() から bar() に変更
    }
}
```

これは、実行時に `AbstractMethodError` が発生します。
（`NoSuchMethodError` ではない）

```
$ javac Main.java
$ java Main
main
Exception in thread "main" java.lang.AbstractMethodError: Receiver class XImpl does not define or inherit an implementation of the resolved method 'abstract void bar()' of interface X.
        at Main.call(Main.java:7)
        at Main.main(Main.java:3)
```

# なんで？

「インタフェースが更新された際に、その実装が使えなくなってしまうのを防ぐため」だそうです。
[Python3] Radonでコードの複雑さを計測する

メモ：
Radonの公式ページはこちら
https://radon.readthedocs.io/en/latest/commandline.html

Radonを使うとコードの複雑性であるCyclomatic Complexityを計測することができる。
インストール方法は簡単でpipで入る。
```shell:
% pip install radon
```
例えば、下記のmoduleの場合、
```python: radon_example01.py
def main(a):
  if a ==1:
    print("a is 1")
  elif a == 2:
    print("a is 2")
  else:
    print("a is not 1 and 2")

if __name__ == "__main__":
  main(2)
```
のCyclomatic Complexityは、
```shell:
% radon cc radon_example01.py -s
radon_example01.py
    F 2:0 main - A (3)
```
となる。

丸括弧内の数字3はcomplexity scoreと呼ばれる。
分岐が増えるとcomplexity scoreの値は大きくなる。
例えば、
```python:radon_example02.py
def main(a):
  if a ==1:
    print("a is 1")
  elif a == 2:
    print("a is 2")
  elif a == 3:
    print("a is 3")
  elif a == 4:
    print("a is 4")
  elif a == 5:
    print("a is 5")
  else:
    print("a is not 1 and 2")

if __name__ == "__main__":
  main(2)
```
なら、
```
% radon cc radon_example02.py -s
radon_example.py
    F 2:0 main - B (6)
```
という結果となる(complexity scoreは6)
A, BというのはRankを表している。Aが一番低い(複雑でない)
```
CC score	Rank	Risk
1 - 5	A	low - simple block
6 - 10	B	low - well structured and stable block
11 - 20	C	moderate - slightly complex block
21 - 30	D	more than moderate - more complex block
31 - 40	E	high - complex block, alarming
41+	F	very high - error-prone, unstable block
```
Cyclomatic Complexity以外にも
```
raw: compute raw metrics
mi: compute Maintainability Index
hal: compute Halstead complexity metrics
```
が使えるようである。

奥が深そうなんで、今日はここまで。。
[OutSystems]Camera Pluginで撮影した動画をEntityに保存する

[Camera Pluginが動画に対応したので試してみる](https://qiita.com/jyunji_watanabe/items/80dec42d321d53e56848)の続き。
撮影した動画を、いったんEntityに保存し、別の画面で再生する手順を確認する。

# 環境情報
Personal Environment(Version 11.18.1 (Build 37884))
Service Studio(Version 11.54.5)
Camera Plugin (Version 7.2.0)
File Plugin (Version 3.0.5)

動作確認にはAndroidを利用。

# Entityを用意
以下の1:1構造の2 Entityを用意した。
RecordedVideoBinaryには撮影した動画のバイナリデータを、RecordedVideoMetadataには、Camera Pluginが返してくれるメタデータを格納する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/346e42da-607b-7ced-2826-12c6d948f414.png)

# バイナリデータを取り出す
File PluginのGetFileDataFromUri Actionを使用する。
Camera PluginのRecordVideoが返すURIは'/'で始まるが、File Pluginでファイルにアクセスする際にはスキーマをつけなくてはいけないようだ。

もし、GetFileDataFromUriのFilePathパラメータにURIをそのまま渡すと、「Encoding Error」になってしまう。
よって、以下のように、先頭に「file://」を付与する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/8d8f3a00-b429-5df5-b522-75417473085d.png)

「file://」を補っているのは、以前[File Pluginでファイルを保存するパス](https://qiita.com/jyunji_watanabe/items/5e0ddf9a47b788a2c202)で確認したときに、File Pluginで取得できるファイルパスの先頭についていたことから。

# 取り出したデータをサーバーに保存
これは、特別な部分が何もない。
Server Actionを作成し、Input Parameterとして↑で取り出したBinary Dataと、Camera Pluginが返すメタデータを渡す。受け取った値をEntityに保存するだけ。

# 別の画面でデータを取りだす
実装例：

- 画面のAggregateでRecordedVideoMetadata Entityを一覧表示
- 表示した各レコードにButtonを配置
- Buttonをクリックすると、Server Actionに該当レコードのIdを渡す
- Server ActionではIdを使ってBinary Dataを取り出し、BinaryData ExtensionのBinaryToBase64に渡してBase64フォーマットに変換した値を返す

Base64に変換しているのは、後でvideoタグのsrcにdata URIで渡すため。

# UIに表示
Video Widgetはパラメータとして、Videoデータを直接返すURLを期待する。
そこで、代わりにHTML Element Widgetを使ってvideoタグを直接出力し、そのsrc属性にdata URIとして動画データを渡すことにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/c02a493c-ec00-5e48-026c-39605c443669.png)

指定した属性は以下の通り、

- controls: True
- type: video/mp4
- src: "data:video/mp4;base64," + Base64形式の動画を格納したText型の変数

# CSP
以下のようなエラーが開発者ツールのコンソールやエラーログに出ていたら、CSP (Content Security Policy)によってコンテンツの表示が止められている。
セキュリティ設定なので緩めるにあたっては慎重に検討が必要。
設定はLifeTimeで行う。

fused to load media from 'data:video/mp4;base64,...==' because it violates the following Content Security Policy directive: "default-src 'self' gap: 'unsafe-inline' 'unsafe-eval'". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback.
【git】git push する時に エラー(error: src refspec main does not match any error: failed to push some refs to 「リポジトリURL」)

# 症状  
リモートリポジトリに最初にPushするときに発生したエラー
```shell-session
$ git push origin main
error: src refspec main does not match any
error: failed to push some refs to 'リポジトリURL'
```  
# 環境
Paperspace gradient
git version 2.25.1

# やったこと 1
GitHubの方でリポジトリを作ったときにREADME.mdを作成していたのでローカルにpullする。
```shell-session
$ git pull origin main
warning: no common commits
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 656 bytes | 43.00 KiB/s, done.
From リポジトリURL
 * branch            main       -> FETCH_HEAD
 * [new branch]      main       -> origin/main
fatal: refusing to merge unrelated histories
```
このエラーは根本が異なるブランチをpullまたはmergeしようとしたときに起こるらしい。今回の場合、ローカルリポジトリでcommitしていたのが原因と考えた。
調べた結果`--allow-unrelated-histories`オプションをつけて強制的にpullした後改めてpushしたがエラーに変化なし。

# やったこと 2
logを確認する。
```shell-session
$ git log
commit 7632c0297a181a0f3e278c411ff501acb9ccce51 (HEAD -> master)
Merge: 2056fec 667b7dc
Author: *******************************
Date:   Wed May 3 11:56:39 2023 +0000

    Merge branch 'main' of リポジトリURL

commit 2056fec0bd32eb7bc9cbfc24fd334a3012764b9d
Author: *******************************
Date:   Wed May 3 10:46:03 2023 +0000

    feat: Add Notebook files

commit 667b7dca165ca58bf3f828d0e8f8b265c77d4f48 (origin/main)
Author: *******************************
Date:   Wed May 3 19:16:23 2023 +0900

    Initial commit
```
ローカルの`master`にマージされていると読み取れた(正しいか自信なし)。リモートのブランチ名は`main`なのでローカルのブランチ名を`master -> main`に変える。
```shell-session
$ git branch -m master main
```
をした後にもう一度pushでリモートにpushできた。

# 原因と対応
1. リモートリとローカルのcommitに差があったこと -> 最初に`git pull`する。
2. リモートリとローカルのbrabch名が違ったままpushしたこと -> 'git branch -m 対象ブランチ名 変更後ブランチ名'で対応する。

Git 2.28以前では`git init`したときに作成されるブランチ名はデフォルトで`master`になるらしい。

# 参考サイト

https://zenn.dev/rabbit/articles/1b4a723e4c0088

https://genzouw.com/entry/2021/05/23/082707/2636/