OmniAICreator/Qiita-1.07M huggingface dataset:
Xiaomi Redmi Note 9SにAPKがインストールできない


## はじめに
XiaomiのAndroid端末 `Redmi Note 9S` を入手したので開発に使ってみようと思ったところ
APKのインストールができない現象に遭遇しました。色々と調べたら解決方法がわかったのでメモっておきます。

## Android Studioからデバッグ実行すると...
このようなエラーが出て、APKがインストールされません。

![スクリーンショット 2020-10-21 17.48.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102273/30bf02cb-a4ee-76bb-d818-8c2a270b123b.png)

USBからのAPKインストールが無効になっているようです :thinking: 

ADBコマンドでインストールしても同じ結果です :cry: 

``` 
Installation did not succeed.
The application could not be installed: INSTALL_FAILED_USER_RESTRICTED
```





 
## 原因
Xiaomiの独自機能によってAPKのインストールが制限されているようです。

## 解決方法
開発者向けオプションの中にある `MIUIの最適化をオンにする` をオフにすると、APKをインストールできました。

#### １． `設定` → `開発者向けオプション` を開いて
![device-2020-10-21-174935のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102273/1658f5bf-b245-9a17-0d6b-3c3b8db1be1a.png)

#### ２． MIUIの最適化をオンにするをオフにする
![device-2020-10-21-175001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102273/99e0f121-32e2-6e4d-0f88-14001daa8be0.png)

## 注意事項
ダイアログに表示されている通り、MIUIの最適化の設定をオフにすると動作に影響があるようです。
(どの動作がどのように変わるのか具体的にはわかりませんでした。)
`Redmi Note 9S` を日常使用するならこの設定は元に戻したほうが良さそうです。

また、一般的なユーザーはこの設定を変更することは稀なので、Xiaomiの端末で動作確認するときは
最適化をオフにしてAPKをインストールし、オンに戻してからテストしたほうが良さそうです。
(最適化のオフ・オンでAPKの動作が変わる可能性があるため)

