OmniAICreator/Qiita-1.07M huggingface dataset:
プログラミングの勉強を始めた頃の自分に言いたい事

# エラーを読め

- 英語だからと言ってエラー文をコピーしてそのまま検索することはNG
- 内容を知った上で対応方法を検索するようにしよう
- どうせ英語なんかスラスラ読めないからGoogle翻訳を使おう
- ちなみかなりの確率でエラー文に対応方法や次に実行するコマンドなどが書いてる

# ソースを読め

- 手本になりそうなソースを見つけて読む
- わからない処理は調べる
- ゆっくりでいいから読む
- 時間をかければ読めることを知る

# 公式ドキュメントを読め

- 大体のことは公式ドキュメントに記載されている
- そして公式ドキュメントだけあってやはりわかりやすく記載されている
- 英文のドキュメントを先人の皆さんが翻訳してくれているものもある
- 技術書を買うよりまずは公式ドキュメントを読もう
jenkinsのPIPELINE実行中にで作業ディレクトリを移動する

`dir ()`を使えば良い

```
Jenkins ver. 2.190.1
```

```
# 作業ディレクトリを移動する
dir ("${JENKINS_HOME}/testdir") {
   # 環境変数を更新する
   env.WORKSPACE = "${JENKINS_HOME}/testdir"
}
```

ディレクトリがない場合はコマンドラインからディレクトリを作成しておく。

```
# shellscriptを実行する
sh "mkdir -p ${JENKINS_HOME}/testdir"
```

