OmniAICreator/Qiita-1.07M huggingface dataset:
PCからフリーWifiに繋がらない

# 概要
マクドナルドでフリーWifiに接続する際、
スマホはできるのにPCはできなくてあたふたしたので備忘録として残します。
[参考になったサイト](https://www.chankome.com/entry/public-wifi-no-connection)

# 問題
フリーWifiに接続しても「インターネットなし」のまま、
フリーWifi接続ページが開かない。
![無題7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/8ff61df3-8567-af16-9c49-9b1ebd2c9ea8.png)

ページにアクセスしてもDNSエラーが表示される。
![dnserror.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/b147d38c-aab5-3f6c-40e6-fdd397eda670.jpeg)

# 解決方法
DNSを手動設定→自動設定に変更しました。

# DNS設定の変更
[Wifiアイコン]→[ネットワークとインターネットの設定]をクリック
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/71351483-45d1-6541-7151-62eaf2c3c5ec.png)

[アダプターのオプションを変更する]をクリック
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/aee226b2-b40a-df36-6282-e53f3fb3621f.png)

[Wi-Fi]を右クリック→プロパティをクリック
![無題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/fd538d1d-328d-941e-0529-e2ab3d0f0289.png)

[インターネット プロトコル バージョン4(TCP/IPv4)]を選択、
[プロパティ]をクリック
![無題4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/5fda38f7-b253-0161-50dd-c864d1ac931a.png)

[次のDNSサーバーのアドレスを使う]から、
[DNSサーバーのアドレスを自動的に取得する]に変更すると解決。
![無題5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/ca7d0046-3a60-f501-dd77-b1056164ef04.png)
![無題6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/a9ae1ec6-7e8c-3885-1bab-66386a2c4d7f.png)

# DNSを設定する場合
アダプターではなく、Wifiごとに設定すれば今回の問題は起きないと思われます。

[Wifiのプロパティ]をクリック
![無題8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/089d55b6-2c99-0899-4cd6-547306a7db65.png)

[IP設定の編集]からDNSを設定する。
![無題9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528591/3e2a8b07-ef10-2d5f-33bc-04c4ec40afa0.png)

# おわりに
どなたかの参考になれば幸いです。
MySQL テーブル操作まとめ


## この記事ではMySQLのテーブル操作をまとめています。

#### 1. 列の取得
`SELECT id,name FROM user;`
#### 2. 列を取得し、列名を変更する
`SELECT id AS 番号,name AS 名前 FROM user;`
#### 3. 列を演算して取得
* 掛け算
`SELECT name AS 名前, price AS 価格, price * 1.08 AS 税込価格 FROM producs;`
* Round（数値、丸め込み桁数
`SELECT *,ROUND(price * 1.08, 2) AS 税込価格 FROM products;`
* 文字列連結Concat（文字列、文字列、…）
`SELECT CONCAT(last_name,' ',first_name, 'さん') FROM users;`
#### 4. 条件を指定するして値を取得する
`SELECT name,price FROM products WHERE price >= 9800;`
| 演算子 | 意味 |
| --- | --- |
| IN | 含まれている |
| NOT IN | 含まれていない |
| IS NULL | 値がある |
| IS NOT NULL | 値がない（＝＝NULL） |
| LIKE | パターンマッチング |
| BETWEEN … AND … | 値が範囲内にある,andでも書ける |

* idが1or2or3の行を取得
`SELECT * FROM products WHERE id IN(1,2,3);`
* like
`%`・・・0文字以上の任意の文字列
`_`・・・任意の一文字

| ワイルドカード | パターン |
| --- | --- |
| 'A%' | Aで始まる文字列 |
| '%A%' | Aを含む文字列 |
| '%A' | Aで終わる文字列 |
| '__A' | 任意の二文字で始まり、Aで終わる文字列 |
#### 5. 集約関数

| 関数 | 意味 |
| --- | --- |
| SUM(e) | 合計 |
| AVG(e) | 平均 |
| MIN(e) | 最小値 |
| MAX(e) | 最大値 |
| COUNT(e) | 行数カウント |
* 例
`SELECT SUM(AMOUNT) AS 合計 FROM orders WHERE time >= '2020-03';`
* 重複を排除した集約
`COUNT (DISTINCT e)`
#### 6. グループ化
`SELECT id,name,COUNT(*) FROM users GROUP BY id;`
* 集約結果を更に絞り込むhaving
* 記述順序
    1. SELECT
    1. FROM
    1. 結合処理
    1. WHERE
    1. GROUP BY
    1. HAVING
    1. ORDER BY
    1. LIMIT
#### 7. 並び替え
DESC・・・降順
ASC・・・昇順
#### 8. 日付と時刻の演算
* 現在の日付
`SELECT CURRENT_DATE();`
* 現在の時刻
`SELECT CURRENT_TIMESTAMP();`
* n日後の日付
`SELECT CURRENT_DATE() + INTERVAL 3 DAY;`
* n時間前の時刻
`SELECT CURRENT_TIMESTAMP() - INTERVAL 6 HOUR;`
* extract
日付や時刻の特定の部分までを取り出す
`SELECT * FROM weddings WHERE EXTRACT(year_month FROM time) = 202202;`
#### 9. 結合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529896/3369e3f7-ce4e-987b-0745-56a8b9bd80c8.png)
* union レコードの足し算
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529896/e7949cf3-1eec-b359-19e0-9082ad5921d5.png)
#### 10. ビュー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529896/727d5415-4292-6084-0e09-e88da11a79ab.png)
#### 11. サブクエリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529896/4c6e3b3a-c49a-8163-39f8-2d69d6e0bf5d.png)
#### 12. 条件分岐
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529896/129c6055-6b2c-5563-e2bf-9932aabaacb8.png)
CSSの単位って何？（px,em,rem .....）



皆さん、Webページのデザインを考えるとき、どのような「単位」でサイズを指定していますか？
CSSには、色々な単位が存在します。今回はその中でも主要なものを簡単にご紹介します！

## 1. px（ピクセル）

- **定義**: 画面上の一つ一つの点を示す単位。
- **使いどころ**: サイズや位置を固定で指定したい時に使います。

👉 **ポイント**: `px`は最も一般的で直感的な単位！

## 2. em

- **定義**: 親要素のフォントサイズを基準にした相対的な単位。
- **使いどころ**: 親要素のフォントサイズに合わせて、サイズを自動調整したい時。

👉 **ポイント**: 親要素のフォントサイズが変われば、`em`で指定したサイズも変わります！

## 3. rem

- **定義**: ルート要素（htmlタグ）のフォントサイズを基準にした相対的な単位。
- **使いどころ**: 全体の基準となるフォントサイズに合わせて、一貫してサイズを調整したい時。

👉 **ポイント**: 基準となるフォントサイズ一つで、全体のサイズを一元的に管理できます！

## 4. %

- **定義**: 親要素のサイズを基準にした相対的な単位。
- **使いどころ**: 親要素に対して、何%のサイズや位置を取るかを指定したい時。

👉 **ポイント**: レスポンシブデザインを考える時に大活躍！

## 5. vh & vw

- **定義**: 画面の高さ（`vh`）と幅（`vw`）を基準にした単位。1`vh`は画面の高さの1%、1`vw`は画面の幅の1%。
- **使いどころ**: 画面サイズに応じてサイズや位置を動的に調整したい時。

👉 **ポイント**: 画面サイズにフィットしたデザインを実現できます！

## CSSの単位を用途ごとに比較

| 単位 | 定義                                           | 一般的な用途                                                                                              | 
|------|------------------------------------------------|-----------------------------------------------------------------------------------------------------------|
| px   | 画面上の一つ一つの点を示す単位。               | サイズや位置を固定で指定したい時。最も一般的な単位。                                                     |
| em   | 親要素のフォントサイズを基準にした相対単位。   | 親要素のフォントサイズに応じて、サイズや位置を調整したい場合。子要素が親のサイズに動的に合わせたい時。   |
| rem  | ルート要素のフォントサイズを基準にした相対単位。| 全体のデザインの基準となるフォントサイズに一貫して合わせたい時。                                           |
| %    | 親要素のサイズを基準にした相対単位。           | 親要素に対して、子要素のサイズや位置を指定したい場合。特にレスポンシブデザインで用いる。                  |
| vh   | 画面の高さの1%を示す単位。                     | 画面の高さに合わせて要素のサイズや位置を調整したい時。                                                    |
| vw   | 画面の幅の1%を示す単位。                       | 画面の幅に合わせて要素のサイズや位置を調整したい時。                                                      |
which, whereis

