OmniAICreator/Qiita-1.07M huggingface dataset:
FizzBuzz問題をJavaScriptで解く

私が通っているスクールで、FizzBuzz問題を解いてこい！っていう課題が出たので、ついでに記事にします。もっとこうした方がきれいに書けるよ！記事として読みやすいよ！等ありましたら、是非コメントお願いします。
スクールHP↓
[SUNABACO](https://sunabaco.com/ "SUNABACO TOP")
# FizzBuzz問題
0~100までの数字を出力する。そのうち、3の倍数で「Fizz」、5の倍数で「Buzz」と出力する。ただし、両方の倍数の場合は「FizzBuzz」と出力する。
（1~任意の数字までを出力するというのが一般的みたいです。）

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15　…
↓
FizzBuzz 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz　…
といった具合

### 条件整理
1. 0~100までの数字を出力する
2. 3の倍数の場合は「Fizz」
3. 5の倍数の場合は「Buzz」
4. 3、5両方の倍数の場合は「FizzBuzz」とする
5. 1~4の条件を組み合わせる

#### 実際に解いてみる
<ol><li> 0~100までの数字を出力する
　　

```js
for (let i = 0; i < 101; i++) {
    console.log(i)
}
```

<li> 3の倍数の場合は「Fizz」

3の倍数=3で割り切れる数　なので、```i % 3 === 0```をif文の条件とする。5、15の倍数も同様


```js
for (let i = 0; i < 101; i++) {
  if (i % 3 === 0) {
  console.log("Fizz");
  }
}
```

　　
<li> 5の倍数の場合は「Buzz」

```js
for (let i = 0; i < 101; i++) {
  if (i % 5 === 0) {
  console.log("Buzz");
  }
}
```

　　
<li> 3、5両方の倍数の場合は「FizzBuzz」とする

3、5両方、つまり15の倍数の場合は

```js
for (let i = 0; i < 101; i++) {
  if (i % 15 === 0) {
  console.log("FizzBuzz");
  }
}
```

<li> 1~4の条件を組み合わせる

ここで、FizzBuzz条件のif文を最初に置くのがポイント。Fizz、Buzz条件のif文を先に置いてしまうと、そちらの条件に引っかかってしまう。

```js
for (let i = 0; i < 101; i++) {
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else {
    console.log(i);
  }
}
```

#### おまけ
0はFizzBuzzの条件の例外としてそのまま出力する、というおまけ？課題も出たので、載せておきます。

```js
for (let i = 0; i < 101; i++) {
  if (i % 15 === 0 && i !== 0) {
    console.log("FizzBuzz");
  } else if (i % 5 === 0 && i !== 0) {
    console.log("buzz");
  } else if (i % 3 === 0 && i !== 0) {
    console.log("fizz");
  } else {
    console.log(i);
  }
}
```
【2022年版】駆け出しフロントエンドエンジニアが覚えたい用語一言メモ集

### 前書き
この記事では駆け出しフロントエンジニアが覚えたい用語について一言でまとめてあります。

「Babelって聞いたことあるけどどういう意味だっけ？」
「ES6の記法をES5以前の記法に直してくれるのってトランスパイラだっけ・・・？コンパイラ・・・？」

のように単語と意味が合致してない人が思い出せたり、記憶を定着させるように作成しました。

思い出したい時に見てもらえるといいかもです！


## 用語集

**HTML**
>Webページを構成するための言語。タグで文章を囲むことでテキストにリンクを付けたり文字を強調させたりすることができる。

**CSS**
>HTMLで作られた文章に色を付けたり文字サイズを変更したりと装飾をする言語。

**JavaScript**
>アニメーションを付けたりサーバーから情報を取得できたりと動的なWebページを作るのに使用される言語。ブラウザで動かすことができる。

**TypeScript**
>JavaScriptに型をつけた静的型付け言語と呼ばれ、開発中にエラーを出してくれるため安全に開発することができる。

**jQuery**
>JavaScriptを簡単に記述できるように作られたライブラリ。Web制作会社ではよく使われているが、モダンなWeb系企業では使われていない。

**Node.js**
>JavaScriptでサーバーサイドを扱えるようにした言語。

**React**
>Facebook社(現Meta)が開発したUIを構築するライブラリ。ページを更新した際に差分を検知してその差分のみを変更するため表示を切り替えるのが高速でできる。SEOに弱い。

**SPA**
>Single Page Applicationの略。一度訪れたページから別のページに遷移をすることなく、同一のページ内でコンテンツのみを切り替えるアプリケーション。

**Next.js**
>Reactのフレームワーク。サーバーサイドでレンダリングするためSEO的に有利になったりスペックの低いPCでも早く表示できるようのが特徴。

**サーバーサイドレンダリング(SSR)**
>ReactやVueで作られたWebページはブラウザでHTMLをレンダリングするが、サーバーサイドレンダリングはサーバーでHTMLをレンダリングする。

**クライアントサイドレンダリング(CSR)**
>ReactやVueでWebページを作る際にブラウザでレンダリングすること。

**コンパイラ**
>プログラミング言語で書かれたものを機械語に翻訳すること。

**ビルド**
>ソースコードにバグがないかを解析し、問題がなければ実行できる形のファイルに変換すること。

**デプロイ**
>開発したアプリをAWSやサーバーに公開することで誰でも利用できるようにすること。

**トランスパイラ**
>とあるプログラミング言語を別の言語に変換すること。例)ES6で書かれたJavaScriptをES5以前のものに変換する

**Babel**
>ES6で書かれたJavaScriptをES5以前のものに変換するツール。Internet Explorer11等の古いブラウザではES6の記法では動作しないためES5に変換する必要がある。

**Webpack**
>複数のファイルをよしなに一つのファイルにまとめてくれるツール。主にJsファイルをまとめる時に使われる。

**npm**
>Node Package Managerの略。Node.jsのパッケージを管理するツール。

**API**
>Application Programming Interfaceの略。特定の機能を公開して、外部のソフトウェアからでも同じ機能を共有できるようにしたもの。


**Prettier**
>コードを整形してくれるツール。

**ESlint**
>JavaScriptやTypeScriptなどの静的解析ツール。構文エラーを検知したり、独自のルールを設定できるためコードの綺麗にできる。

**UI(ユーザーインターフェース)**
>User Interfaceの略。サイトの見た目や使いやすさのこと。

**UX(ユーザーエクスペリエンス)**
>User Experienceの略。サービスを通してユーザーが得られる体験のこと。

## まとめ

最後までご覧いただきありがとうございました！

