OmniAICreator/Qiita-1.07M huggingface dataset:
[Visualforce] <apex:actionRegion> 使用方法


## 経緯
入力内容によって後続の選択値を変えたいのに、
`<apex:inputFile>`タグとrerender属性の併用で発生するエラーが発生してしまった。
```
apex:inputFile can not be used in conjunction with an action component, apex:commandButton or apex:commandLink that specifies a rerender or oncomplete attribute.
```
`<apex:actionRegion>`を使って対応できたので備忘録!


## apex:actionRegion


[apex:actionRegion:Visualforce開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_compref_actionRegion.htm)によると、
「コンポーネントを区切る領域」、rerender属性での動作制御が可能。


```
<div>
    種別：
        // Apexに送りたい部分だけactionRegionで囲む。inputFileは入れない
        <apex:actionRegion>
            <apex:selectList id="type_1" value="{!selectedType}" size="1">
                <apex:selectOptions value="{!types}"/>
                <apex:actionSupport event="onchange" reRender="type_2,type_3"/>
            </apex:selectList>
        </apex:actionRegion>
        <apex:selectList id="type_2" value="{!selectedType2}" size="1">
            <apex:selectOptions value="{!types2}"/>
        </apex:selectList>
        <apex:selectList id="type_3" value="{!selectedType3}" size="1">
            <apex:selectOptions value="{!types3}"/>
        </apex:selectList>
</div>
```

## あとがき
一生初心者なのでよりよい方法があったら教えてください!
ReactでContextを使おうとして[Context.Provider] is not a route component 

# 初めに
Reactの学習のためにReact + Rails で小さなアプリケーションを作成しています。
ログインしたユーザーの情報をグローバルに持ちたかったのでContextを使ってみたらうまく動かず少し時間を溶かしてしまったのでメモ。
誰かの役に立ちますように。

### Contextとは
親から子にデータをpropsとして渡すのが基本ですが、親のデータをひ孫で使いたいだけなのに子、孫とpropsを渡すのは大変。というときに親のデータをひ孫でもpropsのリレーをしないで使えるようにする方法です。
VueでいうところのProvide,inject

https://ja.reactjs.org/docs/context.html

## エラー: [Context.Provider] is not a route component 

ドキュメントや多くの記事を参考に以下のように実装してみたところ題名のエラーが発生しました。
```jsx
import { createContext } from 'react';
import { Route } from 'react-router-dom';
import Home from './components/Home'

export const UserData = createContext()

function App() {
  return (
    <div style={{ textAlign: 'center' }}>
      <Route path="/" element={<Top />} />
      <UserData.Provider value={"ほげ太朗"}>
        <Route path="/home" element={<Home/>}>
      </UserData.Provider>
    </div>
  );
}

export default App;
```


## 解決法

```jsx
import { createContext } from 'react';
import { Route } from 'react-router-dom';
import Home from './components/Home'

export const UserData = createContext()

function App() {
  return (
    <div style={{ textAlign: 'center' }}>
      <Route path="/" element={<Top />} />
      <Route path="/home" element={
        <UserData.Provider value={"ほげ太朗"}>
          <Home />
        </UserData.Provider>
      }/>
    </div>
  );
}

export default App;
```

Routerを使っているから公式ドキュメントとかのまるっと参考にしてはいけなかったのかも？

#### 参考
- https://stackoverflow.com/questions/73220330/how-can-i-solve-context-provider-is-not-a-route-component-error-in-react
MacにTerraformをインストール

# 環境
```
% sw_vers
ProductName:	macOS
ProductVersion:	12.6
BuildVersion:	21G115
% 
% brew -v
Homebrew 3.6.6
Homebrew/homebrew-core (git revision c6c9e681ea6; last commit 2022-10-19)
```

# インストール

## 1. tfenv をインストール
```
% brew install tfenv
...
（インストールログは省略）
...
% 
% tfenv --version
tfenv 3.0.0
```
※`tfenv`はTerraformのバージョン管理マネージャー

## 2. Terraform をインストール
```
% tfenv list-remote
1.3.2
1.3.1
（中略）
0.1.1
0.1.0
% 
% tfenv install 1.2.0
...
（インストールログは省略）
...
% 
% tfenv use 1.2.0
Switching default version to v1.2.0
Default version (when not overridden by .terraform-version or TFENV_TERRAFORM_VERSION) is now: 1.2.0
% 
% tfenv list     
* 1.2.0 (set by /opt/homebrew/Cellar/tfenv/3.0.0/version)
% 
% terraform --version
Terraform v1.2.0
on darwin_arm64

Your version of Terraform is out of date! The latest version
is 1.3.2. You can update by downloading from https://www.terraform.io/downloads.html
```
telnetでhttp、opensslでhttpsをテストしてみる

# はじめに

Webサーバを建てたら必ず生レスポンスをチェックしたいよね。
HTTPとHTTPSでは方法が異なるのでその方法。
何度も聞かれるので書いておきます。

:::note warn
下記に記載のコードは、末尾にスペースと改行文字が入っています。コピーする際はご注意を。
:::

# 目次

