OmniAICreator/Qiita-1.07M huggingface dataset:
Excelの列番号からそれが何列目かを求めるメソッド(C#)

# やりたいこと

"A"を投げると1を、"B"を投げると2を、…、"AA"を投げると27を、…、"BA"を投げると55を返す。作成時点では、Excelのシートの右端の列番号はXFDだったので、"XFD"にまで対応できていればOK。

表にまとめるとこんな感じ。

|引数|戻り値|$26^n$ごとに分解|
|:-|-:|-:|
|A|1|$1 *26^0$|
|…|…||
|Z|26|$26 *26^0$|
|AA|27|$1 *26^1+1 *26^0$|
|…|…|
|BA|53|$2 *26^1+1 *26^0$|
|…|…|
|ZZ|702|$26 *26^1+26 *26^0$|
|AAA|703|$1 *26^2+1 *26^1+1 *26^0$|
|…|…|
|XFD|16384|$24 *26^2+6 *26^1+4 *26^0$|

どう実装すればいいか分からなくて悩むときは、このように表にしてます。すると、何かが見えてくるはずです。知らんけど。
というわけで、こんな感じで実装してみました。

## 列番号→列数
```c#
private static int ConvertExcelColumnToNumber(string eCol) {    
    var colNumber = 0;
    for (var textIndex = 0; textIndex < eCol.Length; textIndex++) {
        colNumber += (int)Math.Pow(26, eCol.Length - 1 - textIndex) * (eCol[textIndex] - 64);
    }
    return colNumber;
}
```
```c#
ConvertExcelColumnToNumber("XFD"); //16384
```
OKです。

なぜこれでいいか考えてみます。
例えば、"DB"について考えます。列番号"DB"は、"CZ"よりも右に、"EA"よりも左に存在します。言い換えると、$104$($4*26$)列目よりも右に、$131$ ($5 *26+1$)列目よりも左に存在します。このことから、列番号が2桁で、最高位がDの場合は、$105$～$130$の値をとり得ます。そして、Bには2列分の長さがあるので、$104+2$で"DB"→$106$という関係性が生まれるみたいです。
俺は、下図のような感じで$26^n$ごとに引き算をしていく考え方が一番腑に落ちました。皆さんはどうでしょうか。
![qiita_1_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3773395/5958bba0-15aa-5f03-8844-6ce57ebaf946.png)


ついでに、その逆も実装してみました。

## 列数→列番号

```c#
private static string ConvertNumberToExcelColumn(int num) {
    var eColNum = new StringBuilder();
    do {
        eColNum.Insert(0, (char)((num % 26) + 64));
        num /= 26;
    } while (num > 0);
    return eColNum.ToString();
}
```
```c#
ConvertExcelColumnToNumber(16384); //"XFD"
```
OKです。

なぜこれでいいか考えてみます。
例えば、$1729$について考えます。$26$を基準にして変形すると、$1729 = 2 * 26^2 + 14 * 26^1 + 13 * 26^0$となるので、先ほどの考え方を逆転させると、最高位から順番に、"B", "N", "M"と変換できるので、正解は"BNM"となることが分かります。

ちなみに、"列番号"という単語をこの記事を書く際に初めて知りました。
アルファベットやのに列"番号"なんや…って思ったんは俺だけじゃないはず。
#### 参照
[VLOOKUP関数の列番号ってなに？｜数え方や指定の仕方 - 病院SEにゃんとのPCトラブル解決＆Excel関数等活用術](https://nyanto.jimdofree.com/%EF%BD%B4%EF%BD%B8%EF%BD%BE%EF%BE%99%E9%96%A2%E6%95%B0-%E8%AA%AC%E6%98%8E/vlookup%E9%96%A2%E6%95%B0%E3%81%A7%E6%A4%9C%E7%B4%A2%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%E8%A1%8C%E3%81%AE%E4%BB%BB%E6%84%8F%E3%81%AE%E5%88%97%E3%81%AE%E5%80%A4%E3%82%92%E6%B1%82%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A8%E6%B3%A8%E6%84%8F%E7%82%B9/vlookup%E9%96%A2%E6%95%B0%E3%81%AE%E5%88%97%E7%95%AA%E5%8F%B7%E3%81%A3%E3%81%A6%E4%BD%95-%E6%95%B0%E3%81%88%E6%96%B9%E3%82%84%E6%8C%87%E5%AE%9A%E3%81%AE%E4%BB%95%E6%96%B9/)

### 追記(2024/4/23)
これが初記事でしたが、思ったより読まれるもんなんですね。というわけで、どう考え方でこういった実装に至ったかを追記しました。これからもうちょい気合入れて書きます。
あと、タグに26進数ってつけてたんですけど、しまった、27進数か？と思ったんですけど、厳密にいえば何進数でもないですね。そもそもExcelには0列目という考え方が無かったもので。タグ消しときました。
仮に27番目のアルファベットを@とすると、下のようになりますね。
|10進数|26進数|27進数|Excelの列番号|
|-:|-:|-:|-:|
|$0$|A|A|-|
|$1$|B|B|A|
|$2$|C|C|B|
|…|…|…|…|
|$10$|K|K|J|
|…|…|…|…|
|$25$|Z|Z|Y|
|$26$|BA|@|Z|
|$27$|BB|BA|AA|
|…|…|…|…|
|$51$|BZ|BX|AY|
|$52$|CA|BY|AZ|
|…|…|…|…|
|$54$|CC|B@|BB|
|$55$|CD|CA|BC|
|…|…|…|…|

まあ改めて見ると一応26進数の数の増え方と若干似ていましたが、どちらとも微妙に異なる動きを取る、曲者でしたね。
Spring DIについて

# はじめに
ここでのDIとは「Dependency Injection(依存性の注入)」のDIです。
似てるもので「Dependency Inversion Principle（依存性逆転の原則）」とありますがこれはDIPですね。
ずいぶん前ですが自分は同じものだけど呼び方が違うだけだと思ってて統一してくれよーとか思ってました。

話を戻します。
DIとは凄く簡単に説明しますと「依存関係を直接インスタンス化(つまりnewを記述)するのではなく、外部から依存関係を渡す設計パターン」です。

以下のように引数として外部のインスタンスを渡すことも依存性注入の一形態らしいです。

```java
public void process(SampleProvider sampleProvider) {
    // なんらかの処理ロジック
}
```

このように外部から引数として渡すことで若干疎結合に貢献することが出来ますが
どこかしらでnew SampleProvider()みたいにnewを記述する必要が出てくるため結局newが書かれた場所はSampleProviderと密結合になってしまいます。
所がどっこいSpringだとそのnewの記述を完全に抹消することが可能です。別にSpringだけじゃなく多言語の主要FWのほとんどが何らかのDIの仕組みを持っていることのほうが多いと思います。

そしてSpringではDIを実現する際に以下３つの方法で依存性を注入することが出来ます。
1. フィールドインジェクション
1. コンストラクタインジェクション
1. メソッドインジェクション

これらそれぞれの特徴をchatGPTに聞いてみましたが納得です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457845/8eca0801-d934-2899-3d00-21c68c8ab1f4.png)

上記メリデメを理解した上で個人的な検討順序としてはコンストラクタ > フィールド > メソッド かなーと思いますので今回はコンストラクタインジェクションのやり方を簡単に以下に記載します。

# コンストラクタインジェクション

## ①Beanの登録
まずはコンストラクタインジェクションに関わらずDIしたいクラスをApplication Contextというコンテナに対して登録する必要があり、Application Contextで登録されたDI対象クラスのことをBeanと呼びます。
```java
@Service
public class SampleService {
    // なんか色々
}
```
上記のように`@Service`と付けるだけでBeanの登録は完了です。

## ②Beanの取得
次にSampleServiceを利用するクラス内でSampleServiceのBeanを取得します。
実はコンストラクタインジェクションでも2パターン書き方があるようなので②-1, ②-2で分けて紹介します。

### ②-1 Autowired記述Ver
以下のようにSampleServiceのフィールドを用意してSampleServiceを引数としたコンストラクタに対し@Autowiredを記述したら完了です。
```java
@Controller
@RequestMapping("/")
public class SampleController {

    private SampleService sampleService;

    @Autowired
    public TaskController(SampleService sampleService) {
        this.sampleService = sampleService;
    }
    
    ...
}
```

### ②-2 Autowired記述なしVer
以下のようにSampleServiceのフィールドをfinalで修飾子してSampleServiceを引数としたコンストラクタを用意したら完了です。
```java
@Controller
@RequestMapping("/")
public class SampleController {

    private final SampleService sampleService;

    // @Autowired ← あってもエラーにはならないがなくても良い。
    public TaskController(SampleService sampleService) {
        this.sampleService = sampleService;
    }
    
    ...
}
```

## ③所感
めちゃくちゃ簡単ですね。個人的には②-2のようにfinalで修飾しておくほうがより堅牢になって良いなと思いました。ただ、@AutowiredなくてもSpringがよしなに処理してくれるってことを知らなかったのでもっとこのやり方が世の中に根付いてほしいと思いました。(俺が知らなかっただけかも笑)
LLMのパラメータ数、学習データ量ってなに？

# はじめに

- LLMのモデルサイズ（例.8B、70B）とかって、イメージ湧かなくないですか？
    - 一般の方からすると。凄さとか、学習の大変さが伝わりづらい
    - 「モデルのパラメータ数」と「事前学習のデータ量(トークン数)」も混同しがち

このへんを整理していきます。

# パラメータ数と学習データ量

## モデルのパラメータ数
- パラメータとは、機械学習モデルが学習によって調整する変数のこと
- パラメータの数が多いほど、モデルは複雑な関数を表現できる
- パラメータ数は、モデルの "表現力" と言えます
- 最新の大規模言語モデル (LLM) は、数百億から数兆のパラメータを持つものもある

例えば、1000億のパラメータを持つモデルは、1000億個の "ニューロン" を持つ人間の脳に例えることができます。

## 学習データ量 
- 機械学習モデルは、大量のデータから規則性やパターンを学習します
- 学習に使うデータの量が多いほど、モデルはより多くのことを学習できます
- LLMの学習には、数千億から数兆トークンのテキストデータが使われます

例えば、8000億トークンのテキストデータは、約80万冊分の書籍に相当します。東京都立図書館の全蔵書の約7倍に相当する膨大な量です。


# 主要なモデルのパラメータ数と学習データ量

この表から、最新のLLMがいかに膨大な量のテキストデータを使って学習されているかが一目瞭然ですね。
Chinchilla則（パラメータ数の20倍の学習データ量）を満たすか、それ以上のデータ量が使われているのがわかります。


| モデル名      | 会社    | パラメータ数 | 学習データ量(token)    | パラメータ数:データ比率 | 学習データ量                                                        |
|---------------|--------------|--------------|----------------|-------------------------------------|-------------------------------------------------------------------------|
| Mixtral       | Mixtral AI  | 1760億       | 8000億 | 約46倍                              | 約80万冊分に相当 |
| Command R+    | Cohere     | 1040億       | 4000億 | 約40倍                              | 約40万冊分に相当 |
| Grok 1.5      | Grok      | 3140億       | 6000億 | 約20倍                              | 約60万冊に相当 |
| Claude-3 OPUS | Anthropic | 2兆          | 4兆   | 約20倍                              | 約400万冊分に相当 |

###  参考資料

本記事で載せる各モデルのパラメータ数などはいかの資料をインプットにしています。
モデルサイズなどは推定値を含みます。

https://docs.google.com/spreadsheets/d/1O5KVQW1Hx5ZAkcg8AIRjbQLQzx2wVaLl0SqUu-ir9Fs/edit#gid=1158069878

https://docs.google.com/spreadsheets/d/1kc262HZSMAWI6FVsh0zJwbB-ooYvzhCHaHcNUiA0_hY/edit?gid=1158069878#gid=1158069878
「。」「、」⇔「，」「．」の変換をするだけのサイトを作った

# はじめに
タイトル通り，「。」「、」⇔「，」「．」の変換をするだけのサイトを作りました。
理系の習慣で普段IMEの設定をカンマピリオドにしているのですが、句読点で書くべき場面なのにカンマピリオドで文章書いちゃったときに直すのがめんどくさいので作りました。
あとHTMLの勉強も兼ねてます。Netlifyという無料でドメインを取得できるサービスを使いました。
## リンク
https://kutouten-henkan.netlify.app/

# 使い方
変換したい文章を上のテキストボックスに入れて変換ボタンを押すだけです。変換先は選べるので、句読点をカンマピリオドにすることもできます。ちなみに全角にしか対応してないので注意。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633459/5b71e25d-bab1-5536-9b83-a705812ebf04.png)

