OmniAICreator/Qiita-1.07M huggingface dataset:
[Python]同じ整数を別々の変数に代入したら参照するオブジェクトのIDが同じになる理由

Pythonの代入の挙動について学習していたときに出くわした疑問です。
## 同じ整数を別々の変数に代入したら参照するオブジェクトのIDが同じに。なんで？
以下のように、変数 a、b に 10 をそれぞれ代入したとき、

```python:Python
>>> a = 10
>>> b = 10
```

自分の頭の中では、こんな↓風に「**値はどちらも 10 だけどメモリ上には２つのオブジェクトが生まれ、それぞれにa, bの名前が付いている。ID(メモリアドレス)はもちろん別を指し示す**」というイメージでした。[Pythonの代入は束縛/bind](https://docs.python.org/3/reference/simple_stmts.html#assignment-statements)というやつですね。
![スクリーンショット 2020-01-18 1.49.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283290/3d4bd57b-0a27-b644-b1f8-925170dc7ac6.png)



ところがどっこい、変数a, bが参照しているオブジェクトのIDを確認すると、

```python:Python
>>> id(a)
4343178640
>>> id(b)
4343178640
>>>
>>> a is b
True
>>>

# 同じ...!?!?!?
```
なんと全く同じIDを示していました。以下のように **a も b も同じオブジェクトを参照している状態**になっています。
![スクリーンショット 2020-01-18 2.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283290/aac47dad-5c64-6d2c-e329-669c821443d7.png)
`b = a`としていたならこの結果で納得だったのですが、b に a を代入したわけではありません。

## 公式ドキュメントによると、代入前にすでに-5〜256までの整数オブジェクトがメモリに存在している
「python 変数 int id 同じ」などと検索してみても出てこなかったので、Google USで「python int same address」と検索したら解決しました。

[Python WAT!? Integer Cache](https://wsvincent.com/python-wat-integer-cache/) 　→　 [Integer Objects(公式ドキュメント)](https://docs.python.org/3/c-api/long.html#c.PyLong_FromLong)

> The current implementation keeps an array of integer objects for all integers between -5 and 256, when you create an int in that range you actually just get back a reference to the existing object.
現在の実装では、-5 から 256 までの全ての整数に対する整数オブジェクトの配列を保持するようにしており、この範囲の数を生成すると、実際には既存のオブジェクトに対する参照が返るようになっています。

ということなので、

「-5 〜 256 の整数はメモリ上で利用できるように準備OKの状態になっている。だから`a = 10` `b = 10`の代入が実行される時には 変数a も 変数b も既にメモリ上にある`10`という整数オブジェクトを参照をするだけ。結果、IDは同じになる」 と理解しました。

メモリ上に展開されている/されていない境目になる 256, 257 の値で試してみると、

```python:Python
>>> a = 256
>>> b = 256
>>> id(a)
4343186512
>>> id(b)
4343186512 # IDが一緒
>>> a is b
True
>>>
>>> a = 257
>>> b = 257
>>> id(a)
4346386992
>>> id(b)
4346387088 # IDが異なる！！
>>> a is b
False
>>>
```

公式ドキュメントの想定通りに、257から 変数a と 変数b で参照するオブジェクトが異なることが確認できました。

以下サイトを読むと、「-5 〜 256の数値は頻繁に使われ、パフォーマンスのためにすぐに利用できるようにしておく」のが目的とのこと。
[Real Python: Small Integer Caching](https://realpython.com/lessons/small-integer-caching/)

### 整数ではなく、浮動小数点数で実験
「**整数オブジェクト**の配列を保持するようにしており〜」とあったので、浮動小数点数で試してみたら...

```python:Python
>>> a = 0.5
>>> b = 0.5
>>> id(a)
4317942456
>>> id(b)
4317941880 # IDが異なる
>>> a is b
False
>>>
```

値自体は同じでも、浮動小数点数の場合はIDが異なる結果に。これもドキュメント通り整数のみ、ということが確認できました。
### 試した環境
Python 3.7.1
seederの使い方

忘れっぽいので書き置き。

```console
%php artisan make:seeder (ファイル名)
--->テストファイルの作成。

%composer dump-autoload
--->seederをアプリケーションに認証。

%php artisan db:seed --class=(ファイル名)
--->対象ファイルのseederを実行
```

###参考
[入門Laravelチュートリアル](https://www.hypertextcandy.com/laravel-tutorial-todo-app-list-folders/)
Blenderでマテリアルを陰影なしでテクスチャにベイクする方法(20200118)

# Bake処理とは
マテリアル情報を元にテクスチャを生成することが出来るものです。
今回は、マテリアルのカラー情報のみをテクスチャに変更する方法を紹介します。

![コメント 2020-01-18 022317.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/5e83c482-b412-10d1-3d5b-508ac35fe39f.png)
この方法では、ベイク時にライトによる陰影が影響しないため、思い通りにマテリアル情報をテクスチャに変換することが出来ます！
Blenderのバージョンは2.81aです。

# 手順
1. Render EngineをCyclesに変更します

![コメント 2020-01-18 022536.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/66965464-24ee-21cf-642c-ab1ac647164e.png)
2. オブジェクトに適宜マテリアルを割り当てます。
(Tips:Principled BSDFであればEeveeでもCyclesでも使用出来ます)
3. オブジェクトをUV展開します。
4. テクスチャの書き込み先を生成しておきます。UV Editorで以下の画像のように作業します。(ワークスペースをUV Editingに変更すると分かりやすいです)

![コメント 2020-01-18 023810.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/a8a22bb4-49ef-0fa2-29d6-2913bd4447eb.png)
名前、サイズなどを適宜設定してＯＫを押すと、黒い画面が現れます。
5. Shader EditorでImage Textureノードを追加します(ワークスペースをShadingに変更すると分かりやすいです)![コメント 2020-01-18 024859.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/648b92ff-1113-3d0c-bf7c-17896dd0644b.png)
6. Image Textureノードで、4の手順で生成したテクスチャを指定します。

![コメント 2020-01-18 025141.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/823b78d4-ed64-5c05-446c-ebf7ac7167a9.png)
7. マテリアルが複数ある場合は5と6の手順を全てのマテリアルスロットに対して繰り返し行います。(Texture Imageノードのコピペも可能です)
**この時、マテリアルスロットを切り替えるのであって、同一スロット内でマテリアルを切り替えるのではありませんので注意してください。**
![コメント 2020-01-18 025921.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/8d04ed1f-2020-7605-de6d-52bbf7de0041.png)
8. 全てのマテリアルスロットで、**Image Textureノードが選択されている状態か確認**します。選択されていない場合は**必ず選択してください。**
9. Property EditorのSceneに(1の手順の画面に)戻って、Bakeの項目を開きます
10. Bake TypeをDiffuseに変更し、InfluenceをColorのみに変更します。(OutoputのMarginを0にすると無駄なスペースなくBakeを行ってくれます)
![コメント 2020-01-18 030606.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/6aa81da6-4ff3-b668-8b7b-9bb67a004ffc.png)
11. 最後に、Bakeボタンを押します。
以上でBake処理が走ると思います。
UV Editorで確認してみてください。
生成されたUV画像は保存するのを忘れずに。Save asで外部に書き出しを行っておくと確実です。
![コメント 2020-01-18 031319.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/a5212e82-d5c2-2c6f-f55c-435acc345bfe.png)
以上です。
www付きをwwwなしへリダイレクトをALBで(terraform)

```
resource "aws_lb_listener_rule" "redirect" {
  listener_arn = aws_lb_listener.https.arn
  priority     = 90

  action {
    type = "redirect"
    redirect {
      host        = "example.com"
      path        = "/#{path}"
      port        = "443"
      protocol    = "HTTPS"
      query       = "#{query}"
      status_code = "HTTP_301"
    }
  }

  condition {
    field  = "host-header"
    values = ["www.example.com"]
  }
}
```
Nuxt.js firebase GoogleAuth

```javascript:plugins/firebase.js
import firebase from "firebase";

if (!firebase.apps.length) {
  const firebaseConfig = {
    apiKey: "<apiKey>",
    authDomain: "<authDomain>",
    databaseURL: "<databaseURL>",
    projectId: "<projectId>",
    storageBucket: "<storageBucket>",
    messagingSenderId: "<messagingSenderId>",
    appId: "<appId>",
    measurementId: "<measurementId>"
  };

  firebase.initializeApp(firebaseConfig);
}

export default firebase;
```

```vuejs:/pages/login.vue
<template>
  <div>
    <button type="button" @click="signIn()" class="btn btn-primary">Sign in with Google</button>
    <div><router-link to="/mypage" >マイページ</router-link></div>
  </div>
</template>

<script>
import firebase from "@/plugins/firebase";

export default {
  created: function() {
    const user = firebase.auth().currentUser;
    console.log('user', user);
    if (user) {
      this.$router.push('/mypage'); 
    }
  },
  methods: {
    signIn() {
      const provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithPopup(provider).then((result) => {
        console.log('result', result);
        this.$router.push('/mypage');
      }).catch((error) => {
        console.error(error.code);
      });
    }
  }
}
</script>
```

```vuejs:pages/mypage.vue
<template>
  <div>
    <div>{{email}}</div>
    <button type="button" @click="signOut()" class="btn btn-primary">ログアウト</button>
    <div><router-link to="/login" >ログイン画面</router-link></div>
  </div>
</template>

<script>

import firebase from "@/plugins/firebase";

export default {
  data: function() {
    return { email: null };
  },  
  created: function() {
    const user = firebase.auth().currentUser;
    console.log('user', user);
    if (user) {
      this.email = user.email; 
    } else {
      this.$router.push('/login');
    }
  },
  methods: {
    async signOut(){
      await firebase.auth().signOut();
      this.$router.push('/login');
    },
  }
}
</script>
```
よく使いそうなjQyery

# はじめに
jQueryで頻出の`$`の正体は関数である。

```javascript:jQuery
> console.log(typeof($));
function
```
functionとはオブジェクト型の一種である。

# セレクタ
対象となるDOM要素
- HTMLタグ:`$("p")`
- id:`$("#id")`
- class:`$(".class")`

## 応用
「」内の記号でDOMを区切る

- 複数の要素:「,」
- 直下の要素:「>」
- それ以下の要素:「半角スペース」
- 隣接する要素:「+」

# 属性セレクタ
文字通り、HTMLの属性でセレクタを指定するもの
例.href属性がxxxのとき`$('a[href="xxx"]')`

- 等しくない:「!=」
- xxxを含む:「\*=」
- 先頭がxxxで始まる:「^=」
- 終わりがxxxで終わる:「$=」

# 使いそうなメソッド
- 属性値の取得:`$('a').attr('href')`
- 属性値の変更:`$('a').attr('href'、'xxx')`
- カスタム属性の値を取得:`$('a').data('xxx')`
- タグの中身のテキストを取得:`$('p').text()`
- タグの中身のテキストを変更:`$('p').text('xxx')`
- タグの中身にHTMLを挿入:`$('p').html('<p>xxx</p>')`
- valueの値を取得:`$('input[name="hoge"]').val()`
- valueの値を変更:`$('input[name="hoge"]').val('xxx')`
- セレクタの中身を削除:`$('p').empty();`
- セレクタを削除:`$('p').remove();`

# イベント
イベントとは、クリックやマウスオーバーなどの**外部からのきっかけ**を表す
イベントと処理の中継役を**イベントハンドラ**という。
イベントハンドラにはイベントオブジェクトを引数として渡すことができる。
イベントによって、イベントオブジェクトには様々なプロパティやメソッドが含まれている。

# onメソッド
HTMLソースには存在していない要素、つまり動的に作成された要素に対して使う。

```javascript
/*
$('親要素').on('イベント', '対象となる要素', function() {
                処理内容
            });
*/

$('body').on('click', '.vanish', function() {
                $(this).remove();
            });
```

# $.get $.post

どちらもパラメータを渡してサーバ側で処理できる。
\$.post()と\$.get()の使いわけはフォームと同じ。
データを取得するなら\$.get、データを更新するなら\$.post()を使う。

引数には、主に**サーバ側のファイル名、パラメータ、コールバック関数**を指定する。
get,postでのアクセスの結果はコールバック関数の引数に入れることができる。

```javascript:書き方の例
// $.get('',{},function())

$.get('greet.php', {
    name: $('#name').val();
}, function(data) {
    $('#result').html(data);
});
```

値の形式はよくJSONが使われる。

```php:greet.php
$rs = array(
    "message" => htmlspecialchars("hi! " . $_GET['name'], ENT_QUOTES, "utf-8"),
    "length" => strlen($_GET['name'])
);

header('Content-Type: application/json; charset=utf-8');
echo json_encode($rs);
```

```javascript:jQuery
$('#greet').click(function() {
    
    $.get('greet.php', {
        name: $('#name').val()
    }, function(data) {
        $('#result').html(data.message + '(' + data.length + ')');
    });

});
```
nodenvを使ったNode.jsのインストール手順

#はじめに
これまではNode.jsのバージョン管理ツールとして、
nodebrewを使っていたのですが、
ディレクトリごとにNode.jsのバージョンを分けたくなったので、
nodenvのインストール手順を記録として残します。

[nodenv](https://github.com/nodenv/nodenv)はこちらから。
[今回参考にしたQiitaの記事](https://qiita.com/YuukiMiyoshi/items/080b6cde332d8d4e06f3)はこちらから(ありがとうございます)。

詳しくは調べてませんが、pyenvと同様の管理方法ができるらしいですね。

今回はHomebrewを使ってnodenvを入れていきます。



# 環境
- MacBook Air (Retina 13-inch 2018)
    - OS
        - macOS Mojave バージョン 10.14.6
    - メモリ
        - 16GB
    - シェル
        - bash

#手順
## 前提
`$`はターミナルでの入力を示します。

    $ ls
や、

    $ cd
などの表記とします。

## nodenv のインストール手順
Homebrewからnodenvを入れます。
(コマンドをディレクトリはどこでもいいです...)

    $ brew install nodenv

インストールが完了したら`.bash_profile `に`export PATH="$HOME/.nodenv/bin:$PATH"`と` eval "$(nodenv init -)" `を追記します。

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

またはエディタを使って追記します。

     $ vim ~/.bash_profile
     export PATH="$HOME/.nodenv/bin:$PATH"
     eval "$(nodenv init -)"

一応シェルは再起動します。

    $ exec $SHELL -l

動作するかテストします。

    $ nodenv -v
    nodenv [バージョン]
    $
とバージョン番号が表示されれば、
インストール完了です。

## Node.jsのインストール
バージョンを確認するなら`nodenv install -l`とします。

    $ nodenv install -l

インストール自体は`nodenv install [バージョン]`で完了します。

    $ nodenv install [バージョン]

インストールしているNode.jsのバージョンの確認。
    $ nodenv versions

全体で使う場合は`global`でバージョンを指定します。
特定のディレクトリで使う場合は`local`でバージョンを指定します。

    $ nodenv global [バージョン]

    $ node local [バージョン]

最後に`node -v` でバージョンを確認します。

    $ node -v
    v[バージョン番号]
    $

もしバージョンがインストールしたものと違った場合は補足を確認してください。

## 補足
`$ nodenv`が使えない場合や、
nodeのバージョンがインストールしたものにならない場合は、
`node-build`を入れたほうがいいのかもしれません。


    $ git clone git:://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build

#終わりに
`nodeenv`と打ち間違いが無いようお気をつけください。
R言語のfor文で引数にデータを割り当てたり、読み込んだりする




#for文中でデータを成型して、変数に入れたい

いちいちcsvに吐き出して後で読み込んでもいいのですが、assignが使えたら少しスマートなコードも書けるかも。

※2019-01-18追記
for文中でのfor文への割り当てとしてirisデータを使っていきます。

```r
for( i in 1:10){
    assign(paste0("iris_row", i), iris[i,])
}
```

paste0で指定した文字列を引数名にしてデータを割り当てられる。

```r
iris_row1
```

結果出力は

```
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1          5.1         3.5          1.4         0.2  setosa
```

pasteで名付けた引数に割り当てられていることが分かる。

#get関数
get関数で引数名をpaste関数と組み合わせて呼び出せる。
決まったフォーマットで命名した引数を呼び出すときに便利


```r
get(paste0("iris_row", 1))
```

上記のiris_row1と同じ結果が返ってくる


引数名を指定できるということは、

```r
for( i in 1:10){
    print(get(paste0("iris_row", i)))
}
```

```
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1          5.1         3.5          1.4         0.2  setosa
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
2          4.9           3          1.4         0.2  setosa
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
3          4.7         3.2          1.3         0.2  setosa
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
4          4.6         3.1          1.5         0.2  setosa
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
5            5         3.6          1.4         0.2  setosa
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
6          5.4         3.9          1.7         0.4  setosa
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
7          4.6         3.4          1.4         0.3  setosa
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
8            5         3.4          1.5         0.2  setosa
  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
9          4.4         2.9          1.4         0.2  setosa
   Sepal.Length Sepal.Width Petal.Length Petal.Width Species
10          4.9         3.1          1.5         0.1  setosa
```


繰り返しで表示もできる。
さらにprintが適応できるということは


```R
for( i in 1:10 ){
    write.csv(get(paste0("iris_row", i)), paste0(i,".csv"))
}
```

※2019-01-18 write → write.csvに修正

引数をfor文で指定しながらcsvに変換もできる。

#以上
スマートなコードたらんことを。
iOSアプリ内にAPIアクセスキーを保持するベストプラクティス(Swift)

## はじめに

iOSアプリ開発において、APIアクセスキーの管理方法に疑問を持ちました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">iOSアプリ開発で、APIアクセスキーなどの機密情報を管理するベストプラクティスを実は知らない😢<br>privateリポジトリだとソースコードに直書きしてしまいがちなので、ちょっと調べてみよう</p>&mdash; ウホーイ (@the_uhooi) <a href="https://twitter.com/the_uhooi/status/1215894536611745792?ref_src=twsrc%5Etfw">January 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterでいろいろ教えていただき、自分の中でベストプラクティスを考えたので紹介します。

## 結論

先に結論を記載します。

- CocoaPodsを使っている、かつライブラリの追加に抵抗がない → cocoapods-keysを導入する
- CocoaPodsを使っていない、またはライブラリの追加に抵抗がある
  - リポジトリがprivate → `.swift` ファイルへ直接書く
  - リポジトリがpublic → CI時に `.swift` ファイルへ注入する

## 解説

結論のみではわからないので、解説します。

### cocoapods-keys

CocoaPodsのプラグインで、機密情報をキーチェーンアクセスで管理するツールです。
https://github.com/orta/cocoapods-keys

私は使ったことがないのですが、 [こちらの記事](https://qiita.com/susieyy/items/4632e30068a826b936f6) を読む限り、非常に便利なツールです。
CocoaPodsを使っているなら、導入を検討してもよさそうです。

### リポジトリがprivate

CocoaPodsを使っていない、またはライブラリの追加に抵抗がある場合は、手動で対応する方法が考えられます。

リポジトリがprivateの場合、 `.swift` ファイルへ直接書いて問題ないと思います。
理由は当たり前ですが、privateリポジトリからソースが漏れることは（基本的に）ないためです。

```swift:AccessTokens.swift
let fooAccessToken = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" // 直接書いてOK
```

注意点として、 __`.plist` ファイルなどのリソースに保持すると、エンドユーザーが読み取れてしまいます__ 。
`.swift` ファイルはコンパイルされますが、リソースはそのまま `.ipa` ファイル内に保持されます。
もしリソースで機密情報を管理していたら、すぐに対応すべきです。

### リポジトリがpublic

APIアクセスキーを使っているOSSなど、リポジトリがpublicな場合も考えられます。
その場合はソースに直接書けないので、CI時に注入します。

#### ①ローカルの `.swift` ファイルにアクセスキーを記述する

privateリポジトリと同様、 `.swift` ファイルをプロジェクト内に作成してアクセスキーを記述します。

```swift:AccessTokens.swift
let fooAccessToken = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
```

これでローカルでの開発は問題なく行えます。

#### ②アクセスキーを含むファイルをGitの管理外にする

このままリモートリポジトリにプッシュすることはできないので、 `.gitignore` に対象ファイルを追記します。

```diff:.gitignore
+ AccessTokens.swift
```

#### ③プロジェクトファイルのみプッシュする

対象ファイルを追加したプロジェクトファイルのみリモートリポジトリにプッシュします。

#### ④CIサービスにアクセスキーを保持する

ほとんどのCIサービスには機密情報を暗号化して保持する機能があると思うので、活用します。
GitHubの場合、 [Secrets](https://help.github.com/ja/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets) という機能があるので、そこでアクセスキーをシークレットとして保持します。

<img width="1003" alt="スクリーンショット_2020-01-18_0_21_30.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/d52fc999-dbad-29b3-2bf6-74ffc1602e68.jpeg">

#### ⑤CI時にアクセスキーを注入する

保持したアクセスキーをCI時に注入します。
GitHub Actionsの場合、以下のようなステップをビルド前に実行します。

```yml:main.yml
- name: Inject access token
  run: echo "let fooAccessToken = \"${{ secrets.FOO_ACCESS_TOKEN }}\"" > ./Foo/AccessTokens.swift
```

これでCI時にアクセスキーを `.swift` ファイルへ注入できます。

#### ⑥Makefileを用意する

自分以外の開発者のために、Makefileを用意すると親切です。
以下に例を記載します。

```make:Makefile
.PHONY: inject-tokens

inject-tokens:
	echo "let fooAccessToken = \"${FOO_ACCESS_TOKEN}\"" > ./Foo/AccessTokens.swift
```

コマンドをREADMEに書くことで、他の人もローカルで開発しやすくなります。

```md:README.md
Run `make inject-tokens FOO_ACCESS_TOKEN={Foo Access token}` .
```

## おわりに

これでiOSアプリ開発で安全にAPIアクセスキーを管理できます！

もし他にベストプラクティスを持っている方がいたら、教えていただけると嬉しいです。

## 参考リンク

- [【iOSアプリ】外から見えて困るものを.plistファイルに書くのはやめる - Qiita](https://qiita.com/meSummer/items/8635d5b0c82b6af60b29)
tf-pose-estimationを動かすためにインストールが必要な物まとめ

![cmu_tennis_v3_10_data.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178837/c8a1628e-e155-20aa-5aee-2f984be147d2.jpeg)

#概要
tf-pose-estimationを動かす時に事前にインストールすべき物が結構あってそれが原因で詰まったりしたのでメモ
ちなみにtf-pose-estimationの導入は以下の記事を参考に行った。
https://qiita.com/ikekou/items/9a632b10588b423db172

#インストールが必要な物
##Git
以下のコマンドを実行する際に必要になる事前作業です。
``git clone https://www.github.com/ildoonet/tf-pose-estimation``

何はともあれGitをいれる。Git入れないとプロジェクトのクローンも実行できない。

MacでGit導入(Homebrew利用)
https://qiita.com/kimurayut/items/6f50cf1060e44e664c3b


##python、pip、numpy
以下のコマンドを実行する際に必要になる事前作業です。
`` pip3 install -r requirements.txt``
tf-pose-estimationはpythonを用いて利用することが多いので入れておく。
また、インストールはpip。numpyはプロジェクトのモジュールの中でインポートされているので入れておく。

大丈夫かと思いますが、慣れていない方は以下の手順でインストールしてください。

```
$ brew install pyenv
$ pyenv install 3.6.5
$ pyenv global 3.6.5  
$ eval "$(pyenv init -)"
$ pip3 install numpy
```
##pcre,swig
以下のコマンドを実行する際に必要になる事前作業です。
``$ swig -python -c++ pafprocess.i && python3 setup.py build_ext --inplace``

インストールは以下の記事の手順を参考にしてください。
https://qiita.com/Rotten_Fruits/items/bb4764c765d7e1cdf96f

##wget
以下のコマンドを実行する際に必要になる事前作業です。
`` bash download.sh``

【インストール方法】

```
$ brew install wget
```

##opencv,tensorflow
以下のコマンドを実行する際に必要になる事前作業です。
`` python -c 'import tf_pose; tf_pose.infer(image="./images/p1.jpg")'``

【インストール方法】

```
$ pip install opencv-python
$ pip install -U tensorflow==1.15)
※tensorflowのバージョンは1.15にしてください
```

#以上
これでスムーズに導入できるはず!
画像データの表示を速くする方法

自身のポートフォリオサイトのメインの画像の読み込みが遅い事について調べてみました。

#画像の読み込みの優先順位をあげる

まず、
ファイルの読み込みの優先順位がどのようになっているか調べる
デベロッパーツールでNetworkを開く
最初は何も表示されていないと思うので開いた状態でリロードをします。
そうするとファイルを読み込んだ順番で表示されていくのがわかる。

`読み込みの順番をあげる事で表示が速くなる理由`
読み込まれるタイミングは全部が同じタイミングでは無い為、表示が遅い物を速めに読み込み始める事によって表示が速くなる

##やる事
HTMLファイル内のhead内にlinkタグを作り以下のように記述する
`<link rel="preload" href="軽くしたいファイルの指定" as="image">`
このようにするとNetworkで見てみると表示するファイルで1番上に来てると思います。

下の参考記事に詳しく内容が書いてあるので見てみてください。また、今回は画像ファイルでしたが、もちろん画像ファイル以外にも使えます。

参考記事
[rel="preload" によるコンテンツの先読み](https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content)
チームで Qiita 週１投稿活動を始めて２ヶ月が経った。皆、やる気に満ち溢れている。

以下ツイートの背景を綴ったポエム的な記事です。
技術的な内容は登場しませんが、アウトプットがもたらした効果についてまとめました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">チームで週一Qiita記事を投稿するアウトプットを実践している。2ヶ月が経過してふりかえりをした。OSSにコントリビュートしたいと全員が言い出している。素晴らしい成果につながった。やはりアウトプットは素晴らしい。正義だ。 <a href="https://t.co/SbOeHrIcbQ">pic.twitter.com/SbOeHrIcbQ</a></p>&mdash; G ☁ (@gee0awa) <a href="https://twitter.com/gee0awa/status/1214528907040325635?ref_src=twsrc%5Etfw">January 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


アウトプットする意義はなんだろう、どれだけの効果があるのだろう？
自分自身はアウトプットすることを通して学習をしているが、他の人にもハマる学習方法なのだろうか？

そんなことを一人で考えていました。一人で考えていても結論は出ないので行動に移してみました。

# アウトプット駆動学習について発表してみた

まずはじめに、アウトプット駆動学習を他の人にも布教してみることにしました。
まずは社内勉強会で Qiitaにアウトプットすることを通した学習のテクニックを発表、いまいちウケがよかったのかどうか分からない。フィードバックがあまり得られないと、発表した意味があまりないですよね。つぎはもう少しフィードバックが得られやすい事をやってみよう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163591/8821292b-f25d-92c2-f4fc-3ba1604dab82.png)
https://speakerdeck.com/gawa/my-ci-cd-practice


# アウトプット駆動学習をチームではじめてみた


チームメンバの技術力向上の一施策として、Qiita記事を週に１本以上投稿する活動を初めてみました。（もちろんやる気のあるチームメンバの合意の上で）
毎日会話するメンバだし、アウトプットが良いのか悪いのか、すぐにフィードバックが来そうだなと。
チームメンバは私を含めて4人、若手が中心のチームです。

チャットルームを作って、互いの投稿を読む、褒める、イイねをする。
たったこれだけのことしかしませんでしたが、みるみるうちにチームメンバが成長していくのを実感しました。

## ふりかえり
１ヶ月半ほど経ったころ、YMT形式でふりかえりをしました。

YMTとは、

- Y: やったこと
- M: 学んだこと
- T: 次にやること

を共有するスタイルのふりかえりです。

### Y: やったこと

- GoogleAnalyticsを入れた
- Slackアカウントを作った
- AWSアカウントを作った
- Macを買った
- Qiitaに描く前提で考えるようになった
- 寝る時間を減らした
- 作業効率化アプリを入れた
- textlintを使い始めた
- 量より質を意識した
- qiitaというシェルコマンドを作った
- Trelloにやりたい事を書くようになった
- 毎日Qiitaを見ていろいろな技術に興味を持った
- 作業時間を捻出した
- 会社で教わった事を自宅でも復習した
- 記事を１つ書くために色々調べた、結果めっちゃ遠回りした

### M: 学んだこと

- 意外とできた
- なんでもやってみようという考え方になった
- メンバーの好みが理解できた
- 英語の速読テクニックが身についた
- アウトプットを見てもらう楽しさに気づいた
- 基礎的な技術力の足りなさに気づいた
- わかりやすく伝えることの難しさを学んだ

### T: 次にやること

- トレンドにのる
- CI/CD
- 社内でアウトプットの文化をもっと広める
- 色々なツールをつくってみる
- JS系の記事 5本
- 2月末で2000Contributionを目指す
- 何か使えるサービスを公開する
- 書評を書く
- Pythonやりたい
- プログラムを１から勉強し直す
- １週間に１本はきつい、毎週投稿できなくても良いが継続したい
- OSSにContribute
- 仕事で使わない技術に挑戦する

# ふりかえってみて

週１記事投稿というミッションは、ある程度自分を追い込むスタイルなのでとても辛かったとは思います。
それでも皆が「OSSにコントリビュートしたい」や「仕事で使わない技術に挑戦する」など、とにかくもっともっと勉強して成長しようというマインドに変化していったことに驚きました。

やはり自分が信じてきた道は間違いではなかった。
アウトプットは正義だ、この先も続けていこう。そう改めて決意ができました。

チームメンバに感謝です。ありがとう。
acc<val_accは学習不足なの？(keras)

博士の友人に聞いたところ、とても勉強になったので共有します。

質問は、accが次の図になっているとき、学習不足なのかどうかです。
![acc.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247923/97f32ee6-1dc9-2edd-430b-01032804eaa4.png)

なお、後半で出てくるlossは次の図です。
![loss.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247923/3ecaf96a-dd74-6808-1194-2458a30a9895.png)

###acc < val_accのときは学習不足の可能性がある
まず、accってのは学習データに関するaccuracyで、val_accってのはvalidationデータに対するaccuracyになるはずです。

一般的には、データセットの全体を10とした時のデータの配分は、訓練用、評価用、テスト用の３つに8:1:1の割合で分けておくはずで、その状態で出てくるaccはいわば「学習用に用意した、見たことあるデータ」での結果で、val_accは「評価用に用意した、見たことないデータ」にあたるところから、もしacc < val_accであったとすると、まだまだ未知のデータに対してaccuracyが上がってないことになるので、もっと学習をしましょうという単に学習が足りないorモデルを見直してもう少し汎化できる初期値やハイパーパラメータを探しましょう、みたいな結論に至ることになります。

なので、個人的には学習が足りてないというだけで片付けるのはちょっと乱暴ですが、一つの可能性としては学習が足りていない、ということがありえるとは思います！

短くいえば、未知のデータを相手にして著しく結果が下がる場合
acc << val_acc
の時はモデルの初期値等々を見直したほうがいいかもしれないですし、

accとval_accの差分がそこまで大きくない場合
acc < val_acc
の時はもう少し学習させて様子を見てみようかなってなるのは気持ちとしては分かりますね。

ただ、そういう時は、val_accだけでなく、val_lossとかもlossと比較したりして、学習ができていないのか、汎化していないのかとかチェックしますね、単一の指標だけでは結論は出さないほうがいいかもしれません。

###acc < val_acc かつ loss > val_loss のときは学習不足ではない

val_lossのほうが小さいとなると、それはそれで学習の状態としては割と終わりに近いのかも？
loss自体の大きさも、理論値にどれだけ近くなっているか（もっとも収束した場合のlossは大半の場合0になるはずですが、loss関数の形によっては最小値が違いますね）とか見たりして、
学習の進行状態はチェックしますね。

なんで、val_accとaccを見比べるだけでは、あくまで未知のデータにうまくいっていないと判断する指標なだけだと認識しています。

じゃあどこを調整してうまく学習できるようにするかとか、その辺がちょっと経験則で職人チックなので、難しいですが・・・

あと、kerasだとval_lossの算出時に正則化が入ってなかったりするので、loss > val_loss になるのは学習序盤に現れがちなのはあるかも。
Kotlinの拡張関数や拡張パラメータへの呼び出し時にex.を挟むようにする

## 三行で
```kotlin
"abcd".ex.doubleStr() // abcdabcd
Optional.of(3).ex.unwrap // 3
```
拡張関数、拡張パラメータの呼び出しが上のように`ex.`を挟むことができます。

## これはつまり？
Kotlinの拡張関数、拡張プロパティ便利だけど、標準やライブラリの拡張関数、拡張プロパティとは区別ができるようにしたいので、呼び出す前に`ex.`を付けられるようにしてみた。と言う話です。


## きっかけ
最近Swift界隈では拡張関数や拡張パラメータにアクセスする時に、Rxの拡張関数だと`rx.`、自前の拡張関数だと`ex.`みたいなものが流行っている(?)みたい話を耳にしたので、Kotlinでも同じようにしたい！！と思ったので作りました。

例えばこんな感じのやつです
https://qiita.com/tattn/items/dc7dfe2fceec00bb4ff7#exでアクセスできるプロパティやメソッドを作る


## 実装

Swiftのコードを見ると難しそうに見えますが、やってみると意外に簡単でした。
実際のコードです。

```kotlin
data class TargetedExtension<out Base>(val base: Base)
val <Compatible> Compatible.ex: TargetedExtension<Compatible>
    get() = TargetedExtension(this)
```

これだけです。めっちゃ簡単ですね。


## Sample Code

早速これを使って、どう拡張関数、拡張パラメータを定義する必要があるのか見てください。

```kotlin
// 拡張関数定義
fun TargetedExtension<String>.doubleStr(): String = base + base
fun TargetedExtension<Int>.square(): Int = base * base
// 拡張パラメータ定義
val TargetedExtension<String>.doubleStrValue: String
    get() = base + base
val TargetedExtension<Optional<Int>>.unwrap: Int
    get() = base.get()
val TargetedExtension<Number>.half
    get() = base.toDouble() / 2

"test".ex.doubleStr() // testtest
12.ex.square() // 144
"abc".ex.doubleStrValue // abcabc
Optional.of(3).ex.unwrap // 3
3.55.ex.half //1.775
```
（思ったように動いて安心しました）

### コードの説明
以下拡張関数、拡張パラメータの説明が重複するので、拡張パラメータを使ったパターンについての説明をします。
拡張関数の説明も拡張パラメータと同じです。

```kotlin
3.55.ex.half
```

を分解すると左から

1. 3.55: 本来拡張変数を持たせたい型のインスタンス（レシーバ）
2. ex: 型パラメータを使って定義された`ex`拡張パラメータ（関節レシーバ）
3. half: 関節レシーバから呼び出された拡張関数（(関節)レシーバの拡張パラメータ）

本来は`1`と`3`の部分だけで構成して関節部分を挟まない定義が当たり前ですが、`3`の部分の定義を`2`の`ex`が返すインスタンスの型の拡張パラメータとして定義することで、間に`ex`を挟めるようにしたと言うことです。

```kotlin
3.55(本レシーバ).ex(関節レシーバ).half（関節レシーバに定義した拡張パラメータ）
```

- 本レシーバのインスタンスを`TargetedExtension`でラップしたインスタンスを`ex`からもらえるようにする。
- `TargetedExtension`の型パラメータを指定した拡張関数を定義する。

の複合要素の合体技という感じで、ちょっと直感的じゃないのが難点かなという気がしますが、慣れたら問題はないかなぁという気がしています。型パラメータをつなぐ使い方がテクニカルなポイントでしょうか。

---
- ライブラリやなんかの拡張関数、拡張パラメータとは呼び方を変えたい
- 自分のライブラリの拡張関数、拡張パラメータは、特別なアクセスのさせ方をしたい
- 自作のものが他と被るのが嫌だったから拡張関数、拡張パラメータの利用を避けていたけど、それがこれなら問題がクリアされる

みたいに刺さればいいなと思っています。
以上。
【tf-pose-estimation】requirements.txtのpip3 install ができない

![s3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178837/b0207d08-ba5d-7709-16b8-df7c9d85a16d.png)

#概要
骨格推定のライブラリで有名な「tf-pose-estimation」を利用する際にrequirements.txtに書かれているモジュールをインストールする際にかなり詰まったのでメモ。

#事象
https://qiita.com/ikekou/items/9a632b10588b423db172
上記の手順のなかで「pip3 install -r requirements.txt」
でエラーになる。

#エラーログ

```
・・・省略・・・
Collecting pycocotools
  Downloading https://files.pythonhosted.org/packages/96/84/9a07b1095fd8555ba3f3d519517c8743c2554a245f9476e5e39869f948d2/pycocotools-2.0.0.tar.gz (1.5MB)
     |████████████████████████████████| 1.5MB 2.5MB/s 
    ERROR: Command errored out with exit status 1:
     command: /usr/local/opt/python/bin/python3.7 -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/private/var/folders/9r/s1rktt555mdgy44wfqx5kg780000gp/T/pip-install-x_yvzfkm/pycocotools/setup.py'"'"'; __file__='"'"'/private/var/folders/9r/s1rktt555mdgy44wfqx5kg780000gp/T/pip-install-x_yvzfkm/pycocotools/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' egg_info --egg-base /private/var/folders/9r/s1rktt555mdgy44wfqx5kg780000gp/T/pip-install-x_yvzfkm/pycocotools/pip-egg-info
         cwd: /private/var/folders/9r/s1rktt555mdgy44wfqx5kg780000gp/T/pip-install-x_yvzfkm/pycocotools/
    Complete output (5 lines):
    Traceback (most recent call last):
      File "<string>", line 1, in <module>
      File "/private/var/folders/9r/s1rktt555mdgy44wfqx5kg780000gp/T/pip-install-x_yvzfkm/pycocotools/setup.py", line 2, in <module>
        from Cython.Build import cythonize
    ModuleNotFoundError: No module named 'Cython'
    ----------------------------------------
ERROR: Command errored out with exit status 1: python setup.py egg_info Check the logs for full command output.
```

ログ的には「Cythonのモジュールがないかからインストールしてね」っていってるんだけど、他にも色々と対応が必要だった。

#解消方法
Cythonのインストールも合わせて以下の手順を実施したところ解消した。

```
$ brew install pyenv
$ pyenv install 3.6.5
$ pyenv global 3.6.5  
$ eval "$(pyenv init -)"
$ pip install --upgrade pip
$ pip install --upgrade cython
```
RDS for PostgreSQLで監査ログをCloudWatchLogsに出力する

# pgauditの有効化
1. RDSに接続する
---
下記コマンドを実行する

```
psql -U [ユーザ名] -h [RDSのエンドポイント] -d [DB名]
```
2. pgauditが利用するDBロールを作成する
---
下記コマンドを実行する

```
=> CREATE ROLE rds_pgaudit;
```

3. RDSのパラメータグループを変更する
---
AWS管理コンソールから　RDS > パラメータグループ > 設定するインスタンスのパラメータグループ で変更する
***下記は 必須***

|パラメータ名|値|
|:---|:---|:---|
|pgaudit.role|rds_pgaudit|
|shared_preload_libraries|pgaudit|

***下記は 任意***

|パラメータ名|許可される値|説明|
|:---|:---|:---|
|pgaudit.log_level|debug5, debug4, debug3, debug2, debug1, info, notice, warning, log（デフォルト）|ログレベル|
|pgaudit.log|ddl, function, misc, read, role, write, none(デフォルト), all, -ddl, -function, -misc, -read, -role, -write|監査ログの種類|

4. RDSを再起動して、変更したパラメータを反映する
---

5. RDSに再接続する
---
下記コマンドを実行する

```
psql -U [ユーザ名] -h [RDSのエンドポイント] -d [DB名]
```

6. 再起動後、pgauditがロードされていることを確認する
---
下記の内容であればOK

```
=> SHOW shared_preload_libraries;
 shared_preload_libraries 
--------------------------
 rdsutils,pgaudit
(1 row)
```

7. pgauditの拡張機能を有効化する。
---
下記コマンドを実行する

```
=> CREATE EXTENSION pgaudit;
```

8. pgauditに作成したロールがアタッチされているか確認する。
---
下記の内容であればOK

```
=> SHOW pgaudit.role;
 pgaudit.role 
--------------
 rds_pgaudit
```

#CloudWatchLogsへのログ出力

1. ログのエクスポートで Postgresql log にチェックを入れる
---
AWS管理コンソールから　DBインスタンスの[ログのエクスポート]の設定を変更する

<img width="645" alt="aws_rds_postgresqllog_export_cloudwatchlogs.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283246/d542ab89-6a55-60ce-54a2-5c56a89a9077.png">

2. ログが CloudWatchLogs に出力されていることを確認する
---
AWS管理コンソールから CloudWatch > ロググループ で確認する

出力先ロググループ名|/aws/Instance/{DBインスタンス名}/postgresql
---|---
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283246/f4908c7c-b43c-d513-29c5-32d656fa7b89.png" width=100%>

#参考
[pgaudit 拡張機能の使用](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/Appendix.PostgreSQL.CommonDBATasks.html#Appendix.PostgreSQL.CommonDBATasks.pgaudit)
[Aurora PostgreSQLにて監査ログを取得する](https://goodbyegangster.hatenablog.com/entry/2018/10/21/213307)
インフラ構築あるあるをGoで解決する！

Goにはまってるインフラエンジニアです。`インフラ構築あるある`をGoで解決したいと思ってます。

# 背景
その昔のワタシと後輩の電話
※後輩は現地のマシンルーム、ワタシは事務所にいました。

後輩：コマンド間違えました！よくわからんコトになってます！
ワタシ：よくわからんって何や！ログ見て！
後輩：マシンルーム圏外やから外から電話してます！ログ見れないっす！
ワタシ：とりあえずSSHでログ見るか...
ワタシ：何やったのかさっぱりわからぬ＼(^o^)／
ワタシ：現地行くか....

ってことがよくありましたね。こういうときのミスない遠隔HELPって何かできないかな〜と思って、
chatサーバ作るぜ！って思いました。

巷にはwebsocketを使ったchatはあったのですが、↑みたいな場面ってSSHしかできないようなケースあるんで、
普通のsocketで作りました。あまり先行事例がなくて、結構ムズかったです。ゴルーチンとチャネルが難しい....

超絶参考にさせていただきました↓
https://blog.logicky.com/2017/06/16/go-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F/

# 感想
slackすげーなって本当に思いました。
作り終わったあと、プログラミング言語Go読んだら、8章にチャットサーバあった.....
chatでテスト難しくね？それともワタシのアーキテクチャがダメなのか？　←　このへん改善やな....


# 工夫したとこ
* ターミナルからSSHでつなぐので、ルームでトークを分ける機能とかいらね！ってことでルームは公開ルーム1つだけっす！
* 過去のトークはgrep検索したいやん！ってことでテキストファイルでトークを残すことにしました！


https://github.com/kuritayu/infra-tools/blob/master/cmd/tchat/main.go
`go get github.com/kuritayu/infra-tools`でも取れます

とりあえず使い方。

1. 作業サーバにSSHでログイン
2. `tchat &`でサーバを起動(-pでポートを指定できる)
3. 別ターミナルからSSHでログイン
4. `tchat -c`でサーバに接続
5. 名前を聞かれるので適当に入れる
6. メッセージ入れると接続している人全員に配信する

```terminal
NAME:
   tchat - chat tool by terminal

USAGE:
   tchat [global options] command [command options] [arguments...]

VERSION:
   1.0

COMMANDS:
   help, h  Shows a list of commands or help for one command

GLOBAL OPTIONS:
   -c             (default: false)
   -p value       (default: 7777)
   --help, -h     show help (default: false)
   --version, -v  print the version (default: false)
```
Built-in CSSがサポートされました[Next.js 9.2更新情報]

# はじめに
`React`でSSR(Server Side Rendering)が可能なフレームワークである`Next.js`。久しぶりに見てみると2020年1月15日にバージョン9.2を公開しており、個人的に**嬉しい機能**が追加されたということで紹介していきたいと思います。

この記事は公式ブログで紹介されている内容をまとめる形になるので、詳しい内容は[公式ブログ](https://nextjs.org/blog/next-9-2)で確認してください。


# 新(?)機能まとめ

- Built-in CSS Support for Global Stylesheets
- Built-in CSS Module Support for Component-Level Styles

`CSS`を別ファイルからグローバルやコンポーネント単位のモジュールとしてのインポートが簡単になりました。

- Code-Splittingの改善

ビルド時のコード分割を改善することにより、アプリケーションのサイズがかなり小さくなりました。

- 動的パスを全て取得

例えば`/post/a/b/`とパスが動的パスであるとき、`/pages/post/[...slug].js`と`[...name]`シンタックスを使用することで、queryとして`{ slug: ["a", "b"] }`を得ることができ動的パスをまとめて取得することが可能になりました。



本記事では最初の`Built-in CSS`について少し話して終わります。
# Built-in CSSのサポート
今まで別ファイルのCSSを使用するには、以下のような手順が必要でした。

1. `@zeit/next-css`のインストール。
2. `next.config.js`を作成し、設定を記述。

2手間ではありますが、毎回設定するのであればさすがに面倒だと思います。さらに、この`next-css`にはある束縛がありました。それは

**グローバルかローカルかどちらかしか選択ができない。**

ということです。これらの問題を解決したのが今回のアップデートになります。
グローバルとローカルの区別は以下のようになります。

- グローバル ... `[name].css`
- ローカル ... `[name].module.css`

それでは、例を挙げていきます。

## 例: グローバル

`public/style.css`を作成します。

```css:public/style.css
body {
  padding: 20px 20px 60px;
  margin: 0;
}

h1{
  color: red;
}
```

アプリケーション全体で適用したいので、`_app.jsx`でこのファイルを読み込みます。

```jsx:pages/_app.jsx
import '../public/style.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
```

そして、ホーム画面を用意します。

```jsx:pages/index.jsx
export default () => {
  return (
    <>
      <h1>HOME</h1>
    </>
  )
};
```

すると...
![global.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398510/2b8216eb-71dd-c788-7b59-a83c67009bfc.png)
ちゃんと赤色になってますね。要素を見てみると...
![global2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398510/d3c349f5-cb9c-53d1-bb41-016977bc3a68.png)
グローバルになってそうですね。

## 例: ローカル
`pages/home.module.css`を作成します。

```css:pages/home.module.css
.underline{
  border-bottom: 2px dotted black;
}
```

そして、`pages/index.jsx`を以下のように修正します。

```jsx:pages/index.jsx
import styles from "./home.module.css"

export default () => {
  return (
    <>
      <h1>HOME</h1>
      <h1 className={styles.underline}>Welcome to Next.js 9.2!</h1>
    </>
  )
};
```
そうすると、しっかりアンダーラインが引かれて、またモジュールとして呼び出せていることがわかります。
![local.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398510/bed459c0-9a3f-956f-f208-ab2ab6a2ee28.png)


# おわりに
今回は`Next.js`のバージョンアップに伴った更新点を紹介しました。
本記事では`Built-in CSS`のみ紹介しましたが、他の機能も本格的なアプリケーションを作る際に助かるような内容になっています。ぜひ公式のブログにアップデートの内容が詳しく書かれているので読んでみてください。


# 参考

- [NEXT.js - Next.js 9.2](https://nextjs.org/blog/next-9-2)
- [Qiita - Next.js 9.1: srcディレクトリとpublicディレクトリがサポートされました @mottox2](https://qiita.com/mottox2/items/dbbbd3cf44c4f3edfa76)
C/C++ コンパイラの最適化オプションの具体的な中身

（この記事は私の blog の http://umezawa.dyndns.info/wordpress/?p=7429 の転載です）

GCC なり Clang なり MSVC なりを使う場合、普通は最適化オプションとしては `-O2` などとだけ指定します。実際にはこの `-O2` はいろいろな最適化手法の集合を有効化するオプションなのですが、じゃあその集合を知りたくなったらどうしましょう、というのがこの記事のお話です。

<!--more-->

## MSVC (Visual C++) の場合

MSVC の場合は <a href="https://docs.microsoft.com/ja-jp/cpp/build/reference/o-options-optimize-code">MSDN のオプションの説明のページ</a>にそのものズバリ書いてあります。後述の GCC や Clang と比べると MSVC は最適化オプションの粒度が粗いことが分かります。

## GCC の場合

<a href="https://gcc.gnu.org/onlinedocs/gcc-9.2.0/gcc/Optimize-Options.html">オンラインマニュアル</a>を見ると書いてあります。

手元のバージョンの GCC について調べたい場合は、

```
gcc -Q -O2 --help=optimizers
```

などとすると具体的な設定が表示されます。

## Clang の場合

Clang の場合はサクッと見つけられなかった（マニュアルとか見てもそれぞれのオプションがどういう位置づけなのかしか書いてない）のですが、<a href="https://stackoverflow.com/questions/15548023/clang-optimization-levels">Stack Overflow にそういう質問がある</a>ということを<a href="https://twitter.com/yottui/status/1218142171636715520">教えてもらいました</a>。

```
# LLVM レベルのオプションを知りたい場合
llvm-as < /dev/null | opt -O2 -disable-output -debug-pass=Arguments

# Clang が独自に追加するオプションを知りたい場合
echo 'int;' | clang -xc -O2 - -o /dev/null -\#\#\#
```

出力が読みづらいのが難点です。
webサイトの更新の表示をgithubのreleaseで管理

# TD;LR
webサイトの更新履歴をgithubのリリースで管理したら便利だった
releaseの更新に合わせてツイートをするgithub actionsを作った

# releaseで管理
よくウェブページについている下みたいな更新履歴を作ろうと思ったけど

```
20xx/0x/xx xxxxxの内容を更新
20xx/0x/xx xxxxxを追加
20xx/0x/xx xxxxxを更新
```
ファイルにまとめたりして一々追記していくのが嫌だったのでgithubの機能を使いました。

## release機能
releaseはgithubの機能でリリースノートや添付ファイルを付けてユーザーに公開する事ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256522/fc7007d8-2e0a-f759-0252-69a6c877b39e.png)
ここの`releases`と書いてある部分から作成でき、
<img width="807" alt="releaselog.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256522/dc54c161-6949-8baa-8d44-4ffc44c8d8d3.png">
今までの履歴がこのように表示されます。

こんな感じでピッタリな機能だったので今回の更新履歴の実装に使ってみることにしました。

## releaseの取得
releaseの取得にはgithubのrest APIクライアントの[octokit/rest](https://octokit.github.io/rest.js)を使用しました。

```bash
npm install @octokit/rest
```

上のnpmコマンドでパッケージのインストールをしたあとはコードを書いていくだけです。

```javascript
import Octokit from "@octokit/rest";

let releaseLog = []
const octokit = new Octokit();
```

取得したreleaseを入れておくリストとOctokitの宣言を済ませたら。

```javascript
octokit.repos.listReleases({
  owner: "mugi111",
  repo: "my-profile-page",
}).then((res) => {
  if (res.status === 200) {
  // 整形
  }
})
```
`owner`でユーザー名`repo`でリポジトリ名を指定して`listRelease`でreleaseの一覧を取得します。
一覧が返ってきたら自分の使いやすいように整形して最初に宣言した`releaseLog`に入れておきます。

あとはループさせたりして表示させるだけです。


# おわり
更新履歴に追加したいところでrelease作成すれば自動的にページに反映されるようになるので楽になった。
githubからの取得も意外と簡単だった。
github actionsについては次のでちゃんと書きます。

更新履歴を実装したページとリポジトリ
https://th-mg-profile.netlify.com/
https://github.com/mugi111/my-profile-page
Webサーバーとアプリケーションサーバーについて

#はじめに
開発を進めていると、デプロイすることがあると思います。
デプロイをするにあたって、Webサーバーや、アプリケーションサーバーという
言葉はよく耳にすると思いますが、今回これらの何なのか、そしてどういった違いがあるかについて説明します。

#Webサーバーとは
###サーバーの役割
そもそもサーバーの役割とは、ユーザーが送るリクエストに対して、何らかのレスポンスを返すことです。
例えば、「ユーザーがURLを打ち込んで、サーバはそのURLに該当するビューページのファイルを表示する」などです。

Webサーバーの例：apache IIS nginx
###Webサーバーの役割
では、Webサーバーが何をするかというと、データベースと通信せずに、静的なコンテンツのみに対応できるやつです。
※静的なコンテンツ：リクエストのたびに内容が変更されないファイルのこと。
例：表示するものが定まっているCSSや、画像ファイルのこと

#アプリケーションサーバーの役割
では、逆にアプリケーションサーバは、動的なコンテンツを生成し、処理結果をWebサーバに返すという役割を果たします。
ようは、Webサーバーでは対応できないリクエストに対応できるやつです。

例:unicorn puma （rubyの場合）

実は、Webサーバーがなくとも、アプリケーションサーバーだけで本番環境は動きます。

しかし、Webサーバーを設置することで、負荷を分散させることができパフォーマンスが向上します。

#Web三層構成

この考え方をWeb三層構成といい、どのようにwebサーバーやアプリケーションサーバー、データベースを配置するかによって、
コスト面
パフォーマンス面
などが変わります。

※追記予定
Pythonのクラス内変数をプライベート変数として扱う

以下のようなプログラムはクラス内変数のtestが外部から操作可能になっており、バグを生む可能性があります。

```Python
class MyClass(object):

    def __init__(self):
        self.test = 'test'


t = MyClass()
print(t.test)

# 直接編集できてしまう
t.test = 'test2'
print(t.test)
```
```
test
test2
```

~~関数内の変数にダブルアンダースコアを付けることで外部から編集できなくさせることができます。~~
ダブルアンダースコアをつけても以下の形でsetterを使わずに編集可能なようです。

```Python
class MyClass(object):

    def __init__(self):
        self.__test = 'test'

    @property
    def test(self):
          return self.__test


t = MyClass()
print(t.test)

# setterを使わずに編集
t._MyClass__test = 'test2'
print(t._MyClass__test)

# 普通に編集はできない
t.__test = 'test3'
print(t.test)
```
```
test
test2
test2
```
pep8にも「Generally, double leading underscores should be used only to avoid name conflicts with attributes in classes designed to be subclassed.」というように書かれており、変数をプライベートっぽくするためにダブルアンダースコアをつけるのは推奨されていないようです。プライベート変数にしたい場合には先頭にシングルアンダースコアをつけることでそれをプライベート変数であると示すのが正しいやり方だそうです。

```Python
class MyClass(object):

    def __init__(self):
        self._test = 'test'
        
    @property
    def test(self):
        return self._test
    
    @test.setter
    def test(self, value):
        self._test = value


t = MyClass()
print(t.test)

# setterを使って編集
t.test = 'test2'
print(t.test)
```
```
test
test2
```
実際にはsetterを使わずとも編集、操作できてしまう点は注意が必要です。

```Python
class MyClass(object):

    def __init__(self):
        self._test = 'test'
        
    @property
    def test(self):
        return self._test
    
    @test.setter
    def test(self, value):
        self._test = value


t = MyClass()
print(t.test)

# setterを使って編集
t.test = 'test2'
print(t.test)

# setterを使わずに編集
t._test = 'test3'
print(t._test)
```
AndroidアプリFirebase Analytics実装


新米エンジニアです。暖かく見守りください。（笑）
初めてAndroidアプリにFirebase Analytics実装したので間違ってる点もあるかもしれませんがご了承ください。
#AndroidにFirebase Analytics実装したよ！
Google Analyticsのサービスが終了して数カ月と少しが立ちました。
AndroidにFirebase Analyticsを導入したので簡単に導入方法・詰まった点（もしかしたら間違ってるかもしれない）をご紹介します。
導入方法は公式が出しているので、そちらを見た方が早いかもしれません。

公式：[https://firebase.google.com/docs/analytics/?hl=ja](https://firebase.google.com/docs/analytics/?hl=ja)

因みにもうそんな事知ってるよという方はすっ飛ばしてください！！

#そもそもFirebase Analyticsって何？
そもそも、FirebaseAnalyticsって何？って言う人も居るかもしれないので簡単に説明します。
※詳しく知りたい人は公式ドキュメントをご覧ください。

アプリを実際に公開し始まると、会社として又は個人としてはどういった人・どのページ、画面がどれくらいアクセスされているかを知りたい事があると思います。

そういう事を集計できるのがFirebase Analyticsなんですね。大本はGoogleが開発しています。
詳しく話すとエンゲージメントなどごにょごにょしたワードがあるんですがざっくりはういうものだと思っておいてください。
また、「無償」でアプリに組み込めるのでよく使用されているサービスだと思います。



#Androidに実装してみよう
こちらも公式ドキュメントが充実しているので簡単に説明
１、Firebase SDKをアプリに組み込みます。
２、Firebaseにアプリを登録します。
３、Firebase Analyticsに送信したいイベント・パラメーターを設定します

この三つだけです。
#####また、一つ注意点を上げるとしたらFirebase Analyticsにデータが反映されるのは大体1~2日程度と言われているのですぐにはデータが反映されません。

#Firebase Analytics困ったこと
Firebase Analyticsで困ったことが一つありました！
・カスタムパラメーターには予約語があるという事。

自分は下記のようなカスタムイベント・パラメーターを設定しました。

カスタムイベント名：message_detail
パラメーター名：message_id
パラメーター値：メッセージのID

メッセージ一覧からメッセージ詳細画面に行くとそのメッセージIDがパラメーターとして送信されるように実装しました。
デバッグビューで確認するとしっかり送信されています。
※デバッグビューとは開発の際に、Firebaseに送信される値を確認できる

ただ、数日後クライアント側が見る画面で見た際にはイベント名とパラメーター名はあるんですがパラメータ値は1つも送信されていないんですね。。。

おかしいなとドキュメントをあさっていると、既存で用意されているイベント名のパラメーター名にmessage_idがあるんですね。
どうやら、message_idというカスタムパラメーター名は既存で使用されているからカスタムパラメーター名として恐らく使用できないんですね。

試しに、message_idを1文字変更して数日後確認すると送信されているんですね。
結果message_idではないパラメーター名として設定することで解決しました。

#結果
・Firebase Analyticsには予約語が存在する！
なので、もしパラメーター名やイベント名が設定してもエラーが出ず、送信されているはずなのに確認できないなと思ったら予約語になっていないか確認することが大事です！！
Salesforce開発用のvscodeプラグインxysfdxはDataloaderサポート.

[exiahuang/xysfdx](https://github.com/exiahuang/xysfdx) はdataloaderサポートします。
[Install](https://marketplace.visualstudio.com/items?itemName=ExiaHuang.xysfdx)

## Dataloader

- support v40.0.0~v47.0.0
- Git/Ant/Java環境が必要
- パスワード 暗号化は便利
- Dataloaderのjarファイルのダウンロードが不要

![xysfdx-dataloader](https://raw.githubusercontent.com/exiahuang/xycode-doc/gh-pages/images/xysfdx-dataloader.gif)

やっと色々なバージョンを揃いました。v40.0.0~v47.0.0.

ちなみに、Dxのコマンドの`data:tree:export` と　`data:tree:import`も提供していますから、組織間でのデータのエクスポートとインポートは楽にします。
Docker Hub の Source API ってなんだろう？

微妙に昨日の話（[Docker Hub の Build triggers の使い方](https://qiita.com/ko1nksm/items/8f5a041fae4687e88b1f)）に関連した内容になります。Build triggersとは別件で、[shields.io](https://shields.io/)を使ってDockerイメージをAutomated Buildsを使っていることを示すバッジを表示しようと思ったのですが、[ここ](https://shields.io/category/build)を見ると「Docker Automated build」と「Docker Cloud Automated build」の2つがあって、さてどっちを使うべきなんだろう？と

先に結論を書くと後者の「Docker Cloud Automated build」バッジの方が新しく、最近ビルドしたものであればこちらを使います。2019年1月のInfoQの記事「[新しいDocker HubがDocker CloudとDocker Storeを統合](https://www.infoq.com/jp/news/2019/01/new-docker-hub/)」によると、Docker Hubエクスペリエンスリリース時に新しい「自動ビルドプロセス」が提供されており、以前のものは「[クラシック自動ビルド](https://beta-stage.docs.docker.com/docker-hub/builds/classic/)」と呼ばれているそうです。つまり古い「Docker Automated build」のバッジはクラシック自動ビルド用だと思います。

古い「Docker Automated build」のバッジを使用すると（新しい）Automated Buildsを使用していてもDocker API（`curl https://registry.hub.docker.com/v2/repositories/イメージ名`）のレスポンスは`is_automated`が`true`にはなりません。（参考 [Docker build shield show "manual" instead of "automated"?](https://github.com/badges/shields/issues/2533)）同様に`docker search`でも`AUTOMATED`は`OK`になりません。Docker APIはクラシック自動ビルドの情報を参照しているようです。

では新しい「Docker Cloud Automated build」のバッジはどの情報を参照しているのでしょうか？shields.ioの新しいAutomated Buildsへの対応の修正「[feat: [DockerCloud] and automated. ](https://github.com/badges/shields/pull/3139)」から `https://hub.docker.com/api/build/v1/source/?image=イメージ名` というURLを発見しました。Build triggersと同じAPIのようです。

そこで試しにクエリーパラメータをつけずにGETしてみた所、以下のエラーメッセージが返ってきました。

```sh
$ curl -sS https://hub.docker.com/api/build/v1/source/ | jq
{
  "error": "Source API list view needs an image to filter"
}
```

どうやらこのAPIは Source API と呼ばれているようです。

クエリーパラメータ`image`を指定した場合のレスポンスは以下のようになります。Automated Buildsの設定が取得できました。この内容はイメージ名さえ分かれば誰でも認証なしに取得できるので秘密情報ではありません。（`deploykey`が少し気になりますが、認証なしの場合は常に空になっているようです。）

```sh
$ curl -sS https://hub.docker.com/api/build/v1/source/?image=shellspec/openwrt | jq .
{
  "meta": {
    "limit": 25,
    "next": null,
    "offset": 0,
    "previous": null,
    "total_count": 1
  },
  "objects": [
    {
      "autotests": "SOURCE_AND_FORKS",
      "build_in_farm": true,
      "build_settings": [
        "/api/build/v1/setting/8c416bda-1599-430a-bf05-3cee4d58ed78/",
        "/api/build/v1/setting/e4128afa-03dc-44d7-8fa9-80ce78163874/"
      ],
      "channel": "Stable",
      "deploykey": "",
      "image": "shellspec/openwrt",
      "owner": "shellspec",
      "provider": "Github",
      "repo_links": false,
      "repository": "openwrt-docker",
      "resource_uri": "/api/build/v1/source/0312d9d5-8f97-4274-9594-2b3a80b0d3e3/",
      "state": "Success",
      "uuid": "0312d9d5-8f97-4274-9594-2b3a80b0d3e3"
    }
  ]
}
```

改めて、昨日作成した Build triggers のエンドポイントを見てみると以下のような形式でした。

```
https://hub.docker.com/api/build/v1/source/0312d9d5-(略)/trigger/a3(秘密)86/call/
```

つまり最初の`0312d9d5-`で始まる部分は（プロジェクトを示す）`uuid`で、秘密情報ではないことがわかります。2番目の(秘密)の部分がTrigger Tokenなのでしょう。

他に Source API にどんなものがあるか、GitHubで探してみましたが、Automated BuildsとBuild triggers以外の使用例は見つかりませんでした。Docker Hubでも正式にドキュメント化はされてないようです。（私が見つけられなかっただけかもしれませんが）
Prime Videoの更新通知を Power Automateでつくる

通勤や隙間時間はPrime Videoで今シーズンのアニメを見たりしているのですが、更新の曜日ってなかなか覚えられないですよね。そんなあなたにぴったりのFlowを紹介します。

# Power Automateのスケジュール実行+HTMLの解析
やることは単純です。とあるリストに登録しておいたビデオのURL一覧を、Power Automateで定期的にたたいて、得られたHTMLを解析してエピソード数を取得します。
エピソード数が増えていれば通知、増えていなければフロー終了です。

## どのURLを解析する？
特定のビデオを選択した画面のURLを使います。
下図を見ていただくと**エピソード(1)**という要素があります。この数字が動いたかどうかを取得するわけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/10d933bf-51e1-dfb1-bd34-8148340efe2e.png)


HTMLを見てみましょう。とても分かりやすく、 *エピソード<!---->(<!---->*　と書かれています。ありがたい。
Automate上では取得したHTMLを文字列のsplitでさばいていきますが、このような特徴的な文字列があると非常に簡単に望みの値を取り出せます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/e7249d84-ef34-a7e9-bbc7-b83ee3e5a710.png)

## どうやる？
Flowの一部、HTTPでGETして、数字をとるところを見てみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/9a605455-3caf-107f-8379-61bc81ab0357.png)

AutomateのHTTPアクションを利用して、ビデオのURLをGETします。得られた結果のBodyを、先ほどみた特徴的な文字列でsplitします。
その結果できる配列の[1]を、さらにエピソード数の後ろの文字列<!-- -->でsplitして[0]をとります。
ステップを表すと以下のような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/b7693939-0812-3a4b-bf00-7e8a0ac2784b.png)

これでエピソード数が取れました。あとはリストに入れておいた前回取得した際のエピソード数と比較してあげれば完成です。

# 完成版
リストはSharePointを利用しました。
列の設定は、簡単に
- Title : 既定のタイトル列 (アニメのタイトルを入れておく)
- Url : ハイパーリンク列 (GETするURLを入れておく)
- LastEpisode : 数値列(最後に取れたEpisode数を格納する)
このようにしておきます。アニメの登録は、タイトルを手で入力して、Urlをコピペして、最初だけ、LastEpisodeを手で入力しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/ee201539-d491-ecea-a386-929855e4a8cf.png)

Flow側は定期実行を含めて、以下のようになります。
出てくる数式は全部同じですので、メモ帳かなにかでコピペしてあげてください。
また、今回はTeamsに通知を飛ばしていますが、モバイルのPush通知にしてもいいと思います。
その際はビデオURLをリンクとしていれるとよいでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/71295f1d-6cad-a4b4-3e5a-9bd1b799f6fe.png)

# まとめ
Power Automateを利用した定期実行とHTMLの解析によって、標準で提供されていない新着お知らせを作ることができました。
Automateはこのように、ちょっとした生活のお役立ちにも使えますので、ぜひ試してみてください！

※ちゃんと通知されました↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/69e15888-0c8c-4119-b28d-a3e0b585edd8.png)

#追記 (2020/1/20)
どうやらビデオによっては、プライムで見れらるようになる前にエピソードの枠だけ追加されるようです。
そういうビデオに合わせるのであれば、int(split...の箇所(唯一数式を書いている部分)を以下で置き換えてください

```
int(sub(length(split(body('HTTP'),'プライムで見る</span>')),1))
```

これは、「プライムで見る」ボタンの数をカウントしたものです。ですので実際見られるビデオが通知されます。
※すでにLastEpisodeを登録している場合には手作業で更新をお願いします...
初心者による ES6 関数

#複数の戻り値を個別の変数に代入する
「関数から複数の値を返す」ためには、配列/オブジェクトとして値を一つにまとめる方法があります。
そのような場合には、

```javascript:sample.js
function getMaxMin(...nums) {
 //配列で返す
 return [Math.Max(...nums), Math.Min(...nums)]
}

//分割代入
let [Max, Min] = getMaxMin(1,2,3,4,5)
//Maxがいらない場合(最大値は切り捨てられる)
let [, Min]
```
#タグ付きテンプレート文字列
変数を埋め込む際に「<」「>」などの文字列を「&lt」「&gt」に置き換えたい(エスケープしたい)ときに、役立つのがタグ付きテンプレート文字列です。
タグ付きテンプレート文字列の実態は、単なる関数呼び出しでしかありません。

```
関数名`テンプレート文字列`
```
の形式で呼び出されます。タグ付きテンプレート文字列で利用するためには、関数は次のような条件を満たしておく必要があります。

```
1. 引数として「テンプレート文字列(分解したもの)」と「埋め込み変数(可変長引数)」を受け取る
2. 戻り値として加工済みの文字列を返すこと
```
たとえば、

```javascript:sample.js
//エスケープ処理
function escapeHTML(str) {
 if(!str) {return ''}
 str = str.replace(/&/g, '&amp')
 str = str.replace(/</g, '&lt')
 str = str.replace(/>/g, '&gt')
 str = str.replace(/"/g, '&quot')
 str = str.replace(/'/g, '&#39')
 return str
}

//タグ付きテンプレート文字列
function e(templates, ...values) {
 let result = ''
 for(let i = 0, len = templates.length; i < len; i++) {
  result += templates[i] + escapHTML(values[i])
 }
 return result
}

let name = '<"Satou" & \'Saitou\'>'
console.log(e`こんにちは、${name}達！`)
```

#クロージャ
クロージャとは、「ローカル変数を参照している関数ない関数」のことである。

たとえば、

```javascript:sample.js
function closure(init) {
 let counter = init

 return function() {
  return ++counter
 }

let myClosure = closure(1)
conosle.log(myCLosure()) //2
conosle.log(myCLosure()) //3
conosle.log(myCLosure()) //4
}
```

一見するとclosure関数は「初期値としてinitを受け取り、それをインクリメントした結果を返している」よに見えます。しかしよく見ると、戻り値は数値ではなく「関数」になっていることがわかります。
この匿名関数を返しているということによって、closure関数の終了後もローカル変数counterは保持されるため「一種の記憶域を提供するしくみ」と考えることができる。

よってこのようなことも可能である。

```javascript:sample.js
function closure(init) {
 let counter = init

 return function() {
  return ++counter
 }

let myClosure1 = closure(1)
let myClosure2 = closure(100)

conosle.log(myCLosure1()) //2
conosle.log(myCLosure2()) //101
conosle.log(myCLosure1()) //3
conosle.log(myCLosure2()) //102
}
```

closure関数の同じcounter変数を参照しているのにも関わらず、異なる変数を参照しているかのようにふるまうのである。ここではスコープチェーンという考え方が用いられており、javascriptでは、このスコープチェーンの先頭つまり最内側の関数に位置するオブジェクトから順にプロパティを参照するため、もともとが同じ変数であっても違う値を個々に保持している現象があってもおかしくないのである。

#参考資料
山田祥寛様　「javascript本格入門」