僕もまだまだ駆け出しエンジニアで覚えることが山ほどあります:sweat_smile:
そんな僕と一緒に成長してくださる方がいれば是非、[Twitter](https://twitter.com/Jackpackeeer "ジャックのTwitter")をやっているのでつながりましょー！

フォローしてくださったらメッセージもらえると嬉しいです！
GoogleEarth上でGPSのルートを移動するツアーの作成

![tour (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2591762/c2e8872c-7a4e-859a-9d46-a8cf57d4eb1c.gif)

## 概要

トップの動画のようにGoogleEarth上で、あるルートを移動するツアープロジェクトを作成する方法です。この動画は、三重県をサイクリングしたときのGPSデータから作成しました。
GPSデータを3D空間上で表示したいと思ったのですが、3D空間をフリーで提供しているサービスはGoogleEarthしか見つからなかったため、最終的にKMLファイルにツアーを記述して、GoogleEarthにレンダリングしてもらう方法にたどり着きました。

## 作成方法

基本的な説明は[Googleのドキュメント](https://developers.google.com/kml/documentation/touring?hl=ja)に書いてある通りです。ドキュメントには比較的遠い距離を飛ぶサンプルしかありませんが、近距離のデータを多数つなぎ、ルート上を移動しているように見せることができます。

ではKMLファイルにGoogleEarthが解釈できるツアー要素を記述していきます。基本的な構造は、以下のような形です。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<kml
  xmlns="http://www.opengis.net/kml/2.2"
  xmlns:gx="http://www.google.com/kml/ext/2.2"
>
  <gx:Tour>
    <gx:Playlist>
      ここにgx:FlyTo要素を足していく
    </gx:Playlist>
  </gx:Tour>
<kml>
```

\<gx:Playlist>の中に\<gx:FlyTo>要素を追加していくことで、各地点間を移動することができます。

一般的なGPSデータは、位置一点分のデータとしてタイムスタンプと位置情報(緯度、経度、標高)が含まれており、それが複数個集まって一つのルートになっています。そこでGPSデータをJavaScriptやPythonなどで読み込み、そのデータを使って\<gx:FlyTo>内に視点を制御する\<Camera>要素と、時間を制御する\<gx:duration>の数値を指定します。
位置一点分のデータに対応する\<gx:FlyTo>要素は以下のような形です。

```xml
<gx:FlyTo>
  <gx:duration>2.0</gx:duration>
  <gx:flyToMode>smooth</gx:flyToMode>
  <Camera>
    <longitude>x.xx</longitude>
    <latitude>y.yy</latitude>
    <altitude>z.zz</altitude>
    <heading>h.hh</heading>
    <tilt>t.tt</tilt>
    <altitudeMode>absolute</altitudeMode>
  </Camera>
</gx:FlyTo>
```

視点(Camera)の位置(longitude、latitude)はGPSデータを使います。高さ(altitude、altitudeMode)は標高データを使いますが、少し下駄を履かせたほうがGoogleEarth上の3Dオブジェクトに押されにくくなり、鑑賞時に見やすいです。
向き(heading)は位置2点分のデータを使って計算します。傾き(tilt)はいくつか試して良さそうな数値を探します。
durationはこの位置に移ってくる時間ですが、位置間の移動速度が最大100km/h程度であれば。私の3年前のスマホで十分キレイにレンダリングされます。
向きや距離の計算には、Node.jsの場合[geolib](https://www.npmjs.com/package/geolib)が便利です。

上記のようなKML構造をテンプレート文字列化してfunction化し、引数として数値を渡すとKMLファイルができあがります。注意点としては、

* 3D描画中、ビルなどの3Dオブジェクトよりも視点が低いと、視点がオブジェクトの高さに瞬間移動する
* レンダリングが遅いデバイスや、通信速度が遅い環境だとカクついたり、建物がきれいに描画されなかったりする

などがあります。視点の高さを高くしたり、durationを長くとることで多少の改善が可能です。

以上です。もっと実在の場所をモデル化した3D空間が気軽に扱えると面白そうなのになぁ。。。
配列を回転させる

## 問題
要素がn個の配列を左方向にi要素分回転させる  

例）012345 を 3つずらして 345012 にする

```
n: 6
i: 3

処理前　|0|1|2|3|4|5|
処理後　|3|4|5|0|1|2|

```

## 考え方

```
# 定義
a : 0〜i要素分（012）
b : 残り（345）
a': aの逆転（210）
b': bの逆転（543）


# 流れ
1. ab     : 012345
2. a'b    : 210345 // reverse(0, i-1)
3. a'b'   : 210543 // reverse(i, n-1) 
4. (a'b')': 345012 // reverse(0, n-1)
```

## 参考書籍
珠玉のプログラミング 本質を見抜いたアルゴリズムとデータ構造  
https://amzn.to/3N5mMTI
【amplify】signIn機能実装にて、認証が済んでいない場合のエラーハンドリングについて

# :beginner: はじめに
`signIn/signUp`周りの流れとして、**signUp > 認証メールが送られる > 認証画面でコード入力 > 認証完了画面 > signInページでsignIn > HOME**　というような流れで進めようとしています。

# :question:  困ったこと
今回の困ったポイントとして、認証画面で**認証コードを入力せずに**signInページなどにURLなどを変更して行った場合(そもそもここを行けないようにする必要がある？)、認証ページに戻る導線がありませんでした。

そこで、仮にsignInページでメアド・パスワードを入力しても、**エラーとして返ってきた内容によって**認証ページに遷移させたりする機能を実装することにしました。

# :pick: どうやったか
結論からいうと、`try/catch`構文を使って`catch(err)`に返ってきたerrに**"UserNotConfirmedException"**と返ってきたら認証ページ、それ以外はalert("サインインに失敗しました")とページ遷移/表示されるようにしました。

# :computer: コード

```typescript
export const signIn = async (params: SignIn) => {
  try {
    const username = params.email;
    const password = params.password;
    const res = await Auth.signIn(username, password);
    window.location.href = paths.afterRoutes.home;
    return res;

  } catch (err: any) {
    const { code } = err;

    if (code === "UserNotConfirmedException") {
      window.location.href = paths.beforeRoutes.confirmUser;
    } else {
      alert("サインインに失敗しました。");
    }
  }
};
```
errorが返ってきた際に、consoleでerror内容を見てみると、下記のような状態になっていたので、catchの中で`const {code} = err;`としてerrからcodeを分割代入しています。

![Screenshot 2022-03-27 13.32.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1472874/7a7fd5c2-5a68-aee5-affb-4b1cce740f4a.png)

# :confetti_ball: まとめ
上記のようにすることで、指定したエラー文が返ってきたら認証ページへ、それ以外はalertを表示、成功したらHOMEへ遷移という流れを実装できました。

`try/catｃｈ`のcatch内で処理を書くということをあまりしたことがなかったので、新たな学びとなり良かったです。

# :eye: 参考
https://github.com/aws-amplify/amplify-js/issues/9104
M5Core2とM5Atom EchoでMP3再生

M5Core2とM5Atomには、スピーカがすでについていますので、MP3再生してみます。
いずれも、ESP32に搭載しているI2Sで再生します。
ファイルソースは、HTTP GetによるURL指定と、SDに格納したファイルパス指定の2種類を用意しました。

# ESP32におけるオーディオ再生

以下のライブラリを利用させていただきました。PlatformIOのライブラリでも検索にヒットします。
サンプルコードがたくさんあるので助かりました。

earlephilhower/ESP8266Audio

https://github.com/earlephilhower/ESP8266Audio

〇宣言

```cpp:module_audio.cpp
#include <driver/i2s.h>
#include "AudioFileSourceHTTPStream.h"
#include "AudioFileSourceBuffer.h"
#include "AudioGeneratorMP3.h"
#include "AudioOutputI2S.h"
#include "AudioFileSourceSD.h"

static AudioOutputI2S *out;

static AudioGeneratorMP3 *mp3 = NULL;
static AudioFileSourceSD *file_sd = NULL;
static AudioFileSourceHTTPStream *file_http = NULL;
static AudioFileSourceBuffer *buff = NULL;
```

ソースがSDの場合は、```AudioFileSourceSD```を利用し、HTTPの場合は``` AudioFileSourceHTTPStream```と``` AudioFileSourceBuffer```を利用します。後者は、ネットワークを介した通信のため、安定化のためにバッファを使っています。
また、WAVEファイルなどでも利用可能ですが、単純化のため今回はMP3ファイル限定にしました。

〇準備

```cpp:module_audio.cpp
  out = new AudioOutputI2S(I2S_NUM_0);
  out->SetOutputModeMono(true);
  out->SetGain(audio_gain / 100.0);
```

音量は、audio_gainで指定します。0から100の間です。

〇PIN設定

```cpp:module_audio.cpp
  out->SetPinout(bclk, lrck, dout);
```

3つのPINを使います。BCLK、LRCK、DataOutです。
M5Core2では、以下の通りです。

```
BCLK：12
LRCK：0
DataOut：2
```

M5Atom Echoでは、以下の通りです。

```
BCLK：19
LRCK：33
DataOut：22
```

〇URLから再生
ネットワークに左右されるため、バッファを挟んでいます。

```cpp:module_audio.cpp
  file_http = new AudioFileSourceHTTPStream(url);
  buff = new AudioFileSourceBuffer(file_http, bufsize);
  mp3 = new AudioGeneratorMP3();
  mp3->begin(buff, out);
```

〇SDからの再生

```cpp:module_audio.cpp
  file_sd = new AudioFileSourceSD(path);
  if( !file_sd->isOpen() ){
    delete file_sd;
    file_sd = NULL;
    return JS_EXCEPTION;
  }
  mp3 = new AudioGeneratorMP3();
  mp3->begin(file_sd, out);
```

上記呼び出して、勝手に再生してくれるわけではなく、上記、URLからの場合とSDKからの場合と、いずれも定期的に音声データの汲み上げが必要です。
以下の処理を、loop()などで定期的に呼び出す必要があります。

```cpp:module_audio.cpp
  if( mp3 != NULL ){
    if (mp3->isRunning()) {
      if (!mp3->loop())
        mp3->stop();
    }
  }
```

以上で、MP3ファイルの音声が再生されるかと思います。


# Javascriptでの呼び出し

先ほど示した処理をライブラリ等にまとめてESP32でのC言語で実装するだけです。
今回は、以下の技術書で紹介している、ESP32内部で動作するJavascript環境で動作させる場合のJavascriptコード例を示します。

M5StackとJavascriptではじめるIoTデバイス制御

https://poruruba.booth.pm/items/3735175

Javascriptでの実装例です。

```js
import * as audio from "Audio";

//audio.begin(12, 0, 2); // for M5Core2
audio.begin(19, 33, 22); // for M5Atom Echo
audio.playUrl("http://192.168.1.16:20080/g_07.mp3"); // URLから再生の場合
//audio.playSd("/g_07.mp3"); // SDから再生の場合

function loop(){
	audio.update(); // 定期的に音声データの汲み上げ
}
```

実装はこれだけです。細かな処理はC言語で実装済みなので。
（Javascriptで実装すると非常に楽ちんなのでおすすめです。）

# 終わりに

こちらもどうぞ

　[M5Core2とM5Atom Echoに加えて、M5Stack FireやM5StickCでもMP3再生する](https://qiita.com/poruruba/items/6921115883e79443c02d)

以上
【Golang】1文字をruneに変換する

> Go 言語（以下 Golang）で、1 文字の文字列を `rune`（[Unicode](https://ja.wikipedia.org/wiki/Unicode) の[<ruby>コードポイント<rt>符号位置</rt></ruby>](https://ja.wikipedia.org/wiki/%E7%AC%A6%E5%8F%B7%E7%82%B9)専用の `int32` 型）に変換したい。
>
> バッククォート（<code>\`\`</code>）では `string` 扱いになってしまう。

「あれ？この文字の文字コード（コードポイント）って何だっけ？」と、基本中の基本なのに、忘れたころに使いたくなる。しかも、ちょっと確認したい時に限って。

しかし、やはり基本中の基本であるため[「"golang" 1文字をruneに変換する」でググって](https://www.google.com/search?q=%22golang%22+1%E6%96%87%E5%AD%97%E3%82%92rune%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B)も、タイトルから<ruby>Golang のスポンサー情報<rt>ドンピシャの記事</rt></ruby>が出てこなかったので自分のググラビリティとして。

## TL; DR <sub><sup><sub><sup>（今北産業）</sup></sub></sup></sub>

1. **シングル**クォートで括る。
1. サンプルコード

	```go:main.go
	package main

	import "fmt"

	func main() {
		r := '😊'

		fmt.Println("Dec :", r)
		fmt.Printf("Hex : %x\n", r) // --> 1f60a = UTF-32 BigEndian
		fmt.Printf("Type: %T\n", r)
	}

	// Output:
	// Dec : 128522
	// Hex : 1f60a
	// Type: int32
	```
1. マスター、動くものをくれ。
    - [オンラインで動作をみる](https://go.dev/play/p/jw41mvzQeb-) @ Go Playground

## 参考文献

- [stringとrune](https://qiita.com/seihmd/items/4a878e7fa340d7963fee#string%E3%81%A8rune) | Goのruneを理解するためのUnicode知識 @ Qiita
- [Rune literals](https://go.dev/ref/spec#Rune_literals) | Language Specification | References @ go.dev
EC2・RDSの自動起動・停止を設定してみた

# 目次
[1.はじめに](#はじめに)
[2.ec2](#ec2)
[3.rds](#rds)
[4.まとめ](#まとめ)

# はじめに
AWS無料利用期間が終了し、月額コストが増加したのでEC2・RDSの自動起動・停止を設定し、起動時間を制御しました。

# ec2
Amazon EventBridgeでスケジュール設定し、設定した時刻になるとAWS Systems Managerオートメーションが実行され、EC2が起動・停止する流れです。ロール、ポリシーなど含め、今回の設定内容を図でまとめました。

![ec2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/6511f55a-674d-c5db-60eb-d858138ad9ea.png)

## ポリシー作成 
・IAMから「ポリシーの作成」を押下
![スクリーンショット 2022-03-27 12.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/3675cb91-c874-84bb-2b4d-e5821683f5b0.png)

・「EC2」、「SystemsManager」の設定をし、「次のステップ：タグ」を押下
![スクリーンショット 2022-03-27 12.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/9aad78bc-6c49-6bc6-a098-1b0f91f29053.png)

・必要に応じてタグ設定をし、「次のステップ：確認」を押下

・「名前」を設定し、「ポリシーの作成」を押下
![スクリーンショット 2022-03-27 12.55.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/e2eb4b33-cd1e-a6b8-0bcc-acfe836354cb.png)

## ロール作成
・IAMから「ロールの作成」を押下

![スクリーンショット 2022-03-27 12.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/9a462ff2-2cc9-0a63-d6e1-c120be76293a.png)

・ユースケースで「SystemsManager」を選択し、「次へ」を押下
![スクリーンショット 2022-03-27 12.59.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/968787dc-6dc2-0a40-0d2a-c885b629322e.png)

・先ほど作成したポリシーを選択し、「次へ」を押下
![スクリーンショット 2022-03-27 13.01.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/437db640-ccf6-dbbe-8f87-5eefda3b0c86.png)

・「ロール名」を設定し、「ロールを作成」を押下
![スクリーンショット 2022-03-27 13.02.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/e9e85752-2188-17c0-a8ed-09449d25206c.png)

・作成したロールの「信頼関係」にて、「"events.amazonaws.com"」を追記
![スクリーンショット 2022-03-27 13.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/c57ba8c6-29b5-74bc-5350-49160dc6d1fd.png)

## ルール作成 
・Amazon EventBridgeにて「ルールを作成」を押下
![スクリーンショット 2022-03-27 13.06.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/a2f72b6f-1bbc-8a60-095c-d903f81373cc.png)

・「名前」を入力、「スケジュール」を選択し、「次へ」を押下する
![スクリーンショット 2022-03-27 13.08.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/1699d78a-c84c-ae1e-953c-f0b6bdb2bf74.png)

・cronでスケジュール設定し、「次へ」を押下する
![スクリーンショット 2022-03-27 13.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/f2463120-1cbd-64f9-970a-3239995d4175.png)

・「ターゲット」で「Systems Managerオートメーション」、「ドキュメント」で「AWS-StartEC2Instance」（停止させたい場合は「AWS-StopEC2Instance」)、「InstanceId」で対象のEC2インスタンスのインスタンスID、「実行ロール」で先ほど作成したロールを選択し、「次へ」を押下する。
![スクリーンショット 2022-03-27 13.13.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/d65e20b3-e451-bd80-f65b-fec5473f88a7.png)

・必要に応じてタグ設定をし、「次へ」を押下

・確認画面に遷移するので、「ルールの作成」を押下

# rds
流れはEC2と大体同じなので、図だけまとめます。

![ec2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/2b568964-a464-8956-4937-7b69d13aad4f.png)


# まとめ
Lambdaを使用した自動化など、他にも設定方法はいくつかありそうなので今後、比較もできたらなと思います。


以上、最後まで読んで頂きありがとうございました！
VS Codeの個人的ショートカット (mac)

# エディタとターミナルを行き来する
<kbd><kbd>ctrl</kbd><kbd>`</kbd></kbd>でトグルできる。
デフォルトのショートカットで、ターミナルが起動してない時は、起動してそこにカーソルが移る。ただしデフォルトではターミナルからエディタに戻る時はターミナルが消えてしまう。そのまま消えないでほしいときは、次のようにJSONファィルに追記すると良い。
```JSON
[
   { "key": "ctrl+`", "command": "workbench.action.focusActiveEditorGroup", "when": "terminalFocus"}
]
```
cscの作法 その66

# 概要
cscの作法、調べてみた。
csv読んでみた。

# 参考にしたページ

https://tiri-tomato.hatenadiary.jp/entry/2014/12/28/015636

# サンプルコード

```
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;

public static class Program {
	public static void Main(params string[] args) {
		CSVReader reader = new CSVReader(new StreamReader("expense_item_sample.txt"));
		string[] getLine = null;
		while ((getLine = reader.ReadLine()) != null)
		{
			for (int index = 0; index < getLine.Length; index++)
			{
				getLine[index] = getLine[index].Replace(System.Environment.NewLine, "<br>");
			}
			Console.WriteLine(string.Join("/", getLine));
		}
	}
}


```

以上。
JSのscrollHeight, clientHeight, offsetHeightの違い

駆け出しプログラマーの備忘録です。

JSでページの高さを調べるためには様々種類の要素を使用できるかと思いますが、それぞれどのような違いがあるのか、忘れないようにメモしておきます。

例えば、SNSでは特に使用されている、Infinity Scroll（スクロールするたびに新しいコンテンツが読み込まれるもの）などを作るときに使用しますね。

<h2>scrollHeight</h2>
scrollHeightは、要素のコンテンツの高さ（overflowによってスクリーン上では見れなくなっているコンテンツを含む）

また、要素のpaddingは含みますが、border, margin, 縦方向のスクロールバーは含みません。
高さの疑似要素(::before, ::afterなど）は含みます。

要素のコンテンツが縦のスクロールバーなしに、　収まっている場合、scrollHeightはclientHeightと同じになります。

<h2>clientHeight</h2>
clientHeightは要素のCSSやインラインのレイアウトがない場合は、０として返されます。
それ以外の場合は、ボックスの中の高さがピクセル単位で返されます。
要するに、paddingは含まれますが、border, margin, 縦のスクロールバーは含まれません。

<h2>offsetHeight</h2>
offsetHeightは要素の高さ（縦のpaddingとborderを含む）を整数として返します。
基本的には要素のCSSの高さによってピクセル単位で計られます。

高さは、border, padding, 縦のスクロールバーが含まれますが、疑似要素(::before, ::afterなど）の高さは含まれません。

もし、要素がhiddenとして隠されていた場合は、高さは0として返されます。

参照：
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
VScode上でDBをGUI操作できるMySQL Shell for VS Codeを使ってみた


Oracle Corporationから公開されたMySQL Shell for VS CodeというVScodeの拡張機能を使ってみたので使用感をまとめておこうと思います。

## MySQL Shell for VS Codeとは

2022年3月23日に公開されたVScode上でMySQLを編集、実行ができるVScodeの拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327797/07012340-ccba-5363-4fff-f2ccd3c91955.png)
https://marketplace.visualstudio.com/items?itemName=Oracle.mysql-shell-for-vs-code

テーブルの参照はもちろんSQLの実行、グラフの描画まで可能なようです。

DBのGUIツールの場合有料版であれば便利なツールはありますが、無料版でストレスなく使えるツールがほとんど無い印象なので、VScodeでDBも操作できちゃうのであればとても便利だと思い、インストールして使ってみることにしました。

## DBに接続

![Screen Shot 2022-03-27 at 12.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327797/68950904-764f-89ee-6215-9b6e43673667.png)

接続画面はシンプルでわかりやすい画面だったので簡単に接続することができました。今回はTCP/IPで接続したためBasicのタブから接続しました。Oracle製ということもあり、MDSの項目もあります。

## テーブルを参照
インストール後MySQL Shell for VS Codeのボタンが追加されるため、押すとサイドバーにDBの一覧が表示されるようになります。

表示させたいテーブルを選択して「Show Data」を選択するとコンソール画面が表示されて自動的にSQLが実行されます。

![Screen Shot 2022-03-27 at 12.04.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327797/fa72eb3d-194f-ef14-97ba-bbd88c7d8665.png)
![Screen Shot 2022-03-27 at 12.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327797/d1a0cffc-98b8-d4b2-bb08-34c122a47914.png)


SQLの下に実行結果が表示される形となっているため、大量のデータを参照するというよりは、抽出した結果を確認するのに向いているような表示だなという印象です。

右下に「Maximize Result Set View」というボタンがあったので押してみたのですが、2022年3月27日時点では反応しませんでした。

## SQL実行

SQLの文法やテーブル名の補完が効いてくれます。VScode上での入力なので慣れている分非常に入力しやすいです。
![hoge.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327797/17116fc2-7bb3-5521-fa46-dd76106583b2.gif)

一点気になったのはDatabase名を選択しないと実行時エラーになってしまうため、普段Sequel Proなどでテーブル名のみを指定してSQLを書いている自分としては少し不便だなと感じました。
```sql
-- 下のSQLだとエラーになる
SELECT * FROM test_table;

-- USE構文でDatabase名を指定すればテーブル名のみでもSQLを実行可能
USE test_database;
SELECT * FROM test_table;
```

## 使ってみた感想
使ってみた感想としては、まだバグ等もあるため普段使いするには不便な点も多い印象でした。
しかしDBの編集をVScode上でできるのは非常に便利なので、今後のアップデートを楽しみにしたいと思います。

今後も便利な拡張機能、ツール等があれば試していきたいと思います。
/var/log/ の syslog と syslog.1 と syslog.2.gz を一気通貫でgrepする

# 背景

syslogを検索するとき、過去のログも含めて一気に表示したりgrepしたりしたいですよね。

```sh
cat /var/log/syslog* | grep KEYWORD
zcat /var/log/syslog* | grep KEYWORD
```

このやり方には、次の問題があります。

**問題点**
- 出力される結果が時系列順のログになっていない
- `cat`コマンドを使った場合は、syslog.2.gz を検索できていない
- `zcat`コマンドを使った場合は、syslog や syslog.1 を検索できていない
    - `gzip: /var/log/syslog: not in gzip format`エラーが表示される
      ```
      % zcat /var/log/syslog* | grep KEYWORD
      gzip: /var/log/syslog: not in gzip format
      gzip: /var/log/syslog.1: not in gzip format
      ```

# 結論

次のコマンドで検索します。

```sh
ls -r /var/log/syslog* | xargs zcat -f -- | grep KEYWORD
```

# 解説

まず、syslogファイル名を逆順で出力します。

```sh
# コマンド
ls -r /var/log/syslog*

# 結果
/var/log/syslog.3.gz
/var/log/syslog.2.gz
/var/log/syslog.1
/var/log/syslog
```

次に、`ls`で出力されたファイル名一覧をzcatの引数に与えます。
`zcat`の `-f` オプションによって、引数のファイルがgzipファイルでなかった場合には何もせずに標準出力に流すようにします。
`zcat`の `--` はオプションとファイル名の境界を指示する意味合いがあります。もしファイル名が`-syslog` などとハイフンから始まる場合でも、確実にファイル名として認識させるようにします。
今回の場合は`ls`の結果として`-syslog` というファイル名は与えられませんので、あまり意味はありませんが…。


```sh
# コマンド
xargs zcat -f --

# 実行されるコマンドのイメージ
zcat -f -- /var/log/syslog.3.gz /var/log/syslog.2.gz /var/log/syslog.1 /var/log/syslog
```

このやりかたで、syslogを検索するとき、過去のログも含めて一気に表示したりgrepすることができます。

# 別コマンド

同じ意味ですが、次のようなコマンドでもOKです。
xargsがよくわからんというひとには、こちらがわかりやすいかもしれませんね。

```sh
zcat -f -- `ls -r /var/log/syslog*` | grep KEYWORD
```
Cookie SameSite 属性メモ

* CookieのSamesite属性の概要情報・振る舞いについて、個人用にメモする。

## SameSite属性とは

* CSRF(ユーザーの意図しない処理や不正アクセスなどを行う攻撃)対策を行うためのCookie属性。
* `None`、`Lax`、`Strict`の3つを設定することが可能。

## Cookieの種類

* 1st Party Cookie : 現在アクセス中のアプリ (ブラウザーのアドレスバーに表示されている) のドメインに一致する Cookie
* 3rd Party Cookie : 現在アクセス中のアプリ以外の別ドメインからの Cookie

## 各設定値
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/34dcfb4d-fddd-41c9-7da4-ceab8d8d8a1b.png" width="500" />

### Strict

* 別ドメイン(3rd Party Context)アプリへの全てのリクエストでCookieを送ることができない。
  * 最も制限が厳しい。
  * POSTだけでなく、GETリクエストも対象。
  * ログイン中のアプリに対して、別アプリから遷移し直すと、未ログイン扱いとなる。

### Lax

* 別ドメイン(3rd Party Context)アプリへのリクエストでは、GETリクエストの場合のみCookieを送ることができる。
  * Strictの次に厳しい制限。
  * POSTや画像読み込み、XHR、iframeでのリクエストではCookieを送ることができない。 

### None

* ドメインの異なるアプリ間でも制限なくCookieを送ることができる。
* 利用の際にはSecure属性の付与が必要。


## 参考情報

* [SameSite Cookie の説明](https://web.dev/i18n/ja/samesite-cookies-explained/)
* [HTTP Cookie の使用](https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies)
* [SameSite属性の付与によるCSRF脆弱性対策](https://qiita.com/flyaway/items/d30c99a662330df0c00d)
プロパティとしてのクラス(Table Per Type編) 2

# 前回からの考え直し(インターフェイスから抽象型)
前回ではDataTime型に限ったプロパティクラスを考えたが実際の運用考えると下記のような抽象ジェネリッククラスの方が運用しやすい。
``` C#:CompornentEFcore.cs
    public abstract class CompornentClass<TEntity, DataType> where TEntity : class where DataType : struct
    {
        public CompornentClass() { value = default(DataType); }
        public CompornentClass(DataType value) { this.value = value; }
        public int iD { get; set; }
        public DataType value { get; set; }
        public TEntity CompornentSideNavigation { get; set; }
    }
```
何故インターフェイスから抽象ジェネリッククラスに置き換えたかというと、そもそもEntityFrameworkは1クラス、1テーブルなので1ジェネリッククラスで複数テーブルは無理あったためである。
実際運用する際にはここから継承して色々機能を加えていくことになる。
# コンテキスト定義
さらに似たような型であるからコンテキスト定義も一括できるはずである。
そこでコンポジット側とコンポーネント側の定義を行う静的関数を定義する
```C#:ContextUtility.CompositeSide
        public static EntityTypeBuilder<TEntity> ConfigureCopositeSide<TEntity, TRelated, DataType>(
                        this EntityTypeBuilder<TEntity> EntityTypeBuilder,
            Expression<Func<TEntity, TRelated>> ConpositeSideProperty
            )
                        where TEntity : class where TRelated : CompornentClass<TEntity, DataType> where DataType : struct
        {
            EntityTypeBuilder.Navigation(ConpositeSideProperty);
            EntityTypeBuilder.HasOne(ConpositeSideProperty)
                .WithOne(CompornentClass => CompornentClass.CompornentSideNavigation);
            return EntityTypeBuilder;
        }
```
この関数で行っていることは
入力としてエンティティタイプビルダー、コンポジット側プロパティを受け取って
ナビゲーションプロパティとしてコンポーネント側を返す関数を定義して
ナビゲーションプロパティから1対1で関係性を定義している。
ジェネリックの型情報が3つに成っているが恐らくは型推定で補完されるだろう。
```C#:ContextUtility.CompornentSide
        public static EntityTypeBuilder<TRelated> ConfigureCompornentSide<TEntity, TRelated, DataType>(
            this EntityTypeBuilder<TRelated> EntityTypeBuilder,
            Expression<Func<TEntity, object>> ConpositeSideID,
            Expression<Func<TEntity, TRelated>> ConpositeSideProperty)
            where TEntity : class where TRelated : CompornentClass<TEntity, DataType> where DataType : struct
        {
            EntityTypeBuilder.ToTable(typeof(TEntity).ToString() + '_' + ConpositeSideProperty.Type.ToString() + "_Values");
            EntityTypeBuilder.HasKey(d => d.iD);
            EntityTypeBuilder.Property(d => d.value).IsRequired();
            EntityTypeBuilder.Navigation(d => d.CompornentSideNavigation);
            EntityTypeBuilder.HasOne(d => d.CompornentSideNavigation)
                .WithOne(ConpositeSideProperty)
                   .HasForeignKey(ConpositeSideID);
            return EntityTypeBuilder;
        }
```
こちらも同様である。
入力としてエンティティタイプビルダー、コンポジット側ID、コンポジット側プロパティを受け取って
主キー、プロパティ、ナビゲーション、1対1の関係性を定義しているだけである。

今回の成果はGithubで公開中
https://github.com/Nishiwaki-Takao/CompornentEFcore
【C++】「cin >>」「cout <<」って何？

C++超弱者が疑問に思ったことを議事録的にしています。

# 結論
- 標準出力/入力
- C++でもC言語のprintfやscanfを使うことができるけれども、簡単な記述方法

https://docs.microsoft.com/ja-jp/cpp/standard-library/iostream?view=msvc-170

# cout(シーアウト)
- 「`<<`」を出力演算子という
- 文字は''(シングルクォーテーション)、文字列は""(ダブルクォーテーション)で囲む

```cpp
#include <iostream>
std::cout << 【表示内容】;
std::cout << "Hello, World." << std::endl;
std::cout << 100 << std::endl;
```

- 「`<<`」で表示内容を繋げることができる

```cpp
std::cout << "I'm " << age << " years old." << std::endl;
```

# cin(シーイン)
- ユーザーのキーボード入力を待つ
- 「`>>`」を入力演算子という

```cpp
int a;
cin >> a;
```
エンジニアでも結局資格は沢山取得していた方が得だった話

# 初めに
私の経歴からですが、現在26歳でエンジニアとして働き始めたのは2021年初旬からなのでまだ1年と2ヶ月ほどしか立っていません。エンジニアになる前は、地元の建設業界の商社で営業として２年間働いていました。お世辞にも優良社員とかではなく、営業の外回り中にサボってプログラミングの勉強をしたり、自宅に帰ってからの時間を使って約１年間ほどRubyやらHTML、CSS、たまにトレンドだったPythonに寄り道したりしながら独学をしていました。
退職後、某プログラミングスクールに入学と卒業を経て晴れて未経験元営業エンジニアになることができました。


# それから
結論から言うと、ほぼ開発経験がない私でも在職している会社以上の企業に転職することができました。
　
　今年の2021年の初旬に入社し、2022年の2月末から転職活動を開始し3月末の約1ヶ月ほどの活動で複数社から内定をいただくことができました。
転職しようと思った経緯は割愛しますが、いざ転職しようと思ってもほとんど開発経験がない私が転職なんてしもて、また同じような会社にしか転職できないのではないかと考えていました。エンジニアになって最初の一年目の経験なんてものはあってないようなものだったので転職活動に踏み切る前はかなり不安があったわけです。
　そこで転職エージェントに登録して、今の自分がどれくらいの市場価値があるのか聞いてみようと思い、すぐに行動に移しました。業務中、ほとんど人と喋ることがないので外でバリバリ仕事をしている転職エージェントとの面談は、当初それはそれは億劫に感じるものでしたが、オンライン面談にて画面に映し出された爽やかイケメンを見て緊張は一気にほぐれ、とても話しやすい雰囲気のまま面談ができたことを記憶しています。（やりたくないという思い込みで行動に移さないのはやめようと思った)

面談でまず言われたのが、**１年間で資格を4つも取得できている人は珍しい**というものでした。(やっと本題)

# 資格の有効性
　資格の難易度が高いことに越した事はないです。ITパスポートより基本情報、基本情報より応用情報。これは間違いないと思います。ただそれと同じくらい**短期間でいくつ資格を取得していたか**がかなり重要だと思います。実際、私が１年間で取得した資格は以下の４つになります。
- java silver
- Ruby silver
- Ruby Gold
- 基本情報

それぞれの資格を見ればどれも誰でも勉強すれば取れる。といった難易度の資格ばかりですね、、、
ただこれらの資格も短期間で取得したという一つの実績になったわけです。

　実際、私が転職活動にて面接させていただいた企業様ほぼ全ての企業に、短期間で複数の資格を取得したことについて触れていただき、好印象を持っていただけました。
やはり経験が少ない私ですが、入社してからも自己研鑽をしてくれるという証明につなげることが出来るという点が強かったのかなと思います。


## 終わりに
　巷ではエンジニアにとって資格の取得は意味がない。と言われる意見があります。確かにバリバリ開発をこなされている強強エンジニアにとっては実際そうなのだと思います。数々の開発経験と実績をひっさげて更なるキャリアアップを邁進することが可能なのでしょう。

ただ、私のように満足に開発経験を積むことができていないエンジニアの方は沢山いらっしゃるはずです。その方達に言いたいことは経験を積むことが難しいのなら資格の取得で無理矢理にでも実績を作り、開発経験のつめる企業に転職をした方がいいと考えます。

　これは余談ですが某転職サイトであるンンゥッテッドリィーや緑でも活動していたのですが、面談に至るケースがほとんどなく書類選考落ちばかりでした。おそらく採用ハードルが高いのかもしれません、、、
　なのでこれから転職を考えられている方は転職エージェントに登録することをお勧めします。面接対策やらその会社の内情などお話ししてくださるので転職における不安がある程度解消されます。

長くなりましたが、資格取得は無駄ではありませんでした。経験が積めないと悲観するのではなく地道に資格取得に向けて勉強していきましょう。(自分に対する戒め）
CSS absolute VS relative 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/c6a0a7c2-cccf-06cb-47be-aaca4b989154.png)

# Absolute VS Relative
### positon: relative：もともとその要素があった場所を基準に配置されます
### positon: absolute：祖要素に対して相対配置されます

[MDN Reference](https://developer.mozilla.org/ja/docs/Web/CSS/position)

まずは、実際に動かしていきましょう！

# ポジションの変更を加える前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/da97b04a-3b14-3198-e21b-cc70ec1528be.png)


```html:index.html
<!-- 祖要素 -->
<body>
  <h1>CSS relative VS absolute</h1>

  <!-- 親要素 -->
  <div class="parent">
    <!-- 子要素 -->
    <div class="box" id="one">one</div>
    <div class="box" id="two">two</div>
    <div class="box" id="three">three</div>
    <div class="box" id="four">four</div>
  </div>
</body>
```

```css:style.css
body{
  background: rgb(35, 35, 36);
}

h1{
  color: gold;
}

.parent {
  border: 2px dashed white;
  display: inline-flex;
}

.box {
  text-align: center;
  color: white;
  background: #0498a2;
  width: 100px;
  height: 100px;
  margin: 6px;
}

#two {
  background: #823dc0;
}
```

# #twoに position : relative ; を付与してみます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/7217e224-6089-dbe3-4c0a-d63788425f3b.png)

すると、もともとあった配置に対して、上20px、左20pxずれて配置されいていることがわかります。

```css:style.css
#two {
  background: #823dc0;
  /* 追記 */
  top: 20px;
  left: 20px;
  position: relative; 
}
```

# #twoに position : absolute ; を付与してみます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/6caa5e07-bffe-5456-7795-4347a32cea07.png)

すると、祖要素のbodyに対して、上20px、左20pxずれて配置されていることがわかります。

```css:style.css
#two {
  background: #823dc0;
  /* 追記 */
  top: 20px;
  left: 20px;
  position: absolute; 
}
```

# 次の表示はどのようにすればよいでしょうか？？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/4df65488-8b0e-cfc1-f576-1380ce15c285.png)

この場合は、親要素を基準に、上20px、左20pxずれて配置されていることがわかります。

```css:style.css
.parent {
  border: 2px dashed white;
  display: inline-flex;
  position: relative;
}