# 参考
[Jenkins Pipeline メモ](https://qiita.com/troter/items/ee0b066d3ef928bfa7cd)
[Jenkinsではジョブを並列実行すると`@`がついたworkspaceが複数作成されるので容量に気をつけよう](https://www.mpon.me/entry/2018/01/31/200000)
[Build creates new workspace@2 (and so on) when option concurrent builds NOT checked](https://issues.jenkins.io/browse/JENKINS-21622)
JS~スプレッド構文~

#概要

スプレッド構文についての記事です。
スプレッド構文は配列内での使用と関数内での使用があります。

#スプレッド構文

配列を展開して渡すことができます。

1.配列内
fruitsの配列内の要素をfruit2に追加します。


```index.js
 const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];
 const fruits2= ["パパイヤ", "パイナップル", "みかん", ...fruits];
 
 console.log(fruits2);
//["パパイヤ", "パイナップル", "みかん", "りんご", "ばなな", "ぶどう", "いちご"]
```

forEachを使用しても結果は同じでした。
このように繰り返し処理を使用して要素の展開をせずにfruits2に追加することができます。

```index.js
const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];
const fruits2= ["パパイヤ", "パイナップル", "みかん"];

fruits.forEach((fruit) =>{
 console.log(fruit);
 fruits2.push(fruit)
});

console.log(fruits2);

//["パパイヤ", "パイナップル", "みかん", "りんご", "ばなな", "ぶどう", "いちご"]
```

2.関数での使用

またこのスプレッド構文は関数内でも使用することができます。

関数に値を渡すときに配列を展開して渡す方法です。
関数に引数が複数ある場合、配列の要素を1つずつ展開して渡すのは記述量も多くなり大変です。そこで[...]を使用することで配列の要素を1つずつ渡すことができます。

```index.js
function fruitsOrder(f1,f2,f3,f4) {
  console.log(f1,f2,f3,f4);
}
 
const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];

fruitsOrder(...fruits);
//りんご ばなな ぶどう いちご
```

```index.js
function fruitsOrder(f1,f2,f3,f4) {
 const fruits2 = [f1,f2,f3,f4];
 fruits2.forEach(fruits3=>{console.log(`${fruits3}です`);});
}
 
const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];

fruitsOrder(...fruits);

//りんご です
//ばななです
//ぶどうです
//いちごです
```

```index.js
function fruitsOrder(fruit) {
　console.log(`${f}です`);
}

const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];

fruits.forEach(fruit => {
 fruitsOrder(fruit);
});
//りんごです
//ばななです
//ぶどうです
//いちごです
```
💡話は聞かせてもらった JavaScriptは滅亡する！

というわけで、**「2035年あたりに互換の切られた後継言語に移り、2050年あたりにJavaScriptは廃止される」**と妄想しているので、ロードマップや後継言語の仕様を適当に予言🧙‍♂️していきます。
この手の大きな話題を語るには知識不足すぎるので、仕様策定とかブラウザベンダー間の政治に詳しい有識者の人の突っ込みはもちろんのこと、そうでない人も気軽にコメントしてくださると嬉しいです。

# 何故滅亡すると思うのか
最初のきっかけはJavaScriptのクラスのprivateプロパティの宣言方法が**「#」**になったことですね。理由については[素晴らしい解説記事](https://blog.jxck.io/entries/2019-03-14/private-class-field.html)を見て納得していたんです。ただ、一方で「いやいや、今後拡張していくにあたってデコレータまみれは厳しいでしょう。過去の構文が弊害になってくるとなると、そろそろJSも一度リセットすべき段階かもしれないな……」とも感じました。
プログラミング言語は基本的に後方互換性を大事にしていますが、JavaScriptは輪をかけて大事にしています。よって、このまま年を重ねて機能が増大していくのと連動して、肥大化しすぎと感じる人々の増加と改革の動きが起きるのは必然でしょう。あとはタイミングの問題で、自分のはInternetExplorerの終了から動きが始まると推測しています。


# ロードマップ

|年|出来事|
|---|---|
|～2025年|IE11全廃後を見据えて、後方互換性を切る大胆な改革を模索する動きが水面下で始まる|
|2025年～2030年|主要ブラウザベンダー間の政治で揉める。Chromeが先行独自実装を本番ブラウザに搭載し始める|
|2030年～2035年|ようやく後継言語の概要が纏まる。主要ブラウザに搭載開始|
|2035年～|後継言語の普及開始|
|～2050年|JavaScriptが主要ブラウザから全廃|

# 変更点
## 言語名の変更
**これは間違いない。** 「Web Script」あたりであっさり決着しそう。……あ、でも普通すぎて検索性が悪そうだし、権利関係の兼ね合いもあるので、今流行りの造語系になるかも。じゃあ「W3bS」で🙄

## JSのみの破壊的変更に留めるか、HTML/CSS/JSを巻き込むレベルの大改革するかで揉める
個人的には五分五分だと思ってるので「揉める」という所までストップ。
昔ならいざ知らず、「今更GUI周りを言語仕様に直結させて肥大化させるのはどうか」というのも凄い分かります。
……が、今なお最大の用途はブラウザ上のGUI構築だし、JSからHTML/CSS操作するのが常態化してて、疎結合すぎ／仕組みも文法もバラバラでしんどいってのもあるので、もうちょっと密になっていいのではないかという感覚もあります。
ただ、この系譜は今の仕様と距離がありすぎて、まったくの別言語＆フレームワークで作る流れになるかもという思いもあります。WASM次第。あとこの系譜はJSX的なGUIコンポーネントのためのテンプレートファイル（？）の言語レベルでのサポートも入りそう。

## ES2015の時点で存在する主要機能は全て残る。クラスも残る。
ES2015以降のみとなるとかなり思い切ったように思えますが、あくまで**使用策定が2025年前後に行われ始める**という前提のため、JSからの移行を意識して**過去10年の仕様ぐらいは流石にカバーするだろう**という読みです。

## 型を言語レベルでどこまでやるかで揉める
こちらもどう転ぶんか読み切れないので揉めるという所まででストップ。
互換性切るんだったら……ということで、TypeScriptベースでかなり取り込みは行われるかと思いますが、どこまでやるか、どういう仕様にするかでめちゃくちゃ揉めそう。

# 次期JSの動きが活発化しそうなターニングポイント
- **IE11終了によって実装の足並みが揃う（2025年）**
- WASM系の進展

# 後書き
後継言語になっても既存のユーザーを移行させる必要があるので、極端な変更はできないでしょうね～。一方、切らなさすぎると後継言語の必要性が薄れてしまうので、そこらへんの激しい綱引きが今後10年ぐらいで見られると思っています。
Modelerデータ加工Tips#08コード

## Modelerデータ加工TIPS＃08 サンプルコード
Nヶ月後の日付を求めるフィールド作成

```python:Clem式
if datetime_month(起算日)+6 > 12
 # Nヵ月後が次の年になる場合
 then if member(datetime_month(起算日) +6-12, [4 6 9 11]) and datetime_day(起算日) = 31
  # 小の月
  then datetime_date(datetime_year(起算日)+1, datetime_month(起算日)+ 6 -12, 30)
  else if datetime_month(起算日)+6-12 = 2 and member(datetime_day(起算日), [29 30 31])
   then if (datetime_year(起算日)+1) rem 4 = 0 and ((datetime_year(起算日)+1) rem 100 /= 0 or (datetime_year(起算日)+1) rem 400 = 0)
    # 2月うるう年
    then datetime_date(datetime_year(起算日)+1, 2, 29)
    # 2月平年
    else datetime_date(datetime_year(起算日)+1, 2, 28)
   endif
   # 大の月
   else datetime_date(datetime_year(起算日)+1, datetime_month(起算日)+6-12, datetime_day(起算日))
  endif
 endif
 # Nヵ月後が年内の場合
 else if member(datetime_month(起算日)+6, [4 6 9 11]) and datetime_day(起算日) = 31
  # 小の月
  then datetime_date(datetime_year(起算日), datetime_month(起算日)+6, 30)
  else if datetime_month(起算日)+6 = 2 and member(datetime_day(起算日), [29 30 31])
   then if datetime_year(起算日) rem 4 = 0 and (datetime_year(起算日) rem 100 /= 0 or datetime_year(起算日) rem 400 = 0)
    # 2月うるう年
    then datetime_date(datetime_year(起算日), 2, 29)
    # 2月平年
    else datetime_date(datetime_year(起算日), 2, 28)
   endif
   # 大の月
   else datetime_date(datetime_year(起算日), datetime_month(起算日)+6, datetime_day(起算日))
  endif
 endif
endif
```

## Modelerデータ加工TIPS＃08 サンプルコード2
パラメータを使ってスーパーノード化する場合

```python:Clem式
if datetime_month(起算日)+'$P-month' > 12
 # Nヵ月後が次の年になる場合
 then if member(datetime_month(起算日)+'$P-month'-12, [4 6 9 11]) and datetime_day(起算日) = 31
  # 小の月
  then datetime_date(datetime_year(起算日)+1, datetime_month(起算日)+'$P-month'-12, 30)
  else if datetime_month(起算日)+'$P-month'-12 = 2 and member(datetime_day(起算日), [29 30 31])
   then if (datetime_year(起算日)+1) rem 4 = 0 and ((datetime_year(起算日)+1) rem 100 /= 0 or (datetime_year(起算日)+1) rem 400 = 0)
    # 2月うるう年
    then datetime_date(datetime_year(起算日)+1, 2, 29)
    # 2月平年
    else datetime_date(datetime_year(起算日)+1, 2, 28)
   endif
   # 大の月
   else datetime_date(datetime_year(起算日)+1, datetime_month(起算日)+'$P-month'-12, datetime_day(起算日))
  endif
 endif
 # Nヵ月後が年内の場合
 else if member(datetime_month(起算日)+'$P-month', [4 6 9 11]) and datetime_day(起算日) = 31
  # 小の月
  then datetime_date(datetime_year(起算日), datetime_month(起算日)+'$P-month', 30)
  else if datetime_month(起算日)+'$P-month' = 2 and member(datetime_day(起算日), [29 30 31])
   then if datetime_year(起算日) rem 4 = 0 and (datetime_year(起算日) rem 100 /= 0 or datetime_year(起算日) rem 400 = 0)
    # 2月うるう年
    then datetime_date(datetime_year(起算日), 2, 29)
    # 2月平年
    else datetime_date(datetime_year(起算日), 2, 28)
   endif
   # 大の月
   else datetime_date(datetime_year(起算日), datetime_month(起算日)+'$P-month', datetime_day(起算日))
  endif
 endif
endif
```
MVC ルーティングについて

#  “初学者向け基礎知識”<br>MVCにおけるルーティングについて
ここではルーティングの意味と、MVC各機能の詳細について触れます。
大まかな概要部分については、下記の記事でまとめました。
https://qiita.com/TechOtome/items/bb7886fa9fcb7e0a5c18

##MVCの処理の流れ
<b>図1.リクエストからレスポンスまでの処理の流れ</b>
![MVCの流れ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/5fddbbaf-dd22-d983-4b1e-4b29bd570e48.jpeg)

## 説明の前に
ここでは、Ruby on Railsを用いたMVCの記述を紹介しています。
・Ruby: プログラミング言語の一つ。記述がシンプルで分かりやすいことから人気。大きなWEBアプリーケーションにも小さなプログラムにも対応できる。
・Ruby on Rails: Rubyで作られた”フレームワーク”のこと。
・フレームワーク:WEBアプリを作成する上で必要なツールを準備する必要があるが、
フレームワークは既に”必要となる作業やリソース”を用意している。簡潔に言えば、フレームワークを使って開発した方が作業が減って楽。


## ルーティングについて
一言で書くと
<b>”クライアントからのリクエストの処理を振り分ける。”</b>

仮にユーザーが”A.com”というURLをクリックしたら、”A”というページを表示する(レスポンスとして返す)ように処理を振り分けます。
Twitterであれば「新しいツイートをする」「プロフィール画面を表示する」「フォロワー一覧を見る」「フォロワーのツイート一覧を見る」などなど。さまざまな処理がありますが、これらは全て一度ルーティングにリクエストが送られて、どのような処理をするのか振り分けてから、コントローラーからレスポンスが送られてユーザーが受け取ることができます。

###実例)ルーティングでトップページを見るには？
リクエストと言っても、具体的な中身がイメージしにくいと思います。
例えば”Tweet”というアプリがあって、そのトップページを見たいというリクエストがあった場合のルーティングは下記の記述になります。

```bash
get ’/tweets’, to: ’tweets#index’
```

上記の記述は3つに分けることができます。
またそれぞれの意味も一緒に記述します。
・get　→HTTPメソッドの”GET”
・/tweets　→URIパターン(URIとURLは別のものですが、WEBページのアドレスではURIもURLも同じ意味を指します。)
(※URI解説参照:
https://webtan.impress.co.jp/e/2010/03/09/7539)
・tweets#index　→リクエストの行き先＝tweetsというコントローラ名のindexアクション


<b>ルーティングでは、リクエストで”HTTPメソッド”と”URI”パターンを受け取りリクエストの行き先を記述します。</b>

```bash
HTTPメソッド ‘URIパターン’, to ‘コントローラー名#アクション名’
```

## HTTPメソッドとアクションとは？
ここで、MVCの記述における重要な2つの用語を簡潔にまとめます。
<b>1.HTTPメソッド</b>
HTTPメソッド:HTTP通信の中で行いたい処理の種類のこと。HTTPリクエストメソッドとも言う。8つ存在する。
HTTP通信:WEBアプリはインターネットを通じて利用することができる。その時のデータの送受信の通信方法をHTTP通信と呼ぶ。

<b>図2.代表的なHTTPメソッド４つ</b>
![02_http method.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/d532c82c-f97b-78dc-3ecb-f8ba70ad93e5.jpeg)

<b>2.アクション</b>
アクション:MVCにおけるコントローラー内の処理の種類のことを言う。コントローラーではルーティングから受け取ったリクエストに対応する処理をする。

<b>図3.MVCのコントローラーアクション</b>
![02_action_name.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/78d32fde-87bc-659a-cd9b-5c31e5b6a777.jpeg)


##終わりに
MVCのメリットの一つに「処理の記述が整理されている」点がありますが、このようにアクション名でどんな処理をするのかが理解できます。
MVCを使ったアプリ開発では、HTTPメソッドとアクション名を理解することがとても重要です。
ターミナルコマンド　heroku編　(備忘録)

```rb：teerminal
% env | grep PAY
```
*PAYのつく環境変数を表示

```rb：teerminal
% git push heroku master --force
```
*強制的にプッシュ

```rb：teerminal
% heroku config:set PAYJP_SECRET_KEY=sk_test_＊c＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
```

*環境変数設定
GASではなくVBAが使われる場所はまだまだ多い

「全部GASでいいじゃないか！VBAが必要な場所なんてある？」というツイートをみたので、いくつかVBAでないとだめなケースを考えてみた。

### そもそも同じ機能を作り直す必要がない

「それGoogleSpreadsheet+GASでできるよ」とはいうものの、全く同じものを作り直す必要はない。作り直しの機会があればって話だけど、そんなに「寿命の短いソフトウェア」を作ってる時点で、その現場でのソフトウェアの価値は薄い。「同じものを何年も繰り返し使われてこそ」のソフトウェア。

### オフラインで動かしたい

GASでの致命的な点はオフラインで動かないというところ。「デジタル化」と「クラウド化」って似て非なるもので、「デジタル＋オフライン」ってのはありえる。ソフトウェアは「道具」であって「コミュニケーション」はその一部でしかない。さらにセキュリティ観点で「絶対オフラインで動かしたい」ってニーズはある。「設定さえきちんとしておけばセキュア」なのが今どきのクラウドサービスだが、それができてないケースは山程ある。「アクセルの隣にある自爆ボタンを押さなければこの車は安全なのです！！！」という言い訳は聞き飽きた。

「ネットワークを敷く」というお仕事も存在する。その場合はオフラインだ。常にクラウドに繋がってる環境にいると、うっかり「みんなクラウドに繋がってて当然」という気がするが、どこかの誰かがオフラインでオンラインにしている。誰かにとってのクラウドは誰かにとってのオンプレで成り立ってる。繋がってないPCでちょっとした処理を動かすならVBAはまだまだ有用。

### 逆にネットワークを使いまくりたい

GASのFetchAPIに相当するのが、VBAではMSXML2だ。もはやVBAではないんだけど、WindowがOSレイヤーで提供しているAPIに直アクセスできるところがVBAのいいところ。

そして、GASのFetchAPIはアクセスできる数に制限がある。あたり前だが、VBAでは無制限に通信できる。証券取引委員会から大量のXBRLをダウンロードしてパースするなんてことも、MSXML2使ってやってる人もいる。

FetchAPIでは、一日のアクセス数に上限がある。さらに一日の全体データ転送量にも制限がある。しかもトリガー経由でのスクリプトの実行には実行時間に制限がある。制約が多すぎていざ使おうと思ったら使えないとかかなりきつい。

GASをいざ使い始めると何かしらの制限に引っかかって苦しんでる人が検索すると出てくる。

さらに恐ろしいのは、Googleが規約を途中で変えてくるというところ。制約がゆるくなる規約変更ならまだしも厳しくなるケースだってある。業務の生殺与奪の権奪われまくり。

### ファイルサーバーにアクセスしたい

GASを使うならファイルサーバーじゃなくてGoogleDrive上でのファイルのやり取りでしょうというのが「常識」かもしれないけど、残念なことにこの世のファイル管理はそうはなってない。Google様がGoogleDriveを出してきたときにはこれでファイルサーバが要らなくなると思ったけど、そうはならなかった。何なら企業向けにはBOXがシェアを伸ばしてる。

さらにクラウドベースでもマイクロソフトがAzureでSMBプロトコルでサーバーを提供している。さらにアーカイブ用途のクラウドストレージではS3が圧倒的シェア。

つまり

- ビジネスユーザ向けクラウドストレージではBOX
- ファイルサーバーのクラウドサービスはAzure
- アーカイブ向けクラウドストレージではS3

と、どこでもGoogleが存在感を出せてない。「GAS使うためにBOXもAzureもAWSも辞めましょう」という理屈は通用しない。結局いずれともつながるという観点では「PC上で処理が動く」ってことはとても大事。別にVBAというプログラミング言語を使いたいわけではなくて「PCをハブにして手軽にデータを変換したい」ってだけなの。

### アナログからデジタルに変換したい

オシロスコープからのデータをエクセルVBAで加工するなんてことも、GASで代替できるもんじゃない。世の中にはアナログデータをデジタル化してくれている人たちがいる。「今どきPCでVBA？時代遅れねww」とバカにするのは勝手だがあなたのデジタルデータは誰かがアナログから変換しているのだ。

### PaaSのバージョンアップに左右されたくない

あえてGASをPaaSと表現したが、PaaSのバージョンアップでこれまでのコードが動かなくなることはある。「何もしてないのに動かなくなりました」なんてセリフはPaaSが出る前はなかったけど、PaaSで運用していると平気で「あなたのコードはこれこれの古い機能を使ってるから動かなくなります」と警告してくる。

もちろん食らいついて修正するというのが、PaaSと付き合う上での「常識」ではある。が「3年コードを一切弄らずに動く道具」はそれはそれで尊い。「常にコードはブラッシュアップするのが常識っしょ！」って現場ばかりではない。あなたが契約した年金の運用ルールが毎月変わってよいわけがない。

VBAはめちゃくちゃ「古臭い」仕組みなのだが、「長い間使われている」というだけで価値がある上に「その仕組をまた再利用できる」という点でこれも健全なITと言える。

### 終わりに

とはいえ私個人はVBAをお仕事にはしてない。前職ではVBAを使って社内業務改善もしていたが、いまではクラウドサーバー（IaaS）上でRubyやMySQLを使ってSaaS型の事業形態でお仕事をしている。VBAを仕事にしていない理由は「あまりに低コストで作れて提供価値も高い」からビジネス上の差がつかない。例えば図書館や小学校というサービスはとても価値が高いけど、ビジネスとして始めるにはかなりしんどい。VBAはそういう存在。価値の有無と金の稼ぎやすさは別もの。
元SESがプログラミングスクールでAIについて学んだ

##はじめに

「Aidemy Premiun Plan（AIアプリ開発コース3か月）」を受講しました。
https://premium.aidemy.net/
期間は2021/1/25～2021/4/25です。
受講した感想などをまとめます。

##目次
* 自己紹介
* Aidemyを受講した理由
* Aidemyでの学習
* 受講した感想
* Aidemy Gritサービスの利用（2021/5/1よりサービス開始？）

##自己紹介
受講する前の自分のステータスをまとめます。

* 元SES（新卒入社で4年半）
* 離職中（2020/10末で退社）
* 工学院大学電気システム工学科卒業
* SESの業務内容
    * 研究所でのアプリ作成（設計、開発、テスト実施。お客様向けアプリではないので、成果物の作成などはせず）
    * 研究のお手伝い（ツールの調査、自然言語処理に関するお仕事にも少し触れた）
    * 研究所での勉強（Pythonではじめる機械学習を1周学習する時間をもらえた）
    * JUnitでテストコード作成
    * 使用したことのあるプログラミング言語はJava, JavaScript, Python, C, HTML（←プログラミング言語か？）
    * プログラミングスキルはどの言語も初心者くらい（if文、for文くらいは書けるが、0から作ることはなく、バグの修正などが主な業務）
    * セキュリティ脆弱性診断
    * 得意分野は特になし（広く浅く勉強してきたので）

AIというとPythonを主に使用すると思いますが、ライブラリの使用経験はなしです（NumpyとかPandasとか名前を知っている程度でどういった役割を果たすライブラリかは知らなかった）。

## Aidemyを受講した理由
 * 自分のキャリアを考えなおしたとき、前職では自分のやりたいことができる環境ではなかったので退職
 * 3か月ほど、なりたい自分を探していた（IT系ではない職種も検討）
 * 結果、やはり自分はプログラミングしたいと思った
 * 研究所で少し触れた機械学習が楽しかったので、AI関連に興味があった
 * 一人で勉強するにはハードルが高かった（Pythonも書けるほうではなかったので）
 * やるなら基礎から勉強したいと思った
 * コロナ禍なので、通学するスクールではなくオンラインでできるスクールを探していた
 * 専門実践教育給付金の制度の対象スクールであった（条件を満たすと受講料の50%が返ってくる）
 * 受講するコースが修了すると他のコースの学習もできる
 * 事前に行ったカウンセリングの方との話がよかったのでAidemyに決めた（これが一番の理由）

## Aidemyでの学習
私が受講したコースの必須カリキュラム一覧です。ホームページにも載っています。

* Python入門
* Numpy
* Pandas
* Matplotlib
* データクレンジング
* 機械学習理論
* 教師あり学習（分類）
* スクレイピング
* ディープラーニング基礎
* CNN
* 男女認識
* HTML/CSS
* Flask入門
* MNISTを用いた手書き文字認識アプリ作成
* アプリ制作
* コマンドライン入門
* Git入門
* デプロイ（heroku）
* 成果物作成（ブログ作成）

勉強環境はほとんどAidemyのサービス内で完結していました。
また、添削物の提出があるのですが、それはGoogle Colaboratory上で行うので特に環境構築は必要ないです。
ただ、アプリ制作の課題ではローカルのPCを使用しました。
Anaccondaを利用したのですが、それのインストールあたりも説明があったかと思います。

ホームページに載っているカリキュラム以外にも学習コンテンツがあり、
例えばデータサイエンス100本ノックやG検定対策講座、kaggleのコンペの参加などがありました。

学習はまず、テキスト（説明文）を読んでそのあとに実際にコードを書いてみるといった形式でした。
コードを書くと言っても、穴埋め形式でした。
添削物もアプリ制作以外は穴埋め形式でした。

## 受講した感想
毎セッションごとにコードを書く課題があったのですが、穴埋め形式よりも1からコードを書ける方が自分には向いているかなと思いました。前職でコードは書いていたので、そこが物足りない感じがしました。しかし、初心者向け（PG経験のない方）にはちょうどよいレベル感だと思います。
また、受講する前から他のコースも受講しようと考えていたので、必須受講になっている学習コンテンツは1,2か月ほどで修了しました。アプリ制作は題材を選ぶところからのスタートだったので少し苦戦しました。画像認識アプリを作成したのですが、精度があまり上がらず、修了期間ぎりぎりまで粘っていました（上記のカリキュラム以外も受講できたので、そちらをメインにやっていました）。

Slackでチューターの方に分からないところを聞けるのはよかったです。
平日は17:00～22:00、土曜と月曜は12:00～22:00の間に質問の回答が返ってくる感じです。
回答のレスポンスは比較的早かったと思います。ただ、4月に入ってからは、「翌日回答します」というのが多くなりました。回答内容は非常にわかりやすく、丁寧でした。

また、技術カウンセリングとしまして、Slackビデオを使ってカウンセリングが受けられるというのはよかったです。
アプリ制作でつまずいたとき、どんな画像を集めたのか・モデル作成のロジックはどんな感じなのかを画面共有して教えていただけたので、チャットの文面だけでは得られない情報を得ることができました。
3か月コースだと24回技術カウンセリングを行うことができて、私は合計20回も行っていませんでした。
でも使わないともったいないなと思い、チューターの方の職歴や業務内容、勉強方法など聞いたりしてました。

転職活動にも力を入れ始めたらしく、キャリアコンサルタントの方とも面談しました。
受講コース修了から1年後まで、アドバイスを頂けるそうなのでうまく活用できればと思っています。


Aidemyでの学習を終えて、今の状態ではまだまだAI分野での転職は厳しいかと感じています（個人的な意見）。
基礎は身についたけど、業務で扱うとなると、まだハードルが高いです（個人的な意見）。

ただ自分の場合、独学を選ばなくて正解だったなと思います。
右も左も分からない状態だったのが、受講して進む道が見えてきたという感触があります。
受講料は決して安いとは言えないですが、それだけの価値はあったと思いました。

## Aidemy Gritサービスの利用（2021/5/1よりサービス開始？）
http://go.pardot.com/e/797443/news-1916-/3jvgd/212003507?h=7PAaEq5IWQR9_JWv2SZ69TZcMr0-Q1umIdCmn4ZMmfw

実際に受講したカリキュラムの復習がしたくなったときに上記のサービスが使えそうです。
さっそく5月の1か月間利用してみようと登録しました。
勉強には惜しみなく投資するタイプの人間なので。。。。
利用した感想はまた追記しようと思います。


### 最後に
※この記事はあくまで個人的な感想です。情報が古い可能性があるので、最新の情報はサイトにて確認をお願いいたします。
「remote: ! Could not detect rake tasks...」というエラーが表示された場合の対処法


bundlerのバージョンを変更
-

git push heroku master 実行時に「remote: ! Could not detect rake tasks」「remote: ! ensure you can run $ bundle exec rake -P against your app」とエラーが表示される場合は、bundlerのバージョンがエラーの原因である可能性が高いです。
そのため、以下の手順に従って、bundlerのバージョンを変更しましょう。

bundlerのバージョンを変更
-

① 現在入っているbundlerを削除します 以下のコマンドを実行しましょう。

```rb:ターミナル
# 何度か確認を求められますが、「y」を入力してエンターを押しましょう
% gem uninstall bundler
```

② bundlerのバージョン2.1.4を指定してインストールします 以下のコマンドを実行しましょう。

```rb:ターミナル
%  gem install bundler -v '2.1.4'
```

③ Gemfile.lockを削除します テキストエディタでAjaxAppを開きます。 「Gemfile.lock」を右クリックし、「削除」を選択しましょう。

![20210502-073510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/83eb8425-0eb1-aeb3-85e5-8cbad426ddf7.png)

￼
④ Gemfile.lockを作り直します 以下のコマンドを実行しましょう。

```rb:ターミナル
%  bundle install
```

⑤ 変更をGitHubへ反映させます GitHubDesktopより、commit と pushを行いましょう。

⑥ Herokuにアプリケーションの情報を追加します 以下のコマンドを実行しましょう。

```rb:ターミナル
% git push heroku master
```

下記のようにエラーが出ていなければ、デプロイ完了です。 今後、開発環境のAjaxAppに追加機能を実装し、その変更をHeroku上のAjaxAppにも反映したい場合は、同じ様にmasterブランチにコミットし、Herokuにプッシュする必要があります。
￼
pgadmin 4 で Fatal Error : The pgAdmin 4 server could not be contacted.とエラー表示された際の対処(Windows Server 2019)

#TL;DR
pgAdmin 4 v5.2を利用してみてください。


#内容
以下エラーが表示されてpgAdminコンソールが起動できない件についての対処となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/76a9eb24-55e2-134d-b918-937b7f54bed0.png)

```text:Fatal&#x20;Error
The pgAdmin 4 server could not be contacted.
```

なお環境は以下となります。pgAdminはpostgreSQLのインストール時に同梱インストールされたものになります。

Windows Server 2019 Datacenter 64bit
postgreSQL 10.16
pgAdmin 4 v4.29


#試してダメだったパターン
①ことあるごとにOS再起動をする(以下パターンのたび)

②管理者として実行する(Administratorユーザ操作だけど敢えて)

③configファイル新規追加
path:`[PostgreSQLインストールディレクトリ]\pgAdmin 4\venv\Lib\site-packages\backports`
file:`__init__.py`
内容:`(空ファイル)`

④ディレクトリを削除
path:`C:\Users\[ログインユーザ名]\AppData\Roaming\pgAdmin`

※ｇｇった感じだと、上記で動いた／動く時があったという内容もありましたが、私の環境では一切動きませんでした。


#たどり着いた正解
インストールされているpgAdminをいったんアンインストールし、最新バージョンのpgAdminをインストールすることで改善しましたので、その内容を記載します。

#手順1.pgAdminのアンインストール
postgreSQLの同梱でインストールされたpgAdminはプログラム一覧に表示されないので、postgreSQLのアンインストーラを利用してアンインストールします。

アンインストーラを起動します。
path:`C:\Program Files\PostgreSQL\10`
file:`uninstall-postgresql.exe`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/1f86d8d4-5ac9-e309-f6e7-7d951a4ceff0.png)

Individual componentsを選択し、Nextをクリックします。
(Entire Applicationを選択するとpostgreSQLも消えるので注意)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/1ce323a6-a2ee-98c9-fe07-9fdeda592743.png)

pgAdmin 4 を選択し、Nextをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/3c8e46a1-6d6a-10e6-340e-ee3c62478e75.png)