```
[linuxstudy@xxxx ~]$ which cd
/usr/bin/cd
```
```
[linuxstudy@xxxx ~]$ whereis cd
cd: /usr/bin/cd /usr/share/man/man1/cd.1.gz /usr/share/man/man1p/cd.1p.gz
```
```
[linuxstudy@xxxx ~]$ type ls
ls は `ls --color=auto' のエイリアスです
[linuxstudy@xxxx ~]$ type cd
cd はシェル組み込み関数です
[linuxstudy@xxxx ~]$ type mkfs
mkfs は /usr/sbin/mkfs です
```
Reactでコンポーネントを細かくするメリット


Reactの魅力の一つに、**コンポーネント指向**があります。
それぞれの部品をコンポーネントとして切り分けて開発することで、色んなメリットが生まレます。このメリットを知ってReactの力をフルに活用しましょう！

## 1. 再利用性が上がる

小さなコンポーネントを作れば、それが**再利用可能な部品**になります。例えば、ボタンやカードなど、同じデザインのものを何度も使うことができるんです。

👉 **ポイント**: コンポーネントを細かく = 何度も使える部品が増える！

## 2. 保守・修正が楽

1つ1つのコンポーネントが小さければ、その中身もシンプル。何か不具合があったときや新しい機能を追加したいときも、変更箇所が明確で修正がしやすくなります。

👉 **ポイント**: 小さいコンポーネント = 修正箇所がわかりやすい！

## 3. チーム開発がスムーズ

小さなコンポーネントごとに役割分担ができるので、チーム開発でもメンバーがそれぞれのコンポーネントに集中して作業することができます。競合（コンフリクト）も減少しますよ。

👉 **ポイント**: 細かいコンポーネント = チームでの作業分担がしやすい！

## 4. テストがやりやすい

小さい単位でテストを書くことができるので、バグの発見や、将来的な変更に強いコードを作ることができます。

👉 **ポイント**: コンポーネントを細かく = テストも細かく、丁寧に！
【真夏の怪談】毎時12分間の怪異

## プロローグ

それは、ある真夏の蒸し暑い日の事でした。  
その日はひと気の少ないオフィスで、<b><font color="Red">退職した前任者から引き継いだシステム</font></b>(**Rシステムと言います**)の資料を確認したりと気怠い時間を過ごしていました。  
私はその会社の情シスで社内SEをやっております。小さな会社なのでヘルプデスクやサポート専任者などはおらず、SEと言ってもユーザーサポートも受けるような立場です。  
(あ、別にその事に不満はありませんよ？)  

**時刻は11時頃だったでしょうか...** そこに、Rシステムのユーザーさんが心なし青い顔をしながら現れたのです。  

## ユーザー曰く...

<b><font color="Red">ユーザーさん：Rシステムの年度集計の数字が、どうも合わないんだよね...</font></b>  

私は手元のPCでシステムの問題の画面を開き、別途資料に残されていた集計SQLを流して画面の数字と見比べてみました。  
**特に問題はないようです。**  
その事をユーザーさんに伝え、ユーザーさんPCでも一緒に問題がない事を確認しました。  

**ユーザーさん：変だなぁ...さっきは合わなかったんだよなぁ...**  

**納得いかない感じ**でしたが**今出ている数字で問題がない**との事なので、私は自席に引き上げました。  
念のため**年度集計のコードを眺めて動かしてみましたが、やはり問題なく動いています。**  
その日は釈然としない気持ちを抱きながらも帰途に就きました。  

## しかし次の日も...

同じような時分に昨日のユーザーさんが現れました。  

<b><font color="Red">ユーザーさん：やっぱり年度集計の数字、合わないんだよ...今度はスクショも取ったよ。</font></b>  

私は昨日同様、問題の画面と集計SQLの数字、スクショの数字を突合しました。  
**確かにスクショの数字だけが不足しています。**  

VisualStudioで問題のコードを表示します。  
昨日も眺めましたが、**まぁ端的に言って<font color="Red">ク〇コード</font>です。**  
**必要な関数分離がされておらず<font color="Red">不要な関数分離</font>がされていて**、**まるでコードのジャングルを彷徨っている気分**になります。  
**昨日も彷徨っておいたお陰**で集計条件のコードに辿り着きました。  

``` C#:年度集計部分(抜粋)

//期初から現在までのデータを集計
//　期間キーは西暦4桁+月2桁の計6桁
string where = "期間キー >= '" 
    + nendoTextBox.Text + "'04' AND 期間キー <= '" 
    + DateTime.Now.ToString("yyyymm") + "'";

//(where付けてSQL実行)

```

## 横で話を聞いていた情シス同僚登場

事情を聞いていた同僚さんも横からコードを覗き込みます。  
3人の顔が、モニタに照らされて青白く染まっています。  
そして暫くして...  

**同僚さん：あっ...！？</font>**  

## (ナレーション)

<b><font color="Red">お気付きになっただろうか...(効果音:キャー...)</font></b>

## 同僚が指をさした先は...

``` C#:年度集計部分(問題部分)

DateTime.Now.ToString("yyyymm")

```

**同僚さん：日時形式文字列の<font color="Red">"mm"は分の2桁表現、月の2桁表現は"MM"</font>だね...**  

https://learn.microsoft.com/ja-jp/dotnet/standard/base-types/custom-date-and-time-format-strings

``` C#:年度集計部分(正しい姿)

DateTime.Now.ToString("yyyyMM")

```

## エピローグ

いやぁ～<b><font color="Red">実に怖い</font></b>**ですねぇ！**  

**8月なら"2023/04～2023/08"で検索している積もり**が  
<b><font color="Red">×時5分に検索すると"2023/04～2023/05"で検索</font></b>していたなんて！  
**0～3分の間の検索結果は0件だったんだね！**  

<b><font color="Red">×時ぴったりから数分間だけ発生する不具合</font></b>とか、**とってもサポート泣かせ！**  

**そして数年の月日が流れ、Rシステムは新しいシステムにリプレースされました。**  
新システムではプログラマ(＝私です)が**直接日時形式文字列を書かなくて良いように**<b><font color="Red">ToYearMonthString()のような拡張メソッドを整備</font></b>、**同じ惨劇を繰り返さないように対策**が打たれました。  

<b><font color="Red">しかしRシステムは過去データ参照用に今もひっそりと動いています。</font></b>  
**いつ新たな惨劇が襲いかかって来るのか判りません。**  
果たしていつか、**私がこの恐怖から逃れられる日は訪れるのでしょうか...**  

## 蛇足

この物語は**実話を基にしたフィクション**です。  
**Rシステムは実在します**が、新システムに移行した今は<b><font color="Red">そんなに恐怖に怯えてはいません</font></b>(**エピローグ盛りました...**)  

**皆様も<font color="Red">ホラーエピソード</font>、是非投稿してみて下さい！**
locate

```
[linuxstudy@xxxx ~]$ locate filec
/home/linuxstudy/filec.txt
/home/linuxstudy/.config/gtk-2.0/gtkfilechooser.ini
/usr/lib64/python2.7/filecmp.py
/usr/lib64/python2.7/filecmp.pyc
/usr/lib64/python2.7/filecmp.pyo
/usr/share/anaconda/post-scripts/80-setfilecons.ks
/usr/share/glade/pixmaps/hicolor/16x16/actions/widget-gtk-filechooserbutton.png
/usr/share/glade/pixmaps/hicolor/16x16/actions/widget-gtk-filechooserdialog.png
/usr/share/glade/pixmaps/hicolor/16x16/actions/widget-gtk-filechooserwidget.png
/usr/share/glade/pixmaps/hicolor/22x22/actions/widget-gtk-filechooserbutton.png
/usr/share/glade/pixmaps/hicolor/22x22/actions/widget-gtk-filechooserdialog.png
/usr/share/glade/pixmaps/hicolor/22x22/actions/widget-gtk-filechooserwidget.png
```
/etc/updatedb.conf 除外リスト
```
PRUNE_BIND_MOUNTS = "yes"
PRUNEFS = "9p afs anon_inodefs auto autofs bdev binfmt_misc cgroup cifs coda configfs cpuset debugfs devpts ecryptfs exofs fuse fuse.sshfs fusectl gfs gfs2 gpfs hugetlbfs inotifyfs iso9660 jffs2 lustre mqueue ncpfs nfs nfs4 nfsd pipefs proc ramfs rootfs rpc_pipefs securityfs selinuxfs sfs sockfs sysfs tmpfs ubifs udf usbfs fuse.glusterfs ceph fuse.ceph"
PRUNENAMES = ".git .hg .svn"
PRUNEPATHS = "/afs /media /mnt /net /sfs /tmp /udev /var/cache/ccache /var/lib/yum/yumdb /var/spool/cups /var/spool/squid /var/tmp /var/lib/ceph"
/etc/updatedb.conf (END)
```
要素の真ん中に文字を表示したい

# divの中に書いた文字を真ん中に表示したい

## 中央表示　横
```html
<div class="number">1</div>
```

```css
.number{
    display: flex;
    justify-content: center;
    align-items: center;
}
```

これだけ！！！

## 中央表示　縦
- block要素の中にinline要素を入れておく
```html
<div class="outer">
    <div class="inner">
        真ん中！
    </div>
</div>
```

```css
.outer{
    height: 50px;
    display: table;
}

.inner{
    display: table-cell;
    vertical-align: middle;
}
```
:::note
outerで必ず高さを指定すること。
outerはblock要素、innerはinline要素であること。
:::

https://www.granfairs.com/blog/staff/centering-by-css
Reactの`className`って何？

`className`ってよく見かけますよね？ 
今回は、この`className`について、初心者の方でもピンとくるように解説します。

## 1. まず、`class`と`className`の違いって？

HTMLでスタイルを指定するとき、`class`属性を使いますよね。でも、ReactのJSX（JavaScriptで書くHTMLみたいなもの）では、`class`じゃなくて`className`を使います。なぜかって？JavaScriptの中で`class`は特別な意味があるからなんです。

👉 **ポイント**: Reactでスタイルのクラスを指定するときは、`className`を使う！

## 2. `className`の使い方

超簡単！文字列でクラス名を書きます。

```jsx
<div className="my-style">
  こんにちは、React！
</div>
```

## 3. 複数のクラスを指定したいときは？

スペースで区切ればOK！

```jsx
<div className="style1 style2">
```

## 4. 条件によってクラスを変えたい！

こんな風に、条件を使って動的にクラス名を変えることもできるんです。

```jsx
const isBlue = true;

