OmniAICreator/Qiita-1.07M huggingface dataset:
Mock Service Workとは？

<h2>msw(Mock Service Work)とは </h2>
mock（模擬データ）を作って活用する方式です。<br>
通常、data fetchを行う必要がある場合は、応答を返すサーバが必要です。<br>
実務の場合、サーバapiが既に用意されている為mockデータが不要かもしれないが、<br>
まだ開発中とかAPIがない場合、フロント開発にもっと集中するためにデータサーバーを別に作らずにmockigを活用するのに
これらのタスクをサポートするライブラリ！
クライアントからのリクエストをmswが自ら受け、自ら応答を返します。

<h2>mockingを使ってみる</h2>

https://mswjs.io/examples

mswjs examplesは以下のそれぞれのService Worker Apiを使って、mockingを学習することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/22486cdd-2f85-fcb7-25fe-77c74e424b28.png)


<h2>rest-react example</h2>
MockServiceWorkerを使用してRESTAPIをモックする方法を説明しています。

rest-reactでは、post requestを奪ってjsonのresponseを返却します。
'/login'というrequestが来ると、それをinterceptして、return res()を返すとの意味です。
```react:mocks/handler.js
import { rest } from 'msw'

export const handlers = [
  rest.post('/login', (req, res, ctx) => {
    const { username } = JSON.parse(req.body)
    
    return res(
      ctx.json({
        id: 'f79e82e8-c34a-4dc7-a49e-9fadc0979fda',
        firstName: username,
        lastName: 'Maverick',
      })
    )
  }),
]

```

post request
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/0dbbd092-c1ff-0c5d-7ce0-ce29bad5f810.png)

response！ctx.jsonに設定してあるデータが返却されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/f5d8a8b0-6550-901f-0f89-30cfb15881f8.png)


<h2>graphql</h2>
MockServiceWorkerを使用してGraphQLAPIをモックする方法を示しています。
GraphQLAPIでは、mutation requestを奪ってjsonのresponseを返却します。
（mutaion == post）<br>
今のresponseロジックはどんなrequestに対しても同じデータを返却するようになっています。
これも同じく、'Login'requestをinterceptして return res()を返すとの意味になります。

```react:mocks/handlers.js
import { graphql } from 'msw'

export const handlers = [
  // Capture a "Login" mutation
  graphql.mutation('Login', (req, res, ctx) => { 
    const { username } = req.variables

    if (username === 'non-existing') {
      return res(
        ctx.errors([
          {
            message: 'User not found',
            extensions: {
              id: 'f79e82e8-c34a-4dc7-a49e-9fadc0979fda',
            },
          },
        ])
      )
    }

    return res(
      ctx.data({
        user: {
          __typename: 'User',
          id: 'f79e82e8-c34a-4dc7-a49e-9fadc0979fda',
          firstName: 'John',
          lastName: 'Maverick',
        },
      })
    )
  }),
]
```
post request
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/7c9a4997-24d5-3bdd-7ba5-eb9139f7020c.png)

response
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/5c6c3e90-d594-f1ed-4395-dadaf3b0dc50.png)
【Ruby on Rails】DBの中身をコンソールから確認する

# はじめに

Railsなどを中心に勉強中のエンジニア初心者が他の記事を参考にしたり、実際に実装してみたりして、アウトプットの一環としてまとめたものです。
間違っていることもあると思われるので、その際は指摘いただけると幸いです。

# DBコンソールを起動する

アプリケーションの開発中にDBの中身を確認したい時などがある。

そのような場合、DBコンソールを起動してコマンドを実行することで確認することができる。

### 実行コマンド

下記いずれかで立ち上がるはず。

```bash
$ bin/rails dbconsole
$ bin/rails db
$ rails dbconsole
```

# sqlite3の出力モードを変更

DBの出力結果を分かりやすく表示するために、`sqlite3`の出力モードを変更する

### 実行コマンド

```bash
sqlite> .mode line
```

### `.mode line`実行後の出力例

```bash
sqlite> select * from users;

        id = 1
  provider = github
       uid = 9dasda
      name = TKakidsaf
created_at = 2022-01-28 13:31:19.991413
updated_at = 2022-01-28 13:31:19.991413
```

# DBに保存されているデータを出力

### テーブル定義の確認

### 実行コマンド

```bash
sqlite> .schema users
```

### 実行結果

```bash
sqlite> .schema users
CREATE TABLE IF NOT EXISTS "users" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "provider" varchar NOT NULL, "uid" varchar NOT NULL, "name" varchar NOT NULL, "image_url" varchar NOT NULL, "created_at" datetime(6) NOT NULL, "updated_at" datetime(6) NOT NULL);
CREATE UNIQUE INDEX "index_users_on_provider_and_uid" ON "users" ("provider", "uid");
```

# コンソールの終了

### 実行コマンド

```bash
sqlite> .quit
```

# 参考

https://wild-outdoorlife.com/ruby-on-rails/rails-dbconsole/
Fly.ioへの初回デプロイに失敗するジンクスは今日も起きる

今回もまたFly.ioにデプロイする際に何かしらのトラブルが起きた。
起きるだろうなーと思いながらそれなりの対策はしていたものの、やはり起きてしまった。

```shell
v* is being deployed
***xx***: nrt pending
--> v* failed - Failed due to unhealthy allocations - no stable job version to auto revert to and deploying as v*

--> Troubleshooting guide at https://fly.io/docs/getting-started/troubleshooting/
Error abort
```

一応エラーログにトラブルシューティングガイドが提示されていたので、一応見てみた。

> That's not good, and there's no obvious reference to a host there. If we look at the fastify listen function though, we find it also takes a second parameter, the hostname as a string. If we just modify that line and add in the "0.0.0.0" host there...

https://fly.io/docs/getting-started/troubleshooting/

ホスト名として`"0.0.0.0"`を指定することが解決策として示されている。

ちなみに、この時の実装はこんな感じ。

```server.ts
const port = process.env.PORT || 3000;

app.listen(port, () => {
  require(BUILD_DIR);
  console.log(`✅ app ready: http://localhost:${port}`);
});
```

なので、一応修正して再度GitHub Actionsで実行してみた。

```server.ts
const port = process.env.PORT || 3000;

app.listen(
  typeof port !== "number" ? parseInt(port, 10) : port,
  "0.0.0.0",
  () => {
    require(BUILD_DIR);
    console.log(`✅ app ready: http://localhost:${port}`);
  }
);
```

しかし、これでもエラーは解決しなかった。
色々調べてみた結果、問題はポート番号にある気がしてきた。

Fly.tomlにも`internal_port`に`8_080`をしている。

```fly.toml
...
[[services]]
internal_port = 8_080
...
```

なので、実装自体は変えずに、Fly.ioのシークレットに`PORT`を追加することにした。

```shell
/home/node/.fly/bin/flyctl secrets set PORT='8080' --app example-app
```

するとエラーが解消されて、ようやく最初のデプロイに成功した。

```shell
v* is being deployed
***xx***: nrt running healthy
```

というわけで、今回の初回デプロイエラーでは、ポート番号問題にぶち当たったという内容でした。
WEBサイト制作_小技『YouTube』

# YouTubeを挿入
1. 　挿入したいYouTube動画を開く。
1. 　共有ボタンをクリック
1. 　埋め込みをクリック
1. 　＜iframe＞をコピー
1. 　VScodeに貼り付け
![スクリーンショット 2023-03-08 23.52.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193952/b4256e75-dcd3-6775-21ae-33548ccd5e8f.png)
![スクリーンショット 2023-03-08 23.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193952/df079d8b-cb26-2199-a46f-597ec6562a7e.png)
![スクリーンショット 2023-03-08 23.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193952/60840d5c-934e-43d0-d1b2-b99ce5b0dacb.png)
## html
![スクリーンショット 2023-03-08 23.49.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193952/6aefc7cd-f07f-3c3b-fa2d-c04bd843f039.png)
## Live
![スクリーンショット 2023-03-08 23.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193952/e0dc8730-6987-eeb7-75f8-d9c6441d500c.png)
Python演習問題＿0【　昔良くあった入社試験_Fiz・Buzz　】

# Fiz・Buzz
## FizBuzzをコーディングしてみよう
FizzBuzzとは、英語圏の有名な言葉遊び。 

ルールは単純で、1から順に数を数え上げていき、3の倍数なら「Fizz」5の倍数なら「Buzz」15の倍数なら「Fizz Buzz」、いずれでもなければその数を言うというもの。

→「1」「2」「Fizz」「4」「Buzz」「Fizz」「7」「8」「Fizz」「Buzz」「11」「Fizz」「13」「14」「Fizz Buzz」「16」…のように進行。

これを1から与えられた値までコンピュータに実行させるプログラムを作成する課題がFizzBuzz問題で、あるプログラミング言語で初歩的なプログラムを作成する能力があるかを見分ける簡易な試験としてよく知られている。


## 出力しよう
1. 　いくつまで出力するのかを入力させる
1. 　出力
【Git】コマンドで保護ブランチを設定する方法

## コマンドで保護ブランチを設定する

以下を実行するとコマンドで保護ブランチを設定できます。

`OWNER_NAME`と`REPO_NAME`は適宜変更が必要です。

``` protect-branch.sh
owner="OWNER_NAME"
repo="REPO_NAME"
repositoryId="$(gh api graphql -f query='{repository(owner:"'$owner'",name:"'$repo'"){id}}' -q .data.repository.id)"

