OmniAICreator/Qiita-1.07M huggingface dataset:
#Rails remove auto generated name fk_rails_... foreign key migration

it is the wrong way?

```rb
class RemoveUniqueIndexFromSomeTable < ActiveRecord::Migration[5.2]
  def change
    remove_foreign_key :some_tables, name: "fk_rails_43240587ab"
  end
end
```

```rb
db:migrate

== 20200112003437 RemoveUniqueIndexFromSomeTable: migrating ===============
-- remove_foreign_key(:some_tables, {:name=>"fk_rails_43240587ab"})
   -> 0.0250s
...
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2938








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
DockerのコマンドをVagrantのコマンドと並べて理解する

#はじめに
今までVagrantを使っていてこれからDockerを学びたい人（自分を含む）向けにVagrantとDockerのコマンドを機能別に対応関係をまとめました。
厳密に言うと異なりますが、概要の理解に繋がれば幸いです。
まだDockerの勉強中の身なので、アドバイス等あればコメントでお待ちしています。

##Vagrantとは
仮想環境を管理するためのソフトウェア

###参考
- [公式サイト](https://www.vagrantup.com)
- [公式リファレンス](https://www.vagrantup.com/docs/index.html)

##Dockerとは
コンテナ型の仮想環境を管理するソフトウェア

###参考
- [公式サイト](https://www.docker.com)
- [公式リファレンス](https://docs.docker.com/)
- [Docker入門（第一回）～Dockerとは何か、何が良いのか～](https://knowledge.sakura.ad.jp/13265)
- [https://qiita.com/shiro01/items/04ca672a93384b463701](https://qiita.com/shiro01/items/04ca672a93384b463701)

##概念の対応関係
||Vagrant|Docker|
|:--|:--|:--|
|ホストOS|Linux,Windows,mac OS etc.|Linux|
|扱う仮想化技術|ホストOS型|コンテナ型|
|仮想環境ベース|パッケージ|イメージ|
|仮想環境|Virtual Machine(VM)|コンテナ|
|設定ファイル|Vagrantfile|dockerfile|

#コマンドの対応関係

ここではオプションは割愛します。
[Docker v1.13以降でコマンド体系が変わった](https://qiita.com/zembutsu/items/6e1ad18f0d548ce6c266)ようなので可能な限り新旧どちらのコマンドも記載します。旧コマンドは「何を」操作しているか見えなかったのが、新コマンドは「何を」の部分が必要になったためVagrantの対応関係も比較的わかりやすいです。

##仮想環境ベースの操作

|操作|Vagrant|Docker|
|:--|:--|:--|
|追加|vagrant box add|(新)docker image pull<br>(旧)docker pull|
|一覧|vagrant box list|(新)docker image ls<br>(旧)docker images|
|作成|vagrant package|(新)docker image build<br>(旧)docker build|
|削除|vagrant box remove |(新)docker image rm<br>(旧)docker rmi

##仮想環境の操作

|操作|Vagrant|Docker|
|:--|:--|:--|
|初期化|vagrant init|-|
|起動|vagrant up|(新)docker container start<br>(旧)docker start|
|一覧|vagrant global-status|(新)docker container ls<br>(旧)docker ps|
|終了|vagrant halt|(新)docker container stop<br>(旧)docker stop|
|削除|vagrant destroy|(新)docker container rm<br>(旧)docker rm|
|ssh接続|vagrant ssh|(新)docker container exec -it {コンテナID} bash<br>(旧)docker exec -it {コンテナID} bash|

###参考
- [【まとめ】Vagrant コマンド一覧](https://qiita.com/oreo3@github/items/4054a4120ccc249676d9)
- [docker container / image コマンド新旧比較](https://qiita.com/zembutsu/items/6e1ad18f0d548ce6c266)

#まとめ

- Vagrantのpackage = Dockerのimage
- VagrantのVM = Dockerのコンテナ
- Dockerの新コマンドと一緒に覚えると分かりやすい
4歳娘「パパ、実行時エラーの出ないフロントエンド言語ってなーんだ？」

## とある休日の朝
娘（**4歳**）「パパ、最近はお仕事でどんなWebサイトを作ってるの？」

ワイ「ん？詳しくは言えへんけど、**技術記事投稿サイト**や」

娘「**Qiitaのパクリ**みたいなやつ？」

ワイ「ハッキリ言うなや」

## 娘ちゃんはなぞなぞがしたい
娘「それよりパパ、なぞなぞしよ」

ワイ「ええで」

娘「じゃあ行くよー」
**娘「実行時エラーの出ないフロントエンド言語ってなーんだ？」**

ワイ「いや**どんななぞなぞやねん**」
ワイ「っていうか、どんな言語でも実行時エラーは出るやろ」
ワイ「例えばさっきの技術投稿サイトで」
ワイ「最新記事を1件表示しようとした場合...」

```js
const newestArticle = articles[0];
```

ワイ「↑こんな感じで最新の1件を取得して」

```html
<div>
    <h2>最新記事</h2>
    <span>{ newestArticle.title }</span>
</div>
```

ワイ「↑こんな感じで画面に表示しようとするやろ？」
ワイ「でも、まだ記事が**1件もなかった場合**には...」

> TypeError: Cannot read property 'title' of undefined
> （`undefined`から`title`を読み取れません）

ワイ「↑こんな実行時エラーが発生してしまうんや」
ワイ「0番目の記事が`undefined`になってしまうからな」

ワイ「せやから」

> **0番目の記事が存在する場合だけ、**それを表示する

ワイ「みたいな」
ワイ「条件式を書くように**気をつけなあかん**のや」

ワイ「実行時エラーが出ないように**気をつけて**コーディングする」
ワイ「そして、実際にエラーが出てないかどうか」
ワイ「**しっかり**ブラウザ上で確認するんや」
ワイ「それがプログラミングや」

ワイ「つまり、さっきのなぞなぞの答えは...」
ワイ**『実行時エラーの出ない言語などない！』**
ワイ「これが答えや」

娘「ブッブー」
**娘「答えは Elm です」**

ワイ「いや、そんなわけないやろ...」

## 娘ちゃんのライブコーディング開始

娘「Elmの場合、0番目の記事を取得するには」

```elm
newestArticle =
    Array.get 0 articles
```

娘「↑こう書くんだけど」

```elm
div []
    [ h2 [] [ text "最新記事" ]
    , span [] [ text newestArticle.title ]
    ]
```

娘「それを↑こんな感じで画面に表示しようとすると...」
娘「そもそも**コンパイルが**通りません！」

> **Type Mismatch**
> This `newestArticle` value is a: **Maybe Article**

娘「↑こんな**コンパイルエラー**が出ます」
娘「つまり...」

> **型の不一致**
> `newestArticle`の値は**Maybe Article**です

娘「↑こう言う意味だね」

ワイ「何や**Maybe Article**って」
ワイ「何で**多分記事**やねん」

娘「だって、パパもさっき言ってたけど」
娘「記事は**必ず存在するとは限らない**でしょ？」
娘「サービス開始当初は0件かもしれないじゃん？」
娘「Elmでは、0番目の記事が**存在しなかった場合のことも想定していないと**」
娘「そもそもコンパイルが通らないの」

娘「つまり、**存在するかしないか分からない**ような値を」
娘「そのまま画面に表示させようとしても駄目なの」

ワイ「ほな、どうすえりゃええの...」

娘「**case式**を使って、記事が存在しなかったケースのコードも書いてあげると」
娘「ちゃんとコンパイルが通るの」

```elm
case newestArticle of
    Just article ->
        div []
            [ h2 [] [ text "最新記事" ]
            , span [] [ text article.title ]
            ]

    Nothing ->
        text ""