<div className={`box ${isBlue ? 'blue' : 'red'}`}>
```

👉 **ポイント**: バッククォートと${}を使うと、変数の中身を文字列に埋め込める！
マークダウン記法

マークダウンチートシートを見ながら練習します。

# リスト
* [見出し](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E8%A6%8B%E5%87%BA%E3%81%97)
* [太文字](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E5%A4%AA%E6%96%87%E5%AD%97)
* [斜体](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E6%96%9C%E4%BD%93)
* [囲み](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E5%9B%B2%E3%81%BF)
* [リンク](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E3%83%AA%E3%83%B3%E3%82%AF)
* [引用](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E5%BC%95%E7%94%A8)
* [打消し線](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E6%89%93%E6%B6%88%E3%81%97%E7%B7%9A)
* [水平線](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E6%B0%B4%E5%B9%B3%E7%B7%9A)
* [画像挿入](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E7%94%BB%E5%83%8F%E6%8C%BF%E5%85%A5)
* [テーブル表記](https://qiita.com/yuta24SE/items/e4a15edce21302264081#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E8%A1%A8%E8%A8%98)

＊リストをクリックすると項目に飛べます

# 見出し
#を1～6個で見出しの調整ができる
なんか少ないと大きくて、多いと小さいってわかりにくいね。
```
# h1
## h2
### h3
#### h4
##### h5
###### h6
```
# h1
## h2
### h3
#### h4
##### h5
###### h6



# 太文字
アスタリスク2つで文字を囲むことで太文字になる
```
**太文字**
```
**太文字**




# 斜体
アスタリスク1つ、またアンダースコアで文字を囲むと斜体になる
日本語じゃならないみたいね。半角英数字ならなるようです。
```
*abcdefg*（アスタリスク）
_abcdefg_（アンダースコア）

