OmniAICreator/Qiita-1.07M huggingface dataset:
【UiPath】Studioのイースターエッグ（隠しアニメーション）

# はじめに

この投稿は、UiPath Advent Calendar の 8 日目の記事です。

https://qiita.com/advent-calendar/2021/uipath

多くの人が知っている「UiPath Studio」のロゴ アニメーション（イースターエッグ）についての話です。

# イースターエッグとは？

Wikiでは以下のように説明されています。

```
イースター・エッグ（Easter egg）とは、コンピュータのソフトウェア・書籍・CDなどに隠されて
いて、本来の機能・目的とは無関係であるメッセージや画面の総称である。ユーモアの1種とされる
こともある。
多くの場合、開発スタッフの一覧などが隠されているが、ちょっとしたゲーム等の場合もある。
また、アニメーションや音楽を伴って表示されることもある。

これらを「イースター・エッグ」と呼ぶのは、キリスト教の復活祭の際に、装飾した卵
（イースター・エッグ）をあちこちに隠して子供たちに探させる遊びにちなむ。
```

https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%BC%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%BB%E3%82%A8%E3%83%83%E3%82%B0_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF)

有名な「イースター・エッグ」で言うと「Googleの検索ボックス」があげられます。

https://webmaru.blog/256/


# UiPath Studio のロゴ アニメーション（イースターエッグ）

「UiPath Studio」ヘルプページ右上の「UiPathロゴ」をダブルクリックすると、ロゴが動きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/21089a6c-95cf-2fa0-48c8-0c3150e63c6a.png)

動きのパターンは、以下の「６」パターンあります。

パターン1）後ろからやってくる
![uianime01_後ろから.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/f9cd7615-06d2-c93b-12db-d55e7138f105.gif)
パターン2）右からやってくる
![uianime02_右から.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/204572f8-f9ad-be98-dcc3-8cd5c28506c5.gif)
パターン3）左からやってくる
![uianime05_左から.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/2b9484c9-37c5-8db9-5eb5-0cf81178a96c.gif)
パターン4）ブルブル震える
![uianime04_震える.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/1e8b02b5-93d3-b705-b35e-442a9b894a18.gif)
パターン5）回転する
![uianime03_回転.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/7115d7b0-636e-1124-309b-129afbadaba9.gif)
パターン6）色が黒になる
![uianime06_黒青.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/1464f970-d535-d130-b324-ba38d3f5a4a4.gif)


# 終わりに

新しいバージョンのUiPathStudioが出ると「新しい動きが追加されていないかな？」とチェックしていますが、
「そもそも今、動きは何があるんだっけ？」というのを整理したかったのでした。

https://twitter.com/miya_gis/status/1432992317523202052?s=20

この記事が参考になったら、 LGTMをお願いします。閲覧ありがとうございました。
コロナ休校のタイミングで開始したうちのプログラミング教育について


# この記事は
- うちの子供達がプログラミングを始めたときを思い出して書いた記事です。これから始める方のご参考になれば。

# 我が家について
- 講師
    - 私：大学＆仕事でプログラミング
    - 夫：大学＆仕事でプログラミング
- 受講者（2020年4月時点での学年）
    - 息子（小1）
    - 娘（小4）


# 経緯
息子が小学校に入ったタイミングでコロナ休校、親二人は自宅でリモートワーク
ある程度自分等で回してもらうため、時間割制度を導入し、AM勉強2時間外遊び1時間、午後テレビの時間（かつ未就学児寝かしつけ）と習い事もどきの時間を作るスケジュールを基本としていました、
この「習い事もどきの時間」として、「Scrachプログラミング」をはじめたお話です。


# 教材の選び方＝Scratch
昔から「Scratch」は知っていて、気になっていました。そのタイミングで、↓の本と出会いました。

https://www.amazon.co.jp/%E3%81%BE%E3%82%93%E3%81%8C%E3%81%A7%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E9%80%B2%E3%82%81-%E3%81%91%E3%82%84%E3%81%8D%E5%9D%82%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%82%BF%E3%83%BC%E3%82%BA-Scratch-3-0%E7%B7%A8/dp/4295011401?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=scratch&qid=1639058789&sr=8-25&linkCode=ll1&tag=meowmeow0830v-22&linkId=5b27096937a51b51b39b7a82820da5e9&language=ja_JP&ref_=as_li_ss_tl

プログラムを書くこと以外にも、プログラムの権利だとか音楽や画像の権利についても言及されている本で、情報教育としてのScratchがとてもよい教材と感じて、題材として選択しました。
子供用Githubみたいと思ったのも選択した理由の一つです。小さい頃から他の人のプログラムをみたり、コラボしてみたり、いい刺激がはいるかなと思いました。

# 具体的に使用したテキスト
以下のコーディングカードのゲームの好きなものを、1~2時間かけて作る、を毎週○曜日の何時から何時、と時間を決めて使用しました。

https://www.amazon.co.jp/gp/product/4822253422?ie=UTF8&psc=1&linkCode=ll1&tag=meowmeow0830v-22&linkId=610357f4ddb01fa19a7975eed1071125&language=ja_JP&ref_=as_li_ss_tl

このカードの良かったところは、5枚程度のカードを真似してブロックを組めば、ゲームが出来上がるという構成になっています。
楽しくゲームを作りながら、Scratchの基本を理解できたようで、娘、息子とも、自分で好きなゲームを作成するレベルにまで、約2ヶ月程度で到達しました。

最初はほぼほぼマンツーマンの指導になりました。
教えられるスタッフ人数次第では、適齢の子一人ずつ教えてくのが良いかもしれません。
ただ、慣れてきた今は二人がお互いにこれどうやるの？と教え合っている姿も時々見られます。

# 教育結果 & 作品集
娘も息子も、ゲームの目的・ゲームの操作方法の説明を自分で考えてタイピングして、リリースをしました。
「この文章でゲームをやる人は何をすればいいかわかると思う？」と投げかけたり、
わざと、「文章読んで操作してみるね」とわからない振りをしてみたりで、文章を作る練習もしました。
（本人の文章レベルに合わせてそこそこのガチレビューしてリテイク10回くらいしました）

- 娘の初めてのリリース作品（厳密には1作目をiPad操作できるようアレンジしたもの）

https://scratch.mit.edu/projects/411993743/

- 息子の初めてのリリース作品

https://scratch.mit.edu/projects/565197626/

息子はGoogleのTeachableMachineを利用したプログラムを、なつやすみの自由研究として提出しました。
パーで虹色の８角形がだんだん大きくなり、グーでだんだん小さくなるプログラムです。

![スクリーンショット 2021-12-09 23.24.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/f665b8c0-5e4a-be35-05bf-7180e5e5dc27.png)
![スクリーンショット 2021-12-09 23.25.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/27d90484-25c7-e621-f0d8-5a82b4606db5.png)
【React Hook Form】Controllerの中でonChangeを使う方法

React Hook Form の `<Controller>` を使っている時、renderの中でonChangeを定義しても上手く動かない。

```react
// これは動かない
<Controller
  control={control}
  name="email"
  render={({field}) => (
    <TextField
      {...field}
      onChange={customOnChange}
    />
  )}
/>
```

なぜ動かないかというと、`field`に含まれる`onChange`を呼び出していないからだ。

なので、自作のonChangeとfield.onChangeの両方を呼び出してやる必要がある。

```react
// これで動く
<Controller
  control={control}
  name="email"
  render={({field}) => (
    <TextField
      {...field}
      onChange={(e) => {
        field.onChange(e)
        handleOnChange(e)
      }}
    />
  )}
/>
```

この理屈でいくと、register の時も同じなのかなと思ったが、registerの方はこんなことしなくても正常に動作していた。

[参考]
https://stackoverflow.com/questions/66936135/react-hook-form-how-to-can-i-use-onchange-on-react-hook-form-version-7-0
追加したFTPユーザーにディレクトリ制限して任意のディレクトリにファイル転送させる

どえらい苦労したので記念に（？）メモしておく。

##やりたいこと
FTPユーザーを新規で作って、特定のディレクトリのみにアクセスさせたい。
よくあるやつですね。
環境依存もありますがめちゃくちゃハマりました。

##やったこと
今回の環境では、目的のディレクトリに直接FTPユーザーにアクセスさせるのはできなかったので、
homeディレクトリ配下にFTPユーザー用のディレクトリを作り、
そこにアップしたものをinotify-toolsでサーバ内転送させるという飛び道具系。

###まず、ユーザー作成とchrootの設定
大体以下記事のような手順です。
（最後の鍵の指定はせず）
https://qiita.com/kooohei/items/5cf0bb6e5c1e372fc55b

実際の順番は違いますが、↑↑ここでめちゃくちゃハマりました。。。
直接/home/sftp_user配下にアップしようとしてPermission deniedがでてアップできなかったのですが、
/home/sftp_user配下にディレクトリを作ってそこにアップすればいいことに気づかず。。。