gh api graphql -f query='
mutation($repositoryId:ID!,$branch:String!,$requiredReviews:Int!) {
  createBranchProtectionRule(input: {
    repositoryId: $repositoryId
    pattern: $branch
    requiresApprovingReviews: true
    requiredApprovingReviewCount: $requiredReviews
    isAdminEnforced: true
  }) { clientMutationId }
}' -f repositoryId="$repositoryId" -f branch="main" -F requiredReviews=1

```

実行後は以下のように設定され`main`ブランチには直接`push`できなくなります。

![image221019_204133.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/1b99abce-e6e7-f189-b5c4-abdc02535297.png)

上記以外の設定をしたい場合には以下のページを参照して設定を追加します。

https://docs.github.com/en/graphql/reference/input-objects#createbranchprotectionruleinput
Node.jsのvmモジュールの性能が意味不明すぎた。

## 結果は脅威の700倍!?いやいや、もはや意味不明でした。

Node.jsのバージョンをv14からv16へ更新したところ、TypeScriptで書いたテキストデータを処理するプログラムがいつまで経っても完了する気配がなく、性能低下の割合が測定不能な程とてつもなく長くなってしまう状態に陥ってしまいました。調査したところ、jsonpath-plusという外部パッケージで時間を食い潰していることが判明し、幸いにもパッケージのバージョンを上げることで性能劣化の問題は解消することができました。

しかし、一体なぜNode.jsのバージョンを変えただけでそのパッケージの性能が著しく低下し、パッケージのバージョンを上げるとなぜ解消されたのか。パッケージの変更履歴を見てみると、vmモジュールを使った処理部分に起因していることが分かりました。

ということで、vmモジュールの性能をv14、v16、v19で比較して見ました。
測定用に書いたコードはこちら。
```typescript 
import { performance } from 'perf_hooks';
import { Script } from 'node:vm'

const start = performance.now();
for (let i = 0; i < 200000; i++) {
    const script: Script = new Script('const str = "Muda code"');
}
const stop = performance.now();
console.log(stop - start);
```

実行結果はなんとv16で約700倍遅く、v19についてはもはや意味不明です。使用したのは古いMacですが、Windowsだとこれよりはまだ早いですが、それでもv14に比べれば驚くべき遅さです。
|v14.19.3|v16.14.2|v19.7.0|
|--|--|--|
|245.9|172668.4|8705376.1|

## vm.Scriptって？

vm.Scripはさまざまな用途があると思いますが、１つにはプログラム内で動的にJavaScriptコードを生成して実行するという用途が挙げられると思います。jsonpath-plusでは、jsonpathに含まれる条件式を評価するために使用しています。

以下は、vm.Scriptの説明をNode.jsのDocumentから一部抜粋したものですが、これによるとインスタンス生成時に引数で渡したコードをコンパイルしている可能性があります（Documentを読むと関数など全てのコードが一度に直ちにコンパイルされるわけではなく実際にコードが実行されるときにコンパイルされるようです）。ということはこれが間違っていなければ、Node.jsなのかV8なのかそのどちらに原因があるのかわかりませんが、コンパイラが遅くなっているということになります。
```
Instances of the vm.Script class contain precompiled scripts that can be executed in specific contexts.

code <string> The JavaScript code to compile.
```

## 対策

**Scriptインスタンスをキャッシュ／再利用**しましょう。いたって普通です。

測定に用いたコードは処理時間測定のために毎回無駄にScriptのインスタンスを生成していますが、コードが変わらなければ毎回作る必要はないはずです。Documentによれば一度生成すれば何度も再利用できるようになっています。
jsonpath-plus v6では`vm.runInNewContext`を使用していたのを、v7で`vm.Script`を使用するように変更がなされ、インスタンスをjsonpathをキーにキャッシュしてコンパイル済みコードを再利用することで性能改善を図っています。コンパイルと実行を同時に行う`vm.runInNewContext`では再利用を図ることができません。

また別の方法として、Scriptインスタンスメソッド`createCacheData`を使ってキャッシュデータを作成し、これをScriptコンストラクタに渡すとコンパイルの速度が向上するようです。以下をv19で試したところ**986.2**となりました。**8705376.1**が**986.2**です。２時間以上かかっていたのが１秒足らずまで短縮されました。

```typescript 
import { performance } from 'perf_hooks';
import { Script } from 'node:vm'

const start = performance.now();
let cache: Buffer | undefined = undefined;
for (let i = 0; i < 200000; i++) {
    const script: Script = new Script('const str = "Muda code"', { 'cachedData': cache });
    cache ??= script.createCachedData();
}
const stop = performance.now();
console.log(stop - start);
```

なお、必ずしも渡したキャッシュデータがV8によって活用されるわけではないようです。毎回コードが違っていたらキャッシュデータは活用されなさそうなのはなんとなく想像できますが、どの程度の違いまで活用されるのかわかりません。活用されたかどうかはScriptインスタンスのプロパティ`createCachedData`にセットされるのですが、事後結果でしかないこれを知ったところでどうしろと言うのだろう。。。やっぱ今のなしで、とでも？う〜ん。
`createCacheData`のユースケースがいまいちピンと来ないのですが（ないよりマシ的な保険？）、コードが同じならScriptインスタンスを再利用した方が良さそうです。
fish shellで0埋めされた連番を作る

# 0埋めが必要な場面

1〜10までの連番のフォルダを作ることを考えます。
普通に`1, 2, 3, ... 10`と並べてしまうと、辞書順で表示されたときに

```:0埋めなし
1
10
2
3
4
...
```

最後にいてほしいはずの`10`が`2`より前に表示されてしまいます。これを解決するためには、1桁の数字の前には`0`を付加する（0埋めまたは0パディング）必要があります。

```:0埋めあり
01
02
03
04
...
09
10
```

# 普通の連番の作り方

```fish
> seq 1 10
1
2
3
4
5
6
7
8
9
10
```

# 0埋めされた連番の作り方

`-w`オプションを付けます。

```fish
> seq -w 1 10
01
02
03
04
05
06
07
08
09
10
```

100未満の数字を3桁で作りたいなど桁数が足りていない場合は、`seq -w 1 009`などと指定すればできます。

```fish
> seq -w 1 009
001
002
003
004
005
006
007
008
009
```

# 最後に

記事を読んでくださってありがとうございます！

Twitterフォローしていただけると記事を書き続けるモチベーションになります😺
https://twitter.com/_matoruru
Jetpack Compose  Floating Action Button(ボタンの背景色)の設定

    
メモ：よくある追加ボタン(＋)のバックグラウンドカラーの変更　

 Scaffold(floatingActionButton = {
            FloatingActionButton(
                backgroundColor = Color.Red,　//追加　ここでは赤に変更
                onClick = { viewModel.isShowDialog = true })
            {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "新規作成"
                )
            }
        }

参考(ありがとうございました！)
https://coflutter.com/jetpack-compose-how-to-create-floating-action-button/
xibファイルをregisterしたい時

## 最初に
自分の学習用に備忘録として投稿
## 内容
タイトルにも書いたようにxibファイルをregisterしたい時の書き方について
通常だと、
```
tableview.register(TimelineTableViewCell.self, forCellReuseIdentifier: "cell")
```
と書いてもいいのだが今回はうまくregisterできなくて・・・

なので、今回はclassを指定するのではなく、xibファイルの名前を指定して
```
tableview.register(UINib(nibName: "TimelineTableViewCell", bundle: nil), forCellReuseIdentifier: "cell")
```
このように記述。
そうしたら、うまくregisterすることができました！
## 最後に
まだまだ初学者で右も左もわからないですが、もしを私の備忘録が皆様のお役に立てたら幸いです。
React Axiosでpost後にページを遷移しようとしたら message: "Request aborted", name: "AxiosError",  code: "ECONNABORTED"エラー


エラー内容に持っていかれすぎて、基本を忘れないようにしようというお話です。

## やったこと
下記のような、postをaxiosで実行する関数をReactで作り、コンポーネントで読み込んだ上でapiサーバーにpostを実行しました。
postすることでtopicが作られます。
同じページで追加されたコンテンツを表示したかったので、再読み込みをしようとしていました。
※useStateで既存ページにアイテムを追加しても良いけど、apiから返ってくる値の調整が面倒だったので、一旦これで試してた状態。


該当の関数。
```js