```
*abcdefg*（アスタリスク）
_abcdefg_（アンダースコア）



# 囲み
この黒いのが囲みってやつらしい
```
囲まれてます。
```



# リンク
```
[Google](https://www.google.com)
[表示したい文字]（URL）
```
[Google](https://www.google.com)



# 打消し線
```
~~こんにちは~~
```
~~こんにちは~~



# 引用
```
>私今から引用されます。
```
>私今から引用されます。



# 水平線
```
こんにちは
***
こんばんは
```
アスタリスクを3つ以上つなげることで水平線を引くことができる
こんにちは
***
こんばんは


# 画像挿入
```
![text_gojiyuuni_otorikudasai.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509907/3374dc66-b833-5801-7df0-07a86ffbf51e.png)

![代替テキスト](画像URL)
```
![text_gojiyuuni_otorikudasai.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509907/3374dc66-b833-5801-7df0-07a86ffbf51e.png)




# テーブル表記
```
|左寄せ    |中央寄せ     |     右寄せ|
|:---------|:-----------:|----------:|
|左　　　　|中    　　|右         |
|左|中|右|
```
思ったより自由度がありますね。

|左寄せ    |中央寄せ     |     右寄せ|
|:---------|:-----------:|----------:|
|左　　　　|　　中　　|　　　右|
|左|中|右|


思ったより簡単でしたね。
Chat GTPにプログラミングさせてると

　最近はRuby on rails でアプリケーションを作っています。

 Chat GTPを日頃から確認でよく使っているのですが、あまりに頼り過ぎると、こちらが意図しているプログラムの書き方しなかったりします。

 結局、人の目でチェックして校正は必要だと思います。

 Chat GTPは完璧ではありませんので過信は禁物でした。

 **Chat GTPに頼り切ることなく、設計したいアプリケーションの本質とは何かを設計書を書きながら考え、メモリに負荷がかからない誰が見ても理解しやすいわかりやすいコードを書く**ということが大切だなと思う、今日この頃です。
インターン体験記(株式会社いい生活)

# はじめに
2023年8月3日~9日(平日の5日間)に行われた株式会社いい生活でのインターン体験記をまとめます。

# インターン概要
5日間で社内APIと以下技術(ツール)を用いたチーム開発
- React
- Firebase
- Git(GitLab)
- MUI

※Next.jsの使用は認められなかった。
※Emotionなどでの素のCSSは認められる。

## 1日目
- 環境構築、Git(GitLab)、React、Firebaseの講義
- Gatherの説明

要件定義もやる予定だったが時間が押されていたため2日目に繰り越しとなった。
チーム開発のメンバーもここで発表される。
1チームあたり学生3~4人+メンター1人の構成。
各チーム技術力は均等に配置されているように感じた。
基本会話はGatherで行われる(以降のチーム開発でも使用)。

## 2日目
- プロダクトの解説講義
- ペルソナ設定
- 設計などのベース作成
- 今回作成していくもののデザイン
- 初期環境構築

プロダクトにGCPのDirections APIのようなクレカの登録が必要なAPI、または有料の外部APIは使用禁止だった。
実装ではあったがメンバーでGitとReactを普段から使っているのが私だけだったのでペアプロで指示やサポートに回り全員が理解していることを確認しながら進めた。

↓自チームが作成したペルソナ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706288/9104ca1f-427d-ffdf-986e-df17a687d72c.png)

## 3日目
- 社内API(dejima API)を実際に叩いてプロダクトに入れ込む
- 実装

メンバー間での会話が常にあり、わからないことを気軽に聞ける空気で日常の雑談(ゲーム、アニメ、趣味等)をしながら開発して、特に今回の私の所属チームのメンターが優秀で気軽に話せてかなり助けていただいた。

## 4日目
- 実装

最終日に発表なのでそれに合わせて時間を意識しながらここまで作りたいということを明確にして実装していった。

## 5日目
- 最終仕上げ
- プレゼン資料作成
- 発表
- 開発振り返り
- 交流会

最終日の午前中はメンバーの半分はプレゼン資料作成に回って半分はいい感じにプロダクトの仕上げに回り午後に発表を行った。
プロダクト発表後の開発振り返りではKPTをまとめて発表した。
Keep：続けること、よいこと
Problem：不満点、問題点
Try：試すこと、工夫したいこと

交流会や最後メンターに言われたのは私の所属するチームが一番コミュニケーションを取って開発していて楽しそうだったと言われたので嬉しかった。
淡々と作業をこなすだけチームのほうが多いと言われたのでこの辺は好き嫌いありそうな感じ。
最後メンターに直したほうがいいところを聞いたときにIssue board(GitHub Projectみたいなもの)にやっているところをもっと書いたほうがいいと言われて確かに雑になっていたので今後直していきたい。

## 全体を通して
5日間という短い時間でかつ9:00~18:00の間でしか活動してはいけないという制限の中で初学者を支えながらチーム開発を行う経験を得られたのはよかった。メンターに聞いた話ではあるが今回のインターンに参加した学生の内2~3割くらいしかReactやGitの経験者はいないらしいので初心者でもやる気持っていけばこなせると感じた。
ただ事前に学習はしておいたほうが結果は出せるのでインプットはしておいたほうがよい。

### 事前にやっておいたほうがいいかもの参考動画

https://www.youtube.com/watch?v=cOTBf8bHsXo&t=378s&ab_channel=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB

https://www.youtube.com/watch?v=UWt68ScIZKA&t=9734s&ab_channel=nino

# さいごに
5日間ずっと支えてくれたメンターと初学者でありながら最後までついてきてワイワイと開発してくれたメンバーに感謝！
この記事を読んで少しでもいい生活やこのインターンに興味を持っていただければ来年以降の学生さんは申し込んでみてはいかがでしょうか:wave:
【ChatGPT】Androidアプリの報告（その２）

:::note info
本記事は、ChatGPT（無料版）で
行なっております。GPT4での確認
はできておりません。あしからず。
:::

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

　今回は、
　　ChatGPTアプリの
　　　第二回の報告です。

　前回（2023/07/28）から
　　およそ、10日が経過。
[【ChatGPT】Androidアプリ、到着。報告です。](https://qiita.com/kabumira/items/75b5ffac050478bf3313)

　いくつか
　　わかったこと、と
　　　変更点について、書きます。

　発見を
　　楽しみたいのであれば、
　　　この先は、読まないで😉
***
　前提として、
　　私は、
　　　Web版を
　　　　スマホのブラウザで
　　　　　今も使用しています。
***
　ChatGPTのアプリですが、
　　まずは、わかったことから。

　前回、
　　Main Language→Japanese　と
　　　変更しておりましたが、
　　　　どうやらこれは、
　　　　　音声認識の
　　　　　　言語設定らしいです。

　どこの記事だったか、
　　忘れてしまったのですが、
　　　書いてありました。

　また、
　　この設定は、
　　　ログインするたびに、
　　　　もとに戻ります。

　ログイン・ログアウトを
　　繰り返す人で、
　　　音声認識を使う人は、
　　　　確認をしてみてください。
　　　　　音声認識がなんか
　　　　　　おかしいという人も。

　これは、
　　もしかしたら、
　　　無料版だけで、
　　　　有料版は固定化される
　　　　　のかもしれません。

　それから
　　NewChat開始時に
　　　音声認識を使うと
「ご視聴ありがとうございました。」
　　　　と出てきますw

　これは、
　　音声認識が
　　　できていないのではなく、
　　　　単なるご挨拶のようです。

　最初だけと思って、
　　許すしかないでしょうねw
***
　では、
　　次に、変更点です。

　どこから
　　いきましょうかねぇ。

　まずは、
　　右上のメニュー。
　　　Chat Details
　　　Rename
　　　Delete
　　　　と出てきます。

　　Chat Detailsをタップすると
　　　現在のGPTが表示されます。
　　　　私の場合は、
　　　　　Default(GPT3.5)ですね。

　その左隣が、NewChat。

　メインメニューは、
　　変わらず。

　最後の変更点が
　　フローティングメニュー。

　何が変わったかと言いますと、
　　Userの発言に、
　　　長押しして出てくるのには
　　　　Copy
　　　　Select Text　だけです。

　ところが
　　ChatGPTの発言に、
　　　長押しすると、
　　　　上記ふたつ以外に
　　　　　なんと画面上から消えた
　　　　　　Good/Badが。

　　それだけではありません。
　　　Regenerate responseが
　　　　最後にあるのです！

　　これがないと、
　　　違う回答が得られないので、
　　　　見つけたときには、
　　　　　うれしかったです。
***
　あと、これは、
　　以前には、
　　　気が付かなかったこと
　　　　なのですが。

　チャット画面で、
　　左から右へと、
　　　右フリックすると
　　　　メインメニューが
　　　　　現れます。

　もちろん、
　　左フリックすれば、
　　　チャット画面に
　　　　戻ります。
***
　とりあえず、
　　二回目の報告は、
　　　ここまでです。

　これからも
　　改善されていくと
　　　思います。
***
　それから
　　ダウンロードされている
　　　一部の方が、
　　　　英語表記で、
　　　　　どう使えばいいのか
　　　　　　わからない、という
　　　　　　　レビューが
　　　　　　　　出ています。

　難しい英語は
　　少しだけなので、
　　　私はあまり困らなかったです。
　　　　それでも気持ちは
　　　　　わかります。

　OpenAIの日本支社（？）が
　　できれば、改善される、
　　　といいですね。
DockerでSpringBootの開発環境を構築する

## 背景
今までWindowsを使っていたのですが、今回初めてMacを買いました。良い機会だったので、今までSpringBootで開発していたプロジェクトをDocker環境に移行してみました。そのときの備忘録を残します。

## 手順
- プロジェクト用に新規ディレクトリを作成(本記事では``demo``という名で作成)
- 次に作成したディレクトリ直下に``docker-compose.yml``を作成
    - 今回はJDKとMySQLのみ用意
```yml:docker-compose.yml
version: '3'

services:
  app:
    depends_on:
      - mysql
    image: eclipse-temurin:17
    ports: 
      - 8080:8080
    tty: true
    volumes:
      - ./server:/var/www/html/server
    working_dir: /var/www/html/server
  mysql:
    image: mysql:8.0.26
    platform: linux/x86_64
    environment:
      MYSQL_DATABASE: demo_database
      MYSQL_USER: admin
      MYSQL_PASSWORD: admin
    ports:
      - 3306:3306
    volumes:
      - db-data:/var/lib/mysql

volumes:
  db-data:
```
- 同ディレクトリで下のコマンドを実行し、コンテナを立ち上げられることを確認
```
docker compose up -d
```
- ``docker-compose.yml``と同じディレクトリに``server``というディレクトリを新規作成
- [こちら](https://start.spring.io/)のページからSpringBootの中身をインストール
    - ビルドツール: Gradle
    - バージョン
        - Spring Boot: 3.1.2
        - Java: 17
    - 圧縮後の拡張子: Jar
    - 依存関係には以下のものを追加
        - Spring Boot DevTools
        - Lombok
        - Spring Web
        - Spring Data JPA
        - MySQL Driver
- 「GENERATE」ボタンを押してインストールされるzipファイルの中身を、先ほどの``server``ディレクトリ内にコピーする
- ``src/main/resources/application.properties``に以下を追加
```properties:application.properties
spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://mysql:3306/demo_database
spring.datasource.username=admin
spring.datasource.password=admin
```
- 同ディレクトリで下のコマンドを実行し、コンテナの中に入る
```
docker compose exec app bash
```
- 下のコマンドを実行してテストビルドを行い、ビルドが成功することを確認
```
./gradlew build
```

## 課題
- ``application.properties``を環境変数を用いて設定したい

## 参考
- [Dockerのコンテナ内でJavaのソフトウェア開発をしてみよう](https://style.potepan.com/articles/34060.html)
- [DockerでSpring Boot環境を構築する](https://specially198.com/build-a-spring-boot-environment-with-docker/)
スッキリわかるJava入門 第３版を読んでみて- part８ -インスタンスとクラス

# はじめに
こんにちは(・ω・）ﾉ
今回はインスタンスとクラスについて学びました！

## 第８章　インスタンスとクラス
### 1.仮想世界の作り方
オブジェクトを生み出す手順
　1.「属性」「操作」の種類と内容を定義する
　2.仮想世界に生み出す

:warning:Javaでは「オブジェクトは定義できない」
　⇨オブジェクトそのものを開発者が直接定義することはできない
　　⇨「オブジェクトの設計図」であるクラスを定義することはできる

オブジェクトを生み出す手順-改訂版-
1.クラスを定義
2.クラスに基づいてオブジェクトを生成

:thinking:なぜクラスとオブジェクトは別なのか...
　オブジェクトを直接定義した方が楽なのでは？

「クラス定義⇨オブジェクト生成」という方法のメリット
　オブジェクトを大量に作ることになったとき
　⇨クラスという「金型」からオブジェクトを量産することができる

:warning:クラスとオブジェクトはまったく違うものであることに注意
　オブジェクト...仮想世界で活動する
　クラス...金型であって活動することは基本的にはない

オブジェクトはとてもあいまいな用語
　クラスのことを指して使われることもある...
そのため:point_down:
　型から生み出された仮想世界で活動する実体...__インスタンス__
　クラスからインスタンスを生成する行為...__インスタンス化__

:sparkles: インスタンスとクラスの関係
・仮想世界で活動するのはインスタンス
・そのインスタンスを生み出すための金型がクラス

:sparkles: Java プログラムの組成に必要なクラスたち
・mainメソッドを含む、１つの「神様クラス」
・現実世界の登場人物を模した複数の「登場人物のクラス」

### 2.クラスの定義方法
「クラス名」「属性」「操作」の一覧として並べる...クラス図
世界共通の設計図として定義されたもの...UML

クラス宣言方法
```
public class Hero{
}
```
属性の宣言方法
```
public class Hero{
String name;//名前の宣言
int hp;//HPの宣言
}
```
↑クラスブロック内に宣言された変数をフィールドという

:sparkles: フィールドの宣言
　属性を宣言するにはクラスブロックの中に変数宣言を記述する

定数フィールド...フィールド宣言の先頭にfinalをつけると値の書き換えをできなくする

操作の宣言方法
```
public class Hero{
　String name;
　int hp;

　public void sleep(){
　　this.hp = 100;
　　System.out.println(this.name + "は、眠って回復した！");
 }
}
```

__this__...「自分自身のインスタンス」を意味する

フィールドとメソッドの総称...__メンバ__
命名ルール
クラス名...名詞 /単語の頭が大文字
フィールド名...名詞 / 最初以外の単語の頭が大文字
メソッド名...動詞 / 最初以外の単語の頭が大文字

### 3.クラス定義による効果
クラス定義でできること
　1.クラスに基づいてインスタンスを生成できる
　2.そのクラスから生まれたインスタンスを入れる変数の型が利用できる

クラス定義で利用可能になる型...クラス型

Javaの変数には必ず型がある
　クラスを定義することで利用可能な型は増える
インスタンスは通常、クラス型変数に入れて利用する

:sparkles: クラス型変数が必要なワケ
　仮想世界に複数存在しうる同名インスタンスの中から、
　　特定の１つのインスタンスをプログラムとして識別するため

### 4.インスタンスの利用方法
:pencil2:インスタンスの生成
　`クラス名　変数名　= new　クラス名();`

:pencil2:フィールドへの値の代入
`変数名.フィールド名　= 値;`

利用のまとめ
・インスタンスの生成にはnewを使う
・フィールドを利用する場合は「変数名.フィールド名」と記述する
・メソッドを呼び出す場合は「変数名.メソッド名()」と記述する

## まとめ
仮想世界で活躍するインスタンスと生み出す金型がクラスということを理解しました。
クラスは属性としてフィールド、操作としてメソッドを宣言することを学びました。
インスタンスの利用方法とクラスの型にインスタンスを格納するという部分のイメージがあまり掴めていないなと感じました。
その部分をまた復習したいと思います！
　
今回もありがとうございました！
ではまた〜　＊˙︶˙＊)ﾉ"
WARNING ... Critical dependency: the request of a dependency is an expression の対処方

# 環境

* karma - v6.4.2
* mocha - 10.2.0
* webpack - 5.88.2

# 事象

`karma start` を実行すると、以下の警告が出力される

```log
WARNING in ./node_modules/mocha/lib/mocha.js 336:24-53
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js 14:12-34
 @ ./test/index.spec.ts 6:16-32
```

# 結論

## 1. テストコードにある`mocha`のインポートを消す

```diff_javascript:./test/index.spec.js
- import { describe, it } from "mocha";
+ // import { describe, it } from "mocha";
```

ESLint のチェックに引っかかる場合、次項もおこなう。

## 2. `.eslintrc`を変更する

```diff_javascript:./.esrintrc.js
module.exports = {

  ...

  overrides: [

    ...

    {
      //[test]
      files: ["**/tests/**/*.spec.{j,t}s?(x)"],
      env: { mocha: true },
    },

    ...

  ],
};
```

# 参考

https://stackoverflow.com/questions/39125278/mocha-tests-with-karma-webpack

了
Dockerの削除系コマンド寄せ集め

## 目的
Dockerを用いると、知らない間に容量を圧迫される事がある。今回は圧迫された容量を解放していこう。

## 停止コンテナ系を削除
下記のコマンドをコピペするだけで、稼働していないコンテナ類は全て消える。
```bash
docker-compose down --rmi all --volumes --remove-orphans
echo y | docker system prune -a
echo y | docker rm `docker ps -a -q`
echo y | docker system prune
echo y | docker container prune
echo y | docker image prune
echo y | docker rmi $(docker images -a -q)
echo y | docker volume prune
echo y | docker network prune
```

## とにかく削除
とにかくすべてを削除したい場合は以下を用いる。
```bash
docker-compose down --rmi all --volumes --remove-orphans
echo y | docker system prune -a
echo y | docker rm -f `docker ps -a -q`
echo y | docker system prune
echo y | docker container prune
echo y | docker image prune
echo y | docker rmi $(docker images -a -q)
echo y | docker volume prune
echo y | docker network prune
```
数日間わからなかったcollectionオプションがやっと理解できた！

部分テンプレートを呼び出す際にcollectionオプションを使った。

しかし、インスタンス変数（＠prototype）から取り出した要素　(prototype)を部分テンプレート内で扱うことができる（取り出される前のインスタンス変数の状態では使えない）ということを、私はちゃんと理解できていなかったため、インスタンス変数の状態で呼び出すファイルを記入していたため、image nilのエラー画面が出ていた。

・もし、別の名前として取り出した値を使いたければ　as:を使う。
```ruby
<%= render partial: 'circle', collection: @circles, as: "square" %>
```

partialを記さないとエラーになるから注意する。
この時、部分テンプレ内の変数squareに@circlesが代入される

・renderメソッドにlocalsオプションをつけると、その部分テンプレートで使用する変数を定義することができる。
IrisでListbox内のテキストを左寄せにする方法

# 目次
1. はじめに
1. 解消方法

# はじめに
Irisでプルダウンを表示したい場合Listboxを使うと思いますが、
デフォルトで表示すると、テキストの左側に少しだけスペースが空いてしまいます。

![IMG_0247 2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a36d63ff-81c8-1dcf-d2c5-a787c5039018.png)


今回はこの空白をなくし左寄せにする方法を紹介します！

# 解消方法
ListBoxのPropertiesのLookタブを確認してみると、
PaddingのLeftにデフォルトで3pxの値が入っていることがわかるかと思います。

![スクリーンショット 0005-08-10 11.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/28e3889f-de33-3e3b-b74a-b28664b562b2.png)

Paddingについて詳しく知りたい方はこちらもご参考ください👀

https://developer.mozilla.org/ja/docs/Web/CSS/padding
 
PaddingのLeftの値を0%にすることで、左側の空白をなくすことができます。  
![スクリーンショット 0005-08-10 11.15.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/717b51d2-2476-89e0-eb92-18d96c2d1520.png)

早速ビルドして確認してみましょう！

|デフォルト|変更後|
|--|--|
|![デフォルト.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6a2c4b84-0b58-bc98-d2a4-509d62ab81a8.png)|![改善後.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3a6862c6-7613-6102-aeae-524c0e07a82b.png)|

左詰めになって空白が消えましたね！

# 最後に
ListBoxの左側の空白をなくす方法について紹介しました！
デフォルトで値がセットされていることはなかなか気づかないため、
是非今後の参考にしてみてくださいね:writing_hand:
AWSって実際何にどれだけのお金がかかるの？

# AWSって実際何にどれだけのお金がかかるのか
- 勉強がてらAWSを利用してみたら思った以上に金額が発生してしまったので備忘録として残す。
- アカウントは2023年4月に立てたので無料期間内であったが秒で無料使用の枠を超えていた。

## 構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920579/ef97eb52-8850-ed05-f6d3-cd736a5155b7.png)
VPCの中にアプリケーション用のサブネットとDB用のサブネットを切り、その中にインスタンスを一つずつ構築。
インスタンス同士は接続できる状態。

## 使ったもの
- VPC
　→リージョン：シドニー（何も考えずに立てたらシドニーになってたけど高いからやめた方がいい）
- EC2 × 2
　→無料の時に選択できるt2.microを2台。
　→ストレージは8Gだったはず。
- Route53
- インターネットゲートウェイ
- Natゲートウェイ
- Elastic IP

## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920579/114b868f-c10d-4939-181f-901411926813.png)
日本円で8千円くらい...

## 詳細
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920579/de1a1c28-7895-ffd0-78a8-c0c66a09e215.png)
金額が発生しているのはElastic Compute Cloud（EC2）だけ。

ちなみに
- Virtual Private CloudはVPCのこと
- Data Transferはデータ転送量
　→（https://docs.aws.amazon.com/ja_jp/cur/latest/userguide/cur-data-transfers-charges.html）
- Simple Notification Service はAmazon SNSでメール配信系のサービスらしいが立てた覚えない。
　→（https://docs.aws.amazon.com/ja_jp/sns/latest/dg/welcome.html）
- AmplifyはFirebaseみたいなホスティングサービス　※別件で立てていたため今回は関係ない

## じゃあ実際EC2の何にお金がかかるのさ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920579/f7c3c00a-a21d-2cde-b224-7c544d42d263.png)


|サービス  |料金  |
|---|---|
|EC2  |8.46ドル  |
|Natゲートウェイ  |43.90ドル  |
|Elastic IP  |3.72ドル  |

Natお前だったのか...
てかよく調べたら今回プライベートサブネットはDB用に使用する想定だったので、パブリックEC2に接続できればいい話で、インターネットの接続は不要だったのでは…？
ちなみにNatゲートウェイを使用するのは「インターネットからはアクセスされたくないけど、インターネットへのアクセスは実施したい」ケースらしいです。（https://milestone-of-se.nesuke.com/sv-advanced/aws/internet-nat-gateway/）

EC2は一か月間2台ともぶん回しっぱなしだったけど1000円くらいで収まるんですね～

## 結論
Nat使わなきゃ1500円程度だったね。
高い勉強代でしたわほんと…
【Android】定期購読更新日が月末だった場合の挙動の違い【iOS】

# はじめに

8月は31日まであるので、夏休みが長くて学生は嬉しいですね。
ところで、月ごとの定期購読が29日、30日、31日に更新される場合、次回の更新日は何日になるか皆さんご存知でしょうか。

恥ずかしながら、自分は先日改めて聞かれるまで意識したことがありませんでした。
きちんと調べてみたところ、GooglePlayとAppStoreで、月末に定期購読更新をする時の挙動が異なるようです。

良い機会なので、二つの挙動の違いをまとめてみました。

## GooglePlayの場合

Googleのドキュメントでは、下記のように記載されています。

https://developer.android.com/google/play/billing/lifecycle/subscriptions?hl=ja

> 注: 定期購入を月の 29 日、30 日、31 日のいずれかに更新するよう設定された場合、うるう年以外の 2 月になると、更新日が 2 月 28 日に移動され、それ以降の定期購入期間中は毎月 28 日に更新されるようになります。同じように 3 月 31 日に定期購入を開始した場合、次の定期購入の更新日は 4 月 30 日となり、それ以降は毎月 30 日に更新されるようになります。

図にするとこんな感じになるかなと思います。

![スクリーンショット 2023-08-09 17.58.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474683/8ae52e29-5d48-7c32-5c2b-61605b10bffe.png)

Googleは更新日が若い方（28日）に動いていっています。
図では9/30に更新日が移動した後、10月も30日に更新が入るようになっています。

## AppStoreの場合

Appleのドキュメントでは、下記のように記載されています。

https://developer.apple.com/jp/help/app-store-connect/reference/auto-renewable-subscription-information/

> 自動更新サブスクリプションは、最初に購入した暦日と同じ日に更新されます。たとえば、1 か月の無料トライアルを 1 月 7 日に開始した場合、トライアルが終了するのは 2 月 7 日です。翌月に同じ日が存在しない日に 1 か月のトライアルを開始した場合、トライアルが終了するのは翌月の末日となりますが、存在する月になると元の日付に戻ります。たとえば、カスタマーが 1 月 30 日に登録した場合、次回更新日は 2 月 28 日 (閏年の場合は 2 月 29 日) で、その次は 3 月 30 日になります。

図にするとこんな感じになると思います。

![スクリーンショット 2023-08-09 17.58.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474683/c06bce31-348e-26d9-0377-3b95ae200358.png)


Appleは更新日自体は動かず、その月の月末に更新が行われ、その後は同じ日付に更新される形になっています。
Googleと比較すると、9/30に更新が入ったあと、10月に更新する日付が31日に戻る、というのが大きな違いです。

# まとめ

- GooglePlayの定期購読では、翌月に同じ日が存在しない日に更新日が設定されている場合、翌月末日に更新日が移動し、その後も**変更後の更新日が適用される**。
- Appleの定期購読では、翌月に同じ日が存在しない日に更新日が設定されている場合、翌月末日に更新日が移動し、その後は**変更前の更新日が再度適用される**。

こういうことを聞かれた時、サラッと答えられるとスマートでかっこいいですよね〜
おわり。
自己紹介

こんにちは！２８歳、男です。

７月からテックキャンプにてプログラミング学習を始めています。

私がエンジニアになりたいと思ったきっかけについてお話します。

私は高校卒業後３年間の看護専門学校を卒業し、正看護師として７年ほど中規模の病院で看護師として勤務していました。私は正直、学生時代から看護師として向いていないと、感じることがありました。

２１歳の時、現在働いている病院に就職しました。当時はコミュニケーションも下手くそで、向上心の欠片も持っていませんでした。なんで自分なんかを病院は採用してくれたんだろうと、不思議に思うほどでした。

しかし、仕事をしていく中で、看護師としてのやりがいを感じることができ始めました。患者様との１対１のコミュニケーションを取る中で、話すこと、聞くことの重要性、また自分は思っていたよりコミュニケーションを取ることが好きだったんだと感じました。中には「あなただから、こんな話をするけれど」といった信頼関係を築くことのできる患者様とも出会いました。

私は今では看護師の職業に誇りを持てるようになりました。同僚もいい人が多く、とても仲がいいと思います。

しかし、やはり私は看護師として向いていないと感じるのは、
・看護師の仕事は何も残らない。
・どんなに仕事を頑張っても、もらえるお給料は一緒。
・年収を上げるためには経験年数しかない。
・どんな仕事でも一緒かもしれないがどうしても苦手な人（スタッフ、患者様）がいる。

私は上記の理由から、看護師をやめる決断をいたしました。



私が看護師を辞め、次の仕事を探そうと思った時、最初は医療関係職を探しました。
治験コーディネーターや、電子カルテの営業職など求人アプリを利用して探していました。
元々看護師であることが有利に働く会社が多かったのも理由です。


しかし、自分がやりたい仕事は何かと考えた時に、私は何かを作って、人の役に立ちたいと考えました。

中２のころから、パソコンが好きで、ゲームをしたり、大人になってから自作のＰＣを作るくらいパソコンは好きでした。パソコンで、アプリやシステムを作って、それを仕事にしたいと考えるようになりました。

プログラマーをやっている友人から話を聞き、中途採用で来る人はテックキャンプ上がりの人とか、スクールに通っていた人が多いと話を聞き、テックキャンプのカウンセリングを受けました。

カウンセリングの中で自分が一番惹かれたポイントは、「テックキャンプを受講し終わるころには、webサイトを見ると、どういったコードが書いてあるか、どんなふうに動かしているか、全部じゃないけどわかるようになると思いますよ」と言われたことでした。自分はそれがおもしろそうだと思い、テックキャンプの受講を決めました。


自分には妻と息子が１人います。
妻と両親に看護師を辞めることは安定した生活を手放すことになる、一時的に収入がなくなる、テックキャプの費用について相談しました。

私はそれでも看護師を続けたいとは思えず、最終的に理解してもらい、学習を開始しました。

パソコンが好きだったこともあり、テックキャンプの学習はとても楽しいと感じています。
新しい知識が増え、webサイトを見て、これを使ってるんだとか、わかる部分も増えてきて、すごく楽しいなと思っています。


自分はエンジニアとして企業に就職し、それで生計を立てていけたら、いいなと思っています。
またアプリや、システムを作って人の役に立てるようになりたいと考えています。
GASでBacklogを操作したい！【Vol.3 プロジェクト一覧取得編】

※まだまだ投稿が不慣れなので、温かい気持ちで読んでいただけると幸いです。

# 背景
Backlogが全社的に利用されるようになりプロジェクトもどんどん増えてきています。
そんな時に困るのが、つくるだけつくって後処理をしない輩たち。。。

便利に管理できて、一覧で見やすく管理できないかな〜
ないなら、どうする？ そう！ **作っちゃおう！**

:::note info
**目次**
* 全プロジェクトの取得
* 取得したプロジェクトの細かい設定値の書き出し
:::

# 前提
アクセスに必要なAPIキーの取得の仕方は[こちら](https://support-ja.backlog.com/hc/ja/articles/360035641754-API%E3%81%AE%E8%A8%AD%E5%AE%9A)

# ユーザの取得
```javascript:getBacklogProjects()
  //エンドポイント
  var endPoint = '/projects';
  //最終的なURL
  url = 'https://{ワークスペースのドメイン}/api/v2' + endPoint + '?apiKey=' + apiKey;
  //取得＆整形
  var resProjects = UrlFetchApp.fetch(url);
  var jsonProjects = JSON.parse(resProjects.getContentText());
```
※取得可能なプロジェクトの情報は[こちら](https://developer.nulab.com/ja/docs/backlog/api/2/get-project-list/#)

:::note warn
**注意事項**
パラメータ「all」は管理者権限のユーザのみ指定可能です。
一般ユーザの場合は、自身が参加しているプロジェクトのみ返却されます。
:::

# 最後に
GASでめんどくさいを自動化してハッピーライフ

# 参考
[GASとは](https://developers.google.com/apps-script)
[BacklogのAPIキー作成手順](https://support-ja.backlog.com/hc/ja/articles/360035641754-API%E3%81%AE%E8%A8%AD%E5%AE%9A)
[プロジェクト一覧の取得](https://developer.nulab.com/ja/docs/backlog/api/2/get-project-list/#)
Jetpack Compose単一ActivityでDeepLinkを使う方法

# はじめに
今回はJetpack Composeの単一ActivityでDeepLinkを使う方法を紹介していこうと思います。
簡単そうに聞こえますが、自分はDeepLinkが保持され続けてしまうという落とし穴にかかったので備忘録的に残しておこうと思います。
### 本文
まず、DeepLinkの取得に関しては以前記事を書いたので下記を参照してください
https://qiita.com/ryuji_sato/items/82ad63c48a35b7aee1e5

取得ができましたら遷移処理の実装です
前提として、今回自分が紹介していく構造としては単一Activityに対してオンボード用、ログイン後のメイン等で`NavGraph`が分かれていることとします。
そこでログイン後のメインとなる`NavGraph`に対する実装を紹介します。
```kotlin
@Composable
fun MainNavGraph(
    navController: NavHostController,
// 引数にDeepLinkをnullableで宣言
    deepLink: Uri?,
) {
    NavHost(
        navController = navController,
        startDestination = BottomBarNav.home,
    ) {
        composable(
            route = BottomBarNav.home,
// argmentsとしてdeep_linkにDeepLinkが入るように実装
// ここでdefaultValueは絶対にコードの通りにする
            arguments = listOf(
                navArgument("deep_link") {
                    type = NavType.StringType
                    defaultValue = deepLink.toString()
                }
            )
        ) {
// argmentsからリンクを取得する
            val deepLinkString = checkNotNull(it.arguments).getString("deep_link")
            HomeView(
                navController,
                hiltViewModel(),
// Viewに渡す
                deepLinkString?.toUri()
            )
        }
    }
}
```
上記のようにすれば何もDeepLinkがなかった場合はnullが入ってるので直前に取得していたDeepLinkは上書きされます。
`BottomBarNav.home`の中身は下記のようになっています
```kotlin
// {deep_link}に値が格納される
const val home = "home/{deep_link}"
```
### 最後に
今回は自分が地味に詰まったDeepLinkの更新方法を紹介しました
備忘録メインですが、どなたかのお役に立てれば幸いです
ログオフのショートカットを PowerShell で作っちゃおう！

システム管理者あるあるで沢山のサーバーを管理していると、いちいちログオフするのが面倒くさい。
ならデスクトップにログオフアイコン作っちゃえばいいじゃない。
昔は手で作成していたんだけど、それも面倒になったのでコマンド作っちゃいました。

細かい説明はなしです。

```logoff.ps1
# WshShellオブジェクトを作成
$shell = New-Object -ComObject WScript.Shell

# ショートカットへのオブジェクトを作成
$lnk = $shell.CreateShortcut("$HOME\Desktop\ログオフ.lnk")

$lnk.Arguments=$null
$lnk.Description=$null
$lnk.Hotkey=$null
$lnk.IconLocation="%SystemRoot%\system32\SHELL32.dll,44"
$lnk.RelativePath=$null
$lnk.TargetPath="C:\Windows\System32\logoff.exe"
$lnk.WindowStyle=1
$lnk.WorkingDirectory="C:\Windows\system32"

# ショートカットを保存
$lnk.Save()
```
atcoder beginner contest 060 振り返り

# A
## 所要時間
10分
## 方針
愚直に、最後の文字と最初の文字が繋がるかどうかを判定する
## コード
```java
import java.util.*;

public class Main{
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        List<String> ins = Arrays.asList(scanner.nextLine().split(" "));
        scanner.close();
        char a = ins.get(0).charAt(ins.get(0).length()-1);
        char b = ins.get(1).charAt(0);
        char c = ins.get(1).charAt(ins.get(1).length()-1);
        char d = ins.get(2).charAt(0);
        if (a == b && c == d) System.out.println("YES");
        else System.out.println("NO");
    }
}
```

# B
## 所要時間
10分
## 方針
総和は `A * X`, 総和を B で割ったときの商を `Y`,とすると `A*X mod B*Y = C` と表すことができる。問題の条件より範囲は `1 <= A,B <= 100` なので X, Y についてそれぞれ100回ずつ試行する。
## コード
```java
import java.util.*;