```

娘「↑こんな感じだね」
娘「`newestArticle`、つまり最新の記事が`Nothing`だった場合は」
娘「**空文字**を表示、つまり何も表示しないってことだね」

ワイ「おお、ちゃんと**全て想定して**コードを書かないと」
ワイ「そもそも先へ進めへんのか」

娘「そう」
娘「記事の情報ってAPIとかから取得してくるから、」
娘「実際にシステムが動いてみないと、何件あるかなんて分からないでしょ？」
娘「コードを書いてる段階では何件なのか分からない」
娘「0番目の記事は存在するかもしれないし、存在しないかもしれない」
娘「そんなシュレーディンガーの猫ちゃんみたいな不確定な値も」
娘「Elmが事前に検査してくれるから」
娘「プログラマーは忘れずに想定・対応できて」
娘「結果的に実行時エラーを見ることはまず無いの」

ワイ「ドジっ子なワイにはピッタリかもな」

娘「そうだね」
娘「**気をつけて**コーディングして、**気をつけて**ブラウザテストするより」
娘「想定できるようなエラーは**コンパイラにブロックしてもらう**方いいじゃん？」

ワイ「さすが娘ちゃん、相変わらず才気走ってんな...」
ワイ「ハスケル子ちゃんもElm良いって言うてたし」
ワイ「ワイも勉強してみよかな...」

## そんなこんなでお昼ごはん
ワイ「はぁ...実行時エラーが出ない言語なんてあったんやな...」
ワイ「今までブラウザでぽちぽちテストして」
ワイ「`undefined`エラーが出て、そんなことばっかり繰り返しとったわ...」
ワイ「しかもワイ、ミスが多い方やし...」
ワイ「もっと早くコンパイル言語を勉強しておけばよかったわ...」
ワイ「はぁ...ワイの人生、後悔ばっかりや...」

娘「パパ、後悔したっていいんだよ」

ワイ「え...」

娘「後悔して後悔して、なりたい自分が見えてくるんだよ」
娘「転んで転んで、やっと自分に合った歩き方が分かるんだよ」
娘「またやっちゃった...今度こそは...っていう」
娘「その痛みを忘れない事こそが、明日のパパを変えて行くんだよ」

ワイ「娘ちゃん...！！！」
ワイ「人生何周目やねん...！！！」

娘「...パパの記事って、いつも最後このパターンだよね...」

ワイ「まぁな...」

**〜おしまい〜**

## Elmが気になった人はこちら
[**Elm について (はじめに)**](https://guide.elm-lang.jp/)

## さらに続編
[**テストしやすい「純粋」な関数とは？**](https://qiita.com/Yametaro/items/3ec5a7d89afa1a0e9f15)
基本情報13週目(01/13週)

# 目標と結果
### 目標
- 参考書をみる。
- [基本情報技術者試験ドットコム](https://www.fe-siken.com/)を使う。
- 午後で通用する様に内容を理解する。
    - アルゴリズムとプログラミングの勉強をする。
    - 午後問題で重視する分野を見つける。
- 大学の諸々を片付ける。

### 結果
- 卒論は順調です。
    - 22日には終わらせることができると思います！

# 振り返り
### Keep
- 道場で忘れないように復習する。

### Problem
- なし

### Try
- 卒論優先。
センサーいろいろ


![IMGP0050.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/55f0e138-aa0c-a842-9fea-29e35dc7dec7.jpeg)

2日分を60分平均で表示しています。

# 気温

![スクリーンショット 2020-01-13 10.24.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/74a1f0aa-20f8-8e64-1f65-4ca75604f521.png)
![スクリーンショット 2020-01-13 10.24.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/99ae2540-baad-1d92-f6e9-9793612a44cd.png)
![スクリーンショット 2020-01-13 10.23.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/63dd2fec-a73c-7c3c-5d94-0e0d2ba00aaf.png)

2020/4追記

3ヶ月くらいたったらSi7021がちょっときざぎざが目立つようになりました。

![スクリーンショット 2020-04-08 17.56.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/3465e7c0-9683-d868-f6ee-78d52da5e351.png)
![スクリーンショット 2020-04-08 17.56.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/e9c454a5-b78d-5e84-12b1-cadf9ff5dd23.png)


# 気圧

![スクリーンショット 2020-01-13 10.23.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/ab0aabbf-c5d7-f89e-f71a-81829bc0b193.png)
![スクリーンショット 2020-01-13 10.24.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/8cf8de43-3a7b-7a32-9b85-60eea636585e.png)

# 湿度

![スクリーンショット 2020-01-13 10.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/db171828-a439-781a-7991-7887a786d00e.png)
![スクリーンショット 2020-01-13 10.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/ff4e5e80-f64c-02c5-1b57-6b427f758b4f.png)

MPL115A2
https://qiita.com/yamori813/items/a4d1ba76033016c4ed7d

BMP180
https://qiita.com/yamori813/items/c2cb30fb48b216ab89e9

Si7021
https://qiita.com/yamori813/items/2fd2d5f7dd90f470322c

SHT30
https://qiita.com/yamori813/items/bf64403cb8c2b4b6c472
時代は、Windows10Proの仮想マシン

今まで、クラウドの仮想マシンで Windowsのリモートデスクトップを使う場合は、Windowsサーバーをデブロイしていたと思います。

でも、時代が進化して、Windows10ProをAzureで使えるようになりました。
マルチタスク、マルチユーザーです。
そのため、リージョンを東日本で設定すると、料金が目が点になってしまいました。
https://twitter.com/masaru21/status/1216163751688167426

でも、リージョンをアメリカに設定したら、少し安くなりました。
https://twitter.com/masaru21/status/1216517685615349760

Office365のbusiness以上の料金プランを使っている人は、Microsoft virtualdesktopをライセンス料金無料で、仮想マシンとストレージ料金だけで利用できるとアナウンスがあります。

そのため、仮想マシンで2台以上Windows10Proを使う場合は、Microsoft virtual desktopを構築した方が良いかもしれません。

![スクリーンショット 2020-01-13 9.50.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/bb9f67b4-67f2-54a3-86cf-fc8902e850f9.png)
デブロイ後ログインして、初期設定の英語の画面の後の表示です。

とりあえず、先に日本語化を試みました。
![スクリーンショット 2020-01-13 9.56.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/6b370b5d-df4f-c665-45ae-7637eb3c609b.png)

設定画面のlanguageの項目から、言語を追加を選択すると、この画面が表示されます。
![スクリーンショット 2020-01-13 9.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/0906ee32-a31f-a37b-2c21-d3e1e3100ed4.png)
日本語を選択します。

#Chromeのインストール
次にChromeのインストールですが、WindowsサーバーでChromeのインストールは、コマンドを使うなど面倒でした。

でも、Windows10Proでは、そのままネット検索してChromeのページにアクセスして、ダウンロードを選択することで、簡単にインストールできました。

**この経験をしたので、もうWindowsサーバーでリモートデスクトップの環境を作らなくても良いと痛感しました。**

自分一人で、リモートデスクトップを作らないといけない場合は、もうWindows10Prowを選択肢に加えても良いと思います。
**あとは、コストを慎重に考えると良いです。**

私は、仮想マシンを使わない時は、仮想マシンを停止しています。

今回は、クライアントの作業のために、仮想マシンを専用に作った方が、日常使っているパソコンの環境と混ざることがなく、機密漏洩などのリスクや自分の使いやすさのことを考えて、仮想マシンを作りたいと思いました。
そして、どうせつくるなら実験でWindows10proで作ってみようと思い、取り組みました。
エラー Vue/Vuetify - Unknown custom element: <v-app> - did you register the component correctly?

NG

```
new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

Vue.use(Vuetify);
```

OK
new Vue()の前にVue.use(Vuetify)しないとダメらしい

```
Vue.use(Vuetify);

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});
```

pluginsフォルダを読み込む場合
こんな感じで冗長になる
main.js

```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import VueSession from 'vue-session'

import vuetify from './plugins/vuetify'
// import Vuetify from "vuetify/lib"
Vue.use(Vuetify)
Vue.use(VueSession)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