uninstallが完了しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/fc7203af-c098-67ac-894d-15ea39301afd.png)

#手順2.一時ファイルディレクトリの削除
アンインストールをしても以下ディレクトリは残存しているので、念のため抹消しておきます。

path:`C:\Users\[ログインユーザ名]\AppData\Roaming\pgAdmin`

※`C:\Users\[ログインユーザ名]\AppData`は隠しディレクトリなので、表示するようにしてから削除ください。

#手順3.pgAdmin 4 v5.2 のインストール
内容が長くなっていましたので、以下記事に分割しました。

https://qiita.com/Higemal/items/3c1ed79772787ce9516f

#おわりに
pgAdmin 4 は相当に評価が悪いですね。ただ悪評記事は2018年度あたりが多いので、最近のバージョンは改善されているのかもしれません。今後に期待ですね。

#参考
https://www.pgadmin.org/

https://www.pgadmin.org/download/pgadmin-4-windows/

https://qiita.com/Higemal/items/3c1ed79772787ce9516f

https://blog.goo.ne.jp/pianyi/e/1054b4993ade81747e7529f4bd605316

https://qiita.com/rubytomato@github/items/cfcca181ced2058ed7d6

http://a23.sblo.jp/article/183025782.html
回復パーティションの削除方法、システムで予約済みパーティションを削除してしまった時の復旧方法