/* 省略 */

#two {
  background: #823dc0;
  /* 追記 */
  top: 20px;
  left: 20px;
  position: absolute; 
}
```
と、記述すればうまく表示されます！

# まとめ
abusolute とrelativeの理解に繋がれば幸いです:blush:
代数的整数のコンピュータでの表現

代数的整数が代数方程式の解として表現される。よってこれをコンピューター内部で表現するには方程式を求めれば良い。この場合にコンピューターは有限個の整数の組により極限値を求める事が出来る。

次にこのような方程式を求めて工学的にどのような応用があるかを考えてみる。
また超越数、例えばeのような数をコンピューターで表現することも考えてみようと思う。
Dynamics 365 Finance and Operations ~ 製造原価 ~

原価シリーズ、今日は製造原価について取り扱います。
製造原価については、[製造プロセス](https://qiita.com/TaichiKayama/items/4af48af54287023424a5) や [原価全体の話](https://qiita.com/TaichiKayama/items/4c7a49bd44645b309967#%E3%82%B3%E3%82%B9%E3%83%88%E5%8E%9F%E4%BE%A1%E3%81%A8%E3%81%AF) の話の続きです。

# 製造業種ごとの製造原価の種類とFOの機能
・ディスクリート製造・・・主に固体部品を加工・または組み立てることにより製品を生み出します。メカ、エレキ、ソフトウエアに大別され、自動車、金属製品、電子部品・デバイス、紙加工品など。
・プロセス製造・・・主に流体の性質や特性を変化させることで製品を生み出します。素材、製品の両方の製造に関わり、化学、石油、食品、鉄鋼、パルプ、薬品、ガラス、繊維など。
・リーン製造・・・プロセス管理を徹底して効率化することで、従来の大量生産方式と同等以上の品質を実現しながらも作業時間や在庫量が大幅に削減できる生産方式（ディスクリート製造にもプロセス製造にも対応）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/31928e69-e2f8-dd22-40da-f6f9789a592c.png)

# 製造原価の設定
・BOM/Formula（部品表）・・・在庫サイトごとの部品表・仕損などを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/610a001c-c13a-9f3f-99c1-59d617ade7a6.png)
・Route（工順）・・・在庫サイトごとの工程・リソース・稼働時間・作業カテゴリ・工程順序を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/a85bf5cb-a186-7201-7d60-243e5f876758.png)
・Cost Group・・・直接費・間接費、固定費・変動費を定義したグループを設定
・Cost Category・・・Cost Groupを紐づけて、具体的な原価のカテゴリ・費用・勘定科目・作業者を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/5f2a5a66-beab-0f12-ac32-28fa961b3037.png)
・Costing Sheet・・・原価計算表（原価グループに基づいて、材料、労務、間接費）を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/651dd0f3-5624-609c-0402-d8ade8b1d844.png)

# 製造原価の計上タイミング
・材料消費と完成品計上
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/ebe86d6a-d1eb-4700-3e15-173a6e88ac12.png)
・工順（工程・ジョブ）消費
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/e65d7081-e981-9922-289f-a5879ed58d53.png)
・間接費・加工費
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/ec199eef-36df-559e-73ab-72d99e0f30d6.png)
状態関数と線形制御系　久村富持先生  学献社

```r