```
AWS プレフィックス「mi-」が付いたマシン

> AWS Management Console で、プレフィックス「mi-」が付いたマシンは、オンプレミスサーバーまたは仮想マシン (VM) マネージドインスタンスです。
https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/managed_instances.html
[iOS/Swift] アプリ開発の実務的アプローチで学ぶデザインパターン

# 前書き

GoFの[デザインパターン](https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2))が世に登場した『オブジェクト指向における再利用のためのデザインパターン』は1995年の発行だそうで、もはや古典の域ですね。

Swiftなどのモダンな言語では「もう使わないパターン」とか「もっとシンプルに解決できるパターン」などもあり、具体的な解決方法として崇め奉るモノではないかなと思います。

しかし、GoFのデザインパターンを、「解決方法」ではなくて、開発で良く陥る「状況」と解決に至る「発想」、そしてそれに対する「名前付け」に着目すると、改めて研究してみる価値はあると考えます。

この記事シリーズは、iOS/Swiftエンジニアである執筆者個人が、
**ごく普通のiOSアプリ開発でよくある状況**や
**Swiftのコアライブラリやフレームワークで使われているパターン**に
着目してデザインパターンを学び直してみた記録です。

# 記事の一覧

| 生成に関するパターン | 概要 |
|:--|:--|
| [Factory Method](https://qiita.com/y-some/items/308966bdea99ceb27db9) | 実際に生成されるインスタンスに依存しない、インスタンスの生成方法を提供する。 |
| [Abstract Factory](https://qiita.com/y-some/items/7e48349c5fdc53fdf48c) | 関連する一連のインスタンスを状況に応じて、適切に生成する方法を提供する。 |
| [Builder](https://qiita.com/y-some/items/1113ac159cd41a6f31bf) | 複合化されたインスタンスの生成過程を隠蔽する。 |
| [Singleton](https://qiita.com/y-some/items/851e53d549d88ef92ff2) | あるクラスについて、インスタンスが単一であることを保証する。 |
| [Prototype](https://qiita.com/y-some/items/43598a43ac46ea415fda) | 同様のインスタンスを生成するために、原型のインスタンスを複製する。 |

| 構造に関するパターン | 概要 |
|:--|:--|
| [Adapter](https://qiita.com/y-some/items/467c4116433d7e41b1b1) | 元々関連性のない2つのクラスを接続するクラスを作る。 |
| [Facade](https://qiita.com/y-some/items/fc6c9fdf31447164274f) | 複数のサブシステムの窓口となる共通のインタフェースを提供する。 |
| [Bridge](https://qiita.com/y-some/items/756ce07ac1d2490f6325) | クラスなどの実装と、呼出し側の間の橋渡しをするクラスを用意し、実装を隠蔽する。 |
| [Composite](https://qiita.com/y-some/items/43ca08e421f80954e916) | 再帰的な構造を表現する。 |
| [Decorator](https://qiita.com/y-some/items/26982471917e4a17aa1e) | あるインスタンスに対し、動的に付加機能を追加する。 |
| [Flyweight](https://qiita.com/y-some/items/6d00928a22b188ef64a3) | 多数のインスタンスを共有し、インスタンスの構築のための負荷を減らす。 |
| [Proxy](https://qiita.com/y-some/items/d86dd7460c2a0489dc14) | 共通のインタフェースを持つインスタンスを内包し、利用者からのアクセスを代理する。 |

| 振る舞いに関するパターン | 概要 |
|:--|:--|
| [Chain of Responsibility](https://qiita.com/y-some/items/91e97462421c87499a2e) | イベントの送受信を行う複数のオブジェクトを鎖状につなぎ、それらの間をイベントが渡されてゆくようにする。 |
| [Command](https://qiita.com/y-some/items/7be296e8af268e5cae35) | 複数の異なる操作について、それぞれに対応するオブジェクトを用意し、オブジェクトを切り替えることで、操作の切替えを実現する。 |
| [Mediator](https://qiita.com/y-some/items/c63746780cc56714ff11) | オブジェクト間の相互作用を仲介するオブジェクトを定義し、オブジェクト間の結合度を低くする。 |
| [Observer](https://qiita.com/y-some/items/f0dc21619111697cb5bc) | インスタンスの変化を他のインスタンスから監視できるようにする。 |
| [State](https://qiita.com/y-some/items/06875233c55c070f3b99) | オブジェクトの状態を変化させることで、処理内容を変えられるようにする。 |
| [Strategy](https://qiita.com/y-some/items/06875233c55c070f3b99) | データ構造に対して適用する一連のアルゴリズムをカプセル化し、アルゴリズムの切替えを容易にする。 |
| 【以下は割愛】 | |
| Interpreter | 普通のiOSアプリ開発では利用ケースが限定的なので割愛 |
| Iterator | Swiftでは言語機能でサポートされているので割愛 |
| Template Method | Swiftではprotocolとして言語仕様に組み込まれているため割愛 |
| Memento | 普通のiOSアプリ開発では利用ケースが限定的なので割愛 |
| Visitor | 難解すぎて普通のiOSエンジニアが使っても幸せになれないような気がするので割愛（笑 |

※概要は[Wikipedia](
https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2))より引用
Lambdaを使用し、最新 AMI の ID を取得する関数を作成

1.最新 AMI の ID を取得する関数をLambdaで作成
2.カスタムリソースを作成

> カスタムリソースは関連付けられた Lambda 関数を起動します。関数をカスタムリソースと関連付けるには、Fn::GetAtt 組み込み関数を使用して、ServiceToken プロパティ用に関数の Amazon リソースネーム (ARN) を指定します。AWS CloudFormation は、カスタムリソースの宣言に含まれている追加のプロパティ (Region や Architectureなど) を入力として Lambda 関数に送信します。Lambda 関数は、これらの入力プロパティの正しい名前と値を判断します。

3.リージョンとインスタンスタイプの組み合わせを指定することで最新AMIを起動

参考
https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/walkthrough-custom-resources-lambda-lookup-amiids.html
> Amazon Elastic Compute Cloud (Amazon EC2) インスタンスを宣言する AWS CloudFormation テンプレートでは、インスタンスの起動に使用される、オペレーティングシステムまたはその他のソフトウェアと構成情報が含まれた Amazon マシンイメージ (AMI) の ID も指定する必要があります。適切な AMI ID は、スタックを起動するインスタンスタイプおよびリージョンによって異なる場合があります。ID は定期的に変更される可能性があります (AMI が更新されてソフトウェアアップデートが追加されたときなど)。

> 通常は、特定のインスタンスタイプとリージョンに AMI ID をマップできます。ID を更新するには、各テンプレートで手動で更新します。カスタムリソースと AWS Lambda (Lambda) を使用すると、使用するリージョンとインスタンスタイプの最新 AMI の ID を取得する関数を作成でき、マッピングを維持する必要がなくなります。
[iOS/Swift] アプリ開発の実務的アプローチで学ぶデザインパターン ～Factory Method～

この記事シリーズは、iOS/Swiftエンジニアである執筆者個人が、
**ごく普通のiOSアプリ開発でよくある状況**や
**Swiftのコアライブラリやフレームワークで使われているパターン**に
着目してデザインパターンを学び直してみた記録です。

**関連記事一覧**
[[iOS/Swift] アプリ開発の実務的アプローチで学ぶデザインパターン](https://qiita.com/y-some/items/96db5f24ded4a1fab48f)

# Factory Methodパターン概要

- **生成するインスタンスを条件に応じて柔軟に切り替える**ためのパターンです。
- Javaなどの場合は抽象クラスで振る舞いとインスタンス生成の雛形を定義し、サブクラスでそれらをオーバーライドします。（参照：[Wikipedia](https://ja.wikipedia.org/wiki/Factory_Method_%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3)）
- Swiftの場合は抽象クラスという概念がありませんし、enumの表現力が強力なので、enumをうまく使うと良さそうです。
- GoFのデザインパターンでは**生成に関するパターン**に分類されます。

# 使い所

アプリ開発の実務で適用できるケースはたくさんあると思いますが、例えば

- 料金体系の違う「通常会員」と「優待会員」のオブジェクト生成を切り替える、とか
- テスト用targetの場合はモックオブジェクトを生成する、とか


# サンプルコード

Swiftバージョンは 5.1 です。

```swift
protocol CurrencyDescribing {
    var symbol: String { get }
    var code: String { get }
}

final class Euro: CurrencyDescribing {
    var symbol: String {
        return "€"
    }
    
    var code: String {
        return "EUR"
    }
}

final class UnitedStatesDolar: CurrencyDescribing {
    var symbol: String {
        return "$"
    }
    
    var code: String {
        return "USD"
    }
}

enum Country {
    case unitedStates
    case spain
    case uk
    case greece
}

enum CurrencyFactory {
    static func currency(for country: Country) -> CurrencyDescribing? {
        switch country {
            case .spain, .greece:
                return Euro()
            case .unitedStates:
                return UnitedStatesDolar()
            default:
                return nil
        }
    }
}