# 最後に
みんなもカンマピリオドを句読点に変換しよう！
~~調べたら似たようなサイトが結構あって草~~
fivem(QBcore)のおすすめのScript


TimeAndDateDisplay-FiveM
```
https://github.com/JokeDevil/TimeAndDateDisplay-FiveM!
```
・画面端にPlayerID表示可能になる
![20240420234233_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532249/a2c22fd7-869c-6abc-3945-a66a9140ef3a.jpeg)
qb-commandbinding
・ショートカットの登録
```
https://github.com/OutWarx/qb-commandbinding
```
qb-customsをカスタマイズされたver fs-custom
・乗り物修理
```
https://github.com/1zetsubou/fs-custom
```
・衣類バック
```
https://github.com/MT-Scripts/mt-clothingbag
```
jim-mining
・銅山
```
https://github.com/jimathy/jim-mining?tab=readme-ov-file
```
QBcore内の犯罪Script
mt-stealfuel
・ガソリン窃盗
```
https://github.com/MT-Scripts/mt-stealfuel
```
mt-storerobbery
・コンビニ強盗
```
https://github.com/MT-Scripts/mt-storerobbery
```
tc-robmeter
・パーキングメーター強盗
```
https://github.com/TonyCapon3/tc-robmeter?tab=readme-ov-file
```
tc-hostage
・人質
```
https://github.com/TonyCapon3/tc-hostage?tab=readme-ov-file
```
GASで古いメールを自動でアーカイブする

## 概要
・Gmailで受信トレイにある7日以上たったメールをアーカイブする。
・address箇所を自分のメールアドレスに変更すれば実行可能。

