OmniAICreator/Qiita-1.07M huggingface dataset:
すでにGitHubで管理しているディレクトリの一部をサブモジュール化する手順

#前提条件

MainDirectory ← 最初の手順のカレントディレクトリ
.
├── SubDirectory
:
└── SubDirectoryForSubmodule ← このディレクトリをサブモジュール化する手順

#作業手順
## サブモジュール化したいディレクトリ（SubDirectoryForSubmodule）をGitの管理から除外する
```zsh
git rm -r --cached SubDirectoryForSubmodule
```

## SubDirectoryForSubmoduleをGitHubにあるリポジトリと同期させる
```zsh
cd SubDirectoryForSubmodule
git init
git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git 
git fetch origin
git merge origin/master
```

## SubDirectoryForSubmoduleのリポジトリをプッシュする
```zsh
git add .
git commit -m "{コメント}" 
git push origin master
```

## MainDirectoryのリポジトリでSubDirectoryForSubmoduleをサブモジュールとして登録する
```zsh
cd ..
git submodule add https://github.com/{ユーザー名}/{リポジトリ名}.git SubDirectoryForSubmodule
git commit -m "{コメント}"
git push origin master
```
VBAの基本操作（入力フォーム）

![入力フォーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/958041/135b8365-894e-a5a8-3313-e5f06c5640b5.png)

```:入力フォームとセルの紐づけ
Private Sub CommandButton1_Click()
Dim x As Long
x = Cells(Rows.Count, 1).End(xlUp).Row

Cells(x + 1, 1) = x
Cells(x + 1, 2) = TextBox1
Cells(x + 1, 3) = TextBox2
Cells(x + 1, 4) = ComboBox1
Cells(x + 1, 5) = ListBox1

TextBox1 = ""
TextBox2 = ""
ComboBox1 = ""
ListBox1 = ""
TextBox1.SetFocus
End Sub
```

```:選択リストの追加
Private Sub UserForm_Initialize()
    ComboBox1.AddItem "男"
    ComboBox1.AddItem "女"
    
    ListBox1.AddItem "A部署"
    ListBox1.AddItem "B部署"
    ListBox1.AddItem "C部署"
End Sub
```
【Python/Pygame】pygame.image.loadにおける、読み込みデータの相対パス指定方法について

#なんでやねん
筆者のPython関係の環境は下記の通り。

OS: Windows10 Home Edittion
IDE: Visual Studio Code ver 1.55.2
Python ver: 3.9.1
pygame ver: 2.0.1

pythonコードと同一フォルダ内に「img」フォルダを置き、その中に「bg.png」を入れ
その画像ファイルを読み込ませるため相対パスを下記の通り記述した。

```Python:
bg = pygame.image.load("../img/bg.png")
```

…のだが、どうにも読み込んでくれない。
VSC先生のコンソールより
「FileNotFoundError: No such file or directory.」とお叱りの言葉を下されるばかり。

#親ディレクトリまでパス指定しよう

調べてみると、pythonファイルの入っている親ディレクトリまで指定しないといけない模様。
Documents内のTestディレクトリ内にpythonコードを入れているので、
正しくは

```Python:
bg = pygame.image.load("../Documents/Test/img/bg.png")
```

とすべきだったらしい。
上記のようなパス指定で無事画像ファイルは読み込めた。
【Ruby】任意の範囲の数値で配列を作る

# Range クラスを利用する
```ruby
nums = [*1..10]
# => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

# to_aメソッド
```ruby
nums = (1..10).to_a
# => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```
Vue.js によるリアルタイムフォームバリデーション方法 メモ


* よく見かけるフォーム入力時にリアルタイムでチェック結果を表示する機能をVue.jsで実現する方法についてメモする。



## 実装例

* アカウント登録画面でメールアドレスバリデーションを行うケースを想定した実装例。

* **処理の流れ**

  1. メールアドレスプロパティを監視する。

  2. 値の変更を検知し、入力チェックメソッド呼び出す。

  3. チェック結果に合わせてメッセージ表示を行う。



* **フォーム**

  * 入力判定結果`isValid`の値に応じて、エラーメッセージリスト`errors`の表示制御を行う。

  ```html
       <form id="form" v-on:submit.prevent="createUser">
          <input
            type="email"
            v-model="mailaddress"
            placeholder="example@example.com"
          />
          <input
            type="password"
            v-model="password"
          />
          <input type="submit" value="Create User" />
        </form>
  	  <ul v-show="!isValid">
           <li v-for="item in errors" :key="item.message">
              {{ item.message }}
           </li>
        </ul>
  ```

  

* **スクリプト**

  ```javascript
  export default {
    data: function () {
      return {
        mailaddress: "",
        password: "",
        isValid: true,// 入力チェック結果
        errors: [],	// エラーメッセージリスト 
      };
    },
    watch: {
      // メールアドレスプロパティウォッチャ
      mailaddress: function () {
        this.errors = [];
        this.isValid = true;
        // メールアドレス入力チェックメソッド呼び出し
        if (
          !this.checkNotNull(this.mailaddress) ||
          !this.checkFormat(this.mailaddress)
        ) {
          this.isValid = false;
        }
      },
    },
    methods: {
      // メールアドレス入力チェックメソッド：不正な入力の場合、対応するエラーメッセージを格納する。
      // nullチェック
      checkNotNull: function (inputdata) {
        var result = true;
        if (!inputdata) {
          this.errors.push({ message: "メールアドレスを入力してください。" });
          result = false;
        }
        return result;
      },
      // 形式チェック
      checkFormat: function (inputdata) {
        var result = true;
        var re = /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/i;
        result = re.test(inputdata);
        if (!result) {
          this.errors.push({ message: "メールアドレス形式で入力してください。" });
        }
        return result;
      },
      ...
  ```

  

## 参考情報