#正準変数系と固有値展開　p.51

A=matrix(c(0,-2,1,-3),nrow=2)
b=c(0,1)
C=c(3,1)

#固有値は伝達関数の極に等しい
lam=eigen(A)$values
P=eigen(A)$vectors

Astar=solve(P)%*%A%*%P
bstar=solve(P)%*%b
Cstar=t(P)%*%C

#オイラー法　連立微分方程式
#u=1とする
#解の挙動が等しいことを確かめる

#正準変換後
f=function(tt,xx,uu){
return(Astar%*%xx+bstar*1)  
}
#正準変換前
g=function(tt,xx,uu){
return(A%*%xx+b*1)
}

t=0
x1star=0
x2star=0
x1=0
x2=0
x1star_vec=c()
x2star_vec=c()
ystar_vec=c()
x1_vec=c()
x2_vec=c()
y_vec=c()
t_vec=c()

ite=1000
h=0.01

for(l in 1:ite){
x=c(x1,x2)
x1_vec=c(x1_vec,x1)
x2_vec=c(x2_vec,x2)
x1=(x+h*g(t,x,u))[1]
x2=(x+h*g(t,x,u))[2]

xstar=c(x1star,x2star)
x1star_vec=c(x1star_vec,x1star)
x2star_vec=c(x2star_vec,x2star)
x1star=(xstar+h*f(t,xstar,u))[1]
x2star=(xstar+h*f(t,xstar,u))[2]

t_vec=c(t_vec,t) 
t=t+h
ystar_vec=c(ystar_vec,t(Cstar)%*%xstar)
y_vec=c(y_vec,t(C)%*%x)
}