## コード
```js
// メイン関数
function cleanGmail() {
    // XXXXXを自分のメールアドレスに変更する
    var address = 'to:' + 'XXXXX@gmail.com';
    
    // serchWord：アーカイブするメールの条件 
    // in:inbox：受信トレイ 
    // before:getPreviousDate(7) ：7日以上前のメール
    var searchWord = 'in:inbox before:' + makePreviousDate(7) + ' AND ' + address;
    archiveMailBySearch(searchWord);
}

// 条件に沿ったメールを1件ずつアーカイブ
function archiveMailBySearch(searchWord) {
    // GmailAppの制限でアーカイブできるメールは最大500件まで
    var myThreads = GmailApp.search(searchWord);
    myThreads.map(function (thread) {
        thread.moveToArchive();
    });
}

// n日前の日付を取得
function getPreviousDate(n) {
    //現在の日時を取得
    var date = new Date(Date.now());
    // setDateでn日前を取得
    date.setDate(date - n);
    //フォーマット変更
    result = Utilities.formatDate(date, Session.getScriptTimeZone(), "yyyy/MM/dd");
    return result;
}
```
## 参考
・[【GAS】Gmailで自動アーカイブや自動削除](https://qiita.com/golyat/items/42f6cbcd4d1fcc2d5744)
・[Class GmailThread ](https://developers.google.com/apps-script/reference/gmail/gmail-thread?hl=ja)

ご覧いただきありがとうございました。m(_ _)m
【RotorHazard】Raspberry Pi 3B USBブート対応＋USB-SSDへディスクイメージコピー

# 24. 通常の三倍の機動力を見せてやれ！ｗ

この記事はFPVドローン ラップ計測システム【RotorHazard】をRaspberry Piで作成するにあたってのTipsをまとめたものです。ですが一般的なラズパイ構築方法としても参考になるかと思いますので、ぜひご活用ください。

### 24-1. USBブートモードに変更してSSDを使うん！

Raspberry Pi 3B+以降は最初からUSBブートができるようになっているのですが、ラズパイ3Bはできないのです。今回、ドローン仲間なYanazooさんよりRotorHazardの検証のためにラズパイ提供を受けて初めて知りました。なのでまずはここの封印を解くのでありますｗ

色々なラズパイ系の他記事を見てもUSB-SSDから起動させて使うと、ディスクIOのパフォーマンスは標準のmicroSDよりも相当違い、レスポンスよく使えるともありますしねー。またラズパイ3BとかはUSB2.0規格なので全然限界値は低いため、SSDだとしても旧規格のもので十分でしょうし。mSATAのものが利用できればもっと小さく収めることもできるでしょうし。

そんなこんなでポイントを書いていければと思います。
まず最初に下記コマンドを入力し、ラズパイ本体のUSBブート状態を確認します。
```
vcgencmd otp_dump | grep 17:
17:1020000a
```

ここで 17: の次の数値が **1** になっていると、USBブートができない状態となります。(Raspberry Pi 3B) この値を **3** に変更することでOKになります。
```
sudo vi /boot/config.txt
```

```/boot/config.txtの編集
※一番最後に下の2行を追記してください。

program_usb_boot_mode=1
program_usb_boot_timeout=1
```

そしてそのまま再起動します。
```
sudo reboot (もしくは sudo shutdown -r now)
```

しばらくしてコンソールにログイン可能になったら、先ほどのコマンドを打って状態を確認します。
```
vcgencmd otp_dump | grep 17:
17:3020000a
```
17: の隣の数値が **3** に変更されたのが確認できました。
後はUSBメモリ、USB-SSDなどにディスクイメージをコピーして起動してみましょう。
※動作確認だけならば、microSDのUSB変換アダプタとかでもOKっす。

これ、面白いのはUSB変換アダプタを経由した方がディスクIOは速い？なんて話もあるのですが、ちょっとハード的には飛び出してしまったりしていて、何か事故起こしちゃいそうで怖いので…ワイはそのパターンはやらないかなーｗｗｗ


### 24-2. SD Card Copierを使ってササっとコピー、動きを確認

もうこれは、何回かお話しているので割愛しちゃおうかとー。

https://qiita.com/tmac116/items/4c372e476ddbb36b561b#21-%E5%AE%89%E5%BF%83%E5%AE%89%E5%85%A8%E3%83%90%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E5%8F%96%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%BE%E3%81%97%E3%82%87%E3%81%86

こちらのリンクを見ていただき、USB-SSDにディスクイメージコピーをしてみてください。
また、USBブートはちゃんと電源を落としてから(コード外してから)、microSDは抜いてくださいねー。(ラズパイでやらかした訳ではないのですが、近年に買ったばかりの64GBのmicroSDを壊しちゃったトラウマがありましてｗ


### 24-3. USB-SSDで起動する際のお作法

多分これで、4つのUSBポートにSSDを挿して起動しても大丈夫ではないかと思います。でも1つだけ正常に起動した後、修正を入れておきたい箇所がありますので書き残しておきます。

```
sudo vi /boot/config.txt
```

```/boot/config.txtの編集
dtparam=act_led_trigger=heartbeat # heartbeat for green
#dtparam=act_led_trigger=timer # slow blink for green
#dtparam=pwr_led_trigger=mmc0 # microSD for red
dtparam=pwr_led_trigger=mmc1 # SSD for red
```
はい。3行目は **#** を先頭に入れてコメント行に変更。逆に4行目をコメントアウトして正式パラメータに。これを実施して再起動してくださいませ。

こうすることで、ストレージのアクセスランプ(赤)にすることができます。USB-SSDの変換ケーブル側にアクセス用LEDが搭載されているものもあるのですが、本体で見えた方が良い方もいらっしゃるかと思いますので、ここはこんな感じで合わせておいていただければー。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/5ee1f032-505a-0306-bfe4-4d1437d0e389.png)

ラズパイ構築編のつづきはこちら

https://qiita.com/tmac116/items/bc377f36323086782ad1?1
代表的なアルゴリズム

###
**バブルソート**
右隣の値と比較して大きい方を右に入れ替える。
これを何セットかループさせると値の昇順になる。
#
例：　{34, 20, 10, 6} という配列を昇順に並べたいとき、

【1セット目】
・比較1回目：配列0番目と1番目比較→34の方が大きい→ {20, 34, 10, 6}
・比較2回目：配列1番目と2番目比較→34の方が大きい→ {20, 10, 34, 6}
・比較3回目：配列2番目と3番目比較→34の方が大きい→ {20, 10, 6, 34}

【2セット目】
・比較1回目：配列0番目と1番目比較→20の方が大きい→ {10, 20, 6, 34}
・比較2回目：配列1番目と2番目比較→20の方が大きい→ {10, 6, 20, 34}
※配列2番目と3番目の比較はする必要ない！
なぜなら、1セット目で一番大きい値をセットしたため、3番目の方が大きいという答えはもう出ている。比較しても絶対に入れ替えは発生しない。

【3セット目】
・比較1回目：配列0番目と1番目比較→10の方が大きい→ {6, 10, 20, 34}
※こちらも同様で、1～2セット目で大きい値をセットした文との比較は必要ない。
よってここで終了。

#
といった流れで昇順ソートができる。
これをコードに当てはめると…

```java
// 何かしらの配列
int[] array = {};
for (int i = 0; i < array.length - 1; i++){
    for (int j = 0; j < array.length - (i + 1); j++) {
        if (array[j] > array[j + 1]) {
            // array[j]とarray[j+1]を入れ替える処理
        }
    }
}

```
この外側のforは「セット数」
配列の要素数(length) -1 回
```java
for (int i = 0; i < array.length - 1; i++){
```

内側のforは「比較回数」
配列の要素数(length) - その時のセット数(可変していくiは0始まりのため+1で辻褄合わせ)
```java
for (int j = 0; j < array.length - (i + 1); j++) {
```



###
**フィッシャーイェーツ**
数字をランダムに並べ替えたいとき。
※雑ですが取り急ぎのメモ。

```java
import java.util.Arrays;
import java.util.Random;

public class Fukusyu4 {
    public static void main (String[] args) {
        int[] numbers = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};

        Random random = new Random();

        //要素数の大きいインデックスから順にカウントダウン（10個目→9個目・・・）
        //長さ(要素数)は10個だが、配列番号(インデックス)は0から始まるため、辻褄を合わせるために-1する。
        //このi は、配列のインデックス数を指定するために使う！
        for (int i = numbers.length -1; i > 0; i --) {

            //0からi+1(この場合10)までのランダムな整数を生成。要素が０始まりだから+1
            //random.nextInt(値) ⇒指定した値未満の範囲でランダムな整数を生成
            int rNum = random.nextInt(i + 1);

            //tempに選択中の要素（インデックス大きい順）を退避
            int temp = numbers[i];
            //元の場所（右端）に、ランダム生成された要素番号の数字を格納
            numbers[i] = numbers[rNum];
            //入れ替え
            numbers[rNum] = temp;
        }
        System.out.println("シャッフル後： " + Arrays.toString(numbers));
    }
}



```
【GAS】スプレッドシートの1行目が特定の文字列の列のデータをクリアする

以下のように記述するとスプレッドシートの1行目が特定の文字列の列のデータをクリアできます。

```js
function clearSample() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
  const range = sheet.getRange(1, 1, 1, sheet.getLastColumn())
  const values = range.getValues()[0]

  for (let i = 0; i < values.length; i++) {
    if (values[i] == "サンプル") {
      sheet.getRange(2, i + 1, sheet.getLastRow() - 1).clearContent()
      break
    }
  }
}

```

上記の場合には1行目が「サンプル」である列の2行目以降のデータを削除します。
ITパスポート ITサービスマネジメント

・ITサービスマネジメント
利用者のニーズに合ったITサービスの安定的、効果的な提供とその品質を維持、改善するための一連のマネジメント活動

・ITIL
ITサービスマネジメントに関する成功事例を集めたもの

・SLA
ITサービスレベルについて取り交わされる合意書

・SLM
ITサービスレベルを継続的に維持、改善するマネジメント活動

・サービスデスク（ヘルプデスク）
サービスに関するあらゆる問合せを受け付けるために設置された、利用者に対する単一の窓口

・チャットボット
自動応答技術を用いて実現された、リアルタイムにLINEなどのような会話形式で回答するコミュニケーションツール

・インシデント
ITサービスの品質低下を引き起こす、または引き起こす恐れのある出来事

・インシデント管理
インシデントの原因究明をせずに、通常のITサービスを回復する応急措置を行うプロセス

・問題管理
インシデントが発生した原因を究明し、恒久的な解決策を提示するプロセス

・エスカレーション
上位のスペシャリストに対応を依頼すること

・変更管理
情報システムの変更に伴う影響を様々な観点から検証、評価するプロセス

・リリース管理
変更管理で承認された変更を本番環境に実施するプロセス

・資産管理
ハードウェアの種類やソフトウェアのバージョンなどを管理するプロセス

・ファシリティマネジメント
施設管理の最適化

・UPS
電源の瞬断時や停電時に、システムを終了させるための一時的な電源を供給する装置
Cannot find module 'next/dist/shared/lib/app-router-context'の解決方法

# 問題

Next.jsでビルド時に以下のエラーが表示された。

```terminal
Type error: Cannot find module 'next/dist/shared/lib/app-router-context' or its corresponding type declarations.
```

# 解決方法

NavigateOptionsのimportパスをnext/dist/shared/lib/app-router-context.shared-runtimeに変更することで解決しました。

```ts
// ×修正前
import type { NavigateOptions } from 'next/dist/shared/lib/app-router-context';

// ⚪︎修正後
import type { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
```
llama3の量子化モデルをGoogle Colaboratoryで動かす

## 背景・目的

- llama3を15GBのVRAMで動かしたい

## colabの内容

- ランタイム -> ランタイムのタイプを変更 -> ハードウェアアクセラレータ -> T4 GPUを選択
- 下記の内容をセルに書いて実行する

    ```
    !git clone https://github.com/ggerganov/llama.cpp
    %cd llama.cpp
    !mkdir build
    %cd build
    !cmake .. -DLLAMA_CUBLAS=ON
    !cmake --build . --config Release
    !cp bin/main ..
    %cd ..
    !wget https://huggingface.co/QuantFactory/Meta-Llama-3-8B-Instruct-GGUF/resolve/main/Meta-Llama-3-8B-Instruct.Q4_K_M.gguf?download=true
    !mv 'Meta-Llama-3-8B-Instruct.Q4_K_M.gguf?download=true' llama3.gguf
    text = "太郎くんは10円のお菓子を三つ買うために100円を支払いました。お釣りはいくら？"
    !./main -m ./llama3.gguf --temp 0.1 -p "

system
\n\nYou are a helpful assistant. Please answer in Japanese

user
\n\n$text

assistant
\n\n" -ngl 32 -b 512
    ```

output


> system\n\nYou are a helpful assistant. Please answer in Japaneseuser\n\n太郎くんは10円のお菓子を三つ買うために100円を支払いました。お釣りはいくら？assistant\n\n太郎くんは10円のお菓子を三つ買うために100円を支払いました。10円のお菓子を三つ買うためには、3 x 10 = 30円が必要です。太郎くんは100円を支払ったため、100 - 30 = 70円のお釣りが残ります。 [end of text]

賢い・・！

## 参考

- https://huggingface.co/QuantFactory/Meta-Llama-3-8B-Instruct-GGUF
Homebrew error when install



# error when install homebrew
```
==> Updating Homebrew...
Error: Failed to download https://formulae.brew.sh/api/formula.jws.json!
Failed to download https://formulae.brew.sh/api/cask.jws.json!
==> Downloading https://ghcr.io/v2/homebrew/portable-ruby/portable-ruby/blobs/sha256:d783cbeb6e6ef0d71c0b442317b54554370decd6fac66bf2d4938c07a63f67be
############################################################################################################################################################################ 100.0%
==> Pouring portable-ruby-3.1.4.arm64_big_sur.bottle.tar.gz
curl: (35) Recv failure: Connection reset by peer
Error: Failure while executing; `/usr/bin/env /opt/homebrew/Library/Homebrew/shims/shared/curl --disable --cookie /dev/null --globoff --user-agent Homebrew/4.2.18\ \(Macintosh\;\ arm64\ Mac\ OS\ X\ 14.3.1\)\ curl/8.4.0 --header Accept-Language:\ en --fail --progress-bar --silent --remote-time --output /Users/user/Library/Caches/Homebrew/api/cask.jws.json --location --disable --cookie /dev/null --globoff --show-error --user-agent Homebrew/4.2.18\ \(Macintosh\;\ arm64\ Mac\ OS\ X\ 14.3.1\)\ curl/8.4.0 --header Accept-Language:\ en --fail --progress-bar --silent --compressed --speed-limit 100 --speed-time 5 https://formulae.brew.sh/api/cask.jws.json` exited with 35. Here's the output:
curl: (35) Recv failure: Connection reset by peer

Failed during: /opt/homebrew/bin/brew update --force --quiet
```

# try command

## homebrew command

`brew update` twice
`brew doctor`

## cache clear

`brew cleanup`

# solution

It seems to be a network problem, so waiting for a while or executing it again with another stable wifi may solve the problem.
VIFを計算する

以前書いた<a href="https://qiita.com/murasaki1994/items/d86c49b33f42054f6cfb">記事</a>で自由に値を入れてシミュレーションするならVIFを計算して多重共線性を考慮した上で値を入れましょうと書いたことがあります。
今回はそのVIFについて書いていきます。
>独立変数間の多重共線性を検出するための指標の1つ。独立変数間の相関係数行列の逆行列の対角要素であり、値が大きい場合はその変数を分析から除いた方がよいと考えられる。10を基準とすることが多い。
>『統計WEB』より

分かりやすく言えば説明変数間で独立していない変数があります。でじゃあそういう変数ってどういうものかっていうと変数間で相関がある物だと考えてください。
当たり前ですけど変数間で相関があったらそのまま値を入れちゃダメで、相関に基づく回帰した値を入れないと実データと乖離する可能性があり再現性に難がある可能性があります。
そこでVIFを計算して変数間で相関のある変数を削除して全ての変数を独立させます。
ではここからは具体的にプログラムとデータを使ってやっていきましょう。
# ライブラリのインポート
```Python3
import statsmodels.api as sm
import matplotlib.pyplot as plt
import seaborn as sns
import pandas as pd
import numpy as np
```

# データの読み込み
今回はScikit-Learnにある糖尿病のデータセットをCSVにしたものを読み込みます。
ただ、今回は値を見てもらえば分かる通り最初から標準化されています。
```Python3
df = pd.read_csv("diabetes.csv")
df.head()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782889/4437b56f-61b2-ccc2-b8b8-3045dbdc0306.png)
このデータからなんとなくs1からs6までのどこかで相関がありそうな気がしますよね？

# 説明変数と目的変数を分ける
相関係数とVIFは説明変数で計算しますので分離する必要があります。
```Python3
y = df["y"]
x = df.drop("y", axis=1)
```

# 相関行列を出力
```Python3
x.corr()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782889/30437071-2910-e40a-14d5-072eba3fe7d6.png)
実際に見てみると予想通りs1からs6までで強い相関が見られるところがあります。

# 散布図を描画
データ分析の基本となりますが、相関係数だけでは外れ値や異常値は分からないので一応散布図も見ましょう。
```Python3
sns.pairplot(x)
plt.show()
```
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782889/6f2a58d1-b9db-e43e-acb6-a960d8ba5842.png)
今回は特に外れ値や異常値の類いは見受けられないのでそのまま進めます。

# VIFの算出
やり方は簡単で、相関行列の逆行列の対角要素取り出し、それをデータフレームにして変数名を入れて昇順・降順にします。この時、見方として10を超えるデータを削除対象としますが、それは絶対値で見ます。
```Python3
vif = np.diag(np.linalg.inv(x.corr().values))
df_vif = pd.DataFrame(vif)
df_vif.columns = ["VIF"]
df_vif.index = x.corr().columns
df_vif.sort_values("VIF")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782889/2fc47836-d3a3-17c3-142d-d7c4127632bd.png)
この結果から「s5」「s3」「s2」「s1」が削除対象になります。
これによってあとは学習モデルを使って学習させ、自由に値を入れる事でシミュレーションができます。
正確に書けば間違っていることもあると思いますが、あまり記事になっていなかったので今回書きました。
※ただし欠落性バイアスが発生する可能性も考慮してデータの削除を行ってください
システム設計原則ちょっとかじったくらいでは使い物になりません。

