OmniAICreator/Qiita-1.07M huggingface dataset:
エラー node_modules/msw/lib/types/utils/internal/compose.d.ts:3:12

```
TypeScript error in  /node_modules/msw/lib/types/utils/internal/compose.d.ts(3,12):
',' expected.  TS1005

    1 | declare type ArityOneFn = (arg: any) => any;
    2 | declare type PickLastInTuple<T extends any[]> = T extends [
  > 3 |     ...rest: infer U,
      |            ^
    4 |     argn: infer L
    5 | ] ? L : never;

```

mswの実装に TS4.0の機能 可変長タプル型 が使われているので、
4.0より下のバージョンの場合にエラーが出る。

## 解決策
TSを 4.0以上にアップグレードする


ref
[msw issue](https://github.com/mswjs/msw/issues/499)
[variadic-tuple-types](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#variadic-tuple-types)
less でファイルを複数開いたときの見方

## 状況

例えば下記のようなファイルがあるとき、
順番にファイルを見ていきたい時がありました。
しかし、 a.txt開く→閉じる→b.txt開く→閉じる がめんどくさくて順番に見れないものかと思ってたらありました。

```
[root@localhost ~]# ls -al | grep txt
-rw-r--r--   1 root root    5  1月 13 21:48 a.txt
-rw-r--r--   1 root root    5  1月 13 21:48 b.txt
-rw-r--r--   1 root root    5  1月 13 21:48 c.txt
```

## 見方

- 開くとき

順番に開きたいファイルをスペースで区切って記述します

```
less a.txt b.txt c.txt
```

- 次のファイル見たいとき

表示される順番は↑で記載したコマンドの左から順に表示されます。
a.txt見てるときに、b.txtを表示させたいときはこのコマンドを使います。

```
:n
```

- 前のファイルを見たいとき

↑とは逆に前のファイルを見たいときはこのコマンド

```
:p
```

- 最初のファイルを見たいとき

最初のファイル、a.txtを見たいときはこのコマンド

```
:x
```

- リストから追加したいとき

a.txt b.txt c.txt のリストから追加したいときはこのコマンド

```
:e
↓
Examine: [file名]
```

- リストから外したいとき

a.txt b.txt c.txt のリストから外したいときは
そのファイルを表示させてこのコマンド

```
:d
```

- 複数ファイルを横断して検索したいとき

```
/*
↓
EOF-ignore /[検索したい文字列]
```

## 参考

- [Linux：lessコマンドで複数ファイルを閲覧する方法](https://motamemo.com/linux/linux-tips/less-multiple-files/)
- [lessで複数ファイルを読む](https://hogem.hatenablog.com/entry/20070509/1178637366)
Redux超入門【React】

Reduxが難しかったのですが、１つのファイルにまとめてみるとすんなり理解できたので記載。

## 準備

まずはReactの環境構築。

```
$ npx create-react-app アプリ名 
```

次にカレンドディレクトリに移動してreduxの導入。

```
$ npm install redux react-redux　  // npm→yarnでも可
```


## コード
```index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import {createStore} from 'redux';

// Action
const increment = () => {
    return {
        type: 'INCREMENT'
    }
}
const decrement = () => {
    return {
        type: 'DECREMENT'
    }
}

// Reducer
const counter = (state = 0, action) => {
    switch(action.type){
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
    }
}

let store = createStore(counter)

// Display it in the console
store.subscribe(() => console.log(store.getState()))

// Dispatch
store.dispatch(increment())
store.dispatch(decrement())
store.dispatch(increment())

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root')
);
```
Spring Bootで、単体テスト実行時にFlywayを起動しない方法

# はじめに
現在のプロジェクトで、 `SpringBoot` と `Flyway` を使用していますが、
テスト実行時(当プロジェクトでは `Gradle`を使用しているため、 `./gradlew test` )に、
`Flyway` の `Migrate` が走ってしまう現象がありました。
その時の解決方法の一つになります。

# どのような解決をしたのか
ご存知の方からしたら当たり前のことかもしれませんが、 
`SpringBoot` はテスト実行時に、設定ファイルの優先順位が変わります。
具体的には、下記のような構成だとして、

```zsh
/project
 ├── build.gradle
 ├── gradlew
 └── src
     ├── main
     │   ├── com
     │   │    └── ...
     │   └── resources
     │       └── application.yml
     └── test
         ├── com
         │    └── ...
         └── resources
             └── application.yml
```
jarファイルなどで実行した場合は `src/main/resources/application.yml` を読み込みますが、
テスト実行時は `src/test/resources/application.yml ` を読み込んでくれます。

この辺りは下記記事がより詳細に説明してくださってるので、そちらを参照ください。
[Spring Boot - テスト時に読み込むDBを変更する](https://qiita.com/umanoda/items/91107ff4dc668f5c94dc)

上記の特性を利用し、 `src/test/resources/application.yml ` 側の設定ファイル(テスト時の設定ファイル)に、
Flywayを無効化する下記記述を追加しました。

```yml
spring:
  flyway:
    enabled: false
```

# 最後に
知っている方からしたらなんてことないことですが、知らない方からしたら若干のハマりポイントではないでしょうか。
そのため、覚書としても記事を記述させていただきました。

短いですが以上です。ありがとうございました。
gettersで引数を使う書き方（Nuxt 2.x.x モジュールモード）

##利用想定
NuxtプロジェクトのStoreで`getters`を引数付きで使いたかった際に、ググってもあんまり出てこなかったので、記事として残します。

Nuxt以外のVue.jsプロジェクトやクラシックモードでは動作しません。

##要所だけみたい方向け

```.js

// ストア側のgettersの記述(pokedex.js)
export const getters = {
  getName: state => (index, locale) => {
    return // 処理
  },
};

// gettersを使う側の記述(Component.vue)
this.$store.getters['pokedex/getName'](25, 'jp')
```


##環境
- Nuxt 2.14.0　モジュールモードで利用
- JavaScript


##サンプルコード
情報を保持するストア用のファイル

```pokedex.js


/**
 * ポケモン図鑑情報を保持するストア
 */
export const state = () => ({
  pokedex: [], // 図鑑情報
});

export const mutations = {
  updatePokedex (state, newPokedex) {
    state.pokedex = newPokedex;
  },
};

export const actions = {
  createPokedex (ctx, pokedex) {
    ctx.commit('updatePokedex', pokedex);
  },
};

export const getters = {

  // 名前を取得
  getName: state => (index, locale) => {

    const poke = state.pokedex.find((poke) => {
      return poke.index === index;
    });

    return poke ? poke.name[locale] : null;
  },
};


```

ストアにデータセット、利用するvueコンポーネントファイル

```Component.vue
<script>
export default {
  created () {

    // 図鑑情報
    const pokedex = [
      {
        index: 25,
        name: {
          jp: 'ピカチュウ',
          en: 'Pikachu',
        },
      },
      {
        index: 149,
        name: {
          jp: 'カイリュー',
          en: 'Dragonite',
        },
      },
    ];

    // 図鑑情報をセット
    this.$store.dispatch('pokedex/createPokedex', pokedex);

    // 図鑑番号と地域で名前を取得
    console.log(this.$store.getters['pokedex/getName'](25, 'jp')); // ピカチュウ
    console.log(this.$store.getters['pokedex/getName'](149, 'en')); // Dragonite
  }
}
</script>
```

##余談
gettersの使い方の記事のほとんどがサンプルコードに引数ないけど、あんまり使わないのかな。
1つのdivとCSSだけでローディングを作る方法

## 背景

- シンプルなローディングで良い
- メンテナビリティーを確保したい
- ローディング要素が負荷にならないようにしたい

→ **CSS だけでローディングを作成する**

## ローディング要素の要件

- 円状の要素が回転しているもの
- 画像や JavaScript は使用しない


### 完成イメージ

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220757/3abcabba-cf08-a7fa-2d19-b3c21956eb9f.gif)

## 実装

完成イメージのようなローディングであれば CSS だけで実装するのは容易である。

大まかに重要な定義は以下の通り。

1. 見た目を定義する
1. 回転させる

### 見た目を定義する

まずは、適当な要素を用意し、上部のみアクシブなカラーになるような border のスタイルを当てていく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220757/b19ee81e-bd11-ddbd-2c94-f4d000c40e7b.png)

```html
<div class="loading"></div>
```

```scss
.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}
```

#### 丸くする

先述のままだと単なる四角い要素で一般的なローディング要素とは掛け離れている。

これに`boder-radius: 50%`を指定して丸くする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220757/c1474895-53ed-86a4-78b0-b57f7e996c43.png)

```scss
.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}
```

### 回転させる

回転させたら完成。丸くなった要素を回転させるローディング要素にしか見えなくなる。

`spinner`アニメーションを定義して`.loading`に追加する。ローディング要素は延々と回転し続けて欲しいので、`infinite`の指定を入れる。

```css
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
```

↓

```scss
.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
  animation: spinner 1.5s linear infinite;
}
```

## 完成デモ

上記をブラッシュアップした完成でもを置いておく。


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="hiro0218" data-slug-hash="poJXoxw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Pure CSS Loading Image">
  <span>See the Pen <a href="https://codepen.io/hiro0218/pen/poJXoxw">
  Pure CSS Loading Image</a> by hiro (<a href="https://codepen.io/hiro0218">@hiro0218</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


ローディング要素が表示されているときに「アクションすることが出来ない」ことを伝えられるようなあしらいは必要だと思う。（例: `cursor: progress;`など）

### まとめ

CSSですべて実装しているのでサイズや色の変更が容易である。アニメーションGIFやSVGなどを使って実装してきたが、これならデザイナーとのやりとり（修正と書き出し依頼）を省けるので局所的だが工数も下がるだろう。

リッチなアニメーションをしたい場合は当然 Lottie などのライブラリを利用して視覚的に楽しめるUIが良いだろう。ブランディング的な文脈はあるかもしれないが、ローディング要素はできるだけ人の目にふらさせる時間は短くしたいので簡素な見た目の要素でも良いのではないかと思う。
[Linux / Ubuntu] GPUの種類（フルネーム）を確認する【名前が途切れる人向け】

`nvidia-smi`コマンドだと名前が途中で途切れて確認できない事態が発生したので、GPUの名前をフルで確認する方法をメモ

# 一般的な確認方法
`nvidia-smi`コマンドです。

```
$ nvidia-smi
Mon Jan 18 11:21:55 2021
+-----------------------------------------------------------------------------+
| NVIDIA-SMI 440.33.01    Driver Version: 440.33.01    CUDA Version: 10.2     |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|===============================+======================+======================|
|   0  GeForce RTX 208...  On   | 00000000:01:00.0 Off |                  N/A |
| 19%   18C    P8    20W / 250W |    726MiB / 11019MiB |      1%      Default |
+-------------------------------+----------------------+----------------------+

+-----------------------------------------------------------------------------+
| Processes:                                                       GPU Memory |
|  GPU       PID   Type   Process name                             Usage      |
|=============================================================================|
|    0      1347      G   /usr/lib/xorg/Xorg                           284MiB |
|    0      1583      G   /usr/bin/gnome-shell                         220MiB |
|    0      2505      G   ...AAAAAAAAAAAACAAAAAAAAAA= --shared-files   168MiB |
|    0      5053      G   ...-token=85BF5FDE73E6204E060ECC896FA5C999    49MiB |
+-----------------------------------------------------------------------------+
```
　

……**GeForce RTX 2080なのかTiなのかがわからん！**

# GPUのフルネームを確認する

```bash
$ nvidia-smi --query-gpu=name --format=csv
```

です。

```bash
$ nvidia-smi --query-gpu=name --format=csv
name
GeForce RTX 2080 Ti
```

という風に、GPUのフルネームがわかります。
[超個人的メモ] iosシュミレーターのディレクトリ構造を覗きたい時

iOSシミュレーターのディレクトリ構造を覗くには
~/Library/Developer/CoreSimulator/Devices
をひらけば良い。

参考
https://stackoverflow.com/questions/6480607/is-there-any-way-to-see-the-file-system-on-the-ios-simulator
Rのxlsx, rJavaパッケージがインストールできないときの対処法


Rでxlsxファイルを読み込むためのパッケージの1つである、
xlsxパッケージをインストールしようとしたら以下のようなエラーが出た。

```R
checking whether JNI programs run... configure: error: Unable to run a simple JNI program. Make sure you have configured R with Java support (see R documentation) and check config.log for failure reason.
 system(cmd) で警告がありました:   命令の実行中にエラーが起きました 
ERROR: configuration failed for package ‘rJava’

 警告メッセージ: 
1:  install.packages("xlsx") で: 
   パッケージ ‘rJava’ のインストールは、ゼロでない終了値をもちました 
```

対処法は[ココ](https://www.ibm.com/support/knowledgecenter/SSPT3X_3.0.0/com.ibm.swg.im.infosphere.biginsights.install.doc/doc/install_install_r.html)を参考にした。

## 環境

- CentOS Linux 7.9
- R 3.6.0

## 解決方法

JAVAで使用している変数を設定する。

```bash
R CMD javareconf -e
```

```
The following Java variables have been exported:
JAVA_HOME JAVA JAVAC JAVAH JAR JAVA_LIBS JAVA_CPPFLAGS JAVA_LD_LIBRARY_PATH
```

<br>
ここで設定されているJAVA_LIBSに問題があるようなので、以下のコマンドを打って修正。

```bash
export JAVA_LIBS="$JAVA_LIBS -ldl"
```

<br>
JAVA変数を更新。許可がないと言われたらsudoつけて実行。

```bash
R CMD javareconf
```

```
Updating Java configuration in /usr/lib64/R
Done.
```

<br>
Rを起動してrJavaをインストール。
（rJavaからインストールしたが、直接xlsxをインストールしても大丈夫なはず。）

```R
install.packages("rJava")
```

xlsxをインストール

```R
install.packages("xlsx")
```
Viteとは何なのか

# はじめに
ちょっと前に話題になっていた `Vite` について、どのようなものなのか調べつつまとめてみました。

# どのようなものなのか
従来のビルドツール(Vue CLI等)に比べて、高速で動作するビルドツールのようです。
公式サイトは下記。
https://vitejs.dev/

`Vue.js` を開発されたEvan You氏が開発されました。
リポジトリは下記。(2021/01/18段階では `v2.0.0-beta.30` )
https://github.com/vitejs/vite
`Vue.js` の他、 `React` `Preact` のビルドもサポートしているようです。

* 開発時はバンドルが不要なので、開発サーバーの起動が早い。
* HMR(Hot Module Replacement)(画面の再描画なしに変更を適用してくれる機能)が、修正分のみを適応するため、  
  モジュールの総数に関係なくかなり高速。  

といった利点があるようです。
この辺りは下記ドキュメントにより詳細に書いてあります。
https://vitejs.dev/guide/features.html

# 導入はどのように行うのか
下記に手順があるので、そちらで行うことができそうです。
https://vitejs.dev/guide/

まず、下記コマンドを実行します。  

```zsh
yarn create @vitejs/app
```

* (ここではプロジェクト名に `vite-project ` を指定しています。)


```zsh
% yarn create @vitejs/app
yarn create v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "@vitejs/create-app@1.2.0" with binaries:
      - create-app
      - cva
✔ Project name: · vite-project
Scaffolding project in /Users/hogehoge/workspace/vite/vite-project...
✔ Select a template: · vue-ts

Done. Now run:

  cd vite-project
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

✨  Done in 66.19s.
```

手順に沿って、下記を順に行なっていきます。

```zsh
  cd vite-project
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)
```

* モジュールのインストール

```zsh
% yarn
yarn install v1.22.4
warning package.json: No license field
info No lockfile found.
warning vite-project@0.0.0: No license field
[1/4] 🔍  Resolving packages...
warning vite > fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
warning vite > rollup > fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 18.80s.
```

* サーバーの立ち上げ

```zsh
% yarn dev
  Vite dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://XX.XXX.XXX.XX:3000/
  > Network:  http://XX.XXX.XXX.XX:3000/

  ready in 1319ms.
```

毎度お馴染みの `http://localhost:3000/` にアクセスすると、下記が表示されます。
![スクリーンショット 2021-01-18 11.25.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66330/f97d73d0-cf25-1fb3-6624-40594c74b362.png)



# その他情報
* `Typescript` のサポートも行っているようですが、型チェックは行ってくれないようです。
* 内部のトランスパイルには、  [esbuild](https://github.com/evanw/esbuild) を使用しているそう。  
この辺りの情報も公式に載っているので、ご興味のある方は是非。  
https://vitejs.dev/guide/features.html#npm-dependency-resolving

# 終わりに
チュートリアルで行ったようなプロジェクトでは、モジュール数も少ないため速度的にはわかりませんでしたが、
実プロジェクトで用いた時にどのような速度が出るかが気になるところです。
開発環境のサーバー起動、ビルド時間で悩みを抱えている方には、有益なツールなのではないでしょうか。
開発されているのがEvan You氏とのことで、今後の発展が楽しみなツールです。

# 参考にした情報
* [Gitリポジトリ](https://github.com/vitejs/vite)
* [公式ドキュメント](https://vitejs.dev/plugins/)
* [【Vite】 Vue3.0もReactも！ノーバンドルなビルドツール「Vite」を試してみる
](https://qiita.com/ryo2132/items/c1530dd590e34e68c494)
【GitHub】Contributionのルール

こんにちは！
今までGitHubのContributionの色の付け方
皆さんご存知ですか？

大前提、ポートフォリオ作ることばっかり考えていて、
GitHubの事全く考えていませんでした。
先日、MENTAの先生から
###「GitHub意識して、Pushしときなよー」
って
####!?

ちょこちょこ調べながら使ってたけど、
本格的なやらねば！！

そんな思いから記事にしようと思います！

#この記事でわかること
1.GitとGitHubの違い
2.Contributionのルール（草生やし方）

##1.そもそもGit/GitHubって？

`Gitって？`
・**分散型バージョン管理**
(バージョンとは更新したり、アップデートした時に変化する[ver.]みたいなの！)
・コンピュータ上でファイルの編集履歴を管理

**Gitでできる事**
・古いバージョンに間単に戻せる
・新古ファイルの一元管理可
・編集履歴を複数人で共有可
・複数人で修正した部分を1つに統合可

`GitHubって？`
・Gitの仕組みと連携して、他ユーザーとのやりとりがしやすい**WEBサービス**の名前


##2.Contributionのルール

`そもそもContributionとは？`
・過去1年間こんだけ活動したよ！を可視化した表
![スクリーンショット 2021-01-18 11.03.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748934/45e329db-ce7e-fd5e-5338-f597b8f7b774.png)
(草が生えてなくて恥ずかしいです....)
[Contributionとはの英語記事](https://github.blog/2013-01-07-introducing-contributions/#:~:text=Repositories%20Contributed%20To&text=Whenever%20you%20commit%20to%20a,count%20that%20as%20a%20contribution.&text=A%20commit%20today%20is%20worth,working%20on%20in%20your%20Organization.)


`Contributionを生やすには？`
・masterブランチor gh-pageブランチへのコミット
・IssueやPull Requestの新規

`草の色を深くするには？`
・過去1年間の中で相対的な、数を示してる
[参考にさせて頂きました！](https://qiita.com/DQNEO/items/923d838d91f76dbeabd4)



アウトプットってすごい、、
一気に定着しますね！！！
Gitの仕組みなど記事にしていくつもりなので、
またご覧いただけると幸いです( ´ ▽ ` )ﾉ
業務知識や技術を付けるのによい書籍やサイト

# はじめに
自分が今まで読んできた業務知識や技術知識を付けるのによい書籍を教えます。

# 業務知識
## 経理・財務知識の再入門講座―SEならこれだけは知っておきたい
経理関係の業務の流れや仕訳の流れを理解するのにとても良い書籍です。これから勉強を始めるとよいです。図もあるのでとても理解しやすいです。ページ数もそれほどないので一気に読めるかと思います。
[経理・財務知識の再入門講座―SEならこれだけは知っておきたい](https://amzn.to/39KWcwF)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/66809cf6-78ef-8d90-a661-165ab5bbe487.png)


## グラス片手にデータベース設計シリーズ
プロアクティブとかのERPを作った人が書いた書籍です。
ERPを作っただけあって説明もうまいし、あまりすることはない業務の裏話もところどころに書いてあるので勉強になります。
- [グラス片手にデータベース設計 販売管理システム編 第2版](https://amzn.to/2XtfPUe)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/da6c5fef-5dec-4624-1f2a-ef747345dfd1.png)

- [グラス片手にデータベース設計 会計システム編](https://amzn.to/3nzk4rM)
![Screenshot_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/dca3b7b7-8142-418c-004d-e8acc88d2900.png)

- [グラス片手にデータベース設計~生産管理システム編](https://amzn.to/3bqSwma)
![Screenshot_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47172/dc77fea8-1a14-8f31-78cf-0cce08e9a8db.png)

 

# 技術
## 全般
- [ソフトウェアデザイン](https://www.amazon.co.jp/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-2021%E5%B9%B42%E6%9C%88%E5%8F%B7-%E4%BC%8A%E5%A5%88-%E6%9E%97%E5%A4%AA%E9%83%8E/dp/B08QS68VZS/ref=pd_bxgy_img_2/357-8275669-5814528?_encoding=UTF8&pd_rd_i=B08QS68VZS&pd_rd_r=bd0caae7-d500-4f12-9b5b-dff38a742fba&pd_rd_w=SOhPf&pd_rd_wg=h6aa1&pf_rd_p=e64b0a81-ca1b-4802-bd2c-a4b65bccc76e&pf_rd_r=YAM317Y68YT41Q1KWA8X&psc=1&refRID=YAM317Y68YT41Q1KWA8X)

## C＃
[Udemy ピーコック アンダーソン](https://www.udemy.com/user/anderson-355/)

[独習C# 第3版](https://amzn.to/35OIuYl)

## DB,SQLServer
[絵で見てわかるSQL Serverの仕組み](https://amzn.to/3bNLVCl)

## Network
[マスタリングTCP/IP―入門編―(第6版) ](https://amzn.to/39EWh4W)

## Cloud
クラウドは、AWSか、Azureを勉強しておけば良いと思います。
AWSを勉強するなら資格を取得を目指したほうがいいので、宣伝ではありますが下記をご参考に。
- [【合格】AWS 認定ソリューションアーキテクト – アソシエイト【Udemy、黒本の使い方を詳しく解説】](https://qiita.com/yaginagi/items/9ed48fb94e816c69a65a)

# セミナー
[connpass](https://connpass.com/dashboard/)
[TECH PLAY](https://techplay.jp/)

# ポッドキャスト
[rebuildfm](https://rebuild.fm/)
[backspacefm](https://backspace.fm/)
Linuxコマンド③【ファイル操作】

#はじめに
学習用のメモになります。

＊[]・・・任意
 <>・・・絶対

#テキストファイルとバイナリファイル
##テキストファイル
テキストファイルとは`文字列が書かれたファイル`のこと

* テキストファイルは文字コードで定められた文字だけが並んで格納される
* 文字コードは、文字をコンピュータで処理したり通信したりするために、文字の種類に数値を割り振ったもの
* 例：Aは１０００００１、Bは１００００１０、など数値を割り当てている
* Linuxではテキストファイルはとても大切です。OSの関わるほとんどの設定情報をテキストファイルとして管理している

##バイナリファイル
バイナリファイルとは、`画像ファイルや音声ファイル、実行ファイル`など

* 文字コード以外の数値も含むようなファイルをバイナリファイルと呼ぶ
* テキスト以外のファイルがバイナリファイルという認識でOK
* catコマンドなどでバイナリファイルが文字化けするのは、無理矢理テキストファイルとして解釈しようとして、文字コードに該当した数値をその文字に置き換えて表示したので意味不明の文字列になったため

#1.catコマンド
ファイルの中身を表示する。

```
cat [オプション]<ファイル名>
```
オプションをつけないで使用することが多い。
＊`-n`オプションで行番号を表示する

#2.lessコマンド
ファイルの中身をスクロール表示するコマンド。
長いファイルの中身を見る時に使用。

```
less [オプション]<ファイル名>
```
オプションをつけないで使用することが多い。

##スクロール操作

|コマンド| 内容　
|:------|:------|
|スペースキー、f | １画面上にスクロール|
|b|１画面下にスクロール|
|j| １行下にスクロール|
|k | １行上にスクロール|
|q|lessコマンドを終了|

##検索操作

|コマンド| 内容　
|:------|:------|
|/<文字列> | 下方向に向かって検索|
|?<文字列>|上方向に向かって検索|
|n| 次の検索結果に移動|
|N| 前の検索結果に移動|

#3.touchコマンド
空のファイルを作成するコマンド

```
touch <新規ファイル名>
```
ファイル名が存在していない時は、空のファイルを作成して、存在している時はタイムスタンプを更新する。

#4.rmコマンド
ファイル・ディレクトリの削除をするコマンド

```
rm [オプション]<削除するファイル名>
```
注意：rmコマンドを実行すると、ゴミ箱ではなく、本当に削除されてしまうので本当に消していいのか確認してから実行する。

##よく使うオプション
###1.-r
ディレクトリも合わせて削除する

```
rm -r dir
```
注意：ディレクトリの中のファイルやディレクトリもまとめて削除されるので注意。
###2.-f
ファイルを削除する際に警告文を表示しない.
あまりオススメしないコマンド

```
rm -f file
```
###3.-i
ファイルの削除前に確認する

```
rm -i file
```

#5.mvコマンド
ファイルの移動、ファイル名を変更するコマンド

```
#具体例
mkdir dir   //dirディレクトリ作成
touch file  //空のファイルを作成

##ファイル名変更
mv file file1

##ファイルを移動
mv file1 dir/   //file1をdirディレクトリのなかに移動
```

＊選択するものがファイルかディレクトリかで挙動が変わってくる

##オプション
###-i
上書きする前に確認

```
mv -i file file1
```

#6.cpコマンド
ファイル・ディレクトリをコピーするコマンド

```
cp [オプション]<コピー元>...<コピー先>

##具体例
#ファイルをコピー
cp file new file
#ファイルをディレクトリないにコピー
cp file dir
```
注意：コピー先のファイルがすでにあると上書きするので気をつけよう

##オプション
###1.-i
上書きする前に確認

```
cp -i file new_file
```
###2.-r
ディレクトリをコピーする

```
cp -r dir new_dir
```

#7.findコマンド
ファイルを検索するコマンド

```
find <検索開始ディレクトリ><検索条件><検索アクション>

#具体例
find . -name README.md -print
```
pythonでスプレッドシートとSlackを連携させてBOTを作ってみる２/２(python+gspread+slackbot)

##はじめに
[前回の記事](https://qiita.com/KScookie/items/580d000d1eda58bfa8b4)では、Slack上でスプレッドシートにあらかじめ登録されている単語をBOTに送信すると、その意味を返してくれるというところまで実装しました。

今回はその続きです。

##やりたいこと
* 単語の登録

* 登録されている単語の一覧出力

* 単語の削除

* これら全てSlack上で完結させる

##コードを書いていく

コードを追加するのはmy_mention.pyだけです。

```python:my_mention.py
@respond_to('登録：(.*)')
def mention_func2(message, entry_word):
  entry_list = entry_word.split()
  entry_len = len(entry_list)
  values_list = worksheet.col_values(1)
  if entry_len == 2:
    gyou = len(values_list)  # 選択したワークシートの行数を取得
    worksheet.update_cell(gyou+1, 1, entry_list[0])
    worksheet.update_cell(gyou+1, 2, entry_list[1])
    message.reply('「'+ entry_word +'」'+'を登録しました。')
  else:
    message.reply('単語とその意味を同時に登録してください。例→PC パソコン')  # メンション


@respond_to('一覧')
def mention_func3(message):
  values_list = worksheet.col_values(1)
  message.reply('これまで次のような単語が登録されています。→→→→' + '、'.join(values_list))


@respond_to('削除：(.*)')
def mention_func4(message, delete_word):
  values_list = worksheet.col_values(1)
  tof = delete_word in values_list
  if tof == True:
    cells = worksheet.find(delete_word)  # 入力結果に一致する座標を取得
    worksheet.delete_row(cells.row)  # 選択した行を削除する
    message.reply('「' + delete_word + '」'+'を削除しました。')
  else:
    message.reply('削除しようとしましたが、見つかりませんでした。「一覧」と送信して確認してください。')  # メンション

```

##気を付けたこと
* **登録**

単語と意味を同時に入力して登録したかったので、「登録：○○　△△」と送信したら、○○を単語、△△をその意味としてスプレッドシートに書き込むようにします。
split()を使って、entry_listには○○と△△を分割したリストを渡します。

登録ミスをしてしまったときに片方だけスプレッドシートに入力されるということを避けるため、entry_listに格納されている要素がちゃんと2つあるかどうかをentry_lenで確認します。

しっかりと要素が2つ入っていたら、スプレッドシートの操作を行い、空いている行に格納します。

やはりこのあたりはもう少しスマートに書きたいなとつくづく思うのですが、私のような初心者は実装できただけでも万々歳です...改善案があったら教えてください。

* **一覧の出力**

message.replyはリストそのものの出力には対応していないようなので、join()を使って文字列に変換します。'、'は要素と要素の間を「、」で区切るという意味です。

* **削除**

検索と同じような動作をさせています。特に詰まったところはありませんでした。

##さいごに
今回のBOT実装を通して、pythonやその周辺のライブラリについてかなり勉強になりました。Slackとどのように連携するのか気になっていたところがすっきりしたので、また気が向いたら違うものを実装しようと思います。<br><br>
WindowsにWindows Subsystem for Linux（WSL）を入れてfish導入するまで

# 環境
Windows 10 バージョン1909
# WSLを入れる

スタートボタンを右クリック
「アプリと機能(F)」を押す
プログラムと機能を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233011/a938e6d2-acce-6414-22dc-8558ca8071fe.png)
Windows の機能の有効化または無効化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233011/9be03398-f994-5008-21c5-df6b12a974f4.png)
Linux 用 Windows サブシステム にチェックを入れてPCを再起動
（他の記事にあるWindows Subsystem for Linuxはなかった）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233011/103c895b-a1a8-717c-57b5-5385cdab4914.png)
Microsoft Storeを開く
検索窓にUbuntuと入力して検索
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233011/5f87dd55-718c-527b-16c8-c5fd1440c79a.png)
どの Ubuntu を選択しても良いと思うが、今回は「Ubuntu 20.04 LTS」をインストール

Ubuntu を起動して、少し待つとユーザー名とパスワードを入力する
Linux 経験者なら慣れていると思いますが、不慣れな人でも英語が読めれば大丈夫。
英語が読めなければ、コピペしてGoogle翻訳なりDeepL翻訳に突っ込んで頑張りましょう。
コピペは、範囲選択して右クリックです。

このような画面が表示されればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233011/f8f33db8-acea-bcd6-d32b-5e51275a17e5.png)

Ubuntuをインストールしたら、下記のコマンドを実行してパッケージを最新化しましょう。

```shell
sudo apt-get update
```

# fish をインストール
fish shell をインストールしましょう。

```shell
sudo apt-add-repository ppa:fish-shell/release-2
sudo apt-get install fish
```

ちゃんとインストールできたか確認するために、バージョンを確認するコマンドを実行しましょう。

```shell
fish --version
```

デフォルトで使用するシェルを fish に変更します。

```shell
chsh -s /usr/bin/fish
```

```fish, version 3.1.0``` のようにバージョン情報が返ってくればOKです。

# fisher をインストール

fisher をインストールしましょう。
fish 用のパッケージマネージャです。
fish を色々とカスタマイズするために必要です。

```shell
curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish
```

これで色々カスタマイズできるようになりました。
下のリンクから好みのカラーテーマを入れてみましょう。
https://github.com/oh-my-fish/oh-my-fish/blob/master/docs/Themes.md
自分は、例として「bobthefish」をいれてみます。

```shell
fisher install oh-my-fish/theme-agnoster
```

# 終わりに
慣れていないせいか、すごく使いづらい。
[Spring Boot] Bean scopeとBean Life Cycle

## Bean scope

Bean scope
Springで別途の設定をしない場合、default bean scopeはsingletonで構成されます。

singleton : spring default bean scope
prototype:アプリケーションリクエスト時に（getBean()メソッドが呼び出されるたびに）スプリングが新しいインスタンスを生成します。
request:HTTP リクエストごとにインスタンス化され、リクエストが終わると消滅します。
session:HTTP セッションごとにインスタンス化され、セッションが終了すると消滅します。
global session:ポートレート基盤のウェブアプリケーション用途で、全域セッションスコープが空のようなスプリングMVCを使用したポータルアプリケーション内のすべてのポートレートの間で共有できます。
thread:新しいスレッドから要請すると、新しいbeanインスタンスを作成します。 同じスレッドの要請には常に同じインスタンスが返されます。
custom : org.pringframework.beans.factory.config.Scopeを実装し、そしてカスタムスコープをスプリングの設定に登録することによって使用します。

※ request、session、global sessionのスコープは、一般のspringアプリケーションではなく、Spring MVC Applicationでのみ使用される用途です。

空きスコープを指定する方法は、XMLを利用した方法と、アノテーションを利用した方法があります。

XML

``` java
<bean id="memberBean" class="com.java.Member" scope="singleton"/>
```

Annotation

``` java
package com.java.pojo;
 
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Service;
 
@Service("memberBean")
@Scope("singletone")
public class Member {
}
```

## Bean Life Cycle

Bean Life Cycle
空きライフサイクルは基本的に生成、依存設定、初期化、消滅の段階を経ます。 でも、どんなコンテナを使うかによって違います。

Bean Factoryは、基本的な依存性注入をサポートする最も簡単な形態のコンテナで、getBean()メソッドが呼び出されるまで空の生成を先送りします。 Application Contextは、BeanFactoryを継承した形態でBeanFactoryのすべての機能を持ち、追加的な機能を持つコンテナです。 Application contextはcontextが始まる前にすべての空きを作成してロードして、好きな時期にいつでもコピーして使えます。

Initialize & Destory メソッド
Bean Initializeメソッドは、Bean Objectが作成されてDIを終えた後に実行されるメソッドです。 一般的にObjectの初期化作業が必要な場合は生成者に処理しますが、DIによってBeanが注入された後に初期化後に初期化作業がある場合は、初期化メソッドを利用して初期化を進めます。

@PostConstruct

``` java
@Slf4j
@Component
public class SimpleBean {

    @PostConstruct
    public void postConstruct() {
        log.info("postConstruct");
    }
}
```

@PreDestroy

``` java
@Slf4j
@Component
public class SimpleBean {

    @PreDestroy
    public void preDestroy() {
        log.info("preDestroy");
    }
}
```
[Javascript] 一列で終わるJavascriptとアルゴリズム

## 一列で終わるJavascript

1loc.dev.comはウェブ開発(JavaScript)に必要な技術が見られるリアルJavaScript「ライブラリー」である。 利用者は無料で資料を見ることができる。
簡単な例もあり、分かりやすい！

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619610/77e8dbc5-8034-ef6b-88ed-19ae0f3b946b.png)

https://1loc.dev/

## 一列で終わるJavascript

ウーバーの開発者trekhlebGitHubには
アルゴリズムが必要な時に有用な情報があふれている。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619610/795eb371-c660-62e3-86f8-fd83b7290cf2.png)

ビッグデータの分析や統計関連数値を予測するプログラムを実装する段階で、trekhleb GitHubを好んで探すなら、特定のアルゴリズムを簡単かつ迅速に検索して使用することができる。

何より、日本語になっているので分かりやすい！

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619610/4d731f81-533f-ef92-8d93-e1e944fda42b.png)


https://github.com/trekhleb/javascript-algorithms/blob/master/README.ja-JP.md
Python Tweepyを使ってキーワードを含むツイートを取得

週末ハッカソンのWEBサイト作成で #週末ハッカソンのキーワードが含むツイートを取得したい。
Pythonのtweepyモジュールを使い取得する。

## Consumer API keys と Access token & access token secret を取得

[Twitter Developers](https://developer.twitter.com/en/apps) から アプリケーションを登録してConsumer API keys と　Access token & access token secret を取得する。

## tweepy インストール

Twitter API の操作はtweepyが便利、是非使おう。

```
$ pip install tweepy
```

## OAuth 認証

Twitter API を操作するには OAuth認証が必要
Developerサイトで取得したAPI KEYを使い認証を行う。

```Python
import tweepy


# 取得したAPI KEY、TOKENを入力
API_KEY = ""
API_SECRET_KEY = ""
ACCESS_TOKEN = ""
ACCESS_TOKEN_SECRET = ""


def twitter_api() -> tweepy.API:
    auth = tweepy.OAuthHandler(API_KEY, API_SECRET_KEY)
    auth.set_access_token(ACCESS_TOKEN, ACCESS_TOKEN_SECRET)
    return tweepy.API(auth)
```

## キーワード検索

get_searchメソッドを作成してキーワード検索をできるようにした

**引数説明**

|  KEY  |  内容  |
| ---- | ---- |
|  api  |  OAuth 認証 |
|  q  |  検索したいキーワード  
|  start_date  |  検索開始期間  |
|  end_date  |  検索終了期間  |
|  count  |  取得数  |

データは加工がし易いのでPandasに入れることにした
tweet_created_at はUS時間のため +9 時間して日本時間に変更している

```Python
from datetime import timedelta

import pandas as pd
import tweepy

# 取得したAPI KEY、TOKENを入力
API_KEY = ""
API_SECRET_KEY = ""
ACCESS_TOKEN = ""
ACCESS_TOKEN_SECRET = ""


def twitter_api() -> tweepy.API:
    auth = tweepy.OAuthHandler(API_KEY, API_SECRET_KEY)
    auth.set_access_token(ACCESS_TOKEN, ACCESS_TOKEN_SECRET)
    return tweepy.API(auth)


def get_search(
    api: tweepy.API, q: str, start_date: str, end_date: str, count: int = 1000
) -> pd.DataFrame:

    q = f"{q} since:{start_date} until:{end_date} -filter:retweets"

    tweets = api.search(
        q=q,
        count=count,
        tweet_mode="extended",
        locale="ja",
        lang="ja",
        include_entities=False,
    )

    df = pd.DataFrame(
        columns=[
            "user_id",
            "user_name",
            "user_screen_name",
            "user_profile_image_url",
            "tweet_id",
            "tweet_full_text",
            "tweet_favorite_count",
            "tweet_created_at",
        ]
    )

    for tweet in tweets:
        df = df.append(
            {
                "user_id": tweet.user.id,
                "user_name": tweet.user.name,
                "user_screen_name": tweet.user.screen_name,
                "user_profile_image_url": tweet.user.profile_image_url.replace(
                    "_normal", ""
                ),
                "tweet_id": tweet.id,
                "tweet_full_text": tweet.full_text,
                "tweet_favorite_count": tweet.favorite_count,
                "tweet_created_at": tweet.created_at + timedelta(hours=+9),
            },
            ignore_index=True,
        )
    return df
```

## 使い方

シンプルにOAuth認証して検索、DataFrameなので良しなに加工して使う

```Python
api = twitter_api()
search = get_search(api, "#週末ハッカソン", "2021-01-15", "2021-01-18")

idxmax = search.groupby("user_id").tweet_created_at.idxmax()
tweets = search.iloc[idxmax]
```
【Mysql】接続できないエラー原因と対処まとめ

# はじめに
mysqlに接続できないエラーに何度も直面し、その度調べていたので、今回は備忘録としてまとめてみました。
参考になれば幸いです

# (1)sockファイルでのエラー
## エラー内容
```
$ mysql -u root
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
```

## 原因
mysql.sockファイルがないこと

## 対処
```
# sockファイルを作成する
$ sudo touch /tmp/mysql.sock
```

```
# 動作確認→別のエラーが発生している
$ mysql -u root
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38)
```

## 原因
mysql.sockファイルが入っているディレクトリの権限が原因

## 対処
```
# 権限変更する
$ sudo chown mysql:mysql /tmp
```

```
# サーバーを立ち上げる（ここ重要）
$ sudo mysql.server start
```

```
# 動作確認
$ mysql -u root
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.22 Homebrew

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>
```

**完了！**


# (2)PIDファイルに関するエラー
## 発生事例とエラー内容
mysqlサーバーを再起動しようとしたら下記エラーが発生。

```
$ mysql.server start
Starting MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/****.pid).
```

## 原因
1. pidファイルがない
2. pidファイルがあるフォルダの権限がおかしい


```
# 「/usr/local/var/mysql」にpidファイルがあるか確認
$ ls /usr/local/var/mysql
#=> ファイル一覧が表示されるのでpidファイルがあるか確認する
```

## 対処
### 1. 「/usr/local/var/mysql」にpidファイルを作成

```
# pidファイルを作成
$ touch /usr/local/var/mysql/*****.local.pid
```

※「*****」に入る文字はマシンのホスト名
※ホスト名はuname -nで確認できる。

### 2. pidファイルがあるフォルダの権限を変更する

```
# /user/local/var/mysql以下のファイルの所有者をすべて_mysqlにする
$ sudo chown -R _mysql:_mysql /usr/local/var/mysql/
```

```
# 再度コマンドを打つと動作する
$ sudo mysql.server restart
Password:
Shutting down MySQL
. SUCCESS!
Starting MySQL
. SUCCESS!
```

**完了！！**

# 参考
- [mysqlが起動できない](https://qiita.com/hondy12345/items/d32ed749fb49e9da7de6)

- [mysqlが起動できない（Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)）](https://qiita.com/carotene4035/items/e00076fe3990b9178cc0)
自作キーボード12 基盤とスイッチはんだ付け

ケースが到着したので基盤とスイッチのはんだ付けをまずは行う。

# トッププレートへスイッチをはめ込む

![IMG_20210111_210916.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/02b11268-89eb-8b13-8414-beee90c22e25.jpeg)

![IMG_20210111_150142.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/bca1c6dc-9cd7-04d7-0a19-69e4ea17bb07.jpeg)


トッププレートも3Dプリンタで自作したのだが、何とかキースイッチもはまった。
コンマ数ミリの誤差でカチッとすんなりとハマるか、親指が痛くなるぐらい押し込まないとハマらないかの違いが出てくると分かった。

3D CADで作図したときに3行目以降の穴のサイズが13.999mmとなってしまっていた。これがメッチャ固い。
スイッチ穴の径が14.0001mm(1,2行目だけ)の場合はカチッとスムーズにハマる。
たった0.0011mmの差ってこんなに大きいの！？って感じです。

赤軸と黒軸が混ざっているのは個人的に使いやすいと思った偏荷重の意図。
A,Z, Shiftキー, Ctrlキー, Winキー, スペースキーはCherryMX45g荷重の赤軸スイッチを使った。

<a href="https://www.amazon.co.jp/gp/product/B0721RVRZC/ref=as_li_ss_il?ie=UTF8&psc=1&linkCode=li2&tag=kirin123kirin-22&linkId=c249deb2eb7d20dfc18d45d408b99cb9&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0721RVRZC&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kirin123kirin-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kirin123kirin-22&language=ja_JP&l=li2&o=9&a=B0721RVRZC" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

それ以外は55g荷重のCherry軸互換のKailh黒軸（ちょっと安い)

<a href="https://www.amazon.co.jp/%E3%83%A1%E3%82%AB%E3%83%8B%E3%82%AB%E3%83%AB%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89-%E3%82%B2%E3%83%BC%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89-%E3%82%AD%E3%83%BC%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81-10%E5%80%8B%E3%82%BB%E3%83%83%E3%83%88-%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89DIY/dp/B07C4R96RT/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=Kailh+%E9%BB%92%E8%BB%B8&qid=1610931433&sr=8-5&linkCode=li2&tag=kirin123kirin-22&linkId=dbc15e18f5fa5cfcebec4ed1145c5aa4&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07C4R96RT&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kirin123kirin-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kirin123kirin-22&language=ja_JP&l=li2&o=9&a=B07C4R96RT" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />


# ひたすらはんだ付け

![IMG_20210111_210908.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/86440b3d-2d20-6c60-3b82-4b6041fe374b.jpeg)

![IMG_20210111_150924.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/54f98014-4a6a-f318-ab43-e7fe6d9d34ea.jpeg)

# キーボードテスターですべてのキーが反応するかチェックする。
一応全部OK

![keytest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/5e3f0451-3d71-e3b4-1044-196ba5709e46.png)

「全角半角」の切り替えキーの反応が奥まで押し込まないと反応しない時がある。
基盤やダイオード、はんだ付けは問題なさそうだが、スイッチ不良の可能性が高い。
Windows10 adbコマンドを実行できるようにする

# 目的

- Windows10のPCでadbコマンドを実行できるようにする方法をまとめる

# 方法

1. 下記にアクセスする。
    - [https://developer.android.com/studio/index.html](https://developer.android.com/studio/index.html)
1. 「DOWNLOAD ANDROID STUDIO」をクリックする。

    ![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/587d653b-e402-60dc-b1a0-c8dd73e220f0.png)

1. 利用規約に目を通し同意するなら「上記の利用規約を呼んだうえで利用規約に同意します。」にチェックを入れ「ダウンロードする」をクリックする。

    ![キャプチャ (1).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f83f7e81-83c2-a455-fe88-06881a546bd1.png)

1. 「platform-tool_rXX.X.X-windows.zip」というファイルがインストールされるのでダウンロードが完了したら解凍する。
1. 解凍したフォルダの中にある「platform-tools」のフォルダを任意のディレクトリに移動する。
1. 画面左下のWindowsマークを右クリックし「システム」をクリックする。
1. 「関連設定」にある「システムの詳細設定」をクリックする。
1. 「環境変数」をクリックする。

    ![キャプチャ (2).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4d3e6d4d-4833-82ae-35e7-00c1dd74a1e5.png)

1. 「システム環境変数」の中にある「Path」選択して「編集」をクリックする。

    ![キャプチャ (3).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/ec317c65-c7e5-0e41-4570-ca4965e840f5.png)

1. 先程設置した「platform-tools」フォルダをエクスプローラで開く。
1. ファイルの階層を表示している部分をクリックしてパスをコピーする。

    ![キャプチャ (6).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/37da0d00-bac4-badd-b31e-62614e9cecd8.png)

1. 「新規」をクリックする。

    ![キャプチャ (5).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/85f34617-2826-169e-44ab-ccad1558cb59.png)

1. コピーしたパスを貼り付ける。貼り付けたら「OK」をクリックする。
1. コマンドプロンプトを開き、下記コマンドを実行する。

    ```cmd
    adb
    ```

1. コマンドが正常に実行できればadbコマンドが実行できるようになっている。
wrong number of arguments (given 1, expected 0)

いくつかエラー原因はあるかと思いますが、僕の場合は、paramsと[:id]の間にスペースが空いているという事でした。

```ruby
#スペースが空いている
@post = Post.find(params [:id])
```

エラーが消えた。

```ruby
@post = Post.find(params[:id])
```
watchコマンドを一定時間のみ実行

watchコマンドを一定時間で終了させたい事があったので、それの覚書

### 単発実行

```bash
curl --head example.com
```

![render1610930685695.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566062/e92c1571-e42f-7d4e-6174-eca837c162cd.gif)

### 定期実行

```bash
watch curl --head example.com
# Break with Ctrl-C
```

![render1610930708227.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566062/e31ae998-b92f-4fdb-f772-137bd527448c.gif)

### 5秒間実行

```bash
timeout 5s watch curl --head example.com
```

![render1610930738285.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566062/9ac34b44-2cf6-685b-b38a-620228e4fee5.gif)
データ構造とアルゴリズム Vol.6

#Vol.6: 選択ソートと挿入ソート
選択の並べ替えの原理を理解し、これを C 言語で表示することができます。
挿入ソートの原理を理解し、これをC言語で表示することができます。

#選択整列とは？
👌 選択ソートとは、最も小さいものを選択して前に送るソート技法です。 
👌最も小さいものを選ぶのに𝑁番, これから送るのに𝑁番の演算で𝑂(𝑁^2)の時間の複雑度を持ちます。

#選択ソートを実現
####例）実行するコードの例
```C
//選択ソートの配列宣言
#define _CRT_SECURE_NO_WARNINGS
#include <stdio.h>
#include <limits.h>
#define SIZE 1000
int a[SIZE];
int swap(int *a, int *b) {
  int temp = *a;
  *a = *b;
  *b = temp;
}

//選択ソート実行
int main(void) {
  int n, min, index;
  scanf("%d", &n);
  for (int i = 0; i < n; i++) scanf("%d", &a[i]);
  for (int i = 0; i < n; i++) {
    min = INT_MAX;
    for (int j = i; j < n; j++) {
      if (min > a[j]) {
        min = a[j];
        index = j;
      }
    }
    swap(&a[i], &a[index]);
  }
  system("pause");
  return 0;
}
```
🤔 結果は？
`input1->` 5
`input2->` 9 8 7 5 10
`result->`5 7 8 9 10


#挿入ソートとは？
👌 挿入ソートとは、各数字を適切な位置に挿入するソート技法です。 
👌 入る位置を選択するのにN番、選択する回数でN番なので𝑂(N^2)の時間の複雑度を持ちます。

#挿入ソートを実現
####例）実行するコードの例

```C
//挿入ソートの配列宣言
#define _CRT_SECURE_NO_WARNINGS
#include <stdio.h>
#define SIZE 1000
int a[SIZE];
int swap(int *a, int *b) {
  int temp = *a;
  *a = *b;
  *b = temp;
}

//挿入ソート実行
int main(void) {
  int n;
  scanf("%d", &n);
  for (int i = 0; i < n; i++) scanf("%d", &a[i]);
  for (int i = 0; i < n - 1; i++) {
    int j = i;
  while (j >= 0 && a[j] > a[j + 1]) {
    swap(&a[j], &a[j + 1]);
    j--;
  }
}
  system("pause");
  return 0;
}
```


🤔 結果は？
`input1->` 5
`input2->` 9 8 7 1 10
`result->` 1 7 8 9 10


まとめ
📌 選択ソートと挿入ソートは時間の複雑さがO(N^2)の最も簡単な形態の並び替えアルゴリズムです。

📚参考講義：コンピューター工学専攻必須オールインワンパッケージOnline
👆 上記の講義はCとC++を言語を前提に説明しています。
データ構造とアルゴリズム Vol.5

#Vol.5: Queue
Queue資料の仕組みの考え方と活用方法について理解します。
C言語を利用してQueueの資料構造を直接実現できます。

#Queueとは？
👌 Queueは後ろから入って前方に出る資料構造(Data Structure)です。
👌 これらの特性から、スケジューリング、探索アルゴリズムなどで多方面に活用されます。

PUSH:Queueにデータを入れます。
POP:Queueからデータを取り出します。

Queueは後ろから入って前方に出る資料構造(Data Structure)です。
####例）
PUSH(7) – PUSH(5) – PUSH(4) – POP() – PUSH(6) – POP() 

🤔 結果は？ 

![큐.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619479/27cb790d-d1e4-aa2e-335a-956d17e3396e.png)

#Queueの実装
👌Queueは配列を利用した実装方法と、Linked Listを利用した実装方法に分かれます。
👌 最も基本的な形態の資料構造であり、実現の難易度は低い方です。


#配列を利用したQueueを実現
####例）実行するコードの例
```C
//Queueの宣言
#include <stdio.h>
#define SIZE 10000
#define INF 99999999
int queue[SIZE];
int front = 0;
int rear = 0;

//Queue挿入関数
void push(int data) {
  if (rear >= SIZE) {
    printf("Queue Overflowが発生しました。\n");
    return;
  }
  queue[rear++] = data;
}
//Queue抽出関数
int pop() {
  if (front == rear) {
    printf("Queue Underflowが発生しました。\n");
    return -INF;
  }
  return queue[front++];
}
//Queue全体の出力関数
void show() {
  printf("--- Queueの前 ---\n");
  for (int i = front; i < rear; i++) {
    printf("%d\n", queue[i]);
  }
  printf("--- Queueの後ろ ---\n");
}
//完成したQueueを使用する
int main(void) {
  push(7);
  push(5);
  push(4);
  pop();
  push(6);
  pop();
  show();
  system("pause");
  return 0;
}
```
🤔 結果は？
`result->`
```--- Queueの前 ---
4
6
--- Queueの後ろ ---```

#Linked Listを利用したQueueを実現
####例）実行するコードの例
```C
//Queueの宣言
#include<stdio.h>
#include<stdlib.h>
#define INF 99999999
typedef struct Node{
  int data;
  struct Node *next;
} Node;
typedef struct Queue{
  Node *front;
  Node *rear;
  int count;
} Queue;

//Queue挿入関数
void push(Queue *queue, int data) {
  Node *node = (Node*)malloc(sizeof(Node));
  node->data = data;
  node->next = NULL;
  if (queue->count == 0) {
    queue->front = node;
  }
  else {
    queue->rear->next = node;
  }
  queue->rear = node;
  queue->count++;
}

//Queue抽出関数
int pop(Queue *queue) {
  if (queue->count == 0) {
    printf("Queue Underflowが発生しました。\n");
    return -INF;
  }
  Node *node = queue->front;
  int data = node->data;
  queue->front = node->next;
  free(node);
  queue->count--;
  return data;
}

//Queue全体の出力関数
void show(Queue *queue) {
  Node *cur = queue->front;
  printf("--- Queueの前 ---\n");
  while (cur != NULL) {
    printf("%d\n", cur->data);
    cur = cur->next;
  }
  printf("--- Queueの後ろ ---\n");
}

//完成したQueueを使用する
int main(void) {
  Queue queue;
  queue.front = queue.rear = NULL;
  queue.count = 0;
  push(&queue, 7);
  push(&queue, 5);
  push(&queue, 4);
  pop(&queue);
  push(&queue, 6);
  pop(&queue);
  show(&queue);
  system("pause");
  return 0;
}
```


🤔 結果は？
`result->`
```--- Queueの前 ---
4
6
--- Queueの後ろ ---```


まとめ
👌 Queueは、配列または接続リストを利用して実装できます。

📚参考講義：コンピューター工学専攻必須オールインワンパッケージOnline
👆 上記の講義はCとC++を言語を前提に説明しています。
SOQLクエリのすべてのフィールドを取得する| Spring21の新機能

一般的なSQLのようにフィールドをすべて指定しなくてもいいように(select *みたいに）できるようになったみたいです。

https://www.sudipta-deb.in/2021/01/fetch-all-fields-in-soql-query-spring.html

FIELDS（ALL） -オブジェクトのすべてのフィールドをフェッチします。これは、SQLからのSelect *に似ています。
FIELDS（STANDARD） -オブジェクトのすべての標準フィールドをフェッチします。
FIELDS（CUSTOM） -オブジェクトのすべてのカスタムフィールドをフェッチします。

サポート状況
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/85e86df0-533e-d5ed-20cb-af42a53f8e57.png)
データ構造とアルゴリズム Vol.4

#Vol.4: Stack
Stack資料の構造の考え方と活用方法について学びます。
C言語を利用してStackの資料構造を直接具現できます。

#Stackとは？
👌 Stackは一方に入って、一方に出てくる資料構造(Data Structure)です。
この特性から、数式計算などのアルゴリズムにおいて多方面に活用されます。
👌 Doubly Linked Listの各ノードは、前ノードと後ろノードの情報を両方とも保存しています。

基本的にpushとpopで構成されています。
PUSH:Stackにデータを入れます。
POP:Stackからデータを抜き取ります

####例）
PUSH(7)-PUSH(5)-PUSH(4)-POP()-PUSH(6)-POP()  

🤔 結果は？ 
![stack.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619479/40873160-a00e-927a-44c5-c70db944a057.png)

#Stackの実装
👌Stackは、配列を利用した実装方法と、接続リストを利用した実装方法に分かれます。
👌最も基本的な形態の資料構造であり、実現の難易度は低い方です。

##配列を利用したStackを実現
####例）実行するコードの例
```C
//Stackの宣言
#include <stdio.h>
#include <stdlib.h>
#define SIZE 10000
#define INF 9999999 //INF = infinite
int stack[SIZE];
int top = 1; //Stackの最上段(=入り口)を意味

//Stack挿入関数
void push(int data) {
  if (top == SIZE - 1) {
    printf("Stack overflowが発生しました。\n");
  return;
  }
  stack[++top] = data;
}
//Stack抽出関数
int pop() {
  if (top == -1) {
    printf("Stack underflowが発生しました。\n");
    return -INF;
  }
  return stack[top--];
}
//Stack全体の出力関数
void show() {
  printf("--- Stackの最上段 ---\n");
  for (int i = top; i >= 0; i--) {
    printf("%d\n", stack[i]);
  }
  printf("--- Stackの最下段 ---\n");
}
//完成したStackを使用する
int main(void) {
  push(7);
  push(5);
  push(4);
  pop();
  push(6);
  pop();
  show();
  system("pause");
  
  return 0;
}
```
🤔 結果は？
`result->`
```--- Stackの最上段 ---
5
7
--- Stackの最下段 ---```

##Linked Listを利用したStackを実現
####例）実行するコードの例
```C
//Stackの宣言
#include <stdio.h>
#include <stdlib.h>
#define INF 99999999
typedef struct {
  int data;
  struct Node *next;
} Node;
typedef struct {
  Node *top;
} Stack;

//Stack挿入関数
void push(Stack *stack, int data) {
  Node *node = (Node*) malloc(sizeof(Node));
  node->data = data;
  node->next = stack->top;
  stack->top = node;
}

//Stack抽出関数
int pop(Stack *stack) {
  if (stack->top == NULL) {
    printf("Stack underflowが発生しました。\n");
    return -INF;
  }
  Node *node = stack->top;
  int data = node->data;
  stack->top = node->next;
  free(node);
  return data;
}

//Stack全体の出力関数
void show(Stack *stack) {
  Node *cur = stack->top;
  printf("--- Stackの最上段 ---\n");
  while (cur != NULL) {
    printf("%d\n", cur->data);
    cur = cur->next;
  }
  printf("--- Stackの最下段 ---\n");
}

//完成したStackを使用する
int main(void) {
  Stack stack;
  stack.top = NULL;
  show(&stack);
  push(&stack, 7);
  push(&stack, 5);
  push(&stack, 4);
  pop(&stack);
  push(&stack, 6);
  pop(&stack);
  show(&stack);
  system("pause");
  return 0;
}
```


🤔 結果は？
`result->`
```--- Stackの最上段 ---
5
7
--- Stackの最下段 ---```

STACK実装における注意点
❗Linked ListでStackを実現する際、メモリスペースの無駄なく効率的に実装することができます。

まとめ
👌 Stackは、配列または接続リストを利用して実装できます。

📚参考講義：コンピューター工学専攻必須オールインワンパッケージOnline
👆 上記の講義はCとC++を言語を前提に説明しています。
React Hooks ~ Effect Hookの使い方 ~

## Effect Hook とは

レンダリング後の DOM の変更や、状態の更新、他コンポーネントに対して影響を及ぼす処理(effects)を制御するための Hooks API になります。

基本的な書き方は下記、 useState と同様に import して関数コンポーネント内に記述することです。

```jsx
import React, { useEffect } from "react"

// 関数コンポーネント内で下記を記述する
useEffect(() => {
  // 処理をここに書く

  // 【option】関数を返すようにすると、アンマウントされる前に関数が実行される。
  return () => console.log('クリーンアップを実行');
}, []);
```

Effect Hook は以下のタイミングで実行される。

- レンダリング後に**必ず**実行する。
- 初回のレンダリング後だけ実行する。
- 指定したデータに変更があった場合のみ実行する。
  - 例で示した文の`[]`のところに、何の変更をトリガーにするかを書くことができる。

利点として、State など、Reactの機能をEffect Hookの関数内で利用できること。

### Effect の利用ケース

- APIとの通信
  - State を設定して、レンダリング後に API からデータを取得してセットする。
- Stateを変更させたときに、他に影響を与える場合
  - 例えばチャットアプリで相手から返信が来た時に、タイトルに未読件数を表記するとか

### サンプル

State の変更を受け取って、ページのタイトルを変更する Effect Hook を実装します。
記事投稿サイトみたいなのをイメージしてます。

```tsx:App.tsx
import React, { useState, useCallback, useEffect } from "react";
import { InputForm } from "./InputForm";
import "./styles.css";

export default function App() {
  const [content, setContent] = useState<string>("test");

  const onChangeContent = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setContent(event.target.value);
    },
    []
  );

  useEffect(() => {
    document.title = `${content} が入力されている。`;
    console.log("content が変更された");
  }, [content]);

  return (
    <div className="App">
      <InputForm content={content} onChange={onChangeContent} />
      <div>
        <span>content の値は、"{content}"</span>
      </div>
    </div>
  );
}
```

```tsx:InputForm.tsx
import React from "react"

interface Props {
  content: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export const InputForm = (props: Props) => {
  return <input defaultValue={props.content} onChange={props.onChange}></input>
}
```

簡単ではありますが、[codesandbox](https://codesandbox.io/s/cranky-wind-i9s21?file=/src/App.tsx:0-680)にサンプルのコードを上げてます。
余分な関数の実行や、知らぬ間に DOM が書き換わってしまっている、を防ぐために、第二引数はなるべく入れとく方が良いのかなと思ったりしました。

### その他

- useEffect は1つのコンポーネント内で複数設定が可能
  - 異なる変数を第二引数に設定するなどもできる
SwiftUIで作るしりとり地図アプリ

iosアプリ開発を学ぶために、位置情報を組み合わせたしりとりアプリを作成しました。
https://apps.apple.com/app/id1537582064#?platform=iphone


## なんで作ろうと思ったか
モバイルアプリ開発のスキルを身につけるために、すぐに作れるチュートリアル的なものを作ろうと思って作りました。しりとりをするだけのアプリなら１ヶ月くらいで終わるだろうと思って始めたのですが、半年もかかる壮大なプロジェクトになってしまいました。

## 利用技術
- フロント: SwiftUI
- バックエンド: Firebase　　
 
発表されたばかりで目新しかったというだけの理由で、SwiftUIを利用しました。
Swiftそのものを触ったことがない、かつ成熟していない技術のため調べるのが難しいので大変でした。バックエンドはFirebaseのFirestoreとFunctionを活用しました。


## 完成図
### 回答画面
しりとりを回答して送信する画面。
しりとりになっていなかったり、英数字が入力されたりするとバリデーションがかかる。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501910/83a4bc62-e25c-60c6-3708-9ad68878384b.gif width=200>

### 地図画面
しりとりの入力場所を地図上に表示する画面。本アプリの目玉。回答地点のピン間をアニメーションで繋いだのがポイント。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501910/e49ab812-7174-e1af-3779-c57e756b7ab9.gif width=200>

### 履歴画面
これまでのしりとり経歴を表示する。自分の回答のみフィルタすることも可能。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501910/46ca65c1-d132-2fd4-c8a7-033443297287.png width=200>


## 工夫したこと
### 非同期通信  
DBにFirestoreを利用することで、しりとりデータの回答送受信を非同期通信で実現することができました。回答を送信した後、更新ボタンなど押すことなく地図画面、履歴画面の内容が更新されます更新されます。
(一方トランザクションは考慮されていないので、複数人が同時に送信した時の挙動が不安定...)

### しりとり選択時の地図表示
地図表示にはSwiftUIではなく、SwiftのMapkitを利用しています。ピッカーで選択されたしりとりを地図上に表示させるために、MapkitとSwiftUIの状態変数をバインディングさせてるのが大変でした。

### 位置情報データ利用におけるプライバシー配慮
位置情報データを利用するにあたってユーザーからきちんと利用同意をとる必要があり、きちんとできていないとAppStoreのレビューで信じられないくらい怒られます。
実はここが一番苦労したところで、下記の機能を実装することでクリアしました。
1. 利用規約同意
2. 投稿時に位置情報を非公開にする機能
3. 既に投稿したしりとりの位置情報を非公開に変更する機能
アプリにとってはいわば非機能部分の実装ですが、何気にかなり時間がかかりました。


## 感想
開発に行き詰まるたびに、「このアプリは何のためにあるのだろう」という気持ちが頭をよぎり、モチベーションを維持するのが大変でしたが、なんとかアプリリリースまで漕ぎ着けてよかったです。
技術を身につけるために個人開発をするのはとてもためになりますが、役に立つもの、モチベーションが上がるものを作ることが何よりも大事だなあとしみじみ思います。
一緒に開発していただいた@antyuntyuntyun さんにこの場を借りて感謝申し上げます。