// Usage
print(CurrencyFactory.currency(for: .greece)?.symbol ?? "")   // "€"
print(CurrencyFactory.currency(for: .spain)?.symbol ?? "")    // "€"
print(CurrencyFactory.currency(for: .unitedStates)?.symbol ?? "") // "$"
```

引用：
https://github.com/ochococo/Design-Patterns-In-Swift#-factory-method
[iOS/Swift] アプリ開発の実務的アプローチで学ぶデザインパターン ～Abstract Factory～

この記事シリーズは、iOS/Swiftエンジニアである執筆者個人が、
**ごく普通のiOSアプリ開発でよくある状況**や
**Swiftのコアライブラリやフレームワークで使われているパターン**に
着目してデザインパターンを学び直してみた記録です。

**関連記事一覧**
[[iOS/Swift] アプリ開発の実務的アプローチで学ぶデザインパターン](https://qiita.com/y-some/items/96db5f24ded4a1fab48f)

# Abstract Factoryパターン概要

- **オブジェクトの生成を抽象化**することにより、**関連/依存する複数のオブジェクト生成を一括して提供**するためのパターンです。
- Factory Methodと類似していますが、主な相違点は上記の太字部分です。
- オブジェクト生成の責務を担う側を「抽象的な工場」に見立てて、Abstract Factoryと呼びます。
- 利用側は「工場」に対して生成条件を提示するわけですが、Swiftの場合はenumを上手く使うと良さそうです。
- GoFのデザインパターンでは**生成に関するパターン**に分類されます。

# 使い所

- テスト時はDBの処理をモック化するとか
- （iOSアプリではあまりないと思いますが）マルチデータベース対応　とか

# サンプルコード

Swiftバージョンは 5.1 です。

```swift
// Protocols
protocol DatabaseConnection {
    var connection: String { get }
}

protocol DatabaseAccessible {
    func select()
    func insert()
    func delete()
    func update()
}

protocol DatabaseProvider {
    func makeConnection() -> DatabaseConnection
    func makeAccessor() -> DatabaseAccessible
}

// Class
final class MockConnection: DatabaseConnection {
    let connection = "MockConnection"
}

final class MockAccessor: DatabaseAccessible {
    func select() { print("ダミーを返す") }
    func insert() { print("何もしない") }
    func delete() { print("何もしない") }
    func update() { print("何もしない") }
}

final class ProductionConnection: DatabaseConnection {
    let connection = "ProductionConnection"
}

final class ProductionAccessor: DatabaseAccessible {
    func select() { print("実際に読み込む") }
    func insert() { print("実際に追加する") }
    func delete() { print("実際に削除する") }
    func update() { print("実際に更新する") }
}

// Abstract factory
enum DatabaseFactoryType: DatabaseProvider {
    case mock
    case production

    func makeConnection() -> DatabaseConnection {
        switch self {
        case .mock:
            return MockConnection()
        case .production:
            return ProductionConnection()
        }
    }

    func makeAccessor() -> DatabaseAccessible {
        switch self {
        case .mock:
            return MockAccessor()
        case .production:
            return ProductionAccessor()
        }
    }
}

// Usage
let mockFactory = DatabaseFactoryType.mock
let mockConnection = mockFactory.makeConnection()
print(mockConnection.connection)   // "MockConnection"
let mockAccessor = mockFactory.makeAccessor()
mockAccessor.select()  // "ダミーを返す"

let productionFactory = DatabaseFactoryType.production
let productionConnection = productionFactory.makeConnection()
print(productionConnection.connection)   // "ProductionConnection"
let productionAccessor = productionFactory.makeAccessor()
productionAccessor.select()  // "実際に読み込む"
```
AWS Trusted Advisor 

### 結構いろんなことができる
https://dev.classmethod.jp/cloud/aws/cm-advent-calendar-2015-getting-started-again-aws-td/#service-detail1
#### 一例
- 関連付けられていない Elastic IP Address
- EC2 リザーブドインスタンスの最適化
- 使用率の低いAmazon EC2 Instances
- 利用頻度の低いAmazon EBSボリューム
- アイドル状態の Load Balancer


### Trusted Advisor チェック結果を Amazon CloudWatch Events でモニタリングする
https://docs.aws.amazon.com/ja_jp/awssupport/latest/user/cloudwatch-events-ta.html
> CloudWatch イベント を使用する際には、Trusted Advisor ワークフローの一部として次のターゲットタイプを選択できます。
> 
> - AWS Lambda 関数
> - Amazon Kinesis ストリーム
> - Amazon Simple Queue Service キュー
> - 組み込みターゲット (CloudWatch アラームアクション)
> - Amazon Simple Notification Service のトピック
> 
次にユースケースをいくつか示します。
> 
> - Lambda 関数を使用して、チェックステータスが変更されたときに Slack チャネルに通知を渡します。
> - チェックに関するデータを Kinesis ストリームにプッシュして、包括的でリアルタイムのステータスモニタリングを支援します。
Firefoxで中クリックスクロール有効化

Linuxだとデフォルトで使えないので備忘録

URL欄に
about:config
と入力する。

general.autoScroll
と検索し、ダブルクリックしてTrueにする。

参考先
https://bbs.archlinux.org/viewtopic.php?id=37565
slackで過去に投稿したメッセージをリマインダーに設定する

既に知っているかもしれないが、備忘の為書き記しておく。

slackにはリマインダー機能があり、時間、ユーザー、内容を指定するとリマインドしてくれる。

過去にチャンネルに投稿したメッセージそのものも、メッセージ右にある その他＞後でリマインドする でリマインドが行える。

![スクリーンショット (42).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325786/4321853d-2ea0-100e-a439-aa858a7b2f7f.png)


しかし、この形式でリマインドできるのは自分のみかつ表示されている時間のみ(20分、1時間後、明日、など)で、任意のユーザーおよび時間を指定しては行えない。

![スクリーンショット (41).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325786/40eaead4-763d-f1bc-8060-6fe2751951c7.png)


ここで、過去に投稿したメッセージを任意のユーザー、時間を指定してリマインドする方法を示す。

# 手順

## リマインドしたいメッセージのURLを取得する

まずはリマインドしたいメッセージのリンクを取得する

メッセージ横の その他＞リンクをコピー と入力すると、そのメッセージのリンクがコピーされる。

![スクリーンショット (43).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325786/14850deb-d307-2e19-257a-f4fa3df0ab7b.png)


## メッセージのリンクをカスタムリマインドに設定する

slackでカスタムリマインダーを設定し、リマインダーの内容に上記で取得したメッセージのリンクを設定すると、リマインド時にそのメッセージが表示される。

slackのカスタムリマインダーの記法は以下の通り。

```/remind [ユーザー/チャンネル] [取得したメッセージのリンク] [時間]```

[slack公式ページ](https://slack.com/intl/ja-jp/help/articles/208423427)にもカスタムリマインダーの記法の説明があるのでこちらも参照。


# 実行例

以下に、10秒後にあるメッセージを自分にリマインドするときの例を示す。

## 1. 10秒後に自分にメッセージをリマインドするカスタムリマインダーを設定する

メッセージのリンクを取得し、下図のようにカスタムリマインダーを設定する
（※メッセージのリンクは伏せています）

![スクリーンショット (44).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325786/426328c1-c029-33c1-cc85-2700e353db3e.png)


## 2. リマインダーが設定される

![スクリーンショット (45).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325786/1bee92d0-90af-73ff-f7b0-1d7bac5c1596.png)


## 3. 10秒後にリマインダーが送信される

画像はWindowsでの例。

![スクリーンショット (46).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325786/8fc2093a-15a3-df1b-1f69-92baaf2d5447.png)

## 4. Slackbotから指定したメッセージがリマインドされている

![スクリーンショット (47).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325786/7cbcc33b-379f-bde4-8732-c3da6eabc976.png)

-------------------

今後活用していきたい。
ローカルネットワーク内で開発中のGatsbyのスマフォなどで動作確認する方法

## はじめに
実際のスマフォなどで開発中のGatsbyのサイトを確認する方法を提示する

### 前提条件
gatsby: 2.19.2

macで動作確認しているため開発マシンのIPアドレスの取得は各OSごとに違う場合がある

## 開発マシンのIPアドレス取得

ifconfigコマンドでipアドレス取得

```
> ifconfig
.
..
...
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=400<CHANNEL_IO>
	ether xx:xx:xx:xx:xx:xx
	inet6 fe80::18e8:b8eb:c36b:8185%en0 prefixlen 64 secured scopeid 0x6
	inet 192.168.1.xxx netmask 0xffffff00 broadcast 192.168.1.255
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: active
...
..
.
```

上記のがLAN内のIPアドレスが192.168.1.xxxだとわかる

## Gatsbyの開発モードに-Hオプションを付ける

ホスト指定のオプションで0.0.0.0をつけてあげる

| -H, --host | Set host. Defaults to localhost |
|:--|:--|
ref: https://www.gatsbyjs.org/docs/gatsby-cli/

```
> gatsby develop -H 0.0.0.0
```

## Gatsbyの開発モードが動いている端末にスマフォからアクセス

これでlocalhost:8000で起動していることを確認したら、LAN内のWifiにつながっているスマフォのブラウザで
先程取得したIPアドレスを元に、デフォルト8000ポートで動いているGatsbyの開発モードが動いている端末にアクセスすることができる

```
http://192.168.1.xxx:8000
```
Ubuntu18.04かつ病弱CPUでのTensorFlowの使い方

# はじめに
この記事の対象者は、病弱CPUでPython3.7を使っていてTensorFlowを使いたいのにエラーが出て対処に困っている方です。他の場合でもすぐにもとに戻せる操作なので一応試してみてください。

# 上手く行った手順
- PythonをPython3.6へダウングレード  

   ```
   sudo apt remove python3.7
   sudo apt install python3.6
   ```
- TensorFlowをTensorFlow1.5へダウングレード

   ```
   python3.6 -m pip uninstall tensorflow  
   python3.6 -m pip install tensorflow==1.5 --user  
   ```

- Numpyを上記のパッケージに互換性のあるNumpy1.14.1へダウングレード  

   ```
   python3.6 -m pip uninstall numpy
   python3.6 -m pip install numpy==1.14.1 --user
   ```

今回はこれで解決しました。
ボックスカルバートの形状予測AI ～いざ予測 編～

## シリーズ目次

- [ボックスカルバートの形状予測AI ～データ整理編～](https://qiita.com/sasaco/private/81881e2797de51f0dc5b)
- [ボックスカルバートの形状予測AI ～学習用設計データの作成編～](https://qiita.com/sasaco/items/92e1f8fc09c908b1ef8e)
- [ボックスカルバートの形状予測AI ～ニュートラルネットワークの構築編～](https://qiita.com/sasaco/private/b2aedcd5f91a07199ef1)
- ボックスカルバートの形状予測AI ～いざ予測 編～
- [Tensorflow.Keras で学習したモデルをtensorflow.jsで使う](https://qiita.com/sasaco/items/9c7a4e247710ed747dbd)

## 説明

[前回](https://qiita.com/sasaco/private/b2aedcd5f91a07199ef1)ボックスカルバートの形状予測AI のニュートラルネットワークを構築し、学習を終えました。

今回は、学習した結果を Webアプリで 表示することにしました。

作ったアプリはここで動作を確認できます
https://sasaco.github.io/BoxAI

### Web アプリに変換することができる

Web アプリでは **tensorflow.js** を使えば 
特に サーバーを用意することなく ブラウザ上で完結するアプリにすることができます。

下図のように 入力を変更するとすぐに
**上床版**, **下床版**, **側壁** の部材厚が変化します。

![sdddas.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/fc70a242-c1f7-9491-e6c9-2300802e538a.gif)

### 最適な断面を提示する仕組み

入力に対して **安全率(result_max)**が 1.00 となる断面 を適正な断面として
AI が提示する仕様にしました


ソースコードはここにあります
https://github.com/sasaco/BoxAI




## 次回

次回、はこの Web アプリで使った tensorflow.js について少しだけ 書きます。

[Tensorflow.Keras で学習したモデルをtensorflow.jsで使う](https://qiita.com/sasaco/items/9c7a4e247710ed747dbd)
Pandas 操作 備忘録

同じところでつまづきたくないので、メモ書き。

## indexを無視して列を追加
```.py
df_1 = df_1.reset_index(drop=True)
df_2['xxx'] = df_1['xxx']
```
* 基本的には２行目のみで良い
* 下記の場合は１行目が必要
    * indexが0からの連番になっていない場合
        * 予期せぬソートが行われている可能性がある
    * indexに重複がある場合
        * 重複されたindexのデータが複製される

#### 理由
* df_1のindexをキーとして結合するため

## カラム名強制変換

``` .py
df.columns = ['aaa', 'bbb', 'ccc', ...]
```
#Ruby or #Rails で unixtimestamp の数値を Time.zone の日時に変換する

# In Ruby need require

```
 require 'active_support/core_ext'