## 参考
* [Xiaomi の端末に USB 経由で apk をインストールできない](https://qiita.com/notona/items/ed46cdd63ef7c23f00d7)
* [What is MIUI optimization?](https://android.stackexchange.com/questions/191228/what-is-miui-optimization)
deviseでsign up しようとすると自動でroot_pathにリダイレクトしてしまう

# 結論
ログイン時は新規登録とログインのリンクを表示しないように設定する。
明らかにわかることもボーッと同じことを考えていると抜け出せなくなるのでリフレッシュするか人に話すことが大切。


# 現象
deviseでsign up しようとすると自動でroot_pathにリダイレクトしてしまっていました。
~~なぜかデータベースに保存されていたものを削除したら新規登録ページに行けました。~~

~~rails sを立ち上げているターミナルを観察すると、
Redirected to http://localhost:3000/
という文字がありました。~~
~~実際新規登録をクリックしたときに一瞬URIが表示されているのが見えていました。~~

二重でログインできないようになっていると考えられる。当たり前。
Log Analyticsエージェントとコスト

## 動機

mackerelやDatadogといった監視サービスはありますが、
Azure Monitorはダッシュボードやアラートも統合されており、Azureをメインに使っている場合はこれで十分な感があります。
Azure外のマシンにエージェントを入れてLog Analyticワークスペースに監視データを送信する方法とどの程度費用がかかるのか気になったので検証してみました。

## エージェント

Azure MonitorエージェントとLog Analyticsエージェントがあります。
Azure MonitorエージェントはDCR(データ収集ルール)を作成しVMに関連づけるというものです。
Azure Monitorエージェントはプレビュー段階なので、Log Analyticsエージェントの方を使います。

## Log Analyticsワークスペース作成 

ポータルよりLog Analyticsワークスペースを作成します。

![2020-10-23_16h43_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41243/7fb8bd79-806e-74ec-850f-999c2cc98328.png)

## Log Analyticsエージェントインストール

今回はLinuxサーバー(CentOS 7)で試してみます。
作成したLog Analyticsワークスペースのエージェント管理よりLinuxサーバーのタブを選択し
「Linux 用エージェントをダウンロードおよびオンボードする」のコマンドをコピーして、
インストールしたいLinuxサーバーで実行します。

![2020-10-23_17h45_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41243/fb7415e5-533b-96a0-d502-2b593ad99ba0.png)


これだけでエージェントのインストールは完了します。

![2020-10-25_17h18_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41243/60828b01-5741-e6d9-d23f-b8bb5bcc918e.png)


Log Analyticsワークスペースも接続状態になります。

![2020-10-25_17h10_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41243/6a47fe41-c5da-103f-8fb7-ede4beca5302.png)

## 収集データの設定

待っていましたが、Heartbeatしか収集されません。
収集対象の設定が必要でした。

Log Analyticsワークスペースの詳細設定よりData > Linux Performance Countersを選択し、
クイックスタート用の一般的なものが用意されているのでそちらを選択してみます。

![2020-10-25_17h11_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41243/d4bf6a95-2ae1-1bac-2cd1-5c27b35b79c6.png)

しばらくすると無事収集されているようでした。

![2020-10-25_17h29_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41243/b531bd8d-d960-59e6-203f-9d143a67f919.png)


## コスト

> 10 秒間隔での特定のカウンターの収集量の大まかな見積もり値は、インスタンスごとに 1 日あたり約 1 MB です。

とドキュメントにはありましたが、
わたしの環境では13個のパフォーマンスカウンターで1日40Mでした。


![2020-10-23_11h24_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41243/9e511fed-2172-79d0-989e-0c4a339189ab.png)

30日で1.2Gで東日本だと￥450くらいです。
普段業務で使っているものより高いような気がして思い見直してみると

データインジェント
米国東部　 ￥257/GB
東日本　￥374/GB

と、結構な価格差がありました。
監視で使う分には米国でも特に困っていません。こだわりがなければ安いリージョンを選んでおくのがいいのではないでしょうか。
データ量が増えると結構な差になります。


## その他

収集ルールを一元管理できてよさそうなAzure Monitorエージェントも試してみたいと思い、
DCRを作って設定してみましたが、収集されているのかよくわかりませんでした。
リージョンも制限されているようです。
まだプレビューのようなので今後に期待です。


## 参考ドキュメント

https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/agent-linux
https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/data-collection-rule-overview
https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/manage-cost-storage
Xcode12でCarthageビルドがエラーになる件の回避策に関する情報

2020/10/26現在の情報です。

表題の件、公式の回避方法が公開されました。
[Xcode12Workaround.md](https://github.com/Carthage/Carthage/blob/master/Documentation/Xcode12Workaround.md)

- Apple Silliconの登場によってarm64アーキテクチャーが実機とシミュレータで重複してしまうことが原因である模様
- この回避策を行ったビルドでは（シミュレータ用のarm64アーキテクチャーを削除するため）Apple SilliconのMacでは使えないという制約がある模様
- まもなく根本的な対策が行われる模様

どうやら根本的な対策が追って行われるようですが、新しいバージョンでは使い方とか設定方法が変わったりしないんですかね？
私は、今のうちにCocoaPodsに乗り換えるのも一つの選択肢かなと思います。

Firebaseみたいな有名どころのSDKもまだCarthageには正式対応していないですし、無理してCarthageを継続する意味はそんなにないような。。。
（※[FirebaseのSwift Package Manager(SPM)対応]((https://github.com/firebase/firebase-ios-sdk/blob/master/SwiftPackageManager.md))もBetaなので、SPMは個人的にはちょっと時期尚早感があります…）

ちなみにこの問題の元々のissueはこちらです。
https://github.com/Carthage/Carthage/issues/3019
iOS/Androidアプリのセキュリティ関連の参考リンク

ちょっとしたきっかけがあって、iOS/Androidアプリのセキュリティに関して情報を収集する必要がありました。

せっかくなので私が出会った良記事をシェアしたいと思います。

## [OWASP Mobile Top 10](https://owasp.org/www-project-mobile-top-10/)

- OWASPは「Open Web Application Security Project」の略で、「オワスプ」と読むようです。
- ソフトウェアのセキュリティ環境や、セキュリティを高めるための技術を共有・普及することを目的として活動しているボランティア組織だそうです。
- Webアプリの[OWASP Top 10](https://owasp.org/www-project-top-ten/)が有名ですが、OWASP Mobile Top 10はそのモバイルアプリ版です。
- ソフトウェアを開発する上で、セキュリティとして警戒をしなければいけない項目のTOP10をレポートしています。
- 何しろ有名どころなので、まずはこれを押さえる必要があると思います。顧客や上席に対する説明ではOWASPのレポートを参考文献に記載にすると説得力が増しそうです（笑）

## [OWASP Mobile Top 10 - 2016 日本語訳](https://github.com/LAC-Japan/OWASP-Mobile-Top-10-2016)

- OWASP Mobile Top 10の最新版レポートは2016年なのですが（ちょっと前なのですね）、有志によるその日本語訳です。

## [【セキュリティ】OWASP準拠の脆弱でない iOS/Androidアプリ開発を行うためのポイントを解説](https://at-virtual.net/securecoding/%e3%80%90%e3%82%bb%e3%82%ad%e3%83%a5%e3%83%aa%e3%83%86%e3%82%a3%e3%80%91owasp%e6%ba%96%e6%8b%a0%e3%81%ae%e8%84%86%e5%bc%b1%e3%81%a7%e3%81%aa%e3%81%84-ios-android%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b/)

- OWASP Mobile Top10カテゴリに準拠しつつ iOS/Androidアプリ開発を行うためのポイントを解説してくれている、実践的な記事です。

## [iOS/Android セキュリティガイドライン](https://qiita.com/alt_yamamoto/items/f67a7ddb6ba13cca7369)

- 実務/実装に即した内容になっている素晴らしい記事です。
JSONをconsole.logで整形して表示する（JSON.stringifyでインデント付き展開）

# はじめに
JSONデータをインデントと改行で整形（フォーマット）して`console.log()`で出力します。
方法は、**JSON.stringify()に3つの引数を指定するだけで簡単です。**

- PHPのvar_dumpやprint_rのようなことをしたい。

のような場合に便利に使えます。
なお、**[object Object]**で表示された、**オブジェクトの中身を確認したい**場合は`console.dir()`が適しています。


# JSON.stringify()を使う
```javascript:構文
JSON.stringify(JSONオブジェクト, null, インデント数);
```

まず、JSON.stringify()で指定できる3つの引数を簡単に確認しておきましょう。

第1引数：jsonオブジェクトを指定します。
第2引数：replacerといってコールバックを指定できますが、今回は整形用にnullを指定します。
第3引数：数値を指定すると、指定数の空白文字でjsonオブジェクトをインデント整形します。

# サンプル

## インデントで整形
```javascript:javascript

// JSONオブジェクト
var obj = {
    "name": "taro",
    "date": "2020-10-25 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

// 空白2文字でインデントして整形出力（インデントの個数：２）
console.log(JSON.stringify(obj, null, 2));
```
インデントの個数は「2」にしています。

```console:console.log()
{
  "name": "taro",
  "date": "2020-10-25 12:30:18",
  "item": [
    "ラーメン",
    "チャーハン",
    "餃子"
  ]
}
```

## タブで整形
```javascript:javascript

// JSONオブジェクト
var obj = {
    "name": "taro",
    "date": "2025-10-20 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

console.log(JSON.stringify(obj, null, '\t'));
```
第3引数に`'\t'`と指定すれば、タブによるインデントも可能です。

```console:console.log()
{
	"name": "taro",
	"date": "2020-10-20 12:30:18",
	"item": [
		"ラーメン",
		"チャーハン",
		"餃子"
	]
}
```

## 整形をしない場合
```javascript:第1引数のみ指定

// JSONオブジェクト
var obj = {
    "name": "taro",
    "date": "2020-10-25 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

// 第1引数のみ指定
console.log(JSON.stringify(obj));

// 出力結果
{"name":"taro","date":"2020-10-25 12:30:18","item":["ラーメン","チャーハン","餃子"]}
```
整形の必要がない場合は、第1引数のみで指定OK。

# オブジェクトの中身を確認したい

```javascript:javascript

var obj = {
    "name": "taro",
    "date": "2020-10-25 12:30:18",
    "item": [
        "ラーメン",
        "チャーハン",
        "餃子"
    ]
}

console.dir(obj);
```

[object Object]で出力される、オブジェクトの中身を確認したい場合は`console.dir()`を使うと便利です。

```console:console.dir()
Object
date: "2020-10-25 12:30:18"
item: Array(3)
0: "ラーメン"
1: "チャーハン"
2: "餃子"
length: 3
__proto__: Array(0)
name: "taro"
__proto__: Object
```
コンソールで展開して、このように表示できます。

# 参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
ゲッターとセッター(Java)

# ゲッターとセッター


 Javaオブジェクトのフィールドに値を設定（セット）するメソッドが**セッター**。
 その値を取得（ゲット）する値が**ゲッター**。

## 基本
慣習として以下のような名前、引数、戻り値になっている。

| |メソッド名 | 引数 | 戻り値 |
|:-:|:-:|:-:|:-:|
|ゲッター|getXXX()|引数なし|フィールドの値|
|セッター|setXXX()|引数一つ|void型|

## ゲッター

### その前にまず、カプセル化について
プログラムを形成するオブジェクトについて、その中身を他のオブジェクトからなるべく見えなくすること。
他のクラスからそのフィールドにアクセス出来なくするために、フィールドを全てprivateにすることがカプセル化の原則。

```java

private 型名 フィールド名();
```

カプセル化でprivateにしたフィールドは他のクラスから直接アクセスできない。
アクセスする必要があるときのために間接的にアクセスできる手段を用意する。
具体的には、間接的にアクセスするための以下のようなメソッドを用意する。

```java

戻り値の型 メソッド名(){
	return フィールド名;
}
```

このメソッドはただフィールドの値をreturnで返すだけのメソッドとなっている。
そのため、戻り値の型はフィールドの型と同じになる。
例えば、


```java
private int piyo;
```

に対しては

```java

public int getPiyo(){
	return piyo;
}
```
となる。

他のクラス内で「getPiyo()」メソッドを呼び出すことにより、privateにした
int型のフィールド「piyo」の値を取得できるようになる。
要するに、ゲッターを他のクラスから呼ぶことによって、戻り値としてprivateなフィールドの値をゲットする。
これがゲッター。
こうすると、フィールドの名前や値の取得ロジックに変更があっても、「getPiyo()」メソッドの
中を書き換えるだけで済む。
また、「getPiyo()」メソッドを使っているほかのクラスの書き換えは一切行わなくて良いというメリットもある。


### セッター

ゲッターにより、privateなフィールドの値をゲットできることが分かった。
しかし、ゲッターはただフィールドの値をreturnで返すだけのメソッドのため、フィールドの値を書き換えることができない。
その値を書き換えるためのメソッドがセッターである。
一般的には以下のメソッドを用意する。

```java

戻り値の型 メソッド名(引数){
	フィールド名 = 引数;
}
```

このメソッドはフィールドに入力したい値を引数として受け取り、メソッド内でフィールドに代入しているだけなので、引数の型はフィールドと同じになる。
例えば

```java

private int hoge;
```
に対しては

```java

public void setPiyo(int piyo){
	piyo = hoge;
}
```
となる。
これはただフィールド「piyo」に引数で受け取った値「hoge」を代入しているだけである。
ゲッターと同様に、こうすることで何か変更があったとしてもクラス内の「setPiyo()」メソッドの
中を書き換えるだけで済む。
また、「serPiyo()」メソッドを使っているほかのクラスの書き換えは一切行わなくて良いというメリットもある。


### アクセサメソッド

セッターやゲッターのようにpravateで隠ぺいしたフィールドへ間接的にアクセスするために用意したメソッドを**アクセサメソッド**と呼ぶ。
アクセサメソッドを用いてフィールドにアクセスすることで、クラス間の依存性を低め、追加・変更の作業を楽にし、自由度を高めることができる。
PowerPointの便利なショートカット

## 便利なショートカット
- グリッドの表示/非表示切り替え
    - Shift + F9
- ガイドの表示/非常時切り替え
    - Alt+F9
- 書式のみコピー/貼り付け
    - ctrl+shift+C(V)
- アニメーションのみコピー/貼り付け
    - alt+shift+C(V)
- 表の一番下に行を追加
    - Tab
- オブジェクトを一つ背面(前面)に移動
    - ctrl+shift+[(])
- 段落を中央揃えに
    - ctrl+E
- 段落を両端揃えに
    - ctrl+J
- 段落を左（右）揃えに
    - ctrl+L(R)
- グループ化
    - ctrl+G
- 選択したグループをグループ解除
    - ctrl+shift+G

## 知りたいけど見当たらなかったショートカット
- 手のひらツールを利用
Windows + Docker 環境で venv を使う[Python]

# エラー

通常の方法でコンテナにマウントして使おうとするとエラーが吐かれる。

```bash
$ python -m venv .venv
Error: [Errno 71] Protocol error: 'lib' -> '/app/.venv/lib64'
```

# 原因

venv の使用時にシンボリックリンクを発行していて、ローカルのマウント時にこれを共有してしまっていることが原因

# 解決方法

[DockerでVolumeをマウントするとき一部を除外する方法](https://qiita.com/suin/items/e53eee56da23d476addc) を使って、シンボリックリンクが張られる箇所とのマウントから除外する。

下記のコマンドでは、**{作業ディレクトリ}/.venv/** 配下にシンボリックリンクが貼られることになるので、ここを除外する。

```bash
python -m venv .venv
```

docker-compose.yml の一部

```yml
version: "3.7"
services:
  app:
    ...
    volumes:
      - {作業ディレクトリ}/.venv/
```

## docker-compose.yml

全体のサンプル

```yml
version: "3.7"
services:
  app:
    build: ./app/
    working_dir: /app
    volumes:
      - ./app:/app:cached
      - /app/__pycache__
      - /app/.venv/
      - /app/.tox/ # tox 用
    environment:
        - FLASK_ENV=development
    ports:
    - "5000:5000"
```

# 参考
- http://kb84tkhr.hatenablog.com/entry/2019/04/23/220023
- https://us-key-tech.hatenablog.com/entry/win10-vagrant-error
windowオブジェクトを超ミニマムに解説してみる

#超ミニマムシリーズとは
様々な事柄に関して超短く解説するシリーズです。
これを読んであなたの興味が沸き、その飽くことのない知識欲を満たすことを願っています。

#windowオブジェクトとは
「**ブラウザに標準で用意されているグローバルなオブジェクト**」

#意識していないだけで必ずwindowオブジェクトは使っている
皆さんが何気なく使っている関数やメソッドは、windowオブジェクトの中のものを使っている場合が多いです。
例えば次のコード

```main.js
alert('hello');
```
↑の`alert()`は文字通り、ブラウザ上で警告文を出すためのメソッドです。
実はこの`alert()`の先頭には隠れてるコードがあって、それが`window`オブジェクトです。
つまり、

```main.js
window.alert('hello');
```
↑のように書いても同じ結果になります。
普段はこの`window.`の部分を省略してるということですね。

```main.js
console.log(window);
```
試しに`console.log(window)`でwindowオブジェクトを見てみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713434/5cee5c0b-6ed0-d723-929b-081ffb76994c.png)
このように多くの関数やプロパティなどが出てきます。その中に`alert`もあります。

#おまけ(グローバルなオブジェクトとは)
「**どこからでもアクセスできるオブジェクト**」
windowオブジェクトはどこのスコープからでもアクセスできるので省略して書けるということです。
チャットボットを活用してシュタインズ・ゲートの鳳凰院凶真を降臨させてみた！

**混沌を望み、世界の支配構造を破壊するもの。
そして、お前の野望を打ち砕くもの！
聞きたいか？？？
我が名は、鳳凰院凶真だ!!**

と、中二病丸出しで今回は始まりましたがｗ

今更ですが、社内のスタッフに薦められてアニメ「シュタインズ・ゲート」を観たんです。
普段アニメを殆ど観ない私でも、シリアスなタイムリープ話に、ドハマりしてしまいました。
そのアニメの主人公が鳳凰院凶真(岡部倫太郎)になります。
※シュタインズ・ゲートをご存じではない方はこちらを参照ください。
http://steinsgate.tv/index.html

今回は、Microsoft Teamsで無償利用が可能になったPower Virtual Agentsを利用して、鳳凰院凶真をチャットボットとして作成して、会話の解答をRPAであるPower Automate Desktopに引き渡すことにより、オンプレのActive Dirctoryへユーザー登録をおこなうという業務を自動化します。

うーん、既に中二病感満載ですねｗ
でも、業務としては本気で実用想定です！

今回は、環境とか設定も、ちょっと複雑、、、、、なので、下記に図説します。
![環境図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/df77596f-4442-6b43-1c75-58d09d64d4e9.png)

素直に図左側のOakdale環境にUIフローを作成して動かしたいのですが、作れない仕様になっている様なので、なぜ別の環境にあるPower Automateを動かして実現しています。
Power Virtual AgentsはTeamsからは無償利用ですが、通常環境では有償だったり、色々な配慮もございますｗ

作成過程は長くなるので次回説明します！
まずは、動画でご覧ください。

ここまで書いてて気づいてしまいましたが、、、、、、
シュタインズ・ゲートの設定でPCにいるのは、鳳凰院凶真（岡部 倫太郎）じゃなくて、クリスティーナ（牧瀬 紅莉栖）ですね💦💦💦

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">チャットボットを活用してシュタインズゲートの鳳凰院凶真を降臨させてみました！<br><br>友人に薦められてドハマりしたので、Teams→Power Virtual Agents→Power Automate Desktop→Active Dirctoryユーザー追加が出来る近未来ガジェットを作成しました。<a href="https://twitter.com/hashtag/%E3%82%B7%E3%83%A5%E3%82%BF%E3%82%A4%E3%83%B3%E3%82%BA%E3%83%BB%E3%82%B2%E3%83%BC%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#シュタインズ・ゲート</a><a href="https://twitter.com/hashtag/%E3%82%AC%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#ガジェット</a><a href="https://twitter.com/hashtag/teams?src=hash&amp;ref_src=twsrc%5Etfw">#teams</a> <a href="https://t.co/sAWdStdTBB">pic.twitter.com/sAWdStdTBB</a></p>&mdash; koby@フロッグポッドエンジニア募集中 (@rockfun) <a href="https://twitter.com/rockfun/status/1320485208802603014?ref_src=twsrc%5Etfw">October 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【Swift】入門書では教えてもらえなかったdismissをシンプルに記述する方法

入門書では教えてもらえなかった、よりシンプルにdismissを記述する方法を学んだので記載します。

##入門書等でのdismiss（コード補完をそのまま利用した場合)

```swift:
dismiss(animated: true, completion: nil)
```

##よりシンプルなdismiss

```swift:
dismiss(animated: true)
```


##なぜ、completionを省略出来るのか？

・Apple 公式ドキュメントより
![dismiss1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/d4f76726-6471-2992-9a77-8a96962923c2.png)
<b>completion: (() -> void)? = nil)</b>
の記載がある通り、completionに引数を渡さない場合は何も記述しなくてもnilが渡されるので、compolisionは省略することが出来ます。

##で、completionって何？

・Apple 公式ドキュメントより
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/f6947b82-f368-b187-19ca-aa2f6dbf3cb5.png)
意訳すると、

>completionは、
ViewControllerがdismiss(破棄)された後に、処理を実行する為のブロックで、何のreturnの値もパラメーターの値も持ちません。
多分、あなたはこの引数にnil入れるかもしれませんね。

とのことです。笑

completionは、<b>完了</b>、<b>達成</b>という意味なので、
<b>メソッドが完了した時に実行される処理のかたまり（ブロック）</b>
と覚えるのが良さそう。

##ちなみにいつ実行されるのか？

・Apple 公式ドキュメントより
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/7c9f312a-48a5-ed4c-1f63-29e24f8c3ef6.png)
viewDidDisappearが呼ばれた後にcompletionブロック内の処理が実行されるようです。
<hr>
Appleの公式ドキュメント見るの少し楽しくなってきたので少しずつでも英語の勉強も兼ねて読んでいきたいと思います。
<br>
参考:<a href="https://developer.apple.com/documentation/uikit/uiviewcontroller/1621505-dismiss">Apple 公式ドキュメント（dismiss）</a>
応用情報技術者試験の受験体験記

# はじめに

先週、応用情報技術者試験を受験してきました。

今年は新型コロナウイルスの影響で4月試験が中止となってしまったため、
10月試験の一発勝負になってしまいました。

備忘録としてその体験記を記しておきます。

学習方法なども追々整理して行けたらと思います。

# 応用情報技術者試験とは

情報処理技術者試験の試験区分です。

レベル3に該当して、ソフトウェア、システム開発に関する幅広い知識が問われます。

> ITエンジニアとしてのレベルアップを図るには、応用情報技術者試験がお勧めです。技術から管理、経営まで、幅広い知識と応用力が身に付き、システム開発、IT基盤構築などの局面で、高いパフォーマンスを発揮することができます。

*公式より引用*


# なぜ受験しようと思ったか

ずっと応用情報はレベルが高く、未経験の自分には敷居が高いかと思っていたのですが、
ネットで調べるうちに未経験でも合格されている方や未経験者向けの勉強法なども公開されていたので
愚直に信じて挑戦することにしました。

合格したかどうかはともかく基本情報が開催を延期されたことを踏まえると
応用情報を受験しておいて良かったかもしれません。


# 各問題について
午前問題、午後問題ともに例年並みなっだように感じました。
また、午後問題では新型コロナウイルスに触れるなど、世情が反映された仕上がりになっていたように思います。

## 午前問題

午前問題は基本的に例年通りでした。

私が参考にした勉強法で「午前は過去問演習が全てだ」みたいなことが書かれたので、
午前対策ではひたすら過去問演習を行っていました。

そのおかげかそれほど難しいと感じなかったです。

解答速報による自己採点でも75%overだったのでおそらく大丈夫でしょう。

変わった問題としては
「インデントの深さでコードブロックを指定する仕様を持つ言語はどれか」
みたいな出題がされてました。

私はPythonistaなので解答できましたが、各言語仕様について問われてもやや戸惑う気がするのですがどうなんでしょう...

あと「レベニューシェア」「プライスライニング」「パテントプール」など今試験で初出しとなる単語もちらほらあったように思いました。
（私が過去問を追いきれてないだけかもしれません...）


## 午後問題

午後問題では補足の紙が配られて、大問9, 10に「ただし、新型コロナウイルス感染症の影響は考慮しないものとする」という文言を追加する訂正が記載されていました。

それ以外は特に特殊なところはなかった気がします。

必須選択のセキュリティでは何度か過去問でも出題歴のあるメールセキュリティについて問われました。

また、大問2では「AI」という単語が出ていて近年の注目を反映したものになっていました。

問8システム開発でアジャイル開発が題材にされていたのは、
アジャイル開発、スクラム開発が市民権を取りつつある状況を表している気がしました。


# 会場の様子について

当然ですが多くの方がマスクをしていました。
マスクをしたまま試験に臨まないと行けないのは足枷な気もしますが、応用情報は相対評価なのであんまり関係ないかもしれませんね。
PycharmでDockerfile.productionのようなファイルをSyntax Highlightする方法

Pycharmはデフォルト設定ではDockerfile.productionのようにDockerfileの後に文字列があるとSyntax Highlightをしなくなっています。これをハイライトさせるには次のように、Pycharm > Preferences > Editor > File Typesを選び、Dockerfileを選び、「Register patterns」に"Dockerfile.production"を設定します。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130017/753cf851-db0e-b220-b231-d83be0ad7603.png)

"Dockerfile.production"がHighlightされるようになりました。

他にも"Dockerfile.prod"や"Dockerfile.なんちゃら"を追加したいのですが、全て個別に入力するのは面倒なので、"Dockerfile.*"を入れると、他のDockerfileのシンタックスハイライトもできるようになります。
AWS CloudFormationでVPCを構築しよう

# はじめに
AWS CloudFormationを利用して、VPCを構築するテンプレートのサンプルです。

テンプレートの概要が分からない場合は、[はじめてのAWS CloudFormationテンプレートを理解する](https://qiita.com/miyabiz/items/eb7b0fa1675b5199b9b7)を参考にしてください。

コードは[GitHub](https://github.com/miyabiz-room/CloudFormation-Template/tree/vpc-01)にもあります。

今回は、akane というシステムの dev 環境を想定しています。
同じ構成で違う環境を作成する場合は、{環境名}-parameters.jsonを別途作成します。

```text:ディレクトリ構成
akane (システム)
  └─ network (スタック)
      ├─ network.yml (CFnテンプレート)
      └─ dev-parameters.json (dev 環境のパラメータ)
```

# AWS リソース構築内容
- VPC (10.0.0.0/16)

# AWS システム構成図
![vpc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682035/150a0925-0a29-84ce-00ae-83af0c5fed2c.png)

# 実行環境の準備
[AWS CloudFormationを動かすためのAWS CLIの設定](https://qiita.com/miyabiz/items/fed11796f0ea2b7608f4)を参考にしてください。

# AWS リソース構築手順
1. 下記を実行してスタックを作成

    ```
    ./create_stacks.sh
    ```

2. 下記を実行してスタックを削除

    ```
    ./delete_stacks.sh
    ```

# 構築テンプレート
**1. networkスタック**

```yaml:network.yml
AWSTemplateFormatVersion: 2010-09-09
Description: Network For Akane

# Metadata:

Parameters:
  SystemName:
    Type: String
    AllowedPattern: '[a-zA-Z0-9-]*'
  EnvType:
    Description: Environment type.
    Type: String
    AllowedValues: [all, dev, stg, prod]
    ConstraintDescription: must specify all, dev, stg, or prod.
  VPCCidrBlock:
    Type: String
    AllowedPattern: (\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})/16

# Mappings:

# Conditions

# Transform

Resources:
  # VPC作成
  akaneVPC:
    Type: AWS::EC2::VPC
    Properties:
      CidrBlock: !Ref VPCCidrBlock
      EnableDnsSupport: true
      EnableDnsHostnames: true
      InstanceTenancy: default
      Tags:
        - Key: Name
          Value: !Sub
          - ${SystemName}-${EnvType}-vpc
          - {SystemName: !Ref SystemName, EnvType: !Ref EnvType}
        - Key: SystemName
          Value: !Ref SystemName
        - Key: EnvType
          Value: !Ref EnvType

Outputs:
  akaneVPC:
    Value: !Ref akaneVPC
    Export:
      Name: !Sub
        - ${SystemName}-${EnvType}-vpc
        - {SystemName: !Ref SystemName, EnvType: !Ref EnvType}
```

```json:dev-parameters.json
{
    "Parameters": [
        {
            "ParameterKey": "SystemName",
            "ParameterValue": "akane"
        },
        {
            "ParameterKey": "EnvType",
            "ParameterValue": "dev"
        },
        {
            "ParameterKey": "VPCCidrBlock",
            "ParameterValue": "10.0.0.0/16"
        }
    ]
}
```

**２. 実行ファイル**

```sh:create_stacks.sh
#!/bin/sh
SYSTEM_NAME=akane
ENV_TYPE=dev
STACK_NAME=network

aws cloudformation create-stack \
--stack-name ${SYSTEM_NAME}-${ENV_TYPE}-${STACK_NAME} \
--template-body file://./${SYSTEM_NAME}/${STACK_NAME}/${STACK_NAME}.yml \
--cli-input-json file://./${SYSTEM_NAME}/${STACK_NAME}/${ENV_TYPE}-parameters.json
```

```sh:delete_stacks.sh
#!/bin/sh
SYSTEM_NAME=akane
ENV_TYPE=dev
STACK_NAME=network

aws cloudformation delete-stack \
--stack-name ${SYSTEM_NAME}-${ENV_TYPE}-${STACK_NAME}
```
今更ながらWindows版FFmpegをクロスコンパイル&カスタムビルド

## 注意

書きなぐりメモ、かつ2020年10月27日現在の情報になりますことをご了承ください。

## WSL(Windows Subsystem for Linux)の準備

正確にはWSL2です。
Windows上でビルドしようとするとMSYSやらと面倒だったのでWSLを使うことに。

https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

ハマった時は、Windows Updateを手動更新するのを忘れずに。

今回はUbuntu 20.04を使いました。

## 下準備(1)

ここからは[公式ガイド](https://trac.ffmpeg.org/wiki/CompilationGuide/Ubuntu)を参考にしました。

```bash
$ sudo apt update && sudo apt install git autoconf automake build-essential cmake git-core libass-dev libfreetype6-dev libgnutls28-dev libtool libvorbis-dev pkg-config texinfo wget yasm zlib1g-dev mingw-w64
```

今回は一切ライブラリを入れずにビルドします。
ライブラリを入れる場合、後に説明する一部引数を変える必要があるかもしれません。

## 下準備(2)

[公式のGitHub](https://github.com/FFmpeg/FFmpeg)からクローンしてきます。
最新バージョンの確認は[公式HP](https://ffmpeg.org/download.html#releases)から。記事執筆時点での最新安定版は4.3.1でした。

```bash
$ git clone -b release/4.3 https://git.ffmpeg.org/ffmpeg.git ffmpeg && cd ffmpeg
```

## ビルド

まずはコマンドをバッと。

```bash:改行なし
$ PKG_CONFIG_PATH=/usr/lib/pkgconfig ./configure --arch=x86_64 --target-os=mingw64 --cross-prefix=x86_64-w64-mingw32- --disable-shared --enable-static --pkg-config-flags=--static --enable-w32threads --extra-cflags=-O2 --enable-optimizations --disable-gpl --enable-version3 --disable-doc --disable-htmlpages --disable-manpages --disable-podpages --disable-txtpages --disable-debug && make
```

```bash:改行あり
$ PKG_CONFIG_PATH=/usr/lib/pkgconfig ./configure \
  --arch=x86_64 \
  --target-os=mingw64 \
  --cross-prefix=x86_64-w64-mingw32- \
  --disable-shared \
  --enable-static \
  --pkg-config-flags=--static \
  --enable-w32threads \
  --extra-cflags=-O2 \
  --enable-optimizations \
  --disable-gpl \
  --enable-version3 \
  --disable-doc \
  --disable-htmlpages \
  --disable-manpages \
  --disable-podpages \
  --disable-txtpages \
  --disable-debug \
  && make
```

### 解説

完全に理解して指定しているわけでないために、解説が雑なのが申し訳ないです…。

```bash:Mingw-w64でビルドする際に必要となる環境変数、configureの指定
PKG_CONFIG_PATH=/usr/lib/pkgconfig ./configure
```

```bash:Windows向け64bitバイナリをビルドさせる
--arch=x86_64
--target-os=mingw64
--cross-prefix=x86_64-w64-mingw32-
```

```bash:1つのexeファイルにまとめさせる
--disable-shared
--enable-static
--pkg-config-flags=--static
```

```bash:最適化引数。1行目はWindows向け
--enable-w32threads
--extra-cflags=-O2
--enable-optimizations
```

```bash:LGPL3.0でビルドさせる
--disable-gpl
--enable-version3
```

```bash:exeファイルのサイズを削るため、ドキュメント類や開発者向け機能をカット。こちらはお好みで
--disable-doc
--disable-htmlpages
--disable-manpages
--disable-podpages
--disable-txtpages
--disable-debug
```

```bash:上記で作成したmakefileに基づきコンパイル。十数～数十分かかります
make
```

`--enable-small` は実行速度を犠牲にバイナリサイズを小さくする引数ですが、今回は指定していません。
（私の環境の場合、実行速度が約5%遅くなったかわりにサイズは約27%小さくなりました。）

## まとめ

書きなぐってすまんかった。

## おまけ

この記事を書くきっかけになった私の開発するソフト、[m3u8ToMP4](https://github.com/ku-now/m3u8ToMP4)をよろしくお願いします。
HTTP Live Streaming(HLS)で配信される動画・生放送をmp4などに変換するWindows向けソフトです。（__保存した動画・音声が著作権法に抵触しないよう十分に注意してご利用ください。__）
React入門#2 〜JSXについて〜

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ JSX、トランスパイラ、React.create.Elementについて
・ Reactの基本文法について

■ Reactに関する過去の記事はこちら
・ [React入門#1 〜Reactの基礎知識〜](https://qiita.com/s79ns/items/271ec50a26949e902016)

## JSX

Facebook社が開発した、JavaScript内でHTMLを簡潔に記述する為のJavaScriptの拡張言語です。
JSXはHTMLの様に書けるので、可読性を高める為に使われます。
Reactの公式ドキュメントはほぼJSXで記述されており、Reactでは業界水準となっています。

## トランスパイラ
JSXの構文をブラウザが理解できる様に変換する翻訳の様な役割のことです。

○ 例
・ JSX → JavaScript(ES6)
・ JavaScript(ES6) → JavaScript(ES5)

○ 代表的なトランスパイラ
・ Babel、Coffee Script、Type Script...etc

## React.createElement
JSXが無い場合に使いますが、HTMLを書いている感覚ではないので分かりにくいです。
JSXで記述した構文をトランスパイルし、出力したjsファイルを見ると、React.CreateElementを使った内容になります。

```react
React.createElement(
  "h1",
  null,
  "Hello World!"
);
```

## JSXの基本文法①
Reactパッケージのインストールが必須ですが、まず`.jsx`ファイル内の先頭で宣言します。

```react

// .jsxファイル内の先頭で宣言
import React from "react"
```

## JSXの基本文法②
HTMLとほぼ同じ記述です。（classはclassNameと記述します）

```react
const App = () => {
  return (
    <div id="hoge" className="fuga">
      <h1>Hello, World!</h1>
    </div>
  );
};
```

## JSXの基本文法③
{}内に変数や関数を埋め込むことができます。
`render()`内の`{}`の中であれば、JavaScriptで宣言した`foo`という変数を使えます。

```react
const foo = "<h1>Hello, World!</h1>"
const App = () => {
  return (
    <div id="hoge" className="fuga">
      {foo}
    </div>
  );
};
```

## JSXの基本文法④
変数名などは全てキャメルケースで記述します。

#### ・ キャメルケース
単語の区切りを大文字にします。（ラクダのコブみたいなイメージ）

#### ・ ケバブケース
単語の区切りにハイフンを使います。JSXは結局の所、JavaScriptなのでケバブケースを使うことができません。

```react
const fooBar = "<h1>Hello, World!</h1>"
const App =() => {
  return (
    <div id="hoge" className="fuga">
      {fooBar}
    </div>
  );
};
```

## JSXの基本文法⑤
空要素(`input`や`img`タグ）は閉じタグを使わないと、JSXでは正しく認識しません。

```react
const App = () => {
  return (
    <div id="hoge" className="fuga">
      <input type="text" id="blankElement" />
      <img src="/aseets/icon/foo.png" />
    </div>
  );
};
```

## 次の記事はこちら
[React入門#3 〜create-react-appで環境構築〜](https://qiita.com/s79ns/items/69cc8e77994e90963a21)
【イメージにアルファチャンネルや透過を含めることはできません】エラーの対処法

![スクリーンショット 2020-10-25 16.55.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/eb431086-6721-0c28-1a58-23b1def1a93a.png)
App Store Connect上でスクリーンショット画像を設定した際に、
<h5>【イメージにアルファチャンネルや透過を含めることはできません】</h5>
というエラーが発生したのでその時の対処法。
<br>
<br>
１、エラーが発生した画像をプレビューで開く
２、上部メニューからファイルを選択して書き出すをクリック
![スクリーンショット 2020-10-25 16.58.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/be246bb4-4a10-89f6-3df7-93391be8a91f.png)
<br>
３、フォーマット選択欄下にあるアルファのチェックを外す
![スクリーンショット 2020-10-25 17.01.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/ee5403c2-cdbc-31b8-08b7-088f4f6952c6.png)
<br>
４、アルファのチェックを外したら、保存をクリックして画像を新規保存（または、上書き保存）する
![スクリーンショット 2020-10-25 17.01.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/60a9ee7d-6ad6-142c-40e9-136203e71f3c.png)
<br>
５、アルファのチェックを外した画像を再度App Store Connect上でスクリーンショット用の画像として選択する
![スクリーンショット 2020-10-25 17.14.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/ad754c7d-77f4-679d-be28-eb33dc8d3ade.png)
６、無事に反映されました！
<br>
という事で、個人開発しているダンサーの為のノートアプリ「<a href="https://apps.apple.com/jp/app/dancenote/id1532627155">DanceNote</a>」を韓国語と中国語に対応させました。
よかったら、覗きに行ってみてください◎
学習アウトプット〜gitのブランチとは〜

##ブランチとは

ブランチとは、基本的にはリポジトリのコピーのことを指し、gitはブランチを簡単に安全に作り出すことができる。

ブランチを作り出すことで、作ったブランチを自由に変更して様々なコードを試すことができます。

##ブランチの種類
main branch(旧master branch)は親リポジトリのことを指す。

また、

```
$ git checkout -b [branch名]
```
といったように、「git checkout -b」というコマンドを使って新しいブランチの作成をすることができる。

現在のローカルブランチを一覧表示したい場合は、「git branch」と入力することで、

```terminal
$ git branch
  main
* modify-README
```

このように表示される。
＊は現在使用中のブランチの頭につきます。

##最後に

ブランチを作成すれば、どんなにコードがぐちゃぐちゃになってもメインのブランチには影響ないので、
ブランチを作成して試走するという習慣をつけておくといいかもしれません。
Gtk-ERROR **: 04:28:17.451: GTK+ 2.x symbols detected. Using GTK+ 2.x and GTK+ 3 in the same process is not supported のエラー

### Gtk-ERROR **: 04:28:17.451: GTK+ 2.x symbols detected. Using GTK+ 2.x and GTK+ 3 in the same process is not supported
 
最近新しくXavier NXの環境を整えていて、昔に使っていたプログラムを実行しようとしたらこんなエラーが発生したので対処した。
こういったエラーは普段だとひたすらぐぐりながら解決していくのだけども、たまにはまとめながら解決していきたい(また同じようなエラーに遭遇した時の方へのメモとしても)

原因としてはGTX +2系と3系のそれぞれの環境に依存したライブラリを同時に使うことが原因らしい。
ではどのライブラリが競合してしまっているのか調べる必要がある。

https://github.com/yosinski/deep-visualization-toolbox/issues/10

によるとmatplotlibcとopencvの競合の可能性があるかもとのこと。
試しに以下のコードを実行する。

```
import cv2
import matplotlib.pyplot as plt

cv2.namedWindow("test")
```

ビンゴ。さっきと同じエラーが確認できた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187470/18ba5c09-272f-a960-486d-302afae698e8.png)

matplotlibのフレーム設定ファイルを編集することで使用するGTXのバージョンを指定してあげる。
matplotlibの編集すべきファイルは以下のプログラムを実行することでわかる。

```
python3 

import matplotlib

print (matplotlib.matplotlib_fname())#/usr/bin/python3/~~(省略)が出力される
```
ファイルの40行目くらいのところのコメントアウトを外し、tkAggと指定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187470/0b252bd3-1512-ef95-3039-dd416d0c6b95.png)

これで再度、検証に使ったプログラムを実行する。
すると以下のようなエラーが発生する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187470/4ee7693e-751e-ce82-0bf6-bbfde15ac639.png)

どうやら今回解決しようとした部分は無事解決することができたっぽい。
あとはこのエラーを解決するだけ。
以下のコードでライブラリをインストールする。

```
sudo apt-get install tk-dev
```
再度実行すると、違うエラーが発生した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187470/c5ac45ef-d556-d76f-1ea8-a4aa0fa620fb.png)

今度こそはと以下をインストールする

```
sudo apt-get install libcanberra-gtk-module
```
検証プログラムを実行すると問題なく実行することができた。
これで問題なくプログラムが動くことを確認できた。

##最後に

エラーを解決していく過程を記事にまとめていくことで手順を振り返ることができてわかりやすくいいと思いました。
【Java ~変数の定義、型変換について~】勉強メモ

Java学習中。
復習に見返せるようにメモしていきます。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

出力の命令
-
　- プログラミングでは、コンピュータに様々な命令をし処理を行わせる。
　`System.out.println()` と書く事で(　)の中身を出力（表示）せよ」という命令させる。

　- 文字列
　文字列は`ダブルクォーテーション（"）`で囲む。
　" "で囲んでいないと、コードが動かない。

　- セミコロン
　Javaでは文の終わりに`セミコロン（;）`を付けなければならない。
　これを忘れるとコードが動かない。

　- コメント
　コメントはコードが実行されるときにすべて無視される。
　なので、メモ等を残しておきたい時に使用する。
　<b>`「//」`</b>と書くことで、そこから行末までがコメントとみなされる。


```.java:例
// Hello World と出力させる
System.out.println("Hello World");

// 出力結果 →　Hello World
```
<br>

　- 数値
　数値は文字列と違い、ダブルクォーテーションで囲まない。
　記号はすべて半角で記述。

```.java:例
// 数値の17を出力
System.out.println(17);
// 出力結果 → 17

// 5に3を足した値を出力
System.out.println(5 + 3);
// 出力結果 → 8
    
// 「5 + 3」を文字列として出力
System.out.println("5 + 3");
// 出力結果 → 5 + 3
```
<br>

　- 文字列の連結

```.java:例
// "こんにちは"と"世界"を連結して出力
System.out.println("こんにちは" + "世界");
// 出力結果 → こんにちは世界
    
// "38"と"19"を連結して出力
System.out.println("38" + "19");
// 出力結果 → 3819
```
<br>
<br>

変数の定義
-
　- 変数とは、データ（値）をいれておく為の箱。
　変数を使うには、まず変数を「定義」する必要がある。
　Javaで変数を定義するためには、
　①変数にいれる値のデータ型を指定する
　②変数の名前を決める
　という2つの作業が必要になる。

　- データ型
　データ型には、文字列と整数の２つの型がある。
　`String型は、文字列の型`、　`int型は、整数の型` となる。
　String型のSは大文字、int型のiは小文字である点に注意。
　また、その他にも<b>double型と言う小数を表す</b>データ型も存在する。

　- 値の代入
　変数を定義したら変数に値を入れる。
　`「変数名 = 値」` で代入する事が出来る。

```.java:例
// int型の変数numberを定義
int number;
    
// 変数numberに3を代入
number = 3;
    
// 変数numberを出力
System.out.println(number);

// 出力結果 → 3



// String型の変数nameを定義
String name;
    
// 変数nameに"Aki"を代入
name = "Aki";
    
// 変数nameを出力
System.out.println(name);

// 出力結果 → Aki
```
<br>

　- 変数の初期化
　変数定義と同時に値を代入することを言う。

```.java:書き方
// int型の変数numberを定義し、7を代入
int number = 7;

// Stringの変数textを定義し、「おはよう」を代入
String text = "おはよう";

```
<br>

　- 変数の更新
　更新するときはデータ型をつけないように注意。
　これは、変数名の前にデータ型をつけると変数を定義しようとしますが、
　同じ処理内で同一名の変数を定義できない、なので更新するときはデータ型をつけない。

```.java:書き方
int number = 7;

// 変数numberを9で上書き
number = 9;

// 出力結果 → 9
```
<br>

　- 自己代入
　変数numberと8を足して、また変数numberに代入する、
　このような代入の仕方を自己代入と言う。

```.java:書き方
int number = 7;

// 変数numberの値に8を足して、変数numberを上書き
number = number + 8;

// 出力結果 → 15
```
<br>

　- 自己代入の省略
　基本形: X = X + 1;　→　省略形: X += 1;　→ さらに省略: X++;
　基本形: X = X - 1;　→　省略形: X -= 1;　→ さらに省略: X--;
<br>

型変換
-
　- 「+」などの操作は同じデータ型同士でないとできない。
　よって型の違うものを演算するときは、型を変換し同じ型にする。
　Javaではこの型変換の方法として、自動変換と手動変換がある。

　- 自動型変換
　下記のようにString型とint型を足すと、int型が自動でString型に変換され、
　文字列の結合が行われる。

```.java:例
int month = 12;
int date = 31;
    
// 「12月31日」となるように変数と文字列を連結して出力
System.out.println(month + "月" + date + "日");

// 出力結果 → 12月31日
```
<br>

　int型とdouble型の計算では結果はdouble型になる。

```.java:例
// 7を2.0で割った値を出力してください
System.out.println(7/2.0);

// 出力結果 → 3.5


// 7.0を2で割った値を出力してください
System.out.println(7.0/2);

// 出力結果 → 3.5
```
<br>

　- 強制型変換
　`(変換したいデータ型)値` とする事で強制的に型を変換させます。

```.java:例
int number1 = 7;
int number2 = 2;

// number1をdouble型に変換し、number2で割った値を出力
System.out.println((double)number1 / number2);

// 出力結果 → 3.5
```
Vue.js と django REST framework を組み合わせて実装するための学習教材

#ターゲット
- Vue.js 初心者
- django 初心者


#はじめに
本記事は「急がば回れ」精神に基づいて、じっくり確実にフロントエンド Vue.js バックエンド django の構成でWebサービスを構築するための学習教材を列挙しました。 Vue.js と django の知識がゼロの方でも、それらを組み合わせてAPI連携できるようになります。


#Vue.js の学習教材
JavaScript 製のフレームワークで状態管理でリッチなフロントエンドを実装できます。

https://www.udemy.com/course/vue-js-complete-guide/

→ Vue.js の基礎を一通り動画で学べます。セールで1300円くらいになったときに買いましょう。


#django の学習教材
Python のWebフレームワークでバックエンドを実装します。できることは Laravel や Ruby on Rails と概ね変わりませんが、比較したときに、コードが直感的でないため内部的な処理もしっかり理解されることをおすすめします。

https://www.udemy.com/course/django-3app/

→ django の基礎を一通り動画で学べます。セールで1300円くらいになったときに買いましょう。


#django REST framework の学習教材
django 単体だとAPIサーバーを構築が難しいので、django REST framework を導入します。
django 単体で実装する場合はフロントは django の template で実装しますが、フロントを Vue を採用する場合はバックエンドにやってほしいことは、リクエストに対して json を返してもらうことです。それを実現するために django REST framework を使います。

https://qiita.com/furuuchin/items/c6d6230aa327ad7b337a

→ こちらの記事のコードを写経して概要を掴めます。

https://note.crohaco.net/2018/django-rest-framework-view/

→ View の詳細でわかりやすい解説が載っています。
django ではMVCモデルではなく、MTVモデルを採用しています。紛らわしいですが、以下の対応関係になっています。Controller 的な処理を書くのが View です。

|MTVモデル |MVCモデル |
|---|---|
|Model  |Model  |
|Template  |View  |
|View  |Controller  |


https://note.crohaco.net/2018/django-rest-framework-serializer/

→ Serializer の詳細でわかりやすい解説が載っています。
名前の通りモデルから json に変換するときにゴニョゴニョしてくれるやつです。

https://www.udemy.com/course/the-complete-guide-to-django-rest-framework-and-vue-js/

→ django REST framework の基礎と Vue.js との組み合わせ方を一通り動画で学べます。セールで...（以下略）
英語動画なのですが、英語字幕出せますし上記の知識を踏まえれば苦手な人でもなんとかなると思います。残念ながら日本語の良質な動画は執筆時点では見つかりませんでした。
認証方式も紹介されています。
お急ぎの方は、セクション1,5,7だけ見ると良いです。


#さいごに
アップデートがあれば追記します。
プロゲート【JQuery初級】変数,this,find,chidren,hover

# JQuery初級コース
```script.js
// 呼び出し方
$(function() {

 });

基本の書き方
$('セレクタ').メソッド(引数);
```

メソッド
.slideUp(1500); //1500ms=1.5秒
.slideDown();
.hide();


```
idは１回 セレクタの書き方#id
classは複数ok セレクタの書き方.class
```

```css:stylesheet.css

p{
display:none //非表示
display:block //表示
}
```


```script.js
$('p').show(); //表示
```

イベント

```script.js
$('セレクタ').イベント名(function(){ 

});
```

cssメソッド

```script.js
$('セレクタ').css('color', 'red');
```

css非表示

```script.js
$('セレクタ').css('display', 'none');
```

テキストメソッド※htmlメソッドはhtmlが書き込める

```script.js
$('セレクタ').text('書き換える文字列');
```

> $(this)はイベントの中で、そのイベントが起こった要素を取得することができます。$()の中でthisをクォーテーション（”や’）で囲まないことに注意してください。
> [-progate-](https://prog-8.com/dashboard)

```script.js
$(this).メソッド(引数);
```

変数にする

```script.js
var $title=$('#title');

$title.css('color', 'red');
$title.html('こんばんは、にんじゃわんこさん');
$title.fadeOut(1000);
    
```

メソッドチェーン

```script.js
$('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう！</h3>').fadeOut(1000);
// ドットで区切る
```

findメソッド
> すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用います。[-progate-](https://prog-8.com/dashboard)

```script.js
$('セレクタ').find('子孫要素セレクタ').メソッド(引数);
```

childrenメソッド
> 指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用います。[-progate-](https://prog-8.com/dashboard)

```script.js
$('セレクタ').children('子孫要素セレクタ').メソッド(引数);
```

hoverイベント

```script.js
 $('#language-wrapper').hover(
    function(){ //引数1
    $('.language-text').fadeIn(); //マウスを乗せた時
  }, //コンマ忘れずに！
    function(){ //引数2
    $('.language-text').fadeOut(); //マウスを外した時
  }
  );
```
ディレクトリ内ディレクトリ内ファイルを（Recursiveに）一括リサイズ


ディレクトリの中に複数ディレクトリがあって、それぞれに画像ファイルが入っていて、その全てに処理をかけたい場合こうします。

![pc_folder-tree_36537-300x300.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/8dc061ed-3113-9f96-4b01-257ad5940fd6.jpeg)

```python

import os
from PIL import Image

rootdir = './parentDirectory'

for subdir, dirs, files in os.walk(rootdir):
    for file in files:
      img = Image.open(os.path.join(subdir, file))
      img_resize = img.resize((256, 256), Image.LANCZOS)
      img_resize.save('./resized/' + file)
```

🐣
****
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
getimagesize()を使って画像を判別する場合も注意しなければいけない

# はじめに
先日、[exif_imagetype()だけで画像かどうかを判別してはいけない](https://qiita.com/papillon/items/6904437e4c98e3783eb3)というエントリを書いたが、その後、別のWordPressプラグインで同様の脆弱性が発見された。そちらではgetimagesize()を使っていたので取り上げる。

# 概要
脆弱性の見つかったプラグインはPowerPressというポッドキャストのためのプラグイン。画像のふりをしたPHPスクリプトをアップロードして任意のコードを実行することが可能だが、脆弱性を利用するためにはサイト管理者の権限が必要なため、サイトの運用によってはそこまで危険性は無い。

# 解説
PoCは以下の通りhttps://wpscan.com/vulnerability/10427 で、脆弱性の修正箇所は https://plugins.trac.wordpress.org/changeset/2396808 になる。

PoCの一部を見ると、POSTする値に以下のような記述がある。ここから、PNGに偽装したup.phpというファイルをアップロード、実行させようとしていることが分かる。

```PHP:PoCの一部
"------WebKitFormBoundary5Ac7Ayyi2qVtiLqA\r\n" + 
"Content-Disposition: form-data; name=\"rss2_image_file\"; filename=\"up.php\"\r\n" + 
"Content-Type: image/png\r\n" + 
"\r\n" + 
"\x89PNG\r\n" + 
"\x1a\n" + 
"\x3c?php phpinfo(); ?\x3e\r\n" + 
"------WebKitFormBoundary5Ac7Ayyi2qVtiLqA--\r\n";
```

このup.phpをファイルに切り出すと以下のようになる。

```
$ hexdump up.php
0000000 5089 474e 0a0d 0a1a 3f3c 6870 2070 6870
0000010 6970 666e 286f 3b29 3f20 3e3e
000001c

$ file up.php
up.php: PNG image data, 1885957734 x 1864902971, 32-bit
```

プラグインの中では、``$ImageData = @getimagesize($temp);``として取得した値を利用して画像かどうかを判定してしまっているが、[PHP.netのドキュメント](https://www.php.net/manual/ja/function.getimagesize.php)にも以下のように記載されている。

> 警告
>この関数は、filename が適切な画像ファイルであることを想定しています。 画像以外のファイルを渡してもそれを画像だと判断してしまい、関数の処理は成功するでしょう。 しかし、配列には意味のない値が含まれる場合があります。
>
>getimagesize() を使って、そのファイルが画像であるかどうかを確かめることはできません。 そのようなことをしたい場合は、そのために用意されたソリューション (Fileinfo 拡張モジュールなど) を使いましょう。

``getimagesize('up.php');``で得られる値は以下のようになる。

```
array(6) {
  [0]=>
  int(1885957734)
  [1]=>
  int(1864902971)
  [2]=>
  int(3)
  [3]=>
  string(38) "width="1885957734" height="1864902971""
  ["bits"]=>
  int(32)
  ["mime"]=>
  string(9) "image/png"
}
```

なお、PHP.netの注意書き通りにFileinfoを利用しても、今回は以下のようになってしまうため、代替とはならない。

```
string(47) "PNG image data, 1885957734 x 1864902971, 32-bit"
```

結局、当該プラグインではアップロードを許可するファイルの拡張子を制限することで対応している。
heroku　デプロイ エラーログ

**デプロイ後のエラー対処方法**
**仮説**
環境変数が設定されているか.
開発環境で動作できているかの確認。
heroku上でマイグレーションファイルを生成できているか。（一度新規登録など、データベースに追加される作業行う）
pushする時にアプリケーション名を間違えていないか（これは確率薄いね）
<dl>
 <dt>ログの確認</dt>
 <dd>heroku logs --tail --app <<アプリケーション名>></dd>
</dl>
**最終手段で使う様にしないとね。ログ確認する時目が痛くなるから。笑**
**この様なエラーを少なからず目にしたくない人は、手間だが一つの機能の実装を行ったらherokuにデプロイすることだね！**
この作業が後々救われるし、一つの機能が終わればpushしていたら頭も整理出来る！
複雑なアプリを作る以上は本当に大切な作業の一つになると思います。
************
**続いて、ファイルの変更履歴が存在しない場合、つまり、特に変更するファイルもないがHerokuに設定した環境変数だけ本番環境に反映させたい場合を考えてみましょう。**

先ほどの「ファイルの変更履歴が存在する場合の対処法を学ぼう」との違いは変更するファイルがないということです。

Herokuの仕様上、最新のコミット履歴が存在しない状態でgit push heroku masterコマンドを実行しても下記のように「Everything up-to-date（すでに最新の状態に更新されています）」と表示されます
<dt>空のコミットの生成</dt>
<dd> git commit --allow-empty -m "空のcommit" </dd>
stylelintのおすすめ設定

## stylelint とは
- [stylelint](https://stylelint.io/)
- 160種類以上のルールをカスタマイズできるリンター
- デフォルトでは、すべてのルールが無効化されているため、少しずつルールを追加していける
- 予め定義されたルールもあるので、それをベースにルールをカスタマイズすることもできる
- プラグインにより新しいルールを追加することができる
- 一部のルールは自動修正(fixオプション)に対応している
- PostCSSプラグインとしても動作するのでタスクランナーに組み込みやすい

## おすすめ設定
```sh:console
% npm i -D stylelint-prettier stylelint-declaration-block-no-ignored-properties stylelint-config-recess-order stylelint-config-standard stylelint-config-prettier
```

```javascript:/.stylelintrc.js
/**
 * stylelint Configuration
 */
module.exports = {
  plugins: [
    // stylelintにprettierの設定を読み込むためのプラグイン
    "stylelint-prettier",
    // displayプロパティの値によって無視されるプロパティを記載していないか検知するルールを追加するプラグイン
    "stylelint-declaration-block-no-ignored-properties",
  ],
  extends: [
    // プロパティの記述順に関するルール
    "stylelint-config-recess-order",
    // 一般的なルール
    "stylelint-config-standard",
    // prettierと連携するためのルール
    "stylelint-prettier/recommended",
    // prettier設定と重複するルールを打ち消すルール
    "stylelint-config-prettier",
  ],
  rules: {
    "plugin/declaration-block-no-ignored-properties": true,
    // custom
  },
  ignoreFiles: [
    "**/node_modules/**",
  ],
};

```

### 補足
bemを利用する場合は、`stylelint-selector-bem-pattern`、
colorなど特定のプロパティだけ必ず変数を利用したい場合は、`stylelint-declaration-use-variable`
などをプロジェクトによってもう少しプラグインを導入する場合もありますが、
縛りがきつすぎると使いづらくなるので塩梅が難しい。。。
PostCSSのおすすめ設定

## PostCSS とは
- [PostCSS · A tool for transforming CSS with JavaScript](https://postcss.org/)
- PostCSS自体は、CSSパーサの機能のみを提供する
- プラグインを利用し、CSSを加工したり、構文チェックを行う


## おすすめ設定
※ Sassは使わずにPostCSSのみでビルドする想定。

```sh:console
% npm i -D postcss-import stylelint postcss-preset-env postcss-flexbugs-fixes
```

```javascript:/.postcssrc.js
/**
 * PostCSS Configuration
 */
module.exports = (ctx) => {
  return {
    map: ctx.options.map,
    plugins: {
      // 分割したファイルを結合する
      "postcss-import": {
        // filter: () => true,
        // root: process.cwd(),
        // path: [],
        // plugins: undefined,
        plugins: [
          // このタイミングでlinterを実行すると、エラー位置が結合前のファイルで示される
          require("stylelint")(),
        ],
        // resolve: null,
        // load: null,
        // skipDuplicates: true,
        // addModulesDirectories: [],
      },
      // 今後ブラウザに実装されていくもの、既に一部のブラウザで実装済みのものを利用する
      // 具体的にはhttps://preset-env.cssdb.org/featuresで確認可能
      "postcss-preset-env": {
        stage: 3,
        // browsers: "last 2 versions",
        autoprefixer: {
          // env: undefined,
          // cascade: true,
          cascade: false,
          // add: true,
          // remove: true,
          // supports: true,
          // flexbox: true,
          // grid: false,
          grid: "autoplace",
          // stats: undefined,
          // browsers: undefined,
        },
        // insertBefore: {},
        // insertAfter: {},
        // preserve: false,
        // importFrom: undefined,
        // exportTo: undefined,
      },
      // flex周りのプロパティの指定方法によるバグを回避する
      "postcss-flexbugs-fixes": {},
    },
  };
};

```
```ini:/.browserslistrc
last 2 versions, not dead

```

### 補足
お好みで`cssnano`などでminifyしていただければと思います。
Heroku　CLI　操作（コマンド）

**あくまでもコマンド一覧です。デプロイする時の順番ではないのでご注意**
**railsアプリケーションをHerokuにデプロイする為、gemファイルに記述**
```ruby:Gemfile
　group :production do
  　　　gem 'rails_12factor'
　　end
```
*rails_12factorは、開発環境ではなく本番環境で使用するGem,productionは本番環境で使用できる様にする為*
**コマンド一覧**
<dl>
  <dt>herokuにログイン</dt>
  <dd>heroku login --interactive<dd>
  <dt>Heroku上に公開するためのアプリケーションを作成</dt>
  <dd>heroku create　アプリ名 </dd>
  <dt>アプリケーションが反映されているか</dt>
  <dd>git config --list | grep heroku</dd>
  <dt>heroku上でmy sqlの作成（ClearDBアドオン)</dt>
  <dd>heroku addons:add cleardb</dd>
  <dt>Ruby on Railsを使う場合は、 MySQLに対応するGemに変更</dt>
  <dd>heroku_cleardb=`heroku config:get CLEARDB_DATABASE_URL`</dd>
  <dt>自身のmysqlのバージョンに変更（URL)</dt>
  <dd> heroku config:set DATABASE_URL=[自身のmysql]${heroku_cleardb:5}</dd>
  <dt>credentials.yml.encをmaster.keyによって復号し、中身を確認したい時</dt>
  <dd>EDITOR="vi" bin/rails credentials:edit</dd>
　<dt>Heroku上で環境変数の設定</dt>
  <dd>heroku config:set RAILS_MASTER_KEY=`cat config/master.key`</dd>
  <dt>Herokuの環境変数一覧を表示</dt>
  <dd>heroku config</dd>
  <dt>herokuにアプリ反映</dt>
  <dd>git push heroku master</dd>
  <dt>heroku上でマイグレーションの反映</dt>
  <dd>heroku run rails db:migrate</dd>　
 <dd>*heroku runはheroku上で操作したい時に使用する*</dd>
  <dt>Herokuにデプロイされたアプリケーションの情報を参照したい時</dt>
  <dd>heroku apps:info</dd>
TypeScript + Jestでfsをモックする

TypeScriptでライブラリを作っていて、ユニットテスト内でfsをモックしようとしたときにやり方がわからず苦労したので残しておきます。

## 環境

- Node.js

    v12.18.1

- TypeScript

    4.0.3

- Jest

    26.6.0

## 背景

GrafanaをWeb API経由で管理するライブラリのユニットテスト内でファイルを扱っていました。
以下のようなテスト対象のクラスがあるため、fsをユニットテスト内でモックするためにJestのmocking機能を利用しました。

``` TypeScript:Sample.ts
export class Sample {
    readFile(source: string): string {
      if (!fs.existsSync(source) {
          throw new Error();
      } else {
          return fs.readFileSync(source, {
              encoding: "utf8"
          });
      }
    }
}
```

## モッキング方法

### 方法1

[こちら](https://qiita.com/vimyum/items/4ded9de3b784afd31025)の記事でも取り上げられている方法になります。
しかし、こちらではうまくいきませんでした。

``` TypeScript:Sample.test.ts
jest.mock('fs', () => ({
    readFileSync: jest.fn(() => `first¥n second¥n third`),
}));
import * as fs from "fs";
import { Sample } from "./Sample";

describe("Smaple test", () => {
    beforeEach(() => {
        // mockClearが定義されていないため、トランスパイルできない
        fs.readFileSync.mockClear();
        fs.existsSync.mockClear();
    });
    it("ファイルが存在しない", () => {
        fs.existsSync.mockImplementation(() => false);
        fs.readFileSync.mockImplementation(() => "");
        const sample = new Sample();
        expect(() => sample.readFile("foo.txt")).toThrow();
    });
    it("ファイルが空でない", () => {
        fs.existsSync.mockImplementation(() => true);
        fs.readFileSync.mockImplementation(() => "sample");
        const sample = new Sample();
        const result = sample.readFile("foo.txt");
        expect(result).toBe("sample");
    });
});
```

### 方法2

ts-jestの中にあるUtilクラスを使って、モックを行う方法になります。
ts-jestはjestをTypeScript環境でも使うためのパッケージです。Jestの公式ドキュメントでも言及されているので、安心です。

使う際に気を付けることは使用しているAPIと同様にmockImplementationを実装する点です。

``` TypeScript:Sample.test.ts
// ここでts-jestのモック作成Utilをインポート
import { mocked } from "ts-jest/utils";

// fsをモック
jest.mock('fs');
import { Sample } from "./Sample";

describe("Smaple test", () => {
    it("ファイルが存在しない", () => {
        // 対象の関数をモックする
        mocked(fs.existsSync).mockImplementation((_) => false);
        mocked(fs.readFileSync).mockImplementation((_, __) => "sample");

        const sample = new Sample();
        expect(() => sample.readFile("foo.txt")).toThrow();
    });
    it("ファイルが空でない", () => {
        // 対象の関数をモックする
        mocked(fs.existsSync).mockImplementation((_) => true);
        mocked(fs.readFileSync).mockImplementation((_, __) => "sample");

        const sample = new Sample();
        const result = sample.readFile("foo.txt");
        expect(result).toBe("sample");
    });
});
```


## 結論

ts-jestのutilsを使うのがベストです。
毎回、mockImplementationを行う必要がありそうですが（もしかしたらいらないかも）、
テストコード内で共通関数を呼び出すなど工夫をすれば、そこまで気にしないで済みそうです。
VSCodeでESLintとPrettierを導入する

# この記事の対象者

Vue-CLIを導入しようとしており、
チーム全員がVSCodeを採用していて、開発環境を統一したい方向けの記事となっております。

## なぜVSCodeなのか

無料、軽量、利用率、無料、軽量、利用率、ドキュメント豊富、Edge連携、XD連携などなど拡張機能が豊富


## VSCodeでハッピーコーディング

エディタでESLintエラーが表示されるのが何が良いのか？？
ファイル保存する前から`Warning`なら黄色の下線が表示されて、`Error`なら赤色の下線が表示されるのが凄い便利！！

### VSCode + ESLintの何が良いのか？？

- 事前にビルドエラーを伏せぐことができる！！
- 事前にエラーを知ることができる！！

### VSCode + Prettierの何が良いのか？？

- ファイル保存時に文法が整形される！！
- 結果、開発者全員の見た目が統一される！！
- 開発品質が向上する！！


### vue create での選択内容

![スクリーンショット 2020-10-26 0.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497005/ab59858b-0164-0104-507f-a38df8e8c6a4.png)


## 各種ファイルでの設定方法

### .VSCode/extensions.jsonに設定を追加！！

このファイルの役割は、VSCodeにインストールするべき拡張機能を設定しています。

```json

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

### .VSCode/settings.jsonに設定を追加！！

要注意ポイント！！

これを設定しないとオススメの拡張機能として表示されないため`false`に設定するようにしてください。
` "extensions.showRecommendationsOnlyOnDemand": false`

```json

{
  "eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "extensions.showRecommendationsOnlyOnDemand": false
}

```

### Next!! ルートディレクトリに .eslintrc.js を作成して設定を追加！！

extendsには適応したいルールを追記すればOKです！！
rulesではextendsで適応した`ルールを上書き`したいときに追記します。

```javascript

module.exports = {
  root: true,
  env: {
    "node": true
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint"
  ],
  parserOptions: {
    "ecmaVersion": 2020
  },
  rules: {
    "no-console": ["warn", { allow: ["warn"] }],
    "vue/order-in-components": "warn",
    "comma-dangle": ["warn", "never"]
  }
}
```

### Next!! ルートディレクトリに .prettierrc を作成して設定を追加!!

```
{
  "printWidth": 80,
  "tabWidth": 2
}
```

### 最後に

今回のルールはあくまでもサンプルなので、ルールは適宜チーム全員で決めることをオススメします。