# はじめに
※本記事はシステム設計の正しさとかを求めてる方向けの記事ではありません。

タイトルは他人への煽りとかではなく、自分自身に向けています。

知識も大事だけど実践して振り返ってまた実践して...このサイクルが大事だよという自分へのメッセージです。

これは後述するJPINでもよくおっしゃられていることですね。

SOLID原則とかDI(InversionではなくInjectionの方)とかデザパタ駆使して疎結合、高凝集にしていきましょう。出来る限り、ミュータブルではなくイミュータブルでいこう！

とまぁこういったことが大事な考えであることも、また、どうやったら実現できるのかとか、適用することで何が嬉しいのか、はたまたデメリットはなんなのか。5年目にしてやっと何となく理解出来るようになってきました。

とはいえここまで理解できるようになったのは開発現場やJPINというJavaコミュニティや、Xにいるつよつよエンジニアの方々のお陰です。この出会いがなかったら未だに設計の大切さに気づいてないと思います。感謝してます！ありがとうございます！(JPINとYPSの存在が正直めちゃくちゃでかい。コーディングに関してはRecursionに感謝)

# 本題
java.ioパッケージではデコレーターパターンが採用されてるとかSpringのBeanがデフォルトではシングルトンになるよう設計されてるとか、それは分かったし、知ってることで理解することが出来てもちろん楽しいけれど
実はずっともやもやというか理解できてないことがあるんですよね。
Javaの開発現場だとSpring Bootを使用したプロジェクトがほぼデファクトスタンダードだと思います。そこでSpringプロジェクトでの設計原則との紐付き？活用方法が微妙なんですよね。
多分今まで僕が経験してきた現場のパッケージ構成は駄目とは言わないけど、どちらかというと大勢が関わるということもあってイージーな構成になってたと思います。代わりに保守性とか拡張性など大きな犠牲も払っていたと思います。じゃあその犠牲となっている保守性、拡張性を高めるにはSpringプロジェクトだとパッケージ構成をどう変更したら良いのか、また、それらパッケージの役割分担をどうしたら良いのかという所が具体的によく分かってないんです。

Xでアンテナを適当に張りすぎてるせいなのか、
DDDとかの話とか色々ごっちゃになってしまってる気がしてならない。
ただ知ってるだけで使いこなせてない感がめちゃくちゃあります。

何なら設計の大切さも知らずJavaの言語仕様もろくに分からずFWを使ってずっとガリガリ書いてた時期のほうがただ動くだけのものっていう観点だと作れたんですよね。。。

なんなら今は下手に中途半端な知識が邪魔をして手が止まってしまうことが多く、今まで出来てたことは忘れてるし、覚えてることも今では技術的に陳腐化してて時代遅れだったりでほとんど出来ることも残ってない笑

ということで現状全てが中途半端なので誤ってる前提です。
ただ、絶対の正解もないとも思ってるので自分の考えをちゃんとここに残し、新たな気付きがあればあっぷでーとしつつ理解を深めていけたらと思います！

**とりあえず自分の中での型が一つ欲しい。**

## 2024年4月20日時点の考え
- 白コメント：考え方的に問題ないと思う。
- 黄コメント：ちょっと自信なし。
- 赤コメント：ほぼ自信ない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457845/0b951566-6254-cd0e-9544-9e781bfdd66c.png)

## 2024年4月21日時点の考え
- 白コメント：考え方的に問題ないと思う。
- 黄コメント：ちょっと自信なし。
- 赤コメント：ほぼ自信ない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457845/fd47168f-04c4-2160-3a6e-24e17298340b.png)
2024年4月20日時点からFormの考え方が変わりました。
自分の中ではかなりすっきりしてる。
Formクラスのアクセス修飾子は少し悩むな。
robots.txt、構造化データ、メタデータについて

## はじめに
検索エンジン最適化（SEO）における、robots.txt、構造化データ、メタデータについてまとめました。

## 1. robots.txt

robots.txtは、検索エンジンロボットに対して、どのページをクロールして良いかを指定するファイルです。robots.txtファイルには、以下の情報が含まれます。

User-agent：どの検索エンジンロボットに対して指示を行うかを指定
Disallow：クロールを許可しないページを指定
Allow：クロールを許可するページを指定
Sitemap：サイトマップファイルの場所を指定

robots.txtは、検索エンジンロボットが効率的にサイトをクロールできるようにするため必要なファイルで、robots.txtを作成していないと、クローラーがすべてのページをクロールしてしまう可能性があり、Webサイトに悪影響を及ぼす可能性があります。

robots.txtファイルの例

```yaml
User-agent: *
Disallow: /admin/
Allow: /admin/login
Sitemap: https://example.com/sitemap.xml
```

## 2. 構造化データ

構造化データは、検索エンジンに対して、Webページの内容をより詳しく説明するための仕組みです。構造化データを記述することで、検索エンジンがコンテンツを理解しやすくなるのと検索結果にリッチリザルトが表示されやすくなります。

構造化データには、以下の種類があります。

