OmniAICreator/Qiita-1.07M huggingface dataset:
ぼくのかんがえるさいきょうのかいはつかんきょう

## はじめに

最近、無料のVPNやNASに関する動画を見ていて、「こんな環境があったらいいな」と思い描くようになりました。現時点では予算的に難しい（15万円程度必要そう...）のですが、将来の自分のために理想の構成をまとめておこうと思います。

見てていいなーと思ったNAS
<iframe width="560" height="315" src="https://www.youtube.com/embed/FR-FsTSKKhc?si=7Dco6dINHhz9b2OQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


## 目指す構成

理想の開発環境は、高性能なデスクトップPCをメインに据え、それを軽量なノートPCからリモートで操作する形を考えています。以下が全体構成図です：

```mermaid
graph TB
    subgraph "インターネット"
        AWS["AWS S3 Glacier Deep Archive<br/>(長期バックアップ)"]
    end

    subgraph "ホームネットワーク"
        NAS["NAS<br/>(RAID 5)<br/>メインストレージ"]
        Desktop["開発用デスクトップPC<br/>(開発環境)"]
        OldPC["既存PC群<br/>(データをNASへ移行済み)"]
        
        subgraph "Tailscale VPN"
            VPN["Tailscale"]
        end
    end

    subgraph "外部"
        Laptop["新規ノートPC<br/>(シンクライアント)<br/>最小限のデータ"]
        MyPhone["自分のスマートフォン<br/>(写真自動バックアップ)"]
        FamilyPhones["家族のスマートフォン<br/>(写真共有・保存)"]
    end

    %% 接続関係
    Laptop <--> VPN
    VPN <--> Desktop
    Desktop <--> NAS
    OldPC -->|"データ移行済み"| NAS
    NAS <-.->|"定期バックアップ"| AWS
    
    %% スマートフォンの接続
    MyPhone <-->|"写真アップロード<br/>ファイルアクセス"| NAS
    FamilyPhones <-->|"写真共有<br/>ファイル共有"| NAS

    %% データの流れを説明
    style OldPC fill:#f0f0f0,stroke:#666,stroke-width:2px,stroke-dasharray: 5 5
    
    %% スタイリング
    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;
    classDef storage fill:#dff0d8,stroke:#333,stroke-width:2px;
    classDef network fill:#d9edf7,stroke:#333,stroke-width:2px;
    classDef mobile fill:#ffe6cc,stroke:#333,stroke-width:2px;

    class NAS,AWS storage;
    class VPN network;
    class MyPhone,FamilyPhones mobile;
```

### 主要コンポーネント

1. **デスクトップPC（開発環境）**
   - 高性能な固定マシンとして配置
   - 複数のDockerコンテナ等の重たい処理も快適に動作させる
   - リモートからアクセス可能な開発環境として利用

2. **ノートPC（シンクライアント）**
   - 軽量で持ち運びやすい構成
   - 最小限のデータのみを保持
   - VPN経由でデスクトップにアクセス

3. **NAS（メインストレージ）**
   - RAID 5による信頼性の確保
   - すべてのデータを一元管理
   - PC移行時のデータ移動を容易に

4. **Tailscale VPN**
   - 安全なリモートアクセスを実現
   - セットアップが比較的容易
   - 無料プランでも十分な機能

5. **AWS S3 Glacier Deep Archive**
   - 重要データの長期バックアップ
   - コスト効率の良い保存を実現

## この構成を目指す理由

### 1. 性能と携帯性のジレンマ解消

高性能なノートPCは魅力的ですが、重量や価格の面で今の私では現実的ではありません。現在のノートPCは開発時にDockerコンテナを複数起動すると、PCの動作が固まってしまうことがあり、大きなストレスとなっています。
（急いで買ったのもあり、メモリぐらい変えられるだろと低メモリのものを買ったところ、相当奥にあるようで依頼が必須とのこと、、、結構トラウマになっています）

デスクトップPCなら、同じ予算でより高い性能が得られ、将来的なアップグレードも容易です。軽量なノートPCとの組み合わせで、携帯性と性能の両立が可能になります。

### 2. データ管理の効率化

現在、PCの移行が必要になるたびにデータ移動に苦労しています。全部移行するのは新しいPCの圧迫になる一方で、必要な情報を選別するのが面倒です。

また古いWindowsを消してLinuxを入れてサーバー運用したいと思うこともありますが、データ全部移行していないしな、、となることがあり、ストレスとなっています。

また、スマホで写真を撮らない理由の一つにデータの移行が面倒というのがありますが、スマホからの直接のアップロードも不要であったり、家族の写真を共有できたりと日常使いにもよさそうだなと感じています。

### 3. 将来への投資

初期費用は決して安くありませんが、長期的に見ると以下のメリットがあります：
- 高性能な開発環境の確保
- データ損失リスクの低減
- 機器の段階的なアップグレードが可能
- 柔軟な作業環境の実現

## まとめ

予算の都合で今すぐには実現できませんが、この構成は現時点の私の理想の開発環境です。特に、開発時のストレス軽減とデータ管理の効率化という観点で、大きな価値があると考えています。

将来、この記事を見返したときに「あの時の構想を実現できた」と言えることを楽しみにしています。
中華Arduinoパチモンで`ser_open(): can't set com-state for`というエラー


### エラー

```c
avrdude: ser_open(): can't set com-state for "\\.\COM3"
```

### 状況
新しく買ったwinPCでELEGOO UNO R3というArduinoパチモンを使いLEDテープを制御しようとしたとき、遭遇
winのみで発生していて、macでは遭遇せず
結構調べてたどり着いたのが

### 症状
- MacのArduinoIDEから書き込みを行なった場合、特に問題ない
- windows PCのArduinoIDEから書き込みを行なった際、初回の書き込みはうまく行くが、その後USBから認識されなくなる
- USBを差し直すと、5秒ほど認識されて、その後Macでもwinでも認識されなくなる
- ボードについているLEDテープを外すと認識できるようになる

### 原因
多分原因は電力不足。LEDをつなぎすぎて、ボードまで電力がまわらなかったらしい。
自分は
- LEDを減らす
- 光量を減らす

という妥協*2でどうにか動くようになった。Macで問題なかったのでUSB的にはどうにかできうると思うので、使っていない3.2Gen1のポートに変えようかと思う。
#0049（2024/02/16）初めてのiOSアプリ：背番号クイズ

# 初めてiOSアプリを作ってみた
- 今までwebアプリしか作ってことがなかったが、chatGPTの力を借りながら、iOSアプリを作ってみた

# デモ
1. "スタート"を押すと、１秒後に二桁の乱数が生成される
1. 背番号の選手名を考える
1. "回答"を押すと、背番号に当てはまる選手名が表示される

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975520/80a03bf1-746d-432e-8c6c-9c190afdd28c.png" width=190 height=100>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975520/248087bc-19fa-4d3b-9ed1-d51a5311244e.png" width=200 height=100>

<br>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975520/2cef8ec6-4e37-4007-a8e1-1d091d41a453.png" width=200>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975520/947fa5b3-db3b-4c2a-9663-a561a4b48776.png" width=190>

# 技術要件
- Swift
- python (選手データのスクレイピング用)

# 作業手順
1. 欲しい情報が載っているwebサイトを見つけ、スクレイピングをpythonで実装した
1. pandasに欲しいデータを格納し、最終的にjsonで出力
1. xcodeでプロジェクト作成
1. ボタンの遷移、乱数の生成、表示内容の実装
1. macにアプリをbuild
1. iPhoneにbuildができるように設定（OSを合わせる、iPhoneを開発者モードへ変更、xcodeにAppleIDを
1. iPhoneにアプリをbuild
Laravel 11 + Breeze + Vue 3 + Inertia.js のセットアップ

Laravel 11 で **Breeze** を使用して **Vue 3 + Inertia.js** をセットアップする方法を解説します。  
Breezeは、シンプルな認証機能を提供するパッケージで、Inertia.jsとVue.jsと組み合わせることで、モダンなSPA風のアプリをすぐに構築できます。

---

## ✅ Breeze + Vue 3 + Inertia.js インストール手順

### 1. Laravel 11 プロジェクトの作成
まだプロジェクトを作成していない場合は、以下のコマンドで新しく作成します。

```sh
composer create-project laravel/laravel my-project
cd my-project
```

### 2. Breeze パッケージのインストール
BreezeをComposerでインストールします。

```sh
composer require laravel/breeze --dev
```

### 3. Breezeのセットアップ
以下のコマンドで **Vue + Inertia.js** を選択して Breeze をインストールします。

```sh
php artisan breeze:install vue
```

このコマンドを実行すると、自動的に以下の設定が行われます：
- Vue 3 + Inertia.js のセットアップ
- `resources/js/Pages/` に Vue のページコンポーネントを作成
- `routes/web.php` に Inertia のルートを追加
- Breezeの認証機能（ログイン・登録・ログアウトなど）のVueコンポーネントが生成

### 4. フロントエンドの依存関係をインストール
Breezeのセットアップ後、以下のコマンドでnpmパッケージをインストールします。

```sh
npm install
```

### 5. Viteの開発サーバーを起動
開発用にViteを起動します。

```sh
npm run dev
```

### 6. データベースの設定とマイグレーション
`.env` ファイルを編集して、データベース情報を設定します。

その後、以下のコマンドでマイグレーションを実行します。

```sh
php artisan migrate
```

### 7. サーバーを起動
Laravelの開発サーバーを起動します。

```sh
php artisan serve
```

ブラウザで `http://127.0.0.1:8000` にアクセスすると、ログイン・登録画面が表示されるはずです。🚀

---

## ✅ Breeze + Vue + Inertia の構成
Breeze をインストールすると、以下のようなファイル構成になります。

```
my-project/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Auth/
│   │   │   ├── DashboardController.php
│   │   │   └── HomeController.php
│   │   ├── Middleware/
│   │   └── Kernel.php
├── routes/
│   ├── web.php
│   ├── auth.php
├── resources/
│   ├── js/
│   │   ├── Pages/
│   │   │   ├── Auth/      ← ログイン・登録関連
│   │   │   ├── Dashboard.vue
│   │   │   └── Welcome.vue
│   │   ├── app.js
│   │   ├── bootstrap.js
│   │   └── Components/
├── vite.config.js
├── package.json
└── .env
```