export const createTopics = (title,body) => {
    const target_URL =  `${API_URL}/create`;
    const res = axios//csrf保護の初期化
        .get(API_SANCTUM_URL, { withCredentials: true })
        .then((res) => {
            axios.post(target_URL,
                {title: title,body: body},
                {headers:
                    {'Content-Type': 'multipart/form-data',},
                    withCredentials:true,
                },
            )
        })
        return res.data;
}

```


呼び出し元のコード。(formのsubmitをすると走るよ）

```js

const submit = (data:FormInputs) => {
       createTopics(data.Title,data.Body,data.Status,imgData)
       window.location.reload()
}

```

## 事象
これを実行すると、コンソールにエラーが発生。
ページの再読み込みは実行されるが、topicが追加されていません。
なお、エラー内容は以下のものです。
```js
Uncaught (in promise)  Object { message: "Request aborted", name: "AxiosError", 
code: "ECONNABORTED", config: {…}, request: XMLHttpRequest, stack: "" }
```


## はまったポイント
このエラーで、なんらかの原因でaxiosのrequestが中断されてる。。。ということは想像できます。
また、状態としては、createTopicsが実行される前に再読み込みが実行された状態。
ここでひとまずなんで中断されたんだ？とググりました。あまりhitはしませんが、下記のissueが見つかりました。

https://github.com/axios/axios/issues/4967

axios本家のissueだ、これは何か重要な情報に違いない！と読み込みます。
buttonタグにtype = buttonをつけてみて、とかfirefoxでだけ起きるよ、とかあるけれど、
そもそもaxiosはpromiseを返すということを忘れていました。


## 解決。

呼び出し元でasync awaitつけてthenの中で実行してみました。

```js

 const submit = async (data:FormInputs) => {
      await createTopics(data.Title,data.Body,data.Status,imgData).then(()=>{
           window.location.reload();
       })
}

```

ではなかった。呼び出しもとは最初の状態に戻して、

関数自体で行う必要があります。こうですね。


```js

export const createTopics = (title,body) => {
    const target_URL =  `${API_URL}/create`;
    const res = axios//csrf保護の初期化
        .get(API_SANCTUM_URL, { withCredentials: true })
        .then((res) => {
            axios.post(target_URL,
                {title: title,body: body},
                {headers:
                    {'Content-Type': 'multipart/form-data',},
                    withCredentials:true,
                },
            ).then(()=>{
                window.location.reload();
            })
        })
        return res.data;
}

```

これで、postがきちんと実行された上で、再読み込みが実行されました。

### まとめ 
createTopicsは非同期の処理なので、

1.axiosの処理が開始
2.1が終わる前に次の行でリダイレクト

の状態から、

1.axiosの処理が開始
2.1の処理の中で、リダイレクト

に変えた状態です。
エラーメッセージに引っ張られてaxiosの使い方、非同期の動きの基本を忘れていました！

◼️参考
https://axios-http.com/ja/docs/post_example
Python演習問題＿0【　BMI_計算　】

# Body Mass Index 　(　BMI指数　) #
## 肥満 ##
日本人は肥満になっているとか…。

厚生労働省によると、
```
肥満者（BMI≧25 kg/m2）の割合は男性 33.0％、女性 22.3％であり、この 10 年間でみると、女
性では有意な増減はみられないが、男性では平成 25 年から令和元年の間に有意に増加して
いる。
やせの者（BMI＜18.5 kg/m2
）の割合は男性 3.9％、女性 11.5％であり、この 10 年間でみると、
男女とも有意な増減はみられない。また、20 歳代女性のやせの者の割合は 20.7％である。
65 歳以上の高齢者の低栄養傾向の者（BMI≦20 kg/m2
）の割合は男性 12.4％、女性 20.7％
であり、この 10 年間でみると男女とも有意な増減はみられない。年齢階級別にみると、男女と
も 85 歳以上でその割合が高い。 
```
と書かれている。
グラフで見てみると以下のようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2915564/3d2303a8-72f6-d3ba-147e-ac45c953bce9.png)

この厚生労働省がだしている肥満の基準になるBMI指数(ボディマス指数とは、体重と身長の関係から算出される、ヒトの肥満度を表す体格指数)を求めて利用者のBMI指数をみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2915564/2fb2128d-6627-0286-deb7-820f499df6a1.png)
【　求め方　】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2915564/3ca1bc15-9398-5394-0e5b-0d5e1148fb6c.png)


## 出力してみよう ##
①身長を入力
②体重を入力
③計算
④該当の結果を出力

以上をもとに、出力してみよう。


【　解答例　】

```
# 身長を入力（メートル単位）
height = float(input("身長を入力してください（メートル単位, 例: 1.75）: "))

# 体重を入力（キログラム単位）
weight = float(input("体重を入力してください（キログラム単位, 例: 70）: "))

# BMIを計算
bmi = weight / (height ** 2)

# BMIの結果を出力
print(f"あなたのBMIは {bmi:.2f} です")

# BMIに基づく健康状態の判断を出力
if bmi < 18.5:
    print("あなたは低体重です")
elif 18.5 <= bmi < 25:
    print("あなたは普通体重です")
elif 25 <= bmi < 30:
    print("あなたは肥満（1度）です")
elif 30 <= bmi < 35:
    print("あなたは肥満（2度）です")
elif 35 <= bmi < 40:
    print("あなたは肥満（3度）です")
else:
    print("あなたは肥満（4度）です")
案件に初参画して２ヶ月で思うこと

# はじめに
研修が終わって案件参画から２ヶ月が経ったので、今思ってることを記事にしようと思います。
現在転職活動中の方や、研修中の方でもうすぐ案件入るよって方などの参考になれば幸いです。

## 自己紹介
- 年齢 27歳 (1995年 生)
- 最終学歴 工業高校卒 (機械科)
- 転職回数 3回 (全て正社員)
- 現職！　SES

２ヶ月の入社時研修(Java・フレームワーク・Linux等)を行なって、今案件に入って２ヶ月になります。
案件はAndroid開発になります。
現場の人数は50人くらいで、プロパーが15人くらいの現場です。

# ２ヶ月の振り返り
## 参画~１週間
最初の１週間はPCのセットアップを行なっていました。
初期設定とソフトウェアのインストールって感じですね。
大変だったのは、SVNを使ったことがなかったので、何これって感じだったことですかね。

ちなみにSVNとは`集中型バージョン管理システム`らしいです。
現場のドキュメント類などの管理をするシステムですね。
結構使っている現場多いみたいなので興味があれば調べてみてください！
https://tortoisesvn.net/docs/release/TortoiseSVN_ja/index.html

## １ヶ月目　詳細設計〜実装
セットアップ終わってから１ヶ月が一番大変だった時期かもしれません。
思ったことは、新規参画でも**新人としては扱ってはくれない**ということですね。
タスクを普通に振られて、(こんなにすぐにタスク振られるんだ〜)とか思ってました。

プロパーからすれば、別会社の人間なので当然だと思いますけどね。

フェーズとしては、詳細設計から実装という感じでした。

詳細設計では、シーケンス図やクラス図も少し書く機会があったのですが、基本情報の学習で少しでも知っといてよかったと思いました！
そういう意味でも基本情報技術者試験は網羅的で、学習する価値はありますね。

現場に出るのが一番成長早いと聞いてはいましたが、確かにそうだなと思いました。
実務で扱うコードは自分で作ったプログラムと比べて、とにかく膨大です。
またエラー処理のような部分が書籍などでは書いてないことが多いです。
このことから、実務でコードを触って、さらに自分でアウトプットするというのがかなり成長に繋がると感じました。

あとは、現場指示する人との認識合わせが大切だと思いました。
「この認識であってますか？」と確認するだけでも手戻りがなくなるパターンもあります。
コミュニケーションは大切ですね。

良かった点は他にもあります。
Android開発なので、研修の内容とは違うので、自分で初心者向けの書籍を1冊さらっとやってから参画しました。

その甲斐あってあまり困ることなく実装入れたので、最低限のインプットはしていくべきかと思います。

あくまでも業務はアウトプットの場だと思っているので。

## ２ヶ月目　実装〜結合テスト
２ヶ月目のフェーズは、実装〜結合テストという感じです。

少し実装も慣れてきて、自分からプロパーに提案などもできるようになってきました。
しかし、提案する際にどう説明すればプロパーに伝わりやすいかを考える際に、オブジェクト指向の理解の浅さを感じたことがありました。
まだまだ勉強不足ですね。

結合テストも、もちろん初めて行いました。
テスト観点やテストケースなど、知らないことが多く、とても勉強になりました。

Android開発なので、実機を使ってテストをするのですが、設定が大変でしたね。
でもその辺は現場によっても違うので、詰まったらあまり悩みすぎずに聞くということも大切だと思いました。
特にテストのフェーズは、スケジュールが結構タイトなことが多いので、悩んで遅れちゃう方が困るとプロパーさんも言ってたので、どんどん周りに聞いてました。

