OmniAICreator/Qiita-1.07M huggingface dataset:
TypeScript勉強してみた

# はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。:triumph:
いろいろな記事を参考にさせてもらっています。:bow_tone2:
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。:fist:

# 今回の目的
TypeScriptがわからなくてやばたにえんなので、ハンドブックで学んでみました。

# 使用したものや事前準備
・Macbook Pro
・Visual Studio Code

# 主に参考にさせていただいた記事
https://www.typescriptlang.org/docs/handbook/intro.html

https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html


# JavaScriptで行われない静的チェック
JavaScriptでは実行するまで、コードミスを見逃していても予期せぬ動作やエラーが発生するまでわからない時がある。

```js
// 型違いの比較
if ("" == 0) {
  // It is! But why??
}
// heightのスペルミス
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
```
typeScriptはコードの問題を実行前に警告する。

```typescript
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

//Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?
```
TypeScriptは型以外にも構文等に対してもエラーチェックを行う。

### 構文
）が欠落しているエラー
```typescript
let a = (4
//')' expected.
```

### 種類
配列による無駄な除算
```typescript
console.log(4 / []);
//The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
```

# TypeScriptの動作保持とポイント
・TypeScriptはJavaScriptで書いたコードの動作をTypeScriptエラーが出ても動作できるようにしている。
・TypeScriptはコンパイル時の型チェッカーを備えたJavaScriptのランタイムである。
・TypeScriptの型チェックは形状に焦点を当てている（ダックタイピング）

# 型推論
下記の場合、変数「helloworld」はstringと認識される
```typescript
let helloWorld = "Hello World";
```

## 型定義

オブジェクトに対する型定義配下のように行います。

JavaScript
```javascript
const user = {
  name: "Hayes",
  id: 0,
};
```
typeScript
```typescript
interface User {
  name: string;
  id: number;
}
//または
type User = {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0,
};
```

下記のようにidにstringを定義するとエラーが発生する。
```typescript
const user: User = {
  name: "Hayes",
  id: "0",
};
// Type 'string' is not assignable to type 'number'.
```

interfaceまたはtypeを指定することにより、引数や戻り値に型指定ができる
```typescript
function deleteUser(user: User) {
  // ...
}
 
function getAdminUser(): User {
  //...
}
```

## タイプの合成

### ユニオン
受け取れる値を制限する
```typescript
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

// WindowStatesに書いたもの以外はエラー
const a:WindowStates="open"
```

受け取れる型を複数定義
```typescript
function getLength(obj: string | string[]) {
  return obj.length;
}
```

## 変数の型を確認
```typescript
//string
typeof s === "string"
//number
typeof n === "number"
//boolean
typeof b === "boolean"
//undefined
typeof undefined === "undefined"
//function
typeof f === "function"
//Array
Array.isArray(a)
```

## ジェネリック
```typescript
// 配列の型を定義
type StringArray = Array<string>;

// 関数で受け取る型を抽象化することも可能
interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}
// stringに定義
declare const backpack: Backpack<string>;
```

# 終わりに
繰り返し読んでさわりの部分を覚えていきたいです。

# 次回の予定
ここから

https://www.typescriptlang.org/docs/handbook/2/basic-types.html
WSL2 + ubuntuインストールで躓いたこと 0x8007019e

## 背景
大学にてLinux周りのTAを担当することになり、自身のPCで演習用環境を構築しようとしていた。
大学推奨OSはmacであるが、いかんせん貧乏学生なのでWindowsOS PCを使用している。(intell ? 知らない子ですね。AMDしか知りません。)

## この記事の目的
環境構築の際にいくつかの記事やサイトを参考にさせていただいたが、Windows10での記事が多く、windows11バージョンに勝手にアップデートしようと思った。
参考記事 : https://qiita.com/kekenonono/items/1ddbb5a1125d496c0010

## WSLを有効にする
コントロールパネルを開く
開き方も様々あると思いますが、[Windows] + [R]キーを押して'control'と入力するとスマート(?)に開くことができます。

![スクリーンショット 2024-04-16 000248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770972/2593688b-120c-dee3-0116-a05d874d0218.png)

メニュー横の検索窓にコントロールパネルとべた書きしても開けますが、格好がつきませんね(個人の意見です)。

![スクリーンショット 2024-04-16 000024.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770972/51854a5c-9c99-b018-0de7-2b1aa5a1dc25.png)

コントロールパネルが開いたら'プログラム'を選択

![スクリーンショット 2024-04-16 000752.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770972/03824ebc-b6cc-3d3d-3008-7e2401b1e09f.png)

'Windowsの機能の有効かまたは無効化'を選択

![スクリーンショット 2024-04-16 000818.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770972/7fcbb8f4-a9cf-965b-d50d-7572c66bc279.png)

'Linux用Windoesサブシステム'にチェックを入れて'OK'を押す。

![スクリーンショット 2024-04-16 000910.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770972/30a0c337-b370-2391-a151-c552d442037d.png)

するとインストールが始まって完了次第、再起動を要求されるので再起動する。
Windows10記事との違いはこれ以降もうないのでそれを参考にubuntuのインストール等をしてください。

## 躓いたこと
再起動を要求されて再起動したときに未保存のtxtファイルを開いていたとかで以下のような画面が出ました。
Windowsを使用している方であれば見慣れた画面だと思います。
私はここで再起動をキャンセルしてtxtファイルを保存した後、手動で再起動をしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770972/38a2218c-0fe8-f2c3-c102-86343607ab83.png)
画像 : https://faq.nec-lavie.jp/qasearch/1007/app/servlet/qadoc?QID=019380

その結果ubuntuを起動したときに以下のようなエラーが吐き出されました。
```
Installing, this may take a few minutes...
wslregisterdistribution failed with error: 0x8007019e
error: 0x8007019e linux ? windows ??????????????????

Press any key to continue...
```

ubuntu君にツイッタラー並みの煽りを受け泣きそうでした。
インターネットで解決方法を検索してもwslのインストールができていないという回答ばかりでwslのインストールを終えた身としては??????????????????という状態でした。

## 原因
結果としてインターネット上にの指摘は正しく、wslのインストールができていなかったのが原因でした。正確にはインストールに失敗していたのだと思われます。
先ほど紹介したインストール手順は正しいものですが、再起動画面でtxtファイルの未保存を指摘されて再起動をキャンセルしたのが原因だったと思います。
完全な憶測ですが、再起動をキャンセルするとインストールが正常に行われないようです。ファイルはあらかじめ保存しておきましょう。(自動保存しよう)
しかし、この記事にたどり着いているということは再起動をキャンセルしてしまった人かもしれませんね。解決方法を記載しておきます。

## 解決方法
以下のステップで解決できました。
1. WSLを有効にしたときと同じ手順で有効になっているWSLを無効にする(チェックを外す)
2. OKを押して再起動を要求されるので再起動する(もちろん再起動を妨げる存在はスマッシュしておきましょう。)
3. 再起動後、再度WSLを有効にする
4. OKを押して再起動を要求されるので再起動する(もちろん 以下略)

要するにWSLの有効化をやり直すということですね。
大した記事でなくてすみません。
【Zabbix5.0】 における MySQL監視設定手順

# 環境
監視する・される2台ともVagrantで構築

* 監視サーバー側
    * CentOS7
    * zabbix-server 5.0
* 監視ホスト側
    * CentOS7
    * MySQL 8.0
    * zabbix-agent 5.0

# 監視ホスト側の設定
要するにこちらを参照。
https://github.com/zabbix/zabbix/blob/release/5.0/conf/zabbix_agentd/userparameter_mysql.conf

## Zabbix用のMySQLユーザー作成
```
# mysql -u root -p<password_root>

mysql> CREATE USER 'zabbix'@'localhost' IDENTIFIED WITH mysql_native_password BY <password_zbx>;
Query OK, 0 rows affected (0.16 sec)

mysql> 
mysql> 
mysql> GRANT ALL ON *.* TO 'zabbix'@'localhost';
Query OK, 0 rows affected (0.02 sec)

mysql> 
mysql> 
mysql> flush privileges;
Query OK, 0 rows affected (0.01 sec)

mysql> exit
Bye

```

※【注意】このとき、ユーザーが接続するhostを'%'で作成してしまうと
　　MySQLの接続元ホスト探しの仕組み上、匿名アカウント'@localhost'に接続されてしまう。

> MySQLはまず最初に接続元ホストの検証を行います。"user1@localhost"の要求に対してて"''@localhost"と"user1@%"を比較する際、ホスト名が最長マッチする"''@localhost"が優先されるのです。

https://gihyo.jp/dev/serial/01/mysql-road-construction-news/0021


##　必要ファイル設定
* /var/lib/zabbix/.my.cnf
```
[client]
user=zabbix #zabbix用に接続するユーザー
password=<password_zbx>

```

* /etc/zabbix/zabbix_agentd.d/userparameter_mysql.conf
Zabbixから叩くコマンドの読み替えを記載している。
`$1`, `$2` といった引数はZabbix側で指定する。