ローカルビジネス：店舗情報
記事：記事タイトル、著者、公開日など
製品：製品名、価格、画像など
イベント：イベント名、開催日、場所など

https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja

構造化データを使用するには、Webページに専用のコードを記述する必要があります。構造化データのコードは、Googleなどの検索エンジンのサイトから取得できます。

構造化データの例

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "株式会社Hoge",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Hoge Street",
    "addressLocality": "Tokyo",
    "postalCode": "100-0001",
    "addressCountry": "Japan"
  },
  "telephone": "+81-3-1234-5678",
  "url": "https://example.com"
}
</script>
```

## 3. メタデータ

メタデータは、Webページに関する情報を記述するためのタグです。メタデータは、主に以下の用途に使用されます。

検索エンジン：検索結果に表示されるタイトル、説明文、キーワードなどを指定
ソーシャルメディア：ソーシャルメディアで共有される際のタイトル、説明文、画像などを指定

メタデータはWebページのヘッダー部分に記述され、HTMLのmetaタグを使用します。

メタデータの例

```html
<meta name="title" content="株式会社Hoge">
<meta name="description" content="株式会社Hogeは、Web開発の会社です。">
<meta name="keywords" content="Webサイト制作, システム開発">
```

## JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします👇
現在、LINE登録特典プレゼント中🎁

https://projisou.jp/
SCRUM BOOT CAMPを読んで気づいたこと

## はじめに

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618958/722ee8e8-e786-2a01-d952-198a023e9b77.png" width="150"/>

今更ながら[SCRUM BOOT CAMP THE BOOK](https://www.shoeisha.co.jp/book/detail/97847981672820)を読みました。
読んで気づいたことを３つ紹介したいと思います。
※私自身スクラム実践経験は無いため認識齟齬あるかもしれません。


#### 1. バグを直すのではなく、バグが生まれるプロセスを直す
スクラムではスプリントという開発周期の最後にスプリントレトロスペクティブという`ふりかえり`を行います。そこで次はもっとうまくできるように改善のアクションを決めます。

その中で書いてあるのが見出しの内容です。バグが生まれる理由はあるのでそれを改善するのは大事だと思います。例えば要件定義をちゃんと確認していなかったから漏れてしまったという理由であれば、そこを直さなければ再発する可能性があります。

#### 2. 不安に思っていることをなんでも良いから紙に書いてみてよ。書けたら他の人に回すんだ
この本では架空の開発現場を題材に所々漫画があります。その一場面でスクラムマスターが「少しでもうまく作業できるように原因を知りたいんだ」と言った後、見出しの内容を行なっています。

そこでは「前に書いたコードが汚すぎて修正が大変すぎる」という内容が書かれていました。
雑談時やレビュー時などにこういう話題が出ることはあるのですが、デイリースクラム（毎朝行う15分のタスクと課題の確認会）では話題に出ることが少ない印象です。※私の経験上
それをスクラムマスターや上の人たちが認識していない状態で、現場で大変だけど頑張るということが多い。
そのためこういうアプローチで課題を見つけるのは良いなと思いました。

#### 3. そのときどきの状況で最も力を発揮できる人がリーダーシップを発揮して開発チームを引っ張っていけば、どんな状況でも乗り越えやすいと思わないだろうか？
「優秀な開発メンバーで構成されていないとスクラムは成立しないのだろうか？実はそれは誤解だ」とあり、見出しの文章に続きます。

開発リーダーがなんでもできるわけではありません。私もiOSアプリの開発リーダーはやってますが、サーバのことはそこまで詳しくありません。私より若いメンバーの方が何倍も詳しいです。サーバに関してはメンバーの方がリーダシップを発揮してくれると、私や他のメンバーも成長できるしすごく良いチームになると思います。
そんなチームに居たいとも思いました。

#### 最後に

この本ではスクラムの流れや大切なことが沢山書いてありますが、スクラムのやり方というよりは改善やチームの作り方に関して参考になったという印象でした。
実際開発でスクラムをやるぞ！となったらまだまだ理解が浅すぎて勉強しないといけないですが、明日からでも実施できる内容があって大変良かったです。
enumを設定することで使用できるscope・メソッド

## enumとは
modelでの設定方法：
```ruby: user.rb
class User < ApplicationRecord
    enum status: { pending: 0, approved: 1, rejected: 2 }, _prefix: :state
end 
```
この設定を行うことで、usersテーブルのstatusカラムに保存される整数値（0, 1, 2）に対して、それぞれpending、approved、rejectedという名前を割り当てることができます。データベース内の値が何を意味するのかが一目でわかりやすくなり、コードの可読性が向上させることができます。

また、prefixオプションを使用することで、同じモデル内に同名の属性が存在する場合でも名前の衝突を避けることができ、スコープやメソッドの名前が衝突することを避けることができます。また、コードの可読性も上げることが可能です。このため、基本的にはprefixを設定するべきだと思います。

## enumを設定することで、使用できるようになる機能
### scope
```ruby:user.rb
User.state_approved
```
このスコープを用いることで、statusがapprovedに設定されているユーザーのみを取得できます。
```ruby:user.rb
User.not_state_approved
```
また、statusがapprovedではないレコードを取得することもできます。
```ruby: user.rb
#よくないenumの設定例
class User < ApplicationRecord
    enum status: { not_hoge: 0, hoge: 1 }
end
```
scopeの名前が衝突してしまう可能性があるので、enum設定時に、not_hogeというよなnotをつけた形での否定形の命名を行わないようにしましょう。 
```ruby:user.rb
User.where(status: :approved)
```
enumを直接使用して、クエリを書くことも可能です。

### 値の設定と判定を行うメソッド
```ruby: user.rb
user = User.new
user.state_approved!
```
state_approved!メソッドを使用することで、Userインスタンスのstatusをapprovedに更新することができます。
```ruby
user.update!(status: :approved)
```
と同様の挙動になります。

```ruby:user.rb
if user.state_approved?
    #省略
end
```
userのstatusがapprovedであるかどうかを判定できます。

### まとめ

〇enumの設定方法について
    - 可読性と拡張性の観点からprefixを設定する
    - not_hogeというような否定形の命名を行わない
〇enumを設定することで、下記の3つが自動生成される
    ・scope
    ・値の更新ができるmethod
    ・値の判定ができるmethod
【Laravel】リソースコントローラー削除&編集機能

## 削除機能
https://note.com/sungi_note/n/n3b3ca0bdcb82

https://qiita.com/RealXiaoLin/items/6a309499f1aa86cb8b07#index%E3%81%8B%E3%82%89destroy%E3%81%B8%E5%89%8A%E9%99%A4%E3%81%97%E3%81%9F%E3%81%84%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E9%80%81%E3%82%8B

## 編集機能
https://kekaku.addisteria.com/wp/20200829023208#toc10

### 削除機能、編集機能時に@method('DELETE')/@method('PATCH')を記載する理由
HTMLフォームはGET or POSTのみが許可されている。
だからフォームのDELETEリクエストを使う場合は、擬似的に使う方法をとる。

#### @method('DELETE')の例
```
<form action="{{ route('spending.destroy', ['spending' => $spending['id']]) }}" method="post">
    @csrf
    <!-- HTMLフォームはGET or POSTのみが許可されている。
    だから↓フォームのDELETEリクエストを使う場合は、擬似的に使う方法をとる↓。 -->
    @method('DELETE')
    <button type="submit" class="btn btn-danger ml-5">削除</button>
</form>
```

#### @method('PATCH')の例
```
<form action="{{ route('spending.update', ['spending' => $spending['id']]) }}" method="post" class="mt-5 date_option">
    @csrf
    @method('PATCH')
    <div class="form-group">
        <label for="date">日付</label>
        <input type="date" id="date" name="date" value="{{ $spending['date'] }}" class="date_border form-control">
    </div>
    <div class="form-group">
        <label for="title">タイトル(20文字以内)</label>
        <input type="text" id="title" name="title" value="{{ $spending['title'] }}" class="form-control">
    </div>
    <div class="form-group">
        <label for="amount">支出金額(11桁以内)</label>
        <input type="number" id="amount" name="amount" value="{{ $spending['amount'] }}" class="form-control">
    </div>
    <div class="mt-4">
        <button type="submit" class="btn btn-primary">更新</button>
    </div>
