OmniAICreator/Qiita-1.07M huggingface dataset:
アナグラムを確認する（効率化されていません）



# プログラム

```c:プログラム

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

#define N 256
#define Array 3000

//普通のソート（遅い）
void Normalsort(char* str)
{
  char *t;
  int i,n;
  int size = strlen(str) - 2;
  
  for(i = 0; i < size; i++)
  {
      for(n = i; n < size; n++){
        if((strncmp(str + i,str + (n + 1), 1)) > 0)
        {
          t = str[i];
          str[i] = str[n + 1];
          str[n + 1] = t;
        }
      }
  }
}

int main(int argc, char *argv[])
{
  FILE *fp,*fpw;
  char fname[] = "word.txt"; //読み込みファイル
  char fwname[] = "anagram_result.txt"; //アナグラム結果ファイル
  char str[N]; //ファイルから読み取り時に使用する文字列
  char buffer[N]; //入力文字列
  char strbf[Array][N];
  char straf[Array][N];
  int i=0,m=0;
  
  //結果ファイルを事前に削除しておく
  remove(fwname);

  //ファイルオープン
  fp = fopen(fname, "r");
  fpw = fopen(fwname, "a");
  

  if(fp == NULL)
  {
    printf("%s file not open!\n", fname);
    return -1;
  }

  else
  {
    printf("%s file opened!\n", fname);
  }
  
  //アナグラムを確認したい文字列を入力
  printf("Input: ");
  if(fgets(buffer, N, stdin) == NULL || buffer[0] == '\n') 
  {
    return 1;
  }
  Normalsort(buffer);

  //読み込み用ファイルを一行ずつ処理
  while(fgets(str, N, fp) != NULL)
  {
    strcpy(strbf[i],str);
    Normalsort(str);
    strcpy(straf[i++],str);
  }
  
  //アナグラムが合致している文字列を確認
  for(m = 0; m < i; m++)
  {
    if(strcmp(straf[m], buffer) == 0)
    {
      printf("%s",strbf[m]);
      fprintf(fpw, "%s", strbf[m]);
    }
  }

  fclose(fp);
  fclose(fpw);

  return 0;
}

```

# 説明

一般的なアナグラムのプログラムかと思います。（違ってたらすみません）
実行すると検索したい単語が出てきます。

word.txt・・・読み込みファイル。入力した単語のアナグラムがこのファイル内から見つかるか確認する。
anagram_result.txt・・・アナグラムが存在する場合、このファイルに書き込む。

アナグラム・・・単語の文字を入れ替えることで、別の意味の単語をつくることば遊び
　　　　　　　　例：ビール→ルビー

# 動かした感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408723/a079e529-9938-8d1a-e480-82f021102f1d.png)


こんな感じです。
calc cssについて

## 概要

実務でフロント側を書いていたらなんだこれってものがあったのでメモをしておく


## calcとは
cssの関数です。
とは言っても、これだけじゃわからないですよね。
calcを使うことでpxとemとremなどの相対単位を計算できてしまうんです。


## 使い方
例１
```
.sample {
    width: calc(100px + 50px);
}
```
これの場合は勿論sampleクラスのwidthは150pxになります。
例２
```
width: calc(100% - 80px);
```
こちらは横画面いっぱいから80px引いた値になります。

例３
```
width: calc(100% - 1em);
```
こちらは横画面いっぱいから1em引いた値になります。

例４
```
.modal {
  z-index: calc(3 / 2);
}
```
calcは整数のみを扱うためこの様に割り切れない場合は、近似値の2となります
また、Chromでは割り算の場合は計算結果が整数になっても使用できません。

例５
```
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```
こちらの値はwidth:25pxになります。
余談ですが、CSSでは先頭に--をつけることで変数として扱うことができます。
各セレクタに定義してもいいのですが下記の様に:rootとすることでグローバル変数の様に扱うこともできる。
```
:root {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

### 応用的な使い方
親コンテナの幅を1/6にしたい場合
```
.foo {
    width: 16.666666667%;
}
```
こちらの方が何をしたいか分かり易い
```
.foo {
    width: calc(100% / 6);
}
```
また、scssで書いた場合、ブラウザでコンパイルされると計算結果だけが反映される
```
// SCSSで指定された値
.foo {
    width: 100px + 50px;
}
 
// ブラウザでCSSと計算値をコンパイル
.foo {
    width: 150px;
}
```
しかし、calcを使うとブラウザに計算式ごと渡される
これはブラウザにおける値がより動的になり、ビューポートの変更に合わせて適応できる
```

// CSSで指定された値
.foo {
    width: calc(100% - 50px);
}
 
// ブラウザの計算値
.foo {
    width: calc(100% - 50px);
}

```
# 最後に
今回のことを知ってCSSは改めて奥が深いと感じた
Mac の VSCode からリモートの Linux マシンの Docker コンテナに接続して開発する

# はじめに
タイトル通り、Mac 上で稼働する Visual Studio Code からリモートの Linux マシンに Remote - SSH 拡張で接続して、リモートの Linux マシン上で Remote - Containers 拡張で Dev Container を動かす手順を一からまとめる。

VSCode の以下ドキュメントの `Connect using the Remote - SSH extension (recommended)` の手順に従うのが最も楽。そこに至るまでの基本的なセットアップを本記事ではカバーする。

https://code.visualstudio.com/remote/advancedcontainers/develop-remote-host

# 環境前提
- クライアント
    - macOS Monterey
    - バージョン 12.4
    - MacBook Pro (13-inch, M1, 2020)
    - チップ: Apple M1
- VSCode (Mac にインストール)
    - 1.68.0 (Universal)
- VSCode 拡張機能
    - Remote - Containers (v0.238.2)
    - Remote - SSH (v0.82.1)
- リモートの Linux マシン
    - ubuntu 20.04
    - Azure 上に VM として構築

# 設定手順
Mac 端末を購入した直後の前提で、一からセットアップする手順を記載する。
当然設定済みの項目があるはずなので、それらは適宜飛ばして OK。

## 1. VSCode インストール
以下から Mac 版をダウンロードする。dmg 入りの zip ファイルがダウンロードされるので展開してアプリケーション ディレクトリにコピーする。

https://code.visualstudio.com/download

## 2. VSCode に拡張機能をインストール
VSCode に以下 2 点の拡張機能をインストールする。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

## 3. 秘密鍵と公開鍵のペアを作成
Mac でターミナルを開き、以下コマンドを入力して秘密鍵と公開鍵のペアを作成する。パスフレーズは任意。

```bash
$ ssh-keygen -t rsa
```

## 4. リモートの Linux マシンを作成 & SSH 接続設定
好きなクラウドや仮想化環境で Linux マシンを作成し、先ほど作成した鍵ペアを使って SSH 接続できるように設定する。

### (参考) Azure 仮想マシンの場合の設定
以下は Azure 仮想マシン (VM) を使う場合の備忘。

スポット インスタンスを利用するとオンデマンド比 80%+ オフで安く使える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284925/4ff7de9d-4337-dffa-491f-bba98dffa0e2.png)

VM 作成時に公開鍵を指定できるので楽チン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284925/b0a9e729-ac5b-4aae-c269-5b235d0881f3.png)

VM & IP 作成後に DNS 名ラベルを付与すると良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284925/0915c94e-8af0-2aa0-cba9-e58c5930c87b.png)

## 5. Linux マシンに Docker 等をインストール
以下の Docker 公式ドキュメントに倣って Docker 等をインストールする。以下コマンドは sudo 可能な非 root ユーザーで実行する前提。例によってコマンドは古くなるかもしれないため、実行前に公式ドキュメントを参照すること。

https://docs.docker.com/engine/install/ubuntu/

```bash:リポジトリのセットアップ
sudo apt-get update
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

```bash:インストールと確認
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

sudo docker run hello-world
```

```bash:非ルートユーザーでも実行可能に設定
sudo groupadd docker
sudo usermod -aG docker $USER

# reboot じゃなく exit でも良いかも
sudo reboot

# 確認
docker run hello-world
```

## 6. 接続確認
上記で設定完了。あとは VSCode で実際に接続できるかを確認する。

1. Mac 上の VSCode で [Remote-SSH: Connect to Host] でリモートの Linux VM に接続
1. SSH: hoge-vm に接続した VSCode で devcontainer.json を含む Git リポジトリをクローン
1. SSH: hoge-vm に接続した VSCode で [Re-Open in Container] を選択

以上。
WSL2で/etc/resolv.confが削除されてしまう問題への対処法

# これは
`/etc/wsl.conf`で`generateResolvConf`を`false`に指定しているのに、WSL2再起動時に`/etc/resolv.conf`が削除されてしまう問題の対処法を記載したものです。

# 環境
Windows 11 Home 21H2
WSL Ubuntu 20.04 LTS

# 現象
WSL2環境では、DNSサーバーの指定のために`/etc/resolv.conf`を手動で作成する必要があります。

```/etc/resolv.conf
nameserver 8.8.8.8
```