```
UserParameter=mysql.ping[*], mysqladmin -h"$1" -P"$2" ping
UserParameter=mysql.get_status_variables[*], mysql -h"$1" -P"$2" -sNX -e "show global status"
UserParameter=mysql.version[*], mysqladmin -s -h"$1" -P"$2" version
UserParameter=mysql.db.discovery[*], mysql -h"$1" -P"$2" -sN -e "show databases"
UserParameter=mysql.dbsize[*], mysql -h"$1" -P"$2" -sN -e "SELECT SUM(DATA_LENGTH + INDEX_LENGTH) FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA='$3'"
UserParameter=mysql.replication.discovery[*], mysql -h"$1" -P"$2" -sNX -e "show slave status"
UserParameter=mysql.slave_status[*], mysql -h"$1" -P"$2" -sNX -e "show slave status"
~                                                                                  
```

* Zabbix Agent サービス再起動
```
# systemctl restart zabbix-agent
```

#　Zabbixサーバーでの設定
* Configuration > Hosts > 当該ホスト > Templates
![スクリーンショット 2024-04-16 0.34.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628851/3e70bf9b-e99f-6123-dd74-d665646d2ecf.png)

* Configuration > Hosts > 当該ホスト > Macros
![スクリーンショット 2024-04-16 0.35.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628851/98e83414-87ee-2674-9790-23db64fdf368.png)

***
これで拾えるはず。
JavaScript ではほとんどのものはオブジェクト

# 大きく分けて2つのデータ型がある
・一度作成したら値を変更できないプリミティブ型のデータ
・作成した後も変更できるオブジェクト型のデータ
## プリミティブ型
https://developer.mozilla.org/ja/docs/Glossary/Primitive

・オブジェクトではなく、メソッドを持たない
・既存の値を変更できないイミュータブルな値

https://developer.mozilla.org/ja/docs/Glossary/Immutable

・7種類のデータ型
1　文字列（string）
2　数値（number）
3　長整数（bigint）
4　理論値（boolean）
5　undefined（undefined）
6　symbol（symbol）
7　null（object）


## オブジェクト型
https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88

・プリミティブ型以外のもの
・既存の値を変更できるミュータブルな値

https://developer.mozilla.org/ja/docs/Glossary/Mutable

# なぜプリミティブ型でメソッドが使えるのか
自動的にそれぞれのプリミティブ値に対応するラッパーオブジェクトへ変換してくれるため
## ラッパーオブジェクト
本来オブジェクトではない型の値を、自動的にオブジェクトで包んであたかもオブジェクトとしての振る舞いを持たせる機能

```javascript
//プリミティブ値もオブジェクトのように扱える

const arr = ["tom", "jerry", "spike", "tyke"];
console.log(Object.keys(arr)); // ['0', '1', '2', '3']
console.log(Object.values(arr)); // ['tom', 'jerry', 'spike', 'tyke']

const str = "hello";
console.log(Object.keys(str)); // ['0', '1', '2', '3', '4']
console.log(Object.values(str)); // ['h', 'e', 'l', 'l', 'o']

const obj = {name: "tom", age: 5};
console.log(Object.keys(obj)); // ['name', 'age']
console.log(Object.values(obj)); // ['tom', 5]
```
ST7789V2にアイテムを表示する(drawBitmap)(StampS3)


x 過去ログを見よ!!

目的
カラー液晶のテスト

![o_cop275.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/978f7f32-62ab-74e6-f464-e53c0641c520.jpeg)


![o_coq038.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/ab8637d5-9ff2-656d-0612-613f5884553c.jpeg)


```c++


//spi_st7789_bitmap_M5S3_1


//ヘッダーファイル
#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7789.h> // Hardware-specific library for ST7789
#include <SPI.h>


//定義
#define TFT_CS    1
#define TFT_RST   3
#define TFT_DC    5
#define TFT_MOSI  7
#define TFT_SCLK  9

Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST);

// ビットマップデータ
uint8_t databytes[8] = 

{

0b01100110,
0b10101111,
0b10111111,
0b11011111,

0b01111110,
0b01111110,
0b00111100,
0b00011000

};


//初期化
void setup() {

  //240x240の液晶を使用する。
  tft.init(240, 240);           // Init ST7789 240x240

  // 画面表示をクリア
  tft.fillScreen(ST77XX_BLACK);

}//setup


//メインループ
void loop() {

  //ビットマップの表示
  tft.drawBitmap(0, 0, databytes, 8, 8,  ST77XX_RED);

  delay(1000); //1秒待つ

}//loop


```
URLのクエリパラメータを置き換えたい

毎回必要な時に調べ直しているので備忘録。

Uri.BuilderでGETのパラメータをreplaceできるメソッドがあると思いこんでいるも見当たらないため、調査に毎回時間を浪費していた。

以下の手順でやりたいことは実現出来る。

1. 全てのqueryParamsを取得できるようにURLをUri.parseする
1. Uri.Builder.clearQuery()で全てのqueryParamsを削除する
1. 置き替えたいkeyが存在していたら置き替えたい値をUri.Builder.appendQueryParameterで新規追加する
1. 上記3以外はそのままUri.Builder.appendQueryParameterで新規追加する

■置き替え前後のURLは以下
クエリパラメータ置き替え前URL: https://exsample.com/?key=value&key2=value2
クエリパラメータ置き替え後URL: https://exsample.com/?key=newValue&key2=value2

■実ソースは以下

```kotlin
val KEY = "key"// 置き替えたいパラメータのKey
val newValue = "newValue"// 置き替えたいパラメータのValue
val url = "https://exsample.com/?key=value&key2=value2"

val replacedUrl: String = url.let {
    val uri = Uri.parse(it)
    
    // Uri.Builder.clearQuery()で全てのqueryParamsを削除
    val uriBuilder = uri.buildUpon().clearQuery()

    // 全GETパラメータを生成しなおし
    uri.queryParameterNames.map {  queryParam ->
        if (queryParam == KEY) {
            // 置き替えたいKeyだったら新しいValueで新規生成
            uriBuilder.appendQueryParameter(queryParam, newValue)
        } else {
            // 置き換え不要のKeyはそのまま元から入っていたValueで新規生成
            uriBuilder.appendQueryParameter(queryParam, getQueryParameter(queryParam))
        }
    }
    uriBuilder.build().toString()
}

// 結果表示
Logger.d("replacedUrl: $replacedUrl")
```

以上。
Aurora DB インスタンスの削除

- クラウドを普段触っていく中での作業を、メモベースですが書いて行こうと思います
- あまりこらずに書いていく予定です

# ゴール
- 最近お客さんがaws 費用を気にし始めたため、不要なaws リソースを削除していく作業が発生

# 現在のRDS の構成
![名称未設定3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551379/020ecfa7-f7e9-c920-691c-dbef063aa610.jpeg)
- インスタンスサイズも小さいので、まぁいいやでこの構成に


- ステージング環境でAurora の複数台構成はやはり不要となり、リードレプリカを削除することに

# アプリケーション構成
- ALB -> ECS(Fargate) -> RDS
- Fargate にはPHP が動いていて、Laravel で書かれている

# 削除までに対応したこと
- 画面にユーザ・管理画面があり、それぞれのLarabel でどのようにDB を参照しているか確認
- ユーザ画面
    - リードレプリカを参照している
- 管理画面
    - リードレプリカを参照していない
- ユーザ画面を作ったバックエンドエンジニアにDB の参照方法を確認
    - 環境変数を参照していることを確認
- 次にFatgate で動いているタスクの環境変数の確認
    - Systems Manager のパラメータストアで管理していることを確認
        - パラメータストアで定義しているエンドポイントも、Aurora クラスタが払い出してくれているエンドポイントを使っていることを確認
- ここまでの確認で、リードレプリカを削除してもLaravel 側の変更なしで行けることを確認

# リードレプリカの削除
- aws リソースは、Terraform で管理されているためTerraform を修正してapply
    - 各種確認はしているけどやはり削除は怖い...

# 削除後の確認
- `terraform plan`を実行して、意図しない差分が出ていないかを確認
- aws マネージメントコンソールで確認
    - ![スクリーンショット 2024-04-15 23.24.58.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551379/bfdf4084-3c88-b187-37fa-6e02a83fb400.jpeg)
    - 削除されている↑
- dig でIP の確認
    - 削除前
        - ![スクリーンショット 2024-04-15 23.32.21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551379/2abaa008-f5d5-c20d-b7a7-38cf02f889e2.jpeg)
    - 削除後
        - ![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551379/651108b4-6db1-9eeb-4516-5862a0102837.png)

    - IP が同じになっていることを確認
- ここまでインフラサイドの確認をして、ディレクションしている人にざっとサイトチェックを依頼

# まとめ
- 「この構成無駄だろう」と少しでも思ったら、自分一人では決めず周りに相談
    - ロンチしてからこう行った作業は流石に嫌なので...
- アプリケーションの構成を把握して、チェックするポイントを把握する
    - 自信がなければPHP を書いた人たちにもヒアリング

# まとめのまとめ
- このくらいの記事は、あまり時間をかけず書けるようになりたい
【React】任意の場所に要素をレンダリングする方法

`createProtal`を使用するとコンポーネントを指定した要素の子要素としてレンダリングできます。

`createProtal(レンダリングする要素, レンダリング先の要素）`のように使用します。
以下のように記述すると `Modal` は `body` の子要素としてレンダリングされます。

```jsx
import { createPortal } from 'react-dom'
import { Modal } from './components/modal'

function Sample() {
  return (
    <div style={{ border: '2px solid black' }}>
      {createPortal(
        <Modal />,
        document.body
      )}
    </div>
  )
}

```
プロジェクト管理ツールメモ

# プロジェクト管理ツール
調べたプロジェクトツールのあれこれをメモしていく記事。

