OmniAICreator/Qiita-1.07M huggingface dataset:
詰まったところと解決方法をまとめて、 自分のqiitaを作る

8.詰まったところと解決方法をまとめて自分のQiitaを作る


備忘録をメモに残す
10件以上


- [ ] 1. UICollectionViewCellの幅をLabelの文字数に合わせる方法
- [ ] 2. UICollectionView  画面の回転に合わせてセルのサイズを変更
- [ ] 3. UITableViewCellのLabelをAutoLayoutで位置を決めたい
- [ ] 4. IDFA対応 
- [ ] 5. カスタムセル上のボタンを押して画面遷移をしたい
- [ ] 6. XIB エラー
- [ ] 7.
- [ ] 8.
- [ ] 9.
- [ ] 10.
HTTPとは何か？

#HTTPってなに？
httphは(Hypertext Transfer Protocol)の略で、情報をやりとりするための取り決めのことです。
もっとイメージしやすくいうと、昔の人たちは敵が襲来したときに狼煙を上げて遠くの仲間に敵が来たことを知らせていました。正しく敵が来た時は狼煙を上げるというルール決めをしていたからわかることですよね！
それがインターネットの世界でも行われてるわけなんです！
HTTPの仕組みはクライアントがサーバーにファイルを要求することをリクエスト、サーバーがクライアントに返答することをレスポンスといいます！
このように２者間でのやりとりによってwebページを見ることができます！

 #ステートレスとステートフル

##ステートレス
サーバーがクライアントの状態を保持しない、ということ。
サーバーでクライアントの情報を保持しないことでサーバーの負荷を軽減することもできる！

####ステートレスのデメリット
サーバーでクライアントの情報を管理しないため、毎回同じリクエストを送る必要があるため無駄が生じます。

##ステートフル
ステートレスとは逆でクライアントの情報をサーバーで管理する仕組みのこと。
ex)Cookieなど

####ステートフルのデメリット
サーバーで情報を保持するので、人が増えると負荷が多くなる。

**いつも通ってる美容室で前回と一緒でと言えるのが「ステートフル」
毎回同じ説明をするのが「ステートレス」です！**


#HTTPメソッドについて（よく使う4つを紹介）
###GETメソッド
情報を取得するときに使用するメソッド

###POSTメソッド
ユーザーの新規登録やブログや記事を投稿するときなどに使用する

###PUTメソッド
データの更新時に使用するメソッド
*POSTとPUTの違いについて

【PODTの場合】
`http://api.example.com/v1/friends`

POSTを使用すると`http://api.example.com/v1/friends/123`
のようにfirendsの後ろにユーザーIDが登録されます。
これがPOSTの挙動です！

【PUTの場合】
`http://api.example.com/v1/friends/123`で指定したそのものを変更するイメージです！

###DELETEメソッド
リソースを削除するメソッドです


以上が主に使用するメソッドになります。

#ステータスコードについて
サーバーからデータが返ってくるときにデータが返ってきてるのかを見き分ける方法として
ステータスコードがあります
①1xx→リクエストが処理中ということ
②2xx→リクエスト処理が正常に行われたということ
③3xx→リクエストを完了させるには追加で処理が必要であること
④4xx→HTTPが正常に処理されてないということ
⑤5xx→サーバー側で何かしらの処理ができてないとき

ざっくりステータスコードの違いを見ていきました！