この際、`/etc/resolv.conf`がWSL2再起動の際に自動生成されてしまわないよう、
上記に加えて`/etc/wsl.conf`で`generateResolvConf`を`false`に指定する必要もあります。
```/etcwsl.conf
[network]
generateResolvConf = false
```

しかしながら、WSL2のバグにより、上記のように指定したとしても、WSL2再起動時に`/etc/resolv.conf`が削除されてしまうという問題があります。


# 対処方法
`/etc/resolv.conf`を作成した後、下記コマンドを実行してください。
``` bash
sudo chattr +i /etc/resolv.conf
```

# 原因
WSL2のバグのようです。下記issueが上がっており、2022/06/15現在、statusはopenです。
https://github.com/microsoft/WSL/issues/6977
Ubuntu + vim 使い向けの Windows Terminal の設定メモ

## 背景

Ubuntu + gnome-terminal + vim がお気に入りだけど, WSL 経由の gnome-terminal は挙動が不安定でつらい...

とりあえず Windows Terminal でやりきる 😾

## ctrl + v

そのままでは普通のペーストになります.

`CTRL + ,` で config.json 設定開き,  `ctrl + v` のコマンド部分を消します.
ほかのサイトでは `null` 指定していますが, どうも 2022/06 時点の Windows Terminal だとだめっぽいようです.

```json
        // NG?
        {
            "command": null,
            "keys": "ctrl+v"
        },
```

## フォント

デフォルトの Cascadia Code だと, C/C++ のコードで `!=` が一文字になったり, `//` のスペーシングがおかしくなったりします. 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/a9e2f954-5dab-c3c4-d9e2-5b95aa1be994.png)

なれればいいのかもしれませんが, monospace に慣れている場合は Cascadia Mono あたりに切り替えましょう.

## カラー

Solarized Dark あたり, Native Ubuntu に比べてちょっと色がずれているような?(OS の色ガンマとか sRGB などの色管理まわりの違い?)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/497fb6c8-0cfd-880c-6224-559aa5c8cf7c.png)

色の微調整は `config.json` 開いてやるしかなさそうです.
Microsoft 認定試験 2022年5月からの変更点。

# はじめに

試験場(Peason Vue)で試験中、トイレに行きたくなる事がありますよね。
こういった場合、試験監督者を呼びトイレに行っていたことと思います。
2022年5月中旬から試験画面に「休憩する」ボタンが登場しました。
また、受付手続きで署名する用紙に試験番号を記入するようになったよ。
という話。

# これまで

試験監督者を呼びトイレに行ったりしたと思います。
端末は何もせず（画面をオフにすることが多い？）、戻ったら試験を再開しました。
特に何も無く、トイレに行っている間も試験時間が経過するだけですよね。

# これから

まず、画面下部の「休憩する」ボタンを押します。
ここまで表示された問題はもう触れられなくなるから見直してねと確認が出ます。
試験監督者を呼びトイレに行きます。
戻って画面を復帰させると、残りの問題しか解答できなくなっています。

# 何が違うのか？

休憩中も試験時間が経過して減っていくのは変わりません。
解答済み・未解答に関わらず「一度でも表示した問題には一切触れられなくなる」
というのが大きな違いです。
最初にざーっと問題を見たり、難しい問題はスルーして得意な問題から解いていくスタイルだと困ることになります。
スルーした問題も休憩後は解答不能になるからです。

# まとめ

カンニング防止策なのでしょうね。。
トイレで誰かに聞くとか従来は普通に出来ましたから。

あと、試験場で受付時に署名する用紙に試験番号（ AZ-400 のような）を記入するようになりました。
こちらの理由はわからないです。
【AWS RDS】mysql, auroraのCPU負荷を減らす。