## backlog
https://backlog.com/ja/lp/?argument=ejrlGK31&said=4&ca=19698264666&gr=163540090790&cr=695330995919&kw=プロジェクト管理%20ツール&nw=g&mt=b&mid=gg&device=c&pl=&tg=kwd-323004697900&gad_source=1&gclid=CjwKCAjwoPOwBhAeEiwAJuXRh0dGZURGAfySZJzA2Ah1FaU3jqt_zehY-Sm_q7DGqpkAOeS8kNtG9xoCbXoQAvD_BwE
### 主要機能
- ガントチャート
    - 全メンバーの進行状況を確認できる
- マイルストーンの設定・可視化
- 課題と担当の可視化
    - 誰がボールを持っているかをすぐに確認できる
- 課題へのコメント
- ファイル共有とコメント
- Wiki機能
- スマホでも操作可能
- 外部ソフトとの連携
    - Slack, Jira, iOSアプリ, API etc
- Git利用
    - GitHub連携も可能ぽい、LambdaとかでAPI実行が必要かも？（https://qiita.com/chovin/items/2b423754e14e121f187f）
    - BacklogとGitHubの比較（https://www.zu-min.com/archives/1162）
    - BacklogのGitにはGitHub Actions的機能がないらしい
    - GitHub Actions: CI/CDのプラットフォーム (https://docs.github.com/ja/actions/learn-github-actions/understanding-github-actions)
Flutter で Android や iOS のアプリアイコンを一括で変更したい！

# これなに
クロスプラットフォームなんだから Manifest だったり Assets.xcassets だったりと個別に設定やらないでアプリアイコンを一発で設定くらいできるでしょう。
そんな思いから何かないかなあと思って調べてみました。


# 設定手順
### 1. `flutter_launcher_icons` package を pubspec.yaml に追加
以下をターミナルで実行して追加する
```zsh
$ flutter pub add flutter_launcher_icons
```

### 2. 任意の場所にアイコンファイルを追加
基本的にはプロジェクト配下に `assets` フォルダを作成して、その中で設定しておくのが良さそう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819748/342bda88-72b5-5a7a-27e8-3adf3bd45cce.png)

### 3. `pubspec.yaml` でアイコンファイルのパスを通す
どこに書いても大丈夫だけど、僕は `flutter:` セクションの直前くらいに書いておいた
```yaml
flutter_launcher_icons:
  android: true
  ios: true
  remove_alpha_ios: true
  image_path: "assets/icons/application_icon.png"
```


### 4. アイコン適用コマンドをターミナルで実行
これを実行したのち、ビルドしてみるとアイコンが適用できていました。
```zsh
$ flutter pub run flutter_launcher_icons
```


# おわりに
上記の手順については全てこの公式ページに書いてありました、素晴らしい！
https://pub.dev/packages/flutter_launcher_icons
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819748/8c19ead0-e1c5-f025-5bda-796704fdb444.png)
プログラミングの基礎の「き」～問題付き～


**プログラミングの基礎が大学生と社会人に必要な理由**

私たちは、テクノロジーが急速に進化し、日常生活のあらゆる面で情報技術が浸透する時代に生きています。この文脈で、プログラミングスキルはもはや選択肢ではなく、必須の能力となってきています。大学生や社会人にとって、プログラミングを学ぶことは、以下のような多くの利点をもたらします。

**1. キャリアの多様性と拡張性**
プログラミングスキルは、IT業界に限らず、医療、金融、メディアなど多岐にわたる分野で価値があります。これらのスキルを持つことで、新しいキャリアの扉が開かれ、より多くの職業選択肢が可能になります。また、データ分析やシステム管理など、プログラミングに関連する能力は市場価値を高めることができます。

**2. 問題解決能力の向上**
プログラミングは、問題を分析し、効率的な解決策を見つけるプロセスです。この訓練は、論理的思考や批判的思考を養い、日常生活や他の学問領域においても役立ちます。また、プログラミングは計画性や組織力を要求するため、これらのスキルを身につけることができます。

**3. デジタル時代における適応力**
プログラミングを理解することは、テクノロジーの急速な変化に対応する能力を高めます。AIや自動化の進展により、多くの伝統的な職業が変化する中で、テクノロジカルなスキルセットを持つことは重要です。プログラミングを学ぶことは、これらの変化に柔軟に対応し、未来の職場で求められる人材になるために役立ちます。

**4. 創造性とイノベーションの促進**
プログラミングは、アイデアを現実のものに変える強力なツールです。アプリケーションの開発、ウェブサイトの構築、ソフトウェアのカスタマイズなど、創造的なプロジェクトにプログラミングを活用することで、個人や組織の革新的な取り組みを支援することができます。

**まとめ**
プログラミング教育が必修化される今、大学生や社会人がこのスキルを身につけることは、自己の能力を向上させるだけでなく、将来的に安定したキャリアを築くためにも極めて重要です。プログラミングは、単なるコーディング技術以上のものであり、思考方法、問題解決戦略、そしてイノベーションの源泉となり得るのです。

by **ChatGPT**
 
# といっても挫折する人は多い
プログラミングを学び始めるとき、「これからはプログラミングの時代だ！」と意気込んで専門書を購入するものの、実際にページをめくると、まるで暗号を解読するかのような複雑なコードに圧倒されてしまい、やる気満々で始めたプログラミング学習が理解が進まないと次第にモチベーションが下がり、結局は書棚の飾りと化してしまうことも少なくありません。
ということで今回はプログラミングの基礎の「き」ということで問題形式でプログラミングのコードを考えてもらいます！

# 問題
これから出される文章をコードにしてください。

ルール
1. 日常の状況をPythonのコードで表現します。
2. Pythonの基本的な構文（if, while, printなど）を使用してください。

ともあれ例題を解いてみましょう！
### 例題
「ランプが点いていれば、部屋に入る。」

<details><summary>正解
</summary>

(上に空行が必要)

```python
ランプ = '点灯'か'消灯'
if ランプ == '点灯':
    print('部屋に入る')
```
</details>

となります。
イメージをつかめたでしょうか？
それでは本題です！
### 問題1
「朝起きて、窓の外が雨なら傘を持って出かける」

<details><summary>正解
</summary>

```python
天気 = '雨'か'晴れ'か'曇り'
if 天気 == '雨':
    print('傘を持って出かける')
```
</details>

### 問題2
「昼だけ外で遊ぶ」

<details><summary>正解
</summary>

```python
時間帯 = '朝'か'昼'か'夜'
if 時間帯 == '昼間':
    print('外で遊ぶ')
```
</details>

### 問題3
「お腹がすいたら、リンゴを一つ食べる」

<details><summary>正解
</summary>

```python
お腹の状態 = 'すいた'か'すいていない'
if お腹の状態 == 'すいた':
    print('リンゴを一つ食べる')
```
別回答
```python
お腹がすいた = True  # お腹がすいたかどうかを True または False で表現
if お腹がすいた:
    print('リンゴを一つ食べる')
```

</details>

### 問題4
それでは難易度を上げましょう！

「外が明るくなるまで待って、その後で外に出かける。」
<details><summary>正解
</summary>

```python
while True:
    外が明るい = FalseかTrue
    if 外が明るい == True
        break
print('外に出かける')

```
どうでしたか？
新しく while を追加しました。
while は条件を満たしている間、処理を繰り返し実行するループ構造です。
今回の while True: は条件が常に True であるため、無限にループします。
しかし、内部の if 文で（この場合は外が明るくなったかどうか）チェックし、その条件が True になると break 文を用いてループから脱出します。
</details>

### 問題5
「カフェに行くまで、音楽を聞きながら歩く。」

<details><summary>正解
</summary>

```python
while True:
    カフェに着いた = TrueかFalse
    print('音楽を聞きながら歩く')
    if カフェに着いた:
        break

print('カフェに到着')
```
</details>

# まとめ
今回は日常のシナリオをプログラミングのコードに変換することでプログラミングの基礎の「き」を体験してもらいました。
この記事がお役に立ったと思ったら、ぜひ「いいね」をお願いします！
このような練習を通じて、プログラミングの基本的な構造を理解し、実際の問題解決に応用できるスキルを身につけていきましょう！
配列のIn-Placeアルゴリズム

プログラミングにおいて、データ構造の効率的な操作は非常に重要です。
特に、配列は最も基本的なデータ構造の一つであり、その中でもIn-place操作のアプローチは、追加のメモリを最小限に抑えることで、リソースの効率的な利用が可能となります。

## 配列のIn-Placeアルゴリズムの概要

新しいデータ構造を作成することなく、与えられた配列内で要素の変更、追加、削除を行う手法です。
この操作は、追加のメモリスペースをほとんどまたは全く使用しないことが特徴です。
多くの場合、配列の長さは固定で、操作を通じて配列内のデータが書き換えられます。

## 配列のIn-Placeアルゴリズムの使用例

### 反転アルゴリズム

配列の要素を反転させる最も簡単な方法は、先頭と末尾の要素を交換し、その間を徐々に狭めていくことです。

```python
def reverse_array(arr):
    start, end = 0, len(arr) - 1
    while start < end:
        arr[start], arr[end] = arr[end], arr[start]
        start += 1
        end -= 1
```

### データのフィルタリング

特定の条件に基づいて配列から要素を削除する場合、新しい配列を作る代わりに、条件を満たす要素だけを前方に移動させる方法があります。

```python
def filter_array(arr, condition):
    j = 0
    for num in arr:
        if condition(num):
            arr[j] = num
            j += 1
    return arr[:j]
```