```

# Time

```rb
Time.at(1580655600)
# => 2020-02-02 15:00:00 +0000
```

# Timezone UTC

```rb
Time.use_zone('UTC') { Time.zone.at(1580655600) }
# => Sun, 02 Feb 2020 15:00:00 UTC +00:00
```

# Timezone JST

```rb
Time.use_zone('Tokyo') { Time.zone.at(1580655600) }
# => Mon, 03 Feb 2020 00:00:00 JST +09:00
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2937








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
#Ruby on #Rail / Convert unix timestamp to date with Time.zone ( UTC / JST Tokyo examample )

# In Ruby need require

```
 require 'active_support/core_ext'
```

# Time

```rb
Time.at(1580655600)
# => 2020-02-02 15:00:00 +0000
```

# Timezone UTC

```rb
Time.use_zone('UTC') { Time.zone.at(1580655600) }
# => Sun, 02 Feb 2020 15:00:00 UTC +00:00
```

# Timezone JST

```rb
Time.use_zone('Tokyo') { Time.zone.at(1580655600) }
# => Mon, 03 Feb 2020 00:00:00 JST +09:00
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2936








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
ilasmでstack machine その9

#概要

ilasmでstack machineやってみた。
俺言語、コンパイラを作ってみた。
三段階の一段目を作ってみた。
エミュレータで動かしてみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/fc92a4e1-3443-38dc-30cc-cb7bf38669d6.png)


#成果物


https://embed.plnkr.co/nQrdTXvonmRDzCMprsw4/

以上。
ilasmでstack machine その8

#概要

ilasmでstack machineやってみた。
俺言語、コンパイラを作ってみた。
三段階の一段目を作ってみた。

#ソースコード


```
10 a=0
20 a=a+1
30 #=a>100*255
40 b=a%15
50 #=b=0*120
60 b=a%5
70 #=b=0*140
80 b=a%3
90 #=b=0*160
100 ?=a
110 #=20
120 ?="fizzbuzz "
130 #=20
140 ?="buzz "
150 #=20
160 ?="fizz "
170 #=20
```

#出力結果


```
	pushi	0
	set	a
label_20:
	get	a
	pushi	1
	+
	set	a
	get	a
	pushi	100
	if<	label_255
	get	a
	pushi	15
	%
	if	label_120
	get	a
	pushi	5
	%
	if	label_140
	get	a
	pushi	3
	%
	if	label_160
	get	a
	call	printi
	jp	label_20
label_120:
	push	"fizzbuzz "
	call	prints
	jp	label_20
label_140:
	push	"buzz "
	call	prints
	jp	label_20
label_160:
	push	"fizz "
	call	prints
	jp	label_20
label_255:
	ret
```

#成果物

https://embed.plnkr.co/uudzVWXtcKQ4sXFgphoC/

以上。
Rails6 rails consoleからカラムのデータ型を確認する 

# 目的

- rails consoleからのカラムのデータ型の確認方法をまとめる

# 実施方法

1. railsアプリ名フォルダ直下で下記コマンドを実行してrails consoleを起動する。

    ```terminal
    $ rails console
    ```

1. rails console上で下記コマンドを実行してカラムのデータ型を確認する。

    ```
    >モデルの名前.columns_hash['カラムの名前'].type
    ```
【SwiftUI】NavigationLinkは即評価される

SwiftUIの`NavigationLink`はすぐに評価されてしまうので、場合によっては遅延評価されるように対処が必要という話です。

### 現象

たとえばこんなコードがあったとします。

```swift:サンプルコード
struct ContentView: View {
    var urls = ["a.com", "b.com"]

    var body: some View {
        HStack {
            List(urls) { url in
                NavigationLink(destination: BrowserContentView(url: url)) {
                    Text("Next Page")
                }
            }
        }
    }
}
```
ここで、`BrowserContentView`はすぐに初期化されてしまいます。例えば、この中で`url`で指定されているWebページを読み込んでいたとすると、`a.com`も`b.com`も読み込まれてしまいます。一覧画面を作るときに、その遷移先まで初期化してしまうのではリソースがもったいないですね。

### 対策方法
[このページ](https://medium.com/better-programming/swiftui-navigation-links-and-the-common-pitfalls-faced-505cbfd8029b)にあるように、遅延評価をできる`struct`を作ってそれを差し込みます。

```swift:遅延評価用のstruct
struct LazyView<Content: View>: View {
    let build: () -> Content
    init(_ build: @autoclosure @escaping () -> Content) {
        self.build = build
    }
    var body: Content {
        build()
    }
}
```

```swift:修正後のコード
struct ContentView: View {
    var urls = ["a.com", "b.com"]