## Amazon RDS「Performance Insights」を有効化して、CPU負荷の高いSQLを特定する。
- CPU負荷の高い順番にSQLの一覧が表示できます。
- マネージメントコンソールのRDSの画面から有効化できます。
- この機能でCPU負荷の高いSQLを特定します。
[Performance Insights の有効化と無効化](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/USER_PerfInsights.Enabling.html)
[Performance Insights: 概要](https://aws.amazon.com/jp/rds/performance-insights/)

## CPU負荷の高いSQLをexplainで分析する。
### MySQL Workbenchの「Visual Explain」機能で、explainの結果を図で表示する。
- explain によるSQLの分析結果をそのまま文字で見ても、どこに問題があるのか理解しづらいです。
- MySQL Workbenchの「Visual Explain」機能を利用すれば、SQLのどこに負荷がかかっているか、indexが利用されていないか図で表示されます。

[7.5 Tutorial: Using Explain to Improve Query Performance](https://dev.mysql.com/doc/workbench/en/wb-tutorial-visual-explain-dbt3.html)
[MySQL Workbench: VISUAL EXPLAIN でインデックスの挙動を確認する](https://engineering.linecorp.com/ja/blog/mysql-workbench-index-behavior-with-visual-explain/)

## exlainの結果、見つかった問題の対応
個人的によく見る問題と解決策を紹介します。

#### レコード数が多いテーブルを全件取得しているような場合
- 本当に最新かつ全件のレコードを取得する必要があるのか検討します。
    - 一部のレコードだけを取得するのでは問題があるか
    - 最新のレコードを取得する必要があるか。
        - 30分に1回取得してキャッシュに保持しているレコードを利用するようなことはできないか。

#### indexが利用されていない場合
テーブルにindexを設定します。

#### indexは期待通りに利用されているが、レコード数が多くて負荷が高くなっている場合
- 対象のデータが頻繁に更新されるものでなければ、キャッシュに保持してMySQLからの参照する回数を減らせないか検討します。
    - インメモリデータベース(Redis, memcached等) に取得結果を保存する。
    - 各言語のキャッシュのライブラリを利用して、MySQLからの取得結果を保存する。

#### 全文検索、位置情報による検索に時間がかかっている場合
- Elasticsearch等の MySQLよりも、やりたい検索処理に特化しているアプリケーションを利用することを検討します。
VSCodeのPHPUnit Test Explorerのテストをdocker内で実行するための設定

2022.6.15
VSCode Version 1.68
[Recca0120 PHPUnit Test Explorer](https://marketplace.visualstudio.com/items?itemName=recca0120.vscode-phpunit) v2.0.76
時点の情報です。
***

Laravelの開発ではsailなどを利用してdocker上で動作させながら開発を進めると思います。
その場合PHPUnitもdocker上で動作させる必要がありますが、PHPUnit Test Explorer拡張は設定を書かないと動作しませんでした。


うまく動くまでに嵌りどころがあったので完成した設定を共有します。
***

まず以下の内容のシェルスクリプトを準備します。
```
#!/bin/bash
docker-compose exec -T laravel.test php $@ | sed "s|/var/www/html/|`pwd`/|g"
```
私はvscode-phpunit-helper.shという名前で実行可能なファイルとして保存しています。

次にVSCodeのsettings.jsonに以下の内容の設定を加えます。
```
    "phpunit.relativeFilePath": true,
    "phpunit.phpunit": "/var/www/html/vendor/bin/phpunit",
    "phpunit.php": "`pwd`/vscode-phpunit-helper.sh",
    "phpunit.shell": "/bin/bash",
    "phpunit.args": [
        "-c",
        "phpunit.xml"
    ]
```
私の環境依存の部分もあると思うので、動作しない場合はいろいろといじってください。

それでは良い開発ライフを👍
Nonparametric probability density estimation, The Johns Hopkins University Press, RICHARD A.TAPIA

```r

#p.37
x=seq(-80,80,1)
y=(x-mean(x))/sd(x)
f0=3*y^2+2*(y)
s=7

Hermite=function(X,N){
if(N>0){
value=c(1,2*X)
for(j in 1:N){
value=c(value,2*X*value[length(value)]-2*j*value[length(value)-1])   
}
}else{
value=1  
}
return(value[-1])  
}


ite=2*10^4
eta=10^(-10)
a=rep(0.01,s+1)



for(l in 1:ite){

Hmat=array(0,dim=c(length(f0),s+1))  
aHvec=c() 
for(i in 1:nrow(Hmat)){
Hmat[i,]=Hermite(y[i],s)  
aH=0
for(j in 0:s){
aH=aH+sum(a[1:(j+1)]*Hermite(y[i],j))  
}
aHvec=c(aHvec,dnorm(y[i])*aH)
}
  
a=a-eta*(-2*t(Hmat*c(dnorm(y)))%*%c((f0-aHvec)/dnorm(y)))
S=sum((f0-aHvec)^2/dnorm(y))
#print(S)
  
}

plot(y,f0,xlim=c(min(y),max(y)),ylim=c(min(c(f0,aHvec)),max(c(f0,aHvec))),xlab="Y",ylab="f0",col=2)

par(new=T)

plot(y,aHvec,xlim=c(min(y),max(y)),ylim=c(min(c(f0,aHvec)),max(c(f0,aHvec))),xlab="Y",ylab="f0",col=3)

```

```r

#Probability density function　p.84
#Carmichael,Jean-Pierre(1976)

n=1000
x=rnorm(n)
x=x[x>(-pi)&x<pi]
n=length(x)
p=5

R=array(0,dim=c(p,p))
for(j in 1:p){
val=1-j  
valvec=c(val:(val+p-1))  
R[j,]=apply(exp(1i*t(t(valvec))%*%c(x)),1,mean)  
}
Rvec=apply(exp(1i*t(t(c((-1):(-p))))%*%c(x)),1,mean)
alpha=solve(R)%*%(-Rvec)
Kp=sum(c(1,alpha)*apply(exp(1i*t(t(c((0):(p))))%*%c(x)),1,mean))

fp=function(X){
value=sum(c(1,alpha)*exp(1i*c(0:p)*X))  
return(Re(Kp)/((2*pi)*(Re(value)^2+Im(value)^2)))  
}

fvec=c()
for(j in 1:length(x)){
fvec=c(fvec,fp(x[j]))  
}

plot(x,fvec)

```
[初心者] Javaソースコードの例文とその意味

```java
public class Sample {             
    public static void main(String[] args) {  //main + Tabキーで作成       
        System.out.println("Hello java");
        int i;
        i = 5;
        System.out.println(i);
    }
}
```



各行の意味は

　1行目は、SampleというClass名を持っているClassブロック
　　   Class名（1）Class名は名詞で作成
　　　         　　 （2）複数の動詞を合わせる場合、各単語の最初は大文字（CamelCase）

　2行目は、mainというMethod名を持っているMethodブロック
　Classブロックの中には複数ののMethodブロックが存在できる 
　　   メソッド名（1）メソッド名は動詞
　　　　　　　（2）複数の単語を合わせる場合、各単語の最初は大文字だが、名前の一番前は小文字
　　　　　　　　　　ex）runFast();

　3行目は、コンピュータに何をさせる命令文（Statement）で、
　このStatementは最後に必ずSemi colon（;）を付ける

　4～6行目は、iという整数型変数を宣言した後、変数に値を代入して命令文を入力した
   　　変数名（1）変数名は数字で始めることができない
　　　　　（2）"＄"と"＿"以外の記号は使用できず、"＄"と"＿"も開始文字としては使用できない
　　　　　（3）Javaのキーワードを変数名として使用できない 
             

　Javaのキーワード（予約語）とは、
　特定の用途で使用するためにJavaプログラムで事前に予約されている単語
　　ex）class, int, char, if, for,import, public, return, voidなど


上のJava文の結果は
Hello java
5
になる
M1 Mac、MontereyでPythonインストールするとreadline warning/SSL Errorが起きる場合の対処法

MontereyだとPythonを標準でインストールしなくなりました。
で、Pythonを使う場合、インストールする必要があるんですが、インストールした時にwarningやらエラーでハマったのでそれのメモ。
ちなみに、python2.xはサポート切れているので、基本的には3.xを入れるべきかと思います。


まず、インストールをぐぐりながら続けていくとこういうエラーが出ることがあります。

```
pyenv install 3.10.4
python-build: use openssl@1.1 from homebrew
python-build: use readline from homebrew
Downloading Python-3.10.4.tar.xz...
WARNING: The Python readline extension was not compiled. Missing the GNU readline lib?
ERROR: The Python ssl extension was not compiled. Missing the OpenSSL lib?
 
Please consult to the Wiki page to fix the problem.
https://github.com/pyenv/pyenv/wiki/Common-build-problems
```

readline/sslがはいってないとかそんなエラーです。
入れてあるのに探せていない。パスかな？と思いきや問題はもっと根本的な部分でした。

https://teratail.com/questions/kmozcuw4liza1s

症状としてはこちらと一緒。
M1 Macからは、ターミナルの情報をみるのプロパティ？を開くと、Rossetaを使用して開くというチェックがあります。
これは、Intel系にてterminalを使うかという切り替えになるわけですが。

これのチェックを入れて、brewやpyenvをいれたのか？いれてないのか？が大きい鍵です。

このリンク先にあるように、
Intel系で攻めるのか、M1系で攻めるのかをあらかじめ決めておく必要があります。

こちらでは、Intel系で攻めて対処した時のクイックメモを記載。

# 1. terminalにRossetaを使用して開くのチェックを入れる

# 2. brew/pyenvをインストールする
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install pyenv
```
これにより、/usr/local/bin/pyenvやら、/usr/local/bin/brewなどでインストールされます。

rossetaを使用して開くにチェックを入れない場合は、/opt/homebrew/bin/brewとかにインストールされるわけです。

# 3. .zshrc/.zprofileを変更
```.zshrc
eval "$(pyenv init -)"
```

```.zprofile
eval "$(pyenv init --path)"
```

とすると、インストールはすんなりできます。
```
pyenv install 3.10.4
python-build: use openssl@1.1 from homebrew
python-build: use readline from homebrew
Downloading Python-3.10.4.tar.xz...
-> https://www.python.org/ftp/python/3.10.4/Python-3.10.4.tar.xz
Installing Python-3.10.4...
python-build: use tcl-tk from homebrew
python-build: use readline from homebrew
python-build: use zlib from xcode sdk
Installed Python-3.10.4 to /Users/hogehoge/.pyenv/versions/3.10.4
```

M1版はリンク先を参考のこと。
【#0 エンジニア転職学習】学習ロードマップ

# はじめに
はじめまして、富山県に住んでいるChikaといいます。
現在は小売・製造のマーケティング部門で働いています。
自分でWEBサービスの開発をする仕事に転職したいと思い、現在バックエンドエンジニアになるべく勉強中です。

勉強自体はすでに途中まで進めている状況ですが、
勉強の過程やアウトプット学習をしたいと考え、Qiitaでの記事投稿をしていくことにしました。

投稿の目標として、毎日その日に学んだことをブログ記事として投稿していきます。

内容・記事の作りともに拙いですが、
とにかく投稿・アウトプットすることを第一目的としておりますのでご了承ください。
（学習教材のリンク等は後日追加修正をしていきます）


# 今回の内容
- 学習題材・選定理由
- 学習ロードマップ
- 現在の進捗

# 学習題材・選定理由
学習ロードマップの全体はブログ記事・Gitのロードマップ・Youtube等を見て必要な要素を選定しました。

開発言語としてGoを選択しました。
難易度・教材の豊富さから考えるとRubyやPHPを選ぶほうが無難と考えましたが、
今後もしくは現在の主流になっているであろう言語がいいと思いGoにしました。

CSやLinux、ネットワーク技術等はエンジニアとしてのベース構築のために並行していきます。
SQL・クラウド・コンテナ技術等は開発現場の主流になっているであろうものを中心に勉強していきます。

# 学習ロードマップ
  おおまかなステップと学習教材
### Phase1 基礎
   - Golang基礎理解
       - udemy
       - A Tour of Go　【公式】
   - コンピュータサイエンス
       - プログラムはなぜ動くのか　【書籍】
       - 螺旋本　【書籍】
   - web・ネットワーク
       - webのしくみ　【書籍】
       - TCP/IPマスタリング　【書籍】
   - フロントエンド（HTML＋CSS+JavaScript）の仕組み・役割
       - HTML・CSS　Youtube
       - JavaScript　Youtube
       - 模写
   - Linux
       - udemy講座
       - 新しいlinuxの教科書　【書籍】
   - Git
    - Udemyの無料講座
   - DB基礎
        - おうちで学べるデータベース　【書籍】
   - 簡単なミニゲーム・アプリを作る
 ### Phase2　ポートフォリオ作成
   - DB（MySQL）
       - udemy講座
       - 達人シリーズ　【書籍】
   - Goフレームワーク
   - AWS
   - コンテナ
        - 入門Docker　【公式】
        - Docker/Kubernetes 実践コンテナ開発入門　【書籍】
   - API周辺知識
       - RESTful API
       - JSON API
   - セキュリティ
   - test
   - Linter
   - CI/CD
   - リーダブルコード【書籍】
   - デザインパターン（SOLID,KISS,,YAGNI,DRY）
   - 設計
# 現在の進捗
Go基礎とCSは一旦ひととおり終了。
Linuxとフロントエンドについてはざっくりやったので、書籍・模写で知識を深めていくところ。
Web・ネットワークも書籍で並行して学習すすめています。
# おわりに
お読みいただきありがとうございました。
ご意見等いただけますと幸いです。
【yocto】各パッケージのバージョンを確認する方法

# はじめに
- bitbakeで生成される各パッケージ(レシピ)のバージョンを確認したい人向け
- tmpの下のログや生成物からバージョンを確認してもよいが、bitbakeコマンドでサクッと確認した人向け

# 方法
~~~
bitbake -s recipe-name
~~~

# 例
- bitbake前準備
~~~
takeshi@X250:~/yocto/poky$ source oe-init-build-env 
(略)
~~~

- `bitbake -s`を実行することで、パッケージとバージョンの一覧が表示される
~~~
takeshi@X250:~/yocto/poky/build$ bitbake -s core-image-minimal
(略)
xz                                                  :5.2.4-r0                          
xz-native                                           :5.2.4-r0                          
zip                                                   :3.0-r2                          
zip-native                                            :3.0-r2                          
zlib                                               :1.2.11-r0                          
zlib-native                                        :1.2.11-r0                          

Summary: There was 1 WARNING message shown.
~~~
「超初心者向け」MacにRubyを最速でインストール(更新)

# Mac Ruby インストール備忘録

いらないこと書く記事が嫌いなので、最小の内容だけ書きます。自分が手順を正確に踏めている自信がない場合は、調べてください。すいません。

## rbenv インストール

`brew install rbenv`

`rbenv -v`で確認可能。

## 次に、rbenv で目標の Ruby バージョンをインストール

`rbenv install -l`で、最近のバージョンを表示。`rbenv install -L`で全てのバージョンを表示。
ここで確認した`3.1.2`や、`truffleruby+graalvm-22.1.0`などを次のコマンドで使用します。

`rbenv install 3.1.2`を実行。この時、`3.1.2`をインストールします。

## rbenv で、最新版 Ruby を有効化

次に、`.zshrc`を編集します。
`code .zshrc`などで開き、

```
[[ -d ~/.rbenv ]] && \ export PATH=${HOME}/.rbenv/bin:${PATH} && \ eval "$(rbenv init -)"
```

を**最後尾**に入力。正確には、PATH=の後に書く。
当然なんだけどこの最後尾が忘れがち。

`rbenv global 3.1.2`で、最新版を有効化。

## `ruby -v`を実行してみてください。

多分 3.1.2 って出ます。
ブラウザキャッシュをクリアする方法(Chrome)

# 困りごと
CSSや画像の修正を行い、ローカルで起動してサイトを開いたところ永遠に変更が反映されない。
開発者ツールでソースを確認しても、明らかに修正が反映されていない。

## 対処方法①:シークレットウィンドウでページを開きなおす

シークレットモードとは閲覧履歴やcookieなどのデータが保存されないブラウザモードの一種です。
呼び方はブラウザにより異なりますが、どのブラウザでもシークレットモードが存在します。

Chromeの場合は以下の手順で開くことが可能です。

:::note info
Windows：Google Chromeを起動している状態で「Ctrlキー + Shiftキー + nキー」を同時押し
Mac：Google Chromeを起動している状態で「⌘キー+ Shiftキー+ nキー」を同時押し
:::

黒い画面が表示されたら、URLを入力して検証したいサイトを表示してください。

感覚的に70%ぐらいの確率で正しく反映されます、
が、正しく反映されないことがちらほら発生します…。

シークレットモードはキャッシュが残らないモードではあるものの、
正確には「シークレットウィンドウを閉じた場合に残らない」という状態を指しています。
そのため何回かシークレットモードで検証していると、やはりキャッシュが残って修正が反映されないという事態に陥ります。

## 対処方法②:(Chromeの場合)更新ボタンを右クリックしてみる
左上の更新ボタンを右クリックすると、以下の3つのメニューが表示されます。
* 通常の再読み込み (Ctrl + R)
* ハード再読み込み (Ctrl + Shift + R)
* キャッシュの消去とハード再読み込み

下に行くほど強いリロードになります。
確実にキャッシュが消えるのは**キャッシュの消去とハード再読み込み**です。
「ハード再読み込みの読み込み」でもWebページから直参照しているCSSや画像のキャッシュを破棄してリロードをしてくれるため、ある程度は正しく変更が反映されますが、
間接的に読み込まれるファイルについてはキャッシュが残り続けてしまうため、
やはり「キャッシュの消去とハード再読み込み」を実行するのが良さそうです。

# さいごに
キャッシュの対処法として、
* ブラウザの設定からキャッシュをクリアする
* URLにパラメータを付与する

など、他にも方法がいくつかありますが、手間も時間もかかるため、
対処法①を試して、駄目だったら対処法②を試してみるというのが個人的には手っ取り早くておすすめです。
AWSアカウントIDの作成日について

`Organization`で管理されているAWSアカウントは、`Organization`画面に`参加済み yyyy/mm/dd`・`作成済み yyyy/mm/dd`の表記があり。

- 参加済みは`Organization`に既存アカウントを紐づけた日
- 作成済みは`Organization`からアカウントを作成した日

がそれぞれ記載されています。

このため、`Organization`からAWSアカウントを作成した場合は、`作成済み yyyy/mm/dd`の日付から作成日を調べる事ができますが。

それ以外の方法で、AWSアカウントIDの作成日を調べる方法があるのか？　調べてみました。

探してみた所、公式のドキュメントにそれっぽい記述を見つけることはできませんでしたが、stackoverflowに参考になる記事がありました。

[Is there a way to find out the age of an AWS account?](https://stackoverflow.com/questions/8679018/is-there-a-way-to-find-out-the-age-of-an-aws-account/72382798#72382798)

この記事の中で言われている方法としては。

- 登録時のメール日付を確認する
- Billing画面の請求ページから作成した月を確認する
- IAMの認証情報レポートから確認する
- https://us-east-1.console.aws.amazon.com/billing/rest/v1.0/account　の　registrationDate　を確認する

とあり、今回はこの中の、IAMの認証情報レポートと`https://us-east-1.console.aws.amazon.com/billing/rest/v1.0/account`について確認してみます。

## IAMの認証情報レポートから

IAMの認証情報レポートを取得すると、ルートユーザの作成日がわかるのでそこからアカウント作成日がわかるようです。（アカウントを作成すると、ルートユーザが作成されるので）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/f1a08c61-3e60-b45e-668f-6568e3e73e16.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/86831eef-c45e-c83f-451d-9ff9fac099e5.png)

## https://us-east-1.console.aws.amazon.com/billing/rest/v1.0/account

今回、認証情報レポートを取得したアカウントは2016年9月3日にアカウント登録された事がわかります。

[Is there a way to find out the age of an AWS account?](https://stackoverflow.com/questions/8679018/is-there-a-way-to-find-out-the-age-of-an-aws-account/72382798#72382798)

>Login to your root account or any account that has access to billing.
>Then go to https://us-east-1.console.aws.amazon.com/billing/rest/v1.0/account
>You'll find the registrationDate in epoch format.

上記のようにコメントがあり請求にアクセスできるIAMユーザでログインして該当のエンドポイントにアクセスすれば良さそうです。

なお、`https://us-east-1.console.aws.amazon.com/`は[AWS Management Console service endpoints](https://docs.aws.amazon.com/general/latest/gr/mgmt-console.html)であることはわかりますが、それ以上の情報がみつけられませんでした。

アクセスすると、下記の情報が取得でき、`registrationDate`がエポック形式で作成日らしい。

```json:https://us-east-1.console.aws.amazon.com/billing/rest/v1.0/account
{"registrationDate":1472924969000,"customerId":"xxxxxx","accountStatus":"Active","accountRole":"Payer","accountId":"000000000000","userId":"","userName":"","fullName":"xxxxx","awsAccessKey":"","awsSecretKey":"","awsSecurityToken":"","iamuser":true}
```

`registrationDate`はmillisecondsのようなので変換してみると`2016年9月3日 17:49:29`となり、この日付は先程、認証情報レポートで取得した日時と一致します。

```PowerShell
# PowerShellでunix時間変換（.NetのdatetimeoffsetのFromUnixTimeMillisecondsメソッドを利用）
[datetimeoffset]::FromUnixTimeMilliseconds(1472924969000)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/f83484a0-070d-5d39-05a7-a860edf2f23c.png)

このエンドポイントについて、[AWS Management Console service endpoints](https://docs.aws.amazon.com/general/latest/gr/mgmt-console.html)`である事はわかりますが、それ以上の情報が見当たらなかったので詳細は不明となはなりますが、AWSアカウントの作成日について取得できそうです。

## 総評

AWSではごくまれに○年○月○日以前のアカウントならば、○○を選択できる。　みたいな事があったのでAWSアカウント作成日の確認方法について調べてみました。
vuetifyのv-spacerを入れると改行になる場合の対処法

# この記事 is 何

| 理想（アイコンが右にある） | 現実（アイコンが改行されてる） |
|:-:|:-:|
|  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/796120/73f886cb-c563-1143-b382-d9966abd197b.png) |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/796120/3bdd3be9-43c5-4a86-e673-899a6d3a3b13.png) |

こうなった時の対処法と原因を解説している記事です

# 環境

 - nuxt v2.15.8
 - vuetify 2.6.6
 - node v16.15.1
 - ブラウザ: Google Chrome 102.0.5005.115

# 対処法

`v-spacer` を適用したい親要素に `display: flex` を付与する


```vue:変更前
<template>
  <v-col cols="12">
    hogehoge
    <v-spacer />
    <v-btn> fugafuga </v-btn>
  </v-col>
</template>
```

```diff_vue:変更後
<template>
-  <v-col cols="12">
+  <v-col cols="12" class="d-flex">
    hogehoge
    <v-spacer />
    <v-btn> fugafuga </v-btn>
  </v-col>
</template>
```

# 解説

`v-spacer` が動作している仕組みをchromeの検証ツールで追うと

```html:Elements
...
<div data-v-b37ee9b2="" class="spacer"></div>
...
```

```css:styles
.spacer {
    flex-grow: 1 !important;
}
```

上記のように `div` に `flex-grow` をあてることで動作させてるらしい。
`flex-grow` は `flex` の子要素に対して適用させるプロパティのため、親要素が `display: flex` ではない場合、 `flex-grow` が無視される（動作しない）ため、動作していなかった。
改行された原因は `div` はブロック要素のため。

:::note info
`.d-flex` は該当要素を `display: flex` にするクラスです。
https://vuetifyjs.com/en/styles/display/#visibility
:::

# その他

（未調査） `v-spacer` は本来親要素となるコンポーネントが決まっている可能性はあるかも。有識者いらっしゃっいましたらコメントいただけると助かります。
MongoDB 自分用メモ find条件

## 全件find

```
db.inventory.find( {} )
```

## 条件find

The following example retrieves all documents from the inventory collection where status equals either "A" or "D":
```
db.inventory.find{ status: { $in: [ "A", "D" ] } }
```

## And条件
The following example retrieves all documents in the inventory collection where the status equals "A" and qty is less than ($lt) 30:

```
db.inventory.find{ status: "A", qty: { $lt: 30 } }
```

## Or条件

```
db.inventory.find{ $or: [ { status: "A" }, { qty: { $lt: 30 } } ] }
```

## And+OR条件
```
db.inventory.find{ status: "A", $or: [ { qty: { $lt: 30 } }, { item: /^p/ } ] }
```

## 入れ子検索

```
db.inventory.find{ size: { h: 14, w: 21, uom: "cm" } }
```
![スクリーンショット 2022-06-14 23.19.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632129/73dbac97-1e9c-cdd7-b407-9790e8e71181.png)

```
db.inventory.find{ "size.uom": "in" }
```
```
db.inventory.find{ "size.h": { $lt: 15 } }
```

## greater than/less than
```
db.inventory.find( { dim_cm: { $gt: 15, $lt: 20 } } )
```
Python勉強開始② product 2022/06/14

アルゴリズムと数学の問題を今日も解いています。
008 - Brute Force 1の問題でGithubにPythonの解答が見つからなかったのでうんうん唸りながら解きました。



問題文
赤・青のカードが各 1 枚ずつあり、あなたはそれぞれのカードに 1 以上 N 以下の整数を 1 つ書き込みます。

カードに書かれた整数の合計が S 以下となる書き方は、いくつありますか？


これは全探索と呼ばれるアルゴリズムのようで、productを使って以下のように書き上げることができました。


~~~
from itertools import product

N,S = list(map(int, input().split()))
l1 = range(1, N+1)

l = []
p = product(l1, l1)

for v in p:  
  sum = v[0]+v[1]
  if sum <= S:
    l.append(sum)

print(len(l))

~~~

何かもたついているような気もしますがどう変えたらいいのかわかりません。

ここでproductの基本的な使い方について記録を残しておこうと思います。

公式ドキュメントによると

ジェネレータ式の入れ子になった for ループとおよそ等価です。たとえば product(A, B) は ((x,y) for x in A for y in B) と同じものを返します。

だそうです。

入れ子のforは以下のようになるので
~~~
l1 = ['Tokyo', 'NY', 'Beijing']
l2 = [1, 2, 3]

for i in l1:
  for j in l2:
    print(i, j)
~~~
出力結果
~~~
Tokyo 1
Tokyo 2
Tokyo 3
NY 1
NY 2
NY 3
Beijing 1
Beijing 2
Beijing 3
~~~

これをタプルに入れてリストにすると 
~~~
print(list((i, j) for i in l1 for j in l2))

print(produce(l1, l2))
~~~
この二つが同じ結果になるということですね。
出力結果
~~~
[('Tokyo', 1), ('Tokyo', 2), ('Tokyo', 3), ('NY', 1), ('NY', 2), ('NY', 3), ('Beijing', 1), ('Beijing', 2), ('Beijing', 3)]
~~~

ここから先はお遊び。
同数のカードの組み合わせを見るようなイメージです。
~~~
l1 = ['春', '夏', '秋']
l2 = ['さくら', 'ひまわり', 'こすもす']

print(list(product(l1, l2)))

>>[('春', 'さくら'), ('春', 'ひまわり'), ('春', 'こすもす'), ('夏', 'さくら'), ('夏', 'ひまわり'), ('夏', 'こすもす'), ('秋', 'さくら'), ('秋', 'ひまわり'), ('秋', 'こすもす')]
~~~

スイーツのある日曜日。どの組み合わせにしようかな。
~~~
l1 = ['コーヒー', 'カフェラテ', 'ココア']
l2 = ['クッキー', 'チップス', 'チョコ']

print(list(product(l1, l2)))

>>[('コーヒー', 'クッキー'), ('コーヒー', 'チップス'), ('コーヒー', 'チョコ'), ('カフェラテ', 'クッキー'), ('カフェラテ', 'チップス'), ('カフェラテ', 'チョコ'), ('ココア', 'クッキー'), ('ココア', 'チップス'), ('ココア', 'チョコ')]
~~~

ケーキ屋さんで2種類選べるとしたら、repeat=2を使って全ての組み合わせを列挙できる。
~~~
l3 = ['ティラミス', 'モンブラン', 'ショートケーキ']
print(list(product(l3, repeat=2)))

>> [('ティラミス', 'ティラミス'), ('ティラミス', 'モンブラン'), ('ティラミス', 'ショートケーキ'), ('モンブラン', 'ティラミス'), ('モンブラン', 'モンブラン'), ('モンブラン', 'ショートケーキ'), ('ショートケーキ', 'ティラミス'), ('ショートケーキ', 'モンブラン'), ('ショートケーキ', 'ショートケーキ')]
~~~

もう少し数学と絡めた方が勉強になりそうだけど、今日はここまで...
【PHP基礎⑤】四則演算

［問題］　　(参照：http://www.cc.kyoto-su.ac.jp/~mmina/bp1/hundredKnocksBasic.html)
整数値を2つ入力させ、それらの値の和、差、積、商と余りを求めるプログラムを作成しなさい。
なお、差と商は1つ目の値から2つ目の値を引いた、あるいは割った結果とする。余りは無い場合も0と表示するのでよい。


# コード
```php
$a = intval(fgets(STDIN));
$b = intval(fgets(STDIN));
echo $a + $b, PHP_EOL;
echo $a - $b, PHP_EOL;
echo $a * $b, PHP_EOL;
echo $a / $b, PHP_EOL;
echo $a % $b;

```

↓
8
2　と入力


# 結果
```
10
6
16
4
0
```

☆改行したい時は、
～,PHP_EOL;　や　"\n"; を用いる。
[個人開発]一つのフォームをみんなで編集し合う掲示板を作ってみた！

今回作ったもの
https://www.synher.net/

最初の数秒は何もフォームに何も表示されないかもですがバグではないので、リロード等はしないでください。

# 初めに
一年ぶりとなってしまいましたが新しいwebアプリを作ってみました。それがSYNHERです。
![スクリーンショット 2022-06-14 225643.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/f059fb68-cab5-17cf-527b-43ca2d6555d3.png)

vueを使ったアプリで初めての公開になりました。

# 概要
![Animation2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/a3fcd33f-ea48-bb00-97d0-6b14b98fafbc.gif)

このようにリアルタイムでいろいろな人とフォームを編集して遊ぶアプリです。


# 何で作ったか
自分は「Reddit Place」という一つの板に1ピクセルごとに色を塗っていき協力して絵を作っていくというサイトが大好きです。大きな絵を描くためにネットを通じて知らない人と協力しあい、しだいにチームになっていく。。。という過程がネットの素晴らしさを具現化したようで好きです。

https://ja.wikipedia.org/wiki/Place_(Reddit)

自分もReddit Placeのようなものを作りたいと思い、Reddit Placeの文字版のsynherを作りました。

# 工夫した点
### ・パフォーマンス
##### ※修正前
vueのwatchで監視
↓
変更を検知
↓
変更内容を送信
↓
フォーム全体を更新

##### ※修正後
vueのinputで検知
↓
3秒ごとに送信・更新するタイマーをスタート
↓
送信・更新される
↓
しばらく変更がなかったらタイマーストップ

修正前は半角英数字やenterを連打されたとき、一文字打つたびに送信・更新されてとんでもなくサーバーに負荷がかかる仕様でした。

そこでwatchは使わず、inputで判定しタイマーを発火させて変更があるかぎり3秒に一回送信・更新して変更がなくなったら停止するという仕様にしています（そのせいでラグが少しある）。


### ・行数制限
行数を無限にすると改行されまくってデータが大きくなり更新が重くなる、ということがあり得るので50行までにしてあります。
色々なサイトがありますが殆ど上手くいきませんでした（おそらくvue3だから）。唯一下記のサイトではうまくいったので載せておきます。

https://joyplot.com/documents/textarea-%E5%85%A5%E5%8A%9B%E8%A1%8C%E6%95%B0%E5%88%B6%E9%99%90/


# 使用した技術
rails7（API）
vue3（フロント）
heroku
actioncable

その他gem
```
gem 'rack-cors'
gem 'dotenv-rails'
gem 'rack-attack'
gem "ridgepole"
```

# まとめ
Reddit Placeのようにはなれないかもしれないけど、一定人数には使ってほしいですね。。。
ということで改めて使ってみてください。宜しくお願いいたします。

https://www.synher.net/
🔰【自分用】学習したAWS、インフラ構築について簡単にまとめる

# はじめに
自身のオリアプデ使用したAWSサービスを中心に簡単にまとめていきます。

# システムをインフラから構築するメリット
インフラができるようになるメリット
### 自分でサービスを作れる
- サービスがリリースできる
- 開発する際のテスト環境を自分で作れるようになる
### システム全体で対応できる
- 障害があったときに、どこに問題があるか、切り分けられる。
- 対応策を考えるときにアプリケーションだけでなく、システム全体で対応できる

# AWSとは？
Amazon Web Servicesの略。Amazonが提供する**世界最大規模**のクラウドサービス。
※クラウドサービスとはインターネット経由で機能の提供を行うサービス。
特徴
- サービスが豊富
- リソースが柔軟（必要なときに必要な文だけ調達できる。例えば、サービスのキャンペーン時にアクセス数が増加することが考えられる場合、サーバーの台数を増やすなど。）
- 従量課金（使った分だけ。）

# インフラとは？
インフラストラクチャーの略。基盤。（生活インフラ=水道なんて言い方もしますね。）
業界ではサーバーやネットワークを指す。
### サーバー
クライアントに対して、サービスを提供するコンピューター
### ネットワーク
複数のコンピューターをつないで、データを送受信できるようにするもの

# ネットワークの概念
### リージョン
AWSの各サービスが提供されている地域。
リージョンに使えるサービスが異なる。基本的には東京リージョンを使う。（特に理由がなければ東京リージョン）

### アベイラビリティーゾーン
独立したデータセンター。どのリージョン内に、複数、離れて存在している。離れている理由としては、１つサーバが災害等で潰れても替えがきくように。

# VPC
AWS上に仮想ネットワークを作成できるサービス。
イメージとしてはリージョンの中に存在。VPCの中にアベイラビリティゾーンを設置。
### サブネット
イメージとして、アベイラビリティゾーンの中に存在。VPCを細かく区切ったネットワーク。例えばウェブサーバーはインターネットから見れて、データベースサーバーはインターネットから見えないようにしたい場合、サブネットを２つ作成し、１つを見れるように、もう１つは見れないようにする。などの使い方がある。
#### パブリックサブネット
インターネットから接続するためのサブネット。ウェブサーバーを設置。
#### プライベートサブネット
インターネットから隠すサブネット。データベースサーバーを設置。
### インターネットゲートウェイ
VPCとインターネットをつなげる仮想のルーター

# EC2
AWSクラウド上の仮想サーバー。
### AMI
インスタンス起動に必要なOSのイメージ。サーバーのテンプレートのようなもの。
### ストレージ
サーバーにくっつけるデータの保存場所。EC2は２種類のストレージがある。
#### EBS
- 高い耐用性と耐久性をもつストレージ。
- 他のインスタンスと付け替え可能
- Stop/Terminateしても保存可能
- スナップショットをS3に保存可能
- EBSの費用が別途発生
- OSやDBなど永続性と耐久性が必要なデータを置く
#### インスタンスストア
- インスタンス専用の一時的なストレージ
- 他のインスタンスと付け替え不可
- Stop/Terminateするとクリアされる。
- 無料
- なくなっていけないデータは置かない
- 一時ファイル、キャッシュなど、失われても問題がないデータを置く。

# Route53
AWSのDNSサービス。ネームサーバーの役割を果たす。
高可用性（システムが継続して稼働できる能力）なんと100%
### DNS
ドメイン名の管理システム。ドメイン名をIPアドレスに変換する。ネームサーバーと古リゾルバの２つから構成されている。
### ネームサーバー
ドメイン名とそれに紐づくIPアドレスが登録されているサーバー
### フルリゾルバ
IPアドレスを調べて教えてくれるサーバー
余談
ドメインとサーバー（IPアドレス）をDNSで紐付けなければドメイン名で検索しても、表示されない。
ドメイン名はお名前.comで購入（私の場合。特に理由はない。）

# RDS
フルマネージョンなリレーショナルデータベースのサービス。
ざっくりいうと、構築運用の手間を削減し、AWSエンジニアによるデータベース設計のベストプラクティスを適応。→コア機能の開発に注力できる。
物理サーバー設置→OSインストール→アップデート→バックアップ→スケーリング→アプリ最適化の物理サーバー設置からスケーリングまで自動でやってくれる。楽すぎぃぃ！！
### 利用可の名エンジン
- MySQL
- PostgreSQL
- Oracle
- Microsoft SQL Server
- Amazon Aurora
- MariaDB

# S3
S3は安価で耐久性の高いAWSのクラウドストレージサービス。
オリアプデは画像の保存場所として使用した。
1GB3円/月
バケット=データの保存場所
オブジェクト＝データ本体
キー＝オブジェクトの格納URL

# 作成したインフラ構成図（作成途中）
[![Image from Gyazo](https://i.gyazo.com/6ed1b7ffa274b9064cccbb2a9e81d9da.png)](https://gyazo.com/6ed1b7ffa274b9064cccbb2a9e81d9da)

# 終わりに
まだまだ、インフラ構成の旅は続く。
Docker・CircleCIを学んで導入したい。
EC2からmysqlでRDSに接続する

本記事ではEC2からRDSへPythonを通してアクセスしてみようと思います。
https://dev.mysql.com/doc/connector-python/en/connector-python-installation.html
こちらの記事を参考に進めていきます。
## 前提条件
* Amazon linux
* python3 version=3.7
* MySQLがインストールされている。
## コネクタ/Pythonのインストール
まず次のライブラリをインストールします。
```
$ pip install mysql-connector-python
```
次にRDSコンソール上でまずIAMロールを作成します。
https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/UsingWithRDS.IAMDBAuth.Connecting.Python.html
上記サイトを参考にします。
まずIAMデータベース認証の有効化を行います。これはRDSの「変更」から変更できます。
次にデータベースアクセス用のIAM ポリシーの作成していきます。
# 今後設定する

続いて
```
$ pip install pymysql
```
でpymysqlをインストールします。
次に必要な情報を設定し、RDSに設定します。
```python
import mysql.connector

rds_host = 'RDSのエンドポイント'
db_user = 'RDSのユーザ名'
db_password = 'RDSのパスワード'
rds_port = 3306
#RDBに接続する
connect = mysql.connector.connect(user=db_user,
                                  password=db_password,
                                  host=rds_host,
                                  port=rds_port,
                                  charset='utf8')
```
これで接続が完了です。
ではテーブルを作成してみましょう。
```python
with connect:
    with connect.cursor() as cur:
        cur.execute('CREATE DATABASE testdb')
        connect.commit()
```
MySQLでテーブルが作成されたか確認します。
以下のコマンドで接続できます。
```
$ mysql -h 'RDSのエンドポイント' -P 'ポート' -u 'ユーザ名' -p
Enter password:パスワードを入力
```
接続できたらデータベース一覧を取得します。
```sql
show databases;

+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
|                    |
| testdb             |
+--------------------+
```
しっかりテーブルが作成されているようです。
今後はpymysqlの使い方を徐々に覚えていきます。
Qiitaのタイトルが反映されない時の対処法

# 概要
☝のタイトルが反映されないという場合の対処法です。

# 前提
公式のページに記載の通り、タイトルは以下のように記載します。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

```
# これはH1タグです
## これはH2タグです
###### これはH6タグです
```

# 原因と対処法
**#とタイトルの間を半角空けないとタイトルが反映されません。**
以下の記載はNGです。
```
#これはH1タグです
##これはH2タグです
######これはH6タグです
```

お恥ずかしながら、解決にかなり時間をかけてしまいました…。
同じような悩みに直面した方がいらっしゃいましたら、お力になれれば幸いです。
Firebase Admin SDKでverify_id_tokenで例外になる

Firebase Admin SDKのauth.verify_id_token()で以下の例外が発生した。

```
Token used too early, 1655214908 < 1655214912. Check that your computer's clock is set correctly.
```

以下にclockの問題だという記述があるが、Firebase Admin SDKには緩和のパラメータclock_skew_in_secondsがない。
https://stackoverflow.com/questions/71915309/token-used-too-early-error-thrown-by-firebase-admin-auths-verify-id-token-metho

単にPCの時刻を同期したら解決した。
Windowsでは [今すぐ同期] ボタン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44912/0690c8a9-a966-7729-2f3c-95d2f17f659d.png)
webfontは使いたいけど重くて使いづらい。そんな悩みを解決するWebFontLoader

## はじめに

- LPやWeb制作を行う上で大事なフォント。高級感のあるフォント、信頼感をイメージ付けるフォントなど、そのサイトのイメージにあったフォントを選ぶことでユーザーに与える印象は大きく変わります。
- そこでよく使われるのがGoogle Fontsです。無料で使える上に、導入がとても簡単なのがいいですよね。でもGoogle Fontsのデメリットはなんといっても重い、つまり表示に時間がかかってサイトの読み込みに影響が出てしまうこと。
- そんなGoogle Fontsを非同期で読み込んでサイトの読み込みスピードを上げる方法を書いていきたいと思います。
  
## 通常のGoogle Fontsの使い方

- 通常は[Google Fonts](https://fonts.google.com/)にアクセスして読み込みパスを取得、使いたいサイトのhtml、もしくはcss内に追記して使います。

### Robotoの場合

- Google Fontsでよく使われている`Roboto`を使用したい場合、下のように読み込みパスを追加する必要があります。

#### htmlの場合

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
```

#### cssの場合

```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
```

- あとはcssで`font-family: 'Roboto'`を指定します。

```css
font-family: 'Roboto', sans-serif;
```

- コードとしてはたったこれだけですが、指定したURLからcssをダウンロードしてくるのでどうしても読み込み速度が遅くなりがちです。
- Webフォントは種類が豊富で魅力的ですが、その反面上記のような読み込み速度が問題になります。

## Web Font Loaderの使い方

- Google Fontsを使用したサイトの表示をより早く（読み込みを短く）するために有効なのがWeb Font Loaderによる非同期での読み込みです。

```js
window.WebFontConfig = {
  google: {
    families: ['Roboto']
  },
  active: function () {
    sessionStorage.fonts = true;
  }
};

(function () {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
```

- `families: ['Roboto']`で使用したいGoogle Fonts名を指定します。
- font-weightを指定する場合は、`[Roboto: 300,400,500,700]`のように記載します。
- 日本語フォントの場合は`families: ['Noto+Sans+JP']`のように、間にあるスペースを`+`でつなげます。
- 複数フォントを使用する場合は、`families: ['Noto+Sans+JP', 'Roboto']`とカンマでつなげることで使用できます。
- LP一枚だけに使用する場合は上記のコードをインラインなどで直接記載してもいいかと思いますが、複数ページ使用する場合は外部ファイルに切り分けて呼び出す形でも便利です。

```webFontAjaxLoader.js
function webFontAjaxLoader(font) {
  window.WebFontConfig = {
    google: {
      families: font
    },
    active: function () {
      sessionStorage.fonts = true;
    }
  };

  (function () {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
}
```

- 呼び出し元で`webFontAjaxLoader(['Roboto', 'Noto+Sans+JP']);`と使用したいフォント名を引数に渡してあげればOK。
- あとは通常の使い方と同じようにcssで`font-family: Roboto, 'Noto Sans JP';`と指定すればGoogle Fontsを使用できます。
- Google Fontsの読み込みパフォーマンスを上げることはサイト表示速度を上げるのに効果的です。ご興味のある方はぜひ試してみてください。
Rubyを3.1系から2.7系にバージョン変更した際に起きたエラー

<h2>初めに
<p>バージョン変更をする必要があった理由はロリポップマネージドクラウドを使い、自作アプリのデプロイを考えたからです。

バージョン変更前はRuby 3.1.1を使用し開発していましたが、ロリポップマネージドクラウドでは2.7系の開発環境が必要なようです。（念の為問い合わせました）

<h2>バージョン変更
<p>バージョン変更方法に関しての詳細は省略しますが、参考にしたサイトとしてこちらを挙げさせていただきます。
</p>

[Ruby 3.0.0 から 2.7.2 にダウングレードさせる。](https://qiita.com/wonderglot/items/93cbfc7cb961c5ceb7a7)

<p>私はこのサイトを参考にし、3.1.1から2.7.0にバージョン変更を行いました。

<h2>発生したエラー
<p>バージョン変更後に発生したエラーのログはこちらです。

`/Users/tamio/.rbenv/versions/2.7.0/lib/ruby/2.7.0/net/protocol.rb:66: warning: already initialized constant Net::ProtocRetryError
/Users/tamio/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/net-protocol-0.1.3/lib/net/protocol.rb:68: warning: previous definition of ProtocRetryError was here
/Users/tamio/.rbenv/versions/2.7.0/lib/ruby/2.7.0/net/protocol.rb:206: warning: already initialized constant Net::BufferedIO::BUFSIZE
/Users/tamio/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/net-protocol-0.1.3/lib/net/protocol.rb:208: warning: previous definition of BUFSIZE was here
/Users/tamio/.rbenv/versions/2.7.0/lib/ruby/2.7.0/net/protocol.rb:503: warning: already initialized constant Net::NetPrivate::Socket
/Users/tamio/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/net-protocol-0.1.3/lib/net/protocol.rb:504: warning: previous definition of Socket was here
<internal:trace_point>:346: [BUG] Segmentation fault at 0x0000000000000008
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091)`

<p>初めに言っておくと、このエラーログを理解しようとすることは、おすすめしません。

実際に私も(https://github.com/ruby/net-imap/issues/16)
こちらのサイトを参考にし、Gemfileにnet-httpを追加したりしましたが、新たなエラーが発生するなど、解決することが出来ませんでした。

<h2>解決した方法
<p>私自身では解決することが出来なかったので、

https://app.slack.com/client/T5LLAJ415/CLQUG7B3M/thread/CLQUG7B3M-1654406926.525459

こちらのRubyに関するSlackワークスペースで質問をさせて頂くことで解決に至りました。

解決した方法は2.7.0に変更していたRubyのバージョンを、2.7.6に変更したという単純なものです。

発生していたエラーが2.7.1以前特有のエラーだったようで、バージョンを2.7系最新に変更するだけで解決することが出来ました。

最新バージョンでは修正されているエラーも存在するので、取り敢えずパッチバージョンを最新にしてみると良いのかな、と感じました。

<h2>最後に
<p>簡単なエラーであったとしても、ネット上で情報があまりなかったり、自分では気付けないということもあるので、質問することが出来たのは大変有り難かったです。

この記事をご覧になられた初心者の方がいれば、ぜひ先程話したワークスペースなどで質問することをおすすめします。

最後に、初めての投稿というのもあり、読みにくい点も多かったと思います。
アドバイスなどがあれば、コメントください。
Rust 001

# プロローグ
Rustを触ったことがなくて，せっかく触るのであれば悪戦苦闘する様を残しておこうと思い，
qiitaに記録してみる．　

# まずは
インストールから．公式 https://www.rust-lang.org/ja によれば
```
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
```
を実行すれば良いとのこと．
実行すると， defaultはここだけどどうする？　みたいなことを聞かれるが，特にこだわりもないので default でインストール．
```
1) Proceed with installation (default)
2) Customize installation
3) Cancel installation
>1
```
↑選択肢を与えられるので， 「1」 を選択した．

あと c compiler が必要とのこと．すでにgccを入れているので，そのエラーみたいなのはでず．


# Hello World !!
を書くしかないので，書きます．

```rust:main.rc
fn main(){
   println!("Hello, World!!");
}
```
こんなのをとりあえず書けば良いそうです． 

```bash
rustc main.rc
```
で compile. main ができるので

```bash
./main
```
で実行．すると，

```bash
Hello, World!!
```

と表示される．　ここまでは流石に大丈夫でした．
【PHP基礎④】掛け算

［問題］　　(参照：http://www.cc.kyoto-su.ac.jp/~mmina/bp1/hundredKnocksBasic.html)
整数値を入力させ、その入力値を3倍した計算結果を表示するプログラムを作成しなさい。


# コード
```php
$a = intval(fgets(STDIN));
echo $a * 3;
```

↓　入力フォームに「30」と入力

# 結果
```
90
```



☆算術演算子
足し算　→　a + b
引き算　→　a - b
掛け算　→　a * b
割り算　→　a / b
割り算の余り　→　a % b
CloudFormationでインフラのコード化に挑戦したい①

## はじめに
AWSを勉強し始めて1ヶ月半。そろそろ「インフラのコード化」もぼちぼち挑戦してみたいなと思い、Qiitaにアウトプットしつつ挑戦してみることに。
まず、シンプルな以下の環境のコード化を目指すことに。
* パブリックサブネットにEC2を1台
* プライベートサブネットにRDS
* VPCにはELBを設置
* VPC内にS3を設置

苦戦しそう。

## 1. Templateを作成する
* YAMLかJSONのどっちかで書く
  - エラー箇所を限定するために、構成要素ごとに細かく区切ってエラー確認
  - VScodeが便利か?
  - インデント管理に厳しいらしい
  - タイプミス、インデント管理をサポートしてくれる親切な拡張機能があるのでは?

##  2. TemplateをCloudFormationに通す
* そうすると、インフラ環境と、その管理人?であるStockというものが出来上がるらしい?
* 環境構築のプロセスのどこか一つでも失敗したら、何も建造されない。ただしStockだけは誕生する?
* インフラ構成要素を弄ると、Stockはそれを検知する
* Templateを再読み込みさせることもできる模様
* デザイナーとかいう機能でエラーチェックができるらしい?

上手くいくだろうか。
PHPで数値のカンマ区切りプログラムを作成しました。

Webアプリケーションで数値のカンマプログラムを作成しました。
ソースコードを公開します。

注) 今回はJavaのFormatter、PHPのnumber_format関数は使用禁止という条件です。

条件を入れ忘れましたので追記いたします。


canma.php(入力側)

```PHP
<!--   カンマ区切りプログラム -->
<!--   新規作成  2022/06/13-->
<!--   作成者  乃木坂好きのITエンジニア-->
<!DOCTYPE html>
<html lang="ja">

<!--  ヘッダー部分-->    
<head>
    <meta charset="utf-8">
    <title>カンマ区切りプログラム</title>
    <script type="text/javascript"> 
        function check(){
            //変数の定義
            const number = document.getElementById('number');
    
  
            if(number.value.replace(/\s+/, '').length == 0 ){
                alert('数字が入力されていません');
                return false;
            } else {
                if(window.confirm('送信してよろしいですか？')){ // 確認ダイアログを表示

		          return true; // 「OK」時は送信を実行

	           }  else{ // 「キャンセル」時の処理

		          window.alert('キャンセルされました'); // 警告ダイアログを表示
		          return false; // 送信を中止
               }

	       }

        }

    </script>
</head>
    
<!--  ボディー部分-->    
<body>
    <h1>数値入力フォーム</h1>
	<form id = "entry" action="canma_result.php" method="post" role="form" onSubmit="return check()">
        <div class="form-group">
            <dd>数字を入力してください
            <dt> <span class="must"> * </span></dt>     
            <dd> <label>数字記入欄</label></dd>
            <dd> <input type="text" name="number" id="number"></dd>
        </div>
        <p></p>
        <button type="submit" id="submit" >カンマ区切り数字表示</button>
    
	</form>
       
</body>
<footer>
    <small> by 乃木坂好きのITエンジニア</small>
</footer>
</html>
```

canma_result.php(結果を出力）
```PHP
<!--   カンマ区切りプログラム -->
<!--   新規作成  2022/06/13-->
<!--   作成者  乃木坂好きのITエンジニア-->
<!DOCTYPE html>
<html lang="ja">

<!--  ヘッダー部分-->    
<head>
    <meta charset="utf-8">
    <title>結果</title>
</head>
    
<!--  ボディー部分-->    
<body>
    <?php
            $data = $_POST['number'];
            $fu_flag = 0;
            if ($data < 0){
                $fu_flag = 1;
                $data = $data * (-1);
            }
            $array = str_split($data);
            $num = count($array);
            $amari = ($num - 1) % 3;
            $str = "";
            for($i=0;$i<$num;$i++){
                $str = $str . $array[$i];
                if(($i % 3 == $amari) && ($num - $i > 1)){
                    $str = $str . ",";
                }
            }
            if ($fu_flag == 1){
                $str = "-" . $str;
            }
            echo "<p>" . $str . "</p>";
            echo "<a href='canma.php'>元に戻る</a>";
    ?>    
       
</body>
<footer>
    <small> by 乃木坂好きのITエンジニア</small>
</footer>
</html>
```
XFS とは？LVMと何が違うの？

## 勉強前イメージ

ファイルシステムの種類？

## 調査

### XFS とは

SGIが開発したジャーナリングファイルシステムになります。
拡張性の高い、高性能なファイルシステムでredhat7のデフォルトファイルシステムになります。

### XFSの特徴

- ジャーナリング

データを書き換える際に、一旦ジャーナルという領域に保存してから書き換えを行います。
これで突然の電源断などでもジャーナルのデータを参考することで復旧を行うことが出来ます。

- 上限の向上

64bitファイルシステムであることが特徴で、900TBのファイルを扱うことが出来ます。
大規模サーバ向けのファイルシステムと言えます。

- アロケーショングループ

ファイルシステム全体をアロケーショングループという領域に分割して
それぞれでinodeや空き領域を管理し並列処理が可能になります。

### LVM とは

logical volume manager の略で、UNIX系OSで利用できるディスク管理機能です。
複数のHDDやパーティションにまたがった領域をVGにまとめて単一のLVとして扱うことが出来ます。

詳細は [こちら](https://qiita.com/miyuki_samitani/items/ee3f93fa82d6ada1fa37) をごらんください

### XFSとLVMの違い

- XFS : ファイルシステムの種類
- LVM : ディスク管理機能

## 勉強後イメージ

全然別ものだった・・・・
容量追加をしたときに何もわからなかったのでちゃんと勉強しないといけない

## 参考

- [LVM（logical volume manager：論理ボリューム管理）](https://linuc.org/study/knowledge/415/)
- [XFS](https://linuc.org/study/knowledge/428/)
- [今から始めるRHEL 7 第2回 標準ファイルシステムとなったXFS](https://www.intellilink.co.jp/column/oss/2015/090200.aspx)
【java】文字変換に関するコード一覧

# 概要
文章変換ツールを作成する中で、
Javaの文字変換に関するコードを調べたので備忘録として整理しておく。

# 環境
・Java 11

# 文字の削除

## 全角スペースを削除する
```
//変換をしたい文字列
String beforeConvertWord = "aaa　aaa　aaa";

//全角スペースを削除
String value = beforeConvertWord.replaceAll("　", "");

//変換結果を出力
System.out.println(value);
```

実行結果
```
aaaaaaaaa
```

## 半角スペースを削除する
```
//変換をしたい文字列
String beforeConvertWord = "aaa aaa aaa";

//半角スペースを削除
String value = beforeConvertWord.replaceAll(" ", "");

//変換結果を出力
System.out.println(value);
```

実行結果
```
aaaaaaaaa
```

## タブを削除する
```
//変換をしたい文字列(\tはタブの正規表現)
String beforeConvertWord = "aaa\taaa\taaa";

/タブを削除
String value = beforeConvertWord.replaceAll("\t", "");

//変換結果を出力
System.out.println(value);
```

実行結果
```
aaaaaaaaa
```

## 指定の文字を削除する
```
//変換をしたい文字列
String beforeConvertWord = "テストてすとテスト";

//削除をしたい文字
String deleteWord = "てすと";

//指定文字を削除
String value = beforeConvertWord.replaceAll(deleteWord, "");

//変換結果を出力
System.out.println(value);
```

実行結果
```
テストテスト
```

# 文字の変換
## 半角文字を全角文字に変換

ライブラリに以下を追加する。
```:maven
<!-- https://mvnrepository.com/artifact/org.terasoluna.gfw/terasoluna-gfw-string -->
		<dependency>
			<groupId>org.terasoluna.gfw</groupId>
			<artifactId>terasoluna-gfw-string</artifactId>
			<version>5.6.1.RELEASE</version>
		</dependency>
```

クラスにimport文を記載する。
```
import org.terasoluna.gfw.common.fullhalf.DefaultFullHalf;
```

```
//変換をしたい文字列
String beforeConvertWord = "aaaAAA123";

//半角文字を全角文字に変換
String value = DefaultFullHalf.INSTANCE.toFullwidth(beforeConvertWord);

//変換結果を出力
System.out.println(value);
```
実行結果
```
ａａａＡＡＡ１２３
```

## 全角文字を半角文字に変換

ライブラリに以下を追加する。
```:maven
<!-- https://mvnrepository.com/artifact/org.terasoluna.gfw/terasoluna-gfw-string -->
		<dependency>
			<groupId>org.terasoluna.gfw</groupId>
			<artifactId>terasoluna-gfw-string</artifactId>
			<version>5.6.1.RELEASE</version>
		</dependency>
```

クラスにimport文を記載する。
```
import org.terasoluna.gfw.common.fullhalf.DefaultFullHalf;
```

```
//変換をしたい文字列
String beforeConvertWord = "ａａａＡＡＡ１２３";

//全角文字を半角文字に変換
String value = DefaultFullHalf.INSTANCE.toHalfwidth(beforeConvertWord);

//変換結果を出力
System.out.println(value);
```
実行結果
```
aaaAAA123
```

## 小文字を大文字に変換する
```
//変換をしたい文字列
String beforeConvertWord = "hello world!";

//小文字を大文字に変換
String value = beforeConvertWord.toUpperCase();

//変換結果を出力
System.out.println(value);
```
実行結果
```
HELLO WORLD!
```

## 大文字を小文字に変換する
```
//変換をしたい文字列
String beforeConvertWord = "HELLO WORLD!";

//大文字を小文字に変換
String value = beforeConvertWord.toLowerCase();

//変換結果を出力
System.out.println(value);
```
実行結果
```
hello world!
```