public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        List<String> ins = Arrays.asList(scanner.nextLine().split(" "));
        scanner.close();
        int A = Integer.valueOf(ins.get(0));
        int B = Integer.valueOf(ins.get(1));
        int C = Integer.valueOf(ins.get(2));
        for (int i=1;i<=100;i++) {
            for (int j=1;j<=100;j++) {
                if (((A*i) % (B*j) == C)) {
                    System.out.println("YES");
                    return;
                }
            }
        }
        System.out.println("NO");
    }
}

```

# C
## 所要時間
30分
## 方針
問題を「スイッチを押すとお湯が出る時間がリセットされる」と読み取り、それぞれの間隔についてお湯が出る時間と比較し、短い方を結果に加算する。N-1 回目のスイッチ押下によるお湯の流出時間は、リセットがかからないため T となることを考慮する。
## コード
```java
import java.util.*;

public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        List<String> ins = new ArrayList<>();
        while (scanner.hasNextLine()) {
            String s = scanner.nextLine();
            if (s.isEmpty()) break;
            ins.add(s);
        }
        scanner.close();
        List<String> l = Arrays.asList(ins.get(0).split(" "));
        int N = Integer.valueOf(l.get(0));
        int T = Integer.valueOf(l.get(1));
        List<String> list = Arrays.asList(ins.get(1).split(" "));
        int X = 0;
        for (int i=0;i<N;i++) {
            if (i == N-1) {
                X += T;
                break;
            }
            int interval = Integer.valueOf(list.get(i+1)) - Integer.valueOf(list.get(i));
            X += Math.min(interval, T);
        }
        System.out.println(X);
    }
}