plot(t_vec,y_vec,xlab="t",ylab="正準変換前",xlim=c(min(t_vec),max(t_vec)),ylim=c(min(y_vec),max(y_vec)),col=2)

plot(t_vec,ystar_vec,xlab="t",ylab="正準変換後",xlim=c(min(t_vec),max(t_vec)),ylim=c(min(ystar_vec),max(ystar_vec)),col=3)

```


```r

#状態関数と線形制御系　久村富持先生　p.262
#退化したRiccati方程式による解法

#パラメータ
Q=matrix(c(4,0,0,0),nrow=2)
A=matrix(c(0,0,1,0),nrow=2)
P=matrix(c(1,0,0,1),nrow=2)
B=matrix(c(0,0,0,1),nrow=2)


#Broyden Quasi-Newton Algorithm p.213
f=function(x){
R=matrix(c(x),nrow=nrow(A))
value=t(A)%*%R+R%*%A-R%*%B%*%solve(P)%*%t(B)%*%R+Q  
return(c(value))
}

X=rep(0.01,nrow(A)^2)
ite=10^4
H=diag(f(X))
eta=0.01
for(l in 1:ite){
if(sum(abs(f(X)))>10^(-9)){  
X_pre=X  
X=X-eta*H%*%f(X)  
s=X-X_pre
y=f(X)-f(X_pre)
H=H+((s-H%*%y)/as.numeric(t(s)%*%H%*%y))%*%t(s)%*%H
Rmat=matrix(c(X),nrow=nrow(A))
print(sum(abs(f(X))))
}}  

