OmniAICreator/Qiita-1.07M huggingface dataset:
バグをとる「こども向けのSnap!かいせつ」

Snap!はあなたのプログラムのバグ（うまくうごかない理由）をとるためにいくつかの方法をよういしています。
「一時ていし」というプログラムをとちゅうで止めて、変数のあたいを調べることができます。

<h2>一時ていしボタン</h2>
プログラムを手で止める簡単な方法が、右上のほうにある

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671164/3bb86f42-3ded-9144-18dd-1ffa614a9197.png)「一時ていし」ボタンを押すことです。
プログラムが止まっている間でも、ブロックをクリックすることで動かすことができます。そして、変数の左側にあるチェックボックスをクリックすることで、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671164/b06dcd91-87d9-616f-e565-7323c04e02f5.png)
変数のあたいを見ることができます。
また、「［］をひょうじする」ブロックを使うことでも、変数のあたいを見ることができます。
そして、プログラムからブロックを足したり、消したりもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671164/5108492f-2ed9-dae2-de26-956dc875be91.png)
「一時ていし」ボタンに代わってあらわれる三角形の「実行」ボタンを押すことでプログラムをとちゅうから動かすこともできます。
<h2>ブレークポイント：「pause all」ブロック</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671164/c1d7bcfa-a490-e193-c7be-d4b34e5d4248.png)

「pause all」ブロックは止まっている間、うす緑色にかわります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671164/724ac54d-c37e-02e0-c759-89a5a37360a2.png)
止まっている間に、ブロックを右クリックすると、メニュー上で「<a href="https://qiita.com/wordplugin/items/ebbd7dc3d82dab8049e1">スクリプト変数</a>」などの値を見ることができます。

<h2>ひとつづつ実行する（ステップ実行）</h2>
時には、どこにまちがいがあるのか、わからないこともあるでしょう。どうやってそのプログラムが動いているのかわからないこともあるでしょう。このようなときは、プログラムをコンピューターの速さではなく人間の速さで動かすこともできます。
それが「ひとつづつ実行」ボタンです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671164/da5fc0c4-48f7-a30a-1c66-d48bfdeed71d.png)

スクリプトが止まっているときに、「ひとつづつ実行」ボタンを押すと、うす緑色に色が変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671164/abf6c6f7-7bc3-0eb0-f06a-548c6ec096b5.png)

そして、左右に動くスライダーが現れます。このスライダーを左に動かすとゆっくりと実行され、右に動かすと速く実行されます。左端にすると自動的に実行されなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671164/28a95467-b436-e5c5-487c-53b41abef0e1.png)

このとき右上にこのような「ステップ実行」ボタンがあらわれます。このボタンを押すたびにブロックはひとつづつ実行されます。

もしいくつかのスクリプトが同時に実行されていると、すべてのスクリプトはへいこうしてひとつづ動いていきます。しかし、２つのことなる数のブロックをもつくりかえしループがあるとき、ステップ実行でなければ表示されるタイミングで両方が動きますが、ステップ実行の場合は長い方のループが終わるまで短い方のループは待つことになるでしょう。

<a href="https://qiita.com/wordplugin/items/4158def39e181110c5bb">戻る</a>
laravelでyoutubeの料理動画を管理するアプリを作ってみた。

laravelを使ってYoutube上にある料理動画を管理するサービスを作成しました。
Youtubeには様々な料理動画が日々アップされていますが、実際に作ってみてよかったものをストックしたり、
少し自分好みにアレンジした時のメモを残したいと思ったので、当サービスを作ってみました。
セキュリティ面など至らない点が多いとは思いますが、興味があれば使ってみていただけると幸いです。

⇩作成したサービス

http://laravel-cookshelf.com

## 自己紹介
PHPを本格的に学習し始めて３ヶ月目の駆け出しエンジニア。前職はインフラ系で現在Webエンジニアになるため転職活動中です。

## 使用技術

##### フロントエンド

+ Javascript
+ Jquery
+ Bootstrap

##### バックエンド
+ PHP(Laravel8)
+ YoutubeAPI
+ Mysql

##### インフラ
+ AWS
+ Git

認証機能はLaravelにデフォルトで備わっているlaravel-authを使用しました。
また、AWSはEC2でサーバーをたて、データベースにRDS、ドメインの割り当てにRoute53(ドメインはお名前ドットコムで取得)、メールの送信にAmazonSESを使用しています。


## 作成期間
2022年2月下旬～2022年3月下旬の約一ヶ月間。

## 使い方

![2los1coRFIuQuZy1648894838_1648894866.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388451/a4d4d48d-c117-1b07-44bf-5aa7a78adcf9.png)
会員登録画面


![wsN6eSrI2KfYtHS1648894732_1648894767.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388451/3819ec0b-9639-a30c-0703-d285016ff3ca.png)
ログイン画面


![cVym0aDUVE4KQOn1648895001_1648895026.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388451/8b505d2c-549d-058c-bb52-b5c0693d8363.png)
Home画面
+ ライブラリ
「レシピ本を見る」⇒ 自分のレシピ本を作成する。フォルダ分けしてレシピを保存するイメージ。
「保存したレシピ」⇒ 自分が保存したレシピをすべて表示する。検索可能。ここからもレシピを追加できる。

+ レシピを探す
「みんなのレシピ」⇒ 他のユーザーが作成したレシピを探す。
「動画から探す」⇒ 他のユーザーが追加したレシピをYoutubeの動画単位で探す。平均評価順など並び替え可能。動画をクリックすると、動画再生ページに遷移し、レシピの追加が可能になる。


![I8q188sUEPlZzmB1648896141_1648896208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388451/0b88dfd7-7266-da2a-ca61-c6027dc5c8d2.png)
Library画面

作成したレシピ本一覧。「+ Create New Recipeboook」でレシピ本を新規作成できる。

![PQzfYauzGhG2kve1648896448_1648896484.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388451/e50bbf27-be7f-8c56-fd5a-f518c534e981.png)
Book画面

作成したレシピ本の内容を表示する。右下の「+」ボタンを押すと、、、

![v08jt4a2nHCRI9T1648896760_1648896779.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388451/c118be24-a073-d9fc-438e-3fb532875486.png)
レシピ作成用のモーダルが表示される。ここに追加したいYoutube動画のURLを入力し、「動画のタイトルとサムネイルを取得」をクリックすると、、、

![SeSPaCHlZ5BxrAK1648896575_1648896595.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388451/85f4db22-2256-1b31-2f29-3020838ba1f5.png)
Youtubeからタイトルとサムネイルが取得でき、「追加」ボタンをクリックしてレシピを追加できる。


レシピの追加方法は以上。その他のページも基本的にはこれと似たような使い方になる。
GIMPで背景を透過したPNGファイルを用意する手順の備忘録

押印や署名が必要な書類を，ウェブやメールで電子的に提出することが増えてきた．一度印刷して，押印・署名してからスキャナで取り込んで提出することが面倒になったので，印鑑や署名の画像ファイルを用意しておいて，画像ファイルを挿入するだけで済ませられるようにしようとした．ただし，この目的のためには，背景色を透過させた画像ファイルが必要なのだが，相変わらず GIMP のインタフェースはよく分からない．以下は，自分向けの備忘録（車輪の再生産）である．

1. 白紙に押印・署名して，適当なスキャナで取り込む．
1. GIMPで画像ファイルを開く
1. （トリミングが必要な場合）
    i. 「メニュー → ツール → 選択ツール → 矩形選択」をクリック．その上で，矩形範囲を選択する．
    ii. 「メニュー → 画像 → 選択範囲で切り抜き」をクリック．
1. （背景色の透過が必要な場合）
    i. 「メニュー → レイヤー → 透明部分 → アルファチャンネルの追加」をクリック．
    ii. 「ツール → 選択ツール → ファジー選択」をクリックしてから，背景色の部分をクリックすると，その背景色と一致している箇所が選択される．その状態で Ctrl-X（または，「メニュー → 編集 → 切り取り」）すると，選択されている箇所が削除（つまり透過されている状態になる）．
1. （印刷サイズの変更が必要な場合）「メニュー → 画像 → 印刷サイズ」をクリックして，画像印刷解像度を適切に設定．
    - なお，「メニュー → 画像 → 画像の拡大縮小」を使って縮小すると，解像度が低下して輪郭がボケた画像が生成されるため，印鑑や署名の画像を用意する場合には不適切．サムネイル画像など，本当にファイルサイズが小さい画像が必要な場合は，こちらの機能を使う．
1. メニュー → ファイル → 名前を付けてエクスポート，をクリックして，PNG 形式で保存．
OutSystems MapsでLeafletを選択できるようになったので確認してみる

公式サポートありの、地図機能を提供するForgeコンポーネント「OutSystems Maps」が、これまでのGoogle Mapsに加えて、Leafletを使えるようになっている。

Leafletは、有償のAPIキーがなくても使えるので、軽く試してみた。

