OmniAICreator/Qiita-1.07M huggingface dataset:
TypeScriptのgetByText()について

# getByText()とは
Testing Libraryの一部であり、ReactのUIコンポーネントをテストする際に **テキスト要素を取得する関数** のことです。

## getByText()の使用方法
```typescript
/** * @jest-environment */

import renderer from 'react-test-renderer'
import { render, fireEvent } from '@testing-library/react'
import { Button } from './Button' 

describe('Button', () => {
  it('changes the button text upon clicking the button using React Testing Library', () => {
    const button = render(<Button />)
    fireEvent.click(button.getByText('ON'))
    expect(button.getByText(/OFF/i)).toBeTruthy()
    fireEvent.click(button.getByText('OFF'))
    expect(button.getByText(/ON/i)).toBeTruthy()
  })
})
```
## 感想
よく使う関数だと思うので、すぐに用法が浮かぶようにします。
LaravelでGuzzleを使ってSpotifyAPIを叩く

# はじめに
LaravelでSpotifyのAPIを叩いた時にGuzzleを使ってみたので、備忘録的な感じでまとめておきます。

今回は、ユーザーに事前にSpotifyの認証を行ってもらい、各種Tokenを取得した上で処理を行なっているため、認証部分の処理は割愛させていただきます。（気が向いたら書くかも）