</form>
```
中年勇者ぼうけんのしょ　14日目

お久しぶりです

早いもので二週間が過ぎました。
現場が大変で四苦八苦なうですけどなんとかくらいついてます

今回は日記！！

受注クエスト紹介

・セキュリティ機器の運用保守

過程（1/？)
一週間でシステムをすべてアップグレードするためにかかれた簡易手順書のレビューをしろ！(目標達成)

過程（2/？）イマココ
仮想化基盤のバージョンアップ
ボスキャラが大量発生したため進捗なし

過程3
正常性確認テスト


受注サブクエスト

WSUSで23H2が表示されない事象が発生！
戦闘員は至急配置につき原因を調査せよ！
恐らくWSUSの設定が正しく行われていないことが原因、レジストリも確認した方がいい
→返答
→放置

戦利品

・20EXP
・Linuxのコマンド知識
・仮想化基盤ソフトの名前とクラスタリング
・大規模なネットワーク環境でのバックアップの取り方
・WSUSの知見
・食堂のおいしいお米


エンカウントした敵

・フル英語の手順書
・見たことも聞いたこともない用語と機器名
・参考資料が共有されない簡易手順書
・外部ネットワークへアクセスできないPC
・ミスを他責にする人


現在装備とパーティ

・スマホ
・私（中年勇者）
・魔導士はコロナで戦闘不能

今回は多分特に実務というよりお勉強だったと思います
ミスを他責にするのはよくないですね、、
他責にした瞬間学ばなくなるから人として成長しなくなる。
「Could not create an account as firebase@flutterflow.io to your Firebase project. Make sure "Email Sign-In" is turned on for your Firebase project, and try again.」エラーが出たので修正した話

FlutterFlowで
```
Could not create an account as firebase@flutterflow.io to your Firebase project.
Make sure "Email Sign-In" is turned on for your Firebase project, and try again.
```

というようなエラーが出た場合の対処法

## 「Open Firebase Consle」を押して一度もfirebaseを作成していないようだったら
（以下の写真のように「Open Firebase Consle」を押して「3個のアプリ」になっていない場合）
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333636323230392f61313464363762332d356230362d626164642d333337392d3939336132353332366535302e706e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662209/4cef4e51-e0a1-8172-0566-5c6956d60329.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662209/a794df5c-56e4-2b26-276f-e7a4fb29a71d.png)
### 設定画面まで行きます。
Regenerate Config Filesを押し

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662209/a14d67b3-5b06-badd-3379-993a25326e50.png)


以下の画面が出たら「Generate Files」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662209/9c3a9d82-2c84-c48e-4086-58ad11cea3a7.png)


## 「Open Firebase Consle」を押しfirebese画面に移行します。
「Authentication」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662209/d5c2d9fa-e746-71c5-416a-393ebab0c503.png)
### 「始める」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662209/41371701-167d-95d4-80b6-469f94842541.png)

メール/パスワードを有効にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662209/3d15ec9b-5970-d1ce-b666-c7aaae3f6d2f.png)

もどると以下の画面になっていると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662209/38718e55-c718-7d80-5fe5-b2608203d017.png)

以上のようにしエラーを修正しました。
【Laravel】フラッシュメッセージのやり方

## フラッシュメッセージのやり方
https://qiita.com/RealXiaoLin/items/6a309499f1aa86cb8b07#%E3%83%95%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%AE%E8%BF%BD%E5%8A%A0

## ページ遷移で詰まった時に見る用
```
// ①トップページへ遷移する場合
return redirect('/')->with('status', '予算の登録');

// ②route先が引数を要求しない場合
return redirect()->route('profile.index')->with('status', 'プロフィール画像の更新');
↓
↓ ルーティング先
↓
public function index()
{
    $user = Auth::user();
    
    return view('original.profile.index', [
        'user' => $user,
    ]);
}

// ③route先が引数を要求する場合
return redirect()->route('spending.show', ['spending' =>  $id])->with('status', '支出の更新');
↓
↓ ルーティング先
↓
public function show(int $id)
{
    $spending = Auth::user()->spending()->find($id);

    return view('original.spending.show', [
        'spending' => $spending,
    ]);
}
```

## その他参考サイト
https://ensei1375.com/laravel-redirect/

https://qiita.com/gone0021/items/685cae680fe6163f9a9f

https://qiita.com/manbolila/items/767e1dae399de16813fb

https://qiita.com/kouki_o9/items/c01fc611f80fd3ca5e7f

https://readouble.com/laravel/6.x/ja/responses.html#redirects
VSCodeでWSL接続時にエラーが起きた


ある日、VSCodeでWSLに接続して開発をしようとしたら、下記のダイアログと共に、下記のメッセージが出ました

ダイアログ
「VS Code Server for WSL closed unexpectedly」

メッセージ
```
[2024-04-20 12:58:09.614] WSL version: 4.19.128-microsoft-standard Ubuntu-18.04
[2024-04-20 12:58:09.614] WSL-shell-PID: 636
[2024-04-20 12:58:09.614] Node executable: /root/.vscode-server/bin/e170252f762678dec6ca2cc69aba1570769a5d39/node
[2024-04-20 12:58:09.614] Starting server: /root/.vscode-server/bin/e170252f762678dec6ca2cc69aba1570769a5d39/bin/code-server --host=127.0.0.1 --port=0 --connection-token=2565175669-307080044-3745254317-1690967471 --use-host-proxy --without-browser-env-var --disable-websocket-compression --accept-server-license-terms --telemetry-level=all
[2024-04-20 12:58:09.614] /root/.vscode-server/bin/e170252f762678dec6ca2cc69aba1570769a5d39/node: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28' not found (required by /root/.vscode-server/bin/e170252f762678dec6ca2cc69aba1570769a5d39/node)
[2024-04-20 12:58:09.614] スタートアップの問題のヘルプについては、https://code.visualstudio.com/docs/remote/troubleshooting#_wsl-tips にアクセスしてください
[2024-04-20 12:58:09.615] NodeExecServer run: C:\WINDOWS\System32\wsl.exe -d Ubuntu-18.04 -e kill 636
[2024-04-20 13:01:42.770] Download in background is enabled
```

> /root/.vscode-server/bin/e170252f762678dec6ca2cc69aba1570769a5d39/node: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28' not found (required by /root/.vscode-server/bin/e170252f762678dec6ca2cc69aba1570769a5d39/node)

なんだこれは、となったので解決方法を書きます

## 結論
WSLで利用していたディストリビューションがサポート対象外になった
利用していたのがUbuntu18.04だったので、Ubuntu22.04をインストールして変更した

## 過程

環境
```
VSCode 1.88.1
WSL Ubuntu-18.04
```

エラーが起きた原因の心当たりは、直近で設定を変更したりしていないので特になく、可能性があるとすればWindowsUpdateかなと思っていました

しかし、そもそもNodeのインストールをWSLのUbuntuにはしていなかったので、なんでNodeを起動しようとしているのかなーっと思っていましたが、同じようなエラーのIssueを発見しました
https://github.com/microsoft/vscode-remote-release/issues/9796

追ってみると、どうやら古いシステムのサポートを切るという話をしているようでした
https://github.com/microsoft/vscode/issues/203375

つまり、Ubuntuが18系であることが問題そうだったので、WSLのディストリビューションをUbuntu22系に変更しました
1. WindowsにUbuntu22.04をインストール
1. ディストリビューションの変更( https://qiita.com/honda28/items/376c878a7706cd531801 )
1. VSCodeからUbuntu22.04に接続

## 感想
原因はVSCodeのアップデートで、参照しているインスタンスがサポート対象外になったよね、という話でした。今回はGithubのIssueを運よく見つけられたおかげで解決できましたが、このIssueを見つけていなければ永遠にさまよっていた気がします。
コードの実行はすべてDockerで行って、コード管理もGithubで行っていたおかげで、18から22の移行もすぐ済みそうです。


## 参考資料
https://code.visualstudio.com/docs/remote/vscode-server
#12 地図クイズ

今回のテーマはクイズです。日本の各都道府県の形を問題として使用し、アプリを作成する予定です。

## 成果展示：

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/f4e782b9-70fc-cc38-ed2b-4b35a67daa3b.gif)

![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/b3b48735-d56b-6610-5ab1-49f6ecd03158.gif)

ゲームの主な機能は、JapanAreaViewControllerに集約されています。このコントローラーは、地図の表示、問題の更新、回答の検証プロセスを管理します。各地域の名前とそれに対応する画像は、AreaNameという構造体に保存されています。このデータ構造は、データの管理と更新を容易にします。

```
struct AreaName {
    let kannji: String
    let alpha: String
}
```

JapanAreaViewController内では、日本の各地域の情報を保存するJapanAreas配列を初期化しました。この配列はビューがロードされる際にランダムにシャッフルされ、ゲームの問題の順番が毎回異なることを保証します。ユーザーが回答を選択するたびに、このコントローラーは回答が正しいかどうかをチェックし、結果に基づいてユーザーインターフェースを更新します。

```
class JapanAreaViewController: UIViewController {
    @IBOutlet weak var correctCount: UILabel!
    @IBOutlet var answerButton: [UIButton]!
    @IBOutlet weak var wrongCount: UISegmentedControl!
    @IBOutlet weak var image: UIImageView!
    var JapanAreas = [
        // 各都道府県の情報を初期化
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.hidesBackButton = true
        JapanAreas.shuffle() // 地図をシャッフル
        reset(country: JapanAreas, correctCount: correctCount, answerButtonIndex: answerButtonIndex, image: image, answerButton: answerButton)
    }
}
```

reset関数とnextQuestion関数は、インターフェースを更新し、新しい問題を設定するために使用されます。これらの関数はJapanAreasデータから地域を選択し、地図の画像とオプションボタンのテキストを更新します。

```
func nextQuestion(index: IndexStruct, image: UIImageView!, area: [AreaName], button: [UIButton]!, correctCount: UILabel!) {
    // 次の問題の処理
}

