OmniAICreator/Qiita-1.07M huggingface dataset:
Jetson NXにrosをインストールする　備忘録

普通にできた
```
sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.list.d/ros-latest.list'
sudo apt-key adv --keyserver 'hkp://keyserver.ubuntu.com:80' --recv-key C1CF6E31E6BADE8868B172B4F42ED6FBAB17C654
sudo apt update
sudo apt install ros-melodic-desktop-full
cd
echo "source /opt/ros/melodic/setup.bash" >> ~/.bashrc
source ~/.bashrc
sudo apt install python-rosinstall 
sudo apt install python-catkin-tools 
sudo apt install python-rosdep
sudo rosdep init
rosdep update
mkdir catkin_ws
cd catkin_ws
mkdir src
catkin init
catkin_make
```
遺伝研スパコンでRを使えるようにする

完全に自分の備忘録用です。
すみません。

```
ssh ユーザー名@gw.ddbj.nig.ac.jp

[xxx@atxxx ~]$qlogin
[xxx@atxxx ~]$ R --version
bash: R: コマンドが見つかりませんでした...
```
Rが使えない。

スパコンのページを見ると「環境（モジュールファイル）をロードすることで、環境設定をユーザ環境に反映し利用可能にします。 」って書いてある。

https://sc2.ddbj.nig.ac.jp/index.php/environment-module

```
[xxx@atxxx ~]$ module load r/3.5.2

[xxx@atxxx ~]$ R --version
R version 3.5.2 (2018-12-20) -- "Eggshell Igloo"
Copyright (C) 2018 The R Foundation for Statistical Computing
Platform: x86_64-pc-linux-gnu (64-bit)

R is free software and comes with ABSOLUTELY NO WARRANTY.
You are welcome to redistribute it under the terms of the
GNU General Public License versions 2 or 3.
For more information about these matters see
http://www.gnu.org/licenses/.

```

使えるようになりました。
[iOS]音速でモーダルを実装する

できるだけコードを書かずにモーダルを実装します

# バージョン
Swift 5.3
Xcode 12.1

