OmniAICreator/Qiita-1.07M huggingface dataset:
arduino UNOの基板上のLEDでLED点滅（Lチカ）

この記事は、2020-05-23に書いて、2020-05-24に更新しました。
***
#概略
Arduino UNO には、基板上にLEDが実装されています。このLEDを点滅させて、いわゆるLチカをやってみます。
本体以外に何もいらないので、Arduino UNO の動作確認にぴったりです。

#環境・部品
PC：Windows 10 Professional
開発環境：Arduino IDE 1.8.12
本体：Arduino UNO Rev3

#コード

```cpp:BuiltinLEDBlink.ino
void setup() {
    pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
    digitalWrite(LED_BUILTIN, HIGH);
    delay(500);
    digitalWrite(LED_BUILTIN, LOW);
    delay(500);
}
```

#解説
基本的に、ファイル>>スケッチ例>>01.Basics>>Blink と同じです。まったく同じだと芸がないので、点滅の間隔を短くしています。
ピン番号を指定するときに`LED_BUILTIN`と指定していますが、これは基板上のLED番号を表すマクロで、`pins_arduino.h`の中で、

```cpp:pins_arduino.h
#define LED_BUILTIN 13
```

と定義されています。基板上のLEDは、13番ピンに繋がっているということです。


#参考
[pinMode()](https://www.arduino.cc/reference/en/language/functions/digital-io/pinmode/)（公式、英語）
[digitalWrite()](https://www.arduino.cc/reference/en/language/functions/digital-io/digitalwrite/)（公式、英語）
[delay()](https://www.arduino.cc/reference/en/language/functions/time/delay/)（公式、英語）
Ruby, Nokogiri : セレクトしているノードの要素名を取得する

#はじめに
Nokogiriでは、cssまたはat_cssで要素の名前を指定することでノードをセレクトできますが、逆にセレクトしているノードから要素名はどのように取得するのか気になったので、調べてみました。

#nameメソッドを使う
ノードの要素名取得はとてもシンプルです。以下のようなhtmlファイルがあったとします。

```hello.html
<html>
  <head>
    <title>hello</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>こんにちは</p>
  </body>
</html>
```
at_cssでpタグを選択します。

```sample.rb
require 'nokogiri'

html = open('hello_utf8.html').read
doc = Nokogiri::HTML.parse(html)

element = doc.at_css('p')

p element.name  #=> 'p'
p element.parent.name  #=> 'body'
```
parentなどを使って他のノードをセレクトし、要素名を取得することもできます。

#さいごに
普通はhtml構造を先に見てからスクレイピングするので、ノードから要素名を取得する需要はあまりないと思います^^;
WSL (Windows Subsystem for Linux)或いはMSYS2からWindowsのgvimを立ち上げる

Windows上でのLinux環境であるWSLからgvimを立ち上げる方法をメモとして残しておく。ちょっと調べた所では、他の記事を見つける事が出来なかった。あまりやってる人がいないのか、記事として残す程の事ではないと言う事なのか。。。しかし、簡単かつ有用だと思ったので記事として残しておく。
## WSL
WSLからWindowsのアプリケーションを起動できるので、以下のようなWindowsのgvimを起動するbashのfunctionを作って登録しておくだけ。当然Windows版のgvimを事前にインストールしておく必要がある。

```bash:/home/$USER/.bash_aliases
#alias gvim='/mnt/c/Program\ Files\ \(x86\)/Vim/vim82/gvim.exe'
#alias gview='/mnt/c/Program\ Files\ \(x86\)/Vim/vim82/gvim.exe -R'

function gvim  () { (/mnt/c/Program\ Files\ \(x86\)/Vim/vim82/gvim.exe    $@ &) }
function gview () { (/mnt/c/Program\ Files\ \(x86\)/Vim/vim82/gvim.exe -R $@ &) }
```
bashのaliasだと引数を持てないのでaliasではなくfunctionで定義する。スペースや()は\でエスケープする。またコマンド全体を()で括ってバックグラウンドジョブの開始と終了のメッセージが出ないようにしている。この.bash_aliasesをホームディレクトリ(/home/$USER)の下に置いて.bashrcから読むようにしておく。

```bash:/home/$USER/.bashrc
if [ -f ~/.bash_aliases ]; then
    . ~/.bash_aliases
fi
```
.bash_aliasesを作らなくても.bashrcに直接書いてもどちらでも良い。
こうしておいて再度bashを起動か`source .bashrc`を実行すると通常のLinuxのコマンドと同様に`gvim <file name>`や`gview <file name>`でgvimが立ち上がりテキストファイルを編集・閲覧ができるようになる。使用感もLinuxのGUIの環境とほぼ同じ。

gvimに限らず他のエディタやWindowsのGUIアプリケーション何にでも応用できる。

尚、WindowsにVcXsrvとかのX serverをインストールしてWSLにLinuxのgvimをインストールすればLinuxのgvimも起動できるが、面倒だし重いのであまり実用的ではない。
因みに筆者はVcXsrvは使わずにWSLの立ち上げと同時にX serverが自動で立ち上がるMobaXtermを愛用しているのでこちらの記事も参考。

https://qiita.com/vega77/items/f00323e8ce64bfa1fdd6

~~WSL2であれば何も特別な事せずLinuxのGUIプログラムも軽く動くようになるのかな。私はまだ使っていないので分かりません。~~
WSL2ではなくWSLgでX serverでのGUIアプリ対応ですね。

## MSYS2
上記の方法はWSLが無いWindows7等でMSYS2とかでbashの環境を作った場合にも同様に使えるが、MSYS2の場合、Windows版gvimをインストールすると勝手にできるC:\Windows\gvim.batおよびC:\Windows\gview.batを実行できる。これらはファイル名を引数にもてるので、これらを実行するのが良い。パスも最初からC:\Windowsに当たってるので以下のaliasを設定だけでできる。

```bash:/home/$USER/.bash_aliases
alias gvim='gvim.bat'
alias gview='gview.bat'
```
【Golang】ポインタ

#【Golang】ポインタ
Golangの基礎学習〜Webアプリケーション作成までの学習を終えたので、復習を兼ねてまとめていく。 基礎〜応用まで。

```
package main
//ポインタ
//&　アドレス
//*  アドレスの実態
//*int ポインタ型 この中にはアドレスを入れる
//関数で変数の値を変えたい場合は、関数の引数はポインタ型（メモリーのアドレス）を受け取るようにする。

import (
	"fmt"
)


func double(i int){
	i = i * 2
}

//ポインタ型を引数
func double2(i *int){
    *i = *i * 2
}

func main() {
	var n int = 100

	fmt.Println(n)
	//>>100

	fmt.Println(&n)
	//メモリのアドレスを表示
	//>>0xc000136008

	//2倍にする関数
	double(n)
	fmt.Println(n)
	//値渡しされる為、変わらない
	//>>100


	//ポインタ型
	//メモリーのアドレスの事
	//nのアドレスをpに定義（nを参照している）
	//&を使って任意の型から、そのポインタ型を生成できる。
	//&はアドレス演算子と呼ばれる。
	var p *int = &n

	//アドレスのアドレス？
	fmt.Println(&p)

	//メモリーを表示
	fmt.Println(p)
	//>>0xc000136008

	//メモリーの中身を表示
	fmt.Println(*p)
	//>>100

	//ポインタ型を引数に受けとるので、アドレスを渡す
	//double2(n)はnがポインタ型でないので、エラー
	double2(&n)
	//デリファレンス
	//参照渡しになるので変化する。
	fmt.Println(n)
	//>>200

	//nの参照のpなので４００になる。
	double2(p)
	fmt.Println(*p)
	//>>400

	//こんなこともできる
	//nのアドレス
	fmt.Println(&n)
	//nのアドレスの実態
	fmt.Println(*&n)
	//nのアドレスの実態のアドレス
	fmt.Println(&*&n)



}
```
【TypeScript用】es-lintでソースの自動整形を適用させる方法(vs code)

~~教えてもらった内容のメモなのでこれだけで動作するかはわかりません、、
あとで検証して更新するのでゆるしてください:sob:~~
一応動くことが確認できました！

[es-lint](https://eslint.org/)の公式でだいたいは書いてある？

## プラグインの導入

今回は[es-lint](https://eslint.org/)と[prettier](https://prettier.io/)を併用して行きたいと思います。

下記のコマンドを実行します。
以下の2つはes-lintとprettierのフォーマットを競合させないように必要らしい

* eslint-config-prettier
* eslint-plugin-prettier

```terminal
$ yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier -D
```

## ソースコード側の設定

.vscodeディレクトリ内にextensions.jsonを用意します。

```extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
  ]
}
```

.vscodeディレクトリ内settings.jsonに以下を追記します。

```settings.json
{
  "eslint.packageManager": "yarn",
  "eslint.workingDirectories": [
    { "directory": "./app", "changeProcessCWD": true }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}
```

eslintrc.jsと.prettierrcの設定は下記の通り、、
最低限の条件で適用しているのでその他のルールを追加したい場合はextendsに追記していくといいそうです。

rulesにはignoreする条件等を書きますがこちらは最低限にしないとlintの意味がなくなってしまうのでなるべく追加しないようにしたい。

```.eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
    'prettier/react',
  ],
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  env: { node: true, es6: true },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-function-return-type': 0,
    'no-restricted-imports': [
      'error',
      {
        patterns: ['../'],
      },
    ],
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};
```

```..prettierrc
{
  "eslint.packageManager": "yarn",
  "eslint.workingDirectories": [
    { "directory": "./app", "changeProcessCWD": true }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}
```

以上で~~できるはず...！~~ できた！！

## 追記
vs-codeの拡張機能で下記の2つを追加しないと自動でフォーマットはしてくれませんでした（そりゃそうだ）
・ESLint
・Prettier - Code formatter
MacにMAMPをインストールする

# 概要
自宅のMacにWebサーバーを立ち上げるため、MAMPを利用してみました。
### MAMP とは
- Mac
- Apache
- MySQL
- PHP

の略と言われてるようですが、Win版もあるし、公式ページに特にこの事についての記載が発見できず、正確な情報は不明です。

# インストール手順
## パッケージのダウンロード
まずは、MAMP公式サイトからパッケージをダウンロードしましょう。
https://www.mamp.info/en/
公式サイトのFreeDonwloadをクリック
![20190601171820-1024x725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/e5a94665-c1d3-9fde-0525-a13b59ed7c35.png)
Downloadページで mac のパッケージを選択
![20190601171827-1024x725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/f7f7947f-5c2c-7d1e-4c9a-c74ee2d98de4.png)
バージョンはアクセスのタイミングで変わるかと思いますが、インストール用の pkg ファイルがダウンロードできます。
![20190601171957.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/a191e77d-1a45-54bd-8121-2451fa3e9def.png)
## インストール
pkgファイルをダブルクリックすると、インストール手続きが始まります。

使用承諾やインストール先の選択等がありますので、指示に従いながら勧めていきます。
![20190601172320.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/8e213222-a43b-603f-7c16-7c798b02fb25.png)
![20190601172654.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/b15cbdc3-9d0b-56fc-8330-b15a8632af72.png)

## MAMPの起動
インストールが完了したら、MAMP起動します。デフォルト設定でインストールをしていれば、アプリケーションフォルダになっていると思うので、Launchpad等から起動できます。

※PROとFREE版があるので、FREEの方を起動。
![20190601173135-1024x576.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/32d3f6f1-f7ec-98c5-5564-26b4d9047194.png)
起動したらコントロール画面が表示されるので、「Start Servers」をクリックしてApacheとMySQLを起動します。![20190601173503.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/b47dccd9-a18c-dbd1-810e-1528cf307016.png)
起動が完了すると、「Start Servers」が緑になりブラウザで初期ページが表示されます。
![20190601173729.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/e5d618d8-443f-af92-4b5c-ae8eba4a657c.png)
![20190601173749-1024x869.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/f2d295af-3f4c-ec5e-a781-40907bf13e7e.png)
以上でインストールは完了です。
XCODEからiPhoneにアプリが送れなくなった

XcodeからiPhoneにアプリが送れなくなった。全然コードの問題じゃなさそうで、
「iPhone is not available. please reconnect the device.」
っとだけでてきて、iPhoneは認識しているのにアプリが転送されない。
散々調べた結果、これだった。。。。

まじかよー
https://stackoverflow.com/questions/61863826/iphone-is-not-available-please-reconnect-the-device

Xcodeのアプデートで完了。
Linuxの認証にAzureADを使う

Sambaの認証をOffice365のユーザで認証させたいなぁと思ったのでその下準備としてLinuxの認証にAzureADを使えるようにする。

# 環境
Debian 10.2
Nodejs v10.19.0 (apt)
[aad-login](https://github.com/bureado/aad-login)
Office365

# 参考にしたサイト
[Linux ログインをAzureADで認証する！！](https://www.cloudou.net/azure-active-directory/aad009/)

#設定
基本的には参考サイトの手順ですが+αやることありました。

## AzureADでアプリケーションを作成

Azureのコンソールから"アプリの登録"を行います。
名前：わかりやすい名称
サポートされるアカウントの種類："この組織ディレクトリのみに含まれるアカウント"

アプリを登録すると、アプリケーション(クライアントID)が概要ページに表示されるのでコピーしておきます。

## アプリケーションのマニフェスト修正
マニフェストページ表示するとJSONでマニフェストが表示されるので以下項目を設定します。
`"allowPublicClient": true`
私の場合は初期値がnullで設定されてました。

この設定を忘れると認証させた時に
`AADSTS7000218: The request body must contain the following parameter:`
となって認証失敗します。


## APIのアクセス許可設定
APIのアクセス許可ページを開いて管理者がアクセス許可に対して同意する必要がありました。
"[名前]に管理者の同意を与えます"ボタンを押して同意を行います。
状態の項目に"[名前]に付与されました"と緑のチェックマーク付けばOKです。

この設定を行わないと認証させた時に
`AADSTS65001: The user or administrator has not consented to use the application with ID {クライアントID} named '[アプリ名]'.`
となって認証失敗します。


## aad-loginのインストール
Linuxサーバー側の作業です。

```bash:bash
sudo apt update
sudo apt install -y nodejs npm git
cd /tmp
git clone https://github.com/bureado/aad-login
cd aad-login/
mkdir -p /opt/aad-login
cp aad-login.js package.json /opt/aad-login/
cp aad-login /usr/local/bin/
cd /opt/aad-login/
npm install
```

## aad-loginの設定

```js:aad-login.js
var directory = '[office365のドメイン名]';
var clientid = '[アプリケーションのID]';
```

add-login.jsを見ると分かりますが、`username + '@' + directory`をuseridとして認証するのでoffice365で認証に使えるドメインをdirectoryに記載します。


## pam.dの設定

aad-loginのgitの説明にあるようにcommon-authの先頭に追記します。

```bash:/etc/pam.d/common-auth
～省略～
# pam-auth-update to manage selection of other modules.  See
# pam-auth-update(8) for details.

#↓ここ追加↓
auth sufficient pam_exec.so expose_authtok /usr/local/bin/aad-login
#↑ここ追加↑

# here are the per-package modules (the "Primary" block)
auth    [success=1 default=ignore]      pam_unix.so nullok_secure
# here's the fallback if no module succeeds
auth    requisite                       pam_deny.so
# prime the stack with a positive return value if there isn't one already;
～省略～
```

## ユーザの追加

認証させたいユーザを事前に追加しておく必要がありました。
追加するのは@より前のところになります。

```bash
#hoge@directoryの場合
useradd hoge
```

<<ユーザの追加しないで実行した場合>>
pam_exec.soが実行された時に"#010#012#015INCORRECT#010#012#015"がパスワードとして設定されてしまい認証できないようです。

authをする前にユーザが居るか確認するようで、ユーザが居ない場合パスワードが上記のものに差し替わるようです。

個人用途ならまぁしょうがないかという感じ(゜゜)



と、ここまでやってSambaってユーザ管理別やんってことに気づいて当初の目的が果たせないことに気づく・・・
久し振りにEthereumで独自Token振り出してMeatamaskで取ろうしたら、操作を忘れて焦ったのでメモ

# Tokenの発行は上手くいったのに、Metamaskで取り込む方法を忘れた・・・。
- [この投稿](https://qiita.com/realtakahashi/items/b9e46af9b03582c2d448)で自分でトークンを振り出して、Remix上では確かに自分のアドレスのトークン残高が増えているのに・・・
- あれ？Metamaskみても入っていない・・・。

# 取込方法　※取り込んでないのだから当たり前（※私の知る限り）
- metamaskにログインして、左のハンバーガーアイコン（三）をクリックして「トークンを追加」をクリック
- 「カスタムトークン」を選択して、「token contract address」を入力すると、アドレスが正しければ、残高が表示される。
- 「追加」を押せば、Metamaskに入る。
- それだけのことだけど、忘れて焦った。汗。
[Flutter] Apple Watchの呼吸アプリのアニメーションを作ります。

こんにちは～Dreamwalkerです。
もう夏ですね。暑いです

# 始める前に

呼吸アプリを利用している方いらっしゃいますか？
ストレス溜まっている時、とてもおすすめです。

こんな形のアプリなんですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/49d898c2-8974-ecff-64c4-da1cb0d00f2a.png)
Use the Breathe app　https://support.apple.com/en-us/HT206999　

この呼吸アプリのアニメーションをFlutterでやってみまいと思います。

# コード

## CustomPaint Widgetを使います。

CustomPaintの中にはPainterというのが必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/d978b2cf-1e5c-ee7a-3ba9-c70f85609440.png)


## Painter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/a385bec9-9bf4-f756-c299-729bd0b9550e.png)

## Animation

アニメーションはCurvedAnimationを活用します。
MixinとしてSingleTickerProviderStateMixinをState　Classにつきます。
アニメーションを使いたいなら必要な事になります。

まず、アニメーションコントローラーを宣言します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/e1602ab7-e995-4e78-3df1-ffb9c9035ca1.png)

あと、initStateのメソッドの中にインスタンス化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/c6246699-ac5d-ba80-7fc0-c914c0cea641.png)

今回使ったCurvedAnimationになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/df806455-4a25-dc79-e41e-c9c3a178dcf7.png)


# 結果

| １       |    ２ |   ３    | ４    |
|:-----------------:|:------------------:|:------------------:|:------------------:|
| ![Screenshot_1590220529.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/b9bf1376-bd6e-9980-d7a6-3c75d4eb16c6.png)             |             ![Screenshot_1590220543.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/b97111a5-fa44-466f-dbbf-b95d55972bc9.png) |        ![Screenshot_1590220544.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/4edfde05-3170-3a49-7b47-c0bbcd7f74eb.png)      |　![Screenshot_1590220545.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/29ba08b4-b0fe-c774-9c78-6fd13a712979.png)　|
Vue.js prototypeに登録したpluginのユニットテストを書く

Vue.js で plugin のテストを書いた時のメモ。prototype に登録したプラグインって、どうやって Jest から呼べばいいんだろうってちょっと悩んだ。最終的に localVue.use() してからlocalVue.prototype.$hoge() って実行すればちゃんと Jest からでも実行できた。

# テスト対象コード

例えば、HTTP ステータスコードによって処理を行う処理があったとする。本来であればテストしやすいように install とは別ファイルでロジックを管理するべきなんだろうけど。元がこうなっていたので、このコードを保ったままユニットテストを書く。

```typescript
export const MyPlugin = {
  install(Vue) {
    Vue.prototype.$myPlugin = (statusCode: number) => {
      switch (statusCode) {
        case 401:
          /* 処理省略 */
          break;
        case 500:
          /* 処理省略 */
          break;
        default:
          /* 処理省略 */
          break;
      }
    };
  }
};
```

# テストコード

テストコードはこんな感じ。vue-test-utils の createLocalVue でインスタンスを作成して、 use() でプラグインを適用。その後 prototype から $myPlugin を直接呼べば良い。

```typescript
import { createLocalVue } from "@vue/test-utils";
import { MyPlugin } from "my-plugin.ts";

const localVue = createLocalVue();
localVue.use(MyPlugin);

describe("MyPlugin", () => {
  it("引数が401の場合", () => {
    localVue.prototype.$myPlugin(401);
  });

  it("引数が500の場合", () => {
    localVue.prototype.$myPlugin(500);
  });
});

```

Vue のテストコードといえば shallowMount を使ってコンポーネントのユニットテストをよく書いていたけど、いざプラグインのテストを書こうと思ったら、なかなか思い付かず。vue-test-utils は便利。
Protocol buffers の proto ファイルの管理と配布

gRPC の普及により、通信時ののデータやり取りの仕組みとして、Protocol buffers を使うことも増えてきただろうと思う。

Protocol buffers のフォーマットでデータをやり取りする場合、IDLとなる .proto ファイルを複数のリポジトリが参照する形になる。
少なくとも、最新の .proto ファイルか、そこからコンパイルされたコードを、全サービスで共有できるようにしておく必要がある。

# 方針1: APIのサーバー側リポジトリでクライアントコードを生成し、クライアントは生成後のコードを参照する
APIのサーバー側リポジトリで .proto だけでなく、そこから生成されたクライアント用コードも管理してしまう案。
.proto の管理者はIF定義を更新する場合、必ずコンパイル後のコードも合わせてpushする必要がある。
現実的には .proto ファイルがpushされたら、CIで各言語のコードが生成され、個別の各サービスは git submodule などを使って生成後のコードを参照する形になるだろう。

## メリット
- 各クライアントリポジトリ側で .proto をいちいちコンパイルする必要がない

## デメリット
- 新たな言語のクライアントが現れた時に、サーバー側リポジトリでのコンパイルを増やす必要があり、サーバ側の責務としてやりすぎている
    - サーバー側とクライアント側の開発者が同じならまだいいが、大規模開発などでは運用が難しい
- サーバー側リポジトリの .proto に依存するサービスの言語の数だけコンパイルする必要があり、ファイルが入り乱れる
- git submodule での管理だと、参照する APIサーバーが増えてきたときに、どのAPIでどのバージョンを参照しているのか把握しづらい

# 方針2: サーバー側では .protoファイルのみを管理し、クライアント側は .proto を取り込んで各自コンパイルする
サーバ側では .proto ファイルのみを管理し、各クライアントは [protodep](https://github.com/stormcat24/protodep) を使って、 依存関係のある .proto ファイルのうち、更新のあるものだけを収集する。
（protodep を使わなくても、git submodule を使ったり、手でコピーするなどの管理方法もある）
.proto のコンパイルは各クライアント側で行う。

protodep の使い方参考
https://soichisumi.net/2019/05/managing-proto-files-with-protodep/

## メリット
- 使用する .proto のバージョンをファイル管理でき、依存の把握がしやすい
- APIサーバー側で無駄なファイル管理とコンパイルをする必要がないので、開発における責務を分解できる

## デメリット
- いちいちコンパイルする必要がある

# 方針3: .proto ファイル管理用のリポジトリを立てて、サーバーもクライアントもそのリポジトリのファイルを参照する
gRPCサービスが増えてくると、クライアントは複数のリポジトリの .proto を参照する必要が出てくるかもしれない。
そんな時は、 .proto 管理用のリポジトリを一つ作って、そこで色んなサービスの .proto を管理するという手もある。
（メルカリはこの手法を取っているらしい）
.protoだけでなく、コンパイル後のコードまでここで管理しても良い。このリポジトリのCIタスクとして、.proto が push されたら 各言語のクライアント用コードを生成するようにしておけば、自動でコンパイルされる。

# まとめ
検索すると protodep を使った方法が結構出てくる。
実際、手軽に始めるなら方針2が良さそう。
みなさんどうやって運用しているんでしょう。
正規表現はまず、バックスラッシュ「\」を攻略せよ

# はじめに

正規表現には様々な記号が出てくるので、
この記事で使用している`「」`は、記号をくくって説明するために使っています。
`「」`は正規表現の記号ではありません:nerd:


# 改めて、はじめに

この記事をご覧になっている皆様にお聞きします。


**正規表現の勉強、後回しにしてませんか？？**

私はそうでした。心境としては、

`^\w+([-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$`

*「なるほど。暗号が並んでて訳わからないし、もう少しプログラミングに慣れてから取り組もう」*


学習に挫折しないように、このような考え方をして飛ばし飛ばし進めることはもちろん大事です:nerd:

ただ、正規表現は現場に出たら知ってて当たり前のようなので、この期に苦手意識を克服していきたいですね。

---

それでは、先ほど定義したものをもう一度見てみます。
ポイントは、一気に読み解こうとはせず、焦らず一つずつ。

`^\w+([-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$`

まず、着目するのは文頭と文末にある、「^」と「$」
これはカンタン。「^」は行のはじめ、「$」は行の終わりを表す記号です。

---

そして次に気になるのが、やたらと出てくる
バックスラッシュ「`\`」

これをうまく読み解くことが肝です。

「\」が出てきたら、慌てず右の文字を見ましょう。「\」は、右の文字とタッグを組みます。
そして組む相方によって次の二つのパターンに分かれます。

---
#### ①「\w」「\d」などのアルファベット

この場合は、特別な意味をもちます。詳しくは[こちらの記事](https://murashun.jp/blog/20190215-01.html)が見やすいです。参考にさせていただきました。



#### ②「\\.」「\\-」などの記号


この場合は、その記号を文字そのものの意味として捉えます。


---
再度見てみます。

`^\w+([-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$`

今回使用されているのは、「\w」と「\\.」のふたつですね。

「\w」は、①に該当します。意味は、アルファベット、アンダーバー、数字

「\\.」は、②に該当します。意味は、「.」という文字そのもの

---

次は、`()`に注目。
こちらもいろいろな意味があるのですが、今回は、**ひとまとめにしている**と把握しておけばOKです。

^\w+`([-.]\w+)`\*@\w+`([-.]\w+)`\*\\.\w+`([-.]\w+)`*$

このように見えていればOKです。

---

お次は、`[]`
これは文字クラスといって、この中に入っている文字に『または』という意味をつけます。


`^\w+([-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$`


なので`[-.]`の意味は、**「-」または「.」**

---

あともう少し。
残すは、**「+」「*」「@」**の三種類。

**「+」**の意味は、直前の文字が １回以上 繰り返す場合にマッチ。

**「*」**の意味は、直前の文字が ０回以上 繰り返す場合にマッチ。

**「@」**は、文字そのものの意味です。

---

お疲れ様でした！ここまでの知識があれば、読み解けるはずです。
是非トライしてみてください:nerd:


`^\w+([-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$`

最初は、慣れないので時間がかかると思います。けど粘り強くやってみれば、少しずつ理解して描けるようになります。

一緒に頑張りましょー！！


# 最後に

本当は、読み解いたあとの解説を載せたかったのですが、テキストで説明するのが非常に難しくて断念しました:dizzy_face:


もっともっとみなさんにわかりやすい記事を届けれるように精進します！

最後まで読んでくださり、ありがとうございました:nerd::kiss:
Raspberry Pi にWindows 10 IoT Core 入れてみるメモ

※Raspberry Pi 3B+だとPreview版じゃないと動かない、と言うような情報がありましたのでお手持ちのバージョン確認してみてください。

好奇心で買ってみたものの特に何もしてなったRaspberry Pi 3があることを思いだしました。

差し当たってカメラで遊びたい案件ができつつあるので準備してみようかな、と思い立ってしまいました。

WindowsべったりユーザなのでWindows 10 ToT Coreを試しに入れてみます。

##Tutrial
https://docs.microsoft.com/ja-jp/windows/iot-core/tutorials/rpi

##SDカードの準備

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/1356bf4a-f853-d351-5cae-7bca8663bafd.png)

だそうですので転がってた16GBのMisroSDにしてみます。


##IoT Core ダッシュボードでOSメディア？の作成
IoT Core ダッシュボードのダウンロード
https://docs.microsoft.com/ja-jp/windows/iot-core/downloads


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/0ade296a-b8ad-c1aa-b2cc-1f3fc542d6a2.png)

クリックすると「setup.exe」がダウンロードされます。
実行するとインストーラが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/71d6d836-9433-1637-d144-b61b0981e04d.png)

インストールをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/522c46d0-4630-4e28-30dc-32b8673eb4bc.png)


新しいデバイスのセットアップ　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/596c62c4-258f-ce50-49dc-36ddc8145e92.png)

こんな感じで選択と設定してみました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/74e39810-fa63-b70e-0172-70fd35e8ff51.png)


「ソフトウェアライセンス条項に同意する」にチェックを入れて
「ダウンロードとインストール」をクリック

したら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/dae571cc-90c7-28fd-8eea-978ca756d03f.png)

が出てきたので「続ける」クリック

すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/3efa880e-7c6f-c7cd-b8e4-cd7754f18c4a.png)

な感じでSDカードになんか書いてそうです。
こんなのも立ち上がりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/83b980df-850b-9449-4fc7-55b78f11892d.png)

なんかいっぱいコマンドプロンプトがわらわら立ち上がってドライブが大量に認識されました笑


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/71bbbbfa-d764-403e-1339-0e6439ae6b77.png)



だそうですのでSDカードをRaspberry Piにさして電源投入
言語設定やらWi-Fi設定してたらホーム画面ぽいものに到達！

無事起動はできた模様。

躓くことなく終わってしまいました。

しかし！起動してみたらWindowsとはだいぶ違う使い勝手の模様！


ダッシュボードに戻ったらリモートからセットアップできそうなメニューがありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/5f08fba6-2b75-521e-aebf-c7b6d01d3b49.png)

ブラウザ経由でDevicePortalなる物からセットアップできそうです。
しかしながらやっぱりWindowsと思って対峙するとちょっと違う模様です。


続きはちょっと勉強してからですね。
windows10 HomeでDockerを使う

#プロローグ
dockerを使いたいのですが、自宅環境がWindows10 homeです。
通常のdocker for windowsはHyper-vが必要ですが、windows10 homeにはhyper-vが導入されていません。
調べるとdocker toolboxを利用するとwindows10 homeでもdockerが使えるようです。

#docker toolboxの導入
docker toolboxの導入方法は[こちら](https://docs.docker.com/toolbox/toolbox_install_windows/)の公式に記載がありますので、参考にします。
<img width="758" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/5dfb0c98-c77b-a41f-85da-7389db2bb622.png">

exeファイルを[Github](https://github.com/docker/toolbox/releases)からダウンロードするようです。
<img width="1128" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/7d31bac4-3cb2-7244-050c-c3bc1253c7a0.png">

exeを実行します。
<img width="250" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/8e2b6be3-57cd-147c-5d75-916eb79b9e62.png">

インストール先を指定します。
<img width="250" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/aba04ebe-723d-20ad-b9e5-bed0dbf8b277.png">

インストール対象を選択します。（ついでにGitを入れました）
<img width="250" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/f61988d2-2263-f16a-09f1-c42274e1f144.png">

セットアップの設定です。デフォルトにしました。
<img width="250" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/7d774ff4-89fb-b4f9-86df-22e1582efa48.png">

内容に問題がなければそのまま「Install」を押下します。
<img width="250" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/f6965715-5246-849b-194c-9d4e089fee69.png">

確認メッセージがでましたが、そのまま「OK」を押下しました。
<img width="364" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/e4982eba-2069-4ee6-266b-25337c0b6540.png">

Finishを押下します。
<img width="250" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/5ef4e552-2f7d-45c4-a8ca-adbe7d5b57dd.png">

インストールすると「Docker Quickstart Terminal」というショートカットが作成されました。
実行します。
<img width="414" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/cb680a74-e7ae-b24c-f90e-8616ebcd2ada.png">

5分ほどでクジラの絵が表示されたら導入完了です。
<img width="733" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/7dde2491-9baf-9277-bbc3-7bcc06b77221.png">

#動作確認
公式が用意している動作確認用のHello-worldコンテナを呼び出してみます。
Hello from Docker！と表示されたら完了です。
```
docker run hello-world
```
<img width="733" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/10e46fe7-1700-e98d-f3f3-7f22e1a1805f.png">
[Python]クラス、インスタンス

#クラス定義
**class クラス名:**

```python
class MenuItem:
    pass
```

#インスタンスの生成
**変数名　= クラス()**

```python
menu_item1 = MenuItem()
```

#インスタンス変数

```python
menu_item1.name = "ヒレカツ"
```

##インスタンス変数の値の取得
**インスタンス.インスタンス変数名**

```python
print(menu_item1.name)
```
出力結果
ヒレカツ
________________________________________

#メソッド(クラス内で定義された関数)
メソッドの呼び出し
**インスタンス.メソッド名()**

第1引数はselfにする

```python
class MenuItem:
  def hello(self):
      print("こんにちは")

menu_item1 = MenuItem()
menu_item1.hello()
```

#\_\_init\_\_メソッド
インスタンスの生成直後に処理を実行できる

`__init__`メソッドを使った場合

```python
class MenuItem:
  def __init__(self , name)
      self.name = name

menu_item1 = MenuItem("ヒレカツ")
print(menu_item1.name)
```
Git bash Error : Could not fork child process : Resource temporarily unavailable

# 動作環境

## Windows
Edition : Windows 10 Enterprise
Version : 1809
OS build : 17763.1217
System : 64bit Operating system, x64 base processor

## Git for windows
Git-2.26.2-64-bit.exe

## TortoiseGit
TortoiseGit-2.10.0.2-64bit.msi

# 不具合現象

## Git Bash起動時
Git for windowsインストール後にGit Bashを起動すると
Error : Could not fork child process : Resource temporarily unavailable (-1).
DLL rebasing may be required; see `rebaseall / rebase --help`.
というエラーが発生し起動できず
Git GUIとGit CMDは正常に起動する。
![git_bash_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520500/473cfd90-b807-7bbb-f72c-67df98aa7dc0.png)


## TortoiseGitでgit clone時
下記エラーが発生。レポジトリのクローンは一応できている様子。

0 [main] sh (12996) C:\Program Files\Git\usr\bin\sh.exe: *** fatal error - cygheap base mismatch detected - 0x12C7408/0x1317408.
This problem is probably due to using incompatible versions of the cygwin DLL.
Search for cygwin1.dll using the Windows Start->Find/Search facility
and delete all but the most recent version.  The most recent version *should*
reside in x:\cygwin\bin, where 'x' is the drive on which you have
installed the cygwin distribution.  Rebooting is also suggested if you
are unable to find another cygwin DLL.
0 [main] sh 130 dofork: child -1 - forked process 12996 died unexpectedly, retry 0, exit code 0xC0000142, errno 11
C:/Program Files/Git/mingw64/libexec/git-core\git-submodule: fork: retry: Resource temporarily unavailable
.....
.....
C:/Program Files/Git/mingw64/libexec/git-core\git-submodule: fork: Resource temporarily unavailable


git did not exit cleanly (exit code 254) (195687 ms @ 2020/05/22 10:15:15)

# 解決策
Windows10 Exploit protectionの「イメージのランダム化を強制する（必須ASLR）をオフに設定することで回避できる。私のPCはなぜかオンに設定されていた。なぜこの設定を切り替えればできるのかは今のところ不明。

コントロールパネルで「アプリとブラウザ－コントロール」と検索して開く
Exploit protectionの設定をクリック

![exploit1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520500/7e088ba0-d64c-b6ed-2b73-0885b57acc4b.png)

イメージのランダム化を強制する（必須ASLR）がオンになっている
![exploit2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520500/03189a5d-c3b3-6adf-434f-c979ee3f805c.png)

規定値を使用する（オフ）に設定して、再起動する
![exploit3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520500/252d2364-b1fb-6df4-0aed-2a132f02b958.png)
使った事ないけど、良さそうなツール

#### 英語翻訳
- Deepl  
https://www.deepl.com/en/translator  
Google翻訳よりも便利らしい  

#### webサービス開発
- IFTTT  
https://ifttt.com/  
APIがあるwebサービス(Twitter, facebook, slack, gmailなど)を繋げて、なんか作りたい時
Vueディレクティブの省略記法【初心者向け】

Vueディレクティブの省略記法をよく忘れるので、メモとして、残しておきます。

| ディレクティブ       | 省略記法 |   例   |
|:-----------------|:------------------:|:------------------|
| v-text            |  {{...}}|  \<p>{{message}}\</p>    |
| v-on            |  @|  \<a @click="onclick"> \</a>   |
| v-bind            |  :|  \<a :href="url">  \</a>   |
| v-slot            |  #|  \<template #header>  \</template>  |
【Python3】BeautifulSoupの基礎を理解する

## はじめに

Pythonの学習を始めました。
Webスクレイピングについて理解を深めたいため、自分なりにまとめてみます。

## Webの仕組み

本記事では割愛しますが、分散系の開発を行うならば、ある程度理解しておく必要があると思います。
個人的に、学習にはこちらの書籍がおすすめです。
[Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus/dp/4774142042/ref=pd_lpo_14_t_2/357-3513078-6123409?_encoding=UTF8&pd_rd_i=4774142042&pd_rd_r=7fe1ea20-e9d9-47a1-b1cc-f9c4b19fea1e&pd_rd_w=ymo17&pd_rd_wg=CJaYY&pf_rd_p=4b55d259-ebf0-4306-905a-7762d1b93740&pf_rd_r=9KK4FFTSP6VV300G2BH3&psc=1&refRID=9KK4FFTSP6VV300G2BH3)

## BeautifulSoupとは

本題です。
書籍などでは、HTMLの解析を行うライブラリと説明されています。
[公式サイト](https://www.crummy.com/software/BeautifulSoup/)も確認しましょう。特徴は以下3点。

1. ツリー構造をナビゲート、検索、変更するためのメソッドを提供している。
2. 自動的にエンコードしてくれる（BeautifulSoupがドキュメントのencodeを特定できない場合を除く）。
    1. 受信ドキュメントはUnicode
    2. 送信ドキュメントはUTF-8
3. 利用するParserを選択できる。
    1. html.parser：標準ライブラリ。処理速度は早くもなく遅くもなく。
    2. lxml：サードパーティ製ライブラリ。処理速度の速さが特徴的。
    3. html5lib：サードパーティ製ライブラリ。HTML5の文法をサポートしWebブラウザと同様の方法の解釈を行うなど高性能。処理速度は他より劣る。

## BeautifulSoupのインストール

BeautifulSoupライブラリをインストールします。

- 私はMacOSを使っているため、「pip3」コマンドを利用します。
- BeautifulSoupの最新バージョンは4.9.1です（2020/05/23現在）。

インタラクティブシェルで以下のコマンドを実行します。

```
> pip3 install BeautifulSoup4
```

importできればインストールに成功しています。
bs4はライブラリです。

```
>>> from bs4 import BeautifulSoup4
```

## BeautifulSoupを使ってWebサイトから情報抽出してみる

今回は、[YAHOO!JAPAN](https://www.yahoo.co.jp/)のニュース一覧のタイトルとURLを抽出します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546125/5b845090-9fdf-66d2-3276-45235c706d2f.png)


#### 実装すること

- requestsを利用し、サイト情報を取得する。
- BeautifulSoupを利用し、要素を解析する。
- reを利用し、正規表現で項目を取得する。
     - ブラウザの開発者ツールから取得対象のタグ構造を特定する。
     - 今回は、href属性"news.yahoo.co.jp/pickup"にマッチさせれば取得できる。
     - 正規表現を利用するため、標準ライブラリであるreモジュールをimportする。
     - [公式ドキュメント](https://docs.python.org/ja/3/library/re.html)を後で確認。
- 取得した項目から、テキスト属性とhref属性を抽出する。
 

#### コード

```python:ScrapingSample.py
import requests
from bs4 import BeautifulSoup
import re

url = "https://www.yahoo.co.jp/"

# requetsを使ってサイト情報を取得
result = requests.get(url)
# 要素を解析
bs = BeautifulSoup(result.text, "html.parser")
# リンクが"news.yahoo.co.jp/pickup"にマッチする項目を取得
news_list = bs.find_all(href=re.compile("news.yahoo.co.jp/pickup"))

# 取得した項目からテキスト属性とhref属性を抽出
for news in news_list:
      print("{0} , {1}".format(news.getText(), news.get('href')))
```
#### 実行結果

```
3府県解除 マスクの買い物客 , https://news.yahoo.co.jp/pickup/6360522
米が核実験再開を議論 米紙 , https://news.yahoo.co.jp/pickup/6360527
スバルと三菱 コロナで明暗NEW , https://news.yahoo.co.jp/pickup/6360528
抗マラリア薬 死亡リスク増かNEW , https://news.yahoo.co.jp/pickup/6360523
未明に震度4、80代女性が骨折 , https://news.yahoo.co.jp/pickup/6360529
岩手でマスク配達 今更との声NEW , https://news.yahoo.co.jp/pickup/6360521
馬術部ピンチ 殺処分避けたい , https://news.yahoo.co.jp/pickup/6360510
秋山莉奈 第2子男児を出産NEW , https://news.yahoo.co.jp/pickup/6360531
```

「NEW」も抽出されてしまっていますが、不要であればreplaceしてあげれば良いのかなと思っています（今回の実装には含めていません）。

## おわりに

簡単な内容でしたが、公式ドキュメントなども読んで、理解の幅を深めて行きたいと思います。
JSメソッド集　自分用

### 配列

配列の最後にデータを追加する
```
配列名.push(追加したいデータ)
```

配列の最後のデータを削除する
```
配列名.pop()
```
配列の最初のデータを削除する
```
配列名.shift()
```

配列の最初のデータ1,データ２を削除する
```
配列名.unshift()
```


## テンプレート文字列
「’’（バックティック）」で囲む。

### 普通の文字列のと違い
・文字列中に変数を埋め込める

```
＄{変数名}

例：const total =`<li>${item}</li>`
```
【React Native】Expoを利用した開発環境構築

# はじめに

ReactNativeを利用したアプリケーション開発を行うために、環境構築を行いたいと思います。

# Expoとは

ReactNative上で、JavaScriptのみでiOSやAndroid アプリを作る開発環境です。
アプリをQRコード経由で簡単に公開したり、共有したりすることができます。

# Expoの導入

Expoの[GetStartedページ](https://expo.io/learn)を参考に進めていきます。

## 1. Fall in Love
実際に、Snackを利用して、確認してみましょう。

## 2. Download NodeJS
パソコンにNode.jsをインストールしていない場合は、Node.jsをインストールしましょう！

[インストールページ](https://nodejs.org/)

## 3. Get the command line tool

下記のコマンドでExpoのコマンドラインツールをインストールしましょう。

`npm install expo-cli --global`

インストールが完了したら、コマンドラインで利用できるかを確認しましょう。

`expo --version`
を実行し、バージョン情報が表示されれば、インストールが完了しています。


### 4.Create your first project
Expoを利用するために、アカウントの作成を行いましょう！
[Expoのアカウント作成ページ](https://expo.io/signup)

アカウントの作成が完了したら、ターミナル上でExpoにログインしておきます。

`expo login`
とターミナルで実行すると、ユーザーネームとパスワードを聞かれるので、入力します。

下記の内容が表示されたら、ログイン完了です。
`Success. You are now logged in as ユーザー名.`


下記のコマンドで初期のプロジェクトを作成します。

```sh:Expoプロジェクト作成コマンド
expo init myNewProject
```
Expoのプロジェクト作成は、対話形式で質問に回答しながら作成していく、方式なので、質問に答えていきます。

```sh:Expoプロジェクト作成時の質問
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas 
  blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration 
```

<details><summary>**※選択項目の内容に関して**</summary><div>

◾️ Managed workflow
Expoのサポート下で簡単に開発できる
◾️ Bare workflow
Expoをほぼ利用せずに開発できる。
カスタマイズ性は高いが開発難易度は上がる

◾️ blank
blankは真っ白な画面でスタートする
◾️ tabs
画面の下にタブが表示された画面でスタートする。

</div></details>

今回は、`blank`を選択します。
時間が少々かかるので、少し待ちます。

プロジェクトの作成が完了したら、作成したプロジェクトのフォルダにコマンドで移動します。
`cd myNewProject`

そのフォルダで、下記のコマンドを実行します。
`expo start`

すると、Webブラウザが開き、QRコードが表示されると思います。
このQRを利用して、実機で動作を確認していきます。

### 5.Preview your project

iOSまたはAndroid端末にExpoのアプリをインストールします。
[iOSはこちら](https://itunes.apple.com/app/apple-store/id982107779) ・ [Androidはこちら](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www)

端末にインストールが完了した後に、アプリを利用してQRコードを読み取ることでテストできます。
※アプリを起動する端末は,実行しているパソコンと同じネットワーク内(WiFi)に接続してください。

初期の段階では、画面に「Open up App.js start working on your app!」と表示されていると思います。

上手く、起動しない場合はExpoを再起動すると上手く動作する可能性があります。

◾️ キャッシュをクリアして再起動する場合
`expo start -c`

#### シミュレータで動作させる場合
起動前に、iOS及びAndroidのシミュレーターをインストールしておく必要があります。

iOSの実機シミュレータを利用する場合は、Xcodeをインストールしてください。
Androidの実機シミュレータを利用する場合は、Android Studioをインストールしてください。

**◾️ iOSシミュレータで確認する場合**
Xcodeをインストールしているパソコンで、Expo起動時に表示される画面左の`Run on iOS simulator`を選択します。

**◾️ Androidシミュレータで確認する場合**
Android Studioをインストールしているパソコンで、Androidシミュレーターを起動します。
その後、Expo起動時に表示される画面左の`Run on Android device/emulator`を選択します。

### 6.Start coding!

上記で環境の構築は完了です。

ここから、先は`app.js`を変更し、自分のアプリを作成していきましょう！
ReactNativeでファイルをimportして動くけど型エラーが出ているとき

# 動くけどVScode上でエラーが出ている
こんなことに遭遇しました。
アプリをTypeScriptで作ろうとし、ページ遷移をつけようとreact-navigationを使っていたところ

~~~ts
import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';

type Props = {
  navigation: StackNavigationProp<RootStackParamList, 'baseList'>;
  route: RouteProp<RootStackParamList, 'baseList'>;
};
~~~
の`StackNavigationProp`の部分に赤線が出ている。
エラーを見てみると、

> エクスポートされたメンバー 'StackNavigationProp' がありません。ts(2305)

とのことらしいので、該当ファイルを見にいくと

~~~ts:node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
/**
 * Types
 */
export type {
    StackNavigationOptions,
    StackNavigationProp,           // ちゃんとexportされてる！
    StackScreenProps,
    StackHeaderProps,
    StackHeaderLeftButtonProps,
    StackHeaderTitleProps,
    StackCardInterpolatedStyle,
    StackCardInterpolationProps,
    StackCardStyleInterpolator,
    StackHeaderInterpolatedStyle,
    StackHeaderInterpolationProps,
    StackHeaderStyleInterpolator, 
  } from './types';
~~~

ちなみにここでも赤線のエラーが出ていて
> `export`の部分
宣言またはステートメントが必要です。ts(1128)

> `{`  `}` `/types`の部分
';' が必要です。ts(1005)

ここで`type`を削除すると、packageのファイルも、ページのファイルもエラーが解消されます。
ただpackageなので触らない方が無難である。
というかexport typeってTS v3.8.1から使えるはずなのに、なぜエラー表示？というのが感想。

---

ということで、`StackNavigationProp`を直接importしに行きます。
こいつは'./types'から呼びされているようなので、

~~~ts
import { StackNavigationProp } from '@react-navigation/stack';
// ⬆︎を⬇︎のように変更
import { StackNavigationProp } from '@react-navigation/stack/lib/typescript/src/types';
~~~

これで赤線のエラーが解消されました。
まだTypeScriptを触ってほんの少しですが、ものすごく型エラーで怒られるのでしょんぼりします。
アプリは動くけど、赤線エラーばっかりでどうやって解消するのか調べるところからなので、
私のように気になる人は進捗が亀の進みなってしまう・・・

もしや、このエラーが出るのってVScodeの設定の問題？
[Discord.py]進行中のプログラムの処理を中断する方法

備忘録として。
#やりたいこと
Discord.pyを使ったBotのプログラムに、以下があったとする。

```py
@client.event
async def on_message(msg):
    if msg.content.startswith("counter"):
        count = 0
        while(True):
            print(count)
            count += 1
            await asyncio.sleep(1)
```
`counter`と送信されてからの秒数を一秒ごとにprintするプログラム。
`while(True)`でループしている上、中に`retuen`とか`break`とかする文もない。
なので、一度実行されたら延々と数字をカウントし続ける。これを強制終了させたい。

#どうすればよいか
Discord.pyが使っているasyncioモジュールは、コルーチンが実行される度にtaskを形成する。
なので、関数内に[`asyncio.current_task()`](https://docs.python.org/ja/3/library/asyncio-task.html#asyncio.Task.current_task)を記述することで実行されているコルーチンから、自分自身のtaskオブジェクトを取得できる。
その返り値をグローバル変数に代入し、それを参照して[`task.cancel()`](https://docs.python.org/ja/3/library/asyncio-task.html#asyncio.Task.cancel)する。

#コードを書くと
`stop`と送信することで動きを止めたい場合以下の様になる:

```py
#import asyncio をしておく
count_task = None
@client.event
async def on_message(msg):
    global count_task
    if msg.content.startswith("counter"):
        count = 0
        count_task = asyncio.current_task()
        while(True):
            print(count)
            count += 1
            await asyncio.sleep(1)
    elif msg.content.startswith("stop"):
        count_task.cancel()
```
#最後に
これはあくまでも最低限の処理であり、`counter`や`stop`が連続で送信されたり(Botが入っている複数のサーバーで送信されるなど)すると例外が発生する。
複数のtaskを扱いたい場合は、taskオブジェクトを辞書に入れて管理するなどの工夫が必要。
また、正常にキャンセルされた場合でも、[asyncio.CancelledError](https://docs.python.org/ja/3/library/asyncio-exceptions.html#asyncio.CancelledError)が出るので、それをエラーハンドラで拾う処理も書くと良い。
straceの実行結果をgrepしたい

以下のように標準エラー出力を標準出力にリダイレクトすることでgrepができるようになります。

```
strace <実行したいコマンド> 2>&1 | grep <キーワード>
```

実行例：

```
$ strace -ff -s 15000 date 2>&1 | grep AT_FDCWD
openat(AT_FDCWD, "/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
openat(AT_FDCWD, "/lib/x86_64-linux-gnu/libc.so.6", O_RDONLY|O_CLOEXEC) = 3
openat(AT_FDCWD, "/usr/lib/locale/locale-archive", O_RDONLY|O_CLOEXEC) = 3
openat(AT_FDCWD, "/etc/localtime", O_RDONLY|O_CLOEXEC) = 3
```
JavaScriptで必ず出てくるDOMの正体とは

# DOMとは？
いきなり結論から言います。
DOMとは階層構造のことです。
例をみていきましょう。
高校生の生徒会を想像してみてください。
頂点には生徒会長がいて、その下に委員長が複数存在します。
そしてその委員長の下にはたくさんの委員が存在します。
この階層構造自体をDOMと呼ぶのです。
これをHTMLに置き換えると
頂点（生徒会長）＝body
頂点の下（委員長）＝divが複数
divの下（委員）＝pなどたくさん

この階層構造がDOMです。

# DOMに出てくるノードって何？
結論、頂点とかを指し示す名前みたいなものです。
先ほど出した具体例でまた考えてみます。
頂点（生徒会長）＝親ノード（bodyのこと)
頂点の下（委員長）＝基準ノード、兄弟姉妹ノード（divのこと）
divの下（委員）＝子ノード（pなどのこと）
です。

この言い方はしっかり覚えておいた方がいいです。
次回はボタンの取り扱いについてやります。
ちゃんと公式ドキュメントを参考にしたNginx構築手順

# 構築環境

```bash
$ cat /etc/redhat-release
CentOS Linux release 8.1.1911 (Core)
```

# Nginxインストール
[nginx公式手順][引用１]

## 事前準備
リポジトリと拡張パッケージ管理を操作するためのツールをインストールする

```bash
$ yum install yum-utils
```

## セットアップ設定ファイルの作成

yumリポジトリーをセットアップするため、以下の内容で/etc/yum.repos.d/nginx.repoという名前のファイルを作成する

```nginx.repo:/etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
``` 

## 使用するNginxパッケージのリポジトリを有効化する

安定版のNginxパッケージをインストールする場合は、安定版のリポジトリを有効にする

```bash
$ yum-config-manager --enable nginx-stable
```

最新版のNginxパッケージをインストールする場合は、最新版のリポジトリを有効にする

```bash
$ yum-config-manager --enable nginx-mainline
```

## Nginxをインストールする

以下のコマンドで、Nginxをインストールする

```bash
$ yum install nginx
```

## Nginxの自動起動設定を有効にする

```bash
$ systemctl enable nginx.service
```

## Nginxを起動する

```bash
$ systemctl start nginx
```

インストール完了！

[引用１]:[https://nginx.org/en/linux_packages.html#RHEL-CentOS]
mypyで特定のディレクトリだけチェックから外す方法

```bash 
src/
   - pb/
   - hoge.py
   - main.py
```

みたいなディレクトリ構造がある時に、 `src/pb` だけmypyのエラーを無視したい場合、

```ini:mypy.ini
[mypy-src.pb.*]
ignore_errors = True
```

とすれば良いです。個人的には、mypyとgRPCを併用する時によく使います。

## Reference
- https://github.com/python/mypy/issues/6155
Flutterの公式ドキュメントを読んで理解する 〜Building layouts/Creating responsive apps〜

# 今回読んだページ
https://flutter.dev/docs/development/ui/layout/responsive

このページは短め

# Creating responsive apps
レスポンシブアプリは、スクリーンやウィンドウのサイズと形に応じてUIをレイアウトする。
これは、同じアプリが様々なデバイス（例えば、スマートウォッチ、スマートフォン、タブレット、ラップトップ・デスクトップコンピューターなど）で起動する際に特に必要不可欠である。
ユーザーがラップトップ・デスクトップのウィンドウをリサイズしたときや、スマートフォン・タブレットの向きを変えた時、アプリはそれに応じてUIを再配置する必要がある。

Flutterを使うと、デバイスの画面サイズと向きに自己適応するアプリを作ることができる。

レスポンシブデザインでFlutterアプリを作る2つのアプローチがある。

#### Use the `LayoutBuilder` class
その`builder`プロパティから、`BoxConstraints`オブジェクト変えられる。
表示するものを決定するために、制約プロパティを調べる。
例えば、`maxWidth`が幅のブレークポイントより大きければ、左側にリストを持った行を持つ`Scaffold`オブジェクトを返す。もし狭ければ、そのリストを含むドロワーを持つ`Scaffold`オブジェクトを返す。
デバイスの高さ、アスペクト比、その他のプロパティに基づいて調整することもできる。
制約が変わった時（例えば、ユーザーが端末を回転させた、または、NougatのタイルUIにアプリを配置したときなど）は、build関数が実行される。
>Nougat（ヌガー）はAndroid 7の名称で、アプリを同時に2つ表示する機能があるらしい。

#### Use the `MediaQuery.of()` method in your build functions
これにより、現在のアプリのサイズや向きが得られる。
これは、特定のWidgetのサイズだけでなく、完全なコンテキストに基づいて決定したいときにより役立つ。
繰り返しだが、これを使うと、ユーザーが何らかの方法でアプリのサイズを変更したときにビルド関数が自動的に実行される。

レスポンシブUIを作るための その他の便利なWidgetやClass:

* AspectRatio
* CustomSingleChildLayout
* CustomMultiChildLayout
* FittedBox
* FractionallySizedBox
* LayoutBuilder
* MediaQuery
* MediaQueryData
* OrientationBuilder

より詳しい情報は、Flutterコミュニティからの投稿を含む、以下のリソースをみよう。

* [Developing for Multiple Screen Sizes and Orientations in Flutter by Deven Joshi](https://medium.com/flutter-community/developing-for-multiple-screen-sizes-and-orientations-in-flutter-fragments-in-flutter-a4c51b849434)
* [Build Responsive UIs in Flutter by Raouf Rahiche](https://medium.com/flutter-community/build-responsive-uis-in-flutter-fd450bd59158)
* [Making Cross-platform Flutter Landing Page Responsive by Priyanka Tyagi](https://medium.com/flutter-community/making-cross-platform-flutter-landing-page-responsive-7fffe0655970)
* [How to make flutter app responsive according to different screen size?, a question on StackOverflow](https://stackoverflow.com/questions/49704497/how-to-make-flutter-app-responsive-according-to-different-screen-size)
state と status の違い

同じ「状態」だが、関心事が異なる。

- state: オブジェクトに内在し、そのオブジェクトの振る舞いを規定する。
- status: オブジェクトの利用者のためのセマンティックな情報。

つまり、state はオブジェクトそのものの方に関心があるのに対し、status はオブジェクトそのものではなく、利用者がそれとどうインタラクションするかの方に関心がある。

イメージ:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102896/8f62f5e8-d451-2ea0-fb81-c618140be668.png)

ただし、実際はどちらに関心があるかは白黒ではなくグラデーションである場合が多いので、命名するときはどちらにより比重があるかで決めればよい。

### 例
#### state
- 固体 / 液体 / 気体
- プロセスの running / sleep / stopped / zombie, etc.

#### status 
- UIにおいて、利用者に対して「状態」を示すものは必ず status
  - status indicator, status bar, status lamp
- HTTP response status
- 駐車場の「空」/「満」
- タスクの todo / in progress / done

#### 割とどちらでもいいもの
- 記事の draft / published
セキュリティSSLについての素人覚書01

セキュリティSSLについてのど素人メモ書き
(この記事はさくらのSSLより引用しました。こういうことが苦手で頭に入れるためにメモしただけなので、引用元を見た方がはるかに理解しやすいと思います（すみません）。　https://ssl.sakura.ad.jp/column/ssl/)

今この記事を読ませて頂きましたが、難しい、、
(SSL証明書を取得しよう https://qiita.com/poruruba/items/59d6197166bb09049f53)


# SSLとは
>"意外と知られていないことですが、みなさんが利用しているインターネットは悪意のある第三者が通信の中身を盗み見て悪用することが可能です。閲覧しているホームページのアドレスや、掲示板に書き込んだ内容、ショッピングサイトで入力したクレジットカード番号やパスワードなども盗み見ることが可能です。これでは安心してインターネットショッピングができない、ということでSSLという仕組みが生まれました。例えば、あなたが会社のパソコンからアクセスしている場合、社内のネットワーク管理者なら、あなたの通信を自由に見ることができます。そして、それは比較的簡単にできてしまいます。飲食店などで利用できる無料Wi-Fiなども、ちょっとした知識があれば管理者が非SSLの通信を盗み見ることが可能です。"

> "データの改ざんとなりすましの防止という機能"


* 非SSLの通信を盗み見る方法？



## 第三者機関「認証局」による保証
- 「○○.jpを名乗るこのサイトは本当に○○.jpですよ」と保証してくれる組織
## 証明書を利用するまでの工程

秘密鍵を生成する
秘密鍵を用いてCSRを生成する
CSRを用いて証明書を生成する
秘密鍵と証明書をセットにしてWebサイトの通信を暗号化する


## SSL通信

ブラウザ：SSL通信をリクエストする
サーバー：SSLサーバー証明書を送付する
ブラウザ：受け取った証明書の公開鍵を使って共通鍵を暗号化し、サーバーに送付する
サーバー：受け取った共通鍵を、秘密鍵を使って復号する
ブラウザ/サーバー：一致した共通鍵を使って送受信するデータを暗号化、復号して暗号化通信を成立させる


# SSLサーバー証明書の違い > 自分が今調べてることにはあまり関係なかった
（引用元　SSLサーバー証明書の違い　https://ssl.sakura.ad.jp/column/attestation-level/）

SSLサーバー証明書は、認証レベルにより3つ
*「ドメイン認証」ドメインに登録されている登録者を確認　信頼性普通
*「企業認証」ドメインに加えWebサイトを運営している組織の実在性を証明　信頼性中
*「EV認証」企業の実在性に加えて、所在地の認証 信頼性高
【GCP】Associate Cloud Engineerに合格！（202004時点）

　こんにちは、みなさまいかがお過ごしでしょうか。
　２回目でやっと合格したので、概要と感想等書きたいと思います。

#Associate Cloud Engineerって？
　[Googleさんの認定資格](https://cloud.google.com/certification/)で、最近どんどん増えてる中のひとつで、
　唯一の[アソシエイト資格](https://cloud.google.com/certification/cloud-engineer)です。（2020年05月現在）
　公式サイトには、こんな感じで書いてありました。
>クラウドに不慣れな方にとって出発点として最適であり、プロフェッショナル レベルの認定資格への準備としてご利用いただけます。

　**試験範囲**
　　GCP全体ををまんべんなく
　　https://cloud.google.com/certification/guides/cloud-engineer/

　**試験時間と問題数**
 　　2時間　50問
　　意外とあせるから、注意です。
 
　**受験費用**　　
　　USD 125.00（¥13,000くらい？）

　**受験会場**
　何箇所かあるけど、予約いっぱいのこともあるから、
　受けるって決めたら、[もう申し込んじゃいましょ](https://www.webassessor.com/wa.do?page=publicHome&branding=GOOGLECLOUDJP)！
　英語ですが、[自宅受験](https://www.webassessor.com/wa.do?page=certInfo&branding=GOOGLECLOUDJP)も解禁されたみたいです。（2020年05月現在）
　ちょっと目をPCからそらすと怒られるそうですが、ありがたいサービスですね。

# 経緯
　GCPの会社に入って半年くらいで、他のクラウドサービスの知識も浅め…
　基本情報は持ってるけど、業務では、BigQuery周りが中心だから、
　他のもちゃんと知っておきたいなあ…みたいな感じで、
　勉強を初めて２ヶ月でとりあえず1回受験。結果…落ちました！
　まあ、そんな時もあるさ（受験代はばかにならないから気をつけましょう★
　新年度が始まり、これを契機にもう一度受けようと勉強して、受かりましたー！！！！！

# 勉強方法
　**目標**
　 - クラウドって何？から理解すること。
　 - GCPのサービス全体をまんべんなく触る
　 - GCPの特性を理解する
　 - 好きなサービスを見つける
　
　**本**　
　まず、こちらの本をまず何度も読みまして、GCPって何を理解したつもりでした。（笑）
　全体をまんべんなく体系的に説明されている本ですが、
　私には、中身が頭に入ってきにくく、少し情報が古いのもあり、
　さらっと読んでみるのもいいかなという感じでした。
　　・[Google Cloud Platform エンタープライズ設計ガイド](https://www.amazon.co.jp/dp/4822257908)
　

　次に、GCPを動かしたいということで、
　登録からこちらの本を参考にいろいろ作ってみました。
　とにかくクラウドに触ることを意識しました。
　将棋ゲームを作ったりしながら、いろいろ作るのはやっぱ楽しいですね。
　　・[プログラマのためのGoogle Cloud Platform入門 
　　　サービスの全体像からクラウドネイティブアプリケーション構築まで](https://www.amazon.co.jp/dp/4798137146)
　

　**サイト**　
　[模擬問題集](https://cloud.google.com/certification/practice-exam/cloud-engineer)は、定期的に受けて、
　自分のレベルを把握するためだけに使うのがよかったです。（問題についての復習はしない）

　資格を受けるんだから、Googleのドキュメントもちゃんと読もうということで、読み込みました。
　私は、[Googleさんのこんな感じのベストプラクティス](https://cloud.google.com/docs/enterprise/best-practices-for-enterprise-organizations?hl=ja)を試験ガイドにそった内容を検索しながら写経して、覚えました。
　
　また、以下のようなサービスも使いながら、理解を深めました。
　Couseraは初めて使ったので、海外のサイトだからとクレジットカード会社に、
　カードを止められ、課金が怖くなったりと事件はありましたが（笑）
　解説とQwiklabsで実戦形式の問題やミニクイズがあるので、ためになりました！
　・Cousera
　　[Google Cloud Platform Fundamentals: Core Infrastructure](https://www.coursera.org/learn/gcp-fundamentals),
　　[Cloud Architecture with Google Cloud プロフェッショナル認定](https://www.coursera.org/professional-certificates/gcp-cloud-architect)

　他のサイトの合格記も参考にさせていただきながら、こんなのも見つけたので、解いてみたり。
　・[模擬問題集？](https://googlecloud.4watcher365.dev/practice-exam/)　

# その他
　資格に受かるためには、ドキュメントの読み込みや、
　実際に触れたり、業務で使うことの大事さを感じました。
　使えば使うほど、従量課金されていくので…。
　１回目落ちたのは、公式試験ガイドの読み込みが甘かったのが原因ですね。
　公式試験ガイドから、Googleさんの一押しポイントをしっかり掴むために、
　公式ドキュメントを読み込んだのが合格できた一因かなと思ってます。
　実際に業務で使うことのないようなサービスでも知っているのと知らないのでは、
　大きな差になります。なので、ちゃんと受かるまで、勉強してよかったです。
　でも次の試験は、一発合格したいなあ。
単位行列と逆行列 : 線形代数をPythonで<4>

#線形代数
理系大学で絶対に習う線形代数をわかりやすく、かつ論理的にまとめる。ちなみにそれをPythonで実装。たまに、Juliaで実装するかも。。。
・Pythonで動かして学ぶ！あたらしい数学の教科書 -機械学習・深層学習に必要な基礎知識-
・世界基準MIT教科書 ストラング線形代数イントロダクション
を基に線形代数を理解し、pythonで実装。

#環境
・JupyterNotebook
・言語：Python3, Julia1.4.0

#単位行列

```math
E = \begin{pmatrix}1 & 0\\0 & 1\end{pmatrix},\begin{pmatrix}1 & 0 & 0\\0 & 1 & 0\\0 & 0 & 1\end{pmatrix}
```
のような左上から右下にかけて対角線上に1が並び、そのほかの要素は0になるという行列である。

n次正方行列に対して、同じ要素数の単位行列っをかけたとしても出力される値は同値となる。さらに積の順番は問わない。

```math
AE = \begin{pmatrix}a & b\\c & d\end{pmatrix}\begin{pmatrix}1 & 0\\0 & 1\end{pmatrix}=\begin{pmatrix}a & b\\c & d\end{pmatrix}=\begin{pmatrix}1 & 0\\0 & 1\end{pmatrix}\begin{pmatrix}a & b\\c & d\end{pmatrix}=EA
```

###単位行列のPythonコード

```python
import numpy as np

# print("2×2単位行列は")
print(np.eye(2))
# print("3×3単位行列は")
print(np.eye(3))
# print("4×4単位行列は")
print(np.eye(4))
```

```terminal
#実装
2×2単位行列は
[[1. 0.]
 [0. 1.]]
3×3単位行列は
[[1. 0. 0.]
 [0. 1. 0.]
 [0. 0. 1.]]
4×4単位行列は
[[1. 0. 0. 0.]
 [0. 1. 0. 0.]
 [0. 0. 1. 0.]
 [0. 0. 0. 1.]]
```


###単位行列のJuliaコード

```julia
using LinearAlgebra
Matrix{Int}(I, 2, 2) 
Matrix{Int}(I, 3, 3) 
Matrix{Int}(I, 4, 4) 
```

```terminal
2×2 Array{Int64,2}:
 1  0
 0  1

3×3 Array{Int64,2}:
 1  0  0
 0  1  0
 0  0  1

4×4 Array{Int64,2}:
 1  0  0  0
 0  1  0  0
 0  0  1  0
 0  0  0  1
```

#逆行列
逆行列は、

```math
AA^{-1} = A^{-1}A = E
```
という関係を持つものである。例を示すと、

```math
A =\begin{pmatrix}1 & 1 \\1 & 2\end{pmatrix},
B =\begin{pmatrix}2 & -1 \\-1 & 1\end{pmatrix}
```
という二つの行列があるときに対して、ABの積を求める。

```math
AB =\begin{pmatrix}1 & 1 \\1 & 2\end{pmatrix}\begin{pmatrix}2 & -1 \\-1 & 1\end{pmatrix}=\begin{pmatrix}1 & 0\\0 & 1\end{pmatrix}
```
これより

```math
AB = E = BA \Longrightarrow B = A^{-1}
```

#行列式

```math
A = \begin{pmatrix}a & b\\c & d\end{pmatrix}
\Longleftrightarrow
\begin{vmatrix}A\end{vmatrix}= det A = ad-bc
```

さらに2×2行列の時には、

```math
A^{-1} = \frac{1}{ad-bc}\begin
{pmatrix}d & -b\\-c & a\end{pmatrix}
```
と表すことができ、この時、

```math
ad-bc = 0 \Longleftrightarrow A^{-1}は存在しない
\\
ad-bc \neq 0 \Longleftrightarrow A^{-1}が存在する。
```
と書くことができる。

###行列式を含めた逆行列のPythonコード

```python
import numpy as np


a = [input().split() for i in range(2)]
#数字入力
#=>1 2
#=>3 4

a = np.array(a)
print(a)
#=>[['1' '2']
#   ['3' '4']]

a = a.astype(np.float64)
print(np.linalg.det(a))
#=>-2.0000000000000004

if np.linalg.det(a) != 0:
    print(np.linalg.inv(a))
else:
    print("No exist")
#=>[[-2.   1. ]
#   [ 1.5 -0.5]]
```
実際には、if文を用いなくても`np.linalg.inv()関数`でそのまま計算しても、逆行列が存在しない場合にはエラーが起こる。ただ、行列式を今回は使いたいので、`np.linalg.det()関数`を用いて書いた。

###行列式を含めた逆行列のJuliaコード

```julia
using LinearAlgebra
A = [1 2; 3 4]
if det(A) == 0
    print("No exist")
else
    inv(A)
end

#=>2×2 Array{Float64,2}:
# -2.0   1.0
#  1.5  -0.5
```
`inv()関数`によって逆行列はすぐに求められる。
#最後に
次は、線形変換やるつもりなので、グラフ強くなりたい人は。ぜひ。