OmniAICreator/Qiita-1.07M huggingface dataset:
PMがPTA広報の部長になった訳だが(5)

# 穀雨

## PDCA
一定期間で反省会を行い、効果測定や見直しをしましょう。

混乱の中なんとか走り出した広報部も１ヵ月経ちある程度状況が見えてきました。
最初は部員の方々の声を聴きながらマニュアル作りを進めてきたのですが、見直しをする時期に来たので一旦立ち止まって現状の課題を検討します。

現状良くないなと思った点を述べると

+ LINEを使って連絡取ってるけど、LINEに居ない人が居る
+ 保護者への手紙が日本語だけど、母国語が日本語でない保護者が居る


の２点が見つかりました。
どちらも部員の方の何気ない一言で気付いたのですが言われてみればあたりまえの事でした。

## コミュニケーション計画
全員がICTを使いこなせる訳ではないので誰もが確実に使えるインフラを中心に採用するツールを選びましょう。

最初の部会でLINEグループへの登録がスムーズに進んだので意識に上がってませでしたが、部会に不参加の方はLINEグループに参加していません。
またLINEのアカウントも電話やメールアドレスと同じ個人情報ですので開示してもらうのは同意が必要ですが、PTAはLINEアカウント開示の同意を取り付けていません。
LINEは公開したく無い、という意見があったので検討しました。
便利だから、皆が使っているから、という理由で便利さに飛びついてしまったのですがLINEは補助的なコミュニケーション手段と捉えて、あくまで利用に同意を受けている電話、メールアドレス、生徒経由で手紙を送るという手段で情報の共有をすべきでした。

活動マニュアルはLINE中心に記載してしまったので修正する事を宣言し、タスクに積んでおきます。



## 母国語が日本以外の保護者
PTAの部会とは別に学校側が開催する保護者会という行事があります。
そこに参加した部員から「部会を欠席していた部員に母国語が日本語ではない方がいるので難しいですね～」と聞き、対策が必要な案件だと自覚しました。

今まで学校やPTAから来る手紙は全部日本語だったのでまったく気にしてませんでしたが、例えば自分がこれからタガログ語圏に在住するとしたらどうなのか。
当然翻訳ソフトを駆使してなんとか理解を試みるでしょうが、そこまで考えが至らない、翻訳アプリの存在を認知していない、そもそも面倒だから読みもしない、という状況は普通にありえます。
コミュニケーションは一方通行では成立しないので日本語のお手紙に機械翻訳にかけた英語も併記して送る事にしました。

広報部活動について説明したいので機会を下さいという手紙を生徒経由で送ります。
私の電話番号とメールアドレスを記載しておいたので、後は先方の返信待ちです。
一番やってはいけない事は存在を無視する事です。会話してその上でどういう活動協力が得られるか協議すべきでしょう。



## 企画の合意形成
PTAも民主主義なので話し合いの上多数決で物事を進めていきましょう。

最初の部会の前に広報誌の企画案を思いついたのでドラフト版を作成し、4役の中で多数決を取り賛成多数を得ました。これでまずは部員に開示出来るようになります。

企画案自体は何でもよかったのですが新奇性のある事が私の要件でした。
反発がある事は織り込み済で、反発が起きればそれを解決する行動を起こす事が出来ます。
解決の過程で過去踏襲以外の選択肢がある事を示し、やり方すら分からない現状からどうすれば新しい事が出来るかの事例を作る事で、将来の広報部活動をより楽しいものに出来る筈です。
また活動マニュアルに残して未来へつなげたいという思いがあり、最初に書いた勝利条件の要素になるからです。

次に4役の中で各企画は企画担当者の中で検討・決定し、4役は政治、宗教、反社会的内容、差別が含まれない事の査読チェックのみとし、企画自体への干渉はしない事としました。
単に全ての活動を全員の採択を取って進めてたら時間もがかかるし、本質的に不要な作業はしたくもさせたくもないからです。

上記内容を最初の部会で説明します。私の企画案も部会の最中回覧して、対抗企画が無いか募集します。結局対抗企画は出てきませんでしたが、賛同者が1名企画に加わってくれました。
実は対抗企画があった方が私としては望ましかったのですが、私の事を面倒くさい人と思ったでしょうし、そこまでやる気は出ないものですよね…

企画案を清書し本部へ提出し確認依頼を行います。4月末日に本部確認が完了したとの連絡を受たので、これでPTA内部での合意形成が完了しました。
GW明けに学校側へ提出する事とし休暇に入ります。



## 突然の保留通告
会社でいう指示命令系統は混乱を起こさない為に必要であり、メンバーはこれを守る価値があります。個人が勝手に連絡しあうと混乱や判断すべき情報不足で活動に支障が生じます。

以前も部長に報告なく裏で仲良しさん同士が作業依頼してしまい、私に判断材料が無いので事実確認に時間を要した事がありましたが、今回も起きました。
企画案の本部確認完了の報告を前日中に部内へ共有していたので、そこで気に入らなかった誰かさんが居たのでしょう。
確認完了連絡を受けた翌日、「疑問があるので一旦保留して欲しい」と本部から連絡を受けました。

疑問の内容も保留の理由も伝えず、ただ保留の一点張りなので流石にイライラしてきます。
怒りを装って誘導尋問かけたら引っかかってくれました。曰く

+ 企画の決定プロセスに疑問がある。広報部全体の合意を得ていないのではないか
+ 保留判断をしたのははPTA本部だけでなく、学校長と副校長も保留である

感情的になった振りして情報を引き出すのは交渉手段の１つです。
私も相手からよくやられますし、自分でも使います。

ここで本部側窓口担当者の言に虚偽がある事が判明します。
4/30(金)の22時に 本部確認完了の連絡
5/1(土)の20時に 学校側校長と副校長も本件を認知しなおかつ保留の判断までしている

PTA会長までエスカレーションして保留判断するのは同じ本部内なので(非常識ですが)不思議はないです。いや、ビジネスマンだってこんなどうでも良い案件は土日挟んで月曜報告ですし、いっそGW開けたら報告しよう位が普通だと思います。
しかし別組織の学校責任者が「土曜日に」「たかがPTAの広報誌企画の事で」保留判断までしません(笑)

校長と副校長の名前を出せばビビると思ったんでしょうね。
また広報部内部の決定プロセスに疑問があっても、部長に事実確認を行った上で部内で解決するよう勧告するのが普通でしょう。積極的に関与する意図が何かあるのでしょうね。

これで本部の窓口担当者は「失礼」「世間知らず」「虚言」のハットトリック達成です。

GW初日に面白いネタを提供してくれた本部担当者に感謝しつつ、次回の更新は小満の頃を予定しています。
Nuxt.jsのコンポーネントが自動で読み込まれない件

# はじめに
componentsの自動読み込みで躓いたので備忘録を残します。

[対象]
Nuxt.js　v2.15〜
# 目次
<!-- タイトルとアンカー名を編集 -->
1. componentsの自動読み込
1. 自動読み込みの設定
1. ネストになっている場合
1. [参考]

<!-- 各チャプター -->
<a id="#1"></a>
# componentsの自動読み込み
Nuxt.jsの自動インポートはv2.13から新しく追加された機能です。
componentsを読み込ませたい対象ファイルで、```<ファイル名 />```とするだけでimportせずとも読み込むことができ、import地獄から抜け出せる優れものです。

![スクリーンショット 2021-05-08 15.06.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/79620e30-f947-3d42-9ece-98b87c9aae20.png)
このようにするだけで```welAppBar.vue```ファイルを読み込むことができます。素晴らしいです。

<a id="#Chapter2"></a>
# components自動読み込みの設定

![スクリーンショット 2021-05-08 15.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/30ee7ab8-5133-7032-5eaa-210a9731a3c2.png)
export default内で上記のようにして自動読み込みを有効化します。最後にカンマを忘れずにつけましょう。たったこれだけで先ほどのように```<ファイル名 />```で呼び出すことだできます

<a id="#Chapter3"></a>
# ネストになっている場合
Nuxt.js v2.15以上ではcomponentsファイルがネスト構造になっている場合、呼び出し時にcomponents以下のディレクトリ名も記載しなくてはいけません。（ここで躓きました）
自動読み込み機能が追加された当初はディレクトリ名は記載しなくても良かったのですが、v2.15以上からの仕様となっているので気をつけて実装していきたいです。

**components/base/foo/Button.vue**
![スクリーンショット 2021-05-08 15.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/270379cb-7b49-844b-2c80-dc8fa1eb6190.png)