#参考記事
[押さえておきたいWeb知識](https://www.web-knowledge-info.com/wp/web_basic_knowledge4/)
[Web白熱教室](https://tsuyopon.xyz/2019/01/31/understand-4-http-methods/)
[「HTTPとは何か？」を完全に理解する〜分かったフリの脱却〜
](https://qiita.com/growsic/items/7b0b461303fd1e8995f2)
技術力があるエンジニアが書いたコードを読む、 書き方を真似る

5.技術力があるエンジニアが書いたコードを読む、書き方を真似る


取り入れようと思った書き方をメモに残す
5件以上


- [ ] 1. 画面の回転制御
- [ ] 2. 1ViewController1Storyboard
- [ ] 3. 未読アイコン
- [ ] 4. トルツメ 制約の優先度を利用する方法 
- [ ] 5. UITextView 入力中にスクロール
- [ ] 6. MARK TODO FIXME
技術力があるエンジニアに相談する

3.技術力があるエンジニアに相談する

実装イメージが湧かない場合や、仕様の実現方法が分からない場合に、技術力があるエンジニアに相談をする。

相談内容をメモに残す
~~10件以上~~ 3件以上


- [ ] 1. カルーセル CollectionVivewの選択により、PageViewを切り替える
- [ ] 2. UICollectionViewカルーセルがスクロールできない
- [ ] 3. トルツメ StackViewを利用する方法
遅延ロードさせてWebアプリを高速化する

#遅延ロードとは
基本的にwebアプリは表示するデータを読み込んでからページを表示します。
しかしそれだと重いデータを取得・表示する場合、ページの表示速度が落ちて重たい動作になります。
なので先に軽い部分だけを読み込みそのページに移動してから重いデータを読み込むことで
すべてを表示するまでの時間は変わらない（むしろ少し落ちる）がページの移動速度を大幅に上げることができます。
体感上はかなりサクサクした動作になります。

↓ツイッターの遅延ロード
![スクリーンショット 2021-05-10 192747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/8197e1ec-d086-b08d-7b45-197e323945a8.png)

#実装

```:gemfile
gem 'render_async'
```
を書きbundle

次にrenderを書き直します。

変更前：

```erb:index.html
<%= render "data", posts:@posts %>
```

これを

```erb:index.html
<%= render_async data_path %>
or
<%= render_async data_user_path(@user) %>
```

このようにする。

次にルーティング

```ruby:routes
get "data", to: "posts#data", as: "data"
#↓パラメーターが必要な場合
get "data_user/:id", to: "posts#data_user", as: "data"
```

```ruby:controller
  def index
    #@posts = Post.all
  end

  def data
   @posts = Post.all
   render partial: "data", locals: {posts:@posts}
  end

  def data_user
    @user = User.find_by(name: params[:id])
    @posts = @user.posts.all
    
    render partial: "data_user", locals: {posts:@posts}
  end
```

最後はレイアウトに

```erb:application.html.erb
<%= content_for :render_async %>
```

を追加。
これだけで遅延ロードが完成します。
![スクリーンショット 2021-05-10 192747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/e7e53d4b-7114-b09c-cf2e-a54ec754d08c.png)


#turbolinksを使用している場合
このままだと時々表示されない場合があります。

```
<%= render_async data_path, html_options: { 'data-turbolinks-track': 'reload' } %>
```
html_options: { 'data-turbolinks-track': 'reload' }を追加して
config/initializersにrender_async.rbを作りましょう

```render_async.rb
RenderAsync.configure do |config|
  config.turbolinks = true # Enable this option if you are using Turbolinks 5+
end
```

#jqueyを使う
kaminariやjscrollで無限スクロールなどを実装している場合、これをしないと動きません。

```config/initializers/render_async.rb
RenderAsync.configure do |config|
  config.jquery = true
end
```

# まとめ
遅延ロードって大きなサービスだと結構使われているのに日本語の情報が少なくて困ったので書きました。
体感上の動作速度がかなり変わるのでぜひやってみてください。

###宣伝
![453789.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/99c8f13e-2fe8-0d28-1117-338115e937a0.png)

https://ammot.net/

AmmotというSNSを作りました。
文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能な自由なSNSです。
マークダウンにも対応しているので皆さん大好きなソースコードもきれいに載せれます。
ぜひ使ってみてください。

僕のツイッターアカ
https://twitter.com/yamada1531
基本を意識してコーディンングをする

1.基本を意識してコーディンングをする


書籍を参考にする


調べた内容をメモに残す
~~3件以上~~ 10件以上


- [ ] 1. クロージャ  
関数閉包 関数のスコープにある変数を自分が定義された環境に閉じ込めるためのデータ構造

定義方法
{ (引数名: 型) -> 戻り値の型 in
// クロージャの実行時に実行される文を書く
// 必要に応じてreturn文で戻り値を返却する
}


- [ ] 2. オプショナル型 バインディング  
オプショナル型 Optional<Wrapped>型 
値があるか空のいずれかを表す型

オプショナルバインディング
if-let文 
値の有無による分岐
if let 定数名 = Optional<Wrapped>型の値 {
Wrapped型の値が存在する場合に実行される文
} else {
存在しない場合
}


- [ ] 3. enum 全てのcaseを配列で取得  
CaseIterableプロトコル (要素列挙のプロトコル)

enum 列挙型名: String, CaseIterable {
case ケース名 
var text: String {
switch self {
case .ケース名
return "米国"
}
}

取得する
let zzz = xxx.allCases.map { $0.rawValue }
// テキストを取得
xxx(rawValue: zzw[要素番号]?.text


- [ ] 4. for文 for in where  

正しい
for in where {}

誤り
for in {
if なんとか {
}
}
この書き方だとエラーが発生する


- [ ] 5. 配列 ソート
xxx.sort(by: {$0.name < $1.name}) 昇順での並び替え
xxx.sort(by: {$0.name > $1.name}) 降順での並び替え
sort(by:) 配列の中身を変更する
sorted(by:) 配列の中身を変更しないで、ソートした新しい配列を返す


- [ ] 6. タプル
順序付けされた値の集合体のこと
異なる型の値をひとつの変数、定数で扱えるようになる。ただし、値の追加や削除、または繰り返し処理はできない。関数呼び出しの戻り値に使える。
値のみ宣言 var 変数名 = (値1, 値2, 値3)
型付宣言 var 変数名: (Int, String, Bool) = (…
ラベル付き宣言 var 変数名: (count: 123, alpha: "abc", …
型付/ラベル付き宣言 var 変数名 = (count: Int, alpha: String, isFlag: Bool) = (count: 123, alpha: "abc", …


- [ ] 7. 変数
var global = "global" // グローバル変数 全てのクラスから参照可能 システム全体でひとつじゃないとダメ
class myclass {
public var a = "a" // インスタンス変数 インスタンス化すると他クラスから参照可能
var b = "b" // インスタンス変数 インスタンス化すると他クラスから参照可能
private var c = "c"  // インスタンス変数 他クラスから参照不可
static var d = "d" // クラス変数 他クラスからmyClass.d で参照可能
func method() {
var e = "e" // ローカル変数 メソッド内でのみ有効
}
}

- [ ] 8. delegate
8-5.カスタムセル上のボタンを押して画面遷移をしたい
と同じ


- [ ] 9. 命名規則
アッパーキャメル 
クラス名、構造体名、列挙型名、プロトコル名
スネークケース大文字
グローバル定数、クラス定数
キャメルケース
変数名、関数名、ラベル名
元の名前の先頭に「_」を付ける オプショナルバインディングでアンラップした変数
ファイル名
基本的に、クラス名、構造体名、列挙型名、プロトコル名
例外的に、extensionに限り、クラス名 + 拡張内容 またそのファイルはExtensionディレクトリに配置する
メソッド名 どのような処理をするか理解できるようにする


- [ ] 10. 通知 オブザーバパターン
Swiftにおけるイベント通知のパターン
・デリゲートパターン
・クロージャ
・オブザーバパターン

オブザーバパターン
実装方法
① 通知を受け取るオブジェクトにNotification型の値を引数に持つメソッドを実装する
② NotificationCenterクラスに通知を受け取るオブジェクト指向を登録する
③ NotificationCenterクラスに通知を投稿する
セットアップ シリーズまとめ

# 目次

セットアップの覚書まとめ。
メモはすぐ陳腐化するが、理解のためにまとめる。

- [セットアップ - **フォント** - Qiita](https://qiita.com/yokarikeri/items/ff92205228b0e33cb6d1)
- [セットアップ - **Windows** - Qiita](https://qiita.com/yokarikeri/items/a4be8fe088bf74a6b565)
- [セットアップ - **Chrome** - Qiita](https://qiita.com/yokarikeri/items/615f54d9887179440344)
- [セットアップ - **Visual Studio Code** - Qiita](https://qiita.com/yokarikeri/items/d6d9bb1e4f55869395af)
- [セットアップ - **Git** - Qiita](https://qiita.com/yokarikeri/items/2a3589697f0bff9311cc)
- [セットアップ - **Docker on WSL 2** + **Windows ターミナル** - Qiita](https://qiita.com/yokarikeri/items/367741844abde4d3c7f4)
- [セットアップ - **zsh** - Qiita](https://qiita.com/yokarikeri/items/1c78edf32af41339ffec)
- [セットアップ - **tmux** - Qiita](https://qiita.com/yokarikeri/items/1c9a228fc9b462c53755)
javascriptで連想配列にmapメソッドとfilterメソッドを同時に使う話

# 最初に
初心者が書いています。個人的メモ程度に思ってみてください。
もし、他の解決法などがあれば教えていただけると嬉しいです。
Markdownの記法に慣れるための練習も兼ねています。
「普通はこういう書き方するよ！」みたいなアドバイスも頂ければ幸いです。

# 本題
連想配列内の値を同時に複数取り出したい時を考えます。
例えば以下のような連想配列があります。

~~~javascript
const inventory = [{
              name: "apple",
              price: 120,
              category: "fruits"
             }
             {
              name:"bed",
              price: 3000,
              category: "furniture"
             }
            {
              name: "chair",
              price: 400,
              category: "furniture"
             }]
~~~
この中のIDが1と3の時の値を同時に取り出したい時、このように考えます。

~~~javascript
const index = [1, 3];

const result = inventory.map(item => item.filter(i => i.id === index))
console.log(result)
~~~
しかし、この書き方だとエラーを吐きます。
`Uncaught TypeError: item.filter is not a function`
`filter`が関数として見なされていないそうです。
調べてもよくわかりませんでした。
おそらくですが、mapメソッドの中で他のメソッドが使えないんだと思います。
（違ったら教えてください）
いろいろ試した結果、こうやったら動きました。

~~~javascript
const result = inventory.filter(item => index.includes(item.id)).map(item => item["name"]);

console.log(result)
~~~

- 出力画面

~~~javascript
// [object Array] (2)
["apple","chair"]
~~~

## 余談
配列の中から特定の条件を満たす要素を探すときにfindかfilterのどちらを使うべきかという話。
自分の感覚では`filter`を使うべきなのかなと思いました。
というのも、

- `find` : 配列の要素の中から条件を満たす最も前の要素を**1つだけ**取り出す
- `filter` : 配列の要素の中から条件を満たす**全ての**要素を取り出す

`find`を使うと取りこぼしが発生してしまうので`filter`を使うべきなのかなと。
一つしか入り得ないのならば`find`でもいいのかもしれないです。
こちらの方が要素を見つけ次第探索を終了するから処理が少なくなって良いのかな？
【VS Code】指定ディレクトリに新規フォルダ・ファイルを作成するショートカットの設定

# はじめに
VS Codeでファイルを新規作成する時のショートカットキーを調べたところ、デフォルトではなかったので、調べた結果のメモです。

# `keybindings.json` を開く
`cmd+shift+p`で `Open Keyboard Shortcuts(JSON)`を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575694/bb5b1ae8-4a97-55bf-fd5a-da8d31c6cf24.png)

# キーバインディングを設定
以下のように設定すれば `cmd+n` で新規ファイルを、 `cmd+shift+n` で新規フォルダを作成できるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575694/f3d3dce0-7d04-63d9-bfb1-c851f175c352.png)
Ruby on Railsのバリデーションとエラーメッセージについて

![04f5bfcebee7172c56cb228ee1d75926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1301666/f1a21d7a-3b8f-3c7f-69b8-f1cfd7a7d199.png)

例えばこれは簡単なToDoアプリですが、新規追加画面でバリデーションをかけて空欄、または５文字以上入力しないと登録できないようにします。
バリデーションとはデータ内容に一定の制限をかけることです。空のデータを登録できないようにする、パスワード入力において文字数制限をかけるなどです。

バリデーションの記述はappディレクトリのmodelsにあるファイルに記述します。

```ruby
class Task < ApplicationRecord
  validates :title,
  presence: { message: 'タイトルを入力してください'},
  length: { minimum: 5, message: '５文字以上入力してください'}
end
```
`validates :title,`でtitleカラムにバリデーションをかけるという意味
`presence`で空のデータは登録できないという意味`{ message: 'タイトルを入力してください'},`でエラーメッセージが表示されます。
`length: { minimum: 5, message: '５文字以上入力してください'}`で５文字以下の場合はエラーメッセージが表示されるようになります。

続いてviewファイルの記述

```ruby
  <p>
    <%= f.label :title %> <br>
    <%= f.text_field :title %>
    <% if @task.errors.any? %>
    <%= @task.errors.messages[:title][0] %>
    <% end %>
  </p>
  <p>
    <%= f.submit%>
  </p>
```
入力欄text_fieldの下にエラーメッセージを出力させます。

`    <% if @task.errors.any? %>
    <%= @task.errors.messages[:title][0] %>
    <% end %>`
@taskモデルにエラーがあった時エラーメッセージを表示させる記述になります。

![cf25d519677515ac2b411131fa6168b0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1301666/8ef48c8a-43cf-f5cf-5061-a8e1daf4a68c.png)

入力が空の場合

![c3e67ccfdc73e46a478e6658da60e8e9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1301666/5bb248ee-ffcf-1957-50f6-dbf159a82c95.png)

5文字未満の場合
NavigationViewの子ビューで上の方に変な余白ができる問題

初Qiita記事です。

親ビューでNavigationViewを設定していれば、NavigationLink先の子ビューではNavigationViewの設置は不要。勝手に子ビュー内部でもNavigationLinkが貼れるようになってる。
（ただしTabとかSheetのときは注意が必要）

子ビューでもNavigationViewを使うと、上の方に変な余白（NabvigationTitle部分？）ができるし、動作もすごく重くなる。

SwiftUI始めた当初にハマっていましたが基本的すぎてなかなか検索でわからなかったのでシェアします。。
javascriptでアラートの表示

alert.html

```
<DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
        </head>
        <script src="alert.js"></script>
        <body>
            <input type="button" value="CLICK" onclick="myFunction();"/>
        </body>
    </html>
```
alert.js

```
function myFunction() {
    alert("alert!")
}
```
サポート切れCentOSでyumを実行するとエラーが発生する

:::note alert
既に解決している人が多いと思いますが、古いCentOS(6.9など)ではyumでエラーが発生します。
:::

原因は **「CentOS-Base.repo」**  にあります。

```bash
# 以下で解決します
sed -i \
    -e "s/^mirrorlist=http:\/\/mirrorlist.centos.org/#mirrorlist=http:\/\/mirrorlist.centos.org/g" \
    -e "s/^#baseurl=http:\/\/mirror.centos.org/baseurl=http:\/\/vault.centos.org/g" \
    /etc/yum.repos.d/CentOS-Base.repo
```
HTML, CSS, JavaScriptで掲示板システムを作ってみた【その2-飾りaタグ禁止】

# 作成した掲示板システムの概略
こんな感じのメッセージ投稿とアンカー機能を搭載した掲示板システムを作成し昨日初投稿の記事として紹介しました。
<a href = "http://colorful-wall.com/board/boards/">【作成した掲示板】</a>
![スクリーンショット 2021-05-10 21.00.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467169/f744b734-2d5a-4a07-a7c9-2d9ee7b1d052.png)


# 判明した不具合
 昨日初めてのWebプログラミング挑戦の一環として掲示板の記事を投稿したのですが、一つ大きなバグがあったので、早くもアップデートが入りました。
この掲示板にはコメントにアンカーをつける機能を搭載しており、>>1などの文字列を正規表現で置き換えることで、リンクにして目立たせる機能を搭載していたのですが、リンク先がないので当然NotFoundエラーが表示されていました。

# 今回の改良ポイント
そもそもリンク用途のaタグを修飾に使うべきではないような気がしたので、普通にspanで囲んで、青色をつけました。

```JavaScript:1つ目.js
$("#comment").html($("#comment").html().replace(/&gt;&gt;(\d)/g,"<a href=id$1 class='anc'>" + "&gt;&gt;$1" + "</a>"));
```

1つ目のコードはaタグを利用して修飾しています

```JavaScript:2つ目.js
$("#comment").html($("#comment").html().replace(/&gt;&gt;(\d)/g,"<span x=id$1 class='anc text-primary id$1'>" + "&gt;&gt;$1" + "</span>"));
```

二つ目では単にtext-primaryクラスを追加し、bootstrapで修飾しているので、NotFoundエラーは出ません。タグ内の要素はhrefではなく適当にxとおいて互換しています。

# さらなる改良
モバイル用のマウスイベントがJavaScriptにあるなんて！
以前はmouseenterがポップ出現条件だったのですが、スマホでは使えないという欠点がありました。今回、リンク不良が治ったためポップ条件をclickにし、PC用ではマウスが離れた時、スマホ用では画面スワイプでポップを削除するようにしました。

```JavaScript:改良.js
$(".pop" + n).on("mouseleave", function () {//マウスが離れた時削除
                            $(this).remove();
                        })
$(".pop" + n).on("touchmove", function () {//画面をスワイプしたとき削除
                            $(this).remove();
                        })
```

<a href ="https://qiita.com/gakusei_programmer/items/106f47ca9564f0aa1f1b">一つ前の記事へ</a>
Git memo

## Gitを使う上での備忘録
#### ローカルリポジトリの作成からプッシュまで
https://qiita.com/sayama0402/items/9afbb519d97327b9f05c
https://www.hivelocity.co.jp/blog/34777/

対象のフォルダに移動して、

```
git init
```

ステージングしたいファイルを指定。（1つずつ指定した方が良い）

```
git add 'file'
```

コメントをつけてローカルリポジトリにコミット

```
git commit -m "comment"
```

プッシュするリモートリポジトリを指定。

```
git remote add origin 'url'
```

マスターブランチにプッシュ

```
git push origin master
```

#### default branchの変更
![スクリーンショット 2021-06-29 19.44.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391844/e87d8749-f69f-d9a1-1b93-edc061900f12.png)
![スクリーンショット 2021-06-29 19.44.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391844/da341f04-3147-24c7-8146-dc7901335df7.png)

#### ブランチにマージ/プッシュしたコミットを取り消す
取り消し方には2通りある。
1. revert
1. reset + force push
前者は、コミットを取り消すためのコミットをすることで、結果的に足り消された"ことになる"操作。
履歴には誤ったコミット、取り消すためのコミットが残る。
後者は、文字通りコミットの取り消しができる。指定したコミットまでさかのぼることが可能で履歴からもコミットが消える。
（ただし、複数人で作業を行う場合などには履歴がまるっと消滅するため注意が必要。）

- reset + force push の実施手順（クローンから）

```
// 該当のリポジトリをローカルにクローン
git clone 'url'
// 該当のリポジトリに入る。
cd 'path'
```

クローンする際に、ブランチを指定する場合は以下

```
git clone -b 'ブランチ名' 'url'
```

クローンした後、自分のブランチ名を確認する。
ローカルのブランチが一覧表示される。
*が付いたブランチが現在編集中のブランチ。

```
git branch
```

履歴を確認し、HEADがどのコミットを指しているか確認する。
終了するには'q'を押下

```
git log
```

遡りたいコミットのハッシュをコピーして控える。
（ここで指定したコミットが最終的にHEADになる。）
resetコマンドを叩き、コミットを取り消す。
完全な取り消しのため--hardを指定。--soft、--mixed では試していない。
（この時点ではローカルブランチのHEADにのみ影響を与える。リモートには影響はない。）

```
git reset --hard 'ハッシュ'
```

履歴を確認し、HEADが移動していることを確認する。

```
git log
```

force pushコマンドを叩き、リモートに変更を反映する。
（試していないがforceを指定しない場合はconflictしてエラーになるはず）
また安全のため、ローカル/リモート共にブランチを明示的に指定する。

```
git push -f origin 'ローカルブランチ名':'リモートブランチ名'
```

参考：
https://reasonable-code.com/git-push-cancel/
https://yu8mada.com/2018/08/10/how-to-push-a-local-branch-to-a-remote-branch-with-a-different-name-in-git/
https://qiita.com/shuntaro_tamura/items/db1aef9cf9d78db50ffe
https://qiita.com/chihiro/items/2fa827d0eac98109e7ee

#### 雑記

クローン
クローンしたいディレクトリに移動
`git clone 'url'`

.gitファイルが不可視ファイルだった（ctrl+shift+.）
https://pc-karuma.net/mac-shotcut-key-show-hidden-files/

ファイル容量が大きく、アップロードできない場合の対処
https://qiita.com/kanaya/items/ad52f25da32cb5aa19e6

いつまで経ってもファイルでかいって怒られるなーと思ってたら、一度コミットしたものが残り続けているみたい
https://teratail.com/questions/55549

Git resetコマンド集
https://qiita.com/ChaaaBooo/items/459d5417ff4cf815abce

git push時のerror: src refspec master does not match anyについて
https://deepblue-ts.co.jp/git/git-push-error/

わけわからんので、一度 .gitファイルを削除
次からは、ファイルを1つずつ指定しよう。

.gitignore
.gitattributes
は、リモートのファイルがローカルのコミット時に対象になる模様。
したがって、上記のファイルはリモート側であらかじめ作成するか、先にプッシュしておく必要がある。

とりあえず全部ステージングする場合は以下を参照。
https://qiita.com/FiNGAHOLiC/items/d68d19ff9fecc59084e2

```
git add --all
```
【React】(親から子|子から親)の関数を呼び出す

# 親から子の関数を呼び出す
実装方法としては、子供側の参照を親から触れるようにしてやり、
参照を通じて子供側の関数を呼び出せれるようにしてやります。

## 子供側の実装

```tsx
const ChildrenBase: React.ForwardRefRenderFunction<
  { printId: () => void },
  {
    id: string;
  }
> = ({ id }, ref) => {
  // 親から呼ばれる関数を定義
  useImperativeHandle(ref, () => ({
    printId() {
      console.log(id);
    },
  }));

  return <div>Children</div>;
};
const Children = forwardRef(ChildrenBase);
```
[forwardRef](https://ja.reactjs.org/docs/forwarding-refs.html)と[useImperativeHandle](https://ja.reactjs.org/docs/hooks-reference.html#useimperativehandle)を使って実現します。
forwardRefでChildrenを参照し、useImperativeHandleで関数を参照に付与します。

## 親側の実装

```tsx
const Parent: React.FC = () => {
  const childRef = useRef<{ printId: () => void }>();
  useEffect(() => {
    childRef.current?.printId();
  }, [childRef.current]);
  return <Children id={'1234567'} ref={childRef} />;
};

export default Parent;
```

親側は参照を通して、子供側の関数を呼び出します。

# 子から親の関数を呼び出す
今度は逆のパターンで、子供側から親側の関数を呼び出すパターンです。
実装方法として、今回はpropsで渡す実装ではなく、全ての子供に親の関数を呼べるようにしてやります。
ユースケースとしては `Layout` 等の共通のコンポーネントで、子供が使おうと思ったら `Layout` の関数が使える
ようなケースになるかと思います。

## 子供側の実装

```tsx
type ChildrenDispatchProps = {
  printId?: (id: string) => void;
};

const Children: React.FC<ChildrenDispatchProps & { id: string }> = ({
  printId,
  id,
}) => {
  return <button onClick={() => printId(id)}>ボタン</button>;
};
```
親から渡される関数は `?` 付きで定義しないとTypeエラーになります。

## 親側の実装

```tsx
const Parent: React.FC = ({ children }) => {
  const printId = (id: string) => {
    console.log(id);
  };
  const childWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      const dispatch: ChildrenDispatchProps = {
        printId: printId,
      };
      return React.cloneElement(child, { ...dispatch });
    }
    return child;
  });
  return <div>{childWithProps}</div>;
};

const App: React.FC = () => {
  return (
    <Parent>
      <Children id={'1'} />
      <Children id={'2'} />
    </Parent>
  );
};
```
`cloneElement` で子供に親側で定義した関数を付与してやります。
↑のようにする事で、子供側は `ChildrenDispatchProps` を受け取るようにした場合、その子供は
親の関数 `printId` を使えるようになります。

※ `React.cloneElement` や `React.isValidElement` 等は以下リンク先を参照
[React の最上位 API - React](https://ja.reactjs.org/docs/react-api.html#cloneelement)


# 参考リンク

- [React hooksで子コンポーネントの関数を実行する - Qiita](https://qiita.com/maruware/items/b6da39ac44753253b379)
- [forwardRef と useImperativeHandle - 30歳からのプログラミング](https://numb86-tech.hatenablog.com/entry/2019/12/06/122217)
- [ref のフォワーディング – React](https://ja.reactjs.org/docs/forwarding-refs.html)
- [javascript — 親から子メソッドを呼び出す](https://www.it-swarm-ja.tech/ja/javascript/%E8%A6%AA%E3%81%8B%E3%82%89%E5%AD%90%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99/825675793/)
- [javascript - How to pass props to {this.props.children} - Stack Overflow](https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children)
MIPSアセンブリ言語入門2

#分岐命令とジャンプ命令

##分岐命令

###b (無条件分岐)

無条件にラベル *Label* に分岐する。
**ここで分岐先のアドレスは16bitの相対アドレス**

```
b Label
```

###bnez (条件分岐)

$ \$s0 \neq 0 $の時に*Label*に分岐する。

```
bnez $s0, Label
```

###beqz (条件分岐)

$ \$s0 = 0 $の時に*Label*に分岐する。

```
beqz $s0, Label
```

##ジャンプ命令

#j

ラベル*Label*にジャンプする。
**分岐先のアドレスは28bitのアドレス**

```
j Label
```

#アドレッシングモード

##絶対アドレッシング

ジャンプ先のアドレスそのものを書く。
ジャンプ



##相対アドレッシング
**"ここから~byte先"**という形で表現する
分岐

#実際に翻訳してみる

```C:loop.c
int i;
int j;

int main()
{
    i = 1;
    j = 0;

loop_begin:
    if (i > 100)
        goto loop_end;
    j = j + i;
    i = i + 1;
    goto loop_begin;

loop_end:
    return 0;
}
```

これをMIPSのコードにすると

```:loop.asm
# データ領域開始の宣言
        .data
# int p
        .globl p
p:      .word  0

# int q
        .globl q
q:      .word  0

# テキスト領域開始の宣言
        .text

# int main ()
        .globl main
main:

# p = 1
    li    $s0, 1
    la    $t0, p
    sw    $s0, 0($t0)

# q = 0
    la    $t0, q
    sw    $zero, 0($t0)

# loop_begin
loop_begin:

# if (p > 100) goto loop_end
    la    $t0, p
    lw    $s0, 0($t0)
    li    $s1, 100
    sgt   $t0, $s0, $s1
    bnez  $t0, loop_end

# q = q + p
    la    $t0, q
    lw    $s0, 0($t0)
    la    $t1, p
    lw    $s1, 0($t1)
    add   $s0, $s0, $s1
    sw    $s0, 0($t0)

# p = p + 1
    la    $t0, p
    lw    $s0, 0($t0)
    addi  $s0, $s0, 1
    sw    $s0, 0($t0)


# goto loop_begin
    b     loop_begin

# loop_end
loop_end:

# return 0
    li    $v0, 0
    jr    $ra
```

このままだとちゃんと**p**, **q**の値がちゃんとなっているか分からないので

`loop.c`の最初に

```
#include <stdio.h>
````
最後のところに

```C
printf("p : %d, q : %d \n", p, q);
```

をつけると

```:loop.cの実行結果
p : 101, q : 5050 
```

また、`loop.asm`の ***loop_end:*** の最後に

```
la    $t0, p
lw   $s0, 0($t0)
la    $t1, q
lw    $s1, 0($t1) 
```

実行後のメモリ(decimal)を見ると

```
      ・
      ・
R16 [s0] = 101
R17 [s1] = 5050
      ・
      ・
```

となり、きちんと動いているのが分かる。

#関連記事

https://qiita.com/twrcd1227/items/91f048de69bf92355868
セキュリティに関する組織・団体等の一覧

# 1. 要約
- 情報セキュリティ、サイバーセキュリティに関する組織・団体等の一覧です。（一般的な企業は除く）
- おまけも少し含みます。
- 本記事の内容は随時更新していきます。

# 2. 日本
### 2-1. 政府・行政
- [NISC（内閣官房）](https://www.nisc.go.jp/)
- [IPA（経済産業省）](https://www.ipa.go.jp/)

### 2-2. その他
- [JPCERT/CC](https://www.jpcert.or.jp/profile.html)
- [JIPDEC](https://www.jipdec.or.jp/)
- [JSA](https://www.jsa.or.jp/)
- [JNSA](https://www.jnsa.org/)
- [JASA](https://www.jasa.jp/)
- [日本シーサート協議会](https://www.nca.gr.jp/)

# 3. 世界
### 3-1. 政府・行政
- [NIST](https://www.nist.gov/)

### 3-2. その他
日本に支部等を構えている組織・団体等についてはそのURLをリンクしています。

- [ISO](https://www.iso.org/home.html)
- [SANS](https://www.sans-japan.jp/)
- [OWASP](https://owasp.org/www-chapter-japan/)
- [PCI SSC](https://ja.pcisecuritystandards.org/index.php)
- [CSA](https://www.cloudsecurityalliance.jp/site/)

# 4. 番外編
セキュリティに関する書籍等で紹介されることはあるが、セキュリティメインではないものや、資格の認定団体もおまけで記載しておきます。

### 4-1. 資格の認定団体
- (ISC)2
- ISACA

### 4-2. その他
- 総務省
- 金融庁
- デジタル庁
- [JPRS](https://jprs.co.jp/)
- NICT
- 警視庁
- ITU

# 5. 更新履歴
- 2021/5/10：初版投稿
- 2021/5/11：資格の認定団体を追加
- 2021/6/7：総務省を追加
- 2021/9/4：金融庁とデジタル庁を追加
- 2022/11/30：JASAを追加
S3ファイルの大量コピーは、AthenaのINSERT INTOでやると高速（１案として）


s3で、大量のファイル（10万とか）をコピーしたい時、どうされていますか？
＊ディレクトリ名をちょっと変えたいとかで、大量のディレクトリとファイルがある場合

boto3でプログラム組んで、コピーしようとしたら、ゾッとする遅さでした。
管理コンソール上で数秒で終わるコピーが、何分もかかるとは、思わなかった・・・

今回の方法は、やや制約（gzipになる、HIVE形式でディレクトリ出力される）は発生しますが、同じ溝にはまった人はご参考までに。

## s3で大量コピー：boto3(python)の場合
boto3 pythonで実行したところ、100ファイルごとに30秒前後かかっていて、震えました。。。
目の前の25万ファイルを目にして。

30秒×25万ファイル＝2083時間 = 87日　もかかる・・・

## Athenaでやってみた
どうしようか、、、と考えて、思いついた方法

「AthenaのINSERT INTOを使おう！」

という話です。

### [手順]
(1) COPY元のテーブルを作成　
　（ディレクトリをパーティションに指定）
  * コツ：　テーブルカラムはstringに統一した方が面倒がないかも

(2) COPY元のパーティションを追加してください。
MSCK REPAIR TABLEは超遅いから、 ALTER TABLEでやりましょう。
例えば、日付("dt", YYYYMMDD形式)をパーティションキーにする場合のコードを載せておきます。

```Python
from datetime import datetime , timedelta

start_day = datetime.strptime('2020-10-15','%Y-%m-%d') #例えば2020/10/15 ~ 
last_day = datetime.strptime('2021-05-10','%Y-%m-%d')  # 2021/5/10までのデータをコピーする時

q = 'ALTER TABLE old_table ADD IF NOT EXISTS' # q に ALTER TABLEが入る
part = " PARTITION (dt='{dt}') LOCATION 's3://bucket/path/to/{dt}/'"
dts = []  # ここには、100パーティションの "dt in ({parttion})" に指定するリストが入る
key = []
ctr = 0
while start_day.timestamp() <= last_day.timestamp():
    ctr +=1
    d = start_day.strftime('%Y%m%d')
    q += part.format(dt=d)
    key.append("'{}'".format(d))

    start_day += timedelta(days=1)
    if ctr >=100:
        dts.append(",".join(key))
        key = []
        ctr = 0
if ctr >0:
    dts.append(",".join(key))
```

(3) COPY先のテーブルを作成　
　（ディレクトリをパーティションに指定）
　＊ [制約]HIVE形式（ /dt=xxxx/ になる)
　* [制約]出力はgzip形式になる
　　
(4) パーティション数が100以上になる場合は、100単位で分割
 Athenaは一気に100パーティション以上扱えないらしい。
　だから、パーティション100個分ずつ、実行する必要がある。

(5) INSERT INTOを実行
・一応重複がないように、ファイル名が一致したら取り込まないようにする
[追記/訂正] こちら、new."$path"としてますが、ファイル名変わるのでカラムとして取り込まないとダメでした。すいません。

```SQL
INSERT INTO new_table (select old.* from old_table as old left join new_table as new on egexp_extract(old."\$path", '[^/]+$') = regexp_extract(new."\$path", '[^/]+$') where new."$path" is null and dt in ('20201015','20201016' )
```



### [結果]
-> ざっくりですが、250ディレクトリ、 25万件ほどのファイルコピーが実行３回（合計、15分くらい）で終わった。

よかった。。。

Athenaって便利ですね。
他にも方法があるのかもしれませんが。
[Charles]iOS14.5のsimulatorにCharlesの証明書をインストールできなくてハマった

## 結論
- macで起動中のCharlesから証明書をexportしよう。
- simulatorにドラックアンドドロップでインストールしよう。

※この`stackoverflow`を見たら一発なんですが、個人的になかなかこれに辿り着かなくてハマったので投稿します。
https://stackoverflow.com/questions/67283763/unable-to-install-charles-root-certificate-on-ios-simulator-14-5

## 環境
- iOS14.5
- simulator: iPhone12
- Charles: v4.5.6

## 何が起きたか
Xcode12.5がリリースされ、手持ちのsimulatorたちもiOS14.5になりました。
そして新しくなったsimulatorにまたCharlesのroot証明書を入れようと思ったんですが、いつもの手順だとうまく行きませんでした。
いつもの手順とは以下の手順です。

### いつもの手順
1. `Help/SSL Proxying/Install Charles Root Certificate in iOS simulators`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/8071666d-3099-9a46-ea67-310f3ccefb5b.jpeg" width="５５０">

2.設計アプリの`General/About/Certificate Trust Settings/`でChrales Proxyを有効にする。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/acc50bdf-5c3a-cd65-6ce6-35b25aac44ba.png" width="250">

### どううまくいかなかったか
1の手順で`Install Charles Root Certificate in iOS simulators`を選択しても、simulator側に証明書がインストールされませんでした。
stackoverflowによるとこれはCharles側のバグとのことです。

## 解決策
1. `Save Charles Root Certificate...`でRoot証明書をexportする。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/502921e3-dc6d-e529-c661-27ddf2346600.jpeg" width="550">

2. 証明書をsimulatorにドラッグアンドドロップする。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311282/3b6b6bdf-f3dc-1fa2-5c92-d5b92783a738.jpeg" width="300">

インストールされたらスイッチをONにして有効にすればOKです。

## ダメだった方法
stackoverflowでは`https://chls.pro/ssl`にアクセスすることでインストールすることもできるという書き込みがありましたが、これはsimulatorではうまく行きませんでした。
iOS14.5では一度exportするしかなさそうですね。


## おわりに
検索が上手な人やexportの方法を知っていた人ならハマらないと思いますが、個人的にハマってしまいました。。。
同じくハマった人がこの記事でパッと解決できたら嬉しいです。
【初心者向け】テキスト&CSSにするか、画像にするかの線引き

#どうも7noteです。テキストにするか画像にするかの線引きをいろいろなパターンで考えてみた

WEB制作を行う中で

**「テキストにするか、画像にするか」**

は**非常に難解な問題**です。

特に線引きが難しいこの問題を個人的見解で基準となる線引きをしてみました。
さまざまな場面に合わせてテキストか画像かを分けて行きます。

## 「テキスト」のほうが好ましい場面

### ・seo対策に重要なキーワード

重要なキーワードはできる限りテキストとして**googleのクローラー(サイトを巡回してるロボット)に認識してもらい評価を受ける必要がある**ので、できるだけテキストで作成します。

### ・見出し、ページタイトルなど

こちらも**seo対策を行う場合はテキストのほうが好ましい**ので、できる限りテキストで作成します。
ただCSSで再現できないものは画像にします。

### ・今後更新することがある数値・テキスト

**更新のたび画像を修正していると作業時間がとても増えてしまう**ので、できる限りテキストで作成します。
ただ、デザインを損なう場合は画像で作成します。

### ・ナンバリングはolのカウントで出来るだけ再現

1.ほげほげ
2.ふがふが

などの文字は**cssの装飾で対応できる場合はcssだけで再現**します。
もし新しく増えたり、順番が変更になってもHTMLの修正だけで済むので。
ただ、標準デバイスにないフォントで作成されている場合は画像で作ります。

### ・テーブル、表

HTMLでテーブルがあるので、できるだけtableタグを使って再現します。
ただtableタグだけで表現が難しいデザインの場合は画像で作ることもあります。

### ・コピペしてもらう用の文章

そんなにないとは思いますが、コピペしてもらいたい物、たとえば**ソースコードなんかは画像だとコピペできないのでテキストで書くように**しましょう。




## 「画像」のほうが好ましい場面

### ・標準デバイスにもWEBフォントにもないフォントが使われている文字

**フォントが変わりデザインが変わってしまうので、画像を使うしかありません。**webフォントで対応できる場合でもページの読み込み速度を考えるとページに1箇所2箇所程度であれば、画像のほうがいいかもしれません。**ページスピードを計測しながら良い方を利用してください。**

### ・CSSでは再現できないデザイン

これは諦めて画像にしましょう。
**cssで再現できるかどうかはgoogleで検索して、方法が見つからなければという判断で**いいと思います。

### ・文字の配置がcssではとても複雑になる

テキストだけでは説明が難しいですが、**文字の大きさがバラバラでかつ位置もcssで調整が難しいものは画像にする**ことが多いです。
CSSで再現してもいいのですが、**デザインが細かいとCSSで完璧に再現するのはとても難しい**ので画像にしてしまいます。
微調整しても全てのデバイスで完璧に同じ見え方にさせるにはテキストでは限界があるので、凝ったデザイン配置のテキストは画像にします。

### ・グラフや時間軸付きの図など

**グラフ系は複雑になりやすいので基本的に文字ごと画像にすることが多いです。**
注釈は一緒に画像にしたり、テキストのみにしたりと場面に応じて変えてますね。
ただデータベースと連携してリアルタイムでグラフを生成する場合は画像では作れないのでcssやｓｖgを使って作成をしなければなりません。

## まとめ

いかがでしたでしょうか。思いつく限りを書きましたが、まだ他にも具体例があるかもしれません。
web制作をする上では気をつけなければ行けないポイントや悩むポイントが多くあると思います。
そんなときに**自分なりの指標をもって取り組むことでムダな考える時間を省くことができるので、マイルールに従って作成していくといいかなと思います。**

また**「本来テキストでないといけないところを画像にしてしまった！」となっても、1箇所2箇所程度であればそこまで大きな影響はありません。**
作成する人によってもそれくらいの誤差がでるものなので、あまり気にしすぎずどんどん作って自分なりにこういう作りにしようと考えて取り組んでみてください。
そうやって考えて取り組んできたものが最も正解に近いのかなと思います。

【フロントエンド強化月間に参加中↓↓】

https://qiita.com/official-events/b9ad63394fa2635dfca9

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)の対処法

#問題

mysql -u root -h localhost と入力し、mysql に接続しようとしたら以下のエラーが発生しました。

```
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
```


#解決策

mysql サーバーを起動させれば解決しました。

サーバーが停止していたみたいでした。以下のコマンドで起動させ、再度接続を試みたらできました。

```
systemctl start mysqld.service
```

#参考
以下サイトを参考にさせていただきました。ありがとうございます。

https://qiita.com/hondy12345/items/d32ed749fb49e9da7de6
【Vue.js】コンポーネントはLocal登録で使うのが基本

## はじめに
仕事で使う事になったので1からVue.jsについて学んだ。
ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。

## コンポーネントはLocal登録で使うのが基本
前提として、Vue.jsでコンポーネントを定義する方法には以下の2つがある。

| # | 方法 |
|:-:|:-:|
| 1 | [Local登録](#local登録の例) |
| 2 | [Global登録](#global登録の例) |

この内、基本的には**Local登録**を用いるようにするべき。
Gobal登録を一般的に用いない理由は、

- あまり使用されないコンポーネントなのにファイルに残ってしまいファイルサイズが増加する

などの弊害があるため。

※Local登録・Gobal登録いずれも以下の画像のように描画される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/8ce64f48-21f0-c197-a019-d7e3df758402.png)

※Global登録・Local登録の違いは、`single file component`をどのように登録して使うか？を見ると分かりやすいかもしれない。
　・Gobal登録：https://bit.ly/3y6dnUB
　・Local登録：https://bit.ly/3okHHGz

### Global登録の例
` Vue.component('my-component',{…})`のように`Vue.component()`でコンポーネントを定義する。
このように定義すると、どこでも`<my-component></my-component>`で作成したコンポーネントを利用する事ができる。

```html:sample.html
<body>
    <div id="app">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <script src=" https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        Vue.component('my-component', {
            data: function () {
                return { number: 12 }
            },
            template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
            methods: {
                increment: function () {
                    this.number += 1;
                }
            }
        })

        new Vue({
            el: '#app'
        })
    </script>
</body>
```

### Local登録の例
オブジェクトとしてコンポーネントの内容を定義し、それをVueインスタンスの`components`プロパティに渡してあげる。
このようにすると、あくまでそのVueインスタンスにおいて`<my-component></my-component>`でコンポーネントを使えるようになるだけで、他のVueインスタンスで`<my-component></my-component>`を記載してもコンポーネントは利用できない。

```html:sample.html
<body>
    <div id="app">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <script src=" https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        const component = {
            data: function () {
                return { number: 12 }
            },
            template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
            methods: {
                increment: function () {
                    this.number += 1;
                }
            }
        }

        new Vue({
            el: '#app',
            components: {
                'my-component': component
            }
        })
    </script>
</body>
```

## Vue.jsの勉強メモ一覧記事へのリンク
Vue.jsについて勉強した際に書いた勉強メモ記事のリンクを集約した記事。

- https://qiita.com/yuta-katayama-23/items/dabefb59d16a83f1a1d4
Nuxt.jsでGoogleタグマネージャーにイベントを送る方法

Googleのタグマネージャーでは、ページビューやクリックイベントを設定することができます。
しかし、コード上からイベントを送りたいこともあるかと思います。
その時の対処法になります。[@nuxtjs/gtm](https://github.com/nuxt-community/gtm-module)を使用します。

## gtm-moduleをインストール
Nuxt.jsでタグマネージャーの設定をするために、@nuxtjs/gtmをインストールします。

```
yarn add @nuxtjs/gtm 
or 
npm install @nuxtjs/gtm
```
## nuxt.config.jsで設定する

```js:nuxt.config.js
export default {
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX' // タグマネージャーのid
  }
}
```

インストール後`nuxt.config.js`でタグマネージャーのidを設定します。

## componentsでイベントを設定する
タグマネージャーにイベントを送りたい箇所に処理を追加します。

```vue
<template>
  <div>
    <button @click="clickEvent">click</button>
  </div>
</template>

<script>
export default {
  methods: {
    clickEvent() {
      this.$gtm.push({ event: "demo" })
    }
  }
};
</script>

```

上記の例では、クリックをしたらタグマネージャーにイベントを送ることができます。

他にもapiからのリクエストが成功したらなど、任意の条件でイベントをおくることが可能です。

## Nuxt.jsから送られたイベントをタグマネージャーで取得する
続いては、タグマネージャー側での設定になります。

タグマネージャーのトリガーを選択します。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/4273bec8-abe0-30f9-5634-69615cfab95d.png)

![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/a8695a4b-daf6-4425-3dfd-ed7ca59af7ff.png)

トリガータイプはカスタムイベントにします。
トリガーのイベント名は、Nuxt.jsで指定したものと同じにする必要があります。
今回の例なら`this.$gtm.push({ event: "demo" })`なので、`demo`となります。

トリガーを設定したら今度はタグを設定します。
![キャプチャ3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/9cb5b6b3-784f-7ec8-d2f5-89e953eeca5a.jpeg)

イベントを送りたいタグを選択します。今回はグーグルアナリティクスです。
トリガーには、上記で作成したトリガーを設定します。

これで、グーグルアナリティクスでNuxt.jsからのイベントを感知できるようになります。
mac OSインストールに伴うyarnファイルアップロード[yarn install v1.22.10]

railsで作ったWEBアプリを立ち上げようとしたがうまくサーバーが起動しませんでした。
OSのアップロードが原因のようです。
yarnをインストールしました。

```terminal
% rails s
=> Booting Puma
=> Rails 6.0.3.6 application starting in development 
=> Run `rails server --help` for more startup options
warning Integrity check: System parameters don't match                         
error Integrity check failed                                                   
error Found 1 errors.                                                          


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).
```


```terminal
yarn check v1.22.10
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.
************************************* % yarn install
yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨  Building fresh packages...
✨  Done in 39.58s.
```
【Laravel】faviconが表示されないときに試したこと

今回は簡単にですがfaviconの設定方法について解説します。

laravelでfaviconを設定する情報がそもそも少ないんですが、他の記事通りに設定してみても表示されなくて、結構ハマってしまいました。

# 開発環境
PHP 7.3.9
MAMP 5.7
Mysql 5.7.26
Laravel 6.20.7
Composer 2.0.8

# favicon（ファビコン）とは

faviconとはタブの上部に表示されるアイコンのことです。

![favicon_example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474463/bec375d2-84dd-367e-165b-3c36a3e84ae0.png)


# faviconの作成方法

自分が使いたい画像を用意して以下のサイトでfavicon用に加工できます。
[Favicon & App Icon Generator](https://www.favicon-generator.org/)


# faviconの設定方法

生成したfavicon.ico(ファイル名は任意で拡張子.icoのもの)をpublicディレクトリ配下に置きます。
![acf6f7e7160ddb116f1e5abc4374064d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474463/8709a8da-0bef-b9dc-1d4f-e24ff147c3a6.png)

こんな感じですね。

あとはresources/views/layouts/app.blade.phpのheadタグ内で以下の記述をすれば表示されます。

```php:app.blade.php
  <link rel="shortcut icon" type="image/x-icon"  href="{{ asset('/favicon.ico') }}">
```

基本的には以上の設定で大丈夫だと思われますが、
どのブラウザで表示することを想定するかによって設定が異なるで注意してください。

# faviconが表示されないとき

「favicon laravel」等で検索して出てくる記事は上記の設定で表示できると書かれていることが多いのですが、なぜか僕の環境では表示できなかったので、もし同じ状態の方は参考にしてください。

僕が修正したのは単純にfavicon.icoをpublicディレクトリ直下に置くのではなくpublic配下にimagesディレクトリを作成してその中にfavicon.icoを設置しました。

![3a6ffe4b011ed29ae15318cac9069a05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474463/4931d124-0b37-4e5d-9410-c34cb75c0406.png)

こんな感じです。

その後、resources/views/layouts/app.blade.phpのheadタグ内の記述を以下に変更します。

```php:app.blade.php
  <link rel="shortcut icon" type="image/x-icon"  href="{{ asset('images/favicon.ico') }}">
```

こうするとしっかり表示されるようになりました。
パスの書き方が間違っているのかと思い、いろいろ試しましたがなぜかpublic直下では全く読み込みできなかったです。

再現性は低いかもしれませんがどなたかの役に立てれば幸いです。
Google Mapを表示してみる

## ゴール
Google Map APIを使って、スマホ画面に地図を表示する。
基本的には [こちら][link] の記事と [公式サイト][link2] を踏襲して実装していく。
[link]:https://blog.codecamp.jp/iphone-app-develope-original-googlemap
[link2]:https://developers.google.com/maps/gmp-get-started#create-billing-account

#### ライブラリ管理とは何ぞや
https://qiita.com/sh-ogawa/items/26bd4edb2eff5787ca75

グーグルマップAPIを自分のプロジェクトに導入するときに、「CocoaPods」と言うライブラリ管理ツールを経由してインストールするみたい。

#### 新規でSingle View Appを作成
作成しようと思うと、「Single View App」がない。
[こちら][link1] によるとXcode12からは、「Single View App」→「app」に変更された模様。
名称の変更だけかと思いきや、構成ファイルも違う。
公式によると AppDelegade.swift にAPIキーの記述が必要とあるので、
[こちら][link3] と [こちら][link4] を参考に「LifeSycle」を「UiKit App Delegade」に変更、interfaceを「storyboard」に変更してプロジェクトを作成。
すると、「AppDelegade」「ViewController」が出現。
![スクリーンショット 2021-05-10 19.31.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391844/2bcfb92f-962c-e5f1-bd89-b8a218734ab9.png)
![スクリーンショット 2021-05-10 19.34.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391844/3e0d7577-8847-a900-769e-8cdf0d426b8c.png)
SceneDelegadeに関しては、必要になったときに以下を参照することにする。

https://qiita.com/ninoko1995/items/b28a712d5f620dbebb6f

[link1]:https://teratail.com/questions/297287
[link3]:https://dev.classmethod.jp/articles/xcode12_change_appdelegate/
[link4]:https://ja.stackoverflow.com/questions/73185/viewcontroller%E3%81%A8contentview%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%E3%81%AA%E3%82%93%E3%81%A7%E3%81%99%E3%81%8B

#### PG実装
あとは [こちらの記事][link] と [公式][link2] を参考に、
1- Podfileの作成（公式の通りGoogle Maps APIは最新版を指定）
2- コマンドラインでCocoaPods経由でGoogle Maps APIをインストール
3- xcworkspaceファイルを起動
4- AppDelegadeにAPIキー追加

```swift:AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions 
    launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
        
    GMSServices.provideAPIKey("API Key")
    return true
}
```

5- ViewControllerにPG追加

```swift:ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
        
    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
    let mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera)
    self.view.addSubview(mapView)

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
    marker.title = "Sydney"
    marker.snippet = "Australia"
    marker.map = mapView
}
```

#### 成果
Google Mapをスマホ画面上に表示できました。
次は検索欄の追加、指定した場所にピンを指す。的なことを実装したいと思います。
![スクリーンショット 2021-05-10 20.12.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391844/0e5e7986-a39d-69f0-d858-5072758fe607.png)
ExcelVBAによるgetDataRange

タイトルにExcelVBAと書いておきながら、getDataRangeとはGASにおけるシート内のデータの入力されている範囲を取得するメソッドです。
VBAもUsedRangeプロパティを使えば似たようなものですが、UsedRangeは書式設定されている範囲まで含まれてしまいます。
そこで、データの入力されている範囲だけを取得する関数をつくってみました。
実際、UsedRangeまたはCurrentRegionで事足りるので使わないかもしれませんが、、、転ばぬ先の杖として。

```
Public Function GetDataRange(ByVal ws As Worksheet) As Range

    Dim rngConst   As Range '定数セル
    Dim rngFormula As Range '数式セル
    Dim rngUnion   As Range '定数と数式を合わせたセル
    Dim rngArea    As Range 'rngUnionのAreasプロパティのループ用
    Dim rngData    As Range 'ws内の全データ範囲

    On Error Resume Next

    Set rngConst = ws.Cells.SpecialCells(xlCellTypeConstants)
    Set rngFormula = ws.Cells.SpecialCells(xlCellTypeFormulas)

    'Unionメソッドは引数のいづれかがNothingの場合Nothingを返す
    Set rngUnion = Union(rngConst, rngFormula)
    If rngUnion Is Nothing Then Set rngUnion = rngConst
    If rngUnion Is Nothing Then Set rngUnion = rngFormula
    
    Err.Clear

    Set rngData = rngUnion(1) 'ループ1回目のエラー回避
    For Each rngArea In rngUnion.Areas
        Set rngData = ws.Range(rngData, rngArea.CurrentRegion)
        'CurrentRegionを入れることでスピル範囲も拾う↑
    Next
    
    If Err Then 'シート内にデータが存在しない場合
        Set GetDataRange = ws.Range("A1")
    Else
        Set GetDataRange = rngData
    End If

End Function

```
アスキーアートコンパイラを作りました

# はじめに
アスキーアートというのを皆さんはご存知でしょうか?
文字だけで構成されたイラストや画像のようなものです。

例

```
---------------------------------------
|acsc file (The ASCII Art Source Code)|
---------------------------------------
|
|ASCII Art Compiler(acc) output
|
|------------|-----------|
|            |           |
|            |           |
|----------  |---------  |---------
|HTML File|  |png File|  |pdf File|
-----------  ----------  ----------
```

しかし、これだけだと、単なるテキストファイルです。
これを画像ファイルをはじめとする様々な形式に変えたいと思いました。

# 成果物

[ASCII_art_compiler](https://github.com/PenguinCabinet/ASCII_art_compiler)


そこでGoでアスキーアートコンパイラというツールを作りました。
これを使えば、先ほどのアスキーアートを画像やPDF、HTMLファイル等に変換することができます。

さらに、プロジェクト管理機能もあるため、設定ファイルを変えるだけでフォントサイズ等を変更できます。

# チュートリアル

```shell
mkdir your-project
cd your-project
acc new
mv /favorite.ttf ./font/font.ttf
#好きなフォントデータをお使いください 
```
でプロジェクトを作成します。

好きなエディタでアスキーアートを書いてください。

```shell
nvim main.aasc
```

出力したい場合はビルドで出力することができます。

```shell
acc build --type image
# 画像ファイルを出力
```

詳しくは[Readme.md](https://github.com/pengincoalition/ASCII_art_compiler)をご覧ください。

一番上のアスキーアートを画像として出力した場合

![output](https://github.com/pengincoalition/ASCII_art_compiler/raw/master/explain/img1/output.png)
画面遷移の実装方法まとめ[Xcode/Storyboard]

Xcode/Storyboardで、画面遷移の実装方法をアウトプットしてみようと思います。

#環境
・Mac Book Pro (macOS:Big Sur)
・Xcode(ver:12.5)

#画面遷移①(Storyboardのみ)
1.storyboardでController内のButtonからControllerにSegueをつなぐ。
2.ShowかPresent Modallyを選択
![Unknown.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864623/01dc5469-cd00-f0a7-e3ba-3825dc12dbda.gif)

#画面遷移②(performSegueで遷移)
1.ViewController同士をSegueでつなぐ
2.ShowかPresent Modallyを選択
3.Segueのidentifierを付ける(下記のコードの場合は「next」)
4.画面遷移したいタイミングで下記のコードを書く
![Unknown-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864623/ff72fa74-cbc1-a9c8-4ea7-65a615186de1.gif)

```ruby:ViewController.swift
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    
    @IBAction func next(_ sender: Any) {
        
        performSegue(withIdentifier: "next", sender: nil)
    }
    
}
```

#画面遷移③(performSegue+prepareで値を渡して遷移)
1.ViewController同士をSegueでつなぐ
2.ShowかPresent Modallyを選択
3.Segueのidentifierを付ける(下記のコードの場合は「next」)
4.画面遷移したいタイミングで「performSegue」を書く
5.prepareで値を渡したい処理内容を書く

```ruby:ViewController.swift
class ViewController: UIViewController {
    
    var str = "画面遷移成功"
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    
    @IBAction func next(_ sender: Any) {
        
        performSegue(withIdentifier: "next", sender: nil)
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        
        let nextVC = segue.destination as! NextViewController
        
        nextVC.str = str
    }
    
}
```
```ruby:NextViewController.swift
class NextViewController: UIViewController {
    
    "値を受け取る変数を用意"
    var str = String()
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}
```

#画面遷移④(NavigationController+ Storyboard IDで画面遷移)
1.ViewControllerを選択した状態で、Editor > Embed in > Navigation Controllerを選択
2.画面遷移するViewControllerのStoryboardIDを記述
3.Use Storyboard IDにチェックを入れる
4.下記のようにコードを書く

```ruby:ViewController.swift
class ViewController: UIViewController {
    
    var str = "画面遷移成功"
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    
    @IBAction func next(_ sender: Any) {
        
        let nextVC = self.storyboard?.instantiateViewController(identifier: "nextVC") as! NextViewController
        
        nextVC.str = str
        
        self.navigationController?.pushViewController(nextVC, animated: true)
    }
}
```

```ruby:NextViewController.swift
   class NextViewController: UIViewController {

    var str = String()
    
    override func viewDidLoad() {
        super.viewDidLoad()

      print(str)
    }
}
```


以上で、自分なりに画面遷移の方法をまとめてみました。

Udemyでメモしたコードを自分なりに理解してアウトプットしていこうと思います。
【HCL】aws_lb_target_group 削除できなかった件


## Terraform Example
```terraform
resource "aws_lb_target_group" "this" {
  name                               = "backend"
  port                               = 8080
  protocol                           = "HTTP"
  target_type                        = "ip"
  vpc_id                             = module.vpc.vpc_id
  lambda_multi_value_headers_enabled = false
  proxy_protocol_v2                  = false

  health_check {
    enabled             = true
    healthy_threshold   = 5
    interval            = 30
    matcher             = "200"
    path                = "/"
    protocol            = "HTTP"
    timeout             = 5
    unhealthy_threshold = 2
  }
}
```

上記のような `target_group` が、すでに `aws_lb_listener` に設定された場合、`target_group` を削除しようとすると、こんなエラーが出てきます。


```shell
error creating LB Target Group: DuplicateTargetGroupName: A target group with the same name 'backend' exists, but with different settings
OR
error deleting Target Group: ResourceInUse: Target group 'arn...' is currently in use by a listener or a rule
```

## 解決法
### 1. `create_before_destroy=true` の追加
リソースが変更あった場合、新しいリソース作成してから削除なので、別サービスに使われても、自動的に新しいリソースに関連付けられます。

### 2. `name` から `name_prefix` に変更 
一部サービスは名前を使って、唯一性を保つため、同じ名前のリソース作られても、エラーになってしまいます。`name_prefix` を使うと、毎回ランダムの文字列が付けられるので、問題なく解決できます。

## Terraform 完成形

```terraform
resource "aws_lb_target_group" "this" {
  name_prefix                        = "bakend"
  port                               = 8080
  protocol                           = "HTTP"
  target_type                        = "ip"
  vpc_id                             = module.vpc.vpc_id
  lambda_multi_value_headers_enabled = false
  proxy_protocol_v2                  = false

  health_check {
    enabled             = true
    healthy_threshold   = 5
    interval            = 30
    matcher             = "200"
    path                = "/"
    protocol            = "HTTP"
    timeout             = 5
    unhealthy_threshold = 2
  }

  lifecycle {
    create_before_destroy = true
  }
}
```
Atomのpdf-viewが動作しない件

Atomのバージョン`1.56.0`にて`pdf-view`パッケージが動作しない不具合が生じているらしいです．

解決策を調べました．

https://www.reddit.com/r/Atom/comments/mtuqu4/pdfview_stopped_working/

上のRedditにあるように

`~/.atom/packages/pdf-view/lib/pdf-editor-view.js`

の16行目付近に

```javascript
PDFJS.disableWorker = true;
```

を追加してあげればよいようです．自分の環境でもこの方法でうまくいきました．
最近学んでること

cd  C:\Users\〇〇\Documents\XXX

XXXディレクトリにきて、dirで中身を確認。OKだったので、

そのディレクトリの中でyarnをインストールしました。

yarnとは↓

Node.jsのパッケージを管理するもの

 

そのあと、yarnのサーバをONにする。

yarn serveにすることで http://localhost:8080/が記載されているので、

それをブラウザで表示する。

 

Vue.js コンポーネントとは何か？

コンポーネントとは、構成要素のこと。なにか１つのものを作るときに、それぞれパーツをつかうとおもうけど。

そのパーツのことをコンポーネントという。

WEBページもコンポーネント指向でできている

 

１つのHPには、ヘッダーとかふったーとかボディのページとかいろいろあるけど、それらの要素を分解して

ヘッダーはヘッダー、フッダーはフッダーみたいな感じでわけて作成していくことをコンポーネント指向というわけです

 

gitlab

ローカルリポジトリは、自分の環境にソースとかをもってくるやつ

リモートリポジトリはみんなで書いたソースの集まり。ある意味本番だよね。ここには成功したやつしか挙げてはいけないので。

間違えたソースとかは上げないようにだけ注意してください。

 

①プッシュ

ローカルリポジトリの内容をリモートリポジトリへもっていくこと

 

②プル　

リモートリポジトリの内容を、ローカルリポジトリにもってくること。

プルって引くって意味もあるもんね

 

③コミット

ローカルリポジトリの内容にもってくること

自分の作業環境から、ローカルリポジトリにもっていくこと。

プッシュの前に整える感じかな。

 

④ブランチ

ブランチは作業履歴を枝分かれさせて記録していくためのもの。

ブランチ上での変更は統合されるまで他ブランチに影響しないしされない。

 

⑤マージ

リモートローカルのブランチを合流させる。

リモートのローカルのブランチを合流

（リモートの更新情報をローカルに反映させる）
ZustandとValtioを比較するサンプルコードをcodesandboxで書いてみた

https://twitter.com/dai_shi/status/1391693358305734666

[zustand](https://github.com/pmndrs/zustand)と[valtio](https://github.com/pmndrs/valtio)はコーディングのスタイルは違いますが、用途は似ています。zustandをimmerとともに使う場合は、valtioの方があっていることが多いと思います。

そこで、簡単な例を書いてみました。

zustand+immerの場合

https://codesandbox.io/s/zustandimmer-9f47p

valtioの場合

https://codesandbox.io/s/valtio-nrn51

どうでしょうか。これだけの比較で判断することは難しいですが、狙いが伝われば幸いです。

「React Fan」というコミュニティのSlackでzustandやvaltioに関する質問や雑談ができますので、よろしければご参加ください。

[React開発者向けオンラインサロン「React Fan」の入り口ページ](https://react-fan.axlight.com/)

[React開発者向けオンラインサロン「React Fan」のTwitterアカウント](https://twitter.com/reactfanjp)
li = li.reverse()は間違いです (今日のPython Day10)

#0. はじめに
　今日は思いつかなかったので省略。早速問題を解きましょう！

#1. 問題
　太郎くんは、リストli = [1, 2, 3, 4, 5]を逆順にするために次のようなコードを書いた。しかし実行結果は逆順にならず「None」と出力されてしまった。太郎くんに代わってコードを直そう。

```python:太郎くんのコード
li = [1, 2, 3, 4, 5]
li = li.reverse()
print(li)

# -> None
```

#2. 解答例

```python
li = [1, 2, 3, 4, 5]
li.reverse()
print(li)
```

#3. 解説
　li.reverse()単体にします。li = li.reverse()としてはいけません。これはappend()など割と初期に習うメソッドも同様です (全てのメソッドがこうとは限らない)。reverse()の戻り値はNoneなので太郎くんのように書いてしまうと左辺のliに逆順した結果ではなくreverse()の戻り値が代入されてしまうのだと思います (違っていたらごめんなさい)。

#4. まとめ
・li.reverse()単体でOK。

#5. おまけトーク
　毎日YouTubeに動画を投稿する人ってすごいですよね。毎日投稿してネタがつきないなんて。