## 回復パーティションの削除方法

小さいDISKから大きなDISKに移し替えた時に回復パーティションが邪魔になるので削除した。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/26940966-dbdd-521a-b59a-84de432e0345.png)

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/ef966cf4-da64-de51-8a27-cea487b5ad41.png)


## システムで予約済み パーティション

### 削除してしまった場合

誤って システムで予約済み パーティション をフォーマットしてしまった場合の復活方法

システムで予約済み パーティション にはWindowsを起動するためのブートローダーが入っている。

### 復旧方法

正常に起動するPCから `clonezilla`などで
パーティションをバックアップし、
トラブル中のPCにリストアする。

Windows10のインストールディスクから起動し、回復

![startup_repair05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/0f9f5ba0-1b69-4c12-fb53-4dd8f81dab89.png)

![002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/3ec10924-9b1f-c871-cbd5-2017ffbbb9c8.jpeg)


### ブート情報の復旧

```sh:アクティブパーティションの選択
diskpart

list vol
# システムで予約済み パーティション を選ぶ
select vol 2
active
```

```sh:ブート情報の再登録
# d:\ の部分は適宜修正。ほかのPCではe:\やf:\の時もあった。
bcdboot d:\windows /l ja-JP

# 認識されていることを確認
bootrec /rebuildbcd

# 認識されていることを確認
bootrec /scanos
```

PC再起動し起動することを確認。

(windows 2008 r2 でも同様に復旧ができた。)

以下メモ

```sh
# 以下は使用しなかったコマンド
bcdedit /set {bootmgr} device partition=D:
bcdedit /set {default} device partition=C:
bcdedit /set {default} osdevice partition=C:

bootsect /nt60 d:
bootsect /nt60 sys /mbr
```
【JavaScript基礎】画面サイズに応じて処理を分ける

## 参考URL
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

## 参考著書
https://www.amazon.co.jp/JavaScript-%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B7%E3%83%94%E9%9B%86-%E6%B1%A0%E7%94%B0-%E6%B3%B0%E5%BB%B6/dp/4297103680/ref=sr_1_7?dchild=1&keywords=javascript&qid=1618412284&sr=8-7

### 画面サイズがブレークポイントを超えたときに処理をする

画面サイズに応じて処理を分けたいときは、下記のメソッドとプロパティが役立ちます。

#### メソッド
| メソッド                                     | 意味                                         | 戻り値                       | 
| -------------------------------------------- | -------------------------------------------- | ---------------------------- | 
| matchMedia(メディアクエリ)                   | メディアクエリの情報                         | オブジェクト(MediaQueryList) | 
| matchMedia(メディアクエリ).addListener(処理) | メディアクエリに一致したときに処理を実行する | なし                         | 


matchMedia()メソッドは、引数に応じたメディアクエリの情報を返します。

例えば、「ウィンドウ幅が768px以上」を示す「(min-width:768px)」を渡すと、下記の情報が返ってきます。

```js
const mediaQueryList = matchMedia('(min-width:768px)');
console.log(mediaQueryList);

// 出力結果
// {
//     matches: true, 　//ウィンドウサイズが768px以上のとき
//     media: "(min-width: 768px)",
//     onchange: null
// }
```

#### プロパティ
| プロパティ                         | 内容                             | 型     | 
| ---------------------------------- | -------------------------------- | ------ | 
| matchMedia(メディアクエリ).matches | メディアクエリに一致するかどうか | 真偽値 | 


matchesプロパティを用いて、ブラウザウィンドウのサイズがメディアクエリに一致するかどうかを調べられます。

```js
// ウィンドウサイズが768px以下ならtrue
matchMedia('(min-width:768px)').matches;

// ウィンドウサイズが500px以上1000px以下ならtrue
matchMedia('(min-width:500px) and (max-width:1000px)').matches;
```

#### スマートフォンの縦向き・横向き変更を検知したいとき

スマートフォンの縦向き・横向き変更を検知したいときは、下記のようにコールバック処理が設定できます。

```js
// (orientation:portrait)は横持ちを示す
const mediaQueryList = matchMedia('(orientaton: portrait)');

mediaQueryList.addListener(() => {
    console.log('デバイスの向きが変更されました。');
});
```

#### 画面幅の変更タイミングで処理を行いたいとき

画面幅の変更（メディアクエリの変更タイミング）で処理を行いたい時は、下記のようにコールバック処理が設定できます。

```js
// メディアクエリ情報
const mediaQueryList = matchMedia('(min-width:768px)');

mediaQueryList.addEventListener('change', (e) => {
    if (e.matches) {
        /**画面幅が768px以上のときの処理 */
        console.log('画面幅が768px以上です。');
    } else {
        /**画面幅が768px以上のときの処理 */
        console.log('画面幅が768px未満です。');
    }
});
```
https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList/onchange
M5stack/M5Core2でリアルタイムにインターネットのPNGを表示【2022最新】

<h2>初めに</h2>
どうも！aapythonです！
ついに見つけたぞ、画像表示のために作られていてしかもM5StackとM5Core2で何の問題もなく画像を表示できてしまって、しかも画像の大きさまでも変更できてしまう&リアルタイムに画像取得可能というpngle!!!!最高です!
<h2>さっそく画像表示</h2>
参考：<a href="https://github.com/kikuchan/pngle">https://github.com/kikuchan/pngle</a>
<br>
まず、上のGithubで、ダウンロードしてください。
<br>
そのあと、pngleの中のexamplesフォルダをm5stack-pngに名前変更してください。(重要です)
<br>
pngle.hを名前変更したm5stack-pngに移動してください。
<br>
m5stack-png.inoがあると思いますので開いてください。
<br>
一行目のincludeがM5Stack.hとなっていますが、M5Core2の方は以下のように変更してください。