---

## ✅ カスタマイズのヒント

### 1. ログイン後のリダイレクト先を変更
デフォルトでは、ログイン後に `/dashboard` にリダイレクトされます。  
変更したい場合は `routes/web.php` で修正できます。

```php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Welcome');
});

// ダッシュボードのルート
Route::middleware(['auth', 'verified'])->get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->name('dashboard');

require __DIR__.'/auth.php';
```

### 2. Vue コンポーネントを追加
例えば、新しいページを作成したい場合、  
`resources/js/Pages/About.vue` を作成し、以下のように記述します。

```vue
<script setup>
</script>

<template>
  <h1>About Us</h1>
</template>
```

次に、ルートに追加します。

```php
Route::get('/about', function () {
    return Inertia::render('About');
});
```

ブラウザで `http://127.0.0.1:8000/about` にアクセスすると、新しいページが表示されます。

---

## 🎉 まとめ
これで **Laravel 11 + Breeze + Vue 3 + Inertia.js** の環境構築が完了しました！ 🚀

### 手順まとめ
1. Laravel 11 のプロジェクトを作成  
2. `composer require laravel/breeze --dev` でBreezeをインストール  
3. `php artisan breeze:install vue` でBreezeをセットアップ  
4. `npm install` でフロントエンドの依存関係をインストール  
5. `npm run dev` & `php artisan serve` で開発サーバー起動  
6. `php artisan migrate` でデータベースをセットアップ  

---

Breezeはシンプルな認証機能をすぐに利用できるので、カスタマイズして実装を進めていけます！
fishでpythonのバージョンとパッケージ管理をしたい


数年前にMac環境でpythonをインストールをしたもののバージョンも古くなってきたので更新がてら手順を保存

## 環境
今回は開発端末なのでMac環境で実行

```
❯ sw_vers
ProductName:            macOS
ProductVersion:         15.2
BuildVersion:           24C101
```

## 実行手順

### Pyenvのインストール

まず Home Brewをアップデートする。

```
brew update
```
homebrewからpyenvをインストール

最新の手順は公式リポジトリのREADMEに載っているので以下を参照

https://github.com/pyenv/pyenv

```
brew install pyenv
```

今回は最新にしたかったので3.13系の最新をインストール

```
pyenv install python 3.13.1
```
fishにパスを追加する。

```
set -Ux PYENV_ROOT $HOME/.pyenv
fish_add_path $PYENV_ROOT/bin
pyenv init - fish | source
```
pythonのバージョンが上がっていればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/ed8374ef-691e-4d16-bdff-8d65119217bb.png)

### venvの設定

pythonコマンドでvenvを設定

```
python -m venv ./.venv
```

作成されたvenv配下のactivate.fishコマンドを実行

```
source ./.venv/bin/activate.fish
```

こんな感じになっていればOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/927cc658-179f-4ffe-aa8a-4ba42944e9b0.png)

## 所感

~envみたいなのが乱立していてメンテもしてないので諸々見直してみようかなと思った。
motdファイルを編集してUbuntuサーバログイン時のメッセージを変える

<!-- motdファイルを編集してUbuntuサーバログイン時のメッセージを変える -->

## はじめに

sshを使ってUbuntuサーバにログインすると、初期設定では以下のようなメッセージが表示されます。

```
Welcome to Ubuntu 24.04 LTS (GNU/Linux 6.8.0-52-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/pro

Expanded Security Maintenance for Applications is not enabled.

334 updates can be applied immediately.
13 of these updates are standard security updates.
To see these additional updates run: apt list --upgradable

Enable ESM Apps to receive additional future security updates.
See https://ubuntu.com/esm or run: sudo pro status

Last login: Sun Feb 16 21:56:52 2025 from xxx.xxx.xxx.xxx
```

これだとかなり冗長なうえ、少し寂しいです。一応ドキュメントやアップデートの情報なども載っているのですが、毎回表示されるのはちょっと面倒です。

そこで今回は、Ubuntuサーバへのログイン時に表示されるメッセージを変更する方法を紹介します。

## motdファイル

Ubuntuサーバにログインすると表示されるメッセージは、`/etc/motd`というファイルに記述することができます。sudo権限を使って編集してあげましょう。

```
$ sudo nano /etc/motd
```

このファイルには好きな文字データを書き込むことができるので、サーバの名前や業務を書いたり、自分で決めたお知らせを書いたりすることができます。

また、アスキーアートなどを書き込むことができるので、色々と工夫してみるのも面白いかもしれません。