### ゼロ埋め

ゼロでない要素を前に移動させ、すべてのゼロを配列の末尾に移動させるアルゴリズムです。

```python
def move_zeroes(arr):
    j = 0
    for num in arr:
        if num != 0:
            arr[j] = num
            j += 1
    for i in range(j, len(arr)):
        arr[i] = 0
```

## 参考情報

* https://leetcode.com/problems/find-all-numbers-disappeared-in-an-array/description/
curlコマンド でヘッダ情報を取得

# 概要
curl コマンドで `head`オプションを使用して
ヘッダー情報を取得します。
head オプションを使うと
webサーバーなどが返ってくることがあるみたいです。
自分用にメモとして記載しています。

# コマンド
下記がcurlコマンドです。
オプションで`--head`を使います。
```shell
curl --head https://abcd.com
```
例えば、Qiitaのヘッダー情報を確認するとします。
下記のコマンドを実行します。
```shell
curl --head https://qiita.com/
```

コマンドを実行すると
下記のようなレスポンスが返ってきます。
QiitaのWebサーバーに`nginx`を使っていることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711148/1de5d218-5b9b-6f8d-be80-72483c8d8682.png)
Windows10で日付と時刻の調整ができない件の対応

:::note warn
『多分この設定を変えたから直ったのかな？』という内容です。
参考情報として見て下さい。
:::

# 現象

少なくとも半年以上電源入れてないWindows10のPC。
WindowsUpdateが『日時がすっごいずれてる』的なエラーでできなかったです。

そして『日付と時刻』が下記。

たしかポリシーで管理してはなかったと思います。
このへんちょっとおぼろげ…。

> これらの設定の一部は、組織によって非表示になっているか管理されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/841f9181-229e-e5e5-2cd7-8c02af030ad9.png)

2024年04月に電源入れたのに2023年08月になっていました。
また、『タイムゾーンを自動的に設定する』がオンにできなかったです。

# こうしたら直りました

『診断＆フィードバック』の『診断データ』を『基本』に。
あと『エクスペリエンス調整』と『診断データを表示する』を『オフ』に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/971fd59c-2b62-a724-329e-87ec08ec7525.png)

そのあと再起動したら直りました。

この設定変更が効果あったのか、それとも再起動のおかげか…。
はたまた、時間が経ったから直ったのか。
ぼんやりです。

後述の参考サイトさんに、『診断データを基本に…』というのがあったので、おそらく『基本』にしたのが効いたのかな…？

# 参考サイトさん

https://answers.microsoft.com/ja-jp/windows/forum/all/win10/050c521b-5117-488f-9f52-0816b0d90a37

# バージョン

Microsoft Windows [Version 10.0.18363.778]
Ruby で解く AtCoder ABC 044 A - 高橋君とホテル (ARC 044 A)

# はじめに
- [AtCoder Problems](https://kenkoooo.com/atcoder/#/table) の ABC042 以降の問題を解いています
- 勉強のために Ruby で解いています
    - 速度的な面で他の言語には劣りますが、あくまで勉強のためです


# お題
- 今回のお題は、 [ABC 044 A 高橋君とホテル](https://atcoder.jp/contests/abc044/tasks/abc044_a) という問題です
- K+1 日目から宿泊費が安くなるホテルに N 泊した際の合計宿泊費を求めます

# 考えたこと
- ホテルの値段が安くなる前に宿泊を終える場合がある
- 条件を使えば簡単にできるが、出力処理は1行でコンパクトにしたい

# コード
```ruby
n = gets.to_i
k = gets.to_i
x = gets.to_i
y = gets.to_i

puts [n, k].min*x + [n-k, 0].max*y
```

# 別解コード
コメントで教えていただいた回答が以下。ありがとうございます。
```ruby
n, k, x, y = readlines.map(&:to_i)
puts (n <= k) ? x * n : x * k + y * (n - k)
```
cn4vep4g

SelectAll(0); // すべて選択
ToUpper(0); // 大文字化

// 主要句の前に改行+インデントを挿入
S_ReplaceAll('SELECT', 'SELECT\\r\\n\\t', 28);
S_ReplaceAll('FROM', '\\r\\nFROM\\r\\n\\t', 28);
S_ReplaceAll('WHERE', '\\r\\nWHERE\\r\\n\\t', 28);
S_ReplaceAll('ORDER BY', '\\r\\nORDER BY\\r\\n\\t', 28);
S_ReplaceAll('GROUP BY', '\\r\\nGROUP BY\\r\\n\\t', 28);
S_ReplaceAll('HAVING', '\\r\\nHAVING\\r\\n\\t', 28);
S_ReplaceAll('INNER JOIN', '\\r\\n\tINNER JOIN', 28);
S_ReplaceAll('LEFT OUTER JOIN', '\\r\\n\tLEFT OUTER JOIN', 28);
S_ReplaceAll('LEFT JOIN', '\\r\\nLEFT JOIN\\r\\n\\t', 28);
S_ReplaceAll('RIGHT JOIN', '\\r\\nRIGHT JOIN\\r\\n\\t', 28);
S_ReplaceAll('ON', '\\r\\n\tON', 28);
S_ReplaceAll('UNION', '\\r\\nUNION\\r\\n\\t', 28);
S_ReplaceAll('UNION ALL', '\\r\\nUNION ALL\\r\\n\\t', 28);

// AND/ORの前後に改行+インデントを挿入
S_ReplaceAll('AND', '\\r\\n\\tAND ', 28);
S_ReplaceAll('OR', '\\r\\n\\tOR ', 28);

// 複数の連続したタブをひとつに整理
S_ReplaceAll('\\t +', '\\t', 28);

// 項目の後に改行+インデント+カンマを挿入
S_ReplaceAll(',', '\\r\\n\\t,', 28);

// 括弧内をインデント
S_ReplaceAll('\\(', '\\(\\r\\n\\t', 28);
S_ReplaceAll('\\)', '\\r\\n\\t\\)', 28);

// カンマ直前のスペースを削除
S_ReplaceAll('\\t, ', '\\t,', 28);

SelectAll(0);	// すべて選択
RTrim(0);	// 右(末尾)の空白を削除

S_ReDraw(0); // 再描画
ETロボコン2024に向けたメモ①(2024.4.15記載)

展開済みの今年度のロボコン資料をテキスト化しつつわからないところを自分用にメモした記事。

# 今年度のETロボコン資料
https://docs.etrobo.jp/information/2024/et20240216_presentation_tech.pdf

# アドバンスドの内容
2024/4/15時点の公開内容

## 走行体 HackSPi Clione

- 超音波センサ
- カメラ Rasberry Pi カメラモジュールV2 又は V3
- RasPi用モバイルバッテリー 110g以上
- RasberryPi 4 model B
- ジャイロセンサー
- モータ
- カラーセンサー

## 難所① ダブルループ
### ルール
- チェックポイント通過でボーナス
- チェックポイントの通過は一方通行
### ポイント
- 真円と楕円の組み合わせ
- ラインの交差前後でのエッジ切り替えが必要
- 青マーカーを用いた位置補正が可能

## 難所② ロボコンスナップ
### ルール：　ミニフィグ撮影
- 楕円ループの中央に置かれている小さなフィギュアを撮影し、ネットワークで送信
- ミニフィグの向きは走行のたびに変化する
- 正面から撮影できると高ボーナス
### ルール：　列車撮影
- 真円ループの内側を走行している列車を撮影してネットワークで送信
- 特定の状態を撮影できると高ボーナス
### ポイント
- 顔を検知する手法
- 動いているものの検知・撮影

## 難所③ ブロック運搬
### ルール
格子の各所に置かれている障害物を回避しつつ、ブロックを運搬する
- 障害物を倒さず通過できると追加ボーナス
- 所定の運搬先へ運ぶことで追加ボーナス
### ポイント
- 走行体のカメラで物体検知
- 黒線とサークルを使って自己位置を把握
- ブロックが飛び出さないように走行体を制御
- アドバンスドクラスのブロックはランダム配置

## 競技イメージ
火星探査/月探査の探索結果送信、農業での作物監視や農薬配布
- ダブルループ：　周回軌道
- ロボコンスナップ：　探索結果送信
- ブロック運搬：　探索&作業


## 開発環境の構成
### RasPike環境
- aspファイルそのもの(C/C++, EV3RT/ASP3)を実行可能
- Bullseye(Linux)
- raspi/SPIKEともに実時間で動作
- raspike.pyが実行委員会より提供される
- micropythonでRTOS(SPIKE-RT)を利用可能
- プログラムは基本RasPi上で開発
- PCから繋ぐ形式を想定するが、RasPiを直接ディスプレイに繋いでも良い
- SPIKEへのプログラム転送はPC/RasPiのどちらからでも可能
- RasPi単独でも開発は可能(ただしリポジトリへの格納は面倒)
- Bluetooth
- SSH/VNC/RDP
- 教育用SPIKEアプリ VScode
- Mu-Editor

# 自分メモ
## RasPike
- リポジトリ：　https://github.com/ETrobocon/RasPike
- ETロボコンでSPIKEを使用するためにETロボコン実行委員会で作成された環境
- LEGO(R)のSPLIE Prime(R): https://education.lego.com/ja-jp/products/-spike-/45678/
- 基本的なプログラムはRasPi上で動作させ、そこからモーターなどの制御情報をSPIKEに伝え、SPIKEからはステータス情報を伝える構成
- SPIKE側にはmicro pythonで作成した受け用プログラム(raspike_etrobo_main.py)が受信用のプログラムとして動作



## 技術的な
### ライントレース
### 顔検知
- Open CV 
https://qiita.com/UnaNancyOwen/items/8c65a976b0da2a558f06
https://zenn.dev/ncdc/articles/665eeefb1205ac

### 動いているものの撮影、検知
- 動体検知
https://canon.jp/business/trend/motion-detection
https://www.axis.com/blog/secure-insights-jp/2019/05/29/motion-detection/

### aspファイル
- Active Server Pages　（https://www.filetypeadvisor.com/ja/extension/asp）
- ETロボコン用ASP→カーネル？
https://www.toppers.jp/etrobo-asp.html

### Bullseye（ブルズアイ）
- Debian11 コードネーム：bullseye 
https://pc-freedom.net/today_pc_story/debian-11-bullseye-released/
https://codezine.jp/article/detail/14676
- GNI/Linuxディストリビューションの最新安定版
- LinuxカーネルにexFATファイルシステムのサポートを提供する最初のリリース

### Mu-Editor
https://codewith.mu
- MicroPythonを使ったmicro:bitの開発環境としてのエディター
https://sanuki-tech.net/micro-bit/micropython/install-mu-editor/
- micro:bit：　BBCが主体で作られた教育向けマイコンボード
https://microbit.org/ja/

### SSH/VNC/RDP
リモート接続のプロトコル（https://atmarkit.itmedia.co.jp/ait/articles/1410/16/news014.html）
- RDP（Remote Desktop Protocol）: Windows Serverの「リモートデスクトップサービス」や、Windowsデスクトップの「リモートデスクトップ接続」で使用される、マイクロソフト標準のプロトコル
- VNC（Virtual Networking Computing）: クロスプラットフォーム対応のリモートコントロールソフトとして古くから人気のソフトウェア。デスクトップ版Linuxの多くはVNCによるリモート接続をサポートしており、Windows向けにもVNCに対応したさまざまな無償／有償ソフトウェアが存在。
- SSH: UNIXやLinuxの端末コンソールに接続する標準的なプロトコルで、Terminalsは“ダム端末”ソフトウェア
Excelのガントチャートを作った？それ最初からあるけど・・・

自分で使うときはプロジェクト管理ツールの中のガントチャートを使いますが。
企業さんによってはExcelでスケジュール管理したいという方はまだまだいますし、
無理に「脱Excel」をする必要は全くないと思っています。各Powerシリーズとも相性いいし。

そんな時、Excelでガントチャートを関数と条件付き書式使って頑張って作っていたわけですが
最初からMicrosoftさんもGoogleさんも用意してくれているってことに気づきました。

## Microsoft Excel
Excelの新規作成画面からその他テンプレート＞ガント　で色々あります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/016ef218-ae5b-52c3-f1ad-5fc978f4b3be.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/bc96f01e-93c9-3318-2265-825fddb8e4a1.png)

## Google SpreadSheet

GoogleSpreadSheetも当然ありますよね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/408c7e8d-16f2-de1b-ad28-995978cae849.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666388/c97e3e37-844f-3993-5abc-c9f543bb8d8e.png)