    var body: some View {
        HStack {
            List(urls) { url in
                NavigationLink(destination: LazyView(BrowserContentView(url: url))) {
                    Text("Next Page")
                }
            }
        }
    }
}
```
これで遅延評価されるようになりました。この方法ならリンクが押されたときに該当のWebページが読み込まれるようになります。

### まとめ

`NavigationLink`における落とし穴とその対策を紹介しました。
初心者によるプログラミング学習ログ 209日目

#100日チャレンジの209日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

209日目は

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>209日目<br><br>progateでjquery上級編、rubyをⅢまで<br>技術書でwebサイトコーディング<a href="https://twitter.com/hashtag/100DayOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DayOfCode</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1216461005007376384?ref_src=twsrc%5Etfw">January 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
モジュールバンドラを使わないモダン Web 開発を実現する「Snowpack」

# 2020/06/08 追記
この記事は Snowpack v1 の記事で、かなり古い内容になっています。先日リリースされた Snowpack v2 については、下記の記事がよくまとまっています。
https://qiita.com/kazuma1989/items/30676cb3d2da1c873507

# はじめに

Node.js の登場により JavaScript の世界にモジュールの概念が導入されました。そして npm によって多くの JavaScript パッケージが配布されるようになりました。
しかし、Node.js のモジュールシステムは当然ブラウザでは動かず、古の Web ブラウザではモジュールを解決する仕組みがありませんでした。
そのためモダン Web 開発においては、 webpack や Rollup のようなモジュールバンドラを用いて、依存するモジュールを含む単一の JavaScript ファイルを生成するのが一般的です。

Node.js の登場から数年経ち、Google Chrome を始めとするモダンブラウザでは ECMAScript 2015 から導入された ECMAScript Modules (以下 ESModules) というモジュールシステムが実装されて、モジュールバンドラを使うことなくモジュールを使うことができるようになりました。

[Fred K. Schott](https://twitter.com/FredKSchott) によって開発された [Snowpack](https://www.snowpack.dev)[^1] は、ESModules を用いたモジュールバンドラを使わない[^2]モダン Web 開発のためのツールです。

# やってくれること

Snowpack の主な役割は依存パッケージのセットアップです。アプリケーション自体のソースコードに手を加えることはありません。
package.json やソースコードから依存するパッケージを抽出し、それぞれのパッケージを単一の JavaScript ファイルとして `/web_modules` ディレクトリに配置します。

アプリケーションからは単純に `/web_modules` 内のパッケージを import するだけです。

# やってみる

package.json の存在するディレクトリで下記コマンドを実行すると、 `dependencies` のパッケージを `/web_modules` ディレクトリにインストールします。

```shell
npx snowpack
```

もしくは `-include` オプションを用いて、ソースコードから依存するモジュールを解析することもできます。

```shell
npx snowpack --include \"dist/**/*.js\"
```

インストールしたパッケージはアプリケーションからは相対パスで import することができます。例えば Hyperapp が `dependencies` にある場合はこのようになります。

```javascript
import { h, app } from "/web_modules/hyperapp.js";
```

また、TypeScript や Babel との連携も容易です。いつも通りトランスパイルしてから、それに対して Snowpack をかけます。

```shell
babel src/ -d dist
npx snowpack --include \"dist/**/*.js\" --dest dist/web_modules
```

詳しくは Hyperapp と Babel を用いたサンプルを作ったので、こちらを参照してください。 package.json の scripts あたりから適当にたどるとわかりやすいと思います。
https://github.com/Monchi/snowpack-hyperapp

# モジュールバンドラは時代遅れか

決してそんなことはなく、Snowpack はモジュールバンドラを完全に置き換えるものではありません。

まず、Snowpack は ESModules 前提のツールです。~~IE のように ESModules が使えないレガシーブラウザをサポートすることができません。~~
**追記: バンドルもできるようになりました**
https://qiita.com/yukukotani/items/dfe236d29f97b0986b91#comment-db2dd39b38dcf1600968

また、モジュールバンドラの役割はもはや純粋なモジュールのバンドルだけにとどまりません。例えば webpack では各種 loader を用いて CSS や画像などを import することができますが、これは標準の ESModules の仕様には含まれていないため、ブラウザでは今のところ実現できません。

パフォーマンス面も一長一短です。モジュールバンドラは依存の依存まで含めて重複パッケージをまとめることができますが、Snowpack は依存パッケージごとに単一の JavaScript ファイルを生成するため、それができません。
一方で、Snowpack では依存パッケージごとに Code Splitting されているということでもあります。HTTP/2 や HTTP/3 の並列配信の恩恵を受けることができますし、将来的に [Dynamic Import](https://tc39.es/proposal-dynamic-import/) が実装されたら、パッケージを非同期に import してチューニングすることもできるでしょう。

モジュールバンドラを選ぶ理由は多くありますが、Snowpack はゼロロックインをコンセプトとしており、容易にこれまでのモジュールバンドラに戻ることができます。実際、Snowpack 特有の設定などはないですし、ECMAScript の仕様に準拠しています。[移行ガイド](https://www.snowpack.dev/#migrating-off-of-snowpack)もあるので、新規プロジェクトを Snowpack で初めてみるのは十分に現実的です。

# 最後に

Snowpack は極めてシンプルで、多くの機能は持ちません。その分[ドキュメント](https://www.snowpack.dev/)にはその思想や背景が細かく書いてあるので、気になる方は読んでみてください。

まだプロダクションではレガシーブラウザを切れないケースが多いかと思いますが、近未来の Web 開発を感じることができるかと思います。また、Snowpack は [Pika](http://pika.dev/) エコシステムの一部で、パッケージレジストリや CDN としても発展していくようなので、チェックしとくと面白そうです。

何か間違ったことを書いてしまっていたらコメントで教えてください。

[^1]: 1.0以前は @pika/web という名前だった
[^2]: Snowpack の内部では依存パッケージをバンドルするために Rollup を使っているため、正確には隠蔽している
Aurora グローバルデータベースの利点

https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/aurora-global-database.html
Aurora グローバルデータベースの利点
Aurora グローバルデータベースは、専用のインフラストラクチャを使用して、プライマリ DB クラスターとセカンダリクラスターの間で変更をレプリケートします。Aurora グローバルデータベースには以下の利点があります。

Aurora グローバルデータベースによるレプリケーションは、プライマリ DB クラスターのパフォーマンスに対する影響が一切ないか、限定されます。DB インスタンスのリソースは、全面的に読み取りおよび書き込みのワークロードに当てられます。

変更は、最小限の遅れ (通常は 1 秒未満) で AWS リージョン間でレプリケートされます。

セカンダリクラスターは、災害対策の高速なフェイルオーバーを可能にします。通常、1 分未満でセカンダリクラスターを昇格させて書き込みに対応できます。

★リモートの AWS リージョンのアプリケーションは、セカンダリクラスターから読み取ると、クエリのレイテンシーが低くなります。

セカンダリクラスターには最大 16 個の Aurora レプリカを追加できるため、単一の Aurora クラスターの容量を超えて読み取りをスケールできます。
SSD換装（Windows10）

#概要
　数年前に買ったゲーミングPCのSSD（500GB）の残量が200GBくらいになり、何をインストールするにも容量を気にしなければいけないのが煩わしいので、2TBのSSDに換装しようと思いました。
　また、OSもSSDに入っているため残量が200GBくらいになると、ブラウザを多重に開くだけでPCが重くなったのも換える動機となりました。

#購入したもの
- [SanDisk 内蔵SSD 2TB](https://www.amazon.co.jp/gp/product/B075CTH92S)
- [Sabrent USB3.0 2.5インチSATA/SSD 変換アダプタケーブル](https://www.amazon.co.jp/gp/product/B011M8YACM)

#PC
ガレリアスリムタワー
参考サイト：https://gamingpcs.jp/hikaku/bto/dospara/galleriaslim/

　SSDを2つまで内蔵できるが、増設しようとすると中身を分解する必要があり、またスリムタワーなこともあり中身がごちゃごちゃしてて面倒だったので、変換アダプタでUSB接続してデータをコピーした後、元のSSDと入れ換えることにしました。

#使用したフリーソフト
- [EaseUS Todo Backup Free 12.0](https://jp.easeus.com/backup-software/free.html)
- [EaseUS Partition Master 13.8](https://jp.easeus.com/partition-manager-software/free.html)

#手順
##1）元のSSD（500GB）のフォーマット形式の確認
　「EaseUS Todo Backup Free 12.0」を起動して、「クローン」を選択します。ソースとなるディスクを選ぶ画面で、「□ハードディスク0（1.82TB,ベーシック,<b>GPT</b>）」のように表示されるので、SSD（500GB）のフォーマット形式（この場合「GPT」）を確認しておきます。

##2）SSD（2TB）のフォーマット
　購入したSSDをUSB接続して、フォーマットします。フォーマットは、Windows10の「ディスクの管理」で、接続したSSDを右クリックして行います。
　フォーマットには、「GPT」と「MBR」の2種類の形式があります。1）で確認したフォーマット形式を選択し、フォーマットを行います。

##3）ディスクのクローン
　[こちら](https://tarelife.com/easeus-clone-ssd/)を参考に、SSD（2TB）にクローンを生成します。

##4）SSDの換装
　SSD（500GB）とSSD（2TB）を入れ替え、OSが起動することを確認します。

##5）ボリュームの拡張
　手順3）でディスクをクローンすると、パーティションの容量の割り当てもクローンされるため、データを入れるパーティションに残りの容量を割り当てる必要があります。
　「ディスクの管理」でパーティションを拡張する場合、対象（未割り当て領域）と隣り合っている必要があります。私の場合、隣り合っていなかったので、「EaseUS Partition Master 13.8」を使用しパーティションの位置を移動して、ボリュームの拡張を行いました。（ボリュームの拡張もこちらのソフトでできました）
　操作は[こちら](https://jp.easeus.com/partition-manager/how-to-move-partition.html)を参考にしてください。

#終わりに
PC環境は千差万別だと思うので、あくまでも参考までに読んでいただければ幸いです。
初投稿で拙いレイアウトをご容赦ください。
配列と連想配列の違い

何気なく配列を使っていましたが、**連想配列**と名前があることを知り、改めて調べてみました。

##　基本的な配列

```js
const test1 = [1, 2, 3, 4, 5];
```
<img width="614" alt="スクリーンショット 2020-01-13 3.53.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/51e48d67-696c-4fc2-346b-0275ef0d2be3.png">



##　連想配列(Dictionary)
**キー名：値**のペアによるデータ構造のことで一般的なオブジェクト構造と同じです。
配列との記法が違い、ちょっと注意が必要なのは中カッコで囲っています。

```js
// key :  valueで構成された配列
const test2 = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5}
```

<img width="447" alt="スクリーンショット 2020-01-13 4.00.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/b801245f-adac-0607-d76e-1c7821f3afd2.png">
Object.keys, values, entriesについて

**Object**で使えるメソッドを調べてみました！
##Object.keys 
指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。

``` js
//　まず連想配列を用意！
const test = {
    aaa: 1,
    bbb: 2,
    ccc: 'ccc'

}