func reset(country: [AreaName], correctCount: UILabel!, answerButtonIndex: IndexStruct, image: UIImageView!, answerButton: [UIButton]!) {
    // UIをリセットする処理
}
```

## まとめ
現在はボタンを使って前のページに戻っていますが、これはメモリに負担をかけるため、次のバージョンではdelegateを使用して戻る方法を学習し、メモリ負担を減らす予定です。

https://github.com/liyoway/JapanMapQuiz
pygameでキャラを歩かせる

pygameでゼルダの伝説みたいな感じのゲームを作ってみたいと思い、色々試作中。
自分用メモ

import pygame
import sys
from pygame.locals import *

player_img = pygame.image.load('chara_img/pipo-charachip017c.png')
tmr = 0
ANIMATION = [1,0,1,2]
pygame.init()
pygame.display.set_caption('メイドさん')
screen = pygame.display.set_mode((400,400))
clock = pygame.time.Clock()
font = pygame.font.Font(None,80)

running = True
while running:
    tmr += 1
    # イベント処理
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
            
    # 画面をクリア
    screen.fill((0, 0, 0))
    
    #動き方のテスト
    screen.blit(player_img,dest=[10,10],area=[(tmr%3)*32,0,32,32])
    screen.blit(player_img,dest=[10,50],area=[(tmr%3)*32,32,32,32])
    screen.blit(player_img,dest=[10,90],area=[(tmr%3)*32,64,32,32])
    screen.blit(player_img,dest=[10,130],area=[(tmr%3)*32,96,32,32])
    pygame.draw.rect(screen, (255, 0, 0), (5,5,40,170), width=2)
    
    screen.blit(player_img,dest=[50,10],area=[ANIMATION[tmr%4]*32,0,32,32])
    screen.blit(player_img,dest=[50,50],area=[ANIMATION[tmr%4]*32,32,32,32])
    screen.blit(player_img,dest=[50,90],area=[ANIMATION[tmr%4]*32,64,32,32])
    screen.blit(player_img,dest=[50,130],area=[ANIMATION[tmr%4]*32,96,32,32])
    pygame.draw.rect(screen, (0, 0, 255), (51,5,40,170), width=2)
    
    sur = font.render(str(f'{(tmr%4)}:{ANIMATION[tmr%4]}'),True,(255,255,255))
    screen.blit(sur,[200,100])
    
    pygame.display.flip()
    pygame.display.update()
    clock.tick(5)
         
pygame.quit()
sys.exit()

素材はぴぽや倉庫様より。
アニメーションのコードを参考にしたのは、Pythonで作るゲーム開発入門講座　実践編。

Surface.blit(source, dest, area=None, special_flags = 0): return Rect
→destで表示させたい画像の座標を指定できる。
→areaで読み込んだ画像中から、一部だけ切り取って描画範囲を指定できる。[x座標,y座標,幅,高さ]
32x32ピクセルの画像が3列4行。
始まりのｘ座標を32×0,32x1,32x3で指定すると、ちょうど１モーション分の画像が描写される。
AWS SAP合格報告と大規模移行PJを通して感じたこと

今年度初投稿となります！（もう新卒１年目の肩書きはつかえないです、、）

2024/04/20、AWS SAPに合格しました。
４月以降PJがちょいと忙しかったのでテスト勉強をする時間は10時間くらいしかなかったのですが、記事を書くことでいろいろと振り返りをしたいと思います。

#### 1.PJについて
現在大規模AWS移行プロジェクトに参画しています。
私はインフラの部署にいるので、アプリ側に引き渡すまでが主な仕事になります。

４月から始まったのですが、中小規模のシステムに関しては
現行調査・方式設計・詳細設計・構築・テストなどすべての工程を担当させていただくことになりました。

そのためLinuxやWindowsの知識も積み上げていく必要があり、４月からなかなかハードな２０日を過ごしました😎
だいぶ成長しているので、この調子でPJと向き合っていきたいと思います。

プロジェクトをすすめていく中で感じたことがあるので頭の整理をするためにこの記事を書こうと思います。

#### 2.PJを通して感じたこと

##### 2.1 現行調査
まずは**現行調査**についてです。

今回はRHEL３、４など古いOSの現行調査をすることになりました。

しかし対象OSが古すぎるということもあり、現行調査の対象項目やコマンドの情報を社内で見つけることができず０から作成する必要がありました。

どこかの個人のPCにはその宝物が眠っているのではないかと思うのですが、さすがにたどり着けませんでした。😂

これを受けて、社内の知をわかりやすく１カ所に集約することの重要性を改めて感じました。実際に社内ではその流れはあるので積極的に生産性の向上に貢献していきたいと思います。



##### 2.2 方式設計
次に、**方式設計**について、
パッチ適用自動化の方式設計を作成していたのですが、お客様の要件や現行の運用チームの要件をヒアリングしていったところ、教科書通りのアーキテクチャ図にはならずに苦労しました（笑）

改めて移行プロジェクトの難しさを感じました。

資格を通してさまざまなAWSサービスの存在や使い方を学び、実務では多方面の関係者の意図に合致したものを作っていく必要があります。

机上と実務の両方で研鑽することを続けていく姿勢が、今後の強みになると思うので資格の勉強はどれだけ忙しくても続けていきたいと思います。


#### 3.さいごに

チームに貢献するためにも、各工程で標準化できる資料は標準化し、
知を共有できる仕組み作りなどを進めていきたいです！
スプリント開発で感じて改良したほうがいいんじゃないかと感じたこと

# 最初に
この記事はスプリント開発を否定しているわけではないことをご承知いただければと思います。

# 自分の立ち位置
委託開発で、スクラム開発をやることになった
そのうえで、委託メンバーのスキル不足や仕様考慮が懸念されること＋今後委託元の会社でどうやってやっていくかを考えるうえでのブレインとして参画
スクラムマスターは外部のコンサル会社さんでかなりスクラムについては詳しい方
委託元・社内メンバーは、ウォーターフォールしかやってこなかった。

社内でもスプリント開発がいい場面があるけど、どうやって社内としてやっていくか（人件費との兼ね合いもふくめ）考える必要があったので改良案を検討

→検討中未実施なのでコメントなどでご意見をいただけると助かります。（こういったことで困ったこともあるからなども募集中）
　随時改定予定

# スプリント開発を1.5か月やって感じたこと＆いわれたこと
・知識が多い優秀な開発目線ではやりやすいことが多い
・知識差でやることが異常に増える
・開発未経験者へのやりとりが難しい（受託開発だと難しいところはオブラートに包めた）
・スクラムマスターが現場の阻害になることがある（柔軟なスクラムマスターだと変わる？）
　→意図していることはわかるし、重要性もわかるけど・・・
・委託メンバーが多くアウトプットが出せないことがまれにあり、なにやってるの？と言われる
・個々人の予実管理ができず評価がしずらい
・打ち合わせが多い
・長期的に見た課題ができらない（現在のことに集中してしまう）

# 根本における問題点・解決可能か？
・メンバーの知識不足・向上心（相補問題）
　→解決可能かもしれないし、解決できないかもしれない
　→私目線は各々で解決してほしいが強制はできない（職業エンジニアとして考えると強制するとパワハラ等にも該当する）
・予実管理ができない
　→ストーリーポイントの曖昧さを回避すれば実現可能
・アウトプットがない
　→想定外の事象が発生しても現在のアウトプットをレビューで出すことを義務づける（誰にでもわかるように記載する）
 ・長期的な課題が解決できない
 　→POがストーリマップを作成して、課題を出すためのスプリント期間を設けるべき）
・打ち合わせが多い
　→打ち合わせを減らす
 　スプリント開発で提唱されている打ち合わせが本当に必要か考える妄信しない

# じゃあなぜそうなるか（個人的見解）
スプリント開発が少人数でプロフェッショナルなチームであるべきことが提唱されいているから
→正直、日本ではマッチしずらい（コスト面で非常に大きな負担がかかる）
利益追求を考えると非効率なことが多い

# 提唱するスプリント開発の手法

流れとして
スプリントプランニング→スプリントレビュー→レトロスペクティブ
を繰り返すことは変更しない

ただし、上記の時間短縮や実行タイミング等を見直す

※ストーリーポイントについて
　曖昧さを排除する、例えば、時間で出す、日数で出すなど、あいまいな記載方法をしない
 　→曖昧だとエンジニア以外のメンバーが理解できないため

スプリント期間が2週間の場合で想定

1週目～2週目
　開始時：スプリントプランニング（1時間）
　ここでは必ずメンバーがチケットの内容を確認し、質問事項を列挙しておく
　POは開始以前に確認が取れるように次のスプリントのチケットを列挙されているようにする。
　10分以上、同様の事象で議論した場合、基本的には次のスプリントに乗せる（それまでに議論する）
　→今スプリントで行う場合には、そのチケットに到達するまで該当メンバーで議論をすます

　終了時：スプリントレビュー（30分）
　 ここでは必ずメンバーが事前に話す内容を決めておく＋アウトプット資料を作る
   レビュー参加者も事前に確認をしておく

   議論が発生し10分以上続いた場合、別の機会を設ける

3週目～4週目
　開始時：スプリントプランニング（1時間）
　終了時：スプリントレビュー（15分）
　＋レトロスペクティブ
 　　レトロスペクティブでは、事前にKeep、Proplemを出しておく
　　 この場やることは、Tryとそれをいつまでにやるかを決める。

# 各メンバーの考え方について
スプリント開発をする上では、大きな問題になるスキル等の問題については
強制ができないことも考慮して、考えないことがよいと思う

ただし、POやリーダークラスが率先して歩み寄る努力をすること
歩み寄る努力とは、アプローチを変えて説明したり、あいつらはエンジニアじゃないからで説明しない
ではなく、最低限概要がわかる状態にしておくことが重要（これがないと決定もできない、上に報告もできないとなってしまう）

# 個人的に聞きたいことみんなどう思ってるのか？知りたいこと？
スプリントマスターの重要性＋具体的に何をしているのか？
　個人的には見るタイミング等がなくわかっていないことが多い
　素人目線で見たときには皆がスプリント開発の流れを理解してはまったら不要になってしまうように見えてしまう
　→やってる人などいたら知りたいです。

# まとめると
アジャイル開発もなんでもそうだがしっかりとカスタマイズ、見直しをして各文化や働き方に合ったやり方を考えていくべきだと思っている。
妄信は、目を曇らせるのでいろいろな意見を聞いて様々なパターンを出していくべきだと感じたのでこんな記事をかきました。

# 最後に
最初にも記載したがこの記事はスプリント開発を否定しているわけではないことをご承知いただければと思います。
あくまで妄信をする気ではない、スプリント開発を主軸に新たな手法も考えていくべきだと思い、まとめました。
私のチームでやっているやり方が間違っていることもあると思うのでご指摘・ご意見、同じ課題をもっていて皆さんで変えて変わったことなどあれば忌憚のないご意見を頂ければと思います。

しっかりまとめて切れていないと思いますが、そういった点も改善しつつまとめていこうと思うのでご意見や追記してほしいことなどあれば、ご指摘ください。

上記の方法などでやってみたうえでの問題点や課題点などが出てきたら、追記または、記事として起こしなおします。
MacBookProからLチカしてみた

# 概要
ソフトウェアエンジニアを長くやっているとこう思う人もいるでしょう。
「ちょっとハードも触ってみたいな・・・」
私はそう思ったのでちょっと手を出してみることにしました。
具体的に言えばパソコンからGPIOのコントロールができれば、リレーモジュールを使い色々とできそうです。

# 使用したもの
![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142489/3ca78cc3-81bc-14ef-9609-8bf9503bd20f.png)
[秋月電子さん](https://akizukidenshi.com/catalog/g/g108942/ "秋月電子さん")で買いました。

USB Type-Cでパソコンと繋ぎ、このPINに電気を流したり止めたりしてリレーなどを制御する感じですね。
余談ですが、はんだ付けをする必要があります。慣れてないのでドキドキしながらやりました。

# 環境を整える
[adafruitのページ](https://akizukidenshi.com/catalog/g/g108942/ "adafruitのページ")にmacOSでの使い方が記載されていたので、こちらに沿って整えます。

M1 MacBook Pro（Sonoma 14.4.1）
Python 3.12.3

## libusbのインストール
Homebrewでインストール可能です。

```:shell
brew install libusb
```

## pyftdiのインストール
pipでインストール可能です。pyserialやpyusbも一緒に入りました。

```:shell
pip install pyftdi
```

## adafruit-blinkaのインストール
こちらもpipでインストールします。

```:shell
pip install adafruit-blinka
```

## 環境変数設定
この環境変数をセットすると、上記ライブラリがFT232Hを認識してくれるようですね。

```:shell
export BLINKA_FT232H=1
```

これで環境は整いました。

# 実行してみる

[BlinkaのGitHubページ](https://github.com/adafruit/Adafruit_Blinka "BlinkaのGitHubページ")にサンプルがあったので参考にします。
※使用するPINだけ変更しました。

```python:led.py
import time
import board
import digitalio

