OmniAICreator/Qiita-1.07M huggingface dataset:
ActiveStorageを使って、画像投稿機能実装までの流れ

#はじめに
　よくSNSで画像をあげるような機能があるが、それをRailsで実装するときに使うGemを紹介する。長くなるため、今回は実装の準備段階に絞って投稿する。
全２回の予定。

##Active Storageとは
　現在はGemとしてインストールしなくても、Railsに搭載されている。画像などのファイルのアップロードを簡単に行えるメソッドが使えるようになる、画像を保存するテーブルの作成も簡単に行える。

##画像アップロード機能の実装までの流れ
1. ImageMagickのインストール
2. 2つのGemのインストール
3. ローカルサーバーの再起動
4. Active Strageのインストール
5. テーブルの生成

###1.ImageMagickのインストール
　そもそもImageMagickとは、画像加工ツールであり、Gemではなく、ソフトウェアの部類になる。Homebrewからインストールを行う場合は、

```bash

brew install imagemagick
```

　ImageMagickだけでは、Rubyで扱えないので、次の２つのGemをインストールする必要がある。
###2.2つのGemのインストール
(1)MiniMagick
   　ImageMagickの機能がRubyで使えるようになる。
(2)ImageProcessing
　MiniMagickだけではできない、画像のサイズの調整をする。

```rust:Gemfile
gem 'mini_magick'
gem 'image_processing', '~>1.2' #バージョンの指定
```
Gemfileのいちばん下でOK。
　
記述をしたら、忘れずに、ターミナルで、

```bash
bundle install
```

###3.ローカルサーバーの再起動

```bash
rails s
```
Gemを新たにインストールしたときは、忘れずに。

###4.Active Storageのインストール
晴れて、ActiveStorageが使えるようになったので、
ターミナルを使って、インストール

```bash
rails active_storage:install
```
インストールすると、マイグレーションファイルが自動で生成される。
###5.テーブルの生成
特にカラムの変更がなければ、そのまま、

```bash
rails db:migrate
```
このマイグレーションによって、２つのテーブルが生成されることを確認。

##ポイント
- [x] 　ActiveStorageを使って画像アップロード機能を実装する。
- [x] 　Rubyで使えるようにするために、２つのGemをインストールする。

##最後に
 次回、画像の保存方法、保存した画像の表示方法についてまとめる。
【Java】データ型・変数・定数

個人用メモにJavaのデータ型をメモりました。

- String(文字列)
- int（整数）
- double（小数点を含む数）

とりあえず最初はこの三つは確実に抑える。
データ型・文字列のクラス
=
javaで扱われる データ型 の一覧表はこちら。


| 種類         | 型名    | 扱える範囲                                              | 
| ------------ | ------- | ------------------------------------------------------- | 
| 整数型       | int     | -2147483648 ～ 2147483647 までの整数                    | 
| 文字列クラス | String  | "Java"、"自分"、"Mac" などの複数の文字                  | 
| 浮動小数点型 | double  | ± 1.8 × 10308 ～ ± 3.4 × 10 - 324 さらに細かい数字      | 
| 論理型       | boolean | true ( 真 ) or false ( 偽 ) 真偽知                      | 
| 文字型       | char    | "あ" 、 "虹" などの一文字の文字列                       | 
| 整数型       | short   | -32768 ~ 32767 までの整数                               | 
| 整数型       | long    | -92223372036854775808 ～ 9223372036854775807 までの整数 | 
| 整数型       | byte    | -128 ～ 127 までの整数                                  | 
| 浮動小数点型 | float   | ± 3.4 × 1039 ～ ± 1.4 × 10 - 45 細かい数字              | 

##データ型の使い方

##変数
変数の概念などはここでは端折りますが、Javaにおける変数の宣言と初期化の仕方はこちらです。

```
データ型 変数名 = 値;
```

###変数の命名規則
変数の命名規則もいくつかありますが、Javaに関して言うと

- キャメルケースで書く。（myName, javaScriptのように、2単語目から大文字にする書き方）。
- 値と変数名が矛盾するような書き方をしてはならない。

など、基本的に大体の他の言語と変数宣言の仕方は同じ。

##文字列・Stringクラス ー【String】
Javaには**複数の文字を代入できる** 文字列クラス の **String** というものがあります。

**Stringは他のデータ型と違い、 型ではなくクラス**になります。

ほかにも文字列を扱うデータ型はあるが、長文に対応できたりして使いやすいので、基本的に**文字(文字列)を扱う時はString クラスを使うようにする。**

こちらでハローワールドプログラムに**"Hello Java!"という文字列の値を変数にしてプログラムに組み込んで使ってみます。**

```java
package practice_project;

public class Practice1 {
    public static void main(String[] args) {
        // TODO 自動生成されたメソッド・スタブ
        String hello = "Hello Java!";
        System.out.println(hello);

    }
}
```
出力結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613675/abd12527-ebe7-8575-1c10-4886ee0d5ed4.png)

##定数
定数も詳しい説明は端折りますが、変数の**中身の書き換え（or 上書き）が不可能**なバージョンのようなもの。

###定数化するメリット

####ミスが減る
定数をコピペするなり、エディタの予測変換で呼び出したりする方が、生の値を手入力するより、はるかにミスが少なくなります。
####理解し易いコードとなる
定数を用いるような場合、その値はシステム上（基本的には）固定であるべきものです。
誰が見ても、それは定数で、どんな内容がセットされているかを識別できる必要があります。

###定数の宣言の仕方

Javaにおける定数の書き方は結構長い。

```
static final データ型 定数名 = 値;
```

マイナンバーだったりパスワードだったり、計算や処理の途中で値が変わってしまうと困るもの、一意の存在であるものに対し定数をつかいます。
マイナンバーを例にして定数の定義の仕方はこちら。

```java

static final int CONST_USER_PASWORD = 01234567891;
```
####定数の宣言時に必要な情報

上記の**`static final int CONST_USER_PASWORD = 01234567891;`**を例に、定数を宣言するために必要な情報は以下です。

####static
付与された変数や定数は、Javaプログラム上で **一意であること** を示します。
###final
**変数ではなく、定数として扱うための宣言。**
定数となったものは変数のように「後から値を変更することが不可能」となります。
####定数名

-  基本的には、定数と理解しやすいように**大文字のスネークケースで命名。**
- 接頭辞に、その意味を持つ「CONST（CONSTANTって英語の略称）」が付与されることがある。（ 例: **CONST_〇〇〇〇**）
 - constとは**値書き換えを禁止した変数を宣言する方法です。**
JavaScriptだと定数を宣言するときにconstという文字を使うが、Javaで定数名を命名するときに書く場合もある。 (例：CONST_USER_NAME)
    - CONSTの意味は、CONSTANT（コンスタント）の略。
Apex UpでNode.js × expressをAWS Lambda, API Gatewayに速攻デプロイしてみる

# はじめに
Node.js × expressのAPIのデプロイ先としてLambdaを使おうと思ったのですが
手取り早くデプロイして試したかったので、Apex Upを使ってみた。今回はその時の備忘録

# Upとは
APIや静的ウェブサイトをLambda × API Gatewayに`up`コマンドでデプロイしてくれるツールです。

# 使ってみる

Upのインストール

```
curl -sf https://up.apex.sh/install | sh
```

プロジェクト作成

```bash
mkdir node-up
cd node-up
npm init
entry point: (index.js) app.js # 自分はapp.jsに変更
```

expressのインストール

```bash
npm install express
touch app.js
touch up.json # Upの設定ファイル
```

app.js

```javascript
const express = require('express')
const app = express()
const { PORT = 3000 } = process.env

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(PORT);
```

Upの設定は以下の内容に設定

```json
{
  "name": "node-up"
}
```

これで設定は完了です。

最後にgit commitします。
git commitしとかないと`up`したときにエラーが出てしまいます。


```bash
git init
git add .
git commit -m "First commit"
```

最後にデプロイします。

```bash

up
```

しばらくすると以下のような内容が出てくるのでURLをチェックして表示されればおkです。

```bash

stack: complete (19.175s)
endpoint: https://.../staging/
```

実際の表示
![hello-up.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/ae278f96-b91b-d029-db79-b44f84b5c0e0.png)

削除

```
up stack delete
```

# さいごに
Apex Upを使えば気軽にデプロイできるのでとりあえずデプロイしたいときは重宝しそうです。