どんどん聞いていたので、テスト先行して進められて褒められたので、皆さんも参考にしてみてください。

# まとめ
- 早く現場出た方が、確かに成長早い
- 現場以外でもインプットアウトプットはした方がいい
- わからなければ聞くことが大切
- 認識合わせとかのコミュニケーションは大切

良かった点
- 最低限のインプットをしていたので、比較的スムーズに参画できたこと
- 基本情報技術者で学習していたので、UMLとかに苦手意識少なかったこと

この２ヶ月もかなり成長を実感できる期間でした。
３月からも成長していけるよう頑張ります！

## おまけ

３月から新規参画者のフォローも行なっているのですが、PCセットアップの手順間違えたりで、問題に発展しそうなことがありました。
よくわかんないけど、これでいいや〜みたいな感じで進めてた感じがしました。
そういった些細なことでも、後々問題に発展することもあるので、ちょっと怪しいと思ったら聞くことも大切ですね。

SESって、未経験者は技術力よりもコミュニケーション能力の方が大事かもですね。
Git 個人的フワッとしか知らないコマンドを使ってみるの会(revert)

# はじめに
知ってるけどフワッとしていてしっかり説明できるか不安なコマンドがあったので使ってみるの会を開催しました(1人で)ので備忘録として残します。

# 実践
早速いきましょう。今回は好きなサッカー選手リストを作成するという体で進めました。

以下のファイルを作成し
```soccer.md
# プレミアリーグ好きな選手リスト
- モハメドサラー
- ハリーケイン
- メイソンマウント
```
いつも通り`add`してから`commit`して`push`しました。


<この時点のgit log>

```
commit 7ca873425bc86014011354be9f0249cbf3e7e753 (HEAD -> feature/hoga, origin/feature/hoga)
Author: hrk-sgymm23 <xxx.jp>
Date:   Wed Mar 8 21:53:02 2023 +0900

    プレミア好きな選手リスト作成
```
その後、`マルコ・ロイス`を追加するのを忘れていたので
```soccer.md
# プレミアリーグ好きな選手リスト
- モハメドサラー
- ハリーケイン
- メイソンマウント
- マルコ・ロイス
```
再び`add`してから`commit`して`push`！

<この時点のgit log>
```
commit 3b76a63aa9f533248aef7be01aabd215b33a74a5 (HEAD -> feature/hoga, origin/feature/hoga)
Author: hrk-sgymm23 <xxx.jp>
Date:   Wed Mar 8 22:04:06 2023 +0900

    プレミア好きな選手リスト追加

commit 7ca873425bc86014011354be9f0249cbf3e7e753
Author: hrk-sgymm23 <xxx.jp>
Date:   Wed Mar 8 21:53:02 2023 +0900

    プレミア好きな選手リスト作成
```

しかしここで問題が起きます。
なんと`マルコ・ロイス`は`プレミアリーグ`の選手では有りません、、、！(サッカー知らない人からしたら知らんがなですよね)

そこで使うのが`revert`です。コマンドとしては
```bash
$ git revert ${commit ID}
```
なので今回`マルコ・ロイス`を追加した際のコミットIDが`git log`より`3b76a63aa9f533248aef7be01aabd215b33a74a5`なので

```
$ git revert 3b76a63aa9f533248aef7be01aabd215b33a74a5
```
になります。
実行するとコミットメッセージを編集するエディターが出るのでコミットメッセージを編集し`git log`とファイルを確認すると
<git log>
```
commit a9bb7f72ab4bd7409d45be3737a5abd939d782ed (HEAD -> feature/hoga)
Author: hrk-sgymm23 <b1805473@planet.kanazawa-it.ac.jp>
Date:   Wed Mar 8 22:31:25 2023 +0900

    Revert "マルコ・ロイス削除"

    This reverts commit 13f8a38628e480b3fefe5c3f71d53863ad631800.

```
編集したコミットメッセージが追加され
```soccer.md
# プレミアリーグ好きな選手リスト
- モハメドサラー
- ハリーケイン
- メイソンマウント
```
`マルコ・ロイス`がいなくなっています。

これが`revert`の基本の使い方みたいです。
```
$ git revert ${commit ID} -n
```
だとコミットは残さないみたい。


# 最後に
次は`cherrypick`を使ってみるの会にしたい。
Gemについて

# はじめに
Gemについて記録していこうと思います！

※gem導入方法(インストール方法)は下記参照

https://qiita.com/ayamo/items/ef4471923517353073b0

-----

# ①Gemとは？
Gemとは、誰かが作成したパッケージのこと。

#### パッケージとは？:hushed:
プログラムで便利な機能をまとめたもの！
一から作らずとも、gemをインストールするだけでクオリティ高いものが作れてしまいます:clap_tone3:
もうすでにコードが出来上がっており書く必要がない為、効率よく開発を行うことができます:ok_hand:

コードはパッケージよって違い、画像加工、フォロー機能など沢山あります。

## Gemを調べる（検索）

#### ①使いたいGemを探せるサイト
多くのGemパッケージはRubyGemsで管理されており、下記のURLから検索可能です。
自分で作成したGemを公開することも可能です:sparkles:

https://rubygems.org/


#### ②ダウンロード数が多いGemが確認できるサイト
毎日のダウンロード数ランキングや注目度ランキングなど、トレンドのGemを探すことが出来ます！

https://bestgems.org/

---

### gemのメリットは？

- gemを利用すればパッケージを簡単にインストールすることが出来ます。
- 初心者でも本格的なWEBアプリの機能など実装可能です！
私が使ったとこがあるのは、ユーザー登録・承認機能です（gem 'devise')
何もしなくても登録も承認機能も付きました！ありがたいです:pray:


### gemのデメリットは？
- 英語表記の為、調べたりするのに時間がかかる可能性がある。
- Ruby on railsのバージョンによっては互換性がなくなり、エラーが起きる可能性がある。
- セキュリティリスクがある。誰でも公開することが出来るので中には脆弱性があるものも含まれている可能性がある。


私も色んなgemに挑戦してみたいなと思います:relaxed:
PlantUMLのシーケンス図で、スクロールしてもライフラインの名前がわかるようにしたい


最近、シーケンス図を描くときはもっぱら PlantUML + VSCode(Markdown Preview Enhanced)  の環境を使っている。ただ、うっかりシーケンス図が長くなった時に「どのライフラインがどのモジュールだっけ?」となることが (主にレビューしてもらっているときに) 多々ある。

astah* の↓みたいな機能 (下の方にスクロールしたときにライフラインの名前が表示される) が欲しかったけどないようなので、対策案を考えた。
![上にライフラインの名前が出る](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66635/474d5415-9d8e-9c70-897d-68f1068f0bf8.png)

