OmniAICreator/Qiita-1.07M huggingface dataset:
Next.jsとVercelでデプロイ後のリフレッシュ対応をなるべくラクにやりたい


## はじめに
SPAのサイトでは新しいバージョンをデプロイした後でも
ユーザーがページを開き直したりF5更新するまでは前のバージョンが使われ続けます。
デプロイ後に新しいバージョンに強制的に更新したり通知したい場合には少し工夫が必要です。

色々やり方はあると思いますがNext.jsとVercelを使っている場合に恐らく最も簡単な方法を紹介します。


以下のコードではページ遷移をした際に新しくデプロイされているかをチェックし
更新されていればアラートを出します。






```tsx:_app.tsxもしくはlayout.tsx
useEffect(() => {
     const checkForUpdates = async () => {
       const res = await axios.get('/api/buildId')
       const buildId = res.data.buildId
       if (prevBuildId && prevBuildId !== buildId) {
         alert('新しいバージョンがリリースされました。ページを更新してください。')
         //　リロードを促すjsxを表示するステートを更新するか強制リロードする
       } else {
         //　初回ロード時はセットのみ
         setPreviousBuildId(buildId)
       }
     }
     checkForUpdates()
     const handleRouteChange = () => {
       checkForUpdates()
     }
     router.events.on('routeChangeComplete', handleRouteChange)
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
```


```ts:api/buildId.ts
 const buildId = (req: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ buildId: process.env.VERCEL_GIT_COMMIT_SHA })
 }
```

## 解説
vercelの環境変数に最新のコミットのハッシュを返すものがあったので、それをリビジョンとして使っています。
ページ遷移のタイミングで毎回buildIdを取得しそれが前回取得したものと異なっていればリロード画面を出します。


ページ遷移のタイミングでしかデプロイを検知しないため、フォームの入力中などは対応できませんが
とにかくシンプルにやりたい場合はこれで必要十分だと思います。
Vuejs における Composables 〜 ステートフルなロジックのカプセル化〜

Vue.jsにおけるComposables（コンポーザブル）は、Vue.jsアプリケーションのコードを再利用可能なロジックユーティリティとして抽象化するためのパターンです。これは、Vue 3から導入された概念で、Composition APIと密接に関連しています。Composablesは、アプリケーション内で頻繁に使用されるロジックを分離し、コードの保守性を向上させ、コードの再利用性を高めるのに役立ちます。

Composablesは通常、以下のような特徴を持ちます

1. **単一の責務**: Composableは一つの具体的な責務を持ち、特定の機能やデータロジックに焦点を当てます。例えば、フォームバリデーション、データの取得、ローカルストレージの操作など、さまざまな用途に合わせて作成できます。
2. **再利用性**: Composablesはアプリケーション内で再利用可能であり、同じロジックを複数のコンポーネントで共有できます。これにより、コードの重複を減少させ、保守性を向上させます。
3. **独立性**: ComposableはVueコンポーネントと独立しており、外部のコンポーネントと組み合わせて使用できます。これにより、コンポーネントの再利用性とテスト容易性が向上します。

Composablesを使用すると、アプリケーション内で特定のロジックを簡単に共有し、保守性を向上させることができます。また、Composition APIと組み合わせて使用することで、Vue.jsアプリケーションをより構造化され、理解しやすくするのに役立ちます。

以下は、Composablesの一例です。この例では、フォームバリデーションのためのComposableを作成しています。

```javascript
// useValidation.js
import { ref } from 'vue';

export function useValidation() {
  const error = ref(null);

  function validateEmail(email) {
    if (!email.includes('@')) {
      error.value = '有効なメールアドレスを入力してください';
    } else {
      error.value = null;
    }
  }

  return {
    error,
    validateEmail,
  };
}
```

このComposableを使用するVueコンポーネントでは、以下のようにインポートして利用できます。

```javascript
// MyComponent.vue
<template>
  <div>
    <input v-model="email" @blur="validateEmail(email)" />
    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useValidation } from './useValidation';

export default {
  setup() {
    const email = ref('');
    const { error, validateEmail } = useValidation();

    return {
      email,
      error,
      validateEmail,
    };
  },
};
</script>
```

このようにして、フォームバリデーションのロジックをComposableとして抽象化し、異なるコンポーネントで再利用できるようになります。
【Unity】Scene や Prefab の編集中だけ Addressables な Sprite を Image にアタッチするコンポーネント

# 概要

埋め込みの Scene や Prefab の Image に Addressables な Sprite を使いたいとき、直接参照すると Sprite は二重に保存されてしまいます。
そのため LocalizeSpriteEvent などで動的に Sprite を読み込み表示する必要がありますが、編集中に Sprite が表示されないため不便です。
対象の Sprite を一時的に参照して編集が終わったら外す方法もありますが、手間と外し忘れの恐れがあります。

そこで、Scene や Prefab の編集中だけ Addressables な Sprite を Image にアタッチする Editor 用のコンポーネントを作りました。
Scene, Prefab の保存中に Sprite を取り除き、保存後に Addressables のパスから Sprite を読み込んで実現しています。

# コード

https://github.com/yamara-mh/CodeStorage/blob/main/Codes/AddressableImageViewerEditor.cs

# 使い方

1. 対象の Image に```AddressableImageViewerEditor```を追加
1. AddressableImageViewerEditor の SpriteRef に Addressables な Sprite を追加

※既に Sprite がアタッチされている Image に```AddressableImageViewerEditor```を追加した際は、Sprite を Addressables 化します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/11eb9edc-214c-bb32-0f48-87f102a072d6.png)

|プロパティ|説明|
|-|-|
|Image|Sprite を反映する Image です<br>null のとき同じ gameObject に Image があったら自動で追加します|
|SpriteRef|表示する Sprite です<br>Image の SourceImage を変えると、SpriteRef も変わります<br>SpriteRef を変えると、Image の SourceImage も変わります|
|ClearSpriteButton|SourceImage と SpriteRef を null にするボタンです|
|EditorXXX|実装の都合で SerializeField にした変数です<br>編集すると不具合の原因になります|


# 実装メモ

前提として```[ExecuteAlways]```を有効にしています。

## 編集中だけアタッチする方法

PrefabStage.prefabSaving, EditorSceneManager.sceneSaving でアタッチを外し、PrefabStage.prefabSaved, EditorSceneManager.sceneSaved で再度アタッチしています。
Scene, Prefab の編集開始時は、Update() で editorIsNotReflected フラグを利用してアタッチしています。

### Start() ではなく Update() を使う理由

Scene 上の GameObject から Prefab を作成すると、オリジナルの GameObject は消えて Prefab の Instance が生成されます。その Instance は Start() の後に Prefab の値を反映するようなので、Update() でアタッチしています。

## 保存中に OnValidate() を止める方法
OnValidate() は PrefabStage.prefabSaving と PrefabStage.prefabSaved の間にも呼ばれます。
つまり、prefabSaving 中に値を変更しても OnValidate() によって値が変わる恐れがあります。
そこで、prefabSaving で editorIsNotReflected フラグを有効に、prefabSaved でフラグを無効にして OnValidate() にフラグを使った早期リターンを作ることで値が変わらないようにしました。

## その他
Prefab Variant による ImageSource の override は```PrefabUtility.RevertPropertyOverride()```で対処しています。
Prefab の生成直前に ImageSource を空にする事は難しいので、```AssetPostprocessor.OnPostprocessAllAssets()```で生成された Prefab を編集して ImageSource を空にしています。これにより Prefab の Import が僅かに遅くなる恐れがあります。
本当に ImageSource が空になっているか怪しい際は Scene, Prefab をテキストエディタで確認してください。不具合がありましたらコメントをいただけると助かります。
LaTeX で図を並べて挿入する

# はじめに

LaTeX で図を並べて挿入する方法について書く。`\coclumnwidth`の前の数字は足して最大でも 0.98 くらいにするのが良い。`minipage` 環境を並べると水平に並べることができる。中央揃えの際は `center` 環境に入るのではなく `\centering` を宣言する。

# 横に二つ並べる

![スクリーンショット 2023-09-04 224132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986389/34319e5e-e4d5-78c1-3d6d-e21dad5b58d2.png)


```tex
\begin{figure}[h]
\centering
\begin{minipage}[b]{0.49\columnwidth}
    \centering
    \includegraphics[width=0.9\columnwidth]{a.png}
    \caption{左}
    \label{fig:a}
\end{minipage}
\begin{minipage}[b]{0.49\columnwidth}
    \centering
    \includegraphics[width=0.9\columnwidth]{b.png}
    \caption{右}
    \label{fig:b}
\end{minipage}
\end{figure}
```

# 横に三つ並べる

![スクリーンショット 2023-09-04 224146.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986389/bbca41d7-ee84-bf08-3a90-42be72992b35.png)


```tex
\begin{figure}[h]
\centering
\begin{minipage}[b]{0.32\columnwidth}
    \centering
    \includegraphics[width=0.9\columnwidth]{a.png}
    \caption{左}
    \label{fig:a}
\end{minipage}
\begin{minipage}[b]{0.32\columnwidth}
    \centering
    \includegraphics[width=0.9\columnwidth]{b.png}
    \caption{中}
    \label{fig:b}
\end{minipage}
\begin{minipage}[b]{0.32\columnwidth}
    \centering
    \includegraphics[width=0.9\columnwidth]{c.png}
    \caption{右}
    \label{fig:c}
\end{minipage}
\end{figure}
```