# 環境
Personal Environment(Version 11.14.0 (Build 33133))
Service Studio(Version 11.14.11)
[OutSystems Maps](https://www.outsystems.com/forge/component-overview/9909/outsystems-maps)(Version 1.6.0)

# 地図を表示
LeafletMap Blockを画面に配置すると、アメリカのボストンあたりを中心に表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/8a170574-0165-49cb-f36a-01586f4e8dd2.png)

# サイズの調整
## デフォルトサイズ
幅・高さ共に、配置先に対して100%。

## 調整方法
高さを指定するには、BlockのHeightプロパティを使う。Heightプロパティに設定した値が、HTMLタグのstyle属性に使用される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/dc4a159b-ba1a-b0d0-2e30-6dd274360aeb.png)

幅を指定する際には、ContainerでLeafletMap Blockを囲み、そのContainerに設定するといい。

# 位置の調整
## 中心座標設定
初期表示時点の中心座標を設定するには、「緯度,経度」のフォーマットで、Centerプロパティに設定する。

## ズームレベル
Google Mapsで定義された、地図の拡大度を示す値。
1-20の数字で示し、1だと全世界を表示できる縮尺で表示し、数字が大きくなるほど拡大して表示される。

OutSystems MapsのStatic Entity「Zoom」のレコードとして設定する。

## 設定例
中心座標を上野駅あたり、ズームレベルを16とする設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/f95f5d05-ab58-c10c-1406-e1fb564368c3.png)

上記設定での表示例。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/072de6da-d5c8-0fb5-0803-5805c21392ad.png)

# 図形の表示
地図上に図形を表示するには、LeafletMap Blockの「AddOns_Placeholder」Placeholder内に、対応するBlockを配置する。

表示できる図形にはいくつか種類があるが、以下ではMarker（特定の座標にピンを立てるもの。点座標）を例とする。

設定例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/640fa943-5a17-fd17-2aa4-9ebab544ca6a.png)

- Markerの位置はPositionプロパティで指定
- Titleはマーカーにマウスオーバーしたときに表示されるテキスト
- Labelはマーカー自体に重ねて表示されるテキスト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/29350289-58fd-0c25-9528-ed15d797ca12.png)

## マーカーと地図の座標
地図にマーカーを表示すると、地図自体のプロパティCenterよりも最初のマーカーのPositionが優先されるようだ。

# 地図イベント
地図への操作に反応する処理を書くには、LeafletMap Blockの「Events_Placeholder」Placeholder内に、Map_Events\MapEvent Blockを配置する。

このとき、EventNameプロパティに対象となるイベントを設定（MapEventTrigger Static Entityを使う）する。選択できるイベントは

- Click
- DoubleClick
- DragEnd
- RightClick
- ZoomChanged

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/e29fd833-112d-2263-78d4-19056216488c.png)

イベントハンドラのInput Parameterは以下の通り

- MapWidgetId: LeafletMap BlockのNameプロパティに設定した値
- EventName: イベント名。Clickを選択した場合「click」
- LatLng: イベントが発生した座標。Clickを選択した場合、クリックした座標
AtCoder ABC の自分の参加状況をスクレイピングで調べてみる

# 概要

わたしは AtCoder の過去問をテキトーに解くだけでやっているうち、どの問題をどれだけ解いたのかわからなくなってしまいました。なので、スクレイピングで過去の ABC の解答状況を表示させるコードを書いてみました。

公式 API があればいちばんよいのでしょうが、どうもないようなので、Ruby を使ってスクレイピングしています。問題があればコメント欄で御指摘願います。

# 結果

```
ABC245
 B - Mex                                 (Elixir (1.10.2))
 D - Polynomial division                 (Elixir (1.10.2))
 C - Choose Elements                     (Elixir (1.10.2))
 A - Good morning                        (Elixir (1.10.2))
 D - Polynomial division                 (Ruby (2.7.1))
 C - Choose Elements                     (Ruby (2.7.1))
 B - Mex                                 (Ruby (2.7.1))
 A - Good morning                        (Ruby (2.7.1))
ABC244
 D - Swap Hats                           (Elixir (1.10.2))
 C - Yamanote Line Game                  (Elixir (1.10.2))
 B - Go Straight and Turn Right          (Elixir (1.10.2))
 A - Last Letter                         (Elixir (1.10.2))
 D - Swap Hats                           (Ruby (2.7.1))
 C - Yamanote Line Game                  (Ruby (2.7.1))
 B - Go Straight and Turn Right          (Ruby (2.7.1))
 A - Last Letter                         (Ruby (2.7.1))
......

ABC213
 D - Takahashi Tour                      (Ruby (2.7.1))
 B - Booby Prize                         (Ruby (2.7.1))
 C - Reorder Cards                       (Ruby (2.7.1))
 A - Bitwise Exclusive Or                (Ruby (2.7.1))
ABC212
 D - Querying Multiset                   (Ruby (2.7.1))
 C - Min Difference                      (Ruby (2.7.1))
 B - Weak Password                       (Ruby (2.7.1))
 A - Alloy                               (Ruby (2.7.1))
ABC211
ABC210
ABC209
ABC208
......
```

こんな感じになります。ABC211 以前は解いていないのかな、って感じになっています。なお、表示されるのは「AC」を取ったものだけです。

# 前提
gem "mechanize" をインストールして下さい。ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [x86_64-linux]  で確認しましたが、サポートされているバージョンなら別に問題なく実行できると思います。

# コード

自分の「ユーザ名」と「パスワード」を`.value = `のあとに埋めて下さい。また、コンテストはここでは ABC245 以前に対応しているので、定数`LatestABCContest`を適宜変更して下さい。

```ruby:atcoder_check.rb
require "mechanize"

LatestABCContest = ARGV.shift&.to_i || 245

agent = Mechanize.new

#login
url = "https://atcoder.jp/login?continue=https%3A%2F%2Fatcoder.jp%2F"
page = agent.get(url)

login_form = page.forms[1]
login_form.field_with(name: 'username').value = '自分のユーザ名'
login_form.field_with(name: 'password').value = 'パスワード'
page = agent.submit(login_form)

#ページ取得
define_method(:get_page) do |problem_number|
  num = "%03d" % problem_number
  puts "ABC" + num
  url = "https://atcoder.jp/contests/abc#{num}/submissions/me"
  
  page = agent.get(url)
  sleep(1)
  
  result = page.css("table tbody tr").map {|node|
    tds = node.css("td")
    if tds.empty?
      nil
    else
      problem  = tds&.at(1)&.text
      language = tds&.at(3)&.text
      c_result = tds&.at(6)&.text
      if c_result == "AC"
        " " + problem.ljust(40) + "(#{language})"
      else
        nil
      end
    end
  }.compact.uniq
  puts result
end

LatestABCContest.downto(1) { |num| get_page(num) }
```

見ればわかると思いますが、表示させたいコンテストを変えるには最後の1行をいじればよいです。
【初心者が始める】githubの環境構築(前編)

Pythonの勉強を始めました。
『ゼロから作るDeep Learning』にて、githubで公開しているスクリプトを使用するために、今回githubを使い始めました。
githubを使い始める際の手順は下記リンクで行なっています。

https://prog-8.com/docs/git-env

上記サイトの手順５　「Githubにプッシュする」で、`git init`を実行すると下記のようなヒントが表示されました。

```python:
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint: 	git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint: 	git branch -m <name>
Initialized empty Git repository in /Users/XXX/Documents/XXX/.git/
```

このヒントは英語で丁寧に説明されており、詳しく理解はしていませんが、どうやら`initial branch`の名前を現在「master」に設定しているが、名前を変更される場合があるため、これからレポジトリを作成する際には名前を変更した方がよい。と言う内容らしい。

そこでわざわざ下記変更方法まで記述してくれている丁寧さ。

```python:
git config --global init.defaultBranch <name>
```

基本的には`initial branch`の名前は「master」の代わりに「main」、「trunk」、「development」などがあるそうだ。
そこで私は下記コマンドで、現在作成した`initial branch`の名前を「development」に名前変更しようと思ったのだが、

```python:
git config --global init.defaultBranch <development>
```