```
#include <M5Core2.h>
```

8行目と9行目にWIFIのSSIDとパスワードを入力してください。
まずはM5に書き込んでみましょう。
書き込みが終わったら一番左のボタン(Aボタン)を押してみましょう！
もし、welcomeと表示されて進まない場合はM5を再起動してください。(それでもならない場合はWIFIのパスワードとSSIDがあっているか確認してください。)
そして、表示出来たら画像のURLを変更してみましょう！
下の行のほうに Void loopがあると思いますので、以下のように変更します。URLのところは変更してください。

```
void loop()
{
  M5.update();
  load_png("http://変更してね");
  delay(9999);
}
```
そうすることで、9.9秒おきに画像が自動で更新されます。
書き込んでみて、画像が大きすぎる、小さすぎるなどの場合は、38行目のscaleを変更してみてください。
aapythonは地震情報を表示しています！とても便利です。
![img.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700063/1b06c27a-e321-b009-64ed-05d28ca7a62a.jpeg)
<h2>最後に</h2>
M5シリーズとGithubは最高ですね！！
最後まで読んでくださってありがとうございました！！
【はまりポイント解説】新型コロナウイルス ワクチン接種 予約方法 v-yoyaku.jp

2021/5/1時点での問題点。将来的に治っていると期待したい。


## きっかけ

親からワクチン予約でメールアドレス登録のボタンを押しても反応がないとの連絡があった。

以下のシステムを利用しているようだ。

https://v-yoyaku.jp/manual.html



## はまりポイント

### 1. スマホに対応していないのにスマホで操作してくれと書いてある

`iPhone Xr` (iOS 14.5最新) でメールアドレス登録のボタンを押しても反応がない。
入力は正しくされている。

自治体が配布している資料が`スマホでQRコードを読み取りアクセス`する方法だった。

もしくは自治体のアプリから遷移。

QRコードに書かれているURLを`PCでアクセス`し、メールアドレス登録に成功した。


メールアドレスに本人確認のURLが届くのでクリック。

### 2. パスワード変更が何度でも出る

メールアドレスに本人確認のURLが届くのでクリックすると、
パスワードの再設定が要求される。

ここでパスワード変更するまでは良いのだが、ログインするたびにパスワード変更の画面になる。


画面キャプチャを忘れたので、、似たような画面が以下。
ここでパスワード変更をするのではなく、上の`マイページ`をクリックすると先に進める。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/2bbe22df-1ee3-e5e3-92e6-781b4bd1130e.png)



### 3. ログインURL

https://v-yoyaku.jp/login

にアクセスしてもログインができない。
QRコードで読み取ったURLから操作すればよい。
超初心者がAngularを始めた時に参考にしたもの

## 想定読者
 - プログラミング超初心者
 - Angularをこれから勉強するが、何を参考にすべきか迷っている方
 - 学習方法調べるも「情報が少ない!」と思っており補足したい方

実務案件の為に、プログラミング初心者の私がAngularを学習しました。(案件で使用する予定だったが、Reactを使用することになった為、実務では使用していない。)
その際に参考にしたもの(あと参考にしたいなと思ったものも)を超初心者目線で紹介したいと思います。

また、Angularの学習情報が少ない為、補足したいという思いもあり、記事を書くに至りました。

## Angularに関して参考にしたもの
- Angular超入門
 - 語り口が柔らかく、噛み砕いて説明してくれているので基礎の理解に役立ちました。特にプログラミング超初心者にはオススメしたいと思います。(公式チュートリアルは解説が私には簡素に思いました。)
- Udemy「【2021年最新版】はじめてのAngular入門 実践シングルページアプリケーション（SPA）開発」
 - 事前に調べた情報にはなかったのですが、こちらAngularの公式チュートリアルを題材にすすめています!!
 　公式チュートリアルをされる方は購入するとよいと思います。
- Angular公式チュートリアル(社員管理アプリ)
 - こちらは、解説が簡素(めちゃ解説してくれているRailsチュートリアルと比べてです)な為、Udemy動画と並行してやるといいと思います。
- Angular公式の「はじめてみよう」の部分
 - これはチュートリアル(社員管理アプリ)を行った後に知ったのですが、公式の「はじめてみよう」の部分でチュートリアルの前段の基礎知識が解説されている部分があったので、こちらを先にやるといいかなと思います。
- Angular入門 チュートリアルの解説実況(Youtube)
 - こちら公式の「はじめてみよう」の部分の解説動画になります。公式の解説が簡素な為、緩めに解説してくれているのがとても良かったです。チュートリの補足にいいと思います。
- Angular 公式チュートリアル(Youtube)
  - こちらはAngular公式チュートリアル(社員管理アプリ)の解説動画になります。こちらも緩めに解説されているのがとても良かったです。ただ後半の難しい章の動画は出されていないようで残念でした。
- 書籍「Angularアプリケーションプログラミング」
  - 定番の本みたいでこちらも購入。私は、不明点や理解を深めたい部分の参照用としておりました。

## TypeScriptに関して参考にしたもの
 - 書籍「Angular超入門」のTypeScriptの章
  - Angularを使用する上で、最低限これを抑えておけばOKな部分を紹介している感じです。
 - Udemy「【2021年最新版】はじめてのAngular入門 実践シングルページアプリケーション（SPA）開発」
  -  こちらも上記書籍と同じくらいの濃さのものかなと思います。
 - サバイバルTypeScript-TypeScript入門
  - 書籍、Udemyで触れていない細かい部分は、こちらを参照しておりました。この情報量で無料なの凄いです。

## JavaScriptに関して参考にしたもの
- 書籍「改訂新版JavaScript本格入門」
 - 他のJSの入門書はもっていたが、ES6に対応していないし、解説が足りない為、こちらを購入。これ読んで不明点を解決することはよくありました。

## 参考にしたいなと思ったもの(取り組んでないので、あくまで印象)
- Angular Webアプリ開発 スタートブック
 - 上記「Angular超入門」を入門書とした為、使用しませんでした。こちらも入門として良さそうな印象。
- とらハックさんのYoutube動画
  - TypeScriptの動画がわかりやすそうでしたので、書籍・Udemyは不要かもなと思いました。
- Zenn「Angular実践入門チュートリアル」
 - こちら取り組んでおりませんが、丁寧に解説されていそうな印象を受けました。私が参照した時は、無料でした。素晴らしい方がいるんだなーと思いました。
git pullしたら怒られた・・（git 2.27）

# git pullするとこんなエラー文が

分岐しているリポジトリを一致させる方法を、指定しないことはおすすめできません。pullする前にこのいずれかのコマンドを実行してください。

という事が書かれており、３つコマンドが提示されています。

```
warning: Pulling without specifying how to reconcile divergent branches is
discouraged. You can squelch this message by running one of the following
commands sometime before your next pull:

  git config pull.rebase false  # merge (the default strategy)
  git config pull.rebase true   # rebase
  git config pull.ff only       # fast-forward only

You can replace "git config" with "git config --global" to set a default
preference for all repositories. You can also pass --rebase, --no-rebase,
or --ff-only on the command line to override the configured default per
invocation.
```


### Git 2.27.0 から pull をすると表示されるようです

pullした際に、pull --rebase や pull --ff-only の挙動を期待していたユーザーが意図しないマージコミットを作ってしまうことを避けるために、このようなエラーが出るらしい。

### rebase false が良さそう

下記のコマンドを実行することで、デフォルトのpullの挙動になる。

```
git config pull.rebase false
```

rebaseの際に、明示的に `--rebase` をつける設定です。
 
```
git config pull.rebase true
```

逆に上記設定にすると、pullしただけで、 `pull --rebase` をするようになります。
[メモ]　コマンド通らないとき

serverless　Framework（おそらくコマンドが通らない時は主にこれをしたら治る可能性あり）をインストールするときに困ったので、メモにして残しておきます

自分のカレントディレクトリに行って、.zshrcのディレクトリにいき
![1DDD2BC4-752B-4418-B026-2AD4F7E0286A_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/8e073a62-a2ab-7b4f-739a-037cfe37ee9f.jpeg)

```
export PATH=$PATH:`npm bin -g`
```
これをディレクトリに書いて
こんな感じ！！
![C7061BCC-BABE-4FB6-AABF-1848CFE8D706.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/036a215f-788d-ce6d-08ba-3fbddfb2b059.jpeg)


```
$　source ~/.zshrc
```

これを実行すると保存
JS~配列操作~

#概要
JSでは配列が最も多く使われるデータ構造です。配列には様々なメソッドが用意されています。
この記事では配列操作について触れていきます。

```index.js
const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];
const fruits2= ["パパイヤ", "パイナップル", "みかん",];
```

今回使用する元の配列です。

#値の追加と削除
arrayオブジェクトには、配列の先頭、末尾に要素を追加または削除するメソッドが用意されています。

１．追加

(1)push

```index.js
const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];
const fruits2= ["パパイヤ", "パイナップル", "みかん",];

fruits.push("パパイヤ","パイナップル"); 
console.log(fruits);
//["りんご", "ばなな", "ぶどう", "いちご","パパイヤ","パイナップル"] 
```

fruitsとfruits2という２つの配列があります。fruits2の要素をfruitsに追加します。
となります。push()に引数を追加します。複数追加したときは最後の引数が末尾になります。

(2)unshift

```index.js
fruits.unshift("パパイヤ","パイナップル");
//["パパイヤ","パイナップル","りんご", "ばなな", "ぶどう", "いちご"]
```

こちらは要素を先頭に追加します。
複数追加したときは、最初の引数が先頭になります。

#削除

(1)pop

```index.js
fruits.pop();
console.log(fruits);
//[["りんご", "ばなな", "ぶどう"]
```
末尾から要素を取り除きます。

(2)shift