PIN = board.C0

print("hello blinky!")

led = digitalio.DigitalInOut(PIN)
led.direction = digitalio.Direction.OUTPUT

while True:
    led.value = True
    time.sleep(0.5)
    led.value = False
    time.sleep(0.5)
```
ハード部分はC0のPINから抵抗を挟んでLEDを通し、GNDに繋いでいます。

# 結果
期待通り0.5秒ごとにLEDが点滅しました。
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142489/5e57489d-81f9-8a01-7a04-9162e902b3f2.png)
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142489/07c558d2-1114-5eca-ce31-88e00809a5dd.png)


# 参考にさせていただきました
https://qiita.com/kotai2003/items/0c96143b7d6e84629d99
https://learn.adafruit.com/circuitpython-on-any-computer-with-ft232h/mac-osx
【Spring Boot】Webアプリケーション作成の流れ(概要編)

# はじめに
　Spring Bootを使って1からWebアプリケーションを作成する方法を説明します。
　今回Spring Bootを選んだ背景として、Javaのフレームワークについて調べると、モダンなJavaプロジェクトの開発にSpring Bootが利用されているという記述を多く見かけたことと、職場で導入していなかったため学習目的が大きな理由です。
　最終的にブラウザで画面を表示して、データの取得、登録、更新、削除するところまで実装していきたいと思います。

# Spring Bootについての基礎知識
　Javaの代表的なフレームワークのSpring Frameworkには、数多くのフレームワークが内包されており、用途に応じて開発者が適切に組み合わせて使用する必要があります。この導入難易度の高さを解決するために開発されたのが、Spring Bootです。Spring Bootは、自動設定機能によりWebアプリケーションの開発における、煩雑な各種設定を容易に設定することができるため、導入コストを比較的抑えることができます。
　また、Spring Bootはアプリケーションの構成やリクエストマッピング、DIなどの機能をアノテーションを使用して指定します。StrutsなどXMLファイルで行っていた設定をJavaファイル内で行うことで、Javaプログラマーにとってはコードの可読性が上がることも大きな特徴です。

# 作成の大まかな流れ
### 1.プロジェクトの準備

#### 開発環境の準備
IDEの選定
JDKのインストール
ビルドツールの選定
Spring Initializrを使って、プロジェクトの雛形を作成

### 2. アプリケーションの構成の作成

Controllerの作成(リクエストを受け付け、処理、レスポンスを返すクラス)
Serviceの作成(ビジネスロジックを担当するクラス)
Repositoryの作成(データベースへのアクセスを担当するクラス)
テンプレートエンジンの設定(Thymeleafなどのテンプレートエンジンを設定)

### 3. 実装とテスト
2で作成したクラスに具体的な処理を記述する。
ローカルで実行
WARファイルを作成し、Webサーバーにデプロイ

# まとめ
今回は、Spring Bootの概要について説明しました。次回からは、実際にプロジェクトの作成に入ります。
VS Code Conference JP 2024

# VS Code Conference JP 2024

毎日お世話になっているVS Code、についてのカンファレンスが
2024/04/20(土)オンラインとオフラインのハイブリッドで開催されました。
配信はアーカイブもされており、後からでも視聴する事ができます。

https://vscodejp.github.io/conference-2024/#


## GitHub Codespaces
リモート環境（ブラウザ上）でVS Codeを使える開発環境。
料金もかかるので、ユースケースは？と疑問でしたが、
登壇をお伺いしたところ、チーム開発に取り入れると効率が上がりそうです。

![Screenshot at Apr 20 21-15-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635225/a11b580d-81a5-2ae4-034a-3624b0ec33f1.png)


![Screenshot at Apr 20 21-12-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635225/ddbbcd1b-0931-f431-5ca6-8f0c8f27cbf7.png)


- github上から各ブランチ状態のVSCodeが立ち上げられる
  - ローカルのブランチ切り替え不要
  - github上で各PRの環境を簡単に切り替えられるので、並行レビューが捗る
- 私物PCでcloneせずにgithub上で仕事の対応ができる
  - 仕事のPCが手元にない時の急な対応ができる
- 注意点
  - インスタンス自体は他のユーザーと共有はできない
  - インスタンスを放置すると課金対象なので、作業が終わったら削除する
  - インスタンス上で作業した内容は削除すると消えてしまうので、git add, pushは忘れずに！

https://yuheifujita.github.io/slide-20240420-vscode/1

## VS Code 拡張機能

これまでは別々に立ち上げ、切り替えて見比べていた
各アプリケーションがVS Code上で使用できるため、
すぐにでも業務に取り入れてみたいです。

### Postman
[Postman VS Code extension](https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode)
![postman-vs-code-extension-v0-19-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635225/e58e254c-7267-aec4-2278-2feb4d78e0c5.jpeg)


### Figma
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
🌾FigmaはDev　Mode（有料）が必要の模様。残念😢
![a4510b0ae063e1ae709281f30ef95f974299e6b5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635225/2cd0e02a-f158-9d4a-a2cf-ea8cc7a9c9e9.gif)
![Screenshot at Apr 22 11-26-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635225/40bad9d9-0ea3-d736-5554-52f49670987b.png)

### おまけ
[vscode-pets](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets)

VS Code上でネコやアヒルを飼う事ができます。
ラバーダック・デバッグにピッタリ？
最新バージョン(version 1.4.0)ではトトロもいます。

![Screenshot at Apr 20 16-22-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635225/a365d9e4-9355-0db8-381c-b30ec8d19183.png)
![Screenshot at Apr 22 15-17-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635225/a872a02b-6b4e-5946-3c3f-78ac572fc991.png)


## VS Code 設定

前述のvscode-petsはこちらの登壇で初めて知りました。
本編ではVS Code 便利設定を多々紹介されていたので、都度試してみます！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">このあと16:00から発表する資料です！枚数多く、所々飛ばすのでお手元でも見ていただれば！<a href="https://t.co/XnnuuNvUEU">https://t.co/XnnuuNvUEU</a><br> <a href="https://twitter.com/hashtag/vscodejp?src=hash&amp;ref_src=twsrc%5Etfw">#vscodejp</a></p>&mdash; ikuma-t (@ikumatdkr) <a href="https://twitter.com/ikumatdkr/status/1781569249674424443?ref_src=twsrc%5Etfw">April 20, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

先日改定された下記の書籍も、
VS Codeを1/100も使いこなせていない事がわかる
設定満載でしたので、試していきたいです。

[改訂新版 Visual Studio Code実践ガイド](https://gihyo.jp/book/2024/978-4-297-13909-4)
![71hM2Fr56wL._SY522_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635225/4f3ec5d2-0e8d-1d0c-0d72-b271cef901e8.jpeg)