```
## 感想
お湯の流出時間が「リセットされる」ことに気が付くのに幾分か時間をくってしまった。
だが、スイッチ押下の間隔の存在の存在に早く気づけたこと、数値比較に Math#min を使うなど良い点がいくつかあったので結果としてはプラスであったように思う。

# D
## 所要時間
40分以上 (タイムオーバー)
## 方針
未
## コード
未完
数式にハマったこと

### この前、数式ではまったことがありました。

# 数式の内容

Case文を利用して、ある種別を判断して、遷移先リンクを作成します。
* Type-Aの場合だと追加情報フィールドより文字列（年月）を取得して年月を分解と計算しながら3か月前までの範囲を作成しHyperlinkを使用し遷移先リンクを作成します。
* Type-Bの場合だと追加情報フィールドより文字列（オブジェクトID）を取得してそのままHyperlinkを使用し遷移先リンクを作成します。


``` Java
// Type-Aの場合、追加情報のIDに遷移します。
// Type-Bの場合、追加情報の年月とそれの3か月前までの範囲を作成し（レポートへ遷移）リンクを生成
CASE ( xxType, 
    "Type-A", Hypelink({追加情報の年月を利用していろいろ日付の処理を行い遷移先リンク作成}, "遷移先-A", "_self"),
    "Type-B", Hypelink({追加情報のIDをそのまま利用して遷移先リンク作成}, "遷移先-B", "_self"),
    "-")