## まとめ

その他にもいろいろあります。
あんまりExcelを触ってなかったので気づきませんでしたが、みんなが使うようなものはもうスクラッチで作る必要はないですね。
Specifications パターンと匿名関数の部分適用

# Specifications パターンと匿名関数の部分適用

カリー化や部分適用の使いどころの例として _Specifications_ パターンを挙げたい。

_Specifications_ パターンは、EvansとFowler[^1]によって提案されたオブジェクト指向のデザインパターン。コレクションからのオブジェクトの抽出(Selection)、ビジネスルールへの適合のバリデーション(validation)、要求に応じたオブジェクトの生成(Requirement)の3つのパターンに用いられる。

パターンに特徴的なのは、`Specification` クラスの `isSatisfiedBy( aContract )` というメソッド。引数にDDDでいうところのエンティティ（例えば契約とか患者とかドメイン次第でさまざま）を取り、ブーリアンを返す。`Specification`はルールを表現し、エンティティはルールから独立して存在する。Validationの場合、エンティティは自由にふるまえるが、ルール違反を起こしたときにそれがわかるという関係にある。Selectionの場合、エンティティは様々であるものの、ルールに適合したエンティティだけを選び出すことができる。Requirementの場合、ルールに適合したエンティティを生成できる。

いずれも、着目すべきは矢印の向きで、エンティティの側がルールを知るのではなく、ルールがエンティティを知るという関係。

```plantuml
@startuml
class SpecificationFactory { 
  + factory( applicationDateOfRule : Date ) : Specification
  }

class Specification { 
  - applicationDateOfRule : Date
  + isSatisfiedBy( aContract : Contract ) : Boolean
  }
class Contract{ }
SpecificationFactory -> Specification : Generate
Specification -> Contract : Use
@enduml
```

ルールそれ自体がオブジェクトであり、コンテキストによりルールが変わる。そこで、`isSatisfiedBy`メソッドはクラスメソッド（スタティックメソッド）ではなくインスタンスメソッドとなる。`Specification` の生成にてコンテキストを与える。オブジェクト指向的には `Specification` を生成するファクトリでコンテキストを注入（インジェクション）する（Evans[^2] ）。ルールの適用開始日は典型例。法律の場合附則に施行日が書かれるし、社内規則も同じような仕組みだろう。

さて、Elixirで _Specifications_ パターンを実装するには、コンテキストとなる引数を固定化した匿名関数を返すということになるだろう。

以下の例は、2024/04/01より損金算入の条件が変わった接待交際費の判定。関数 `specification/2` は日付（コンテキスト）によって接待交際費となる基準が変わり、5,000円未満または10,000円未満ならば会議費として認められる。認められる場合には `true`、認められない場合には `false` を返す。関数 `new/1` は、日付を固定して（コンテキストをインジェクションして）バリデーション用の関数を生成する。

```elixir
defmodule ConventionExpense do
  def specification( date, amount ) do
    case Date.compare(date, ~D[2024-04-01]) do
      :lt -> amount < 5000
      _ -> amount < 10000
    end
  end

  @doc """
  Creates a new specification for convention expenses.
      iex> is_convention_expense = ConventionExpense.new(~D[2024-04-15])
      iex> is_convention_expense.(5000)
      true
  """
  def new(date) do
    fn amount -> specification(date, amount) end
  end
end
```

Specificationを部分適用された匿名関数として実現すると、コンテキストを捨象してルールを適用することができる。オブジェクト指向の _Specifications_ パターンと同様に、宣言的なルールの記述、ルールの生成知識、処理とルールの分離などが実現できる。ルールが変わったのであれば `ConventionExpense.specification/2` を変更すればよい。日付ではないコンテキストが増えたのなら（大企業と中小企業でルールが違うなど）`new/2` などを追加すればいい。判定タイミングがバリデーションではなく、データ抽出に使うとなっても、再利用が容易。

[^1]: http://martinfowler.com/apsupp/spec.pdf
[^2]: https://www.amazon.co.jp/exec/obidos/ASIN/B00GRKD6XU
DNSについて

# DNS誕生の背景
## DNSが誕生する前
- IPアドレスは1箇所で管理していたが、接続する機器が増えすぎたため分散管理するようになった（ただのテキストファイルでIPとドメインを管理）
- インターネット利用者はテキストファイルをダウンロードして使っていた
- インターネットを始める場合は、管理局（レジストリ）に申請しテキストファイルに追加してもらう必要があった
- 色々めんどくさいので**ドメインを階層化し管理を委任する**ことで現在のDNSシステムとなった

## 分散管理のメリット
- 管理者の負担軽減（
  - `.jp` なら `.jp` だけを管理すれば良い、 `example.jp` は委任して他に任せる
- 拡張性
  - `example.jp`は `.jp`から委任されているので理範囲内で独自にルールを決めれる

# リゾルバについて
## スタブリゾルバ
- デバイスの中にあるもの（DNSクライアントともいう）
## フルリゾルバ
- DNSサーバーに問い合わせを行い取得したIPをクライアントに返却する
- 名前解決したIPをキャッシュしておく
- キャッシュDNSサーバーと呼ばれることもある


# キャッシュについて
キャッシュは２種類ある

## キャッシュ
- 名前解決したドメインをIPを保持しておき、シドリクエストが来た際はキャッシュをレスポンスする

## ネガティブキャッシュ
- 存在しないIPにだった場合その情報もキャッシュしておく
  - これがないとブラウザをリロードしたときに再度DNSサーバーへ名前解決のリクエストを送信することになる

# サーバーは複数設置する
同じゾーン情報を持つサーバーを複数立てておくため**ゾーン転送**を行う