# 縦長い図を横にいれる

![スクリーンショット 2023-09-04 224158.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986389/4d840edd-144e-f5b0-be0f-60e70d4785e9.png)


```tex
\begin{figure}[h]
\centering
\begin{minipage}[b]{0.47\columnwidth}
    \centering
    \includegraphics[width=0.9\columnwidth]{a.png}
    \caption{左上}
    \label{fig:a}
    \vfill
    \includegraphics[width=0.9\columnwidth]{b.png}
    \caption{左下}
    \label{fig:b}
\end{minipage}
\begin{minipage}[b]{0.51\columnwidth}
    \centering
    \includegraphics[width=0.9\columnwidth]{c.png}
    \caption{右}
    \label{fig:c}
\end{minipage}
\end{figure}
```
音声通話

## 音声通話
### プロトコル

G.729

標準の G.729 のビットレートは 8 kbit/s だが、拡張版では 6.4 kbit/s と 11.8 kbit/s があり、それぞれ若干悪い通話品質と若干良い通話品質を提供する。

https://ja.wikipedia.org/wiki/G.729



https://net-skills.net/2023/02/23/wd-acelp/#:~:text=CS%2DACELP%E3%81%AF%E3%80%81%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF,%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E6%A8%99%E6%BA%96%E5%8C%96%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82

## パケット遅延とパケット損失 またはジッタ

https://pro.abphone.co.jp/%E8%A8%98%E4%BA%8B/%E9%81%85%E5%BB%B6%E3%80%81%E3%82%B8%E3%83%83%E3%82%BF%E3%80%81%E3%81%8A%E3%82%88%E3%81%B3%E3%83%91%E3%82%B1%E3%83%83%E3%83%88%E6%90%8D%E5%A4%B1%E3%81%A8%E3%81%AF/#:~:text=%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AB%E3%80%81VoIP%20%E3%81%A7%E3%81%AF,%E3%81%AE%E9%81%85%E5%BB%B6%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E5%A4%89%E5%8B%95%E3%81%A7%E3%81%99%E3%80%82

### わかりやすくいうと

### ジッタ(Jitter)とは、部分的な遅延の発生などを原因とした、音声パケットの到着間隔がばらつく事象を指します。

それを回避するものがバッファ

だけど

### バッファを大きくし過ぎると音声パケットがバッファに蓄積する時間が長くなり、音声の遅延が大きくなるデメリットが生じます。

https://thinkit.co.jp/article/19236#:~:text=%E3%81%93%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%82%B8%E3%83%83%E3%82%BF%E5%AF%BE%E7%AD%96,%E3%81%AA%E3%82%8B%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%8C%E7%94%9F%E3%81%98%E3%81%BE%E3%81%99%E3%80%82

## QOS

### cosはタグVLANのときのみ使用できる。
### レイヤー２の技術

https://www.infraexpert.com/study/qos12.htm

## Tos
### Tosはあまり使われていない　レイヤー３の技術


### DSCP
### TOS同様にレイヤー３の技術、こちらのほうが使われている

### ルーターがCoSをサポートしていなければCoSに基づいたQoSが働きません。これに対応するためには、CoSをDSCPに変換します。

https://www.infraexpert.com/study/qosz02.html

https://www.infraexpert.com/study/telephony7.html
LANとWAN（物理層〜データリンク層）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/ffe07c88-4a03-7bcc-57b9-6fbb36084975.png)
１：ハブ
　羽生は、さまざまな機器を一まとめに接続する集線装置です。ハブには、リピータハブとスイッチングハブがあります。

①リピータハブ
　電気的に信号を中継する装置です。あるポート（接続口）から来た電気信号を、他のすべてのポートへ伝えます。電気信号を中継することを、「物理層レベルでの中継を行う」と言います。

②スイッチングハブ
　MACアドレスを見て、必要なポート（接続口）にだけフレームを中継する装置です。MACアドレスを見て、中継することを、「データリンク層レベルでの中継を行う」と言います。

２：モバイル通信
　ノートPCやタブレット端末などを屋外に持ち出して、無線LANスポットや携帯電話網を利用して通信を行うことをモバイル通信と呼んでいます。モバイル通信のためのサービスは以下にまとめます。

①LTE：携帯電話事業者が提供している１００Mビット/秒以上の高速伝送を可能にした無線通信サービスである。スマートホンの通信に多く利用されている。

②WiMAX2/2+:最大で440Mビット/秒の高速伝送を可能にした無線通信サービスである。国内ではUQコミュニケーションズ社がサービスを提供している。

③５G：LTEの次の世代となる通信サービスである。第５世代移動通信システムなので５G（Gは世代を意味するジェネーションの頭文字）と表記する。３〜１０Gビット/秒での通信ができることを期待されている。

④広州無線LAN：無線LANのアクセスポイントを街中、店内、駅構内などに設置し、無線LAN通信を提供するサービス。公衆無線LANサービスができる場所を無線LANスポット（WiFiスポット）と呼ぶ。無料で利用できるものもあれば、有料でサービスを提供しているものもある。

３：モバイル通信サービス関連用語
①MVNO
自社で移動体通信サービスに必要な基地局（街中に設置したアンテナなど）の解説・運用を行わず、他の移動体事業者が提供する移動体通信サービスを使ってサービスを提供する事業者。いわゆる格安通信プランを提供している事業者がMVNOであることが多い。

②SIMカード
　加入者（電話番号）を識別するためのICカード。スマートホンなどの端末にSIMカードを挿入することによって、通話や通信が可能となる。
Elona研究

![スクリーンショット 2023-09-02 140559.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552037/455beaf6-ac24-3e5b-8ba9-87b260f610da.png)
![スクリーンショット 2023-09-02 211448.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552037/f7be1446-3395-1c6a-a2e9-de3cdf7e8a61.png)

![スクリーンショット 2023-09-04 222828.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552037/9bc09fb4-6305-e9e9-c5ad-da7bdee703fd.png)
![スクリーンショット 2023-09-04 223131.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552037/aae9d476-e88d-abcf-214f-77c08e60bab6.png)

![スクリーンショット 2023-09-04 223011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552037/d40a4725-0041-5099-04dc-7c069f9f31ea.png)

![16-09-23-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552037/850bbc20-07ae-a603-72d9-9177001bfd53.jpeg)
![スクリーンショット 2023-09-04 223454.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552037/7ab3af15-7217-4c80-871d-e8af0b5ace24.png)



![スクリーンショット 2023-09-04 224110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552037/e39c7a52-5808-78c6-bf01-40fe3d4e0582.png)
SVGファイルの背景を透過にする方法（メモ帳でＯＫ）

## 実現したいこと
SVGファイルを背景色白から透過にしたい、という要件。結果はとても簡単なのですが、簡単に検索できなかったので、残しておきます。特別なアプリは必要なく、メモ帳などのテキストエディタで対応可能です。
ペイント3DもIllustratorもInkscapeも必要ありません。

## 手順
1. テキストエディタでSVGファイルを開く
    - メモ帳など任意のテキストエディタでSVGファイルを開きます
2. 現状塗りつぶされている範囲を指定している部分を探す
    - 外側のrect（長方形）タグのfillが塗りつぶしの設定です。
    ```修正前.svg
    <rect width="200" height="100" fill="#fff"/>
    ```
3. 以下のいずれかに修正
    ```修正後.svg
    <!-- 以下のいずれかで透過にできます -->
    <rect width="200" height="100" fill="none"/>
    <rect width="200" height="100" fill="transparent"/>
    <rect width="200" height="100" fill="#fff"  fill-opacity="0"/>
    ```
以上で完了です。

