OmniAICreator/Qiita-1.07M huggingface dataset:
Gitをちゃんと使う　1人pullリクエスト開発

# pullリクエストベースの開発をしてみたい
人様に見せるコード（開発履歴付き）として考えると、リポジトリのネットワーク図が横棒一本線でmainが伸び続けるというのも格好が悪い。
ちゃんと機能開発ごとに枝ワケして、mainに帰ってくる、マングローブみたいな開発をしたいなということで。

## pullリクエストと承認・マージ
軽くググってみてみると、以下のような手順が紹介されています。

1. 機能追加を行う対象とする、既存のリポジトリ（開発者アカウント配下のリポジトリ）をフォークする。
2. フォークして、自分アカウント管理配下にもってきたリポジトリに対して、開発用branchを作る
3. branch上で開発して、自分のリポジトリにpushする
4. 自分のリポジトリから、開発者に対してpullリクエストを発行する
5. 開発者が、開発者リポジトリからリクエストの内容を確認し、マージする

１人開発だと、フォークが必須となるというのがちょっと違和感があり。
（一応、prodとstgの２アカを用意してあるので、そのような運用も全然出来はするのだけど）

また、このリクエストと承認管理の履歴はどこに保存されてるんだ、、？というのが気になったこともありまして、調べてみました。

## Forkて必須なの？？
試しにForkせず、自分のアカウント配下のリポジトリでブランチを作ってみます。
すると、、

```
# まず、ローカルで開発用のブラントとして feature/test01 というものを作ります。
$ git branch -v
  feature/test01 001d752 First Commit for Test01
* main           7522207 Initial commit

$ git ls-files                
README.md

$ git checkout feature/test01 && git ls-files
Switched to branch 'feature/test01'
README.md
file_test01

# で、feature/test01をpushします。
$ git push origin feature/test01 
remote: Create a pull request for 'feature/test01' on GitHub by visiting:
remote:      https://github.com/XXX/test_pull_request/pull/new/feature/test01
 * [new branch]      feature/test01 -> feature/test01

```

で、Githubにログインすると、、
![github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587269/e8d1680c-efc5-4dab-458f-8a6b11b5bfb8.png)

pullリクエストできる状態に。
forkしないとpullリクエストできないというわけではないのですね。

## Forkすべきなの？
上記調べといてですが、結論としてはすべきですかね。

公開系のプロジェクトに対して、ローカルに落としてリモートにアップして、、というのをホイホイやってると上げちゃいけないファイルアップしちゃったり、動作確認してない状態のコード取り込んじゃったり、が少なからずでてくる気がします。
featureブランチ編集してるつもりでmain編集しちゃったりとか、、
そのリスクを考えると、きちんと別アカウントを使って、Forkしてpullリクエスト管理していくべきですね。

## pullリクエストの情報てどこに管理されるの？
.gitの中に保存されてたりするのかな、、とおもって軽く調べたのですが、見つけられず。
これはgithubのサーバ上のみで管理される情報なのかな、、？
もうちょっと調べてみたいところですが、現状アイデアがないので、また思いついたら考えます。

## マージのときの考え化
逆にマージをかけるときですが、これもこれで考慮が必要。。

### pypi展開と、setupファイルをどうする？
pypiは、versioを挙げないと展開できない。
現状、versionはsetup.pyにハードコードしている。
→コードの修正だけではなく、setup.py(場合によってはReadmeファイルも）の修正をしないといけない。

普通に考えると、pypi展開はレポジトリの管理者がマージするときにせっとで実施すべきものであり、コード修正をpullリクエストしてくる人が更新版のsetup.pyを作成・提案してくるのはおかしい。
となると、開発者レポジトリでdevelop用のブランチを作っておいて、pullリクエストはそこで受け付けて、pypi展開などは改めてdevelopブランチをmainブランチにマージするときに行う、、というように考えるべきか？？
あるいは、pypi展開はgitの管理と別に、管理者が適切だと思ったタイミングで手動で実施する（gitのコミット管理と必ずしも連動しない）とすべきか、、？

### ちゃんと考え方ありますね。。
https://www.atmarkit.co.jp/ait/articles/1708/01/news015.html

これ見て勉強します。。

# まとめ。
公開アカウントと別に開発用アカウント作って、フォークしてpullリクエスト出すようにしたいと思います。

で、ブランチの使い方は、ちゃんとA successful Git branching modelを読み込ませていただく、と。

ちなみにこっちの勉強のために既知バグフィックスに着手できず！！
。。。本末転倒感はあるけれど、まぁ最小にちゃんとやらんとまた我流の変なくせついちゃうし、仕方あるまい。。
LaravelでstripeのJavaScriptがbladeで動かない!! 原因はapp.jsとバッティングしていました。

##はじめに

駆け出しエンジニアです。現在、Laravel５．５でECサイトを作成しています。その際にstripeによる決済機能を追加しているときに苦戦したことを記録していきます。
少しでも皆様の参考になったらと思います。

##やろうとしていること
Laravel5.5ので作成しているECサイトにstripe決済を追加しようとしています。
そのさいに、bladeテンプレートにstripeのcheckoutをJavaScriptで読み込ませようとしています。

##どんな現象が起きたか

カートに入れた商品一覧を表示するviewにstripe決済のJavaScriptを導入するために下記コードを記載しました。

```html

@extends('layouts.app')

@section('content')
<h1>カート一覧ページ</h1>
@if (session('flash_message'))
<p style="color:red;">{{session('flash_message')}}</p>
@endif

@if (empty($user_carts))
<p>カートが空です</p>
@else

<table>
<tr>
<th>商品名</th>
<th>価格</th>
<th>購入数</th>
<th>この商品の合計金額(小計)</th>
<th>カートから削除するボタン</th>
</tr>
@foreach ($user_carts as $user_cart)

<tr>
<td>{{$user_cart['name']}}</td>
<td>{{$user_cart['price']}}円</td>
<td>{{$user_cart['item_count']}}</td>
<td>{{$user_cart['item_total']}}円</td>
<td><a href="{{route('cart.delete', ['id' => $user_cart['id']])}}">商品を削除する</a></td>

</tr>
@endforeach
</table>
<p>全商品の合計金額</p>
<p>{{$total}}円</p>
@endif

@if (empty($select_address))
<p>住所は選択されいません<p>

@else
<h2>選択されている住所</h2>
<table>
<tr>
<th>氏名</th>
<th>郵便コード</th>
<th>都道府県</th>
<th>市区町村</th>
<th>住所</th>
<th>電話番号</th>
</tr>
<tr>
<td>{{$select_address['name']}}</td>
<td>{{$select_address['postal_code']}}</td>
<td>{{$select_address['prefectures']}}</td>
<td>{{$select_address['municipality']}}</td>
<td>{{$select_address['address']}}</td>
<td>{{$select_address['phone_number']}}</td>
</tr>
</table>
@endif

@if (!empty($user_carts) && !empty($select_address) && $total > 50)
<p style="color:red;">合計金額{{$total}}円。下記ボタンを押すと購入することができます.</p>
<div class="content">
<form action="{{ route('cart.charge') }}" method="POST">
{{ csrf_field() }}
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="{{ env('STRIPE_KEY') }}"
data-amount="{{ $total }}"
data-name="Stripe Demo"
data-label="購入をする"
data-description="Online course about integrating Stripe"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency="JPY">
</script>
</form>
</div>
@else
<p>以下の条件に当てはまったら購入画面に進めません</p>

<p>カートに商品がない。住所が選択されてない。合計金額が50円以下</p>
@endif


<a href="{{route('index')}}">商品一覧ページ</a>
<a href="{{route('address.showSelectAddress')}}">住所選択ページ</a>
@endsection
```

その結果以下のような見た目になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/b202c2a8-c2a3-6836-8663-5f6f6e40d01c.png)

「決済をする」を押すと以下のようなエラーを吐き出します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/fb4c6cf6-6878-c89a-ea84-a61e068be2b0.png)

予定だと以下のような画面になってほしいのに、scriptの部分が動いていないことがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/bc520cf3-c632-96ae-0c8e-19a39aaac1e6.png)



##解決方法
以下の記事を参考にLaravelのデフォルトにある、app.jsとバッティングしている事がわかりました。
そのapp.jsを読み込んでいるのが、layout/app.blade.phpで読み込まれているのがわかりました。

そのため、viewでlayoutを読み込んでいる以下3行を削除しました。

```html
@extends('layouts.app')

@section('content')

//省略

@endsection

```

無事動きました。めでたしめでたし