# モーダルとは
画面の下からふわっと出てくるあれです。
[Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6#:~:text=%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%84%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%81%A8,%22%EF%BC%88%E3%83%A2%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B9%EF%BC%89%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82)によると

>コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、選択肢を提示したり、緊急の状態を知らせたりする目的でよく使われる。

「**ユーザーが現在見ている画面の上に表示され、ユーザーにその瞬間に知らせたい情報を表示したり、選択肢を提示するUI**」と考えたら良さそう。

# 実装
モーダルはコードを書かずに実装することが出来ます。Xcodeすごい！！

まず、UIViewControllerを設置して

![vc.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/04cb6565-1ce7-2857-05d3-3722068251ee.gif)


次にボタンを設置します

![button.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/3ab5742e-d693-7afb-cbd8-23e834f1efef.gif)


そしてボタンをControlを押しながらクリックし、追加したUIViewControllerまでドラッグします。
そうすると、選択肢が表示されるので、Present Modallyを選択！
![modal.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/ebc35ed5-e350-be69-bce1-5dc68208ca91.gif)

Runすると、
ちゃんとモーダルが実装できました！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/1299b2f7-645c-31b9-dd8a-c4ffb66eb069.gif" width="50%">




# 参考文献
- [モーダルウィンドウ - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6#:~:text=%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%84%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%81%A8,%22%EF%BC%88%E3%83%A2%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B9%EF%BC%89%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82)
【JavaScript】数値の表現

私自身の備忘録でもあります。
JavaScriptで数字を出力させる際、単に数字が並んでいるだけではなく
読みやすく、もしくは、簡素にする為の数字の表現方法です。

##数字を3桁毎にカンマを打って表示
###``.toLocaleString()``

```js:test.js
const num = 12345;
num.toLocaleString();
```
次のようになります。
**12<font color="DeepPink">,</font>345**


##小数点以下切り捨て
###``Math.floor(hoge)``

```js:test.js
const num = 123.456;
Math.floor(num)
```
次のようになります。
**12<font color="DeepPink">3</font>**

##小数点以下切り上げ
###``Math.ceil(fuga)``

```js:test.js
const num = 123.456;
Math.ceil(num)
```
次のようになります。
**12<font color="DeepPink">4</font>**

##小数点以下四捨五入
###``Math.round(piyo)``
####小数点以下が"4"以下の場合

```js:test.js
const num = 123.456;
Math.round(num)
```
次のようになります。
**12<font color="DeepPink">3</font>**

####小数点以下が"5"以上の場合

```js:test.js
const num = 123.567;
Math.round(num)
```
次のようになります。
**12<font color="DeepPink">4</font>**

##桁を指定した 四捨五入・切り捨て・切り上げ
※今回は四捨五入を例にしています。
####小数第一位を基準とした方法

```js:test.js
const num = 123.456;
Math.round(num * 10) / 10
```
次のようになります。
**123.5**

####十の位を基準とした方法

```js:test.js
const num = 123.456;
Math.round(num / 10) * 10
```
次のようになります。
**120**

##最後に　（こんな使い方しています）
####小数点以下切り捨て かつ 数字を3桁毎にカンマを打つ
```js:test.js
const num = 1234567.89
Math.floor(num).toLocaleString();
```
次のようになります。
**1<font color="DeepPink">,</font>234<font color="DeepPink">,</font>567**
【WIP】@CrossOrigin("*")について

##記事の目的
この動画でてきた`@CrossOrigin`アノテーションの意味を調べていたら
CORSという考え方がでてきたのでまとめる

 
##公式ドキュメント
[1.7.3.@CrossOrigin](https://docs.spring.io/spring-framework/docs/5.2.1.RELEASE/spring-framework-reference/web.html#mvc-cors-controller)


##CORSとは？


>現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。

>例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。

>しかし、アクセス元が悪意あるWebサイトならともかく、データの連携をする相手として信頼関係ができているWebサイトにまで制限をかけてしまうと不便ですので、データのアクセスを許可できるWebサイトに対してはOriginを越えたアクセスを可能にするための仕組みとして、CORSがあります。



##学習教材
`Spring Boot and React JS | Full Course | 2020`
https://youtu.be/i-hoSg8iRG0?t=3835


##`@CrossOrigin("*")`とは？


参考記事
---
- [CORS (Cross-Origin Resource Sharing) ってなに？
](https://aloerina01.github.io/blog/2016-10-13-1)
- [Spring MVC で CORS 設定
](https://qiita.com/m_kikuchi/items/df8c070b228df44a5462)
- [CORSまとめ
](https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34)
- [[SpringBoot]CORS対応で他サイトからのアクセスを許可
](https://qiita.com/syukai/items/4e88749d1d62f1148e45)
CQS原則まとめ

# CQS原則とは
CQS（Command Query Separation：コマンド/クエリ分離）原則とは、
***「メソッドはコマンドとクエリに分離して、両者が混在するようなメソッドは作らない」***
というルール

コマンドとは何かしら「状態」の変化を伴うメソッドのことで、クエリとは今の「状態」を結果として返すメソッドのこと。
SQLで例えると、INSEETやUPDATEがレコードの状態を変化させるコマンドに相当するメソッドで、SELECTがレコードの状態を返してくれるクエリに相当するメソッドになる。

コマンドとクエリが分離されておらず、状態を変化させるうえに結果を返すようなメソッドが存在すると、意図しないところで状態が変化したり、どの時点で状態が変化したのか特定するのを難しくしたりする。

# 具体例
例えば何かしらのチェックを行う際、チェックに引っかかったものに対して特定の処理を行いたいとする。
このような場合、CQS原則に違反して、チェック（クエリ）と処理（コマンド）ひとつのメソッドで済ませてしまいたくなる。
時間帯に適切なあいさつをするプログラムをCQS原則に従って記述すると次のようになる。

```python
import datetime

# あいさつを返すメソッド（コマンド）
def greeting(時刻):
  if 朝
    print('おはよう')
  elif 昼
    print('こんにちは')
  elif 夜
    print('こんばんわ')

# 時間を問い合わせるメソッド（クエリ）
def now_time():
  return 現在の時刻

if __name__ == '__main__':
  greeting(now_time())

# 実行結果（今が朝であれば）
# => おはよう
```

このように実装すると、greetingがコマンドで、now_timeがクエリになっていることがわかる。

# CQS原則の性質
上の例のように簡単な処理の場合CQS原則に従うメリットは少ないが、後々処理が複雑になってきた際に、どこで状態が変化しているのか特定するのが容易になる。
「高周波の基礎」を読んでみた

![EnCI3WPVkAIPiTT.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174906/cc0e0db8-9097-7779-49a0-cba85f7f4913.jpeg)
2001年発行の少し古い本。マクスウェル方程式をスタート地点として平面電磁波、伝送線理論、導波管、光ファイバ、共振器、アンテナが学べる。コンパクトで、間違いが少ない。高度な数学はなく、簡単なベクトル解析と線形微分方程式の知識があれば読める。
説明はあっさりだが内容は濃くて正確な、素晴らしい良書であった。

#電磁気学と電磁波
本書の前半は電磁気学とそこから導かれる電磁波の理論である。しかし通常 電磁気学のゴールとされるマクスウェル方程式をスタートとしているため、電磁気学をこの本で学ぶのは厳しいと思われる。また序盤に簡単な波動力学やベクトル解析の説明があるが簡単なものであり、同じくこの本で学ぶのは困難であろう。この本の序盤の説明は、あくまで一度学んだことがある人の復習のためのものである。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174906/e2b9aa6e-c1ab-ed1a-4cac-02f32366a156.png)
まず真空中及び媒質中の平面電磁波の伝搬を学び、それから電磁波の反射と透過を学ぶ。本書は順序良く説明されているためマクスウェル方程式が分かれば苦も無く理解できるであろう。

#伝送線理論
本書の中盤は伝送線理論である。伝送線理論は電磁界の伝搬として考える方法と、電圧・電流の伝搬として考える方法があるが本書では後者を採用している。すなわち線路を分布定数回路と見て理論式を導く。この方法は導体中の抵抗や絶縁体中の導電率と言った複雑な統計的現象も簡単にモデル化することが出来る。この結果を伝送方程式という。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174906/4033736e-349c-bc1c-69bc-750b7f7aa0c7.png)
伝送方程式から伝送線を伝わる電圧電流の波形が導ける。そして特性インピーダンスや伝搬定数、反射係数といった重要な概念が理解できる。その後具体的な平行2線や同軸ケーブル、ストリップ線路におけるそれらの値を具体的に求める。演習問題なども適度に含まれており、手を動かすことで理解を深められる。解答はないがヒントがあり、本文を理解すればだれでも解けるようになっている。

#導波管・光ファイバ・共振器・アンテナ
本書の後半は電磁波を伝送させる各種道具についての解説である。導波管というのは馴染みはなかったが、説明の図解や数式は分かりやすく、基礎を押さえるには十分であった。
![051_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174906/ab75c34d-1ee4-6aff-e501-0fcd389a526a.gif)
光ファイバの理論は少し難しいため結論のみが記載されているが導波管が理解できればそのアナロジーからイメージは十分につかめる。共振器やアンテナは基礎的なことだけが説明されている。ここまで読み進めていれば難なく理解できるであろう。
最後にスミスチャートやSパラメータ、各種測定器や電波暗室などのツールについての簡単な説明がある。これらの詳細はまた別に専門書で学ぶ方がいいだろう。

本書は電気工学と電磁気学の繋がりを理解したい人にとって非常に良い本である。実は低周波の回路理論よりも、(損失のない)高周波の方がむしろ自然の原理法則に近く、シンプルな物理であると分かる。力学で言えば、地球の重力や摩擦や空気抵抗がある複雑な地球上の物理現象よりも天体の運動の方がより原理をシンプルに理解できるのと同じことである。
eclipseでwhere we looked for ~~~とエラーが出る

#eclipseでのエラーは沢山あるが今回はタイトルに書かれているエラーについて解決策を紹介させていただく
確認すべきことがいくつかあるが一つ目が**eclipseのヘルプ→Eclipse IDEについて→インストール詳細→構成**→
**vm-
hogehoge(２５行目あたり)**に書かれているのが

```
-vm
C:\・・・JREのパス・・・\bin\server\jvm.dll
```
だと、タイトル通りのエラーになることがわかっている。　要するに、JDKを探しているのに、上記の例ではvmがJREに設定されているため、JDKを見つけられないというエラーが起きるわけだ。
***
次に、windowsのコマンドプロンプトに**java -version**と打ちこむ。エラーメッセージが表示されるようだと、JDKがインストールされていないことが確認できる。
その場合は[こちらの優秀なサイト](https://eng-entrance.com/java-install-jdk-windows)を一読した後、こちらに載せられているリンクからOracleの公式ダウンロードページへ飛んでインストールしてほしい。インストール方法については割愛させていただく。
***
インストールできたならば次に、フォルダからC:\・・・pleiadesのパス・・・\pleiades\eclipse\eclipse.iniを開き、

```
openFile
--;
-vim←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←これを挿入してほしい
C:\・・・JDKのパス・・・\bin\server\jvm.dll←←←これを挿入してほしい
-vmargs
-;
```

そしてeclipseを再起動してみる。エラーが出ないようであればそれでよい。（一応、構成のvm-の行を確認してみてほしい。JDKのパスに変わっているはずだ）

***
エラーが出るようであれば、それはシステム環境変数の設定が必要だ。windowsのverやOSによって設定の仕方があるので[お勧めのサイト](https://eng-entrance.com/java-install-jdk-windows)をのせておく。
このサイトを読んでJDKに関する変数を設定すれば冒頭で悩まされた原因が解消されると思う。
***
eclipseに関するエラーはほかにも沢山あると思うが、今回はこちらのエラーについてわかりやすく説明した。
***javaはおもしろい！***
[OutSystems]Reactive Web Appの多言語機能（Technical Preview）を試す

ついに、Reactive Web App (Mobileにも）多言語機能が追加されたので、早速試してみました。
2020/11/19時点ではまだTechnical Previewである点に注意して下さい。実運用環境で使うのはもう少し待ったほうがいいですね。

# ドキュメント
[Technical Preview - Multilingual Reactive Web and Mobile Apps](https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Technical_Preview_-_Multilingual_Reactive_Web_and_Mobile_Apps)

# 環境
Personal Environment(Version 11.10.0 (Build 22910))
Service Studio (Version 11.9.1)

# 前提条件
ソフトウェアバージョンの条件があります

- Platform Server：11.10.0以上
- LifeTime：11.6.0以上
- Service Studio：最新

# 機能を有効にする（Technical Preview）
1. LifeTimeにログイン
2. Environmentsタブをクリック
3. 右上の「Options▼」ドロップダウンリストからTechnical Previewリンクをクリック
4. Multilingual for Mobile and Reactiveのスイッチをオンに
5. 画面を下にスクロールしてSaveボタンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/1716dfa7-5aa5-ec05-a449-6174bf3eb82d.png)

保存が終わると、こんなMessageがポップアップ表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/3680805f-9583-4b2a-d009-2bbdf0346aaf.png)

# Service Studioの表示を確認
メッセージに従ってService Studioを一旦環境から切断してつなぎ直します。
Service Studioを起動し直して確認したら、フォルダが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/bb9295b4-5fc0-2c64-b19d-fa2c66598e02.png)

フォルダを右クリックしたところ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/7c70ac43-03ea-2511-5fcb-6f52c44e193b.png)


TraditionalでおなじみのUIですね。

# 翻訳機能をテストしてみる
## ロケールを追加
デフォルトはen-US（アメリカの英語）です。
ja-JP（日本語）を追加してみます。

Service StudioでDataタブのMultilingual Localesフォルダを右クリックし、Add Locale...を選択。
表示されたダイアログで、ja-JPを選択してOKボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/da3f6fd8-3137-eb1d-b969-c3e797544df5.png)

## Translationsダイアログで翻訳テキストを設定
Traditionalのときと同じ操作方法ですね。

1. Translations in のドロップダウンリストで、翻訳先言語に対応するロケールを選択しておく
2. Locationで翻訳対象Textの配置場所を探す（Filterで絞り込み可能）
3. Text列で元々のテキストを確認し、ふさわしい翻訳テキストをTranslations in列の該当行セルに設定
4. BehaviorがTranslateでなければ、Translateにしておく

という手順で翻訳テキストを設定します。業務で行うときはExcelへのエクスポート・インポート機能を使うことになると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/82f4d8fa-f3c6-54f7-de46-b750966cc2f6.png)

## テスト用にロケール変更処理を追加
(System)モジュールに、SetCurrentLocaleのClient Action版が増えているのでこの参照を追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/333732c6-23f2-511e-fc0b-37dba6ba702c.png)