参考サイト
- [sakura*sakura - 【SVG】SVGでfillの色を透過にする](https://sakura.monte-verita.biz/3311)
ITILv3とITILv4の違いを整理してみた

# はじめに  
以前ITILv3の勉強をしていたが、最近ITILv4の記事や資格取得の体験記を
見かけることが増えたので、ITILv4について知りたいと思うようになった。

ITILv4はv3から考え方が大きく変わっているそうなので、整理したい。

# ITILとは？  
一般的に、以下の表現がよく見られる。

>ITサービスマネジメントにおけるベストプラクティス（成功事例）をまとめた書籍群  
* 参照元: https://smart-stage.jp/topics/itsm_keyword_relate/p2/  

一言で「ベストプラクティス」といっても、ITILのバージョンが更新されたり
新たな技術が台頭したりすることから、時とともに変わるもの。という解釈も
できるのかもしれない。

# ITILv3とITILv4の違い  
下記のサイトを参考にしながら、v3とv4の違いを整理した。

* ITILv3  
    * 考え方: 顧客にサービスを提供する  
    * ベクトル: サービス提供者(IT企業) → ユーザー  
    * 構成: ライフサイクル  

* ITILv4  
    * 考え方: ユーザーと新たなサービスを創る  
    * ベクトル: サービス提供者(IT企業) ⇔ ユーザー  
    * 構成: モジュール   p
    * ITILv3から変更: サービス創造のための新たな概念を追加　　

* 参考サイト    
    
https://smart-stage.jp/column/039/ 


https://breezegroup.co.jp/202007/itil-v3-itilv4/  


https://irie-daily.net/itil-v3-v4/#index_id2  


# ITILv4の世界で求められること考察  
ITILv3はサービスを提供し運用するIT企業のエンジニアを中心に、
保守運用フェーズで重要視されてきたと思う。

一方でITILv4は顧客と協働してサービスを創る、という考え方にアップデート
されていて、対象フェーズが幅広くなった印象を受ける。
またユーザーの中には必ずしもITに明るい方がいらっしゃるとは限らない。
ユーザーへの説明力、ビジネススキルがよりエンジニアに求められるのでは
ないか。

もちろん、技術進歩によりITリテラシーの向上が求められている。  
社会全体(ユーザー含む)のITリテラシー底上げをITILv4は暗に示しているようにも
考えられそうだ。　　

# まとめ  
ITILv3とITILv4は同じ資格なのか？と印象を受けてしまうほど、
アップデートされていることが分かった。

ITILに関わらず、資格のアップデートが行われるケースは少なくない。  
一度合格できたから終了。ではなく、継続して注視していきたい。
npm i とnpm ciの使い分け（備忘録）

# 結論
開発環境ではnpm i
本番環境、CI/CD時にはnpm ci

# 解説　npm i とnpm ciの違い

npm install X --saveを実行すると、以下のようにパッケージXとその依存関係であるYがインストールされます。

Xの最新バージョンが 1.0.0とする
```
X
└─ Y
```
開発環境でnpm install X --saveを実行
↓
```text:package.json
"dependencies":{
	X: "^1.0.0"　←　1.x.x に該当する最新のバージョン
}
```
その後、Xが1.0.1にupgradeされた後に
本番デプロイ時にnpm install X --saveを実行
↓
```text:package.json
"dependencies":{
	X: "^1.0.1"
}
```
これだと本番環境と開発環境のバージョンが異なってしまう、本番環境デプロイ時には同じバージョン 1.0.0の X をインストールできるようにしたい！
↓
package.jsonのdependenciesを、 `"X": "1.0.0"` にすれば、Xのバージョンは `1.0.0` になりそう。
しかし、これでは開発環境を再現できない

理由）
Xの `1.0.0` の package.jsonには、 次のような dependencies が書かれている可能性がある。
`"Y": "^1.0.0"`
 Yの別のバージョン`1.1.0` が公開されているかもしれない。
↓
`package-lock.json` というのが、基本的にはこの `node_modules` ディレクトリを完全再現することが可能

しかし、package.jsonがあってもnpm installで上書きされる可能性がある

理由）

npmのバージョンによる微妙な `npm install` の挙動の違いや、様々なユースケース、人為的なミス

`package-lock.json` から `node_modules` ディレクトリを構築したい

`npm install` はそれを保証してない

本番デプロイ時のパッケージのインストールにはnpm ciを使う(CIは**Clean Installの略**)
以下簡単な処理の流れ
```
1. node_modules ディレクトリの削除
2. package-lock.json と package.json の整合性のチェック
3. package-lock.json から node_modules を再現
```

パッケージのアップデート/追加にはnpm iを使う
`package-lock.json` を更新することができる `npm install` や `npm update` などを使う

アップデート後にはメンバーにnpm iするように依頼しましょう

#  展望
次はGitHub Actions上でのtest、デプロイ時の時間短縮について検証したいです。

# 参考
- [あなたがnpm installをしてはいけない時](https://blog.minimalcorp.com/users/jigen/posts/6f325dc9b8a00370b6aedf47a34cb3ce)
- [そろそろ適当に npm install するのを卒業する](https://qiita.com/sugurutakahashi12345/items/3cc49926faeaf25d3051)
- [そもそもnpmからわからない](https://zenn.dev/antez/articles/a9d9d12178b7b2)
- [npm installとnpm ciの違い](https://new-lamp.hatenablog.com/entry/2021/10/23/102630)
- [difference-between-npm-i-and-npm-ci-in-node-js](https://www.geeksforgeeks.org/difference-between-npm-i-and-npm-ci-in-node-js/)
- [npm i vs npm ci: install node modules in your app faster and wisely](https://levelup.gitconnected.com/npm-i-vs-npm-ci-install-node-modules-in-your-app-faster-and-wisely-e5b1bef0f93d#:~:text=Summary,and%20npm%20ci%20for%20production.)
- [npm install と npm ci って結局どう使うの？2023年版](https://bufferings.hatenablog.com/entry/2023/03/15/215044)

# 宣伝させてください！
https://recruit.iimon.co.jp/
超マイナー検索ワード「日本語トランスコンパイラ言語」で検索するとBing Copilotが…

# はじめに
EdgeのBing検索でネット検索しますと、通常の検索結果のメインリストの右側に、「こんにちは、これはBingです。😊」とか言って、CoPilotモードの検索結果を勝手に表示しますね。
そこで、おふざけで超マイナー検索ワード「日本語トランスコンパイラ言語」で検索すると驚きの結果が…というお話。

## この記事内容の保証
※この記事にはAIが自動生成した意見的な情報が含まれます。AIが自動生成して書かれた内容の妥当性は保証されません。

# 実行結果
## 通常の検索結果
92,600 件の検索結果時間指定なし
日本語トランスコンパイラ言語 の検索結果を含めています。
日本語トランスコンパイル言語 の検索結果のみを表示しますか?

の後、筆頭には下記のようなQiitaのRe:Mindの記事が返りました。

日本語トランスコンパイラ言語 Re:Mind という自作言語の企画
オープンな実装言語仕様 日本語トランスコンパイラ言語 Re:Mind ...
日本語トランスコンパイラ言語 Re:Mind（リマインド）の試作 ...

かなりQiitaのRe:Mindの記事が続きます。よくよくマイナーなワードなのでしょう。向かうところ敵なし？

## CoPilotの応答結果

>日本語トランスコンパイル言語とは、日本語で書かれたプログラムのソースコードを別のプログラミング言語のソースコードに変換するコンパイラのことです。¹ 例えば、日本語で書かれたコードをC#やJavaやTypeScriptなどに変換することができます。² このような言語は、日本語でロジックを表現したり、既存の言語の資産を活用したりすることができます。² 日本語トランスコンパイル言語の一つにRe:Mindという自作言語があります。²³⁴ これはオープンな実装言語仕様で、どなたでもコンパイラ・トランスコンパイラを実装することができます。³⁴
>
>日本語トランスコンパイル言語についてもっと知りたいですか？

>ソース: Bing との会話 2023/9/4
(1) [トランスコンパイラ - Wikipedia. ](https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9).
(2) [日本語トランスコンパイラ言語 Re:Mind という自作言語の企画 .... ]( https://qiita.com/mylifewithviolin/items/9d58db8a101807c19bde).
(3) [日本語トランスコンパイラ言語 Re:Mind（リマインド）の試作 ....  ](https://qiita.com/mylifewithviolin/items/a0754013787a513828a4).
(4) [日本語トランスコンパイラ言語 Re:Mind（リマインド）の試作 .... ]( https://qiita.com/mylifewithviolin/items/abf5b4fa3b12b285935f).

う～む、ちょっと驚き。「トランスコンパイラ言語」ですとまだ一般的ですが、「日本語」とつけると誰も検索しないと思われるのですが、ある意味Bing Copilotさんの律儀さに感心しました。

「日本語トランスコンパイル言語」として扱ってくれているようです。トランスコンパイラでなくコンパイラの場合、「コンパイル言語」と「コンパイラ言語」でどちらが一般的なんでしょうね。

要約の内容も設計・企画者の意図をよく汲んでいただいている感じがします。

Bingにはだいぶよくしてもらっている感があるので、比較としてgoogle検索も同じワードで実行してみました。

# 参考 google検索実行結果

約 86,700 件 （0.38 秒） 
の後、筆頭には下記のような結果が返りました。

日本語トランスコンパイラ言語 Re:Mind という自作言語の企画 ...
日本語トランスコンパイラ言語 Re:Mind （自作言語）と他 ...
トランスコンパイラ

「日本語トランスパイラ言語」で検索すると、
約 12,400 件 （0.45 秒） 
の後、筆頭には下記のような結果が返りました。

トランスコンパイラ
トランスパイラ「Babel」の開発チーム、「何百万人にも使われて ...
トランスパイラbabelってなんなんだ？｜Terralien
オープンな実装言語仕様 日本語トランスコンパイラ言語 Re: ...

トランスパイラbabelの次にくるなんて身に余る光栄ですね。babelが資金的に苦境にあることは知りませんでした。

＃参考リンク

https://qiita.com/mylifewithviolin/items/ee1a16a363aaa4fe3f4c
マスタリングTCP/IP 情報セキュリティ編

https://www.amazon.co.jp/%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0TCP-IP-%E6%83%85%E5%A0%B1%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E7%B7%A8-%E7%AC%AC2%E7%89%88-%E9%BD%8B%E8%97%A4/dp/4274228797/ref=asc_df_4274228797/?tag=jpgo-22&linkCode=df0&hvadid=588975793651&hvpos=&hvnetw=g&hvrand=6219718619938662791&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009255&hvtargid=pla-1660529174307&psc=1&th=1&psc=1

本書を手に取った背景
セキュリティに関するおすすめ書籍を検索するとだいたい出てくる本書。
CISSPの技術部分の対策を勉強するには必要不可欠と思い手に取ってみた。

本書のテーマ
マスタリングTCPIPシリーズは有名ですが、セキュリティに特化した内容です。
セキュリティに関する一通りのテーマを取り上げ、教科書のように読むことができます。

個人的なポイント
セキュリティに携わる上で抑えておくべきことがわかりやすく書いてある。
いろんなところで紹介されていることが納得できる。
技術の細かいところまで触れてこなかったので、様々な発見があった。
今後はこれをベースにセキュリティに触れてもいいと思う。
１，情報セキュリティの歴史
RSAの登場から近年までの歴史が解説されていた。ARPNETとDESの関係なども書かれていて、ここを理解しておければ歴史観点はかなりカバーできるように感じた。

２，認証の流れ
challenge/responceなどの流れがある。

３，SSOの方式
リバースプロキシ型：利用者の代理としてアクセス他k症のサーバーに要求を中継する
エージェント型：対象サーバー全てにエージェントを仕込んでおく

４，PKI
最も普及しているのPKIのアプリケーションはHTTPS

５，証明書は３種類
サーバー証明書：
クライアント証明書：SSLサーバーがクライアントを認証するときに使う
ルート証明書：自ら証明して発行する署名書


６，SSL/TLSの全体像
record,handshake,chan cipher spec,alertからなる

７，LINUXのセキュアOS
SE linux

８，SYN flooding
有名なDOS攻撃

今後やれること
・技術の詳細を意識してセキュリティ製品に触れる

まとめ
ずんだもんを喋らせたい

# 概要
https://voicevox.hiroshiba.jp/product/zundamon/

VOICEVOXとは、

> VOICEVOXは「ずんだもん」の子供っぽい高めの声で誰でも簡単に音声を作成できる、無料のテキスト読み上げソフトウェアです。

ずんだもんとは

> ずんだ餅の精。やや不幸属性が備わっており、ないがしろにされることもしばしば。

# インストール
## 公式サイトからインストーラをダウンロード

https://voicevox.hiroshiba.jp/product/zundamon/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596806/c12fd7c3-bfc1-8784-a787-66492017c076.png)

## インストーラを起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596806/18b3bb1e-ead2-77b5-502d-3254a779cf03.png)
セットアップを進める。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596806/c62182c3-d01e-bff4-b356-bbac58ca4300.png)
インストールユーザとインストール先を選択したらいつの間にかインストール完了。

# VOICEVOX 起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596806/44456d1f-0818-02d3-93dc-d058ad97551d.png)
利用規約を読む。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596806/f70bba79-5a9e-3f4d-c65a-9c99166b4077.png)
ここでサンプルが視聴できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596806/96c85934-d424-7964-c1c9-b33c0a74f88f.png)
Googleアナリティクス、私は同意しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596806/af785485-acef-c424-52e3-ef5aaecb2924.png)
再生画面です。左上のキャラクターアイコンで喋らせるキャラクターを変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1596806/651c3b55-380f-580b-a192-ca2ecc5c0778.png)
テキストを入力すると、アクセント、イントネーション、長さを調整ができるようになる。

あとは、音声を書き出すなりして使おう！
ようつべ体験記5

[前回](https://qiita.com/matsukatsu/items/30500a0422089a02dbb2)

前月までは、はじめてでわからない事も多かったので適当にやっていました。
今月からは目標を立てて取り組んでいきたいと思います。

現時点の最終目標は収益化としています。
それを実現する為に何をすべきか考えてみました。

![収益化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/1f8e567d-bcf9-e342-0412-7b4d98e35367.png)

収益化するための条件が2つあり、僕の現状を考えるとどちらも厳しい道のりです。
ただ、とにかく動画さえ投稿すれば再生回数や再生時間は稼げるのに対して、動画を見た後の行動を起こしてもらう必要があるチャンネル登録者数の方が、僕にとって大きな壁になりそうです。
しばらくはチャンネル登録者数を増やす事だけ考えたいと思います。

月100人増やして12ヶ月後には...みたいな事が言えれば良いのですが、現時点の登録者数は23人です。
4分の3は友人知人による登録として、コンテンツの力で登録に導けたのは5人/月といったところでしょう。

できる事は限られているのですが、ざっと自分自身のコンテンツを YouTube Studio で見ていても、様々な特徴が出てきています。
そういった特徴を考慮して、今月はチャンネル登録してもらえるコンテンツ作りをテーマに頑張ってみます。

チャンネル登録してもらえるように意識をするのだから、意識をしなかった時よりも多くの登録者ができるはずです。
今月の目標は10人/月としてみます。

[次回](https://qiita.com/matsukatsu/items/0e141e4d68afa7f0d74d)
なぜDjangoは最高のWebフレームワークなのか

# なぜDjangoは最高のWebフレームなのか
Djangoがなぜ最高のフレームワークなのかについて独自の解釈で説明をします。(※個人の見解です。)
まだプログラミングの経験が浅い方や、Webフレームワークはどれを使ったらいいの？と疑問に思っている方の助力になれば幸いです。
こちらで紹介する内容はベテランの方や技術理解が深い方にとっては間違った見解を含んでいるかもしれません。予めご了承ください。

# Djangoが最高のWebフレームワークである理由
1. Pythonでできている
2. Django管理画面がある
2. マイグレーションが楽
4. バリデーションがデフォルトで用意されている
4. 短期で形にするならDjangoが早い

# 1. Pythonでできている
Djangoの魅力の一つは、Pythonでできているという点です。初学者の方ですと、なんとなく「AIに強い」「データ分析に強い」くらいの認識なのではないでしょうか？
実際そうだと思いますが、他にも私の感じるメリットは以下の点です。
1. Raspberry Piで工作するのが簡単
1. TouchDesignerなどの演出系システムでも使える
1. Excelでも使える New!!

PythonはPHPやRubyといったWeb特化形のプログラミング言語ではなく、様々な場面で使用されています。つまり、Pythonを勉強すれば、いろいろな場面で使えるんです！
TouchDesignerではプロジェクションマッピングやセンサー感知システムなど色々作れちゃって便利です。ノードプログラミングなので、そもそもコードを書かなくても作れる部分が多いですが、Pythonの出番はそこそこあります。
[TouchDesignerって何？という方はこちらの動画が参考になるかもしれません。](https://youtu.be/nLCkKM5Ea18?si=ADcmcqRDT4CKMEI6)
今注目のゲームエンジン、UE5でもPythonはサポートされていますね。

エクセルでも使えるようになったので、Web担当者レベルの方で、まず仕事に生かそうと思ったらPythonはおすすめです。これからどんどん業務改善に使っていけそうですね！

# 2. Django管理画面がある
なんといってもDjango管理画面。これは最高です。
プログミング初心者がいきなりスキーマを見てテーブルを確認するなんて、突然ジャングルに突き落とされて生態系を確認しなさいと言われるようなものです(違うかもしれません)。それがなんと！いきなりUserテーブルが作れてcreatesuperuserコマンドでスーパーユーザーが作られるので、ログインすることができて作成したテーブルのCRUD操作ができちゃうんです。
これは初学者に優しい。
例えばブログテーブルを作成したら、すぐにGUIで新規投稿、編集、削除を試せちゃう訳です。CRUD操作に辿り着くまでの速度が他のWebフレームワークに比べて圧倒的です。
![admin10t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551614/0080f5fe-449f-9615-0441-c239a0d549d1.png)
参考: [Django Documentation](https://docs.djangoproject.com/ja/4.2/intro/tutorial07/)

# 3. マイグレーションが楽
Djangoはmodels.pyにテーブル設計を書けばコマンド一個でマイグレーションファイルが作成されます。特別記述を加えなくてもそのままmigrationすればテーブルが作成、編集できちゃう訳です。
これは便利ですね！
LaravelやGinなども使ってきましたが、一々マイグレーションファイルの中身を書かないといけないので、これも初学者には辛い・・。でも、Djangoなら、間違えちゃっても大丈夫！models.pyを修正したら、修正のためのmigrationファイルが作られるので、migrationしてあっという間にテーブル設計を修正できちゃいます。
こんな感じのファイルがコマンド一個で自動生成されちゃうんですね。すばらC
![スクリーンショット 2023-09-04 20.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551614/3d477abe-1c85-ac59-a212-60f89e786146.png)


# 4. バリデーションがデフォルトで用意されている
バリデーションがデフォルトで色々用意されていて、これも一々書かなくていいのが素晴らCポイントアップです。
例えば、0より大きい整数を扱いたい場合はPositiveIntergerField、json形式で保存したい場合はJSONField、メールアドレスで保存したい場合はEmailFieldと指定すれば、それでバリデーションをかけてくれるんですね。
バリデーションをかけるときもメソッドが用意されていて、form.is_valid()でbooleanで返してくれるんです。
すばらC
[Djangoのフィールド一覧はこちら](https://docs.djangoproject.com/en/4.2/ref/models/fields/#field-types)

これは、formでも似たような記述ができまして、form.pyに例えばこういう記述をしたら、postを受けとった時にバリデーションかけてくれるんですね。
すばらC
これらは、他のWebフレームワークに比べて断然楽なのではないでしょうか

~~~
from django import forms


class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    message = forms.CharField(widget=forms.Textarea)
    sender = forms.EmailField()
    cc_myself = forms.BooleanField(required=False)
~~~

# 5. 短期で形にするならDjangoが早い
というわけで、Djangoはとにかく色々便利ですので、早く形にして使ってもらいたい！という場合はDjangoに勝るフルスタックWebフレームワークはないと思います。
他のフレームワークと比較した時に、デメリットと感じる部分も当然ありますが、それはまた別のお話し・・

以上です。
【Xcode】ブレイクポイントの`po`を活用する

# はじめに
実装が複雑になってくるとデータの流れや処理の順番がわからなくなったりします。
そこでブレイクポイントの出番です。
ブレイクポイントで処理を止めてその時点での変数の値を確認したりします。

# やりかた
① ブレイクポイントをおきます
![スクリーンショット 2023-09-04 21.21.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/64748611-e954-14ca-f209-e633417a5fd5.png)

② `po self._変数名`を`lldb`の後に書いてリターンしてみます
![スクリーンショット 2023-09-04 21.22.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/b73cd440-9771-b728-d512-971a1fae60e2.png)

`text`の中身が見れました

# おわり
これは活用していきたいですね
ansible-builderを使用してtar.gz形式のコレクションをインストールする

# はじめに
ansible-builderでカスタム実行環境(Execition Environment)のコンテナイメージを作成する際に、しばしばコレクションを依存関係に含めることがあると思います。

その際、基本的にはansible-galaxy経由でcollection installすることになると思いますが、ビルドにインターネットが使えない環境とかだとtar.gz形式でインストールする必要が出てくるかと思います。

本記事では、ansible-builderでのイメージビルド時に、tar.gz形式のコレクションをインストールする方法を記載していきます。

# Ansible-galaxyからtarballをダウンロードしてくる
Ansible galaxyにアクセスして、目的のコレクションのtarballをダウンロードしてきます。

https://galaxy.ansible.com/

`Download tarball`というリンクからダウンロードできます。

# ansible-builderのバージョンを3にする
イメージビルド時にtar.gz形式のコレクションをインストールするには、execution-environment.yml内で`additional_build_files`というオプションを使用するのですが、使用するためにはansible-builderのバージョンを3にする必要があります。

バージョンアップ手順
```shell
pip install --upgrade ansible-navigator
pip install --upgrade ansible-builder
```
`ansible-builder --version`で`3.0.0`以上が表示されることを確認してください。
ansible-builderのバージョンを3にするには、依存関係的にansible-navigatorのバージョンアップを先にする必要があります。

# execution-environment.ymlを書く
以下はexecution-environment.ymlのバージョン3のサンプルです。
```yml
---
version: 3

build_arg_defaults:
  ANSIBLE_GALAXY_CLI_COLLECTION_OPTS: '--pre'

dependencies:
  ansible_core:
    package_pip: ansible-core==2.14.4
  ansible_runner:
    package_pip: ansible-runner
  galaxy: requirements.yml
  python:
    - six
    - psutil
  system: bindep.txt

images:
  base_image:
    name: registry.redhat.io/ansible-automation-platform-21/ee-minimal-rhel8:latest

additional_build_files:
    - src: files/ansible.cfg
      dest: configs

additional_build_steps:
  prepend_galaxy:
    - ADD _build/configs/ansible.cfg ~/.ansible.cfg

  prepend_final: |
    RUN whoami
    RUN cat /etc/os-release
  append_final:
    - RUN echo This is a post-install command!
    - RUN ls -la /etc
```

以下のようなディレクトリ構成だとします。
```
.
├── collections
│   └── sample-collection-x.y.z.tar.gz
├── execution-environment.yml
└── requirements.yml
```

`additonal_build_files`というオプションに、以下を追加します。

```yml
additional_build_files:
    - src: collections/sample-collection-x.y.z.tar.gz
      dest: mycollections
```
`dest`はビルド時に作られる`_build`ディレクトリ配下を指しているようです。

requirements.ymlに以下を記載します。
```yml
collections:
  - source: mycollections/sample-collection-x.y.z.tar.gz
    type: file
```


# ビルドを実行する
通常通りビルドを実行します。
```shell
ansible-builder build --tags sample-image:x.y
```

# 参考
- [Execution Environment Definition](https://ansible.readthedocs.io/projects/builder/en/stable/definition/)
- [ansible-builder and local collection (GitHub Issue)](https://github.com/ansible/ansible-builder/issues/380)
swiftでトークンバケット実装

RTMP実装でnetworkトラフィックコントロールする必要があって、一般的にトークンバケットで実装が多いので、そのアルゴリズムをswiftで実装しました。
似たようleaky bucketもありますが、これはトラフィックを一定するようなアルゴリズムで、rtmpなどの動画音声送信だとkey frameなどででかいデータ一時トラフィックあがることがあるので、トークンバケットが適しています。

# トークンバケット

トークンバケット（英: token bucket）とは、ネットワークへのデータ流入量を制御するアルゴリズムの一種であり、バースト性のあるデータ送信を許容する。いくつかの用途があるがトラフィックシェーピングの手法として使うことが多い。

https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%83%90%E3%82%B1%E3%83%83%E3%83%88

# コンポーネント

バケット：トークンを保存する容器。最大 b 個のトークンを保持できます。
トークン：一定レート r でバケットに追加される仮想的な単位。
パケット（PDU）：ネットワークを通過するデータの単位。

# アルゴリズム




1. 1/r 秒ごとに1トークンがバケットに追加されます。
2. バケットが満杯の場合、新しく追加されたトークンは捨てられます。
3. ネットワークにデータを送信する際、nバイトのデータ（PDU）がn個のトークンと交換されます。
4. 必要なトークン数が不足している場合、そのデータは送信されず、特定の方法で処理されます（例：捨てる、送信delayなど）。

# swift code

```swift: TokenBucket

actor TokenBucket {
  private let defaultRate = 2500000  // Default refill rate in tokens per second
  private var tokens: Int  // Current number of tokens in the bucket
  private var lastRefillTime: TimeInterval  // Last time the bucket was refilled
  private var refillRate: Int  // Rate at which tokens are refilled
  private var capacity: Int  // Maximum capacity of the bucket
  
  // Initialization, set the refill rate and capacity, and fill the bucket
  init() {
    self.refillRate = defaultRate
    self.capacity = defaultRate
    self.tokens = defaultRate
    self.lastRefillTime = Date().timeIntervalSince1970
  }
  
  // Update the rate and capacity of the bucket
  func update(rate: Int, capacity: Int) {
    self.refillRate = rate
    self.capacity = capacity
    self.tokens = capacity
  }
  
  // Refill tokens in the bucket
  func refill() {
    let currentTime = Date().timeIntervalSince1970
    let elapsedTime = Int((currentTime - lastRefillTime) * 1000)
    let tokensToAdd = elapsedTime * refillRate / 1000  // Calculate tokens to add based on elapsed time and refill rate
    tokens = min(tokens + tokensToAdd, capacity)  // Add tokens but do not exceed maximum capacity
    lastRefillTime = currentTime  // Update the last refill time
  }
  
  // Consume tokens and return whether the operation was successful
  func consume(tokensNeeded: Int) -> Bool {
    refill()  // First, refill the bucket
    if tokens >= tokensNeeded {  // If there are enough tokens
      tokens -= tokensNeeded  // Consume the tokens
      return true  // Return success
    }
    return false  // Not enough tokens, return failure
  }
}
```

データ送信側

```swift
let data = /* 送信するデータ */

// tokenが足りてればそのまま送信
if await tokenBucket.consume(tokensNeeded: data.count) {
  do {
    try await sendData(data)
  } catch {
    logger.error("send data failed. error: \(error)")
  }
} else {
  logger.info("token bucket is empty, waiting...")
  // token足りないので、10ms待つ
  try? await Task.sleep(nanoseconds:  UInt64(10 * 1000 * 1000))
}
```


# 参考

https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%83%90%E3%82%B1%E3%83%83%E3%83%88

https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%BC%E3%82%AD%E3%83%BC%E3%83%90%E3%82%B1%E3%83%83%E3%83%88

https://pfandrade.me/blog/rate-limiting-using-a-token-bucket-in-swift/
AI Builderの日本語対応状況


AI Builderの日本語対応状況について、2023/9/4に検証した結果をこちらに載せます。
テキストが関係ない予測モデルと物体検出以外で検証しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/8ba32761-12ad-a5d3-0cc9-644e96ac6e18.png)
【Next.js】webpack.cache.PackFileCacheStrategyのエラーの解決

# はじめに
👋こんにちは！Web系の企業に勤務し、地方からフルリモート勤務をしている@takakouと申します🏙️✨

今回は、「**webpack.cache.PackFileCacheStrategyのエラーの解決**」というテーマで記事をシェアします！📝

記事執筆は未熟者で、至らない点もあるかと思いますが、皆さんのコメントやフィードバックをお待ちしています！🚀💬
# 目次
<!-- タイトルとアンカー名を編集 -->
1. [概要](#1-概要)
1. [エラーメッセージ](#2-エラーメッセージ)
1. [エラーの影響](#3-エラーの影響)
1. [解決方法](#4-解決方法)
1. [参考文献](#5-参考文献)
1. [おわりに](#6-おわりに)
<!-- 各チャプター -->

# 1. 概要
- この記事では、Next.jsアプリケーションのビルド時に`webpack.cache.PackFileCacheStrategy`というエラーに遭遇した際の解決方法について説明します。

# 2. エラーメッセージ
```
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, stat '/Users/User名/Next_App/.next/cache/webpack/client-development/18.pack.gz'
```

# 3. エラーの影響
- アプリケーションのビルド時に毎回 **Terminal** にエラーが出る。

# 4. 解決方法
- Next.jsアプリケーションの **ルートディレクトリ直下**の「**.next**」フォルダを削除してアプリケーションを再起動。
:::note info
**理由**
出ているエラーが **webpack** の **cache** の読み込み失敗に関するエラーなので、ビルド時に、**cache** しているフォルダごと消しています。
:::
# 5. 参考文献

https://github.com/vercel/next.js/issues/47394

https://github.com/vercel/next.js/discussions/35877

https://github.com/vercel/next.js/issues/27650

https://kt-tech-blog.vercel.app/blogs/qdu5xy8cw


# 6. おわりに

**isuue** を見ても解決している感じがなかったので根本的な原因はわかりませんでした。

個人的には **cache** している **webpack** が怪しいなと思っているのですが、Next.jsに関する理解が甘いせいで完全に原因を探し切れていません。💦

もし、詳しく理解されている方がいらっしゃいましたら知見を共有いただけると幸いです。🙏

今回の記事では、 `webpack.cache.PackFileCacheStrategy` のエラーを解決する方法について説明しました💾

もし興味を持っていただけましたら、ぜひ他の記事も読んでいただけるとうれしいです！ 📖🌟

(最後に、気づいた方もいらっしゃると思うのですが、絵文字を入れるのは苦手なので、文章に沿った絵文字を挿入するのに、ChatGPTを利用させていただきましたが、いかがでしたでしょうか。不快に思われた方がいたら申し訳ございません 🙇‍♂️)
M1macにRuby on Railsの環境を構築するまで

# 結論　
1. Homebrewをぶち込む
2. rbenvをぶち込む
3. rubyをぶち込む
4. RoRをぶち込む

以上！！！


# 環境
- macbook air (M1 2020)
- 16G
- ゴールの環境は最新のruby(3.2.2)、ruby on rails(7.0.7.2)のローカル環境の構築


# 手順 1 homebrewをぶち込む
- 以下のサイトに進み、黒い部分をコピー
[homebrew](https://brew.sh/index_ja)
![スクリーンショット 2023-09-04 19.55.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551561/c2460686-1ec2-c7dd-ab70-a32860473598.png)

- 画像の黒に囲まれた部分をコピーし、「ターミナル」を立ち上げコピーペースト
![スクリーンショット 2023-09-04 19.59.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551561/e7bd7af2-c0dd-f2be-3a0a-18c945b7df7b.png)
※「ターミナル」はいじってなければ以下の９つのカラフルがあるやつの中にある場合が多い

 ```ruby:確認コード
brew --version
```
でバージョンが出てきてくれれば突破！

# 手順 2 rbenvをぶち込む
```ruby:確認コード
brew install rbenv
```
と入力しインストール。

```ruby:確認コード
rbenv --version
```
でバージョンが帰ってきたら優勝。

# 手順 3 rubyをぶち込む
macだと標準でrubyが入っているが、そのままにしておくと後々エラーが出て面倒なのでrbenvを使ってrubyを統一した方がいい。自分は手順３を適当にすっ飛ばして３時間悩む羽目になった。

- pathを通す
(参考) [PATHを通すとは？](https://qiita.com/soarflat/items/09be6ab9cd91d366bf71)

この手順を飛ばすとruby on railsを頑張って入れてもエラーが起きて実行できなくなると思います。
その理由としてはrubyのpathが正しい位置に設定されていないため。
なので正しいパスを設定してあげる。

```ruby:
vi ~/.zshrc
```
上記コードをターミナルで打つとよくわからない画面が出てくると思うが、一旦落ち着いて
- キーボードのiを押す(入力モードに入る)
- 以下をコピペ
```ruby:
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
```
- キーボードのescを押す(読み込みモードにする)
- 「:wq」を押して終了。(保存して終わる意味)
- 以下をターミナルに打ち込む
```ruby:
source ~/.zshrc
```

続いてやっとrubyを入れます。
```Ruby:
rbenv versions
```

とすると

```Ruby:
rbenv versions
* system
```

こんな感じになります。これは現在rbenv経由でrubyが使えないってことです。ここで適当にbundle installするとさらに意味不明になる。

そのためまずは自分のrbenvにrubyを入れてあげる必要がある。
```ruby:
rbenv install -l 
```
で現在のrubyのバージョンが指定できるので、
```ruby:
rbenv install 3.2.2
```
みたいに打ち込む。めんどくさければ「3.2.2」を入れなければ最新のものが入る(環境によってはNGなのでgemとか確認した方がいいかも)

```ruby:
rbenv init
```
で反映して、

```ruby:
rbenv versions
system
* 3.2.2
```

ってなっていればOK

# 手順 4 Ruby on Railsをぶち込む

```ruby:
gem install rails
```

と打ち込んで完了のはず。あとはrailsのバージョンを確認して #sudoがでなければOK

※ sudo ~~~はrbenvやvim(変な画面)の操作や設定が間違ってる可能性が大なので戻ってみると良いです。


# 総評

久々に環境構築するとlinuxの理解のなさに驚く。基本情報周りもちゃんと復習しなきゃなと思った。見逃してるところが多々ありそうなのでまた見返して修正する。


# 参考

https://nishinatoshiharu.com/new-rails-tutorial/
https://qiita.com/soarflat/items/09be6ab9cd91d366bf71
https://zenn.dev/blendthink/articles/f0964e3642d33b
30代未経験エンジニアが2ヶ月目学習を終えての変化と反省

## はじめに
kekiと申します。
30代で文系未経験からIT業界転職を目指し、現在プログラミングスクールに通って２ヶ月（半分）が経過しました。前回の続きで、２ヶ月目で具体的にやったことや反省点をまとめてみました。同じ境遇の方やこれから学習をする方の参考になれば幸いです。

１ヶ月目のまとめはこちらになります。
[30代未経験エンジニアが１ヶ月目の学習でやってみたこと](https://qiita.com/kekikami/items/707e8d982bfdebad3017)

## ２ヶ月目で良くなったこと
### 1. 読書の精度が上がってきた
２ヶ月目で一番嬉しかった点は「**読書の精度が上がってきた**」ことです。

１ヶ月目の反省により毎朝10分ほど本を読む習慣を新たに設けました。
最初は「休日に１冊を読むぞ〜」という具合だったのですが、読書習慣のそもそもの目的はリファレンスやエラー文を恐れず読むことだったので途中で方向転換しました。
読破した本の数を指標にすることをやめ、「まずは10分でいいので毎日コツコツ読み進める」に変更しました。その代わり、惰性で読むことを避けるため「**朝の10分だけは、短期集中で全力で読む**」というルールを自分に課しました。
おかげで最初1ページしか読めなかったペースが、**１ヶ月で3ページくらいなら難しくてもとりあえず読めるな**くらいに強化されてきました。

### 2. 習慣を体系化した
スクール内のLT会で「**学びの習慣化はエンジニア必須のスキルであり、習慣にするには方法がある**」というテーマの話があり、非常に面白かったので私もパクることにしました。
参考にしたのは以下の条件で、
- 禁止の習慣は作らない
- 次の動きを決めておく（何時、ではなくこれの次にこれをやると順番に沿う）
- 週五回以上で確実に出来るラインからスタートする
- ご褒美を設定しない

この辺りを参考にグループ化して始めてみました。「朝起きる→顔を洗う→着替える→水を一口飲む→何も考えず10分程度の散歩に出る...」みたいなものです。
前述した朝10分の読書もこれに組み込み、新しい学習習慣も苦もなく実行できました。改めて**学習習慣のための習慣を用意するというのは大切**だなと実感しました。

## ２ヶ月目にもっとやればよかったと思うこと
もちろん出来なかったことや反省点もありました。

### 1. 予定外のことが起きた時のメンタル管理は大事
実は8月中旬にコロナにかかってしまい、一週間の間、学習はおろかYouTubeすら見れませんでした。それにより１ヶ月目で貯めていた学習貯金がパーになり、しかもいまだに咳が出て本調子とは程遠かったりします。

後半頑張って立て直しましたが、やはり**メンタル的にはかなりきていました**。遅れを取り戻したくても、体力的にその日は休まざるを得ない、という日は大人しく休みました。が、歯痒い思いで逆に寝付けませんでした笑。

後になって思うと、予定外のトラブルはなんの仕事でも必ず起きるものです。
今のように**新しいことに取り組んでいるときこそ、特に起きやすい「肩透かし」の際のメンタル管理は知っておくのが良いな**、と良い勉強になりました。
今回は焦る気持ちが先行して逆にすり減らしてしまった部分が大きいので、これは今後の人生の糧にしたいです。次回は「どう対処するか」よりも、「何を優先すべきか」にフォーカスを当てるようにしたいですね。

### 2. paizaラーニングの時間が少なかった
１ヶ月目で「もっとやるべき」に掲げたのに、あまり実行できなかったので反省としました。
何故できなかったのかというと、paizaより読書週間とスクールの課題進捗を優先としたからです。その判断自体は正しいと思いますが、それでももっと隙間をうまく使って1日10分も取れなかったのか？と思うと、やはり出来たと思います。
１ヶ月の時も述べたように**毎日コツコツやるのが大切な分野の学習**なので、３ヶ月目は習慣化の中に取り入れてやっていこうと思います。

何から始めたらいいかわからない！という方は、ぜひここのレベルアップ問題からをお勧めします！
[paiza レベルアップ問題集](https://paiza.jp/works/mondai)

### 3. 安易なバージョンアップのせいで大幅な時間ロスがあった
なんのことかと言いますと、PostgreSQLのバージョンを14.9 →15.4に安易に上げて、一部の機能がうまく動かず環境再構築に半日も費やしました。要らない上に回避できた時間ロスでした…

マイグレーションファイルでもよくやらかしましたが、ここは安易に触ってはならないという領域にノー警戒でトライアンドエラーを挑みすぎなので、単純に注意不足と反省しました。
**バージョンアップの注意性は身に染みた**ので、今後は絶対に単独では行わず、他人に相談してから検討しようと思います。

## ３ヶ月目に加えてやりたいこと
### 1. 平日の夜に30分だけの学習習慣をつける
私は朝型なので、朝集中して夜退勤まで行ったら終わり！とオンオフ切り替えています。
そのため夜は原則追い学習せずにスパッと休んでいるのですが、今後仕事が始まった時に取れる学習時間を捻出しようとしたら、夜短時間もやはり欲しいと思い始めています。
無理をしない、かつ休日はその分きっちり休むのを前提に、平日の夜の学習を任意ではなく習慣として学習を始める予定です。具体的には前述のpaizaを検討してます。

### 2. 就活の方向性をより具体的に定める
順調にいけば２ヶ月後に就活が始まるので、スクールの卒業制作が最優先ですが就活の用意も少しずつ進める必要が出てきました。
幸い早めに書類用意や外部転職アドバイザーとの連携の行動をしていたので、少し余裕を持って情報収集のみに時間を絞れそうです。隙間をみて同時進行していくつもりです。

## まとめ
２ヶ月目によかったと思う変化は、「**読書の習慣をつけて読書精度があがってきた**」ことと、「**日々の習慣化を定めて学習習慣自体が出来てきた**」ことです。

一方で２ヶ月目を終えての反省は「**予定外のアクシデントによるメンタル管理は大事**」「**paizaラーニングはもっとやるべきだった**」「**バージョンアップは必ず他人に相談してから**」の三つです。

***
余談ですが、今月読んだ本の中では話題のビッグモーター元幹部の方の本がダントツで面白かったです。内部告発の本かと思ったら良質な営業とマネジメント指南の本で、面白くて**2時間で読み終えました**（告発内容もありました）。

https://honto.jp/netstore/pd-book_32695866.html

私自身以前に全然別の中古業界に携わったことがあったので、営業目線での商材への信念と利益をどう天秤にかけるか、というのは非常に興味深いテーマでした。
***

ここまで長文読んでいただきありがとうございました。
また３ヶ月目のまとめも楽しみにして頂けますと幸いです。
AWS Certified Database - Specialty に合格したので振り返り

AWS Certified Database - Specialty(以下DBS) に合格できたので振り返り。

### 基本情報
- 業務経験: AWSの実務経験は4ヶ月程
- 保有資格: SAA, DVA, SOA, SAP

学習期間は2週間です。

### 教材

[要点整理から攻略する『AWS認定 データベース-専門知識』 (Compass Booksシリーズ)](https://www.amazon.co.jp/dp/B0936PSMXT/)

[AWS Certified Database - Specialty サンプル問題](https://d1.awsstatic.com/ja_JP/training-and-certification/docs-database-specialty/AWS-Certified-Database-Specialty_Sample-Questions.pdf)

[AWS Certified Database - Specialty 公式練習問題集](https://explore.skillbuilder.aws/learn/course/external/view/elearning/12511/aws-certified-database-specialty-practice-question-set-dbs-c01-japanese?dtbs=sec&sec=prep)


### 学習の進め方
要点整理から攻略する『AWS認定 データベース-専門知識』を２周する（演習問題含む）
↓
サンプル問題を解く
↓
公式練習問題集を解く

問題については、全て解答の根拠が言えるまで調べます。ただDBSの場合は解答の解説を読めば大体わかったので公式ドキュメントなどを読み込むことはあまりなかったです。
覚える必要のある知識は[Anki](https://apps.ankiweb.net/)というアプリで暗記カードを作成しました。

単純だけれどもこれだけ。
問題演習の正答率はだいたい↓

- 要点整理から攻略する『AWS認定 データベース-専門知識』の演習問題 １周目 → 5割
- 要点整理から攻略する『AWS認定 データベース-専門知識』の演習問題 ２周目 → 9割
- サンプル問題 → 7割
- 公式練習問題集 → 65%

本番の合格ラインは75%ですが、過去の試験でも演習問題で合格点を取ったことがない状態で合格はできているので気にせず申し込みました。

また、学習の進め方として、**RDS,Aurora,DynamoDBを重点的に勉強する**のが重要だと思いました。
大部分の問題は上記のサービスから出題されます。DocumentDB、Neptune、QLDBなど、比較的業務では馴染みのないサービスも範囲に入ってくるので目が行きがちですが、これらの出題量はそこまで多くありません。普段使っていたとしても油断せずに理解を深めることをおすすめします。
書籍やドキュメントで本格的にインプットを始める前にサンプル問題や公式練習問題集に目を通すだけでも傾向が分かると思うので、やっぱり過去問分析は大事ですね。
個人的には下記の2つがよく問われたと感じます。

- AuroraにできてRDSできないこと
- ダウンタイムを最小にする移行方法

合格してから見つけたので私は使わなかったのですが、1つ目については下記の記事が有用そうです。

https://dev.classmethod.jp/articles/aurora-or-rds-by-table/

移行方法には作業量や移行に使える期間など、他にも出題される観点はあるのですが、ダウンタイムに関して問う問題が大分多かった気がします。

ご参考までに。

## 参考情報

https://dev.classmethod.jp/articles/aurora-or-rds-by-table/
【メモ】shaderlab Transparent Alpha値 1より大きい値を指定するとなんかカッコいい

<h1>要点</h1>
<ul>
<li>透過シェーダーのアルファ値は0~1の範囲外も指定できる。</li>
<li>覆い焼きっぽい不思議な効果が得られる。</li>
</ul>

<h1>実際に見てみる</h1>
以下は透過シェーダーのコード。

```glsl
Shader "Custom/Transparent_Test"
{

    Properties
    {
        Transparent_Value("不透明度", Range(-10,10)) = 0.5
    }
    SubShader
    {
        Tags { "Queue"="Transparent" "RenderType"="Transparent" }
        Blend SrcAlpha OneMinusSrcAlpha
        
        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            #include "UnityCG.cginc"
            float Transparent_Value;

            fixed4 frag () : SV_Target
            {
                return fixed4(1,1,1,Transparent_Value);
            }
            
            ENDCG
        }
    }
}
```
このシェーダーで透過を表現できている。実際に見てみよう。
Planeを作り、試すと以下のようである。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722480/2587134c-a402-5532-8d43-b18dac4f9846.png)


白色が透けている。

さて、このコードは透明度をイジることができる。

たとえば不透明度を下げると、白色が薄くなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722480/82e28bae-8b27-29cc-30e8-187a98c17bca.png)

不透明度を上げると、白色が濃くなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722480/20a3048c-0fab-e5c1-496a-f4f72ad8cbcd.png)

では、不透明度をどんどん大きくしてみよう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722480/4431252e-19a9-753c-4473-382ad4c76f2a.png)

なんか不思議な光景になった。
これには透過の仕組みが関係している。

<h1>透過の仕組み</h1>
UnityのTransparentの計算を、具体的に見てみよう。

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722480/fc317ec3-feba-40a4-e085-8990f75470a1.png)

オブジェクトの不透明度が0.6のとき、
<b>色 = オブジェクトの色 × 0.6 + 背景の色 × (1 - 0.6)</b> で計算する。わかりにくければ
<b>色は「オブジェクトの色の60%」と「背景の色の40%」を足した色</b> で求めていると考えてもよい。

だからオブジェクトの不透明度が10のとき
<b>色 = オブジェクトの色 × 10 + 背景の色 × (-9)</b> と計算される。すなわち
<b>色は「オブジェクトの色の1000%」から「背景色の900%」を引いた色</b> で求めている。

だから極端な色になって、コントラストがエグいことになる。

<h1>応用例</h1>
不透明度を-10にすると、こうなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722480/eaf047e0-4d51-2252-a94c-65a764ca4807.png)

動的に変化させると、なんかカッコいい。

![aaa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722480/a2596b72-307e-b3f7-1d1d-3a3fdbc949ce.gif)

使い所は、ない。
cscの作法 その442


# 概要
cscの作法、調べてみた。
練習問題、やってみた。

# 練習問題
Buttonを配列で扱え。

# 方針
new Button[5]する。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/51b82e55-2470-8952-3633-2a55a01096b0.png)


# サンプルコード

```
using System;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using System.Data;

namespace App
{
	public partial class Form1: Form {
		Button[] testButtons;
		public Form1() {
			Text = "Buttons";
			ClientSize = new Size(300, 300);
			testButtons = new Button[5];
			for (int i = 0; i < this.testButtons.Length; i++)
			{
				testButtons[i] = new Button();
				testButtons[i].Name = "Button" + i.ToString();
				testButtons[i].Text = "Button" + i.ToString();
				testButtons[i].Location = new Point(30, 10 + 30 * i);
				testButtons[i].Click += new EventHandler(this.testButtons_Click);
			}
			Controls.AddRange(this.testButtons);
		}
		private void testButtons_Click(object sender, EventArgs e) {
			MessageBox.Show("click: " + ((Button) sender).Name);
		}
		[STAThread]
		public static void Main() {
			Application.Run(new Form1());
		}
	}
}





```


以上。
VSCodeからCloud9にSSH接続

# はじめに
AWSインフラ＆コーディング練習のために環境を作ってみました。
大本がcloud9で使い捨て可能な環境なので、色々と試せて便利です。

# 手順要約
1. AWS：Cloud9作成
2. AWS：Cloud9へElastic IP アドレスを付与
3. windows：秘密鍵/公開鍵を発行する
4. Cloud9 のセキュリティグループを変更する
5. VS code から、Cloud9 に ssh で接続する

# 手順

## 1. AWS：Cloud9作成
- 基本的に設定値はデフォルトでOK　
- パラメータが下記の値になっていること
  - AmazonLinux2
  - AWS Systems Manager (SSM)
## 2. AWS：Cloud9へElastic IP アドレスを付与
- EC2/左側ペイン「Elastic IP」の「Elastic IP アドレスの割り当て」をクリック
- ネットワークボーダーグループが「ap-northeast1」になっていることを確認し「割り当て」をクリック
- チェックボックスを選択し、「アクション」→「Elastic IP アドレスの関連付け」を選択
- [インスタンス] にて、当該 Cloud9 環境を選択し「関連付ける」をクリック

## 3. windows：秘密鍵/公開鍵を発行する
- SSH鍵を発行

```言語:powershell
# ディレクトリ作成＆移動
$ mkdir C:\Users\user_name\.ssh
$ cd C:\Users\user_name\

# 鍵作成
$ ssh-keygen
>Generating public/private rsa key pair.
>Enter file in which to save the key (C:\Users\user_name/.ssh/id_rsa): >cloud9[任意の名前を入力]
>Enter passphrase (empty for no passphrase): [そのままEnterで可]
>Enter same passphrase again: [そのままEnterで可]
～省略～
```

- SSH 接続情報を作成
```言語:powershell
$ New-Item config

//下記を記載
Host <任意のホスト名（VSCodeの接続画面に表示されます）>
HostName <付与したElastic IP アドレス>
IdentityFile ~/.ssh/<作成した秘密鍵のファイル名>
```

## 4. Cloud9 のセキュリティグループを変更する
- Cloud9のセキュリティグループ/インバウンドルールを「インバウンドルールを編集」をクリック
- ルールを追加から下記の値を入力
  - タイプ：SSH
  - ソース：カスタム
  - 接続元の IP アドレス：【PCのアドレス】
    - powershell「ipconfig」コマンドで確認

- Cloud9の左ペインの設定から「Show Hidden Files」と「Show Home in Favorites」にチェックを入力
-  ~/.ssh/authorized/authorized_keysにローカルの公開鍵(～.pub)の中身を末尾にコピー

## 5. VS code から、Cloud9 に ssh で接続する
- VS Code を起動し、拡張機能の 「Remote - SSH」をインストール

- VS Code の画面左でリモート接続のアイコンをクリック → SSH TARGETS に表示された [cloud9] にて [Connect to Host in New Window]
- Select the platform of the remote host "cloud9"は「linux」を選択
SadServersの所感 (Easy編)

# 目次

- [目次](#目次)
- [本記事の概要](#本記事の概要)
- [各章毎の所感](#各章毎の所感)
  - [1. "Saint John": what is writing to this log file?](#1-saint-john-what-is-writing-to-this-log-file)
  - [2. "Saskatoon": counting IPs.](#2-saskatoon-counting-ips)
  - [3. "Santiago": Find the secret combination](#3-santiago-find-the-secret-combination)
- [総括](#総括)

# 本記事の概要

学習のために[SadServers](https://sadservers.com/)を実施した際の所感になります。
対象のレベルはEasyです。

:::note warn
本記事では回答の直接的な解説はしていません。ご了承ください。
:::

# 各章毎の所感

## 1. "Saint John": what is writing to this log file?

| Correct or Incorrect | Did you refer to next clue? | (How many times) |
| -------------------- | --------------------------- | ---------------- |
| Correct              | no                          | -                |

1問目ということもあり基礎知識で回答できた。
プロセス情報を出すコマンドとして、``lsof``や``fuser``を頭に入れておけるとなお良い。

## 2. "Saskatoon": counting IPs.

| Correct or Incorrect | Did you refer to next clue? | (How many times) |
| -------------------- | --------------------------- | ---------------- |
| Incorrenct           | no                          | -                |

``uniq``の仕様がわかっていなかったため不正解。
[uniqのman](https://linuxjm.osdn.jp/html/GNU_textutils/man1/uniq.1.html)より引用

> uniq に与える入力はソートされていなければならない。比較は連続した行の間でのみ行われる。

勉強になります。

## 3. "Santiago": Find the secret combination

| Correct or Incorrect | Did you refer to next clue? | (How many times) |
| -------------------- | --------------------------- | ---------------- |
| Incorrenct           | yes                         | 2                |

``uniq``はとにかくsortしてからじゃないと駄目ということをよく学べた。

# 総括

Easyなのに正答率1/3という苦い結果。
しかし、学ぶことはとても多いので引続きMediumに挑戦する。
Qiita の VScode Markdown Preview 機能の表示がおかしい点

# 結論を先に書く
今分かってるところだと

1. html タグ打ちのテーブル内にインライン数式 `$..$` が書けないこと。Qiita は書ける。
2. 数式ブロック内の align コマンドを使うと自動的に数式番号が振られてしまうこと。Mathjax というか TeX の仕様的におかしいような気がする。

Qiita だと以下のように表示されます。

# １）html タグ打ちのテーブル内の数式

```html
<table>
<caption>奇数 $m = 2j + 1$ </caption>
<thead><tr><th>$j$</th><th>$m$</th></tr></thead>
<tbody><tr><td>$0$</td><td>$1$</td></tr><tr><td>$1$</td><td>$3$</td></tr></tbody>
</table>
```

<table>
<caption>奇数 $m = 2j + 1$ </caption>
<thead><tr><th>$j$</th><th>$m$</th></tr></thead>
<tbody><tr><td>$0$</td><td>$1$</td></tr><tr><td>$1$</td><td>$3$</td></tr></tbody>
</table>

# ２）数式ブロックの式番号

````
```math
\begin{align}
a &= 1 \\
b &= 2
\end{align}
```
````

```math
\begin{align}
a &= 1 \\
b &= 2
\end{align}
```

一方，VScode Markdown Preview だと以下のようになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490655/7c293c8a-9f09-06bf-01c9-e3da535c830f.png">
Javaで「引数だけ異なって名前は同じメソッド」の動作を確認してみた

# 概要

Javaで「引数だけ異なって名前は同じメソッド」の動作を確認してみました。以下のページを参考にしました。

https://www.javadrive.jp/start/member/index6.html

# 実装

以下のファイルを作成しました。
```CTest6.java
class CTest6{
  public static void main(String args[]){
    Television tv1 = new Television();

    tv1.setChannel(1);

    tv1.setChannel("NHK");
    tv1.setChannel(3, "NHK総合");
  }
}

class Television{
  private int channelNo;
  private String housouKyoku;

  public void setChannel(int newChannelNo){
    channelNo = newChannelNo;

    if (newChannelNo == 1){
      housouKyoku = "FujiTV";
    }else if(newChannelNo == 3){
      housouKyoku = "NHK";
    }

    System.out.println("チャンネルが変更されました");
    dispChannelInfo();
  }

  public void setChannel(String newHousouKyoku){
    housouKyoku = newHousouKyoku;

    if (newHousouKyoku.equals("FujiTV")){
      channelNo = 1;
    }else if(newHousouKyoku.equals("NHK")){
      channelNo = 3;
    }

    System.out.println("放送局が変更されました");
    dispChannelInfo();
  }

  public void setChannel(int newChannelNo, String newHousouKyoku){
    channelNo = newChannelNo;
    housouKyoku = newHousouKyoku;

    System.out.println("チャンネルと放送局が変更されました");
    dispChannelInfo();
  }

  private void dispChannelInfo(){
    System.out.println("チャンネルNoは" + channelNo);
    System.out.println("放送局は" + housouKyoku);
  }
}
```
以下のコマンドを実行しました。
```
$ javac CTest6.java 
$ java CTest6 
チャンネルが変更されました
チャンネルNoは1
放送局はFujiTV
放送局が変更されました
チャンネルNoは3
放送局はNHK
チャンネルと放送局が変更されました
チャンネルNoは3
放送局はNHK総合
```

# まとめ
何かの役に立てばと。