<a id="#reference"></a>
# 参考文献
-[Nuxt.js公式](https://ja.nuxtjs.org/docs/2.x/directory-structure/components/)
【JavaScript】配列の値から平均値を計算する関数calc_aveを定義し、配列dataの平均値を表示するプログラムを作成せよ。

```javascript
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>課題</title>
</head>
<body>
  <script>
    var data = [59, 39, 100, 2, 15, 40, 84, 97];
    var ave; // 平均値 
    // 関数calc_aveを実行する
    function calc_ave() {
      var sum = 0; // 平均値
      for(var i = 0; i < data.length; i++){
      sum = sum + data[i]
      document.write('<p>' + sum + '</p>');
      } 
      ave = sum / data.length;
      document.write('<p>平均値:' +ave+ '</p>'); 
    }
    calc_ave();
</script>
</body>
</html>
```
Intersection 型をinterfaceで同じような型を作ろうと思ったらエラーがでた

## 初めに

この記事はTypeScriptを学ぶにあたっての備忘録です。


## 気付き

下記はtypeを使った問題のない例です。

```typescript

type Hoge = {
  name: string;
  age: number;
}

type Fuga = {
  name: string;
  size: number;
}

type EngineerBlogger = Hoge & Fuga

const valiable: HogeFuga = {
  name: "hoge",
  age: 1,
  size: 1
}

```

こちらをinterfaceでやるとエラーが出る。

```typescript

interface Hoge {
  name: "hoge"
  role: string;

}
interface Fuga {
  name: "fuga"
  follower: number;
}

//インターフェイス 'HogeFuga' で型 'Hoge' と型 'Fuga' を同時には拡張できません。 'Hoge' 型および 'Fuga' 型の名前付きプロパティ 'name' が一致しません。
interface HogeFuga extends Hoge, Fuga {} 

```

## 結論

なるほどです。。同じことをやっていると思ったんですがそういうわけではないのかと思った次第。
typeでやっていることはIntersection 型なのであくまでも 『交差』 で 今回interfaceでやったのは拡張だから同じnameを使うことができないということなのか。。多分。
AWSのVPCフローログをCloudWatchLosgでフィルタする方法

# コピペ用

```
[version, account, eni, source, destination, srcport, destport, protocol, packets, bytes, windowstart, windowend, action, flowlogstatus]
```
## 詳細

```
[account, action, az, bytes, dstaddr, dstport, end, flowdirection, instanceid, interfaceid, logstatus, pktdstawsservice, packets, pktdstaddr, pktsrcawsservice, pktsrcaddr, protocol, region, srcaddr, srcport, start, sublocationid, subnetid, sublocationtype, tcpflags, trafficpath, type, version, vpcid]
```

下記公式ドキュメントの使用可能なフィールド欄より。
フィールド欄の通り`-` を使用するとエラーになるので、`-`は使用しない。
記録するフィールドの選択・順序はVPCフローログ作成の際に指定するので、その順序に合わせる。
2021.6.13時点で全てのフィールドを選択すると上記順序になる。
ABC順のため、分かりやすいようにカスタマイズした方が吉。

https://docs.aws.amazon.com/vpc/latest/userguide/flow-logs.html#flow-log-records

# 例

## 特定のEC2インスタンス発信のHTTPS通信をフィルタ

```
[version, account, eni="eni-046f27b580f4a9495", source, destination, srcport, destport="443", protocol, packets, bytes, windowstart, windowend, action, flowlogstatus]
```
Gatsby.jsで.envファイルを使用する方法

ふとGatsby.jsで.eveファイルを使って環境変数を使いたいと思い、同じような境遇にいらっしゃる方の参考になればなと思い、この記事を書きます。

実際、公式ドキュメントにも書いてるので、詳しい説明を見たいという方は下記URLでご覧ください。

・[https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/)

やり方はさほど難しくありません。

すぐ終わるので、肩の力を抜いてご覧ください！

それでは説明していきます！！

# パッケージのインストール

``dotenv``というパッケージをインストールします。

これは主にNode.jsで.envファイルを参考する際に使うものです。

Gatsbyではこれを使って.envファイルを参照していきます。

```powershell
npm install dotenv
```

# dotenvの設定

次に、``gatsby-config.js``か``gatsby-node.js``で下記のコードをコピペしてください。

```js
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`
})
```

# envファイルの作成、呼び出し

最後に``.env.development``を作成し、任意の変数名を付けて下さい。

```.env.development
FAVORITES_FOOD = POTATO
```

あとは呼び出すだけ。

```js
console.log(process.env.FAVORITES_FOOD)
```

簡単！

ちなみにビルド時は``.env.production``を作成すれば、同じように環境変数を参照できますのでぜひ忘れないうちに``.env.production``を作成してください。

以上、「Gatsby.jsで.envファイルを使用する方法」でした！

Thank you for reading
Macでpython3系の環境構築を数分で完了させるためのメモ

#標準pythonのバージョン確認

macにはpythonが標準でインストールされている。

```
python --version
```
で確認するとversionが表示される。

```
Python 2.7.16
```
しかしこのpythonは２系であるため今回は最新の３系pythonをインストールしていく。

#homebrewインストール
```
brew -v
```
これでhomebrewが入っていることが確認できる。
エンジニアなら入っている人が多数のイメージ。
もし入っていない場合は


```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
このコマンドでインストールし、確認してみる


#pyenvのインストール
これはpython触る人以外インストールしていないのでは？
バージョン確認してみる。

```
pyenv -v
```
ない場合はインストールしたhomebrewを利用し、

```
brew install pyenv
```
インストール完了。もう一度-vで確認する。

#pyenvにパスを通す
このままではpyenvにパスが通っていないため設定を変更する

```
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
```

#python３系のインストール
ここでpyenvを使ってインストール可能なpythonのバージョンを確認する。

```
pyenv install --list
```
リストで表示された中から好きなversionのpythonをインストール

```
pyenv install 3.7.3
```
ただこの状態ではまだmacで3.7.3のpythonが選択されていない。

#pythonコマンドが見ている先のパスを変更する
pyenvでのバージョン管理をしているpythonを使用したい場合は、
コマンドの向き先のパスをpyenvに変更する必要がある。

```
$ which python
/usr/bin/python
$ pyenv init
$ eval "$(pyenv init -)"
$ which python
~/.pyenv/shims/python
```


#3系を標準にする

```
$ pyenv versions
* system (set by /Users/"名前"/.pyenv/version)
  3.7.3
```
これでpyenvに3.7.3があることが確認できる。
これを標準とするために

```
pyenv global 3.7.3
```
とし、最後にバージョン確認を行う。
完了だ。

#コードの実行
①デスクトップでファイルを作成
②テキストエディタで

```
print("test")
```
と記述。
ターミナルを起動し、

```
python ファイル名
```
で実行され、

```
test
```
と表示される。

#参考
MacにPythonをインストールする3つの方法！それぞれの利点と手順を紹介
https://kredo.jp/media/mac-python-installation/

pyenvを使ってpythonのバージョンが変更できない時の原因
https://qiita.com/taketyan/items/869e2a0ae144eaa702e0

pyenvを使ってMacにPythonの環境を構築する
https://qiita.com/1000ch/items/93841f76ea52551b6a97

pyenvでPythonのバージョンを切り替えられない場合の対処法＋
https://qiita.com/TheHiro/items/88d885ef6a4d25ec3020
git ブランチ名を打ち間違えたときに直す方法

## 概要
* 新規に作業ブランチを切ったらブランチ名を打ち間違えていたことに気づいたとき、その場ですぐにローカルのブランチ名を変更できます。
* ただし、リモートにプッシュ済みのブランチは変更してしまうと他の作業者に影響が及ぶので慎重に行いましょう。

## ブランチ名の変更
```
# 作業ブランチを作成
git checkout -b feature/create-bugs
# あっブランチ名まちがえた！
git branch -m feature/create-bugs-life
```
laravel Apacheのルートディレクトリにソースをcloneしたときにすること 個人メモ

# すること

1. mysqlのユーザを作成
2. .envファイルの作成と記載、.envの権限を770に設定する。
3. 下記コマンドを実行する。

    ```terminal
    $ sudo chmod 770 /var/www/クローンしたディレクトリ
    $ sudo chmod 770 storage -R
    $ sudo chmod 770 bootstrap/cache -R
    $ composer install
    $ php artisan key:generate
    $ php artisan config:cache
    $ php artisan migrate
    $ sudo chown -R apache:apache /var/www/クローンしたディレクトリ名
    ```
1. apacheにオーナー変更した後にcomposer updateとinstallが実行できなくなるので一旦cloneした時のユーザにオーナーを戻してからcomposer updateやinstallを実行する。
4. apacheのドキュメントルートの設定を変更する。
【JavaScript】税込み価格を計算する関数including_taxを作成せよ

```javascript
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>関数課題</title>
</head>
<body>
   <script>
       // 税抜き価格を定義
       var price = window.prompt('<p>税抜き価格を入力してください<p>');
 
       // 関数including_taxを実行する
       function including_tax(price) {
        price = price  * 1.08;
        price = Math.floor(price);
        document.write('税込み価格は' + price + 'です');
       }
 
       // 税込み価格を計算する関数including_taxを作成する
       including_tax(price);
   </script>
</body>
</html>
```
UnityでSMB 1.0を扱う方法備忘録

# UnityでSMB 1.0を扱う方法備忘録

## SharpCifs.Stdをビルドする

GitHubから [SharpCifs.Std](https://github.com/ume05rw/SharpCifs.Std) をクローンし、ビルドする。
https://github.com/ume05rw/SharpCifs.Std

クローンしてそのままビルドすると下記のようなエラーが出る。

>"{your solution path}\SharpCifs.Std\TestSharpCifs\secrets.json" は見つからなかったためコピーできません。		

`SharpCifs.Std\TestSharpCifs\secrets_novalue.json` ファイルをコピーし、
`SharpCifs.Std\TestSharpCifs\secrets.json` としてペーストする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93212/6e2d548b-6354-98fe-17aa-feab7c25e341.png)