テスト対象モジュール内にButtonを配置し、そのScreen Actionを以下のようにロケールをテスト対象のもの（この場合はja-JP）に切り替える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/1505cd4b-2650-0566-042d-7253e752505f.png)


# 動作確認
初期表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/848c404e-46cf-f47c-2e6f-88c0c2a5b37d.png)

ボタンをクリックしてロケール切替え
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/d938e04f-0e02-848d-26fb-cbaaae510874.png)
AtCoder Beginner Contest 118 C - Monsters Battle Royale 茶色diff

## この記事の目的

ACできなかったものを解説ACする際に、詰まったところ必要だった思考を言語化するためのもの。

解説見て、思考過程を言語化している記事です。

## 問題概要

nたいのモンスターがいる。それぞれ自分の体力分のダメージを与えられる。

最終的に1体のモンスターにするが、その時の体力を最小にしろ

## 自分の思考

例えばどうにかして1の個体を作り出せれば、他は全て1にできる。

例えば2を作り出せば、奇数のものが一つ以上あれば1を必ず作り出せる。(奇数のものから2を引いて行けば必ず1にできるから)

しかしどのようにして2を作り出せば良いのかいまいちわからなかった。

## 解法

まず二つのものを考える。a,bとする。(a > b)

ここで、まずaとbの最終的な残りの体力を求めたい。

#### 前提1

aとbがxの倍数の場合、a-bはxの倍数になる。

これは簡単に示すことができる。

a = Ax
b = Bx

とする。

a - b = Ax - Bx = x(A - B)

よって示された。

よってaとbの差は必ずxの倍数となる。

#### ポイント

上記の前提を踏まえた上で、a,bで最小を求めることを考える。

どのように最小にするかというと、a, bのうち大きい方から小さい方を引く。

それでできた二つの数字のうち、大きい方から小さい方をひく。

そうすると二つの数字はどんどん小さくなっていく。

そしていつかのタイミングで同じ数字になるだろう。

この時の数字が、二つを攻撃しあってできる最小の数字だということは直感的にわかるだろう。

この遷移は、ユークリッドの互助法的な動きである。

同じことをもう一度かく。

b > aとして、bからaを引き続けてaより小さくするのは、b % aを求めるのと同じということがわかるだろう。

そしてaからさらに求めたb % a引き続け、b % aより小さくするのは、 a % (b%a) と同じである。

最終的に求めるのは、aとbが同じになった時の値である。

ユークリッドの互助法的な遷移になることが理解してもらえただろうか。

よってユークリッドの互助法は順番に寄らないので、前から順に最小公倍数を求めれば良い。

これは、O(n log n)で求めることができる。
nginx で ECDSA で オレオレSSL証明書

# はじめに

RSA じゃなくて ECDSA で作るところが拘り。
はりきって ECDSA 521bit で鍵を生成して設定しようとしてドハマリした。

**384bitで生成しよう**

521bit だとブラウザが対応していなくて `ERR_SSL_VERSION_OR_CIPHER_MISMATCH` とか言われると思います。



# nginx の設定

```nginx:
server {
    listen 443 ssl;
    server_name _;

    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
    ssl_certificate     /etc/nginx/server.crt;
    ssl_certificate_key /etc/nginx/server.key;
    ssl_session_timeout 1d;
    ssl_session_cache   shared:SSL:50m;
    ssl_ecdh_curve      secp384r1;
}
```

# 各種生成コマンド

## 登場人物の整理

- 秘密鍵
 -  *.key *.pem
- 証明書署名要求（公開鍵）
 - *.csr
- サーバ証明書
 - *.crt *.cer

順に生成していく。

## 秘密鍵

今回は ECDSA 384bit な鍵を生成する。

```
# openssl ecparam -name secp384r1 -genkey -out server.key
```

使用できる楕円曲線の一覧は `openssl ecparam -list_curves` で確認ができる。
（ 実際に使用されるのは `prime256v1`, `secp384r1` 辺り ）

## 証明書署名要求

```
# openssl req -new -sha256 -key server.key -out server.csr
```

<!--
$ -subj "/C=JP/ST=Tokyo/L=Ohta-ku/O=moyo Inc./OU=web/CN=localhost" > server.csr
-->

## サーバ証明書

```
# openssl x509 -days 36500 -req -signkey server.key < server.csr > server.crt
```

# 各種確認コマンド

## 秘密鍵の確認

```
$ openssl ecparam -text -noout -in server.key
```

## 証明書署名要求の確認

```
$ openssl req -text -noout -in server.csr
```

## サーバ証明書の確認

```
$ openssl x509 -text -noout -in server.crt
```

# 参考

https://gato.intaa.net/net/ecdsa_ssl_cert
[SQL] 基本用語とデータ取得の基本

SQLについての記事は今回はじめての投稿になります。
少しづつ書いていこうと思います。

#基本的な用語
**SQL**
データベースからデータを取得するために、
**クエリ**(データベースに送る命令)を書くための言語。

**データベース**
テキストや数値などのデータを保存するためのツール。
SNSでいうところの「ログイン情報」や「投稿データ」を保存している。

**テーブル**
データベースは表で管理されている。
SQLでは、表のことをテーブルと呼んでいる。

**カラム**
テーブルの縦の列のことを示す。

**レコード**
テーブルの横の行のことを示す。

#データの取得の基本
以下のテーブルを例に挙げて考える。

テーブル名:**menue**

|number|name|price|time|
|:---:|:---:|:---:|:---:|
|1|カレーライス|400|夜|
|2|オムライス|500|昼|
|3|コーヒー|120|昼|
|4|レモンサワー|250|夜|
|5|いちごパフェ|450|昼|

##単一のカラムからデータを取得する
**SELECT**
「どのデータを取得するか」を **カラム名**で指定。
**FROM**
「どのテーブルのデータを取得するか」を **テーブル名**で指定。

この時、大文字で書いても小文字で書いてもOK
(SQLは大文字と小文字を区別しないため)

```sql
SELECT カラム名
FROM テーブル名;
```
```sql:sample1
SELECT name
FROM menue;
```

|name|
|:---:|
|カレーライス|
|オムライス|
|コーヒー|
|レモンサワー|
|いちごパフェ|

##複数のカラムからデータを取得する
SELECT の後ろにカラム名を取得したい個数分書く。

```sql
SELECT カラム名,カラム名
FROM テーブル名;
```
```sql:sample2
SELECT name,price
FROM menue;
```
|name|price|
|:---:|:---:|
|カレーライス|400|
|オムライス|500|
|コーヒー|120|
|レモンサワー|250|
|いちごパフェ|350|

##すべてのカラムからデータを取得する
SELECTの後ろに「*」記号を用いる。

```sql
SELECT *
FROM テーブル名;
```
```sql:sample3
SELECT *
FROM menue;
```

|number|name|price|time|
|:---:|:---:|:---:|:---:|
|1|カレーライス|400|夜|
|2|オムライス|500|昼|
|3|コーヒー|120|昼|
|4|レモンサワー|250|夜|
|5|いちごパフェ|450|昼|

##特定のデータを取得する
**WHERE**
「どこのレコード(横の行)のデータを取得するか」を
「＝」を用いて、「〇〇カラムが〇〇であるレコード」のように条件を指定する。

```sql
SELECT カラム名
FROM テーブル名
WHERE カラム名 = 〇〇;
```
上記の〇〇の部分には指定する条件であるテキストや数値、日付など様々なデータが当てはまる。
WHEREで「timeカラムが昼であるレコード」を検索する。

```sql:sample4
SELECT *
FROM menue
WHERE time = "昼";
```

|number|name|price|time|
|:---:|:---:|:---:|:---:|
|2|オムライス|500|昼|
|3|コーヒー|120|昼|
|5|いちごパフェ|450|昼|

また、WHEREの後ろに条件を指定できることから、比較演算子を用いて、データを取得することも可能。
WHEREで「priceカラムが400円以下であるデータ」を検索する。

```sql:sample5
SELECT *
FROM menue
WHERE price <= 400;
```