```index.js
fruits.shift();
console.log(fruits);
//["ばなな", "ぶどう","いちご"]
```
先頭から要素を削除します。

#配列の結合と分離

配列は、複数の配列を結合した新しい配列を作る。配列の一部から新しい配列を作ったりすることができます。

1.concat

```index.js
 console.log(fruits.concat(fruits2));
 console.log(fruits);

//["りんご", "ばなな", "ぶどう", "いちご","パパイヤ", "パイナップル", "みかん"]
//["りんご", "ばなな", "ぶどう", "いちご"]
```
引数の配列の要素、引数の値を順に並べた新しい配列を作ります。
元の配列は影響を受けません。

2.slice

```index.js
console.log(fruits.slice(1,3));
console.log(fruits.slice(2));
console.log(fruits);

//["ばなな","ぶどう"]
//["ぶどう", "いちご"]
//["りんご", "ばなな", "ぶどう", "いちご"]
```
第１引数から第２引数の手前までをの要素の新しい配列を作ります。
また引数が１つだった場合は、引数から末尾の要素までの新しい要素を作ります。
元の配列は影響を受けません。

3.splice

```index.js
console.log(fruits.splice(1,2,"マンゴー","キウイ"));
console.log(fruits);

//["ばなな","ぶどう"]
//["りんご", "マンゴー", "キウイ", "いちご"]
```

第1引数が要素インデックス番号、削除する数。更に追加する要素を記述します。
もとの配列は影響をうけます。
Terraform環境をdockerで構築

# 概要
AWSのリソースは基本的にTerraformで構築していますが、人によってTerraform実行環境に差分が発生していたことが気になったので、Dockerを使用しできるだけ差分をなくすことが目標です。
ここでは、Terraformを実行するための最低限のセットアップを行っています。

## 前提条件

前提条件は以下の通りです。

* Dockerがインストール済みであること。

## 構成

ディレクトリ構成は以下の通りです。

```
.
├── .aws (awsの認証情報を格納)
│   ├── config
│   └── credentials
├── docker-compose.yml
├── dockerfile
└── src (Terraformソースを格納)
```

Dockerfileは以下の通りです。
aws-cli、Terraformなど最低限必要なものをインストールしています。

```Dockerfile
FROM python:3.6

# install aws-cli
RUN pip install awscli

# install command
RUN apt-get update && apt-get install -y vim wget unzip vim sudo

# install terraform
RUN wget https://releases.hashicorp.com/terraform/0.13.0/terraform_0.13.0_linux_amd64.zip
RUN unzip ./terraform_0.13.0_linux_amd64.zip -d /usr/local/bin/

RUN mkdir ~/.aws

# 初期ディレクトリ
WORKDIR /opt
```
Docker-compose.ymlは以下の通りです。

```docker-compose.yml
version: '3'
services:
  terraform_env:
    build: .
    volumes:
      - ./src:/opt/src
      - ./.aws:/root/.aws
```

## 構築

実際にDocker環境を構築します。
手順は以下の通りです。

* イメージのビルド

以下コマンドを実行し、イメージのビルドを行います。

```bash
$ docker-compose build
```

* コンテナの立ち上げ

以下コマンドを実行し、イメージからコンテナを立ち上げます。
コマンド実行後、コンテナの`/opt`にログインされます。

```bash
$ docker-compose run --rm terraform_env bash
Creating work_terraform_env_run ... done
root@cd820124c743:/opt# ls
src
```

* コマンドの確認

Terraform、aws-cliがインストールされている確認します。

```
root@1a285d2a39e4:/opt# aws --version
aws-cli/1.19.60 Python/3.6.13 Linux/5.10.25-linuxkit botocore/1.20.60
root@1a285d2a39e4:/opt# terraform --version

Your version of Terraform is out of date! The latest version
is 0.15.1. You can update by downloading from https://www.terraform.io/downloads.html
Terraform v0.13.0
```

後は `src/`以下にTerraformのファイルを作成し、実際にリソースを構築していきましょう。

## 備考

credentials をプロフィール毎に分ける際は、Terraformの `provider` でどの環境を使用するか定義する必要があります。

* credentials

```
[test_env]
aws_access_key_id = xxxxxxxxxx
aws_secret_access_key = xxxxxxxxxx

[test]
aws_access_key_id = xxxxxxxxxx
aws_secret_access_key = xxxxxxxxxx
```

```provider.tf
provider "aws" {
  region  = "ap-northeast-1"
  profile = "test_env"
}
```
【Azure Cognitive Services】C#で作る「オウム返しナナミ」

# はじめに
しゃべった言葉をオウム返ししてくるぬいぐるみのことは知っていますか？遊んだことありますか？

![イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309633/4b4b9281-b56e-eb81-2f10-fcb0ef6fc074.png)


「僕の名前は太郎！」としゃべったら、ぬいぐるみも「僕の名前は太郎！」と同じ言葉を言い返してきます。ぬいぐるみの電池が切れるまで、ずっとオウム返ししてくるわけです。

以前、このような仕組みをAzure Cognitive Servicesを使ってJava（以下の記事参照）で作ってみましたが、今回は**C#**で作っていきます。この記事では、Azure portal上でCognitive Servicesのリソース作成済みであることを前提として進めていきますが、詳しい手順が知りたい場合はぜひ、下記の記事をご参照ください。