Object.keys(test);　// プロパティだけが入った配列を返します。
```

**やってみた**
<img width="542" alt="スクリーンショット 2020-01-13 3.16.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/8936898d-9bab-8e86-da7e-f49428d38908.png">


Object.keys()の戻り値は配列なのでforEach()で一つずつ取り出すことも出来ます

```ls
Object.keys(test).forEach(function(data){

    console.log(data); 
});

```
**やってみた**　(はじめに作ったオブジェクトを使っています)
<img width="577" alt="スクリーンショット 2020-01-13 3.20.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/b77f8b08-e21f-6cee-116e-0ff278da1a79.png">

*メソッドではないけど...メモ
<img width="534" alt="スクリーンショット 2020-01-19 7.58.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/6037e822-df96-3919-8894-2dcb385ec578.png">
↑
こんな感じでオブジェクトのプロパティを変数でアクセスする方法があります。




##Object.values
指定したオブジェクトのvalue部分の配列を返します。

``` js
Object.values(test);
```
**やってみた**
<img width="548" alt="スクリーンショット 2020-01-13 3.34.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/8322ba0e-7663-6927-ea1a-21cfc9372f63.png">

##Object.entries
指定したオブジェクトの [key, value] ペアを一つのArrayにして配列を返します。
配列の中身が大きくなった時に便利そうです。

``` js
Object.entries(test);
```
**やってみた**
<img width="552" alt="スクリーンショット 2020-01-13 3.40.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/6c11358c-9074-f6af-8327-2e4a57f01962.png">

参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object
Python3 キュー操作 (collections.deque)

Python3でキュー操作を行うことができる、[collections.deque](https://docs.python.org/ja/3/library/collections.html#collections.deque) の基本操作メモ。


> Deque とは、スタックとキューを一般化したものです

dequeは本来、左右どちらからでも出し入れのできる、両端キューを扱うためのもの。
一般的なキュー用に [queue.Queue](https://docs.python.org/ja/3/library/queue.html) も用意されており、こちらは複数のスレッドを扱う場合でも安全に使うことができる。その分動作速度は劣る。

インデックス付けもサポートされていて、リストのように扱えるが、両端の操作しかしない場合にリストよりも効率よく動作する。

> 両端における append や pop を高速に行えるリスト風のコンテナ

単にキューのデータ構造を使いたいだけの場合はdequeで大丈夫。

## 環境
```bash
$ python3 --version
Python 3.7.4
```

## キューの作成

`q = deque([])`

```python
# import
>>> from collections import deque

# キューの作成(空で作成)
>>> q = deque([])
>>> q
deque([])

# キューの作成(最初から要素を入れておくこともできる)
>>> q = deque([1, 2, 3, 'a', 'b'])
>>> q
deque([1, 2, 3, 'a', 'b'])
```

## 追加

`append(item)`

```python
# 要素の追加
# q = deque([1, 2, 3, 'a', 'b'])
>>> q.append(10)
>>> q
deque([1, 2, 3, 'a', 'b', 10])
```

## 取り出し

`popleft()`

```python
# 先頭(左側)要素の取り出し
# q = deque([1, 2, 3, 'a', 'b'])
>>> q.popleft()
1
>>> q
deque([2, 3, 'a', 'b', 10])

# 取り出した値の変数への代入もできる
>>> item = q.popleft()
>>> item
2
>>> q
deque([3, 'a', 'b', 10])

# 右側の要素の取り出し
>>> item = q.pop()
>>> item
10
>>> q
deque([3, 'a', 'b'])
```

## 参考
公式ドキュメント：
https://docs.python.org/ja/3/library/collections.html#collections.deque

- [python - Queue.Queue vs. collections.deque - Stack Overflow](https://stackoverflow.com/questions/717148/queue-queue-vs-collections-deque)
  - (queue.queueとcollections.dequeの違いは "python queue.queue vs collections.deque" でググるとよかった)
- [Python で「両端キュー」として使えるデータ型 collections.deque - kakakakakku blog](https://kakakakakku.hatenablog.com/entry/2019/01/04/214907)
  - deque詳細な動作確認
- [Pythonのキューと優先度付きキュー - n-knuu's logs](http://n-knuu.hatenablog.jp/entry/2015/05/30/183718)
Vue.js のプログラミングを外部サービスでできるようにする方法

<img width="302" alt="vuejslogo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450266/bbb43027-142f-40a6-c7d8-e11de59c8bfa.png">

# はじめに
現在、**Vue.js** で簡単なプロダクトを作成しようと Vue.js について学習しており、外部公開できるようなサービスがないか探したところ、**Glitch** で実現できるようなので備忘のため投稿しました。

# プロジェクトの作り方

以下の通りです。

１. [Glitch の Web サイト] (https://glitch.com/) にアクセスします。

２． 画面右上の検索バーで **vue.js** をキーワードに検索します。
<img width="871" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450266/6d66d394-4dbe-cab7-9fb5-275d113e9427.png">

３． 「Gal Pasternak」という方の「vue-js」をクリックします。
<img width="878" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450266/3cee7180-9e41-78b2-1a71-b4dcaa2f58a1.png">

Vue.js のテンプレートプロジェクトを公開されている方は他にもいますので、適宜お選びください。

４． 「**Remix Your Own**」をクリックして、自分のプロジェクトとしてコピーします。
<img width="893" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450266/f31af619-655a-2cc4-0b7f-f97d5a6627ef.png">

そして、コピー後に、以下のようにしてプロジェクト名を変更します。
(Glitch 全体を通して同じプロジェクト名をつけることはできませんので、ご注意ください。)
<img width="688" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450266/ebdfa947-e721-f351-fee0-a9a0ecd8909a.png">

次の画面キャプチャの「legedary-kilogram」の部分を任意のプロジェクト名に変更します。
<img width="673" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450266/721944a7-ffd5-f48d-1064-e9ff9b7b9e2c.png">

５． Vue.js のコードを書きます。

６． ページを表示します。
「Show」をクリックして、「In a New Window」または「Next to The Code」のどちらかを選択して、結果のページを表示します。
<img width="199" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450266/62d6a604-5126-1fd8-be86-9c57602959cb.png">

# 最後に

Vue.js の基本学習とプロダクト作成を進めていきたいと思います。

なお、Node.js のプロジェクトも作成できるようなので、ご興味がある方はやってみてはいかがでしょうか。
EclipseにGlassFish Toolsをインストールしようとすると、エラーになる時の対処方法

## 環境
* Windows10
* Pleiades All in One(Eclipse 2019-12)

## 事象
Eclipseの[新規ソフトウェアのインストール]から以下のようにGlassFish Toolsをインストールしようとすると、エラーになる。
![glassfish3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199887/9ef3d177-306b-39ac-53b6-d23756f1be50.png)

エラーの内容

```
1 つ以上の必須項目が見つからないため、インストールを完了できません。
  Software being installed: GlassFish Tools 1.0.1.201904090220 (org.eclipse.glassfish.tools.feature.group 1.0.1.201904090220)
  Missing requirement: GlassFish Tools 1.0.1.201904090220 (org.eclipse.glassfish.tools.feature.group 1.0.1.201904090220) requires 'org.eclipse.equinox.p2.iu; org.eclipse.sapphire.feature.group [9.1.0,10.0.0)' but it could not be found
