OmniAICreator/Qiita-1.07M huggingface dataset:
v-dialogで特定のボタンが押された時にダイアログを閉じたい


# 目的
vuetifyで簡単なフロントを実装していて、その中でフォームをダイアログ形式で実装しようとしたが、ダイアログをどのようにして消せば良いのか分からなくなってしまった。

# 概要
**1. あらかじめshowDialogなどのデータをnullでスクリプトに定義
2. ボタンにv-on:click(@click)を実装し、クリックされたときに1のshowDialogをfalseに変更
3. v-dialogのv-modelをshowDialogにすることでshowDialogがfalseの場合に自動的にダイアログが閉じる**
# 具体例
具体的には下記のコードのように実装すると良い。
詳細はコメントに記載している

```vue
<template>
  <!-- post画面 -->
　　　　<!-- dataのshowDialogがfalseになるとdialogが非表示になる -->
  <v-dialog
    v-model="showDialog"
    persistent
    max-width="600px"
  >
    <template v-slot:activator="{ on, attrs }">
　　　　　　　　　　　　<!-- メンバー登録ボタン -->
      <v-btn
        depressed
        outlined
        elevation="2"
        class="pink--text mb-5 px-10 ml-10"
        dark
        v-bind="attrs"
        v-on="on"
      >
        メンバー登録
      </v-btn>
    </template>
    <v-card>
　　　　　　　　　　　　<!--ダイアログタイトル -->
      <v-card-title>
        <span class="text-h5 pink--text">メンバー登録</span>
      </v-card-title>
　　　　　　　　　　　　<!-- ダイアログ各要素 -->
      <v-card-text>
        <v-text-field
          label="名前"
          required
          v-model="postUsername"
        ></v-text-field>
　　　　　　　　　　　　　　　　<!-- selectでは複数の候補から一つ選べる -->
        <v-select
          label="性別"
          required
          v-model="postGender"
          :items="['M', 'W']"
        ></v-select>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
　　　　　　　　　　　　　　　　<!-- CloseボタンをクリックするとshowDialogがfalseになる -->
        <v-btn
          class="pink--text"
          text
          @click="showDialog = false"
        >
          Close
        </v-btn>
　　　　　　　　　　　　　　　　<!--saveボタンをクリックするとshowDialogがfalseになる&postInfoメソッドが実行される -->
        <v-btn
          class="pink--text"
          text
          @click="showDialig = false; postInfo()"
        >
          Save
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      postUsername:'',
      postGender:'',
      // 初めはnullだが、closeかsaveボタンがクリックされるとfalseとなり、ダイアログが閉じる
      showDialog: null
    };
  },
  methods: {
    // メンバー情報をバックエンドに送信
    postInfo: function () {
      
    },
  },
};
</script>
```
![スクリーンショット 2022-01-05 18.36.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487834/88c75df7-1bb5-167e-975d-001e6187669f.png)
メンバー登録ボタンを押すと、、、
![スクリーンショット 2022-01-05 18.35.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487834/e965ef9f-306d-ceca-1122-78f085b4a411.png)
ダイアログが開き、closeかsaveを押すと
![スクリーンショット 2022-01-05 18.36.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487834/88c75df7-1bb5-167e-975d-001e6187669f.png)
ダイアログが消える。