###転送設定
次に、inotify-toolsを使ったファイル転送設定です。
inotify-tools自体は監視ツールです。
指定したファイルやディレクトリの状況を監視し、変化があれば任意の処理を実行させることができます。
まずインストール。

```
$ yum install inotify-tools
```
次に、転送処理をするためのシェルを書きます。

```watch.sh
#!/bin/sh
from=【監視（転送元）ディレクトリ】
to=【転送先ディレクトリ】
inotifywait --format "%f" -mq -e CREATE,MODIFY $from | while read file; do
  cp -fr $from$file $to$file
  echo "[moved] $from$file -> $to$file"
done
```
`inotifywait`でファイルの監視をします。
上記では`CREATE,MODIFY`で追加と更新を監視します。
`echo なんちゃら`のところはログ用なので書かなくてもいいです。
その他、指定可能なイベント名など、以下の記事が詳しく書かれています。
https://qiita.com/stc1988/items/464410382f8425681c20

ここまで来ると、あとはこのwatch.shを実行すればいいのですが、
実行するだけだと、ログアウトしたりターミナルを閉じてしまうと監視処理も止まってしまうので、

###転送処理を永続化させる
nohupで永続化させます。

```
$ nohup sh ./watch.sh &
```

永続化をやめたいときは、指定したプロセスは`ps x`で確認できるので、`kill 【プロセスID】`して落としましょう。

##余談
実は今回の環境にはPleskが入っており、これまではPlesk経由でFTPユーザーを管理していた模様（多分proftpdかな）。
都合、Pleskを使わなくなったのでPleskごとプロセスを落としたが、これが仇になり・・・proftpdが生きているのかどうかを調べるところから始まり、chrootによるアクセス制御に移行し・・・とかなりめんどくさいことになった。。。

多分他にもっといい方法あるはず。。。
【AWS】セキュリティグループ、ネットワークACLのまとめ

# はじめに

こんにちは。
この記事は[GFAMアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/gfam)の2日目の記事です。
セキュリティグループ、ネットワークACLについてまとめてみました。

# セキュリティグループとは

インスタンスに適用するファイアーウォールです。
インスタンス毎にセキュリティグループをアタッチして通信を制御します。

## セキュリティグループの特徴

* インスタンス毎に複数のセキュリティグループを設定可能
* インバウントルール／アウトバウンドルールは、プロトコル、ポート範囲、送信元／送信先の設定項目で許可ルールを定義
* デフォルトはアウトバウンドが許可、インバウンドが拒否
* ステートフル制御。戻りのトラフィックを考慮しなくてもよい
* すべてのルールが適用される
* 設定項目が即座に反映される

# ネットワークACLとは

サブネット単位で設定するファイアーウォールです。
サブネットに所属するインスタンス全てに適用されます。

## ネットワークACLの特徴

* サブネットごとに1つのネットワークACLを設定可能
* インバウントルール／アウトバウンドルールは、プロトコル、ポート範囲、送信元／送信先の設定項目で許可または拒否ルールを定義
* デフォルトはアウトバウンド、インバウンドがすべて許可
* ステートレス制御。戻りのトラフィックも明示的に設定が必要
* ルール番号順に適用される

# 特徴の比較

|  | セキュリティグループ | ネットワークACL |
|:-----------:|:------------|:------------|
| 適用範囲 | インスタンス | サブネット |
| ルール定義 | 許可ルールのみ | 許可／拒否ルール |
| デフォルト | アウトバウンド（許可）<br>インバウンド（拒否） | アウトバウンド（許可）<br>インバウンド（許可） |
| 状態 | ステートフル | ステートレス |
| ルールの評価 | すべてのルールが適用 | ルール番号順に適用 |
| その他 | 設定項目が即座に反映 | - |

# おわりに

今回はVPCのセキュリティグループ、ネットワークACLをまとめました。
セキュリティグループ、ネットワークACLの特徴を理解し、適切に適用していく必要があります。
次回はEC2について学習します。

# 参考

* [BlackBelt](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)
【Flutter】TextInputActionの見た目について

# TextInputActionとは？
Flutterでテキストの入力が完了した時に表示されるボタンを変更したいときに使います。ここではいくつかの場合について実際どうなるのか画像でまとめました。参考になると幸いです。

## done
![Screenshot_1639058855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/467dade7-14ef-2db5-af14-0d39c4ae6fe5.png)

## go
![Screenshot_1639059248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/4e7743b8-c849-fa4a-76a6-98dc470986a3.png)

## next 
![Screenshot_1639058830.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/2ed0f1e8-ff47-e8f2-7942-55c5d311ea0a.png)

## none
![Screenshot_1639059194.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/e6a06770-a170-f748-5634-e8a551582f17.png)

## search
![Screenshot_1639058982.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/e7082ccb-c951-daf8-d852-0ad2738bd7b3.png)

## send
![Screenshot_1639059019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/1871df1d-bccd-b60e-6a71-ae553fbbdb8e.png)

## その他
他にも色々あるのでぜひ試してみてください

https://api.flutter.dev/flutter/services/TextInputAction.html
ruby 3.0.3を入れる

Ruby 3.0.3を入れる方法

https://qiita.com/gyu_outputs/items/8e0d91f625e1daa8720b

https://techacademy.jp/magazine/19790







↓以下は自分用です。上の２つの記事を見ればできます。
バージョン確認
$ rbenv versions 

$ brew update

$ brew upgrade rbenv ruby-build

Ruby 3.0.3が表示される
$ rbenv install -l

$ rbenv install 3.0.3

$ rbenv global 3.0.3

確認
$ rbenv versions
Reactのライフサイクルを復習する

ふと復習しておこうと思ったので、メモ書き。

## ライフサイクルとは
コンポーネントが生まれてから死ぬまでの流れのこと
また、`Classコンポーネント`時代には、ライフサイクルメソッドがあり、ライフサイクルメソッドを使うことで
特定のタイミングで処理を行わせることができる。

代表的なライフサイクルメソッドは以下の3つ

```
1. componentDidMount()
2. componentDidUpdate()
3. componentWillUnmount()
```

また、ライフサイクルには3種類ある

1. Mounting　- コンポーネントが配置されるタイミング
1. UpDating　- コンポーネントが更新されるタイミング
1. Unmounting - コンポーネントが破棄されるタイミング

## それぞれのライフサイクルで何をしているのか

### Mounting - コンポーネントが配置されるタイミング
Mounting時にはコンポーネントが`初期化`される。つまり、useStateなどの初期値が設定される。
そして、その初期値を使って`レンダリング`する。
レンダリングしたあとは、マウント後の処理として`componentDidMount`が実行される。
useEffectは、このタイミングで初回実行される。

### Updating - コンポーネントが更新されるタイミング
そのコンポーネントが更新されるタイミング、つまりuseStateで設定した初期値が変更されたり、渡ってくるpropsが変更されたタイミングで`再レンダリング`する。
そして、再レンダリングを行ったあとは`componentDidUpdate`が実行される。
useEffectでは、依存配列に設定している対象に変更がある場合に、第一引数に設定している関数が実行される。

### UnMounting - コンポーネントが破棄されるタイミング
違う画面に遷移するタイミングや、そのコンポーネントが必要でなくなったタイミングに、アンマウント前の処理として`componentWillUnmount`が実行される。
useEffectでは、第一引数に設定した関数のreturnでクリーンアップ関数を設定しておくと、このタイミングで実行される。

## Reactのコンポーネントがレンダリングされるタイミング
タイミングは以下の3つ。

1. マウント（コンポーネントが初回ロード）された時
1. コンポーネントが更新された時
1. アンマウント（死んだ）時

こちらは図があってわかりやすい。

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

## useEffectについて
useEffectはReactが`Classコンポーネント`で記述されていた時のライフサイクルを1つのhooksで記述できるようにしたもの。

effectとは、副作用という意味で、Reactにおける副作用とは「レンダリングによって「引き起こされる処理」と理解している（合っているのかは心配）。

### Reactにおいて具体的な副作用とは

- DOMの変更
- APIとの通信
- console.log
- ファイルへの書き込み
- state/propsの変更
- オブジェクトまたは、その内部のプロパティへの代入
- 配列のpush

以上の処理はすべて「関数の外に影響を与えてしまう関数」である。この関数の外に影響を与える関数は、useEffectの内部に書く。

## まとめ
あらためてライフサイクルについて復習してみると、useEffectがどのタイミングで動くかという理解が深まりました。
初めからuseEffectを使うのではなく、ライフサイクルを学んでからuseEffectを学んだ方が理解が早そう。
React Hook Form のバリデーションルールごとにエラーメッセージを定義する

React Hook Form のバリデーションルールは、実はこんな書き方ができる。

```react
const {register, handleSubmit, formState: {errors} } = useForm()
const onSubmit = (data:any) => console.log(data)

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    // よくあるサンプル
    <input {...register("email", { required: true })} />
    {errors.email && 'メールアドレスを入力してください'}

    // バリデーションルールと一緒にエラーメッセージを定義できる
    <input {...register("email", { required: 'メールアドレスを入力してください' })} />
    {errors.email && errors.email.message}
  </form>
)
```