Rmat=matrix(c(X),nrow=nrow(A))
K=Rmat%*%B%*%solve(P)

#最適フィードバック制御法則
U=function(x){
return(-t(K)%*%c(x))
}

```
サポートが終了したCentOS6へdocker-composeをインストールしてみた

# はじめに
基本的にはセキュリティの観点からも最新のOS、最新のパッケージのものを使用した方がいい。
ただし、諸事情によりそうも言ってられない場合があるとおもう。そのため＆自分のメモのためにもこちらの記事を残しておく。
※　サポート切れのもの使うわけだから何があっても自己責任

考え方としては古いOSには古いパッケージにしか相性が良くないのでバージョンを合わせてインストールすることが大事。

# 環境&使用したもの
* Windows11
* Oracle VM VirtualBox
* Vagrant

# インストールできた方法
1. Vagrantfile等の作成
   ```bash:cmd
   vagrant init bento/centos-6.7
   touch install-docker-compose.sh
   touch docker-compose.yml # 動作確認用のためdocker-composeのインストールとは関係ない
   ```
1. スクリプトファイルの実行設定を追加
   ```ruby:Vagrantfile
   config.vm.provision "shell", path: "install-docker-compose.sh"
   ```
1. インストールスクリプト作成 ※ ここがみそ
   ```bash:install-docker-compose.sh
   #!/bin/sh -x

   sudo cp -p /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo_bak
   sudo sed -i -e "s/^mirrorlist=http:\/\/mirrorlist.centos.org/#mirrorlist=http:\/\/mirrorlist.centos.org/g" /etc/yum.repos.d/CentOS-Base.repo
   sudo sed -i -e "s/^#baseurl=http:\/\/mirror.centos.org/baseurl=http:\/\/ftp.riken.jp\/Linux\/centos-vault/g" /etc/yum.repos.d/CentOS-Base.repo
   sudo yum install -y https://get.docker.com/rpm/1.7.1/centos-6/RPMS/x86_64/docker-engine-1.7.1-1.el6.x86_64.rpm
   sudo service docker start

   # docker-compose 1.5.2 (CentOS6でサポートされている最終バージョン)
   sudo wget https://github.com/docker/compose/releases/download/1.5.2/docker-compose-`uname -s`-`uname -m` -O /usr/local/bin/docker-compose -q
   sudo chmod +x /usr/local/bin/docker-compose # 実行権限を付与
   /usr/local/bin/docker-compose -v # バージョンが表示されること

   sudo usermod -aG docker vagrant # vagrantユーザーでdocker-composeを実行できるようにする

   /usr/local/bin/docker-compose -f "/vagrant/docker-compose.yml" up -d # 動作確認用のためdocker-composeのインストールとは関係ない
   ```
1. 動作確認用のdocker-compose.yml作成　※　バージョンが古いので構文も古い
   ```ruby:docker-compose.yml
   # MailCatcher用のコンテナ
   mailcatcher:
     image: schickling/mailcatcher
     ports:
       - "1080:1080"
       - "1025:1025"
     restart: always
   ```
1. VM起動
   ```bash:cmd
   vagrant up
   ```
# 所感
サポートが終了したものを使おうとするとリポジトリのリンク切れにぶち当たるからめちゃくちゃ大変。
そんな中サポート終了後もリポジトリを公開してくれているところがあってとても助かった。ただ、こちらもいつまで公開してくれるのか心配。。
今回の私の奮闘記が諸事情により困ってみる皆さんのお役に立てれば幸いです。

* 参考にさせていただいた記事などのLink集
    * https://qiita.com/tukiyo3/items/7621e610119e8344ff17
    * https://ex1.m-yabe.com/archives/5066
    * https://teratail.com/questions/538ut77715pp8j
    * https://chusotsu-program.com/docker-mail-catcher/
    * etc...

* 試してみたけどうまくいかなかった方法
    * vagrant-docker-compose を使用した方法　⇒　yum updateしてと言われてやったけどうまくいかなかったので断念
    * オフラインでインストールする方法　⇒　CentOS6に適合する古いバージョンを探すことが出来なかったので断念
    （docker-17.03.0-ce.tgz や docker-18.09.0.tgz を試したけどカーネルのバージョンが古いって言われた）
    * etc...
Validationの日本語化

Macでは
```terminal
php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
php -f install-ja-lang.php
php -r "unlink('install-ja-lang.php');"
```
このままでは属性が日本語化されないので例えば
```resources/lang/ja/validation.php
// 最終行近く
'attributes' => [
        "name" => "氏名",
        "tag_name" => "タグ名",
        "email" => "メールアドレス",
        "password" => "パスワード",
        "password_confirmation" => "パスワード(確認用)",
        "content" => "内容",
        "memo_img" => "添付書類"
    ],