# 参考文献
[vuetify公式](https://vuetifyjs.com/ja/components/dialogs/#section-30d530a930fc30e0)
【Django】SNS app作成手順01-初期設定

snspjというプロジェクトを作成する際のコマンドを記していく


----------初期設定----------

django-admin startproject snspj .

python3 manage.py startapp snsapp



----------Settings.pyの中身を編集----------

INSTALLED_APPS の中へ追記
'snsapp.apps.SnsappConfig'


TEMPLATESの'DIRS’:の後に追記

 [BASE_DIR / ‘templates'],


—————snsappフォルダにもurls.pyを追加----------

—————snspj-urls.pyの内容をsnsapp-urls.pyへコピー----------


—————urls.pyの中身を編集----------

urlpatterns の中へ追記
    path('',include(‘snsapp.urls'))
【Project Euler】Problem 30: 各桁の5乗の和

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 30：各桁の5乗の和

原文 [Problem 30: Digit fifth powers](https://projecteuler.net/problem=30)

**問題の要約：各桁の5乗の和が元の数と同じになる数の合計を求めよ**

この問題では数の範囲が指定されていないので、どこまで調べれば良いかがポイントですね。桁数が$d$のとき各桁の5乗の和の最大値は$(9^5 \times d)$となるのでプログラムで調べてみると。

```python
for d in range(1,8):
   print(f"digit={d}, {10**(d-1)}-{10**d-1} {1}-{9**5*d}")
d=1, 1-9 1-59049
d=2, 10-99 1-118098
d=3, 100-999 1-177147
d=4, 1000-9999 1-236196
d=5, 10000-99999 1-295245
d=6, 100000-999999 1-354294
d=7, 1000000-9999999 1-413343
```
7桁になると2つの値の範囲が重なっていないので、6桁まで、より正確にいうと$9^5*6=354294$までチェックすればよいので、以下のプログラムになります。

```python
def digPowSum(n,pw):
  return sum([int(d)**pw for d in str(n)])

print(f"Answer: {sum([n for n in range(2,(9**5)*6+1) if n==digPowSum(n,5)])}")
```

（開発環境：Google Colab）
【Project Euler】Problem 29: べき乗の値

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 29：べき乗の値

原文 [Problem 29: Distinct powers](https://projecteuler.net/problem=29)

**問題の要約：$2 \leq a, b \leq 100$ のとき$a^b$の値の数を求めよ、ただし重複はかぞえない**

Pythonでは2重ループはitertools、重複を除くのはsetを使うと簡潔に書けますね。

```python
from itertools import product
ab = range(2, 100+1)
print(f"Answer : {len(set([a**b for a, b in product(ab,repeat=2)]))}")
```

（開発環境：Google Colab）
【Project Euler】Problem 28: 数のらせんの対角線

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 28：数のらせんの対角線

原文 [Problem 28: Number spiral diagonals](https://projecteuler.net/problem=28)

**問題の要約：図のように1から順番にマスにらせん状に書いて行ったとき1001 x 1001のマスが埋まったときの対角線の数の合計を求めよ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1922159/8571feca-56db-c5cf-accd-ba64b2f9b13d.png)

なんとなく規則性はつかめそうに思えますが。まず規則通りにマスを埋めるプログラムを書いてみます。

```python
import numpy as np
N = 9
vectors = np.array([[-1,0],[0,1],[1,0],[0,-1]]) # direction (0:up, 1:right, 2:down, 3:left )

matrix = np.array([0]*(N**2)).reshape(N,N)  # Fill 0s in N x N matrix 
pos = np.array([(N-1)//2, (N-1)//2])   # Start position

dir = 0      # direction index (0:up, 1:right, 2:down, 3:left )
for i in range(1,N**2+1):
  matrix[pos[0],pos[1]] = i         # put the number 
  rpos = pos + vectors[(dir+1)%4]
  if matrix[rpos[0],rpos[1]] == 0:  # if right pos is 0, then turn right
    dir = (dir+1)%4         # right direction
  pos = pos + vectors[dir]  # next position

print(matrix)
```
N=9でできたマス目を表示します。

```
[[73 74 75 76 77 78 79 80 81]
 [72 43 44 45 46 47 48 49 50]
 [71 42 21 22 23 24 25 26 51]
 [70 41 20  7  8  9 10 27 52]
 [69 40 19  6  1  2 11 28 53]
 [68 39 18  5  4  3 12 29 54]
 [67 38 17 16 15 14 13 30 55]
 [66 37 36 35 34 33 32 31 56]
 [65 64 63 62 61 60 59 58 57]]
```

これをじっと見ていると規則性が見えてきます。一辺の長さは2つづつ増えているので、間隔dで4つの角を数字求めて、dを2つ増やすのを繰り返せばいいですね。その合計が答えということです。

```python 
N = 9
dg = [1]
n, d = 1, 0
for i in range((N-1)//2):
  d += 2
  for i in range(4):
    n += d
    dg.append(n)
print(sum(dg), dg)
#537 [1, 3, 5, 7, 9, 13, 17, 21, 25, 31, 37, 43, 49, 57, 65, 73, 81]
```

（開発環境：Google Colab）
【Project Euler】Problem 27: 二次式の素数

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 27：二次式の素数

原文 [Problem 27: Quadratic primes](https://projecteuler.net/problem=27)

**問題の要約：$|a|,|b|<1000$のとき$n^2+an+b$が$n=0,1,2,3,\dots $のとき連続して素数となる最長の時の$a,b$の積を求めよ**

まずは全探索で答えを探してみます。すべての$|a|,|b|<1000$で連続する素数の数を求めて最長のものの[連続素数の数、a, b, a*b]を出力します。結果は連続素数が71となりました。

```python
import itertools
from sympy import isprime

N = 1000
maxConsPrimes = [0,0,0,0]
AB = range(-N, N)
for a, b in itertools.product(AB,repeat=2):
  consPrimes = 0
  for n in range(0,81):
    qf = n**2 + a*n + b
    if not isprime(qf): break
    else:
      consPrimes += 1
  if consPrimes > maxConsPrimes[0]:
    #print(f"a = {a}, b = {b}, {consPrimes}")
    maxConsPrimes = [consPrimes, a, b, a*b]
print(maxConsPrimes)
```
### オイラーの素数生成式のトリック

ここで疑問に思えるのが元の[オイラーの素数生成式](https://ja.wikipedia.org/wiki/%E7%B4%A0%E6%95%B0#%E7%B4%A0%E6%95%B0%E7%94%9F%E6%88%90%E5%BC%8F)$n^2\pm n+41$は39個($-$の時は40個)で最長だと思われているのに、簡単に80個や71個の式が見つかるのはへんだと思いませんか？

これにはトリックがあります。$x^2+x+41$は2次関数なのでグラフに描くと$x=-1/2$を軸に左右対象の放物線です。したがって$x=0,1,2,3,\dots $で$y$の値が素数になるということは$x=-1,-2,-3,-4\dots $で同じ値の素数になるということになります。

したがってこのグラフを右方向にスライドさせると左半分の部分が$x>0$の領域に入ってくるので見かけ上、連続素数が増えるということです。

グラフを右に$m$だけスライドさせた式$S(m)$は。

```math 
\begin{align}
&S(m)=(x-m)^2+(x-m)+41 \\
&=x^2-(2m-1)x+m^2-m+41\\ \\

&この時の連続素数の数P(m)は \\
&P(0)=39なので \\
&P(m)=m+39 (m\leq 40) \\
&となりそうです。\\　\\

&最大のP(40)=79となるのは　\\　

&S(40)=x^2-(2\times40-1)x+40^2-40+41 \\
&= x^2-79x+1601 \\
&となり例題の式と一致します
\end{align}
```

ここで問題に戻ると$|b|<1000$から

```math 
\begin{align}
&m^2-m+41<1000 \\
&となる最大のmは31になるので \\
&a = -(2 \times 31 - 1) = -61 \\
&b = 31^2-31+41 = 971 \\
&となり解答が筆算で得られました。
\end{align}
```

（開発環境：Google Colabと筆算）
sam local start-api に authorizer を設定（ごり押し

cf. https://github.com/aws/aws-sam-cli/issues/137

要望はめっちゃあるのに対応する気なさそうなので、

## ごり押し

`template.yaml` は `sam init` したサンプルそのままです。

```yaml:template.yaml
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: >
  python3.8

  Sample SAM Template for sam-app

Globals:
  Function:
    Timeout: 3

Resources:
  HelloWorldFunction:
    Type: AWS::Serverless::Function
    Properties:
      PackageType: Image
      Architectures:
        - x86_64
      Events:
        HelloWorld:
          Type: Api
          Properties:
            Path: /hello
            Method: get
    Metadata:
      Dockerfile: Dockerfile
      DockerContext: ./hello_world
      DockerTag: python3.8-v1
```

```python:app.py
import os
import json

def lambda_handler(event, context):
    print(event["requestContext"]["authorizer"])

    return {
        "statusCode": 200,
        "body": json.dumps(
            {
                "message": "hello world",
            }
        ),
    }

if os.getenv("AWS_SAM_LOCAL"):
    def phony_authorizer(authorizer):
        def _inner(f):
            def _wrapper(event, context):
                event["requestContext"]["authorizer"] = authorizer
                return f(event, context)

            return _wrapper
        return _inner

    lambda_handler = phony_authorizer(
      {
        "key": "value",
        "principalId": None,
        "integrationLatency": 5563,
      }
    )(lambda_handler)
```

## 確認

```bash:bash
$ sam build && sam local start-api
```

で api を起動して、別のターミナルから

```bash:bash
$ curl http://127.0.0.1:3000/hello
{"message": "hello world"}
```

とやると、 start-api 側のターミナルに

```bash:bash
Invoking Container created from helloworldfunction:python3.8-v1
Building image.................
Skip pulling image and use local one: helloworldfunction:rapid-1.37.0-x86_64.

{'key': 'value', 'principalId': None, 'integrationLatency': 5563}
END RequestId: 08d36d6d-ae15-4cd8-af8b-bf561d826156
REPORT RequestId: 08d36d6d-ae15-4cd8-af8b-bf561d826156	Init Duration: 0.52 ms	Duration: 76.82 ms	Billed Duration: 77 ms	Memory Size: 128 MB	Max Memory Used: 128 MB
No Content-Type given. Defaulting to 'application/json'.
2022-01-15 09:14:47 127.0.0.1 - - [15/Jan/2022 09:14:47] "GET /hello HTTP/1.1" 200 -
```

とか出るはず。
Google ColaboratoryでStreamlitとReactを接続する。

Streamlitではボタン、フォームなどの標準UIのみで簡単にwebアプリを作ることができます。しかし少し凝ったレイアウトやJavaScriptを使いたい場合にはReactと連携します。

Streamlit+Reactの実装例は公式の`Components`から見ることができます。

https://streamlit.io/components

各プロジェクト画像 *or* タイトルからgithubのリポジトリへ行けます。すべてのプロジェクトがReactと連携しているわけではありませんが、プロジェクトと思わしきディレクトリ内に`frontend`というディレクトリがあればそのプロジェクトがReactと連携している手掛かりとなります。

# チュートリアル

React開発環境の構築は`Create React App`で行うと簡単ですが、Streamlit.ioでも同じようなビルド環境が提供されています。

https://streamlit-components-tutorial.netlify.app/introduction/project-setup/

ローカル環境であれば公式通りに進めていけば苦なくチュートリアルは完了するのですが、Google Colaboratory上で完結させるために少しハマった部分があるので残しておきます。

今回はチュートリアル`Introduction`の`Project Setup`まで進めていきたいと思います。

# 動作
>GIF動画

![2022_01_14_ff066584-7c85-4571-942c-24387d825fb3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459843/398c7f4b-c7d3-27a4-ac2d-3e4372792c99.gif)


# ノートブック
>[Streamlit bridges Python and React](https://colab.research.google.com/drive/1b3sqHhUe12XVT9jlPdMGYFQy79DcVnC6)

https://colab.research.google.com/drive/1b3sqHhUe12XVT9jlPdMGYFQy79DcVnC6

:::note info
<b>メニューバー①</b> > <b>ランタイム</b> > <b>すべてのセルを実行</b> で再現できるようにしています。
:::

![colab_screen.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459843/9c938da8-2a02-4403-7638-6c74083cd518.jpeg)

# ソース

必要なものをインストール、ダウンロードします。今回は`Streamlit`と`component-template`だけでOKです。


```python:コードセル
!pip install streamlit
!git clone https://github.com/streamlit/component-template
!mv /content/component-template/template $project_path
```

npmコマンドで依存関係をインストールします。`my_component/frontend`下で行う必要があります。

```python:コードセル
!cd $frontend_path &&\
 npm install
```
`__init__.py`の`http://localhost:3001`をcolabのローカルホストに書き換えます。

```python:コードセル
with open(init_py_path, "r") as f:
    fileText = f.read()
    after = fileText.replace('"http://localhost:3001"', f'"{getGoogleLocalhost(react_port)}"')

with open(init_py_path, "w") as f:
    f.write(after)
```

`streamlit run` のあとに `npn run start`します。

```python:コードセル
!streamlit run $init_py_path & sleep 3 && npx localtunnel --port $streamlit_port &\
 cd $frontend_path && npm run start
```

`your url is: https://***-***-***.loca.lt`に接続します。

Clickボタンなど動作を確認できると思います。

# おわりに
いかがでしたでしょうか。
これでGoogle ColabratoryでのReact開発環境が整い、凝ったスクリプトを搭載したStreamlitプロジェクトもColabratory上で開発できるようになりました。
次回は作ったプロジェクトをgithubと連携しStreamlit.ioへデプロイする一連の流れをGoogle Colabratory上のみでやりたいと思います。

# 参考

https://discuss.streamlit.io/t/jsme-react-component/6918/24

https://qiita.com/gudapys/items/62eda02bdb3de5530a23

https://qiita.com/gudapys/items/24a04b01438ea7e01678
RP2040でエンコーダーモーター対応ドライバーボードを作る

RP2040でエンコーダーモーター対応モータボードを作りました。
過去にSTM32で作っていたもののRP2040版になります。
https://qiita.com/usashirou/items/8d83daa6a9ea384b3f79
写真の上がRP2040,下がSTM32F103のものです。
今回は、RP2040のモータードライバーボードを基に、RP2040のカスタムボード製作の方法を見て行きましょう。
![DSC_0775 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b1450b25-0226-70bb-8546-62b19f3defec.jpeg)
#基本構成
Raspberry財団のRP2040に、TB6612FNGを2個使用し4個のエンコーダーモーターが動作するボードになります。
SoC：RP2040
Flash：SPI　2,4,8MB
MotorDriver：TB6612FNGx2
スイッチ：リセット、Flashスイッチ、ユーザースイッチ
LED:メイン、モーター電源、ユーザーLED
モーター：エンコーダーモーターx4 or DCモーターx4（端子台またはXH2ピン）
外部コネクタ：USB、I2C、UART、ADC、JTAG
モーター電圧：～12V
##回路図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/11b9e689-0123-dad0-43e7-553af870a16b.png)
##なぜRP2040?
RP2040とはRaspberry財団が製作したSoCです。
RP2040を搭載したマイコンボードとしてRaspberry Pi Picoが550円で販売されています。
今回RP2040を選定したのは今まで製作したSTM32の使い勝手が悪いからです。
STM32は2020年からの半導体不足に限らず1個当たり5ドル以上する上、USB対応やROM/RAMの選定が必要でした。
RP2040は1ドルでフラッシュは外付けでUSB対応です。
そして、端子はQFNで今までのQFPと違い、扱いが楽なのです。

選定については__マイコンを選定する～RP2040を選んだ理由～__を参照ください。

https://qiita.com/usashirou/items/7adc2c613f31714cef37
##RP2040で注意する点
設計は___Hardware design with RP2040___を基に行いましょう
https://datasheets.raspberrypi.com/rp2040/hardware-design-with-rp2040.pdf
####___・GND___
RP2040のGNDは中心のパッドのみとなります。
中心のパッドは放熱の場合が多く接続しないかGNDとなる場合が多いかと思いますが、RP2040はここにしかGNDがありません。
この為、実装不良が発生する可能性が高くなります。
私は今回設計不良をしたことになります。
GNDパッドに多くのハンダを流すと浮上してしまうのです。
この為、少し大きめの穴または、大き目のスルーホールを開ける事をお勧めします。
![DSC_0754 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/66043b57-bfce-2639-fcbf-22bbba8669c6.jpeg)
###1.1Vラインとコンデンサ
1.1vラインが横断しており、1608サイズのコンデンサを使用するのが難しいです。
この為、メインのコンデンサには1005（０４０２）を使用し、容量の大きい物のみ1608を使用しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6b788efe-1901-1681-47f7-f323560468a4.png)
#クリスタル
クリスタルは12MHzを使用します。
私はコンデンサ入りのクリスタル(CSTCE12M0G52)を使用しました。
ここは製作者の好みといえます。
https://datasheets.raspberrypi.com/pico/pico-datasheet.pdf
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/aac2bc57-8da3-5a9d-32e3-ae719a587dac.png)
##QSPI Flash
Raspberry Pi PicoにはWinbond W25Q16JVが採用されています。
いくつかの種類がありますが、入手性からWSON-8を選択しました。
##スイッチ
フラッシュ用のスイッチ、リセットスイッチ、ユーザスイッチの3つを用意しました。
リセットスイッチがあるだけで利便性が格段に上がるので追加することをお勧めします。
##ADC
RP2040は4つのADCがあります。
入力電圧の測定や、測距センサー等で使用するので外部入力として使えるようにしましょう。
##PWM
RP2040は16個のPWMチャネルがあります。
チャネルがかぶらないようにしましょう。
##USB
USBの5Vをダイオードを介してレギュレータにつなぎます、USBとRP2040とは抵抗を挟んでおきましょう。
本来は、突入電流対策ですがUSBのDP,DMを誤った場合の対策にもなります。
##UART＆I2C
1個のUARTとI2Cを用意しています。
##モータードライバ
PWMとGPIOのHigh/Lowで制御します。
PGNDとGNDは分けています。
##エラッタ
RP2040にはエラッタがあり15ピンはプルアップが効きません。
設計時にRaspberry Pi Picoで動作確認していますがエンコーダーモーターで使う15ピンの確認をしていませんでした。
設計の際には必ず各ピンを確認することをお勧めします。
#総括
作ってわかる事ですが、Flashが別体だったり1.1vラインがある事などちょっと面倒な事はありますが
大きな問題も無く簡単に設計することが出来ました。
ESP32より遥かに簡単で、初歩の設計としてもお勧めです。
ドラムロールを使ってみた

## SwiftにHTMLみたいなセレクトBOXがあった!
アプリを作るとき、ユーザーが手入力ではなく項目ごとに選ぶ機能をつけるように指示をされた。
HTMLみたいなセレクトBOXがないか調べていたら、ドラムロールの存在を知った。
作る時には、storyboardに、UIPickerViewというものを使う。

**参考にした記事**

https://i-app-tec.com/ios/uipickerview.html


 **色んな記事を見て気づいたこと!**

この書き方は推奨されていないらしくエラーが出ていた!!!

```
showsselectionindicator

使用例↓
pickerView.showsSelectionIndicator = true
```

公式ドキュメント
https://developer.apple.com/documentation/uikit/uipickerview/1614373-

## 使い方

storyboardにlabelとUIPickerViewを配置する

- Main.storyboard

![スクリーンショット 2022-01-15 8.52.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303722/5d00df16-5a0c-bb58-a374-72c47700efea.png)

コントローラーにIBOutletを紐付けてコードを書く

- ViewController.swift

```
//
//  ViewController.swift
//  Drumroll
//
//  Created by 橋本純一 on 2022/01/13.
//

import UIKit

class ViewController: UIViewController , UIPickerViewDelegate, UIPickerViewDataSource {
    
    @IBOutlet var label: UILabel!
    
    @IBOutlet var pickerView: UIPickerView!
    
    let dataList = [
        "食品", "衣服", "家具", "家電", "その他"
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Delegate設定
        pickerView.delegate = self
        pickerView.dataSource = self
        
        label.text = "カテゴリ"
        
    }
    
    // UIPickerViewの列の数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    // UIPickerViewの行数、リストの数
    func pickerView(_ pickerView: UIPickerView,
                    numberOfRowsInComponent component: Int) -> Int {
        return dataList.count
    }
    
    // UIPickerViewの最初の表示
    func pickerView(_ pickerView: UIPickerView,
                    titleForRow row: Int,
                    forComponent component: Int) -> String? {
        
        return dataList[row]
    }
    
    // UIPickerViewのRowが選択された時の挙動
    func pickerView(_ pickerView: UIPickerView,
                    didSelectRow row: Int,
                    inComponent component: Int) {
        
        label.text = dataList[row]
        
    }
    
}

```

## 最後に

選択項目を作ることで、ユーザーの入力する手間を省いたり、目的が決まっていればドラムロールは便利だと思いました。
個人開発しているアプリに組み込む予定です。
Qiita Daily Survey memo 2021.01.15

# Qiita Daily Survey memo 2021.01.15
Qiita の記事を可能な限り毎日読むために、読んだmemoを公開することでモチベーションを維持しようという試み。（2日ぶり）

## [【パクれ】エンジニア転職で企業から評価されるQiita記事の書き方を解説](https://qiita.com/drafts/1d46e3a65bfa2fee0ebb/edit)
もきお(mokio)さんの記事の記事になります。
Qiita の記事を書く上で、こう書くといいよというのを共有いただいている記事になります。
タイトルに【パクれ】とあるのでドキッとしますが、書いてある内容はしごくまっとうな内容でした。
自分が良いと思ったアウトラインやスタイルを取り入れて記事を書くといいよ、という内容に加え、マークダウンを用いた記事の書き方を共有してくれています。
もう20年近く前ですが、中学生のころの校長先生に校長室で教えてもらった話をよく覚えています。
「学ぶ」の語源は「まねぶ」だそうで、何かを学ぶときは、まず真似をするところから始まるそうです。
そういう意味で、まずはうまい人のまねをして始めることは基本だよなーと思いました。

## [テック企業が情報を公開する理由](https://qiita.com/e99h2121/items/106243c307665641e421)
いつも大変お世話になっている Nobuko YAMADA (e99h2121) さんの記事。
「まとめのまとめ」のまとめの記事。
最近 Survey をさぼっていたこともあり、良記事を読み逃していて、「うっ…」となりました。
特に [No Brilliant Jerks - Netflixの「頭はいいけど嫌な奴、お断り」について調べた](https://qiita.com/e99h2121/items/e0741f3dbf351942f3ca) は、私も少し引っかかっていた「難しい人」を掘り下げてくださった記事で、ちょっともやっとが解消されました。
また、[テックブログは続かない - 何サイトか潰した後にブログが有名な企業に転職しての気づきと反省](https://note.com/makaibito/n/n2d9e84a959c0#k4ns4) を読み、個人のエネルギーではなく組織全体の意識から変えてく必要があるというのは、その通りだよなーと感じました。
記事を書く手も止まり、リンク先のリンク先の、さらにそのリンク先の記事まで読み漁って気づいたら2時間経過…。
しかし、良い記事ばかりで、とても満足感がありました。
まだすべては読めていないので、引き続きお世話になりたいと思います。
メディアクエリでレスポンシブ対応する際の基本の型

## 結構使えるメディアクエリ

```css
/* iPhone 縦 */
 
@media screen and (min-width:480px) { 
    /*　for iPhone Landscape　(iPhone 横)　*/
 
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　for iPad 　*/
 
}
@media screen and (min-width:1024px) {
    /*　for PC　*/
 
}

```

スマホ、タブレット、PCすべての画面でレスポンシブに対応するにはこのメディアクエリの記述を使えば良い。
メモとしてここに書いておく。
2022-01-14 bram_copy_tb.vを実装 >Run Simulationにおいて CTRLのL->H動作時にcounterが0クリアされない

2022-01-14 bram_copy_tb.vを実装 >Run Simulationにおいて CTRLのL->H動作時にcounterが0クリアされない

### 動作環境

- Windows 10 Pro 
- Vivado v2019.1
- CORA Z7 (Z7-07S)

### 概要

[PYNQ を使って Python で手軽に FPGA を活用 (5)](https://www.acri.c.titech.ac.jp/wordpress/archives/36)にある`bram_copy.v`に対するテストベンチを実装した。
Run SimulationにてCTRLピンを「L->H」した時にBRAM間転送用のcounterが0クリアされない。

Note: XSDKの実装ではCTRLピンを「L->H」した時にcounterが0クリアされて、BRAM間転送が実施される。

Run Simulation用テストベンチの実装ミスだろうか？

## 内容

### テストベンチ

[2021-12-27 「PYNQ を使って Python で手軽に FPGA を活用 (5)」をXSDK実装](https://qiita.com/7of9/items/2dd0833eaf2be8808db1)
にて使用したbram_copy.vに対してテストベンチを以下のように実装した。

```bram_copy_tb.v
`timescale 1ns / 1ps

module bram_copy_tb(

    );
    
    
localparam STEP = 8;
localparam CLKNUM = 800;
    
// for input
reg RSTN;
reg CLK;
reg [31:0] Q0;
reg [31:0] Q1;
reg CTRL;

// for outpuot
wire clk0;
wire rst0;
wire en0;
wire [31:0] addr0;
wire [31:0] data0;
wire [3:0] we0;

wire clk1;
wire rst1;
wire en1;
wire [31:0] addr1;
wire [31:0] data1;
wire [3:0] we1;

wire [31:0] status;

// bram_copyを接続
bram_copy bram_copy(
    .clk(CLK),
    .resetn(RSTN),
    .clk_0(clk0),
    .rst_0(rst0),
    .en_0(en0),
    .addr_0(addr0),
    .data_0(data0),
    .we_0(we0),
    .q_0(Q0),
    .clk_1(clk1),
    .rst_1(rst1),
    .en_1(en1),
    .addr_1(addr1),
    .data_1(data1),
    .we_1(we1),
    .q_1(Q1),
    .ctrl(CTRL),
    .status(status)
);


always begin
    CLK = 0; #(STEP/2);
    CLK = 1; #(STEP/2);
end

initial begin
    // 初期化
    CTRL = 0;
    Q0 = 32'hDEADBEEF;
    Q1 = 32'hDEADBEEF;
    RSTN = 1;
    #(STEP*20) RSTN = 0;
    #(STEP*20)  RSTN = 1;
    // 
    #(STEP*132) CTRL=1; // 128CLK以上待つ
    #(STEP*10) CTRL=0;
    #(STEP*132) CTRL=1; // 128CLK以上待つ
    #(STEP*10) CTRL=0;
    //
    // CLK処理
    #(STEP*CLKNUM);
    $stop;
end
    
endmodule
```

### Run Simulation

上記とbram_copy.vを用いてRun Simulationした結果が以下の通り。

<img width="960" alt="image.png (34.3 kB)" src="https://img.esa.io/uploads/production/attachments/6206/2022/01/14/21741/f5969df6-cb68-4067-8368-cdc6f0e4c207.png">

CTRLピンが二回「L->H」に変化していることがわかる (以下、rising edgeと表記)。

`status[31:0]`はbram_copy.vにおいて`status <= counter;`としてcounter値が入っている。
リセット直後はstatus値が0から128までインクリメントされていく様子が見られる（正常）。

CTRLピンのrising edge近辺の波形が以下の通り。

<img width="2112" alt="image.png (50.1 kB)" src="https://img.esa.io/uploads/production/attachments/6206/2022/01/14/21741/953ad51e-1dcd-4ea4-ba75-6f45fe8ef1af.png">

CTRLピンのrising edge後にstatus(counter)の値が0にならない。このため、二回目のBRAM間転送が実施されない。

### bram_copy.vの実装

bram_copy.vの注目している実装部分は以下の通り。

```
		if(ctrl_reg == 0 && ctrl != 0) begin
		    counter <= 0;
		end
```

### 納得いかない点

[2021-12-27 「PYNQ を使って Python で手軽に FPGA を活用 (5)」をXSDK実装](https://qiita.com/7of9/items/2dd0833eaf2be8808db1)
にて実装したXSDKの処理においてCTRLのrising edgeを二回発生させたが、BRAM間転送は二回とも実施された（正常）。
XSDKの処理としては正常であり、bram_copy.vの実装自体に問題はないようである。

一方で、Run Simulationした時の波形が期待どおりでない(counterがゼロクリアされない)。

自分のテストベンチ実装の間違いなのだろうか？
present?メソッドとnil?メソッドの使い方


#はじめに
　今回はpresent?メソッドとnil?メソッドについてまとめます。どちらも条件分岐の時に便利なメソッドです。条件分岐どうしようと悩んだ時に、このメソッドで解決できたのでまとめます。
この記事は学習備忘録です。

#present?メソッドとnil?メソッドの違い
　present?メソッドとnil?メソッドは、オブジェクトに対してtrueとfalseを返すメソッドです。
使用例としては

present?メソッド→@testsに値が入っている時trueが返される

```qiitq.rb
@tests.present?
#実行結果
=> true
```

nil?メソッド→@testsに値が入っていない時trueが返される


```qiitq.rb
@tests.nil?
#実行結果
=> true
```

このメソッドを利用して条件分岐を作る事ができます

#present?メソッドとnil?メソッドで条件分岐を作る
　present?メソッドとnil?メソッドを使って、
以下のようにインスタンス変数に中身がある場合は商品を表示させて、中身がない場合は代わりの画像を表示させる実装があります。

```qiita.rb
<% if @tests.present?%>
 <% @tests.each do |test| %>
  <%= test.title %>
 <% end %>
<% else %>
  値なし
<% end %>
```
上記はpresent?メソッドを使っているので、
実行すると@testsの中身がある場合は値が表示され、中身がない場合は「値なし」と表示されます。
（代わりに、nil?メソッドを使う方法でも条件分岐を作れます。）
#まとめ
　今回はpresent?メソッドとnil?メソッドについてまとめました。どちらも簡単に条件分岐を行う事ができる便利なメソッドなので、使い方をマスターしたいと思います。
この記事が少しでも誰かのお役に立てれば幸いです。
pyenvによるPythonのバージョン変更方法 for Mac

# 参考

https://github.com/pyenv/pyenv

https://github.com/pyenv/pyenv/blob/master/COMMANDS.md#pyenv-local


# 概要
Pythonのバージョン切り替え方法について

# 内容
MacでPythonのバージョンを切り替える場合はpyenvを使用する

## インストール

pyenvのインストール

```
% brew update
% brew install pyenv
```

シェルの環境設定
(zshを使用している場合)

```
% echo 'eval "$(pyenv init --path)"' >> ~/.zprofile
% echo 'eval "$(pyenv init -)"' >> ~/.zshrc
```

## 使用方法

インストール可能なバージョンの確認

```
% pyenv install --list
```

指定したバージョンのインストール
(今回はバージョン3.7.12をインストール)

```
% pyenv install 3.7.12
```

インストールしたバージョンの確認

```
% pyenv versions
* system (set by /Users/username/.pyenv/version)
  3.7.12
```

systemは元々入っているPython
3.7.12が今回インストールしたバージョン
*(アスタリスク)がついているバージョンが現在適用されている

バージョン切り替え

```
% pyenv shell 3.7.12
```

バージョンの確認

```
% pyenv versions
  system
* 3.7.12 (set by PYENV_VERSION environment variable)
```

もとに戻すときは

```
% pyenv shell --unset
* system (set by /Users/username/.pyenv/version)
  3.7.12
```

## 補足
Macにはデフォルトでpython2が入っておりコマンド"python ~"ではpython2.xが実行され
python 3.xを実行するには"python3 ~"で実行する必要がある。 

しかし、pyenvで変更されるのはコマンド"python"の方なのでバージョンを変更したpythonを実行する際は"python ~"で実行する必要がある。
(コマンド"python3"は変更されない)


- バージョン変更前 

```
% python -V
Python 2.7.16
```

```
% python3 -V
Python 3.8.5
```

- バージョン変更後

```
% pyenv shell 3.7.12

% python -V
Python 3.7.12

% python3 -V
Python 3.8.5
```




以上
条件付き書式にコメントをつける【Excel】

条件付き書式はテーブルみたいな列名付与ができないのでパッと見で数式がわかりづらいだけでなく、似たような判定式を複数作っているとどれがどれか分からなくなりますよね。

さらにコピペで増殖された日には改修する気が一気に失せます。

そこで関数にコメントを入れる方法を使えばまだマシにできないかと試したところ、参照セルの見づらさは改善できないまでも意図は分かりやすくすることができました。


## IF関数のFALSEを使ってコメント化する

`=IF(論理式,TRUE,"コメント")`
とするだけで条件付き書式に意味をつけられます。
素晴らしい。

## N関数を使ってコメント化する
もちろんN関数も使えます。

### 判定対象が数値の場合

`=N("コメント")+論理式`

ここで注意すべきは`&`ではなく**`+`**で結合するところです。

|基準値|評価値|
|---|---|
|0.48|0.56|

|=N("コメント")&$A2|=N("コメント")+$A2|
|---|---|
|00.48|0.56|

`&`でつなげると、「`00.65`なんぞ」とExcelがご認識してしまいます。
数値なので`+`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/f0e7f6f6-cb3f-d970-b1c1-917da50ce4a7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/46a21028-aada-677a-a889-693ddf20a7c4.png)

### 判定対象が文字列の場合（あいまい検索）

|対象文字列|KW|
|---|---|
|エクセル|セル|

あいまい検索時には結局`COUNTIF`が吐いた数値で評価するので`=N("コメント")+論理式`という形は変わりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/bbb71781-cad6-83bf-7aba-a05390a44601.png)

### 判定対象が文字列の場合（完全一致）

|対象文字列|KW|
|---|---|
|エクセル|エクセル|


今度は`T関数`で挟んでやります。
`T(N("コメント"))&論理式`となり、`+`ではなく`&`でつないでいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/a8bf287b-7b9c-b3d6-ce2c-f1df238297c1.png)



## まとめ
結論、コメントをつけたい位置によって使い分ければいい気もしますが、

`N関数`は`+`だの`&`だの`T関数`で挟む挟まないだの場合分けが必要なので
`IF関数`が万能で書きやすいかな、という印象です。

ただ、数式が長くなってコメントが後ろにいくと見えないよ、というときは頑張って`N関数`で書くしかないですね。

||構文|コメント位置|使い分け|
|:---:|:---|:---:|:---|
|IF関数|=IF(論理式,TRUE,"コメント")|後|数式を先に見たいとき|
|N関数:数値判定|=N("コメント")+論理式|前|意図を先に見たいとき|
|N関数:数値判定|=論理式+N("コメント")|後|数式を先に見たいとき|
|N関数:文字列判定|=T(N("コメント"))&論理式|前|意図を先に見たいとき|
|N関数:文字列判定|=論理式&T(N("コメント"))|後|数式を先に見たいとき|
【Nginx】xxx/xxx.php を任意のURLにリダイレクトさせたときの備忘録

# はじめに

特定のパスを指定した場合に`nginx`でリダイレクトさせる処理を追加した際の備忘録です
また、`nginx.conf`の読み方が曖昧だったので以下の記事を参考に整理してみました

https://qiita.com/morrr/items/7c97f0d2e46f7a8ec967

https://heartbeats.jp/hbblog/2012/04/nginx04.html

https://nulab.com/ja/blog/typetalk/measure-clickjacking/

https://www.templarbit.com/blog/jp/2018/07/24/top-http-security-headers-and-how-to-deploy-them/

https://qiita.com/k_hoso/items/33ccb5e02e73a244ed31

# やり方

以下を追加する

```conf:/nginx/default.conf
    location /hoge/index.php {
        return 301 http://example.com/
    }
```


# 設定解説

`server {}`:バーチャル(仮想）サーバの設定を記述
`listen 80;`：IP番号とポート番号を指定する
`server_name`:サーバ名を指定する
`root`:ドキュメントルートを指定する
`add_header`:カスタムレスポンスヘッダーを追加する。
`X-Frame-Options "SAMEORIGIN";`:同じドメイン内のみページの表示を許可する
`X-XSS-Protection "1; mode=block";`:XSS攻撃を検知してした際に読み込むことを防止する
`X-Content-Type-Options "nosniff";`:リソースのContent-Typeを無視することがなくなり、HTMLではないものをHTML扱いしてしまうことによるXSSを防ぐ
`index`:indexファイルを指定する
`charset`:レスポンスヘッダのContent-typeを指定する
`location`:パスごと個別のドキュメントルートを設定可能
`location /`:ルートパスにアクセスされた場合にコンテキスト内の処理を行う
`try_files`: ファイルが存在するかをチェックする 
`$uri $uri/`:`/hoge`というファイル名がない場合
`$uri/`:`./hoge`というディレクトリを探す
`/index.php?$query_string`:`/index.php`というファイルもなければ内部リダイレクトする
`location = /favicon.ico { access_log off; log_not_found off; }`:`favicon`へのアクセスはログへの記録オフ
`error_page 404 /index.php;`:404エラーが発生したときに内部リダイレクト


```conf:/nginx/default.conf
server {
    listen 80;
   
    server_name example.com;
    root /work/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location /hoge/index.php {
        return 301 http://example.com/
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}
```

# さいごに
読んでいただきありがとうございます。
いいねしていただけると記事執筆の励みになりますので、参考になったと思った方は是非よろしくお願いします！
【devise_token_auth】認証トークンの保存先について

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## 今回の疑問点
　今回の疑問点は、

　　_認証トークンの保存先について_
　
　です。　
devise-token-authを用い、認証機能を実装していた際に保存先について疑問を抱き、それぞれのメリット・デメリットについて調べました。

## 認証トークン保存先のメリット・デメリット
### local storage
メリット

- 実装が簡単

デメリット

- XSS脆弱性があった場合、トークンを簡単に盗むことができる

### Cookie
メリット

- HttpOnly属性をtrueにすることでJavaScriptからのCookie操作を無効にできる

デメリット

- 実装に手間がかかる
- HttpOnly属性をtrueにしても完全に安全というわけではない

### In-Memory
メリット

- 攻撃が困難

デメリット

- 利便性が低い
 - リロードするとログアウトされる
 - タブ間でログイン状態が継続されない

### 認証プラットフォーム(Auth0）
メリット

- 安全性が高い
- 利便性も損なわれない

デメリット

- ユーザーが一定数を超えるとお金がかかる
JSON.stringifyのreplacer関数内のif文の条件にtypeofが必要な理由は？

オブジェクトからJSON文字列を作成するには、JSON.stringifyを使います。
JSON.stringifyは、target、replacer、spaceの引数があります。

replacer関数内のif文の条件typeofが無い場合は、undefinedになってしまいます。

```JavaScript
const target = {a: "apple", b: "banana", l: "lemon"};

function replacerNG(prop, value) {
  if (value !== "banana") {
    return
  }
  return value;
}

console.log(JSON.stringify(target, replacerNG));

> undefined
```

replacer関数内のif文の条件typeofがある場合は、条件にあった「banana」が変換されています。

```JavaScript
const target = {a: "apple", b: "banana", l: "lemon"};

function replacerOK(prop, value) {
  if (typeof value === "string" && value !== "banana") {
    return
  }
  return value;
}

console.log(JSON.stringify(target, replacerOK));

> {"b":"banana"}
```

これは、replace関数の挙動に関係があります。

オブジェクトのプロパティごとに繰り返し、replacer関数が呼び出されます。
1回目の呼び出しでは、key="", value={a: "apple", b: "banana", l: "lemon"}が渡されます。
2回目の呼び出しでは、key="a"、value="apple"が渡され、3回目の呼び出しでは、key="b"、value="banana"、4回目の呼び出しでは、key="l"、value="lemon"が渡れます。

つまり、1回目の呼び出しでは、value={a: "apple"、b: "banana"、l: "lemon"}と、"banana"の比較が行われ、条件式の結果がtrueとなり、undefinedが戻されることになります。

このような挙動を避けるために、if文の条件にtypeofを含める必要があります。
Railsチュートリアル（6版）の13章で_form.html.erbを使っていた場合の戸惑い解消

# はじめに
プログラミング初学者の[@kat_log](https://twitter.com/kat__log "Twitter")と申します。

Railsチュートリアル（Rails6版）の13章「13.3.2マイクロポストを作成する」の「リスト 13.43、13.44」で戸惑った部分について共有です。

## 戸惑ったポイント
10章の「10.1.1編集フォーム」の演習2をやった場合、`new.html.erb`と`edit.html.erb`の一部を`_form.html.erb`としてパーシャルにするため、テキストと違いが出て、どの部分を`f.object`にするか戸惑いました。

# 結論
`new.html.erb`と`edit.html.erb`は書き換え不要で、`_form.html.erb`を1箇所変えるとOKです。

```ruby:_form.html.erb
<%= form_with(model: @user, local: true) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>

  <%= f.label :name %>
  <%= f.text_field :name, class: 'form-control' %>

  <%= f.label :email %>
  <%= f.email_field :email, class: 'form-control' %>

  <%= f.label :password %>
  <%= f.password_field :password, class: 'form-control' %>

  <%= f.label :password_confirmation %>
  <%= f.password_field :password_confirmation, class: 'form-control' %>

  <%= f.submit yield(:button_text), class: "btn btn-primary" %>
<% end %>
```

# おわりに
お読みいただきありがとうございました。
自分と同じくrailsチュートリアル学習中の方の参考になれば嬉しいです。
一緒にプログラミング学習頑張っていきましょう〜😄
2022/1/15主にITとかセキュリティの記事

米政府、悪用済み脆弱性リストに15件を追加
https://www.security-next.com/133251

博物館情報サイトが改ざん - 不正サイトへ誘導
https://www.security-next.com/133074

ラベルプリンタ「テプラ」の一部製品に脆弱性 - Wi-Fiの認証情報が漏洩するおそれ
https://www.security-next.com/133299

2021年総括／中国APTが中国国内企業を攻撃／華為スパイ活動マーケ資料 ほか [Scan PREMIUM Monthly Executive Summary](1/13)
https://s.netsecurity.ne.jp/article/2022/01/13/46940.html

「インターネットリテラシー」とは？|ネットやSNSとの上手な付き合い方【インターネット基本のき】(1/13)
https://gunosy.com/articles/aJumP

Adobe Acrobat製品に任意コード実行などにつながる脆弱性(1/12)
https://news.yahoo.co.jp/articles/6175a77b48e8dc6cfbd153583b9b2148e4ca587d

Adobe Acrobatなどに緊急の脆弱性、直ちにアップデートを(1/13)
https://news.mynavi.jp/techplus/article/20220113-2248358/

Auth0の公共部門指数で、政府が信頼できるオンライン市民サービスの提供で苦労していることが明らかに(1/12)
http://mjp.acrofan.com/article_sub3.php?number=96498&lang=

ほぼ中国のサイト。現役探偵の調査で判明した「フィッシングメール」の恐ろしい実態(1/13)
https://www.mag2.com/p/news/524368

Firefoxだけ突然インターネットにつながらなくなる障害発生中か（※復旧方法あり）(1/13)
https://news.biglobe.ne.jp/it/0113/nlb_220113_3299737994.html

19歳のハッカー、テスラ車のシステムはリモート操作で侵入可能と主張(1/13)
https://www.bloomberg.co.jp/news/articles/2022-01-12/R5LG9VT1UM0W01

「ウイルス除去にお金が必要」アダルトサイトをみた７０代男性が１１０万円だまし取られる(1/13)
https://m.stv.jp/news/stvnews/u3f86t00000cvgqi.html

「人類の損失に思える」新ドメインに移行したNTTの旧ホームページ、リダイレクト終了で物議(1/13)
https://internet.watch.impress.co.jp/docs/yajiuma/1380022.html

テレワークで役に立ったクラウドサービス、3位は「グループウェア」、2位は「ビジネスチャット」、1位は？(1/13)
https://www.iza.ne.jp/article/20220113-NQ3Q27B2KBNSRKNXWRFVBFY6QQ/

2022年に日本のDXの真価を問う　「地獄の沙汰」が意味するもの(1/14)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600007/010500104/

Log4jの脆弱性を悪用するランサムウエアが出現、既に日本のIT企業で実害か(1/14)
https://xtech.nikkei.com/atcl/nxt/column/18/00001/06457/

SaaSに新手のXSS攻撃、11社のECサイトから43万件の顧客情報漏洩(1/14)
https://xtech.nikkei.com/atcl/nxt/column/18/01157/011300052/

テレワークで使ってみたいツールランキング、注目技術と意外なアイテムが上位に(1/14)
https://xtech.nikkei.com/atcl/nxt/column/18/01856/011200012/

2022年の転職市場を予測、引く手あまたのITエンジニア需要けん引する3分野とは(1/14)
https://xtech.nikkei.com/atcl/nxt/column/18/00577/010700032/

CIOは外部からスカウトすべきか、生え抜きか？名物CIOの答え(1/14)
https://xtech.nikkei.com/atcl/nxt/column/18/01698/122400020/

auカブコム証券は防御から検知にシフト、マルウエア対策ソフトの「常識」を見直せ(1/14)
https://xtech.nikkei.com/atcl/nxt/column/18/01897/122200006/
alpha付き画像の背景を白塗りするやつ

```python
import cv2
img = cv2.cvtColor(cv2.imread("alphaimg.png", -1), cv2.COLOR_BGRA2RGBA)
img, mask = img[...,:3], img[...,3:] / 255.
img = (img * mask + np.ones(img.shape)*255 * (1. - mask)).astype(np.uint8)
```
Raspberry Pi 4 に openSUSE をインストールする

# はじめに
今回は Raspberry Pi 4 に openSUSE Leap 15.3 をのデスクトップ環境なしでインストールし、有線 LAN に接続した状態で起動して ssh ログインによって初期設定を行います。

## 環境
- Raspberry Pi 4 Model B 8GB RAM
- macOS 10.15.7 Catalina
- balenaEtcher 1.5.79


## openSUSE とは

Linux ディストリビューションの一つで、Leap はその安定版です。便利なツールが多く、コマンド操作に不慣れな人でも SSH 越しに使いやすいディストリビューションだと思います。日本ではマイナーな OS ですが、Linux のコマンド操作に自身がない人にもおすすめです。

# インストール

## OSのダウンロード

下記のコマンドで Raspberry Pi 4 向けのイメージをダウンロードします。[公式 Wiki ](https://en.opensuse.org/HCL:Raspberry_Pi4)を参考に、GUI 無しの JeOS というエディションを選びました。

```shell_session:PC
wget http://download.opensuse.org/distribution/leap/15.3/appliances/openSUSE-Leap-15.3-ARM-JeOS-raspberrypi.aarch64.raw.xz
```

## microSDカードへの書き込み

[balenaEtcher](https://www.balena.io/etcher) 等を用いて microSD カードに OS を焼きます。
次に、Raspberry Pi の起動時に sshd を自動起動するように、 microSD カードをPCにマウントして boot ディレクトリ内に空の ssh ファイルを作成します。 Mac の場合は以下のコマンドで作成できます。

```shell_session:PC
touch /Volumes/EFI/EFI/BOOT/ssh
```

## Raspberry Pi 4 の起動とログイン
ここでは Raspberry Pi 4 の IP アドレスを`192.168.100.10`とします。この値は環境によって変わりますので、ご自身の環境に合わせて変更してください。パスワードは`linux`です。

```shell_session:PC
ssh root@192.168.100.10
```


# 初期設定

## sshd の自動起動
まずは、次回以降も起動時に sshd が自動で起動するように設定します。

```shell_session:RaspberryPi
systemctl enable sshd
```

## ホスト名の設定
ssh ログインを容易にするために、`/etc/hostname`ファイルを書き換えてホスト名を設定します。ここでは、ホスト名を`foobar`に設定します。

```shell_session:RaspberryPi
echo foobar > /etc/hostname
```


## パッケージの更新と追加

まずはリポジトリを更新します。(Ubuntuでいう $ apt update)

```shell_session:RaspberryPi
zypper refresh
```

次に、パッケージをアップデートします。(Ubuntuでいう $ apt upgrade)

```shell_session:RaspberryPi
zypper update
```

加えて、必要なパッケージをインストールします。

```shell_session:RaspberryPi
zypper in -y system-group-wheel man emacs-nox zsh sensors avahi bind-utils git gcc sl
```


## ユーザーアカウントの作成
root アカウントの常用は危険ですので、ユーザーアカウントを作成し、今後はそちらを利用します。ここでは hoge という名前のユーザーを作成します。wheel グループに入れることにより、sudo が使えるようになります。

```shell_session:RaspberryPi
useradd -m hoge -s $(which zsh) -G wheel
```

作成したユーザーのパスワードを設定します。

```shell_session:RaspberryPi
passwd hoge
```

## 再起動して再ログイン
アップデートや設定を適用するために再起動します。

```shell_session:RaspberryPi
reboot
```

再ログインすることで、ユーザーとホスト名の設定が正しく反映されたことを確認します。

```shell_session:PC
ssh hoge@foobar
```

これで一先ずセットアップは完了です。ここから、ssh の root ログインを禁止したり、使いたいパッケージをインストールしたりして使い始めましょう。

# 参考
[1] https://en.opensuse.org/HCL:Raspberry_Pi4
[2] https://ja.opensuse.org/Portal:Distribution
[3] https://www.mikan-tech.net/entry/raspi-lite-headless-setup
【Mac】VSCode　ターミナル切り替え　ターミナル⇆エディタ切り替え　ショートカット

上へ移動：``Shift + Command + [``
下へ移動：``Shift + Command + ] ``
エディタ → ターミナル：``Control + ` ``
ターミナル → エディタ：``Control + 1``（画面1へ） ``Control + 2``（画面2へ） ...


---

VSCode画面左下の歯車をクリック → キーボードショートカット
（または、``command + k → command s``）
で、ショートカット一覧が見れる。検索バーに ``terminal focus next `` と表示すると、↑のショートカットなどが表示される。


**参考**


https://qiita.com/miriwo/items/876daee1eda5465f4f37


https://qiita.com/Shun141/items/fbed88abd4518f6d4039
Nuxt.jsでGraphQL Serverをホストする

Nuxt SSR で GraphQL Server を使おうと思ったのですが、あまり同じような記事がなく手間取ったので記事にしました。
私と同じケースの方は少ないかもしれませんが、お役に立てれば幸いです:smiley:

# 前提条件
 - Nuxt でプロジェクトを作成済み
 - Target: server になっていること（動的にホストするため）
 - GraphQL についての基礎知識がある

# 実装

## 実行環境
今回の実行環境は以下の通りです。

 - Node.js v16.13.1
 - Yarn 1.22.5
 - Nuxt.js 2.15.8
 - GraphQL 16.2.0
 - express-graphql 0.12.0

## 使う機能
Nuxt の `serverMiddleware` という機能を用います。

https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/

この機能について簡単に言えば、外部サーバーを用いることなく、サーバー特有の処理を行うことができるというものです。

例えば、

 - サーバーサイドのリクエスト解析
 - Expressを用いてREST のエンドポイント

などを作ることができます（上記ドキュメントの例より）。

## 依存関係

※ 記事の冒頭にもあるように、Nuxt は準備済みという前提です。

serverMiddlewareでは、内部的には、[connect](https://github.com/senchalabs/connect) のインスタンスを立ち上げているようです（先ほどのドキュメントより）。
そこで、connectに対応している [express-graphql](https://github.com/graphql/express-graphql) を用います。

express-graphqlについては、こちらの公式ドキュメントを参照してください。

https://graphql.org/graphql-js/running-an-express-graphql-server/

```bash
yarn add graphql express-graphql
```

## ファイルを作成する
ディレクトリ構成は以下のようにします。

```
root
 ├ (略)
 |
 ├ server-middleware/
 |  └ graphql.ts
 |
 └ nuxt.config.ts
```

つまり、 `server-middleware` ディレクトリを作り、その中に `graphql.ts` を作ります。

## graphql.ts を実装する

[express-graphql のドキュメント](https://graphql.org/graphql-js/running-an-express-graphql-server/) と、 [NuxtJS のドキュメント](https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/) を参考にしながら実装していきます。

なお、ここでは TypeScript を用いて実装しているため、型指定の必要のないJavaScriptでは不要な部分があります。

```ts:graphql.ts
import { ServerMiddleware } from '@nuxt/types'  // JSでは不要
import { IncomingMessage } from 'http'  // JSでは不要
import { buildSchema } from 'graphql'
import { graphqlHTTP } from 'express-graphql'

const graphqlServer = (req, res, next) => {
  // JSでは不要
  const reqCasted = req as (IncomingMessage & {url: string})

  // さまざまな処理 ...
  // ...

  const schema = buildSchema(...)
  const root = { ... }

  graphqlHTTP({ ... })(reqCasted, res)
  // JSの場合は、reqCastedを宣言しないため、以下のようにします
  // graphqlHTTP({ ... })(req, res)

  return
}

export default graphqlServer
```

ここで、

```ts
const reqCasted = req as (IncomingMessage & {url: string})
```

とキャストしたのは、もともと仮引数にある `req` は `IncomingMessage`型であるのに対し、graphqlHTTPに渡す引数は `IncomingMessage & {url: string}` 型であるためです。

https://github.com/graphql/express-graphql/blob/f4414b44996f25a5328e523d9a4b213fd1d70b16/src/index.ts#L33

上記 express-graphql のコードにもありますが、実際には `req.url` は常に定義されているため、キャストしても問題はないです。
（IncomingMessage型において `url` は `string | undefined` になっている）

## nuxt.config.js(.ts) に追記する

今回は `/graphql/*` へのアクセスをGraphQLに割り当てることにします。

```ts:nuxt.config.ts
import { NuxtConfig } from '@nuxt/types'
const config: NuxtConfig = {
// ... 
  serverMiddleware: [{
    path: '/graphql',
    handler: '~/server-middleware/graphql.ts'
  }]
// ...
}
export default config
```

## サーバーを立ち上げて確認してみる
実際にローカルサーバーを立ち上げて確認してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279132/6fcc2385-e833-bb20-a77c-792e6fa9e180.png)

GraphiQL が表示されました！実際に動作していることがわかります。
ColdFusionのExcel出力事情などをメモ

## これまでの認識

**（以下、ColdFusion2018での動作となり、最新版では異なるかもしれません）**

ColdFusionには`cfspreadsheet`タグなどでExcelの読み書きをする機能が実装されていますが、
処理が遅かったり、メモリを大量消費するなどを理由に、利用を見送った方もいると思います。

これは、Apache POIを利用しているのが理由です。

ColdFusionのExcel読み書きが遅いこともあり、POIを使って自前実装する方もいたと思います。
恐らくColdFusionでは`org.apache.poi.xssf.usermodel.XSSFWorkbook`クラスを利用していることが処理が重い原因だと思います。
（POIが重い理由などがあまりよくわからない方は、適当にググってみてください）

なので、`org.apache.poi.xssf.streaming.SXSSFWorkbook`クラスを使って速度改善を試みた方もいるのではないでしょうか？

## ~~最新のColdFusion2021ではPOIを使っていないかも？~~（認識が間違っていたので削除）

~~先日、最新のColdFusion2021をちょっとだけ触ってみたのですが、~~
~~`org.apache.poi.xssf.streaming.SXSSFWorkbook`を使ってみたらこんなエラーメッセージが表示されました。~~
~~![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1870139/66f0c721-c496-12c0-658b-3ed585048a57.png)~~
~~**クラスが見つからない・・・**~~

~~ちなみに、`org.apache.poi.xssf.usermodel.XSSFWorkbook`でも同様でした。~~

~~Dockerを使って環境を構築しているので、`/opt/coldfusion/cfusion/lib`にjarファイルなどがあるのですが、ここにPOI関連のファイルが無いようです。~~
~~（ColdFusion2018では、ここにPOI関連のjarファイルがありました）~~

~~POIを置いてないなどの理由なのか、ColdFusion2021のDockerイメージは2018のDockerイメージと比べてサイズが半分くらいになっているようです。~~
~~（2018が992MB、2021が412MB）~~

~~**もしかして、ColdFusion2021ではPOIを使わずにExcel出力が実装されているのでは・・・**~~
~~**もしそうなら、パフォーマンスが大幅に改善されているのでは・・・**~~

~~いつか試したいのですが、現時点でColdFusion2021を使う開発案件はないので、~~
~~一旦ColdFusion2021の調査はここまで・・・~~

### 追記

コメントで情報をいただきました。ありがとうございます。
ColdFusion2021から[パッケージマネージャー](https://helpx.adobe.com/jp/coldfusion/using/coldfusion-package-manager.html)なるものが導入されたようです。
これを利用してPOIを追加する、と言った感じになりそうです。
（そのうち時間を作ってまた試してみます）

公式の日本語ドキュメントが少なくなってきたColdFusionですが、2022年もドキュメントを更新しているので、まだまだやる気はあるみたいですね。

## おまけ：ColdFusion2018でSXSSFWorkbookを使う

ColdFusion2018ではPOIが使われているので、`org.apache.poi.xssf.streaming.SXSSFWorkbook`も使えるのですが、なぜかシート作成に失敗するようです（自分だけ？）。

```cfscript
// パフォーマンス改善のためSXSSFWorkbookを利用
var workbook = createObject("java", "org.apache.poi.xssf.streaming.SXSSFWorkbook");

// この処理が失敗する（XSSFWorkbookだと問題なく動くけど・・・）
var sheet = workbook.createSheet();
```

この場合、`Dockerfile`をこんな感じにすると`org.apache.poi.xssf.streaming.SXSSFWorkbook`でも動きました。
（libfreetype6-devは環境に合わせてそれらしく・・・）

```dockerfile:Dockerfile
FROM adobecoldfusion/coldfusion2018

RUN apt-get update -y
RUN apt-get install fontconfig libfreetype6-dev -y
```

あとはPOIのドキュメントとにらめっこしながらJavaっぽいコードを書けば、だいぶパフォーマンスは改善されるはずです。
charge effectっぽいものをshader graphでつくってみる (SGL003)

シェーダグラフで毎日１つなんか作って見る運動

## 完成品

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

集中線がなんか回転しながら伸びたり縮んだりするようなエフェクトを作りたかった

## 全体像

![shader graph overview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15000/a309192f-c385-48a5-2927-f0c651fe4b8d.png)

## つくりかた

![concentration lines](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15000/d8cdf9c1-b743-59cf-b9ea-0b52918fcb81.png)

極座標をθとrに分解して、θ似関してgradient noiseをかける.
rは範囲内に収まるように適当にremapする
addして合成すると集中線っぽいものができる

![add theta](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15000/35bcbd68-56b2-ab5c-fcc9-3cbe21514241.png)

集中線のθは時間のsin波から適当に0-1で回転をつけて合成する.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15000/aca671ad-be1a-af9f-6d24-2fe9e534a898.png)

smoothstepで線をくっきりさせるが、その閾値を時間sin波で波立たせることで、集中線の大きさの強弱をつける.

あとはBaseColorに接続して完成!

## code

https://github.com/mattak/ShaderGraphDiscipline/tree/master/Assets/Learnings/Learning003
【Unity】GameObjectを設置したのにGameビューで表示されない

Unityの概念がよくわからないまま触っていて、とても単純なことですが分かるまでとても困ったので記事にしてみました。

# 現象
Canvasの中にGameObject(CubeやSquareなど)を配置して、
Sceneビューではちゃんと確認できるんですが

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/b87fe603-d1d8-e9c6-928e-e74be76e14df.png)

Gameビューで見ると何も表示されていませんでした。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/8af88e6d-eedc-ad19-0be0-4e1895873447.png)

# 原因
カメラビューの中に入っていませんでした(恥ずかしい)

# UnityにおけるカメラとUIという概念
Unity超初心者だったため、UnityのカメラとUIという概念すらわかっていませんでした。


## カメラ
Unityにはカメラという視点があり、
2D横スクロールのマリオなどですと
常に操作キャラクターのマリオを追っかけていますが、
あれはカメラがキャラクターを中心に視点を動かしているからです。

もちろん **視点から外れたものは画面には写りません** 。

## UI
一方、視点が動いても常に表示されるものもあります。

例えば、2D横スクロールのマリオですと、
視点は動いていても画面上部に「制限時間」や「コイン枚数」
などが **固定で表示** されています。

視点に関係なく **常に画面上に表示させたいものはUIで実装** します。

試しに、Hierarchy の中で右クリック > UI の中を確認すると、
Button や Text などありますがこれらが画面上に固定で表示されます。

# Canvasの大きさをカメラの範囲内にいい感じに収める方法
ただ、Canvas を作成した時は無駄に大きく作られます。

こんな感じ。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/bca78e92-3398-bf2a-cf7a-15d12c690222.png)

左下にある物凄く小っっっっっっっちゃいのがカメラです。

。。。。。。。。。。。。。。。


無駄に Canvas が大きい。。。

これを Canvas がカメラの範囲内にいい感じに収めるようにしたいとおもいます。

## 設定方法
まず、Hierarchy にある Canvas をクリックしてアクティブにします。

そして、Inspector > Canvas > Render Mode を
「**Screen Space - Camera**」 にします。

あとは、 **Render Camera** に **Main Cameraをアタッチ** します。

すると Canvas のサイズがいい感じに収まってくれ、
Gameビューに切り替えてもちゃんと表示されています。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/301ebbeb-8cf3-56f3-3d07-72196f6c6569.png)

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/805b0662-0705-f234-b17f-29910f0eebda.png)

以上、ご拝読有難うございました。
Ruby 中級者になるために絶対に理解しておかなければならない知識

こんにちは！石田佳介です！

今回の記事では、RoR初心者が中級者になるために絶対に抑えておかなければならないことを記事にします。

それは、オブジェクト、インスタンス、インスタンス変数、クラス

この４つを人に説明できるようになるくらい理解していないと絶対に更なる高みにはいけません。

それはなぜか？理由は、めちゃくちゃ大事な基礎であり、RoRの根幹になるものだからです。いくら多くのメソッドをおぼえても、上の4つを完璧に理解していなければ、実務に入ってもいつか頭打ちがきます。

こんな言っている僕ですが、ぼくも最近理解したので、心配しないでくださいね（笑）

今回使用する言語はrubyを使うので、ご了承ください

それでは本題に入りましょう

そもそもオブジェクトって？

この言葉よく聞くとおもいますが、そんな難しいことを言っているわけではありません。よく「モノ」と表現されます。現実世界でイメージしてみるとよく分かると思いますが、世の中には、モノであるあふれてますよね。スマホ、パソコン、本、等々あげたらキリがありません。

それはわかったけど、プログラミングの話をしてくれよ！っていうツッコミが出てくるとおもうので、もう少しプログラミングチックな話にしていきましょう

実際にターミナルに打って確かめる

rubyをインストールしている方は、コマンドで

```
irb
```

と入力すると、コンソールが開きます。

まずは、簡単なオブジェクトからいきましょう。その一つが文字列です。文字列とは簡単にいうと、人間が普通にしゃべっている言葉のことです。

コマンドで、山田太郎と入力すると

```
"山田太郎"

=> "山田太郎"
```

と出力されます。ここで、僕らと、コマンドの間でどういう会話が生まれたかというと、

僕ら：山田太郎というオブジェクトを作って、ここに置いておくね！ターミナル：山田太郎というオブジェクトを作って、ここに置いておくのね！おっけ！

というような会話が生まれています。この会話によって、「山田太郎」というモノが作られたわけです。*(誤解を招かないようにいうと、ターミナルじゃないと、オブジェクトが作られないわけじゃないです。)

要は何を言いたいかというと、rubyはあらゆる文字や数字がモノ、つまりオブジェクトとして扱われるよ！ということなんです。このようにあらゆるものがオブジェクトとして扱われ、使われることをオブジェクト指向といいます。でも、皆さんのなかには、「石田よ、言ってることは分かった。でも、あらゆるものがオブジェクトになると何がいいの？」って思う人が多いとおもいます。ここで理解しなければいけないのが、インスタンス変数というものです。変数というものは、プログラミング勉強していたら分かるとおもいますが、インスタンスというものは中々理解されないところだとおもいます。そして、インスタンスというものを理解するためには、クラスというものを理解しなければいけません。

クラスとインスタンス

まず、クラスとは設計書とよくいわれれます。現実世界でイメージしてみましょう。たとえば、家を作るための設計書があるとします

![ダウンロード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485775/d833c49e-fbe1-323a-bb33-13d758bad538.jpeg)


この設計書をもとに、あらゆる家を作っていきます。たとえば、洋風な家、和風な家、お城みたいな家などなどできるわけです。このように洋風な家、和風な家、お城みたいな家それぞれをインスタンスと呼ぶわけです。洋風な家もインスタンス、和風な家もインスタンス、お城みたいな家もインスタンスになるんです。インスタンスを和訳すると、「実物」となるので和訳もぴったりですね。

では、プログラミングの話で考えてみましょう。Userというクラスがあるとします。そこでこんなようなコードを打ってみましょう

```
User.create(name: “John”, email: “John@example.com”)
```

(モデルにこのカラムがあると仮定しています)このようにすると、Userというクラス(設計書)から、
nameがJohnでemailがJohn@example.comという具体的なモノ、つまりインスタンスができるわけです

長くなりましたが、インスタンスとはこのようの具体的なモノなんですでは話は戻ってインスタンス変数とは何か。ここまでついてこれた方は何となくわかるとおもいます今まで見てきたような具体的なモノ、つまりインスタンスが格納されている変数、それがインスタンス変数なんです。そしてインスタンス変数はそのインスタンス固有の変数です

オブジェクト指向とは？

オブジェクト指向の話に戻ります。これまでの話を総括すれば、オブジェクト指向のメリットは分かるとおもいます。これまでの話で、クラス、インスタンス、そしてインスタンス変数を説明しました。そしてこれらって、どこでも使いまわせるんですね。クラスでいえば、継承(これも非常に重要な概念なので、また記事にします。)、インスタンスであれば、具体的なものを変数に渡すインスタンス変数。

オブジェクト指向の最大のメリットはこれですね。（ほかにもメリットはありますが。）

逆に使いまわしができないとどれくらいめんどくさいかっていうと、思い浮かべてほしいのが、ターミナルですね

あれって、全く使いまわしができないじゃないですか。100回前にかいたあの長い記述を呼び出したい時に、それをまた書かなきゃいけない。マジだるいですね

それを楽にしてくれるのがオブジェクト指向っていうものなんです。

なんとなくわかってくれましたかね？この記事を読んで、少しでもオブジェクト指向を分かってくれた人がいたらうれしいです！ありがとうございました！ここ間違っているよ！とかあったら、遠慮なくコメントしてくださいね！この記事では、プログラミングに関すること、技術系をメインに発信しています。Twitterフォローもお願いします！