# Spotify APIとは
Spotifyが用意して公開してくれているもので、楽曲に関する詳細なデータを取得することができます。
登録が必要なので、事前に登録を済ませておいてください。
詳しくは、[こちら](https://developer.spotify.com/documentation/web-api)を参照してください。

# 手順
1. SpotifyのDeveloperに登録を行い、Appを作成し、Client IDを取得する。
1. Client IDを使い、ユーザーに認証を行ってもらい、Access Tokenを取得する。
2. 取得したアクセストークンを使い、プレイリストの曲を取得する。

# 実際に書いてみた

:::note warn
必要最低限のコードしか書いておりませんので、実装の際には注意してください。
:::

まずコントローラーを作成します。

```
$ php artisan make:controller SpotifyController
```

そうすると、以下の内容でControllerが作成されると思います。

```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpotifyController extends Controller
{
    //
}
```

そこにGuzzleの[公式ドキュメント](https://docs.guzzlephp.org/en/stable/)に従いコードを書いていきます。

```php
<?php

namespace App\Http\Controllers;

use GuzzleHttp\Client; //追加
use GuzzleHttp\Exception\GuzzleException; //追加
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class SpotifyController extends Controller
{ 
	public function get_songs($playlist_url)
	{
        $access_token = "ユーザーのアクセストークンはここに入れてください。";

        //与えられたURLからIDを取得します。
    	preg_match('/playlist\/([a-zA-Z0-9]+)/', $playlist_url);
    	$playlist_id = $result[1];

    	$api_url = "https://api.spotify.com/v1/playlists/$playlist_id/tracks";
     
    	$client = new Client();

    	try 
    	{
	    	$response = $client->request('GET', $api_url, [
	    		'headers' => [
	    			'Authorization' => 'Bearer ' . $access_token,
	    			'Content-Type' => 'application/json',
	    		]
	    	]);

            //jsonで返ってくるので取得できる形に直します。
	    	$data = json_decode($response->getBody(), true);

	    	$songs = $data['items'];

	    	foreach ($songs as $song) {
	    		$artwork = $song['track']['album']['images'][0]['url'];
	    		$song_name = $song['track']['name'];
	    		$artist_name = $song['track']['artists'][0]['name'];
	    		$album_name = $song['track']['album']['name'];
                //ここで取得した内容を煮るなり焼くなりする。
	    	} catch (GuzzleException $e) {
	    		echo $e;
	    	}
	    }
	}
}
```

ある程度処理内容はコメントアウトで記載しておきました。
また、jsonで返ってきたデータのどこに何が入っているかもある程度記載しておいたので参考にしてみてください。

返ってくる値にはかなりたくさんの情報が入っているので気をつけてください＾＾

# 最後に
実装を行う際はもう少し付け加えないといけない部分もあると思いますが、ある程度簡潔にまとめることができたと思います。

もっと別のことが行いたい場合は、Spotifyの[公式のdocumentation](https://developer.spotify.com/documentation/web-api)に、より詳しい情報が書かれていますので参考になさってください。

プレイリストを共有するwebアプリケーションを作った際に使ったので、より詳しい処理だったり

備忘録な感じで書いていますが、誰かの役に立てれば幸いです。

(プレイリストを共有するwebアプリケーションを作った際に使ったので、Authの処理だったりは以下のgithubに載っています。よければ参考にしてみてください。）

https://github.com/Sora0613/Laravel-Share-Playlists
VS CodeでCommit messageのスペルチェックを行いたい

Visual Studio Codeは標準ではGitのコミットメッセージのスペルチェックは行ってくれません。

[Code Spell Checkerプラグイン](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)を導入するとGitのCommit Messageのスペルチェックが有効になります。
![Screenshot 2024-01-07 at 19.28.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99370/c0bdccd3-c0b0-ef4f-a2b1-e92d472ea5ee.png)

ただ、他の全てのファイルの編集時にもスペルチェックが聞いてしまいます。GitのCommit Messageのスペルチェック以外を有効にしたくない場合は`Settings`の`cSpell.enabledLanguageIds`で`scminput`以外を全て削除しましょう。

![Screenshot 2024-01-07 at 19.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99370/9cb0a8ee-fbf0-26fd-d7ea-455479d08ba8.png)

ちなみに私は下記の4つだけ`settings.json`登録することにした。
```
    "cSpell.enabledLanguageIds": [
        "git-commit",
        "markdown",
        "plaintext",
        "scminput"
    ]

    "cSpell.enableFiletypes": [
        "md"
    ]
```
Git 変更取り消しコマンド

# はじめに
変更ファイルの取り消ししたい時に使用するGitコマンドを残します。

# 開発環境
- GitHub
- Mac

# 指定したファイルの変更のみを削除する（git addする前）

- git checkoutを使用する

```
git status

git checkout <ファイル名>
```

- 結果

![スクリーンショット 2024-01-01 14.38.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/46a97ccb-4c5f-6006-998a-93a931bc23e4.png)

![スクリーンショット 2024-01-01 14.37.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/cd4fab86-33ec-ac91-3880-c5006ac45a0a.png)

![スクリーンショット 2024-01-01 14.37.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/8474a132-4235-9135-e2b6-75020a2fc25e.png)


# 作業ディレクトリのすべての変更を削除する場合(addしたけどcommitしていない)

- git reset HEADを使用する

```
git status

git reset --hard HEAD~

```

- 結果（コマンド間違えました・・）

![スクリーンショット 2024-01-01 14.38.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/46a97ccb-4c5f-6006-998a-93a931bc23e4.png)

![スクリーンショット 2024-01-01 14.38.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/e4cb8c01-44d7-8841-15f5-7ddb457c9da9.png)

![スクリーンショット 2024-01-01 14.37.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/ad3a0e0a-aedf-cb7b-f9e3-a9df84d925a8.png)

# 未追跡ファイルが複数存在する場合に削除する

- git clean -dfを使用する

```
git status

git clean -df

```

- 結果

![スクリーンショット 2024-01-01 14.36.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/cf6f780f-b113-1bd0-219d-892ac661c084.png)


![スクリーンショット 2024-01-01 14.37.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/bf2feca2-74f3-d48d-0002-c41d77f07da8.png)

![スクリーンショット 2024-01-01 14.38.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/31588ce6-99b1-a321-9787-65fc51b3700d.png)

# まとめ
変更ファイルの取り消しはなるべく避けたほうが良いけど、どうしても取り消したい場合は、状況に応じて対応する

# 参考
- [2.4 Git の基本 - 作業のやり直し](https://arc.net/l/quote/iftsknko)
- [[git] 変更を取り消す](https://www.yoheim.net/blog.php?q=20140201)
JavaSE11Gold合格するためにやったこと

## JavaSE11Goldに合格した
正解率63%以上合格で79%だった。
8割以上取れているかなと思ったが、ギリ届かなかった。

![スクリーンショット 2024-01-07 181925.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577396/b2afd1a9-df69-04b7-b1ce-fa2c95c88e85.png)

## Javaの経験
4年ぐらいJavaでの開発をしている。
試験で頻出するストリームAPIやラムダ式は、ほんの少し業務で使った経験がある。

## やったこと
[黒本](https://book.impress.co.jp/books/1121101020)と[紫本](https://www.shoeisha.co.jp/book/detail/9784798170572)を中心に勉強した。
勉強量としては、黒本は5周、紫本は2周ほどした。

## 期間
かかった期間は6ヶ月だが、前半の3ヶ月はダラダラしていて黒本1周しかしてなかったので、実際に身になった期間は後半の3ヶ月である。
怠惰な性格なので、週ごとにここまで勉強するなど目先の目標を設定することで、後でまとめて勉強しようという気持ちにならず継続的に勉強することができた。
平日は疲れていて勉強する気にならなかったので土日中心に勉強した。

## 感想
受験の体感としては5割ほど黒本から同じ問題・類題が出ていたので黒本だけでも合格はできた感じはする。
テストセンターで受験したが、思った以上に人が多く開始時間ギリギリで開始したので余裕をもって試験会場に行ったほうが良い。
元々黒本だけ勉強して受験するつもりだったが、不安だったので紫本も買って勉強した。紫本のほうが細かいところまで書かれているので、黒本に比べて内容が難しかったが買ってよかったと思う。
黒本の模擬試験を9割以上（正誤の理由込み）取れていたら合格できるはず。
[まとめ]世界の一流は「雑談」で何を話しているのか

## はじめに

[世界の一流は「雑談」で何を話しているのか](https://amzn.to/47nGCCJ)を読んでみて、自分が勉強になったことや実践していきたいことをまとめました。

## ビジネス相手と対等な関係を作る

- お互いの共通の「趣味」を見つける
    - 親近感が増して信頼関係が結びやすくなる
- お互いに共通する「体験」や「考え方」を共有する
    - 仕事で最も辛かったのはどんな時期ですか？
    - 逆に一番楽しかった仕事はなんですか？
    - 実体験や考え方を共有する方がはるかに深い雑談ができる
- 相手にとって「必要不可欠」な存在となる
    - 自分が知らない情報を持ってきてくれることやこの人と仕事をすると結果が出るなどと、相手にとって必要不可欠な存在になると、平等なビジネスパートナーとして信頼関係を結ぶことが容易となる

## ラポールを作る

- 相手が「何を大切にしているか？」を知る
- 相手が「何を正しいと思っているか？」を知る
- 相手が「何を求めているのか？」を知る

### 質問

- あなたは仕事を通じて何を得たいですか？
- それはなぜ必要ですか？
- 何をもっていい仕事をしたと言えますか？
- なぜ今の仕事を選んだのですか？
- 去年と今年の仕事はどのようにつながっていますか？
- あなたの一番の強みはなんですか？
- あなたは今どんなサポートが必要ですか？

## 異業種の相手と話す時

相手が異業種の場合、「サイクル→トレンド→パターン」を質問してみるのが有効

例）

- 最近は、どんな会社が最先端を走っているのですか？
    - 業界のトレンドに一歩踏み出す
- 一年を通して、最も忙しくなるのはいつですか？
    - 業界のサイクルを理解することができる

## 聞きにくいことを質問するときに便利なフレーズ

- 素朴な疑問なんですけど
    - ハードルが下がり、相手も構えることなく疑問に答えてくれる
- 少し話が脱線しますが、
- こんなことをお聞きすると、失礼に値するかもしれませんが、、、

## 相手が複数の雑談では、最も立場が弱い人を立てる

- メンバーの中で最も立場が弱い人にも関心を寄せるように意識をする
    - 「話しやすい場」を作り、幅広く情報を集める環境を整える
    - 例）部長→新卒→課長→係長
- 以下のような手順をイメージしながら複数の相手との雑談をする
    - 参加メンバー全員に発言の機会を作る
    - 多様な意見を集めて瞬時に理解・整理する
    - 重要と思われるポイントを深掘りする
    - 話題を広げて、できる限り相手の情報を聞き出す
    - 集めた情報を合意形成のための材料として活用する

## 雑談を武器として活用するための3つの心構え

- 雑談を「一回限りのチャンス」と考える必要はない
    - 雑談の目的は、できる限り相手の情報を集め、お互いの信頼関係を高めることによって、結果を出すこと
    - 一度では不可能なので、集積することで目的を果たしていく
- 知り得た情報を「次にどう活かすか？」という視点を持つ
    - 「なんのためにその情報が欲しいのか？」という目的意識を持って、知り得た情報を有効に活用する
- 前回の内容をしっかりと覚えておく
    - 同じ質問をして、相手が気分を害することもあるので、「質問項目」と「回答項目」を容易しておく

## 書籍

[世界の一流は「雑談」で何を話しているのか](https://amzn.to/47nGCCJ)
Dell UnityVSAの評価（する前にハマる)

さて、DellのUnityを評価したんだけど・・ってことで色々調べると、ダウンロードできそうだし、簡単なのはわかる。
でも、利用するにもUnityVSAのOVAファイルがダウンロードできない・・　そして、ダウンロードしてみたら、今度はラインセンス取得でハマるというね。。
これ、わかりづらいので、まとめてみた・・

まず、評価するためにダウンロード先検討すると、以下がリンク先が候補。
　　→以前はDriver(Dell Support)からダウンロードができた記憶なんだけど、どこにあるのか教えてほしい。。
  
Dell Technologies UnityVSAおよびUnity Cloud Editionのダウンロード
https://www.dell.com/ja-jp/dt/products-solutions/trial-software-download/eula/unityvsa.htm

UnityVSA 評価ダウンロード
https://www.dell.com/ja-jp/dt/software-downloads/forms/unityvsa.htm

Dell EMC Unity Family(Dell Support/Driver/Download)
https://www.dell.com/ja-jp/dt/software-downloads/index.htm
※ソフトウェア ダウンロード
↑PowerScaleとかもあるよ・・

  
まともにダウンロードできるのが、UnityVSA-5.1xx ってことでダウンロードしても、今度はライセンス取得時は、xmlファイルのみとなっているので、5.1には適用できない。(5.3以降からxmlファイルでのライセンスが適用できたはず）

じゃぁ、5.3ダウンロード試みるが、ずっと、”Invalid Access”　　おぃ・・・
自分はバージョン5.3（偶々)持っているので、なんとかライセンス適用できたけど、ライセンス取得時にもいつもながら、アクセスできないとかの現象にはまると暫く放置して様子見るしかない。

後、ライセンス取得できない場合がありますが・・・
我慢して待ちましょうwww
Outsystems REST API 送信元IPアドレスを確認する

# 背景とやりたいこと
・Outsystemsで開発したシステムから、組織で利用しているSaaS（今回はbacklog）のREST APIにアクセスしたい
・そのSaaSは、組織のセキュリティルールによりIPアドレスによるアクセス制限がされており、事前に許可設定がされたIPアドレス以外はアクセス不可
・SaaS側で許可IPアドレスを追加するため、Outsystemsの送信元IPアドレスを確認したい
・ググりまくったが、情報が見つからなかった

# Outsystemsの環境
O11ではなく、Outsystems Deveroper Cloud

### 送信元IPアドレスについて、ドキュメントを調べても、ググってもどこにも書いてない
https://success.outsystems.com/ja-jp/documentation/outsystems_developer_cloud/cloud_native_architecture_of_outsystems_developer_cloud/network_architecture_of_outsystems_developer_cloud/

### その為、仕方なくOutsystemsからwebサーバーにアクセスし、Webサーバーのaccess.logの記録から、送信元IPアドレスを確認することにしました

# 手順（ありふれた細かい手順は割愛）
### 準備
- AWS EC2にnginxインストール
- EC2のセキュリティグループのインバウンドルールに、httpで0.0.0.0/0（インターネットからec2へのhttpアクセスを全許可）を追加
- access.log を tail -f コマンドで追記をリアルタイムにみえるようにしておく
- EC2のURL（パブリックDNS）を確認
### PCのブラウザでnginxにアクセスできることを確認 **[1]**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/7bfa609e-60c7-4e41-8d33-55a23fac9b7c.png)
### outsystems consume REST API を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/5e55b9a6-d412-d3df-53b7-0969b5943b4f.png)

### REST APIに Get Methodを追加し、Method URLにEC2のURLを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/558c0333-737b-6c16-60d8-349a0a172580.png)
### Get Methodからnginxにアクセスできるかテスト **[2]**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/6acd45d6-ffb3-ecc0-e0a8-b6a73eed9619.png)
### nginxからのレスポンスが表示されればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/197fe6ce-5a45-da87-eeb6-e9ca25d15baf.png)
### スクリーンにボタンを配置
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/ac91b836-e1f1-7808-214e-c3499a49e176.png)
### ボタンのクリック時のクライアントアクションに、サーバーアクションであるREST APIのGet Methodを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/e118c6ea-5139-16f7-9d71-6905990075d9.png)
### Publishする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/18ac5cb7-052f-4640-b56d-3bff79e1aaca.png)
### ブラウザを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/765ead99-243e-b840-e2f3-59f9b14f878d.png)
### ボタンを押下して、REST APIのGet Methodを実行 **[3]**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/8f81e670-a282-6b41-1b9c-9c4e460d35fd.png) 

### これらの実行により、nginx access.logに記録された内容の確認
[1]の114.1XX.XXX.XXXの行は、クライアントPCのMacのsafariがアクセスした際のログ
[2]の114.1XX.XXX.XXXの行は、クライアントPCのODC Studio（ODC統合開発環境）のREST APIのテストボタンを押下してnginxにアクセスしたログ
[3]の43.2XX.XXX.XXXの行は、ODC Studioによって作成したアプリをクラウドにデプロイ後、クライアントPCのsafariの「AWS IP Address Check」を押下したことで、クラウド側のサーバーサイドからnginxにアクセスしたログ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141348/fa3476f1-ffed-a149-117a-69d57fab4e03.png)

今回のゴールである、[3]Outsystems REST API 送信元IPアドレスを確認することができました。

以上です
paizaラーニング解答: 論理演算メニュー[Ruby]

# 論理演算メニュー
https://paiza.jp/works/mondai/logical_operation/problem_index?language_uid=ruby

できるだけシンプルなコードになるよう工夫しました。
## STEP: 1 論理積( AND )の基本
```ruby
a, b = gets.split.map(&:to_i)
puts a & b
```

## STEP: 2 論理和( OR )の基本
```ruby
a, b = gets.split.map(&:to_i)
puts a | b
```

## STEP: 3 否定( NOT )の基本
```ruby
a = gets.to_i
puts !a.zero? ? 0 : 1
```

## STEP: 4 排他的論理和( XOR )の基本
```ruby
a, b = gets.split.map(&:to_i)
puts a ^ b
```

## STEP: 5 NAND 演算の基本
```ruby
a, b = gets.split.map(&:to_i)
puts !(a.nonzero? && b.nonzero?) ? 1 : 0
```

## STEP: 6 NOR 演算の基本
```ruby
a, b = gets.split.map(&:to_i)
puts !(a.nonzero? || b.nonzero?) ? 1 : 0
```

## STEP: 7 XNOR 演算の基本
```ruby
a, b = gets.split.map(&:to_i)
puts !(a.zero? ^ b.zero?) ? 1 : 0
```

## STEP: 8 半加算器
```ruby
a, b = gets.split.map(&:to_i)
c = a & b
s = a ^ b
puts "#{c} #{s}"
```

## STEP: 9 全加算器
```ruby
a, b, c1 = gets.split.map(&:to_i)

def half_adder(a, b)
    c = a & b
    s = a ^ b
    return [c, s]
end

cx, sy = half_adder(a, b)
cy, s  = half_adder(sy, c1)
c2 = cx ^ cy
puts "#{c2} #{s}"
```

## FINAL問題 論理演算を用いた計算のまとめ
```ruby
a, b, c, d = gets.split.map(&:to_i)
puts !((!a.nonzero? && !b.nonzero?) || !c.nonzero?) ^ d.nonzero? ? 1 : 0
```
Ruby Silver練習問題個人的詰まったやつ

# Rexより
- 次のコードを実行するとどうなりますか
```ruby
a = [1, 2, 5, 7, 8]
b = [1, 3, 6, 7, 9]
c =  nil || a & b | a && a | b
p c
```
## 考え方
1.左から``||``を評価していく
``||``は左辺が偽(nil,false)の時に``||``の右辺を実行する
2.``&&``を評価する
``&&``は左辺が真の時に``&&``の右辺を実行する
※``a & b | a``をしているがnilやfalseにならないので真
3. ``a | b``の結果を出力
```ruby
# c 
[1, 2, 5, 7, 8, 3, 6, 9]
```

## 使いそうな場面
nilチェックとか
```ruby
# aがnilの場合は右辺の処理をする
a || ( a = 20 )
# 自己代入で書くと↓(a = a + 1 => a +=1 )
a ||= 20
```

## 参考

https://qiita.com/oknoamazia/items/cc856a39c93f61a94410


https://pikawaka.com/ruby/logical-operators
JWTってなんだろう？ - オンラインの「秘密の通行証」って考えてみよう！

JWTを学習していて、私が疑問に思った事をQ&A形式で書いてみました😃


## Q1: まず、JWTって何？
A1: JWTってのは、オンラインで「これオレだよ！」って証明するための通行証みたいなもの。ログインするときにこれをもらって、それを見せることで、「ほんとにあなたですね、どうぞ通ってください」とサービス側が承認してくれる！

## Q2: JWTのヘッダーって何？
A2: ヘッダーってのは、その通行証の「種類とチェック方法」を教えてくれる部分。例えば、コンサートのチケットに「VIP席」とか「一般席」と書いてあるのと同じ。どんな通行証かと、どうやって本物かどうかチェックするかが書かれいる！

## Q3: じゃあ、ペイロードって何？
A3: ペイロードは、通行証に書かれてる「あなたについての情報」。つまり、名前とか、通行証の有効期限。コンサートチケットで言うところの座席番号みたいなもの！

## Q4: 署名って何のこと？
A4: 署名は、その通行証が「ガチで本物」だってことを証明する特別なマーク。まるで、チケットについてるホログラムシールみたいなもので、これがあると偽物じゃないってことが分かる！

## Q5: JWTがなかったらどうなるの？
A5: 通行証（JWT）がないと、オンラインサービスに「本当にあなた」だって証明できなくなっちゃう。これは、チケットなしでコンサートに入ろうとするようなもの。チケットがなければ、中に入れないよね。

## Q6: ユーザーIDってデータベースにあるやつ？
A6: そうそう、ユーザーIDってのは、オンラインサービスに登録したときにもらう「図書館の会員番号」みたいなもの。この番号で、サービスはあなたが誰かを判断する！

## Q7: 認証と認可の違いって何？
A7: 認証は「あなたがあなたであることを証明すること」。IDカードを見せて、これオレだよって言うのが認証。一方、認可は「あなたが何をしていいかを決めること」。VIPエリアに入る権限があるかどうかをチェックするのが認可！

### 😖JWTの「ちょっと困るところ」 - 便利だけど完璧じゃない

## Q8: JWTって便利そうだけど、デメリットはあるの？
A8: 便利だけど、ちょっとした「困るところ」もある！

* セキュリティ問題: 通行証（JWT）をなくしたら大変！もし悪いヤツに拾われたら、その人があなたになりすましてサービスを使えちゃうかもしれない。だから、JWTを安全に保管しないといけない💦

* 有効期限の管理: この通行証には「賞味期限」があって、期限切れになると使えなくなる。でも、この期限が長すぎるとセキュリティリスクが高まるし、短すぎると使うたびに面倒になってしまう💦

* 情報の更新問題: 通行証に書かれた情報が古くなったり間違ってたりすると、新しい通行証をもらわないといけない。これがちょっと面倒くさい💦

* スケールの問題: 大きなシステムで使うときには、これらの通行証をチェックするのに時間がかかることがある。これは、大きなイベントでチケットチェックに時間がかかるのと似てる


### 👯‍♂️JWTとAPIの「仲良し関係」 - オンラインの世界でのパートナーシップ

## Q9: JWTとAPIってどんな関係なの？
A9: JWTとAPIの関係ってのは、まるで「秘密のパスワード」と「クラブの入り口」みたいなもの。APIはオンラインサービスの入り口のようなもので、そこを通るには「秘密のパスワード」（JWT）が必要

* アクセス許可: あなたがAPIを使って特定のサービスにアクセスしたいとき、JWTがその「入場許可証」になるんだ。JWTを持っていれば、「あ、この人は入れますよ」とAPIがあなたをサービスに招き入れてくれる。

* 安全な通信: JWTは情報を暗号化しているから、あなたがAPIを通じてサービスと話すときも、その会話が安全に保たれる。まるで、秘密のメッセージを伝えるときに使う暗号のようなも。

* 効率的なやりとり: JWTのおかげで、毎回ログイン情報を入力する必要がなくなる。これは、クラブの入り口で毎回名前とパスワードを言わなくても、VIPパスを見せるだけで入れるようなもの。



調べたり学習していると、専門用語で溢れてきたのでもう少し身近に感じる事ができれば理解できるかなと思いました！
全ては理解できずとも、なるほどわからん！が、んーーなんとなくわかったに繋がれば幸いです🙇
ABC335・D - Loong and Takahashi 

# 問題はこちら
AtCoder Beginner Contest 335（Sponsored by Mynavi）
D問題

https://atcoder.jp/contests/abc335/tasks/abc335_d

# 提出した回答
```
n = int(input())

# 2次元配列を生成
grid = [[0 for i in range(n)] for j in range(n)]
grid[int((n+1)/2-1)][int((n+1)/2-1)] = "T"

x, y = 0, 0
cnt = 0
    
direction = ["right", "down", "left", "up"]

def go(grid, direction, cnt, x, y):
    if direction[cnt] == "right" and x >= 0 and y+1 >= 0 and grid[x][y+1] == 0:
        y += 1
        return x, y
    elif direction[cnt] == "left" and x >= 0 and y-1 >= 0 and grid[x][y-1] == 0:
        y -= 1
        return x, y
    elif direction[cnt] == "up" and x-1 >= 0 and y >= 0 and grid[x-1][y] == 0:
        x -= 1
        return x, y
    elif direction[cnt] == "down" and x+1 >= 0 and y >= 0 and grid[x+1][y] == 0:
        x += 1
        return x, y
    else:
        return False

for i in range(n**2 - 1):
    if i == 0:
        grid[x][y] = i + 1
    else:
        try:
          x, y = go(grid, direction, cnt, x, y)
          grid[x][y] = i + 1
    except:
        if cnt != 3:
            cnt += 1
        else:
            cnt = 0
          x, y = go(grid, direction, cnt, x, y)
          grid[x][y] = i + 1

for i in range(len(grid)):
    print(*grid[i])
```

# 苦戦したところ
処理としては、初めに一番左上に1を入力し、ひたすら右へ。
埋められなくなったら下へ、また埋められなくなったら今度は左へ……と、「今の処理ができなくなるまで続け、不可能になったら処理を切り替える」というプログラムを作成しました。
この、「今の処理ができなくなるまで続け、不可能になったら処理を切り替える」をどのように実装するかがすぐに分からず、苦戦しました。
## 実装方法
今回は、
①右へ
②下へ
③左へ
④上へ
を順に処理していく、というプログラムです。
なので、
```
direction = ["right", "down", "left", "up"]
```
というリストを作成し、
```
def go(grid, direction, cnt, x, y):
    if direction[cnt] == "right" and x >= 0 and y+1 >= 0 and grid[x][y+1] == 0:
        y += 1
        return x, y
    elif direction[cnt] == "left" and x >= 0 and y-1 >= 0 and grid[x][y-1] == 0:
        y -= 1
        return x, y
    elif direction[cnt] == "up" and x-1 >= 0 and y >= 0 and grid[x-1][y] == 0:
        x -= 1
        return x, y
    elif direction[cnt] == "down" and x+1 >= 0 and y >= 0 and grid[x+1][y] == 0:
        x += 1
        return x, y
    else:
        return False
```
のように、リストのインデックスを指定することで処理を切り分ける関数を作成しました。
そして、for文の中で、
```
try:
    x, y = go(grid, direction, cnt, x, y)
    grid[x][y] = i + 1
except:
    if cnt != 3:
        cnt += 1
    else:
        cnt = 0
    x, y = go(grid, direction, cnt, x, y)
    grid[x][y] = i + 1
```
と、関数がエラーを返したら処理内容リストのインデックスであるcntをインクリメントして再実行する、としています。
<br>
とりあえずこれで正解はもらえましたが、もっと良い方法があると思うので調べてみます。
モノ創りサークル『しょ～とらば～ず』没ネタ供養(技書博9　フリーペーパー企画)

## 前書き
お久しぶりです～。CAMIの回路設計エンジニア樋口改め、モノ創りサークル『しょ～とらば～ず』のグッピーです。
前回の執筆からえーーと、2、27ヶ月!? 2年以上Qiita記事から離れていたんですね。CAMIを離れてからずっと忙しくて気が付いたら2年ですよ。時間って早く進みますね。

さて本題ですが、先日、東京で第九回技術書同人誌博覧会というイベントに参加してきました。
いわゆる『技術系同人オンリーイベント』の1つで、比較的小規模のイベント...という印象でしたが、今回は100サークルを超えていて小規模？ってなっていました。(もう少しハード系のサークルも増えてくれると嬉しいんですが、まぁ仕方なし)
で、その第九回技術書同人誌博覧会の企画、『技書博フリーペーパー』にて弊サークルが出したフリーペーパーをそろそろ公開しようかなと思います。

## 本編
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600123/cf97a01f-0f37-b8fb-8b7b-dc78fcaa7b3c.png)
　ども、初心者向けのものづくりサークル『しょ～とらば～ず』グッピーです。技術書典5から技術系イベント界隈に飛び込んだ弊サークルですが、なんともう5年経ちました。
いやーー、結構長く続いてますねこのサークル。
…と、まあそれだけ長く活動しているとですね、残念ながら出てきてしまうんですよ...。

$\huge{ボツネタたちが。}$

一度計画して動き始めていたのに、様々な理由からボツになってしまったネタたち、このまま眠らしておくのはかわいそう。
ということで、
この技書博9のフリーペーパー企画でいくつか供養してあげよう。という企画です。

### 1)Arduino互換機の自作キット販売
私が回路設計を始めたときに巷で定番だった『Arduino』の互換機を作って頒布してやろうという企画。
高校生の時にスタートして大学生の時も引き続き開発を進め、二次試作まで進んだものの、さてと、そろそろ量産版作ろうか…と思った時には...

既にESP32に流行が移っていました。

### 2)自分の代わりに会話してくれるチャットボットを作ろう
Qiitaの記事として用意していたネタです。
`Slackで上司とやり取りするのめんどいなぁ。`
`そうだ！自分の過去のslack会話を学習させたチャットボットを作って`
`自分の代わりに上司と会話してもらおう！`
という機械学習系のネタ記事になるはずでした。
しっかり考えてたんですよ、MeCabとWord2vecでデータつくって、それをランダムフォレストか決定木辺りで学習させようかなとか考えて、既にslackの履歴からNDAに引っかからない範囲内で私の発言を収集するとこまで終わっていたんですよ。ほら

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600123/45574d0a-ec99-9130-88b1-66fbcc9a483b.png)

で、後は実際に学習させるだけだ...という状態まで来ていましたが、準備途中でQiita記事を書く暇がなくなるくらい業務が忙しくなり、そして...

グッピーさん、転職しちゃったので実験相手がいなくなりました。

### 3)ぐぴ旅
その名の通り、グッピーさんが旅する本です。
たまにはこういう技術系とは全く関係ない本もいいよね。ということで準備していましたが

玉突き事故に巻き込まれて車全損になっちゃった☆
ということで完全にボツではないですが限りなくボツに近い状態に...。

以上、しょ～とらば～ずのフリーペーパーでした。
競技プログラミングの情報シェアに最適なサイトを作ったかもしれない

## 追記

https://post-codes.net/

1月末まで検証期間として公開しました！


## PostCode

今月の中旬当たりにリリースする予定のPostCodeというアプリを作っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/3f719adc-8eb2-f0f0-a496-61f74ecd8f4f.png)

このPostCodeというアプリは`「文字からコードへ」`をテーマにした、新しいタイプの`記事投稿サイト`になります。

既存の「文字」ベースでは、どうしても抽象的な話が多く、初学者にとっては少しハードルが高い印象を感じることが多いです。

そこで、コードと言う具体例を「ファイル」として記載することで、「初学者や低年齢に向けた具体的な記事をシェアできるようにしよう！」という目的で作っています。

そのPostCodeの記事の形態が、競技プログラミングの情報シェアに向いているかもしれないということで、この内容を投稿させていただきました。

拙い文章ですが、少々お付き合いいただけたら幸いです。

## PostCodeの概要

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/8c4d7dd0-9b99-c4be-0bd8-54a6c9013a92.png)

PostCodeでは「記事概要」「ファイル一覧」「ファイルビューワー」「コード説明」という4箇所に分けられます。

記事概要は左側の一番上。

ファイル一覧は右側の部分。

ファイルビューワーは「記事概要」した。

コード説明は「bottomに固定」です。


## 競技プログラミングに向いてるかもしれない理由

本題ですが、競技プログラミングの情報シェアに向いてるかもしれない理由ですが、この4か所の位置関係が、「問題形式」の記事にピッタリだからです。

よくある問題形式の解説記事にて、下に行ったり、上に戻ったりと「スクロールの回数が多い」現象が発生します。

PostCodeでは、このスクロールの回数を削減し、記事に集中することが出来そう、ということで「競技プログラミングの情報シェアに向いている」という題名で記事にさせていただきました。

些細なことかもしれませんが、こういった小さな積み重ねが、意外と時間を削減してくれることがあります。

従来の記事が読みやすいか、PostCodeでの記事が読みやすいかはまだ運用して見なければ分かりませんが、個人的にはこの位置関係はそういった「問題」形式の解説記事に最適な気がしています。

もしよろしければ、公開後、試していただけたら幸いです。

また、その他の形式に関しては、以下の記事にまとめましたので、参照ください。

https://qiita.com/Gamari0009/items/8e5fa14bc3e0becbfe0c

## 終わりに

最後に、宣伝させてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/f50a9bd3-11f0-8fac-bacd-f63425f866ec.png)

現在PostCodeというアプリケーションを作っています。

1月中にリリース予定ですので、もしよろしければ、こちらにて事前登録して頂けると幸いです。

https://docs.google.com/forms/d/e/1FAIpQLSf3oaQ0-1M4xqzRSthRAmgY91dCEmysW5pklYEh7ZCUTZmt_Q/viewform?usp=sf_link

利用者数によっては、登録に制限をかける場合がございますので、ご注意ください。
結合テストコード

結合テストは本当に難しいです・・・
ただ、一個一個分解すると理解できてきました！
復習の備忘録です！

### 結合テストコード
ユーザーがたどる一連の流れを確認する

### System Spec
結合テストコードを記述するための仕組み

### Capybara
System Specを記述するために必要なGem。　標準で導入済み

`rails g rspec:system users`

#### exampleを整理
- ユーザーが新規登録できる時
    - 正しい情報を入力すればユーザー新規登録ができてトップページに移動する
    - トップページに移動する
    - トップページにサインアップページへ遷移するボタンがある
    - 新規登録ページに移動する
    - サインアップボタンを押すとユーザーモデルのカウントが１上がる
    - トップページへ遷移することを確認する
    - カーソルを合わせるとログアウトボタンが表示される
    - サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていない　
- ユーザー新規登録できない時
    - 誤った情報ではユーザー新規登録できずに新規登録ページへ戻ってくる
    - トップページに移動する
    - トップページにサインアップページへ遷移するボタンがある
    - 新規登録ページへ移動する
    - ユーザー情報をを入力する
    - サインアップボタンを押してもユーザーモデルのカウントは上がらない
    - 新規登録ページへ戻される

#### visit
`visit 〇〇_path`のように記述すると、〇〇のページへ遷移することを表現できる
`get` はあくまでリクエストを送るだけのことを意味し、visitはそのページへ実際に遷移することを意味する

#### page
visitで訪れた先のページの見える分だけの情報が格納されています。
「ログアウト」などのカーソルを合わせて初めて見ることができる文字列はpageの中に含みません
#### have_content
`expect(page).to have_content('X')`と記述すると、visitで訪れたpageの中に、Xという文字列があるかどうかを判断するマッチャ。

#### fill_in
`fill_in 'フォームの名前', with:'入力する文字列'`のように記述することで、フォームへの入力を行うことができます。
#### 検証ツール
ブラウザに標準で備わっている、HTMLの要素や、適用されているCSSのコードを確認することができる機能
label要素の`for`に指定されているIDと、inputの`id`の値が同一になっています

#### find().click
`find('クリックしたい要素').click`と記述することで、実際にクリックができます。検証ツールを開いて、クリックしたい要素を確認
`<input type="submit" name="commit" value="Sign up" data-disable-with="Sign up">`
この時に、input要素のname属性を指定します。その場合
`find('input[name="commit"]').click`という記述になります

#### change
`expect{何かしらの動作}.to change {モデル名.cont}.by(1)`と記述することによって、モデルのレコードの数が幾つ変動するのかを確認
changeマッチャでモデルのカウントをする場合のみ、expect()ではなく`expect{}`となります
「何かしらの動作」の部分には、「送信ボタンをクリックしたとき」が入ります
`find('input[name="commit"]').click`が入ります

#### current_path
現在るページのパスを示す。`expect(page).to have_current_path(root_path)`と記述すれば、今いるページがroot_pathであることを確認できます

#### hover
`find('ブラウザ上の要素').hover`とすることで、特定の要素にカーソルを合わせた時の動作を再現できる
ログアウトボタンはヘッダーの中のspan要素をhoverすることで現れます。しかし、span要素は他でも使われているため、その親要素のuser_navクラスも合わせて指定します

#### have_no_content
文字列が存在しないことを確かめるマッチャ
【macOS】asdf+PoetryでPythonの開発環境を構築した

## 背景
先日、Anaconda3を使いたくなくなって、アンインストールした。
後に、asdfとPoetryでPythonの開発環境を再構築したので、メモを残しておく。

https://qiita.com/TIshow/items/2dbabe857343a79cf3b0

## やること

asdfとPoetryでPythonの開発環境を構築する

## 手順
- Poetryとは何か？
- asdfのインストール
- Python プラグインの追加
- Pythonのインストール
- Poetryのインストール
- 仮想環境の構築


## Poetryとは何か？
Poetryは、Pythonのパッケージ管理ツールである。Pythonには、pip や pipenv など、さまざまなパッケージ管理ツールが存在するが、Poetryもその一つ。
Poetryの目的は、パッケージの依存関係を簡単かつ効率的に管理することにある。

### Poetryの主な機能
Poetryは以下のような強力な機能を提供している・

- パッケージの管理：
Pythonプロジェクトに必要なライブラリやツールのインストール、更新、削除を容易に行うことが可能。
- 依存関係の解決：
poetry.lock ファイルを通じて、プロジェクトの依存関係を一貫して管理し、互換性の問題を防ぐ。
- プロジェクト管理ファイルの生成：
pyproject.toml ファイルを使用して、プロジェクトの設定や依存関係を定義。
- 仮想環境の自動作成：
プロジェクトごとに独立した仮想環境を自動で作成し、環境ごとの依存関係の衝突を防ぐ。
- パッケージのビルドと公開：
Pythonパッケージのビルドと公開を簡単に行なうことが可能。

### よく使用される機能
これらの機能の中で、特に頻繁に使われるのは、パッケージの管理から仮想環境の自動作成までの4つの機能である。

## asdfのインストール
asdfはおれの場合は、すでにインストール済みだったが、一応方法の載せておく。
とはいっても、公式サイトに従いインストールだけ。

```terminal:asdfのインストール
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.11.3
```

インストールできたらpathを通す。おれの場合はzshを使っているが、bashを使っている場合は、以下の最後の`~/.zshrc`のところを、`~/.bashrc`に変える。

```terminal:$
echo ". '$HOME/.asdf/asdf.sh'" > ~/.zshrc
```

## Python プラグインの追加
ターミナルを開き、以下のコマンドで Pythonプラグインをasdfに追加。
```terminal:$
$ asdf plugin add python
```

## Pythonのインストール
インストール可能なPythonのバージョンは以下のコマンドで確認できる。
```terminal:$
$ asdf list-all python
```

欲しいpythonをインストールする。
```terminal:$
$ asdf install python latest
```
もしpython3.9系など他のバージョンをインストールしたいならば、上の`latest`のところを、
```terminal:$
$ asdf install python 3.9.12
```
など、好きなバージョンに変える。`latest`はそのときの最新版がインストールされる。

もし、インストールしたpythonをグローバルで使いたい場合は、以下のコマンドを実行。
```terminal:$
$ asdf global python latest
```
このようにすると、どのディレクトリでもグローバルで指定したバージョンになる(`python -V`で確認できる)。おれはグローバル設定は好きじゃないのでしてない。

ローカルで使用したい場合、つまりカレントディレクトリ以下でpythonバージョンを指定して使いたい場合は`asdf local`を使う。
`asdf local`を使えば、プロジェクトごと（ディレクトリ下ごと）にpythonのバージョンを変得ることができる。具体的には、
```terminal:$
$ asdf local python latest
```
.tool-versionsというファイルが生成され、そのディレクトリ以下では指定したバージョンになる。

## Poetryのインストール
Poetryの最新版をインストールしていく。
ただ、グローバルでPoetryを使いたい場合と、もしプロジェクトごとにPoetryを使いたい場合でちょっと異なるので、両方載せておく。

### 1.グローバルで使用する場合 
```terminal:$
$ asdf install poetry latest
```

poetyを全体設定にしたいので、globalインストール
```terminal:$
$ asdf global poetry latest
```
これでどこでもPoetryのコマンドが使えるようになるはず。

ちなみにインストール済みのPoetryを確認したい場合か以下の通り。

```terminal:$
$ asdf list poetry   
```

### 2.プロジェクト・ディレクトリごとで使用する場合 

プロジェクトのルートディレクトリに移動（存在しない場合は作成）。
```terminal:$
$ cd /path/to/your/project
```

以下のコマンドで、現在のディレクトリに対して Python のバージョンを設定。
```terminal:$
$ asdf local python latest
```

Poetry プラグインをインストール
```terminal:$
$ asdf plugin add poetry
```

Poetry のインストール
```terminal:$
$ asdf install poetry latest
```
以下のコマンドで、現在のディレクトリに対して Poetry のバージョンを設定。
```terminal:$
$ asdf local poetry latest
```

### 注意点
この手順はプロジェクトごとにPythonとPoetryのローカル環境を設定するやり方。これにより、グローバル環境に影響を与えることなく、プロジェクトに特化した環境を構築できる。
グローバル環境に影響したくない場合はこちらがおすすめだが、プロジェクトごとにPoetryも入れないといけないので、ちょっとめんどいかもね。

## 仮想環境の構築
最初から構築する場合のコマンドの手順。
```terminal:$
$ poetry init
```

他に使うライブラリがあるなら、
```terminal:$
$　poetry add 使用するライブラリ
```

仮想環境に入って実行。
```terminal:$
$　poetry shell
```

## お疲れ様でした。
わからないところ、間違っているところ、もっといい方法がある場合は、コメントでもDMでも教えてください。
X(Twitter)から様々な表示を消す / フォローされています・知り合いのフォロワーをカスタムCSSで非表示にする

「X(Twitter)から いいねやRT、フォロワー数などいろんな表示をオフにしたい」と検索すると、以前は「おだやかTwitter」というブラウザ拡張機能の紹介をよく見かけました。
ですが最近のXアプデにより、おだやかTwitterは現時点では機能しなくなったようです。

代替機能を検索したところ、更によりたくさんの項目をコントロールできる拡張機能が見つかったので、Xにお悩みを持つ方向けにご紹介します。

# Control Panel for Twitter
![](https://github.com/insin/control-panel-for-twitter/raw/master/icons/icon128.png)

ほぼ全ての表示をコントロールできるほど高機能で、細かいオンオフに対応しています。
普通はこれ一つで間に合うかと思います。
設定項目は紹介しきれませんので、詳細を見てから入れたい方は、下記URLの開発元ページを日本語訳してみてください。
<a href="https://github.com/insin/control-panel-for-twitter/">https://github.com/insin/control-panel-for-twitter/</a>


# PCブラウザに「Control Panel for Twitter」を入れる

Chrome・Firefox・Safariなどで対応しているようです。
PCにおける拡張機能の入れ方は割愛します。検索すればすぐ入れられるでしょう。

---

# スマホブラウザに「Control Panel for Twitter」を入れる

これはひと手間です。スマホ版Chromeでは拡張機能は使えません。
拡張機能が使えるスマホブラウザを用意する必要があります。

### 【拡張機能が使えるスマホブラウザ】
- **Safari**（iPhone・iPad）
- **Firefox**（Android）
- **Sleipnir**（Android）

この辺はPC版でも有名どころで安心感があります。
iPhoneの方はそもそもSafariをお使いかもしれませんね。
自分はPCでも入れてる「Firefox」にしました。

### 【拡張機能対応サードパーティブラウザ】
- Orion（iPhone・iPad）
- Kiwi Browser（Android）
- Yandex Browser（Android）

興味があればまず調べてから導入するのがよいでしょう。有名どころにはない利点があるかと思われます。インストール容量が軽いとか。
Kiwiとか昔入れたことがあるようなないような…

---


いずれかの対応ブラウザをスマホにインストールできましたら、
ブラウザのメニューから「拡張機能」「アドオン」などを開いて、Control Panel for Twitterを検索・導入しましょう。

面倒ならGoogle検索で「ブラウザ名 Control Panel for Twitter」と入力してインストールページを探すのもアリです。

※Firefoxでは そのまま普通にPC版と変わることなく使えましたが、他では分かりません。
問題がある場合は、ブラウザのメニューに「PC版を表示する」的な項目があるはずなので、それをオンにすれば画面全体が縮小気味になりますが、表示されるのではないでしょうか。
（※後述のカスタムCSS拡張機能では、これが必要でした）

---

導入に成功されましたら、あとはよ～～く設定項目を見てチェックボックスをオン・オフしてみてください。
需要がありそうなのに一見分かりづらいものだけご紹介します。

## いいね、RT、FF数等を非表示にする設定
- 【エンゲージメントを減らす】→「メトリクスを非表示」に"チェック"

すると個別で　いいね、RT、リプライ、FF等の　個別チェックボックスが表示されます。


確認をせずブロックする・ミュートワードがすぐできるよう設定に追加するなど、そういう機能まで付いています。


---

# 「フォローされています」や「知り合いのフォロワー」も消したい 【PC・スマホ】

Control Panel for Twitterでも消せない項目に関して、自分は「カスタムCSSで消す」ことにしました。
ホームページ制作をされたことがある方なら、書いたことがある方もいらっしゃるのではないでしょうか？
WEBページの見た目の設定を自分で自由に書き換えることができる拡張機能です。

## Stylus などの カスタムCSS拡張機能を導入する

私は「Stylus」を使っていますが、同じ機能の拡張機能は色々あるはずです。
拡張機能の導入はPCでもスマホでも、先ほどControl Panel for Twitterを入れた時と全く同じです。
ただStylusはスマホで使うことは想定されていない拡張機能と思われるため、そのままでは操作ページがうまく表示されません。
ここでブラウザメニューから「PC版を表示する」にして、PC版と同等の画面にして操作しました。

**※スマホ・カスタムCSSで調べればもっと良い拡張機能がある気がします。各自検索してください。**

## コピペ用 カスタムCSS

とりあえず「フォローされています」と「知り合いのフォロワー」を消すだけのものです。（他にも消そうと思えば消せるものはいろいろあるでしょう。）


すみません、時間がないので、必要な中身だけ表記します。
興味のある方は「カスタムCSS」「Stylus」の使い方を調べて、Twitter.comを開いた状態から新規作成し、以下のコードを記入してみてください。

```css
div[data-testid="userFollowIndicator"] /* フォローされています */
,a[href*="followers_you_follow"] /*知り合いのフォロワー*/

{display: none;}
```


## 【Stylusを入れてる方向けの公開スタイル】
https://userstyles.world/style/14089/x
class.upload.php の XSS 脆弱性について

先日、CVE-2023-6551 として PHP のファイルアップロードライブラリ「class.upload.php」のクロスサイトスクリプティング脆弱性が発表されたので、使用しているプログラムを今一度確認しました。
幸い、外部ユーザーがアップロードする箇所では使用していなかったし、ちゃんと検証していたので、特に問題はありませんでした。

この脆弱性は、MIME タイプを評価するクラスが適正に機能しないことがあるというものです。

例えば、
```php
$handle = new Upload($file, 'ja_JP');
$handle->allowed = array('image/gif');
```
と設定していても、中には悪意のあるファイルが通過してしまうことがあります。
.html などがアップロードされてしまうと、開いたときに中に書いてあるスクリプトが実行されてしまう可能性があります。
※ プログラムはまだ読んでいません（おい）

## 対処法
まだ詳細は調査中とのことですが、とりあえず記載されていた対策をまとめておきます。
### レスポンスに想定される MIME タイプを指定する
「.html」で保存されたファイルは通常 HTML ファイルとしてレスポンスされますが、システム側で Content-Type ヘッダーで「image/png」を送っておけば、ブラウザではスクリプトが実行されずに済みます。
### アップロードできる拡張子を限定する（軽減策）
```php
$handle->allowed = array('png');
```
と直接拡張子を指定すると、それ以外の拡張子では保存されなくなります。

# 参考（順不同）
- https://nvd.nist.gov/vuln/detail/CVE-2023-6551
- https://github.com/advisories/GHSA-v6f4-jwv9-682w
- https://github.com/verot/class.upload.php/commit/befbccc2330b0ccb148fc87495896bd7b57f8c57
GCP Cloud Load Balancing機能

# GCPのCloud Load Balancingの概要と機能

## 目次
1. [概要](#概要)
2. [機能/詳細](#機能/詳細)
3. [まとめ](#まとめ)

## 概要
GCPのCloud Load Balancingは、Google Cloud Platform（GCP）上で提供される負荷分散サービスです。このサービスは、アプリケーションやウェブサイトへのアクセスを複数の仮想マシンやサーバーに均等に分散することができます。これにより、トラフィックの増減に柔軟に対応し、高可用性とパフォーマンスの向上を実現することが可能です。

Cloud Load Balancingは、GCP内にデプロイされた複数のリソース間でトラフィックを分散するために使用されます。特定のリクエストに対して最適なリソースへのルーティングを行い、セッションの保持やヘルスチェックなどの高度な機能を備えています。

## 機能/詳細
次に、Cloud Load Balancingの主な機能とその詳細について説明します。

### 1. HTTP(S) ロード バランシング
- HTTP(S)プロトコルを使用したウェブトラフィックを分散します。
- URLマップ、ホストルール、パスルールなどの設定により、トラフィックのルーティングを柔軟に制御できます。
- SSLオフロードにより、暗号化トラフィックの処理をアプリケーションの実行インスタンスに転送することができます。

### 2. TCP/UDP ロード バランシング
- TCPやUDPのプロトコルを使用したトラフィックを均等に分散します。
- グローバル負荷分散機能により、異なる地理的なリージョンに配置されたリソースへのトラフィックを効果的に分散することができます。

### 3. ネットワーク ロード バランシング
- L4ロード バランシングを提供し、TCP/UDPトラフィックを最も効率的な方法で分散します。
- Google ネットワークのスケーラビリティ、低遅延、高度なセキュリティを利用します。

### 4. 冗長性と高可用性
- Cloud Load Balancingは、バックエンドの容量を自動的に調整し、常に利用可能なリソースへのトラフィックを均等に分散します。
- ヘルスチェック機能により、正常に動作していないバックエンドリソースからのトラフィックを排除することができます。

### 5. グローバル負荷分散
- グローバル負荷分散機能により、地理的に分散した複数のリージョンに配置されたバックエンドに対するトラフィックを柔軟に制御できます。
- グローバル IP アドレスを使用し、トラフィックを最適なリージョンへ配信することができます。

## まとめ
GCPのCloud Load Balancingは、アプリケーションやウェブサイトへのトラフィックを複数のリソースに均等に分散するための負荷分散サービスです。HTTP(S) ロード バランシング、TCP/UDP ロード バランシング、ネットワーク ロード バランシングなどの機能を提供し、冗長性と高可用性を確保します。グローバル負荷分散機能により、地理的に分散したバックエンドへのトラフィックルーティングが可能となります。
Access denied for user 'sail'@'%' to database のエラー解消

# 1. はじめに
Laravel で sail を使って開発をしている際にハマったエラーについて、解決策をまとめます。
Laravel は、 PHP のフレームワークで、sail とは、Laravel での開発を簡単にスタートできるように準備された公式の Docker 環境です。sail を使用して複数のプロダクトを開発している方のお役に立てれば幸いです。

# 目次
[1.はじめに](#1-はじめに)
[2.使用環境](#2-使用環境)
[3.エラー発生状況](#3-エラー発生状況)
[4.試したこと](#4-試したこと)
[5.結論](#5-結論)


# 2. 使用環境
- MacBook Air : M2チップ / 16 GB
- PHP : 8.2.14
- Laravel Framework : 10.39.0
- My SQL ： 8.0.32
- PHP My Admin : 5.2.1
- Docker :
```
Client:
 Cloud integration: v1.0.35+desktop.5
 Version:           24.0.7
 API version:       1.43
 Go version:        go1.20.10
 Git commit:        afdd53b
 Built:             Thu Oct 26 09:04:20 2023
 OS/Arch:           darwin/arm64
 Context:           desktop-linux

Server: Docker Desktop 4.26.0 (130397)
 Engine:
  Version:          24.0.7
  API version:      1.43 (minimum version 1.12)
  Go version:       go1.20.10
  Git commit:       311b9ff
  Built:            Thu Oct 26 09:08:15 2023
  OS/Arch:          linux/arm64
  Experimental:     false
 containerd:
  Version:          1.6.25
  GitCommit:        d8f198a4ed8892c764191ef7b3b06d8a2eeb5c7f
 runc:
  Version:          1.1.10
  GitCommit:        v1.1.10-0-g18a0cb0
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0
```



# 3. エラー発生状況
Laravel の学習をしていて、sail を使用しプロジェクトを２つ作成しました。２つのプロジェクトを切り替えて作業しようとしたところ、My SQL のエラーが発生するとともに、PHP My Admin で表示される内容がおかしいことに気づきました。
### タイミング
`sail down`でプロジェクト A の sail を停止し、プロジェクト B のディレクトリに移動。`sail up -d`でプロジェクト B
 の sail を起動し、`localhost`にブラウザで接続した時。
### エラーメッセージ
データベースにアクセスできないようです。
```
lluminate \ Database \ QueryExceptionPHP 8.2.1410.38.2
SQLSTATE[HY000] [1044] Access denied for user 'sail'@'%' to database 'example_app'
SELECT count(*) AS aggregate FROM `articles`
```
![スクリーンショット 2024-01-04 12.52.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070527/54b08f20-8b6b-d335-98f6-3418e3c0a384.png)
※`example_app` はデータベース名です。

### PHP My Admin の挙動
プロジェクト B で sail を起動しているにも関わらず、`locahost:8080`に接続して PHP My Admin にログインすると、プロジェクト A のデータベースが表示される。

プロジェクト A の sail はもう停止しているのに、どうして A のデータベースに接続するんだろう？と、はてなでいっぱいでした。

# 4. 試したこと
- プロジェクト B の sail を一度停止して、起動し直す。
→改善せず。
- プロジェクト B の sail を停止し、プロジェクト A の sail を起動。改めて sail を停止する。
→改善せず。
- .env ファイルの DB 環境変数の確認
→正しく設定されている。
- マイグレーションの反映 `sail artisan migrate`
以下のエラー発生。
![スクリーンショット 2024-01-04 21.05.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070527/cbef90fb-a67b-3af2-8781-2df9d602cabb.png)

- ボリュームの削除 `sail down -v`
参考資料 : [Laracasts](https://laracasts.com/discuss/channels/code-review/access-denied-for-user-sail-at-to-database)
![スクリーンショット 2024-01-04 12.56.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3070527/4f7935b6-6208-ef2b-3a01-14a20f96f352.png)
-v オプションをつけたことで、 volume も削除されたことが分かります。
この後改めて`sail up -d`で sail を起動したところ、ようやくプロジェクト B のデータベースにアクセスすることができ、`localhost`もエラーなく表示されました。

# 5. 結論
Laravel sail で My SQL 周りの挙動がおかしい時には、ボリュームの削除で解決することがあると分かりました。ただ、ボリュームを削除するということは、データベースの中のデータが消えてしまうということなので、ご注意ください。特に問題ない場合は、ボリュームを削除した上で、また `sail artisan migrate` でテーブルを作成した上で、ダミーデータの挿入を行ってください。
ABC335・C - Loong Tracking

# 問題はこちら
https://atcoder.jp/contests/abc335/tasks/abc335_c

# 最初の回答
```
import copy

nq = list(map(int, input().split()))
n = nq[0]
q = nq[1]

Q = []
for i in range(q):
  Q.append(list(input().split()))

N = []
for i in range(n):
  N.append([i+1, 0])

#nは龍の位置リスト
def exe_1(n, C):
  tmp = copy.deepcopy(n)
  n = n[-1:] + n[:-1]
  match C:
    case "R":
      n[0][0] = tmp[0][0] + 1
      n[0][1] = tmp[0][1]
    case "L":
      n[0][0] = tmp[0][0] - 1 
      n[0][1] = tmp[0][1]
    case "U":
      n[0][0] = tmp[0][0]
      n[0][1] = tmp[0][1] + 1
    case "D":
      n[0][0] = tmp[0][0]
      n[0][1] = tmp[0][1] - 1
  return n

def exe_2(n, p):
  return " ".join(list(map(str, n[p-1])))

for i in range(q):
  query = Q[i]
  match query[0]:
    case "1":
      C = query[1]
      N = exe_1(N, C)
    case "2":
      print(exe_2(N, int(query[1])))
```
正しい回答は出せていた（はず）なのですが、TLEとなりました。

# 作り直した回答
作り直して正解をいただけたのがこちら。
```
n, q = map(int, input().split())

Q = [list(input().split()) for i in range(q)]
N = [(i+1, 0) for i in range(n)][::-1]

for i in range(q):
  if Q[i][0] == "1":
    x, y = N[-1]
    if Q[i][1] == "R":
      x += 1
      N.append((x, y))
    elif Q[i][1] == "L":
      x -= 1
      N.append((x, y))
    elif Q[i][1] == "U":
      y += 1
      N.append((x, y))
    elif Q[i][1] == "D":
      y -= 1
      N.append((x, y))
  else:
    print(*N[-int(Q[i][1])])
```
かなりスッキリしました。
実行時間も、2000msを超えていたところから579msとかなり短縮されました。

## 改善した点

### 変数の取得
```
nq = list(map(int, input().split()))
n = nq[0]
q = nq[1]
```
この部分です。
正直よくわかっていなかったので、リストを作ってそのi番目の要素を変数へ……としていたのですが。
```
n, q = map(int, input().split())
```
これで良いことに、振り返り中に気づきました。
何をやっていたのでしょうか……。

### リストの生成
```
Q = []
for i in range(q):
  Q.append(list(input().split()))

N = []
for i in range(n):
  N.append([i+1, 0])
```
ここも、もっと簡単に書けました。
```
Q = [list(input().split()) for i in range(q)]
N = [[i+1, 0] for i in range(n)][::-1]
```
これで良いですね。
処理の内容は同じなのですが、可読性がかなり違います。

### アルゴリズムの修正
最初は、龍の現在位置をリストに格納しようとしていたため、操作のたびにリストの要素の直接操作が（龍の長さ）回発生していました。
リストの要素の直接操作はかなりメモリを使うらしく、どうもここが実行時間を伸ばしていた原因のようです。
そこで、リストをリバースしてから操作後の位置をリストの末尾に追加していくことにしました。
リストはどんどん長くなっていくのが気持ち悪いですが、末尾の要素を毎回削除するよりも処理が軽くなります。
この辺りはアルゴリズム的な思考を身につけないといけないなと痛感しました……。

### データ型
龍の位置情報のデータ型を、リストよりも処理が軽いというタプルに変更。
リスト型で書いたときの実行時間は1048msだったので、改善幅は約500msと、無視できない差が生まれています。
実装で学ぶフルスタックWeb開発での学び#1

## 経緯
「[実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン](https://www.amazon.co.jp/%E5%AE%9F%E8%A3%85%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%95%E3%83%AB%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AFWeb%E9%96%8B%E7%99%BA-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E8%A6%96%E9%87%8E%E3%81%A8%E7%9F%A5%E8%AD%98%E3%82%92%E5%BA%83%E3%81%92%E3%82%8B%E3%80%8C%E4%B8%80%E6%B0%97%E9%80%9A%E8%B2%AB%E3%80%8D%E5%9E%8B%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%83%88%E3%83%BC%E3%83%B3/dp/4798179337)」という書籍でdockerコンテナ上での環境構築と開発をしていました。
dockerに触れることが初めてということと、この本がWindows環境での実装を想定していたことから、Macでも学習できるように色々と工夫をしました。
その備忘録です。

Macでの環境構築で参考にした記事
[Docker+NextJS+Django+PostgreSQLで環境構築してみる](https://qiita.com/sinnlosses/items/1e60f89dc3b347a2f3c0#2-%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89)
[モダンなWebアプリ(Django, Next.js, Docker, AWS)を開発する #環境構築編](https://qiita.com/azumarions/items/2b7f9730196e943134f6#:~:text=%E3%82%A4%E3%83%B3%E3%83%88%E3%83%AD%E3%83%80%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E7%B7%A8%E3%81%A7%E3%81%AF%E3%80%81docker%2Dcompose%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6Django%2C%20Next.js%2C%20MySQL%2C%20Nginx%E3%81%AE%E7%92%B0%E5%A2%83%E3%82%92%E5%90%8C%E6%99%82%E3%81%AB%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%89%E3%82%8C%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%84%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)
実際に作成したMacでの開発環境のリポジトリ↓

https://github.com/tiger9810/web-development

## Next.js上にAPIを用意する
P.129でAPIを作成する章でよく分からないリダイレクトに引っかかったので、その問題の内容と解決方法です。

### 問題
APIをNext.jsのサーバーサイド機能を使用して作成したのち、作成したapiを確認するために[http://localhost:3000/api/hello](http://localhost:3000/api/hello)にアクセスしようとすると、[http://host.docker.internal:8000/api/hello](ttp://host.docker.internal:8000/api/hello)にリダイレクトされるというもの。

### 原因
P.90でnext.config.jsファイルを以下のように変更したこと。
frontend/next.config.js
```
/** @type {import('next').NextConfig} */
const nextConfig = {
    async redirects() {
        return [
            {
                source: '/api/:path*',
                destination: 'http://host.docker.internal:8000/api/:path*',
                permanent: true,
            },
        ]
    }
}

module.exports = nextConfig
```

### 解決方法
以下のようにコメントアウトすることで、リダイレクトされないようになった。
frontend/next.config.js
```
/** @type {import('next').NextConfig} */
const nextConfig = {
    // async redirects() {
    //     return [
    //         {
    //             source: '/api/:path*',
    //             destination: 'http://host.docker.internal:8000/api/:path*',
    //             permanent: true,
    //         },
    //     ]
    // }
}

module.exports = nextConfig
```

### 変更後
ブラウザのキャッシュを削除してから、Dockerの再起動する。
```
docker-compose down
docker-compose build
docker-compose up -d
```

### 解決後
以下のようにJSONが返却される。
![スクリーンショット 2024-01-07 16.18.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215907/32ad7535-db3d-9c6d-8325-c0bec9f45131.png)
ぼくのかんがえた最強(?)のReactディレクトリ構成

# はじめに
あけましておめでとうございます。
今回は、私なりに色々考えた中規模程度のReactプロジェクトを開発する際のディレクトリ構成について書いていきたいと思います。

## 前提となる環境・パッケージなど
### 開発環境
- React 18.2.0
- TypeScript 4.9.5
### ディレクトリ構成に影響のあるパッケージ
- Recoil (状態管理)
- React-hooks-form・zod (入力フォームの状態管理とバリデーション) 
- React-router-dom (ルーティング)

## ディレクトリ構成図

```txt
└── src
    ├── features
    │   └── Auth
    │       ├── hooks // Auth/Pagesで使われる自作のhooks
    │       │   ├── useLogin.ts
    │       │   └── useRegister.ts
    │       ├── components //Auth/Pages内でしか使われないコンポーネントを置く
    │       │   └── PasswordForm
    │       │       ├── PasswordForm.tsx
    │       │       ├── PasswordForm.stories.tsx
    │       │       └── passwordForm.module.css
    │       ├── pages
    │       │   ├── Login
    │       │   │   ├── LoginPage.tsx // コンポーネントを組み合わせたPage全体の状態、レイアウトを記述する
    │       │   │   └── loginPage.css.module.css
    │       │   └── index.ts // Auth/Pagesの中のPageを一括でエクスポート
    │       ├── (atom.ts) // RecoilのAtomを管理
    │       ├── (selector.ts) // 同じくSelectorを管理
    │       ├── (auth.constant.ts) // ドロップダウンメニューの項目など定数を保管
    │       ├── (auth.type.ts) // AuthのPage内でしか使われないType(interface)を保管
    │       └── (auth.validation.ts) // zodのバリデーションスキーマを保管
    ├── components
    │   ├── elements // 汎用的なコンポーネント
    │   │   ├── Button
    │   │   │    ├── Button.tsx
    │   │   │     ├── button.module.css
    │   │   │     └── button.stories.tsx
    │   │   ├── TextField
    │   │   │   ├── TextField.tsx
    │   │   │   ├── textField.module.css
    │   │   │   └── textField.stories.tsx
    │   │   └── index.ts // elements配下のコンポーネントを一気にexport
    │   └── layouts // 汎用的なレイアウトされたコンポーネント
    │       └── NavigationBar
    │          └── NavigationBar.tsx
    │               └── navigationBar.module.css
    ├── routes
    │   └── index.ts　// pagesのエクスポートをまとめて、ログインしてるかそうでないかで分けた<Routes/>をエクスポート
    └── common
        ├── types // 型情報を管理
        │   └── user.ts
        ├── utils // 汎用的に使える関数を管理
        │   └── localStorageManager.ts
        └── messages.ts // バリデーションのメッセージなどを格納
```

こちらの構成図は[Ascii Tree Generator](https://marketplace.visualstudio.com/items?itemName=aprilandjan.ascii-tree-generator)を使用しました😎

では、要点の解説をしていきます。

### features
機能ごとにディレクトリを切ります。
ログインや新規登録などであれば`/Auth`、プロフィール登録、表示などであれば`/User`のようにします。
()がついているファイルは、必要な時のみ作成するものです。

### features/〇〇/pages
〇〇の機能に属するページ全体のUIを記述した`.tsx`ファイルを置きます。
`/Auth`であれば、ログイン画面や新規登録のUIを記述したファイルを置きます。

### features/〇〇/pages/index.ts
`pages`以下のページをまとめてエクスポートします。

### features/〇〇/hooks
自作のhooksを置いておきます。`/Auth`であるなら`useLogin`、`useLogout`などです。

### features/〇〇/components
その機能でしか使われないコンポーネントを置いておきます。
パスワードを入力するのに特化したTextFieldなど、汎用的でなく、機能が限定されたコンポーネントをここに入れます。

### components/elements
ButtonやTextFieldなどの汎用的なコンポーネントをおきます。複数のfeaturesを跨いで使用するコンポーネントと言い換えてもいいです

### components/layout
上記の`components/elements`を組み合わせた、汎用的なコンポーネントをおきます。
ヘッダーやフッターなどが該当します。

### routes
features/〇〇/pagesでエクスポートされたページを集めて、ログイン、非ログインなどの状態により分けられた<Routes/>をエクスポートします。

### common
汎用的に使用される型情報、定数、バリデーションメッセージ、ユーティリティ関数などを格納しています。

## まとめ
わりとわかりやすい形にまとめられたと思います。
現状これで困っていることはあまりないですが、また変更があれば追記していこうと思います。

また、ここはこうした方がいいなどご意見あればぜひお願いしたいです!(実は半分それが目的で記事を書きました)質問等も遠慮なくしていただければと思います。
では、ここまでお読みいただきありがとうございました!
実測データをモデリングする意義ってなに？

# モデリングの意義

実測データをモデリングしてなんか意味があるのって問われた。これまであまりにも当たり前のようにモデル化したり回帰分析してるので、意義について問われると、グホーッってなります

学生実験ならレポートが書けます、卒業研究なら卒論が出せます、お賃金をもらっているひとなら論文が出せます。これが意義です。そう答えるわけにも行かないだろうね。

## 開発フェーズ

たとえば開発フェーズに入って設計とかでシミュレーターとかいじくるようになったら、モデリングで得た母数を入力することとなるから・・・おおっ意義が見いだせました！ってなるでしょうが、そういうことをやったことがありません。

## 実測が混沌としてれば

むかしむかし話題になった長先生のデータみたいに実測が混沌としていてモデリングや回帰分析しないと情報が引き出せないような場合はある意味自明でしょうが、べつに逆問題をニュートン法で逐一解けばいいですって場合は、どうでしょうか？どうやって説明すればいいのでしょうか
Python3エンジニア認定基礎試験 勉強してみた5

# 「Python3エンジニア認定 ［基礎試験］」 合格を目指します!

使用教材：
・Pythonチュートリアル第4版 --オライリー・ジャパン--
・徹底攻略Python3エンジニア認定基礎試験 問題集 --impress--

前回の記事：
・[Python3エンジニア認定基礎試験 勉強してみた1](https://qiita.com/SHIRYU_0515/private/80be254354edc001258b)
・[Python3エンジニア認定基礎試験 勉強してみた2](https://qiita.com/SHIRYU_0515/private/84910ca285536e792ffe)
・[Python3エンジニア認定基礎試験 勉強してみた3](https://qiita.com/SHIRYU_0515/private/a267f9143b7dc1c92c21)
・[Python3エンジニア認定基礎試験 勉強してみた4](https://qiita.com/SHIRYU_0515/private/ca084cfcda58987806ca)

こんにちは！
徹底攻略Python3エンジニア認定基礎試験 問題集を解きました。

第9章 **例外処理**
4問中2問正解
第10章 **クラスとオブジェクトの操作**
6問中2問正解

以下間違えた箇所の確認です。

## 見直し
**【SyntaxError】**
Pythonの文法として正しくないコードを実行すると、発生する構文エラー。
```ruby:SyntaxErrorになるコード例
int("onetwothree")
```
**【TypeError】**
意図していないデータ型が与えられた場合や、データ型が対応していない演算を行った場合に発生する。
```ruby:TypeErrorになるコード例
answer = 100/"0"
```
**【ValueError】**
意図していない値が与えられた場合に発生する。
```ruby:ValueErrorになるコード例
a = "1,000' #先頭と末尾の記号が異なる
print(int(a))
```
**【KeyError】**
ディクショナリに存在しないキーを参照しようとすると発生する。

**【NameError】**
未定義の変数（または関数）を使用すると発生する。

**【raise文】**
任意の例外を発生させられる。
```ruby:ValueErrorを送出する
try:
    raise ValueError("ValueErrorです") #raise文でValueErrorを送出
except ValueError as error:
    print(error)
```
**【type()関数】**
引数に指定したオブジェクトの型を返す関数です。
```ruby:オブジェクトの型を調べる
print(type("Python")) #<class 'str'>と表示される
print(type(123)) #<class 'int'>と表示される
```
**【isinstance()関数】**
オブジェクトの型やクラスを判定する。
```ruby:str型か否かを判定する。
print(isinstance("Python", str)) #Trueと表示される
```
```ruby:int型か否かを判定する。
print(isinstance("Python", int)) #Falseと表示される
```
【C++】アルゴリズム初学者によるSTLまとめ

# 目的

私はC++でアルゴリズムの修行を行っており、使用したSTLを備忘録の意味も込めて簡単にまとめることにしました。  
そのため本記事は随時アップデート予定です。 

もし、読者の方で「これも知ってると便利だよ」「その理解は間違ってるよ」などのコメントがありましたら、教えていただけると幸いです。(使用目的によると思いますが。)

# はじめに

## STLとは

STL(Standard Template Library)とはC++で用意されている標準ライブラリのこと。テンプレートクラスやテンプレート関数から構成されており、以下のようなものがある。

- コンテナ(vectorなど)
- イテレータ
- アルゴリズム(sortなど)

STLの詳細に関してはChatGPTに聞いてみたので、[【C++】ChatGPT3.5にSTL、イテレータ、コンテナについて聞いてみた](https://qiita.com/yankee2023/items/39d44b7a194d7e04fb45)を参照。

## 参考

- [STL入門](http://kaitei.net/cpp/stl-intro/)

# STL

- [deque](#1.-deque)
- [pair](#2.-pair)

## 1. deque

double-ended-queueの略で「デック」と呼ぶ。vectorと同じ動的配列クラスで"先頭・末尾"への要素追加・削除も`O(1)`と高速に行える。先頭・末尾の両方へアクセス可能なので「両端キュー」とも呼ばれる。

AtCoder 365 [C - Loong Tracking](https://atcoder.jp/contests/abc335/tasks/abc335_c)で出題。

### dequeとvectorの違い

違いは**先頭要素への操作が可能かどうか**である。  
**vector**は`push_back()`, `pop_back`で配列の末尾に要素を追加・削除ができる。**deque**は前述に加え、`push_front()`, `pop_front`を使用して先頭への操作可能である。

### 参考

- [C++ 両端キュー std::deque 入門](http://vivi.dyndns.org/tech/cpp/deque.html)
- [deque | Programming Place Plus　C++編【標準ライブラリ】　第７章](https://programming-place.net/ppp/contents/cpp/library/007.html)

## pair

2つの型の値をひとまとめにして扱うことができる。0番目の要素を`first`, 1番目の要素を`second`でアクセス可能。初期化も可能。

### 参考

- [cpprefjp - C++日本語リファレンス std::pair](https://cpprefjp.github.io/reference/utility/pair.html)
- [pair の使い方](http://stlalv.la.coocan.jp/pair.html)
- [ゼロから学ぶC++ pair](https://rinatz.github.io/cpp-book/ch03-04-pairs/)
製造業のDXでできること

## 参考サイト
* [在庫管理システム](https://soft.mile-stone.co.jp/original-product/hazai/)
* [端材管理](https://www.techs-s.com/iot-idea/vol1-45)
* [外部サービスの活用](https://www.pref.kanagawa.jp/documents/75083/1kamisiro.pdf)
paizaラーニング解答: 算術・代入演算メニュー[Ruby]

# 算術・代入演算メニュー
https://paiza.jp/works/mondai/arithmetic_substitution_op/problem_index?language_uid=ruby
## STEP: 1 足し算
```ruby
puts 1_231 + 5_178
```

## STEP: 2 引き算・掛け算
```ruby
a, b = gets.split.map(&:to_i)
puts "#{a - b} #{a * b}"
```

## STEP: 3 割り算
```ruby
a = 437_326
b = 9_085 
puts "#{a / b} #{a % b}"
```

## STEP: 4 掛け算 2
```ruby
a, b, c = gets.split.map(&:to_i)
puts "#{a * a} #{b * b + c * c}"
```

## STEP: 5 累乗
```ruby
a, b, c = 202, 134, 107
puts ((a + b) * c) ** 2
```

## FINAL問題 累乗 2
```ruby
a, b, c, d = gets.split.map(&:to_i)
puts (((a + b) * c) ** 2) % d
```

## STEP: 1 代入演算 1
```ruby
n = 0
n += 3_286
n *= 4_736
n %= 12_312
puts n
```

## STEP: 2 代入演算 2
```ruby
a, b, c = gets.split.map(&:to_i)
n = 0
n += a
n *= b
n %= c
puts n
```

## STEP: 3 代入演算 3
```ruby
n = 10_000
n /= 361
n %= 28
puts n
```

## FINAL問題 代入演算 4
```ruby
a, b = gets.split.map(&:to_i)
n = 10_000
n /= a
n %= b
puts n
```