## プライマリサーバー・セカンダリサーバー
ゾーン転送したサーバーをセカンダリーサーバーという
![](https://storage.googleapis.com/zenn-user-upload/6bb69f960480-20240220.png)

# レコードについて

## SOAレコード
- ゾーン頂点でSOAレコードが必要
  - `.jp` から委任された `exmaple.jp` は `exmaple.jp` のゾーン頂点
- ゾーン転送にも必要

## NSレコード
- ゾーンの親子関係を示すもの
- ゾーンを管理するサーバーのホスト名を設定する（ `exmaple.jp` であれば `exmaple.jp` を設定する）

## TXTレコード
- 任意の文字を設定できるので、特定のフォーマットを入力すると、**ドメインの所有権の確認、メールのセキュリティの確保、迷惑メールやフィッシングの防止**を行える

###  SPFとは？
- SPFとは送信元の身元を確認するためのドメイン認証技術
-ドメインが迷惑メールの送信に使用されることを防ぐ目的がある
- 例えば、ドメイン「XXX.co.jp」のIPアドレス「192.168.10.1」から送信されたメールのみを認証させたいときは、TXTレコードに追加する
```jsx
XXX.co.jp. IN TXT "v=spf1  +ip4:192.168.10.1 –all"
```

## CNAMEレコード
- ドメイン名のエイリアス（別名）を指定するために使われる
- 以下の場合、 `www.example.com` の問い合わせに対し、`test.example.com` の名前解決を行う

```jsx
www.example.com IN CNAME test.example.com
```
CSR・SSR・SSGとCore Web Vitals

## Core Web Vitals
### Core Web Vitalsとは
- ユーザー体験を測定する一連の指標
- 良いユーザー体験を提供するためのGoogleが取り組んでいるガイダンス
- Core Web VitalsはSEOにも影響する


### **LCP - Largest Contentful Paint**
ビューポート内に表示される一番大きいコンテンツ（画像、テキストロック、動画）のレンダリングにどれだけ時間がかかるか

### **CLS - Cumulative Layout Shift**
レイアウトのズレや崩れを数値化したもの
レイアウトのズレや崩れとして・・・
- 突然バナーが出現して推したいボタンが押せない
- 画像に `height` を設定していない場合、画像が表示されると画像の高さ分、レイアウトが下にずれ、意図しないボタンを押してしまう

### **FID - First Input Delay**
ユーザーが最初にページを操作（リンクのクリック、ボタンのタップなど）してから、イベント ハンドラの処理を開始するまでの時間

## レンダリングパターン
### なぜCSRが生まれたか？
- サーバーでデータを取得してそれをサーバー上でレンダリングし、それをブラウザに配信していた（PHPやPerl）
- ブラウザはサーバーで生成されたHTMLを表示するだけで、インタラクティブではなかった
- JavaScriptの改善とブラウザ性能が向上したことで、最小限のHTMLとJSでクライアント側で全て行うようになる
- WebがよりインタラクティブになったことでSPAが広まった

### CSRの問題点
WEBでできることが増えすぎたことで、Javascriptのバンドルサイズが肥大化し、ユーザーの環境（デバイスや通信環境）によっては表示が遅くなった

:::note warn
環境によって初回のバンドルファイルのダウンロードに時間がかかりUXが最悪（初回表示速度はバンドルサイズに依存する）
:::

:::note info
どのユーザーにも同じように同じようにコンテンツを配信するには、SSRに戻すのが良いよねってなった
:::

### SSRでCSRの問題を解決する
#### SSRの流れ

1. クライアントからリククエスト
2. リクエストを受け取ったサーバーは文字列のHTMLを生成し、クライアントに返却
3. 受け取った文字列HTMLにイベントハンドラをアタッチして、生きた仮想DOMとして再開させる（ハイドレーション）

#### SSRにするとCSRに比べてどうなるのか？
- 初回のレスポンスはサーバーでレンダリングするので少し遅くなる
- 最初の要素が表示される時間は多少早くなる
- 大きい要素の表示も早くなる
- FIDは逆に悪くなってしまう可能性がある

## 参考

https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja

https://www.youtube.com/watch?v=pqyyGdtok4Q
ブラウザレンダリング流れ

## ブラウザレンダリングの流れ

1. Loading - リソース読み込み（Download, Parse）
2. Scripting - Javascript実行
3. Rendering - レイアウトツリー構築（Calculate Style, Layout）
4. Painting - レンダリング結果の描画（Paint, Rasterize, Composite Layers）

![https://storage.googleapis.com/zenn-user-upload/3d9507fc80ef-20240405.png](https://storage.googleapis.com/zenn-user-upload/3d9507fc80ef-20240405.png)

引用: https://qiita.com/gasheeee/items/267f11314c161392a871

## 1. Loading - リソース読み込み

このフェーズの主な役割は

- リソースのダウンロード（Download）
- リソースのパース（Parse）

### Download

以下のリソースをサーバーからダウンロード

- HTMLファイル
- CSSファイル
- JavaScriptファイル
- 画像ファイル（JPEG、PNG、GIF、SVG）

### Parse

HTMLをDOMツリー、CSSをCSSOMツリーに変換（レンダリングエンジンが解析できる形式に変換）

### HTML読み込み

以下の工程を経てDOMツリーに変換される

1. HTMLを解析してトークンをリスト化
2. トークンからツリーデータを作成
3. ツリーデータにあるJavaScriptを実行しつつDOMツリーの構築

:::note info
JavaScriptを実行中はDOMツリーの構築はストップする
:::

## 2. Scripting - Javascript実行

レンダリングエンジンはJavascriptコードを JavaScript エンジンに引き渡して実行する

1. Javascriptコードを解析しトークンを生成
2. トークンを解析しASTデータ（抽象構文木）を作成
3. ツリーデータを実行可能な状態にする
4. 仮想マシンやCPUで実行される

:::note info
ESlintやPrettier、テストのカバレッジの取得でASTが使われている
:::

### 参考

https://zenn.dev/oreo2990/articles/5b56230ba2d7a1

https://zenn.dev/antez/books/568dd4d86562a1/viewer/09848c

https://engineering.mercari.com/blog/entry/20220128-3a0922eaa4/

## 3. Rendering - レイアウトツリー構築

Javascriptの実行が終わるとスタイルの計算とレイアウトが行われる

### Calculate Style

- 構築したDOM要素にどのCSSが適用されるか計算
    - この時にCSSOMツリー全てを参照し、全てのDOM要素に対してCSSセレクタのマッチングを総当たりで行う
- DOM要素にどのCSSが適用されるかが分かれば、CSSの詳細度でどのCSSが適用されるか判別

### CSSセレクタのマッチング

- CSSセレクタのマッチングは総当たりで行う（DOMが100個、CSSが50個ある場合には 100 * 50 = 5000回のマッチング処理が走る）
- マッチングは右から左へ行われる
    
```css
/* 1. DOM要素のclass属性にbuttonが含まれている */
/* 2. その親要素のclass属性にcontainerが含まれている */
/* 3. その親要素のDOM要素名がbodyである */
body .container > .button {
    color: red;
}

```
    
- 詳細度は[セレクターの重み分類](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%AE%E9%87%8D%E3%81%BF%E5%88%86%E9%A1%9E)で判定される（`1-0-0`, `0-1-0` , `0-0-1`のような形式）

### Layout

DOM要素に当たるCSSプロパティを判別した後、レンダリングエンジンはDOMツリー内のすべてのノードの視覚的なレイアウト情報の計算する。
レイアウト情報とは、

- 要素の大きさ
- 要素のマージン
- 要素のパディング
- 要素の位置
- 要素のz軸の位置

## 4. Painting - レンダリング結果の描画

### Paint

- グラフィックエンジンに向けた命令を生成

### Rasterize

- 生成された命令を用いて、レンダリングツリー内の各ノードをレイヤー単位でピクセルに変換していく

:::note info
レイヤーという単位でピクセルに描画するのは、再レンダリングする場合、すでに描画が終わったレイヤーを再利用することで、素早く再レンダリングするため
:::

</aside>

ブラウザのウィンドウをスクロールするときには、スクロール分だけコンテンツの表示される位置を移動して描画を更新する必要がある
しかし、このとき更新しなければならないのはコンテンツの表示の位置だけで、コンテンツの描画そのものは変更する必要はないため、以前描画したレイヤーがこのとき再利用される

### Composite Layers

- ピクセルにしたレイヤーを合成してレンダリング結果を生成
- 合成処理はCPUで行われるが、3DなどはGPUで処理される（z軸の処理はGPUの方が早いため）

以上の工程を経て、コンテンツが表示される
PowerAppsでボタンを押して絵を動かす（スライダーコントロールでアニメーション）

# はじめに
PowerApps初心者のまとっちです。
練習で超簡単なアニメーションを作ってみたので備忘録として残しておきます。

<b>～スライダーコントロール編～<b>

## この記事の対象者
- PowerAppsで絵を動かすのを超簡単に知りたい人
- スライダーコントロールによる簡単なアニメーションを知りたい人

# 作ったアプリ
発射ボタンを押したら、砲弾が飛んでいきます。
![Power-Apps-スライダーコントロール.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/2c22401f-44b0-c37f-b106-db2bcb4ff626.gif)

# アニメーションの作り方
アニメーションの作り方が下記２種類あり、今回はスライダーコントロールで作ります。
※どっちが良いかは分からなかったです。何か分かったら記事を更新します。
- スライダーコントロールを使う　★本記事
- タイマーコントロールを使う　　※別記事参照👇

https://qiita.com/matoia/items/31b054f662ec133c1568

## スライダーコントロールとは
### 一般的な使い方の例
- ユーザーが値を入力する代わりにスライダーを動かす（進捗度合％の入力など）
- ユーザーがスライダーを動かして、グラフの絞り込み条件やマップサイズを変化させる
- ユーザーがスライダーを動かして、画面表示を変化させる（たとえば、スクロールバー）

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-slider

### スライダーコントロールでアニメーション
この記事を参考にしてスライダーコントロールを高速＆自動で動かして、その値を使って動かしたい絵のXY座標と幅/高さを変化させます。

https://qiita.com/taku_maru/items/75f5f83d9842aab89da3

## アプリ構成と設定値
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/a813d914-b917-aacf-3727-a551e8a59c7d.png)

:::note info
今回は分かりやすくグローバル変数（Set関数）で設定しましたが、コンテキスト変数（UpdateContext関数）で設定しても構いません。
:::


### ①txtValue
スライダーコントロールに設定している変数の値を表示させる。
```
Text = silderValue
```

### ②Slider
スライダーコントロールのデフォルト値を変数にしておき、スライダーコントロールの値が0ではない＆最大値でない場合は、値に1を足す（値が変化した時にこの処理が動くため、連続で値が足されていく）。値が最大値になった場合は、値を0にして、対象の絵を消す。
```
Default = silderValue
OnChange = If(silderValue < Slider.Max && silderValue > 0, Set(silderValue, silderValue + 1), Set(silderValue, 0) && Set(showImage, false))
```

### ③btnFire
ボタンを押した時、スライダーコントロールの値を1にして、対象の絵を表示させる。
```
OnSelect = Set(silderValue,1); Set(showImage, true)
```

### ④imgBomb
スライダーコントロールの値を使って動かしたい絵のXY座標と幅/高さを変化させる。Visibleには変数を入れておく。
```
Height = 100 + silderValue * 30
Width = 100 + silderValue * 30
X = 1044 - silderValue * 25
Y = 484 - silderValue * 20
Visible = showImage
```

# おわりに
本記事では超簡単なアニメーションで誰でも分かるように書いてみました。
PowerApps初学者の助けになれば幸いです。
PowerAppsでボタンを押して絵を動かす（タイマーコントロールでアニメーション）

# はじめに
PowerApps初心者のまとっちです。
練習で超簡単なアニメーションを作ってみたので備忘録として残しておきます。

<b>～タイマーコントロール編～<b>

## この記事の対象者
- PowerAppsで絵を動かすのを超簡単に知りたい人
- タイマーコントロールによる簡単なアニメーションを知りたい人

# 作ったアプリ
発射ボタンを押したら、砲弾が飛んでいきます。
![Power-Apps-タイマーコントロール.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/4750af86-4db0-3640-0c6b-d3bed56d7dfd.gif)

# アニメーションの作り方
アニメーションの作り方が下記２種類あり、今回はタイマーコントロールで作ります。
※どっちが良いかは分からなかったです。何か分かったら記事を更新します。
- タイマーコントロールを使う　　★本記事
- スライダーコントロールを使う　※別記事参照👇

https://qiita.com/matoia/items/965433103a7c066b05c5

## タイマーコントロールとは
### 一般的な使い方の例
- 画面上に時間経過を表示させる（いわゆるタイマー表示）
- 経過時間ごとに、絵を切り替える、情報を最新に更新する
- ある操作から時間が経過したら、絵を表示させる、別ページに遷移する

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-timer

### タイマーコントロールでアニメーション
タイマーコントロールの中にはミリ秒の値があるので、このミリ秒を使って動かしたい絵のXY座標と幅/高さを変化させます。

## アプリ構成と設定値
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713212/4a8d3b23-42f6-d3e2-b56e-9b85567609e8.png)