```


## 原因
GlassFish ToolsはSapphireに依存しているため。(参考：[公式ページ](https://projects.eclipse.org/projects/webtools.glassfish-tools/downloads))
![sapphire-pre1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199887/c9b63788-de91-3a5a-027b-60fcdbf3b009.png)


## 解決方法
EclipseでSapphireを追加します。
詳しい手順は、[EclipseでGlassFishを動かす(Eclipse2019-12対応)](https://qiita.com/polarbear08/items/19c3df040be7062054d5)の「1-3. Sapphire」と「1-4. GlassFish Tools」を参照してください。


## 参考
* [Eclipse 2019-06にGlassfish Toolsをインストールする](https://qiita.com/sasetsu/items/cad9f776d8160d1ae54b)
CakePHP3 Cake\I18n\Timeのmodify()に気をつける

# TL;DR
- **Cake\I18n\Timeクラス**が用意する**modifyメソッド**の挙動に関して<br>（以下、modifyと呼ぶ）
- modifyは、生成されたインスタンス自身を上書く習性がある（ようだ）
    - 以下のサンプルコードを参考にして欲しい

# サンプルコード
```php
$time = new Cake\I18n\Time();
for ($i = 0; $i < 3; $i++) {
    // 主力結果を見易くするためにあえて改行コードを付ける
    echo $time->i18nFormat('yyyy-MM') . "\n";
    echo $time->modify('next month')->i18nFormat('yyyy-MM') . "\n";
}

/*
 * 期待値
 *
 * 2020-01
 * 2020-02
 * 2020-01
 * 2020-02
 * 2020-01
 * 2020-02
 *
 */

/*
 * 実行値
 *
 * 2020-01
 * 2020-02
 * 2020-02
 * 2020-03
 * 2020-03
 * 2020-04
 *
 */
```

公式ドキュメントはこちら： https://book.cakephp.org/3/ja/core-libraries/time.html
docker-composeでRundeckを起動してみる


豆知識Rundeckの404画面はスペース猫

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/d7b7f8e6-d173-ffbc-0574-b1c5a8880e0e.png)




```yml:docker-compose.yml
version: '3'

services:
    rundeck:
        image: rundeck/rundeck:SNAPSHOT
        links:
          - mysql
        environment:
            RUNDECK_DATABASE_DRIVER: com.mysql.jdbc.Driver
            RUNDECK_DATABASE_USERNAME: rundeck
            RUNDECK_DATABASE_PASSWORD: rundeck
            RUNDECK_DATABASE_URL: jdbc:mysql://mysql/rundeck?autoReconnect=true&useSSL=false
            RUNDECK_GRAILS_URL: http://example.com:4440
        volumes:
          - ${RUNDECK_LICENSE_FILE:-/dev/null}:/home/rundeck/etc/rundeckpro-license.key
        ports:
          - 4440:4440
    mysql:
        image: mysql:5.7
        expose:
          - 3306
        environment:
          - MYSQL_ROOT_PASSWORD=root
          - MYSQL_DATABASE=rundeck
          - MYSQL_USER=rundeck
          - MYSQL_PASSWORD=rundeck
        volumes:
          - ./dbdata:/var/lib/mysql
```


```
docker-compose up -d
```

ログイン画面では
Usernameは`admin`、Passwordは`admin`でログインできる




[rundeck/rundeck \- Docker Hub](https://hub.docker.com/r/rundeck/rundeck)
[Running Docker Images \| Rundeck Docs](https://docs.rundeck.com/docs/administration/install/docker.html#example-configurations)
[docker\-zoo/mysql at master · rundeck/docker\-zoo](https://github.com/rundeck/docker-zoo/tree/master/mysql)
[docker\-zoo/docker\-compose\.yml at master · rundeck/docker\-zoo](https://github.com/rundeck/docker-zoo/blob/master/mysql/docker-compose.yml)



[rundeckをdocker\-composeで使う \- Qiita](https://qiita.com/s64s_y/items/b6da5c08651ba1ec0134)
[Rundeckによるジョブスケジューリング \- Qiita](https://qiita.com/ryojsb/items/397e35ffdf081fa409fc)
[ジョブスケジューラ「Rundeck」を試してみる ｜ Developers\.IO](https://dev.classmethod.jp/server-side/server/try-rundeck-job/)
[必殺ジョブスケジューラ！！Rundeck \- Qiita](https://qiita.com/hirotoyoshidome/items/6f5666cbc076b080ef1e)
ApplicationInsightsを利用したオートスケール

### WebAppsのオートスケールをApplicationInsightsを利用して行う

ApplicationInsightsとは
ページの応答速度やサーバのレスポンスタイムなどアプリケーションの性能やバグを確認するためのサービスになります。
https://docs.microsoft.com/ja-jp/azure/azure-monitor/app/app-insights-overview

WebAppsのスケールアウトの設定画面にてオートスケールアウトの閾値の取得をApplicationInsightsに変更します。
![set1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270447/23d489a2-0b23-7246-b806-cca297b4beb9.png)

今回は、サーバのレスポンスタイムを指定します。
その他、ログベースのメトリックで指定出来る項目は下記で確認します。
https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/app-insights-metrics

JMeterを使って負荷をかけてみました。

ApplicationInsightsのライブストリーム画面を見るとインスタンス数が増えているのが分かります。
![set4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270447/e249d4c6-3ed0-7c5c-7e5d-5e407398d806.png)

AzureCLIでも確認してみます。
インスタンス数が増えていることが分かります。
![set5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270447/36a0635d-17ac-948f-44da-fe41fe463508.png)

スケールインの設定を忘れていたのでスケールインの設定を追加します。
![set6-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270447/f2c1c3de-bb0a-52ea-5061-6846671353e6.png)

スケールアウトの時と同様に、ApplicationInsightsのライブストリーム画面、Azure CLI共にインスタンス数が減っていることを確認出来ます。
![set6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270447/e921c92e-4ccd-e939-daee-9c0f66d94f0f.png)
![set6-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270447/1c5300ec-fcf2-9355-1999-e391250256f2.png)
JavaScript勉強の記録その12: オブジェクトの作成

#オブジェクトの作成

const オブジェクト名 = {}とすることで、オブジェクトの作成をすることができます。
例えば、x座標とy座標を管理したかった場合は、以下のようにオブジェクトを作成することができます。

```index.js
const point = {
  x: 100,
  y: 180,
};
```

#プロパティーへのアクセス

まずは用語の整理ですが、以下の例の「x:」の部分をキーと呼び、「100」の部分を値と呼びます。
そして、キーとバリューを合わせてプロパティーと呼びます。

各プロパティーへのアクセスは、「オブジェクト名.キー」または「オブジェクト名[キー]」とすることで、アクセスすることができます。

```index.js
const point = {
  x: 100,
  y: 180,
};

console.log(point.x);
//=>100
console.log(point['y'])
//=>180
```

#プロパティの追加および、削除

以下の例はzというキーと90という値のセットのプロパティーをpointオブジェクトに追加しています。
そしてdeleteという命令を使ってプロパティーの削除を行なっています。

```index.js
const point = {
  x: 100,
  y: 180,
};

point.z = 90;
console.log(point);
//=>{x: 100, y: 180, z: 90}

delete point.y;
console.log(point);
//=>{x: 100, z: 90}
```