例えば、[このサイト](https://tool-taro.com/image_to_ascii/)で画像からアスキーアートを生成することができます。

ほかにも、飾り文字などを使っても面白いと思います。

## /etc/pam.d/sshdファイル

`motd`ファイルを編集すると、ログイン時に自分で決めたメッセージが表示されるようにはなるのですが、デフォルトのメッセージが表示されたままになっています。

なので、以下のファイルを編集し、デフォルトのメッセージを非表示にしましょう。

```
$ sudo nano /etc/pam.d/sshd
```

このファイルの、以下の行を探してコメントアウトしてください。

```
session    optional     pam_motd.so  motd=/run/motd.dynamic
```

`dynamic`という単語の通り、これはサーバへのSSHログインがあったときにメッセージを動的に生成して表示させるというものです。

この行をコメントアウトすることで、`motd`ファイルに書いたメッセージと、最終ログイン日時とIPアドレスの表示のみになります。

## おわりに

今回は、Ubuntuサーバへのログイン時に表示されるメッセージを変更する方法を紹介しました。

自分でサーバを設営している場合、ログイン時にも少し工夫を加えてみたくなりますよね。そういう時にこのような設定が一役立つはずです。

では、また次回の記事でお会いしましょう。

## 参考文献

[第755回　UbuntuにおけるMOTDの仕組みのすべて | gihyo.jp](https://gihyo.jp/admin/serial/01/ubuntu-recipe/0755)
Bloch関数の要点

#### 並進対称性をもつポテンシャルにおける波動関数はBloch関数と呼ばれる.
並進対称性は
```math
V(\mathbf{r})=V(\mathbf{r+R})
```
とする.
<br>
#### Bloch関数はポテンシャルの並進対称性を引き継がない.
そもそも,なぜ「Bloch関数$\varphi_\mathbf{k}$がポテンシャルの並進対称性を引き継ぐ」という先入観が生じてしまうのだろうか. これは, 実際に結晶中で電子を**観測したとき**, その並進対称性に従って電子が存在するのが望ましいためである. 確かに
```math
\begin{equation}
  \varphi_\mathbf{k}(\mathbf{r}) = \varphi_\mathbf{k}(\mathbf{r+R})
\end{equation}
```
が成り立っていたら,この願いは叶う.

ただし「観測する」とは私たちの生きる実空間上の出来事であり, 複素数で表される波動関数を直接観測することはできない. つまり, 波動関数を実空間に落とし込む必要がある.
波動関数は電子の存在確率を表すため, ここまで厳しい期待をする必要はない.
```math
\begin{equation}
  |\varphi_\mathbf{k}(\mathbf{r})| = |\varphi_\mathbf{k}(\mathbf{r+R})|
\end{equation}
```
これで十分である.
<br>
#### Blochの定理
Bloch関数$\varphi_\mathbf{k}$は以下で表される. 
```math
\begin{equation}
    \begin{split}
      \varphi_\mathbf{k}(\mathbf{r}) = e^{i\mathbf{k\cdot r}}u_\mathbf{k}(\mathbf{r}) \\
      u_\mathbf{k}(\mathbf{r}) = u_\mathbf{k}(\mathbf{r+R})
    \end{split}
  \end{equation}
```
つまり, ポテンシャルの対称性を引き継ぐのは$u_\mathbf{k}$である. この関係を**Blochの定理**と呼ぶ.これは確かに$|\varphi_\mathbf{k}(\mathbf{r})| = |\varphi_\mathbf{k}(\mathbf{r+R})|$を満たしている.
<br>
#### Blochの定理の別の表現
Blochの定理は次でも表される. 
```math
\begin{equation}
    \varphi_\mathbf{k}(\mathbf{r+R}) = e^{i\mathbf{k\cdot R}}\varphi_\mathbf{k}(\mathbf{r})
  \end{equation}
```
これは[Blochの定理](#-Blochの定理)から直ちに求まる.
<br>
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
証明は[こちらのpdfファイルにて.](https://drive.google.com/file/d/1z8Rs8h1pbiFMS6QKkBlyW8KDQC2v_AeV/view?usp=drive_link)
Ubuntu 24.04.1 LTS - マウスカーソルのサイズ変更

# Ubuntuでのマウスカーソルのサイズ変更方法

Ubuntu 24.04.1 LTSにおけるマウスカーソルのサイズを変更する手順は，次のようになります．

手順
1. 設定 > アクセシビリティ > Seeing を開く
1. カーソルのサイズ（C）を選択
1. 見やすいカーソルを選択

<br>

実際に手順3では、以下のような画面が表示されます。

![Screenshot from 2025-02-16 22-53-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4011834/760e1f18-b420-432a-8e6a-4efd91f262d7.png)
【Chakra UI】File Uploadコンポーネントで発生するコンソールエラーの対処法（Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?）

# はじめに

お疲れ様です、りつです。

Chakra UI v3の`File Upload`コンポーネントを使用した際に発生したコンソールエラーの解消方法について共有します。

https://www.chakra-ui.com/docs/components/file-upload

# 問題

以下の手順を行うと、コンソールエラーが発生ます。

1. ファイルアップロードボタン押下
2. ファイルを選択

```console:コンソールエラー内容
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `chakra(svg)`.
    at LuFile
    ...（省略）
```

# 解決方法

Chakra UIの`File Upload`用のスニペットファイルを修正します。

```diff_tsx:src/components/ui/file-upload.tsx
// 省略

const FileUploadItem = React.forwardRef<HTMLLIElement, FileUploadItemProps>(function FileUploadItem(props, ref) {
  const { file, showSize, clearable } = props;
  return (
    <ChakraFileUpload.Item file={file} ref={ref}>
      <ChakraFileUpload.ItemPreview asChild>
+       <Icon as={LuFile} fontSize="lg" color="fg.muted" />
-       <Icon fontSize="lg" color="fg.muted">
-         <LuFile />
-       </Icon>
      </ChakraFileUpload.ItemPreview>

      {showSize ? (
        <ChakraFileUpload.ItemContent>
          <ChakraFileUpload.ItemName />
          <ChakraFileUpload.ItemSizeText />
        </ChakraFileUpload.ItemContent>
      ) : (
        <ChakraFileUpload.ItemName flex="1" />
      )}

      {clearable && (
        <ChakraFileUpload.ItemDeleteTrigger asChild>
          <IconButton variant="ghost" color="fg.muted" size="xs">
            <LuX />
          </IconButton>
        </ChakraFileUpload.ItemDeleteTrigger>
      )}
    </ChakraFileUpload.Item>
  );
});

// 省略
```

# おわりに

上記修正により、コンソールエラーを回避することができました。

`File Upload`コンポーネント周りは特に情報が少ないように感じています。。

# 参考

https://www.chakra-ui.com/docs/components/file-upload
Excel を JPG 画像ファイルに無料で変換 - Exceltojpg.com レビュー

Exceltojpg.com は、Excel ファイルから JPG 画像への変換を容易にするオンライン プラットフォームで、スプレッドシートの視覚的表現を必要とするユーザーに対応します。この Web サイトはわかりやすいインターフェイスを提供しており、ユーザーは Excel ファイルをアップロードして、高品質の JPG 画像に簡単に変換できます。

Exceltojpg.com の注目すべき機能の 1 つは、優れたサービスへの取り組みであり、ユーザーの時間を節約し、優れた結果を提供するように設計された高速で信頼性の高い変換を提供します。このプラットフォームは、すべての変換の正確性、品質、完全性を保証できないため、変換されたファイルが特定の要件を満たしていることを確認するためにレビューすることの重要性を強調しています。 

この Web サイトでは基本的なファイル変換が無料で提供されていますが、ユーザーはプレミアム プランを通じて高度な機能やより高い使用制限のロックを解除できます。ただし、プレミアム サービスは現在無効になっていることに注意することが重要です。Visit: https://exceltojpg.com/
1-2：ChatGPTで作ったToDoアプリに機能を追加する

自学のためにChatGPTを活用してアプリ開発をしています。
今回は前回作成した __ToDoアプリ__ に __データ保存__ 機能を追加します。

## 前回までのあらすじ
1.ToDOアプリにタスク登録・削除機能を実装する

## 今回実装したい機能（機能追加）
1.データ保存:hatching_chick:

## ChatGPTへのプロンプト
作成したToDoアプリだけど、タスクを登録してもウィンドウを一度閉じてからまた開くと消えちゃうのはなんで？

## ChatGPTの回答（要約）
登録したタスクを保存する方法はNo.1～3あるよ！
今回はNo.1のやり方を教えるよ！

1. テキストファイル（CSV）に保存
簡単にできるよ！プログラムを再起動してもデータを読み込めるよ！

2. JSONファイルに保存
データを構造かして保存できるよ！

3. データベース（MySQL、SQLliteなど）に保存
本格的なアプリ向け（少し難しい）だよ！

## ChatGPTの回答（コード）
### コード修正（登録タスクのCSV反映）

前回作成したaddButtonの処理を以下に修正

```java:ToDoApp.java
import java.io.*;

addButton.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        String task = textField.getText();
        if (!task.isEmpty()) {
            listModel.addElement(task);
            textField.setText("");
            
            // 📌 タスクをCSVに保存
            saveTasksToFile();
        }
    }
});

// 📌 タスクをCSVファイルに保存するメソッド
private static void saveTasksToFile() {
    try (BufferedWriter writer = new BufferedWriter(new FileWriter("tasks.csv"))) {
        for (int i = 0; i < listModel.getSize(); i++) {
            writer.write(listModel.getElementAt(i));
            writer.newLine();
        }
    } catch (IOException e) {
        e.printStackTrace();
    }
}
```

### コード追加（アプリ起動時にCSVを読み込む）
mainメソッドの中に、loadTasksFromFile();を追加してください。

```java:ToDoApp.java
// 📌 アプリ起動時にタスクをロード
loadTasksFromFile();

// 📌 CSVファイルからタスクを読み込むメソッド
private static void loadTasksFromFile() {
    try (BufferedReader reader = new BufferedReader(new FileReader("tasks.csv"))) {
        String line;
        while ((line = reader.readLine()) != null) {
            listModel.addElement(line);
        }
    } catch (IOException e) {
        System.out.println("タスクファイルが見つかりません。");
    }
}
```
### コード修正（削除したデータのCSV反映）
前回作成したremoveButtonの処理を以下に修正してください。

```java:ToDoApp.java
removeButton.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        int selectedIndex = list.getSelectedIndex();
        if (selectedIndex != -1) {
            listModel.remove(selectedIndex);
            
            // 📌 タスクを削除したらCSVを更新
            saveTasksToFile();
        }
    }
});
```

## 実際に動かしてみる
### タスクの保存機能

①タスクを登録した後に「×」でウィンドウを閉じる
![ToDoApp_2_タスク保存1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907596/2de89de9-dc77-4138-8619-8dee1ae9484d.png)

②アプリを再起動する
⇒登録したタスクが保持されている
![ToDoApp_2_タスク保存2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907596/494176e8-eb0c-4c2e-946e-95cbb7117d98.png)
タスクデータが保存されている！(*^o^*)

## 今回の感想
データベースを構築しなくてもCSVファイルを活用するだけで、
データの保存機能の実装ができた＼(^_^)／


## 課題と欠点
しかし、今回も欠点が・・・
削除したはずのタスクがCSVに反映されていない(ﾟ◇ﾟ)ｶﾞｰﾝ

・タスクを削除する
![ToDoApp_2_課題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907596/be9464b3-1349-4124-8bdc-9c6f7572864f.png)
↓
![ToDoApp_2_課題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907596/79478549-0276-468e-989a-6250eec8c4f1.png)

・「×」閉じした後にアプリを再起動する
⇒削除したはずのタスクが表示されている(ﾟ◇ﾟ)ｶﾞｰﾝ
![ToDoApp_2_課題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907596/a55d2188-7f55-4a04-b3bb-cad49034f93a.png)

## 次回予告
__削除ボタンのCSV反映機能__ を追加します。
Macのターミナルでクリップボードを扱うコマンド

いつも忘れてしまうので基本的な使いかtメモ。

## クリップボードへコマンド出力をコピー
```
echo "Hello, World!" | pbcopy
```
これで"Hello, World!"がクリップボードに入る。

## クリップボードの内容を出力
```
pbpaste > output.txt
```
これでクリップボードの内容がoutput.txtに出力される。

## その他
他の応用的な使い方など、詳しくは以下のブログにまとめています。
https://hamlog.site/2025/02/15/mac-copy-paste/
MATLAB Simulinkで取得した波形データをCSVファイルとしてエクスポート



---

## はじめに  

本記事では、**MATLAB Simulinkで取得した波形データをCSVファイルとしてエクスポートし、ダウンロードする方法**をまとめます。  

Simulinkを使ってシミュレーションを行う際、取得した波形データをPythonやExcelで解析したり、可視化したりしたい場面があります。そこで、本記事では**Simulinkで取得したデータ（`timeseries`型）をCSVファイルに変換し、エクスポートする方法**を解説します。  

また、参考にした記事として以下を挙げます。  
🔗 [MATLAB Central - CSVファイルに出力する方法](https://jp.mathworks.com/matlabcentral/answers/1441779-csv)  

---

## 使用するコード  

以下のコードを使用して、Simulinkのシミュレーション結果をCSVファイルとして保存します。  

```matlab
% Simulinkからの出力 (timeseries 型の場合)
simout = out.simout;

% timeseries データをテーブルに変換
time_data = simout.Time;   % 時間データ
signal_data = simout.Data; % 信号データ

% 時間と信号データを結合してテーブルにする
T = table(time_data, signal_data);

% テーブルを CSV ファイルに保存
writetable(T, 'fileName.csv');

disp('シミュレーション結果が CSV ファイルに保存されました。');
```

---





![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759109/96f51159-b62e-46a2-9e3b-8dd0a1e8534d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759109/1f435253-fadf-4ac7-be4f-845569e475a5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759109/3fec9846-2b45-44eb-92ad-cb512f1ab27d.png)

## PythonコードでCSVファイルをプロット


```python
from google.colab import files

# アップロードダイアログを表示（CSVファイルを選んでください）
uploaded = files.upload()

import pandas as pd
import matplotlib.pyplot as plt

# アップロードされたファイル名を取得（最初の1個だけ使用）
filename = next(iter(uploaded))

# CSVファイルを読み込み
df = pd.read_csv(filename)

# 必要な列の確認（名前が違う場合は変更してください）
print("Columns in CSV:", df.columns)

# === 追加: 最初のデータと最後のデータを表示 ===
print("\n🔹 最初のデータ（head）:")
print(df.head())  # 最初の5行を表示 | Show first 5 rows

print("\n🔹 最後のデータ（tail）:")
print(df.tail())  # 最後の5行を表示 | Show last 5 rows

# 時間と信号の列を使ってプロット
time = df["time_data"]
signal = df["signal_data"]

# 波形をプロット
plt.figure(figsize=(10, 4))
plt.plot(time, signal, label="Signal waveform")
plt.xlabel("Time (s)")             # 時間軸（秒）
plt.ylabel("Signal Value")         # 信号の値
plt.title("Waveform over Time")    # グラフのタイトル
plt.grid(True)
plt.legend()
plt.tight_layout()
plt.show()
```
main.parameters.json で定義した値が main.bicep に bind されてたのね

# 背景

昔 main.bicep の初期値を設定しても、変更されないなぁと悩んだことがあったな、と思い出した

その理由が main.parameters.json と main.bicep との関係だったので備忘録


https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/bicep/parameter-files?tabs=Bicep

# 概要

## リソースデプロイの定義 (main.bicep):

- Azure リソースやそのプロパティが記述
- リソースグループ、ストレージアカウント、App Service などのリソースを定義
    - たとえば、App Service の設定や接続文字列など、リソースがどのように設定されるか


## パラメータの提供 (main.parameters.json):

- main.parameters.json ファイルでは、main.bicep で定義されたパラメータに渡す具体的な値を指定
- 同じ Bicep テンプレートを異なる環境や設定で再利用可能


# 利用例

## main.bicep で bind されるので、初期値をここで書いておく。


```json: main.parameters.json
    "searchQueryLanguage": {
      "value": "${AZURE_SEARCH_QUERY_LANGUAGE=en-us}"
    },
``` 

https://github.com/Azure-Samples/azure-search-openai-demo/blob/8eb556803db867a5d4f6784959f04a5ee2656ab8/infra/main.parameters.json#L74

```bicep: main.bicep
param searchQueryLanguage string // Set in main.parameters.json
```

https://github.com/Azure-Samples/azure-search-openai-demo/blob/8eb556803db867a5d4f6784959f04a5ee2656ab8/infra/main.bicep#L27

## bicep で、.env への出力

```bicep: main.ibcep
output BACKEND_URI string = backend.outputs.uri
```

# あとがき

知ってれば当たり前のことだろうね・・ :sweat:
【Vite + React】環境変数を設定したけど値が「undefined」になってしまった

## 経緯
開発環境にてフロント ↔︎ バックエンドで通信する時、`localhost`を直接書いていました。

本番環境に反映するため毎回書き換えるのは馬鹿らしいので、開発環境・本番環境でURLを簡単に切り替えられるようにしました。

設定するときに若干詰まったので、備忘録として残します。

## 環境
- Docker
- Vite
- React
- Typescript

## 設定（失敗）
まずは`.env`を作成して環境変数を定義します。
`React`を使用しているので以下のように設定しました。
```.env
REACT_API_BASE_URL=http://localhost // 開発環境
```

`.env`の準備ができたので、コンテナを起動してうまく値を取得できているか確認。
```javascript
console.log( process.env.REACT_API_BASE_URL);

// -> undefined
```

`undefined`が出力されてしまいました…

## 再設定(解決)
少し調べてみると、`Vite`を使用しているため、環境変数の定義が間違えていることがわかりました。

```.env
REACT_API_BASE_URL=http://localhost // これはこの環境では間違い

VITE_API_BASE_URL=http://localhost // こちらが正しい
```

環境変数を修正して、再度ログ出力をしてみると
```javascript
console.log(import.meta.env.REACT_API_BASE_URL);

// -> http://localhost 
```

欲しい値が取得できました。

あとは同じように本番環境用の環境変数を定義したファイルを準備して、コンテナ起動時にオーバーライドさせれば、環境を切り替えることができるようになります。

以上です。

## 参考
https://ja.vite.dev/guide/env-and-mode.html
Macでスリープを防止するcaffeinateコマンドについて

すぐ忘れてしまうのでメモ。

## 使い方
```
caffeinate -i -d
```

`-d`をつけるとディスプレイの消灯を防止できる。
`-i`は「システムのアイドルを防止する」という設定でデフォルトと同じ挙動。つけてもつけなくても良いはず。

```
caffeinate make
```
のようにすれば、コマンド実行中だけスリープ防止、ということもできる。

## まとめ

その他細かい設定については以下にまとめています。
https://hamlog.site/2025/02/14/caffeinate-usage/
kotlinのchunkedをswiftでも使えるようにしたい

# はじめに
KotlinにはCollectionに対して指定数に切り分ける関数が存在しますが、Swiftには存在しないようなので自前で実装していきます
### 本文
以下コードになります
拡張関数を書くだけでも結構記述方法が違います
```swift
extension Array {
    func chunked(into size: Int) -> [[Element]] {
        stride(from: 0, to: count, by: size).map { index in
            Array(self[index..<Swift.min(index + size, count)])
        }
    }
}
```
### 最後に
どちらも触ってるとどっちもある意味で理解というか納得できる記述方法があって面白いなと思う日々です
どなたかのお役に立てたら幸いです
AWS初学者が5か月で5つのAWS資格を合格した方法

**初めに**

この度AWS 認定ソリューションアーキテクト – プロフェッショナルを含むAWSに関する資格を5か月で5つ取得したので自分自身の勉強方法や各資格の難易度順などまとめておこうと思います。今後AWSの資格試験を受ける方の参考になれば幸いです。また初めてQiitaに投稿するので拙い文章ではあると思いますが最後まで読んでいただけると嬉しいです。

**AWSとは**
最初にAWS(Amazon Web Service)とはAmazonが提供するクラウドコンピューティングサービスの総称です。インターネットを通じてITインフラストラクチャ(サーバー、ストレージ、データベース、ネットワーク、AI/ML、loTなど)を必要な時に必要なだけ利用できるサービスを提供しています。

**AWS認定資格を受けるきっかけ**
AWSについて何も知らない私でしたが入社した会社でAWSに関する研修があり、そこで初めてAWSという技術を知りました。AWSについての研修を受けるうちに、クラウド市場の世界シェアがN0.1であること、200以上の幅広いサービスを提供すること、柔軟なコストモデルがあることを知り、AWSという技術に興味を惹かれ自分自身でAWSをもっと学び、業務に役立てていきたいと思うようになりました。

**勉強前の状態**
まず最初に私の資格試験を合格する前の簡単な経歴について紹介します。私は情報系の大学を卒業し2024年に就職したばかりの新卒のエンジニアです。基本情報技術者等の資格は保持していますがAWSに関する知識は全くなく、EC2って何？というレベルから勉強を始めました。

**AWS認定**
| **カテゴリ** | **資格名称**|**難易度**|
|:-:|:-:|:-:|
| Foundational  | Cloud Practitioner<br>AI Practitioner  | 低  |
| Associate  |  SysOps Administrator<br>Dveloper <br>Solutions Architect<br>Data Engineer<br>Machine Learning Engineer|中|
|Professional|Solutions Architect<br>DevOpsEngineer|高|
|Specialty|Advanced Netwaorking<br>Machine Learning<br>Security|高|

AWS認定には現在12個の資格があり、Foundational、Associate、Professional、Specialtyと4つでランク付けされており各ランクに分野ごとの認定資格があります。(※現在は12個ですが今後増減する可能性があります)
この12個の内私は以下5つの資格を取得しました。
・Cloud Practitioner(CLF)
・Solutions Architect Associate(SAA)
・Dveloper Associate(DVA)
・SysOps Administrator Associate(SOA)
・Solutions Architect Professional(SAP) 

**勉強期間**

| 資格名 | 勉強時間 |
|:-:|:-:|
| Cloud Practitioner(CLF)  | 30時間  |
| Solutions Architect Associate(SAA)  | 50時間  |
| Dveloper Associate(DVA)  | 45時間  |
|SysOps Administrator Associate(SOA)|50時間|
|Solutions Architect Professional(SAP)|80時間|

各資格ごとのおおよその勉強時間は上記の通りです。
受験してみた難易度の感覚としては
SAP>>SAA>SOA>DVA>CLF
のような順番です。(あくまで個人的な意見です)
私は認定資格を受けるまでAWSを全く知らなかったのでCLFはすごく重点的に行っている方だと思います。ある程度AWSのことを知っているという方はCLFを受けずにSAAからの受験でも問題ないと思います。
ここで気を付けてほしいのがAWS初学者の方がSAAは50時間程度勉強すれば合格できると思ってしまうことです。AWSの認定資格は積み重ねがとても重要です。CLFに合格せずSAAを受験しても50時間の勉強では合格できなかったと思います。なので実際には
CLF(30時間)+SAA(50時間)がSAA合格に要した時間といえます。
AWSの認定資格では違う試験で学んだ内容が他の試験にも生かせることができるのでAWS初学者の方は一つずつ資格試験を合格していくことで認定試験の合格につながるだけでなく、よりAWSの知識が身につくと思います。

**実際の勉強方法**
私は[CloudTeck](https://kws-cloud-tech.com/)というAWSのオンライン学習プラットフォームを使用しました。AWSに認定資格に合格するためにはとにかく多くの問題を解くことが重要です。こちらのCloudTeckでは各試験ごとの問題集が用意されていて問題数もとても多いです。コースには資格会員、基本会員、永久会員と3つのコースがあっりますが、資格試験に合格するだけであれば資格会員のコース(90日間で5480円)で問題ないと思います。問題集を解くことができるだけでなく、実際の問題の解説等もありますので理解しやすいです。
勉強の流れとしては以下の通りです。
①CloudTeckの問題集を1周する
②間違えた問題をノートにまとめる
③間違えた問題を復習する
この1~3を約3週くらい全試験で行うことで、私は合格することができました。また、どうしても理解出来ない部分などが出てきた場合には実際にAWSのマネジメントコンソールでサービスを動かしサービスの理解を深めていました。AWSには一年間の無料利用枠があるため、AWSを学ぼうと思っている方は実際に動かしてみたほうが理解度は高まります。
またAWS公式が出している各試験のサンプル問題や練習問題は試験前の力試しとして前日に行いました。CloudTeckの問題が9割とれており公式問題でも9割とれることができていたら合格の可能性は高いと思います。

また、勉強についてはポモドーロ法を使用して勉強していました。ポモドーロ法は25分の集中作業と5分間の短い休憩を繰り返すことで集中力を持続させる管理方法です。勉強に対して集中力が続かないという方いましたら是非試してみてください。

**最後に**
AWS認定資格はAWSの知識がつくのと同時にAWSの自分自身の知識を証明することにもなるのでお勧めです。しかしながらAWSの認定試験を合格したとしてもすぐ業務等で活躍できることはないと思います。実際に資格試験で得た知識を基にハンズオンを通して実際にAWSを触ることが業務で活躍していくうえではとても重要だと思います。引き続きAWSに関する勉強を続けていきたいと思います。この投稿がAWSに関して興味をもつきっかけにになったり資格試験の合格の助けとなれば幸いです。
アウトプットすることで自分自身の知識も定着するため、今後ともAWSに関しての情報を発信していこうと思います。
ここまで読んでくださりありがとうございました。
Androidで動画再生しようとした時に出たエラー「Input does not start with the #EXTM3U header」

# はじめに
```
com.google.android.exoplayer2.ExoPlaybackException
Input does not start with the #EXTM3U header.
```
こんな感じのエラーが出て、どんなエラーか検索をかけたが参考にできそうな記事などが見つからなかったので、後に直接の解決になるかはわかりませんが参考程度にはなるだろうということで調べたことを書いておく

# 内容
#EXTM3U header について

https://docs.fileformat.com/ja/audio/m3u/#google_vignette

↑こちらで

>M3U (MP3 URL) は、拡張子 .m3u で保存されるオーディオ プレイリスト ファイルで、
拡張 M3U では、「#」で始まり、パラメーターがある場合はコロン (:) で終わる追加のディレクティブが導入されています。以下は、拡張 M3U のディレクティブのリストです。



その中で　#EXTM3Uは拡張 M3U の一つで以下のような状態なようです
>#EXTM3U - Extended M3U を示すファイル ヘッダーであり、ファイルの最初の行である必要があります。






# 少ないけど参考記事
https://github.com/google/ExoPlayer/issues/5424

https://blog.csdn.net/blovecat/article/details/124867216
Next.jsのストリーミングについて理解してみた

## はじめに
どうも、普段はvueとRailsでのSSR環境で仕事をしているのものです。
最近個人開発でNext.jsを使うようになって、新しく追加されたストリーミングというレンダリング方式があることを知ったのでざっとまとめてみました。

## SSRの仕組みと限界
まずは、SSRがどんなものか見てから、なぜストリーミングが出てきたのか理解してみたいと思います。
### SSRの過程

#### 1. サーバーでのデータフェッチ

まずは、リクエストごとに毎回異なるレスポンスを返すため、データ取得が必要になります

#### 2. HTMLの生成

取得したデータを使用してHTMLを構築


#### 3. クライアントでのコードローディング

サーバーからクライアントへHTML、CSS、JavaScriptを送信


#### 4. Reactによるハイドレーション

ハイドレーションとは、静的なHTMLに対して、EventHandlerなどのJavaScriptコードを追加することです。これでインタラクティブな要素が機能するようになります（useState, useEffectなども含め）

### SSRの限界
すべての処理が順次的（シーケンシャル）に行われることがSSRの大きな問題点です。
毎回、更新のある時上記過程が必要になるので非効率ですよね。

例えば、次のようなページ構成を考えてみます。

- おすすめ商品セクション（データ取得が必要）
- フッター（データ取得不要）

このような構成でも、SSRではデータ取得が完了するまでフッターのような静的コンポーネントもレンダリングを待つ必要が出てきます。

つまり、データ取得が不要なレイアウトコンポーネントも、必要なコンポーネントの処理完了を待つ必要があります。そんなに頻繁に変わる必要はないですよね..

## ストリーミングによる解決策
### Next.jsのストリーミングの特徴
ストリーミングは処理を並列的に行うことでSSRの問題を解決します。

データ取得が不要なコンポーネントは取得を待たずに先行してレンダリングし、チャンク単位（主にコンポーネント単位）でレンダリングを実行します。

Suspenseを使用して、データ取得が必要なコンポーネントと不要なコンポーネントを分けることができます。

### 実装例
``` jsx
// データ取得が必要なコンポーネントをSuspenseで囲む
<Suspense fallback={<LoadingComponent />}>
  <DynamicComponent />
</Suspense>
```

実際の動作の違いは以下の通りです。

Suspenseなし：データ取得が完了するまで画面全体がブロックされる
Suspenseあり：静的な部分が即座にレンダリングされ、動的な部分はローディング表示の後に表示される

## PPR（Partial Pre-Rendering）との比較
PPRはHotwireで使われているもので、
ページ全体をリロードすることなく必要な部分だけを効率的に更新することができる仕組みです。
ストリーミングと似たように見えますが少し違うところがあります。

https://zenn.dev/akfm/articles/nextjs-partial-pre-rendering
### 共通点

- サーバーサイドでの段階的なレンダリングを行う
- 静的コンテンツと動的コンテンツを分離する

### 主な違い
PPRでは、複数のダイナミックコンポーネントからの個別のHTTPリクエストを単一のリクエストにまとめています

PPR前: コンポーネントごとに複数のネットワークラウンドトリップ（リクエストとレスポンスのこと）が発生
PPR後: 静的レンダリングと動的コンポーネントを1つのHTTPリクエストに統合

このような最適化が入っているのでPPRはストリーミングの進化版とも言えるのですが、まだNext.jsでは実験的な機能です。
## まとめ

- SSRには順次的な処理による限界がある
- ストリーミングはSuspenseを使用して並列処理を実現
- データ取得の有無でコンポーネントを分離
- PPRはさらに最適化された実験的な機能

## おわりに
Next.js、AIと会話して開発しやすいので個人開発にはいいですね！
地味にストリーミングとかこだわって作っているのですが、もう少しNext.js自体の勉強を頑張った方がいいかもです笑
弱小プログラマー、個人開発1年勝負：2度目のリリースでいきなりつまづく

一年間で生計を立てるところまで持っていけるか挑戦しているchantoです。

わたしはタイトルの通り、イケてるプログラマーではないですし、今までアプリも出したこともなかったですが、どこまでいけるもんなのか挑戦してみています。反面教師か、実験体になれたらと思いますので、記録を残したいと思っています。。。

## 前回の結果
かなり小規模なアプリではありますが、前回生まれて初めてアプリをリリースしました。
結果としては、10ダウンロードという客観的に見てよくない状況ではありますが、そもそもこういったマーケットに出したことがなく、ダウンロードしてもらったということ自体がすごく嬉しくめちゃくちゃテンション上がりました！笑　もっと切迫した気持ちにならないといけないのかもしれませんが、単純にもっと多くの人に使ってもらえるアプリをつくれたら、、、という妄想が広がりました（笑）

![Frame 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3987263/504b5ab1-18ee-bb38-df47-1ae7f0b17cd6.png)

https://apps.apple.com/jp/app/%E3%83%AC%E3%83%BC%E3%83%80%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88-%E7%B0%A1%E5%8D%98%E4%BD%9C%E6%88%90-%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88/id6741140710

## ２度めのリリースにむけて
今回は1週間を目標にし、主婦が使う想定の賞味期限等の消耗品の管理アプリの開発を行いました。
フレームワークはflutter、環境はubuntuで開発しています。androidでも動いたらいいなというスケベ心とそもそも古いmacbookしか持っていないという環境なのでflutterを選択しました。
linuxのエミュレータで動かし、実機の機能はcodemagicでクラウドビルドしiphoneでテストするという感じで開発をしています。

## 開発の結果
結果としては8日間程度でリリース準備がおおよそ整い、通知機能の問題さえ解決できたらリリースできるところまで持っていきましたが、この問題解決にハマりにハマり、未だに解決できていません（泣）じわじわ解決して、できたところでリリースするつもりです（（泣）
この問題の根本はちゃんとMacで開発して、実機でデバッグしていないというところにありそうですが、10数万するmacOSのPCを買うのはためらってます。（このままiosアプリでやっていくと腹をくくりきれていない。。。

## 次回の開発への反省
次回はデバイスでしか確認できないところは最初に着手してじわじわ対応していこうと思っています。
また、今回のケースにおいてもあまり必要のない画面を作っては消したりし、本質的なところではないところに時間を使ってしまってしまいました。作っていくなかで最初のコンセプトからずれてきたり、機能を追加したり。。。
次回は、先にアプリストアへの提出書類を作ってから、つまりプロモーションを作ってからアプリを開発をすることで、使うユーザの気持ちからずれないように作っていきたいと思っています。

## 今後の中期計画
まだまだ生計を立てるというところまで糸口はみつけられていませんが、考え込むというよりどんどんリリースしていく中で糸口を見つけていくスタンスが良さそうだと考えています。
そこで、たくさんアプリを作ってみて、そのうちどれかが「うまくいきそう！」と感じられたら、そこから本格的に続けるかどうかを考えようと思っています。イメージは半年間で、1アプリ1~2週間で計10個くらい作ってみて、そこから方針を再検討しようかなと思っています。
うまくいくにせよ、だめになるにせよ、やり切るつもりではいるので記録として残していきたいと思っています。
【.NET 9.0.200】自己完結型の実行可能ファイルかつ単一ファイル実行可能ファイルビルドでちゃんと単一ファイルになった

:::note
.NET 9.0.200 を対象にした記事です。
:::

# はじめに

.NET のビルドには .NET フレームワークなしでも動作するオプションと、実行ファイル（.exe）に関連アセンブリ（.dll）をひとつにまとめるオプションがあります。

- [自己完結型の発行](https://learn.microsoft.com/ja-jp/dotnet/core/deploying/#publish-self-contained)
- [固有の単一ファイル実行可能ファイル](https://learn.microsoft.com/ja-jp/dotnet/core/tools/dotnet-publish#msbuild-properties)

これらは組み合わせが可能で、.NET ランタイムが不要かつ実行ファイルをひとつにまとめることができます。アプリを配布するうえで関連アセンブリをインストールする必要がなくなるため、個人的に需要があります。

## ビルドコマンド

x64 向け出力

```text
dotnet publish -c Release --self-contained true /p:PublishSingleFile=true --arch x64
```

x86 向け出力

```text
dotnet publish -c Release --self-contained true /p:PublishSingleFile=true --arch x86
```

.NET 9.0.200 からアーキテクチャ指定（`--arch x64`）が必須になった？かもしれません。

## 以前のバージョン（.net 9.0.0 くらいまで？）

自己完結型の発行（ランタイム無しで動作する）の方は問題ないのですが、単一ファイル実行可能はひとつにまとまってくれないことがしばしばありました。ひとつにまとまるものと、まとまらないものの差がよくわかっていません。

- 自分が作ったアセンブリ：まとまる
- 標準ライブラリ：まとまる
- x64 / x86 に分離されたライブラリ：まとまらない？

ランタイム指定されているアセンブリや署名の有無が関係するのでしょうか。  
ちなみに今回のバージョン .net 9.0.200 でも単一ファイルにならないアセンブリがあるようです。

いずれにせよアプリとしては「動作する」ことが優先で、技術的に難しかったり副作用がある場合は単一ファイルにしない方針なのかもしれません。

## おわりに

実は過去のバージョンでひとつにまとまっていた時期がありました（記憶だと ～ .net 5.0 preview5 あたりまで）。割と単一ファイル化は気まぐれで、今後も .net のバージョンが上がるとひとつにまとまらなくなるかもしれません。
【Xcode 16 / Swift 6.0】SPMを用いたSwiftLintの導入方法について

# 環境内容
Xcode: 16.2
Swift: 6.0.3

# 手順
1. "Add Package Dependencies"を押下
![スクリーンショット 2025-02-16 21.29.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355973/35859c34-8e03-4894-9a45-3891edea600b.png)

2. 右上の"Search or Enter Package URL"へ https://github.com/realm/SwiftLint を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355973/9b4517c0-dea2-4cb6-911e-4a762fe36ec8.png)

3. "Add Package"を押下する
4. "Add to Target"をどちらもNoneにする
:::note alert
"None"にしないと後程の手順でビルドエラー頻発します！！
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355973/f4e2e09b-18f5-4725-ad9a-4cbed93c3a2a.png)
5. "Add Package"を押下する
6. ルートプロジェクトを押下
7. SwiftLintを適用したいTARGETSを押下
8. "Build Phases"を開く
9. "Run build Tool Plug-ins"を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355973/9392fd03-e149-4db7-965c-981c69783949.png)
10. "+"アイコンを押下
11. "SwiftLintBuildToolPlugin"を選択し、"Add"を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355973/0e928cd5-61cf-421b-b891-424c9c0fc953.png)
12. 静的解析に引っかかりそうな命名などを行いビルドしてエラーが発生したら成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355973/11f1b15a-d4b0-4d68-8851-31066d084bfb.png)

# まとめ
規約については、.swiftlint.ymlを使用すれば変更が可能。

SwiftLintの導入は意外と難しい。
特に、手順4の際、普段通りTargetを指定してしまうと解決に非常に時間を要する。
【フリーランスエンジニアの案件獲得戦略：ポートフォリオ・営業・単価交渉の極意】

# フリーランスエンジニアの案件獲得戦略：ポートフォリオ・営業・単価交渉の極意
## 🔥 はじめに
フリーランスエンジニアとして成功するためには、「案件獲得のスキル」が必要不可欠。
技術力があっても、案件を獲得し、単価を上げる戦略を知らなければ、安定した収益を得るのは難しい。

本記事では、以下の3つの要素を解説する。
1️⃣ **市場価値を上げるスキルセット**
2️⃣ **効果的な営業戦略**
3️⃣ **高単価案件の交渉術**

## ✅ 1. 市場価値を上げるスキルセット
### 🔹 高単価案件に必要なスキル
- **AWS（インフラ構築・クラウドアーキテクチャ）**
- **SRE（サイト信頼性エンジニアリング）**
- **DX推進（企業のデジタル化をリード）**

### 🔹 スキル習得ロードマップ
📢 **Month 1-3: AWSスキルの習得**
✅ AWS認定資格（Solutions Architect, DevOps Engineer）取得  
✅ Terraform / CloudFormation を使ったIaCの習得  
✅ Lambda / ECS / Fargate の実装演習  

📢 **Month 4-6: SREスキルの強化**
✅ SLA / SLO / SLI の理解と実践  
✅ Prometheus & Grafana でモニタリング環境を構築  
✅ Chaos Engineering（カオスエンジニアリング）を導入  

## ✅ 2. 効果的な営業戦略
### 🔹 ポートフォリオ作成のポイント
- 実績を「問題解決のストーリー」として記載
- スキルの証明（GitHub・資格・ブログなど）を強調
- クライアントが「価値を感じる」形にする

### 🔹 SNS・直営業・エージェントの活用
- **SNS（Twitter・LinkedIn）で「価値発信」**
- **直営業（企業へDM・問い合わせ）**
- **エージェント（レバテック・Midworks など）を使い分ける**

## ✅ 3. 高単価案件の交渉術
### 🔹 単価交渉のポイント
- **相場を知る（相場価格の調査）**
- **「価格交渉NGワード」と「成功するフレーズ」**
- **クライアントの課題に沿った「提案型交渉」**

## ✅ まとめ
フリーランスエンジニアが成功するには、技術だけでなく「案件獲得スキル」が必須。
本記事の内容を実践し、高単価案件を安定的に受注できるフリーランスになろう！
AWS SAAを受験するメリット

# はじめに

AWSの資格を取る意味があるのか、疑問に思っている方も多いかもしれません。特に、AWS認定ソリューションアーキテクト – アソシエイト（SAA）は、AWSを使うエンジニアにとって登竜門とも言える資格です。

クラウド業界の発展とともに、AWSのスキルを求める企業が増えています。しかし、「AWSを触ったことがある」「AWSを知っている」と言うだけでは、どの程度の知識や経験があるのかを客観的に示すことができません。そんなとき、SAAの資格を持っていると「AWSの基本的なアーキテクチャ設計ができる」という証明になります。

本記事では、AWS SAAの勉強を通じて得られるメリットについて、言語化してみました。

## 1. AWSのサービスや仕組みが体系的に理解できる

AWSには多くのサービスがありますが、何がどうつながっているのかを理解するのは簡単ではありません。なんとなく使っていると、特定のサービスに偏った知識になりがちです。

SAAの勉強をすることでAWSの主要なサービスの役割や、それらがどのように組み合わさるのかを体系的に学ぶことができます。例えば、EC2とLambdaの違いや、RDSとDynamoDBの適切な使い分け、S3のストレージクラスの違いなど、実際の業務で重要なポイントを押さえることができます。

また、試験範囲にはネットワーク、セキュリティ、可用性、スケーラビリティといったクラウド設計における基本概念も含まれているため、AWSの知識だけでなく、クラウドアーキテクチャ全般の理解が深まるのも大きなメリットです。

## 2. 企業が直面する課題を知り、解決策を考えられるようになる

AWSの試験問題は、実際の企業が直面する課題をもとに作られています。そのため、試験勉強を通じて、企業がどのような問題を抱え、それをAWSのサービスでどう解決できるのかを学ぶことができます。

システムの可用性を高めるためにはどうすればよいか？

負荷が変動する環境で、コストを最適化しながら運用するには？

データのバックアップや復旧のベストプラクティスとは？

といった現実の問題に対する答えを探す過程で、AWSのベストプラクティスを自然と身につけることができます。これにより、業務でAWSを利用する際に単に「サービスを使う」だけでなく、「適切な構成を考える」力が身につきます。

## 3. 過去のプロジェクトを振り返り、より良い構成ができたと気づく

AWSの学習を進めると、「もしこの知識を以前の案件で持っていたら、もっと最適な設計ができたのに…」と感じることがよくあります。

過去にEC2でWebサーバーを構築していたけれど、SAAの学習を通じて「ALB（Application Load Balancer）を使ってトラフィックを分散させれば、スケールしやすくなったな」と気づくことがあります。また、手動でスケールしていた部分をAuto ScalingとCloudWatchを組み合わせて自動化できたと分かれば、より効率的なシステム運用が可能だったと実感することもあるでしょう。

このように、SAAの学習は単に資格を取るためだけでなく、実際の仕事にも大きな影響を与えます。資格取得を通じて過去の経験を振り返り、今後の業務に活かせる知識を増やすことができます。

## 4. 自分の知識の抜け漏れをチェックできる

AWSのサービスは多岐にわたり、自己流で学ぶと知識に偏りが出がちです。試験範囲を確認しながら勉強を進めることで、自分の知識のギャップを明確に把握できます。

AWSの試験ガイドラインに沿って勉強することで、広範な知識をバランスよく学ぶことができます。

## 5. 学習の習慣がつき、エンジニアとしての成長につながる

資格試験は、「いつか勉強しよう」と思っているとなかなか手がつきませんが、「この日までに合格する！」と決めれば、計画的に勉強できます。

AWSの資格勉強を通じて、

毎日少しずつ学習する習慣がつく

計画的に学ぶスキルが身につく

実際に手を動かして学ぶ力が養われる

といったメリットがあります。試験合格後もこの習慣が続けば、新しい技術を学び続けるエンジニアになれます。

## 6. 転職やキャリアアップにも役立つ

AWS SAAは、転職市場でも高く評価される資格です。「AWSを使えます」と口で説明するより、資格があった方がスキルを証明しやすくなります。

特にインフラエンジニアやクラウドエンジニアを目指す方にとって、AWS SAAはキャリアの大きな武器になります。採用担当者にとっても、「この人はAWSの基礎をしっかり理解している」と判断できる材料になります。

## まとめ

AWSを仕事で使っている人も、これから学びたい人も、ぜひSAAの資格取得に挑戦してみてください！

# 仲間を募集しています！
ARIではエンジニア・ITコンサルタント・PM職全方位で仲間を募集しております。
カジュアル面談、随時受付中です！
ご興味ある方はこちらをご覧ください。

https://note.com/ari_hr/n/n4aed9ba75421
緑によるABC393振り返り


# はじめに

> ユーザ名	hidehico
> コンテスト名	AtCoder Beginner Contest 393
> 順位	4033rd / 12397 (top 32.53%)
> パフォーマンス	840
> レーティング	943 → 933 (-10)

すげー微妙だなー(最大公約数にやられたやつ(僕)に言われたくないなー)
えーはい、Dで躓き、Eにまともに当りにいったためです、Fに行けばよかったなー(タラレバ)
ABCD4完、3ペナでした

### コンテスト中どうだったか
##### 開始3秒

acc newを実行する

##### 開始2分
なんか時間かかったけど、Aを通す

##### 開始4分
こっちも時間かけたけど、Bを通す

##### 開始7分
diff逆転かと思いきや、全然簡単で、Cを通す

##### 開始44分
3ペナ食って、Dを通す

##### 開始45分
Eが最大公約数、Fは、セグ木か、dp、それともセグ木dp、どうしよう
Fは難しそうだったので、Eを解きにいく

##### 開始1時間40分
そのまま時間が過ぎ去り、コンテスト終了
泣きそうになりました

### 使っているライブラリ

https://github.com/hidehic0/library

最近は、余り追加してません

そんじゃ一問ずつ感想書きますか

# [A問題](https://atcoder.jp/contests/abc393/tasks/abc393_a)
簡単だったけど、時間がかかった

ACコード(ライブラリ抜粋)
```python
a, b = sl()

if "fine" == a and "sick" == b:
    print(3)
elif "sick" == a and "fine" == b:
    print(2)
elif "sick" == a and "sick" == b:
    print(1)
else:
    print(4)
```
# [B問題](https://atcoder.jp/contests/abc393/tasks/abc393_b)
三重ループのB問題って出るんだ

ACコード(ライブラリ抜粋)
```py
S = s()
ans = 0

for a in range(len(S) - 2):
    for b in range(a + 1, len(S) - 1):
        for c in range(b + 1, len(S)):
            if b - a == c - b and S[a] == "A" and S[b] == "B" and S[c] == "C":
                ans += 1

print(ans)
```
# [C問題](https://atcoder.jp/contests/abc393/tasks/abc393_c)
一見難しそうだけど、グラフ用語を覚えとけば、問題なかった
あとset使わないとACできない(コーナケースがいくつも考えられる)

ACコード(ライブラリ抜粋)
```py
N, M = il()
L = [set() for _ in [0] * N]

ans = 0

for u, v in li(M, il, -1):
    if u == v:
        ans += 1
        continue

    if v in L[u] or u in L[v]:
        ans += 1
        continue

    L[u].add(v)
    L[v].add(u)

print(ans)
```

# [D問題](https://atcoder.jp/contests/abc393/tasks/abc393_d)
累積和と和の公式使って、解いた
言語化するのが難しいけど、マスを固定して、各マスの答えの最小値を、高速に求めればいいと思い累積和を使った

ACコード(ライブラリ抜粋)
```py
N = ii()
S = s()

AC = [0]
BC = [0]
L = []

for i in range(N):
    if S[i] == "1":
        AC.append(AC[-1] + i)
        BC.append(BC[-1] + 1)
        L.append(i)
    else:
        AC.append(AC[-1])
        BC.append(BC[-1])

ans = INF

for i in L:
    acos = ((i * BC[i]) - AC[i]) - simple_sigma(BC[i])
    bcos = ((AC[N] - AC[i + 1]) - (i * (BC[N] - BC[i + 1]))) - simple_sigma(
        BC[N] - BC[i + 1]
    )

    ans = min(ans, acos + bcos)

print(ans)
```

# [E問題](https://atcoder.jp/contests/abc393/tasks/abc393_e)

そもそも、どうやるかが分からなかった
検索して、いろいろ考えたけど無理だった

# [F問題](https://atcoder.jp/contests/abc393/tasks/abc393_f)

DPかセグ木だと思ったけど、残り2分で、TLEするDP解を思いついたが高速化するまで至らなかった

# 最後に

もっと精進しなきゃなーと実感しました(逃げずに、数学系問題考察するとか)

以上です
Vimコマンド集

## はじめに
Vimのコマンド記録用。

## 環境
```bash
Ubuntu 24.04
```


## インストール方法
```bash
sudo apt-get install vim
```

## 基本操作

### 起動と終了
- `vim` または `vi` - エディタの起動
- `vim <ファイル名>` - 特定のファイルを開く（存在しない場合は新規作成）
- `:q` - 終了
- `:w` - 保存
- `:wq` - 保存して終了
- `:q!` - 変更を破棄して終了

### カーソル移動（ノーマルモード）
基本的な移動コマンド：
- `h` - 左に移動
- `j` - 下に移動
- `k` - 上に移動
- `l` - 右に移動

効率的な移動コマンド：
- `w` - 次の単語の先頭へ
- `b` - 前の単語の先頭へ
- `W` - スペース区切りで次の単語へ
- `B` - スペース区切りで前の単語へ
- `0` - 行頭へ
- `$` - 行末へ
- `gg` - ファイルの先頭へ
- `G` - ファイルの末尾へ
- `<数字>G` - 指定した行番号へ移動

### 編集モード
- `i` - カーソル位置の左側から入力開始
- `a` - カーソル位置の右側から入力開始
- `Esc` - ノーマルモードに戻る

## テキスト編集

### カット・コピー・ペースト
Vimでは以下の用語が使用されます：
- カット → デリート（delete）
- コピー → ヤンク（yank）
- ペースト → プット（put）

主な操作：
- `dd` - 現在の行をカット
- `yy` - 現在の行をコピー
- `p` - カーソル位置の後にペースト
- `d$` - カーソル位置から行末までカット
- `d0` - 行頭からカーソル位置までカット
- `dw` - 単語をカット
- `x` - 1文字削除

### 取り消しと再実行
- `u` - 直前の操作を取り消し（undo）
- `Ctrl + r` - 取り消しを戻す（redo）

## 検索と置換

### 検索
- `/<検索文字列>` - 前方検索
- `?<検索文字列>` - 後方検索
- `n` - 次の検索結果へ
- `N` - 前の検索結果へ

### 置換
```
:%s/<置換前>/<置換後>/g
```
- `%s` - ファイル全体を対象
- `g` - 行内のすべての一致を置換

## よく使う組み合わせコマンド

### テキスト操作の組み合わせ
- `cw` - 単語を削除して入力モードへ（change word）
- `ciw` - カーソルがある単語を削除して入力モードへ（change inner word）
- `ci"` - ダブルクォート内のテキストを削除して入力モードへ
- `ci'` - シングルクォート内のテキストを削除して入力モードへ
- `ci{` - 波括弧内のテキストを削除して入力モードへ
- `daw` - カーソル位置の単語を周囲のスペースも含めて削除（delete a word）
- `diw` - カーソル位置の単語のみを削除（delete inner word）

### 行操作の組み合わせ
- `dd` + `p` - 現在の行を下の行と入れ替え
- `ddkP` - 現在の行を上の行と入れ替え
- `Y` + `p` - 現在の行を複製
- `ggdG` - ファイルの内容をすべて削除
- `ggVGy` - テキスト全選択 & コピー

### 検索と置換の組み合わせ
- `*` + `ciw` - カーソル位置の単語を検索して置換
- `/文字列` + `cgn` - 検索文字列を次々と置換（`n`で次へ、`.`で前回の置換を繰り返し）

### プログラミング時に便利な組み合わせ
- `ci(` - 括弧内の引数を削除して入力モードへ
- `vi{` + `=` - 波括弧内のコードを自動インデント
- `gg=G` - ファイル全体を自動インデント
- `A;` + `Esc` - 行末にセミコロンを追加
- `^i` - 行頭にインデントを追加

### 便利なビジュアルモード操作
- `v` + `ap` - 段落を選択
- `V` + `G` - 現在行から最終行までを選択
- `vi"` - ダブルクォート内のテキストを選択
- `vib` - 括弧内のテキストを選択

## 学習リソース
- `vimtutor` - 対話形式のチュートリアル
- `:help` - Vimの詳細なヘルプドキュメント
Qiitaの投稿を始めます

# 私が学習を始めた理由と目標設定

## 現状
新卒2年目のSE（文系未経験）として、中堅SIerの会社に勤務しています。研修後、Webシステムの案件に配属され、これまで担当した業務は以下の通りです：

- システムの運用保守
- テスト業務
- 現行システムの調査や資料作成

現在のところ、開発業務には直接携わっておらず、コードに触れた経験も簡単な修正程度です。普段は自己学習もしておらず、ITの知識は皆無の無能社員です。

## 学習を始めた経緯
新卒で入社してから2年間、自分自身が何も成長していないことに強い危機感を感じていました。元々怠惰な性格で、「自己学習しなきゃ」と思いつつも、なかなか行動に移すことができず、そのまま仕事にもやる気を感じられずにいました。
そんな現状に対して危機感が強くなり、現状を打破するために、ようやく覚悟を決めて学習を始めることを決意しました。

## 目標
短期目標:開発に必要な基礎知識を身につける
中期目標:自力でシステムを実装できるようになる
長期目標:自社開発企業への転職を目指す
【忘備録】bashでの計算式

## 要はCで言うところのa=a+1;とかa++;
bashって色々面倒で、計算式は((計算式))にする必要があるので、忘れないように
### a=a+1
```
a=$(($a+1))
```
### a++
```
let a++
```
```
((a++))
```
```
((a += 1))
```
「指定されたファイルの仮想ディスクサポートプロバイダーが見つかりませんでした」と表示されてisoファイルをマウントできなかったときの対処法

Windows11のisoファイルを拾ってきてアップデートしようとした際、isoファイルがマウントできずにアップデートできず困ったのでメモ書きです。
みんながみんな全く同じ解決方法でいけるとも限りませんが、全く情報が出てこなくて2日ぐらい溶かしたので誰かの参考になれば幸いです。

# 結論
isoファイルをzip感覚で解凍して、出てきたsetup.exeを実行したらいけた。


## 事象と試したこと
検索ワードとして引っかかりやすくするために、試した事と失敗時のエラーメッセージを置いておきます。

windows11のバージョンが22H2になっていてサポ切れになっており、windows updateから24H2へのアップデートができなかったのでここを上から試しました。
https://www.microsoft.com/ja-jp/software-download/windows11

1. windowsインストールアシスタントを利用してアップデートしようとして失敗
    エラーコードは「0x80072ee2」でした。
    ググると「windows update時にサーバーに繋がらない時のエラー」みたいなことが出てきて、ネットワーク設定周りの改善をせよと出てきました。
    ネットは普通に接続できていて埒が明かなかったので次の手段へ。
    <br>
1. isoをダウンロードし、エクスプローラーからマウントしようとして失敗
    USBやDVDを使いたくなかったので「x64 デバイス用 Windows 11 ディスク イメージ (ISO) をダウンロードする」から日本語版の「Win11_24H2_Japanese_x64.iso」をダウンロードし、エクスプローラーからマウントを選択したところ失敗。
    エラーメッセージは「ファイルのマウント中に問題が発生しました。」
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2337911/4b1c4c1b-27e1-436e-9b99-3e6f68534f72.png)
    あまりにも情報が無さ過ぎてメッセージとして終わってるので、せめてエラーメッセージを見ようとコマンドラインからのマウントを試みました。
    <br>
1. isoをPowerShellからマウントしようとして失敗
    エクスプローラーからできなかったのでダメ元でしたが、やはり失敗。
    エラーメッセージは「Mount-DiskImage : 指定されたファイルの仮想ディスク サポート プロバイダーが見つかりませんでした。」
    ちなみにこのエラーメッセージでググった結果は役に立たずでした。
    サービスからVirtual Diskを起動したりしましたがエラーメッセージは変わらずでした。
    <br>
1. isoを解凍し、出てきたsetup.exeを実行したところ、インストールウィザードが立ち上がり無事インストールできた
    ここまでの状況から1日進展なく翌々日、そういえばisoって解凍できたなと思い立ち7-zipで解凍して出てきたsetup.exeを実行したところ、インストールウィザードが立ち上がり無事インストールできました。
OMC241C(789,整数)

https://onlinemathcontest.com/contests/omc241/tasks/13390

$g(801)-2g(800)+g(799)$は$\lbrace g(801)-g(800)\rbrace-\lbrace g(800)-g(799)\rbrace$と変形できるので、まず$g(n+1)-g(n)$の形を考えます。

$g(n+1)-g(n)$
$=\Sigma_{s=1}^{n+1}\Sigma_{t=1}^{n+1}f(s,t)-\Sigma_{s=1}^n\Sigma_{t=1}^n f(s,t)$
$=f(n+1,n+1)+\Sigma_{s=1}^n f(s,n+1)+\Sigma_{t=1}^n f(n+1,t)$ $…①$

$①$を$[A]$ $f(n+1,n+1),$ $[B]$ $\Sigma_{s=1}^n f(s,n+1),$ $[C]$ $\Sigma_{t=1}^n f(n+1,t)$に分けます。

$[A]$ $f(n+1,n+1)$
$n+1$は$n+1$で割り切れるので$0$です。

$[B]$ $\Sigma_{s=1}^n f(s,n+1)$
$s<n+1$の関係において、$s$を$n+1$で割った余りは$s$です。
よって、$\Sigma_{s=1}^n s$です。

$[C]$ $\Sigma_{t=1}^n f(n+1,t)$
ひとまずこのまま持っておきます。

続いて、$\lbrace g(801)-g(800)\rbrace-\lbrace g(800)-g(799)\rbrace$を考えます。

$①$の$[A],[B],[C]$より、
$[A]$の差分
$=0$

$[B]$の差分
$=\Sigma_{s=1}^{800} s-\Sigma_{s=1}^{799} s$
$=800$

$[C]$の差分
$=\Sigma_{t=1}^{800} f(801,t)-\Sigma_{t=1}^{799} f(800,t)$
$=\Sigma_{t=1}^{800} \lbrace f(801,t)-f(800,t)\rbrace-f(800,800)$
$=\Sigma_{t=1}^{800} \lbrace f(801,t)-f(800,t)\rbrace $ $…②$

$②$について考えます。
$801$を素因数分解すると、$3^2×89$です。
$t$を$1$から順に見ていきます。
$801-800≡0$ $(mod$ $1)$
$801-800≡1$ $(mod$ $2)$
$801-800≡-2$ $(mod$ $3)$
$801-800≡1$ $(mod$ $4)$
$801-800≡1$ $(mod$ $5)$
$801-800≡1$ $(mod$ $6)$
　:
　:
$801-800≡1-3^2$ $(mod$ $3^2)$
　:
　:
$801-800≡1-89$ $(mod$ $89)$
　:
　:
$801-800≡1-3×89$ $(mod$ $3×89)$
　:
　:
$801-800≡1$ $(mod$ $3^2×89-1)$

上記より、
$[C]$
$=\Sigma_{k=1}^{800}1-[801$の約数の和$]+801$
と変形できます。
これを解くと、
$=800-(1+3+3^2)×(1+89)+801$
$=431$
になります。

したがって解は、
$[A]+[B]+[C]$
$=0+800+431$
$=1231$
です。
connection refused エラー、データベースに接続できなかった

## はじめに
```dial tcp 127.0.0.1:3306: connect: connection refused```
というエラーがDockerで立てたMySQLコンテナにバックエンドから登録処理をしようとした時に出ました。

どうやらlocalhostのポート番号3306へのアクセスが拒否されているようです。

今回、docker-compose.ymlでGoのバックエンドコンテナとMySQLコンテナが立ち上がるようにしています。

## 原因
バックエンドの`.env`を以下のように記述してしました。

```.env
MYSQL_HOST=127.0.0.1 # ここが原因
MYSQL_PORT=3306
MYSQL_USER=your_user
MYSQL_PASSWORD=your_password
MYSQL_DATABASE=your_database
```
`.env`ファイルを見てみると`MySQL_HOST`に`127.0.0.1`と書いていました。
バックエンドもコンテナで立てているので、コンテナ間通信では`docker-compose.yml`で定義したコンテナ名を指定する必要がありました。

## 解決方法
```.env
MYSQL_HOST=your_mysql # ここをdocker-compose.ymlのコンテナ名にする
MYSQL_PORT=3306
MYSQL_USER=your_user
MYSQL_PASSWORD=your_password
MYSQL_DATABASE=your_database
```

`127.0.0.1`ではなく`docker-compose.yml`で書いたコンテナ名にすることでエラー解決することができました。

`.env`を変更した後は、コンテナを立ち上げ直すのを忘れないようにしましょう。

#### 補足説明：
- Docker環境では、各コンテナは独立した環境として動作します。
- `127.0.0.1`や`localhost`は自分自身、つまりそのコンテナ自身を指すため、別のコンテナのMySQLには接続できなかったようです。

## さいごに
この記事が誰かの役に立てば幸いです。
自作の学習記録アプリをアップデート

# はじめに
JISOUの課題にて前回作成した学習記録アプリのアップデートを行いました。
主な内容としてはsupabaseとの疎通、firebase使ったアプリのデプロイ、テストコードの作成、Github Actionを使ったCI/CDの実装となります。今回はこれらの作業の感想になります。
# 使用技術
・React
・VITE
・SUPABASE
・Firebase
・Jest
・react-testing-library
・GithubActions
# SUPABASE
このサービスについては今回DBとして利用しただけになるので、特に言及することはないのかなと思っています。自身の力量の問題ではありますが、疎通を行うまでの初期設定の部分でまだまだ理解できていないことが多く、実際の作業においても時間がかかってしまったため次回の記事までには克服したいと思っています。
# Firebase
自分の理解ですがアプリをデプロイをするとなるとサーバーにTomcatをインストールして、Webappsディレクトリ内にビルドされたwarファイルを配置、tomcatを再起動することでwarファイルが展開されてデプロイが完了するというイメージ（javaは確かこんな感じだったと思う）だったので、それと比べると想像より簡単にデプロイできてるんだなと思いました。
# Jest + react-testing-library
今回の課題で一番躓いたところになります。未だに理解ができていないですし、今後もこれに悩まされるんだろうなと思っています。今後の課題を進める中で理解を深め、理解できた時には記事にして誰かの役に立つことを目標として頑張ろうと思います。
# GithubActions
ymlファイルに書いておけば資材をpushするだけで自動でテスト・ビルド・デプロイを実行してくれるため、非常に便利だと感じた。
エラー内容を確認する時にGithubを開く必要がある点やymlファイルの記載が難しい点などの面倒な部分もありますが、ここについては慣れれば問題ないと認識しているので、今後も活用して慣れていきたいと思います。
# 最後に
今回の課題を通して、自身の理解力のなさとエラーに直面した時のモチベの維持の難しさをとても深く実感することができました。とはいえ、今回の課題でやったことは今後Reactをやっていく上で重要な知識・技術であると思いますし、自身の理解力のなさなどはこれからも常に向き合うべきものである感じているので、焦らずに自分のペースでやっていければいいなと思います。
# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼

https://projisou.jp
【Linux】grepコマンドの基本的な使い方

## **前提**
以下のファイルがある前提とします。

- `sample_1.txt`
- `sample_2.txt`

```txt
hello
world
Hello, World!
```

※どちらのファイルも内容は同じです。

---

## **特定の文字列を含む行を検索**
### **入力**
```bash
$ grep "Hello" sample_1.txt
```
`sample_1.txt` の中から "Hello" を含む行を検索します。

### **出力**
```
Hello, World!
```

---

## **大文字小文字を無視する `-i`**
### **入力**
```bash
$ grep -i "Hello" sample_1.txt
```
`sample_1.txt` の中から "Hello" を含む行を、大文字小文字を区別せずに検索します。

### **出力**
```
hello
Hello, World!
```

---

## **行番号を表示する `-n`**
### **入力**
```bash
$ grep -n "Hello" sample_1.txt
```
`sample_1.txt` の中から "Hello" を含む行を検索し、行番号を付けて表示します。

### **出力**
```
3:Hello, World!
```

---

## **複数パターンを検索 `-E`**
### **入力**
```bash
$ grep -E "hello|world" sample_1.txt
```
`sample_1.txt` の中から "hello" または "world" を含む行を検索します。  
`-E` オプションを使用すると、拡張正規表現を利用できます。

### **出力**
```
hello
world
```

---

## **前後の行を表示する `-C`**
### **入力**
```bash
$ grep -C1 "world" sample_1.txt
```
`sample_1.txt` の中から "world" を含む行と、その前後1行を検索します。

### **出力**
```
hello
world
Hello, World!
```

---

## **特定の拡張子のファイルを対象として検索**
### **入力**
```bash
$ grep "Hello" *.txt
```
拡張子が `.txt` のファイルを対象として、"Hello" を含む行を検索します。

### **出力**
```
sample_1.txt:Hello, World!
sample_2.txt:Hello, World!
```

---

## **検索にヒットしたファイル名のみ表示 `-l`**
### **入力**
```bash
$ grep -l "Hello" *.txt
```
拡張子が `.txt` のファイルを対象として、"Hello" を含むファイルの名前のみを表示します。

### **出力**
```
sample_1.txt
sample_2.txt
```

---

## **ディレクトリを指定して再帰的に検索 `-r`**
### **入力**
```bash
$ grep -r "Hello" .
```
カレントディレクトリ (`.`) 以下のすべてのファイルを再帰的に検索し、"Hello" を含む行を表示します。

### **出力**
```
./sample_1.txt:Hello, World!
./sample_2.txt:Hello, World!
```