```
などとする
Workflowsを触ってみる【GCP】

# やりたいこと
GCPのWorkflowsに入門する。
サンプルワークフローを作るところまでやってみる。

# 環境
- Windows 10 Pro
- Google Cloud SDK 378.0.0

# Workflowsとは
[公式ドキュメント](https://cloud.google.com/workflows/docs/overview?hl=ja)より抜粋
```
ワークフローは、フルマネージドのオーケストレーション プラットフォームで、定義した順序（ワークフロー）でサービスを実行します。
これらのワークフローでは、
Cloud Run や Cloud Functions でホストされているカスタム サービス、
Cloud Vision AI や BigQuery などの Google Cloud サービス、
任意の HTTP ベースの API を含むサービスを組み合わせることができます。
```

CloudRunやCloudFunctionsといったAPIベースのGCPサービスや、外部APIをつなぎ込んでワークフローを作れるサービスのようです。

ワークフローを作成する別のGCPサービスとしては Cloud Composerがあります。
ComposerとWorkflowsの比較は、[こちら](https://lp.cloudplatformonline.com/rs/808-GJW-314/images/Data_Analytics_%20OnAir_q1_0212_Session.pdf)のDataAnalyticsOnAirの資料13ページ目に非常に分かりやすく掲載されていました。



# 手順
## ワークフローを作成する
以下のようなYAMLファイルを作成します。
「getTodo」と「returnValue」という２つのステップから成る、簡単なワークフローです。
[JSONPlaceholder](https://jsonplaceholder.typicode.com/)のWebAPIにリクエストを送りJSONデータを取得し、そのデータを返すワークフローを作成します。

```yaml:sample_workflow1.yml
- getTodo:
    call: http.get
    args:
      url: https://jsonplaceholder.typicode.com/todos/1
    result: response
- returnValue:
    return: ${response.body}
```


CloudSDKがインストールされたターミナルでYAMLファイルがあるディレクトリに移動し、以下を実行すると、「sample_workflow1」という名前のワークフローがデプロイされます。

```bash
gcloud workflows deploy sample_workflow1 --source=sample_workflow1.yml
```

Workflowsのコンソールを確認すると、ワークフローがデプロイできたことが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320845/0fc54a9d-bd10-df4a-35d6-85906b0e2649.png)

ターミナルで以下を実行すると、デプロイされたワークフローの一覧を確認することができます。

```bash
> gcloud workflows list
NAME                                                                             STATE   REVISION_ID  UPDATE_TIME
projects/hoge/locations/us-central1/workflows/sample_workflow1  ACTIVE  000001-9ef   2022-03-27T02:03:23.596046039Z
```

## ワークフローを実行する

ターミナルから実行するときは以下を実行します。
```bash
> gcloud workflows run sample_workflow1
```

出力はこのようになります。resultのところに、APIのレスポンスが格納されているのが確認できます。
```bash
Waiting for execution [f374cb6e-9ead-40df-9fb7-e8c5c193688e] to complete...done.
argument: 'null'
endTime: '2022-03-27T02:13:29.401004603Z'
name: projects/hoge/locations/us-central1/workflows/sample_workflow1/executions/f374cb6e-9ead-40df-9fb7-e8c5c193688e
result: '{"completed":false,"id":1,"title":"delectus aut autem","userId":1}'
startTime: '2022-03-27T02:13:29.102838318Z'
state: SUCCEEDED
workflowRevisionId: 000001-9ef
```

Workflowsのコンソールから実行することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320845/6b5ee073-1118-7d72-244f-95ea34a08eaa.png)


## ワークフローを削除する
Workflowsは、実行したステップの数によって課金額が決まります。
外部へのリクエストのステップは1か月に2000ステップまで無料[とのこと](https://cloud.google.com/workflows/pricing?hl=ja)ですが、念のためワークフローを削除しておきます。
```bash
> gcloud workflows delete sample_workflow1
```

# 参考
- [Workflowsの公式ドキュメント](https://cloud.google.com/workflows/docs?hl=ja)
- [GCPのCloud Workflowsを試す](https://swfz.hatenablog.com/entry/2021/04/06/195355)
Makefileのコマンドを「m」で選択実行できるようにする

## こうなる

```
$ m
```
ってしたら

```
QUERY>                                                                                IgnoreCase [5 (1/1)]
help           ヘルプコマンド                                                                             
docker-bash    コンテナにbashで入る
docker-attach  コンテナで実行中のコマンドにattach
docker-logs    コンテナのログを見る
open-bookmark  ブックマーク
```

こんな感じで出る

## 環境

[peco](https://github.com/peco/peco)
mac
zsh

## 


Makefileのコマンド一覧を出す。
https://qiita.com/MiuraKatsu/items/9499fd95106b75964e4a
こちらをそのまま

```Makefile
.PHONY: help
#: ヘルプコマンド
help:
	@grep -A1 -E "^#:" Makefile \
	| grep -v -- -- \
	| sed 'N;s/\n/###/' \
	| sed -n 's/^#: \(.*\)###\(.*\):.*/\2###\1/p' \
	| column -t  -s '###'
```

あとはこのコマンドの結果をpecoに渡して戻ってきたやつを実行する。


```.zshrc
# m で make helpを選択実行
function makefile-select-and-run() {
  [ ! -e Makefile ] && echo "NotFound Makefile" && return
  KEY=$(make help | peco | awk '{print $1}')
  [ -n "$KEY" ] && make $KEY
}
alias m=makefile-select-and-run
```

## おわりに
同僚に教えていただいたやり方。感謝！
【AWS】NLBのターゲット先にオンプレのファイルサーバを指定する時の注意点

## 結論
NLBのターゲット先にオンプレサーバを指定するときは、UDPプロトコルを使用することができないです。

https://aws.amazon.com/jp/about-aws/whats-new/2019/06/network-load-balancer-now-supports-udp-protocol/

```
Network Load Balancer はインスタンスターゲットタイプをサポートしており、AWS CloudFormation テンプレートで使用できます (IP ターゲットタイプと PrivateLink は現在サポートされていません)。
```

例えば、オンプレ環境にあるWindowsのファイルサーバをターゲットグループに指定するときは、137~139のUDPプロトコルを含めているかもしれませんが、それができないようです。
※最近のWindows Sever OS(2016以降)であれば445のTCPプロトコルさえあれば十分です。
ただ、それ以前のOSの場合は注意が必要そうですね。

## システム構成
![nlb-for-onprem-fs.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/f27ff3b0-336c-7c1f-5a75-8fb59140315c.jpeg)

ターゲット先は、Windows Server2016で、そこで共有フォルダを作って接続元からアクセスできるようにする想定です。
※今回は接続しません。あくまで、UDPプロトコルがサポートされていないことを確認するのみです。
接続元と接続先のVPCはそれぞれ別AWSアカウントを使用します。

## とりあえずやってみた
VPCやEC2は既に構築済みで、ターゲットグループの作成から始めます。

ターゲットタイプの選択で「IPアドレス」を指定します。
![スクリーンショット 2022-03-27 11.01.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/fdda7e36-a4ca-ff56-0f90-0bf23176a08c.png)

プロトコルは「UDP」で、ポート番号は「137~139」を指定します。
ポート番号は1つしか指定できないので、ターゲットグループを複数作成する必要があります。
![スクリーンショット 2022-03-27 11.02.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/38564783-9a4a-d23a-be93-2eb751c8a014.png)

ターゲット先のEC2に割り当てられているプライベートIPアドレスを入力してターゲットを追加します。
他のポート番号分も繰り返して作成する。
![スクリーンショット 2022-03-27 11.04.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/31034777-64f1-8277-78d0-7ad01eae26f8.png)

ポート137~139のターゲットグループを作成することができました。
![スクリーンショット 2022-03-27 11.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/37d21cc9-030e-4da2-1fef-d1233ae9524c.png)

次はNLBを作成していきます。
今回はPrivateLinkで接続する想定なので、スキームは「内部」にしておきます。
![スクリーンショット 2022-03-27 11.08.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/2e505aab-b79b-949d-0294-5f75aad8a409.png)

リスナーは各ポート番号分と、先ほど作成したターゲットグループを紐付けてロードバランサを作成していきます。
![スクリーンショット 2022-03-27 11.10.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/30ce3d34-87be-e34e-ae76-ba101596093a.png)

VPCエンドポイントサービスを作成してNLBと紐づけていきます。
![スクリーンショット 2022-03-27 11.23.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/244a8784-b42b-4806-6858-6042e3608f7d.png)

ここでどうやらエラーが発生しましたね。
「指定したNLBにはUDPリスナーが存在しています。PrivateLinkではUDPはサポートしていません」ってことですね。
PrivateLink作成の段階でエラーが発生することができたのでめでたしめでたし！
![スクリーンショット 2022-03-27 11.24.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478546/ffb5742a-5a97-e45c-96cb-9d5ab079b9d4.png)
VBS 指定時間経過後にシャットダウンする

###目的
知人から、子供がyoutube見すぎるので
時間指定して強制シャットダウンしてほしいとのことで作成した。

環境：Windows10
仕様：vbsファイル起動で時間を分で指定してyoutube開く。時間強化でシャットダウンする

###スクリプト内容

```
'実行時間を受け取り、指定時間経過時にシャットダウンする