これでビルドが通る。

## ビルドされたdllをUnityプロジェクトに配置する

`SharpCifs.STD1.3\bin\Release\SharpCifs.Std.dll` をUnityのPluginsディレクトリにコピーすれば使える。

## 基本的な使い方

リポジトリのドキュメントがよく待ってるのでそっち読む。

https://github.com/ume05rw/SharpCifs.Std#get-items-in-shared-folder

## ちょっとハマったこと

ディレクトリ操作するときとかはpathの末尾に `/` 入ってないとエラーが出る
指定バージョンのIntelliJ IDEA Pluginをインストールする

# はじめに
指定バージョンのIntelliJ IDEA Pluginをインストールする方法を記載します。

# 指定のバージョンにする
例として Kotlin Plugin を
202-1.5.0-release-760-IJ8194.7
にします。

次のサイトにアクセスします。
https://plugins.jetbrains.com/

"kotlin"を検索します。
表示された"Kotlin"を選択します。次の画像を参照ください。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84205/58e975be-bddf-d6b5-7077-c8a4da430a08.png)

上記を選択すると次のURLにジャンプします。
https://plugins.jetbrains.com/plugin/6954-kotlin

"Versions"タブを選択します。

202-1.5.0-release-760-IJ8194.7を見つけてダウンロードします。
表示されていなければ、表示されるま"Show More"を繰り返し選択します。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84205/19a5e3c9-ec5f-6f99-25b0-0ef61f80c967.png)

IntelliJ IDEAを起動します。"Pugins"を選択します。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84205/7f9cf84b-0089-b980-6b32-fc8293dec40f.png)

"Install Plugin from Disk..."を選択します。ダウンロードファイルを選択してインストールします。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84205/d91c9ce5-5529-5968-7e73-9efaf60e2b5c.png)
Crystal言語の変化する型／ is_a? nil?の使い方

# Crystal 言語の型と制御構文

Rubyに似た構文で記述可能で、実行速度と安全性を兼ね備えたCrystal言語。
この言語には、安全性故にRubyではあまり意識しない"型"という概念が重要になります。
ここでは、そんなCrystal言語の制御構文による型の変化について記載します。

## 型の変化とは
型の変化とはCrystal言語内でユニオン型※と呼ばれる変数の型に発生します。
ユニオン型がかかわる制御構文によって、変数の型が変化していくことを指しています。
※ここではバーチャル型も併せてユニオン型と記載しています。

## ユニオン型とは
ユニオン型について具体的な例を見てみましょう。
以下の例は受け取った文字が文字列の何文字目に存在しているかを返す[String.indexメソッドの公式リファレンス](https://crystal-lang.org/api/0.35.1/String.html#index(search:String,offset=0)-instance-method)の使用例です。

```crystal
"Hello, World".index('o')    # => 4
"Hello, World".index('Z')    # => nil
```


このメソッドは文字列の中に引数の文字が含まれていればインデックスを返し、
存在しない場合はnilを返します。

この時、このメソッドが返す値はInt32かNil型の値となります。
ではこのメソッドからの返り値を入れる変数の型はどうなるでしょうか。
ここで登場するのがユニオン型です。

```crystal
index : Int32 | Nil # ※
```
※これはInt32?とも書くことができます。型名 + ?　は　型 | Nil　の糖衣構文です。

ユニオン型は複数の型を表現することができるため非常に便利ですが、
その反面変数の中に実際に入っている値の型がわかりません。

```crystal
index = str.index('/')
index #この時点で変数indexは変数strの内容によってInt32かNil型のどちらかの値が入っている。
```
上記の例では2行目の時点で変数indexにはInt32型の整数値かnilのどちらかが入っています。

では変数indexを実際に使用しようとしたとき、どのように扱うべきでしょうか。
例えば、文字列strのなかの'/'の次の文字を確認したいときは以下のようなコードになると思います。

```crystal
index = str.index('/')
p str[index + 1] # => コンパイルエラー
```
もちろん上記はコンパイルエラーとなります。
なぜなら変数indexは足し算ができるInt32型ではなくInt32とNilのユニオン型だからです。
この時点で変数indexはnilの可能性もあるのです。

ではこの変数indexは今後のコードで計算やメソッド呼び出しが行えないのでしょうか。
そんなことはありません。ここで登場するのが型の変化です。
crystalコンパイラはif文の条件内に型を制限する記述があるとき、そのif文内では変数の型を条件に沿った型に変化させてくれます。

```crystal
if(<変数に対して型を制限する条件式>)
  #条件式の変数は制限された型となる
else
  #条件式の変数は制限された型以外となる
end
```

## nil?
実際に型の変化を見てみましょう。

```crystal
p typeof(index) # => (Int32 | Nil)
if(index.nil?)
  p typeof(index) #1 => Nil
else
  p typeof(index) #2 => Int32
end
```
上記のif文の条件分岐にnil?メソッドを使用しました。
このメソッドはインスタンスがnilの時にtrueを返します。

すなわち、この条件式を評価したときifブロック内#1へ到達するのは変数indexがnilの時のみとなります。
よってコンパイラはこのブロック内では変数indexをユニオン型ではなくNil型として扱います。

また、elseブロックに到達するのは変数indexがnilでないときのみです。
そのため、#2の時には変数indexはInt32型として扱われます。

上記の例は以下のように書きなおすこともできます。

```crystal
p typeof(index)
if(index)
  p typeof(index) #2 => Int32
else
  p typeof(index) #1 => Nil
end
```
crystal言語ではnilを評価するとfalseとして評価されるため、
\#2に到達できるのはnil以外となるためです。

## is_a?
上記の例ではNilかそれ以外を分類できましたが、逆にNil以外の型が複数ある場合には型の制限ができません。
もし以下のような例の場合、変数valueの型を制限するためにはどうするべきでしょうか。

```crystal
def return_int_or_str
  #Int32かString型の値を返す関数
  value = Random.rand(100)
  return value % 3 == 0 ? "fizz" : value
end
value : Int32 | String
value = return_int_or_str
```

この時のベストプラクティスは引数の型のインスタンスかどうかを調べるis_a?メソッドを使用することでしょう。

```crystal
p typeof(value) # => (Int32 | String)
if value.is_a?(Int32)
  p typeof(value) #1 => Int32
else
  p typeof(value) #2 => String
end
```
is_a?メソッドはインスタンスの型が引数で受け取った型、もしくはサブクラスの型のときにtrueを返します。
\#1に到達するのは変数valueがInt32型の時のみになるため、#1ではvalueはInt32型として利用することができます。
また、#2に到達するのはvalueがInt32型以外の為、上記の例ではString型となります。

## 型変化の例外
ここまで記載してきた型変化についてですが、クラス変数とインスタンス変数については例外です。
クラス変数とインスタンス変数については条件式を通過しても型は一定のままとなります。
クラス変数やインスタンス変数の型を変化させるためには一度メソッド内のローカル変数へ代入を行う必要があります。

```crystal
class Sample
  @value : Int32?
  def value
    if(@value)
      typeof(@value) # => (Int32 | Nil)
      #インスタンス変数、クラス変数は型制限が機能しないため、ここでもユニオン型として扱われる。
    end
    value = @value
    if(value)
      typeof(value) # => Int32
    end
  end
end
```
リストの中身を逆順にする2つの方法 （今日のPython Day8)