## ライフライン名を書いたノートを適度な間隔で各ライフラインの上にのせる
デフォルトだとノートごとに改行されるようなので、 `/` をつけて同じ行に表示されるようにした。
(この方法を最初うまく見つけることができなかった。見るべきものは[公式サイト](https://plantuml.com/ja/sequence-diagram)だ。)

また、他のノートと混ざらないように `rnote` を指定してみた (色も変えた方がわかりやすいかも) 。

```
@startuml
participant ライフライン0 as l0 order 1
participant ライフライン1 as l1 order 2
participant ライフライン2 as l2 order 3
participant ライフライン3 as l3 order 3

l0++
    l0->l1++: メッセージ0
        l1->l2++: メッセージ1
            l2->l3++: メッセージ2
            return
        return
        l1->l1: メッセージ4
    return

    rnote over l0: ライフライン0
    /rnote over l1: ライフライン1
    /rnote over l2: ライフライン2
    /rnote over l3: ライフライン3

    l0->l1++: メッセージ5
        l1->l2++: メッセージ6
            l2->l3++: メッセージ7
            return
        return
        l1->l1: メッセージ8
    return
l0--
@enduml
```

短いので効果は感じにくいけど、こうなる。
![表示結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66635/96aec551-bf67-ab35-1c2f-3c600e7a727c.png)

あとは、この
```
    rnote over l0: ライフライン0
    /rnote over l1: ライフライン1
    /rnote over l2: ライフライン2
    /rnote over l3: ライフライン3
```
を画面に入る位置に都度入れていけばよい。

## そもそも
そんな長いシーケンス図は書かない方がいいのかも。
他に良い案はないものか。
勉強できる環境というのは贅沢なんですよ

# はじめに
この記事は年収300万のクソ雑魚研究開発社会人が、5年後年収1000万を目指して頑張る日記です。~~記事書いてないで勉強しろ~~
資格の取り方を求めてやってきた人には向いていませんが、クソ雑魚が苦しみもがく様を見て笑ってくれると嬉しいです。


# 自己紹介
名前：みみやび
出身：東京
おしごと：研究開発
年収：300万円台
プログラミング歴：Python 1年だけ
保有資格：G検定＃2022　


# 目標(2023年)
- 資格系
  - E資格
  - 基礎情報技術者試験
  - （応用情報技術者試験）

できれば応用技術者も取りたいが、まずはE資格が最優先。
E資格用講座の受講料は会社が出してくれるので有難く使う ~~恩を仇で返すな~~


# やること・やったこと(2023/3/8)
- E資格に向けて
![513J77QZHgL._SY344_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3250001/926facb2-3000-bdec-9392-d816fa942a4c.jpeg)
　まずはこいつを読む。目標は2週間。どこかの東大生が10日くらいでやってたけど無理そう。

あと記事書くの初めてなんだけど、これ追記とか ~~できるよね？~~ できたね
Go言語gRPCを爆速で試す方法

**やりたいこと**
Go言語gRPCのクライアント⇔サーバ通信をローカルで試す。

**1.インストール準備**
　・protocインストール([こちらを参照](https://qiita.com/Sylba2050/items/8ee3228fae50d35ce38d))
```bash
go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest
```

**2.プロジェクト＆各ディレクトリ作成**
```bash
mkdir example
mkdir -p example/proto
mkdir -p example/grpc_sample
mkdir -p example/server
mkdir -p example/client
```

**3.go.mod作成**
```bash
cd example
go mod init github.com/example
```

**2.protoファイル作成**
```bash
cd proto
```
**以下のsample.protoをprotoディレクトリに保存**
```proto
syntax = "proto3";
package sample;

option go_package = "../grpc_sample";

message Message {
  string body = 1;
}

service SampleService {
  rpc GetData(Message) returns (Message) {}
}
```

**3.protoファイルからprotoc-gen-go/protoc-gen-go-grpcファイル生成**
```bash
protoc  --go_out=. --go-grpc_out=require_unimplemented_servers=false:. sample.proto
```

**サーバープログラム作成**
```bash
cd ../server
```
**以下のmain.goをserverディレクトリに保存**
```golang
package main

import (
	"github.com/example/grpc_sample"
	"golang.org/x/net/context"
	"google.golang.org/grpc"
	"log"
	"net"
)

func main() {
	log.Print("main start")

	// 9000番ポートでクライアントからのリクエストを受け付けるようにする
	listen, err := net.Listen("tcp", ":9000")
	if err != nil {
		log.Fatalf("failed to listen: %v", err)
	}

	grpcServer := grpc.NewServer()

	// Sample構造体のアドレスを渡すことで、クライアントからGetDataリクエストされると
	// GetDataメソッドが呼ばれるようになる
	grpc_sample.RegisterSampleServiceServer(grpcServer, &Sample{})

	// 以下でリッスンし続ける
	if err := grpcServer.Serve(listen); err != nil {
		log.Fatalf("failed to serve: %s", err)
	}

	log.Print("main end")
}

type Sample struct {
	name string
}

func (s *Sample) GetData(
	ctx context.Context,
	message *grpc_sample.Message,
) (*grpc_sample.Message, error) {
	log.Print(message.Body)
	return &grpc_sample.Message{Body: "レスポンスデータ"}, nil
}

```

**クライアントプログラム作成**
```bash
cd ../client
```
**以下のmain.goをclientディレクトリに保存**
```golang
package main

import (
	"github.com/example/grpc_sample"
	"golang.org/x/net/context"
	"google.golang.org/grpc"
	"log"
)

func main() {
	var conn *grpc.ClientConn
	conn, err := grpc.Dial(":9000", grpc.WithInsecure())
	if err != nil {
		log.Fatalf("did not connect: %s", err)
	}
	c := grpc_sample.NewSampleServiceClient(conn)

	response, err := c.GetData(context.Background(), &grpc_sample.Message{Body: "送信データ"})
	if err != nil {
		log.Fatalf("Error when calling SayHello: %s", err)
	}
	log.Print(response.Body)

	defer conn.Close()
}
```

**パッケージをダウンロード**
```bash
cd ../
go mod tidy
```

**動作確認**

**サーバ起動**
9000ポートでリッスン(待ち)状態
![server.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3114591/fbcf3ec0-c56b-0018-759d-9d5506cd0087.png)

**クライアント**
実行するとサーバーにリクエストして「レスポンスデータ」を取得する
![client.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3114591/aaaf514a-d06a-d0fc-503b-82a960773cc3.png)
制御工学の状態方程式をOpenRCFで数値計算する方法

本稿では，制御工学に出てくる状態方程式をOpenRCF（ver2.5）で実際に数値計算して，結果をシミュレータで可視化する方法を解説していきます．

OpenRCFは下記のサイトからダウンロードできます．
https://mase.openrcf.site/

ここではバネ・マス・ダンパ系の状態方程式を計算例として使用します．
![20230302201823.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310597/d63d12da-e789-2727-8cd1-75a008c35250.png)
$x_2 = \dot{x}_1$となるので，$x_2$は物体の速度になります．
図中ではバネとダンパが物体の左側面と接続していますが，実際には物体の中央と接続していると考えてください．また，バネの自然長は 0 です．
状態方程式の導出方法については他の解説記事に書かれているので割愛します．

この状態方程式をOpenRCFで数値計算するには，以下のようにコードを書きます．

```ruby:MainWindow.xaml.cs
Cuboid Cuboid = new Cuboid();
Line Spring = new Line();
Line Damper = new Line();

Vector dx = new Vector(2);
Vector x = new Vector(2);
Vector b = new Vector(2);
Vector Ax = new Vector(2);
Matrix A = new Matrix(2, 2);
float u = 0;
float m = 3;
float c = 3;
float k = 5;
float dt = 0.05f; // 0.05[s] = 50[ms]

void Setup()
{
    Cuboid.Position[2] = 0.5f * Cuboid.SizeZ;
          
    Spring.Position1[0] = 0;
    Spring.Position1[1] = 0.1f;
    Spring.Position1[2] = 0.5f * Cuboid.SizeZ;

    Spring.Position2[0] = 0;
    Spring.Position2[1] = 0.1f;
    Spring.Position2[2] = 0.5f * Cuboid.SizeZ;

    Spring.Color.SetBlack();
    Spring.Width = 5;

    Damper.Position1[0] = 0;
    Damper.Position1[1] = -0.1f;
    Damper.Position1[2] = 0.5f * Cuboid.SizeZ;

    Damper.Position2[0] = 0;
    Damper.Position2[1] = -0.1f;
    Damper.Position2[2] = 0.5f * Cuboid.SizeZ;

    Damper.Color.SetOrange();
    Damper.Width = 5;

    A[0, 0] = 0;
    A[0, 1] = 1;
    A[1, 0] = -k / m;
    A[1, 1] = -c / m;

    b[0] = 0;
    b[1] = 1 / m;

    Parallel.RunEndless(CalcEq, (uint)(1000 * dt));
}
        
void Draw()
{
    Cuboid.Draw();
    Spring.Draw();
    Damper.Draw();
}
       
void CalcEq()
{
    dx = A * x + b * u;
    x = x + dt * dx;

    Cuboid.Position[0] = x[0];
    Spring.Position2[0] = x[0];
    Damper.Position2[0] = x[0];
}

void Button1_Click(object sender, RoutedEventArgs e)
{
    u = -6;
}

void Button2_Click(object sender, RoutedEventArgs e)
{
    u = 0;
}

void Button3_Click(object sender, RoutedEventArgs e)
{
    u = 6;
}
```
2～3行目でLine型の変数Spring, Damperを作成していますが，これらはバネとダンパの見た目を表しているだけの太い線なので，無くても計算結果には影響しません．

関数CalcEq()では，状態方程式を計算した後に
```math
\boldsymbol{x} = \boldsymbol{x} + \dot{\boldsymbol{x}} \times {\text d}t \ （状態 \ \boldsymbol{x} \ に 
\ \dot{\boldsymbol{x}} \times {\text d}t \ を累積加算）

```
という処理をしているので，現在の状態$\ \boldsymbol{x} \$ が時々刻々と変化していきます（関数CalcEq() は50 [ms] に1回の周期で並列実行されている）．

上記のコードを実行すると以下のようになります．
![バネ・マス・ダンパ系.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310597/ad610cd2-3cae-a431-5202-23258d1b7188.png)
ボタン1とボタン3をクリックすると外力$\ u\ $が加わるので，物体が「びよ～ん」と動きます．

パラメータ $m, c, k$ を変更すると異なる挙動になるので，色々と試してみると理解が深まると思います．

結果をグラフで表示する方法は2つ考えられます．1つ目は，物体の座標をコンソールに文字列として表示させ，それらをエクセルにコピーする方法です．2つ目は，Graph Maker という OpenRCF の拡張キットを使うことです．Graph Maker は OpenRCF の公式ホームページからダウンロードできます．

ある程度慣れてきたら，以下の練習問題を解くことで制御工学の理解がより深まるかもしれません．


【練習問題】
以下の条件を満たすような制御入力 $u$ を順に求めよ．

条件1：$x_1$ が 2 に収束する．

条件2：$x_1$ が 2 に収束し，なおかつ収束までに要する時間（整定時間）が，条件1の結果よりも短くなる．
JAVA学習の記録①　【オブジェクト指向の概要】

# 初めに
 こんにちは！いとっちです！
 この記事は、いとっちの学習の記録となっています。私が日々の学習でつまずいた内容を自分なりに記録しています。ご意見・ご感想があればぜひ教えていただきたいです。

# JAVA学習の記録①【オブジェクト指向の概要】
  「クラス」「メソッド」「フィールド」の基本的な使いかた

# 目次
1. オブジェクト指向とは
2. クラス・メソッドの定義　メソッドの引数・戻り値
3. インスタンスの生成

# 1.オブジェクト指向とは
オブジェクト指向とは、複数の部品（オブジェクト）を組み合わせて、１つのプログラミングを作っていく設計手法。
役割ごとに分けた「クラス」とい部品を複数作って、その部品を利用するプログラミング手法。

# 2.クラス・メソッドの定義　メソッドの引数・戻り値
## クラスの定義
クラスでは、設計図として例えられることが多く、クラスのメンバーには、メソッド（処理）、フィールド（記録）、コンストラクターなどがある。

**Dogクラスに構成要素を定義する**
```
public class Dog {
                  //ここにクラスの構成要素（メンバー）を定義する。
}
```
## メソッドの定義
メソッドとは、処理の塊のこと。いろいろなプログラムで同じ処理を行う場合や、同じ処理を複数回行う場合にメソッドを使うと何回も同じ処理を記述する必要がなくなる。外部からメソッドを使うことを**メソッドを呼び出す**という。

**メソッド定義の書式**
```
戻り値の型　メソッド名（引数リスト）｛
       //処理
}
```
**メソッドの引数**
メソッドを呼び出す際、データをメソッドに渡すことができ、メソッドに渡すデータのことを引数という。
**引数の定義**
```
void printName(  String       name    ) {
                 引数の型   引数の名前
```
***メソッドの戻り値***
メソッドから呼び出し元にデータを１つ返すことができる。このデータのことを戻り値という。戻り値のあるメソッドを定義した場合は、そのメソッドの処理が終えた後に、呼び出し元に戻り値を返す処理を書く必要があり、return文を使う。

***戻り値を持つメソッドの定義***
``` 
 boolean    isHungry(){
戻り値の型   
 return   true;
         戻す値
```

***戻り値のないメソッドの定義***
```
void printName(){ 
※戻り値がない場合はvoidを使う
```
# 3. インスタンスの生成
クラスの中にメソッドを定義しても、クラスのメソッドを直接呼び出すことはできない。***インスタンスを作成しないとメソッドは呼び出せない。
クラスは、どんな機能（メソッド）を持っているかかが記述されている設計書であり、設計図から起こした実体（インスタンス）が必要！！！***

***インスタンスの生成の仕方***
``` 
    Dog       pochi = new   Dog();
型（クラス名） 変数名       クラス名
※クラスも型として扱うことができ、生成したインスタンスはそのクラス型の変数に代入することができる。
```

***メソッドの呼び出し方***
```
   pochi.eat();   ※()には、引数がある場合には記述する。
インスタンスを入れた変数.メソッド名
```

***（例）メソッドの定義・呼び出しまで***
eatメソッドを定義
```:Dog.java
public class Dog{

void eat(String food){　　　　　　
 System.out.println( food + "を食べるよ"); 　
}
```
メソッドを呼び出す
```:UseDog.java
public class UseDog{
  public static void main(String[] args){
      Dog pochi = new Dog();
      pochi.eat("肉");
 }
}
※「肉を食べるよ」が出力される
```

参考文献
「いちばんやさしいJAVAの教本」著者　石井真
マークダウン記法(個人的メモ）

## マークダウン記法入門
初投稿です。
Qiitaに投稿するにあたって「markdown」って書いたことないなと思い、調べてみました。

### マークダウン記法とは
>Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。（Wikipedia)

書いたものが自動的にHTMLになってくれるので、wordやexcelのように処理を入れる必要がなく、文章に専念できそうです。ちなみにQiitaだけじゃなくNotionでもMarkdownが使えます。便利ですね。

### マークダウン記法の特徴

>Markdown（マークダウン）は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、
・手軽に文章構造を明示できること
・簡単で、覚えやすいこと
・読み書きに特別なアプリを必要としないこと
・それでいて、対応アプリを使えば快適に読み書きできること

[日本語Markdownユーザー会](https://www.markdown.jp/what-is-markdown/)のHPより

一度覚えてしまえばかなり快適に書けそうです。

### 代表的なマークダウン記法

#### 見出し

`#`をつけてあげると見出しになる。
HTMLでいうとhタグ。
`#`の数で大きさが変更可能。`#`で一番大きく、`#######`で一番小さくなる。

##### h5見出し
###### h6見出し

#### 斜体
`*文字列*`といれることで文字を斜体にする。
*文字列を強調したいとき*に使う。

#### 太字

`**文字列**`で太字。`*`が2つになることに注意。
**文字列を強調**したいときに使う。
ちなみに`***`で３つにすると太字と斜体を組み合わせることが出来る。
***斜体と太字の組み合わせ***

#### 文字の色を変える
`<font color = "文字色"></font>`で囲む。
<font color = "red">文字色の指定</font>

#### 引用
`>`で引用が使えます。
>これが引用

#### リスト

`- + *`のいずれかで順序なしリストの作成ができます。


-　リスト
-　リスト
-　リスト

#### 番号付きリスト

`1.`で番号を振ったリストが作成可能

1. a
1.1 aa
1.2 ab
1. b
2.1 bb
1. c
3.1 cc



#### リンク

`[リンクの文章](URL)`という形で書きます。
下の文字を押すと`https://youtube.com/`に飛びます。
[Youtube](https://youtube.com/)

#### ソースコード

ソースコードを書くときは````(もしくは~)を先頭と最後につける。

````test.java
import java.util.*;
public class Main {
	public static void main(String[] args){
		Scanner sc = new Scanner(System.in);
		
	}
}
````

~~~~test.java
 //~~~~でも記述可能。
~~~~

---
覚えたい記法が増えてきたら追記します。
SvelteKit + tsyringeでDIをやってみた

# 手順
SvelteKitのプロジェクトがある前提で進めていきます。  

**SvelteKit**

https://kit.svelte.jp

**tsyringe**

https://github.com/microsoft/tsyringe

## インストール
`tsyringe`と`reflect-metadata`をインストールします。  
下記コマンドで入ります。
```bash
npm install --save tsyringe reflect-metadata
```

## configの設定
`tsconfig.json`に下記2行を追加してあげます。
```json
{
	// ...
	"compilerOptions": {
        "experimentalDecorators": true,
		"emitDecoratorMetadata": true,
		// ...
	}
}
```

## 構成
関係ないファイルは省いて、`src`配下をこのような構成で進めます。
```
src
├── lib
│   ├── fuga.ts
│   └── hoge.ts
└── routes
    ├── +page.svelte
    └── +page.ts
```

## Inject対象のクラス
HogeのコンストラクタでFugaをInjectしています。
```typescript:src/lib/hoge.ts
import { inject, injectable } from "tsyringe";
import type { IFuga } from "./fuga";

@injectable()
export default class Hoge {
    constructor(
        @inject('Fuga') readonly fuga: IFuga
    ) {}

    execute(): void {
        this.fuga.showMessage();
    }
}
```

```typescript:src/lib/fuga.ts
import { injectable } from "tsyringe";

export interface IFuga {
    showMessage(): void
}

@injectable()
export default class Fuga implements IFuga {
    showMessage(): void {
        console.log('Hello, Fuga!');
    }
}
```

## containerへの登録
`+page.ts`の中でcontainerへの登録を行います。  
ここで`reflect-metadata`のimportも行う点に注意。
```typescript:src/routes/+page.ts
import 'reflect-metadata';
import Fuga from '$lib/fuga';
import { container } from "tsyringe";
import Hoge from "../lib/hoge";

container.register('Hoge', { useClass: Hoge });
container.register('Fuga', { useClass: Fuga });
```

## 利用してみる
registerをした名前でresolveを行うことで依存解決をしたHogeのインスタンスにアクセスしている。
```typescript:src/routes/+page.svelte
<script lang='ts'>
    import { container } from "tsyringe";
    import Hoge from "../lib/hoge";
  
    const hoge: Hoge = container.resolve<Hoge>('Hoge');

    function handleButtonClick() {
        hoge.execute();
    }
</script>
  
<button on:click={handleButtonClick}>Hello!</button>

```

## 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/af615eda-f84e-86b8-834b-a9b3f8c0583a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/2ac83173-c01d-3dde-1624-a17876d64dc9.png)
未経験エンジニアにおすすめしたい資格4選

# はじめに

未経験エンジニア2年目の私が、入社1年目に取得しといてよかった資格、また取得しておけばよかった資格をご紹介します。

まずはじめに入社1年目の自分のスペースとしては、

* ITリテラシーほぼ0（ドメインとは？レベル）
* ProgateのHTML、CSSを1周

スペックとはドがつくほどの初学者レベルでした。
そんな私が取得してよかった、早めに取得しとけばよかった資格をご紹介します。

# この記事の対象者

* 未経験エンジニアとして入社予定の人
* ITリテラシーを高めたい人
* 自分のWeb知識のレベル感を知りたい人

# Webエンジニア向け

## Webディレクション検定

Web制作の全体的の流れを体系的に理解することができます。要件定義やプロジェクト企画、サイト全体の情報構造設計、Webマーケティングなど、幅広い専門知識を学べます。

入社や配属されるまでの時間があまりない方、手軽にWeb制作の流れをつかんでおきたい方におすすめです。

## ウェブデザイン技能検定

ウェブデザイン技能検定は、Web業界で唯一の国家資格です。学科と実技の両方を合格する必要があり、Webデザインの知識だけでなく、実務能力も問われます。3級から2級、2級から1級と上がるにつれて、受験資格も厳しくなっており、1級の受験資格は、2級の技能検定に合格した者であってもその後2年以上の実務経験が必須となってくるので、早めに3級、2級を合格しておくことをおすすめします。

# エンジニア全般向け

## 基本情報技術者試験(FE)

基本情報技術者試験は、ITエンジニアの登竜門とも言われ、ITエンジニアとしての基礎をほぼ網羅できると言っても過言ではないでしょう。

# 必須ではないがおすすめの資格

## Photoshopクリエイター能力試験

エンジニアなのに何でPhotoshopの資格？と思う方もいらっしゃるかもしれません。デザイナーに頼むほどではない軽微な画像修正がきた場合などエンジニアでも対応できると重宝されます。エンジニアも基本的なPhotoshopの操作はできるようにしておくことをおすすめします。

# 最後に

いかがでしたでしょうか？今回は、未経験エンジニア2年目の私が、入社1年目に取得しておいてよかった資格、また取得しておけばよかった資格をご紹介しました。

自分のレベルを確認するためにも、まずは1つ受験してもいいかもしれません。

資格の勉強方法については、また改めてご紹介しようと思います。
最後まで読んでくださり、ありがとうございました。
爆速でYouTubeのIFrame Player APIを動かしてみる方法

# 概要
[YouTube](https://www.youtube.com) の [IFrame Player API](https://developers.google.com/youtube/iframe_api_reference?hl=ja) を実際に動作させて試してみたいことがあり
爆速で動かしてみました
所要時間 5分

# 手順

1. AWS S3 のバケットを作る
1. 公開設定をする
1. サンプルの index.html をアップロードする
1. アクセスする

以上

# 作業内容

## 1. AWS S3のバケットを作る

[AWS マネジメントコンソール](https://aws.amazon.com/jp/console/) にログインします

[Amazon S3](https://s3.console.aws.amazon.com/s3/) > バケット > バケットを作成をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/029c8373-ecbe-9bee-a1cd-692743b919a7.png)
**バケット名** は適当に決めます
**パブリックアクセスをすべてブロック** のチェックを外します
**現在の設定により、このバケットとバケット内のオブジェクトが公開される可能性があることを承認します。** にチェックを入れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/6a911398-9e2e-3686-2a0e-568ef0187170.png)
**バケットを作成** をクリック

## 2. 公開設定

1.で作成したバケットを開き **プロパティ**タブ をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/6d3ccdde-a964-6006-c252-cbfbd3733d48.png)
**静的ウェブホスティング** の **編集** をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/0380374b-a2c2-864e-5cb9-98d990c665d2.png)
**静的ウェブホスティング** の **有効にする** を選択
**インデックスドキュメント**は `index.html` と入力
**変更の保存** をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/39cebfac-ba46-0db4-9662-2b258f5932b7.png)
**アクセス許可**タブ をクリック して **バケットポリシー** を **編集**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/2d7e0adb-edb5-6e99-c79e-a3e2facc1398.png)
**ポリシー** に以下を入力して **変更の保存** をクリック
※ Resource は 編集欄のすぐ上に表示されている **バケットARN** を入力してください
```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::test-test-0000-1111/*"
        }
    ]
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/8cb789b0-4622-8fc9-e7e6-89dc50a58ffb.png)

## 3. サンプルのindex.htmlをアップロード

以下のURLから **はじめに** のサンプルコードをコピー
https://developers.google.com/youtube/iframe_api_reference?hl=ja
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/22ad6d3e-80cc-31df-9566-8d3a63d3ffe7.png)
テキストエディタでコピー内容をローカルに保存
ファイル名は `index.html` にします

S3のバケットを開いて **オブジェクト**タブ の **アップロード** をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/3944193a-5c4c-7315-a2d8-2c6c76523b3b.png)
先ほどの `index.html` をドラッグ＆ドロップして **アップロード** をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/cd2e20fe-9175-50da-82cd-64c5d52d4157.png)

## 4. アクセスする

アップロード:ステータスから **index.html** をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/6399bddf-3ada-d83c-74a4-442f1d697046.png)
**オブジェクトURL** をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/40003438-8f6b-ac4c-3ee0-a422d82630a9.png)

# はい、できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/9c2c0548-3b6b-e8bf-8df3-bd772d2ff80d.png)

以上です
PythonでMySQL触ってたらNULLがINSERTできなかった件

mysqldbを使ってこんな文を作ってみた。
```python:python
data1=1
data2=None
cursor.execute("INSERT INTO table1 VALUES ("+str(data1)+","+str(data2)+")")
```

Pythonで **NULLはNoneらしい** ので、こうしてみたものの、SQL的なエラーが発生する。

ポチポチググると、どうやらタプルで渡してやらないといけないらしい（謎）
> How can I insert NULL data into MySQL database with Python?
https://stackoverflow.com/questions/5507948/how-can-i-insert-null-data-into-mysql-database-with-python

> Python, Mysql, insert NULL
https://bytes.com/topic/python/answers/166025-python-mysql-insert-null

つまりこんな感じ
```python:python
data1=1
data2=None
cursor.execute("INSERT INTO table1 VALUES (%s,%s)",(data1,data2))
```
<br>
<br>
<br>

ちなみに
INSERTする値が一つだけの時も、タプルとして渡さないといけないので、タプルである証として「,」をつけることになりますね。
```python:python
data1=None
cursor.execute("INSERT INTO table1 VALUES (%s)",(data1,))
```
[Mac] Vscodeを日本語化の反映の仕方

### はじめに
`Visual Studio Code（VSCode）`を`Update`するとたまに日本語化が解除されてしまう。
日本語にするのどうやるんだっけ？と忘れがちなので忘却録。

### 日本語化にはプラグインが必要
まず、`VSCode`を日本語化するには、拡張機能`Japanese Language Pack for Visual Studio Code`をインストールすることで出来ます。拡張機能をインストールした後、`VSCode`の表示言語を日本語に変更することができます。

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

### 日本語化の反映の仕方
基本的には`install`すると勝手に日本語になるのだけど、何かの拍子(今回でいうとUpdate)で英語に戻ってしまうことがある。
日本語化への反映の仕方は、`Ctrl+Shift+P`キーを押してコマンドパレットを表示し、`Configure Display Language`コマンドを選択して、表示言語の設定画面から日本語を選択すると反映される

下記参考
![スクリーン ショット 2023-03-08 に 21.06.53 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022988/47ce19b0-96db-0c9e-4a87-6b449b6ed63c.png)

![スクリーン ショット 2023-03-08 に 21.07.01 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022988/d7d176ab-3b11-7132-7285-29f70566831c.png)
Return on Investment (ROI) Formula - Python Code

## Return on Investment (ROI) Formula
```math
ROI = \frac{\text{Gain from Investment} - \text{Cost of Investment}}{\text{Cost of Investment}} \times 100%
```
where:
Gain from Investment is the amount of money gained from the investment
Cost of Investment is the initial cost of the investment

## Python Code
```python:return_on_investment.py
def return_on_investment(gain, cost):
    roi = (gain - cost) / cost * 100
    return roi


gain = 2400
cost = 2000

roi = return_on_investment(gain, cost)

print("Return on investment: {:.2f}%".format(roi))

# Output: Return on investment: 20.00%
```
letとconstの違い

<H3>const</H3>
定数値を持つ

→更新、再宣言ができない
```dif_javascript
const checekr= 2;
const checekr= 1;

```
→再宣言x

```dif_javascript
const checekr= 2;
checekr= 1;

```
→更新x



<H3>let</H3>
変数の宣言に使われる

```dif_javascript
let checker = 3;
checker = 2;

```
→更新可能


※基本的にCONST使用、必要によってLET、VARは使用X
パケットキャプチャのテクニック

## tcpdumpでキャプチャする
### tcpdumpでキャプチャしている最中にgrepしたりteeするには
* ラインモード(-l オプション)で実行する必要がある
```bash:
# tcpdump -l | grep XXX
# tcpdump -l | tee outfile
# tcpdump -l -i enp0s3 | grep XXX
```
### tcpdumpでプロトコルとポートのフィルタリング
```bash:
# tcpdump ip
　⇒TCP、UDPのトラフィックを含む
# tcpdump tcp
  ⇒TCPのみ
# tcpdump udp
　⇒UDPのみ
# tcpdump port 443
　⇒443ポートの通信
```
任意のパスに次回ログイン時でも一発で戻る方法

# はじめに
サーバなどでターミナルを使っていると、**次回ログインした時も任意のパスに移動したい**場合があると思います。毎回、パスを打っていては時間の無駄になるので、その際に実装した方法を備忘録も兼ねて紹介します。

# 方法
セーブしたいパスで``pwd``で読み出し、適当にテキストファイルに保存しておくことで、次回ログアウト時でもそのファイルを読み出して``cd``で移動することができます。

コマンドで書くと
```Console
$ pwd > ~/.path.txt
```
として適当なファイルに保存してから、ログアウトします。
そして、次回ログイン後に、そのパスの入ったファイルを書き出し以下のようにして``cd``で移動します。
```Console
$ cd "$(cat ~/.path.txt)"
```

<br>

``~/.zshrc``, ``~/.bashrc``などに以下のようなエリアスを貼っておけば、``savepath``でパスを保存しておき、``gotopath``でそのパスに簡単に移動できます。
```
alias savepath='pwd > ~/path.txt'
alias gotopath='cd "$(cat ~/path.txt)"'
```

# 補足
作業中の場合はpushd/popdと呼ばれるコマンドでパスの移動をする方法もありますが、ログアウト後はその情報は残らないようなので今回のケースではうまく使えないので注意しましょう。
pushd/popdの説明は、[pushdとpopd](https://qiita.com/cvusk/items/fd93c0a7096b81f984c5)が参考になります。

# まとめ
ログイン毎に前回のパスに戻るためにコマンドを打つのは大変に感じていたので、一発で戻る簡単な方法を紹介しました。この記事が役に立てれば幸いです。
Salesforce認定アソシエイト試験の公式練習問題解説してみた-08

こんにちは

Salesforce認定アソシエイト試験の公式練習問題があるのはご存じでしょうか。
Trailheadにフラッシュカードとして何度も解ける練習問題がございます。

今回は
認定資格試験の準備: Salesforce 認定アソシエイト＞
ナビゲーションについて知識を深める

の問題4問目を解説します

今回の内容は動画絵も公開しています

https://www.youtube.com/watch?v=lKwvW4jKim8

<iframe width="560" height="315" src="https://www.youtube.com/embed/lKwvW4jKim8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

https://trailhead.salesforce.com/ja/content/learn/modules/cert-prep-salesforce-certified-associate/explore-navigation

今回の問題はこちらです
![グローバル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/3ce49bea-4ffe-2681-a33f-6ae2d1c31876.png)

正解はAです

ページの上にある虫眼鏡「グローバル検索」では、取引先などの特定のオブジェクトのみの検索を絞り込むことが可能です
![検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/b6caac93-1dec-6546-c395-e2e4659d472f.png)

Bについて
取引先のオブジェクトマネージャーでは取引先の検索条件の設定変更ができないので誤りです

Cについて
ユーザ設定では取引先の検索設定を変更することはできないので誤りです


## 他の認定アソシエイトの勉強方法について

他の勉強方法についてはこちらをご確認ください

https://qiita.com/Takaa/items/d35c9955fe8eb889d76b
devise（デバイス）の使い方

本日はdevise（デバイス）の使い方について投稿します！

○devise（デバイス）とは
---
Railsアプリケーションサービスで使われているgemの一つ。
このdeviseがあれば簡単にユーザー管理機能が実装出来る便利なもの。





devise（デバイス）の設定方法
---

まずGemfileというファイルの一番下に

    gem 'devise'

と記述します。

その後にターミナルに

    % bundle install

と記述するとインストール完了です。
※インストールした後は反映させる為に一度control + Cでリセットしておきましょう！

次に必要なファイルを作成する為に


    % rails g devise:install

と記述するとファイル必要なファイルがまとめて作られます。


次はdevise（デバイス）のモデルを作ります。
ユーザーを管理するモデルなのでuserモデルを作ります。

    % rails g devise user

これでuserモデルが作成されました。

ちなみにconfig/routes.rbの中に

      devise_for :users

この記述がされていればちゃんと登録されている証拠になります。

今日はここまで！次回はdevise（デバイス）のテーブル作成に関して詳しく投稿していきます。
ありがとう御座いました！！
Svelte Kit で ChatGPT API 使用したチャットサービス作った。マークダウンのコピペとかできる。おそらく ChatGPT PLUS より安く使える。

https://chat-c.netlify.app

↑ ChatGPT API (OpenAI API) でチャットサービスを開発しました。マークダウンのコピペをしやすいように実装しています。まだ自分自身 OpenAI API を使用して日が浅いため ChatGPT PLUS より安いとは断言できませんが、おそらく安く済みます。機能などの紹介は note でしているため Qiita では技術的なお話をメインでします。

https://note.com/himanushi/n/n6a6709110ef9

ソースコードはこちらです。

https://github.com/himanushi/chat-code

# スクリーンショット
![スクリーンショット 2023-03-08 18.11.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184616/54c441fa-ca9b-0923-bbb2-07f2e988b361.png)
ChatGPT Clone ですね。チャットシステムとか開発したことなかったので、勉強がてら Svelte Kit を使用して開発しました。
ChatGPT との違いは「マークダウン有効無効ボタン」、「コードのテーマ変更」、「使用料金の表示」ですね。

# 技術スタック
大まかに以下を使用しています。

* Svelte Kit
* XState
* Vite
* Ionicframework
* Capacitor.js

# Svelte Kit と Ionicframework
デザインは Ionicframework に全任せしています。以前、 Tailwindcss などを使用していましたが、個人開発においては Ionicframework に軍配が上がりますね。 Ionicframework は本当に使いやすく、まさに Web Component の王様ですね。ただし、 Svelte で Ionicframework を使用するときにやや使いづらい点があります。それは `slot` 被りです。

## Slot 問題
Svelte での `slot` は、コンポーネントの slot tag の name として使用されます。

```html
<slot name="header" />
// ↑ これにコンポーネントを挿入したい時は以下のように書く
<span slot="header" />
```

この `slot` が Ionicframework とコンフリクトしています。 Ionicframework での slot は、コンポーネントの位置を指定するために使用します。

```html
<ion-item>
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Default Item Lines</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>
```

そのため Svelte を使用しているときは、 **ルートで slot を書くことができません**。以下のような分離されたコンポーネントは作成できません。

```html
  <ion-icon name="star" slot="start"></ion-icon>
```

`Element with a slot='...' attribute must be a child of a component or a descendant of a custom elementsvelte(invalid-slotted-content)`

残念ですが、この場合は、 onMount などを使用し、 setAttribute で slot を更新するなどの方法が必要です。

## on:click などのイベント問題
svelte でのイベントは `on:click` などで実行します。

```html
<span on:click={() => console.log("click")} />
```

しかし、Ionicframework でのイベントは `onIonClick` という名前になっており、 `on:IonClick` ではトリガーを発生させることができませんでした。onIonClick としても発火しません。 on の次の名前は小文字ではないと発火しないのかもしれません。対策として、`on:ionClick` となるような形定義を作ります。以下のように書きます。

https://github.com/himanushi/chat-code/blob/main/src/%40types/ionic-components.d.ts

すると、

```html
<ion-button on:ionClick={(e) => console.log(e.detail.value)} />
```

で無事に発火できるようになります。


# XState
これはチャットする箇所のロジックを全てステートマシンとして実装しています。チャットのような、ロード、待機、などのステータスが時間で変化するときに最適です。

https://github.com/himanushi/chat-code/blob/main/src/machines/chat-machine.ts

# Capacitor.js
これは Web アプリをネイティブアプリに変換してくれるツールです。今回は、データ保存用として使用しています。今のところネイティブアプリにする予定はないですが、使用していることですぐにネイティブアプリ化できます。素晴らしい。

# あとがき
自分自身が、 ChatGPT PLUS を辞めて、使用するツールとして開発しました。安く済むといいなぁ。