Option Explicit
'変数設定
Dim wsh, Response, mm

'確認メッセージを出す
Response = MsgBox("シャットダウンを予約してよろしいですか？", vbYesNo)

'Yesなら実行
If Response = vbYes Then

	'シャットダウン時間を入力。数値のみチェックする
	Do
		mm = inputbox ("シャットダウン時間を分で入力して下さい")
	Loop Until IsNumeric(mm)

	'Youtube開く
	CreateObject("Shell.Application").ShellExecute "microsoft-edge:https://www.youtube.com/"

	Set wsh = CreateObject("WScript.Shell")
	'シャットダウン	
	wsh.Run "%WINDIR%\system32\shutdown.exe -s -t " & mm * 60, 0
End If
```
【QUERY関数】スプレッドシードで文字列を追加して縦に連結する方法

個人的によく使うのに、検索するとなかなか見つけられないので備忘録として書きます。
A店の情報とB点の情報が別々のスプレッドシートに吐き出される場合、集計や分析のため、ひとつにまとめたいことってありますよね。
そんなときはQUERY関数を使うと、店舗名を追加しつつ自動で連結できるので便利です。

## 連結前
A店の情報とB店の情報が分かれて記録されています
![スクリーンショット 2022-03-27 10.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569827/2f4cb450-dea2-1d70-70a0-6fa1669aa838.png)

## 反映イメージ
データは縦に連結
カラム名には店舗名の文字列を追加
![スクリーンショット 2022-03-27 10.12.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569827/89239b74-39a8-23c8-c894-e17ac7d7a72b.png)

## 準備すること
各店舗の情報に加えて　「店舗」　のカラムを用意しておく
![スクリーンショット 2022-03-27 10.20.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569827/92701d85-b28d-6fec-b3f3-7b43e6098c96.png)

## クエリ関数

```
=QUERY({
QUERY(A3:E11,"SELECT A,B,C,D,E,'A店' LABEL 'A店'''" );
QUERY(G3:K11,"SELECT G,H,I,J,K,'B店' LABEL 'B店'''" )
})
```
## 補足
### 店舗名を追加　
SELECT文に `'文字列'` を加えることで全行に同じ文字列を追加できます。
そのときにLABELを使わないと不必要なカラムができてしまうので注意。
`'A店'` のときは `''` (カラム名をつけない)と指定しましょう。
```
QUERY(A3:E11,"SELECT A,B,C,D,E,'A店' LABEL 'A店'''" )
```
### 複数のQUERY関数を縦に繋ぐ
各QUERY関数を `;` で連結し `{}` で囲みましょう。
3個でも連結することができます。
```
=QUERY({
QUERY(A3:E11,"SELECT *");
QUERY(G3:K11,"SELECT *");
QUERY(M3:Q11,"SELECT *")
})
Web3層アーキテクチャ (学習中・メモ)

・Webアプリケーションの3層構造
Webアプリケーションはユーザインターフェースとなるプレゼンテーション層、
業務処置を行うアプリケーション層、
データ処理や保管を行うデータ層の3層構造となっている。
*ユーザインターフェース -> 利用者が対象を操作するために使用する部分。PCならマウス、キーボード。

・プレゼンテーション層はWebブラウザ(ChromeやFirefoxなど)とWebサーバーが役割を担う。
・アプリケーション層はアプリケーションサーバー(APサーバー)が役割を担う。
・データ層はデータベースサーバー(DBサーバー)が役割を担う。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3332383837332f32366630326436362d653861352d336433362d333537642d3862623862626664326130632e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/a6ae747c-8925-9ae7-f4a8-2be3749d89c4.png)

3層構造にするメリット
・負荷分散
・改修範囲の限定

MVCモデル
・MはModelでアプリケーションの扱うデータと業務処理を指す。
・VはViewでユーザーへの出力処理を指す。
・CはControllerで必要な処理をModelやViewに伝える役割を担う。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3332383837332f39373638306136352d616465662d356364352d643366652d6635633234353831313764322e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/dec3d82e-7bb1-6475-5171-49fde4773bf8.png)

3層アーキテクチャとMVCモデルの相違点
・3層アーキテクチャはWebシステム全体の設計思想のこと。
・MVCモデルはサーバーサイド・スクリプトの設計思想のこと。

MVCのメリット
・開発や改修の分業が容易
・改修範囲の限定

Webサーバーの役割
・Webサーバーの役割は静的ページのデータやAPサーバーから転送された動的ページのデータをWebクライアントに転送すること。*世界で最もシェア率が高いのはApache
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3332383837332f38356530663539372d613766392d333834302d393836632d3562313438306636313439632e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/ced1d55c-bebe-dba6-1b9b-c9d92325889f.png)

アプリケーションサーバーの役割
・Webサーバーから送られてきたユーザーからのデータを受け取り、サーバーサイド・プログラムを実行することでそのデータを加工したり、DB(データベース)のデータを検索・加工した後、Webサーバーにレスポンスを返す。*PHPの場合はアプリケーションサーバーを使う必要がない。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3332383837332f36386137323461392d633765302d373937322d613262632d3537616665343534343739332e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/3fa84513-bb56-038e-dc2d-7ff2d46c686b.png)

データベースサーバーの役割
・データベースサーバーの役割はアプリケーションサーバーからの要求に従って処理を行い、結果をアプリケーションサーバーに返却すること。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3332383837332f39333732653265312d326365652d306234642d333733372d6530643435346165343565392e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/e5080bed-3a55-0d75-8e30-77d9673ac4b8.png)



間違いやアドバイスなどあれば、遠慮なく言って欲しいです。

参考文献：
https://qiita.com/mk185/items/e914683410fd4ecaf0af#アプリケーションサーバーの役割

https://eng-entrance.com/java-servlet-server
AWS ECS Fargate を選定するシチュエーション、メリット、デメリットを超簡単にまとめてみた(対EC2)

## この記事を書くまでの経緯
herokuにコンテナデプロイしてみたぞ！
次はEC2にデプロイしようかな？
でもAWS Fargateなんてのもあってコンテナデプロイできるみたい。ほー、しかもオートスケーリング機能なんてのもあるのか。
ちょっと採用するメリットデメリットを調べてみようかな？というただのまとめメモ。


## この記事は
主にEC2とFargateを比較した時に生じる差異に関してまとめています。ECSとは？Fargateとは？という点にはあまり触れていません。
(ちなみに筆者は現在進行形でECSの勉強中ですので間違いがあっても悪しからず)

## メリット
- EC2の場合、OSやDocker、ミドルウェアの構築や設定が必要だが、Fargateではその必要がない。開発環境で使用しているコンテナをそのまま本番環境で運用できる。
- EC2インスタンスやクラスターの管理をしなくてもよい。
- オートスケーリング機能があり、コンテナ数をオートスケールしてくれる。

## デメリット
- シェルに入れない。私は開発環境でシェルにいつも入るので不便だと感じます。EC2を意識しないで扱える、ということの裏返しみたいです。
- 学習コストが低くない。師匠曰く、深いところまで設定が必要になってくる為結構大変だよ〜とのこと。あれ？インフラエンジニアがいない環境でも楽に構築できる！みたいな記事をよく見るけど学習コスト高いのか。というのが正直な感想。


## 結論(Fargateのユースケース)
管理工数削減が求められる場合、検討の予知がある。
EC2と比べた際、OSやミドルウェアを意識せずに運用できる為、工数削減が期待できます。
意識するのはCPUやメモリのみ。
新規構築は少しコストがかかりそうですが、その後の運用や開発がかなり楽になるのではないかなという印象を受けました。

以上になります。
【Hello, GitHub Actions! 】ことはじめ編

# Hello, GitHub Actions!
* 業務でGitHub Actionsのお世話になることが増えてきたので、改めて勉強してみたい、ということでやり始めました。
* CIツールは数あれど、ソースコードを管理しているGitHub上でCI/CDができるのは、一つのシステムである程度完結できるのでありがたいです。

# 教材
マイクロソフト社が公開しているMicrosoft Learnにて、"Automate development tasks by using GitHub Action"という教材がありました。Actionsの概要説明と実際に手を動かして実装することができます。

https://docs.microsoft.com/en-us/learn/modules/github-actions-automate-tasks/

Actionsのトレーニング教材もあります。

https://lab.github.com/githubtraining/devops-with-github-actions

GitHub Actionsのドキュメントも充実しています。

https://docs.github.com/ja/actions

# Action
実行させたいアクションはオープンソースで公開されているかもしれません。

* マーケットプレイス

https://github.com/marketplace?type=actions

* Official Actions Community

https://github.com/actions

# 今後
教材を一通りやってみて雰囲気はつかめたので、今後はコードビルドやテスト実行といったところを実現していきたいと思います。