[参考にした神記事](https://nebikatsu.com/7232.html/)
【はじめてのFlask】会員制の掲示板を作ってみる。

##概要
クジラ飛行机さんの [PythonではじめるWebサービス＆スマホアプリの書きかた・作りかた](https://www.amazon.co.jp/dp/4802612516/ref=cm_sw_r_tw_dp_YXGFDM0B5B31PWK248FC) を読んで、Flaskっていいな、Webサービスっていいなってなったので、せっかくなので自分でも試行錯誤しながら会員制の掲示板を作ってみることにした。
タイトル【はじめてのFlask】って書いてますが、Webサービス開発自体初めてです。

##ファイルの構成
~~~
my_bbs/
　├ app.py
　└ templates/
　 　├ index.html
　 　└ login.html
~~~

##とりあえずURLルーティング
メインのapp.pyにURLルーティングの部分だけ書いてみる。
これでhtmlファイルを２つ作ってから、`python app.py` してブラウザからそれぞれのURLにアクセスしてURLがちゃんと回るかを確認する。

~~~
from flask import Flask, render_template, url_for, redirect

app = Flask(__name__)

@app.route('/login')
def login():
	return render_template('login.html')

@app.route('/try_login')
def try_login():
	return redirect(url_for('index'))

@app.route('/')
def index():
	return render_template('index.html')

@app.route('/write')
def write():
	return redirect(url_for('index'))

@app.route('/logout')
def logout():
	return redirect(url_for('login'))


if __name__ == "__main__":
	app.run(debug=True, host='127.0.0.1')
~~~

index.htmlは

~~~
<!DOCTYPE html>
<html>
<head>
	<title>
		会員制の掲示板
	</title>
</head>
<body>
	会員制の掲示板 <br>
	テストページ
</body>
</html>
~~~

login.htmlは

~~~
<!DOCTYPE html>
<html>
<head>
	<title>会員制の掲示板のログインページ</title>
</head>
<body>
	ログインページ
</body>
</html>
~~~

ほんとにガワだけって感じでひとまずOK。

Gitでバージョン管理も始める。

~~~
$git init 
$git add *
$git commit -m 'first commit'
$git push origin master
~~~

## ToDo

ひとまずURLは回ったので、次は`/` と `/write` の中身を書いていく。
java  オブジェクト指向についての備忘録

###オブジェクト指向型プログラミングとは　

＝　現実世界を真似て登場人物の単位でプログラムをクラス単位で分割すること




####オブジェクト型プログラミングの全体的なイメージ



　　　　生成　⇦　　⇦　　　　　　神様　　　　　　→　　　→　命令
　　　　⇩　　　　　　　（mainメソッドを含むクラス）　　　　　　↓
　
・型（クラス）を元に　　　　　　　　                   ・操作の呼び出し
　インスタンスを生成　　　　　　　　　・該当インスタンスの属性の書き換え






####インスタンス生成のイメージ

　　　　　　　　   勇者Aの生成をしなさい。
　　       神様　　　　→　　→　　→      勇者A　　　　
           勇者の型（クラス） 　⇨　　⇨　　  ⇧　　　　　　　　　　　　　
           属性(・HP・名前)　　　　
           操作(・攻撃　etc）
常用のLinuxコマンドラインをまとめ

### ファイル管理

- ```$ ls -al``` 隠されたファイルを含めフォーマットに表示
- ```$ mkdir YOURDIR``` ディレクトリを作成
- ```$ touch YOURFILE``` ファイルを作成または更新
- ```$ cp YOURFILE1 YOURFILE2```ファイル名を更新またはコピー
- ```$ cp YOURFILE1 YOURFILE2```ファイル名を更新またはコピー
- ```$ mv YOURFILE1 YOURFILE2```ファイル名を更新または移動
- ```$ cp -r YOURDIR1 YOURDIR2```ディレクトリ及びディレクトリ配下ファイルをコピー
- ```$ rm YOURFILE```ファイルを削除
- ```$ rm -rf YOURDIR```ディレクトリ及びディレクトリ配下ファイルを削除
- ```$ scp -r USERNAME@HOSTIP:~/REMOTEDIR　LOCALDIR```リモートのディレクトリからディレクトリ及びディレクトリ配下ファイルをコピー

### プロセス管理
- ```$ ps``` 現在実行しているプロセスを検閲
- ```CTRL+Z``` 現在実行しているプロセスを一時停止
- ```$ bg```一時停止するプロセスを検閲
- ```$ jobs``` アクティブなジョブをリスト表示
- ```$ fg　JOBID```動作中のバックグラウンドジョブをフォアグラウンドで実行
- ```$ kill PID```プロセスを中止


### ファイルと内容検索
- ```$ grep YOURKETWORD YOURFILE``` ファイルに内容検索
- ```$ grep -r YOURKETWORD YOURDIR```ディレクトリ配下ファイルに内容検索
- ```$ find YOURDIR -name "YOURSEARCHNAME"```ディレクトリ配下ファイルをファイル名またはディレクトリ名で検索
- ```$find YOURDIR -name "*.EXNAME"```ディレクトリ配下ファイルをファイル名で拡張子で検索、```*```は.EXNAME以外未指定でも検索できる

###　ファイル権限管理
- ```$ chomd XXX FILENAME``` 権限対象はOWNER(第一位),GROUP（第二位）とWORLD（第三位）三種類、権限はREAD(4),WRITE(2),EXECUTE(1)三種類.例えば、```$ chomd 761 readme.txt```は「OWNERの権限はREAD＋WRITE＋EXECUTE=7,GROUPの権限はREAD+WRITE=6,WORLDの権限はEXECUTE=1」と言う意味です。ps：chomdは他の権限表示方法もある。

### その他
- ```nvidia-smi``` nvidia CPU 状態を検閲
- ```find . -FILENAME '.*.???' -type f -print -exec rm -rf {} \;```隠すファイルを全部削除
- ```ifcofig``` ipアドレースを検閲
- ```echo CMDLINE > FILE```CMDLINEはFILEに書く
- ```sh SHELL.sh```SHELL.shを実行
Spigot RCON

server.propertiesにひっそりとあるrconの設定欄
なんだこれと思っていたが調べてみると外部からサーバーコンソールにアクセスできるらしい
情報が少なすぎるが面白そうなので作ってみた

#通信方法
出力ストリームにパケットを送ればいいようだ

パケットの種類は4つ

・認証リクエスト
・認証レスポンス
・コマンド実行リクエスト
・コマンド実行レスポンス

#注意

気を付けるべきはパケット内のintがリトルエンディアンであること
送受信の際に上手く変換する必要がある

コマンドの文字列はASCIIなので日本語には対応していない
チャット欄に日本語を打ちたい場合はrconを使わずプラグインで
処理できるようにするのがいいだろう

コマンドの実行結果が長い場合パケットが分割されて帰ってくるようだ

分割されているか確認する手段がないので実行リクエストの際に
空の実行リクエストも追従するように送ることで空のレスポンスが
返ってくるまでがコマンド実行結果のレスポンスだと判別できる
Windows USキーボードでMac風（Alt + Space）の日本語と英数の入力切り替え

こんにちは．
Sadmachineです．
WindowsのUSキーボード使用環境でMacみたいな日本語と英数の切り替えを行えるようにしていきます．
Windowsをクリーンインストールしたついでにサクッとまとめます．

## 目次
<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->
<!-- code_chunk_output -->
- [AutoHotKeyのインストールと設定](#AutoHotKeyのインストールと設定)
  - [AutoHotKeyのインストール](#AutoHotKeyのインストール)
  - [AutoHotKeyの設定](#AutoHotKeyの設定)
- [起動時にAutoHotKeyを起動させる](#起動時にAutoHotKeyを起動させる)
- [まとめ](# まとめ)

<!-- /code_chunk_output -->

## AutoHotKeyのインストールと設定
この項ではAlt + Spaceで日本語と英数の切り替えを行えるようにします．

### AutoHotKeyのインストール
以下のURLからAutoHotKeyをダウンロードします．
https://autohotkey.com/download/
”Download AutoHotkey Installer” を押せばインストーラーがダウンロードされます．
.exeファイルを実行 → Express Installationを押す → Installation completeが表示されたらインストールの完了です．

### AutoHotKeyの設定
#### １．AutoHotKeyのスプリクトを新規作成
好きなディレクトリで 右クリック → 新規作成 → AutoHotKey Scriptを押す．
新規スクリプトの名前は適当に altspace.ahk とでもしておきましょう．
（以下，altspace.ahkという名前に設定したとして進めていきます）

#### ２．AutoHotKeyのスプリクトを編集
altspace.ahkを右クリックしてEdit Scriptを選択するとメモ帳などで以下のような文言が書かれたスクリプトが開かれます．

```altspace.ahk（書き換え前）
#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.

```

altspace.ahkのスクリプトの中身を全て消して以下の内容に書き換えます．



```altspace.ahk（書き換え後）
!Space::Send, {vkF3sc029}
```

書き換えたら保存．
altspace.ahkを右クリックして「ショートカットの作成」を押し，ショートカットを作成します．
デフォルトでは ”altspace.ahk - ショートカット” とかになっているはず．
このショートカットは次項「起動時にAutoHotKeyを起動させる」で使用するものです．

## 起動時にAutoHotKeyを起動させる

”altspace.ahk - ショートカット”を以下の場所に移動させます．

```
C:\Users\ユーザー名\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup
```

日本語での表記は以下のようになっています．

```
C:\Users\ユーザー名\AppData\Roaming\Microsoft\Windows\スタートメニュー\プログラム\スタートアップ
```

移動させ終えたら，”再起動”をしてAlt + Spaceで日本語と英数の入力切り替えができるか確認してください．

※AppDataは隠しフォルダになっている可能性があるため，見当らなかった場合は隠しフォルダ・ファイルを表示できるようにしましょう．

# まとめ
Windows USキーボードでもMac風（Alt + Space）の日本語と英数の入力切り替え方法を紹介しました．
備忘録的なまとめですが，誰かの参考になれば嬉しいです．
少しでも参考になりましたらLGTMやフォロー，Twitterでの拡散をしていただければ幸いです．

### 参考サイト
https://www.sirochro.com/note/win-japanese-input-alt-space/
deviceを入れているときに、rails db:migrateできなくて詰まった話

今回起こったことを話すと、railsにいれていたgemであるdeviceを使ってログイン機能を実装しようと思ったら、rails db:migrateできなくなってしまいました

#解決策

##1つ目

```
docker-compose run --rm web rails d devise User
```

を実行してから、

```
docker-compose run web rails d devise:views
```

を打ち込んで実行して、

```
docker-compose run --rm web rails g controller Pages index show
```

を実行、ただし、このときにcontrollerを作成していなければ、この限りではない
この工程をスキップした場合は、これは行わなくていい

```
docker-compose run --rm web rails d devise:uninstall
```

を実行して、deviceをアンイストールした後に、`gemfile`の、

```
gem 'device'
```
を削除

そして、
#完了

ってなるはずだったんですけど、ここで致命的なミスをやらかしてました。
それは何かって言うと、最初の工程である、

```
docker-compose run --rm web rails d devise User
```
これをしないで、完了したぜイェイとか思ってたんですけどこれが間違いでしたね、、、

これをしないで、deviceを再インストールしたら、

```db/migrate/20210221123320_add_devise_to_users.rb
# frozen_string_literal: true

class AddDeviseToUsers < ActiveRecord::Migration[6.0]
  def self.up
    change_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

#省略
```

五行目の

```
def self.up
    change_table :users do |t|
```

`change_table`になってるのでこれは間違いですね。

```
def self.up
    create_table :users do |t|
```

になおして

```
docker-compose run web rails db:migrate
```

をしたら無事migrationできました。

ふぅ

#参考記事
https://teratail.com/questions/214948

https://qiita.com/cigalecigales/items/16ce0a9a7e79b9c3974e

ご指摘などありましたらコメント欄によろしくお願いします。
【ExcelVBA】GoogleChromeにて特定サイトへ定期的にアクセス確認し、アクセス不可時にエラーメールを自動送信する方法

##はじめに

ExcelVBAを使用し、
GoogleChromeにて特定サイトへ定期的にアクセス確認し、アクセス不可時にエラーメールを自動送信する方法

を備忘メモに残す。

運用保守にて役立つシチュエーションが想定できる。
例えば、ある特定のサイトにアクセス不安定状態なインシデント発生直後、解決したとしても、
エンドユーザからは、いつ再発するか分からないので適宜監視するように求められることもある。

そういったとき、担当者にて手動でそのサイトに1分に1回ペースでアクセス確認するような対処でも良いが、自動化しておく方がよいだろう。

※実際以前にこういったインシデントが発生した。この仕組みをすぐに作れれば良かったのだが・・・

ということで、休日割いて勉強したので記録しておく、


##大まかな流れ
<事前準備>
１：ExcelVBAにてGoogleChromeへアクセス出来るように準備
２：ExcelVBAにてOutlookでメール送信できるように準備
<スクリプト準備/設定>
３：「GoogleChromeにて特定サイトへアクセス確認しアクセス不可時のエラーメールを自動送信」内容をVBE内に書く
４：タスクスケジューラの設定（Windows）

##１：ExcelVBAにてGoogleChromeへアクセス出来るように準備
今回はよく使用されているブラウザ「GoogleChrome」にて設定する

ExcelVBAでGoogleChromeを使用するには設定が必要だが、設定方法は過去の記事を参照のほど。
https://qiita.com/oyamasan_tec/items/462769494ed4c7ebad9a


##２：ExcelVBAにてOutlookでメール送信できるように準備
今回はよく使用されているブラウザ「Outlook」にて設定する

ExcelVBAでOutlookを使用するには設定が必要だが、設定方法は過去の記事を参照のほど。
https://qiita.com/oyamasan_tec/items/462769494ed4c7ebad9a


##３：「GoogleChromeにて特定サイトへアクセス確認しアクセス不可時のエラーメール自動送信」内容をVBE内に書く


Excel新規で開き、以下をコピペし、保存して閉じておく

```
'Auto_Open()を使用することでExcelブックを起動直後にVBA自動実行
Sub Auto_Open()

    'ここではブラウザオブジェクトを生成
    Dim Driver As New Selenium.WebDriver
    Dim title As String
    
    Driver.Start "chrome" '←クロームを起動
    On Error Resume Next '←下記URLに接続不可の場合でも処理を実行
    Driver.Get "https://hogehogehogehogehogehoge.co.jp/" '←今回は敢えて存在しないURLを指定
    title = Driver.title '←そのURL先のタイトルを取得
    
    'URL先のタイトルが一致しているか判定
    '一致しない場合はエラーメール送信プロシージャの呼び出し
    If title = "Yahoo! JAPAN" Then
        Driver.Close
    Else
        outlook_mailsend
        Driver.Close
    End If

    Application.Quit
End Sub

'エラーメール送信プロシージャ
Sub outlook_mailsend()

    'Outlookオブジェクト生成
    Dim objOutlook As Outlook.Application
    Dim objMail As Outlook.MailItem
    Set objOutlook = New Outlook.Application
    Set objMail = objOutlook.CreateItem(olMailItem)

    '各種設定
    With objMail
        .To = "xxx@xxx.com" 'メール宛先
        .Subject = "エラーメール" 'メール件名
        .Body = "エラー" & vbCr & "です。" 'メール本文
        .BodyFormat = olFormatPlain 'メールの形式
        .Send
    End With
End Sub
```


##４：タスクスケジューラの設定（Windows）
Windows環境を使用している運用保守ならば、タスクスケジューラ設定をご存じだと思うので割愛。
上記スクリプトが記載された「xxxxxx.xlsm」をタスクスケジューラにて自動実行するように設定する。

例えば、1分毎に「xxxxxx.xlsm」を自動実行するように設定した場合、
1分毎に特定のサイトにアクセスし、正常にアクセス出来なかった場合は運用保守担当宛、またはお客様宛にメールをするように自動化できるだろう。
もちろん正常にアクセス出来た場合は、何も起こらない。

##補足1
なお今回はブラウザ「Chrome」、メーラ「Outlook」を指定したが、
おそらく「IE」や「Thunderbird」だけでなく、Webメール「gmail」でも可能そう。

##補足2
今回のように、
ブックを開いたときに自動実行される「Sub Auto_Open()」と
処理終了後に自動でブックを閉じる「Application.Quit」を設定していると、
今後、本VBAを編集しようとしても、開けば勝手に閉じられるように組んでしまっているので、
さて、困ったことになる。

その時の対処方法を下記にて記載する。

１：他のExcelブックを開く
２：そのブックで下記コードを記載し、実行

```
Sub Sample()
Application.EnableEvents = False
Workbooks.Open Filename:="C:\Users\【上記スクリプトが記載されたxlsmファイル】"
Application.EnableEvents = True
End Sub
```

これで救済
初学者がDocker composeでPostgreSQLとpdAdmin4の環境を構築する

# 概要
初学者がDocker composeを使って、PostgreSQLとpgAdmin4の環境を構築しました。とりあえず作成した環境なので、ボリュームのマウントなどは行っていません。

※Dockerのインストール等は既に完了しています。

# docker-compose.ymlを作成
docker-compose.yml

```
version: '3'

services:
  db:
    image: postgres
    container_name: pg-docker
    ports:
      -  '5432:5432'
    environment:
        - 'POSTGRES_USER=postgres'
        - 'POSTGRES_PASSWORD=postgres'
        - 'POSTGRES_DB=pg_db'

  pgadmin4:
    image: dpage/pgadmin4
    container_name: pgadmin4
    ports:
      - '80:80'
    environment:
      - 'PGADMIN_DEFAULT_EMAIL=xxx@yyy.com'
      - 'PGADMIN_DEFAULT_PASSWORD=pga4_pw'
```


# docker-compose.ymlを実行
デタッチモード: -dでdocker-composeを実行します。docker-compose upでbuildとrunが同時にできるので便利です。

```
$ docker-compose.yml up -d
```

# コンテナの状態を確認
StateがUpになっていることを確認します。

```
$ docker-compose ps
  Name                Command              State              Ports
------------------------------------------------------------------------------
postgres   docker-entrypoint.sh postgres   Up      0.0.0.0:5432->5432/tcp
pgadmin4   /entrypoint.sh                  Up      443/tcp, 0.0.0.0:80->80/tcp
```

# 自分のIPアドレスを確認
色々な方法があると思いますが、とりあえず私はシステム環境設定からネットワークを開き、IPアドレスを確認しました。



# ブラウザからpdAdmin4にアクセス
ブラウザを開き、IPアドレス:80にアクセスします(80番ポートは、docker-compose.ymlで設定)。タイプミスなどが無ければ、pdAdmin4のトップページが表示されると思います。

![スクリーンショット 2021-02-21 21.14.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689015/65cb7bcf-6760-731e-867f-abb4d15c80e3.png)

ログインの情報はdocker-compose.ymlのpgadmin4のenvironmentに記述した内容を入力します。

# サーバー（postgre)に接続
ログインが完了したら、右側のメニューからServersを右クリックし、Createにマウスポインターを合わせ、Server...を選択します。
![スクリーンショット 2021-02-21 21.36.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689015/56714b48-a483-1576-cb68-88f8ac14b8bc.png)


Create-Serverウィンドウが表示されるので、GeneralタブのNameにpd-dockerと入力します。一応、docker-compose.ymlで記述したcontainer-nameと合わせていますが、必要ないかもしれません。
![スクリーンショット 2021-02-21 21.38.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689015/2c1aa871-9136-b960-2bf6-ba94be14b9cb.png)

Connectionタブをクリックし、HostはPCのIPアドレス、Portは5432を入力します。Maintenance databaseとUsernameとPasswordは、docker-compose.ymlのenvironmentで設定した値を入力します。
![スクリーンショット 2021-02-21 21.43.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689015/7f5109a2-9bf9-e8e9-58ef-a2ae372a4f36.png)

Saveボタンをクリックし、問題がなければ接続が完了します。
![スクリーンショット 2021-02-21 21.46.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689015/c5b2623f-b65a-80ca-0084-091b730d4276.png)

# 注意点
冒頭にも書きましたが、ボリュームをマウントしていないのでコンテナがUpでなくなると(消すと?)、データベースも消えてしまうので運用する際は注意が必要です。
SOLID原則のLSPまとめ

# LSPとは
LSP（Liskov Substitution Principle：リスコフの置換原則）とは、
***「基底クラスとその派生クラスは常に置き換え可能でなければならない」***
というルール

「基底クラスとその派生クラスが置き換え可能」な状態とは、基底クラスで定義されていることが派生クラスでも同様に定義されていること。
より具体的に言うと、例えば基底クラスにメソッドが定義されていれば、派生クラスでも同じだけ引数をとり、同じ型の返り値を返すメソッドがなければいけないということ。

すなわち、基底クラスと派生クラスの振る舞いを共通にして、利用者が基底クラスと派生クラスの違いを意識しなくても良いようにしましょうという考え方。

# 具体例
LSPに則り、「乗り物」クラスを考えると次のようになる。

```python
from abc import ABCMeta  
from abc import abstractmethod  

# 乗り物クラス（基底クラス）
class vehicle(metaclass = ABCMeta):
    @abstractmethod
    def print_speed(self):
        pass

# 自動車クラス（派生クラス）
class car(vehicle):
   def print_speed(self):
      print("60km/h")

# 自転車クラス（派生クラス）
class bicycle(vehicle):
   def print_speed(self):
      print("10km/h")

```

# LSPとOCPの関係
LSPを遵守して得られるコードとOCPを遵守して得られるコードは本質的に同一であり、それぞれの原則は異なる視点からそのコードを言い表したと考えることができる。
つまり、このような形の設計をすることで、機能追加や修正が容易（OCPの利点）で利用者が中身を意識しなくても使用できる（LSPの利点）クラスがつくられる。
Swiftで曜日を全て表示


# 課題
Swiftで曜日を表示する + 表示形式はLocaleに従うようにするコードを書きたかった。

# 結果

```swift
protocol WeekDaySymbolsDrawable {
    var locale: Locale { get }
    var weekDaySymbols: [String] {get}
}


struct WeekDayDrawer: WeekDaySymbolsDrawable {
    var locale: Locale
    
    var weekDaySymbols:[String] {
        var calendar = Calendar.current
        calendar.locale = locale
        return calendar.shortWeekdaySymbols
    }
}
```

`DateFormatter`などでやろうとしたが普通に`calendar.shortWeekdaySymbols`があった！

localeはアプリでの利用なら勝手に設定されそう？

## 利用例: 日本語

```swift
WeekDayDrawer(locale: Locale(identifier: "ja_JP")).weekDaySymbols
    .forEach{print($0)}
```

```swift:結果
日
月
火
水
木
金
土
```

## 利用例: 英語

```swift

WeekDayDrawer(locale: Locale(identifier: "en_US")).weekDaySymbols
    .forEach{print($0)}
```

```swift:結果
Sun
Mon
Tue
Wed
Thu
Fri
Sat
```

## 利用例: フランス語
```swift
WeekDayDrawer(locale: Locale(identifier: "fr_FR")).weekDaySymbols
    .forEach{print($0)}
```

```swift:結果
dim.
lun.
mar.
mer.
jeu.
ven.
sam.
```
rxjsのwebsocketを用いた自動再接続

# 事のきっかけ
websocketを接続しているときに、10分間タイムアウトのせいで切断してしまうことがあった。
この現象では、フロントエンド側で再接続して貰わないといけないが、なんとか自動で再接続したいと思った。
いろいろ調べたが、上手い方法を見つけれずに苦労したので、メモとしてQiitaに残しておきたいと思った次第。

# よくヒットするノイズ記事

- RxJSのRetry()を使用することでエラーをハンドリングして自動再接続を行う

=> 参照しているサイトでもwebsocket.retry()のretryが通常のretryと異なるため呼び出せないというコメントがあったので、参照先を探すのに苦労した
=> また、エラーのハンドリングは、接続に失敗したときに機能する。今回のタイムアウトの際は、Subscriberはcompleteで正常終了してしまう為、意味がない。

# 対策
## 事前のお断り
下記に示す対策を実践されたとしても責任は一切持てないため、各自で動作確認(メモリリークとか)をお願いします。

## 動作環境

フロントエンドフレームワーク : AngularJS
WebSocket: RxJS

※WebSocketに関係する箇所のみ取り出しています。

```typescript:sample-websocket.ts
import { OnInit } from "@angular/core";
import { webSocket } from "rxjs/webSocket";
import { repeat, takeUntil } from "rxjs/operators";
import { Subject } from "rxjs";
import "rxjs-compat/add/operator/retry"
// import { retry } from "rxjs/operators"; <= こっちでは無い


export class WebsocketComponent implements OnInit {

unsubscribe = new Subject<any>();
socket = webSocket('wss://hogehoge.com').pipe(takeUntil(this.unsubscribe), repeat());

ngOnInit(): void {
  this.socket.retry().subscribe(
    mess => console.log(mess),
    error => console.log(error),
    complete => console.log('complete')
 );
}

}

```
PCあるある　Wi-FiがスマホにはつながるけどPCには繋がらん時の対処法


たまーに起こる現象。

それが、スマホには繋がるけどPCがWi-Fiに繋がらないやーつ。

私も新しいPCを買ったので

さっそくセットアップしていったのだが

何故か、繋がらない。

そんな時の対処法を見ていきます。

# １　とりあえず再起動をする
PCやルーター、端末の再起動をする。

もし古いルーターを使っている人は

新しいやつを買ったほうがいいです。

ルーターも消耗品ですからね。
長く使っていると、接続が悪くなります。

新しいやつを買うなら　Wi-Fi６対応のルーターにしましょう。


#２　機内モードになっていないかをチェックする

地味に機内モードになっていることもあるのよね。


# ３　省電力モードになっていないかをチェックする
電池がない場合だと、省電力モードになって

Wi-Fiに繋がらないこともあります。

#４　セキュリティソフトをOFFにする
Windowsなら、　標準でセキュリティソフトが入っているので

他社のソフトは必要ありません。

むしろ、他社のソフトのせいで、エラーが起こることが

多いので、　他のソフトはOFFにするか削除しましょう。

私のPCにも、デフォルトでマカフィーが入っていたけど
まじでいらんからね。　　


#５　OSやドライバーを　アップデートする

OSのアップデートは忘れずにやりましょう。　

#６　ネットワークのリセットをする
これが一番有効だと思うね。

Windowsの設定から、ネットワークとインターネットがあるので

そこからリセットにすることができます。

ドライバーのエラーの場合は、　これで治ることが多い。

私もこれで治った。



#７　Wi-Fiの電波を確認する。
ルーターから離れていると、電波が届かないので

その場合は、　メッシュWi-Fiや　中継機を買ったほうがいいでしょう。


中継機なら数千円で買えますからね。


#８　それでもだめなら　初期状態に戻す。
これは最終手段なので、　なんか色々エラーが出ていたりして

どうしようもないときは、　初期化をします。

もしくは、復元。








ＰＳ

unityの寺子屋ユニコーンというサイトもやってるよーーー
インターネットラジオを録音する。

# インターネットラジオを録音する
 初投稿です。。
 好きな歌手や、DJの方のインターネットラジオ(ラジコ、tunein等)を録音したい、
 その際のあれやこれやと四苦八苦した時のメモです。（この方法がベストかは分からず。。）

## .m3u8 マニフェスト ファイルのURLを確認
　インターネットで録音したいサイトのマニフェストファイルを確認します。
## シェルの作成
###録音開始用
```bash:recording_IPradio.sh 
   #!/usr/bin/bash

   M3U8URL=${1}  // m3u8ファイルのへのurlパス
   OUTFILE=${2}　// 出力したいmp3ファイル名

　 ffmpeg -y -i ${M3U8URL} -write_xing 0 /mnt/${OUTFILE}.mp3 & 
```
###  録音終了用
```bash:recording_IPradio_kill.sh
   #!/usr/bin/bash

   kill -9 `ps -ef | grep /recording_IPradio.sh | grep -v grep | awk '{ print $2 }'`  // 録音用シェルをkillする
   kill -9 `ps -ef | grep ffmpeg | grep -v grep | grep -v bash | awk '{ print $2 }'`　// ffmpegをkillする
```

## cronへの登録 (12:00～13:00で録音する場合)
遅延を考慮して、開始終了時刻を調整します。

```bash:cron設定
59 11 * * * bash -l /home/pi/recording_IPradio.sh "m3u8のurlパス" "mp3ファイル名" > /dev/null
01 13 * * * bash -l /home/pi/recording_IPradio_kill.sh > /dev/null
```
　cronの開始～終了時間中は指定したmp3ファイルに音声が出力され続けます。
　今のところ、このやり方でうまく録音できています。
Portable App化ソフト (ThinApp、Turbo Studio)

## VMware Thinapp

情報が一番多い気がする。

* [Windows XP での Internet Explorer 6 のキャプチャ](https://docs.vmware.com/jp/VMware-ThinApp/5.2/com.vmware.thinapp.user.doc/GUID-F4FE34BC-8435-4359-8A85-ABAED4249DFB.html)
* Windows XP に対応しているのは`ThinApp 5.2.3`まで。
* [アプリ仮想化奉行"](https://slapjacks56.rssing.com/chan-25918537/index-latest.php) のページが熱心に検証されている様子。

値段が高い


## spoon

* [双日システムズ、米Code Systemsのアプリケーション仮想化ソフト「Spoon」の取り扱いを開始 – びぎねっとITニュース](https://begi.net/news/archives/5928.html)

このspoonは`Turbo.net`の昔の製品っぽい。[参考](https://alternativeto.net/software/spoon-studio/about/)
ThinAppと比べて安価


## Turbo Studio

* [公式HP](https://go.turbo.net/studio)
* [Document](https://app.turbo.net/docs/studio)

活発に更新されている。
無料枠もある。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/d4fef236-cf36-310a-73ce-bdf13f39df31.png)

* XP に対応しているのは`Turbo Studio 19`まで。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/160a48e1-8510-f980-c5a6-cb3bf3c9b486.png)
Retinaディスプレイ上でのPyAutoGUIで使う座標に関して

PyAutoGUIで座標指定してスクショ取るとき、下記のように書くことができます

```
sc = pyautogui.screenshot(region=(100, 200, 300, 400))
```

# 問題

その際、「cmd」+「shift」＋「4」で座標を図ることができるのですが、きちんと測ってもかなりずれてしまう

# 原因

Retinaディスプレイの画面出力のピクセル数が、通常ディスプレイの2倍あることが問題らしい

# 解決策

座標も2倍すれば良い

上のコードで言うと

```
sc = pyautogui.screenshot(region=(200, 400, 300, 400))
```

とすれば本来取りたかった位置でスクショ取る事ができた
[php]改行コードを統一する

複数の改行コードが混ざって出力されてしまったファイルの改行コードを統一して出力し直すサンプルコードです。

## 環境
* OS: Amazon Linux2
* PHP: 7.4.14

## プログラム本体
今回は、複数の改行コードが混ざって出力されたtsvファイルの改行コードをLFに統一することに加え、CSVファイルとして出力する、という内容になっています。

```php:tsvToCsv.php
<?php
$tsvfile = 'data.tsv';
$csvfile = 'data.csv';

if(file_exists('data.tsv')){
    // 読み込みモードでファイルを開く
    $handle = fopen($tsvfile, 'r');
    $contents = fread($handle, filesize($tsvfile));
    // 改行コードがCRLFもしくはCRの場合に、LFに置換
    // $str = preg_replace('/\t/', ',', preg_replace(['/\r\n/', '/\r/'], "\n", $contents));
    $str = preg_replace('/\t/', ',', preg_replace('/\r\n?/', "\n", $contents));
    // 書き出しモードでファイルを開く（複数回実施の場合は上書きになる）
    $fp = fopen($csvfile, 'w');
    fwrite($fp, $str);
    fclose($fp);
}else{
    echo 'tsvfile is not existed!';
}
```

## ポイント
### (1) [preg_replace](https://www.php.net/manual/ja/function.preg-replace.php)
正規表現検索および置換を行います。
置換元の文字列が複数種類存在する場合は、第1引数に、配列として格納します。
~~注意点として、配列の前のほうから検索を行うため、CRLF(\r\n）よりも、CR（\r）を前に置いてしまうと、CRLFのCRの部分のみ置換されてしまいます。
必ずCRLF(\r\n）を配列の前の方に格納するようにしましょう。~~
@il9437 さんのご指摘をもとに、置換元を文字列での記載に変更しました。
「?」を使うことで、0回もしくは1回マッチしたものを対象とすることができます。

## 結果確認
### 元ファイルの改行コード
まず、元ファイルであるdata.tsvの内容を確認します。
catコマンドに-Aオプションをつけることで、不可視文字（改行コード、タブ、スペースなど）を確認することができます。

```
$ cat -A data.tsv
aaa^IAaa^IAAa^IAAA$
bbb^IBbb^IBBb^IBBB^Mccc^ICcc^ICCc^ICCC^M$
```
登場する不可視文字は以下の通り。

|表示|意味|備考|
|---|---|---|
|^I|タブ|-|
|$|LF|主にUnix系OS全般、Mac OS Xで使用される改行コード|
|^M$|CRLF|主にWindows系OSで使用される改行コード|
|^M|CR|主に古いMac OS（9以前）で使用されていた改行コード|

### 出力ファイルの改行コード
続いて、出力されたdata.csvの改行コードも確認しておきましょう。

```
$ cat -A data.csv
aaa,Aaa,AAa,AAA$
bbb,Bbb,BBb,BBB$
ccc,Ccc,CCc,CCC$
```
不可視文字は「$（LF）」のみになっていますね。うまくいきました！
※TSV→CSVとして出力しているため、「^I（タブ）」だった箇所はカンマ「,」になっています。

## オマケ
以下、元となるTSVファイルの出力プログラム。

```php:tsvOutput.php
<?php
$tsvfile = 'data.tsv';
$array = [
    ['aaa', 'Aaa', 'AAa', 'AAA' . "\n"],
    ['bbb', 'Bbb', 'BBb', 'BBB' . "\r"],
    ['ccc', 'Ccc', 'CCc', 'CCC' . "\r\n"]
];

// 追記モードでファイルを開く
$fp = fopen($tsvfile, 'a');
foreach($array as $vals){
    for($i = 0; $i < count($vals); $i++){
        if($i < count($vals) - 1){
            fwrite($fp, $vals[$i]."\t");
        }else{
            fwrite($fp, $vals[$i]);
        }
    }
}
fclose($fp);
```

## 終わりに
改行コードとか、正規表現とか難しい・・。

## 参考
### プログラム本体
* [PHP の正規表現 | Web Design Leaves](https://www.webdesignleaves.com/pr/php/php_basic_03.php)
* [fopen | phpマニュアル](https://www.php.net/manual/ja/function.fopen)
* [fread | phpマニュアル](https://www.php.net/manual/ja/function.fread.php)
* [fwrite | phpマニュアル](https://www.php.net/manual/ja/function.fwrite.php)
* [fclose | phpマニュアル](https://www.php.net/manual/ja/function.fclose)

### 結果確認
* [macとlinuxのcatで不可視文字の確認 | アメリエフの技術ブログ](https://staffblog.amelieff.jp/entry/2020/04/22/130000)
* [改行の、\nと\r\nの違いは何ですか？ | stack overflow](https://ja.stackoverflow.com/questions/12897/%E6%94%B9%E8%A1%8C%E3%81%AE-n%E3%81%A8-r-n%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B)

### オマケ
* [count | phpマニュアル](https://www.php.net/manual/ja/function.count.php)
【Workato】Concurrencyの設定

#レシピのConcurrency設定
レシピのSettingsタブに行くと、Concurrencyという設定項目がある。

※この項目が出ない場合、要問い合わせ

![スクリーンショット 2021-02-21 13.44.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/947273/11bf5f5b-4ec0-53e9-c67b-b6b36dcf9e6f.png)

Concurrencyは並列処理可能なジョブ数の設定である。（最大5、デフォルト1）

本来、レシピはトリガーイベントが複数発生したら、一件ずつかつ発生した順番に処理していくが、Concurrencyの数値を引き上げることで複数のトリガーイベントを同時に処理できるようになる。

![スクリーンショット 2021-02-21 13.53.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/947273/9fdc5f9e-4765-5603-9277-44fa06db51e6.png)

![スクリーンショット 2021-02-21 13.53.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/947273/32e7d15a-c3d4-e8bc-a3dd-a3f5373a73f1.png)

処理されるデータの順序性を担保しなくてもいいケースでは、最大5倍のスループットを実現できる。
画面のスクロール

#要素をスクロールしたい時
ビューを作っているときに、中身のボリュームが増えると、画面からはみ出してしまうのではと不安になった時は

```css
.rooms {
  overflow: scroll;
}
```
今回は例としてルームという要素に対して
overflow: scroll;
を使用しています。
これによって
ルームが100個とかになっても画面をスクロールすることで問題なく表示することができるようになります。
jQuery 導入〜HTML要素取得とfadeOutメソッド実行まで

最近jQueryを学び始めました。
これから始めようと思ってる人や、同じく学び始めた人、jQueryってなんぞや？って人のために残しておきたいと思います。

# 1.jQueryとは
javascriptでできることを、より簡単な記法で出来るライブラリのことです。

最大の特徴はブラウザを意識しなくて済むことです。
`Chrome`や`Firefox`、`Safari`など、ブラウザで対応可能なメソッドが少々異なる部分がありますが、jQueryはそれをほぼ意識せず使用できることにあります。

`DOM操作`や`Ajax機能`の記述も楽になりことも利点です。
他にもアニメーションなどをつけるなどもできるため、ユーザーは目で楽しめます。
フロントにはもってこいの代物となっています。

しかし、メリットばかりではありません。
デメリットとしては、jQueryの読み込みが発生するため、jQueryでの記述が多いと処理が重くなる場合があります。
さらに、プラグインという便利な拡張機能があります。プラグインを使うとバラエティに富んだ表現を行えるのですが、使いすぎると非常に重たくなるため注意が必要です。

`アプリケーションのUI/UXは非常に素晴らしい`が、`ユーザーは待ち時間が長くなってしまう`可能性がある。
それが`jQuery`です。

# 2.jQueryを使用するには

`jQueryライブラリ`を読み込む必要があります。
`<head>タグの中でURLを読み込む`ことで使用できるようになります。
今回はjQueryのCDN（コンテンツデリバリーネットワーク）を利用します。

```index.html
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

```

# 3.jQueryのファイルを読み込むには

.js形式のファイルにコードを書きます。 
HTMLファイルで、`<script src="ファイルのURL"></script>`と書くことで、jQueryのコードを記述するファイルが読み込まれます。 
`<script>`はCSSファイルの読み込みのように`<head>`タグの中にも書けます。しかし、`</body>`の直前に書くことで、WEBページの表示速度を早めることが出来ます。

```index.html
  <head>
   #省略
  </head>

  <body>
   #省略
    <script src="script.js"></script>
  </bode>
```

# 4.HTML要素を取得してみる

### 取得する方法
まず基本形は以下のようになっています。
`$("セレクタ")`

$()とすることで取得してきたセレクタを読み込みます。

肝心の取得の仕方です。
例として、example.htmlの中に、

```example.html
<div class="class" id="id">ただの例です</dev>

```
があるとします。
この時、

divタグを取得したい場合は、`$("div")`
classを取得したいときは`$(".class")`
idを取得したときは`$("#id")`
となります。

取得してくる種類によって`何もなし`、`ドット`、`シャープ`と異なるので注意が必要です。

# 5.命令してみる

実際に取得してきた要素にアニメーションをつけてみます。
今回は`fadeOutメソッド`を使ってみます。
`fadeOutメソッド`は要素を隠す際に使われるメソッドです。
徐々に消えていく演出ができます。

```example.js

$('セレクタ').fadeOut();
// 取得したセレクタが徐々に消えていきます。

$('セレクタ').fadeOut(2000);
// 引数に数字を入れると消えるまでの秒数を決められます。
// この場合は2000ミリ秒なので、2秒です。
```

他にも消えていく演出には`slideUp`や`hide`などがありますので、是非試してみてください。

# 終わりに

まだまだ序盤です。
ドラ◯エ５でいうならビスタ港から出たばかりでしょうね。
ここからイベントハンドラーを駆使することでいろんな表現ができるようなので覚えていきたいですね。
ISR(Incremental Static Regeneration)とは？

# ISR(Incremental Static Regeneration)とは？
Next.js のビルドにはいくつかパターンがあります。その中でNext.js 9.4 からIncremental Static Regeneration という機能が導入されました。

直訳すると、(段階的な静的サイト生成)となります。
簡単に説明すると、**リクエストに対して静的にビルドされたページを返す。かつ、有効期限を超えたら非同期で静的ページの再生成をSSRで行うことです。**

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/9606c87d-10b4-ed54-04a3-9079e2fc359b.png)

## メリットって？
* 事前にすべてのページ生成はせず、1度リクエストされた際のレスポンス内容が生成される。
* アクセス時に初めて生成されるので初回ビルドが高速になる。
* 一定期間ごとにSSRを行うので、描画が高速になる。
* CDNのキャッシュを有効活用しつつ、静的ページの更新を自動的に行え、一定時間後再度リクエストがあった場合、次回以降の内容をビルドするので内容が更新される。

# VercelにDeployしてみる

## ISRのpagesコンポーネントを作成

* getStaticProps で revalidate を設定すると **ISR** になります。
* revalidate の値は、前回から何秒以内のアクセスを無視するかを指定します。

```pages/index.tsx
export default function Index({current}) {
  return (
    <div>
        現在時刻は{current}です。
    </div>
  );
}

export async function getStaticProps() {
    const date = new Date();
    const current = date.toLocaleString()
  return {
    props: {
      current,
    },
    revalidate: 10,
  };
}
```

## VercelにDeployしてみる

上記のコードをVercelにdeployして挙動を確認してみました。
コード的には、10秒間はキャッシュされたデータが返却され、10秒後に再描写され内容が更新されていることが確認できます。

![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/019833f4-23cb-1366-a105-5686a3713006.gif)


# 参考
[Zenn 個人開発の限界に挑んだ話](https://event.shoeisha.jp/devsumi/20210218/session/3082/)
[Next.jsのIncremental Static RegenerationをVercel以外でやってみる](https://www.keisuke69.net/entry/2020/12/09/154446)
pandasで特定の列を、何番目と何番目というように、数値で抽出する(listで[2,5,8]など）

複数カラムあるデータフレームで、特定の列だけ番号で複数指定して抽出したいという
シチュエーションは皆さんよくあることだと思いますが、
私は書く度にググってるのので自分用のメモを書いときます。

dfの２番目、５番目、８番目の列を抽出したいときは次のようになります。

```python
df.iloc[:, [2,5,8]]
```

これを見ると、なんだー、という感じなのですが、ググってもなかなか出てきません。。


特定の列をカラム名で指示して抽出する方法はこちらにのっていました。
https://qiita.com/guai3/items/f5ce0ab817f51e0a5d04


追記：
連番はスライスが使えないようなので、このようにrangeを使いリストの足し算で解決しました。

```python
df.iloc[:, [2]+list(range(5,8))]  #2,5,6,7列目
```
PyAutoGUIのライブラリ使用時に「'_idat' object has no attribute 'fileno'」が出て詰まった話

PythonでPyAutoGUIを使ってスクリーンショットを取るコードを書いてコンパイルしたときにこのエラーが発生した

調べても全然ヒットしなかったのだが、思わぬところに落とし穴があったので備忘録

# 原因

結論、VScodeに画面録画の権限を与えられていなかったことが問題でした

# 解決策

そうと分かればやることはかんたん

「システム環境設定」の「セキュリティとプライバシー」を開き、
![スクリーンショット 2021-02-21 21.01.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553852/6e9e5aa9-9090-0e37-81ed-2019a6f4919b.png)

鍵クリックして、Codeに権限を与えればOK
![スクリーンショット 2021-02-21 21.01.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553852/bd65433e-5e42-81ea-ec10-aa5c93204b7c.png)


もうちょっとわかりやすくエラー内容出してほちぃ
【初学者】Java入門 Lesson.1

##はじめに

スクールではRubyとRailsを学習しましたが、今後は新たな職場で新たな言語を使用しなければならないので、汎用性の高いJavaを学習していこうと思います。

##Javaとは
世界中にたくさんの開発者がいる有名な言語。
大規模システム、Webアプリケーション、スマートフォンアプリなど、様々な場所で活躍している。
※JavaとJavaScriptは、メロンとメロンパンくらい無関係。
　
プログラミング言語求人ランキング
　　１位　Java  （３１．１％）
　　２位　PHP   （14.96％）
　　３位　Ruby  （8.24％）
　　　※レバテック　プログラミング言語別求人案件ランキング（２０１９年）

##Javaの特徴
```
　● コンパイラ言語
　● オブジェクト指向言語　
　● OSを選ばない
　● JVM言語
```
__【コンパイラ言語】__
◉「機械語に一括して変換してから実行する」プログラミング言語
◉処理が高速である。

__【オブジェクト指向言語】__
◉オブジェクト指向開発★に適した言語
（★データと処理をワンセットとして組み立てていく開発手法）

__【OSを選ばない】__
◉どのプラットフォームでも可動である
◉理由 → 「JVM」上で動くから
◉「JVM」…Java Virtual Machine （Java仮想マシンのこと)

__【JVM言語】__
◉JVM上で動作する言語のこと
◉「Scala」「Kotlin」「Java」があるが、それぞれに相互運用生がある。

__Javaプログラムは、JVMがPCに読み取れる機械語へ変換してから実行される。
そのため、どのプラットフォームでも動く。__　


##環境構築
```
 【１】　JDK(Java Development Kit)のインストール
  = プログラムを実行するときに必要な機能がパッケージされたもの
```
１）Gogle検索でJDKと入力
２）「Java DE　ダウンロード - Oracle」をクリック
３）インストールする
![スクリーンショット 2021-02-21 18.43.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/f0a6962b-d90e-e22e-b2e4-8680951c4251.png)

![スクリーンショット 2021-02-21 18.45.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/ac7fb398-3910-81ce-c7d4-7b235f806ee3.png)

![スクリーンショット 2021-02-21 18.46.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/16096288-bdde-5164-126f-24f45a956e5a.png)

```
 【２】　ターミナルを起動してJavaのバージョンを確認する。
% java　-version　　
```
　下記の様にバージョンが返ってくれば成功。
![スクリーンショット 2021-02-21 18.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/b6c03acb-e849-f8d1-606d-dff08749d947.png)

```
 【３】　「VScode」 に 「Java Exstension Pack」 をインストールする
  Java Exstension Pack = Javaの開発に必要な環境をインストールしてくれる
```
![スクリーンショット 2021-02-21 19.03.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/72efb052-baff-568d-e45a-0cf47809d246.png)

##実行　
```
 【１】　Javaファイルの作成　
```
１）デスクトップに「MyJava」というフォルダを作る
２）VScodeでフォルダを開く
３）新規でファイルを作成する。ファイルの拡張子を「◯◯◯.java」でOK

```
 【2】　記述　
```
__【クラス】__

```Greeting.java
class Greeting {
}
```
◉ファイル名とクラス名は同じにする必要がある
◉クラス名は頭文字を大文字で記述
◉クラス名のあとは波括弧、波括弧内のことは「ブロック」という
◉ブロックに「処理」を記述していく

__【メソッド】__※プログラミングでは「処理」のことを指す。

```Greeting.java
class Greeting {
  public static void main(String args[]){
  }
}
```
◉ブロック(波括弧内）に「処理 = メソッド」を記述していく

__【コンパイル方法と実行】__

```Greeting.java
class Greeting {
  public static void main(String args[]){
    System.out.println("Good morning");

    System.out.println("Good afternoon");

    System.out.println("Good evening");
  }
  
}
```
◉println(プリントライン）
◉処理の終わりにはセミコロン「；」を記述するのがJavaのルール
![スクリーンショット 2021-02-21 20.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/cf49000f-5a0f-3137-f275-05fd7142a07e.png)
ターミナルでファイルを実行する
◉コンパイル = JavaのプログラムをPCが読み取れる機械語に変換すること

```
% javac ファイル名.java
```
すると、「ファイル名.class」が作成される。
![スクリーンショット 2021-02-21 20.41.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/8887967b-a8ea-9d02-6ec4-922cabc8d0ae.png)
続いて、ファイルを実行する

```
% java ファイル名
```
![スクリーンショット 2021-02-21 20.48.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/109ac7ad-86a7-77f1-ebca-fd096c97b49f.png)
成長につながる勤怠Aの進め方

## 勤怠Aに取り組む目的とは

これまでにやったことのない機能を実装するためにたくさんの壁とぶつかり、プログラミングの経験値を一気に上げること。
勤怠Aの「取り組み方」によって成長度合いが変わってきます。

## 成長するための具体的なポイント

#### ●わからないことがある時はまず自分で考えてみる。
- 自分は何がわからないのか？を掘り下げる。自分が理解できていないことを明確にしてからピンポイントで復習したり、必要な情報を集める。
- エラー文の意味がわからない → ググる。翻訳する。
- 参考資料通りやったけど思い通りに動かない →　どこかに資料と違っている箇所がないか改めて確認してみる。
- 何がなんだかわからず正直全てがチンプンカンプン。コントローラーって何？モデルって何？ビューって何？な場合 → 潔く「Ruby on Railsで簡単なSNSアプリを作ろう」に戻ってサクッともう一周する。


#### ●勤怠Aの仕様書を初めてみた時は衝撃を受けました。
- 一体どうやって実装したらいいんだろう..と絶望しました。
- 仕様書を見ると一気に実装内容が増えて目が回りそうになりますが、複雑そうな処理も結局は小さな一つひとつのプログラムの集合体です。
- 一つずつコツコツ片付けていけば必ず終わります。
- 難しそうなタスクを分解して細かいタスクに分けていきましょう。

 
#### ●エラーページ、エラー文をよく読む。
- 英語が読めない時は翻訳する。
- エラー分をコピペしてググる。
- エラー分と向き合いましょう！

#### ●rails sしているターミナルをよく見る。
- ターミナルはたくさんのヒントで溢れています。
- e.g. モーダルが上手く表示されない時
- e.g. 登録や更新がうまくいかない時
- e.g. エラーが出た時(エラーページと一緒にターミナルも確認しましょう) 

#### ●デバッグする
- 開発ですごくよく使います。
- e.g. 欲しい数値や情報が取得できているか確認したいとき。
- debuggerを使う（<%= debugger %>でviewでも使用可能）
- debuggerで処理が止まっている間にターミナルに「params」と入力するとどんなパラメーターが飛んできているか確認することができます。
- chromeの検証モードでconsoleを開く(JSが関わっている場合に確認します。例：jQuery, bootstrap 何かがうまくいっていない場合には赤い三角マークが出る)

#### ●人に聞く時には直接的な答えではなくヒントをもらうようにする

- 答えを教えてください△ 解決してください△
  - 最終的に問題を解決するのは自分。自分が何を理解していないのか立ち止まって考えることが大事。どうしてもわからない時は聞くしかないのですが、解決への道筋も頭に入れましょう。
- 参考記事を教えてもらう○
  - 将来的に自分でググって必要な情報を探せるようになったら怖いもの無し。Railsに関しては情報が非常に多いのでググればなんとかなる。参考記事を共有してもらった時にこの記事はどんな「検索キーワード」で見つけましたか？と聞くのも○
- なんで上手くいかないのかわからないので一緒に見てください△
  - まずは自分で努力して原因を探してみる。ターミナルは見ましたか？エラー文は自分でググりましたか？誤字や脱字がないか確認しましたか？自分で調べてもわからない時にはもちろん人に聞いてもOK。 

#### ●過去のカリキュラムだけでなくググって情報を探すことに慣れていく
- ポートフォリオ作成以降はググって情報を探す機会がぐんと増えます。

#### ●Railsの公式リファレンスやgemのREADMEなど、公式の情報にも徐々に触れていく
- Qiita記事も大変参考になりますが公式の情報はより確かです（ex. Railsガイド）

#### ●何か調べるときには複数の検索結果(資料)に目を通す
- ググって調べるときには一つや二つの記事でなく、５つ以上目を通しましょう。
- 実装内容が微妙に違ったりする中でどれがもっとも自分の実現したい実装内容に近いか精査してから実装する。
<br>

#### ●困った時に上手に自分の状況を伝えられるようになっておくと◯

- チーム開発や実際の現場で困った時に助けてもらいやすいコミュニケーションを知っておきましょう
- ×「〇〇をしようとしたらこの様なエラーが出ました。＋エラー文のコピペ」【情報不足】
- ◯「〇〇をしようとしたらこの様なエラーが出ました。自分では△△に原因がありそうだと思ったので××を試しましたがどうやら違うようです。こういった場合はどのあたりを確認すると良いでしょうか？＋エラー文のコピペ、関連実装部分のスニペ」【自分の努力と必要な情報を相手に伝える】

## 勤怠Aはただ終わらせるだけでは意味がありません。

勤怠Aを通して成長することに意味があります。
「自分が理解できていないこと」を知り、一つひとつ克服していきましょう！
Zoomable Scatterplot (d3.js) ＋ リサイズ機能追加

こんにちは。
"[Zoomable Scatterplot](https://observablehq.com/@d3/zoomable-scatterplot)" (observablehq.com) という記事を見つけました（d3.js 利用）。

<img width="240" alt="scatter.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54617/835c1b2c-5176-0718-941e-494f216a2276.jpeg">

* 特徴： 散布図プロット、xy軸付き、ズーム＆移動に対応（マウス操作）

これに対し今回、機能追加しました（ウィンドウのリサイズへの対応）。動作例およびソースはこちらで見られます。

* [d3.js: Zoomable scatterplot with handling window-resize](https://bl.ocks.org/kkdd/c13a7d51b2f2afe297dbd7712853ebbb) (bl.ocks.org)
React+Material-uiでページ内リンクを実現する

# はじめに
タイトルの通りです。
React+Material-uiでWebサイトを作成していて、ページ内でひゅっとリンクするあれを作りたかったのですが、少し悩んだのでメモ程度に残します。

# ページ内リンクの基本
HTML+CSSでページ内リンクを実装する方法は以下の通りです。
ジャンプ先のオブジェクトにidを設定します

~~~
<p id="to"></p>
~~~

ジャンプしたいオブジェクトにhrefを記載します

~~~
<a href="#to">ジャンプする！</a>
~~~

# Reactでの書き方
これをReactで書くとこうなります。

```react:App.tsx
<p id="to"></p>
```

```react:App.tsx
  <Button
    onClick={() => {
      window.location.href = "#id";
    }}
  >
    ジャンプする！
  </Button>;
```

window.location.hrefでボタンでリンク遷移ができます。
ここにジャンプ先のidを指定するとOKです

# 最後に
React+Material-uiと書きましたが、Material-uiはそんなに関係ないですね。
Reactでの書き方でした。以上です。
【Python】読込むブック名とセルの値をパラメーターにする。②

pythonを使用してExcelファイルの操作を勉強しています。
本日の気づき(復習)は、パラメーターに関してです。
pythonでExcelを操作するため、openpyxlというパッケージを使用しています。

後々レイアウトを変更したり、プログラムで読み込むブック名やセルの値を変えてしまうかもしれない時の対処法です。
なんだかちょっと実戦形式っぽくてワクワクしてます。

今回はこちらのブック「日報.xlsx」を、使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927441/bbc57acb-3d52-bacc-6512-533a4f62f4bf.png)

# input関数
input関数を使うとプログラム実行時に対話形式でパラメーターを入力できることが強みですね。

```python
input(コマンドラインに表示する文言)
```

```python:input_arguments.py
from openpyxl import load_workbook

filename = input('読込むブック名: ')
cellno = input('読込むセル名(例 A1): ')

wb = load_workbook(filename, read_only=True)
ws = wb.active

print(ws[cellno].value)
```

```
読込むブック名: 日報.xlsx
読込むセル名(例 A1): I1
-->hogehoge
```

以前勉強したところでもあり、こちらはすんなり腹に降りてきてくれました。
PHPで変数展開する場合はダブルクォーテーション

#概要
`Laravel Eloquent`で検索機能の部分一致を実装したのですが、うまく動かなかったのでそのときの対処法を起筆します。

#失敗方法
```Controller.php
<?php

namespace App\Http\Controllers;

use App\Models\Tag;
use Illuminate\Http\Request;

class SearchController extends Controller
{
    public function search(Request $request)
    {
        $keyword = $request->q;

        if(!empty($keyword)){
            $tag = Tag::select('tag_id', 'tag_name')->where('tag_name', 'like', '%{$keyword}%')->get();
        }
        return $tag;
    }
}


```

#対処法
PHPで変数展開を行う場合は、変数をシングルクォーテーションではなくダブルクォーテーションで囲わなければなりません。

```Controller.php
<?php

namespace App\Http\Controllers;

use App\Models\Tag;
use Illuminate\Http\Request;

class SearchController extends Controller
{
    public function search(Request $request)
    {
        $keyword = $request->q;

        if(!empty($keyword)){
            //修正↓
            $tag = Tag::select('tag_id', 'tag_name')->where('tag_name', 'LIKE', "%{$keyword}%")->get();
        }
        return $tag;
    }
}
```
EC2で構築した本番環境のログを確認して、エラーを修正した後デプロイするまで(備忘録)

# 開発環境
Mac OS Catalina 10.15.7
ruby 2.6系
rails 6.0系

# 本番環境
nginx 1.18.0
AWS(EC2, S3, ALB, Route53)

# 前提

- 備忘録の意味合いが強い記事です

- capistranoのによる自動デプロイを導入しています

#EC2にログイン

```
# ターミナル
ssh -i [ダウンロードした鍵の名前].pem ec2-user@[インスタンスのElastic IP]
```

#ディレクトリを移動

コマンドを実行してlogディレクトリまで移動する

```
[ec2-user@ip-xxx-xx-xx-xxx~]$ cd /var/www/アプリケーションの名前
```

```
[ec2-user@ip-xxx-xx-xx-xxx <アプリケーション名>]$ cd current
```

```
[ec2-user@ip-xxx-xx-xx-xxx current]$ cd log
```

```
[ec2-user@ip-xxx-xx-xx-xxx log]$ ls
production.log  unicorn.stderr.log  unicorn.stdout.log
```

#ログを確認

```
# 実行すると最新のログを10行分表示
[ec2-user@ip-xxx-xx-xx-xxx log]$ tail -f production.log
```

実際に本番環境でエラーになっている機能を試したり、エラーになっているページに遷移した際のログを読みエラー内容を把握する

#修正した後、再びデプロイする

```
# プロセスIDを確認
[ec2-user@ip-xxx-xx-xx-xxx <アプリケーション名>]$ ps aux | grep unicorn
ec2-user 19728 ←この数字の部分(killするのはmaster)
```

```
# プロセスIDをkillする
[ec2-user@ip-xxx-xx-xx-xxx <アプリケーション名>]$ kill 19728
```

```
# 再びデプロイ(ローカルから)
bundle exec cap production deploy
```

注意として、デプロイし直した際に画像データが消えてしまうが、S3に画像の保存先を変えることで解決できる

以上です。
2進数の四則演算①

##２進数の足し算

２進数の足し算は１０進数と同じである
違いとしては桁上がりが２ずつ行われることに注意。
![スクリーンショット 2021-02-21 16.04.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1131065/15d9ec7a-26a3-1a5f-a571-e2db32788140.png)

##２進数の引き算

パソコンは基本的に足し算以外計算することができない。

引き算を行う際は**引き算を足し算に一度直して**計算している。
そこで出てくるのが**補数**という表現

例えば８ビットで表される２進数を先頭の１ビットが０が正の数、１が負の数・・・①
と決めておき、
３ー３の計算を行う際

**３＋（−３）**と置き換える。

そしてそれぞれ①を用いて３を２進数で表すと
３＝００００００１１
−3＝１０００００１１　となる。
しかしこれを足しても0にはならない。
そこで補数を用いる。

補数はその桁数での最大数を得るために補う数と
次の桁に繰り上がるために補う数の２種類がある。

２進数の引き算の場合、**2の補数**表現を用いて負の数を表現します。
２の補数を表す方法として
**１と０をひっくり返して1の補数を作り、その数に”１”を足します**

ひっくり返すと・・・　−３＝１０００００１１→１１１１１１００
さらにここに”１”を加えると・・・１１１１１１０１となる

これを計算すると・・・
![スクリーンショット 2021-02-21 16.34.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1131065/9ecf9ebf-caa8-a0c7-d372-fb1802a4e749.png)

となり、８ビットまでの表現なので９桁目の１が桁あふれになり、省略され、
答えは０となる。

##参考文献##
キタミ式基本情報技術者P42〜P48
Pythonの引数評価戦略は"参照渡し"ではないと何度でも主張すべきそうすべき

Google検索すると、いまだにPythonの引数は参照渡しされるとする記事が後を絶たないので注意喚起。

## なんで？

**A. 公式ドキュメントにそう書かれているからです。**

まず、当該部分の原文はこう。

[How do I write a function with output parameters (call by reference)? - Programming FAQ &#8212; Python 3.8.8 documentation](https://docs.python.org/3.8/faq/programming.html#how-do-i-write-a-function-with-output-parameters-call-by-reference)

> Remember that arguments are passed by assignment in Python. Since assignment just creates references to objects, there’s no alias between an argument name in the caller and callee, and so no call-by-reference per se. You can achieve the desired effect in a number of ways.

Pythonに"call-by-reference"自体は存在しないとはっきり書かれています。

そして、当該部分の日本語訳は次のようになっています。

[出力引数のある関数 (参照渡し) はどのように書きますか？ - プログラミング FAQ &#8212; Python 3.8.8 ドキュメント](https://docs.python.org/ja/3.8/faq/programming.html#how-do-i-write-a-function-with-output-parameters-call-by-reference)

> 前提として、Python では引数は代入によって渡されます。代入はオブジェクトへの参照を作るだけなので、呼び出し元と呼び出し先にある引数名の間にエイリアスはありませんし、参照渡しそれ自体はありません。望む効果を得るためには幾つかの方法があります。

少なくともPythonのドキュメントにおいては"call-by-reference"="参照渡し"であり、そしてそれはPythonにはないと書かれていることがわかります。


#### Q1. 日本語訳と行っても所詮は非公式では？

Pythonにおいて、日本語を含むいくつかの翻訳版ドキュメントはPEP 545を通してPythonソフトウェア財団の活動に取り込まれた公式ドキュメントです。[^1]
そこで用いられている用語の定義に異議があるならば、寄稿規約に従ってIssueを立て修正の合意を取り付ける必要があります。

[^1]: 余談ですが、日本語は原文を除けばもっとも翻訳完了率の高い言語だそうです。翻訳プロジェクトの方々には頭が上がりません。

#### Q2. 評価戦略の用語は混乱しがちなので、言語固有の事情に従って説明すべきでは？

私もそう思います。
ただ、言語公式のドキュメントで表明されているからにはそれに従うのが正しいと思います。

#### Q3. じゃあPythonの引数評価戦略はなんなの？

先の引用の通り、Pythonにおける引数は代入であるとされていますが、具体的にこの戦略の名前が明記されているわけではありません。振る舞いとしては"call-by-sharing"などと称される戦略と同じですが、この用語が公式ドキュメント中で用いられているわけでもないようです。誤解を生まない範囲で自由な語句を使って表現すればよい、というところですが、それが簡単にできるならきっと本稿も無用の長物なのでしょう。

----

そんな訳で、**『Pythonの引数は参照渡し』は明確に誤り**です。
特に新人の方は公式ドキュメントをよく読んで、正しい知識を身につけることを大事にしましょう。
reactで条件にあった時に特定のclassを付与する書き方

今回、reactでclassNameを動的に付与させたいと思ったので、調べたことを備忘録として残しておきます。

##書き方

### 共通のクラス名を付与しない場合

① true or false で違うクラス名を付与する

```react

<p className={completed ? "completed" : "incomplete"}>
   hoge
</p>
```
この場合、trueならcompletedが、falseならincompleteが付与されます。

② falseの場合はクラス名なし、trueの時に１つだけクラス名を付与
※false時にクラス名を付与したい場合はコロンの右側にクラス名を記載する

```react

<p className={completed ? "completed" : ""}>
   completed  
</p>
```
③ falseの場合はクラス名なし、trueの時に2つ以上クラス名を付与
※false時にクラス名を付与したい場合はコロンの右側にクラス名を記載する

```react

<p className={completed ? "completed hoge" : ""}>
   completed  
</p>
```

この場合は通常のクラス名の記載方法と同じで半角スペースを開けて記載すればOK

###どちらにも共通のクラス名を付与した上で、+αで条件によってクラス名を付与したい場合

```react

<p className={`item ${completed ? "completed" : ""}`}>
   completed  
</p>
```

この場合、completedがtrueでもfalseでもクラス名``item``は付与されます。
バッククオートで全体を囲み、条件分岐の箇所を${}で囲ってあげればOKです。条件分岐の書き方に関しては今までの書き方と同じです。

+を使って以下のように書くこともできます。

```react

<p className={'item ' + (completed ? "completed" : "")}>
   completed  
</p>
```
気をつけるポイントとしては``item``の後に半角を入れる必要があります。
もし、半角を入れずに、completedがtrueになった場合、クラス名が``itemcompleted``となってしまい、思うようにCSSが適用されなくなってしまいます。


以上、動的にクラス名を付与したいときの書き方でした！

###参考記事
[【JS】ReactのclassNameの色々な書き方紹介](https://jsnotice.com/posts/2020-06-04/#%E6%9D%A1%E4%BB%B6%E3%81%AB%E5%90%88%E3%81%88%E3%81%B0class%E3%82%92%E4%BB%98%E4%B8%8E)