そしてら下記のエラーが発生。
```python:
sh: parse error near `\n'
```
どうやら、先ほど`init.defaultBranch <development>`とコマンドを打ち込んでいたが、この上記リンクの説明では`<  >`は打ち込まなくて良いらしい。つまり下記が正解。
```python:
git config --global init.defaultBranch development
```
初心者あるある、説明の説明が必要ってやつですね！


残りの環境構築も進めていきます！


下記リンク参考。

https://devlights.hatenablog.com/entry/2021/05/16/125421
6回目　プロトコル

# プロトコルについて
![プロトコル1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606732/271e5551-9284-e6c2-9059-afc9e97d3778.png)

第一分岐点（階層）
第二分岐点（プロトコルの種類）


### 初めに
プロトコルとは端的にいうと、コンピュータの交通ルール
プロトコルについて調べるとどのサイトでの階層に分けて説明している。その理由を知りたいと思い今回の記事をまとめた。OSI参照モデルというのもあるが、現在はTCP/IPが主流らしい。
#### TCP/IPには４つの階層
TCP/IPというモデルは1970年代から1980年代に考案された。色々なプロトコルがあった中で、TCP/IP「複雑なことはなるべく端末側で行い、 ネットワークはシンプルに保つ」という特徴がある。

![プロトコル2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606732/a52ce02f-606f-12e0-337f-00e23f36bdaf.png)

TCP/IPの四つの階層は順番にアプリケーション層→トランスポート層→インターネット層→ネットワークインターフェース層に分けられる
###### ・アプリケーション層
アプリごとのルールであり、メール、ファイル、WEBサーバーとやり取りするために必要
###### ・トランスポート層
代表はTCP　違いとしてはデータの信頼性の確保だそう
###### ・インターネット層
代表はIP　違いとしては　位置情報にかかわる
###### ・ネットワークインターフェース層
直接的に接続されたノード間でのルールであり、　イーサネットや無線

### まとめ

ネットワークにおけるプロトコルはTCP/IPが主流
アプリケーション層→トランスポート層→インターネット層→ネットワークインターフェース層に分けられる。
学習を進めるうえで、例えるなら英語だと思いたい。4つの階層に分けられているが、これは英語のS、V、O、Cを学んでいくような感じだと思っておく。
【git】会社のGithub git repository を自宅Linuxマシンにclone して開発する

# はじめに

会社のGithub git repository を自宅Linuxマシンにclone して開発するとします。そのとき、

- 自分のアカウントを切り替えないと、自分の個人活動のアカウントで会社のgit repository に commit してしまいます。Pushは会社のアカウントでおこなわれているとしても、そのcommti tree に個人のアカウントがあることになり、恥ずかしい。
- 会社のGithub にssh-key を登録しますが、それは個人のアカウントとは違います。切り替え作業無しで行いたい。

という課題があったのですが、普通に解決できたのでメモしておきます。
~~会社の仕事もLinuxマシンで開発できれば効率的で良いのだけれどね。~~

# 内容

### 1. 会社用のssh-key を用意して会社アカウントのGithub に登録する

普通に鍵を作ります。ファイル名を指定し、既存のものと区別するようにしましょう。

```bash
cd ~/.ssh
ssh-keygen -t ed25519 -C iam.slave@submissive.com -f salves_key_ed25519
```

パスフレーズは空でも大丈夫でした。公開鍵と暗号鍵ができてることを確認します。

Github に sign-in し、setting を選択します。このとき左側に表示される "ssh and GPA-" をから、新しい鍵を登録できます。先程作成した公開鍵をコピペします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/e984a16e-f6e3-e363-4362-8bdf86516d4b.png)

鍵の登録については、Github のページにあるマニュアルも参考になります。

https://docs.github.com/en/authentication/connecting-to-github-with-ssh

### 2. 会社github repository にアクセス設定 (~/.ssh/config)

~/.ssh/config というファイルに設定を記入します。IndentifyFile で先程作成した秘密鍵を指定します。

```
Host github_submissive
  HostName github.com
  User git
  IdentityFile ~/.ssh/salves_key_ed25519
  IdentitiesOnly yes
```

アクセスできることを確認しましょう。

```
$ ssh -T git@github.com
Enter passphrase for key '/home/user/.ssh/slaves_key_ed25519':
Hi user! You've successfully authenticated, but GitHub does not provide shell access.
```

### 3. 会社github repository を cloneする

設定したssh の設定でclone します。

```
$ git clone github_submissive:TheCompany/mylabor.git
```

で、会社のGithub アカウントの TheCompany にある、mylabor.git をclone します。このとき、github_submissive として ~/.ssh/config で定義されている条件でrepository にアクセスします。

### 4. Local repository で会社のアドレスを指定する

この作業をしないと、clone したローカルのレポジトリで作業してcommit するときのユーザがデフォルトのユーザになってしまいます。ここでは、このレポジトリでのユーザが会社アカウントのユーザであることを定義します。clone したrepository に移動して、git config --local で定義します。
```bash
$ cd maylabor 
$ git config --local user.name iam.slave
$ git config --local user.email iam.slave@submissive.co.jp
```
この作業ディレクトリに ```./git/config```にファイルが作成されます。このファイルには remote origin なども書かれていますが、少なくともuser の定義があることを確認しましょう。

```
[user]
        name = iam.slave
        email = iam.slave@submissive.company.jp