# 0. はじめに
　[『入門Python3 第2版』](https://www.amazon.co.jp/E5-85-A5-E9-96-80-Python-E7-AC-AC2-E7-89-88-Bill-Lubanovic-dp-4873119324/dp/4873119324/ref=dp_ob_image_bk)の各章の最後には復習課題があります。だいたいの問題は本を読み直せば解けると思うのですが、なぜか第5章 文字列の復習課題(p102-103)は初心者にとってはかなり難しいと思います。今日の問題は初心者でも解ける文字列の問題をつくりました。

##1. 問題
li = ["one", "two", "three"]の中身を逆順にして['three', 'two', 'one']としてください。

##2. 解答
解答その1

```python
li = ["one", "two", "three"]
print(li[::-1])
```

解答その2

```python
li = ["one", "two", "three"]
li.reverse()
print(li)
```

##3. 解説
リストの中身を逆順にするにはli[::-1]かli.reverse()のいずれかを用います。

##4. おまけトーク
　[Qiita トラブルシューティング・失敗集 【(半)自動更新: 2021年05月07日】](https://qiita.com/ming_hentech/items/1dfeb8951ccd704124aa#_reference-0c39b096218dd7bfb02e)に自分の記事がリンクされたのですが、これは自分の記事がトラブルシューティングに関する記事だったのか、それとも記事そのものが失敗だったのか、どちらなんですかね？後者でないことを祈っています。最後まで読んでいただき本当にありがとうございます。
PyTorch TensorDatasetについて

PyTorchでTensorDatasetを作成するときのメモ。

[torch.utils.data（公式ドキュメント）](https://pytorch.org/docs/stable/data.html)

## numpyからTensorDataset
### 1. インポート
```python
import numpy as np
import torch.utils.data
```

### 2. 入力データと教師データを準備
例として入力データと教師データをランダムに生成。

```python
# 入力データ
x = np.random.randn(100, 5)
# 教師データ
t = np.random.randint(2, size=10)
```

### 3. torch.tensor型に変換
[tensorのデータ型（公式ドキュメント）](https://pytorch.org/docs/stable/tensor_attributes.html#torch-dtype)

```python
x = torch.tensor(x, dtype=torch.float32)
t = torch.tensor(t, dtype=torch.int64)
```
### 4. torch.utils.data.TensorDatasetを生成
```python
dataset = torch.utils.data.TensorDataset(x, t)
```
### 確認
```python
# １つ目のデータを確認
print('入力データ:', dataset[0][0])
print('教師データ:', dataset[0][1])
```
<!--
## pandasのDataFrameからTensorDataset
DataFrameから直接TensorDatasetへの変換はできない。
一度、numpyに変換してからTessorDatasetへ変換する。

### 1. DataFrame
例として以下のようなパラメタ３つのデータで説明。

```python
df = pd.DataFrame(
    columns = ['p1', 'p2', 'p3', 'target'],
    data = [[1.0, 2.0, 3.0, 0], [4.0, 5.0, 6.0, 1], [7.0, 8.0, 9.0, 0]],
)
```

### 2. numpyに変換
values属性または、to_numpy()メソッドでnumpyに変換できる。

**入力データ**
```python
# values属性を使う
x = df.iloc[: , : -1].values
# to_numpy()メソッドを使う
x = df.iloc[: , : -1].to_numpy() 
```
**教師データ**
```python
# values属性を使う
t = df.iloc[: , 3: ].values
# numpyへの変換ではないが、Series型はTensorDatasetの引数に指定できる。
t = df['target']
```


### 3. torch.tensor型に変換して、TensorDatasetを生成
numpy変換後は、上記と同じ

```python
# torch.tensor型に変換
ｘ = torch.tensor(x)
t = torch.tensor(t)

# torch.utils.data.TensorDatasetを生成
dataset = torch.utils.data.TensorDataset(x, t)
```

## おまけ： データセットを訓練データ、テストデータに分ける
### 訓練データ数、テストデータ数を決める
```python
n_train = 80
n_test = 20
```

### 訓練データ、テストデータに分ける
```python
d_train, d_test = torch.utils.data.random_split(dataset, [n_train, n_test])
```

-->
<style>でCSSを設定する


```vuejs:src/App.vue
<style>
  div{
    border:1px solid blue;
  }
</style>
```


```vuejs:src/LikeNumber.vue
<style>
  div{
    border:1px solid red;
  }
</style>
```

![20210508-141646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/29b724c5-ac89-8298-69f1-666f67a1b75a.png)


基本：
-


（１）divと設定した時点で全てのdivに適応される。
（２）赤になっているのはCSSはあとから設定したものが指定され前のものは打ち消される。

![20210508-142139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/41c59331-f585-c833-663f-eeb9f98c8036.png)

```vuejs:src/App.vue
<style scoped>
  div{
    border:1px solid red;
  }
</style>
```

表示させたいファイルを限定するには「style scoped」とする。
＊その属性を持ったセレクターのあるものに対して色をつける。つまり指定された属性を持ったタグを指定してCSSを効かせていく。

＜参考＞
-

![20210508-143020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/f8bd82b2-7ff7-3943-149b-95ff54f7101f.png)



div外側のものと内側のものがあり
内側のdiv属性がdata-v-276663f0
外側のdiv属性がdata-v-7ba5bd90
それぞれ選んで色をつけることができます。
ただし２つ目divについてはdata-v-276663f0とdata-v-7ba5bd90が指定されている。
セキュリティに関する法令・ガイドライン等の一覧

# 1. 本記事の説明
- 情報セキュリティ・サイバーセキュリティに関する法令・ガイドライン等の一覧です。
- 認証制度やおまけ等も含みます。
- 本記事の内容は随時更新する予定です。

# 2. 日本
日本の法令と、政府機関や団体等が策定したガイドラインです。

### 2-1. 法令
- [個人情報保護法](https://www.ppc.go.jp/)
- マイナンバー法（番号法）
- 金融商品取引法（J-SOX法）
- サイバーセキュリティ基本法
- 不正アクセス禁止法
- 不正競争防止法

### 2-2. ガイドライン等（セキュリティ全般）
- [PMS（JIPDEC）](https://privacymark.jp/index.html)・・・いわゆるプライバシーマーク制度。
- [FISC安全対策基準（FISC）](https://www.fisc.or.jp/publication/pubcat/sm/)・・・金融機関向け。
- [政府統一基準（NISC）](https://qiita.com/taka0189469/items/5454c9252cd84143e2de)・・・政府（中央官庁等）向け。
- [地方公共団体における情報セキュリティポリシーに関するガイドライン（総務省）](https://www.soumu.go.jp/denshijiti/index.html)・・・地方公共団体向け。
- [サイバーセキュリティ経営ガイドライン（経済産業省、IPA）](https://www.meti.go.jp/policy/netsecurity/mng_guide.html)・・・大企業向け。
- [中小企業の情報セキュリティ対策ガイドライン（IPA）](https://www.ipa.go.jp/security/keihatsu/sme/guideline/index.html)・・・中小企業向け。

### 2-3. ガイドライン等（クラウド関連）
- [ISMAP（NISC、デジタル庁、総務省、経済産業省）](https://www.ismap.go.jp/csm?id=csm_ismap_index)
- [クラウドサービス提供における情報セキュリティ対策ガイドライン（総務省）](https://www.soumu.go.jp/menu_news/s-news/01cyber01_02000001_00001.html)・・・第3版を作成中。
- [クラウドサービス利用のための情報セキュリティマネジメントガイドライン（経済産業省）](https://www.meti.go.jp/policy/netsecurity/secdoc/contents/seccontents_000146.html)・・・2013年度版が最新（2021年8月時点）。別名、クラウドセキュリティガイドライン。
- [クラウドセキュリティガイドライン活用ガイドブック（経済産業省）](https://www.meti.go.jp/policy/netsecurity/secdoc/contents/seccontents_000147.html)・・・2013年度版が最新（2021年8月時点）。
- [クラウド情報セキュリティ監査制度（JCISPA）](https://jcispa.jasa.jp/)・・・クラウドセキュリティガイドラインに基づく監査制度。AWSもGCPも未取得。
- [クラウドサービス安全利用の手引き（IPA）](https://www.ipa.go.jp/security/keihatsu/sme/guideline/)・・・中小企業の情報セキュリティ対策ガイドラインの付録。

### 2-4. その他
- [情報セキュリティ10大脅威（IPA）](https://www.ipa.go.jp/security/vuln/10threats2021.html)・・・定番。

# 3. 国際
海外の法令等と、政府機関や団体等が策定した法令・ガイドラインです。

### 3-1. 法令等
- [FISMA（米国）](https://www.cisa.gov/federal-information-security-modernization-act)
- [GDPR（EU）](https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32016R0679)
- SOC（米国公認会計士協会）・・・委託先管理。
- HIPPA（米国）・・・医療向け。

### 3-2. ガイドライン等（セキュリティ全般）
- [ISO/IEC 27001：ISMS（ISMS-AC）](https://isms.jp/isms/index.html)・・・定番。
- [PCI DSS（PCI SSC）](https://ja.pcisecuritystandards.org/minisite/env2/)・・・クレジットカード業界向け。
- [CSF（NIST）](https://www.ipa.go.jp/security/publications/nist/index.html)
- [NIST SP800（NIST）](https://www.ipa.go.jp/security/publications/nist/index.html)
- [CIS Controls（CIS）](https://learn.cisecurity.org/control-download)
- NERC CIP（NERC）・・・電力向け。

### 3-3. ガイドライン等（クラウド関連）
- [ISO/IEC 27017：ISMSクラウドセキュリティ（JIPDEC）](https://isms.jp/isms.html)・・・ISMS＋クラウドセキュリティ。
- [FedRAMP（米国政府）](https://www.fedramp.gov/)

### 3-4. その他
- [OWASP Top 10（OWASP）](https://owasp.org/www-project-top-ten/)・・・定番。
- [MITRE ATT&CK（MITRE）](https://attack.mitre.org/)

# 4. おまけ
セキュリティ関連の記事や書籍等で紹介されることはあるが、セキュリティがメインテーマではないものや、よりテクニカルな内容が含まれるものを記載しておきます。

- COBIT
- COSO
- ITIL
- ITSMS
- CMMI
- Common Criteria
- [FIPS](https://www.ipa.go.jp/security/publications/nist/index.html)
- ITU

# 5. 更新履歴
- 2021/5/8：初版投稿
- 2021/5/10：CSF、CIS Controlsを追加
- 2021/5/11：SOCを追加
- 2021/8/22：地方公共団体における情報セキュリティポリシーに関するガイドラインを追加
- 2021/9/4：全面改訂
- 2021/9/18：不正競争防止法を追加
- 2022/1/14：ISMS部分の記述を見直し
- 2022/10/15：FISMA、HIPPA、NERC CIP、FedRAMP、ATT&CKを追加
/var/log/それぞれのログの中身について

## 勉強前イメージ

dmesg とは見るけど実際なにが出力されてるのかあんま理解してない
今回はcentos7の/var/log配下を見ててわからないやつ
今回省いたからって完璧に理解してるかって言われればそうじゃないけど、
ニュアンスわかるやつは省いてる

## 調査

### それぞれのログ

- /var/log/anaconda

これはディレクトリで中にもいろいろ入ってた。
インストーラーのログ。

```
[root@localhost log]# ll /var/log/anaconda
合計 2136
-rw-------. 1 root root   19164  1月 11 03:22 X.log
-rw-------. 1 root root   24967  1月 11 03:22 anaconda.log
-rw-------. 1 root root   16717  1月 11 03:22 ifcfg.log
-rw-------. 1 root root 1566747  1月 11 03:22 journal.log
-rw-------. 1 root root       0  1月 11 03:22 ks-script-fUFFTk.log
-rw-------. 1 root root       0  1月 11 03:22 ks-script-tyc80j.log
-rw-------. 1 root root  114301  1月 11 03:22 packaging.log
-rw-------. 1 root root   32742  1月 11 03:22 program.log
-rw-------. 1 root root   89599  1月 11 03:22 storage.log
-rw-------. 1 root root  308538  1月 11 03:22 syslog
```

- /var/log/audit

システム監査デーモンであるauditdのログファイルが保存されてるディレクトリで、
中に /var/log/audit/audit.log というファイルがある。
selinuxのポリシー違反など記載されている

- /var/log/boot.log

システムの起動時のログ

- /var/log/btmp

不正ログインの記録
バイナリで記録されている

- /var/log/wtmp

ログイン情報の記録
こちらもバイナリで記録されている

- /var/log/dmesg

システムの起動時からファイルシステムがマウントされるまでにカーネルが出したログ
dmesgコマンドでも見れるけど、ある程度古くなると削除されるのでその際はログを確認

- /var/log/lastlog

登録されているユーザの最終ログイン時刻を記載
バイナリなので、lastlogコマンドを使用して確認

- /var/log/secure

認証関連のログで、
sshやsudoコマンドに関するログが記載されています。

- /var/log/spooler

UUCP(Unix to Unix CoPy) というunixシステム間でのデータ交換のログが記録されているファイル

- /var/log/tallylog

ログインの失敗回数を記録するファイル。
似たようなファイルにbtmpがあるが、違いとしては以下
btmp → すべての不正なログインを記録
tallylog → ユーザーごとにログインの失敗回数を記録

- /var/log/yum.log

yumのログで、yumを使ったパッケージの追加・削除に関するログが記載されている

## 勉強後イメージ

結局細かいことを調べるときって、ググったりするかもだけど
ログインの失敗・成功・ユーザごとだったりそうじゃなかったりの個別のログがあるってことを知れたのが良かったかな

## 参考

- [必読！ログファイルとディレクトリ](https://thinkit.co.jp/article/711/1?nopaging=1)
- [ログファイルまとめ](https://gist.github.com/261shimizu/923d5a0e9c03ed247587d9adb668dd46)
【資格】Microsoft Power Platform Fundamental PL-900に向けた勉強

# Power Platform？おめぇ強いんか？
オッス、オラIT革命戦士！
オラが働いている会社グループ全体で、MicrosoftのPower PlatformやOffice365が使える環境が整備されたんだ！
オラ自身、すでにPower AppsやPower utomateで従来業務を自動化するアプリを簡単に作れちまって、すんげーおどれーたぞ！
こいつぁすげーぞチチ！

資格なんて取らずとも簡単にアプリ作れるのがPower Platformのいいとこなんだが、今回ちゃんと勉強してみようと思ったのが受験動機だ！
今回は、「Microsoft Power Platform Fundamental PL-900」という資格取得を目指してみっぞ！
よーし今日もIT革命すっぞ！

# 無料で受験できっぞ！
「Microsoft Power Platform Virtual Training Day: Fundamentals」っちゅー無料ウェビナーを受講すると、PL-900のバウチャーチケットゲットできちまうらしいんだ！
オラ知らなかったぞ！早速申し込んでくっぞ！
https://www.microsoft.com/ja-jp/events/top/training-days.aspx?activetab=a1%3aprimaryr3

# MS Learnで勉強すっぞ！
Microsoft Learnで実際にアプリケーションを作りながらPower Platformの各コンポーネントについて学習できんだ！
早速勉強してみっぞ！
https://docs.microsoft.com/ja-jp/learn/modules/introduction-power-platform/

 1 . 学習の開始
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461645/acf195ce-e79c-7f40-d01f-54109a49b8f8.png)

今日はここまで😎
【JavaScript】【サイコロ問題】関数を作成・利用し、サイコロを振った数と合計値を表示。

```javascript

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>ユーザー定義関数の利点</title>
</head>
<body>
   <script>
       function throw_dice(num){
           var sum = 0;
 
           for (var i = 0; i < num; i++) {
               // 1以上7未満の乱数を加算する
               sum +=  Math.floor(Math.random() * 6)  +1 ;
           }
           return sum;
       }
       document.write('<p>サイコロを1個振る: ' + throw_dice(1) + '</p>');
       document.write('<p>サイコロを1個振る: ' + throw_dice(1) + '</p>');
       document.write('<p>サイコロを2個振る: ' + throw_dice(2) + '</p>');
       document.write('<p>サイコロを2個振る: ' + throw_dice(2) + '</p>');
       document.write('<p>サイコロを3個振る: ' + throw_dice(3) + '</p>');
       document.write('<p>サイコロを3個振る: ' + throw_dice(3) + '</p>');
   </script>
</body>
</html>

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/4119b7ef-7f05-b5f6-504f-020750ef7732.png)


Math.random() * 6 で 0以上61未満の整数が得られる。

```javascript
sum +=  Math.floor(Math.random() * 6) ;
```

↓それに1を加えているので、「１以上７未満」の範囲の整数が得られるわけです。
つまり１〜６のサイコロで出来上がり

```javascript
sum +=  Math.floor(Math.random() * 6) + 1 ;
```
vscodeでc++のコンパイル


#test
自分用
https://c.keicode.com/devenv/build-program-visualc-1.php

文字コード

https://teratail.com/questions/47138

task.json 
https://kaminora.hatenablog.com/entry/2018/09/09/214920

path 
https://teratail.com/questions/291860
コンポーネント登録(共通)：命名のケース (Name Casing)



|コンポーネント登録(共通)：命名のケース|(Name Casing)|
|--|--|
|ケバブケース(kebab-case)|my-component-name|
|パスカルケース(PascalCase)|MyComponentName|

＊DOMだけはケバブケースで書くように求められる。
＊ブラウザは大文字小文字の判別ができないため。
＊コンポーネントではパスカルケースにしましょうと決まっています
配列の要素を変更するメソッドをまとめてみました。(JavaScript)

#はじめに
JavaScriptを触っている内に配列の要素に対してのアクションが理解できていないところがあり、
色々調べていたので簡単にですが少しまとめて見ました。

#配列に要素を追加するメソッド
- push
- unshift

##pushメソッド
pushメソッドとは、配列の末尾に要素を追加することができます。

例: `Array[a, b, c, d, (push)]`
[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push)

```js
"use strict";

{
  const scores = [80, 90, 40, 70];
  scores.push(6, 5);

  console.log(scores);
  //実行結果 [80, 90, 40, 70, 6, 5]
}
```
##unshiftメソッド
unshiftメソッドは、配列の先頭に要素を追加することができます。

例: `Array[(unshift), a, b, c, d]`
[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)

```js
"use strict";

{

  const scores = [80, 90, 40, 70];
  scores.unshift(5);


  console.log(scores);
  //実行結果 [5, 90, 40, 70]
}
```


#配列に要素を削除するメソッド
- pop
- shift

##popメソッド
popメソッドは、配列から最後の要素を一つだけ削除することができます。

例: `Array[a, b, c, 削除->d]`
[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)

```js
"use strict";

{
  const scores = [80, 90, 40, 70];
  scores.pop();

  console.log(scores);
  //実行結果 [80, 90, 40]
}
```
##shiftメソッド
shiftメソッドは、配列から最初の要素を一つだけ削除することができます。
例: `Array[削除->a, b, c, d]`
[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)

```js
"use strict";

{
  const scores = [80, 90, 40, 70];
  scores.shift();


  console.log(scores);
  //実行結果 [90, 40, 70]
}
```
#削除, 追加まとめてするメソッド
#spliceメソッド
spliceメソッドは、要素を削除、追加したりすることができます。
spliceメソッドの使い方`配列.splice(変更する開始位置, 削除数, 追加したい要素);`
例: `Array[a, (splice), b, c, d]`
　: `Array.splice(1, 0, 1000000);`

[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
)

```js
"use strict";

{
  const scores = [80, 90, 40, 70];
  scores.splice(1, 0, 1000000);


  console.log(scores);
  //実行結果 [80, 1000000, 90, 40, 70]
}
```

#スプレッド構文
スプレッド構文とは配列の前に`...`を書くことで配列の要素を展開してくれます。

[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

```js
"use strict";

{
  const otherScore = [12, 14]
  const scores = [80, 90, 40, 70, ...otherScore];

  console.log(scores);
  //実行結果 [80, 90, 40, 70, 12, 14]

}
```

#分割代入
分割代入とは個別に変数に代入することが出来る構文です。
[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

```js
"use strict";

{
  const scores = [80, 90, 40, 70,];
  
  const [a, b, ...others] = scores;
  console.log(a);     //実行結果 80
  console.log(b);     //実行結果 90
  console.log(others);//実行結果 array[40, 70]
}

```
LikeHeaderでローカル登録したコンポーネントをAppで表示する

(1)LikeHeader.vueファイルを作る

![20210508-131637.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/883a5a79-f123-b379-086c-fb3fffa6e47b.png)

（２）importしてコンポーネント登録する

```vuejs:src/App.vue
<template>
<div>
  <LikeHeader></LikeHeader>
  <LikeNumber></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./LikeHeader.vue";

export default {
  components: {
    LikeHeader: LikeHeader
  }
};
</script>
```

*ES6では

```vuejs:src/App.vue
  components: {
    LikeHeader
  }
```

キーとバリューが同じ場合は省略してかける

まずLikeHeaderファイルをコードディング
-
```vuejs:src/LikeHeader.vue
<template>
  <h1>いいね</h1>
</template>
```
マインドマップでAWSのデータ分析サービスを勉強【データ処理編】第１回 − Glue

AWSのデータ分析系のサービスを体系的に勉強シリーズです。

一般的なデータ分析流れに含まれる、データ収集、データ保存、データ処理、データ分析、データ可視化、といったステップにそれぞれが利用するサービスを学び、マインドマップに整理しました。
今回はデータ処理編のGlueです。

※ こちらの記事は、AWSの[ホワイトペーパー](https://aws.amazon.com/jp/whitepapers/)、[クラウドサービス活用資料集](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)とUdemyにある[AWS Certified Data Analytics Specialty 2021 - Hands on](https://www.udemy.com/course/aws-data-analytics/)コースを参照しております。

![AWS Processing Services - Glue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544279/7f276a03-6702-cc85-5873-83063cefc1d1.png)
Raspberrypi PicoでMicroPythonを使ってみたメモ２

#はじめに
Windows環境でTeratermを使って取り急ぎLチカを実行してみたが、これではPicoを起動する度にコピペが必要なため、作成したコードを起動時に自動で立ち上げることができない。この動作はマイコンとしてはどうよ、ということで対応する方法を調査した

#自動起動する方法
ネット上で先人の知恵を借りると、作成したコードをmain.pyなるファイル名でMicroPythonに送り込めば、起動即実行が可能ということがわかった。Thonnyを使えばこのあたりはよしなにやってくれるらしい(さすが開発環境)。またpythonで書かれた専用のファイル転送ツールもあるようだ。
PythonなしのWindows環境に固執していると、なかなか対応が難しい状況に思えてきた。

#開発母艦を"普通のRaspberryPi"に変更
少し悩んだ結果、手元にある普通のラズパイ(Linux)を開発環境に用いることに変更。最初からこっちを使った方が良かった。Windowsからsshでログインして使うことに。

#rshellをインストール
pythonで動くrshellというツールが便利そうなのでインストール

```
pip3 install rshell
```

PicoをラズパイのUSB端子に接続し、以下のコマンドを入力すると、MicroPython側のファイルシステム(？)にアクセスできる

```
rshell --buffer-size=512 -p /dev/ttyACM0
```

以下のようなメッセージが表示されてコマンド入力状態に

```
Using buffer-size of 512
Connecting to /dev/ttyACM0 (buffer-size 512)...
Trying to connect to REPL  connected
Retrieving sysname ... rp2
Testing if ubinascii.unhexlify exists ... Y
Retrieving root directories ... 
Setting time ... May 08, 2021 11:45:58
Evaluating board_name ... pyboard
Retrieving time epoch ... Jan 01, 1970
Welcome to rshell. Use Control-D (or the exit command) to exit rshell.
/home/pi> 
```

#rshell環境でmain.pyをMicroPython側にコピーする
MicroPythonのファイルシステムに移動するには/pyboardにcdする。ここには何も置いていないことがわかる。

```
/home/pi> cd /pyboard/
/pyboard> ls
/pyboard> ls -al
```

使えるコマンドを確認し、母艦ラズパイで作成したmain.pyをMicroPython側(/piboard以下)にコピーする

```
/pyboard> help

Documented commands (type help <topic>):
========================================
args    cat  connect  date  edit  filesize  help  mkdir  rm     shell
boards  cd   cp       echo  exit  filetype  ls    repl   rsync

Use Control-D (or the exit command) to exit rshell.
/pyboard> cp /home/py/main.py .
/pyboard>

```

Ctrl-Dでrshellを抜け、Picoを再起動するとmain.py(Lチカ)が自動実行された(目的達成)。
MSofficeを閉域で使う場合のハマりどころ

自治体のネットワークなど、インターネット接続がない環境でMSofficeを使用する際に発生した問題についてのメモです。

#起動に時間がかかる（Access2016など）
物理的にLANに接続されているけれども、そのネットワークがインターネットに繋がっていない場合に起こります。LANケーブルを抜いて起動すれば発生しませんが不便です。officeがMS社に接続しようとして失敗しているために発生します。
以下のいずれかで解決します。

+ 端末のhostsファイルでMS関係のドメイン解決をローカルホストに向ける
![hosts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/58373fb6-f090-17f9-b248-c9adba2ccb8a.png)



+ 端末が使用するDNSサーバーについて、リカーシブモードでの動作を抑制する。
![DNS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/7866eefb-062f-a3c6-1d6f-1f2799bba258.png)


#謎のaria-debug-xxxx.logが生成される、ファイルも開いていないのにやたらとCPU使用率が高い（2019,2016など）
詳細な条件は不明ですが、Officeを使用中にファイルも開いていないのにCPU使用率が50％を超えたり、GBサイズのaria-debug-xxxx.logというファイルが、ユーザー\AppData\Local\Temp\に大量に生成されることがあります。データ収集プログラム(Officeテレメトリ)がMSにデータを送信しようとして失敗しているために発生します。

+ 以下のレジストリキーを追加することで解決します。
[HKEY_CURRENT_USER\Software\Microsoft\Office\Common\ClientTelemetry]
"DisableTelemetry"=dword:00027100
+ 上記のキーを1に設定するよう推奨する記事がありますが、その場合は元に戻ってしまう可能性があるようです。

###### 参考リンク　
[DisableOffice Telemetry Data Collection](https://social.technet.microsoft.com/Forums/en-US/a9e332df-0895-4da9-9733-4d2bcfa4919c/disable-office-telemetry-data-collection?forum=officeitpro)
エラー：  The template root requires exactly one element 


![20210508-131637.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/1407ce11-5edb-a338-2af0-c85add1fc7b1.png)

複数の要素を入れる場合は
-
divタグなどで１つに括ってあげる。

```vuejs
<template>
  <p>いいね({{ number }})</p>
  <button @click="increment">+1</button>
</template>

<script>
export default {
   data() {
     return {
       number: 7
     };
   },
   methods: {
     increment(){
       this.number += 1;
     }
   }
};
</script>
```

```vuejs
Failed to compile.

./src/LikeNumber.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/maedatakuo/projects/udemy-vuejs/src/LikeNumber.vue
  3:3  error  The template root requires exactly one element  vue/valid-template-root

✖ 1 problem (1 error, 0 warnings)
```


```vuejs
<template>
<div>
  <p>いいね({{ number }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
   data() {
     return {
       number: 7
     };
   },
   methods: {
     increment(){
       this.number += 1;
     }
   }
};
</script>
```

![20210508-131409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/c48d7811-516b-cec3-4e82-5e16c608f895.png)
お名前.com の登録IPアドレスをLinuxから更新

必要な情報は
・お名前ID
・パスワード
・ホスト名
・ドメイン名

ホスト名の事前登録が必要です。
以下のコマンドで「お名前.com」のIPアドレスを更新できます。

```shell:
echo -e "LOGIN\nUSERID:[お名前ID]\nPASSWORD:[パスワード]\n.\nMODIP\nHOSTNAME:[ホスト名]\nDOMNAME:[ドメイン名]\nIPV4:$(curl -s globalip.me)\n.\nLOGOUT\n." | openssl s_client -connect ddnsclient.onamae.com:65010

```

例えば
・お名前ID 12345678
・パスワード passwd_0123
・ホスト名 www
・ドメイン名 mydomain.com
であれば

```shell:
echo -e "LOGIN\nUSERID:12345678\nPASSWORD:passwd_0123\n.\nMODIP\nHOSTNAME:www\nDOMNAME:mydomain.com\nIPV4:$(curl -s globalip.me)\n.\nLOGOUT\n." | openssl s_client -connect ddnsclient.onamae.com:65010

```
になります。
ncuコマンドの競合解消方法

# はじめに
npm-check-updatesのncuコマンドが競合して使えなかったのでその解消方法
# まず実行
とりあえずncuを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234613/ec213ff2-6c92-76bd-9984-3fea6e86f23f.png)
あれ?何でこんなことになるんだ?
# 対策
コマンドプロンプトで```where ncu```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234613/edb9e1e7-24e5-00ca-6387-57ffcc0d2424.png)
NVIDIAくんが邪魔をしておりますね
コマンドプロンプトを管理者として実行し、```Start C:\Windows\system32\rundll32.exe sysdm.cpl, EditEnvironmentVariables```を実行して環境変数を変更します
Pathの中に```C:\Program Files\NVIDIA Corporation\Nsight Compute 2021.1.0\```があるので、その上に```C:\Users\user\AppData\Roaming\npm```を書いて保存します
その後、再起動すればncuコマンドが使えます
【Vue】v-selectで選んだ値を取得する方法

##はじめに
v-selectで開発をしている際に、メソッド経由でイベントの値をどのように取得するかを少し戸惑ったのでメモします。

##経緯
v-selectで表示される値（本のタイトル）を選択した際に、選択時の値（本のタイトルid）を取得したい時に、どのようにするのがベストプラクティスなのかを少し悩みました。

具体的には以下のようなv-selectの時です。

```Trouble.vue

<template>
  ...
  <v-select 
   v-model="title"
   :item="titleText"
   @change="fetchTitle"
   item="text"
   item-value="value"
   label="本のタイトルを選択"
   dense />
  ...
</template>
```

##方法

結論：**イベントハンドラ関数の使用をすること**

```Example1.vue

<template>
  ...
  <v-select 
   v-model="title"
   :item="titleText"
   @change="fetchTitle" 
   item="text"
   item-value="value"
   label="本のタイトルを選択"
   dense />
  ...
</template>

<script>
  ...
  fetchTitle (event) {
    // eventに選択した値が含まれている
  }
  ...
</script>
```

上記の``v-select``の``v-on``で``fetchTitle（）``イベントメソッドを実行する際に``fetchTitle``のように括弧を省きます。
省くことでイベントオブジェクトにアクセスできることで、``v-select``で選択した値を取得することができます。

-----------

```Example2.vue

<template>
  ...
  <v-select 
   v-model="title"
   :item="titleText"
   @change="fetchTitle(titleText, $event)" 
   item="text"
   item-value="value"
   label="本のタイトルを選択"
   dense />
  ...
</template>

<script>
  ...
  fetchTitle (titleText, event) {
    // eventに選択した値が含まれている
  }
  ...
</script>
```

上記のようにイベントメソッドに``$event``のオブジェクトを渡すことで他の引数も渡すことができます。

##例題

```Example.vue
<template>
  <div id="app">
    <ul>
      <li v-for="example in examples">
        <input type="text" @change="onChange(example.id, $event)">
      </li>
    </ul>
  </div>
</template>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      examples: [
        { id: 1, name: 'A' },
        { id: 2, name: 'B' },
        { id: 3, name: 'C' }
      ]
    }
  },
  methods: {
    onChange(id, event) {
      console.log(id)
      console.log(event)
    }
  }
})
</script>
```

##参照
https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9
XMC4800 Relax EtherCATキット ②EtherCATサンプルプログラムを動かす(マスター側事前準備)

# 機材
Windows PCをEtherCATマスターとして利用します。


- PC(CPU:Corei7-3770, メモリ:8GB, OS:Windows10 Home)

- ネットワークインターフェース([Intel Gigabit CT Desktop Adapter](https://www.dospara.co.jp/5shopping/detail_parts.php?bg=1&br=101&sbr=35&mkr=2&ic=95685&lf=0))
　※EtherCATマスタとして使うにはIntel製推奨のため別途増設（ＰＣ付属はRealtek製だった)。[こちら](https://sites.google.com/site/twincathowto/insutoruto-ji-ben-she-ding/riarutaimuisanettodoraibanoinsutoru)に記載されているネットワークチップが搭載されているものを選びます。

- LANケーブル

# TwinCATをインストール
Beckhoffから提供されているTwinCAT3をインストールすることでＰＣがEtherCATマスタになります。[TwinCAT HowTo](https://sites.google.com/site/twincathowto/home)と[TwinCATでメイドを動かす](https://eetimes.jp/ee/articles/1603/31/news037.html)を参照しながら出来ました。

1. [Visual Studio 2019 Professional](https://visualstudio.microsoft.com/ja/downloads/)をインストールします(※残念ながらcommunityではダメみたいです)。
とりあえず下記の項目をインストールしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/4e14cd63-cfc2-e707-5508-3a882c58aacd.png)
1. [Windows Driver Kit](https://www.microsoft.com/en-us/download/details.aspx?id=11800)をインストールします。手順は[こちら](https://eetimes.jp/ee/articles/1603/31/news037_6.html)を参照します。

1. [TwinCAT3 Engineering](https://www.beckhoff.com/en-en/products/automation/twincat/te1xxx-twincat-3-engineering/te1000.html)をインストール。ダウンロード時にユーザ登録が必要です（無償）。手順は[こちら](https://eetimes.jp/ee/articles/1603/31/news037_7.html)を参照します。インストーラのダウンロード画面。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/5e6f3a22-587c-8deb-9548-ec861b690c17.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/0d0bb203-dd1f-f311-522f-f0651ee33453.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/46dbdca4-df34-7771-ea38-6759d0cdf457.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/a20a8218-333d-68d6-73c6-3d841baa3b27.png)

1. TwinCATを立ち上げてドライバを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/995b6c13-9576-113f-1756-c69125496722.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/3ecb505e-5e22-6310-2611-abd4ae5dd2c1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/854bd9a2-8f52-4686-142e-2effe9410ad1.png)
「Compatible device」 に増設したIntel製Ethernetアダプタが表示されているので、選択してInstallボタンを押すと「Installed and ready to use devices」に変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/68e692e4-ea24-b712-9c8f-75e43d769aea.png)
【Ruby 】【閏年問題】西暦の年数および月を入力し、その月の日数を求めよ

```ruby
def get_days(year, month)
  month_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
              #[ 0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11]列目
    if month == 2   
        if year % 4 == 0  
            if year % 100 == 0 && year % 400 != 0 
              days = 28
            else
              days = 29
            end
        else
          days = 28
        end
    else
      days = month_days[month - 1]
    end
  return days
end


puts "年を入力してください："
year = gets.to_i
puts "月を入力してください："
month = gets.to_i

days = get_days(year, month)
puts "#{year}年#{month}月は#{days}日間あります"
```

閏年は以下の判断基準で決まる。

①その西暦が4で割り切れたら閏年である
②ただし、例外として100で割り切れる西暦の場合は閏年ではない
③ただし、その例外として400で割り切れる場合は閏年である

つまり、西暦2000年は閏年であり、西暦2100年は閏年ではありません。
これらに対応できるように、出力例と雛形をもとに実装しましょう。
Rustで自動微分

# はじめに
Rustで[自動微分するもの](https://github.com/bokutotu/autograd)を作ってみました。よければスターとかissueとかをしてくれるととても喜びます。(友達に言ってみたけど見事にスルーされた。悲しい)
また、この実装は気持ち悪い。この書き方はRustらしくないなどご指摘もしていただきたいです。よろしくお願いします。（でもマサカリは投げないで）
また、パフォーマンスを求めるのであれば[しっかりとしたクレート](https://github.com/raskr/rust-autograd)も存在しています。

# 使い方
私が作成したクレートの簡単な使い方は以下のコードの様になります。
現在実装してある、計算グラフの演算方法は、行列積(`matmul`)、加算(`add`)、要素積or積(`product`)です。これらの方法は、サンプルコードのように実装を行えば計算グラフを構築することができます。

```rust
use autograd::function::*;
use autograd::node::Node;
use autograd::tensor::Tensor;

fn main() {
    // 勾配情報を持つtensorの定義(この場合はスカラー)
    let x = Tensor::new(&[]);

    // y = x * x + xの計算グラフを定義する
    let y = add(&product(&x, &x), &x);

    // 計算グラフの購買情報をリセット
    y.zero_grad();
    
    // 購買情報を伝搬する前にグラフの最も下のノードの勾配をセットする
    y.set_grad();
    
    // 計算グラフの計算を行う
    y.forward();

    // 計算グラフの勾配を計算する
    y. backward();
}
```

# 基本的な構造
※この成果物的なものはなるべく他のクレートを見ないで自分のコーディング能力だけで実装したものです。そのため、一部をのぞき全て自分で実装しています。クソコードの可能性があります。

## 行列計算ライブラリ
行列計算ライブラリはRust用のものも存在します。私は[`ndarray`](https://docs.rs/crate/ndarray/0.14.0)を利用しました。

## 勾配情報を持つ構造体
自動微分では、勾配情報を持つためそれ専用の構造体を定義しました。

```rust
#[derive(Debug)]
pub struct Tensor<'a, T: Float> {
    pub input: UnsafeCell<NdArray<T>>,
    pub grad:  UnsafeCell<NdArray<T>>,
    pub dim: &'a [usize]
}
```
`dim`はtensorの次元を表し, `input`はこのテンソルが持つ計算するための値orテンソルを持ち`grad`は勾配を持ちます。また、構造体自体はイミュータブルでも`input`と`grad`は更新する必要があります。そこで`UnsafeCell`を用いました。

この構造体は、自動微分をする際の全てで用いられる構造体です。

# Nodeトレイト

計算グラフのノードとしてのトレイトを実装します。

```rust
pub trait Node<'a, F: Float> {
    fn get_input(&self) -> *mut NdArray<F>;
    fn get_grad(&self) -> *mut NdArray<F>;
    fn reset_grad(&self);
    fn shape(&self) -> &'a [usize];
    fn forward(&self) ;
    fn backward(&self);
    fn zero_grad(&self);
    fn set_grad(&self);
}
```
このトレイトは全ての計算グラフの操作を実装したトレイトになっています。

* `get_input`: コードの通り、Nodeにおける値の生ポインタを返します。
* `get_grad` : コードの通り、Nodeにおける勾配の生ポインタを返します。
* `reset_grad` : ノードの勾配をゼロにします。
* `shape` : ノードのテンソルの次元を返します。
* `forward` : ノードにおける演算or計算グラフ自体の計算を行います。
* `backward` : ノードのor 計算グラフ全体の勾配を計算します。
* `zero_grad` : グラフの勾配をゼロにします。
* `set_grad` : グラフの一番最後のノードの勾配を1に設定します。

## 計算グラフの構築方法

グラフの演算処理(`add`, `matmul`, `product`)はノードとノード（`Node`トレイトが実装されているもの）をつなげた計算グラフにおけるノードを出力し、ノード同士を繋ぎながら計算グラフを構築していきます。

```rust
let x = Tensor::new(&[19, 19]);
let y = Tensor::new(&[19,19]);

// xとyの加算を行う計算グラフ
let add_x_y = add(&x, &y);

let z = Tensor::new(&[19,19]);

// add_x_yとzの積算をする計算グラフ
let product_z_add_x_y = product(&z, &add_x_y);

```
上のコードでは、計算グラフは


```
x
  \
   +  (add_x_y)
  /  \
y     \
       ×-----> product_z_add_x_y
      /
     /
    /
   /
  /
z
```

が構築されます。

## 計算グラフの計算、勾配計算方法

グラフの演算処理が返り値として得られたノードはノードとノードを繋いだ計算グラフそのものと見なすことができます。その計算グラフを実行するにはサンプルコードに書いてあるとおり、`forward()`を行えばよいです。また、一番最後のノードの勾配を1に設定する、`set_grad`を行い、`backward()`を行えば全てのノードの勾配を計算することができます。

# 今後の課題

* GPUに対応させる
* functionに入力されるテンソルの次元チェッカーを実装する（forwardする前にエラーを吐かせたい）
* ニューラルネットでよくあるものを実装したい
オリジナルCMSを自作する。（アイデアまとめ＆意見募集）

#概要
　CMSを自作しようと考えています。一応方針は固まりつつありますが、
どんな機能が必要か、どんな機能に需要があるのか。そもそも今の方針は正しいのか。
　意見が欲しくてこんな記事を書いてみました。
　一応qiitaに質問投稿の場所がありますが、CMS自作の進捗はこの記事に追記するつもりなので多分通常の記事の方がいいかなと思い記事を書きました。
　意見のある人はぜひコメントをお願いします。

#現在の方針
　php　1ファイル+sqliteで作ろうと思っています。もしファイルが増えても3~4個とかでしょうか。
　CMSの種類としては調べた感じヘッドレスCMSが一番近いんじゃないかなと思いました。
　誤解の無いように書くと機能をすべてAPIで提供するつもりです。といっても管理画面ぐらいは提供しないとさすがに使いづらくなりそうですが。
　APIはREST　APIとして提供します。（といっても色々考えているうちに画面含めて実装した方がいいのではと考えが変わっていますが。）

#実装予定の機能
* 記事投稿・削除
* 記事内容取得
* 記事一覧取得
* 下書き機能
* ユーザー管理機能
* バックアップ機能（この機能のためにsqliteを選びました。）
* カテゴリ一覧取得（追記）

#現在の実装状況
とりあえず開発環境としてxamppをインストールしてsqliteを有効にしただけです。
とりあえず上記の機能の実装を目指してその後意見をもとに追加の機能を実装したり、方針を変更したりするつもりです。
#余談
 sqliteを選んだのはバックアップ機能を実装したいと思ったのと後gitとの連携を考えてでした。ただphpでgitと連携するいい参考サイトが無かったので現状見送ってます。
#追記
 sqliteがファイル一個で構成されてるから複数人からの同時接続できないの忘れてました。どうしましょうか。とりあえず気にせず実装して様子見てみます。
#追記（5月14日）
　入出力のフォーマットが一致させられないから編集画面用意しようかと思ったけどよく考えたらどうとでもできますね。
　また、前回の追記のsqliteが同時編集できない問題は一応解決策が思いつきました。ちょっと実装が面倒ですけどどうにかなりそうです。
#追記（5月24日）
　せっかくなので編集画面の自作に挑戦してたのですが細かいバグが修正できていません。できる限り自作してみようかと思っていましたけど正直自作は難しいかもしれません。（これ以外にも自作するのが難しい所が何か所かありますし）でもそうなると完成したCMSを導入したい人が困ると思うんですよね。まあ一応完成したら公開するつもりではありますけどそもそも導入する人がいないか。ということで同時進行でライブラリとか使いまくっているバージョンを作りたいと思います。ひとまずライブラリ使いまくっているバージョンの開発に挑戦して様子を見てところどころ自作に置き換える方針に切り替えたいと思います。
【Ruby 】1〜100までの数字を出力せよ。「3の倍数」の時は数字の代わりに文字列でFizz「5の倍数」のときはBuzz、3と5の倍数である「15の倍数」のときはFizzBuzzと出力。 上記以外は数値そのまま を表示。

```ruby
def fizz_buzz
  (1..100).each do |num|
    if num % 15 == 0
      puts "FizzBuzz"
    elsif num % 3 == 0  # 値が3の倍数のときだけ、"Fizz"という出力に置き換える
      puts "Fizz"
    elsif num % 5 == 0
      puts "Buzz"
    else
      puts num
    end
  end
end

fizz_buzz
```

※3と5の倍数である「15の倍数」のときは

"FizzBuzz"のみを表示して

"Fizz"及び、"Buzz"及び、数値を表示してはならない
Typescriptとは何か？

TypeScript はマイクロソフトによって開発され、
メンテナンスされているフリーでオープンソースのプログラミング言語です。

TypeScriptはJavaScriptに対して、省略も可能な静的型付けと
クラスベースオブジェクト指向を加えた厳密なスーパーセットとなっています。

Javascriptにコンパイルされる、静的型システムがついたJavascriptの上位集合です。


↓TypeScriptを使う３つの理由

ドキュメントとしての側面
---

tsc command　＝　type　script　compiler

```index.ts
let hello : string = "hello";
console.log(hello);
```

```
% tsc index.ts
```

とすると
[![Image from Gyazo](https://i.gyazo.com/c8494ccf56c531019b13d5e17fd460c2.png)](https://gyazo.com/c8494ccf56c531019b13d5e17fd460c2)
同じ名前の拡張子jsファイルが生成されます。

```
% node index.js
```

と打つと

```
 hello
```

と出力されます。

---


Linterとしての側面
---

```thanks.ts
console.log(thanks);
```

この一行だけの状態でtsc すると
[![Image from Gyazo](https://i.gyazo.com/61f8beffb45441f55651b869d118602a.png)](https://gyazo.com/61f8beffb45441f55651b869d118602a)
コンパイルする時点でエラーを伝えてくれます。

---

ダウングレードESへのコンパイラとしての側面
---
ES3、4、5、６、next
どこまで対応できるかを載っけたもの↓

https://kangax.github.io/compat-table/es6/
WebComponentsメモ

# WebComponents
カプセル化したコンポーネントスタイルをWeb標準（どのブラウザでも）で利用可能とするもの。
## そもそも
react + styeled-component(CSS in JS)のような構成を一般化したもの（と理解）。
標準、ということで、JSさえ用意できれば、CDNなどを通して広く使えるコンポーネントが提供できる、ということか。

## styled-component（CSS in JS)
半々くらいで賛否が別れているような状況
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/1761f27b-68e1-eb92-778f-2fac4e7cf56a.png)


## カスタム要素
カスタムタグをJSで追加すれば、その後のHTML内で利用できる。

```javascript
customElements.define('word-count', WordCount, { extends: 'p' });
```

```html
<word-count></word-count>
```

## シャドウDOM
DOMツリーのカプセル化。シャドウDOMと呼ばれる仮想ツリーを構築し、名前空間を構築する。
最大のメリットはなんといってもCSSのカプセル化。

## template
* タグの組み合わせの集合体
* 描画されない
* カスタム要素に読み込める

## slot
* カプセル化に対するパラメータ