|number|name|price|time|
|:---:|:---:|:---:|:---:|
|1|カレーライス|400|夜|
|3|コーヒー|120|昼|
|4|レモンサワー|250|夜|
Amazon WorkSpacesでファイルをコピペする方法

Amazon WorkSpacesでは、ローカルのファイルを直接コピペできません。

(WorkDocsが利用可能であれば、ローカルのディレクトリと同期可能らしいです)

私は余計なものをインストールしたくなかったため、Windows標準のPowerShellを使い、ファイルをBase64にエンコードして、ファイルをコピペしていました。

# ファイルをコピー&ペーストする方法

本記事は移転しましたので以下にアクセスしてください。

**[Amazon WorkSpacesで簡単にファイルをコピー&ペーストする方法 -SE技術メモ-](https://bit.ly/4a9Cngu)**

[図解即戦力　Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書  小笠原種高 ](https://hb.afl.rakuten.co.jp/ichiba/0cc0efaf.c8aa84de.0cc0efb0.d31458ea/_RTLink34764?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F3761620f0b7f23272c7d59175656672c%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjEsImFtcCI6ZmFsc2V9)
Python便利バッチ

# Python便利バッチ
　自分がいつも使っているPython関連のちょっとしたバッチをQiitaの投稿の練習として記載します。

## Pythonファイル名バッチ
　編集中のpythonファイルを実行するときに、コマンド操作が面倒でダブルクリックで実行したいときや、タスクスケジューラで起動させたいときに使っているバッチです。
　下記バッチを「実行したいpythonファイル名.bat」で保存すればダブルクリックでpythonを実行できます。



```bat:PythonFile.bat
rem バッチの格納フォルダへ移動
cd %~p0

rem conda環境をアクティベート
call activate scraping_env

rem バッチファイルのファイル名.pyのpythonファイルを実行
python %~n0%.py

rem Pythonスクリプトが終了したら待機
pause
```

pythonファイルの例

```python:PythonFile.py
print("バッチ名と同じpythonファイルが実行できるよ。")
```
うん、実行プログラムに関連付けておけば必要ないですね！！
<br>
## Jupyter起動バッチ
　下記はパスワード有、他のPCからJupyterにアクセスできる設定です。自分は下記バッチをPC起動時に実行するようにタスクスケジューラで設定してます。

```bat
rem わーくすぺーすに移動します
mkdir cd C:\Users\xxxxxx\Documents\PythonScript
cd C:\Users\xxxxxx\Documents\PythonScript

rem condaの環境をあくてぃべーと
call activate kaggle_env1

rem パスワード（とーくん）、ブラウザ起動なしでジュピターをきどうします
jupyter notebook --NotebookApp.token='password'  --ip=* --no-browser
```


この投稿内容・・・誰得だろう・・・
AWSのリザーブドインスタンスについての学び

## この記事で書くこと
AWSのリザーブドインスタンスについて学んだことをきちんと残す
体系的なものではなく、断片的な情報になります。 :bow: 

## リザーブドインスタンスとは？

[AWS公式ページ](https://aws.amazon.com/jp/ec2/pricing/reserved-instances/)

利用するインスタンスの枠を注文することによって、個別で使用するよりも割引を利用できるのでお得になる、という仕組みです。

## 何を学んだ？
リザーブドインスタンスを途中で変更したくなった時にどうしたらいいのか？の答え

「え、枠で割引を受けてるんだから、途中で変えられないでしょ。」と思っていました。
が、変えられます。

ただ、何でも好きなように変更可能というわけではないです。

[AWS公式ガイド | リザーブドインスタンス の変更](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ri-modifying.html) 

自分の今回学んだケースは、インスタンス**サイズ**の変更が可能かどうかというユースケースについてです。

ここで登場する概念が「インスタンスファミリー」と「フットプリント」です。

#### インスタンスファミリー
例えば以下のようなインスタンスのことをいいます。 
- t2.small
- t2.medium
これらはインスタンスファミリーにあたります。

例えば、 t2.smallから、t2.mediumにインスタンスサイズを変更したい、という時はできます、ただし、
**「フットプリント」**が元のリザーブドインスタンスのものを超えない限り、です。


#### フットプリント
フットプリントとは、インスタンスサイズごとに決まっている正規化係数を全て合計したものです。
例えば、リザーブドインスタンスを設定時に、
- t2.medium
- t2.small
の２台を設定した場合、フットプリントは、
- t2.medium 2
- t2.small 1
2+1で３ということになります。


それを途中で
- t2.large
にしたい！というのはインスタンスファミリーが同じであってもできません。
4で3という元々のフットプリントを超えてしまっているからです。

以下のケースへは変更が可能です。
- t2.micro
- t2.micro
- t2.micro
- t2.micro
- t2.small
の５台にしたい。というものですが、
- t2.micro 0.5
- t2.micro 0.5
- t2.micro 0.5
- t2.micro 0.5
- t2.small 1
(0.5 * 4) + 1 で3、元々のフットプリントと一致しますので、変更が可能です。


なかなかリザーブドインスタンスを扱う機会が無かったので勉強になりました。 :bow:
プロキシサーバってなに？

## 勉強前のイメージ

前に構築したことあったけど忘れちゃった...
プロキシサーバを踏み台？のようにしてwebをつなぐとかなんとかだった気がする...

## 調査

### プロキシサーバとは

プロキシサーバは内部ネットワークからインターネットへ接続を行う際に中継する、中継サーバになります。
内部ネットワークと外部ネットワークの情報の受け渡しを行うものです。

### プロキシサーバを使用するメリット

- ログを残すことが出来る

プロキシサーバ上にログが残ることによって、「どういったところから不正なアクセスが試みられているのか」など記録に残すことが出来る。
サイバー攻撃による被害が発生した場合もログの解析を行うことができます。

- ウイルスチェックが出来る

プロキシ上でウィルスチェックを行うことで、内部にウイルスの侵入を防ぐほか
ネットワーク内全台ではなく、プロキシサーバ上で管理が出来るので運用が楽になります。

- 匿名性が確保される

プロキシサーバを介さずにWebサーバーに接続すると、接続先のサーバーにIPアドレスなどの情報が伝わってしまいますが、
プロキシサーバを介す事により端末のIPアドレスがわからなくなり、外部からの攻撃を可能性を低くし防ぐことができます。

- 負荷の低減

プロキシサーバでキャッシュを持つことで高速化をしたり、
プロキシサーバにロードバランシング機能で複数サーバに割り振ることによりアクセスを集中させないようにできます。

### プロキシサーバを使用するデメリット

- 接続情報を閲覧される可能性がある

「ログを取る」というメリットに対するデメリット。
情報を取得しているなら、見られる可能性があります。

- 情報が抜き取られる可能性がある

こちらも「ログを取る」というメリットに対するデメリット。
IDやパスワードなどもプロキシサーバは中継するので、悪意の持つ第三者によって設置されたものであれば抜き取られる可能性があります。

## 勉強後のイメージ

イメージ合ってたかも。
プロキシサーバってロードバランシング機能あったって知らなかった...
確かに大規模なネットワークだと1つのプロキシサーバでは対応しきれないよね

## 参考

- [プロキシ（サーバ）とは？仕組みやメリット、セキュリティ対策について徹底解説](https://cybersecurity-jp.com/security-measures/32171)
- [プロキシサーバーとは - 仕組みを図解 | Chrome・IE・Safariの設定方法](https://boxil.jp/mag/a3028/)
- [【図解】httpプロキシサーバの仕組み(http GET/https CONNECTメソッド)や必要性・役割・メリットデメリット・DNSの名前解決の順序](https://milestone-of-se.nesuke.com/nw-basic/grasp-nw/proxy/#:~:text=%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E3%82%B5%E3%83%BC%E3%83%90%E3%81%A8%E3%81%AF%E3%80%81%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88,%E5%BF%9C%E7%AD%94%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82&text=%E7%A4%BE%E5%86%85%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%92,%E6%83%85%E5%A0%B1%E3%82%92%E9%9B%86%E4%B8%AD%E7%AE%A1%E7%90%86%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82)
- [プロキシサーバのメリット4つとデメリット3つ｜設定方法はどうする？](https://www.fenet.jp/infla/column/server/%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%884%E3%81%A4%E3%81%A8%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%883%E3%81%A4%EF%BD%9C%E8%A8%AD/)
Sticky Footer作ってみる

Sticky Footer作ってみる

・メインのコンテンツにflex-grow:1を指定することでコンテンツが足りなくても最大高さまで伸びる

```css
.parent {
    display: flex;
    flex-direction: column;
    height: 100vh;
    color: white;
}

header {
    flex-shrink: 0;
    height: 50px;
    background-color: #EF9912;
}

main {
    flex-grow: 1;
    background-color: #482D1C;
}

footer {
    flex-shrink: 0;
    height: 50px;
    background-color: #5E9C3B;
}
```

```react
import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="parent">
                <header>header</header>
                <main>
                    main
                </main>
                <footer>footer</footer>
            </div>
        </>
    )
}
```

結果
![スクリーンショット 2020-11-18 23.52.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/f3930a12-ee6c-cb36-3b88-7752945e19fe.png)
[solr8]Segments Infoを閲覧するとIndexVersionが遅延する(solr cloud)

# 遭遇した現象

solr 8.3のcloud環境で検証をしているときにリーダー以外のレプリカの一部のインデックスが同期されない現象に遭遇しました。

調べた結果Segments Info画面を閲覧してしまうとそれ再起動するまでcommitしてもindexが更新されませんでした。

すべてのバージョンでは試していませんが、8.3~8.5までは同様の現象になりました。
8.6でも問題ありませんでした。

# 原因

{host}/solr/{core}/admin/segmentsにアクセスするとロックが掛かりそれ以降更新されなくなるようです。

[該当のバグのチケット](https://issues.apache.org/jira/browse/SOLR-14431)

# 回避策

solrのバージョンを8.6以上にするか、チケットに記載されいる。
設定の追加が必要そうです。

```solrconfig.xml
  <requestHandler name="/admin/segments" class="solr.SegmentsInfoRequestHandler">
    <!-- work around for https://issues.apache.org/jira/browse/SOLR-14431 -->
    <lst name="invariants">
      <bool name="coreInfo">true</bool>
    </lst>
  </requestHandler>
```
AWS Fargate使ってみた

こんにちは。むんです:grinning:
AWS FargateでDockerを動かしてみたので、備忘録です。

## 目次
- AWS Fargateとは？
- Fargateでコンテナを作る
- まとめ

##AWS Fargateとは？
端的に言うと、サーバーレスでコンテナが使える技術。

##Fargateでコンテナを作る
AWS公式チュートリアル
https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/userguide/fargate-getting-started.html

#####1. Amazon ECS コンソールの<a href="https://console.aws.amazon.com/ecs/home#/firstRun">初回実行ウィザード</a>を開く
#####2. ナビゲーションバーから、米国東部（バージニア北部） リージョンを選択する
現在、Fargateは米国東部（バージニア北部） リージョンでのみ、使える機能なようです。
#####3. コンテナを選択する
今回はnginxを選択しました。
![Screen Shot 2020-11-18 at 4.13.44 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183584/b09652d5-fb7d-2270-c9ae-73fbf26ce3f7.png)
#####4. Serviceを選択
Load Balancerは今回起動してみたいだけなので、Noneを選択。
![Screen Shot 2020-11-18 at 4.18.29 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183584/63694edd-f48e-49ce-1859-9da1070aaad4.png)
#####5. Clusterを選択
Cluster nameも特にこだわらないので、defaultのままでNext。
![Screen Shot 2020-11-18 at 4.22.57 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183584/a92fcdb0-f48f-c9a7-f67e-402c5e2a9591.png)
#####6. 確認、起動
確認画面に進むので、確認して「Create」
![Screen Shot 2020-11-18 at 4.30.00 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183584/dab70693-edac-71ee-5ea2-9539706c5604.png)
#####7. ダッシュボードを確認する
「View Service」を選択。
下記のような画面が表示される。
赤枠のTaskをクリック。
![Screen Shot 2020-11-18 at 4.40.45 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183584/5bdf5375-7bc2-c675-3f7b-f74b5af81314.png)
ENI Idをクリック。
![Screen Shot 2020-11-18 at 4.37.34 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183584/5bd434a0-365a-9e0b-5bb3-385c1913fa8c.png)
Public IP4 addressが記載されていることを確認する。
![Screen Shot 2020-11-18 at 4.37.28 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183584/28a321ce-e02e-d684-d64b-2d395eff21d9.png)
#####8. ブラウザにて確認
ブラウザにPublic IP4 addressを入力する。
![Screen Shot 2020-11-18 at 4.36.50 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183584/5092b81c-4865-9125-7dd0-d9f9faf97723.png)
起動できてますね！


##まとめ
AWS Forgateを使用してみました。
ちょっと色々まだ謎なままですが・・・。
これからもう少しいじってみたいと思います。
AtCoder Beginner Contest 033 C - 数式の書き換え 茶色diff 反省log

## 概要

https://atcoder.jp/contests/abc033/tasks/abc033_c

`+`と`*`からなる1桁の数値からなる文字列が与えられる。

それを実際に計算するが、数値をいくつか変えて合計0したい。最低いくつを変える必要があるか。

### 思考

全く思いつかなかった。どのように計算するのかが全く思いつかなかった。

### 足りなかった思考

- 細かい問題に落とし込むことができなかった。
- データ構造の持ち方

の二つが思いつかなかった。

### 具体的な解法

+までで一つ一つのデータとして、stackに入れる。

サイズが2以上の場合、積なのでfor文で回して0が入っているかどうかを考える。

サイズが1の場合は0かどうか判別して、それで計算する。

### 感想

データをどう判別するか、どのように保持するかの発想の糧にしたい
CSSで連番をつける方法

Web制作をしているなかで、こんな風に連番をつけたいときってないですか？

![counter-increment_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/ecca921f-568f-260f-6d88-8df3916f0003.png)

よく採用の流れ・業務の流れ等ででてくるかなと思います。
いままでは、普通にhtmlやcssに直接数字を書いていたんですが、CSSに便利なものがありました。

##counter-incrementの使い方
今回使うcssのプロパティは`counter-increment`と言うものです。
まずは、htmlを準備します。今回は、リストを作成するのでulタグliタグを使用します

```index.html
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
```
次に、連番をつけるために必要なCSSプロパティを付与します。

```style.scss
ul{
  list-style: none;
  li{
    counter-increment: test;
    &::before{
      content: counter(test);
    }
  }
}
```

counter-increment:testは連番表示をさせるための繰り返しの要素にcontent:counter(test)は連番表示をさせたい要素のbefore要素に。
ここまででどのように表示されるかをみてみます。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="okalog" data-slug-hash="dyXomMM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="counter-increment練習1">
  <span>See the Pen <a href="https://codepen.io/okalog/pen/dyXomMM">
  counter-increment練習1</a> by TakahiroOkada (<a href="https://codepen.io/okalog">@okalog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script>

では、さらにみやすくCSSを当てていきます。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="okalog" data-slug-hash="pobJaGV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="counter-increment完成">
  <span>See the Pen <a href="https://codepen.io/okalog/pen/pobJaGV">
  counter-increment完成</a> by TakahiroOkada (<a href="https://codepen.io/okalog">@okalog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script>

このように、数字を直接書かなくても連番表記ができるようになりました。
一桁の数字指定ぐらいであればめんどくさくないかもしれませんが、ちょっと便利なCSSですね。
わたしも、案件で使おうとしたんですが、結局画像でいいよーって話になったので使用はしませんでしが、覚えておくとどっかで役に立つかもしれません。
Apple Silicon を使った Mac に Rust をインストールするには

[rustup 1.23.0 で M1 チップは正式にサポートされました](https://blog.rust-lang.org/2020/11/27/Rustup-1.23.0.html)。

M1 Mac でも [rustup](https://rustup.rs/) をそのまま使ってインストールできます。

詳しい手順を知りたい方は、[rustup で Rust コンパイラーを簡単インストール](https://zenn.dev/chikoski/articles/2115efed69aed014616f) をご覧ください。
bashスクリプトを実行すると bad interpreter エラーになるときの解決方法

初めてシェルスクリプトを作成して実行したみたところ、エラーが出たのでメモ。

##作成したシェルスクリプト
スクリプトファイルを作成。

```
$ touch script.sh
```
作成していたスクリプトは以下。
Helloを表示するだけの単純なスクリプト。

```
#!/usr/bin/bash
echo Hello
```

##実行
実行すると、

```
$ ./script.sh
```
エラーが出る

```
-bash: ./script.sh: /usr/bin/bash: bad interpreter: No such file or directory
```
##対処法
指定しているbashが異なっていることが原因なため、使用しているbashをwhich bashで確認。
ここで使われていたのは/bin/bashだった。

```
$ which bash
/bin/bash
```

スクリプトの中身を以下のように修正すると実行できた。

```
#!/bin/bash
echo Hello
```


初心者で初記事で理解が及んでいませんがとりあえず。
間違っている等あれば教えてください。
created_atを○年○月○日と表記したい

やりたい事
・投稿した日付を○年○月○日の表記にする事

経緯
・オリジナルアプリDayLogを作成中に変更する必要ができたから

試した事
<%= @day.created_at.strftime('%Y%M%D') %>と記述
→20205211/11/11と表示された。

原因は'%D'は'%d%m%y'と同値で、%Mは月(month)では無く時間(minutes)を表す表現だった。
参考記事
https://linuxjm.osdn.jp/html/LDP_man-pages/man3/strftime.3.html

結果
<%= @day.created_at.strf("%Y年%-m月%-d日") %>
と記述したら2020年11月18日と表示されて解決！

＊%dの場合は09月、%-dの場合は9月と表示される(%d,%-dでも同じ)
参考記事
https://qiita.com/koda_7932/items/c54978483a002d75ea42
アクセス修飾子まとめ【Swift】

# はじめに
コードを書く際にあまり意識していなかったのと、理解が曖昧だったので備忘録として投稿します。


# アクセス修飾子とは？
アクセス修飾子とは、クラスや関数等にアクセス制限を設けるために利用します。


## internal
* 同じモジュール内であればアクセスすることができる。

#### モジュールとは
モジュールとは`import`して読み込んで利用する`Framework`を作成するための仕組み。


## private
* 一番制約の厳しいアクセス修飾子。
* 同じファイル内からのアクセスのみ許可されている。
* クラス単位ではなく、ファイル単位のアクセス制御であることに注意がいる。（ Swift4から`extension`で`private`プロパティにアクセスできるようになった。）


## fileprivate
* 同じファイル内からのアクセスのみ許可されている。


## public
* 別のモジュールからでもアクセスできる。
* 継承やオーバーライドが不可能


## open
* 別のモジュールからでもアクセスできる。
* 継承やオーバーライドが可能


# アクセス修飾子の使い分け

#### アクセスレベルを特に意識しない場合
* 何もつけない or `internal`

#### アクセスレベルを意識する場合
* `public`・・・別のモジュールからも使えるようにしたい
* `open`・・・別のモジュールからも使えて、継承やオーバーライドさせたい。
* `private`・・・実装を他からは隠したい。
* `fileprivate`・・・実装を他からは隠したいが、特定のコード間では共有したい。

#### 補足
`fileprivate`を使うより`private`にして、共有したいコードを同じソースファイルに`extension`を使ってまとめるほうがいい。


# 参考
* [Swift 3からのアクセスコントロール](https://qiita.com/hironytic/items/6cc68ca93b428ba9194e)
Kubernetes External Secrets のリポジトリが移動していたので helm repo を再設定する

## 遭遇した事象
helm repo update したら Kubernetes External Secrets が 404 になってしまいました。

```shell-session
$ helm repo update
Hang tight while we grab the latest from your chart repositories...
...Successfully got an update from the "eks" chart repository
...Unable to get an update from the "external-secrets" chart repository (https://godaddy.github.io/kubernetes-external-secrets/):
        failed to fetch https://godaddy.github.io/kubernetes-external-secrets/index.yaml : 404 Not Found
Update Complete. ⎈Happy Helming!⎈
```

## 対処方法
一度リポジトリを remove して 以下の URLで add しなおす。

```shell
$ helm repo remove external-secrets 
$ helm repo add external-secrets https://external-secrets.github.io/kubernetes-external-secrets/
```

## 原因
Kubernetes External Secrets の Github Organizations が `godaddy` から `external-secrets` に移動した結果、
Helm レポジトリの URL も変更されているため。
https://godaddy.github.io/kubernetes-external-secrets/ は既に 404 で利用できません。
移動の背景等は以下の issue に記載があります。

**Repository Move!**
https://github.com/external-secrets/kubernetes-external-secrets/issues/554

2020/11/18 時点で [Artifact HUB](https://artifacthub.io/packages/helm/external-secrets/kubernetes-external-secrets) にはまだ古い URL の記載が残っていました。





簡単ですが、以上です。
CloudFormationで、GetAZs で取得できるAZについて


EC2-VPCでは、デフォルトのサブネットがあるアベイラビリティーゾーンのみを返します。 らしい。


```
EC2-VPC プラットフォームでは、Fn::GetAZs 関数はデフォルトのサブネットがあるアベイラビリティーゾーンのみを返します。デフォルトのサブネットがあるアベイラビリティーゾーンがない場合は、すべてのアベイラビリティーゾーンを返します。
```

先に デフォルトのサブネット を作っておくこと

```
aws ec2 create-default-subnet --availability-zone ap-northeast-1[a|c|d]
```

## 参考URL

- https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-getavailabilityzones.html
商品マスタの全ての商品を持つ店舗を取得する

以下のテーブルがある

````sql
select * from items;
+--------------+
| item         |
+--------------+
| ビール       |
| 紙オムツ     |
| 自転車       |
+--------------+
````

````sql
select * from shopitems;
+--------+--------------+
| shop   | item         |
+--------+--------------+
| 仙台   | カーテン     |
| 仙台   | ビール       |
| 仙台   | 紙オムツ     |
| 仙台   | 自転車       |
| 大阪   | テレビ       |
| 大阪   | 紙オムツ     |
| 大阪   | 自転車       |
| 東京   | ビール       |
| 東京   | 紙オムツ     |
| 東京   | 自転車       |
+--------+--------------+
````

shopitemsテーブルでshopテーブルの全てのitemを持つshopを取得する。(仙台、東京)

````sql
select
si.shop
from
shopitems si
,items i
where
si.item = i.item
group by
si.shop
having
count(si.item) = (
    select
    count(item)
    from
    items
);

+--------+
| shop   |
+--------+
| 仙台   |
| 東京   |
+--------+
````

仙台にはitemsテーブルにないカーテンもある状態。
仙台を除く場合は以下。

````sql
select
si.shop
from
shopitems si
left outer join
items i
on si.item = i.item
group by
si.shop
having
count(si.item) =
(
    select
    count(*)
    from
    items
)
and count(i.item) = 
(
    select
    count(*)
    from
    items
);
````

こちらを参考にさせていただきました。
<a href="https://www.amazon.co.jp/%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6SQL%E5%BE%B9%E5%BA%95%E6%8C%87%E5%8D%97%E6%9B%B8-%E7%AC%AC2%E7%89%88-%E5%88%9D%E7%B4%9A%E8%80%85%E3%81%A7%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%9F%E3%81%8F%E3%81%AA%E3%81%84%E3%81%82%E3%81%AA%E3%81%9F%E3%81%B8-%E3%83%9F%E3%83%83%E3%82%AF-ebook/dp/B07GB4CNKP/ref=sr_1_1?adgrpid=48836428930&dchild=1&gclid=Cj0KCQiA48j9BRC-ARIsAMQu3WSrZJJd4-psCT9_qj0w4f0_fuN9b3Rh3DD8mwgP9UkTOLLapCJzwJwaAsG_EALw_wcB&hvadid=338547693256&hvdev=c&hvlocphy=1009306&hvnetw=g&hvqmt=e&hvrand=10462958271481352436&hvtargid=kwd-335112034228&hydadcr=4076_10899478&jp-ad-ap=0&keywords=%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6sql%E5%BE%B9%E5%BA%95%E6%8C%87%E5%8D%97%E6%9B%B8&qid=1605532234&sr=8-1&tag=googhydr-22">達人に学ぶSQL徹底指南書 第2版 初級者で終わりたくないあなたへ
</a>
非同期でいいね機能が切り替わらない時の解決方法

##状態
同期状態でいいね機能を実装

そこから、非同期化

エラーもちらほらでましたが、エラーが出ないように修正。

エラーがなくなった、でも非同期でいいね機能が動かない。

って人は見てください。

同じようなパターンかもしれないです。


いいね機能を実装している方はたくさんいて
記事もたくさんありますので、自分と同じ状況を探してください。




詳しい詳細は下記を見てください。
https://teratail.com/questions/304798


##非同期処理の流れをおさらい
Ajaxの流れ
①イベント発生
②非同期でリクエスト送信
③受け取った情報を処理
④処理結果をJSON形式で応答
⑤レスポンスを受けてDOMでページ更新

自分の状態を確認することで原因がどこか見つける作業が早くなる。
イベントを発生しているかの確認だったら、アラートを出すように記述して確かめるみたいな感じですね。


##問題箇所
```
<tr class="idea_<%= @idea.id %>">
 <%= render 'like', idea: @idea %>
</tr>
```
ここの記述が問題でした。
記事等を参考に書いていたのですが、tableタグを使用していないのにtrタグを使っていたのが原因でした。
タグの性質を理解せずに使っていたのが駄目だったわけですね。

まさかと、思いdivタグに変更したらすんなりできました。

今回得た教訓は、タグの性質を知ること！
社会人4年目SIerからのWeb系エンジニア転職（1ヶ月目）

#はじめに

自分は現在SIerとして働いており、Web系エンジニアへの転職を目指しています。

「転職に成功した！」の投稿に比べると「転職の途中です」の投稿は少ないと感じたので
転職活動開始1ヶ月目の活動を記録しておきます。

#目次
[現在のスペック](#現在のスペック)
[転職の動機](#転職の動機)
[現在までの活動](#現在までの活動)
[2ヶ月目からの活動予定](#2ヶ月目からの活動予定)

#現在のスペック
- 新卒でSIer企業に入社し、入社4年目（要件定義・設計・製造・試験・運用保守を経験）
- 職場での使用言語はCOBOLのみで、他言語の経験はなし
- 取得資格
 - 情報処理技術者試験　基本情報技術者
 - 情報処理技術者試験　応用情報技術者
 - 情報処理技術者試験　データベーススペシャリスト
 - 情報処理技術者試験　ネットワークスペシャリスト
 - AWS　クラウドプラクティショナー
 - AWS　ソリューションアーキテクト　アソシエイト

#転職の動機
####「自分の仕事が世の中の役に立っている」と自信を持って言えない
携わっているシステムが自分では使用出来ないシステムであり、
「作ったものが世に出て、役に立っている」という実感が得づらいです。

開発している機能の必要性に疑問を感じることも少なくありません。
「これ開発するのはいいけど、誰か使うのか？」とモヤモヤしながら、
長い期間の開発を行うことにモチベーションが感じられなくなってしまいました。

####職場以外での勉強が仕事に活かしづらい
今の職場では以下の2点より、仕事に関わる勉強を職場外で行うことが難しいと感じています。

- レガシーな技術を使用しており、インターネット上や書籍として教材が少ない
- 客先常駐で勤務しており、仕事で使用している設計書やソースは持ち出しができない

「何かを勉強しないとまずい」「他の人に差をつけたい」という思いは常にあり、
会社が推奨する資格の勉強を行なっていましたが、仕事の役に立つことは少なかったです。

あまり仕事の役に立っていない資格の勉強を続けるうちに、
「折角勉強する意欲があるので、勉強が仕事の成果に直結する職場に行きたい」と感じるようになりました。

#現在までの活動
- 転職エージェントへの登録・面談
- ポートフォリオ作成のための学習
- Twitter、Qiita、Githubのアカウント作成

####転職エージェントへの登録・面談

Web系への転職における甘い考え方を全てひっくり返されました。

- ポートフォリオも作らずWeb系への転職を目指すとは何を考えているのか
- あなたの持っている資格はWeb系への転職には何の役にも立たない
- COBOLでの開発経験は開発経験がないのと同じくらいに考えて欲しい
・・・とズバズバ正直な意見をいただきました。笑

その後、調べれば調べるほどエージェントの方が仰っていたことが正しいことに気づきました。
減収が予想されることから現職にとどまることも提案いただきましたが、
むしろ自身の市場価値の低さに焦りを感じ、一層Web系エンジニアになるぞという思いが強まりました。

自分の転職に対する考え方や転職理由にダメ出しをもらえるいい機会なので、
あまり準備ができていなくても一旦面談を受けるのはありだなと個人的には思いました。

####ポートフォリオ作成のための学習

正直なところ、何から始めればいいのか全くわからずだったので、
著名な[勝又健太(poly_soft)](https://qiita.com/poly_soft)さんがおすすめされている学習順序をなぞることから始めました。

- コンピュータサイエンス基礎（飛ばした）
- Linux基礎（Linux標準教科書）
- HTML/CSS基礎（Progate）
- JavaScript基礎（Progate）
- Ruby基礎（Progate）
- RDBとSQL基礎（Progate）
- GitとGitHub基礎（Udemy）
- Ruby on Rails基礎（Progate）
- Ruby on Railsチュートリアル

基本情報処理技術者を取得していたのでコンピュータサイエンス基礎は飛ばしてしまいましたが、
駆け足ながらも1ヶ月で一通りの学習を終えることができました。

Linux基礎の勉強そのものよりも、勉強のためにVirtualBox上でCentOSを動かすのに時間がかかった経験から、
以降の勉強では環境構築などの手間がなく、すぐに始められるProgateを選択していました。

個人的にはRuby on Railsチュートリアルはかなり難しかったので、
内容的に重複する部分はありますが、ProgateのRails基礎を先にやっておいてよかったなと感じました。

####Twitter、Qiita、Githubのアカウント作成

アウトプットの場を作ることが重要と先人の方々が言っていましたので、
各種SNSの使い分けもGitが何をするものかもわからないままにアカウントを作成しました。

[Twitter](https://twitter.com/kondo0602_t)

#2ヶ月目からの活動予定（簡単に）
####ポートフォリオの作成

言わずもがな、ポートフォリオの作成に取り掛かります。
テーマは決まっているので、がしがしコードを書いていきます。

####技術の勉強会に参加し、実際にWeb系エンジニアとして働いている方の話を聞く

転職するとは決めたものの、実際にどんな方が働いているのかあまりイメージがついていないところがあるので。
同じようなステップにいる転職を目指す方ともコミュニケーションをとってみたいです。

####技術的アウトプットを行う（Twitter,Qiita）

現状Twitterは勉強時間を垂れ流しにして記録しているだけ、Qiitaは見る専用になってしまっています。
ポートフォリオ作成の上でつまづいたところ、何か気になったところは発信しアウトプット癖をつけます。

# 最後に
駄文ですが、読んでいただきありがとうございます。

SIer→Web系エンジニアの転職を目指す方は多いと思うので、
今同じステップにいる方に少しでも参考にしていただけたら嬉しいです。
GASを学ぶうえでの注意事項

## GASを学ぶうえでの注意事項
### GASはJavaScriptとイコールではない

　GASは、JavaScrpitベースではありますが、**世間一般で語られているJavaScriptとまったく同じというわけではありません**。
　JavaScriptはブラウザ上で動作させることで、ブラウザで行われた操作に応じてスクリプトを実行したり、HTMLの要素を編集したり、スタイルを変更したりすることができます。そのため、ブラウザを操作するブラウザオブジェクトや、Webページを記述するHTMLを操作するDOMオブジェクトといった機能を利用することができるのですが、GASではそれらの機能はサポートされいません。

　例えば、多くのJavaScriptの入門書では以下のようなコードが最初に登場しますが、GASではこの一文ですら動作しません。

- JavaScriptでアラートを表示させる（サンプル）

```
alert('Hello JavaScript');
```

　GASで利用できるJavaScriptは、基本構文、制御構文、演算子、関数、組み込みオブジェクトなどの基本部分（**コアJavaScrpit**といいます）のみが対象となります。GASは、そのコアJavaScriptに加えて、Google Appsを操作するための数々のサービスによって構成されています。
Vue.jsでフォームを監視してAPIからデータを取得する

# Watchを理解できた具体例
実務で使われているなかでイマイチ理解できていなかった、watchについて理解する為に
Githubからリポジトリ一覧を取得する簡単なアプリケーションをつくりました

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>watch-github</title>
</head>
<body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
　<!-- axiosをCDN リンクで取得する -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　<!-- VueをCDN リンクで取得する -->

  <div id="app">
    <select v-model="current">　<!-- v-modelでcurrentの値を監視する -->
      <option v-for="topic in topics" v-bind="topics.value">
        {{ topic.name }}
      </option>
    </select>
    <div v-for="item in list">{{ item.full_name }}</div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        list: [],
        current: '',
        topics: [
          { value: 'vue', name: 'Vue.js'},
          { value: 'jQuery', name: 'jQuery'}
        ]
      },
      watch: {
        current: function(val) {
          // currentの選択肢が変わった時にwatchの処理が行われる
          axios.get('https://api.github.com/search/repositories', {
            params: { q: 'topic:' + val }
          }).then(function(response) {
            this.list = response.data.items
          }.bind(this))
          console.log(this.list);
        }
      },
    })
  </script>
</body>
</html>

```
Rails+WebpackerでBootstrap4を入れる方法


# 背景
railsではBootstrapをwebpackerを使って入れるとのことだったので、試してみました。

# やり方
Gemfileに追加

```
# webpacker
gem 'webpacker', '~> 4.0'
```

Dockerを使ってbuildし直す


ターミナルでwebpackerのインストール

```
$rails webpacker:install
```

yarnコマンドでjQueryやbootstrapをインストール

```
$yarn add jquery bootstrap popper.js
```

config/webpack/environment.jsに以下を追加

```
const { environment } = require('@rails/webpacker')

module.exports = environment

// ここから
  const webpack = require('webpack')
  environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      Popper: ['popper.js', 'default']
    })
  }
// ここまで
```

app/javascript/stylesheets/application.scssを新規作成し、追加

```
@import '~bootstrap/scss/bootstrap';
```

app/javascript/packs/application.jsに以下を追加

```
  import 'bootstrap';
  import '../stylesheets/application';
```

app/views/layouts/application.html.erbに以下を追加

```
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```

あとは、bootstrapのクラスを当ててみて、動作すればOKです。

# 参考
https://qiita.com/rhistoba/items/f724dae231d7e28bf477
俺でもわかるトレースID(AWS CloudFrontとAWS ELB)

俺です

いつでもCFやELBぶっ刺してもばっちこいなNginxになれるようにlog_formatに脳死でいれとけメモです

|HTTPヘッダ|Nginx log_format|
|----|----|
|X-Amz-Cf-Id|$http_x_amz_cf_id|CloudFrontのrequest_id|
|X-Amzn-Trace-Id|$http_x_amzn_trace_id|ELBのtrace_id|

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html
https://aws.amazon.com/jp/premiumsupport/knowledge-center/trace-elb-x-amzn-trace-id/

死
HTML & CSSで複数指定する方法のちょっとした違い

#はじめに
　本日は一日中、HTML & CSSと格闘していた。その中で気づいていなかった便利な２つのことを記録しておく。

##HTMLでclass名を複数指定したい

```HAML
<div class="name1 name2 name3">
  クラス名を複数指定するときは、""(ダブルコーテーション)の中で、半角スペースで区切る
</div>
```

##複数のクラスに同じCSSを適用させる

```css
.name1, .class1 {
}
```
カンマで区切る。ドットもつける。

##最後に
　HTMLとCSSで複数指定するときの区切り方が違うから、間違えないようにしっかり覚えておきたい。
サイドバーレイアウト作ってみる

サイドバーレイアウト作ってみる

```css
.parent {
    display: flex;
    height: 100vh;
    color: white;
}

aside {
    width: 30%;
    background-color: #2A66DB;
}

main {
    background-color: #322B29;
    flex: 1;
    overflow: scroll;
}
```

```react
import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="parent">
                <aside>aside</aside>
                <main>main aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</main>
            </div>
        </>
    )
}
```

結果
![スクリーンショット 2020-11-18 22.52.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/ab907e2d-ca81-356b-4328-84d4695d4251.png)
Flutter実装時にお世話になったページ 2020/11/18

## なにか

毎回、同じ問題に、同じ検索して、同じページで解決してるので。。。

## ContainerのBottomにだけ、枠線を入れたかった

[Stack Overflow "How to add a border to a widget in Flutter?"](https://stackoverflow.com/a/53680045)

## url_launcherでカスタムURLスキーマを使用したアプリ起動ができなかった（Android)

AndroidManifestまで意識が行かなかった。。。

[Stack Overflow "[url_launcher] When targeting API 30, canLaunch always retrurns false"](https://github.com/flutter/flutter/issues/63727#issuecomment-691066239)

## flutter upgradeしたら、ビルド通らなくなった。。。

こんなエラーが出るようになりました。

```
Flutter Row() 'crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null': is not true. Failed assertion:
```

[Stack Overflow "Flutter Row() 'crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null': is not true. Failed assertion:"](https://stackoverflow.com/a/61541922)

## flutter upgradeしたら、Build iOS 失敗するようになった。。。

こんなエラーが出るようになりました。

```
    ld: symbol(s) not found for architecture armv7
    clang: error: linker command failed with exit code 1 (use -v to see invocation)
    note: Using new build system
    note: Planning build
    note: Constructing build description
```

[Stack Overflow "Undefined symbols for architecture armv7 - Failed to build iOS app"](https://github.com/flutter/flutter/issues/46610#issuecomment-577484354)

これは、このコマンドで行けるようになったんだけど、Firebaseとかの設定してると色々面倒なので、根本的な原因を確認中、どうやらビルドのターゲットバージョンが問題っぽい。

## なんか

Stack Overflowだらけでした。それにしてもStack Overflowのコピーサイトは検索結果を汚染しすぎ。
[React]デフォルトでオブジェクトを渡す関数における引数の受け取り方

以下のonSortEndにおいて引数を渡したいときはどうすれば良いでしょうか。

```javascript

const Sample =()=> {
 //省略
  function onSortEnd({ oldIndex, newIndex }) {
    console.log(value);
  }

  render() {
 //省略
    <SortableList
                items={value}
                onSortEnd={onSortEnd}
              />
  }
}
```

##結論
やることは二つ。

- 分割代入だからonSortEndの呼び出しでオブジェクトを渡す
- コールバック関数の引数で引数を受け取る

```Javascript
function onSortEnd({ oldIndex, newIndex, category }) {
    console.log(category);
  }

<SortableList
                items={value}
                onSortEnd={({ oldIndex, newIndex }) =>
                  onSortEnd({
                    oldIndex: oldIndex,
                    newIndex: newIndex,
                    category: category,
                  })
                }
              />
```
高さが均等になるように要素を並べる

高さが均等になるように要素を並べる。

・flex: 1を使うことで各要素の高さが均等になる

```css
.parent {
    display: flex;
    justify-content: center;
}

.item {
    display: flex;
    flex-direction: column;
    background-color: cadetblue;
    margin: 0 8px;
    padding: 8px;
}

.item p {
    flex: 1;
}
```

```react
import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="parent">
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaa<br />aaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaa<br />aaaaaaaa<br />aaaaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaa</p>
                    <button>button</button>
                </div>
            </div>
        </>
    )
}
```

結果
![スクリーンショット 2020-11-18 22.43.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/da4ae2a1-f4d5-53fd-a9d9-d4254b0c7e90.png)
聖杯レイアウト作成してみる

聖杯レイアウト作成してみる

```css
.container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

nav {
    height: 50px;
    background-color: gray;
    text-align: center;
    vertical-align: middle;
}

main {
    display: flex;
    flex-direction: row;
    flex: 1
}

.bottom {
    height: 100px;
    background-color: wheat;
    text-align: center;
}


.left {
    width: 300px;
    background-color: coral;
}

.middle {
    flex: 1
}

.right {
    width: 300px;
    background-color: teal;
}
```

```react
import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="container">
                <nav>navigation</nav>
                <main>
                    <div className="left">left</div>
                    <div className="middle">middle</div>
                    <div className="right">right</div>
                </main>
                <div className="bottom">bottom</div>
            </div>
        </>
    )
}
```


結果
![スクリーンショット 2020-11-18 22.37.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/eacf4537-6408-409b-b125-b4ca7a9e4483.png)
Javascriptの分割代入について

Reactを触っていて下のように突然{}の引数が出てきて「なんだこれ？？」となりました。

```JavaScript
onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
```

##結論
これは**分割代入**と呼ばれるものらしくて、以下と同じみたいです。要は、オブジェクトが渡されていて{}とすることで勝手に代入してくれているみたいです。

```javascript

function onSortEnd(param){
  let oldIndex = param.oldIndex
  let newIndex = param.newIndex
}
```