```

以上で完了です。

普通に編集を行い、git add, git commit, git push ができるはずです。

# まとめ

とりあえず、行いたいことができている感じです。何か不足があれば追記するつもりです。

以下を参考にしました。多謝。

https://qiita.com/yampy/items/24638156abd383e08758

https://qiita.com/tetutaro/items/8d1a05e6773c0d8bce0e

https://msyksphinz.hatenablog.com/entry/2018/10/23/040000
 
https://qiita.com/t_uda/items/c3fd33604c3888e64868

https://qiita.com/0084ken/items/f4a8b0fbff135a987fea

(2022/04/02)

- ```$ ssh -T git@github.com``` を追記 (2023/02/26)
IN演算子 JavaScript

## 用途
- オブジェクトに存在するかどうかを調べる
- 配列に対して要素番号が存在するかどうか調べる


## 使用方法
#### オブジェクトに存在するかどうかを調べる
``` javascript
var hoge = {
a : "aです"
}
console.log("aです" in obj); //true
console.log("bです" in obj); //false
```

`文言 in 値` というように記述すると、`文言` が `値` に存在している場合は `true` が、存在しない場合は `false` が返ってくる。

#### 配列に対して要素番号が存在するかどうか調べる
``` javascript
var hoge = ["a", "b", "c"];
console.log(0 in hoge); //true
console.log(1 in hoge); //true
console.log(2 in hoge); //true
console.log(3 in hoge); //false
```
　
　
この記事は以下の情報を参考にして執筆しました。
- https://codaholic.org/?p=1101
大量の写真をシェルスクリプトでリネーム


:::note info
趣味で写真をたくさん撮っていますが、手動のリネーム操作を自動化するスクリプトを作成しました。その際のTipsです
:::

# やりたいこと
デジカメのSDカードから今日撮影した写真をPCにコピーする
コピーのついでに日付と連番を含むファイル名に変更する


# 完成したスクリプト（改良版）
```zsh
mkdir ~/Desktop/$(date "+%Y%m%d");ls -l -D'%Y%m%d' /Volumes/EOS_DIGITAL/DCIM/*/*.JPG |awk '$6=='$(date "+%Y%m%d")' {line = line + 1; printf "cp -p %s ~/Desktop/%s/EOSR6_%s_%06d.jpg\n", $7, $6,$6,line}'|sh
```
改良したポイント

処理の流れは```ls```と```awk```という簡素なものになりました

```ls```のファイル名に「＊」を記述しました
　これで、デジカメのフォルダが複数にまたがる場合もOKです
　具体的には、100CANON、101CANONなど同時にリストアップできます
　なお「＊」にすることで、ファイル名のリストアップがフルパスになり扱い易くなります

```awk```の```{}```で囲まれたアクション部分で```line = line + 1```とすることで
　抽出したものだけ連番をつけることができます
　NRだと処理ごとなので、全件の連番となります

以前の記事も、下記にそのまま残しておきます

# 完成したスクリプト
試行錯誤の結果こんなスプリプとになりました

```zsh
mkdir ~/Desktop/$(date "+%Y%m%d");find /Volumes/EOS_DIGITAL/DCIM/100CANON  -newermt  $(date "+%Y%m%d") | xargs -J% ls -l -D '%Y%m%d' %|sort -k6| awk '{ printf "cp -p %s ~/Desktop/%s/EOSR6_%s_%06d.jpg\n", $7, $6,$6,NR }'|sh
```


## 説明

まず大きな流れです

mkdirで保存用フォルダ作成
findでSDカードから本日撮影したファイルを抽出
抽出したファイルの作成日でソート
awkでリネーム用のcpコマンドを作成
cpコマンドの実行

以下解説です

## mkdirで保存用フォルダ作成

```mkdir ~/Desktop/$(date "+%Y%m%d");```

コピー先用フォルダとして日付(yyyymmdd)としてデスクトップに作成します
ちなみに1日前の日付で作成したい場合は下記のようにdateコマンドの-vオプションで記述します
`$(date -v-1d "+%Y%m%d")`



## findでSDカードから本日撮影したファイルを抽出
```find /Volumes/EOS_DIGITAL/DCIM/100CANON  -newermt  $(date "+%Y%m%d")```

-newermtオプションは指定日時よりも更新が新しいものを抽出するオプションです
日付だけ指定しているので0:00以降のものが抽出されます
ちなみに検索対象のフォルダ名は、ターミナルに対象フォルダをドロップすると文字として取得できます
なお、抽出される結果はファイル名（フルパス）となります
ここから先はパイプで処理を連携します

## 抽出したファイルの更新日でソート
```zsh
| xargs -J% ls -l -D '%Y%m%d' %|sort -k6
```

xargsの-J%オプションはパイプで受け渡された項目を、xargsに続けるコマンド（今回はls）に％として展開できます
上の例ではlsの対象ファイルとなります
普通lsはファイルの一覧を表示させるもので、1ファイルを指定して情報をみることはあまりないかもしれません
そういう意味では1ファイルごとにlsをしているので非効率な気もします。。。

それはともかくlsを見てみましょう
更新日でソートするためにfindで抽出したファイルをlsの-lオプションで情報を取得します
`-D '%Y%m%d'` は出力する日付のフォーマットを指定するものです
デフォルトでは当日更新分は"hh:mm"となったり、昨日のものが"昨日"という相対表示となっています

最後はsortコマンドです
sortの-kオプションはキーフィールドの指定です
6とあるのは6番目をキーとするという意味です
Ls -lで表示される6項目（更新日）を使ってソートます
Lsの表示上は更新日だけですが、タイムスタンプとしてソートするので撮影順になります

## awkでリネーム用のcpコマンドを作成
```zsh
awk '{ printf "cp -p %s ~/Desktop/%s/EOSR6_%s_%06d.jpg\n", $7, $6,$6,NR }'
```

awkはオークと読み、人名に由来する造語です
入力情報を抽出して出力するコマンドで高度な抽出や編集が可能です
今回のawkは入力をすべて出力するので抽出はありませあん
出力はprintfで、ダブルクォーテーション内は出力フォーマットで、後続のコンマ以降で項目を指定します
ダブルクォーテーション内の%〜が可変項目となります
具体的には
1つ目の可変項目は%s(文字列)で、内容は`$7`。即ち、インプット情報（ls）の7項目目＝ファイル名
2つ目は%s（文字列）で、内容は`$6`。即ち、インプット情報（ls）の6項目目＝更新日
3つ目も%s（文字列）で、内容は`$6`。即ち、インプット情報（ls）の6項目目＝更新日
最後は%06d（6桁のゼロ埋め数字）で、内容は`NR`。これはawkの変数でインプットの件数となります


## もっと簡素化できるかも
ここで疑問がわきます
Awkで抽出できるならlsとawkだけでよいのではないかと
実際にかいてみました
```zsh
mkdir ~/Desktop/$(date "+%Y%m%d");ls -l -D'%Y%m%d' /Volumes/EOS_DIGITAL/DCIM/100CANON |awk '$6=='$(date "+%Y%m%d")' {printf "cp -p /Volumes/EOS_DIGITAL/DCIM/100CANON/%s ~/Desktop/%s/EOSR6_%s_%06d.jpg\n", $7, $6,$6,NR}'|sh
```

全件出力ではないのでコピー後の連番が飛ぶことがあります
そのためはじめにfindで抽出しているのです

→改良版として簡素化できました（このページの先頭を参照）


## 参考サイト
DevelopersIO 
　[大量のファイルをシェルのコマンドで一括リネームする](https://dev.classmethod.jp/articles/rename_massive_files/)
UNIX & Linux コマンド・シェルスクリプト リファレンス
　[awkリファレンス](https://shellscript.sunone.me/awk.html)
CentOS6.2でyumコマンドを使用する

こんにちは、kumaです。
今週古いシステムの保守を引き継ぐに当たって、システムの開発環境構築を行っていたのですが、その際にcentOS6.2でyumコマンドが使えずハマったので備忘録として記事を書きたいと思います。

## 環境
- VirtualBox 6.1.32
- CentOS 6.2

## yumコマンドとは？
> 「yum」は、Red Hat系のLinuxディストリビューションで使われている“RPMパッケージ”を扱うためのパッケージ管理コマンド

https://atmarkit.itmedia.co.jp/ait/articles/1608/29/news019.html#:~:text=yum%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A8%E3%81%AF%EF%BC%9F,%E3%81%AE%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%81%99%E3%80%82

## CentOS6.2でyumコマンドが使用できない理由。
→ centOS6のサポートが終了したため

## CentOS6.2でyumコマンドを使用しようとすると発生するエラー

```
YumRepo Error: All mirror URLs are not using ftp, http[s] or file.
Error: Cannot find a valid baseurl for repo: base
```

## 基本的な解決方法（ほとんどのサイトではこのような解決方法が記載されている。）
`etc/yum.repos.d/CentOS-Base.repo` のmirrorlistの行をコメントアウトし、base_urlの行のコメントを外し、base_urlを下記のように書き換える。

```
mirror.centos.org → vault.centos.org
```

## 上記の方法を試した結果

以下のようなエラーが出てしまい、引き続きyumが使用できなかった。
```
http://vault.centos.org/centos/6/os/x86_64/repodata/repomd.xml:
[Errno 14] problem making ssl connection
```

## エラーが出た理由

エラーの中身を見ると、ssl接続時に問題があると書いてある。
ブラウザに`http://vault.centos.org`と入力すると、`https://vault.centos.org`とリダイレクトされる。
調べてみると、https://vault.centos.orgはTLS1.2以上でないと接続できないらしい。
それに対してCentOS6のopenSSLではTLS1.2に対応していなかったためエラーが出たらしい。

## 解決方法

baseurlをhttpで接続できるミラーサイトに変更する。
ex) http://ftp.riken.jp/Linux/centos-vault
TypescriptとReact 18の環境でcreateRootのエラー除去

Typescript と React 18 の環境で、createRootにて
Property 'createRoot' does not exist on type のエラーを取る方法がわからなかったので、いろいろ調べた結果、公式が一番良かった。

Typescript 初心者なので全然わからなかったが、ちょっと、かじった人ならすぐわかるんだろうなぁ。

Create React App: で Typescriptベースのテンプレートを作成する。
createRootを使うように修正する。
rootElement がnull になる対策だけを入れたが、createRoot でエラー発生。

対策前
```tsx:index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById('root');
// https://blog.logrocket.com/how-to-use-typescript-with-react-18-alpha/
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);
root.render(<App/>);
```

対策後
```tsx:index.tsx
import React from 'react';
// https://reactjs.org/docs/react-dom-client.html
import * as ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById('root');
// https://blog.logrocket.com/how-to-use-typescript-with-react-18-alpha/
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);
root.render(<App/>);
```
ありがとう、ブロックプログラミング

見つけていただきありがとうございます。
ブロックプログラミング（[UI Flow](https://flow.m5stack.com/)）をやったらプログラミング言語への抵抗感が減ったお話です。

## きっかけ
#### パルスオキシメーター不足から...
知り合いがコロナに罹り、保健所からパルスオキシメーターが届きました。
体調を知れる、[救急搬送の基準](https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/corona_portal/shien/zitakuryouyou.files/meyasu.pdf)にもなるのでいざという時のために自分も持っておこうと思ったところ、
* [患者の急増 X 半導体不足で受注に間に合わない](https://www.sankeibiz.jp/business/news/210830/bsc2108301000001-n1.htm)
* [返却されずに必要な人達に届かない](https://www.yomiuri.co.jp/national/20211228-OYT1T50088/)

などの課題がありました。
そこで「自作できないの？」と思ってネットを漁っていたら出てきたのが **M5 Stack / stickC(Plus)** と**Unit・Hat**でした。


#### 買ってはみたものの...
しかし、勢いで購入した当時。買ったのは...
* [M5 stickC](https://www.switch-science.com/catalog/5517/)
* [M5StickC 心拍センサ Hat（MAX30102搭載）](https://www.switch-science.com/catalog/7232/)

自力で環境までは作れましたがその後が分からなく、知り合い（Aさん）に教えてもらい動かくことができました。
結果は、計測はできたもののサンプルコードがstickC Plus仕様であったため、画面サイズが合わないという結果に。
「なんとか動かせたけど、これ以上はできん...。せっかく買ったのに...。」
それもそのはずで、サンプルコードはC++。私読めないんです...。

## ブロックプログラミング（UI Flow）を知る
失意の中、Aさんからこんな話が、
「M5シリーズってブロックプログラミングなかったっけ？」
言われるがままに調べると...ありました。

#### 触れてみて...
視覚的に理解できるから抵抗感が薄れていくし、壁にぶち当たっても「なんとかなりそう」と思えて諦めにくくなれました。
いや～これは楽しい。他のHatやUnitを買っちゃいました笑
※<font color="MediumVioletRed">心拍センサ Hat はUI Flowには対応していません。</font>
* なんかよく分からいけどできちゃう。頭の中に絵ができる。
* XXができるなら〇〇もできるのでは？

などなど、ポジティブな感情が生まれてきました。


## その後の効果
お陰様でこんな効果が出ました。
* プログラミング言語に対する抵抗感が減り「触れてみよう、読んでみよう」気持ちが芽生えた
* Power automateのフロー作成にJSONや文章作成にHTMLを使うようになった。
* Markdownに面倒くささを感じなくなった。
* 以前よりもプログラミング関係の資料を理解しやすくなった気がする。

改めてありがとう、ブロックプログラミング。

## 注記
**心拍センサ Hat は医療機器ではありません。また、医療用途に用いることはできません。**
送信元ポート0のUDPパケットを送る方法

インターネット上では不思議なことに、ポート番号が0のパケットが届くことがあります。

特に送信元ポート番号が0のUDPパケットは、ミドルウェアで処理をしいざ送り返そうとした時にエラー担ったりします。

そこで、ポート番号0のUDPパケットを受け取ったときの挙動を確認するために、まずはそのようなパケットを送る方法を探さなければありません。

（試すとわかりますが、ハイレベルなAPIだと送信元ポートに0を指定できなかったりします...）

## constructing ip/udp packets in go

ちょうどそのようなツールをGoで書かれていたのでコレを使います。

https://gist.github.com/chrisnc/0ff3d1c20cb6687454b0

### 使いかた
こんな感じで起動すると、stdin から受け取った文字列を指定されたポートにデータ送信します。

```
$ sudo go run rawudp.go -udpdst "送信先ポート" -udpsrc "送信元ポート"
```

これをncで繋いでやると、受け取ったパケットを、送信元ポート0でforwardすることができます

```
$ nc -u -l -p 8080 | sudo go run ./rawudp.go -udpsrc 0 -udpdst 53
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32425/d485316b-eed8-d76f-3497-6d257372a02e.png)

ただ rawudp.go がstdinで処理する都合 `\n` ごとに処理するので、真面目にやるならrawudp.goを改造して素直にUDPリッスンしてProxyさせるのが良さそう
rails7からrails6にダウングレードした


Gemfileのバージョン変更
```Gemfile
-  gem "rails", "~> 7.0.2", ">= 7.0.2.3"
+  gem 'rails', '~> 6.0.4', '>= 6.0.4.7'
```

コマンド実行
```
$ bundle update
$ rails app:update (全てYES)
```

`$ rails s -b 0.0.0.0`するとエラー起きるので、以下２点修正。

Gemfileにgem ‘listen’追加
```
group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"
  gem 'listen'
end
```

config.ruからRails.application.load_server削除
```config.ru
- Rails.application.load_server
```


マイグレーションしていきます。
```
$ rails db:reset
$ rails db:migrate
```

rails aborted!
ArgumentError: Unknown migration version "7.0"; expected one of "4.2", "5.0", "5.1", "5.2", "6.0"
```db/migrate/****_create_users.rb
-  class CreateUsers < ActiveRecord::Migration[7.0]
+  class CreateUsers < ActiveRecord::Migration[6.0]
```


rails aborted!
NoMethodError: undefined method `define' for #<ActiveRecord::Migration:0x0000ffff82c040e0>
Did you mean?  defined?

```db/schemes.rb
-  ActiveRecord::Schema[7.0].define(version: 2022_03_30_XXXXX) do
+  ActiveRecord::Schema.define(version: 2022_03_30_XXXXX) do
```

rails aborted!
NameError: undefined local variable or method `primary_abstract_class'
```models/application_record.rb
class ApplicationRecord < ActiveRecord::Base
-  primary_abstract_class
+  self.abstract_class = true
end
```


再度`$ rails s -b 0.0.0.0`実行し、http://localhost:3000/に表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20061/2139a8bb-f443-30f7-9eee-1bd9672df0e5.png)

やったー！！
【python初学者】 クロージャー

<h1>クロージャーとは</h1>
外側の変数を記憶した関数である

ex)

```python
def outer(a,b):
    def inner():
        return a+b
    return inner
f = outer(1,2)
r = f()
print(r)

#print
#3
```

初めに
```python
f = outer(1,2)
```
が実行されたときに

outer関数の引数には[1,2]が入る
そして、inner関数の

```python
return a+b
```
にも[1,2]が入る
しかし、inner関数は実行されておらず、実行するための関数が返ってくる

試しに中身を見てみると
```python
def outer(a,b):
    def inner():
        return a+b
    return inner
f = outer(1,2)
print(f)

#print
#<function outer.<locals>.inner at 0x00000248884AEB00>
```

確かに関数が返ってきている
まだ実行されていないinnerを実行してやると、3が返ってくるというものだ

<h1>使いどころ</h1>

ex)
```python
def circle_area_func(pi):
    def circle_area(r):
        return pi*r*r
    return circle_area

cal1 = circle_area_func(3.14)
cal2 = circle_area_func(3.141592)

print(cal1(10))
print(cal2(10))

#print
#314.0
#314.1592

```
circle_area_funに引数を渡しておいて、実行しておく
のちにcircle_areaを実行する
便利かもしれない
JavaScript jQuery の基礎学習

### はじめに

今回は、JavaScriptとjQuery についての基礎学習をしたため、アウトプットするために記事を書きました。

### jQueryの記述方法

```
$('.item').css('color', 'red');
```
基本的にはこの記述方法になる。

＄（操作したい部分のクラスやIDを記述）.処理する方法（処理する内容）

上記のように部分ごとに記述する内容は決まっており、クウォートなどの書き忘れに注意すること。

クラスの指定→.
IDの指定→#
この二つが基本で他のものはほとんど使用しなかった。

### jQueryのアクション
click　＝　指定要素上で左クリック時に発生。
dblclick ＝　指定要素上でダブルクリック時に発生。
ダブルクリックした際もclickイベントは発生する点に注意。

contextmenu	＝　指定要素上でマウス右ボタンを押した際に発生。
コンテキストメニューを表示させたくない場合は、このイベントでreturn falseやpreventDefaultする。

mousedown　＝　指定要素上で左or右ボタンを押した際に発生。
mouseup　＝　指定要素上で左or右ボタンを離した際に発生。

### jQueryのフォームからの値の取り出し
```html
<body>
  <input type="text" id="value">
  <input type="button" id="button" value="ボタン">
</body>
```
```javascript
 <script>
  $(function(){
    $('#button').on('click',function(){
      alert($('#value').val());
    });
  });
  </script>
```
上記の処理は、フォームに送信された値をアラートとしてブラウザ上で表示する処理になっており、($('#value').val());この部分でフォームから送信された値を取り出している。

※.valはvalue属性を持った値を取り出すことができる。

### まとめ

今回は簡単に学習のアウトプットをしてみました。
初学者になりますので、何か誤った表現をしているところなどあれば、コメントいただけると幸いです。
【9割以上が知らない】未経験エンジニアの転職までのロードマップ1

# はじめに
無能で全くエンジニアに向いていないと思っていたわたしが自社開発の優良企業に転職した体験談と共に、エンジニアになろうと思っていた時期とエンジニアになってからの感じ方の違いや、未経験の方がエンジニアとして転職するための方法を紹介します。

# 最初に行うこと
今回は自社開発のWebエンジニアを志望する未経験者向けの方に紹介する解説となっております。

### 「まず何でもやってみよう」は間違い？
「まず考えるより何でもやってみよう」というアドバイスを聞くことがありますが、個人的には少し違うと感じています。その理由としてスポーツなどとは違い、目的によって同じエンジニアでも大きく異なるからです。

### 目的や計画を決める
エンジニアとして転職するまでに必要なことは目的に基づいて計画を立てることが大切だと感じています。
フロントサイドエンジニアになりたいのかサーバーサイドエンジニアになりたいのか、あるいはどんな言語を自分が習得する必要があるのかなどです。

### どうやって目的を決める？
それは**自分が働いてみたい企業の求人サイトを見ること**です。
多くの方が本格的に求人サイトを閲覧するのは転職時期だと思いますが、効率的に無駄のない計画を立てるためは最初に働いてみたい企業の求人サイトを複数見ることで、求められる言語などの傾向などが見えてくると考えられます。

### 余談ですが
よく開発言語は何がいいか？という話題がサイトや動画サイトなどで多く見られますが、これに関しては情報を鵜呑みにするのではなくて**自分で考えて結論に達する**ことが大切だと考えています。
例えば「PythonやGoが流行るから」とか「PHPはオワコンだ」という情報を目にしますが、現状の日本の求人数はPHPやRubyなどが多くPythonやGoだけを未経験に求めている企業は少ない印象です。
未経験エンジニアとして就職活動をする際に「Goだけができる」と「PHPだけができる」だと掲載されている求人数の比率からだとPHPの方が選べる傾向にあります。

まず未経験エンジニアは転職することに重きを置くため「Goでないと絶対に嫌だ！」という理由でない限り、転職の可能性を広げる技術の習得が優先だと感じています。
情報はあくまで参考程度で「どうしてそうするか」という理由付けに関しては自分で調べて結論に達するように心がけることが大切です。

### ゴールはシンプル？
これはわたし自身もそうなのですが複雑に考えすぎて、「何をすればいいのかわからなくなってしまう」ということです。
ただこれはすごくシンプルで未経験エンジニアが転職するために必要なことは**転職活動で使用するポートフォリオを完成させること**、になります。
裏を返せばポートフォリオを完成させればいいのです。何をすればいいか悩んだときに **ポートフォリオの完成に必要なことは何か？** これを基準に考えることが大切ということになります。

#### ※次回は早速学習を始めることについて記事を作成します。しばらくお待ちください
【超初学者】JavaScriptのfunctionとは

騙し騙しやっていたので備忘録
間違いがあればご指摘ください

## functionとは？
https://kitsune.blog/function
こちらの方がわかりやすく説明してくださっています


**関数**と呼ばれる，**何かをしたら何かを返してくれるプログラム**である

例えば，現在の時間を**00:00:00**のように表示させたいとき，

```js
    var now = new Date(); // Dateオブジェクトを作る
    var hours = now.getHours(); // DateオブジェクトにgetHoursメソッドを充てることで現在の時を取得
    var minutes = now.getMinutes();  // DateオブジェクトにgetMinutesメソッドを充てることで現在の分を取得
    var seconds = now.getSeconds();  // DateオブジェクトにgetSecondsメソッドを充てることで現在の秒を取得
    
    // hours　が10未満だった場合0をつける
    if (hours < 10) {
        seconds = '0' + seconds;
    }
    
    // minutesが10未満だった場合0をつける
    if (minutes < 10) {
        seconds = '0' + seconds;
    }
    
    // secondsが10未満だった場合0をつける
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
```
このようにするところだが，これをfunctionを使って，
**10未満の場合0をつける**という同様の処理をしているところをメソッドにしたい


```js
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
```
この部分を，
```js
    var addZero = function(value) {
        if (value < 10) {
            value = '0' + value;
        }
        
        return value;
    }
```



このように変更し，


```js
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
```
この部分のhours,minutes.secondsを下記のように再代入する

```js
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    
    var addZero = function(value) {
        if (value < 10) {
            value = '0' + value;
        }
        
        return value; // "戻り値"と呼ばれる valueとして値を返すという意味
    }
    
    hours = addZero(hours); // 再代入
    minutes = addZero(minutes); // 再代入
    seconds = addZero(seconds); // 再代入
```


## 解説
```js
    var addZero = function(value) {
```
この部分の**value**とは何か？
これは**パラメーター**と呼ばれるものであり，
**function内の処理を代入された文字列**です

後で定義される
```js
    hours = addZero(hours); // 再代入
    minutes = addZero(minutes); // 再代入
    seconds = addZero(seconds); // 再代入
```
この部分で，
すでにnow.getHours(); now.getMinutes(); now.getSeconds(); 
されていたhours minutes seconds 変数を，**valueに代入する**という意味である

よって，function内の処理を代入された文字列"value"に，hours,minutes,seconds を代入することにより，
hours,minutes,secondsにも**function内の処理が適応される**ことになる


## 備考
#### パラメータは複数設定できる

```js
    var addZero = function(value, param2, param3) {
```
のように幾つでも追加できる
その場合，下記のようにパラメータと同じ数だけ追加する必要がある

```js
    hours = addZero(hours, 123, abc);
```

#### getTimeメソッドで時分秒全て取得できる

```js
var hours = now.getTime();
```
ただし出力されるのは，1970年1月1日0時0分0秒からの経過秒数となっているので変換が必要
AWS SAP 学習の記録 (IT未経験からSAAのみ取得後1発合格、勉強中の模試の点数記載)

# 概要
SAP-C01合格したのでその記録です。
僕のレベルとしては掛け値なしの初学者です。
2021年5月末からITの勉強を始めて同年11月頭にSAA認定、2022年の2月からSAPの勉強を始めまして、同年4月頭に合格しました。
[勉強中の模試の点数](#模試に関して)を載せている方は少ないので参考になれば幸いです。
[SAA-C02の記録はこちら](https://qiita.com/hoooriiii/items/9cf852d68759ed118d48)

# 結論
~~AWS業務~~未経験ではなく、IT自体未経験の真の初心者がやるには相当時間がかかります。
僕の場合は2ヶ月ちょっとかけました、1日3時間(模試の制限時間)かそれ以下で、年度末ということで仕事が忙しく途中やってない日も含んでいます。~~年度末に納期合わせてくるのはエグすぎる。~~
ネットの~~AWS業務~~未経験の何時間で受かる系はレベルが高すぎて参考になりませんでした。
# 使用教材
[AWS ホワイトペーパー](https://aws.amazon.com/jp/whitepapers/?whitepapers-main.sort-by=item.additionalFields.sortDate&whitepapers-main.sort-order=desc&awsf.whitepapers-content-type=*all&awsf.whitepapers-tech-category=*all&awsf.whitepapers-industries=*all&awsf.whitepapers-business-category=*all&awsf.whitepapers-global-methodology=*all)：無料
[AWS サービス別資料](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)：無料
[AWS認定ソリューションアーキテクト－プロフェッショナル～試験特性から導き出した演習問題と詳細解説～](https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88%EF%BC%8D%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%EF%BD%9E%E8%A9%A6%E9%A8%93%E7%89%B9%E6%80%A7%E3%81%8B%E3%82%89%E5%B0%8E%E3%81%8D%E5%87%BA%E3%81%97%E3%81%9F%E6%BC%94%E7%BF%92%E5%95%8F%E9%A1%8C%E3%81%A8%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC%EF%BD%9E-%E5%B9%B3%E5%B1%B1%E6%AF%85-ebook/dp/B08F9CQ6LT)：2970円（書籍版）
Udemy模擬試験 [AWS Certified Solutions Architect Professional Practice Exam](https://www.udemy.com/course/aws-solutions-architect-professional-practice-exams-amazon/)：1840円
公式模試：0円（SAA認定特典）
*本試験：16500円（SAA認定特典）
合計21310円

# 勉強方法
### 勉強順
参考書解説部分
→Udemy模試4回4度ずつ
→公式模試
→参考書模試2度
→AWS サービス別資料、ホワイトペーパー
→Udemy模試5度目
→参考書模試3度目
→AWS サービス別資料、ホワイトペーパー

### 模試に関して
Udemy模試はchromeの翻訳をかけてやりました。各1度目が2時間40分で2度目以降は2時間未満で解き終わりました。
参考書の模試は1度目が2時間40分、2度目以降は1時間半です。
公式模試は45分かかりました
*合格は75%以上です。

|第n回|1度目|2度目|3度目|4度目|5度目|
|:-:|:-:|:-:|:-:|:-:|:-:|
| 1 |58|92|77|84|90|
| 2 |60|90|72|90|97|
| 3 |62|89|85|93|93|
| 4 |57|92|82|93|96|
|参考書|60|93|97|||
| 公式模試 |60|||||

2月第1週：参考書解説部
2月第2週~3月第3週：Udemy模試4度ずつとその復習
3月第3週末：参考書模試2度
3月第4週：AWS公式模試、AWS サービス別資料、ホワイトペーパー
3月第4週末：Udemy模試5回目、参考書模試3回目
3月第5週：総復習

# 試験
1問2分で解いて2時間半、残り30分を見直しに使おうと思いましたが、見直しは疲れ切ってぼーっと眺めてただけでフラグを立てた回答を変えることはできませんでした。

# 所感
全ての模試で最初は60%なので成長が感じられず無謀なのかと思っていました。媒体を変えても60%なのが更にきつかったです。
Udemyをchrome翻訳で解いていて不自然な日本語に慣れて本番対策になりました、それでもわからない時は仕方なく原文を読みました。
一番難しいなと思ったのは本番ではなく公式模試でした、、、

試験3時間は長すぎます、もちろん2時間くらいのところでトイレに行きました。
受ける方はトイレ休憩の想定をお勧めします。
ちなみに普段の勉強は20分毎に休憩が必要なくらい集中力がありません、、、
nil かもしれないメンバのある構造体の整列

# これは何？

https://qiita.com/sachiko-kame/items/e1315bff25e2abdb8639

という記事を見て、自分ならどう書くかなと思って書いたもの。
generics の練習を兼ねて

# まずはソース

```go:go1.18
package main

import (
	"encoding/json"
	"fmt"
	"math/rand"
	"sort"

	"golang.org/x/exp/constraints"
)

type Sample struct {
	Name        *string
	Description *string
	Note        *string
}

func ToPtr[T any](x T) *T {
	return &x
}

func NewSample(name, desc, note *string) *Sample {
	return &Sample{
		Name:        name,
		Description: desc,
		Note:        note,
	}
}

func comparePtr[T constraints.Ordered](x, y *T) int {
	if x == y {
		return 0
	}
	if x == nil {
		return -1
	}
	if y == nil {
		return 1
	}
	if *x == *y {
		return 0
	}
	if *x < *y {
		return -1
	}
	return 1
}

func compareSampleMemberStrPtr(sx, sy *Sample, proc func(*Sample) *string) int {
	return comparePtr(proc(sx), proc(sy))
}

func SampleCompare(a, b *Sample) int {
	if c := compareSampleMemberStrPtr(a, b, func(s *Sample) *string { return s.Name }); c != 0 {
		return c
	}
	if c := compareSampleMemberStrPtr(a, b, func(s *Sample) *string { return s.Description }); c != 0 {
		return c
	}
	return compareSampleMemberStrPtr(a, b, func(s *Sample) *string { return s.Note })
}

func show(title string, samples []*Sample) {
	fmt.Println(title)
	for _, v := range samples {
		jsonBytes, err := json.Marshal(v)
		if err != nil {
			panic(err)
		}
		fmt.Println("   " + string(jsonBytes))
	}
}

func shuffled(i int) []int {
	s := make([]int, i)
	for ix := 0; ix < i; ix++ {
		s[ix] = ix
	}
	rand.Shuffle(i, func(x, y int) {
		s[x], s[y] = s[y], s[x]
	})
	return s
}

func main() {
	samples := []*Sample{}
	for _, k := range shuffled(27) {
		name := []*string{ToPtr("名前01"), ToPtr("名前02"), nil}[k%3]
		desc := []*string{ToPtr("説明01"), ToPtr("説明02"), nil}[(k/3)%3]
		note := []*string{ToPtr("メモ01"), ToPtr("メモ02"), nil}[(k/9)%3]
		samples = append(samples, NewSample(name, desc, note))
	}
	show("before sorting", samples)
	sort.Slice(samples, func(i, j int) bool {
		return SampleCompare(samples[i], samples[j]) < 0
	})
	show("after sorting", samples)
}
```

# ちょっと説明

## `ToPtr[T any]`

何かを何かへのポインタに変換する。
変換元へのポインタではなく、変換元のコピーへのポインタになるので要注意だけど、便利。

そもそも go で `&("hoge")` って書かせてくれれば要らなくなる関数だけど、いまは書けないので。

## `comparePtr[T constraints.Ordered]`

`nil` は非 `nil` よりも小さい、という論理で比較する。
両方とも非 `nil` なら、ポインタのサス先の値の大小関係を使う。
比較結果は -1, 0, 1 で表現する。

## `compareSampleMemberStrPtr`

`Sample` のメンバ（じゃなくてもいいけど）である文字列へのポインタを比較する。
メンバを参照するための関数を受けるのは

```go:go1.18
comparePtr(a.Name, b.Note)
```

みたいなミスを避けるため。
C++ なら「メンバへのポインタ型」の値を使うんだけどそういうの無いからね。

## `SampleCompare`

主要部はこれ。
メンバを一個比較して、等しかったら次のメンバを比較、また等しかったら次のメンバを比較。
という流れ。

今回はループにしなかったけど、ループにするのも悪くない。

# 書いてみて思ったこと

やっぱりなんか go で書くと長くなるよなと思う。

```go:go1.18
	if *x == *y {
		return 0
	}
	if *x < *y {
		return -1
	}
	return 1
```

は、C/C++ だと

```C:C / C++
return (*y<*x) - (*x<*y);
```

だよなぁとか思ったり。
VirtualBox上のLinux(CentOS)からインターネットに接続する

Webアプリケーション開発の勉強をはじめるにあたって、
仮想マシン上のLinuxにApache httpdを入れてみようと思ったら、
そもそもネットにつながらなかった…。

# 環境
VirtualBox6.1
ホストOS: Windows10 Home 20H2
ゲストOS: CentOS 8.5.2111 Red Hat(64bit)

# 1.VirtualBoxのアダプターの設定（Virtualbox Host-Only Ethernet Adapter）
最初、間違えて、[ツール]→[環境設定]→[ネットワーク]の画面で設定するのかと思っていて、
よくわからなくてはまりました…。

正しくは、[ツール]の三本線の[ネットワーク] です。
![VirtualBox_ツールの三本線.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611568/9122022e-4bbb-9e2d-5a07-72ca63fcd06d.png)


私の場合、初めてVirtualBoxをインストールしたときにすでに設定していたようですが、
DHCPサーバーが有効になっていたのでオフにしました。

●アダプターを手動で設定
IPv4 アドレス : 192.168.69.1 ※環境によって違いますが私の場合
IPv4　ネットマスク：255.255.255.0

# 2.VirtualBox上のCentOSのネットワークの設定
仮想マシンは終了しておく。

仮想マシン→[ネットワーク]

アダプター1　割り当て : NAT
アダプター2　[ネットワークアダプターを有効化]にチェック
割り当て : ホストオンリーアダプター、名前 : Virtualbox Host-Only Ethernet Adapter　※1で設定したもの

# 3.Windows10でインターネット接続の共有

[設定]→[ネットワークとインターネット]→[Wi-Fi]→[アダプターのオプションを変更する]
または
[コントロール パネル]→[ネットワークとインターネット]→[ネットワーク接続]


[Wi-Fi]→右クリック→[プロパティ]→[共有タブ]
[ネットワークのほかのユーザーに、このコンピューターのインターネット接続をとおしての接続を許可する]にチェックをつける

ホームネットワーク接続 : VirtualBox Host-Only Network

# 4.VirtualBox上のCentOSで起動後の設定（ネットワークマネージャー）
`nmtui`

## enp0s3の設定
IPv6 : Ignore

## enp08sの設定
私の環境では、初期表示時は、名前欄が空欄でした。
IPv4 : Manual → show → 192.168.69.2 ※環境によって違いますが私の場合
IPv6 : Ignore

## 設定の反映
`systemctl restart NetworkManager `
`systemctl restart network`

# 5.接続確認

## 仮想マシン上のLinuxからインターネット
仮想マシン上のLinuxにて、
`ping google.com`

## Windows10から仮想マシン上のLinux
`ssh root@192.168.69.2` ※4で設定したIPアドレス

# 参考にしたページ
[【VirtualBox】ホストオンリーアダプタでのインターネット接続](https://qiita.com/a__i__r/items/fbd1a8d8f9d902a1bf6a)
[VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法](https://blog.proglus.jp/3315/)
プレゼンスライドをReveal.jsで作成して公開してみた

# 背景

プレゼンスライドをコードで書いて管理したいですよね
ググったらreveal.jsがよさそうだったので触ってみました

https://revealjs.com/

# やったこと

こちらの公開スライドにまとめました

https://hiroshi-asakawa-litalico.github.io/reveal_js_trial_slides/

# Github pagesでの公開手順
localでmdファイルを編集してスライド作成が完了したら、`vscode-reveal`のhtmlエクスポート機能を使ってhtmlを出力します。このとき生成される`export`ディレクトリの中身を全てリポジトリにpushすればよいです。
リポジトリはパブリックにして、`gh-pages`ブランチを用意し、デフォルトブランチを`main`から`gh-pages`に切り替えるだけで公開できました。
CentOS7のダウンロード手順（macOS）

## 概要

備忘録として、下記手順を記載する。
・CentOS7のダウンロード

### 前提
OS：macOS Big Sur
バージョン：11.2.1

## 手順

### 1 CentOS7のダウンロード
[CentOS公式ページ](https://www.centos.org/)にアクセス
ヘッダーの`Download`をクリック
![スクリーンショット 2021-06-19 23.50.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/d8f92128-a856-9612-0f07-7ae7e5d91ca6.png)
ダウンロードページに遷移
画面下部の項目［Older Versions］の、`then click here`をクリック
![スクリーンショット 2021-06-19 23.50.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/2c769485-6b1e-7834-50d3-67ecbb1d9d28.png)
［Download CentOS Linux ISO images］画面に遷移
`CentOS Linux Version：7`の、`mirrors`をクリック
![スクリーンショット 2021-06-20 0.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/5ba1f76d-92d8-e6d3-68b0-7344d8930913.png)
［In order to conserve the limited bandwidth available, ISO images are not downloadable from mirror.centos.org］画面に遷移
（google翻訳：利用可能な限られた帯域幅を節約するために、ISOイメージはmirror.centos.orgからダウンロードできません。）
［The following mirrors in your region should have the ISO images available:］から、任意のURLをクリック
（google翻訳：お住まいの地域の次のミラーでは、ISOイメージを利用できるはずです。）
![スクリーンショット 2021-06-20 0.04.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/137d685a-9ee3-1ef5-7dfd-e59e2e149f93.png)

格納されている`CentOS-7-x86_64-DVD-2009.iso`をクリック
ファイルのダウンロードが開始される
（通信状況によっては、1時間以上時間を要するため注意）
![スクリーンショット 2021-06-20 13.11.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/d6754ec4-3001-46e7-ad61-2b06dc671ddf.png)


ダウンロードフォルダに、isoファイルがダウンロードされたことを確認
![スクリーンショット 2021-06-20 15.16.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581782/7204137e-e0b1-e625-c2de-85ae1c406eb0.png)


以上
chia のトランザクションを得るメモ(2023 年版)

v1.8.0 あたりから, `chia wallet get_transactions` で取得できます.

デフォルトでは pagenate されるので, 一括ダンプの場合は `--no-paginate` にします


```
$ chia wallet get_transactions --no-paginate
```

処理はそこそこかかります. 

csv 化はしてくれないようなので自前でがんばります.

wallet key が複数あると, どの wallet key を使うか cli で選択しないといけないため, `tee ` で繋ぐのがよいでしょうか.
(fingerprint を指定すれば行けるようであるが)
【Git】$ git remote add origin リポジトリURL を入力してfatal: remote origin already exists. とターミナルにエラーが表示された時の解決法

初めまして。プログラミングスクールに通っているso-heiです。現在２ヶ月目です。
自分の備忘録としてですが、同じエラーが出た方のお役に立てれば幸いです。
## 【問題】
```
$ git remote add origin git@github.com:ユーザ名/リポジトリ名.git
```
ローカルリポジトリとリモートリポジトリの紐付けするために、上記をターミナルで入力すると表題のエラーが発生する。
## 【原因】
.git/configファイルに既にremote "origin”の設定が既に存在していた
## 【解決法】
### ①remote "origin”の設定を削除
```
$ git remote rm origin
```

上記のコマンドで入力して.git/configファイルの remote "origin”の設定を削除する

### ②もう一度試してみる
```
$ git remote add origin git@github.com:ユーザ名/リポジトリ名.git
```


これでエラーは出なくなり、

この後にpushしましたが問題なく反映されました。

## 【参考になったサイト】
こちらの方のサイトを参考にしました。
詳しく説明されていますので、ぜひご覧ください。
>https://pyoonn.hatenablog.com/entry/2014/10/29/191744
BEMとFLOCSSとは？


# BEMとFLOCSSとは

BEM（MindBEMding）は一意なクラスを作るための命名規則
FLOCSSはCSSファイルをモジュール化するための命名規則

（参考：https://backlog.com/ja/blog/how-to-write-markdown/）

この命名規則に従うことで、
1.クラス名に悩む必要がなくなる
2.クラス名を見ることである程度何に対応しているかわかる
3.各要素を管理しやすくなる
などなど…

# BEMについて

BEMとはBlock Element Modifierの略称。この3つを組み合わせてクラス名を決めること。（調べた結果、Modifierは２つに比べてあまり使われない模様）
各説明は以下の通り。

Block：大きな要素
Element：Blockを構成する要素
Modifier：BlockとElementのスタイルの一部を変えるもの

BEMを取り入れることで
- 保守性が高くなる
BEMの規則上block要素が1つになるので、各要素のまとまりごとに管理することができ、要素の追加、削除を簡単に行うことができる

- 可読性が上がる
BEMはblock__element--modifierと、記述する規則があるため、SCSSで記載する際にネストが深くなりすぎず、すぐに読み解くことができる。


- 再利用がしやすい
BEMはblockを起点として1つの塊で使用しているため、ページ内でコンテンツを移動したときや、同じデザインでコンテンツを追加した際に、他のスタイルによる影響を受けないため再利用がしやすくなる

（参考：https://qiita.com/ryo_cy/items/a328ea7779f8f52e5f22）

また、記入の仕方は以下の通り
```
class="block__element–-modifier"
```
* blockとelementはアンダースコア2つで区切る
* Elementとmodifierはハイフン2つで区切る
* ハイフンとアンダースコアは2つ
* block, element, modifierが複数単語になる場合、単語と単語の間はハイフン1つで区切る
* ハイフン1つの場合はElementとModifierの区切りではなく、ただの単語の区切りとして使用
```
例）
class="sidebar__title"←サイドバーのタイトル
class="article__text"←記事のテキスト
```
# FLOCSSとは
1つのCSSファイルにまとめて記述するのではなく、スタイルを適用するレイヤーやパーツごとに、ファイル単位で分割・モジュール化して管理しやすくする。
Foundation　Layout　Objectの頭文字をとったもの。
３つの説明は以下の通り。
* Foundation←reset.cssなどデフォルトのスタイルを記述するCSSファイルを格納
* Layout←ページを構成するheader, main, footerという大きな枠のスタイルを記述するCSSファイルを格納
* Object←プロジェクト内で繰り返し使われるビジュアルパターン。さらに「component」「project」「utility」のレイヤーに分けられる。

各々を分割してファイルをまとめる。

```
例）
css
 ┣ Foundation
 ┃  ┗ base.scss
 ┣ Layout
 ┃  ┣ footer.scss
 ┃  ┗ header.scss
 ┗ Object
    ┣ Component
    ┃  ┣ background.scss
    ┃  ┣ btn.scss
    ┃  ┣ module.scss
    ┃  ┗ section.scss
    ┣ Project
    ┃  ┣ article.scss
    ┃  ┣ grid.scss
    ┃  ┣ icon.scss
    ┃  ┗ media.scss
    ┗ Utility
       ┣ display.scss
       ┗ text.scss
```
（参考：https://tech.playground.style/workstyle/css-design/）

# BEMとFLOCSSの組み合わせ

クラス名に接頭辞（layoutなら「l」、objectなら「c(component)」「p(project)」「u(utility)
」）をつける。

```
例）
class="l-header__title"
class="c-botton"
```
【Next.js / TypeScript】ホットリロードを有効にする方法

Docker composeを使ってNext.jsの開発を進めていたのですが、ある日JavaScriptから
TypeSriptに切り替えてから、それまで使えていたホットリロードが効かなくなってしまいました。

JavaScriptのままでNext.jsの開発をしていた時には、docker-compose.yamlの中で`CHOKIDAR_USEPOLLING=true`と設定をしていればホットリロードが効いていたのですが...

下記が使っていたdocker-compose.yamlの中身です。

```yaml
    frontend:
        build: ./frontend
        container_name: frontend_ultimate_timer
        hostname: frontend
        volumes:
            - ./frontend/ultimate_timer:/app
        tty: true
        environment:
            - CHOKIDAR_USEPOLLING=true
        ports:
            - "3000:3000"
```

解決策としては、`environment`のところに`WATCHPACK_POLLING=true`という記載をすることでホットリロードがTypeScriptでも効くようになりました。

```yaml
    frontend:
        build: ./frontend
        container_name: frontend_ultimate_timer
        hostname: frontend
        volumes:
            - ./frontend/ultimate_timer:/app
        tty: true
        environment:
            # - CHOKIDAR_USEPOLLING=true
            - WATCHPACK_POLLING=true
        ports:
            - "3000:3000"
```

めでたしめでたし:clap:
Kotlin KoansでKotlin入門　第２０回：Sort

# はじめに
公式の問題集[「Kotlin Koans」](https://play.kotlinlang.org/koans/overview)を解きながらKotlinを学習します。

過去記事はこちら
- Introduction
  - [第０回：Kotlin Koansについて](https://qiita.com/kosuke1/items/41d192af63485bfc8cb8)
  - [第１回：Simple Functions](https://qiita.com/kosuke1/items/5862a3ece96082a62e67)
  - [第２回：Named arguments](https://qiita.com/kosuke1/items/2af11262852ee41b5da7)
  - [第３回：Default arguments](https://qiita.com/kosuke1/items/16cb8ac780df58dc8054)
  - [第４回：Triple-quoted strings](https://qiita.com/kosuke1/items/52cfeed2c49b0252d40e)
  - [第５回：String templates](https://qiita.com/kosuke1/items/0221bbbc5bc70847be6f)
  - [第６回：Nullable types](https://qiita.com/kosuke1/items/aa96e422c5313b6961bc)
  - [第７回：Nothing type](https://qiita.com/kosuke1/items/1ca0e48820d58c9dfe16)
  - [第８回：Lambdas](https://qiita.com/kosuke1/items/8de74f9491e003127f53)
- Classes
  - [第９回：Data classes](https://qiita.com/kosuke1/items/1be2de1b4406b8d914bf) 
  - [第１０回：Smart casts](https://qiita.com/kosuke1/items/50bdecaa0740eb0e1a17)
  - [第１１回：Sealed classes](https://qiita.com/kosuke1/items/71a4da02fe1e99da5d63)
  - [第１２回：Rename on import](https://qiita.com/kosuke1/items/f11465cc15a94e7589a3)
  - [第１３回：Extension functions](https://qiita.com/kosuke1/items/d4a1da00bc142c297221)
- Conventions
  - [第１４回：Comparison](https://qiita.com/kosuke1/items/e9486d044cae32167f36) 
  - [第１５回：Ranges](https://qiita.com/kosuke1/items/797f049ce5f33b1810c9)
  - [第１６回：For loop](https://qiita.com/kosuke1/items/f5f6eeea41fb89b2a20c)
  - [第１７回：Operators overloading](https://qiita.com/kosuke1/items/9845f98a632121f1493b)
  - [第１８回：Invoke](https://qiita.com/kosuke1/items/7879f83341d169374eb3)
- Collections
  - [第１９回：Collections Introduction](https://qiita.com/kosuke1/items/af91a0bd505cd93a3900) 


# 問題
[Sort](https://play.kotlinlang.org/koans/Collections/Sort/Task.kt)

顧客のリストを、彼らが行った注文の数によって降順にソートして返す関数を実装します。
sortedDescending または sortedByDescending を使用します。

```Kotlin
val strings = listOf("bbb", "a", "cc")
strings.sorted() ==
        listOf("a", "bbb", "cc")

strings.sortedBy { it.length } ==
        listOf("a", "cc", "bbb")

strings.sortedDescending() ==
        listOf("cc", "bbb", "a")

strings.sortedByDescending { it.length } ==
        listOf("bbb", "cc", "a")
```


修正前のコード
```Kotlin
// 顧客のリストを、注文数の降順でソートして返す
fun Shop.getCustomersSortedByOrders(): List<Customer> =
        TODO()
```



# 問題のポイント
[コレクションの順序](https://kotlinlang.org/docs/collection-ordering.html?_ga=2.141010226.1486166933.1648862937-1976109019.1644486873)と、変更可能なコレクションに対する操作と新しいコレクションを返す操作の[違い](https://kotlinlang.org/docs/collection-operations.html#write-operations)について学びます。

# 解答例
```Kotlin
fun Shop.getCustomersSortedByOrders(): List<Customer> = customers.sortedByDescending { it.orders.size }
```