:::note info
今回は分かりやすくグローバル変数（Set関数）で設定しましたが、コンテキスト変数（UpdateContext関数）で設定しても構いません。
:::

### ①txtValue
タイマーコントロールの中のミリ秒の値を表示させる。
```
Text = Timer.Value & "ミリ秒"
```

### ②Timer
タイマーは1秒(1,000ミリ秒)で終わるようにして、終わった時にタイマーをリセットして、対象の絵を消す。StartとResetには変数を入れておく。
```
Duration = 1000
OnTimerEnd = Set(Timer_start, false); Set(Timer_reset, true); Set(showImage, false)
Start = Timer_start
Reset = Timer_reset
```

### ③btnFire
ボタンを押した時、タイマーを開始して、対象の絵を表示させる（２行目）。まだタイマーが1秒経たないうちに再度ボタンを押した時にはタイマーをリセットさせる（１行目）。
```
OnSelect = Set(Timer_start,false); Set(Timer_reset,true);
　　　　　 Set(Timer_start,true); Set(Timer_reset,false); Set(showImage, true)
```

### ④imgBomb
タイマーコントロールの中のミリ秒を使って動かしたい絵のXY座標と幅/高さを変化させる。Visibleには変数を入れておく。
```
Height = 100 + Timer.Value * 3
Width = 100 + Timer.Value * 3
X = 1044 - Timer.Value * 2.5
Y = 484 - Timer.Value * 2
Visible = showImage
```

# おわりに
本記事では超簡単なアニメーションで誰でも分かるように書いてみました。
PowerApps初学者の助けになれば幸いです。
多次元配列の拡張for文

###
多次元配列でforをネストして値を取り出す
##
下記のような2次元配があるとして…
```java
//classとmainメソッドは省略
    
    int[][] numbers2d = {
        {1, 2, 3, 4},
        {5, 6, 7, 8},
        {9, 10, 11, 12}
    };
```
##
for文で値を取得
```java
        //for文
        for (int i = 0; i < numbers2d.length; i++) { //縦
            for (int j = 0; j < numbers2d[i].length ; j++) { //横
                System.out.print(numbers2d[i][j] + " ");
            }
            System.out.println();
        }
```
##
拡張for文で値を取得

・出力の際は「col」のみ書けばいい。numbers2d[col]などとしない。
　col 自体が、number2d配列の縦が詰め込まれたものを意味するから。(ニュアンス)

・内側のfor文は int[] col のような配列ではなく、**int col** と書く。

```java
        //拡張for文
        for (int[] row : numbers2d ) { //rowに縦の配列を詰めて…
            for (int col : row) { //詰められた配列の要素を順に取り出してcolに一時格納
                System.out.print(col + " ");
            }
            System.out.println();
        }
```

つまり、
int型の**配列**rowには
（配列0）{1, 2, 3, 4}
（配列1）{5, 6, 7, 8}
（配列2）{9, 10, 11, 12}
が詰められている。

int型の変数colで、上記それぞれの配列を順に取り出し、
その中でさらに0要素目、1要素目… というように値を取り出していく。
CH552Pボード プラグ仕様

# はじめに

前回、↓こちらの記事で **CH552**マイコンを使ったUSB直挿しボードを紹介した。

https://qiita.com/nak435/items/6596b54a1622270b700f

|表|<img width="300" alt="ch552p_front.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/bd429d32-03f5-c49d-d6b3-1c0d4c30d3e2.png" />|
|:-:|-|
|裏|<img width="300" alt="ch552p_back.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/1ea1b055-ff6a-99e6-c82e-6dbf76838918.png" />|

> この基板の素材は、一般的なFR-4で、厚みが 1.6ミリである。
一方、USB-Aは、USB規格にて 2.2ミリとなっていて、この基板は若干薄い。このため、接触不良を起こす場合があるので、そこの工夫が必要。