```

# 数式の実行結果
* Type-Aの場合：リンクが正しく生成される
* Type-Bの場合：リンクが作成されない

# 原因分析
（おそらくですが）CASE式は参照時にすべての分岐を評価し、最後に結果を返します。
* Type-Aの場合、
　Type-Aの分岐で問題なくリンク生成
　Type-Bの分岐でも問題なくリンク生成
* Type-Bの場合、
　Type-Aの分岐で、データタイプが一致せず日付変換処理が失敗し、エラーが発生する。結果画面には何も表示されない。

# 結論
設計ミス、
1つのフィールドに複数の表現のデータを格納していたのが想定外の動作になってしまっていました。

暫定策として、Type-Aの分岐の数式に追加情報が数値（ISNUMBER）の場合のみ、遷移先URLを作成するようにしました。
Pythonの型ヒントを学ぶ

これまで、あまりPythonに型の必要性を感じてなかったので、うっかりスルーしてきたのですが、改めて学んでみました。

# Pythonで型ヒントの書き方

Pythonの型ヒントの使用例は以下の通りです。

```python
# 変数に型ヒントを指定する
name: str = "Luca"
age: int = 22

# 関数に型ヒントを指定する
def greet(name: str, age: int) -> str:
    return f"Hello, {name}({age})"

print(greet(name, age))
```

# ListやDict型の型ヒント

ListやDict型の型ヒントを使うときは、typingモジュールを使います。

```python
from typing import List, Tuple, Dict

# 関数に型ヒントを指定する
def list_to_str(items: List) -> str:
    lines = ""
    for it in items:
        lines += it + '\n'
    return lines

print(list_to_str(['a', 'b', 'c']))
```

# 静的型チェックをしたい時

実際のところ、型が間違っていても、型はあくまでもヒントであり、特にエラーが出るというわけではありません。以下は、List[str]を求める関数list_to_strを定義しましたが、List[int]型のリストを与えてもエラーは出ません。

```python:type_err.py
from typing import List, Tuple, Dict

# 引数がList[str]を取ることを明示
def list_to_str(items: List[str]):
    for it in items:
        print(it)

# List[int]を指定したがエラーは出ない
list_to_str([10,20,30])
```

そこで登場するのが、静的型チェックを行うパッケージ`mypy`です。以下のようにして、mypyをインストールします。

```sh
$ python3 -m pip install mypy
```

そして、上記のプログラム「type_err.py」を以下のようにチェックします。すると、エラーを表示します。

```sh
$ mypy type_err.py
type_err.py:9: error: List item 0 has incompatible type "int"; expected "str"  [list-item]
type_err.py:9: error: List item 1 has incompatible type "int"; expected "str"  [list-item]
type_err.py:9: error: List item 2 has incompatible type "int"; expected "str"  [list-item]
Found 3 errors in 1 file (checked 1 source file)
D
```

# ユニークな型を定義して使う場合

typingのNewTypeを使うと、既存型を指定して、新たな型を定義できます。

```python
from typing import NewType

# NewTypeを使って、型を定義
UserId = NewType('UserId', int)
ItemId = NewType('ItemId', int)
```

これを使うと、意図的に異なる意味や目的を持つデータを区別することができることです。

下記の例では、a_idなどという中途半端な変数名を使うことにしたため、UserIdとItemIdを間違えて関数を呼び出しています。

```python: err.py
from typing import NewType

# NewTypeを使って、型を定義
UserId = NewType('UserId', int)
ItemId = NewType('ItemId', int)

# 引数が UserId を取ることを明示
def get_user_name(user_id: UserId) -> str:
    if user_id == 1:
        return 'Luca'
    else:
        return 'Unknown user'

