OmniAICreator/Qiita-1.07M huggingface dataset:
voltaのコマンドまとめ【プロジェクトをUpdateしてく！-➂】

## 今回行った一連の流れ

➀nodistをvoltaへ変更
➁npm-check-updatesを導入
➂gulp-sassをgulp-dart-sassへ変更　←今回ここをpick up☆
➃bootstrapを使用したプロジェクトの場合、bootstrapのアップデート
 
 

## 経緯
新しいプロジェクトを任されることに。そのプロジェクトをクローンしたらnpx update-browserslist-db@latestのコマンドがnpx gulpで常にでてきてしまうことに気づき、さらに元々プロジェクトを担当していた人と開発環境が違ったためgulpファイルの追記と修正が必要になった。

以上のことから、「一連の流れ」を行うことになった。
上記の項目ごとに備忘録として記事を書くことにした。



## 前提

- windows 
- nodistをパッケージマネージャーとして使用
- bootstrapバージョン4を使用
　
（※voltaはMacでもOKです！）
　
　　
　
　
## 【nodistをvoltaへ変更】

※この記事は続き記事です。
　項目ごとに記事わけしているので単体でも活用していただけます。

### 《目次》
- [nodistをアンインストール](https://qiita.com/kusaharajiji/items/7c7e7bde129fb8880f34)
- [voltaをインストール](https://qiita.com/kusaharajiji/items/d031daaed76e08485a8d)　　　　←前回
- voltaのコマンドまとめ　　　←今回の記事ここをpick up☆
　
　
　
　
### ＜voltaのコマンドまとめ＞===============

```:現在インストールされているvoltaの詳細
volta
```

```:node最新バージョンをインストール
volta install node
```

```:node指定のバージョンをインストール
volta install node＠バージョン
```
＜例＞volta install node＠16.20
　
```:各プロジェクトごとにpinする
volta pin node＠バージョン
```

```:現在インストールされてるnodeのバージョンとpin, defaultがわかる
volta list node
```

### ＜その他＞===============
voltaでのnodeパッケージの導入はグローバルは非推奨。

＜余談＞
Voltaに変えた理由としては、もともと使っていたnodistではできなかったプロジェクトごとのバージョン管理が可能になるため。複数のプロジェクトを担当しているとそれぞれのnodeのバージョンなどがバラバラの場合編集のたびにバージョン変更を強いられていたのでVoltaの仕様は助かる。

　
　
　
　
　
　
　
## ◆◆次回はnpm-check-updateを導入◆◆

#### 次回
[「npm-check-updatesを導入【プロジェクトをUpdateしてく！-➃】」](https://qiita.com/kusaharajiji/items/aa781a237ebfb188b65e)
vscode拡張「code-runner」でDenoの設定

vscodeで、開いているファイルを実行する時に便利なのが「**code-runner**」という拡張機能です。

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

この拡張機能を入れると、毎回コマンドを打たなくてもボタンから実行できるので便利です。
code-runnerについては、詳しくはこちらの記事を参照してください。

https://www.kamo-it.org/blog/vscode_coderunnner/

https://qiita.com/take_me/items/6a1d2d417889837219d1

## code-runner を Denoに対応させる

さて、code-runnerでJavaScript / TypeScriptを実行する場合、デフォルトのコマンドはNode.jsとts-nodeになっています。
Denoを使用したい場合は、設定を上書きしてDenoコマンドを実行するように調整してやる必要があります。
具体的には、`settings.json`に以下のように記述します。

```jsonc
    "code-runner.executorMap": {
        "javascript": "deno run --unstable",
        "typescript": "deno run --unstable",
        "javascriptreact": "deno run --unstable",
        "typescriptreact": "deno run --unstable",
    },
    "code-runner.executorMapByGlob": {
        "*{_,.}test.{js,ts,mjs,mts,jsx,tsx}": "deno test --unstable",
        "test.{js,ts,mjs,mts,jsx,tsx}": "deno test --unstable",
        "*{_,.}bench.{js,ts,mjs,mts,jsx,tsx}": "deno bench --unstable",
        "bench.{js,ts,mjs,mts,jsx,tsx}": "deno bench --unstable",
    },
    "code-runner.runInTerminal": true,
```

#### 各設定の解説

まず、`code-runner.executorMap`で、JSとTSをそれぞれ`deno run --unstable`で実行するよう設定しておきます。
`--unstable`は無くてもいいですがお好みで。

```jsonc
    "code-runner.executorMap": {
        "javascript": "deno run --unstable",
        "typescript": "deno run --unstable",
        "javascriptreact": "deno run --unstable",
        "typescriptreact": "deno run --unstable",
    },
```

次に、テストファイルとベンチマークファイルの設定です。
Denoでは、

- ファイル名が`test.{js,ts,mjs,mts,jsx,tsx}`に一致するファイル
- ファイル名が`_test.{js,ts,mjs,mts,jsx,tsx}`で終わるファイル
- ファイル名が`.test.{js,ts,mjs,mts,jsx,tsx}`で終わるファイル

がテストファイルとして扱われます。([参考](https://deno.com/manual@v1.33.4/basics/testing#running-tests))
そのようなファイルに対しては、`code-runner.executorMapByGlob`を使用して`deno test`コマンドが実行されるようにしておくと便利です。
(`deno bench`コマンドも同様)

```jsonc
    "code-runner.executorMapByGlob": {
        "*{_,.}test.{js,ts,mjs,mts,jsx,tsx}": "deno test --unstable",
        "test.{js,ts,mjs,mts,jsx,tsx}": "deno test --unstable",
        "*{_,.}bench.{js,ts,mjs,mts,jsx,tsx}": "deno bench --unstable",
        "bench.{js,ts,mjs,mts,jsx,tsx}": "deno bench --unstable",
    },
```

最後に`runInTerminal`の設定です。
code-runnerは、デフォルトでは標準入力などを受け付けないモードでコマンドを実行します。
しかし、Denoを実行する際はファイルアクセスなどの権限を`[y/N]`で入力することが多いです。そのため、`code-runner.runInTerminal`を`true`にしておくことで標準入力を受け付けるように設定しておきます。

```jsonc
    "code-runner.runInTerminal": true,
```

以上、code-runnerでDenoを動かすための設定方法でした。
voltaをインストール【プロジェクトをUpdateしてく！-➁】

## 今回行った一連の流れ

➀nodistをvoltaへ変更　←今回ここをpick up☆
➁npm-check-updatesを導入
➂gulp-sassをgulp-dart-sassへ変更
➃bootstrapを使用したプロジェクトの場合、bootstrapのアップデート
 
 

## 経緯
新しいプロジェクトを任されることに。そのプロジェクトをクローンしたらnpx update-browserslist-db@latestのコマンドがnpx gulpで常にでてきてしまうことに気づき、さらに元々プロジェクトを担当していた人と開発環境が違ったためgulpファイルの追記と修正が必要になった。

以上のことから、「一連の流れ」を行うことになった。
上記の項目ごとに備忘録として記事を書くことにした。



## 前提

- windows 
- nodistをパッケージマネージャーとして使用
- bootstrapバージョン4を使用
　
（※voltaはMacでもOKです！）
　
　　
　
　
## 【nodistをvoltaへ変更】

※この記事は続き記事です。
　項目ごとに記事わけしているので単体でも活用していただけます。

### 《目次》
- [nodistをアンインストール](https://qiita.com/kusaharajiji/items/7c7e7bde129fb8880f34)　 ←前回
- voltaをインストール　　　　←今回の記事ここをpick up☆
- voltaのコマンドまとめ
　
　
### ＜voltaをインストール＞===============

#### 1.公式からインストーラーをダウンロード
##### windows用とMacは異なるようなので注意
[ここからダウンロードページへ](https://docs.volta.sh/guide/getting-started)
![スクリーンショット 2023-05-22 142856.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661441/945b17e4-0af0-8fe1-77e7-628a01c84b35.png)

##### インストール

Windowsは「開発者向け機能を使う」で開発者モードをオンにするようなのですが、私はしなかったと思います。どうなんでしょうか。。。

※インストール作業中「このアプリがデバイスに変更を加えることを許可しますか？」と表示されたのでそれは「はい」。

基本的には何か選択して設定することなくインストールは完了しました。
　
##### Voltaをインストール流れ
 - インストーラー実施
 - Next
 - Next
 - Install
 - インストール完了
　
　
　
#### 1.voltaがインストールできているか確認し、完了！
以下はVolta 1.1.1がインストールできているのがわかる。

```
#コマンド
volta
```

```
#ターミナル

Volta 1.1.1
The JavaScript Launcher ⚡

    To install a tool in your toolchain, use `volta install`.
    To pin your project's runtime or package manager, use `volta pin`.

USAGE:
    volta [FLAGS] [SUBCOMMAND]

FLAGS:
        --verbose    Enables verbose diagnostics
        --quiet      Prevents unnecessary output
    -v, --version    Prints the current version of Volta
    -h, --help       Prints help information

SUBCOMMANDS:
    fetch          Fetches a tool to the local machine
    install        Installs a tool in your toolchain
    uninstall      Uninstalls a tool from your toolchain
    pin            Pins your project's runtime or package manager
    list           Displays the current toolchain
    completions    Generates Volta completions
    which          Locates the actual binary that will be called by Volta
    setup          Enables Volta for the current user / shell
    run            Run a command with custom Node, npm, pnpm, and/or Yarn versions
    help           Prints this message or the help of the given subcommand(s)
```
　
　
　
　
　
## ◆◆次回はvoltaのコマンドまとめ◆◆

#### 次回
[「voltaのコマンドまとめ【プロジェクトをUpdateしてく！-➂】」](https://qiita.com/kusaharajiji/items/ce474092ebc0b328b057)

#### 参考URL
https://zenn.dev/longbridge/articles/30c70144c97d32
【Trailhead】ステップエラーの解決法まとめ

# Trailheadで発生するエラーの対処法
:::note warn
タイトル詐欺注意
まとめと書きつつまだ1件しか書いてないです。（続々更新予定）
:::
### はじめに
この記事ではSalesforceが提供する学習コンテンツ「Trailhead」にて発生するエラーを解決する方法をまとめてます。
私が詰まったところを都度更新していくスタイルなので、網羅性はないと思っていただいて。

### パートナーとの CRM データの共有
Trailhead：[パートナーとのCRMデータの共有 > 組織の外部組織の共有設定の設定](https://trailhead.salesforce.com/ja/content/learn/projects/communities_share_crm_data/set_external_owd?trailmix_creator_id=welcome4&trailmix_slug=certified-community-cloud-consultant-ja)

発生するエラー：_Your external org-wide defaults aren't configured correctly. Repeat the steps to make sure they are._

解決法：取引先責任者のJosh Davisの姓と名を逆にする。
参考：[Trailblazer Community](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000BrSQuSAN)

手順としては、下記の通り
1. 取引先Express Logistics and Transportに移動
1. 取引先責任者Josh Davisに移動
1. 姓と名を逆にする
1. 右上の▼からView Patner Userをクリックし、User編集画面でも同様に姓と名を逆にして保存


私はこれで一発でクリアした。
最初はエラー文だけみて共有設定がおかしいのか、そもそも操作説明自体がおかしいのかと試行錯誤したが、初心に振り返って課題のタイトルで検索したらすぐに同様に困っている人がいたので今回は解決できた。

Trailhead全体に言えることだが、エラー文が具体的ではないので少し自分で対応してみて、それでもわからなければすぐに課題のタイトルで検索してみるのが吉だと感じた。（日本語で出なければ英語のタイトルで検索してみるとよりヒットしやすい）
policy tagの親タグを移動したいとき

以下のpolicy tagのベストプラクティスについてのドキュメントを読んでいると、親policy tagの変更についてはWEB UIは用意されていないのでAPIを使ってくださいね、的な記載がある。

https://cloud.google.com/bigquery/docs/best-practices-policy-tags

:::note info
Note: You can move a policy tag only through the Data Catalog PolicyTagManager.UpdatePolicyTag method.
:::

以下の`projects.locations.taxonomies.policyTags.patch`を利用する。

https://cloud.google.com/data-catalog/docs/reference/rest/v1/projects.locations.taxonomies.policyTags/patch



`try it!`ボタンを押すとPostman的な機能が使える。ここに親を変更したいpolicy tagをnameに、Request bodyのparentPolicyTagに変更後の親policy tagを設定する。
※request bodyにはparentPolicyTagだけの指定だとエラーになるので、その他のparameterも設定する。

![スクリーンショット 2023-05-19 23.47.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3445119/77e2b0fa-cb38-db7c-3d5a-d3ce81da16d9.png)

policy tagのパスはpolicy tagの画面のコピーアイコンをポチってから取ってくると楽。
![スクリーンショット 2023-05-22 14.10.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3445119/739b8737-2729-2a0b-6249-fbc624263ce3.png)
nodistをアンインストールする（関連ファイル、パスも削除）【プロジェクトをUpdateしてく！-➀】

## 今回行った一連の流れ

➀nodistをvoltaへ変更　←今回ここをpick up☆
➁npm-check-updatesを導入
➂gulp-sassをgulp-dart-sassへ変更
➃bootstrapを使用したプロジェクトの場合、bootstrapのアップデート
 
 

## 経緯
新しいプロジェクトを任されることに。そのプロジェクトをクローンしたらnpx update-browserslist-db@latestのコマンドがnpx gulpで常にでてきてしまうことに気づき、さらに元々プロジェクトを担当していた人と開発環境が違ったためgulpファイルの追記と修正が必要になった。

以上のことから、「一連の流れ」を行うことになった。
上記の項目ごとに備忘録として記事を書くことにした。



## 前提

- windows
- nodistをパッケージマネージャーとして使用
- bootstrapバージョン4を使用
　
　
　
　
　
## 【nodistをvoltaへ変更】

### 《目次》
- nodistをアンインストール　←今回ここをpick up☆
- [voltaをインストール](https://qiita.com/kusaharajiji/items/d031daaed76e08485a8d)
- voltaのコマンドまとめ
　
　
　
　
　

### ＜nodistをアンインストール＞===============

#### 1.Windowsのマーク横、検索に「アプリと機能」を入力
![スクリーンショット 2023-05-22 133206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661441/f849748d-459a-40af-264c-d96cfb64dda4.png)
　

#### 2.アプリと機能の「このリストを検索」の欄に「Nodist」と入れ、アンインストールボタンを押す
![スクリーンショット 2023-05-22 133447.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661441/df5df35c-7298-5e02-244f-5d67fa8ca53b.png)

#### 3.POPがでて「Nodist Uninstall」と表示されればアンインストールが完了。

#### 4.これまでの作業で完璧に消えないので残骸を確認し削除

##### Nodistフォルダの削除
以下のNodistフォルダを削除。
C:\Program Files (x86)\Nodist

##### npm-cacheフォルダがあれば削除
npm-cacheフォルダがあれば削除。
C:\Usersユーザー名\AppData\Roaming\npm-cache

##### .npmrcフォルダがあれば削除
以下の.npmrcファイルがあれば削除。
C:\Users<ユーザ名>.npmrc

##### 環境変数にNodeに関するPathがあれば削除
Nodeに関するPathがあればそれを削除
探し方は以下。

➀検索で「システム環境変数の編集」を探し、開くためクリック
➁タブの「詳細設定」をクリック、環境変数(N)を次にクリック
![スクリーンショット 2023-05-22 135421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661441/f5dcbce0-4262-3b44-f229-58af7c352a23.png)
➂「Path」をクリックし、次に「編集(E)…」をクリック
![スクリーンショット 2023-05-22 135836.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661441/3ca2dc6e-1484-f45e-cba3-fb86341c1f18.png)
➃Node関連の変数があれば削除。
　nodeというワードが無いか確認しました。
　（今回実践した際はなかったです。）
![スクリーンショット 2023-05-22 140333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661441/4f3ba464-37c1-9072-a8c8-cd4acd5dc896.png)

#### 5.nodistの削除完了！
Windowアンインストールボタンでは完璧に削除できないようです。
Macもどうなんでしょうか。また、実践することがあれば追記したいです。
フォルダ削除系の作業は意外とあったので、確認必須です。
　
　
　
　
## ◆◆次回はvoltaのインストールです◆◆
#### 次回
[voltaをインストール【プロジェクトをUpdateしてく！-➁】](https://qiita.com/kusaharajiji/items/d031daaed76e08485a8d)

#### 参考URL

https://zenn.dev/longbridge/articles/53014b6f48f085
Dockerがコンテナを起動できないエラー(ポート番号がすでに使用されている)

os Windows
## エラー内容
Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:3306 -> 0.0.0.0:0: listen tcp 0.0.0.0:3306: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.
このエラーメッセージは、ポート番号がすでに使用されているため、Dockerがコンテナを起動できないことを示しています。具体的には、MySQLコンテナがポート番号3306を使用しようとしたところ、すでに他のプロセスがこのポート番号を使用しているため、Dockerがコンテナを起動できなかったということです。
## 原因
正規の手順でコンテナを終了させなかったためにポートが開きっぱなしだったこと。
## そもそもポートとは
コンピューターに接続された外部デバイスやネットワークとの通信を行うための仕組みです。ポートは、コンピューターのハードウェアやソフトウェアによって管理され、通信のために特定の番号が割り当てられます。イメージとしては門みたいなもの。
## 使用されているポートを確認する
```
Get-NetTCPConnection -State Listen
```
## ポートを閉じる
```
Stop-Process -Id (Get-NetTCPConnection -LocalPort <ポート番号> -State Listen).OwningProcess -Force
```
## おわりに
ポートはpcをシャットダウンすることでも閉じる。また、ポートの開きっぱなしはセキュリティ上よくない。ポートが開いている状態であれば、外部からの攻撃や不正アクセスのリスクがある。自分はあまりpcをシャットダウンしないので気を付けようと思った。
link_toについて（編集中）

~~~~index.html.erb
<% @cart_items.each do |cart_item| %>

<%= link_to "削除する", cart_item_path(cart_item), 
    method: :delete, data: { confirm: "本当に削除しますか？" },
    class: "btn btn-danger" %>

<% end %>
~~~~

 link_toメソッドに渡している２つ目の引数のcart_item_path(cart_item)というのもメソッドで、/cart_items/1のような指定したURLを表す文字列を返してくれます。cart_item_pathというメソッド名はどこからやってくるかというと、routes.rbで登録したルーティングのニックネーム(asで書いたやつ)+_pathという構造になっています。メソッドをどこかで定義するわけではなく、Railsがroutes.rbを読み、自動的に作ってくれる。
　 cart_item_pathメソッドへ(cart_item)を渡すことで、自動的にidを取り出し、/cart_item/1のようなURLを作ってくれます。とりあえず、link_toでaタグを作るのだな〜とぼんやり理解で問題ありません。

 ここを cart_item"s"_path(cart_item)と複数形にしてしまうと、　URLが　/cart_items.1 になってしまうので注意！！

~~~~routes.rb
  scope module: 'publics' do
    # カート内商品について
    resources :cart_items, only: [:index, :update, :create, :destroy] do
      delete 'destroy_all', on: :collection    
    end
  end
~~~~
作成されたものは以下になる

destroy_all_cart_items DELETE /cart_items/destroy_all(.:format)      publics/cart_items#destroy_all
                              cart_items GET    /cart_items(.:format)                                                                             publics/cart_items#index
                                         POST   /cart_items(.:format)                                                                             publics/cart_items#create
                               cart_item PATCH  /cart_items/:id(.:format)                                                                         publics/cart_items#update
                                         PUT    /cart_items/:id(.:format)                                                                         publics/cart_items#update
                                         DELETE /cart_items/:id(.:format)                                                                         publics/cart_items#destroy
IntelliJ2023でSelect Previous/Next Tabが動かなくなった人へ

# 事象
以下の環境下で `Select Next Tab` とかのショートカットが効かなくなりました。

- macOS Monterey(12.6.5)
- IntelliJ2023.1.2 (2022以前は動く)
- Google日本語入力の英数を使用 (ひらがなだと動く)

# 対処
keymapにてGoogle日本語入力を英数にした状態で同じショートカットを追加してどうにかしましたw
![shortcut.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36956/48f10917-f327-87d2-b5f3-4fa9858a2490.png)

# 原因
`⌘[`は英数とひらがなでショートカット複数登録できなかった。
おそらく英数とひらがなで `⇧[` の扱いが別になったのかな？
確かに波括弧`{`になるから扱い変わりそうな雰囲気はある。

それっぽいissueも見つけた。
https://youtrack.jetbrains.com/issue/IDEA-317458/Previous-Next-Tab-shortcut-conflicts-with-unknown-macOS-shortcut
同じ事象に遭遇してる人発見。
https://mkusaka.com/2023/04/04/intellij-tab-move-renew/
同じ事象かもしれないTweet発見。
https://twitter.com/emaggame/status/1645047391622680582
ルーティングにまつわるエトセトラ

CloudFormationでインフラ構築をしていたのですが、その際にルーティング周りの知識をだましだましここまで来たことを再認識したので、まとめてみようと思います。

## ルートテーブル
- 設定方法の違い
    - メインルートテーブル
    - カスタムルートテーブル
:::note info
メインルートテーブルはデフォルトのテーブル、カスタムルートテーブルは個々に設定したいときに使うルートテーブル
:::
   

- 設定対象の違い
    - サブネットルートテーブル
    - ゲートウェイルートテーブル
        - Transit Gateway ルートテーブル 
        - ローカルゲートウェイルートテーブル

:::note info
どのリソースにルートテーブルをアタッチするかによって、設定できる内容に違いがある。
サブネット：ルートテーブルは1：多の関係である。
:::
↑これ、ゲートウェイ：ルートテーブルの関係は公式に明記されてなかったので、ゲートウェイには複数のルートテーブルをアタッチできるということかもしれません。Transit Gatewayが複数アタッチできる感じがする。



## ルートアソシエイト
- ルートテーブルの関連付け
    - 作成したルートテーブルを、VPCやサブネットなどに関連付ける行為。
    - 具体的なAWSリソースではない
- エッジの関連付け
    - インバウンド VPC トラフィックをアプライアンスにルーティングするために使用するルートテーブル。ルートテーブルをインターネットゲートウェイまたは仮想プライベートゲートウェイに関連付け、アプライアンスのネットワークインターフェイスを VPC トラフィックのターゲットとして指定します。（AWSの公式サイトよりそのまま引用。何言ってるかよくわからない。関連付け＝ルートテーブルってこと？関連付け＝assosiationってリソースじゃない＝ルートテーブルではないと思う。）
    
↑これ、ゲートウェイにルートテーブルを関連付けることを指しているっぽい
> 上記のゲートウェイに関連づける場合は、特にエッジアソシエーションと呼ばれます。
https://dev.classmethod.jp/articles/what-is-vpc-ingress-routing/

> インバウンド VPC トラフィックをアプライアンスにルーティングするために使用するルートテーブル。

↑はIngress Routingを指していたのか。納得。(2023/05/24追記)

- 伝達 
    - ルートテーブルのルートが、ほかのルートテーブルに自動コピーされること
    - 英語ではpropagation

## ルート
- [送信先]
- [ターゲット] 
:::note info
送信先は最終到達地点。ターゲットはそこに行くまでに経由する地点。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661124/a4767b2d-0912-138e-8b02-1ac69deeb842.png)
上から4つ目ととかはインターネットゲートウェイ通ってるしこの表現でいいと思う。
ただ、ローカルってVPC内で完結するって意味になるけど、「ローカルルートを通って送信先に行く」っていうと、実際には何を経由しているのかがちょっとよくわからない。

## 感想
送信先とターゲットがややこしかった。ターゲットって最終目的地みたいな感じがするから、経由地点とかならいいのになと思った。

## 参考
https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/VPC_Route_Tables.html

https://note.com/ayaka_poo/n/n64d2ae4ec2f4

https://qiita.com/u-bayashi/items/d761d60c50f558a0a92f
SQLで特定のカラムの値を全て空にする方法

SQLを使用する際に、特定のカラムの値を全て空にしたいという状況はよくあります。本記事では、その操作をどのように行うかについて解説します。

# 基本的な操作
対象のカラムが tantou_code で、それがテーブル your_table_name に存在すると仮定しましょう。その場合、以下のように UPDATE 文を使用して tantou_code の値を NULL に設定します。

```sql:SQL
UPDATE your_table_name SET tantou_code = NULL;
```
上記のコマンドを実行すると、テーブル your_table_name のすべての行で tantou_code の値が NULL になります。

# 空文字列を設定する場合
一方で、tantou_code の値が空文字列 '' である必要がある場合は、次のように記述します：

```sql:SQL
UPDATE your_table_name SET tantou_code = '';
```
この操作により、テーブル your_table_name のすべての行で tantou_code の値が空文字列になります。

# 0の値のみを空文字列に設定する場合
この場合は、WHERE句を用いて設定できます。

```sql:SQL
UPDATE your_table_name SET tantou_code = '' WHERE tantou_code = 0;
```

# 注意点
これらの操作を行う前には、必ず適切なバックアップを取るか、または事前にテストを行ってから本番のデータに対して行うように注意してください。また、UPDATE 文はトランザクションの一部として実行することが多いです。何かエラーが発生した場合、ロールバックを行って元の状態に戻すことが可能です。

# まとめ
以上、SQLで特定のカラムの値を全て空にする方法について説明しました。SQLは非常に強力なツールですが、その力を適切に使うためには、その操作がもたらす影響を理解し、適切な対策を取ることが重要です。
分割統治法と動的計画法

## はじめに
アルゴリズムについての学習の中で「分割統治法」と「動的計画法」という言葉が出てきたが、これらの違いをすぐに忘れてしまうため自分用のメモとして記事に残す。

## 分割統治法とは
問題をより小さな部分問題に**分割**し、それらを個別に解くことで元の問題を解決するというアプローチ。

#### 分割統治法の特徴
- 一般的に再帰的に実装される
- 問題の解決は、下記3ステップで行われる
    1. 問題の分割
    2. それぞれの問題の解決
    3. 結果の結合
- 代表例は、クイックソート、マージソート、高速フーリエ変換（FFT）など

## 動的計画法とは
問題をより小さな部分問題に分解し、それぞれを一度だけ解くアプローチ。

#### 動的計画法の特徴
- 部分問題の解を記憶し、それを必要とする他の部分問題で再利用する
    ⇨同じ部分問題を何度も解くのを避け、計算効率を大幅に改善
- 下記の場合に特に有効
    - 問題が**最適部分構造**を持つ
（大きな問題の解が部分問題の解から構築できる特性）
    - 問題が**重複する部分問題**を持つ
（同じ部分問題が何度も出現する特性）

- 代表例は、フィボナッチ数列、ナップサック問題、最長共通部分列（LCS）など

## 分割統治法と動的計画法の違い
#### 部分問題の扱い方
`分割統治法` 部分問題は独立しており、それぞれが個別に解かれる
`動的計画法` 同じ部分問題が何度も出現することを前提とし、それらを再利用することで計算効率を改善する

#### アプローチ方法
`分割統治法` 再帰的なアプローチを取り、大きな問題を小さな部分問題に分割して解決
`動的計画法` 問題のサイズを徐々に増やしながら問題を解決する、ボトムアップのアプローチを取る

## 参考
https://atmarkit.itmedia.co.jp/ait/articles/1706/01/news166.html

https://www.momoyama-usagi.com/entry/info-algo-dp
js プロパティの呼び出し時にキー名に変数を使う

# 概要

- プロパティ呼び出し時のキー指定で変数を使う方法を簡単にまとめる

# 方法

- オブジェクト内のプロパティ呼び出しにはドット記法とブラケット記法の2種類がある。キー指定で変数を使う場合、はブラケット記法になる。
- 下記のようなオブジェクトが存在していたとする。

    ```javascript
    let infos = {
        'hoge' : {
            'id' : 1,
            'name' : 'ほげ'
        },
        'fuga' : {
            'id' : 2,
            'name' : 'ふが',
        }
    }
    ```

- infosのhogeのidの値を呼び出したい場合、下記のようになる。
    - ドット記法（念のため）


        ```javascrpit
        console.log(infos.hoge.id);
        ```

    - ブラケット記法

        ```javascript
        console.log(infos['hoge']['id']);
        ```

- キー`hoge`を変数`prefix`に格納してブラケット記法で呼び出してみる。

    ```javascript
    let infos = {
        'hoge' : {
            'id' : 1,
            'name' : 'ほげ'
        },
        'fuga' : {
            'id' : 2,
            'name' : 'ふが',
        }
    };

    const prefix = 'hoge';
    console.log(infos[prefix]['id']);
    ```
docker vscode

https://code.visualstudio.com/docs/containers/overview
https://code.visualstudio.com/docs/containers/quickstart-node
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

拡張機能をインストールして、imageをビルドしたら
https://code.visualstudio.com/docs/containers/quickstart-node

この記事のBuild the service imageを参考にして、attachをしました。
その後接続されたコンテナで、ファイルを編集出来るようになりました。
Unreal Engine 4 アクター、変数のサーバークライアント間通信

今回紹介するのが「Replicates」と「Replicate Movement」です。
![Replicate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3344915/bd09372c-5ef5-52e3-23fa-58a16fa63e58.png)

この２つをtrueにしておくだけで、サーバー側、クライアント側から
同じアクターの動きをさせることができます。
例えば、ダメージを与えた時に、プレイヤー側で変数が変更された時に
プレイヤー間で変更された値を共有することができます。

これがないとオンラインゲームを遊んでいる時に、自分からは相手のHPが減っているが、
相手から見ると、HPは減っていない状態になるので、しっかりtrueにしてあるか確認しておきましょう。

![スクリーンショット 2023-05-26 121248.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3344915/db3982b6-341d-1107-d76a-0ebd454db5b7.jpeg)
上の画像のようにすることで、下の画像のようになります。これで、サーバー上で実行する為、
相手もプレイヤーが行ったイベントを把握することができます。
![スクリーンショット 2023-05-26 121921.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3344915/a166c4a8-45f9-163c-4e85-c82a69d0493c.jpeg)

まとめ
オンラインゲームを作る時に値のズレもこれで解決できる！
wemosでwebsocket

# 概要
wemosでwebsocket、やってみた。
じゃんけん、やってみた。
webserver、立てて、ブラウザからアクセスする。
IPアドレスは、192.168.0.104です。
0 グー、1 チョキ、2 パー

# サンプルコード

```
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "WebSocketsServer.h"

const char * ssid = "****";
const char * password = "****";

ESP8266WebServer server;
WebSocketsServer webSocket = WebSocketsServer(50002);

char webpage[] PROGMEM = R"=====(
<html>
<head>
	<script>
		var Socket;
		function init() {
			Socket = new WebSocket('ws://' + window.location.hostname + ':50002/');
			Socket.onmessage = function(event) {
				document.getElementById("rxConsole").value += event.data;
			}
		}
		function sendText() {
			Socket.send(document.getElementById("txBar").value);
			document.getElementById("txBar").value = "";
		}
	</script>
</head>
<body onload="javascript:init()">
	<center>
	<h1>Jyanken</h1>
	<div>
		<input type="text" placeholder="0 gu, 1 choki, 2 par" id="txBar" onkeydown="if (event.keyCode == 13) sendText();" />
	</div>
	<br>
	<div>
		<textarea id="rxConsole" rows="13" cols="50"></textarea>
	</div>
	</center>
</body>
</html>
)=====";

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
	int a = -1,
		b;
	b = rand() % 3;
	if (type == WStype_TEXT)
	{
		for (int i = 0; i < length; i++)
			Serial.print((char) payload[i]);
		Serial.println();
		String text = (char *) payload;
		a = payload[0] - 48;
		char c0[] = "aiko";
		char c1[] = "antano kati";
		char c2[] = "antano make";
		switch (a)
		{
		case 0:
			switch (b)
			{
			case 0:
				webSocket.broadcastTXT(c0, sizeof(c0));
			break;
			case 1:
				webSocket.broadcastTXT(c1, sizeof(c1));
			break;
			case 2:
				webSocket.broadcastTXT(c2, sizeof(c2));
			break;
			default:
			break;
			}
		break;
		case 1:
			switch (b)
			{
			case 0:
				webSocket.broadcastTXT(c2, sizeof(c2));
			break;
			case 1:
				webSocket.broadcastTXT(c0, sizeof(c0));
			break;
			case 2:
				webSocket.broadcastTXT(c1, sizeof(c1));
			break;
			default:
			break;
			}
		break;
		case 2:
			switch (b)
			{
			case 0:
				webSocket.broadcastTXT(c1, sizeof(c1));
			break;
			case 1:
				webSocket.broadcastTXT(c2, sizeof(c2));
			break;
			case 2:
				webSocket.broadcastTXT(c0, sizeof(c0));
			break;
			default:
			break;
			}
		break;
		default:
		break;
		}
	}
}
void setup() {
	pinMode(LED_BUILTIN, OUTPUT);
	digitalWrite(LED_BUILTIN, LOW);
	WiFi.begin(ssid, password);
	Serial.begin(115200);
	while (WiFi.status() != WL_CONNECTED)
	{
		Serial.print(".");
		delay(500);
	}
	Serial.println("");
	Serial.print("IP Address: ");
	Serial.println(WiFi.localIP());
	server.on("/", []() {
		server.send_P(200, "text/html", webpage);
	});
	server.begin();
	webSocket.begin();
	webSocket.onEvent(webSocketEvent);
}
void loop() {
	webSocket.loop();
	server.handleClient();
}




```

# 実行結果


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9c7d852c-2432-91fa-ebb9-686b83180f4c.png)



以上。
読書研修ーWebを支える技術　第14章JSON

## JSONとは
JavaScript Object Notationの略で、JavaScript記法でデータを記述できる。
JSONのシンプルさから多くの言語がライブラリを用意してるため、プログラミング言語間でデータを受け渡せる。
* メディアタイプ：「application/json」
* 拡張子：「.json」
#### 用意されたデータ型：
* オブジェクト
* 配列
* 文字列
* 数値
* ブーリアン
* null
#### 以外のデータ型：
* 日時:
UNIX時間の場合、もしタイムゾーンを扱う必要なら、JavaScriptのDateクラスのtoString()関数で出力した文字列が利用できるけど、より標準的なフォーマットはISO 8601フォーマットで`"2023-05-2212:31:43+09:00"`になる。

* リンク：単純にURIを文字列値として持つのが最も簡単で、絶対URIが無難です。
例：`{
"href" :"http://example.jp/foo/bar"
}`

## JSONPによるクロスドメイン通信
JSONPはJSON with paddingで、JSОNPは、プラウザのこの性質を利用してクロスドメイン通信を実現する手法です。
### JSONPか必要の背景ーークロスドメイン通信の制限
Ajax で用いる XMLHttpRequest というJavaScriptのモジュールは、セキュリティ上の制限から JavaScriptフアイルを取得したのと同じサーバとしか通信できません。
不特定多数のドメインに属するサーバにアクセスすることを「クロスドメイン通信」(ドメインをまたがった通信の意)と呼びます。しかし、複数のドメインのサーバと通信できず、単一のドメインのみと通信をしなければならないのは大きな制限です。
### `<script>`要素による解決
XMLHttpRequestではクロスドメイン通信ができませんが、HTMLの`<script>`要素を用いると、複数のサイトから JavaScriptフアイルを読み込めるのです。
### コールバック関数を活用するJSONP
 JSONP ではオリジナルのJSONをクライアントが指定したコールバック関数名でラップして、ドメインの異なるサーバからデータを取得します。
## ハイパーメディアフォーマットとしてのJSON
JSONをハイパーメディアフォーマットとして使うためには、リンクを表現するメンバをきちんと入れる必要があります。ほかのリソースとの関係を考慮して、リンクをしっかりと入れた設計をすることが重要です。
社内でRust and WebAssemblyの勉強会をした話

## 勉強会って難しい
社内で勉強会やっていますか？
勉強会っていいですよね。日々業務に追われがちで新しい技術に触れる機会が少ない時も定期的に勉強会があることで息抜き&ドメイン関係なく技術に向き合うことで知的好奇心が満たされます。

ですがテーマを選定するのはなかなか難しいです。
特にメンバー数が多くなってくるとそれぞれの技術的関心が一致しない&タスク状況によって参加しずらいケースが発生しやすくなるのでなかなか勉強会を継続して開催するのは難しくなってきます。

そこで今回はチーム内で
- 事前準備不要
- 隔週一時間で開催し一つのテーマを2ヶ月（計4回）かけて勉強する (結果的に内容が濃く5回になってしまいましたが)
- テーマは多数決で決める

といった形式で勉強会を始めてみることにしました。
最終的に選ばれたテーマは「Rust+WebAssembly」です。こちらのチュートリアルを主に進めていくことになりました。

https://rustwasm.github.io/docs/book/introduction.html

選ばれた理由としては「フロントエンドチーム、バックエンドチーム両方が関心のあるジャンル」、「大体4時間くらいで終わりそうな内容」という点で決まりました。


## 勉強会の流れ
形式としてはオンライン上でGoogle meetsを繋ぎながらチュートリアルを進めていきます。
4.1 ~ 4.10と10章ほどに分かれているので大体毎回3章ずつ進めることにしました。

### 第一回: 4.1 ~ 4.2章
この章では環境構築とRustでHello worldを実装しそれをwasmとしてbuildしブラウザ上に「Hello World!」を表示させるのが主な内容です。
環境構築でハマったメンバーも多く、localマシンの環境によってはなかなか解決できないエラーもあり辛かったです。


### 第二回: 4.3 ~ 4.4章
今回の勉強会で学んでいく「コンウェイのライフゲーム」というものの内容を学んでいきます。
以下のwikipediaがよくまとめられているということで公式にも引用されています。

https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B2%E3%83%BC%E3%83%A0

4.4章の「implementing-conways-game-of-life」で実際にライフゲームのロジックを実装していくのですがRustをはじめて触れる人にとってはかなり難易度が高いように感じます。

Rustのコード自体の解説はそこまで多くないのでRustの基礎的な知識が求められます。
この4.4章の内容がかなりボリュームがあり想定より時間を割くことになりました。

### 第三回: 4.4 ~ 4.5章
4.5章ではRustで実装したコードのテストの書き方について解説しています。
この章はそこまでボリュームは少ないですが、4.4章で実装したプログラムを動かすと重すぎて画面が固まる、という問題が発生しました。

Rustは人類には早かったのでしょうか、というのは嘘でこのチュートリアルだとRustのloop処理を動かし画面を描画することになるのでブラウザに負荷がかかりマシンのCPUやメモリを大幅に消費してしまいます。
実際にwasmをサービスとして提供する際はあまりにも高負荷な画面描画処理を実行するのは避けたほうがよさそうです。

### 第四回: 4.5 ~ 4.7章
4.5, 4.6章ではdebuggerとconsoleを使ったブラウザでのデバッグ方法を紹介しております。
そこまで実装量としてはボリュームはないですがRustのテストの書き方をなんとなく触れることができ勉強になりました。

4.7章では実際にコンウェイのライフゲームをブラウザで遊べるようにクリックすることで初期パターンを作成できるようになりました。
自分でパターンを作成して実際にブラウザで動かすと達成感があります。ですが前述の通りブラウザが固まってしまう可能性があるので注意が必要です。

### 第五回: 4.8 ~ 4.10章
4.8章ではFPS(frame per second)と呼ばれる1秒間に画面が何回更新されるかを画面に表示しブラウザのPerformance測定機能を利用して描写速度を上げるためのチューニングをしていきます。
非常に興味深い章だったのですがブラウザが重すぎてchromeのPerformance測定ツールが固まってしまい、FPS表示だけやることにしました。

4.9章ではwasm-pack buildにて出力される.wasmファイルの圧縮をします。
LTO(Link Time Optimization)と呼ばれるオプションを使用し出力されるファイルサイズが減ることを確認できました。

4.10章ではnpmにアカウントを作成し実際にnpm packageとしてpublishしていきます！
私が実際にデプロイしてみたのはこちらになります。チュートリアルとはいえnpm packageとして公開できるとなんだか誇らしい気持ちになりますね。案外あっさりできて感動しました。

https://www.npmjs.com/package/wasm-game-of-life-c0ridrew


## やってみた感想
1. Rustの知識がないと辛い
前述した内容ですがこのチュートリアルはRust×Web AssemblyにfocusしていてRustの知識がある前提で進められます。ですのでRustの知識がない場合は勉強会のテーマとしては難しいと感じました。

2. 事前準備なしではキツい
参加者が手を動かして進めていく形式の勉強会ではある程度事前に各々が環境構築や前回終わらなかった箇所を完了しておかないと挫折しやすいです。
やはり勉強会ではある程度の準備をして開催した方が勉強会の時間を有意義に使えると感じました。

3. ブラウザが固まるのがしんどい
こちらも前述した内容ではありますがオンラインで画面を共有して開催する勉強会形式だと画面が固まってしまうと辛いです。
wasmを実行するとmeetsが落ちてしまいパソコン自体も固まり再起動が必要なメンバーもいました。

4. とはいえやってよかった
上記ネガティブなことを書いてしまいましたが総じてやってよかったです！
そもそもRustもWeb Assemblyも聞いたことはあるが実際に触ったことはないメンバーが多かったのでどのような技術か(パソコンがクラッシュする体験を通して)身をもって体験することができました。



## 今後に活かしたいこと
弊社では継続して勉強会を開催予定なので感想に書いた1~3のことを意識しつつ勉強会のテーマ&形式を決めていこうと思います。
やはり興味のある技術に触れ知的好奇心を満たしていくのが醍醐味ではあると思うので今後もアンテナを高くしてテーマ探しをしていこうかと思います！
(宣伝: 弊社では一緒に勉強会に参加してくれるエンジニアを募集しております)
Kubernetesでネットワークの作成

## はじめに
Kubernetesにおいてpodに対して複数のネットワークを適用したい場合がある。以下のマニフェストを適用してk8s内のネットワークを作成しよう。

## CNIの設定ファイル
```
apiVersion: "k8s.cni.cncf.io/v1"
kind: NetworkAttachmentDefinition
metadata:
  name: frontend-network
spec:
  config: '{
      "cniVersion": "0.3.1",
      "name": "frontend-network",
      "type": "bridge",
      "bridge": "frontend-bridge",
      "isGateway": true,
      "ipam": {
          "type": "host-local",
          "subnet": "10.244.0.0/16",
          "routes": [
              { "dst": "0.0.0.0/0" }
          ]
      }
  }'
```

##### 参考文献
https://rheb.hatenablog.com/entry/multus_introduction
PostgreSQLのメタデータの置き場所

以下に入っている。

- `information_schema` スキーマ内のテーブル群 ([ref](https://www.postgresql.jp/document/8.1/html/information-schema.html)) = SQL標準。
- `pg_catalog`スキーマ内の`pg_xxx`テーブル群

TODO: 他にもあるのか調べる
TODO: 実際にテーブル一覧を書き出してこのページに貼り付ける
Ubuntu22.04 + KVM + Cockpit

## 構築手順
### LVMを構築してる場合
```
$ sudo lvextend -l +100%FREE /dev/mapper/ubuntu--vg-ubuntu--lv
$ sudo resize2fs /dev/mapper/ubuntu--vg-ubuntu--lv
```


### 仮想化対応CPUか確認
```
$ egrep -c '(vmx|svm)' /proc/cpuinfo
```

### KVMの構築
```
$ apt install -y qemu-kvm virt-manager libvirt-daemon-system virtinst libvirt-clients bridge-utils
```

### libvirtの構築
```
$ sudo systemctl enable --now libvirtd
$ sudo systemctl start libvirtd
$ sudo systemctl status libvirtd
```

### 一般ユーザーでkvmを操作できるようにする
```
$ sudo usermod -aG kvm $USER
$ sudo usermod -aG libvirt $USER
```

### cockpitのセットアップ
```
sudo apt install cockpit -y
sudo systemctl status cockpit
sudo systemctl start cockpit
sudo systemctl status cockpit
```
### アクセス
https://{IPアドレス}:9090/



### netplanからNetworkManagerに変更
```
$ sudo vim /etc/netplan/00-installer-config.yaml 
```
以下のように変更する(version以外をコメントアウトし、renderer: NetworkManagerを追加)

```
# This is the network config written by 'subiquity'
network:
  #  ethernets:
  #  enp1s0:
  #    dhcp4: true
  renderer: NetworkManager
  version: 2
```
## ネットワークの設定を適用
```
$ sudo netplan generate
$ sudo systemctl restart NetworkManager
```

## bridgeネットワークの作成
WebGUIから設定。ブリッジの作成時、ネットワークの疎通が取れなくなる。そのため、DHCPがない環境において、ホストのネットワークにブリッジを参加させる構成の場合は、一度ブリッジに対してホストネットワークのIPを割り当ててから、ブリッジを作成しなければならない。


## 仮想マシンプラグインの設定
```
$ sudo apt install cockpit-machines
```

##### 参考文献
https://qiita.com/ku_suke/items/269dfecec398187aed77#%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E7%AE%A1%E7%90%86%E3%82%92networkmanager%E3%81%AB%E5%A4%89%E6%9B%B4
「Reactとは」をおさらいしてみよう！



Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリで、Facebookによって開発されました。
その効率性、柔軟性、そしてシンプルさから、世界中の開発者から広く愛されています。
この記事では、Reactの概要、主な特徴、利点、欠点、そして実際のアプリケーションでの使用例について説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987057/b974895e-9736-b299-8ce3-f425a49843e8.png)


## Reactの概要

Reactは、2013年にFacebookによって公開されました。
それ以来、その人気は急速に高まり、現在では最も人気のあるJavaScriptライブラリの一つとなっています。Reactは、シングルページアプリケーション（SPA）の開発に特に適しています。

## Reactの主な特徴

Reactの主な特徴は次のとおりです：

- **コンポーネントベース**：Reactはコンポーネントベースのライブラリで、UIを再利用可能な部品（コンポーネント）に分割します。これにより、コードの再利用性と可読性が向上します。

- **仮想DOM**：Reactは仮想DOMを使用します。これは、実際のDOMの複製で、Reactが変更を追跡し、必要な部分だけを効率的に更新するためのものです。

- **JSX**：ReactはJSX（JavaScript XML）を使用します。これはJavaScriptの構文拡張で、JavaScript内でHTMLのようなコードを書くことができます。

## Reactの利点

Reactの利点は次のとおりです：

- **効率性**：Reactの仮想DOMは、アプリケーションのパフォーマンスを向上させます。

- **柔軟性**：Reactはライブラリであるため、他のライブラリやフレームワークと組み合わせて使用することができます。

- **コミュニティとリソース**：Reactには大きなコミュニティと豊富なリソースがあります。これにより、問題の解決や学習が容易になります。

## Reactの欠点

Reactの欠点は次のとおりです：

- **学習曲線**：Reactは初心者にとっては少々難易度が高いかもしれません。特に、JSXや高度な概念（例えば、フックやコンテクスト）を理解するのは時間がかかるかもしれません。

- **高速な進化**：Reactは急速に進化しているため、最新のベストプラクティスや機能を追いつくのは大変かもしれません。

## Reactの使用例

Reactは、FacebookやInstagramなどの大規模なウェブアプリケーションから、スタートアップのプロジェクトまで、さまざまな規模のプロジェクトで使用されています。
また、React Nativeを使用すれば、Reactの知識を活かしてモバイルアプリケーションを開発することも可能です。

Reactはフロントエンドの中でかなり人気のフレームワークで、その機能を理解し、適切に活用することで、効率的で柔軟なアプリケーションを作成することができます。
Reactは学習曲線があるかもしれませんが、その利点を十分に享受することができます。
CSSのスタイルについて

## ヘッダーを作ってみる①

htmlのコードはこんな感じ

```index.html
   <div class="header">
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>
```


**まずは＜li＞の黒点を外すところから！**

``` stylesheet.css
li {
 list-style: none;
}
```

これでリストの黒点を外すことができた。

**次にリストの中身を横並びにする**
floatプロパティを使うことで、指定した要素を横並びにすることができる。

```stylesheet.css
li {
 list-style: none;
/*ここにfloatプロパティを追加*/
 float: left;
}
```
「float: left;」を使用することによって要素が左から順に横並びになる。

**ロゴとリストを横並びにする**

```stylesheet.css
.header-logo{
  font-size: 36px;
  float: left;
}
```


＜li＞タグの黒点を外して横並びにするまでやってみました。
次回はこの続きから
見やすいパワポの作り方

# 見やすい資料を作りたい
業務で勉強会の資料を作るにあたって、気にしていることをまとめてみました。

## 色とデザイン
色にはイメージがあります。
赤だったら情熱的、青だったら理性的……。
色のイメージは見る側にとってかなり大きな影響を与えるので、それに沿った色遣いにします。

- 興奮色（明度、彩度が高い）
- 鎮静色（明度、彩度が低い）

個人的な好みもあるかと思いますが、勉強会、というところから、落ち着いて資料を見ていただきたいので、青や緑などの鎮静色を今回は選びました。

ベースとなる色を鎮静色にしたところで、パワーポイントのデザインです。
ごちゃごちゃしていると内容に目がいかなくなるので、シンプルに。
ただ、勉強会ということもあり、あまりかっちりフォーマルにもしたくないという意図もあり、少し色味が出るものを選びました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3426437/63d5cecb-c605-f1cb-ca74-c0baf2ee1abf.png)

## 文字の配置
デザインにおける4つの基本原則に気を付けて文字を配置していきます。

### 4つの基本原則
- 近接
- 整列
- 反復
- コントラスト


### 近接
簡単に言うと、関連する項目をまとめてグループ化する、ということです。
関連しない情報は近づけない、とも言います。

例えば
```
A
subA
B
subB
C
subC
```
これだけだとなにが関連していて、まとまっている情報なのか分かりづらいです。
なので、
```
A
subA

B
subB

C
subC
```
関連する情報は近くに、関連しない情報の間には空行をいれて離す、ということをします。

パワポの資料でも同じことで、箇条書きにするときも、どの項目が関連しているかによって、空行を設ける、などしていきます。

### 整列
1枚のスライドすべての項目を、意識的に配列する必要があります。
例えば
```
A  C
 E
D  B
```
こんな風に要素が並んでいたら、どこから読めばいいかわからなくなります。
せっかく分かりやすく箇条書きにしても、散らばっていたら分かりづらいです。
なので、
```
A
B
C
D
E
```
と整列させる必要があります。
各アルファベットの左側に見えない線があり、それに沿って整列しているのが分かります。
要素ごとに、関連するものはきっちりと整列する必要があります。

### 反復
一貫性、とも読み替えられます。
要素を並べる際、このように並んでいたらどうでしょうか。
```
A
subA
B
subB
C
subC
```
整列もされていますが、ちょっと読みづらいです。
同じ要素は同じインデントに、とまとめるだけで見やすくなります。
```
A
 subA
B
 subB
C
 subC
```
子要素はインデントを一つ下げて、親要素にぶら下げるだけ。
これをするだけで一貫性がもたれて、何が関係しているのか見やすくなります。

### コントラスト
個人的にとても悩む部分です。
近接、整列、反復はそれとなくできると思いますが、コントラストが一番難しいと思っています。
ここまでの3つの要素を実際にやってみたスライドが以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3426437/2f540df6-fdf9-5b0f-d47b-aa9e6bcc6b9c.png)
見にくくはないものの、少々合点がいきません。
コントラストは要素を並べるだけでなく、何が重要かをきっちりを分けることが求められます。
太字を使ってコントラストをつけてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3426437/1ab98962-ef29-3cfc-26da-f526a1a0cb6a.png)
これをするだけで見やすくなりました。
このように、見た目で太字にする、色を変える、などをすると、より見やすいスライドが出来上がります。

## 中身の書き方
デザインはこれで良し、となると問題は中身です。
どういった用途のスライドを作るかによりますが、以下のことを気を付けています。

- ですます調はやめる
- なるべく文章は簡潔に

スライド自体に文章をずらずらと入れると、それだけで視認性が低くなるので、なるべく簡潔に、分かりやすく書くことを心がけています。
補足するべき内容は発表の際に口頭で言い、その資料だけ見たときに分かる資料になっていればいいと思います。
上記のことから、ですます調は惰性になるため、行いません。

# 最後に
以下のことを気をつければ、見やすいパワポが作れます。

- 近接
- 整列
- 反復
- コントラスト
- 中身の文は簡潔に

皆様もよい資料作りの日々を。

## ちなみに
個人的にスライドにイラストを入れるのは難しいと感じています。
その内容に即したもの、かつ、文章を邪魔しないもの、と考えるとかなりハードルが高いかと……。
使いどころには気をつけたいですね。
Kubernetesクラスタを爆速で再作成

## 
Kubernetesのクラスタを作成した時に、kubeletやkubeadm作り直したい時がある。そんな時は以下のスクリプトを回す事によってクラスタをリセット、再作成が出来る。


```
#!/bin/bash
cd `dirname $0`

rm /home/yamato/kubetoken
KUBENET="10.245.0.0/16"
export KUBECONFIG=/etc/kubernetes/admin.conf
source ~/.bashrc



kubectl delete -f https://raw.githubusercontent.com/projectcalico/calico/v3.25.0/manifests/tigera-operator.yaml
timeout 30 kubectl delete -f /home/yamato/custom-resources.yaml

kubeadm reset --force
#systemctl stop kubelet
#rm -rf /etc/kubernetes/
#rm -rf ~/.kube/
#rm -rf /var/lib/kubelet/
#rm -rf /var/lib/cni/
#rm -rf /etc/cni/
#rm -rf /var/lib/etcd/
#iptables -F && iptables -X
#systemctl start kubelet


sleep 10

rm -r /etc/cni/net.d
containerd config default | tee /etc/containerd/config.toml
systemctl restart containerd




kubeadm init --cri-socket=/run/containerd/containerd.sock --pod-network-cidr=10.245.0.0/16 | tail -n 2 > /home/yamato/kubetoken
sleep 5
export KUBECONFIG=/etc/kubernetes/admin.conf
source ~/.bashrc
kubectl delete -f https://raw.githubusercontent.com/projectcalico/calico/v3.25.0/manifests/tigera-operator.yaml
kubectl delete -f /home/yamato/custom-resources.yaml
kubectl create -f https://raw.githubusercontent.com/projectcalico/calico/v3.25.0/manifests/tigera-operator.yaml
sleep 10
rm /home/yamato/custom-resources.yaml
wget -P /home/yamato/ https://raw.githubusercontent.com/projectcalico/calico/v3.25.0/manifests/custom-resources.yaml
sed -e "s#192.168.0.0/16#$KUBENET#g" -i /home/yamato/custom-resources.yaml
kubectl create -f /home/yamato/custom-resources.yaml
sleep 30

kubectl taint nodes --all node-role.kubernetes.io/control-plane-
kubectl taint nodes --all node-role.kubernetes.io/master-
kubectl taint node --all node.kubernetes.io/not-ready:NoSchedule-
```

export KUBECONFIG=/etc/kubernetes/admin.conf
source ~/.bashrc

watch kubectl get pods -n calico-system


##### 参考文献
https://blog.turai.work/entry/20220729/1659055307
https://docs.tigera.io/calico/latest/getting-started/kubernetes/quickstart
【競プロ】Python3 標準入出力の簡略化

# はじめに
競技プログラミングでは標準入出力を使うことがあり、コーディングで毎回`int(input())`だの`list(map(int,input().split()))`とタイプするのが非常に面倒です。
タイプミスで閉じカッコが足りなかったり余計だったりしたまま実行してしまう、というポカミスも多いので、いっそ関数化した方が（個人的には）楽かなと思ったので作成しました。
# リスト
コーディング中に関数名を忘れやすいので(ぉぃ)、最後にまとめて三重引用符コメントとして記述しています。
解答コードはこの下から書き始めると良いでしょう。
数値を扱う問題のみ考慮に入れました。文字列を扱う問題はまたの機会に。
```python:コード
# coding: utf-8
def int_input():
    return int(input())


def multi_int_input():
    return map(int, input().strip().split())


def line_to_int_list():
    return list(map(int, input().strip().split()))


def input_to_n_lists(n: int):
    result = []
    for _ in range(n):
        result.append(line_to_int_list())
    return result


def join_list_to_str(l: list):
    return " ".join(list(map(str, l)))


"""
int_input()             数値を一つ入力
multi_int_input()       数値を複数入力
line_to_int_list()      一行のスペース区切りデータを一次元リストに格納
input_to_n_lists(n)     n行のスペース区切りデータを多次元リストに格納
join_list_to_str(l)     一次元数値リストlをスペース区切り文字列に変換
"""
```
# 動作確認
```python:入力コードと出力コード
n = int_input()
x, y, z = multi_int_input()
a = line_to_int_list()
m = int_input()
q = input_to_n_lists(m)

print(n)
print(x,y,z)
print(a)
print(join_list_to_str(a))
print(m)
print(q)
```

```:標準入力
6
23 4 89
34 8 29 3 23 57 1 44 28 40
5
0 2
1
2
0 5
0 29
1
2
```
```:実行結果 - 標準出力
6
23 4 89
[34, 8, 29, 3, 23, 57, 1, 44, 28, 40]
34 8 29 3 23 57 1 44 28 40
5
[[0, 2], [1], [2], [0, 5], [0, 29]]
```
# おわりに
今回のコードはpaizaやAtCoderの問題を意識しました。解答アルゴリズムの考案はともかく、データ受け渡し方法を考えすぎてタイムロスするのはキツイですね…

他の競技プログラミングサイトのPython解答コードでは、異なる仕様を見かけます。
* LeetCode
    * クラス化されている、メソッド名・引数があらかじめ決まっている
* HackerRank
    * 標準入力部分はコード化済み、出力もリスト形式のままで良い（スペース区切り文字列にしなくて良い）
    * `if __name__=='__main__':`で始まる点は最初面食らった

ともあれ、まずはアルゴリズムの勉強ですね、はい。
**いやその前に`==`と`=`を間違えたり、for文やwhile文、if文の`:`を忘れたりするのがまずいな(爆**
js 変数に入った文字列をオブジェクトのキーに設定する

## 概要

- 予め変数に格納した文字列をオブジェクトのキーとして設定する方法を簡単にまとめる。

## 方法

- 下記のように、キー部分を`[]`で囲むことで変数が展開されて、変数の中身をキー名として設定する事ができる。

    ```js
    let keyStr = 'keyName';

    let infos = {
        [keyStr] : 'value',
    };

    console.log(infos);
    ```
TypeScriptである文字数の文字列を生成する

文字数制限をテストするために適当な文字列が欲しい場合

```typescript
"a".repeat(1000)
```
"a"を1000回足し合わせている

ちょろっと調べても出てこなかったので、string型で適当に探してたら発見した
（この書き方はkotlinでもできる）

ランダム生成ではないが、文字数制限だけをテストしたいのであればこれで十分そう
RealmStudioでRealmファイルを開く

## RealmStudioのダウンロード
https://www.mongodb.com/docs/realm/studio/#std-label-realm-studio

## RealmStudioでRealmファイルを開く
![スクリーンショット 2023-05-22 11.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245300/d0495770-71c8-a89d-d0e7-4b39e1586974.png)

Realmファイルを上記ウィンドウにドラッグ＆ドロップすればファイルを開くことができる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245300/72e335a1-98d0-34ff-01eb-a1fc0e45d601.png)


### Realmファイルのパスの取得方法
https://www.mongodb.com/docs/realm/studio/open-realm-file/

```
// Get on-disk location of the default Realm
let realm = try! Realm()
print("Realm is located at:", realm.configuration.fileURL!)
```

Simulatorだと良いかもです
HTMLの見出しと段落

## HTMLの見出しと段落

### 見出し
**＜h1＞～＜h6＞**まである
hはheading(見出し)の略。

<h1>これはh1です
<h2>これはh2です
<h3>これはh3です
<h4>これはh4です
<h5>これはh4です
<h6>これはh6です


上記のようにこんな感じに表示されて＜h1＞が一番大きな見出し
＜h6＞が一番小さな見出しになる。


### 段落
段落を表すのは**＜p＞**要素
pはparagraph(段落)の略。


## 見出しと段落
見出しの大きさや重要性に応じて使い分けていく。
見出し以外の文に関しては＜p＞要素を用いていく。


## コメント
**＜!-- --＞**で囲んだテキストのことを「コメント」と呼ぶ。
コメントとして書かれているテキストはブラウザ上には表示されないので、メモとして使うことができる。

誰が見ても何が書いてあるのかわかるようにするためにも
コメントは適切に書いておくと分かりやすい！


## リンクの作成
リンクを作成するには**＜a＞**要素を使う。
テキストを＜a＞タグで囲むことで、簡単にリンクを作ることができる。
実際に表示されるのは、＜a＞タグで囲まれた部分。

要素にリンク先を指定するには、href属性を追加する必要がある。　　
**＜a href="URL"＞ここに＜a＞**
というように書くことで、飛ばしたいページへのリンクを作ることが出来る。
実際にブラウザで表示されるのは「ここに」というところだけ。　　

## 属性の書き方
HTMLでは、属性が数多く存在している。
これらは、開始タグの中に記述していく。
値を指定する際は、ダブルクォーテーション（”）で囲ってあげる。

##  画像を表示させる
画像の表示には**＜img＞**要素を使う。
**＜img src="URL"＞**
のように、src属性のurlの部分に画像のリンクを指定することで、画像が表示される。
＜img＞要素はテキストを囲むことがないため、終了タグも必要ない。

## リストを作成する
- HTML
- CSS
- Ruby

このようなリストを作るには**＜li＞**要素を使う。
箇条書きにしたいテキストをそれぞれ＜li＞タグで囲むことでリストを作ることができる。

**＜ul＞**要素について
**＜li＞**要素は、囲む要素によって種類が変わるという特徴を持っている。

**＜ul＞**で囲むと、**黒点**が先頭につく。
**＜ol＞**で囲むと、**数字**が連番でつく。


要素を要素で囲むことを**入れ子**と言い、囲む方の要素を
**親要素**、囲まれる要素を**子要素**と呼ぶ。





こんな感じで見出しだったり段落を作ったり画像を入れたりすることが出来る。
まだまだたくさんタグや属性があるけど今回はこの辺で💭
ありがとうございました！
ABC302 - B - Find snuke 自己解法

# 問題

https://atcoder.jp/contests/abc302/tasks/abc302_b

# 考察
2次元のマス目の中から特定の文字列を探し出すという問題です。
H,Wともに100以下であることから、あり得るパターンをすべて調べても実行時間制限以内に実行することができます。
実装は大変かもしれないですが全パターンを調べていきましょう。
私の場合、始点と方向をfor文で順番に定めて、"snuke"という文字列を探しました。

# 提出コード(コンテスト後)

https://atcoder.jp/contests/abc302/submissions/41617480

ご不明点などがあれば教えていただけると幸いです。
CSSを弄っていたらマージンの相殺を経験した話

# はじめに

先日、HTMLとCSSの学習をしていたら意図しない所で躓いてしまいました。"**マージンの相殺**(Margin Collapsing)"という現象でした。そこで今回はこの現象について解説したいと思います。

# マージンの相殺とは？

マージンの相殺とは、垂直方向に隣接する2つのマージンが重なってしまう現象のことを言います。以下に例を示します。

```
.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}
```

上記のようなコードでは、.box1と.box2のマージンが相殺し、合計50pxではなく、**大きい方のマージンの値30pxが適用される**ことになります。

# マージンの相殺を解決する方法
## 1：Flexを利用する
Flexコンテナ内のアイテム間にはマージンの相殺が発生しないため、これを利用することで問題を解決することができます。

```
.container {
  display: flex;
  flex-direction: column;
}

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}
```

上記のコードでは、display: flexとflex-direction: columnを追加することで、.box1と.box2はFlexコンテナのアイテムとなり、マージンの相殺は発生しません。その結果、.box1と.box2の間には合計で50pxのマージンが適用されます。

## 2：Overflowを利用する
もう一つの方法として、overflowプロパティを利用する方法があります。overflowをautoまたはhiddenに設定することで、マージンの相殺を防ぐことができます。

```
.container {
  overflow: auto;
}

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

```

上記のコードでは、overflow: autoを追加することで、.box1と.box2のマージンの相殺が解消され、合計で50pxのマージンが適用されます。

# まとめ
この記事を書いていて、過去にも同じことがあったかもしれない・・・と実は感じていました。だた、言葉自体を知らなかったことと、どこが原因でうまくいかないのかがわからない状態でした。言葉自体がわかればあとは調べられるんですが、そこまでの道のりが長いですよねぇ〜。。。

この記事が皆さんのCSSトラブルシューティングの参考になれば幸いです。
AS番号やGeo Locationを無料で取得可能なサービス(ipinfo.io)

docsは[こちら](https://ipinfo.io/developers)。
有償Planに申し込めば、もっと多くの情報が取得できる。

```txt:IPアドレス(8.8.8.8)に紐づく情報一般の取得
# curl https://ipinfo.io/8.8.8.8
{
  "ip": "8.8.8.8",
  "hostname": "dns.google",
  "anycast": true,
  "city": "Mountain View",
  "region": "California",
  "country": "US",
  "loc": "37.4056,-122.0775",
  "org": "AS15169 Google LLC",
  "postal": "94043",
  "timezone": "America/Los_Angeles",
  "readme": "https://ipinfo.io/missingauth"
```

```txt:IPアドレス(8.8.8.8)に紐づくAS番号のみを取得
# curl https://ipinfo.io/8.8.8.8/org
AS15169 Google LLC
```
KVMのイメージの容量圧縮

## イメージ圧縮
KVMの仮想マシンを操作している間にイメージのファイルが肥大化してしまう事が多々ある。その場合以下の手順を踏むことでイメージを圧縮する事が出来る。

## 手順
```
sudo qemu-img convert -c -f qcow2 -O qcow2 /var/lib/libvirt/images/win7{,_new}.qcow2
```
読書研修ーWebを支える技術　第13章AtomPub

## Atom Publishing Protocolとは何か
### AtomとAtomPub
* Atom：データフオーマットの規定(フィード、エントリ)
* AtomPub：Atomを利用したリソース編集プロトコルの規定

### AtomPubの意義
AtomPub以前にもプログを編集するためのプロトコルは存在しました。
AtomPubは、汎用的なWeb APIの基礎を成すプロトコルとしての素質を備えています。
### AtomPubとREST
AtomPub は、RESTスタイルに基づいたプロトコル仕様です。

RESTを正しく理解していないと上手に実際のリソースやリンク機構が設計できなくて、AtomPub仕様は基本的なリソースモデルとリンク機構を提供してくれるので、我々か独自に設計する必要のある部分が大幅に削減されます。
また、AtomPub対応のフレームフークやライプラリを利用すれば、実装工数も削減できる。
さらに、標準化されたプロトコルを用いることで相互運用性も高まります。
## AtomPubのリソースモデル
AtomPubではAtomが規定しているリソースモデルをベースに、エントリを操作します。
AtomPubでは、コレクションのメタデータを表現するサービス文書(Service Document)と、エントリのカテゴリに指定できる値を列举するカテゴリ文書(Category Document)を追加しています。
## メンバリソースの操作エントリ
### 単位での操作
フィードに含まれている各エントリは固有のURIを持ちます。それぞれのURIにHTTP メソッドを適用すればCRUD操作が実現できます。
* GET--エントリの取得
* PUT--エントリの更新
* DELETE--エントリの削除
* POST--エントリの作成CRUD操作の最後は作成です。

### メディアリソースの操作 
#### メディアリソースの作成
エントリの作成はコレクションリソースへのPOST で実現しました。
しかし、メディアリソースはエントリではなく画像フアイルなどになります。`<entry>`要素のXML文書では画像本体を送ることができませんので、メディアリソースの画像本体をPOSTします。

メディアリンクエントリはrel属性edit-mediaとeditの2つの`<link>`要素を持ちます。edit-mediaリンクはメディアリソース(画像フアイル)の編集用URI です。editリンクはメディアリンクエントリ自身の編集用URI です。
#### メディアリソースの更新
画像データを更新したい場合は、edit-mediaリンクで参照できるURIにPUTを送ります。
## サービス文書
AtomPubのサービス文書では、そのWeb APIが提供するコレクションリソースのメタデ-タを複数まとめて記述できます。サービス文書はコレクションリソースのリストを集めたホームページのようなものだ

### メディアタイプ
例：`Content-Type:application/ atomsvc+xml`
Content-Typeへッダにapplication/ atomsvc+xml というメディアタイプを利用しています。

### `<service>`要素
サービス文書は<service>要素をルートに持つXML文書です。

### `<workspace>`要素
`<service>`要素は子要素に必ず1以上の`<workspace>`要素を持ちます。
`<workspace>` 要素はいくつかのコレクションリソースをまとめるためのものです。`<workspace>` 要素はAtomから借りてきた`<atom:title>`要素を子要素として持ちます。すなわち、`<workspace>`要素にはタイトルを付けられます。

### `<collection>`要素
`<workspace>`要素は0個以上の`<collection>`要素を持ちます。
`<collection>` 要素はAtomPubのコレクションリソースのメタデータを表現します。
* コレクションリソースのタイトル(`<atom:title>`要素)
* コレクションリソースのURI(`<collection>`要素のhref属性)
* コレクションリソースが許容するメディアタイプ(`<accept>`要素)
* コレクションリソースが許容するカテゴリ(`<categories>`要素)

### `<accept>`要素
`<accept>`要素はこのコレクションリソースが受け付け可能なメディアタイプを示します。
### カテゴリ
`<categories>` 要素は、このコレクションリソ-スで利用可能なカテゴリを示します。`<categories> `要素は fixed属性を持てます。
| fixed属性の值| 意味 |
|:-:|:-:|
|  yes | このコレクションのエントリには`<categories>`要素で指定したカテゴリのみを指定可能  |
| no(デフオルト値)  |  ここで指定したカテゴリ以外を持ったエントリも追加できます |

#### カテゴリ文書
カテゴリは、サース文書ではなく外部のカテゴリ文書で表現することもできます。カテゴリ文書のURIはサービス文書の`<categories>`要素のhref属性で指定します。href属性がある場合は`<categories>`要素は子要素を持てません。
#### カテゴリの追加
AtomPubのカテゴリはソーシャルプックマークの「タグ」に近いと考え：
ソーシャルプックマークでは、プックマーク登録時に自分の好きなタグを付けられます。このとき、それまで利用したことのないタグを付けた場合は、そのタグを自動的に作成します。
| fixed属性の值| カテゴリの追加とき |
|:-:|:-|
|  yes | AtomPub とは別のインタフエースでカテゴリ情報を編集できるようにしなければならない |
| no  |  エントリの新規投稿時にクライアントが自由にカテゴリを付けるようにサ-バを実装すべき|


## AtomPubに向いているWeb API
### AtomPub に向いている Web API
* プログサービスのAPI・検索機能を持つデータベースのAPI
* マルチメディアフアイルのリポジトリのAPI
* タグを使ったソーシャルサ-ビスのAPI
### AtomPub に向いていないWeb API 
* Cometを利用するような、リアルタイム性が重要なAPI
* 映像のストリーム配信など、HTTP以外のプロトコルを必要とするAPI
* データの階層構造が重要な API「タイトル」「作者」「更新日時」など、Atomフオーマットが用意するメタデータが不要な API
NGINXのドキュメントルートを解説

# nginx系コマンド
|用途|コマンド|補足|
|---|---|-|
|**ステータス確認**|**systemctl status nginx**|---|
|**nginxリロード**|**sudo systemctl reload nginx**|-|
|**ドキュメルート**|**sudo vi /etc/nginx/conf.d/default.conf**|-|
|**nginx設定のチェック**|**sudo nginx -t**|-|
# nginx ドキュメントルートとは

```javascript
WEBページを表示するディレクトリやファイルの場所を指定する
```

|構文|役割|
|---|---|
|**location**|**URIのパス単位の設定**|
|**location ~ \.php$**|**nginxでPHPを動かす**|
|**server_name**|**バーチャルサーバの名前**|

|構文|役割|
|---|---|
|**root**|**ドキュメントルートのディレクトリ**|
|**index**|**パスが/(ルート)の時、そのファイルにリダイレクトする**|
|**try_files**|**$uri $uri/index.php;**|


|構文|役割|
|---|-
|**fastcgi_pass**|**unix:/var/run/php-fpm/php-fpm.sock;**|
|**fastcgi_index**|**index.php;**|
|**fastcgi_param**|**SCRIPT_FILENAME $document_root$fastcgi_script_name;**|
|**include**|**fastcgi_params;**|

include



```javascript
server {
   一番最初のディレクトリ。※ルートディレクトリ
  root /var/www/abc;
  listen    80;
  server_name localhost;
   location / {
     index index.php;
     try_files $uri /index.php?$args;
  }
   error_page  500 502 503 504 /50x.html;
    location = /50x.html {
        root  /usr/share/nginx/html;
    }
   location ~ \.php$ {
    fastcgi_pass  unix:/var/run/php-fpm/php-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
    fastcgi_read_timeout 120s;
  }
}
```



```javascript
server {
  root /usr/share/nginx/html;
  listen 80;
  server_name localhost;

  location /{
     index index.php;
   }

  error_page  500 502 503 504 /50x.html;
  location = /50x.html {
    root /usr/share/nginx/html;
  }

  location ~ \.php$ {
    fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }
}
```