[JLCPCB](https://cart.jlcpcb.com/quote)では2.2ミリ厚のFR-4を選択できないため、USB-A と USB-C のプラグを備えたボードを追加で制作した。

基本的にはプラグを付けただけだが、せっかくなので、裏面にSPIのパッドも追加した。

# USB-A プラグ版

|表|<img width="300" alt="ch552p-A_front.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/419b309b-2a20-9166-e0ab-be46bccd9335.png" />|
|:-:|:-:|
|裏|<img width="300" alt="ch552p-A_back.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/0a01af25-7973-048a-18b8-edfa706e16e6.png" />|

# USB-C プラグ版

|表|<img width="300" alt="ch552p-C_front.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/9b0521ec-1771-be4f-a2fc-d5bfcae9dc27.png" />|
|:-:|:-:|
|裏|<img width="300" alt="ch552p-C_back.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/f1958970-d4a3-302f-8cb8-eb6bc95de542.png" />|


# 比べてみる

基板の右側パターンはどれも同じ。左側にプラグをハンダ付けするパターンがくる。プラグをつけるとどうしても大きくなってしまう。特にUSB-Aはデカイ。

<img width="280" alt="pcb.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/722dc17f-43a5-ed55-a147-6951d2284e1e.png" />

<img width="280" alt="pcb_with_plug.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/f11dcc11-f37b-c170-6f91-94c0f588a66c.png" />


_USB-Cプラグ版は、CC信号をプルダウンする5.1KΩのR2を追加している。_

> USB-Cプラグ(オス)より、USB-Cレセプタ(メス)版の方が使いやすかったかも??


# おわりに

今回はパネライズせず、単体で20枚づつ作成した。費用は2種類合計40枚送料入れて`US$12.51`。注文時のレートは過去一の円安だったが、1枚当たりたったの50円。注文してから1週間ちょっとで受けとれるので、お手軽にPCBを制作できる。

パネライズはオプション費用が`US$5`ほど追加され、制作枚数が多い場合は割安になるが、30枚程度ならパネライズしない方が安いこともある。注文時によく確認しよう。

### 以上
VBScriptとbcpを使ってCSVファイルをSQLServerに取り込むバッチを作った話

VBScriptはもうすぐ完全オワコン化するのでは・・・
という突っ込みもありそうですが職場ではまだまだ現役。

タイトルの通りとあるCSVファイルをSQLServerに取り込むための既存VBScriptの取り込み方式をBCPに変更するという仕事をしたときにBCPの仕様に沼ったので、個人メモを兼ねてコードと注意点を投稿します。

# 要件
- CSVファイルをBCPを使ってSQLServerへインポートする
- textファイルにVBScriptの実行ログを出力する
- 取込エラーが発生した場合、後続処理を中断する
- 取込エラーが発生した場合、CSVファイルの何行目に問題があったかわかるようにする

# 沼ポイント
BCPのバージョンによってExitCodeが取込エラー時にも0（正常）を返すため、取込完了後SQLServerのテーブルデータ件数とCSVファイルの行数を比較する必要が出てくる事がある。

# コード
## BCP
```bcp.bat
bcp hoge in hoge.csv -f fuga.xml -t "," -m 1 -S **** -d ***** -U ***** -P *****
```
- -tはカンマ区切りであることを指定するためのパラメータ
- -mは何行取込エラーが有ると処理を終了するか。デフォルトは10
- ヘッダー行のスキップを指定したい場合は -F 2 など、FirstRowオプションを指定する

-m 1を指定することでBCPが「○○行を取り込みました。」と、取込エラーが発生した直前の行を教えてくれるのでとりあえず何行目に**1つ目**の問題があるのかが分かるようになる
当然複数の行に問題がある場合はCSVファイルの問題を修正してもう一度実行してエラーが発生するまで別の問題がCSVファイルにあることはわからない…

## VBScript
```Sample.vbs
OnError Resume Next
Set oFSO = CreateObject("System.FileSystemObject")
Set oWS = CreateObject("Script.Shell")
Set oCn = CreateObject("ADODB.Connection")
Set oRS = CreateObject("ADODB.RecordSet")
flgErr = False
ConnectionString = "***********************************"

LogF = oFSO.CreateTextFile(**************)

'hogeテーブルを空にしておく
oCn.Open ConnectionString
oCn.Execute "TRUNCATE TABLE hoge"
oCn.Close

'bcpの実行と実行ログ出力
Set oBcp = oWS.Exec("bcp hoge in hoge.csv -f fuga.xml -t "","" -m 1 -S **** -d ***** -U ***** -P *****")

Do While oBcp.Status = 0
    WScript.Sleep 100
Loop

Do Until oBcp.StdOut.AtEndObStream
    LogF.WriteLine(oBcp.StdOut.ReadLine())
Loop

'エラー判定
If oBcp.ExitCode <> 0 Then
    ''この分岐だけで大丈夫かと思いきや、取込エラーが発生していてもElseに入る事がある
    ''であればこの分岐の意味はないのでは？
    ''    ->  このサンプルでは不要なのだが職場のシステムの処理上、ExitCodeで診断できれば楽ってことがあったので、ExitCodeが1になるバージョンも有るメモの意味も込めて（沼への恨みも込めて）残しておく
    LogF.WriteLine("E R R O R ! ! !")
    flgErr = True
Else
    'CSVファイルの行数を数える
    Set CSVF = oFSO.Open(hoge.csv)
    LineCount = 0
    Do Until CSVF.AtEndOfStream
        LineCount = LineCount + 1
        CSVF.ReadLine
    Loop

    'bcpがインサートしたレコード数を数える
    strSQL = "SELECT * FROM hoge"
    oRS.Open strSQL, Cn, 3, 3

    'レコード数と行数の不一致をエラーにする
    If LineCount <> oRS.RecordCount Then
        LogF.WriteLine("E R R O R ! ! !")
        flgErr = True
    End If
End If

If flgErr = False Then
    ''後続処理が続いていく。。。
```
*※職場での記憶を頼りに書いているので、コードの動作確認はしていません。*

## BCPで取込エラー発生時のExitCodeが0と1で変わるバージョン
残念ながら細かなバージョンを職場の記録から持ち出せず・・・
うろ覚えだと10.50.6500.1は0を返す。10.50.65なんちゃらは1を返す…
ご自身でエラーを起こして確認をお願いします…
申し訳ない。。。
【Java基本編】条件文(if文・switch文)、繰り返し処理(while文・for文・continue)

こんばんは！
この1週間でJavaの条件文と繰り返し処理を学んだので簡単にまとめてみたいと思います！

# if文
基本形は以下のようになっており、ifのあとの()に条件式などを入れ、それがtrueであれば出力、そうでなければelse ifの条件式をみてtrueであれば出力、そうでなければelse以下を出力するというようになっています。else ifは条件がある限り増やせます。

```java
if(条件1){
    System.out.println(条件1がtrueのときの出力内容);
}else if(条件2){
    System.out.println(条件1がfalseかつ条件2がtrueのときの出力内容);
}else{
    System.out.println(条件1・2のどちらもfalseのときの出力内容);
}
```

例えば、テストの点数で評価を分けたいときはこのようになります。
この場合の出力内容は『優』です。
```java
int score = 81;
if(score >= 90){
    System.out.println("秀");
}else if(score >= 80){
    System.out.println("優");
}else if(score >= 70){
    System.out.println("良");
}else{
    System.out.println("可");
}
```

## switch文
switch文では条件の値がcaseの値と一致するとき処理が実行されます。
caseのほかに、どれにも一致しなかったときの処理はdefaultで指定することができます(if文でいうelseのようなもの)。

::: note warn
caseやdefaultの処理のあとにbreak;を付けますが、break;を書かないと次の処理まで実行してしまい、意図せぬ処理が起きる可能性があるため必ず処理の後ろにbreak;をつけましょう！
また、caseの後ろは：(コロン)、処理とbreakの後ろは;(セミコロン)となっているので使い分けに注意！
:::
```java:switch文の基本形
switch(条件の値){
    case 値1:
        System.out.println("処理１");
        break;
    case 値2:
        System.out.println("処理２");
        break;
    default:
        System.out.println("どれにも一致しなかったときの処理");
        break;
}
```
実際におみくじを引いた時の処理をswitch文で書いてみます。
```java:switch文の使用例
int n = 2
switch(n){
    case 1:
        System.out.println("大吉です");
        break;
    case 2:
        System.out.println("中吉です");
        break;
    default:
        System.out.println("小吉です");
        break;
}
```
この場合、case 2のときにnの値と一致するので、『中吉です』と出力されます。

## while文
while文では繰り返しの処理をしたいときに用います。
以下の例は最初にiの初期値を決め、i <= 5(iが5以下)のときに繰り返し処理を行うようにしています。i++で出力が行われた後、値の更新をしています。

:::note warn
i++(i = i+1)の記述をなくしてしまうとiの値が常に初期値となり無限ループになるので、処理の後ろに値を更新の記述を忘れないようにしましょう。
:::
```java:while文の例
int i = 1
while(i <= 5){
    System.out.println(i＋"回目の出力");
    i++;
}
```
この場合の出力内容は
```java
1回目の出力
2回目の出力
3回目の出力
4回目の出力
5回目の出力
```
となります。

## for文
繰り返し処理ができるwhile文をコンパクトにまとめたものがfor文です。
for文では初めに初期値、条件、値の更新を指定し、その後出力内容などを記述します。

以下の例では先ほどのwhile文と同じ内容を実行できるような記述にしており、forの中の()で初期値を1とし、iが5以下であればi++で値を更新して繰り返すようにしています。
出力内容は先ほどのwhile文と同じです。

:::note warn
forの()の中にある条件は`;(セミコロン)`で区切ります！カンマではないので注意!
:::

```java:for文の例
for(int i =1; i <= 5; i++){
    System.out.println(i＋"回目の出力");
}
```

## continue
continueは繰り返し処理の中でif文をつくり、指定した周をcontinueでスキップする処理を行うことができます。以下は先ほどのfor文にcontinueを入れたものです。
以下の例では1から10まで繰り返し処理を行い、4の倍数になるときのみスキップするようにしています。

```java:continue入りのfor文
for(int i =1; i <= 10; i++){
    if(i%4 == 0){
        continue;
    }
    System.out.println(i);
}
```
出力結果は、
```出力結果
1
2
3
5
6
7
9
10
```
となり、4の倍数のみスキップされていることがわかります。


## 最後に
明日はjavaを用いたインターンがあるそうなので、急いでjavaの基本的な部分のみまとめてみました！

余談ですがprintlnの読み方は何だろうと思って調べてみるとプリントラインと読むことが分かりました！なので現在打ち込むときは心の中でプリントライン、プリントライン、、と唱えるようにコードを書いています！初心者あるあるですかね？

今日もお疲れ様でした！
apacheでlaravelプロジェクトをcloneした後に404が出る

# 初めに
laravelのプロジェクトをデプロイした後にルート以外の場所に移動したら404のエラーが出て画面が表示されなくなったのでその解決策を書きます。

# 環境情報
CentoOS Stream X_86_64
Apache/2.4.57
Laravel Installer 5.7.1

# 解決策
rootユーザーでログイン

/etc/httpd/confに移動する
```
cd /etc/httpd/conf
```
でhttpd.confファイルを編集する
```
vi httpd.conf
```
```httpd.conf
<Directory "/var/www/html">

    ↓これを
    #AllowOverride None
    #↓に変える
    AllowOverride All
```
変更を反映させる
```
systemctl restart httpd
```
これでルートではない場所に移動しても画面が表示されます。

# 参考文献

https://qiita.com/blpch7/items/eb524e92c4b1696b288d

この記事はとてもわかりやすかったです。
ありがとうございました!