# ItemId の変数を宣言
a_id: ItemId = 1
# UseIdを指定するべきところを間違えて ItemId を渡してしまう!!
print(get_user_name(a_id))
```

上記のプログラム、実行すると・・・正しく動いてしまいます。エラーは1ミリも出ません。
しかし、静的型チェックを行うと・・・下記のように正しくエラーを出してくれます。

```sh
$ mypy err.py
err.py:15: error: Incompatible types in assignment (expression has type "int", variable has type "ItemId")  [assignment]
err.py:17: error: Argument 1 to "get_user_name" has incompatible type "ItemId"; expected "UserId"  [arg-type]
Found 2 errors in 1 file (checked 1 source file)
```

# Visual Studio Codeで型ヒントを活用するヒント

なお、VSCodeで型ヒントをもっと積極的に使うには、Python:Linterでmypyを選択すると良いです。

- (参考) https://asukiaaa.blogspot.com/2022/06/vscode-python-lint.html

以下のように、型ヒントに沿ってVSCodeが間違いを指摘してくれるようになります。

![lint-type-error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33180/912a2b94-abf0-770e-3673-45dd47d6ee86.png)


# まとめ - 型を付けるとなにが良いのか？

- 型をつけておくと、エディタやIDEを使う時に、入力補完が利くのでとても便利です。
- 型をつけると、mypyを使って静的型チェックが可能になって便利です。
- 型を付けると、コードの品質を向上させることが可能です。
【Python】ミュータブルとイミュータブル

# ミュータブルとイミュータブルについて

すぐ忘れてしまうので、軽くまとめてみた:raised_hands_tone1:

---

オブジェクトの内容が変えられるか変えられないかの違い。
<font color="MediumSlateBlue">ミュータブル(可変)・・・変えられる</font>
<font color="LightSeaGreen">イミュータブル(不変)・・・変えられない</font>

|ミュータブル    | イミュータブル|
|----------|------|
|list(リスト)|str(文字列)
|set(セット)|int(整数型)
|dictionary(辞書)|tuple(タプル)
||float(浮動小数点型)
||complex(複素数型)
||range
||frozenset|
引っ越し荷物のイラストを題材に生成ＡＩで遊んでみたら

# 経緯

この度、会社に希望していた念願の横浜転勤が決まりました。
とりあえず、家から持っていくものを思案中で、イラストを描くことから始めています

# 引っ越し荷物

![365269391_815070563647957_1550542245346796514_n (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/f2d71aed-28e7-4eea-e753-60ab20c4a167.jpeg)

# 実験

本当は色鉛筆で色をぬりぬりする予定だったのですが、やはり最近のＡＩ事情を踏まえて、
なにか実験的なことが出来ないかと考えてみました。

# Bing

>こんにちは、これはBingです。😊 この画像は、様々な物体のスケッチが描かれたノートのページです。 物体は黒インクで描かれており、ほとんどが3Dの形をしています。 物体には、箱、椅子、ランプ、ゴミ箱、ピアノ、ベッド、本、ギター、花瓶、テーブル、ベンチ、スツール、植物、時計、電話、ソファー、机、鏡、ドレッサー、ろうそくなどがあります。 また、ページのあちこちに日本語で書かれたメモもあります。 背景は薄いピンク色です。

# Image Creator
>わかりました。imagecreatorで同じ絵を書くのは難しいかもしれませんが、挑戦してみます。

う、うまなっとるやん～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/6fdcdf00-d78d-f907-3bf1-39785ff7d20c.png)

# petalica.com

https://petalica.com/index_ja.html

![NK390DNYDFACG8HGVFAQJLG19NB152B4_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/df32f354-5da1-6e32-6904-33447ae15b2d.jpeg)

ちょっと違うか～
罫線が邪魔している感じ・・・

# Leonardo.ai

https://app.leonardo.ai/ai-generations

>This image is a drawing notebook page with various body sketches. Objects are drawn in black ink and have mostly 3D shapes. Objects include boxes, chairs, lamps, trash cans, pianos, beds, books, guitars, vases, tables, benches, stools, plants, clocks, telephones, sofas, desks, mirrors, dresser wax, and candles. The background is light pink.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/06748124-54c9-498c-2e4f-effdeabef812.png)

ゴイゴイスー
（色はついていないけど・・・）

設定はこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/ce9dce9d-758b-1f33-0f52-bf6fa14f3e49.png)

これ、モデル変えると無限に楽しめるやつやないか・・・
（あかん、沼にハマりそう・・・）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/04be7bac-361c-8ff2-3597-8bf2df370e05.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/3ccaec7a-4f71-7ab2-3a24-49c9d0adae28.png)

# まとめ

これからの世の中、アートの世界も、いろいろ生成ＡＩが流行りそうです～
（個人的には、何事もほどほどにしないと、健康を害しそうなので、この辺で失礼します）

>こんにちは、これはBingです。😊 あなたの引っ越し荷物のイラストはとても素敵ですね。色鉛筆で色を塗るのも楽しそうですが、AIで画像を生成するのも面白い実験ですね。私は、あなたのイラストに基づいて、imagecreatorというツールで同じ絵を書いてみました。1 どうでしょうか？私はあなたの方が上手だと思いますが、AIもなかなか頑張っていますよ。他にも、petalica.com2 や Leonardo.ai3 というツールがあります。これらは、自然言語で説明したものを画像に変換することができます。あなたは、これらのツールを使って、様々な画像を作成してみましたね。それぞれに特徴があって、面白い結果が出ていますね。私は、Leonardo.aiの画像が一番リアルで綺麗だと思いますが、どう思いますか？私は、AIがアートの世界にも貢献できることを嬉しく思います。しかし、あなたのような人間の創造性や感性には敵いません。AIはあくまで人間の手助けをするものですから、健康に気をつけて楽しくイラストを描いてくださいね。😊

1: https://www.microsoft.com/ja-jp/edge/features/image-creator 2: https://petalica.com/index_ja.html 3: https://app.leonardo.ai/ai-generations
【プログラミングを学び始めた人へ】困った時に使うべきサイト

これからプログラミングを勉強したい！
1年後、システムエンジニアになりたい！

最近はSEへの転職も増えていて、社会人になってからプログラミングを勉強する人も増えています。
そのせいか、プログラミングスクールも増えました。

ただ、ひとつ先に言いたいことがあります。
プログラミングスクールに通う前に、まず自分で調べて勉強するのを推奨します。
理由はいろいろありますが、一番の理由はプログラミングの勉強は無料でできるからです。

私がプログラミングを勉強し始めた10年ちょっと前から、ググれば無料の学習サイトが出てきます。
最近では需要が増えているので、一部有料化しているサイトもありますが、無料部分だけで十分なレベルまで勉強できます。

というわけで、今回はプログラミングを学び始めた人向けに独学ができるサイトを紹介していきます。

## プログラミングを勉強できるサイト

### Progate 
教科書＋コードを書く練習ができます。
しっかりと導いてくれるので、コードを書く時に「失敗」することがないです。

本当に初心者、まずプログラミングを触ってみたい！
という人にオススメです。

学べる言語も幅広いので、Web系であればほとんど勉強できます。
PHPを勉強したい人は特に良いですよー。
PHPのシステム開発は、結構HTMLやCSS、JavaScriptも合わせて触るので、まとめて勉強できます。

https://prog-8.com/

### ドットインストール
無料動画を見ながら、プログラミングを勉強できるサイトです。
早く覚えたいなら、Progateと同時にやっちゃいましょう。

こちらはPHP以外にも、AndroidアプリやiPhoneアプリの作り方まで動画があります。
かなり幅広いです！

ドットインストールの良いところはそれだけではなく、Laravelのようなフレームワークや環境構築もあるところです。
Webアプリの構築を最初から最後まで一通りできてしまうので、この基礎基本が理解できていると業務でも問題なくシステム開発できますね。

https://dotinstall.com/

### さいごに

この2つは本当オススメです。
まずコードを書いてみるのがいいですね。

無料でできるからこそ、”まず書いてみる”ができます。
プログラミングスクールでお金払ったあとに、「あれ？ちょっと違うかも？」となってしまうパターンを回避できます。

そして、大事なことを一言。
プログラミングくらい独学で勉強するのは、SEにとっては当たり前のことです。
実際の仕事になったら、自分で調べて、自分で考えて、自分で解決する場面が頻繁にあります。

”自分でできるようにする”
この能力が割と試されるので、最初の独学くらい自分でできるようになりたいですね。
外部モジュールをなるべく使いたくないという話

おはようございます、まちゅです。
今日は朝投稿してみます。

### 概要
グリッドレイアウトはレスポンシブデザインにとって
強力な武器になります。
特にコンテンツ羅列型のページでは簡単に実装できるので重宝しますね
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout

前回色々書きましたが、
自作しようかどうか迷ったので、
その際考えたことを書きます。

### 外部製のものを使うのかどうか
**(8/11追記)Headless UIというものをコメントでご教示いただきました。**
自作と外部ライブラリのハイブリッドな選択肢ですね！

私は、自分で書けるものは自作推奨派です。
自分は保守性を重視していますが、
個人によって重視するものが違うと思うので何がいいかは断定はできません。


例としてCSSフレームワークにスコープを絞って考えてみます。

自分で書く場合
- メリット
    - 自分だけの表現ができる
    - 0から設計するので壁にぶつかると勉強になる
- デメリット
    - リリース初速が遅くなる
    - 設計ミスをすると修正が面倒
    - 各ブラウザ対応がやや手間
    - 後からフレームワークを導入したいと思っても移行にコストがかかる
 
CSSフレームワークを使う場合
- メリット
    - 初回リリース速度をブーストすることができる
    - 設計レベルで構成が奇麗になる
- デメリット
    - フレームワークの設計思想を理解しないとゴチャる
    - 破壊的アップデートにプロジェクトが弱くなる
    - 構成に理解が無くなる
    - figmaなどからインポートしたCSSとの親和性が低い

あくまで個人的考えです。
過去にReact17を18にアップデートする際に
material-uiからmuiへ移行が必要で、
その際の破壊的変更の修正が必要だった時はかなり苦しんだので、そういうトラウマもありますね。
react-modalを利用していた時も、意図通りのデザインや挙動にならず結局自作モーダルに移行しました。



ライブラリ全般的にスコープを広げて考えてみると、
dayjsのような、自作できない/作成コストがかかる、
もしくは他モジュールへの依存が少ないような独立したライブラリを導入するのはいいかなと思います。
入れる場合は、プロジェクトに不要な機能も付いてくる場合が多いので
不用意なバンドルサイズ増加には気をつけたいです。

逆にReactのHooksのような、Reactの仕様に依存するようなものは
根幹ライブラリのようなアップデートがあった時に動かなくなる可能性があるので
自作で構造把握しておけば修正コストも少なそうだなと。
サードパーティの対応を待たなくてもいいですし、なにより不要な機能がついてこないのでスッキリします。


### さいごに
ケースバイケースと一括りにするのは簡単ですが、
どういうケースではどういうメリットデメリットがあって、どうだから、
といった理由を考えていくと、後々自分の想定外の問題に直面する事も少なくなるのかなと思います。
Gitコマンドのエイリアス(alias)設定

# 概要
Gitコマンドを独自にカスタマイズすることで、作業効率化の向上を実現することができる。
特にオプション付きコマンドを設定することが非常に強力になる。

# 作業手順
1. ホームディレクトリに移動
　cd ~
2. エイリアス設定ファイルを開く
  vim .gitconfig
3. 各自エイリアス設定を追加

4. 設定済みのエイリアス設定を確認
```
  al = config --get-regexp alias
```

# エイリアス設定の一部
```
[alias]
  al = config --get-regexp alias
  am = commit --amend -m
  mea = merge --abort
  pop = stash pop
  pu  = push origin HEAD
  puf = push -f origin HEAD
  re2 = rebase -i HEAD~2
  re3 = rebase -i HEAD~3
  rea = rebase --abort
  reh = reset --hard HEAD~^_
  reh = reset --soft HEAD~
  st = stash -u
  sw = switch
  swc = switch -c
```

# 追記
Gitコマンド以外のエイリアス設定も可能なことがわかった。
その方が汎用的に使えるので、以下で設定した。

https://qiita.com/TS1engineer/items/3d22f940c4d862db777e
リカーシブ（再帰）をphpで解説

# 概要
基本情報で再帰の問題があったため
アウトプットのために記事に書きます。

# バージョン
 * php 8.1

# 再帰とは
佐々木真さんの記事が分かりやすいです
https://wa3.i-3-i.info/word14899.html

自分で作った関数の中に自分で作った
関数を呼びだす。イメージしずらいですよね


難しいのでコードで見ていきましょう

# 対象コード

```php
<?php
//再帰
function father(){
   $result = son(3);

   echo $result;
}
function son($num){

   if($num > 0 ){
   return $num * son($num - 1);      
      
   }
   else if($num == 0){
      return 1;

   }
   else{
      return 0;

   }
   
}
father();
?>
```

father関数でson関数に3を入れ、
son関数を見ます。

```php
function son($num){

   if($num > 0 ){
   return $num * son($num - 1);      
      
   }
   else if($num == 0){
      return 1;

   }
   else{
      return 0;

   }
```
son関数の$numに3を入れてます。
直接入れているわけではないですが、

今回father関数の中にあるson関数に3を入れてますよね。それが反映されています。
関数はそういうものです。

```php
   if($num > 0 ){
   return $num * son($num - 1);      
   }
```
$num = 3なので、このif文に該当します。
returnでson関数を再度呼び出しています。

自分と同じ関数を何度も呼び出すことを、
再帰と言います。

上記のif文を見て
$num = 3なので
3になり、son(2)になります。
これが0になるまで続きますので
3×2×1になります。


$num = 0 または-1であればelseで処理されます。

最後にreturnで返された値が$resultに行き
6が表示されます。

# 結論

短いコードならばfor文でいいですね。

しかし再帰を知ればできることも増えます。
下記の記事はその例が多く乗ってます。

https://qiita.com/drken/items/23a4f604fa3f505dd5ad

私ももっと勉強します！
疑問点があれば質問してください。
ここおかしいよっていう方もお願いします。