* [フォームのバリデーション](https://jp.vuejs.org/v2/cookbook/form-validation.html)

* [算出プロパティとウォッチャ](https://jp.vuejs.org/v2/guide/computed.html)
* [Vue.jsでフォームバリデーションを作ってみよう！](https://qiita.com/matsumana07384/items/a8f940f681ad42c39a82)
KeePass 系パスワード管理ソフトを Windows, Linux (Ubuntu), Android で使おう

WindowsとAndroidで使っていたKeePassを，Ubuntuでも使おうとしたらはまったので備忘録．

変更前：
* Windows 側クライアント：[KeePass Password Safe](https://keepass.info/)
* Android 側クライアント：[Keepass2Android](https://play.google.com/store/apps/details?id=keepass2android.keepass2android&hl=ja&gl=US)
*使い方：DB file と key file をクラウドストレージで同期して Windows と Android から利用（※具体的には書きませんが，DB と key はクラウドを変えるか，key は同期しない）．

変更後：
* Windows と Android 変わらず
* Ubuntu 側クライアント追加：[KeePassXC](https://keepassxc.org/)
* 問題点：Ubuntu 側で DB が開けない

解決法：
* key file を Ubuntu 側で作り直したら Windows, Android でも読めた ◀ はまりポイント
* ついでに，Windows 側クライアントも KeePassXC に変更（しなくてもOK）

追伸：理由／他の解決方法をご存じの方いらっしゃったら教えてください m (_ _) m
-----

2021/5/28 追記：
* DB,keyファイルを保存しているクラウドの同期が安定（？）していないと，開けないことがある．落ち着いて待つが肝要．
Jestでクラスのメソッドの一部だけを置き換えてテストする方法

# はじめに
Axiosに続くモックネタ第2弾です。
業務で作成しているプログラムに、ランダムな値を発行するメソッドを持つクラスを呼び出す場面がありました。
その場面をJestにてテストするにあたり、「部分的に処理をモック化する」ことが難しかったので、やり方を忘れぬようメモとして、この記事を書きました。

# 環境情報
* TypeScript: 4.1.3
* Jest: 26.6.3
* Node.js: 12.18.3

# テスト対象
実際のプロダクトコードと似たような状況のダミー処理を用意しました。

## メインロジック
この`main`関数に対してテストを書いていきます。

```typescript:main-service.ts
import { KeyClass, Time } from './utils';

export function main(userID: string) {
  const key = new KeyClass({ userID });
  key.updateKey();

  return [...Time.today(), key.randomKey, key.getKeyLength()];
}
```

## ユーティリティ
main関数が呼び出しているユーティリティです。
`KeyClass`の`updateKey`メソッドを呼び出すと、ランダムなキーが発行されます。

```typescript:utils.ts
import { randomBytes } from 'crypto';

export const Time = {
  today() {
    const date = new Date();
    return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
  },
};

export class KeyClass {
  /** ユーザーID */
  userID: string;

  /** ランダムなキー */
  randomKey?: string;

  constructor(init: Partial<KeyClass>) {
    this.userID = init.userID || '';
    this.randomKey = init.randomKey;
  }

  updateKey(): void {
    this.randomKey = randomBytes(32).toString('hex');
  }

  getKeyLength(): number {
    return this.randomKey?.length ?? 0;
  }
}
```

# テストコード

そのままだと結果にランダムな値が含まれてしまい、`toEqual`で戻り値をそのまま比較することが出来ません。(実際には`expect.stringMatching`で正規表現を使った検証も可能ですが、ここでは触れません)
そこで、`jest.mock`を用いて一部分をモック化します。
以下の例では、`KeyClass.randomKey`メソッドのみをモック処理に置き換えており、`Time`や`KeyClass.getKeyLength`は本来の処理のままとなっています。

**注意**
`jest.mock`の呼び出しは、必ず`describe`の外側で行ってください。
そうしないと、モック化が正しく行われません。
(私はそれに気づかず、小一時間ほど悩まされました・・・)

```typescript:__tests__/main-service.test.ts
import * as target from '../main-service';
import { KeyClass } from '../utils';

/** テスト用の戻り値 */
const RANDOM_KEY_FOR_TEST = '0123456789abcdef0123456789abcdef';

let keyClass: KeyClass; // コンストラクタ呼び出しを確認したいクラス
let mockUpdateKey: jest.Mock; // モック化したメソッド

jest.mock('../utils', () => {
  // 実際のモジュールを取得
  const Utils = jest.requireActual('../utils');
  return {
    // モック化不要なものはそのまま
    ...Utils,
    // テスト対象のみ置き換える
    KeyClass: jest.fn().mockImplementation((param) => {
      // 本物のインスタンスを生成
      keyClass = new Utils.KeyClass({ ...param });

      // モック化したいメソッドを置き換え
      // →結果はランダムな値ではなくなる
      mockUpdateKey = jest.fn().mockImplementation(() => {
        keyClass.randomKey = RANDOM_KEY_FOR_TEST;
      });
      keyClass.updateKey = mockUpdateKey;

      return keyClass;
    }),
  };
});

describe('main', () => {
  const USER_ID = 'test-user-id';

  beforeEach(() => {
    jest.clearAllMocks();
  });

  test('実行した年月日とランダムなキー、キー長が配列形式で返却されること', async () => {
    const today = new Date();
    const ymdArray = [today.getFullYear(), today.getMonth() + 1, today.getDate()];

    const expectedResult = [...ymdArray, RANDOM_KEY_FOR_TEST, 32];
    const result = target.main(USER_ID);
    expect(result).toEqual(expectedResult);
    expect(KeyClass).toHaveBeenCalledTimes(1);
    expect(KeyClass).toHaveBeenCalledWith({ userID: USER_ID });
    expect(mockUpdateKey).toHaveBeenCalledTimes(1);
  });
});
```

テストを実行した結果が、以下の出力です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653162/c75e68b0-dae2-68de-aa6e-6e90f5b6d095.png)
Google Domainsで取得した独自ドメインのサブドメイン配下に任意のファイルを配置する方法

# 概要

[Google Domains](https://domains.google/) で取得した**独自ドメインのサブドメイン配下に、任意のファイルを配置**する方法を紹介します。

例えば、あなたが `example.com` というドメインを取得している場合に、 `https://file.example.com/` という URL 配下にテキストファイルを配置することを想定しています。
具体的には、[アプリ向けの認定販売者宣言システムで求められる `app-ads.txt`](https://support.google.com/admob/answer/9787936) をあなたの管理するドメイン配下に配置する際などに、この方法は役立ちます。

# 前提条件

* [Google Domains](https://domains.google/) で独自ドメインを取得済み

# 設定方法

* ステップ1. **[Firebase Hosting](https://firebase.google.com/docs/hosting) 上で任意のファイルを公開する**
* ステップ2. **前ステップで公開したウェブサイトへの A レコードを [Google Domains](https://domains.google/) で追加する**

## ステップ1: Firebase Hosting 上で任意のファイルを公開
以下のページで紹介されている手順に従い、 **[Firebase Hosting](https://firebase.google.com/docs/hosting) を利用し任意のファイルをウェブ上に公開**します。
さらに、 **Firebase Hosting で公開したプロジェクトを、(任意のファイルを公開したい)サブドメインと接続**します。その際に表示される **A レコード**の情報を次のステップで利用します。

* **設定手順の参考ページ👉**  [静的なWebサイトを無料・独自ドメイン、常時SSLでgoogleのクラウド「Firebase」に公開する方法](https://www.non-standardworld.co.jp/20476/)

## ステップ2. A レコードを Google Domains で追加する

上記ステップの最後で Firebase Hosting 上で表示される **Aレコード を、 Google Domains のカスタムリソースレコードに追加**します。追加後しばらく待つと、あなたのサブドメインへのアクセスが、 Firebase Hosting で公開したウェブサイトへのアクセスになります。

* **設定手順の参考ページ👉**  [Firebase Hosting + Google Domainsで独自ドメインを設定する方法](https://note.hiko1129.com/1565780088937/)
ShopifyのカートページでjQuery.postを使ってUncaught SyntaxError: Unexpected token ':'エラーが出た時の対処法

## ShopifyのカートページでjQuery.postを使ってUncaught SyntaxError: Unexpected token ':'エラーが出た時の対処法
やったこと：ブランクテーマからカートページを作成中、カートのアイテム数量をAjaxを使用して値を更新しようとしていた。
参考にしたのが、こちらhttps://shopify.dev/docs/themes/ajax-api/reference/cart#post-cart-change-js
コード： ```jQuery.post('/cart/change.js', { quantity: 変更したい値, line: ラインNO. });```
操作：数量を変更すると、以下のエラーがずっと出て値が変更されない…
エラー：Uncaught SyntaxError: Unexpected token ':'
約：”書き方間違ってるよー”

ってずっと言われ続けた！

## 対処法
```
      jQuery.post({
        url:'/cart/change.js',
        dataType: 'json',
        data: { quantity: 変更したい値, line: ラインNO. }
      });
 ```
で、OK。

## なぜ？
参考：https://community.shopify.com/c/Shopify-APIs-SDKs/AJAX-POST-cart-add-js-Functions-but-returns-Syntax-Error/td-p/135455
回答の文章中にありました！POSTした先（サーバー側）がデータのタイプを適切に認識できておらず、エラーが出てきていた。
なので、文章中のコードを試してみたができず…
そんなこんなで色んな記事を漁っていたら、上記のコードが書いてある記事のURLがどこに行ったか分からなくなってしまいました！
ごめんなさい。

## まとめ
ShopifyのCart APIでUncaught SyntaxError: Unexpected token ':'が出た時は、```dataType: 'json'```を渡して、データのタイプがJSONなのを教えてあげる！

まだまだ、日本語約の少ないShopify＆Liquidですが、翻訳ツールを使いこなして日本のShopifyを盛り上げていきましょう！！
どなたかのお役に立てれば、幸いです！
GitHubのアカウントをディレクトリごとに切り替える

#はじめに
大学用のGitHubアカウントと，プライベート用のGitHubアカウントを使い分けようと思い，調べたことをまとめてみました．

#複数アカウントの使い分け
###メインのアカウントについて
まずは以下のコマンドでメインのアカウントについて，`~/.gitconfig`に設定します．この際，オプションは`--global`とします．
既に設定が完了している場合は，読み飛ばしてください．

```
$ git config --global user.name "name"
$ git config --global user.email "email"
```

これでメインアカウントの設定が完了しました．

###サブのアカウントについて
メインのアカウントでは，全てのディレクトリに対してアカウントの紐付けがされています．ここでは，サブのアカウントをディレクトリごとに紐付けていきます．

まずは，サブのアカウントで使いたいディレクトリへ移動します．
先程，`--global`オプションを用いて設定を行いましたが，ここでは`--local`オプションを用います．これで，そのディレクトリ内の`./.git/config`にそれぞれのユーザネーム，メールアドレスが登録されます．

```
$ cd sub_dir  // ディレクトリ名は任意
$ git config --local user.name "name"
$ git config --local user.email "email"
```

このときの`"name"`と`"email"`には，サブのアカウントのユーザネーム，メールアドレスを入れてください．

###.ssh/configファイルの設定
`.ssh/config`の設定には，それぞれのアカウントの秘密鍵のパスを指定します．なお，`Host`名は異なる名前にします（`HostName`が同じのため，秘密鍵・公開鍵の整合性が保たれないため）．

```ssh
Host github-research
    HostName github.com
    IdentityFile ~/.ssh/research_rsa
    User git

Host github-study
    HostName github.com
    IdentityFile ~/.ssh/study_rsa
    User git
```
####注意
リモートリポジトリの情報の追加は，一工夫必要です．
メインとサブでは，それぞれの`Host`名を参照したremote urlの設定を行ってください（Pushしたときにアクセス権がないよと言われる）．

```
$ git remote add origin git@github-research:<メインアカウント名>/<リポジトリ名>.git
$ git remote add origin git@github-study:<サブアカウント名>/<リポジトリ名>.git
```

#おわりに
うまくできれば，それぞれのディレクトリごとに`.git/config`の設定と，リモートリポジトリの情報の追加でそれぞれのアカウントで使い分けができるはずです．
ほかにも，シェルコマンドを定義して切り替える方法もあるみたいです．
しばらく使ってみて，もっと効率の良い切替方法があればまた更新したいと思います．

参考記事
[複数のgitアカウントを使用する場合](https://qiita.com/yamataku29/items/4744c9c70ad793c83b82)
[GitHubを複数のアカウントで利用するためのメモ](https://qiita.com/BlueEventHorizon/items/f9d81e3659ebce9e1ffc)

#追記
他人のプライベートリポジトリをcloneする場合

```
$ git clone git@github-study:[他人のアカウント名]/[リポジトリ名].git
```
Docker＋Railsでrubocopを使おうとしてError: Unknown Ruby version 2.6 found in `.ruby-version`.を解決した話。

#動作環境

Mac OS Big Sur 11.1
Docker 20.10.5
Docker-compose 1.28.5
Ruby 2.6.5
Rails 6.0.0

#概要

Dockerを使ってWebアプリケーションを練習で作っている時に、コードがぐちゃぐちゃになったので修正しようと思いました。
しかし、私の動作環境ではバージョンのサポート外ですと出てしまいました。

#やってみたこと

.rubocop.ymlに、以下のコードを追記してみました。

```
TargetRubyVersion: 2.6.5
```

それで無理やりできないかなあと思ったのですが、だめでした。

#解決策

単純にRubocopのバージョンが古すぎたことで起きたことなので、それを解決してあげれば問題はないです。

```
gem 'rubocop', '~> 0.51.0', require: false
#から

gem 'rubocop', '~> 1.15.0', require: false
#に上げてあげましょう
```
そうして、

```
docker-compose run web gem update 
```
をしてあげましょう。
もちろん最後にはきちんとコンテナイメージをビルドしてあげてください。

```
docker-compose build
```

#感想

これわざわざ全部のGemをUpdateさせるような記述じゃなくて

```
docker-compose run web gem update rubocop
```
のほうが早く終わったんじゃないかということに書いていて今気づきました。
何やってんだろうか。
自戒
みなさんも気をつけてください
それと今回回答してくれた人まじでありがとうございます。(^o^)
Vue Selectの簡単な使い方まとめ

Vue.jsでプルダウン形式のコントロールを実装できるVue Selectを使う際のメモ。

[公式ドキュメント](https://vue-select.org/)

##使い方

###HTML

```HTML

<div id="app">
　<v-select v-bind:options="options" v-model="selected" :loading="options.length <= 0"></v-select>
　<p>値：{{selected}}</p>
</div>

```

###JavaScript

```JavaScript

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: ["選択肢１","選択肢２"],
    selected: '',
  }
})

```

v-selectにバインドされたoptions配列の中身がプルダウン形式で選択できる。
選択した値はselectedにアクセスすることで参照できる。
loadingオプションを指定することで、選択肢をバックグラウンドで取得している間などにローディングマークを表示できる。

###CodePenサンプル(CSSは公式テンプレートのまま)
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="shoito66" data-slug-hash="ZEeeqyQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue Select Sample">
  <span>See the Pen <a href="https://codepen.io/shoito66/pen/ZEeeqyQ">
  Vue Select Sample</a> by shoito66 (<a href="https://codepen.io/shoito66">@shoito66</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
masterをbithubにpushし忘れてブランチだけpushしてしまった

![20210523-145238.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/da710641-109c-16d4-367b-b21988da0bd8.png)
start-snsというブランチしかない状態


1.マスターをgithubにpush
-

２.githubのsettingを選択
-

３.Branchesを選択
-

4.Default Branch 
-
![20210523-150818.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/c34d37b7-6c22-9ae0-533b-607371adab13.png)
の矢印でデフォルをmasterに変更

![20210523-150608.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/d020dde2-5477-bd06-7566-164314020596.png)

マスターを選択
![20210523-145606.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/3d0a536f-6021-811b-5206-7f61111f1398.png)

変えてもいいかアラートが出ます
![20210523-150936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/233c79b1-89e0-6f89-a29f-7a439816b065.png)


5.切り替え完了
-
![20210523-145654.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/d1a0c3ff-9535-63de-e158-de682be9e2a8.png)

6.githubDesktopがまだ前の情報を持っているので一旦終了。
-
理由：後からマスターをあげているのでプルリクエスとしてマージするときに後からあげたmasterにマージされてしまうのを防ぐため

7.githubDesktop再起動
-

８.確認方法：ブランチの方を表示した場合にプルリクエスとが上がって来なければ成功
-
【laravel8 × vue3】Laravel Sanctumを利用して、認証機能を作成する

```
composer require laravel/sanctum

```

```
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
```

```
php artisan migrate
```

```php:app/Http/Kernel.php
'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,//追加
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],
```

```:fortifyインストール
composer require laravel/fortify
```

```:公開
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
```

```php:config/app.php（プロバイダーの登録）
'providers' => [
        App\Providers\FortifyServiceProvider::class, //これを追加
    ],
```

```php:config/fortify.php
//viewを返すroute入らないので、これで非表示にする。
'views' => false,
```

あとはfortifyが用意してくれているルーティングにpostしてやればOK。

```vue
<template>
  <div class="mx-auto max-w-screen-xl mt-10">
    <button type="submit" @click.prevent="login">ログイン</button>
    <button type="submit" @click.prevent="logout">ログアウト</button>
  </div>
</template>

<script>
export default {
  methods: {
    async login() {
      await axios.get("/sanctum/csrf-cookie");
      try {
        await axios.post("/login", {
          //ここはフォームで入力された値を突っ込むようにする。
          email: "test@example.com",
          password: "test",
        });
      } catch(e) {
        console.log(e+"処理失敗"); 
      }
    },
    async logout() {
      try {
        axios.post("/logout");
      } catch (e) {
        console.log(e+"処理失敗"); 
      }
    }
  },
};
</script>
```
GitHubリポジトリの一部を、別のGitHubリポジトリとして独立させる

github.com/mrmt/john/doe を github.com/mrmt/doe として切り出して独立させる例

からっぽの github.com/mrmt/doe リポジトリを作っておく

github.com/mrmt/johnをいったんきれいにチェックアウトする

```terminal
git clone git@github.com:mrmt/john.git
```

doe以下を別リポジトリとしてpushできる状態に再構成する

```terminal
cd john
git filter-branch --subdirectory-filter doe HEAD
```
それを github.com/mrmt/doe にpushする

```terminal
git remote add tmp git@github.com:mrmt/doe.git
git push tmp
```

github.com/mrmt/johnにて、doeを掃除する

```terminal
cd ..

rm -rf john
git clone git@github.com:mrmt/john.git
cd john

git rm -r doe
git commit -a -m 'moved to github.com/mrmt/doe repository'
git push
```
CSS設計 第一回 CSSが抱える課題

# はじめに
社内でおすすめのCSSフレームワーク選定について質問されましたが、
明確な答えを持たなかったので本記事を通して自分なりの意見をアウトプットしたいと思います。
今回は第一回として、CSSが抱える課題について触れていきます。
CSSフレームワークについて話をする前に、このあたりの話を整理しておいた方が建設的な意見になると考えています。

- [第一回 CSSが抱える課題]()
- 第二回 CSSの設計手法
- 第三回 CSSフレームワーク


# CSSが抱える問題
プレーンなHTMLとCSSを使ったページをユースケースとして考えます。
設計手法やフレームワークは、これから書いていく課題のとの解決策として上がってくると思いますが、第二回でそれらには触れていきます。

## グローバルなスコープ
CSSのスコープはグローバルです。
グローバルということは、以下のような問題を発生させます。

- どこからでも参照ができてしまう
- 上書きができてしまう

上記の問題によって生じる不都合は何でしょうか。
開発者に必要のないクラスやプロパティの追加を許容することだと考えます。
複数のページを跨いで共通で読み込まれるCSSファイルを例に考えてみます。

例. ページAとページBで読み込まれるbasic.css
bacis.cssは汎用的なボタンのCSSを定義した共通ファイルと仮定します。

```basic.css
.button {
  background-color: blue;
  width: 150px;
  height: 50px;
  font-weight: bold;
  color: white;
}
```

### Q. ボタン赤くしたいんだけど
ある日、ページBで表示するボタンの色を赤く変更したくなりました。
ただしページAのボタンの色を変更したくありません。
この場合、開発者がとる選択肢は、大抵以下のいずれかになると思います

1. ページB用の新しいCSSファイルを作成して、背景色を赤にするCSS定義を追加する
2. 共通CSSに背景色が赤のボタンを表示できるCSS定義をする

赤いボタンはページBでのみ使われるため新しいCSSファイルを作成する方が自然だと考えます。

```pageB.css
.bg-red {
  background-color: red;
}
```

ページBで表示するボタンは`.button`と`.bg-red`のクラスが併用されるようになりました。
この時点では問題は発生していないように見えます。

### Q. ボタン大きくしたいんだけど
別のある日、ページAのボタンを大きくしたいという要望が出てきました。
`.button`クラスはページBで使われているクラスでした。
basic.cssを変更するとページBのボタンまで大きくなってしまいます。開発者はどうするでしょうか。

1. ページA用のCSSファイルを作成して、ボタンを大きくできるCSS定義をする
2. 共通CSSにボタンを大きくできるCSS定義を追加する

ボタンを大きくするという要件は、ページAの話ですから新しいCSSファイルを作成するのが自然なような気がします。

```pageA.css
.btn-large {
  width: 300px;
}
```

ページAで表示するボタンは`.button`と`.btn-large`のクラスが併用されるようになりました。

ここで改めてbasic.cssを見てみたいと思います。
共通定義のはずが、`background-color`と`width`は単一のページでしか適用されない値になってしまいました。
それぞれのページの都合にそぐわない状態となっていて、すでに`.button`は汎用的なボタンのCSS定義の役割を失ってしまっています。

```basic.css
.button {
  background-color: blue; /* ページBでは 'red' */
  width: 150px; /* ページAでは300px */
  height: 50px;
  font-weight: bold;
  color: white;
}
```

### 見た目が表現できていれば良い？
このくらいの規模であれば、basic.cssの`.button`の定義は消去して、pageAとpageBそれぞれで使用するCSS定義をすることができると思います。
ただし現実のプロジェクトでは、basic.cssは100行、200行あるかもしれないし、pageA.cssについても同様です。
またbasic.cssはページCやページDでも読み込まれているかもしれません。

ボタンの大きさを変えるだけなのに、他のページに影響が出るかもしれない共通CSSの掃除をするコストを払うでしょうか。
上書きを上書きするような新規のクラスを定義してしまうかもしれません。
加えて、pageA.cssはpageAのレイアウトを拡張したページでも使われてしまうかもしれません。その場合pageA.cssはbasic.cssと同じ道を辿る可能性があります。

そうして本来必要のないCSSが大量に発生して、開発者はどのくらいの無駄があるかを把握する手段も無くなってしまいます。
(grepして地道に必要なCSSなのかみていくことはできるかもしれませんが、やりたくない)
こうしてカオスなCSSはできていきます。
カオスなCSSは変更の影響範囲を難しくします。意図したスタイルの変更が適用されなかったり、セマンティックなHTMLを維持できなくなります。

また、ユーザーのいるWebサイトで読み込まれるリソースは軽い方が良いことは明らかです。
しかし、CSSの変更は往々にして、見た目が表現できていれば良いだろうという考えに陥りがちです。
保守性の観点でもサーバーサイドやインフラに比べて軽視されてしまうのはある程度仕方ないかと思います。

# 良いCSS
では良いCSSの定義は何でしょうか？
Googleのエンジニアが4つのポイントが紹介しています。

- 予測できる
- 再利用できる
- 保守できる
- 拡張できる

・予測できる
「スタイリングが期待通りに動くかどうか」。意図した部分に変更が行われるか。
大きなサイトでは必須になる考え方。

・再利用できる
既存パーツの再利用をすることができる。UIコンポーネントの抽象化が適切にされている

・保守できる
新しいモジュールや機能の追加をした時に既存のCSSをリファクタリングする必要なない状態

・拡張できる
複数のエンジニアで保守が容易であること。保守をするために必要な学習コストが高すぎない状態

詳細は引用元を参照してください
引用: https://philipwalton.com/articles/css-architecture/ (CSS設計完全ガイド
～詳細解説＋実践的モジュール集)

# まとめ
CSS自体は簡単です。書いたプロパティの足し算です。
CSSの難しさは、設計部分にあって、グローバルスコープにどう対処するのかということと、CSS自体が開発・保守の範囲で軽視されがちであることだと考えます。
つまり無秩序な状態をいかに仕組みとして回避するかです。
次回は、具体的なCSSの設計手法について紹介をしたいと思います。


# 参考図書
CSS設計完全ガイド 詳細解説＋実践的モジュール集
Mecabをホームディレクトリ下にインストールする方法

Mecabを`/usr`や`/usr/local`直下にインストールしたくない場合のインストール方法
今回は`$HOME/.local/` `/home/username/.local/`配下にインストールした。

##使用環境
- Ubuntu Server 20.04.2 LTS Server

##Mecabのダウンロード
Mecabの公式サイトからダウンロード可能 【http://taku910.github.io/mecab/#download】

執筆時最新版は`mecab-0.996.tar.gz`

~~~
$ wget "https://drive.google.com/uc?export=download&id=0B4y35FiV1wh7cENtOXlicTFaRUE" -O mecab-0.996.tar.gz
~~~

##Mecabのインストール
解凍・インストール

~~~
$ tar xvfz mecab-0.996.tar.gz
$ cd mecab-0.996

$ ./configure --enable-utf8-only --prefix=$HOME/.local
$ make
$ sudo install
~~~

`--prefix=$HOME/.local`でインストール先を指定している

##辞書のダウンロード・インストール
今回はIPA 辞書を使用する
同じく公式サイトからダウンロード可能【http://taku910.github.io/mecab/#download】

~~~
wget "https://drive.google.com/uc?export=download&id=0B4y35FiV1wh7MWVlSDBCSXZMTXM" -O mecab-ipadic-2.7.0-20070801.tar.gz
~~~

解凍・インストール

~~~
$ tar xvfz mecab-ipadic-2.7.0-20070801.tar.gz
$ cd mecab-ipadic-2.7.0-20070801

$ ./configure --with-charset=utf8 --prefix=$HOME/.local/ --with-mecab-config=$HOME/.local/bin/mecab-config
$ make
$ make install
~~~

Mecab本体と同じく、`--prefix=$HOME/.local`でインストール先を指定。
`--with-mecab-config=$HOME/.local/bin/mecab-config`でmecab-configの場所を指定。

##パス・環境変数の追加
このまま実行してもエラーを吐くのでもろもろを追加する

~~~sh
_MECAB_PREFIX="$HOME/.local"

PATH="$PATH:$_MECAB_PREFIX/bin"

LD_LIBRARY_PATH="$_MECAB_PREFIX/lib"
export LD_LIBRARY_PATH

MECABRC="$_MECAB_PREFIX/etc/mecabrc"
export MECABRC
~~~

追加方法はお好みの方法で (自分は`.bash_profile`を作成して追加した)
設定ファイル追加後は`source`コマンドで更新すること
<br>
***パスが通せていない場合、このようなエラーメッセージが表示される。***
</br>

- LD_LIBRARY_PATHが設定されていない場合

~~~
mecab: error while loading shared libraries: libmecab.so.2: cannot open shared object file: No such file or directory
~~~

- MECABRCが設定されていない場合

~~~
param.cpp(69) [ifs] no such file or directory: /usr/local/etc/mecabrc
~~~

##動作テスト
~~~
$ mecab
赤いインクと青い色鉛筆で絵を描いた
赤い    形容詞,自立,*,*,形容詞・アウオ段,基本形,赤い,アカイ,アカイ
インク  名詞,一般,*,*,*,*,インク,インク,インク
と      助詞,並立助詞,*,*,*,*,と,ト,ト
青い    形容詞,自立,*,*,形容詞・アウオ段,基本形,青い,アオイ,アオイ
色鉛筆  名詞,一般,*,*,*,*,色鉛筆,イロエンピツ,イロエンピツ
で      助詞,格助詞,一般,*,*,*,で,デ,デ
絵      名詞,一般,*,*,*,*,絵,エ,エ
を      助詞,格助詞,一般,*,*,*,を,ヲ,ヲ
描い    動詞,自立,*,*,五段・カ行イ音便,連用タ接続,描く,エガイ,エガイ
た      助動詞,*,*,*,特殊・タ,基本形,た,タ,タ
EOS
~~~
UIFlow(M5Stack)でSCD30（CO2センサー)を使う

UI Flowで使えるSCD30（CO2センサ）のカスタムブロックを作りました。
M5Stackの標準Port（PortA）で使えます。　Grove SCD30や水田かなめさんのCO2モニターキット( https://www.switch-science.com/catalog/6923/ )でも使えると思います。
ダウンロード先
https://nwws.jpn.org/M5StackUIFlow/UIFLOW_SCD30_R3.zip

#導入方法
1.ダウンロードしたファイルを展開します。
2.CUSTOMをクリックし、Open *.m5b ファイルを開き、SCD30_I2C.m5bを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/a31586b6-79a9-ebcc-9d1b-362b7a2842bf.png)
3.CUSTOMにSCD30_I2Cが増えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/22b4b11b-5073-025f-b395-ca000ed0ecda.png)

#サンプルファイル
展開したファイルにサンプルがあるので参考にしてください。CO2Monitor.m5f
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/51ee8ca0-cbe4-e2e2-22c6-c02d145dccde.png)

#説明
Measure & Readの返却値
0　---　正常
-1　----　データが無い
-2　----　通信エラー(I2CBUSエラー)
-11,-12,-13　----　通信エラー（CRCが合わない）
Reactプロジェクトの作成と実行

#1 事前準備
+ npmのインストール
+ yarnのインストール

#2 プロジェクトの作成
+ 任意のフォルダでコマンド実行

```
npx create-react-app react-app 
```
#3 プロジェクトの実行
+ 作成されたプロジェクトのフォルダに移動して、コマンド実行

```
cd react-app
yarn start
```
Sqlite　学習メモ

#特定のテーブルのカラムの確認

```
pragma table_info('テーブル名')
```

#カラム名を表示させる

```
.heraders ON
```

このコマンドをsqliteのコンソール上で打つ

#Railsアプリからsqliteに接続する方法

```
rails dbconsole
```

#sqlite本体のconfigの一覧を取得

```
.show
```

#...>から脱出できない時

```
;
```

セミコロンからのからのenterを押すと脱出できる
AWS Amplifyとは

Amplifyでアプリ制作を通じて学んだAWSについてまとめてみました。

#そもそもAWSとは
AWSとはAmazon Web Servicesの略で、Amazonが提供している２０0以上のクラウドコンピューティングサービスの総称のことになります。
2020年時にクラウドマーケットは１０兆円規模で、AWSはその中で３３％のシェアとトップでした。
(2番目はAzure（１８％）、３番目はGoogle Cloud（９％）、４番目はAlibaba Cloud（６％）...と続いていきます）

そもそものクラウドコンピューティングサービスはコンピューターの機能、サーバー、ソフトウェアを、ネットワーク上からダウンロードして利用することのできるサービスのことです。
初期投資が無料だったり、サーバーやストレージ、データベースを迅速に立ち上げて使用することができると言うメリットがあります。

大企業や公的機関がクラウドへの乗り換えは今後はますます増えています。なので今のうちにクラウドについて学ぶことは大切になってきます。
その中でトップシェアを誇るAWSを勉強しておけば、かなり市場価値は上げれるようになるので、何を勉強するべきか迷っている人にはAWSは良い選択肢だと思います。


#Amplifyとは
AmplifyはAWSを使用したスケーラブルなWeb・モバイルアプリ開発のためのフレームワークです。Amplifyを用いることで複雑なバックエンドの構築、アプリケーションとの結合、バックエンドとインフラをAWSにサーバーレスに任せることができます。インフラ構築からデプロイまでを一気通貫で行えます。

Amplifyは以下の三つの要素で構成されています。
・Amplify CLI 
・Amplify Framework
・Amplify Console

**Amplify CLI**
コマンドベースで各種AWSサービスを対話式で設定や構築するツールのこと。
（CLIではAPI、Authentication、Storage、Functions、Hostingなどができます。）

**Amplify Framework**
クライアント側のフレームワークで、UIコンポーネントや各種JavaScriptライブラリのこと。

**Amplify Console**
静的なホスティング機能とCI/CD等のデプロイ機能を自動化したマネージドサービスのこと。

Amplifyの魅力はさまざまなAWSサービスとフロントエンドアプリケーションのつなぎこみが簡単に行えるのでスピード感を持ってアプリを作れることかなと思います。

#Amplifyを触って学ベるAWSサービス
Amplifyでアプリを作っているとたくさんのAWSサービス（Cognito、AppSync、DynamoDB、Lambda、S3、EC2など）が出てきます。
自分はAmplifyを触る前は全くAWSを触ったことがなかったので全てのサービスが新鮮でした。Amplifyを触るうちに理解できるようになりましたが、事前に知っておいた方が断然良いです。なので、AWSについて全く知らない方は少しインプットしてからAmplifyに挑むことをお勧めします。お勧めのUdemy講座を貼っておきます。

https://www.udemy.com/course/aws-nyumon-beginner-cloud-practitioner-ec2-vpc-rds-s3-elb-lambda-iam/



上記のサービスの中でかなりCognitoとAppsyncが好きになったので、最後にこの二つのサービスについて学んだことを書いて終わりにしたいと思います。

##Cognito
ウェブアプリケーションやモバイルアプリケーションの認証、許可、ユーザー管理をしてくれるサービスになります。
Cognitoの特徴としてユーザープールとIDプールが上げらるかと思います。
ユーザープールはアプリユーザーのサインアップとサインインオプションを提供するユーザーディレクトリで、IDプールはAWS の他のサービスに対するアクセスをユーザーに許可してくれます。

Amplifyでアプリを作っていく中で認証を実装時やGraphQLのスキーマを定義時にCognitoの知識が必要になります。ここの知識がないとDynamoDBにデータを取りに行く際に権限がないと怒られたり、ログインしていないユーザーが権限を持ってしまったりと意図した挙動をしなくなることがあるので、かなり大切になるかと思います。


##AppSyncとは
AppSyncはGraphQLのエンドポイントを提供してくれるサービスで、DynamoDB や Lambda、その他のデータソースとの安全な接続に必要な、面倒な作業を自動的に処理してくれます。
（AppSyncは直接DynamoDBの値を取得・更新・削除することができます）
従来のREST API 形式だとAWSではAppSyncではなくAPI Gatewayを提供しています。


AmplifyでCRUDアプリを作ったりと何をするにもAppSyncは必要になります。
個人的にはAmplifyを触っていれば自然と動きは理解できるのかなと思います。

#最後に
もっとAWSについては学んでクラウドに強いエンジニアを目指していきたいです。

Amplifyのドキュメンントに目を通しつつハンズオンチュートリアルをやるとかなり理解度が上がるので、Amplifyに挑戦したい方はぜひやってみて下さい。

https://amplify-sns.workshop.aws/ja/00_prerequisites.html

https://docs.amplify.aws/start/q/integration/react

参考記事

https://aws.amazon.com/jp/

https://www.sbbit.jp/article/cont1/43183
DKIM とは？

## 勉強前イメージ

SESの設定した時に出てきたやつで
なりすましとか防止するやつ？

## 調査

### DKIM とは？

DomainKeys Identified Mail の略で、
公開鍵/秘密鍵での暗号技術を使った認証方法で、電子署名を利用してメール送信元が正しいか判断します。
受信者が検証することで送信者のなりすましやメールの改ざんを検知できるようにします。

そういえば [ここでも](https://qiita.com/miyuki_samitani/items/3a0826be743597186987) 調べてたみたい。

### DKIMの仕組み

1. 送信者はメールサーバに `秘密鍵` を登録
2. 送信者はDNSサーバに `公開鍵` を登録
3. 送信者が送ったメールに `秘密鍵` を用いて署名を付けます
4. 送信先のメールサーバはメールを受け取ったら、送信元のDNSサーバに公開鍵を要求してもらう
5. 公開鍵を使用し、署名を検証します

![2021-05-201# DKIM とは？ - diagrams.net - Google Chrome 2021-05-.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/05bb508e-c5a1-d04b-34f2-f12a2d06bd5d.png)

### 署名方法

DKIMの署名方法には2種類あります。

- 第三者署名

メールの送信者のドメインではなく、メールリレーサービスなどのドメインで署名する方式です。

- 作成者署名

メールの送信者のドメインで署名する方式です。
メール送信者が保有するドメインに対して署名を作成し、メールに付与します。

### DKIMをパスしたかどうかの確認方法(Gmail)

Gmailを開き、左の `︙` を開きます。
`メッセージのソースを表示` を進むと別タブで詳細が表示されます。

![2021-05-2011aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/73e0dea6-3b84-e825-f422-4dca7481f313.png)


下記のように `DKIM` を見るとパスしたかどうか確認することが出来ます

![2021-05-2010元のメッセージ - Google Chrome 2021-05-20 23.36.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/3ae00c81-e6e6-5b79-b8a5-9f6cfe4f25bd.png)


## 勉強後イメージ

前勉強してたのに覚えてなかったな・・・・
今度こそは覚えておこう。

## 参考

- [DKIMとは？送信ドメイン認証を理解して迷惑メールを回避しよう](https://www.kreisel.bz/lab/dkim_avoid)
- [DKIMの仕組み・特徴・メリットとは？](https://baremail.jp/blog/2021/03/02/1070/)
Tips: クライアント上で特定のクエリパラメータのみを書き換える

## これは何
この記事はフロントエンド強化月間の参加記事です。

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


クライアント上でURLの特定のクエリパラメータのみを書き換える上手い方法をまとめておきます。


## クライアントでクエリパラメータを書き換えるときの問題
クライアント上で検索やページネーションの状態をクエリパラメータとして保存したい場合は多くあると思います。
愚直に変更する方法として、以下のようにURLにクエリパラメータを追加する方法があります。

```js:誤った例1
window.location.href = `/path?page=1`
```

しかしこの方法には問題があります。その問題とは「他のクエリパラメータを欠損させてしまう」ことです。
例えばもともと`?foo=1`のような値が設定されていた時、上の実装ではこの値を欠損させてしまいます。

こクエリパラメータを欠損させないようにするために、以下のような方法を考えるとします。

```js:誤った例2
window.location.search = `${window.location.search}&page=1`
```

しかしこれにも問題があります。次の問題は「すでに指定したクエリパラメータが付与されていたとき、2個同じクエリが設定されてしまう」問題です。

例えは上の例だと、すでに`page=2`みたいな値が設定されていた場合、結果は`page=2&page=1`のようになってしまいます。

## クライアントでクエリパラメータを書き換える正しい方法

本来やりたかったことは以下のようなことです。

1. 触っていないパラメータはそのまま状態を引き継ぐ
1. 追加しようとしたパラメータがすでに設定されていた場合、追加ではなく更新を行う

この条件を満たすような実装は、`URLSearchParams`を用いることで実現することができます。

```js:正しい例
const params = new URLSearchParams(window.location.search) // クエリパラメータを操作するためのオブジェクト
params.set('page', '1') // クエリパラメータに存在しない場合は追加、存在しているときは更新を行う
window.location.search = params.toString() // 新たなクエリパラメータとして設定
```

これで、要件を満たした正しいクエリの更新を行うことができます。

## 参考文献
https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/set
[AtCoder] ABC 182 D - Wandering

https://atcoder.jp/contests/abc182/tasks/abc182_d

最初は愚直に解いたら時間超過してしまったので工夫しました。
$1 \le i \le N$ である $i$ のときの座標を $X_{i}$ とします。
また $i$ での移動の最大値は、$1 \le k \le i$ の中で $\sum^k_{j=1} A_{j}$ の最大値となります。
この $i$ での移動の最大値を $B_{i}$ とすると、
$i+1$ での最大値は、$X_{i} + B_{i+1}$
となります。
したがって、$i$ を動かしていって最大値を更新していけば答えが出ると考えました。
というわけで、こうすれば解けるんじゃないかというのはすぐわかって、それは解説とほぼ同じだったのですが、
そこからソースコードに落とし込むのに時間がかかってしまいました。
言語はC++(GCC 9.2.1)でAtCoderのコードテストで確認しています。

```c++
#include <bits/stdc++.h>
using namespace std;
typedef long long ll;

int main() {
  ll N, a, sum = 0, ans = 0;
  cin >> N;
  vector<ll> X(N+1, 0), B(N+1, 0);
  for (int i = 0; i < N; i++) {
    cin >> a;
    X[i+1] = X[i] + sum + a;
    B[i+1] = max(B[i], sum + a);
    sum += a;
  }
  for (int i = 0; i < N; i++) {
    ans = max(ans, X[i] + B[i+1]);
  }
  cout << ans << endl;
}
```
RuboCopの設定ファイルを見る

#はじめに
[[Rails] RuboCopの導入](https://qiita.com/List202/items/e8ea8a38ee3864cf728d)の記事では、設定に関する記述を省略したのでこちらにまとめる。

#構成ファイル
RuboCopの動作は`.rubocop.yml`構成ファイルを介して制御を行う。
つまりはこのファイルでRuboCopの動作を決めるみたい。

構成ファイルの場所は「検査されたファイルがあるディレクトリで構成ファイルの検索を行い、ルートディレクトリまで進む」とドキュメントある。

つまり、実行時にその都度プロジェクトにある構成ファイルの場所を参照するようだ。

###構成ファイルの場所
```
# 最初に参照される設定ファイル
- ~/.rubocop.yml

# ルートディレクトリに設定ファイルが見つからない場合の参照先
- $XDG_CONFIG_HOME/rubocop/config.yml
~/.config/rubocop/config.yml)
```
両方のファイルが存在する場合は、ドットファイルが優先される。

#デフォルトの構成
RuboCopはRubocopホームディレクトリ下の`config/default.yml`ファイルに、全ての構成が継承するようにデフォルト設定が含まれているらしい。

プロジェクトの`.rubocop.yml`構成ファイルは全て、このデフォルトの設定を継承するため、プロジェクト固有の設定は`.rubocop.yml`に記述するだけで済むとのことだ。

#設定ファイルの見方

```.rubocop.yml
AllCops:
  Include:
    - foo.unusual_extension
    - '**/*.rb'
    - '**/*.gemfile'
    - '**/*.gemspec'
    - '**/*.rake'
    - '**/*.ru'
    - '**/Gemfile'
    - '**/Rakefile'
  Exclude:
    - 'db/**/*'
    - 'config/**/*'
    - 'script/**/*'
    - 'bin/{rails,rake}'
    - !ruby/regexp /old_and_unused\.rb$/
```
AllCops: とは、リストされる任意のパターンに一致するファイルの宣言を行う。
Include： とは、リストされる任意のパターンに一致するファイルを検査する。
Exclude: とは、リストされる任意のパターンに一致するファイルを検査対象から除外する。

構成ファイルは、デフォルトの設定を継承すると同時に子はInclude:でオーバーライドするものであることに注意。

###注意事項
Rubocopをコマンドライン引数として特定のディレクトリ（ファイル）を指定して検査する場合、AllCops/にリストされるExcludeも検査を行うことができてしまう。

そのためExcludeのルールを適用するには`--force-exclusion`を追加する必要がある。

```ターミナル
# Excludeのルールを無視する
bundle exec rubocop foo.rb

# Excludeのルールを適用する
bundle exec rubocop --force-exclusion foo.rb
```
デフォルトで含まれていないファイルをRunocopで検査する場合、コマンドラインでファイルを渡すか、AllCops/にリストを追加する必要がある。

#有効/無効の切り替え
特定の検査の設定を`Enabled: false`を指定することで、特定の検査の無効化ができる。ほとんどはデフォルトで有効になっているが、有効/無効/保留の3つ状態がある。

```.rubocop.yml
Layout/LineLength:
  Enabled: false
```
検査の有効化プロセスでは`DisabledByDefault `または`EnabledByDefault `を`true`に設定することで変更が可能。
検査の状態に関係なく、全ての検査のデフォルトを無効/有効に切り替える。

```config/default.yml
AllCops:
  DisabledByDefault: true
```
上記で全体の検査がデフォルトで無効になった。

そこからユーザーの構成ファイルに`Enabled: true`される検査のみが有効になるように設定できる。

```.rubocop.yml
Style:
  Enabled: true
```
上記だと`Style:`の範囲が全て有効化されたことになる。
また無効を指定した範囲から、さらに個別に有効化することも可能である。

```.rubocop.yml
inherit_from: config_that_disables_the_metrics_department.yml

Metrics/MethodLength:
  Enabled: true

Style:
  Enabled: false

Style/Alias:
  Enabled: true
```
`inherit_from:`は、プロジェクト内の別の構成ファイルから継承を行うものである。つまりは、共通の設定なんかをファイルを別にして読み込むのに使われるもの。

`inherit_from:`の参照先ファイルは、絶対パスでも相対パスでも指定が可能である。

また参照先が複数ある場合、最初のファイルが最も優先順位が低く、最後のファイルが最も優先順位が高いとある。

```.rubocop.yml
inherit_from:
  - ../.rubocop.yml
  - ../conf/.rubocop.yml
```

#検査部門
Rubocop用語では、コードに対して実行される様々なチェックを「cops」と呼ぶらしい。

「cops」は特定の違反を検出する責任があり、その違反の部門ごとに「cops」はグループ化されている。

下記の表は簡単な部門の説明である。

部門|検査内容
-|-
Style|コードのスタイルの一貫性を検査する。
Layout|インデント、配置、余白を一貫して使用しているか検査する。
Lint|コードの曖昧さや、考えられるエラーを検査する。`rubocop -l`でLintだけを走らせることも可能。
Metrics|クラス・メソッドの長さなど、測定可能なソースコードのプロパティを処理する。
Naming|メソッド名、定数名、ファイル名など、コードの名付けの問題を検査する。
Security|潜在的なセキュリティ問題に関連していることがわかっているメソッド呼び出しと構造を検査する。
Bundler|bundlerファイル（Gemfile）のスタイルと悪い習慣をチェックする。
Gemspec|gemspecファイル(rubocop.gemspec)のスタイルと悪い習慣を検査する。

[詳細](https://docs.rubocop.org/rubocop/1.15/cops.html)はこちらから。

#参照元
[RuboCop/ドキュメント](https://docs.rubocop.org/rubocop/1.15/configuration.html)
量子コンピュータを学ぶ！！

量子コンピュータを学ぶ！！

量子コンピュータについて、少し学習したので投稿します。
※間違っていたり、良い参考文献知っていたら共有していただけると幸いです。

ブロックチェーンをいろいろ調べている中で、デジタル署名やハッシュ関数、楕円曲線暗号などの
基本的な暗号技術がブロックチェーンの安全性を担保しているということがやっと分かってきた。

基本部分にあるのは、片方からの計算は簡単でももう一方からの計算は難しいということ。

ハッシュ値から元の値を求めるのは、(ハッシュ関数が分からない限り)すごく大変だし、
ビットコインアドレスから、公開鍵や秘密鍵を求めることは、大きな数の素因数分解が大変であるということ
から求めることは難しくなっている。

「現実的な時間内で解けない(計算できない)」という基に安全性が担保されているのである。

今はまだ素因数分解を効率良く解けるアルゴリズムが実用化されていないので問題ないのだが、
そうも言っていられなくなるかもしれない。。。

ブロックチェーンだけでなく、デジタル署名技術やHTTPS通信など現代の主要な暗号方式の常識を
ひっくり返しそうなのが、ピーター・ショアの「ショアの(素因数分解)アルゴリズム」！！

量子コンピュータが汎用的になり完成した暁には、素因数分解が効率良く解けるようになると考えられており、
もし本当だとすると現代の暗号技術は、ほぼ意味をなさなくなり、この情報社会が大混乱に陥るかも。。。

前置きは長くなったが、ブロックチェーンのセキュリティ部分にも十分関わってきそうな
量子コンピュータについて学習して見て予想以上に面白かったため共有する。

用語や簡単なサンプルプログラムは、下記リポジトリに格納してあります!(用語などについては、READMEに記載)
<a href="https://github.com/mashharuki/QuantumPractice">QuantumPractice</a>

量子コンピュータに興味を持つきっかけになったショアのアルゴリズムのソースコードを読んでみたが、
内容を完全に理解するためには、まだまだかかりそうなので引き続き勉強していきます！！

セキュリティの会社に勤めている身としてさらに気になったのが「量子テレポーテーション」!!
物理的な媒体を介することなく、量子の状態(位相と確率(振幅の大きさ))を伝えるというもので、
物理的にもセキュリティのレベルが上がる上に、盗聴されてもすぐに分かるというものです。
すでに暗号鍵配送(QKD)にも応用されているということですが、自分の会社でもすぐに上司に相談して
量子テレポーテーションを活用した新しいセキュリティビジネスを確立するプロジェクトを立ち上げたいと思いました！
(まだまだ若造なので、実績や知識を沢山身につけて、上司に頭を振らせられるようにしたいと思います。。)

それにしても、0と１の両方の状態を持ち合わせるというキュビットの考え方は面白い！
身近では見られない物理現象を利用しているので、これまでにできなかったことができるようになるかもしれないですね！！

2019年公開の「アベンジャーズ・エンドゲーム」でも量子の力を使って、アベンジャーズがサノスに逆襲するというものありましたが
あんなことができるようになるかもしれないですね！
次のアントマンの映画も量子世界がキーになってくるとのことですので、量子コンピュータのことをさらに学習した上で映画館に
行ってみたいと思います！

【参考になったもの】

<a href="https://www.udemy.com/course/quantum101/">【量子コンピュータ101】Pythonで体感する量子コンピューティング</a>
↑有料の学習コンテンツですが、非常にわかりやすかったです。

<a href="https://www.amazon.co.jp/%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6%E9%87%8F%E5%AD%90%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E2%80%95%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E3%81%A8%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B%E5%9F%BA%E6%9C%AC%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0-Eric-R-Johnston/dp/4873119197">動かして学ぶ量子コンピュータプログラミング</a>

<a href="https://book.impress.co.jp/books/1118101060">いちばんやさしい量子コンピューターの教本 人気講師が教える世界が注目する最新テクノロジー</a>
↑量子コンピュータとは何か？従来のPCとは何が違うのか？という部分から説明してくれているので、入門に良いと感じました。
S3とCloudFrontを用いて、S3に配置したWebサイトにHTTPSアクセスしたときのメモ

#概要
S3にHTMLとJavaScriptで作成したWebページを配置し、CloudFrontを用いてHTTPS通信でアクセスします。

#１．S3にWebページを配置する
以下の記事を参考にログイン画面を作成しました。初心者の私でも詰まることなくハンズオンでき、可読性の良い記事でした。
[Amazon Cognitoを使ってシンプルなログイン画面を作ってみる](https://qiita.com/fkooo/items/660cab0090a80861155b)

対象のHTMLは"auth.html"で、以下のように配置しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1516301/d9907273-a8f7-7e77-cb22-f335d4ff624f.png)

パブリックアクセスはブロックしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1516301/5a09f6db-0503-dbb6-b1d6-0ba5bc769765.png)


#２．CloudFrontでディストリビューションを作成
S3のみでも静的なWebサイトをホスティングできますが、CloudFrontを用いるメリットは以下です。

・エッジサーバーにコンテンツがキャッシュされ、クライアントに近いエッジサーバーがコンテンツを送信するため高速。
・HTTPS通信を利用でき、 ACM (AWS Certificate Manager)で作成したSSLサーバー証明が利用できる。
・クライアントとオリジンサーバーの通信が軽減され、負荷や料金が軽減するケースがある。

Create Distributionと書かれた青いボタンを押してください。すると以下のような画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1516301/4b29c86d-88c9-fec5-ac48-13ff959a559c.png)

CloudFrontの設定項目は以下の記事を参考にしました。
[cloudfrontの設定項目（少しかみ砕いて書いてみました）](https://qiita.com/SwuBHj8aKGqBKHet/items/5c52ea718ccfd795a048)

今回、設定したのは以下の４つです。
・Origin Domain Name：配信したいコンテンツのあるS3バケット
・Restrict Bucket Access：Yes
・Origin Access Identity：Create a New Identity
・Grant Read Permissions on Bucket：Yes, Update Bucket Polic　※

※S3のバケットポリシーが上書きされるため、バックアップ推奨

設定が完了したら、画面右下のCreate Distributionと書かれた青いボタンを押してください。するとDistributionが作成されますが、デプロイまで数分かかる場合があります。

#３．HTTPSを用いて配置したWebサイトにアクセス
ブラウザなどでアクセスする場合のURLはCloudFrontのドメインネームとS3のファイルパスで構成されます。
https://xxxxxxxxx.cloudfront.net/{フォルダ名}/{xxxx.html}

以上です。
AWS DynamoDBについて調べてみた【初学者向け備忘録】

## はじめに

フロントエンドの学習にあたり最近AWS Amplifyを利用し始めました。おそらく昨今のフロントエンドエンジニアはAWSの各種サービスの理解も避けては通れないということでAWS DynamoDBについて調べてみました。（2021年5月現在）

## AWS DynamoDB 

https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Introduction.html

AWS DynamoDBは、Key-Value型と呼ばれるデータベース構造を持つNoSQLデータベースを提供してくれるサービスになります。

Key-Value型データベースとは、キーと値（Value）のペアでデータを格納してく方式で、DynamoDBもMongoDBなどと同じようにNoSQL（非リレーショナル）データベースと呼ばれています。一般的なリレーショナルデータベースでは、レコードは正規化されて役割ごとに別々のテーブルに格納され（例えば商品テーブル、メーカーテーブル、カテゴリーテーブルなど）、プライマリーキー、外部キーと紐付けて管理すといった設計になっています。一方NoSQLデータベースでは、乱暴な言い方をすると全部をひとつのレコード必要な項目は全部まとめてしまい（例えば1つの商品レコードにメーカー名もカテゴリー名も記載する）、ひとつの大きなJSONドキュメントととして扱われることが多いようです。

構造上リレーショナルデータベースでは最初に決めた形のデータのみが格納できるため、データの高い整合性を担保することが可能です。逆にNoSQLデータベースでは、形式に決まりはないためレコードによって異なる内容を登録することが可能なため、高い柔軟性を持つことが可能です。
それぞれにメリット・デメリットはありますが、AWS DynamoDBはNoSQLデータベースの利点に、AWS独自の特長を持たせた拡張の高いデータベースサービスを提供してくれています。

DynamoDBをフロントエンドから利用の場合は、AWS Amplifyサービスを利用すると簡単に連携させることが可能です。AWS AppSyncと呼ばれるGraphQLを利用したAPIの開発を用意にするサービスを使うことでAWS DynamoDBとGraphQLのスキーマ設計からCRUDインターフェースまでを作成、提供してくれます。
![スクリーンショット 2021-05-23 13.54.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268181/e9e6cf8e-fd71-7271-0d17-47ebc85c28a2.png)
AWS DynamoDBにはデータ項目を一意にするために「プライマリキー（DynamoDBではパーティションキーと呼ばれる）」でデータを特定することになりますが、別途ソートキー（パーティションキー＋ソートキー）を組み合わせることでもプライマリキーとして利用することが可能です。他にセカンダリインデックスと呼ばれるインデックスを作成することも可能で検索要件によっても柔軟に切り替えることができるようです。

Amplify管理下ではスキーマに`@searchable`を追記するだけでElasticSearchとの連携が可能になるといういたれりつくせりの仕様です。

## 関連記事

https://qiita.com/himorishige/items/8fe57f0c108f60e9e2f3

## 参考サイト

https://aws.amazon.com/jp/nosql/

https://qiita.com/ikegam1/items/edb7fe40073d3e9cdd63
IBMCloud; VPC仮想サーバーのスナップショット

# IBMCloud; VPC仮想サーバーのスナップショット
東京リージョンのVPC仮想サーバーを管理ポータル（GUI）でバックアップしておく。

## 今回の手順。
手順1. 管理ポータルで、仮想サーバー１を停止する。
手順2. 続けてカスタムイメージを作成する。
手順3. カスタムイメージから仮想サーバー３を作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/cf8d7f82-37df-43b5-ce0f-f4d511d97505.png)

## 手順1. 管理ポータルで「イメージの作成」
仮想サーバーを停止してからVPC仮想サーバー・インスタンスのメニュー［イメージの作成］を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/c925cb48-df7b-fe71-73e7-a4edcee70341.png)

## 手順2. カスタムイメージを作成
ここ注意。イメージの作成（注文）の実行は［カスタム・イメージのインポート］を実行します。イメージのエクスポートのような気もするのだけれどメニュー名はインポートとなっている...2021/5月時点。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/de228d1f-5cd5-92ba-0f54-0313bc516734.png)

しばらくすると「VPC用のカスタム・イメージ」が作成完了し、画面に「使用可能」と表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/c72242cc-8746-a3b2-3920-7cacf574786e.png)

## 手順3. カスタムイメージから仮想サーバーを作成
普通にVPC仮想サーバーを注文します。OSの選定は「カスタム・イメージ」を選びます。カタログ・イメージは他者が公開しているイメージなので選ばないこと。最後に［Virtual Server インスタンスを作成します］ボタンを実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/9d09dc58-f454-bbfa-1f4f-d595a676e784.png)

## 複製した仮想サーバーにログイン
ここも注意。管理ポータルのサーバー作成中の画面は状況がくるくると回り「開始中」のままなのですが、実際には完成していてOSにログインできたりしますので、手動でブラウザをリロードしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/27210949-2d6a-9321-fbd2-d5876e713bdd.png)

## 作成した「カスタム・イメージ」の削除
メニュー［VPCインフラストラクチャー］→［カスタムイメージ］で作成したイメージを確認したり、削除したりできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/e70096ba-2b6a-77cc-d1a3-7413be51f027.png)
【python】pandasで要素書き換えでSettingWithCopy warning　を出ないように

いままでもごく普通にpandas を使ってきたのですが、SettingWIthCopy warning というのが出たので、出ないようにしました。というメモ。

## pandas で要素を書き換え

pandas で行番号と列名を指定して値を書き換えようとしたら、SettingWithCopy warning　が出ていたので、以下のようにしたら出なくなった。

```python
import pandas as pd
df = pd.read_csv("./test.csv")
print(df)
df.loc[0,"value"]=5
print(df)
```

を実行すると

```
     name  value
0   Apple      3
1  Banana      2
     name  value
0   Apple      5
1  Banana      2
```

## pandas.orgにある解説

本家本元にしっかり書いてありました。[link](https://pandas.pydata.org/pandas-docs/stable/user_guide/indexing.html#returning-a-view-versus-a-copy)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/596ddcee-ee92-607a-58b5-69c9bacc5a08.png)

日本語で詳しく解説してくれている方がいました。

https://note.nkmk.me/python-pandas-setting-with-copy-warning/

chained indexing というのすると警告や予期せぬ動作になるそうです。chained indexing にならないように、locなどで一発で要素にアクセスするようにしてあげれば良さそうです。（理解、合っているかな。。。^^;)

# まとめ

ひとつの投稿にするネタでもないかもしれませんが、もし理解を深められたら追記します。
(2021/05/23)
Vue Router ナビゲーションガード メモ


* Vue Routerのナビゲーションガード機能についてメモする。


## 概要

* 画面遷移(ナビゲーション)を制御するためのフック機能を指す。
* 以下の単位で設定できる。
  * グローバル
  * ルート
  * コンポーネント
* 上記の場所で遷移をガードし、フックを解決しない限り遷移させないようにする。

## ルートガード

* メソッド

| **メソッド**  | 実行タイミング |
| ------------- | -------------- |
| `beforeEnter` | ルートの遷移前 |

* router.jsに次のように記述する。

```javascript
...
	routes: [
        {
          path: "/top",
          name: "top",
          // to		:次にナビゲーションされる対象の ルートオブジェクト。
          // from	:ナビゲーションされる前の現在のルート
          // next	:フックを解決するための関数
          beforeEnter: (to, from, next) => {
            
            // このタイミングで実行したい何らかの処理
            
            next();// パイプラインの次のフックに移動する。
          }
        },
...        
```



## コンポーネントガード

* メソッド

| **メソッド**        | 実行タイミング                                               |
| ------------------- | ------------------------------------------------------------ |
| `beforeRouteEnter`  | コンポーネントへの遷移前(描画するルートが確立する前)         |
| `beforeRouteUpdate` | コンポーネントでのルート遷移（更新）前(描画するルートが変更されたとき) |
| `beforeRouteLeave`  | コンポーネントからの遷移前                                   |


  * 実行順：`beforeRouteEnter` →`beforeRouteUpdate`→`beforeRouteLeave`

* コンポーネントに次のように記述する。

  * 記法は上述のルートガードと同じ。

```javascript
export default {
	name: "testComponent",
	beforeRouteEnter (to, form, next) {
		// このタイミングで実行したい何らかの処理
		next();
	},
	beforeRouteUpdate (to, form, next) {
		// このタイミングで実行したい何らかの処理
		next();
	},
	beforeRouteLeave (to, form, next) {
		// このタイミングで実行したい何らかの処理
		next();
	}
    ...
};
```



## グローバルガード

* メソッド

| **メソッド**    | 実行タイミング                               |
| --------------- | -------------------------------------------- |
| `beforeEach`    | ルートの遷移前（コンポーネントガード解決前） |
| `beforeResolve` | ルートの遷移前（コンポーネントガード解決後） |
| `afterEach`     | ルートの遷移後                               |

* インスタンスに次のように記述する。

  * 記法は、ルート、コンポーネントガードと同じ。

  ```javascript
  export default {
  	name: "test",
  	mounted () {
  		this.$router.beforeEach((to, from, next) => {
  			// このタイミングで実行したい何らかの処理
  			next();
  		})
  		this.$router.beforeResolve((to, from, next) => {
  			// このタイミングで実行したい何らかの処理
  			next();
  		})
  		this.$router.afterEach((to, from, next) => {
  			setTimeout( () => {
  			// このタイミングで実行したい何らかの処理
              // next 関数を受け取らず、ナビゲーションに影響しない
  			}, 800);
  		})
  	}
  };
  ```

  * 実行順：`beforeEach` →`beforeResolve`→`afterEach`

## ナビゲーションガード実行 全体フロー
* 大まかな実行の流れは以下となる。
  1. グローバルガード`beforeEach`
  2. ルートガード`beforeEnter`
  3. コンポーネントガード`beforeRouteEnter`

     ※遷移元や再利用コンポーネントの有無などの条件に応じて上記以外のメソッドもトリガされることになる。より詳細は[公式](https://router.vuejs.org/ja/guide/advanced/navigation-guards.html)を参照のこと。


## 参考情報

* [ナビゲーションガード](https://router.vuejs.org/ja/guide/advanced/navigation-guards.html)
* [【Vue.js】ナビゲーションガードについて](https://tsudoi.org/weblog/5738/)
【Flutter】リスト内の埋め込みリストでbuilderを効かせる



<h2>この記事で解決する問題</h2>
入れ子のリスト（リストの中にあるリスト）を使う際に、builderがうまく機能しない。

builderだと画面に見える部分のみ生成されるが、なぜか最初にすべて生成され、読み込みに時間がかかる。

<h2>なぜ機能しないのか</h2>
親がスクロール系のウィジェットのとき、子のリストが独立してスクロールできないようにNeverScrollableScrollPhysicsを使用できる。

だが、これを使用しているとbuilderがスクロールしていない判定になり、buiderの特徴であるダイナミックなローディングが効かないため、一気に読み込むことになってしまう。

<h2>解決策と使用例</h2>
<b>●CustomScrollViewを使用する</b>

![20210523_120424[1].gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188685/9bfc85e3-50f7-850d-4a9a-f40f7d5de318.gif)

CustomScrollViewを代用すると、<b>Sliver</b>が使えます。

Sliverとは、スクロールできる親ウィジェットの中の一部分です。

今回の場合、Sliversといういわばブロックのようなものを組み合わせて、それを親であるCustomScrollViewという一つのスクロールできるウィジェットにします。

そしてその各Sliverは、builderを使うことができます。


以下、使用例のコードです。

```
CustomScrollView(
  slivers: [
    SliverList(
      // Listの要素をbuilderでつくる
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) => Container(
          margin: EdgeInsets.all(10),
          height: 100,
          color: Colors.amber,
          child: Text('Item $index'),
        ),
        childCount: 50, //list.lengthなどにする場合が多い
      ),
    ),

    // Gridの場合 (Sliver内で複数のList, Gridを併用可能)
    SliverGrid(
      // 子Widgetの大きさや位置を設定
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 4,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) => Container(
          alignment: Alignment.center,
          color: Colors.cyan,
          child: Text('Item $index'),
        ),
        childCount: 50,
      ),
    ),
  ],
);
```

以上、参考になれば幸いです。
【Java】CollectionUtilsを使ってコレクション内のnullチェックをする方法

#はじめに
今週は外部ライブラリである`Apache Commons Collections`を使ってコレクション内のnull・size0チェックをする方法をアウトプットします。

#これまでの書き方
これまでは`nullPointerException`を回避するために、以下のように書いてきました。

```java
List<String> list = new ArrayList<String>();
//listはnullが来る可能性があるとします。

if (list == null || list.size() == 0) {
  return true;
}
```

#CollectionUtilsを使った書き方
`CollectionUtils.isEmpty()`メソッドを使用することで、null・size0チェックをひとまとめにすることが出来ます。
ただし、使用するためには`org.apache.commons.collections4.*`をimportする必要があります。
今後、コレクション内のnull・size0チェックはこの方法を使ってみようと思います。

```java
import org.apache.commons.collections4.*

List<String> list = new ArrayList<String>();
//listはnullが来る可能性があるとします。

if (CollectionUtils.isEmpty(list)) {
  return true;
}
```

#参照
[CollectionUtils (Apache Commons Collections 4.4 API)](https://commons.apache.org/proper/commons-collections/apidocs/org/apache/commons/collections4/CollectionUtils.html)