[1.「httpの場合」はtelnetコマンド](#1httpの場合はtelnetコマンド)
[2.「httpsの場合」はopensslコマンド](#2httpsの場合はopensslコマンド)
[3.（番外）SSL証明書がVirtual Host名に対応しているか確認](#3番外ssl証明書がvirtual-host名に対応しているか確認)
[4.（さらなる番外）SSL証明書のコモンネームと有効期限も確認](#4さらなる番外ssl証明書のコモンネームと有効期限も確認)
[5.（もっと番外）SANSも列挙しちゃう](#5もっと番外sansも列挙しちゃう)

# 1.「httpの場合」はtelnetコマンド

※サーバ名が「www.example.jp」の場合

```
$ telnet www.example.jp 80 ↲
GET / HTTP/1.0 ↲
Host: www.example.jp ↲
↲
```

:::note info
通常レンタルサーバなどはVirtual Host設定になっているので、Host: ドメイン名 は書く癖をつけたほうが良いです。
:::

# 2.「httpsの場合」はopensslコマンド

※サーバ名が「www.example.jp」の場合
※サーバによっては-crlf（これはCR+LFを送る為のオプション）は不要です

```
$ openssl s_client -connect www.example.jp:443 -crlf -servername www.example.jp　↲
[ 省略 ]
GET / HTTP/1.0 ↲
Host: www.example.jp ↲
↲
```

:::note warn
証明書のコモンネームと同じであれば -servernameオプションは不要ですが、証明書に複数のドメイン名が登録されている場合は、必ず入力してください。
:::

# 3.（番外）SSL証明書がVirtual Host名に対応しているか確認

2.の方法ではサーバ名がSSL証明書に対応しているかまではわからないので、そこまでチェックする。長いけど接続先のサーバ名と表示したいサーバ名の2箇所を変更するだけなので許してほしい。
「0」ならOK、それ以外ならNG

```
$ SV="www.example.jp"; openssl s_client -connect example.jp:443 -crlf -servername $SV < /dev/null 2> /dev/null | openssl x509 -text |grep $SV; echo $? ↲
[ 省略 ]
0
```

:::note warn
ワイルドカードの場合はマッチしないのでNGになります
:::

# 4.（さらなる番外）SSL証明書のコモンネームと有効期限も確認

こっそりgoogle.comの証明書を覗いてみる

```
$ openssl s_client -connect google.com:443 -crlf < /dev/null 2> /dev/null | openssl x509 -noout -subject -dates ↲
subject= /CN=*.google.com
notBefore=Sep 12 08:16:59 2022 GMT
notAfter=Dec  5 08:16:58 2022 GMT
```

:::note warn
期間はGMTなので注意
:::

# 5.（もっと番外）SANSも列挙しちゃう

```
$ SV="www.example.jp"; openssl s_client -connect example.jp:443 -crlf -servername $SV < /dev/null 2> /dev/null | openssl x509 -text |grep DNS: ↲
[ 省略 ] ※Subject Alternative Nameがあれば表示される
```

# ごにょごにょヘラヘラひっそり雑談

最近、フリーランスが流行っているのか営業メールが多々来る。
是非仕事をやらせてくださいとのことなので、微妙なポートフォリオを確認後試しに発注してみる。
がしかし、納期前日に「すみません、できませんでした。お金は要りません」とか連絡が取れなくなるなど、考えられないことを平気でやってのける心臓の強さは誰にも負けないであろう人たちが多いんですよ。

**頼む、やめてくれ**

# おわり

結局コマンドなんてのは常に使うものを暗記して「たまに使うものはあわよくば覚えてれば」くらいの感じでやらないと、どうやっても挫折する。だってこんな長いワンライナー1日置きくらいに打たないと暗記なんてできるわけない。

はっきり言って、100％覚えるのに3年かかるなら常に使うだろう20を半年で完全に暗記しどんな環境でもすぐに思い出せる状況にする、それ以外はなんとなくでも覚えてればそっちの方が即戦力になる。試験じゃないんだから辞書見てもチートシート見ても良いんだよ。

今生き残っているミドル級エンジニアはみんなそんなもんだと思うよ。
Wordpress用のショートコードを自作して穴埋め問題を簡単に作れるようにしてみた

# 1. 用途
wordpressの記事に「穴埋め問題」を埋め込みたい時などに参考にしてください。

# 2. サンプル

```:wordpressショートコード
[fill_blank A=弱者男性 B=8 C=4]
この法人は、「特定非営利活動法人日本{{A}}センター」といいます。
設立日(2022年{{B}}月{{C}}日)時点において、
日本で唯一、「{{A}}」の文字列を名称に含む法人となっています。
[/fill_blank]
```
上記のショートコードにより、次のような穴埋め問題が生成されます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOzJeQx" data-user="17ec084" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/17ec084/pen/gOzJeQx">
  fill_blank</a> by 平田 智剛 (<a href="https://codepen.io/17ec084">@17ec084</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 3. 導入方法

`functions.php`の末尾に、次の内容を追記します。

```php:functions.phpの末尾に追記
function fill_blank_func( $atts, $content = "" ){
    $keys = array_keys($atts);
    foreach($keys as $key){
        $value = $atts[$key];
        $button = "<span class='fill_blank_$key'><button onclick='";
        $button.= <<<EOT
(function(){
    var elements = document.getElementsByClassName("fill_blank_$key");
    for( let i = 0 ; i < elements.length ; i ++ ) {
        var element = elements[i];
        var button = element.children[0];
        var answer_span = element.children[1];
        if (answer_span.style.display == "inline"){
            answer_span.style.display = "none";
            button.style= "";
            button.innerHTML = "　" + button.innerHTML + "　";
        }else{
            answer_span.style.display = "inline";
            button.style = "font-size: 0.2rem";
            button.innerHTML = button.innerHTML.replaceAll("　", "");
        }
    }
})()
EOT;
        $button.= "'>　" . strtoupper($key). "　</button><span style='display:none; color:red'>$value</span></span>";
        $content = str_ireplace( "{{".$key."}}" , $button , $content);
    }
    return $content;
}
add_shortcode('fill_blank', 'fill_blank_func');
```

やっていることとしては、穴の名前(サンプルでいう「A」～「C」)ごとにclass属性を与え、各classに対してjavascriptを使い、穴の中身(答え)に対応する要素のstyle属性、displayプロパティを切り替えることにより、表示／非表示を入れ替えるというものです。


同じ記事が、自社ブログにも掲載されています！

https://men.or.jp/blog/hi/2022/10/19/09:30:06.105/
「プロパティ '' は型 'CombinedVueInstance<Record<never, any> &...' に存在しません。ts(2339)」という難題すぎるエラー

# 問題
```
any

プロパティ 'hogeArr' は型 'CombinedVueInstance<Record<never, any> 
& { formatDate(date: Date, format?: string): string; min2hour(time: number): string; 
setScrollHint(message?: string): void; scrollPageTop(): void; clearErrorBar(): void; 
showErrorBar(errorMessage: any): void; showErrorBarWithScrollPageTop(errorMessage: any): void; 
apiErrorHandl...' に存在しません。ts(2339)
```
下記のコードで```this.hogeArr```をhoverすると、上記のような型のエラーが表示されてしまった。
```javascript

 data(): {
    hogeArr: string[]
  } {
    return {
      hogeArr: [],
    }
  },
  methods: {
    hoge(key: string): void {
      this.hogeArr.push('HAHAHA')
      this.$logger.info('hoge man is back!!:)')
    },
    hoge2(key: string): void {
      this.$logger.info('hoge2 man is back!!:)')
    },
},
computed: {
    hoge(key: string): void {
      return 'hoge man is back!!:)'
    },
    hoge2(key: string): void {
      return 'hoge2 man is back!!:)'
    },
}
```

みなさんも同じようにこのわけのわからない見覚えもない型定義した記憶もないエラーに遭遇をしたことはあるのではないか。
そして追記しただろう。邪悪な魔法「// @ts-ignore」を。


# このエラーに対する先人たちの解決方法
[このような記事](https://qiita.com/shunjikonishi/items/3774486d37af80d1ae47)もあって、anyや@ts-ignoreでエラーを無視したり(超非推奨だけど、この場合はもうそれでもいい気もしてしまう)、

下記のようにVueのすんごい深いところを書き換えたりする方法があるみたい
```
import Vue from 'vue'
import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'

interface DataType {
  someState: string
  ...
}

interface MethodType {
  someMethod(): void
  ...
}

// 使ってない場合は空でOK
interface ComputedType {}
interface PropType {}

export default Vue.extend({
} as ThisTypedComponentOptionsWithRecordProps<Vue, DataType, MethodType, ComputedType, PropType>)
```
「これをして、誰も読み解けないコードを量産するくらいなら最強の呪文「@ts-ignore」を使っちまおう」と思いましたね。
自分もそう思いました。しかし、他にも方法があったんですねー。


# New!!解決方法
computedとmethodsの全ての戻り値に型定義をする・・・！！！

下記の素晴らしいコードのように、すべてのmethodsとcomputedの戻り値にvoidなり、stringなり、string[]なりを定義してあげると解決します。

これでもダメならひたすらつけれる個所全てに型定義をしてみてください、、、

```javascript
methods: {
    hoge(key: string): void {
      this.$logger.info('hoge man is back!!:)')
    },
    hoge2(key: string): void {
      this.$logger.info('hoge2 man is back!!:)')
    },
},
computed: {
    hoge(key: string): void {
      return 'hoge man is back!!:)'
    },
    hoge2(key: string): void {
      return 'hoge2 man is back!!:)'
    },
}
```


# 参考

https://qiita.com/shunjikonishi/items/3774486d37af80d1ae47

# 追記
他に何か方法ご存じの方いれば共有していただけると大変助かります👩🏼‍🤝‍🧑🏻
peco で npm-scripts を簡単に実行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200/ba116e6a-7bc0-aac6-2dd4-a3b15cf50d31.png)

[pecoでnpm-scriptsを超簡単に実行したい - Qiita](https://qiita.com/hogesuke_1/items/46f009f31b5f2ec8c02c) のような先人がいるけど、この方法だと表示されるのはコマンド名だけで、コマンドの内容も表示したかったので、改良版を作った。 要 jq 。

適当な短いエイリアスでも付けて使ってください。

```bash:.bashrc
npm_run_peco() {
    local selected=$(
        cat "./package.json" \
        | jq -r '.scripts | to_entries | map("\(.key)#\(.value)") | .[]' \
        | column -t -s# \
        | peco \
        | perl -pe 's/ +.+$//'
    );
    if [ -n "$selected" ]; then
        yarn run $selected;
    fi
}
```

zsh 利用者でキーバインドで実行したい人は下記も追記。

```zsh:.zshrc
zle -N npm_run_peco
bindkey '^n' npm_run_peco
```
【CSS】なるべくサイズに固定値を使わないようにする

## これはなに

Webページを作成する際、よくCSSでサイズを指定することがあります。

こうしたサイズ（特に幅）の指定をするときに、なるべく固定値を指定しない方が良い理由とおすすめの指定方法を紹介します。

## なぜ固定値をサイズに使わない方がいいのか

画面のサイズが変わったときや要素に変化があったときに表示が崩れてしまう可能性があるためです！

例えば、

`width: 400px`が指定されている画像を画面幅が375pxのデバイスで見るときにはみ出してしまう

`width: 200px`が指定されているボタンで、ラベルを長くするとテキストがはみ出してしまう

## どう指定すると良いのか

### 親要素からはみ出してしまうのを防ぐ

widthを100以下の`%`で指定することで、親要素より大きくなることを防ぐことができます。

画面幅に対してであれば、ビューポートに対しての相対サイズを指定できる`vw`, `vh`も使えます。

特定の幅にしたい場合は、その値を`max-width`で指定し、`width`は`100%`で指定しておけば、親要素が特定の幅より余裕がある時はその幅で、はみ出してしまうような時は親要素に収まるサイズになります。

### 子要素がはみ出してしまうのを防ぐ

大きさを`padding`で確保することで防ぐことができます。


特定の幅にしたい場合は、`min-width`で指定することで、万が一要素が大きくなった時はサイズが大きくなるのではみ出すことを防げます。
1OS授業解説: Python入門

# はじめに
この記事は, 同じ学科の1年生向けに書かれたものです.
掲載されているコードなどは, 2022年度の授業スライドに基づいています.

また, 授業後の復習以降, 全く手を加えていないため, 
「もっと上手く書けるんじゃないの..?」等あるかと思いますが, 
ご了承ください🙏

#### 追記(2023/4/5)
面倒になり書かなくなってしまいました...(ごめんなさい)

続きがいつになるかはちょっとわかりません.

質問やわからない問題などあればいつでもtwitterで聞いてください!



# リンク集

### 〜Pythonの基礎知識〜

入出力・演算・関数

https://qiita.com/tusoscocoa/private/90ebc4393360779677f9

分岐・ループ・ネスト

https://qiita.com/tusoscocoa/private/2d3e6b0eb024288c47a1

文字列操作

https://qiita.com/tusoscocoa/private/f0de08ab82b514e620f8

### 〜Pythonによるデータ処理〜
Nuxt３ で開発してみてハマったことレポート

# １．はじめに

https://news.kllc.jp/entry/2022/10/17/111553

自社で「Power Portal Framework(仮)」の開発を開始しようとおもって、昔のリポジトリをコピーして作ろうと思ったけど
将来性を考えて、Nuxt2じゃなくて、Nuxt3で作ったほうが良さそうかなと思いました。
考えた結果、

https://note.com/kllc/n/n5dbb147d4eb1

Nuxt3を採用することにしました。
以下の記事を参考に、Vuetify3を入れました。

https://zenn.dev/one_dock/articles/ab6d178741956d

Nuxt3でハマったことなど、書いていきます。

# ２．予備知識

Nuxt3がNuxt2と違うところ。
いやぜんぜん違うやん。やめとけばよかったかな。

https://tenderfeel.xsrv.jp/javascript/5972/

# ３．フォルダ構成

Nuxt2のときは、フォルダある程度できてたように思いますが Nuxt3 は無いです。
何から始めたらいいか迷子になりました。
とりあえず、必要になるであろうフォルダは先に作っておいたほうがいいのではと思いました。

composables
components
pages
public
plugins

https://www.ragate.co.jp/blog/articles/12663


# ４．ひながた

Vuetify2のときは、アプリのテンプレートがあったけど、Vuetify3は現時点でまだないみたい。
困りました。
以下を参考にさせてもらいました。

https://zenn.dev/yuta_enginner/articles/84f6ef77a0495f

# ５．Composition API か　Options API か

Nuxt3で一番困ったのはこれ。
最初、全然意味がわからなかった。
今まで使ってた、Data とかMountedとか書くやりかたが Options API で、Composition APIは違う書き方をするらしい。
従来の書き方でも書けるみたいだけど、どっちにするか悩む。
でもせっかくなので、Composition APIを採用することにしました。

https://qiita.com/karamage/items/7721c8cac149d60d4c4a

https://vuejs.org/guide/extras/composition-api-faq.html#comparison-with-react-hooks

Composition APIは、省略できるいろんな書き方があって、どれをコピペしたらいいのかが分からない。
一番コード量が少ないのは、Script Setup を使うことなんだけど、returnが省略できることなどがわかっていないと、他のソースとの整合性がわからなかった。

https://zenn.dev/coedo/articles/86bc31acb4ea47

# ６．Typescript

Typescriptはよくない。
自作のモジュールのインポートができなくて悩む。
どうもTypesciprtのせいらしいけど、型定義ファイルの作り方で必死になったけど。無理だった。
結局、モジュール側を改修して対応。

https://qiita.com/Nossa/items/726cc3e67527e896ed1e

TypeScriptのスコープの問題？でハマることがあった。
export {} 
を書くといいらしい。意味なんか知らなくても大丈夫かな。

https://zenn.dev/takumiabe21/articles/120336a74c67bc

あと未解決の問題。
nuxt instance unavailable 　がたまに出て何が原因かわからない。
保存し直したらなおったりするので、さらによくわからない。
気づいたのは、types配下のフォルダのファイルを nuxt が自動的に更新することがあるみたいだけど、それらと関係があるのかな。

https://zenn.dev/sngazm/scraps/753b53e7dcea26


たいぷすくりぷと、だいぶ苦戦してます。やる意味あるかなぁと落ち込みながら以下の記事を読む。

https://engineering.linecorp.com/ja/blog/benefits-and-costs-to-consider-when-installing-typescript/

# ７．その他

v-iconが表示されなかった。4h悩みました。以下に記事書きました。

https://zenn.dev/kllc/articles/4dad079c373173


# ８．コピペエンジニアのまとめ

よく考えたら、自分はコピペエンジニアだった。
ネットにソースがあまり転がってない状態で取り組むのはよくなかったかも。
一番の問題はここ。
あと、新しいことが多すぎて、それだったら、Reactにしようかなと4時間くらい浮気しました。
でもなんとかなりそうです。とりあえず、ログイン処理まではできたので、またハマったこと、気づいたことがあったら書いていきます。
値を任意の閾値でランクに分割する(SPSS Modeler データ加工逆引き3-15)

## 値を任意の閾値でランクに分割する

![スクリーンショット 2022-10-14 9.35.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/cdb870a9-dc6a-5787-537b-626144ffae53.png)

## 1.想定される利用目的

・優良顧客の定義
・異常検知/故障予測のための特徴量作成

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/blob/main/rank.str?raw=true

## 3.サンプルストリームの説明

![スクリーンショット 2022-10-14 9.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/2691acff-be2d-dca8-c1ef-e3924ad4c278.png)

a.入力するデータは以下の通りです。
![スクリーンショット 2022-10-14 9.38.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/1f5f5658-8e6e-4f99-5a31-089f26a3403f.png)

#### 名義型の定義をヒストグラムから自動生成させる方法

b.[ヒストグラム]ノードを実行します。[表示]メニューから[インタラクティブ]をオンにして以下のように赤い縦棒を大よそ10万、20万、40万の3カ所に配置します。
![スクリーンショット 2022-10-14 9.39.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/025958b5-31de-91f9-75c5-f02b448cc251.png)

[生成]メニューから[バンドのフィールド作成ノード]を選択します。
![スクリーンショット 2022-10-14 9.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/06836af9-4403-61bd-53df-89459dd8069a.png)

ストリーム領域左上に新しいノードが生成されます。
![スクリーンショット 2022-10-14 9.41.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/5a13c226-76db-eb7f-1869-52163b68876b.png)

生成されたノードをダブルクリックします。
![スクリーンショット 2022-10-14 9.42.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/4a0d7425-849f-14e5-fc81-1825aa25a7cf.png)

以下のようにフィールド名と設定値、式を整えるとCになります。
![スクリーンショット 2022-10-14 9.42.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/dfe9c696-a0ca-bb05-b46e-65101b1808b8.png)

式を整える時には電卓アイコン（式ビルダ）を利用すると簡単に入力できます。
![スクリーンショット 2022-10-14 9.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/e3500487-9d01-76b5-dc56-21c5a1960927.png)

c.[プレビュー]します。ランクが作成されました。
![スクリーンショット 2022-10-14 9.46.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/4dca95b5-cde6-40e5-c51f-55e7c3f3a872.png)

d.[ヒストグラム]ノードを編集します。[rank]をオーバーレイします。
![スクリーンショット 2022-10-14 9.45.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/a3731af4-7cbc-627e-3401-75bd89039e79.png)

実行します。
![スクリーンショット 2022-10-14 9.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/7c5bb17c-0980-360a-d6b9-7808086f26de.png)

#### Clem式で条件式を記述する方法

cのノードを以下のように直接式で定義してもOKです。
![スクリーンショット 2022-10-14 10.15.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/2dbb9b43-5cb2-5e9e-69bb-825d23c050f9.png)

#### 注意点

DからBまでのランクに該当しないデフォルト値をAランクにしましたが、業務で予期せぬ値が含まれる場合がある時は、全てのランクを定義しデフォルト値は[undef]としてNull値にするのが安全です。

## 4.参考情報

#### 年齢から年代を作る

https://qiita.com/416nishimaki/items/96a29b4d802d28a52d71

#### ランク分けに関する記事

https://qiita.com/kawada2017/items/c73bcf86aed73e195134

https://www.ibm.com/blogs/solutions/jp-ja/modeler-tips-18/

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
API Gateway カスタムドメイン設定方法

# 目的
Lambda+API Gateway構成で、証明書を作成してAPIGatewayにカスタムドメインを設定する方法を
試しにやってみたので、手順書的なもの。
※ Route53でのホストゾーンの作成は済んでいるものとします。
※ ACMを使った証明書も作成済みとします。
# やったこと
API Gatewayを開き「カスタムドメイン名」を選択します。

①今回指定したいドメイン名を定義します。
②ACMで作成した証明書を選択します。
![スクリーンショット 2022-10-17 21.56.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542333/fa30e287-367f-a0ed-ae02-8d75d0452568.png)

次にAPI Gatewayの画面に移るので、「APIマッピング」を選択し、設定を行います。
①対象のAPI Gatewayを選択
②対象となるステージを選択
③パスも設定(Lambda関数名)
![スクリーンショット 2022-10-19 8.39.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542333/b1bb7854-8216-1ca2-591a-7863619de3e8.png)

次にRoute53でレコードを追加します。
Route53から対象となるホストゾーンを選択して、「レコードの追加」を選択します。
次に
①対象となるレコード名を記載
②トラフィック先を対象となるAPI Gatewayのエンドポイントに選択します
![スクリーンショット 2022-10-19 8.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542333/ce447027-0929-2b35-a68c-61511b83191e.png)


これをすることで、現在API Gatewayへのエンドポイント指定だったのを
カスタムドメインで管理することができます。

例えば
```ruby:
$.post('API Gatewayのエンドポイント')
```
↓
```ruby:
$.post('API Gatewayのカスタムドメイン / API Gatewayの時に決めたパス')
```
っとなるので管理が楽になります。
Windows CommendLine 一覧

##コマンドプロンプトで0byteファイルを作成する

Linuxコマンド → $ touch example.txt

`Windows → type nul > example.txt`

//指定されたファイルをコピー。これでもファイルの新規作成が可能
`Windows → copy nul > example.txt`


##ファイルの中身を確認する

Linuxコマンド → $ cat example.txt

`Windows → type example.txt`


##ディレクトリを作成する

Linuxコマンド → $ mkdir test

`Windows → mkdir test`
アクセスベクター



**アクセスベクター**　

- SELinuxのポリシー
- 「どのドメイン*が、どのタイプに対して、どのクラスの場合に、どのような権限（rwx）を持つのか」を定義
  *ドメイン = サブジェクトのタイプ
- sesearchコマンドで検索して表示することができる。



**参考になったページ**　

https://qiita.com/sato4557/items/8098ec290a8767e3808d


いつもありがとうございます。
変更に強いコードを設計する(DIパターン)

# 初めに
適切に設計されたオブジェクトは単一責任になっているので実際のアプリケーションでは複数のオブジェクトを組み合わせて仕事をしています。あるクラスから他のクラスを呼び出したり、モジュールをインクルードしたり。そうすることで相互に依存が発生します。依存が発生すること自体は避けられませんが、依存の方法を管理することで変更に強いコードにすることが可能です。

管理しやすいコード、変更に強いコードを書けるようになりたくてオブジェクト指向について学習しています。
学んだことをまとめます。


# 依存関係があるとはどんな状態か

オブジェクトが以下について知っているときは依存関係がある状態です。
1. **他のクラスの名前**
1. **self以外に送ろうとしているメッセージ(メソッド)の名前**
1. **メッセージが要求する引数**
1. **そのメッセージが要求する引数の順番**

コード例
```ruby
class Gear
  def initialize
  end

  def gear_inches
    ratio * Wheel.new(rim, tire).diameter
  end
end
```

**Gearクラスは**
- Wheelというgear_inchesメソッド内でクラス名を知っている(1)  
- Wheelクラスにdiameterメソッドがあることを知っている(2)
- Wheelクラスの初期化に rim, tire が必要ということを知っている(3)
- rim, tireという順でnewメソッドに渡さないといけないということを知っている(4)

正しく設計されたオブジェクトは単一責任なので依存関係は発生します。
ただ、依存の仕方を工夫することで変更に強いコードにすることができます。


# 依存を注入する(DIパターン)
**Wheelというクラス名を知っている(1)** に対応する方法としてDIパターン(dependency injection)があります。外部クラスをメソッド内で初期化して使用するのではなく、外部クラスのインスタンスを受け取ってそれを使用するという方法です。
コード例
```ruby
class Gear
  attr_reader :wheel
  def initialize(wheel)
    @wheel = wheel
  end

  def gear_inches
    ratio * wheel.diameter
  end
end
```

gear_inchesでWheelクラスをnewするのではなくGearクラスを初期化する際に引数として受け取るようにしました。
この変更で受けられるメリットは
- **Wheelクラスのクラス名が変更されたとしても影響が及ばなくなった** 
- **diameterというメソッドを持つクラスなら受け入れられるようになった**

今まではWheelクラスのdiameterと固定されていたのが、さまざまなクラスで再利用できるようになりました。
インスタンスを受け取るようにしたので
**Wheelクラスの初期化に rim, tire が必要ということを知っている(3)** 
**rim, tireという順でnewメソッドに渡さないといけないということを知っている(4)**
についてもGearクラスは知る必要がなくなって疎結合になりました。(4)の順番についてはRubyであれば引数をハッシュで渡すかキーワード引数を使うことで順番に関する知識を持つ必要がなくなります。

このような対応が制約上取れないといった場合はWheelクラスをgear_inchesで初期化するのではなく初期化用のメソッドに切り出すなどの方法をとることでGearクラスがWheelクラスに依存しているということを表現することができます。


## 参考
- [オブジェクト指向設計実践ガイド](https://www.amazon.co.jp/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E8%A8%AD%E8%A8%88%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%EF%BD%9ERuby%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8B-%E9%80%B2%E5%8C%96%E3%81%97%E3%81%A4%E3%81%A5%E3%81%91%E3%82%8B%E6%9F%94%E8%BB%9F%E3%81%AA%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%82%B2%E3%81%A6%E6%96%B9-Sandi-Metz-ebook/dp/B01L8SEVYI/ref=sr_1_1?adgrpid=54056336555&gclid=Cj0KCQjwnbmaBhD-ARIsAGTPcfUpaYNneRoRvFrxPcZrRRjdyHMZAyWRPhhHTAO6QNpmXEFtFaqT9kEaAgs3EALw_wcB&hvadid=618622426075&hvdev=c&hvlocphy=1009318&hvnetw=g&hvqmt=e&hvrand=14618693204932469220&hvtargid=kwd-334790686516&hydadcr=27268_14598057&jp-ad-ap=0&keywords=%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E8%A8%AD%E8%A8%88%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89&qid=1666106336&qu=eyJxc2MiOiIwLjcyIiwicXNhIjoiMC43NyIsInFzcCI6IjAuMzUifQ%3D%3D&sr=8-1)
iOS App Dev Tutorialsを読んでみた。その１

## この記事を始めた理由
AppleがiOSのチュートリアルを出していたので、これを全部やってアプリが作れるか試してみた。

## 今回の範囲
[Getting started with Scrumdinger ](https://developer.apple.com/tutorials/app-dev-training/getting-started-with-scrumdinger)
第１回目は今回やっていくチュートリアル、Develop apps for iosの概要を理解するための概要を読んでまとめてみる。

## 内容の要約
### 1. このモジュールについて
* 　このチュートリアルではSwiftUIを使用する。
* 　このチューとリアルでSwiftUIの基礎を学ぶ。

### 2. SwiftUIの概要
* 　SwiftUIはあらゆるAppleのアプリ基礎を構築するための言語。
* 　SwiftUIを使えばより早くより正確にエラーを少なくアプリを
作成することができる。
* 　宣言的な構文でシンプルなSwiftを使用して画面に映される内容
を決定する。
* 　構成的なAPIを使えば、組み込みの内容と修飾子を利用しUIを素早く作り繰り返し<br>使用できるシンプル画面に表示する内容と合わせてより高度な内容を表示させることもできる。

### 3. アプリについて
* 　様々なソフトウェア開発エンジニアリングチームが**スクラム**という、<br>毎日の短い時間ミーティングで作業計画や問題を話し合っている。
* 　下の写真のアプリはスクラムで使われている便利なiOSアプリ<font color="Red">Scrumdinger</font>ですこれを今から作ります。
<img width="200" alt="SUI_000-002-001@2x.png
" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/1a647e53-bbba-6724-266e-01f11098fae3.png"><img width="200" alt="SUI_000-002-002@2x.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/ace00c32-4944-cbcd-e7d5-175fdbd60ff3.png"><img width="200" alt="SUI_000-002-003@2x.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/d861f38f-df7a-60c8-2d3c-dff6fe45d073.png">
* 　スクラム一覧にはユーザーの毎日のスクラムの概要が表示されており<br>新しいスクラムを追加することもできる。
<img width="300" alt="SUI_000-002-001@2x.png
" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/1a647e53-bbba-6724-266e-01f11098fae3.png">
*ここでは下の写真のようにミーティングリストなどがあり編集することができる。<br>リスト上部の`『ミーティング開始』`のボタンを押すと会議用のタイマーが開始される
  <img width="300" alt="SUI_000-002-002@2x.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/ace00c32-4944-cbcd-e7d5-175fdbd60ff3.png">
* `『ミーティング開始』`を押すとタイマーが起動される写真のようにタイムバーが現れ<br>残り時間をわかりやすく表してくれる。画面の中央には今話している人を表してくれる。<br>画面右下に次の話手に交代するためのボタンもある。　<br>　時間が経ちタイムバーがいっぱいになると会議は終わる。
　<img width="300" alt="SUI_000-002-003@2x.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/d861f38f-df7a-60c8-2d3c-dff6fe45d073.png">

### 4. チュートリアルの成功の秘訣
* とりあえずやってみましょう一度実行してみることで発見が生まれます。
* 積極的に学ぶ事でより早く学べます。これがこのチュートリアルの秘訣です。
#### 　　　　次の記事　　<br>　　　　　　[iOS App Dev Tutorialsを読んで実際にやってみた。その２](https://qiita.com/shomiya181210/items/b7b44c8d13e0463c49b1)
【情報処理技術者試験】久しぶりに受けるそこのあなたへ

# はじめに
もうすぐ春試験ですね。
最近、社内で高度情報を受けなければいけないという風潮が強くなってきたので、
毎年受けている自分の知恵が久しぶりに受ける方の役に立てばと思い投稿しました。

# 前提
* 筆者は、東京都と千葉県での受験をした経験があり、その経験をもとに記載しています。
それ以外の受験地では異なることがあると思います。ご了承ください。

# 対象者
* 久しぶりに情報処理を受けに行く方

# 受験の初歩的ミス（実体験）
2022年秋試験は、データベーススペシャリストを受験しました。
受験会場は東京都内の大学で、午前Ⅰ免除で、午前Ⅱからのスタートです。
午前Ⅱが開始する30分前に試験を受ける部屋に到着し、さてさてと受験票を机の上に置きました。
そこで、「あ！」と大変なことに気づきました。受験票に証明写真がないのです…！！
「し、しまった、完全に、忘れていた！」と冷や汗をかきながら、「落ち着け、まだ時間はある」と近くの証明写真機をGoogleMapで探しました。
大学構内に1つ、大学外に1つ見つけました。
急いで近い方から探しに行きましたが、大学構内の証明写真機は撤退しているようで存在せず！（当てにするんじゃなかった）
大学外の方は存在していたので、そこで無事に写真を撮ることができました。（この時点で残り15分切る）
印刷された写真はシール化されておらず、急ぎコンビニを探し、証明写真機からは大学を挟んで反対側にあるコンビニに向かって、大学の門から門を突っ切り、ハサミと糊を購入しました。

なんとか、5分前くらいに受験する部屋にたどり着き、すぐさま購入したハサミで証明写真を切っていたところ、
試験管の方が、「糊使いますか？」とスティック糊を差し出してくれました。
試験管はもっと厳しいと思っていたので、こんな優しい対応をしてくれるとは、、、と感動しました。
人の優しさが心に染みますね。

久しぶりに受験する方は、こんなミスをする可能性大いにあると思います（笑）。
ぜひ、知ってさえいれば防げることは防いでください。

# アドバイス
## 受験前
* 予約を忘れない、早めに申し込む。
受験の2ヶ月前には締め切りになっているので、お気をつけて。
早めに申込をすると家の近くになるらしい（本当かどうかよくわからないが）。

## 受験直前（前日に確認すること）
* 会場に時計はないので必須です。スマートウォッチはだめです。
普段スマートウォッチを使っている人は気をつけてください。
* 証明写真を忘れないように！
先程申し上げたとおり、やらかしたときのインパクトが大きいのでご注意ください。
* 当日の会場に変更がないか、HPでチェックすること。
数年前に大雨か何かで、とある大学が浸水して試験会場が変更されていて、会場に行ったら間に合わないような別の場所に変わっていたことがあった記憶が。
東京都内の塾がいくつか利用されていて、受験番号で場所が指定されていたと記憶しています。
天気が悪いときは気をつけてください。
* スリッパが必要な大学もあるらしい。私は出会ったことないですが、受験票チェックお気をつけて。
* データベーススペシャリストは定規を持っていくように。重宝します。

## 受験当日
* 受けに行く。
情報処理は受けに行かない人が多いです。受けに行くだけまず偉い！
* 受験番号を書くのを忘れない、選択問題に○をつけるのを忘れない。
* 会場近くのコンビニは受験者によって買い荒らされたり、場所によっては駅のコンビニしかなかったりします。
自分の家の近くで購入しておいたほうが楽。

## 試験内容
* 午前Ⅰも午前Ⅱも見たことないような単語の問題は必ず出てきます。
そういうのは捨て問です。6割取ることを目指してください。
* 「透過性」と行ったら、ユーザが気にせずアクセスできること。午前でよく出てくる。
（レベルが他と合っていない内容ですが覚えておくと結構助かると思い記載しております）

## 受験後
* 午前の解答は当日に公式が出してくれます。

# 【参考】受験記録
私の受験記録です。
[【情報処理技術者試験】論文対策　直前でも知っておくとよいポイント](https://qiita.com/j-kimu/items/dcd5a62593e9ac892d30)の記事から転記して、その後の情報を追加しています。

| 年度| 試験| 受験条件| 結果| 勉強方法| 感想|
|:---| :---| :---| :---| :---| :---| 
|2014年秋| 基本情報| | 合格| 独学| 1回目で受かった！と調子に乗る。 |
|2015年春| 応用情報| |不合格|独学|基本情報合格はまぐれだったなと思った。 |
|2015年秋| 応用情報| |不合格|独学|また落ちて同僚に笑われた（ツライ）。 |
|2016年春| 応用情報| |合格|独学|3回目にしてやっと合格。ほっと一息。 |
|2016年秋| セキュリティスペシャリスト| 午前Ⅰ免除|不合格|独学|どこで点数不足だったか不明。一人で勉強できないので勉強会に参加することに。 |
|2017年春| データベーススペシャリスト| 午前Ⅰ免除|不合格|会社の勉強会参加|午前Ⅱ 点数不足。DBむずすぎる。 |
|2017年秋| システムアーキテクト| 午前Ⅰ免除|不合格|会社の勉強会参加|午後Ⅱ B判定。初めてなので仕方ないよねと結果を楽観視。しかし、ここで免除が切れる。 |
|2018年春| データベーススペシャリスト| |不合格|独学（しかし全然時間が取れず）|午前Ⅰで落ちるという珍事。本当に落ちるので気をつけたほうがいい。 |
|2018年秋| システムアーキテクト|| 不合格| 会社の勉強会参加|午後Ⅱ B判定。またB判定…もう受からないんじゃないかと絶望。|
|2019年春| プロジェクトマネージャ| 午前Ⅰ免除|不合格|独学|午後Ⅰ 点数不足。論文にも辿り着けなかった。絶望。| 
|2019年秋| システムアーキテクト | 午前Ⅰ免除|合格| 会社の勉強会参加|や、やっと受かった（涙）！論文のコツを得た（気がする）。|
|2020年秋| プロジェクトマネージャ |午前Ⅰ免除| 合格|独学（2週間前から本気出した）| 受かった（涙）！論文のコツはまぐれじゃなさそうだ。とりあえず小休止。 |
|2021年秋| データベーススペシャリスト |午前Ⅰ免除| 不合格|独学（午前Ⅱは落ちたくなくて勉強した。午後は少しやったような気がする。）| とうとう午後Ⅱまで採点された。少しは成長しているようだ。 |
|2022年秋| データベーススペシャリスト |午前Ⅰ免除| 合格 |独学（午前Ⅱだけは勉強した）| 苦節4回目（涙）やっと終わって何よりです。写真撮りに走ってよかった。 |
Python,Ruby,PHP,Java,JavaScript,PerlのSQLiteの比較 | プログラミング言語比較


<a href="https://qiita.com/yuki_kimoto/items/f9c2454e7f9130ddb003">Qiita > プログラミング言語の比較</a>

プログラミング言語Python,Ruby,PHP,Java,JavaScript,PerlのSQLiteの比較

# Python

https://qiita.com/flcn-x/items/69481d31211421e21f21

# Ruby

https://qiita.com/akito_tameto/items/868e3805dc01c7bef6ef

# PHP

https://qiita.com/39_isao/items/a5b4940138bced936de0

# Java

https://qiita.com/tsweblabo/items/39bdd73a910417a9a8df

# JavaScript

https://qiita.com/zaburo/items/a155cbc02832b501a8dd

# Perl

https://perlzemi.com/blog/20091121124667.html
MySQLを触ってみよう

#データベースを作成しよう

```mysql> CREATE DATABASE データベース名_db;```
Query OK, 1 row affected (0.00 sec)

このようにMySQLから応答があればOK！


#データベースを使おう
```mysql> USE データベース名_db;```
Database changed

#データベースを削除しよう
```mysql> DROP DATABASE データベース名_db;```
Query OK, 0 rows affected (0.00 sec)
「わかりやすい文章」の技術　読み手を説得する18のテクニック

https://www.amazon.co.jp/%E3%80%8C%E5%88%86%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84%E6%96%87%E7%AB%A0%E3%80%8D%E3%81%AE%E6%8A%80%E8%A1%93%E2%80%95%E8%AA%AD%E3%81%BF%E6%89%8B%E3%82%92%E8%AA%AC%E5%BE%97%E3%81%99%E3%82%8B18%E3%81%AE%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-%E3%83%96%E3%83%AB%E3%83%BC%E3%83%90%E3%83%83%E3%82%AF%E3%82%B9-%E8%97%A4%E6%B2%A2-%E6%99%83%E6%B2%BB/dp/4062574438

背景
仕事で記事を書くことがあるのですが、もっといい文章をかけるようになりたいと思い、本書を手に取りました。

本書のテーマ
「目的を達成する文書の書き方」を紹介しています。
そこに至るために「わかりやすい文章」を書く必要があります。書き手の意図を読み手にわかりやすく伝えることです。

個人的なポイント
１、点の理解と線の理解
内容が理にかなっていないと腑に落ちない。その原因はわかりにくい文章になっていることに原因がある。こういった文章では説得力がなくなってしまう。
わかりにくい文章とはA→Bという因果関係がきちんと書かれていないから。この関係性が整理され、紐付けられる文章になっていると「わかった」となる。これが点の理解。
点の理解ができたら、線の理解にうつる。これができれば、「そうそう、そのとおり！」となる。
物事を「わけて」おけば「わかり」やすい文章になる。
「分けて」と「分かり」は似てるが偶然ではない。

２、わかり易い文章を書くための５つの技術
構成の技術
レイアウトの技術
説得の技術
センテンスの技術
推敲の技術

３、同意を求める文章は説得する文章
説得力がない文章は線（因果関係）の説明が下手。

４、納得させる裏付けを書くには？
疑問に先回りして納得の行く解説を書いておく。

５、自分の感情を抑えて書くには？
定型文を使う。
感情的な文章は実務文に適していない。感情を隠して書かなければならない。抗議や非難文章は淡々とアナウンサーのようであるべき。感情が高ぶった文章は信頼を失う。

６、推敲をする
とりあえず書く、というパターンもあるがそういう文章は「身なりを整える」必要がある。
それを推敲という。
推敲を進める上で重要な基準は「文章の目的」「そもそもなんの目的でこの文章を書いてるのか？」と自問し続けること。

最も心に残った部分
私はもともと、とりあえず文章を書く派で、書ききった後に２０回くらい適当な推敲をしていました。
それではだめだと思い、ある程度各内容を決めてから書き始めたものの、推敲を１０回くらいする形になり、以前よりも工数が減り、まとまった文章をかけるようになりました。
後者のパターンで今後も記事を書いていきたいものの、手探り状態だったので、具体的にどんな部分に注目し、推敲をすればいいのかとかがわかったのが一番ありがたかったです。

また、文章を良くするために接続詞、助詞とはなにか？みたいな本を読みましたが、あまり活用できてなかったように思います。
本書では、接続詞の使い方、使う意図、使わない意図とかまで書いてあり、具体的な記述が多い内容になっています。

今後やろうと思うこと
・記事を書くときは目的を明確に
・文章の詳細な書き方について、本書を参考にする
・遂行するときはその目的を意識する
・構成の技術については他の本からも学ぶ

まとめ
文章を書くということも奥が深いなと感じました。
今まで、簡単な文章の書き方研修や本を１〜２冊読んだだけでしたが、色んな角度から情報を集めてかみくだくことが重要に思います。
私もアウトプットが大事ということで、読んだ本を１週間で３回くらいアウトプットしてみました。
やはり、実践することで見えてくる世界があります。

文章の書き方関連の本を読んでみて思うことは、ロジカルシンキングが根底にあるということ。
そして、そのロジカルシンキングが一番関係してくるのが、説得力。
これは打ち合わせの場面でも同じですが、これができてれば「おっ！」と思われることは間違いないです。

以前、上司に「ジェネラルなスキルをつけるといい！」「ロジカルで考えるべき」といわれたことがありますが、本をいろいろ読むたびにひしひしと感じます。
【MySQL】コマンドプロンプトからログインできないときの対処法

##実行環境
OS：　Windows10

##状況
コマンドプロンプトでMySQLにログインするため、
```>mysql -umyuser -p -hlocalhost```

を打ち込み、パスワードを入力したところ、エラーメッセージが返ってきた。
```>ERROR 1045 (28000): Access denied for user 'myuser'@'localhost' (using password: YES)```

##対処方法
`>mysql -u root -p################`

このように、ユーザー名、パスワードを1行で打ち込む

```>Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 4
Server version: 5.7.40-log MySQL Community Server (GPL)

Copyright (c) 2000, 2022, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.


mysql>
Db2 Spring LibraryでDb2 on Cloudに接続する

# 目的

SpringのアプリケーションでDb2のデータソースを利用するには、アプリケーションサーバのJNDI
リソースを利用するか、自力でDataSourceオブジェクトを組み立てる必要がありますが、[Db2 Spring Library](https://github.com/ibmdb/java-db2/tree/master/db2-spring)なるものの存在を知ったので、それを使ってDb2 on Cloudに接続できるか検証してみました。

なお、今回はSpring Bootではなく通常のSpring Frameworkを使用しました。

# サンプル

## POM

```
<dependency>
    <groupId>com.ibm.db2.jcc</groupId>
    <artifactId>db2-spring-framework</artifactId>
    <version>0.0.1</version>
    <scope>test</scope>
</dependency>
```


## テストクラス

実際に動作したテストクラスのサンプルです。肝は2点あります。1点目は@Configurationに @EnableDb2を付与することと、接続情報をシステムプロパティで設定することです。今回はテストクラス内で直接System.setProperty()しています。

```java:Db2SpringTests.java
import static org.junit.jupiter.api.Assertions.*;
import java.sql.SQLException;
import javax.sql.DataSource;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.test.context.junit.jupiter.SpringJUnitConfig;
import com.ibm.db2.spring.framework.EnableDb2;

@SpringJUnitConfig(Db2SpringTests.Config.class)
public class Db2SpringTests {

    @Configuration
    @EnableDb2
    static class Config {
    }

    @BeforeAll
    static void beforeAll() {
        System.setProperty("db2.serverName", "********.********.databases.appdomain.cloud");
        System.setProperty("db2.portNumber", "*****");
        System.setProperty("db2.user", "********");
        System.setProperty("db2.password", "********");
        System.setProperty("db2.databaseName", "bludb");
    }

    @Autowired
    private DataSource dataSource;

    @Test
    void testConnect() throws SQLException {
        assertNotNull(dataSource);
        try (var connection = dataSource.getConnection()) {
            assertNotNull(connection);
            assertNotNull(!connection.isClosed());
        }
    }

}
```

しかし、このコードでは通常のDb2では問題ないですが、Db2 on Cloudには接続できません。次のようなエラーになります。

```
com.ibm.db2.jcc.am.DisconnectNonTransientException: [jcc][t4][2034][11148][4.31.10] 会話の割り振り解除の原因となる分散プロトコル・エラーのため、実行が失敗しました。
DRDA データ・ストリーム構文エラーが検出されました。  理由: 0x3。 ERRORCODE=-4499, SQLSTATE=58009
```

原因ですが、Db2 on CloudはSSL接続が必須になっているためです。Db2ドライバでSSL接続を有効にする必要があります。

## Db2プロパティファイル

Db2 Spring Libraryでは残念ながら直接SSL接続を設定するプロパティがありません。正確には``db2.globalPropertyFile``プロパティでDb2ドライバ本来のプロパティを直接設定できそうに見えるのですが、これも残念なことに正しく動作しません。

今回はDb2標準のプロパティファイルを作成し、SSL接続を有効化してみました。Db2のJDBCドライバはクラスパスのルートに``Db2JccConfiguration.properties``があると自動的にロードしてくれます。

```properties:Db2JccConfiguration.properties
db2.jcc.sslConnection = true
```

# 検証結果

プロパティ``sslConnection = true``を設定することで、正常に動作するようになりました。

# 参考

https://github.com/ibmdb/java-db2/tree/master/db2-spring
日記；回すだけⅤ ⑤ ST言語（ファンクションブロック）でモータを回す記述＜その5 NUC＞

　第4回と同じことを別のハードウェアで実行します。
　[インテルのNUC Essential Kit NUC11ATKPE BNUC11ATKPE000](https://www.amazon.co.jp/gp/product/B09Z2RWGHQ/)を使います。小型です。FANレスのようです（確認できていない）。
　有線のLANはRealtekが実装されています。RFはインテルのM.2タイプが実装され、ストレージもM.2のソケットが用意されています。メモリはSO-DIMMです。
　CPUはATOM系統のPentium Silver N6005で、4コアです。キャッシュが少ないですが、そこそこ高速2.00->3.29GHzです。

　PCの環境です。メモリは入っていませんでした。メモリ用ソケットは二つあります。
　SSD用M.2は一番短いタイプを利用していますが、長いタイプも利用できるようにねじは用意されています。しかし、今回のようにフラット・ケーブルを引き出すために、長いタイプは取り付けられないでしょう。

- メモリ12Gバイト
- M.2 SSD 256Gバイト
- Windows 10 Pro　21H2

### NICの追加
　追加でGigabit Desktop PCI-e 10/100/1000 Mbps Auto Negotiation Network Adapter (Intel 82574L / EXPI9301CT Chipset) NIC Single Copper RJ45 Port (Short Version)をつなぎます。PCIe x1です。TwinCATでは、インテル製のドライバの用意されたNICが必要です。
　RFのカードがささっていたM.2からはカードを抜き、[M.2 NGFF A/E Key to PCI-E Adapter Riser Card Extension Cable USB 2.0 Port](https://www.amazon.co.jp/gp/product/B07TY16N7K/) で引き出しました。
![IMGP1309.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/adff91d9-9483-9425-7973-ca50df2b35b9.png)
　フラット・ケーブルをケースの隙間から出します。
![IMGP1361.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/cd0abe28-ea71-e800-8543-af9fedc7c5f9.png)

　NICはスペーサで固定しました。
![IMGP1357.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/8bad8cb9-edd1-3b34-80fc-8f50230afa12.png)


### もろもろもインストール
　Visual Studio Community 2022 17.3.3 desktopアプリだけをインストールするのは、第1回と同じ、TwinCAT3 Build 4024.32（2022年9月）も同じようにインストールしました。
　第4回とまったく同じにプログラムを作りました。
　同じように動きました。
![twin101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407635/4ee3aa10-6236-1c9d-e2e7-5ccfffbb93c1.png)

　デスクトップのCPUよりは、ソリューションを用意する場面などでもたもたしますが、今回のような簡単なプログラムでは、動きに差はありませんでした。
【JSF】inputタグでcsvを選択し中身一覧を表示した後、また別の次の画面に遷移したタイミングでファイルをアップロードしたい場合

## 困ったこと
ファイル選択の際、ConversationScopedのPart型の変数に選択したファイルが入るようにして、
そのままcsvファイルの中の文字を取り出して一覧を表示するところまでは分かるが、
また別の画面に遷移したタイミングでファイルアップロードをしようと思って、
Part型の変数に格納されているデータを使ってアップロード処理をしようとしても、なぜか出来ない。ConversationScopedでも保持されているはずだが、とりあえずセッションのバッキングビーンのセッターに入れておいて、取り出そうとしてもInputStreamが使えない。


## 原因
ファイルの入出力はそのときの接続でしか有効ではないので、次の画面に遷移した時点でもう接続は切れていて、関係のないものになってしまう。
なので、たとえセッションのセッターにPart型のものをそのまま入れたとしても、意味が無い。


## 解決方法
2通りあります。

①tmpフォルダのようなものを作って、最初の段階でこっそりアップロードしておく。
そして、もしバリデーションやその他チェック処理があったとしたらそれを処理して、問題がないようであれば、tmpフォルダから本来のアップロード先へファイルを移動

②最初に読み込みがうまくいってるので、その読み込んだデータをListなどの変数に入れておいて、問題の次の画面に遷移するタイミングで、Listからデータを取り出して新規ファイルを作成しアップロードしたことにする。
Error: Failed to lookup view "index" in views directory "/Users/***/views"

Error: Failed to lookup view "index" in views directory "/Users/***/views"

`Node.js` + `Express` でテンプレートエンジンを`ejs`で設定するとエラーとなった

## フォルダ構成
エラー時のappフォルダ以下の構成
```
├── package.json
├── src
│   ├── index.ts
│   ├── routes
│   │   └── index.js
│   └── views
│       └── index.ejs
├── tsconfig.json
├── yarn-error.log
└── yarn.lock
```

## 解決した方法
`app.set('views', __dirname + '/views')`を追加

```javascript:index.ts
import express from 'express';

const app: express.Express = express();
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views'); // ここを追加
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Listener
app.listen(3000, () => {
  console.log('Start on ', app.listen().address());
});

app.get('/', (req, res) => {
  res.render('index');
});
```
## Reference
https://stackoverflow.com/questions/10216395/error-failed-to-lookup-view-in-express
MYSYS2のインストールできないとき

# MYSYS2のインストールで困った話
rubyの環境構築中にMYSYS2をインストールしようとした際に以下のエラーが発生しました

```
ridk install
```
↑によって以下が起動します
```
 _____       _           _____           _        _ _         ___
|  __ \     | |         |_   _|         | |      | | |       |__ \
| |__) |   _| |__  _   _  | |  _ __  ___| |_ __ _| | | ___ _ __ ) |
|  _  / | | | '_ \| | | | | | | '_ \/ __| __/ _` | | |/ _ \ '__/ /
| | \ \ |_| | |_) | |_| |_| |_| | | \__ \ || (_| | | |  __/ | / /_
|_|  \_\__,_|_.__/ \__, |_____|_| |_|___/\__\__,_|_|_|\___|_||____|
                    __/ |           _
                   |___/          _|_ _  __   | | o __  _| _     _
                                   | (_) |    |^| | | |(_|(_)\^/_>

   1 - MSYS2 base installation
   2 - MSYS2 system update (optional)
   3 - MSYS2 and MINGW development toolchain

Which components shall be installed? If unsure press ENTER [1,3]

MSYS2 seems to be unavailable
Verify integrity of msys2-x86_64-20190524.exe ... Failed
Download ...
Installation failed: 404 Not Found
```

この謎のエラーを調べてみても
Verify integrity of msys2-x86_64-20190524.exe ... ok
となってるものが多く、当てにならなかったです

# 解決方法
[MYSYS2の公式HP](https://www.msys2.org/)からインストーラーをダウンロードして、インストールして、再度```ridk install```をするとうまくいきます。
結果ゴリ押しとなりました
OpenCV+contribを使おうとして苦しんだ点まとめ

# はじめに
やり方のガイドではなく個人的に苦しんだところのメモです。同じところで苦しんでいる方は参考になるかもしれません。

# やろうとしていたこと
OpenCVとOpenCV-contribを使っていろいろやろうと思い環境構築しました。OpenCVそのもののBuildは配布されているのでダウンロードしてくるだけでよいのですが、contribの追加モジュールを使うためには自前でビルドする必要があります。やり方は調べると詳しいものが色々出てくるので難しくはないのですが、今回想定外のエラーを吐かれまくり苦しむことになりました。

# うまくいったやり方

https://qiita.com/RivaleDgg/items/0462882296ad6d658e2e

この記事の通りです。一点注意としてはVisual Studioで使うことが前提です。(Pythonなどで使う場合はpipでうまくやる方法があるらしいです。)

以下に苦しみの記録を残しておくので、同じ苦しみを背負うことのないように上のやり方をお勧めします。

# 結局できなかったやり方
多くのサイトで紹介されているやり方の流れを簡単にまとめると

1. 各種必要データ(OpenCV, OpenCV-contrib)をダウンロードしてくる
2. 各種必要ツールを準備しておく(CMake, Visual Studio)
3. CMakeでビルドの用意
4. Visual Studioでビルド

このようになります。より詳しくは

https://swallow-incubate.com/archives/blog/20200508/

このページが参考になると思います。ただ、ほとんどのサイトが数年前の古い情報で最近の環境とは異なる点があることが多いです。

# 苦しんだところその1
最初いつぞやに入れた古いバージョンのCMakeでやろうとして失敗しました。これが一番質が悪くて、一見CMakeは問題なく完了しているように見えたのですが、Visual Studioでビルドすると失敗してしまいました。
続いてCMakeをアップデートしてやり直そうと思ったのですが、何も考えずに [CMakeダウンロードページ](https://cmake.org/download/) の一番上のものを選択してしまいました。よくみると`Release Candidate`でよくわからないエラーが大量に発生しました。よくlatest版はバグがあることがあるので～という説明を見ますが実際これで苦しんだのは初めてだったかもしれません。ちなみにこちらはCMakeの段階でエラーが出るので比較的まだマシだったかもしれません。

ツールは基本的に最新のRecommendedを使いましょう。

# 苦しんだところその2
Visual Studioでの設定についてですが、Debug構成でビルドする際にリリース版であるopencv_world460.libを指定したところランタイムエラーで落ちました。opencv_world460d.libに指定し直して解決。

# 苦しんだところその3
同じくVisual Studioでの設定についてですが、どうもデバッグを行う際には環境変数をうまく読み込んでくれないらしくプロジェクトのConfigで環境変数を上書きしてやる必要があるみたいです。

# 苦しんだ上に解決しなかったこと
OpenCV自体は使えるようになったのですが、Tesseract-OCRを使おうとしたところエラーの沼にはまりました。症状としては実行時に`tesseract not found`と言われてしまうというものでした。調べるとCMakeの段階で`Can't use tesseract`というエラーを吐かれていました。赤文字にもならずしれっとログに書いてあったので見逃していました。TesseractのコンパイルでC++11が要求されており手元のVCコンパイラがC++14であったことでエラーを吐いていたようです。

というところまでは分かったのですが、バージョンを変えてみたり`ENABLE_CXX11`オプションを試してみたりソースを一部書き換えてみたりしましたが解決できず。結局この方法は諦めました。未だにすこしもやもやしているので詳しい方いらっしゃったら教えてください。
「Repository or object not found」と表示されてプッシュができない場合の対処法


「Repository or object not found」と表示されてLFSをプッシュができない場合の対処法です。
英語の記事はありましたが日本語の情報があまり見当たらず、自分でもまた今後調べる事になりそうだと思ったので備忘録です。

Git管理アプリにはForkを使っていて、以下のようなエラーダイアログが表示されました。
赤枠には「ユーザー名/リポジトリ名」が入ってます。
![git error_2022年10月18日_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126821/271db19a-93a3-0759-c6e6-990d80c7d244.png)

検索用に文字列に起こしておきます。

```
Git Error
An unexpected error occured while performing the git request

Uploading LFS objects: 0%(0/79),0B|0B/s, done.

Pushing to https://bitbucket.org/ユーザー名/リポジトリ名/src/master/
batch response:Repository or object not found: https://bitbucket.org/ユーザー名/リポジトリ名/src/master.git/info/lfs/objects/batch
Check that it exists and that you have proper access to it
error: faild to push some refs to 'https://bitbucket.org/ユーザー名/リポジトリ名/src/master'
```

解決方法は「batch response: Repository or object not found:」でググったら出てきましたが以下のページを参考にしました。

https://community.atlassian.com/t5/Bitbucket-questions/Git-LFS-pushing-error-quot-batch-response-Repository-or-object/qaq-p/909700


具体的には、
> 「 https://bitbucket.org/xxxx/xxx 」 ではなく「https: //MY-USERNAME@bitbucket.org/XXXX/XXXX 」

というのが解決方法で、以下の画像の赤枠内のBitbucketのサイトの「クローンの作成」ボタンを押すと、

![git error解決方法_「クローンの作成」_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126821/8cf3d934-0d85-4e01-69c5-f1c90d0ed26d.png)

![ssh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126821/d11e7808-78ad-cc0a-1df3-191badd5e0df.png)

上の画像のようにClone this repositoryが表示され、
「git clone git@bitbucket.org:ユーザー名/リポジトリ名.git」
上記のような文字列が表示された状態になっていると思うので、赤枠内の「SSH」をクリックして、「HTTPS」に切り替えます。



![https.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126821/31b09b6f-aa34-7190-fba7-53abdda2c0b9.png)

すると、下記のような文字列が表示された状態になるので、
「git clone https://ユーザー名@bitbucket.org/ユーザー名/リポジトリ名.git」

git clone以降の
「https://ユーザー名@bitbucket.org/ユーザー名/リポジトリ名.git」
を使って新規にリポジトリをクローンします。
このユーザー名を含むurlでクローンをすると、LFSのプッシュもできるようになりました。


なぜか理由はわからないんですが、別のリポジトリを上記手順でクローンした後に、元のエラーでプッシュできなくなっていたリポジトリでもプッシュができるようになっていました。
システム監視・リソース監視について

●システム障害の主な原因と予兆の検知

システム障害の原因の一例
・メモリやストレージ容量の不足によるリソースの枯渇
・システムの処理能力以上の要求による過負荷
・ハードウェアやソフトウェアなどによる異常停止
・処理結果の異常

システムログの「/var/log/messages」「/var/log/syslog」を確認したり、sysstatユーティリティなどのツールでシステムの状態を監視することで障害の予兆を検知し、リソースの追加などの対策を行う。

●OOM Killer
物理メモリやスワップメモリが不足（OOM：Out-Of-Memory）してシステムが停止しそうになると、カーネルが重要でないと判断したプロセスを強制終了（kill）。システムログの「/var/log/messages」や「/var/log/syslog」にkillの情報が残る。
どのプロセスをkillするかはカーネルの関数によって決まりますが、システムで大事なプロセスを終了させないためには、そのプロセスに優先度「-17」を設定。

# echo -17 > /proc/<プロセスID>/oom_adj

【システム監視】
システム障害やその予兆を検知するためのシステム監視には「死活監視」と「リソース監視」があります。

●死活監視
システムが動作しているか（生きているか）を監視するものです。
ネットワーク上の監視ツールからサーバやネットワーク機器に対してpingやSNMPの定期的な疎通確認で応答（レスポンス）があるかどうかを監視。対象機器から応答が無い場合は停止しているなど何らかの問題が発生している可能があります。


●リソース監視
CPU、メモリ、ストレージ、ネットワークなどのリソースの使用状況を監視。
・システムやサービスのログを監視
・SNMP（Simple Network Management Protocol）を用いた監視
SNMPとは、ネットワーク経由で機器を監視・制御するためのプロトコル。監視する側のSNMPマネージャと監視される側のSNMPエージェントが管理情報をSNMPで交換。CPUやメモリ使用率、ネットワークI/O、プロセスの状態など細かい監視が可能。

【監視ツール】
主な監視ツール。全てオープンソースソフトウェア。

●リソース監視ツール
対象機器のリソース監視。
・collectd
・MRTG（Multi Router Traffic Grapher）
・Cacti

●統合監視ツール
複数の対象機器の死活監視やリソース監視。
・Nagios
・Icinga2
・Zabbix
Blender奮闘記⑪

# 初めに
大分前回の更新から時間がたってしまいましたが、こそこそ裏でBlenderをいじっていました。
今回もyukiさんのレトロプリンを作ろうをやりました。動画は以下になります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/3eCuUMyVU90" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 作成途中
プリンの形自体は5分くらいでできました。
![puddingonly.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782192/17af75d7-b462-f2b2-cb23-e2040f8ef043.png)
シェーダーエディター上でプリンの原型を作成するのに20分くらいかかりました。
その後のクリームやサクランボはそれぞれ10分くらいで作成完了しました。

![pudding.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782192/bb33bb5e-f543-dfd6-99c5-dbc5a54ad52f.png)

これを通して波テクスチャの使い方を再び学ぶことができました。

# 再学習
もう一度作成しました。プリンをいい感じの容器に入れ、クリームも前のものより手を入れてそれっぽい感じにしました。全体的に前に作成した経験からすべてを作成するのに20分くらいで完成しました。
![pudding2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782192/2d5de10f-2c31-d039-6ba4-a0d6623b95ee.png)

# 終わりに
プリンの作成はそこまで時間がかかりませんでした。
全体的にこれまで学んできたことの延長戦だったことと、そこまで複雑な形じゃなかったことが原因ですね。また、シェーダーエディターの扱いにも少しずつ慣れてきた感じがあります。これだけやると少しずつですが自身がついてきますね。
次は、またyukiさんの動画からリンゴを作ろうかと思います。
nuxtがデフォルトで作成したGitHubのciのキャッシュに騙される

# はじめに


[NuxtJS](https://nuxtjs.org/)は、以下のコマンドで新しいプロジェクトを作ることができます。
```
yarn create nuxt-app <project-name>
```
途中、以下の設定をすると、親切にもGitHubのCI用ファイルをデフォルトで作成してくれます。
```
Continuous integration: GitHub Actions (GitHub only)
```

ただ、自分の環境だとキャッシュのパスがおかしくキャッシュできていないどころか不要なものをキャッシュしており、CIに余計な時間がかかっていた、というお話です。

# 改善法

結論としてやったことです。僕らはnode_modulesのみをキャッシュしたいのですが、パスが僕の環境では間違っていたようです。
```
      - name: Cache node_modules 📦
        uses: actions/cache@v2.1.7
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          // path: ${{ steps.yarn-cache-dir-path.outputs.dir }} この行を下のようにする
          path: node_modules
          // key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} この行も一応下のようにする(こちらはたぶん不要？)
          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
```


# 問題

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309178/3d3acaf9-300a-924d-1211-8cc11dd16d3b.png)
上の画像は、左がとあるPRをマージする直前の、右がとあるPRをマージする際に走ったnuxt製のCIの結果で、リポジトリ内のコードに変更はありません。左右を見比べると、それぞれのタスクの時間がほとんど同じことがわかるかと思います。

どちらもキャッシュが使われているのであれば、これは特に問題にならないのですが、気になるのは赤線を引いたところ。どちらもその1つ前のタスクで(タイトル的に)`node_modules`のキャッシュを取り出していると考えられますが、その割には`Install dependencies`に時間がかかっています。キャッシュを使っていれば数秒もあれば十分なはず…

では、後に実行された画像右のCIのタスクの中身を詳しく見てみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309178/e68f03c1-902b-4232-0782-2dfa7c3dc778.png)
赤線を読む限り、何らかのファイルのキャッシュの復元は成功しているようです。ただ、`Install dependencies`では、`yarn install`で`node_modules`を作成しているため、`node_modules`ではない何かを復元しているようです。

これより、意図したキャッシュが行われていない問題がわかります。[改善法](#改善法)に書いた方法で直して直してあげましょう。

# まとめ

上の例ではCIの時間が全体で1分もかかっていないためキャッシュの失敗は問題にならないと思いますが、環境によっては大問題になります。実際の経験談として、CIが終わるまで基本10分、場合によってはキャッシュの復元に途中で失敗して`actions/cache`のタイムアウトである1時間以上かかることがありました。PRをマージするためにCIが通ることを必須としていたのですが、CIの大渋滞でマージどころではなくなりました…　ちなみに、CIのキャッシュの容量もおかしかったです。クローンしてきたファイルに`node_modules`を含めても500MB程度なのに、キャッシュの容量をCIのタスクの中身で確認すると2GB。どこからそんなに持ってきた。キャッシュのバカヤロー！

キャッシュのパスを上の方法で直すと、CIは1回2分程度。サクサクです。キャッシュよアリガトー！
(いうてキャッシュ切っても10秒程度しか変わらなかったと思いますが)

デフォルト設定は多くの先人が作り上げた血と汗と涙の結晶であることが多いと思いますが、今回のように環境によっては残念な結果になることもあります。問題となったら疑ってあげましょう。