# 参考資料
[Up公式](https://apex.sh/up/)
[Up GitHub](https://github.com/apex/up)
本日の『railsチュートリアル』で詰まったところ(2020/10/06)

#詰まったところ
##1.3.4 Hello, world!
･事象:`$ git push heroku master`実行後、URLを開くと`Method Not Allowed`と表示される。
･解決方法: 開くURLが間違っていた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764452/edb6ee09-b7cf-53b8-6815-80c74516360d.png)

･留意点
Heroku導入は難しくて理解を飛ばしたため、振り返る必要あり。

#感想
･1章読了！
･pushとcommitを頭の中でイメージできるようになってきた。
･もしかしてQiitaの使い方間違ってる？日付毎に新しい記事を量産するのではなく、1記事に追記していく形がいいのかもしれない。Qiitaルール要確認。
･Qiitaのマークダウン記法は読んだので多少記事が見やすくなったはず。
python googlemap  api でレビューを取得

#概要
最終目標はスクレイピングした店舗を口コミ等を参考にしてランキング付けするwebサイトを作ることです

前回（[python googlemap api を利用したデータ取得](https://qiita.com/hmck/items/25a252963498ab16c80f)）の続きです。
apiを利用して店舗情報の取得まではいけたのですが、'reviews'のパラメータが存在せず、口コミの取得に四苦八苦しました。

#参考サイト
[Google Map APIからレビューを取得する](https://www.it-swarm-ja.tech/ja/google-maps/google-map-api%E3%81%8B%E3%82%89%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/1073688155/)
[PythonでGoogle APIとぐるなび APIのデータを取得してみた](https://www.capa.co.jp/archives/25959)

#やったこと
[Google Map APIからレビューを取得する](https://www.it-swarm-ja.tech/ja/google-maps/google-map-api%E3%81%8B%E3%82%89%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/1073688155/)を見てみると、どうやら'place_id'と'api_key'で'review'の存在するデータにアクセスできるようだ

以下のようにするとレビューを取り出すことが出来た。
astモジュールを用いているのは、bs4で取得したXML形式のデータを辞書型に変換して、レビューのみ取り出したかったからである。

最大で5件までしか取得できないみたいなので、時間等の他の要素でソートして取り出す方法を模索していく


```python

key = 'AIzaSyDdKdbQVGfN2SgQ2BNEkwAPhK1enpJzk_c' # 上記で作成したAPIキーを入れる
placeId = 'ChIJJ4-os2znAGAReJ4AQRGTrcs'

urlName = "https://maps.googleapis.com/maps/api/place/details/json?placeid={0}&key={1}".format(placeId,key)
dataHTML = requests.get(urlName)
soup = BeautifulSoup(dataHTML.content, "html.parser")

soup = ast.literal_eval(str(soup))
pprint.pprint(soup['result']['reviews'])
```
##実行結果
```
 {'author_name': 'Susie Mead',
  'author_url': 'https://www.google.com/maps/contrib/109736572258034599657/reviews',
  'language': 'en',
  'profile_photo_url': 'https://lh5.googleusercontent.com/-yaP8l2DOlaE/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucnHsZcunKg758to4D5rIfeVjwMqZg/s128-c0x00000000-cc-rp-mo/photo.jpg',
  'rating': 2,
  'relative_time_description': 'a year ago',
  'text': 'The hotel is located in a really interesting area filled with shops '
          'and markets. The room was nice and updated. My downside is the '
          'building was hard to find and no English signs at all and the staff '
          'barley speak English making it very difficult to communicate.',
  'time': 1562469388},
 {'author_name': 'whenuaboynton',
  'author_url': 'https://www.google.com/maps/contrib/118063609090864700050/reviews',
  'language': 'en',
  'profile_photo_url': 'https://lh3.googleusercontent.com/a-/AOh14GjXy-z98y7u9l702EwHvz5DN6AqQWihDh3Fsp-V=s128-c0x00000000-cc-rp-mo',
  'rating': 5,
  'relative_time_description': 'a year ago',
  'text': 'Double room was amazing, biggest bed I’ve ever seen or slept on. '
          'Room far bigger than others experienced in Japan. Couldn’t get a '
          'better location in Osaka.',
  'time': 1569917795}]
```
ヘッダーやフッターを一度作って別のページでも流用する方法

#フッターやヘッダーを作ったら他のページにも使いたい！
ポートフォリを制作中
フッターやヘッダーをページが変わるたびに一から作り直すのかなり面倒だなと感じ調べたらすぐに出てきたので共有させてください！

#結論

![スクリーンショット 2020-10-06 22.08.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694122/080aaddd-c07d-cabd-997e-dfb367f07478.png)

このapp > layouts >application.html.erb
の中にある

```application.html.erb
#開くとすでに記述してあります
<!DOCTYPE html>
<html>
  <head>
    <title>PhotoRoke</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
#ここにヘッダーの記述をする
    <%= yield %>
#ここにフッターの記述をする
</body>
</html>
```
<%= yield %>
をフッターとヘッダーで挟む感じで記述しましょう！

#yieldメソッドって何？
レイアウトテンプレートに、各テンプレートファイルを展開するためのメソッドです。とのこと

レイアウトテンプレートとはRailsでいう先ほど編集した applocation.html.erb のことです。
Railsでいうと、ということは他の言語では違うファイルがレイアウトテンプレートなのかもしれません

#yieldメソッドが何をしているか
すごく簡単にいうと
yield = トップページのHTML
yield = 新規投稿ページのTHML
yield = その他のページのHTMI
のようにyieldに各ページのHTMLが中に入る

#終わり
以上になます！
手を抜くプログラミングを行っていきましょう
ご高覧いただきありがとうございました！
JavaScriptでブラウザのコンソールにconsole.log出力する時は参照型に注意しましょう

## 概要
ブラウザでJavaScriptを実行している時に`console.log`に参照型のデータを渡して出力すると期待通りに出力されない場合があります。その再現手順と回避策を記します。

## ソースコード

今回使用するソースコードは以下の2ファイルです。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>console-log-sample</title>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>
```

```main.js
'use strict';

class Name {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
class Human {
  constructor(name, age, address1, address2) {
    this.name = name;
    this.age = age;
  }
}

const name = new Name('太郎', '佐藤');
const human = new Human(name, 25);
console.log(human); // firstName が 太郎, lastName が 佐藤, age が 25 と出力して欲しい

human.name = new Name('次郎', '鈴木');;
human.age = 30;
console.log(human); // firstName が 次郎, lastName が 鈴木, age が 30 と出力して欲しい
```

## ブラウザ(Chrome)で実行した場合の出力結果

`index.html` をブラウザで表示したときのコンソール出力結果は画像の通りです。

![chrome_console_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261731/f1d838c5-86c0-af58-f510-7ebc0ccd17a4.png)

`age`は期待通りに出力できていますね。`name`の中身を確認するために展開してみましょう。

![chrome_console_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261731/4a4aa3e1-0858-c7f9-5014-2c91f111ae00.png)

展開してみると、1つ目の`console.log`結果と2つ目の`console.log`結果が同じ値になっています。どうやら後から代入した値が出力されているようですね。

なぜこんな現象が発生するのでしょうか。これについてはMDNのドキュメントに記載がありました。

[console.log() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Console/log)

> 出力する JavaScript オブジェクトのリスト。各オブジェクトの文字列表現が記述順で出力されます。 
> Chrome や Firefox の比較的新しいバージョンを使っているなら注意が必要です。
> これらのブラウザーで記録されるのはオブジェクトへの参照です。そのため、 console.log() を呼び出した時点でのオブジェクトの「値」が表示されるのではなく、内容を見るために開いた時点での値が表示されます。

つまり、`console.log`を呼び出した時点の値ではなく、ブラウザで展開した時の値を出力しているということになります。

## 回避策

回避策についてもMDNのドキュメントに記載がありました。

> console.log(obj) を使わず、 console.log(JSON.parse(JSON.stringify(obj))) を使用してください。
> これにより、ログを記録した瞬間の obj の値を確実に見ることができます。こうしないと、多くのブラウザーでは値が変化したときに常に更新されるライブビューになります。これは望むことではないかもしれません。


それでは、MDNのドキュメント通りに`main.js`を書き換えてみましょう。
(赤色の部分を削除し、代わりに緑色の部分で挿入します。)

```diff:main.js
'use strict';

class Name {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
class Human {
  constructor(name, age, address1, address2) {
    this.name = name;
    this.age = age;
  }
}

const name = new Name('太郎', '佐藤');
const human = new Human(name, 25);
- console.log(human); // firstName が 太郎, lastName が 佐藤, age が 25 と出力して欲しい
+ console.log(JSON.parse(JSON.stringify(human)));

human.name = new Name('次郎', '鈴木');;
human.age = 30;
- console.log(human); // firstName が 次郎, lastName が 鈴木, age が 30 と出力して欲しい
+ console.log(JSON.parse(JSON.stringify(human)));
```

`main.js`を書き換えた後に、再度ブラウザで開いてみます。

![chrome_console_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261731/265f9cb6-c88c-f1f9-2ab8-1fb56612c7f6.png)

期待通りの出力結果になりましたね。

## まとめ

参照型データを`console.log`で出力する時は、`console.log(JSON.parse(JSON.stringify(obj)))`を使うと期待通りの出力結果が得られます。
macから簡単にgifを作ろう


開発をしてるとちょっと画面を共有したい場面とか出てきますよね。
その際にさくっと共有するためのtipsです。

![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444546/9e7f1cf2-7083-0707-1122-83299451205d.gif)


## 使うツール

|やりたいこと|ツール|
| ---- | ---- |
|画面キャプチャー|macOS純正|
|gifへの変換|FFmpeg|

## やり方

### 画面をキャプチャーする

①`Cmd + Shift + 5`で画面の範囲を選択→キャプチャー開始
②撮影したい操作を行う
③画面上部のメニューバーから■を押して撮影停止

### 動画を変換する

⓪FFmpegのインストール(FFmpegがインストールされていない場合)

```
brew install ffmpeg
```

①変換

```
ffmpeg -i ~/Desktop/{SOURCE_FILE}.mov -r 15 {EXPORT_FILE}.gif
```

-r で秒間のコマ数を指定しています。上記例は15。
【Kotlin】委譲プロパティ (Delegated Properties) 入門

# 【Kotlin】委譲プロパティ (Delegated Properties)について
## 目次
1. [委譲プロパティ (Delegated Properties)とは](#委譲プロパティ (Delegated Properties)とは)
2. [委譲とは](#委譲とは)
2. [標準ライブラリ](#標準ライブラリ)
4. [まとめ](#まとめ)
5. [参考にさせていただいたサイトなど](#参考にさせていただいたサイトなど)

## 委譲プロパティ (Delegated Properties)とは
* クラスのプロパティ（メンバ）のsetter/getter処理を別のオブジェクトに移譲する仕組み
   * ここで私は、移譲とはというのがまだ理解できてないレベルでした。
* byを使うことで、委譲する先を指定できます。 

## 委譲とは 
* `委譲 (delegation) とはオブジェクト指向プログラミングにおいて、あるオブジェクトの操作を一部他のオブジェクトに代替させる手法のこと。` (wikipedia参照)

* 例
  * クラスBで処理を、クラスAのオブジェクトに委譲している。 

``` Sample.kt
class A {
  fun foo {
    println("hoge")
  }
}

class B {
  // クラスBは、hogeの処理をクラスAに委譲している。
  fun hoge {
     val a = A()
     a.foo()
  }
}

```

## 標準ライブラリ
delegated propertiesの標準ライブラリとしては、lazyとObservableなどがあります。
その他、NotNullなどがありますが、こちらはまだよく分かってないです。

### lazy
lazyは、プロパティの初期化を初めて参照された時まで遅延できます。

* 何が嬉しいか
  * AndroidのContextなど、onCreate以降にしか参照できないもののプロパティをオプショナルにしなくて済む
  * オプショナルだと、`?`や`!!`などの記述が増えるし、nullの可能性も出てきてしまうので確認などが必要になる。

* 例
  * 現在時刻を値として持つ、プロパティ。
  * 初期化されたタイミングの時間の値を持ち、immutableなので変更不可。 

``` Kotlin
import java.time.LocalDateTime

val lazyProperty: String by lazy {
    val dateAndtime: LocalDateTime = LocalDateTime.now()
　　 "Current date and time: $dateAndtime"
}

fun main(args: Array<String>) {
    println(LocalDateTime.now())
    println(lazyProperty)

    println(lazyProperty)

    ==> 結果
    2020-09-06T21:56:21.118270
    Current date and time: 2020-10-06T21:56:21.118703 => 前のDataTimeより後の時間になっている。
    Current date and time: 2020-10-06T21:56:21.118703 => 同じ値
  
}
``` 

* lateinitとの違い
  * lateinitでも同じことを実現できますが、lateinitはmutable(あとで、値を変更できる)、lazyはimmutable(初期化した値から変更できない)という違いがあります。

### Observable 
Observableは、プロパティの値の変更を検知して、それに伴って処理を実行できるというものです。


* 例

``` Observable.kt
var observableName: String by Delegates.observable("Jonathan") {
    property, old, new ->　println("$old to $new")
}

fun main(args: Array<String>) {
    observableName = "Joseph" => 結果 "Jonathan to Joseph"
    observableName = "Jotaro" => 結果 "Joseph to Jotaro"
}
```

## まとめ
* 委譲プロパティとは
  * プロパティのsetter/getter処理を別のオブジェクトに移譲する仕組み

* 標準ライブラリの2つある。
  * lazyとは、プロパティの初期化を参照されたタイミングまで遅延できる。
  * observableとは、値の変更を検知して処理を実行できる

## 参考にさせていただいたサイトなど
* [Kotlin リファレンス](https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/delegated-properties.html)

* [Delegated Properties で遊ぼう（スライド版）](https://qiita.com/kikuchy/items/55ea0748a5850925349a)
【実務未経験】初学者が0から学ぶTypeScript①

#学習しようと思ったきっかけ
これまで、HTML/CSS　→　JavaScript　→　Reactの順で学習してきました。
Reactで作ったポートフォリオも完成して「就活するぞー！」と本格的に企業へのエントリーを始めてみると
>【必須条件】
・Webフロントエンド開発の業務経験2年以上
・モダンFW(Angular, React, Vueなど)を用いた開発経験
**・TypeScriptを用いた開発経験**

TypeScriptでの開発経験を求めている企業がめちゃくちゃ多かったです。
Reactと相性も良いらしく、**JSフレームワーク×TypeScript**はフロントエンド開発の現場では主流の手法だったようで、身に着けるべき技術だと感じたので学んでいきます。
※もし私の記事の内容に誤りがあればご教授いただけると幸いです。

参考：[TypeScriptの型入門](https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a "Qiita")
#1.TypeScriptって？
型がついたJavaScriptのこと(JavaScriptの上位互換)。

```
const a: number = 5;
```

基本はこんな風に書いていくみたい
`const 定数名: 型名 = 値;`
#2.型って？
プリミティブ型とリテラル型がある
>プリミティブ【primitive】→　原始的、素朴な
リテラル【literal】　→　逐語的、ありのままの

直訳だけ掻い摘んで見ると素朴もありのままも同じ気がするけど、何より
**プリミティブ型はリテラル型を内包している型**で
**リテラル型はプリミティブ型を細分化している型**
っていう概念を抑えておけばいいみたい。
お魚(プリミティブ)型とマグロ（リテラル）型みたいな感じかなぁ
##プリミティブ型
TypeScriptにおける基本の型

```
const a: number = 5;
```

`number`の部分を
`string(文字列)
number(値)
boolean(真偽値)
symbol（ユニークな識別子）
bigint（とても大きな整数値）
null
undefined`
に置き換えて型を定義できるみたい。
定義した型と違う型のデータが定数に代入されるとエラーになる。
[Javascript - シ、シンボル(Symbol)って何？](https://qiita.com/lemon2003/items/55c947f29b44f79dc859 "Qiita")
[JavaScriptのBigIntを勉強してみた](https://qiita.com/okumurakengo/items/a5cf08e764b6dfd7bf85 "Qiita")
##リテラル型
プリミティブ型を細分化した型

```
const a: "hoge" = "hoge";
const b: 5 = 5;
const c: true = true;
```

`"hoge"`という型をもつ定数`a`には`"hoge"`というstring（文字列）のみ代入できる。
`5`という型をもつ定数`b`には`5`というnumber（値）のみ代入できる。
`true`という型をもつ定数`c`には`true`というboolean（真偽値）のみ代入できる。

##プリミティブとリテラル型の関係性
リテラル型はプリミティブ型を細分化した型なので、これもOK

```
const tuna :"maguro" = "maguro";
const fish :string = tuna;
```
`"maguro"`型を持った定数`tuna`は、`string（文字列）`型を持った定数`fish`を細分化したものなので定数`fish`に代入できる。逆はNG。
##型推論
型名（型注釈）の宣言は省略できる。その場合、

**constで宣言された定数**はリテラル型が定義されるため、

```
const a = "apple";
const b = 1;
```

定数`a`は`"apple"`型
定数`b`は`1`型をもつことになる。

対して**letやvarで宣言された変数**はプリミティブ型が定義されるため、

```
let c = "orange";
var d = 2;
```

変数`c`は`string`型
変数`d`は`number`型をもつことになる。

次回：[【実務未経験】初学者が0から学ぶTypeScript②](https://qiita.com/Kashiwaya123/items/1bde024a2f10c6e51ef4 "Qiita")
PostmanのCollection RunnerでWebAPIのテストを自動化する

# はじめに

WebAPIを叩いて動作確認するときに、 **Postman** を使っている方は多いと思います。
しかしながらWebAPIをパラメータを変更しながら挙動の変化を調べるテストを記述したい場合にどうすればいいでしょうか。

- PostmanでAPIのレスポンスが正しいかテストする(参考)
  - https://qiita.com/Slowhand0309/items/28aba28bdb6b95d09a2f

## Tests タブにJavaScriptを書くやり方


テストしたいAPIのキーを追加し、 **Tests** タブにテスト内容をJavaScriptで記述するというやり方があります。
もちろんこのやり方で理屈上はテストを記述できるのですが、WebAPIをパラメータを変えながら何度も実行したい場合にいちいちパラメータを変更したJavaScriptを書いて順に実行するというのはあまりにも生産性が悪すぎます。


## 同じWebAPIをパラメータを変更しながら何度も実行する

Postmanでは **COLLECTION RUNNER** という仕組みがあり、指定したCollectionのWebAPIをパラメータを変更しながら順に実行することができます。パラメータは JSONまたはCSVが指定でき、 `Data File` のところで `Select File` ボタンを押すことでローカルファイルを指定できます。

JSON形式も試してみましたが、記述内容が冗長になり手作業で必要な量の入力パターンを記述することが難しいと感じました。パラメータを変更しながら同じWebAPIを何度も実行したい場合は **CSV** 形式がおすすめです。

### COLLECTION RUNNERのCSVの内容

ここでいう **CSV** は以下のような意味を持ちます。

設定例:

| Resource | VarB | VarC |
| -------- | ---- | ---- |
| /products  | a    | 1 |
| /users     | b    | 2 |
| /purchases | c    | 3 |

意味:

- 1行目:
  - 各カラムは **Collection変数** 名
- 2行目以降:
  - 各カラムはCollection変数の値

**Collection変数** と何でしょうか。みなさんはPostmanを運用するときにWebAPIの実行環境を切り替えたりするために **Environment変数** を設定していると思います。Collection変数はEnvironment変数と同じで、WebAPIに **プレースホルダ** を書くと実行時に置き換えてくれます。

例えば URI: 

- http://localhost:8080/api{{Resource}}

と指定したWebAPIがCollectionの中に書いてあるとしましょう。
このWebAPIを実行すると、 Resource='/products' の場合は

- http://localhost:8080/api/products

に置き換えられます。これはURL欄だけでなく、HeadersやBodyタブでも同様に展開されます。

Environment変数との違いは変数の寿命で、Collection変数は **COLLECTION RUNNER** 実行時のみ有効で、実行するたびに初期化されます。

例えば

- http://localhost:8080/api{{Resource}}?{{VarB}}={{VarC}}

と設定している場合、 **COLLECTION RUNNER** で上に書いたCSVを指定して実行すると、以下のAPIが順に実行されます。

- http://localhost:8080/api/products?a=1
- http://localhost:8080/api/users?b=2
- http://localhost:8080/api/purchases?c=3

これで 一気にWebAPIを3個実行できるようになりました。もちろん50行書けば50回です。


## WebAPIのバリデーションチェック用の自動テスト例

私の場合、開発現場ではWebAPIのバリデーションチェック、および登録、更新、削除を順に実行した生成破壊テストをPostmanで記述しています。

バリデーションチェック用の場合、各WebAPIについてバリデーションエラーが発生するパターンを網羅的に実行することになります。

例えば WebAPIの **Body** をこのように記述しておくことで、色々なテストをCSVだけで記述できるようになります。

```
{ {{prefix}} {{param}}:{{value}} {{suffix}} }
```

**prefix** にはWebAPIの必須パラメータを固定で入れておきます。
**param** はそのCSVレシピの行で動作確認したいJSONパラメータ。
**value** は入力エラーとなるような入力値を指定します。
**suffix** は通常空欄で良いですが、paramが JSONのサブオブジェクトの場合は `}` などの終端記号をここに書きます。

注意すべきは valueの扱いで、プレースホルダはCSVに書かれているとおりに置き換えられるため、 

```
{ param1:"abc" }
```

などと指定したい場合は、 valueは abc ではなく "abc" と入力する必要があります。つまりCSV上では """abc""" です。

色々と応用が効くと思うので試してみてください。
PythonでFizz Buzzをやってみよう

# ルール
1. 1-100までの数字を用意
2. 3で割り切れたら「Fizz!」と表示する
3. 5で割り切れたら「Buzz!」と表示する
4. 3と5で割り切れたら「Fizz Buzz!」と表示する<br>
上記以外の数字はそのまま表示する

# ソースコード
```python 
# 1. 1-100までの数字を用意
# 2. 3で割り切れたら「Fizz!」と表示する
# 3. 5で割り切れたら「Buzz!」と表示する
# 4. 3と5で割り切れたら「Fizz Buzz!」と表示する
# 上記以外の数字はそのまま表示する

for num in range(1, 101):
    if num % 3 == 0:
        if num % 5 == 0:
            print('Fizz Buzz!')
        else:
            print('Fizz!')
    elif num % 5 == 0:
        print('Buzz!')
    else:
        print(num)
```

# 実行結果
```console
1
2
Fizz!     
4
Buzz!     
Fizz!     
7
8
Fizz!     
Buzz!     
11        
Fizz!     
13        
14        
Fizz Buzz!
16        
17
Fizz!
19
Buzz!
Fizz!
22
23
Fizz!
Buzz!
26
Fizz!
28
29
Fizz Buzz!
31
32
Fizz!
34
Buzz!
Fizz!
37
38
Fizz!
Buzz!
41
Fizz!
43
44
Fizz Buzz!
46
47
Fizz!
49
Buzz!
Fizz!
52
53
Fizz!
Buzz!
56
Fizz!
58
59
Fizz Buzz!
61
62
Fizz!
64
Buzz!
Fizz!
67
68
Fizz!
Buzz!
71
Fizz!
73
74
Fizz Buzz!
76
77
Fizz!
79
Buzz!
Fizz!
82
Buzz!
Fizz!
67
68
Fizz!
Buzz!
71
Fizz!
73
74
Fizz Buzz!
76
77
Fizz!
79
Buzz!
Fizz!
82
83
Fizz!
Buzz!
86
Fizz!
88
89
Fizz Buzz!
91
92
Fizz!
94
Buzz!
Fizz!
97
98
Fizz!
Buzz!
```

最後まで読んでいただきありがとうございました。
また次回お会いしましょう。
PHP　~アウトプット用語集3~

# isset
値が設定されているか確認してくれます。
下記の画像は、値がcolorに設定されていればcolorを
値が設定されていなければNone selectedを返します。
![スクリーンショット 2020-10-06 17.06.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/95a19447-96e8-cd5e-392d-447bf95d31a0.png)
※issetで調べてnullだったら他の値を入れる事はよくあるので違う記述ができます。
下記の画像と上記の画像と同じ処理になります。
？？の部分はnull合体演算子といいます。
![スクリーンショット 2020-10-06 17.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/5cb2e5fe-712f-e75c-990a-2b549db3a306.png)

# GET POST 違い

### GET
情報の取得
情報がURLになる（index/php?name=taro）
安全性が低い
サイズや種類に制限あり
### POST
情報の追加/更新/削除
index.php
安全性がやや高い
サイズや種類に制限なし

# file()関数
ファイル全体を読み込んで配列に格納します。
ちなみに、FILE_IGNORE_NEW_LINES　は
配列の各要素の最後の改行を省略します。
他にも、
### FILE_USE_INCLUDE_PATH
include_path のファイルを探します。
### FILE_SKIP_EMPTY_LINES
空行を読み飛ばします。
![スクリーンショット 2020-10-06 18.52.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/53832181-9bd8-8470-ad18-e06f11d9a954.png)

# fopen()
fopen(“開きたいファイル名”, “オープンモード”)fopen関数とは、ファイルまたはURLをオープンしてくれる関数です。

あるデータからファイルにデータの情報を読み込ませたり、ファイルの内容にデータ情報を書き込みする際など、ファイルを指定して、指定したファイルを開いて(持ってきて)くれます。
![スクリーンショット 2020-10-06 21.50.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663122/e15c8b88-1b5b-4822-c912-c18b86a12640.png)
よく使うDockerコマンドまとめ

```
#コンテナ一覧
docker ps -a

#実行中のコンテナのみ表示させる
docker container ls

#すべてのコンテナを表示させる
docker container ls -a

#コンテナを削除
docker rm <CONTAINER ID>

#イメージ一覧
docker images

#イメージを削除
docker rmi <IMAGE ID>

#イメージの取得
docker pull hoge

#コンテナに接続
docker run -it hoge bin/sh

#コンテナを停止
docker stop <CONTAINER ID>

#コンテナを再起動
docker restart <CONTAINER ID>

#Docker Composeについて
#バックグランドで実行
docker-compose up -d

#サービスを停止
docker-compose stop

#サービスを開始
docker-compose start

#サービスの停止および破棄
docker-compose down

#「--rm」オプション：コンテナが停止したら自動的に削除
docker run --rm openjdk:9 java --version

#「--workdir」オプション：作業ディレクトリを指定
docker run --rm --mount type=bind,src=/home/hoge/docker,dst=/home/test --workdir /home/test openjdk:9 java Hello

#ネットワークについて
#ネットワーク一覧
docker network ls

#ネットワークを作成
docker network create hoge

#作成したネットワークへコンテナを参加させる
docker run --name nginx --network=hoge -d nginx

#ネットワークを確認
docker network inspect hoge

#ネットワークを削除
docker network rm hoge

#Volumeについて
#Volume一覧
docker volume ls

#Volume詳細
docker volume inspect <Volume ID>

#コンテナを更新してイメージへコミット
docker run -t -i hoge /bin/bash  #コンテナに接続
gem install json                 #コンテナ変更
docker commit -m "Added json gem" -a "Kate Smith" \
<Container ID> <image ID>:tag    #変更したコンテナをもとに、imageを作成



```
jQueryを使ってIDに対して個別のIDを設定する方法

備忘録として残しています。

chart.jsで一画面に複数のチャートをおきたい時に使いたいなと思って書きました。

```index.html
<!DOCTYPE html>
<html>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <canvas id="bar-chart-1" data-data-id="1" class="chart"></canvas>
        <canvas id="bar-chart-2" data-data-id="2" class="chart"></canvas>
        <script>
            $(function(){
                $('.chart').each(function(){
                    console.log(document.getElementById('bar-chart-' + $(this).data('data-id')))
                })
            })
            
        </script>

    </body>
</html>
```
【デイトラ】初級ノートDAY5

## ◆悩んだとこ、後から気づいたとこをシェアしていきます。

デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。

復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。
せっかくなので、同じ悩みの方に向けて投稿していきます。

単元を学習した後に読むのが良いと思います。

**わたしも同様に初学者です。内容の正確性を保証することはできません。**
**訂正やより良い情報があればご教授お願いします。**

### ✔この記事で解決できること

- 講義内容と課題の中でわからないことが解決できるかもしれない。
- 調べる時間を短縮できるかもしれない。
- 学習の仕方を効率化できるかもしれない。

## ◆DAY5 ゼロから作る ①

### ✔ VSCode の emmet を設定する

今後の作業効率化のためと忘れてもつまずかないように
emmetの設定をしてみました。

emmetの設定が書かれているjsonファイルを編集する必要があります。

1. VSCodeのウィンドウ左上Code
2. →基本設定
3. →ユーザースニペット
4. →html.json

![初級DAY5スニペット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622998/9bbe8814-efed-6aca-61ab-a0a70bcf6d61.png)

参考サイトからコピーをさせていただくのが良いと思いますが、
私が今使っている設定を載せておきます。

```json
 "html5": {
 "prefix": "!h",
 "body": "<!DOCTYPE html>\n<html lang=\"ja\">\n
  <head>\n
    <meta charset=\"UTF-8\">\n
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n
    <link rel=\"icon\" href=\"./favicon.ico\">\n
    <title>$1</title>\n
    <meta name=\"description\" content=\"\">\n
    <link rel=\"stylesheet\" href=\"./css/reset.css\" type=\"text/css\">\n
    <link rel=\"stylesheet\" href=\"./css/style.css\" type=\"text/css\">\n
  </head>\n
  <body>\n
  \n
    $2\n
  \n
  </body>\n</html>"
		},

```

解説
- !hを入力すると下記の"body":以下が出てきます。
- \nは改行です。\"はダブルクオートです。
- \$1に最初のカーソルが置かれます。入力すべき箇所を意味します。
- tabを押すと入力カーソルが$1から$2に移動します。


デフォルトのemmetから追加したこと
- html タグの lang を ja にした
- description を追加した
- favicon を追加した。

Bootstrapなど、新しいことを学んだ際に追加するようにしています。

参考サイト
https://keywordfinder.jp/blog/seo/favicon/
https://slash-mochi.net/?p=1978

### ✔ viewport について

viewportの詳しい説明がなかったので、調べてみました。

#### pxについて

CSS の px とは画素数ではなく長さの単位だそうです。(CSSピクセルとも言われる。)
画素数だと思ってましたが、画素数がどんどん細かくなっている今の時代は、
モニタによって1つの画素の大きさが違うそうです。

#### webページが表示される仕組み

HTMLファイルが viewport で下書きされ、デバイスに表示される。

この時、viewport の初期幅は一般的なデスクトップ画面である 980px です。
つまり、980px に収まるように下書きされる。
CSS で 980px を超えるように記述されたものははみ出てスクロールが必要になります。

次に、下書きがデバイスのブラウザに合わせて拡大もしくは縮小されて表示される。
具体的には、980px の下書きが、360px のスマホに縮小されて表示されます。
レイアウトがHTMLファイル通りだが、とても小さいwebページの出来上がり。

これを避けるために、width=device-width で、
下書きをする viewportの横幅をデバイスの画面と同じにします。 
下書きの幅と同じ画面に表示してくれるので、
下書き後の拡大縮小は起こらないということのようです。

ちなみに、initial-scale はwebページ表示時に何倍に拡大するかという設定です。
下書きとデバイスの幅が一致しているなら1を設定すればよいのです。

参考サイト  
https://www.youtube.com/watch?v=xdUjlpHRX0U

### ✔ reset.css の意味

CSSには、適用される優先順位があります。
最も高い優先度を持っているのが、user agentというスタイルシートです。

私達が記述した CSS の前に user agent という  
ブラウザが設定している CSSのスタイルシートが適用されます。
このスタイルはブラウザごとに異なっているため、
想定通りの表示がされるように、
user agentのスタイルシートを
reset.css でを消します。  

注意
まずはuser agentを消してからstyle.cssを読み込ませます。

```css
<link rel="stylesheet" href="./css/reset.css" type="text/css">
<link rel="stylesheet" href="./css/style.css" type="text/css">
```

参考サイト
https://www.youtube.com/watch?v=aNnauB_PY3I

### ✔ font-size font-weight

親要素に指定しても子要素に反映されない。

最初の講義で、HTMLを親子にまとめて記述する理由の1つとして
親要素に指定したCSSが子要素に反映されるからと言っていましたが、
例外であるこれのルールについて説明している教材が少ないです。

講義ではなんとなく流してしまい、いざコーディングの時に気づきました。![初級DAY5スニペット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622998/e37c9db0-9f25-a4cc-4344-92e9c81af177.png)
XLPagerTabStripが使われている画面でスワイプバックを使いたい

 
### 問題
NavigationControllerで遷移した先の画面がXLPagerStripを使用していた場合、配置されてるcontainerView(UIScrollView)に引っ張られて
スワイプバック(`Interactive Pop Gesture`)が効かなくなってしまう。

### 解決策
以下のコードをviewWillAppearに追加する。

containerViewのGestureはNavigationControllerのGestureが失敗した時に実行されるようにする？という感じ。

```swift
if let naviVc = self.navigationController {
    self.containerView.panGestureRecognizer.require(toFail: naviVc.interactivePopGestureRecognizer!)
}
```


### 参考サイト
* [UIScrollView swipe gesture conflicts with right swipe back - Programmer Sought](https://www.programmersought.com/article/9903753602/)
* [require(toFail:) | Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uigesturerecognizer/1624203-require)
Cora Z7 > Vivado用board files (Vivado v2019.1にて使用)

```txt:動作環境
CORA Z7
Windows 10 Pro v1909
Vivado v2019.1
```

### CORA Z7

- [ＣＯＲＡ　Ｚ７　Ｚｙｎｑ－７０００評価ボード（Ｚ７－０７Ｓ）](https://akizukidenshi.com/catalog/g/gM-13489/)

### Vivadoでのボードファイル

Vivadoにて「`XC7Z007S-1CLG400`」と指定をしてbitstreamを作成したが、Program FPGAを実行するときに「対応するボードではありません」というエラーになった。

Digilentの情報を探したが、Vivado用のboard fileが見つからなかった。

下記にあった。

- [Installing Vivado, Xilinx SDK, and Digilent Board Files](https://reference.digilentinc.com/vivado/installing-vivado/start)

「3. Installing Digilent Board Files」の「 Download the archive of the vivado-boards Github repository and extract it. 」のリンクから取得できるvivado-boards-master.zipに関連ファイルがある。

`vivado-boards-master\new\board_files`に`cora-z7-07s`フォルダがある。
これをVivadoのフォルダにコピーすればCORA Z7としてボード選択できる。

(Vivadoをインストールしたフォルダ以下の`Vivado\2019.1\data\boards\board_files`フォルダ以下に置く）


### 関連

- [Digilent Documentation Reference Programmable Logic Cora Z7](https://reference.digilentinc.com/reference/programmable-logic/cora-z7/start)
(javascript) データ型と参照型

#はじめに
今回は、Javascriptの"超基本"
<strong>データ型と参照型</strong> について記録します。

過去に4点ブジェクトについて、記事を投稿しました。

・<a href="https://qiita.com/Tateishi0819/items/10168748360409f38d82" terget="blank">(Javascript) オブジェクト指向 と オブジェクト&配列 の違い</a>
・<a href="https://qiita.com/Tateishi0819/items/bf2f340941b7a10a0bfa" terget="blank">(Javascript) インスタンス化 と コンストラクター</a>
・<a href="https://qiita.com/Tateishi0819/items/00b5adde47a40e3bd1a7" target="blank">(Javascript) 静的プロパティと静的メソッド</a>
・<a href="https://qiita.com/Tateishi0819/items/fb64ecfb87a387989fad" target="blank">(Javascript) 組み込みオブジェクトとnew演算子によるインスタンス化</a>

#データ型とは
javascriptの<strong>データの種類</strong>のことです。
主なデータは以下↓になります。
>
abc → <strong>文字列</strong>
123 → <strong>数値</strong>
true(真)false(偽) → <strong>論理値</strong>

##データ型への意識
このデータ型への意識は、javascriptは若干緩めです。
データ型を強く意識する物は JavaやC# があります。
しかし、javascriptが緩めだからと言って意識しなくていい訳ではないのでご注意ください。
厳密な<strong>演算・比較</strong>を行う場合は、データ型の概念を意識しないといけません。

#javascriptの主な種類
javascriptのデータ型には <strong>基本型</strong> と <strong>参照型</strong> の二種類があります。

##基本型

|オブジェクト  |概要  |バージョン  |
|---|---|---|
|数値型(number)  |数値  |  |
|文字列(string)  |シングル・ダブルクォートで囲まれた文字の集合  | |
|真偽値型(boolean)  |true(真)false(偽)  |  |
|シンボル型(symbol)  |シンボル  | ES2015 |
|特殊型(null/undefined)  |値が空か未定義  |  |

##参照型

|オブジェクト  |概要  |バージョン  |
|---|---|---|
|配列(array)  |データの集合(インデックス番号で参照可)  |  |
|オブジェクト(object)  |データの集合(名前でアクセス可)  | |
|関数(function)  |一連の処理の集合  |  |

##基本型と参照型の違い
この2つの違いは <strong>値を変数に格納する方法</strong> になります。

><strong>基本型</strong>
number・string・boolean・symbol の様な基本型は変数に<strong>値がそのまま格納されます。</strong>

><strong>参照型</strong>
array・object・functionの様な参照型は <strong>参照値を格納します。</strong>
※参照値→値を実際格納しているメモリ上のアドレス

基本型・参照型 によりスクリプトの挙動が異なるのでご注意ください!

#あとがき
以上が、<strong>基本型と参照型</strong> でした。
補足ですが、基本型はnew演算子によるインスタンス化が不要だったりします。

いかがでしたか？
役に立っていれば嬉しいです。
では!

#Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

<a href="https://twitter.com/0819_tateishi" target="blank">Twitter</a>
<a href="https://ayu-portfolio.herokuapp.com/" target="blank">Portfolio</a>
<a href="https://github.com/ayu0819" target="blank">Github</a>
<a href="https://note.com/ayu0819" target="blank">Note</a>
PHPをXdebugでデバッグする過程（MAMP）

#開発環境
macOS Cataline 10.15.7
PHP7.4.2
xdebug2.9.8
mamp5.7

#PHP Debugをインストール
vscodeでPHP Debugというプラグインをインストールします。
![スクリーンショット 2020-10-06 19.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702435/e6473738-c307-d5d1-1353-d7b7d4aeef3f.png)

#Xdebugをインストール
上記でPHP Debugをインストール後、下にスクロールすると
```XDebug installation wizard```というリンクがあるのでそこに飛びます。
![スクリーンショット 2020-10-06 21.14.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702435/c46eb970-ec67-102a-56d6-c710b4bd41f9.png)

このリンクを残したままで、次はphpinfoを確認します。
mampでOpen WebStart pageを開き、ヘッダーのTOOLSからPHPINFOを表示します。
![スクリーンショット 2020-10-06 21.13.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702435/ccbe0a2c-b512-ae66-bcd3-0555ce33eeb2.png)

下記のように表示されるので、```⌘ + a```, ```⌘ + c```で全コピーし、先程のリンクに戻り貼り付け、Analyse my phpinfo() outputを押します。
![スクリーンショット 2020-10-06 21.12.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702435/53ee7892-83c9-4441-7ff4-31829ed294b2.png)

![スクリーンショット 2020-10-06 21.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702435/2126a9e4-b051-3c1d-ccdb-c8e1c74b1a29.png)

スクロールし、INSTRUCTIONSの手順に沿って進めていきます。
![スクリーンショット 2020-10-06 21.11.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702435/36d56572-afcd-7255-92f5-883558b5f8ac.png)

1.　xdebug-2.×.×.tgzをダウンロードします。
2.　php拡張機能をコンパイルするための前提条件をインストールします。

```
brew install php && brew install autoconf
```

3.　ダウンロードしたパッケージを解凍します。

```
tar -xvzf xdebug-2.×.×.tgz
```

4.　xdebug-2.×.×.tgzディレクトリに移動します。

```
cd xdebug-2.×.×.tgz
```

5.　拡張拡張モジュールをビルドし、下記の結果を確認します。

```
phpize
```

```
Configuring for:
...
Zend Module Api No:      20190902
Zend Extension Api No:   320190902
```

6.　Makefileファイルを作成します。

```
./configure
```

7.　Makefileを基にソースコードをコンパイルします。

```
make
```

8.　xdebug.soファイルをコピーします。　

```
cp modules/xdebug.so /Applications/MAMP/bin/php/php7.×.×/lib/php/extensions/no-debug-non-zts-20190902
```

9.　php.iniを編集します。
/Applications/MAMP/bin/php/php7.4.2/conf/php.iniを開くと、下記がコメントアウトしているので外します。

```
zend_extension = /Applications/MAMP/bin/php/php7.4.2/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so
```

10.最後にWebサーバーを再起動します。

#最後に
mampとxamppがごっちゃになって、xamppでphpinfoを参照していたので、debianやらapt-getやらでfinkを導入したりと無駄に時間が掛かってしまった💦そこも注意しないとですね。

mampかxamppかどちらを選ぶか悩んでいる方は、macOSであればmampが相性が良いらしいです。
3ds Maxをインストールする際に"Unhandled unknown exception; terminating the application"とエラーが出た時の対処

#はじめに
AUTODESK の 3ds Maxをインストールしようとした際にエラーが出たので、その時の対処を備忘録として書いておきます。

#環境
- windows10 64bit版

#エラーの内容
![スクリーンショット 2020-10-06 211558.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379446/958ec259-3d7f-72af-200b-afd0d180159f.png)
ここでダウンロードしたインストーラーを起動すると
![スクリーンショット 2020-10-06 211726.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379446/548a27ce-5238-197f-b4ae-19aaee0155a2.png)

上のようなエラーがでて止まる。

#対処法
![スクリーンショット 2020-10-06 211935.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379446/d9ef15e8-df62-e3ac-2e16-076cc4b1aae6.png)
右の矢印をクリックし、ダウンロードを選択する。この際にAdblockなどでウインドウのポップアップを阻止するとうまくいかないので注意する。(私はこの部分でつまずいていました...)
ここで4つのファイルがダウンロードされていれば大丈夫です。

あとはダウンロードしたファイルの一つを開き、インストーラに従っていけばいけました。

#終わりに
大体のエラーってしょうもないことが原因で起こるということを身に染みて感じましたね...
【初心者でもわかる】jQueryを使って、aタグを含むdivをクリックしてもリンクさせる方法（biggerlink）

# どうも7noteです。aタグのクリックできる範囲を広げる方法について。

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/biggerlink/
【Go + Gin】Docker環境を構築してみた

## はじめに
GoとGinを使用する際のDokcerを用いた開発環境を構築しました。docker-composeを使用しています。
使用するDBはmysqlで、ORマッパーはGormの使用を想定しています。

## TL;DR
下記のディレクトリ構成にしています。
Dockerfile、docker-compose.ymlにしています。

**ディレクトリ構成**

```
├── docker
│   ├── docker.mysql.env
│   └── go
│       └── Dockerfile
├── docker-compose.yml
└── src
    └── app
```



**docker/go/Dockerfile**

```docker

FROM golang:1.10.3-alpine3.8

COPY src/app /go/src/app/

WORKDIR /go/src/app/

RUN apk update \
  && apk add --no-cache git \
  && go get github.com/gin-gonic/gin \
  && go get github.com/jinzhu/gorm \
  && go get github.com/go-sql-driver/mysql

EXPOSE 8080
```

**docker/docker.mysql.env**

```docker
MYSQL_ROOT_PASSWORD=root
MYSQL_DATABASE=go-gin-app
MYSQL_USER=root
MYSQL_PASSWORD=password
```

**docker-compose.yml**

```yaml


services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: ./docker/go/Dockerfile
    ports:
      - 3000:3000
    links:
      - database
    tty:
      true
    volumes:
      - ./src/app:/go/src/app

  database:
    restart: always
    image: mysql:5.7
    ports:
      - 3308:3306
    volumes:
      - mysql-datavolume:/var/lib/mysql
    env_file:
      - docker/docker.mysql.env

volumes:
  mysql-datavolume:
    driver: local
```

## 解説
### Dockerfile

今回はGoのDockerfileのみを作成し、mysqlはベースイメージを使用するようにdocker-compose.ymlで指定します。

```dockerfile

FROM golang:1.10.3-alpine3.8

COPY src/app /go/src/app/

WORKDIR /go/src/app/

RUN apk update \
  && apk add --no-cache git \
  && go get github.com/gin-gonic/gin \
  && go get github.com/jinzhu/gorm \
  && go get github.com/go-sql-driver/mysql

EXPOSE 8080
```

`src/app`直下のファイルをボリュームに指定しています。

また、aliphineのベースイメージを指定しているので、apkでGin、Gorm関連のパッケージをインストールしています。

### docker-compose.yml

```yaml
services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: ./docker/go/Dockerfile
    ports:
      - 3000:3000
    links:
      - database
    tty:
      true
    volumes:
      - ./src/app:/go/src/app

  database:
    restart: always
    image: mysql:5.7
    ports:
      - 3307:3306
    volumes:
      - mysql-datavolume:/var/lib/mysql
    env_file:
      - docker/docker.mysql.env

volumes:
  mysql-datavolume:
    driver: local
```

mysqlのenvファイルを別で作成したので、`env_file`で指定します。
`ポート 3306`はローカルのmysqlでよく使用するので、`3307`を指定しています。


## 動作確認

`src/app`直下にmain.goを作成し、おなじみのhello worldを出力するようにコードを記述します。

```go
package main

import "fmt"

func main() {
        fmt.Println("Hello, world")
}
```

そして、下記コマンドでhello worldを出力させます。

```
docker-compose exec app go run main.go
```

hello worldが出力されたでしょうか。

### 終わりに
意外と簡単にGo+Ginの環境構築を行うことができました。

やはりDockerを使用すると環境構築が楽になりますね、！
Laravel taskscheduleでClass 'ZipArchive' not foundとエラー出たがPHPの指定を間違えていたのが原因だった

初Qiitaです。足りない、誤りがある箇所についてはコメントから指摘いただけますと嬉しいです。

環境：MacOS Catalina, PHP 7.4.11, Laravel 7.28.3

■やりたかったこと
 Laravelのタスクスケジュールの設定を行い自動実行できるようにしたかった。

■問題
```php artisan schedule:run```をすると問題なく動くが、スケジュールを実行するとZipArchiveが見つからないと以下のエラーが出てしまう。
`local.ERROR: Class 'ZipArchive' not found {"exception":"[object] (Error(code: 0): Class 'ZipArchive'`

■解決方法
使用したいphpの場所を
```which php```
で取得してcrontabで明示的に以下のような感じで書く。

```* * * * * cd /var/www/ && /usr/bin/php7 /var/www/artisan schedule:run >> /var/www/storage/logs/cron.log 2>&1```

こちらの記事を参照すると分かりやすいです。
https://stackoverrun.com/ja/q/12644861

■問題の原因
Localで使用しているbrewでインストールしたphpとcronが使用するPHPは違うものらしい。（ここが曖昧なので詳しい方教えていただけると嬉しいです。）
そのため ```php -m``` をしてlocalのphpにzipがインストールされていることを確認しても、cronが使用するphpにはzipがインストールされていないため`Class 'ZipArchive' not found`となってしまった。

以下余談です。
当該エラーでググると多くの記事で「zipをインストールしろ。そしてモジュールを確認しろ」と書いてあり、それはやったのに何故エラーが出るのか。とずっと悩み続けてしまいました。

このエラーで相当な時間を費やして最終的に会社の先輩に解決してもらったのですが、私のようにcronに全然詳しくない・初めて使う。という場合にはいきなり全部組み込むんじゃなくて
1. echoを試す
2. php -vを試す
3. php artisanを試す
みたいに段階的に発展させると大きなつまずきが減りますよ。とのことでした。

精進します。
numpy の min, max で TypeError になったときの対処方法

```php
x_min, x_max = X[:, 0].min - 0.5, X[:, 0].max + 0.5
```
---------------------------------------------------------------------------
TypeError Traceback (most recent call last)
<ipython-input-65-7991d21e82ba> in <module>()
----> 1 x_min, x_max = X[:, 0].min - 0.5, X[:, 0].max + 0.5

TypeError: unsupported operand type(s) for -: 'builtin_function_or_method' and 'float'

```php
x_min, x_max = X[:, 0].min() - 0.5, X[:, 0].max() + 0.5
```
エラーが消えました。
FutureWarning

```
svc_poly = svm.SVC(kernel='poly', degree=3, C = C); svc_poly.fit(X, y)
```
/opt/conda/lib/python3.6/site-packages/sklearn/svm/base.py:196: FutureWarning: The default value of gamma will change from 'auto' to 'scale' in version 0.22 to account better for unscaled features. Set gamma explicitly to 'auto' or 'scale' to avoid this warning.  "avoid this warning.", FutureWarning)

```
svc_poly = svm.SVC(gamma="scale", kernel='poly', degree=3, C = C); svc_poly.fit(X, y)
```
worningが消えました。
AWS 認定 セキュリティ – 専門知識(SCS)に合格しました。

[AWS認定 ソリューションアーキテクト プロフェッショナル（SAP-C01)](https://qiita.com/sicksixrock66/items/71e8f350781f56297c34)
に合格したので、
AWS 認定 セキュリティ – 専門知識(SCS)を受験し合格しました。

#合格時のAWS歴
業務歴1年程度

#点数
 816点（思ったより点数がとれませんでした。。）

#難易度
AWS SAPと比べると問題文も短く、答えも内容がわかっていれば明確に選べる問題も多かった気がします。
SAAよりは難しいかもしれませんがSAPよりは確実に簡単です。試験時間も見直し含め1時間程度で私は解けました。
※試験ガイドに記載のサービス内容について実際に業務で触れていたのは大きいかもしれません。

#勉強方法
今回は書籍の[要点整理から攻略する『AWS認定 セキュリティ-専門知識』](https://www.amazon.co.jp/%E8%A6%81%E7%82%B9%E6%95%B4%E7%90%86%E3%81%8B%E3%82%89%E6%94%BB%E7%95%A5%E3%81%99%E3%82%8B%E3%80%8EAWS%E8%AA%8D%E5%AE%9A-%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3-%E5%B0%82%E9%96%80%E7%9F%A5%E8%AD%98%E3%80%8F-Compass-Books%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-NRI%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%A0%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE-ebook/dp/B08DCLRHC7/ref=sr_1_12?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=AWS&qid=1601984103&sr=8-12)のみで試験勉強を実施しました。
※上記でまとまっているサービスのblackbeltと理解が怪しい分野のよくある質問を熟読しました。

#まとめ
当たり前ですが、実務で触れている範囲を勉強する場合学習効率が良いです。（その割には点数取れませんでしたので復習したいと思います。。）

実務で触れられない場合でも、アソシエイト以上の資格を受験する場合はAWSのチュートリアル程度は自分の環境で触ってみることをお勧めします。
Ruby 3.0 で x ** 2 が速くなった件

# x ** 2 は遅い

変数 `x` に Integer とか Float とかの数値が入っているとする。
`x` の 2 乗の計算は，

```rb
x ** 2
```

と書けるが，もしできるだけ高速に計算させたいなら

```rb
x * x
```

と書いたほうがいい。
後者のほうが断然速い。
というか前者はめちゃんこ遅い。

## ベンチマークテスト

まず

```shell
gem install benchmark_driver
```

して [benchmark_driver](https://github.com/benchmark-driver/benchmark-driver) をインストールしておき，

```yaml:square.yaml
prelude: |
  x = 3.0
benchmark:
  - "x ** 2"
  - "x * x"
```

という YAML ファイルを用意して，

```shell
benchmark-driver square.yaml
```

とやると比較できる。

`ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-darwin17]` で計測してみたところ，結果は以下のとおり。

```
     x * x:  92940175.9 i/s 
    x ** 2:  15605744.0 i/s - 5.96x  slower
```

わお！

まあ，遅いったって，毎秒 1500 万回実行できるわけだから，この遅さが問題になるのは大量の数値計算をやる場合に限られるわけだけれど[^sp]。

[^sp]: プログラムを高速化したいとき，ベンチマークテストをやってきちんと数字を追うことが大事なのと，プログラム全体の実行時間を左右しない箇所の最適化に血道を上げても無意味，ということは肝に銘じておきたい。

# Ruby 3.0 で改善

Float に対する `** 2` を特別扱いして速く計算するような変更が入った。
Ruby 3.0.0-preview1 で確認できる。

rbenv で Ruby を入れている方は benchmark_driver で簡単にテストできる。
さきほどと同じ YAML ファイルに対して，こんどは

```shell
benchmark-driver square.yaml --rbenv "2.7.2;3.0.0-preview1"
```

とする。
結果は以下のとおり。

```
                       x ** 2
  3.0.0-preview1:  37039739.4 i/s 
           2.7.2:  16010580.7 i/s - 2.31x  slower

                        x * x
           2.7.2:  91881050.6 i/s 
  3.0.0-preview1:  88138626.5 i/s - 1.04x  slower
```

`x * x` で，むしろ `3.0.0-preview1` のほうが遅いが，これは誤差の範囲。
`x ** 2` のほうは，2.3 倍速になった。

# 感想

まあそれでも `x * x` のほうが `x ** 2` より倍以上速いわけだけど，それでも重要な進化だと思う。
世の中に `x ** 2` のようなコードはたくさんあって，それらが何もしなくても速くなってくれるわけだから。

場合によっては速度を犠牲にしてあえて `** 2` を使いたいときもある。
それは 2 乗したいものが変数に入っていなくて，式のとき。
まあ，こういうイメージかな：

```rb
items.map.with_index{ |item, i| (a * item.value + b[i]) ** 2 }
```

これを

```rb
items.map.with_index{ |item, i| (a * item.value + b[i]) * (a * item.value + b[i]) }
```

などとすると，冗長なばかりか，おそらくかえって速度を落とすことになる。
そこで，いったん式の値を変数に入れて

```rb
items.map.with_index{ |item, i| x = a * item.value + b[i]; x * x }
```

と書くことになる。
速度が最優先ならこう書くところだが，「速度もそこそこ求めるけど簡潔さも欲しい」といった場合は `** 2` を使うこともあるだろう。
wsl上でheadless chrome を起動すると Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory 

## WSL1上でheadless chrome をインストール

WSLからchromeの操作は、Windows上のChromeをSelenium経由で操作することも可能なのですが、headless chrome であれば、普通にUbuntuにインストールするのと同様にインストールできます。

ただし、手なりでインストールすると以下のような、エラーメッセージがでます。

```
Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
```

このエラーメッセージが出ても、それなりに画面は開けてはいるようなのですが、気持ち悪いと。なんちゃらソケットがないってメッセージのときには、何かしらのデーモンが起動してないってことなので、この場合はdbusというデーモンがきどうしてないのねってこと。


そこで、dbusを起動してやる。

```
$  /etc/init.d/dbus start
 * Starting system message bus dbus                  [ OK ]
 ```

そうすると、先のエラーメッセージはでません。

ただし、他でよくあるように、WSL1上でのchromeではスクリーンショットをとる段階でエラーが頻発しているようです。

シンプルなサイトではスクリーンショットがとれることを確認しています。

```
google-chrome --enable-logging --headless --disable-gpu --no-sandbox --screenshot http://ifconfig.io
```

### 結果

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53489/6d5c0944-b2ff-082e-b0a5-d5265bd659ca.png)

ただ、挙動は不審で起動してもレスポンスが帰って来ないこともあります。
SapperもTypeScriptを公式サポートしたので試してみる！

# はじめに
Svelteに引き続き、SvelteのフレームワークであるSapperもTypeScriptを公式サポートしたので試してみたいと思います！
`Sapper 0.28`でTypeScriptをサポートしたようです。

SvelteのTypeScript対応記事はこちら
[SvelteがTypeScriptを公式サポートしたので試してみる！](https://qiita.com/oekazuma/items/387b856ac67ab05d71e9)

# Sapperとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/13cd5352-e42c-ec34-3b99-33eb6ec073e3.png)

[Sapper公式サイト](https://sapper.svelte.dev/)

- ReactでいうNext、VueでいうNuxtにあたるSvelteのフレームワーク
- SSRをサポートしていたり、ルーティングをサポートしてるのですぐに開発ができる

# VSCodeの拡張機能をインストールする
VSCodeを使って開発している方は、公式の拡張機能をインストールすることでTypeScriptの恩恵をより受けられるのでインストールしましょう！
[Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)

# Sapperプロジェクトを作成し、TypeScriptの設定をする

```
# テンプレートからsapperプロジェクトを作成
npx degit "sveltejs/sapper-template#rollup" my-app

# 作成したプロジェクトのディレクトリに移動
cd my-app

# TypeScriptの設定をするスクリプトを実行する
node scripts/setupTypeScript.js

# パッケージをインストール
npm install

# 開発サーバーを起動
npm run dev
```
これでSapper+TypeScriptで開発できる準備が整いました。

# 実際書いてみる

`components`フォルダ配下に`Header.svelte`を作成

```html:Header.svelte
<script lang="ts">
  export let userName: string
</script>

<header>
  <h1>Hello {userName}</h1>
</header> 
```

`_layout.svelte`にHeaderコンポーネントをimportして、型が効いているか試す為にNumberを渡す

```html:_layout.svelte
<script lang="ts">
	import Nav from '../components/Nav.svelte';
	import Header from '../components/Header.svelte';

	export let segment: string;
</script>

<style>
	main {
		position: relative;
		max-width: 56em;
		background-color: white;
		padding: 2em;
		margin: 0 auto;
		box-sizing: border-box;
	}
</style>

<Header userName={24} /> 

<Nav {segment} />

<main>
	<slot></slot>
</main>

```

![スクリーンショット 2020-10-06 20.30.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/f23a493e-bf78-4317-7b2d-11ce313cf2ec.png)

VSCode上でエラーが確認できました！

# コマンドラインで確認する

```shell
$ npx svelte-check

Loading svelte-check in workspace: sapper-typescript
Getting Svelte diagnostics...
====================================

sapper-typescript/src/routes/_layout.svelte:19:9
Error: Type 'number' is not assignable to type 'string'. (ts)

<Header userName={24}/> 


====================================
svelte-check found 1 error, 0 warnings and 0 hints
```

コマンドラインでもエラーが確認できました!

# さいごに
SapperでもTypeScriptが公式サポートしたので更に開発しやすくなりましたね！

では、良いSvelte,Sapperライフを〜:triangular_flag_on_post:

## 参考
[TypeScript support](https://sapper.svelte.dev/docs#TypeScript_support)
ThinkPadx280にWindowsServerをUSBからブートしてインストールするとき

## rufusでやく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293481/248d300c-92b5-2799-dd8a-0387ebe08893.png)

## 本体のSecurebootを無効化する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293481/ae71cea5-9279-f8e6-3d4b-019347202b03.png)