この方法はルールが複数あるフォームで威力を発揮する。

```react
const {register, handleSubmit, formState: {errors} } = useForm()
const onSubmit = (data:any) => console.log(data)

// ルール定義オブジェクト
const rules = {
  required: '入力してください',
  minLength: { value: 6, message: `6文字以上で入力してください。` },
  maxLength: { value: 32, message: `32文字以内で入力してください。` },
  pattern: { value: /^[a-zA-Z0-9]+$/, message: '半角英数字で入力してください。' }
}

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    // バリデーションエラーの内容に応じてエラーメッセージが表示される
    <input {...register("userid", rules)} />
    {errors.userid && errors.userid.message}
  </form>
)
```

この書き方は当然 `<Controller rules={} >` でも使えるので、Material-UIのTextFieldsを使う時など、エラー表示機能があるコンポーネントで綺麗にエラーが書けます。
Blazor with Intro.js

今回はチュートリアル機能を実装できる[Intro.js](https://introjs.com/)をBlazorアプリケーションに導入していきたいと思います:sunny:

**[Intro.js](https://introjs.com/)**

https://introjs.com/

**Intro.js Doc**

https://introjs.com/docs

実装例は GitHubのexampleが参考になります:metal:

https://github.com/usablica/intro.js

Intro.jsについては、いくつかの記事がありますので、そちらも参考にしてみてください:sparkles:

**Webでデモ・チュートリアルを簡単に作れる intro.js の導入方法** (@RyutaKojima さん)

https://qiita.com/RyutaKojima/items/00c497cd6131944429b1

**[Demo](https://blazorwithintrojs.firebaseapp.com/)**

https://blazorwithintrojs.firebaseapp.com/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/ee4273cf-b98e-c821-d11b-7baaf29aa81e.png" width=70%>

#使い方
Intro.jsの使い方は、HTML要素に対して`data-step`や`data-title`,`data-intro`といったタグを埋め込みスクリプト`introJs().start()`を実行するだけで、要素に対してチュートリアルを作成してくれます。
例えば、**[Demo](https://blazorwithintrojs.firebaseapp.com/)**での最初のステップは、👇な感じです。

```html:Index.razor
<h1 data-step='1' data-title="Welcome!" data-intro="こんにちは！一緒にBlazorの世界を楽しみましょう 👋">Hello, world!</h1>
```

```javascript:index.html
<script>
    window.InitJS = (_) => {
        introJs().start();
    }
</script>
```
`data-step`で進める順番を作ってあげることで、コンポーネントをまたいで、シームレスにチュートリアルを進めることができます:v:
**[Demo](https://blazorwithintrojs.firebaseapp.com/)**の場合だと、`Index.razor`👉`NavMenu.razor`👉`MainLayout.razor`の順番に遷移しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/e57a2f49-fb7f-72bc-558f-a0cf8cfadfaf.gif" width=70%>

#初回だけ表示させる工夫
チュートリアルを表示させたい要素を共通的なコンポーネントである`MainLayout.razor`や`NavMenu.razor`などに埋め込む場合はレンダリングされる度にチュートリアルが表示されてしまうので、初回だけ表示させるなど少し工夫が必要になりますね:thinking:

#動的な要素には表示できない
`FetchData.razor`は`HttpClient`で取得した情報を`table`に表示しますが、`table`要素全体にチュートリアルを表示することができませんでした。`introJs().start()`を実行するタイミングなのかもしれませんが、動的な要素に表示するには工夫がいるようです:head_bandage:

#おわりに
Intro.jsを使ってBlazorアプリケーションにチュートリアルを表示する方法をご紹介しました。Intro.jsは商用利用でない場合、フリーで使用できますので興味のある方は試してみてください:muscle:

今回もあまりBlazorには関係ない小ネタ感がありますが、何かのお役にたてれば幸いです:bow:
透過アニメーション 成功と失敗集

## やろうとしたこと

前提固定ヘッダーにボタン押下でナビゲーションメニューを開閉する仕組み
（いわゆるハンバーガーメニュー）
その開閉時の視覚効果を「スーッと消えたり現れたりする透過アニメーション」にする


## 失敗集
### その1

```html:html
<button class="menu-btn type="button" title="メニュー" aria-expanded="false">MENU</button>
<div class="menu">
   # 以下グローバルメニューの中身
</div>
```

```javascript:js
document.querySelector('.menu-btn').addEventListener('click', function () {
    document.querySelector('.menu').classList.toggle('is-active');
    if (this.getAttribute('aria-expanded') == 'false') {
         this.setAttribute('aria-expanded', true);
    } else {
         this.setAttribute('aria-expanded', false);
    }
});

```


```scss:scss
.menu {
   opacity: 0;
   transition: all 0.5s ease-out;
   &.is-active {
      opacity: 1;
   }
}
```

結果：アニメーションは期待通りになるが、ヘッダーのリンクが機能しなくなった。
原因：透過しても、要素自体が無くなる訳ではないのでそれらが重なってしまった。
対策：displayの値を切り替える
↓↓↓


### その2
```scss:scss
.menu {
   display: none;
   opacity: 0;
   transition: all 0.5s ease-out;
   &.is-active {
      display: block;
      opacity: 1;
   }
}
```

結果：リンクが機能しなくなる問題は解決したが、今度は透過アニメーションが作動せず。
原因：期待する挙動が
①display:noneを解除（この時点でopacity:0）
②n秒かけてopacityを1にする
であるのに対し、CSSファイルは上から順に指示をされるため
transitionが適切なタイミングで実行されない
対策：jQueryの[@keyframes](https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes)を使えば、アニメーションを自由に定義できるとのこと。
    display:noneの解除後に[@keyframes](https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes)を読み込んでアニメーションを実行させる
↓↓↓


### その3

```scss:scss
@keyframes fadeIn {
  0% {
     opacity:0;
  }
  100% {
     opacity:1;
  }
}

@keyframes fadeOut {
  0% {
     opacity:1;
  }
  100% {
     opacity:0;
  }
}

.menu {
   animation-name: fadeOut;
   animation-duration: 0.6s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards; 
   display: none;
   &.is-active {
      display: block;
      animation-name: fadeIn;
      animation-duration: 0.6s;
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
   }
}
```

結果：動きました！但し、アニメーションが適用されたのはフェードインの方だけ。
原因：`.is-active`というクラス名を付与した際は有効だが、
除去したタイミングにはcssの再読み込みはされないから？？　
この問題について解決策を見つけることは出来ませんでしたが、
色々調べていく中で今回自分が実現したかったことは
jQueryの[fadeToggle](https://js.studio-kingdom.com/jquery/effects/fade_toggle)と同一のものだと分かりました。
cssは不要です。
↓↓↓

### 最終的なコード

```javascript:js
document.querySelector('.menu-btn').addEventListener('click', function () {
         $('.menu').fadeToggle(1000); // この一文を追加
         document.querySelector('.menu').classList.toggle('is-active');
         if (this.getAttribute('aria-expanded') == 'false') {
            this.setAttribute('aria-expanded', true);
         } else {
            this.setAttribute('aria-expanded', false);
         }
      });
```
Julia, C++, Pythonの実行速度を比較してみました。（2021年版）

https://qiita.com/m_yamaguchi116/items/984977529cf72be019f2
を受けて投稿します。

コメントだと反応が薄いので。

# 環境

macOS Monterey
バージョン 12.0.1
Mac mini(M1, 2020)
チップ Apple M1
メモリ 8 GB

# Python の場合
まずは，Python です。M1 チップ対応です。
Python 3.10.0 (v3.10.0:b494f5935c, Oct  4 2021, 14:59:19) [Clang 12.0.5 (clang-1205.0.22.11)] on darwin

ターミナルから起動して，総実行時間を計測しました。
なお，元のプログラムでは for m in range(0, 11): とありましたが，他の言語では 0 〜 9 までなので，for m in range(0, 10): に修正しました。

```Python
foo [5] > cat pi.py
limit = 10
for m in range(0, 10):
    n = 1
    l = 0.0
    while n < limit:
        l += (1.0 / n) - (1.0 / (n + 2))
        n += 4
    print(m, l * 4)
    limit *= 10

foo [4] > time python3 pi.py
0 2.9760461760461765
1 3.1215946525910097
2 3.1395926555897824
3 3.1413926535917893
4 3.141572653589808
5 3.1415906535898936
6 3.14159245358981
7 3.1415926335405047
8 3.1415926445762157
9 3.1415926445762157
405.394u 0.723s 6:46.37 99.9%	0+0k 0+0io 0pf+0w
```

405 秒もかかりました。10 までやったら，1 時間以上かかるでしょうから，途中でやめたのも無理ないかなという大惨事。

# C++ の場合

続いて，C++ でやってみようと思います。M1 チップ対応です（arm64-apple-darwin21.1.0）。

```C++
foo [46] > cpp --version
Apple clang version 13.0.0 (clang-1300.0.29.3)
Target: arm64-apple-darwin21.1.0

この場合も，limit ごとの秒数カウントはなしで，総実行時間を測定します。

foo [6] > cat pi.cpp
#include <stdio.h>
#include <time.h>

int main()
{

    double limit = 10;
    for (int i = 0; i < 10; i++) {
        double l = 0.0;
        for (double n = 1; n < limit; n += 4)
        {
            l += (1.0 / n) - (1.0 / (n + 2));
        }
        printf("%d %1.16f\n", i, l * 4);
        limit *= 10;
    }
    return 0;
}

foo [14] > gcc -O3 pi.cpp
foo [15] > time ./a.out
0 2.9760461760461765
1 3.1215946525910097
2 3.1395926555897824
3 3.1413926535917893
4 3.1415726535898081
5 3.1415906535898936
6 3.1415924535898099
7 3.1415926335405047
8 3.1415926445762157
9 3.1415926445762157
2.759u 0.005s 0:02.76 99.6%	0+0k 0+0io 0pf+0w
```
2.759 sec. でした。優秀ですね。

# Julia の場合

次は，Julia でやってみることにしました。これも，M1 チップ対応です。

foo [48] > julia --version
julia version 1.7.0

julia は，初回の実行時にコンパイルしますので，コンパイル時間を除く実行時間を知るためにプログラム内部で@time により実際の実行時間を測定します。なお，コンパイル後の実行も初回は実行時間が余計にかかりますが，同じプログラムの2回目以降の実行時間は速くなります。

```Julia
function f()
    limit = 10
    for i = 0:9
        l = 0.0
        for n =1:4:limit−1
            l += 1 / n - 1 / (n + 2)
        end
        println(i, " ", l * 4)
        limit *= 10
    end
end

@time f()

foo [41] > julia pi.jl
0 2.9760461760461765
1 3.1215946525910097
2 3.1395926555897824
3 3.1413926535917893
4 3.141572653589808
5 3.1415906535898936
6 3.14159245358981
7 3.1415926335405047
8 3.1415926445762157
9 3.1415926445762157
  2.673255 seconds (30.96 k allocations: 1.707 MiB, 0.51% compilation time)
```
2.673 秒でした。C++ と同じくらいということです（ちょっと速いが誤差範囲）。素晴らしい。

ということで，Julia は，少なくとも **Python より 150 倍ぐらい速い**ということが示されました。
サイトと資料がちょっとおしゃれになるサービス３選

# はじめに
こんにちは👍4年のてるです

昨日は@naretayamiさんがスクレイピングで歌詞を取得してWordcloudで表示する方法について書いてくれました。記事を参考にしながら色々な歌手で試してみましたがとても楽しかったです。

[MYJLab Advent Calendar 2021](https://qiita.com/advent-calendar/2021/myjlab)も今日で10日目🔥
今回はサイトと資料がちょっとおしゃれになるサービス３つを紹介したいと思います。

### ① Coolors
まず紹介するのはCoolors。おしゃれな色や配色を探したい時に使います。

https://coolors.co/

URLに飛ぶと可愛いおっちゃんがでてきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1790148/8a56cf07-c6be-ac0f-0e19-9d680eb1b56d.png)

翻訳をかけてみると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1790148/d8d057ca-e8c3-e68a-45b3-25a409740111.png)

Coolorsのクリエーター兼メンテナーのFabrizioさんがフィードバックを欲しがっているみたいです😎今回は✖︎マークを押しましょう。

Coolorsは配色ジェネレーターだったり、たくさんの便利な機能があるんですが、１番のおすすめは画面右上にあるExploreをクリックした先にあるページ「[Trending color palettes](https://coolors.co/palettes/trending)」です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1790148/f401d31b-3504-74b2-f9ba-ace6f0a59155.png)

いまっぽいおしゃれな色が並んでいて、気に入った色にカーソルをあわせてクリックするとカラーコードを簡単にコピーできます。

色に悩んだらぜひCoolorsを👍

### ② Pinterest
つぎに紹介するのは画像共有サイトPinterest。

https://www.pinterest.jp/

おすすめは英語での検索です🔍
よく見るサイトや資料とは違うおしゃれな色使いやデザインがでてきて良い刺激になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1790148/2c645cde-c9e4-bd9d-e82a-264d8d9312dc.png)

使い続けているとホーム画面は自分好みにカスタマイズされていきます。いいですね😇
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1790148/6996e62a-4205-dc27-1d04-6764e2bc137d.png)

### ③ FLAT ICON DESIGN　
最後は、可愛い系のアイコン素材をまとめたサイト、FLAT ICON DESIGN。

http://flat-icon-design.com/

WEBデザインやスマートフォンのUIなどで注目されているフラットデザインのアイコン素材がストックされています。高画質な画像を使ったシャープなデザインもとても綺麗ですが、こういった絵本みたいなデザインもいいですよね👍
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1790148/dcf0cead-f059-d10f-1de4-3486f114fa4b.png)

背景のありなしをえらべたり、SVGのベクターデータがあったり、使い勝手がとても良いので気に入っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1790148/50d8bf08-9039-2a2e-5ff4-780dd12e3869.png)

蛇足かもしれませんが、ページ上部にある[LINKS](http://flat-icon-design.com/?page_id=49)をクリックすると、FLAT ICON DESIGNとは少しテイストの違うサイトが紹介されているのでチェックしてみるのもいいかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1790148/0b1c316c-0614-c73a-5df4-5a565bd5a9ed.png)


※現在（2021/12/9）はすべての素材を無料（フリー）で使用できるそうですが、使用前にはライセンスや利用条件をご自分で必ず確認してください。

## おわりに
以上、サイトと資料がちょっとおしゃれになるサービス３つを簡単にまとめました。

 - Coolors（色探し）
 - Pinterest（インスピレーション）
 - FLAT ICON DESIGN（アイコン素材）

最後までお読みいただきありがとうございました👍

## 参考
- [配色えらびに超便利！カラーパレットやグラデーションなど色ツールが揃ったCoolors](https://photoshopvip.net/127898)
- [デザインのインスピレーションを得られるお勧めのサイト８つ](https://blog.tensendesign.com/inspiration/design-inspiration/)
- [商用可で無料！フリーアイコン素材サイト14選](https://saruwakakun.com/design/tips/icon)
swiftでチェックボックスを作る in コード


# CheckBoxのカスタムボタンクラスを作る
```swift
import UIKit

final class CheckBox: UIButton {
    
    //MARK: - プロパティ等
    let checkedImage = UIImage(systemName: "checkmark.square.fill")
    let uncheckedImage = UIImage(systemName: "square")
    
    var isChecked: Bool = false {
        didSet{
            if isChecked == true {
                
                self.setImage(checkedImage, for: .normal)
            } else {
                self.setImage(uncheckedImage, for: .normal)
            }
        }
    }
    
    //MARK: - ライフサイクル
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.setImage(uncheckedImage, for: .normal)
        addTarget(self, action: #selector(buttonClicked), for: .touchUpInside)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.cornerRadius = 10
    }
    
    //MARK: - 関数等
    
    @objc func buttonClicked(sender: UIButton) {
        if sender == self {
            isChecked = !isChecked
        }
    }
    
}


```
##ViewController
```swift
import UIKit

final class ViewController: UIViewController {

    private lazy var checkButton: CheckBox = {
        let button = CheckBox()
        button.addTarget(self, action: #selector(setPassword), for: .touchUpInside)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        view.addSubview(checkButton)
        checkButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        checkButton.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }
    
    @objc func setPassword() {
        
        if checkButton.isChecked {
            print("チェックされた")
            //チェックされた時の処理
        }
        
    }

}


```
##完成イメージ
![チェックボタン.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1679562/fb63f464-3aec-d1fe-fe24-e71a34797f9d.gif)


##終わりに
誰かの参考になれば幸いです
Qiitaさんいつもお世話になってるので感謝
間違えてるところ等ありましたら教えてくださいー

##参考
https://qiita.com/bohebohechan/items/49aa25ed9a24b04619a0
使いたいポートが既に使用されている場合の犯人探しと対処法

## まず結論

以下のコマンドを実行すればOK ※実行環境はUbuntu(Linux)です

```sh
lsof -i:<対象のポート>
# ex.)
lsof -i:4324

# 実行結果
COMMAND   PID    USER   FD   TYPE   DEVICE SIZE/OFF NODE NAME
node    19053 user   24u  IPv4 61691518      0t0  TCP localhost:4324 (LISTEN)

# プロセスを削除
kill 19053
```

## 発生した経緯

開発中にNode.js(nodemon経由)のアプリがバックグラウンドで実行されてしまった。

気がつかずに新たにNode.jsのアプリを実行したところ、以下のエラーが発生

```
Starting inspector on 127.0.0.1:4324 failed: address already in use
```

割とやってしまうのでメモとして残します。
qmail .qmailの書き方備忘録


.qmailファイルのいろんな書き方備忘録
(今どき.qmail使う人もいないかな？)


###転送
```
&hoge@fuge.cofu.jpge
```
&をつければ転送




###ファイルに保存
```
| cat >> /tmp/qmail/mail_`date "+%Y%m%d"`
```
日付等でファイルを分けたいならdateコマンドを``で囲めばOKっぽい（シェルスクリプトやね）


###捨てる
```
| cat > /dev/null
```
/dev/nullで永遠の彼方に

###プログラム起動
```
| /usr/local/bin/php /dokodko/hoge/aaa.php
```
stdinで受け取れるので例えばphpで受け取るとしたら

```php
<?php
  $r=file_get_contents("php://stdin");
  
```
ってうけとって煮るなり焼くなり

###maildir形式

```
/var/qmail/bin/maildirmake /tmp/mail_aaa
```
でmaildirを作って.qmailファイル内は

```
/tmp/mail_aaa
```
でいいはず。あんま使ったことないから知らない。
【python】Bookmarkしておきたいリソース３選

# はじめに

皆さんこんにちは！YomamaBananaでございます。
今回は皆さんにご紹介したいものがございまして、ぜひ最後まで読んでいただければと思います！


今回は自分がpythonで開発する際に非常にお世話になっているサイトを３つ紹介します。
**！注意！**紹介するリソースはどれも**英語ONLY**となっております。


1. Computer Visionに注力している**PyImageSearch**
1. 機械学習・深層学習全般の**Machine Learning Mastery**
1. ワシントン大学の**Steve Brunton先生**


# PyImageSearch

### オススメ度: :thumbsup: :thumbsup:  :thumbsup: :thumbsup: 

#### ポイント：

* 全てのコードに対して説明がある。（英語）
* Notebook付き。
* 更新がこまめ。

#### 概要：

CV系に関するものはたいていあります。さらに単純にソースコードと出力だけではなく、全ての手順に説明がついており、問題定義→手法提示→プロジェクト管理など一連の開発について非常に勉強になります。

CVに関するコースを提供しているが、それに登録すると強制せず、自由に気になるチュートリアルを読むことができます。

https://www.pyimagesearch.com/

# Machine Learning Mastery

### オススメ度: :thumbsup: :thumbsup:  :thumbsup:

#### ポイント：

* ML・DLについて一通り乗っている。
* 実装だけではなく、元となる数理モデルや数学の知識・説明もある。

#### 概要：

ML・DLについて幅広く扱っています。
幅広い分少し更新が遅いような気がしますが、数式が好きな駆け出しなエンジニア（私:raised_hand:）にはピッタリかもしれません。

https://machinelearningmastery.com/blog/

# Steve Brunton先生


### オススメ度: :thumbsup: :thumbsup:  :thumbsup: :thumbsup: :thumbsup:

#### ポイント：

* アメリアのワシントン大学の先生が公開している講座。
* 力学・流体工学に特化しつつ、ML・DLの工学への応用などもある
* 動画がかっこいい
* データ・ソースコード・教科書付き

#### 概要：

大学レベルの無料講座で、単元やシリーズに分けています。
少し工学・力学系に注目しているように感じるが、SVD（特異値分解）を用いた顔認識や
PCA（主成分分析）やFFT（高速フーリエ変換）を用いた画像圧縮やシグナル解析など、
幅広く扱っています。

##### youtube
https://www.youtube.com/c/Eigensteve

##### 本・ソースコード・データ

http://www.databookuw.com/

# あとがき

**「開発力＝ググる力+$\alpha$」**と、私は時々思ってしまいます。

以上の方々のおかげで私は非常に成長したと実感しており、皆さんもぜひご活用ください！

英語がメインになることが難関かもしれませんが、翻訳アプリを作れば大丈夫なはずです！ww]

それでは！
Markdown記法

# 見出し（hタグ）

先頭に#
\#の数＝hタグのレベル（例：#=h1、####=h4）
\#の数は最大6つ
\#と文字の間に半角スペース

### 記述例
```
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
```

### 表示
> # 見出し1
> ## 見出し2
> ### 見出し3
> #### 見出し4
> ##### 見出し5
> ###### 見出し6

# コードブロック
黒板のような部分
黒板に表示させたい文字を```（バッククォート×3）で囲む

#引用
先頭に>
\>と文字の間に半角スペース

###記述例
```
> 引用する
> 引用します
> 引用しています
```

### 表示
> 引用する
> 引用します
> 引用しています

# リスト（ulタグ）
先頭に*（アスタリスク）、+（プラス）、-（ハイフン）のいずれか
\#と文字の間に半角スペース

### 記述例
```
- あいうえお
- かきくけこ
- さしすせそ
```

### 表示
> - あいうえお
> - かきくけこ
> - さしすせそ

# リスト（olタグ）
先頭に数字と.（ピリオド）
\#と文字の間に半角スペース

### 記述例
```
1. アイウエオ
2. カキクケコ
3. サシスセソ
```

### 表示
> 1. アイウエオ
> 2. カキクケコ
> 3. サシスセソ

# 強調（emタグ）
強調したい部分を*（アスタリスク）か_（アンダースコア）で囲む

### 記述例
```
text *text* text
```

### 表示
>text *text* text

# 強調（strongタグ）
強調したい部分を**（アスタリスク×2）か__（アンダースコア×2）で囲む

### 記述例
```
text **text** text
```

### 表示
>text **text** text

# エスケープ
\（バックスラッシュ）をMarkdownの前に挿入

### 記述例
```
\# エスケープ
```
### 表示
> \# エスケープ

# 参考にした記事
- [Markdown記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7)
- [Qiita マークダウン記法 一覧表・チートシート](https://qiita.com/kamorits/items/6f342da395ad57468ae3)
Blazorのプロジェクト構成を学ぶ

#はじめに

暇な時間にVisual Studio 2019をいじって遊んでたらBlazorなるものを見つけたので、少し動かしてみてました。
ASP.NET MVCやWeb APIはいじったことがありましたが、Blazorは触ったことがないのでちょっと学んでみようと思います。

#プロジェクト構成

Visual Studio 2019を起動し、「新しいプロジェクトの作成」から「Blazor WebAssembly アプリ」を選択して作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751890/c38ec9a1-f7b8-54ef-46d6-ac8a3cda49d6.png)

プロジェクト構成は以下のようになってました。
※認証ありにしてるのでAuthentication.razorが混ざってます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751890/6ff609ec-bd11-2dad-99ac-99f2f12b9798.png)


##Pagesフォルダについて

Pagesフォルダ内には、メニューの選択時に出力されるそれぞれのページファイルが格納されています。

##Counter.razorについて

Blazorのプロジェクトをデバッグ実行したときに、デフォルトで実装されているカウンターアプリのソースコードです。



```C#:Counter.razor
@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary"  @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

}
```

**@page**はページのURL、**@code**は処理を記述するブロックです。

@code内で、currentCountという変数が宣言され、IncrementCountで1ずつ足していく処理が書かれています。
このIncrementCountというメソッドの動きを、ボタンを押すたびに働くようにしてあり、1ずつ足されていったcurrentCountがpタグを使って画面上に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751890/272e2ddd-d582-0044-c574-e994294a918c.png)

「Click me」を押すと、メソッドが働いて加算されたcurrentCountが表示されます。

##現在時刻の表示＆更新機能を実装する

上の動きを使って、Homeに現在時刻の表示と、ボタンを押すことによって時刻が更新される機能を実装します。

```C#:Index.razor
@page "/"

<h1>Hello, world!</h1>

<div class="alert alert-warning" role="alert">
    Before authentication will function correctly, you must configure your provider details in <code>Program.cs</code>
</div>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<p>現在時刻: @now</p>
<button class="btn btn-primary" @onclick="dispDate">更新する</button>

@code{
    private DateTime now;
    private void dispDate()
    {
        now = DateTime.Now;
    }
}
```

現在時刻を取得するDateTime型変数nowを宣言して、最新の時刻取得を行うdispDateメソッドを作成し、動きをボタンに持たせます。
そして、pタグで「現在時刻」の隣に変数nowをセット。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751890/d44d8f5e-175d-cbed-26d6-887fbdebe787.png)

更新するボタンを押すたびに、表示されている現在時刻が変化します。

#おわりに
これだけしかまだやってないので何とも言えませんが、結構直感的で使いやすい気がする。

仮想DOM、便利ですねー。
Swiftで配列の削除・追加をする方法

おはようございます。

Swift初学者のnaokiです。

今回は備忘録として、配列の追加と削除をする方法をまとめてみようと思います。

#配列の追加

まずは、配列にデータを入れる方法を紹介します。

##append

```swift:practice.swift
var food = ["fruit","hamburger","beaf"]

food.append("vegetable")

print(food)//["fruit", "hamburger", "beaf", "vegetable"]
```
appendメソッドは、配列にデータを追加することができます。

##append(配列の結合)

```swift:practice.swift
var OneFood = ["fruit","hamburger","beaf"]

var TwoFood = ["potato","sandwich","snack"]
 
OneFood.append(contentsOf: TwoFood)

print(OneFood)//["fruit", "hamburger", "beaf", "potato", "sandwich", "snack"]
```
appendメソッドは、配列同士を合体させることができます。

##insert
```swift:practice.swift
var OneFood = ["fruit","hamburger","beaf"]

OneFood.insert("snack", at: 2)

print(OneFood)//["fruit", "hamburger", "snack", "beaf"]
```
insertメソッドは、配列の添字を指定して、その場所にデータを入れることができます。


#配列の削除

次は配列の削除をまとめていきます。

##remove

```swift:practice.swift
var food = ["fruit","hamburger","beaf"]

food.remove(at:2)

print(food)//["fruit","hamburger"]
```

removeメソッドは添字を指定して削除することができます。


##removeFirst

```swift:practice.swift
var food = ["fruit","hamburger","beaf"]

food.removeFirst()

print(food)//["hamburger","beaf"]
```
removeFirstメソッドは、配列の最初にあるデータを削除する事ができます。
##removeLast

```swift:practice.swift
var food = ["fruit","hamburger","beaf"]

food.removeLast()

print(food)//["fruit","hamburger"]
```
removeLastメソッドは、配列の一番最後にあるデータを削除する事ができます。

##removeAll

```swift:practice.swift
var food = ["fruit","hamburger","beaf"]

food.removeAll()

print(food)//[]
```
removeAllメソッドは、配列の中身を全て消すことができます。

#まとめ
ちょっと疲れた。
【Tableau】今年知って便利だったTips②〜viewサイズの調整〜

この記事は[Advent Calendar 2021 Tableau](https://qiita.com/advent-calendar/2021/tableau2021)の9日目の記事となります。

本日は便利な**viewサイズの調整**をご紹介します！

以下のビューはダッシュボードサイズにワークシートが入り切っておらず
スクロールバーが発生してしまっています。
（もちろんスクロールバーが発生しても仕方ない時もありますが、これくらいなら収まります）
![スクリーンショット 2021-12-09 9.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/72189df7-48ef-cc21-ac71-3b48db5893a8.png)

このような時にviewサイズの調整が必要になりますが、
ワークシートのチャートサイズの微調整を自分の手で行わなくても自動で調整することができます。
![スクリーンショット 2021-12-09 9.25.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/6eb4dafa-a7ef-b534-03f1-1f4b5246c694.png)

###手順
ダッシュボード上で調整したいワークシートを選択します。（クリックし選択されると黒い縁で囲われます）
その状態で、ツールバーの真ん中にあるBOXに注目してください。
現在は「標準」になっているのが分かります。
![スクリーンショット 2021-12-09 9.29.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/0d69105b-44ad-b346-ff6f-7c47f627fcf8.png)

これを「ビュー全体」に変更してください。
![スクリーンショット 2021-12-09 9.32.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/19cb45c4-d327-f0f8-4afd-c579132acbc7.png)

これで綺麗におさりました。

ちなみにビュー全体の他にも種類があります。全部で4つです。
**・標準
・幅を合わせる
・高さを合わせる
・ビュー全体**
![スクリーンショット 2021-12-09 9.35.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/b820b58d-f197-1767-2fe6-74d26cfe0e91.png)

折角なので、今回のチャートで一つずつ試していきましょう。

###標準
デフォルトはおそらく「標準」になっているかと思うので
ビューサイズを何も調整しない状態だとこのような形になります。
![スクリーンショット 2021-12-09 9.37.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/cc3f08e2-1481-c157-ee02-d564b67c3888.png)

###幅を合わせる
横幅が長い時に活用するといいです。（横スクロールが表示されているとき）

キャプチャ（赤枠）の棒グラフだと標準の状態でも横幅が合っているので変化が分からないですね
![スクリーンショット 2021-12-09 9.41.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/747ab0db-4b7c-286a-23c0-8198bf9a41fe.png)

なので、もう一つの表グラフで試してみましょう
標準の状態から操作していきます。
![スクリーンショット 2021-12-09 9.44.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/6a4d3fc8-dc49-3727-def4-1349bb09c3ec.png)

横幅が綺麗に揃いました。
![スクリーンショット 2021-12-09 9.45.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/1d6c5e8c-5b3f-bdc4-0acd-0690fe7f0f20.png)

###高さを合わせる
縦幅が長い時に活用するといいです。（縦スクロールが表示されているとき）
![スクリーンショット 2021-12-09 9.46.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/7cabf287-3679-7946-9b38-c0e66871c154.png)

縦幅が綺麗に揃いました。
![スクリーンショット 2021-12-09 9.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/ad44dcaa-669e-2051-8e72-7852a4a998ee.png)

###ビュー全体
横幅も縦幅もいい感じに調整して欲しい時に活用できます。
これも標準の状態から操作していきます。
![スクリーンショット 2021-12-09 9.49.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/167a3bee-8d94-466c-436b-75b76fd3db6e.png)

綺麗になりました。
![スクリーンショット 2021-12-09 9.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/0bcd35dc-6420-6429-4c00-9e321734787f.png)


ビュー全体で調整を行うとかなり楽ちんなので私は一番活用してます。
しかしそもそもダッシュボードに収まりきらないボリュームを無理に入れ込むと
文字が潰れてしまったり、チャートが見辛くなったりします。
なので
**①まず「ビュー全体」で見てみる→②調整が必要そうであれば「幅を合わせる・高さを合わせる」で見てみる**
の流れがお勧めです。
Scannerクラスの使い方＃2

この記事は、[シアトルコンサルティング株式会社](https://qiita.com/advent-calendar/2021/seattleconsulting) Advent Calendar 2021の13日目の記事です。
こんにちは、シアトルコンサルティングの森です。
TeamTech Move the WorldをMissionに掲げ、日々全力で業務に取り組んでおります！
少しでも興味を持って頂けたら下記のサイトを覗いてみてください！

コーポレートサイト
https://www.seattleconsulting.co.jp/
Wantedly
https://www.wantedly.com/companies/seattleconsulting
よろしくお願い致します！
## はじめに
今回はJavaSilverを取得する上で押さえておきたい概念「ポリモーフィズム」について、
実際の問題とともに説明していきます。
この記事を読んでポリモーフィズムに関する問題や考え方をマスターしていただければ幸いです。
## はじめに
今回は前回の記事の続きとなります。
複数行にわたるテキストをScannerクラスで読み取る方法について書いていきます。
前回の内容を元に話していきますので読んでない方、
初歩的なScannerクラスの使い方がわからない方は先にそちらをご参照ください。

## 目次
[1繰り返し処理の考え方](#1-繰り返し処理の考え方)
[2事前に何行かわかっている場合](#2-事前に何行かわかっている場合)
[3.最後に](#3-最後に)

## 1.繰り返し処理の考え方
複数行をScannerクラスで読み取るということですが、
考え方としては1行読み取る時にしたことを繰り返すだけです。
非常にシンプルな考え方です。
では実際にどのように複数行を読み取るのかということですが、
処理を開始する前に何行あるのかわかっている場合と、
分かっていない場合があるでしょう。
まずは事前に何行あるかわかっている場合から考えます。

## 2.事前に何行かわかっている場合
何行かわかっている場合はその数値を元にfor文を設定し、
その中にScannerクラスを挿入すれば対応できます。

例：
「太郎は
今日
家に
帰った。」
を読み取り出力してください。


```java:scanner_manySentence
public class Main {
    public static void main(String[] args) {
     Scanner sc = new scanner;
      for(int i=0;i<4;i++){
       String X = sc.nextLine();
       System.out.println(X);
      }
     }
```
出力結果：
太郎は
今日
家に
帰った。

となります。

またよくpaizaで用いられる方法としては
最初に何行続くかを示した数字を提示しその後その数値分入力されるという方法です。
まず1行目を読み取りその数値をfor文に使用します。
具体的には、

例：
「
3
123
1234
234
」と入力されたとします。
例の文章だと1行目の3はその後に何行続くかをしめてしている数値で、
その後の3行を使用する問題となっているでしょう。
この場合だと、

```java:scanner_manySentence
public class Main {
    public static void main(String[] args) {
     Scanner sc = new scanner;
     int N = sc.nextInt();
      for(int i=0;i<N;i++){
       int X = sc.nextInt();
       System.out.println(X);
      }
    }
     
```

となります。

## 3.最後に
複数行にわたるScannerクラスの使い方をご理解いただけたでしょうか？
今回は例文ということもあり全てそのまま出力しましたが、
出力せず一度リストや配列に入れることでその後いろんな処理を挟むこともできるので、
ぜひ挑戦してみてください。
【初学者向け】Scannerクラスの使い方

この記事は、[シアトルコンサルティング株式会社](https://qiita.com/advent-calendar/2021/seattleconsulting) Advent Calendar 2021の12日目の記事です。
こんにちは、シアトルコンサルティングの森です。
TeamTech Move the WorldをMissionに掲げ、日々全力で業務に取り組んでおります！
少しでも興味を持って頂けたら下記のサイトを覗いてみてください！

コーポレートサイト
https://www.seattleconsulting.co.jp/
Wantedly
https://www.wantedly.com/companies/seattleconsulting
よろしくお願い致します！
## はじめに
今回はJavaSilverを取得する上で押さえておきたい概念「ポリモーフィズム」について、
実際の問題とともに説明していきます。
この記事を読んでポリモーフィズムに関する問題や考え方をマスターしていただければ幸いです。
## はじめに
今回はJava初学者に向けたScannerクラスの使い方について記述いたします。
というのも私自身最初はScannerクラスの使い方がいまいち分からず、初学者用の参考書などにも書いていなかったためです。
また今回は最も使う今回は、**Scanner next**, **Scanner nextInt**, **Scanner nextLine**の3つについてお話します。 
この記事が一人でも助けることができれば幸いです。

## 目次
[1.Scannerクラスとは](#1-Scannerクラスとは)
[2.Scanner nextの使い方](#2-Scanner nextの使い方)
[3.Scanner nextIntの使い方](#3-Scanner nextIntの使い方)
[4.Scanner nextLineの使い方](#4-Scanner nextLineの使い方)
[5.最後に](#5-最後に)

## 1. Scannerクラスとは

> 正規表現を使用してプリミティブ型および文字列の構文解析が可能な、単純なテキスト・スキャナです。
Scannerは、区切り文字のパターンを使用して入力をトークンに分割します。
デフォルトでは区切り文字は空白文字です。
結果として得られるトークンは、さまざまなnextメソッドを使用して、異なる型の値に変換できます。

>[引用元]
>Overview-Summery （https://docs.oracle.com/javase/jp/8/docs/api/java/util/Scanner.html）

簡単に言うと、**入力された文章を読み取ることが出来るクラス**でこちら側で型も決めることができるという事です。

## 2. Scanner nextの使い方
Scannerクラスのnextメソッドは次に入力された値をString型で読み取ります。
また次の空行までしか読み取らないのでその点は注意してください。
そのため一行全て読み取りたい場合や、数字をint型として読み取りたい場合には使えません。

逆に一単語や一数字しか入力されない場合は使用できます。

例
「太郎」と入力した場合

```java:nextメソッド
public class Main {
    public static void main(String[] args) {

       Scanner sc = new Scanner(System.in);
       String f = sc.next();
       System.out.println("私の名前は"+f+"です。");
       
    }
}
```
結果
> 私の名前は太郎です。

となります。

また2文字以上入力する場合は繰り返し文と配列やリストを使用すると便利です。

## 3. Scanner nextIntの使い方
ScannerクラスのnextIntメソッドは次に入力された値をint型で読み取ります。
こちらもnextメソッド同様に次の空行までしか読み取らないのでその点は注意してください。
二つ連続で数値を読み取りたい場合はnextIntメソッドを連続して使用するか繰り返し文などを使ってみてください。

例1
「18」と入力した場合

```java:nextIntメソッド
public class Main {
    public static void main(String[] args) {

       Scanner sc = new Scanner(System.in);
       int num = sc.nextInt();
       System.out.println(num);
       
    }
}
```
結果
> 18

となります。

例2
「18 13」と入力した場合（スペースを挟んでいます）

```java:nextIntメソッド
public class Main {
    public static void main(String[] args) {

       Scanner sc = new Scanner(System.in);
       int numA = sc.nextInt();
       int numB = sc.nextInt();
       System.out.println(numA-numB);
       
    }
}
```
結果
> 5

となります。

## 4. Scanner nextLineの使い方
ScannerクラスのメソッドはnextLine次に入力された1行をString型で読み取ります。
1行であれば、すなわち改行されてなければ全て読み取ります。

例　
「ラーメン　パスタ　うどん」

```java:nextLineメソッド
public class Main {
    public static void main(String[] args) {

       Scanner sc = new Scanner(System.in);
       int LineA = sc.nextLine();
       System.out.println("好きな食べ物は"+LineA+"です。");
       
    }
}
```

結果
> 好きな食べ物はラーメン　パスタ　うどんです。

となります。

## 5. 最後に
Scannerクラスはいろんな場所で使用しますし、初学者が腕試しに使用することも多いpaiza等でも使用するクラスなのでかならずマスターしましょう。
また次回は一行ではなく複数行にわたる読み込みをしていきたいと思いますのでそちらもご覧になってください。
VBAチートシート

自分用メモ

## SubとFunctionの違い

```vb
'処理しておしまい
Sub 値を返さないよ()
End Sub

'処理して値を返す
Function 値を返すよ(str As String) As String '戻り値のデータ型の指定ができるがなくても可
    値を返すよ = str 'Functionの名前に値を入れて返す
End Function

'参照範囲の設定ができる
'記述がなければPublicになる
Private Sub 同一のモジュール内からしか見れないよ()
End Sub
```

## 変数の宣言

```vb
Dim 変数名 As データ型

'動的配列を再定義する。Preserveは省略可能
'Preserveがあることで既存データを保持したまま要素数を変更できる
Dim 文字の配列() As String
ReDim Preserve 文字の配列(3)
```

## プロシージャの呼び出し
Module1とかなくてもいいけどあるとわかりやすい

```vb
'引数が一つorなし
Call Module1.testSub(char)
Module1.testSub(char)

'引数が複数だと括弧が省略できる
Call Module1.testSub(char, key)
Module1.testSub char, key
```

## if

```vb
If isA Then
    MsgBox foo
ElseIf isB
    MsgBox bar
Else
    MsgBox baz
End If
```

## for

```vb
For i = 0 To 10
    ~~~
    If isA Then
        Exit For
    End If
Next i
```

## Subから抜ける

```vb
Exit Sub
```


## ファイルを開くモーダルを出す
ここで選択して実際に受け取っているのはファイルのパス

```vb
Application.GetOpenFilename("表示名,*.拡張子")

' 例としてCSVを指定
Application.GetOpenFilename("CSVファイル(*.csv),*.csv")
'例としてExcelを指定
Application.GetOpenFilename("Excelブック(*.xlsx),*.xlsx")

' ついでに選択がなかった時の処理（コピペ用）
' ファイルのパスを受け取る
filePath = Application.GetOpenFilename("表示名,*.拡張子")
If Dir(filePath) = "" Then
    MsgBox "指定ファイルがありません。"
    Exit Sub
End If
' 追記
' Dir関数は、引数で指定したファイル名と一致した最初のファイル名を返します
' 一致しない場合は空なので、ファイルやフォルダの存在チェックなどで使用する
```
## Excelファイルを開き、閉じる

```vb
'例としてモーダルで開いたファイルを扱う
filePath = Application.GetOpenFilename("Excelブック(*.xlsx),*.xlsx")
Workbooks.Open (filePath)
fileName = ActiveWorkbook.Name
'開いたアクティブなExcelファイルを保存
ActiveWorkbook.Save
Windows(fileName).Close
```

## テキストファイルを開く

```vb
'Input（読み込み専用）, Output（書き込み、元データは消える）, Append（元データの最後に追記）, Binaryなどある
Open filePath For Input As #1 '任意の使用していない数字
    Do Until EOF(1) 'ファイルの最後まで読める
        Line Input #1, buf '1行の読込
    Loop
Close #1
```

## 配列に関するメモ

なんとワークシートではなくただ配列として扱う場合、二次元配列として扱うとき、行で取り出せない。
ワークシート上で操作する場合はこの限りでないので値を自由に扱い人向け↓

```vb
 
Public Sub Test()
    ' 2次元配列
    Dim strArray(1, 1) As String
    strArray(0, 0) = "縦1横1"
    strArray(0, 1) = "縦1横2"
    strArray(1, 0) = "縦2横1"
    strArray(1, 1) = "縦2横2"
 
    ' 配列から取り出す
    ' これはOK
    Debug.Print strArray(0, 0) ' "縦1横1"

    '("縦1横1", "縦1横2")　を取り出したいが、
    ' これはエラー
    Dim str As String
    ' str = strArray(0) 
 
    ' 表から1行を取り出すような操作がしたいときはジャグ配列を作る
    Dim jagArray As Variant
    jagArray = Array(Array("縦1横1", "縦1横2"), Array("縦2横1", "縦2横2"))
 
    ' 配列から取り出せる
    Dim row As Variant
    row = jagArray(0) '("縦1横1", "縦1横2")　が入っていて1行だけ扱える
    Debug.Print jagArray(0)(0) '"縦1横1"　が入っていてもちろんく値も取り出せる
End Sub
```
ある日突然Azure Data StudioがDBにADログインできなくなった件。。 

会社でSQLDBに繋げるのに重宝していたAzure Data Studioを久しぶりに使おうと思ったら、以下のようなエラーが出た。

![Screen Shot 2021-12-09 at 8.58.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371631/9713854a-38af-07b1-3e78-77b843472ba3.png)

繋げ方は今のところ２通りできるはずで、ユーザー名とパスワードであれば問題なくつながる。
最近対応したActive Directoryを利用したログインも対応直後はもちろん確認もし、繋がっていたが、今回はなぜかエラーがでた。。

##解決方法
そこでググってみたところ以下の解決方法を見つけ試したところ簡単に直りました。

https://github.com/microsoft/azuredatastudio/issues/12165

簡単にいうとazure studioのアカウントフォルダー内にあるazureTokenCache_azure_publicCloudというファイルを削除してリスタートするだけ。

###修正箇所
Windows: C:\Users\{UserNameHere}\AppData\Roaming\azuredatastudio\Azure Accounts 配下
Mac: ~/Library/Application Support/azuredatastudio/Azure Accounts 配下

自分の場合はアプリを起動しなおしたらすぐに使えたけど、場合によっては、１度目はブランクのエラー画面がでて、２度目の再起動で直る、ということもあるみたい。

AADのパスワードを変えたことが原因っぽいらしいけど、毎回パスワード変えるとこれやらなくてはいけないのかな。。
CAL1研修で学んだ、組織にアジャイルを浸透させるための3つの意外なアイディア

こんにちは、Graatでスクラム導入やスクラムチームへのコーチングをしている斎藤です。
この記事は、[グロースエクスパートナーズ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/gxp) 11日目の記事です。

さて、10/18(月)から10/20(水)に、[認定アジャイルリーダーシップ I (CAL1)研修](https://www.jp.agilergo.com/cal-sahota-202001)を受講させて頂き、ハイパフォーマンスな組織に変わるための組織モデルやリーダーシップモデルを学習しました。

この研修は、アジャイルやリーダーシップに対する私の理解を深めてくれたばかりでなく、普段の仕事の姿勢までも大きく見直すきっかけとなりました。

とりわけ印象的だったのは、マイケル・サホタ氏の意見は、私がアジャイルに抱いていたいくつかの考えと「正反対」だったこと。
はじめは驚いたものの、よくよく考えるといずれも一理あると納得できる意見であり、多角的にアジャイルを見つめ直す良いきっかけとなりました。
そこで、今回は研修での学習内容を、組織にアジャイルを浸透させるための3つの意外なアイディアとしてご紹介したいと思います。

- 1. マネージャーのためにWBSを作るべし
- 2. アジャイルチームは宣伝するべからず
- 3. 構造よりも文化を変えるべし

### 1. マネージャーのためにWBSを作るべし

以前、マネージャーからの圧力によりWBSを作成することになり、すっかり活気を失ってしまったチームを目の当たりにしました。
その経験もあり、WBSが欲しいというマネージャーの要求には断固拒否すべきと考えていました。
しかし、サホタ氏の主張は、「WBSでもなんでも相手が欲しがるものはどんどん作ろう」という予想の斜め上のもの。
続けてサホタ氏は、「不安や恐怖を抱いた人は前頭前野の働きが弱まり思考停止に陥る」という脳科学の知見を紹介し、組織にアジャイルを浸透させるためには、まず、関係者の不安を取り除くことが重要だと語りました。
つまり、WBSや要件定義など作る理由は、マネージャーの不安を取り除き、ひいてはチームを守るためです（ちなみに、このようなチーム外の不安への緩衝材をアダプター（Adapters）と呼びます）。
受講者から、アダプター作成の労力に見合う価値があるのか？　という疑問が挙がりましたが、彼によればアダプターをアジャイルチームで働くための「税金（tax）」だと捉えて欲しいとのことでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28190/51b37001-81b0-aae5-2eed-784b2d4ed578.png)


https://shift314.com/culture-adapters/

### 2. アジャイルチームは宣伝するべからず

「あなたはアジャイルを組織に広げたいスクラムマスターまたはマネージャーです。
担当するスクラムチームが成長し、成果を挙げるようになりました。
さて、次に何をしますか？」

研修中、上記テーマで参加者同士でディスカッションしました。
「他のチームにアジャイルチームの事例を発表する」ような、アジャイルチームを宣伝するニュアンスの意見が多数を占めました。

サホタ氏は主張はこうです。
それが「罠（Trap）」なのだと。

チームの宣伝が良くない理由は、自分のチームを「イケてる」と宣伝することは、無意識に相手を「イケてない」と否定することにつながり、相手から反発を招く要因になるためです。
さらに、サホタ氏によれば、アジャイル組織にふさわしい文化とは「[X理論・Y理論](https://mitsucari.com/blog/xy_theory/)」におけるY理論であり、そこでふさわしい振る舞いは「プッシュ(Push)＝押しつける」ではなく「プル（引き出す）」です。
チームを宣伝することは、無意識に相手に「押しつける」ことにつながり、あるべき文化や振る舞いからかけ離れてしまう意味でもNGとのことでした。
ちなみに、この場合にサホタ氏が推奨する振る舞いは、「チームを極秘にする」。
チームを極秘にすることで相手の好奇心を掻き立て、「あなたのチームについて教えて欲しい」と聞かれる瞬間をじっと待て、というのがサホタ氏の意見でした。

### 3. 構造よりも文化を変えるべし

「あなたはアジャイルを組織に広げたいスクラムマスターまたはマネージャーです。
プロセスやプラクティスなどの戦術的側面、組織構造や給料などの戦略的側面、ビジョンや価値観などの文化的側面、あなたはどこに焦点を当てますか？」

参加者同士のディスカッションでは様々な意見が出ましたが、私含め多くの参加者の意見は組織構造や給料などの戦略的側面でした。

しかし、サホタ氏によれば、焦点を当てるべきは圧倒的に文化とのこと。
なぜならば、画像の通り、目には見えない、海面下にある文化こそが組織の大きな土台であり、組織や人々の振る舞いに大きく影響を与えるからです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28190/20b48b7c-5608-69a2-115d-bdd7d8d8eae2.png)

サホタ氏によれば、プロセスや組織構造などの中心にある結節点が文化なのです。
「文化が育っていれば、どんな組織構造でもそれを乗り超えること(ハック)ができるが、逆は難しい」というサホタ氏の主張はなるほどと思いました。

## おわりに

今回は、認定アジャイルリーダーシップ I (CAL1)研修での学習内容を、「組織にアジャイルを浸透させるための3つの意外なアイディア」としてご紹介しました。
いかがでしたでしょうか？　私自身も全てのアイディアに対し100%賛同できたわけではありませんし、賛否が分かれる内容だと思います（たとえば、「3. 構造よりも文化を変えるべし」という主張は、別の研修(認定LeSS実践者研修)で教わった[クレイグ・ラーマンの法則](https://scrummaster.jp/larmans-laws-jp/)の「組織構造が文化を作ります」という主張と対立します）。
それで良いのです。
組織にアジャイルを浸透させるためのアイディアは無数にありますが、「銀の弾などない」との言葉通り、常に正しいアイディアはありません。
アジャイルマネージャーやアジャイルコーチやスクラムマスターは、その中からアイディアを作成し、選択し、実験し、その繰り返しの中で組織に徐々にアジャイルを浸透させていけば良いのですから。
今回ご紹介したアイディアが、アジャイルマネージャーやアジャイルコーチやスクラムマスターがアジャイルを組織に浸透させる際のヒントになれば幸いです。
また、CAL1研修も組織におけるリーダーシップが興味ある方は、とてもおすすめの研修なので、ご興味あればぜひ受講を検討してみてください！
みなさんからのコメントやご意見があれば、是非、お願いします。
【Rails】ControllerのParamの有無でWhere条件をつけたりつけなかったりする方法

これは「[「はじめに」の Advent Calendar 2021](https://adventar.org/calendars/7037)」9日目の記事です。

## 1. モデルにScopeを追加

scopeの `filter_name_by`に `name` を渡せるようにし、 `name` が存在するときに条件がセットされるようにします。

```ruby
class Foo < ApplicationRecord
  has_many :barz
end

class Bar < ApplicationRecord
  belongs_to :foo

  scope :filter_name_by, -> (name) { where(name: name) if name.present? }
end
```

## 2. ControllerのParamをそのまま渡す

controllerではparamsをそのまま渡せます。

```ruby
class BarController < ApplicationController
  def index
    bars = Bar.filter_name_by(params[:name])
    render json: bars
  end
end
```
nameがあるときのSQLは

```sql
SELECT * FROM bars WHERE bars.name = ?
```
nameがないときのSQLは

```sql
SELECT * FROM bars
```

## 3. Fooと子テーブルとしてBarを検索したい場合にBarに条件を追加する場合

include, referencesと一緒にmergeを使うそうです。

```ruby
class FooController < ApplicationController
  def index
    foos = Foo.includes(:bars).merge(Bar.filter_name_by(params[:name])).references(:bars)
    render json: foos
  end
end
```