- [【Azure Cognitive Services】Javaで作る「オウム返しナナミ」](https://qiita.com/michimichix521/items/c489c59cc3a350138d67)



# 前提・環境
- Windows 10 home
- visual studio 2019
- Azure portal上でCognitive Servicesのリソース作成済み
    - キーを取得できる。
    - 場所を取得できる。
- NuGetパッケージ
    - Microsoft.CognitiveServices.Speech v1.16.0


# 全体のソースコード

```cs
using System;
using System.Threading.Tasks;
using Microsoft.CognitiveServices.Speech;
using Microsoft.CognitiveServices.Speech.Audio;

namespace AzureCognitiveServicesAPI
{
    class Program
    {
        static string subscriptionKey = "YourSubscriptionKey";
        static string serviceRegion = "YourServiceRegion";

        static string speechRecognitionLanguage = "ja-JP";
        static string speechName = "ja-JP-NanamiNeural";

        static async Task Main(string[] args)
        {
            var speechConfig = SpeechConfig.FromSubscription(subscriptionKey, serviceRegion);
            speechConfig.SpeechRecognitionLanguage = speechRecognitionLanguage;

            var audioConfig = AudioConfig.FromDefaultMicrophoneInput();
            var recognizer = new SpeechRecognizer(speechConfig, audioConfig);
            var synthesizer = new SpeechSynthesizer(speechConfig);

            var speakText = "";

            while (speakText != "終了。")
            {
                speakText = await SpeechToText(recognizer);
                await TextToSpeech(synthesizer, speakText);
            }

            await TextToSpeech(synthesizer, "プログラムを終了させますね。");
        }

        static async Task<string> SpeechToText(SpeechRecognizer recognizer)
        {
            var result = await recognizer.RecognizeOnceAsync();
            Console.WriteLine($"話した内容： {result.Text}");
            return result.Text;
        }

        static async Task TextToSpeech(SpeechSynthesizer synthesizer, string speakText)
        {
            await synthesizer.SpeakSsmlAsync(CreateTextReadOut(speakText));
        }

        static string CreateTextReadOut(string text)
        {
            return $"<speak version='1.0' xmlns='https://www.w3.org/2001/10/synthesis' xml:lang='{speechRecognitionLanguage}'><voice name='{speechName}'>{text}</voice></speak>";
        }
    }
}
```

フィールド変数のsubscriptionKeyとserviceRegionに前提で取得しておいたキーと場所に書き換えてください。
実行すると、話した内容がコンソール上に出力され、さらにNanamiがその内容を話してくれるかと思います。

**「終了」と話すとNanamiから「プログラムを終了させますね。」と言われ、プログラムが終了になります。**

以上になります。ありがとうございました。
全角・半角カタカナのバリデーションルール設定方法（正規表現）

## はじめに
ユーザー登録機能等を実装する際のバリデーションルールに、例えば
氏名のフリガナには`全角カタカナ`を、
口座名義には`半角カタカナ`のみを入力させるようにしたい時があると思います。
そんな時に、どのような正規表現を使えば良いのかをご紹介します。

## 記事の修正について

【2021/5/6　更新】
コメントにていただいたご指摘を元に、
全角カタカナの正規表現を
`/^[ァ-ヴー]+$/u` → `/\A[ァ-ヴー]+\z/u` に修正し、

また半角カタカナの正規表現を
`/^[ｦ-ﾟ]+$/u` → `/\A[ｦ-ﾟ]+\z/u` に修正しました。

PHPの場合は、例えば全角カタカナの正規表現には`/^[ァ-ヴー]+$/u`といったパターンが使用されるのを目にすることがあると思いますが、実はこれでは不完全であることがわかったためです。
詳細については、当記事のコメント欄か、以下の記事をご参照ください。

参考：
[正規表現によるバリデーションでは ^ と $ ではなく \A と \z を使おう
](https://blog.tokumaru.org/2014/03/z.html)


## 全角カタカナのバリデーションルール

全角カタカナのバリデーションルールを設定するときは、以下のように正規表現を使うと、
全角カタカナと、全角カタカナ小文字、長音記号（ー）のみを許容するようにできます。

```
/\A[ァ-ヴー]+\z/u
```
キモとなる部分は`[ァ-ヴー]`の部分ですが、この部分の意味としては
`ァ-ヴ`は、文字コードの`「ァ」から「ヴ」までの全角カタカナ`を意味し、`ー`はまんま長音記号「ー」を意味しています。
なお、全角カタカナの文字コードの順番としては、以下のようになっています。

```
ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ
```
このうち、小文字の「ァ」から始まって、最後は「ヴ」までの範囲の全角カタカナが対象となっています。
カタカナの並び順って、綺麗に「アイウエオ」や「ァィゥェォ」、「カキクケコ」等となってはいないのですね。

ちゃんとマッチしてるかチェック↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613419/fcabe5a6-089a-71c2-2fbe-ced594d2738f.png)

[Rubular](https://rubular.com/)というサイトで正規表現がマッチしているかを簡単に確認できるので便利です💡


なお、最後の「ヵ」、「ヶ」については、
「３カ所」や「１ヶ月」などに使われる文字なのですが、フリガナ等のカタカナとして含めたくないことの方が多いのではないかなと思います。
もし含めたい場合は、正規表現を

```
/\A[ァ-ヶー]+\z/u
```
とします。

ちなみに、全角カタカナの正規表現として
`[ァ-ン]`というものも見かけますが、この場合「ヴ」が含まれなくなってしまいます。

## 半角カタカナのバリデーションルール
半角カタカナのバリデーションルールを設定するときは、以下のように正規表現を使うと、
半角カタカナと、半角カタカナ小文字、半角の長音記号（-）のみを許容するようにできます。

```
/\A[ｦ-ﾟ]+\z/u
```

キモとなる部分は`[ｦ-ﾟ]`の部分ですが、この部分の意味としては
`ｦ-ﾟ`は、文字コードの`「ｦ」から「゜」までの半角カタカナ`を意味します。
(濁点「゛」、半濁点「゜」の半角カタカナも含む)
なお、半角カタカナの文字コードの順番としては、以下のようになっています。


```
ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾉﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾋﾛﾜﾝﾞﾟ
```

ちゃんとマッチしてるかチェック↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613419/fc1a9e3d-ab17-a1bb-f899-5e3c7cd8fa25.png)


## 正規表現についてとても参考になる記事

そもそも正規表現のルールがよくわからん！基礎から学びたい！
という場合は、こちらのQiita記事が初心者向けにかなり丁寧に解説されていて、参考になりました。
[初心者歓迎！手と目で覚える正規表現入門・その１「さまざまな形式の電話番号を検索しよう」](https://qiita.com/jnchito/items/893c887fbf19e17d3ff9)
UTC？GMT？ 違いとは

## 勉強前イメージ

どっちもみたことある！！！
けど違いは知らない

## 調査

### UTCとは

Universal Time Coordinated の略で、協定世界時と呼ばれています。
現在世界の基準となっている時刻で、セシウム原子が振動する時間を基準としており
1958年1月1日0時0分0秒からの経過時間をカウントして定めた時刻になります。
天文観測から出す時刻(GMT)とはほぼ一定ですが、地球の自転は一定でないのでズレを合わせるためにうるう秒で調整されます。

### GMTとは

Greenwich Mean Time の略で、グリニッジ標準時と呼ばれます。
昔は標準時として使っていた時間でほぼUTCと同様の時間です。

### UTC と GMT の違い

どうやって時間を導くかの違いで実質そんなに変化はなさそう。
イギリスとは9時間時差があるので、UTCでもGMTでも +9すれば日本では困らなさそう・・・

## 勉強後イメージ

詳細なところまで調べてないけど、今はそこまで求めてないのでいいかな
結構違いってあるのかな？って思ったけど求め方で、今はUTC。
NTP設定するときはどっちにしても+9しないといけないね。

## 参考

- [「GMT」と「UTC」の違い](https://wa3.i-3-i.info/diff18time.html)
- [「UTC」と「JST」](https://linuc.org/study/knowledge/333/)
Pythonで競プロ練習

#Pythonで競技プロを練習する

現在競技プログラミングを通じで自分でアルゴリズムを考える練習をしています。
某競プロの初心者用の問題ですが自力で考えてうまくいきましたので同じ初心者の方には参考になればと思いました。

問題としては単純でマスが３つあってそれぞれのマスに０か１が入ります。そして１が入ったマスをカウントするという問題です。

**アルゴリズムを考える**
この問題を解くときに自分なりに考えたアルゴリズムが以下になります。

1. マスが３つあってその中に１か０がはいる
2. １マスにつき１か０が入るのかを３回繰り返している
3. if文で１が入っていたらカウントを１増やすようにすればいい
4. カウントを入れる変数countを作ってあげる
5. 入力が手入力になるので、入力した値をリストで受け取ればいいと思った

以上がとりあえず思い付いたアルゴリズムになる

**コード**

```python:Python

s1,s2,s3 = list(map(int, input())) #入力した値をリスト型[]で受け取るイメージ

t = s1, s2, s3 #[1,0,1]こんなイメージ

count = 0 #カウントが増えた時にその値を保存するための変数

for i in t: #for i in [1,0,1]があってiのなかに1, 0, 1が順番に入るイメージ

    if i == 1: #if文でiが1ならば、カウントを１増やす

        count += 1

    else: #ここは思いつきですが、０が入ればとりあえず何もしなくていいと思って,else:0としてみた
        0

print(count) #最後にprint(count)とすることでcountの中身を出力してあげる
```

以上のコードで合格をもらえたのでよしとした。

**別解**

```python:Python

print(input().count('1')) #入力した値をcount関数で直接数える凄まじく効率にいい解答です

```

#感想

別解で効率のいいコードはありますが、今回は自分で思った通りにアルゴリズムを作って、思った通りのコードを記述することができたので、競プロを初めて一週間ちょっとですが、初めて競プロを始めた時よりは進歩しているのでなはないかと思いました。
まだまだ、効率のいいコードの書き方などはできませんが、少しづつ進歩できればいいと思いました。
LeafletでGoogle マップ、OpenStreetMap表示。マーカー表示。現在地ボタン。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を色々試した。
![333.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374794/ffe7ed8a-c8fb-930e-d167-97b67ecfc587.jpeg)
詳細は以下のブログに記載。

Leaflet + OpenStreetMapで、地図にマーカー表示。サンプルソース。
https://2ndart.hatenablog.com/entry/2021/04/28/112259

Leaflet地図：「国土地理院」と「Esri World Topo Map」に切り替え。サンプルソース。
https://2ndart.hatenablog.com/entry/2021/04/28/164803

Leaflet地図：Google MAPS APIなしで「Googleマップ」が使える。サンプルソース。
https://2ndart.hatenablog.com/entry/2021/04/29/111336

Leaflet地図：クリックした地点の緯度・経度、標高を表示。サンプルソース。
https://2ndart.hatenablog.com/entry/2021/04/29/143307

Leaflet地図：現在地表示ボタン追加。位置情報継続的更新。サンプルソース。
https://2ndart.hatenablog.com/entry/2021/05/01/101739
初のメンターを通して心に留めておくべきだと思ったこと

# 新人が入ってきたときにこころがけておくことのまとめ
先日社員が入社してきたときに初めてメンターをしました。
当時の上司に褒められたのでその時心がけていたこと、やったことを忘れない様に自分のために書き留めておきます。

## WBSを作ること
### WBSを使うメリット
キャッチアップをしていくときに、WBSがあることで「次に何をすればいいか」が明確になります。
よく聞く「次やること確認するね」の状態が生じて手持ち無沙汰にならないようにしましょう。

進捗が見れるので新人側からしてもキャッチアップができてることが実感できます。
また、メンター側としても進捗を見れることで詰まってそうな箇所がわかりやすくなります。
いつになったらチームに貢献できるようになるのかわからない不安に包まれる状態が続いてしまうことを避けるために使いましょう。

### WBSを使ってやってはいけないこと
WBSというと進捗を管理するために使われるかと思います。
よって、WBSがあるとどうしても新人の進捗を管理したくなってしまうと思います。
しかし、このWBSは決して__新人の評価のために使ってはいけない__です。
もし進捗が遅れていても__絶対に新人を責めない、叱らない__ことを心がけてください。
__進捗が遅れている = 「スケジュールに無理がある」 or 「自分がフォローできていない」__のどちらかだと思って自省しましょう。

## 目を掛けること
新人は不安で毎日いっぱいであることを忘れないでください。

### 毎日絶対に時間を作る
__一日最低2時間を新人のために__確保してください。
そのために上司との業務調整を必ず行ってください。
メンター側としても後輩に時間を掛けることに対して、安心感を得ることができます。
また、このことは新人にも伝えましょう。
新人のイメージだと「通常の業務」の上乗せで「新人教育」だと思っています。
そうではなく新人教育を業務に組み込むことで新人としても安心して質問などをぶつけてくれるようになります。

### MTGの最後にかならず質問タイムを作る
MTGの最後にもう一度質問がないか確認してください。
理解をしていると思って進めたら実はわかっていないということはよくあります。
逐次疑問を解消しながら説明するのもそうですが、最後にも再度復習も兼ねて質問タイムを作りましょう。

## ある程度仕事を任せる
### なぜ仕事を任せるのか
当たり前だけど、新人もチームへの貢献をしたいと思っています。
任せた仕事が完了することはチームへの貢献になる、だから早めに貢献の実感が湧くような仕事をしてもらいましょう。

### 仕事を任せることと丸投げすることを混同しない
仕事を新人に任せて、「はい、よろしく」で終わらせない。
もし、__仕事が終わらなかったり、失敗したらそれは新人ではなく自分のせい__です。
納期内に終わるように、失敗しないようにフォローしましょう。

## 弱みを見せる
### 先輩のほうができるのは基本はあたりまえ
新人は先輩が失敗する姿をあまり見ることはないかもしれません。
でも前はたくさん失敗していたはず、そのたびに先輩に助けてもらっていたはず。
なので、自分も失敗していたことを教えてあげましょう。
新人は失敗することを恐れていますがそれを薄めてあげましょう。

## わからないことを責めない
### わからないのは新人のせいでは決してない
よくわからないことを「なんでわからないの」と聞くなどど噂にしますが、なんでわからないのは新人に理解が出来ていないという状況を投げてしまっています。
新人はわからないという状態でいたいと思っているわけではないです。
新人は常に最大限に学んでいると仮定すれば、「なぜ理解が進んでいないのか」を考えるのが仕事で、そのために何をすべきかを考えることがメンターの仕事です。
【AWS】IAMについてまとめてみた

## IAMとは？
AM(Identity and Access Management)とは、AWSのサービスで「認証」と「認可」の設定を行うことができるサービスです。
「認証」「認可」を正しく設定することで、AWSの利用者や、AWSのサービスがアクセスできる範囲を制御することができます。

## IAMは最低限この5つは覚えよう！
### IAMユーザー
![AWS_IAM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/a77fd3ef-8bfe-79ee-8bda-2de48baaf0ae.png)

### アクセスキー
2つのアクセスの方法があります。
・プログラムによるアクセス
・AWSマネジメントコンソールへのアクセス

![スクリーンショット 2021-05-01 9.13.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/68183ba1-5ba1-c6fb-819e-94c5c1a8a1a8.png)

#### プログラムによるアクセス
**アクセスキーID**と**シークレットアクセスキー**の2種類が発行されます。
両方ともランダムな文字列であり、こちらさえあれば遠隔操作が可能になります。
なので、これが漏洩するとヤバい！！！

#### AWSマネジメントコンソールへのアクセス
パスワードでログインします。
こちらは２段階認証を入れることが多いので最悪漏れてもなんとかなるはず。。

### IAMグループ
IAMグループとは、複数のIAMユーザーの集合体です。

### IAMポリシー
AWSで操作できる権限を表したものです。
JSON形式で記述された設定ファイルであり、
認証主体（Identity）にアタッチして使用します。
（こちらはあまり推奨されていないやり方です。ロールを使うのが一般的です。）

また、ポリシーは2種類あります。
AWSが定めた、**AWS管理ポリシー**とユーザーがJSONで作成した**カスタマー管理ポリシー**です。

以下のケースであれば、
**「EC2の権限をすべて付与」**した形となります。

![スクリーンショット 2021-05-01 9.42.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/d396e80a-21ae-0781-88b4-22cec939aa16.png)

![AWS_IAMポリシー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/2c847a59-fd72-b49b-434b-2ed69efe5390.png)

#### カスタマー管理ポリシーを書いてみよう

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "ListBucketRstIP",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:ListBucket",
      "Resource": "arn:aws:s3:::sample-bucket",
      "Condition": {
        "StringEquals": {
          "aws:SourceIp": "12.34.56.78"
        }
      }
    }
  ]
}
```

それでは順に説明していきます。
##### Sid
idを指します。

##### Effect
許可するか拒否するかを判別します。
Allow ↔︎ Deny

ここからが大事です。
この4つの頭文字をとって、**PARCモデル**と呼ばれます。

##### Principal
アクセスできるアカウントを指します。
`*`　→ この場合すべてのアカウント
`"AWS":"arn:aws:iam::123456789012:root"` → IAM情報（ユーザーのARN）が一致したアカウント

##### Action
どのサービスを使えるようにするか明記します。
上記の場合は、s3のListBucketが使えるようになります。

##### Resource
リソースを特定します。
上記の場合は、s3のsample-bucketです。

##### Condition
IPアドレスやこのポリシーがいつまで使えるかなどを明記します。
上記の場合は、IPアドレス＝12.34.56.78の時のみ使えます。


### IAMロール
IAMポリシーを複数アタッチして権限をひとまとめにすることを指します。

これだけじゃわからないって人も多いでしょうし、私もまとめきれなかったのでわかりやすい記事を紹介します。
IAMユーザーとIAMポリシー、IAMロールの位置関係をわかりやすく明記しています。

https://dev.classmethod.jp/articles/iam-policy-user-role-for-primary-of-aws/
gulpで、Not enough spaceエラーが出たときの解決法について


##はじめに
gulpを使用してたときに、
急に「Not enough space」というエラー画面になりました。


![スクリーンショット 2021-04-28 9.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1211427/59303bd6-74e1-72b1-85d5-dfec3509a1aa.png)

ググってみたものの、なかなか原因が特定できる記事を発見できず、、、
解決までに少し時間がかかってしまったため、記事に残しておきます。
<br>
##解決法
どうやら何らかの動作が原因で文字コードが<font color="Red">GBKになっていることが原因</font>のようで、
その文字コードをUTF-8に変更することで解決しました。
（GBKは、中国語の簡体字用の文字コード）


※ Sublime Textでは画面左下に、文字コードの記載があります。
![スクリーンショット 2021-04-28 9.53.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1211427/a5811904-63c5-f3a1-f23d-26066e7b78d9.png)

###文字コードの変更について
文字コードの変更は以下の手順で行えます。
画面上部のツールバー > File > Set File Encoding to > UTF-8
<br>
<br>
Power Automate Desktop を最初に使うときのつまづき・気づき

#はじめに
初めてPower Automate Desktop(PAD)でBotを作ってみました。
そのときに、つまづいた点・気づいた点のメモです。
PADのつまづき所として少しでも役に立てば幸いです。
使っているのは個人のMicrosoftアカウントによる無償範囲のPADです。

なお、私はRPAの経験はあります。Automation Anywhere(AA), UiPath, WinActorを少し使えます。そのためRPA初心者とは違う観点になっています。また、AAを一番よく使っているのでAAとの比較観点が強いです。

# アクション
左にアクションが並んでいるのは他のRPAと同じで、ほぼ推測だけで使えました。
編集もAA(Automation 360)とほぼ同じ。

# 変数
新しい変数をどこで定義するのかわかりませんでした。
とりあえず「変数の設定」で作れたのでそこから始めています。変数は％で囲んで表記。
余談ですが「変数の設定」で変数%targetValue%に10を設定したとして、「targetValueを10に設定」と日本語がなんか変。和訳を間違っている？（setあるある）

アクションを作るときに変数も一緒に作ってくれます。便利。
変数名も良い感じに作ってくれるので楽。気に食わないなら手で修正可能。

型を指定せずともうまく解釈してくれているようです。とても便利。

# 変数の設定
変数%tblSize%に10を設定していて、文字列"textBox_"と組み合わせて
textBox_10_10を作る場合、
"textBox_" + %tblSize% + "\_" + %tblSize%
とやったらダメだった。
%'textBox_' + tblSize + '_' + tblSize%
と書かないといけない。

これはMicrosoftのWeb見ないと書けなかった。
https://docs.microsoft.com/ja-jp/learn/modules/pad-variables/6-variable-manipulation
（ いや、最初にWeb見てから作れよ ＞ 自分 ）

# 変数の参照
｛ｘ｝は変数が表示できます。このマーク、いろいろな所に出てきます。
つい、F2キーを押してしまうけどそれでは出てきません。F4キーです（笑）。

# UI要素
UI要素をレコーダーで取ったとして、それをどこで編集するのかわかりませんでした。
右側のサンドイッチみたいな３層アイコンから編集できました。
![pad_icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/8060f60a-4491-87eb-5705-a34d16b9d3df.png)

最初にレコーディングしたときの対象オブジェクトの名前が謎の文字列に見えたのですが、それは自分でわかりやすい名前に変更できました。

セレクタービルダーに入ったあと、セレクターを自分で好きに修正したい場合は、ダイアログ左下のカスタムを無しにすると、手修正ができるモードに変わる。
![visual_editor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/1a13495d-10c0-297b-3aad-e130ff31668f.png)
（ビジュアルエディターをオフにする）

なぜ、ビジュアルエディター・オフ<==>カスタム、の切り替え名なのかは不明（？）

# セレクタを動的に変える
  edit[Id="textBox_10_10"]
を変数化したいと思い
  edit[Id=%fieldName%]
としたら、ダメだった。

  edit[Id="%fieldName%"]
と書く。引用符を忘れずに。


# おわりに
まだPADのアクションは拡充されそうですので、しばらくウォッチを続けたいと思います。
CSS 備忘録<基礎に振り返る>

#CSSについて復習
今まで、なんとなくでhtmlファイルにcssを当てており、直せたから大丈夫と考えていました。
さて、GWに突入ということもあり、CSSを再思考して基礎に戻っていきたいと思います

#Boxモデルとは何か
まず、大切になる考え方が「Boxモデル」。

Content: textやimageなどの中心となる物
→widthやheightで幅や高さを調整する

Padding: Contentに対しての外枠（透明なエリア）に当てるもの

Border: Paddingによってできた幅の外枠に当てるもの

Margin: Paddingに似ている物
→しかし、PaddingはContentの内側に当てるものに対して、MarginはContentの外側に当てるもの

#なぜズレは起きてしまうのか

以下の具体的なコードを参考にしてズレてしまう原因を考えてみる

```html
<div class="parent">
  親要素
  <div class="child">
    子要素
  </div>
</div>
```

```css
.parent {
  width: 300;
  height: 100px;
  border: 2px dashed red;
}

.child {
  width: 100%;
  padding: 10px;
  background-color: white;
  border: 3px solid black;
}

}
```

これを実際に記述してみると、親要素に囲まれた枠線から、子要素のボックスがはみ出てしまう
→上に記述した「Boxモデル」によりボックスのサイズは、「Content + Padding + Border + Margin」の合計の大きさになる
→上の例だと、childタグの幅の大きさは、width 300(100%なので親要素と同じになる) + padding 20(10 で両サイドあるので) + border 6(paddingと同じ） = 326になってしまう
→そのため、parentタグの幅300に対して26分childタグの要素が出てしまう

#問題解決をするには
1.計算して記述する
→上の例だと、parentのwidthが300なので、計算してchildも300になるようにする
→例えば、widthを95%(285)にしてpaddingを4.5にすれば、合計して300になるので横にはみ出す原因は解決することができる

2.親要素に「box-sizing」プロパティを使用する
→そうすることで、contentに対して適度な大きさになるように計算してくれるようになる